:root {
  --ink: #f6f1ff;
  --aqua: #87e6ff;
  --pink: #ef4cc9;
  --sun: #f5a236;
  --orange: #f47b3d;
  --violet: #7134c8;
  --wly-blue: #1f48d8;
  --broadcast-blue: #273ef2;
  --broadcast-blue-deep: #08115d;
  --broadcast-blue-mid: #1423b0;
  --broadcast-panel-stroke: rgba(248, 246, 255, 0.62);
  --broadcast-panel-stroke-soft: rgba(178, 218, 255, 0.4);
  --broadcast-orange: #c8761e;
  --weather-bars-panel:
    linear-gradient(
      180deg,
      rgba(193, 212, 255, 0.94) 0% 12.5%,
      rgba(167, 190, 252, 0.94) 12.5% 25%,
      rgba(139, 167, 246, 0.94) 25% 37.5%,
      rgba(110, 143, 242, 0.95) 37.5% 50%,
      rgba(82, 119, 235, 0.95) 50% 62.5%,
      rgba(57, 94, 225, 0.96) 62.5% 75%,
      rgba(38, 72, 198, 0.97) 75% 87.5%,
      rgba(16, 38, 126, 0.98) 87.5% 100%
    );
  --weather-bars-card:
    linear-gradient(
      180deg,
      rgba(198, 216, 255, 0.96) 0% 12.5%,
      rgba(173, 194, 252, 0.96) 12.5% 25%,
      rgba(145, 173, 248, 0.96) 25% 37.5%,
      rgba(115, 149, 243, 0.97) 37.5% 50%,
      rgba(86, 124, 237, 0.97) 50% 62.5%,
      rgba(61, 99, 227, 0.98) 62.5% 75%,
      rgba(41, 76, 201, 0.98) 75% 87.5%,
      rgba(18, 40, 129, 0.99) 87.5% 100%
    );
  --weather-bars-overlay:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0% 12.5%,
      rgba(255, 255, 255, 0.06) 12.5% 25%,
      rgba(255, 255, 255, 0.04) 25% 37.5%,
      rgba(255, 255, 255, 0.02) 37.5% 50%,
      rgba(0, 0, 0, 0.02) 50% 62.5%,
      rgba(0, 0, 0, 0.05) 62.5% 75%,
      rgba(0, 0, 0, 0.08) 75% 87.5%,
      rgba(0, 0, 0, 0.14) 87.5% 100%
    );
  --night: #111525;
  --deep: #050711;
  --map-outline: #ef4cc9;
  --map-outline-fill: rgba(239, 76, 201, 0.055);
  --site-hue-shift: 0deg;
  --ticker-gap: 3.2rem;
  --ticker-distance: 50%;
  --ticker-duration: 16.7s;
  --font-display: "Orbitron", sans-serif;
  --font-ui: "Rajdhani", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-lore: "Cormorant Garamond", serif;
  --portal-duration: 7848ms;
  --juice-snap: cubic-bezier(0.18, 0.92, 0.26, 1.24);
  --cursor-default: url("../assets/cursor/vaporwave-hotline-white-plus/Normal Select.cur"), auto;
  --cursor-pointer: url("../assets/cursor/vaporwave-hotline-white-plus/Link Select.cur"), pointer;
  --cursor-alt: url("../assets/cursor/vaporwave-hotline-white-plus/Alternate Select.cur"), pointer;
  --cursor-help: url("../assets/cursor/vaporwave-hotline-white-plus/Help Select.cur"), help;
  --cursor-location: url("../assets/cursor/vaporwave-hotline-white-plus/Location Select.cur"), pointer;
  --cursor-person: url("../assets/cursor/vaporwave-hotline-white-plus/Person Select.cur"), pointer;
  --cursor-text: url("../assets/cursor/vaporwave-hotline-white-plus/Text Select.cur"), text;
  --cursor-precision: url("../assets/cursor/vaporwave-hotline-white-plus/Precision Select.cur"), crosshair;
  --cursor-move: url("../assets/cursor/vaporwave-hotline-white-plus/Move.cur"), move;
  --cursor-horizontal-resize: url("../assets/cursor/vaporwave-hotline-white-plus/Horizontal Resize.cur"), ew-resize;
  --cursor-vertical-resize: url("../assets/cursor/vaporwave-hotline-white-plus/Vertical Resize.cur"), ns-resize;
  --cursor-diagonal-resize-1: url("../assets/cursor/vaporwave-hotline-white-plus/Diagonal Resize 1.cur"), nwse-resize;
  --cursor-diagonal-resize-2: url("../assets/cursor/vaporwave-hotline-white-plus/Diagonal Resize 2.cur"), nesw-resize;
  --cursor-working: url("../assets/cursor/vaporwave-hotline-white-plus/Working In Background Modern.ani"), progress;
  --cursor-busy: url("../assets/cursor/vaporwave-hotline-white-plus/Busy Modern.ani"), wait;
  --cursor-unavailable: url("../assets/cursor/vaporwave-hotline-white-plus/Unavailable.cur"), not-allowed;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(135, 230, 255, 0.88) rgba(7, 14, 52, 0.74);
}

*::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

*::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, rgba(241, 252, 255, 0.14), rgba(12, 28, 104, 0.72) 32%, rgba(7, 14, 52, 0.9)),
    rgba(7, 14, 52, 0.84);
  border: 1px solid rgba(135, 230, 255, 0.32);
  box-shadow: inset 0 0 10px rgba(5, 8, 34, 0.72);
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  background:
    linear-gradient(180deg, rgba(243, 253, 255, 0.95) 0%, rgba(135, 230, 255, 0.95) 30%, rgba(55, 180, 255, 0.95) 64%, rgba(27, 86, 214, 0.95) 100%);
  border: 2px solid rgba(6, 12, 58, 0.92);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(241, 252, 255, 0.46),
    inset 0 -8px 12px rgba(8, 23, 116, 0.28),
    0 0 12px rgba(135, 230, 255, 0.42);
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #bff7ff 26%, #6eeaff 58%, #2f8dff 100%);
}

*::-webkit-scrollbar-corner {
  background: rgba(7, 14, 52, 0.92);
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: linear-gradient(135deg, #08173d 0%, #23257a 44%, #6a2d7f 72%, #a83f64 100%);
  color: var(--ink);
  font-family: var(--font-body);
  cursor: var(--cursor-default);
}

body.is-black-screen .screen-copy,
body.is-tuning .screen-copy {
  visibility: hidden;
}

body.is-tuning .static-canvas {
  display: block;
}

body.is-black-screen .black-screen {
  display: block;
}

body.is-black-screen .dream-video,
body.is-black-screen .screen-weather-map {
  visibility: hidden;
}

body.is-entering-world {
  background: #050711;
}

body.is-entering-world .monitor-rig {
  transform: rotate(-0.25deg) scale(1.035);
  opacity: 0.24;
  filter: blur(2px) brightness(1.25) saturate(1.2);
  transition: transform 900ms cubic-bezier(0.2, 0.82, 0.22, 1), opacity 900ms ease, filter 900ms ease;
}

body.is-entering-world .dream-stage {
  transform: scale(1.025);
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.2, 0.82, 0.22, 1), opacity 520ms ease 620ms;
}

body.is-entering-world .portal-zoom {
  display: block;
  animation: portalOpen var(--portal-duration) cubic-bezier(0.18, 0.82, 0.12, 1) forwards;
}

body.is-entering-world .portal-video {
  animation: portalVideoSurge var(--portal-duration) cubic-bezier(0.2, 0.82, 0.12, 1) forwards;
}

body.is-entering-world .portal-zoom::before {
  animation: portalRippleScan var(--portal-duration) linear forwards;
}

body.is-entering-world .portal-zoom::after {
  animation: portalSignalBloom var(--portal-duration) cubic-bezier(0.18, 0.82, 0.12, 1) forwards;
}

body.is-entering-world .portal-copy {
  animation: portalCopyLock var(--portal-duration) steps(2, end) forwards;
}

body.is-world-open {
  overflow: hidden;
  background: #06091a;
}

body.is-world-open .broadcast-shell {
  display: block;
  min-height: auto;
  padding: 0;
}

body.is-world-open .dream-stage {
  display: none;
}

body.is-world-open .dreamworld-page {
  display: block;
  opacity: 1;
  transform: none;
  animation: worldReveal 880ms var(--juice-snap) both;
}

body.is-world-open .world-shell {
  animation: dashboardShellPop 840ms var(--juice-snap) both;
}

body.is-world-open .world-header,
body.is-world-open .world-nav,
body.is-world-open .world-panel,
body.is-world-open .left-rail,
body.is-world-open .bottom-deck,
body.is-world-open .world-ticker {
  animation: dashboardPanelPop 720ms var(--juice-snap) both;
}

body.is-world-open .world-nav {
  animation-delay: 80ms;
}

body.is-world-open .map-panel {
  animation-delay: 130ms;
}

body.is-world-open .left-rail,
body.is-world-open .bottom-deck {
  animation-delay: 170ms;
}

body.is-powered-on .monitor-power-button {
  opacity: 1;
  animation: none;
  border-color: rgba(255, 240, 166, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    radial-gradient(circle at 48% 46%, rgba(255, 240, 166, 0.95), rgba(239, 76, 201, 0.5) 38%, rgba(31, 72, 216, 0.28) 66%, transparent 74%);
  box-shadow:
    0 0 0 4px rgba(255, 240, 166, 0.34),
    0 0 14px rgba(255, 240, 166, 0.72),
    0 0 34px rgba(239, 76, 201, 0.42);
}

button {
  font: inherit;
}

:where(.world-nav a, .world-nav button, .dream-button, .conditions-cycle-controls button, .panel-title-row button, .audio-row button, .news-location-link, .music-release-card, .music-track-card, .music-player-controls button, .pin-popup-close) {
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  transition:
    transform 180ms var(--juice-snap),
    filter 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

:where(.world-nav a, .world-nav button, .dream-button, .conditions-cycle-controls button, .panel-title-row button, .audio-row button, .news-location-link, .music-release-card, .music-track-card, .music-player-controls button, .pin-popup-close):active {
  transform: translateY(1px) scale(0.972);
  filter: brightness(1.18) saturate(1.22);
}

.broadcast-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.6vw, 24px);
  overflow: hidden;
}

.dream-stage {
  position: relative;
  width: min(1840px, 100%);
  height: min(900px, calc(100svh - clamp(16px, 3.2vw, 48px)));
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.dream-stage,
.monitor-rig {
  transition: transform 600ms ease, opacity 500ms ease, filter 500ms ease;
}

.dream-stage::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 9%;
  bottom: 7%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(5, 7, 17, 0.5), transparent 68%);
  filter: blur(26px);
  opacity: 0.82;
  pointer-events: none;
}

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(5, 8, 34, 0.18), rgba(5, 8, 34, 0.58) 62%, rgba(5, 8, 34, 0.78) 100%),
    radial-gradient(circle at 24% 24%, rgba(135, 230, 255, 0.2), transparent 34%),
    radial-gradient(circle at 74% 72%, rgba(245, 162, 54, 0.13), transparent 32%);
}

.ambient-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 24px,
      rgba(135, 230, 255, 0.08) 24px 26px,
      transparent 26px 72px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='84' viewBox='0 0 360 84'%3E%3Ctext x='0' y='55' fill='%2387e6ff' fill-opacity='.62' font-family='Segoe UI Symbol,Noto Sans Symbols 2,Arial Unicode MS,serif' font-size='36'%3E%E2%99%88%EF%B8%8E %E2%99%89%EF%B8%8E %E2%99%8A%EF%B8%8E %E2%99%8B%EF%B8%8E %E2%99%8C%EF%B8%8E %E2%99%8D%EF%B8%8E %E2%99%8E%EF%B8%8E %E2%99%8F%EF%B8%8E %E2%99%90%EF%B8%8E %E2%99%91%EF%B8%8E %E2%99%92%EF%B8%8E %E2%99%93%EF%B8%8E%3C/text%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='84' viewBox='0 0 360 84'%3E%3Ctext x='0' y='55' fill='%23fff0a6' fill-opacity='.38' font-family='Segoe UI Symbol,Noto Sans Symbols 2,Arial Unicode MS,serif' font-size='36'%3E%E2%99%93%EF%B8%8E %E2%99%92%EF%B8%8E %E2%99%91%EF%B8%8E %E2%99%90%EF%B8%8E %E2%99%8F%EF%B8%8E %E2%99%8E%EF%B8%8E %E2%99%8D%EF%B8%8E %E2%99%8C%EF%B8%8E %E2%99%8B%EF%B8%8E %E2%99%8A%EF%B8%8E %E2%99%89%EF%B8%8E %E2%99%88%EF%B8%8E%3C/text%3E%3C/svg%3E");
  background-size: 144px 144px, 360px 84px, 360px 84px;
  background-repeat: repeat;
  background-position: 0 0, 0 0, 180px 42px;
  opacity: 0.24;
  mix-blend-mode: screen;
  animation: zodiacFieldDrift 34s linear infinite;
}

.ambient-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at center, transparent 0 38%, rgba(5, 8, 34, 0.48) 78%, rgba(5, 8, 34, 0.7) 100%);
  opacity: 0.72;
  mix-blend-mode: overlay;
}

.monitor-rig {
  position: relative;
  z-index: 1;
  width: min(1640px, 96vw, calc((100svh - clamp(28px, 4vw, 64px)) * 1.55));
  aspect-ratio: 1558 / 972;
  transform: rotate(-0.25deg);
  filter:
    drop-shadow(0 42px 48px rgba(0, 0, 0, 0.42))
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.26));
}

.monitor-rig::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 5%;
  bottom: -4.5%;
  height: 11%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.28) 44%, transparent 74%);
  filter: blur(16px);
  transform: skewX(-8deg);
  opacity: 0.88;
  pointer-events: none;
}

.screen-content {
  position: absolute;
  left: 6.45%;
  top: 10.25%;
  width: 66.65%;
  height: 82.1%;
  z-index: 2;
  overflow: hidden;
  border-radius: 8.8% / 11.6%;
  background: #10182b;
  transform: translateZ(0);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.72),
    inset 0 0 130px rgba(111, 247, 255, 0.16);
  filter: contrast(1.2) saturate(1.7) sepia(0.12) hue-rotate(8deg);
}

.screen-content::before,
.screen-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.screen-content::before {
  background:
    radial-gradient(circle at 20% 22%, rgba(244, 123, 61, 0.38), transparent 26%),
    radial-gradient(circle at 82% 26%, rgba(239, 76, 201, 0.28), transparent 28%),
    radial-gradient(circle at 70% 78%, rgba(46, 76, 236, 0.3), transparent 34%),
    linear-gradient(100deg, rgba(33, 63, 185, 0.32), rgba(239, 76, 201, 0.2) 48%, rgba(245, 162, 54, 0.2));
  mix-blend-mode: color-dodge;
  opacity: 0.68;
  animation: colorBleed 9s ease-in-out infinite alternate;
}

.screen-content::after {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.13) 0 1px,
      rgba(0, 0, 0, 0.09) 1px 3px,
      transparent 3px 6px
    ),
    linear-gradient(90deg, rgba(255, 28, 96, 0.12), transparent 16%, transparent 84%, rgba(0, 255, 255, 0.12));
  mix-blend-mode: overlay;
  opacity: 0.76;
  animation: scanCrawl 1.8s linear infinite;
}

.dream-video {
  position: absolute;
  left: -14%;
  top: -14%;
  width: 128%;
  height: 128%;
  object-fit: cover;
  transform-origin: center;
  filter: saturate(1.62) contrast(1.18) brightness(0.88) hue-rotate(8deg);
  will-change: transform;
}

.screen-weather-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255, 225, 101, 0.28) 24.4% 25.1%, transparent 25.4% 100%),
    linear-gradient(63deg, transparent 0 58%, rgba(111, 247, 255, 0.3) 58.3% 59%, transparent 59.4% 100%),
    radial-gradient(circle at 22% 28%, rgba(255, 122, 223, 0.34), transparent 18%),
    radial-gradient(circle at 68% 58%, rgba(111, 247, 255, 0.32), transparent 22%);
  mix-blend-mode: hard-light;
  opacity: 0.82;
  animation: mapPulse 8s ease-in-out infinite;
}

.static-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

.black-screen {
  position: absolute;
  inset: -2.75%;
  z-index: 6;
  display: none;
  background: #000;
  pointer-events: none;
}

.screen-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.11) 0 1px,
      rgba(0, 0, 0, 0.1) 1px 2px,
      transparent 2px 5px
    );
  mix-blend-mode: overlay;
  opacity: 0.72;
  pointer-events: none;
}

.screen-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 1.15vw, 18px);
  padding: clamp(18px, 3vw, 48px);
  text-align: center;
  color: #f2edff;
  text-shadow:
    3px 3px 0 rgba(36, 44, 129, 0.86),
    -2px -2px 0 rgba(255, 255, 255, 0.18),
    0 0 16px rgba(239, 76, 201, 0.32);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.intro-commercial {
  position: relative;
  width: min(86%, 900px);
  height: clamp(240px, 28vw, 390px);
  display: block;
  transform: skewX(-1.2deg);
}

.intro-title-stack {
  position: absolute;
  left: 6%;
  top: 4%;
  z-index: 2;
  width: min(56%, 520px);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  min-width: 0;
}

.wly-bug {
  width: clamp(96px, 10.5vw, 168px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02em;
  padding: clamp(0.46rem, 0.78vw, 0.76rem);
  border: 3px solid rgba(246, 241, 255, 0.86);
  border-radius: 18%;
  background:
    linear-gradient(180deg, rgba(45, 86, 223, 0.94), rgba(30, 59, 166, 0.94)),
    var(--wly-blue);
  box-shadow:
    0 0 0 2px rgba(26, 24, 75, 0.7),
    0 7px 16px rgba(13, 20, 69, 0.42);
  color: #f2efff;
  font-family: var(--font-display);
  line-height: 1;
  overflow: hidden;
  text-align: center;
}

.wly-bug span {
  display: inline-block;
  font-size: clamp(2rem, 3.62vw, 3.72rem);
  font-weight: 800;
  line-height: 0.74;
  white-space: nowrap;
  transform: scaleX(0.8);
  transform-origin: center;
}

.wly-bug small {
  display: inline-block;
  font-size: clamp(0.64rem, 1.08vw, 1.08rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: scaleX(0.88);
  transform-origin: center;
}

.host-intro-card {
  position: absolute;
  left: 48%;
  top: 4%;
  z-index: 4;
  width: clamp(210px, 27vw, 380px);
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  transform: translate3d(-2%, 0, 0);
}

.host-intro-card::before,
.host-intro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.host-intro-card::before {
  background: radial-gradient(ellipse at 50% 54%, rgba(255, 240, 166, 0.1), transparent 46%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.host-intro-card::after {
  background: radial-gradient(ellipse at center, transparent 0 58%, rgba(5, 7, 17, 0.24) 100%);
  mix-blend-mode: overlay;
  opacity: 0.42;
}

.host-intro-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.host-intro-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: auto;
  filter:
    saturate(1.16)
    contrast(1.14)
    brightness(1.02)
    drop-shadow(0 0 16px rgba(245, 162, 54, 0.18))
    drop-shadow(0 0 24px rgba(239, 76, 201, 0.16));
}

.host-intro-card figcaption {
  position: absolute;
  left: 50%;
  top: calc(94% + 0.24rem);
  z-index: 3;
  width: max-content;
  max-width: 142%;
  transform: translateX(-50%);
  color: #fff0a6;
  font: 800 clamp(0.58rem, 0.86vw, 0.82rem) var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(31, 32, 93, 0.86),
    0 0 10px rgba(239, 76, 201, 0.46),
    0 0 16px rgba(245, 162, 54, 0.22);
  white-space: nowrap;
}

.host-intro-card figcaption strong {
  color: #f8f7ff;
  font-weight: 900;
}

.title-kicker {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.1em;
  padding: 0.2em 0.72em 0.18em;
  border-top: 2px solid rgba(246, 241, 255, 0.62);
  border-bottom: 2px solid rgba(246, 241, 255, 0.62);
  background: linear-gradient(90deg, rgba(34, 69, 204, 0.32), rgba(245, 162, 54, 0.52), rgba(239, 76, 201, 0.24));
}

.weather-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.1vw, 3.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: #fff0a6;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow:
    2px 2px 0 rgba(36, 44, 129, 0.86),
    0 0 14px rgba(239, 76, 201, 0.34);
}

.title-on {
  font-family: var(--font-ui);
  font-size: clamp(0.76rem, 1.55vw, 1.48rem);
  font-weight: 400;
  line-height: 1;
  color: #fff0a6;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(37, 36, 101, 0.86),
    0 0 10px rgba(245, 162, 54, 0.42);
}

.dream-button {
  position: relative;
  overflow: hidden;
  min-width: min(84%, 390px);
  min-height: 58px;
  padding: 0.78rem 1.2rem;
  border: 2px solid rgba(255, 249, 215, 0.92);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(245, 162, 54, 0.98), rgba(239, 76, 201, 0.92)),
    #f5a236;
  color: #102039;
  cursor: var(--cursor-pointer);
  box-shadow:
    0 0 0 4px rgba(18, 38, 68, 0.7),
    0 0 24px rgba(239, 76, 201, 0.46),
    inset 0 2px 0 rgba(255, 255, 255, 0.48);
  font-size: clamp(0.95rem, 1.55vw, 1.32rem);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.dream-button::after {
  content: "";
  position: absolute;
  inset: -20% -45%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, 0.58) 49%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-64%);
}

body.is-boot-ready .dream-button {
  animation: enterReadyPulse 1.05s ease-in-out infinite alternate;
}

body.is-boot-ready .dream-button::after {
  opacity: 0.82;
  animation: enterReadySweep 1.55s ease-in-out infinite;
}

.dream-button:hover,
.dream-button:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.18) brightness(1.06);
  box-shadow:
    0 0 0 4px rgba(18, 38, 68, 0.7),
    0 0 34px rgba(111, 247, 255, 0.48),
    inset 0 2px 0 rgba(255, 255, 255, 0.58);
  outline: none;
}

.dream-button.is-entering {
  animation: buttonGlitch 520ms steps(2, jump-none) 2;
}

.portal-zoom {
  position: fixed;
  left: 23.8vw;
  top: 26vh;
  width: 41vw;
  height: 43vh;
  z-index: 30;
  display: none;
  overflow: hidden;
  border-radius: 9% / 12%;
  opacity: 0;
  transform: scale(1);
  background: #050711;
  box-shadow:
    0 0 40px rgba(245, 162, 54, 0.34),
    0 0 90px rgba(239, 76, 201, 0.28);
}

.portal-zoom::before,
.portal-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.portal-zoom::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, rgba(0, 0, 0, 0.12) 1px 3px, transparent 3px 6px),
    radial-gradient(circle at center, transparent 0 42%, rgba(5, 7, 17, 0.72) 100%);
  mix-blend-mode: overlay;
}

.portal-zoom::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 162, 54, 0.24), transparent 26%),
    linear-gradient(90deg, rgba(239, 76, 201, 0.18), transparent 48%, rgba(135, 230, 255, 0.16));
  mix-blend-mode: screen;
}

.portal-video {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: saturate(1.7) contrast(1.2) brightness(0.9);
}

.portal-copy {
  position: absolute;
  left: 50%;
  bottom: 16%;
  z-index: 3;
  transform: translateX(-50%);
  color: #fff0a6;
  font: 800 clamp(0.85rem, 1.4vw, 1.2rem) var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(245, 162, 54, 0.6);
}

.dreamworld-page {
  display: none;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  padding: clamp(18px, 3vw, 54px);
  opacity: 0;
  transform: scale(1.04);
  color: #dcd7ff;
  background:
    linear-gradient(180deg, #070b2c 0%, #11184d 44%, #2b174f 72%, #0a0f2b 100%);
  isolation: isolate;
  perspective: 1800px;
  filter: hue-rotate(var(--site-hue-shift));
  transition: filter 900ms ease;
}

body.is-site-hue-cycle .dreamworld-page {
  animation: siteHueCycle 96s ease-in-out infinite alternate;
}

.world-bg-video {
  position: fixed;
  left: -18%;
  top: -18%;
  z-index: -4;
  width: 136%;
  height: 136%;
  object-fit: cover;
  opacity: 0;
  transform-origin: center;
  transform: scale(1.08);
  transition:
    opacity 920ms ease,
    filter 920ms ease,
    transform 2400ms ease;
}

.dreamworld-page .world-bg-video.is-active {
  opacity: 0.44;
}

.dreamworld-page[data-map-mood="beach"] .world-bg-video.is-active,
.dreamworld-page[data-map-mood="coastal"] .world-bg-video.is-active,
.dreamworld-page[data-map-mood="music"] .world-bg-video.is-active {
  opacity: 0.5;
  filter: saturate(1.18) contrast(1.05) hue-rotate(-8deg);
  transform: scale(1.12);
}

.dreamworld-page[data-map-mood="broadcast"] .world-bg-video.is-active,
.dreamworld-page[data-map-mood="dreamworld"] .world-bg-video.is-active {
  filter: saturate(1.08) contrast(1.08);
}

.dreamworld-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 16%, rgba(245, 162, 54, 0.22), transparent 24%),
    radial-gradient(circle at 22% 84%, rgba(239, 76, 201, 0.2), transparent 28%),
    linear-gradient(rgba(6, 9, 26, 0.32), rgba(6, 9, 26, 0.72));
}

.sunset-cloud-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.94;
}

.sunset-cloud-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.78;
}

.desktop-dashboard-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.world-shell {
  --dashboard-side-column: minmax(238px, 292px);
  position: relative;
  z-index: 1;
  width: min(1600px, 100%);
  height: calc(100vh - clamp(36px, 6vw, 108px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(135, 230, 255, 0.32);
  border-radius: clamp(13px, 1.25vw, 22px) / clamp(18px, 1.8vw, 32px);
  background:
    linear-gradient(rgba(6, 9, 26, 0.08), rgba(6, 9, 26, 0.32)),
    radial-gradient(circle at 58% 12%, rgba(245, 162, 54, 0.12), transparent 28%),
    radial-gradient(circle at 62% 88%, rgba(239, 76, 201, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(14, 28, 85, 0.44), rgba(31, 26, 92, 0.48));
  box-shadow:
    inset 0 0 34px rgba(246, 241, 255, 0.08),
    inset 0 0 120px rgba(0, 0, 0, 0.18),
    inset 0 0 80px rgba(135, 230, 255, 0.08),
    0 26px 70px rgba(0, 0, 0, 0.42);
  transform: perspective(1800px) rotateX(0.24deg) scale(0.998);
  transform-origin: center;
}

.world-shell::before,
.world-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-shell::before {
  z-index: 40;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(0, 0, 0, 0.055) 1px 3px, transparent 3px 6px),
    linear-gradient(90deg, rgba(255, 64, 150, 0.06), transparent 20%, transparent 80%, rgba(90, 230, 255, 0.05));
  opacity: 0.56;
}

.world-shell::after {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 8%, rgba(245, 162, 54, 0.22), transparent 24%),
    radial-gradient(circle at 72% 54%, rgba(135, 230, 255, 0.12), transparent 28%);
  opacity: 0.56;
}

.dashboard-crt-overlay {
  display: none;
}

.dashboard-crt-overlay::before,
.dashboard-crt-overlay::after {
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
}

.dashboard-crt-overlay::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  background-size: 96px 96px, 7px 100%;
  opacity: 0.1;
}

.dashboard-crt-overlay::after {
  top: -26%;
  height: 24%;
  inset-inline: -4%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.06) 28%, rgba(135, 230, 255, 0.12) 48%, rgba(239, 76, 201, 0.09) 58%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.05) 3px 4px);
  filter: blur(1.8px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: dashboardRollBand 11.8s steps(1, end) infinite;
}

.world-header,
.world-grid,
.world-ticker {
  position: relative;
  z-index: 3;
}

.world-nav {
  position: relative;
  z-index: 20;
}

.world-header {
  position: relative;
  display: grid;
  grid-template-columns:
    clamp(88px, 7.2vw, 116px)
    minmax(0, 1fr)
    max-content
    minmax(184px, max-content);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(14px, 1.45vw, 24px);
  min-height: clamp(92px, 7.6vw, 118px);
  padding: clamp(10px, 1vw, 15px) clamp(12px, 1vw, 18px);
  border-bottom: 1px solid rgba(135, 230, 255, 0.26);
  background:
    linear-gradient(90deg, rgba(7, 12, 44, 0.2), rgba(39, 25, 91, 0.04), rgba(7, 12, 44, 0.14));
}

.world-brand {
  display: contents;
}

.world-logo {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: start;
  align-self: center;
  width: clamp(74px, 6.4vw, 98px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  padding: clamp(0.36rem, 0.55vw, 0.54rem);
  border: 3px solid rgba(246, 241, 255, 0.9);
  border-radius: 18%;
  background: linear-gradient(180deg, rgba(45, 86, 223, 0.96), rgba(30, 59, 166, 0.96));
  color: #f2efff;
  font-family: var(--font-display);
  box-shadow: 0 0 18px rgba(135, 230, 255, 0.24);
  overflow: hidden;
  text-align: center;
}

.world-brand-copy,
.world-brand > div:not(.world-logo) {
  display: contents;
}

.world-brand-copy h1,
.world-brand-copy > strong {
  grid-column: 2;
}

.world-brand-copy h1 {
  grid-row: 1;
  align-self: end;
}

.world-brand-copy > strong {
  grid-row: 2;
  align-self: start;
}

.world-brand-copy {
  min-width: 0;
  grid-template-rows: auto auto;
}

.world-logo span {
  display: inline-block;
  font-size: clamp(1.66rem, 2.34vw, 2.42rem);
  font-weight: 800;
  line-height: 0.74;
  white-space: nowrap;
  transform: scaleX(0.76);
  transform-origin: center;
}

.world-logo small {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(0.52rem, 0.72vw, 0.76rem);
  font-weight: 700;
  line-height: 1;
  transform: scaleX(0.88);
  transform-origin: center;
}

.world-brand p,
.signal-origin span {
  margin: 0;
  color: #d7c9ff;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.95vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-brand h1 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding-right: 0.08em;
  padding-bottom: 0.03em;
  overflow: visible;
  color: #fffdf4;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 2.45vw, 2.62rem);
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
  font-kerning: none;
  text-rendering: geometricPrecision;
  -webkit-text-stroke: 0.7px rgba(152, 217, 255, 0.54);
  text-shadow:
    2px 2px 0 rgba(13, 24, 105, 0.95),
    0 0 7px rgba(255, 255, 255, 0.3),
    0 0 14px rgba(116, 205, 255, 0.24);
}

.world-brand h1::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(31, 72, 216, 0.76);
  -webkit-text-stroke: 2px rgba(9, 17, 93, 0.74);
  text-shadow:
    2px 2px 0 rgba(5, 9, 52, 0.96),
    0 0 18px rgba(135, 230, 255, 0.2);
}

