:root{--fg:#111;--muted:#555;--bg:#fff;--soft:#f5f5f5;--line:#ddd;--accent:#0b57d0;--ok:#137333;--warn:#b06000;--bad:#b3261e;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fg:#eee;--muted:#aaa;--bg:#141414;--soft:#1e1e1e;--line:#333;--accent:#8ab4f8;--ok:#81c995;--warn:#fdd663;--bad:#f28b82;color-scheme:dark}}
:root[data-theme=dark]{--fg:#eee;--muted:#aaa;--bg:#141414;--soft:#1e1e1e;--line:#333;--accent:#8ab4f8;--ok:#81c995;--warn:#fdd663;--bad:#f28b82;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0 auto;max-width:60rem;padding:1rem;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg)}
header,footer{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;padding:.5rem 0}
header{border-bottom:1px solid var(--line);margin-bottom:1rem}
footer{border-top:1px solid var(--line);margin-top:2rem;color:var(--muted);font-size:.9rem}
header a.brand{font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--fg)}
nav{display:flex;gap:1rem;flex-wrap:wrap}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1{font-size:1.8rem;line-height:1.2}
.tagline{color:var(--muted);font-size:1.1rem;margin-top:-.5rem}
pre,code{font:.95em ui-monospace,SFMono-Regular,Menlo,monospace}
pre{padding:.75rem 1rem;border:1px solid var(--line);border-radius:6px;overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
form{display:grid;gap:.5rem;max-width:28rem}
input[type=text],input[type=email]{font:inherit;padding:.5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
button{font:inherit;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);cursor:pointer;justify-self:start}
button.secondary{background:transparent;color:var(--accent)}
.box{border:1px solid var(--line);border-radius:6px;padding:.75rem 1rem;margin:1rem 0}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.muted{color:var(--muted)}
ol.steps{padding-left:1.25rem}ol.steps li{margin:.5rem 0}
.hero h1{font-size:2.2rem;margin-bottom:.25rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0}
.card{border:1px solid var(--line);border-radius:8px;padding:.75rem 1rem;background:var(--soft)}
.card h3{margin:.25rem 0}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
a.button{display:inline-block;padding:.5rem 1rem;border-radius:6px;background:var(--accent);color:var(--bg);text-decoration:none}
a.button.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
details{border-bottom:1px solid var(--line);padding:.5rem 0}summary{cursor:pointer;font-weight:600}
th a{color:inherit}
.theme{font-size:.9rem}