:root {
  --bg: #f6f7f9; --surface: #fff; --ink: #1b2330; --muted: #5d6878; --line: #dde2ea; --accent: #0b6e4f;
  --pred: rgba(230, 57, 70, 0.45); --gt: #2ec4b6;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #10141b; --surface: #171d27; --ink: #e5e9f0; --muted: #98a3b4; --line: #2a3342; --accent: #5fd1a6; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 28px 16px 60px; }
h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { font-size: 1.05rem; margin: 0 0 6px; }
.muted { color: var(--muted); }
a { color: var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 18px 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kpi b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .8rem; color: var(--muted); }
.viewer { display: grid; grid-template-columns: minmax(0, 512px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .viewer { grid-template-columns: 1fr; } }
.canvas-wrap { background: #000; border-radius: 10px; overflow: hidden; }
canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.legend { color: #ddd; font-size: .8rem; padding: 6px 10px; background: #111; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin: 0 4px -2px 10px; }
.sw.pred { background: var(--pred); } .sw.gt { border: 2px solid var(--gt); }
.controls { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex;
  flex-direction: column; gap: 8px; }
.controls label { font-size: .85rem; font-weight: 600; }
.controls .row { display: flex; gap: 16px; } .controls .row label { font-weight: 400; }
select, input[type=range], input[type=file] { width: 100%; font: inherit; color: inherit; }
select { padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.stats dt { color: var(--muted); } .stats dd { margin: 0; font-weight: 600; }
.upload { margin-top: 8px; }
.notes { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }