@font-face {
  font-family: "Yishi Kai";
  src: url("https://img.praybuddha.com/site/d0d3320caa8a55d2/yishi/fonts/yishi-kai.woff2?v=6") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yishi Hand";
  src: url("https://img.praybuddha.com/site/d0d3320caa8a55d2/yishi/fonts/yishi-hand.woff2?v=6") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  --night: #070605;
  --ink: #241d15;
  --ink-soft: #59452f;
  --paper: #e9dec8;
  --paper-2: #ddceb0;
  --warm: #e8b273;
  --vermilion: #96301f;
  --guide: #b28d63;
  --song: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --read: "Yishi Kai", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", serif;
  --hand: "Yishi Hand", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --paper-w: min(640px, 90vw);
  --paper-h: min(74vh, 700px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

html { background: #070605; color-scheme: dark; }

body {
  margin: 0;
  background: #070605;
  color: #e4d6bd;
  font-family: var(--song);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; }

/* ─────────────────────────────  room  ───────────────────────────── */

.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0806;
  transition: filter 1.6s var(--ease), opacity 1.6s var(--ease);
}

.stage-cover .room { filter: brightness(.72) saturate(.94); }
.stage-cover .figure-wrap { opacity: 0; }

.wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 38% at 50% 47%, rgba(150, 96, 52, .18), transparent 72%),
    radial-gradient(56% 48% at 22% 64%, rgba(158, 96, 44, .30), transparent 72%),
    radial-gradient(46% 50% at 80% 14%, rgba(96, 112, 106, .13), transparent 70%),
    linear-gradient(180deg, #0a0806 0%, #120d09 40%, #1c130c 76%, #150e09 100%);
}

.window {
  position: absolute;
  right: 10%;
  top: 8%;
  width: min(196px, 15vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  opacity: .9;
  border: 1px solid rgba(190, 196, 178, .10);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .38), 0 0 70px rgba(140, 150, 138, .05);
  filter: blur(.7px);
}

.window-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 38%, rgba(216, 222, 206, .30), rgba(138, 152, 140, .10) 46%, transparent 68%),
    linear-gradient(180deg, rgba(70, 80, 72, .05), rgba(24, 28, 25, .10));
}

.branch {
  position: absolute;
  left: -3%;
  top: -1%;
  width: 46vw;
  height: 26vh;
  opacity: .82;
  filter: blur(1.1px);
}

.figure-wrap {
  position: absolute;
  left: 50%;
  bottom: 26.5%;
  width: min(330px, 29vw);
  transform: translateX(-50%);
  opacity: .9;
  filter: brightness(.86);
  transition: opacity 1.5s var(--ease), filter 1.5s var(--ease), transform 1.5s var(--ease);
}

.figure-wrap::before {
  content: "";
  position: absolute;
  inset: -42% -55% -20%;
  background: radial-gradient(circle at 50% 58%, rgba(150, 92, 46, .20), transparent 68%);
  filter: blur(28px);
  z-index: -1;
}

.figure-svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.006); }
}

.table {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 27%;
  background:
    radial-gradient(28% 60% at 22% 6%, rgba(214, 146, 74, .22), transparent 70%),
    radial-gradient(60% 90% at 50% 0%, rgba(120, 74, 38, .18), transparent 76%),
    linear-gradient(180deg, #2c1b10 0%, #1e120a 16%, #120b07 55%, #080605 100%);
  border-top: 1px solid rgba(232, 176, 108, .12);
  box-shadow: 0 -2px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 214, 160, .06);
}

.table::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(179deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 7px);
  opacity: .18;
  pointer-events: none;
}

.table::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 0;
  width: 30%;
  height: 38%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(236, 172, 100, .13), transparent 72%);
  filter: blur(10px);
}

.lamp {
  position: absolute;
  left: 22%;
  bottom: 16%;
  width: 78px;
  height: 96px;
  z-index: 2;
}

.lamp-glow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 50vw;
  height: 50vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(236, 172, 100, .26) 0%, rgba(226, 150, 74, .10) 36%, transparent 66%);
  pointer-events: none;
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
}

.lamp-bowl {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 58px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #8a5f36, #3c2616 58%, #170e08);
  box-shadow: 0 0 0 1px rgba(210, 150, 84, .16), 0 8px 20px rgba(0, 0, 0, .66), inset 0 3px 4px rgba(255, 208, 146, .22);
}

.lamp-bowl i {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 40px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 218, 156, .5), rgba(255, 190, 110, .05) 72%);
  filter: blur(.6px);
}

.flame {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 9px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff6df 0%, #ffd08c 34%, #e8913f 66%, rgba(190, 96, 32, 0) 100%);
  filter: blur(.4px);
  box-shadow: 0 0 14px rgba(255, 186, 106, .8), 0 0 44px rgba(255, 160, 70, .45);
  transform-origin: 50% 100%;
  animation: flicker 3.4s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: .96; }
  28% { transform: translateX(-51%) scale(.94, 1.04); opacity: 1; }
  52% { transform: translateX(-49%) scale(1.03, .97); opacity: .9; }
  71% { transform: translateX(-50%) scale(.97, 1.02); opacity: .98; }
}

