:root { font-family: system-ui, sans-serif; color: #212529; background: white; }
* { box-sizing: border-box; }
body { margin: 0; }
.demo { max-width: 1100px; margin: auto; padding: 24px; }
.page-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 20px; font-size: .85rem; }
.page-nav a { color: #0d6efd; text-decoration: none; }
.page-nav a:hover { text-decoration: underline; }
.page-nav a[aria-current=page] { color: #212529; font-weight: 600; }
.play-layout:not(.show-plot) { grid-template-columns: minmax(0, 700px); }
#plot-panel[hidden] { display: none; }
h1 { font-size: 1.5rem; margin: 0 0 24px; }
h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
section { min-width: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #dee2e6; padding-bottom: 8px; margin-bottom: 12px; }
.section-head span { color: #6c757d; font-size: .8rem; }
svg { display: block; width: 100%; height: auto; }
#game { border-bottom: 1px solid #dee2e6; }
#game text { fill: #6c757d; font: 11px system-ui, sans-serif; }
.status { min-height: 24px; margin: 12px 0 20px; font-size: .9rem; }
.controls { display: grid; grid-template-columns: 120px 1fr; gap: 14px 12px; align-items: center; }
.controls label { font-size: .85rem; }
.controls output { display: block; color: #6c757d; font-size: .8rem; }
input[type=range] { width: 100%; margin: 0; accent-color: #0d6efd; }
select { width: 100%; max-width: 220px; padding: 6px 8px; border: 1px solid #ced4da; border-radius: 4px; background: white; color: #212529; font: inherit; font-size: .85rem; }
.buttons { display: flex; gap: 8px; grid-column: 1 / -1; margin-top: 6px; }
.play-buttons { margin-top: 0; }
button { font: inherit; font-size: .85rem; padding: 6px 10px; border: 1px solid #ced4da; border-radius: 4px; background: white; cursor: pointer; }
button:first-child { background: #0d6efd; color: white; border-color: #0d6efd; }
button:hover { filter: brightness(.96); }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed=true] { border-color: #0d6efd; color: #0d6efd; }
button:focus-visible, input:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 18px; color: #6c757d; font-size: .75rem; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.left-dot { background: #6f42c1; }
.right-dot { background: #0f766e; }
.legend .miss-dot { border: 2px solid #dc3545; }
.legend .current-dot { border: 1.5px solid #6c757d; }
.legend .train-dot { background: #6c757d; }
.legend .test-dot { border: 1.5px solid #6c757d; }
.legend .boundary-line { width: 14px; height: 0; border-radius: 0; border-top: 2px solid #0d6efd; }
.legend .actual-line { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #6c757d; }
.network { max-width: 500px; margin: 0 auto 12px; }
.network line { stroke: #adb5bd; stroke-width: 1.5; }
.network circle { fill: white; stroke: #6c757d; stroke-width: 1.5; }
.network .output-node { stroke: #0d6efd; }
.network .selectable-node { cursor: pointer; }
.network .selectable-node:hover, .network .selectable-node.selected { fill: #e7f1ff; stroke: #0d6efd; stroke-width: 2.5; }
.network .selectable-node:focus-visible { outline: 2px solid #0d6efd; outline-offset: 3px; }
.network text { fill: #212529; font: 12px system-ui, sans-serif; }
.network .weight { fill: #0d6efd; font: 11px ui-monospace, monospace; paint-order: stroke fill; stroke: white; stroke-width: 5px; }
.network .network-caption { fill: #6c757d; font-size: 11px; }
.network-hidden .weight { font-size: 10px; stroke-width: 4px; }
.network-hidden .bias { fill: #6c757d; font: 10px ui-monospace, monospace; }
.network-hidden text { pointer-events: none; }
.dataset-stats { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: #6c757d; }
.dataset-stats strong { display: block; color: #212529; font-size: 1.1rem; font-weight: 600; }
.dataset-network { margin-top: 18px; }
.update-delta { margin: -5px 0 10px; color: #0d6efd; font: .75rem ui-monospace, monospace; }
.update-delta:empty { display: none; }
.formulas { border-top: 1px solid #dee2e6; padding-top: 12px; font: .78rem/1.8 ui-monospace, monospace; overflow-wrap: anywhere; }
.formula-note { color: #6c757d; }
@media (max-width: 760px) { .columns { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 420px) { .demo { padding: 16px; } .buttons { flex-wrap: wrap; } }
.rl-page { max-width: max(1100px, calc(var(--game-scale, 1) * 600px + 48px)); }
.rl-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.rl-game { flex: 1 1 calc(var(--game-scale, 1) * 600px); max-width: calc(var(--game-scale, 1) * 600px); min-width: min(100%, 280px); }
.rl-side { flex: 1 1 380px; min-width: 0; max-width: 620px; }
.rl-side .section-head { margin-top: 22px; }
.rl-side .section-head:first-child { margin-top: 0; }
#game .scene-banner { font: 600 15px system-ui, sans-serif; }
#game .scene-banner.caught { fill: #0f766e; }
#game .scene-banner.missed { fill: #dc3545; }
.chart .chart-label { fill: #6c757d; font: 11px system-ui, sans-serif; }
.hint { margin: 10px 0 18px; color: #6c757d; font-size: .8rem; }
.hold { touch-action: none; user-select: none; -webkit-user-select: none; }
.check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.check input { margin: 0; accent-color: #0d6efd; }
.rl-stats { margin-bottom: 10px; }
.value-bar { position: relative; display: block; height: 12px; background: #f1f3f5; border-radius: 3px; }
.value-bar::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid #adb5bd; }
.value-bar i { position: absolute; top: 0; bottom: 0; background: #adb5bd; border-radius: 3px; }
.state-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 4px; }
.state-table td { padding: 4px 6px; border-bottom: 1px solid #f1f3f5; white-space: nowrap; }
.state-table .mono { font-family: ui-monospace, monospace; }
.state-table .raw, .state-table .scaled { text-align: right; }
.state-table .bar-cell { width: 40%; }
.state-table .value-bar i { background: #0d6efd; opacity: .55; }
.q-bars { display: grid; gap: 6px; margin: 0 0 20px; font-size: .8rem; }
.q-row { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; color: #6c757d; }
.q-row .q-value { font: .75rem ui-monospace, monospace; text-align: right; }
.q-row.chosen { color: #212529; font-weight: 600; }
.q-row.chosen .value-bar i { background: #0d6efd; }
.q-row.chosen.explored .value-bar i { background: #fd7e14; }
.legend .miss-fill { background: #dc3545; }
.legend .swatch { border-radius: 2px; border: 1px solid #ced4da; }
.legend .left-fill { background: #e2d9f3; }
.legend .coast-fill { background: #f1f3f5; }
.legend .right-fill { background: #cfe9e5; }
.legend .landing-line { width: 0; height: 12px; border-radius: 0; border-left: 2px dashed #0d6efd; }
.legend .weight-pos { width: 14px; height: 0; border-radius: 0; border-top: 2px solid #0d6efd; }
.legend .weight-neg { width: 14px; height: 0; border-radius: 0; border-top: 2px solid #e8590c; }
.q-network { margin-bottom: 0; }
.q-network .q-node-bg { fill: white; stroke: none; }
.q-network .q-node { fill: white; stroke: #6c757d; stroke-width: 1; }
.q-network .q-net-value { fill: #6c757d; font: 10px ui-monospace, monospace; }
.segmented { display: inline-flex; margin-bottom: 12px; }
.segmented button { background: white; color: #212529; border-color: #ced4da; border-radius: 0; }
.segmented button:first-child { border-radius: 4px 0 0 4px; }
.segmented button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.segmented button[aria-pressed=true] { background: #0d6efd; color: white; border-color: #0d6efd; }
.data-note { margin: 0 0 12px; }
.training-controls { margin-bottom: 14px; }
.legend .coast-dot { background: #868e96; }
.legend .swatch + .swatch { margin-left: -3px; }
.section-head .head-toggle { padding: 0; border: 0; background: none; color: #0d6efd; font-size: .8rem; }
.section-head .head-toggle:hover { text-decoration: underline; filter: none; }
.panel-note { margin: 0 0 8px; }