/* Stage — single-page presentation system */
:root{
  --stage-top:60px;
  --stage-bottom:64px;
  --stage-x:clamp(20px,5vw,86px);
  --ink:#05090b;
  --paper-line:rgba(226,222,206,.14);
  --paper-line-2:rgba(226,222,206,.3);
  --txt:#f2f1e9;
  --txt-2:#c3cac4;
  --txt-3:#8b958f;
  --gold:#cdae6d;
  --serif:Georgia,"Noto Serif SC","Songti SC",serif;
  --sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus,a:focus{outline:none}
button:focus-visible,a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}

/* ── backdrop ── */
.bg-field{position:fixed;inset:0;z-index:0;background:
  radial-gradient(ellipse at 14% -8%,color-mix(in srgb,var(--accent,#4c9e99) 12%,transparent),transparent 42%),
  radial-gradient(ellipse at 92% 104%,color-mix(in srgb,var(--accent,#4c9e99) 9%,transparent),transparent 44%),
  linear-gradient(150deg,#04080a,#0a1417 55%,#04080a)}
.bg-grid{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(150,190,185,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,185,.5) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%)}
.bg-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 min(220px,22vw) rgba(0,0,0,.72)}

/* ── top bar ── */
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--stage-top);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:0 var(--stage-x);border-bottom:1px solid var(--paper-line);
  background:linear-gradient(180deg,rgba(4,8,10,.97),rgba(4,8,10,.72))}
.topbar::after{content:"";position:absolute;left:0;bottom:-1px;width:26%;height:1px;
  background:linear-gradient(90deg,var(--accent,var(--gold)),transparent)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-seal{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--paper-line-2);
  color:var(--gold);font:700 15px/1 var(--serif);background:rgba(205,174,109,.06)}
.brand-copy{min-width:0}
.brand-copy b{display:block;font:600 12px/1.2 var(--serif);letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy small{display:block;margin-top:3px;color:var(--txt-3);font:7px/1 var(--mono);letter-spacing:.2em}
.chapter-tag{justify-self:center;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:6px 13px;border:1px solid var(--paper-line);color:var(--txt-2);font:8px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.tools{justify-self:end;display:flex;gap:6px}
.tool{height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;
  border:1px solid var(--paper-line);color:#d8ddd6;background:rgba(255,255,255,.02);transition:background-color .16s,border-color .16s,color .16s}
.tool:hover{border-color:var(--paper-line-2);background:rgba(255,255,255,.06)}
.tool.on{color:var(--accent,var(--gold));border-color:color-mix(in srgb,var(--accent,var(--gold)) 55%,transparent)}
.tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.tool span{color:var(--txt-3);font-size:9px;letter-spacing:.08em}

/* ── stage ── */
.stage{position:fixed;z-index:10;top:var(--stage-top);left:0;right:0;bottom:var(--stage-bottom);overflow:hidden}
.slide{position:absolute;inset:0;display:none;padding:clamp(16px,3.4vh,40px) var(--stage-x);overflow:hidden}
.slide.live{display:flex;align-items:center}
.inner{position:relative;z-index:2;width:min(1280px,100%);max-height:100%;margin:auto}

/* 逐层入场：标题、正文、组件依次浮现 */
.slide.live .inner>*,
.slide.live .cover>*,.slide.live .chapter>*,.slide.live .event>*,
.slide.live .figure>*,.slide.live .state>*,.slide.live .notes-page>*,.slide.live .ending>*{
  animation:riseIn .58s cubic-bezier(.2,.78,.18,1) both}
.slide.live .kicker{animation:wipeIn .5s cubic-bezier(.2,.78,.18,1) both}
.slide.live .t-hero,.slide.live .t-page,.slide.live .fig-name,.slide.live .chapter h2,.slide.live .crest-card h2{
  animation:titleIn .62s cubic-bezier(.18,.82,.16,1) both;animation-delay:.05s}
.slide.live .lead{animation:riseIn .6s cubic-bezier(.2,.78,.18,1) both;animation-delay:.13s}
.slide.live .body{animation:riseIn .6s cubic-bezier(.2,.78,.18,1) both;animation-delay:.19s}
.slide.live .rule{animation:ruleIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.24s}
.slide.live .quote{animation:riseIn .62s cubic-bezier(.2,.78,.18,1) both;animation-delay:.3s}
.slide.live .fact,.slide.live .metric,.slide.live .note,.slide.live .impact,
.slide.live .region,.slide.live .tl-item,.slide.live .row,.slide.live .tag{
  animation:cellIn .5s cubic-bezier(.2,.78,.18,1) both}
.slide.live .fact:nth-child(1),.slide.live .metric:nth-child(1),.slide.live .note:nth-child(1),
.slide.live .impact:nth-child(1),.slide.live .region:nth-child(1),.slide.live .tl-item:nth-child(1),
.slide.live .row:nth-child(1),.slide.live .tag:nth-child(1){animation-delay:.22s}
.slide.live .fact:nth-child(2),.slide.live .metric:nth-child(2),.slide.live .note:nth-child(2),
.slide.live .impact:nth-child(2),.slide.live .region:nth-child(2),.slide.live .tl-item:nth-child(2),
.slide.live .row:nth-child(2),.slide.live .tag:nth-child(2){animation-delay:.29s}
.slide.live .fact:nth-child(3),.slide.live .metric:nth-child(3),.slide.live .note:nth-child(3),
.slide.live .impact:nth-child(3),.slide.live .region:nth-child(3),.slide.live .tl-item:nth-child(3),
.slide.live .row:nth-child(3),.slide.live .tag:nth-child(3){animation-delay:.36s}
.slide.live .note:nth-child(4),.slide.live .impact:nth-child(4),.slide.live .region:nth-child(4),
.slide.live .tl-item:nth-child(4),.slide.live .row:nth-child(4){animation-delay:.43s}
.slide.live .note:nth-child(5),.slide.live .region:nth-child(5),.slide.live .tl-item:nth-child(5),
.slide.live .row:nth-child(5){animation-delay:.5s}
.slide.live .note:nth-child(6),.slide.live .region:nth-child(6),.slide.live .tl-item:nth-child(6),
.slide.live .row:nth-child(6){animation-delay:.57s}
.slide.live .portrait{animation:portraitIn .78s cubic-bezier(.16,.84,.14,1) both}
.slide.live .crest{animation:sealIn .8s cubic-bezier(.16,.86,.14,1) both;animation-delay:.08s}
.slide.live .timebox{animation:slabIn .66s cubic-bezier(.18,.82,.16,1) both}
.slide.live .cover-num,.slide.live .ending-mark,.slide.live .chapter-num{
  animation:ghostIn 1.1s cubic-bezier(.2,.8,.2,1) both}
.slide.live .mark{animation:markIn 1.4s cubic-bezier(.2,.8,.2,1) both}

/* 回看方向：反向位移 */
.slide.live.back .inner>*,.slide.live.back .cover>*,.slide.live.back .chapter>*,
.slide.live.back .event>*,.slide.live.back .figure>*,.slide.live.back .state>*,
.slide.live.back .notes-page>*,.slide.live.back .ending>*,
.slide.live.back .lead,.slide.live.back .body,.slide.live.back .quote{animation-name:dropIn}

@keyframes riseIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:none}}
@keyframes titleIn{from{opacity:0;transform:translate3d(0,34px,0);letter-spacing:.02em}to{opacity:1;transform:none}}
@keyframes wipeIn{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}
@keyframes cellIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes ruleIn{from{opacity:0;transform:scaleX(0);transform-origin:left}to{opacity:1;transform:none}}
@keyframes slabIn{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}}
@keyframes portraitIn{from{opacity:0;transform:translate3d(-22px,14px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes sealIn{from{opacity:0;transform:scale(.72) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes ghostIn{from{opacity:0;transform:translate3d(0,30px,0) scale(1.04)}to{opacity:1;transform:none}}
@keyframes markIn{from{opacity:0;transform:translate3d(38px,26px,0)}to{opacity:1;transform:none}}

.mark{position:absolute;z-index:0;right:-.04em;bottom:-.22em;color:transparent;pointer-events:none;
  font:700 clamp(150px,25vw,340px)/.8 var(--serif);letter-spacing:-.08em;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent,var(--gold)) 15%,transparent)}
.code-tag{position:absolute;z-index:3;top:clamp(10px,2vh,20px);right:var(--stage-x);color:#61706c;font:7px/1 var(--mono);letter-spacing:.2em}

/* ── shared type ── */
.kicker{display:flex;align-items:center;gap:9px;color:color-mix(in srgb,var(--accent,var(--gold)) 72%,white);
  font:700 8px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.kicker::before{content:"";width:26px;height:1px;background:currentColor}
.t-hero{margin:14px 0 16px;font:700 clamp(40px,6.6vw,96px)/.92 var(--serif);letter-spacing:-.05em}
.t-page{margin:11px 0 14px;font:700 clamp(30px,4.4vw,60px)/1.02 var(--serif);letter-spacing:-.04em}
.lead{max-width:70ch;color:#d3d8d1;font:clamp(13px,1.25vw,17px)/1.75 var(--serif)}
.body{max-width:66ch;margin-top:12px;color:var(--txt-2);font-size:clamp(11px,.95vw,13px);line-height:1.85}
.rule{width:min(420px,58%);height:2px;margin:20px 0 0;background:linear-gradient(90deg,var(--accent,var(--gold)),transparent)}

/* ── cover ── */
.cover{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(200px,.75fr);align-items:center;gap:clamp(24px,5vw,80px)}
.cover-num{color:transparent;font:700 clamp(90px,15vw,210px)/.72 var(--serif);text-align:right;letter-spacing:-.08em;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent,var(--gold)) 46%,transparent)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:22px;border:1px solid var(--paper-line);background:var(--paper-line)}
.fact{padding:12px 13px;background:rgba(5,10,12,.86)}
.fact small{display:block;color:var(--txt-3);font:7px/1 var(--mono);letter-spacing:.15em}
.fact b{display:block;margin-top:7px;font:500 clamp(12px,1.1vw,15px)/1.3 var(--serif)}

/* ── chapter divider ── */
.chapter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,5vw,70px)}
.chapter-num{color:transparent;font:700 clamp(80px,13vw,190px)/.72 var(--serif);
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent,var(--gold)) 62%,transparent)}
.chapter h2{margin:12px 0 14px;font:700 clamp(36px,5.6vw,80px)/.96 var(--serif);letter-spacing:-.05em}

/* ── event ── */
.event{display:grid;grid-template-columns:minmax(180px,.34fr) minmax(0,1.66fr);gap:clamp(20px,4vw,58px);align-items:stretch}
.timebox{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px;
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 34%,var(--paper-line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent,var(--gold)) 13%,#0e1719),#060c0e)}
.timebox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--gold))}
.timebox .date{font:700 clamp(30px,3.6vw,54px)/.9 var(--serif);letter-spacing:-.04em}
.timebox .era{display:block;margin-top:10px;color:color-mix(in srgb,var(--accent,var(--gold)) 76%,white);font:8px/1.4 var(--mono);letter-spacing:.16em}
.timebox .clock{margin-top:18px;padding-top:14px;border-top:1px solid var(--paper-line)}
.timebox .clock b{display:block;font:400 clamp(20px,2.2vw,30px)/1 var(--mono)}
.timebox .clock span{display:block;margin-top:7px;color:var(--txt-3);font:8px/1.5 var(--mono);letter-spacing:.1em}
.impacts{display:grid;gap:7px;margin-top:16px}
.impact{position:relative;padding:9px 12px 9px 26px;border:1px solid var(--paper-line);background:rgba(255,255,255,.018);
  color:#c2c9c2;font-size:clamp(10px,.9vw,12px);line-height:1.55}
.impact::before{content:"";position:absolute;left:11px;top:14px;width:5px;height:5px;background:var(--accent,var(--gold));transform:rotate(45deg)}

/* ── figure (person) ── */
.figure{display:grid;grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr);gap:clamp(22px,4.5vw,64px);align-items:center}
.portrait{position:relative;aspect-ratio:3/3.5;max-height:min(56vh,430px);display:grid;place-items:end center;overflow:hidden;
  border:1px solid var(--paper-line-2);
  background:radial-gradient(circle at 50% 26%,rgba(243,240,224,.22) 0 15%,transparent 15.4%),
             linear-gradient(160deg,color-mix(in srgb,var(--accent,var(--gold)) 36%,#1d2c2f),#070d0f)}
.portrait::after{content:"";position:absolute;bottom:-14%;width:62%;height:52%;border-radius:50% 50% 6% 6%;background:rgba(238,240,226,.13)}
.portrait b{position:relative;z-index:2;margin-bottom:26%;font:700 clamp(26px,3vw,44px)/1 var(--serif);text-shadow:0 3px 14px #000}
.portrait i{position:absolute;left:11px;top:11px;color:rgba(255,255,255,.6);font:7px/1 var(--mono);font-style:normal;letter-spacing:.18em}
.fig-role{color:color-mix(in srgb,var(--accent,var(--gold)) 74%,white);font:8px/1.3 var(--mono);letter-spacing:.18em}
.fig-name{margin:10px 0 12px;font:700 clamp(34px,5vw,68px)/.98 var(--serif);letter-spacing:-.04em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tag{padding:6px 10px;border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 34%,var(--paper-line));
  color:color-mix(in srgb,var(--accent,var(--gold)) 70%,white);font:8px/1 var(--mono);letter-spacing:.1em}
.quote{position:relative;margin-top:18px;padding:14px 16px 13px 28px;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  color:#dcdfd6;font:italic clamp(13px,1.15vw,16px)/1.7 var(--serif)}
.quote::before{content:"“";position:absolute;left:1px;top:4px;color:var(--accent,var(--gold));font:28px/1 var(--serif)}
.quote cite{display:block;margin-top:7px;color:var(--txt-3);font:normal 7px/1.3 var(--mono);letter-spacing:.12em}

/* ── state (nation) ── */
.state{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);gap:clamp(20px,4vw,56px);align-items:stretch}
.crest-card{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.6vw,34px);
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 30%,var(--paper-line-2));
  background:radial-gradient(circle at 84% 10%,color-mix(in srgb,var(--accent,var(--gold)) 20%,transparent),transparent 46%),
             linear-gradient(155deg,#111e21,#060c0e 72%)}
.crest{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);display:grid;place-items:center;margin-bottom:20px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 70%,white 10%);
  color:color-mix(in srgb,var(--accent,var(--gold)) 74%,white);font:700 clamp(24px,2.6vw,34px)/1 var(--serif);
  box-shadow:inset 0 0 0 7px rgba(0,0,0,.16)}
.crest-card h2{font:700 clamp(26px,3.4vw,46px)/1.02 var(--serif);letter-spacing:-.04em}
.crest-card .ideo{margin-top:12px;color:color-mix(in srgb,var(--accent,var(--gold)) 66%,white);font-size:clamp(10px,.9vw,12px);line-height:1.6}
.crest-card .motto{margin-top:auto;padding-top:16px;border-top:1px solid var(--paper-line);color:#d5d8d0;font:italic clamp(12px,1vw,14px)/1.6 var(--serif)}
.panel{display:flex;flex-direction:column;border:1px solid var(--paper-line);background:linear-gradient(150deg,#0f1a1d,#070e10)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--paper-line);
  background:#101d20;font:600 10px/1.2 var(--serif);letter-spacing:.1em}
.panel-head small{color:var(--txt-3);font:7px/1 var(--mono);letter-spacing:.14em}
.panel-body{flex:1;display:flex;flex-direction:column;padding:clamp(13px,1.6vw,20px);gap:14px;min-height:0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--paper-line)}
.metric{padding:11px;background:#070f11}
.metric small{display:block;color:var(--txt-3);font:7px/1.2 var(--mono);letter-spacing:.13em}
.metric b{display:block;margin-top:8px;color:#e6e9e0;font:500 clamp(14px,1.5vw,22px)/1.1 var(--serif)}
.metric.hi b{color:var(--accent,var(--gold))}
.rows{display:grid}
.row{display:grid;grid-template-columns:minmax(80px,.6fr) 1.4fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--paper-line);
  font-size:clamp(10px,.88vw,12px);line-height:1.5}
.row:last-child{border-bottom:0}
.row span{color:var(--txt-3)}
.row b{font-weight:500;color:#dbe0d8;text-align:right}

/* ── notes grid (process) ── */
.notes-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.82fr);gap:clamp(20px,4vw,58px);align-items:center}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.note{padding:13px;border:1px solid var(--paper-line);border-left:2px solid var(--accent,var(--gold));background:rgba(255,255,255,.022)}
.note small{display:block;color:var(--accent,var(--gold));font:7px/1 var(--mono);letter-spacing:.14em}
.note b{display:block;margin:8px 0 6px;font:600 clamp(12px,1.05vw,15px)/1.3 var(--serif)}
.note p{color:var(--txt-3);font-size:clamp(9px,.82vw,11px);line-height:1.6}

/* ── timeline ── */
.tl{position:relative;margin-top:22px;padding-left:34px;display:grid;gap:14px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:1px;background:linear-gradient(var(--accent,var(--gold)),var(--paper-line),transparent)}
.tl-item{position:relative;display:grid;grid-template-columns:minmax(96px,120px) 1fr;gap:18px}
.tl-item::before{content:"";position:absolute;left:-32px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--accent,var(--gold));
  box-shadow:0 0 0 3px #060c0e}
.tl-item time{color:var(--accent,var(--gold));font:700 8px/1.4 var(--mono);letter-spacing:.1em}
.tl-item h3{margin-bottom:5px;font:600 clamp(12px,1.1vw,15px)/1.3 var(--serif)}
.tl-item p{color:var(--txt-3);font-size:clamp(9px,.85vw,11px);line-height:1.6}

/* ── region grid ── */
.regions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:22px}
.region{padding:14px;border:1px solid var(--paper-line);background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.region i{display:block;width:22px;height:2px;margin-bottom:11px;background:var(--rc,var(--accent,var(--gold)))}
.region small{display:block;color:var(--txt-3);font:7px/1 var(--mono);letter-spacing:.14em}
.region b{display:block;margin:7px 0 6px;font:600 clamp(12px,1.05vw,15px)/1.25 var(--serif)}
.region p{color:var(--txt-3);font-size:clamp(9px,.82vw,11px);line-height:1.6}

/* ── ending ── */
.ending{display:grid;grid-template-columns:minmax(180px,.5fr) minmax(0,1.5fr);gap:clamp(24px,5vw,74px);align-items:center}
.ending-mark{color:transparent;font:700 clamp(100px,17vw,250px)/.74 var(--serif);
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent,var(--gold)) 52%,transparent)}

/* ── bottom bar ── */
.controls{position:fixed;z-index:40;left:0;right:0;bottom:0;height:var(--stage-bottom);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,3vw,30px);
  padding:0 var(--stage-x);border-top:1px solid var(--paper-line);background:linear-gradient(0deg,rgba(4,8,10,.98),rgba(4,8,10,.76))}
.nav-btn{height:38px;display:inline-flex;align-items:center;gap:9px;padding:0 16px;border:1px solid var(--paper-line);
  color:#dfe3dc;background:rgba(255,255,255,.03);transition:.16s}
.nav-btn:hover:not(:disabled){border-color:var(--paper-line-2);background:rgba(255,255,255,.075)}
.nav-btn:disabled{opacity:.28;cursor:not-allowed}
.nav-btn.next{border-color:color-mix(in srgb,var(--accent,var(--gold)) 46%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent,var(--gold)) 18%,transparent),rgba(255,255,255,.02))}
.nav-btn b{font:600 13px/1 var(--serif)}
.nav-btn span{font-size:11px;letter-spacing:.08em}
.meter{min-width:0}
.meter-bar{height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent,var(--gold)),var(--gold));transition:width .3s ease}
.meter-info{display:flex;justify-content:space-between;gap:14px;margin-top:7px;color:var(--txt-3);font:8px/1.2 var(--mono);letter-spacing:.14em}
.meter-info b{color:#cfd5ce;font-weight:400;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* click zones */
.zone{position:fixed;z-index:20;top:var(--stage-top);bottom:var(--stage-bottom);width:22%;border:0;background:transparent}
.zone.prev{left:0;cursor:w-resize}
.zone.next{right:0;cursor:e-resize}

/* drawer */
.drawer{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(380px,90vw);display:grid;grid-template-rows:58px 1fr;
  transform:translateX(103%);border-left:1px solid var(--paper-line-2);background:#070e10;box-shadow:-20px 0 60px rgba(0,0,0,.55);
  transition:transform .26s cubic-bezier(.22,.76,.2,1)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--paper-line)}
