:root{
  --canvas:#10141F; --surface-1:#171C2B; --surface-2:#1F2537; --surface-sunken:#0C0F18;
  --line:#2E3650; --line-input:#566083; --ink:#F2EADB; --ink-muted:#A9A293;
  --accent:#FFA41B; --accent-ink:#1A1000; --focus:var(--accent);
  --success:#4CC38A; --warning:#FFD24A; --danger:#FF7A7A;
  --data-exact:#4CC38A; --data-embedding:#7AA7FF; --data-review:#FFD24A;
  --ff-display:"Big Shoulders Display",system-ui; --ff-body:"Familjen Grotesk",system-ui;
  --ff-mono:"Azeret Mono",ui-monospace,monospace;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.45 var(--ff-body)}
.mono{font-family:var(--ff-mono);font-size:12px}
.muted{color:var(--ink-muted)}
button{font:inherit;cursor:pointer;border-radius:var(--r-sm)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--ff-display);font-size:28px;letter-spacing:.5px;text-transform:uppercase}
.descriptor{color:var(--ink-muted);margin-left:12px;font-size:14px}
.header-actions{display:flex;gap:8px;align-items:center}
.btn-primary{background:var(--accent);color:var(--accent-ink);border:none;padding:9px 18px;font-weight:700}
.btn-primary:disabled{opacity:.75;cursor:wait}
.btn-secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-input);padding:8px 14px}
.btn-ghost{background:none;border:none;color:var(--ink-muted);text-decoration:underline;padding:6px}

.banner{padding:8px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);
  color:var(--warning);font-size:14px}
.banner-error{color:var(--danger)}

#intro-row{display:flex;gap:14px;margin:14px 20px 0;align-items:stretch;flex-wrap:wrap}
#judge-card,#read-card{padding:12px 16px;background:var(--surface-1);
  border:1px solid var(--line);border-radius:var(--r-md);font-size:13.5px}
#judge-card{max-width:560px}
#read-card{max-width:460px}
#judge-card ol{margin:6px 0 2px;padding-left:20px}
#judge-card li{margin:3px 0}
.legend{list-style:none;margin:8px 0 0;padding:0}
.legend li{display:flex;gap:8px;align-items:baseline;margin:5px 0}
.swatch{width:14px;height:10px;border-radius:2px;flex:none;align-self:center}
.sw-exact{background:var(--data-exact)}
.sw-embedding{background:var(--data-embedding)}
.sw-review{border:1.5px dashed var(--data-review);background:none}

main{padding:14px 20px 8px}
#stage{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px 10px 6px;position:relative}
#stage-status{position:absolute;top:10px;left:14px;color:var(--ink-muted);z-index:2}
#timeline{width:100%;height:46vh;min-height:260px;display:block}
#chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 4px}
.chip{font-family:var(--ff-mono);font-size:12px;padding:3px 8px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--accent);border:1px solid var(--line);
  cursor:pointer;animation:land .12s ease-out;display:inline-block}
button.chip:hover{border-color:var(--line-input)}
.chip .glyph-exact{color:var(--data-exact)}
.chip .glyph-embedding{color:var(--data-embedding)}
.chip-review{color:var(--data-review);border-style:dashed;cursor:default}
@keyframes land{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.chip{animation:none}}

#lower{display:flex;gap:16px;margin-top:14px;align-items:flex-start}
#claims-panel{flex:1;min-width:0}
#side-panel{width:320px;flex:none;display:flex;flex-direction:column;gap:12px}
h2{font-family:var(--ff-display);font-size:18px;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}
.claim-row{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-bottom:1px solid var(--line)}
.claim-row.review-row{color:var(--data-review)}
.claim-row .t{font-family:var(--ff-mono);font-size:12px;color:var(--ink-muted);flex:none;width:130px}
.claim-row .conf{font-family:var(--ff-mono);font-size:12px;margin-left:auto}

#detail,#export-box,#crate{background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px}
#detail-body dt{color:var(--ink-muted);font-size:12px;margin-top:6px}
#detail-body dd{margin:0;font-size:14px}
.pack-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;border-bottom:1px solid var(--line)}
.pack-row .warn{color:var(--warning);font-family:var(--ff-mono);font-size:11px}
#export-body a{color:var(--accent)}
#crate summary{cursor:pointer;font-size:13.5px}
#crate ul{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;max-height:220px;overflow:auto}
#crate li{padding:2px 0;color:var(--ink-muted)}
#crate li .reg{color:var(--success);font-family:var(--ff-mono);font-size:12px}

footer{display:flex;gap:14px;align-items:baseline;padding:10px 20px 18px;color:var(--ink-muted);
  font-size:13px;flex-wrap:wrap}
footer a{color:var(--accent)}
dialog{background:var(--surface-1);color:var(--ink);border:1px solid var(--line-input);
  border-radius:var(--r-lg);max-width:720px;width:90vw}
dialog::backdrop{background:rgba(8,10,16,.7)}
#bench-body{white-space:pre-wrap;font-size:12px;max-height:60vh;overflow:auto}

@media (max-width:760px){
  header{flex-wrap:wrap}
  #lower{flex-direction:column}
  #side-panel{width:100%}
  #timeline{height:34vh}
  .descriptor{display:block;margin-left:0}
  /* the product leads on a phone; the how-to cards follow it */
  body{display:flex;flex-direction:column}
  #intro-row{order:2;margin-top:14px}
  footer{order:3}
  dialog{order:4}
}

[hidden]{display:none !important}
.crate-links{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;font-size:12.5px}
.crate-links a{color:var(--accent)}
table.md{border-collapse:collapse;width:100%;font-size:12px;margin:6px 0 12px}
table.md th,table.md td{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top}
table.md th{color:var(--ink-muted);font-weight:500}
#bench-body h3{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.5px;font-size:15px;margin:14px 0 6px}
#bench-body p{font-family:var(--ff-body);font-size:13px;white-space:normal;margin:4px 0}

#replay-chip{display:inline-block;margin-left:12px;padding:2px 8px;font-size:12px;border:1px solid var(--line-input);border-radius:var(--r-sm);color:var(--warning);text-decoration:none;font-family:var(--ff-mono)}
#replay-chip.live{color:var(--success)}
@media (max-width:760px){#replay-chip{margin:6px 0 0}}