:root {
  /* Typography tokens: Space Grotesk** for camcorder UI labels, with bundled-safe fallbacks only. */
  --chrome-black: #08070D;
  --liquid-silver: #D8E4F2;
  --ice-blue: #7CCBFF;
  --blush: #FF5FA2;
  --peach: #FFD0B5;
  --violet: #8B5CFF;
  --amber: #FFC857;
  --bebas: Impact, "Arial Narrow", "Franklin Gothic Condensed", sans-serif;
  --zen: "Trebuchet MS", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --space: "Segoe UI", Inter, system-ui, sans-serif;
  --chakra: "Courier New", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  background: var(--chrome-black);
  color: var(--liquid-silver);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--space);
  background: var(--chrome-black);
}

button { font: inherit; }

.signal-noise,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.signal-noise {
  opacity: .11;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,95,162,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(124,203,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 90%, rgba(255,200,87,.45) 0 1px, transparent 2px);
  background-size: 31px 37px, 43px 29px, 53px 47px;
  animation: staticDrift .45s steps(2) infinite;
}

.scanlines {
  opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(216,228,242,.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.cursor-spark {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--peach), var(--blush) 35%, transparent 70%);
  filter: drop-shadow(0 0 16px var(--blush));
  transform: translate(-50%, -50%) scale(.6);
  pointer-events: none;
  z-index: 70;
  opacity: .75;
}

.broadcast { position: relative; }

.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(24px, 5vw, 72px);
}

.scene::before {
  content: attr(data-channel);
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  top: clamp(18px, 3vw, 44px);
  font: 700 clamp(22px, 4vw, 64px) var(--chakra);
  color: rgba(216,228,242,.18);
  text-shadow: 2px 0 var(--blush), -2px 0 var(--ice-blue);
}

.remote-strip {
  position: fixed;
  left: 18px;
  top: 50%;
  z-index: 80;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(216,228,242,.34);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(216,228,242,.2), rgba(8,7,13,.78) 42%, rgba(124,203,255,.15));
  box-shadow: inset 0 0 18px rgba(216,228,242,.18), 0 0 28px rgba(139,92,255,.24);
}

.remote-strip button {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(216,228,242,.32);
  border-radius: 50%;
  color: var(--liquid-silver);
  background: radial-gradient(circle at 35% 25%, rgba(216,228,242,.45), rgba(8,7,13,.8) 58%);
  cursor: pointer;
  font: 700 9px var(--space);
  letter-spacing: .08em;
}

.remote-strip span { display: block; color: var(--amber); font-size: 13px; }
.remote-strip button.active { box-shadow: 0 0 18px var(--blush), inset 0 0 12px rgba(255,95,162,.45); color: white; }

.scene-static {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(124,203,255,.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(139,92,255,.18), transparent 45%),
    linear-gradient(180deg, #08070D, #050409 70%);
}

.crt-shell {
  position: relative;
  width: min(1180px, 88vw);
  min-height: 68vh;
  border-radius: 38px / 28px;
  border: 2px solid rgba(216,228,242,.38);
  background:
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 18% 72%, rgba(124,203,255,.12)),
    radial-gradient(ellipse at center, rgba(216,228,242,.09), rgba(8,7,13,.92) 62%);
  box-shadow: inset 0 0 42px rgba(124,203,255,.22), inset 0 0 120px rgba(8,7,13,.98), 0 0 70px rgba(124,203,255,.18);
  display: grid;
  place-items: center;
  clip-path: inset(0 round 38px);
}

.crt-shell::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 28px;
  background: linear-gradient(100deg, transparent 20%, rgba(216,228,242,.24), transparent 32%);
  transform: translateX(-120%);
  animation: glareSweep 6s ease-in-out infinite;
}

.rec-bug,
.channel-code,
.window-header,
.chrome-rail,
.warning-tag,
.tiny-credit,
.tune-prompt {
  font-family: var(--chakra);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.rec-bug { position: absolute; left: 34px; top: 28px; color: var(--liquid-silver); }
.rec-bug i, .sticker-rec i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 16px var(--blush);
  animation: recPulse 1s infinite;
}

