:root {  color-scheme: dark;  --room: #030201;  --cabinet: #130c06;  --cabinet-2: #050403;  --glass: #030506;  --glass-lit: #0a1216;  --amber: #f3a321;  --amber-hot: #ffbd42;  --amber-dim: rgba(243, 163, 33, 0.28);  --blue: #31a8ff;  --blue-hot: #78d6ff;  --red: #ff351f;  --cream: #f6ead3;  --muted: #9d8060;  --line: rgba(230, 153, 43, 0.34);  --shadow: rgba(0, 0, 0, 0.72);}* {  box-sizing: border-box;}html {  background: var(--room);}body {  margin: 0;  min-height: 100vh;  background:    radial-gradient(circle at 50% -10%, rgba(255, 160, 43, 0.13), transparent 30rem),    radial-gradient(circle at 28% 18%, rgba(50, 116, 160, 0.09), transparent 26rem),    radial-gradient(circle at 50% 76%, rgba(123, 72, 22, 0.12), transparent 34rem),    linear-gradient(180deg, #080604 0%, #020201 48%, #000 100%);  color: var(--cream);  font: 16px/1.45 "Trebuchet MS", "Arial Narrow", Arial, sans-serif;  overflow-x: hidden;}body::before {  content: "";  position: fixed;  inset: 0;  pointer-events: none;  background:    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(0, 0, 0, 0.62) 100%);  opacity: 0.7;}button,a {  font: inherit;}[hidden] {  display: none !important;}.receiver-app {  position: relative;  z-index: 1;  width: min(1280px, calc(100% - 28px));  margin: 0 auto;  padding: 14px 0 34px;}.receiver-top {  display: flex;  align-items: center;  justify-content: flex-end;  gap: 22px;  padding: 8px 28px;  border: 1px solid rgba(233, 154, 43, 0.24);  border-bottom: 0;  background:    linear-gradient(180deg, rgba(255, 174, 55, 0.055), transparent 65%),    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(20, 13, 7, 0.28), rgba(0, 0, 0, 0.58));  box-shadow:    inset 0 -1px 0 rgba(0, 0, 0, 0.9),    inset 0 1px 0 rgba(255, 195, 92, 0.08);}.eyebrow {  margin: 0;  color: var(--amber);  font-size: 0.68rem;  font-weight: 900;  letter-spacing: 0.18em;  text-transform: uppercase;}h1 {  margin: 2px 0 0;  color: var(--amber-hot);  font-family: "Cooper Black", "Bookman Old Style", Georgia, "Times New Roman", serif;  font-size: clamp(2rem, 3.25vw, 3.6rem);  font-weight: 700;  letter-spacing: 0.18em;  line-height: 0.92;  text-transform: uppercase;  text-shadow:    0 0 9px rgba(255, 162, 36, 0.8),    0 0 28px rgba(255, 124, 15, 0.38),    0 2px 0 #000;}h2,strong {  text-wrap: balance;}.receiver-tagline {  margin: 5px 0 0;  color: rgba(246, 234, 211, 0.74);  font-size: 0.86rem;  letter-spacing: 0.04em;}button,.full-link {  border: 1px solid rgba(230, 153, 43, 0.34);  border-radius: 2px;  background:    linear-gradient(180deg, rgba(255, 177, 56, 0.06), rgba(0, 0, 0, 0.58)),    #050403;  color: var(--cream);  padding: 10px 14px;  text-decoration: none;  text-transform: uppercase;  font-size: 0.68rem;  font-weight: 900;  letter-spacing: 0.12em;  cursor: pointer;  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;}button:hover,button:focus-visible,.full-link:hover,.full-link:focus-visible {  border-color: var(--amber-hot);  color: var(--amber-hot);  outline: none;  box-shadow: 0 0 16px rgba(255, 169, 44, 0.22);}button:active {  transform: translateY(1px);}.primary {  border-color: #e69e2d;  background: linear-gradient(180deg, #d89424, #9c5d08);  color: #120b03;  box-shadow: 0 0 20px rgba(255, 160, 39, 0.24);}.receiver-face {  position: relative;  display: grid;  grid-template-columns: 218px minmax(0, 1fr) 178px;  grid-template-areas: "meters glass knobs";  align-items: stretch;  gap: 14px;  padding: 20px;  border: 1px solid rgba(230, 153, 43, 0.42);  border-radius: 2px;  background:    radial-gradient(circle at 50% 0%, rgba(255, 175, 56, 0.09), transparent 34rem),    linear-gradient(110deg, rgba(255, 172, 55, 0.12), rgba(255, 255, 255, 0.02) 18%, transparent 56%, rgba(255, 175, 55, 0.08)),    repeating-linear-gradient(90deg, rgba(255, 185, 78, 0.035) 0 1px, transparent 1px 4px),    linear-gradient(180deg, #21140a 0%, #100904 45%, #060403 100%);  box-shadow:    inset 0 1px 0 rgba(255, 191, 92, 0.24),    inset 0 -18px 34px rgba(0, 0, 0, 0.88),    inset 11px 0 22px rgba(255, 186, 70, 0.035),    inset -11px 0 22px rgba(0, 0, 0, 0.55),    0 28px 90px rgba(0, 0, 0, 0.85);}.receiver-face::before {  content: "";  position: absolute;  inset: 7px;  border: 1px solid rgba(0, 0, 0, 0.86);  pointer-events: none;  box-shadow:    inset 0 0 0 1px rgba(255, 172, 55, 0.08),    inset 0 0 46px rgba(0, 0, 0, 0.7);}.receiver-face .meter-bank::before,.receiver-face .knob-row::before,.receiver-face .glass-panel::before {  content: "";  position: absolute;  inset: -5px;  border: 1px solid rgba(0, 0, 0, 0.66);  pointer-events: none;  box-shadow: inset 0 0 0 1px rgba(255, 170, 55, 0.055);}.receiver-face::after {  content: "";  position: absolute;  inset: 0;  pointer-events: none;  background: radial-gradient(circle at 50% 45%, rgba(255, 170, 46, 0.07), transparent 44%);  animation: receiverBreath 9s ease-in-out infinite;}.glass-panel {  grid-area: glass;  position: relative;  display: grid;  grid-template-columns: 1fr;  align-content: center;  gap: 9px;  min-height: 218px;  padding: 16px 34px 17px;  overflow: hidden;  min-width: 0;  border: 1px solid rgba(255, 164, 39, 0.3);  background:    radial-gradient(ellipse at 50% 54%, rgba(255, 168, 41, 0.2), transparent 31rem),    linear-gradient(90deg, rgba(255, 60, 35, 0.05), transparent 16%, transparent 84%, rgba(255, 60, 35, 0.04)),    linear-gradient(180deg, #070909, #010202 74%),    #030303;  box-shadow:    inset 0 0 34px rgba(0, 0, 0, 0.95),    inset 0 0 10px rgba(255, 154, 30, 0.08),    0 0 28px rgba(0, 0, 0, 0.76);}.receiver-nameplate {  position: relative;  z-index: 1;  display: grid;  justify-items: center;  gap: 2px;  padding-bottom: 3px;  text-align: center;}.receiver-nameplate .eyebrow {  color: rgba(255, 189, 66, 0.82);  font-size: 0.48rem;  letter-spacing: 0.28em;}.receiver-nameplate h1 {  color: #ffbd42;  font-size: clamp(1.55rem, 2.35vw, 2.7rem);  letter-spacing: 0.2em;  text-shadow:    0 0 8px rgba(255, 178, 55, 0.9),    0 0 25px rgba(255, 126, 16, 0.42),    0 2px 0 #000;}.receiver-nameplate .receiver-tagline {  margin: 0;  color: rgba(246, 234, 211, 0.68);  font-size: 0.58rem;  letter-spacing: 0.11em;}.glass-panel::after {  content: "";  position: absolute;  inset: 0;  background:    linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 23%, transparent 72%, rgba(255, 255, 255, 0.025)),    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px);  pointer-events: none;}.dial-brand {  position: relative;  z-index: 1;  display: flex;  justify-content: space-between;  align-items: center;  min-width: 0;  padding-inline: 4px;}.dial-brand span {  color: #ff3c23;  font-size: 1.35rem;  letter-spacing: 0.18em;  text-shadow: 0 0 14px rgba(255, 63, 36, 0.46);}.dial-brand strong {  position: relative;  color: #ff3c23;  font-size: 0.64rem;  font-weight: 900;  letter-spacing: 0.3em;  text-transform: uppercase;  text-shadow: 0 0 14px rgba(255, 63, 36, 0.55);}.dial-brand strong::before {  content: "";  display: inline-block;  width: 9px;  height: 9px;  margin-right: 9px;  border-radius: 999px;  vertical-align: middle;  background: #ff321f;  box-shadow: 0 0 14px rgba(255, 49, 31, 0.9), inset 0 0 4px #ffd2c6;}.tuner-scale {  position: relative;  z-index: 1;  padding: 8px 52px 8px 0;  min-width: 0;}.scale-line {  height: 76px;  border-bottom: 1px solid rgba(255, 165, 36, 0.92);  background:    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(255, 182, 57, 0.9) calc(10% - 2px) 10%),    repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), rgba(255, 174, 42, 0.48) calc(2% - 1px) 2%),    repeating-linear-gradient(90deg, transparent 0 calc(1% - 1px), rgba(255, 174, 42, 0.2) calc(1% - 1px) 1%),    linear-gradient(180deg, transparent, rgba(255, 165, 36, 0.1));  box-shadow:    0 0 24px rgba(255, 155, 26, 0.28),    inset 0 -16px 32px rgba(255, 155, 26, 0.035);}.scale-numbers {  display: flex;  justify-content: space-between;  color: var(--amber);  font-size: 1.35rem;  letter-spacing: 0.06em;  margin-top: -60px;  padding: 0 4px;  text-shadow: 0 0 12px rgba(255, 162, 36, 0.32);}.mhz {  position: absolute;  right: 0;  top: 21px;  color: #ff3c23;  font-size: 0.78rem;  letter-spacing: 0.08em;}.tuning-needle {  position: absolute;  left: 50%;  top: 3px;  width: 2px;  height: 112px;  background: var(--red);  box-shadow: 0 0 16px rgba(255, 55, 30, 0.92), 0 0 3px #fff;  transition: left 850ms cubic-bezier(.2,.8,.2,1);}.receiver-label-strip {  position: relative;  z-index: 1;  display: flex;  justify-content: space-between;  gap: 16px;  padding: 7px 12px 6px;  border-top: 1px solid rgba(255, 166, 39, 0.32);  border-bottom: 1px solid rgba(255, 166, 39, 0.2);  color: rgba(246, 190, 93, 0.72);  font-size: 0.55rem;  font-weight: 900;  letter-spacing: 0.26em;  text-transform: uppercase;  background: linear-gradient(90deg, transparent, rgba(255, 166, 39, 0.06), transparent);  white-space: nowrap;}.receiver-label-strip em {  color: var(--amber);  font-style: normal;  text-shadow: 0 0 11px rgba(255, 165, 36, 0.28);}.meter-bank {  grid-area: meters;  display: grid;  align-content: center;  gap: 12px;  position: relative;  z-index: 1;}.vu-meter {  display: grid;  gap: 7px;  padding: 11px 11px 13px;  border: 1px solid rgba(41, 156, 255, 0.22);  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.28)),    #020303;  box-shadow:    inset 0 0 18px rgba(0, 0, 0, 0.9),    0 0 18px rgba(0, 0, 0, 0.66);}.vu-meter span {  color: var(--blue-hot);  font-size: 0.62rem;  font-weight: 900;  letter-spacing: 0.16em;  text-transform: uppercase;  text-shadow: 0 0 12px rgba(49, 168, 255, 0.58);}.meter-window {  position: relative;  height: 72px;  overflow: hidden;  border-radius: 2px;  background:    radial-gradient(ellipse at 50% 82%, rgba(76, 183, 255, 0.32), transparent 40%),    linear-gradient(180deg, rgba(103, 201, 255, 0.18), rgba(4, 17, 31, 0.92) 58%, #02060a),    #02060a;  box-shadow:    inset 0 0 22px rgba(49, 168, 255, 0.28),    inset 0 0 0 1px rgba(111, 204, 255, 0.12);}.meter-window::before {  content: "";  position: absolute;  left: 18%;  right: 18%;  bottom: 9px;  height: 40px;  border-top: 1px solid rgba(135, 221, 255, 0.6);  border-radius: 50% 50% 0 0;  opacity: 0.82;}.meter-window::after {  content: "";  position: absolute;  inset: 0;  background:    linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 22%, transparent 65%, rgba(255, 255, 255, 0.04)),    repeating-linear-gradient(90deg, transparent 0 11px, rgba(255, 255, 255, 0.035) 11px 12px);  pointer-events: none;}.meter-window i {  position: absolute;  left: 50%;  bottom: 8px;  width: 2px;  height: 51px;  display: block;  transform-origin: 50% 100%;  transform: rotate(-38deg);  background: linear-gradient(180deg, #ffefbd, #ff6145 55%, #2a0b06);  box-shadow: 0 0 10px rgba(255, 90, 55, 0.48);  transition: transform 180ms cubic-bezier(.22,.84,.22,1);}.meter-scale {  position: absolute;  inset: 8px 12px auto;  display: flex;  justify-content: space-between;  color: rgba(127, 221, 255, 0.78);  font-size: 0.52rem;  font-weight: 700;  letter-spacing: 0.04em;  text-shadow: 0 0 9px rgba(49, 168, 255, 0.65);}.meter-scale b:last-child {  color: #ffad53;}.receiver-status {  display: flex;  gap: 9px;  align-items: center;  justify-content: center;  color: var(--muted);  letter-spacing: 0.1em;  text-transform: uppercase;  font-size: 0.62rem;  padding: 7px 8px;  border: 1px solid rgba(255, 164, 39, 0.16);  background: rgba(0, 0, 0, 0.22);}.lamp {  width: 10px;  height: 10px;  display: inline-block;  border-radius: 999px;  background: #451308;  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);}.lamp.is-on {  background: #ff311e;  box-shadow: 0 0 16px rgba(255, 48, 30, 0.85), inset 0 0 4px #ffd0c4;  animation: lampBreath 3.6s ease-in-out infinite;}.knob-row {  grid-area: knobs;  display: grid;  align-content: center;  gap: 20px;  position: relative;  z-index: 1;  padding-block: 3px;}.knob {  display: grid;  justify-items: center;  gap: 10px;  position: relative;  padding-top: 6px;}.knob::before {  content: "";  width: 116px;  height: 116px;  position: absolute;  top: -8px;  border-radius: 999px;  background:    radial-gradient(circle, transparent 58%, rgba(255, 178, 61, 0.15) 59% 61%, transparent 62%),    repeating-conic-gradient(from -45deg, rgba(255, 185, 76, 0.55) 0 2deg, transparent 2deg 14deg);  opacity: 0.62;  filter: drop-shadow(0 0 12px rgba(255, 150, 32, 0.12));}.knob span {  position: relative;  width: 92px;  aspect-ratio: 1;  border-radius: 999px;  background:    conic-gradient(from 30deg, #1b0e04, #a97022, #f6c56d, #70410e, #110803, #b87924, #1b0e04),    radial-gradient(circle, #d5983f, #2a1608 70%);  border: 1px solid rgba(255, 206, 115, 0.34);  box-shadow:    inset 10px 10px 18px rgba(255, 230, 163, 0.13),    inset -18px -20px 28px rgba(0, 0, 0, 0.76),    0 12px 28px rgba(0, 0, 0, 0.65),    0 0 22px rgba(255, 160, 40, 0.16);}.knob span::after {  content: "";  position: absolute;  left: 50%;  top: 9px;  width: 2px;  height: 31px;  background: rgba(255, 236, 196, 0.7);  box-shadow: 0 0 6px rgba(255, 220, 150, 0.6);}.knob small {  color: var(--muted);  font-size: 0.62rem;  font-weight: 900;  letter-spacing: 0.16em;  text-transform: uppercase;}.mode-switch,.playlist-filters,.radio-controls,.jukebox-controls,.top-actions {  display: flex;  flex-wrap: wrap;  gap: 9px;}.mode-switch {  margin: 0;  padding: 11px 24px;  border: 1px solid rgba(230, 153, 43, 0.28);  border-top: 0;  background: linear-gradient(180deg, #0a0603, #030201);}.mode-switch button {  min-width: 112px;  padding-block: 8px;}.now-playing-section {  display: grid;  grid-template-columns: minmax(0, 1fr) minmax(270px, 350px);  gap: 12px;  margin-top: 12px;  align-items: stretch;}.now-card,.radio-memory article,.jukebox-browser {  border: 1px solid var(--line);  background:    radial-gradient(circle at 24% 0%, rgba(255, 165, 40, 0.06), transparent 14rem),    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.24)),    #050302;  box-shadow:    inset 0 0 30px rgba(255, 160, 38, 0.035),    0 24px 70px rgba(0, 0, 0, 0.66);}.now-card {  display: grid;  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);  gap: clamp(20px, 2.6vw, 30px);  padding: clamp(16px, 2.2vw, 24px);  align-items: center;  min-height: 390px;}.cover-frame {  width: min(100%, 380px);  aspect-ratio: 1;  padding: 9px;  background: linear-gradient(145deg, #c47f24, #120904 30%, #050302 72%, #5e3510);  box-shadow:    inset 0 0 0 1px rgba(255, 199, 105, 0.2),    0 22px 48px rgba(0, 0, 0, 0.62);}.cover-frame img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;  opacity: 0;  transition: opacity 520ms ease;}.cover-frame img.is-loaded {  opacity: 1;}.now-copy {  display: grid;  gap: 10px;  align-content: center;  min-width: 0;}.now-copy h2 {  margin: 0;  color: #fff5dd;  font-family: Impact, "Arial Black", sans-serif;  font-size: clamp(2rem, 3.2vw, 3.18rem);  line-height: 0.98;  text-transform: uppercase;  letter-spacing: 0.005em;  overflow-wrap: anywhere;  text-shadow: 0 0 18px rgba(255, 160, 43, 0.18), 0 2px 0 #000;}.meta,.credits,.radio-memory em {  color: var(--muted);}.meta,.credits {  max-width: 58ch;  margin: 0;}.broadcast-row {  display: flex;  flex-wrap: wrap;  gap: 12px;  align-items: center;  color: var(--muted);  font-size: 0.82rem;}.broadcast-row b {  color: var(--cream);  font-weight: 700;}.on-air-pill {  display: inline-flex;  align-items: center;  gap: 6px;  border: 1px solid rgba(255, 49, 30, 0.58);  color: #ff5a43;  padding: 4px 8px;  font-size: 0.66rem;  font-weight: 900;  letter-spacing: 0.08em;  text-transform: uppercase;}.on-air-pill::before {  content: "";  width: 7px;  height: 7px;  border-radius: 999px;  background: #ff351f;  box-shadow: 0 0 10px rgba(255, 49, 30, 0.85);}.progress-shell {  width: min(100%, 620px);  height: 7px;  overflow: hidden;  background: rgba(255, 255, 255, 0.08);  border: 1px solid rgba(255, 160, 42, 0.12);}.stereo-display {  width: min(100%, 520px);  height: 44px;  display: flex;  align-items: end;  gap: 4px;  padding: 8px 10px;  border: 1px solid rgba(255, 160, 42, 0.18);  background:    linear-gradient(180deg, rgba(49, 168, 255, 0.07), rgba(0, 0, 0, 0.34)),    #030506;  box-shadow: inset 0 0 22px rgba(49, 168, 255, 0.08);}.stereo-display span {  flex: 1;  min-width: 3px;  height: 38%;  background: linear-gradient(180deg, #ffcc5c, #159cff);  box-shadow: 0 0 9px rgba(49, 168, 255, 0.22);  opacity: 0.78;}.stereo-display span:nth-child(3n) { height: 64%; }.stereo-display span:nth-child(4n) { height: 48%; }.stereo-display span:nth-child(5n) { height: 78%; }.stereo-display span:nth-child(8n) { height: 90%; background: linear-gradient(180deg, #ff5a37, #ffbd42); }.progress-shell span {  display: block;  width: 0%;  height: 100%;  background: linear-gradient(90deg, var(--amber), #ffe0a1);  box-shadow: 0 0 14px rgba(255, 171, 44, 0.62);}audio {  display: none;}.full-link {  justify-self: start;}.radio-memory {  display: grid;  grid-template-rows: 1fr 1fr auto;  gap: 12px;}.radio-memory article {  min-height: 0;  padding: 16px;  display: grid;  align-content: start;}.memory-row {  display: grid;  grid-template-columns: 82px 1fr;  gap: 14px;  align-items: center;  margin-top: 12px;}.memory-row img {  width: 82px;  height: 82px;  object-fit: cover;  background: #090909;  border: 1px solid rgba(255, 160, 40, 0.2);}.memory-row img[hidden] {  display: none;}.memory-row:has(img[hidden]) {  grid-template-columns: 1fr;}.memory-row strong {  display: block;  font-size: 1rem;  line-height: 1.05;  color: var(--cream);}.memory-row em {  display: block;  margin-top: 4px;  font-style: normal;  font-size: 0.78rem;}.receiver-clock {  justify-self: end;  color: var(--blue-hot);  font-size: 0.78rem;  letter-spacing: 0.12em;  text-shadow: 0 0 12px rgba(49, 168, 255, 0.54);}.jukebox-browser {  margin-top: 18px;  padding: clamp(18px, 3vw, 30px);}.browser-head {  display: flex;  align-items: end;  justify-content: space-between;  gap: 18px;  margin-bottom: 18px;}.browser-head h2 {  margin: 4px 0 0;  color: var(--cream);  font-family: Georgia, "Times New Roman", serif;  font-size: clamp(2rem, 4vw, 4rem);}.queue {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 14px;}.track-card {  display: grid;  grid-template-columns: 70px 1fr;  gap: 13px;  align-items: center;  min-height: 96px;  text-align: left;  background: rgba(0, 0, 0, 0.5);}.track-card img {  width: 70px;  height: 70px;  object-fit: cover;}.track-card strong,.track-card span {  display: block;}.track-card span {  color: var(--muted);  font-size: 0.78rem;}.is-room-mode,:fullscreen {  background:    radial-gradient(circle at 50% 32%, rgba(255, 153, 35, 0.11), transparent 34rem),    #010101;}.is-room-mode .receiver-app,:fullscreen.receiver-app {  width: min(1580px, calc(100% - 26px));  min-height: 100vh;  display: grid;  align-content: center;  padding: 16px 0;}.is-room-mode .receiver-top,:fullscreen .receiver-top {  opacity: 0.9;}.is-room-mode .now-card,:fullscreen .now-card {  min-height: 390px;}.is-room-mode .mode-switch,:fullscreen .mode-switch {  opacity: 0.72;}.is-room-mode .jukebox-browser,:fullscreen .jukebox-browser {  display: none !important;}@keyframes lampBreath {  0%, 100% { filter: brightness(0.88); }  50% { filter: brightness(1.18); }}@keyframes receiverBreath {  0%, 100% { opacity: 0.46; }  50% { opacity: 0.66; }}@media (prefers-reduced-motion: reduce) {  *,  *::before,  *::after {    animation-duration: 0.01ms !important;    transition-duration: 0.01ms !important;  }}@media (max-width: 900px) {  .receiver-app {    width: min(100% - 18px, 560px);    padding-top: 14px;  }  .receiver-top,  .browser-head {    display: grid;  }  .receiver-top {    padding: 10px 8px;    overflow: hidden;    justify-content: center;  }  .receiver-face {    grid-template-columns: 1fr;    grid-template-areas:      "glass"      "meters"      "knobs";    padding: 14px;    overflow: hidden;  }  .glass-panel {    grid-template-columns: 1fr;    gap: 12px;    min-height: 230px;    padding: 18px;  }  .tuner-scale {    width: 100%;  }  .dial-brand em {    white-space: normal;  }  .meter-bank {    grid-template-columns: 1fr 1fr;  }  .meter-bank .receiver-status {    grid-column: 1 / -1;  }  .knob-row {    grid-template-columns: 1fr 1fr;  }  .mode-switch,  .radio-controls,  .jukebox-controls {    display: grid;    grid-template-columns: repeat(2, minmax(0, 1fr));  }  .mode-switch button {    min-width: 0;  }  .now-playing-section,  .now-card {    grid-template-columns: 1fr;  }  .now-card {    gap: 20px;  }  .cover-frame {    width: min(100%, 330px);    margin: 0 auto;  }  .now-copy h2 {    font-size: clamp(2.4rem, 15vw, 4.65rem);  }}@media (max-width: 640px) {  .receiver-app {    width: calc(100% - 12px);  }  h1 {    font-size: 1.5rem;    letter-spacing: 0.13em;  }  .top-actions {    width: 100%;    justify-content: center;  }  .top-actions button {    width: min(100%, 260px);    font-size: 0.58rem;    letter-spacing: 0.08em;    padding-inline: 8px;  }  .receiver-tagline {    font-size: 0.74rem;  }  .receiver-nameplate h1 {    font-size: clamp(1.05rem, 7vw, 1.42rem);    letter-spacing: 0.08em;    max-width: 100%;  }  .receiver-nameplate .eyebrow {    font-size: 0.42rem;    letter-spacing: 0.16em;  }  .receiver-nameplate .receiver-tagline {    font-size: 0.52rem;    line-height: 1.25;  }  .dial-brand span {    font-size: 1.3rem;  }  .glass-panel {    padding: 12px 10px;    min-width: 0;  }  .tuner-scale {    padding-right: 0;  }  .scale-numbers {    font-size: 0.7rem;    letter-spacing: 0;  }  .scale-numbers span:nth-child(even) {    display: none;  }  .scale-line {    height: 48px;  }  .mhz {    display: none;  }  .receiver-label-strip {    gap: 7px;    padding-inline: 6px;    font-size: 0.42rem;    letter-spacing: 0.08em;  }  .receiver-label-strip em {    overflow: hidden;    text-overflow: ellipsis;  }  .mode-switch,  .radio-controls,  .jukebox-controls {    grid-template-columns: 1fr;  }  .meter-bank {    grid-template-columns: 1fr;  }  .knob-row {    grid-template-columns: 1fr;  }  .memory-row {    grid-template-columns: 62px 1fr;  }  .memory-row img {    width: 62px;    height: 62px;  }}
/* WDORO live-state UI pass */
.live-command {
  display: grid;
  gap: 12px;
  width: min(100%, 640px);
  margin-top: 4px;
}
.live-sign {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 74px;
  overflow: hidden;
  border: 2px solid rgba(255, 70, 46, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 97, 72, 0.24), rgba(55, 4, 0, 0.78)),
    radial-gradient(circle at 34% 50%, rgba(255, 112, 78, 0.32), transparent 54%),
    #160201;
  color: #ffd2c7;
  box-shadow:
    inset 0 0 22px rgba(255, 45, 28, 0.34),
    0 0 24px rgba(255, 43, 28, 0.35),
    0 0 48px rgba(255, 43, 28, 0.16);
  text-shadow: 0 0 15px rgba(255, 62, 44, 0.9), 0 2px 0 #000;
  opacity: 0.72;
  filter: saturate(0.78) brightness(0.78);
  transition: opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.broadcast-glyph {
  width: 86px;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 166, 126, 0.36);
  color: #fff0e9;
  font-size: 2.45rem;
  font-weight: 900;
  line-height: 1;
}
.live-sign strong {
  display: block;
  padding: 0 30px 0 24px;
  color: #fff0e9;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  letter-spacing: 0.12em;
  line-height: 0.92;
  text-transform: uppercase;
}
.live-cta {
  position: relative;
  width: min(100%, 600px);
  min-height: 92px;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  overflow: hidden;
  border: 2px solid rgba(255, 65, 41, 0.82);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 80, 52, 0.42), rgba(130, 15, 4, 0.82)),
    repeating-linear-gradient(135deg, rgba(255, 195, 72, 0.2) 0 10px, transparent 10px 22px),
    #180301;
  color: #fff4e8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 155, 0.17),
    inset 0 0 32px rgba(255, 47, 27, 0.22),
    0 0 24px rgba(255, 44, 25, 0.28),
    0 15px 34px rgba(0, 0, 0, 0.42);
  text-align: left;
}
.live-cta::before,
.live-cta::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 221, 178, 0.3);
  border-radius: 5px;
  pointer-events: none;
}
.live-cta::after {
  inset: auto 16px 0;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 221, 178, 0.8), transparent);
  opacity: 0.55;
}
.live-play-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 244, 232, 0.88);
  border-radius: 999px;
  font-size: 1.55rem;
  line-height: 1;
  box-shadow: 0 0 20px rgba(255, 243, 225, 0.24), inset 0 0 12px rgba(255, 255, 255, 0.14);
}
.live-cta-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
}
.live-cta-copy strong {
  color: #fff4e8;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2rem, 4.2vw, 4rem);
  letter-spacing: 0.08em;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 0 17px rgba(255, 255, 255, 0.36), 0 0 28px rgba(255, 42, 25, 0.72), 0 2px 0 #000;
}
.live-cta-copy em {
  color: #ffe2c3;
  font-style: normal;
  font-size: clamp(0.74rem, 1.4vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.receiver-app.is-live .live-sign,
.receiver-app.is-live .live-cta {
  opacity: 1;
  filter: saturate(1.12) brightness(1.08);
}
.receiver-app.is-live .live-sign {
  animation: onAirPulse 2.5s ease-in-out infinite;
}
.receiver-app.is-live .live-cta {
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 190, 0.22),
    inset 0 0 38px rgba(255, 53, 31, 0.34),
    0 0 30px rgba(255, 52, 31, 0.54),
    0 0 72px rgba(255, 52, 31, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.48);
}
.receiver-app.is-live .stereo-display span {
  opacity: 0.98;
  box-shadow: 0 0 12px rgba(49, 168, 255, 0.36), 0 0 14px rgba(255, 180, 66, 0.2);
}
@keyframes onAirPulse {
  0%, 100% { box-shadow: inset 0 0 22px rgba(255, 45, 28, 0.34), 0 0 22px rgba(255, 43, 28, 0.35), 0 0 45px rgba(255, 43, 28, 0.14); }
  50% { box-shadow: inset 0 0 30px rgba(255, 76, 50, 0.48), 0 0 34px rgba(255, 62, 39, 0.58), 0 0 82px rgba(255, 43, 28, 0.26); }
}
@media (max-width: 900px) {
  .live-command { width: 100%; }
  .live-sign,
  .live-cta { justify-self: stretch; width: 100%; }
  .live-sign { min-height: 64px; }
  .broadcast-glyph { width: 72px; }
  .live-cta { min-height: 82px; grid-template-columns: 58px 1fr; gap: 13px; padding: 13px 16px; }
  .live-play-icon { width: 48px; font-size: 1.25rem; }
}
@media (max-width: 640px) {
  .live-sign strong { font-size: clamp(2rem, 15vw, 3.6rem); letter-spacing: 0.08em; padding-right: 16px; }
  .broadcast-glyph { width: 60px; font-size: 1.9rem; }
  .live-cta-copy strong { font-size: clamp(1.85rem, 13vw, 3.25rem); letter-spacing: 0.04em; }
  .live-cta-copy em { font-size: 0.66rem; letter-spacing: 0.08em; }
}
/* WDORO radio metadata display polish */
.receiver-app.is-radio .broadcast-row .on-air-pill {
  display: none;
}

/* WDORO receiver selector buttons: one coherent physical state system. */
.mode-switch button {
  color: #ffe9bb;
  opacity: 1;
  filter: none;
  border: 1px solid #c99a4c;
  background:
    linear-gradient(180deg, rgba(255, 226, 158, 0.2) 0%, rgba(255, 196, 91, 0.05) 25%, transparent 48%),
    linear-gradient(180deg, #76501f 0%, #482a0d 54%, #211308 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 190, 0.42),
    inset 0 0 11px rgba(255, 170, 45, 0.14),
    inset 0 -5px 8px rgba(8, 4, 1, 0.62),
    0 0 0 1px rgba(48, 24, 5, 0.9),
    0 0 12px rgba(255, 157, 28, 0.18);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.92),
    0 0 7px rgba(255, 214, 130, 0.42);
  transform: translateY(0);
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    text-shadow 150ms ease,
    transform 80ms ease;
}

.mode-switch button.is-active {
  color: #fff9e9;
  border-color: #ffe7aa;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 236, 167, 0.68) 0%, rgba(255, 186, 58, 0.3) 46%, transparent 76%),
    linear-gradient(180deg, #efb64c 0%, #c96f12 55%, #722f04 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 230, 0.96),
    inset 0 0 18px rgba(255, 222, 135, 0.7),
    inset 0 -5px 9px rgba(67, 21, 0, 0.46),
    0 0 0 1px rgba(114, 55, 5, 0.96),
    0 0 25px rgba(255, 177, 37, 0.72),
    0 0 8px rgba(255, 235, 174, 0.54);
  text-shadow:
    0 1px 0 rgba(69, 25, 0, 0.78),
    0 0 6px rgba(255, 255, 238, 0.96),
    0 0 13px rgba(255, 217, 107, 0.88);
}

.mode-switch button:not(.is-active):hover,
.mode-switch button:not(.is-active):focus-visible {
  color: #fff8e4;
  border-color: #ffdc8b;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 230, 152, 0.5) 0%, rgba(255, 177, 45, 0.22) 48%, transparent 76%),
    linear-gradient(180deg, #ca8a2f 0%, #8f490c 55%, #451c03 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 215, 0.82),
    inset 0 0 15px rgba(255, 205, 99, 0.5),
    inset 0 -5px 9px rgba(44, 14, 0, 0.52),
    0 0 0 1px rgba(91, 42, 4, 0.94),
    0 0 21px rgba(255, 174, 36, 0.56);
  text-shadow:
    0 1px 0 rgba(70, 25, 0, 0.8),
    0 0 7px rgba(255, 247, 213, 0.9),
    0 0 12px rgba(255, 209, 97, 0.68);
  outline: none;
}

.mode-switch button:focus-visible {
  outline: 2px solid rgba(255, 235, 174, 0.94);
  outline-offset: 3px;
}

.mode-switch button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 8px rgba(45, 15, 0, 0.58),
    inset 0 0 13px rgba(255, 181, 50, 0.3),
    0 0 10px rgba(255, 157, 26, 0.28);
}

.mode-switch button:disabled,
.mode-switch button[aria-disabled="true"] {
  color: #907a5e;
  border-color: #58462f;
  background: #21180e;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.72);
  text-shadow: none;
  opacity: 0.58;
  cursor: not-allowed;
}

/* Official WDRR-DB station credentials. */
.station-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 11px;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(230, 153, 43, 0.34);
  background: linear-gradient(180deg, rgba(255, 177, 56, 0.045), rgba(0, 0, 0, 0.42)), #050403;
  color: rgba(246, 234, 211, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.station-trust-bar strong,
.station-trust-link { color: #ffe4a8; }

.station-trust-bar:hover,
.station-trust-bar:focus-visible {
  border-color: rgba(255, 196, 91, 0.82);
  color: var(--cream);
  box-shadow: 0 0 16px rgba(255, 164, 39, 0.11);
  outline: none;
}

.station-trust-bar > span[aria-hidden="true"] { color: rgba(243, 163, 33, 0.56); }

.production-credits {
  margin-top: 12px;
  padding: 18px clamp(16px, 3vw, 30px);
  border-top: 1px solid rgba(230, 153, 43, 0.26);
  border-bottom: 1px solid rgba(230, 153, 43, 0.18);
  background: rgba(8, 6, 3, 0.78);
  color: rgba(246, 234, 211, 0.72);
  text-align: center;
}

.production-credits .eyebrow { margin: 0 0 12px; color: #ffe4a8; }
.production-credits dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.production-credits dt { color: var(--cream); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.production-credits dd { margin: 5px 0 0; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.45; }
.production-credits a { color: #ffe4a8; text-decoration-color: rgba(255, 228, 168, 0.5); text-underline-offset: 3px; }
.production-credits a:hover,
.production-credits a:focus-visible { color: var(--amber-hot); outline: none; text-decoration-color: currentColor; }

.station-credentials {
  display: grid;
  grid-template-columns: minmax(170px, 220px) 92px minmax(230px, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(230, 153, 43, 0.48);
  background:
    linear-gradient(105deg, rgba(255, 185, 74, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.26)),
    #050302;
  color: var(--cream);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 205, 121, 0.04),
    inset 0 0 30px rgba(255, 160, 38, 0.035),
    0 18px 45px rgba(0, 0, 0, 0.46);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.station-credentials:hover,
.station-credentials:focus-visible {
  border-color: rgba(255, 196, 91, 0.88);
  background:
    linear-gradient(105deg, rgba(255, 185, 74, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)),
    #070402;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 166, 0.08),
    inset 0 0 34px rgba(255, 160, 38, 0.055),
    0 0 22px rgba(255, 164, 39, 0.16),
    0 18px 45px rgba(0, 0, 0, 0.5);
  outline: none;
}

.dba-mark {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(230, 153, 43, 0.38);
  background: #050302;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 139, 0.04), 0 9px 24px rgba(0, 0, 0, 0.42);
}

.dba-mark img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.dba-callsign-badge {
  display: block;
  width: 92px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 218, 136, 0.72), 0 0 22px rgba(255, 168, 39, 0.2), 0 10px 24px rgba(0, 0, 0, 0.58);
}

.dba-copy { display: grid; gap: 3px; min-width: 0; }
.dba-copy strong {
  color: #fff1cf;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  letter-spacing: 0.09em;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 174, 44, 0.24), 0 2px 0 #000;
}
.dba-copy > span:not(.eyebrow) { color: rgba(246, 234, 211, 0.86); font-size: 0.84rem; font-weight: 700; }
.dba-copy small { color: var(--amber-hot); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.dba-verify { justify-self: end; color: #ffe4a8; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-align: right; text-transform: uppercase; }

@media (max-width: 900px) {
  .station-credentials { grid-template-columns: minmax(160px, 200px) 78px minmax(180px, 1fr); padding: 14px; }
  .dba-callsign-badge { width: 78px; }
  .dba-verify { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 640px) {
  .station-trust-bar {
    gap: 5px 8px;
    padding: 9px 10px;
    font-size: 0.54rem;
    letter-spacing: 0.07em;
  }
  .production-credits { padding: 16px 14px; }
  .production-credits dl { grid-template-columns: 1fr; gap: 14px; }
  .station-credentials {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-areas:
      "badge copy"
      "mark mark"
      "verify verify";
    gap: 14px;
  }
  .dba-mark { grid-area: mark; width: min(210px, 72vw); justify-self: center; }
  .dba-callsign-badge { grid-area: badge; }
  .dba-copy { grid-area: copy; }
  .dba-copy strong { font-size: 2rem; }
  .dba-copy > span:not(.eyebrow) { font-size: 0.74rem; }
  .dba-verify { grid-area: verify; justify-self: stretch; text-align: center; }
}

/* Private-beta invite gate. The public receiver remains visible behind it. */
.beta-gate[hidden] { display: none; }
.beta-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
}

.beta-gate-panel {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid rgba(239, 164, 50, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 177, 52, 0.09), transparent 38%),
    #090604;
  color: var(--cream);
  box-shadow: inset 0 0 30px rgba(255, 159, 35, 0.05), 0 28px 80px rgba(0, 0, 0, 0.8);
}

.beta-gate-panel h2 {
  margin: 4px 0 10px;
  color: #fff1cf;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2rem, 7vw, 3.25rem);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.beta-gate-panel > p:not(.eyebrow) { margin: 0 0 22px; color: #c9b78f; line-height: 1.5; }
.beta-gate-panel form { display: grid; gap: 10px; }
.beta-gate-panel label { color: var(--amber-hot); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.beta-gate-panel input {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #8f601d;
  border-radius: 0;
  background: #030201;
  color: #fff1cf;
  font: 800 1.08rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
}
.beta-gate-panel input:focus { border-color: #ffc55e; box-shadow: 0 0 0 2px rgba(255, 180, 57, 0.18); }
.beta-gate-panel button[type="submit"] {
  min-height: 48px;
  border: 1px solid #ffb13a;
  background: linear-gradient(180deg, #a84917, #6f210e);
  color: #fff4d8;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.beta-gate-panel button[type="submit"]:hover,
.beta-gate-panel button[type="submit"]:focus-visible { background: linear-gradient(180deg, #c65a20, #892d10); box-shadow: 0 0 18px rgba(255, 112, 35, 0.28); }
.beta-gate-panel button[type="submit"]:disabled { opacity: 0.56; cursor: wait; }
.beta-gate-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #d7c59d;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.beta-gate-close:hover,
.beta-gate-close:focus-visible { color: #fff1cf; outline: 1px solid #9c6a24; }
.beta-gate-status { min-height: 1.3em; margin: 2px 0 0; color: #ffb54c; font-size: 0.82rem; font-weight: 700; }
body.beta-gate-open { overflow: hidden; }
/* Local particle-faceplate preview. The production receiver remains untouched. */
.faceplate-particle-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.72; }
.faceplate-particle-field canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.glass-panel > :not(.faceplate-particle-field) { position: relative; z-index: 2; }
.glass-panel::after { z-index: 3; }

/* Permanent station-information crawl. Change the announcement in index.html only. */
.station-ticker {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 178, 51, 0.78);
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(255, 195, 79, 0.16), rgba(131, 53, 3, 0.09) 52%, transparent 76%),
    repeating-linear-gradient(90deg, rgba(255, 204, 106, 0.045) 0 1px, transparent 1px 5px),
    #080402;
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 154, 0.2),
    inset 0 0 30px rgba(255, 135, 18, 0.18),
    0 0 15px rgba(255, 142, 24, 0.14),
    0 10px 30px rgba(0, 0, 0, 0.58);
}
.station-ticker::before,
.station-ticker::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(24px, 5vw, 72px);
  pointer-events: none;
}
.station-ticker::before { left: 0; background: linear-gradient(90deg, #050302, transparent); }
.station-ticker::after { right: 0; background: linear-gradient(270deg, #050302, transparent); }
.station-ticker-window {
  overflow: hidden;
  padding: 10px 0 9px;
}
.station-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: wdoroTicker 48s linear infinite;
}
.station-ticker-cycle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(72px, 9vw, 132px);
  padding-right: clamp(110px, 13vw, 190px);
}
.station-ticker-beat {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42em;
  color: #ffe3a1;
  font-family: Impact, "Arial Black", "Arial Narrow", sans-serif;
  font-size: clamp(0.98rem, 1.5vw, 1.28rem);
  font-weight: 900;
  letter-spacing: 0.085em;
  line-height: 1.08;
  white-space: nowrap;
  text-shadow:
    0 0 3px rgba(255, 231, 171, 0.62),
    0 0 9px rgba(255, 169, 38, 0.48),
    0 2px 0 #130700;
}
.station-ticker-track b {
  color: #ff6a2c;
  font-weight: 900;
  text-shadow: 0 0 9px rgba(255, 64, 24, 0.72);
}
.station-ticker-kiss {
  gap: clamp(12px, 1.4vw, 20px);
  color: #fff3cc;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.kiss-logo-window {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(98px, 8vw, 120px);
  height: clamp(38px, 3.3vw, 48px);
  overflow: hidden;
  mix-blend-mode: screen;
}
.kiss-logo-window img {
  position: absolute;
  top: -52%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 5px rgba(255, 194, 73, 0.54));
}
.station-ticker-kiss strong {
  color: #fff0bf;
  font-size: 1em;
  letter-spacing: 0.11em;
  text-shadow:
    0 0 3px rgba(255, 242, 196, 0.75),
    0 0 10px rgba(255, 189, 58, 0.62),
    0 2px 0 #180500;
}
.station-ticker-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes wdoroTicker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .station-ticker-track {
    width: 100%;
    animation: none !important;
    transform: none;
  }
  .station-ticker-cycle {
    display: none;
  }
  .station-ticker-cycle:first-child {
    display: flex;
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
    justify-content: center;
  }
  .station-ticker-cycle:first-child .station-ticker-beat:not(.station-ticker-kiss) {
    display: none;
  }
}
@media (max-width: 640px) { .faceplate-particle-field { opacity: 0.62; } }
@media (max-width: 640px) {
  .station-ticker {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    min-height: 62px;
  }
  .station-ticker-window {
    display: block;
    min-height: 61px;
    padding-block: 10px 9px;
  }
  .station-ticker-track {
    display: flex;
    width: max-content;
    animation: wdoroTicker 48s linear infinite !important;
    transform: none;
  }
  .station-ticker-cycle,
  .station-ticker-cycle:first-child {
    display: flex !important;
    width: auto;
    gap: 52px;
    padding: 0 82px 0 0;
    overflow: visible;
    justify-content: flex-start;
  }
  .station-ticker-cycle:first-child .station-ticker-beat:not(.station-ticker-kiss) {
    display: inline-flex;
  }
  .station-ticker-beat { font-size: 1rem; }
  .station-ticker-kiss { font-size: 1.25rem; }
  .kiss-logo-window { width: 96px; height: 37px; }
}

/* Local-only station story and early-listener preview. */
.station-manifesto {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(230, 153, 43, 0.52);
  background: #020201;
  box-shadow: inset 0 0 48px rgba(255, 151, 30, 0.035), 0 24px 70px rgba(0, 0, 0, 0.58);
}

.station-manifesto::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px;
  border: 1px solid rgba(255, 201, 116, 0.08);
  pointer-events: none;
}

.station-manifesto picture,
.station-manifesto img {
  display: block;
  width: 100%;
}

.station-manifesto img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #020201;
}

.station-manifesto-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.station-story,
.early-listener {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(230, 153, 43, 0.36);
  background:
    linear-gradient(115deg, rgba(255, 174, 48, 0.09), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 207, 126, 0.018) 0 1px, transparent 1px 7px),
    #050302;
  box-shadow: inset 0 0 48px rgba(255, 151, 30, 0.035), 0 24px 70px rgba(0, 0, 0, 0.58);
}

.station-story::before,
.early-listener::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 201, 116, 0.08);
  pointer-events: none;
}

.station-story {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  min-height: 470px;
}

.station-story-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(34px, 5vw, 72px);
}

.station-story-copy h2,
.early-listener-copy h2 {
  margin: 0;
  color: #fff1cf;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 5.3rem);
  letter-spacing: 0;
  line-height: 0.93;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow: 0 0 24px rgba(255, 160, 36, 0.16), 0 3px 0 #000;
}

.station-story-copy > p:not(.eyebrow),
.early-listener-copy > p:not(.eyebrow) {
  max-width: 64ch;
  margin: 0;
  color: rgba(246, 234, 211, 0.78);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.65;
}

.station-story-copy .station-story-lead {
  color: #ffc65f;
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 900;
}

.station-story-copy .station-story-signoff {
  color: #fff0cb;
  font-weight: 900;
}

.station-story-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 390px;
  padding: clamp(26px, 4vw, 50px);
  border-left: 1px solid rgba(230, 153, 43, 0.25);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 157, 31, 0.16), transparent 54%),
    linear-gradient(145deg, rgba(255, 193, 93, 0.045), rgba(0, 0, 0, 0.54)),
    #020201;
}

.station-story-visual img {
  width: min(100%, 390px);
  height: auto;
  border: 1px solid rgba(255, 193, 87, 0.32);
  box-shadow: 0 0 42px rgba(255, 141, 25, 0.13), 0 28px 58px rgba(0, 0, 0, 0.72);
}

.story-signal-lamp {
  position: absolute;
  top: 24px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 222, 174, 0.76);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-signal-lamp span,
.console-light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3824;
  box-shadow: 0 0 14px rgba(255, 56, 36, 0.9);
}

.story-frequency {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #c58a31;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-frequency strong { color: #ff4b32; }

.early-listener {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: stretch;
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 64, 36, 0.095), transparent 28rem),
    linear-gradient(100deg, rgba(255, 170, 38, 0.075), transparent 48%),
    #040302;
}

.early-listener-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(34px, 5vw, 66px);
}

.early-listener-copy h2 { font-size: clamp(2.7rem, 4.6vw, 4.9rem); }
.early-listener-copy .early-listener-callout { color: #ffc157; font-weight: 900; }

.early-listener-console {
  display: grid;
  align-content: center;
  gap: 24px;
  min-width: 0;
  padding: clamp(30px, 5vw, 62px);
  border-left: 1px solid rgba(230, 153, 43, 0.25);
  background:
    linear-gradient(180deg, rgba(255, 189, 83, 0.05), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 190, 90, 0.022) 0 1px, transparent 1px 5px),
    #090603;
  box-shadow: inset 18px 0 42px rgba(0, 0, 0, 0.42);
}

.console-label {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  align-items: start;
}

.console-light { margin-top: 8px; }
.console-label strong,
.console-label small { display: block; }
.console-label strong {
  color: #fff0cd;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.console-label small { margin-top: 9px; color: #b99b72; font-size: 0.88rem; line-height: 1.5; }

.early-listener-form { display: grid; gap: 9px; }
.early-listener-form label {
  color: var(--amber-hot);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.early-listener-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.early-listener-controls input {
  min-width: 0;
  height: 58px;
  padding: 0 18px;
  border: 1px solid #825619;
  border-right: 0;
  border-radius: 0;
  background: #020201;
  color: #fff1d2;
  font: 800 1rem/1 "Trebuchet MS", Arial, sans-serif;
  outline: none;
  box-shadow: inset 0 0 18px rgba(255, 164, 38, 0.045);
}
.early-listener-controls input::placeholder { color: #745d41; }
.early-listener-controls input:focus { border-color: #ffc058; box-shadow: inset 0 0 18px rgba(255, 164, 38, 0.07), 0 0 16px rgba(255, 164, 38, 0.12); }
.early-listener-controls button {
  min-height: 58px;
  border-color: #ffab32;
  background: linear-gradient(180deg, #a94318, #6f1d0c);
  color: #fff3d5;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 157, 0.12), 0 0 18px rgba(255, 65, 29, 0.16);
}

@media (max-width: 900px) {
  .station-story,
  .early-listener { grid-template-columns: 1fr; }
  .station-story-visual,
  .early-listener-console { border-left: 0; border-top: 1px solid rgba(230, 153, 43, 0.25); }
  .station-story-copy h2 { font-size: clamp(2.7rem, 9vw, 4.5rem); }
}

@media (max-width: 640px) {
  .station-story-copy,
  .early-listener-copy,
  .early-listener-console { padding: 30px 22px; }
  .station-story-copy h2,
  .early-listener-copy h2 {
    font-size: clamp(2.15rem, 11.5vw, 3.35rem);
    text-wrap: wrap;
  }
  .station-story-visual { min-height: 330px; padding: 48px 28px; }
  .station-story-visual img { width: min(100%, 280px); }
  .story-signal-lamp { top: 18px; right: 18px; }
  .story-frequency { left: 18px; right: 18px; bottom: 16px; }
  .early-listener-controls { grid-template-columns: 1fr; gap: 9px; }
  .early-listener-controls input { border-right: 1px solid #825619; }
  .early-listener-controls button { width: 100%; }
}