:root {
  color-scheme: dark;
  --screen-grey: #202320;
  --paper: #e7e0cc;
  --muted: #b7bca5;
  --strip-height: clamp(30px, 4vw, 44px);
  color: var(--paper);
  background: var(--screen-grey);
  font-family: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
main {
  width: 100%;
  height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
}
.theatre {
  position: relative;
  width: min(100vw, calc(100svh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 1px solid #a4aa92;
  padding: 6px;
  background: var(--screen-grey);
  overflow: hidden;
}
.film-corner { position: absolute; width: 18px; height: 18px; border: 3px solid var(--paper); pointer-events: none; z-index: 2; }
.top-left { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.top-right { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.bottom-left { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.bottom-right { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.scene {
  display: block;
  width: 100%;
  height: calc(100% - var(--strip-height));
  overflow: hidden;
  filter: saturate(.45);
}
.stage-caption {
  display: flex;
  align-items: center;
  gap: clamp(6px, .8vw, 12px);
  height: var(--strip-height);
  padding: 0 clamp(10px, 1.8vw, 26px);
  background: var(--screen-grey);
  color: var(--muted);
  font-size: clamp(10px, 1.05vw, 14px);
  font-style: italic;
}
.live-dot { width: 4px; height: 4px; border-radius: 50%; background: #adb995; flex-shrink: 0; }
#caption { white-space: nowrap; }
.reel {
  margin-left: auto;
  white-space: nowrap;
  font: normal clamp(7px, .7vw, 10px) Arial, sans-serif;
  letter-spacing: clamp(.8px, .15vw, 2px);
}
#sound {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--strip-height);
  height: var(--strip-height);
  padding: 0;
  margin-right: -7px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#sound .sound-waves { display: none; }
#sound[aria-pressed="true"] .sound-waves { display: inline; }
#sound[aria-pressed="true"] .sound-muted { display: none; }
#sound:hover, #sound[aria-pressed="true"] { color: var(--paper); }
#sound:disabled { opacity: .5; cursor: wait; }
#sound:focus-visible { outline: 1px solid var(--paper); outline-offset: -4px; }
.scene-control { cursor: pointer; outline: none; }
.hit-area { fill: transparent; stroke: transparent; stroke-width: 2; stroke-dasharray: 3 6; }
.scene-control:focus-visible .hit-area { stroke: var(--paper); }
.scene-control:hover #moon, .scene-control:hover #bean-hat { filter: brightness(1.12); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 380px) {
  .stage-caption { gap: 5px; padding: 0 8px; font-size: 9px; }
  .reel { letter-spacing: .5px; font-size: 6px; }
  #sound svg { width: 16px; height: 16px; }
}