:root {
  --ground:#12161A; --panel:#191E23; --panel-2:#1F252B; --rule:#2A3138;
  --ink:#E4E9ED; --muted:#8C959D; --dim:#616B74; --accent:#FF6B2C; --accent-q:#4A2415; --ok:#56B48A; --bad:#E5604D;
  --mono: ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pad: clamp(1rem,4vw,2rem);
}
@media (prefers-color-scheme: light) {
  :root { --ground:#F6F7F8; --panel:#FFFFFF; --panel-2:#F0F2F4; --rule:#DCE0E4; --ink:#14191E; --muted:#5E686F; --dim:#838D95;
    --accent:#C7440C; --accent-q:#FBE7DC; --ok:#247A55; --bad:#B3321F; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,code,pre,.mono,.label,button,input,select { font-family: var(--mono); }
h1 { font-size:1.6rem; letter-spacing:-.02em; margin:0 0 .5rem; }
h2 { font-size:1.15rem; margin:0 0 .75rem; letter-spacing:-.01em; }
h3 { font-size:1rem; margin:0 0 .4rem; }
p { margin:0 0 .75rem; color:var(--muted); }
a { color:var(--accent); }
.boot { padding:3rem; text-align:center; }
.wrap { max-width:1000px; margin:0 auto; padding:0 var(--pad); }
main.wrap { padding-top:1.75rem; padding-bottom:3rem; }
.label { font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:600; }
.muted { color:var(--muted); } .dim { color:var(--dim); font-size:.9rem; }

header.top { border-bottom:1px solid var(--rule); background:var(--panel); }
header.top .wrap { display:flex; align-items:center; gap:.75rem 1rem; min-height:3.5rem; padding-block:.5rem; flex-wrap:wrap; }
.brand { font-family:var(--mono); font-weight:600; color:var(--ink); text-decoration:none; }
.brand::before { content:"▚"; color:var(--accent); margin-right:.4rem; }
.spacer { flex:1; }
select { background:var(--panel-2); color:var(--ink); border:1px solid var(--rule); border-radius:3px; padding:.35rem .5rem; font-size:.85rem; }

nav.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--rule); margin:1.5rem 0; overflow-x:auto; }
nav.tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:.6rem .9rem; cursor:pointer; font-size:.85rem; letter-spacing:.04em; white-space:nowrap; }
nav.tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }

.card { background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:1.25rem; margin-bottom:1rem; }
.grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:760px) { .grid.two { grid-template-columns:1fr 1fr; } }

button.btn, a.btn { display:inline-block; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:3px; padding:.55rem 1rem; font-size:.85rem; cursor:pointer; text-decoration:none; }
button.btn.ghost, a.btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule); }
button.btn.danger { background:transparent; color:var(--bad); border-color:var(--bad); }
button.btn:disabled { opacity:.5; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

form.stack { display:flex; flex-direction:column; gap:.75rem; max-width:420px; }
label { font-size:.8rem; color:var(--muted); display:flex; flex-direction:column; gap:.3rem; }
input[type=text] { background:var(--panel-2); color:var(--ink); border:1px solid var(--rule); border-radius:3px; padding:.6rem .7rem; font-size:.95rem; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.meter { height:8px; background:var(--panel-2); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.meter > i { display:block; height:100%; background:var(--ok); }
.meter.warn > i { background:var(--accent); } .meter.full > i { background:var(--bad); }
.meter-row { margin-bottom:1rem; } .meter-row .row { justify-content:space-between; margin-bottom:.3rem; font-size:.85rem; }

table { width:100%; border-collapse:collapse; font-size:.9rem; }
th,td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--rule); vertical-align:top; }
th { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
.scroll { overflow-x:auto; }
.tag { display:inline-block; font-family:var(--mono); font-size:.78rem; border:1px solid var(--rule); background:var(--panel-2); border-radius:2px; padding:.1rem .4rem; margin:0 .25rem .25rem 0; }
.pill { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.1rem .45rem; border-radius:2px; background:var(--accent-q); color:var(--accent); }
.pill.ok { background:transparent; border:1px solid var(--ok); color:var(--ok); }

pre.code { background:var(--panel-2); border:1px solid var(--rule); border-radius:3px; padding:1rem; overflow-x:auto; font-size:.85rem; line-height:1.7; margin:0 0 .75rem; color:var(--ink); }
.reveal { border:1px solid var(--accent); background:var(--accent-q); border-radius:4px; padding:1rem; margin-bottom:1rem; }
.reveal code { word-break:break-all; color:var(--ink); }
.err { color:var(--bad); font-size:.9rem; margin:.5rem 0 0; }
.banner { background:var(--accent-q); color:var(--ink); border:1px solid var(--accent); border-radius:4px; padding:.75rem 1rem; margin-bottom:1rem; font-size:.9rem; }
.hero { padding-block:4rem 2rem; } .hero h1 { font-size:clamp(1.8rem,5vw,2.8rem); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

ul { margin:.25rem 0 1rem; padding-left:1.2rem; color:var(--muted); }
strong { color:var(--ink); }