:root { color-scheme: dark; --ink:#f6f1ff; --muted:#aaa7b8; --paper:#11101c; --panel:#191725; --line:rgba(255,255,255,.12); --violet:#a78bfa; --lime:#bdff61; --orange:#ff9164; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 82% 8%,rgba(167,139,250,.16),transparent 28rem),radial-gradient(circle at 18% 31%,rgba(255,145,100,.1),transparent 25rem),var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:10; left:1rem; top:-4rem; padding:.6rem .8rem; border-radius:.45rem; background:white; color:#100f19; } .skip-link:focus { top:1rem; }
.topbar { display:flex; align-items:center; gap:1rem; min-height:78px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.83rem; } .brand { color:var(--ink); font-weight:750; letter-spacing:-.03em; font-size:1rem; } .brand span { color:var(--lime); } .topbar p { margin:0; flex:1; } .quiet-link { transition:color .2s; } .quiet-link:hover { color:var(--lime); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:5rem; align-items:center; min-height:610px; padding-block:4.5rem; }.eyebrow{ margin:0 0 1rem; color:var(--lime); font-size:.7rem; font-weight:750; letter-spacing:.15em; }.status-dot{ display:inline-block; width:.5rem; height:.5rem; margin-right:.45rem; border-radius:50%; background:var(--lime); box-shadow:0 0 16px var(--lime); }.hero h1,.section-intro h2,.code-head h2,.notes h2{margin:0; font-size:clamp(3rem,7vw,5.7rem); letter-spacing:-.075em; line-height:.9}.hero h1 em{font-style:normal;color:var(--violet)}.lede{max-width:34rem;margin:1.7rem 0 2rem;color:var(--muted);font-size:1.1rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}.primary-button,.secondary-button,.copy-button{border-radius:.7rem;padding:.82rem 1rem;border:1px solid var(--line);transition:transform .2s,background .2s,border-color .2s}.primary-button{background:var(--lime);color:#161512;font-weight:750}.secondary-button,.copy-button{background:rgba(255,255,255,.035);color:var(--ink)}.primary-button:hover,.copy-button:hover,.secondary-button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.38)}.copy-button.is-copied{background:var(--violet);border-color:var(--violet)}
.flow-card{overflow:hidden;border:1px solid var(--line);border-radius:1.4rem;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025));box-shadow:0 2rem 7rem rgba(0,0,0,.28)}.window-bar{display:flex;align-items:center;gap:.35rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}.window-bar span{width:.55rem;height:.55rem;border-radius:50%;background:#ff755f}.window-bar span:nth-child(2){background:#ffc657}.window-bar span:nth-child(3){background:#68d975}.window-bar b{margin-left:.55rem;color:var(--muted);font-size:.62rem;letter-spacing:.12em}.shortcut-stage{padding:2rem 1.5rem 1.2rem;background:radial-gradient(circle at 50% 24%,rgba(167,139,250,.35),transparent 55%);text-align:center}.keys{display:flex;justify-content:center;gap:.45rem}.keys kbd,.escape-note kbd{display:inline-grid;place-items:center;min-width:3rem;padding:.38rem .55rem;border:1px solid rgba(255,255,255,.25);border-bottom-width:3px;border-radius:.45rem;background:#28243a;color:white;font-weight:750}.shortcut-stage p{margin:.7rem 0 0;color:var(--muted);font-size:.75rem}.flow-list{list-style:none;margin:0;padding:0 1.5rem}.flow-list li{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid var(--line)}.flow-list span{color:var(--orange);font-family:ui-monospace,monospace;font-size:.75rem}.flow-list small{color:var(--muted)}.escape-note{margin:0;padding:1rem 1.5rem;background:rgba(255,255,255,.035);color:var(--muted);font-size:.75rem}.escape-note kbd{min-width:auto;padding:.08rem .33rem;font-size:.7rem}
.proof-band{border-block:1px solid var(--line);background:rgba(0,0,0,.16)}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}.proof-grid p{display:flex;align-items:center;gap:.8rem;margin:0;padding:1.3rem 1rem;border-left:1px solid var(--line)}.proof-grid p:last-child{border-right:1px solid var(--line)}.proof-grid strong{color:var(--lime);font-size:1.15rem}.proof-grid span{color:var(--muted);font-size:.78rem}
.guide,.code-section,.notes{padding-block:7rem}.guide{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem}.section-intro h2,.code-head h2,.notes h2{font-size:clamp(2.25rem,4vw,3.7rem)}.section-intro>p:last-child{color:var(--muted)}.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}.steps>li>span{color:var(--orange);font-family:ui-monospace,monospace}.steps h3{margin:0;font-size:1.05rem}.steps p{margin:.35rem 0 0;color:var(--muted);font-size:.92rem}.code-section{border-top:1px solid var(--line)}.code-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.5rem}.code-copy{white-space:nowrap}.code-section pre{margin:0;overflow:auto;padding:1.7rem;border:1px solid var(--line);border-radius:1rem;background:#0b0a12;color:#e9e6f6;line-height:1.8}.comment{color:#858196}.command{color:var(--lime)}.flag{color:var(--orange)}.flag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:.8rem}.flag-grid p{margin:0;padding:1rem;border:1px solid var(--line);border-radius:.75rem;background:rgba(255,255,255,.025)}.flag-grid code{color:var(--violet);font-weight:750}.flag-grid span{display:block;margin-top:.25rem;color:var(--muted);font-size:.76rem}.notes{display:grid;grid-template-columns:.75fr 1fr;gap:2rem;border-top:1px solid var(--line)}.notes>p{margin:0;color:var(--muted);font-size:1.03rem}.notice{grid-column:2;padding:1rem;border-left:2px solid var(--lime);background:rgba(189,255,97,.06);font-size:.86rem!important}.notice strong{color:var(--ink)}footer{display:flex;justify-content:space-between;padding-block:2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}.toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:4;opacity:0;transform:translateY(1rem);padding:.7rem .85rem;border:1px solid var(--line);border-radius:.6rem;background:#28243a;transition:opacity .2s,transform .2s;pointer-events:none}.toast.is-visible{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}@media(max-width:760px){.topbar p{display:none}.hero,.guide,.notes{grid-template-columns:1fr;gap:3rem}.hero{min-height:auto;padding-block:4rem}.proof-grid{grid-template-columns:1fr}.proof-grid p,.proof-grid p:last-child{border-inline:0;border-bottom:1px solid var(--line)}.proof-grid p:last-child{border-bottom:0}.code-head{align-items:start;flex-direction:column}.flag-grid{grid-template-columns:repeat(2,1fr)}.notice{grid-column:auto}footer{gap:1rem;flex-direction:column}.flow-list li{grid-template-columns:2rem 1fr}.flow-list small{grid-column:2}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}