.world-brand strong,
.world-panel h2,
.world-ticker strong {
  color: #f5a236;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.world-brand strong {
  display: block;
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(0.68rem, 0.9vw, 0.9rem);
  min-width: 0;
}

.host-name {
  display: inline-block;
  color: #fff0a6;
  font-size: calc(1em + 5px);
  line-height: 0.9;
  animation: hostNameHueCycle 18s linear infinite;
  text-shadow:
    0 0 8px rgba(255, 240, 166, 0.34),
    0 0 14px rgba(245, 162, 54, 0.24);
}

.signal-origin {
  position: relative;
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 244px;
  padding-top: 4px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: clamp(56px, 5.4vw, 82px);
  border: 0;
  background: transparent;
  appearance: none;
  color: #dcd7ff;
  font-family: var(--font-mono);
  text-align: left;
  cursor: default;
}

.orbit-bug {
  position: absolute;
  right: 0;
  top: -2px;
  width: clamp(42px, 4.1vw, 62px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(135, 230, 255, 0.34);
  background: rgba(8, 14, 52, 0.4);
  padding: 0;
  appearance: none;
  cursor: pointer;
  box-shadow:
    0 0 18px rgba(245, 162, 54, 0.24),
    inset 0 0 20px rgba(239, 76, 201, 0.18);
}

.orbit-bug:hover,
.orbit-bug:focus-visible {
  outline: none;
  filter: brightness(1.16) saturate(1.22);
}

.orbit-bug img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orbit-bug::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245, 162, 54, 0.4), rgba(239, 76, 201, 0.28), rgba(135, 230, 255, 0.3));
  opacity: 0.42;
  pointer-events: none;
}

.signal-origin strong {
  color: #87e6ff;
  text-transform: uppercase;
}

.signal-origin-credit {
  margin-top: 0.18rem;
  color: var(--pink);
  font: 800 clamp(0.38rem, 0.5vw, 0.5rem)/1.16 var(--font-mono);
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(239, 76, 201, 0.28);
  cursor: pointer;
}

.signal-origin-credit:hover,
.signal-origin-credit:focus-visible {
  color: #ff9de4;
  outline: none;
  text-decoration: underline;
}

.persistent-social-links {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  right: auto;
  bottom: auto;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 0.8vw, 12px);
  width: max-content;
  max-width: 100%;
  min-height: clamp(38px, 3vw, 48px);
  padding: clamp(4px, 0.34vw, 6px) clamp(8px, 0.72vw, 12px);
  border: 1px solid rgba(135, 230, 255, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(84, 143, 255, 0.5), rgba(24, 54, 176, 0.48)),
    rgba(14, 34, 126, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(135, 230, 255, 0.12);
  pointer-events: auto;
}

.persistent-social-links::before {
  content: none;
}

.persistent-social-links[hidden] {
  display: none;
}

.persistent-social-link {
  display: grid;
  place-items: center;
  width: clamp(31px, 2.52vw, 42px);
  height: clamp(31px, 2.52vw, 42px);
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  transition:
    transform 180ms var(--juice-snap),
    border-color 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease;
}

.persistent-social-link:hover,
.persistent-social-link:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.16) saturate(1.2);
  box-shadow: none;
  outline: none;
}

.persistent-social-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: #87e6ff;
  -webkit-mask-image: var(--social-icon-mask);
  mask-image: var(--social-icon-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter:
    drop-shadow(0 1px 0 rgba(5, 8, 34, 0.98))
    drop-shadow(0 0 7px rgba(5, 8, 34, 0.78));
}

.persistent-social-link.has-text {
  width: auto;
  min-width: clamp(34px, 2.5vw, 42px);
  padding-inline: 0.1rem;
  color: var(--social-brand-fill, #87e6ff);
  font: 900 0.62rem/1 var(--font-mono);
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 1),
    0 0 8px rgba(135, 230, 255, 0.2);
}

.cms-login-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.08) 1px 4px),
    rgba(5, 8, 34, 0.78);
  backdrop-filter: blur(5px);
}

.cms-admin-page {
  min-height: 100vh;
  overflow: hidden;
}

.cms-admin-login {
  position: relative;
  min-height: 100vh;
}

.cms-login-modal[hidden] {
  display: none;
}

.cms-login-card {
  position: relative;
  width: min(420px, 100%);
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(135, 230, 255, 0.42);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(245, 162, 54, 0.11), transparent 18%, rgba(239, 76, 201, 0.12)),
    linear-gradient(180deg, rgba(26, 35, 108, 0.94), rgba(8, 14, 52, 0.96));
  box-shadow:
    inset 0 0 36px rgba(239, 76, 201, 0.14),
    0 24px 80px rgba(0, 0, 0, 0.5);
  color: #f2efff;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.cms-login-card p {
  margin: 0 0 0.4rem;
  color: #87e6ff;
  font-size: 0.74rem;
  font-weight: 800;
}

.cms-login-card h1,
.cms-login-card h2 {
  margin: 0 0 1.2rem;
  color: #f5a236;
  font: 900 clamp(1.45rem, 4vw, 2.4rem) var(--font-display);
  letter-spacing: 0;
}

.cms-login-card form,
.cms-login-card label {
  display: grid;
  gap: 0.48rem;
}

.cms-login-card form {
  gap: 0.9rem;
}

.cms-login-card label {
  color: #d7c9ff;
  font-size: 0.72rem;
  font-weight: 800;
}

.cms-login-card input {
  width: 100%;
  border: 1px solid rgba(135, 230, 255, 0.34);
  border-radius: 5px;
  padding: 0.68rem 0.72rem;
  background: rgba(5, 8, 34, 0.72);
  color: #f2efff;
  font: 800 0.9rem var(--font-mono);
}

.cms-login-card form > button,
.cms-login-close {
  border: 1px solid rgba(135, 230, 255, 0.34);
  border-radius: 5px;
  background: rgba(31, 72, 216, 0.28);
  color: #dcd7ff;
  font: 800 0.78rem var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.cms-login-card form > button {
  min-height: 40px;
  color: #fff0a6;
  border-color: rgba(245, 162, 54, 0.58);
  background: linear-gradient(180deg, rgba(245, 162, 54, 0.28), rgba(239, 76, 201, 0.16));
}

.cms-login-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
}

.cms-login-error {
  margin: -0.15rem 0 0 !important;
  color: #ff7e8f !important;
}

.world-nav {
  display: grid;
  grid-template-columns: var(--dashboard-side-column) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid rgba(135, 230, 255, 0.22);
  border-top: 1px solid rgba(135, 230, 255, 0.12);
  margin: clamp(5px, 0.55vw, 8px) clamp(9px, 1vw, 15px) clamp(7px, 0.75vw, 12px);
}

.nav-column-fill {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 38px;
  overflow: hidden;
  border-right: 1px solid rgba(135, 230, 255, 0.2);
  border-left: 1px solid rgba(135, 230, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(239, 76, 201, 0.24), rgba(245, 162, 54, 0.2), rgba(30, 36, 114, 0.24)),
    rgba(30, 36, 114, 0.2);
  box-shadow: inset 0 0 22px rgba(245, 162, 54, 0.08);
}

.symbol-ticker {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  min-height: 38px;
  color: rgba(255, 240, 166, 0.82);
  font-family: var(--font-lore);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-emoji: text;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation:
    symbolTickerScroll 38s linear infinite,
    zodiacHueCycle 20s linear infinite;
  text-shadow: 0 0 8px rgba(135, 230, 255, 0.24);
}

.symbol-ticker span {
  padding-inline: 0.75rem;
}

.nav-column-fill .symbol-ticker {
  width: max-content;
  min-width: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(24px, 2.25vw, 32px);
  column-gap: 3px;
  justify-content: start;
  align-items: center;
  animation:
    symbolTickerScroll 38s linear infinite,
    zodiacHueCycle 20s linear infinite;
  letter-spacing: 0;
  will-change: transform;
}

.nav-column-fill .symbol-ticker span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  line-height: 1;
}

.nav-links {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.nav-links > a,
.nav-item > button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

.world-nav a,
.world-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0.46rem 0.42rem;
  border-right: 1px solid rgba(135, 230, 255, 0.22);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  color: #dcd7ff;
  background: rgba(30, 36, 114, 0.28);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.world-nav a.is-active,
.world-nav button.is-active {
  color: #ffd05d;
  background: rgba(239, 76, 201, 0.12);
  box-shadow:
    inset 0 -2px 0 rgba(245, 162, 54, 0.64),
    0 0 16px rgba(239, 76, 201, 0.16);
}

.nav-item {
  position: relative;
  display: flex;
  min-width: 0;
}

.nav-item > button {
  height: 100%;
}

.nav-item:hover > button,
.nav-item:focus-within > button,
.world-nav a:hover,
.world-nav a:focus-visible {
  color: #fff0a6;
  background: rgba(239, 76, 201, 0.16);
  transform: translateY(-1px);
  box-shadow: inset 0 0 16px rgba(245, 162, 54, 0.12);
  outline: none;
}

.world-shell.is-section-switching .world-nav a.is-active {
  animation: sectionTabPop 528ms var(--juice-snap) both;
}

.world-shell.is-section-switching .map-panel,
.world-shell.is-section-switching .panel-view-news,
.world-shell.is-section-switching #musicPanelView,
.world-shell.is-section-switching #forecastPanelView,
.world-shell.is-section-switching #socialsPanelView,
.world-shell.is-section-switching #shopPanelView {
  animation: sectionPanelSnap 528ms var(--juice-snap) both;
}

.nav-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  z-index: 30;
  display: grid;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  border: 1px solid rgba(135, 230, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(28, 30, 98, 0.94), rgba(10, 18, 62, 0.94)),
    rgba(8, 14, 52, 0.96);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.35),
    inset 0 0 16px rgba(239, 76, 201, 0.12);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav-menu a {
  min-height: auto;
  border-right: 0;
  border-bottom: 1px solid rgba(135, 230, 255, 0.16);
  padding: 0.48rem 0.5rem;
  background: transparent;
  font-size: clamp(0.58rem, 0.68vw, 0.74rem);
}

.world-grid {
  display: grid;
  grid-template-columns: var(--dashboard-side-column) 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 7px;
  padding: 0 8px 8px;
  flex: 1;
  min-height: 0;
}

.world-panel {
  border: 1px solid var(--broadcast-panel-stroke-soft);
  border-radius: 7px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(232, 248, 255, 0.22) 0%, rgba(83, 136, 255, 0.22) 26%, rgba(23, 56, 190, 0.32) 58%, rgba(7, 18, 91, 0.68) 100%),
    radial-gradient(circle at 16% 0%, rgba(195, 232, 255, 0.32), transparent 38%),
    linear-gradient(180deg, rgba(34, 57, 178, 0.6), rgba(9, 19, 84, 0.7)),
    rgba(8, 14, 52, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 30px rgba(135, 230, 255, 0.1),
    0 0 18px rgba(239, 76, 201, 0.08);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.world-panel,
.wly-news-board,
.forecast-board,
.music-board,
.site-content-board,
.dream-map {
  border-color: var(--broadcast-panel-stroke-soft);
}

.wly-news-board,
.forecast-board,
.music-board,
.site-content-board,
.site-channel-hero,
.site-channel-media,
.site-links-panel,
.site-commerce-hero,
.site-shop-card {
  position: relative;
  isolation: isolate;
}

.wly-news-board::before,
.forecast-board::before,
.music-board::before,
.site-content-board::before,
.site-channel-hero::before,
.site-channel-media::before,
.site-links-panel::before,
.site-commerce-hero::before,
.site-shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 0 1.1px, transparent 1.55px) 0 0 / 5px 5px,
    radial-gradient(circle at 3px 3px, rgba(5, 8, 34, 0.18) 0 1.1px, transparent 1.45px) 0 0 / 8px 8px,
    linear-gradient(180deg, rgba(238, 251, 255, 0.34) 0%, rgba(164, 216, 255, 0.26) 18%, rgba(49, 91, 226, 0.16) 48%, rgba(5, 16, 95, 0.28) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.1) 1px 3px, transparent 3px 7px);
  mix-blend-mode: overlay;
  opacity: 0.58;
}

.wly-news-board > *,
.forecast-board > *,
.music-board > *,
.site-content-board > *,
.site-channel-hero > *,
.site-channel-media > *,
.site-links-panel > *,
.site-commerce-hero > *,
.site-shop-card > * {
  position: relative;
  z-index: 1;
}

.news-card,
.forecast-card,
.music-release-rail,
.music-focus-panel,
.music-track-list,
.music-notes-panel,
.music-release-card,
.music-track-card,
.site-channel-hero,
.site-links-panel,
.site-commerce-hero,
.site-shop-card {
  border-color: var(--broadcast-panel-stroke);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 28px rgba(135, 230, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.world-panel h2 {
  margin: 0 0 0.45rem;
  font-size: clamp(0.68rem, 0.82vw, 0.86rem);
  letter-spacing: 0.03em;
}

.conditions-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.conditions-cycle-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
}

.conditions-cycle-controls button {
  width: 36px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(135, 230, 255, 0.62);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(50, 129, 244, 0.48), rgba(22, 57, 154, 0.68));
  color: #d9fbff;
  font: 900 1.25rem/1 var(--font-mono);
  cursor: pointer;
  box-shadow:
    inset 0 0 14px rgba(135, 230, 255, 0.16),
    0 0 12px rgba(31, 113, 216, 0.2);
}

.conditions-cycle-controls button:hover,
.conditions-cycle-controls button:focus-visible,
.music-player-controls button:hover,
.music-player-controls button:focus-visible,
.panel-title-row button:hover,
.panel-title-row button:focus-visible,
.audio-row button:hover,
.audio-row button:focus-visible {
  border-color: rgba(255, 240, 166, 0.74);
  color: #fff7c8;
  filter: brightness(1.14) saturate(1.18);
  box-shadow:
    inset 0 0 18px rgba(135, 230, 255, 0.2),
    0 0 18px rgba(245, 162, 54, 0.24);
  outline: none;
}

.left-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  grid-row: 1;
}

.transmissions-panel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.45rem;
}

.transmissions-panel > * {
  position: relative;
  z-index: 1;
}

.transmissions-panel::after {
  content: "";
  position: absolute;
  left: -16%;
  right: -16%;
  bottom: -9%;
  z-index: 2;
  height: 26%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 82%, rgba(246, 161, 66, 0.24), transparent 48%),
    radial-gradient(ellipse at 46% 74%, rgba(255, 127, 148, 0.25), transparent 54%),
    radial-gradient(ellipse at 78% 86%, rgba(216, 91, 151, 0.18), transparent 46%),
    linear-gradient(90deg, transparent, rgba(255, 204, 118, 0.11), transparent);
  opacity: 0.48;
}

.conditions-panel,
.transmissions-panel,
.now-panel,
.signal-panel,
.bulletin-panel {
  padding: clamp(8px, 0.85vw, 12px);
}

.conditions-panel {
  position: relative;
  min-height: clamp(292px, 38vh, 330px);
}

.temperature-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0.45rem 0 0.35rem;
  padding: 0.18rem 0.18rem 0.18rem 0.1rem;
}

.temperature-row strong {
  color: #78ef9a;
  font-size: clamp(1.55rem, 2.35vw, 2.45rem);
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 12px rgba(120, 239, 154, 0.24);
}

.temperature-row strong.is-cold {
  color: #87e6ff;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 12px rgba(135, 230, 255, 0.34);
}

.temperature-row strong.is-nice {
  color: #78ef9a;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 12px rgba(120, 239, 154, 0.28);
}

.temperature-row strong.is-hot {
  color: #ff7e8f;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 12px rgba(255, 126, 143, 0.34);
}

.weather-icon {
  position: relative;
  flex: 0 0 86px;
  width: 86px;
  height: 62px;
  margin-left: 0.1rem;
  padding: 8px 9px 7px;
}

.weather-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #f5a236;
  box-shadow: 0 0 14px rgba(245, 162, 54, 0.52);
}

.weather-icon span {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 58px;
  height: 24px;
  border-radius: 999px;
  background: #dcd7ff;
  box-shadow: -16px 4px 0 #dcd7ff, 13px 3px 0 #dcd7ff;
}

.condition-weather-icon[data-weather-type="sun"] span,
.condition-weather-icon[data-weather-type="moon"] span,
.condition-weather-icon[data-weather-type="spark"] span,
.condition-weather-icon[data-weather-type="warning"] span {
  display: none;
}

.condition-weather-icon[data-weather-type="moon"]::before {
  background: transparent;
  box-shadow: -11px 0 0 4px #fff0a6, 0 0 14px rgba(255, 240, 166, 0.48);
}

.condition-weather-icon[data-weather-type="sun"]::before {
  left: 12px;
  top: 5px;
  width: 40px;
  height: 40px;
  background: #f5a236;
  box-shadow:
    0 0 0 6px rgba(245, 162, 54, 0.18),
    0 0 18px rgba(245, 162, 54, 0.58);
}

.condition-weather-icon[data-weather-type="rain"] span::after,
.condition-weather-icon[data-weather-type="snow"] span::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -11px;
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: #87e6ff;
  box-shadow: 14px 0 0 #87e6ff, 28px 0 0 #87e6ff;
}

.condition-weather-icon[data-weather-type="snow"] span::after {
  height: 4px;
  border-radius: 50%;
  box-shadow: 14px 0 0 #87e6ff, 28px 0 0 #87e6ff, 7px 7px 0 #87e6ff, 21px 7px 0 #87e6ff;
}

.condition-weather-icon[data-weather-type="storm"] span::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -13px;
  width: 14px;
  height: 21px;
  background: #f5a236;
  clip-path: polygon(48% 0, 100% 0, 64% 44%, 100% 44%, 30% 100%, 48% 55%, 8% 55%);
}

.condition-weather-icon[data-weather-type="wind"]::before {
  display: none;
}

.condition-weather-icon[data-weather-type="wind"] span {
  left: 0;
  top: 8px;
  width: 64px;
  height: 6px;
  background: #fff0a6;
  box-shadow: 14px 14px 0 #fff0a6, 2px 28px 0 #fff0a6;
}

.condition-weather-icon[data-weather-type="warning"]::before {
  left: 8px;
  top: 4px;
  width: 44px;
  height: 39px;
  border-radius: 0;
  background: #fff0a6;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.condition-weather-icon[data-weather-type="spark"]::before {
  left: 8px;
  top: 2px;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: #fff0a6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.conditions-panel p,
.transmissions-panel p,
.signal-panel p,
.bulletin-panel p,
.bulletin-copy,
.now-panel p {
  margin: 0;
  color: #d9d0ff;
  font-family: var(--font-mono);
  line-height: 1.35;
  font-size: clamp(0.64rem, 0.78vw, 0.82rem);
  text-transform: uppercase;
}

.conditions-panel #currentWeatherSummary {
  min-height: 3.25em;
  padding: 0.28rem 0.12rem 0.44rem 0;
  overflow: hidden;
}

.conditions-panel dl {
  display: grid;
  gap: 0.28rem;
  margin: 0.35rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(135, 230, 255, 0.22);
  font-family: var(--font-mono);
}

.conditions-panel dt {
  color: #f5a236;
  font-weight: 800;
  text-transform: uppercase;
}

.conditions-panel dd {
  margin: 0;
}

.signal-bars {
  display: flex;
  gap: 5px;
}

.signal-bars span,
.signal-bars i {
  display: block;
  width: 11px;
  height: 18px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #87e6ff, #1f8be8);
  box-shadow: 0 0 8px rgba(135, 230, 255, 0.18);
}

.signal-bars-mid span {
  background: linear-gradient(180deg, #fff0a6, #f5a236 48%, #ef4cc9);
  box-shadow: 0 0 8px rgba(245, 162, 54, 0.2);
}

.signal-bars-high span {
  background: linear-gradient(180deg, #f8f7ff, #87e6ff 42%, #23d8ff);
  box-shadow: 0 0 10px rgba(135, 230, 255, 0.34);
}

.signal-bars-low span {
  background: linear-gradient(180deg, #ffb1bb, #ff7e8f 52%, #ef4cc9);
  box-shadow: 0 0 8px rgba(239, 76, 201, 0.24);
}

.signal-bars i {
  background: rgba(135, 230, 255, 0.16);
}

.conditions-panel .is-weather-value-settling,
.conditions-panel .is-weather-value-rising,
.conditions-panel .is-weather-value-falling {
  animation-duration: 620ms;
  animation-timing-function: var(--juice-snap);
  animation-fill-mode: both;
}

.conditions-panel .is-weather-value-settling {
  animation-name: weatherValueSettle;
}

.conditions-panel .is-weather-value-rising {
  animation-name: weatherValueRise;
}

.conditions-panel .is-weather-value-falling {
  animation-name: weatherValueFall;
}

.signal-bars.is-weather-value-rising span,
.signal-bars.is-weather-value-rising i,
.signal-bars.is-weather-value-falling span,
.signal-bars.is-weather-value-falling i,
.signal-bars.is-weather-value-settling span,
.signal-bars.is-weather-value-settling i {
  animation: signalBarSettle 520ms var(--juice-snap) both;
  animation-delay: calc(var(--bar-index, 0) * 24ms);
}

.transmissions-panel ul {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
}

.transmissions-panel li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid rgba(135, 230, 255, 0.18);
}

.transmissions-panel a {
  color: inherit;
  text-decoration: none;
}

.transmissions-panel a:hover p,
.transmissions-panel a:focus-visible p {
  color: #fff0a6;
}

.transmissions-panel li span {
  color: #dcd7ff;
  font-size: 1.4rem;
}

.transmissions-panel li .transmission-weather-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
}

.transmission-weather-icon-image {
  width: 38px;
  height: 36px;
}

.transmissions-panel small {
  display: block;
  color: #b5aee4;
}

.transmissions-pager {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 0.38rem;
  min-height: 30px;
  position: relative;
  z-index: 3;
}

.transmissions-pager button {
  width: 36px;
  height: 28px;
  border: 1px solid rgba(135, 230, 255, 0.42);
  border-radius: 5px;
  color: #f8f7ff;
  background:
    linear-gradient(180deg, rgba(80, 113, 210, 0.78), rgba(19, 48, 129, 0.86)),
    #14266b;
  font: 900 0.9rem/1 var(--font-mono);
  cursor: pointer;
}

.transmissions-pager button:disabled {
  cursor: default;
  opacity: 0.42;
}

.transmissions-pager span {
  justify-self: center;
  color: #fff0a6;
  font: 900 0.62rem/1 var(--font-mono);
  text-transform: uppercase;
}

.panel-note {
  margin-top: 0 !important;
  position: relative;
  z-index: 3;
}

.map-panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-title-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 30px;
  margin-bottom: 7px;
  border: 1px solid rgba(255, 240, 166, 0.28);
  border-radius: 4px 4px 2px 2px;
  padding: 0.28rem 0.48rem;
  background:
    linear-gradient(100deg, rgba(89, 44, 69, 0.44), rgba(56, 55, 159, 0.28) 48%, rgba(20, 35, 176, 0.18)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 14px rgba(245, 162, 54, 0.08);
}

.panel-title-row::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 7px;
  z-index: 0;
  width: min(68%, 760px);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(246, 162, 54, 0.82) 0%, rgba(212, 86, 31, 0.78) 46%, rgba(148, 35, 55, 0.62) 75%, rgba(45, 36, 136, 0.14) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 166, 0.26),
    inset 0 -1px 0 rgba(92, 27, 36, 0.46),
    0 0 16px rgba(245, 162, 54, 0.16);
  opacity: 0.92;
}

.panel-title-row > * {
  position: relative;
  z-index: 1;
}

.panel-title-row button,
.audio-row button {
  border: 1px solid rgba(135, 230, 255, 0.34);
  background: rgba(31, 72, 216, 0.28);
  color: #dcd7ff;
  font: 800 0.8rem var(--font-mono);
  text-transform: uppercase;
}

.panel-title-row button,
.panel-action {
  padding: 0.46rem 0.75rem;
  border-radius: 5px;
}

.panel-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(135, 230, 255, 0.34);
  background: rgba(31, 72, 216, 0.28);
  color: #dcd7ff;
  font: 800 0.8rem var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
}

.panel-action.is-readout {
  color: #fff0a6;
  border-color: rgba(245, 162, 54, 0.46);
  background: rgba(239, 76, 201, 0.12);
}

.world-panel h2,
.conditions-panel dt,
.forecast-weather-card dt,
.music-release-rail h3,
.music-track-list h3,
.music-notes-panel h3,
.music-library-header h3,
.music-library-section h3,
.music-detail-toolbar span,
.music-now-track-list h4,
.site-content-kicker,
.site-shop-status {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  min-height: 1.25em;
  padding: 0.18em 1.35em 0.18em 0.42em;
  color: #fff0a6;
  line-height: 1.14;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 1),
    2px 2px 0 rgba(4, 7, 34, 0.96),
    0 0 7px rgba(5, 8, 34, 0.88);
}

.world-panel h2::before,
.conditions-panel dt::before,
.forecast-weather-card dt::before,
.music-release-rail h3::before,
.music-track-list h3::before,
.music-notes-panel h3::before,
.music-library-header h3::before,
.music-library-section h3::before,
.music-detail-toolbar span::before,
.music-now-track-list h4::before,
.site-content-kicker::before,
.site-shop-status::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.16em;
  bottom: auto;
  left: 0;
  z-index: -1;
  min-height: 1.35em;
  height: calc(100% - 0.02em);
  transform: translateY(-50%);
  clip-path: polygon(0 0, calc(100% - 0.82em) 0, 100% 50%, calc(100% - 0.82em) 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(245, 162, 54, 0.82) 0%, rgba(230, 92, 30, 0.76) 48%, rgba(142, 28, 48, 0.58) 78%, rgba(31, 45, 150, 0.1) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 166, 0.22),
    inset 0 -1px 0 rgba(92, 27, 36, 0.36);
  opacity: 0.78;
}

.panel-title-row h2 {
  min-height: 0;
  padding: 0;
  line-height: 1.12;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 1),
    2px 2px 0 rgba(4, 7, 34, 0.96),
    0 0 7px rgba(5, 8, 34, 0.88);
}

.panel-title-row h2::before {
  content: none;
}

.dream-map {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(135, 230, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(rgba(9, 16, 58, 0.08), rgba(9, 16, 58, 0.32)),
    linear-gradient(180deg, rgba(15, 34, 95, 0.82), rgba(7, 14, 52, 0.86));
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35);
}

.panel-view[hidden],
.panel-title-row[hidden] {
  display: none !important;
}

.wly-news-board {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid rgba(135, 230, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(241, 252, 255, 0.3) 0%, rgba(143, 205, 255, 0.28) 22%, rgba(45, 85, 226, 0.42) 55%, rgba(6, 17, 94, 0.9) 100%),
    linear-gradient(90deg, rgba(198, 114, 27, 0.2), transparent 18%, transparent 82%, rgba(239, 76, 201, 0.14)),
    radial-gradient(circle at 52% 10%, rgba(214, 241, 255, 0.32), transparent 36%),
    linear-gradient(180deg, rgba(32, 56, 190, 0.74), rgba(10, 18, 92, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 70px rgba(0, 0, 0, 0.28);
}

.news-observation-board {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(18px, 2.2vw, 34px);
  border: 1px solid rgba(188, 169, 255, 0.3);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 8%, rgba(92, 44, 210, 0.58), transparent 42%),
    linear-gradient(180deg, rgba(29, 15, 124, 0.92), rgba(11, 10, 92, 0.96) 48%, rgba(8, 6, 68, 0.98)),
    #120a5f;
  color: #f7edff;
  font-family: var(--font-mono);
  text-transform: uppercase;
  box-shadow:
    inset 0 0 58px rgba(0, 0, 0, 0.44),
    inset 0 0 0 2px rgba(65, 46, 190, 0.38),
    0 0 28px rgba(51, 34, 168, 0.22);
}

.news-observation-board::before,
.news-observation-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.news-observation-board::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(0, 0, 0, 0.12) 1px 3px, transparent 3px 6px),
    linear-gradient(90deg, rgba(255, 77, 184, 0.1), transparent 18%, transparent 78%, rgba(135, 230, 255, 0.08));
  mix-blend-mode: overlay;
  opacity: 0.82;
}

.news-observation-board::after {
  border-top: 2px solid rgba(248, 246, 255, 0.72);
  border-bottom: 2px solid rgba(248, 246, 255, 0.62);
  opacity: 0.68;
  transform: translateY(calc(100% - 3.2rem));
}

.news-observation-title,
.news-observation-header,
.news-observation-list,
.news-observation-footer {
  position: relative;
  z-index: 1;
}

.news-observation-title {
  margin: 0;
  color: #f2efff;
  font: 900 clamp(1rem, 1.7vw, 1.8rem)/1.05 var(--font-mono);
  text-align: center;
  letter-spacing: 0;
  text-shadow:
    2px 2px 0 rgba(16, 8, 78, 0.96),
    0 0 8px rgba(210, 190, 255, 0.36);
}

.news-observation-grid {
  display: grid;
  grid-template-columns: minmax(112px, 0.86fr) 4ch minmax(0, 2fr) minmax(58px, 0.42fr);
  gap: clamp(8px, 1.2vw, 20px);
  align-items: baseline;
}

.news-observation-header {
  color: #bcaaff;
  font: 900 clamp(0.62rem, 0.9vw, 0.95rem)/1 var(--font-mono);
  text-shadow: 2px 2px 0 rgba(5, 8, 34, 0.92);
}

.news-observation-list {
  display: grid;
  align-content: start;
  gap: 0.08rem;
  min-height: 0;
}

.news-observation-row {
  width: 100%;
  padding: clamp(2px, 0.34vw, 5px) 0;
  border: 0;
  color: #f8f7ff;
  background: transparent;
  font: 900 clamp(0.82rem, 1.45vw, 1.7rem)/1.05 var(--font-mono);
  text-align: left;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(9, 7, 78, 0.96),
    0 0 8px rgba(248, 246, 255, 0.18);
  cursor: var(--cursor-pointer);
}

.news-observation-row:hover,
.news-observation-row:focus-visible {
  color: #fff0a6;
  background: rgba(135, 230, 255, 0.08);
  outline: 1px solid rgba(255, 240, 166, 0.42);
}

.news-observation-condition {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-observation-temp,
.news-observation-wind {
  white-space: nowrap;
}

.news-observation-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.45rem;
  border-top: 2px solid rgba(248, 246, 255, 0.72);
  color: #f8f7ff;
  font: 900 clamp(0.72rem, 1vw, 1.05rem)/1.1 var(--font-mono);
  text-shadow: 2px 2px 0 rgba(9, 7, 78, 0.96);
}

