:root{--bg:#1c1a1a;--fg:#e8e6e3;--card:#232529;--muted:#9aa0a6;--pri:#ff6b35;--acc:#00f5d4;--bd:#e8e6e32e}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 'JetBrains Mono',ui-monospace,Menlo,monospace}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/JetBrainsMono-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Oswald';src:url(/fonts/oswald.ttf) format('truetype');font-display:swap}
a{color:var(--acc)}a:hover{color:var(--pri)}
.top{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--bd)}
.top a.brand{font:600 1.4rem 'Oswald',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:1rem}
.top nav a{color:var(--fg);text-decoration:none;font-size:.9rem}
.top nav a[aria-current]{color:var(--pri)}
main{max-width:60rem;margin:0 auto;padding:2.5rem clamp(1rem,4vw,2rem) 4rem}
h1,h2{font-family:'Oswald','Arial Narrow',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
h1{font-size:clamp(2.2rem,7vw,3.6rem);margin:.2em 0}
h1 span{color:var(--pri)}
h2{font-size:1.5rem;margin:2.5rem 0 .75rem;border-left:4px solid var(--pri);padding-left:.75rem}
.lede{font-size:1.1rem;color:var(--muted);max-width:42rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.btn{display:inline-block;padding:.7rem 1.2rem;border:1px solid var(--pri);background:var(--pri);color:#1a0e07;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;color:var(--fg);border-color:var(--bd)}
.btn:hover{filter:brightness(1.1);color:#1a0e07}.btn.alt:hover{color:var(--acc);border-color:var(--acc)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--card);border:1px solid var(--bd);padding:1rem 1.1rem}
.card h3{margin:.1rem 0 .4rem;font:600 1.05rem 'Oswald',sans-serif;letter-spacing:.04em;color:var(--acc);text-transform:uppercase}
.card p{margin:0;color:var(--muted);font-size:.92rem}
ol,ul{padding-left:1.2rem}li{margin:.35rem 0}
pre{background:#111;border:1px solid var(--bd);padding:1rem;overflow-x:auto;font-size:.82rem}
code{color:var(--acc)}
.note{border:1px dashed var(--bd);padding:.8rem 1rem;color:var(--muted);font-size:.9rem}
footer{border-top:1px solid var(--bd);padding:1.5rem clamp(1rem,4vw,3rem);color:var(--muted);font-size:.85rem}
footer a{margin-right:1rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}}