.channel-code { position: absolute; right: 34px; top: 30px; color: var(--ice-blue); }

.chrome-title {
  position: relative;
  margin: 0;
  font-family: var(--bebas);
  font-size: clamp(76px, 16vw, 228px);
  line-height: .8;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, white 0%, var(--liquid-silver) 24%, var(--ice-blue) 42%, #2d2a36 50%, white 58%, var(--violet) 76%, var(--blush));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(5px 0 0 rgba(255,95,162,.45)) drop-shadow(-5px 0 0 rgba(124,203,255,.42));
  animation: titleLock 2.6s steps(8) both;
}

.chrome-title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(255,255,255,.08);
  transform: translate(0, 8px) skewX(-12deg);
  clip-path: polygon(0 56%, 100% 46%, 100% 62%, 0 72%);
}

.title-reflection {
  position: absolute;
  top: 57%;
  font-family: var(--bebas);
  font-size: clamp(66px, 14vw, 188px);
  letter-spacing: .02em;
  transform: scaleY(-.42) skewX(12deg);
  opacity: .18;
  color: var(--liquid-silver);
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
}

.hostile-subtitles {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%) rotate(-1deg);
  display: grid;
  gap: 10px;
  font-family: var(--zen);
  font-size: clamp(16px, 2.4vw, 28px);
}

.hostile-subtitles span,
.subtitle-strip,
.warm-subtitle {
  background: rgba(8,7,13,.82);
  border: 1px solid rgba(216,228,242,.28);
  box-shadow: 6px 6px 0 rgba(255,95,162,.22), -5px -4px 0 rgba(124,203,255,.16);
  padding: 8px 16px;
}

.redacted { animation: redact 3s infinite; }
.tune-prompt { position: absolute; bottom: 30px; right: 38px; color: var(--amber); animation: promptBlink 1.4s infinite; }

.scene-cold {
  background:
    linear-gradient(90deg, rgba(124,203,255,.18) 0 1px, transparent 1px 10vw),
    radial-gradient(circle at 18% 20%, rgba(216,228,242,.25), transparent 28%),
    linear-gradient(145deg, #08070D, #111827 52%, #07111d);
}

.chrome-rail {
  position: absolute;
  color: var(--liquid-silver);
  border: 1px solid rgba(216,228,242,.36);
  background: linear-gradient(90deg, rgba(216,228,242,.25), rgba(124,203,255,.08), rgba(8,7,13,.8));
  padding: 12px 24px;
  box-shadow: inset 0 0 22px rgba(216,228,242,.18);
}

.rail-left { left: 0; top: 20%; transform: rotate(-90deg) translate(-20%, -88px); }
.rail-right { right: 0; bottom: 18%; transform: rotate(90deg) translate(12%, -84px); }

.tilt-window {
  position: absolute;
  border: 2px solid rgba(216,228,242,.48);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(216,228,242,.18), rgba(8,7,13,.88) 36%, rgba(124,203,255,.16));
  box-shadow: inset 0 0 34px rgba(124,203,255,.2), 0 28px 80px rgba(0,0,0,.5), 0 0 0 8px rgba(216,228,242,.04);
  backdrop-filter: blur(8px);
}

.window-large { width: min(760px, 72vw); left: 16%; top: 16%; padding: 54px clamp(24px, 5vw, 70px); transform: rotate(-4deg); }
.window-small { width: min(430px, 44vw); right: 11%; bottom: 12%; padding: 28px; transform: rotate(7deg); }
.window-header { position: absolute; inset: 14px 18px auto; display: flex; justify-content: space-between; color: var(--ice-blue); font-size: 12px; }
.window-header b { color: var(--blush); }