.news-back-button {
  align-self: start;
  width: max-content;
  max-width: 100%;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(255, 240, 166, 0.44);
  border-radius: 2px;
  color: #fff0a6;
  background:
    linear-gradient(90deg, rgba(245, 162, 54, 0.24), rgba(31, 72, 216, 0.16)),
    rgba(5, 8, 34, 0.56);
  font: 900 0.72rem var(--font-mono);
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
  box-shadow: 0 0 12px rgba(135, 230, 255, 0.14);
}

.news-back-button:hover,
.news-back-button:focus-visible {
  color: #f8f7ff;
  border-color: rgba(135, 230, 255, 0.74);
  outline: none;
}

.wly-news-board.is-news-detail {
  gap: clamp(8px, 0.9vw, 12px);
}

.news-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  scroll-margin-block: 40%;
  padding: clamp(12px, 1.15vw, 18px) clamp(12px, 1.15vw, 18px) clamp(12px, 1.15vw, 18px) clamp(48px, 3.3vw, 62px);
  border: 1px solid rgba(178, 218, 255, 0.38);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(236, 250, 255, 0.24) 0%, rgba(120, 183, 255, 0.2) 24%, rgba(42, 78, 225, 0.34) 54%, rgba(7, 17, 104, 0.94) 100%),
    radial-gradient(circle at 50% 4%, rgba(220, 244, 255, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(63, 79, 246, 0.9), rgba(24, 42, 188, 0.93) 50%, rgba(10, 16, 99, 0.97)),
    var(--broadcast-blue-mid);
  color: #f2efff;
  font-family: var(--font-mono);
  text-transform: uppercase;
  box-shadow:
    inset 0 0 22px rgba(135, 230, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    transform 220ms var(--juice-snap),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.news-card.news-card-detail {
  flex: 1 0 auto;
  min-height: calc(100% - 3.2rem);
  padding: clamp(18px, 2vw, 30px);
}

.news-card.news-card-detail h3 {
  max-width: 18ch;
  font-size: clamp(1.35rem, 2.4vw, 2.6rem);
}

.news-card.news-card-detail p {
  max-width: 78ch;
  font-size: clamp(0.78rem, 1vw, 1rem);
}

.news-card.news-card-detail figure,
.news-card.news-card-detail .news-media,
.news-card.news-card-detail .news-embed {
  width: min(860px, 100%);
}

.news-card.news-card-detail img,
.news-card.news-card-detail .news-media-video video {
  max-height: 460px;
}

.news-card:hover,
.news-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 240, 166, 0.54);
  filter: brightness(1.05) saturate(1.08);
  box-shadow:
    inset 0 0 24px rgba(135, 230, 255, 0.11),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(239, 76, 201, 0.12);
}

.news-card.news-card-detail:hover,
.news-card.news-card-detail:focus-within {
  transform: none;
}

.news-card.is-targeted {
  border-color: rgba(255, 240, 166, 0.82);
  box-shadow:
    inset 0 0 28px rgba(245, 162, 54, 0.18),
    0 0 24px rgba(245, 162, 54, 0.2);
}

.news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244, 253, 255, 0.16) 0%, transparent 34%, rgba(3, 10, 70, 0.18) 100%),
    linear-gradient(90deg, rgba(198, 114, 27, 0.24), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 0 1.15px, transparent 1.6px) 0 0 / 5px 5px;
  mix-blend-mode: screen;
}

.news-weather-symbol {
  position: absolute;
  left: clamp(12px, 1vw, 18px);
  top: clamp(14px, 1.15vw, 19px);
  z-index: 2;
  width: clamp(24px, 2vw, 34px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 240, 166, 0.48);
  border-radius: 50%;
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.48);
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  box-shadow: 0 0 12px rgba(135, 230, 255, 0.18);
}

.news-weather-icon-image {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(5, 8, 34, 0.96))
    drop-shadow(0 0 5px rgba(135, 230, 255, 0.22));
}

.news-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  color: #fff0a6;
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
  font-weight: 800;
}

.news-card h3,
.news-card p,
.news-card a,
.news-card button,
.news-card figure,
.news-media,
.news-embed {
  position: relative;
  z-index: 1;
}

.news-card h3 {
  margin: 0 0 0.55rem;
  color: #f2efff;
  font-size: clamp(0.95rem, 1.28vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.news-card p {
  margin: 0;
  color: #e1dcff;
  font-size: clamp(0.68rem, 0.78vw, 0.88rem);
  line-height: 1.48;
}

.news-card p + p {
  margin-top: 0.72rem;
}

.news-card p strong {
  color: #fff0a6;
}

.news-card p em {
  color: #f8f7ff;
  font-style: italic;
}

.news-card p a {
  display: inline;
  margin-top: 0;
}

.news-location-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 0.7rem;
  padding: 0.34rem 0.52rem;
  border: 1px solid rgba(255, 240, 166, 0.42);
  border-radius: 999px;
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.48);
  font: 900 clamp(0.58rem, 0.66vw, 0.72rem) var(--font-mono);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(135, 230, 255, 0.12);
}

.news-location-link:hover,
.news-location-link:focus-visible {
  border-color: rgba(135, 230, 255, 0.74);
  color: #f8f7ff;
  transform: translateY(-1px);
  box-shadow:
    0 0 12px rgba(135, 230, 255, 0.2),
    0 0 20px rgba(245, 162, 54, 0.14);
}

.news-card a {
  display: inline-flex;
  margin-top: 0.8rem;
  color: #fff0a6;
  font-weight: 800;
}

.news-card figure {
  margin: 0 0 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(135, 230, 255, 0.26);
  width: min(520px, 100%);
  max-height: none;
}

.news-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  filter: saturate(1.2) contrast(1.05) brightness(0.82);
}

.news-media {
  width: min(560px, 100%);
  margin: 0 0 0.75rem;
}

.news-media .media-lazy-shell,
.news-media audio,
.news-media video {
  display: block;
  width: 100%;
}

.news-media-video {
  overflow: hidden;
  border: 1px solid rgba(135, 230, 255, 0.26);
  background: rgba(5, 8, 34, 0.7);
}

.news-media-video .media-lazy-shell,
.news-media-video video {
  max-height: 320px;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 760px) {
  .news-observation-board {
    padding: 0.9rem;
  }

  .news-observation-grid {
    grid-template-columns: minmax(72px, 0.75fr) 3ch minmax(0, 1.45fr) minmax(44px, 0.42fr);
    gap: 0.45rem;
  }

  .news-observation-row {
    font-size: clamp(0.68rem, 3vw, 1rem);
  }

  .news-observation-header,
  .news-observation-footer {
    font-size: 0.58rem;
  }
}

.forecast-board {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.65vw, 10px);
  padding: clamp(7px, 0.78vw, 10px);
  border: 1px solid rgba(135, 230, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(241, 252, 255, 0.32) 0%, rgba(147, 208, 255, 0.28) 24%, rgba(46, 84, 224, 0.42) 58%, rgba(6, 16, 88, 0.92) 100%),
    linear-gradient(90deg, rgba(198, 114, 27, 0.22), transparent 18%, transparent 82%, rgba(135, 230, 255, 0.16)),
    radial-gradient(circle at 28% 8%, rgba(255, 240, 166, 0.18), transparent 28%),
    radial-gradient(circle at 58% 10%, rgba(217, 244, 255, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(35, 57, 194, 0.75), rgba(8, 15, 84, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 70px rgba(0, 0, 0, 0.3);
}

.forecast-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(178, 218, 255, 0.28);
  border-radius: 6px;
  background:
    var(--weather-bars-card),
    radial-gradient(circle at 50% 0%, rgba(222, 246, 255, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(64, 82, 248, 0.88), rgba(28, 45, 194, 0.93) 50%, rgba(9, 15, 93, 0.97)),
    var(--broadcast-blue-mid);
  color: #f2efff;
  box-shadow:
    inset 0 0 22px rgba(135, 230, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.forecast-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--weather-bars-overlay),
    linear-gradient(90deg, rgba(198, 114, 27, 0.22), transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.18), transparent 30%);
  mix-blend-mode: screen;
}

.forecast-card > * {
  position: relative;
  z-index: 1;
}

.forecast-week-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 42px;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(239, 76, 201, 0.12), transparent 26%, rgba(135, 230, 255, 0.1)),
    rgba(5, 8, 34, 0.38);
}

.forecast-week-controls span {
  justify-self: center;
  color: #fff0a6;
  font: 900 0.76rem/1 var(--font-mono);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 240, 166, 0.22);
}

.forecast-week-controls button {
  width: 42px;
  height: 30px;
  border: 1px solid rgba(135, 230, 255, 0.42);
  border-radius: 5px;
  color: #f8f7ff;
  background:
    linear-gradient(180deg, rgba(80, 113, 210, 0.82), rgba(19, 48, 129, 0.86)),
    #14266b;
  font: 900 1rem/1 var(--font-mono);
  box-shadow:
    inset 0 0 13px rgba(135, 230, 255, 0.16),
    0 0 10px rgba(74, 126, 255, 0.18);
  transition:
    transform 180ms var(--juice-snap),
    border-color 180ms ease,
    filter 180ms ease;
}

.forecast-week-controls button:not(:disabled):hover,
.forecast-week-controls button:not(:disabled):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 240, 166, 0.68);
  filter: brightness(1.12) saturate(1.12);
}

.forecast-week-controls button:disabled {
  cursor: default;
  opacity: 0.42;
  filter: saturate(0.7);
}

.forecast-week-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.forecast-week-grid {
  --forecast-card-min-height: 328px;
  display: grid;
  grid-template-columns: repeat(var(--forecast-columns, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--forecast-card-min-height), 1fr);
  gap: clamp(10px, 1vw, 16px);
  align-items: stretch;
  height: 100%;
  min-width: 0;
}

.forecast-card {
  grid-column: span var(--forecast-span, 1);
  min-height: var(--forecast-card-min-height);
  animation: forecastCardIn 380ms var(--juice-snap) both;
  animation-delay: var(--forecast-delay, 0ms);
  transition:
    transform 220ms var(--juice-snap),
    border-color 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease;
}

.forecast-card:hover,
.forecast-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 240, 166, 0.54);
  filter: brightness(1.06) saturate(1.1);
  box-shadow:
    inset 0 0 24px rgba(135, 230, 255, 0.11),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(239, 76, 201, 0.12);
}

.forecast-weather-card {
  display: grid;
  grid-template-rows: auto auto minmax(196px, 1fr) auto auto minmax(2.8em, auto) auto;
  gap: clamp(0.34rem, 0.62vw, 0.56rem);
  justify-items: stretch;
  min-width: 0;
  padding: clamp(11px, 0.95vw, 16px);
}

.forecast-day-label,
.forecast-video-header span {
  color: #f8f7ff;
  font: 900 clamp(0.66rem, 0.72vw, 0.82rem)/1.1 var(--font-mono);
  text-shadow:
    -1px 0 0 rgba(5, 8, 34, 0.96),
    1px 0 0 rgba(5, 8, 34, 0.96),
    0 -1px 0 rgba(5, 8, 34, 0.96),
    0 1px 0 rgba(5, 8, 34, 0.96),
    -1px -1px 0 rgba(5, 8, 34, 0.82),
    1px -1px 0 rgba(5, 8, 34, 0.82),
    -1px 1px 0 rgba(5, 8, 34, 0.82),
    1px 1px 0 rgba(5, 8, 34, 0.82);
  text-transform: uppercase;
}

.forecast-weather-glyph {
  width: 58px;
  height: 44px;
  margin-top: 0.05rem;
}

.forecast-weather-glyph::before,
.forecast-weather-glyph::after {
  content: "";
  display: block;
}

.forecast-weather-glyph-cloud::before,
.forecast-weather-glyph-rain::before,
.forecast-weather-glyph-snow::before,
.forecast-weather-glyph-storm::before {
  width: 48px;
  height: 21px;
  margin: 18px 0 0 8px;
  border-radius: 999px;
  background: #dcd7ff;
  box-shadow:
    -13px 4px 0 #dcd7ff,
    12px 3px 0 #dcd7ff,
    0 0 14px rgba(135, 230, 255, 0.28);
}

.forecast-weather-glyph-sun::before {
  width: 42px;
  height: 42px;
  margin: 3px 0 0 8px;
  border-radius: 50%;
  background: #f5a236;
  box-shadow:
    0 0 0 6px rgba(245, 162, 54, 0.16),
    0 0 18px rgba(245, 162, 54, 0.58);
}

.forecast-weather-glyph-moon::before {
  width: 42px;
  height: 42px;
  margin: 3px 0 0 14px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    -12px 0 0 4px #fff0a6,
    0 0 16px rgba(255, 240, 166, 0.5);
}

.forecast-weather-glyph-wind::before {
  width: 54px;
  height: 6px;
  margin: 9px 0 0 3px;
  border-radius: 999px;
  background: #fff0a6;
  box-shadow:
    14px 14px 0 #fff0a6,
    2px 28px 0 #fff0a6,
    0 0 12px rgba(255, 240, 166, 0.34);
}

.forecast-weather-glyph-warning::before {
  width: 44px;
  height: 39px;
  margin: 4px 0 0 8px;
  background: #fff0a6;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 16px rgba(255, 240, 166, 0.36);
}

.forecast-weather-glyph-spark::before {
  width: 42px;
  height: 42px;
  margin: 3px 0 0 8px;
  background: #fff0a6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 12px rgba(239, 76, 201, 0.42));
}

.forecast-weather-glyph-rain::after,
.forecast-weather-glyph-snow::after {
  width: 4px;
  height: 9px;
  margin: 1px 0 0 19px;
  border-radius: 999px;
  background: #87e6ff;
  box-shadow: 14px 0 0 #87e6ff, 28px 0 0 #87e6ff;
}

.forecast-weather-glyph-snow::after {
  height: 4px;
  border-radius: 50%;
  box-shadow: 14px 0 0 #87e6ff, 28px 0 0 #87e6ff, 7px 7px 0 #87e6ff, 21px 7px 0 #87e6ff;
}

.forecast-weather-glyph-storm::after {
  width: 15px;
  height: 22px;
  margin: -4px 0 0 28px;
  background: #f5a236;
  clip-path: polygon(48% 0, 100% 0, 64% 44%, 100% 44%, 30% 100%, 48% 55%, 8% 55%);
}

.forecast-card h3 {
  margin: 0;
  color: var(--sun);
  font: 900 clamp(1.02rem, 1.24vw, 1.5rem)/1.04 var(--font-display);
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.96),
    0 0 12px rgba(245, 162, 54, 0.18);
  text-transform: uppercase;
}

.forecast-weather-card strong {
  justify-self: center;
  color: #78ef9a;
  font: 900 clamp(1.86rem, 2.7vw, 3.35rem)/0.92 var(--font-display);
  text-align: center;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 18px rgba(120, 239, 154, 0.32);
}

.forecast-weather-card p {
  margin: 0;
  color: #f2efff;
  font: 800 clamp(0.68rem, 0.74vw, 0.88rem)/1.36 var(--font-mono);
  text-shadow: 0 1px 0 rgba(5, 8, 34, 0.94);
  text-transform: uppercase;
}

.forecast-weather-card p:first-of-type {
  color: #ffffff;
  font-weight: 900;
}

.forecast-weather-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.24rem 0.55rem;
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(135, 230, 255, 0.18);
  font: 800 clamp(0.52rem, 0.58vw, 0.62rem)/1.25 var(--font-mono);
  text-transform: uppercase;
}

.forecast-weather-card dt {
  color: #f5a236;
}

.forecast-weather-card dd {
  margin: 0;
  color: #dcd7ff;
}

.forecast-video-card {
  display: block;
  grid-column: span var(--forecast-span, 1);
  min-height: var(--forecast-card-min-height);
  padding: 0;
  background: #02030d;
}

.forecast-video-card::before {
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(239, 76, 201, 0.18), transparent 42%, rgba(135, 230, 255, 0.12));
  opacity: 0.72;
}

.forecast-video-short {
  background: #02030d;
}

.forecast-video-landscape {
  background: #02030d;
}

.forecast-video-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.forecast-video-header h3 {
  text-align: right;
}

.forecast-video-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: inherit;
  background: #02030d;
}

.forecast-video-short .forecast-video-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.forecast-video-landscape .forecast-video-shell {
  aspect-ratio: auto;
  min-height: 100%;
}

.forecast-video-shell video,
.forecast-video-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #02030d;
}

.forecast-video-shell .media-lazy-shell,
.forecast-video-shell .media-lazy-shell > iframe,
.forecast-video-shell .media-lazy-shell > video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
}

.forecast-video-shell video {
  object-fit: cover;
}

.forecast-video-shell .media-lazy-shell > video {
  object-fit: cover;
}

.forecast-video-short .forecast-video-shell video,
.forecast-video-short .forecast-video-shell iframe,
.forecast-video-short .forecast-video-shell .media-lazy-shell {
  min-height: 100%;
}

.forecast-video-short .forecast-video-shell video {
  object-fit: cover;
}

.forecast-video-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #bdb4f3;
  font: 900 0.72rem/1.4 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

.forecast-video-caption {
  margin: 0;
  color: #dcd7ff;
  font: 800 0.72rem/1.35 var(--font-mono);
  text-transform: uppercase;
}

.forecast-empty-state {
  margin: auto;
  width: min(520px, 100%);
  padding: 1rem;
  border: 1px dashed rgba(135, 230, 255, 0.34);
  border-radius: 6px;
  color: #dcd7ff;
  background: rgba(5, 8, 34, 0.44);
  font: 900 0.8rem/1.45 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

@keyframes forecastCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.music-board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(230px, 320px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(8px, 0.8vw, 12px);
  overflow: hidden;
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid rgba(135, 230, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(241, 252, 255, 0.28) 0%, rgba(141, 204, 255, 0.25) 24%, rgba(43, 82, 224, 0.4) 57%, rgba(6, 17, 88, 0.91) 100%),
    radial-gradient(circle at 48% 16%, rgba(245, 162, 54, 0.17), transparent 31%),
    radial-gradient(circle at 62% 7%, rgba(218, 244, 255, 0.28), transparent 38%),
    linear-gradient(90deg, rgba(198, 114, 27, 0.18), transparent 22%, transparent 78%, rgba(135, 230, 255, 0.14)),
    linear-gradient(180deg, rgba(28, 52, 184, 0.76), rgba(9, 19, 82, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 70px rgba(0, 0, 0, 0.28);
}

.music-release-rail,
.music-focus-panel,
.music-track-list,
.music-notes-panel {
  min-height: 0;
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(235, 250, 255, 0.16) 0%, rgba(105, 168, 255, 0.14) 26%, rgba(25, 56, 190, 0.24) 58%, rgba(5, 12, 72, 0.78) 100%),
    radial-gradient(circle at 50% 0%, rgba(216, 242, 255, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(26, 43, 162, 0.62), rgba(6, 11, 55, 0.8));
  box-shadow: inset 0 0 24px rgba(239, 76, 201, 0.08);
}

.music-release-rail,
.music-track-list,
.music-notes-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
  padding: 0.75rem;
}

.music-release-rail h3,
.music-track-list h3,
.music-notes-panel h3 {
  margin: 0 0 0.25rem;
  color: #f5a236;
  font: 900 0.72rem var(--font-mono);
  text-transform: uppercase;
}

.music-release-card,
.music-track-card {
  width: 100%;
  border: 1px solid rgba(135, 230, 255, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(232, 249, 255, 0.18) 0%, rgba(101, 164, 255, 0.14) 25%, rgba(31, 63, 200, 0.24) 58%, rgba(7, 14, 76, 0.82) 100%),
    radial-gradient(circle at 50% 0%, rgba(218, 243, 255, 0.18), transparent 37%),
    linear-gradient(180deg, rgba(31, 49, 168, 0.66), rgba(8, 14, 70, 0.82));
  color: #f2efff;
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition:
    transform 190ms var(--juice-snap),
    border-color 190ms ease,
    background 190ms ease,
    box-shadow 190ms ease,
    filter 190ms ease;
}

.music-release-card:hover,
.music-release-card:focus-visible,
.music-track-card:hover,
.music-track-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 240, 166, 0.58);
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    inset 0 0 16px rgba(135, 230, 255, 0.08),
    0 0 16px rgba(239, 76, 201, 0.16);
  outline: none;
}

.music-release-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
}

.music-release-card img {
  width: 52px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255, 240, 166, 0.28);
  border-radius: 4px;
  filter: saturate(1.14) contrast(1.06);
}

.music-release-card strong,
.music-track-card strong {
  display: block;
  color: #fff0a6;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.music-release-card small,
.music-track-card small {
  display: block;
  margin-top: 0.14rem;
  color: #bdb4f3;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.music-release-card.is-active,
.music-track-card.is-active {
  border-color: rgba(245, 162, 54, 0.72);
  background: linear-gradient(180deg, rgba(245, 162, 54, 0.18), rgba(239, 76, 201, 0.1));
}

.music-focus-panel {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(160px, 250px) minmax(0, 1fr);
  gap: clamp(12px, 1vw, 18px);
  overflow: hidden;
  padding: clamp(12px, 1.1vw, 18px);
}

.music-cover-wrap {
  min-width: 0;
  align-self: start;
  border: 1px solid rgba(255, 240, 166, 0.32);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(5, 8, 34, 0.6);
  box-shadow: 0 0 22px rgba(239, 76, 201, 0.16);
}

.music-cover-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.08) brightness(0.88);
}

.music-focus-copy {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  min-width: 0;
}

.music-kicker {
  margin: 0;
  color: #87e6ff;
  font: 900 0.7rem var(--font-mono);
  text-transform: uppercase;
}

.music-focus-copy h3 {
  margin: 0;
  color: #f5a236;
  font: 900 clamp(1.5rem, 2.8vw, 3rem) var(--font-display);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(245, 162, 54, 0.34);
}

.music-focus-copy p {
  margin: 0;
  color: #e1dcff;
  font: 700 0.9rem/1.45 var(--font-body);
}

.music-meta-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.music-meta-chip {
  border: 1px solid rgba(135, 230, 255, 0.22);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.46);
  font: 900 0.62rem var(--font-mono);
  text-transform: uppercase;
}

.music-track-list {
  grid-column: 2;
  grid-row: 2;
}

.music-track-card {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.56rem 0.62rem;
}

.music-track-card > span:first-child {
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 1px solid rgba(245, 162, 54, 0.34);
  border-radius: 4px;
  color: #f5a236;
  background: rgba(5, 8, 34, 0.48);
  font: 900 0.78rem var(--font-mono);
}

.music-notes-panel {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.music-notes-panel article {
  padding: 0.62rem;
  border: 1px solid rgba(135, 230, 255, 0.16);
  border-radius: 5px;
  background: rgba(8, 14, 52, 0.46);
}

.music-notes-panel h4 {
  margin: 0 0 0.35rem;
  color: #fff0a6;
  font: 900 0.68rem var(--font-mono);
  text-transform: uppercase;
}

.music-notes-panel p,
.music-notes-panel a {
  margin: 0;
  color: #e1dcff;
  font: 700 0.76rem/1.45 var(--font-body);
}

.music-notes-panel a {
  display: block;
  margin-top: 0.35rem;
  color: #fff0a6;
}

.music-board {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  overflow: auto;
}

.music-library-header {
  display: grid;
  gap: 0.22rem;
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(235, 250, 255, 0.14) 0%, rgba(86, 152, 255, 0.12) 48%, rgba(5, 14, 78, 0.38) 100%),
    linear-gradient(90deg, rgba(239, 76, 201, 0.12), transparent 38%, rgba(245, 162, 54, 0.08)),
    rgba(5, 8, 34, 0.36);
}

.music-library-header p,
.music-library-section h3,
.music-detail-toolbar span,
.music-now-track-list h4 {
  margin: 0;
  color: #87e6ff;
  font: 900 0.68rem/1 var(--font-mono);
  text-transform: uppercase;
}

.music-library-header h3 {
  margin: 0;
  color: #f5a236;
  font: 900 clamp(1.35rem, 2.8vw, 2.8rem)/0.96 var(--font-display);
  text-transform: uppercase;
}

.music-library-header p:last-child {
  color: #dcd7ff;
  font: 800 0.76rem/1.35 var(--font-mono);
}

.music-library-section {
  display: grid;
  gap: 0.62rem;
  min-height: 0;
}

.music-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 210px));
  gap: clamp(10px, 1vw, 16px);
  align-items: start;
}

.music-library-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(135, 230, 255, 0.24);
  border-radius: 6px;
  padding: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    rgba(8, 14, 52, 0.72);
  color: #f2efff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 22px rgba(135, 230, 255, 0.08);
  transition:
    transform 180ms var(--juice-snap),
    border-color 180ms ease,
    filter 180ms ease;
}

.music-library-card:hover,
.music-library-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 240, 166, 0.62);
  filter: brightness(1.08) saturate(1.12);
  outline: none;
}

.music-library-card img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #050822;
  filter: saturate(1.12) contrast(1.06);
}

.music-library-card span {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: 0.18rem;
  padding: 0.68rem;
  background:
    linear-gradient(180deg, transparent, rgba(5, 8, 34, 0.82) 28%, rgba(5, 8, 34, 0.96)),
    rgba(5, 8, 34, 0.42);
}

.music-library-card strong {
  color: #fff0a6;
  font: 900 clamp(0.92rem, 1.1vw, 1.2rem)/1.05 var(--font-display);
  text-transform: uppercase;
}

.music-library-card small {
  color: #bdb4f3;
  font: 900 0.62rem/1.25 var(--font-mono);
  text-transform: uppercase;
}

.music-library-card small:first-child {
  color: #87e6ff;
}

.music-library-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 58px;
  margin: 0;
  padding: 0.85rem;
  border: 1px dashed rgba(135, 230, 255, 0.24);
  border-radius: 6px;
  color: #bdb4f3;
  background: rgba(5, 8, 34, 0.38);
  font: 900 0.72rem/1.35 var(--font-mono);
  text-transform: uppercase;
}

.music-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.48rem 0.58rem;
  border: 1px solid rgba(135, 230, 255, 0.22);
  border-radius: 6px;
  background: rgba(5, 8, 34, 0.38);
}

.music-detail-toolbar button,
.music-now-actions button,
.music-now-actions a {
  min-height: 34px;
  border: 1px solid rgba(135, 230, 255, 0.34);
  border-radius: 5px;
  padding: 0.5rem 0.68rem;
  color: #f8f7ff;
  background: rgba(31, 72, 216, 0.34);
  font: 900 0.68rem/1 var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
}

.music-detail-toolbar button:hover,
.music-detail-toolbar button:focus-visible,
.music-now-actions button:hover,
.music-now-actions button:focus-visible,
.music-now-actions a:hover,
.music-now-actions a:focus-visible {
  border-color: rgba(255, 240, 166, 0.62);
  color: #fff0a6;
  outline: none;
}

.music-now-view {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1fr) minmax(220px, 0.58fr);
  gap: clamp(10px, 1vw, 16px);
  min-height: 0;
}

.music-now-cover,
.music-now-copy,
.music-now-notes,
.music-now-track-list {
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    rgba(5, 8, 34, 0.42);
  box-shadow: inset 0 0 24px rgba(239, 76, 201, 0.08);
}

.music-now-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  align-self: start;
  filter: saturate(1.16) contrast(1.08);
}

.music-now-copy,
.music-now-notes,
.music-now-track-list {
  display: grid;
  align-content: start;
  gap: 0.62rem;
  min-width: 0;
  padding: clamp(10px, 1vw, 16px);
}

.music-now-copy h3 {
  margin: 0;
  color: #f5a236;
  font: 900 clamp(1.6rem, 3.2vw, 3.4rem)/0.92 var(--font-display);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(245, 162, 54, 0.28);
}

.music-now-copy > strong {
  color: #fff0a6;
  font: 900 0.76rem/1.15 var(--font-mono);
  text-transform: uppercase;
}

.music-now-copy > p {
  margin: 0;
  color: #e1dcff;
  font: 800 0.84rem/1.45 var(--font-body);
}

.music-now-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.music-now-actions button:disabled {
  cursor: default;
  opacity: 0.46;
}

.music-spotify-embed {
  overflow: hidden;
  min-height: clamp(232px, 28vw, 352px);
  border: 1px solid rgba(29, 185, 84, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(29, 185, 84, 0.14), rgba(5, 8, 34, 0.46)),
    rgba(5, 8, 34, 0.62);
}

.music-spotify-embed .media-lazy-shell {
  min-height: clamp(232px, 28vw, 352px);
  border: 0;
  border-radius: 8px;
  box-shadow:
    inset 0 0 22px rgba(29, 185, 84, 0.08),
    0 0 18px rgba(29, 185, 84, 0.12);
  background: transparent;
}

.music-spotify-embed .media-lazy-shell > iframe {
  width: 100%;
  height: clamp(232px, 28vw, 352px);
  border: 0;
  background: #121212;
}

.music-now-notes article {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.58rem;
  border-top: 1px solid rgba(135, 230, 255, 0.16);
}

.music-now-notes article:first-child {
  padding-top: 0;
  border-top: 0;
}

.music-now-notes h4,
.music-now-track-list h4 {
  margin: 0;
  color: #fff0a6;
  font: 900 0.68rem/1.2 var(--font-mono);
  text-transform: uppercase;
}

.music-now-notes p,
.music-now-notes a {
  margin: 0;
  color: #e1dcff;
  font: 800 0.74rem/1.42 var(--font-body);
}

.music-now-notes p {
  white-space: pre-line;
}

.music-now-notes a {
  color: #fff0a6;
}

.music-signal-data dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.24rem 0.56rem;
  margin: 0;
}

.music-signal-data dt,
.music-signal-data dd,
.now-panel-note {
  margin: 0;
  font: 900 0.66rem/1.3 var(--font-mono);
  text-transform: uppercase;
}

.music-signal-data dt {
  color: #87e6ff;
}

.music-signal-data dd {
  color: #fff0a6;
}

.music-now-track-list {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.music-now-track-list h4 {
  grid-column: 1 / -1;
}

.music-now-track-list .music-track-card {
  min-width: 0;
}

.music-empty-state {
  margin: 0;
  color: #bdb4f3;
  font: 900 0.8rem var(--font-mono);
  text-transform: uppercase;
}

.site-content-board {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 0.72rem;
  min-height: 0;
  padding: 0.55rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--broadcast-panel-stroke-soft);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(241, 252, 255, 0.28) 0%, rgba(142, 204, 255, 0.24) 23%, rgba(42, 82, 224, 0.38) 57%, rgba(6, 16, 87, 0.88) 100%),
    linear-gradient(90deg, rgba(198, 114, 27, 0.18), transparent 18%, transparent 82%, rgba(239, 76, 201, 0.12)),
    radial-gradient(circle at 50% 7%, rgba(218, 244, 255, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(27, 51, 178, 0.66), rgba(8, 15, 70, 0.88));
}

