#tube {
  position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: #000;
  --signal-blur: clamp(.9px, min(.26dvh, .32vw), 3px);
  --pitch: 6px;
  --crawl: 3s;
  --beam-ink: #fff;
  --beam-opacity: .5;
  --look-strength: .75;
  --raster-strength: 1;
  --beam-mask: linear-gradient(white, rgb(255 255 255 / .76) 10%, rgb(255 255 255 / .35) 21%,
    transparent 45% 55%, rgb(255 255 255 / .35) 79%, rgb(255 255 255 / .76) 90%, white);
}
#tube[data-video-look="phosphor-grille"] {
  --pitch: 8px;
  --crawl: 4s;
  --beam-opacity: .91;
  --beam-ink: repeating-linear-gradient(90deg, #ffa9a9, #a9ffa9 1.333px, #a9a9ff 2.667px, #ffa9a9 4px);
}
#tube:is([data-video-look="scanlines"], [data-video-look="phosphor-grille"]) { --grade: url(#studio-ink); }
#tube[data-video-softness] {
  --focus-radius: calc(var(--signal-blur) * var(--focus-strength));
  --picture-focus: blur(var(--focus-radius));
  --logo-focus: blur(calc(var(--focus-radius) / 3));
  --menu-focus: blur(calc(.45px * var(--focus-strength)));
}
#signal { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: #000; }
.disclaimer-signal { position: absolute; inset: 0; display: grid; place-items: center; }
#scenery { position: absolute; inset: 0; overflow: hidden; }
#tube:is([data-video-look], [data-video-softness]) :is(#classicBackdrop canvas, #flyingToasters, #scenery video, #motifs, #gl, #proHost, #livePoster, #liveHost > canvas, #hostFrame video, #castMatte) {
  filter: var(--grade,) var(--picture-focus,);
}
#tube:is([data-video-look], [data-video-softness]) #stationLogo {
  filter: var(--grade,) var(--logo-focus,);
}
#tube:is([data-video-look], [data-video-softness]) :is(#gear, #rssToggle, #volumeToggle, #tellJoke, .cast-controls #chatSwitch, .program-links > *, .broadcast-action, .receiver-panel, #volumePanel, #settingsPanel, .disclaimer-panel, #chatLock) {
  filter: var(--grade,) var(--menu-focus,);
}
#tube:is([data-video-look], [data-video-softness]) .settings-selects select::picker(select) { filter: var(--grade,) var(--menu-focus,); }
/* Misregister the finished picture once, so the host, backdrop and station mark share a color offset. */
#tube[data-video-chroma]:not([data-video-look="analog-broadcast"]) #picture { filter: url(#video-chroma); }
/* Process the composed frame, including direct-stage recorded playback. */
#tube[data-analog-softness] #stage { filter: url(#analog-broadcast); }
#tube[data-video-look="analog-broadcast"][data-video-chroma] #stage { filter: url(#video-chroma); }
#tube[data-analog-softness][data-video-chroma] #stage { filter: url(#analog-broadcast) url(#video-chroma); }

.crt-glass {
  display: none; position: absolute; z-index: 1; inset: 0; overflow: hidden;
  pointer-events: none; mix-blend-mode: overlay;
}
#tube[data-video-look] .crt-glass { display: block; }
.crt-glass::before, #tube[data-video-look] :where(select:open) option::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--beam-ink); opacity: calc(var(--beam-opacity) * var(--look-strength) * var(--raster-strength));
  mask-image: var(--beam-mask); mask-size: 100% var(--pitch);
}
.crt-glass::before {
  top: calc(-1 * var(--pitch));
  animation: beam-crawl var(--crawl) linear infinite;
}
@keyframes beam-crawl { to { transform: translateY(var(--pitch)); } }

@keyframes beam-phase { to { mask-position: 0 var(--pitch); } }

/* Two reference rows per period; subtle, stationary luminance loss instead of bright chunky bars. */
#tube[data-video-look="analog-broadcast"] .crt-glass { mix-blend-mode: normal; }
#tube[data-video-look="analog-broadcast"] .crt-glass::before {
  top: 0; animation: none; mask: none;
  background: repeating-linear-gradient(0deg, #000 0 calc(var(--analog-pitch) / 2), transparent calc(var(--analog-pitch) / 2) var(--analog-pitch));
  opacity: var(--analog-scan-opacity);
}
#tube[data-video-look="analog-broadcast"] :where(select:open) option::after { display: none; }

.tape-effects {
  display: none; position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
}
#tube:is([data-video-look="scanlines"], [data-video-look="phosphor-grille"], [data-tracking]) .tape-effects { display: block; }
.tape-effects canvas { display: none; position: absolute; }
.tape-edge, .tape-tear { opacity: var(--look-strength); }
#tube[data-video-look="scanlines"] .tape-edge {
  display: block; inset: 0 auto 0 0; width: clamp(20px, 4.4vw, 54px); height: 100%;
}
#tube[data-tracking] .tracking-noise { display: block; inset: 0; width: 100%; height: 100%; }
.tracking-slice { position: absolute; }
#tube:not([data-tracking]) .tracking-slice { display: none; }
.tape-tear { display: none; }
#tube:is([data-video-look="scanlines"], [data-video-look="phosphor-grille"]) .tape-tear {
  display: block; position: absolute; inset: auto 0 0; height: 2.5%;
  backdrop-filter: url(#tape-slip);
}
.tape-tear::after {
  content: ""; position: absolute; inset-inline: 0; top: var(--splice-center, 50%); transform: translateY(-50%);
  height: max(4px, 1.1dvh);
  background: var(--tape-grain) var(--tracking-x, 0px) 0 / 240px 100% repeat-x;
  opacity: .30;
}

@supports (appearance: base-select) {
  #tube[data-video-look] select:open option { position: relative; }
  #tube[data-video-look] :where(select:open) option::after {
    mix-blend-mode: overlay;
    animation: beam-phase var(--crawl) linear infinite;
  }
}
/* The native dialog paints above the broadcast. Transfer the glass to its top layer. */
#tube:has(#disclaimer:modal) > #glass { display: none; }
/* The finished cast already has its broadcast raster. */
#tube:has(#stage > #castScreen:not([hidden])) > :is(.crt-glass, .tape-effects) { display: none; }
html[data-power="cold"] :is(.crt-glass, .tape-effects) { visibility: hidden; }
html[data-power="warming"] :is(.crt-glass, .tape-effects) { animation: tube-gain var(--warm-up) both; }
@keyframes tube-gain { 0%, 48% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .crt-glass::before, #tube[data-video-look] :where(select:open) option::after {
    animation: none;
  }
}