:root { color-scheme: light dark; --fg:#16181d; --muted:#5a6070; --line:#e2e5ea; --card:#f6f7f9; --bg:#fff; --accent:#0b5fff; --accent-fg:#fff; }
@media (prefers-color-scheme: dark) { :root { --fg:#eef0f3; --muted:#a8afbd; --line:#2c313a; --card:#181b21; --bg:#0f1115; --accent:#6ea8ff; --accent-fg:#0f1115; } }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
.wrap { max-width:62rem; margin:0 auto; padding:0 1.25rem; }
header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:.8rem; padding-bottom:.8rem; }
.brand { font-weight:700; font-size:1.15rem; color:var(--fg); text-decoration:none; }
#nav-toggle { font:inherit; background:none; border:1px solid var(--line); color:var(--fg); border-radius:.4rem; padding:.3rem .7rem; cursor:pointer; }
#site-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; }
#site-nav a { text-decoration:none; color:var(--muted); }
#site-nav a:hover, #site-nav a[aria-current="page"] { color:var(--fg); }
#site-nav a[aria-current="page"] { font-weight:600; }
@media (min-width:46rem) { #nav-toggle { display:none; } }
@media (max-width:45.99rem) {
  #site-nav { width:100%; }
  #site-nav.collapsible { display:none; }
  #site-nav.collapsible.open { display:block; }
  #site-nav ul { flex-direction:column; padding:.5rem 0; }
}
main { padding:2.5rem 0 4rem; }
h1 { font-size:2.1rem; line-height:1.2; margin:0 0 .75rem; }
h2 { font-size:1.35rem; margin:2.25rem 0 .75rem; }
h3 { font-size:1.05rem; margin:0 0 .3rem; }
.lead { font-size:1.15rem; color:var(--muted); max-width:44rem; }
.cta { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.5rem 0; }
.btn { display:inline-block; padding:.6rem 1.1rem; border-radius:.5rem; border:1px solid var(--accent); text-decoration:none; font-weight:600; }
.btn.primary { background:var(--accent); color:var(--accent-fg); }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.card { border:1px solid var(--line); background:var(--card); border-radius:.7rem; padding:1rem 1.1rem; }
.card p { margin:.2rem 0 0; color:var(--muted); }
.tag { display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; border:1px solid var(--line); border-radius:1rem; padding:0 .5rem; color:var(--muted); margin-left:.35rem; vertical-align:middle; }
ol.steps { padding-left:1.3rem; } ol.steps li { margin:.6rem 0; }
code, pre { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88rem; }
pre { overflow:auto; border:1px solid var(--line); background:var(--card); border-radius:.5rem; padding:.85rem 1rem; }
.note { border-left:3px solid var(--accent); padding:.2rem 0 .2rem .9rem; color:var(--muted); margin:1.25rem 0; }
form.setup { display:grid; gap:.7rem; max-width:28rem; }
form.setup label { display:grid; gap:.2rem; font-weight:600; font-size:.95rem; }
form.setup input { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:.4rem; background:var(--bg); color:var(--fg); }
form.setup button { font:inherit; font-weight:600; padding:.6rem 1rem; border-radius:.5rem; border:0; background:var(--accent); color:var(--accent-fg); cursor:pointer; justify-self:start; }
.status { min-height:1.5em; color:var(--muted); }
footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
footer.site .wrap { padding-top:1.25rem; padding-bottom:2rem; }