:root {
  --ink: #315c65;
  --teal: #3f9e91;
  --mint: #dff4ec;
  --paper: #fbfdf8;
  --olive: #7d8f2f;
  --title-home: #247776;
  --title-chapter1: #447888;
  --title-chapter2: #438d8c;
  --title-chapter3: #5f6d0d;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pointer-x: 0;
  --pointer-y: 0;
  --topbar-h: 74px;
  --font-body: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-title: "Ma Shan Zheng", STKaiti, KaiTi, cursive;
  --font-classical: "Cactus Classical Serif", "Noto Serif SC", "Songti SC", serif;
  --font-literary: "Noto Serif SC", "Cactus Classical Serif", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-latin-title: Cinzel, "Times New Roman", serif;
  --font-latin-display: Cormorant, Garamond, Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body {
  color: var(--ink);
  font-family: var(--font-body);
  font-kerning: normal;
  font-variant-east-asian: normal;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(167, 226, 211, .2), transparent 32%),
    radial-gradient(circle at 85% 75%, rgba(217, 228, 139, .12), transparent 28%),
    var(--paper);
  --theme-accent: #4e9c94;
  --theme-soft: rgba(115, 190, 176, .18);
  --theme-warm: #d6bc62;
}
body[data-theme="chapter1"] { --theme-accent: #3f8d88; --theme-soft: rgba(97,183,169,.18); --theme-warm: #80b9aa; }
body[data-theme="chapter2"] { --theme-accent: #4d998d; --theme-soft: rgba(100,181,153,.16); --theme-warm: #d6b744; }
body[data-theme="chapter3"] { --theme-accent: #89963b; --theme-soft: rgba(196,211,99,.2); --theme-warm: #efad35; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.experience-bar,
.scene-icons,
.orbit-icons,
.chapter-cta,
.enter-button,
.ch2-confirm__actions {
  font-family: var(--font-ui);
}
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(40, 127, 121, .7);
  outline-offset: 4px;
}
[hidden] { display: none !important; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--ink);
  background: #000;
  transition: opacity 1.2s var(--ease-out), visibility 1.2s;
}
.preloader.is-exiting {
  background: transparent;
  pointer-events: none;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
  transition: opacity 1.6s var(--ease-out);
}
.preloader.is-exiting .preloader__video { opacity: 0; }
.preloader__start {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 24px 32px;
  border: 0;
  color: #f5fbf7;
  font: inherit;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}
.preloader__start:hover,
.preloader__start:focus-visible {
  opacity: .92;
  transform: scale(1.02);
}
.preloader__label {
  font-size: .82rem;
  letter-spacing: .48em;
}
.preloader.is-playing .preloader__start { display: none; }
.preloader__seal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid #3f8781;
  color: #397d78;
  transform: rotate(-3deg);
  animation: seal-breathe 2.2s ease-in-out infinite;
}
.preloader__seal::before, .preloader__seal::after { content: ""; position: absolute; background: #3f8781; opacity: .45; }
.preloader__seal::before { left: 50%; top: 5px; bottom: 5px; width: 1px; }
.preloader__seal::after { top: 50%; left: 5px; right: 5px; height: 1px; }
.preloader__seal span { font-size: 1.45rem; }

.atmosphere { position: fixed; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.atmosphere__wash { position: absolute; border-radius: 50%; filter: blur(55px); opacity: .12; animation: wash-drift 15s ease-in-out infinite alternate; }
.atmosphere__wash--one { width: 32vw; height: 22vw; left: -8vw; top: 40%; background: #58b7a9; }
.atmosphere__wash--two { width: 26vw; height: 26vw; right: -9vw; top: 9%; background: #d4df75; animation-delay: -7s; }
.atmosphere__grain {
  position: absolute;
  inset: -50%;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation: grain-shift .3s steps(2) infinite;
}
.cursor-aura {
  position: absolute;
  left: 0; top: 0;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,205,190,.12), transparent 68%);
  translate: calc(var(--cursor-screen-x, -500px) - 50%) calc(var(--cursor-screen-y, -500px) - 50%);
  transition: translate .12s linear;
}

.theme-ornaments { position: fixed; inset: 0; z-index: 13; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.45s var(--ease-out) .25s; }
body.is-loaded .theme-ornaments { opacity: 1; }
.lattice-corner { position: absolute; width: 112px; height: 112px; opacity: .15; transition: border-color .7s, opacity .7s; }
.lattice-corner::before, .lattice-corner::after { content: ""; position: absolute; border-color: var(--theme-accent); border-style: solid; }
.lattice-corner::before { inset: 0; border-width: 1px 0 0 1px; clip-path: polygon(0 0, 100% 0, 100% 24%, 58% 24%, 58% 58%, 24% 58%, 24% 100%, 0 100%); }
.lattice-corner::after { inset: 24px; border-width: 1px 0 0 1px; clip-path: polygon(0 0, 100% 0, 100% 30%, 62% 30%, 62% 62%, 30% 62%, 30% 100%, 0 100%); }
.lattice-corner--tl { left: 18px; top: calc(var(--topbar-h) + 8px); }
.lattice-corner--tr { right: 18px; top: calc(var(--topbar-h) + 8px); transform: rotate(90deg); }
.lattice-corner--bl { left: 18px; bottom: 18px; transform: rotate(-90deg); }
.lattice-corner--br { right: 18px; bottom: 18px; transform: rotate(180deg); }
.edge-frame { position: absolute; inset: 0; color: var(--theme-accent); opacity: .52; transition: color .7s; }
.edge-line { position: absolute; display: block; opacity: .34; }
.edge-line--top, .edge-line--bottom { left: 124px; right: 124px; height: 1px; background: linear-gradient(90deg, currentColor 0 31%, transparent 41% 59%, currentColor 69% 100%); }
.edge-line--top { top: calc(var(--topbar-h) + 8px); }
.edge-line--bottom { bottom: 18px; }
.edge-line--left, .edge-line--right { top: calc(var(--topbar-h) + 120px); bottom: 126px; width: 1px; background: linear-gradient(180deg, currentColor 0 27%, transparent 38% 62%, currentColor 73% 100%); }
.edge-line--left { left: 18px; }.edge-line--right { right: 18px; }
.edge-knot { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; color: currentColor; font-size: 12px; opacity: .55; }
.edge-knot::before, .edge-knot::after { content: ""; position: absolute; background: currentColor; opacity: .35; }
.edge-knot::before { width: 30px; height: 1px; }.edge-knot::after { width: 1px; height: 30px; }
.edge-knot--top { left: 17%; top: calc(var(--topbar-h) - 1px); }
.edge-knot--left { left: 9px; top: 28%; }
.edge-knot--right { right: 9px; top: 70%; }
.edge-water { position: absolute; left: 50%; bottom: 9px; width: 132px; height: 28px; translate: -50% 0; opacity: .42; }
.edge-water i { position: absolute; left: 50%; bottom: 0; width: 54px; height: 16px; translate: -50% 0; border-top: 1px solid currentColor; border-radius: 50%; }
.edge-water i:nth-child(1) { margin-left: -38px; }.edge-water i:nth-child(3) { margin-left: 38px; }
.poem-ribbon { position: absolute; left: 34px; top: 39%; display: flex; align-items: flex-start; color: var(--theme-accent); opacity: .5; transition: color .7s, opacity .3s; }
.poem-ribbon::before { content: ""; position: absolute; left: -9px; top: -18px; width: 1px; height: 135%; background: linear-gradient(transparent, var(--theme-accent), transparent); opacity: .45; }
.poem-ribbon p { writing-mode: vertical-rl; margin: 0; max-height: 210px; font-size: .72rem; line-height: 1.8; letter-spacing: .22em; transition: opacity .3s, transform .5s var(--ease-out); }
.poem-ribbon.is-changing p { opacity: 0; transform: translateY(9px); }
.chapter-seal { position: absolute; left: 38px; bottom: 138px; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--theme-accent); color: var(--theme-accent); opacity: .38; transform: rotate(-5deg); transition: color .7s, border-color .7s, transform .6s var(--ease-out); }
.chapter-seal::before { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; opacity: .55; }
.chapter-seal span { font-size: 1.15rem; letter-spacing: .05em; }
.chapter-seal.is-stamped { animation: seal-stamp .55s var(--ease-out); }
.leaf-field { position: absolute; inset: 0; }
.leaf-field i { position: absolute; top: -8vh; width: 18px; height: 9px; border-radius: 90% 10% 90% 10%; background: var(--theme-soft); filter: blur(.2px); animation: leaf-fall 15s linear infinite; }
.leaf-field i:nth-child(1) { left: 16%; animation-delay: -2s; animation-duration: 17s; }.leaf-field i:nth-child(2) { left: 34%; animation-delay: -9s; animation-duration: 14s; }.leaf-field i:nth-child(3) { left: 53%; animation-delay: -5s; animation-duration: 19s; }.leaf-field i:nth-child(4) { left: 68%; animation-delay: -12s; animation-duration: 16s; }.leaf-field i:nth-child(5) { left: 82%; animation-delay: -7s; animation-duration: 20s; }.leaf-field i:nth-child(6) { left: 92%; animation-delay: -15s; animation-duration: 18s; }
.water-rings { display: none; position: absolute; right: 28vw; bottom: 7vh; width: 180px; height: 52px; opacity: .18; }
.water-rings i { position: absolute; left: 50%; top: 50%; width: 40px; height: 12px; translate: -50% -50%; border: 1px solid var(--theme-accent); border-radius: 50%; animation: water-ring 4s ease-out infinite; }
.water-rings i:nth-child(2) { animation-delay: -1.3s; }.water-rings i:nth-child(3) { animation-delay: -2.6s; }
.ink-ripple { position: fixed; z-index: 70; width: 18px; height: 18px; translate: -50% -50%; border: 1px solid var(--theme-accent); border-radius: 8px; pointer-events: none; animation: ink-ripple .75s var(--ease-out) forwards; }

.experience-bar {
  position: fixed;
  z-index: 30;
  left: 0; right: 0; top: 0;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(22px, 4vw, 68px);
  color: rgba(49, 92, 101, .78);
  background: linear-gradient(180deg, rgba(249,253,250,.82), rgba(249,253,250,0));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1.05s var(--ease-out) .5s, transform 1.05s var(--ease-out) .5s;
}
body.is-loaded .experience-bar { opacity: 1; transform: none; }
.experience-bar__brand { display: flex; align-items: center; gap: 11px; font-size: .8rem; letter-spacing: .28em; }
.experience-bar__brand i { width: 22px; height: 22px; border: 1px solid #4d908a; transform: rotate(-4deg); }
.experience-bar__chapter { text-align: center; }
.experience-bar__chapter strong { font-size: .8rem; font-weight: 400; letter-spacing: .2em; }
.experience-bar__progress {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
.experience-bar__progress span { font-family: inherit; }
.experience-bar__progress i { width: clamp(50px, 8vw, 108px); height: 1px; background: rgba(49,92,101,.18); }
.experience-bar__progress b { display: block; width: 0; height: 100%; background: #438b84; transition: width .8s var(--ease-out); }

.app, .screen { width: 100vw; height: 100dvh; }
.screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff 15%, #eff9f4 100%);
  opacity: 0;
  transform: scale(1.015);
  filter: saturate(.96);
  transition: opacity .72s var(--ease), transform 1.1s var(--ease), filter .8s;
}
.screen--active { opacity: 1; transform: none; filter: saturate(1); z-index: 1; }
body:not(.is-loaded) .screen.screen--active {
  opacity: 0;
  transform: scale(1.012);
  filter: saturate(.94);
}
body.is-loaded .screen.screen--active {
  opacity: 1;
  transform: none;
  filter: saturate(1);
  transition: opacity 1.6s var(--ease-out), transform 1.8s var(--ease-out), filter 1.4s var(--ease-out);
}

.cover-frame, .chapter-shell, .chapter-panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.cover-frame, .chapter-panel:not(.chapter-panel--scroll):not(.chapter-panel--panorama):not(.chapter1-detail):not(.chapter1-study-settle) {
  display: grid;
  place-items: center;
}
.cover-frame:not(.scene-composition):not(.ch3-intro):not(.ch3-reading):not(.ch3-lotus):not(.ch3-moon):not(.ch3-end):not(.courtyard-scene):not(.chapter1-bonsai):not(.chapter1-bonsai-prune):not(.chapter1-room):not(.chapter1-detail):not(.chapter1-study-settle) > img,
.chapter-panel:not(.chapter-panel--scroll):not(.chapter-panel--panorama):not(.scene-composition):not(.ch3-intro):not(.ch3-reading):not(.ch3-lotus):not(.ch3-moon):not(.ch3-end):not(.courtyard-scene):not(.chapter1-bonsai):not(.chapter1-bonsai-prune):not(.chapter1-room):not(.chapter1-detail):not(.chapter1-study-settle) > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate3d(calc(var(--pointer-x) * -7px), calc(var(--pointer-y) * -5px), 0) scale(1.012);
  transition: transform 1.4s var(--ease-out), filter .8s;
}
.screen--active .chapter-panel--active:not(.scene-composition):not(.ch3-intro):not(.ch3-reading):not(.ch3-lotus):not(.ch3-moon):not(.ch3-end):not(.courtyard-scene):not(.chapter1-bonsai):not(.chapter1-bonsai-prune):not(.chapter1-room):not(.chapter1-detail):not(.chapter1-study-settle) > img,
.screen--active .cover-frame:not(.scene-composition):not(.ch3-intro):not(.ch3-reading):not(.ch3-lotus):not(.ch3-moon):not(.ch3-end):not(.courtyard-scene):not(.chapter1-bonsai):not(.chapter1-bonsai-prune):not(.chapter1-room):not(.chapter1-detail):not(.chapter1-study-settle) > img { animation: scene-reveal 1.4s var(--ease-out) both; }

.enter-button, .chapter-cta {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(30px, 4.5vh);
  translate: -50% 0;
  border: 1px solid rgba(49, 92, 101, .42);
  min-width: 176px;
  min-height: 50px;
  border-radius: 13px;
  padding: .78rem 1.9rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 35px rgba(38, 108, 100, .13);
  backdrop-filter: blur(12px);
  cursor: pointer;
  letter-spacing: .18em;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), background .35s, box-shadow .35s, letter-spacing .35s;
}
.enter-button::before, .chapter-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: -120% 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  animation: button-shimmer 4.8s ease-in-out 1.2s infinite;
}
.enter-button::after, .chapter-cta::after { content: "  →"; display: inline-block; margin-left: .45em; transition: transform .3s var(--ease); }
.enter-button:hover, .chapter-cta:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 45px rgba(38, 108, 100, .22);
  letter-spacing: .22em;
}
.enter-button:hover::after, .chapter-cta:hover::after { transform: translateX(4px); }
.enter-button:active, .chapter-cta:active { transform: translateY(0) scale(.97); }

.chapter-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px) scale(1.008);
  filter: blur(3px);
  transition: opacity .7s var(--ease), transform 1s var(--ease-out), filter .75s;
}
.chapter-panel--active { opacity: 1; transform: none; filter: none; }

.chapter-shell[data-chapter="chapter1"] > .chapter-panel {
  transition: opacity .22s ease;
  transform: none;
  filter: none;
}
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .chapter1-room__art,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .chapter1-bonsai__art,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .courtyard-scene__art,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .chapter1-bonsai-prune__art,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .chapter1-detail__art,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel[data-seen] .chapter1-study-settle__art {
  animation: none;
}

