:root{
  --bg:#0f1115; --surface:#171a21; --text:#e8eaed; --muted:#9aa0a8;
  --dim:#6b7280; --accent:#e0b341; --line:#252a33;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:720px; margin:0 auto; padding:48px 20px 80px}
header.site{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:32px;
}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--text); text-decoration:none; font-size:18px}
.brand-mark{width:22px; height:22px; display:block}
nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-size:14px}
nav a:hover{color:var(--text)}
h1{font-size:30px; line-height:1.2; margin:.2em 0 .4em}
h2{font-size:20px; margin:1.8em 0 .5em}
h3{font-size:16px; margin:1.4em 0 .3em}
a{color:var(--accent)}
.lead{color:var(--muted); font-size:18px}
.muted{color:var(--muted)}
.updated{color:var(--dim); font-size:14px; margin-top:-.2em}
.callout{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:18px 0}
code{background:var(--surface); padding:2px 6px; border-radius:6px; font-size:.9em}
hr{border:none; border-top:1px solid var(--line); margin:32px 0}
footer{border-top:1px solid var(--line); margin-top:48px; padding-top:20px; color:var(--dim); font-size:13px}
footer a{color:var(--muted)}
ul{padding-left:1.2em}
li{margin:.25em 0}
.hero{padding:32px 0}