:root { color-scheme: dark; --bg:#0B0D12; --fg:#E7ECF3; --dim:#8F9AAE; --accent:#5DA0FF; --border:#222836; font-family:Inter,system-ui,sans-serif; color:var(--fg); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; font-size:17px; line-height:1.75; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#A8C6FF; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.skip { position:absolute; left:24px; top:-80px; background:var(--bg); padding:12px; }
.skip:focus { top:12px; }
header, main, footer { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:28px 0; border-bottom:1px solid var(--border); }
.brand { color:var(--fg); font-size:24px; font-weight:500; letter-spacing:.12em; text-decoration:none; }
header span { color:var(--dim); font-size:14px; }
.intro { padding:72px 0 48px; max-width:760px; }
.eyebrow { font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; }
h1,h2 { font-family:Geist,Inter,system-ui,sans-serif; font-weight:500; line-height:1.18; letter-spacing:-.025em; }
h1 { font-size:clamp(36px,6vw,58px); margin:18px 0 24px; }
h2 { font-size:26px; margin:0 0 20px; }
p { margin:0 0 18px; }
.intro p { font-size:19px; color:var(--dim); }
.layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; }
nav { position:sticky; top:24px; font-size:14px; padding-bottom:32px; }
nav ol { padding:0; list-style:none; margin:14px 0 0; }
nav a { display:block; padding:8px 0; color:var(--dim); text-decoration:none; min-height:44px; }
article { max-width:72ch; }
section { scroll-margin-top:32px; padding:0 0 40px; margin-bottom:40px; border-bottom:1px solid var(--border); }
ul { padding-left:22px; }
li { padding-left:4px; margin-bottom:10px; }
.note { color:var(--dim); }
footer { padding:24px 0 48px; color:var(--dim); font-size:14px; }
@media(max-width:760px) { .layout { display:block; } nav { position:static; border-bottom:1px solid var(--border); margin-bottom:40px; } nav ol { columns:2; column-gap:24px; } nav li { break-inside:avoid; } .intro { padding-top:48px; } header span { max-width:140px; text-align:right; } }
@media(max-width:420px) { nav ol { columns:1; } header,main,footer { width:calc(100% - 36px); } }
@media print { :root { color-scheme:light; color:#20242b; background:#fafafa; } header,main,footer { width:100%; } nav,.skip { display:none; } .layout { display:block; } .intro { padding:20px 0; } section { break-inside:avoid; } a,.intro p,.note { color:inherit; } }