.drawer-head h2{font:600 15px/1 var(--serif);letter-spacing:.06em}
.drawer-body{overflow:auto;padding:12px 14px 26px}
.dgroup{margin-bottom:18px}
.dgroup h3{margin-bottom:6px;color:color-mix(in srgb,var(--accent,var(--gold)) 72%,white);font:8px/1 var(--mono);letter-spacing:.16em}
.dlink{width:100%;display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 8px;border-bottom:1px solid var(--paper-line);
  color:#d3d8d1;text-align:left;transition:background-color .14s}
.dlink:hover{background:rgba(255,255,255,.04)}
.dlink.on{background:color-mix(in srgb,var(--accent,var(--gold)) 10%,transparent)}
.dlink span{color:var(--txt-3);font:8px/1.3 var(--mono)}
.dlink b{font-size:10px;font-weight:500;line-height:1.4}
.scrim{position:fixed;z-index:50;inset:0;opacity:0;pointer-events:none;background:rgba(0,0,0,.6);transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(var(--stage-bottom) + 16px);padding:9px 14px;opacity:0;
  transform:translate(-50%,10px);border:1px solid var(--paper-line-2);background:#0e1a1d;color:#dde2db;font-size:10px;
  pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── responsive ── */
@media(max-width:1080px){
  .cover,.state,.notes-page,.figure,.ending{grid-template-columns:1fr}
  .cover-num,.ending-mark{display:none}
  .notes{grid-template-columns:1fr 1fr}
  .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .event{grid-template-columns:minmax(150px,.4fr) 1fr}
  .portrait{max-height:26vh;aspect-ratio:auto;height:26vh}
  .figure{gap:20px}
}
@media(max-width:720px){
  :root{--stage-top:54px;--stage-bottom:58px;--stage-x:16px}
  .topbar{grid-template-columns:1fr auto}
  .chapter-tag{display:none}
  .brand-copy small,.tool span{display:none}
  .slide{padding:14px 16px}
  .t-hero{font-size:clamp(34px,10vw,52px);margin:10px 0 12px}
  .t-page{font-size:clamp(24px,7.4vw,38px)}
  .lead{font-size:13px;line-height:1.66}
  .body{font-size:11px;line-height:1.7;margin-top:9px}
  .facts,.metrics{grid-template-columns:1fr;max-height:34vh;overflow:hidden}
  .fact{padding:9px 11px}
  .chapter{grid-template-columns:1fr;gap:6px}
  .chapter-num{font-size:64px}
  .event{grid-template-columns:1fr;gap:12px}
  .timebox{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:13px 15px}
  .timebox .date{font-size:30px}
  .timebox .era{margin-top:6px}
  .timebox .clock{margin-top:0;padding-top:0;border-top:0;text-align:right}
  .timebox .clock b{font-size:16px}
  .timebox .clock span{margin-top:4px;font-size:7px}
  .impacts{margin-top:11px;gap:6px}
  .impact{padding:8px 10px 8px 23px;font-size:10px}
  .portrait{height:19vh;min-height:118px}
  .portrait b{margin-bottom:14%;font-size:22px}
  .fig-name{font-size:clamp(26px,8vw,38px);margin:7px 0 9px}
  .tags{margin-top:11px}
  .quote{margin-top:12px;padding:11px 12px 11px 22px;font-size:12px}
  .crest{width:52px;height:52px;margin-bottom:13px;font-size:20px}
  .crest-card{padding:16px}
  .crest-card h2{font-size:26px}
  .crest-card .motto{margin-top:14px;padding-top:12px;font-size:11px}
  .panel-body{padding:12px;gap:10px}
  .row{grid-template-columns:1fr;gap:2px;padding:7px 0}
  .row b{text-align:left}
  .notes{grid-template-columns:1fr;gap:7px;margin-top:12px}
  .note{padding:10px}
  .regions{grid-template-columns:1fr;gap:6px;margin-top:12px}
  .region{padding:11px}
  .tl{margin-top:14px;padding-left:24px;gap:10px}
  .tl-item{grid-template-columns:1fr;gap:2px}
  .tl-item::before{left:-22px}
  .zone{display:none}
  .nav-btn{height:34px;padding:0 12px}
  .nav-btn span{display:none}
  .meter-info b{max-width:42vw}
  .mark{font-size:120px}
}
@media(max-height:620px) and (min-width:721px){
  .t-hero{font-size:clamp(32px,4.6vw,58px)}
  .t-page{font-size:clamp(24px,3.4vw,40px)}
  .lead{font-size:13px;line-height:1.6}
  .facts{margin-top:14px}
  .fact{padding:9px 11px}
  .portrait{max-height:40vh}
  .notes{margin-top:12px}
}
/* ── 质感与呼吸 ── */
.bg-field{transition:background 1.2s ease}
.bg-field::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent,#4c9e99) 7%,transparent),transparent 60%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}
.bg-grid{animation:drift 26s linear infinite}
@keyframes drift{to{background-position:60px 60px,60px 60px}}

/* 翻页时的一层扫光 */
.sweep{position:fixed;z-index:30;top:var(--stage-top);left:0;right:0;bottom:var(--stage-bottom);pointer-events:none;opacity:0}
.sweep.run{animation:sweepGo .62s cubic-bezier(.2,.8,.2,1)}
.sweep::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 38%,color-mix(in srgb,var(--accent,var(--gold)) 22%,transparent) 50%,transparent 62%)}
@keyframes sweepGo{0%{opacity:0;transform:translateX(-42%)}30%{opacity:.85}100%{opacity:0;transform:translateX(42%)}}

