:root {
  color-scheme: dark;
  font-family: "Trebuchet MS",
    "Segoe UI",
    sans-serif;
  background: #03020f;
  color: #e9fbff
}

* {
  box-sizing: border-box
}

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

body {
  overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 82%,
      rgba(170,
        0,
        255,
        0.17),
      transparent 42%),
    #03020f
}

.page-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none
}

button {
  font: inherit
}

.main-header {
  min-height: 68px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px,
      2.5vw,
      34px);
  padding: 10px clamp(14px,
      3.4vw,
      48px);
  border-bottom: 1px solid rgba(0,
      237,
      255,
      0.28);
  background: linear-gradient(180deg,
      rgba(12,
        8,
        42,
        0.98) 0%,
      rgba(4,
        3,
        19,
        0.94) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255,
      66,
      223,
      0.18),
    0 12px 24px rgba(0,
      0,
      0,
      0.46),
    0 0 24px rgba(0,
      237,
      255,
      0.12);
  position: sticky;
  top: 0;
  z-index: 20
}

.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255,
        255,
        255,
        0.02) 1px,
      transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.main-header-brand,
.header-ad-placeholder,
.main-menu {
  position: relative;
  z-index: 1
}

.main-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #00f7f3;
  font-family: "Courier New",
    monospace;
  font-size: clamp(18px,
      2.4vw,
      30px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase
}

.main-header-brand img {
  width: clamp(220px,
      4vw,
      46px);
  /* aspect-ratio: 1; */
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,
        66,
        223,
        0.55))
}

.header-ad-placeholder {
  flex: 1 1 468px;
  max-width: 468px;
  min-width: 180px;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 14px;
  border: 1px dashed rgba(0,
      237,
      255,
      0.42);
  border-radius: 4px;
  background:
    linear-gradient(90deg,
      rgba(255,
        66,
        223,
        0.1),
      rgba(0,
        237,
        255,
        0.08)),
    rgba(9,
      5,
      32,
      0.54);
  color: rgba(223,
      252,
      255,
      0.72);
  font-size: clamp(8px,
      0.86vw,
      11px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,
      255,
      255,
      0.42);
  box-shadow: inset 0 0 14px rgba(82,
      0,
      170,
      0.28)
}

.header-ad-placeholder span {
  color: rgba(214,
      135,
      239,
      0.82)
}

.header-ad-placeholder strong {
  color: #00f7f3;
  font-size: clamp(10px,
      1vw,
      14px);
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72)
}

.header-media-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  padding: 5px 6px;
  border: 1px solid rgba(0,
      237,
      255,
      0.58);
  border-radius: 5px;
  background:
    linear-gradient(90deg,
      rgba(0,
        237,
        255,
        0.12),
      rgba(255,
        66,
        223,
        0.1)),
    rgba(5,
      3,
      24,
      0.78);
  box-shadow:
    0 0 9px rgba(0,
      237,
      255,
      0.38),
    inset 0 0 12px rgba(255,
      66,
      223,
      0.16)
}

.header-now-playing-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  color: #ffb7f0;
  font-family: "Courier New",
    monospace;
  font-size: clamp(8.5px,
      0.82vw,
      11px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 6px rgba(255,
      66,
      223,
      0.72);
  text-transform: uppercase;
  white-space: nowrap
}

.header-station-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(0,
      237,
      255,
      0.58);
  border-radius: 4px;
  background-color: rgba(3,
      2,
      18,
      0.84);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    0 0 7px rgba(0,
      237,
      255,
      0.3),
    inset 0 0 7px rgba(255,
      66,
      223,
      0.14)
}

.header-station-icon.is-placeholder,
.display-station-icon.is-placeholder {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,
        251,
        255,
        0.42) 0 20%,
      transparent 22%),
    linear-gradient(135deg,
      rgba(255,
        66,
        223,
        0.2),
      rgba(0,
        237,
        255,
        0.16)),
    rgba(3,
      2,
      18,
      0.84)
}

.display-station-icon {
  justify-self: start;
  width: 1.35em;
  height: 1.35em;
  border: 1px solid currentColor;
  border-radius: 3px;
  background-color: rgba(3,
      2,
      18,
      0.64);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    0 0 6px rgba(0,
      255,
      255,
      0.45),
    inset 0 0 6px rgba(255,
      66,
      223,
      0.16)
}

.header-track-stack {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.12em
}

.header-station-name {
  min-width: 0;
  overflow: hidden;
  color: #00fbff;
  font-family: "Courier New",
    monospace;
  font-size: clamp(13px,
      1.24vw,
      18px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 0 7px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase;
  white-space: nowrap
}

.header-current-track {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,
      183,
      240,
      0.82);
  font-family: "Courier New",
    monospace;
  font-size: clamp(8px,
      0.78vw,
      11px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(255,
      66,
      223,
      0.58);
  text-transform: uppercase;
  white-space: nowrap
}

.header-playback-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto
}

.header-media-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244,
      76,
      221,
      0.62);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.72);
  color: #ffb7f0;
  cursor: pointer;
  text-shadow: 0 0 5px #ff42df;
  transition: color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease
}

.header-play-button {
  width: 36px
}

.header-media-button:hover,
.header-media-button:focus-visible,
.header-media-button.active {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.42);
  filter: brightness(1.15)
}

.header-media-icon {
  width: 64%;
  height: 64%;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(255,
        66,
        223,
        0.72))
}

.header-play-button .pause-icon {
  display: none
}

.header-play-button.playing .play-icon {
  display: none
}

.header-play-button.playing .pause-icon {
  display: block
}

.main-menu {
  margin-left: auto
}

.mobile-presets-button {
  display: none
}

.main-menu-toggle {
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(244,
      76,
      221,
      0.62);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.72);
  color: #ffb7f0;
  cursor: pointer;
  list-style: none;
  text-shadow: 0 0 5px #ff42df;
  transition: color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease
}

.main-menu-toggle::-webkit-details-marker {
  display: none
}

.main-menu-toggle span {
  width: 22px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  transition: transform 140ms ease,
    opacity 140ms ease
}

.main-menu[open] .main-menu-toggle,
.main-menu-toggle:hover,
.main-menu-toggle:focus-visible {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.42);
  filter: brightness(1.15)
}

.main-menu[open] .main-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.main-menu[open] .main-menu-toggle span:nth-child(2) {
  opacity: 0
}

.main-menu[open] .main-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.main-nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px,
      calc(100vw - 28px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0,
      237,
      255,
      0.32);
  border-radius: 6px;
  background: rgba(4,
      3,
      19,
      0.98);
  box-shadow:
    inset 0 0 18px rgba(82,
      0,
      170,
      0.44),
    0 0 18px rgba(255,
      41,
      220,
      0.34)
}

.main-nav a {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(244,
      76,
      221,
      0.52);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.7);
  color: #f3dfff;
  font-size: clamp(10px,
      0.92vw,
      13px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 0 7px #fa56f0;
  text-transform: uppercase;
  transition: color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.42);
  filter: brightness(1.15)
}

.content-page {
  min-height: calc(100vh - 132px);
  display: grid;
  grid-template-columns: 160px minmax(0, 1448px) 160px;
  align-items: start;
  justify-content: center;
  gap: clamp(10px,
      1.5vw,
      24px);
  padding: clamp(22px,
      5vw,
      64px) clamp(24px,
      3vw,
      48px)
}

.content-page-centered,
.content-page-editor-layout {
  grid-template-columns: minmax(0,
      100%);
  justify-items: center
}

.content-page-editor-layout {
  padding-inline: 0
}

.radio-stage.is-page-hidden {
  display: none
}

.page-content-view[hidden] {
  display: none
}

.policy-panel {
  width: min(940px,
      100%);
  justify-self: center;
  padding: clamp(22px,
      4vw,
      46px);
  border: 2px solid #ed41d9;
  border-radius: 8px;
  background: rgba(3,
      2,
      18,
      0.92);
  box-shadow:
    inset 0 0 22px rgba(82,
      0,
      170,
      0.55),
    0 0 14px rgba(255,
      41,
      220,
      0.45);
  color: #dffcff;
  /* font-family: "Courier New", monospace; */
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.32)
}

.policy-panel h1 {
  margin: 0 0 0.8em;
  color: #00f7f3;
  font-size: clamp(28px,
      4vw,
      48px);
  line-height: 1;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase
}

.policy-panel p {
  max-width: 72ch;
  margin: 0 0 1.5em;
  font-size: clamp(14px,
      1.4vw,
      18px);
  line-height: 1.55
}

.policy-panel p:last-child {
  margin-bottom: 0
}

.homepage-content {
  display: grid;
  grid-template-columns: 160px minmax(0, 1448px) 160px;
  align-items: start;
  justify-content: center;
  gap: clamp(10px,
      1.5vw,
      24px);
  padding: clamp(30px,
      5vw,
      64px) clamp(24px,
      3vw,
      48px) clamp(32px,
      4vw,
      56px)
}

.homepage-content[hidden] {
  display: none
}

.homepage-main-sections {
  display: grid;
  gap: clamp(32px,
      4vw,
      56px);
  min-width: 0
}

.homepage-side-rail {
  container-type: inline-size;
  width: 160px;
  min-height: 1px
}

.homepage-about,
.homepage-info-section {
  display: grid;
  grid-template-columns: minmax(0,
      1fr);
  align-items: start;
  justify-content: center
}

.homepage-about[hidden],
.homepage-info-section[hidden] {
  display: none
}

.about-ad-rail {
  width: 160px;
  min-height: 1px
}

.homepage-about-panel {
  width: min(1080px,
      100%);
  padding: clamp(22px,
      4vw,
      46px);
  justify-self: center;
  border: 2px solid #ed41d9;
  border-radius: 8px;
  background: rgba(3,
      2,
      18,
      0.92);
  box-shadow:
    inset 0 0 22px rgba(82,
      0,
      170,
      0.55),
    0 0 14px rgba(255,
      41,
      220,
      0.45);
  color: #dffcff;
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.32)
}

.homepage-about-logo {
  display: block;
  width: min(480px,
      82%);
  height: auto;
  margin: 0 auto clamp(22px,
      2.8vw,
      34px);
  filter: drop-shadow(0 0 10px rgba(0,
      238,
      255,
      0.5)) drop-shadow(0 0 12px rgba(255,
      47,
      232,
      0.42))
}

.homepage-section-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: clamp(22px,
      3vw,
      34px) 0 0;
  object-fit: cover;
  border: 1px solid rgba(0,
      237,
      255,
      0.5);
  border-radius: 8px;
  box-shadow:
    0 0 14px rgba(0,
      237,
      255,
      0.24),
    0 0 18px rgba(255,
      41,
      220,
      0.22)
}

.homepage-about-panel h1,
.homepage-info-panel h2 {
  margin: 0 0 0.8em;
  color: #00f7f3;
  text-align: center;
  font-size: clamp(24px,
      3vw,
      36px);
  line-height: 1;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase
}

.homepage-about-panel p {
  /* max-width: 72ch; */
  margin: 0 0 1.5em;
  text-align: left;
  font-size: clamp(14px,
      1.4vw,
      18px);
  line-height: 1.55
}