.chapter-shell[data-chapter="chapter1"] > .chapter-panel.chapter1-room,
.chapter-shell[data-chapter="chapter1"] > .chapter-panel.chapter1-dataviz {
  transition: none;
}
.chapter1-dataviz--warming {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.chapter-panel--scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(63,158,145,.4) transparent;
  background: #f8fcf8;
}
.scroll-stage { position: relative; width: min(100%, 1266px); margin: 0 auto; }
.scroll-stage > img { display: block; width: 100%; height: auto; }
.scroll-hint {
  position: fixed;
  z-index: 3;
  left: 50%; bottom: 24px; translate: -50% 0;
  padding: .55rem 1.15rem;
  border-radius: 99px;
  color: #4d7c81;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  font-size: .82rem;
  letter-spacing: .16em;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(45,105,99,.1);
  animation: hint-float 2.6s ease-in-out infinite;
  transition: opacity .5s, transform .5s;
}
.chapter-panel--scroll.has-scrolled .scroll-hint { opacity: 0; transform: translateY(10px); }
.chapter-panel--scroll::after {
  content: "";
  position: fixed;
  z-index: 4;
  left: 0; top: 0;
  width: var(--story-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, #65b7aa, #9ccdbf);
  box-shadow: 0 0 12px rgba(74,158,146,.5);
  transition: width .1s linear;
}
.story-hotspot {
  position: absolute;
  left: 51.5%;
  top: 83%;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 0 0 10px rgba(95,187,174,.12), 0 0 28px rgba(38,133,127,.38);
  cursor: pointer;
  animation: pulse 2.4s ease-in-out infinite;
  transition: transform .3s var(--ease), background .3s;
}
.story-hotspot:hover { transform: scale(1.12); background: rgba(255,255,255,.92); }
.story-hotspot span {
  position: absolute;
  left: 50%; top: 58px; translate: -50% 0;
  padding: .3rem .65rem;
  border-radius: 99px;
  white-space: nowrap;
  color: #fff;
  background: #438b87;
}

.object-points button {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 28px; height: 28px;
  translate: -50% -50%;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 9px;
  color: transparent;
  background: rgba(68, 164, 155, .7);
  box-shadow: 0 0 0 8px rgba(97,188,175,.16);
  cursor: pointer;
  animation: pulse 2.8s ease-in-out infinite;
  transition: transform .3s var(--ease), background .3s;
}
.object-points button:hover { transform: scale(1.25); background: #3c928a; }
.object-points button::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.8); border-radius: inherit; }
.object-points button.is-visited { color: transparent; background: #397f79; animation: none; box-shadow: 0 0 0 6px rgba(97,188,175,.1); }
.object-points button.is-visited::after { content: "✓"; inset: 0; display: grid; place-items: center; border: 0; color: #fff; font-size: .75rem; }

/* Chapter 1: 一室可居 — 纵向滚动探索（上下两屏全屏铺满） */
.chapter1-story {
  --ch1-scroll-art: url("https://636c-cloud1-9gcm2gs07e8985a4-1326496216.tcb.qcloud.la/202606/fsrm/assets/layers/chapter-2/chapter2-story-scroll-full.png");
}
.chapter1-story.chapter-panel--scroll {
  background: #fff;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
}
.chapter1-story.chapter-panel--scroll::-webkit-scrollbar { display: none; }
.chapter1-story__stage {
  width: 100%;
  max-width: none;
  margin: 0;
}
.chapter1-story__screen {
  width: 100%;
  height: 100dvh;
  background-image: var(--ch1-scroll-art);
  background-repeat: no-repeat;
  background-size: 100% 200dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.chapter1-story__screen--top { position: relative; background-position: center top; }
.chapter1-story__screen--bottom {
  position: relative;
  background-position: center bottom;
}
.chapter1-story__scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(16px, 3.2vh, 36px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vh, 14px);
  pointer-events: none;
  animation: ch1-scroll-cue-in 1s var(--ease-out) .55s both, ch1-scroll-cue-float 2.8s ease-in-out 1.55s infinite;
  transition: opacity .55s var(--ease-out), translate .55s var(--ease-out);
}
.chapter1-story.chapter-panel--scroll.has-scrolled .chapter1-story__scroll-cue {
  opacity: 0;
  translate: -50% 14px;
  animation: none;
}
.chapter1-story__scroll-cue-line {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin: 0;
  color: #2d6568;
  font-size: clamp(.92rem, 1.5vw, 1.12rem);
  letter-spacing: .24em;
  white-space: nowrap;
}
.chapter1-story__scroll-cue-line span {
  animation: ch1-scroll-cue-text 2.6s ease-in-out infinite;
}
.chapter1-story__scroll-cue-line i {
  display: block;
  width: clamp(52px, 8.5vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #187c7e 18%, #187c7e 82%, transparent);
  opacity: .55;
  transform-origin: center;
  animation: ch1-scroll-cue-line 2.4s ease-in-out infinite;
}
.chapter1-story__scroll-cue-line i:last-child { animation-delay: -.4s; }
.chapter1-story__scroll-arrow {
  display: block;
  width: 11px;
  height: 11px;
  border-right: 2px solid #187c7e;
  border-bottom: 2px solid #187c7e;
  rotate: 45deg;
  opacity: .55;
  animation: ch1-scroll-arrow 1.5s ease-in-out infinite;
}
.chapter1-story__prompt {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: clamp(12px, 2.8vh, 32px);
  translate: -50% 0;
  margin: 0;
  color: #005b5d;
  font-size: clamp(1rem, 1.65vw, 1.32rem);
  font-weight: 400;
  letter-spacing: .14em;
  pointer-events: none;
  white-space: nowrap;
  animation: ch1-story-prompt-in .95s var(--ease-out) .25s both;
}
.chapter1-story__markers { position: absolute; inset: 0; z-index: 5; }
.chapter1-story__hotspot {
  position: absolute;
  translate: -50% -50%;
  width: clamp(80px, 11vw, 120px);
  min-height: clamp(128px, 18vh, 168px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.chapter1-story__hotspot--study { left: 24%; top: 65%; }
.chapter1-story__hotspot--courtyard {
  left: 58%;
  top: 62%;
  width: clamp(120px, 16vw, 180px);
  min-height: clamp(180px, 26vh, 240px);
}
.chapter1-story__hotspot:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .55);
  outline-offset: 4px;
  border-radius: 4px;
}

.courtyard-scene {
  overflow: hidden;
  background: #fff;
}
.courtyard-scene__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  animation: landscape-rise 1.4s var(--ease-out) both;
}
.courtyard-scene__quote {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(28px, 5.5vh, 56px);
  translate: -50% 0;
  margin: 0;
  color: #005b5d;
  font-family: var(--font-literary);
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .1em;
  text-align: center;
  line-break: strict;
  hanging-punctuation: allow-end;
  font-variant-east-asian: normal;
  pointer-events: none;
  animation: ch1-story-prompt-in .95s var(--ease-out) .35s both;
}
.courtyard-scene__enter {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.courtyard-scene__enter:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .45);
  outline-offset: -4px;
}

.chapter1-bonsai {
  overflow: hidden;
  background: #fff;
}
.chapter1-bonsai__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  animation: landscape-rise 1.4s var(--ease-out) both;
}
.chapter1-bonsai__hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(24px, 4.8vh, 52px);
  translate: -50% 0;
  margin: 0;
  color: #2d6568;
  font-family: var(--font-classical);
  font-size: clamp(.92rem, 1.45vw, 1.12rem);
  letter-spacing: .14em;
  white-space: nowrap;
  pointer-events: none;
  animation: ch1-story-prompt-in .95s var(--ease-out) .35s both;
}
.chapter1-bonsai__markers { position: absolute; inset: 0; z-index: 6; }
.chapter1-bonsai__marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}
.chapter1-bonsai__marker:hover,
.chapter1-bonsai__marker.is-active {
  scale: 1.02;
}
.chapter1-bonsai__marker:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .55);
  outline-offset: 4px;
}
.chapter1-bonsai__card {
  position: absolute;
  z-index: 8;
  top: 50%;
  translate: 0 -50%;
  height: auto;
}
.chapter1-bonsai__card--bonsai {
  right: clamp(24px, 5vw, 60px);
  width: min(44vw, 430px, calc(min(88vh, 720px) * 846 / 966));
  animation: bonsai-card-in .32s var(--ease-out) both;
}
.chapter1-bonsai__card--insect {
  left: clamp(24px, 5vw, 60px);
  width: min(40vw, 400px, calc(min(72vh, 540px) * 784 / 634));
  animation: bonsai-card-in-left .32s var(--ease-out) both;
}
.chapter1-bonsai__card-shell {
  position: relative;
  width: 100%;
}
.chapter1-bonsai__card--bonsai .chapter1-bonsai__card-shell { aspect-ratio: 846 / 966; }
.chapter1-bonsai__card--insect .chapter1-bonsai__card-shell { aspect-ratio: 784 / 634; }
.chapter1-bonsai__card-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 42px rgba(36, 96, 92, .14));
}
.chapter1-bonsai__card-body {
  position: absolute;
  inset: 7% 7% 9% 17%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.chapter1-bonsai__card-body p,
.chapter1-bonsai__card-copy {
  flex: 1;
  margin: 0;
  overflow-y: auto;
  color: #2a4a4c;
  font-family: var(--font-literary);
  font-size: clamp(.68rem, .95vw, .84rem);
  line-height: 1.9;
  letter-spacing: .035em;
  overflow-wrap: break-word;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chapter1-bonsai__card-body p::-webkit-scrollbar,
.chapter1-bonsai__card-copy::-webkit-scrollbar {
  display: none;
}
.chapter1-bonsai__card-copy {
  text-align: left;
  line-break: strict;
  hanging-punctuation: allow-end;
  font-variant-east-asian: normal;
  font-feature-settings: "kern";
}
.chapter1-bonsai__card-body p:not(.chapter1-bonsai__card-copy) {
  text-align: justify;
  text-justify: inter-ideograph;
  line-break: strict;
  hanging-punctuation: allow-end;
  font-variant-east-asian: normal;
  font-feature-settings: "kern";
}
.chapter1-bonsai__card--bonsai .chapter1-bonsai__card-body {
  inset: 7% 5% 8% 26%;
}
.chapter1-bonsai__card--insect .chapter1-bonsai__card-body {
  inset: 7% 6% 9% 28%;
}
.chapter1-bonsai__card--bonsai .chapter1-bonsai__card-copy {
  font-size: clamp(.78rem, 1.08vw, .96rem);
  line-height: 1.88;
  letter-spacing: .075em;
}
.chapter1-bonsai__card--insect .chapter1-bonsai__card-copy {
  font-size: clamp(.84rem, 1.2vw, 1.06rem);
  line-height: 1.88;
  letter-spacing: .075em;
}
.chapter1-bonsai__card-more {
  align-self: flex-end;
  margin-top: auto;
  margin-right: clamp(32px, 12%, 52px);
  padding: 0 0 2px;
  border: 0;
  color: #187c7e;
  font-family: var(--font-classical);
  font-size: clamp(.8rem, 1.12vw, .92rem);
  letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  background: transparent;
  cursor: pointer;
  transition: opacity .3s, translate .3s var(--ease-out);
}
.chapter1-bonsai__card-more:hover,
.chapter1-bonsai__card-more:focus-visible {
  opacity: .72;
  translate: -2px 0;
  text-decoration: underline;
  text-decoration-line: underline;
}

.chapter1-bonsai-prune {
  overflow: hidden;
  background: #fff;
}
.chapter1-bonsai-prune__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.chapter1-bonsai-prune__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}
.chapter1-bonsai-prune__art--before {
  z-index: 1;
  animation: landscape-rise 1.4s var(--ease-out) both;
}
.chapter1-bonsai-prune__art--after {
  z-index: 2;
  opacity: 0;
}
.chapter1-bonsai-prune__shears {
  position: absolute;
  z-index: 7;
  left: var(--cut-x, 51%);
  top: var(--cut-y, 43%);
  width: clamp(52px, 6.2vw, 82px);
  height: clamp(36px, 4.6vw, 58px);
  translate: -68% -40%;
  rotate: -18deg;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(31, 114, 116, .18));
}
.chapter1-bonsai-prune__shears::before,
.chapter1-bonsai-prune__shears::after {
  content: "";
  position: absolute;
  left: 4%;
  top: 48%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid rgba(44, 138, 136, .86);
  border-radius: 50%;
  background: rgba(255, 255, 255, .76);
}
.chapter1-bonsai-prune__shears::after { left: 18%; top: 60%; scale: .82; opacity: .92; }
.chapter1-bonsai-prune__shears i {
  position: absolute;
  left: 24%;
  top: 48%;
  width: 70%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b9b98, #ecfffb 58%, #6ac7bf);
  transform-origin: 0 50%;
}
.chapter1-bonsai-prune__shears i:first-child { rotate: -20deg; }
.chapter1-bonsai-prune__shears i:last-child { rotate: 22deg; }
.chapter1-bonsai-prune__cut-flash {
  position: absolute;
  z-index: 5;
  left: var(--cut-x, 51%);
  top: var(--cut-y, 43%);
  translate: -50% -50%;
  width: clamp(28px, 3.6vw, 42px);
  height: clamp(28px, 3.6vw, 42px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .8), 0 0 24px rgba(196, 244, 238, .9);
  opacity: 0;
  pointer-events: none;
}
.chapter1-bonsai-prune__cut-line {
  position: absolute;
  z-index: 5;
  left: var(--cut-x, 51%);
  top: var(--cut-y, 43%);
  width: 3px;
  height: clamp(34px, 4.8vw, 52px);
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #fff 28%, rgba(210, 248, 244, .95) 52%, transparent);
  rotate: -38deg;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .85));
}
.chapter1-bonsai-prune__branch-fall {
  position: absolute;
  z-index: 5;
  left: var(--cut-x, 51%);
  top: var(--cut-y, 43%);
  width: clamp(54px, 7vw, 82px);
  height: clamp(7px, .9vw, 10px);
  border-radius: 999px;
  background: linear-gradient(90deg, #2f8f8c 0%, #5eb8b3 72%, #8fd4cf 100%);
  opacity: 0;
  transform-origin: 12% center;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(42, 120, 118, .28));
}
.chapter1-bonsai-prune__branch-fall::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  translate: 0 -50%;
  width: clamp(18px, 2.4vw, 26px);
  height: clamp(18px, 2.4vw, 26px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(168, 230, 224, .95) 0 18%, transparent 19%),
    repeating-conic-gradient(from 0deg, #6eb8b3 0 14deg, transparent 14deg 28deg);
  opacity: .92;
}
.chapter1-bonsai-prune__debris,
.chapter1-bonsai-prune__cut-spark,
.chapter1-bonsai-prune__branch-chip,
.chapter1-bonsai-prune__needle-chip {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.chapter1-bonsai-prune__cut-spark {
  inset: auto;
  left: var(--sx);
  top: var(--sy);
  width: clamp(18px, 2.4vw, 30px);
  height: clamp(18px, 2.4vw, 30px);
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 24%, rgba(196,244,238,.62) 25% 46%, transparent 48%),
    repeating-conic-gradient(from 8deg, rgba(129, 224, 212, .95) 0 9deg, transparent 9deg 22deg);
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(196,244,238,.9));
}
.chapter1-bonsai-prune__cut-spark--a { --sx: 51%; --sy: 43%; }
.chapter1-bonsai-prune__cut-spark--b { --sx: 44%; --sy: 57%; width: clamp(14px, 1.9vw, 24px); height: clamp(14px, 1.9vw, 24px); }
.chapter1-bonsai-prune__cut-spark--c { --sx: 36%; --sy: 64%; width: clamp(16px, 2.1vw, 26px); height: clamp(16px, 2.1vw, 26px); }
.chapter1-bonsai-prune__branch-chip {
  inset: auto;
  left: var(--bx);
  top: var(--by);
  width: var(--bw, clamp(70px, 8vw, 112px));
  height: var(--bh, clamp(7px, .9vw, 11px));
  border-radius: 999px;
  background: linear-gradient(90deg, #3a918e 0%, #5eb8b3 58%, #91d9d2 100%);
  opacity: 0;
  transform-origin: 14% 50%;
  filter: drop-shadow(0 6px 9px rgba(42, 120, 118, .18));
}
.chapter1-bonsai-prune__branch-chip::before,
.chapter1-bonsai-prune__branch-chip::after {
  content: "";
  position: absolute;
  right: -12%;
  top: 50%;
  translate: 0 -50%;
  width: clamp(24px, 3vw, 42px);
  height: clamp(24px, 3vw, 42px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(173, 239, 230, .88) 0 13%, transparent 14%),
    repeating-conic-gradient(from -8deg, rgba(95, 183, 177, .9) 0 7deg, transparent 7deg 18deg);
}
.chapter1-bonsai-prune__branch-chip::before { right: 22%; scale: .62; opacity: .62; }
.chapter1-bonsai-prune__branch-chip--a { --bx: 46%; --by: 53%; --bw: clamp(86px, 10vw, 138px); rotate: -3deg; }
.chapter1-bonsai-prune__branch-chip--b { --bx: 35%; --by: 65%; --bw: clamp(76px, 8.6vw, 120px); rotate: 13deg; }
.chapter1-bonsai-prune__branch-chip--c { --bx: 27%; --by: 70%; --bw: clamp(64px, 7.2vw, 104px); rotate: -11deg; }
.chapter1-bonsai-prune__needle-chip {
  inset: auto;
  left: var(--nx);
  top: var(--ny);
  width: clamp(30px, 3.7vw, 48px);
  height: clamp(30px, 3.7vw, 48px);
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(172, 239, 230, .9) 0 12%, transparent 13%),
    repeating-conic-gradient(from 0deg, rgba(111, 205, 195, .86) 0 5deg, transparent 5deg 16deg);
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(36, 137, 132, .12));
}
.chapter1-bonsai-prune__needle-chip--a { --nx: 51%; --ny: 42%; }
.chapter1-bonsai-prune__needle-chip--b { --nx: 42%; --ny: 58%; scale: .8; }
.chapter1-bonsai-prune__needle-chip--c { --nx: 31%; --ny: 65%; scale: .72; }
.chapter1-bonsai-prune__marker {
  position: absolute;
  z-index: 6;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: clamp(120px, 15vw, 168px);
  height: clamp(120px, 15vw, 168px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .35s var(--ease-out);
}
.chapter1-bonsai-prune__marker::before {
  content: "";
  position: absolute;
  inset: 50%;
  translate: -50% -50%;
  width: clamp(18px, 2.2vw, 26px);
  height: clamp(18px, 2.2vw, 26px);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.chapter1-bonsai-prune__marker:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .55);
  outline-offset: 4px;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__art--before {
  animation: bonsai-prune-cut-before 2.65s cubic-bezier(.2, .8, .2, 1) forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__art--after {
  animation: bonsai-prune-after-settle 2.85s cubic-bezier(.2, .8, .2, 1) forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__shears {
  animation: bonsai-prune-shears 1.05s cubic-bezier(.18, .82, .24, 1) forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__shears i:first-child {
  animation: bonsai-prune-shear-blade-a .52s ease-out .2s 2 alternate;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__shears i:last-child {
  animation: bonsai-prune-shear-blade-b .52s ease-out .2s 2 alternate;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__cut-flash {
  animation: bonsai-prune-cut-flash 1.28s var(--ease-out) forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__cut-line {
  animation: bonsai-prune-cut-line .95s ease-out forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__branch-fall {
  animation: bonsai-prune-branch-fall 1.55s cubic-bezier(.45, 0, .2, 1) .18s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__cut-spark--a {
  animation: bonsai-prune-spark .72s ease-out .12s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__cut-spark--b {
  animation: bonsai-prune-spark .72s ease-out .46s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__cut-spark--c {
  animation: bonsai-prune-spark .72s ease-out .72s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__branch-chip--a {
  animation: bonsai-prune-chip-fall-a 1.55s cubic-bezier(.32, .66, .18, 1) .36s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__branch-chip--b {
  animation: bonsai-prune-chip-fall-b 1.7s cubic-bezier(.32, .66, .18, 1) .62s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__branch-chip--c {
  animation: bonsai-prune-chip-fall-c 1.85s cubic-bezier(.32, .66, .18, 1) .82s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__needle-chip--a {
  animation: bonsai-prune-needle-fall-a 1.6s ease-in .38s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__needle-chip--b {
  animation: bonsai-prune-needle-fall-b 1.75s ease-in .66s forwards;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__needle-chip--c {
  animation: bonsai-prune-needle-fall-c 1.95s ease-in .86s forwards;
}
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__art--before {
  opacity: 0;
  visibility: hidden;
}
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__art--after {
  opacity: 1;
  animation: none;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__marker,
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__branch-hint,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__marker,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__branch-hint,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__heading--before,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__cut-line,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__branch-fall,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__cut-flash,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__shears,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__debris {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__heading--after,
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__verse {
  display: block;
  animation: ch1-story-prompt-in .95s var(--ease-out) .45s both;
}
.chapter1-bonsai-prune__heading {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(28px, 5.8vh, 68px);
  translate: -50% 0;
  margin: 0;
  width: min(88vw, 720px);
  text-align: center;
  color: #1a6d70;
  pointer-events: none;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.chapter1-bonsai-prune__heading--before {
  animation: ch1-story-prompt-in .95s var(--ease-out) .35s both;
}
.chapter1-bonsai-prune__heading--after {
  display: none;
}
.chapter1-bonsai-prune__title {
  margin: 0;
  font-family: var(--font-literary);
  font-size: clamp(1.02rem, 1.75vw, 1.48rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .1em;
}
.chapter1-bonsai-prune__subtitle {
  margin: clamp(6px, 1vh, 10px) 0 0;
  font-family: var(--font-literary);
  font-size: clamp(.88rem, 1.28vw, 1.06rem);
  line-height: 1.6;
  letter-spacing: .14em;
}
.chapter1-bonsai-prune__verse {
  position: absolute;
  z-index: 5;
  right: clamp(120px, 18vw, 240px);
  top: 42%;
  translate: 0 -50%;
  display: none;
  margin: 0;
  color: #1a6d70;
  font-family: var(--font-literary);
  font-size: clamp(.96rem, 1.4vw, 1.18rem);
  line-height: 2;
  letter-spacing: .08em;
  text-align: left;
  pointer-events: none;
}
.chapter1-bonsai-prune__verse p { margin: 0; }
.chapter1-bonsai-prune__branch-hint {
  position: absolute;
  z-index: 5;
  left: 56%;
  top: 44%;
  margin: 0;
  color: #1f7274;
  font-family: var(--font-classical);
  font-size: clamp(.76rem, 1.05vw, .9rem);
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), visibility .35s;
  animation: ch1-story-prompt-in .95s var(--ease-out) .55s both;
}
.chapter1-bonsai-prune__branch-hint::before {
  content: "";
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(18px, 2.2vw, 26px);
  height: clamp(18px, 2.2vw, 26px);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.chapter1-bonsai-prune.is-pruned {
  cursor: pointer;
}
.chapter1-bonsai-prune__continue {
  position: absolute;
  inset: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none;
}
.chapter1-bonsai-prune.is-pruned .chapter1-bonsai-prune__continue {
  display: block;
}
.chapter1-bonsai-prune__continue:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .45);
  outline-offset: -4px;
}
.chapter1-bonsai-prune.is-pruning .chapter1-bonsai-prune__continue {
  pointer-events: none;
}

.chapter1-room {
  overflow: hidden;
  background: #fff;
}
.chapter1-room__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  animation: landscape-rise 1.4s var(--ease-out) both;
}
.chapter1-room__enter {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.chapter1-room__enter:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .45);
  outline-offset: -4px;
}
.chapter1-room__marker {
  position: absolute;
  z-index: 6;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: clamp(180px, 22vw, 240px);
  height: clamp(180px, 22vw, 240px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.chapter1-room__marker[hidden] { display: none !important; }
.chapter1-room__marker::before {
  display: none;
}
.chapter1-room__marker:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .55);
  outline-offset: 4px;
}

.chapter1-dataviz {
  overflow: hidden;
  background: #f7fbfc;
}
.chapter1-dataviz__hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: clamp(16px, 2.2vh, 28px);
  translate: -50% 0;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(56, 127, 121, .22);
  border-radius: 999px;
  color: #2d6568;
  font-family: var(--font-classical);
  font-size: clamp(.72rem, 1vw, .84rem);
  letter-spacing: .14em;
  white-space: nowrap;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  pointer-events: none;
  animation: ch2-scroll-hint-in .8s var(--ease-out) .5s both, ch2-scroll-hint-glow 3.4s ease-in-out 1.4s infinite;
  transition: opacity .55s var(--ease-out), visibility .55s;
}
.chapter1-dataviz__hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
  animation: none;
}
.chapter1-dataviz__viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: grab;
  scrollbar-width: none;
  scroll-behavior: auto;
  touch-action: pan-y pinch-zoom;
  mask-image: linear-gradient(180deg, transparent, #000 2%, #000 98%, transparent);
  transition: box-shadow .4s var(--ease);
}
.chapter1-dataviz__viewport.is-auto-scrolling { cursor: default; box-shadow: inset 0 -2px 0 rgba(115, 169, 155, .18); }
.chapter1-dataviz__viewport.is-auto-scrolling:active { cursor: default; }
.chapter1-dataviz__viewport.is-paused { box-shadow: inset 0 -2px 0 rgba(196, 82, 72, .22); }
.chapter1-dataviz__viewport:active,
.chapter1-dataviz__viewport.is-dragging { cursor: grabbing; }
.chapter1-dataviz__viewport::-webkit-scrollbar { display: none; }
.chapter1-dataviz__art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@keyframes bonsai-prune-marker-pulse { 0%, 100% { opacity: .78; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes bonsai-prune-cut-flash {
  0% { opacity: 0; scale: .55; box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
  14% { opacity: 1; scale: 1.2; box-shadow: 0 0 0 16px rgba(255, 255, 255, .42), 0 0 40px rgba(196, 244, 238, 1); }
  34% { opacity: .45; scale: .82; translate: -44% -48%; }
  48% { opacity: .9; scale: 1.08; translate: -52% -50%; }
  68% { opacity: .34; scale: .92; translate: -58% -42%; }
  100% { opacity: 0; scale: 1.5; box-shadow: 0 0 0 32px rgba(255, 255, 255, 0); }
}
@keyframes bonsai-prune-cut-line {
  0% { opacity: 0; scale: .4; }
  16% { opacity: 1; scale: 1; }
  42% { opacity: .2; rotate: -24deg; }
  58% { opacity: .9; scale: .95; rotate: -48deg; }
  100% { opacity: 0; scale: 1.08; }
}
@keyframes bonsai-prune-shears {
  0% { opacity: 0; transform: translate3d(-78px, -24px, 0) rotate(-24deg) scale(.88); }
  18% { opacity: 1; transform: translate3d(-24px, -8px, 0) rotate(-14deg) scale(1); }
  42% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1.03); }
  72% { opacity: .88; transform: translate3d(16px, 10px, 0) rotate(8deg) scale(.98); }
  100% { opacity: 0; transform: translate3d(86px, 46px, 0) rotate(22deg) scale(.9); }
}
@keyframes bonsai-prune-shear-blade-a { to { rotate: -6deg; } }
@keyframes bonsai-prune-shear-blade-b { to { rotate: 7deg; } }
@keyframes bonsai-prune-spark {
  0% { opacity: 0; scale: .35; rotate: 0deg; }
  28% { opacity: 1; scale: 1.18; }
  100% { opacity: 0; scale: 1.8; rotate: 80deg; }
}
@keyframes bonsai-prune-branch-fall {
  0% { opacity: 0; rotate: -12deg; translate: 0 0; }
  12% { opacity: 1; rotate: -8deg; translate: 0 0; }
  38% { opacity: 1; rotate: 24deg; translate: 16px 28px; }
  72% { opacity: .72; rotate: 58deg; translate: 38px 88px; }
  100% { opacity: 0; rotate: 92deg; translate: 64px 148px; }
}
@keyframes bonsai-prune-chip-fall-a {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg); }
  12% { opacity: 1; }
  42% { opacity: .95; transform: translate3d(24px, 38px, 0) rotate(28deg); }
  100% { opacity: 0; transform: translate3d(70px, 176px, 0) rotate(98deg); }
}
@keyframes bonsai-prune-chip-fall-b {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(4deg); }
  14% { opacity: .95; }
  52% { opacity: .82; transform: translate3d(-26px, 58px, 0) rotate(-38deg); }
  100% { opacity: 0; transform: translate3d(-74px, 190px, 0) rotate(-112deg); }
}
@keyframes bonsai-prune-chip-fall-c {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg); }
  15% { opacity: .9; }
  52% { opacity: .72; transform: translate3d(12px, 74px, 0) rotate(46deg); }
  100% { opacity: 0; transform: translate3d(38px, 205px, 0) rotate(128deg); }
}
@keyframes bonsai-prune-needle-fall-a {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.78); }
  16% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(54px, 154px, 0) rotate(130deg) scale(.54); }
}
@keyframes bonsai-prune-needle-fall-b {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.72); }
  18% { opacity: .86; }
  100% { opacity: 0; transform: translate3d(-42px, 172px, 0) rotate(-156deg) scale(.48); }
}
@keyframes bonsai-prune-needle-fall-c {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.66); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(22px, 186px, 0) rotate(188deg) scale(.44); }
}
@keyframes bonsai-prune-cut-before {
  0% { opacity: 1; filter: brightness(1) saturate(1); transform: none; }
  12% { filter: brightness(1.13) saturate(1.04); transform: translate3d(-1px, 0, 0) rotate(-.08deg); }
  22% { filter: brightness(1.05); transform: translate3d(1px, 0, 0) rotate(.08deg); }
  36% { opacity: .88; filter: brightness(1.08) saturate(1.02); transform: translate3d(-1px, 1px, 0) rotate(-.05deg); }
  52% { opacity: .68; filter: brightness(1.04) blur(.2px); transform: translate3d(1px, 1px, 0) rotate(.04deg); }
  72% { opacity: .34; filter: blur(.7px); transform: translate3d(2px, 3px, 0) rotate(.08deg); }
  100% { opacity: 0; filter: blur(1.2px); transform: translate3d(4px, 6px, 0) rotate(.12deg); }
}
@keyframes bonsai-prune-after-settle {
  0%, 34% { opacity: 0; filter: brightness(1.12) blur(2px); transform: translate3d(0, 0, 0) scale(1.006); }
  52% { opacity: .48; filter: brightness(1.07) blur(1px); transform: translate3d(-1px, 0, 0) scale(1.004); }
  72% { opacity: .88; filter: brightness(1.02) blur(.2px); transform: translate3d(1px, -1px, 0) scale(1.002); }
  86% { opacity: 1; transform: translate3d(0, 1px, 0) scale(1); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes bonsai-prune-reveal-after {
  0% { opacity: 0; filter: brightness(1.12) blur(3px); scale: 1.01; }
  55% { opacity: .72; filter: brightness(1.04) blur(1px); scale: 1.005; }
  100% { opacity: 1; filter: none; scale: 1; }
}

.study-panorama {
  background: #fff;
  overflow: hidden;
}
.study-panorama__heading,
.study-panorama__hint,
.study-panorama__progress,
.study-panorama .panel-back,
.study-panorama .study-complete,
.study-panorama .study-next {
  display: none;
}
.study-panorama__heading {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 9vw, 130px);
  top: 4.6vh;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #385862;
}
.study-panorama__tag {
  writing-mode: vertical-rl;
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .06em;
  line-height: .82;
}
.study-panorama__chars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(3rem, 6.7vw, 6rem);
  font-weight: 400;
  line-height: .88;
}
.study-panorama__chars b { font-weight: 400; }
.study-panorama__hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 6vh;
  translate: -50% 0;
  margin: 0;
  width: max-content;
  max-width: 92vw;
  color: #385862;
  font-size: clamp(.82rem, 1.5vw, 1.7rem);
  letter-spacing: .1em;
  text-align: center;
  white-space: nowrap;
}
.study-panorama__viewport {
  position: absolute;
  inset: 0;
  z-index: 3;
  height: 100%;
  mask-image: none;
  cursor: grab;
  scrollbar-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pinch-zoom;
}
.study-panorama__viewport.is-dragging { cursor: grabbing; }
.study-panorama__viewport::-webkit-scrollbar { display: none; }
.study-panorama__track {
  position: relative;
  width: max-content;
  height: 100%;
  min-width: 100%;
}
.study-panorama__art {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.study-panorama__objects {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.study-object {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, clamp(120px, 14vw, 220px));
  height: var(--h, clamp(120px, 22vh, 280px));
  translate: -50% -50%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
  animation: none;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.study-object:hover {
  background: transparent;
  box-shadow: none;
}
.study-object.is-visited {
  background: transparent;
  border-color: transparent;
  animation: none;
}
.study-panorama__progress {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 9vw, 130px);
  bottom: 11vh;
  display: grid;
  gap: 8px;
  min-width: 140px;
  color: #385862;
  font-size: .72rem;
  letter-spacing: .1em;
}
.study-panorama__progress strong {
  font-weight: 400;
  font-size: 1rem;
}
.study-panorama__progress strong b { color: #3b8b83; font-size: 1.2rem; }
.study-panorama__progress > i {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(63, 143, 134, .15);
  overflow: hidden;
}
.study-panorama__progress > i b {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #53a59b, #b1d5a3);
  transition: width .6s var(--ease-out);
}
.study-panorama .study-complete { z-index: 9; }
.study-panorama .panel-back,
.study-panorama .chapter-cta { z-index: 9; }

.chapter1-detail {
  overflow: hidden;
  background: #fff;
}
.chapter1-detail__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  animation: landscape-rise 1.4s var(--ease-out) both;
}
.chapter1-detail__back {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.chapter1-detail__back:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .45);
  outline-offset: -4px;
}
.chapter1-detail__enter {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.chapter1-detail__enter:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .45);
  outline-offset: -4px;
}

.chapter1-study-arrange {
  overflow: hidden;
  background: #fff;
}
.chapter1-study-arrange__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  --arrange-progress: 0;
}
.chapter1-study-arrange__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}
.chapter1-study-arrange__art--start {
  z-index: 1;
  opacity: calc(1 - var(--arrange-progress) * .72);
  filter: blur(calc(var(--arrange-progress) * 2px)) saturate(calc(1 - var(--arrange-progress) * .08));
  transform: translateY(calc(var(--arrange-progress) * 10px)) scale(calc(1 + var(--arrange-progress) * .006));
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .8s var(--ease-out);
}
.chapter1-study-arrange__art--done {
  z-index: 2;
  opacity: calc(var(--arrange-progress) * .98);
  filter: brightness(calc(1.08 - var(--arrange-progress) * .08)) blur(calc((1 - var(--arrange-progress)) * 2px));
  transform: translateY(calc((1 - var(--arrange-progress)) * -10px)) scale(calc(1.012 - var(--arrange-progress) * .012));
  transition: opacity .85s var(--ease-out), filter .85s var(--ease-out), transform .9s var(--ease-out);
}
.chapter1-study-arrange.is-complete .chapter1-study-arrange__art--start {
  opacity: 0;
  visibility: hidden;
}
.chapter1-study-arrange.is-complete .chapter1-study-arrange__art--done {
  opacity: 1;
  filter: none;
  transform: none;
  animation: study-arrange-final-breathe 1.5s var(--ease-out) both;
}
.chapter1-study-arrange__glow {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 61%;
  width: 62vw;
  max-width: 980px;
  aspect-ratio: 2.8 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: calc(.12 + var(--arrange-progress) * .24);
  background: radial-gradient(ellipse at center, rgba(121, 226, 213, .34), rgba(121, 226, 213, 0) 68%);
  pointer-events: none;
  filter: blur(18px);
  transition: opacity .7s var(--ease-out);
}
.chapter1-study-arrange__items {
  position: absolute;
  inset: 0;
  z-index: 6;
}
.chapter1-study-arrange__item {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  translate: -50% -100%;
  display: grid;
  place-items: center;
  width: min(var(--iw), var(--max-iw));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: #1f7778;
  background: transparent;
  cursor: grab;
  opacity: 1;
  transition:
    left .72s cubic-bezier(.18, .82, .22, 1),
    top .72s cubic-bezier(.18, .82, .22, 1),
    filter .25s var(--ease-out),
    opacity .35s var(--ease-out);
  animation: study-arrange-item-idle 2.8s ease-in-out var(--delay) infinite;
}
.chapter1-study-arrange__item img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 18px rgba(34, 113, 110, .18));
  transition: transform .32s var(--ease-out), filter .32s var(--ease-out), opacity .32s var(--ease-out);
}
.chapter1-study-arrange__item span {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 4px);
  translate: -50% 0;
  width: max-content;
  color: #297a79;
  font-family: var(--font-literary);
  font-size: clamp(.82rem, 1.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 0 18px rgba(168, 238, 229, .7);
  pointer-events: none;
}
.chapter1-study-arrange__item:hover img,
.chapter1-study-arrange__item:focus-visible img {
  transform: translateY(-4px) scale(1.035);
  filter: drop-shadow(0 18px 24px rgba(34, 113, 110, .24));
}
.chapter1-study-arrange__item:focus-visible {
  outline: none;
}
.chapter1-study-arrange__item.is-dragging {
  z-index: 9;
  cursor: grabbing;
  filter: drop-shadow(0 18px 28px rgba(33, 122, 118, .22));
  animation: none;
  transition: filter .18s var(--ease-out);
}
.chapter1-study-arrange__item.is-dragging img {
  transform: translateY(-8px) scale(1.08) rotate(-.45deg);
  filter: drop-shadow(0 24px 30px rgba(34, 113, 110, .3));
}
.chapter1-study-arrange__item.is-dragging span {
  opacity: .35;
}
.chapter1-study-arrange__item.is-placing {
  animation: study-arrange-place .72s var(--ease-out) forwards;
}
.chapter1-study-arrange__item.is-placing img {
  animation: study-arrange-image-place .72s var(--ease-out) forwards;
}
.chapter1-study-arrange__item.is-placed {
  left: var(--tx);
  top: var(--ty);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.chapter1-study-arrange__back {
  position: absolute;
  z-index: 8;
  right: clamp(18px, 3vw, 44px);
  top: clamp(18px, 3vw, 40px);
  display: grid;
  place-items: center;
  width: clamp(40px, 4.2vw, 52px);
  height: clamp(40px, 4.2vw, 52px);
  padding: 0;
  border: 1px solid rgba(56, 127, 121, .24);
  border-radius: 50%;
  color: #2b7b78;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 12px 32px rgba(43, 132, 125, .12);
  backdrop-filter: blur(10px);
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1;
  cursor: pointer;
  transition: transform .28s var(--ease-out), background .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.chapter1-study-arrange__back:hover,
.chapter1-study-arrange__back:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 38px rgba(43, 132, 125, .18);
}
.chapter1-study-arrange__back:focus-visible {
  outline: 2px solid rgba(43, 123, 120, .34);
  outline-offset: 3px;
}

.chapter1-study-settle {
  overflow: hidden;
  background: #fff;
}
.chapter1-study-settle__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  animation: study-settle-in 1.05s var(--ease-out) both;
}
.chapter1-study-settle__enter {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.chapter1-study-settle__enter:focus-visible {
  outline: 2px solid rgba(43, 123, 120, .34);
  outline-offset: -6px;
}

@keyframes study-settle-in {
  from { opacity: 0; filter: brightness(1.08) blur(4px); transform: scale(1.012); }
  to { opacity: 1; filter: none; transform: none; }
}

@keyframes study-arrange-item-idle {
  50% { transform: translateY(-5px); }
}
@keyframes study-arrange-place {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  58% { opacity: 1; transform: translate3d(0,-8px,0) scale(1.04); }
  100% { opacity: 0; transform: translate3d(0,3px,0) scale(.82); }
}
@keyframes study-arrange-image-place {
  0% { transform: translateY(-8px) scale(1.08) rotate(-.45deg); filter: drop-shadow(0 24px 30px rgba(34, 113, 110, .3)); }
  54% { transform: translateY(-14px) scale(1.08) rotate(.25deg); filter: drop-shadow(0 28px 34px rgba(34, 113, 110, .24)); }
  100% { transform: translateY(0) scale(.92) rotate(0deg); filter: drop-shadow(0 6px 10px rgba(34, 113, 110, .08)); }
}
@keyframes study-arrange-final-breathe {
  0% { filter: brightness(1.08); transform: scale(1.006); }
  100% { filter: none; transform: none; }
}

.panel-back { position: absolute; z-index: 10; left: 8vw; bottom: 4.5vh; min-width: 130px; min-height: 44px; border: 1px solid rgba(56,127,121,.28); border-radius: 12px; color: #477b79; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); cursor: pointer; transition: transform .3s, background .3s; }
.panel-back:hover { transform: translateX(-4px); background: #fff; }
.study-complete { position: absolute; z-index: 11; left: 50%; bottom: 12vh; translate: -50%; display: flex; align-items: center; gap: 12px; min-width: 310px; padding: 13px 18px; border: 1px solid rgba(59,139,130,.26); border-radius: 14px; color: #3e7470; background: rgba(255,255,255,.9); box-shadow: 0 18px 52px rgba(43,111,102,.16); backdrop-filter: blur(14px); animation: card-in .6s var(--ease-out) both; }
.study-complete > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: #4c9b92; font-style: normal; }
.study-complete span { display: grid; gap: 3px; }
.study-complete b { font-weight: 400; letter-spacing: .08em; }
.study-complete small { font-size: .62rem; opacity: .6; }
.study-next { transition: opacity .4s, transform .3s var(--ease), background .3s, box-shadow .3s; }
.study-next.is-ready { color: #fff; border-color: #3e8d84; background: linear-gradient(135deg, #5aa79e, #3e827d); box-shadow: 0 16px 42px rgba(54,133,124,.26); }
.discovery-spark { position: absolute; z-index: 12; left: 50%; bottom: 18vh; width: 12px; height: 6px; border-radius: 90% 10% 90% 10%; background: #68b3a5; pointer-events: none; animation: discovery-spark .9s var(--ease-out) var(--spark-delay) both; }

@keyframes bamboo-sway { 50% { transform: rotate(1.5deg) translateX(5px); } }
@keyframes courtyard-breathe { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.012); } }
@keyframes hotspot-float { 50% { transform: translateY(-7px); box-shadow: 0 0 0 13px rgba(91,180,164,0), 0 16px 36px rgba(44,111,103,.17); } }
@keyframes discovery-spark { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--spark-x), -120px) scale(1.2) rotate(240deg); } }

.chapter-panel--panorama { background: #fbfff7; }
.panorama-viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  scroll-behavior: auto;
  touch-action: pan-y pinch-zoom;
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  transition: box-shadow .4s var(--ease);
}
.panorama-viewport.is-auto-scrolling { box-shadow: inset 0 -2px 0 rgba(115,169,155,.18); }
.panorama-viewport.is-paused { box-shadow: inset 0 -2px 0 rgba(196,82,72,.22); }
.panorama-viewport.is-hovering { cursor: grab; }
.panorama-viewport.is-dragging .scroll-roll__layer,
.panorama-viewport.is-dragging .scroll-ornaments,
.panorama-viewport.is-dragging .scroll-roll__wash {
  transition: none;
}
.panorama-viewport:active, .panorama-viewport.is-dragging { cursor: grabbing; }
.panorama-viewport::-webkit-scrollbar { display: none; }
.panorama-track { height: 100%; }
.panorama-viewport img { user-select: none; -webkit-user-drag: none; }
.panorama-tools {
  position: absolute;
  left: 50%; bottom: 26px; translate: -50% 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(430px, 52vw);
}
.panorama-tools button {
  flex: 0 0 38px; height: 38px;
  border: 1px solid rgba(111,130,43,.35);
  border-radius: 10px;
  color: #7b8e34;
  background: rgba(255,255,255,.8);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(96,112,37,.1);
  transition: transform .25s var(--ease), background .25s;
}
.panorama-tools button:hover { transform: scale(1.1); background: #fff; }
.progress { flex: 1; height: 2px; background: rgba(126,143,49,.2); }
.progress i { display: block; width: 0; height: 100%; background: #8da03c; transition: width .15s; }
.chapter-panel--panorama .chapter-cta { left: auto; right: 4vw; translate: 0; }

/* Chapter 2 — landscape scroll */
.landscape-scroll {
  position: relative;
  overflow: hidden;
  background: #f8fff5;
  --edge-fade-left: 0;
  --edge-fade-right: 1;
  --mist-opacity: .38;
  --veil-opacity: .55;
}
.landscape-scroll::before,
.landscape-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 7;
  width: clamp(56px, 14vw, 180px);
  pointer-events: none;
  transition: opacity .7s var(--ease-out);
}
.landscape-scroll::before {
  left: 0;
  opacity: var(--edge-fade-left);
  background: linear-gradient(90deg, rgba(248, 255, 245, .94) 0%, rgba(248, 255, 245, .42) 42%, transparent 100%);
}
.landscape-scroll::after {
  right: 0;
  opacity: var(--edge-fade-right);
  background: linear-gradient(270deg, rgba(248, 255, 245, .94) 0%, rgba(248, 255, 245, .42) 42%, transparent 100%);
}
.landscape-scroll__hint {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 22px;
  translate: -50% 0;
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  color: #3f7f79;
  background: rgba(255, 255, 252, .74);
  font-size: .76rem;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
  pointer-events: none;
  animation: ch2-scroll-hint-in .8s var(--ease-out) .5s both, ch2-scroll-hint-glow 3.4s ease-in-out 1.4s infinite;
  transition: opacity .55s var(--ease-out), visibility .55s;
}
.landscape-scroll__hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
  animation: none;
}
.landscape-scroll__viewport {
  touch-action: pan-x;
  overscroll-behavior: contain;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.landscape-scroll__viewport.is-auto-scrolling { cursor: default; }
.landscape-scroll__viewport.is-auto-scrolling:active { cursor: default; }
.landscape-scroll__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.landscape-scroll__mist {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  filter: blur(52px);
  opacity: var(--mist-opacity);
  animation: landscape-mist-drift 20s ease-in-out infinite alternate;
}
.landscape-scroll__mist--a {
  left: 8%;
  top: 18%;
  width: min(34vw, 420px);
  height: min(18vw, 220px);
}
.landscape-scroll__mist--b {
  right: 12%;
  top: 36%;
  width: min(28vw, 360px);
  height: min(14vw, 180px);
  animation-delay: -7s;
  animation-duration: 24s;
}
.landscape-scroll__mist--c {
  left: 42%;
  bottom: 8%;
  width: min(22vw, 280px);
  height: min(10vw, 130px);
  animation-delay: -12s;
  animation-duration: 18s;
}
.landscape-scroll__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 46%, transparent 36%, rgba(248, 255, 245, .18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 28%, transparent 72%, rgba(232, 248, 240, .16) 100%);
  opacity: var(--veil-opacity);
  animation: landscape-veil-breathe 7s ease-in-out infinite;
}
.landscape-scroll:has(.landscape-scroll__viewport.is-paused) .landscape-scroll__atmosphere .landscape-scroll__veil,
.landscape-scroll:has(.landscape-scroll__viewport.is-dragging) .landscape-scroll__atmosphere .landscape-scroll__veil {
  animation-play-state: paused;
  opacity: .22;
}
.landscape-scroll:has(.landscape-scroll__viewport.is-paused) .landscape-scroll__atmosphere .landscape-scroll__mist,
.landscape-scroll:has(.landscape-scroll__viewport.is-dragging) .landscape-scroll__atmosphere .landscape-scroll__mist {
  animation-play-state: paused;
  opacity: calc(var(--mist-opacity) * .55);
}
.landscape-scroll__track {
  position: relative;
  display: inline-block;
  width: max-content;
  height: 100%;
  vertical-align: top;
}
.landscape-scroll__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 100%;
  line-height: 0;
}
.landscape-scroll__art {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  pointer-events: none;
  --art-reveal: 0;
  transform: translate3d(
    calc(var(--mouse-x, 0) * var(--mouse-strength, 0) * 8px),
    calc(var(--mouse-y, 0) * var(--mouse-strength, 0) * 5px),
    0
  );
  filter: blur(calc((1 - var(--art-reveal)) * 5px)) saturate(calc(.88 + var(--art-reveal) * .12));
  opacity: calc(.55 + var(--art-reveal) * .45);
  transition: transform .5s var(--ease-out), filter .8s var(--ease-out), opacity .8s var(--ease-out);
}
.landscape-scroll.is-revealed .landscape-scroll__art {
  --art-reveal: 1;
}
@keyframes ch2-scroll-hint-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ch2-scroll-hint-glow { 50% { box-shadow: 0 0 0 1px rgba(110, 181, 168, .24), 0 0 18px rgba(110, 181, 168, .18); } }
.landscape-scroll.is-at-end::after {
  animation: landscape-end-glow 2.4s ease-in-out infinite;
}
@keyframes landscape-mist-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(24px, -10px, 0) scale(1.08); }
}
@keyframes landscape-veil-breathe {
  0%, 100% { opacity: var(--veil-opacity); }
  50% { opacity: calc(var(--veil-opacity) * .72); }
}
@keyframes landscape-end-glow {
  0%, 100% { opacity: var(--edge-fade-right); }
  50% { opacity: .92; }
}
.landscape-transition__nav {
  position: absolute;
  top: clamp(16px, 2.2vh, 28px);
  right: clamp(16px, 2.2vw, 28px);
  z-index: 8;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #a8a37c;
  background: transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), color .25s, background .25s;
}
.landscape-transition__nav:hover,
.landscape-transition__nav:focus-visible {
  transform: scale(1.06);
  color: #8f8a66;
  background: rgba(255, 255, 255, .45);
}
.landscape-transition__nav svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.25;
  pointer-events: none;
}

