:root {
  --paper: #f2f0e9;
  --ink: #080b0a;
  --green: #22d45b;
  --green-hot: #72ff46;
  --green-text: #087a30;
  --green-faint: rgba(34, 212, 91, .12);
  --red: #ff3b32;
  --line: rgba(8, 11, 10, .36);
  --muted: rgba(8, 11, 10, .66);
  --scan: rgba(8, 11, 10, .035);
  --trace: #087a30;
  --decoded: #bd6200;
  --signal-pulse: 0;
  --signal-tilt: 0deg;
  --signal-nod-x: 0px;
  --signal-nod-y: 0px;
  --signal-scale: 1;
  --signal-glow: 1px;
  --signal-orbit-opacity: .45;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display: "Barlow Condensed", Impact, sans-serif;
  color-scheme: light;
}

body.theme-dark {
  --paper: #080b0a;
  --ink: #f2f0e9;
  --green: #22d45b;
  --green-hot: #72ff46;
  --green-text: #72ff46;
  --green-faint: rgba(34, 212, 91, .15);
  --line: rgba(242, 240, 233, .32);
  --muted: rgba(242, 240, 233, .68);
  --scan: rgba(242, 240, 233, .025);
  --trace: #72ff46;
  --decoded: #ffb400;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); overflow-x: hidden; overflow-y: auto; }
body { margin: 0; min-width: 0; color: var(--ink); background: var(--paper); font-family: var(--mono); overflow-x: hidden; overflow-y: auto !important; transition: color .22s ease, background-color .22s ease; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.skip { position: fixed; top: -4rem; left: 1rem; z-index: 100; background: var(--green-hot); color: #000; padding: .7rem 1rem; }
.skip:focus { top: 1rem; }
.nav-toast { position: fixed; left: 50%; top: 1rem; z-index: 120; transform: translate(-50%,-160%); padding: .55rem .8rem; border: 1px solid var(--ink); color: #080b0a; background: var(--green); font: 700 .58rem var(--mono); letter-spacing: .07em; opacity: 0; transition: transform .18s ease, opacity .18s ease; pointer-events: none; }
.nav-toast.visible { transform: translate(-50%,0); opacity: 1; }

.station-shell { width: 100%; min-height: 100vh; background: var(--paper); border: 1px solid var(--ink); }
.topbar { min-height: 96px; display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: .35rem 1rem; padding: .35rem 1rem 0; border-bottom: 2px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 40; transition: background-color .22s ease; }
.brand { color: var(--ink); text-decoration: none; display: grid; grid-template-columns: 54px auto; grid-template-rows: auto auto; align-items: center; column-gap: .6rem; min-width: 242px; }
.brand img { width: 54px; height: 54px; object-fit: contain; grid-row: 1 / 3; padding: 2px; border-radius: 50%; background: #080b0a; filter: drop-shadow(0 0 6px rgba(34,212,91,.45)); }
.brand span { font: 900 1.58rem/.88 var(--display); letter-spacing: .04em; }
.brand em { color: var(--green); font-style: normal; }
.brand small { font: 600 .56rem/1 var(--mono); letter-spacing: .17em; }
.station-claim { margin: 0; max-width: 220px; padding-left: .65rem; border-left: 3px solid var(--green); font: 600 .46rem/1.45 var(--mono); letter-spacing: .09em; }
.topbar nav { order: 10; width: calc(100% + 2rem); margin: 0 -1rem; display: grid; grid-template-columns: repeat(9,max-content); justify-content: center; border-top: 1px solid var(--line); }
.topbar nav :is(a,button) { min-height: 30px; display: grid; place-items: center; color: var(--ink); text-decoration: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; padding: .35rem .62rem; font: 700 .53rem/1 var(--mono); letter-spacing: .065em; white-space: nowrap; }
.topbar nav :is(a,button):last-child { border-right: 1px solid var(--line); }
.topbar nav :is(a,button):hover { color: var(--green-text); background: var(--green-faint); }
.topbar nav .nav-primary { color: var(--green-text); }
.topbar nav .nav-soon { position: relative; padding-right: 1.75rem; }
.topbar nav .nav-soon::after { content: "SOON"; position: absolute; right: .35rem; top: .22rem; color: var(--muted); font-size: .32rem; letter-spacing: .03em; }
.theme-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; border: 1px solid var(--ink); background: transparent; padding: .35rem .55rem; font-size: .57rem; letter-spacing: .08em; }
.theme-toggle span { color: var(--green-text); font-size: 1rem; line-height: 1; }
.theme-toggle:hover { background: var(--green-faint); }
.air-state { white-space: nowrap; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--ink); padding: .45rem .65rem; font-size: .65rem; }
.air-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); animation: blink 1.5s infinite; }
.air-state b { color: var(--red); }
.air-state span { opacity: .6; }

.hero { position: relative; min-height: 52vh; display: grid; grid-template-columns: minmax(280px, 1.02fr) minmax(330px, .96fr) minmax(380px, 1.12fr); align-items: stretch; border-bottom: 2px solid var(--ink); overflow: hidden; background: var(--paper); }
.hero-copy { padding: clamp(1.5rem, 3vw, 3rem) 1rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem); align-self: center; position: relative; z-index: 4; }
.eyebrow { margin: 0 0 1rem; font-size: .65rem; letter-spacing: .13em; }
.hero-title { margin: 0; font: 900 clamp(3.7rem, 6.7vw, 6.7rem)/.74 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.hero-title span { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); font-size: .79em; letter-spacing: -.02em; }
.hero-line { max-width: 31ch; margin: 1.2rem 0 1.25rem; font: 600 .85rem/1.5 var(--mono); }
.listen-button { display: inline-flex; align-items: center; gap: .8rem; border: 2px solid var(--ink); background: transparent; padding: .75rem 1.05rem; font: 800 .78rem/1 var(--mono); letter-spacing: .09em; box-shadow: 5px 5px 0 var(--green); }
.listen-button:hover, .listen-button[aria-pressed="true"] { background: var(--ink); color: var(--green-hot); transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--green); }
body.theme-dark .listen-button:hover,
body.theme-dark .listen-button[aria-pressed="true"] { background: var(--green); color: #080b0a; border-color: var(--green); box-shadow: none; transform: none; }
.listen-icon { font-size: 1rem; }

.transmission-art { position: relative; min-width: 0; align-self: stretch; display: grid; place-items: center; z-index: 3; }
.transmission-art::before { content: ""; position: absolute; inset: 0 -20%; background: radial-gradient(circle at 51% 53%, rgba(8,11,10,.9) 0 14%, rgba(8,11,10,.56) 25%, rgba(34,212,91,.11) 39%, transparent 63%); }
.transmission-art img { width: min(34vw, 445px); max-width: none; position: relative; z-index: 3; transform: translate3d(var(--signal-nod-x), var(--signal-nod-y), 0) rotate(calc(-2deg + var(--signal-tilt))) scale(var(--signal-scale)); transform-origin: 52% 56%; filter: drop-shadow(0 0 1px rgba(8,11,10,.7)) drop-shadow(0 14px 14px rgba(0,0,0,.12)); will-change: transform; transition: filter 120ms ease; }
body.theme-dark .transmission-art::before { background: radial-gradient(circle at 51% 53%, rgba(34,212,91,.13) 0 16%, rgba(34,212,91,.06) 31%, transparent 64%); }
body[data-playing="true"] .transmission-art img { filter: drop-shadow(0 0 var(--signal-glow) rgba(34,212,91,.58)) drop-shadow(0 18px 18px rgba(0,0,0,.18)); }
.transmission-art p { position: absolute; z-index: 5; left: 4%; bottom: 4%; margin: 0; display: flex; gap: .8rem; font-size: .6rem; letter-spacing: .1em; transform: rotate(-90deg); transform-origin: left bottom; }
.transmission-art p b { color: var(--green-text); }
.orbit { position: absolute; width: 46%; aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 50%; opacity: var(--signal-orbit-opacity); animation: orbit 18s linear infinite; }
.orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.orbit-b { width: 67%; animation-duration: 26s; animation-direction: reverse; }
.orbit-c { width: 83%; animation-duration: 34s; }

/* V9 CRT signal wall: decorative vintage monitor stack behind the skull.
   Painted first inside .transmission-art so rings and skull stay on top. */
:root {
  --crt-energy: 0;
  --crt-case-hi: #c6bda9;
  --crt-case: #a29883;
  --crt-case-lo: #6f675a;
  --crt-bezel: #232019;
  --crt-idle-a: #142a1b;
  --crt-idle-b: #060d08;
  --crt-stack-opacity: .24;
  --crt-stack-hot: .5;
}
body.theme-dark {
  --crt-case-hi: #5b564a;
  --crt-case: #453f36;
  --crt-case-lo: #292520;
  --crt-bezel: #0b0a08;
  --crt-idle-a: #173021;
  --crt-idle-b: #040a06;
  --crt-stack-opacity: .3;
  --crt-stack-hot: .55;
}
.crt-stack { position: absolute; inset: 4% 1% 2%; z-index: 0; pointer-events: none; opacity: var(--crt-stack-opacity); transition: opacity .35s ease; }
body[data-playing="true"] .crt-stack { opacity: var(--crt-stack-hot); }
.crt {
  position: absolute;
  aspect-ratio: 4 / 3;
  background: linear-gradient(158deg, var(--crt-case-hi) 0%, var(--crt-case) 52%, var(--crt-case-lo) 100%);
  border: 1px solid var(--crt-case-lo);
  border-radius: 7% / 9%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 5px rgba(0,0,0,.24), 0 10px 16px rgba(0,0,0,.3);
}
.crt::after { content: ""; position: absolute; left: 14%; right: 26%; bottom: 4.5%; height: 4.5%; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--crt-case-lo) 0 2px, transparent 2px 6px); opacity: .55; }
.crt-screen {
  position: absolute; inset: 9% 9% 15%; display: block;
  border: 3px solid var(--crt-bezel);
  border-radius: 9% / 12%;
  background: radial-gradient(circle at 42% 36%, var(--crt-idle-a) 0%, var(--crt-idle-b) 82%);
  box-shadow: inset 0 0 8px rgba(0,0,0,.65);
  overflow: hidden;
  transition: filter .18s linear, box-shadow .18s ease;
}
.crt-screen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.13), transparent 44%), radial-gradient(circle at 50% 56%, transparent 52%, rgba(0,0,0,.48) 100%); }
.crt-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); opacity: .45; }
/* Staggered pyramid: small rear set, two middle sets, three larger lower sets. */
.crt-6 { left: 39%; bottom: 58%; width: 17%; transform: rotate(.9deg); }
.crt-4 { left: 15%; bottom: 35%; width: 21%; transform: rotate(1.7deg); }
.crt-5 { left: 61%; bottom: 37%; width: 20%; transform: rotate(-1.9deg); }
.crt-1 { left: 5%;  bottom: 8%;  width: 26%; transform: rotate(-2.4deg); }
.crt-2 { left: 34%; bottom: 2%;  width: 30%; transform: rotate(1.1deg); }
.crt-3 { left: 67%; bottom: 9%;  width: 25%; transform: rotate(-1.2deg); }
/* Restrained analog palette, applied only while the stream is hot. */
.crt-g { --crt-a: #3ef07a; --crt-b: #0f7a38; --crt-c: #062b14; --crt-glow: rgba(34,212,91,.5); }
.crt-a { --crt-a: #ffc35c; --crt-b: #a8650a; --crt-c: #2e1a03; --crt-glow: rgba(255,180,0,.42); }
.crt-r { --crt-a: #ff7a4d; --crt-b: #b23a12; --crt-c: #330e02; --crt-glow: rgba(255,90,42,.4); }
.crt-c { --crt-a: #4fe0cf; --crt-b: #127f78; --crt-c: #042726; --crt-glow: rgba(38,198,176,.4); }
body[data-playing="true"] .crt-screen {
  background: radial-gradient(circle at 42% 36%, var(--crt-a) 0%, var(--crt-b) 46%, var(--crt-c) 100%);
  filter: brightness(calc(.8 + var(--crt-energy) * .45)) saturate(calc(1 + var(--crt-energy) * .2));
  box-shadow: 0 0 calc(3px + var(--crt-energy) * 9px) var(--crt-glow), inset 0 0 8px rgba(0,0,0,.55);
}
body[data-playing="true"] .crt-screen::after { animation: crt-scan 6s linear infinite; }
@keyframes crt-scan { to { background-position: 0 6px; } }

/* V10: contained analog static layer inside every CRT screen.
   CSS-only: high-frequency crossed gradient grain, a tracking band, one tearing
   band. No images, no JS noise.
   V12: analog-style motion. The layer itself never scales or jumps; a slow
   continuous linear drift shifts the grain tile via background-position while
   a low-amplitude 10-step opacity flicker reads as phosphor shimmer instead of
   dropped frames. */
.crt-static {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  opacity: .14;
  background:
    /* horizontal tearing band: one displaced bright/dark streak pair */
    repeating-linear-gradient(0deg, transparent 0 55%, rgba(255,255,255,.22) 55% 57%, rgba(0,0,0,.24) 57% 59%, transparent 59% 100%),
    /* slow vertical tracking band */
    linear-gradient(180deg, transparent 0 38%, rgba(255,255,255,.1) 44%, transparent 52% 100%),
    /* high-frequency analog grain: crossed 2px / 3px period tile noise */
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 2px, rgba(0,0,0,.15) 2px 3px, transparent 3px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px, rgba(0,0,0,.12) 3px 4px, transparent 4px 5px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.06) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 6%, transparent 7%);
  mix-blend-mode: screen;
  animation: crt-noise-drift 3.2s linear infinite, crt-noise-flicker 1.6s steps(10) infinite;
  will-change: background-position, filter;
}
body[data-playing="true"] .crt-static {
  opacity: calc(.22 + var(--crt-energy) * .2);
  animation-duration: 2.6s, 1.4s;
}
@keyframes crt-noise-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 4px, 0 3px, 3px 5px, -4px 3px, 5px 5px, 2px 2px, -2px -2px; }
}
@keyframes crt-noise-flicker {
  0%   { filter: brightness(1); }
  12%  { filter: brightness(.93); }
  25%  { filter: brightness(.97); }
  37%  { filter: brightness(.88); }
  50%  { filter: brightness(.95); }
  62%  { filter: brightness(.9); }
  75%  { filter: brightness(.98); }
  87%  { filter: brightness(.92); }
  100% { filter: brightness(1); }
}