.homepage-about-panel p:last-child {
  margin-bottom: 0
}

.homepage-top-stations {
  --homepage-top-stations-height: min(600px,
      calc(100vh - 88px));
  display: grid;
  grid-template-columns: minmax(0,
      1fr);
  align-items: start;
  justify-content: center;
  padding: 0
}

.homepage-top-stations[hidden] {
  display: none
}

.homepage-top-stations-panel {
  width: min(1080px,
      100%);
  height: var(--homepage-top-stations-height);
  min-height: 430px;
  justify-self: center;
  overflow: hidden;
  border: 2px solid #ed41d9;
  border-radius: 8px;
  background: rgba(3,
      2,
      18,
      0.92);
  box-shadow:
    inset 0 0 22px rgba(82,
      0,
      170,
      0.55),
    0 0 14px rgba(255,
      41,
      220,
      0.45);
  color: #dffcff;
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.32)
}

.homepage-top-stations-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(18px,
      3vw,
      32px) clamp(20px,
      3.2vw,
      40px);
  border-bottom: 1px solid rgba(0,
      237,
      255,
      0.45)
}

.homepage-top-stations-header h2 {
  margin: 0 0 0.28em;
  color: #00f7f3;
  font-size: clamp(24px,
      3vw,
      36px);
  line-height: 1;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase
}

.homepage-top-stations-header p {
  margin: 0;
  color: #d687ef;
  font-size: clamp(13px,
      1.25vw,
      16px);
  font-weight: 700;
  text-transform: uppercase
}

.homepage-top-stations-list {
  height: calc(100% - clamp(86px,
        8vw,
        112px));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,
      237,
      255,
      0.74) rgba(3,
      2,
      18,
      0.62);
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2,
      minmax(0,
        1fr));
  background-image:
    radial-gradient(circle at 50% 0,
      rgba(0,
        237,
        255,
        0.08),
      transparent 42%),
    linear-gradient(rgba(8,
        3,
        31,
        0.9),
      rgba(8,
        3,
        31,
        0.9))
}

.homepage-top-stations-list::-webkit-scrollbar {
  width: 9px
}

.homepage-top-stations-list::-webkit-scrollbar-track {
  background: rgba(3,
      2,
      18,
      0.62)
}

.homepage-top-stations-list::-webkit-scrollbar-thumb {
  background: rgba(0,
      237,
      255,
      0.74);
  border-radius: 999px
}

.homepage-top-station {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(26px,
      3vw,
      38px) clamp(34px,
      4vw,
      48px) minmax(0,
      1fr);
  align-items: center;
  gap: 0.8rem;
  padding: clamp(10px,
      1.4vw,
      16px) clamp(14px,
      2vw,
      22px);
  border: 0;
  border-bottom: 1px solid rgba(109,
      97,
      190,
      0.36);
  background: transparent;
  color: #ecf9ff;
  cursor: pointer;
  text-align: left
}

.homepage-top-station:nth-child(odd) {
  border-right: 1px solid rgba(109,
      97,
      190,
      0.26)
}

.homepage-top-station:hover,
.homepage-top-station:focus-visible {
  outline: none;
  background: rgba(117,
      29,
      184,
      0.35);
  color: #00fbff
}

.homepage-top-station-rank {
  color: #00f7f3;
  font-size: clamp(12px,
      1.3vw,
      16px);
  font-weight: 800;
  text-align: right
}

.homepage-top-station-icon {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(0,
      237,
      255,
      0.5);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,
        251,
        255,
        0.42) 0 20%,
      transparent 22%),
    linear-gradient(135deg,
      rgba(255,
        66,
        223,
        0.2),
      rgba(0,
        237,
        255,
        0.16)),
    rgba(3,
      2,
      18,
      0.84);
  box-shadow:
    0 0 7px rgba(0,
      237,
      255,
      0.26),
    inset 0 0 7px rgba(255,
      66,
      223,
      0.14)
}

.homepage-top-station-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 3px
}

.homepage-top-station-text {
  min-width: 0;
  display: grid;
  gap: 0.2em
}

.homepage-top-station-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(13px,
      1.45vw,
      18px);
  font-weight: 800
}

.homepage-top-station-meta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #d687ef;
  font-size: clamp(10px,
      1vw,
      13px);
  font-weight: 700
}

.homepage-top-stations-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(20px,
      3vw,
      36px);
  color: #d687ef;
  font-size: clamp(14px,
      1.4vw,
      18px);
  font-weight: 700;
  text-transform: uppercase
}

.retroradio-top-played-shortcode {
  --retroradio-top-stations-row-height: 78px;
  --retroradio-top-stations-header-height: clamp(86px,
      8vw,
      112px);
  width: 100%;
  max-width: 1080px;
  margin: 0 auto
}

.retroradio-top-played-shortcode .homepage-top-stations-panel {
  width: 100%
}

.retroradio-top-played-shortcode[style*="--retroradio-top-stations-desktop-rows"] .homepage-top-stations-panel {
  height: calc(var(--retroradio-top-stations-header-height) + (var(--retroradio-top-stations-row-height) * var(--retroradio-top-stations-desktop-rows)));
  min-height: 0
}

.retroradio-top-played-shortcode[style*="--retroradio-top-stations-desktop-rows"] .homepage-top-stations-list {
  height: calc(var(--retroradio-top-stations-row-height) * var(--retroradio-top-stations-desktop-rows))
}

.retroradio-account-panel {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(22px,
      4vw,
      46px);
  border: 2px solid #ed41d9;
  border-radius: 8px;
  background: rgba(3,
      2,
      18,
      0.92);
  box-shadow:
    inset 0 0 22px rgba(82,
      0,
      170,
      0.55),
    0 0 14px rgba(255,
      41,
      220,
      0.45);
  color: #dffcff;
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.32)
}

.retroradio-account-header {
  margin-bottom: clamp(20px,
      3vw,
      32px);
  text-align: center
}

.retroradio-account-header p {
  margin: 0 0 0.55em;
  color: #d687ef;
  font-size: clamp(12px,
      1.2vw,
      15px);
  font-weight: 800;
  text-transform: uppercase
}

.retroradio-account-header h2 {
  margin: 0;
  color: #00f7f3;
  font-size: clamp(30px,
      4vw,
      48px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72)
}

.retroradio-account-intro {
  max-width: 680px;
  margin: 0 auto clamp(20px,
      3vw,
      32px);
  color: #e9fbff;
  font-size: clamp(15px,
      1.35vw,
      18px);
  line-height: 1.55;
  text-align: center
}

.retroradio-account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px,
      3vw,
      32px)
}

.retroradio-account-button {
  min-width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(0,
      237,
      255,
      0.62);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.78);
  color: #00fbff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0,
      237,
      255,
      0.22);
  transition:
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease
}

.retroradio-account-button:hover,
.retroradio-account-button:focus-visible {
  border-color: rgba(244,
      76,
      221,
      0.82);
  color: #fff;
  box-shadow:
    0 0 14px rgba(244,
      76,
      221,
      0.28),
    inset 0 0 14px rgba(0,
      237,
      255,
      0.1);
  outline: none;
  transform: translateY(-1px)
}

.retroradio-account-button-secondary {
  border-color: rgba(244,
      76,
      221,
      0.62);
  color: #ffb7f0;
  box-shadow: 0 0 10px rgba(255,
      66,
      223,
      0.2)
}

.retroradio-account-button-danger {
  border-color: rgba(255,
      76,
      120,
      0.72);
  color: #ffb7ca;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(255,
      76,
      120,
      0.2)
}

.retroradio-account-notice {
  margin: 0 0 clamp(18px,
      3vw,
      28px);
  padding: 12px 16px;
  border: 1px solid rgba(0,
      237,
      255,
      0.48);
  border-radius: 6px;
  background: rgba(0,
      237,
      255,
      0.1);
  color: #dffcff;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase
}

.retroradio-account-notice-warning {
  border-color: rgba(255,
      76,
      120,
      0.48);
  background: rgba(255,
      76,
      120,
      0.1);
  color: #ffcfdd
}

.retroradio-account-delete-presets {
  display: flex;
  justify-content: center;
  margin-top: 14px
}

.retroradio-account-section-heading {
  margin: clamp(24px,
      3vw,
      34px) 0 14px;
  color: #dffcff;
  font-size: clamp(18px,
      1.8vw,
      24px);
  line-height: 1.15;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.42)
}

.retroradio-account-management {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(18px,
      3vw,
      28px)
}

.retroradio-account-form {
  display: grid;
  gap: 14px;
  padding: clamp(16px,
      2vw,
      22px);
  border: 1px solid rgba(0,
      237,
      255,
      0.42);
  border-radius: 6px;
  background: rgba(9,
      5,
      32,
      0.68);
  box-shadow:
    inset 0 0 18px rgba(0,
      237,
      255,
      0.08),
    0 0 12px rgba(0,
      237,
      255,
      0.08)
}

.retroradio-account-form h3 {
  margin: 0;
  color: #00f7f3;
  font-size: clamp(18px,
      1.7vw,
      22px);
  line-height: 1.1;
  text-transform: uppercase
}

.retroradio-account-form p {
  margin: 0;
  color: #ffcfdd;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.retroradio-account-form label {
  display: grid;
  gap: 8px;
  color: #d687ef;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase
}

.retroradio-account-form input[type="email"],
.retroradio-account-form input[type="password"],
.retroradio-account-form input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(0,
      237,
      255,
      0.62);
  border-radius: 4px;
  background:
    linear-gradient(180deg,
      rgba(1,
        11,
        24,
        0.96),
      rgba(12,
        5,
        38,
        0.94));
  color: #f2feff;
  caret-color: #00f7f3;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.22);
  text-transform: none;
  box-shadow:
    inset 0 0 14px rgba(0,
      237,
      255,
      0.12),
    0 0 10px rgba(0,
      237,
      255,
      0.12);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease
}

.retroradio-account-form input::placeholder {
  color: rgba(223,
      252,
      255,
      0.48)
}

.retroradio-account-form input[type="email"]:focus,
.retroradio-account-form input[type="password"]:focus,
.retroradio-account-form input[type="text"]:focus,
.retroradio-account-form input[type="email"]:focus-visible,
.retroradio-account-form input[type="password"]:focus-visible,
.retroradio-account-form input[type="text"]:focus-visible {
  border-color: rgba(244,
      76,
      221,
      0.82);
  background:
    linear-gradient(180deg,
      rgba(2,
        16,
        32,
        0.98),
      rgba(18,
        6,
        46,
        0.98));
  box-shadow:
    inset 0 0 16px rgba(244,
      76,
      221,
      0.14),
    0 0 14px rgba(244,
      76,
      221,
      0.24);
  outline: none
}

.retroradio-account-form input:-webkit-autofill,
.retroradio-account-form input:-webkit-autofill:hover,
.retroradio-account-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f2feff;
  caret-color: #00f7f3;
  box-shadow:
    0 0 0 1000px rgba(8,
      3,
      31,
      0.98) inset,
    0 0 14px rgba(244,
      76,
      221,
      0.24)
}

.retroradio-account-field-grid {
  display: grid;
  grid-template-columns: repeat(2,
      minmax(0,
        1fr));
  gap: 12px
}

