:root{--ink:#0f0d0a;--ink-2:#16130f;--ink-3:#1e1a14;--ink-4:#28221a;--ink-5:#322a20;--paper:#ede7d9;--text:#f5f1e8;--text-dim:#a69e90;--text-faint:#6e675b;--hair:#e6dcc814;--hair-strong:#e6dcc833;--border-strong:#e6dcc847;--signal:#e56a3c;--signal-2:#f2a65a;--signal-3:#f8c489;--signal-soft:#e56a3c1a;--signal-line:#e56a3c61;--signal-glow:#e56a3c26;--ok:#86b06a;--no:#db6450;--grad:linear-gradient(102deg, #e56a3c 0%, #f2a65a 100%);--grad-soft:linear-gradient(102deg, #e56a3c1f, #f2a65a0f);--radius:6px;--radius-sm:4px;--radius-lg:12px;--shadow:0 24px 60px -28px #000000e6;--shadow-lifted:0 32px 80px -30px #000000f2, 0 0 0 1px var(--hair);--maxw:1240px;--display:"Space Grotesk", "Noto Sans SC", system-ui, -apple-system, sans-serif;--font:"Noto Sans SC", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--ease:cubic-bezier(.16, 1, .3, 1);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:96px}body{background:var(--ink);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.78;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{color:#fff;background:#e56a3c4d}:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}.ambient{z-index:-3;background:radial-gradient(1400px 900px at 82% -10%, #e56a3c17, transparent 55%), radial-gradient(1000px 800px at 4% 8%, #f2a65a0a, transparent 55%), radial-gradient(800px 600px at 50% 100%, #e56a3c08, transparent 50%), var(--ink);position:fixed;inset:0}.ambient-grid{z-index:-2;pointer-events:none;background-image:linear-gradient(#e6dcc807 1px,#0000 1px),linear-gradient(90deg,#e6dcc807 1px,#0000 1px);background-size:64px 64px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(96% 75% at 50% 18%,#000 14%,#0000 82%);mask-image:radial-gradient(96% 75% at 50% 18%,#000 14%,#0000 82%)}.grain{z-index:-1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.scroll-progress{z-index:200;background:var(--grad);width:0%;height:2px;position:fixed;top:0;left:0;box-shadow:0 0 12px #e56a3c80}.rail{z-index:90;flex-direction:column;gap:14px;display:flex;position:fixed;top:50%;left:28px;transform:translateY(-50%)}.rail:before{content:"";background:var(--hair);width:1px;position:absolute;top:-14px;bottom:-14px;left:7px}.rail a{font-family:var(--mono);color:var(--text-faint);transition:color .3s var(--ease);align-items:center;gap:12px;font-size:10px;display:flex;position:relative}.rail .tick{background:var(--hair-strong);width:14px;height:1px;transition:all .35s var(--ease);flex:none}.rail .num{opacity:0;transition:all .35s var(--ease);letter-spacing:1px;transform:translate(-4px)}.rail a:hover{color:var(--text-dim)}.rail a:hover .tick{background:var(--signal);width:20px}.rail a:hover .num{opacity:1;transform:none}.rail a.active{color:var(--text)}.rail a.active .tick{background:var(--signal);width:38px;box-shadow:0 0 8px #e56a3c80}.rail a.active .num{opacity:1;color:var(--signal);transform:none}@media (width<=1280px){.rail{display:none}}.nav{z-index:100;-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%);border-bottom:1px solid var(--hair);height:60px;transition:all .4s var(--ease);background:#0f0d0a8c;justify-content:space-between;align-items:center;padding:0 32px;display:flex;position:fixed;top:0;left:0;right:0}.nav.scrolled{border-bottom-color:var(--hair-strong);background:#0f0d0ae0}.nav .brand{letter-spacing:.2px;font-size:14px;font-weight:500;font-family:var(--display);align-items:center;gap:11px;display:flex}.nav .brand .logo{background:var(--signal);width:28px;height:28px;font-family:var(--mono);color:#16110c;border-radius:4px;place-items:center;font-size:11px;font-weight:700;display:grid;box-shadow:0 0 16px #e56a3c4d}.nav .brand b{color:var(--signal);font-weight:700}.nav .links{gap:1px;display:flex}.nav .links a{color:var(--text-dim);transition:all .2s var(--ease);border-radius:4px;padding:7px 11px;font-size:12.5px;position:relative}.nav .links a:hover{color:var(--text);background:#e6dcc80a}.nav .links a.active{color:var(--text)}.nav .links a.active:after{content:"";background:var(--signal);border-radius:1px;height:2px;position:absolute;bottom:1px;left:11px;right:11px}.nav .flag{color:var(--signal);border:1px solid var(--signal-line);background:var(--signal-soft);font-size:11.5px;font-family:var(--mono);border-radius:4px;padding:5px 11px;transition:all .2s}.nav .flag:hover{border-color:var(--signal);background:#e56a3c2e}@media (width<=960px){.nav .links{display:none}}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}section{padding:100px 0;position:relative}.section-head{grid-template-columns:auto 1fr;align-items:start;gap:22px;display:grid}.sh-index{font-family:var(--mono);color:var(--signal);border:1px solid var(--signal-line);background:var(--signal-soft);white-space:nowrap;letter-spacing:1px;border-radius:4px;padding:7px 11px;font-size:11px;font-weight:700;position:relative}.sh-index:before{content:"§";opacity:.7;margin-right:4px}.sh-index:after{content:"";background:linear-gradient(90deg, var(--signal), transparent);width:36px;height:1px;position:absolute;top:50%;left:calc(100% + 10px)}.eyebrow{font-family:var(--mono);letter-spacing:2.5px;text-transform:uppercase;color:var(--signal);align-items:center;gap:8px;margin-bottom:14px;font-size:10.5px;display:inline-flex}.eyebrow:before{content:"[";color:var(--text-faint)}.eyebrow:after{content:"]";color:var(--text-faint)}h2.title{font-family:var(--display);letter-spacing:-1px;font-size:clamp(26px,4vw,44px);font-weight:700;line-height:1.14}.lead{color:var(--text-dim);max-width:68ch;margin-top:14px;font-size:15.5px;line-height:1.85}.hero{flex-direction:column;justify-content:center;min-height:100dvh;padding:110px 0 70px;display:flex;position:relative}.hero-grid{grid-template-columns:1.08fr .92fr;align-items:center;gap:52px;display:grid}@media (width<=960px){.hero-grid{grid-template-columns:1fr;gap:32px}}.hero-text{min-width:0}.hero-badge{font-family:var(--mono);color:var(--text-dim);border:1px solid var(--hair-strong);background:var(--ink-2);letter-spacing:.3px;border-radius:4px;align-self:flex-start;align-items:center;gap:9px;margin-bottom:26px;padding:6px 13px;font-size:11px;display:inline-flex}.hero-badge .dot{background:var(--ok);width:6px;height:6px;box-shadow:0 0 8px var(--ok);border-radius:50%;animation:2.6s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.hero h1{font-family:var(--display);letter-spacing:-2px;max-width:15ch;font-size:clamp(38px,6.5vw,78px);font-weight:700;line-height:1.03}.hero h1 .g{color:var(--signal);position:relative}.hero h1 .g:after{content:"";background:var(--grad);opacity:.5;border-radius:2px;height:3px;position:absolute;bottom:-2px;left:0;right:0}.hero p.sub{color:var(--text-dim);max-width:50ch;margin-top:24px;font-size:clamp(14.5px,1.8vw,17.5px);line-height:1.85}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:34px;display:flex}.btn{cursor:pointer;transition:transform .3s var(--ease-spring), background .25s, border-color .25s, color .25s, box-shadow .25s;font-size:14px;font-weight:500;font-family:var(--display);border:1px solid #0000;border-radius:5px;align-items:center;gap:8px;padding:13px 24px;display:inline-flex}.btn.primary{background:var(--signal);color:#16110c;box-shadow:0 8px 24px -8px #e56a3c80}.btn.primary:hover{background:var(--signal-2);transform:translateY(-3px);box-shadow:0 12px 32px -8px #e56a3c99}.btn.primary:active{transform:scale(.97)}.btn.ghost{border-color:var(--hair-strong);color:var(--text);background:0 0}.btn.ghost:hover{border-color:var(--signal);color:var(--signal);transform:translateY(-3px)}.hero-stats{border-top:1px solid var(--hair);flex-wrap:wrap;gap:0;margin-top:50px;display:flex}.hero-stats .stat{margin-right:28px;padding:18px 28px 0 0;position:relative}.hero-stats .stat:not(:last-child):after{content:"";background:var(--hair);width:1px;position:absolute;top:18px;bottom:2px;right:0}.hero-stats .stat .n{font-family:var(--display);color:var(--text);letter-spacing:-.5px;font-size:26px;font-weight:700}.hero-stats .stat .n.accent{color:var(--signal)}.hero-stats .stat .l{font-family:var(--mono);color:var(--text-faint);letter-spacing:.5px;text-transform:uppercase;margin-top:4px;font-size:10px}.hero-stage{border:1px solid var(--hair-strong);border-radius:var(--radius-lg);background:linear-gradient(180deg, var(--ink-2), var(--ink)), repeating-linear-gradient(0deg, transparent, transparent 23px, #e6dcc804 23px, #e6dcc804 24px);min-height:440px;position:relative;overflow:hidden}.hero-canvas{position:absolute;inset:0}.reticle{pointer-events:none;position:absolute;inset:14px}.reticle:before,.reticle:after{content:"";border:1.5px solid var(--signal);opacity:.65;width:20px;height:20px;position:absolute}.reticle:before{border-bottom:none;border-right:none;top:0;left:0}.reticle:after{border-top:none;border-left:none;bottom:0;right:0}.reticle .label{font-family:var(--mono);color:var(--signal);border-left:1px solid var(--hair);border-bottom:1px solid var(--hair);letter-spacing:.5px;background:#0f0d0abf;border-radius:0 0 0 4px;padding:4px 8px;font-size:9.5px;position:absolute;top:0;right:0}.scroll-hint{font-family:var(--mono);color:var(--text-faint);letter-spacing:3px;flex-direction:column;align-items:center;gap:7px;font-size:9.5px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.scroll-hint .line{background:linear-gradient(var(--signal), transparent);width:1px;height:28px;animation:2s infinite drop}@keyframes drop{0%{transform-origin:top;transform:scaleY(0)}50%{transform-origin:top;transform:scaleY(1)}51%{transform-origin:bottom}to{transform-origin:bottom;transform:scaleY(0)}}.card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);padding:24px;position:relative;overflow:hidden}.card:before{content:"";background:var(--signal);transform-origin:top;width:2px;transition:transform .35s var(--ease);position:absolute;top:0;bottom:0;left:0;transform:scaleY(0)}.card:hover{border-color:var(--hair-strong);box-shadow:var(--shadow);transform:translateY(-2px)}.card:hover:before{transform:scaleY(1)}.grid{gap:13px;display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}@media (width<=840px){.grid-2,.grid-3{grid-template-columns:1fr}}.use-case{gap:15px;display:flex}.use-case .ic{background:var(--signal-soft);border:1px solid var(--signal-line);border-radius:5px;flex:0 0 42px;place-items:center;height:42px;font-size:20px;display:grid}.use-case h4{font-family:var(--display);letter-spacing:-.2px;margin-bottom:5px;font-size:15.5px;font-weight:500}.use-case p{color:var(--text-dim);font-size:13.5px;line-height:1.75}.primitive{border-bottom:1px solid var(--hair);grid-template-columns:62px 1fr;align-items:start;gap:22px;padding:26px 0;display:grid}.primitive:last-child{border-bottom:none}.primitive .idx{width:50px;height:50px;font-family:var(--display);color:var(--signal);background:var(--ink-3);border:1px solid var(--signal-line);border-radius:5px;place-items:center;font-size:22px;font-weight:700;display:grid}.primitive h3{font-family:var(--display);letter-spacing:-.3px;margin-bottom:7px;font-size:19px;font-weight:500}.primitive h3 code,.inline-code{font-family:var(--mono);background:var(--signal-soft);color:var(--signal);border:1px solid #e56a3c38;border-radius:3px;padding:2px 7px;font-size:.82em}.primitive p{color:var(--text-dim);font-size:14.5px}.primitive ul{color:var(--text-dim);margin:10px 0 0 18px}.primitive ul li{margin:4px 0;font-size:14px}.codeblock{border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);background:#0b0907;margin-top:16px;overflow:hidden}.codeblock .bar{border-bottom:1px solid var(--hair);background:#ffffff03;align-items:center;gap:8px;padding:10px 14px;display:flex}.codeblock .bar .dots{gap:5px;display:flex}.codeblock .bar .dots i{border-radius:50%;width:9px;height:9px;display:block}.codeblock .bar .dots i:first-child{background:#e56a3c}.codeblock .bar .dots i:nth-child(2){background:#f2a65a}.codeblock .bar .dots i:nth-child(3){background:#86b06a}.codeblock .bar .name{font-family:var(--mono);color:var(--text-faint);margin-left:4px;font-size:11.5px}.codeblock .bar .copy{color:var(--text-dim);cursor:pointer;border:1px solid var(--hair);font-size:11.5px;font-family:var(--mono);background:0 0;border-radius:3px;margin-left:auto;padding:4px 10px;transition:all .2s}.codeblock .bar .copy:hover{color:var(--signal);border-color:var(--signal)}.codeblock pre{font-family:var(--mono);padding:16px;font-size:12.5px;line-height:1.68;overflow-x:auto}.codeblock pre code{font-family:var(--mono)}.tk-tag{color:#e58f6b}.tk-attr{color:#f2c078}.tk-str{color:#c7d6a8}.tk-kw{color:#e56a3c}.tk-fn{color:#f2a65a}.tk-com{color:#6e675b;font-style:italic}.tk-num{color:#e0a868}.tk-punc{color:#c9c2b4}.demo{border:1px solid var(--hair);border-radius:var(--radius);background:var(--ink-2);margin-top:22px;overflow:hidden}.demo .head{border-bottom:1px solid var(--hair);align-items:center;gap:11px;padding:13px 18px;display:flex}.demo .head .tag{font-family:var(--mono);color:var(--signal);border:1px solid var(--signal-line);background:var(--signal-soft);border-radius:3px;padding:3px 8px;font-size:10.5px}.demo .head h4{font-family:var(--display);font-size:14.5px;font-weight:500}.demo .head p{font-family:var(--mono);color:var(--text-faint);text-align:right;margin-left:auto;font-size:10.5px}.demo .body{padding:20px}.canvas-host{border-radius:var(--radius-sm);border:1px solid var(--hair);background:#08070a;width:100%;display:block;position:relative;overflow:hidden}.controls{flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:16px;display:flex}.controls label{font-family:var(--mono);color:var(--text-dim);flex-direction:column;gap:7px;font-size:11.5px;display:flex}input[type=range]{appearance:none;cursor:pointer;background:#e6dcc824;border-radius:3px;outline:none;width:170px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--signal);cursor:pointer;border-radius:50%;width:13px;height:13px;transition:box-shadow .2s;box-shadow:0 0 0 4px #e56a3c2e}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px #e56a3c4d}input[type=range]::-moz-range-thumb{background:var(--signal);cursor:pointer;border:none;border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 4px #e56a3c2e}.controls .val{font-family:var(--mono);color:var(--signal);font-size:12px}.studio-grid{grid-template-columns:repeat(2,1fr);gap:16px 24px;margin-top:20px;display:grid}@media (width<=760px){.studio-grid{grid-template-columns:1fr}}.seg-group{flex-direction:column;gap:8px;display:flex}.seg-label{font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);font-size:10px}.seg{border:1px solid var(--hair-strong);border-radius:4px;flex-wrap:wrap;display:inline-flex;overflow:hidden}.seg button{color:var(--text-dim);border:none;border-right:1px solid var(--hair);cursor:pointer;font-size:12px;font-family:var(--mono);background:0 0;padding:7px 12px;transition:all .18s}.seg button:last-child{border-right:none}.seg button:hover{color:var(--text);background:#e6dcc80a}.seg button.on{background:var(--signal);color:#16110c;font-weight:700}.editor{background:var(--ink-3);border:1px solid var(--hair);border-radius:var(--radius);flex-direction:column;gap:13px;min-width:240px;padding:16px;display:flex}.editor label{font-family:var(--mono);letter-spacing:1px;color:var(--text-faint);text-transform:uppercase;flex-direction:column;gap:6px;font-size:10.5px;display:flex}.editor label.row{flex-direction:row;align-items:center;gap:11px}.editor input[type=text],.editor textarea{font-family:var(--font);color:var(--text);background:var(--ink);border:1px solid var(--hair-strong);resize:vertical;border-radius:4px;padding:8px 11px;font-size:13.5px}.editor input[type=text]:focus,.editor textarea:focus{border-color:var(--signal);outline:none}.editor input[type=color]{border:1px solid var(--hair-strong);background:var(--ink);cursor:pointer;border-radius:4px;width:40px;height:28px;padding:0}@media (width<=760px){.split{grid-template-columns:1fr}}.split{grid-template-columns:1fr 1fr;align-items:start;gap:22px;display:grid}@media (width<=900px){.split{grid-template-columns:1fr}}.callout{border-radius:var(--radius);border:1px solid var(--hair);border-left:2px solid var(--signal);background:var(--grad-soft);gap:13px;margin-top:16px;padding:18px 22px;display:flex}.callout .ic{font-size:20px}.callout p{color:var(--text);font-size:14px}.callout code,.inline-code{font-family:var(--mono)}.sec-list{grid-template-columns:1fr 1fr;gap:13px;margin-top:18px;display:grid}@media (width<=800px){.sec-list{grid-template-columns:1fr}}.sec-item{border:1px solid var(--hair);border-radius:var(--radius);background:var(--ink-2);padding:16px 18px}.sec-item h5{font-family:var(--display);align-items:center;gap:8px;margin-bottom:7px;font-size:14px;font-weight:500;display:flex}.badge{font-size:10px;font-family:var(--mono);border-radius:3px;padding:2px 7px}.badge.no{color:#e58a78;background:#db64501f;border:1px solid #db645047}.badge.ok{color:#9bc47f;background:#86b06a1f;border:1px solid #86b06a47}.sec-item p{color:var(--text-dim);font-size:13px}.sec-item ul{color:var(--text-dim);margin-left:18px;font-size:12.5px}.sec-item ul li{margin:3px 0}.alt{border:1px solid var(--hair);border-radius:var(--radius);background:var(--ink-2);transition:border-color .25s var(--ease);margin-top:13px;padding:18px 20px;position:relative}.alt:hover{border-color:var(--hair-strong)}.alt .pick{float:right;font-family:var(--mono);border-radius:3px;padding:4px 10px;font-size:10.5px}.alt .pick.chosen{background:var(--signal-soft);color:var(--signal);border:1px solid var(--signal-line)}.alt .pick.other{color:var(--text-faint);border:1px solid var(--hair);background:#e6dcc80d}.alt h4{font-family:var(--display);margin-bottom:7px;padding-right:86px;font-size:15.5px;font-weight:500}.alt p{color:var(--text-dim);font-size:13.5px}.caption{border-radius:var(--radius);border:1px solid var(--hair-strong);border-left:2px solid var(--signal);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;max-width:58%;transition:all .35s var(--ease);pointer-events:none;background:#0f0d0ae0;padding:13px 16px;position:absolute;bottom:14px;left:14px;transform:translateY(8px)}.caption.show{opacity:1;transform:none}.caption .t{font-family:var(--mono);color:var(--signal);font-size:13px}.caption .d{color:var(--text-dim);margin-top:4px;font-size:12.5px}.caption .back{pointer-events:auto;color:var(--signal-2);cursor:pointer;font-size:11.5px;font-family:var(--mono);background:0 0;border:none;margin-top:7px}.canvas-hint{color:var(--text-faint);font-size:10.5px;font-family:var(--mono);border:1px solid var(--hair);background:#0f0d0aa6;border-radius:3px;padding:4px 9px;position:absolute;top:12px;right:12px}.canvas-host.webgl-unsupported{justify-content:center;align-items:center;min-height:240px;display:flex}.canvas-host.webgl-unsupported:after{content:"当前环境不支持 WebGL，已降级为静态展示";color:var(--text-faint);font-size:12.5px;font-family:var(--mono);letter-spacing:1px;text-align:center;padding:0 20px}.authors{flex-wrap:wrap;gap:11px;margin-top:18px;display:flex}.author{border:1px solid var(--hair);border-radius:var(--radius);background:var(--ink-2);align-items:center;gap:10px;padding:10px 15px;transition:border-color .2s;display:flex}.author:hover{border-color:var(--signal)}.author .av{background:var(--signal);width:32px;height:32px;font-family:var(--display);color:#16110c;border-radius:4px;place-items:center;font-size:13px;font-weight:700;display:grid}.author .nm{font-size:13.5px;font-weight:500}.author .em{color:var(--text-faint);font-size:11px;font-family:var(--mono)}footer{border-top:1px solid var(--hair);color:var(--text-faint);margin-top:36px;padding:40px 0 56px;font-size:13px}footer .wrap{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}footer a:hover{color:var(--signal)}footer .links{gap:16px;display:flex}.reveal{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease);transform:translateY(22px)}.reveal.in{opacity:1;transform:none}.pill-row{flex-wrap:wrap;gap:9px;margin-top:14px;display:flex}.pill{font-family:var(--mono);color:var(--text-dim);border:1px solid var(--hair);border-radius:3px;padding:5px 12px;font-size:11.5px}.pill b{color:var(--signal)}.divider{background:var(--hair);flex:1;height:1px}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}