/* =========================================================
   一百个红点 · 滚动叙事
   每个 .scene 是一段很长的滚动距离，里面的 .stage 吸顶。
   JS 把本章进度写进 --p (0→1)，把每个文字块的进度写进 --q。
   ========================================================= */

:root {
  --ink: #1d1712;
  --paper: #f2e8d2;
  --cream: #f6efe2;
  --red: #d2402f;
  --blue-ink: #2b3f6e;
  /* 本机装了猴尊宋体 / 江西拙楷，其它设备回退到系统宋体、楷体 */
  --serif: "猴尊宋体", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --hand: "江西拙楷", "KaiTi", "STKaiti", "Kaiti SC", "楷体", serif;
  --sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0b1020; }
body {
  color: var(--cream);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.scene { position: relative; height: calc(var(--h) * 1vh); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }

/* 滚动驱动的渐显：data-t="开始,结束[,淡出开始,淡出结束]" */
[data-t] {
  opacity: var(--q, 0);
  transform: translate3d(0, calc((1 - var(--q, 0)) * 18px), 0);
}

/* 首屏自动入场 */
.intro { opacity: 0; animation: intro 1.6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
@keyframes intro {
  from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 全局覆盖层 ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: rgba(255,255,255,.06); }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

.sound {
  position: fixed; top: 18px; right: 22px; z-index: 85;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; letter-spacing: .12em;
  color: #fff; background: rgba(20, 18, 26, .38);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .3s, border-color .3s;
}
.sound:hover { background: rgba(20, 18, 26, .6); }
.sound:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }
.sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.sound.on .sound-bars i { animation: bar 1s ease-in-out infinite; }
.sound.on .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.sound.on .sound-bars i:nth-child(3) { animation-delay: -.6s; }
.sound.on .sound-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bar { 0%, 100% { height: 3px; } 50% { height: 14px; } }

.chapters {
  position: fixed; right: 22px; top: 50%; z-index: 80; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
}
.chapters a {
  position: relative; display: block; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.15);
  transition: background .3s, transform .3s;
}
.chapters a span {
  position: absolute; right: 20px; top: 50%; transform: translate(6px, -50%);
  white-space: nowrap; font-family: var(--sans); font-size: 12px; letter-spacing: .2em;
  color: #fff; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.chapters a:hover span, .chapters a:focus-visible span, .chapters a.on span { opacity: 1; transform: translate(0, -50%); }
.chapters a.on { background: var(--red); border-color: var(--red); transform: scale(1.35); }
.chapters a:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }

.chapter-tag {
  position: absolute; top: 8vh; left: 0; right: 0; z-index: 6; text-align: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: .55em; color: rgba(246,239,226,.62);
}
.chapter-tag.static { position: static; text-align: left; margin-bottom: .6em; }

/* =========================================================
   01 夜
   ========================================================= */
.s-night .stage { background: radial-gradient(130% 90% at 50% 100%, #1d2650 0%, #0d1431 45%, #060915 100%); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon {
  position: absolute; top: 13vh; right: 16vw; width: 9vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbea, #f0e2b8 55%, #d9c690);
  box-shadow: 0 0 60px 18px rgba(255, 240, 200, .16), 0 0 160px 60px rgba(160, 180, 255, .08);
  transform: translateY(calc(var(--p, 0) * 22vh));
}
.night-ridges { position: absolute; left: 0; bottom: 0; width: 100%; height: 44vh; }
.night-ridges .r0 { fill: #151d3d; } .night-ridges .r1 { fill: #0f1530; } .night-ridges .r2 { fill: #080c1c; }

.hero {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding-bottom: 8vh;
  transform: translateY(calc(var(--p, 0) * -26vh));
  opacity: calc(1 - var(--p, 0) * 1.7);
}
.hero-kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .7em; color: rgba(246,239,226,.6); margin-bottom: 3vh; }
.hero-title {
  display: flex; gap: .06em; font-weight: 400; line-height: 1;
  font-size: clamp(64px, 13vw, 210px); letter-spacing: .04em;
}
.hero-title span { display: block; }
.hero-title .red {
  color: #ff5b43;
  text-shadow: 0 0 30px rgba(255, 80, 50, .45), 0 0 90px rgba(255, 80, 50, .25);
}
.hero-sub { margin-top: 4vh; font-family: var(--hand); font-size: clamp(18px, 2vw, 28px); letter-spacing: .4em; color: rgba(246,239,226,.82); }

.scroll-hint {
  position: absolute; bottom: 5vh; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12px; letter-spacing: .4em; color: rgba(246,239,226,.55);
}
.scroll-hint i { position: relative; width: 1px; height: 46px; background: rgba(246,239,226,.18); overflow: hidden; }
.scroll-hint i::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: #fff; animation: drip 2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes drip { to { top: 100%; } }

/* =========================================================
   02 地图册
   ========================================================= */
.s-book .stage { background: radial-gradient(120% 90% at 50% 38%, #4c3622 0%, #26180e 46%, #0c0704 100%); }
.desk {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(91deg, rgba(255,230,190,.022) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(89deg, rgba(0,0,0,.09) 0 1px, transparent 1px 37px);
}
.lamp-light {
  position: absolute; left: 50%; top: 42%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 196, 120, .24) 0%, rgba(255, 170, 90, .07) 26%, transparent 45%);
}
.book-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  perspective: 2400px; perspective-origin: 50% 25%;
}
.book {
  --bw: min(92vw, 1180px, 150vh);
  position: relative; width: var(--bw); height: calc(var(--bw) * .43);
  transform-style: preserve-3d;
}
.base { position: absolute; top: 0; height: 100%; width: 50%; }
.base-right { left: 50%; }
.base-left { display: none; }

.paper, .page-paper {
  background:
    radial-gradient(120% 90% at 60% 40%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(to right, rgba(90, 60, 30, .22), rgba(90, 60, 30, 0) 8%),
    #f1e6cd;
}
.page-paper {
  position: absolute; inset: 0; border-radius: 0 5px 5px 0;
  padding: 3.4% 5% 3.8% 7%; display: flex; flex-direction: column; gap: 1.5%;
  /* 一沓书页的厚度 */
  box-shadow:
    1px 1px 0 #e4d6b9, 2px 2px 0 #d8c8a8, 3px 3px 0 #e4d6b9, 4px 4px 0 #cdbb98,
    5px 5px 0 #e0d1b2, 6px 6px 0 #c4b18c, 20px 30px 60px rgba(0,0,0,.55);
}
.page-head, .page-foot {
  font-family: var(--sans); font-size: calc(var(--bw) * .0105); letter-spacing: .25em; color: #7a6548;
}
.page-foot { text-align: right; }
.ink-map { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.ink-map .grat { stroke: #a99474; stroke-width: .6; stroke-dasharray: 2 4; opacity: .55; }
.ink-map .prov { stroke: #6b5139; stroke-width: .9; stroke-linejoin: round; }
.ink-map .prov.c0 { fill: #ecc9b4; } .ink-map .prov.c1 { fill: #e9dca3; }
.ink-map .prov.c2 { fill: #c9d8b2; } .ink-map .prov.c3 { fill: #d7c8db; }
.ink-map .inset-frame { fill: #eadfc5; stroke: #6b5139; stroke-width: 1; }
.ink-map .inset-land { fill: #ecc9b4; stroke: #6b5139; stroke-width: .5; }
.ink-map .inset-dash { fill: #6b5139; }
.ink-dot circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .32s cubic-bezier(.3, 1.8, .5, 1); }
.ink-dot .blot { fill: #c8281e; opacity: .9; }
.ink-dot .bleed { fill: #c8281e; opacity: .25; }
.ink-dot.on circle { transform: scale(1); }

.leaf {
  position: absolute; left: 50%; top: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d; will-change: transform;
}
.side { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 5px 5px 0; }
.side.back { transform: rotateY(180deg); border-radius: 5px 0 0 5px; }
.side::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(40, 24, 10, calc(var(--shade, 0) * .55)), rgba(40, 24, 10, calc(var(--shade, 0) * .1)));
}
.back.paper {
  background:
    radial-gradient(120% 90% at 40% 40%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(to left, rgba(90, 60, 30, .22), rgba(90, 60, 30, 0) 8%),
    #f1e6cd;
}

/* 封面：布面硬壳 + 烫金 */
.cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  color: #e3c07a;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 30% 20%, #2f6474, #1c4553 55%, #12313c);
  box-shadow: inset 7px 0 12px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.08);
}
.cover-frame { position: absolute; inset: 6.5%; border: 2px solid rgba(227, 192, 122, .7); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(227, 192, 122, .45); }
.cover-emblem {
  width: calc(var(--bw) * .075); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #e3c07a;
  background:
    linear-gradient(transparent 48%, rgba(227,192,122,.8) 48% 52%, transparent 52%),
    radial-gradient(ellipse 30% 50% at 50% 50%, transparent 94%, rgba(227,192,122,.8) 95% 100%, transparent 100%),
    radial-gradient(ellipse 50% 22% at 50% 30%, transparent 94%, rgba(227,192,122,.6) 95%, transparent 100%),
    radial-gradient(ellipse 50% 22% at 50% 70%, transparent 94%, rgba(227,192,122,.6) 95%, transparent 100%);
}
.cover-title {
  font-size: calc(var(--bw) * .046); letter-spacing: .32em; padding-left: .32em;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 1px rgba(255, 230, 170, .8);
}
.cover-sub { font-family: var(--sans); font-size: calc(var(--bw) * .0105); letter-spacing: .3em; opacity: .85; }
.cover-name {
  position: absolute; bottom: 11%; right: 11%; padding: .5em 1em;
  font-family: var(--hand); font-size: calc(var(--bw) * .015); color: #2b3f6e;
  background: #f4ecd9; transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.endpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 8%, transparent 9%) 0 0 / 12% 18%,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 6%, transparent 7%) 0 0 / 9% 14%,
    linear-gradient(135deg, #3d6b6f, #2b4f58);
}

.title-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; color: #3b2c1e; }
.tp-small { font-family: var(--sans); font-size: calc(var(--bw) * .012); letter-spacing: .5em; }
.tp-big { font-size: calc(var(--bw) * .04); letter-spacing: .3em; }
.tp-pub { font-family: var(--sans); font-size: calc(var(--bw) * .011); letter-spacing: .5em; opacity: .7; margin-top: 18%; }

.scribble { position: relative; }
.doodle { position: absolute; left: 14%; top: 22%; font-family: var(--hand); font-size: calc(var(--bw) * .017); color: var(--blue-ink); transform: rotate(-6deg); }
.doodle::after { content: ''; position: absolute; left: 4.6em; right: -.2em; top: 52%; height: 2px; background: var(--blue-ink); transform: rotate(-3deg); }
.doodle.d2 { top: 58%; left: 18%; transform: rotate(3deg); font-size: calc(var(--bw) * .016); }
.doodle.d2::after { display: none; }

.toc { display: flex; flex-direction: column; justify-content: center; gap: 4.4%; padding: 0 16% 0 18%; color: #3b2c1e; }
.toc-h { font-size: calc(var(--bw) * .024); letter-spacing: .4em; text-align: center; margin-bottom: 4%; }
.toc-l { display: flex; align-items: baseline; gap: 1em; font-size: calc(var(--bw) * .0135); }
.toc-l b { font-weight: 400; }
.toc-l i { margin-left: auto; font-style: normal; font-family: var(--sans); }
.toc-l::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted #9a8566; }
.toc-l i { order: 2; margin-left: 0; }

.grid-page {
  background:
    linear-gradient(rgba(130, 110, 80, .14) 1px, transparent 1px) 0 0 / 100% 7%,
    linear-gradient(90deg, rgba(130, 110, 80, .14) 1px, transparent 1px) 0 0 / 7% 100%,
    #f1e6cd;
}

.story {
  display: flex; flex-direction: column; justify-content: center; gap: 2.2%;
  padding: 0 9% 0 13%; font-family: var(--hand); color: #3b2c1e;
  font-size: calc(var(--bw) * .0175); line-height: 1.75;
  background:
    repeating-linear-gradient(transparent 0 calc(var(--bw) * .0295), rgba(120, 140, 180, .22) calc(var(--bw) * .0295) calc(var(--bw) * .0305)),
    linear-gradient(to left, rgba(90, 60, 30, .22), rgba(90, 60, 30, 0) 8%),
    #f1e6cd;
}
.story .say { color: var(--blue-ink); font-size: 1.08em; }
.story .sig { margin-top: 3%; font-size: .85em; color: #8b2b22; text-align: right; }

.book-hint {
  position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; z-index: 6;
  font-family: var(--sans); font-size: 12px; letter-spacing: .45em; color: rgba(246, 239, 226, .55);
}
.white-out { position: absolute; inset: 0; z-index: 10; background: #f4dcae; opacity: 0; pointer-events: none; }

/* =========================================================
   03 天台
   ========================================================= */
.roof-sky { position: absolute; inset: 0; background: linear-gradient(#f2d3a0, #f6e5c3 52%, #f1c18a); }
.roof-sky::after {
  content: ''; position: absolute; inset: 0; opacity: var(--dusk, 0);
  background: linear-gradient(#181a38 0%, #4e3a62 40%, #c36a5a 78%, #f0a464 100%);
}
.roof-sun {
  position: absolute; left: 64%; top: var(--sun-y, 24%); z-index: 1;
  width: 18vmin; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff7df 0 30%, #ffd690 52%, rgba(255, 170, 90, .35) 64%, rgba(255, 170, 90, 0) 72%);
  filter: saturate(calc(1 + var(--dusk, 0)));
}
.city { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.city .c-far  { fill: color-mix(in srgb, #c7ae9e, #463a5d calc(var(--p, 0) * 100%)); }
.city .c-cranes { fill: color-mix(in srgb, #a68b7e, #342a46 calc(var(--p, 0) * 100%)); stroke: color-mix(in srgb, #a68b7e, #342a46 calc(var(--p, 0) * 100%)); }
.city .c-mid  { fill: color-mix(in srgb, #8f766d, #241e34 calc(var(--p, 0) * 100%)); }
.city .win    { fill: #ffd98c; }
.city .c-roof { fill: color-mix(in srgb, #4a3830, #120d10 calc(var(--p, 0) * 100%)); }
.city .c-cap  { fill: color-mix(in srgb, #6b5345, #1d1519 calc(var(--p, 0) * 100%)); }
.city .uniform { fill: color-mix(in srgb, #34558f, #141522 calc(var(--p, 0) * 100%)); }
.city .uniform-s { stroke: color-mix(in srgb, #34558f, #141522 calc(var(--p, 0) * 100%)); }
.city .stripe { stroke: color-mix(in srgb, #f3efe6, #3a3a4a calc(var(--p, 0) * 100%)); }
.city .hair   { fill: color-mix(in srgb, #241912, #0a080a calc(var(--p, 0) * 100%)); }
.city .skin   { fill: color-mix(in srgb, #c99272, #2a1e1e calc(var(--p, 0) * 100%)); }
.city .bag-r  { fill: color-mix(in srgb, #b8402f, #2a1418 calc(var(--p, 0) * 100%)); }
.city .bag-b  { fill: color-mix(in srgb, #3f6b5a, #121a1a calc(var(--p, 0) * 100%)); }

.copy {
  position: absolute; top: 0; bottom: 0; z-index: 5; width: min(58vw, 760px);
  display: flex; flex-direction: column; justify-content: center; gap: .9em;
  font-size: clamp(17px, 1.55vw, 24px); line-height: 1.75; letter-spacing: .04em;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.copy-left  { left: 0;  padding: 0 8vw 0 8vw; background: linear-gradient(to right, rgba(16, 10, 8, .72), rgba(16, 10, 8, .4) 60%, transparent); }
.copy-right { right: 0; padding: 0 8vw 0 10vw; background: linear-gradient(to left, rgba(10, 10, 24, .62), rgba(10, 10, 24, .3) 60%, transparent); }
.copy .em { font-family: var(--hand); font-size: 1.22em; color: #ffdca6; line-height: 1.6; }

/* =========================================================
   04 出发
   ========================================================= */
.dawn { position: absolute; inset: 0; }
.dawn-sun {
  position: absolute; left: 48%; top: var(--sun-y, 80%); width: 22vmin; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: var(--sun-o, 0);
  background: radial-gradient(circle, #fff8e4 0 26%, #ffd18a 46%, rgba(255, 160, 90, .35) 60%, rgba(255, 160, 90, 0) 72%);
}
.peaks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.peaks .pk0 { fill: color-mix(in srgb, #3b3a66, #a6b6cf calc(var(--p, 0) * 100%)); }
.peaks .pk1 { fill: color-mix(in srgb, #2c2a50, #7d8fac calc(var(--p, 0) * 100%)); }
.peaks .pk2 { fill: color-mix(in srgb, #1d1b36, #546b6c calc(var(--p, 0) * 100%)); }
.peaks .pk3 { fill: color-mix(in srgb, #110f20, #34493f calc(var(--p, 0) * 100%)); }
.peaks .snow { fill: color-mix(in srgb, #6b6a96, #f4f1ea calc(var(--p, 0) * 100%)); opacity: .9; }
.clouds { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cloud {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 60%, rgba(255,255,255,.9), transparent),
    radial-gradient(closest-side at 60% 40%, rgba(255,255,255,.95), transparent),
    radial-gradient(closest-side at 80% 65%, rgba(255,255,255,.8), transparent);
  filter: blur(6px);
  opacity: calc(.25 + var(--p, 0) * .55);
  mix-blend-mode: screen;
}
.balloons { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.balloon { position: absolute; left: 0; top: 0; overflow: visible; will-change: transform; }
.balloon.main { width: clamp(150px, 17vw, 280px); }
.balloon.far { width: clamp(40px, 4.2vw, 70px); opacity: .72; filter: saturate(.7) blur(.4px); }

/* =========================================================
   05 十七年
   ========================================================= */
.time-sky { position: absolute; inset: 0; }
.time-hills { position: absolute; left: 0; bottom: 18vh; width: 280vw; height: 34vh; z-index: 1; }
.time-head { position: absolute; top: 8vh; left: 8vw; z-index: 6; }
.time-year {
  font-size: clamp(84px, 14vw, 230px); line-height: .95; letter-spacing: .02em;
  color: rgba(255, 255, 255, .82); text-shadow: 0 6px 40px rgba(0,0,0,.18);
  font-variant-numeric: tabular-nums;
}
.track { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; will-change: transform; }
.ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background: var(--ground, #5f7d52);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.08);
}
.ground::before {
  content: ''; position: absolute; left: 0; right: 0; top: 4.5vh; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 248, 225, .55) 0 34px, transparent 34px 70px);
}
.stop { position: absolute; bottom: 18vh; width: 0; }
.stop::before { content: ''; position: absolute; left: -1px; bottom: 0; width: 2px; height: 22vh; background: #4a3a2c; }
.stop::after {
  content: ''; position: absolute; left: -6px; bottom: calc(22vh - 6px); width: 12px; height: 12px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(210, 64, 47, .2);
}
.postcard {
  --rot: -2deg;
  position: absolute; bottom: 22vh; left: -150px; width: 300px; padding: 22px 24px 20px;
  background: linear-gradient(#f8f1e1, #efe4cb); color: #2d2219;
  border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.18);
  opacity: var(--cq, 0);
  transform: translateY(calc((1 - var(--cq, 0)) * 50px)) rotate(var(--rot));
  transform-origin: 50% 100%;
}
.stop:nth-child(odd) .postcard { --rot: 2.2deg; }
.stop:nth-child(3n) .postcard { --rot: -1deg; bottom: 26vh; }
.stop:nth-child(3n)::before { height: 26vh; }
.stop:nth-child(3n)::after { bottom: calc(26vh - 6px); }
.postcard::before {
  content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(120, 90, 60, .35); pointer-events: none;
}
.postcard h3 { font-weight: 400; font-size: 21px; margin: 2px 50px 10px 0; letter-spacing: .04em; }
.postcard p { font-family: var(--hand); font-size: 16.5px; line-height: 1.75; color: #4b3b2c; }
.stamp {
  position: absolute; top: -14px; right: -12px; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-size: 13px; letter-spacing: .1em;
  color: #6b4a2f; border: 2px solid #6b4a2f; background: rgba(248, 241, 225, .9); transform: rotate(12deg);
}
.stamp.red { color: var(--red); border-color: var(--red); }
.stop-now .postcard { box-shadow: 0 0 0 2px var(--red), 0 18px 40px rgba(0,0,0,.3); }

.walkers { position: absolute; left: 30vw; bottom: calc(18vh - 2px); z-index: 4; height: min(16vh, 140px); width: 160px; color: var(--walker, #2a2420); }
.walker { position: absolute; bottom: 0; height: 100%; width: auto; overflow: visible; }
.w-a { left: 46px; --pack: #c8402f; }
.w-b { left: 0; --pack: #2f6474; transform: scale(.96); transform-origin: 50% 100%; }

.tally { position: absolute; right: 8vw; bottom: 4vh; z-index: 6; display: flex; align-items: baseline; gap: 8px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.3); }
.tally b { font-weight: 400; font-size: clamp(40px, 5vw, 72px); font-variant-numeric: tabular-nums; }
.tally span { font-family: var(--sans); font-size: 14px; letter-spacing: .2em; opacity: .75; }

/* =========================================================
   06 六十三
   ========================================================= */
.s-map .stage { background: radial-gradient(110% 90% at 55% 45%, #172036 0%, #0d1220 55%, #070910 100%); }
.map-head { position: absolute; top: 8vh; left: 8vw; z-index: 6; }
.big-map { position: absolute; left: 4vw; right: 4vw; top: 6vh; bottom: 6vh; width: 92vw; height: 88vh; overflow: visible; }
.big-map .provinces { opacity: var(--mo, 0); }
.big-map .prov { fill: #182134; stroke: #34425d; stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.big-map .inset-frame { fill: #121a2a; stroke: #34425d; stroke-width: .9; vector-effect: non-scaling-stroke; }
.big-map .inset-land { fill: #182134; stroke: #34425d; stroke-width: .6; vector-effect: non-scaling-stroke; }
.big-map .inset-dash { fill: #8a9bc0; stroke: #8a9bc0; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.big-map .route path { fill: none; stroke: #f5dcb2; stroke-linecap: round; opacity: .75; }
.big-map .dot .halo { fill: #ff5b43; opacity: .22; }
.big-map .dot .core { fill: #ff6a4d; }
.big-map .dot .pop { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.big-map .dot.on .pop { transform: scale(1); }
.big-map .dot.tip .halo { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }
.big-map .todo { opacity: var(--uo, 0); }
.big-map .todo circle { fill: none; stroke: #ff9c8c; stroke-width: 1.4; stroke-dasharray: 2 2.2; }
.big-map .todo circle { animation: breathe 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { opacity: .35; } }

.map-label {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 22px;
  opacity: var(--lo, 0); transition: opacity .3s; white-space: nowrap;
}
.map-label::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: rgba(255,255,255,.5); }
.ml-year { font-family: var(--sans); font-size: 12px; letter-spacing: .3em; color: rgba(255, 220, 190, .75); }
.ml-name { font-family: var(--hand); font-size: 24px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

.counter { position: absolute; left: 8vw; bottom: 6vh; z-index: 6; display: flex; align-items: baseline; gap: 10px; }
.counter b { font-weight: 400; font-size: clamp(72px, 10vw, 160px); line-height: 1; color: #ff5b43; text-shadow: 0 0 40px rgba(255, 80, 50, .35); font-variant-numeric: tabular-nums; }
.counter span { font-family: var(--sans); font-size: 15px; letter-spacing: .25em; color: rgba(246, 239, 226, .6); }
.map-end { position: absolute; right: 8vw; top: 9vh; z-index: 6; text-align: right; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.9; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.map-end p:last-child { font-family: var(--hand); color: #ffb9a8; }

/* =========================================================
   07 未完
   ========================================================= */
.s-end .stage { background: radial-gradient(120% 100% at 50% 110%, #1b2347 0%, #0b1026 50%, #05070f 100%); }
.end { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6vw; }
.end-line { font-family: var(--sans); font-size: 13px; letter-spacing: .6em; color: rgba(246, 239, 226, .6); margin-bottom: 4vh; }
.end-title { font-weight: 400; font-size: clamp(36px, 5.4vw, 84px); line-height: 1.35; letter-spacing: .06em; }
.end-note { margin-top: 5vh; font-family: var(--hand); font-size: clamp(16px, 1.45vw, 21px); line-height: 2; color: rgba(246, 239, 226, .78); }
.sign { margin-top: 6vh; display: flex; flex-direction: column; gap: 6px; }
.sign span { font-family: var(--hand); font-size: 22px; letter-spacing: .3em; color: #ffcf9a; }
.sign small { font-family: var(--sans); font-size: 12px; letter-spacing: .35em; color: rgba(246, 239, 226, .5); }
.replay {
  margin-top: 5vh; padding: 12px 28px; border-radius: 999px; border: 1px solid rgba(246, 239, 226, .35);
  font-family: var(--sans); font-size: 13px; letter-spacing: .3em; transition: background .3s, border-color .3s;
}
.replay:hover { background: rgba(255,255,255,.08); border-color: rgba(246, 239, 226, .7); }
.replay:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }

/* =========================================================
   小屏
   ========================================================= */
@media (max-width: 760px) {
  .chapters { display: none; }
  .sound { top: 12px; right: 12px; padding: 8px 12px; }
  .book { --bw: 190vw; }
  /* 天台这章人物在下半屏，文字改到上方的天空里 */
  .s-roof .copy {
    top: 0; bottom: auto; padding: 12vh 7vw 10vh; justify-content: flex-start;
    background: linear-gradient(to bottom, rgba(12, 10, 16, .72), rgba(12, 10, 16, .35) 75%, transparent);
  }
  .copy, .copy-left, .copy-right {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto;
    padding: 18vh 7vw 8vh; justify-content: flex-end; font-size: 16px;
    background: linear-gradient(to top, rgba(12, 10, 16, .78), rgba(12, 10, 16, .4) 70%, transparent);
  }
  .walkers { left: 18vw; }
  .postcard { width: 240px; left: -120px; padding: 18px 18px 16px; }
  .postcard h3 { font-size: 18px; }
  .postcard p { font-size: 14.5px; }
  .time-head { left: 6vw; }
  .counter { left: 6vw; }
  .map-end { right: 6vw; bottom: 22vh; }
  .big-map { left: 2vw; width: 96vw; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-hint i::after, .sound.on .sound-bars i, .big-map .dot.tip .halo, .big-map .todo circle { animation: none; }
  .intro { animation: none; opacity: 1; }
  [data-t] { transform: none; }
}