h2, .wall-title {
  margin: 0 0 24px;
  font-family: var(--bebas);
  font-size: clamp(50px, 8vw, 132px);
  line-height: .86;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tilt-window h2 { color: var(--ice-blue); text-shadow: 3px 0 var(--violet); }
.tilt-window ul { margin: 0; padding-left: 20px; font: 500 clamp(17px, 2vw, 26px) var(--zen); color: white; }
.tilt-window li { margin: 16px 0; }
.bars { display: flex; gap: 7px; height: 86px; align-items: end; }
.bars i { flex: 1; background: linear-gradient(var(--ice-blue), var(--violet)); animation: barSlam .7s infinite alternate; }
.bars i:nth-child(2) { animation-delay: .1s; height: 55%; }
.bars i:nth-child(3) { animation-delay: .2s; height: 90%; }
.bars i:nth-child(4) { animation-delay: .3s; height: 35%; }
.bars i:nth-child(5) { animation-delay: .4s; height: 70%; }
.warning-tag { display: inline-block; color: var(--chrome-black); background: var(--amber); padding: 5px 8px; }
.cold-strip { position: absolute; left: 22%; bottom: 7%; transform: rotate(1deg); font-family: var(--zen); font-size: clamp(18px, 2.3vw, 32px); }

.scene-tunnel {
  display: grid;
  place-items: center;
  perspective: 900px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,95,162,.28), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(124,203,255,.18), transparent 50%),
    #08070D;
}

.tube-tunnel { position: absolute; inset: 0; transform-style: preserve-3d; }
.ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 2px solid rgba(216,228,242,.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(68deg);
  box-shadow: 0 0 26px rgba(124,203,255,.4), inset 0 0 32px rgba(255,95,162,.18);
  background: conic-gradient(from 20deg, transparent, rgba(255,95,162,.22), transparent, rgba(124,203,255,.28), transparent);
  animation: ringPulse 4s infinite ease-in-out;
}
.ring-1 { width: 28vw; height: 28vw; animation-delay: 0s; }
.ring-2 { width: 44vw; height: 44vw; animation-delay: -.5s; }
.ring-3 { width: 60vw; height: 60vw; animation-delay: -1s; }
.ring-4 { width: 78vw; height: 78vw; animation-delay: -1.5s; }
.ring-5 { width: 98vw; height: 98vw; animation-delay: -2s; }

