:root{
  color-scheme: light dark;
  --paper:#F7F5EF; --surface:#FFFFFF; --surface-2:#FBFAF6;
  --ink:#1C2A4A; --ink-soft:#4A5570; --ink-faint:#8A91A6;
  --border:#E4E0D4; --border-strong:#D3CEBF;
  --accent:#6B5DD3; --accent-ink:#4A3DB0; --accent-soft:#EDEAFB; --accent-line:#CFC8F4;
  --live:#1F8A70; --live-soft:#E2F2ED; --error:#B3261E; --error-soft:#FBE9E7;
  --catalogue:#6B5DD3; --trace:#1F6F8B;
  --shadow:0 1px 2px rgba(28,42,74,.06), 0 8px 24px rgba(28,42,74,.06);
  --radius:14px; --maxw:1020px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111A2E; --surface:#182238; --surface-2:#1E2A44;
    --ink:#EAE7DE; --ink-soft:#AEB6CB; --ink-faint:#7B8299;
    --border:#273250; --border-strong:#33405F;
    --accent:#9A8CF5; --accent-ink:#B6ABFB; --accent-soft:#242E52; --accent-line:#3A3B7A;
    --live:#4FC7A6; --live-soft:#15362F; --error:#F2B8B5; --error-soft:#3B1F24;
    --catalogue:#9A8CF5; --trace:#5BB6CE;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#111A2E; --surface:#182238; --surface-2:#1E2A44;
  --ink:#EAE7DE; --ink-soft:#AEB6CB; --ink-faint:#7B8299;
  --border:#273250; --border-strong:#33405F;
  --accent:#9A8CF5; --accent-ink:#B6ABFB; --accent-soft:#242E52; --accent-line:#3A3B7A;
  --live:#4FC7A6; --live-soft:#15362F; --error:#F2B8B5; --error-soft:#3B1F24;
  --catalogue:#9A8CF5; --trace:#5BB6CE;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size:15px; line-height:1.55}
a{color:var(--accent-ink)}
header{background:var(--surface); border-bottom:1px solid var(--border)}
.bar{max-width:var(--maxw); margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{font-weight:700; font-size:17px; color:var(--ink); text-decoration:none}
.brand b{color:var(--accent-ink)}
.grow{flex:1}
nav.top{display:flex; gap:14px; align-items:center; font-size:14px; flex-wrap:wrap}
nav.top a{color:var(--ink-soft); text-decoration:none}
nav.top a:hover{color:var(--ink)}
nav.top .who{color:var(--ink-faint)}
.ghost{border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-soft); border-radius:999px;
  padding:6px 12px; font:inherit; font-size:13px; cursor:pointer}
.ghost:hover{color:var(--ink); border-color:var(--accent-line)}
form.inline{display:inline; margin:0}
main{flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:34px 16px 56px}
footer{border-top:1px solid var(--border); background:var(--surface)}
footer .bar{font-size:13px; color:var(--ink-faint)}

.eyebrow{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin:0 0 10px}
.hero{margin-bottom:30px}
.hero h1{margin:0 0 12px; font-size:clamp(28px,5vw,42px); letter-spacing:-.02em; line-height:1.1}
.hero p{margin:0; font-size:16px; color:var(--ink-soft); max-width:62ch}
.caps{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.cap{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:6px 14px 6px 11px; font-size:13px; color:var(--ink-soft)}
.cap b{color:var(--ink)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none}
.dot.catalogue{background:var(--catalogue)} .dot.trace{background:var(--trace)}
.section-label{font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:0 0 14px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card h2{margin:0 0 4px; font-size:18px}
.card .blurb{font-size:13px; color:var(--ink-soft); margin:0 0 16px}
.cell{display:flex; align-items:center; gap:9px; font-size:14px; padding:6px 0; border-top:1px solid var(--border)}
.cell .nm{font-weight:500; color:var(--ink); text-decoration:none}
a.nm:hover{text-decoration:underline}
.badge{margin-left:auto; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap}
.badge.live{background:var(--live-soft); color:var(--live)}
.badge.dev{background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--border)}
.legend{margin-top:18px; font-size:12.5px; color:var(--ink-faint); display:flex; gap:16px; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:7px}
.note{margin-top:28px; font-size:13px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px}

.panel{max-width:440px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px}
.panel.wide{max-width:none}
.panel h1{margin:0 0 6px; font-size:22px}
.panel p.lead{margin:0 0 18px; color:var(--ink-soft); font-size:14px}
label{display:block; font-size:13px; font-weight:600; margin:14px 0 5px}
input[type=text], input[type=password]{width:100%; padding:10px 12px; font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--border-strong); border-radius:8px}
input:focus{outline:2px solid var(--accent-line); border-color:var(--accent)}
input.code{font-size:22px; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums}
button.primary{margin-top:20px; border:0; background:var(--accent); color:#fff; font:inherit; font-weight:600; padding:11px 18px;
  border-radius:10px; cursor:pointer; width:100%}
button.primary:hover{background:var(--accent-ink)}
.errors{background:var(--error-soft); color:var(--error); border-radius:8px; padding:10px 14px; font-size:14px; margin:0 0 12px}
.errors p{margin:2px 0}
.ok{background:var(--live-soft); color:var(--live); border-radius:8px; padding:10px 14px; font-size:14px; margin:0 0 12px}
.qr{background:#fff; border-radius:10px; padding:10px; width:200px; margin:6px auto 10px}
.qr svg{display:block; width:100%; height:auto}
code.secret{display:block; word-break:break-all; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font-size:14px; text-align:center}
table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:22px}
th, td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--border)}
th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.placeholder h1{margin:0 0 10px}

@media (max-width:760px){ .cards, .two{grid-template-columns:1fr} }