:root {
  --paper: #f3f0e7;
  --ink: #203b32;
  --muted: rgba(32, 59, 50, .62);
  --line: rgba(32, 59, 50, .22);
  --accent: #718b66;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  color: var(--ink);
  background: #ece9df;
}

* { box-sizing: border-box; }
html, body, #book { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

.stage { position: absolute; inset: 0; perspective: 1600px; background: #ece9df; }
.page {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  display: grid; align-items: end; padding: clamp(6rem, 11vh, 9rem) clamp(1.5rem, 8vw, 9rem);
  background: #f3f0e7;
  opacity: 0; transform: translateX(3%) rotateY(-2deg); transform-origin: left center;
  transition: opacity .85s ease, transform 1.05s cubic-bezier(.2,.72,.18,1);
}
.page.active { opacity: 1; transform: none; z-index: 2; }
.page.leaving-left { opacity: 0; transform: translateX(-5%) rotateY(4deg); z-index: 3; }
.page-image { position: absolute; inset: -2%; z-index: -3; background: var(--page-image) center / cover no-repeat; transform: scale(1.02); animation: image-breathe 18s ease-in-out infinite alternate; }
.page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(248,246,239,.92), rgba(248,246,239,.46) 42%, rgba(248,246,239,.06) 72%); }
.page::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 10rem rgba(67,76,57,.11); pointer-events: none; }
.page-copy { max-width: min(42rem, 78vw); text-wrap: balance; }
.eyebrow, .page-number { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: var(--muted); margin: 0 0 1.5rem; }
.chapter-marker { margin: 0 0 1.35rem; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .74rem; letter-spacing: .08em; }
.chapter-title { margin: 0; font-weight: 400; font-size: clamp(4rem, 10vw, 9rem); line-height: .9; letter-spacing: .08em; }
.chapter-en { margin: 1.4rem 0 3rem; color: var(--muted); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; }
.quote { margin: 0; max-width: 32rem; font-size: clamp(1rem, 1.65vw, 1.4rem); line-height: 2; }
.prologue-copy { max-width: 38rem; }
.prologue-copy p { margin: 0 0 .6rem; font-size: clamp(1.05rem, 2vw, 1.55rem); line-height: 1.9; }
.prologue-copy .lead { margin-bottom: 2.2rem; font-size: clamp(1.6rem, 3.5vw, 3.2rem); line-height: 1.45; }
.cover { align-items: center; }
.cover::before { background: linear-gradient(90deg, rgba(248,246,239,.9), rgba(248,246,239,.3) 48%, rgba(248,246,239,.04) 70%); }
.cover .chapter-title { font-size: clamp(5rem, 13vw, 11rem); line-height: .86; }
.falling-title { position: relative; display: grid; gap: clamp(1.2rem,3.5vh,3rem); line-height: 1; }
.falling-title::before { content: ""; position: absolute; z-index: 2; top: -18%; bottom: -18%; left: -38vw; width: 34vw; opacity: 0; background: linear-gradient(90deg,transparent,rgba(231,235,219,.48),rgba(255,255,255,.76),transparent); filter: blur(10px); transform: skewX(-14deg); animation: cover-wind .95s 3.3s cubic-bezier(.2,.72,.22,1) both; pointer-events: none; }
.fall-line { display: flex; align-items: baseline; min-height: 1em; }
.falling-title i { display: inline-block; font-style: normal; opacity: 0; transform: translate3d(0,-42vh,0); animation: title-fall 1.05s calc(.18s + var(--fall) * .19s) cubic-bezier(.2,.76,.23,1.15) forwards,title-erode 1.45s calc(3.65s + var(--fall) * .055s) cubic-bezier(.36,.05,.28,1) forwards; }
.falling-title .fall-line:last-child { margin-left: .38em; }
.cover .subtitle { margin: 2.5rem 0 0; font-size: .9rem; letter-spacing: .25em; color: var(--muted); }
.main-kv-page { padding: clamp(5.5rem,9vh,7.5rem) clamp(2rem,6vw,7rem) clamp(5rem,8vh,6.5rem); align-items: stretch; background: #f1efe8; }
.main-kv-page::before { background: radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.38),rgba(239,238,230,.28) 58%,rgba(220,223,210,.42)); }
.main-kv-page .page-image { display: block; inset: 0; background-size: cover; background-position: center; opacity: .62; filter: saturate(.62) contrast(.94); animation-duration: 22s; }
.kv-horizontal { position: relative; z-index: 1; width: 100%; display: grid; grid-template-rows: auto 1fr auto; color: #294238; animation: kv-reveal 1.2s cubic-bezier(.16,1,.3,1) both; }
.kv-horizontal header { display: block; }
.kv-statement { max-width: 39rem; margin: 0; color: #385448; font-size: clamp(.86rem,1.1vw,1.05rem); line-height: 1.85; letter-spacing: .035em; }
.kv-chapters { position: relative; align-self: center; display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(.6rem,3vw,3rem); margin: 0; padding: 0; list-style: none; }
.kv-chapters li { position: relative; display: grid; justify-items: center; gap: .45rem; padding: 1.6rem .4rem; background: radial-gradient(circle,rgba(243,242,234,.94) 0 42%,transparent 72%); text-align: center; opacity: 0; transform: translateY(1rem); animation: kv-node-enter .7s .25s ease forwards; }
.kv-chapters li:nth-child(1) { top: 2.7rem; }.kv-chapters li:nth-child(2) { top: 1.25rem; animation-delay: .48s; }.kv-chapters li:nth-child(3) { top: -.35rem; animation-delay: .71s; }.kv-chapters li:nth-child(4) { top: .9rem; animation-delay: .94s; }.kv-chapters li:nth-child(5) { top: 2.45rem; animation-delay: 1.17s; }
.kv-chapters li:not(:last-child)::before { content: ""; position: absolute; z-index: -1; left: 67%; top: 48%; width: 72%; height: 1px; background: linear-gradient(90deg,rgba(47,76,62,.42),rgba(47,76,62,.16)); transform-origin: left center; }
.kv-chapters li:nth-child(1)::before,.kv-chapters li:nth-child(2)::before { transform: rotate(-7deg); }.kv-chapters li:nth-child(3)::before { transform: rotate(6deg); }.kv-chapters li:nth-child(4)::before { transform: rotate(7deg); }
.kv-chapters li::after { content: ""; position: absolute; top: calc(48% - .25rem); width: .5rem; height: .5rem; border-radius: 50%; background: #456653; box-shadow: 0 0 0 .35rem rgba(69,102,83,.1); }
.kv-chapters span { font-size: .68rem; letter-spacing: .16em; }
.kv-chapters strong { margin-top: .65rem; font-size: clamp(1.25rem,2.2vw,2rem); font-weight: 400; letter-spacing: .16em; }
.kv-chapters small { color: var(--muted); font-size: .68rem; letter-spacing: .12em; }
.kv-horizontal footer { display: flex; justify-content: center; align-items: center; gap: clamp(.7rem,2vw,2rem); color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.kv-horizontal footer i { width: clamp(2rem,5vw,5rem); height: 1px; background: rgba(47,76,62,.28); }
.kv-horizontal footer strong { color: #294238; font-weight: 400; }
.pigment { align-items: center; }
.pigment::before { background: linear-gradient(90deg, rgba(248,246,239,.94), rgba(248,246,239,.54) 46%, rgba(248,246,239,.04) 74%); }
.metaphor-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.metaphor-controls button { position: absolute; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(48,78,62,.46); border-radius: 50%; background: rgba(246,244,235,.84); color: #304e3e; box-shadow: 0 .7rem 2rem rgba(45,65,52,.1); backdrop-filter: blur(8px); cursor: pointer; pointer-events: auto; font-family: "Songti SC","STSong",serif; font-size: .9rem; transition: transform .3s ease,background .3s ease,color .3s ease; }
.metaphor-controls button:hover { transform: scale(1.08); }.metaphor-controls button[aria-pressed="true"] { background: #405f4d; color: #f5f2e9; }
.metaphor-controls button[data-metaphor="tree"] { right: 10%; top: 43%; }.metaphor-controls button[data-metaphor="wind"] { right: 36%; top: 34%; }.metaphor-controls button[data-metaphor="branch"] { right: 24%; bottom: 13%; }
.metaphor-note { position: absolute; z-index: 3; right: 8%; top: 55%; width: min(24rem,32vw); padding: 1.35rem 1.5rem; background: rgba(247,245,237,.91); border: 1px solid rgba(48,78,62,.18); box-shadow: 0 1.4rem 4rem rgba(47,62,52,.12); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(.7rem); transition: opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility .45s; }
.metaphor-note.open { opacity: 1; visibility: visible; transform: none; }
.metaphor-note > p { margin: 0 0 .5rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .62rem; letter-spacing: .18em; }
.metaphor-note h3 { margin: 0 0 .8rem; font-size: 1.65rem; font-weight: 400; }
.metaphor-note div p { margin: 0 0 .35rem; font-size: .86rem; line-height: 1.65; }
.branches { --accent: #8aaa61; }
.growth { --accent: #628455; }
.searching { --accent: #bd8339; }
.misalignment { align-items: center; }
.misalignment { --accent: #897354; }
.misalignment .page-copy { margin-left: auto; max-width: min(38rem, 46vw); }
.misalignment::before { background: linear-gradient(270deg, rgba(248,246,239,.93), rgba(248,246,239,.48) 44%, rgba(248,246,239,.04) 72%); }
.new-growth { --accent: #79966d; align-items: center; }
.new-growth .page-copy { margin-left: auto; max-width: min(38rem, 46vw); }
.new-growth::before { background: linear-gradient(270deg, rgba(248,246,239,.93), rgba(248,246,239,.45) 45%, rgba(248,246,239,.04) 72%); }
.atmosphere { position: absolute; inset: -12%; pointer-events: none; background: radial-gradient(circle at 52% 40%, rgba(119,151,100,.18), transparent 34%); opacity: .3; transform: translate3d(-2%,0,0); animation: wind-pass 11s ease-in-out infinite alternate; }
.cover .atmosphere { background: radial-gradient(circle at 68% 44%, rgba(116,146,91,.2), transparent 31%); animation-duration: 17s; }
.growth .atmosphere { animation-duration: 15s; opacity: .2; }
.searching .atmosphere { background: radial-gradient(circle at 68% 30%, rgba(216,157,63,.2), transparent 28%); animation-duration: 9s; }
.misalignment .atmosphere { background: linear-gradient(105deg, transparent 42%, rgba(105,125,83,.1) 50%, transparent 58%); animation-duration: 7s; }
.new-growth .atmosphere { background: radial-gradient(circle at 30% 42%, rgba(111,146,91,.18), transparent 30%); animation-duration: 13s; }
.chapter-title::after { content: ""; display: block; width: 3.5rem; height: 1px; margin-top: 1.8rem; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1.2s .35s ease; }
.active .chapter-title::after { transform: scaleX(1); }
.active .page-copy { animation: rise .95s .18s both; }

.reading-page { align-items: center; padding-top: 5.5rem; padding-bottom: 5.5rem; }
.reading-page::before { background: linear-gradient(90deg, rgba(248,246,239,.97), rgba(248,246,239,.8) 43%, rgba(248,246,239,.06) 72%); }
.reading-page .page-image { animation-duration: 24s; }
.reading-sheet { position: relative; width: min(34rem, 48vw); max-height: calc(100dvh - 11rem); display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: 1.65rem 1.8rem 1.2rem; background: rgba(248,246,239,.78); border: 1px solid rgba(32,59,50,.16); box-shadow: 0 1.5rem 5rem rgba(65,76,57,.1), inset 0 1px rgba(255,255,255,.64); backdrop-filter: blur(16px) saturate(105%); }
.reading-sheet-wide { width: min(48rem, 61vw); }
.reading-heading { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.reading-heading p { margin: 0; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .68rem; }
.reading-heading h2 { margin: 0; font-size: clamp(2rem,4vw,3.6rem); font-weight: 400; letter-spacing: .08em; }
.reading-layer { grid-row: 2; grid-column: 1; min-height: 0; overflow-y: auto; padding: 1.4rem .8rem 1.2rem 0; opacity: 0; visibility: hidden; transform: translateY(.7rem); transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility .45s; scrollbar-width: thin; scrollbar-color: rgba(32,59,50,.24) transparent; }
.reading-layer.active { opacity: 1; visibility: visible; transform: none; }
.material-label { margin: 0 0 .8rem; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .68rem; letter-spacing: .14em; }
.reading-layer h3 { margin: 0 0 1rem; font-size: clamp(1.4rem,2.3vw,2.1rem); font-weight: 400; }
.exhibit-lines { margin: 0; font-size: clamp(1rem,1.45vw,1.25rem); line-height: 1.95; }
.manuscript { font-size: clamp(.87rem,1.15vw,1.02rem); line-height: 1.75; }
.curatorial-note { margin-top: 1.5rem; padding: 1rem 0 0 1rem; border-left: 1px solid var(--accent); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .74rem; line-height: 1.7; color: var(--muted); }
.curatorial-note p { margin: .45rem 0 0; }
.reading-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .68rem; }
.reading-controls button { border: 0; padding: .55rem 0; background: none; cursor: pointer; color: var(--ink); }
.reading-controls button:active { transform: translateY(1px); }
.reading-back { text-align: left; opacity: 0; pointer-events: none; }
.reading-page[data-reading-layer="1"] .reading-back, .reading-page[data-reading-layer="2"] .reading-back { opacity: 1; pointer-events: auto; }
.reading-next { text-align: right; }
.reading-page[data-reading-layer="2"] .reading-next { opacity: 0; pointer-events: none; }
.reading-state { color: var(--muted); }
.exhibit-veil { position: absolute; z-index: -1; inset: 0 0 0 48%; background: rgba(236,238,229,.22); backdrop-filter: blur(5px); -webkit-mask-image: radial-gradient(circle 10rem at var(--veil-x,75%) var(--veil-y,42%), transparent 0 48%, rgba(0,0,0,.96) 74%); mask-image: radial-gradient(circle 10rem at var(--veil-x,75%) var(--veil-y,42%), transparent 0 48%, rgba(0,0,0,.96) 74%); transition: backdrop-filter .6s ease; }
.boundary-page[data-reading-layer="2"] .exhibit-veil { backdrop-filter: blur(2px); }
.shared-light { position: absolute; z-index: -1; right: 9vw; top: 42%; width: min(32rem,42vw); display: flex; justify-content: space-between; align-items: center; color: rgba(32,59,50,.27); font-size: clamp(2.5rem,6vw,6rem); }
.memory-photo { position: absolute; z-index: -1; right: 8vw; bottom: 10vh; width: min(22rem,28vw); aspect-ratio: 4 / 3; margin: 0; padding: .55rem; background: rgba(249,247,240,.78); box-shadow: 0 1.2rem 4rem rgba(66,75,57,.16); transform: rotate(1.8deg); overflow: hidden; opacity: .82; transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.memory-photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.72) contrast(.94); mix-blend-mode: multiply; }
.us-page[data-reading-layer="1"] .memory-photo, .us-page[data-reading-layer="2"] .memory-photo { opacity: .42; transform: rotate(.6deg) translateY(.5rem); }
.shared-light span { transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.shared-light span:nth-child(2) { opacity: 0; transform: scale(.8); color: rgba(32,59,50,.48); }
.us-page[data-reading-layer="1"] .shared-light span:first-child, .us-page[data-reading-layer="1"] .shared-light span:last-child, .us-page[data-reading-layer="2"] .shared-light span:first-child, .us-page[data-reading-layer="2"] .shared-light span:last-child { opacity: .14; transform: translateX(1.5rem); }
.us-page[data-reading-layer="1"] .shared-light span:last-child, .us-page[data-reading-layer="2"] .shared-light span:last-child { transform: translateX(-1.5rem); }
.us-page[data-reading-layer="1"] .shared-light span:nth-child(2), .us-page[data-reading-layer="2"] .shared-light span:nth-child(2) { opacity: 1; transform: scale(1); }
.belief-page::before { background: linear-gradient(90deg, rgba(248,246,239,.91), rgba(248,246,239,.61) 52%, rgba(248,246,239,.18)); }
.belief-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.2rem; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .74rem; line-height: 1.6; }
.belief-pairs > div { padding: 1rem; background: rgba(248,246,239,.6); border-left: 1px solid rgba(32,59,50,.24); }
.belief-pairs strong { font-weight: 500; }
.belief-pairs ol { margin: .7rem 0 0; padding-left: 1.2rem; }
.belief-pairs li + li { margin-top: .35rem; }
.belief-shadows { position: absolute; z-index: -1; inset: 15% 5% 12% 50%; opacity: .18; background: radial-gradient(ellipse at 28% 45%, #6f8b54 0 16%, transparent 17%), radial-gradient(ellipse at 72% 52%, #c99c42 0 17%, transparent 18%); filter: blur(18px); transition: opacity .8s ease, transform 1s ease; }
.belief-page .belief-pairs li { visibility: hidden; opacity: 0; transform: translateX(-1.2rem); transition: opacity .55s ease,transform .7s cubic-bezier(.22,.78,.25,1),filter .45s ease; }
.belief-page .belief-pairs > div:last-child li { transform: translateX(1.2rem); }
.belief-page .belief-pairs li.belief-visible { visibility: visible; opacity: 1; transform: none; }
.belief-page .belief-pairs li.belief-past { opacity: .46; filter: saturate(.55); }
.belief-page .belief-pairs li.belief-current { opacity: 1; filter: none; }
.belief-compare { margin-left: .85rem; padding: .38rem .72rem; border: 1px solid #365042; border-radius: 999px; background: #365042; color: #f7f5ed; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .64rem; letter-spacing: .1em; white-space: nowrap; vertical-align: middle; transition: opacity .25s ease,transform .2s ease; }
.belief-compare:hover { transform: translateY(-1px); }
.belief-compare:active { transform: translateY(1px); }
.belief-compare:disabled { opacity: .46; cursor: default; transform: none; }
.belief-page[data-reading-layer="1"] .belief-shadows, .belief-page[data-reading-layer="2"] .belief-shadows { opacity: .3; transform: translateY(.5rem); }
.paired-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .77rem; line-height: 1.6; }
.paired-lists > div { padding-left: 1rem; border-left: 1px solid var(--line); }
.paired-lists strong { font-weight: 500; }
.paired-lists ol { margin: .7rem 0 0; padding-left: 1.15rem; }
.paired-lists li + li { margin-top: .4rem; }
.section-effect { position: absolute; z-index: -1; inset: 14% 5% 12% 50%; pointer-events: none; }
.section-effect i { position: absolute; display: block; transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.acceptance-effect i { top: 25%; width: 38%; height: 42%; border: 1px solid rgba(102,125,83,.22); background: rgba(249,247,240,.2); backdrop-filter: blur(2px); }
.acceptance-effect i:first-child { left: 8%; transform: rotate(-5deg) translateX(-1rem); }
.acceptance-effect i:last-child { right: 8%; transform: rotate(4deg) translateX(1rem); }
.acceptance-page[data-reading-layer="1"] .acceptance-effect i:first-child, .acceptance-page[data-reading-layer="2"] .acceptance-effect i:first-child { transform: rotate(-2deg) translateX(1.2rem); }
.acceptance-page[data-reading-layer="1"] .acceptance-effect i:last-child, .acceptance-page[data-reading-layer="2"] .acceptance-effect i:last-child { transform: rotate(2deg) translateX(-1.2rem); }
.journey-effect i { left: 5%; right: 5%; top: 55%; height: 2px; background: linear-gradient(90deg, rgba(104,128,82,.14), rgba(104,128,82,.72)); transform: scaleX(.16); transform-origin: left; }
.journey-page[data-reading-layer="1"] .journey-effect i, .journey-page[data-reading-layer="2"] .journey-effect i { transform: scaleX(1); }
.response-effect i { top: 28%; width: 55%; height: 1px; background: rgba(94,120,77,.52); }
.response-effect i:first-child { left: 0; transform: rotate(22deg); transform-origin: right; }
.response-effect i:last-child { right: 0; transform: rotate(-22deg); transform-origin: left; }
.response-page[data-reading-layer="1"] .response-effect i:first-child, .response-page[data-reading-layer="2"] .response-effect i:first-child { transform: rotate(12deg) translateX(8%); }
.response-page[data-reading-layer="1"] .response-effect i:last-child, .response-page[data-reading-layer="2"] .response-effect i:last-child { transform: rotate(-12deg) translateX(-8%); }
.language-effect i { left: 0; right: 0; height: 18%; border-radius: 50%; border-top: 2px solid rgba(102,137,152,.38); }
.language-effect i:first-child { top: 32%; transform: rotate(5deg) translateX(-6%); }
.language-effect i:last-child { top: 47%; border-color: rgba(203,164,68,.42); transform: rotate(-6deg) translateX(6%); }
.shared-language-page[data-reading-layer="1"] .language-effect i, .shared-language-page[data-reading-layer="2"] .language-effect i { transform: rotate(0) translateX(0); }
.time-effect i { inset: 20% 6%; border: 1px solid rgba(101,126,83,.18); background: linear-gradient(90deg, transparent, rgba(249,247,240,.58), transparent); opacity: .7; }
.companionship-page[data-reading-layer="1"] .time-effect i, .companionship-page[data-reading-layer="2"] .time-effect i { opacity: .18; transform: translateX(2rem); }
.growth-effect i { top: 30%; width: 7rem; height: 10rem; opacity: .28; background: radial-gradient(ellipse, rgba(106,137,82,.5), transparent 68%); }
.growth-effect i:first-child { left: 15%; transform: rotate(-14deg); }
.growth-effect i:last-child { right: 15%; transform: rotate(14deg); }
.mutual-growth-page[data-reading-layer="1"] .growth-effect i:first-child, .mutual-growth-page[data-reading-layer="2"] .growth-effect i:first-child { transform: rotate(5deg) translateX(3rem); }
.mutual-growth-page[data-reading-layer="1"] .growth-effect i:last-child, .mutual-growth-page[data-reading-layer="2"] .growth-effect i:last-child { transform: rotate(-5deg) translateX(-3rem); }
.translation-effect { border: 0; background: none; color: var(--ink); cursor: pointer; pointer-events: auto; }
.translation-effect span { position: absolute; top: 35%; width: 38%; padding: 2.2rem 1rem; border: 1px solid rgba(143,112,60,.18); background: rgba(249,247,240,.3); font-size: .75rem; letter-spacing: .16em; backdrop-filter: blur(2px); transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .8s ease; }
.translation-effect span:first-child { left: 8%; transform: rotate(-5deg); }
.translation-effect span:last-child { right: 8%; transform: rotate(5deg); }
.translation-page.translation-open .translation-effect span:first-child { transform: rotate(-1deg) translate(-2.6rem,-1.2rem); }
.translation-page.translation-open .translation-effect span:last-child { transform: rotate(1deg) translate(2.6rem,1.2rem); }
.map-effect i { top: 45%; width: 72%; height: 1px; transform-origin: left; }
.map-effect i:first-child { left: 5%; background: #88966a; transform: rotate(-4deg); }
.map-effect i:last-child { left: 5%; background: #c9904b; transform: rotate(4deg); }
.map-page[data-reading-layer="1"] .map-effect i:first-child, .map-page[data-reading-layer="2"] .map-effect i:first-child { transform: rotate(-15deg) translateY(-1.2rem); }
.map-page[data-reading-layer="1"] .map-effect i:last-child, .map-page[data-reading-layer="2"] .map-effect i:last-child { transform: rotate(15deg) translateY(1.2rem); }
.wholeness-effect i { top: 28%; width: 28%; height: 46%; border: 1px solid rgba(128,114,71,.2); background: rgba(249,247,240,.18); }
.wholeness-effect i:first-child { left: 8%; transform: rotate(-5deg); }
.wholeness-effect i:last-child { right: 8%; transform: rotate(5deg); }
.wholeness-page[data-reading-layer="1"] .wholeness-effect i, .wholeness-page[data-reading-layer="2"] .wholeness-effect i { opacity: .55; transform: rotate(0); }

.misalignment-sequence-page { align-items: center; color: #26372f; }
.misalignment-sequence-page::before { background: linear-gradient(90deg,rgba(243,242,234,.82),rgba(243,242,234,.62) 48%,rgba(243,242,234,.46)); }
.misalignment-sequence-page .page-image { opacity: .74; filter: saturate(.72) contrast(.9); }
.misalignment-scene { width: min(70rem,82vw); margin: auto; text-align: center; }
.misalignment-sequence { position: relative; width: min(70rem,82vw); min-height: min(62vh,38rem); margin: auto; display: grid; place-items: center; text-align: center; }
.misalignment-meta { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; letter-spacing: .12em; color: rgba(28,48,37,.68); }
.misalignment-meta p { margin: 0; }
.speaker-label { padding: .45rem .7rem; border-left: 1px solid var(--accent); background: rgba(248,247,240,.48); }
.route-label { letter-spacing: .2em; }
.spoken-line { position: relative; z-index: 2; max-width: 26ch; min-height: 5em; margin: 7vh auto 2.5rem; padding: 1.4rem 2rem; font-size: clamp(1.8rem,4.4vw,4.6rem); font-weight: 400; line-height: 1.55; text-shadow: 0 1px rgba(255,255,255,.5); background: radial-gradient(ellipse,rgba(248,247,240,.72),rgba(248,247,240,.22) 70%,transparent); }
.reveal-meaning { padding: .8rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .72rem; letter-spacing: .12em; }
.reveal-meaning:disabled { opacity: 0; pointer-events: none; }
.quiet-instruction, .audio-note { margin-top: 1.3rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; }
.split-scene { text-align: left; }
.split-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: clamp(2rem,7vh,5rem); }
.original-reminder { max-width: 28rem; margin: 0; color: var(--muted); text-align: right; line-height: 1.8; }
.voice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem,12vw,14rem); align-items: center; }
.voice-pair section { transition: transform 1.3s cubic-bezier(.16,1,.3,1), opacity .8s ease; }
.voice-pair section > p { margin: 0 0 1rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; letter-spacing: .14em; }
.voice-pair blockquote { margin: 0; font-size: clamp(1.25rem,2.4vw,2.5rem); line-height: 1.7; }
.heard-voice { transform: translateX(-5vw); }
.meant-voice { transform: translateX(5vw); text-align: right; }
.voices-near .heard-voice { animation: voice-near-left 2.8s ease both; }
.voices-near .meant-voice { animation: voice-near-right 2.8s ease both; }
.advance-pair { display: block; margin: clamp(2rem,7vh,5rem) auto 0; }
.misalignment-book-spread { position: absolute; z-index: 3; inset: 11% 0 3%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,8rem); align-items: center; opacity: 0; visibility: hidden; pointer-events: none; }
.misalignment-book-spread::after { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent,var(--line),transparent); }
.misalignment-book-spread section { min-height: 66%; padding: clamp(2rem,4vw,4rem); display: flex; flex-direction: column; justify-content: center; background: rgba(247,245,238,.82); border: 1px solid rgba(44,68,52,.14); box-shadow: 0 1.8rem 5rem rgba(55,68,58,.11); backdrop-filter: blur(10px); }
.misalignment-book-spread section > p { margin: 0 0 1.2rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; letter-spacing: .14em; }
.misalignment-book-spread blockquote { margin: 0; font-size: clamp(1.1rem,2vw,2rem); line-height: 1.8; }
.misalignment-book-spread .heard-voice { transform: translateX(-12%); text-align: left; }
.misalignment-book-spread .meant-voice { transform: translateX(12%); text-align: right; opacity: 0; }
.original-echo { position: absolute; left: 25%; right: 25%; top: 2%; margin: 0; text-align: center; color: rgba(31,53,40,.52); font-size: clamp(.82rem,1.1vw,1rem); line-height: 1.6; }
.show-heard .spoken-line { opacity: 0; transform: translateY(-.5rem); transition: opacity .7s ease,transform .8s ease; }
.show-heard .misalignment-book-spread { opacity: 1; visibility: visible; }
.show-heard .heard-voice { animation: heard-arrive 1.4s cubic-bezier(.16,1,.3,1) both; }
.show-understanding .meant-voice { opacity: 1; animation: meant-arrive 3.8s cubic-bezier(.16,1,.3,1) both; }
.show-understanding .heard-voice { animation: heard-reconsider 3.8s cubic-bezier(.16,1,.3,1) both; }
.fade-voices .misalignment-book-spread { opacity: 0; transition: opacity 1.3s ease; }
.fade-voices .wind-leaves { opacity: 0; transition: opacity 1.4s ease; }
.wind-leaves { position: absolute; z-index: 1; inset: -4% -3%; pointer-events: none; overflow: hidden; }
.wind-leaves i { position: absolute; left: -8%; top: 12%; width: 1.15rem; height: .72rem; background: rgba(78,101,67,.62); border-radius: 70% 20% 70% 20%; opacity: 0; transform: rotate(18deg); }
.wind-leaves i:nth-child(2) { top: 20%; } .wind-leaves i:nth-child(3) { top: 29%; } .wind-leaves i:nth-child(4) { top: 38%; }
.wind-leaves i:nth-child(5) { top: 47%; } .wind-leaves i:nth-child(6) { top: 56%; } .wind-leaves i:nth-child(7) { top: 65%; }
.wind-leaves i:nth-child(8) { top: 74%; } .wind-leaves i:nth-child(9) { top: 18%; } .wind-leaves i:nth-child(10) { top: 43%; }
.wind-leaves i:nth-child(11) { top: 61%; } .wind-leaves i:nth-child(12) { top: 81%; }
.wind-leaves i:nth-child(2n) { background: rgba(184,181,119,.64); transform: rotate(-24deg) scale(.82); }
.wind-leaves i:nth-child(3n) { width: .82rem; height: .55rem; background: rgba(112,128,85,.48); }
.show-heard .wind-leaves i { animation: leaf-pass 6.5s calc(var(--leaf) * .13s) cubic-bezier(.22,.7,.25,1) both; }
.show-understanding .wind-leaves i { animation-name: leaf-turn; animation-duration: 4.4s; }

.new-growth-narration { align-items: center; }
.new-growth-narration::before { background: linear-gradient(90deg,rgba(248,246,239,.95),rgba(248,246,239,.65) 48%,rgba(248,246,239,.08)); }
.narration-page-copy { width: min(31rem,78vw); }
.narration-page-copy > p:not(.eyebrow,.audio-note) { margin: 0 0 .35rem; font-size: clamp(1.05rem,1.7vw,1.4rem); line-height: 1.55; }
.narration-intro > p:not(.eyebrow,.audio-note) { margin: 0 0 .35rem; font-size: clamp(1.05rem,1.7vw,1.4rem); line-height: 1.55; }
.narration-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.open-letter, .letter-toggle, .letter-skip { padding: .65rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; letter-spacing: .1em; }
.memoir-letter { position: fixed; z-index: 5; inset: 4.8rem clamp(1rem,7vw,7rem) 5rem; display: grid; grid-template-rows: auto minmax(0,1fr); padding: clamp(1.2rem,3vw,2.5rem) clamp(1.2rem,5vw,5rem); background: rgba(250,248,241,.96); border: 1px solid rgba(42,61,50,.15); box-shadow: 0 2rem 7rem rgba(45,59,50,.16); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(1rem) rotate(.25deg); transition: opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1),visibility .8s; }
.letter-open .memoir-letter { opacity: 1; visibility: visible; transform: none; }
.letter-open .narration-intro { opacity: 0; visibility: hidden; transition: opacity .5s ease,visibility .5s; }
.memoir-letter header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.memoir-letter header p { margin: 0 0 .4rem; }
.memoir-letter header > div:last-child { display: flex; gap: 1.4rem; }
.letter-progress { color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .62rem; letter-spacing: .1em; }
.letter-scroll { min-height: 0; overflow-y: auto; padding: clamp(1.5rem,4vh,3rem) clamp(.2rem,4vw,4rem) 5rem; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(32,59,50,.2) transparent; }
.letter-writing { max-width: 48rem; min-height: 100%; margin: 0 auto; white-space: pre-wrap; color: #2c4036; font-family: "Kaiti SC","STKaiti","KaiTi",serif; font-size: clamp(1.02rem,1.6vw,1.32rem); line-height: 2.05; letter-spacing: .035em; text-align: justify; }
.writing-pen { display: inline-block; position: relative; width: 1.65rem; height: .22rem; margin-left: .18rem; background: linear-gradient(90deg,#536653 0 72%,#b9a27b 73% 88%,#36473e 89%); border-radius: 999px 2px 2px 999px; transform: translateY(-.15rem) rotate(-32deg); transform-origin: left center; box-shadow: 0 .16rem .35rem rgba(46,61,51,.2); animation: pen-breathe .55s ease-in-out infinite alternate; }
.writing-pen::after { content: ""; position: absolute; right: -.34rem; top: -.09rem; border-left: .4rem solid #36473e; border-top: .2rem solid transparent; border-bottom: .2rem solid transparent; }
.ending-page, .back-cover { align-items: center; background: #eff0e9; }
.ending-page::before { background: linear-gradient(90deg,rgba(244,244,237,.92),rgba(244,244,237,.2) 70%); }
.ending-copy { position: relative; z-index: 1; max-width: 29rem; }
.ending-copy p { margin: 0 0 .8rem; font-size: clamp(1.2rem,2.5vw,2.15rem); line-height: 1.6; }
.separate-trunks { position: absolute; inset: 4rem 8vw 0 42%; overflow: hidden; }
.separate-trunks i { position: absolute; bottom: -12%; width: clamp(4rem,9vw,9rem); height: 108%; border-radius: 52% 48% 0 0; background: linear-gradient(90deg,rgba(61,76,54,.28),rgba(117,131,94,.12)); transform-origin: bottom; }
.separate-trunks i:first-child { left: 20%; transform: rotate(-8deg); }
.separate-trunks i:last-child { right: 16%; transform: rotate(9deg); }
.back-cover { place-items: center; padding: clamp(5rem,10vh,8rem) 1.5rem; }
.back-cover::before { background: radial-gradient(ellipse at center,rgba(245,243,235,.8) 0 23%,rgba(245,243,235,.38) 48%,rgba(238,237,229,.08) 78%); }
.back-cover .page-image { opacity: .92; filter: saturate(.72) contrast(.96); animation-duration: 24s; }
.envelope-scene { position: relative; width: min(46rem,82vw); height: min(34rem,66vh); display: grid; place-items: end center; }
.letter-sheet { position: absolute; z-index: 1; top: 1%; left: 18%; right: 18%; min-height: 72%; padding: clamp(2rem,5vw,4.5rem); background: rgba(252,251,246,.96); border: 1px solid rgba(41,61,51,.13); box-shadow: 0 2rem 5rem rgba(54,64,57,.11); transform: rotate(-1deg); text-align: right; }
.letter-sheet p { margin: 0 0 .55rem; font-size: clamp(.88rem,1.4vw,1.1rem); line-height: 1.8; }
.letter-sheet span { display: block; height: 7rem; margin-top: 2.5rem; border-top: 1px solid rgba(41,61,51,.12); }
.envelope { position: relative; z-index: 2; width: 76%; height: 43%; filter: drop-shadow(0 1.2rem 2.5rem rgba(50,61,53,.13)); }
.envelope i { position: absolute; inset: 0; display: block; }
.envelope-back { background: #dfe1d5; border: 1px solid rgba(45,63,52,.18); }
.envelope-flap { background: #e9e9df; clip-path: polygon(0 0,50% 73%,100% 0); transform: translateY(-99%) rotateX(180deg); transform-origin: bottom; opacity: .9; }
.envelope-front { background: #e6e6dc; clip-path: polygon(0 0,50% 56%,100% 0,100% 100%,0 100%); border: 1px solid rgba(45,63,52,.14); }
.envelope-caption { position: absolute; z-index: 3; bottom: -2.2rem; margin: 0; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .66rem; letter-spacing: .18em; }

.toolbar { position: fixed; z-index: 10; left: 0; right: 0; top: 0; height: 4.5rem; padding: 0 clamp(1.25rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: .68rem; letter-spacing: .12em; }
.toolbar p { margin: 0; color: var(--muted); }
.divider { margin: 0 .65rem; opacity: .5; }
.text-button { padding: .5rem 0; border: 0; background: none; cursor: pointer; letter-spacing: .1em; }
.text-button:hover { color: var(--accent); }
.pager { position: fixed; z-index: 10; left: clamp(1.25rem, 4vw, 4rem); right: clamp(1.25rem, 4vw, 4rem); bottom: 1.8rem; display: grid; grid-template-columns: 2.8rem 1fr 2.8rem; gap: 1rem; align-items: center; }
.pager button { width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; background: rgba(248,246,239,.68); cursor: pointer; backdrop-filter: blur(8px); }
.pager button:disabled { opacity: .22; cursor: default; }
.progress { height: 1px; background: var(--line); }
.progress i { display: block; width: 12.5%; height: 100%; background: var(--ink); transition: width .7s ease; }

.index-panel { position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; width: min(31rem, 90vw); padding: 6rem clamp(2rem, 6vw, 5rem); background: #e4e0d4; color: #20231d; transform: translateX(-102%); transition: transform .55s cubic-bezier(.2,.72,.18,1); overflow: auto; }
.index-panel.open { transform: none; }
.index-panel h2 { margin: 0 0 2.5rem; font-size: 2.5rem; font-weight: 400; }
.index-panel ol { list-style: none; padding: 0; margin: 0; }
.index-panel li button { width: 100%; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border: 0; border-bottom: 1px solid rgba(32,35,29,.18); background: none; color: inherit; cursor: pointer; text-align: left; }
.index-panel li button:hover { padding-left: .5rem; }
.index-close { position: absolute; right: 2rem; top: 1.5rem; border: 0; background: none; color: #20231d; font-size: 2rem; cursor: pointer; }
.scrim { position: fixed; z-index: 20; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .4s; }
.scrim.open { opacity: 1; pointer-events: auto; }

.music-player { position: fixed; z-index: 18; right: clamp(1rem,4vw,4rem); top: 4.5rem; width: min(25rem,calc(100vw - 2rem)); padding: .9rem; background: rgba(239,237,229,.94); border: 1px solid var(--line); box-shadow: 0 1.2rem 4rem rgba(43,57,48,.14); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-.6rem); transition: opacity .35s ease,transform .35s ease,visibility .35s; }
.music-player.open { opacity: 1; visibility: visible; transform: none; }
.music-player-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .65rem; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .68rem; }
.music-player-head button { border: 0; background: none; padding: .1rem .25rem; cursor: pointer; font-size: 1.1rem; }
.music-guide { margin: 0 0 .55rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .66rem; line-height: 1.6; }
.music-player iframe { display: block; width: 100%; height: 86px; border: 0; }
.music-player > a { display: block; margin-top: .45rem; color: var(--muted); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size: .62rem; text-align: right; text-decoration: none; }
.music-player.external-track iframe { display: none; }
.music-player.external-track > a { margin-top: .2rem; padding: .9rem 1rem; border: 1px solid rgba(43,61,50,.26); color: #2f4539; text-align: center; letter-spacing: .08em; transition: background .25s ease,transform .2s ease; }
.music-player.external-track > a:hover { background: rgba(83,110,83,.09); }
.music-player.external-track > a:active { transform: translateY(1px); }


@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes wind-pass { from { opacity: .2; transform: translate3d(-3%,0,0); } to { opacity: .52; transform: translate3d(3%,-.8%,0); } }
@keyframes image-breathe { from { transform: scale(1.02) translate3d(-.25%,0,0); } to { transform: scale(1.055) translate3d(.35%,-.25%,0); } }
@keyframes kv-reveal { from { opacity: 0; transform: translateY(1.2rem) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kv-node-enter { to { opacity: 1; transform: none; } }
@keyframes spread-appear { 0% { opacity: 0; } 18% { opacity: 1; } 58% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 1; } }
@keyframes heard-arrive { from { opacity: 0; transform: translateX(-18%) translateY(.8rem); } to { opacity: 1; transform: translateX(-4%); } }
@keyframes meant-arrive { 0% { opacity: 0; transform: translateX(18%) rotateY(18deg); } 25% { opacity: 1; } 62%,76% { opacity: 1; transform: translateX(-9%) rotateY(0); } 100% { opacity: 1; transform: translateX(-2%); } }
@keyframes heard-reconsider { 0% { transform: translateX(-4%); } 62%,76% { transform: translateX(9%); } 100% { transform: translateX(2%); } }
@keyframes leaf-pass { 0% { opacity: 0; transform: translate(-5vw,2vh) rotate(0); } 18% { opacity: .8; } 70% { opacity: .55; } 100% { opacity: 0; transform: translate(112vw,-10vh) rotate(280deg); } }
@keyframes leaf-turn { 0% { opacity: .25; transform: translate(18vw,1vh) rotateY(0) rotate(10deg); } 48% { opacity: .8; transform: translate(56vw,-5vh) rotateY(180deg) rotate(120deg); } 100% { opacity: 0; transform: translate(108vw,-12vh) rotateY(360deg) rotate(250deg); } }
@keyframes pen-breathe { from { transform: translateY(-.15rem) rotate(-32deg); } to { transform: translate(.08rem,-.24rem) rotate(-29deg); } }
@keyframes title-fall { 0% { opacity: 0; } 72% { opacity: 1; transform: translate3d(0,.08em,0) rotate(0); } 86% { transform: translate3d(0,-.035em,0) rotate(0); } 100% { opacity: 1; transform: none; } }
@keyframes cover-wind { 0% { opacity: 0; transform: translateX(0) skewX(-14deg); } 18% { opacity: .82; } 76% { opacity: .56; } 100% { opacity: 0; transform: translateX(108vw) skewX(-14deg); } }
@keyframes title-erode { 0% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); } 38% { opacity: .72; filter: blur(1.5px); } 100% { opacity: 0; filter: blur(12px); transform: translate3d(28vw,-2vh,0) scale(.72); } }
@keyframes belief-enter { to { opacity: 1; transform: none; } }
@keyframes voice-near-left { 0%,100% { transform: translateX(-5vw); } 62% { transform: translateX(2.3vw); } }
@keyframes voice-near-right { 0%,100% { transform: translateX(5vw); } 62% { transform: translateX(-2.3vw); } }
@media (max-width: 640px) {
  .page { padding: 7rem 1.5rem 7rem; }
  .page-image { background-position: 58% center; }
  .page::before { background: linear-gradient(0deg, rgba(248,246,239,.96), rgba(248,246,239,.08) 82%); }
  .page-copy { max-width: 100%; }
  .misalignment .page-copy, .new-growth .page-copy { margin-left: 0; max-width: 100%; }
  .reading-page { padding: 5.5rem 1rem 5.8rem; align-items: end; }
  .reading-page::before, .belief-page::before { background: linear-gradient(0deg, rgba(248,246,239,.97), rgba(248,246,239,.56) 62%, rgba(248,246,239,.04) 86%); }
  .reading-sheet, .reading-sheet-wide { width: 100%; max-height: 67dvh; padding: 1.2rem 1.15rem .8rem; }
  .reading-heading { padding-bottom: .75rem; }
  .reading-layer { padding-top: 1rem; }
  .belief-pairs { grid-template-columns: 1fr; gap: .8rem; }
  .paired-lists { grid-template-columns: 1fr; gap: .9rem; }
  .shared-light { right: 8vw; top: 19%; width: 84vw; }
  .memory-photo { right: 1rem; top: 5.5rem; bottom: auto; width: min(14rem,58vw); opacity: .58; }
  .section-effect { inset: 8% 3% 58% 20%; opacity: .68; }
  .translation-effect span { top: 12%; width: 44%; padding: 1rem .5rem; }
  .translation-page.translation-open .translation-effect span:first-child { transform: rotate(-1deg) translate(-.5rem,-.5rem); }
  .translation-page.translation-open .translation-effect span:last-child { transform: rotate(1deg) translate(.5rem,.5rem); }
  .misalignment-scene { width: 100%; }
  .misalignment-sequence { width: 100%; min-height: 68vh; }
  .misalignment-book-spread { grid-template-columns: 1fr 1fr; gap: .5rem; inset: 10% -1rem 2%; }
  .misalignment-book-spread section { min-height: 58%; padding: 1.2rem .8rem; }
  .misalignment-book-spread blockquote { font-size: .9rem; line-height: 1.7; }
  .misalignment-book-spread::after { display: none; }
  .spoken-line { margin-top: 3rem; font-size: clamp(1.6rem,8vw,2.5rem); }
  .split-heading { display: block; margin-bottom: 2rem; }
  .original-reminder { margin-top: 1rem; text-align: left; }
  .voice-pair { grid-template-columns: 1fr; gap: 2.4rem; }
  .heard-voice, .meant-voice { transform: none; text-align: left; }
  .voice-pair blockquote { font-size: 1.2rem; }
  .separate-trunks { inset: 3rem -8vw 0 28%; opacity: .48; }
  .ending-copy { align-self: end; padding-bottom: 12vh; }
  .final-whitespace { right: 1.5rem; bottom: 16vh; }
  .main-kv-page .page-image { inset: 5rem .75rem 6.5rem; }
  .main-kv-caption { bottom: 5.1rem; }
  .envelope-scene { width: 100%; height: 65vh; }
  .letter-sheet { left: 7%; right: 7%; padding: 2rem 1.5rem; }
  .envelope { width: 100%; height: 38%; }
  .narration-actions { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .memoir-letter { inset: 4.2rem .7rem 4.6rem; padding: 1rem; }
  .memoir-letter header { gap: .7rem; }
  .memoir-letter header > div:last-child { flex-direction: column; gap: .15rem; align-items: flex-end; }
  .letter-scroll { padding: 1.2rem .35rem 4rem; }
  .letter-writing { font-size: .98rem; line-height: 1.9; text-align: left; }
  .chapter-title { font-size: clamp(3.8rem, 20vw, 6rem); }
  .quote { line-height: 1.8; }
  .toolbar { padding: 0 1.25rem; }
  .main-kv-page { padding: 5.5rem 1rem 5.5rem; }
  .kv-horizontal header { display: block; }
  .kv-horizontal header > p { margin-top: .8rem; text-align: left; }
  .kv-chapters { gap: .1rem; }
  .kv-chapters li { padding-inline: 0; }
  .kv-chapters li:nth-child(n) { top: 0; }
  .kv-chapters strong { font-size: 1rem; letter-spacing: .06em; }
  .kv-chapters small { font-size: .55rem; letter-spacing: 0; }
  .kv-horizontal footer { gap: .45rem; font-size: .58rem; letter-spacing: .04em; }
  .metaphor-controls button[data-metaphor="tree"] { right: 8%; top: 36%; }.metaphor-controls button[data-metaphor="wind"] { right: 32%; top: 28%; }.metaphor-controls button[data-metaphor="branch"] { right: 16%; bottom: 18%; }
  .metaphor-note { left: 1rem; right: 1rem; top: auto; bottom: 5.8rem; width: auto; }
  .music-player { top: 4rem; right: 1rem; }
  .toolbar p { display: none; }
  .pager { left: 1.25rem; right: 1.25rem; bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .falling-title i { opacity: 1; transform: none; animation: none !important; filter: none; }
  .belief-page .belief-pairs li { transition-duration: .01ms !important; }
  .falling-title::before { display: none; }
}

/* 逐页叙事互动：动作只改变背景意向，不覆盖正文层。 */
.page-interaction {
  position: absolute; z-index: 1; right: clamp(4.5rem,9vw,10rem); top: 50%;
  width: clamp(8rem,18vw,15rem); height: clamp(8rem,18vw,15rem); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #294238;
  cursor: pointer; touch-action: manipulation;
}
.page-interaction:active { transform: scale(.985); }
.interaction-hint {
  position: absolute; z-index: 2; left: 50%; bottom: -1.8rem; width: max-content; max-width: 12rem;
  padding: .38rem .7rem; border: 1px solid rgba(42,66,54,.2); border-radius: 999px;
  background: rgba(244,243,236,.74); color: rgba(41,65,52,.76); backdrop-filter: blur(8px);
  transform: translateX(-50%); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  font-size: .62rem; line-height: 1.4; letter-spacing: .08em; white-space: nowrap;
  transition: opacity .45s ease, transform .45s ease;
}
.page-interaction.is-active .interaction-hint { opacity: .45; transform: translateX(-50%) translateY(.25rem); }
.interaction-visual { position: absolute; inset: 0; display: block; pointer-events: none; }

.interaction-sprout { right: 19%; top: 25%; }
.interaction-sprout .interaction-visual::before,
.interaction-sprout .interaction-visual::after { content: ""; position: absolute; left: 50%; bottom: 11%; transform-origin: bottom; opacity: .38; transition: transform 1.7s cubic-bezier(.16,1,.3,1),opacity .8s; }
.interaction-sprout .interaction-visual::before { width: 2px; height: 72%; background: linear-gradient(transparent,#5b7559); transform: rotate(-5deg) scaleY(.18); }
.interaction-sprout .interaction-visual::after { left: 51%; bottom: 55%; width: 38%; height: 24%; border: 1px solid #668166; border-left: 0; border-bottom: 0; border-radius: 0 100% 0 100%; transform: rotate(-18deg) scale(.15); }
.interaction-sprout.is-active .interaction-visual::before { opacity: .82; transform: rotate(-5deg) scaleY(1); }
.interaction-sprout.is-active .interaction-visual::after { opacity: .74; transform: rotate(-18deg) scale(1); }

.interaction-hold { right: 14%; top: 28%; border: 1px solid rgba(58,82,66,.18); transition: box-shadow 1.8s ease,background 1.8s ease; }
.interaction-hold .interaction-visual::before { content: "没有说出口的话"; position: absolute; inset: 0; display: grid; place-items: center; opacity: .08; filter: blur(6px); letter-spacing: .15em; transition: opacity 1.7s ease,filter 1.7s ease; }
.interaction-hold.is-active { background: rgba(244,244,235,.22); box-shadow: inset 0 0 4rem rgba(223,231,212,.66); }
.interaction-hold.is-active .interaction-visual::before { opacity: .72; filter: blur(0); }

.interaction-distance { right: 10%; top: 33%; width: clamp(12rem,25vw,23rem); height: 5rem; border-bottom: 1px solid rgba(49,74,58,.24); border-radius: 0; }
.interaction-distance .interaction-visual::before,.interaction-distance .interaction-visual::after { content: ""; position: absolute; bottom: -.36rem; width: .7rem; height: .7rem; border-radius: 50%; background: #56705b; transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.interaction-distance .interaction-visual::before { left: 0; }.interaction-distance .interaction-visual::after { right: 0; }
.interaction-distance.is-active .interaction-visual::before { transform: translateX(calc(clamp(12rem,25vw,23rem) / 2 - .7rem)); }
.interaction-distance.is-active .interaction-visual::after { transform: translateX(calc((clamp(12rem,25vw,23rem) / 2 - .7rem) * -1)); }

.interaction-response { right: 15%; top: 28%; }
.interaction-response .interaction-visual::before,.interaction-response .interaction-visual::after { content: ""; position: absolute; top: 46%; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(72,102,74,.82); box-shadow: 0 0 0 0 rgba(92,124,91,.2); }
.interaction-response .interaction-visual::before { left: 8%; }.interaction-response .interaction-visual::after { right: 8%; opacity: .18; }
.interaction-response.waiting-response .interaction-visual::before { animation: response-pulse 1.5s ease-out; }
.interaction-response.response-arrived .interaction-visual::after { opacity: .9; transition: opacity .9s ease; animation: response-pulse 1.5s ease-out; }
.interaction-response.response-arrived .interaction-visual { background: linear-gradient(90deg,transparent 12%,rgba(70,98,73,.38) 49%,transparent 88%) center / 100% 1px no-repeat; }

.interaction-intertwine,.interaction-two-trees,.interaction-fork { right: 13%; top: 21%; }
.interaction-intertwine .interaction-visual::before,.interaction-intertwine .interaction-visual::after,
.interaction-two-trees .interaction-visual::before,.interaction-two-trees .interaction-visual::after,
.interaction-fork .interaction-visual::before,.interaction-fork .interaction-visual::after { content: ""; position: absolute; bottom: 3%; width: 38%; height: 88%; border: 2px solid rgba(61,88,61,.52); border-bottom: 0; transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.interaction-intertwine .interaction-visual::before,.interaction-two-trees .interaction-visual::before,.interaction-fork .interaction-visual::before { left: 10%; border-right: 0; border-radius: 90% 0 0 0; transform: rotate(-8deg) scaleY(.35); transform-origin: bottom; }
.interaction-intertwine .interaction-visual::after,.interaction-two-trees .interaction-visual::after,.interaction-fork .interaction-visual::after { right: 10%; border-left: 0; border-radius: 0 90% 0 0; transform: rotate(8deg) scaleY(.35); transform-origin: bottom; }
.interaction-intertwine.is-active .interaction-visual::before { transform: rotate(13deg) scaleY(1); }.interaction-intertwine.is-active .interaction-visual::after { transform: rotate(-13deg) scaleY(1); }
.interaction-two-trees.is-active .interaction-visual::before,.interaction-fork.is-active .interaction-visual::before { transform: rotate(-15deg) scaleY(1); }
.interaction-two-trees.is-active .interaction-visual::after,.interaction-fork.is-active .interaction-visual::after { transform: rotate(15deg) scaleY(1); }

.interaction-together { right: 12%; top: 28%; }
.interaction-together .interaction-visual::before,.interaction-together .interaction-visual::after { content: ""; position: absolute; top: 24%; width: 48%; height: 48%; border-radius: 50%; border: 1px solid rgba(53,80,61,.48); transition: transform 1.5s cubic-bezier(.16,1,.3,1),background 1s; }
.interaction-together .interaction-visual::before { left: -2%; }.interaction-together .interaction-visual::after { right: -2%; }
.interaction-together.is-active .interaction-visual::before { transform: translateX(32%); background: rgba(121,146,110,.12); }
.interaction-together.is-active .interaction-visual::after { transform: translateX(-32%); background: rgba(121,146,110,.12); }

.interaction-language { right: 12%; top: 27%; }
.interaction-language .interaction-visual { display: grid; grid-template-columns: repeat(5,1fr); align-items: center; }
.interaction-language .interaction-visual::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(49,74,57,.18); }
.interaction-language .interaction-visual i { position: relative; width: .65rem; height: .65rem; margin: auto; border-radius: 50%; border: 1px solid rgba(54,80,61,.45); background: rgba(245,244,237,.8); transition: transform .5s ease,background .5s ease; }
.interaction-language .interaction-visual i.is-lit { transform: scale(1.5); background: #718b66; }

.interaction-time { right: 9%; top: 37%; width: clamp(14rem,28vw,26rem); height: 4.5rem; border-radius: 0; }
.interaction-time label { position: absolute; inset: 0; display: grid; align-content: center; gap: .7rem; }
.interaction-time label span { color: rgba(42,65,53,.7); font: .62rem/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .08em; }
.interaction-time input { width: 100%; accent-color: #718b66; cursor: ew-resize; }
.interaction-time .interaction-visual { top: auto; bottom: 0; height: 1px; background: linear-gradient(90deg,#d7c9a7 0 var(--time-progress,0%),rgba(52,78,60,.18) var(--time-progress,0%)); }

.interaction-look,.interaction-out-of-step { inset: 0; width: auto; height: auto; border-radius: 0; pointer-events: none; }
.interaction-look .interaction-hint,.interaction-out-of-step .interaction-hint { left: auto; right: clamp(4rem,8vw,8rem); bottom: 6rem; transform: none; }
.interaction-look .interaction-visual { background: radial-gradient(circle 9rem at var(--interaction-x,72%) var(--interaction-y,42%),rgba(255,237,167,.38),transparent 72%); opacity: .35; transition: opacity .5s; }
.interaction-look.is-active .interaction-visual { opacity: 1; }
.interaction-out-of-step .interaction-visual::before,.interaction-out-of-step .interaction-visual::after { content: ""; position: absolute; inset: 18% 8%; background: radial-gradient(ellipse at var(--interaction-x,50%) var(--interaction-y,50%),rgba(111,128,82,.2),transparent 44%); transition: transform .8s ease; }
.interaction-out-of-step .interaction-visual::before { transform: translateX(-2.5vw); }.interaction-out-of-step .interaction-visual::after { transform: translateX(2.5vw) rotate(3deg); }
.interaction-out-of-step.is-active .interaction-visual::before,.interaction-out-of-step.is-active .interaction-visual::after { transform: none; }

.interaction-map { right: 10%; top: 27%; }
.interaction-map .interaction-visual { display: grid; grid-template-columns: repeat(2,1fr); gap: 38%; padding: 20%; }
.interaction-map .interaction-visual::before { content: ""; position: absolute; inset: 18%; border: 1px dashed rgba(49,73,57,.2); border-radius: 48% 52% 60% 40%; transform: rotate(-12deg); }
.interaction-map i { position: relative; width: .65rem; height: .65rem; border-radius: 50%; background: rgba(63,91,66,.15); transition: background .5s,transform .5s; }
.interaction-map i.is-lit { background: #607b61; transform: scale(1.3); }

.interaction-whole { right: 15%; top: 28%; }
.interaction-whole .interaction-visual::before { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(58,84,62,.48); border-radius: 50%; clip-path: polygon(0 0,100% 0,100% 43%,65% 45%,53% 61%,100% 67%,100% 100%,0 100%); transition: clip-path 1s ease; }
.interaction-whole .interaction-visual::after { content: ""; position: absolute; left: 57%; top: 45%; width: 2px; height: 30%; background: #6b8665; opacity: 0; transform: scaleY(.1) rotate(18deg); transform-origin: bottom; transition: opacity .7s,transform 1.4s cubic-bezier(.16,1,.3,1); }
.interaction-whole.is-active .interaction-visual::before { opacity: .45; }.interaction-whole.is-active .interaction-visual::after { opacity: 1; transform: scaleY(1) rotate(18deg); }

.interaction-upward { right: 10%; top: 20%; }
.interaction-upward .interaction-visual::before,.interaction-upward .interaction-visual::after { content: ""; position: absolute; bottom: 2%; width: 2px; height: 88%; background: linear-gradient(#5f7c61,rgba(81,105,80,.16)); transform: scaleY(.32); transform-origin: bottom; transition: transform 2s cubic-bezier(.16,1,.3,1); }
.interaction-upward .interaction-visual::before { left: 38%; rotate: -8deg; }.interaction-upward .interaction-visual::after { right: 38%; rotate: 9deg; }
.interaction-upward.is-active .interaction-visual::before,.interaction-upward.is-active .interaction-visual::after { transform: scaleY(1); }

.interaction-envelope { z-index: 4; left: 50%; right: auto; top: 52%; width: min(34rem,58vw); height: min(20rem,36vh); transform: translate(-50%,-50%); }
.interaction-envelope:active { transform: translate(-50%,-50%) scale(.985); }
.interaction-envelope .interaction-hint { bottom: -3rem; }
.envelope-scene { transition: transform 1s cubic-bezier(.16,1,.3,1); }
.envelope-open .envelope-scene { transform: translateY(4vh) scale(.97); }
.envelope-open .letter-sheet { transform: translateY(-12%) rotate(-1deg); transition: transform 1.3s cubic-bezier(.16,1,.3,1); }

.main-kv-page .interaction-journey { inset: 22% 4% 16%; width: auto; height: auto; border-radius: 0; }
.main-kv-page .interaction-journey .interaction-hint { bottom: 0; }
.kv-chapters li.journey-lit strong { color: #244c37; transform: translateY(-.18rem); transition: color .5s,transform .5s; }
.kv-chapters li.journey-lit::after { opacity: .78; }
.cover .page-image { transform: translate3d(calc(var(--wind-x,0) * .55rem),calc(var(--wind-y,0) * .35rem),0) scale(1.04); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.boundary-clear .exhibit-veil { opacity: .08; filter: blur(0); transition: opacity 1.2s ease,filter 1.2s ease; }

@keyframes response-pulse { 0% { box-shadow: 0 0 0 0 rgba(92,124,91,.28); } 100% { box-shadow: 0 0 0 2.4rem rgba(92,124,91,0); } }

@media (max-width: 640px) {
  .page-interaction:not(.interaction-look):not(.interaction-out-of-step):not(.interaction-journey):not(.interaction-envelope) { right: 1.2rem; top: 6.3rem; width: 7.5rem; height: 7.5rem; opacity: .82; }
  .page-interaction .interaction-hint { font-size: .56rem; }
  .interaction-distance,.interaction-time { width: 11rem !important; height: 4rem !important; }
  .interaction-envelope { width: 88vw; height: 42vh; }
  .main-kv-page .interaction-journey { inset: 28% .6rem 18%; }
  .interaction-look .interaction-hint,.interaction-out-of-step .interaction-hint { right: 1rem; bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-interaction *, .page-interaction *::before, .page-interaction *::after { animation: none !important; transition-duration: .01ms !important; }
  .interaction-hint { opacity: 1 !important; }
}

/* v37：互动与原画元素对齐。 */
.journey-autoplay .kv-chapters li { animation: kv-node-enter .9s ease forwards, life-node 2.4s ease forwards; }
.journey-autoplay .kv-chapters li:nth-child(1) { animation-delay: .3s,.3s; }
.journey-autoplay .kv-chapters li:nth-child(2) { animation-delay: 2.7s,2.7s; }
.journey-autoplay .kv-chapters li:nth-child(3) { animation-delay: 5.1s,5.1s; }
.journey-autoplay .kv-chapters li:nth-child(4) { animation-delay: 7.5s,7.5s; }
.journey-autoplay .kv-chapters li:nth-child(5) { animation-delay: 9.9s,9.9s; }
.kv-chapters li:not(:last-child)::before { width: 0; transition: width 1.4s cubic-bezier(.16,1,.3,1),filter .6s ease; }
.journey-autoplay .kv-chapters li:hover::before { width: 82%; filter: contrast(1.5); }
.journey-autoplay .kv-chapters li { pointer-events: auto; }

.prologue-fog { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: rgba(239,241,232,.46); backdrop-filter: blur(5px); -webkit-mask-image: radial-gradient(circle 9rem at var(--interaction-x,72%) var(--interaction-y,42%),transparent 0 34%,#000 78%); mask-image: radial-gradient(circle 9rem at var(--interaction-x,72%) var(--interaction-y,42%),transparent 0 34%,#000 78%); transition: opacity 1.2s ease; }
.pigment.fog-open .prologue-fog { opacity: .72; }
.metaphor-controls button { display: grid; place-items: center; }
.metaphor-controls button i { position: relative; display: block; width: 1.45rem; height: 1.45rem; color: currentColor; }
.metaphor-leaf { border: 1.5px solid currentColor; border-radius: 85% 12% 82% 18%; transform: rotate(-28deg); }
.metaphor-leaf::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: currentColor; transform: rotate(-35deg); }
.metaphor-wind::before,.metaphor-wind::after { content: ""; position: absolute; left: 0; width: 100%; height: .42rem; border-top: 1.5px solid currentColor; border-radius: 50%; }
.metaphor-wind::before { top: .28rem; }.metaphor-wind::after { top: .88rem; width: 72%; left: 20%; }
.metaphor-branch::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: currentColor; transform: rotate(24deg); }
.metaphor-branch::after { content: ""; position: absolute; left: 45%; top: 38%; width: .85rem; height: .75rem; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(16deg); }

.interaction-sprout { right: 16%; top: 17%; width: clamp(10rem,22vw,19rem); height: clamp(13rem,31vw,26rem); }
.interaction-sprout .interaction-visual::before { left: 49%; bottom: 4%; height: 58%; background: linear-gradient(transparent,#587350 30%); }
.interaction-sprout .interaction-visual::after { left: 50%; bottom: 34%; width: 31%; height: 18%; }

.interaction-hold { right: 7%; top: 22%; width: clamp(18rem,33vw,31rem); height: clamp(8rem,16vw,13rem); border: 0; border-radius: 48% 52% 46% 54%; background: rgba(244,241,229,.22); }
.acceptance-ribbon { position: absolute; inset: 15% 2%; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 1.4rem 2rem; background: linear-gradient(96deg,transparent,rgba(247,241,224,.7) 14% 86%,transparent); transform: rotate(-3deg); }
.acceptance-ribbon i { display: block; font-style: normal; font-size: clamp(.72rem,1.15vw,1rem); line-height: 1.8; letter-spacing: .04em; opacity: .08; filter: blur(5px); transition: opacity 1.45s ease,filter 1.45s ease; }
.acceptance-ribbon i:last-child { transition-delay: 2s; }
.interaction-hold.is-active .acceptance-ribbon i:first-child { opacity: .84; filter: blur(0); }
.interaction-hold.is-active .acceptance-ribbon i:last-child { opacity: .78; filter: blur(0); }
.interaction-hold:not(.is-active) .acceptance-ribbon i:first-child { opacity: .24; filter: blur(1.8px); transition-duration: 1.8s; }
.interaction-hold:not(.is-active) .acceptance-ribbon i:last-child { opacity: .15; filter: blur(2.6px); transition-duration: 1.8s; }

.interaction-distance { right: 5%; top: 24%; width: clamp(18rem,38vw,36rem); height: clamp(8rem,17vw,14rem); border: 0; overflow: hidden; }
.film-track { position: absolute; left: 2%; top: 28%; width: 96%; height: 46%; display: grid; grid-template-columns: repeat(3,1fr); border-block: 3px solid rgba(49,63,52,.36); background: repeating-linear-gradient(90deg,rgba(244,238,218,.55) 0 2.7rem,rgba(90,77,55,.14) 2.7rem 2.9rem); clip-path: inset(0 100% 0 0); transition: clip-path 3.6s cubic-bezier(.16,1,.3,1); }
.film-track::before,.film-track::after { content: ""; position: absolute; left: 0; right: 0; height: .28rem; background: repeating-linear-gradient(90deg,rgba(51,56,46,.45) 0 .5rem,transparent .5rem 1.25rem); }
.film-track::before { top: .25rem; }.film-track::after { bottom: .25rem; }
.film-track i { display: grid; place-items: center; opacity: 0; transform: translateY(.4rem); font-style: normal; transition: opacity .7s ease,transform .7s ease; }
.film-track b { font: 400 .68rem/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .08em; }
.interaction-distance.is-active .film-track { clip-path: inset(0); }
.interaction-distance.is-active .film-track i { opacity: 1; transform: none; }
.interaction-distance.is-active .film-track i:nth-child(1) { transition-delay: .9s; }.interaction-distance.is-active .film-track i:nth-child(2) { transition-delay: 1.9s; }.interaction-distance.is-active .film-track i:nth-child(3) { transition-delay: 2.9s; }

.interaction-response { right: 7%; top: 19%; width: clamp(15rem,29vw,27rem); height: clamp(11rem,22vw,20rem); border-radius: 0; }
.response-page .response-effect { display: none; }
.embrace-frame { position: absolute; inset: 8%; display: grid; place-items: center; border: 1px solid rgba(70,71,58,.28); background: rgba(248,245,234,.23); box-shadow: inset 0 0 2rem rgba(80,74,60,.06); transform: rotate(1deg); }
.embrace-frame canvas { width: 100%; height: 100%; filter: url("#none"); }

.interaction-intertwine { inset: 6% 5%; width: auto; height: auto; border-radius: 0; }
.interaction-intertwine .interaction-visual::before,.interaction-intertwine .interaction-visual::after { bottom: auto; width: 44%; height: 34%; }
.interaction-intertwine .interaction-visual::before { left: 4%; top: 1%; transform: rotate(8deg) scaleX(.28); transform-origin: left; }
.interaction-intertwine .interaction-visual::after { right: 5%; bottom: 2%; transform: rotate(-8deg) scaleX(.28); transform-origin: right; }
.interaction-intertwine.is-active .interaction-visual::before,.interaction-intertwine.is-active .interaction-visual::after { transform: rotate(0) scaleX(1); }

.interaction-together { right: 8%; top: 26%; width: clamp(15rem,28vw,25rem); }
.word-us { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; font-size: clamp(2.4rem,5vw,5rem); }
.word-us i,.word-us b { font-style: normal; font-weight: 400; transition: opacity 1s ease,transform 1.8s cubic-bezier(.16,1,.3,1); }
.word-us b { position: absolute; left: 50%; opacity: 0; transform: translateX(-50%) scale(.75); font-size: .65em; }
.interaction-together.is-active .word-us i:first-child { transform: translateX(150%); opacity: 0; }.interaction-together.is-active .word-us i:last-child { transform: translateX(-150%); opacity: 0; }
.interaction-together.is-active .word-us b { opacity: 1; transform: translateX(-50%) scale(1); transition-delay: .85s; }

.interaction-language { right: 6%; top: 20%; width: clamp(18rem,33vw,30rem); height: clamp(14rem,25vw,22rem); }
.shared-symbols { position: absolute; inset: 0; }
.shared-symbols i { position: absolute; display: grid; place-items: center; width: 3.2rem; height: 2rem; border-radius: 48%; background: rgba(246,240,217,.5); font-style: normal; font-size: .66rem; opacity: .34; transition: opacity .65s,filter .65s,transform .65s; }
.shared-symbols i:nth-child(1) { left: 8%; top: 50%; }.shared-symbols i:nth-child(2) { left: 38%; top: 8%; }.shared-symbols i:nth-child(3) { right: 5%; top: 37%; }.shared-symbols i:nth-child(4) { left: 28%; bottom: 5%; }.shared-symbols i:nth-child(5) { right: 19%; bottom: 16%; }
.shared-symbols i.is-lit { opacity: 1; filter: brightness(1.16); transform: scale(1.16); box-shadow: 0 0 2rem rgba(210,176,83,.34); }

.interaction-time { right: 7%; top: 18%; width: clamp(16rem,30vw,27rem); height: clamp(14rem,25vw,22rem); }
.interaction-time label { z-index: 2; inset: auto 5% 0; }
.hourglass { position: absolute; left: 50%; top: 4%; width: 8rem; height: 11rem; transform: translateX(-50%); border-top: 2px solid rgba(61,79,61,.52); border-bottom: 2px solid rgba(61,79,61,.52); }
.hourglass::before,.hourglass::after { content: ""; position: absolute; inset: .7rem 1rem; border: 1px solid rgba(61,79,61,.38); clip-path: polygon(0 0,100% 0,58% 49%,100% 100%,0 100%,42% 49%); }
.hourglass i { position: absolute; left: 50%; top: 47%; width: 2px; height: 4.5rem; background: #ad925b; transform: translateX(-50%) scaleY(var(--time-scale,0)); transform-origin: top; transition: transform .2s linear; }
.hourglass b { position: absolute; right: -2.4rem; bottom: .9rem; font: 400 .62rem/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; opacity: .68; animation: dog-glimmer 2.4s ease-in-out infinite; }

.interaction-two-trees { right: 9%; top: 18%; }
.interaction-two-trees .interaction-hint { bottom: -1rem; }
.falling-leaves { position: absolute; inset: 0; }
.falling-leaves i { position: absolute; top: 2%; width: 2.5rem; height: 1.35rem; border: 1px solid rgba(65,94,64,.52); border-radius: 85% 15% 80% 20%; opacity: 0; }
.falling-leaves i:first-child { left: 23%; transform: rotate(-28deg); }.falling-leaves i:last-child { right: 23%; transform: rotate(28deg); }
.interaction-two-trees.is-active .falling-leaves i:first-child { animation: leaf-fall-left 4.8s ease-in forwards; }.interaction-two-trees.is-active .falling-leaves i:last-child { animation: leaf-fall-right 5.3s .4s ease-in forwards; }

.translation-effect { touch-action: none; }
.translation-effect span { transform: translateX(var(--translation-drag,0px)); }
.translation-page.translation-left .translation-effect span:first-child { opacity: 1; transform: translateX(calc(var(--translation-drag,0px) - 1rem)) scale(1.04); }
.translation-page.translation-left .translation-effect span:last-child { opacity: .22; }
.translation-page.translation-right .translation-effect span:last-child { opacity: 1; transform: translateX(calc(var(--translation-drag,0px) + 1rem)) scale(1.04); }
.translation-page.translation-right .translation-effect span:first-child { opacity: .22; }

.interaction-whole .interaction-visual::before { transform: translate(var(--seed-x,0),var(--seed-y,0)); }
.interaction-whole .interaction-visual::after { transform: translate(var(--seed-x,0),var(--seed-y,0)) scaleY(.1) rotate(18deg); }
.interaction-whole.is-active .interaction-visual::before { transform: translate(22%,-8%) scale(.4); opacity: 0; transition: transform .8s ease,opacity .8s; }
.interaction-whole.is-active .interaction-visual::after { transform: translate(0,0) scaleY(1) rotate(18deg); }

.interaction-fork { pointer-events: none; }
.interaction-fork .interaction-visual { background: radial-gradient(circle 7rem at var(--interaction-x,50%) var(--interaction-y,42%),rgba(233,222,166,.24),transparent 72%); }
.interaction-fork .interaction-visual::before,.interaction-fork .interaction-visual::after { transform: scaleY(1); }

.new-growth-narration.letter-open::before { animation: room-darken 55s linear forwards; }
.memoir-letter::after { content: ""; position: absolute; right: 2%; top: 4%; width: 2.5rem; height: 1.1rem; background: rgba(217,219,201,.3); border-radius: 90% 12% 80% 20%; animation: paper-wind 7s ease-in-out infinite; pointer-events: none; }
.ending-page.narrative-active .ending-copy { opacity: .5; transform: translateY(2rem); transition: opacity 2s,transform 2s; }
.ending-page.narrative-active .separate-trunks { transform: translateY(-12%); transition: transform 2.2s cubic-bezier(.16,1,.3,1); }

.envelope-open .interaction-envelope { pointer-events: none; opacity: 0; transition: opacity .5s; }
.blank-form { display: none; margin-top: 1rem; text-align: left; }
.envelope-open .blank-form { display: grid; gap: .55rem; }
.blank-form label,.blank-form small { color: var(--muted); font: .62rem/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .08em; }
.blank-form textarea { width: 100%; resize: none; padding: .6rem 0; border: 0; border-block: 1px solid rgba(42,62,50,.16); background: transparent; color: var(--ink); font: 1rem/1.7 "Kaiti SC","STKaiti","KaiTi",serif; outline: none; }
.blank-form button { justify-self: end; padding: .4rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-size: .66rem; }
.envelope-open .letter-sheet { z-index: 5; }

@keyframes life-node { 0% { filter: brightness(.86); } 35%,82% { filter: brightness(1.22); text-shadow: 0 0 1.2rem rgba(87,120,80,.28); } 100% { filter: brightness(1); } }
@keyframes dog-glimmer { 0%,100% { filter: brightness(.85); transform: translateY(0); } 50% { filter: brightness(1.35); transform: translateY(-.18rem); } }
@keyframes leaf-fall-left { 0% { opacity: 0; transform: translate(0,-1rem) rotate(-28deg); } 18% { opacity: .8; } 100% { opacity: .25; transform: translate(4rem,12rem) rotate(190deg); } }
@keyframes leaf-fall-right { 0% { opacity: 0; transform: translate(0,-1rem) rotate(28deg); } 18% { opacity: .8; } 100% { opacity: .25; transform: translate(-4rem,12rem) rotate(-190deg); } }
@keyframes room-darken { from { background-color: rgba(248,246,239,0); } to { background-color: rgba(42,54,45,.32); } }
@keyframes paper-wind { 0%,100% { transform: translate(0,0) rotate(-8deg); opacity: .24; } 50% { transform: translate(-1.5rem,.4rem) rotate(18deg); opacity: .5; } }

@media (max-width:640px) {
  .acceptance-ribbon { padding: 1rem; }.acceptance-ribbon i { font-size: .68rem; }
  .interaction-response { width: 9rem !important; height: 7rem !important; }
  .interaction-language { width: 10rem !important; height: 9rem !important; }
  .shared-symbols i { width: 2.2rem; height: 1.5rem; font-size: .52rem; }
  .hourglass { width: 4.5rem; height: 6rem; }.hourglass b { right: -1.5rem; }
  .blank-form textarea { font-size: .9rem; }
}

/* v42：共同记忆、静态寻找与新版尾页。 */
.interaction-hold { left: 61%; right: auto; top: 42%; bottom: auto; width: 28%; height: 22%; }
.acceptance-ribbon { padding: 1rem 1.4rem; transform: rotate(-2deg); }
.acceptance-ribbon i { text-shadow: 0 1px 1rem rgba(255,253,238,.9); }

.shared-symbols i { width: auto; min-width: 3.2rem; padding: 0 .75rem; white-space: nowrap; }
.shared-symbols i:nth-child(1) { left: 3%; top: 48%; }.shared-symbols i:nth-child(2) { left: 31%; top: 7%; }.shared-symbols i:nth-child(3) { right: 1%; top: 31%; }
.shared-symbols i:nth-child(4) { left: 18%; bottom: 4%; }.shared-symbols i:nth-child(5) { right: 25%; bottom: 10%; }.shared-symbols i:nth-child(6) { left: 4%; top: 17%; }.shared-symbols i:nth-child(7) { right: 1%; bottom: 35%; }
.shared-symbols i:nth-child(1).is-lit { transition-delay: 0s; }.shared-symbols i:nth-child(2).is-lit { transition-delay: .16s; }.shared-symbols i:nth-child(3).is-lit { transition-delay: .32s; }
.shared-symbols i:nth-child(4).is-lit { transition-delay: .48s; }.shared-symbols i:nth-child(5).is-lit { transition-delay: .64s; }.shared-symbols i:nth-child(6).is-lit { transition-delay: .8s; }.shared-symbols i:nth-child(7).is-lit { transition-delay: .96s; }

.mutual-growth-page .interaction-two-trees,
.map-page .interaction-trajectories,
.map-page .map-effect { display: none !important; }

.ending-page .separate-trunks { display: none; }
.ending-page::before { background: linear-gradient(90deg,rgba(247,244,232,.94),rgba(247,244,232,.6) 39%,rgba(247,244,232,.08) 70%); }
.ending-page .page-image { opacity: .9; filter: saturate(.72) contrast(.94); }
.ending-page .ending-copy { max-width: 27rem; }

@media (max-width:640px) {
  .interaction-hold { left: auto; right: 1rem; top: 42%; width: calc(100% - 2rem); height: 7rem; }
  .shared-symbols i { min-width: 2.2rem; padding: 0 .4rem; }
  .ending-page .page-image { background-position: 62% center; }
}

/* v41：底图贴合与封存备忘录。 */
.interaction-hold { right: 4%; bottom: 16%; height: clamp(8rem,15vw,12rem); border: 0; background: none; box-shadow: none !important; }
.acceptance-ribbon { inset: 0; padding: 1.6rem 2.8rem; background: none; transform: rotate(-2deg); }
.interaction-hold.is-active { background: none; }

.interaction-response { left: 56%; right: auto; top: 38%; width: 29%; height: 31%; }
.embrace-frame { border-color: rgba(78,73,53,.28); box-shadow: inset 0 0 2rem rgba(80,74,60,.04); }

.falling-leaves i { top: -8%; }
.falling-leaves i:nth-child(1) { left: 7%; }.falling-leaves i:nth-child(2) { left: 22%; }.falling-leaves i:nth-child(3) { left: 38%; }.falling-leaves i:nth-child(4) { left: 52%; }
.falling-leaves i:nth-child(5) { left: 67%; }.falling-leaves i:nth-child(6) { left: 80%; }.falling-leaves i:nth-child(7) { left: 44%; }
.interaction-two-trees.is-active .falling-leaves i { animation: leaf-wind-fall 6.4s cubic-bezier(.3,.05,.55,1) forwards; }
.interaction-two-trees.is-active .falling-leaves i:nth-child(2) { animation-delay: .35s; }.interaction-two-trees.is-active .falling-leaves i:nth-child(3) { animation-delay: .8s; }
.interaction-two-trees.is-active .falling-leaves i:nth-child(4) { animation-delay: 1.15s; }.interaction-two-trees.is-active .falling-leaves i:nth-child(5) { animation-delay: 1.65s; }
.interaction-two-trees.is-active .falling-leaves i:nth-child(6) { animation-delay: 2.05s; }.interaction-two-trees.is-active .falling-leaves i:nth-child(7) { animation-delay: 2.5s; }

.memory-key { position: absolute; z-index: 8; right: clamp(2rem,7vw,7rem); bottom: clamp(5.5rem,11vh,8rem); width: 4.4rem; height: 4.4rem; padding: 0; border: 1px solid rgba(53,70,57,.25); border-radius: 50%; background: rgba(244,242,232,.72); cursor: pointer; backdrop-filter: blur(8px); }
.memory-key i { position: absolute; left: 1rem; top: 1.1rem; width: 1.25rem; height: 1.25rem; border: 2px solid #60715f; border-radius: 50%; transform: rotate(-36deg); }
.memory-key i::before { content: ""; position: absolute; left: .95rem; top: .48rem; width: 1.55rem; height: 2px; background: #60715f; }
.memory-key i::after { content: ""; position: absolute; left: 1.9rem; top: .5rem; width: .42rem; height: .55rem; border-left: 2px solid #60715f; border-bottom: 2px solid #60715f; }
.memory-key:hover { background: rgba(230,232,217,.92); transform: rotate(5deg); transition: transform .4s ease,background .4s; }

.memory-lock,.memory-memo { position: fixed; z-index: 32; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility .6s; }
.memory-lock.open,.memory-memo.open { opacity: 1; visibility: visible; transform: none; }
.memory-lock { left: 50%; top: 50%; width: min(28rem,calc(100vw - 2rem)); padding: 3rem; background: rgba(246,244,235,.97); border: 1px solid rgba(47,66,52,.18); box-shadow: 0 2rem 7rem rgba(36,48,40,.22); transform: translate(-50%,calc(-50% + 1rem)); backdrop-filter: blur(18px); }
.memory-lock.open { transform: translate(-50%,-50%); }
.memory-lock > p { margin: 0 0 .8rem; color: var(--muted); font: .65rem/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .1em; }
.memory-lock h2 { margin: 0 0 2rem; font-size: 2rem; font-weight: 400; }
.memory-lock form { display: grid; gap: .75rem; }
.memory-lock label { color: var(--muted); font: .65rem/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.memory-lock input { padding: .8rem 0; border: 0; border-bottom: 1px solid rgba(46,67,52,.32); background: transparent; color: var(--ink); font-size: 1.2rem; letter-spacing: .22em; outline: none; }
.memory-lock form button { justify-self: start; margin-top: .6rem; padding: .55rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-size: .72rem; }
.memory-lock small { min-height: 1.2rem; color: #8b5a4c; }
.memory-close { position: absolute; right: 1.3rem; top: 1rem; border: 0; background: none; cursor: pointer; font-size: 1.5rem; }

.memory-memo { inset: 4.5rem clamp(1rem,6vw,6rem) 4.5rem; display: grid; grid-template-rows: auto minmax(0,1fr); padding: clamp(1.4rem,3vw,3rem) clamp(1.2rem,5vw,5rem); background: rgba(246,244,235,.98); border: 1px solid rgba(47,66,52,.15); box-shadow: 0 2rem 8rem rgba(36,48,40,.24); backdrop-filter: blur(20px); }
.memory-memo header { position: relative; padding: 0 3rem 1.4rem 0; border-bottom: 1px solid rgba(44,65,50,.18); }
.memory-memo header p { margin: 0 0 .5rem; color: var(--muted); font: .65rem/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .16em; }
.memory-memo h2 { margin: 0; font-size: clamp(1.8rem,3vw,3rem); font-weight: 400; }
.memory-memo ol { margin: 0; padding: 2rem clamp(.2rem,3vw,3rem) 6rem; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(43,63,49,.22) transparent; }
.memory-memo li { display: grid; grid-template-columns: 2.8rem minmax(0,1fr); gap: 1rem; max-width: 58rem; margin: 0 auto 1.8rem; }
.memory-memo li > span { padding-top: .25rem; color: rgba(44,64,50,.48); font: .62rem/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: .1em; }
.memory-memo li p { margin: 0; white-space: pre-line; font-size: clamp(.92rem,1.35vw,1.12rem); line-height: 1.9; }

@keyframes leaf-wind-fall {
  0% { opacity: 0; transform: translate(-1rem,-2rem) rotate(-25deg); }
  14% { opacity: .82; }
  42% { transform: translate(2.4rem,5rem) rotate(75deg); }
  72% { opacity: .62; transform: translate(-1.2rem,10rem) rotate(160deg); }
  100% { opacity: 0; transform: translate(4rem,17rem) rotate(275deg); }
}

@media (max-width:640px) {
  .interaction-hold { bottom: 39%; }.acceptance-ribbon { padding: .6rem .8rem; }
  .interaction-response { left: auto; right: 1rem; top: 9.5rem; width: 10rem; height: 7rem; }
  .memory-key { right: 1.2rem; bottom: 5.2rem; width: 3.6rem; height: 3.6rem; }
  .memory-key i { left: .7rem; top: .8rem; }
  .memory-lock { padding: 2rem; }
  .memory-memo { inset: 4.2rem .65rem 4.5rem; padding: 1.2rem .9rem; }
  .memory-memo li { grid-template-columns: 2rem minmax(0,1fr); gap: .5rem; }
}

/* v38：寻找、新柯与封底叙事调整。 */
.leaf-light-effect { inset: 6% 3% 54% 46%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 42% 38%,rgba(255,246,189,.62),rgba(236,216,142,.14) 32%,transparent 68%); }
.leaf-light-effect i { position: absolute; width: 7rem; height: 3.8rem; border-radius: 86% 14% 82% 18%; border: 1px solid rgba(59,91,56,.42); background: linear-gradient(145deg,rgba(95,132,76,.32),rgba(213,215,150,.13)); box-shadow: inset .8rem .4rem 1.5rem rgba(56,91,51,.1); transform-origin: 10% 50%; animation: leaf-light-sway 6s ease-in-out infinite alternate; }
.leaf-light-effect i::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(69,101,63,.32); transform: rotate(-23deg); }
.leaf-light-effect i:nth-child(1) { left: 4%; top: 13%; transform: rotate(-24deg); }.leaf-light-effect i:nth-child(2) { left: 33%; top: 30%; transform: rotate(12deg); animation-delay: -1.4s; }
.leaf-light-effect i:nth-child(3) { right: 2%; top: 9%; transform: rotate(34deg); animation-delay: -2.8s; }.leaf-light-effect i:nth-child(4) { right: 18%; bottom: 4%; transform: rotate(-9deg); animation-delay: -4.1s; }
.leaf-light-effect b { position: absolute; inset: 0; background: radial-gradient(circle 4rem at 34% 32%,rgba(255,253,221,.92),transparent 75%); mix-blend-mode: screen; animation: sun-through-leaves 7s ease-in-out infinite alternate; }

.interaction-map { right: 5%; top: 18%; width: clamp(18rem,34vw,31rem); height: clamp(15rem,27vw,24rem); border-radius: 0; }
.map-people { position: absolute; inset: 6%; border: 1px solid rgba(80,83,60,.2); background: linear-gradient(8deg,rgba(245,239,215,.35),rgba(249,246,232,.12)); transform: rotate(-1deg); overflow: hidden; }
.map-people::before,.map-people::after { content: ""; position: absolute; top: 10%; bottom: 10%; width: 44%; background: repeating-linear-gradient(12deg,transparent 0 1.8rem,rgba(91,92,63,.08) 1.8rem 1.86rem); }
.map-people::before { left: 3%; }.map-people::after { right: 3%; transform: rotate(180deg); }
.map-people b { position: absolute; z-index: 2; top: 8%; font: 400 .68rem/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.map-people b:first-child { left: 8%; }.map-people b:nth-child(2) { right: 8%; }
.map-people i { position: absolute; z-index: 2; width: 34%; height: 22%; border-top: 2px solid #758565; border-radius: 50%; opacity: 0; transform: scaleX(.1); transition: opacity .7s,transform 1.3s cubic-bezier(.16,1,.3,1); }
.map-people i:nth-of-type(1) { left: 8%; top: 28%; transform-origin: left; }.map-people i:nth-of-type(2) { left: 14%; top: 56%; border-color: #9a774c; transform-origin: left; transform: rotate(18deg) scaleX(.1); }
.map-people i:nth-of-type(3) { right: 8%; top: 31%; border-color: #9a774c; transform-origin: right; }.map-people i:nth-of-type(4) { right: 14%; top: 59%; transform-origin: right; transform: rotate(-18deg) scaleX(.1); }
.map-people i.is-lit { opacity: .9; transform: scaleX(1); }.map-people i:nth-of-type(2).is-lit { transform: rotate(18deg) scaleX(1); }.map-people i:nth-of-type(4).is-lit { transform: rotate(-18deg) scaleX(1); }

.interaction-whole { right: 7%; top: 18%; width: clamp(18rem,33vw,30rem); height: clamp(15rem,27vw,24rem); border-radius: 0; perspective: 900px; }
.closing-book { position: absolute; inset: 7%; display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 1.3rem 2rem rgba(58,63,48,.14)); }
.closing-book > i { position: relative; display: block; background: rgba(248,244,228,.86); border: 1px solid rgba(72,70,52,.2); transform-origin: center right; transition: transform 2.2s cubic-bezier(.16,1,.3,1),filter 1.5s; }
.closing-book > i:last-child { transform-origin: center left; }
.closing-book b { position: absolute; left: 30%; top: 24%; width: 3.8rem; height: 2rem; border: 1px solid rgba(67,98,63,.5); border-radius: 86% 14% 82% 18%; opacity: 0; animation: book-leaf-appear 2.5s ease forwards; }
.closing-book > i:last-child b { left: 24%; top: 52%; transform: rotate(28deg); animation-delay: .7s; }
.interaction-whole.is-active .closing-book > i:first-child { transform: rotateY(-89deg); }.interaction-whole.is-active .closing-book > i:last-child { transform: rotateY(89deg); }
.interaction-whole.is-active .closing-book { filter: drop-shadow(0 .4rem .8rem rgba(58,63,48,.08)); transition: filter 2s; }

.interaction-fork { right: 6%; top: 10%; width: clamp(20rem,38vw,36rem); height: clamp(24rem,48vw,43rem); }
.interaction-fork .interaction-visual > i { position: absolute; bottom: 0; width: 2px; height: 76%; background: linear-gradient(#5f7c61,rgba(81,105,80,.2)); transform: scaleY(.05); transform-origin: bottom; animation: fork-grow 3.2s .5s cubic-bezier(.16,1,.3,1) forwards; }
.interaction-fork .interaction-visual > i:first-child { left: 50%; rotate: -18deg; }.interaction-fork .interaction-visual > i:nth-child(2) { right: 50%; rotate: 18deg; }
.interaction-fork .interaction-visual > b { position: absolute; width: 2.1rem; height: 1.15rem; border-radius: 85% 15% 82% 18%; background: rgba(95,128,80,.45); opacity: 0; animation: fork-leaf 1.2s ease forwards; }
.interaction-fork .interaction-visual > b:nth-of-type(1) { left: 23%; top: 23%; animation-delay: 2.2s; }.interaction-fork .interaction-visual > b:nth-of-type(2) { left: 32%; top: 38%; animation-delay: 2.8s; }
.interaction-fork .interaction-visual > b:nth-of-type(3) { left: 39%; top: 52%; animation-delay: 3.4s; }.interaction-fork .interaction-visual > b:nth-of-type(4) { right: 23%; top: 23%; animation-delay: 2.5s; transform: rotate(35deg); }
.interaction-fork .interaction-visual > b:nth-of-type(5) { right: 32%; top: 38%; animation-delay: 3.1s; transform: rotate(28deg); }.interaction-fork .interaction-visual > b:nth-of-type(6) { right: 39%; top: 52%; animation-delay: 3.7s; transform: rotate(24deg); }

.ending-autoplay::after { background: linear-gradient(105deg,transparent 15%,rgba(226,235,215,.5) 46%,transparent 72%); animation: ending-wind 3.2s 1.2s ease-out both; }
.ending-autoplay .separate-trunks { animation: ending-trunks-grow 5.2s 1.8s cubic-bezier(.16,1,.3,1) forwards; transform-origin: bottom; }
.ending-autoplay .ending-copy { animation: ending-copy-stay 5.2s 1.8s ease forwards; }

.back-cover .letter-sheet { opacity: 0; transform: translateY(38%) rotate(-1deg); transition: opacity .7s ease,transform 1.8s cubic-bezier(.16,1,.3,1); }
.back-cover .envelope-flap { transform: translateY(0) rotateX(0); transition: transform 1.5s cubic-bezier(.16,1,.3,1); }
.envelope-open .envelope-flap { transform: translateY(-99%) rotateX(180deg); }
.envelope-open .letter-sheet { opacity: 1; transform: translateY(-12%) rotate(-1deg); transition-delay: .55s; }
.envelope-open .envelope-caption { opacity: 0; transition: opacity .5s; }

@keyframes leaf-light-sway { from { translate: -.2rem .1rem; filter: brightness(.92); } to { translate: .35rem -.2rem; filter: brightness(1.12); } }
@keyframes sun-through-leaves { from { transform: translate(-1rem,-.5rem) scale(.9); opacity: .38; } to { transform: translate(5rem,2rem) scale(1.18); opacity: .84; } }
@keyframes book-leaf-appear { 0% { opacity: 0; transform: translateY(-1rem) rotate(-18deg); } 45%,82% { opacity: .8; } 100% { opacity: .65; transform: translateY(0) rotate(4deg); } }
@keyframes fork-grow { to { transform: scaleY(1); } }
@keyframes fork-leaf { from { opacity: 0; scale: .2; } to { opacity: .74; scale: 1; } }
@keyframes ending-wind { 0% { opacity: 0; transform: translateX(-18%); } 35% { opacity: .72; } 100% { opacity: 0; transform: translateX(28%); } }
@keyframes ending-trunks-grow { from { transform: translateY(24%) scaleY(.72); } to { transform: translateY(-13%) scaleY(1.08); } }
@keyframes ending-copy-stay { 0%,58% { opacity: 1; transform: none; } 100% { opacity: .46; transform: translateY(2rem); } }

@media (max-width:640px) {
  .leaf-light-effect { inset: 7% 2% 61% 30%; }
  .interaction-map,.interaction-whole { width: 10rem !important; height: 9rem !important; }
  .interaction-fork { width: 12rem !important; height: 17rem !important; top: 12% !important; }
}

/* v39：按页取消动效并重新布置接纳、回应与新柯。 */
.journey-page .journey-effect,
.journey-page .interaction-distance,
.companionship-page .time-effect,
.companionship-page .interaction-time,
.wholeness-page .wholeness-effect,
.wholeness-page .interaction-whole { display: none !important; }

.interaction-hold { top: auto; right: 4%; bottom: 17%; width: clamp(20rem,35vw,33rem); }
.acceptance-ribbon { inset: 8% 1%; }

.interaction-response { right: 3%; top: 46%; width: clamp(16rem,27vw,25rem); height: clamp(11rem,18vw,17rem); }
.embrace-frame { inset: 0; overflow: hidden; background: rgba(244,235,207,.55); }
.embrace-frame img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.68) contrast(.9) blur(1.2px); transform: scale(1.04); transition: opacity 1.4s ease,filter 1.8s ease,transform 2.2s cubic-bezier(.16,1,.3,1); }
.interaction-response.sand-revealed .embrace-frame img { opacity: .96; filter: saturate(.76) contrast(.96) blur(0); transform: scale(1); }
.interaction-response .interaction-hint { bottom: -2.2rem; }

.interaction-trajectories { right: 3%; top: 38%; width: clamp(18rem,34vw,32rem); height: clamp(9rem,15vw,14rem); border-radius: 0; pointer-events: none; }
.interaction-trajectories > span:last-child { position: absolute; inset: 18% 2%; overflow: hidden; }
.interaction-trajectories i { position: absolute; left: -6%; top: 48%; width: 112%; height: 2px; background: linear-gradient(90deg,transparent,#71846b 12% 88%,transparent); transform-origin: center; }
.interaction-trajectories i:first-child { animation: trajectory-one 9s ease-in-out infinite; }
.interaction-trajectories i:last-child { background: linear-gradient(90deg,transparent,#a0855d 12% 88%,transparent); animation: trajectory-two 9s ease-in-out infinite; }
.interaction-trajectories .interaction-hint { bottom: -.5rem; }

.new-growth .interaction-fork { display: none !important; }
.new-growth .page-image { animation: new-growth-map-zoom 18s cubic-bezier(.16,1,.3,1) forwards; transform-origin: 54% 48%; }

.ending-page .separate-trunks { animation: none !important; transform: none !important; }
.ending-page .ending-copy p { opacity: 0; transform: translateY(.8rem); animation: ending-line-rise 1.3s cubic-bezier(.16,1,.3,1) forwards; }
.ending-page .ending-copy p:nth-child(1) { animation-delay: .5s; }.ending-page .ending-copy p:nth-child(2) { animation-delay: 2s; }
.ending-page .ending-copy p:nth-child(3) { animation-delay: 3.5s; }.ending-page .ending-copy p:nth-child(4) { animation-delay: 5s; }
.ending-page::after { background: none; animation: none; }

@keyframes trajectory-one {
  0% { transform: translateY(-2.6rem) rotate(9deg); }
  28% { transform: translateY(.35rem) rotate(-2deg); }
  43%,64% { transform: translateY(-.45rem) rotate(0); }
  100% { transform: translateY(-2.8rem) rotate(-9deg); }
}
@keyframes trajectory-two {
  0% { transform: translateY(2.6rem) rotate(-9deg); }
  28% { transform: translateY(-.35rem) rotate(2deg); }
  43%,64% { transform: translateY(.45rem) rotate(0); }
  100% { transform: translateY(2.8rem) rotate(9deg); }
}
@keyframes new-growth-map-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes ending-line-rise { to { opacity: 1; transform: none; } }

@media (max-width:640px) {
  .interaction-hold { right: 1rem; bottom: 38%; width: calc(100% - 2rem) !important; height: 7rem !important; }
  .interaction-response { right: 1rem; top: 7rem; width: 10rem !important; height: 7rem !important; }
  .interaction-trajectories { right: 1rem; top: 7rem; width: 11rem !important; height: 7rem !important; }
}

/* v46：接纳文字承托、回应相框与“昭己”版式收口。 */
.acceptance-page .interaction-hold { right: 6%; bottom: 19%; width: clamp(21rem,34vw,32rem); }
.acceptance-page .acceptance-ribbon {
  inset: 9% -4%;
  padding: 1.3rem 3rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(96deg,transparent 0%,rgba(248,244,228,.24) 9%,rgba(248,244,228,.62) 29%,rgba(248,244,228,.6) 70%,rgba(248,244,228,.2) 92%,transparent 100%);
  box-shadow: none;
  clip-path: polygon(0 31%,11% 18%,34% 23%,61% 8%,100% 18%,96% 72%,70% 82%,39% 69%,9% 91%,0 75%);
  transform: rotate(-2.6deg);
  backdrop-filter: blur(2px);
}
.acceptance-page .interaction-hold.is-active .acceptance-ribbon i { color: #293b31; opacity: .94; text-shadow: 0 1px .5rem rgba(255,255,255,.9); }
.response-page .interaction-response { left: 52.2%; right: auto; top: 15%; width: 33.6%; height: 61%; border: 0; background: none; }
.response-page .embrace-frame { inset: 7% 6% 6%; border: 0; box-shadow: none; transform: none; }
.interaction-response .embrace-frame img { object-position: center 54%; }
.mutual-growth-page .reading-sheet { width: min(34rem,43vw); }

/* 第十页：三个关键词保持静态。 */
.us-page .shared-light span:first-child,
.us-page .shared-light span:last-child,
.us-page[data-reading-layer="1"] .shared-light span:first-child,
.us-page[data-reading-layer="1"] .shared-light span:last-child,
.us-page[data-reading-layer="2"] .shared-light span:first-child,
.us-page[data-reading-layer="2"] .shared-light span:last-child { opacity: .27; transform: none; }
.us-page .shared-light span:nth-child(2),
.us-page[data-reading-layer="1"] .shared-light span:nth-child(2),
.us-page[data-reading-layer="2"] .shared-light span:nth-child(2) { opacity: .62; transform: none; filter: none; animation: none; }

@media (max-width:640px) {
  .acceptance-page .interaction-hold { right: 1rem; bottom: 38%; width: calc(100% - 2rem); }
  .acceptance-page .acceptance-ribbon { padding: .8rem 1rem; }
  .mutual-growth-page .reading-sheet { width: 100%; }
  .response-page .interaction-response { left: auto; right: 1rem; top: 7rem; width: 10rem; height: 7rem; }
  .response-page .embrace-frame { inset: 0; }
}