/* One 3D model, with a plain video fallback. */
.film-stage { width: min(880px, 100%); transform: none; margin-bottom: 80px; }
.film-heading { margin-bottom: 24px; }
.tv-space { position: relative; display: grid; place-items: center; height: clamp(340px, 47vw, 560px); perspective: 1400px; background: #fff; }
.tv-set { position: relative; width: min(660px, 100%); aspect-ratio: 4 / 3; }
.tv-front { position: absolute; inset: 0; }
.tv-bezel { width: 100%; height: 100%; }
.tv-screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: 4px; background: #050808; }
.tv-picture-window { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tv-screen video, .tv-picture, .tv-snow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; aspect-ratio: auto; object-fit: cover; }
.tv-snow { z-index: 1; pointer-events: none; }
.tv-snow[hidden] { display: none; }
.tv-signal-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.film-stage[data-fit='contain'] .tv-screen video { object-fit: contain; }
.tv-screen video { filter: grayscale(1); }
.tv-picture { opacity: 0; pointer-events: none; }
.tv-screen.has-crt .tv-picture { opacity: 1; }
.tv-screen.has-crt video { opacity: 0; }
.tv-screen-play { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; width: 66px; height: 66px; padding-left: 4px; border: 1px solid #ffffff94; border-radius: 50%; color: #fff; background: #10191280; transform: translate(-50%, -50%); backdrop-filter: blur(4px); font-size: 21px; transition: background .2s; }
.tv-screen-play:hover { background: #101912cc; }
.tv-screen-play[hidden], .tv-controls[hidden] { display: none; }
.tv-model { position: absolute; inset: 0; }
.tv-model-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: pointer; }
.tv-antenna-toggle { position: absolute; z-index: 2; bottom: 0; right: max(0px, calc((100% - 660px) / 2)); min-height: 44px; padding: 0 4px; color: var(--muted); font-size: 12px; }
.tv-antenna-toggle:hover { color: #111; }
.tv-antenna-toggle[hidden] { display: none; }
.has-tv-model .tv-space { height: clamp(570px, 74vw, 790px); }
.film-stage.has-tv-model { width: min(1040px, 100%); }
.film-stage.has-tv-model:fullscreen .tv-space { height: min(73vh, 820px); }
.tv-controls { width: min(660px, 100%); margin: 18px auto 0; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; }
.tv-controls button { min-height: 44px; padding: 0 2px; flex-shrink: 0; font-size: 14px; white-space: nowrap; }
.tv-controls button:hover { color: #737c68; }
.tv-play-control { min-width: 48px; display: flex; align-items: center; gap: 7px; }
.tv-time { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tv-progress { appearance: none; min-width: 35px; flex: 1; width: 100%; height: 44px; margin: 0; cursor: pointer; background: transparent; accent-color: #434c40; }
.tv-progress::-webkit-slider-runnable-track { height: 2px; background: #cbcdc7; }
.tv-progress::-webkit-slider-thumb { appearance: none; height: 10px; width: 10px; margin-top: -4px; border-radius: 50%; background: #434c40; }
.tv-progress::-moz-range-track { height: 2px; background: #cbcdc7; }
.tv-progress::-moz-range-thumb { height: 10px; width: 10px; border: 0; border-radius: 50%; background: #434c40; }
.tv-progress:disabled { cursor: default; opacity: .4; }
.tv-controls [aria-pressed='false'] [data-effects-label], .tv-controls [aria-pressed='true'] [data-mute-label] { color: var(--muted); }
.film-stage .media-error { text-align: center; }
.film-stage[data-color='color'] .tv-screen video { filter: none; }
/* Approximate the tube colour and inner shade if no GPU canvas is available. */
.film-stage:not([data-effects='off']) .tv-screen video { filter: contrast(1.06) brightness(.96) grayscale(1); }
.film-stage:not([data-effects='off'])[data-color='color'] .tv-screen video { filter: saturate(.86) sepia(.12) contrast(1.06) brightness(.96); }
.film-stage:not([data-effects='off']) .tv-screen:not(.has-crt) .tv-picture-window::after,
.film-stage:not([data-effects='off'])[data-signal='snow'] .tv-picture-window::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 14px 24px -6px #0009, inset 10px 0 20px -7px #0008, inset -8px 0 18px -7px #0007, inset 0 -8px 18px -7px #0007; }
.film-stage:fullscreen { width: 100%; height: 100%; overflow: auto; padding: 3vh 6vw; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.film-stage:fullscreen .tv-space { height: min(70vh, 700px); flex-shrink: 0; }
.film-stage:fullscreen .tv-set { width: min(640px, 66vh, 78%); }
@media (max-width: 600px) {
  .has-tv-model .tv-space { height: clamp(430px, 124vw, 530px); }
  .tv-space { height: clamp(250px, 78vw, 440px); perspective: 900px; }
  .tv-set { width: 83%; }

  .tv-screen-play { width: 50px; height: 50px; font-size: 16px; }
  .tv-controls { flex-wrap: wrap; gap: 0 10px; justify-content: space-between; margin-top: 8px; padding: 5px 0; }
  .tv-controls button { font-size: 12px; }
  .tv-time { font-size: 11px; }
  .tv-progress { order: -1; flex: 0 0 100%; }
  .tv-time { margin-right: auto; }
  .tv-play-control [data-play-label] { display: none; }
  .tv-play-control { min-width: 20px; }
  .film-stage { margin-bottom: 55px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {

}

.tv-loading { position: absolute; color: var(--muted); font-size: 12px; }
.tv-loading[hidden] { display: none; }
.film-stage[data-presentation='loading'] .tv-set,
.film-stage[data-presentation='model'] .tv-set { visibility: hidden; }
.film-stage[data-presentation='loading'] .tv-space { height: clamp(570px, 74vw, 790px); }
.film-stage[data-presentation='loading'] { width: min(1040px, 100%); }
@media (max-width: 600px) {
  .film-stage[data-presentation='loading'] .tv-space { height: clamp(430px, 124vw, 530px); }
}