.retroradio-account-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.retroradio-account-checkbox {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 12px;
  color: #ffcfdd;
  cursor: pointer;
  line-height: 1.35
}

.retroradio-account-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid rgba(255,
      76,
      120,
      0.72);
  border-radius: 4px;
  background:
    linear-gradient(180deg,
      rgba(1,
        11,
        24,
        0.96),
      rgba(12,
        5,
        38,
        0.94));
  box-shadow:
    inset 0 0 10px rgba(255,
      76,
      120,
      0.12),
    0 0 8px rgba(255,
      76,
      120,
      0.18)
}

.retroradio-account-checkbox input[type="checkbox"]::before {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ffb7ca;
  box-shadow: 0 0 8px rgba(255,
      76,
      120,
      0.72);
  content: "";
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 160ms ease,
    transform 160ms ease
}

.retroradio-account-checkbox input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: scale(1)
}

.retroradio-account-checkbox input[type="checkbox"]:focus-visible {
  border-color: rgba(244,
      76,
      221,
      0.92);
  outline: none;
  box-shadow:
    inset 0 0 10px rgba(255,
      76,
      120,
      0.12),
    0 0 12px rgba(244,
      76,
      221,
      0.28)
}

.retroradio-account-danger-zone {
  margin-top: 16px;
  border-color: rgba(255,
      76,
      120,
      0.42)
}

.retroradio-account-summary {
  display: grid;
  grid-template-columns: repeat(2,
      minmax(0,
        1fr)) max-content;
  gap: 12px;
  margin-bottom: clamp(18px,
      3vw,
      28px)
}

.retroradio-account-summary>div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(0,
      237,
      255,
      0.32);
  border-radius: 6px;
  background: rgba(9,
      5,
      32,
      0.62)
}

.retroradio-account-summary span {
  display: block;
  margin-bottom: 0.45em;
  color: #d687ef;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase
}

.retroradio-account-summary strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #e9fbff;
  font-size: clamp(18px,
      2vw,
      24px);
  text-overflow: ellipsis;
  white-space: nowrap
}

.retroradio-account-summary-action {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.retroradio-account-summary-action .retroradio-account-button {
  min-width: 118px
}

.retroradio-account-presets {
  display: grid;
  gap: 10px
}

.retroradio-account-preset {
  display: grid;
  grid-template-columns: minmax(0,
      1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(109,
      97,
      190,
      0.36);
  border-radius: 6px;
  background: rgba(8,
      3,
      31,
      0.74)
}

.retroradio-account-preset-play {
  display: grid;
  grid-template-columns: 44px minmax(0,
      1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none
}

.retroradio-account-preset.is-saved {
  border-color: rgba(0,
      237,
      255,
      0.48)
}

.retroradio-account-preset-number {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid rgba(0,
      237,
      255,
      0.5);
  border-radius: 4px;
  color: #00f7f3;
  font-weight: 900
}

.retroradio-account-preset-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin: 0 0 0.25em;
  color: #ecf9ff;
  font-size: clamp(15px,
      1.5vw,
      18px);
  text-overflow: ellipsis;
  white-space: nowrap
}

.retroradio-account-preset-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: #d687ef;
  font-size: clamp(12px,
      1.1vw,
      14px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap
}

.retroradio-account-preset-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: #00fbff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase
}

.retroradio-account-preset-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 16px;
  row-gap: 8px
}

.retroradio-account-preset-actions form {
  margin: 0
}

.retroradio-account-preset-delete {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffb7ca;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase
}

.retroradio-account-preset-delete:hover,
.retroradio-account-preset-delete:focus-visible,
.retroradio-account-preset-actions a:hover,
.retroradio-account-preset-actions a:focus-visible {
  color: #fff;
  text-shadow: 0 0 8px currentColor
}

.radio-stage {
  min-height: calc(100vh - 30px);
  display: grid;
  grid-template-columns: 160px minmax(0, 1448px) 160px;
  /* grid-template-columns: minmax(0, 1448px) 160px; */
  /* grid-template-columns: minmax(0, 1448px); */
  align-items: center;
  justify-content: center;
  gap: clamp(10px,
      1.5vw,
      24px);
  padding: 10px clamp(24px,
      3vw,
      48px)
}

.radio-column {
  container-type: inline-size;
  min-width: 0;
  display: grid;
  justify-items: center;
  position: relative
}

.radio {
  position: relative;
  container-type: inline-size;
  width: min(100%,
      calc((100vh - 75px) * 1.33348),
      1448px);
  aspect-ratio: 6034 / 4525;
  user-select: none
}

.ad-rail {
  container-type: inline-size;
  width: var(--retroradio-ad-width,
      160px);
  max-width: 100%;
  margin-inline: auto
}

.wp-block-shortcode:has(> .ad-rail) {
  display: flex;
  justify-content: center
}

.google-ad-shell {
  position: relative;
  width: var(--retroradio-ad-width,
      160px);
  max-width: 100%;
  height: var(--retroradio-ad-height,
      600px);
  overflow: hidden;
  border: 1px solid rgba(0,
      220,
      255,
      0.48);
  background:
    linear-gradient(rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(180deg,
      rgba(6,
        19,
        27,
        0.96) 0%,
      rgba(7,
        30,
        42,
        0.94) 58%,
      rgba(5,
        8,
        15,
        0.98) 100%);
  background-size: 18px 18px,
    18px 18px,
    auto;
  box-shadow:
    inset 0 0 18px rgba(0,
      237,
      255,
      0.14),
    0 0 22px rgba(22,
      84,
      154,
      0.16)
}

.google-ad-shell::before {
  content: "AD SPACE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(126,
      250,
      255,
      0.34);
  font-size: clamp(15px,
      11cqw,
      20px);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none
}

.ad-unit {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--retroradio-ad-width,
      160px);
  max-width: 100%;
  height: var(--retroradio-ad-height,
      600px)
}

.ad-label {
  display: block;
  margin-bottom: 7px;
  color: #70738b;
  text-align: center;
  font: clamp(9px,
      7.2cqw,
      11.6px)/1 Arial,
    sans-serif
}

.mock-ad {
  position: relative;
  width: 160px;
  height: min(600px,
      calc(100vh - 88px));
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 28px 15px 20px;
  border: 1px solid rgba(112,
      147,
      205,
      0.42);
  background: #080b17;
  color: #f7fbff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 22px rgba(22,
      84,
      154,
      0.16)
}

.mock-ad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.mock-ad-night {
  border-color: rgba(244,
      40,
      218,
      0.48);
  background: linear-gradient(180deg,
      #080816 0%,
      #190529 55%,
      #080512 100%)
}

.mock-ad-drive {
  border-color: rgba(0,
      220,
      255,
      0.48);
  background: linear-gradient(180deg,
      #06131b 0%,
      #071e2a 58%,
      #05080f 100%)
}

.ad-kicker {
  position: relative;
  color: #7efaff;
  font-size: clamp(10.5px,
      8.9cqw,
      14.5px);
  font-weight: 800
}

.mock-ad-night .ad-kicker {
  color: #ff68e8
}

.mock-ad strong {
  position: relative;
  display: block;
  max-width: 100%;
  margin-top: 16px;
  overflow-wrap: anywhere;
  font-size: clamp(17px,
      11.5cqw,
      20px);
  line-height: 1.12;
  text-wrap: balance
}

.ad-art {
  position: relative;
  display: block;
  flex: 1;
  width: 100%;
  min-height: 155px;
  margin: 20px 0 14px
}

.ad-art-disc::before {
  content: "";
  position: absolute;
  width: 112px;
  height: 112px;
  left: 9px;
  top: 28px;
  border: 2px solid #ff4dde;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      #11132d 0 4px,
      #252455 5px 6px);
  box-shadow: 0 0 20px #b600ff
}

.ad-art-disc::after {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  left: 53px;
  top: 72px;
  border-radius: 50%;
  background: #00eeff;
  box-shadow: 0 0 14px #00eeff
}

.ad-art-road {
  background: linear-gradient(72deg,
      transparent 47%,
      #00eaff 48% 50%,
      transparent 51%) bottom / 100% 80% no-repeat,
    linear-gradient(108deg,
      transparent 47%,
      #fd4de2 48% 50%,
      transparent 51%) bottom / 100% 80% no-repeat
}

.ad-art-road::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 22%;
  height: 65px;
  background: #090c15;
  border: 1px solid #53efff;
  clip-path: polygon(10% 48%,
      25% 20%,
      74% 20%,
      92% 52%,
      85% 72%,
      15% 72%);
  box-shadow: 0 0 18px #007cbd
}

.ad-copy {
  position: relative;
  color: #bec8d8;
  font-size: clamp(11.5px,
      9.8cqw,
      15.6px);
  line-height: 1.4
}

.ad-action {
  position: relative;
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid currentColor;
  color: #64f3ff;
  font-size: clamp(10.5px,
      8.2cqw,
      13.5px);
  font-weight: 800
}

.mock-ad-night .ad-action {
  color: #ff72e9
}

.mock-ad:hover,
.mock-ad:focus-visible {
  filter: brightness(1.15)
}

.mock-ad:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}

.music-fact-panel {
  position: relative;
  width: 160px;
  min-height: min(600px,
      calc(100vh - 88px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 20px 14px 18px;
  border: 1px solid rgba(244,
      40,
      218,
      0.54);
  background:
    linear-gradient(rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255,
        255,
        255,
        0.025) 1px,
      transparent 1px),
    linear-gradient(180deg,
      #080816 0%,
      #180523 58%,
      #070510 100%);
  background-size: 18px 18px,
    18px 18px,
    auto;
  color: #f6fbff;
  text-align: left;
  box-shadow:
    inset 0 0 18px rgba(255,
      48,
      221,
      0.13),
    0 0 22px rgba(22,
      84,
      154,
      0.16)
}

.music-fact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%,
      rgba(0,
        237,
        255,
        0.24),
      transparent 34%),
    radial-gradient(circle at 50% 64%,
      rgba(255,
        41,
        220,
        0.22),
      transparent 42%);
  pointer-events: none
}

.music-fact-panel>* {
  position: relative
}

.music-fact-kicker {
  color: #ff68e8;
  font-size: clamp(10px,
      8.2cqw,
      13px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 8px rgba(255,
      58,
      226,
      0.8);
  letter-spacing: 0
}

.music-fact-panel h2 {
  margin: 12px 0 10px;
  color: #00f7f3;
  font-size: clamp(22px,
      17cqw,
      28px);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,
      255,
      255,
      0.74)
}

.music-fact-date {
  display: block;
  margin: 0 0 18px;
  padding: 8px 7px;
  border: 1px solid rgba(0,
      237,
      255,
      0.52);
  color: #eaffff;
  font-size: clamp(12px,
      9.7cqw,
      15px);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  background: rgba(2,
      15,
      32,
      0.72);
  box-shadow: inset 0 0 12px rgba(0,
      237,
      255,
      0.12)
}

.music-fact-panel p {
  margin: 0;
  color: #dffcff;
  font-size: clamp(13px,
      10.2cqw,
      16px);
  font-weight: 600;
  line-height: 1.38;
  text-shadow: 0 0 5px rgba(0,
      255,
      255,
      0.28)
}