/* V11: coherent signal trace that sweeps through the stack in order.
   Per-monitor --crt-signal-delay creates the handoff. Each monitor decodes
   a different stage of the same broadcast: six distinct CSS-only waveform
   silhouettes, one per screen, so the wall reads as hardware stages rather
   than six copies of one squiggle. */
.crt-signal {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  opacity: .08;
  background: linear-gradient(180deg,
    transparent 20%,
    var(--crt-a, #3ef07a) 50%,
    transparent 80%);
  animation: crt-trace 10s linear infinite;
  animation-delay: var(--crt-signal-delay, 0s);
  mix-blend-mode: screen;
  will-change: transform;
}
/* crt-6 (top): narrow carrier spike / clean pulse. */
.crt-6 .crt-signal {
  clip-path: polygon(
    0% 50%, 30% 50%, 38% 48%, 44% 34%, 50% 14%, 56% 34%, 62% 48%,
    70% 50%, 100% 50%,
    100% 54%, 70% 54%, 62% 56%, 56% 66%, 50% 82%, 44% 66%, 38% 56%,
    30% 54%, 0% 54%
  );
}
/* crt-4 (middle-left): stepped / square-wave decoder. */
.crt-4 .crt-signal {
  clip-path: polygon(
    0% 62%, 10% 62%, 10% 38%, 24% 38%, 24% 62%, 38% 62%, 38% 38%,
    52% 38%, 52% 62%, 66% 62%, 66% 38%, 80% 38%, 80% 62%, 100% 62%,
    100% 68%, 74% 68%, 74% 44%, 60% 44%, 60% 68%, 46% 68%, 46% 44%,
    32% 44%, 32% 68%, 18% 68%, 18% 44%, 0% 44%
  );
}
/* crt-5 (middle-right): asymmetric broken peaks. */
.crt-5 .crt-signal {
  clip-path: polygon(
    0% 54%, 8% 40%, 14% 58%, 22% 30%, 27% 52%, 34% 44%, 40% 22%,
    45% 56%, 54% 48%, 62% 34%, 66% 50%, 76% 42%, 84% 60%, 92% 46%, 100% 52%,
    100% 58%, 92% 54%, 84% 68%, 76% 50%, 66% 58%, 62% 44%, 54% 58%,
    45% 66%, 40% 34%, 34% 54%, 27% 62%, 22% 42%, 14% 68%, 8% 50%, 0% 60%
  );
}
/* crt-1 (lower-left): broad rolling waveform. */
.crt-1 .crt-signal {
  clip-path: polygon(
    0% 50%, 8% 42%, 18% 36%, 30% 34%, 42% 38%, 52% 46%, 60% 54%,
    70% 60%, 82% 62%, 92% 58%, 100% 52%,
    100% 58%, 92% 64%, 82% 68%, 70% 66%, 60% 60%, 52% 52%, 42% 46%,
    30% 42%, 18% 44%, 8% 50%, 0% 56%
  );
}
/* crt-2 (lower-center): double-pulse / heartbeat. */
.crt-2 .crt-signal {
  clip-path: polygon(
    0% 52%, 12% 52%, 17% 44%, 22% 30%, 26% 46%, 30% 52%, 40% 52%,
    45% 42%, 50% 26%, 54% 44%, 58% 52%, 72% 52%, 78% 46%, 84% 36%,
    89% 48%, 93% 52%, 100% 52%,
    100% 57%, 93% 57%, 89% 56%, 84% 64%, 78% 56%, 72% 57%, 58% 57%,
    54% 60%, 50% 74%, 45% 60%, 40% 57%, 30% 57%, 26% 58%, 22% 70%,
    17% 58%, 12% 57%, 0% 57%
  );
}
/* crt-3 (lower-right): decaying tail / compressed transmission. */
.crt-3 .crt-signal {
  clip-path: polygon(
    0% 34%, 6% 26%, 12% 44%, 18% 52%, 26% 42%, 34% 50%, 44% 46%,
    54% 51%, 66% 48%, 78% 50%, 90% 49%, 100% 50%,
    100% 54%, 90% 55%, 78% 53%, 66% 55%, 54% 52%, 44% 56%, 34% 58%,
    26% 64%, 18% 60%, 12% 72%, 6% 78%, 0% 66%
  );
}
body[data-playing="true"] .crt-signal {
  opacity: calc(.35 + var(--crt-energy) * .6);
  animation-duration: 4.6s;
}
@keyframes crt-trace {
  0%   { transform: translate3d(-110%, 0, 0); }
  100% { transform: translate3d(110%, 0, 0); }
}
/* Ordered sweep: top -> middle-left -> middle-right -> lower-left -> lower-center -> lower-right */
.crt-6 { --crt-signal-delay: 0s; }
.crt-4 { --crt-signal-delay: .55s; }
.crt-5 { --crt-signal-delay: 1.1s; }
.crt-1 { --crt-signal-delay: 1.65s; }
.crt-2 { --crt-signal-delay: 2.2s; }
.crt-3 { --crt-signal-delay: 2.75s; }

@media (prefers-reduced-motion: reduce) {
  .crt-static, .crt-signal { animation: none; }
  body[data-playing="true"] .crt-signal { opacity: .55; }
  body[data-playing="true"] .crt-static { opacity: .24; }
  .transmission-art img { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1) !important; transition: none; }
}

.player {
  min-width: 0;
  width: calc(100% - 1.4rem);
  margin: .7rem;
  padding: .72rem .85rem .55rem 1rem;
  color: var(--ink);
  background: transparent;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  align-self: center;
  position: relative;
  z-index: 5;
  transition: color .22s ease;
}
.player::before { content: ""; position: absolute; left: 0; top: .72rem; bottom: .55rem; width: 3px; background: var(--green); }
.player-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 .38rem; border-bottom: 1px solid var(--line); font-size: .57rem; letter-spacing: .12em; }
.player-header div { display: flex; gap: .7rem; }
.player-header i { color: var(--green-text); font-style: normal; }
.player-header > b { color: var(--green-text); font-weight: 600; }
.track-head { display: grid; grid-template-columns: 46px 1fr; gap: .65rem; align-items: center; margin-top: .52rem; }
.track-index { width: 46px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green-text); font: 800 .94rem var(--display); background: var(--green-faint); }
.player h2 { margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 2.12em; padding-bottom: .08em; font: 900 clamp(1.6rem, 2.35vw, 2.55rem)/1.02 var(--display); letter-spacing: .015em; overflow-wrap: anywhere; }
.player h2[data-title-size="medium"] { font-size: clamp(1.5rem, 2.05vw, 2.25rem); }
.player h2[data-title-size="long"] { font-size: clamp(1.35rem, 1.75vw, 1.95rem); line-height: 1.06; }
.artist { margin: .2rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .57rem; letter-spacing: .11em; opacity: .65; }
.genre { margin: 0 0 .1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green-text); font-size: .49rem; letter-spacing: .1em; }
.blurb { margin: .52rem 0 .38rem; display: block; overflow-x: hidden; overflow-y: auto; max-height: 7.4em; min-height: 2.8em; max-width: 68ch; padding-right: .2rem; color: var(--muted); font-size: .61rem; line-height: 1.48; overflow-wrap: break-word; scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
.visualizer { border-top: 1px solid var(--line); padding: .24rem 0 .12rem; }
.viz-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; color: var(--muted); font-size: .42rem; letter-spacing: .09em; }
.viz-head label { display: flex; align-items: center; gap: .35rem; }
#vizMode { min-height: 24px; border: 0; border-bottom: 1px solid var(--green); border-radius: 0; padding: .1rem 1.2rem .1rem .2rem; color: var(--ink); background: var(--paper); font: 600 .45rem var(--mono); letter-spacing: .05em; }
#vizMode:disabled { opacity: .58; cursor: not-allowed; }
.signal-trace { position: relative; width: 100%; height: 58px; display: flex; align-items: end; justify-content: center; gap: 3px; overflow: hidden; }
.signal-trace .bar { display: block; flex: 1 1 0; max-width: 8px; min-width: 2px; height: 7px; background: var(--green-text); opacity: .58; transform-origin: bottom; }
#vizCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
#miniViz[data-mode="scope"] .bar, #miniViz[data-mode="waterfall"] .bar { display: none; }
#miniViz[data-mode="scope"] #vizCanvas, #miniViz[data-mode="waterfall"] #vizCanvas { display: block; }
.transport { display: grid; grid-template-columns: 38px 34px minmax(0,1fr) 38px; gap: .5rem; align-items: center; margin: .4rem 0 .2rem; font-size: .58rem; }
.transport-meta { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; font: 700 .45rem/1 var(--mono); letter-spacing: .08em; }
.transport-state { min-width: 92px; border: 1px solid var(--line); padding: .28rem .4rem .22rem; color: var(--muted); background: transparent; white-space: nowrap; }
.transport-state[data-state="playing"], .transport-state[data-state="intro"] { color: #080b0a; border-color: var(--green); background: var(--green); }
.transport-state[data-state="loading"], .transport-state[data-state="reconnecting"], .transport-state[data-state="stalled"], .transport-state[data-state="offline"], .transport-state[data-state="error"] { color: var(--ink); border-color: var(--ink); background: var(--green-faint); }
.volume-control { min-width: 128px; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--muted); }
.volume-slider { display: flex; align-items: center; gap: .4rem; }
.volume-control input { width: 94px; height: 18px; margin: 0; accent-color: var(--green); cursor: pointer; }
.mute-toggle { width: 22px; min-width: 22px; max-width: 22px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer; }
.mute-toggle:hover { color: var(--green-text); background: var(--green-faint); }
.mute-toggle:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.mute-toggle .mute-icon { width: 14px; height: 14px; fill: currentColor; display: block; }
.mute-toggle .mute-icon .mute-slash { visibility: hidden; }
.mute-toggle[aria-pressed="true"] { color: #080b0a; background: var(--green); border-color: var(--green); }
.mute-toggle[aria-pressed="true"] .mute-icon .mute-waves { visibility: hidden; }
.mute-toggle[aria-pressed="true"] .mute-icon .mute-slash { visibility: visible; }
body.theme-dark .mute-toggle { color: var(--ink); }
body.theme-dark .mute-toggle[aria-pressed="true"] { color: #080b0a; background: var(--green); border-color: var(--green); }
.play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.play svg { width: 19px; height: 19px; fill: currentColor; }
.play[aria-pressed="true"] { color: var(--green-hot); }
body.theme-dark .play { background: transparent; color: var(--ink); border-color: var(--ink); }
body.theme-dark .play[aria-pressed="true"] { background: var(--green); color: #080b0a; border-color: var(--green); }
.progress-track { width: 100%; height: 7px; overflow: hidden; border: 1px solid var(--line); background: var(--green-faint); }
#npProgress { display: block; width: 0; height: 100%; background: var(--green); transition: width .35s linear; }
.video-action { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .72rem; border-top: 2px solid var(--ink); color: #fff; background: var(--red); text-decoration: none; font-family: var(--display); font-weight: 900; letter-spacing: .075em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); animation: video-signal-in .28s ease-out both; }
.video-action[hidden] { display: none; }
.video-action:hover { color: #fff; background: #d92520; }
.video-action:focus-visible { outline-color: #fff; outline-offset: -4px; }
.video-action-main { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; }
.video-action-main b { font-size: .72rem; transform: translateY(-.02em); }
.video-action-meta { padding-left: .7rem; border-left: 1px solid rgba(255,255,255,.55); font: 700 .5rem var(--mono); letter-spacing: .12em; }
@keyframes video-signal-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.player-actions { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--line); }
.player-actions button { min-width: 0; border: 0; border-right: 1px solid var(--line); color: var(--ink); background: transparent; padding: .42rem .15rem .28rem; font-size: .45rem; letter-spacing: .035em; }
.player-actions button:last-child { border-right: 0; }
.player-actions button:hover, .player-actions button[aria-pressed="true"] { color: var(--green-text); background: var(--green-faint); }

.broadcast-strip { min-height: 29vh; display: grid; grid-template-columns: 1fr 1fr 1.08fr 1.08fr; border-bottom: 2px solid var(--ink); }
.feed { min-width: 0; padding: .6rem; border-right: 1px solid var(--ink); overflow: hidden; transition: background-color .18s ease, outline-color .18s ease; }
.feed.nav-pulse, #tip-jar.nav-pulse { background: var(--green-faint); outline: 2px solid var(--green); outline-offset: -2px; }
.feed:last-child { border-right: 0; }
.feed header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; border-bottom: 2px solid var(--ink); padding-bottom: .35rem; }
.feed h2 { margin: 0; font: 800 1.05rem/1 var(--display); letter-spacing: .02em; }
.feed header span { font-size: .52rem; letter-spacing: .09em; }
.feed ol { list-style: none; margin: .35rem 0 0; padding: 0; }
.recent li { border-bottom: 1px solid var(--line); }
.recent li > div { display: grid; grid-template-columns: 40px 1fr auto; gap: .5rem; align-items: center; width: 100%; padding: .34rem 0; text-align: left; font-size: .62rem; cursor: default; }
.recent time { opacity: .55; }
.recent small { opacity: .48; font-size: .5rem; }
.bumps li { display: grid; grid-template-columns: 28px 1fr 32%; gap: .45rem; align-items: center; padding: .38rem 0; border-bottom: 1px solid var(--line); font-size: .61rem; }
.bumps i { font: 800 .8rem var(--display); color: var(--green-text); }
meter { width: 100%; height: 7px; accent-color: var(--green); }
.hot { color: var(--red); }
.terminal pre { margin: .55rem 0 0; font: 500 .62rem/1.5 var(--mono); white-space: pre-wrap; }
.terminal pre span { color: var(--green); animation: blink .8s infinite; }
.signal-card { display: grid; grid-template-columns: 58px 1fr; gap: .65rem; margin-top: .55rem; padding: .55rem; background: var(--paper); color: var(--ink); border: 1px solid var(--green); }
.mini-art { width: 58px; aspect-ratio: 1; display: grid; place-items: center; color: var(--green-text); border: 1px solid var(--green); font: 900 1.2rem var(--display); }
.signal-card b { display: block; font: 800 .9rem var(--display); }
.signal-card small { color: var(--green-text); font-size: .48rem; }
.signal-card p { margin: .25rem 0 0; font-size: .56rem; line-height: 1.35; }
.transmit { width: 100%; margin-top: .35rem; padding: .45rem; border: 1px solid var(--ink); background: var(--green); font: 800 .62rem var(--mono); }

.dynamic-list { min-width: 0; margin-top: .35rem; }
.dynamic-list, .vibe-list { scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
.feed-empty { padding: .55rem 0; color: var(--muted); font-size: .55rem; }
.feed-state { min-height: 74px; display: grid; place-items: center; padding: .65rem; border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: .55rem; letter-spacing: .07em; }
.feed-state-error { color: var(--red); border-color: color-mix(in srgb, var(--red) 58%, transparent); }
.feed-state-empty { color: var(--muted); }
#receiver-player[data-state="error"] { border-color: var(--red); }
#receiver-player[data-state="error"] .player-header > b { color: var(--red); }
#receiver-player[data-state="empty"] .track-index,
#receiver-player[data-state="error"] .track-index { border-style: dashed; }
.no-art { width: 100%; height: 100%; display: grid; place-items: center; color: var(--green-text); font: 900 1.15rem var(--display); }
#listenerCount { display: inline-block; max-width: 7ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.track-item { display: grid; grid-template-columns: 36px 28px minmax(0,1fr); gap: .42rem; align-items: center; min-height: 35px; border-bottom: 1px solid var(--line); font-size: .6rem; }
.track-time { opacity: .55; }
.track-icon { width: 26px; height: 26px; overflow: hidden; border: 1px solid var(--green); }
.track-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-details, .bump-info { min-width: 0; }
.track-name, .bump-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.track-artist, .bump-meta { color: var(--muted); font-size: .48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-waveform { display: none; }
.bump-item { display: grid; grid-template-columns: 28px 28px minmax(0,1fr); gap: .42rem; align-items: center; min-height: 35px; border-bottom: 1px solid var(--line); font-size: .6rem; }
.bump-rank { color: var(--green-text); font: 800 .8rem var(--display); }
.bump-count-badge { margin-right: .3rem; color: var(--green-text); font-weight: 700; }
.track-index { overflow: hidden; }
.track-index img { width: 100%; height: 100%; object-fit: cover; display: block; }
.signal-row { width: 100%; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: .6rem; align-items: center; margin-top: .55rem; padding: .5rem; border: 1px solid var(--green); color: var(--ink); background: transparent; text-align: left; }
.signal-art { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; color: var(--green-text); border: 1px solid var(--green); font: 900 1.1rem var(--display); }
.signal-art img { width: 100%; height: 100%; object-fit: cover; }
.signal-copy { min-width: 0; }
.signal-song { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .88rem var(--display); }
.signal-meta { color: var(--green-text); font-size: .47rem; }
.signal-desc { margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .52rem; }
.signal-tag { color: var(--green-text); font-size: .5rem; }

footer { min-height: 42px; display: grid; grid-template-columns: 1.1fr 2fr auto; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--paper); font-size: .52rem; letter-spacing: .08em; }
footer span { text-align: center; }
footer small { opacity: .55; text-align: right; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem .8rem; }
.footer-links a, .footer-links button { color: var(--ink); text-decoration: none; }
.footer-links button { border: 0; border-bottom: 1px solid transparent; padding: 0; background: transparent; font: inherit; letter-spacing: inherit; cursor: pointer; }
.footer-links a:hover, .footer-links button:hover { color: var(--green-text); }

/* Existing production support UI retained for compatibility. */
.seo-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.install-helper { position: fixed; left: 50%; bottom: 56px; z-index: 190; display: none; width: min(520px, calc(100vw - 24px)); grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .65rem; border: 2px solid var(--ink); padding: .7rem; color: var(--ink); background: var(--paper); box-shadow: 6px 6px 0 rgba(34,212,91,.45); transform: translateX(-50%); }
.install-helper.show { display: grid; }
.install-helper button { border: 1px solid var(--ink); border-radius: 0; padding: .45rem .6rem; color: var(--ink); background: transparent; font: 800 .62rem var(--mono); cursor: pointer; }
.install-helper .install-copy { min-width: 0; border: 0; padding: 0; text-align: left; }
.install-helper .install-copy b, .install-helper .install-copy span { display: block; }
.install-helper .install-copy b { font: 900 1.05rem/1 var(--display); }
.install-helper .install-copy span { margin-top: .2rem; color: var(--muted); font-size: .56rem; line-height: 1.3; }
.install-helper .primary { color: #080b0a; background: var(--green); }
.install-helper .close { border: 0; padding: .15rem .3rem; font-size: 1rem; }
.install-helper .install-copy .ios-note, .install-helper .install-copy .ios-browser-note { display: none; }
.install-helper.ios .install-copy .android-note { display: none; }
.install-helper.ios:not(.unsupported) .install-copy .ios-note { display: block; }
.install-helper.ios.unsupported .install-copy .ios-browser-note { display: block; }
.install-helper.ios .primary { display: none; }
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 1rem; background: rgba(0,0,0,.78); }
.modal-overlay.open { display: grid; }
.modal { width: min(680px, 96vw); max-height: 88vh; overflow: auto; border: 2px solid var(--green); padding: 1rem; color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 rgba(34,212,91,.28); }
.modal h3 { margin: 0 0 .7rem; font: 900 2rem/.9 var(--display); }
.modal h4 { margin: .75rem 0 .2rem; font: 800 1rem var(--display); }
.modal p { font: 500 .72rem/1.5 var(--mono); }
.modal input, .modal select, .modal textarea { width: 100%; border: 1px solid var(--ink); border-radius: 0; padding: .55rem; color: var(--ink); background: var(--paper); font: 500 .7rem var(--mono); }
.modal textarea { min-height: 110px; resize: vertical; }
.modal label, .suggest-label { display: block; margin-top: .65rem; font-size: .62rem; letter-spacing: .08em; }
.modal-btns, .suggest-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.modal button { border: 1px solid var(--ink); border-radius: 0; padding: .5rem .7rem; color: var(--ink); background: transparent; font: 700 .62rem var(--mono); }
.modal button:hover { color: #080b0a; background: var(--green); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.about-card, .signal-detail-block { border: 1px solid var(--line); padding: .7rem; }
.mood-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; margin-top: .35rem; }
.mood-chip.selected { color: #080b0a; background: var(--green); }
.top-bumps-board { margin-top: .7rem; }
.top-bumps-modal-row { display: grid; grid-template-columns: 34px 34px minmax(0,1fr) auto; gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.top-bumps-modal-art { width: 32px; height: 32px; overflow: hidden; }
.top-bumps-modal-art img { width: 100%; height: 100%; object-fit: cover; }
.lyrics-body { white-space: pre-wrap; font: 500 .72rem/1.55 var(--mono); }
/* UNSCRAMBLE — scrambled 90s cable decoder. Keep the motion and chromatic
   damage here; the runtime remains authoritative for lyric text and timing. */
.lyric-signal-overlay { background: #020202; z-index: 1800; }
.lyric-signal-modal { position: relative; width: min(1120px, 96vw); max-width: 1120px; height: min(720px, 92vh); padding: 0; overflow: hidden; border: 5px solid #050505; background: #050505; color: #eaffdf; box-shadow: 0 0 0 2px #242424, 0 24px 100px rgba(0,0,0,.92); }
.lyric-signal-screen { position: absolute; inset: 18px; min-height: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.14); border-radius: 10px; background: #0a0b08; color: #eaffdf; }
.lyric-signal-screen::before { content: ""; position: absolute; inset: -8%; background: linear-gradient(102deg,#aaff32 0%,#f6ffe8 16%,#59ff22 28%,#0b0b0b 38%,#ff2c59 48%,#fff24d 62%,#3924d6 78%,#f8fff1 91%,#070707 100%); opacity: .82; filter: blur(1.3px) contrast(1.24) saturate(1.16); transform: skewX(-7deg) scale(1.08); animation: lyricScrambleShift 3.7s steps(7,end) infinite; }
.lyric-signal-screen::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,rgba(0,0,0,.05) 1px 5px),linear-gradient(90deg,rgba(0,0,0,.74),transparent 14%,transparent 84%,rgba(0,0,0,.78)); mix-blend-mode: overlay; }
.lyric-signal-tear { position: absolute; z-index: 2; left: -5%; right: -5%; height: 18px; opacity: .86; background: #050505; box-shadow: 0 7px 0 rgba(94,45,255,.75),0 15px 0 rgba(255,235,72,.58); animation: lyricTrackingTear 5.2s linear infinite; }
.lyric-signal-tear.t1 { top: 22%; animation-delay: -1.4s; }
.lyric-signal-tear.t2 { top: 56%; height: 24px; animation-delay: -3.1s; }
.lyric-signal-curve { position: absolute; z-index: 1; top: 0; bottom: 0; left: 63%; width: 58px; opacity: .72; background: #f9fff0; filter: blur(2px); transform: skewX(-12deg); box-shadow: 34px 0 0 #050505,58px 0 0 rgba(120,65,255,.8); animation: lyricCableWarp 4.4s ease-in-out infinite; }
.lyric-signal-ui { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 78px 56px 104px; text-align: center; }
.lyric-signal-top { position: absolute; left: 34px; right: 34px; top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 12px/1.1 var(--mono); letter-spacing: 1.7px; color: #8cff5f; text-shadow: 0 0 8px rgba(140,255,95,.75); }
.lyric-signal-status, .lyric-signal-noauth { padding: 8px 10px; border: 1px solid currentColor; background: rgba(0,0,0,.74); }
.lyric-signal-noauth { color: #ff2f66; text-align: right; }
.lyric-signal-title { margin: 0 0 18px; color: #fff25d; font: 900 clamp(28px,4vw,54px)/.9 var(--display); letter-spacing: .01em; text-transform: uppercase; text-shadow: 4px 4px 0 #050505,0 0 15px rgba(255,242,77,.5); }
.lyric-signal-prev, .lyric-signal-next { min-height: 1.2em; max-width: 88%; color: rgba(238,255,225,.54); font: 800 clamp(14px,1.55vw,22px)/1.15 Arial,sans-serif; text-shadow: 2px 2px 0 #050505; overflow-wrap: anywhere; }
.lyric-signal-prev:not(:empty)::before { content: "PREV // "; color: #8cff5f; }
.lyric-signal-next:not(:empty)::before { content: "NEXT // "; color: #8cff5f; }
.lyric-signal-line { position: relative; min-height: 1.05em; max-width: min(900px,84vw); margin: 18px 0; padding: .06em .16em .1em; color: #fffdea; background: rgba(0,0,0,.32); font: 900 clamp(36px,6.2vw,78px)/1.02 'Arial Black',Impact,var(--display); letter-spacing: -.02em; text-transform: uppercase; text-shadow: 4px 4px 0 #050505,0 0 11px rgba(255,255,235,.58); -webkit-text-stroke: 1px rgba(0,0,0,.94); overflow-wrap: anywhere; isolation: isolate; }
.lyric-signal-line::before, .lyric-signal-line::after { content: attr(data-text); position: absolute; z-index: -1; inset: .06em .16em .1em; opacity: .46; pointer-events: none; mix-blend-mode: screen; animation: lyricChromaticJitter 1.1s steps(2,end) infinite; }
.lyric-signal-line::before { color: #75ff43; transform: translate(-5px,-2px); clip-path: inset(0 0 48% 0); }
.lyric-signal-line::after { color: #ff2f66; transform: translate(6px,3px); clip-path: inset(51% 0 0 0); animation-delay: -.37s; }
.lyric-signal-line.lyric-signal-hit { animation: lyricLineLock .42s steps(3,end) 1; }
.lyric-signal-line.lyric-signal-repeat { border-left: 10px solid #8cff5f; box-shadow: 0 0 24px rgba(140,255,95,.56); }
.lyric-signal-bottom { position: absolute; z-index: 5; left: 42px; right: 42px; bottom: 42px; margin: 0; }
.lyric-signal-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; color: #eaffdf; font: 700 12px/1 var(--mono); text-shadow: 2px 2px 0 #050505; }
.lyric-signal-meta span:last-child { text-align: right; }
.lyric-signal-rail { height: 14px; margin: 0; overflow: hidden; border: 1px solid #f8fff1; border-radius: 999px; background: rgba(0,0,0,.72); }
.lyric-signal-fill { display: block; height: 100%; background: linear-gradient(90deg,#82ff45,#f8fff1,#ff2f66,#fff25d,#5d2dff); box-shadow: 0 0 18px rgba(130,255,69,.75); }
.lyric-signal-sync { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: #eaffdf; font: 700 12px/1 var(--mono); text-shadow: 2px 2px 0 #050505; }
.lyric-signal-sync span { min-width: 168px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.72); text-align: center; }
.lyric-signal-sync button, .lyric-signal-modal .lyric-signal-close { border: 1px solid #8cff5f; color: #8cff5f; background: rgba(0,0,0,.78); }
.lyric-signal-sync button:hover, .lyric-signal-modal .lyric-signal-close:hover { color: #050505; background: #8cff5f; }
.lyric-signal-close { position: absolute; z-index: 6; right: 22px; bottom: 14px; margin: 0; font: 900 14px/1 var(--display); }
.lyric-signal-empty .lyric-signal-line { color: #ff2f66; font-size: clamp(34px,6vw,72px); }
.lyric-signal-empty .lyric-signal-line::before, .lyric-signal-empty .lyric-signal-line::after { display: none; }
@keyframes lyricScrambleShift { 0%{transform:translateX(-3%) skewX(-7deg) scale(1.08)} 20%{transform:translateX(2%) skewX(-11deg) scale(1.11)} 43%{transform:translateX(-6%) skewX(-5deg) scale(1.1)} 61%{transform:translateX(5%) skewX(-13deg) scale(1.13)} 100%{transform:translateX(-3%) skewX(-7deg) scale(1.08)} }
@keyframes lyricTrackingTear { from{transform:translateY(-140px)} to{transform:translateY(760px)} }
@keyframes lyricCableWarp { 0%,100%{left:61%;opacity:.58} 50%{left:69%;opacity:.86} }
@keyframes lyricChromaticJitter { 0%,100%{margin-left:0;filter:blur(0)} 33%{margin-left:-3px;filter:blur(.5px)} 66%{margin-left:4px;filter:blur(0)} }
@keyframes lyricLineLock { 0%{transform:translateX(-12px) skewX(-4deg);filter:contrast(1.8) brightness(1.6)} 32%{transform:translateX(9px) skewX(3deg);clip-path:inset(38% 0 14% 0)} 68%{transform:translateX(-3px);clip-path:inset(0)} 100%{transform:none;filter:none;clip-path:inset(0)} }
@media (max-width: 760px) {
  .lyric-signal-modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .lyric-signal-screen { inset: 0; border-radius: 0; }
  .lyric-signal-ui { padding: 82px 16px 150px; }
  .lyric-signal-top { left: 12px; right: 12px; top: 12px; font-size: 10px; }
  .lyric-signal-noauth { display: none; }
  .lyric-signal-title { margin-bottom: 14px; font-size: clamp(24px,8vw,34px); }
  .lyric-signal-prev, .lyric-signal-next { max-width: 96%; font-size: clamp(12px,4vw,17px); }
  .lyric-signal-line { max-width: 94vw; margin: 13px 0; font-size: clamp(32px,12vw,58px); }
  .lyric-signal-bottom { left: 16px; right: 16px; bottom: 54px; }
  .lyric-signal-meta { font-size: 10px; }
  .lyric-signal-sync { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 10px; }
  .lyric-signal-sync span { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .lyric-signal-sync button { width: 100%; }
  .lyric-signal-close { right: 16px; bottom: 10px; }
  .modal { max-height: 92vh; padding: .8rem; }
  .lyric-signal-overlay { padding: 0; }
  .lyric-signal-modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 0; }
  .lyric-signal-line { min-height: 1.18em; }
  .about-grid { grid-template-columns: 1fr; }
  .mood-grid { grid-template-columns: repeat(2,1fr); }
  .top-bumps-modal-row { grid-template-columns: 28px 30px minmax(0,1fr); }
  .top-bumps-modal-count { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .video-action { animation: none; }
  .lyric-signal-screen::before, .lyric-signal-tear, .lyric-signal-curve, .lyric-signal-line::before, .lyric-signal-line::after { animation: none; }
}


@keyframes blink { 50% { opacity: .25; } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* V11 desktop-only center tightening: modestly larger transmission-core
   column share, slightly leaner outer columns, ~5.6% larger skull, and
   reduced dead padding between copy -> art -> player. Tablet/mobile rules
   below are unchanged. */
@media (min-width: 1081px) {
  .hero { grid-template-columns: minmax(280px, .98fr) minmax(340px, 1.04fr) minmax(380px, 1.08fr); }
  .transmission-art img { width: min(35vw, 470px); }
  .hero-copy { padding-right: .5rem; }
  .player { margin-left: .35rem; width: calc(100% - 1.05rem); }
}

@media (min-width: 1081px) and (min-height: 760px) {
  html, body { height: 100%; overflow: hidden !important; }
  .station-shell {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: 96px minmax(0, 1fr) clamp(258px, 31vh, 282px) 40px;
    overflow: hidden;
  }
  .topbar { min-height: 0; position: relative; }
  .hero { min-height: 0; }
  .broadcast-strip { min-height: 0; }
  .feed { min-height: 0; }
  .dynamic-list { max-height: 220px; overflow-y: auto; padding-right: .25rem; }
  .vibe-list { max-height: 178px; overflow-y: auto; padding-right: .25rem; }
  footer { min-height: 0; }
}

@media (max-width: 1080px) {
  .topbar { gap: .5rem; }
  .brand { min-width: 200px; }
  .station-claim { max-width: 150px; font-size: .4rem; }
  .air-state span { display: none; }
  .topbar nav :is(a,button) { padding-inline: .38rem; font-size: .49rem; }
  .hero { grid-template-columns: .88fr .95fr 1.15fr; }
  .hero-title { font-size: clamp(3.15rem, 6.2vw, 4.9rem); }
  .player { width: calc(100% - .6rem); margin-left: 0; }
  .broadcast-strip { grid-template-columns: 1fr 1fr; }
  .feed { border-bottom: 1px solid var(--ink); }
}

@media (max-width: 760px) {
  .topbar { position: relative; flex-wrap: wrap; gap: .35rem .8rem; padding: .45rem .65rem; }
  .brand { min-width: 0; grid-template-columns: 42px auto; }
  .brand img { width: 42px; height: 42px; }
  .brand span { font-size: 1.25rem; }
  .brand small { font-size: .46rem; }
  .station-claim { order: 2; width: 100%; max-width: none; padding: .32rem .2rem; border-left: 0; border-block: 1px solid var(--line); text-align: center; font-size: .42rem; line-height: 1.3; }
  .air-state { margin-left: auto; padding: .32rem .45rem; }
  .air-state span { display: none; }
  .theme-toggle { padding: .3rem .4rem; }
  .theme-toggle b { display: inline; font-size: .48rem; }
  .topbar nav { order: 3; width: calc(100% + 1.3rem); margin: 0 -.65rem; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
  .topbar nav :is(a,button) { min-height: 34px; text-align: center; padding: .42rem .12rem; font-size: .43rem; line-height: 1.15; white-space: normal; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .topbar nav .nav-soon { padding-right: .12rem; }
  .topbar nav .nav-soon::after { position: static; margin-left: .2rem; }
  .hero { display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
  .hero-copy { padding: 1.25rem 1rem .25rem; text-align: center; }
  .eyebrow { font-size: .52rem; margin-bottom: .65rem; }
  .hero-title { font-size: clamp(3.9rem, 20vw, 5.45rem); line-height: .76; }
  .hero-line { margin: .9rem auto 1rem; }
  .transmission-art { min-height: 255px; order: 2; margin: -.7rem 0 -1.65rem; }
  .transmission-art img { width: min(88vw, 365px); }
  .transmission-art p { display: none; }
  .crt-stack { inset: 10% 4% 6%; transform: scale(.9); opacity: calc(var(--crt-stack-opacity) * .8); }
  body[data-playing="true"] .crt-stack { opacity: calc(var(--crt-stack-hot) * .72); }
  .crt-3, .crt-4, .crt-6 { display: none; }
  .orbit { width: 42%; }
  .orbit-b { width: 61%; }
  .orbit-c { width: 76%; }
  .player { order: 3; width: calc(100% - 1.3rem); margin: 0 .65rem .65rem; padding: .65rem .65rem .45rem .82rem; min-height: 0; }
  .player h2 { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .video-action { min-height: 46px; padding: .55rem .65rem; }
  .video-action-main { font-size: .82rem; }
  .viz-head { align-items: center; }
  .player-actions { grid-template-columns: repeat(3,1fr); }
  .player-actions button:nth-child(4), .player-actions button:nth-child(5) { grid-column: span 1; }
  .broadcast-strip { grid-template-columns: 1fr; }
  .feed { border-right: 0; min-height: 190px; padding: .8rem; }
  footer { grid-template-columns: 1fr; text-align: center; padding: .8rem; }
  footer small { text-align: center; }
  .install-helper { bottom: 10px; width: calc(100vw - 20px); grid-template-columns: minmax(0,1fr) auto; gap: .45rem; padding: .55rem; box-shadow: 4px 4px 0 rgba(34,212,91,.45); }
  .install-helper .primary { grid-column: 2; grid-row: 2; }
  .install-helper.ios .primary { display: none; }
  .install-helper .close { grid-column: 2; grid-row: 1; }
  .install-helper .install-copy { grid-row: 1 / span 2; }
}

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