:root {
  color-scheme: dark;
  --bg: #020711;
  --panel: #081321;
  --panel-2: #0b1a2c;
  --line: #21466f;
  --line-soft: rgb(88 157 224 / .28);
  --text: #edf7ff;
  --muted: #94afd0;
  --accent: #6bd4ff;
  --accent-strong: #2d8dff;
  --warm: #9dd7ff;
  --danger: #ff9b9b;
  --shadow-border: 0 0 0 1px rgb(113 190 255 / .12), 0 16px 40px -24px #000, 0 0 28px rgb(31 112 255 / .1);
  --ease: cubic-bezier(.2, 0, 0, 1);
  font: 14px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}
body::before,
body::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
}
body::before {
  background:
    radial-gradient(ellipse at 50% -12%, rgb(24 108 255 / .3), transparent 42%),
    radial-gradient(ellipse at -8% 48%, rgb(21 96 255 / .2), transparent 38%),
    radial-gradient(ellipse at 108% 62%, rgb(20 125 255 / .18), transparent 40%);
}
body::after {
  background: linear-gradient(rgb(130 200 255 / .025) 1px, transparent 1px);
  background-size: 100% 5px;
  mix-blend-mode: screen;
  opacity: .35;
}
button { font: inherit; }
button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  background: linear-gradient(180deg, #142943, #091626);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(180 226 255 / .1), 0 5px 12px rgb(0 0 0 / .18);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
button:hover:not(:disabled) {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1b3b60, #0d1f35);
  box-shadow: inset 0 1px 0 rgb(205 239 255 / .16), 0 0 18px rgb(41 142 255 / .18);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .42; }
button.primary {
  border-color: #82dcff;
  background: linear-gradient(180deg, #64d4ff, #258cf5);
  color: #031020;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .48), 0 0 20px rgb(42 151 255 / .28);
}
.audience-listen { min-height: 52px; padding: 0 24px; font-size: 16px; }
.text-button { min-height: 28px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--accent); box-shadow: none; }
.text-button:hover:not(:disabled) { border: 0; background: transparent; text-decoration: underline; box-shadow: none; }
#led-wall { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; mix-blend-mode: screen; }
.stage-shell { position: relative; z-index: 1; width: min(1500px, 100%); margin: 0 auto; padding: 34px clamp(14px, 4vw, 56px) 24px; }
.masthead { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.kicker, .eyebrow { margin: 0 0 6px; color: var(--warm); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; text-shadow: 0 0 12px rgb(90 184 255 / .34); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.045em; font-weight: 650; text-shadow: 0 0 25px rgb(45 139 255 / .26); text-wrap: balance; }
h2 { margin-bottom: 0; font-size: 17px; line-height: 1.2; font-weight: 650; }
.lede { margin: 0; color: var(--muted); }
.status-block { display: grid; grid-template-columns: 9px auto; column-gap: 9px; align-items: center; min-width: 160px; }
.status-dot { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgb(148 175 208 / .12), 0 0 14px rgb(148 175 208 / .4); }
.status-dot.live { background: var(--accent); box-shadow: 0 0 0 4px rgb(107 212 255 / .14), 0 0 16px rgb(72 187 255 / .9); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px rgb(255 155 155 / .14); }
.status-block span:last-child { color: var(--muted); font-size: 12px; }
.control-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.control-spacer { flex: 1; }
#error { margin: 0 0 14px; }
.error { border-left: 2px solid var(--danger); padding: 9px 12px; color: #ffd0d0; background: rgb(255 115 115 / .1); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr); gap: 16px; align-items: start; }
.panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: linear-gradient(145deg, rgb(12 28 48 / .96), rgb(4 10 20 / .97));
  box-shadow: var(--shadow-border);
}
.panel::before { position: absolute; z-index: 0; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(152 224 255 / .42), transparent); content: ""; }
.scene-panel, .score-panel { padding: 16px; }
.scene-panel > *, .score-panel > *, .round-panel > *, .metrics-panel > *, .source-panel > * { position: relative; z-index: 1; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 12px; }
.scene-wrap { overflow: hidden; border: 1px solid rgb(77 151 225 / .45); border-radius: 5px; background: #020711; box-shadow: inset 0 0 24px rgb(29 114 255 / .14), 0 0 18px rgb(31 104 255 / .1); }
canvas { display: block; width: 100%; height: auto; }
#scene { aspect-ratio: 16 / 9; }
.honest-note, .hint, .details, .empty-state { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.fixture-note { margin: 10px 0 0; border-left: 2px solid var(--danger); padding: 8px 10px; color: #ffd0d0; background: rgb(255 115 115 / .1); font-size: 12px; }
.legend, .score-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px; color: var(--muted); font-size: 12px; }
.legend span, .score-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i, .score-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.key-bee { background: #9fc3e9; box-shadow: 0 0 8px rgb(111 199 255 / .65); }
.key-stimulus { background: #b99cff; box-shadow: 0 0 8px rgb(185 156 255 / .55); }
.key-obstacle { border: 1px solid #ee9b78; background: rgb(238 155 120 / .22); }
.key-seed { background: #75bfff; box-shadow: 0 0 8px rgb(117 191 255 / .55); }
.key-inherited { background: #7e9fd1; }
.key-changed { background: #8de8ff; box-shadow: 0 0 8px rgb(141 232 255 / .65); }
.side-column { display: grid; gap: 16px; }
.round-panel, .metrics-panel, .source-panel { padding: 16px; }
.badge-group { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.badge { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.fixture-badge { border-color: var(--danger); color: #ffd0d0; background: rgb(255 115 115 / .1); }
.round-number { margin: 14px 0 6px; color: var(--accent); font: 650 54px/.9 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; text-shadow: 0 0 18px rgb(67 181 255 / .48); }
.round-number small { margin-left: 8px; color: var(--muted); font: 14px/1 ui-sans-serif, sans-serif; letter-spacing: 0; }
.inheritance { min-height: 22px; margin: 0; color: var(--muted); }
.decision-count { margin: 14px 0 13px; color: var(--text); font-size: 15px; font-weight: 650; }
.metric-list, .source-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; margin: 0; border-top: 1px solid var(--line); padding-top: 13px; }
.metric-list dt, .source-list dt { color: var(--muted); font-size: 11px; }
.metric-list dd, .source-list dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#score { overflow: hidden; border: 1px solid rgb(77 151 225 / .45); border-radius: 5px; background: #050c16; box-shadow: inset 0 0 18px rgb(29 114 255 / .1); }
.score-panel { margin-top: 16px; }
.mono { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; color: var(--muted); font-size: 11px; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .stage-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .stage-shell { padding: 18px 12px 18px; }
  .audience-mode .control-bar { position: sticky; bottom: 10px; z-index: 2; margin: 0 0 10px; }
  .audience-mode .audience-listen { width: 100%; min-height: 56px; box-shadow: 0 8px 24px rgb(0 0 0 / .42), 0 0 18px rgb(29 123 255 / .22); }
  .audience-mode .side-column { display: none; }
  .audience-mode .scene-panel, .audience-mode .score-panel { padding: 10px; }
  .audience-mode .honest-note { margin-top: 7px; font-size: 11px; line-height: 1.35; }
  .audience-mode .legend, .audience-mode .score-legend { margin-top: 7px; gap: 5px 10px; font-size: 11px; }
  .audience-mode footer { display: none; }
  .masthead { align-items: start; flex-direction: column; gap: 16px; }
  .status-block { min-width: 0; }
  .control-bar button { flex: 1 1 calc(50% - 9px); }
  .control-spacer { display: none; }
  #stimulus { flex-basis: 100%; }
  .scene-panel, .score-panel, .round-panel, .metrics-panel, .source-panel { padding: 13px; }
  .side-column { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  #led-wall { opacity: .55; }
}
@media (forced-colors: active) { .panel, .scene-wrap, #score { border: 1px solid CanvasText; } }