.panel-view-socials {
  grid-template-columns: minmax(0, 720px) minmax(240px, 360px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
  overflow: hidden;
}

.panel-view-socials .site-channel-hero {
  max-width: 720px;
}

.panel-view-socials .site-channel-hero,
.panel-view-socials .site-channel-media {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-view-socials .site-channel-hero::before,
.panel-view-socials .site-channel-media::before {
  content: none;
}

.panel-view-socials .site-channel-hero {
  padding: clamp(0.8rem, 1.35vw, 1.25rem);
  border: 1px solid rgba(135, 230, 255, 0.24);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(9, 16, 74, 0.82), rgba(5, 9, 46, 0.76)),
    radial-gradient(circle at 18% 0%, rgba(135, 230, 255, 0.16), transparent 42%),
    rgba(5, 8, 34, 0.72);
  box-shadow:
    inset 0 0 36px rgba(5, 8, 34, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.panel-view-socials .site-channel-media {
  justify-self: center;
  width: min(100%, 360px);
  max-height: min(58vh, 520px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(18, 34, 122, 0.34), rgba(5, 9, 40, 0.58)),
    rgba(5, 8, 34, 0.42);
  box-shadow:
    0 0 0 1px rgba(135, 230, 255, 0.28),
    0 0 30px rgba(135, 230, 255, 0.12);
}

:where(.forecast-board, .music-board, .panel-view-socials, .panel-view-shop) {
  --zodiac-field-opacity: 0.14;
  --zodiac-field-duration: 32s;
}

.panel-view-socials {
  --zodiac-field-opacity: 0.46;
  --zodiac-field-duration: 24s;
  overflow: hidden;
}

.forecast-board {
  --zodiac-field-opacity: 0.18;
  --zodiac-field-duration: 28s;
}

.music-board {
  --zodiac-field-opacity: 0.16;
  --zodiac-field-duration: 34s;
}

.panel-view-shop {
  --zodiac-field-opacity: 0.12;
  --zodiac-field-duration: 36s;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

.shop-ad-wall,
.mobile-shop-ad-wall {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  grid-auto-rows: minmax(88px, 1fr);
  gap: clamp(8px, 1vw, 15px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
}

.shop-ad-wall::before,
.mobile-shop-ad-wall::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 166, 0.1) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(239, 76, 201, 0.08) 0 1px, transparent 1px 29px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: shopAdGridDrift 18s linear infinite;
}

.shop-ad-tile {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 240, 166, 0.62);
  border-radius: 5px;
  background: rgba(5, 8, 34, 0.62);
  box-shadow:
    0 0 0 1px rgba(239, 76, 201, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(245, 162, 54, 0.16);
  transform-origin: center;
  animation: shopAdTileDrift 9s ease-in-out infinite;
  animation-delay: calc(var(--shop-ad-index, 0) * -0.63s);
  will-change: transform;
}

.shop-ad-tile:nth-child(4n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}

.shop-ad-tile:nth-child(5n + 2) {
  grid-column: span 2;
}

.shop-ad-tile:nth-child(6n + 4) {
  grid-row: span 2;
}

.shop-ad-tile:hover,
.shop-ad-tile:focus-visible {
  z-index: 2;
  border-color: rgba(135, 230, 255, 0.86);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(135, 230, 255, 0.72),
    0 0 28px rgba(239, 76, 201, 0.32),
    0 0 42px rgba(245, 162, 54, 0.24);
}

.shop-ad-tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.08);
  transform-origin: center;
  animation: shopAdImageZoom 7.5s ease-in-out infinite;
  animation-delay: calc(var(--shop-ad-index, 0) * -0.47s);
  will-change: transform;
}

.mobile-shop-ad-wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 28vw);
  min-height: 520px;
  padding: 8px;
}

.mobile-shop-ad-wall .shop-ad-tile:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}

.mobile-shop-ad-wall .shop-ad-tile:nth-child(3n + 1) {
  grid-column: span 2;
}

:where(.forecast-board, .music-board, .panel-view-socials, .panel-view-shop)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 24px,
      rgba(135, 230, 255, 0.09) 24px 26px,
      transparent 26px 72px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='84' viewBox='0 0 360 84'%3E%3Ctext x='0' y='55' fill='%2387e6ff' fill-opacity='.62' font-family='Segoe UI Symbol,Noto Sans Symbols 2,Arial Unicode MS,serif' font-size='36'%3E%E2%99%88%EF%B8%8E %E2%99%89%EF%B8%8E %E2%99%8A%EF%B8%8E %E2%99%8B%EF%B8%8E %E2%99%8C%EF%B8%8E %E2%99%8D%EF%B8%8E %E2%99%8E%EF%B8%8E %E2%99%8F%EF%B8%8E %E2%99%90%EF%B8%8E %E2%99%91%EF%B8%8E %E2%99%92%EF%B8%8E %E2%99%93%EF%B8%8E%3C/text%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='84' viewBox='0 0 360 84'%3E%3Ctext x='0' y='55' fill='%23fff0a6' fill-opacity='.38' font-family='Segoe UI Symbol,Noto Sans Symbols 2,Arial Unicode MS,serif' font-size='36'%3E%E2%99%93%EF%B8%8E %E2%99%92%EF%B8%8E %E2%99%91%EF%B8%8E %E2%99%90%EF%B8%8E %E2%99%8F%EF%B8%8E %E2%99%8E%EF%B8%8E %E2%99%8D%EF%B8%8E %E2%99%8C%EF%B8%8E %E2%99%8B%EF%B8%8E %E2%99%8A%EF%B8%8E %E2%99%89%EF%B8%8E %E2%99%88%EF%B8%8E%3C/text%3E%3C/svg%3E");
  background-size: 144px 144px, 360px 84px, 360px 84px;
  background-repeat: repeat;
  background-position: 0 0, 0 0, 180px 42px;
  opacity: var(--zodiac-field-opacity);
  mix-blend-mode: screen;
  animation: zodiacFieldDrift var(--zodiac-field-duration) linear infinite;
}

.site-channel-hero,
.site-channel-media,
.site-links-panel,
.site-commerce-hero,
.site-shop-card {
  min-width: 0;
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(235, 250, 255, 0.2) 0%, rgba(111, 176, 255, 0.16) 25%, rgba(35, 70, 205, 0.26) 58%, rgba(7, 15, 78, 0.8) 100%),
    radial-gradient(circle at 50% 0%, rgba(220, 244, 255, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(45, 66, 204, 0.6), rgba(9, 17, 76, 0.8)),
    rgba(8, 14, 52, 0.58);
  box-shadow: inset 0 0 42px rgba(135, 230, 255, 0.08);
}

.site-channel-hero,
.site-commerce-hero {
  padding: clamp(1rem, 2vw, 1.45rem);
}

.site-channel-media {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.52rem, 0.9vw, 0.82rem);
}

.site-channel-media video {
  display: block;
  width: 100%;
  max-width: min(100%, 420px);
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  filter: saturate(1.08) contrast(1.06);
  box-shadow:
    0 0 0 1px rgba(135, 230, 255, 0.34),
    0 0 0 8px rgba(5, 8, 34, 0.22),
    inset 0 0 24px rgba(5, 8, 34, 0.28),
    0 0 26px rgba(135, 230, 255, 0.16);
}

.panel-view-socials .site-channel-hero h3,
.panel-view-socials .site-channel-tagline,
.panel-view-socials .site-description-copy {
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 1),
    2px 2px 0 rgba(5, 8, 34, 0.88),
    0 0 14px rgba(5, 8, 34, 0.74);
}

.site-content-kicker,
.site-shop-status {
  margin: 0 0 0.35rem;
  color: #f5a236;
  font: 900 0.7rem var(--font-mono);
  text-transform: uppercase;
}

.site-channel-hero h3,
.site-links-panel h3,
.site-commerce-hero h3,
.site-shop-card h3 {
  margin: 0;
  color: #fff0a6;
  font: 900 clamp(1.28rem, 2.5vw, 2.35rem) var(--font-display);
  line-height: 1;
  text-transform: uppercase;
}

.site-channel-tagline {
  display: block;
  margin-top: 0.42rem;
  color: #78ff93;
  font: 900 clamp(0.92rem, 1.2vw, 1.12rem) var(--font-mono);
  text-transform: uppercase;
}

.site-description-copy {
  display: grid;
  gap: 0.72rem;
  margin-top: 1rem;
  max-width: 78ch;
}

.site-description-copy p,
.site-panel-summary,
.site-shop-card p,
.site-empty-state {
  margin: 0;
  color: #f2efff;
  font: 800 0.78rem/1.55 var(--font-mono);
}

.conditions-panel dt,
.forecast-weather-card dt,
.music-release-rail h3,
.music-track-list h3,
.music-notes-panel h3,
.music-library-header h3,
.music-library-section h3,
.music-detail-toolbar span,
.music-now-track-list h4,
.site-content-kicker,
.site-shop-status {
  color: #fff0a6;
}

.site-links-panel {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  padding: 1rem;
}

.site-link-grid,
.site-shop-grid {
  display: grid;
  gap: 0.68rem;
}

.site-link-card {
  display: grid;
  gap: 0.2rem;
  min-height: 66px;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(135, 230, 255, 0.22);
  border-radius: 6px;
  color: #f2efff;
  text-decoration: none;
  background:
    linear-gradient(90deg, rgba(245, 162, 54, 0.18), rgba(31, 72, 216, 0.16)),
    rgba(5, 8, 34, 0.48);
}

.site-link-card:hover,
.site-link-card:focus-visible {
  color: #fff0a6;
  border-color: rgba(255, 240, 166, 0.48);
  box-shadow: 0 0 18px rgba(135, 230, 255, 0.16);
  outline: none;
}

.site-link-card strong {
  font: 900 0.86rem var(--font-mono);
  text-transform: uppercase;
}

.site-link-card span {
  color: #bdb4f3;
  font: 800 0.62rem var(--font-mono);
  text-transform: uppercase;
}

.site-commerce-hero {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}

.site-commerce-hero .site-link-card {
  width: min(260px, 100%);
}

.site-shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.site-shop-card {
  display: grid;
  align-content: start;
  gap: 0.62rem;
  padding: 0.9rem;
}

.site-shop-card h3 {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.site-shop-card.is-coming-soon {
  background:
    linear-gradient(180deg, rgba(135, 230, 255, 0.12), rgba(10, 18, 62, 0.34)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
    rgba(8, 14, 52, 0.5);
}

.site-muted-cta {
  align-self: end;
  width: max-content;
  max-width: 100%;
  padding: 0.44rem 0.62rem;
  border: 1px solid rgba(135, 230, 255, 0.18);
  border-radius: 5px;
  color: #bdb4f3;
  font: 900 0.62rem var(--font-mono);
  text-transform: uppercase;
  background: rgba(5, 8, 34, 0.4);
}

.media-lazy-shell {
  --media-shell-accent: rgba(135, 230, 255, 0.26);
  position: relative;
  min-height: 200px;
  width: 100%;
  border: 1px solid var(--media-shell-accent);
  background: rgba(5, 8, 34, 0.7);
  overflow: hidden;
}

.media-lazy-shell-preview {
  min-height: inherit;
  display: grid;
  place-content: center;
  gap: 0.52rem;
  padding: 0.72rem;
  height: 100%;
  color: #fff0a6;
  text-align: center;
  font: 600 0.72rem/1.35 var(--font-ui);
}

.media-lazy-shell-preview p {
  margin: 0;
}

.media-load-button {
  justify-self: center;
  border: 1px solid rgba(255, 240, 166, 0.5);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.72);
  font: 800 0.66rem var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 120ms ease, background 220ms ease;
}

.media-load-button:hover,
.media-load-button:focus-visible {
  filter: brightness(1.08);
  background: rgba(23, 32, 87, 0.9);
}

.media-lazy-shell.is-loaded .media-lazy-shell-preview {
  display: none;
}

.media-lazy-shell > iframe,
.media-lazy-shell > video,
.media-lazy-shell > audio {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #02030d;
}

.media-lazy-shell > video,
.media-lazy-shell > audio {
  height: auto;
}

.news-embed {
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(135, 230, 255, 0.26);
  background: rgba(5, 8, 34, 0.7);
}

.news-embed .media-lazy-shell,
.news-embed > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 100%;
  aspect-ratio: 16 / 9;
}

.news-embed .media-lazy-shell > iframe,
.news-embed .media-lazy-shell > video {
  width: 100%;
  height: 100%;
  border: 0;
}

.world-map-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.world-map-viewport::before,
.world-map-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-map-viewport::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(239, 76, 201, 0.04), transparent 38%),
    rgba(0, 0, 0, 0.36);
}

.world-map-viewport::after {
  z-index: 6;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(239, 76, 201, 0.035) 0 1px, transparent 1px 12px);
  opacity: 0.12;
}

.world-map-viewport.is-dragging {
  cursor: grabbing;
}

.map-mode-readout {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 7;
  min-width: 0;
  max-width: min(320px, calc(100% - 28px));
  border: 1px solid rgba(135, 230, 255, 0.5);
  border-radius: 4px;
  padding: 0.38rem 0.58rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(31, 72, 216, 0.92), rgba(13, 28, 129, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: var(--font-mono);
  text-transform: uppercase;
  pointer-events: none;
}

.map-mode-readout span {
  display: none;
}

.map-mode-readout strong {
  display: block;
  color: #ffffff;
  font-size: clamp(0.58rem, 0.72vw, 0.8rem);
  line-height: 1.08;
  text-shadow:
    0 1px 0 rgba(3, 7, 38, 1),
    2px 2px 0 rgba(3, 7, 38, 0.82);
}

.map-mode-readout[data-mode="promo"] {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(31, 72, 216, 0.94), rgba(10, 22, 111, 0.94) 58%, rgba(6, 12, 68, 0.96));
}

.ocean-wave-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.72;
  pointer-events: none;
}

.world-map-svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 148%;
  height: 162%;
  transform-origin: 0 0;
  transform: translate3d(var(--map-x, 0px), var(--map-y, 0px), 0) scale(var(--map-scale, 0.78));
  will-change: transform;
  image-rendering: auto;
}

.map-cloud-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.94;
}

.map-cloud-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.74;
}

.world-map-svg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.76;
  user-select: none;
}

.world-map-svg.has-custom-regions img {
  visibility: hidden;
  opacity: 0;
}

.world-region-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 0 2px rgba(238, 251, 255, 0.18));
}

.world-region-group {
  isolation: isolate;
}

.world-region-layer polygon {
  stroke-linejoin: round;
  stroke-width: 1.18 !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.world-region-outline {
  fill: rgba(3, 8, 32, 0.38) !important;
  stroke: rgba(255, 255, 255, 0.58) !important;
  opacity: 0.58;
}

.world-region-gradient-mask {
  fill: url("#mapRegionFourDirectionGradient");
  fill-opacity: 0.18;
  stroke: url("#mapRegionFourDirectionGradient");
  stroke-linecap: round;
  stroke-opacity: 1;
  mix-blend-mode: screen;
  opacity: 0.96;
  animation: mapRegionHueCycle 72s linear infinite;
}

.world-region-noise-mask {
  fill: url("#mapRegionNoiseTexture");
  fill-opacity: 0.42;
  stroke: none !important;
  mix-blend-mode: multiply;
  opacity: 0.58;
  pointer-events: none;
}

.world-weather-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.world-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.world-map-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff0a6;
  font: 900 0.68rem var(--font-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    0 0 7px rgba(5, 8, 34, 0.9);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center;
  will-change: transform;
}

.world-map-pin-beacon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 240, 166, 0.58);
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.18) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 56%, rgba(239, 76, 201, 0.2), transparent 62%),
    linear-gradient(145deg, rgba(30, 36, 70, 0.82), rgba(2, 4, 16, 0.92) 58%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 166, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(5, 8, 34, 0.86),
    0 0 10px rgba(255, 240, 166, 0.28),
    0 0 22px rgba(239, 76, 201, 0.28);
  transform: translateY(-21px);
  transition:
    transform 180ms var(--juice-snap),
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.world-map-pin:hover .world-map-pin-beacon,
.world-map-pin:focus-visible .world-map-pin-beacon {
  transform: translateY(-24px) scale(1.08);
  border-color: rgba(255, 240, 166, 0.82);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 166, 0.1),
    inset 0 -12px 18px rgba(0, 0, 0, 0.44),
    0 0 0 2px rgba(5, 8, 34, 0.86),
    0 0 14px rgba(255, 240, 166, 0.42),
    0 0 30px rgba(239, 76, 201, 0.34);
}

.world-map-pin:active .world-map-pin-beacon,
.world-shell.is-pin-signal .world-map-pin.is-selected .world-map-pin-beacon {
  transform: translateY(-18px) scale(0.94);
}

.world-map-pin-symbol-char {
  display: grid;
  place-items: center;
  color: #fff0a6;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 240, 166, 0.14), rgba(239, 76, 201, 0.08) 48%, transparent 68%);
  font: 900 1.76rem/1 var(--font-lore);
  font-variant-emoji: text;
  -webkit-text-stroke: 0.72px rgba(255, 240, 166, 0.78);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.96),
    1px 0 0 rgba(239, 76, 201, 0.52),
    -1px 0 0 rgba(135, 230, 255, 0.28),
    0 0 2px rgba(255, 240, 166, 0.84),
    0 0 8px rgba(255, 240, 166, 0.52),
    0 0 14px rgba(245, 162, 54, 0.36),
    0 0 22px rgba(239, 76, 201, 0.26);
}

.world-map-pin-beacon::after {
  content: none;
}

.world-map-pin-text {
  display: none;
  max-width: 156px;
  padding: 0.16rem 0.32rem;
  border: 1px solid rgba(135, 230, 255, 0.22);
  border-radius: 4px;
  background: rgba(5, 8, 34, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-map-pin-label {
  grid-template-columns: auto max-content;
}

.world-map-pin-label .world-map-pin-text,
.world-map-pin-symbol .world-map-pin-text {
  color: #f8f7ff;
}

.world-map-pin-music .world-map-pin-beacon {
  border-color: rgba(239, 76, 201, 0.54);
}

.world-map-pin-clue .world-map-pin-beacon,
.world-map-pin-alert .world-map-pin-beacon {
  border-color: rgba(245, 162, 54, 0.58);
}

.world-map-pin-timed .world-map-pin-beacon {
  border-color: rgba(135, 230, 255, 0.62);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 166, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(5, 8, 34, 0.86),
    0 0 14px rgba(135, 230, 255, 0.34),
    0 0 28px rgba(239, 76, 201, 0.26);
}

.world-map-pin.is-selected .world-map-pin-beacon {
  box-shadow:
    inset 0 0 0 2px rgba(5, 8, 34, 0.36),
    inset 0 -8px 12px rgba(5, 8, 34, 0.28),
    0 0 0 2px rgba(5, 8, 34, 0.82),
    0 0 13px rgba(255, 240, 166, 0.64),
    0 0 24px rgba(239, 76, 201, 0.4);
}

.world-map-pin.is-selected .world-map-pin-text {
  border-color: rgba(245, 162, 54, 0.64);
  background: rgba(5, 8, 34, 0.78);
}

.pin-popup-layer {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  overflow: hidden;
}

.pin-popup-window {
  position: absolute;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  min-width: 280px;
  min-height: 150px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border: 2px solid rgba(255, 240, 166, 0.72);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(249, 235, 190, 0.96), rgba(238, 213, 160, 0.94) 31px, rgba(12, 15, 31, 0.96) 32px),
    rgba(6, 8, 20, 0.96);
  box-shadow:
    5px 6px 0 rgba(4, 5, 18, 0.78),
    0 0 24px rgba(239, 76, 201, 0.24),
    0 0 44px rgba(135, 230, 255, 0.16);
  color: #fdf7df;
  resize: both;
  overflow: hidden;
  pointer-events: auto;
  transform-origin: 26px 16px;
  animation: pinPopupOpen 528ms var(--juice-snap) both;
}

.pin-popup-titlebar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 7px;
  border-bottom: 2px solid rgba(7, 9, 23, 0.8);
  background:
    repeating-linear-gradient(90deg, rgba(7, 9, 23, 0.16) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #1e2658, #b43293 48%, #f5a236);
  color: #fff7c8;
  cursor: move;
  user-select: none;
}

.pin-popup-titlebar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 0.82rem/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(4, 5, 18, 0.8);
}

.pin-popup-symbol {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 247, 200, 0.76);
  border-radius: 2px;
  background: rgba(5, 8, 34, 0.62);
  font: 900 1rem/1 var(--font-lore);
}

.pin-popup-close {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(7, 9, 23, 0.78);
  border-radius: 2px;
  background: rgba(255, 247, 200, 0.94);
  color: #180617;
  font: 900 0.82rem/1 var(--font-mono);
  cursor: pointer;
}

.pin-popup-close:hover,
.pin-popup-close:focus-visible {
  border-color: rgba(255, 247, 200, 0.96);
  background: #fff7c8;
  filter: brightness(1.12) saturate(1.18);
  box-shadow: 0 0 12px rgba(239, 76, 201, 0.34);
  outline: none;
}

.pin-popup-content {
  min-height: 0;
  padding: 10px;
  overflow: auto;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 50%, transparent 50%) 0 0 / 100% 4px,
    radial-gradient(circle at 20% 0%, rgba(239, 76, 201, 0.16), transparent 36%),
    rgba(5, 8, 34, 0.94);
}

.pin-popup-content img,
.pin-popup-content video,
.pin-popup-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(255, 240, 166, 0.28);
  background: #02030d;
}

.pin-popup-content iframe {
  height: 100%;
  min-height: 190px;
}

.pin-popup-gallery .pin-popup-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.pin-popup-image .pin-popup-content img {
  height: calc(100% - 30px);
  object-fit: contain;
}

.pin-popup-video .pin-popup-content video {
  height: 100%;
  object-fit: contain;
}

.pin-popup-video .pin-popup-content .media-lazy-shell {
  min-height: 190px;
}

.pin-popup-youtube .pin-popup-content {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pin-popup-youtube .pin-popup-youtube-shell {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.pin-popup-youtube .pin-popup-youtube-shell > iframe {
  height: 100%;
}

.pin-popup-audio .pin-popup-content {
  display: grid;
  align-content: center;
}

.pin-popup-audio audio {
  width: 100%;
}

.pin-popup-audio .pin-popup-content .media-lazy-shell {
  min-height: 72px;
  width: 100%;
}

.pin-popup-spotify .pin-popup-content iframe,
.pin-popup-spotify .pin-popup-content .media-lazy-shell {
  min-height: 96px;
}

.pin-popup-text-body {
  max-height: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px inset rgba(255, 240, 166, 0.28);
  background: rgba(255, 247, 200, 0.08);
  color: #fff8d7;
  font: 500 0.98rem/1.45 var(--font-body);
  white-space: pre-wrap;
}

.pin-popup-caption {
  margin: 8px 0 0;
  color: rgba(255, 248, 215, 0.76);
  font: 600 0.78rem/1.35 var(--font-ui);
}

.pin-popup-gallery .pin-popup-caption {
  margin: 0;
  min-height: 0;
  max-height: 3.2em;
  overflow: auto;
}

.pin-popup-carousel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.pin-popup-carousel-viewport {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 240, 166, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 76, 201, 0.16), transparent 44%),
    #02030d;
}

.pin-popup-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 260ms var(--juice-snap);
  will-change: transform;
}

.pin-popup-carousel-slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.pin-popup-carousel-slide img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.pin-popup-carousel-controls {
  display: grid;
  grid-template-columns: 34px minmax(54px, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.pin-popup-carousel-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border: 1px solid rgba(255, 240, 166, 0.44);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(31, 72, 216, 0.58), rgba(18, 26, 78, 0.82));
  color: #fff0a6;
  font: 900 1rem/1 var(--font-mono);
  cursor: pointer;
}

.pin-popup-carousel-button:hover,
.pin-popup-carousel-button:focus-visible,
.pin-popup-carousel-dot:hover,
.pin-popup-carousel-dot:focus-visible {
  border-color: rgba(255, 240, 166, 0.82);
  box-shadow: 0 0 10px rgba(239, 76, 201, 0.28);
  outline: none;
}

.pin-popup-carousel-count {
  justify-self: center;
  color: #d9d0ff;
  font: 900 0.7rem/1 var(--font-mono);
  text-transform: uppercase;
}

.pin-popup-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 12px;
}

.pin-popup-carousel-dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 240, 166, 0.42);
  border-radius: 50%;
  padding: 0;
  background: rgba(31, 72, 216, 0.48);
  cursor: pointer;
}

.pin-popup-carousel-dot.is-active {
  background: #fff0a6;
  box-shadow:
    0 0 8px rgba(255, 240, 166, 0.52),
    0 0 14px rgba(239, 76, 201, 0.3);
}

.world-weather-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: center;
  width: max-content;
  min-width: 96px;
  min-height: 78px;
  color: #fff0a6;
  font-family: var(--font-ui);
  font-weight: 900;
  text-align: center;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform;
  cursor: pointer;
}

.world-weather-marker::before,
.world-weather-marker::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.world-weather-marker::before {
  inset: -7px 10px -2px;
  z-index: -1;
  border-radius: 999px;
  opacity: 0.16;
  transform: scale(0.82);
  background:
    radial-gradient(circle, rgba(255, 240, 166, 0.32), rgba(239, 76, 201, 0.18) 48%, rgba(135, 230, 255, 0.08) 74%, transparent 100%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.world-weather-marker::after {
  inset: 1px 20px 7px;
  z-index: 2;
  border-radius: 999px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
  opacity: 0.22;
}

.world-weather-marker.is-selected::before {
  opacity: 0.58;
  transform: scale(0.96);
}

.world-weather-marker.is-selected {
  opacity: 1;
}

.world-weather-marker-scale {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--weather-marker-scale, 1));
  transition: transform 180ms var(--juice-snap);
}

.world-weather-marker:hover .world-weather-marker-scale,
.world-weather-marker:focus-visible .world-weather-marker-scale {
  transform: scale(calc(var(--weather-marker-scale, 1) * 1.08));
}

.world-weather-marker:active .world-weather-marker-scale {
  transform: scale(calc(var(--weather-marker-scale, 1) * 0.95));
}

.world-weather-lore-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  z-index: 8;
  width: min(270px, 42vw);
  min-width: 210px;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(255, 240, 166, 0.62);
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(27, 41, 143, 0.94), rgba(7, 13, 58, 0.97));
  box-shadow:
    0 0 0 1px rgba(239, 76, 201, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(135, 230, 255, 0.18);
  color: #f2efff;
  text-align: left;
  text-shadow: 0 1px 0 rgba(3, 7, 38, 0.9);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 8px, 0) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    opacity 180ms var(--juice-snap),
    transform 180ms var(--juice-snap);
}

.world-weather-lore-popover strong {
  display: block;
  margin-bottom: 0.28rem;
  color: #fff0a6;
  font: 900 0.72rem/1.08 var(--font-mono);
  text-transform: uppercase;
}

.world-weather-lore-popover span {
  display: block;
  color: #ffffff;
  font: 800 0.68rem/1.38 var(--font-mono);
}

.world-weather-marker:hover .world-weather-lore-popover,
.world-weather-marker:focus-visible .world-weather-lore-popover,
.world-weather-marker.is-selected .world-weather-lore-popover {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.world-weather-marker text {
  font-family: var(--font-ui);
  font-weight: 900;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(5, 8, 34, 0.96);
  stroke-width: 0.65;
  stroke-linejoin: round;
  text-rendering: geometricPrecision;
}

.world-weather-temperature-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  font-size: 20px;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    1px 0 0 rgba(5, 8, 34, 0.98),
    -1px 0 0 rgba(5, 8, 34, 0.98),
    1px 0 0 rgba(239, 76, 201, 0.4),
    -1px 0 0 rgba(135, 230, 255, 0.28),
    0 0 7px rgba(5, 8, 34, 0.86);
}

.world-weather-icon {
  fill: #fff0a6;
  font-size: 30px;
}

.world-weather-city {
  fill: #f8f7ff;
  max-width: none;
  overflow: visible;
  color: #f8f7ff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(5, 8, 34, 0.98),
    1px 0 0 rgba(5, 8, 34, 0.98),
    -1px 0 0 rgba(5, 8, 34, 0.98),
    1px 0 0 rgba(239, 76, 201, 0.38),
    -1px 0 0 rgba(135, 230, 255, 0.26),
    0 0 7px rgba(5, 8, 34, 0.86);
}

.world-weather-high {
  color: #ff7e8f;
  fill: #ff7e8f;
}

.world-weather-low {
  color: #87e6ff;
  fill: #87e6ff;
}

.weather-glyph {
  position: relative;
  display: block;
  width: 52px;
  height: 35px;
  margin-top: 4px;
  color: #fff0a6;
}

.weather-glyph-piece {
  position: absolute;
  display: block;
  box-shadow:
    inset 0 -2px 0 rgba(245, 162, 54, 0.12),
    0 0 7px rgba(255, 240, 166, 0.18);
}

.weather-glyph-cloud,
.weather-glyph-rain,
.weather-glyph-storm,
.weather-glyph-snow {
  width: 56px;
}

.weather-glyph-cloud .weather-glyph-piece-1,
.weather-glyph-rain .weather-glyph-piece-1,
.weather-glyph-storm .weather-glyph-piece-1,
.weather-glyph-snow .weather-glyph-piece-1 {
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 18px;
  border-radius: 14px;
  background: currentColor;
  box-shadow: inset 0 -2px 0 rgba(245, 162, 54, 0.16);
}

.weather-glyph-cloud .weather-glyph-piece-2,
.weather-glyph-rain .weather-glyph-piece-2,
.weather-glyph-storm .weather-glyph-piece-2,
.weather-glyph-snow .weather-glyph-piece-2 {
  left: 11px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
}

.weather-glyph-cloud .weather-glyph-piece-3,
.weather-glyph-rain .weather-glyph-piece-3,
.weather-glyph-storm .weather-glyph-piece-3,
.weather-glyph-snow .weather-glyph-piece-3 {
  left: 24px;
  bottom: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
}

.weather-glyph-sun .weather-glyph-piece-1,
.weather-glyph-moon .weather-glyph-piece-1,
.weather-glyph-spark .weather-glyph-piece-1 {
  left: 9px;
  top: 3px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: currentColor;
}

.weather-glyph-sun {
  width: 46px;
  height: 40px;
}

.weather-glyph-sun .weather-glyph-piece-1 {
  left: 12px;
  top: 7px;
  width: 25px;
  height: 25px;
  box-shadow:
    0 0 0 3px rgba(255, 240, 166, 0.2),
    0 0 9px rgba(255, 240, 166, 0.36);
}

.weather-glyph-sun .weather-glyph-piece-2 {
  left: 7px;
  top: 19px;
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 -11px 0 -1px currentColor,
    0 11px 0 -1px currentColor;
  opacity: 0.58;
}

.weather-glyph-sun .weather-glyph-piece-3 {
  left: 24px;
  top: 3px;
  width: 3px;
  height: 34px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    -12px 0 0 -1px currentColor,
    12px 0 0 -1px currentColor;
  opacity: 0.58;
}

