:root {
  --stage: #0f1118;
  --bg: #0f1118;
  --ink: #eceaf2;
  --muted: #a3a6b4;
  --line: #22252f;
  --female: #ff82be;
  --male: #6eb4ff;
  --duet: #b69cde;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
:focus-visible { outline: 2px solid var(--duet); outline-offset: 2px; }
main { max-width: 1200px; margin: 0 auto; padding: 0 16px 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* One background: the brain view has no edge, no radius, no border, no shadow (owner's ruling). */
.stage { position: relative; background: var(--stage); aspect-ratio: 16 / 9; overflow: hidden;
  width: min(100%, calc((100svh - 220px) * 16 / 9)); margin: 0 auto; cursor: pointer; }
video { width: 100%; height: 100%; display: block; }
#status { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: var(--muted);
  padding: 0 16px; font-size: var(--t-base); font-weight: 500; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* The sound prompt (owner's direction, 2026-09-30, design review section 9 item 7): live.js tries
   unmuted playback first; this is only the fallback, shown when the browser refused it. Hidden until
   live.js adds "show"; a tap anywhere on the page (not only the button) also clears it. It fades out
   over 300 ms once sound starts ("fade"), or disappears at once under reduced motion (live.js skips
   the fade class then); #status stays a plain sibling of the video so a screen reader reads it. */
#sound { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  border: 0; background: transparent; padding: 0; cursor: pointer; transition: opacity 300ms ease; }
#sound.show { display: flex; }
#sound.fade { opacity: 0; pointer-events: none; }
#sound:focus-visible { outline: 2px solid var(--duet); outline-offset: 4px; }
.sound-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--duet);
  display: flex; align-items: center; justify-content: center; }
.sound-icon { width: 30px; height: 30px; color: var(--stage); }
.sound-words { color: var(--ink); font-size: var(--t-base); text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { #sound { transition: none; } }

/* The vote window: the heading row, the countdown line, the choices, then the live lines. */
.window { border-top: 1px solid var(--line); padding-top: 16px; margin: 24px 0; }
.vote-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vote-head h2 { margin: 0; font-size: var(--t-md); font-weight: 600; }
#vote-clock { color: var(--muted); font-weight: 400; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
#vote-bar { appearance: none; display: block; width: 100%; height: 2px; margin: 8px 0 0; border: none; background: var(--line); }
#vote-bar::-webkit-progress-bar { background: var(--line); }
#vote-bar::-webkit-progress-value { background: var(--duet); }
#vote-bar::-moz-progress-bar { background: var(--duet); }
#vote-now { margin: 0 0 8px; font-size: var(--t-md); }
#vote-note { margin: 10px 0 0; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.choice { position: relative; display: flex; justify-content: space-between; gap: 8px; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.choice::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--share, 0) * 100%); background: var(--duet); opacity: 0.5; transition: width 200ms ease; }
.choice.chosen { border-color: var(--duet); }
.choice.chosen::after { opacity: 1; }
.choice.chosen .words::before { content: "\25CF"; margin-right: 6px; color: var(--duet); }
.choice:hover:not([aria-disabled="true"]) { border-color: var(--duet); }
.choice[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.choice.chosen[aria-disabled="true"] { opacity: 1; }
.choice .count { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
#vote[data-state="asleep"] .choices, #vote[data-state="off"] .choices { display: none; }
@media (max-width: 900px) { .choices { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .choice::after { transition: none; } }

.now { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 20px; }
.now p { margin: 4px 0; }
#brains { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
#brains li { display: flex; align-items: center; gap: 6px; min-height: 44px; }
#brains li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
#brains li.female::before { background: var(--female); }
#brains li.male::before { background: var(--male); }
#brains li.resting { opacity: 0.5; }
#brains li.resting::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
#brains li.leader .name { font-weight: 600; }
#brains .detail { color: var(--muted); font-size: var(--t-sm); }

.science, .sound { max-width: 62ch; color: var(--muted); }
.science { margin-top: 48px; }
.sound { margin-top: 24px; }
.science h2, .sound h2 { font-size: var(--t-md); font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.science h3, .sound h3 { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin: 20px 0 8px; }
.science h3:first-of-type { margin-top: 12px; }
.science p, .sound p { margin: 0 0 12px; }
.science p:last-child, .sound p:last-child { margin-bottom: 0; }
.sound details { margin-top: 24px; }
.sound summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.sound details[open] summary { margin-bottom: 12px; }
.sound details h3:first-of-type { margin-top: 12px; }
.sound table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: var(--t-sm); }
.sound table th, .sound table td { border-bottom: 1px solid var(--line); padding: 4px 8px; font-weight: 400; }
.sound table th[scope="col"] { text-align: right; }
.sound table th[scope="row"] { text-align: left; }
.sound table td { text-align: right; }
footer { color: var(--muted); font-size: var(--t-sm); max-width: 80ch; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 12px; }
footer p { margin: 4px 0; }
a { color: var(--duet); text-decoration: underline; }

@media (max-width: 600px) {
  .stage { width: calc(100% + 32px); margin: 0 -16px; }        /* full bleed: main's own 16 px gutter cancelled */
  #brains { grid-template-columns: repeat(2, 1fr); }            /* the six brains, 2 by 3 (section 3) */
}