@font-face{font-family:Space Grotesk;font-style:normal;font-weight:300 700;font-display:swap;src:url('./assets/space-grotesk.woff2') format('woff2')}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/ibm-plex-mono.woff2') format('woff2')}
:root{--bg:#090c09;--fg:#edf0e5;--lime:#d4ff63;--muted:#929f86;--line:#ffffff20;--gutter:clamp(22px,4.3vw,90px);--cjk:'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;font-family:Space Grotesk,Arial,var(--cjk);color:var(--fg);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}
html[lang^=zh] [lang=en],html:not([lang^=zh]) [lang=zh-CN]{display:none}
*{box-sizing:border-box}body{margin:0;overflow-x:hidden}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,.specimen:focus-visible{outline:2px solid var(--lime);outline-offset:6px}::selection{background:var(--lime);color:var(--bg)}
.brand svg,.arrow{stroke:currentColor;stroke-width:1.5;fill:none;flex:none}.mono{font:10px/1.7 'IBM Plex Mono',Consolas,var(--cjk);letter-spacing:.06em}
.skip{position:fixed;left:var(--gutter);top:15px;z-index:10;background:var(--lime);color:var(--bg);padding:12px 18px;transform:translateY(-150%)}.skip:focus{transform:none}
.site-header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:26px;margin-inline:var(--gutter);position:relative;z-index:4}.brand{display:flex;gap:12px;align-items:center;font-weight:600;font-size:29px;letter-spacing:-1.7px}.brand svg{stroke:var(--lime);width:31px;height:31px}.brand .slash{stroke:var(--fg)}.brand .dot{color:var(--lime)}.project-breadcrumb{border-left:1px solid var(--line);padding-left:24px;color:var(--muted);font-size:9px;letter-spacing:.11em;text-transform:uppercase}nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:12px}nav a{padding-block:14px;transition:color .2s}nav a:hover,nav a[aria-current]{color:var(--lime)}.lang-switch{background:none;border:1px solid var(--line);color:#6f7e62;font-size:10px;padding:6px 10px;cursor:pointer;transition:border-color .2s}.lang-switch:hover{border-color:#d4ff6380}html:not([lang^=zh]) .en-mark,html[lang^=zh] .zh-mark{color:var(--lime)}
.repo-link{display:inline-flex;gap:19px;align-items:center;border-left:1px solid var(--line);padding-left:27px;margin-left:6px}.arrow{width:17px;height:17px}
.eyebrow{display:flex;align-items:center;gap:10px;color:#adb99e;font-size:9px;letter-spacing:.12em}.cross{width:9px;height:9px;position:relative;display:inline-block;flex:none}.cross::before,.cross::after{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor}.cross::after{transform:rotate(90deg)}.accent{color:var(--lime)}

/* Prologue: the lens */
.prologue{position:relative;min-height:calc(100svh - 92px);display:grid;grid-template-rows:auto 1fr auto;gap:clamp(36px,6vh,72px);padding:clamp(48px,9vh,110px) var(--gutter) 40px}
.prologue::after{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 70% 70%,#9ecc4412,transparent 55%);pointer-events:none}
.prologue-copy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:28px 8vw;animation:rise 1s .1s both}.prologue-copy .eyebrow{grid-column:1/-1}
h1{font-size:clamp(54px,7.2vw,128px);font-weight:500;letter-spacing:-.06em;line-height:.98;margin:0}html[lang^=zh] h1{letter-spacing:-.02em;line-height:1.12}
.lede{margin:0;max-width:430px;color:#b6c1aa;font-size:17px;line-height:1.75;letter-spacing:-.01em}
.specimen{margin:0;position:relative;border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);touch-action:pan-y;animation:rise 1s .35s both}
.specimen-prompt{display:flex;gap:18px;color:#8d9a80;font-size:11px}.prompt-tag{color:var(--lime);letter-spacing:.14em}
.specimen-text{position:relative;--x:50%;--y:50%;--r:clamp(70px,10.5vw,138px);cursor:none}
.layer{margin:0;font-size:clamp(30px,4.2vw,70px);font-weight:400;letter-spacing:-.035em;line-height:2.15}html[lang^=zh] .layer{letter-spacing:.01em}
.surface{color:#dfe5d6;-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 94%,#000 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 94%,#000 100%)}
.depth{position:absolute;inset:0;color:var(--lime);clip-path:circle(var(--r) at var(--x) var(--y));background:radial-gradient(circle var(--r) at var(--x) var(--y),#d4ff630d,transparent),repeating-linear-gradient(0deg,#d4ff6308 0 1px,transparent 1px 7px);text-shadow:0 0 28px #d4ff6338}
.tok{position:relative}.depth .tok[data-feature]::after{content:attr(data-feature);position:absolute;left:0;top:calc(100% - .1em);font:10px/1 'IBM Plex Mono',var(--cjk);letter-spacing:.05em;color:#c5d9a3;white-space:nowrap;padding:4px 6px;border:1px solid #d4ff6340;background:#0c120ae6;text-shadow:none}
.lens-ring{position:absolute;left:0;top:0;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(calc(var(--x) - var(--r)),calc(var(--y) - var(--r)));border:1px solid #d4ff6366;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 50px #d4ff6312,0 0 40px #00000080}
.lens-ring::before,.lens-ring::after{content:'';position:absolute;background:#d4ff6399}.lens-ring::before{left:50%;top:-6px;width:1px;height:12px}.lens-ring::after{top:50%;left:-6px;height:1px;width:12px}
.specimen-foot{color:#6d7c60;font-size:10px}
.scroll-cue{justify-self:start;color:#8d9a80;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-block:8px;transition:color .2s}.scroll-cue:hover{color:var(--lime)}

/* Chapters */
.chapter{padding:clamp(80px,14vh,160px) var(--gutter) 60px;border-top:1px solid var(--line)}
.chapter-head{display:flex;align-items:baseline;gap:clamp(18px,3vw,48px);margin-bottom:clamp(20px,6vh,60px)}.chapter-no{color:var(--lime);font-size:12px;letter-spacing:.14em}
h2{font-size:clamp(40px,5.2vw,92px);font-weight:500;letter-spacing:-.055em;line-height:1;margin:0}html[lang^=zh] h2{letter-spacing:-.01em}
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px)}
.step{min-height:96svh;display:flex;flex-direction:column;justify-content:center;max-width:430px;opacity:.22;transition:opacity .5s}.step.is-active{opacity:1}
.step-no{color:var(--lime);font-size:10px;letter-spacing:.14em}
h3{font-size:clamp(26px,2.4vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.15;margin:14px 0 18px}html[lang^=zh] h3{letter-spacing:0}
.step p{margin:0;color:#b6c1aa;font-size:16px;line-height:1.8}.step p+p{margin-top:16px}.step .hint{color:#7f8e71;font-size:10px}.step .takeaway{color:var(--fg);border-left:2px solid var(--lime);padding-left:16px;margin-top:26px;font-size:17px}
.stage{position:sticky;top:12svh;align-self:start;height:76svh;border:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(180deg,#0c110b,#090c09)}
.stage::before,.stage::after{content:'';position:absolute;width:10px;height:10px;border:solid var(--lime);pointer-events:none}.stage::before{left:-1px;top:-1px;border-width:1px 0 0 1px}.stage::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.stage-meta{display:flex;gap:16px;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);color:#6f7e62;font-size:9px;letter-spacing:.12em}.stage-fig{color:#a9b89a}
.stage-scenes{position:relative;flex:1}
.scene{position:absolute;inset:0 0 60px;opacity:0;transform:scale(.985);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.15,1);pointer-events:none;display:flex;align-items:center;justify-content:center}.scene.is-active{opacity:1;transform:none;pointer-events:auto}
.scene>svg{width:100%;height:100%;padding:24px 22px 0;overflow:visible}
.scene-caption{position:absolute;left:18px;right:18px;top:100%;margin:0;padding-top:14px;border-top:1px solid var(--line);color:#a3b195;font-size:11px;min-height:60px}
.scene text{font:12px 'IBM Plex Mono',var(--cjk);fill:#b8c4ab;letter-spacing:.03em}
.chip rect{fill:#0d120d;stroke:#ffffff2e;transition:fill .4s,stroke .4s}.chip text{transition:fill .4s}.chip.on rect{fill:#18220f;stroke:var(--lime)}.chip.on text{fill:var(--lime)}
.chip.out rect{stroke:#d4ff6380}.chip.out text{fill:var(--lime)}
.wire{fill:none;stroke:#ffffff2a;stroke-width:1}.pulse{fill:var(--lime)}
.box{fill:#050705;stroke:#d4ff6355;animation:breathe 4s ease-in-out infinite}.box-q{font:300 64px Space Grotesk,sans-serif!important;fill:#26301f!important}
.numbers,.threads{width:100%;height:100%;display:block}.numbers{-webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 45%,transparent 80%)}
.link{fill:none;stroke:#ffffff10;stroke-width:1;transition:stroke .4s}.link.on{stroke:#d4ff63b0}
.neuron{cursor:pointer}.neuron .hit{fill:transparent}.neuron circle+circle{fill:#11180e;stroke:#ffffff40;transition:fill .4s,stroke .4s}.neuron.on circle+circle{fill:var(--lime);stroke:var(--lime);filter:drop-shadow(0 0 8px #d4ff6390)}
.untangle-control{position:absolute;left:18px;right:18px;bottom:12px;display:flex;align-items:center;gap:14px;color:#7f8e71;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.untangle-control input{flex:1;appearance:none;-webkit-appearance:none;height:20px;background:transparent;cursor:pointer}
.untangle-control input::-webkit-slider-runnable-track{height:1px;background:#ffffff38}.untangle-control input::-moz-range-track{height:1px;background:#ffffff38}
.untangle-control input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6.5px;border-radius:50%;background:var(--lime);border:0;box-shadow:0 0 12px #d4ff6370}.untangle-control input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--lime);border:0}
.circuit{cursor:pointer}.edge-base{fill:none;stroke:#ffffff12;stroke-width:1;stroke-dasharray:3 4}.edge{fill:none;stroke:var(--lime);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}.edge.on{stroke-dashoffset:0}
.chip.feature rect{stroke-dasharray:3 3}.chip.feature.on rect{stroke-dasharray:none}.chip.out:not(.on){opacity:.35}
.scene-btn{position:absolute;right:18px;top:14px;background:none;border:1px solid var(--line);color:#a9b89a;font-size:10px;padding:7px 12px;cursor:pointer;transition:color .2s,border-color .2s}.scene-btn:hover{color:var(--lime);border-color:#d4ff6380}
.has-bar>svg{padding-bottom:44px}
.views{position:absolute;left:18px;bottom:12px;display:flex;border:1px solid var(--line)}.views button{background:none;border:0;color:#7f8e71;font:inherit;font-size:10px;letter-spacing:.08em;padding:7px 14px;cursor:pointer;transition:color .2s,background .2s}.views button:hover{color:var(--lime)}.views button[aria-pressed=true]{background:var(--lime);color:#10170a}
.scene .fig-label{font-size:10px;letter-spacing:.14em;fill:var(--lime)}.scene .fig-label.alt{fill:#86e0c8}.scene .fig-note{font-size:11px;fill:#7f8e71}.divider{stroke:#ffffff1a;stroke-dasharray:3 4}
.code-line{opacity:0;transition:opacity .4s}.scene .code-line.comment{fill:#6d7c60}.grown .code-line{opacity:1}
.branch{fill:none;stroke:#d4ff63b0;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out}.grown .branch{stroke-dashoffset:0}.tip{fill:var(--lime);opacity:0;transition:opacity .5s}.grown .tip{opacity:1}.reset .branch,.reset .tip,.reset .code-line{transition:none}
.test rect,.test text{transition:fill .5s,stroke .5s}.show-inside .test.recall rect{stroke:var(--lime)}.show-inside .test.recall text{fill:var(--lime)}.show-inside .test.shortcut rect{stroke:#f3c070;fill:#1c160b}.show-inside .test.shortcut text{fill:#f3c070}
.swatch.recall{fill:var(--lime)}.swatch.shortcut{fill:#f3c070}.inside-only{opacity:0;transition:opacity .6s}.show-inside .inside-only{opacity:1}.chip.fail rect{stroke:#ff9a8a;fill:#1d0f0d}.scene .chip.fail text{fill:#ff9a8a}
.says,.does{transition:opacity .5s}.does,.show-does .says{opacity:0}.show-does .does{opacity:1}.bubble{fill:#0d120d;stroke:#ffffff2e}.scene .said-line{font-size:14px;fill:#dfe5d6}
.chip.alt.on rect{stroke:#86e0c8;fill:#0e1a17}.chip.alt.on text{fill:#86e0c8}.edge.alt{stroke:#86e0c8}
.chapter-note{margin:60px 0 0;color:#5f6e53;font-size:10px;max-width:760px}.chapter-note a{color:#8d9a80;border-bottom:1px solid #ffffff30}.chapter-note a:hover{color:var(--lime)}

footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:22px;border-top:1px solid var(--line);padding:27px var(--gutter);color:#7f8d72;font-size:8px}.footer-brand{font-size:10px;color:#c3cdb9}.footer-links{display:flex;align-items:center;gap:26px}.footer-links a:hover{color:var(--lime)}.research-labels{color:#5e7050;letter-spacing:.08em}.site-address{color:#a7b799}.site-address:hover{color:var(--lime)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes breathe{50%{stroke:#d4ff6322}}
@media(hover:none){.specimen-text{cursor:auto}}
@media(max-width:1100px){.project-breadcrumb{display:none}.research-labels{display:none}}
@media(max-width:820px){.prologue-copy{grid-template-columns:1fr}.lede{font-size:15px}
.scrolly{grid-template-columns:1fr;gap:0}.stage{order:-1;top:0;height:54svh;z-index:2;margin-inline:calc(var(--gutter)*-1);border-inline:0;background:var(--bg)}.step{min-height:80svh;justify-content:flex-end;padding-bottom:12svh;max-width:none}.scene>svg{padding:14px 10px 0}.scene text{font-size:17px}.scene{inset:0 0 76px}.scene-caption{min-height:76px;font-size:10px}.has-bar>svg{padding-bottom:44px}.scene .code-line{font-size:14px}}
@media(max-width:720px){.site-header{height:76px;gap:15px}.brand{font-size:24px;gap:9px}.brand svg{width:26px;height:26px}nav{gap:19px;font-size:10px}.repo-link{display:none}.prologue{min-height:calc(100svh - 76px)}.specimen-prompt{flex-direction:column;gap:4px}.depth .tok[data-feature]::after{font-size:8px;padding:3px 4px}footer{padding-block:23px;font-size:7px;flex-wrap:wrap;gap:17px}.footer-links{gap:18px}.site-address{order:3;flex-basis:100%;font-size:8px}.footer-brand{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important}}