.incense {
  position: absolute;
  right: 8%;
  bottom: 16%;
  height: 30vh;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.incense-stick {
  width: 1.5px;
  height: var(--stick, 26vh);
  position: relative;
  background: linear-gradient(180deg, #8c7354, #6c5539 55%, #4c3a26);
  transition: height 2.4s var(--ease);
  box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}

.ember {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 4px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffd9a3 0%, #ff8f42 48%, #c84a18 100%);
  box-shadow: 0 0 8px rgba(255, 140, 60, .9), 0 0 20px rgba(255, 120, 40, .35);
}

.burner {
  width: 34px;
  height: 10px;
  margin-top: 2px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #5c4229, #25170f 70%, #100a06);
  box-shadow: 0 0 0 1px rgba(190, 130, 70, .10), 0 5px 12px rgba(0, 0, 0, .55);
}

#air {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ─────────────────────────────  paper  ───────────────────────────── */

.scroll {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}

body.reading .scroll { opacity: 1; }

.scroll-paper {
  position: relative;
  width: var(--paper-w);
  height: var(--paper-h);
  pointer-events: auto;
  color: var(--ink);
  background:
    radial-gradient(80% 55% at 24% 4%, rgba(255, 247, 226, .85), rgba(255, 247, 226, 0) 58%),
    linear-gradient(163deg, #eee4cf 0%, #e8dcc2 46%, #ded0b2 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(74, 50, 28, .42),
    0 1px 0 rgba(255, 250, 236, .55) inset,
    0 0 0 9px rgba(70, 42, 26, .26),
    0 34px 70px rgba(0, 0, 0, .62),
    0 6px 18px rgba(0, 0, 0, .42);
  transform-origin: 50% 0%;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease), clip-path 1.6s var(--ease);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}

.scroll-paper::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(120, 84, 48, .16);
  pointer-events: none;
}

.paper-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.viewport {
  position: absolute;
  inset: 38px 38px 46px;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0);
}

.viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(to top, rgba(228, 214, 187, .95), rgba(228, 214, 187, 0));
  z-index: 3;
  pointer-events: none;
}

.viewport::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  background: linear-gradient(90deg, rgba(74, 48, 24, .16), rgba(74, 48, 24, 0));
  z-index: 2;
  pointer-events: none;
}

.track {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 28px;
  will-change: transform;
  transition: transform 1.15s var(--ease);
}

.section {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100%;
  flex: 0 0 auto;
}

.section-title {
  font-family: var(--read);
  writing-mode: vertical-rl;
  height: 100%;
  margin: 0 0 0 14px;
  padding: 3px 0 0 10px;
  border-left: 1px solid rgba(120, 84, 48, .28);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .3em;
  color: #7c5b40;
  white-space: nowrap;
}

.para {
  font-family: var(--read);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: calc(100% - 28px);
  margin: 0 0 0 18px;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.95;
  letter-spacing: .055em;
  color: var(--ink);
}

.track-seal {
  align-self: flex-end;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0 2px 6px 0;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  color: #f2e4cd;
  background: var(--vermilion);
  border-radius: 2px;
  transform: rotate(-2.5deg);
  box-shadow: 0 0 0 1px rgba(90, 24, 14, .5), 0 2px 6px rgba(70, 20, 10, .3);
}

.scroll-paper.is-closed {
  clip-path: inset(0 0 100% 0);
  opacity: .4;
}

/* ─────────────────────────────  name / mind  ───────────────────────────── */

.name-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 42px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease);
}

.name-line {
  font-family: var(--read);
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: .18em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

body.mode-name .name-layer { opacity: 1; }
body.mode-name .n1 { opacity: .32; transform: none; transition-delay: .1s; }
body.mode-name .n2 { opacity: .62; transform: none; transition-delay: .8s; }
body.mode-name .n3 { opacity: 1; color: var(--vermilion); transform: none; transition-delay: 1.6s; }
body.mode-name .track { opacity: .1; filter: blur(1.2px); }
body.mode-name .name-layer { pointer-events: none; }

.mind-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 5vw, 56px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--ease);
}

.mind-col {
  font-family: var(--read);
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(21px, 2.1vw, 27px);
  letter-spacing: .2em;
  color: #1f1812;
  opacity: 0;
}

.mind-cap {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--read);
  font-size: 16px;
  letter-spacing: .32em;
  color: #6b4a2e;
  opacity: 0;
}

body.mode-mind .mind-layer { opacity: 1; }
body.mode-mind .mind-col { animation: mindfall 2.8s var(--ease) forwards; }
body.mode-mind .mind-col:nth-child(3) { animation-delay: .4s; }
body.mode-mind .mind-col:nth-child(4) { animation-delay: .8s; }
body.mode-mind .mind-cap { animation: capin 1.2s var(--ease) 2.4s forwards; }
body.mode-mind .track { opacity: .1; filter: blur(1.2px); }

@keyframes mindfall {
  0% { opacity: .85; transform: translateY(0); }
  50% { opacity: .8; transform: translateY(20px); }
  100% { opacity: 0; transform: translateY(70px); }
}

@keyframes capin { to { opacity: .9; } }

/* ─────────────────────────────  guide  ───────────────────────────── */

.guide {
  position: fixed;
  left: 5.4vw;
  top: 25vh;
  z-index: 4;
  margin: 0;
  writing-mode: vertical-rl;
  max-height: 58vh;
  font-family: var(--read);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .11em;
  color: #c6a176;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .9);
  pointer-events: none;
}

.guide.is-in { opacity: .92; transform: none; }

