:root {
  --glow: #3a5cff;
  --silver-hi: #e9ecf1;
  --silver: #b9bec8;
  --silver-lo: #7d838f;
  --accent: #ff2d8a;
  --osd: #5dff6a;
  --vfd: #64e4ff;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  background: #040818;
  color: #cfd3dc;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 16px 16px 0;
  overflow-x: hidden;
}

/* ---------- Late-2000s bedroom at night ----------
   Decorations hug the TV (positioned from the page center) so they frame it at any width;
   on narrow screens they slide off-screen behind it. */
.backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

.wall {
  position: absolute;
  inset: 0 0 24% 0;
  background:
    /* faint paint roller texture */
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 3px, transparent 3px 7px),
    radial-gradient(120% 90% at 50% 30%, #3a3159 0%, #2a2343 45%, #1b1630 100%);
}

/* Multicolor string lights draped along the top of the wall */
.string-lights {
  position: absolute;
  top: 0;
  left: -2%;
  right: -2%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 1%;
}
.string-lights::before {
  /* the wire, sagging in two swags */
  content: "";
  position: absolute;
  inset: -40px 0 18px 0;
  border-bottom: 2px solid rgba(20,40,20,.9);
  border-radius: 0 0 50% 50% / 0 0 60% 60%;
}
.string-lights i {
  position: relative;
  /* follow the sag: lower in the middle */
  top: calc(18px + 30px * sin(calc(var(--i) / 21 * 180deg)));
  width: 9px;
  height: 14px;
  border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%;
  --c: #ffd27a;
  background: var(--c);
  box-shadow: 0 0 8px 2px var(--c), 0 0 24px 6px color-mix(in srgb, var(--c) 45%, transparent);
  animation: twinkle 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.73s);
}
.string-lights i:nth-child(4n+1) { --c: #ff6fb5; }
.string-lights i:nth-child(4n+2) { --c: #6fd8ff; }
.string-lights i:nth-child(4n+3) { --c: #9dff7a; }
.string-lights i::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 6px;
  border-radius: 1px;
  background: #1d3320;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Window with half-open blinds and the night outside */
.window {
  position: absolute;
  top: 14%;
  left: calc(50% - 470px - 290px);
  width: 250px;
  height: 300px;
  padding: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5d5a75, #46435c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 10px 30px rgba(0,0,0,.5), 0 0 60px rgba(120,160,255,.15);
}
.sky {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 55%, #dfe8ff, transparent),
    radial-gradient(1px 1px at 85% 65%, #fff, transparent),
    radial-gradient(1px 1px at 30% 80%, #cfd8ff, transparent),
    linear-gradient(180deg, #0a1030 0%, #1a2a5e 70%, #2d3f7a 100%);
}
.moon {
  position: absolute;
  top: 18%;
  right: 20%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe8, #d9dcc8);
  box-shadow: 0 0 20px 6px rgba(230,235,255,.4);
}
.blinds {
  position: absolute;
  inset: 10px;
  background: repeating-linear-gradient(180deg, rgba(120,116,150,.95) 0 9px, rgba(60,56,80,.95) 9px 10px, transparent 10px 15px);
  box-shadow: inset 0 6px 0 rgba(100,96,128,.95);
}
.blinds::after {
  /* the pull cord */
  content: "";
  position: absolute;
  right: 14px;
  top: 0;
  width: 1px;
  height: 75%;
  background: rgba(230,230,240,.7);
}
/* moonlight through the slats, falling across the wall */
.moonbeam {
  position: absolute;
  top: 14%;
  left: calc(50% - 470px - 290px);
  width: 250px;
  height: 120%;
  background: repeating-linear-gradient(180deg, rgba(140,170,255,.07) 0 5px, transparent 5px 15px);
  transform: skewX(18deg) translateX(120px);
  transform-origin: top left;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

/* Posters (made-up bands), tacked up with tape */
.poster {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.55);
  filter: brightness(.8) saturate(1.1);
}
.poster::before, .poster::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 42px;
  height: 16px;
  background: rgba(240,235,215,.55);
}
.poster::before { left: -12px; transform: rotate(-35deg); }
.poster::after { right: -12px; transform: rotate(35deg); }
.p1 {
  top: 13%;
  left: calc(50% + 480px);
  width: 180px;
  height: 250px;
  transform: rotate(3deg);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,45,138,.55), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 35%, rgba(255,255,255,.07) 0 8deg, transparent 8deg 16deg),
    #120814;
  color: #fff;
}
.p1 b { font: italic 900 30px/0.95 var(--sans); letter-spacing: -.03em; text-shadow: 0 0 10px #ff2d8a, 0 0 22px #ff2d8a; }
.p1 .p1-kicker { font: 700 9px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: #ff9ad2; }
.p1 small { margin-top: 8px; font: 700 11px/1 var(--sans); letter-spacing: .3em; color: #9ffcff; }
.p2 {
  top: 20%;
  left: calc(50% + 700px);
  width: 160px;
  height: 210px;
  transform: rotate(-4deg);
  justify-content: flex-end;
  padding-bottom: 18px;
  background: linear-gradient(180deg, #ffb347 0%, #ff6a88 45%, #6a3093 100%);
  color: #fff;
  overflow: hidden;
}
.p2-sun {
  position: absolute;
  top: 26%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, #fff2a8 0 8px, transparent 8px 12px);
}
.p2 b { position: relative; font: italic 900 28px/1 var(--sans); letter-spacing: -.04em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.p2 small { position: relative; font: 700 10px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; }
.p3 {
  top: 52%;
  left: calc(50% + 620px);
  width: 150px;
  height: 110px;
  transform: rotate(-2deg);
  background: #e9e4d4;
  color: #1a1a1a;
}
.p3 b { font: 900 34px/1 "Courier New", monospace; letter-spacing: .12em; }
.p3 small { font: 700 9px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #8a1c1c; }

/* Nightstand + lava lamp */
.nightstand {
  position: absolute;
  bottom: 18%;
  left: calc(50% - 470px - 250px);
  width: 170px;
  height: 120px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5a3d28 0 10px, #3e2a1c 10px, #2c1d13 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 14px 24px rgba(0,0,0,.5);
}
.nightstand::after {
  /* drawer + knob */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 30px;
  height: 46px;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 2px;
  background: radial-gradient(circle at 50% 50%, #c9a46a 3px, transparent 4px);
}
.lavalamp {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 54px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lava-cap {
  width: 22px;
  height: 22px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #8d939e, #e6e9ef, #7d838f);
}
.lava-glass {
  position: relative;
  width: 46px;
  height: 120px;
  overflow: hidden;
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(255,80,40,.55), rgba(255,170,60,.85) 50%, rgba(255,80,40,.55));
}
.blob {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe08a, #ff5a1f 70%);
  filter: blur(.5px);
  animation: lava 14s ease-in-out infinite;
}
.b1 { width: 22px; height: 26px; margin-left: -11px; bottom: -6px; }
.b2 { width: 14px; height: 16px; margin-left: -4px; bottom: 30px; animation-duration: 19s; animation-delay: -7s; }
.b3 { width: 18px; height: 14px; margin-left: -12px; bottom: 60px; animation-duration: 23s; animation-delay: -12s; }
@keyframes lava {
  0%, 100% { transform: translateY(0) scale(1, 1); border-radius: 50%; }
  35% { transform: translateY(-60px) scale(.85, 1.2); border-radius: 45% 55% 50% 50%; }
  60% { transform: translateY(-85px) scale(1.1, .9); border-radius: 55% 45% 55% 45%; }
}
.lava-base {
  width: 54px;
  height: 34px;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  background: linear-gradient(90deg, #6d737e, #e0e4ea 45%, #6d737e);
}
.lavalamp::after {
  /* warm glow the lamp throws on the wall */
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,40,.22), transparent 65%);
  z-index: -1;
}

/* CD tower */
.cdtower {
  position: absolute;
  bottom: 18%;
  left: calc(50% + 520px);
  width: 64px;
  height: 300px;
  padding: 10px 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1b1b1f, #3a3a42 50%, #1b1b1f);
  box-shadow: 0 14px 24px rgba(0,0,0,.55);
}
.cds {
  height: 100%;
  background: repeating-linear-gradient(180deg,
    #c0392b 0 8px, #111 8px 9px, #2e86de 9px 17px, #111 17px 18px,
    #f1c40f 18px 26px, #111 26px 27px, #ecf0f1 27px 35px, #111 35px 36px,
    #8e44ad 36px 44px, #111 44px 45px, #16a085 45px 53px, #111 53px 54px,
    #e67e22 54px 62px, #111 62px 63px, #34495e 63px 71px, #111 71px 72px);
  filter: brightness(.7);
}

.baseboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 14px;
  background: linear-gradient(180deg, #4a4363, #2a2440);
  box-shadow: 0 -1px 0 rgba(255,255,255,.08);
}
/* Carpet, lit by the TV */
.carpet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.035) 1px, transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(circle at 75% 70%, rgba(0,0,0,.12) 1px, transparent 1.5px) 0 0 / 4px 4px,
    linear-gradient(180deg, #4a3f55 0%, #3a3045 50%, #2a2233 100%);
}
.carpet::before {
  /* the TV's light pooling on the carpet */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 80% at 50% 0%, rgba(110,150,255,.45), transparent 75%);
}
.carpet::after {
  /* the groove brightens that pool on the beat */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(35% 70% at 50% 0%, rgba(170,200,255,.5), transparent 75%);
  opacity: var(--pulse, 0);
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%);
}

/* ---------- Tempo groove ----------
   app.js drives these layers frame by frame from a generated, never-repeating energy curve
   (opacity/transform only, so it stays cheap on the GPU). */
.beat { position: absolute; inset: 0; }
.beat > div { position: absolute; inset: 0; opacity: 0; }
.kick {
  background:
    radial-gradient(42% 38% at 50% 40%, rgba(120,170,255,.38), transparent 70%),
    radial-gradient(70% 30% at 50% 74%, rgba(160,230,255,.22), transparent 70%);
}
.bar {
  background:
    radial-gradient(30% 45% at 18% 45%, rgba(255,60,170,.32), transparent 70%),
    radial-gradient(30% 45% at 82% 45%, rgba(60,220,255,.32), transparent 70%);
}
.drop { background: radial-gradient(80% 60% at 50% 45%, rgba(255,255,255,.35), transparent 70%); }
.kick, .bar { will-change: opacity, transform; }
.drop.on { animation: flash 1.4s ease-out both; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Glossy Web 2.0 header ---------- */
.topbar {
  position: relative;
  z-index: 2;
  width: min(880px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 10px 48px 10px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.02) 51%, rgba(255,255,255,.1) 100%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
}
.site-logo {
  font: italic 900 clamp(20px, 3.4vw, 28px)/1 var(--sans);
  letter-spacing: -.05em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 12px rgba(160,230,255,.6);
}
.site-logo b {
  background: linear-gradient(180deg, #ffc1de, var(--accent) 55%, #b5005a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.tld { font-size: .6em; font-style: normal; color: #9ffcff; letter-spacing: 0; }
.beta {
  padding: 3px 6px;
  border-radius: 4px;
  font: 800 10px/1 var(--sans);
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, #ffb347, #ff7a00 55%, #e05a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.4);
  transform: rotate(-6deg);
}
.tagline {
  margin-left: auto;
  font: 600 12px/1 var(--sans);
  letter-spacing: .08em;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
/* Starburst sticker */
.burst {
  position: absolute;
  right: -14px;
  top: -18px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font: italic 900 12px/1 var(--sans);
  color: #6a1a00;
  background: radial-gradient(circle at 40% 35%, #fff6a8, #ffd21f 55%, #ffae00);
  clip-path: polygon(50% 0%, 61% 13%, 78% 6%, 80% 23%, 97% 25%, 89% 41%, 100% 55%, 85% 64%, 90% 81%, 72% 81%, 65% 97%, 50% 87%, 35% 97%, 28% 81%, 10% 81%, 15% 64%, 0% 55%, 11% 41%, 3% 25%, 20% 23%, 22% 6%, 39% 13%);
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 22px 0 18px;
  text-align: center;
  font: 11px/1.4 Verdana, Tahoma, sans-serif;
  color: rgba(200,215,255,.6);
}
.footer p { margin: 8px 0 0; }
.footer a { color: #9ffcff; }
.made-by { font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.footer a:focus-visible { outline: 2px solid #9ffcff; outline-offset: 2px; }
.badges { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
/* Classic 80x15 web buttons */
.badge {
  display: inline-flex;
  width: 80px;
  height: 15px;
  border: 1px solid #000;
  font: 700 8px/13px Verdana, Tahoma, sans-serif;
  letter-spacing: .03em;
}
.badge b { flex: 0 0 34px; text-align: center; color: #fff; background: #555; border-right: 1px solid #000; }
.badge i { flex: 1; text-align: center; font-style: normal; color: #000; background: linear-gradient(180deg, #fff, #c8c8c8); }
.b2 b { background: #2c5fb0; }
.b3 b { background: #ff7a00; }
.b4 b { background: #d6006b; }

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 38%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 72%);
  animation: wallflicker 6s ease-in-out infinite;
}
@keyframes wallflicker {
  0%, 100% { opacity: .7; filter: hue-rotate(0deg); }
  30% { opacity: .95; filter: hue-rotate(70deg); }
  65% { opacity: .55; filter: hue-rotate(-60deg); }
}

.room {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- TV cabinet: silver flat-front CRT ---------- */
.tv {
  position: relative;
  width: 100%;
  padding: 3% 3% 0;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(180deg, var(--silver-hi) 0%, var(--silver) 18%, #a3a9b4 60%, var(--silver-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -4px 10px rgba(0,0,0,.35),
    inset 4px 0 8px rgba(255,255,255,.25),
    inset -4px 0 8px rgba(0,0,0,.2),
    0 40px 70px rgba(0,0,0,.75),
    0 0 140px color-mix(in srgb, var(--glow) 22%, transparent);
  z-index: 1;
}

/* Dark recessed frame around the tube. */
.surround {
  padding: 2.6%;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a2c31, #111215 30%, #0b0c0e 100%);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 1px 0 rgba(255,255,255,.7);
}

.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #020203;
  border-radius: 4% / 5.5%;
  isolation: isolate;
  box-shadow: 0 0 0 2px #000;
  animation: poweron 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes poweron {
  0% { transform: scale(1, .004); filter: brightness(6); }
  35% { transform: scale(1, .004); filter: brightness(6); }
  60% { transform: scale(1, 1); filter: brightness(2.2); }
  100% { transform: none; filter: none; }
}

/* 16:9 band centered on the 4:3 tube. */
.picture {
  position: absolute;
  left: 0;
  right: 0;
  top: 12.5%;
  height: 75%;
  overflow: hidden;
  filter: blur(.6px) saturate(1.35) contrast(1.1) brightness(1.05);
  animation: jitter 6s steps(1) infinite;
}
/* Fade to black over a video's last seconds (it leaves early, before YouTube's end cards). */
.picture { transition: opacity .3s; }
.picture.fadeout { opacity: 0; transition: opacity 2.5s ease-in; }

/* Rendered small (so YouTube streams low-res) then scaled + slightly cropped by app.js. */
.sd {
  position: absolute;
  left: 0;
  top: 0;
  width: 356px;
  height: 200px;
  transform-origin: 0 0;
}
.sd iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }

@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  41% { transform: translate(.6px, 0); }
  42% { transform: translate(0, 0); }
  77% { transform: translate(-.5px, .3px); }
  78% { transform: translate(0, 0); }
}

.shield { position: absolute; inset: 0; z-index: 2; }

/* ---------- Station ident (covers loads/transitions) ---------- */
.ident {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 45%, #3b0a5e 0%, #16052a 55%, #050109 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s .35s;
}
.ident.on { opacity: 1; visibility: visible; transition: none; }
.swoosh {
  position: absolute;
  width: 160%;
  height: 40%;
  left: -30%;
  border-radius: 50%;
  border-top: 2px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,45,138,.28), transparent 60%);
  filter: blur(1px);
  animation: swoosh 5s ease-in-out infinite;
}
.s1 { top: 18%; }
.s2 { top: 48%; background: linear-gradient(180deg, rgba(80,140,255,.25), transparent 60%); animation-delay: -1.6s; animation-duration: 6s; }
.s3 { top: 70%; background: linear-gradient(180deg, rgba(160,80,255,.22), transparent 60%); animation-delay: -3s; animation-duration: 7s; }
@keyframes swoosh {
  0%, 100% { transform: translateX(-6%) rotate(-6deg); }
  50% { transform: translateX(6%) rotate(4deg); }
}
.ident-logo {
  position: relative;
  font: italic 900 clamp(30px, 8vw, 72px)/1 var(--sans);
  letter-spacing: -.05em;
  color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.4);
  animation: logoin .9s cubic-bezier(.2,1.4,.4,1) both;
}
.ident-logo b {
  background: linear-gradient(180deg, #ffc1de, var(--accent) 55%, #b5005a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ident.on .ident-logo { animation: logoin .9s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes logoin {
  from { transform: scale(.6); opacity: 0; letter-spacing: .2em; }
  to { transform: none; opacity: 1; }
}
.ident-sub {
  position: relative;
  font: 700 clamp(9px, 1.8vw, 15px)/1 var(--sans);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.static.on { opacity: 1; transition: none; }

/* ---------- CRT look ---------- */
.crt {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,0,0,.04) 0 1px, rgba(0,255,0,.035) 1px 2px, rgba(0,80,255,.04) 2px 3px),
    radial-gradient(115% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);
  animation: flicker .1s infinite;
}
@keyframes flicker { 0% { opacity: .95; } 50% { opacity: 1; } 100% { opacity: .96; } }
.crt::before {
  /* rolling refresh bar */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.035), transparent);
  animation: roll 7s linear infinite;
}
@keyframes roll { from { top: -20%; } to { top: 110%; } }

/* Curved glass: edge shading + room reflection. */
.glass {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(0,0,0,.85), inset 0 0 6px rgba(0,0,0,.9);
  background:
    radial-gradient(70% 45% at 30% 8%, rgba(255,255,255,.1), transparent 70%),
    linear-gradient(165deg, rgba(255,255,255,.07) 0%, transparent 32%);
}

/* ---------- On-screen graphics, inside the 4:3 title-safe area ---------- */
.safe {
  position: absolute;
  inset: 12.5% 7%;
  z-index: 5;
  pointer-events: none;
  text-shadow: 1px 0 0 rgba(255,0,60,.35), -1px 0 0 rgba(0,180,255,.35);
}
.bug {
  position: absolute;
  top: 6%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: .6;
  mix-blend-mode: screen;
}
.bug-logo {
  font: italic 900 clamp(13px, 2.8vw, 24px)/1 var(--sans);
  letter-spacing: -.05em;
  color: #fff;
}
.bug-logo b { color: var(--accent); }
.bug-genre {
  margin-top: 2px;
  font: 700 clamp(6px, 1.1vw, 9px)/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #fff;
}
.bug-watching {
  margin-top: 3px;
  font: 700 clamp(6px, 1vw, 8px)/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.bug-watching::before { content: "\25CF  "; color: #ff3b5c; }
.bug-watching[hidden] { display: none; }
.couch .bug-watching { font-size: .7vw; }
.bug-via {
  margin-top: 3px;
  font: 600 clamp(6px, 1vw, 8px)/1 var(--sans);
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
}
.osd {
  position: absolute;
  top: 6%;
  left: 0;
  font: clamp(18px, 4vw, 34px)/1 "VT323", monospace;
  color: var(--osd);
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(93,255,106,.6);
  opacity: 0;
  transition: opacity .3s;
}
.osd.on { opacity: 1; transition: none; }
.sound-hint {
  position: absolute;
  bottom: 6%;
  right: 0;
  font: clamp(13px, 2.4vw, 20px)/1 "VT323", monospace;
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: 4px 8px;
  animation: blink 1.2s steps(2) infinite;
}
.sound-hint[hidden] { display: none; }
@keyframes blink { 50% { opacity: .3; } }

.chyron {
  position: absolute;
  left: 0;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: #fff;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .45s, transform .45s;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 1px 0 0 rgba(255,0,60,.3), -1px 0 0 rgba(0,180,255,.3);
}
.chyron.on { opacity: 1; transform: none; }
.chy-artist { font-weight: 700; font-size: clamp(12px, 2.6vw, 22px); line-height: 1.1; }
.chy-title { font-size: clamp(11px, 2.3vw, 19px); line-height: 1.15; }
.chy-title::before { content: "\201C"; }
.chy-title::after { content: "\201D"; }
.chy-meta {
  margin-top: 3px;
  font-size: clamp(7px, 1.3vw, 11px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.lowerbar {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3.5%;
  height: 6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 clamp(8px, 1.6vw, 13px)/1 var(--sans);
  color: #e9ecf3;
  letter-spacing: .06em;
  pointer-events: none;
}
.block {
  flex: none;
  padding: .35em .6em;
  color: #fff;
  background: linear-gradient(180deg, #ff5aa5, var(--accent) 50%, #c4005c);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-weight: 800;
  letter-spacing: .14em;
}
.crawl {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.crawl-track { display: inline-flex; animation: crawl 30s linear infinite; will-change: transform; }
.crawl-track span { flex: none; padding-right: 3em; }
.crawl-track span::after { content: "\2605"; margin-left: 3em; }
@keyframes crawl { to { transform: translateX(-50%); } }
.clock { flex: none; font-variant-numeric: tabular-nums; }

/* ---------- Front panel ---------- */
.front {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4%;
  padding: 2.4% 1% 2.8%;
}
.grille {
  height: clamp(18px, 4vw, 34px);
  border-radius: 6px;
  background:
    radial-gradient(circle, #2b2e35 38%, transparent 42%) 0 0 / 6px 6px,
    linear-gradient(180deg, #a2a8b3, #c5cad3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.6);
}
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.brand {
  font: 900 clamp(13px, 2.2vw, 19px)/1 var(--sans);
  letter-spacing: .45em;
  margin-right: -.45em;
  color: #3d424b;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.model {
  font: 600 clamp(7px, 1.1vw, 9px)/1 var(--sans);
  letter-spacing: .25em;
  color: #545a65;
  white-space: nowrap;
}
.power-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4dff7a;
  box-shadow: 0 0 5px #4dff7a, 0 0 12px rgba(77,255,122,.6);
}
.pbtn {
  width: 22px;
  height: 9px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 5px;
  background: linear-gradient(180deg, #d9dde4, #8d939e);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4);
}
.feet {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8px;
  display: flex;
  justify-content: space-between;
}
.feet span {
  width: 14%;
  height: 8px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #60656f, #2b2e34);
}

/* ---------- Stand + cable box ---------- */
.stand {
  width: 112%;
  max-width: calc(100vw - 8px);
  padding: 16px 6% 26px;
  margin-top: 6px;
  border-radius: 4px 4px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 12%, transparent 13%),
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 35%, transparent 50%),
    linear-gradient(180deg, #23252c 0%, #0b0c10 40%, #050507 100%);
  border-top: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 40px rgba(110,150,255,.25), 0 30px 60px rgba(0,0,0,.6);
  display: flex;
  justify-content: center;
}
.cablebox {
  width: min(560px, 100%);
  padding: 12px 16px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2c2e35 0%, #0e0f12 45%, #050506 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 20px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.box-top { display: flex; align-items: center; gap: 12px; }
.box-brand {
  font: italic 700 12px/1 var(--sans);
  color: #8b909c;
  letter-spacing: .02em;
}
.box-brand b { color: #c8ccd6; }
.box-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fa3ff;
  box-shadow: 0 0 6px #4fa3ff;
}
.vfd {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 3px;
  background: #02080a;
  box-shadow: inset 0 0 8px rgba(0,0,0,.9);
  font: 20px/1 "VT323", monospace;
  color: var(--vfd);
  text-shadow: 0 0 6px rgba(100,228,255,.75);
  letter-spacing: .08em;
}
.vfd-genre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; }
.vfd-clock { font-variant-numeric: tabular-nums; }

.genres {
  display: flex;
  gap: 8px;
  overflow-x: auto;              /* one row of channel buttons; scrolls sideways when there are many */
  padding: 2px 2px 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3a3d45 transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.genres::-webkit-scrollbar { height: 6px; }
.genres::-webkit-scrollbar-thumb { background: #3a3d45; border-radius: 3px; }
.genres button {
  flex: none;
  white-space: nowrap;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 4px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b9bec9;
  background: linear-gradient(180deg, #3a3d45 0%, #1c1e23 55%, #121317 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.7);
  cursor: pointer;
  text-shadow: 0 -1px 0 #000;
}
.genres button:hover { color: #fff; }
.genres button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.genres button:focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; }
.genres button[aria-pressed="true"] {
  color: var(--vfd);
  text-shadow: 0 0 6px rgba(100,228,255,.8);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 0 0 1px rgba(100,228,255,.35);
  background: linear-gradient(180deg, #121317, #1c1e23);
}

/* ---------- Floor reflection under the set (works in every browser) ---------- */
.room::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 112%;
  height: 140px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(45% 100% at 50% 0%, rgba(150,180,255,.55), transparent 75%),
    linear-gradient(180deg, rgba(200,210,235,.4) 0%, rgba(130,150,210,.14) 35%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  filter: blur(3px);
}

/* ---------- Commercial breaks ---------- */
.breaks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.spot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 10% 9%;
  text-align: center;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(9px, 2vw, 17px);
  opacity: 0;
  visibility: hidden;
}
.spot.on { opacity: 1; visibility: visible; animation: spotin .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes spotin { from { transform: scale(1.08); filter: brightness(2); } to { transform: none; filter: none; } }

.spot-head { font-weight: 800; letter-spacing: .3em; font-size: .9em; color: rgba(255,255,255,.85); }
.spot-big { font: italic 900 2.4em/1.05 var(--sans); letter-spacing: -.02em; }
.spot-big b { color: #ffe14d; }
.spot-huge {
  font: italic 900 5em/1 var(--sans);
  background: linear-gradient(180deg, #fff6a8, #ffd21f 50%, #ff9500);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.4));
}
.spot-sub { font-weight: 700; font-size: 1.1em; letter-spacing: .08em; color: rgba(255,255,255,.9); }
.spot-kicker { font-weight: 700; letter-spacing: .5em; text-transform: uppercase; font-size: .95em; }
.fine { font-size: .55em; color: rgba(255,255,255,.65); max-width: 30em; }
.neon {
  font-style: normal;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--accent), 0 0 28px var(--accent);
  animation: buzz 2.5s steps(1) infinite;
}
@keyframes buzz { 0%, 100% { opacity: 1; } 91% { opacity: .55; } 93% { opacity: 1; } 95% { opacity: .7; } }

.spot-brb { background: radial-gradient(80% 70% at 50% 45%, #3b0a5e, #16052a 55%, #050109); }
.spot-promo { background: radial-gradient(90% 80% at 50% 40%, #0d3d8a, #071a4a 50%, #020617); }
.spot-promo::before {
  /* sweeping light beams */
  content: "";
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 10deg, transparent 10deg 20deg);
  animation: spin 18s linear infinite;
}
.spot-promo > * { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

.spot-ringtone, .spot-drink { flex-direction: row; gap: 7%; text-align: left; }
.spot-ringtone { background: linear-gradient(135deg, #ff2d8a, #7a1cff 60%, #1a0b4a); }
.spot-drink { background: linear-gradient(135deg, #00140a, #0a4d1e 55%, #b6ff00); }
.spot-copy { display: flex; flex-direction: column; gap: .5em; align-items: flex-start; }

.phone {
  flex: none;
  width: 5.5em;
  height: 10em;
  padding: .6em .5em;
  border-radius: 1em;
  background: linear-gradient(180deg, #e6e9ef, #9aa1ad);
  box-shadow: inset 0 2px 0 #fff, 0 .5em 1.2em rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: .5em;
  animation: ring .35s ease-in-out infinite;
}
.phone-screen {
  height: 45%;
  border-radius: .3em;
  display: grid;
  place-items: center;
  font-size: 2em;
  color: #0b3d0b;
  background: linear-gradient(180deg, #b8f5a1, #6fd36f);
}
.phone-keys {
  flex: 1;
  border-radius: .3em;
  background: radial-gradient(circle, #505662 30%, transparent 34%) 0 0 / 33.3% 25%;
}
@keyframes ring { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.can {
  flex: none;
  width: 5em;
  height: 9em;
  border-radius: .8em / .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #1a1a1a, #4a4a4a 30%, #111 60%, #2d2d2d);
  box-shadow: inset 0 .4em 0 #b9bec8, inset 0 -.4em 0 #8d939e, 0 .5em 1.2em rgba(0,0,0,.6);
  transform: rotate(-8deg);
}
.can span { font: italic 900 1.3em/1 var(--sans); color: #b6ff00; letter-spacing: -.03em; }
.can i { font: italic 900 3em/1 var(--sans); color: #b6ff00; text-shadow: 0 0 .3em #b6ff00; }

/* Technical difficulties: SMPTE-style color bars + card */
.spot-standby { padding: 0; }
.bars {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0021a5 0 14.28%, #111 14.28% 28.56%, #a400a4 28.56% 42.84%, #111 42.84% 57.12%, #00a4a4 57.12% 71.4%, #111 71.4% 85.68%, #c0c0c0 85.68%) bottom / 100% 25% no-repeat,
    linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 14.28% 28.56%, #00c0c0 28.56% 42.84%, #00c000 42.84% 57.12%, #c000c0 57.12% 71.4%, #c00000 71.4% 85.68%, #0000c0 85.68%) top / 100% 75% no-repeat;
}
.standby-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .6em 1.2em;
  font: 900 1.8em/1 var(--sans);
  letter-spacing: .08em;
  color: #fff;
  background: #000;
  border: 2px solid #fff;
}
.standby-card small { font-size: .42em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* Countdown rank badge */
.rank {
  position: absolute;
  top: 18%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .3em .6em .2em;
  border-radius: 4px;
  font-family: var(--sans);
  background: linear-gradient(180deg, #fff6a8, #ffd21f 50%, #ff9500);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.6);
  color: #4a1500;
  text-shadow: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s, transform .35s cubic-bezier(.2,1.4,.4,1);
}
.rank.on { opacity: 1; transform: none; }
.rank span { font-size: clamp(6px, 1.1vw, 9px); font-weight: 800; letter-spacing: .2em; }
.rank b { font: italic 900 clamp(18px, 4.2vw, 36px)/1 var(--sans); }

/* ---------- Community: request line + guestbook ---------- */
.community {
  position: relative;
  z-index: 2;
  width: min(880px, 100%);
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.community[hidden] { display: none; }
.box {
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0, rgba(255,255,255,.06) 40px, rgba(10,16,50,.75) 41px);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  font: 13px/1.4 Verdana, Tahoma, sans-serif;
  color: #dfe6ff;
}
.box-title {
  margin: 0 0 14px;
  font: italic 900 18px/1 var(--sans);
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 10px rgba(160,230,255,.5);
}
.box-title span { color: #ff86bf; font-style: normal; }
.form { display: grid; gap: 8px; }
.form label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; color: #aab8e8; }
.form input, .form textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #5d6ea8;
  border-radius: 4px;
  font: 13px Verdana, Tahoma, sans-serif;
  color: #111;
  background: linear-gradient(180deg, #e8ecf6, #fff 30%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  resize: vertical;
}
.form input:focus, .form textarea:focus { outline: 2px solid #ff86bf; outline-offset: 1px; }
.form button {
  justify-self: start;
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid #6d0033;
  border-radius: 999px;
  font: 700 12px/1 var(--sans);
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(180deg, #ff86bf 0%, var(--accent) 50%, #d1006a 51%, #ff3d96 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35);
  cursor: pointer;
}
.form button:disabled { filter: grayscale(.8); cursor: progress; }
.form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.form-status { min-height: 1.2em; margin: 0; font-size: 12px; color: #9ffcff; }
.form-status.err { color: #ff9a9a; }
.list-title { margin: 14px 0 6px; font: 700 11px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: #aab8e8; }
.queue, .entries { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.queue { counter-reset: q; }
.queue li, .entries li {
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow-wrap: anywhere;
}
.queue li { counter-increment: q; }
.queue li::before { content: counter(q) ". "; color: #ff86bf; font-weight: 700; }
.queue li.empty::before { content: none; }
.queue small, .entries small { display: block; font-size: 10px; color: #8794c4; }
.entries b { color: #9ffcff; }
.entries { margin-top: 14px; }
.empty { color: #8794c4; font-style: italic; }

/* Visitor odometer */
.counter { margin: 10px 0 0; }
.odo { display: inline-flex; gap: 1px; vertical-align: middle; }
.odo i {
  width: 12px;
  font: 700 12px/18px "Courier New", monospace;
  font-style: normal;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #000 0%, #333 50%, #000 51%, #222 100%);
  border: 1px solid #555;
}

/* ---------- Power ---------- */
.pbtn:hover { filter: brightness(1.1); }
.pbtn:active { transform: translateY(1px); }
.pbtn:focus-visible { outline: 2px solid var(--vfd); outline-offset: 3px; }
.tv-off .led { background: #ff3b3b; box-shadow: 0 0 5px #ff3b3b, 0 0 12px rgba(255,59,59,.6); }

/* Off: the picture collapses to a line, then a dot, then black. */
.screen.off .picture { animation: tubeoff .3s ease-in forwards; }
@keyframes tubeoff { to { transform: scaleY(.004); filter: brightness(5); } }
.screen.off .safe, .screen.off .lowerbar, .screen.off .ident, .screen.off .breaks,
.screen.off .guide, .screen.off .static { visibility: hidden; }
.screen.off::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  z-index: 6;
  background: #fff;
  box-shadow: 0 0 20px 6px rgba(200,220,255,.9);
  animation: dotoff .9s .25s ease-in both;
}
@keyframes dotoff {
  0% { transform: scaleX(1); opacity: 1; }
  55% { transform: scaleX(.006) scaleY(1.8); opacity: 1; }
  100% { transform: scaleX(.006); opacity: 0; }
}
/* With the set off, only the string lights, lava lamp and window light the room. */
.glow, .beat, .carpet::before, .room::after { transition: opacity .8s; }
.tv-off .glow { animation: none; opacity: 0; }
.tv-off .beat, .tv-off .room::after { opacity: 0; }
.tv-off .carpet::before { opacity: .12; }

/* ---------- Guide channel ---------- */
.guide {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  padding: 8% 6% 6%;
  background: linear-gradient(180deg, #0b1a5c, #081245 60%, #050b2e);
  font-family: var(--sans);
  color: #fff;
}
.guide-on .guide { display: flex; }
.guide-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6em;
  font: italic 900 clamp(12px, 2.6vw, 22px)/1 var(--sans);
  letter-spacing: -.02em;
}
.guide-logo b { color: var(--accent); }
.guide-clock { font-style: normal; font-weight: 700; font-size: .8em; color: #ffe14d; letter-spacing: 0; }
.guide-cols, .guide-row { display: grid; grid-template-columns: 17% 1fr 1fr 1fr; gap: 3px; }
.guide-cols span {
  padding: .45em .5em;
  font: 800 clamp(7px, 1.3vw, 11px)/1 var(--sans);
  letter-spacing: .15em;
  color: #1a1300;
  background: linear-gradient(180deg, #ffe14d, #e0b000);
}
.guide-window {
  flex: 1;
  min-height: 0;
  margin-top: 3px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}
/* Rows are listed twice; scrolling by exactly half loops seamlessly. */
.guide-rows { animation: guidescroll var(--guide-dur, 35s) linear infinite; }
@keyframes guidescroll { to { transform: translateY(-50%); } }
.guide-row { margin-bottom: 3px; }
.guide-row > span {
  min-width: 0;
  padding: .5em .55em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(40,80,200,.5);
  font: 600 clamp(7px, 1.35vw, 12px)/1.25 var(--sans);
}
.guide-row .ch { background: rgba(10,20,70,.9); font-weight: 800; }
.guide-row .ch b { display: block; font-size: 1.35em; color: #ffe14d; }
.guide-row .now { background: rgba(255,45,138,.45); }
.guide-row .tm, .guide-row .a, .guide-row .t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guide-row .tm { font-size: .8em; font-weight: 800; color: #ffe14d; }
.guide-row .a { font-weight: 800; }
.guide-row .t { opacity: .85; }
.guide-foot {
  margin-top: .6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 clamp(8px, 1.5vw, 13px)/1 var(--sans);
  color: #9ffcff;
}

/* ---------- Cable box controls ---------- */
.box-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ctl {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 999px;
  font: 700 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9aa0ab;
  background: linear-gradient(180deg, #2c2e35, #15161a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.7);
  cursor: pointer;
}
.ctl:hover { color: #fff; }
.ctl:focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; }
.ctl[aria-pressed="true"] { color: #ffb86b; text-shadow: 0 0 6px rgba(255,184,107,.7); }
.vfd-sleep { color: #ffb86b; text-shadow: 0 0 6px rgba(255,184,107,.7); }
.vfd-sleep[hidden] { display: none; }

/* ---------- Couch mode: the TV picture fills the screen ---------- */
.couch .room { z-index: 1000; }
.couch .screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}
.couch .picture { top: 0; height: 100%; }
.couch .safe { inset: 6% 5%; }
.couch .lowerbar { left: 5%; right: 5%; bottom: 3%; height: 5%; font-size: 1.15vw; }
.couch .chy-artist { font-size: 2.3vw; }
.couch .chy-title { font-size: 2vw; }
.couch .chy-meta { font-size: .95vw; }
.couch .bug-logo { font-size: 2.2vw; }
.couch .bug-genre { font-size: .8vw; }
.couch .bug-via { font-size: .7vw; }
.couch .osd { font-size: 3vw; }
.couch .sound-hint { font-size: 1.6vw; }
.couch .rank span { font-size: .8vw; }
.couch .rank b { font-size: 3.2vw; }
.couch .spot { font-size: 1.6vw; }
.couch .ident-logo { font-size: 7vw; }
.couch .ident-sub { font-size: 1.4vw; }
.couch .guide { padding: 4% 5%; }
.couch .guide-head { font-size: 2vw; }
.couch .guide-cols span { font-size: 1vw; }
.couch .guide-row > span { font-size: 1.15vw; }
.couch .guide-foot { font-size: 1.2vw; }
.couch.idle, .couch.idle * { cursor: none; }

/* ---------- The room follows the time of day ---------- */
[data-daypart="day"] .sky {
  background:
    radial-gradient(20px 9px at 28% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(28px 11px at 36% 33%, rgba(255,255,255,.85), transparent),
    radial-gradient(24px 9px at 68% 62%, rgba(255,255,255,.8), transparent),
    linear-gradient(180deg, #4aa3ff 0%, #8cc8ff 70%, #c8e6ff 100%);
}
[data-daypart="dawn"] .sky { background: linear-gradient(180deg, #3b4a8f 0%, #c06c84 55%, #f8b195 100%); }
[data-daypart="dusk"] .sky { background: linear-gradient(180deg, #2c2a6b 0%, #8e44ad 45%, #f39c6b 100%); }
[data-daypart="day"] .moon { top: 12%; right: 18%; background: radial-gradient(circle, #fffbe0, #ffd84a 70%); box-shadow: 0 0 30px 12px rgba(255,220,100,.6); }
[data-daypart="dawn"] .moon { top: 68%; right: 55%; background: radial-gradient(circle, #fff1c4, #ff9a4a 70%); box-shadow: 0 0 30px 12px rgba(255,150,80,.5); }
[data-daypart="dusk"] .moon { top: 70%; right: 25%; background: radial-gradient(circle, #ffd0a0, #ff5e3a 70%); box-shadow: 0 0 30px 12px rgba(255,100,60,.5); }

[data-daypart="day"] .wall { background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 3px, transparent 3px 7px), radial-gradient(120% 90% at 50% 30%, #7a6fa3 0%, #615685 45%, #463d66 100%); }
[data-daypart="dawn"] .wall,
[data-daypart="dusk"] .wall { background: repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 3px, transparent 3px 7px), radial-gradient(120% 90% at 50% 30%, #55497a 0%, #41375f 45%, #2b2444 100%); }
[data-daypart="day"] .blinds { background: repeating-linear-gradient(180deg, rgba(230,226,240,.95) 0 9px, rgba(150,145,170,.95) 9px 10px, transparent 10px 15px); }
[data-daypart="day"] .moonbeam { background: repeating-linear-gradient(180deg, rgba(255,230,160,.12) 0 5px, transparent 5px 15px); }
[data-daypart="dawn"] .moonbeam,
[data-daypart="dusk"] .moonbeam { background: repeating-linear-gradient(180deg, rgba(255,170,120,.09) 0 5px, transparent 5px 15px); }
[data-daypart="day"] .vignette { opacity: .5; }
[data-daypart="day"] .carpet { filter: brightness(1.35); }
[data-daypart="day"] .poster { filter: none; }
[data-daypart="day"] .string-lights { opacity: .55; }

/* ---------- Flip phone on the nightstand ---------- */
.flip {
  position: absolute;
  bottom: 100%;
  left: 124px;
  width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-8deg);
  transform-origin: bottom center;
}
.flip-top {
  width: 26px;
  height: 34px;
  padding: 4px 3px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #d4d8e0, #8a909c);
}
.flip-screen {
  height: 18px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: transparent;
  background: #0d1a10;
  transition: background .3s, box-shadow .3s, color .3s;
}
.flip-hinge { width: 22px; height: 4px; border-radius: 2px; background: #5d636e; }
.flip-bottom {
  width: 26px;
  height: 30px;
  border-radius: 2px 2px 6px 6px;
  background:
    radial-gradient(circle, #3a3f48 28%, transparent 32%) 2px 3px / 7px 6px,
    linear-gradient(180deg, #b7bcc6, #7d838f);
}
.flip.lit .flip-screen { color: #0b3d0b; background: radial-gradient(circle, #c8ff9a, #5fd35f); box-shadow: 0 0 14px 4px rgba(150,255,140,.6); }
.flip.buzz { animation: phonebuzz .12s linear 10; }
@keyframes phonebuzz {
  0%, 100% { transform: rotate(-8deg) translateX(0); }
  25% { transform: rotate(-10deg) translateX(-2px); }
  75% { transform: rotate(-6deg) translateX(2px); }
}
.flip-note {
  position: absolute;
  bottom: calc(100% + 84px);
  left: 40px;
  width: 210px;
  padding: 8px 10px;
  border-radius: 10px;
  font: 12px/1.3 Verdana, Tahoma, sans-serif;
  color: #e8ffe0;
  background: rgba(10,14,40,.88);
  border: 1px solid rgba(150,255,140,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.flip-note.on { opacity: 1; transform: none; }
.flip-note b { display: block; margin-bottom: 2px; font-size: 11px; color: #9dff7a; }
.flip-note::after {
  content: "";
  position: absolute;
  left: 84px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid rgba(150,255,140,.5);
  border-bottom: 1px solid rgba(150,255,140,.5);
  transform: rotate(45deg);
}

@media (max-width: 560px) {
  .vfd { font-size: 16px; gap: 8px; }
  .box-brand { display: none; }
  .tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .picture, .crt, .crt::before, .sound-hint, .swoosh, .screen,
  .string-lights i, .blob, .burst, .guide-rows, .flip.buzz,
  .spot.on, .neon, .phone, .spot-promo::before { animation: none; }
  .drop.on { animation: none; }
  .crawl-track { animation-duration: 90s; }
}