.weather-glyph-rain .weather-glyph-piece-1::after,
.weather-glyph-snow .weather-glyph-piece-1::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -9px;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: #87e6ff;
  box-shadow: 10px 0 0 #87e6ff, 20px 0 0 #87e6ff;
}

.weather-glyph-storm .weather-glyph-piece-1::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -12px;
  width: 11px;
  height: 18px;
  background: #f5a236;
  clip-path: polygon(48% 0, 100% 0, 64% 44%, 100% 44%, 30% 100%, 48% 55%, 8% 55%);
}

.weather-glyph-snow .weather-glyph-piece-1::after {
  height: 3px;
  border-radius: 50%;
  box-shadow: 10px 0 0 #87e6ff, 20px 0 0 #87e6ff, 5px 5px 0 #87e6ff, 15px 5px 0 #87e6ff, 25px 5px 0 #87e6ff;
}

.weather-glyph-moon .weather-glyph-piece-1 {
  background: transparent;
  box-shadow: -8px 0 0 2px currentColor;
}

.weather-glyph-wind .weather-glyph-piece {
  left: 4px;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.weather-glyph-wind .weather-glyph-piece-1 {
  top: 6px;
}

.weather-glyph-wind .weather-glyph-piece-2 {
  top: 15px;
  left: 0;
  width: 50px;
}

.weather-glyph-wind .weather-glyph-piece-3 {
  top: 24px;
  width: 34px;
}

.weather-glyph-warning {
  width: 46px;
  height: 38px;
}

.weather-glyph-warning .weather-glyph-piece-1 {
  left: 6px;
  top: 2px;
  width: 36px;
  height: 31px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 6px rgba(255, 240, 166, 0.24);
}

.weather-glyph-warning .weather-glyph-piece-2 {
  left: 23px;
  top: 12px;
  width: 4px;
  height: 11px;
  border-radius: 999px;
  background: #13296f;
}

.weather-glyph-warning .weather-glyph-piece-3 {
  left: 23px;
  top: 25px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #13296f;
}

.weather-glyph-spark .weather-glyph-piece-1 {
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.weather-svg-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(1px 1px 0 rgba(5, 8, 34, 0.92))
    drop-shadow(0 0 8px rgba(135, 230, 255, 0.24));
  image-rendering: auto;
}

.weather-icon {
  display: grid;
  place-items: center;
  flex-basis: 104px;
  width: 104px;
  height: 86px;
  padding: 0;
}

.weather-icon::before,
.weather-icon::after,
.weather-icon > span {
  display: none;
}

.condition-weather-icon-image {
  width: 102px;
  height: 86px;
}

.forecast-weather-glyph {
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: clamp(236px, 18vw, 316px);
  height: clamp(200px, 15vw, 268px);
  margin-top: 0;
}

.forecast-weather-glyph::before,
.forecast-weather-glyph::after {
  display: none !important;
  content: none !important;
}

.forecast-weather-icon-image {
  width: clamp(236px, 18vw, 316px);
  height: clamp(200px, 15vw, 268px);
  filter:
    drop-shadow(0 1px 0 rgba(5, 8, 34, 0.8))
    drop-shadow(0 0 14px rgba(135, 230, 255, 0.2));
}

.weather-glyph {
  display: grid;
  place-items: center;
  width: 76px;
  height: 60px;
  margin-top: 0;
}

.weather-glyph-piece,
.weather-glyph-piece::before,
.weather-glyph-piece::after {
  display: none !important;
  content: none !important;
}

.weather-glyph-image {
  width: 76px;
  height: 60px;
}

.world-weather-marker .weather-svg-icon {
  filter:
    drop-shadow(1px 1px 0 rgba(5, 8, 34, 0.96))
    drop-shadow(0 0 6px rgba(255, 240, 166, 0.24));
}

.dream-map::before,
.dream-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dream-map::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.08) 1px 3px, transparent 3px 6px),
    linear-gradient(90deg, rgba(239, 76, 201, 0.18), transparent 34%, rgba(135, 230, 255, 0.12));
  opacity: 0.46;
}

.dream-map::after {
  background:
    linear-gradient(rgba(135, 230, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135, 230, 255, 0.1) 1px, transparent 1px);
  background-size: 9% 16%, 8% 14%;
  opacity: 0.28;
}

.bottom-deck {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: none;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 7px;
  overflow: hidden;
  --deck-panorama-width: calc(100% * 3 + 16px);
}

.bottom-deck::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -14%;
  z-index: 2;
  height: 38%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 78%, rgba(244, 163, 62, 0.26), transparent 46%),
    radial-gradient(ellipse at 35% 86%, rgba(255, 134, 143, 0.24), transparent 52%),
    radial-gradient(ellipse at 63% 76%, rgba(239, 76, 201, 0.18), transparent 48%),
    radial-gradient(ellipse at 88% 82%, rgba(255, 201, 112, 0.2), transparent 46%),
    linear-gradient(90deg, transparent, rgba(255, 150, 125, 0.12), transparent);
  opacity: 0.58;
}

.world-shell.is-news-section .bottom-deck,
.world-shell.is-music-section .bottom-deck,
.world-shell.is-forecast-section .bottom-deck,
.world-shell.is-socials-section .bottom-deck,
.world-shell.is-shop-section .bottom-deck {
  grid-template-columns: 1fr;
}

.world-shell.is-music-section .world-grid {
  grid-template-rows: minmax(0, 1fr);
}

.world-shell.is-news-section .signal-panel,
.world-shell.is-news-section .bulletin-panel,
.world-shell.is-music-section .signal-panel,
.world-shell.is-music-section .bulletin-panel,
.world-shell.is-forecast-section .signal-panel,
.world-shell.is-forecast-section .bulletin-panel,
.world-shell.is-socials-section .signal-panel,
.world-shell.is-socials-section .bulletin-panel,
.world-shell.is-shop-section .signal-panel,
.world-shell.is-shop-section .bulletin-panel {
  display: none;
}

.bottom-deck .world-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 28, 84, 0.58), rgba(8, 12, 48, 0.52)),
    rgba(8, 14, 52, 0.52);
}

.bottom-deck .world-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 12, 44, 0.36), rgba(7, 12, 44, 0.16)),
    url("../assets/images/sunset-water-panorama.jpg");
  background-size: cover, var(--deck-panorama-width) auto;
  background-position: center, var(--panel-panorama-x, center) 74%;
  opacity: 0.44;
  filter: saturate(1.25) contrast(1.1);
}

.bottom-deck .now-panel {
  --panel-panorama-x: left;
  display: grid;
  grid-template-rows: auto auto minmax(24px, 1fr) auto;
  align-content: stretch;
  row-gap: 0.32rem;
  padding-block: 0.24rem 0.38rem;
}

.bottom-deck .signal-panel {
  --panel-panorama-x: center;
}

.bottom-deck .bulletin-panel {
  --panel-panorama-x: right;
}

html,
body,
:where(.dreamworld-page, .broadcast-shell, .world-shell, .world-panel) {
  cursor: var(--cursor-default);
}

:where(
  a,
  button,
  summary,
  select,
  label,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="range"],
  [role="button"],
  .dream-button,
  .conditions-cycle-controls button,
  .panel-title-row button,
  .audio-row button,
  .news-location-link,
  .music-release-card,
  .music-track-card,
  .music-player-controls button,
  .pin-popup-close,
  .pin-popup-carousel-button,
  .pin-popup-carousel-dot,
  .bulletin-pin-item,
  .orbit-bug
) {
  cursor: var(--cursor-pointer);
}

:where(.world-nav a, .world-nav button) {
  cursor: var(--cursor-alt);
}

:where(.world-nav a:hover, .world-nav a:focus-visible, .world-nav button:hover, .world-nav button:focus-visible) {
  cursor: var(--cursor-help);
}

:where(.nav-links > :nth-child(1):is(a):hover, .nav-links > :nth-child(1):hover > button) {
  cursor: var(--cursor-help);
}

:where(.nav-links > :nth-child(2):is(a):hover, .nav-links > :nth-child(2):hover > button) {
  cursor: var(--cursor-person);
}

:where(.nav-links > :nth-child(3):is(a):hover, .nav-links > :nth-child(3):hover > button) {
  cursor: var(--cursor-location);
}

:where(.nav-links > :nth-child(4):is(a):hover, .nav-links > :nth-child(4):hover > button) {
  cursor: var(--cursor-precision);
}

:where(.nav-links > :nth-child(5):is(a):hover, .nav-links > :nth-child(5):hover > button) {
  cursor: var(--cursor-alt);
}

:where(.nav-links > :nth-child(6):is(a):hover, .nav-links > :nth-child(6):hover > button) {
  cursor: var(--cursor-pointer);
}

:where(.nav-links > :nth-child(7):is(a):hover, .nav-links > :nth-child(7):hover > button) {
  cursor: var(--cursor-help);
}

:where(.world-nav a:active, .world-nav button:active, .world-nav a.is-active, .world-nav button.is-active) {
  cursor: var(--cursor-person);
}

:where(input, textarea, [contenteditable="true"]) {
  cursor: var(--cursor-text);
}

:where(.world-map-viewport) {
  cursor: var(--cursor-move);
}

:where(.world-map-viewport.is-dragging, .pin-popup.is-dragging .pin-popup-drag-handle) {
  cursor: var(--cursor-move);
}

:where(.world-map-pin) {
  cursor: var(--cursor-location);
}

:where(.world-map-pin:hover, .world-map-pin:focus-visible) {
  cursor: var(--cursor-person);
}

:where(.world-map-pin:active, .world-map-pin.is-selected) {
  cursor: var(--cursor-alt);
}

:where(.world-weather-marker) {
  cursor: var(--cursor-precision);
}

:where(.world-weather-marker:hover, .world-weather-marker:focus-visible) {
  cursor: var(--cursor-location);
}

:where(.world-weather-marker:active, .world-weather-marker.is-selected) {
  cursor: var(--cursor-help);
}

:where(.pin-popup-drag-handle, .pin-popup-titlebar) {
  cursor: var(--cursor-move);
}

:where(.music-seek-slider, input[type="range"], .music-player-controls input[type="range"]) {
  cursor: var(--cursor-horizontal-resize);
}

:where(.is-loading, [aria-busy="true"]) {
  cursor: var(--cursor-working);
}

:where(:disabled, [disabled], [aria-disabled="true"]) {
  cursor: var(--cursor-unavailable);
}

body > canvas.cursor-effects-canvas {
  z-index: 2147483647;
  image-rendering: pixelated;
  mix-blend-mode: screen;
}

.now-panel strong,
.bulletin-panel strong {
  display: block;
  color: #f5a236;
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  text-transform: uppercase;
}

.now-panel h2 {
  margin-bottom: 0.18rem;
}

.now-panel strong {
  line-height: 1.03;
}

.now-panel p {
  line-height: 1.08;
}

.bulletin-pin-list {
  display: grid;
  gap: 0.34rem;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
}

.bulletin-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.bulletin-pin-directory {
  min-height: 0;
  overflow: hidden;
}

.bulletin-pin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.4rem;
  align-items: baseline;
  width: 100%;
  min-height: 0;
  padding: 0.28rem 0.36rem;
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 4px;
  background: rgba(5, 8, 34, 0.34);
  color: #d9d0ff;
  text-align: left;
  cursor: var(--cursor-location);
}

.bulletin-pin-item:hover,
.bulletin-pin-item:focus-visible,
.bulletin-pin-item.is-active {
  border-color: rgba(245, 162, 54, 0.56);
  background: rgba(245, 162, 54, 0.13);
  outline: none;
}

.bulletin-pin-item strong {
  min-width: 0;
  overflow: hidden;
  color: #fff0a6;
  font: 900 0.72rem/1.15 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulletin-pin-item span {
  color: #bdb4f3;
  font: 800 0.58rem/1.15 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.bulletin-pin-empty {
  margin: 0;
  color: #d9d0ff;
  font: 800 0.72rem/1.35 var(--font-mono);
  text-transform: uppercase;
}

.signal-panel {
  min-height: 0;
}

.signal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255, 240, 166, 0.22) 45%, rgba(135, 230, 255, 0.12) 50%, transparent 62%),
    radial-gradient(ellipse at 26% 30%, rgba(255, 240, 166, 0.14), transparent 42%);
  opacity: 0;
  transform: translate3d(-42%, 0, 0);
}

.signal-panel.is-lore-updated::after {
  animation: loreGlint 720ms ease-out both;
}

.signal-panel.is-lore-updated h2,
.signal-panel.is-lore-updated p {
  animation: loreTextFade 520ms ease-out both;
}

.signal-panel p {
  max-height: 7.4em;
  overflow: auto;
  text-transform: none;
}

.audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.45rem;
}

.audio-row button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.audio-row span {
  flex: 1;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, #f5a236 0 3px, transparent 3px 9px),
    linear-gradient(90deg, transparent, rgba(245, 162, 54, 0.16), transparent);
}

.music-waveform-canvas {
  display: block;
  width: 100%;
  height: clamp(28px, 3.8vh, 44px);
  min-height: 28px;
  margin-top: 0;
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 5px;
  background: rgba(5, 8, 34, 0.5);
}

.music-player-controls {
  gap: 0.42rem;
  margin-top: 0;
}

.now-panel .audio-row {
  gap: 0.42rem;
}

.music-player-controls button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(135, 230, 255, 0.36);
  color: #fff0a6;
  background: rgba(31, 72, 216, 0.34);
  font: 900 0.9rem/1 var(--font-mono);
  cursor: var(--cursor-pointer);
}

.now-panel .music-player-controls button {
  width: 30px;
  height: 30px;
}

.music-player-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #f5a236;
}

.music-player-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0;
  color: #bdb4f3;
  font: 900 0.62rem var(--font-mono);
  text-transform: uppercase;
  min-width: 0;
}

.music-player-readout label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 92px;
  color: #fff0a6;
}

.music-player-readout input[type="range"] {
  width: 64px;
  accent-color: #ef4cc9;
}

.world-ticker {
  overflow: hidden;
  padding: 0.34rem 0;
  margin-top: auto;
  border-top: 1px solid rgba(135, 230, 255, 0.22);
  color: #bdb4f3;
  font: 800 clamp(0.56rem, 0.72vw, 0.75rem) var(--font-mono);
  text-transform: uppercase;
}

.ticker-track {
  display: inline-flex;
  width: max-content;
  min-width: max-content;
  gap: var(--ticker-gap);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: tickerScroll var(--ticker-duration) linear infinite;
}

.ticker-track span {
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 0;
  white-space: nowrap;
}

.mobile-app-shell {
  display: none;
}

.mobile-landing-gate {
  display: none;
}

.mobile-app-shell button,
.mobile-app-shell a {
  cursor: pointer;
}

.mobile-app-card,
.mobile-radar-card,
.mobile-news-card,
.mobile-music-card,
.mobile-link-card {
  border: 1px solid rgba(188, 231, 255, 0.44);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(18, 45, 136, 0.76), rgba(7, 16, 67, 0.9)),
    rgba(7, 16, 67, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 12px 26px rgba(0, 0, 0, 0.24);
}

.mobile-forecast-card {
  border: 1px solid rgba(188, 231, 255, 0.44);
  border-radius: 7px;
  background:
    var(--weather-bars-card),
    linear-gradient(180deg, rgba(18, 45, 136, 0.76), rgba(7, 16, 67, 0.9)),
    rgba(7, 16, 67, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 12px 26px rgba(0, 0, 0, 0.24);
}

@media (max-width: 900px) {
  body.is-world-open {
    overflow: hidden;
  }

  body.is-world-open .broadcast-shell {
    min-height: 100svh;
    padding: 0;
  }

  body.is-world-open .dreamworld-page {
    min-height: 100svh;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(7, 21, 72, 0.58), rgba(4, 8, 38, 0.96)),
      #08115d;
  }

  body.is-world-open .world-shell {
    width: 100%;
    height: 100svh;
    max-width: none;
    padding: 8px;
    overflow: hidden;
  }

  body.is-world-open .world-bg-video {
    opacity: 0.24;
    filter: saturate(1.05) contrast(1.04);
  }

  body.is-world-open .sunset-cloud-field,
  body.is-world-open .world-header,
  body.is-world-open .world-nav,
  body.is-world-open .world-grid,
  body.is-world-open .world-ticker,
  body.is-world-open .pin-popup-layer {
    display: none;
  }

  body.is-world-open .dashboard-crt-overlay {
    opacity: 0.18;
  }

  body.is-world-open .mobile-app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 8px;
    height: calc(100svh - 16px);
    min-height: 0;
    color: var(--ink);
    touch-action: pan-y;
  }

  .mobile-app-header {
    min-height: 62px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(188, 231, 255, 0.42);
    border-radius: 7px;
    background:
      linear-gradient(90deg, rgba(15, 43, 142, 0.94), rgba(29, 66, 196, 0.74) 42%, rgba(8, 18, 83, 0.94)),
      rgba(6, 13, 57, 0.92);
    box-shadow:
      inset 0 0 18px rgba(135, 230, 255, 0.12),
      0 8px 22px rgba(0, 0, 0, 0.22);
  }

  .mobile-app-station {
    width: 58px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%),
      linear-gradient(135deg, #f5a236, #ef4cc9 48%, #1f48d8 100%);
    color: #fff;
    font: 900 1rem var(--font-display);
    line-height: 0.96;
    text-align: center;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
  }

  .mobile-app-station span,
  .mobile-app-station strong {
    display: block;
  }

  .mobile-app-station strong {
    font: 800 0.48rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-app-title {
    min-width: 0;
  }

  .mobile-app-title p,
  .mobile-app-title h2,
  .mobile-app-status span,
  .mobile-app-status strong {
    margin: 0;
  }

  .mobile-app-title p {
    color: #bff7ff;
    font: 800 0.64rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-app-title h2 {
    overflow: hidden;
    color: #fff6cb;
    font: 900 clamp(1rem, 6vw, 1.5rem) var(--font-display);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-app-status {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: #bdb4f3;
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-app-status span {
    font-size: 0.62rem;
  }

  .mobile-app-status strong {
    color: #87e6ff;
    font-size: 0.56rem;
  }

  .mobile-alert-strip {
    overflow: hidden;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(245, 162, 54, 0.46);
    border-radius: 6px;
    background:
      linear-gradient(90deg, rgba(86, 31, 98, 0.82), rgba(15, 40, 132, 0.9)),
      rgba(9, 18, 67, 0.92);
    color: #fff0a6;
    font: 900 0.68rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-alert-strip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-alert-strip .mobile-alert-track {
    display: flex;
    gap: 2.8rem;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    animation: mobileAlertTickerScroll 18s linear infinite;
  }

  .mobile-alert-strip .mobile-alert-track > span {
    flex: 0 0 auto;
  }

  .mobile-app-viewport {
    overflow: hidden;
    min-height: 0;
    border: 1px solid rgba(188, 231, 255, 0.34);
    border-radius: 7px;
    background:
      radial-gradient(circle at 24% 0%, rgba(245, 162, 54, 0.22), transparent 32%),
      linear-gradient(180deg, rgba(9, 26, 92, 0.72), rgba(4, 8, 38, 0.94));
  }

  .mobile-app-track {
    --mobile-page-index: 0;
    height: 100%;
    display: flex;
    transform: translate3d(calc(var(--mobile-page-index) * -100%), 0, 0);
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .mobile-app-page {
    flex: 0 0 100%;
    min-width: 0;
    min-height: 0;
    opacity: 0.48;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-app-page.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-page-scroll {
    height: 100%;
    overflow: auto;
    padding: 10px;
    overscroll-behavior: contain;
  }

  .mobile-section-stack {
    display: grid;
    gap: 10px;
  }

  .mobile-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-section-heading h3,
  .mobile-card-title {
    margin: 0;
    color: #fff6cb;
    font: 900 0.95rem var(--font-display);
    text-transform: uppercase;
  }

  .mobile-section-heading span,
  .mobile-card-kicker,
  .mobile-muted {
    color: #bdb4f3;
    font: 800 0.62rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-app-card,
  .mobile-radar-card,
  .mobile-forecast-card,
  .mobile-news-card,
  .mobile-music-card,
  .mobile-link-card {
    padding: 10px;
  }

  .mobile-now-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .mobile-now-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(135, 230, 255, 0.34);
    border-radius: 7px;
    background: rgba(5, 8, 34, 0.38);
  }

  .mobile-now-icon img,
  .mobile-forecast-icon img,
  .mobile-radar-weather img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(135, 230, 255, 0.24));
  }

  .mobile-now-copy {
    min-width: 0;
  }

  .mobile-now-copy strong {
    display: block;
    color: #ffffff;
    font: 900 clamp(2.4rem, 19vw, 4.6rem) var(--font-display);
    line-height: 0.92;
  }

  .mobile-now-copy h3 {
    margin: 0 0 4px;
    color: #fff6cb;
    font: 900 0.94rem var(--font-ui);
    text-transform: uppercase;
  }

  .mobile-now-copy p,
  .mobile-app-card p,
  .mobile-news-card p,
  .mobile-music-card p,
  .mobile-forecast-card p {
    margin: 0.4rem 0 0;
    color: #f6f1ff;
    line-height: 1.35;
  }

  .mobile-now-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .mobile-now-controls button,
  .mobile-channel-tabs button,
  .mobile-mini-player button,
  .mobile-pill-button,
  .mobile-news-row,
  .mobile-music-release-button,
  .mobile-radar-list button,
  .mobile-radar-marker,
  .mobile-radar-pin {
    appearance: none;
    min-height: 44px;
    border: 1px solid rgba(135, 230, 255, 0.48);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(35, 89, 201, 0.72), rgba(12, 31, 112, 0.84));
    color: #ffffff;
    font: 900 0.72rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-now-transmission-list,
  .mobile-link-list,
  .mobile-radar-list,
  .mobile-music-release-list,
  .mobile-news-list,
  .mobile-shop-grid {
    display: grid;
    gap: 8px;
  }

  .mobile-news-row,
  .mobile-music-release-button,
  .mobile-radar-list button {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    text-align: left;
  }

  .mobile-news-row strong,
  .mobile-music-release-button strong,
  .mobile-radar-list button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-radar-card {
    padding: 8px;
  }

  .mobile-radar-map {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.42;
    min-height: 220px;
    border: 1px solid rgba(135, 230, 255, 0.34);
    border-radius: 7px;
    background:
      radial-gradient(circle at 48% 42%, rgba(135, 230, 255, 0.14), transparent 34%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, rgba(6, 30, 104, 0.78), rgba(4, 8, 38, 0.92));
  }

  .mobile-radar-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mobile-radar-static-map {
    opacity: 0;
  }

  .mobile-radar-region {
    fill: rgba(239, 76, 201, 0.16);
    stroke: rgba(255, 240, 166, 0.78);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .mobile-radar-marker,
  .mobile-radar-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    min-width: 42px;
    min-height: 42px;
    padding: 3px 6px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px rgba(135, 230, 255, 0.18);
  }

  .mobile-radar-marker.is-active,
  .mobile-radar-pin.is-active,
  .mobile-channel-tabs button.is-active {
    border-color: rgba(255, 240, 166, 0.9);
    background:
      linear-gradient(180deg, rgba(245, 162, 54, 0.9), rgba(239, 76, 201, 0.68)),
      rgba(9, 18, 67, 0.92);
    color: #ffffff;
  }

  .mobile-radar-weather {
    display: grid;
    place-items: center;
    gap: 1px;
    font-size: 0.56rem;
  }

  .mobile-radar-weather img {
    width: 22px;
    height: 22px;
  }

  .mobile-radar-pin {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 999px;
    color: #fff6cb;
    font-size: 0.9rem;
  }

  .mobile-map-sheet {
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }

  .mobile-map-sheet dl,
  .mobile-music-meta,
  .mobile-forecast-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    margin: 8px 0 0;
    color: #bff7ff;
    font: 800 0.68rem var(--font-mono);
  }

  .mobile-map-sheet dt,
  .mobile-music-meta dt,
  .mobile-forecast-meta dt {
    color: #fff0a6;
    text-transform: uppercase;
  }

  .mobile-forecast-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 84%);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .mobile-forecast-card {
    min-height: 260px;
    display: grid;
    grid-template-rows: auto auto minmax(64px, auto) auto auto;
    scroll-snap-align: start;
  }

  .mobile-forecast-icon {
    width: 76px;
    height: 76px;
    margin: 8px 0;
  }

  .mobile-forecast-temp {
    color: #ffffff;
    font: 900 1.7rem var(--font-display);
  }

  .mobile-video-shell {
    overflow: hidden;
    aspect-ratio: 9 / 16;
    max-height: 360px;
    border-radius: 6px;
    background: rgba(5, 8, 34, 0.72);
  }

  .mobile-video-shell iframe,
  .mobile-video-shell video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  .mobile-music-hero {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .mobile-music-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(188, 231, 255, 0.34);
  }

  .mobile-music-card h3,
  .mobile-news-card h3,
  .mobile-forecast-card h3 {
    margin: 0;
    color: #fff6cb;
    font: 900 1rem var(--font-display);
    text-transform: uppercase;
  }

  .mobile-link-list {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .mobile-link-card,
  .mobile-link-list .site-link-card {
    display: grid;
    gap: 3px;
    color: #ffffff;
    text-decoration: none;
  }

  .mobile-link-card strong,
  .mobile-link-list .site-link-card strong {
    color: #fff6cb;
    font: 900 0.76rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-link-card span,
  .mobile-link-list .site-link-card span {
    color: #bff7ff;
    font: 800 0.6rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-news-card figure,
  .mobile-news-card .news-media {
    overflow: hidden;
    margin: 10px 0 0;
    border-radius: 6px;
  }

  .mobile-news-card img,
  .mobile-news-card video,
  .mobile-news-card audio {
    max-width: 100%;
  }

  .mobile-mini-player {
    min-height: 54px;
    display: grid;
    grid-template-columns: 44px 58px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(245, 162, 54, 0.42);
    border-radius: 7px;
    background:
      linear-gradient(90deg, rgba(9, 18, 67, 0.94), rgba(54, 29, 108, 0.9)),
      rgba(6, 13, 57, 0.92);
  }

  .mobile-mini-player button {
    min-height: 42px;
    padding: 0 6px;
  }

  .mobile-mini-player-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-mini-player-copy span {
    color: #bdb4f3;
    font: 800 0.58rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-mini-player-copy strong {
    overflow: hidden;
    color: #ffffff;
    font: 900 0.78rem var(--font-ui);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-channel-tabs {
    min-height: 56px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, 1fr);
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 1px;
    scrollbar-width: none;
  }

  .mobile-channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-channel-tabs button {
    padding: 0 8px;
    color: #bff7ff;
    white-space: nowrap;
  }

  .mobile-empty-state {
    margin: 0;
    color: #d8d3ff;
    font: 800 0.74rem var(--font-mono);
    text-transform: uppercase;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.is-world-open .mobile-app-shell {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 8px;
  }

  .mobile-app-header {
    grid-column: 2;
    min-height: 54px;
    padding: 7px 9px;
  }

  .mobile-alert-strip {
    grid-column: 2;
    min-height: 28px;
  }

  .mobile-app-viewport {
    grid-column: 2;
    min-height: 0;
  }

  .mobile-mini-player {
    grid-column: 2;
    min-height: 46px;
  }

  .mobile-channel-tabs {
    grid-column: 1;
    grid-row: 1 / 5;
    min-height: 0;
    grid-auto-flow: row;
    grid-auto-rows: minmax(42px, 1fr);
    grid-auto-columns: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }

  .mobile-channel-tabs button {
    min-height: 42px;
    white-space: normal;
  }

  .mobile-page-scroll {
    padding: 8px;
  }

  .mobile-section-stack {
    gap: 8px;
  }

  .mobile-now-layout,
  .mobile-map-layout,
  .mobile-news-layout,
  .mobile-music-layout,
  .mobile-shop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(220px, 0.94fr);
    gap: 8px;
    align-items: start;
  }

  .mobile-radar-map {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .mobile-forecast-strip {
    grid-auto-columns: minmax(210px, 31%);
  }

  .mobile-forecast-card {
    min-height: 230px;
  }

  .mobile-video-shell {
    max-height: 260px;
  }
}

.monitor-canvas,
.monitor-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.monitor-canvas {
  z-index: 4;
  pointer-events: none;
}

.landing-channel-pad {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  transform: translateZ(0);
}

.landing-channel-pad button {
  position: absolute;
  left: var(--channel-x, 92.3%);
  top: var(--channel-y, 51%);
  width: var(--channel-width, 4.3%);
  height: var(--channel-height, 3.15%);
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: var(--cursor-pointer);
  pointer-events: auto;
  transform: translateZ(0);
}

.landing-channel-pad button:nth-child(1) { --channel-y: 50.5%; }
.landing-channel-pad button:nth-child(2) { --channel-y: 54.1%; }
.landing-channel-pad button:nth-child(3) { --channel-y: 57.5%; }
.landing-channel-pad button:nth-child(4) { --channel-y: 60.9%; }
.landing-channel-pad button:nth-child(5) { --channel-y: 64.4%; }
.landing-channel-pad button:nth-child(6) { --channel-y: 68.0%; }
.landing-channel-pad button:nth-child(7) { --channel-y: 71.5%; }
.landing-channel-pad button:nth-child(8) { --channel-y: 75.0%; }
.landing-channel-pad button:nth-child(9) { --channel-y: 78.5%; }

.landing-channel-pad button:focus-visible {
  outline: 2px solid rgba(255, 240, 166, 0.9);
  outline-offset: 2px;
  background: rgba(135, 230, 255, 0.14);
}

.monitor-power-button {
  --monitor-power-x: 85.5%;
  --monitor-power-y: 82.4%;
  position: absolute;
  left: var(--monitor-power-x);
  top: var(--monitor-power-y);
  width: max(2.75%, 32px);
  height: max(4.1%, 32px);
  z-index: 8;
  border: 2px solid rgba(246, 241, 255, 0.82);
  border-radius: 999px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.95), rgba(135, 230, 255, 0.44) 34%, rgba(239, 76, 201, 0.2) 64%, transparent 72%);
  opacity: 0.88;
  cursor: var(--cursor-pointer);
  transform: translate(-50%, -50%) translateZ(0);
  isolation: isolate;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
  box-shadow:
    0 0 0 4px rgba(31, 72, 216, 0.48),
    0 0 12px rgba(135, 230, 255, 0.72),
    0 0 28px rgba(239, 76, 201, 0.32);
  animation:
    powerPulse 1.3s ease-in-out infinite alternate,
    powerButtonNudge 2.4s var(--juice-snap) infinite;
}

.monitor-power-button::before,
.monitor-power-button::after {
  content: "";
  position: absolute;
  inset: -84%;
  z-index: -1;
  border: 2px solid rgba(255, 240, 166, 0.7);
  border-radius: 999px;
  pointer-events: none;
}

.monitor-power-button::before {
  animation: powerTargetPing 1.72s ease-out infinite;
}

.monitor-power-button::after {
  inset: -142%;
  border-color: rgba(135, 230, 255, 0.44);
  animation: powerTargetPing 1.72s ease-out 0.5s infinite;
}

.monitor-power-button:hover,
.monitor-power-button:focus-visible {
  opacity: 1;
  filter:
    drop-shadow(0 0 7px rgba(135, 230, 255, 0.88))
    drop-shadow(0 0 14px rgba(239, 76, 201, 0.4));
  outline: none;
  transform: translate(-50%, -50%) scale(1.08);
}

.monitor-source {
  visibility: visible;
  z-index: 1;
  object-fit: contain;
  pointer-events: none;
}

@keyframes ambientShift {
  from {
    transform: translate3d(-1%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@keyframes powerPulse {
  from {
    box-shadow:
      0 0 0 4px rgba(31, 72, 216, 0.42),
      0 0 10px rgba(135, 230, 255, 0.58),
      0 0 22px rgba(239, 76, 201, 0.24);
  }

  to {
    box-shadow:
      0 0 0 7px rgba(31, 72, 216, 0.18),
      0 0 18px rgba(135, 230, 255, 0.9),
      0 0 36px rgba(239, 76, 201, 0.46);
  }
}

@keyframes powerTargetPing {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  18% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes powerButtonNudge {
  0%,
  58%,
  100% {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
  }

  66% {
    transform: translate(-50%, -50%) translateZ(0) scale(1.12);
  }

  74% {
    transform: translate(-50%, -50%) translateZ(0) scale(0.96);
  }

  82% {
    transform: translate(-50%, -50%) translateZ(0) scale(1.07);
  }
}

@keyframes enterReadyPulse {
  from {
    filter: saturate(1) brightness(1);
    box-shadow:
      0 0 0 4px rgba(18, 38, 68, 0.7),
      0 0 24px rgba(239, 76, 201, 0.46),
      inset 0 2px 0 rgba(255, 255, 255, 0.48);
  }

  to {
    filter: saturate(1.28) brightness(1.08);
    box-shadow:
      0 0 0 5px rgba(255, 240, 166, 0.48),
      0 0 30px rgba(135, 230, 255, 0.58),
      0 0 48px rgba(239, 76, 201, 0.38),
      inset 0 2px 0 rgba(255, 255, 255, 0.62);
  }
}

@keyframes enterReadySweep {
  0%,
  34% {
    transform: translateX(-64%);
  }

  100% {
    transform: translateX(64%);
  }
}

@keyframes mapPulse {
  0%,
  100% {
    opacity: 0.48;
  }

  50% {
    opacity: 0.86;
  }
}

@keyframes mapOutlineHue {
  0% {
    filter:
      hue-rotate(-12deg)
      drop-shadow(0 0 2px rgba(8, 16, 45, 1))
      drop-shadow(0 0 7px rgba(239, 76, 201, 0.72))
      drop-shadow(0 0 18px rgba(239, 76, 201, 0.34));
  }

  44% {
    filter:
      hue-rotate(8deg)
      drop-shadow(0 0 2px rgba(8, 16, 45, 1))
      drop-shadow(0 0 8px rgba(245, 162, 54, 0.58))
      drop-shadow(0 0 20px rgba(239, 76, 201, 0.3));
  }

  72% {
    filter:
      hue-rotate(31deg)
      drop-shadow(0 0 2px rgba(8, 16, 45, 1))
      drop-shadow(0 0 8px rgba(135, 230, 255, 0.52))
      drop-shadow(0 0 20px rgba(239, 76, 201, 0.28));
  }

  100% {
    filter:
      hue-rotate(-18deg)
      drop-shadow(0 0 2px rgba(8, 16, 45, 1))
      drop-shadow(0 0 7px rgba(239, 76, 201, 0.72))
      drop-shadow(0 0 18px rgba(239, 76, 201, 0.34));
  }
}

@keyframes mapRegionColorCycle {
  0%,
  100% {
    fill: rgba(239, 76, 201, 0.078);
    stroke: #ef4cc9;
  }

  33% {
    fill: rgba(245, 162, 54, 0.07);
    stroke: #f5a236;
  }

  66% {
    fill: rgba(135, 230, 255, 0.058);
    stroke: #87e6ff;
  }
}

@keyframes mapRegionHighlightCycle {
  0%,
  100% {
    stroke: rgba(255, 240, 166, 0.74);
  }

  33% {
    stroke: rgba(255, 197, 95, 0.68);
  }

  66% {
    stroke: rgba(188, 244, 255, 0.58);
  }
}

@keyframes pinPulse {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.78);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.08);
  }
}

@keyframes sectionTabPop {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  42% {
    transform: translateY(-2px) scale(1.045);
    filter: brightness(1.24) saturate(1.24);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes sectionPanelSnap {
  0% {
    filter: brightness(1.32) saturate(1.2);
  }

  42% {
    filter: brightness(1.08) saturate(1.1);
  }

  100% {
    filter: none;
  }
}

@keyframes pinPopupOpen {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 9px, 0) scale(0.88);
    filter: brightness(1.5) saturate(1.28);
  }

  56% {
    opacity: 1;
    transform: translate3d(2px, -2px, 0) scale(1.035);
    filter: brightness(1.12) saturate(1.12);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes analogPinGlow {
  0%,
  100% {
    border-color: rgba(255, 240, 166, 0.58);
    box-shadow:
      inset 0 0 0 2px rgba(255, 240, 166, 0.08),
      inset 0 -12px 18px rgba(0, 0, 0, 0.5),
      0 0 0 2px rgba(5, 8, 34, 0.86),
      0 0 10px rgba(255, 240, 166, 0.28),
      0 0 22px rgba(239, 76, 201, 0.28);
  }

  38% {
    border-color: rgba(245, 162, 54, 0.62);
    box-shadow:
      inset 0 0 0 2px rgba(245, 162, 54, 0.08),
      inset 0 -12px 18px rgba(0, 0, 0, 0.5),
      0 0 0 2px rgba(5, 8, 34, 0.86),
      0 0 12px rgba(245, 162, 54, 0.32),
      0 0 26px rgba(239, 76, 201, 0.2);
  }

  72% {
    border-color: rgba(135, 230, 255, 0.5);
    box-shadow:
      inset 0 0 0 2px rgba(135, 230, 255, 0.07),
      inset 0 -12px 18px rgba(0, 0, 0, 0.5),
      0 0 0 2px rgba(5, 8, 34, 0.86),
      0 0 12px rgba(135, 230, 255, 0.24),
      0 0 24px rgba(239, 76, 201, 0.22);
  }
}

@keyframes analogMarkerGlow {
  0%,
  100% {
    filter:
      drop-shadow(0 1px 0 rgba(5, 8, 34, 0.98))
      drop-shadow(1px 0 0 rgba(239, 76, 201, 0.2))
      drop-shadow(-1px 0 0 rgba(135, 230, 255, 0.12))
      drop-shadow(0 0 7px rgba(255, 240, 166, 0.2));
  }

  48% {
    filter:
      drop-shadow(0 1px 0 rgba(5, 8, 34, 0.98))
      drop-shadow(1px 0 0 rgba(245, 162, 54, 0.22))
      drop-shadow(-1px 0 0 rgba(239, 76, 201, 0.16))
      drop-shadow(0 0 9px rgba(245, 162, 54, 0.24));
  }

  76% {
    filter:
      drop-shadow(0 1px 0 rgba(5, 8, 34, 0.98))
      drop-shadow(1px 0 0 rgba(135, 230, 255, 0.18))
      drop-shadow(-1px 0 0 rgba(239, 76, 201, 0.18))
      drop-shadow(0 0 8px rgba(135, 230, 255, 0.2));
  }
}

@keyframes analogGlyphColor {
  0%,
  100% {
    color: #fff0a6;
  }

  42% {
    color: #f5c05c;
  }

  76% {
    color: #c8f4ff;
  }
}

@keyframes colorBleed {
  0% {
    opacity: 0.42;
    transform: translate3d(-1.2%, -0.6%, 0) scale(1.02);
    filter: hue-rotate(-16deg);
  }

  50% {
    opacity: 0.78;
  }

  100% {
    opacity: 0.64;
    transform: translate3d(1.1%, 0.8%, 0) scale(1.05);
    filter: hue-rotate(18deg);
  }
}

@keyframes scanCrawl {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 18px, 0 0;
  }
}

@keyframes buttonGlitch {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-5px, 2px);
  }

  50% {
    transform: translate(4px, -1px);
  }

  75% {
    transform: translate(-2px, -3px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes worldVideoDrift {
  from {
    transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
  }

  to {
    transform: scale(1.15) translate3d(1.4%, 0.9%, 0);
  }
}

@keyframes symbolTickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes hostNameHue {
  0% {
    color: #fff0a6;
    text-shadow:
      0 0 8px rgba(255, 240, 166, 0.34),
      0 0 14px rgba(245, 162, 54, 0.24);
  }

  48% {
    color: #f5a236;
    text-shadow:
      0 0 9px rgba(245, 162, 54, 0.44),
      0 0 16px rgba(244, 123, 61, 0.3);
  }

  100% {
    color: #ef7bd6;
    text-shadow:
      0 0 9px rgba(239, 123, 214, 0.42),
      0 0 16px rgba(239, 76, 201, 0.3);
  }
}

@keyframes worldScanlineDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 0 18px, 8px 0, 0 0;
  }
}

@keyframes dashboardRollBand {
  0%,
  63%,
  100% {
    opacity: 0;
    transform: translate3d(0, -18%, 0) skewY(0deg);
  }

  64% {
    opacity: 0.3;
    transform: translate3d(0.4%, 0%, 0) skewY(-0.12deg);
  }

  66% {
    opacity: 0.18;
    transform: translate3d(-0.3%, 165%, 0) skewY(0.1deg);
  }

  68% {
    opacity: 0.24;
    transform: translate3d(0.2%, 310%, 0) skewY(-0.08deg);
  }

  70% {
    opacity: 0.12;
    transform: translate3d(-0.2%, 505%, 0) skewY(0.08deg);
  }

  72% {
    opacity: 0;
    transform: translate3d(0, 590%, 0) skewY(0deg);
  }
}

@keyframes tickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(var(--ticker-distance) * -1), 0, 0);
  }
}

@keyframes mobileTickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% - 2.8rem), 0, 0);
  }
}