/* Chapter 2 — transition confirm (code dialog) */
.landscape-transition {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fff5 0%, #eef8ee 100%);
}
.landscape-transition__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.landscape-transition__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(2px) saturate(.92);
  transform: scale(1.03);
}
.landscape-transition__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(244, 255, 243, .38) 42%, rgba(244, 255, 243, .55) 100%),
    radial-gradient(ellipse 58% 42% at 50% 48%, rgba(255, 255, 255, .82), transparent 72%);
}
.landscape-transition__title {
  position: absolute;
  left: 50%;
  top: clamp(72px, 14vh, 148px);
  z-index: 2;
  margin: 0;
  translate: -50% 0;
  color: #217875;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  pointer-events: none;
}
.landscape-transition__quote {
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  bottom: clamp(72px, 14vh, 180px);
  z-index: 2;
  margin: 0;
  max-width: min(420px, 42vw);
  color: #3f7f79;
  font-family: var(--font-classical);
  font-size: clamp(.82rem, 1.2vw, 1rem);
  line-height: 2;
  letter-spacing: .12em;
  text-align: right;
  pointer-events: none;
}
.landscape-transition__enter {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.landscape-transition__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(139, 126, 62, .42);
  outline-offset: -1px;
}

/* Continuous horizontal landscape scroll */
.scroll-roll {
  position: relative;
  width: max(420vw, 3200px);
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #fffef0 0%, #f8fff8 42%, #dff3e3 100%);
  --scroll-progress: 0;
  --mouse-x: 0;
  --mouse-y: 0;
  --mouse-strength: 0;
}
.scroll-roll::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(86,143,113,.08);
  z-index: 4;
}
.scroll-roll__sky {
  position: absolute;
  inset: 0 0 28%;
  background: linear-gradient(180deg, #fffef5 0%, #f5fff8 55%, transparent 100%);
  z-index: 0;
}
.scroll-roll__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 15% 25%, rgba(255,232,112,.18), transparent 70%),
    radial-gradient(ellipse 35% 25% at 72% 20%, rgba(255,255,255,.5), transparent 65%);
  z-index: 1;
  pointer-events: none;
  translate:
    calc(var(--mouse-x) * var(--mouse-strength) * 18px)
    calc(var(--mouse-y) * var(--mouse-strength) * 10px);
  transition: translate .35s var(--ease-out);
}
.scroll-roll__layer {
  position: absolute;
  bottom: 0;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 2;
  pointer-events: none;
  will-change: translate;
  translate:
    calc(var(--scroll-progress) * -16px + var(--mouse-x) * var(--mouse-strength) * 10px)
    calc(var(--mouse-y) * var(--mouse-strength) * 5px);
  transition: translate .2s var(--ease-out);
}
.scroll-roll__layer--base { left: -2%; width: 52%; min-width: 680px; }
.scroll-roll__layer--canglang {
  left: 28%; width: 48%; min-width: 640px;
  translate:
    calc(var(--scroll-progress) * -32px + var(--mouse-x) * var(--mouse-strength) * 14px)
    calc(var(--mouse-y) * var(--mouse-strength) * 6px);
}
.scroll-roll__layer--mountain {
  left: 58%; width: 44%; min-width: 580px;
  translate:
    calc(var(--scroll-progress) * -48px + var(--mouse-x) * var(--mouse-strength) * 18px)
    calc(var(--mouse-y) * var(--mouse-strength) * 7px);
}
.scroll-roll__layer--pavilion {
  left: 78%; width: 36%; min-width: 480px;
  translate:
    calc(var(--scroll-progress) * -64px + var(--mouse-x) * var(--mouse-strength) * 22px)
    calc(var(--mouse-y) * var(--mouse-strength) * 8px);
}

