:root{--bg:#f3f5fb;--panel:#fff;--ink:#16203a;--muted:#55607a;--line:#d5daea;--grid:rgba(22,32,58,.06);--net:#5a3df0;--sub:#0a7580;--dev:#c4500b;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#10162a;--panel:#18213b;--ink:#e8ecf8;--muted:#a3aecb;--line:#2a3558;--grid:rgba(232,236,248,.05);--net:#8b78ff;--sub:#3fc9d6;--dev:#ff9150}}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:1.0625rem/1.6 var(--sans);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
a{color:var(--net)}
:focus-visible{outline:3px solid var(--net);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .6rem}
h1{font-size:clamp(1.9rem,5vw,3rem)}h2{font-size:1.4rem}h3{font-size:1.1rem}
p{margin:0 0 1rem;max-width:68ch}
header.top{padding:1rem 0}
header.top .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.logo{font:800 1.3rem var(--mono);text-decoration:none;letter-spacing:-.03em;color:var(--ink)}
nav a{margin-left:1.2rem;color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink);text-decoration:underline}
.lead{color:var(--muted);font-size:1.15rem;max-width:56ch}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0 2.5rem;color:var(--muted);font-size:.94rem}