/* 组件光泽 */
.timebox,.crest-card,.panel,.portrait{position:relative;overflow:hidden}
.timebox::after,.crest-card::after,.portrait::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.07),transparent 46%)}
.crest{position:relative}
.crest::after{content:"";position:absolute;inset:-9px;border:1px dashed color-mix(in srgb,var(--accent,var(--gold)) 30%,transparent);
  border-radius:50%;animation:spinSlow 22s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.timebox::before{animation:pulseBar 3.4s ease-in-out infinite}
@keyframes pulseBar{0%,100%{opacity:.6}50%{opacity:1;box-shadow:0 0 16px var(--accent,var(--gold))}}
.tl-item::before{animation:dotPulse 2.8s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px #060c0e}50%{box-shadow:0 0 0 3px #060c0e,0 0 12px var(--accent,var(--gold))}}
.note,.region,.impact,.fact,.metric{transition:border-color .2s,background-color .2s,transform .2s}
.note:hover,.region:hover,.impact:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent,var(--gold)) 46%,transparent)}
.nav-btn.next::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .5s}
.nav-btn{position:relative;overflow:hidden}
.nav-btn.next:hover::after{transform:translateX(120%)}
.meter-bar i{box-shadow:0 0 10px color-mix(in srgb,var(--accent,var(--gold)) 60%,transparent)}
.quote{overflow:hidden}
.quote::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;transform-origin:left;
  background:linear-gradient(90deg,var(--accent,var(--gold)),transparent)}
.slide.live .quote::after{animation:ruleIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.42s}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}