.scroll-roll__heading {
  position: absolute;
  z-index: 9;
  left: 4vw;
  top: 11vh;
  color: #356c71;
  pointer-events: none;
}
.scroll-roll__heading small { font-size: .7rem; letter-spacing: .4em; opacity: .56; }
.scroll-roll__heading h2 { margin: 13px 0 14px; font-size: clamp(2.8rem, 5.5vw, 5.2rem); font-weight: 300; letter-spacing: .08em; line-height: 1; }
.scroll-roll__heading p { margin: 0; font-size: .82rem; letter-spacing: .12em; opacity: .72; }

.scroll-ornaments {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  translate:
    calc(var(--scroll-progress) * -80px + var(--mouse-x) * var(--mouse-strength) * 24px)
    calc(var(--mouse-y) * var(--mouse-strength) * 12px);
  transition: translate .25s var(--ease-out);
}
.scroll-ornament { position: absolute; }
.scroll-ornament--sun {
  left: 8%;
  top: 14%;
  width: min(12vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,232,112,.52);
  box-shadow: 0 0 80px rgba(247,214,64,.22);
  animation: sun-pulse 6s ease-in-out infinite;
}
.scroll-ornament--cloud {
  width: min(14vw, 180px);
  height: min(4vw, 52px);
  border-radius: 50px;
  background: rgba(255,255,255,.72);
  filter: blur(1px);
  box-shadow:
    -28px 8px 0 -4px rgba(255,255,255,.6),
    32px 12px 0 -8px rgba(255,255,255,.5),
    0 18px 40px rgba(255,255,255,.3);
  animation: cloud-drift 18s ease-in-out infinite;
}
.scroll-ornament--cloud-a { left: 22%; top: 18%; animation-delay: 0s; }
.scroll-ornament--cloud-b { left: 48%; top: 12%; width: min(11vw, 140px); animation-delay: -6s; animation-duration: 22s; }
.scroll-ornament--cloud-c { left: 72%; top: 16%; width: min(16vw, 200px); animation-delay: -12s; animation-duration: 20s; }
.scroll-ornament--mist {
  width: min(22vw, 280px);
  height: min(10vw, 120px);
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  filter: blur(40px);
  animation: wash-drift 14s ease-in-out infinite alternate;
}
.scroll-ornament--mist-a { left: 35%; top: 38%; }
.scroll-ornament--mist-b { left: 64%; top: 42%; animation-delay: -5s; }
.scroll-ornament--boat {
  left: 42%;
  bottom: 22%;
  width: min(5vw, 64px);
  height: min(2.2vw, 28px);
  border: 3px solid rgba(91,159,150,.7);
  border-top: 0;
  border-radius: 0 0 60% 60%;
  transform: skewX(-10deg);
  animation: boat-rock 4s ease-in-out infinite;
}
.scroll-ornament--boat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: min(3.5vw, 44px);
  background: rgba(91,159,150,.75);
  box-shadow: 5px 4px 0 3px rgba(112,185,172,.4);
}
.scroll-ornament--ripple {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(99,185,169,.35);
  border-radius: 50%;
  animation: water-ring 3.5s ease-out infinite;
}
.scroll-ornament--ripple-a { left: 40%; bottom: 19%; animation-delay: 0s; }
.scroll-ornament--ripple-b { left: 44%; bottom: 17%; animation-delay: 1.4s; }
.scroll-ornament--seal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(196,82,72,.45);
  border-radius: 6px;
  color: rgba(196,82,72,.7);
  font-style: normal;
  transform: rotate(-8deg);
  opacity: .55;
}
.scroll-ornament--seal span { font-size: 1.4rem; letter-spacing: .1em; }
.scroll-ornament--seal-a { left: 12%; bottom: 28%; }
.scroll-ornament--seal-b { left: 86%; bottom: 32%; transform: rotate(6deg); }
.scroll-ornament--poem {
  left: 58%;
  top: 22%;
  padding: 10px 16px;
  border-left: 2px solid rgba(91,159,150,.35);
  color: rgba(65,111,112,.72);
  font-size: .72rem;
  font-style: normal;
  letter-spacing: .28em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
}
.scroll-ornament--leaf {
  width: 10px;
  height: 14px;
  border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, #8fc9a8, #5a9f8a);
  opacity: 0;
  animation: leaf-fall 9s linear infinite;
}
.scroll-ornament--leaf-a { left: 25%; animation-delay: 0s; }
.scroll-ornament--leaf-b { left: 55%; animation-delay: -3s; animation-duration: 11s; }
.scroll-ornament--leaf-c { left: 80%; animation-delay: -6s; animation-duration: 10s; }
.scroll-ornament--birds {
  left: 30%;
  top: 20%;
  display: flex;
  gap: 10px;
  animation: birds-fly 16s linear infinite;
}
.scroll-ornament--birds i {
  width: 13px;
  height: 7px;
  border-top: 2px solid rgba(71,123,118,.7);
  border-radius: 50%;
  transform: rotate(12deg);
}
.scroll-ornament--birds i:nth-child(2) { translate: 0 8px; }
.scroll-ornament--birds i:nth-child(3) { translate: 0 -4px; }
.scroll-ornament--crane {
  left: 68%;
  top: 28%;
  display: flex;
  gap: 6px;
  animation: crane-glide 20s ease-in-out infinite alternate;
}
.scroll-ornament--crane i {
  width: 22px;
  height: 2px;
  background: rgba(71,123,118,.55);
  border-radius: 2px;
  transform-origin: left center;
}
.scroll-ornament--crane i:first-child { transform: rotate(-25deg) translateY(-6px); }
.scroll-ornament--crane i:last-child { transform: rotate(15deg) translateY(4px); width: 16px; }

.scroll-landmarks { position: absolute; inset: 0; z-index: 6; }
.scroll-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: grid;
  grid-template-columns: 46px auto;
  align-items: center;
  gap: 10px;
  min-width: 128px;
  min-height: 54px;
  padding: 4px 14px 4px 7px;
  border: 1px solid rgba(55,126,123,.28);
  border-radius: 13px;
  color: #3c7774;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 8px rgba(99,185,169,.1), 0 12px 32px rgba(43,112,103,.12);
  cursor: pointer;
  animation: scroll-pin-float 3.5s ease-in-out infinite;
  transition: translate .3s var(--ease), background .3s, box-shadow .3s;
}
.scroll-pin:hover {
  translate: -50% calc(-50% - 5px);
  background: #fff;
  box-shadow: 0 0 0 12px rgba(99,185,169,.14), 0 18px 40px rgba(43,112,103,.18);
}
.scroll-pin.is-visited { border-color: rgba(91,180,164,.5); background: rgba(240,252,247,.92); }
.scroll-pin span { font-size: .76rem; letter-spacing: .1em; }

