:root {
  --ground:      #f7f6f3;
  --panel:       #ffffff;
  --sunk:        #efede8;
  --ink:         #1a1d22;
  --ink-soft:    #5c6270;
  --ink-faint:   #8b909c;
  --rule:        #ddd9d2;
  --ref:         #0091a7;
  --opus:        #c9741f;
  --gpt:         #6b5fc4;
  --pass:        #2f8a58;
  --fail:        #c0384a;
  --grid:        rgba(26, 29, 34, .07);
  --shadow:      0 1px 2px rgba(26,29,34,.06), 0 8px 24px rgba(26,29,34,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #12151a;
    --panel:     #1a1e25;
    --sunk:      #23282f;
    --ink:       #e8e9ec;
    --ink-soft:  #a0a6b2;
    --ink-faint: #6e7684;
    --rule:      #2c323b;
    --ref:       #00b8d4;
    --opus:      #e8913a;
    --gpt:       #8b7fd4;
    --pass:      #3fa66b;
    --fail:      #d1495b;
    --grid:      rgba(232, 233, 236, .06);
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #12151a; --panel: #1a1e25; --sunk: #23282f;
  --ink: #e8e9ec; --ink-soft: #a0a6b2; --ink-faint: #6e7684;
  --rule: #2c323b; --ref: #00b8d4; --opus: #e8913a; --gpt: #8b7fd4;
  --pass: #3fa66b; --fail: #d1495b; --grid: rgba(232,233,236,.06);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.55 "Inter Tight", system-ui, -apple-system, sans-serif;
  padding-inline: 20px;
  padding-block: 22px 40px;
}
.shell { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* masthead ------------------------------------------------------------ */
.masthead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
h1 {
  margin: 0; font-size: clamp(22px, 3.2vw, 30px); font-weight: 600;
  letter-spacing: -.02em; text-wrap: balance;
}
.sub {
  margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.sub sub { font-size: .72em; }
.keystate {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--sunk); border: 1px solid var(--rule);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.keystate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.keystate.ok  .dot { background: var(--pass); }
.keystate.bad .dot { background: var(--fail); }

.clarify {
  margin: 0; padding: 11px 14px; font-size: 13.5px; color: var(--ink-soft);
  background: var(--sunk); border-left: 2px solid var(--ref); border-radius: 0 6px 6px 0;
}
.clarify code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .92em; color: var(--ink);
}
.clarify strong { color: var(--ink); font-weight: 600; }

/* layout -------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.canvas-wrap { position: relative; }
canvas {
  display: block; width: 100%; height: auto; max-width: 100%;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: var(--shadow); cursor: crosshair;
  touch-action: none;
}
.hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: var(--ink-faint); font-size: 13.5px; pointer-events: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* controls ------------------------------------------------------------ */
.controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.field { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.field input {
  width: 74px; padding: 6px 9px; font: 500 14px "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 6px;
}
.field input:focus-visible, .btn:focus-visible { outline: 2px solid var(--ref); outline-offset: 2px; }
.btn {
  font: 500 13.5px "Inter Tight", system-ui, sans-serif;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink); cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--sunk); }
.btn:active { transform: translateY(1px); }
.btn.run { font-weight: 600; font-size: 14.5px; padding: 8px 18px; color: #fff; border: none; }
.run-opus { background: var(--opus); }
.run-gpt  { background: var(--gpt); }
.btn.run:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.count {
  margin-left: auto; font-size: 12.5px; color: var(--ink-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.alert-toggle { cursor: pointer; gap: 6px; user-select: none; }
.alert-toggle input { width: auto; margin: 0; accent-color: var(--ref); cursor: pointer; }
.alert-toggle input:focus-visible { outline: 2px solid var(--ref); outline-offset: 2px; }

/* Flash the finished panel once so a returning reader sees which model
   completed, not just that something changed. */
@keyframes panel-flash {
  0%   { box-shadow: var(--shadow), 0 0 0 0 var(--ring); }
  18%  { box-shadow: var(--shadow), 0 0 0 4px var(--ring); }
  100% { box-shadow: var(--shadow), 0 0 0 0 transparent; }
}
.panel.done { animation: panel-flash 1.5s ease-out 2; }
.panel[data-model="opus5"].done { --ring: color-mix(in srgb, var(--opus) 55%, transparent); }
.panel[data-model="gpt56"].done { --ring: color-mix(in srgb, var(--gpt) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .panel.done { animation: none; } }

/* readouts ------------------------------------------------------------ */
.tag {
  font: 600 10.5px "Inter Tight", sans-serif; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.tag-ref { background: var(--ref); color: #fff; }

.truth, .panel {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px; box-shadow: var(--shadow);
}
.truth-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.truth-note { font-size: 12px; color: var(--ink-faint); font-family: "JetBrains Mono", ui-monospace, monospace; }
.verified { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--pass); }

.readout { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.readout > div { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: baseline; gap: 10px; }
.readout dt {
  font: 500 11.5px "Inter Tight", sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.readout dd {
  margin: 0; font: 500 14px/1.45 "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; word-break: break-all; color: var(--ink);
}
.meanline {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--rule);
  font-size: 12px; color: var(--ink-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace; word-break: break-all;
}

/* panels -------------------------------------------------------------- */
.panels { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { display: flex; flex-direction: column; gap: 10px; }
.panel > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slug {
  font-size: 11.5px; color: var(--ink-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace; word-break: break-all;
}
/* Elapsed timer: tabular figures so the digits don't jitter while ticking,
   and margin-left:auto pins it to the right edge of the panel header. */
.elapsed {
  margin-left: auto; flex-shrink: 0;
  font: 500 12px "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft); background: var(--sunk);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
}
.elapsed.running { color: var(--ink); border-color: currentColor; }
.panel[data-model="opus5"] .elapsed.running { color: var(--opus); }
.panel[data-model="gpt56"] .elapsed.running { color: var(--gpt); }
.elapsed.running::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .elapsed.running::before { animation: none; }
}
.panel[data-model="opus5"] .readout dd.hit { color: var(--opus); }
.panel[data-model="gpt56"] .readout dd.hit { color: var(--gpt); }

.verdict {
  font: 600 12.5px "Inter Tight", sans-serif; padding: 8px 11px; border-radius: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.verdict.pass { background: color-mix(in srgb, var(--pass) 13%, transparent); color: var(--pass); }
.verdict.fail { background: color-mix(in srgb, var(--fail) 13%, transparent); color: var(--fail); }
.verdict .delta {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500;
  color: var(--ink-soft); word-break: break-all;
}

.think {
  background: var(--sunk); border-radius: 7px; padding: 11px;
  max-height: 230px; overflow-y: auto;
  font: 400 12.5px/1.6 "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
}
.think .idle { margin: 0; color: var(--ink-faint); }
.think .err { color: var(--fail); }
.cursor {
  display: inline-block; width: 7px; height: 13px; vertical-align: -2px;
  background: currentColor; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }