:root{--bg:#fff;--ink:#0f172a;--muted:#475569;--faint:#94a3b8;--line:#e2e8f0;--soft:#f8fafc;--accent:#4f46e5;--accent-soft:#eef2ff;--code-bg:#0f172a;--code-ink:#e2e8f0;--font:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font:16px/1.65 var(--font);margin:0}a{color:var(--accent)}.topbar{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);background:#ffffffeb;align-items:center;gap:16px;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.topbar .logo{letter-spacing:-.02em;color:var(--ink);font-weight:800;text-decoration:none}.topbar .logo span{color:var(--accent)}.topbar .sep{color:var(--faint)}.topbar .crumb{color:var(--muted);font-size:14px}.topbar .spacer{flex:1}.topbar .switch{border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;text-decoration:none}.topbar .switch:hover{border-color:var(--accent);color:var(--accent)}.layout{grid-template-columns:220px minmax(0,1fr);max-width:1320px;margin:0 auto;display:grid}.sidenav{border-right:1px solid var(--line);align-self:start;height:calc(100vh - 56px);padding:28px 16px 28px 24px;font-size:14px;position:sticky;top:56px;overflow:auto}.sidenav h4{letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 0 6px;font-size:11px}.sidenav h4:first-child{margin-top:0}.sidenav a{color:var(--muted);border-radius:6px;margin:0 -8px;padding:4px 8px;text-decoration:none;display:block}.sidenav a:hover{background:var(--soft);color:var(--ink)}.sidenav a.here{background:var(--accent-soft);color:var(--accent);font-weight:600}.content{min-width:0;padding:36px 48px 120px}.content>header{max-width:760px}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:12px;font-weight:700}h1{letter-spacing:-.02em;margin:6px 0 10px;font-size:34px;line-height:1.2}.lede{color:var(--muted);margin:0 0 24px;font-size:18px}h2{letter-spacing:-.01em;align-items:center;gap:10px;margin:0 0 8px;font-size:21px;display:flex}p{margin:0 0 14px}code{font:13.5px var(--mono);background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px}pre{background:var(--code-bg);color:var(--code-ink);font:13px/1.6 var(--mono);border-radius:10px;margin:0 0 16px;padding:14px 16px;overflow:auto}pre code{color:inherit;background:0 0;border:0;padding:0}.note{border-left:3px solid var(--accent);background:var(--accent-soft);color:#312e81;border-radius:0 8px 8px 0;margin:0 0 16px;padding:10px 14px;font-size:14.5px}.step{border-top:1px solid var(--line);max-width:760px;padding:26px 0 30px}.num{background:var(--soft);border:1px solid var(--line);width:26px;height:26px;color:var(--muted);font:700 12px var(--font);border-radius:999px;flex:none;place-items:center;display:inline-grid}.figure{border:1px solid var(--line);background:var(--soft);border-radius:12px;max-width:900px;margin:0 0 28px;padding:12px}.figure img{width:100%;height:auto;display:block}.figure figcaption{color:var(--muted);text-align:center;margin-top:8px;font-size:13px}.stage{z-index:5;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:10px;max-width:1100px;height:min(48vh,500px);min-height:280px;margin:0 0 8px;padding:10px 0 12px;display:flex;position:sticky;top:56px}#diagram{border:1px solid var(--line);border-radius:14px;flex:1;min-height:0;overflow:hidden}.stage-bar{white-space:nowrap;align-items:center;gap:10px;font-size:13.5px;display:flex}.stage-bar button,.stage-bar select{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:7px 14px;font-weight:600}.stage-bar button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.stage-bar .where{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}.synced .step{scroll-margin-top:calc(80px + min(48vh,500px));transition:opacity .3s}.synced .step:not(.is-active){opacity:.5}.synced .step .num{cursor:pointer}.synced .step.is-active .num{background:var(--accent);border-color:var(--accent);color:#fff}.synced .step.is-active h2{color:var(--accent)}.synced .content{padding-bottom:60vh}@media (max-width:900px){.stage{height:40vh;min-height:240px}.synced .step{scroll-margin-top:calc(72px + 40vh)}.stage-bar button,.stage-bar select{padding:6px 11px}}@media (max-width:640px){.stage{height:auto;min-height:0}#diagram{aspect-ratio:16/9;flex:none}.synced .step{scroll-margin-top:calc(136px + 56vw)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.synced .step{transition:none}}@media (max-width:640px){.topbar{gap:10px;padding:0 14px}.topbar .sep,.topbar .crumb{display:none}.topbar .switch{white-space:nowrap;padding:5px 10px;font-size:12px}}@media (max-width:900px){.layout{grid-template-columns:1fr}.sidenav{display:none}.content{padding:24px 18px 100px}h1{font-size:28px}}