:root {
  color-scheme: dark;
  --paper: #f0ede6;
  --green: #718866;
  --frame-width: min(100vw, calc(100svh * 16 / 9));
  --frame-height: min(100svh, calc(100vw * 9 / 16));
  font-family: "Bahnschrift", "Aptos", "Helvetica Neue", system-ui, sans-serif;
  background: #000;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #000; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.skip-link {
  position: fixed; z-index: 100; top: .75rem; left: .75rem;
  padding: .65rem .85rem; color: #000; background: var(--paper);
  transform: translateY(-180%); transition: transform 150ms ease;
}
.skip-link:focus { transform: translateY(0); }

.experience {
  width: 100vw; height: 100svh; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #131313 0, #050505 45%, #000 72%);
}

.theater {
  position: relative; isolation: isolate; width: var(--frame-width); height: var(--frame-height);
  max-width: 100vw; max-height: 100svh; overflow: hidden; background: #050505;
  outline: 1px solid rgba(255,255,255,.035);
}

.stage-plate, .stage-plate img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-plate img { display: block; object-fit: cover; user-select: none; pointer-events: none; }

.screen-copy {
  position: absolute; z-index: 2; top: 16%; left: 18%; width: 62%; height: 43%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  color: #111; transform-origin: center; pointer-events: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.screen-copy.is-changing { opacity: 0; transform: translateY(10px) scale(.985); }
.screen-kicker, .screen-title, .screen-subtitle { margin: 0; }
.screen-kicker {
  min-height: 1.1em; font: 700 clamp(.55rem,.8vw,.9rem)/1 "Cascadia Mono","Consolas",monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.screen-title {
  max-width: 100%; white-space: pre-line; text-wrap: balance;
  font-family: "Bahnschrift SemiCondensed","Aptos Display",sans-serif;
  font-size: clamp(2.6rem,5.4vw,6.8rem); font-weight: 650; line-height: .87; letter-spacing: -.055em;
}
body[data-scene="hello"] .screen-title {
  font-size: clamp(5.6rem,9.2vw,11rem);
  line-height: .8;
}
body[data-scene="first-order"] .screen-title { font-size: clamp(3.2rem,5.3vw,6.6rem); }
body[data-scene="september-9"] .screen-title { font-size: clamp(3rem,4.4vw,5.5rem); }
body[data-scene="everybody-looked"] .screen-title { font-size: clamp(3.1rem,5vw,6.1rem); }
body[data-scene="ongoing"] .screen-title { font-size: clamp(3rem,4.5vw,5.6rem); }
.screen-subtitle {
  max-width: 38ch; margin-top: 1.1rem;
  font-size: clamp(.65rem,1.05vw,1.12rem); font-weight: 600; letter-spacing: .03em;
}
.screen-record {
  display: flex; align-items: center; gap: .7rem; margin-top: 1.2rem;
  font: 700 clamp(.48rem,.62vw,.7rem)/1 "Cascadia Mono","Consolas",monospace;
  letter-spacing: .07em; pointer-events: auto;
}
.record-type { padding: .35rem .48rem .28rem; border: 1px solid currentColor; }
.record-source { color: inherit; text-underline-offset: .2em; }

.prop-field, .scene-prop { position: absolute; inset: 0; pointer-events: none; }
.prop-field { z-index: 4; }
.scene-prop {
  width: auto; height: auto; opacity: 0;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.35));
  will-change: transform, opacity;
}
.prop-cable {
  inset: -42% auto auto 57%; height: 90%;
  transform: translateY(-25%) scaleY(.4); transform-origin: top;
}
.prop-mouse {
  inset: auto auto 6% 38%; height: 46%;
  transform: translateY(-125%) rotate(-18deg) scale(.75);
}
.prop-flashes {
  inset: auto 4% -4% auto; height: 76%;
  transform: translateX(105%) rotate(4deg);
}
.prop-comments {
  inset: auto -1% -4% auto; width: 78%;
  transform: translateX(110%) rotate(2deg);
}
.theater.is-playing .scene-prop.is-active { opacity: 1; }
.theater.is-playing .prop-cable.is-active { animation: cable-drop 850ms cubic-bezier(.16,.85,.18,1) both; }
.theater.is-playing .prop-mouse.is-active { animation: mouse-drop 780ms 120ms cubic-bezier(.18,.82,.22,1.15) both; }
.theater.is-playing .prop-flashes.is-active,
.theater.is-playing .prop-comments.is-active { animation: crowd-surge 850ms cubic-bezier(.16,.82,.2,1) both; }