.buffer-core {
  position: relative;
  width: min(650px, 78vw);
  padding: clamp(30px, 5vw, 62px);
  border-radius: 46px;
  text-align: center;
  border: 1px solid rgba(255,208,181,.42);
  background: radial-gradient(circle at 50% 0, rgba(255,208,181,.24), rgba(8,7,13,.82) 62%);
  box-shadow: 0 0 80px rgba(255,95,162,.22), inset 0 0 38px rgba(216,228,242,.18);
}
.heart-spinner { width: 72px; height: 72px; margin: 0 auto 24px; transform: rotate(45deg); background: var(--blush); border-radius: 16px; box-shadow: 0 0 26px var(--blush); animation: heartBuffer 1.1s infinite; }
.heart-spinner::before, .heart-spinner::after { content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%; background: var(--blush); }
.heart-spinner::before { left: -36px; }
.heart-spinner::after { top: -36px; }
.buffer-core h2 { color: var(--peach); text-shadow: 2px 0 var(--blush); }
.buffer-core p { font: 500 clamp(17px, 2vw, 24px) var(--zen); }
.buffer-core span { color: var(--amber); font-family: var(--chakra); text-transform: uppercase; }
.signal-button {
  border: 1px solid rgba(216,228,242,.55);
  border-radius: 999px;
  padding: 14px 24px;
  color: var(--chrome-black);
  background: linear-gradient(90deg, var(--ice-blue), var(--liquid-silver), var(--peach));
  box-shadow: 0 0 24px rgba(255,208,181,.4);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.caption-fragments span { position: absolute; font: 500 clamp(16px, 2vw, 24px) var(--zen); background: rgba(8,7,13,.72); padding: 8px 14px; border: 1px solid rgba(216,228,242,.24); }
.caption-fragments span:nth-child(1) { left: 14%; top: 22%; transform: rotate(-8deg); }
.caption-fragments span:nth-child(2) { right: 9%; top: 35%; transform: rotate(7deg); }
.caption-fragments span:nth-child(3) { left: 33%; bottom: 14%; transform: rotate(2deg); color: var(--peach); }

.scene-playlist {
  background:
    radial-gradient(circle at 74% 26%, rgba(255,200,87,.24), transparent 18%),
    radial-gradient(circle at 20% 82%, rgba(255,95,162,.18), transparent 28%),
    linear-gradient(135deg, #14111a, #08070D 65%);
}
.wall-title { max-width: 900px; color: var(--liquid-silver); text-shadow: 4px 0 var(--blush), -4px 0 var(--ice-blue); }
.playlist-wall { position: relative; min-height: 68vh; }
.mood {
  position: absolute;
  padding: 24px;
  color: var(--chrome-black);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  transition: filter .25s ease, transform .25s ease;
}
.mood h3 { margin: 0 0 12px; font: 800 18px var(--space); text-transform: uppercase; letter-spacing: .06em; }
.mood p { margin: 0; font: 500 18px var(--zen); }
.mood.tuned { filter: saturate(1.6) brightness(1.1); }
.cassette { left: 10%; top: 6%; width: 360px; min-height: 210px; border-radius: 20px; background: linear-gradient(160deg, var(--liquid-silver), var(--ice-blue)); transform: rotate(-7deg); }
.spools { display: flex; justify-content: space-around; padding: 16px; border: 2px solid rgba(8,7,13,.35); border-radius: 12px; margin-bottom: 15px; }
.spools i { width: 64px; height: 64px; border-radius: 50%; background: repeating-radial-gradient(circle, #08070D 0 4px, transparent 5px 10px), var(--liquid-silver); }
.disc { right: 10%; top: 2%; width: 310px; border-radius: 50%; aspect-ratio: 1; padding: 74px 34px 30px; text-align: center; background: conic-gradient(var(--ice-blue), var(--peach), var(--violet), var(--amber), var(--ice-blue)); transform: rotate(11deg); }
.disc-face { position: absolute; inset: 36px; border-radius: 50%; border: 24px solid rgba(255,255,255,.34); box-shadow: inset 0 0 20px rgba(8,7,13,.38); }
.sticky { left: 34%; top: 38%; width: 330px; background: var(--amber); transform: rotate(5deg); }
.mini-screen { right: 22%; bottom: 4%; width: 340px; border-radius: 28px; background: var(--peach); transform: rotate(-5deg); }
.mini-static { height: 100px; border-radius: 18px; margin-bottom: 14px; background: repeating-linear-gradient(90deg, var(--blush) 0 10px, var(--ice-blue) 10px 18px, var(--chrome-black) 18px 25px); animation: miniStatic .5s steps(2) infinite; }
.dangling-charms { position: absolute; inset: 0; pointer-events: none; }
.dangling-charms span { position: absolute; color: var(--peach); font: 800 22px var(--chakra); text-shadow: 0 0 14px var(--blush); animation: charmSwing 3s infinite ease-in-out; }
.dangling-charms span:nth-child(1) { left: 20%; top: 4%; }
.dangling-charms span:nth-child(2) { right: 37%; top: 20%; animation-delay: -.8s; }
.dangling-charms span:nth-child(3) { left: 62%; bottom: 28%; animation-delay: -1.2s; }
.dangling-charms span:nth-child(4) { left: 8%; bottom: 16%; animation-delay: -1.8s; }

.scene-credits {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,208,181,.72), transparent 36%),
    radial-gradient(circle at 65% 15%, rgba(255,95,162,.22), transparent 24%),
    linear-gradient(180deg, #20131d, #08070D);
}
.soft-tv {
  position: relative;
  width: min(960px, 84vw);
  min-height: 62vh;
  border-radius: 54px;
  padding: clamp(32px, 5vw, 70px);
  background: linear-gradient(145deg, rgba(255,208,181,.35), rgba(216,228,242,.2), rgba(8,7,13,.72));
  border: 2px solid rgba(255,208,181,.52);
  box-shadow: 0 0 90px rgba(255,208,181,.42), inset 0 0 60px rgba(255,255,255,.12);
}
.safe-area {
  height: 100%;
  min-height: 46vh;
  border: 1px dashed rgba(255,208,181,.58);
  border-radius: 32px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 34px;
}
.safe-area h2 { color: var(--peach); text-shadow: 3px 0 var(--blush); }
.final-line { max-width: 660px; font: 600 clamp(24px, 4vw, 48px) var(--zen); color: white; margin: 0 0 28px; }
.tiny-credit { color: var(--amber); }
.sticker-rec { position: absolute; right: 34px; top: 28px; color: var(--chrome-black); background: var(--peach); border-radius: 999px; padding: 8px 14px; font: 900 14px var(--chakra); transform: rotate(7deg); }
.warm-subtitle { position: absolute; bottom: 42px; font: 500 clamp(17px, 2vw, 28px) var(--zen); color: var(--peach); }

.retune-target { will-change: transform, filter; }
.retune-target.blush { filter: hue-rotate(18deg) saturate(1.35) brightness(1.08); }
body.tuned .ring { border-color: rgba(255,208,181,.75); box-shadow: 0 0 42px rgba(255,95,162,.55); }
body.tuned .subtitle-strip, body.tuned .hostile-subtitles span { box-shadow: 6px 6px 0 rgba(255,208,181,.25), -5px -4px 0 rgba(255,95,162,.18); }

@keyframes staticDrift { 0% { transform: translate(0,0); } 100% { transform: translate(9px,-6px); } }
@keyframes glareSweep { 0%, 34% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes recPulse { 50% { opacity: .25; transform: scale(.78); } }
@keyframes titleLock { 0% { opacity: 0; letter-spacing: .18em; transform: skewX(18deg); } 45% { opacity: .35; transform: translateX(-18px); } 70% { opacity: .8; transform: translateX(12px); } 100% { opacity: 1; letter-spacing: .02em; transform: none; } }
@keyframes redact { 0%, 45% { color: var(--liquid-silver); background: rgba(8,7,13,.82); } 46%, 62% { color: transparent; background: linear-gradient(90deg, var(--blush) 0 70%, rgba(8,7,13,.9) 70%); } 63%, 100% { color: var(--peach); } }
@keyframes promptBlink { 50% { opacity: .35; } }
@keyframes barSlam { from { height: 18%; } to { height: 100%; } }
@keyframes ringPulse { 50% { transform: translate(-50%, -50%) rotateX(68deg) scale(1.08); filter: hue-rotate(45deg); } }
@keyframes heartBuffer { 50% { transform: rotate(45deg) scale(.78); border-radius: 50%; } }
@keyframes miniStatic { 100% { background-position: 24px 0; } }
@keyframes charmSwing { 50% { transform: rotate(10deg) translateY(12px); } }

@media (max-width: 760px) {
  .remote-strip { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); grid-auto-flow: column; }
  .remote-strip button { width: 45px; height: 45px; }
  .scene { padding: 22px 18px 86px; }
  .hostile-subtitles { width: 84%; bottom: 15%; }
  .window-large, .window-small, .mood { position: relative; inset: auto; width: 100%; transform: rotate(0deg); margin: 18px 0; }
  .scene-cold, .scene-playlist { display: block; }
  .chrome-rail { display: none; }
  .playlist-wall { min-height: auto; }
  .disc { aspect-ratio: auto; border-radius: 28px; padding: 28px; }
  .disc-face { display: none; }
  .caption-fragments span { display: none; }
}