@keyframes mobileAlertTickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - 1.4rem), 0, 0);
  }
}

@keyframes mapRegionHueCycle {
  0% {
    filter: hue-rotate(0deg) drop-shadow(0 0 5px rgba(239, 76, 201, 0.32));
  }

  35% {
    filter: hue-rotate(28deg) drop-shadow(0 0 7px rgba(245, 162, 54, 0.28));
  }

  70% {
    filter: hue-rotate(-22deg) drop-shadow(0 0 6px rgba(135, 230, 255, 0.26));
  }

  100% {
    filter: hue-rotate(0deg) drop-shadow(0 0 5px rgba(239, 76, 201, 0.32));
  }
}

@keyframes weatherValueSettle {
  from {
    opacity: 0.5;
    transform: translate3d(0, 8px, 0) scale(0.985);
    filter: brightness(1.32) saturate(1.18);
  }

  68% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.01);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes weatherValueRise {
  from {
    opacity: 0.46;
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: brightness(1.38) saturate(1.22);
  }

  66% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.012);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes weatherValueFall {
  from {
    opacity: 0.46;
    transform: translate3d(0, -18px, 0) scale(0.98);
    filter: brightness(1.24) saturate(1.08);
  }

  66% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.006);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes signalBarSettle {
  from {
    opacity: 0.28;
    transform: translate3d(0, 10px, 0) scaleY(0.55);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scaleY(1.08);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(1);
  }
}

@keyframes hostNameHueCycle {
  0% {
    filter: hue-rotate(-10deg) saturate(1.02);
  }

  34% {
    filter: hue-rotate(20deg) saturate(1.16);
  }

  68% {
    filter: hue-rotate(-26deg) saturate(1.12);
  }

  100% {
    filter: hue-rotate(-10deg) saturate(1.02);
  }
}

@keyframes zodiacHueCycle {
  0% {
    filter: hue-rotate(-18deg) saturate(1.08);
  }

  33% {
    filter: hue-rotate(28deg) saturate(1.2);
  }

  66% {
    filter: hue-rotate(-34deg) saturate(1.16);
  }

  100% {
    filter: hue-rotate(-18deg) saturate(1.08);
  }
}

@keyframes zodiacFieldDrift {
  from {
    background-position: 0 0, 0 0, 180px 42px;
  }

  to {
    background-position: 144px 144px, 360px -84px, 540px 126px;
  }
}

@keyframes shopAdGridDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(34px, 29px, 0) scale(1.02);
  }
}

@keyframes shopAdTileDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.8deg) scale(1);
  }

  50% {
    transform: translate3d(5px, -7px, 0) rotate(0.9deg) scale(1.035);
  }
}

@keyframes shopAdImageZoom {
  0%,
  100% {
    transform: scale(1.02);
  }

  50% {
    transform: scale(1.16);
  }
}

@keyframes siteHueCycle {
  0% {
    filter: hue-rotate(-12deg) saturate(1.02) brightness(1);
  }

  50% {
    filter: hue-rotate(18deg) saturate(1.08) brightness(1.02);
  }

  100% {
    filter: hue-rotate(32deg) saturate(1.04) brightness(1);
  }
}

@keyframes loreGlint {
  0% {
    opacity: 0;
    transform: translate3d(-44%, 0, 0);
  }

  32% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(42%, 0, 0);
  }
}

@keyframes loreTextFade {
  0% {
    opacity: 0.68;
    filter: brightness(1.55) saturate(1.18);
    transform: translate3d(0, 2px, 0);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sunsetCloudDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100vw, 0, 0);
  }
}

@keyframes mapCloudDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-33.333%, 0, 0);
  }
}

@keyframes mapImageDrift {
  from {
    transform: scale(1.02) translate3d(-1.5%, -0.6%, 0);
  }

  to {
    transform: scale(1.07) translate3d(1.4%, 0.7%, 0);
  }
}

@keyframes portalOpen {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px) brightness(0.74) saturate(1.1);
    border-radius: 9% / 12%;
  }

  8% {
    opacity: 1;
    transform: scale(0.96);
    filter: blur(0.6px) brightness(0.9) saturate(1.4);
  }

  44% {
    left: 18vw;
    top: 20vh;
    width: 54vw;
    height: 58vh;
    opacity: 1;
    transform: scale(1.02);
    border-radius: 8% / 10%;
    filter: blur(0) brightness(1) saturate(1.7);
  }

  78% {
    left: 7vw;
    top: 6vh;
    width: 86vw;
    height: 88vh;
    opacity: 1;
    transform: scale(1.025);
    border-radius: 4% / 5%;
    filter: blur(0) brightness(1.12) saturate(2);
  }

  93% {
    left: -2vw;
    top: -2vh;
    width: 104vw;
    height: 104vh;
    opacity: 1;
    transform: scale(1.055);
    border-radius: 0;
    filter: blur(1px) brightness(1.42) saturate(2.5);
  }

  100% {
    left: -4vw;
    top: -4vh;
    width: 108vw;
    height: 108vh;
    opacity: 0;
    transform: scale(1.08);
    filter: blur(7px) brightness(1.85) saturate(2.8);
    border-radius: 0;
  }
}

@keyframes portalVideoSurge {
  0% {
    transform: scale(1.02) rotate(0deg);
    filter: saturate(1.45) contrast(1.12) brightness(0.76) hue-rotate(0deg);
  }

  48% {
    transform: scale(1.08) rotate(0.2deg);
    filter: saturate(1.8) contrast(1.22) brightness(0.94) hue-rotate(12deg);
  }

  82% {
    transform: scale(1.2) rotate(-0.45deg);
    filter: saturate(2.25) contrast(1.42) brightness(1.12) hue-rotate(34deg);
  }

  100% {
    transform: scale(1.42) rotate(0.6deg);
    filter: saturate(2.8) contrast(1.75) brightness(1.42) hue-rotate(82deg);
  }
}

@keyframes portalRippleScan {
  0% {
    opacity: 0.2;
    transform: scale(0.96);
    background-position: 0 0, 50% 50%;
  }

  42% {
    opacity: 0.44;
    transform: scale(1.04);
    background-position: 0 28px, 50% 50%;
  }

  78% {
    opacity: 0.72;
    transform: scale(1.18);
    background-position: 0 76px, 50% 50%;
  }

  100% {
    opacity: 0.95;
    transform: scale(1.38);
    background-position: 0 132px, 50% 50%;
  }
}

@keyframes portalSignalBloom {
  0% {
    opacity: 0.2;
    transform: scale(0.82) rotate(0deg);
  }

  58% {
    opacity: 0.5;
    transform: scale(1.04) rotate(8deg);
  }

  84% {
    opacity: 0.86;
    transform: scale(1.42) rotate(-15deg);
  }

  100% {
    opacity: 1;
    transform: scale(2.1) rotate(24deg);
  }
}

@keyframes portalCopyLock {
  0%,
  62% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  72% {
    opacity: 0.72;
    transform: translateX(-50%) translateY(-5px);
  }

  86% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
  }
}

@keyframes worldReveal {
  0% {
    opacity: 0;
    transform: scale(1.045);
    filter: brightness(1.68) saturate(1.55) blur(6px);
  }

  58% {
    opacity: 1;
    transform: scale(0.992);
    filter: brightness(1.16) saturate(1.2) blur(0);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes dashboardShellPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.982);
  }

  62% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes dashboardShellMaskFade {
  0% {
    opacity: 0;
    filter: brightness(1.18) saturate(1.12);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes dashboardPanelPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.986);
    filter: brightness(1.34) saturate(1.24);
  }

  64% {
    opacity: 1;
    transform: translateY(-2px) scale(1.006);
    filter: brightness(1.08) saturate(1.1);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .broadcast-shell {
    padding: 4px;
  }

  .dream-stage {
    height: calc(100svh - 8px);
  }

  .monitor-rig {
    width: min(98vw, calc((100svh - 8px) * 1.57));
  }

  .screen-copy {
    gap: 6px;
    padding: clamp(8px, 1.7vw, 24px);
  }

  .intro-commercial {
    width: min(78%, 720px);
    height: clamp(168px, 42vh, 286px);
  }

  .wly-bug {
    width: clamp(72px, 7.2vw, 118px);
  }

  .host-intro-card {
    width: clamp(146px, 21vw, 270px);
  }

  .dream-button {
    min-height: 44px;
    font-size: clamp(0.72rem, 1.05vw, 0.98rem);
  }
}

@media (max-width: 1500px), (max-height: 860px) {
  .dreamworld-page {
    padding: clamp(12px, 1.55vw, 24px);
  }

  .world-shell {
    width: min(1300px, calc(100vw - 32px));
    height: calc(100vh - clamp(24px, 3.1vw, 48px));
  }

  .world-header {
    min-height: clamp(92px, 7.6vw, 118px);
    padding-block: clamp(10px, 1vw, 15px);
  }

  .world-logo {
    width: clamp(74px, 6.4vw, 98px);
  }

  .world-brand h1 {
    font-size: clamp(1.42rem, 2.45vw, 2.62rem);
  }

  .world-brand strong {
    font-size: clamp(0.68rem, 0.9vw, 0.9rem);
  }

  .signal-origin {
    min-width: 184px;
    padding-right: clamp(56px, 5.4vw, 82px);
    font-size: 0.8rem;
  }

  .persistent-social-links {
    max-width: 100%;
  }

  .orbit-bug {
    width: clamp(42px, 4.1vw, 62px);
  }

  .world-nav {
    grid-template-columns: var(--dashboard-side-column) minmax(0, 1fr);
  }

  .nav-links a,
  .nav-item > button {
    min-height: 38px;
    padding: 0.46rem 0.42rem;
    font-size: clamp(0.56rem, 0.68vw, 0.72rem);
  }

  .world-grid {
    grid-template-columns: var(--dashboard-side-column) 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 7px;
    padding-inline: 8px;
    padding-bottom: 8px;
  }

  .left-rail {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
  }

  .conditions-panel {
    min-height: clamp(252px, 34vh, 292px);
  }

  .world-panel {
    border-radius: 6px;
  }

  .map-panel {
    padding: 8px;
  }

  .conditions-cycle-controls button {
    width: 36px;
    height: 28px;
    font-size: 1rem;
  }

  .bottom-deck {
    gap: 7px;
  }

  .forecast-week-grid {
    --forecast-card-min-height: 292px;
    grid-template-columns: repeat(var(--forecast-columns, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--forecast-card-min-height), 1fr);
  }

  .forecast-weather-card {
    grid-template-rows: auto auto minmax(150px, 1fr) auto auto minmax(2.4em, auto) auto;
  }

  .forecast-weather-glyph,
  .forecast-weather-icon-image {
    width: clamp(172px, 14vw, 244px);
    height: clamp(146px, 11.6vw, 206px);
  }

  .forecast-video-card {
    grid-column: span var(--forecast-span, 1);
  }

  .world-ticker {
    padding-block: 0.34rem;
  }
}

