:root{
  --bg:#0b0f14; --panel:#111820; --line:#1e2a36; --ink:#e6edf3; --mute:#8b9aa9;
  --accent:#55e0b8; --warn:#f0b866; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --wrap:860px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#fbfcfd; --panel:#fff; --line:#e2e8ee; --ink:#13202b; --mute:#55646f;
    --accent:#0a7055; --warn:#8a5a08;
  }
}
:root[data-theme="light"]{
  --bg:#fbfcfd; --panel:#fff; --line:#e2e8ee; --ink:#13202b; --mute:#55646f;
  --accent:#0a7055; --warn:#8a5a08;
}
:root[data-theme="dark"]{
  --bg:#0b0f14; --panel:#111820; --line:#1e2a36; --ink:#e6edf3; --mute:#8b9aa9;
  --accent:#55e0b8; --warn:#f0b866;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
code,kbd{font-family:var(--mono); font-size:.88em}
code{overflow-wrap:anywhere}

.skip{position:absolute; left:-9999px; top:0; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:0 0 8px 0; padding:10px 16px; z-index:50}
.skip:focus{left:0}

header{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.4) blur(8px)}
.nav{display:flex; align-items:center; justify-content:space-between; height:58px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.01em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{display:block; flex:none}
.nav nav{display:flex; gap:20px; font-size:14.5px; color:var(--mute)}
.nav nav a{color:var(--mute)}
.nav nav a:hover{color:var(--ink); text-decoration:none}
.nav nav a[aria-current="page"]{color:var(--ink)}
/* On a narrow screen the header becomes two rows rather than dropping the nav:
   a multi-page reference needs its navigation reachable without a long scroll. */
@media (max-width:700px){
  .nav{height:auto; flex-wrap:wrap; padding:10px 16px; row-gap:8px}
  .brand{order:1}
  .themebtn{order:2; margin-left:auto}
  .nav nav{order:3; flex-basis:100%; gap:18px; overflow-x:auto; white-space:nowrap;
    padding-bottom:2px; scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
}

.hero{padding:72px 0 44px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px}
h1{font-size:clamp(30px,5.2vw,46px); line-height:1.12; letter-spacing:-.025em; margin:0 0 18px;
  font-weight:680; text-wrap:balance}
.lede{font-size:clamp(17px,2.2vw,19.5px); color:var(--mute); margin:0; max-width:62ch; text-wrap:pretty}

section{padding:52px 0; border-bottom:1px solid var(--line)}
h2{font-size:clamp(21px,3vw,27px); letter-spacing:-.02em; margin:0 0 10px; font-weight:650; text-wrap:balance}
h3{font-size:16.5px; margin:28px 0 8px; font-weight:640; letter-spacing:-.01em; text-wrap:balance}
p{margin:0 0 15px; max-width:68ch; text-wrap:pretty}
.sub{color:var(--mute); margin-bottom:26px; max-width:66ch}
ul.plain{margin:0 0 15px; padding-left:22px; max-width:68ch}
ul.plain li{margin-bottom:9px; text-wrap:pretty}

.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:18px 0}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}

.steps{counter-reset:s; list-style:none; padding:0; margin:22px 0 0}
.steps li{counter-increment:s; position:relative; padding:0 0 22px 46px; margin:0}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:8px;
  background:var(--panel); border:1px solid var(--line); color:var(--accent);
  font-family:var(--mono); font-size:13px; display:grid; place-items:center; font-weight:600;
}
.steps li:not(:last-child)::after{
  content:""; position:absolute; left:13.5px; top:33px; bottom:4px; width:1px; background:var(--line);
}
.steps b{display:block; margin-bottom:2px; font-weight:620}
.steps span{color:var(--mute); display:block; max-width:62ch}

pre{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  overflow-x:auto; margin:18px 0; font-family:var(--mono); font-size:13.5px; line-height:1.68; color:var(--ink)}
pre .c{color:var(--mute)}
pre .k{color:var(--accent)}
pre .w{color:var(--warn)}
pre b{font-weight:600}
figure{margin:18px 0}
figure pre{margin:0 0 8px}
figcaption{color:var(--mute); font-size:14px; max-width:66ch}

.scroll{overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:12px}
.scroll:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); font-weight:600;
  white-space:nowrap; background:var(--panel)}
tbody th{text-transform:none; letter-spacing:0; font-size:14.5px; color:var(--ink); font-family:var(--mono)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td{min-width:9ch}
.yes{color:var(--accent); font-weight:600; white-space:nowrap}
.no{color:var(--mute); white-space:nowrap}
.na{color:var(--warn); white-space:nowrap}

.note{border-left:3px solid var(--warn); background:var(--panel); border-radius:0 10px 10px 0;
  padding:16px 20px; margin:22px 0}
.note b{color:var(--warn)}
.note p:last-child{margin-bottom:0}

.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:26px 0 0}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px}
.tile h3{margin:0 0 6px}
.tile p{margin:0; color:var(--mute); font-size:15px; max-width:none}
a.tile:hover{border-color:var(--accent); text-decoration:none}
a.tile h3{color:var(--accent)}

ol.src{margin:18px 0 0; padding-left:26px; font-size:14.5px; color:var(--mute)}
ol.src li{margin-bottom:11px; max-width:72ch; text-wrap:pretty}
ol.src code{color:var(--ink)}

footer{padding:40px 0 56px; color:var(--mute); font-size:14.5px}
footer p{max-width:66ch}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 20px; font-size:14.5px}
.fmeta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px; font-family:var(--mono); font-size:12.5px}

/* The border is this control's only boundary cue, so it uses a colour that clears
   the 3:1 non-text contrast threshold rather than the decorative hairline colour. */
.themebtn{background:none; border:1px solid var(--mute); color:var(--mute); border-radius:8px;
  padding:5px 11px; font:inherit; font-size:13px; cursor:pointer; flex:none}
.themebtn:hover{color:var(--ink); border-color:var(--ink)}