:root { --bg:#08090b; --surface:rgba(18,21,26,.78); --line:rgba(255,255,255,.09); --text:#eef2f5; --muted:#9ca8b4; --faint:#64717d; --cyan:#7ee0ff; --gold:#e7c477; --green:#9be7b0; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 72% -10%,#17232b 0,transparent 38%),var(--bg); font:14px/1.6 var(--sans); }
a { color:var(--cyan); text-decoration:none; } a:hover { color:#b9efff; }
.wrap { width:min(1160px,calc(100% - 40px)); margin:auto; }
header { display:flex; align-items:center; gap:10px; min-height:78px; border-bottom:1px solid var(--line); }
header img { width:30px; height:30px; } .name { color:var(--text); font-size:15px; font-weight:700; } .ver { color:var(--faint); font:10px var(--mono); letter-spacing:.08em; } .spacer { flex:1; }
nav { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .chip { padding:6px 11px; border:1px solid transparent; border-radius:7px; color:var(--muted); font-size:12px; } .chip:hover,.chip[aria-current=page] { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.045); }
.layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:58px; padding:62px 0 100px; } aside { position:sticky; top:26px; align-self:start; }
.eyebrow,.label { color:var(--gold); font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; } .side-title { margin:10px 0 20px; font-size:15px; font-weight:650; }
.side-links { display:grid; gap:8px; border-left:1px solid var(--line); } .side-links a { padding-left:14px; color:var(--muted); font-size:12px; } .side-links a:hover { color:var(--cyan); } .side-note { margin-top:30px; color:var(--faint); font-size:12px; }
main { min-width:0; } h1 { max-width:820px; margin:10px 0 16px; font-size:clamp(38px,6vw,68px); line-height:.98; letter-spacing:-.055em; } h2 { margin:44px 0 10px; font-size:27px; letter-spacing:-.03em; } h3 { margin:28px 0 8px; font-size:17px; } h4 { margin:22px 0 7px; font-size:14px; color:var(--cyan); }
.lead { max-width:700px; color:var(--muted); font-size:17px; } .section-copy { max-width:760px; color:var(--muted); } .callout { display:flex; gap:12px; align-items:flex-start; margin:26px 0 44px; padding:15px 17px; border:1px solid rgba(126,224,255,.19); border-radius:10px; background:rgba(126,224,255,.045); color:var(--muted); } .callout b { color:var(--cyan); font:12px var(--mono); }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 40px; } .button { display:inline-block; padding:9px 13px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:12px; } .button.primary { border-color:rgba(231,196,119,.45); background:var(--gold); color:#17130c; font-weight:750; } .button:hover { border-color:rgba(126,224,255,.45); color:var(--text); }
.doc { min-height:300px; } .doc h1 { font-size:36px; } .doc h2 { padding-top:22px; border-top:1px solid var(--line); } .doc p { max-width:790px; color:var(--muted); } .doc li { max-width:780px; margin:5px 0; color:var(--muted); } .doc strong { color:var(--text); } .doc blockquote { margin:16px 0; padding:10px 15px; border-left:2px solid var(--gold); color:var(--muted); background:rgba(231,196,119,.05); }
code,pre { font-family:var(--mono); } code { color:var(--cyan); font-size:.9em; } pre { overflow:auto; margin:13px 0 18px; padding:15px; border:1px solid var(--line); border-radius:8px; background:#090b0e; color:#c7d2db; font-size:11px; line-height:1.65; }
table { width:100%; margin:16px 0; border-collapse:collapse; font-size:12px; } th,td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { color:var(--faint); font:10px var(--mono); text-transform:uppercase; } td { color:var(--muted); }
.source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:20px; } .source-card { display:block; padding:13px 15px; border:1px solid var(--line); border-radius:8px; background:var(--surface); } .source-card small { display:block; margin-top:3px; color:var(--faint); font:10px var(--mono); }
footer { margin-top:65px; padding-top:20px; border-top:1px solid var(--line); color:var(--faint); font-size:12px; }
@media(max-width:760px) { .wrap { width:min(100% - 26px,1160px); } .layout { display:block; padding-top:40px; } aside { position:static; margin-bottom:44px; } .side-links { display:flex; flex-wrap:wrap; gap:10px 18px; border:0; } .side-links a { padding:0; } nav { gap:2px; } .chip { padding:5px 7px; } .source-grid { grid-template-columns:1fr; } }