.music-fact-panel strong {
  color: #fff3ff;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255,
      104,
      232,
      0.74)
}

.music-fact-link {
  display: block;
  margin-top: auto;
  padding: 10px 8px;
  border: 1px solid currentColor;
  color: #ff72e9;
  font-size: clamp(10.5px,
      8.4cqw,
      13px);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,
      58,
      226,
      0.74)
}

.music-fact-link:hover,
.music-fact-link:focus-visible {
  color: #00f7f3;
  outline: none
}

.music-fact-link:focus-visible {
  box-shadow: 0 0 0 2px #fff
}

.radio-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none
}

.speaker-list-trigger {
  position: absolute;
  z-index: 2;
  left: 8.35%;
  top: 23.9%;
  width: 29.25%;
  height: 53.1%;
  padding: 0;
  border: 0;
  border-radius: 8%;
  background: transparent;
  cursor: pointer
}

.speaker-list-trigger:focus-visible {
  outline: 2px solid #00f7ff;
  outline-offset: -5px
}

.speaker-list-button {
  position: absolute;
  z-index: 3;
  left: 22.975%;
  top: 71.8%;
  transform: translateX(-50%);
  width: 10.5%;
  height: 3.2%;
  padding: 0;
  border: 1px solid #f34cdd;
  border-radius: 3px;
  background: rgba(5,
      3,
      20,
      0.88);
  color: #fff;
  cursor: pointer;
  font-size: clamp(6.5px,
      0.95cqw,
      13.5px);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ff42df;
  box-shadow: 0 0 6px rgba(255,
      49,
      220,
      0.55)
}

.speaker-list-button:hover,
.speaker-list-button:focus-visible {
  color: #00fbff;
  border-color: #00edff;
  outline: none
}

.station-list-panel {
  position: absolute;
  z-index: 12;
  left: 8.35%;
  top: 23.9%;
  width: 28.85%;
  height: 53.1%;
  overflow: hidden;
  border: 2px solid #ed41d9;
  border-radius: 8%;
  background: rgba(3,
      2,
      18,
      0.96);
  box-shadow: inset 0 0 22px rgba(82,
      0,
      170,
      0.7),
    0 0 14px rgba(255,
      41,
      220,
      0.65);
  color: #dffcff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease
}

.station-list-panel.is-open {
  opacity: 1;
  pointer-events: auto
}

.station-list-panel[hidden] {
  display: none
}

.search-form {
  height: 85%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 3.2%;
  padding: 5% 5.5%
}

.search-field {
  grid-row: 1;
  display: grid;
  gap: 5%
}

.search-control-group {
  display: grid;
  gap: 5%;
  min-height: 0
}

.search-type-group {
  grid-row: 2
}

.search-sort-group {
  grid-row: 4
}

.search-control-group span,
.search-field span {
  color: #00f5ff;
  font-size: clamp(6.5px,
      0.86cqw,
      11.6px);
  font-weight: 700;
  text-transform: uppercase
}

.search-field input {
  width: 100%;
  min-width: 0;
  padding: 3.5% 4%;
  border: 1px solid rgba(0,
      237,
      255,
      0.62);
  border-radius: 4px;
  background: rgba(0,
      6,
      18,
      0.92);
  color: #ecf9ff;
  font: inherit;
  font-size: clamp(7.8px,
      1.22cqw,
      17.2px);
  outline: none;
  box-shadow: inset 0 0 9px rgba(0,
      237,
      255,
      0.2)
}

.search-field input:focus {
  border-color: #ff4bdd;
  box-shadow: inset 0 0 10px rgba(255,
      75,
      221,
      0.28),
    0 0 8px rgba(255,
      75,
      221,
      0.46)
}

.country-search-list {
  grid-row: 4;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid rgba(0,
      237,
      255,
      0.54);
  border-radius: 4px;
  background:
    linear-gradient(180deg,
      rgba(0,
        237,
        255,
        0.08),
      rgba(255,
        75,
        221,
        0.07)),
    rgba(4,
      3,
      19,
      0.96);
  box-shadow:
    inset 0 0 14px rgba(0,
      237,
      255,
      0.16),
    0 0 10px rgba(255,
      75,
      221,
      0.22)
}

.country-search-list[hidden] {
  display: none
}

.country-search-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,
      1fr) auto;
  align-items: center;
  gap: 0.7em;
  padding: 3% 4%;
  border: 0;
  border-bottom: 1px solid rgba(0,
      237,
      255,
      0.16);
  background: transparent;
  color: #ecf9ff;
  cursor: pointer;
  text-align: left
}

.country-search-option:last-child {
  border-bottom: 0
}

.country-search-option:hover,
.country-search-option:focus-visible,
.country-search-option.active {
  background: rgba(0,
      237,
      255,
      0.14);
  color: #00fbff;
  outline: none;
  box-shadow: inset 0 0 10px rgba(255,
      75,
      221,
      0.18)
}

.country-search-name {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(7px,
      1.04cqw,
      14px);
  font-weight: 800;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px rgba(0,
      237,
      255,
      0.56);
  text-transform: uppercase;
  white-space: nowrap
}

.country-search-meta,
.country-search-empty {
  color: rgba(255,
      183,
      240,
      0.72);
  font-size: clamp(5.9px,
      0.76cqw,
      10px);
  font-weight: 700;
  text-transform: uppercase
}

.country-search-empty {
  padding: 5% 4%;
  text-align: center
}

.search-type {
  display: grid;
  grid-template-columns: repeat(2,
      1fr);
  gap: 4%
}

.search-sort {
  display: grid;
  grid-template-columns: repeat(2,
      1fr);
  gap: 4%
}

.search-sort-button,
.search-type-button,
.search-submit {
  min-width: 0;
  border: 1px solid rgba(244,
      76,
      221,
      0.75);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.9);
  color: rgba(243,
      223,
      255,
      0.6);
  cursor: pointer;
  font-size: clamp(6.5px,
      1.1cqw,
      15.6px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ff42df
}

.search-sort-button,
.search-type-button {
  padding: 5% 2%
}

.search-type-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24em;
  line-height: 0.9
}

.search-button-title,
.search-button-hint {
  display: block;
  line-height: inherit
}

.search-button-hint {
  color: rgba(255,
      183,
      240,
      0.72);
  font-size: 0.72em;
  font-weight: 700
}

.search-type-button.active .search-button-hint,
.search-type-button:hover .search-button-hint,
.search-type-button:focus-visible .search-button-hint {
  color: rgba(223,
      252,
      255,
      0.78)
}

.search-sort-button.active,
.search-sort-button:hover,
.search-sort-button:focus-visible,
.search-type-button.active,
.search-type-button:hover,
.search-type-button:focus-visible,
.search-submit:hover,
.search-submit:focus-visible {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.42)
}

.search-submit {
  grid-row: 6;
  align-self: start;
  justify-self: center;
  width: 54%;
  padding: 3.8% 2%
}

.vibe-search-form {
  --vibe-search-button-height: clamp(22px, 6.4cqw, 31px);
  height: 68%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2.5%;
  padding: 2% 2.5% 3%
}

.vibe-search-heading {
  min-height: 0;
  display: grid;
  gap: 0.52em;
  padding: 0 0 1%;
  text-align: center;
  text-transform: uppercase
}

.vibe-search-heading span {
  color: #00fbff;
  font-size: clamp(10px,
      1.58cqw,
      21px);
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.66)
}

.vibe-search-heading small {
  color: rgba(255,
      183,
      240,
      0.82);
  font-size: clamp(7px,
      0.98cqw,
      13px);
  font-weight: 800;
  line-height: 1.15
}

.vibe-chip-grid {
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 1%;
  scrollbar-width: thin;
  scrollbar-color: #d941db rgba(0,
      237,
      255,
      0.1)
}

.vibe-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(18px,
      3.4cqw,
      34px) minmax(0,
      1fr);
  align-items: center;
  gap: 0.7em;
  border-radius: 0;
  background: transparent;
  color: rgba(236,
      249,
      255,
      0.86);
  font-size: clamp(9px,
      1.45cqw,
      20px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,
      237,
      255,
      0.46)
}

.vibe-chip-icon {
  width: 100%;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(0,
        237,
        255,
        0.42))
}

.vibe-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.vibe-chip:hover,
.vibe-chip:focus-visible,
.vibe-chip.active {
  color: #00fbff;
  outline: none
}

.vibe-chip:disabled {
  cursor: wait;
  opacity: 0.72
}

.more-vibes-button {
  justify-self: center
}

.more-vibes-button:hover,
.more-vibes-button:focus-visible {
  border-color: #ff4bdd;
  color: #ffdbf8;
  outline: none;
  box-shadow:
    0 0 8px rgba(255,
      75,
      221,
      0.34),
    inset 0 0 11px rgba(0,
      237,
      255,
      0.14)
}

.more-vibes-button:disabled {
  cursor: wait;
  opacity: 0.72
}

.station-list-header {
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  padding: 2.8% 4.5% 2.2%;
  border-bottom: 1px solid rgba(0,
      237,
      255,
      0.55);
  background: rgba(10,
      7,
      38,
      0.96)
}

.station-list-header>div:first-child {
  min-width: 0
}

.station-list-header span,
.station-list-header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.station-list-header span {
  color: #fff;
  font-size: clamp(9px,
      1.5cqw,
      22px);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 7px #ff42df
}

.station-list-header small {
  margin-top: 2px;
  color: #00f5ff;
  font-size: clamp(6.5px,
      0.86cqw,
      11.6px)
}

.popup-nav {
  display: flex;
  align-items: center;
  gap: 0.26em;
  margin-left: auto
}

.popup-nav-button,
.station-list-close {
  width: clamp(30px,
      2.1cqw,
      28px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(244,
      76,
      221,
      0.62);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.72);
  color: #ffb7f0;
  cursor: pointer;
  font-size: clamp(10px,
      1.55cqw,
      21px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 5px #ff42df
}

.popup-nav-button:hover,
.popup-nav-button:focus-visible,
.station-list-close:hover,
.station-list-close:focus-visible {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.38)
}

.popup-nav-button:disabled {
  cursor: default;
  opacity: 0.34;
  box-shadow: none
}

.popup-icon {
  width: 72%;
  height: 72%;
  display: block;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,
        66,
        223,
        0.72))
}

.station-list {
  height: 74%;
  overflow-y: auto;
  padding: 1.5% 2.5% 4%;
  scrollbar-width: thin;
  scrollbar-color: #d941db rgba(0,
      237,
      255,
      0.1)
}

.genre-filter {
  height: 17%;
  position: relative;
  z-index: 2;
  padding: 2% 4.5%;
  border-bottom: 1px solid rgba(0,
      237,
      255,
      0.32);
  background: rgba(7,
      5,
      29,
      0.94)
}

.genre-filter .search-field {
  display: grid;
  gap: 0.42em
}

.genre-filter .search-field span {
  font-size: clamp(8px,
      1.05cqw,
      14px)
}

.genre-filter .search-field input {
  min-height: clamp(28px,
      4.8cqw,
      42px);
  padding: 0.55em 0.7em;
  font-size: clamp(10px,
      1.45cqw,
      19px)
}

.genre-country-search-list .country-search-option {
  padding: 0.78em 0.86em
}

.genre-country-search-list .country-search-name {
  font-size: clamp(9px,
      1.28cqw,
      16px)
}

.genre-country-search-list .country-search-meta,
.genre-country-search-list .country-search-empty {
  font-size: clamp(7px,
      0.95cqw,
      12px)
}

.genre-country-search-list {
  position: absolute;
  z-index: 5;
  left: 4.5%;
  right: 4.5%;
  top: calc(100% - 2%);
  max-height: min(220px,
      52svh);
  min-height: auto
}

.genre-list-panel .station-list {
  height: 68%;
  padding-top: 2%
}

.station-list-more {
  width: 72%;
  height: 7.2%;
  display: block;
  margin: 1.4% auto 0;
  border: 1px solid rgba(244,
      76,
      221,
      0.75);
  border-radius: 4px;
  background: rgba(9,
      5,
      32,
      0.9);
  color: #f3dfff;
  cursor: pointer;
  font-size: clamp(6.5px,
      1.1cqw,
      15.6px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 0 7px #fa56f0
}

.station-list-more:hover,
.station-list-more:focus-visible {
  border-color: #00edff;
  color: #00fbff;
  outline: none;
  box-shadow: 0 0 8px rgba(0,
      237,
      255,
      0.42)
}

.station-list-more:disabled {
  cursor: default;
  opacity: 0.45
}

.station-list-item {
  width: 100%;
  display: grid;
  gap: 0.35em;
  align-items: center;
  padding: 3.2% 3.5%;
  border: 0;
  border-bottom: 1px solid rgba(109,
      97,
      190,
      0.36);
  background: transparent;
  color: #ecf9ff;
  cursor: pointer;
  text-align: left
}

.station-list-item.has-icon {
  grid-template-columns: clamp(22px,
      4.2cqw,
      42px) minmax(0,
      1fr);
  column-gap: 0.7em
}

.station-list-item:hover,
.station-list-item:focus-visible,
.station-list-item.active {
  outline: none;
  background: rgba(117,
      29,
      184,
      0.35);
  color: #00fbff
}

.station-list-item-icon {
  --station-icon-placeholder:
    radial-gradient(circle at 50% 50%,
      rgba(0,
        251,
        255,
        0.42) 0 20%,
      transparent 22%),
    linear-gradient(135deg,
      rgba(255,
        66,
        223,
        0.2),
      rgba(0,
        237,
        255,
        0.16)),
    rgba(3,
      2,
      18,
      0.84);
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgba(0,
      237,
      255,
      0.5);
  border-radius: 4px;
  background: var(--station-icon-placeholder);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    0 0 7px rgba(0,
      237,
      255,
      0.26),
    inset 0 0 7px rgba(255,
      66,
      223,
      0.14)
}

.station-list-item-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 3px;
  opacity: 0;
  transition: opacity 180ms ease
}

.station-list-item-icon.is-loaded img {
  opacity: 1
}

.station-list-item-text {
  min-width: 0;
  display: grid;
  gap: 0.25em
}

.station-list-item-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px,
      1.45cqw,
      20px);
  font-weight: 700
}

.station-list-item-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d687ef;
  font-size: clamp(6.6px,
      0.94cqw,
      13px);
  text-align: left;
  white-space: nowrap
}

.genre-list-panel .station-list-item {
  grid-template-columns: minmax(0,
      1fr) max-content;
  gap: 1.2em
}

.genre-list-panel .station-list-item-meta {
  text-align: right
}

.country-list-panel .station-list-item {
  grid-template-columns: minmax(0,
      1fr) max-content;
  gap: 1.2em
}

.country-list-panel .station-list-item-meta {
  text-align: right
}

.display {
  position: absolute;
  left: 42.3%;
  top: 26.7%;
  width: 29.2%;
  height: 18.6%;
  overflow: hidden;
  color: #00f7f3;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  font-family: "Courier New",
    monospace
}

.track-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between
}

.station-uuid-label {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 2.4% 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(214,
      135,
      239,
      0.88);
  font: inherit;
  font-size: clamp(4.8px,
      0.8cqw,
      11px);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(214,
      135,
      239,
      0.45)
}

.station-uuid-label span {
  flex: 0 0 auto;
  color: #00f7f3
}

.station-uuid-label code {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap
}

.station-uuid-label:hover,
.station-uuid-label:focus-visible {
  color: #fff3ff;
  outline: none;
  text-shadow: 0 0 7px rgba(244,
      76,
      221,
      0.72)
}

.station-uuid-label:disabled {
  cursor: default;
  opacity: 0.62
}

.display-top {
  display: grid;
  grid-template-columns: minmax(0,
      1fr) max-content minmax(0,
      1fr);
  align-items: flex-end;
  gap: 0.5em;
  font-size: clamp(9px,
      2.04cqw,
      29px);
  font-weight: 700
}

.display-top #clock {
  justify-self: center
}

.signal {
  justify-self: end;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 1.15em
}

.signal i {
  display: block;
  width: clamp(2px,
      0.32cqw,
      5px);
  height: 30%;
  background: currentColor
}

.signal i:nth-child(2) {
  height: 50%
}

.signal i:nth-child(3) {
  height: 72%
}

.signal i:nth-child(4) {
  height: 100%
}

.station-website-row {
  display: grid;
  grid-template-columns: minmax(0,
      1fr) max-content;
  align-items: center;
  gap: 0.55em;
  margin-top: 4.5%
}

.station-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: inherit;
  font-size: clamp(11.5px,
      2.66cqw,
      39px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer
}

.station-name:hover,
.station-name:focus-visible {
  color: #caffff;
  outline: none;
  text-shadow: 0 0 11px #00ffff
}

.station-name span {
  display: inline-block;
  min-width: 100%;
  will-change: transform
}

.station-name.is-scrolling span {
  animation: station-ticker var(--ticker-duration,
      8s) ease-in-out infinite alternate
}

.visit-website-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  color: #d687ef;
  font-size: clamp(4.8px,
      0.84cqw,
      12px);
  font-weight: 700;
  line-height: 0.92;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(214,
      135,
      239,
      0.55);
  transition: color 150ms ease,
    text-shadow 150ms ease,
    transform 150ms ease
}

.visit-website-hint:hover,
.visit-website-hint:focus-visible {
  color: #ffffff;
  outline: none;
  text-shadow: 0 0 5px rgba(255,
      255,
      255,
      0.95),
    0 0 12px rgba(0,
      251,
      255,
      0.9),
    0 0 18px rgba(214,
      135,
      239,
      0.85);
  transform: translateY(-1px)
}

.station-name[aria-disabled="true"]+.visit-website-hint {
  visibility: hidden
}

@keyframes station-ticker {

  0%,
  14% {
    transform: translateX(0)
  }

  86%,
  100% {
    transform: translateX(var(--ticker-distance,
          0))
  }
}

.now-label,
.track-row {
  font-size: clamp(7.8px,
      1.62cqw,
      23px)
}

.now-label {
  margin-top: 4%
}

.track-row {
  margin-top: 1.5%
}

.track {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.display-message {
  position: absolute;
  inset: 15% 0 -15%;
  display: grid;
  place-items: center;
  padding: 8%;
  background: rgba(0,
      4,
      8,
      0.95);
  text-align: center;
  font-size: clamp(9px,
      1.7cqw,
      24.5px);
  line-height: 1.35;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease
}

.display-message.visible {
  opacity: 1
}

.dial,
.radio-button {
  border: 0;
  color: #f3dfff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.dial {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  touch-action: none
}

.dial img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 120ms ease
}

.tune-dial img {
  transition: filter 120ms ease,
    transform 90ms linear
}

.dial:hover img,
.dial:focus-visible img {
  filter: brightness(1.18) drop-shadow(0 0 8px #ff3ce7)
}

.dial:focus-visible,
.radio-button:focus-visible {
  outline: 2px solid #00f7ff;
  outline-offset: 2px
}

.dial-label {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 4.45%;
  padding: 0;
  background: transparent;
  color: #f3dfff;
  font-size: clamp(6.5px,
      1.2cqw,
      17.2px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 5px rgba(250,
      86,
      240,
      0.42);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none
}

.tune-label {
  left: 75.05%;
  top: 23.65%;
  width: 16.85%
}

.volume-label {
  left: 77.55%;
  top: 54.1%;
  width: 11.8%
}

.discover-label {
  left: 40.45%;
  top: 49.3%;
  width: 33.85%
}

.preset-label {
  left: 40.45%;
  top: 59.3%;
  width: 33.85%
}

.tune-dial {
  left: 76.35%;
  top: 28.5%;
  width: 14.65%;
  aspect-ratio: 1
}

.volume-dial {
  left: 78.92%;
  top: 58.15%;
  width: 9.25%;
  aspect-ratio: 1
}

.main-controls,
.preset-controls {
  position: absolute;
  display: grid;
  gap: 1.8%
}

.main-controls {
  grid-template-columns: repeat(5,
      1fr)
}

.preset-controls {
  grid-template-columns: repeat(5,
      1fr);
  grid-template-rows: repeat(2,
      1fr);
  row-gap: 8%
}

.main-controls {
  left: 40.45%;
  top: 53.3%;
  width: 33.85%;
  height: 5.45%
}

.preset-controls {
  left: 40.45%;
  top: 63.1%;
  width: 33.85%;
  height: 11.35%
}

.broadcaster-support {
  position: absolute;
  left: 8.35%;
  top: 79.6%;
  width: 83.4%;
  margin: 0;
  color: #00f7f3;
  font-size: clamp(6.5px,
      1.1cqw,
      15.6px);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 8px rgba(0,
      255,
      255,
      0.72);
  text-transform: uppercase
}

.radio-button {
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: 7px;
  background: url("../img/button.png") center / 100% 100% no-repeat;
  text-shadow: 0 0 7px #fa56f0;
  transition: filter 100ms ease,
    transform 80ms ease
}

.radio-button:hover,
.radio-button:focus-visible,
.radio-button.active {
  filter: brightness(1.35) drop-shadow(0 0 5px #7d2cff)
}

.radio-button:active {
  transform: translateY(2px);
  filter: brightness(0.88)
}

.genre-button,
.search-button {
  font-size: clamp(6.5px,
      1.2cqw,
      17.2px);
  font-weight: 700
}

.top-button,
.random-button,
.vibe-search-button,
.genre-button,
.deep-search-button,
.save-button,
.clear-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: clamp(6.5px,
      1.1cqw,
      15.6px);
  font-weight: 800;
  line-height: 0.72;
  text-align: center
}

.top-button span,
.random-button span,
.vibe-search-button span,
.genre-button span,
.deep-search-button span,
.save-button span,
.clear-button span {
  display: block;
  font-size: inherit;
  line-height: inherit
}

.vibe-search-button {
  color: #00fbff;
  filter: drop-shadow(0 0 3px rgba(0,
      237,
      255,
      0.3))
}

.icon-button {
  display: grid;
  place-items: center
}

.info-icon {
  display: grid;
  place-items: center;
  width: 27%;
  height: 41.5%;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: Georgia,
    serif;
  font-size: clamp(7.8px,
      1.3cqw,
      18.2px);
  font-weight: 700;
  line-height: 1
}

.menu-icon,
.search-icon {
  position: relative;
  display: block;
  width: 27%;
  height: 36%
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor
}

.menu-icon {
  height: 2px;
  background: currentColor
}

.menu-icon::before {
  top: -6px
}

.menu-icon::after {
  top: 6px
}

.search-icon {
  width: 25%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%
}

.search-icon::after {
  content: "";
  position: absolute;
  width: 55%;
  border-top: 2px solid currentColor;
  right: -42%;
  bottom: -20%;
  transform: rotate(48deg);
  transform-origin: left center
}

.star-icon {
  font-size: clamp(10.5px,
      1.88cqw,
      28px);
  line-height: 1
}

.preset-number {
  font-size: clamp(10.2px,
      1.78cqw,
      25px);
  font-weight: 700;
  transform-origin: center
}

.preset-number.saved {
  color: #00fcff
}

.preset-number.selected,
.preset-number.selected:hover,
.preset-number.selected:focus-visible {
  transform: translateY(2px) scale(0.94);
  filter: brightness(0.72) saturate(1.2);
  color: #9ffcff;
  text-shadow: 0 0 4px #00dce8
}

.mobile-presets-content {
  height: calc(100% - 56px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4%;
  padding: 5% 6%
}

.mobile-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4%;
  min-height: 0
}

.mobile-presets-hint {
  margin: 0;
  color: #00f5ff;
  font-size: clamp(9px,
      1.05cqw,
      14px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 0 7px rgba(0,
      237,
      255,
      0.55);
  text-transform: uppercase
}

.mobile-preset-action,
.mobile-preset-number {
  width: 100%;
  min-height: 0;
  border-radius: 10px;
  font-size: clamp(12px,
      1.9cqw,
      24px)
}

.hint {
  height: 20px;
  margin: 0;
  color: rgba(182,
      218,
      255,
      0.58);
  text-align: center;
  font-size: clamp(10.5px,
      1cqw,
      14.5px);
  letter-spacing: 0
}

.site-footer {
  container-type: inline-size;
  min-height: 30px;
  display: grid;
  place-items: center;
  gap: 0.85em;
  padding: 14px 16px;
  border-top: 1px solid rgba(39,
      209,
      255,
      0.18);
  color: rgba(186,
      202,
      230,
      0.6);
  background: rgba(3,
      2,
      15,
      0.72);
  font-size: clamp(10.5px,
      0.9cqw,
      13.5px);
  text-align: center;
  text-shadow: 0 0 6px rgba(255,
      48,
      214,
      0.28)
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em 1em;
  font-family: "Courier New",
    monospace;
  font-size: clamp(9px,
      0.85cqw,
      12px);
  font-weight: 700;
  text-transform: uppercase
}

.footer-nav a {
  color: rgba(0,
      251,
      255,
      0.72);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(0,
      255,
      255,
      0.42)
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #ffb7f0;
  outline: none;
  text-shadow: 0 0 8px rgba(255,
      66,
      223,
      0.72)
}

.site-footer p {
  margin: 0
}

.mobile-footer-support {
  display: none
}

.mobile-bottom-brand {
  display: none
}

@media (max-width:620px) {
  .main-header {
    flex-wrap: wrap;
    padding: 10px 12px
  }

  .header-ad-placeholder {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    min-height: 38px
  }

  .header-media-controls {
    order: 2;
    margin: 0;
    max-width: none;
    flex: 1 1 100%;
    justify-content: center;
    height: 38px;
    padding: 4px 5px
  }

  .header-media-button {
    width: 28px;
    height: 28px
  }

  .header-play-button {
    width: 32px
  }

  .header-track-stack {
    flex: 1 1 auto;
    width: auto;
    max-width: none
  }

  .main-nav {
    right: 0;
    width: calc(100vw - 24px)
  }

  .main-nav a {
    min-height: 30px;
    padding: 0 9px
  }

  .radio-stage {
    min-height: auto;
    padding: 4px
  }

  .radio {
    width: calc(100vw - 8px)
  }

  .display {
    padding: 1.4% 2%
  }

  .signal {
    gap: 1px
  }

  .radio-button {
    border-radius: 3px
  }

  .info-icon,
  .search-icon {
    border-width: 1px
  }

  .menu-icon,
  .menu-icon::before,
  .menu-icon::after,
  .search-icon::after {
    border-top-width: 1px
  }

  .hint {
    display: none
  }
}

@media (max-width:1100px),
(max-height:520px) {
  .radio-stage,
  .content-page {
    grid-template-columns: minmax(0,
        1448px)
  }

  .ad-rail {
    display: none
  }
}

@media (max-width:700px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden
  }

  body {
    --mobile-header-height: clamp(46px,
        7.4svh,
        58px);
    --mobile-footer-height: clamp(46px,
        7.6svh,
        60px);
    background:
      radial-gradient(circle at 50% -10%,
        rgba(22,
          38,
          108,
          0.78),
        transparent 42%),
      #050c2d
  }

  .main-header {
    min-height: 0;
    height: var(--mobile-header-height);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    padding: 6px 14px;
    border-bottom: 0;
    background: transparent
  }

  .main-header::before,
  .header-media-controls {
    display: none
  }

  .main-header-brand {
    display: flex
  }

  .main-header-brand img {
    width: clamp(132px,
        38vw,
        172px);
    max-height: calc(var(--mobile-header-height) - 12px)
  }

  .mobile-presets-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(76px,
        22vw,
        92px);
    height: clamp(34px,
        8.8vw,
        42px);
    margin-left: auto;
    margin-right: 10px;
    border: 1px solid rgba(244,
        76,
        221,
        0.68);
    border-radius: 10px;
    background: linear-gradient(180deg,
        rgba(28,
          25,
          78,
          0.96),
        rgba(10,
          8,
          35,
          0.98));
    color: #fff3ff;
    font-family: inherit;
    font-size: clamp(12px,
        3.3vw,
        15px);
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 7px rgba(244,
        76,
        221,
        0.9);
    box-shadow:
      inset 0 0 12px rgba(0,
        237,
        255,
        0.12),
      0 0 9px rgba(244,
        76,
        221,
        0.35)
  }

  .mobile-presets-button[aria-expanded="true"],
  .mobile-presets-button:hover,
  .mobile-presets-button:focus-visible {
    color: #00f5ff;
    border-color: rgba(0,
        237,
        255,
        0.88);
    outline: none
  }

  .main-menu {
    display: block;
    margin-left: 0
  }

  .main-menu-toggle {
    width: clamp(38px,
        10vw,
        44px)
  }

  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-header-height);
    width: 100vw;
    gap: 10px;
    padding: 12px 14px;
    border-left: 0;
    border-right: 0;
    border-radius: 0
  }

  .main-nav a {
    min-height: 42px;
    font-size: clamp(13px,
        3.8vw,
        16px)
  }

  .radio-stage {
    --mobile-stage-pad: clamp(8px,
        2.1svh,
        18px);
    --mobile-stage-gap: clamp(8px,
        2.4svh,
        22px);
    --mobile-logo-height: clamp(46px,
        7.8svh,
        66px);
    --mobile-display-height: clamp(150px,
        30svh,
        220px);
    --mobile-control-height: clamp(38px,
        6.4svh,
        52px);
    --mobile-control-gap: clamp(10px,
        2.1svh,
        22px);
    --mobile-dial-size: clamp(82px,
        14.8svh,
        122px);
    height: calc(100svh - var(--mobile-header-height) - var(--mobile-footer-height));
    min-height: calc(100svh - var(--mobile-header-height) - var(--mobile-footer-height));
    display: grid;
    grid-template-columns: minmax(0,
        1fr);
    grid-template-rows: minmax(0,
        1fr);
    justify-items: center;
    gap: var(--mobile-stage-gap);
    overflow: hidden;
    padding: max(var(--mobile-stage-pad),
        env(safe-area-inset-top)) 18px max(var(--mobile-stage-pad),
        env(safe-area-inset-bottom))
  }

  .homepage-content {
    grid-template-columns: minmax(0,
        1fr);
    justify-items: center;
    padding: 28px 18px 34px
  }

  .homepage-main-sections {
    width: min(100%,
        430px)
  }

  .homepage-about {
    width: 100%
  }

  .homepage-about-panel {
    width: 100%
  }

  .homepage-about-logo {
    width: min(300px,
        86%)
  }

  .homepage-top-stations {
    display: none
  }

  .retroradio-top-played-shortcode.homepage-top-stations {
    display: grid
  }

  .retroradio-top-played-shortcode .homepage-top-stations-panel {
    height: min(520px,
        calc(100svh - 120px));
    min-height: 360px
  }

  .retroradio-top-played-shortcode[style*="--retroradio-top-stations-mobile-rows"] .homepage-top-stations-panel {
    height: calc(var(--retroradio-top-stations-header-height) + (var(--retroradio-top-stations-row-height) * var(--retroradio-top-stations-mobile-rows)));
    min-height: 0
  }

  .retroradio-top-played-shortcode[style*="--retroradio-top-stations-mobile-rows"] .homepage-top-stations-list {
    height: calc(var(--retroradio-top-stations-row-height) * var(--retroradio-top-stations-mobile-rows))
  }

  .retroradio-account-panel {
    width: min(100% - 24px,
        430px);
    padding: 22px 16px
  }

  .retroradio-account-summary {
    grid-template-columns: minmax(0,
        1fr)
  }

  .retroradio-account-field-grid {
    grid-template-columns: minmax(0,
        1fr)
  }

  .retroradio-account-preset {
    grid-template-columns: minmax(0,
        1fr);
    gap: 10px
  }

  .retroradio-account-preset-play {
    grid-template-columns: 38px minmax(0,
        1fr);
    gap: 10px
  }

  .retroradio-account-preset-number {
    width: 38px
  }

  .retroradio-account-preset-actions {
    grid-column: 1;
    justify-content: flex-start
  }

  .about-ad-rail,
  .homepage-side-rail {
    display: none
  }

  .homepage-top-stations-header {
    padding: 18px
  }

  .homepage-top-stations-list {
    grid-template-columns: minmax(0,
        1fr)
  }

  .homepage-top-station:nth-child(odd) {
    border-right: 0
  }

  .homepage-top-station {
    grid-template-columns: 32px 42px minmax(0,
        1fr);
    gap: 0.7rem;
    padding: 11px 14px
  }

  .radio-column {
    width: min(100%,
        430px);
    height: 100%;
    min-height: 0;
    display: block;
    justify-items: stretch
  }

  .radio {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0,
        1fr) minmax(112px,
        42%) minmax(0,
        1fr);
    grid-template-areas:
      "display display display"
      "main dial presets"
      "station station station";
    grid-template-rows: var(--mobile-display-height) var(--mobile-dial-size) minmax(0,
        1fr);
    gap: var(--mobile-stage-gap) 14px;
    align-items: center
  }

  .radio-body,
  .speaker-list-trigger,
  .speaker-list-button,
  .dial-label,
  .discover-label,
  .preset-label,
  .volume-dial,
  .broadcaster-support {
    display: none
  }

  .display {
    grid-area: display;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: var(--mobile-display-height);
    min-height: 0;
    padding: 26px 26px 30px;
    overflow: hidden;
    border: 3px solid #00ecff;
    border-radius: 10px;
    background:
      linear-gradient(180deg,
        rgba(0,
          4,
          10,
          0.96),
        rgba(0,
          2,
          8,
          0.98));
    box-shadow:
      0 0 0 7px rgba(29,
        45,
        154,
        0.72),
      0 0 22px rgba(0,
        238,
        255,
        0.62),
      inset 0 0 18px rgba(0,
        238,
        255,
        0.36);
    container-type: inline-size
  }

  .display-top {
    font-size: clamp(28px,
        11cqw,
        44px);
    align-items: start
  }

  .display-station-icon {
    width: clamp(44px,
        16cqw,
        66px);
    border-width: 2px;
    border-radius: 6px
  }

  .signal {
    gap: 6px;
    height: 1.35em
  }

  .signal i {
    width: clamp(5px,
        1.7cqw,
        8px)
  }

  .station-website-row {
    margin-top: 28px;
    align-items: start;
    gap: 0.8em
  }

  .station-name {
    font-size: clamp(34px,
        13cqw,
        52px);
    line-height: 0.9
  }

  .visit-website-hint {
    padding-top: 0.24em;
    font-size: clamp(13px,
        4.5cqw,
        18px);
    line-height: 0.86
  }

  .now-label,
  .track-row {
    font-size: clamp(24px,
        8.5cqw,
        36px);
    line-height: 1.12
  }

  .now-label {
    margin-top: 30px
  }

  .track-row {
    margin-top: 14px
  }

  .track {
    white-space: normal
  }

  .display-message {
    inset: 0;
    font-size: clamp(18px,
        6cqw,
        28px)
  }

  .main-controls {
    grid-column: 1 / 4;
    grid-row: 2;
    position: static;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0,
        1fr) minmax(112px,
        42%) minmax(0,
        1fr);
    grid-template-rows: var(--mobile-control-height) var(--mobile-control-height);
    grid-template-areas:
      "left-top spacer right-top"
      "left-bottom spacer right-bottom";
    gap: var(--mobile-control-gap) 14px;
    align-content: center;
    align-self: stretch;
    pointer-events: none
  }

  .main-controls .radio-button {
    display: none
  }

  .main-controls .vibe-search-button,
  .main-controls .genre-button,
  .main-controls .random-button,
  .main-controls .deep-search-button {
    width: 100%;
    display: flex;
    justify-self: stretch;
    pointer-events: auto
  }

  .vibe-search-button {
    grid-area: left-top
  }

  .genre-button {
    grid-area: left-bottom
  }

  .random-button {
    grid-area: right-top
  }

  .top-button {
    grid-area: right-bottom
  }

  .deep-search-button {
    grid-area: right-bottom
  }

  .preset-controls {
    grid-area: presets;
    position: static;
    width: 100%;
    height: auto;
    display: none
  }

  .radio-button {
    min-height: var(--mobile-control-height);
    border-radius: 10px;
    font-size: clamp(12px,
        3.8vw,
        17px);
    line-height: 0.95;
    box-shadow:
      0 0 0 2px rgba(111,
        178,
        255,
        0.78),
      0 0 10px rgba(255,
        66,
        223,
        0.65)
  }

  .top-button,
  .random-button,
  .vibe-search-button,
  .genre-button,
  .deep-search-button,
  .save-button,
  .clear-button {
    gap: 0.34em;
    font-size: clamp(12px,
        3.8vw,
        17px);
    line-height: 0.88
  }

  .tune-dial {
    grid-area: dial;
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: min(100%,
        var(--mobile-dial-size));
    justify-self: center;
    aspect-ratio: 1
  }

  .tune-dial::before,
  .tune-dial::after {
    position: absolute;
    bottom: 8%;
    color: #f466e7;
    font-size: clamp(18px,
        5vw,
        26px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255,
        66,
        223,
        0.9)
  }

  .tune-dial::before {
    content: "-";
    left: -12%
  }

  .tune-dial::after {
    content: "+";
    right: -12%
  }

  .station-list-panel {
    grid-area: station;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-width: 3px;
    border-radius: 10px;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    box-shadow:
      0 0 20px rgba(255,
        66,
        223,
        0.72),
      inset 0 0 22px rgba(82,
        0,
        170,
        0.65)
  }

  .station-list-panel[hidden] {
    display: none
  }

  .genre-list-panel,
  .country-list-panel,
  .vibe-search-panel,
  .search-panel {
    position: fixed;
    z-index: 30;
    left: 16px;
    right: 16px;
    top: var(--mobile-popup-top,
        calc(var(--mobile-header-height) + 220px));
    bottom: max(16px,
        env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    border-radius: 10px
  }

  .presets-panel {
    position: fixed;
    z-index: 35;
    top: var(--mobile-presets-top,
        calc(var(--mobile-header-height) + 6px));
    right: var(--mobile-presets-right,
        72px);
    left: auto;
    bottom: auto;
    width: min(320px,
        calc(100vw - var(--mobile-presets-right, 72px) - 14px));
    height: auto !important;
    max-height: none;
    border-width: 2px;
    border-radius: 10px;
    overflow: hidden
  }

  .presets-panel .station-list-header {
    height: 52px;
    padding: 11px 16px 8px
  }

  .presets-panel .popup-nav {
    display: none
  }

  .station-list-header {
    height: 56px;
    padding: 12px 23px 8px
  }

  .station-list-header span {
    font-size: clamp(18px,
        5.5vw,
        24px);
    line-height: 0.95
  }

  .station-list-header small {
    font-size: clamp(12px,
        3.5vw,
        15px)
  }

  .popup-nav-button,
  .station-list-close {
    width: 34px;
    font-size: 21px
  }

  .station-list {
    height: calc(100% - 56px);
    padding: 7px 16px 12px
  }

  .search-form {
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 10px 16px 14px
  }

  .search-field,
  .search-control-group {
    gap: 5px
  }

  .search-control-group span,
  .search-field span {
    font-size: clamp(13px,
        3.8vw,
        16px)
  }

  .search-field input {
    min-height: 42px;
    padding: 0.55em 0.7em;
    font-size: clamp(16px,
        4.6vw,
        20px)
  }

  .search-type,
  .search-sort {
    gap: 8px
  }

  .search-type-button,
  .search-sort-button {
    min-height: 43px;
    padding: 0.45em 0.5em;
    font-size: clamp(14px,
        4.1vw,
        18px)
  }

  .country-search-list {
    flex: 1 1 auto;
    min-height: 96px;
    max-height: 180px
  }

  .country-search-list[hidden] {
    display: none
  }

  .search-submit {
    width: min(72%,
        280px);
    min-height: 43px;
    align-self: center;
    padding: 0.45em 0.8em;
    font-size: clamp(15px,
        4.6vw,
        21px)
  }

  .mobile-presets-content {
    height: auto !important;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 10px 12px 12px
  }

  .mobile-presets-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
  }

  .mobile-presets-grid {
    gap: 8px
  }

  .mobile-presets-hint {
    font-size: clamp(11px,
        3.1vw,
        13px)
  }

  .mobile-preset-action,
  .mobile-preset-number {
    min-height: 44px
  }

  .mobile-preset-action {
    font-size: clamp(14px,
        3.6vw,
        17px)
  }

  .mobile-preset-number {
    font-size: clamp(16px,
        4.7vw,
        22px)
  }

  .mobile-preset-number {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0.35em 0.6em;
    text-align: left
  }

  .mobile-preset-index {
    color: #fff3ff;
    font-size: clamp(15px,
        4.1vw,
        18px);
    line-height: 1
  }

  .mobile-preset-station {
    overflow: hidden;
    color: rgba(223,
        252,
        255,
        0.82);
    font-size: clamp(10px,
        3vw,
        13px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .mobile-preset-number.saved .mobile-preset-station {
    color: #00f5ff
  }

  .mobile-preset-action {
    line-height: 0.9
  }

  .genre-filter {
    height: 88px;
    padding: 10px 23px
  }

  .deep-search-filter {
    flex: 0 0 88px;
    margin: 0 -16px;
    padding: 10px 23px
  }

  .genre-filter .search-field {
    gap: 5px
  }

  .genre-filter .search-field span {
    font-size: clamp(13px,
        3.8vw,
        16px)
  }

  .genre-filter .search-field input {
    min-height: 42px;
    font-size: clamp(16px,
        4.6vw,
        20px)
  }

  .genre-country-search-list .country-search-name {
    font-size: clamp(14px,
        4.1vw,
        18px)
  }

  .genre-country-search-list .country-search-meta,
  .genre-country-search-list .country-search-empty {
    font-size: clamp(11px,
        3.2vw,
        14px)
  }

  .genre-country-search-list {
    left: 23px;
    right: 23px;
    max-height: min(230px,
        48svh)
  }

  .genre-list-panel .station-list {
    height: calc(100% - 144px);
    padding-top: 7px
  }

  .vibe-search-form {
    height: calc(100% - 144px);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 7px 16px 12px
  }

  .vibe-search-heading {
    display: none
  }

  .vibe-chip-grid {
    padding-bottom: 0
  }

  .vibe-chip {
    min-height: 43px;
    grid-template-columns: 34px minmax(0,
        1fr);
    column-gap: 9px;
    padding: 5px 7px;
    font-size: clamp(15px,
        4.6vw,
        21px)
  }

  .vibe-chip-icon {
    width: 100%
  }

  .more-vibes-button {
    height: 43px;
    margin-top: 0;
    font-size: clamp(15px,
        4.6vw,
        21px)
  }

  .station-list-more {
    position: static;
    transform: none;
    height: 43px;
    margin: 8px auto 0;
    font-size: clamp(15px,
        4.6vw,
        21px)
  }

  .station-list-item {
    min-height: 43px;
    padding: 5px 7px;
    gap: 5px
  }

  .station-list-item.has-icon {
    grid-template-columns: 34px minmax(0,
        1fr);
    column-gap: 9px
  }

  .station-list-item-icon {
    border-radius: 6px
  }

  .station-list-item-name {
    font-size: clamp(15px,
        4.6vw,
        21px);
    line-height: 1
  }

  .station-list-item-meta {
    font-size: clamp(10px,
        3.1vw,
        14px);
    line-height: 1.04
  }

  .mobile-bottom-brand {
    display: none
  }

  .mobile-bottom-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255,
          66,
          223,
          0.7))
  }

  .site-footer {
    min-height: 0;
    height: var(--mobile-footer-height);
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 2px;
    padding: 5px 18px max(5px,
        env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,
        237,
        255,
        0.18);
    background: rgba(3,
        2,
        18,
        0.8)
  }

  .footer-nav {
    display: none
  }

  .mobile-footer-support {
    max-width: 430px;
    display: block;
    color: #00f7f3;
    font-size: clamp(10px,
        2.9vw,
        12.5px);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 0 7px rgba(0,
        255,
        255,
        0.58)
  }

  .footer-copyright {
    display: block;
    color: rgba(233,
        251,
        255,
        0.58);
    font-size: clamp(9.5px,
        2.6vw,
        12px);
    line-height: 1;
    text-shadow: 0 0 5px rgba(255,
        66,
        223,
        0.42)
  }
}

@media (max-width:360px) {
  .radio {
    grid-template-columns: minmax(0,
        1fr) minmax(104px,
        39%) minmax(0,
        1fr);
    gap: 20px 10px
  }

  .radio-button,
  .top-button,
  .random-button,
  .save-button,
  .clear-button {
    min-height: 62px;
    font-size: clamp(15px,
        4.8vw,
        17px)
  }

  .station-list-item.has-icon {
    grid-template-columns: 56px minmax(0,
        1fr);
    column-gap: 14px
  }
}

@media (max-width:700px) and (max-height:760px) {
  body {
    --mobile-header-height: 42px;
    --mobile-footer-height: 42px
  }

  .main-header {
    padding: 4px 12px
  }

  .radio-stage {
    --mobile-stage-pad: 8px;
    --mobile-stage-gap: 8px;
    --mobile-logo-height: clamp(40px,
        7svh,
        50px);
    --mobile-display-height: clamp(132px,
        27svh,
        180px);
    --mobile-control-height: clamp(32px,
        5.4svh,
        38px);
    --mobile-control-gap: clamp(8px,
        1.6svh,
        10px);
    --mobile-dial-size: clamp(68px,
        12.2svh,
        82px);
    align-content: start;
    padding-left: 14px;
    padding-right: 14px
  }

  .radio-column {
    width: min(100%,
        380px)
  }

  .radio {
    grid-template-columns: minmax(0,
        1fr) minmax(var(--mobile-dial-size),
        36%) minmax(0,
        1fr);
    gap: 10px 10px
  }

  .display {
    min-height: 0;
    padding: 13px 15px 15px;
    border-width: 2px;
    border-radius: 10px;
    box-shadow:
      0 0 0 4px rgba(29,
        45,
        154,
        0.72),
      0 0 14px rgba(0,
        238,
        255,
        0.52),
      inset 0 0 14px rgba(0,
        238,
        255,
        0.28)
  }

  .display-top {
    font-size: clamp(21px,
        8.4cqw,
        32px)
  }

  .display-station-icon {
    width: clamp(34px,
        12cqw,
        46px)
  }

  .signal {
    gap: 4px
  }

  .signal i {
    width: clamp(4px,
        1.2cqw,
        6px)
  }

  .station-website-row {
    margin-top: 15px;
    gap: 0.5em
  }

  .station-name {
    font-size: clamp(23px,
        9.2cqw,
        34px)
  }

  .visit-website-hint {
    font-size: clamp(10px,
        3.5cqw,
        13px)
  }

  .now-label,
  .track-row {
    font-size: clamp(17px,
        6.1cqw,
        23px);
    line-height: 1.08
  }

  .now-label {
    margin-top: 16px
  }

  .track-row {
    margin-top: 7px
  }

  .main-controls,
  .preset-controls {
    grid-template-columns: minmax(0,
        1fr) minmax(var(--mobile-dial-size),
        36%) minmax(0,
        1fr);
    grid-template-rows: var(--mobile-control-height) var(--mobile-control-height);
    gap: 10px
  }

  .radio-button,
  .top-button,
  .random-button,
  .genre-button,
  .vibe-search-button,
  .deep-search-button,
  .save-button,
  .clear-button {
    min-height: var(--mobile-control-height);
    border-radius: 8px;
    font-size: clamp(10px,
        3.1vw,
        13px)
  }

  .tune-dial {
    width: min(100%,
        var(--mobile-dial-size))
  }

  .tune-dial::before,
  .tune-dial::after {
    bottom: 5%;
    font-size: clamp(15px,
        4vw,
        19px)
  }

  .station-list-panel {
    height: 100%;
    min-height: 0;
    border-width: 2px;
    border-radius: 10px
  }

  .station-list-header {
    height: 38px;
    padding: 8px 15px 4px
  }

  .station-list-header span {
    font-size: clamp(16px,
        5vw,
        20px)
  }

  .station-list-header small {
    font-size: clamp(10px,
        3vw,
        12px)
  }

  .popup-nav {
    gap: 0.18em
  }

  .popup-nav-button,
  .station-list-close {
    width: 28px;
    font-size: 17px
  }

  .station-list {
    height: calc(100% - 38px);
    padding: 5px 10px 8px
  }

  .search-form {
    height: calc(100% - 38px);
    gap: 7px;
    padding: 7px 10px 10px
  }

  .search-control-group span,
  .search-field span {
    font-size: clamp(11px,
        3.3vw,
        13px)
  }

  .search-field input {
    min-height: 36px;
    font-size: clamp(14px,
        4vw,
        17px)
  }

  .search-type,
  .search-sort {
    gap: 6px
  }

  .search-type-button,
  .search-sort-button {
    min-height: 37px;
    font-size: clamp(12px,
        3.5vw,
        15px)
  }

  .country-search-list {
    min-height: 76px;
    max-height: 140px
  }

  .search-submit {
    min-height: 37px;
    font-size: clamp(13px,
        4vw,
        17px)
  }

  .mobile-presets-content {
    height: auto;
    gap: 5px;
    padding: 7px 9px 9px
  }

  .mobile-presets-actions {
    gap: 6px
  }

  .mobile-presets-grid {
    gap: 6px
  }

  .mobile-presets-hint {
    font-size: clamp(9px,
        2.6vw,
        11px)
  }

  .mobile-preset-action,
  .mobile-preset-number {
    min-height: 34px
  }

  .mobile-preset-action {
    font-size: clamp(11px,
        3vw,
        13px)
  }

  .mobile-preset-number {
    font-size: clamp(13px,
        3.8vw,
        17px)
  }

  .mobile-preset-number {
    gap: 6px;
    padding: 0.3em 0.5em
  }

  .mobile-preset-index {
    font-size: clamp(13px,
        3.6vw,
        16px)
  }

  .mobile-preset-station {
    font-size: clamp(9px,
        2.7vw,
        11px)
  }

  .genre-filter {
    height: 74px;
    padding: 7px 15px
  }

  .deep-search-filter {
    flex-basis: 74px;
    margin: 0 -10px;
    padding: 7px 15px
  }

  .genre-filter .search-field {
    gap: 4px
  }

  .genre-filter .search-field span {
    font-size: clamp(11px,
        3.3vw,
        13px)
  }

  .genre-filter .search-field input {
    min-height: 36px;
    font-size: clamp(14px,
        4vw,
        17px)
  }

  .genre-country-search-list .country-search-name {
    font-size: clamp(13px,
        3.7vw,
        16px)
  }

  .genre-country-search-list .country-search-meta,
  .genre-country-search-list .country-search-empty {
    font-size: clamp(10px,
        2.9vw,
        12px)
  }

  .genre-country-search-list {
    left: 15px;
    right: 15px;
    max-height: min(200px,
        46svh)
  }

  .genre-list-panel .station-list {
    height: calc(100% - 112px);
    padding-top: 5px
  }

  .vibe-search-form {
    height: calc(100% - 112px);
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    padding: 5px 10px 8px
  }

  .vibe-chip-grid {
    padding-bottom: 0
  }

  .vibe-chip {
    min-height: 37px;
    grid-template-columns: 28px minmax(0,
        1fr);
    column-gap: 7px;
    padding: 4px 5px;
    font-size: clamp(13px,
        4vw,
        17px)
  }

  .more-vibes-button {
    height: 37px;
    margin-top: 0;
    font-size: clamp(13px,
        4vw,
        17px)
  }

  .station-list-more {
    height: 37px;
    margin-top: 6px;
    font-size: clamp(13px,
        4vw,
        17px)
  }

  .station-list-item {
    min-height: 37px;
    padding: 4px 5px;
    gap: 4px
  }

  .station-list-item.has-icon {
    grid-template-columns: 28px minmax(0,
        1fr);
    column-gap: 7px
  }

  .station-list-item-name {
    font-size: clamp(13px,
        4vw,
        17px);
    line-height: 1
  }

  .station-list-item-meta {
    font-size: clamp(9px,
        2.8vw,
        12px);
    line-height: 1.04
  }

  .genre-list-panel,
  .country-list-panel,
  .vibe-search-panel,
  .search-panel {
    height: auto
  }

  .presets-panel {
    height: auto !important;
    max-height: none
  }

  .presets-panel .station-list-header {
    height: 42px;
    padding: 8px 12px 6px
  }

  .mobile-bottom-brand {
    width: min(48vw,
        180px)
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important
  }
}


