:root { color-scheme: dark; --bg:#0b0d0c; --panel:#141715; --line:#2a2f2b; --ink:#f2f5ef; --muted:#a9b0a8; --acid:#d8ff3e; font-family:Inter,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 75% 0%,#283214 0,transparent 28rem),var(--bg); line-height:1.65; }
a { color:var(--acid); }
a:focus-visible,summary:focus-visible { outline:3px solid var(--acid); outline-offset:3px; }
code { color:var(--acid); background:#0e110f; border:1px solid var(--line); border-radius:6px; padding:2px 6px; }
.skip { position:absolute; left:-999px; top:0; }.skip:focus { left:16px; top:16px; z-index:10; background:var(--acid); color:#11140d; padding:8px 12px; border-radius:8px; }
.topbar { min-height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px max(24px,calc((100vw - 980px)/2)); }
.brand { color:var(--ink); text-decoration:none; font-size:22px; font-weight:800; letter-spacing:-1px; display:flex; align-items:center; gap:10px; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; background:var(--acid); color:#10120d; border-radius:8px 2px 8px 2px; font-family:Consolas,monospace; }
nav { display:flex; flex-wrap:wrap; gap:16px; font-size:14px; } nav a { color:var(--muted); text-decoration:none; } nav a:hover { color:var(--ink); }
main { max-width:800px; margin:0 auto; padding:72px 24px 96px; }.eyebrow { color:var(--acid); font:12px Consolas,monospace; letter-spacing:1.5px; }.lede { max-width:680px; color:var(--muted); font-size:19px; }
h1 { font-size:clamp(38px,7vw,68px); line-height:1; letter-spacing:-3px; margin:18px 0; } h2 { margin:46px 0 12px; font-size:27px; letter-spacing:-1px; } h3 { margin:0 0 8px; font-size:19px; }
.card,.steps article { background:linear-gradient(145deg,#181c19,#111311); border:1px solid #343a34; border-radius:16px; padding:22px; margin:22px 0; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0; }.steps article { margin:0; }.steps b { color:var(--acid); font:12px Consolas,monospace; }.steps p,.card p,.card li { color:var(--muted); }.button { display:inline-block; border-radius:10px; padding:13px 18px; background:var(--acid); color:#11140d; text-decoration:none; font-weight:800; }.button.secondary { color:var(--ink); background:#292e29; margin-left:8px; }
pre { overflow:auto; padding:16px; border-radius:12px; border:1px solid var(--line); background:#090b0a; } pre code { border:0; padding:0; background:transparent; }.warning { border-color:#6c5d26; background:#24200f; }.warning p { color:#ded6aa; } ul { padding-left:22px; } li { margin:8px 0; }
footer { border-top:1px solid var(--line); padding:28px max(24px,calc((100vw - 980px)/2)); color:var(--muted); font-size:14px; } footer nav { margin-top:10px; }
@media(max-width:680px) { .topbar { align-items:flex-start; flex-direction:column; }.steps { grid-template-columns:1fr; } main { padding-top:48px; }.button { width:100%; text-align:center; }.button.secondary { margin:10px 0 0; } }