:root{--bg0:#0f1b34;--bg1:#060b18;--ink:#eef2f9;--muted:#8d9bb4;--line:rgba(200,215,245,.16);
 --blue:#4f80ff;--amber:#f3a643;--panel:rgba(22,36,66,.55);--panelb:rgba(130,160,220,.22);--shadow:0 30px 70px -20px rgba(0,0,0,.7)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg1);color:var(--ink);
 font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
#view{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#04070f}
#stage{position:relative;width:1600px;height:900px;flex:none;transform-origin:center;overflow:hidden;
 background:radial-gradient(110% 100% at 25% 15%,var(--bg0) 0%,var(--bg1) 100%)}
.page{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.page.on{visibility:visible;pointer-events:auto}
canvas.full{position:absolute;left:0;top:0;width:1600px;height:900px}
.photo .bg{position:absolute;inset:-20px;width:1640px;height:940px;object-fit:cover;transform-origin:70% 60%;will-change:transform}
.mask{position:absolute;inset:0;background:linear-gradient(90deg,#060c1c 0%,#060c1c 54%,rgba(6,12,28,.7) 60%,rgba(6,12,28,0) 70%)}
.mask.graphite{background:linear-gradient(90deg,#282726 0%,#292827 52%,rgba(41,40,39,.7) 60%,rgba(41,40,39,0) 70%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 40%)}
.mask.navy{background:linear-gradient(90deg,#060b18 0%,rgba(6,11,24,.96) 34%,rgba(6,11,24,.55) 55%,rgba(6,11,24,.15) 80%),linear-gradient(0deg,#060b18 0%,transparent 30%),linear-gradient(180deg,#060b18 0%,transparent 26%)}
.brand{position:absolute;left:72px;top:52px;display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.18em;color:var(--muted);z-index:5}
.brand i{width:22px;height:2px;background:var(--amber);display:inline-block}
.brand b{color:var(--ink);font-weight:600;letter-spacing:.1em}
.foot{position:absolute;right:72px;bottom:44px;font-size:13px;letter-spacing:.24em;color:var(--muted);z-index:60}
#pn{position:absolute;left:72px;bottom:44px;font:500 13px/1 "SF Mono",Consolas,monospace;letter-spacing:.2em;color:var(--muted);z-index:60}
#pn b{color:var(--ink)}
.kicker{font:500 14px/1 "SF Mono",Consolas,monospace;letter-spacing:.24em;color:var(--amber)}
h1{font-weight:300;font-size:68px;line-height:1.2;letter-spacing:.04em;margin-top:28px}
h2{font-weight:300;font-size:46px;line-height:1.25;letter-spacing:.04em;margin-top:18px}
.sub{color:var(--muted);font-size:20px;letter-spacing:.12em;margin-top:30px;display:flex;align-items:center;gap:16px}
.sub i{width:44px;height:2px;background:var(--amber)}
.split .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(18px)}
.page.on .split .ch{animation:chin .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes chin{to{opacity:1;filter:blur(0);transform:none}}
.fade{opacity:0;transform:translateY(14px)}
.page.on .fade{animation:fin .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fin{to{opacity:1;transform:none}}
.head{position:absolute;left:110px;top:118px;right:110px;z-index:4}
.head p{position:absolute;right:0;bottom:8px;width:440px;color:var(--muted);font-size:17px;line-height:1.75;padding-left:32px;border-left:1px solid var(--line)}
/* 01 */
#p1 .txt{position:absolute;left:110px;top:250px;width:680px;z-index:3}
#p1 .meta{position:absolute;left:110px;bottom:120px;display:flex;gap:56px;z-index:3}
#p1 .meta div{font-size:14px;color:var(--muted);letter-spacing:.1em;line-height:1.9}
#p1 .meta b{display:block;color:var(--ink);font-size:17px;font-weight:500;letter-spacing:.06em}
/* 02 */
#p2 .board3d{position:absolute;left:150px;top:300px;width:560px;height:560px;perspective:1400px}
#p2 .board3d canvas{position:absolute;left:0;top:0;transform:rotateX(38deg) rotateZ(-24deg) translateY(-60px);transform-origin:50% 50%;border-radius:10px;
 box-shadow:0 80px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(150,180,240,.18)}
#p2 .facts{position:absolute;left:840px;top:300px;width:640px}
#p2 .facts div{display:grid;grid-template-columns:230px 1fr;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
#p2 .facts div:last-child{border-bottom:1px solid var(--line)}
#p2 .facts .n{grid-row:span 2;font:200 64px/1 "SF Pro Display","Segoe UI",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
#p2 .facts b{font-size:21px;font-weight:500;letter-spacing:.06em}
#p2 .facts em{font-style:normal;color:var(--muted);font-size:14px;margin-top:6px;letter-spacing:.06em}
#p2 .note{position:absolute;left:840px;top:740px;width:640px;color:var(--amber);font-size:17px;letter-spacing:.08em}
/* 03 / 10 章节 */
.chap{position:absolute;left:110px;top:300px;width:720px;z-index:4}
/* 04 */
#p4 .sheets{position:absolute;left:110px;right:110px;top:300px;height:420px;perspective:1800px;display:flex;justify-content:space-between}
.sheet{width:300px;height:400px;position:relative;opacity:0;transform:rotateY(24deg) translateX(-50px) translateZ(-80px);transition:opacity .9s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sheet.in{opacity:1;transform:rotateY(16deg) translateX(0)}
.sheet .card{position:absolute;inset:0;border-radius:16px;background:linear-gradient(160deg,rgba(60,90,160,.32),rgba(16,28,54,.6));border:1px solid var(--panelb);
 backdrop-filter:blur(14px);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.12)}
.sheet canvas{position:absolute;left:18px;top:18px;border-radius:8px}
.sheet .lab{position:absolute;left:22px;right:22px;bottom:22px}
.sheet .lab .n{font:500 13px/1 "SF Mono",Consolas,monospace;color:var(--amber);letter-spacing:.2em}
.sheet .lab b{display:block;font-size:20px;font-weight:500;margin-top:10px;letter-spacing:.06em}
.sheet .lab span{display:block;font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
#p4 .track{position:absolute;left:110px;right:110px;top:772px;height:2px;background:var(--line)}
#p4 .track i{position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,transparent,var(--amber));transition:width 1s ease}
#p4 .track em{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--bg1);border:2px solid var(--line);transition:all .5s}
#p4 .track em.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 16px var(--amber)}
/* 05 */
#p5 .chartwrap{position:absolute;left:110px;top:290px;width:560px;height:560px}
#p5 .chartwrap canvas{position:absolute;left:0;top:0}
#p5 .lens{pointer-events:none}
#p5 .readout{position:absolute;left:800px;top:330px;width:620px}
#p5 .rc{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:20px}
#p5 .rc b{font:200 72px/1 "SF Pro Display","Segoe UI",sans-serif;color:var(--ink);min-width:86px;text-align:center;font-variant-numeric:tabular-nums}
#p5 .sw{display:flex;align-items:center;gap:20px;margin-top:40px}
#p5 .sw i{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 -6px 12px rgba(0,0,0,.35),inset 0 4px 8px rgba(255,255,255,.4),0 10px 24px -8px rgba(0,0,0,.6);transition:background .3s}
#p5 .sw b{font:500 30px/1 "SF Mono",Consolas,monospace;letter-spacing:.1em}
#p5 .sw em{display:block;font-style:normal;color:var(--muted);font-size:16px;margin-top:8px;letter-spacing:.1em}
#p5 .tot{margin-top:34px;font-size:20px;color:var(--muted);letter-spacing:.06em;padding-top:26px;border-top:1px solid var(--line)}
#p5 .tot b{color:var(--amber);font-size:30px;font-weight:400;margin:0 6px;font-variant-numeric:tabular-nums}
#p5 .readout p{margin-top:26px;color:var(--muted);font-size:15px;line-height:1.8}
/* 06 / 07 */
#p6 .art,#p7 .art{position:absolute;left:110px;top:290px}
#p6 .gauge{position:absolute;left:820px;top:320px;width:620px}
#p6 .big{display:flex;align-items:baseline;gap:16px}
#p6 .big b{font:200 120px/1 "SF Pro Display","Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
#p6 .big span{font-size:28px;color:var(--muted)}
#p6 .big em{font-style:normal;color:var(--ink)}
#p6 .bar{margin-top:30px;height:4px;border-radius:2px;background:var(--line);position:relative}
#p6 .bar i{position:absolute;left:0;top:0;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--amber));box-shadow:0 0 14px rgba(243,166,67,.6)}
#p6 .row{display:flex;margin-top:40px;border-top:1px solid var(--line)}
#p6 .row div{flex:1;padding-top:22px}
#p6 .row b{display:block;font:300 40px/1 "SF Pro Display","Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
#p6 .row span{display:block;color:var(--muted);font-size:15px;margin-top:10px}
#p6 .gauge p{margin-top:36px;color:var(--muted);font-size:15px;line-height:1.8}
#p7 .steps{position:absolute;left:820px;top:320px;width:620px}
#p7 .steps div{display:grid;grid-template-columns:70px 1fr;padding:26px 0;border-top:1px solid var(--line);opacity:.32;transition:opacity .6s}
#p7 .steps div:last-child{border-bottom:1px solid var(--line)}
#p7 .steps div.on{opacity:1}
#p7 .steps span{grid-row:span 2;font:500 15px/1.6 "SF Mono",Consolas,monospace;color:var(--amber);letter-spacing:.2em}
#p7 .steps b{font-size:24px;font-weight:500;letter-spacing:.06em}
#p7 .steps em{font-style:normal;color:var(--muted);font-size:16px;margin-top:8px}
#p7 .steps em i{font-style:normal;color:var(--ink);font-size:22px;font-variant-numeric:tabular-nums;margin:0 3px}
/* 08 */
#p8 .jars{position:absolute;left:110px;top:330px;width:820px;height:460px}
#p8 .receipt{position:absolute;left:1010px;top:300px;width:480px;padding:26px 30px;border-radius:14px;background:linear-gradient(170deg,rgba(40,62,110,.45),rgba(14,24,46,.75));
 border:1px solid var(--panelb);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
#p8 .rh{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px dashed var(--line)}
#p8 .rh b{font-size:19px;font-weight:500;letter-spacing:.1em}
#p8 .rh span{color:var(--muted);font-size:13px}
#p8 .rl{min-height:300px}
#p8 .ln{display:grid;grid-template-columns:20px 44px 1fr 64px 64px 64px;align-items:center;gap:6px;font-size:14px;padding:9px 0;border-bottom:1px solid rgba(200,215,245,.07);
 opacity:0;transform:translateY(-8px);transition:all .45s}
#p8 .ln.in{opacity:1;transform:none}
#p8 .ln.hd{opacity:1;transform:none;color:var(--muted);font-size:12px;letter-spacing:.1em}
#p8 .ln i{width:14px;height:14px;border-radius:50%}
#p8 .ln .c{font-family:"SF Mono",Consolas,monospace;color:var(--muted)}
#p8 .ln .v{text-align:right;font-variant-numeric:tabular-nums}
#p8 .ln .need{color:var(--amber)}
#p8 .rf{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;padding-top:16px;color:var(--muted)}
#p8 .rf b{font:300 40px/1 "SF Pro Display","Segoe UI",sans-serif;color:var(--amber);font-variant-numeric:tabular-nums}
/* 09 */
#p9 .iron{position:absolute;left:110px;right:110px;top:300px;height:500px;border-radius:18px;overflow:hidden;cursor:ew-resize;box-shadow:var(--shadow),0 0 0 1px var(--panelb)}
#p9 .iron canvas{position:absolute;left:0;top:0}
#p9 .lab{position:absolute;top:22px;font-size:14px;letter-spacing:.2em;color:var(--ink);padding:8px 14px;border-radius:20px;background:rgba(6,11,24,.6);backdrop-filter:blur(8px)}
#p9 .lab.l{left:22px}#p9 .lab.r{right:22px}
/* 10 */
#p10 .wall{position:absolute;inset:0;perspective:1200px;overflow:hidden}
#p10 .plane{position:absolute;left:560px;top:-200px;width:1300px;height:2400px;transform:rotateX(52deg) rotateZ(-18deg);transform-origin:50% 30%;
 display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-content:start}
#p10 .tile{aspect-ratio:1;border-radius:14px;background:#0f1a31;box-shadow:0 30px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(150,180,240,.14);position:relative;overflow:hidden;transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s}
#p10 .tile canvas{width:100%;height:100%;display:block}
#p10 .tile.hot{transform:translateZ(120px);box-shadow:0 60px 60px -20px rgba(0,0,0,.8),0 0 0 2px var(--amber),0 0 50px rgba(243,166,67,.45)}
#p10 .tile .tag{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:14px;background:var(--amber);color:#1a1205;font-size:14px;font-weight:600;letter-spacing:.1em;opacity:0;transition:opacity .5s .4s}
#p10 .tile.hot .tag{opacity:1}
/* 11 */
#p11 .node{position:absolute;text-align:center;width:180px}
#p11 .node .ic{width:64px;height:64px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:var(--panel);border:1px solid var(--panelb);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
#p11 .node b{display:block;margin-top:12px;font-size:19px;font-weight:500;letter-spacing:.08em}
#p11 .node span{display:block;font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:.06em}
#p11 .center{position:absolute;width:360px;height:90px;margin:-45px 0 0 -180px;text-align:center}
#p11 .center b{font-size:36px;font-weight:300;letter-spacing:.14em}
#p11 .center span{display:block;color:var(--muted);font-size:15px;letter-spacing:.3em;margin-top:12px}
#p11 .pts{position:absolute;left:1000px;top:330px;width:480px}
#p11 .pts div{padding:22px 0;border-top:1px solid var(--line)}
#p11 .pts div:last-child{border-bottom:1px solid var(--line)}
#p11 .pts b{font-size:21px;font-weight:500;letter-spacing:.06em;display:flex;align-items:center;gap:12px}
#p11 .pts b i{width:8px;height:8px;border-radius:50%;background:var(--amber)}
#p11 .pts span{display:block;color:var(--muted);font-size:15px;margin-top:8px;line-height:1.7;padding-left:20px}
/* 12 */
#p12 .end{position:absolute;left:0;right:0;top:660px;text-align:center;z-index:3}
#p12 .end .sub{justify-content:center;margin-top:22px}
/* 转场 */
#tx{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;z-index:50}
#sweep{position:absolute;top:0;bottom:0;left:-60%;width:60%;pointer-events:none;z-index:51;opacity:0;
 backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px);
 background:linear-gradient(90deg,transparent,rgba(120,160,255,.08) 30%,rgba(243,166,67,.16) 50%,rgba(120,160,255,.08) 70%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#sweep.go{animation:sw 1.1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes sw{0%{left:-60%;opacity:1}100%{left:100%;opacity:1}}
@media (prefers-reduced-motion:reduce){.split .ch,.fade{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}}