@media (max-height: 760px) and (min-width: 1101px) {
  .dreamworld-page {
    padding: 10px;
  }

  .world-shell {
    height: calc(100vh - 20px);
  }

  .world-header {
    min-height: 86px;
  }

  .world-brand h1 {
    font-size: clamp(1.45rem, 2.45vw, 2.62rem);
  }

  .world-logo {
    width: 74px;
  }

  .signal-origin small {
    display: none;
  }

  .world-grid {
    grid-template-rows: minmax(0, 1fr);
  }

  .now-panel {
    row-gap: 0.14rem;
  }

  .now-panel h2 {
    margin-bottom: 0.08rem;
  }

  .now-panel strong {
    font-size: 1.06rem;
  }

  .now-panel p {
    font-size: 0.58rem;
  }

  .music-waveform-canvas {
    height: 26px;
    min-height: 26px;
  }

  .now-panel .music-player-controls button {
    width: 28px;
    height: 28px;
  }

  .music-player-readout {
    font-size: 0.56rem;
  }

  .left-rail {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .conditions-panel {
    min-height: clamp(218px, 31vh, 258px);
  }

  .temperature-row {
    margin-top: 0.4rem;
  }

  .condition-weather-icon {
    transform: scale(0.94);
    transform-origin: center;
  }

  .signal-panel p {
    max-height: 5.8em;
  }

  .forecast-week-grid {
    --forecast-card-min-height: 270px;
    grid-template-columns: repeat(var(--forecast-columns, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--forecast-card-min-height), 1fr);
  }

  .forecast-weather-card {
    grid-template-rows: auto auto minmax(126px, 1fr) auto auto minmax(2.2em, auto) auto;
  }

  .forecast-weather-glyph,
  .forecast-weather-icon-image {
    width: clamp(148px, 12vw, 208px);
    height: clamp(126px, 10vw, 176px);
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .broadcast-shell {
    min-height: 100svh;
    padding: 12px;
  }

  .dream-stage {
    min-height: calc(100svh - 24px);
    aspect-ratio: auto;
  }

  .monitor-rig {
    width: min(144vw, 940px);
    transform: rotate(-0.25deg) translateX(-8%);
  }

  .screen-copy {
    inset: 0;
    padding: 18px 12px;
  }

  .intro-commercial {
    width: min(88%, 520px);
    height: clamp(150px, 42vw, 240px);
  }

  .intro-title-stack {
    left: 4%;
    top: 2%;
    width: 60%;
    gap: 8px;
  }

  .host-intro-card {
    left: 50%;
    top: 6%;
    width: clamp(102px, 34vw, 178px);
    box-shadow: none;
  }

  .host-intro-card figcaption {
    top: calc(100% + 0.2rem);
    max-width: 150%;
    font-size: 0.46rem;
  }

  .weather-line {
    font-size: clamp(0.88rem, 5vw, 1.65rem);
  }

  .title-on {
    font-size: clamp(0.64rem, 3.5vw, 1.05rem);
  }

  .wly-bug {
    width: clamp(82px, 24vw, 118px);
  }

  .dream-button {
    min-width: 72%;
    min-height: 48px;
    font-size: 0.72rem;
    padding: 0.64rem 0.7rem;
  }

}

@media (max-width: 1100px) {
  .world-header {
    align-items: flex-start;
    min-height: clamp(116px, 15vw, 150px);
  }

  .world-nav {
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  }

  .nav-links {
    grid-template-columns: repeat(4, 1fr);
  }

  .world-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .left-rail {
    grid-template-columns: repeat(2, 1fr);
    grid-row: auto;
  }

  .map-panel,
  .bottom-deck {
    grid-column: 1;
    grid-row: auto;
  }

  .bottom-deck {
    grid-template-columns: 1fr;
  }

  .music-now-view {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  }

  .music-now-notes {
    grid-column: 1 / -1;
  }

  .site-content-board {
    grid-template-columns: 1fr;
  }

  .panel-view-socials {
    grid-template-columns: 1fr;
  }

  .site-content-board:not(.panel-view-socials) .site-channel-media {
    min-height: 320px;
  }

  .panel-view-socials .site-channel-media {
    min-height: 0;
    width: min(100%, 360px);
    max-height: min(46vh, 420px);
  }

  .forecast-week-grid {
    --forecast-card-min-height: 292px;
    grid-template-columns: repeat(var(--forecast-columns, 3), minmax(220px, 1fr));
    grid-auto-rows: minmax(var(--forecast-card-min-height), 1fr);
    min-width: var(--forecast-min-width, 700px);
  }

}

@media (max-width: 720px) {
  .world-nav {
    grid-template-columns: 1fr;
  }

  .world-header {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.75rem;
  }

  .world-logo,
  .signal-origin {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }

  .signal-origin {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .persistent-social-links {
    justify-self: start;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    padding-right: 0;
  }

  .forecast-week-grid {
    grid-template-columns: repeat(var(--forecast-columns, 3), minmax(180px, 1fr));
    min-width: var(--forecast-mobile-min-width, 564px);
  }

  .music-now-view {
    grid-template-columns: 1fr;
  }

  .music-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .site-content-board {
    padding: 0.42rem;
  }

  .site-shop-grid {
    grid-template-columns: 1fr;
  }

  .forecast-video-card {
    grid-column: span var(--forecast-span, 1);
  }

  .world-brand-copy,
  .world-brand > div:not(.world-logo) {
    width: 100%;
    margin: 0;
    padding-inline: 0;
    grid-template-columns: 1fr;
    row-gap: 0.28rem;
  }

  .world-logo,
  .world-brand-copy h1,
  .world-brand-copy > strong,
  .persistent-social-links {
    grid-column: 1;
    grid-row: auto;
  }

  .persistent-social-links {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .persistent-social-links::before {
    content: none;
  }

  .world-brand h1 {
    max-width: 100%;
  }

  .nav-column-fill {
    display: none;
  }

  .nav-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .left-rail {
    grid-template-columns: 1fr;
  }

  .dream-map {
    min-height: 520px;
  }
}

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

html,
body,
.dreamworld-page,
.broadcast-shell,
.world-shell,
.world-panel {
  cursor: var(--cursor-default);
}

a,
button,
summary,
select,
label,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="range"],
[role="button"],
.dream-button,
.conditions-cycle-controls button,
.panel-title-row button,
.audio-row button,
.news-location-link,
.music-release-card,
.music-track-card,
.music-player-controls button,
.pin-popup-close,
.pin-popup-carousel-button,
.pin-popup-carousel-dot,
.bulletin-pin-item,
.orbit-bug {
  cursor: var(--cursor-pointer);
}

.world-nav a,
.world-nav button {
  cursor: var(--cursor-alt);
}

.world-nav a:hover,
.world-nav a:focus-visible,
.world-nav button:hover,
.world-nav button:focus-visible {
  cursor: var(--cursor-help);
}

.nav-links > :nth-child(1):is(a):hover,
.nav-links > :nth-child(1):hover > button {
  cursor: var(--cursor-help);
}

.nav-links > :nth-child(2):is(a):hover,
.nav-links > :nth-child(2):hover > button {
  cursor: var(--cursor-person);
}

.nav-links > :nth-child(3):is(a):hover,
.nav-links > :nth-child(3):hover > button {
  cursor: var(--cursor-location);
}

.nav-links > :nth-child(4):is(a):hover,
.nav-links > :nth-child(4):hover > button {
  cursor: var(--cursor-precision);
}

.nav-links > :nth-child(5):is(a):hover,
.nav-links > :nth-child(5):hover > button {
  cursor: var(--cursor-alt);
}

.nav-links > :nth-child(6):is(a):hover,
.nav-links > :nth-child(6):hover > button {
  cursor: var(--cursor-pointer);
}

.nav-links > :nth-child(7):is(a):hover,
.nav-links > :nth-child(7):hover > button {
  cursor: var(--cursor-help);
}

.world-nav a:active,
.world-nav button:active,
.world-nav a.is-active,
.world-nav button.is-active {
  cursor: var(--cursor-person);
}

.world-nav a[data-cursor-variant="help"],
.world-nav button[data-cursor-variant="help"] {
  cursor: var(--cursor-help);
}

.world-nav a[data-cursor-variant="person"],
.world-nav button[data-cursor-variant="person"] {
  cursor: var(--cursor-person);
}

.world-nav a[data-cursor-variant="location"],
.world-nav button[data-cursor-variant="location"] {
  cursor: var(--cursor-location);
}

.world-nav a[data-cursor-variant="precision"],
.world-nav button[data-cursor-variant="precision"] {
  cursor: var(--cursor-precision);
}

.world-nav a[data-cursor-variant="alt"],
.world-nav button[data-cursor-variant="alt"] {
  cursor: var(--cursor-alt);
}

.world-nav a[data-cursor-variant="pointer"],
.world-nav button[data-cursor-variant="pointer"] {
  cursor: var(--cursor-pointer);
}

.world-nav a:active,
.world-nav button:active,
.world-nav a.is-active,
.world-nav button.is-active {
  cursor: var(--cursor-person);
}

input,
textarea,
[contenteditable="true"] {
  cursor: var(--cursor-text);
}

.world-map-viewport,
.pin-popup-drag-handle,
.pin-popup-titlebar {
  cursor: var(--cursor-move);
}

.world-map-viewport.is-dragging,
.pin-popup.is-dragging .pin-popup-drag-handle {
  cursor: var(--cursor-move);
}

.world-map-pin {
  cursor: var(--cursor-location);
}

.world-map-pin:hover,
.world-map-pin:focus-visible {
  cursor: var(--cursor-person);
}

.world-map-pin:active,
.world-map-pin.is-selected {
  cursor: var(--cursor-alt);
}

.world-weather-marker {
  cursor: var(--cursor-precision);
}

.world-weather-marker:hover,
.world-weather-marker:focus-visible {
  cursor: var(--cursor-location);
}

.world-weather-marker:active,
.world-weather-marker.is-selected {
  cursor: var(--cursor-help);
}

.music-seek-slider,
.music-player-controls input[type="range"] {
  cursor: var(--cursor-horizontal-resize);
}

.is-loading,
[aria-busy="true"] {
  cursor: var(--cursor-working);
}

:disabled,
[disabled],
[aria-disabled="true"] {
  cursor: var(--cursor-unavailable);
}

@keyframes mobile-swipe-hint-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  16%,
  72% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
}

@media (max-width: 900px) {
  body.is-world-open .world-shell {
    padding: 0;
  }

  body.is-world-open .mobile-app-shell {
    position: relative;
    display: block;
    height: 100svh;
    touch-action: pan-y;
  }

  .mobile-app-viewport {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 24% 0%, rgba(245, 162, 54, 0.19), transparent 34%),
      linear-gradient(180deg, rgba(9, 26, 92, 0.72), rgba(4, 8, 38, 0.96));
  }

  .mobile-page-scroll {
    padding: clamp(12px, 3.6vw, 20px);
  }

  .mobile-swipe-hint {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 40;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 240, 166, 0.55);
    border-radius: 6px;
    background: rgba(5, 8, 34, 0.9);
    color: #fff0a6;
    font: 900 0.64rem var(--font-mono);
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    pointer-events: none;
    animation: mobile-swipe-hint-in 4.2s ease both;
    transition: opacity 180ms ease;
  }

  .mobile-swipe-hint > span {
    color: #87e6ff;
    font-size: 1rem;
  }

  .mobile-swipe-hint.is-hidden {
    opacity: 0;
    animation: none;
  }

  .mobile-home-masthead {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: clamp(15px, 5vw, 24px);
    border: 1px solid rgba(188, 231, 255, 0.38);
    border-radius: 7px;
    background:
      linear-gradient(110deg, rgba(245, 162, 54, 0.25), transparent 31%),
      radial-gradient(circle at 84% 0%, rgba(239, 76, 201, 0.29), transparent 36%),
      linear-gradient(150deg, rgba(32, 74, 208, 0.96), rgba(9, 19, 94, 0.98));
    box-shadow:
      inset 0 0 32px rgba(135, 230, 255, 0.1),
      0 12px 28px rgba(0, 0, 0, 0.25);
  }

  .mobile-home-masthead::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  }

  .mobile-home-station,
  .mobile-home-station-copy,
  .mobile-home-page-number,
  .mobile-home-ticker {
    position: relative;
    z-index: 1;
  }

  .mobile-home-station {
    width: 66px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 6px;
    background: linear-gradient(135deg, #f5a236, #ef4cc9 50%, #1f48d8);
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
  }

  .mobile-home-station span {
    font: 900 1.35rem/0.9 var(--font-display);
  }

  .mobile-home-station strong {
    font: 900 0.52rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-home-station-copy {
    min-width: 0;
  }

  .mobile-home-station-copy p,
  .mobile-home-station-copy h2,
  .mobile-home-station-copy span,
  .mobile-home-ticker {
    margin: 0;
  }

  .mobile-home-station-copy p,
  .mobile-home-station-copy span,
  .mobile-home-page-number {
    color: #bff7ff;
    font: 900 0.59rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-home-station-copy h2 {
    margin: 3px 0;
    color: #fff6cb;
    font: 900 clamp(1.15rem, 6.2vw, 1.8rem)/1 var(--font-display);
    text-transform: uppercase;
  }

  .mobile-home-page-number {
    align-self: start;
    color: #fff0a6;
  }

  .mobile-home-ticker {
    grid-column: 1 / -1;
    display: flex;
    gap: 2.8rem;
    overflow: hidden;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 240, 166, 0.28);
    color: #fff0a6;
    font: 900 0.62rem/1.35 var(--font-mono);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-home-ticker span {
    flex: 0 0 auto;
    min-width: max-content;
    animation: mobileTickerScroll 18s linear infinite;
  }

  .mobile-radar-marker,
  .mobile-radar-marker.is-active,
  .mobile-radar-pin,
  .mobile-radar-pin.is-active {
    min-width: 44px;
    min-height: 44px;
    padding: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff6cb;
    box-shadow: none;
    text-shadow:
      0 2px 3px rgba(2, 5, 28, 0.98),
      0 0 9px rgba(135, 230, 255, 0.65);
  }

  .mobile-radar-marker.is-active,
  .mobile-radar-pin.is-active {
    filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 240, 166, 0.74));
  }

  .mobile-radar-marker:focus-visible,
  .mobile-radar-pin:focus-visible {
    outline: 2px solid #fff0a6;
    outline-offset: 1px;
  }

  .mobile-radar-weather {
    color: #fff;
    font-size: 0.62rem;
    text-shadow:
      0 2px 3px rgba(2, 5, 28, 1),
      0 0 6px rgba(2, 5, 28, 0.92);
  }

  .mobile-radar-weather img {
    width: 28px;
    height: 28px;
  }

  .mobile-radar-pin {
    font-size: 1.28rem;
  }

  [data-mobile-page="news"] .mobile-page-scroll {
    padding: clamp(8px, 2.4vw, 14px);
  }

  .mobile-news-broadcast {
    min-height: 100%;
    height: auto;
    padding: clamp(15px, 4.8vw, 28px);
  }

  .mobile-news-broadcast .news-observation-list {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-news-broadcast .news-observation-title {
    font-size: clamp(1rem, 5vw, 1.5rem);
  }

  .mobile-news-broadcast .news-observation-grid {
    grid-template-columns: minmax(70px, 0.8fr) 3ch minmax(0, 1.55fr) minmax(45px, 0.48fr);
    gap: clamp(5px, 2vw, 10px);
  }

  .mobile-news-broadcast .news-observation-row {
    min-height: 42px;
    font-size: clamp(0.64rem, 3vw, 0.9rem);
  }

  .mobile-news-detail-shell {
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .mobile-news-detail.news-card-detail {
    min-height: calc(100svh - 82px);
    padding: clamp(18px, 5vw, 30px);
  }

  .mobile-news-back {
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .mobile-forecast-page .mobile-page-scroll {
    overflow: hidden;
    padding: 0;
  }

  .mobile-forecast-deck {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
  }

  .mobile-forecast-deck .mobile-forecast-card {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(24px, 7vw, 42px);
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 82% 8%, rgba(239, 76, 201, 0.26), transparent 34%),
      linear-gradient(145deg, rgba(28, 68, 196, 0.94), rgba(5, 12, 64, 0.98));
    box-shadow: inset 0 0 48px rgba(135, 230, 255, 0.08);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-forecast-deck .mobile-forecast-card:nth-child(even) {
    background:
      radial-gradient(circle at 16% 4%, rgba(245, 162, 54, 0.22), transparent 36%),
      linear-gradient(150deg, rgba(45, 38, 165, 0.96), rgba(7, 14, 70, 0.99));
  }

  .mobile-forecast-position {
    position: absolute;
    top: clamp(24px, 7vw, 42px);
    right: clamp(24px, 7vw, 42px);
    color: #bff7ff;
    font: 900 0.65rem var(--font-mono);
  }

  .mobile-forecast-deck .mobile-card-kicker {
    max-width: calc(100% - 54px);
  }

  .mobile-forecast-deck .mobile-forecast-card h3 {
    max-width: 18ch;
    margin-top: 8px;
    font-size: clamp(1.4rem, 7vw, 2.5rem);
    line-height: 1.04;
  }

  .mobile-forecast-deck .mobile-forecast-icon {
    width: clamp(116px, 38vw, 170px);
    height: clamp(116px, 38vw, 170px);
    margin: auto 0 10px;
  }

  .mobile-forecast-deck .mobile-forecast-temp {
    font-size: clamp(2.2rem, 11vw, 4rem);
  }

  .mobile-forecast-deck .mobile-video-shell {
    width: 100%;
    min-height: 0;
    flex: 1;
    margin: 16px 0;
    aspect-ratio: auto;
    max-height: none;
  }

  .mobile-forecast-deck .mobile-video-shell video {
    object-fit: contain;
  }

  .mobile-forecast-scroll-cue {
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    color: #bff7ff;
    font: 900 0.62rem var(--font-mono);
    text-align: center;
    text-transform: uppercase;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.is-world-open .mobile-app-shell {
    display: block;
    height: 100svh;
  }

  .mobile-now-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: 10px;
  }

  .mobile-home-masthead {
    grid-column: 1 / -1;
    padding: 12px 16px;
  }

  .mobile-home-station {
    width: 54px;
  }

  .mobile-home-ticker {
    padding-top: 7px;
  }

  .mobile-news-broadcast {
    min-height: 100%;
    padding: 14px 20px;
  }

  .mobile-news-broadcast .news-observation-row {
    min-height: 34px;
    font-size: clamp(0.64rem, 1.75vw, 0.88rem);
  }

  .mobile-forecast-deck .mobile-forecast-card {
    padding: 20px clamp(30px, 8vw, 72px);
  }

  .mobile-forecast-position {
    top: 20px;
    right: clamp(30px, 8vw, 72px);
  }

  .mobile-forecast-deck .mobile-forecast-card h3 {
    font-size: clamp(1.3rem, 4vw, 2rem);
  }

  .mobile-forecast-deck .mobile-forecast-icon {
    position: absolute;
    right: clamp(30px, 9vw, 90px);
    top: 50%;
    width: clamp(108px, 22vw, 180px);
    height: clamp(108px, 22vw, 180px);
    margin: 0;
    transform: translateY(-50%);
  }

  .mobile-forecast-deck .mobile-forecast-temp,
  .mobile-forecast-deck .mobile-forecast-card > p:not(.mobile-card-kicker) {
    max-width: 52%;
  }

  .mobile-forecast-deck .mobile-video-shell {
    width: min(68%, 680px);
    margin: 10px 0;
  }
}

@keyframes mobileEnteringBlink {
  50% {
    opacity: 0.38;
  }
}

@media (max-width: 900px) {
  body:not(.is-world-open) .dream-stage {
    width: 100%;
    height: 100svh;
    aspect-ratio: auto;
    background: #fff;
  }

  body:not(.is-world-open) .dream-stage .ambient-field,
  body:not(.is-world-open) .dream-stage::before,
  body:not(.is-world-open) .monitor-rig {
    display: none;
  }

  .mobile-landing-gate {
    position: relative;
    z-index: 5;
    width: min(78vw, 340px);
    min-height: 154px;
    display: grid;
    place-items: center;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #f02535;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-landing-gate span {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border: 4px solid #00d8ff;
    border-radius: 50%;
    color: #00d8ff;
    font: 900 2rem/1 var(--font-display);
  }

  .mobile-landing-gate strong {
    color: #f02535;
    font: 900 0.88rem/1.2 var(--font-mono);
    letter-spacing: 0.04em;
  }

  .mobile-landing-gate.is-entering strong {
    animation: mobileEnteringBlink 700ms steps(2, end) infinite;
  }

  body.is-world-open .dreamworld-page {
    background: #fff;
  }

  body.is-world-open .world-bg-video {
    opacity: 0.16;
    filter: saturate(0.8) contrast(1.02);
  }

  body.is-world-open .mobile-app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 0;
    height: 100svh;
    color: #050711;
    background: #fff;
  }

  .mobile-app-header {
    min-height: 66px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(5, 7, 17, 0.18);
  }

  .mobile-app-station {
    border: 3px solid #00d8ff;
    border-radius: 50%;
    background: #fff;
    color: #00d8ff;
  }

  .mobile-app-title p,
  .mobile-app-title h2 {
    color: #f02535;
  }

  .mobile-app-status span {
    color: #050711;
  }

  .mobile-app-status strong {
    color: #00d8ff;
  }

  .mobile-alert-strip,
  .mobile-channel-tabs button {
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.18);
    background: #050711;
    color: #fff;
  }

  .mobile-channel-tabs {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
  }

  .mobile-channel-tabs button {
    min-width: 0;
    padding: 0 2px;
    font-size: clamp(0.48rem, 2.25vw, 0.58rem);
    text-overflow: clip;
  }

  .mobile-swipe-hint {
    display: none;
  }

  .mobile-app-viewport,
  .mobile-page-scroll {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .mobile-page-scroll {
    padding: 12px;
  }

  .mobile-app-card,
  .mobile-radar-card,
  .mobile-news-card,
  .mobile-music-card,
  .mobile-link-card {
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #050711;
    box-shadow:
      inset 0 0 0 1px rgba(5, 7, 17, 0.14),
      0 8px 18px rgba(5, 7, 17, 0.08);
  }

  .mobile-now-layout {
    min-height: 100%;
    grid-template-rows: auto;
  }

  .mobile-now-layout > .mobile-app-card {
    min-height: 0;
  }

  .mobile-map-sheet {
    background: #fff;
    color: #050711;
  }

  .mobile-map-return,
  .mobile-music-now-panel {
    appearance: none;
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(5, 7, 17, 0.28);
    border-radius: 0;
    background: #fff;
    color: #f02535;
    font: 900 0.72rem var(--font-mono);
    text-align: left;
    text-transform: uppercase;
  }

  .mobile-map-return::before {
    content: "< ";
    color: #00d8ff;
  }

  .mobile-radar-map {
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 48% 42%, rgba(0, 216, 255, 0.13), transparent 34%),
      #f6f8ff;
  }

  .mobile-map-enter {
    position: absolute;
    inset: auto 14px 14px;
    z-index: 5;
    appearance: none;
    min-height: 42px;
    border: 1px solid rgba(255, 240, 166, 0.72);
    border-radius: 4px;
    background:
      linear-gradient(90deg, rgba(245, 162, 54, 0.92), rgba(239, 76, 201, 0.78)),
      rgba(7, 16, 67, 0.9);
    color: #fff6cb;
    font: 900 0.76rem var(--font-mono);
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(5, 7, 17, 0.34);
  }

  .mobile-map-layout.is-map-expanded {
    height: 100%;
    min-height: 100%;
    grid-template-rows: minmax(0, 1fr);
  }

  .mobile-radar-card.is-expanded {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .mobile-radar-card.is-expanded .mobile-radar-map {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .mobile-section-heading h3,
  .mobile-card-title,
  .mobile-music-card h3,
  .mobile-news-card h3,
  .mobile-forecast-card h3 {
    color: #f02535;
  }

  .mobile-card-kicker,
  .mobile-muted,
  .mobile-section-heading span {
    color: #050711;
  }

  .mobile-now-copy strong,
  .mobile-now-copy p,
  .mobile-app-card p,
  .mobile-news-card p,
  .mobile-music-card p,
  .mobile-forecast-card p,
  .mobile-music-meta,
  .mobile-forecast-meta,
  .mobile-map-sheet dl {
    color: #101525;
  }

  .mobile-now-controls button,
  .mobile-news-row,
  .mobile-music-release-button,
  .mobile-radar-list button {
    border: 1px solid rgba(5, 7, 17, 0.28);
    border-radius: 0;
    background: #fff;
    color: #050711;
  }

  .mobile-music-layout {
    min-height: 100%;
    grid-template-rows: auto auto auto;
  }

  .mobile-music-now-list {
    display: grid;
    gap: 8px;
  }

  .mobile-music-now-panel {
    display: grid;
    gap: 4px;
    padding: 10px;
  }

  .mobile-music-now-panel strong {
    color: #f02535;
  }

  .mobile-music-now-panel small {
    color: #050711;
    font: 800 0.62rem var(--font-mono);
  }

  .mobile-link-card,
  .mobile-link-list .site-link-card {
    color: #050711;
  }

  .mobile-mini-player {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(5, 7, 17, 0.14);
  }

  .mobile-mini-player-copy strong {
    color: #f02535;
  }

  .mobile-mini-player-copy span {
    color: #050711;
  }

  [data-mobile-page="socials"] .mobile-section-stack,
  [data-mobile-page="shop"] .mobile-section-stack {
    min-height: 100%;
  }
}

@media (max-width: 900px) {
  body.is-world-open .dreamworld-page {
    background:
      linear-gradient(180deg, rgba(7, 21, 72, 0.58), rgba(4, 8, 38, 0.96)),
      #08115d;
  }

  body.is-world-open .mobile-app-shell {
    color: var(--ink);
    background: transparent;
  }

  .mobile-app-header {
    border: 1px solid rgba(188, 231, 255, 0.42);
    background:
      linear-gradient(90deg, rgba(15, 43, 142, 0.94), rgba(29, 66, 196, 0.74) 42%, rgba(8, 18, 83, 0.94)),
      rgba(6, 13, 57, 0.92);
    box-shadow:
      inset 0 0 18px rgba(135, 230, 255, 0.12),
      0 8px 22px rgba(0, 0, 0, 0.22);
  }

  .mobile-app-station {
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%),
      linear-gradient(135deg, #f5a236, #ef4cc9 48%, #1f48d8 100%);
    color: #fff;
  }

  .mobile-app-title p {
    color: #bff7ff;
  }

  .mobile-app-title h2,
  .mobile-section-heading h3,
  .mobile-card-title,
  .mobile-music-card h3,
  .mobile-news-card h3,
  .mobile-forecast-card h3,
  .mobile-music-now-panel strong,
  .mobile-mini-player-copy strong {
    color: #fff6cb;
  }

  .mobile-app-status span,
  .mobile-card-kicker,
  .mobile-muted,
  .mobile-section-heading span,
  .mobile-mini-player-copy span {
    color: #bdb4f3;
  }

  .mobile-app-status strong {
    color: #87e6ff;
  }

  .mobile-alert-strip,
  .mobile-channel-tabs button {
    border-color: rgba(245, 162, 54, 0.46);
    background:
      linear-gradient(90deg, rgba(86, 31, 98, 0.82), rgba(15, 40, 132, 0.9)),
      rgba(9, 18, 67, 0.92);
    color: #fff0a6;
  }

  .mobile-app-viewport {
    background:
      radial-gradient(circle at 24% 0%, rgba(245, 162, 54, 0.22), transparent 32%),
      linear-gradient(180deg, rgba(9, 26, 92, 0.72), rgba(4, 8, 38, 0.94));
  }

  .mobile-app-card,
  .mobile-radar-card,
  .mobile-news-card,
  .mobile-music-card,
  .mobile-link-card {
    border: 1px solid rgba(188, 231, 255, 0.44);
    background:
      linear-gradient(180deg, rgba(18, 45, 136, 0.76), rgba(7, 16, 67, 0.9)),
      rgba(7, 16, 67, 0.86);
    color: var(--ink);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.07),
      0 12px 26px rgba(0, 0, 0, 0.24);
  }

  .mobile-map-sheet {
    background:
      linear-gradient(180deg, rgba(18, 45, 136, 0.76), rgba(7, 16, 67, 0.9)),
      rgba(7, 16, 67, 0.86);
    color: var(--ink);
  }

  .mobile-now-copy strong,
  .mobile-now-copy p,
  .mobile-app-card p,
  .mobile-news-card p,
  .mobile-music-card p,
  .mobile-forecast-card p,
  .mobile-music-meta,
  .mobile-forecast-meta,
  .mobile-map-sheet dl {
    color: #f6f1ff;
  }

  .mobile-now-controls button,
  .mobile-news-row,
  .mobile-music-release-button,
  .mobile-radar-list button,
  .mobile-map-return,
  .mobile-music-now-panel {
    border: 1px solid rgba(135, 230, 255, 0.48);
    background:
      linear-gradient(180deg, rgba(35, 89, 201, 0.72), rgba(12, 31, 112, 0.84));
    color: #ffffff;
  }

  .mobile-map-return::before {
    color: #87e6ff;
  }

  .mobile-radar-map {
    background:
      radial-gradient(circle at 48% 42%, rgba(135, 230, 255, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(6, 30, 104, 0.78), rgba(4, 8, 38, 0.92));
  }

  .mobile-mini-player {
    background:
      linear-gradient(90deg, rgba(9, 18, 67, 0.94), rgba(54, 29, 108, 0.9)),
      rgba(6, 13, 57, 0.92);
  }
}

@media (max-width: 900px) {
  .mobile-alert-strip,
  .mobile-channel-tabs,
  .mobile-mini-player {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(5, 8, 34, 0.96), rgba(19, 19, 73, 0.94) 50%, rgba(5, 8, 34, 0.96)),
      #050711;
  }

  .mobile-alert-strip::before,
  .mobile-channel-tabs::before,
  .mobile-mini-player::before {
    content: "♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ☿ ♀ ⊕ ♂ ♃ ♄ ⚡ ◇ △ ▽";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: rgba(135, 230, 255, 0.22);
    font: 900 clamp(0.82rem, 4vw, 1.18rem) Georgia, serif;
    letter-spacing: 0.16em;
    white-space: nowrap;
    pointer-events: none;
    text-shadow:
      0 0 8px rgba(135, 230, 255, 0.26),
      0 0 18px rgba(239, 76, 201, 0.18);
  }

  .mobile-alert-strip::after,
  .mobile-channel-tabs::after,
  .mobile-mini-player::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px),
      linear-gradient(90deg, rgba(5, 8, 34, 0.78), transparent 28%, transparent 72%, rgba(5, 8, 34, 0.78));
    mix-blend-mode: screen;
    opacity: 0.72;
  }

  .mobile-alert-strip > *,
  .mobile-channel-tabs > *,
  .mobile-mini-player > * {
    position: relative;
    z-index: 2;
  }

  .mobile-alert-strip span {
    padding: 0 6px;
    background: rgba(5, 8, 34, 0.72);
    color: #fff0a6;
    text-shadow: 0 0 8px rgba(5, 8, 34, 0.96);
  }

  .mobile-alert-strip .mobile-alert-track {
    padding: 0;
    background: transparent;
  }

  .mobile-channel-tabs {
    border-top: 1px solid rgba(255, 240, 166, 0.22);
  }

  .mobile-channel-tabs button {
    background: rgba(5, 8, 34, 0.64);
    box-shadow: inset 0 0 0 1px rgba(135, 230, 255, 0.14);
  }

  .mobile-channel-tabs button.is-active {
    background:
      linear-gradient(180deg, rgba(245, 162, 54, 0.8), rgba(239, 76, 201, 0.58)),
      rgba(5, 8, 34, 0.8);
    color: #fff;
  }

  .mobile-desktop-conditions,
  .mobile-desktop-transmissions {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 0.48rem;
    padding: 12px;
    border: 1px solid rgba(188, 231, 255, 0.58);
    border-radius: 7px;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
      linear-gradient(180deg, rgba(53, 109, 205, 0.72), rgba(19, 47, 151, 0.88) 54%, rgba(49, 34, 105, 0.88)),
      rgba(7, 16, 67, 0.92);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 28px rgba(135, 230, 255, 0.1),
      0 10px 24px rgba(0, 0, 0, 0.22);
  }

  .mobile-desktop-conditions h2,
  .mobile-desktop-transmissions h2,
  .mobile-conditions-meta dt {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0.18em 1.35em 0.18em 0.42em;
    color: #fff0a6;
    font: 900 0.82rem/1.14 var(--font-display);
    text-transform: uppercase;
    text-shadow:
      0 1px 0 rgba(5, 8, 34, 1),
      2px 2px 0 rgba(4, 7, 34, 0.96),
      0 0 7px rgba(5, 8, 34, 0.88);
  }

  .mobile-desktop-conditions h2::before,
  .mobile-desktop-transmissions h2::before,
  .mobile-conditions-meta dt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(245, 162, 54, 0.82), rgba(239, 76, 201, 0.26) 68%, transparent),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 3px);
    clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%);
  }

  .mobile-conditions-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-desktop-conditions .mobile-now-controls {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin: 0;
  }

  .mobile-desktop-conditions .mobile-now-controls button {
    width: 43px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 1.2rem;
  }

  .mobile-desktop-conditions .mobile-now-hero {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 96px;
    align-items: center;
  }

  .mobile-desktop-conditions .mobile-now-icon {
    width: 94px;
    height: 76px;
    border: 0;
    background: transparent;
  }

  .mobile-desktop-conditions .mobile-now-icon img {
    filter:
      drop-shadow(0 2px 2px rgba(5, 8, 34, 0.92))
      drop-shadow(0 0 8px rgba(135, 230, 255, 0.22));
  }

  .mobile-desktop-conditions .mobile-now-copy strong {
    color: #ff7e8f;
    font: 900 clamp(2.75rem, 16vw, 4rem)/0.92 var(--font-display);
    text-shadow:
      0 1px 0 rgba(5, 8, 34, 0.98),
      0 0 12px rgba(255, 126, 143, 0.34);
  }

  .mobile-desktop-conditions .mobile-now-copy strong.is-cold {
    color: #87e6ff;
  }

  .mobile-desktop-conditions .mobile-now-copy strong.is-nice {
    color: #78ef9a;
  }

  .mobile-desktop-conditions > p {
    margin: 0;
    padding-bottom: 0.42rem;
    border-bottom: 1px solid rgba(135, 230, 255, 0.2);
    color: #f2efff;
    font: 800 clamp(0.78rem, 3.4vw, 0.96rem)/1.35 var(--font-mono);
    text-transform: uppercase;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .mobile-conditions-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.22rem;
    margin: 0;
  }

  .mobile-conditions-meta dd {
    margin: 0;
    color: #d9d0ff;
    font: 800 0.82rem var(--font-mono);
  }

  .mobile-conditions-meta .signal-bars {
    margin-top: 0.08rem;
  }

  .mobile-conditions-meta .signal-bars span,
  .mobile-conditions-meta .signal-bars i {
    width: 11px;
    height: 18px;
  }

  .mobile-desktop-transmissions {
    min-height: 360px;
    grid-template-rows: auto minmax(0, auto) auto;
  }

  .mobile-desktop-transmissions .mobile-now-transmission-list {
    gap: 0;
  }

  .mobile-desktop-transmissions .mobile-news-row {
    min-height: 58px;
    padding: 7px 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon time";
    gap: 0 10px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(135, 230, 255, 0.18);
    border-radius: 0;
    background: transparent;
    color: #f2efff;
    box-shadow: none;
  }

  .mobile-desktop-transmissions .transmission-weather-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
  }

  .mobile-desktop-transmissions .mobile-news-row strong {
    grid-area: title;
    white-space: normal;
    color: #f2efff;
    font: 800 clamp(0.78rem, 3.35vw, 0.93rem)/1.16 var(--font-mono);
  }

  .mobile-desktop-transmissions .mobile-news-row .mobile-muted {
    grid-area: time;
    color: #bdb4f3;
    font: 800 0.68rem var(--font-mono);
  }

  .mobile-transmission-sync {
    margin: 0.45rem 0 0;
    padding-top: 0.48rem;
    border-top: 1px solid rgba(135, 230, 255, 0.14);
    color: #d9d0ff;
    font: 800 0.78rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-now-traffic-panel,
  .mobile-now-sponsor-panel,
  .mobile-broadcast-card,
  .mobile-broadcast-directory {
    overflow: hidden;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
      linear-gradient(180deg, rgba(22, 75, 184, 0.76), rgba(20, 15, 82, 0.94));
  }

  .mobile-now-traffic-panel {
    position: relative;
    min-height: 245px;
    align-content: end;
  }

  .mobile-now-traffic-panel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.56;
    filter: saturate(1.16) contrast(1.08);
  }

  .mobile-now-traffic-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(5, 8, 34, 0.2), rgba(5, 8, 34, 0.88)),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
    pointer-events: none;
  }

  .mobile-now-traffic-panel > :not(video) {
    position: relative;
    z-index: 1;
  }

  .mobile-now-traffic-panel strong {
    color: #fff0a6;
    font: 900 0.9rem var(--font-mono);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(5, 8, 34, 0.95);
  }

  .mobile-now-sponsor-panel {
    gap: 8px;
  }

  .mobile-now-sponsor-panel a,
  .mobile-now-sponsor-panel img {
    display: block;
    width: 100%;
  }

  .mobile-now-sponsor-panel img {
    border: 1px solid rgba(255, 240, 166, 0.42);
    box-shadow: 0 0 18px rgba(239, 76, 201, 0.18);
  }

  .mobile-broadcast-screen {
    position: relative;
    overflow: hidden;
    min-height: 238px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(135, 230, 255, 0.36);
    background:
      radial-gradient(circle at 50% 42%, rgba(135, 230, 255, 0.14), transparent 38%),
      #050711;
  }

  .mobile-broadcast-screen .broadcast-transmission,
  .mobile-broadcast-screen .broadcast-transmission iframe,
  .mobile-broadcast-screen .broadcast-transmission video,
  .mobile-broadcast-screen .broadcast-ad-signal,
  .mobile-broadcast-screen .broadcast-ad-signal img,
  .mobile-broadcast-screen .broadcast-static-field,
  .mobile-broadcast-screen .broadcast-no-signal {
    width: 100%;
    height: 100%;
  }

  .mobile-broadcast-screen .broadcast-transmission {
    min-height: 238px;
  }

  .mobile-broadcast-screen .broadcast-transmission-caption {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    margin: 0;
    padding: 6px 8px;
    background: rgba(5, 8, 34, 0.78);
  }

  .mobile-broadcast-hud {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    color: #bff7ff;
    font: 900 0.66rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-broadcast-hud strong {
    overflow: hidden;
    color: #fff0a6;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-broadcast-media-controls {
    position: relative;
    inset: auto;
    margin-top: 8px;
  }

  .mobile-broadcast-channel-list {
    display: grid;
    gap: 8px;
  }

  .mobile-broadcast-channel-list button {
    appearance: none;
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(135, 230, 255, 0.42);
    background:
      linear-gradient(180deg, rgba(35, 89, 201, 0.72), rgba(12, 31, 112, 0.84));
    color: #fff;
    font: 900 0.7rem var(--font-mono);
    text-align: left;
    text-transform: uppercase;
  }

  .mobile-broadcast-channel-list button.is-active {
    border-color: rgba(255, 240, 166, 0.86);
    background:
      linear-gradient(90deg, rgba(245, 162, 54, 0.88), rgba(239, 76, 201, 0.62)),
      rgba(9, 18, 67, 0.92);
  }

  .mobile-broadcast-channel-list button strong,
  .mobile-broadcast-channel-list button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-channel-feed-panel {
    min-height: 360px;
  }

  .mobile-channel-feed-cue {
    margin: 0;
    color: #bff7ff;
    font: 800 0.66rem var(--font-mono);
    text-transform: uppercase;
  }

  .mobile-channel-feed {
    overflow-y: auto;
    max-height: min(72svh, 430px);
    min-height: 270px;
    display: grid;
    grid-auto-rows: minmax(270px, min(72svh, 430px));
    gap: 10px;
    padding-right: 2px;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
  }

  .mobile-channel-feed-slide {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    border: 1px solid rgba(135, 230, 255, 0.32);
    background:
      radial-gradient(circle at 50% 42%, rgba(135, 230, 255, 0.14), transparent 38%),
      #050711;
  }

  .mobile-channel-feed-slide .broadcast-transmission,
  .mobile-channel-feed-slide .broadcast-transmission iframe,
  .mobile-channel-feed-slide .broadcast-transmission video {
    width: 100%;
    height: 100%;
    min-height: 270px;
  }

  .mobile-channel-feed-slide .broadcast-transmission-caption {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
    transform: none;
  }

  .mobile-channel-feed-empty {
    gap: 4px;
    color: #fff0a6;
    font: 900 0.78rem var(--font-mono);
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-channel-feed-empty span {
    color: #bff7ff;
    font-size: 0.66rem;
  }
}

.zodiac-mask-rails {
  display: none;
}

.mobile-alert-strip::before,
.mobile-channel-tabs::before,
.mobile-mini-player::before {
  content: "\2648\FE0E\0020\2649\FE0E\0020\264A\FE0E\0020\264B\FE0E\0020\264C\FE0E\0020\264D\FE0E\0020\264E\FE0E\0020\264F\FE0E\0020\2650\FE0E\0020\2651\FE0E\0020\2652\FE0E\0020\2653\FE0E\0020\263F\FE0E\0020\2640\FE0E\0020\2295\FE0E\0020\2642\FE0E\0020\2643\FE0E\0020\2644\FE0E\0020\26A1\FE0E\0020\25C7\0020\25B3\0020\25BD";
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", serif;
}

.zodiac-mask-rail .symbol-ticker span {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", serif;
}

@keyframes zodiacTickerVertical {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -50%, 0);
  }
}

