: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);
    }

    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%);
    }

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

    .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%;
      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 {
      min-height: calc(100vh - 87px);
      display: flex;
      flex-direction: column;
    }

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

      width: 100%;
      margin: 0 auto;
      padding: 28px 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;
    }

    .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: 12px 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;
      gap: 14px;

      font-size: 14px;
      letter-spacing: .45em;

      text-decoration: none;
      color: inherit;
    }

    .logo-disc {
      position: relative;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 50%;
    }

    .logo-disc::before,
    .logo-disc::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 50%;
    }

    .logo-disc::before { inset: 5px; }
    .logo-disc::after { inset: 10px; }

    .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 { display: flex; }

    .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(1400px,90%);
      margin: 0 auto;

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

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

      margin-bottom: 14px;
    }

    .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);
    }

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

    .genres-description {
      max-width: 420px;
      margin-top: 12px;
      color: var(--muted);
      line-height: 1.6;
      font-size: 13px;
    }

    /* =====================================
       CINEMATIC TEXT SECTION
    ====================================== */

    .cinematic-section {
      position: relative;
      overflow: hidden;

      min-height: 34vh;

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

      padding: 60px 6%;

      background: #050505;
    }

    .cinematic-section::before {
      content: "";
      position: absolute;
      inset: 0;

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

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

      max-width: 900px;
      text-align: center;
    }

    .cinematic-line {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(20px, 3vw, 38px);
      line-height: 1.45;
      letter-spacing: -.01em;
      color: var(--text);

      opacity: 0;
      filter: blur(6px);
      transform: translateY(14px);

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

    .cinematic-line.visible {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .cinematic-line {
        transition: opacity .3s ease;
        filter: none;
        transform: none;
      }
    }

    /* =====================================
       GENRE GRID
    ====================================== */

    .genre-section {
      flex: 1;
      min-height: 0;

      display: flex;
      align-items: center;

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

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

    .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: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-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;
    }

    .genre-section-inner {
      width: 100%;
    }

    .genre-section-eyebrow {
      justify-content: center;
      margin-bottom: 20px;
    }

    .genre-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(var(--genre-count, 4), minmax(0, 340px));
      justify-content: center;
      gap: 24px;
    }

    .genre-card {
      position: relative;
      aspect-ratio: 1;
      text-decoration: none;
      color: var(--text);
    }

    .genre-image {
      position: absolute;
      inset: 14%;
      border-radius: 14px;

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

      filter: grayscale(100%) brightness(.7);

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

    .genre-card:hover .genre-image {
      filter: grayscale(0%) brightness(1);
      transform: scale(1.08);
    }

    .genre-placeholder {
      position: absolute;
      inset: 14%;
      border-radius: 14px;

      background: linear-gradient(150deg, #1c1d1a, #0c0d0d);
      display: flex;
      align-items: center;
      justify-content: center;

      filter: grayscale(100%);
      transition: filter .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
    }

    .genre-card:hover .genre-placeholder {
      filter: grayscale(0%);
      transform: scale(1.08);
    }

    .genre-placeholder .disc {
      width: 44%;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.25);
      position: relative;
    }

    .genre-placeholder .disc::before {
      content: "";
      position: absolute;
      inset: 30%;
      border-radius: 50%;
      background: var(--accent);
      opacity: .5;
    }

    .genre-card.disabled { cursor: not-allowed; }

    .genre-card.disabled .genre-image,
    .genre-card.disabled .genre-placeholder {
      filter: grayscale(100%) brightness(.4);
    }

    .genre-card.disabled:hover .genre-image,
    .genre-card.disabled:hover .genre-placeholder {
      filter: grayscale(100%) brightness(.4);
      transform: none;
    }

    .not-available-stamp {
      position: absolute;
      inset: 14%;
      z-index: 3;

      margin: auto;
      width: 60%;
      height: 60%;

      object-fit: contain;
      transform: rotate(-10deg);
      opacity: .95;

      pointer-events: none;
    }

    .genre-hover-card {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 16px);
      z-index: 10;

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 20px 32px;
      min-width: 170px;

      white-space: nowrap;

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

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

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

      box-shadow:
        0 22px 44px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.1);

      opacity: 0;
      transform: translate(-50%, 6px) scale(.92);

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

      pointer-events: none;
    }

    .genre-card:hover .genre-hover-card {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }

    .genre-hover-card-name {
      font-family: Georgia, serif;
      font-size: 22px;
      color: var(--text);
      letter-spacing: -.01em;
      line-height: 1.2;
    }

    .genre-hover-card-count {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--accent);
    }

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

    /* =====================================
       TOP TRACKS (light section)
    ====================================== */

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

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

      padding: 70px 0;
    }

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

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

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

    .top-tracks-inner {
      position: relative;
      z-index: 1;

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

    .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-title {
      font-family: Georgia, serif;
      font-size: clamp(24px,3vw,34px);
      font-weight: 500;
      letter-spacing: -.02em;
      margin-bottom: 30px;
    }

    .top-list { display: flex; flex-direction: column; }

    .top-item {
      display: grid;
      grid-template-columns: 28px 52px 1fr auto;
      align-items: center;
      gap: 16px;

      padding: 14px 8px;

      text-decoration: none;
      color: inherit;

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

      transition: background .25s ease;
    }

    .top-item:last-child { border-bottom: none; }
    .top-item:hover { background: rgba(20,21,15,.05); }

    .top-rank {
      font-family: Georgia, serif;
      font-size: 20px;
      color: rgba(20,21,15,.3);
    }

    .top-thumb {
      width: 52px;
      height: 52px;
      border-radius: 10px;

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

    .top-info strong { display: block; font-size: 14px; }

    .top-info span {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      color: rgba(20,21,15,.55);
    }

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

      font-size: 13px;
      font-weight: 600;
      color: #14150f;
    }

    .top-empty { color: rgba(20,21,15,.55); font-size: 13px; }

    /* =====================================
       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: 30px;
    }

    .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);
    }

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

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

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

      padding: 90px 0;
    }

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

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

      opacity: .1;
      filter: grayscale(20%);
    }

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

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

    .about-inner .eyebrow { margin-bottom: 16px; }

    .about-title {
      font-family: Georgia, serif;
      font-size: clamp(24px,3vw,32px);
      font-weight: 500;
      letter-spacing: -.02em;
      margin-bottom: 24px;
    }

    .about-text { color: var(--muted); line-height: 1.8; font-size: 14px; }
    .about-text + .about-text { margin-top: 16px; }

    /* =====================================
       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%;
      padding-bottom: 210px;

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

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

    .site-footer.compact { padding-bottom: 60px; }

    .creator-strip {
      position: relative;
      z-index: 20;

      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;

      padding: 18px 5% 24px;

      background: #050606;
      border-top: 1px solid rgba(255,255,255,.06);

      color: rgba(255,255,255,.35);
      font-size: 11px;
      letter-spacing: .04em;
      text-align: center;
    }

    .site-footer:not(.compact) + .creator-strip {
      padding-bottom: 140px;
    }

    .creator-strip a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;

      transition: opacity .25s ease;
    }

    .creator-strip a:hover { opacity: .75; }

    .creator-strip-dot {
      color: rgba(255,255,255,.2);
    }

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

    .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-tagline { color: var(--muted); font-size: 13px; line-height: 1.7; }

    .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;
    }

    .footer-socials { display: flex; gap: 12px; }

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

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

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

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

    .footer-social:hover {
      background: var(--accent);
      color: #111;
      border-color: var(--accent);
      transform: translateY(-3px);
    }

    .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(4, 1fr);
      gap: 10px;
    }

    .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;

      min-height: 96px;

      display: grid;
      grid-template-columns: 38px 1fr;
      grid-template-areas:
        "num title"
        ".   meta";
      align-items: start;
      gap: 4px 14px;

      padding: 18px 16px;

      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;
      grid-area: num;

      width: 32px;
      height: 32px;

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

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

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

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

    .playlist-item.active .playlist-number {
      background: var(--accent);
      color: #111;
      border-color: var(--accent);
    }

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

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

      min-width: 0;
    }

    .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;
    }

    .playlist-duration {
      position: relative;
      z-index: 2;
      color: rgba(20,21,15,.4);
      font-size: 10px;
    }

    .playlist-release {
      grid-column: 1 / -1;
      position: relative;
      z-index: 2;

      margin-top: -2px;
      padding-left: 52px;

      color: rgba(20,21,15,.35);
      font-size: 10px;
      letter-spacing: .03em;
    }

    .playlist-meta {
      position: relative;
      z-index: 2;
      grid-area: meta;

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

      margin-top: 6px;
    }

    .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; }

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

    /* =====================================
       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; }
    .download-control-btn:hover { color: var(--accent); opacity: 1; }
    .main-play svg { width: 20px; height: 20px; }

    .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 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: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; }

    /* =====================================
       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);
    }

    .download-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);

      text-decoration: none;
      cursor: pointer;

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

    .download-btn svg { width: 14px; height: 14px; }

    .download-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-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: 8px;
      left: 14px;
      z-index: 2;

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

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

    .mini-player-label::before {
      content: "";
      width: 14px;
      height: 1px;
      background: var(--accent);
    }

    .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-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); }
    .mini-player-play:active { transform: scale(.94); }

    .mini-player-play svg { width: 15px; height: 15px; }

    .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; }

      .playlist { grid-template-columns: repeat(2, 1fr); }

    }

    /* =====================================
       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);
    }

    /* =====================================
       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%;
    }

    .radio-bg {
      position: absolute;
      inset: 0;

      background-size: cover;
      background-position: center;
      filter: saturate(1.1) brightness(.75);
      transition: background-image .6s ease;
    }

    .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: 14px;

      max-width: 560px;
    }

    .radio-badges {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;

      margin-bottom: 6px;
    }

    .radio-live-badge,
    .radio-listeners-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);

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

    .radio-listeners-badge[hidden] { display: none; }

    .radio-live-dot,
    .radio-listeners-dot {
      width: 7px;
      height: 7px;
      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-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 3.5vw, 32px);
      margin-bottom: 10px;
    }

    .radio-digit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;

      transition: opacity .3s ease;
    }

    .radio-digit[hidden] { display: none; }

    .radio-digit-value {
      display: inline-block;
      width: 2.3ch;

      font-family: "Orbitron", "Courier New", Consolas, monospace;
      font-size: clamp(38px, 7.5vw, 60px);
      font-weight: 500;
      letter-spacing: .06em;
      text-align: center;
      font-variant-numeric: tabular-nums;

      color: var(--accent);
      text-shadow: 0 0 18px rgba(233,255,71,.75), 0 0 4px rgba(233,255,71,.95), 0 6px 20px rgba(0,0,0,.5);
    }

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

    .radio-vinyl {
      position: relative;
      width: min(220px, 46vw);
      aspect-ratio: 1;
      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),
        0 30px 70px rgba(0,0,0,.6);

      -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;
    }

    .radio-vinyl.spinning {
      animation: vinylSpin 2.8s linear infinite;
    }

    .radio-title {
      font-family: Georgia, serif;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 500;
      letter-spacing: -.02em;
    }

    .radio-artist {
      color: var(--muted);
      font-size: 14px;
      margin-top: -8px;
    }

    .radio-live-lyrics {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin: 6px 0;
      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: 22px;

      margin-top: 8px;
    }

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

      padding: 14px 28px;
      border: none;
      border-radius: 999px;

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

      box-shadow: 0 16px 36px rgba(233,255,71,.22);

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

    .radio-play-btn svg { width: 16px; height: 16px; }

    .radio-play-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 44px rgba(233,255,71,.32);
    }

    .radio-up-next {
      color: rgba(255,255,255,.35);
      font-size: 11.5px;
      letter-spacing: .04em;
      min-height: 16px;
    }

    @media (max-width: 700px) {

      .navbar { padding: 20px 5%; }
      .track-count { display: none; }

      .navbar-back {
        padding: 9px;
        gap: 0;
      }
      .navbar-back-label { display: none; }

      .radio-vinyl-row { gap: 10px; }
      .radio-digit-value { font-size: 28px; }

      .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(28px,9vw,40px); }

      .genre-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

      .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 {
        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; }

    }