:root {
  color-scheme: light;
  --bg: #f6f5f1; --panel: #ffffff; --fg: #1d2129; --muted: #5d6573; --border: #d9d6cc;
  --pos: #2f6fd6; --neg: #e0761f; --surface: #f1efe9; --accent: #1d2129; --accent-fg: #ffffff;
  --info-tooltip-bg: #ffffff; --info-tooltip-text: #1d2129; --info-tooltip-border: #c9c5b9;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121418; --panel: #1b1e24; --fg: #e8e6e1; --muted: #9aa1ad; --border: #2f343d;
    --pos: #5b97f5; --neg: #f39243; --surface: #23272e; --accent: #e8e6e1; --accent-fg: #121418;
    --info-tooltip-bg: #23272e; --info-tooltip-text: #e8e6e1; --info-tooltip-border: #444b56;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel); }
header strong { font-size: 15px; letter-spacing: .01em; }
nav { display: flex; gap: 4px; }
nav button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
nav button[aria-selected="true"] { background: var(--surface); color: var(--fg); font-weight: 600; }
main { padding: 14px 18px 24px; max-width: 1100px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.bar label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
select, button, input { font: inherit; color: var(--fg); }
select { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.bar button { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.bar button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); min-width: 72px; }
.stats { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats b { color: var(--fg); font-weight: 600; }
.slider input { accent-color: var(--pos); width: 150px; }
.slider output { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 9.5em; }
.stage { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.net { position: relative; flex: 1 1 460px; min-width: 300px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.neuron { position: absolute; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; image-rendering: auto; }
.neuron.active { outline: 2px solid var(--fg); outline-offset: 1px; }
.layer-label { position: absolute; top: 8px; transform: translateX(-50%); color: var(--muted); font-size: 12px; white-space: nowrap; }
.out { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.out figcaption { color: var(--muted); font-size: 12px; }
#outCanvas { width: 320px; height: 320px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
#lossCanvas { width: 320px; height: 56px; }
.hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.matrix-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.matrix { display: grid; gap: 4px; align-items: center; width: max-content; }
.matrix .colhead { text-align: center; color: var(--muted); font-size: 12px; }
.matrix .imp { height: 4px; background: var(--muted); border-radius: 2px; margin: 3px auto 0; opacity: .6; }
.matrix .rowhead { color: var(--muted); font-size: 12px; padding-right: 8px; white-space: nowrap; }
.matrix .cell { width: 46px; height: 34px; border-radius: 4px; border: 1px solid var(--border); }
.matrix .tag { font-size: 12px; padding-left: 10px; white-space: nowrap; color: var(--muted); }
.matrix .tag.poly { color: var(--neg); font-weight: 600; }
.matrix .tag.mono { color: var(--pos); font-weight: 600; }
.matrix .foot { grid-column: 1 / -1; color: var(--muted); font-size: 12px; padding-top: 8px; }
@media (max-width: 720px) {
  main { padding: 12px; }
  .stats { margin-left: 0; width: 100%; }
  .out, #outCanvas, #lossCanvas { width: 100%; }
  #outCanvas { height: auto; aspect-ratio: 1; }
}