@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&family=ZCOOL+XiaoWei&display=swap');

:root { color-scheme: dark; --ink: #f4f7ff; --muted: rgba(235, 244, 255, .68); --cyan: #8cecff; --amber: #ffc170; --night: #04070d; --sans: 'Noto Sans SC', 'PingFang SC', sans-serif; --serif: 'Noto Serif SC', 'Songti SC', serif; }
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--night); color: var(--ink); font-family: var(--sans); }
::selection { background: rgba(116, 223, 255, .34); }

.intro { position: fixed; z-index: 120; inset: 0; display: grid; place-content: center; gap: .55rem; overflow: hidden; color: #fff; text-align: center; pointer-events: none; opacity: 0; background: #000; }
.intro strong { font: clamp(4rem, 13vw, 11rem)/.9 'ZCOOL XiaoWei', var(--serif); letter-spacing: .28em; text-indent: .28em; text-shadow: 0 0 2rem rgba(175, 235, 255, .35); transform: translateY(.35rem); opacity: 0; }
.intro span { color: rgba(210, 238, 255, .7); font-size: .64rem; letter-spacing: .75em; text-indent: .75em; opacity: 0; }
body.is-intro { overflow: hidden; }
body.is-intro .intro { opacity: 1; animation: intro-curtain 6.2s linear forwards; }
body.is-intro .intro strong { animation: intro-title 5.7s cubic-bezier(.2,.8,.2,1) forwards; }
body.is-intro .intro span { animation: intro-subtitle 4.95s ease forwards; }
body.is-intro .masthead { opacity: 0; transition: opacity .4s ease; }
body.is-intro .shot-scrubber { opacity: 0; pointer-events: none; }

/* iOS 在开场就为全部镜头创建合成层会导致页面进程被回收。
   故事舞台始终在纯黑幕布后方准备；幕布淡出时自然露出第 01 镜。 */
@media (max-width: 700px) {
  body.is-intro .masthead,
  body.is-intro .page-progress,
  body.is-intro .progress { visibility: hidden; }
}

.progress { position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.12); }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #77e5ff, #ffc170); box-shadow: 0 0 14px #7ce7ff; }
.masthead { position: fixed; z-index: 80; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.1rem clamp(1rem, 4vw, 4rem); pointer-events: none; text-shadow: 0 2px 18px #000; }
.is-time-jump .masthead { opacity: 0; transition: opacity .12s linear; }
.logo { color: #fff; font: 1.6rem/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .25em; text-decoration: none; pointer-events: auto; }
.chapter-readout, .shot-readout { color: var(--muted); font-size: .65rem; letter-spacing: .17em; }
.shot-readout { justify-self: end; font-variant-numeric: tabular-nums; }

.sequence { position: relative; height: 570svh; background: var(--night); }
.sequence--neural { height: 760svh; }.sequence--pursuit { height: 700svh; }.sequence--otherworld { height: 1050svh; }.sequence--return { height: 510svh; }
.stage { position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: hidden; isolation: isolate; background: #03060b; }
.stage::before { content: ''; position: absolute; z-index: 16; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.21) 100%); }
.stage::after { content: ''; position: absolute; z-index: 17; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(1,4,10,.35), transparent 30%, transparent 70%, rgba(1,4,10,.27)), linear-gradient(0deg, rgba(0,0,0,.62), transparent 37%, rgba(0,0,0,.2)); }
.shot { position: absolute; z-index: 0; inset: 0; margin: 0; opacity: 0; overflow: hidden; contain: paint; transition: opacity .46s cubic-bezier(.2,.78,.28,1); }
.shot.is-current { opacity: 1; will-change: opacity; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(var(--zoom, 1.04)) translate3d(var(--shift-x, 0), var(--shift-y, 0), 0); }
.shot.is-current img { will-change: transform; }
.shot--disconnect { background: #000; transition-duration: .12s; }
.shot--reconnect { background: #000; transition-duration: .12s; }
.shot--return-black { background: #000; transition-duration: .7s; }
.shot--ship-launch, .shot--mech-ready { transition-duration: 1.05s; }
.shot--excluded img { object-position: center; }.shot--delivery img { object-position: center; }.shot--danger img { object-position: center; }

.group-kicker, .story-copy, .crowd-bubble, .news-card, .chapter-end, .disconnect-screen { position: absolute; z-index: 30; opacity: 0; transition: opacity .28s ease, transform .5s cubic-bezier(.18,.9,.2,1.08); }
.group-kicker { top: clamp(4.7rem, 10vh, 7rem); left: clamp(1rem, 5vw, 5.5rem); display: grid; gap: .25rem; color: #eef8ff; transform: translateY(.8rem); }
.group-kicker span { color: var(--cyan); font-size: .62rem; letter-spacing: .23em; }.group-kicker b { font: clamp(1.45rem, 3vw, 2.7rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .18em; }
.group-kicker--luojiu { color: #fff0de; }.group-kicker--luojiu span { color: var(--amber); }

.story-copy { width: min(27rem, 32vw); padding: 1rem 1.1rem 1.05rem; border: 1px solid rgba(177, 225, 255, .3); border-left: 3px solid var(--cyan); background: linear-gradient(120deg, rgba(4,14,25,.86), rgba(7,12,23,.55)); box-shadow: 0 1.1rem 3.2rem rgba(0,0,0,.35); backdrop-filter: blur(11px); transform: translateY(1.2rem); }
.story-copy p { margin: .4rem 0 0; font: 500 clamp(1rem, 1.5vw, 1.26rem)/1.7 var(--serif); }.copy-label { color: var(--cyan); font-size: .62rem; letter-spacing: .19em; }
.story-copy--orbit { top: 27%; left: clamp(1rem, 8vw, 8rem); }.story-copy--billboard { right: clamp(1rem, 7vw, 7rem); bottom: 18%; }.story-copy--stall { top: 23%; right: clamp(1rem, 7vw, 7rem); }.story-copy--shipyard { top: 29%; left: clamp(1rem, 7vw, 7rem); }.story-copy--engine { top: 24%; left: clamp(1rem, 7vw, 7rem); }
.story-copy--excluded { top: 20%; right: clamp(1rem, 7vw, 7rem); border-left-color: var(--amber); }.story-copy--excluded .copy-label { color: var(--amber); }.story-copy--delivery { top: 12%; left: clamp(1rem, 5vw, 5.5rem); }.story-copy--danger { top: 24%; left: clamp(1rem, 7vw, 7rem); }
.story-copy--dessert-1 { top: 10%; left: 34%; }.story-copy--dessert-2 { top: 10%; left: 35%; }.story-copy--dessert-3 { top: 11%; left: 45%; }.story-copy--dessert-4 { top: 10%; left: 34%; }.story-copy--dessert-5 { top: 12%; left: 6%; }
.story-copy--neural-chair { top: 14%; right: clamp(1rem, 7vw, 7rem); }.story-copy--neural-sync { top: 17%; left: clamp(1rem, 7vw, 7rem); }.story-copy--mech-pov { top: 15%; right: clamp(1rem, 7vw, 7rem); }.story-copy--mech-rise { top: 16%; left: clamp(1rem, 7vw, 7rem); }.story-copy--xiaolan-billboard { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--launchpad-tv { top: 14%; right: clamp(1rem, 7vw, 7rem); }.story-copy--launchpad-tv p { margin-top: 0; }.story-copy--ship-launch { top: 14%; right: clamp(1rem, 7vw, 7rem); }.story-copy--mech-ready { top: 16%; left: clamp(1rem, 7vw, 7rem); }
.story-copy--pursuit-up { top: 15%; right: clamp(1rem, 7vw, 7rem); }.story-copy--pursuit-hull { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--xiaolan-pod { top: 14%; right: clamp(1rem, 7vw, 7rem); }.story-copy--viewport { top: 15%; left: clamp(1rem, 7vw, 7rem); }.story-copy--fleet { top: 13%; right: clamp(1rem, 7vw, 7rem); }.story-copy--explosion { top: 14%; left: clamp(1rem, 7vw, 7rem); }.story-copy--impact { top: 12%; right: clamp(1rem, 7vw, 7rem); }.story-copy--ftl { top: 14%; left: clamp(1rem, 7vw, 7rem); }

.news-card { top: 18%; right: clamp(1rem, 6vw, 7rem); display: grid; gap: .5rem; width: min(29rem, 37vw); padding: 1.05rem 1.2rem 1.15rem; border: 1px solid rgba(161, 236, 255, .64); background: linear-gradient(145deg, rgba(10, 84, 113, .79), rgba(8,21,36,.74)); box-shadow: 0 0 2.5rem rgba(88,211,255,.22); transform: translateY(1.1rem) rotate(1deg); }
.news-card span, .news-card small { color: rgba(232,249,255,.84); font-size: .65rem; letter-spacing: .1em; line-height: 1.62; }.news-card strong { color: #fff; font: clamp(1.35rem, 2.3vw, 2.1rem)/1.18 var(--serif); }.news-card small { color: #bdefff; }.news-card .news-terms { padding-top: .58rem; border-top: 1px solid rgba(176,234,255,.26); color: rgba(225,246,255,.84); }

.crowd-bubbles { position: absolute; z-index: 33; inset: 0; pointer-events: none; }
.crowd-bubble { position: absolute; max-width: min(18rem, 37vw); margin: 0; padding: .62rem .85rem; color: #f7fbff; font-size: clamp(.8rem, 1.05vw, .98rem); line-height: 1.55; border: 1px solid rgba(238,247,255,.26); border-radius: .9rem .9rem .9rem .15rem; background: rgba(5,10,18,.76); box-shadow: 0 .75rem 2rem rgba(0,0,0,.3); backdrop-filter: blur(9px); transform: translateY(.9rem) scale(.98); }
.crowd-bubble::before { content: ''; position: absolute; bottom: -.36rem; left: 1.15rem; width: .62rem; height: .62rem; border-right: 1px solid rgba(238,247,255,.26); border-bottom: 1px solid rgba(238,247,255,.26); background: rgba(5,10,18,.76); transform: rotate(45deg); }
.crowd-bubble--orbit { right: clamp(1rem, 10vw, 11rem); bottom: 24%; }.crowd-bubble--billboard-a { top: 21%; left: clamp(1rem, 7vw, 7rem); }.crowd-bubble--billboard-b { bottom: 10%; left: clamp(1rem, 7vw, 7rem); }.crowd-bubble--stall { bottom: 16%; left: clamp(1rem, 8vw, 8rem); }.crowd-bubble--engine { bottom: 14%; right: clamp(1rem, 7vw, 7rem); }
.crowd-bubble--recruitment-a { left: clamp(1rem, 8vw, 8rem); bottom: 20%; }.crowd-bubble--recruitment-b { left: clamp(1rem, 20vw, 23rem); bottom: 13%; }.crowd-bubble--excluded { top: 12%; bottom: auto; left: clamp(1rem, 4vw, 4rem); right: auto; }.crowd-bubble--delivery { bottom: 14%; right: clamp(1rem, 8vw, 8rem); }.crowd-bubble--danger { bottom: 17%; left: clamp(1rem, 8vw, 8rem); }
.crowd-bubble--dessert-1 { right: clamp(1rem, 7vw, 7rem); bottom: 12%; }.crowd-bubble--dessert-3 { left: clamp(1rem, 7vw, 7rem); bottom: 12%; }.crowd-bubble--dessert-5a { top: 43%; left: 8%; }.crowd-bubble--dessert-5b { right: clamp(1rem, 6vw, 6rem); bottom: 8%; max-width: min(26rem, 38vw); }
.crowd-bubble--neural-sync { right: clamp(1rem, 7vw, 7rem); bottom: 15%; }.crowd-bubble--mech-fall { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--mech-rise { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--xiaolan-billboard { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--ship-launch { left: clamp(1rem, 8vw, 8rem); bottom: 15%; }
.crowd-bubble--pursuit-up { left: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--xiaolan-pod { left: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--fleet { left: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--ftl { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }

.page-progress { --page-progress: 1.9; position: fixed; z-index: 85; right: clamp(1rem, 4vw, 4rem); bottom: 1.25rem; width: 3.75rem; height: 3.75rem; display: grid; place-items: center; color: rgba(244,249,255,.82); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 10px #000; pointer-events: none; }.page-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 .3rem rgba(124,231,255,.35)); }.page-progress circle { fill: rgba(4,8,16,.42); stroke-width: 1.7; }.page-progress__track { stroke: rgba(238,247,255,.2); }.page-progress__value { fill: none; stroke: #8cecff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--page-progress)); transition: stroke-dashoffset .5s ease; }.page-progress span { position: relative; display: flex; align-items: baseline; letter-spacing: -.06em; }.page-progress b { color: #fff; font-size: .9rem; line-height: 1; }.page-progress small { color: rgba(244,249,255,.68); font-size: .48rem; }
.shot-scrubber { position: fixed; z-index: 86; bottom: 1.45rem; left: 50%; width: min(16rem, 28vw); transform: translateX(-50%); opacity: .72; transition: opacity .2s ease; }.shot-scrubber:hover, .shot-scrubber:focus-within { opacity: 1; }.shot-scrubber input { width: 100%; height: .8rem; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }.shot-scrubber input::-webkit-slider-runnable-track { height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(140,236,255,.9), rgba(255,255,255,.26)); box-shadow: 0 0 .5rem rgba(105,221,255,.35); }.shot-scrubber input::-webkit-slider-thumb { width: .7rem; height: .7rem; margin-top: -.27rem; border: 1px solid rgba(231,251,255,.92); border-radius: 50%; appearance: none; -webkit-appearance: none; background: #8cecff; box-shadow: 0 0 .6rem rgba(132,236,255,.75); }.shot-scrubber input::-moz-range-track { height: 2px; border-radius: 999px; background: rgba(140,236,255,.7); }.shot-scrubber input::-moz-range-thumb { width: .65rem; height: .65rem; border: 1px solid rgba(231,251,255,.92); border-radius: 50%; background: #8cecff; }
.debug-console { position: fixed; z-index: 200; top: .75rem; left: .75rem; display: none; width: min(29rem, calc(100vw - 1.5rem)); max-height: min(46svh, 30rem); overflow: auto; padding: .7rem .8rem; border: 1px solid rgba(113,226,255,.58); color: #dff9ff; background: rgba(2,11,20,.93); box-shadow: 0 .8rem 2.6rem rgba(0,0,0,.5); font: .68rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: auto; }.debug-console.is-visible { display: block; }.debug-console strong { display: block; margin-bottom: .35rem; color: #8cecff; letter-spacing: .14em; }.debug-console pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.scroll-label { position: absolute; z-index: 35; bottom: 1.25rem; left: 50%; margin: 0; color: rgba(244,249,255,.58); font-size: .62rem; letter-spacing: .18em; transform: translateX(-50%); animation: pulse 1.8s ease-in-out infinite; }
.chapter-end { top: 48%; left: 50%; display: grid; gap: .55rem; width: min(30rem, 84vw); text-align: center; transform: translate(-50%, -40%); }.chapter-end small { color: var(--muted); font-size: .65rem; letter-spacing: .25em; }.chapter-end strong { font: clamp(2rem, 4vw, 4rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .18em; text-indent: .18em; text-shadow: 0 0 2rem rgba(210,232,255,.6); }
.disconnect-screen { z-index: 60; inset: 0; display: grid; place-items: center; color: #fff; background: #000; text-align: center; transform: none; transition: opacity .14s linear; }.disconnect-screen strong { font: clamp(2rem, 5vw, 5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .26em; text-indent: .26em; text-shadow: 0 0 1.8rem rgba(210,232,255,.28); }
.return-disconnect-screen { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; color: #fff; background: #000; pointer-events: none; opacity: 0; }.return-disconnect-screen strong { font: clamp(2rem, 5vw, 5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .26em; text-indent: .26em; text-shadow: 0 0 1.8rem rgba(210,232,255,.28); }.return-disconnect-screen.is-active { opacity: 1; transition: opacity .14s linear; }.return-disconnect-screen.is-fading { opacity: 0; transition: opacity 1.45s ease; }.return-disconnect-screen.is-fading strong { opacity: 0; transform: translateY(-.35rem); transition: opacity .25s ease, transform .25s ease; }
.time-jump { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; color: #fff; background: #000; opacity: 0; pointer-events: none; }.time-jump strong { font: clamp(2rem, 5vw, 5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .28em; text-indent: .28em; text-shadow: 0 0 1.8rem rgba(210,232,255,.22); }.time-jump.is-active { opacity: 1; transition: opacity .22s linear; }.time-jump.is-fading { opacity: 0; transition: opacity 1.65s ease; }
.neural-sync-screen, .otherworld-reconnect-screen { position: absolute; z-index: 66; inset: 0; display: grid; place-content: center; gap: .75rem; color: #e8f8ff; background: #000; text-align: center; opacity: 0; pointer-events: none; }.neural-sync-screen small, .otherworld-reconnect-screen small { color: rgba(154,223,247,.72); font-size: .68rem; letter-spacing: .34em; }.neural-sync-screen strong, .otherworld-reconnect-screen strong { font: clamp(1.75rem, 4.5vw, 4.5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .22em; text-indent: .22em; text-shadow: 0 0 1.8rem rgba(131,224,255,.3); }.neural-sync-screen b, .otherworld-reconnect-screen b { color: #f2fbff; font: clamp(1.75rem, 4.5vw, 4.5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .22em; text-indent: .22em; opacity: 0; transform: translateY(.4rem); }.neural-sync-screen.is-active, .otherworld-reconnect-screen.is-active { opacity: 1; transition: opacity .28s linear; }.neural-sync-screen strong { opacity: 0; transform: translateY(.35rem); }.neural-sync-screen.is-linking strong { opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s ease; }.neural-sync-screen.is-complete strong { opacity: 0; transform: translateY(-.35rem); transition: opacity .25s ease, transform .25s ease; }.neural-sync-screen.is-complete b, .otherworld-reconnect-screen.is-success b { opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s ease; }.neural-sync-screen.is-fading, .otherworld-reconnect-screen.is-fading { opacity: 0; transition: opacity 1.1s ease; }.otherworld-reconnect-screen.is-linking small { opacity: 0; transform: translateY(-.35rem); transition: opacity .25s ease, transform .25s ease; }.otherworld-reconnect-screen strong { opacity: 0; transform: translateY(.35rem); }.otherworld-reconnect-screen.is-linking strong { opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s ease; }.neural-progress, .reconnect-progress { width: min(19rem, 48vw); height: .32rem; overflow: hidden; border: 1px solid rgba(150,229,255,.45); background: rgba(112,207,255,.1); opacity: 0; }.neural-progress i, .reconnect-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #4bd7ff, #e7fcff); box-shadow: 0 0 .85rem rgba(106,224,255,.9); }.neural-sync-screen em, .otherworld-reconnect-screen em { color: rgba(199,240,255,.82); font-size: .74rem; font-style: normal; letter-spacing: .3em; text-indent: .3em; opacity: 0; }.neural-sync-screen.is-linking .neural-progress, .neural-sync-screen.is-linking em, .otherworld-reconnect-screen.is-linking .reconnect-progress, .otherworld-reconnect-screen.is-linking em { opacity: 1; transition: opacity .2s ease; }.neural-sync-screen.is-linking .neural-progress i, .otherworld-reconnect-screen.is-linking .reconnect-progress i { animation: reconnect-progress 3s linear forwards; }.neural-sync-screen.is-complete .neural-progress, .neural-sync-screen.is-complete em { opacity: 0; }.otherworld-reconnect-screen.is-success { background: transparent; }.otherworld-reconnect-screen.is-success strong, .otherworld-reconnect-screen.is-success .reconnect-progress, .otherworld-reconnect-screen.is-success em { opacity: 0; }.otherworld-reconnect-screen.is-success b { text-shadow: 0 0 1.8rem rgba(131,224,255,.52); }
.reconnect-screen { position: absolute; z-index: 60; inset: 0; display: grid; place-content: center; gap: .7rem; color: #e8f8ff; background: #000; text-align: center; opacity: 0; transition: opacity .22s linear; }.reconnect-screen small { color: rgba(154,223,247,.72); font-size: .68rem; letter-spacing: .34em; }.reconnect-screen strong { font: clamp(2rem, 5vw, 5rem)/1 'ZCOOL XiaoWei', var(--serif); letter-spacing: .22em; text-indent: .22em; text-shadow: 0 0 1.8rem rgba(131,224,255,.3); }
.story-copy--otherworld-awake { top: 13%; right: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-flee { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-guard { top: 14%; right: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-monster { bottom: 10%; left: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-battle { top: 13%; right: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-defeat { top: 14%; left: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-save { top: 12%; right: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-reveal { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-arc { top: auto; right: clamp(1rem, 7vw, 7rem); bottom: 10%; }.story-copy--otherworld-collapse { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--otherworld-sky { top: 14%; right: clamp(1rem, 7vw, 7rem); }
.story-copy--return-awake { bottom: 12%; left: clamp(1rem, 7vw, 7rem); }.story-copy--return-elder { bottom: 12%; left: clamp(1rem, 7vw, 7rem); }.story-copy--return-potato { top: 13%; right: clamp(1rem, 7vw, 7rem); }.story-copy--return-leave { top: 13%; left: clamp(1rem, 7vw, 7rem); }.story-copy--return-eat { top: 13%; left: clamp(1rem, 7vw, 7rem); }
.crowd-bubble--otherworld-awake { top: 50%; right: auto; bottom: auto; left: 50%; width: min(20rem, 40vw); transform: translate(-50%, .9rem) scale(.98); }.crowd-bubble--otherworld-awake.is-active { transform: translate(-50%, 0) scale(1); }.crowd-bubble--otherworld-flee { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--otherworld-guard { left: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--otherworld-defeat { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }.crowd-bubble--otherworld-people { right: clamp(1rem, 8vw, 8rem); bottom: 14%; }
.crowd-bubble--return-awake { top: 13%; left: clamp(1rem, 7vw, 7rem); max-width: min(25rem, 38vw); }.crowd-bubble--return-elder { top: 14%; right: clamp(1rem, 7vw, 7rem); }.crowd-bubble--return-potato { bottom: 13%; right: clamp(1rem, 7vw, 7rem); }.crowd-bubble--return-leave { bottom: 10%; left: clamp(1rem, 7vw, 7rem); max-width: min(33rem, 44vw); }
.mission-alert { position: absolute; z-index: 34; right: clamp(1rem, 7vw, 7rem); bottom: 13%; display: grid; gap: .42rem; width: min(22rem, 33vw); padding: .9rem 1rem; border: 1px solid rgba(255, 184, 104, .75); border-left: 4px solid #ff7b3f; color: #fff4e7; background: linear-gradient(120deg, rgba(70,18,6,.88), rgba(23,8,7,.76)); box-shadow: 0 0 2rem rgba(255,101,51,.16); opacity: 0; transform: translateY(1rem); transition: opacity .28s ease, transform .5s cubic-bezier(.18,.9,.2,1.08); }.mission-alert span { color: #ffc58f; font-size: .62rem; letter-spacing: .16em; }.mission-alert strong { font: clamp(1.15rem, 1.9vw, 1.65rem)/1.25 var(--serif); }.mission-alert small { color: rgba(255,232,210,.78); font-size: .72rem; }.mission-alert.is-active { opacity: 1; transform: translateY(0); }

[data-cue].is-active { opacity: 1; transform: translateY(0); }.news-card.is-active { transform: rotate(1deg); }.crowd-bubble.is-active { transform: translateY(0) scale(1); }.chapter-end.is-active { transform: translate(-50%, -50%); }
.signal-failure { position: absolute; z-index: 34; inset: 0; display: grid; place-items: center; overflow: hidden; color: #b7f4ff; pointer-events: none; opacity: 0; mix-blend-mode: screen; }.signal-failure span { position: relative; z-index: 2; padding: .55rem .9rem; border: 1px solid rgba(135, 230, 255, .55); color: inherit; background: rgba(2, 16, 31, .42); font: 700 clamp(1rem, 2vw, 1.65rem)/1 var(--serif); letter-spacing: .38em; text-indent: .38em; text-shadow: 0 0 1.2rem rgba(76, 207, 255, .95); animation: signal-flicker .16s steps(2, end) infinite, signal-jitter .42s steps(2, end) infinite; }.signal-failure::before { position: absolute; inset: -20%; content: ''; opacity: .42; background: repeating-linear-gradient(0deg, rgba(123, 227, 255, .08) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(68, 164, 255, .07) 0 2px, transparent 2px 11px); animation: signal-static .13s steps(3, end) infinite; }.signal-failure::after { position: absolute; inset: 0; content: ''; opacity: .22; background: linear-gradient(transparent 46%, rgba(126, 225, 255, .2) 49%, transparent 52%); background-size: 100% 7px; animation: signal-scan .3s linear infinite; }.signal-failure.is-active { opacity: 1; transform: none; animation: signal-pulse .7s steps(2, end) infinite; }
.signal-failure--critical { z-index: 36; color: #d4f8ff; backdrop-filter: blur(2.8px) contrast(1.35); }.signal-failure--critical span { border-color: rgba(180, 245, 255, .82); background: rgba(1, 10, 22, .64); animation-duration: .09s, .18s; }.signal-failure--critical::before { inset: -30%; opacity: .86; background: repeating-linear-gradient(0deg, rgba(188, 245, 255, .16) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(85, 193, 255, .18) 0 3px, transparent 3px 9px), linear-gradient(90deg, transparent 15%, rgba(134, 236, 255, .25) 15% 22%, transparent 22% 50%, rgba(194, 245, 255, .2) 50% 68%, transparent 68%); animation-duration: .065s; }.signal-failure--critical::after { opacity: .58; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(177, 239, 255, .32) 9px 11px, transparent 11px 15px); background-size: 100% 15px; animation: signal-critical-scan .12s steps(2, end) infinite; }.signal-failure--critical.is-active { animation: signal-critical-pulse .14s steps(2, end) infinite; }
.story-copy--mech-pov { top: auto; right: auto; bottom: 10%; left: 50%; transform: translate(-50%, 1.2rem); }.story-copy--mech-pov.is-active { transform: translate(-50%, 0); }
.story-copy--otherworld-flee, .story-copy--otherworld-guard, .story-copy--otherworld-battle, .story-copy--otherworld-defeat, .story-copy--otherworld-save, .story-copy--otherworld-child-pov { top: auto; bottom: 10%; }.story-copy--otherworld-flee, .story-copy--otherworld-guard, .story-copy--otherworld-defeat { left: clamp(1rem, 7vw, 7rem); right: auto; }.story-copy--otherworld-battle, .story-copy--otherworld-save, .story-copy--otherworld-child-pov { right: clamp(1rem, 7vw, 7rem); left: auto; }.story-copy--otherworld-child-pov { width: min(27rem, 32vw); }
.crowd-bubble--mech-fall, .crowd-bubble--otherworld-defeat { top: 50%; bottom: auto; left: 50%; right: auto; width: min(18rem, 37vw); transform: translate(-50%, .9rem) scale(.98); }.crowd-bubble--mech-fall.is-active, .crowd-bubble--otherworld-defeat.is-active { transform: translate(-50%, 0) scale(1); }.crowd-bubble--otherworld-flee, .crowd-bubble--otherworld-guard { top: 12%; bottom: auto; }.crowd-bubble--launchpad-tv { bottom: 8%; left: 50%; right: auto; width: min(35rem, 46vw); max-width: none; transform: translate(-50%, .9rem) scale(.98); }.crowd-bubble--launchpad-tv.is-active { transform: translate(-50%, 0) scale(1); }
.disconnect-screen.is-active { opacity: 1; transform: none; }
.reconnect-screen.is-active { opacity: 1; }
.shot--mech-pov.is-current { animation: mech-pov-handheld 1.45s ease-in-out infinite; }
.shot--otherworld-awake.is-current { animation: otherworld-awake-handheld 3.6s ease-in-out infinite; }
.shot--otherworld-flee.is-current { animation: otherworld-flee-head-motion 2.8s ease-in-out infinite; }
.shot--otherworld-monster.is-current { animation: otherworld-natural-shake 1.8s ease-in-out infinite; }
.shot--otherworld-defeat.is-current { animation: otherworld-natural-shake 1.45s ease-in-out infinite; }
.shot--otherworld-save.is-current { animation: otherworld-save-punch-in 1.1s cubic-bezier(.14, .86, .2, 1) both, otherworld-save-settle 4.8s 1.1s ease-in-out infinite; }
.shot--otherworld-sky.is-current { animation: otherworld-dizzy-motion 2.65s ease-in-out infinite; }
.shot--otherworld-people.is-current { animation: otherworld-people-signal-shake 1.15s ease-in-out infinite; }
.shot--viewport.is-current { animation: ship-crisis-shake .44s steps(2, end) infinite; }
.shot--fleet.is-current { animation: ship-crisis-shake .56s steps(2, end) infinite; }
.shot--explosion.is-current { animation: ship-crisis-shake .26s steps(2, end) infinite; }
.shot--impact.is-current { animation: ship-crisis-shake .18s steps(2, end) infinite; }
.shot--ftl.is-current { animation: ship-crisis-shake .32s steps(2, end) infinite; }
@keyframes pulse { 50% { opacity: .25; transform: translate(-50%, .3rem); } }
@keyframes mech-pov-handheld { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 18% { transform: translate3d(-.22%, .16%, 0) rotate(-.12deg); } 42% { transform: translate3d(.18%, -.12%, 0) rotate(.1deg); } 66% { transform: translate3d(-.1%, -.2%, 0) rotate(-.08deg); } 84% { transform: translate3d(.14%, .1%, 0) rotate(.06deg); } }
@keyframes otherworld-awake-handheld { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 22% { transform: translate3d(-.7%, .48%, 0) rotate(-.28deg); } 51% { transform: translate3d(.8%, -.56%, 0) rotate(.32deg); } 77% { transform: translate3d(-.38%, -.25%, 0) rotate(-.16deg); } }
@keyframes otherworld-flee-head-motion { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 28% { transform: translate3d(-.55%, .58%, 0) rotate(-.16deg); } 58% { transform: translate3d(-1.35%, 1.08%, 0) rotate(-.32deg); } 79% { transform: translate3d(-.82%, .74%, 0) rotate(-.22deg); } }
@keyframes otherworld-natural-shake { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 24% { transform: translate3d(-.42%, .28%, 0) rotate(-.15deg); } 51% { transform: translate3d(.5%, -.34%, 0) rotate(.18deg); } 76% { transform: translate3d(-.26%, -.16%, 0) rotate(-.08deg); } }
@keyframes otherworld-save-punch-in { 0% { transform: translate3d(1.8%, .8%, 0) scale(1.34); } 48% { transform: translate3d(-.35%, -.2%, 0) scale(1.015); } 72% { transform: translate3d(.38%, .24%, 0) scale(1.028); } 100% { transform: translate3d(0, 0, 0) scale(1.01); } }
@keyframes otherworld-save-settle { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.01); } 23% { transform: translate3d(-.82%, .54%, 0) scale(1.027); } 52% { transform: translate3d(.94%, -.64%, 0) scale(1.034); } 77% { transform: translate3d(-.52%, -.32%, 0) scale(1.02); } }
@keyframes otherworld-dizzy-motion { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 17% { transform: translate3d(-1.05%, .78%, 0) rotate(-.62deg); } 38% { transform: translate3d(.88%, -.82%, 0) rotate(.52deg); } 58% { transform: translate3d(1.25%, .42%, 0) rotate(.72deg); } 79% { transform: translate3d(-.92%, -.55%, 0) rotate(-.54deg); } }
@keyframes otherworld-people-signal-shake { 0%, 100% { transform: translate3d(0, 0, 0); filter: contrast(1) brightness(1); } 25% { transform: translate3d(-.42%, .2%, 0); filter: contrast(1.08) brightness(1.05); } 50% { transform: translate3d(.36%, -.16%, 0); filter: contrast(.98) brightness(.94); } 75% { transform: translate3d(-.22%, .12%, 0); filter: contrast(1.12) brightness(1.08); } }
@keyframes ship-crisis-shake { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 18% { transform: translate3d(-1.25%, .72%, 0) rotate(-.35deg); } 39% { transform: translate3d(1.55%, -.82%, 0) rotate(.42deg); } 58% { transform: translate3d(-.94%, -.46%, 0) rotate(-.28deg); } 76% { transform: translate3d(.7%, .38%, 0) rotate(.2deg); } }
@keyframes intro-curtain { 0%, 81% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes intro-title { 0%, 10% { opacity: 0; transform: translateY(.75rem) scale(.93); } 34%, 59% { opacity: 1; transform: translateY(0) scale(1); } 90%, 100% { opacity: 0; transform: translateY(-.65rem) scale(1.04); } }
@keyframes intro-subtitle { 0%, 18% { opacity: 0; } 38%, 60% { opacity: .82; } 87%, 100% { opacity: 0; } }
@keyframes reconnect-progress { to { width: 100%; } }
@keyframes signal-flicker { 0%, 35% { opacity: 1; } 36%, 45% { opacity: .2; } 46%, 78% { opacity: .9; } 79%, 100% { opacity: .35; } }
@keyframes signal-jitter { 0%, 100% { transform: translate(0); } 25% { transform: translate(2px, -1px); } 55% { transform: translate(-3px, 1px); } 75% { transform: translate(1px, 2px); } }
@keyframes signal-static { 0% { transform: translate(0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(2%, 2%); } 100% { transform: translate(-1%, 0); } }
@keyframes signal-scan { to { background-position: 0 7px; } }
@keyframes signal-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.8); } }
@keyframes signal-critical-scan { 0% { background-position: 0 0; } 100% { background-position: 0 15px; } }
@keyframes signal-critical-pulse { 0%, 100% { opacity: .45; filter: brightness(.8); } 50% { opacity: 1; filter: brightness(2.1); } }
.signal-failure.is-active { opacity: 0; animation: none; }.signal-failure span, .signal-failure::before, .signal-failure::after { animation: none; }.signal-failure.is-active.is-glitching { opacity: 1; transform: none; animation: signal-pulse .22s steps(2, end) infinite; }.signal-failure.is-active.is-glitching span { animation: signal-flicker .12s steps(2, end) infinite, signal-jitter .28s steps(2, end) infinite; }.signal-failure.is-active.is-glitching::before { animation: signal-static .1s steps(3, end) infinite; }.signal-failure.is-active.is-glitching::after { animation: signal-scan .18s linear infinite; }.signal-failure--critical.is-active.is-glitching { animation: signal-critical-pulse .11s steps(2, end) infinite; }.signal-failure--critical.is-active.is-glitching::after { animation: signal-critical-scan .08s steps(2, end) infinite; }

@media (max-width: 700px) {
  .masthead { grid-template-columns: 1fr auto; padding: .9rem 1rem; }.chapter-readout { display: none; }.logo { font-size: 1.35rem; }.sequence { height: 500svh; }.sequence--neural { height: 720svh; }.sequence--pursuit { height: 650svh; }.sequence--otherworld { height: 1020svh; }.sequence--return { height: 480svh; }.stage { min-height: 31rem; }.shot img { object-position: center; }
  .shot--orbit img { object-position: 51% center; }.shot--billboard img { object-position: 55% center; }.shot--stall img { object-position: 58% center; }.shot--shipyard img { object-position: 52% center; }.shot--engine img { object-position: 55% center; }.shot--recruitment img { object-position: 56% center; }.shot--excluded img { object-position: 48% center; }.shot--delivery img { object-position: 30% center; }.shot--danger img { object-position: 58% center; }
  .shot--dessert-5 img { object-position: 72% center; }
  .group-kicker { top: 4.5rem; left: 1rem; }.group-kicker--luojiu { left: auto; right: 1rem; text-align: right; }.group-kicker b { font-size: 1.45rem; }.story-copy { width: min(20.5rem, calc(100vw - 2rem)); padding: .82rem .9rem; }.story-copy p { font-size: 1rem; line-height: 1.62; }
  .story-copy--orbit, .story-copy--engine, .story-copy--danger { top: 19%; left: 1rem; }.story-copy--delivery { top: 12%; left: 1rem; }.story-copy--billboard, .story-copy--stall, .story-copy--excluded { top: auto; right: 1rem; bottom: 15%; }
  .story-copy--dessert-1, .story-copy--dessert-2, .story-copy--dessert-3, .story-copy--dessert-4, .story-copy--dessert-5, .story-copy--neural-chair, .story-copy--neural-sync, .story-copy--mech-pov, .story-copy--mech-rise, .story-copy--xiaolan-billboard, .story-copy--launchpad-tv, .story-copy--ship-launch, .story-copy--mech-ready, .story-copy--pursuit-up, .story-copy--pursuit-hull, .story-copy--xiaolan-pod, .story-copy--viewport, .story-copy--fleet, .story-copy--explosion, .story-copy--impact, .story-copy--ftl, .story-copy--otherworld-awake, .story-copy--otherworld-flee, .story-copy--otherworld-guard, .story-copy--otherworld-monster, .story-copy--otherworld-battle, .story-copy--otherworld-defeat, .story-copy--otherworld-save, .story-copy--otherworld-reveal, .story-copy--otherworld-arc, .story-copy--otherworld-collapse, .story-copy--otherworld-sky, .story-copy--return-awake, .story-copy--return-elder, .story-copy--return-potato, .story-copy--return-leave, .story-copy--return-eat { top: 12%; left: 1rem; right: auto; bottom: auto; }
  .story-copy--danger { width: min(11.75rem, calc(100vw - 2rem)); }
  .story-copy--otherworld-monster { top: auto; bottom: 9%; }
  .story-copy--return-awake, .story-copy--return-elder { top: auto; bottom: 12%; left: 1rem; right: auto; }
  .news-card { top: 14%; right: 1rem; width: min(19rem, calc(100vw - 2rem)); padding: .8rem .9rem; }.news-card strong { font-size: 1.35rem; }.news-card small { font-size: .58rem; }
  .crowd-bubble { max-width: min(15.5rem, calc(100vw - 2rem)); font-size: .78rem; padding: .52rem .68rem; }.crowd-bubble--orbit { right: 1rem; bottom: 17%; }.crowd-bubble--billboard-a { top: 38%; left: 1rem; }.crowd-bubble--billboard-b { bottom: 8%; left: 1rem; }.crowd-bubble--stall { bottom: 12%; left: 1rem; }.crowd-bubble--engine { bottom: 13%; right: 1rem; }
  .crowd-bubble--recruitment-a { left: 1rem; bottom: 21%; }.crowd-bubble--recruitment-b { left: auto; right: 1rem; bottom: 12%; }.crowd-bubble--excluded { top: 12%; bottom: auto; left: 1rem; right: auto; }.crowd-bubble--delivery { bottom: 12%; right: 1rem; }.crowd-bubble--danger { bottom: 14%; left: 1rem; }
  .crowd-bubble--dessert-1 { right: 1rem; bottom: 12%; }.crowd-bubble--dessert-3 { left: 1rem; bottom: 12%; }.crowd-bubble--dessert-5a { top: 43%; left: 1rem; }.crowd-bubble--dessert-5b { right: 1rem; bottom: 8%; max-width: calc(100vw - 2rem); }
  .crowd-bubble--neural-sync, .crowd-bubble--mech-fall, .crowd-bubble--mech-rise, .crowd-bubble--xiaolan-billboard, .crowd-bubble--ship-launch, .crowd-bubble--pursuit-up, .crowd-bubble--xiaolan-pod, .crowd-bubble--fleet, .crowd-bubble--ftl, .crowd-bubble--otherworld-flee, .crowd-bubble--otherworld-guard, .crowd-bubble--otherworld-defeat, .crowd-bubble--otherworld-people, .crowd-bubble--return-elder, .crowd-bubble--return-potato { right: 1rem; left: auto; bottom: 13%; }
  .crowd-bubble--return-awake { top: 13%; left: 1rem; right: auto; max-width: calc(100vw - 2rem); }.crowd-bubble--return-elder { top: 12%; right: 1rem; bottom: auto; left: auto; }.crowd-bubble--return-leave { right: 1rem; left: auto; bottom: 9%; max-width: calc(100vw - 2rem); }
  .mission-alert { right: 1rem; bottom: 12%; width: min(18rem, calc(100vw - 2rem)); }
  .scroll-label { display: none; }.page-progress { right: .8rem; bottom: .8rem; width: 3.35rem; height: 3.35rem; }.chapter-end { top: auto; bottom: 12%; left: 1rem; width: 12rem; text-align: left; transform: none; }.chapter-end.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* 全屏分镜模式：手势只切换一镜，不产生纵向滚动。 */
html, body { width: 100%; height: 100%; overflow: hidden; scroll-behavior: auto; }
body { overscroll-behavior: none; }
#story { position: relative; width: 100%; height: 100svh; overflow: hidden; }
.sequence, .sequence--neural, .sequence--pursuit, .sequence--otherworld, .sequence--return { position: fixed; inset: 0; z-index: 0; height: 100svh; min-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .52s ease; }
.sequence.is-page-active { z-index: 2; opacity: 1; pointer-events: auto; }
.sequence.is-page-outgoing { z-index: 1; opacity: 0; }
.stage { position: relative; top: auto; height: 100svh; min-height: 0; }

@media (max-width: 700px) {
  .shot--fleet img, .shot--explosion img { object-position: 66% center; }
  .story-copy--mech-pov { top: auto; right: auto; bottom: 10%; left: 50%; }
  .story-copy--otherworld-flee, .story-copy--otherworld-guard, .story-copy--otherworld-battle, .story-copy--otherworld-defeat, .story-copy--otherworld-save, .story-copy--otherworld-child-pov, .story-copy--otherworld-arc { top: auto; bottom: 9%; }.story-copy--otherworld-child-pov { width: min(20.5rem, calc(100vw - 2rem)); right: 1rem; left: auto; }
  .crowd-bubble--mech-fall, .crowd-bubble--otherworld-defeat { top: 50%; right: auto; bottom: auto; left: 50%; width: min(15.5rem, calc(100vw - 2rem)); }.crowd-bubble--otherworld-flee, .crowd-bubble--otherworld-guard { top: 12%; right: 1rem; bottom: auto; left: auto; }.crowd-bubble--launchpad-tv { right: auto; bottom: 8%; left: 50%; width: min(21rem, calc(100vw - 2rem)); }
  .crowd-bubble--otherworld-awake { top: 50%; right: auto; bottom: auto; left: 50%; width: min(15.5rem, calc(100vw - 2rem)); }
}

/* 系统同步与重新连接：始终以整个可视屏幕为坐标系居中。 */
.progress { display: none; }
.neural-sync-screen, .otherworld-reconnect-screen { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; align-content: center; justify-content: center; }
.neural-progress, .reconnect-progress { width: min(19rem, calc(100vw - 4rem)); justify-self: center; }

/* 自动黑场结束时，直接显现指定镜头，不让上一镜的淡出残留一帧。 */
body.is-instant-switch .shot, body.is-instant-switch .sequence { transition: none !important; }
.shot.is-preview img { filter: blur(2.4px) saturate(.9); }

/* 神经同步进入时立即压成纯黑；只在结束阶段淡出黑屏。 */
.neural-sync-screen.is-active { transition: none; }
.neural-sync-screen.is-active.is-fading { transition: opacity 1.1s ease; }

@media (max-width: 700px) {
  /* 每个横移镜头都以主体为落点：静止 1.5 秒，随后连续移动 3 秒并缓停。 */
  .shot--dessert-1 img { --pan-from: 57%; --pan-to: 70%; }
  .shot--neural-chair img { --pan-from: 29%; --pan-to: 72%; }
  .shot--mech-fall img { --pan-from: 40%; --pan-to: 56%; }
  .shot--mech-rise img { --pan-from: 35%; --pan-to: 57%; }
  .shot--xiaolan-billboard img { --pan-from: 38%; --pan-to: 84%; }
  .shot--launchpad-tv img { --pan-from: 31%; --pan-to: 58%; }
  .shot--pursuit-up img { --pan-from: 42%; --pan-to: 60%; }
  .shot--xiaolan-pod img { --pan-from: 50%; --pan-to: 72%; }
  .shot--viewport img { --pan-from: 43%; --pan-to: 58%; }
  .shot--dessert-1.is-current img, .shot--neural-chair.is-current img, .shot--mech-fall.is-current img, .shot--mech-rise.is-current img, .shot--xiaolan-billboard.is-current img, .shot--launchpad-tv.is-current img, .shot--pursuit-up.is-current img, .shot--xiaolan-pod.is-current img, .shot--viewport.is-current img { animation: narrow-subject-pan 4.5s cubic-bezier(.22, .72, .28, 1) both; }
  /* 第 15 页在“数日后”黑场下已提前激活；延后 3.5 秒后再计入 1.5 秒静止期，
     让黑场结束后仍能留出约 2 秒观察机甲。 */
  .shot--neural-chair.is-current img { animation-delay: 3.5s; }

  /* 22、23 页保持静止，让飞船始终处于可读的中央区域。 */
  .shot--ship-launch img { object-position: 61% center; }
  .shot--mech-ready img { object-position: 55% center; }

  /* 28–30 页固定关键物，不再把画面推到无主体的边缘。 */
  .shot--fleet img { object-position: 70% center !important; }
  .shot--explosion img { object-position: 62% center !important; }
  .shot--impact img { object-position: 56% center !important; }
  .story-copy--fleet, .story-copy--explosion, .story-copy--impact { top: auto; right: auto; bottom: 8%; left: 50%; width: min(20.5rem, calc(100vw - 2rem)); transform: translate(-50%, 1.2rem); }
  .story-copy--fleet.is-active, .story-copy--explosion.is-active, .story-copy--impact.is-active { transform: translate(-50%, 0); }
}

/* 第 49 页：连接中断黑屏更缓慢地淡出。 */
.return-disconnect-screen.is-fading { transition-duration: 3s; }

@keyframes narrow-subject-pan {
  0%, 33.333% { object-position: var(--pan-from) center; transform: scale(1.045) translate3d(0, 0, 0); }
  100% { object-position: var(--pan-to) center; transform: scale(1.045) translate3d(0, 0, 0); }
}

/* 手机入场优先稳定：低清图本身已足够柔化，避免额外 GPU 模糊开销。 */
@media (max-width: 700px) {
  .shot.is-preview img { filter: none; }
  .story-copy, .crowd-bubble, .news-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .debug-console { top: .55rem; left: .55rem; width: calc(100vw - 1.1rem); max-height: 40svh; font-size: .6rem; }

  /* 不是当前镜头的完整舞台不参与 iOS 的布局/绘制/合成。
     手机端以稳定的镜头切换优先，避免 53 个全屏层同时常驻。 */
  .sequence:not(.is-page-active):not(.is-page-outgoing) { display: none; }
  .shot { display: none; }
  .shot.is-current { display: block; }
  [data-cue]:not(.is-active) { display: none; }
}

body.is-safe-mode *, body.is-safe-mode *::before, body.is-safe-mode *::after { animation: none !important; transition-duration: .01ms !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* 指定对白的镜头落点：不遮挡主体，且在手机与桌面保持同一叙事方位。 */
.crowd-bubble--stall, .crowd-bubble--explosion { left: 50%; right: auto; transform: translate(-50%, .9rem) scale(.98); }
.crowd-bubble--stall { top: 50%; bottom: auto; }
.crowd-bubble--explosion { top: 50%; bottom: auto; }
.crowd-bubble--fleet { top: 48%; right: auto; bottom: auto; left: 67%; transform: translate(-50%, .9rem) scale(.98); }
.crowd-bubble--stall.is-active, .crowd-bubble--explosion.is-active, .crowd-bubble--fleet.is-active { transform: translate(-50%, 0) scale(1); }

@media (max-width: 700px) {
  .shot-scrubber { bottom: .92rem; left: .85rem; width: calc(100vw - 5.9rem); transform: none; }
  .crowd-bubble--stall { top: 50%; right: auto; bottom: auto; left: 50%; width: min(15.5rem, calc(100vw - 2rem)); }
  .crowd-bubble--explosion { top: 50%; right: auto; bottom: auto; left: 50%; width: min(15.5rem, calc(100vw - 2rem)); }
  .crowd-bubble--fleet { top: 48%; right: auto; bottom: auto; left: 67%; width: min(15.5rem, calc(100vw - 2rem)); }
  .crowd-bubble--otherworld-awake { top: 50%; right: auto; bottom: auto; left: 50%; }
}