.mini-icon { position: relative; display: block; width: 40px; height: 40px; border-radius: 10px; background: rgba(122,199,185,.14); }
.mini-icon--mountain::before { content: ""; position: absolute; inset: 10px 6px 7px; background: linear-gradient(135deg, #8fcfc0, #4c9f96); clip-path: polygon(0 100%, 35% 28%, 53% 62%, 70% 18%, 100% 100%); }
.mini-icon--pavilion::before { content: ""; position: absolute; left: 7px; right: 7px; top: 10px; height: 5px; border-radius: 50% 50% 10% 10%; background: #4d9991; box-shadow: 0 7px 0 -1px #76bbae; }
.mini-icon--pavilion::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 12px; border: 2px solid #4d9991; border-top: 0; }
.mini-icon--boat::before { content: ""; position: absolute; left: 7px; top: 21px; width: 26px; height: 9px; border: 3px solid #5b9f96; border-top: 0; border-radius: 0 0 60% 60%; transform: skewX(-12deg); }
.mini-icon--boat::after { content: ""; position: absolute; left: 19px; top: 8px; width: 2px; height: 17px; background: #5b9f96; box-shadow: 5px 4px 0 3px rgba(112,185,172,.45); }
.mini-icon--moon::before { content: ""; position: absolute; width: 21px; height: 21px; left: 9px; top: 8px; border-radius: 50%; background: #d6d96d; box-shadow: 7px -3px 0 0 rgba(255,255,255,.9); }
.drag-cue { position: absolute; z-index: 5; left: 50%; bottom: 5.5vh; translate: -50% 0; display: flex; align-items: center; gap: 12px; color: #58857f; font-size: .7rem; letter-spacing: .16em; }
.drag-cue--scroll {
  left: 62%;
  bottom: 8vh;
  pointer-events: none;
  opacity: .85;
  transition: opacity .5s var(--ease);
}
.panorama-viewport.is-dragging .drag-cue--scroll,
.panorama-viewport.is-paused .drag-cue--scroll { opacity: 1; }
.panorama-viewport.is-auto-scrolling:not(.is-paused):not(.is-hovering) .drag-cue--scroll { opacity: .55; }
.drag-cue i { display: block; width: 44px; height: 1px; background: #74afa4; animation: cue-width 2s ease-in-out infinite; }

@keyframes scroll-pin-float { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 7px); } }
@keyframes cloud-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
@keyframes boat-rock { 0%, 100% { transform: skewX(-10deg) translateY(0); } 50% { transform: skewX(-8deg) translateY(-4px); } }
@keyframes crane-glide { from { transform: translateX(0) translateY(0); } to { transform: translateX(40px) translateY(-12px); } }
@keyframes cue-width { 50% { width: 70px; opacity: .45; } }
@keyframes ch1-scroll-cue-in { from { opacity: 0; translate: -50% 16px; } to { opacity: 1; translate: -50% 0; } }
@keyframes ch1-scroll-cue-float { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 9px; } }
@keyframes ch1-scroll-cue-line { 0%, 100% { scale: 1 1; opacity: .42; } 50% { scale: 1.14 1; opacity: .78; } }
@keyframes ch1-scroll-cue-text { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes ch1-scroll-arrow { 0%, 100% { translate: 0 0; opacity: .42; } 50% { translate: 0 7px; opacity: .9; } }
@keyframes ch1-story-prompt-in { from { opacity: 0; translate: -50% -12px; } to { opacity: 1; translate: -50% 0; } }
@keyframes bonsai-marker-pulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes bonsai-card-in { from { opacity: 0; translate: 16px -50%; } to { opacity: 1; translate: 0 -50%; } }
@keyframes bonsai-card-in-left { from { opacity: 0; translate: -16px -50%; } to { opacity: 1; translate: 0 -50%; } }
@keyframes bonsai-card-in-mobile { from { opacity: 0; translate: 50% 12px; } to { opacity: 1; translate: 50% 0; } }
@keyframes birds-fly { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@keyframes leaf-fall { 0% { transform: translate3d(0,-8vh,0) rotate(0); opacity: 0; } 12% { opacity: .7; } 100% { transform: translate3d(80px,116vh,0) rotate(520deg); opacity: 0; } }
@keyframes water-ring { from { transform: scale(.2); opacity: .8; } to { transform: scale(4); opacity: 0; } }
@keyframes seal-stamp { 0% { transform: rotate(-5deg) scale(1.7); opacity: 0; } 65% { transform: rotate(-5deg) scale(.92); opacity: .55; } 100% { transform: rotate(-5deg) scale(1); } }
@keyframes ink-ripple { 0% { opacity: .55; transform: scale(.3) rotate(0); } 100% { opacity: 0; transform: scale(5) rotate(18deg); border-radius: 50%; } }

.chapter-nav {
  position: fixed;
  z-index: 20;
  right: max(18px, 3vw);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 1.1s var(--ease-out) .72s, transform 1.1s var(--ease-out) .72s;
}
body.is-loaded .chapter-nav {
  opacity: 1;
  transform: none;
}
.chapter-nav button {
  position: relative;
  display: grid;
  place-items: center;
  width: 65px; height: 65px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(185,214,196,.18);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: .3s var(--ease);
}
.chapter-nav button[data-enter="home"] {
  --nav-title: var(--title-home);
  border-color: color-mix(in srgb, var(--nav-title) 36%, transparent);
  background: color-mix(in srgb, var(--nav-title) 11%, #fafdfb);
  color: color-mix(in srgb, var(--nav-title) 58%, white);
}
.chapter-nav button[data-enter="chapter1"] {
  --nav-title: var(--title-chapter1);
  border-color: color-mix(in srgb, var(--nav-title) 36%, transparent);
  background: color-mix(in srgb, var(--nav-title) 11%, #fafdfb);
  color: color-mix(in srgb, var(--nav-title) 58%, white);
}
.chapter-nav button[data-enter="chapter2"] {
  --nav-title: var(--title-chapter2);
  border-color: color-mix(in srgb, var(--nav-title) 36%, transparent);
  background: color-mix(in srgb, var(--nav-title) 11%, #fafdfb);
  color: color-mix(in srgb, var(--nav-title) 58%, white);
}
.chapter-nav button[data-enter="chapter3"] {
  --nav-title: var(--title-chapter3);
  border-color: color-mix(in srgb, var(--nav-title) 36%, transparent);
  background: color-mix(in srgb, var(--nav-title) 11%, #fafdfb);
  color: color-mix(in srgb, var(--nav-title) 58%, white);
}
.chapter-nav button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: .3s;
}
.chapter-nav span { font-size: 1.1rem; }
.chapter-nav em {
  position: absolute;
  right: 76px;
  padding: .4rem .7rem;
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.86);
  font-size: .72rem;
  font-style: normal;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
.chapter-nav button:hover em,
.chapter-nav button:focus-visible em { opacity: 1; transform: none; }
.chapter-nav button:hover,
.chapter-nav button.is-active {
  color: var(--nav-title);
  border-color: color-mix(in srgb, var(--nav-title) 78%, transparent);
  background: color-mix(in srgb, var(--nav-title) 28%, white);
  box-shadow: 0 0 24px color-mix(in srgb, var(--nav-title) 26%, transparent);
  transform: translateX(-3px);
}
.chapter-nav button.is-active::after {
  border-color: color-mix(in srgb, var(--nav-title) 44%, transparent);
  transform: rotate(5deg);
}

.object-card {
  position: fixed;
  z-index: 40;
  left: 50%; top: 50%;
  width: min(420px, calc(100vw - 40px));
  translate: -50% -50%;
  padding: 32px 36px;
  border: 1px solid rgba(63,158,145,.25);
  border-radius: 18px;
  background: rgba(253,255,251,.92);
  box-shadow: 0 24px 80px rgba(35,83,79,.22);
  backdrop-filter: blur(20px);
  transform-origin: 50% 60%;
  animation: card-in .55s var(--ease-out) both;
}
.object-card strong { display: block; margin-bottom: 12px; font-size: 1.65rem; letter-spacing: .3em; }
.object-card p { margin: 0; color: #56777b; line-height: 1.9; }
.object-card > button { position: absolute; right: 12px; top: 10px; border: 0; background: none; color: #779194; font-size: 1.6rem; cursor: pointer; }
.object-card-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(229,244,237,.2); backdrop-filter: blur(5px); animation: fade-in .35s both; }

.chapter-transition {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 9vw;
  --transition-title: var(--title-home);
  color: var(--transition-title);
  background: color-mix(in srgb, var(--transition-title) 4%, rgba(247,252,248,.96));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease, visibility .32s, color .35s var(--ease), background .35s var(--ease);
}
.chapter-transition[data-theme="chapter1"] { --transition-title: var(--title-chapter1); }
.chapter-transition[data-theme="chapter2"] { --transition-title: var(--title-chapter2); }
.chapter-transition[data-theme="chapter3"] { --transition-title: var(--title-chapter3); }
.chapter-transition.is-visible { opacity: 1; visibility: visible; }
.chapter-transition > i { height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--transition-title) 35%, transparent)); transform: scaleX(0); transition: transform .65s var(--ease-out) .12s, background .35s var(--ease); transform-origin: right; }
.chapter-transition > i:last-child { transform-origin: left; background: linear-gradient(90deg, color-mix(in srgb, var(--transition-title) 35%, transparent), transparent); }
.chapter-transition.is-visible > i { transform: scaleX(1); }
.chapter-transition div { text-align: center; transform: translateY(14px); opacity: 0; transition: .62s var(--ease-out) .08s; }
.chapter-transition.is-visible div { transform: none; opacity: 1; }
.chapter-transition span { display: block; margin-bottom: 8px; font-size: .62rem; letter-spacing: .5em; opacity: .55; }
.chapter-transition strong { font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: .3em; }

/* Layered scene compositions: independent assets instead of full-page screenshots */
.scene-composition {
  overflow: hidden;
  background:
    radial-gradient(circle at 45% 42%, rgba(255,255,255,.96), rgba(244,252,247,.88) 58%, rgba(225,246,238,.72));
}
.scene-composition > img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }

.scene-home__paper { position: absolute; inset: 7vh 5vw; border: 1px solid rgba(74,150,140,.08); border-radius: 30px; background: rgba(255,255,255,.48); box-shadow: inset 0 0 80px rgba(95,180,164,.08); transition: box-shadow 1.2s var(--ease-out); }
body.is-loaded .scene-home__paper { box-shadow: inset 0 0 80px rgba(95,180,164,.08), 0 0 60px rgba(95,180,164,.06); }
.scene-home__mist { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.6s var(--ease-out) .35s; }
body.is-loaded .scene-home__mist { opacity: 1; }
.scene-home__mist i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(42px); animation: home-mist-drift 14s ease-in-out infinite alternate; }
.scene-home__mist i:first-child { left: 18%; top: 42%; width: min(28vw, 380px); height: min(14vw, 180px); }
.scene-home__mist i:last-child { right: 12%; top: 48%; width: min(22vw, 300px); height: min(12vw, 150px); animation-delay: -6s; animation-duration: 18s; }
.scene-home__water { position: absolute; z-index: 3; left: 50%; top: 58%; width: min(52vw, 720px); height: min(18vw, 240px); translate: calc(-50% + var(--home-px, 0) * 8px) calc(-50% + var(--home-py, 0) * 4px); pointer-events: none; opacity: 0; transition: opacity 1.5s var(--ease-out) .55s; }
body.is-loaded .scene-home__water { opacity: .55; }
.scene-home__water i { position: absolute; left: 50%; top: 50%; width: 48px; height: 14px; translate: -50% -50%; border-top: 1px solid rgba(74,168,155,.35); border-radius: 50%; animation: home-water-ring 5s ease-out infinite; }
.scene-home__water i:nth-child(1) { margin-left: -80px; animation-delay: 0s; }
.scene-home__water i:nth-child(2) { margin-left: 20px; animation-delay: -1.6s; }
.scene-home__water i:nth-child(3) { margin-left: 110px; animation-delay: -3.2s; width: 36px; }
.scene-home__window {
  left: 50%; top: 59%; width: min(75vw, 1084px); z-index: 1;
  transform: translate(calc(-50% + var(--home-px, 0) * 14px), calc(-50% + var(--home-py, 0) * 10px)) scale(1.02);
  animation: home-window-in 1.6s var(--ease-out) both, home-breathe 8s ease-in-out 1.6s infinite;
  transition: transform .35s var(--ease-out), filter .5s;
}
.scene-home.is-interactive .scene-home__window { filter: brightness(1.03) saturate(1.04); }
.scene-home__pine {
  right: -1vw; top: -2vh; width: min(44vw, 630px); z-index: 4;
  opacity: .66; filter: blur(.4px); transform-origin: 80% 10%;
  translate: calc(var(--home-px, 0) * -18px) calc(var(--home-py, 0) * -12px);
  animation: pine-sway 9s ease-in-out infinite;
  transition: translate .4s var(--ease-out);
}
.scene-home__title {
  left: clamp(36px, 8.5vw, 128px); top: clamp(78px, 10vh, 112px); width: min(39vw, 566px); z-index: 5;
  opacity: .9;
  translate: calc(var(--home-px, 0) * -6px) calc(var(--home-py, 0) * -4px);
  animation: title-ink 1.7s var(--ease-out) .2s both;
  transition: translate .4s var(--ease-out);
}
.scene-home__subtitle {
  position: absolute; z-index: 6;
  left: clamp(42px, calc(9.2vw - 2px), 136px); top: clamp(310px, 36vh, 380px);
  margin: 0; color: var(--title-home);
  font-family: var(--font-latin-display);
  font-weight: 300;
  font-size: clamp(.72rem, 1.15vw, 1.05rem);
  line-height: 1.6; letter-spacing: .025em;
  translate: calc(var(--home-px, 0) * -4px) calc(var(--home-py, 0) * -3px);
  animation: fade-rise 1s var(--ease-out) .8s both;
  transition: translate .4s var(--ease-out), opacity .4s;
}
.scene-home__subtitle span { padding-left: 1.5em; }
.scene-home__cue {
  position: absolute; z-index: 7;
  left: 50%; bottom: 17vh;
  translate: -50% 0;
  display: flex; align-items: center; gap: 12px;
  color: #4f8a84; font-size: .68rem; letter-spacing: .14em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .95s var(--ease-out) .9s, transform .95s var(--ease-out) .9s;
  pointer-events: none;
}
body.is-loaded .scene-home__cue { opacity: .72; transform: none; animation: hint-float 3s ease-in-out 1.2s infinite; }
.scene-home.is-engaged .scene-home__cue { opacity: 0; transform: translateY(10px); animation: none; }
.scene-home__cue i { display: block; width: 36px; height: 1px; background: #6ea99f; animation: cue-width 2.4s ease-in-out infinite; }
.scene-icons { position: absolute; z-index: 8; display: flex; gap: 12px; }
.scene-icons--home { left: 8.5vw; bottom: 9vh; }
.scene-icons button {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  padding: 0;
  border: 1px solid rgba(54,129,123,.28);
  border-radius: 13px;
  color: #397d78;
  background: rgba(255,255,255,.66);
  box-shadow: 0 8px 24px rgba(50,118,111,.1);
  backdrop-filter: blur(8px);
  cursor: pointer;
  animation: icon-float 4s ease-in-out infinite;
  transition: transform .35s var(--ease-out), background .3s, box-shadow .35s, border-color .3s, color .3s;
}
.scene-icons button:nth-child(2) { animation-delay: -.9s; }
.scene-icons button:nth-child(3) { animation-delay: -1.8s; }
.scene-icons button:hover {
  transform: translateY(-6px) scale(1.06);
  background: rgba(255,255,255,.94);
  border-color: rgba(54,129,123,.48);
  box-shadow: 0 16px 38px rgba(50,118,111,.18);
  animation-play-state: paused;
}
.scene-icons button:active { transform: translateY(-2px) scale(.98); }
.scene-icons button:focus-visible { outline-offset: 3px; }
.scene-icons b { font-weight: 400; font-size: 1.05rem; pointer-events: none; }
.scene-icons small {
  position: absolute; left: 50%; top: 66px; translate: -50% 0;
  width: max-content; font-size: .62rem; letter-spacing: .12em;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s, transform .25s var(--ease-out);
  pointer-events: none;
}
.scene-home__enter {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.scene-home__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(49, 92, 101, .5);
  outline-offset: -1px;
}
.scene-icons button:hover small, .scene-icons button:focus-visible small { opacity: .85; transform: none; }

.chapter-cover__wash { position: absolute; inset: 8vh 7vw; border-radius: 28px; background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(218,244,237,.36)); box-shadow: 0 28px 90px rgba(46,115,108,.08); }
.chapter-cover__heading { position: absolute; z-index: 5; left: 9vw; top: 16vh; width: min(34vw, 480px); color: #355e69; }
.chapter-cover__heading small { display: block; margin-bottom: 12px; font-size: .72rem; letter-spacing: .38em; opacity: .58; }
.chapter-cover__heading h1 { margin: 0 0 20px; font-size: clamp(3rem, 6.8vw, 6.2rem); font-weight: 300; line-height: 1; letter-spacing: .08em; }
.chapter-cover__heading h1,
.scene-home3__title,
.chapter3-cover__heading h1,
.ch3-intro__heading h1,
.scroll-roll__heading h2,
.landscape-transition__title,
.study-panorama__chars,
.reading-together__chars,
.ch3-reading__title,
.ch3-lotus__title {
  font-family: var(--font-title);
  font-weight: 400;
}

.chapter-cover__heading small,
.ch3-intro__kicker,
.ch3-reading__label,
.ch3-lotus__label {
  font-family: var(--font-latin-title);
  font-weight: 400;
}

.study-panorama__tag,
.reading-together__tag,
.reading-together__poem,
.ch3-reading__verse,
.ch3-lotus__verse {
  font-family: var(--font-classical);
}
.chapter-cover__heading p { margin: 0; padding-left: 4px; font-size: clamp(.76rem, 1.2vw, 1rem); line-height: 2; letter-spacing: .12em; opacity: .72; }
.chapter-cover__scene--one { right: 7vw; bottom: 5vh; width: min(76vw, 1085px); animation: scene-slide-left 1.4s var(--ease-out) both, layer-breathe 9s ease-in-out 1.5s infinite; }
.orbit-icons { position: absolute; z-index: 7; display: flex; gap: 11px; }
.orbit-icons--one { left: 9vw; top: 57vh; }
.orbit-icons i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(55,126,123,.26); border-radius: 12px; color: #3d7d79; background: rgba(255,255,255,.72); box-shadow: 0 8px 24px rgba(52,118,112,.08); font-style: normal; animation: icon-float 3.8s ease-in-out infinite; }
.orbit-icons i:nth-child(2) { animation-delay: -.8s; }.orbit-icons i:nth-child(3) { animation-delay: -1.6s; }

.chapter-cover--two { background: linear-gradient(180deg, #fffef3 0%, #f7fff7 55%, #e9f8e8 100%); }
.chapter-cover__sun { position: absolute; left: 12vw; top: 19vh; width: clamp(160px, 23vw, 340px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,235,124,.55); box-shadow: 0 0 80px rgba(250,221,87,.22); animation: sun-pulse 6s ease-in-out infinite; }
.chapter-cover__cloud { position: absolute; z-index: 1; width: 190px; height: 32px; border-radius: 50%; background: rgba(159,218,191,.18); filter: blur(9px); animation: cloud-drift 13s linear infinite; }
.chapter-cover__cloud--a { left: 30vw; top: 25vh; }.chapter-cover__cloud--b { left: 62vw; top: 17vh; animation-delay: -7s; transform: scale(.7); }
.landscape-layer { left: 50%; transform: translateX(-50%); transform-origin: 50% 100%; }
.landscape-layer--back { z-index: 2; bottom: -2vh; width: 101vw; animation: landscape-rise 1.4s var(--ease-out) both, landscape-drift 10s ease-in-out 1.5s infinite; }
.landscape-layer--middle { z-index: 3; right: -2vw; left: auto; bottom: 1vh; width: min(72vw, 1030px); transform: none; animation: scene-slide-left 1.6s var(--ease-out) .15s both; }
.landscape-layer--front { z-index: 4; left: 53%; bottom: -4vh; width: min(84vw, 1220px); opacity: .7; animation: landscape-rise 1.7s var(--ease-out) .25s both; }
.chapter-cover__heading--two { z-index: 6; top: 13vh; }
.orbit-icons--two { z-index: 7; left: 10vw; top: 53vh; }

.scene-home3 { background: #fff; }
.scene-home3__glow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 15.1%;
  pointer-events: none;
}
.scene-home3__glow--top {
  top: 0;
  background: linear-gradient(180deg, rgba(193, 194, 101, 1) 0%, rgba(208, 253, 237, 0) 100%);
  opacity: .53;
}
.scene-home3__glow--bottom {
  bottom: 0;
  background: linear-gradient(180deg, rgba(193, 194, 101, .64) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: .78;
}
.scene-home3__window {
  left: 50%;
  top: 59%;
  width: min(75vw, 1084px);
  transform: translate(-50%, -50%) scale(1.02);
}
.scene-home3__title {
  position: absolute;
  z-index: 4;
  left: clamp(36px, 9.71vw, 140px);
  top: clamp(78px, 8.8vh, 95px);
  margin: 0;
  color: var(--title-chapter3);
  font-size: clamp(2.6rem, 6.64vw, 5.96rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
}
.scene-home3__subtitle { display: none; }
.enter-button--home3 {
  color: #6a7714;
  border-color: rgba(126, 138, 38, .35);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 35px rgba(164, 170, 82, .14);
}
.enter-button--home3:hover {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 45px rgba(164, 170, 82, .22);
}

.reading-together {
  overflow: hidden;
  background: #fff;
}
.reading-together__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #bbc548 0%, #f9f9d1 100%);
  z-index: 0;
}
.reading-together__wash {
  position: absolute;
  left: -6.3%;
  top: -3.8%;
  width: 109%;
  height: 80%;
  background: linear-gradient(-1deg, rgba(255, 255, 255, 0) 5%, rgba(227, 252, 151, .3) 70%, rgba(255, 247, 128, .5) 100%);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}
.reading-together__hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 5.8%;
  translate: -50% 0;
  width: min(90vw, 1200px);
  margin: 0;
  color: #556238;
  font-size: clamp(.85rem, 1.88vw, 1.69rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .12em;
  text-align: center;
  opacity: .61;
  pointer-events: none;
  animation: fade-rise 1s var(--ease-out) .2s both;
}
.reading-together__art {
  position: absolute;
  right: 0;
  top: 5.5%;
  width: min(54.4vw, 784px);
  height: auto;
  max-height: 93%;
  object-fit: contain;
  object-position: right top;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  animation: reading-art-in 1.4s var(--ease-out) both;
}
.reading-together__book {
  position: absolute;
  z-index: 6;
  right: 18%;
  top: 38%;
  width: 22%;
  height: 28%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: box-shadow .35s var(--ease);
}
.reading-together__book::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(240, 255, 204, 0);
  transition: box-shadow .4s var(--ease);
}
.reading-together__book:hover::after,
.reading-together__book:focus-visible::after {
  box-shadow: 0 0 24px 8px rgba(240, 255, 204, .75);
}
.reading-together__title {
  position: absolute;
  z-index: 4;
  left: 7.5%;
  top: 70.6%;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  color: var(--title-chapter3);
  animation: fade-rise 1s var(--ease-out) .35s both;
}
.reading-together__tag {
  writing-mode: vertical-rl;
  font-size: clamp(1rem, 2.5vw, 2.25rem);
  font-weight: 300;
  line-height: .87;
  letter-spacing: .06em;
}
.reading-together__chars {
  display: flex;
  flex-direction: column;
  gap: .15em;
  font-size: clamp(2.6rem, 6.64vw, 5.98rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
}
.reading-together__chars b { font-weight: 400; }
.reading-together__poem {
  position: absolute;
  z-index: 4;
  left: 21.1%;
  top: 71.7%;
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  height: min(17.4vh, 178px);
  color: var(--title-chapter3);
  animation: fade-rise 1s var(--ease-out) .5s both;
}
.reading-together__poem p {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(.72rem, 1.3vw, 1.17rem);
  line-height: 1.05;
  letter-spacing: .14em;
}
.reading-together__explore {
  position: absolute;
  z-index: 7;
  right: 8.8%;
  top: 64.5%;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fade-rise 1s var(--ease-out) .65s both;
}
.reading-together__dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 15px 7px rgba(240, 255, 204, 1);
  animation: reading-dot-pulse 2.4s ease-in-out infinite;
}
.reading-together__explore button {
  min-width: 127px;
  min-height: 37px;
  padding: .35rem .85rem;
  border: 0;
  border-radius: 5px;
  color: #4c5d00;
  background: rgba(255, 255, 255, .85);
  font-size: clamp(.72rem, 1.25vw, 1.13rem);
  line-height: 1.5;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.reading-together__explore button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 8px 28px rgba(118, 132, 44, .15);
}
.reading-together__sheet {
  position: absolute;
  z-index: 9;
  right: 14%;
  top: 22%;
  width: min(34vw, 420px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 12px;
  color: #586a2c;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 70px rgba(118, 132, 44, .16);
  backdrop-filter: blur(12px);
  transform-origin: 70% 60%;
  animation: reading-sheet-in .55s var(--ease-out) both;
}
.reading-together__sheet[hidden] { display: none !important; }
.reading-together__sheet-close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: none;
  color: #7a8a42;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.reading-together__sheet small {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: .38em;
  color: var(--title-chapter3);
}
.reading-together__sheet p {
  margin: 0;
  font-size: clamp(.78rem, 1.2vw, 1rem);
  line-height: 2.1;
  letter-spacing: .08em;
}
.reading-together.is-sheet-open .reading-together__hint { opacity: .35; }

.moon-scene { background: linear-gradient(180deg, #f0f2c1, #fffff4 58%, #dce77e); }
.moon-scene__moon { position: absolute; left: 50%; top: 50%; width: min(68vw, 850px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255,255,239,.9); box-shadow: 0 0 100px rgba(255,246,157,.55); animation: moon-glow 5s ease-in-out infinite; }
.moon-scene__lights { left: 0; right: 0; bottom: 0; width: 100%; animation: light-sway 5s ease-in-out infinite; transform-origin: 50% 0; }
.moon-scene__couple { right: 6vw; bottom: -2vh; height: min(56vh, 560px); animation: couple-walk-in 1.5s var(--ease-out) both; }
.moon-scene__quote { position: absolute; z-index: 5; left: 50%; top: 17vh; translate: -50% 0; margin: 0; color: #777b46; letter-spacing: .16em; }
.moon-map { position: absolute; z-index: 5; left: 42%; top: 47%; translate: -50% -50%; display: grid; grid-template-columns: repeat(3, auto); gap: 24px 16px; align-items: center; text-align: center; color: #6b7833; }
.moon-map strong { grid-column: 1 / -1; justify-self: center; min-width: 150px; padding: 14px 24px; border-radius: 12px; color: #fff; background: #8d9a42; box-shadow: 0 10px 30px rgba(122,139,48,.2); font-weight: 400; letter-spacing: .2em; }
.moon-map span { padding: 12px 16px; border: 1px solid rgba(126,143,49,.32); border-radius: 12px; background: rgba(255,255,255,.6); font-size: .72rem; white-space: nowrap; animation: icon-float 4s ease-in-out infinite; }
.moon-map span:nth-child(3) { animation-delay: -1s; }.moon-map span:nth-child(4) { animation-delay: -2s; }

.chapter-nav img { width: 38px; height: 38px; object-fit: contain; transition: transform .3s var(--ease); }
.chapter-nav button:hover img, .chapter-nav button.is-active img { transform: scale(1.08); }

@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(97,188,175,0), 0 0 32px rgba(38,133,127,.45); } }
@keyframes scene-reveal { from { opacity: .25; transform: translate3d(0, 10px, 0) scale(1.035); filter: blur(5px); } to { opacity: 1; filter: none; } }
@keyframes button-shimmer { 0%, 60% { translate: -120% 0; } 82%, 100% { translate: 120% 0; } }
@keyframes hint-float { 50% { translate: -50% -5px; } }
@keyframes wash-drift { to { transform: translate3d(8vw, -4vh, 0) scale(1.18); } }
@keyframes grain-shift { 0% { transform: translate(0); } 25% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 75% { transform: translate(1%, 1%); } }
@keyframes seal-breathe { 50% { transform: rotate(2deg) scale(1.04); box-shadow: 0 0 35px rgba(63,135,129,.15); } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes home-window-in { from { opacity: 0; transform: translate(calc(-50% + var(--home-px, 0) * 14px), calc(-46% + var(--home-py, 0) * 10px)) scale(.95); } }
@keyframes home-breathe { 0%, 100% { transform: translate(calc(-50% + var(--home-px, 0) * 14px), calc(-50% + var(--home-py, 0) * 10px)) scale(1.02); } 50% { transform: translate(calc(-50% + var(--home-px, 0) * 14px), calc(-50% + var(--home-py, 0) * 10px)) scale(1.035); } }
@keyframes home-mist-drift { to { transform: translate(28px, -12px) scale(1.12); opacity: .85; } }
@keyframes home-water-ring { from { transform: scale(.3); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@keyframes enter-pulse { 0%, 100% { box-shadow: 0 10px 35px rgba(38, 108, 100, .13); } 50% { box-shadow: 0 14px 48px rgba(38, 108, 100, .24), 0 0 0 6px rgba(95, 180, 164, .08); } }
@keyframes title-ink { from { opacity: 0; transform: translateY(-12px); filter: blur(5px); } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes scene-slide-left { from { opacity: 0; transform: translateX(45px); } }
@keyframes landscape-rise { from { opacity: 0; transform: translate(-50%, 45px) scale(.96); } }
@keyframes landscape-drift { 50% { transform: translateX(-50%) scale(1.018); } }
@keyframes reading-art-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes reading-sheet-in { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes reading-dot-pulse { 50% { box-shadow: 0 0 22px 10px rgba(240, 255, 204, 1); transform: scale(1.08); } }
@keyframes chapter3-scene-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes layer-breathe { 0%, 100% { transform: scale(1); } 50% { transform: translateY(-5px) scale(1.012); } }
@keyframes pine-sway { 50% { transform: rotate(1.6deg) translateY(6px); } }
@keyframes icon-float { 50% { transform: translateY(-7px) rotate(1deg); box-shadow: 0 13px 30px rgba(50,118,111,.14); } }
@keyframes sun-pulse { 50% { transform: scale(1.04); box-shadow: 0 0 110px rgba(250,221,87,.32); } }
@keyframes cloud-drift { to { transform: translateX(25vw); } }
@keyframes couple-walk-in { from { opacity: 0; transform: translate(45px, 24px); } }
@keyframes couple-breathe { 50% { transform: translateY(-5px); } }
@keyframes petal-fall { to { transform: translate(-90px, 110vh) rotate(420deg); } }
@keyframes moon-glow { 50% { transform: scale(1.025); box-shadow: 0 0 140px rgba(255,246,157,.7); } }
@keyframes light-sway { 50% { transform: rotate(.5deg) translateY(3px); } }

@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .experience-bar { grid-template-columns: 1fr auto; padding: 0 18px; }
  .experience-bar__brand { font-size: .7rem; }
  .experience-bar__brand i { width: 18px; height: 18px; }
  .experience-bar__chapter { text-align: right; }
  .experience-bar__chapter strong { font-size: .68rem; }
  .experience-bar__progress { display: none; }
  .cursor-aura { display: none; }
  .atmosphere__wash { opacity: .08; }
  .chapter-nav {
    right: auto; top: auto; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
    translate: -50% 0;
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(47,103,98,.13);
  }
  .chapter-nav button { width: 48px; height: 48px; }
  .chapter-nav em { display: none; }
  .chapter-cta, .enter-button { bottom: 74px; font-size: .82rem; padding: .65rem 1.2rem; }
  .chapter-cta, .enter-button { min-width: 154px; min-height: 46px; border-radius: 12px; }
  .scroll-hint { bottom: 72px; }
  .panorama-tools { bottom: 78px; width: 70vw; }
  .chapter-panel--panorama .chapter-cta { right: 18px; bottom: 118px; }
  .chapter-transition { gap: 12px; padding: 0 7vw; }
  .chapter-transition strong { letter-spacing: .16em; }
  .object-card { padding: 28px 26px; }
  .scene-home__paper { inset: 58px 10px 120px; border-radius: 18px; }
  .scene-home__window { top: 53%; width: 132vw; }
  .scene-home__pine { right: -34vw; top: 19vh; width: 100vw; opacity: .48; }
  .scene-home__title { left: 8vw; top: 26vh; width: 64vw; }
  .scene-home__subtitle { left: calc(9.5vw - 2px); top: 39vh; font-size: .54rem; }
  .scene-home__cue { bottom: 26vh; width: 82vw; text-align: center; font-size: .58rem; letter-spacing: .1em; }
  .scene-home__cue span { line-height: 1.7; }
  .scene-home__cue i { display: none; }
  .scene-home__water { opacity: .35; }
  .scene-icons--home {
    display: flex;
    left: 50%; bottom: 128px;
    translate: -50% 0;
    gap: 8px;
  }
  .scene-icons button { width: 48px; height: 48px; border-radius: 11px; }
  .scene-icons b { font-size: .92rem; }
  .scene-icons small { display: none; }
  .chapter-cover__wash { inset: 64px 10px 118px; border-radius: 18px; }
  .chapter-cover__heading { left: 8vw; top: 12vh; width: 76vw; }
  .chapter-cover__heading h1 { margin-bottom: 12px; font-size: 3.25rem; }
  .chapter-cover__heading p { font-size: .68rem; line-height: 1.8; }
  .chapter-cover__scene--one { right: -54vw; bottom: 15vh; width: 152vw; opacity: .86; }
  .orbit-icons { gap: 8px; }
  .orbit-icons--one, .orbit-icons--two, .orbit-icons--three { left: 8vw; top: 36vh; }
  .orbit-icons i { width: 40px; height: 40px; border-radius: 10px; font-size: .78rem; }
  .chapter-cover__sun { left: 5vw; top: 18vh; width: 50vw; }
  .landscape-layer--back { width: 185vw; left: 70%; bottom: 14vh; }
  .landscape-layer--middle { width: 155vw; right: -69vw; bottom: 15vh; opacity: .72; }
  .landscape-layer--front { width: 170vw; left: 76%; bottom: 10vh; }
  .chapter-cover__heading--two { z-index: 7; }
  .scene-home3__glow { height: 12%; }
  .scene-home3__title { left: 8vw; top: 12vh; font-size: 2.5rem; }
  .reading-together__art { right: -8%; top: auto; bottom: 10vh; width: 108vw; max-height: none; }
  .reading-together__hint { top: 8vh; width: 86vw; font-size: .72rem; line-height: 1.7; }
  .reading-together__title { left: 6vw; top: auto; bottom: 22vh; gap: 10px; }
  .reading-together__tag { font-size: .82rem; }
  .reading-together__chars { font-size: 2.2rem; }
  .reading-together__poem { left: 22vw; top: auto; bottom: 22vh; height: 120px; gap: 8px; }
  .reading-together__poem p { font-size: .62rem; }
  .reading-together__book { right: 28%; top: 42%; width: 36%; height: 22%; }
  .reading-together__explore { right: 6vw; top: auto; bottom: 34vh; }
  .reading-together__sheet { right: 6vw; left: 6vw; top: 14vh; width: auto; }
  .moon-scene__moon { width: 130vw; }
  .moon-scene__lights { bottom: 12vh; width: 180%; left: -40%; }
  .moon-scene__couple { right: -6vw; bottom: 11vh; height: 34vh; opacity: .72; }
  .moon-scene__quote { top: 13vh; width: 80vw; text-align: center; font-size: .7rem; }
  .moon-map { left: 50%; top: 43%; grid-template-columns: 1fr; gap: 8px; }
  .moon-map strong { min-width: 130px; padding: 10px 18px; }
  .moon-map span { padding: 8px 12px; font-size: .62rem; }
  .chapter-nav img { width: 28px; height: 28px; }
  .scroll-roll { width: max(520vw, 2400px); }
  .landscape-scroll__track { width: max-content; }
  .landscape-scroll__hint { top: 12px; width: max-content; max-width: 88vw; text-align: center; }
  .landscape-transition__nav { width: 44px; height: 44px; }
  .landscape-transition__nav svg { width: 28px; height: 28px; }
  .landscape-transition__title { top: 10vh; font-size: 2.2rem; }
  .landscape-transition__quote {
    right: 18px;
    bottom: 120px;
    max-width: 72vw;
    font-size: .76rem;
    text-align: left;
  }
  .scroll-roll__heading { left: 6vw; top: 10vh; }
  .scroll-roll__heading h2 { font-size: 2.6rem; }
  .scroll-roll__heading p { width: 72vw; font-size: .7rem; line-height: 1.8; }
  .scroll-roll__layer--base { left: -8%; width: 68%; min-width: 0; }
  .scroll-roll__layer--canglang { left: 24%; width: 62%; min-width: 0; }
  .scroll-roll__layer--mountain { left: 52%; width: 58%; min-width: 0; }
  .scroll-roll__layer--pavilion { left: 74%; width: 48%; min-width: 0; }
  .scroll-ornament--sun { left: 6%; top: 18%; width: 42vw; }
  .scroll-ornament--cloud-a { left: 18%; }
  .scroll-ornament--cloud-b { left: 44%; }
  .scroll-ornament--cloud-c { left: 68%; }
  .scroll-ornament--poem { display: none; }
  .scroll-pin { min-width: 0; width: 132px; min-height: 48px; }
  .drag-cue--scroll { left: 50%; bottom: 18vh; }
  .chapter1-story__hotspot { width: clamp(72px, 18vw, 100px); min-height: 116px; }
  .chapter1-story__hotspot--courtyard { width: clamp(100px, 28vw, 150px); min-height: 160px; }
  .chapter1-story__scroll-cue-line { font-size: .86rem; letter-spacing: .18em; }
  .chapter1-story__scroll-cue-line i { width: 40px; }
  .chapter1-story__prompt { font-size: .96rem; letter-spacing: .12em; }
  .courtyard-scene__quote { top: 5vh; font-size: .88rem; line-height: 1.7; letter-spacing: .06em; width: 88vw; }
  .chapter1-bonsai__hint { font-size: .82rem; letter-spacing: .1em; white-space: normal; text-align: center; width: 88vw; }
  .chapter1-bonsai-prune__title { font-size: clamp(.92rem, 4.2vw, 1.12rem); }
  .chapter1-bonsai-prune__subtitle { font-size: clamp(.8rem, 3.4vw, .92rem); }
  .chapter1-bonsai-prune__branch-hint { left: 53%; top: 42%; font-size: .72rem; white-space: normal; width: 34vw; }
  .chapter1-bonsai-prune__verse { right: clamp(48px, 14vw, 88px); top: auto; bottom: 24%; translate: 0 0; font-size: clamp(.86rem, 3.6vw, .98rem); line-height: 1.85; }
  .chapter1-bonsai__card {
    right: 50%;
    left: auto;
    top: auto;
    bottom: 16px;
    translate: 50% 0;
    animation: bonsai-card-in-mobile .55s var(--ease-out) both;
  }
  .chapter1-bonsai__card--bonsai {
    width: min(92vw, 380px, calc(58vh * 846 / 966));
  }
  .chapter1-bonsai__card--insect {
    width: min(92vw, 380px, calc(52vh * 784 / 634));
  }
  .chapter1-bonsai__card-body { inset: 8% 7% 10% 18%; }
  .chapter1-bonsai__card--insect .chapter1-bonsai__card-body { inset: 8% 6% 10% 28%; }
  .chapter1-bonsai__card--bonsai .chapter1-bonsai__card-body { inset: 8% 5% 9% 26%; }
  .chapter1-bonsai__card--bonsai .chapter1-bonsai__card-copy { font-size: clamp(.8rem, 3.5vw, .92rem); }
  .chapter1-bonsai__card--insect .chapter1-bonsai__card-copy {
    font-size: clamp(.88rem, 3.9vw, 1rem);
    letter-spacing: .07em;
  }
  .chapter1-bonsai__card--bonsai .chapter1-bonsai__card-more { font-size: clamp(.84rem, 3.8vw, .94rem); margin-right: clamp(28px, 10%, 44px); }
  .study-panorama__hint { top: 8vh; font-size: .72rem; white-space: normal; width: 88vw; }
  .study-panorama__heading { left: 6vw; top: 5vh; }
  .study-panorama__chars { font-size: 2.4rem; }
  .study-panorama__progress { left: 6vw; bottom: 18vh; }
  .study-panorama__art { min-width: 0; }
  .panel-back { left: 18px; bottom: 128px; min-width: 112px; min-height: 40px; font-size: .7rem; }
  .study-progress { left: 7vw; top: 10vh; width: 70vw; padding: 16px 18px; }
  .object-points button:nth-child(1) { top: 50% !important; }
  .object-points button:nth-child(2) { top: 53% !important; }
  .object-points button:nth-child(3) { top: 52% !important; }
  .object-points button:nth-child(4) { top: 47% !important; }
  .study-complete { bottom: 19vh; min-width: 82vw; }
  .lattice-corner, .poem-ribbon, .chapter-seal, .water-rings { display: none; }
  .edge-line--left, .edge-line--right, .edge-knot--left, .edge-knot--right, .edge-water { display: none; }
  .edge-line--top, .edge-line--bottom { left: 56px; right: 56px; opacity: .22; }
  .edge-knot--top { left: 18%; opacity: .35; }
  .leaf-field { opacity: .45; }
  .leaf-field i:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  [data-fade-col].is-visible { opacity: 1; transform: none; filter: none; text-shadow: none; }
  .ch3-fair__verse { filter: none; transform: none; opacity: 1; text-shadow: none; }
  .ch3-fair__verse-group { filter: none; translate: -50% 0; }
  .landscape-scroll__art { transform: none; filter: none; opacity: 1; }
  .landscape-scroll__mist,
  .landscape-scroll__veil { animation: none !important; opacity: .2; }
}

/* Figma homepage set: HERO / 首页1 / 首页2 / 首页3 share one 1442 × 1079 composition. */
.chapter-cover--one,
.chapter-cover--two,
.scene-home3 {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(138, 207, 198, .42), rgba(255, 255, 255, 0) 15.1%),
    linear-gradient(0deg, rgba(138, 207, 198, .3), rgba(255, 255, 255, 0) 15.1%),
    #fff;
}

.scene-home3 {
  background:
    linear-gradient(180deg, rgba(193, 194, 101, .53), rgba(255, 255, 255, 0) 15.1%),
    linear-gradient(0deg, rgba(193, 194, 101, .42), rgba(255, 255, 255, 0) 15.1%),
    #fff;
}

.chapter-cover--one > :not(.chapter-cover__heading):not(.chapter-cta),
.chapter-cover--two > :not(.chapter-cover__heading):not(.chapter-cta),
.scene-home3 > .scene-home3__glow,
.scene-home3 > .scene-home3__window {
  display: none;
}

.chapter-cover--one::before,
.chapter-cover--two::before,
.scene-home3::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 59%;
  width: min(75vw, 1084px);
  aspect-ratio: 2242 / 1533;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%) scale(1.02);
  pointer-events: none;
}

.chapter-cover--one::before { background-image: url("https://636c-cloud1-9gcm2gs07e8985a4-1326496216.tcb.qcloud.la/202606/fsrm/assets/layers/chapter-1/chapter1-cover-full.png"); }
.chapter-cover--two::before { background-image: url("https://636c-cloud1-9gcm2gs07e8985a4-1326496216.tcb.qcloud.la/202606/fsrm/assets/layers/chapter-2/chapter2-cover-full.png"); }
.scene-home3::before { background-image: url("https://636c-cloud1-9gcm2gs07e8985a4-1326496216.tcb.qcloud.la/202606/fsrm/assets/layers/home3-mask-group.png"); }

.chapter-cover--one .chapter-cover__heading,
.chapter-cover--two .chapter-cover__heading {
  left: clamp(36px, 9.71vw, 140px);
  top: clamp(78px, 8.8vh, 95px);
  width: auto;
  color: var(--title-chapter1);
}

.chapter-cover--two .chapter-cover__heading { color: var(--title-chapter2); }

.chapter-cover--one .chapter-cover__heading h1,
.chapter-cover--two .chapter-cover__heading h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6.64vw, 5.96rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
}

.chapter-cover--one .chapter-cover__heading small,
.chapter-cover--two .chapter-cover__heading small {
  display: none;
}
.chapter-cover--one .chapter-cover__heading p,
.chapter-cover--two .chapter-cover__heading p { display: none; }

.chapter-cover--one .chapter-cta,
.chapter-cover--two .chapter-cta,
.scene-home3 .enter-button--home3 {
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  translate: none;
  opacity: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  .chapter-cover--one::before,
  .chapter-cover--two::before,
  .scene-home3::before {
    top: 53%;
    width: 132vw;
  }

  .chapter-cover--one .chapter-cover__heading,
  .chapter-cover--two .chapter-cover__heading {
    left: 8vw;
    top: 12vh;
  }

  .chapter-cover--one .chapter-cover__heading h1,
  .chapter-cover--two .chapter-cover__heading h1 { font-size: 2.5rem; }

  .chapter-cover--one .chapter-cover__heading small,
  .chapter-cover--two .chapter-cover__heading small { top: 9vh; }

  .chapter-cover--one .chapter-cover__heading small::after,
  .chapter-cover--two .chapter-cover__heading small::after { font-size: .92rem; }
}

/* Opening motion and restrained ornamentation for the four homepage states. */
.scene-home__window,
.chapter-cover--one::before,
.chapter-cover--two::before,
.scene-home3::before {
  animation:
    homepage-scene-reveal 1.45s var(--ease-out) both,
    home-breathe 9s ease-in-out 1.45s infinite;
}

.scene-home__title,
.chapter-cover--one .chapter-cover__heading h1,
.chapter-cover--two .chapter-cover__heading h1,
.scene-home3__title {
  transform-origin: left center;
  animation: homepage-title-reveal 1.05s var(--ease-out) .18s both;
}

.chapter-cover--one .chapter-cover__heading small,
.chapter-cover--two .chapter-cover__heading small {
  display: none;
}

.chapter-cover--one .chapter-cover__heading::before,
.chapter-cover--two .chapter-cover__heading::before,
.scene-home3__title::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -18px;
  width: 58px;
  height: 1px;
  background: currentColor;
  opacity: .42;
  transform-origin: left;
  animation: title-rule-draw .9s var(--ease-out) .58s both;
}

.chapter-cover--one .chapter-cover__heading::after,
.chapter-cover--two .chapter-cover__heading::after,
.scene-home3__title::after {
  content: "";
  position: absolute;
  left: 70px;
  top: -22px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  opacity: .36;
  transform: rotate(45deg);
  animation: title-mark-in .7s var(--ease-out) .95s both;
}

.scene-home::before,
.chapter-cover--one::after,
.chapter-cover--two::after,
.scene-home3::after {
  content: "";
  position: absolute;
  inset: 6% 7%;
  z-index: 3;
  background:
    radial-gradient(circle at 8% 68%, rgba(58, 141, 132, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 17%, rgba(82, 158, 144, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 12%, rgba(105, 171, 155, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 57%, rgba(129, 166, 91, .22) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .24), transparent 48%);
  opacity: 0;
  pointer-events: none;
  animation: homepage-ornaments-in 1.2s ease 1s forwards, homepage-ornaments-drift 11s ease-in-out 2.2s infinite alternate;
}

.scene-home3::after {
  background:
    radial-gradient(circle at 9% 68%, rgba(129, 143, 37, .28) 0 2px, transparent 3px),
    radial-gradient(circle at 27% 15%, rgba(171, 177, 74, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 12%, rgba(175, 178, 79, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 58%, rgba(125, 140, 43, .2) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .22), transparent 48%);
}

.scene-home__subtitle { animation: chapter-label-reveal .9s var(--ease-out) .68s both; }
.scene-icons--home { animation: homepage-tools-in .9s var(--ease-out) 1s both; }

.chapter-cover--one .chapter-cta:focus-visible,
.chapter-cover--two .chapter-cta:focus-visible,
.scene-home3 .enter-button--home3:focus-visible {
  opacity: 1;
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(64, 137, 129, .5);
  outline-offset: -1px;
}

@keyframes homepage-scene-reveal {
  0% {
    opacity: 0;
    clip-path: inset(44% 10% 42% 10% round 52px);
    filter: blur(9px) saturate(.82);
    transform: translate(-50%, -46%) scale(.965);
  }
  58% { opacity: 1; filter: blur(1px) saturate(.94); }
  100% {
    opacity: 1;
    clip-path: inset(0 round 0);
    filter: none;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes homepage-title-reveal {
  0% { opacity: 0; filter: blur(7px); transform: translateY(-18px) scaleX(.96); }
  65% { opacity: .72; filter: blur(1px); }
  100% { opacity: 1; filter: none; transform: none; }
}

@keyframes chapter-label-reveal {
  from { opacity: 0; letter-spacing: .22em; transform: translateY(10px); }
  to { opacity: .76; letter-spacing: .08em; transform: none; }
}

@keyframes title-rule-draw { from { opacity: 0; transform: scaleX(0); } }
@keyframes title-mark-in { from { opacity: 0; transform: translateX(-12px) rotate(0) scale(.5); } }
@keyframes homepage-ornaments-in { to { opacity: .72; } }
@keyframes homepage-ornaments-drift { to { transform: translate3d(7px, -6px, 0) scale(1.012); opacity: .48; } }
@keyframes homepage-tools-in { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 760px) {
  .chapter-cover--one .chapter-cover__heading small,
  .chapter-cover--two .chapter-cover__heading small {
    display: none;
  }
}

/* Chapter 03 cover — shared HERO composition with chapters 1 & 2 */
.chapter3-cover {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(193, 194, 101, .53), rgba(255, 255, 255, 0) 15.1%),
    linear-gradient(0deg, rgba(193, 194, 101, .42), rgba(255, 255, 255, 0) 15.1%),
    #fff;
}

.chapter3-cover > :not(.chapter3-cover__heading):not(.chapter3-cover__enter) { display: none; }

.chapter3-cover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 59%;
  width: min(75vw, 1084px);
  aspect-ratio: 2242 / 1533;
  z-index: 2;
  background: url("https://636c-cloud1-9gcm2gs07e8985a4-1326496216.tcb.qcloud.la/202606/fsrm/assets/layers/chapter-3/chapter3-cover-full.png") center / contain no-repeat;
  pointer-events: none;
  animation:
    homepage-scene-reveal 1.45s var(--ease-out) both,
    home-breathe 9s ease-in-out 1.45s infinite;
}

.chapter3-cover::after {
  content: "";
  position: absolute;
  inset: 6% 7%;
  z-index: 3;
  background:
    radial-gradient(circle at 9% 68%, rgba(129, 143, 37, .28) 0 2px, transparent 3px),
    radial-gradient(circle at 27% 15%, rgba(171, 177, 74, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 12%, rgba(175, 178, 79, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 58%, rgba(125, 140, 43, .2) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .22), transparent 48%);
  opacity: 0;
  pointer-events: none;
  animation: homepage-ornaments-in 1.2s ease 1s forwards, homepage-ornaments-drift 11s ease-in-out 2.2s infinite alternate;
}

.chapter3-cover__heading {
  position: absolute;
  z-index: 5;
  left: clamp(36px, 9.71vw, 140px);
  top: clamp(78px, 8.8vh, 95px);
  color: var(--title-chapter3);
}

.chapter3-cover__heading h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6.64vw, 5.96rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
  transform-origin: left center;
  animation: homepage-title-reveal 1.05s var(--ease-out) .18s both;
}

.chapter3-cover__heading p { display: none; }

.chapter3-cover__heading::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -18px;
  width: 58px;
  height: 1px;
  background: currentColor;
  opacity: .42;
  transform-origin: left;
  animation: title-rule-draw .9s var(--ease-out) .58s both;
}

.chapter3-cover__heading::after {
  content: "";
  position: absolute;
  left: 70px;
  top: -22px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  opacity: .36;
  transform: rotate(45deg);
  animation: title-mark-in .7s var(--ease-out) .95s both;
}

.chapter3-cover__enter {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.chapter3-cover__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(126, 138, 38, .52);
  outline-offset: -1px;
}

@media (max-width: 760px) {
  .chapter3-cover::before { top: 53%; width: 132vw; }
  .chapter3-cover__heading { left: 8vw; top: 12vh; }
  .chapter3-cover__heading h1 { font-size: 2.5rem; }
}

/* Chapter 03 intro — fullscreen secondary page */
.chapter-panel.ch3-intro {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
}

.ch3-intro__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: none;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}

.ch3-intro__kicker {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(24px, 3.4vh, 38px);
  translate: -50% 0;
  margin: 0;
  color: var(--title-chapter3);
  font-size: clamp(.82rem, 1.45vw, 1.28rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: chapter-label-reveal .9s var(--ease-out) .5s both;
}

.ch3-intro__heading {
  position: absolute;
  z-index: 5;
  left: clamp(52%, 56vw, 58%);
  top: clamp(34%, 38vh, 42%);
  color: var(--title-chapter3);
}

.ch3-intro__heading h1 {
  margin: 0;
  font-size: clamp(2.8rem, 6.2vw, 5.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
  transform-origin: left center;
  animation: homepage-title-reveal 1.05s var(--ease-out) .18s both;
}

.ch3-intro__heading p {
  margin: .85em 0 0;
  padding-left: 38%;
  font-size: clamp(.72rem, 1.2vw, 1.05rem);
  letter-spacing: .06em;
  opacity: .88;
  animation: fade-rise 1s var(--ease-out) .65s both;
}

@keyframes ch3-cover-scene-in {
  from { opacity: 0; transform: scale(1.02); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 760px) {
  .ch3-intro__kicker {
    top: 20px;
    font-size: .74rem;
    letter-spacing: .26em;
  }
  .ch3-intro__heading {
    left: 8vw;
    top: 12vh;
    width: 84vw;
  }
  .ch3-intro__heading h1 { font-size: 2.5rem; }
  .ch3-intro__heading p { padding-left: 0; font-size: .88rem; margin-top: .6em; }
}

/* Chapter 03 reading — fullscreen with vertical typewriter copy */
.chapter-panel.ch3-reading {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
}

.ch3-reading__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: none;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}

.ch3-reading__hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(24px, 3.4vh, 38px);
  translate: -50% 0;
  margin: 0;
  color: var(--title-chapter3);
  font-size: clamp(.92rem, 1.55vw, 1.32rem);
  letter-spacing: .18em;
  white-space: nowrap;
  pointer-events: none;
}

.ch3-reading__hint [data-fade-col] {
  display: inline-block;
  min-height: 1em;
}

.ch3-reading__copy {
  position: absolute;
  z-index: 5;
  left: clamp(5%, 8.5vw, 10%);
  top: clamp(58%, 62vh, 68%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(10px, 1.35vw, 18px);
  color: var(--title-chapter3);
  pointer-events: none;
}

.ch3-reading__title {
  order: 2;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  flex-shrink: 0;
}

.ch3-reading__label {
  order: 1;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-latin-title);
  font-size: clamp(1.28rem, 2.35vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .92;
  flex-shrink: 0;
}

.ch3-reading__verse {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(.76rem, 1.08vw, 1rem);
  letter-spacing: .12em;
  line-height: 1.9;
  opacity: .88;
  flex-shrink: 0;
}

.ch3-reading__copy > .ch3-reading__verse:nth-child(3) { order: 6; }
.ch3-reading__copy > .ch3-reading__verse:nth-child(4) { order: 5; }
.ch3-reading__copy > .ch3-reading__verse:nth-child(5) { order: 4; }
.ch3-reading__copy > .ch3-reading__verse:nth-child(6) { order: 3; }

/* Chapter 03 lotus — fullscreen with vertical copy */
.chapter-panel.ch3-lotus {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
}

.ch3-lotus__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: none;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}

.ch3-lotus__hint {
  position: absolute;
  z-index: 9;
  right: clamp(4%, 6.5vw, 8%);
  top: clamp(40%, 44vh, 50%);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--title-chapter3);
  font-size: clamp(1.02rem, 1.75vw, 1.48rem);
  letter-spacing: .18em;
  line-height: 1.65;
  white-space: nowrap;
  text-align: right;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  animation: chapter-label-reveal .9s var(--ease-out) .35s both;
}

.ch3-lotus__hint:hover {
  opacity: .88;
}

.ch3-lotus__copy {
  position: absolute;
  z-index: 5;
  left: clamp(5%, 8.5vw, 10%);
  top: clamp(8%, 10vh, 14%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(10px, 1.35vw, 18px);
  color: var(--title-chapter3);
  pointer-events: none;
}

.ch3-lotus__verse {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(.92rem, 1.35vw, 1.22rem);
  letter-spacing: .12em;
  line-height: 1.9;
  opacity: .88;
  flex-shrink: 0;
}

.ch3-lotus__copy > .ch3-lotus__verse:nth-child(1) { order: 4; }
.ch3-lotus__copy > .ch3-lotus__verse:nth-child(2) { order: 3; }
.ch3-lotus__copy > .ch3-lotus__verse:nth-child(3) { order: 2; }
.ch3-lotus__copy > .ch3-lotus__verse:nth-child(4) { order: 1; }

.ch3-lotus__heading {
  position: absolute;
  z-index: 5;
  right: clamp(1.5%, 3.5vw, 5%);
  top: clamp(2%, 4vh, 8%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(10px, 1.35vw, 18px);
  color: var(--title-chapter3);
  pointer-events: none;
}

.ch3-lotus__title {
  order: 1;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  flex-shrink: 0;
}

.ch3-lotus__label {
  order: 2;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(1.28rem, 2.35vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .92;
  flex-shrink: 0;
}

/* Chapter 03 moon — fullscreen scene */
.chapter-panel.ch3-moon {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
}

.ch3-moon__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: none;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}

[data-typewriter-col],
[data-fade-col] {
  display: inline-block;
  min-height: 1em;
}

[data-fade-col] {
  opacity: 0;
}

[data-fade-col].is-visible {
  animation: ch3-fade-reveal .95s var(--ease-out) both;
}

@keyframes ch3-fade-reveal {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); text-shadow: 0 0 0 rgba(255, 210, 96, 0); }
  to { opacity: 1; transform: none; filter: none; text-shadow: 0 0 14px rgba(255, 210, 96, .22); }
}

[data-typewriter-col].is-typing::after {
  content: "│";
  margin-inline-start: .08em;
  opacity: .55;
  animation: ch3-typewriter-caret .8s step-end infinite;
}

@keyframes ch3-typewriter-caret {
  50% { opacity: 0; }
}

@media (max-width: 760px) {
  .ch3-reading__hint {
    top: 18px;
    font-size: .82rem;
    letter-spacing: .14em;
    white-space: normal;
    text-align: center;
    width: 88vw;
  }
  .ch3-reading__copy {
    left: 6vw;
    top: 38vh;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 88vw;
  }
  .ch3-reading__title { font-size: 2.2rem; }
  .ch3-reading__label { font-size: 1.12rem; letter-spacing: .16em; }
  .ch3-reading__verse { font-size: .68rem; }
  .ch3-reading .ch3-hotspot--book {
    left: 68%;
    top: 66%;
    width: min(40vw, 280px);
    height: min(32vh, 220px);
    min-width: 160px;
    min-height: 140px;
  }
  .ch3-lotus__hint {
    right: 3vw;
    top: 42vh;
    font-size: .92rem;
    letter-spacing: .14em;
    white-space: nowrap;
    text-align: right;
    max-width: 88vw;
  }
  .ch3-lotus__copy {
    left: 6vw;
    top: 10vh;
    gap: 8px;
    max-width: 88vw;
  }
  .ch3-lotus__heading {
    right: 3vw;
    top: 5vh;
    gap: 8px;
  }
  .ch3-lotus__title { font-size: 2.2rem; }
  .ch3-lotus__label { font-size: 1.12rem; letter-spacing: .16em; }
  .ch3-lotus__verse { font-size: .82rem; }
  .ch3-lotus .ch3-hotspot--lotus {
    left: 20%;
    top: 40%;
    width: min(34vw, 220px);
    height: min(26vh, 170px);
    min-width: 130px;
    min-height: 110px;
  }
}

/* Chapter 03 — exact Figma narrative sequence. */
.ch3-screen, .ch3-fair { overflow: hidden; background: #fbfce8; }
.ch3-screen__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; pointer-events: none; user-select: none; animation: ch3-art-in 1.05s var(--ease-out) both; }
.ch3-intro__enter {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ch3-intro__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(126, 138, 38, .52);
  outline-offset: -1px;
}
body:has(.chapter-shell[data-chapter="chapter3"]:not([data-step="cover"])) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter3"]:not([data-step="cover"])) .theme-ornaments { opacity: 0; visibility: hidden; pointer-events: none; }
body:has(.chapter-shell[data-chapter="chapter1"][data-step="story"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="story"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="story"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="courtyard"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="courtyard"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="courtyard"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai-prune"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai-prune"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai-prune"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="room"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="room"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="room"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="dataviz"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="dataviz"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="dataviz"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-vase"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-vase"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-vase"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-bonsai"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-bonsai"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-bonsai"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-incense"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-incense"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-incense"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-brush"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-brush"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-brush"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-arrange"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-arrange"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-arrange"]) .atmosphere,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-settle"]) .experience-bar,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-settle"]) .theme-ornaments,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-settle"]) .atmosphere { opacity: 0; visibility: hidden; pointer-events: none; }
body:has(.chapter-shell[data-chapter="chapter1"][data-step="story"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="courtyard"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="bonsai-prune"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="room"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="dataviz"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-vase"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-bonsai"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-incense"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="detail-brush"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-arrange"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter1"][data-step="study-settle"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter2"][data-step="panorama"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="intro"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="reading"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="lotus"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="moon"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="fair"]) .chapter-nav,
body:has(.chapter-shell[data-chapter="chapter3"][data-step="end"]) .chapter-nav { opacity: 0; visibility: hidden; pointer-events: none; }

.ch3-next { position: absolute; z-index: 8; right: clamp(22px, 3.2vw, 48px); bottom: clamp(22px, 3.4vh, 38px); display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 7px 9px 7px 17px; border: 1px solid rgba(103,122,20,.24); border-radius: 999px; color: #657315; background: rgba(255,255,245,.76); box-shadow: 0 10px 30px rgba(110,127,28,.12); backdrop-filter: blur(10px); cursor: pointer; opacity: .72; transition: opacity .3s, transform .35s var(--ease-out), box-shadow .3s; animation: ch3-control-in .7s var(--ease-out) 1s both; }
.ch3-next span { font-size: .76rem; letter-spacing: .12em; }
.ch3-next i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #a8bb49; font-style: normal; }
.ch3-next:hover { opacity: 1; transform: translateX(4px); box-shadow: 0 14px 36px rgba(110,127,28,.2); }

.ch3-reading .ch3-hotspot--book {
  z-index: 9;
  left: 72%;
  top: 70%;
  translate: -50% -50%;
  width: min(34vw, 380px);
  height: min(30vh, 320px);
  min-width: 200px;
  min-height: 170px;
}

.ch3-reading__enter,
.ch3-lotus__enter,
.ch3-moon__enter {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ch3-reading__enter:focus-visible,
.ch3-lotus__enter:focus-visible,
.ch3-moon__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(126, 138, 38, .52);
  outline-offset: -1px;
}

.ch3-lotus .ch3-hotspot--lotus {
  z-index: 9;
  left: 22%;
  top: 42%;
  translate: -50% -50%;
  width: min(24vw, 280px);
  height: min(20vh, 220px);
  min-width: 140px;
  min-height: 120px;
}

.ch3-hotspot { position: absolute; z-index: 7; width: 150px; height: 92px; padding: 0; border: 0; color: #586514; background: transparent; cursor: pointer; }
.ch3-hotspot i { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 0 0 0 rgba(219,235,104,.7), 0 0 24px 9px rgba(239,248,166,.95); transform: translate(-50%,-50%); animation: ch3-hotspot-pulse 2.2s ease-in-out infinite; }
.ch3-hotspot span { position: absolute; left: 50%; top: -5px; translate: -50% 0; width: max-content; padding: 5px 11px; border-radius: 5px; background: rgba(255,255,255,.82); font-size: .72rem; letter-spacing: .08em; opacity: 0; transform: translateY(6px); transition: .3s var(--ease-out); }
.ch3-hotspot:hover span, .ch3-hotspot:focus-visible span { opacity: 1; transform: none; }
.ch3-hotspot--book { left: 70.5%; top: 75%; width: 9%; height: 11%; }
.ch3-hotspot--lotus { left: 23%; top: 45%; width: 12%; height: 14%; }
.ch3-hotspot--moon { left: 27%; top: 10%; width: 46%; height: 63%; }
.ch3-moon .ch3-hotspot--moon {
  z-index: 9;
  left: 27%;
  top: 10%;
  translate: none;
  width: 46%;
  height: 63%;
}
.ch3-hotspot--book i, .ch3-hotspot--book span,
.ch3-hotspot--lotus i, .ch3-hotspot--lotus span { opacity: 0; }
.ch3-reading .ch3-hotspot--book i {
  opacity: 0;
  pointer-events: none;
}
.ch3-hotspot--moon span { display: none; }
.ch3-hotspot--moon i { opacity: 0; }
.ch3-reading:not(.is-explored) .ch3-next,
.ch3-lotus:not(.is-explored) .ch3-next,
.ch3-moon:not(.is-explored) .ch3-next { opacity: 0; pointer-events: none; }

.ch3-card { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(12px,2vw,28px); background: rgba(244,248,212,.72); backdrop-filter: blur(12px); animation: ch3-card-backdrop-in .32s ease both; cursor: pointer; }
.ch3-card[hidden], .ch3-confirm[hidden], .ch2-confirm[hidden], .ch1-confirm[hidden] { display: none !important; }
.ch3-card:not(.ch3-card--fullscreen) .ch3-card__media { display: contents; }
.ch3-card img { display: block; width: min(94vw, calc(94vh * 1.40625)); max-height: 94vh; border-radius: 4px; box-shadow: 0 26px 80px rgba(80,94,23,.22); animation: ch3-card-in .55s var(--ease-out) both; }
.ch3-card--fullscreen { display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; backdrop-filter: none; animation: none; }
.ch3-card--fullscreen .ch3-card__media {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 2880 / 2048;
  width: min(100vw, calc(100dvh * 2880 / 2048));
  max-height: 100dvh;
}
.ch3-card--fullscreen img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  object-position: center center;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}
.ch3-card--fullscreen-cover .ch3-card__media {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  container-type: inline-size;
}
.ch3-card--fullscreen-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ch3-card--fullscreen .ch3-card__close { display: none; }
.ch3-card__copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.ch3-card__quote {
  position: absolute;
  left: 50%;
  top: 2.6%;
  translate: -50% 0;
  margin: 0;
  color: #6d7f22;
  font-size: clamp(10px, 1.05cqw, 26px);
  font-weight: 400;
  letter-spacing: .16em;
  white-space: nowrap;
}
.ch3-card__copy [data-typewriter-col],
.ch3-card__copy [data-fade-col] {
  display: inline-block;
  min-height: 1em;
}
.ch3-moon-card__quote {
  top: 13.5%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  letter-spacing: .14em;
  font-size: clamp(12px, 1.28cqw, 32px);
}
.ch3-tea-card__quote {
  top: 2.6%;
  letter-spacing: .16em;
}
.ch3-moon-card__mask {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.ch3-moon-card__mask--top {
  top: 0;
  height: 11.5%;
  background: linear-gradient(180deg, #f8fae9 42%, rgba(248, 250, 233, 0));
}
.ch3-moon-card__mask--bottom {
  bottom: 0;
  height: 14%;
  background: linear-gradient(0deg, #e2e8b4 28%, rgba(226, 232, 180, 0));
}
.ch3-moon-card__body {
  position: absolute;
  left: 50%;
  bottom: 24%;
  top: auto;
  translate: -50% 0;
  width: 62%;
  margin: 0;
  color: #6d7f22;
  text-align: center;
}
.ch3-moon-card__line {
  margin: 0 0 0.42em;
  font-size: clamp(10px, 1.05cqw, 22px);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .1em;
}
.ch3-moon-card__line:last-child {
  margin-bottom: 0;
}
.ch3-card__close { position: fixed; z-index: 2; right: 28px; top: 22px; width: 42px; height: 42px; border: 1px solid rgba(91,107,22,.3); border-radius: 50%; color: #647518; background: rgba(255,255,245,.9); font-size: 1.5rem; cursor: pointer; }

.ch3-fair__hint { position: fixed; z-index: 8; left: 50%; top: 22px; translate: -50% 0; margin: 0; padding: 7px 15px; border-radius: 999px; color: #596616; background: rgba(255,255,245,.72); font-size: .76rem; letter-spacing: .12em; backdrop-filter: blur(8px); pointer-events: none; animation: ch3-fair-hint-in .8s var(--ease-out) .6s both, ch3-fair-hint-glow 3.2s ease-in-out 1.4s infinite; transition: opacity .55s var(--ease-out), visibility .55s; }
.ch3-fair__hint.is-dismissed { opacity: 0; visibility: hidden; animation: none; }
.ch3-fair__viewport { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; scroll-behavior: auto; touch-action: pan-x; overscroll-behavior: contain; }
.ch3-fair__viewport::-webkit-scrollbar { display: none; }
.ch3-fair__viewport:active { cursor: grabbing; }
.ch3-fair__track {
  position: relative;
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
.ch3-fair__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 100%;
  line-height: 0;
}
.ch3-fair__strip > img {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  user-select: none;
  pointer-events: none;
}
.ch3-fair__strip > img + img {
  margin-left: 0;
}
.ch3-fair__verse-group {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  translate: -50% calc((1 - var(--verse-opacity, 0)) * 6px);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 24px);
  opacity: var(--verse-opacity, 0);
  pointer-events: none;
  will-change: opacity, transform;
  filter: drop-shadow(0 0 calc(var(--verse-glow, 0) * 22px) rgba(255, 196, 72, .32));
}
.ch3-fair__verse-group::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  z-index: -1;
  opacity: calc(.35 + var(--verse-glow, 0) * .65);
  background: radial-gradient(ellipse at center, rgba(255, 249, 214, .9) 0%, rgba(251, 252, 232, .58) 52%, rgba(251, 252, 232, 0) 100%);
  transform: scale(calc(.94 + var(--verse-glow, 0) * .06));
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.ch3-fair__verse-group.is-emerging::before {
  animation: ch3-verse-wash .85s var(--ease-out) both;
}
.ch3-fair__verse-group.is-revealed::before {
  background: radial-gradient(ellipse at center, rgba(255, 249, 220, .94) 0%, rgba(251, 252, 232, .62) 56%, rgba(251, 252, 232, 0) 100%);
}
.ch3-fair__verse-group--finale {
  gap: clamp(8px, 1.2vw, 18px);
}
.ch3-fair__verse-group--finale.is-revealed {
  filter: drop-shadow(0 0 calc(12px + var(--verse-glow, 0) * 20px) rgba(255, 188, 64, .38));
}
.ch3-fair__verse-group--finale .ch3-fair__verse {
  letter-spacing: .12em;
}
.ch3-fair__verse {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(.68rem, .95vw, .92rem);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.85;
  color: #5a6438;
  flex-shrink: 0;
  opacity: var(--verse-col-opacity, 0);
  transform: translateY(var(--verse-col-shift, 14px));
  filter: blur(var(--verse-col-blur, 3px));
  text-shadow: 0 0 calc(var(--verse-col-opacity, 0) * 14px) rgba(255, 210, 96, .34);
}
.ch3-fair__verse-group.is-revealed .ch3-fair__verse {
  transition: text-shadow .7s var(--ease-out), color .7s var(--ease-out);
}
.ch3-fair__verse-group--finale.is-revealed .ch3-fair__verse {
  color: #4f5a2e;
  text-shadow: 0 0 12px rgba(255, 200, 82, .4);
}
.ch3-fair__viewport.is-auto-scrolling { cursor: default; }
.ch3-fair__viewport.is-auto-scrolling:active { cursor: default; }
.ch3-lantern { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: 76px; height: 110px; translate: -50% -50%; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ch3-lantern::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; opacity: 0; background: #fff9a8; box-shadow: 0 0 32px 18px rgba(255,199,38,.86); transition: opacity .45s, transform .45s var(--ease-out); }
.ch3-lantern:hover::after, .ch3-lantern.is-lit::after { opacity: .82; transform: scale(1.08); }
.ch3-next--fair { position: fixed; }

.ch3-end__enter {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ch3-end__enter:focus-visible {
  inset: 18px;
  width: auto;
  height: auto;
  outline: 1px solid rgba(126, 138, 38, .52);
  outline-offset: -1px;
}

/* Chapter 03 end — fullscreen closing scene */
.chapter-panel.ch3-end {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
}

.chapter-panel.ch3-end .ch3-screen__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: none;
  animation: ch3-cover-scene-in 1.2s var(--ease-out) both;
}
.ch3-confirm {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  animation: ch3-confirm-backdrop-in .28s ease both;
}
.ch3-confirm__panel {
  width: min(520px, calc(100vw - 48px));
  padding: 36px 42px 32px;
  border: 2px solid #c6d8a3;
  border-radius: 8px;
  text-align: center;
  background: #fff;
  box-shadow: 0 18px 48px rgba(75, 93, 22, .08);
  animation: ch3-confirm-panel-in .32s var(--ease-out) both;
}
.ch3-confirm__question {
  margin: 0 0 28px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 500;
  letter-spacing: .12em;
  color: #4b5d16;
}
.ch3-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ch3-confirm__btn {
  min-width: 112px;
  padding: 10px 28px;
  border: 2px solid #c6d8a3;
  border-radius: 6px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: .98rem;
  letter-spacing: .14em;
  color: #4b5d16;
  background: #fff;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.ch3-confirm__btn--primary {
  background: #e1eac3;
  border-color: #e1eac3;
}
.ch3-confirm__btn--primary:hover,
.ch3-confirm__btn--primary:focus-visible {
  background: #d5e0b4;
  border-color: #d5e0b4;
}
.ch3-confirm__btn--ghost:hover,
.ch3-confirm__btn--ghost:focus-visible {
  background: rgba(225, 234, 195, .35);
}
.ch3-confirm__btn:focus-visible {
  outline: 2px solid rgba(75, 93, 22, .28);
  outline-offset: 2px;
}

.ch1-confirm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  animation: ch1-confirm-backdrop-in .28s ease both;
}
.ch1-confirm__panel {
  width: min(520px, calc(100vw - 48px));
  padding: 36px 42px 32px;
  border: 2px solid #a8d8d6;
  border-radius: 12px;
  text-align: center;
  background: #fff;
  box-shadow: 0 18px 48px rgba(24, 124, 126, .1);
  animation: ch1-confirm-panel-in .32s var(--ease-out) both;
}
.ch1-confirm__question {
  margin: 0 0 28px;
  font-family: var(--font-literary);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 500;
  letter-spacing: .12em;
  color: #187c7e;
}
.ch1-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ch1-confirm__btn {
  min-width: 112px;
  padding: 10px 28px;
  border: 2px solid #a8d8d6;
  border-radius: 6px;
  font-family: var(--font-literary);
  font-size: .98rem;
  letter-spacing: .14em;
  color: #187c7e;
  background: #fff;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.ch1-confirm__btn--primary {
  background: #d4eceb;
  border-color: #a8d8d6;
}
.ch1-confirm__btn--primary:hover,
.ch1-confirm__btn--primary:focus-visible {
  background: #c5e3e1;
  border-color: #8fccc9;
}
.ch1-confirm__btn--ghost:hover,
.ch1-confirm__btn--ghost:focus-visible {
  background: rgba(212, 236, 235, .45);
}
.ch1-confirm__btn:focus-visible {
  outline: 2px solid rgba(24, 124, 126, .35);
  outline-offset: 3px;
}

.ch2-confirm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  animation: ch2-confirm-backdrop-in .28s ease both;
}
.ch2-confirm__panel {
  width: min(520px, calc(100vw - 48px));
  padding: 36px 42px 32px;
  border: 2px solid #e8d58f;
  border-radius: 8px;
  text-align: center;
  background: #fff;
  box-shadow: 0 18px 48px rgba(139, 126, 62, .1);
  animation: ch2-confirm-panel-in .32s var(--ease-out) both;
}
.ch2-confirm__question {
  margin: 0 0 28px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 500;
  letter-spacing: .12em;
  color: #8b7e3e;
}
.ch2-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ch2-confirm__btn {
  min-width: 112px;
  padding: 10px 28px;
  border: 2px solid #e8d58f;
  border-radius: 6px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: .98rem;
  letter-spacing: .14em;
  color: #8b7e3e;
  background: #fff;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.ch2-confirm__btn--primary {
  background: #f5e9b5;
  border-color: #f5e9b5;
}
.ch2-confirm__btn--primary:hover,
.ch2-confirm__btn--primary:focus-visible {
  background: #f0e2a8;
  border-color: #f0e2a8;
}
.ch2-confirm__btn--ghost:hover,
.ch2-confirm__btn--ghost:focus-visible {
  background: rgba(245, 233, 181, .35);
}
.ch2-confirm__btn:focus-visible {
  outline: 2px solid rgba(139, 126, 62, .28);
  outline-offset: 2px;
}

@keyframes ch1-confirm-backdrop-in { from { opacity: 0; } }
@keyframes ch1-confirm-panel-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ch2-confirm-backdrop-in { from { opacity: 0; } }
@keyframes ch2-confirm-panel-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@keyframes ch3-confirm-backdrop-in { from { opacity: 0; } }
@keyframes ch3-confirm-panel-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ch3-art-in { from { opacity: 0; transform: scale(1.018); filter: blur(5px); } }
@keyframes ch3-control-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ch3-hotspot-pulse { 50% { transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 0 0 16px rgba(219,235,104,0), 0 0 28px 12px rgba(239,248,166,.95); } }
@keyframes ch3-card-backdrop-in { from { opacity: 0; } }
@keyframes ch3-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes ch3-verse-wash { from { opacity: .15; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ch3-fair-hint-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ch3-fair-hint-glow { 50% { box-shadow: 0 0 0 1px rgba(255, 214, 96, .28), 0 0 18px rgba(255, 208, 88, .2); } }

@media (max-width: 760px) {
  .ch3-next { right: 14px; bottom: 78px; }
  .ch3-next span { display: none; }
  .ch3-hotspot:not(.ch3-hotspot--book):not(.ch3-hotspot--lotus) { transform: scale(.8); transform-origin: center; }
  .ch3-reading .ch3-hotspot--book {
    left: 68%;
    top: 66%;
    translate: -50% -50%;
    transform: none;
  }
  .ch3-lotus .ch3-hotspot--lotus {
    left: 20%;
    top: 40%;
    translate: -50% -50%;
    transform: none;
  }
  .ch3-hotspot--moon { left: 34%; top: 27%; width: 32%; }
  .ch3-moon .ch3-hotspot--moon {
    left: 34%;
    top: 27%;
    width: 32%;
    height: 50%;
  }
  .ch3-card:not(.ch3-card--fullscreen) img { width: 100%; max-height: 88vh; object-fit: contain; }
  .ch3-card__quote {
    top: 2.2%;
    white-space: normal;
    text-align: center;
    width: 88%;
    font-size: clamp(9px, 2.8cqw, 14px);
    letter-spacing: .1em;
    line-height: 1.55;
  }
  .ch3-moon-card__quote {
    top: 12.5%;
    width: 100%;
    white-space: nowrap;
    letter-spacing: .1em;
    font-size: clamp(10px, 3.1cqw, 16px);
  }
  .ch3-tea-card__quote {
    top: 2.2%;
    letter-spacing: .1em;
  }
  .ch3-moon-card__mask--top { height: 12%; }
  .ch3-moon-card__mask--bottom { height: 15%; }
  .ch3-moon-card__body {
    bottom: 21%;
    width: 88%;
  }
  .ch3-moon-card__line {
    font-size: clamp(9px, 2.85cqw, 14px);
    line-height: 1.68;
    letter-spacing: .07em;
  }
  .ch3-card__close { right: 12px; top: 12px; }
  .ch3-fair__hint { top: 12px; width: max-content; max-width: 88vw; text-align: center; }
  .ch3-confirm__panel { padding: 28px 22px 24px; }
  .ch3-confirm__question { margin-bottom: 22px; font-size: 1rem; letter-spacing: .1em; }
  .ch3-confirm__actions { gap: 12px; }
  .ch3-confirm__btn { min-width: 96px; padding: 9px 22px; font-size: .92rem; }
  .ch1-confirm__panel { padding: 28px 22px 24px; }
  .ch1-confirm__question { margin-bottom: 22px; font-size: 1rem; letter-spacing: .1em; }
  .ch1-confirm__actions { gap: 12px; }
  .ch1-confirm__btn { min-width: 96px; padding: 9px 22px; font-size: .92rem; }
  .ch2-confirm__panel { padding: 28px 22px 24px; }
  .ch2-confirm__question { margin-bottom: 22px; font-size: 1rem; letter-spacing: .1em; }
  .ch2-confirm__actions { gap: 12px; }
  .ch2-confirm__btn { min-width: 96px; padding: 9px 22px; font-size: .92rem; }
}