:root{
  --bg:#000; --ink:#f5f5f7; --ink2:#a1a1a6; --ink3:#8e8e93; --hair:rgba(245,245,247,.18);
  --rg-vpn:#E0559A;--lc4:#E8583A; --lplc2:#9468DB; --lc9:#169A87;
  --sans:"Inter","Segoe UI Variable Display","Segoe UI","SF Pro Display",-apple-system,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scrollbar-width:thin;scrollbar-color:#2a2b2e transparent}
body{margin:0;color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;outline:none}
#stage.drag{cursor:grabbing}
#shade{position:fixed;left:0;right:0;bottom:0;height:34vh;pointer-events:none;z-index:1;background:linear-gradient(transparent,rgba(0,0,0,.82))}
#leaders{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#leaders path{fill:none;stroke:rgba(245,245,247,.42);stroke-width:1}
#leaders path.sch{stroke-dasharray:3 3}
#leaders circle{fill:var(--ink)}
#labels{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.lab{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;line-height:1.35;will-change:transform,opacity}
.lab b{display:block;font-weight:500}
.lab span{display:block;font-size:12px;color:var(--ink2)}
.lab.sch b{color:var(--ink2);font-weight:400}
.lab.dn b{font:500 12px var(--mono)}
.lab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;float:left;margin-top:5px}
.lab.dn{text-shadow:0 0 10px #000}
.lab.rg{width:190px;white-space:normal;text-shadow:0 0 10px #000;cursor:default}
.lab.rg b{font-size:15px;font-weight:600}
.lab.rg span{font-size:12px;margin-left:14px}
.lab.rg em{display:block;margin:3px 0 0 14px;font-style:normal;font-size:12px;font-weight:600;color:var(--ink)}
.lab.rg.to-l{text-align:right}
.lab.rg.to-l .dot{float:right;margin:5px 0 0 6px}
.lab.rg.to-l span,.lab.rg.to-l em{margin-left:0;margin-right:14px}

/* 本地导航 */
.mast{position:fixed;z-index:7;top:0;left:0;right:0;height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(18px,3.4vw,48px);
  background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(245,245,247,.08)}
.mark{font-size:18px;font-weight:600;letter-spacing:0;color:var(--ink);text-decoration:none}
.mast nav{display:flex;gap:clamp(12px,2vw,28px)}
.mast button{font:13px var(--sans);color:var(--ink2);background:none;border:0;padding:4px 0;cursor:pointer;transition:color .2s}
.mast button:hover{color:var(--ink)}

.track{height:1300vh}
.cards{position:fixed;inset:0;z-index:2;pointer-events:none}
.card{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translateY(var(--ty,0))}
.card.live .scn{pointer-events:auto}

/* 居中标题：上或下 */
.head{position:absolute;left:50%;transform:translateX(-50%);width:min(90vw,1000px);text-align:center;text-shadow:0 0 18px #000}
.head.top{top:clamp(64px,10vh,110px)}
.head.bottom{bottom:clamp(24px,5vh,56px)}
.head h2{font-size:clamp(28px,3.6vw,54px);line-height:1.12}
.head p{margin:8px 0 0;font-size:clamp(16px,1.55vw,22px);color:var(--ink2)}
.head.hero h1{font-size:clamp(68px,10.5vw,160px);line-height:1;letter-spacing:-.02em;font-weight:700}
.head.hero p{margin-top:12px;font-size:clamp(18px,1.9vw,28px);color:var(--ink);font-weight:500}
.head.hero.small h2{font-size:clamp(40px,5.6vw,84px)}
.head.slim{top:clamp(58px,8vh,84px)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:13px;color:var(--ink2)}
.cue::after{content:"";display:block;width:1px;height:26px;margin:6px auto 0;background:linear-gradient(var(--ink),transparent)}
.tag{display:inline-block;margin-bottom:10px;font-size:12px;color:var(--ink2);border:1px solid var(--hair);border-radius:99px;padding:1px 10px;text-shadow:none}

/* 左右巨型数字 */
.stat{position:absolute;top:44%;transform:translateY(-50%);width:min(27vw,400px);text-shadow:0 0 22px #000,0 0 6px #000}
.stat.l{left:clamp(18px,3.4vw,48px)}
.stat.r{right:calc(clamp(18px,3.4vw,48px) + 26px);text-align:right}
.stat>b{display:block;font-size:clamp(40px,5.4vw,84px);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat{transition:opacity .35s}
.stat.dim{opacity:.32}
.dvrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.head .dvrow .scn{margin:0}
.stat .sm{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.todo{list-style:none;margin:0 0 clamp(40px,7vh,72px);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.todo li{position:relative;padding:12px 0 12px 30px;font-size:16px;font-weight:500;border-bottom:1px solid #e4e4e8}
.todo li i{position:absolute;left:0;top:15px;width:18px;height:18px;border:1.5px solid #1d1d1f;border-radius:5px;background:#fff}
.todo li.done{color:#86868b;font-weight:400}
.todo li.done i{background:#1d1d1f;border-color:#1d1d1f}
.todo li.done i::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.todo b{font-weight:inherit}
.todo span{display:block;margin-top:2px;font-size:13px;font-weight:400;color:#6e6e73}
.stat small{font-size:.42em;font-weight:500;letter-spacing:0}
.stat>span{display:block;margin-top:6px;font-size:clamp(14px,1.25vw,18px);color:var(--ink2)}

.key,.legend{list-style:none;margin:0;padding:0}
.key{display:flex;justify-content:center;gap:22px;margin-top:10px;font-size:14px;color:var(--ink2)}
.key li{display:flex;align-items:center;gap:8px}
.key i{display:block;width:22px;border-top:1px solid var(--ink)}
.key i.dash{border-top-style:dashed;border-color:var(--ink2)}
.legend{margin-top:14px;font-size:14px;color:var(--ink2)}
.legend li{display:grid;grid-template-columns:14px 66px 1fr;align-items:center;gap:6px;padding:2px 0;font-variant-numeric:tabular-nums}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.legend b{font:500 13px var(--mono);color:var(--ink)}
.flowline{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px!important;font-size:clamp(13px,1.1vw,16px)!important}
.flowline i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.flowline em{font-style:normal;color:var(--ink3)}
.amap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);margin-top:14px;pointer-events:none}
.card.live .amap{pointer-events:auto}
.amap button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 12px;text-align:left;font-family:var(--sans);color:var(--ink2);background:rgba(245,245,247,.07);border:1px solid transparent;border-radius:12px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.amap button:hover{background:rgba(245,245,247,.13)}
.amap button.on{color:var(--ink);background:rgba(245,245,247,.16);border-color:rgba(245,245,247,.5)}
.amap b{font-size:clamp(18px,1.9vw,28px);font-weight:700;line-height:1.15}
.amap code{font:500 clamp(10px,.82vw,12px) var(--mono);overflow-wrap:anywhere}
.amap small{font-size:clamp(10px,.8vw,12px);color:inherit;opacity:.8;overflow-wrap:anywhere}
.rg-legend{display:none;list-style:none;margin:8px 0 0;padding:0}
.fine{font-size:12px!important;color:var(--ink3)!important;margin-top:10px!important}

.panel{position:absolute;top:44%;transform:translateY(-50%);right:calc(clamp(18px,3.4vw,48px) + 26px);width:min(25vw,340px);min-width:280px;text-shadow:0 0 14px #000}
.scn{display:inline-flex;gap:4px;flex-wrap:wrap;padding:3px;border-radius:99px;background:rgba(245,245,247,.1)}
.head .scn{display:flex;width:max-content;margin:0 auto}
.scn button{font:13px var(--sans);color:var(--ink);background:none;border:0;border-radius:99px;padding:5px 14px;cursor:pointer;white-space:nowrap}
.scn button.on{color:#000;background:var(--ink);font-weight:500}
button:focus-visible,.rail-track:focus-visible,a:focus-visible{outline:2px solid #6ea8ff;outline-offset:2px}

.rail{position:fixed;z-index:4;right:10px;top:84px;height:min(36vh,300px)}
.rail-track{position:relative;width:18px;height:100%;cursor:ns-resize;touch-action:none}
.rail-track::before{content:"";position:absolute;left:8.5px;top:0;bottom:0;width:1px;background:var(--hair)}
.rail-fill{position:absolute;left:8.5px;top:0;width:1px;height:0;background:var(--ink)}
.rail-tick{position:absolute;left:6.5px;width:5px;height:1px;background:var(--ink2);pointer-events:none}
.rail-thumb{position:absolute;left:5px;top:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ink)}

.decision{position:fixed;z-index:3;left:50%;bottom:clamp(20px,4vh,44px);transform:translateX(-50%);text-align:center;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;text-shadow:0 0 22px #000,0 0 6px #000}
.decision b{display:block;font-weight:800;font-size:clamp(44px,6.4vw,96px);line-height:1.05;letter-spacing:-.01em}
.decision span{display:block;margin-top:4px;font:12.5px var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:pre}

.neuro{position:fixed;z-index:3;right:calc(clamp(18px,3.4vw,48px) + 26px);bottom:clamp(20px,4vh,40px);width:300px;opacity:0;visibility:hidden;pointer-events:none}
.neuro canvas{display:block;width:100%;height:196px}

/* 浅色规格页 */
.ledger{position:relative;z-index:6;background:#f5f5f7;color:#1d1d1f;padding:clamp(60px,10vh,110px) max(clamp(18px,3.4vw,48px),calc((100vw - 1120px)/2)) 56px}
.ledger h2{font-size:clamp(36px,5vw,72px);line-height:1.1;margin-bottom:clamp(24px,4vh,44px)}
.ledger h2.sub{font-size:clamp(28px,3.4vw,48px);margin-top:clamp(56px,9vh,96px)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cell{background:#fff;border-radius:20px;padding:clamp(18px,2.2vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:clamp(150px,18vw,210px)}
.cell.w2{grid-column:span 2}
.cell b{font-size:clamp(34px,4vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cell.w2 b{font-size:clamp(44px,6vw,88px)}
.cell small{font-size:.42em;font-weight:500;letter-spacing:0}
.cell span{font-size:14px;line-height:1.45;color:#6e6e73}
.stages{list-style:none;margin:0 0 clamp(40px,7vh,72px);padding:0;position:relative}
.stages::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1px;background:#d2d2d7}
.stages li{position:relative;display:grid;grid-template-columns:24px 170px 170px minmax(0,1fr);align-items:baseline;gap:4px 10px;padding:11px 0;font-size:16px;border-bottom:1px solid #e4e4e8}
.stages i{position:relative;top:1px;display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid #1d1d1f;background:#f5f5f7}
.stages .ok i{background:#1d1d1f}
.stages .part i{background:linear-gradient(90deg,#1d1d1f 50%,#f5f5f7 50%)}
.stages b{font-weight:600}
.stages em{font-style:normal;color:#515154}
.stages .no em{color:#c9341a;font-weight:500}
.stages span{font-size:14px;color:#6e6e73}
.gh{display:block;margin:0 0 clamp(36px,6vh,64px);padding:clamp(22px,3vw,38px);border-radius:20px;background:#1d1d1f;color:#f5f5f7;text-decoration:none;transition:background .2s}
.gh:hover{background:#000}
.gh span{display:block;font-size:15px;color:#a1a1a6}
.gh b{display:block;margin-top:4px;font-size:clamp(20px,3vw,40px);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.sources p{margin:0;font-size:12px;line-height:1.7;color:#86868b;max-width:76em}
.nogl{position:fixed;inset:auto 0 0 0;z-index:9;padding:12px 3.4vw;background:#2a1a16;font-size:14px}

@media (max-width:820px),(max-height:640px){
  .mast nav button:nth-child(-n+3){display:none}
  .stat{top:auto;bottom:112px;width:44vw}
  .stat.l{left:16px}.stat.r{right:16px}
  .stat>b{font-size:clamp(26px,8.4vw,44px)}
  .stat>span{font-size:12px;margin-top:2px}
  .legend{display:none}
  .head.bottom{bottom:16px}
  .head h2{font-size:clamp(22px,6.6vw,34px)}
  .head p{font-size:14px;margin-top:4px}
  .head.hero h1{font-size:72px}
  .head.hero p{font-size:17px}
  .panel{top:auto;bottom:80px;left:16px;right:16px;width:auto;min-width:0;transform:none}
  .hv{display:none}
  .amap{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
  .amap button{padding:6px 8px}
  .amap b{font-size:16px}
  .amap code,.amap small{font-size:10px}
  .flowline{font-size:11px!important;gap:4px}
  .rg-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px;text-align:left}
  .rg-legend li{display:grid;grid-template-columns:10px 1fr;column-gap:6px;align-items:center;font-size:12px}
  .rg-legend i{width:8px;height:8px;border-radius:50%}
  .rg-legend b{font-weight:600}
  .rg-legend span{grid-column:2;font-size:10px;line-height:1.2;color:var(--ink2)}
  .rail{right:0;top:60px;height:26vh}
  .neuro{display:none}
  .decision{bottom:186px}
  .card:has(.panel) .stat{display:none}
  .card:has(.head.top) .stat{bottom:18px}
  .todo{grid-template-columns:1fr}
  .dvrow .scn button{padding:4px 10px;font-size:12px}
  .head.slim h2{font-size:22px}
  .decision b{font-size:42px}
  .bento{grid-template-columns:repeat(2,1fr);gap:10px}
  .cell{min-height:120px;border-radius:16px}
  .cell b{font-size:30px}.cell.w2 b{font-size:clamp(34px,10.5vw,60px)}
  .stages li{grid-template-columns:24px 1fr auto;font-size:15px}
  .stages span{grid-column:2/4}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
