.story-hero{padding-block:clamp(64px,8vw,112px) 40px;max-width:1180px}.story-hero h1{font-size:clamp(3rem,5.6vw,5.8rem);max-width:13ch;margin:24px 0 28px}.story-hero h1 span{color:var(--accent)}.story-lede{color:var(--muted);max-width:640px;font-size:clamp(1.05rem,1.4vw,1.25rem);margin-bottom:32px}.story-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:600 .72rem/1.4 var(--mono);color:var(--muted)}.story-byline strong{color:var(--text)}.story-byline a{color:var(--accent)}.story-byline .sep{color:var(--line)}.story-avatar{display:inline-flex;border-radius:50%;padding:3px;border:2px solid var(--accent-solid);line-height:0;margin-right:4px}.story-avatar img,.story-sign-avatar{border-radius:50%;filter:grayscale(.78) contrast(1.04);transition:filter .25s ease}.story-avatar:hover img,.story-avatar:focus-visible img{filter:none}.story-sign{display:flex;align-items:center;gap:12px}.story-sign-avatar{border:2px solid var(--accent-solid)}.why-figure{margin:0 auto 24px;width:var(--page);max-width:1180px}.why-ill{display:block;width:100%;height:auto;filter:drop-shadow(10px 10px 0 color-mix(in srgb,var(--accent) 22%,transparent))}.why-figure figcaption{margin-top:22px;color:var(--muted);font:600 .7rem/1.5 var(--mono);text-align:center}.ill-frame{fill:var(--surface);stroke:var(--line);stroke-width:2}.ill-dot{fill:color-mix(in srgb,var(--line) 70%,transparent)}.ill-ink{stroke:var(--text);stroke-width:4;stroke-linejoin:round}.ill-ink-fill{fill:var(--text)}.ill-on-accent{stroke:var(--accent-text);stroke-width:4}.ill-on-accent-fill{fill:var(--accent-text)}.ill-round{fill:none;stroke-linecap:round}.ill-join{stroke-linejoin:round}.ill-accent-fill{fill:var(--accent-solid)}.ill-surface-fill{fill:var(--surface-2)}.ill-paper{fill:var(--bg)}.ill-body-a{fill:color-mix(in srgb,var(--accent-solid) 55%,var(--bg))}.ill-body-b{fill:var(--surface-2)}.ill-hair{stroke-width:5}.ill-label{fill:var(--accent);font:700 22px var(--mono);letter-spacing:.04em;text-transform:uppercase}.ill-sub{fill:var(--muted);font:600 17px var(--mono)}.ill-token{fill:var(--text);font:700 44px var(--mono)}.ill-scribble{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round;stroke-dasharray:14 9}.ill-flow{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round;stroke-dasharray:3 13}.ill-flow-2{stroke:var(--accent)}.ill-screen{fill:var(--screen)}.ill-shadow{fill:color-mix(in srgb,var(--accent) 45%,transparent)}.ill-dot-a{fill:#ef7a5f}.ill-dot-b{fill:#edb86a}.ill-dot-c{fill:#c7ef6b}.ill-face{fill:var(--face);font:700 46px var(--mono);letter-spacing:-.08em}.ill-status{fill:var(--status);font:600 16px var(--mono)}.ill-arrow{stroke-dasharray:6 8}.ill-floor-2{stroke-dasharray:2 14;stroke:var(--line)}.ill-chip-text{fill:var(--accent-text);font:700 28px var(--mono)}.ill-chip-dark{fill:var(--text)}@media(prefers-reduced-motion:no-preference){.ill-flow{animation:ill-flow 1.6s linear infinite}.ill-chip{animation:ill-bob 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}.ill-blink{animation:ill-blink 1.4s steps(2,end) infinite}.ill-spark{transform-origin:262px 220px;animation:ill-pulse 2.8s ease-in-out infinite}}@keyframes ill-flow{to{stroke-dashoffset:-32}}@keyframes ill-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes ill-blink{50%{opacity:.25}}@keyframes ill-pulse{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(12deg)}}.story{display:grid;grid-template-columns:minmax(0,220px) minmax(0,720px);justify-content:center;gap:clamp(32px,6vw,96px);padding-block:clamp(56px,7vw,96px) clamp(72px,9vw,128px)}.story-toc{position:sticky;top:100px;align-self:start;display:grid;gap:12px;font:600 .7rem/1.4 var(--mono)}.story-toc a{color:var(--muted);text-decoration:none}.story-toc a:hover{color:var(--accent)}.story-body{font-size:1.1rem;line-height:1.75}.story-body section{padding-block:8px 28px}.story-body h2{font-size:clamp(2rem,3.4vw,3rem);margin:40px 0 22px;scroll-margin-top:96px}.story-body p{color:color-mix(in srgb,var(--text) 86%,var(--muted));margin-bottom:22px}.story-body p.big{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.35;color:var(--text);font-weight:700;letter-spacing:-.02em}.story-body ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px}.story-body li{position:relative;padding-left:32px}.story-body li:before{content:"→";position:absolute;left:0;color:var(--accent);font:700 1rem/1.75 var(--mono)}.story-body li strong{color:var(--text)}.story-body code{background:var(--surface-2);padding:2px 7px;border-radius:4px;font:600 .9em var(--mono)}.story-code{margin:8px 0 30px;background:#343c35;color:var(--code-text);border:1px solid #4a534b;border-radius:var(--radius);overflow:hidden;box-shadow:9px 9px color-mix(in srgb,var(--accent) 24%,transparent)}.story-code .code-bar{height:42px}.story-code pre{margin:0;padding:22px 24px;overflow:auto;font:500 .82rem/1.85 var(--mono)}.story-code pre code{background:none;padding:0;border-radius:0;font:inherit;color:inherit}.story-quote{margin:34px 0;padding:28px 30px;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.35;font-weight:700;letter-spacing:-.02em}.story-questions{margin:10px 0 30px;border-top:2px solid var(--text)}.story-questions li{padding:18px 0 18px 32px;border-bottom:1px solid var(--line)}.story-sign{margin-top:36px;font:600 .78rem/1.6 var(--mono);color:var(--muted)}.story-sign a{color:var(--accent)}@media(max-width:960px){.story{grid-template-columns:minmax(0,720px)}.story-toc{display:none}}@media(max-width:720px){.story-hero h1{font-size:clamp(2.5rem,11vw,3.4rem)}.story-body{font-size:1.02rem}.story-code pre{font-size:.7rem;padding:18px 16px}.why-figure{width:calc(100% - 20px)}.story-quote{padding:22px 20px}}:root[data-theme=dark] .story-code{background:#dcdfd5;color:#1b201c;border-color:#b4bbaa}:root[data-theme=dark] .story-code .code-bar{border-bottom-color:#c1c7ba;color:#4b534c}:root[data-theme=dark] .story-code .syntax-h{color:#151816}:root[data-theme=dark] .story-code .syntax-q{color:#0f7f78}:root[data-theme=dark] .story-code .syntax-i,:root[data-theme=dark] .story-code .syntax-d,:root[data-theme=dark] .story-code .syntax-a{color:#3f6400}:root[data-theme=dark] .story-code .syntax-s{color:#9a5b00}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .story-code{background:#dcdfd5;color:#1b201c;border-color:#b4bbaa}:root:not([data-theme=light]) .story-code .code-bar{border-bottom-color:#c1c7ba;color:#4b534c}:root:not([data-theme=light]) .story-code .syntax-h{color:#151816}:root:not([data-theme=light]) .story-code .syntax-q{color:#0f7f78}:root:not([data-theme=light]) .story-code .syntax-i,:root:not([data-theme=light]) .story-code .syntax-d,:root:not([data-theme=light]) .story-code .syntax-a{color:#3f6400}:root:not([data-theme=light]) .story-code .syntax-s{color:#9a5b00}}