/* ─────────────────────────────  tags  ───────────────────────────── */

.tags {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tag {
  font-family: var(--read);
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 42px;
  color: var(--vermilion);
  font-size: 21px;
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  text-shadow: 0 0 18px rgba(233, 222, 200, .95);
}

.tag::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: rgba(124, 87, 54, .45);
}

.t1 { left: 44.5%; top: 26%; }
.t2 { left: 49.5%; top: 43%; }
.t3 { left: 45.5%; top: 60%; }

body.mode-see .t1 { opacity: .92; transform: none; transition-delay: .15s; }
body.mode-see .t2 { opacity: .92; transform: none; transition-delay: .7s; }
body.mode-see .t3 { opacity: .92; transform: none; transition-delay: 1.25s; }

/* ─────────────────────────────  hud  ───────────────────────────── */

.hud {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease);
}

body.reading .hud { opacity: 1; }

.mark { display: flex; align-items: center; gap: 13px; }

.mark-seal {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  writing-mode: vertical-rl;
  font-size: 9px;
  line-height: 1;
  color: #f1e3cc;
  background: var(--vermilion);
  border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}

.mark-text {
  font-size: 10px;
  letter-spacing: .32em;
  color: #8b735a;
}

.toggles { display: flex; gap: 4px; }

.toggle {
  background: none;
  border: 0;
  padding: 7px 8px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #8b735a;
  opacity: .45;
  cursor: pointer;
  transition: opacity .4s, color .4s;
}

.toggle.is-on { opacity: .9; color: #cdb28b; }
.toggle:hover { opacity: 1; }

/* ─────────────────────────────  controls  ───────────────────────────── */

.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease);
}

body.reading .controls { opacity: 1; }

.next,
.hold,
.back,
.enter,
.cover-restart,
.intro-next,
.ending-links button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.back {
  background: none;
  border: 0;
  padding: 12px 6px;
  font-size: 11px;
  letter-spacing: .2em;
  color: #b99a72;
  opacity: .55;
  transition: opacity .4s, color .4s;
}

.back:hover { opacity: 1; color: #e0c59c; }
.back[hidden] { display: none; }

.next {
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 12px 4px;
  font-size: 12px;
  letter-spacing: .34em;
  color: #cdb28b;
  opacity: .78;
  transition: opacity .4s;
}

.next:hover { opacity: 1; }
.next[hidden] { display: none; }

.next .arrow {
  display: inline-block;
  margin-left: .55em;
  transition: transform .5s var(--ease);
}

.next:hover .arrow { transform: translateX(5px); }

.hold {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: #cdb28b;
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .72;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .4s;
}

.hold:hover { opacity: 1; }
.hold[hidden] { display: none; }

.hold-ring {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(205, 178, 139, .5);
}

.hold-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(rgba(232, 178, 115, .95) calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0;
  transition: opacity .3s;
}

.hold.is-charging .hold-ring::before { opacity: 1; }

.hold-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 180, 112, .7), rgba(236, 180, 112, .06) 70%);
  opacity: .35;
  transform: scale(.9);
  transition: opacity .5s, transform .5s;
}

