:root {
  --bg: #f6f7f9; --card: #ffffff; --text: #1b1f24; --muted: #5d6673; --line: #dde1e6; --accent: #2457c5;
  --warn-bg: #fff4d6; --warn: #7a5300; --ok-bg: #e6f4ea; --ok: #1e6b34; --err-bg: #fde8e8; --err: #9b1c1c; --code: #f0f2f5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --card: #1d2126; --text: #e6e9ed; --muted: #9aa4b1; --line: #313740; --accent: #7aa2ff;
    --warn-bg: #3a2f12; --warn: #f2cf75; --ok-bg: #16301f; --ok: #8fd6a4; --err-bg: #3b1818; --err: #f5a3a3; --code: #262b31;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: .8rem 0 .4rem; }
code, .mono, textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.muted { color: var(--muted); }

.top { display: flex; align-items: center; gap: 1rem; padding: .7rem 16px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.top nav button { background: none; color: var(--text); border: 1px solid transparent; }
.top nav button.on { border-color: var(--line); background: var(--bg); }

button { font: inherit; padding: .4rem .8rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.quiet { background: none; color: var(--accent); }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: .3rem .4rem; }
textarea { width: 100%; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; min-width: 0; }
.narrow { max-width: 460px; margin: 2rem auto; }
.narrow label { display: block; margin: .8rem 0; }
.narrow input { width: 100%; margin-top: .3rem; }

.general, .platform, .error { margin: 0; padding: .55rem 16px; font-size: .9rem; border-bottom: 1px solid var(--line); }
.general { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.platform.ok { background: var(--ok-bg); color: var(--ok); }
.platform.warn { background: var(--warn-bg); color: var(--warn); }
.error { background: var(--err-bg); color: var(--err); }

.cols { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 .7rem; padding: .4rem .7rem .6rem; }
legend { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }
.inputs label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .9rem; }
.inputs input, .inputs select { width: 9.5rem; }
.inline { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: .82rem; }
.busy { color: var(--accent); font-size: .82rem; font-weight: normal; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; }

.status { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: .5rem 0 .2rem; }
.eyes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .eyes { grid-template-columns: 1fr; } }
.eye { border-top: 1px solid var(--line); min-width: 0; }
.readouts { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 1.05rem; margin-bottom: .4rem; }
.block { border-top: 1px solid var(--line); margin-top: .6rem; }
table { border-collapse: collapse; width: 100%; margin: .3rem 0; }
th, td { text-align: left; padding: .2rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); font-size: .85rem; }
td.mono { word-break: break-all; }
.kv th { width: 40%; }
.drives { overflow-x: auto; display: block; }
tr.past-end td { color: var(--warn); }
.lines { margin: .3rem 0; padding-left: 1.1rem; }
.lines li { margin: .15rem 0; white-space: pre-wrap; }
.warn-text { color: var(--warn); }
.badge { font-size: .75rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; color: var(--muted); }

details { margin-left: .8rem; }
details > summary { cursor: pointer; margin-left: -.8rem; }
.leaf { margin-left: .8rem; word-break: break-all; }
.key { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.str { white-space: pre-wrap; }

.heat-wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
#heat-canvas { max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--line); cursor: crosshair; }
#heat-side { flex: 1; min-width: 240px; }
#heat-hover { white-space: pre; }

/* modes and chips */
.modes { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.modes button { border: 0; border-radius: 0; background: none; color: var(--text); padding: .35rem .9rem; }
.modes button.on { background: var(--accent); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; align-items: center; }
.chips.tight { gap: .25rem; margin: .25rem 0; }
.chip { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; font-size: .76rem; }
.chip.on, .chip:active { border-color: var(--accent); color: var(--accent); }
.sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .2rem; }
.check { display: inline-flex; gap: .25rem; align-items: center; font-size: .76rem; white-space: nowrap; }
.swatch { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex: none; }
.mono-small { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; word-break: break-all; margin: .15rem 0; }

/* the Research tab's 3D view and its rotation readout */
.view3d { display: block; width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); touch-action: none; cursor: grab; }
.view3d.small { height: 340px; }
.block3d { margin: .2rem 0 .6rem; margin-left: 0; }
.block3d > summary { font-weight: 600; margin-left: 0; }
.view-wrap { position: relative; }
.hud { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); background: color-mix(in srgb, var(--card) 88%, transparent);
       border: 1px solid var(--line); border-radius: 8px; padding: .35rem .55rem; font-size: .78rem; line-height: 1.35; }
