:root { --bg:#1a1f1c; --panel:#202622; --fg:#e8efe9; --muted:#9aab9e; --accent:#c4a35a; --ok:#6fbf8a;
        --bad:#d97b6c; --blue:#6ca0d9; --line:#2e3831; }
* { box-sizing: border-box; }
body { margin:0; font-family:"IBM Plex Sans","Segoe UI",sans-serif; color:var(--fg); min-height:100vh;
  background: radial-gradient(1200px 600px at 10% -10%, #2a332c, transparent),
              linear-gradient(180deg, #141814, #1a1f1c 40%, #121613); }
header, main { max-width:1180px; margin:0 auto; padding:0 1rem; }
header { padding-top:1.5rem; }
h1 { font-family:"IBM Plex Serif",Georgia,serif; font-weight:600; font-size:1.7rem; letter-spacing:-0.02em; margin:0; }
h1 .thin { font-weight:400; color:var(--muted); }
h2 { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:1.25rem 0 0.5rem; }
.sub { color:var(--muted); margin:0.3rem 0 1rem; line-height:1.4; }
code, .mono { font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:0.9em; }
.meta { color:var(--muted); font-size:0.85rem; }
.hint { margin:0.3rem 0 0.6rem; font-size:0.78rem; }
.err { color:var(--bad); }
label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.chk { text-transform:none; letter-spacing:0; font-size:0.85rem; display:inline-flex; gap:0.3rem; align-items:center; }
select, input[type=text], input[list], input[type=number] { background:#222924; color:var(--fg); border:1px solid var(--line);
  padding:0.45rem 0.6rem; font-size:0.95rem; width:100%; }
button { background:var(--accent); color:#1a1510; border:0; padding:0.55rem 1rem; font-weight:600; cursor:pointer; font-size:0.95rem; }
button.small { padding:0.2rem 0.55rem; font-size:0.78rem; font-weight:500; background:#2c3530; color:var(--fg); }
button:hover { filter:brightness(1.08); }

.toolbar { display:flex; gap:0.9rem; align-items:center; flex-wrap:wrap; margin-bottom:0.6rem; }
.toolbar select { width:auto; min-width:16rem; }

.stage { position:relative; background:#000; width:100%; aspect-ratio:16/9; border:1px solid var(--line); }
.stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.stage canvas { position:absolute; inset:0; pointer-events:none; }

.timeline { position:relative; border:1px solid var(--line); background:var(--panel); margin:0.4rem 0 0.8rem; }
.lane { position:relative; height:26px; border-bottom:1px solid var(--line); }
.lane:last-of-type { border-bottom:0; }
.lane span { position:absolute; top:3px; height:20px; line-height:20px; font-size:0.72rem; padding:0 0.35rem;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#111; cursor:pointer; border-radius:2px; opacity:0.85; }
.lane span.active { opacity:1; outline:2px solid #fff; }
.lane .cite { position:absolute; top:0; bottom:0; background:rgba(196,163,90,0.25); border-left:2px solid var(--accent); border-right:2px solid var(--accent); pointer-events:none; }
.playhead { position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none; }

.cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width: 820px) { .cols { grid-template-columns:1fr; } }
.seg { padding:0.6rem 0.7rem; border:1px solid var(--line); background:var(--panel); margin-bottom:0.5rem; border-left:4px solid var(--line); }
.seg.active { border-left-color:#fff; background:#262e29; }
.seg .title { display:flex; justify-content:space-between; gap:0.5rem; font-size:0.85rem; }
.seg .action { margin:0.3rem 0; }
.seg .notes { color:var(--muted); font-size:0.8rem; font-style:italic; }
.claim { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; font-size:0.85rem; padding:0.3rem 0; border-top:1px dashed var(--line); }
.claim .key { color:var(--muted); }
.claim .val { font-weight:600; }
.badge { display:inline-block; padding:0.1rem 0.45rem; font-size:0.7rem; font-weight:700; letter-spacing:0.04em; border-radius:2px; }
.ACTIVE { background:#244632; color:var(--ok); }
.SUPERSEDED { background:#3a2a1a; color:var(--accent); }
.STALE { background:#3a2422; color:var(--bad); }
.FRESH { background:#243a46; color:var(--blue); }
.NO_EVIDENCE, .NOT_INGESTED { background:#2a2a2a; color:var(--muted); }
.track { display:flex; gap:0.5rem; align-items:center; font-size:0.85rem; padding:0.25rem 0; }
.track .sw { width:12px; height:12px; border-radius:2px; display:inline-block; }
.track .zones { margin-left:auto; display:flex; gap:0.3rem; flex-wrap:wrap; }
.asof .row, .form .row { display:flex; gap:0.8rem; align-items:center; margin-top:0.4rem; }
.asof input[type=range] { width:100%; }
.form { margin-top:0.6rem; }
.form .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.5rem; margin:0.4rem 0; }
.form input[type=number] { width:6rem; }
#result { margin-top:1rem; padding-top:0.8rem; border-top:1px solid var(--line); }
.answer { font-size:1.5rem; margin:0.4rem 0 0.6rem; font-family:"IBM Plex Serif",Georgia,serif; }
table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:0.6rem; }
th, td { text-align:left; padding:0.35rem 0.3rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; }
.nav a { color: var(--accent); }
.q { padding:0.6rem 0.7rem; border:1px solid var(--line); background:var(--panel); margin-bottom:0.45rem; cursor:pointer; }
.q:hover, .q.on { border-color: var(--accent); }
.q .prompt { font-weight:600; }
.q .expect { margin-top:0.25rem; }