.john-control {
  position: absolute; z-index: 6; left: 44%; bottom: 8%; width: 17%; height: 54%;
  padding: 0; border: 0; color: #111; background: transparent; cursor: pointer;
  transform-origin: 50% 90%;
  transition: left 420ms cubic-bezier(.2,.8,.2,1), bottom 420ms cubic-bezier(.2,.8,.2,1),
    width 420ms cubic-bezier(.2,.8,.2,1), transform 180ms ease;
}
.john-control:hover { transform: scale(1.018); }
.john-control:active { transform: scale(.985); }
.john-control:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }

.john-pose {
  position: absolute; left: 50%; bottom: 0; width: auto; height: 100%; max-width: 170%;
  object-fit: contain; object-position: bottom center; opacity: 0;
  transform: translateX(-50%) translateY(12px) scale(.985);
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.35));
  transition: opacity 130ms linear, transform 300ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none; user-select: none;
}
.john-pose.is-active { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.john-spotlight {
  position: absolute; z-index: -1; left: 50%; bottom: -1%; width: 145%; aspect-ratio: 2.4/1;
  border: 1px solid rgba(238,232,217,.28); border-radius: 50%; opacity: 0;
  transform: translateX(-50%) scale(.4); transition: opacity 160ms ease, transform 260ms ease;
}
.john-control:hover .john-spotlight,
.john-control:focus-visible .john-spotlight { opacity: 1; transform: translateX(-50%) scale(1); }

.john-hit-label {
  position: absolute; left: 50%; top: 34%; padding: .25rem .42rem;
  color: #111; background: var(--paper); border: 1px solid #111;
  font: 700 clamp(.45rem,.55vw,.65rem)/1 "Cascadia Mono",monospace;
  letter-spacing: .12em; opacity: 0; transform: translate(-50%,8px) rotate(-4deg);
  transition: opacity 120ms ease, transform 160ms ease;
}
.john-control:hover .john-hit-label,
.john-control:focus-visible .john-hit-label { opacity: 1; transform: translate(-50%,0) rotate(-4deg); }

body[data-scene="first-order"] .john-control { left: 56%; bottom: 5%; width: 18%; height: 40%; }
body[data-scene="september-9"] .john-control { left: 30%; width: 20%; }
body[data-scene="everybody-looked"] .john-control { left: 42%; width: 17%; }
body[data-scene="ongoing"] .john-control { left: 23%; width: 17%; }

.cue {
  position: absolute; z-index: 8; left: 4%; bottom: 4%;
  width: clamp(95px,11vw,180px); aspect-ratio: 1/.62; display: grid; place-items: center;
  color: #111; transform: rotate(-4deg); transition: opacity 200ms ease, transform 250ms ease;
  pointer-events: none;
}
.cue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cue span {
  position: relative; max-width: 68%;
  font: 700 clamp(.48rem,.75vw,.75rem)/1.1 "Cascadia Mono",monospace; text-align: center;
}

.world-control {
  position: absolute; z-index: 8; padding: 0; border: 0; color: var(--paper);
  background: transparent; cursor: pointer; opacity: .68;
  transition: opacity 150ms ease, transform 180ms ease;
}
.world-control:hover, .world-control:focus-visible { opacity: 1; transform: translateY(-4px) rotate(0); }
.world-control:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.world-control img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(0,0,0,.5)); }
.world-control span {
  position: absolute; font: 700 clamp(.43rem,.52vw,.62rem)/1 "Cascadia Mono",monospace;
  letter-spacing: .08em;
}
.notes-control {
  right: 3%; bottom: 2.5%; width: clamp(74px,8vw,130px); aspect-ratio: 1.4/1;
  transform: rotate(3deg);
}
.notes-control span { left: 50%; top: 50%; color: #111; transform: translate(-45%,-55%) rotate(-2deg); }
.archive-control {
  right: 12%; bottom: 3.5%; width: clamp(70px,7vw,115px); aspect-ratio: 1/.9;
  transform: rotate(-2deg);
}
.archive-control span { left: 50%; top: 43%; transform: translate(-50%,-50%); }

.stage-ui {
  position: absolute; z-index: 9; top: 2.5%; left: 2.2%; display: flex; gap: .8rem; align-items: center;
  color: rgba(255,255,255,.66);
  font: 650 clamp(.48rem,.62vw,.68rem)/1 "Cascadia Mono",monospace; letter-spacing: .08em;
}
.micro-control {
  padding: .45rem .55rem; border: 1px solid rgba(255,255,255,.25);
  color: inherit; background: #080808; cursor: pointer;
}
.micro-control:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.stage-disclaimer {
  position: absolute; z-index: 2; right: 2.3%; top: 2.6%; margin: 0;
  color: rgba(255,255,255,.42);
  font: 600 clamp(.42rem,.53vw,.62rem)/1 "Cascadia Mono",monospace; letter-spacing: .08em;
}

.impact-flash {
  position: absolute; z-index: 12; inset: 0; pointer-events: none; background: #fff; opacity: 0;
}
.theater.impact .impact-flash { animation: flash 320ms steps(2,end); }
.theater.impact { animation: stage-nudge 340ms cubic-bezier(.2,.8,.2,1); }

.backstage-dialog {
  width: min(92vw,720px); max-height: min(86svh,780px); padding: 0; border: 0;
  color: #111; background: transparent; overflow: visible;
}
.backstage-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.dialog-paper {
  position: relative; max-height: 86svh; overflow: auto; padding: clamp(1.5rem,4vw,3.5rem);
  background: var(--paper); border: 1px solid #4d4b45;
  box-shadow: 14px 18px 0 #191919, 0 24px 70px rgba(0,0,0,.55);
  transform: rotate(-.7deg);
}
.dialog-paper::before {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(0,0,0,.16); pointer-events: none;
}
.dialog-close {
  position: absolute; z-index: 2; top: .7rem; right: .8rem; width: 2.6rem; height: 2.6rem;
  border: 1px solid #111; color: #111; background: transparent; font-size: 1.6rem; cursor: pointer;
}
.dialog-close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.dialog-label { margin: 0 0 2rem; font: 700 .75rem/1 "Cascadia Mono",monospace; letter-spacing: .1em; }
.dialog-paper h2 {
  margin: 0; font: 650 clamp(2.4rem,7vw,5.8rem)/.86 "Bahnschrift SemiCondensed",sans-serif;
  letter-spacing: -.05em;
}
.dialog-paper > p:not(.dialog-label,.dialog-punchline,.fine-print) {
  max-width: 40ch; font-size: 1rem; line-height: 1.55;
}
.dialog-punchline {
  margin: 2.4rem 0; font: 650 clamp(1.6rem,3.5vw,3rem)/1 "Bahnschrift SemiCondensed",sans-serif;
}
.dialog-paper dl { border-top: 2px solid #111; }
.dialog-paper dl div {
  display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: .8rem 0;
  border-bottom: 1px solid rgba(0,0,0,.28);
}
.dialog-paper dt { font: 700 .78rem/1.3 "Cascadia Mono",monospace; }
.dialog-paper dd { margin: 0; }
.fine-print { margin-top: 2rem; font: .7rem/1.5 "Cascadia Mono",monospace; opacity: .65; }

.archive-list { margin: 2rem 0; padding: 0; list-style: none; border-top: 2px solid #111; }
.archive-list button {
  width: 100%; display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem;
  align-items: center; padding: .9rem .25rem; border: 0;
  border-bottom: 1px solid rgba(0,0,0,.25); color: #111; background: transparent;
  text-align: left; cursor: pointer;
}
.archive-list button:hover, .archive-list button:focus-visible { background: rgba(113,136,102,.15); outline: 0; }
.archive-number, .archive-tag { font: 700 .68rem/1 "Cascadia Mono",monospace; }
.archive-title { font-weight: 650; }
.future-reel { display: flex; flex-wrap: wrap; gap: .45rem; }
.future-reel span { padding: .5rem .62rem; border: 1px solid #111; font: 700 .62rem/1 "Cascadia Mono",monospace; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

@keyframes cable-drop {
  0% { opacity: 0; transform: translateY(-28%) scaleY(.35); }
  70% { opacity: 1; transform: translateY(2%) scaleY(1.03); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes mouse-drop {
  0% { opacity: 0; transform: translateY(-125%) rotate(-18deg) scale(.75); }
  72% { opacity: 1; transform: translateY(4%) rotate(4deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes crowd-surge {
  0% { opacity: 0; transform: translateX(105%) rotate(4deg); }
  72% { opacity: 1; transform: translateX(-2%) rotate(-1deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes flash {
  0%,100% { opacity: 0; } 30% { opacity: .34; } 52% { opacity: 0; } 70% { opacity: .18; }
}
@keyframes stage-nudge {
  0%,100% { transform: translate(0,0); }
  28% { transform: translate(-4px,2px) rotate(-.08deg); }
  55% { transform: translate(3px,-1px); }
}

@media (max-width: 680px) {
  :root { --frame-width: 100vw; --frame-height: 100svh; }
  .theater { width: 100vw; height: 100svh; }
  .stage-plate img { object-fit: cover; }
  .screen-copy { top: 14%; left: 13%; width: 74%; height: 43%; }
  .screen-kicker { font-size: clamp(.46rem,1.8vw,.65rem); }
  .screen-title { font-size: clamp(2.15rem,10.5vw,4.3rem); line-height: .9; }
  body[data-scene="hello"] .screen-title { font-size: clamp(4rem,19vw,6.4rem); line-height: .82; }
  body[data-scene="first-order"] .screen-title { font-size: clamp(2.2rem,10.5vw,4rem); }
  body[data-scene="september-9"] .screen-title { font-size: clamp(2rem,9.6vw,3.6rem); }
  body[data-scene="everybody-looked"] .screen-title { font-size: clamp(2rem,9.4vw,3.6rem); }
  body[data-scene="ongoing"] .screen-title { font-size: clamp(2.15rem,10vw,3.8rem); }
  .screen-subtitle { margin-top: .7rem; font-size: clamp(.58rem,2.4vw,.82rem); }
  .screen-record { gap: .42rem; margin-top: .75rem; font-size: clamp(.42rem,1.7vw,.58rem); }
  .john-control { left: 36%; bottom: 9%; width: 30%; height: 40%; }
  body[data-scene="first-order"] .john-control { left: 51%; bottom: 8%; width: 32%; height: 31%; }
  body[data-scene="september-9"] .john-control { left: 21%; bottom: 9%; width: 35%; height: 39%; }
  body[data-scene="everybody-looked"] .john-control { left: 20%; bottom: 8%; width: 31%; height: 40%; }
  body[data-scene="ongoing"] .john-control { left: 16%; bottom: 8%; width: 30%; height: 38%; }
  .john-hit-label { top: 35%; font-size: .48rem; }
  .prop-cable { inset: -20% auto auto 52%; height: 67%; }
  .prop-mouse { inset: auto auto 12% 18%; height: 32%; }
  .prop-flashes { inset: auto -12% 2% auto; height: 54%; }
  .prop-comments { inset: auto -26% 0 auto; width: 126%; }
  .cue { left: 2.4%; bottom: 2.2%; width: 82px; }
  .cue span { font-size: .45rem; }
  .notes-control { right: 1.5%; bottom: 1.2%; width: 76px; }
  .archive-control { right: 21%; bottom: 1.8%; width: 64px; }
  .world-control span { font-size: .4rem; }
  .stage-ui { top: max(1rem,env(safe-area-inset-top)); left: .75rem; font-size: .48rem; }
  .stage-disclaimer {
    top: max(1.2rem,env(safe-area-inset-top)); right: .6rem; max-width: 40%;
    font-size: .38rem; text-align: right;
  }
  .dialog-paper { padding: 2.8rem 1.3rem 1.5rem; }
  .dialog-paper h2 { font-size: clamp(2.7rem,15vw,4.7rem); }
}

@media (max-width: 350px), (max-height: 620px) {
  .notes-control { width: 62px; }
  .archive-control { width: 54px; right: 21%; }
  .cue { width: 70px; }
  .screen-record { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important; transition-duration: 1ms !important;
  }
}

[hidden] { display: none !important; }

@media (min-width: 681px) {
  body[data-scene="september-9"] .screen-copy {
    left: 47%;
    width: 38%;
  }

  body[data-scene="ongoing"] .screen-copy {
    top: 18%;
    left: 47%;
    width: 40%;
  }
}

@media (max-width: 680px) {
  .john-control { bottom: 21%; }
  body[data-scene="first-order"] .john-control { bottom: 20%; }
  body[data-scene="september-9"] .john-control { bottom: 20%; }
  body[data-scene="everybody-looked"] .john-control { bottom: 19%; }
  body[data-scene="ongoing"] .john-control { bottom: 18%; }
  .prop-mouse { bottom: 17%; }
}

.john-control:focus-visible { outline: none; }

/* Experience polish v3 */
.screen-kicker {
  font: 700 clamp(.62rem,.78vw,.88rem)/1 "Cascadia Mono","Consolas",monospace;
}
.screen-record {
  font: 700 clamp(.56rem,.7vw,.78rem)/1 "Cascadia Mono","Consolas",monospace;
}
.record-source {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .28rem; margin: -.4rem -.28rem;
}
.stage-ui { font-size: clamp(.54rem,.66vw,.76rem); }
.stage-disclaimer { font-size: clamp(.5rem,.58vw,.68rem); }

.prop-date-nine {
  inset: -18% 3% auto auto; height: 42%;
  transform: translateY(-145%) rotate(8deg) scale(.86); transform-origin: 50% 0;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.42));
}
.theater.is-playing .prop-date-nine.is-active {
  animation: date-nine-drop 920ms cubic-bezier(.16,.82,.2,1) both;
}

.stage-blackout {
  position: absolute; z-index: 30; inset: 0; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 220ms ease;
}
.theater.is-blackout .stage-blackout { opacity: 1; }
.john-control:disabled { cursor: wait; }

body[data-scene="idle"] .john-hit-label {
  opacity: 1; white-space: nowrap; transform: translate(-50%,0) rotate(-4deg);
  animation: invite-label 820ms 260ms ease-in-out 2;
}
body[data-scene="idle"] .john-spotlight {
  opacity: .66; transform: translateX(-50%) scale(1);
  animation: invite-ring 820ms 260ms ease-in-out 2;
}
body[data-scene="idle"] .cue {
  left: 27%; bottom: 11%; width: clamp(125px,12vw,190px); transform: rotate(-2deg);
  animation: invite-cue 820ms 260ms ease-in-out 2;
}
body[data-scene="idle"] .cue span {
  max-width: 74%; font-size: clamp(.62rem,.8vw,.82rem);
}

@keyframes date-nine-drop {
  0% { opacity: 0; transform: translateY(-145%) rotate(8deg) scale(.86); }
  68% { opacity: 1; transform: translateY(67%) rotate(-4deg) scale(1.02); }
  82% { opacity: 1; transform: translateY(56%) rotate(2deg) scale(.995); }
  100% { opacity: 1; transform: translateY(61%) rotate(-1deg) scale(1); }
}
@keyframes invite-label {
  0%,100% { transform: translate(-50%,0) rotate(-4deg); }
  50% { transform: translate(-50%,-5px) rotate(-2deg); }
}
@keyframes invite-ring {
  0%,100% { opacity: .48; transform: translateX(-50%) scale(.88); }
  50% { opacity: .82; transform: translateX(-50%) scale(1.08); }
}
@keyframes invite-cue {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(0); }
}

@media (min-width: 681px) {
  body[data-scene="september-9"] .screen-copy { width: 25%; }
}

@media (max-width: 680px) {
  .screen-kicker { font-size: clamp(.58rem,2.3vw,.72rem); }
  .screen-subtitle { font-size: clamp(.68rem,2.7vw,.86rem); }
  .screen-record { gap: .5rem; font-size: clamp(.58rem,2.25vw,.7rem); }
  .record-source { min-height: 44px; padding: 0 .35rem; margin: -.65rem -.35rem; }
  .stage-ui { font-size: .56rem; }
  .stage-disclaimer { top: max(1.15rem,env(safe-area-inset-top)); max-width: 44%; font-size: .5rem; }
  .world-control span { font-size: .5rem; }
  .prop-date-nine { inset: 3% -1% auto auto; width: 43%; height: auto; }
  body[data-scene="september-9"] .screen-copy { left: 10%; width: 56%; }
  body[data-scene="september-9"] .screen-title { font-size: clamp(1.95rem,8.8vw,3.4rem); }
  body[data-scene="idle"] .cue { left: 5%; bottom: 24%; width: 98px; }
  body[data-scene="idle"] .cue span { font-size: .58rem; }
  body[data-scene="idle"] .john-hit-label { font-size: .56rem; }
}

@media (max-width: 350px), (max-height: 620px) {
  body[data-scene="idle"] .cue { width: 86px; bottom: 24%; }
  body[data-scene="idle"] .cue span { font-size: .52rem; }
}

/* September 9 composition v4 — the physical calendar completes the date. */
@media (min-width: 681px) {
  body[data-scene="september-9"] .screen-copy {
    top: 24%;
    left: 23.5%;
    width: 32%;
    height: 25%;
    justify-content: flex-start;
  }

  body[data-scene="september-9"] .screen-title {
    white-space: nowrap;
    font-size: clamp(3.15rem, 3.75vw, 4.8rem);
    line-height: .88;
    letter-spacing: -.05em;
  }

  body[data-scene="september-9"] .screen-subtitle {
    margin-top: .85rem;
  }

  body[data-scene="september-9"] .screen-record {
    margin-top: .95rem;
  }

  body[data-scene="september-9"] .john-control {
    left: 36%;
    bottom: 7%;
    width: 20%;
    height: 54%;
  }

  body[data-scene="september-9"] .prop-date-nine {
    inset: -20% 18% auto auto;
    height: 45%;
  }
}

@media (max-width: 680px) {
  body[data-scene="september-9"] .screen-copy {
    top: 17%;
    left: 9%;
    width: 57%;
    height: 28%;
    justify-content: flex-start;
  }

  body[data-scene="september-9"] .screen-title {
    white-space: nowrap;
    font-size: clamp(2.05rem, 9.4vw, 3.45rem);
  }

  body[data-scene="september-9"] .john-control {
    left: 18%;
    bottom: 18%;
    width: 37%;
    height: 42%;
  }

  body[data-scene="september-9"] .prop-date-nine {
    inset: 2% 2% auto auto;
    width: 40%;
    height: auto;
  }

  body[data-scene="september-9"] .screen-record {
    gap: .32rem;
    white-space: nowrap;
    font-size: clamp(.43rem, 1.75vw, .58rem);
    letter-spacing: .03em;
  }

  body[data-scene="september-9"] .record-type {
    padding: .28rem .34rem .22rem;
  }

  body[data-scene="september-9"] .record-source {
    min-height: 36px;
    padding-inline: .18rem;
    margin-inline: -.18rem;
  }
}