/* WordPress plugin containment adjustments. */
.retroradio-player-shell {
  width: 100%;
  min-height: auto;
  isolation: isolate;
}

.retroradio-player-shell .radio-stage,
.retroradio-player-shell.radio-stage {
  width: 100%;
}

.retroradio-player-shell .ad-rail-left {
  display: none;
}

.retroradio-player-shell .radio-column {
  min-width: 0;
}

body:not(.home) .retroradio-player-shell {
  margin: 0 auto;
}

.retroradio-account-panel form.retroradio-account-form {
  display: grid !important;
  gap: 14px !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid rgba(0, 237, 255, 0.42) !important;
  border-radius: 6px !important;
  background: rgba(9, 5, 32, 0.68) !important;
  box-shadow:
    inset 0 0 18px rgba(0, 237, 255, 0.08),
    0 0 12px rgba(0, 237, 255, 0.08) !important;
}

.retroradio-account-panel .retroradio-account-form label:not(.retroradio-account-checkbox) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  color: #d687ef !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.retroradio-account-panel .retroradio-account-form input[type="email"],
.retroradio-account-panel .retroradio-account-form input[type="password"],
.retroradio-account-panel .retroradio-account-form input[type="text"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(0, 237, 255, 0.62) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(1, 11, 24, 0.96), rgba(12, 5, 38, 0.94)) !important;
  color: #f2feff !important;
  caret-color: #00f7f3 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.22) !important;
  text-transform: none !important;
  box-shadow:
    inset 0 0 14px rgba(0, 237, 255, 0.12),
    0 0 10px rgba(0, 237, 255, 0.12) !important;
}

.retroradio-account-panel .retroradio-account-form input[type="email"]:focus,
.retroradio-account-panel .retroradio-account-form input[type="password"]:focus,
.retroradio-account-panel .retroradio-account-form input[type="text"]:focus,
.retroradio-account-panel .retroradio-account-form input[type="email"]:focus-visible,
.retroradio-account-panel .retroradio-account-form input[type="password"]:focus-visible,
.retroradio-account-panel .retroradio-account-form input[type="text"]:focus-visible {
  border-color: rgba(244, 76, 221, 0.82) !important;
  outline: none !important;
  box-shadow:
    inset 0 0 16px rgba(244, 76, 221, 0.14),
    0 0 14px rgba(244, 76, 221, 0.24) !important;
}

.retroradio-account-panel .retroradio-account-field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.retroradio-account-panel .retroradio-account-inline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.retroradio-account-panel .retroradio-account-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width:700px) {
  .retroradio-account-panel .retroradio-account-field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}