:root{
  --bg:#0f1216; --panel:#161b22; --line:#232b36; --code:#0b0e12;
  --ink:#e7edf3; --mut:#93a1b0; --accent:#5dc9e2; --kw:#8ab4f8; --str:#8fdc9b;
  --radius:12px; --wrap:820px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f7f9fb; --panel:#fff; --line:#e4e9ef; --code:#f2f4f7;
    --ink:#111820; --mut:#5a6b7b; --accent:#0b7ea0; --kw:#0b57d0; --str:#127a2b; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--wrap); margin:0 auto; padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.brand:hover{text-decoration:none}
.top nav{display:flex;gap:20px;flex-wrap:wrap}
.top nav a{color:var(--mut);font-size:14.5px}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

main{max-width:var(--wrap);margin:0 auto;padding:0 22px}
section{padding:14px 0}
.intro{padding:44px 0 20px}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--accent);margin:0 0 12px;font-weight:600;
}
h1{font-size:clamp(28px,4.6vw,38px);line-height:1.15;margin:0 0 14px;text-wrap:balance}
h2{font-size:22px;margin:26px 0 10px;padding-top:8px}
.lead{font-size:18px;color:var(--mut);margin:0;max-width:62ch}
p{margin:0 0 14px;max-width:68ch}

code{
  font-family:var(--mono); font-size:.9em;
  background:var(--code); border:1px solid var(--line);
  border-radius:5px; padding:.08em .38em;
}
pre{
  background:var(--code); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; overflow-x:auto; margin:0 0 16px;
}
pre code{background:none;border:none;padding:0;font-size:13.5px;line-height:1.55;color:var(--ink)}

.table-wrap .scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px;margin-top:4px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:600}
td code{background:none;border:none;padding:0}

footer{
  max-width:var(--wrap);margin:0 auto;padding:26px 22px 46px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--mut);font-size:13.5px;border-top:1px solid var(--line);
}
footer a{color:var(--mut)}