:root {
      --bg: #080909;
      --text: #f5f3ed;
      --muted: rgba(255,255,255,.55);
      --accent: #e9ff47;
      --line: rgba(255,255,255,.12);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) rgba(255,255,255,.06);
    }

    /* Embedded inside /home/radio's iframe — the dashboard already has its
       own topbar/sidebar/footer, so this page's own chrome is redundant. */
    html.is-embedded .radio-strip,
    html.is-embedded .navbar,
    html.is-embedded .site-footer {
      display: none;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      overflow-x: hidden;

      -webkit-user-select: none;
      user-select: none;
    }

    input, textarea {
      -webkit-user-select: text;
      user-select: text;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255,255,255,.06);
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--accent), rgba(233,255,71,.5));
      border-radius: 10px;
      border: 2px solid var(--bg);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
      transition-delay: calc(var(--reveal-i, 0) * 60ms);
    }

    .reveal.in-view {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal.in-view {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    a { color: inherit; }

    button, input { font: inherit; }

    button { -webkit-tap-highlight-color: transparent; }

    /* =====================================
       PLAYER VISUAL STAGE (vinyl + per-track bg)
    ====================================== */

    .visual-stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .backgrounds {
      position: absolute;
      inset: 0;
    }

    .background {
      position: absolute;
      inset: -30px;

      background-size: cover;
      background-position: center;

      opacity: 0;
      transform: scale(1.08);

      will-change: transform, opacity;
      backface-visibility: hidden;

      transition: opacity 1.2s ease;
    }

    .background.active {
      opacity: 1;
      animation: heroDrift 26s ease-in-out infinite;
    }

    @keyframes heroDrift {
      0%   { transform: scale(1.08) translate(0,0); }
      25%  { transform: scale(1.16) translate(-3%,2%); }
      50%  { transform: scale(1.1) translate(2.5%,-2%); }
      75%  { transform: scale(1.2) translate(-1.5%,-2.5%); }
      100% { transform: scale(1.08) translate(0,0); }
    }

    .visual-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;

      background: linear-gradient(90deg,
        rgba(4,5,5,.98) 0%, rgba(4,5,5,.94) 28%,
        rgba(4,5,5,.64) 52%, rgba(4,5,5,.16) 100%);
    }

    .visual-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;

      background: radial-gradient(ellipse at center,
        transparent 15%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.82) 115%);
    }

    /* =====================================
       VINYL
    ====================================== */

    .vinyl-wrapper {
      position: absolute;
      width: min(75vw, 1050px);
      aspect-ratio: 1;
      right: -7vw;
      top: 18vh;
      z-index: 5;
      transform-origin: center;
    }

    .vinyl-wrapper.record-exit {
      animation: recordExit .75s cubic-bezier(.77,0,.18,1) forwards;
    }

    .vinyl-wrapper.record-enter {
      animation: recordEnter .9s cubic-bezier(.16,1,.3,1) forwards;
    }

    @keyframes recordExit {
      from { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; }
      to   { transform: translate3d(30vw,30vh,0) rotate(30deg) scale(.8); opacity: 0; }
    }

    @keyframes recordEnter {
      from { transform: translate3d(30vw,-25vh,0) rotate(-25deg) scale(.8); opacity: 0; }
      to   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; }
    }

    .vinyl-shadow {
      position: absolute;
      inset: 8%;
      border-radius: 50%;
      background: #000;
      filter: blur(80px);
      opacity: .75;
      transform: translate(-30px,80px);
      z-index: -1;
    }

    .vinyl {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      overflow: hidden;

      will-change: transform;
      backface-visibility: hidden;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.04) 35deg, transparent 75deg,
          rgba(255,255,255,.18) 110deg, transparent 145deg, rgba(255,255,255,.06) 220deg,
          transparent 265deg, rgba(255,255,255,.14) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow:
        0 0 0 2px rgba(255,255,255,.14),
        0 0 0 8px rgba(0,0,0,.5),
        -70px 30px 90px rgba(0,0,0,.85),
        inset 25px 25px 80px rgba(255,255,255,.04),
        inset -50px -50px 110px rgba(0,0,0,.9);

      -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
      mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
    }

    /* =====================================
       VINYL SPLATTER TIERS
       Cosmetic-only variants keyed to a track's Community Score, applied as
       a modifier class (vinyl-tier-*) alongside .vinyl/.radio-vinyl/
       .immersive-vinyl/.latest-vinyl. Each layers a colored "splatter"
       blotch pattern over the same groove texture via ::before, so the
       base shape/animation/mask never has to change per tier — only this
       overlay's gradient stack and blend mode do.
       Tiers (by Community Score): 95-100 Diamond, 75-94 Gold, 50-74 Black
       Splatter (silver-on-black), 35-49 plain Black (no overlay — this is
       the default look, including tracks without enough votes yet), 0-34
       Rusty.
    ====================================== */

    /* Colored translucent base disc per tier — replaces the plain black
       groove fill (but keeps the same groove ring pattern) so the vinyl
       itself reads as a colored/translucent pressing, matching how actual
       collectible splatter vinyl is cast in a tinted base rather than
       black. Diamond/Gold/Black Splatter/Rusty each swap this; the base
       .vinyl background (plain black) still covers the default/newbie
       35-49% tier untouched. */
    .vinyl-tier-diamond,
    .vinyl-tier-gold,
    .vinyl-tier-blacksplatter,
    .vinyl-tier-rusty {
      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.10) 35deg, transparent 75deg,
          rgba(255,255,255,.28) 110deg, transparent 145deg, rgba(255,255,255,.12) 220deg,
          transparent 265deg, rgba(255,255,255,.22) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          var(--vinyl-tint-1) 0px, var(--vinyl-tint-1) 2px, var(--vinyl-tint-2) 3px,
          var(--vinyl-tint-1) 5px, var(--vinyl-tint-2) 7px, var(--vinyl-tint-3) 9px) !important;
    }

    .vinyl-tier-diamond { --vinyl-tint-1: #bfe3f7; --vinyl-tint-2: #d8eefb; --vinyl-tint-3: #9fd2ef; }
    .vinyl-tier-gold { --vinyl-tint-1: #7a5a12; --vinyl-tint-2: #a67d1e; --vinyl-tint-3: #5c4409; }
    .vinyl-tier-blacksplatter { --vinyl-tint-1: #3a3d42; --vinyl-tint-2: #55585e; --vinyl-tint-3: #24262a; }
    .vinyl-tier-rusty { --vinyl-tint-1: #7a3a14; --vinyl-tint-2: #9c4f1e; --vinyl-tint-3: #5c2a0d; }

    /* A scatter of many small ink-splatter droplets rather than a few big
       blotches — closer to how spatter actually lands on a pressing (fine
       flecks with a handful of slightly larger drops among them) than a
       handful of uniform-looking splats. Always a dark, near-opaque color
       regardless of tier (the splatter is ink dropped onto the colored
       disc, not a tinted glow), so only the base disc color above needs to
       vary per tier. Positions/sizes/opacities are hand-varied (not a
       repeating pattern) so it reads as genuinely random at a glance. */
    .vinyl-tier-diamond::before,
    .vinyl-tier-gold::before,
    .vinyl-tier-blacksplatter::before,
    .vinyl-tier-rusty::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 29% 31%, rgba(8,8,10,.95) 0 2.6%, transparent 3.4%),
        radial-gradient(circle at 34% 27%, rgba(8,8,10,.8) 0 1%, transparent 1.7%),
        radial-gradient(circle at 25% 35%, rgba(8,8,10,.7) 0 .7%, transparent 1.3%),
        radial-gradient(circle at 69% 23%, rgba(8,8,10,.9) 0 2.1%, transparent 2.9%),
        radial-gradient(circle at 74% 19%, rgba(8,8,10,.75) 0 .9%, transparent 1.5%),
        radial-gradient(circle at 65% 27%, rgba(8,8,10,.6) 0 .6%, transparent 1.1%),
        radial-gradient(circle at 75% 65%, rgba(8,8,10,.93) 0 2.8%, transparent 3.6%),
        radial-gradient(circle at 80% 71%, rgba(8,8,10,.7) 0 1%, transparent 1.6%),
        radial-gradient(circle at 70% 60%, rgba(8,8,10,.55) 0 .7%, transparent 1.2%),
        radial-gradient(circle at 31% 73%, rgba(8,8,10,.88) 0 2.3%, transparent 3.1%),
        radial-gradient(circle at 26% 79%, rgba(8,8,10,.65) 0 .8%, transparent 1.4%),
        radial-gradient(circle at 37% 68%, rgba(8,8,10,.6) 0 .6%, transparent 1.1%),
        radial-gradient(circle at 50% 51%, rgba(8,8,10,.75) 0 1.3%, transparent 2%),
        radial-gradient(circle at 20% 49%, rgba(8,8,10,.85) 0 1.4%, transparent 2.1%),
        radial-gradient(circle at 16% 44%, rgba(8,8,10,.6) 0 .7%, transparent 1.2%),
        radial-gradient(circle at 12% 55%, rgba(8,8,10,.5) 0 .5%, transparent 1%),
        radial-gradient(circle at 82% 43%, rgba(8,8,10,.82) 0 1.3%, transparent 2%),
        radial-gradient(circle at 87% 37%, rgba(8,8,10,.55) 0 .6%, transparent 1.1%),
        radial-gradient(circle at 90% 48%, rgba(8,8,10,.45) 0 .45%, transparent .9%),
        radial-gradient(circle at 56% 14%, rgba(8,8,10,.78) 0 1.1%, transparent 1.8%),
        radial-gradient(circle at 61% 9%, rgba(8,8,10,.5) 0 .55%, transparent 1%),
        radial-gradient(circle at 47% 18%, rgba(8,8,10,.42) 0 .4%, transparent .8%),
        radial-gradient(circle at 44% 87%, rgba(8,8,10,.8) 0 1.2%, transparent 1.9%),
        radial-gradient(circle at 39% 92%, rgba(8,8,10,.5) 0 .5%, transparent 1%),
        radial-gradient(circle at 52% 83%, rgba(8,8,10,.4) 0 .4%, transparent .8%),
        radial-gradient(circle at 63% 61%, rgba(8,8,10,.6) 0 .7%, transparent 1.3%),
        radial-gradient(circle at 38% 39%, rgba(8,8,10,.55) 0 .6%, transparent 1.2%),
        radial-gradient(circle at 18% 24%, rgba(8,8,10,.42) 0 .4%, transparent .8%),
        radial-gradient(circle at 84% 78%, rgba(8,8,10,.5) 0 .5%, transparent 1%),
        radial-gradient(circle at 9% 68%, rgba(8,8,10,.45) 0 .45%, transparent .9%),
        radial-gradient(circle at 58% 42%, rgba(8,8,10,.4) 0 .35%, transparent .75%),
        radial-gradient(circle at 71% 84%, rgba(8,8,10,.35) 0 .35%, transparent .7%),
        radial-gradient(circle at 24% 61%, rgba(8,8,10,.38) 0 .4%, transparent .8%),
        radial-gradient(circle at 93% 62%, rgba(8,8,10,.4) 0 .35%, transparent .75%);
    }

    @keyframes vinylSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes vinylLightCounterSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }

    /* Lyrics modal vinyl has no separate non-spinning wrapper, so its light
       sheen is kept in place by counter-rotating at the same speed instead
       of being pulled out of the DOM like the other vinyl instances. */
    .lyrics-modal-vinyl .vinyl-light {
      animation: vinylLightCounterSpin 12s linear infinite;
    }

    .vinyl-grooves {
      position: absolute;
      inset: 2%;
      border-radius: 50%;
      background: repeating-radial-gradient(circle, transparent 0 4px, rgba(255,255,255,.04) 5px, transparent 6px 9px);
      mix-blend-mode: screen;
      opacity: .8;
    }

    .vinyl-light {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      background: linear-gradient(135deg,
        transparent 0%, transparent 35%, rgba(255,255,255,.03) 39%,
        rgba(255,255,255,.25) 43%, rgba(255,255,255,.05) 49%, transparent 55%);
      mix-blend-mode: screen;
    }

    .label-ring {
      position: absolute;
      width: 40%;
      aspect-ratio: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background: repeating-radial-gradient(circle, transparent 0 4px, rgba(255,255,255,.08) 5px, transparent 6px 9px);
      box-shadow: 0 0 0 10px rgba(0,0,0,.75), inset 0 0 40px rgba(0,0,0,.6);
    }

    .record-label {
      position: absolute;
      width: 31%;
      aspect-ratio: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 5;
      border-radius: 50%;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      box-shadow:
        0 0 0 2px rgba(255,255,255,.25), 0 0 0 7px rgba(0,0,0,.85),
        inset 10px 10px 30px rgba(255,255,255,.12), inset -20px -20px 45px rgba(0,0,0,.6);
    }

    .record-label::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(0,0,0,.08), rgba(0,0,0,.72));
    }

    .label-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      padding: 14%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      color: white;
      text-transform: uppercase;
      letter-spacing: .15em;
      font-size: clamp(5px,.7vw,11px);
    }

    .label-title {
      text-align: center;
      font-size: clamp(10px,1.1vw,19px);
      line-height: 1.05;
    }

    .record-hole {
      position: absolute;
      width: 8%;
      aspect-ratio: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 8;
      border-radius: 50%;
      background: transparent;
      box-shadow: 0 2px 8px rgba(0,0,0,.6), inset 2px 2px 3px rgba(255,255,255,.3);
    }

    /* =====================================
       GENRES VIEW: VISUAL BACKGROUND
    ====================================== */

    .genres-visual-stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .genres-backgrounds {
      position: absolute;
      inset: 0;
    }

    .genres-bg-layer {
      position: absolute;
      inset: -30px;

      background-size: cover;
      background-position: center;

      opacity: 0;
      filter: saturate(.6) brightness(.8);

      animation: genresHeroDrift 32s ease-in-out infinite;

      transition:
        opacity 2.4s cubic-bezier(.4,0,.2,1),
        filter 2.8s cubic-bezier(.4,0,.2,1);
    }

    .genres-bg-layer.active {
      opacity: 1;
      filter: saturate(1) brightness(1);
    }

    @keyframes genresHeroDrift {
      0%   { transform: scale(1.08) translate(0,0) rotate(0deg); }
      20%  { transform: scale(1.15) translate(-3%,2%) rotate(.3deg); }
      45%  { transform: scale(1.22) translate(2.5%,-2.5%) rotate(-.2deg); }
      70%  { transform: scale(1.13) translate(-2%,-3%) rotate(.2deg); }
      100% { transform: scale(1.08) translate(0,0) rotate(0deg); }
    }

    .genres-visual-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;

      background: linear-gradient(180deg,
        rgba(4,5,5,.72) 0%, rgba(4,5,5,.5) 38%,
        rgba(4,5,5,.62) 68%, rgba(4,5,5,.92) 100%);
    }

    .genres-visual-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;

      background: radial-gradient(ellipse at center,
        transparent 10%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.88) 118%);
    }

    /* =====================================
       PAGE CONTENT / NAVBAR
    ====================================== */

    .page-content {
      position: relative;
      z-index: 20;
      min-height: 100vh;
    }

    .hero-viewport {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 8vh;
    }

    .genres-hero {
      flex: none;
    }

    .radio-strip {
      position: sticky;
      top: 0;
      z-index: 51;

      width: 100%;
      max-height: 50px;
      overflow-x: auto;
      overflow-y: hidden;
      background: rgba(5,6,5,.92);
      border-bottom: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transition: max-height .3s ease, border-color .3s ease;
    }

    .radio-strip-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-width: max-content;
      width: 100%;
      padding: 8px 5%;
    }

    .radio-strip-brand {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      white-space: nowrap;
    }

    .navbar {
      position: sticky;
      top: 0;
      z-index: 50;

      width: 100%;
      margin: 0 auto;
      padding: 12px 5%;

      display: flex;
      align-items: center;
      justify-content: space-between;

      border-radius: 0;
      background: transparent;
      border: 1px solid transparent;

      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      box-shadow: none;

      transition:
        width .5s cubic-bezier(.16,1,.3,1),
        margin-top .5s cubic-bezier(.16,1,.3,1),
        padding .5s cubic-bezier(.16,1,.3,1),
        border-radius .5s cubic-bezier(.16,1,.3,1),
        background .5s ease,
        border-color .5s ease,
        backdrop-filter .5s ease,
        box-shadow .5s ease,
        top .3s ease;
    }

    .navbar-back {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) translateY(6px);

      display: flex;
      align-items: center;
      gap: 8px;

      padding: 9px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(8,9,9,.35);

      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .02em;
      text-decoration: none;

      opacity: 0;
      pointer-events: none;

      transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease;
    }

    .navbar-back svg {
      width: 14px;
      height: 14px;
    }

    .navbar-back.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) translateY(0);
    }

    .navbar-back:hover {
      background: rgba(8,9,9,.6);
      border-color: rgba(255,255,255,.32);
    }

    .navbar.scrolled {
      width: min(720px,92%);
      margin-top: 0;
      padding: 8px 26px;

      border-radius: 0 0 26px 26px;
      background: rgba(8,9,9,.55);
      border: 1px solid rgba(255,255,255,.14);

      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 15px 40px rgba(0,0,0,.4);
    }

    .logo {
      display: flex;
      align-items: center;

      text-decoration: none;
      color: inherit;
    }

    .logo-img {
      display: block;
      height: 32px;
      width: auto;
      image-rendering: auto;
    }

    .navbar .logo-img {
      height: 58px;
    }

    .track-count {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: .15em;
    }

    /* =====================================
       PLAYER VIEW HERO
    ====================================== */

    #view-player .hero-content {
      position: relative;

      flex: 1;
      min-height: 0;

      display: flex;
      flex-direction: column;
      justify-content: center;

      width: min(1400px,90%);
      margin: 0 auto;

      padding-top: 40px;
      padding-bottom: 40px;
    }

    #view-player .eyebrow {
      margin-bottom: 20px;
    }

    .live-lyrics {
      position: absolute;
      top: 30px;
      right: 0;
      max-width: 420px;
      z-index: 6;

      padding: 22px 26px;

      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;

      text-align: right;

      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(8,9,9,.4);

      backdrop-filter: blur(14px) saturate(1.3);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);

      box-shadow: 0 20px 45px rgba(0,0,0,.35);

      pointer-events: none;
    }

    .live-lyrics.active,
    .live-lyrics.no-lyrics { display: flex; }

    .live-lyrics.no-lyrics { align-items: center; }
    .live-lyrics.no-lyrics .live-lyrics-line,
    .live-lyrics.no-lyrics .live-lyrics-next,
    .immersive-lyrics.no-lyrics .immersive-lyrics-line,
    .immersive-lyrics.no-lyrics .immersive-lyrics-next {
      display: none;
    }

    /* =====================================
       NO-LYRICS PLACEHOLDER (shared across the music player's
       top-right lyrics box, the radio view, and the immersive view)
       A quiet "heartbeat" every 10s — two beats, each with an
       expanding shockwave ring — so the empty state doesn't feel dead
       even though there's genuinely nothing to display.
    ====================================== */

    .no-lyrics-placeholder {
      position: relative;
      display: none;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .no-lyrics .no-lyrics-placeholder { display: flex; }

    .no-lyrics-art {
      position: relative;
      z-index: 2;
      width: min(200px, 60%);
      height: auto;
      opacity: .85;
      animation: noLyricsHeartbeat 10s ease-in-out infinite;
    }

    .no-lyrics-shockwave {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      width: 40%;
      aspect-ratio: 1;

      border-radius: 50%;
      border: 1px solid rgba(233,255,71,.55);

      transform: translate(-50%,-50%) scale(0);
      opacity: 0;

      animation: noLyricsShockwave 10s ease-out infinite;
    }

    .no-lyrics-shockwave:nth-child(2) { animation-delay: .35s; }

    /* Two beats (0-8%) then a long rest until the cycle repeats at 10s. */
    @keyframes noLyricsHeartbeat {
      0%, 8%, 100% { transform: scale(1); }
      2% { transform: scale(1.12); }
      4% { transform: scale(1); }
      6% { transform: scale(1.08); }
    }

    @keyframes noLyricsShockwave {
      0% { transform: translate(-50%,-50%) scale(.6); opacity: .7; }
      8% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
      100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
    }

    .live-lyrics-label {
      display: flex;
      align-items: center;
      gap: 10px;

      font-size: 10px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .3em;
    }

    .live-lyrics-label::after {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--accent);
    }

    .live-lyrics-line {
      font-family: Georgia, serif;
      font-size: 26px;
      line-height: 1.35;
      letter-spacing: -.01em;
      color: var(--text);

      opacity: 0;
      transform: translateY(8px);

      transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
    }

    .live-lyrics-line.visible { opacity: 1; transform: translateY(0); }

    .live-lyrics-next {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255,255,255,.4);

      opacity: 0;
      transform: translateY(6px);

      transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
    }

    .live-lyrics-next.visible { opacity: 1; transform: translateY(0); }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;

      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .3em;
      font-size: 10px;
    }

    .eyebrow::before {
      content: "";
      width: 35px;
      height: 1px;
      background: var(--accent);
    }

    #view-player .track-title {
      max-width: 620px;
      font-family: Georgia,serif;
      font-size: clamp(40px,5.5vw,84px);
      font-weight: 500;
      line-height: .82;
      letter-spacing: -.06em;
    }

    .artist {
      margin-top: 25px;
      color: rgba(255,255,255,.7);
      font-size: 14px;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    #view-player .track-description {
      max-width: 420px;
      margin-top: 25px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 14px;
    }

    /* =====================================
       GENRES VIEW HERO
    ====================================== */

    .genres-hero {
      position: relative;

      width: min(1500px,90%);
      margin: 0 auto;

      padding-top: 34px;
      padding-bottom: 18px;

      opacity: 0;
      transform: translateY(16px);
      animation: heroContentIn .7s cubic-bezier(.16,1,.3,1) .15s forwards;
    }

    @keyframes heroContentIn {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .genres-hero { opacity: 1; transform: none; animation: none; }
    }

    .hero-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;

      margin-bottom: 28px;
    }

    .hero-top-row .eyebrow {
      font-size: 13px;
    }

    .genres-title-row {
      margin-bottom: 4px;
    }

    .hero-bg-caption {
      position: absolute;
      right: 0;
      bottom: -4px;

      display: flex;
      align-items: center;
      gap: 8px;

      color: var(--muted);
      text-decoration: none;
      font-size: 11px;
      letter-spacing: .02em;

      opacity: 0;
      transform: translateY(4px);

      transition: opacity .6s ease, transform .6s ease, color .3s ease;
    }

    .hero-bg-caption.visible { opacity: 1; transform: translateY(0); }
    .hero-bg-caption:hover { color: var(--text); }
    .hero-bg-caption span:first-child { color: var(--accent); font-size: 12px; }
    .hero-bg-caption strong { color: var(--text); font-weight: 500; }
    .hero-bg-caption:hover strong { color: var(--accent); }

    .all-tracks-btn {
      position: relative;

      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 12px 22px;
      border-radius: 999px;

      border: 1px solid rgba(233,255,71,.4);
      background: rgba(233,255,71,.08);

      color: var(--text);
      text-decoration: none;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      animation: pulseGlow 2.6s ease-in-out infinite;

      transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
    }

    .all-tracks-btn:hover {
      transform: translateY(-3px) scale(1.03);
      background: var(--accent);
      color: #111;
      border-color: var(--accent);
    }

    .all-tracks-btn-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(233,255,71,.8);
      transition: background .3s ease, box-shadow .3s ease;
    }

    .all-tracks-btn:hover .all-tracks-btn-dot { background: #111; box-shadow: none; }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(233,255,71,.28); }
      50% { box-shadow: 0 0 0 12px rgba(233,255,71,0); }
    }

    .genres-title-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .genre-dropdown {
      position: relative;
    }

    .genre-dropdown-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 10px 18px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);

      color: var(--text);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transition: border-color .25s ease, background .25s ease;
    }

    .genre-dropdown-btn svg {
      width: 13px;
      height: 13px;
      transition: transform .25s ease;
    }

    .genre-dropdown-btn:hover {
      border-color: rgba(233,255,71,.5);
      background: rgba(233,255,71,.08);
    }

    .genre-dropdown.open .genre-dropdown-btn svg {
      transform: rotate(180deg);
    }

    .genre-dropdown-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      z-index: 30;

      min-width: 220px;
      max-height: 320px;
      overflow-y: auto;

      padding: 8px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,9,9,.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 24px 60px rgba(0,0,0,.5);

      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;

      transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
    }

    .genre-dropdown.open .genre-dropdown-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .genre-dropdown-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      padding: 10px 12px;
      border-radius: 10px;

      color: var(--text);
      font-size: 13px;
      cursor: pointer;

      transition: background .2s ease, color .2s ease;
    }

    .genre-dropdown-option:hover {
      background: rgba(233,255,71,.12);
      color: var(--accent);
    }

    .genre-dropdown-option.disabled {
      color: rgba(255,255,255,.3);
      cursor: not-allowed;
    }

    .genre-dropdown-option.disabled:hover {
      background: none;
      color: rgba(255,255,255,.3);
    }

    .genre-dropdown-option-count {
      font-size: 10px;
      color: var(--muted);
    }

    /* These stay in the DOM (site.js binds listeners to them without
       null-checks) but are hidden from the simplified hero — [hidden]
       alone loses to their own display:flex/:inline-flex rules below. */
    .all-tracks-btn[hidden],
    .selector-dropdown-row[hidden] {
      display: none;
    }

    .genres-title {
      max-width: 900px;
      font-family: Georgia, serif;
      font-size: clamp(42px,6.4vw,84px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.03em;
    }

    /* Animated marketing copy that cycles in place of a static headline —
       each line is absolutely stacked and only one is visible at a time,
       driven purely by CSS keyframes (no JS) to match how .genres-hero
       itself is already timed off the intro animation. */
    .hero-rotator {
      position: relative;
      width: 100%;
      min-height: 2.3em;
      line-height: 1.06;
    }

    .hero-rotator-line {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      opacity: 0;
      transform: translateY(14px);

      animation: heroRotatorCycle 10s cubic-bezier(.16,1,.3,1) infinite;
    }

    .hero-rotator-line:nth-child(1) { animation-delay: 0s; }
    .hero-rotator-line:nth-child(2) { animation-delay: 2.5s; }
    .hero-rotator-line:nth-child(3) { animation-delay: 5s; }
    .hero-rotator-line:nth-child(4) { animation-delay: 7.5s; }

    @keyframes heroRotatorCycle {
      0%       { opacity: 0; transform: translateY(14px); }
      4%, 20%  { opacity: 1; transform: translateY(0); }
      26%, 100% { opacity: 0; transform: translateY(-10px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-rotator-line {
        position: static;
        opacity: 1;
        transform: none;
        animation: none;
        display: none;
      }
      .hero-rotator-line:first-child { display: block; }
    }

    .hero-signup-btn {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 16px;

      margin-top: 8px;
      padding: 19px 14px 19px 34px;
      border-radius: 999px;
      border: none;

      background: linear-gradient(155deg, #f2ff8f 0%, var(--accent) 55%, #c9e639 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -10px 16px rgba(20,21,15,.12),
        0 16px 34px rgba(197,224,40,.28);

      color: #14150f;
      text-decoration: none;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .01em;

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .hero-signup-btn:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -10px 16px rgba(20,21,15,.12),
        0 22px 44px rgba(197,224,40,.4);
    }

    .hero-signup-btn:active {
      transform: translateY(-1px);
    }

    .hero-signup-btn-text {
      position: relative;
      z-index: 1;
    }

    .hero-signup-btn-arrow {
      position: relative;
      z-index: 1;

      display: flex;
      align-items: center;
      justify-content: center;

      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;

      background: #14150f;
      color: var(--accent);

      transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
    }

    .hero-signup-btn-arrow svg {
      width: 16px;
      height: 16px;
    }

    .hero-signup-btn:hover .hero-signup-btn-arrow {
      transform: translateX(3px) rotate(-45deg);
    }

    .genres-description {
      max-width: 560px;
      margin-top: 22px;
      margin-bottom: 34px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
    }

    /* =====================================
       ARTIST CALL-TO-ACTION SECTION
    ====================================== */

    .artist-cta-section {
      position: relative;
      overflow: hidden;

      width: 100%;
      padding: 96px 6%;

      background: linear-gradient(180deg, #f8f6ef, #ece8d9);
      color: #0d0e0c;

      text-align: center;
    }

    .artist-cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;

      background: radial-gradient(ellipse at 50% 0%, rgba(233,255,71,.4), transparent 62%);
      pointer-events: none;
    }

    .artist-cta-inner {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto;
    }

    .artist-cta-eyebrow {
      justify-content: center;
      margin-bottom: 18px;
      color: #6c701c;
    }

    .artist-cta-title {
      font-family: Georgia, serif;
      font-size: clamp(24px, 2.8vw, 36px);
      font-weight: 500;
      letter-spacing: -.01em;
      line-height: 1.25;
      margin-bottom: 18px;
      color: #0d0e0c;
    }

    .artist-cta-text {
      font-size: 15px;
      line-height: 1.75;
      color: rgba(13,14,12,.62);
      margin-bottom: 34px;
    }

    .artist-cta-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .artist-cta-btn {
      position: relative;

      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 13px 26px;
      border-radius: 999px;

      border: 1px solid rgba(13,14,12,.18);
      background: rgba(13,14,12,.04);

      color: #0d0e0c;
      text-decoration: none;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;

      transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, box-shadow .3s ease;
    }

    .artist-cta-btn-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #6c701c;
      transition: background .3s ease;
    }

    .artist-cta-btn:hover {
      transform: translateY(-3px) scale(1.03);
      background: #0d0e0c;
      color: var(--text);
      box-shadow: 0 16px 40px rgba(0,0,0,.25);
    }

    .artist-cta-btn:hover .artist-cta-btn-dot {
      background: var(--accent);
    }

    .artist-cta-note {
      font-size: 11px;
      letter-spacing: .04em;
      color: rgba(13,14,12,.4);
    }

    .artist-cta-info {
      position: relative;
      margin-top: 2px;
    }

    .artist-cta-info-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;

      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid rgba(13,14,12,.18);
      background: transparent;

      color: rgba(13,14,12,.55);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      font-family: inherit;
      cursor: pointer;

      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }

    .artist-cta-info-trigger svg {
      width: 12px;
      height: 12px;
    }

    .artist-cta-info-trigger:hover,
    .artist-cta-info:hover .artist-cta-info-trigger,
    .artist-cta-info:focus-within .artist-cta-info-trigger {
      color: #0d0e0c;
      border-color: rgba(13,14,12,.35);
      background: rgba(13,14,12,.05);
    }

    .artist-cta-info-panel {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      z-index: 20;

      width: 320px;
      padding: 18px;
      padding-bottom: 26px;
      margin-bottom: -8px;
      border-radius: 16px;

      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,9,9,.94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 24px 60px rgba(0,0,0,.4);

      text-align: left;

      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
    }

    .artist-cta-info:hover .artist-cta-info-panel,
    .artist-cta-info:focus-within .artist-cta-info-panel {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .artist-cta-info-title {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    .artist-cta-info-list {
      display: flex;
      flex-direction: column;
      gap: 9px;

      list-style: none;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(245,243,237,.65);
    }

    .artist-cta-info-list li {
      position: relative;
      padding-left: 14px;
    }

    .artist-cta-info-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
    }

    .artist-cta-info-note {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.1);

      font-size: 11.5px;
      line-height: 1.6;
      color: rgba(245,243,237,.55);
    }

    .artist-cta-info-note strong {
      color: #ffcb80;
      font-weight: 700;
    }

    @media (max-width: 700px), (hover: none) {
      .artist-cta-info-panel { display: none; }
    }

    .selector-dropdown-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }

    .genre-search {
      position: relative;

      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transition: border-color .25s ease, background .25s ease;

      flex: 1 1 320px;
      min-width: 220px;
      max-width: 420px;
    }

    .genre-search:hover,
    .genre-search:focus-within {
      border-color: rgba(233,255,71,.5);
      background: rgba(233,255,71,.08);
    }

    .genre-search svg {
      width: 14px;
      height: 14px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .genre-search input {
      border: 0;
      background: none;
      outline: none;

      width: 100%;
      color: var(--text);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-family: inherit;
    }

    .genre-search input::placeholder {
      color: var(--muted);
    }

    .genre-search-count {
      flex: none;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(245,243,237,.3);
      white-space: nowrap;
    }

    .genre-search-results {
      position: fixed;
      z-index: 9999;

      max-height: 360px;
      overflow-y: auto;

      padding: 8px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,9,9,.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 24px 60px rgba(0,0,0,.5);

      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;

      transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
    }

    .genre-search-results.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .genre-search-result {
      display: flex;
      align-items: center;
      gap: 12px;

      padding: 8px 10px;
      border-radius: 8px;

      color: var(--text);
      text-decoration: none;
      cursor: pointer;

      transition: background .2s ease, color .2s ease;
    }

    .genre-search-result:hover {
      background: rgba(233,255,71,.12);
      color: var(--accent);
    }

    .genre-search-result-thumb {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
    }

    .genre-search-result-genre-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(255,255,255,.06);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
    }

    .genre-search-result-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .genre-search-result-info strong {
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genre-search-result-info span {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genre-search-empty {
      padding: 14px 10px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    /* =====================================
       TOP 50 (dark, collapsible)
    ====================================== */

    .top-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;

      margin-bottom: 14px;

      color: #8a8a12;
      text-transform: uppercase;
      letter-spacing: .3em;
      font-size: 10px;
    }

    .top-eyebrow::before {
      content: "";
      width: 35px;
      height: 1px;
      background: currentColor;
    }

    .top-empty { color: var(--muted); font-size: 13px; }

    .top50-section {
      position: relative;
      z-index: 20;

      background: var(--bg);
      color: var(--text);

      padding: 46px 0;
    }

    .top50-inner {
      width: min(880px,90%);
      margin: 0 auto;
    }

    .top50-toggle {
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      padding: 20px 24px;
      border-radius: 16px;
      border: 1px solid rgba(245,243,237,.14);

      background: rgba(245,243,237,.03);
      color: var(--text);
      cursor: pointer;

      text-align: left;

      transition: background .25s ease, border-color .25s ease;
    }

    .top50-toggle:hover {
      background: rgba(245,243,237,.06);
      border-color: rgba(245,243,237,.24);
    }

    .top50-toggle .top-eyebrow { margin-bottom: 6px; color: var(--accent); }

    .top50-toggle-title {
      display: block;
      font-family: Georgia, serif;
      font-size: clamp(18px,2.2vw,22px);
      font-weight: 500;
    }

    .top50-toggle-icon {
      flex-shrink: 0;

      width: 38px;
      height: 38px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      background: rgba(245,243,237,.08);
      color: var(--text);

      transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
    }

    .top50-toggle-icon svg { width: 16px; height: 16px; }

    .top50-toggle:hover .top50-toggle-icon { background: var(--accent); color: #14150f; }

    .top50-toggle[aria-expanded="true"] .top50-toggle-icon { transform: rotate(180deg); }

    .top50-panel {
      overflow: hidden;

      max-height: 0;
      opacity: 0;

      transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
    }

    .top50-panel.open {
      max-height: 3200px;
      opacity: 1;
    }

    .top50-list {
      display: flex;
      flex-direction: column;

      margin-top: 18px;
      padding: 8px 4px;
      border-radius: 16px;
      background: rgba(245,243,237,.02);
    }

    .top50-item {
      display: grid;
      grid-template-columns: 30px 44px 1fr auto auto;
      align-items: center;
      gap: 14px;

      padding: 11px 14px;
      border-radius: 12px;

      cursor: default;
      color: inherit;

      border-bottom: 1px solid rgba(245,243,237,.08);

      transition: background .3s ease, box-shadow .3s ease;
    }

    .top50-item:last-child { border-bottom: none; }

    .top50-item:hover {
      background: rgba(245,243,237,.05);
      box-shadow: inset 0 0 0 1px rgba(233,255,71,.16);
    }

    .top50-item:hover .top50-thumb {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0,0,0,.35);
    }

    .top50-rank {
      font-family: Georgia, serif;
      font-size: 15px;
      color: rgba(245,243,237,.4);
    }

    .top50-thumb {
      width: 44px;
      height: 44px;
      border-radius: 8px;

      background-size: cover;
      background-position: center;
      background-color: rgba(245,243,237,.06);

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .top50-info strong {
      display: block;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .top50-info > span {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      color: rgba(245,243,237,.5);
    }

    .top50-likes {
      display: flex;
      align-items: center;
      gap: 6px;

      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      white-space: nowrap;
    }

    .top50-move {
      display: flex;
      align-items: center;
      gap: 4px;

      min-width: 44px;
      justify-content: flex-end;

      font-size: 11px;
      font-weight: 700;
    }

    .top50-move svg { width: 13px; height: 13px; }

    .top50-move.is-up { color: #6ee787; }
    .top50-move.is-down { color: #ff6b6b; }
    .top50-move.is-new { color: var(--accent); }
    .top50-move.is-same { color: rgba(245,243,237,.35); }

    .top50-move.is-same svg { display: none; }

    /* =====================================
       LATEST RELEASE
    ====================================== */

    .latest-section {
      position: relative;
      z-index: 20;
      overflow: hidden;

      background: var(--text);
      color: #14150f;

      padding: 110px 0;

      display: flex;
      align-items: center;
    }

    .latest-bg {
      position: absolute;
      inset: 0;
      z-index: 0;

      background-size: cover;
      background-position: center;

      opacity: .14;
      filter: grayscale(15%);
    }

    .latest-vinyl-wrap {
      position: absolute;
      top: 50%;
      right: -14%;
      transform: translateY(-50%);
      z-index: 0;

      width: min(620px, 62vw);
      aspect-ratio: 1;
      pointer-events: none;
    }

    .latest-vinyl {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.04) 35deg, transparent 75deg,
          rgba(255,255,255,.18) 110deg, transparent 145deg, rgba(255,255,255,.06) 220deg,
          transparent 265deg, rgba(255,255,255,.14) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow:
        0 0 0 2px rgba(255,255,255,.14),
        0 0 0 8px rgba(0,0,0,.3),
        0 40px 90px rgba(0,0,0,.35);

      -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
      mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

      animation: vinylSpin 7s linear infinite;
      will-change: transform;
      backface-visibility: hidden;
    }

    .latest-inner {
      position: relative;
      z-index: 1;

      width: min(880px, 90%);
      margin: 0 auto;
    }

    .latest-title {
      font-family: Georgia, serif;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 500;
      letter-spacing: -.02em;
      max-width: 480px;
      margin-bottom: 8px;
    }

    .latest-artist {
      color: rgba(20,21,15,.6);
      font-size: 14px;
      margin-bottom: 14px;
    }

    .latest-genres {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 26px;
    }

    .latest-genres:empty {
      display: none;
    }

    .genre-badge {
      display: inline-block;
      padding: 6px 14px;
      background: #14150f;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      transition: background .2s ease, color .2s ease;
      cursor: default;
    }

    .genre-badge:hover {
      background: #fff;
      color: #14150f;
    }

    .featured-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      background: var(--accent);
      color: #14150f;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
      vertical-align: middle;
    }

    /* Like/(Like+Dislike) ratio badge — shared across the playlist menu
       popup, the radio view, and the Top 5/50 lists. Each context supplies
       its own layout class (top-hero-likes, top-likes, top50-likes, etc.)
       alongside this one for positioning/sizing; this just carries the
       "fresh pressing" (too few votes yet) treatment those don't have. */
    .community-score.is-newbie {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      opacity: .6;
    }

    .latest-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 13px 24px;
      border-radius: 999px;
      border: none;
      background: #14150f;

      color: var(--text);
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;

      transition: transform .3s cubic-bezier(.16,1,.3,1);
    }

    .latest-btn svg { width: 15px; height: 15px; }
    .latest-btn:hover { transform: translateY(-2px); }

    .latest-stamp[hidden] { display: none; }

    .latest-stamp {
      position: absolute;
      z-index: 0;
      bottom: 12%;
      left: 6%;
      transform: rotate(-11deg);

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;

      padding: 18px 28px;
      border: 3px double rgba(20,21,15,.16);
      border-radius: 12px;

      pointer-events: none;
    }

    .latest-stamp-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(20,21,15,.16);
    }

    .latest-stamp-date {
      font-family: Georgia, serif;
      font-size: clamp(20px, 2.6vw, 30px);
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      white-space: nowrap;
      color: rgba(20,21,15,.16);
    }

    /* =====================================
       PLAYLIST SECTION (light, player view)
    ====================================== */

    .playlist-wrap {
      position: relative;
      z-index: 20;
      overflow: hidden;

      background: var(--text);
      color: #14150f;

      padding: 60px 0;
    }

    .playlist-bg {
      position: absolute;
      inset: 0;
      z-index: 0;

      background-size: cover;
      background-position: center;

      opacity: .16;
      filter: grayscale(15%);

      transition: opacity .8s ease, background-image .8s ease;
    }

    .playlist-section {
      position: relative;
      z-index: 1;

      width: min(1400px,90%);
      margin: 0 auto;

      padding-top: 20px;
      padding-bottom: 60px;
    }

    /* =====================================
       FOOTER (shared)
    ====================================== */

    .site-footer {
      position: relative;
      z-index: 20;

      width: 100%;

      background: rgba(8,9,9,.6);

      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-top: 1px solid rgba(255,255,255,.1);
    }

    .footer-inner {
      width: min(1400px,90%);
      margin: 0 auto;
      padding-top: 50px;
    }

    /* --- bottom CTA strip --- */

    .footer-cta {
      border-top: 1px solid rgba(255,255,255,.1);
      background: rgba(233,255,71,.04);
    }

    .footer-cta-inner {
      width: min(1400px,90%);
      margin: 0 auto;

      display: flex;
      align-items: center;
      gap: 28px;

      padding: 28px 0;
    }

    .footer-cta-eyebrow {
      flex-shrink: 0;

      display: flex;
      align-items: center;
      gap: 14px;

      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
    }

    .footer-cta-eyebrow::before {
      content: "";
      width: 35px;
      height: 1px;
      background: currentColor;
    }

    .footer-cta-title {
      flex: 1;
      min-width: 0;

      font-family: Georgia, serif;
      font-size: clamp(18px,2.2vw,26px);
      font-weight: 500;
      letter-spacing: -.02em;
    }

    .footer-cta-btn {
      position: relative;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 14px;

      padding: 14px 10px 14px 24px;
      border-radius: 999px;

      background: linear-gradient(155deg, #f2ff8f 0%, var(--accent) 55%, #c9e639 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px rgba(197,224,40,.25);

      color: #14150f;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .footer-cta-btn:hover {
      transform: translateY(-3px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 18px 38px rgba(197,224,40,.35);
    }

    .footer-cta-btn-arrow {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 30px;
      height: 30px;
      border-radius: 50%;
      flex-shrink: 0;

      background: #14150f;
      color: var(--accent);

      transition: transform .3s cubic-bezier(.16,1,.3,1);
    }

    .footer-cta-btn-arrow svg { width: 13px; height: 13px; }

    .footer-cta-btn:hover .footer-cta-btn-arrow {
      transform: translateX(3px) rotate(-45deg);
    }

    @media (max-width: 700px) {
      .footer-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
    }

    @media (max-width: 640px) {
      .footer-cta { padding: 32px 28px; }
    }

    /* --- links row --- */

    .footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;

      gap: 50px;

      padding-top: 50px;
      padding-bottom: 50px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 320px;
    }

    .footer-brand .logo-img {
      height: 96px;
    }

    .footer-tagline { color: var(--muted); font-size: 13px; line-height: 1.7; }

    .footer-social {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-social-link {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.14);

      color: rgba(255,255,255,.7);

      transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
    }

    .footer-social-link svg { width: 17px; height: 17px; }

    .footer-social-link:hover {
      color: #14150f;
      background: var(--accent);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .footer-links { display: flex; flex-wrap: wrap; gap: 60px; }

    .footer-col { display: flex; flex-direction: column; gap: 13px; }

    .footer-col-title {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .25em;
      text-transform: uppercase;
    }

    .footer-link {
      position: relative;
      width: fit-content;

      color: rgba(255,255,255,.7);
      font-size: 13px;
      text-decoration: none;

      transition: color .3s ease;
    }

    .footer-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;

      width: 0;
      height: 1px;
      background: var(--accent);

      transition: width .3s ease;
    }

    .footer-link:hover { color: var(--text); }
    .footer-link:hover::after { width: 100%; }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      gap: 16px;
      padding-top: 26px;

      border-top: 1px solid rgba(255,255,255,.08);

      color: rgba(255,255,255,.4);
      font-size: 11px;
      letter-spacing: .05em;
    }

    .section-title {
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;

      margin-bottom: 18px;

      font-size: 10px;
      letter-spacing: .25em;
      text-transform: uppercase;

      color: rgba(20,21,15,.55);
    }

    .playlist-search {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
    }

    .playlist-search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);

      width: 16px;
      height: 16px;

      color: rgba(20,21,15,.4);
      pointer-events: none;

      transition: color .3s ease;
    }

    .playlist-search input {
      width: 100%;

      padding: 13px 16px 13px 44px;
      border-radius: 999px;

      border: 1px solid rgba(20,21,15,.14);
      background: rgba(20,21,15,.03);

      color: #14150f;
      font: inherit;
      font-size: 13px;

      transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
    }

    .playlist-search input::placeholder { color: rgba(20,21,15,.4); }

    .playlist-search:hover input {
      border-color: rgba(20,21,15,.28);
      background: rgba(20,21,15,.05);
    }

    .playlist-search input:focus {
      outline: none;
      border-color: #8a8a12;
      background: rgba(20,21,15,.05);
      box-shadow: 0 0 0 3px rgba(233,255,71,.28);
    }

    .playlist-search:hover .playlist-search-icon,
    .playlist-search:focus-within .playlist-search-icon {
      color: #14150f;
    }

    .playlist-no-results {
      width: 100%;
      padding: 20px 4px;
      color: rgba(20,21,15,.5);
      font-size: 13px;
    }

    /* =====================================
       TRACK SELECTOR
    ====================================== */

    .playlist {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 10px;
    }

    @media (min-width: 1400px) {
      /* Cap desktop at 3 columns — auto-fill alone would pack in a 4th
         once the container is wide enough for it. */
      .playlist { grid-template-columns: repeat(3, 1fr); }
    }

    .playlist-item[hidden] { display: none; }

    .playlist-load-more {
      grid-column: 1 / -1;

      padding: 16px;

      border: 1px dashed rgba(20,21,15,.2);
      border-radius: 14px;
      background: transparent;

      color: rgba(20,21,15,.65);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      text-align: center;
      cursor: pointer;

      transition: border-color .25s ease, color .25s ease, background .25s ease;
    }

    .playlist-load-more:hover {
      border-color: rgba(20,21,15,.4);
      color: #14150f;
      background: rgba(20,21,15,.04);
    }

    .playlist-item {
      position: relative;

      display: flex;
      align-items: center;
      gap: 12px;

      padding: 10px 12px;

      border: 1px solid rgba(20,21,15,.1);
      border-radius: 14px;

      background: linear-gradient(135deg, rgba(20,21,15,.05), rgba(20,21,15,.015));

      color: #14150f;
      text-align: left;
      cursor: pointer;
      overflow: hidden;

      will-change: transform;

      backdrop-filter: blur(10px);

      transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
    }

    .playlist-item::before {
      content: "";
      position: absolute;
      inset: 0;

      background: radial-gradient(circle at 0% 50%, rgba(233,255,71,.14), transparent 55%);

      opacity: 0;
      transition: opacity .35s ease;
    }

    .playlist-item:hover {
      transform: translateY(-4px);
      border-color: rgba(20,21,15,.25);
      background: rgba(20,21,15,.06);
      box-shadow: 0 18px 45px rgba(20,21,15,.14);
    }

    .playlist-item:hover::before { opacity: 1; }

    .playlist-item.active {
      border-color: rgba(233,255,71,.55);
      background: linear-gradient(135deg, rgba(233,255,71,.25), rgba(20,21,15,.03));
      box-shadow: inset 0 0 0 1px rgba(233,255,71,.15), 0 15px 40px rgba(20,21,15,.15);
    }

    .playlist-item.active::before { opacity: 1; }

    .playlist-number {
      position: relative;
      z-index: 2;
      flex-shrink: 0;

      width: 22px;

      color: rgba(20,21,15,.4);
      font-size: 10px;
      text-align: center;

      transition: color .3s ease;
    }

    .playlist-item.active .playlist-number {
      color: #14150f;
      font-weight: 700;
    }

    .playlist-thumb {
      position: relative;
      z-index: 2;
      flex-shrink: 0;

      width: 44px;
      height: 44px;
      border-radius: 8px;

      background-size: cover;
      background-position: center;
      background-color: rgba(20,21,15,.08);
    }

    .playlist-name {
      position: relative;
      z-index: 2;

      display: flex;
      flex-direction: column;
      gap: 4px;

      min-width: 0;
      flex: 1 1 auto;
    }

    .playlist-name strong {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.35;

      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .playlist-name span {
      font-size: 10px;
      color: rgba(20,21,15,.55);
      letter-spacing: .04em;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .playlist-equalizer {
      position: relative;
      z-index: 2;
      flex-shrink: 0;

      display: none;
      align-items: flex-end;
      gap: 2px;

      width: 14px;
      height: 14px;
    }

    .playlist-item.playing .playlist-equalizer { display: flex; }

    .playlist-equalizer span {
      width: 3px;
      background: var(--accent);
      border-radius: 1px;
      animation: playlistEqBar .9s ease-in-out infinite;
    }

    .playlist-equalizer span:nth-child(1) { height: 40%; animation-delay: -0.6s; }
    .playlist-equalizer span:nth-child(2) { height: 100%; animation-delay: -0.3s; }
    .playlist-equalizer span:nth-child(3) { height: 65%; animation-delay: 0s; }

    @keyframes playlistEqBar {
      0%, 100% { transform: scaleY(.4); }
      50% { transform: scaleY(1); }
    }

    .playlist-duration {
      position: relative;
      z-index: 2;
      flex-shrink: 0;

      color: rgba(20,21,15,.4);
      font-size: 10px;
    }

    .playlist-release {
      display: block;
      color: rgba(20,21,15,.4);
      font-size: 10px;
      letter-spacing: .03em;
      white-space: nowrap;
    }

    .vote-controls { display: flex; align-items: center; gap: 2px; }

    .vote-btn {
      display: flex;
      align-items: center;
      gap: 5px;

      border: none;
      background: transparent;

      color: rgba(20,21,15,.45);

      cursor: pointer;
      font-size: 10px;

      padding: 5px 8px;
      border-radius: 8px;

      transition: background .2s ease, color .2s ease;
    }

    .vote-btn:hover:not(:disabled) { background: rgba(20,21,15,.07); color: #14150f; }
    .vote-btn.like.active { color: #8a8a12; }
    .vote-btn.dislike.active { color: #c0392b; }
    .vote-btn:disabled { cursor: default; opacity: .4; }

    .vote-count { font-size: 10px; min-width: 8px; }

    .playlist-menu {
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }

    .playlist-menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 30px;
      height: 30px;

      border: none;
      border-radius: 50%;
      background: transparent;

      color: rgba(20,21,15,.45);
      cursor: pointer;

      transition: background .2s ease, color .2s ease;
    }

    .playlist-menu-btn svg { width: 16px; height: 16px; }

    .playlist-menu-btn:hover { background: rgba(20,21,15,.08); color: #14150f; }

    .playlist-menu-popup {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 40;

      display: flex;
      flex-direction: column;
      gap: 8px;

      min-width: 180px;
      padding: 12px;

      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(160deg, rgba(26,26,24,.97), rgba(8,9,9,.99));

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 24px 50px rgba(0,0,0,.4);

      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }

    .playlist-menu-popup.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .playlist-menu-popup .community-score {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
    }

    .playlist-menu-popup .community-score.is-newbie {
      color: rgba(255,255,255,.5);
    }

    .playlist-menu-popup .vote-controls { gap: 4px; }

    .playlist-menu-popup .vote-btn {
      color: rgba(255,255,255,.65);
    }

    .playlist-menu-popup .vote-btn:hover:not(:disabled) {
      background: rgba(255,255,255,.08);
      color: #fff;
    }

    .playlist-menu-popup .vote-btn.like.active { color: var(--accent); }
    .playlist-menu-popup .vote-btn.dislike.active { color: #ff6b5b; }

    .playlist-menu-popup .lyrics-btn {
      width: auto;
      height: auto;

      display: flex;
      align-items: center;
      gap: 6px;

      border: none;
      background: rgba(255,255,255,.06);
      border-radius: 8px;

      padding: 8px 10px;

      color: rgba(255,255,255,.8);
      font-size: 12px;
      text-align: left;
      cursor: pointer;

      transition: background .2s ease, color .2s ease;
    }

    .playlist-menu-popup .lyrics-btn:hover {
      background: rgba(255,255,255,.12);
      color: #fff;
      transform: none;
    }

    .playlist-menu-popup .playlist-release {
      padding-top: 2px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.4);
    }

    /* =====================================
       SCROLL INDICATOR
    ====================================== */

    .scroll-indicator {
      position: fixed;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 60;

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;

      pointer-events: none;
    }

    .scroll-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      text-transform: uppercase;
      letter-spacing: .25em;
      font-size: 9px;
      color: rgba(255,255,255,.5);
    }

    .scroll-track {
      width: 2px;
      height: 150px;
      background: rgba(255,255,255,.15);
      position: relative;
      overflow: hidden;
    }

    .scroll-progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: var(--accent);
      transition: height .08s linear;
    }

    .scroll-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 15px rgba(233,255,71,.6);
    }

    /* =====================================
       PLAYER BAR
    ====================================== */

    .player {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 100;

      padding: 16px 5%;

      background: rgba(8,9,9,.84);
      border-top: 1px solid rgba(255,255,255,.12);

      backdrop-filter: blur(25px);

      display: grid;
      grid-template-columns: minmax(160px,1fr) auto minmax(200px,1fr) auto auto;
      grid-template-areas: "now controls progress volume sleep";
      align-items: center;
      gap: 24px;
    }

    .now-playing { grid-area: now; }
    .sleep-timer { grid-area: sleep; }
    .player-controls { grid-area: controls; }
    .progress-container { grid-area: progress; }
    .volume-control { grid-area: volume; }

    .player[hidden] { display: none; }

    .now-playing { display: flex; flex-direction: column; gap: 4px; }

    .now-playing small {
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .now-playing strong { font-size: 13px; font-weight: 500; }

    .player-controls { display: flex; align-items: center; gap: 18px; }

    .control-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      border: none;
      background: transparent;
      color: white;
      cursor: pointer;
      opacity: .75;
    }

    .control-btn svg { width: 20px; height: 20px; }
    .control-btn { text-decoration: none; }
    .main-play svg { width: 20px; height: 20px; transition: transform .3s ease; }

    .main-play {
      position: relative;

      width: 54px;
      height: 54px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.35);

      background: linear-gradient(150deg, #f4ff8f, var(--accent) 60%);

      color: #111;
      cursor: pointer;
      font-size: 15px;

      box-shadow: 0 10px 26px rgba(233,255,71,.35), 0 0 0 1px rgba(0,0,0,.2);

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .main-play:hover {
      transform: scale(1.06);
      box-shadow:
        inset 0 0 0 2px rgba(20,21,15,.25),
        inset 0 5px 10px rgba(0,0,0,.4),
        inset 0 -4px 8px rgba(255,255,255,.3),
        0 10px 26px rgba(233,255,71,.2);
    }

    .main-play:hover svg { transform: scale(1.2); }

    .main-play:active { transform: scale(.94); }

    .progress-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .time { min-width: 34px; color: var(--muted); font-size: 10px; }

    .progress { width: min(240px,100%); accent-color: var(--accent); cursor: pointer; }

    .volume-control { position: relative; display: flex; align-items: center; justify-content: center; }

    .volume-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 20px;
      height: 20px;

      border: none;
      background: transparent;
      color: white;
      cursor: pointer;
      opacity: .75;

      transition: opacity .3s ease;
    }

    .volume-btn svg { width: 17px; height: 17px; }
    .volume-btn:hover { opacity: 1; }

    .volume-popup {
      position: absolute;
      bottom: calc(100% + 16px);
      right: -6px;
      z-index: 150;

      width: 160px;
      padding: 14px 16px;

      display: none;
      align-items: center;

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(160deg, rgba(26,26,24,.97), rgba(8,9,9,.99));

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      box-shadow: 0 24px 50px rgba(0,0,0,.55);
    }

    .volume-popup.active { display: flex; }

    .volume { width: 100%; accent-color: var(--accent); cursor: pointer; }

    /* =====================================
       PLAYER SHARE (copy/share the current track's link)
    ====================================== */

    .player-share { position: relative; display: flex; align-items: center; }

    .player-share-btn svg { width: 17px; height: 17px; }
    .player-share-btn.copied { color: var(--accent); }

    .player-share-popup {
      position: absolute;
      bottom: calc(100% + 16px);
      left: -6px;
      z-index: 150;

      width: 280px;
      padding: 14px 16px;

      display: none;
      flex-direction: column;
      gap: 10px;

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(160deg, rgba(26,26,24,.97), rgba(8,9,9,.99));

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      box-shadow: 0 24px 50px rgba(0,0,0,.55);
    }

    .player-share-popup.active { display: flex; }

    .player-share-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }

    .player-share-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .player-share-row input {
      flex: 1;
      min-width: 0;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: var(--text);
      font-size: 12px;
    }

    .player-share-copy {
      flex-shrink: 0;
      padding: 9px 16px;
      border: none;
      border-radius: 999px;
      background: var(--accent);
      color: #14150f;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease;
    }

    .player-share-copy:hover { transform: translateY(-1px); }
    .player-share-copy.copied { background: #fff; }

    /* =====================================
       SLEEP TIMER
    ====================================== */

    .sleep-timer { position: relative; display: flex; align-items: center; gap: 6px; }

    .sleep-timer-countdown {
      font-size: 11px;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .sleep-timer-btn svg { width: 17px; height: 17px; }
    .sleep-timer-btn.active { color: var(--accent); opacity: 1; }

    .sleep-timer-menu {
      position: absolute;
      bottom: calc(100% + 16px);
      right: -6px;
      z-index: 150;

      width: 180px;
      padding: 8px;

      display: none;
      flex-direction: column;
      gap: 2px;

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(160deg, rgba(26,26,24,.97), rgba(8,9,9,.99));

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      box-shadow: 0 24px 50px rgba(0,0,0,.55);
    }

    .sleep-timer-menu.active { display: flex; }

    .sleep-timer-label {
      padding: 6px 10px 8px;
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .2em;
    }

    .sleep-timer-menu button {
      padding: 9px 10px;

      border: none;
      background: transparent;
      border-radius: 8px;

      color: var(--text);
      font-size: 13px;
      text-align: left;

      cursor: pointer;

      transition: background .2s ease, color .2s ease;
    }

    .sleep-timer-menu button:hover { background: rgba(233,255,71,.12); color: var(--accent); }
    .sleep-timer-menu button.active { color: var(--accent); }

    #sleep-timer-off {
      margin-top: 4px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: #ff8a8a;
    }

    #sleep-timer-off:hover { background: rgba(255,90,90,.12); color: #ff8a8a; }

    /* =====================================
       LYRICS
    ====================================== */

    .lyrics-btn {
      position: relative;
      z-index: 2;

      width: 30px;
      height: 30px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 50%;
      border: 1px solid rgba(20,21,15,.18);

      background: transparent;
      color: rgba(20,21,15,.5);
      font-size: 13px;

      cursor: pointer;

      transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
    }

    .lyrics-btn:hover {
      background: var(--accent);
      color: #111;
      border-color: var(--accent);
      transform: scale(1.08);
    }

    .lyrics-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 24px;

      background: rgba(4,5,5,.78);

      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      opacity: 0;
      pointer-events: none;

      transition: opacity .4s ease;
    }

    .lyrics-overlay.active { opacity: 1; pointer-events: auto; }

    .lyrics-modal {
      position: relative;

      width: min(560px,100%);
      max-height: 78vh;

      overflow: hidden;

      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.14);

      background: linear-gradient(160deg, rgba(26,26,24,.85), rgba(8,9,9,.9));

      box-shadow: 0 40px 90px rgba(0,0,0,.55);

      padding: 40px;

      display: flex;
      flex-direction: column;

      transform: scale(.85) translateY(30px);
      opacity: 0;

      transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
    }

    .lyrics-overlay.active .lyrics-modal { transform: scale(1) translateY(0); opacity: 1; }

    .lyrics-modal-bg {
      position: absolute;
      inset: 0;
      z-index: 0;

      background-size: cover;
      background-position: center;

      opacity: .32;
      filter: saturate(1.1);
    }

    .lyrics-modal-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(26,26,24,.72), rgba(8,9,9,.85));
    }

    .lyrics-modal-vinyl {
      position: absolute;

      width: 380px;
      aspect-ratio: 1;

      right: -130px;
      top: 50%;
      transform: translateY(-50%);

      z-index: 0;

      border-radius: 50%;
      overflow: hidden;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.04) 35deg, transparent 75deg,
          rgba(255,255,255,.18) 110deg, transparent 145deg, rgba(255,255,255,.06) 220deg,
          transparent 265deg, rgba(255,255,255,.14) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow:
        0 0 0 2px rgba(255,255,255,.14), 0 0 0 8px rgba(0,0,0,.5),
        -40px 40px 110px rgba(0,0,0,.85),
        inset 25px 25px 80px rgba(255,255,255,.04), inset -50px -50px 110px rgba(0,0,0,.9);

      animation: vinylSpin 12s linear infinite;
    }

    .lyrics-close {
      position: absolute;
      z-index: 3;
      right: 18px;
      top: 18px;

      width: 34px;
      height: 34px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.16);

      background: rgba(255,255,255,.05);
      color: var(--text);
      font-size: 13px;

      cursor: pointer;

      transition: background .3s ease, transform .3s ease;
    }

    .lyrics-close:hover { background: var(--accent); color: #111; transform: scale(1.08); }

    .lyrics-modal-header {
      position: relative;
      z-index: 2;

      margin-bottom: 20px;
      padding-right: 30px;

      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .lyrics-modal-title { font-family: Georgia, serif; font-size: 26px; letter-spacing: -.02em; }

    .lyrics-modal-artist {
      color: var(--accent);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .lyrics-modal-text {
      position: relative;
      z-index: 2;

      overflow-y: auto;
      padding-right: 10px;

      color: rgba(255,255,255,.82);
      font-size: 14.5px;
      line-height: 1.9;
      white-space: pre-line;
    }

    /* =====================================
       MINI PLAYER
    ====================================== */

    .mini-player {
      position: fixed;
      right: 28px;
      bottom: 28px;
      z-index: 400;

      width: 264px;
      aspect-ratio: 3 / 4;

      display: none;
      flex-direction: column;
      justify-content: flex-end;

      border-radius: 22px;
      overflow: hidden;

      text-decoration: none;
      color: var(--text);

      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 35px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.2);

      background: #101111;

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .mini-player.active { display: flex; }

    .mini-player:hover {
      transform: translateY(-5px);
      box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(233,255,71,.25);
    }

    .mini-player-cover {
      position: absolute;
      inset: 0;

      background-size: cover;
      background-position: center;

      filter: brightness(.6) saturate(1.1);
    }

    .mini-player-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8,9,9,.05) 0%, rgba(8,9,9,.05) 45%, rgba(8,9,9,.96) 100%),
        linear-gradient(0deg, rgba(8,9,9,.15), transparent 35%);
    }

    .mini-player-disc {
      position: absolute;
      top: -46px;
      right: -46px;
      z-index: 1;

      width: 160px;
      height: 160px;
      border-radius: 50%;

      background:
        repeating-radial-gradient(circle at center,
          transparent 0 3px, rgba(255,255,255,.05) 4px, transparent 5px 7px),
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.2) 90deg, transparent 180deg,
          rgba(255,255,255,.12) 270deg, transparent 360deg),
        #0a0a0a;

      box-shadow:
        0 0 0 2px rgba(255,255,255,.22),
        0 12px 26px rgba(0,0,0,.65),
        inset 0 0 14px rgba(0,0,0,.7);

      will-change: transform;
    }

    .mini-player-collapse {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;

      width: 26px;
      height: 26px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      border: 1px solid rgba(255,255,255,.28);
      background: rgba(8,9,9,.55);
      color: var(--text);

      cursor: pointer;

      transition: background .2s ease, transform .2s ease;
    }

    .mini-player-collapse:hover {
      background: rgba(8,9,9,.85);
      transform: scale(1.08);
    }

    .mini-player-collapse svg { width: 12px; height: 12px; }

    .mini-player-disc-label {
      position: absolute;
      inset: 0;
      margin: auto;

      width: 34%;
      aspect-ratio: 1;
      border-radius: 50%;

      background-size: cover;
      background-position: center;

      box-shadow:
        0 0 0 2px rgba(255,255,255,.25),
        0 0 0 5px rgba(0,0,0,.8),
        inset 6px 6px 16px rgba(255,255,255,.1),
        inset -10px -10px 22px rgba(0,0,0,.6);
    }

    .mini-player-disc-hole {
      position: absolute;
      inset: 0;
      margin: auto;

      width: 9px;
      height: 9px;
      border-radius: 50%;

      background: #000;
      box-shadow: 0 0 0 2px rgba(255,255,255,.1);
    }

    .mini-player-label {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;

      font-size: 9px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .22em;

      display: flex;
      align-items: center;
      gap: 7px;

      padding: 6px 12px 6px 10px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,9,9,.45);

      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .mini-player-label::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(233,255,71,.5);
    }

    .mini-player.is-radio .mini-player-label::before {
      animation: miniPlayerLivePulse 1.8s ease-out infinite;
    }

    @keyframes miniPlayerLivePulse {
      0%   { box-shadow: 0 0 0 0 rgba(233,255,71,.5); }
      70%  { box-shadow: 0 0 0 6px rgba(233,255,71,0); }
      100% { box-shadow: 0 0 0 0 rgba(233,255,71,0); }
    }

    .mini-player-info {
      position: relative;
      z-index: 2;

      display: flex;
      align-items: center;
      gap: 12px;

      padding: 18px;
    }

    .mini-player-text {
      min-width: 0;
    }

    .mini-player-text strong {
      display: block;
      font-family: Georgia, serif;
      font-size: 15px;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mini-player-text span {
      display: block;
      margin-top: 4px;

      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mini-player-lyrics {
      position: absolute;
      top: 50%;
      left: 20px;
      right: 20px;
      z-index: 2;

      transform: translateY(calc(-50% + 4px));

      font-family: Georgia, serif;
      font-style: italic;
      font-size: 15px;
      line-height: 1.35;
      text-align: center;
      color: rgba(255,255,255,.85);
      text-shadow: 0 2px 12px rgba(0,0,0,.6);

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;

      pointer-events: none;

      opacity: 0;
      transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
    }

    .mini-player-lyrics.visible {
      opacity: 1;
      transform: translateY(-50%);
    }

    .mini-player-play {
      position: relative;
      z-index: 2;
      flex-shrink: 0;

      width: 42px;
      height: 42px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      border: 1px solid rgba(255,255,255,.35);
      background: linear-gradient(150deg, #f4ff8f, var(--accent) 60%);
      color: #111;

      box-shadow: 0 8px 18px rgba(233,255,71,.3);

      cursor: pointer;

      transition: transform .2s cubic-bezier(.16,1,.3,1);
    }

    .mini-player-play:hover {
      transform: scale(1.07);
      box-shadow:
        inset 0 0 0 2px rgba(20,21,15,.25),
        inset 0 3px 8px rgba(20,21,15,.3),
        0 8px 18px rgba(233,255,71,.3);
    }
    .mini-player-play:active { transform: scale(.94); }

    .mini-player-play svg { width: 15px; height: 15px; transition: transform .3s ease; }
    .mini-player-play:hover svg { transform: scale(1.2); }

    .mini-player-bubble {
      position: fixed;
      right: 30px;
      bottom: 30px;
      z-index: 400;

      width: 84px;
      height: 84px;
      border-radius: 50%;

      display: none;
      align-items: center;
      justify-content: center;

      border: none;
      padding: 0;
      background: transparent;

      cursor: pointer;

      transition: transform .3s cubic-bezier(.16,1,.3,1);
    }

    .mini-player-bubble.active { display: flex; }

    .mini-player-bubble:hover { transform: scale(1.06); }

    .mini-player-bubble-disc {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;

      background:
        repeating-radial-gradient(circle at center,
          transparent 0 3px, rgba(255,255,255,.05) 4px, transparent 5px 7px),
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.2) 90deg, transparent 180deg,
          rgba(255,255,255,.12) 270deg, transparent 360deg),
        #0a0a0a;

      box-shadow:
        0 0 0 2px rgba(255,255,255,.25),
        0 16px 34px rgba(0,0,0,.6),
        inset 0 0 14px rgba(0,0,0,.7);

      will-change: transform;
    }

    /* =====================================
       EMPTY STATE
    ====================================== */

    body.is-empty { overflow: hidden; height: 100vh; }

    body.is-empty > *:not(#empty-overlay) {
      filter: blur(24px);
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .empty-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;

      display: none;
      align-items: center;
      justify-content: center;

      padding: 24px;

      background: rgba(4,5,5,.35);
    }

    .empty-overlay.active { display: flex; }

    .empty-panel {
      max-width: 420px;
      padding: 44px 40px;

      text-align: center;

      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.14);

      background: linear-gradient(160deg, rgba(26,26,24,.92), rgba(8,9,9,.96));

      box-shadow: 0 40px 90px rgba(0,0,0,.6);
    }

    .empty-panel h2 { font-family: Georgia, serif; font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
    .empty-panel p { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 28px; }

    .empty-panel-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 12px 26px;
      border-radius: 999px;

      background: var(--accent);
      color: #111;

      text-decoration: none;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;

      transition: transform .3s cubic-bezier(.16,1,.3,1);
    }

    .empty-panel-btn:hover { transform: translateY(-2px) scale(1.03); }

    /* =====================================
       RESPONSIVE
    ====================================== */

    @media (max-width: 1000px) {

      .vinyl-wrapper { width: 110vw; right: -42vw; top: 28vh; }

      .live-lyrics {
        top: 16px;
        max-width: 260px;
        padding: 14px 16px;
        gap: 6px;
        border-radius: 14px;
      }

      .live-lyrics-line { font-size: 18px; }
      .live-lyrics-next { font-size: 11px; }

    }

    /* =====================================
       SHARE BUBBLE
    ====================================== */

    .share-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;

      display: flex;
      align-items: center;
      justify-content: center;

      background: rgba(8,9,9,.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      opacity: 0;
      pointer-events: none;

      transition: opacity .3s ease;
    }

    .share-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .share-bubble {
      position: relative;

      width: min(270px, 82vw);
      aspect-ratio: 3 / 4;

      border-radius: 26px;
      overflow: hidden;

      box-shadow: 0 40px 90px rgba(0,0,0,.55);

      transform: scale(.85) translateY(24px);
      opacity: 0;

      transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    }

    .share-overlay.active .share-bubble {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .share-bubble-bg {
      position: absolute;
      inset: 0;

      background-size: cover;
      background-position: center;
      background-color: #1b1c14;
    }

    .share-bubble-scrim {
      position: absolute;
      inset: 0;

      background: linear-gradient(180deg, rgba(8,9,9,.1) 0%, rgba(8,9,9,.6) 55%, rgba(8,9,9,.95) 100%);
    }

    .share-bubble-border {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;

      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.22);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 0 rgba(255,255,255,.12);
    }

    .share-bubble-close {
      position: absolute;
      z-index: 4;
      top: 14px;
      right: 14px;

      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.25);

      background: rgba(8,9,9,.4);
      color: var(--text);
      font-size: 13px;

      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      transition: background .2s ease, transform .2s ease;
    }

    .share-bubble-close:hover {
      background: rgba(8,9,9,.75);
      transform: scale(1.08);
    }

    .share-bubble-content {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      bottom: 0;

      padding: 24px 22px 26px;

      display: flex;
      flex-direction: column;
      gap: 4px;

      color: var(--text);
      text-align: left;
    }

    .share-bubble-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .share-bubble-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(233,255,71,.85);
    }

    .share-bubble-eyebrow {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent);
    }

    .share-bubble-title {
      font-family: Georgia, serif;
      font-size: 21px;
      font-weight: 500;
      letter-spacing: -.01em;
      margin: 3px 0 4px;
    }

    .share-bubble-text {
      font-size: 12.5px;
      line-height: 1.55;
      color: rgba(245,243,237,.72);
    }

    .share-bubble-divider {
      height: 1px;
      margin: 14px 0;
      background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 80%);
    }

    .share-bubble-btn {
      align-self: flex-start;

      display: inline-flex;
      align-items: center;
      gap: 9px;

      padding: 11px 20px;
      border: 1px solid transparent;
      border-radius: 999px;

      background: var(--accent);
      color: #14150f;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .02em;
      cursor: pointer;

      box-shadow: 0 10px 24px rgba(233,255,71,.18);

      transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease;
    }

    .share-bubble-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .share-bubble-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(233,255,71,.28);
    }

    .share-bubble-btn.copied {
      background: #14150f;
      color: var(--accent);
      border-color: rgba(233,255,71,.5);
      box-shadow: none;
    }

    .share-bubble-thanks {
      margin-top: 10px;
      font-size: 11.5px;
      color: rgba(245,243,237,.55);

      opacity: 0;
      transform: translateY(4px);

      transition: opacity .35s ease, transform .35s ease;
    }

    .share-bubble-thanks.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =====================================
       NAVBAR RADIO BUTTON
    ====================================== */

    .navbar-right {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .navbar-radio {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .navbar-radio-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .navbar-radio-disc {
      position: relative;

      width: 34px;
      height: 34px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.06) 35deg, transparent 75deg,
          rgba(255,255,255,.22) 110deg, transparent 145deg, rgba(255,255,255,.08) 220deg,
          transparent 265deg, rgba(255,255,255,.18) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.5);

      color: var(--accent);

      animation: vinylSpin 4s linear infinite;
    }

    .navbar-radio:hover .navbar-radio-disc {
      box-shadow: 0 0 0 1px rgba(233,255,71,.5), 0 6px 18px rgba(233,255,71,.25);
    }

    .navbar-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 38px;
      height: 38px;
      border-radius: 50%;

      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.16);
      color: var(--text);
      cursor: pointer;

      transition: background .25s ease, border-color .25s ease, color .25s ease;
    }

    .navbar-icon-btn svg {
      width: 16px;
      height: 16px;
    }

    .navbar-icon-btn:hover,
    .navbar-icon-btn:focus-visible {
      background: rgba(233,255,71,.12);
      border-color: rgba(233,255,71,.5);
      color: var(--accent);
    }

    /* =====================================
       NAVBAR ACCOUNT / LOGIN (design preview)
    ====================================== */

    .navbar-account {
      position: relative;
    }

    .navbar-account-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 38px;
      height: 38px;
      border-radius: 50%;

      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.16);
      color: var(--text);
      cursor: pointer;

      transition: background .25s ease, border-color .25s ease, color .25s ease;
    }

    .navbar-account-btn svg {
      width: 18px;
      height: 18px;
    }

    .navbar-account:hover .navbar-account-btn,
    .navbar-account-btn:focus-visible {
      background: rgba(233,255,71,.12);
      border-color: rgba(233,255,71,.5);
      color: var(--accent);
    }

    /* =====================================
       ABOUT MODAL
    ====================================== */

    .about-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;

      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;

      background: rgba(8,9,9,.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      opacity: 0;
      pointer-events: none;

      transition: opacity .3s ease;
    }

    .about-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .about-modal {
      position: relative;

      width: min(560px, 100%);
      max-height: 85vh;
      overflow-y: auto;

      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 40px 90px rgba(0,0,0,.55);

      background: var(--bg);

      transform: scale(.92) translateY(16px);
      opacity: 0;

      transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    }

    .about-overlay.active .about-modal {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .about-modal-bg {
      position: absolute;
      inset: 0;
      z-index: 0;

      background-size: cover;
      background-position: center;

      opacity: .14;
      filter: grayscale(15%);
    }

    .about-modal-close {
      position: absolute;
      z-index: 3;
      top: 18px;
      right: 18px;

      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.2);

      background: rgba(255,255,255,.05);
      color: var(--text);
      font-size: 13px;

      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      transition: background .2s ease, transform .2s ease;
    }

    .about-modal-close:hover {
      background: rgba(255,255,255,.14);
      transform: scale(1.08);
    }

    .about-modal-content {
      position: relative;
      z-index: 2;
      padding: 56px 44px 48px;
    }

    .about-modal-title {
      font-family: Georgia, serif;
      font-size: clamp(24px, 3vw, 30px);
      font-weight: 500;
      letter-spacing: -.02em;
      margin: 14px 0 22px;
    }

    .about-modal-text {
      color: var(--muted);
      line-height: 1.8;
      font-size: 14px;
    }

    .about-modal-text + .about-modal-text {
      margin-top: 16px;
    }

    /* =====================================
       RADIO VIEW
    ====================================== */

    #view-radio { min-height: calc(100vh - 87px); }

    .radio-viewport {
      position: relative;
      min-height: calc(100vh - 87px);

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 60px 5%;
    }

    /* No navbar/strip above it when embedded — the full iframe height is
       available, not just what's left under the (now-hidden) chrome. */
    html.is-embedded #view-radio,
    html.is-embedded .radio-viewport {
      min-height: 100vh;
    }

    .radio-bg {
      position: absolute;
      inset: 0;

      background-size: cover;
      background-position: center;
      filter: saturate(1.1) brightness(.75);
      transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .5s ease;
    }

    .radio-slide-out {
      transform: translateX(-100%);
      opacity: 0;
    }

    .radio-slide-in-start {
      transition: none !important;
      transform: translateX(100%);
      opacity: 0;
    }

    .immersive-bg.radio-slide-out {
      animation: none;
      transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .5s ease;
      transform: scale(1.05) translateX(-100%);
    }

    .immersive-bg.radio-slide-in-start {
      animation: none;
      transition: none !important;
      transform: scale(1.05) translateX(100%);
    }

    .immersive-vinyl-wrap.radio-slide-out {
      transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .5s ease;
      transform: translateX(-100%);
      opacity: 0;
    }

    .immersive-vinyl-wrap.radio-slide-in-start {
      transition: none !important;
      transform: translateX(100%);
      opacity: 0;
    }

    .radio-scrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8,9,9,.15) 0%, rgba(8,9,9,.45) 40%, rgba(8,9,9,.88) 100%);
    }

    .radio-content {
      position: relative;
      z-index: 2;

      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 30px;

      max-width: 480px;
    }

    .radio-topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .radio-live-tag,
    .radio-listeners-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;

      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
    }

    .radio-live-tag { color: #ff9b9b; }

    .radio-listeners-tag[hidden] { display: none; }

    .radio-immersive-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 32px;
      height: 32px;

      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.14);
      background: transparent;
      color: rgba(255,255,255,.45);
      cursor: pointer;

      transition: color .2s ease, border-color .2s ease, transform .2s ease;
    }

    .radio-immersive-btn svg { width: 14px; height: 14px; }

    .radio-immersive-btn:hover {
      color: var(--accent);
      border-color: var(--accent);
      transform: scale(1.08);
    }

    .radio-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ff4d4d;
      box-shadow: 0 0 10px rgba(255,77,77,.9);
      animation: radioPulse 1.6s ease-in-out infinite;
    }

    @keyframes radioPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .4; transform: scale(.7); }
    }

    .radio-vinyl-slide {
      position: relative;
      width: min(280px, 62vw);
      flex-shrink: 0;
      margin-top: 10px;
      transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .5s ease;
    }

    .radio-vinyl-slide::before {
      content: "";
      position: absolute;
      inset: -22%;
      z-index: -1;

      background: radial-gradient(circle, rgba(233,255,71,.14), transparent 70%);
      filter: blur(32px);
      transition: opacity .6s ease;
    }

    .radio-vinyl-slide.is-featured::before {
      inset: -30%;
      background: radial-gradient(circle, rgba(255,209,102,.55), rgba(233,255,71,.22) 55%, transparent 75%);
      filter: blur(38px);
      animation: featuredGlowPulse 3.2s ease-in-out infinite;
    }

    @keyframes featuredGlowPulse {
      0%, 100% { opacity: .75; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    .record-label-featured {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .record-label-featured-tag {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(8,9,9,.7);
      border: 1px solid rgba(255,209,102,.7);
      color: #ffd166;
      font-size: clamp(6px, .85vw, 9px);
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(255,209,102,.6);
      box-shadow: 0 0 12px rgba(255,209,102,.35);
    }

    .radio-vinyl.is-featured .record-label-featured,
    .immersive-vinyl.is-featured .record-label-featured {
      display: flex;
    }

    .radio-vinyl {
      position: relative;
      width: min(280px, 62vw);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.05) 35deg, transparent 75deg,
          rgba(255,255,255,.22) 110deg, transparent 145deg, rgba(255,255,255,.07) 220deg,
          transparent 265deg, rgba(255,255,255,.16) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 0 0 10px rgba(0,0,0,.55),
        0 50px 110px rgba(0,0,0,.7),
        inset 0 0 60px rgba(0,0,0,.4);

      -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
      mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

      will-change: transform;
      backface-visibility: hidden;
    }

    /* The disc itself scales via its own width, but the label ring / record
       label glow use fixed-px box-shadows sized for the larger 340px disc
       this used to be — scale those down to match the smaller radio disc. */
    .radio-vinyl .label-ring {
      box-shadow: 0 0 0 8px rgba(0,0,0,.75), inset 0 0 33px rgba(0,0,0,.6);
    }

    .radio-vinyl .record-label {
      box-shadow:
        0 0 0 2px rgba(255,255,255,.25), 0 0 0 6px rgba(0,0,0,.85),
        inset 8px 8px 25px rgba(255,255,255,.12), inset -16px -16px 37px rgba(0,0,0,.6);
    }

    .radio-vinyl.spinning {
      animation: vinylSpin 2.8s linear infinite;
    }

    .radio-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .radio-title {
      font-family: Georgia, serif;
      font-size: clamp(22px, 3.2vw, 32px);
      font-weight: 500;
      letter-spacing: -.01em;
    }

    .radio-artist {
      color: var(--muted);
      font-size: 13px;
      letter-spacing: .02em;
    }

    #radio-community-score {
      display: inline-block;
      margin-top: 2px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
    }

    #radio-community-score.is-newbie {
      color: rgba(255,255,255,.45);
    }

    .radio-vote-btn {
      display: flex;
      align-items: center;
      gap: 6px;

      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);

      color: rgba(255,255,255,.55);
      cursor: pointer;

      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

    .radio-vote-btn:hover:not(:disabled) {
      background: rgba(255,255,255,.1);
      color: #fff;
    }

    .radio-vote-btn:disabled { cursor: default; opacity: .35; }

    .radio-vote-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    .radio-vote-btn.like.active { color: var(--accent); border-color: rgba(233,255,71,.5); }
    .radio-vote-btn.dislike.active { color: #ff6b5b; border-color: rgba(255,107,91,.5); }

    .radio-vote-btn .vote-count { font-size: 12px; min-width: 8px; }

    .radio-live-lyrics {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: -14px;
      min-height: 60px;
    }

    .radio-live-lyrics.active { display: flex; }

    .radio-live-lyrics .live-lyrics-line { text-align: center; }
    .radio-live-lyrics .live-lyrics-next { text-align: center; }

    .radio-controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
    }

    .radio-play-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      width: 58px;
      height: 58px;
      border: none;
      border-radius: 50%;

      background: linear-gradient(135deg, var(--accent), #d4f23a);
      color: #14150f;
      cursor: pointer;

      box-shadow: 0 18px 40px rgba(233,255,71,.3);

      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    }

    .radio-play-btn svg { width: 20px; height: 20px; transition: transform .3s ease; }

    .radio-play-btn span {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    .radio-play-btn:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow:
        inset 0 0 0 2px rgba(20,21,15,.25),
        inset 0 4px 10px rgba(20,21,15,.3),
        0 24px 50px rgba(233,255,71,.4);
    }

    .radio-play-btn:hover svg { transform: scale(1.2); }

    .radio-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .radio-countdown {
      display: inline-flex;

      font-family: "Courier New", Consolas, monospace;
      font-size: 11.5px;
      letter-spacing: .04em;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.3);
    }

    .radio-countdown:not(:has(.radio-digit:not([hidden]))) { display: none; }

    .radio-digit { display: inline; }
    .radio-digit[hidden] { display: none; }

    #radio-digit-ss::before { content: ":"; }

    .radio-up-next {
      color: rgba(255,255,255,.3);
      font-size: 11px;
      letter-spacing: .03em;
    }

    .radio-up-next:empty { display: none; }

    /* =====================================
       RADIO IMMERSIVE VIEW
    ====================================== */

    .immersive-overlay {
      position: fixed;
      inset: 0;
      z-index: 600;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 24px;

      padding: clamp(28px, 6vh, 64px) 24px;

      background: #050505;

      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease;
    }

    .immersive-overlay.active { opacity: 1; pointer-events: auto; }

    .immersive-bg {
      position: absolute;
      inset: -20px;
      z-index: 0;

      background-size: cover;
      background-position: center;
      filter: blur(10px) saturate(1.25) brightness(.6);
      transform: scale(1.05);

      animation: immersiveDrift 30s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes immersiveDrift {
      0%   { transform: scale(1.05) translate(0,0); }
      33%  { transform: scale(1.1) translate(-2%,1.5%); }
      66%  { transform: scale(1.08) translate(1.5%,-2%); }
      100% { transform: scale(1.05) translate(0,0); }
    }

    .immersive-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;

      background:
        radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.28) 65%, rgba(0,0,0,.8) 115%),
        linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 26%, transparent 74%, rgba(0,0,0,.6) 100%);
    }

    .immersive-logo {
      position: absolute;
      top: 22px;
      left: 50%;
      transform: translateX(-50%) scale(2);
      z-index: 5;
    }

    body.immersive-open { overflow: hidden; }

    .immersive-lyrics {
      position: relative;
      top: clamp(20px, 6vh, 60px);
      z-index: 2;

      width: min(900px, 90vw);
      min-height: 140px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;

      text-align: center;
    }

    .immersive-lyrics-line {
      font-family: Georgia, serif;
      font-weight: 600;
      font-size: clamp(26px, 4.4vw, 52px);
      line-height: 1.25;
      letter-spacing: -.01em;

      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      row-gap: .12em;

      opacity: 0;
      transform: translateY(26px) scale(.94);
      filter: blur(6px);

      transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease;
    }

    .immersive-lyrics-line.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .immersive-lyrics-line .lyric-word {
      display: inline-block;
      margin: 0 .16em;

      background: linear-gradient(110deg, var(--text) 42%, var(--accent) 50%, var(--text) 58%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;

      opacity: 0;
      transform: translateY(28px) scale(.8) rotate(-3deg);
      filter: blur(5px);

      animation:
        lyricWordIn .6s cubic-bezier(.16,1,.3,1) forwards,
        lyricShimmer 2.8s ease-in-out .3s infinite;
      animation-delay: calc(var(--i) * 55ms), calc(.4s + var(--i) * 55ms);
    }

    @keyframes lyricWordIn {
      to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
    }

    @keyframes lyricShimmer {
      0%   { background-position: 220% 0; }
      100% { background-position: -60% 0; }
    }

    .immersive-lyrics-next {
      position: relative;
      padding-left: 18px;

      font-size: clamp(13px, 1.6vw, 17px);
      letter-spacing: .06em;
      color: rgba(255,255,255,.4);

      opacity: 0;
      transform: translateY(14px);

      transition: opacity .5s ease .1s, transform .5s cubic-bezier(.16,1,.3,1) .1s;
    }

    .immersive-lyrics-next::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      transform: translateY(-50%);
      animation: lyricNextDotPulse 1.6s ease-in-out infinite;
    }

    @keyframes lyricNextDotPulse {
      0%, 100% { opacity: .4; transform: translateY(-50%) scale(1); }
      50%      { opacity: 1; transform: translateY(-50%) scale(1.4); box-shadow: 0 0 10px rgba(233,255,71,.8); }
    }

    .immersive-lyrics-next.visible { opacity: 1; transform: translateY(0); }

    .immersive-vinyl-wrap {
      position: relative;
      z-index: 2;

      width: min(46vh, 60vw, 420px);
      aspect-ratio: 1;

      filter: drop-shadow(0 40px 90px rgba(0,0,0,.7));

      transition: transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease;
    }

    .immersive-vinyl-wrap.ad-mode {
      transform: scale(1.22);
    }

    .immersive-vinyl-wrap::before {
      content: "";
      position: absolute;
      inset: -22%;
      z-index: -1;

      background: radial-gradient(circle, rgba(233,255,71,.14), transparent 70%);
      filter: blur(32px);
      opacity: 0;
      transition: opacity .6s ease;
    }

    .immersive-vinyl-wrap.is-featured::before {
      inset: -30%;
      background: radial-gradient(circle, rgba(255,209,102,.55), rgba(233,255,71,.22) 55%, transparent 75%);
      filter: blur(38px);
      opacity: .75;
      animation: featuredGlowPulse 3.2s ease-in-out infinite;
    }

    .immersive-ad-ring {
      position: absolute;
      inset: -8%;
      z-index: 3;

      transform: rotate(-90deg);

      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
    }

    .immersive-vinyl-wrap.ad-mode .immersive-ad-ring {
      opacity: 1;
    }

    .immersive-ad-ring-progress {
      fill: none;
      stroke: var(--accent);
      stroke-width: 2.4;
      stroke-linecap: round;

      stroke-dasharray: 295.31;
      stroke-dashoffset: 0;

      transition: stroke-dashoffset 1s linear;
    }

    .immersive-vinyl {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      overflow: hidden;

      background:
        conic-gradient(from 20deg,
          transparent 0deg, rgba(255,255,255,.04) 35deg, transparent 75deg,
          rgba(255,255,255,.18) 110deg, transparent 145deg, rgba(255,255,255,.06) 220deg,
          transparent 265deg, rgba(255,255,255,.14) 300deg, transparent 350deg),
        repeating-radial-gradient(circle at center,
          #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

      box-shadow:
        0 0 0 2px rgba(255,255,255,.14),
        0 0 0 8px rgba(0,0,0,.5);

      -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
      mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

      will-change: transform;
      backface-visibility: hidden;
    }

    .immersive-vinyl.spinning {
      animation: vinylSpin 2.8s linear infinite;
    }

    .immersive-meta {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .immersive-title {
      font-family: Georgia, serif;
      font-weight: 600;
      font-size: clamp(20px, 3vw, 28px);
      letter-spacing: -.01em;

      transition: font-size .6s cubic-bezier(.16,1,.3,1), color .6s ease;
    }

    .immersive-title.ad-mode {
      font-size: clamp(28px, 4.4vw, 40px);
      color: var(--accent);
    }

    .immersive-artist {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
      letter-spacing: .04em;
    }

    .immersive-up-next {
      margin-top: 14px;
      color: rgba(255,255,255,.35);
      font-size: 11.5px;
      letter-spacing: .04em;
      min-height: 16px;
    }

    @media (max-width: 700px) {

      .navbar { padding: 10px 5%; }
      .track-count { display: none; }

      .navbar-back {
        padding: 9px;
        gap: 0;
      }
      .navbar-back-label { display: none; }

      .vinyl-wrapper { width: 155vw; right: -78vw; top: 42vh; }

      #view-player .hero-content { padding-top: 60px; }

      .live-lyrics {
        top: 8px;
        max-width: min(58vw, 210px);
        padding: 10px 12px;
        gap: 4px;
      }

      .live-lyrics-line { font-size: 15px; }
      .live-lyrics-next { font-size: 10px; }

      #view-player .track-title { font-size: clamp(38px,12vw,70px); }
      .genres-title { font-size: clamp(34px,11vw,56px); }
      .hero-rotator { min-height: 3.3em; }
      .genres-description { margin-top: 16px; }

      .selector-dropdown-row { flex-direction: column; align-items: stretch; }

      .genre-dropdown,
      .genre-dropdown-btn,
      .genre-search {
        width: 100%;
        max-width: none;
        flex: none;
      }

      .genre-dropdown-menu { left: 0; right: 0; width: 100%; min-width: 0; }

      .latest-section { padding: 80px 0; }
      .latest-vinyl-wrap { width: min(340px, 78vw); right: -28%; opacity: .55; z-index: 1; }
      .latest-title { max-width: 100%; }
      .latest-stamp { padding: 12px 18px; bottom: 6%; left: 4%; }
      .latest-stamp-date { font-size: 16px; }

      .hero-bg-caption { position: static; margin-top: 14px; transform: none; }

      .playlist { grid-template-columns: 1fr; }

      .playlist-section { padding-top: 20px; padding-bottom: 180px; }

      .scroll-indicator { right: 14px; }
      .scroll-track { height: 100px; }

      .player {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
          "sleep controls volume"
          "progress progress progress";
        gap: 16px 10px;

        padding: 22px 5% calc(16px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;

        background: rgba(10,11,10,.92);
        box-shadow: 0 -20px 50px rgba(0,0,0,.5);
      }

      .player::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);

        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.2);
      }

      .now-playing { display: none; }

      .player-controls { justify-content: center; gap: 26px; }

      .volume-control { justify-content: flex-end; }

      .volume-popup {
        right: 0;
        left: auto;
        max-width: calc(100vw - 32px);
      }

      .sleep-timer-menu {
        left: -6px;
        right: auto;
        max-width: calc(100vw - 32px);
      }

      .control-btn,
      .volume-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        opacity: 1;
      }

      .main-play { width: 58px; height: 58px; }

      .progress-container {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 12px;

        padding: 10px 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
      }

      .progress { flex: 1; width: auto; }

      .mini-player { width: 190px; right: 16px; bottom: 16px; }
      .mini-player-disc { width: 110px; height: 110px; top: -30px; right: -30px; }
      .mini-player-bubble { width: 68px; height: 68px; right: 16px; bottom: 16px; }

    }