:root { color-scheme: light dark; --bg:#f4f7fa; --panel:#fff; --soft:#edf5fb; --text:#243b53; --heading:#102a43; --muted:#627d98; --border:#d8e2ec; --accent:#2e6ba7; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1720; --panel:#17212b; --soft:#223241; --text:#d6e2ec; --heading:#f4f8fb; --muted:#a4b6c5; --border:#344452; --accent:#70afe7; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font:15px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.layout { display:grid; grid-template-columns:240px minmax(0,780px); gap:48px; width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:42px 0 80px; }
nav { position:sticky; top:24px; align-self:start; max-height:calc(100vh - 48px); overflow:auto; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
nav strong { display:block; margin-bottom:10px; color:var(--heading); font-size:17px; }
nav a { display:block; padding:4px 0; color:var(--muted); font-size:13px; text-decoration:none; }
nav a:hover { color:var(--accent); }
main { min-width:0; }
h1,h2,h3 { color:var(--heading); line-height:1.25; letter-spacing:-.02em; }
h1 { margin:0; font-size:38px; } h2 { margin:48px 0 12px; padding-top:8px; border-top:1px solid var(--border); font-size:25px; } h3 { margin:26px 0 8px; font-size:18px; }
.lede { margin:8px 0 30px; color:var(--muted); font-size:17px; }
code,pre { font-family:Consolas,"SFMono-Regular",monospace; }
code { padding:2px 5px; border-radius:4px; color:var(--accent); background:var(--soft); }
pre { overflow:auto; padding:16px 18px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--panel); font-size:13px; line-height:1.55; }
pre code { padding:0; color:inherit; background:none; }
table { width:100%; border-collapse:collapse; margin:14px 0 24px; font-size:13px; }
th,td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { color:var(--heading); background:var(--soft); }
.note { padding:12px 14px; border-left:3px solid var(--accent); border-radius:0 7px 7px 0; background:var(--soft); }
@media (max-width:800px) { .layout { display:block; } nav { position:static; margin-bottom:30px; } }