.hold.is-holding .hold-ring::after { opacity: 1; transform: scale(1.1); }
.hold.is-holding .hold-label { color: #ecd2a6; }

/* ─────────────────────────────  cover  ───────────────────────────── */

.cover {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background:
    radial-gradient(58% 54% at 50% 46%, rgba(10, 8, 6, .04), rgba(7, 6, 5, .72) 80%),
    linear-gradient(180deg, rgba(6, 5, 4, .34), rgba(6, 5, 4, .1) 50%, rgba(6, 5, 4, .6));
  transition: opacity 1.4s var(--ease), visibility 1.4s;
}

.cover.is-out { opacity: 0; visibility: hidden; pointer-events: none; }

.cover-v {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 30px;
  transform: translateY(-3vh);
}

.cover-kicker {
  font-family: var(--read);
  writing-mode: vertical-rl;
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .42em;
  color: #9c8161;
}

.cover-title {
  font-family: var(--read);
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(76px, 8.4vw, 116px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  color: #eadfc8;
  text-shadow: 0 2px 50px rgba(0, 0, 0, .8), 0 0 90px rgba(200, 150, 90, .12);
}

.cover-seal {
  font-family: var(--hand);
  position: absolute;
  right: -4px;
  bottom: -80px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  writing-mode: vertical-rl;
  font-size: 11px;
  line-height: 1;
  color: #f2e4cd;
  background: var(--vermilion);
  border-radius: 2px;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 1px rgba(90, 24, 14, .5);
}

.cover-copy {
  position: absolute;
  left: 7vw;
  bottom: 19vh;
}

.cover-sub {
  margin: 0 0 10px;
  font-family: var(--read);
  font-size: 16px;
  letter-spacing: .24em;
  color: #cdb28b;
}

.cover-meta {
  margin: 0;
  font-size: 10px;
  letter-spacing: .18em;
  color: #a08767;
}

.cover-actions {
  position: absolute;
  left: 50%;
  bottom: 8.5vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.enter {
  white-space: nowrap;
  padding: 13px 34px;
  background: none;
  border: 1px solid rgba(205, 178, 139, .5);
  border-radius: 1px;
  color: #e2cda8;
  font-size: 13px;
  letter-spacing: .62em;
  text-indent: .62em;
  transition: background .6s, border-color .6s, color .6s;
}

.enter:hover {
  background: rgba(205, 178, 139, .08);
  border-color: rgba(205, 178, 139, .65);
  color: #f4e6cb;
}

.enter[hidden] { display: none; }

.enter-resume {
  border-color: rgba(205, 178, 139, .58);
  color: #efd9b3;
}

.cover-restart {
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(160, 135, 103, .3);
  padding: 6px 2px;
  font-size: 10px;
  letter-spacing: .28em;
  color: #a08767;
  transition: color .4s, border-color .4s;
}

.cover-restart:hover { color: #d8bb90; border-color: rgba(216, 187, 144, .6); }
.cover-restart[hidden] { display: none; }

.cover-foot {
  position: absolute;
  right: 7vw;
  bottom: 11vh;
  margin: 0;
  font-size: 9px;
  letter-spacing: .2em;
  color: #8a7258;
}

body:not(.stage-cover) .cover { pointer-events: none; }

/* ─────────────────────────────  intro  ───────────────────────────── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: radial-gradient(52% 52% at 50% 50%, rgba(6, 5, 4, .2), rgba(6, 5, 4, .72) 80%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.intro.is-in { opacity: 1; }
.intro[hidden] { display: none; }

.intro-line {
  font-family: var(--read);
  writing-mode: vertical-rl;
  margin: 0;
  max-height: 52vh;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: .18em;
  line-height: 2;
  color: #e6d7ba;
  text-shadow: 0 3px 40px #000;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.intro-line.swap { opacity: 0; transform: translateY(9px); }

.intro-next {
  position: absolute;
  bottom: 9vh;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 14px 20px;
  font-size: 11px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #cdb08a;
  opacity: .95;
  border-bottom: 1px solid rgba(205, 176, 138, .22);
  padding-bottom: 7px;
  transition: opacity .4s, color .4s, border-color .4s;
}

.intro-next:hover { opacity: 1; color: #efd9b3; border-color: rgba(239, 217, 179, .55); }

/* ─────────────────────────────  finale  ───────────────────────────── */

body.mode-look .scroll-paper {
  opacity: 0;
  box-shadow: none;
  filter: blur(3px);
  transform: scale(.982);
}

body.mode-look .guide,
body.mode-look .hud,
body.mode-look .controls { opacity: 0 !important; }

body.mode-look .figure-wrap {
  opacity: 1;
  filter: none;
  transform: translateX(-50%) scale(1.012);
}

body.mode-look .room { filter: brightness(1.12); }

body.mode-see .scroll-paper { opacity: .5; transform: scale(1.004); }

body.mode-see .figure-wrap {
  opacity: 1;
  filter: brightness(1.08);
}

body.mode-see .room { filter: brightness(1.15); }

body.mode-observe .room { filter: brightness(.66) saturate(.8); }

body.mode-observe .scroll-paper {
  opacity: .05;
  filter: blur(8px);
  transform: scale(1.015);
}

body.mode-observe .lamp-glow { transform: translateX(-50%) scale(1.5); }

body.mode-observe .guide,
body.mode-observe .hud { opacity: 0 !important; }

body.finale .scroll { opacity: 0; transition: opacity 1.2s var(--ease); }
body.finale .hud,
body.finale .controls { opacity: 0 !important; }
body.finale .figure-wrap { opacity: .5; filter: brightness(.6); }

.drop-scene {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 54%, rgba(8, 6, 5, .4), rgba(5, 4, 3, .94) 76%);
  transition: opacity 1.6s var(--ease);
}

body.finale .drop-scene { opacity: 1; }

.drop {
  position: absolute;
  left: 50%;
  top: 74%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 249, 234, .98), rgba(240, 200, 140, .9) 26%, rgba(168, 104, 52, .85) 58%, rgba(40, 22, 12, .9) 82%, rgba(12, 8, 6, .95) 100%);
  box-shadow:
    0 0 24px rgba(240, 196, 132, .55),
    0 0 80px rgba(220, 160, 90, .22),
    inset -3px -4px 8px rgba(0, 0, 0, .5),
    inset 2px 2px 4px rgba(255, 245, 220, .55);
}

body.finale .drop { animation: dropform 3.4s cubic-bezier(.24, .62, .3, 1) forwards; }

@keyframes dropform {
  0% { opacity: 0; transform: scale(.2); filter: blur(2px); }
  15% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  42% { opacity: 1; transform: scale(2.75); }
  58% { opacity: .95; transform: scale(2.55); }
  72% { opacity: .55; transform: scale(2.1); filter: blur(1px); }
  100% { opacity: 0; transform: scale(.85); filter: blur(7px); }
}

.ripple {
  position: absolute;
  left: 50%;
  top: 74%;
  width: 30px;
  height: 10px;
  margin-left: -15px;
  border-radius: 50%;
  border: 1px solid rgba(232, 190, 130, .35);
  opacity: 0;
}

body.finale .ripple { animation: ripple 3s var(--ease) 1.7s forwards; }
body.finale .r2 { animation-delay: 2.1s; }

@keyframes ripple {
  0% { opacity: 0; transform: scale(.4); }
  22% { opacity: .22; }
  100% { opacity: 0; transform: scale(8); }
}

/* ─────────────────────────────  ending  ───────────────────────────── */

.ending {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #070605;
  opacity: 0;
  transition: opacity 2.2s var(--ease);
}

.ending.is-in { opacity: 1; }
.ending[hidden] { display: none; }

.ending-inner {
  display: flex;
  align-items: center;
  gap: 46px;
  transform: translateY(-2vh);
}

.ending-title {
  font-family: var(--hand);
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: .34em;
  line-height: 1.2;
  color: #e9dcc2;
  text-shadow: 0 0 70px rgba(220, 170, 110, .14);
}

.ending-copy {
  max-width: 300px;
  opacity: 1;
  transition: opacity .9s var(--ease);
}

.ending-copy.swap { opacity: 0; }

.ending-copy p {
  font-family: var(--read);
  margin: 0 0 9px;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: 2;
  color: #b39770;
}

.ending-copy p.dim { color: #6f5b45; }

.ending-links {
  display: flex;
  gap: 26px;
  margin-top: 30px;
}

.ending-links button {
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 11px;
  letter-spacing: .22em;
  color: #8f7659;
  border-bottom: 1px solid rgba(143, 118, 89, .26);
  transition: color .5s, border-color .5s;
}

.ending-links button:hover { color: #d3b78e; border-color: rgba(211, 183, 142, .6); }

/* ─────────────────────────────  grain  ───────────────────────────── */

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ─────────────────────────────  mobile  ───────────────────────────── */

@media (max-width: 720px) {
  :root {
    --paper-w: 90vw;
    --paper-h: min(72vh, 640px);
  }

  .viewport { inset: 26px 20px 30px; }
  .track { gap: 20px; }
  .section-title { font-size: 10px; letter-spacing: .24em; margin-left: 10px; padding-left: 7px; }
  .para { font-size: 15.5px; line-height: 1.9; height: calc(100% - 20px); margin-left: 14px; }
  .track-seal { width: 30px; height: 30px; font-size: 9px; }

  .name-layer { gap: 6px; }
  .name-line { font-size: 14.5px; letter-spacing: .08em; }
  .mind-layer { gap: 22px; }
  .mind-col { font-size: 22px; }
  .mind-cap { font-size: 12px; bottom: 9%; }

  .figure-wrap { width: 165px; }
  .lamp { left: 15%; bottom: 18%; }
  .lamp-glow { width: 90vw; height: 90vw; }
  .incense { right: 6%; bottom: 18%; height: 24vh; }
  .incense-stick { height: var(--stick, 20vh); }


  .hud { padding: 0 18px; }
  .mark { gap: 9px; }
  .mark-text { display: inline; font-size: 9px; letter-spacing: .14em; }
  .controls { padding: 0 20px; bottom: max(18px, env(safe-area-inset-bottom)); }

  .guide {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 92px;
    max-height: none;
    writing-mode: horizontal-tb;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .08em;
    color: #c9a678;
    text-align: left;
  }

  .cover-v { gap: 18px; transform: translateY(-6vh); }
  .cover-title { font-size: 72px; }
  .cover-kicker { font-size: 9px; letter-spacing: .3em; }
  .cover-seal { width: 32px; height: 32px; font-size: 9px; bottom: -54px; }
  .cover-copy { left: 0; right: 0; bottom: 22vh; text-align: center; }
  .cover-sub { font-size: 14px; }
  .cover-meta { font-size: 9px; }
  .cover-actions { bottom: 6.5vh; gap: 10px; }
  .enter { padding: 12px 28px; }
  .cover-foot { display: none; }

  .tag { width: 26px; height: 38px; font-size: 18px; }
  .t1 { left: 69%; top: 28%; }
  .t2 { left: 61%; top: 44%; }
  .t3 { left: 67%; top: 60%; }

  .ending-inner { flex-direction: column; gap: 28px; transform: translateY(-3vh); }
  .ending-title { font-size: 30px; }
  .ending-copy { text-align: center; max-width: 260px; }
  .ending-links { justify-content: center; }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root { --paper-h: 84vh; --paper-w: min(660px, 70vw); }
  .viewport { inset: 20px 26px 26px; }
  .para { font-size: 15px; }
  .guide { display: none; }
  .incense { height: 30vh; }

  .cover-v { transform: translateY(-6vh); }
  .cover-title { font-size: 54px; }
  .cover-copy,
  .cover-foot { display: none; }
  .cover-seal { width: 30px; height: 30px; font-size: 9px; bottom: -46px; }
  .cover-actions { bottom: 7vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  .flame { animation: none; }
  #air { display: none; }
}

/* ─────────────────────────────  large-type reading mode  ───────────────────────────── */

body.easy {
  --paper-w: min(720px, 86vw);
  --paper-h: min(66vh, 640px);
}

body.easy .scroll-paper {
  box-shadow:
    0 0 0 1px rgba(74, 50, 28, .42),
    0 1px 0 rgba(255, 250, 236, .55) inset,
    0 0 0 10px rgba(70, 42, 26, .26),
    0 34px 80px rgba(0, 0, 0, .66),
    0 6px 18px rgba(0, 0, 0, .42);
}

body.easy .viewport { inset: 40px 38px 48px; }
body.easy .track { gap: 32px; }

body.easy .section-title {
  font-size: 15px;
  letter-spacing: .2em;
  margin-left: 16px;
  padding-left: 12px;
  color: #7a563a;
}

body.easy .para {
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: .04em;
  height: calc(100% - 40px);
  margin-left: 24px;
}

body.easy .track-seal { width: 44px; height: 44px; font-size: 13px; }

body.easy .guide {
  left: 0;
  right: 0;
  top: auto;
  bottom: 78px;
  width: auto;
  max-height: none;
  padding: 9px 9vw;
  writing-mode: horizontal-tb;
  background: linear-gradient(90deg, rgba(7, 6, 5, 0), rgba(7, 6, 5, .68) 14%, rgba(7, 6, 5, .68) 86%, rgba(7, 6, 5, 0));
  font-family: var(--read);
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: #efd6ae;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 22px #000, 0 0 40px rgba(0, 0, 0, .8);
}

body.easy .guide.is-in { opacity: 1; transform: none; }

body.easy .hud { padding: 0 26px; }
body.easy .mark-seal { width: 36px; height: 36px; font-size: 11px; }
body.easy .mark-text {
  font-size: 13px;
  letter-spacing: .16em;
  color: #c9ab80;
}
body.easy .toggle {
  font-size: 13px;
  letter-spacing: .1em;
  padding: 9px 9px;
}
body.easy .mark { gap: 12px; }
body.easy .toggles { gap: 6px; }

body.easy .controls { padding: 0 30px; bottom: max(22px, env(safe-area-inset-bottom)); }
body.easy .nav { gap: 12px; }

body.easy .next {
  font-size: 17px;
  letter-spacing: .2em;
  padding: 16px 6px;
  opacity: .9;
}

body.easy .back {
  font-size: 15px;
  letter-spacing: .1em;
  padding: 16px 8px;
  opacity: .7;
}

body.easy .hold {
  gap: 14px;
  padding: 10px 4px;
  font-size: 17px;
  letter-spacing: .1em;
  opacity: .92;
}

body.easy .hold-ring { width: 52px; height: 52px; }
body.easy .hold-ring::after { inset: 7px; }
body.easy .hold-ring::before { inset: -1px; }

body.easy .tag { font-size: 24px; }
body.easy .name-line { font-size: 30px; letter-spacing: .14em; }
body.easy .mind-col { font-size: 30px; }
body.easy .mind-cap { font-size: 18px; }

body.easy .cover-kicker { font-size: 13px; color: #b99a72; }
body.easy .cover-sub { font-size: 18px; }
body.easy .cover-meta { font-size: 12px; letter-spacing: .14em; color: #b39770; }
body.easy .cover-copy { bottom: 21vh; }
body.easy .cover-actions { bottom: 8.5vh; gap: 16px; }
body.easy .enter {
  font-size: 18px;
  letter-spacing: .5em;
  text-indent: .5em;
  padding: 16px 42px;
}
body.easy .cover-restart { font-size: 12px; }
body.easy .cover-foot { font-size: 11px; color: #9c8364; }
body.easy .cover-seal { width: 44px; height: 44px; font-size: 12px; }

body.easy .intro-line { font-size: clamp(23px, 2.5vw, 30px); letter-spacing: .14em; }
body.easy .intro-next { font-size: 14px; }

body.easy .ending-copy p { font-size: 15px; letter-spacing: .16em; }
body.easy .ending-links button { font-size: 13px; }

/* mobile */

@media (max-width: 720px) {
  body.easy {
    --paper-w: 92vw;
    --paper-h: min(62vh, 560px);
  }

  body.easy .viewport { inset: 28px 20px 30px; }
  body.easy .track { gap: 20px; }
  body.easy .section-title { font-size: 13px; margin-left: 10px; padding-left: 8px; }
  body.easy .para {
    font-size: 21px;
    line-height: 1.9;
    height: calc(100% - 24px);
    margin-left: 18px;
  }

  body.easy .guide {
    bottom: 86px;
    padding: 8px 18px;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: .03em;
    text-align: center;
  }

  body.easy .hud { padding: 0 16px; }
  body.easy .mark { gap: 8px; }
  body.easy .mark-seal { width: 34px; height: 34px; font-size: 10px; }
  body.easy .mark-text { font-size: 11.5px; letter-spacing: .06em; }
  body.easy .toggle { font-size: 12.5px; padding: 8px 6px; letter-spacing: .04em; }
  body.easy .toggles { gap: 2px; }

  body.easy .controls { padding: 0 18px; bottom: max(14px, env(safe-area-inset-bottom)); }
  body.easy .next { font-size: 16px; padding: 14px 4px; }
  body.easy .back { font-size: 15px; padding: 14px 6px; }
  body.easy .hold { gap: 10px; font-size: 15px; }
  body.easy .hold-ring { width: 46px; height: 46px; }

  body.easy .tag { font-size: 21px; }
  body.easy .name-line { font-size: 16px; letter-spacing: .06em; }
  body.easy .mind-col { font-size: 24px; }
  body.easy .mind-cap { font-size: 14px; }

  body.easy .cover-copy { bottom: 24vh; }
  body.easy .cover-sub { font-size: 16px; }
  body.easy .cover-meta { font-size: 11.5px; }
  body.easy .cover-actions { bottom: 6vh; gap: 10px; }
  body.easy .enter { font-size: 17px; padding: 15px 32px; }

  body.easy .intro-line { font-size: 21px; }
}

/* landscape */

@media (max-height: 560px) and (orientation: landscape) {
  body.easy { --paper-h: 86vh; --paper-w: min(720px, 74vw); }
  body.easy .para { font-size: 19px; }
  body.easy .guide { display: none; }
  body.easy .cover-copy,
  body.easy .cover-foot { display: none; }
  body.easy .cover-actions { bottom: 7vh; }
}


/* ── painted room: the ink painting behind the two reveals ── */
.painted-room {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: url("https://img.praybuddha.com/site/d0d3320caa8a55d2/yishi/assets/look.jpg") center / cover no-repeat;
  opacity: 0;
  filter: brightness(.86) saturate(.86);
  transform: scale(1.03);
  transition: opacity 2.4s var(--ease), filter 2.4s var(--ease), transform 2.4s var(--ease);
  pointer-events: none;
}

body.mode-look .painted-room {
  opacity: 1;
  filter: brightness(1.06) saturate(.94);
  transform: scale(1);
}

body.mode-see .painted-room {
  opacity: .9;
  filter: brightness(.96) saturate(.88);
  transform: scale(1);
}

body.mode-name .painted-room,
body.mode-mind .painted-room {
  opacity: .38;
  filter: brightness(.7) saturate(.7) blur(.6px);
}

body.mode-observe .painted-room {
  opacity: .55;
  filter: brightness(.6) saturate(.7) blur(1px);
}

body.mode-look .room,
body.mode-see .room { opacity: 0; }
/* A single lamplit room across the cover, introduction and look-up pause. */
.wall::after { content:""; position:absolute; inset:0; background:url("https://img.praybuddha.com/site/d0d3320caa8a55d2/yishi/assets/room-grain.svg") repeat; opacity:.24; mix-blend-mode:soft-light; pointer-events:none; }
.table::before { background:url("https://img.praybuddha.com/site/d0d3320caa8a55d2/yishi/assets/room-grain.svg") repeat; opacity:.22; transform:scaleY(.3); transform-origin:top; }
.window { border:5px solid #302b22; box-shadow:inset 0 0 0 2px #6b5d45,inset 0 0 32px #11130f,0 3px 12px #050504; filter:none; }
.window-glow { background:linear-gradient(165deg,#52605b,#232e2a 68%,#141c18); opacity:.65; }
.window-glow::before { content:""; position:absolute; inset:48% -10% 0; background:#141d19; clip-path:polygon(0 60%,16% 36%,29% 49%,48% 0,64% 34%,80% 19%,100% 54%,100% 100%,0 100%); }
.window-glow::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 23%,#1c211b 23% 25%,transparent 25% 48%); border-top:2px solid #77715d; border-bottom:2px solid #77715d; top:35%; bottom:34%; opacity:.75; }
.figure-wrap { width:min(370px,32vw); bottom:25%; filter:brightness(.82) saturate(.7); }
.figure-svg { animation:none; }
.figure-wrap::after { content:""; position:absolute; left:0; right:0; bottom:2%; height:6%; border-radius:50%; background:#17130e; box-shadow:0 5px 12px #0009; z-index:-1; }
.cover-restart { min-height:44px; }
.stage-cover .figure-wrap { left:72%; opacity:.78; filter:brightness(.72) saturate(.7); }
.stage-cover .room { filter:brightness(.92) saturate(.88); }
.painted-room { display:none; }
body.mode-look .room,body.mode-see .room { opacity:1; }
.incense { height:28vh; }
.incense-stick { width:2px; background:linear-gradient(90deg,#43362a,#8b7355 55%,#45382a); box-shadow:none; transition:none; }
.incense-stick::before { content:""; position:absolute; top:-7px; left:-.5px; width:3px; height:8px; background:#a39883; border-radius:2px 1px 0 0; }
.ember { top:-1px; width:2.5px; height:2px; background:#b75b29; box-shadow:0 0 3px #da6d31,0 0 7px #b05d2a55; }
.burner { width:48px; height:21px; border-radius:45% 45% 38% 38%; background:radial-gradient(ellipse at 50% 12%,#97846b 0 29%,#3c362d 32%,#62513e 48%,#211e19 80%); border-bottom:2px solid #171511; box-shadow:0 5px 9px #0008,inset 0 0 0 1px #9e876333; }
.burner::after { content:""; display:block; position:absolute; bottom:-2px; left:8px; right:8px; height:4px; border-radius:50%; background:#29251e; }
.scene-paused .flame,.scene-paused .figure-svg { animation-play-state:paused; }
@media(max-width:720px) { .figure-wrap { width:230px; bottom:27%; } .stage-cover .figure-wrap { left:75%; width:220px; opacity:.6; } }
/* Reader tools use native dialogs for focus, Escape and keyboard navigation. */
.platform-links .listen-link { margin-left:auto; }
.reader-panel { color:#ead9b8; background:#21190f; border:1px solid #786446; border-radius:8px; padding:24px; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; font:16px/1.8 var(--read); }
.reader-panel::backdrop { background:rgba(0,0,0,.72); }
body.reading .hud button { pointer-events:auto; }
body.easy .toggle { opacity:.9; transition:opacity 180ms ease-out; min-height:44px; }
.reader-panel h2 { font-size:23px; font-weight:400; text-wrap:balance; margin:0; }
.reader-panel p { text-wrap:pretty; margin:16px 0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.reader-panel button,.reader-panel select { font:inherit; min-height:44px; color:inherit; background:#30251a; border:1px solid #786446; border-radius:4px; padding:8px 12px; cursor:pointer; }
.reader-panel label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; }
.reader-panel a { display:block; color:inherit; margin-top:16px; text-underline-offset:5px; }
.reader-panel .ambient-credit{font-size:12px;line-height:1.9;color:#c4b598;text-wrap:pretty}
.reader-panel .ambient-credit a{display:inline;margin:0}
#ambient-volume{width:min(190px,52%);min-height:44px;accent-color:#ba9070}
#ambient-status{font-size:13px;line-height:1.8;color:#d7c3a0}
.reader-panel button:focus-visible,.reader-panel select:focus-visible,.hud button:focus-visible { outline:2px solid #ead9b8; outline-offset:3px; }
#chapter-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#chapter-list button { text-align:left; font-size:15px; }
#chapter-list button[aria-current="location"] { border-color:#e0b779; background:#493322; }
#close-scroll { margin-top:12px; }
body.easy #section-label { background:none; border:0; text-align:left; font-family:var(--read); cursor:pointer; min-height:44px; padding:0; }
body.easy #section-label::after { content:' ▾'; }
/* Keep the chapter picker separate from the paper, even when tools wrap. */
body.easy .scroll {
  top: calc(var(--reader-tools-bottom, 140px) + 28px);
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px));
  grid-template-rows: minmax(0, 1fr);
}
body.easy .scroll-paper { max-height:100%; min-height:0; }
body.easy .track { transition:transform 180ms ease-out; will-change:auto; }
body.easy .viewport { touch-action:pan-y pinch-zoom; }
body.reading:not(.horizontal) .viewport { cursor:grab; }
body.reading .viewport.is-dragging { cursor:grabbing; user-select:none; }
body.reading .viewport.is-dragging .track { transition:none; }
body.easy[data-font-size="standard"] .para { font-size:21px; }
body.easy[data-font-size="largest"] .para { font-size:30px; }
body.easy.horizontal .viewport { overflow-y:auto; touch-action:pan-y pinch-zoom; }
body.easy.horizontal .viewport::before,body.easy.horizontal .viewport::after { display:none; }
body.easy.horizontal .track { display:block; position:relative; height:auto; width:100%; transform:none!important; }
body.easy.horizontal .section { display:block; writing-mode:horizontal-tb; height:auto; }
body.easy.horizontal .section[hidden] { display:none; }
body.easy.horizontal .section-title { writing-mode:horizontal-tb; height:auto; margin:0 0 20px; padding:0 0 12px; border:0; border-bottom:1px solid #b6a487; }
body.easy.horizontal .section-title::after { content:' · 上下滑动阅读'; font-size:12px; letter-spacing:normal; }
body.easy .viewport:focus-visible { outline:2px solid #786446; outline-offset:3px; }
.ending-links a { color:#ead9b8; font:15px/1.8 var(--read); text-underline-offset:4px; }
body.easy.horizontal .para { writing-mode:horizontal-tb; height:auto; margin:0 0 22px; letter-spacing:normal; line-height:1.9; text-wrap:pretty; }
body.easy.horizontal .track-seal { display:none; }
body.easy.mode-look .controls { opacity:1!important; }
.gesture-hint { position:fixed; z-index:100; bottom:max(76px,calc(env(safe-area-inset-bottom) + 66px)); left:16px; right:16px; margin:0; padding:10px; background:#21190f; border:1px solid #786446; color:#ead9b8; text-align:center; font:14px/1.6 var(--read); pointer-events:none; }
@media(max-width:720px) {
  body.easy .hud { display:flex; flex-wrap:wrap; gap:0; }
  body.easy .hud .mark { width:100%; }
  body.easy .hud .toggles { margin-left:42px; gap:8px; }
  body.easy .toggle { min-height:44px; padding:5px 4px; color:#dcc8a7; }
  body.easy { --paper-h:min(55dvh,560px); }
  body.easy[data-font-size="standard"] .para { font-size:18px; }
  body.easy[data-font-size="largest"] .para { font-size:25px; }
  body.easy .guide { font-size:16px; bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px)); }
  body.easy .controls { padding-bottom:env(safe-area-inset-bottom); }
  .reader-panel { padding:18px; }
}
@media(prefers-reduced-motion:reduce) { body.easy .track { transition:none; } }
.platform-links{position:fixed;top:max(12px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;z-index:100;font:14px/1.6 "Songti SC",serif;color:#ead9b8}.platform-links>a,.platform-links summary{display:block;padding:10px 13px;background:#21190fee;border:1px solid #786446;border-radius:3px;color:inherit;text-decoration:none;cursor:pointer;min-height:44px}.platform-links details{max-width:min(440px,calc(100vw - 40px))}.platform-links details[open]{position:absolute;right:0;top:0}.platform-links details>div{padding:18px;background:#21190f;max-height:65dvh;overflow:auto;border:1px solid #786446}.platform-links h2{font-size:20px;margin:0 0 12px}.platform-links p{font-size:15px;line-height:1.9;margin:0 0 12px}.platform-links a:focus-visible,.platform-links summary:focus-visible{outline:2px solid #ead9b8;outline-offset:3px}.platform-links details a{color:#ead9b8;text-underline-offset:4px}.hud{top:max(76px,calc(env(safe-area-inset-top) + 64px))!important}.cover-foot{line-height:1.9!important}.guide{line-height:1.8!important}.platform-links h2,.platform-links p{text-wrap:pretty}