@media (min-width: 901px) {
  .world-brand h1 {
    font-size: clamp(1.3rem, 2.15vw, 2.45rem);
  }

  .world-grid {
    grid-template-rows: minmax(0, 1fr) clamp(132px, 18vh, 172px);
  }

  .left-rail {
    grid-row: 1 / 3;
  }

  .bottom-deck {
    display: grid;
  }

  .world-shell.is-news-section .world-grid,
  .world-shell.is-music-section .world-grid,
  .world-shell.is-forecast-section .world-grid,
  .world-shell.is-socials-section .world-grid,
  .world-shell.is-shop-section .world-grid {
    grid-template-rows: minmax(0, 1fr);
  }

  .world-shell.is-news-section .bottom-deck,
  .world-shell.is-music-section .bottom-deck,
  .world-shell.is-forecast-section .bottom-deck,
  .world-shell.is-socials-section .bottom-deck,
  .world-shell.is-shop-section .bottom-deck {
    display: none;
  }

  .world-shell.is-news-section .left-rail,
  .world-shell.is-music-section .left-rail,
  .world-shell.is-forecast-section .left-rail,
  .world-shell.is-socials-section .left-rail,
  .world-shell.is-shop-section .left-rail {
    grid-row: 1;
  }
}

.world-map-svg img {
  opacity: 0.94;
  filter:
    drop-shadow(0 0 2px rgba(245, 162, 54, 0.95))
    drop-shadow(0 0 7px rgba(239, 76, 201, 0.68));
}

.world-region-layer {
  filter:
    drop-shadow(0 0 2px rgba(255, 240, 166, 0.76))
    drop-shadow(0 0 8px rgba(239, 76, 201, 0.52));
}

.world-region-outline {
  fill: rgba(24, 9, 58, 0.3) !important;
  stroke: #f5a236 !important;
  stroke-width: 1.65 !important;
  opacity: 0.94;
}

.world-region-gradient-mask {
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 5px rgba(239, 76, 201, 0.76));
}

.world-region-noise-mask {
  opacity: 0.64;
}

.bottom-deck .world-panel > * {
  position: relative;
  z-index: 3;
}

.bottom-deck .homepage-player-panel,
.bottom-deck .traffic-panel,
.bottom-deck .sponsor-panel {
  display: grid;
  align-content: start;
  gap: 0.28rem;
  min-width: 0;
}

.bottom-deck .traffic-panel {
  --panel-panorama-x: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  align-content: stretch;
  background: #050711;
}

.traffic-panel-video {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.18) contrast(1.08) brightness(0.78);
}

.bottom-deck .traffic-panel::after {
  content: "WLY ROAD DESK\A TRAFFIC REPORT\A REALITY LANES REMAIN UNPREDICTABLE.";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  max-width: 72%;
  padding: 10px 12px;
  color: #fff6cb;
  font: 900 clamp(0.64rem, 0.78vw, 0.86rem)/1.35 var(--font-mono);
  white-space: pre-line;
  text-transform: uppercase;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.96),
    0 0 14px rgba(5, 8, 34, 0.88);
  background:
    linear-gradient(90deg, rgba(5, 8, 34, 0.9), rgba(5, 8, 34, 0.58) 52%, rgba(5, 8, 34, 0.86)),
    linear-gradient(180deg, rgba(5, 8, 34, 0.66), rgba(5, 8, 34, 0.24) 48%, rgba(5, 8, 34, 0.82)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px);
}

.traffic-panel-copy {
  position: relative;
  z-index: 3 !important;
  min-height: 100%;
  max-width: 68%;
  display: grid;
  align-content: start;
  gap: 0.18rem;
  padding: clamp(0.62rem, 0.9vw, 0.82rem);
  background:
    linear-gradient(90deg, rgba(5, 8, 34, 0.96), rgba(5, 8, 34, 0.82) 72%, rgba(5, 8, 34, 0)),
    radial-gradient(circle at 0 50%, rgba(5, 8, 34, 0.92), transparent 74%);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.92),
    0 0 14px rgba(5, 8, 34, 0.78);
}

.bottom-deck .traffic-panel .traffic-panel-copy h2 {
  margin: 0;
  color: #fff6cb;
  font-size: clamp(0.86rem, 1vw, 1.08rem);
  line-height: 1;
}

.bottom-deck .traffic-panel .traffic-panel-copy strong {
  white-space: normal;
}

.desktop-dashboard-stage .traffic-panel .traffic-panel-copy {
  padding: 10px 12px;
}

.desktop-dashboard-stage .traffic-panel .traffic-panel-copy p:not(.deck-kicker) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bottom-deck .sponsor-panel {
  --panel-panorama-x: right;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-content: stretch;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(79, 18, 112, 0.72), rgba(13, 32, 116, 0.7)),
    rgba(8, 14, 52, 0.58);
}

.sponsor-image-link {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #391074;
}

.sponsor-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform-origin: 52% 48%;
  animation: sponsorAdDrift 18s ease-in-out infinite alternate;
  transition: filter 220ms ease;
}

.sponsor-image-link:hover img,
.sponsor-image-link:focus-visible img {
  filter: brightness(1.08) saturate(1.08);
}

.sponsor-image-link:focus-visible {
  outline: 2px solid #fff0a6;
  outline-offset: -3px;
}

.bottom-deck .sponsor-panel .sponsor-image-link {
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
}

.deck-kicker {
  color: #87e6ff !important;
  font-size: 0.58rem !important;
}

.bottom-deck .traffic-panel strong,
.bottom-deck .sponsor-panel strong,
.homepage-player-panel > strong {
  overflow: hidden;
  color: #fff0a6;
  font: 900 clamp(0.74rem, 0.9vw, 0.96rem)/1.12 var(--font-display);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bottom-deck .traffic-panel p,
.bottom-deck .sponsor-panel p {
  margin: 0;
  color: #f2efff;
  font: 800 clamp(0.58rem, 0.68vw, 0.72rem)/1.28 var(--font-mono);
  text-transform: uppercase;
}

.bottom-deck .traffic-panel a,
.bottom-deck .sponsor-panel a {
  align-self: end;
  width: max-content;
  max-width: 100%;
  margin-top: auto;
  padding: 0.4rem 0.52rem;
  border: 1px solid rgba(255, 240, 166, 0.5);
  border-radius: 4px;
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.52);
  font: 900 0.6rem/1 var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
}

.bottom-deck .traffic-panel a:hover,
.bottom-deck .traffic-panel a:focus-visible,
.bottom-deck .sponsor-panel a:hover,
.bottom-deck .sponsor-panel a:focus-visible {
  border-color: #87e6ff;
  color: #fff;
  outline: none;
}

.homepage-audio-controls {
  display: grid;
  grid-template-columns: 34px minmax(52px, 0.55fr) minmax(92px, 1fr);
  gap: 0.48rem;
  align-items: center;
  margin-top: auto;
}

.homepage-audio-controls button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(135, 230, 255, 0.48);
  border-radius: 50%;
  color: #fff0a6;
  background: rgba(31, 72, 216, 0.52);
}

.homepage-audio-controls button:hover,
.homepage-audio-controls button:focus-visible {
  border-color: #fff0a6;
  outline: none;
  box-shadow: 0 0 12px rgba(245, 162, 54, 0.24);
}

.homepage-audio-meter {
  height: 26px;
  display: flex;
  align-items: end;
  gap: 3px;
}

.homepage-audio-meter i {
  width: 4px;
  height: 26%;
  border-radius: 2px 2px 0 0;
  background: #87e6ff;
  opacity: 0.42;
  transform-origin: bottom;
}

.homepage-audio-meter i:nth-child(2),
.homepage-audio-meter i:nth-child(5) {
  height: 58%;
}

.homepage-audio-meter i:nth-child(3) {
  height: 92%;
}

.homepage-audio-meter i:nth-child(4) {
  height: 72%;
}

.homepage-player-panel.is-playing .homepage-audio-meter i {
  opacity: 1;
  animation: homepageMeter 720ms ease-in-out infinite alternate;
}

.homepage-player-panel.is-playing .homepage-audio-meter i:nth-child(2),
.homepage-player-panel.is-playing .homepage-audio-meter i:nth-child(5) {
  animation-delay: -360ms;
}

.homepage-audio-controls label {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: #bdb4f3;
  font: 900 0.52rem var(--font-mono);
  text-transform: uppercase;
}

.homepage-audio-controls input {
  width: 100%;
  accent-color: #f5a236;
}

@keyframes homepageMeter {
  from { transform: scaleY(0.42); }
  to { transform: scaleY(1); }
}

.music-video-feature,
.music-photo-feature {
  display: grid;
  gap: 0.48rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(135, 230, 255, 0.18);
}

.music-video-feature h4,
.music-photo-feature h4 {
  margin: 0;
  color: #fff0a6;
  font: 900 0.68rem/1.2 var(--font-mono);
  text-transform: uppercase;
}

.music-video-feature .media-lazy-shell {
  border: 0;
  min-height: 140px;
}

.music-video-feature iframe,
.music-video-feature .media-lazy-shell > iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(239, 76, 201, 0.38);
  border-radius: 5px;
  background: #02030d;
}

.music-video-feature a {
  width: max-content;
  max-width: 100%;
  color: #fff0a6;
  font: 900 0.64rem var(--font-mono);
  text-transform: uppercase;
}

.music-photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.music-photo-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(135, 230, 255, 0.28);
  border-radius: 4px;
  background: rgba(5, 8, 34, 0.62);
}

.broadcast-board {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(6px, 0.7vw, 10px);
  border: 1px solid rgba(135, 230, 255, 0.2);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 10%, rgba(239, 76, 201, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(36, 58, 179, 0.56), rgba(6, 11, 54, 0.92));
}

.broadcast-monitor-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.broadcast-monitor-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.broadcast-screen {
  position: absolute;
  left: 7.72%;
  top: 10.86%;
  z-index: 2;
  width: 65.25%;
  height: 78.28%;
  overflow: hidden;
  border-radius: 10% / 8%;
  background: #02030d;
  color: #fff;
}

.broadcast-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(0, 0, 0, 0.07) 1px 3px, transparent 3px 5px),
    radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, 0.38) 100%);
  mix-blend-mode: screen;
  opacity: 0.64;
}

.broadcast-screen-content,
.broadcast-transmission,
.broadcast-transmission .media-lazy-shell,
.broadcast-transmission .media-lazy-shell > iframe,
.broadcast-transmission .media-lazy-shell > video,
.broadcast-transmission iframe,
.broadcast-transmission video,
.broadcast-ad-signal,
.broadcast-ad-signal img,
.broadcast-static-field {
  width: 100%;
  height: 100%;
}

.broadcast-screen-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #02030d;
}

.broadcast-transmission {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(31, 72, 216, 0.22), transparent 58%),
    #02030d;
}

.broadcast-transmission iframe,
.broadcast-transmission video,
.broadcast-transmission .media-lazy-shell > iframe,
.broadcast-transmission .media-lazy-shell > video {
  display: block;
  border: 0;
  object-fit: contain;
  background: #02030d;
}

.broadcast-transmission .media-lazy-shell {
  min-height: 100%;
  border: 0;
  background: transparent;
}

.broadcast-transmission.is-vertical iframe,
.broadcast-transmission.is-vertical video,
.broadcast-transmission.is-vertical .media-lazy-shell > iframe,
.broadcast-transmission.is-vertical .media-lazy-shell > video {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.broadcast-transmission-caption {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 4;
  max-width: 78%;
  margin: 0;
  padding: 0.34rem 0.52rem;
  transform: translateX(-50%);
  color: #fff0a6;
  background: rgba(5, 8, 34, 0.82);
  font: 900 clamp(0.48rem, 0.62vw, 0.68rem)/1.25 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

.broadcast-screen-hud {
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 9;
  display: grid;
  gap: 2px;
  max-width: 72%;
  padding: 0.38rem 0.52rem;
  color: #fff;
  background: rgba(5, 8, 34, 0.72);
  font-family: var(--font-mono);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(135, 230, 255, 0.42);
}

.broadcast-screen-hud span {
  color: #87e6ff;
  font-size: clamp(0.5rem, 0.58vw, 0.66rem);
}

.broadcast-screen-hud strong {
  overflow: hidden;
  font-size: clamp(0.58rem, 0.72vw, 0.78rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-media-controls {
  position: absolute;
  right: 5%;
  bottom: 5%;
  z-index: 10;
  display: grid;
  grid-template-columns: 30px auto 30px;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(135, 230, 255, 0.42);
  border-radius: 4px;
  background: rgba(5, 8, 34, 0.84);
  color: #fff0a6;
  font: 900 0.58rem var(--font-mono);
}

.broadcast-media-controls[hidden] {
  display: none;
}

.broadcast-media-controls button {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 240, 166, 0.42);
  border-radius: 3px;
  color: #fff;
  background: rgba(31, 72, 216, 0.54);
}

.broadcast-ad-signal {
  overflow: hidden;
  display: block;
  background: #401177;
}

.broadcast-ad-signal img {
  display: block;
  object-fit: cover;
  object-position: center;
  transform-origin: 52% 48%;
  animation: sponsorAdDrift 18s ease-in-out infinite alternate;
}

@keyframes sponsorAdDrift {
  0% {
    transform: scale(1.025) translate3d(-1.2%, -0.8%, 0);
  }
  34% {
    transform: scale(1.055) translate3d(1.1%, -1.5%, 0);
  }
  68% {
    transform: scale(1.04) translate3d(1.6%, 1.1%, 0);
  }
  100% {
    transform: scale(1.065) translate3d(-0.8%, 1.5%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-image-link img,
  .broadcast-ad-signal img {
    animation: none;
    transform: none;
  }
}

.broadcast-no-signal {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: #fff0a6;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle, rgba(31, 72, 216, 0.34), transparent 65%),
    #050822;
  font: 900 clamp(0.68rem, 1.1vw, 1.1rem) var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

.broadcast-no-signal strong,
.broadcast-no-signal span {
  display: block;
}

.broadcast-static-field {
  background:
    repeating-radial-gradient(circle at 23% 37%, rgba(255,255,255,0.92) 0 1px, rgba(0,0,0,0.94) 1px 3px, transparent 3px 5px),
    repeating-linear-gradient(73deg, #fff 0 1px, #111 1px 3px, #777 3px 4px);
  background-size: 7px 9px, 11px 13px;
  filter: contrast(1.8);
  animation: broadcastStatic 140ms steps(2, end) infinite;
}

@keyframes broadcastStatic {
  0% { background-position: 0 0, 0 0; }
  33% { background-position: 9px -4px, -7px 3px; }
  66% { background-position: -5px 8px, 4px -9px; }
  100% { background-position: 3px -7px, 8px 5px; }
}

.broadcast-monitor-chassis {
  z-index: 1;
  mix-blend-mode: normal;
}

.broadcast-monitor-gradient {
  z-index: 4;
  opacity: 0.42;
  mix-blend-mode: color;
  animation: broadcastHueCycle 22s linear infinite;
}

@keyframes broadcastHueCycle {
  to { filter: hue-rotate(360deg); }
}

.broadcast-channel-controls {
  position: absolute;
  left: 82.15%;
  top: 1.18%;
  z-index: 12;
  width: 16.95%;
  height: 98.52%;
  display: grid;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: clamp(5px, 1.15%, 11px);
  padding: clamp(3px, 0.45vw, 7px) clamp(5px, 0.55vw, 9px);
}

.broadcast-channel-controls button {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  align-items: center;
  padding: 0.26rem 0.42rem;
  border: 1px solid rgba(241, 252, 255, 0.7);
  border-radius: 18px;
  color: #05144f;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(43, 255, 255, 0.96), rgba(10, 219, 224, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(17, 98, 158, 0.26),
    inset 0 -12px 18px rgba(31, 72, 216, 0.12),
    0 5px 0 rgba(3, 9, 38, 0.74);
  font: 900 clamp(0.44rem, 0.64vw, 0.82rem)/1.08 var(--font-mono);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(241, 252, 255, 0.5);
  cursor: var(--cursor-pointer);
}

.broadcast-channel-controls button span {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.broadcast-channel-controls button:hover,
.broadcast-channel-controls button:focus-visible,
.broadcast-channel-controls button.is-active {
  color: #fff0a6;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(59, 81, 231, 0.96), rgba(18, 36, 144, 0.96));
  outline: none;
  border-color: rgba(255, 240, 166, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 166, 0.34),
    inset 0 0 22px rgba(239, 76, 201, 0.22),
    0 0 0 2px rgba(239, 76, 201, 0.22),
    0 5px 0 rgba(3, 9, 38, 0.74);
  text-shadow: 0 1px 2px rgba(5, 8, 34, 0.95);
}

.broadcast-channel-controls button.is-warning {
  color: #74184e;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(43, 255, 255, 0.96), rgba(10, 219, 224, 0.94));
}

@media (min-width: 901px) {
  .dreamworld-page {
    padding: 0;
  }

  .desktop-dashboard-stage {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(100vw, 177.777778vh);
    height: min(100vh, 56.25vw);
    transform: translate(-50%, -50%);
  }

  .desktop-dashboard-stage .world-shell {
    position: absolute;
    left: var(--desktop-dashboard-shell-left, 0px);
    top: var(--desktop-dashboard-shell-top, 0px);
    width: var(--desktop-dashboard-design-width, 1920px);
    height: var(--desktop-dashboard-design-height, 1080px);
    max-width: none;
    margin: 0;
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: scale(var(--desktop-dashboard-shell-scale, 1));
    transform-origin: 0 0;
  }

  .desktop-dashboard-stage .world-shell::before {
    display: none;
  }

  .desktop-dashboard-stage .world-shell::after {
    inset: auto;
    left: var(--desktop-zone-dashboard-left, 200px);
    top: var(--desktop-zone-dashboard-top, 29px);
    z-index: 0;
    display: block;
    width: var(--desktop-zone-dashboard-width, 1514px);
    height: var(--desktop-zone-dashboard-height, 1022px);
    border: 1px solid rgba(135, 230, 255, 0.32);
    border-radius: 22px;
    background:
      linear-gradient(rgba(6, 9, 26, 0.08), rgba(6, 9, 26, 0.32)),
      radial-gradient(circle at 58% 12%, rgba(245, 162, 54, 0.12), transparent 28%),
      radial-gradient(circle at 62% 88%, rgba(239, 76, 201, 0.18), transparent 36%),
      linear-gradient(135deg, rgba(14, 28, 85, 0.68), rgba(31, 26, 92, 0.72));
    box-shadow:
      inset 0 0 34px rgba(246, 241, 255, 0.08),
      inset 0 0 120px rgba(0, 0, 0, 0.18),
      0 26px 70px rgba(0, 0, 0, 0.42);
    opacity: 1;
  }

  body.is-world-open .desktop-dashboard-stage .world-shell {
    animation-name: dashboardShellMaskFade;
  }

  .desktop-dashboard-stage .world-header,
  .desktop-dashboard-stage .world-nav,
  .desktop-dashboard-stage .world-grid,
  .desktop-dashboard-stage .world-ticker {
    position: absolute;
  }

  .desktop-dashboard-stage .world-header {
    inset: 0;
    z-index: 25;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .desktop-dashboard-stage .world-brand {
    display: block;
  }

  .desktop-dashboard-stage .world-brand > .world-brand-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
  }

  .desktop-dashboard-stage .world-logo,
  .desktop-dashboard-stage .world-brand-copy,
  .desktop-dashboard-stage .persistent-social-links,
  .desktop-dashboard-stage .signal-origin {
    position: absolute;
    pointer-events: auto;
    z-index: 30;
  }

  .desktop-dashboard-stage .world-logo {
    left: var(--desktop-zone-logo-left, 219px);
    top: var(--desktop-zone-logo-top, 38px);
    width: var(--desktop-zone-logo-width, 107px);
    height: var(--desktop-zone-logo-height, 88px);
  }

  .desktop-dashboard-stage .world-brand-copy {
    left: var(--desktop-zone-hero-left, 346px);
    top: var(--desktop-zone-hero-top, 44px);
    width: var(--desktop-zone-hero-width, 759px);
    height: var(--desktop-zone-hero-height, 76px);
    margin: 0;
    padding: 0;
    align-content: center;
  }

  .desktop-dashboard-stage .world-brand-copy h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: 100%;
    overflow: hidden;
    font-size: 2.35rem;
    line-height: 0.92;
    white-space: nowrap;
  }

  .desktop-dashboard-stage .world-brand-copy > strong {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0.18rem;
    font-size: 0.88rem;
  }

  .desktop-dashboard-stage .persistent-social-links {
    left: var(--desktop-zone-socials-left, 1128px);
    top: var(--desktop-zone-socials-top, 50px);
    width: var(--desktop-zone-socials-width, 279px);
    height: var(--desktop-zone-socials-height, 59px);
    max-width: none;
    margin: 0;
    padding: 0.32rem 0.58rem;
    justify-content: center;
    align-items: center;
  }

  .desktop-dashboard-stage .persistent-social-links a,
  .desktop-dashboard-stage .signal-origin a,
  .desktop-dashboard-stage .signal-origin button {
    position: relative;
    pointer-events: auto;
    z-index: 31;
  }

  .desktop-dashboard-stage .signal-origin {
    left: var(--desktop-zone-signal-left, 1420px);
    top: var(--desktop-zone-signal-top, 44px);
    width: var(--desktop-zone-signal-width, 206px);
    height: var(--desktop-zone-signal-height, 76px);
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "label orb"
      "title orb"
      "coords orb"
      "credit orb";
    justify-items: start;
    align-content: start;
    gap: 2px;
    padding: 0.34rem 0.28rem 0.32rem 0.48rem;
    overflow: hidden;
    line-height: 1.05;
  }

  .desktop-dashboard-stage .signal-origin span {
    grid-area: label;
    font-size: 0.78rem;
    line-height: 1.05;
  }

  .desktop-dashboard-stage .signal-origin strong {
    grid-area: title;
    font-size: 0.66rem;
    line-height: 1;
  }

  .desktop-dashboard-stage .signal-origin small {
    grid-area: coords;
    display: block;
    font-size: 0.62rem;
    line-height: 1.05;
  }

  .desktop-dashboard-stage .orbit-bug {
    position: static;
    grid-area: orb;
    align-self: start;
    justify-self: end;
    width: min(52px, calc(var(--desktop-zone-signal-height, 80px) - 24px));
  }

  .desktop-dashboard-stage .world-nav {
    inset: 0;
    z-index: 20;
    display: block;
    margin: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .desktop-dashboard-stage .nav-column-fill,
  .desktop-dashboard-stage .nav-links {
    position: absolute;
    pointer-events: auto;
  }

  .desktop-dashboard-stage .nav-column-fill {
    left: calc(var(--desktop-zone-currentWeather-left, 218px) - 10px);
    top: var(--desktop-zone-zodiac-top, 135px);
    width: calc(var(--desktop-zone-currentWeather-width, 340px) + 10px);
    height: var(--desktop-zone-zodiac-height, 46px);
    overflow: hidden;
  }

  .desktop-dashboard-stage .nav-column-fill .symbol-ticker {
    grid-auto-columns: calc((var(--desktop-zone-currentWeather-width, 340px) + 10px) / 12);
    min-height: 100%;
    font-size: 26px;
  }

  .desktop-dashboard-stage .nav-links {
    left: var(--desktop-zone-nav-left, 564px);
    top: var(--desktop-zone-nav-top, 135px);
    width: var(--desktop-zone-nav-width, 1070px);
    height: var(--desktop-zone-nav-height, 46px);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .desktop-dashboard-stage .nav-links a,
  .desktop-dashboard-stage .nav-item > button {
    min-height: 100%;
    padding: 0.22rem 0.34rem;
    font-size: 0.62rem;
  }

  .desktop-dashboard-stage .zodiac-mask-rails {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
  }

  .desktop-dashboard-stage .zodiac-mask-rail {
    position: absolute;
    overflow: hidden;
    border-inline: 1px solid rgba(135, 230, 255, 0.2);
    background:
      linear-gradient(90deg, rgba(239, 76, 201, 0.24), rgba(245, 162, 54, 0.2), rgba(30, 36, 114, 0.24)),
      rgba(30, 36, 114, 0.2);
    box-shadow: inset 0 0 22px rgba(245, 162, 54, 0.08);
  }

  .desktop-dashboard-stage .zodiac-mask-rail-right {
    --zodiac-right-rail-width: 58px;
    left: calc(
      var(--desktop-zone-dashboard-left, 200px) +
      var(--desktop-zone-dashboard-width, 1514px) -
      11px -
      var(--zodiac-right-rail-width)
    );
    top: var(--desktop-zone-signal-top, 44px);
    width: var(--zodiac-right-rail-width);
    height: calc(
      var(--desktop-zone-ticker-top, 1024px) -
      var(--desktop-zone-signal-top, 44px) -
      6px
    );
    background:
      linear-gradient(90deg, rgba(239, 76, 201, 0.38), rgba(245, 162, 54, 0.32), rgba(30, 36, 114, 0.36)),
      rgba(30, 36, 114, 0.26);
    box-shadow:
      inset 0 0 22px rgba(245, 162, 54, 0.14),
      inset 0 0 0 1px rgba(255, 240, 166, 0.08);
  }

  .desktop-dashboard-stage .zodiac-mask-rail .symbol-ticker {
    height: 100%;
  }

  .desktop-dashboard-stage .zodiac-mask-rail-right .symbol-ticker {
    width: 100%;
    height: max-content;
    min-height: 0;
    flex-direction: column;
    animation:
      zodiacTickerVertical 38s linear infinite,
      zodiacHueCycle 20s linear infinite;
  }

  .desktop-dashboard-stage .zodiac-mask-rail-right .symbol-ticker span {
    padding: 0.75rem 0;
    writing-mode: vertical-rl;
  }

  .desktop-dashboard-stage .world-shell.is-socials-section .zodiac-mask-rails {
    z-index: 5;
  }

  .desktop-dashboard-stage .world-grid {
    inset: 0;
    z-index: 10;
    display: block;
    min-height: 0;
    padding: 0;
    pointer-events: none;
  }

  .desktop-dashboard-stage .left-rail {
    display: contents;
  }

  .desktop-dashboard-stage .conditions-panel,
  .desktop-dashboard-stage .transmissions-panel,
  .desktop-dashboard-stage .map-panel,
  .desktop-dashboard-stage .homepage-player-panel,
  .desktop-dashboard-stage .traffic-panel,
  .desktop-dashboard-stage .sponsor-panel,
  .desktop-dashboard-stage .world-ticker {
    position: absolute;
    min-height: 0;
    pointer-events: auto;
  }

  .desktop-dashboard-stage .signal-origin-credit {
    grid-area: credit;
    margin-top: 0.08rem;
    font-size: 0.42rem;
    line-height: 1.05;
    letter-spacing: 0;
    max-width: 100%;
  }

  .desktop-dashboard-stage .conditions-panel {
    left: var(--desktop-zone-currentWeather-left, 218px);
    top: calc(var(--desktop-zone-currentWeather-top, 185px) + 8px);
    width: var(--desktop-zone-currentWeather-width, 340px);
    height: calc(var(--desktop-zone-currentWeather-height, 347px) - 8px);
  }

  .desktop-dashboard-stage .transmissions-panel {
    left: var(--desktop-zone-recent-left, 219px);
    top: var(--desktop-zone-recent-top, 540px);
    width: var(--desktop-zone-recent-width, 340px);
    height: var(--desktop-zone-recent-height, 481px);
  }

  .desktop-dashboard-stage .map-panel {
    left: var(--desktop-zone-content-left, 565px);
    top: calc(var(--desktop-zone-content-top, 185px) + 8px);
    width: var(--desktop-zone-content-width, 1069px);
    height: calc(var(--desktop-zone-content-height, 677px) - 8px);
  }

  .desktop-dashboard-stage .bottom-deck {
    position: static;
    overflow: visible;
  }

  .desktop-dashboard-stage .world-shell.is-map-section .bottom-deck {
    display: contents;
  }

  .desktop-dashboard-stage .world-shell:not(.is-map-section) .bottom-deck {
    display: none;
  }

  .desktop-dashboard-stage .homepage-player-panel {
    left: var(--desktop-zone-music-left, 565px);
    top: var(--desktop-zone-music-top, 871px);
    width: var(--desktop-zone-music-width, 395px);
    height: var(--desktop-zone-music-height, 147px);
  }

  .desktop-dashboard-stage .traffic-panel {
    left: var(--desktop-zone-traffic-left, 960px);
    top: var(--desktop-zone-traffic-top, 871px);
    width: var(--desktop-zone-traffic-width, 308px);
    height: var(--desktop-zone-traffic-height, 147px);
  }

  .desktop-dashboard-stage .sponsor-panel {
    left: var(--desktop-zone-ad-left, 1268px);
    top: var(--desktop-zone-ad-top, 871px);
    width: var(--desktop-zone-ad-width, 367px);
    height: var(--desktop-zone-ad-height, 147px);
  }

  .desktop-dashboard-stage .world-ticker {
    left: var(--desktop-zone-ticker-left, 218px);
    top: var(--desktop-zone-ticker-top, 1024px);
    width: var(--desktop-zone-ticker-width, 1407px);
    height: var(--desktop-zone-ticker-height, 21px);
    padding-block: 0;
    display: flex;
    align-items: center;
  }

  .world-shell.is-broadcast-section .world-grid {
    grid-template-rows: minmax(0, 1fr);
  }

  .world-shell.is-broadcast-section .bottom-deck {
    display: none;
  }

  .world-shell.is-broadcast-section .left-rail {
    grid-row: 1;
  }
}