.hud:empty { display: none; }
.hud table { border-collapse: collapse; width: auto; margin: 0; }
.hud th, .hud td { border: 0; padding: .05rem .5rem .05rem 0; white-space: nowrap; }
.hud-axis { font-weight: 700; }
.hud-x .hud-axis { color: #e03131; } .hud-y .hud-axis { color: #2f9e44; } .hud-z .hud-axis { color: #1c7ed6; }
.hud-note { color: var(--muted); font-size: .68rem; margin-top: .15rem; }

/* the mode switch: its own size, and its chosen mode always legible */
.top nav.modes { flex: none; }
.top nav.modes button { border: 0; border-radius: 0; background: none; color: var(--text); }
.top nav.modes button.on { background: var(--accent); color: #fff; }

/* EDUCATION: one screen. Each eye's panel at its side, the 3D stage between them with its controls over it, a status bar below. */
body.edu-mode main { max-width: none; padding: 0; }
body.edu-mode { overflow: hidden; }
body.edu-mode #platform { display: none !important; } /* the status bar says where it was computed */
body.edu-mode .top { padding: .35rem 12px; }
body.edu-mode .top h1 { font-size: 1rem; }
body.edu-mode .general { font-size: .72rem; padding: .3rem 12px; font-weight: 500; }
.edu-app { display: grid; grid-template-columns: 292px minmax(0, 1fr) 292px; grid-template-rows: minmax(0, 1fr) auto;
           grid-template-areas: "od stage os" "status status status"; height: 640px; }
.edu-app[hidden] { display: none !important; }
#edu-eye-right { grid-area: od; border-right: 1px solid var(--line); }
#edu-eye-left { grid-area: os; border-left: 1px solid var(--line); }
.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }

.eye-panel { background: var(--card); overflow-y: auto; padding: .5rem .65rem; font-size: .82rem; min-height: 0; }
.eye-panel h2 { font-size: .95rem; display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; }
.eye-tag { font-size: .72rem; font-weight: 700; border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 0 .3rem; }
.eye-sec { border-top: 1px solid var(--line); padding: .35rem 0 .2rem; }
.sec-head { display: flex; justify-content: space-between; font-weight: 600; font-size: .8rem; margin-bottom: .2rem; }
.sec-head .muted { font-weight: 400; font-size: .7rem; }
.rot-dial { display: flex; gap: .4rem; align-items: center; }
.rots { flex: 1; min-width: 0; }
.rot-row { display: flex; gap: .4rem; align-items: baseline; padding: .05rem 0; }
.rot-v { font-size: .74rem; white-space: nowrap; }
.dial-box { flex: none; }
.dialfig { margin: 0; text-align: center; }
.dial { width: 60px; height: 60px; display: block; }
.dialfig figcaption { font-size: .62rem; }
.eye-words { margin: .15rem 0; font-size: .78rem; }
.eye-panel .hint { font-size: .68rem; margin: .1rem 0; }
.pair { margin-bottom: .25rem; }
.pair-head { font-size: .66rem; color: var(--muted); letter-spacing: .03em; }
.drow { display: grid; grid-template-columns: 2.6rem 1fr 3.4rem; gap: .35rem; align-items: center; padding: .1rem .15rem; border-radius: 4px; cursor: pointer; }
.dname { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; font-size: .78rem; }
.dbar { height: .55rem; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.dbar .fill { height: 100%; width: 0; transition: width .25s ease-out; }
.bar-v { text-align: right; font-size: .78rem; font-variant-numeric: tabular-nums; }
.drow.hot { background: color-mix(in srgb, #ffd43b 25%, transparent); }
.drow.selected { box-shadow: inset 3px 0 0 #fab005; background: color-mix(in srgb, #ffd43b 15%, transparent); }
.drow.weak .dbar { background: repeating-linear-gradient(45deg, var(--warn-bg), var(--warn-bg) 4px, transparent 4px, transparent 8px); }
.drow.weak .dname { color: var(--warn); }
.drow.weak .dname::after { content: "✕"; font-size: .7rem; margin-left: .1rem; }
.drow.past .bar-v { color: #e8590c; }
.gaze .kv { font-size: .76rem; margin: 0; }
.gaze .kv th { width: 52%; font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .dbar .fill { transition: none; } }

/* the controls over the stage */
.ov { position: absolute; z-index: 2; }
.ov-tl { top: 6px; left: 6px; right: 228px; }
.ov-tr { top: 6px; right: 6px; display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; max-width: 214px; }
.ov-tr select { width: 214px; font-size: .78rem; padding: .15rem .3rem; }
.ov-tl .chip { background: color-mix(in srgb, var(--card) 85%, transparent); }
.checks { display: flex; flex-wrap: wrap; gap: .2rem .7rem; background: color-mix(in srgb, var(--card) 80%, transparent);
          border-radius: 6px; padding: .15rem .45rem; width: fit-content; max-width: 100%; }
.panel { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,.08); font-size: .8rem; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; background: none; border: 0;
              border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); font-weight: 600; font-size: .82rem; padding: .3rem .55rem; text-align: left; }
.panel-head::after { content: "▾"; color: var(--muted); }
.panel.folded .panel-head::after { content: "▸"; }
.panel.folded .panel-head { border-bottom: 0; }
.panel.folded .panel-body { display: none; }
.panel-body { padding: .35rem .55rem .45rem; max-height: 46vh; overflow-y: auto; }
.ov-bl { left: 6px; bottom: 6px; width: 232px; }
.ov-br { right: 6px; bottom: 6px; width: 240px; }
.stack { display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 70px); overflow-y: auto; }
.ov-bc { bottom: 6px; left: 246px; right: 246px; max-width: 520px; margin: 0 auto; }
.where { font-weight: 400; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pad { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); touch-action: none; cursor: crosshair; }
.custom { display: inline-flex; gap: .3rem; align-items: center; }
.custom input { width: 3.6rem; padding: 0 .25rem; font-size: .8rem; }
.map-pick { display: flex; gap: .3rem; margin-top: .3rem; }
.map-pick select { font-size: .78rem; min-width: 0; }
.map-pick select:first-child { flex: 1; }
#edu-map-legend { font-size: .68rem; margin: .2rem 0 0; }
.explain .lines { margin: 0; padding-left: 1rem; }
.explain .lines li { margin: .15rem 0; font-size: .78rem; }
.slider { margin: .3rem 0; font-size: .8rem; }
.slider .muted { font-size: .7rem; }
.slider-row { display: flex; gap: .5rem; align-items: center; }
.slider-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.slider-row output { width: 2.8rem; text-align: right; font-size: .8rem; }
.head-out { font-size: .72rem; color: var(--muted); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.ov .hint { font-size: .7rem; }

/* the status bar */
.statusbar { grid-area: status; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; align-items: center; padding: .3rem .8rem;
             background: var(--card); border-top: 1px solid var(--line); font-size: .74rem; min-height: 1.9rem; }
.st { display: inline-flex; gap: .35rem; align-items: baseline; }
.st-k { color: var(--muted); }
.st-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.st.ok .st-v { color: var(--ok); } .st.warn .st-v { color: var(--warn); }

/* narrower than 900 px: stacked, and the page scrolls */
@media (max-width: 900px) {
  body.edu-mode { overflow: auto; }
  .edu-app { display: flex; flex-direction: column; height: auto !important; }
  .stage { height: auto; overflow: visible; order: 1; }
  .stage-canvas { position: relative; height: 62vh; min-height: 340px; }
  #edu-eye-right { order: 2; } #edu-eye-left { order: 3; } .statusbar { order: 0; }
  .eye-panel { overflow: visible; border: 0; border-top: 1px solid var(--line); }
  .ov-tl { right: 8px; }
  .ov-tr { position: static; margin: 8px; flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; }
  .ov-bl, .ov-br, .ov-bc { position: static; width: auto; max-width: none; margin: 8px; }
}

/* Eye / Stimulus (as the Unity demo's eye panel), the 95% band behind each bar, the prism and the typed point */
.es-row { display: grid; grid-template-columns: 4.8rem 1fr; gap: 0 .3rem; align-items: baseline; padding: .06rem 0; }
.es-row .es-vals { grid-column: 2; display: flex; gap: .3rem; align-items: baseline; }
.es-row .es-vals + .es-vals { grid-column: 2; }
.es-k { font-size: .76rem; white-space: nowrap; }
.es-tag { font-size: .6rem; color: var(--muted); width: 1.7rem; flex: none; }
.es-v { font-size: .72rem; white-space: nowrap; }
.es-v.stim { color: #2b8a3e; }
.es-row.off { border-top: 1px dashed var(--line); margin-top: .1rem; padding-top: .15rem; }
.es-row.off.warn-text .es-v { color: var(--warn); font-weight: 600; }
.dbar { position: relative; }
.dbar .band { position: absolute; top: 0; bottom: 0; opacity: .22; }
.dbar .fill { position: relative; }
.prism-row { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-size: .78rem; }
.prism-row select { font-size: .76rem; padding: 0 .2rem; }
.prism-row + .prism-row { margin-top: .3rem; }
#edu-palsy-panel .hint { margin: .35rem 0 .2rem; font-size: .7rem; }
#edu-palsy-out .kv td.mono { white-space: normal; }
.prism-out .kv { font-size: .72rem; margin: .25rem 0; }
.prism-lines { margin: .2rem 0 0; padding-left: .9rem; }
.prism-lines li { font-size: .72rem; margin: .1rem 0; }
.point-pick { margin-top: .3rem; font-size: .76rem; }
.point-pick summary { cursor: pointer; color: var(--muted); }
.point-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: .25rem 0; }
.point-row label { display: flex; flex-direction: column; font-size: .64rem; color: var(--muted); }
.point-row input { width: 100%; font-size: .76rem; padding: .05rem .2rem; }
.words-dial { display: flex; gap: .4rem; align-items: center; justify-content: space-between; }
.words-dial .eye-words { flex: 1; }
.prism-out .kv td.mono { word-break: normal; white-space: nowrap; font-size: .7rem; }