:root{
    color-scheme:dark;
    --gold:#C9A45C; --gold-ink:#D9B56C; --gold-hi:#E3C584; --gold-dim:rgba(201,164,92,.14); --gold-line:rgba(201,164,92,.38); --gold-glow:rgba(201,164,92,.30);
    --bg:#141414; --panel:#1F1F1F; --raised:#262626; --well:#181818; --hover:#282828;
    --ink:#F1EEE6; --ink2:#D5D2CA; --mut:#9C9A92; --mut2:#6E6D68;
    --line:#2D2D2D; --line2:#3B3B3B;
    --red:#E5484D; --red-ink:#FF7075; --red-bg:rgba(229,72,77,.13); --red-line:rgba(229,72,77,.42);
    --green:#4CC38A; --green-ink:#62D49C; --green-bg:rgba(76,195,138,.13); --green-line:rgba(76,195,138,.42);
    --blue:#4A9FD8;
    --field:#121212; --chip:#2B2B2B; --chip-ink:#C9C6BE;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.7);
    --serif:"Baskerville","Hoefler Text","Cochin",Georgia,"Times New Roman",serif;
    --cond:"Avenir Next Condensed","Helvetica Neue Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
    --sans:"Helvetica Neue",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --hdr-a:#242424; --hdr-b:#1C1C1C; --hdr-c:#181818; --hdr-grain:rgba(255,255,255,.014);
    --hdr-ink:#F6F3EC; --hdr-mut:#9C9A92; --hdr-btn:rgba(255,255,255,.03); --hdr-line2:#3B3B3B;
  }
  html[data-theme=light]{
    color-scheme:light;
    --gold:#A9822F; --gold-ink:#8C6A22; --gold-hi:#B8913E; --gold-dim:rgba(169,130,47,.12); --gold-line:rgba(169,130,47,.40); --gold-glow:rgba(169,130,47,.28);
    --bg:#F4F2ED; --panel:#FFFFFF; --raised:#FFFFFF; --well:#ECE9E1; --hover:#F8F6F1;
    --ink:#26262A; --ink2:#3E3E44; --mut:#73747A; --mut2:#A6A5A0;
    --line:#E2DED4; --line2:#CFCAC0;
    --red:#B8302A; --red-ink:#B8302A; --red-bg:#FBEAE8; --red-line:#E7B4AE;
    --green:#2E7D57; --green-ink:#2E7D57; --green-bg:#E6F3EB; --green-line:#A9D4BC;
    --field:#FFFFFF; --chip:#EEEBE3; --chip-ink:#4A4A50;
    --shadow:0 1px 2px rgba(30,30,30,.06),0 10px 24px -16px rgba(30,30,30,.28);
    --hdr-a:#FFFFFF; --hdr-b:#FCFBF8; --hdr-c:#F6F4EF; --hdr-grain:rgba(0,0,0,.012);
    --hdr-ink:#212121; --hdr-mut:#73747A; --hdr-btn:rgba(0,0,0,.02); --hdr-line2:#D2CDC2;
  }
  *{box-sizing:border-box} html,body{margin:0}
  html{background:var(--bg)}
  body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  ::selection{background:var(--gold);color:#111}
  button,input,select{font-family:var(--sans);font-size:inherit}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* ===== masthead ===== */
  .band{background:#0F0F0F;color:var(--gold);text-align:center;font:600 10px/1 var(--cond);letter-spacing:.28em;padding:7px 8px 6px;text-transform:uppercase;border-bottom:1px solid var(--gold-line)}
  header{position:relative;color:var(--hdr-ink);padding:18px 26px 16px;
    background-image:repeating-linear-gradient(90deg,var(--hdr-grain) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--hdr-a) 0%,var(--hdr-b) 55%,var(--hdr-c) 100%)}
  header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold) 0,var(--gold-line) 30%,var(--gold-dim) 70%,transparent 100%)}
  .brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .mono{width:52px;height:52px;flex:0 0 auto;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#141414;background:linear-gradient(145deg,var(--gold-hi),var(--gold));box-shadow:0 2px 10px var(--gold-glow)}
  .wordmark{display:flex;flex-direction:column;justify-content:center;min-width:220px;flex:1}
  .eyebrow{font:600 11px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
  h1{font:400 30px/1.1 var(--serif);margin:5px 0 3px;letter-spacing:.01em}
  .who{font-size:12.5px;color:var(--hdr-mut)}
  .who code{font:12px ui-monospace,Menlo,monospace}
  .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .pill{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1px solid var(--hdr-line2);color:var(--hdr-mut)}
  .pill i{width:7px;height:7px;border-radius:50%;background:var(--mut2)}
  .pill.ok{color:var(--green-ink);border-color:var(--green-line)} .pill.ok i{background:var(--green)}
  .pill.bad{color:var(--red-ink);border-color:var(--red-line)} .pill.bad i{background:var(--red)}
  .hbtn{background:var(--hdr-btn);border:1px solid var(--hdr-line2);color:var(--hdr-ink);border-radius:9px;padding:7px 12px;cursor:pointer;font-size:13px}
  .hbtn:hover{border-color:var(--gold-line)}

  .hlink{color:var(--hdr-ink);text-decoration:none;font-size:13px;padding:7px 10px;border-radius:9px;border:1px solid transparent}
  .hlink:hover{border-color:var(--gold-line)}
  .who a{color:var(--gold-ink)}
  main.narrow{max-width:460px;margin:0 auto;padding:34px 16px 60px}
  main.page{max-width:900px;margin:0 auto;padding:26px 20px 60px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 22px 24px}
  .card h2{font:400 26px/1.15 var(--serif);margin:0 0 6px}
  .card p.lead{color:var(--mut);margin:0 0 18px;font-size:14px}
  .tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
  .tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);padding:9px 12px;cursor:pointer;font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
  .tabs button.on{color:var(--gold-ink);border-bottom-color:var(--gold)}
  label.f{display:block;font:600 10.5px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:14px 0 7px}
  label.f small{letter-spacing:0;text-transform:none;font:12px var(--sans);color:var(--mut2)}
  input.t{width:100%;background:var(--field);border:1px solid var(--line2);color:var(--ink);border-radius:9px;padding:10px 12px;font-size:15px}
  input.t:focus{border-color:var(--gold-line);outline:none;box-shadow:0 0 0 3px var(--gold-dim)}
  .chkrow{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--ink2)}
  .chkrow input{accent-color:var(--gold);width:16px;height:16px;margin-top:2px}
  .chkrow a,.fine a,.page a{color:var(--gold-ink)}
  .btn{background:var(--raised);border:1px solid var(--line2);color:var(--ink);border-radius:9px;padding:9px 14px;cursor:pointer;font-size:14px}
  .btn:hover{border-color:var(--gold-line);background:var(--hover)}
  .btn.primary{background:var(--gold);border-color:var(--gold);color:#17130b;font-weight:600}
  .btn.primary:hover{background:var(--gold-hi)}
  .btn.danger{color:var(--red-ink);border-color:var(--red-line)}
  .btn.wide{width:100%;margin-top:18px;padding:11px}
  .btn:disabled{opacity:.5;cursor:default}
  .msg{display:none;margin-top:14px;padding:10px 12px;border-radius:9px;font-size:13.5px}
  .msg.err{display:block;background:var(--red-bg);border:1px solid var(--red-line);color:var(--ink)}
  .msg.ok{display:block;background:var(--green-bg);border:1px solid var(--green-line);color:var(--ink)}
  .ts{margin-top:16px;min-height:65px}
  .fine{font-size:12px;color:var(--mut);margin-top:18px;text-align:center}
  .page h1{font:400 30px/1.15 var(--serif)} .page h2{font:400 21px/1.2 var(--serif);margin:26px 0 8px}
  .page p,.page li{color:var(--ink2);font-size:14.5px;line-height:1.6}
  .draft{border:1px dashed var(--amber-line,#F0A03C);background:rgba(240,160,60,.08);padding:10px 12px;border-radius:10px;font-size:13px;color:var(--ink2)}
  table.list{width:100%;border-collapse:collapse;font-size:13.5px}
  table.list th{font:600 10.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
  table.list td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
  .chip{display:inline-block;font:600 9.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:var(--chip);color:var(--chip-ink);margin-left:6px}
  .chip.gold{background:var(--gold-dim);color:var(--gold-ink)} .chip.red{background:var(--red-bg);color:var(--red-ink)}
  .stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
  .stat b{display:block;font:600 22px/1.1 var(--cond)} .stat span{font:600 10px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  @media (max-width:640px){header{padding:14px 16px} .card{padding:18px 16px}}
  table.list td .btn{font-size:12.5px;padding:6px 9px}
  table.list td.nw{white-space:nowrap}
  [hidden]{display:none !important}
  a.btn{text-decoration:none;display:inline-block}