/* ═══════════════════════════════════════════════════════════════════════════
   iPhone and other phones: Apple Music, iOS 26 Liquid Glass.
   Loaded last; on phones it owns the floating tab bar, the mini player and
   the full-screen player. Every selector starts with `html:not(.x) body` so it
   wins over the older layers without a specificity race.

   Glass edges are drawn with box-shadows (sharp at any size), never with a
   pre-rendered image, so nothing stretches while a bar changes size.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --g26-fill: rgba(30, 30, 34, .42);
  --g26-fill-solid: rgba(30, 30, 33, .94);
  --g26-blur: blur(18px) saturate(190%);
  /* Glass lit from above: a fine bright line along the top edge (it curves
     evenly round both ends), a fainter one underneath, a hairline all round,
     light pooling inside the rim, and a soft lift off the page. */
  --g26-edge:
    inset 0 1px .5px -.5px rgba(255, 255, 255, .42),
    inset 0 -1px .5px -.5px rgba(255, 255, 255, .14),
    inset 0 0 0 .5px rgba(255, 255, 255, .12),
    inset 0 0 18px rgba(255, 255, 255, .06),
    0 12px 32px rgba(0, 0, 0, .32),
    0 1px 4px rgba(0, 0, 0, .2);
  --g26-pad: 16px;          /* gap between the bars and the screen edge */
  --g26-tabs: 62px;         /* tab bar height */
  --g26-mini: 54px;         /* mini player height */
  --g26-gap: 10px;          /* space between the mini player and the tabs */
  --g26-safe-b: max(env(safe-area-inset-bottom, 0px) - 8px, 10px);
}

html:not(.x) body .g26-search { display: none; }

@media (max-width: 720px) {

  /* Shelves run to the screen edge; the page itself never scrolls sideways. */
  html:not(.x) body .main-shell { overflow-x: hidden; overflow-x: clip; }

  /* ─────────────────────────── Glass material ───────────────────────────
     The blur sits directly on each bar (never on a layer inside one: Safari
     drops a nested backdrop blur), with one even hairline edge all round. */

  html:not(.x) body .mobile-tabs,
  html:not(.x) body .mobile-tabs.glass.glass,
  html:not(.x) body .g26-search,
  html:not(.x) body .player,
  html:not(.x) body .player.glass.glass {
    background-color: var(--g26-fill) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--g26-blur) !important;
    backdrop-filter: var(--g26-blur) !important;
    box-shadow: var(--g26-edge) !important;
    outline: 0 !important;
    border: 0 !important;
  }
  /* No backdrop blur (old browsers): an almost solid fill keeps text readable. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.x) body .mobile-tabs, html:not(.x) body .g26-search, html:not(.x) body .player { background-color: var(--g26-fill-solid) !important; }
  }
  /* No extra layers on or in the bars. */
  html:not(.x) body .player::before, html:not(.x) body .player::after,
  html:not(.x) body .mobile-tabs::before, html:not(.x) body .mobile-tabs::after,
  html:not(.x) body .g26-search::before, html:not(.x) body .g26-search::after { content: none !important; display: none !important; }

  /* Content scrolling under the bars dims softly, as iOS 26's scroll edge. */
  html:not(.x) body .g26-edge {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none;
    height: calc(var(--g26-tabs) + var(--g26-mini) + var(--g26-gap) + var(--g26-safe-b) + 48px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .78) 100%);
  }
  html:not(.x) body.dock-min .g26-edge { height: calc(var(--g26-tabs) + var(--g26-safe-b) + 44px); }

  /* Room at the end of every page for the floating bars. */
  html:not(.x) body .main-shell { padding-bottom: calc(var(--g26-tabs) + var(--g26-mini) + var(--g26-gap) + var(--g26-safe-b) + 36px) !important; }

  /* ───────────────────────────── Tab bar ─────────────────────────────────
     A glass capsule with Home · Radio · Library · Liked, and Search as its
     own glass circle on the right (ios26.js moves it out of the bar), as in
     Apple Music on iOS 26. */

  html:not(.x) body .mobile-tabs,
  html:not(.x) body .mobile-tabs.glass.glass {
    left: var(--g26-pad) !important; right: calc(var(--g26-pad) + var(--g26-tabs) + 12px) !important;
    bottom: var(--g26-safe-b) !important;
    height: var(--g26-tabs) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    padding: 4px !important; gap: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }
  html:not(.x) body .mobile-tabs > button { grid-row: 1 !important; min-width: 0; }
  html:not(.x) body .mobile-tabs > button[data-view="home"] { grid-column: 1 !important; }
  html:not(.x) body .mobile-tabs > button[data-view="radio"] { grid-column: 2 !important; }
  html:not(.x) body .mobile-tabs > button[data-view="library"] { grid-column: 3 !important; }
  html:not(.x) body .mobile-tabs > button[data-view="liked"] { grid-column: 4 !important; }
  html:not(.x) body .mobile-tabs > button {
    gap: 1px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0 !important;
    color: rgba(255, 255, 255, .92) !important;
  }
  html:not(.x) body .mobile-tabs > button svg { width: 24px !important; height: 24px !important; }
  html:not(.x) body .mobile-tabs > button.active, html:not(.x) body .mobile-tabs > button.active svg { color: var(--am, #fa2d48) !important; }
  /* The selection: a soft lighter pill inside the capsule. */
  html:not(.x) body .mobile-tabs > .lens { background: rgba(255, 255, 255, .13) !important; border-radius: 999px !important; }

  html:not(.x) body .g26-search {
    position: fixed; z-index: 31;
    right: var(--g26-pad); bottom: var(--g26-safe-b);
    width: var(--g26-tabs); height: var(--g26-tabs);
    display: grid !important; place-items: center;
    margin: 0; padding: 0; border-radius: 50% !important;
    color: rgba(255, 255, 255, .92);
    transition: transform .35s cubic-bezier(.3, 1.35, .5, 1), color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  html:not(.x) body .g26-search span { display: none !important; }
  html:not(.x) body .g26-search svg { width: 25px !important; height: 25px !important; color: inherit !important; }
  html:not(.x) body .g26-search.active { color: var(--am, #fa2d48); }
  html:not(.x) body .g26-search:active { transform: scale(.9); }

  /* Scrolled down: the capsule tucks into one circle (the current tab), the
     mini player sits between it and Search. */
  html:not(.x) body.dock-min .mobile-tabs,
  html:not(.x) body.dock-min .mobile-tabs.glass.glass {
    right: calc(100% - var(--g26-pad) - var(--g26-tabs)) !important;
    grid-template-columns: 1fr !important;
  }
  html:not(.x) body.dock-min .mobile-tabs > button { grid-column: 1 !important; }

  /* ───────────────────── Smooth: 60 fps on iPhone ───────────────────────
     The bars never animate their size or position (each frame would re-lay
     out and re-blur the glass). Tucking in and out swaps the layout at once;
     the mini player then settles with a short transform-only move, which the
     GPU runs on its own. */
  html:not(.x) body .player,
  html:not(.x) body .mobile-tabs,
  html:not(.x) body .mobile-tabs.glass.glass {
    transition: transform .4s cubic-bezier(.3, 1.35, .5, 1) !important;
    will-change: auto !important; contain: layout style;
    filter: none !important; opacity: 1 !important;
  }
  html:not(.x) body .mobile-tabs > button,
  html:not(.x) body .mobile-tabs > .lens { transition: color .2s, opacity .2s, transform .35s cubic-bezier(.3, 1.35, .5, 1) !important; }
  html:not(.x) body.dock-min .player { animation: g26-tuck-in .45s cubic-bezier(.3, 1.3, .5, 1) backwards; }
  html:not(.x) body.g26-was-min:not(.dock-min) .player { animation: g26-tuck-out .45s cubic-bezier(.3, 1.3, .5, 1) backwards; }
  @keyframes g26-tuck-in { from { transform: translate3d(-24px, -56px, 0) scale(.95); } to { transform: none; } }
  @keyframes g26-tuck-out { from { transform: translate3d(36px, 56px, 0) scale(.95); } to { transform: none; } }
  /* A press squishes the glass like a drop, then it springs back. */
  html:not(.x) body .player:active:not(:has(input:active)) { transform: scale(.97, .94) !important; transition-duration: .15s !important; }
  html:not(.x) body .mobile-tabs:active { transform: none !important; }
  html:not(.x) body .mobile-tabs > button:active { transform: scale(.88) !important; }
  /* The large-title header: a light fade instead of a masked blur, which
     iOS re-rendered on every scrolled frame. */
  html:not(.x) body .topbar {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    background: linear-gradient(180deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .7) 65%, rgba(20, 20, 20, 0) 100%) !important;
  }

  /* A touch lights the glass where the finger is (ios26.js keeps --gx/--gy). */
  html:not(.x) body .player.g26-touch.g26-touch,
  html:not(.x) body .mobile-tabs.g26-touch.g26-touch,
  html:not(.x) body .g26-search.g26-touch.g26-touch {
    background-image: radial-gradient(110px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%) !important;
  }
  /* The tab bar squishes like a drop when pressed and springs back. */
  html:not(.x) body .mobile-tabs:active, html:not(.x) body .mobile-tabs.glass.glass:active { transform: scale(.985, .955) !important; transition-duration: .15s !important; }
  html:not(.x) body .g26-search:active { transform: scale(.9) !important; }

  /* Page changes are animated by ios26.js (push / pop / crossfade); the old
     rise-in of every page is switched off so the two never stack up. */
  html:not(.x) body :is(#home-content, #results-content, #library-content, #artist-content, #album-content) { animation: none !important; }
  html:not(.x) body main { will-change: auto; }

  /* While the full-screen player is open the page behind is frozen. */
  html.g26-locked, html.g26-locked body { overflow: hidden !important; overscroll-behavior: none; }
  html.g26-locked body { position: fixed !important; left: 0; right: 0; width: 100%; }

  /* ──────────────────────────── Mini player ────────────────────────────── */

  html:not(.x) body .player {
    left: var(--g26-pad) !important; right: var(--g26-pad) !important;
    bottom: calc(var(--g26-safe-b) + var(--g26-tabs) + var(--g26-gap)) !important;
    height: var(--g26-mini) !important;
    border-radius: 999px !important;
    padding: 0 6px 0 8px !important; gap: 0 !important;
  }
  html:not(.x) body.dock-min .player {
    left: calc(var(--g26-pad) + var(--g26-tabs) + 10px) !important;
    right: calc(var(--g26-pad) + var(--g26-tabs) + 10px) !important;
    bottom: var(--g26-safe-b) !important;
    height: var(--g26-tabs) !important;
  }
  html:not(.x) body .player .player-track-group { padding-left: 50px !important; }
  html:not(.x) body .player .current-art {
    width: 40px !important; height: 40px !important; border-radius: 9px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  }
  html:not(.x) body .player .current-track strong { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.015em; color: #fff; }
  html:not(.x) body .player .player-track-group > .artist-link { font-size: 13px !important; color: rgba(255, 255, 255, .6) !important; }
  /* Play/pause and forward, as in Apple Music. */
  html:not(.x) body .player .transport #previous { display: none !important; }
  html:not(.x) body .player .main-play,
  html:not(.x) body .player .transport #next { width: 44px !important; height: 44px !important; }
  html:not(.x) body .player .main-play svg { width: 24px !important; height: 24px !important; }
  html:not(.x) body .player .transport #next svg { width: 26px !important; height: 26px !important; }

  /* ──────────────────────── Full-screen player ───────────────────────────
     A sheet that slides up over the app. One grid, laid out the same in
     Safari and Chrome: artwork (as large as fits, always square), title and
     artist with ☆ and ⋯, progress, controls, volume, Lyrics · AirPlay · Queue. */

  html:not(.x) body #immersive:not(.g26a):not(.g26b)[open] {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
    overflow: hidden !important;
    /* Coloured from the artwork at once, so opening never flashes black. */
    background: radial-gradient(130% 90% at 25% 15%, var(--art-glow, #4a4a50) 0%, var(--art-tint, #161616) 75%) !important;
    animation: none !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  @keyframes g26-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  html:not(.x) body #immersive:not(.g26a):not(.g26b).g26-dragging { animation: none !important; transition: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b).g26-release { transition: transform .42s cubic-bezier(.32, .72, 0, 1) !important; }
  /* No scroll bars anywhere in the player. */
  html:not(.x) body #immersive:not(.g26a):not(.g26b)::-webkit-scrollbar,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(.room-lyrics, .room-queue, .room-queue-list) { scrollbar-width: none !important; }
  /* The closing slide runs on the GPU from wherever a drag left the sheet. */
  html:not(.x) body #immersive:not(.g26a):not(.g26b).g26-closing { pointer-events: none; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b)::backdrop { background: rgba(0, 0, 0, .6) !important; }

  /* Artwork-coloured light: vivid, slowly drifting. */
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-ambience {
    filter: blur(26px) saturate(1.7) brightness(.78) !important;
    opacity: 1 !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .14) 45%, rgba(0, 0, 0, .38) 100%) !important;
  }

  /* Only the grabber at the top; it closes the player (so does a swipe down). */
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-header {
    position: absolute !important; z-index: 6; top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 34px) !important;
    padding: 0 !important; margin: 0 !important; display: block !important;
    border: 0 !important; background: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-header::before { content: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-brand,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-kicker { display: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-close {
    position: absolute !important; left: 50% !important; top: env(safe-area-inset-top, 0px) !important;
    transform: translateX(-50%) !important;
    width: 96px !important; height: 34px !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; outline: 0 !important; border: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-close::after { content: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-close svg { display: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-close::before {
    content: ""; position: absolute; left: 50%; top: 11px;
    width: 38px; height: 5px; margin-left: -19px; border-radius: 3px;
    background: rgba(255, 255, 255, .42);
  }

  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-layout {
    position: relative !important; z-index: 2 !important;
    flex: 1 1 auto !important; min-height: 0 !important;
    display: grid !important;
    width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 44px) 28px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto auto !important;
    grid-template-areas:
      "art art art"
      "title like opts"
      "artist like opts"
      "prog prog prog"
      "trans trans trans"
      "vol vol vol"
      "bot bot bot" !important;
    gap: 0 12px !important;
    align-items: center !important; justify-content: stretch !important; align-content: stretch !important;
    overflow: hidden !important; contain: none !important;
    animation: none !important; transform: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-details,
  html:not(.x) body #immersive:not(.g26a):not(.g26b).art-expanded .immersive-details { display: contents !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-details > .eyebrow,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-album,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-legacy,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .art-footnote,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-hills,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-visualizer { display: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) [hidden] { display: none !important; }

  /* Artwork: the largest square that fits the space left above the title. */
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-art {
    grid-area: art !important;
    align-self: stretch !important; justify-self: stretch !important;
    width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important;
    margin: 4px 0 26px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    container-type: size;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-art > button {
    flex: none !important;
    width: min(100cqw, 100cqh) !important; height: min(100cqw, 100cqh) !important;
    max-width: 100% !important; padding: 0 !important; margin: 0 !important;
    display: block !important; cursor: default !important;
    animation: none !important;
  }
  @supports not (container-type: size) {
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-art > button { width: min(100%, 52vh) !important; height: auto !important; aspect-ratio: 1; }
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-cover {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    aspect-ratio: 1 !important; object-fit: cover !important;
    margin: 0 !important; border-radius: 12px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .2) !important;
    -webkit-mask-image: none !important; mask-image: none !important; filter: none !important;
    transition: transform .6s var(--spring, ease) !important;
  }
  /* Paused, the artwork steps back a little, as in Apple Music. */
  html:not(.x) body:not(.is-playing) #immersive:not(.lyrics-mode):not(.queue-mode) #room-cover { transform: scale(.84) !important; }
  html:not(.x) body.is-playing #immersive #room-cover { transform: none !important; }

  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-title {
    grid-area: title !important; align-self: end !important;
    margin: 0 !important; min-width: 0;
    display: block !important; -webkit-line-clamp: unset !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    font: 700 21px/1.25 var(--font-display) !important; letter-spacing: -.02em !important; color: #fff !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-artist {
    grid-area: artist !important; align-self: start !important; justify-self: start !important;
    max-width: 100%; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
    font: 400 19px/1.3 var(--font-text) !important; letter-spacing: -.02em !important;
    color: rgba(255, 255, 255, .62) !important; background: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-like { grid-area: like !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-options { grid-area: opts !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-like, #room-options) {
    align-self: center !important;
    width: 32px !important; height: 32px !important; margin: 0 !important;
    border-radius: 50% !important; color: #fff !important;
    background-color: rgba(255, 255, 255, .16) !important; background-image: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important; backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 1px rgba(255, 255, 255, .2) !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-like, #room-options)::after { content: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-like, #room-options) svg { width: 16px !important; height: 16px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) #room-like.on { background-color: rgba(255, 255, 255, .92) !important; color: var(--am, #fa2d48) !important; }

  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-progress { grid-area: prog !important; margin: 38px 0 0 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-progress > div { margin-top: 7px !important; font-size: 12px !important; font-weight: 500; color: rgba(255, 255, 255, .5) !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport {
    grid-area: trans !important;
    display: flex !important; align-items: center !important; justify-content: space-evenly !important;
    margin: 14px 0 12px !important; padding: 0 !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport :is(.icon-btn, .main-play) {
    width: 80px !important; height: 64px !important;
    background: none !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport :is(.icon-btn, .main-play)::after { content: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport .icon-btn svg { width: 36px !important; height: 36px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport .main-play svg { width: 44px !important; height: 44px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-volume { grid-area: vol !important; margin: 4px 0 0 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-bottom {
    grid-area: bot !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    margin: 22px 0 0 !important; padding: 0 18px !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-tab { width: 44px !important; height: 44px !important; border-radius: 12px !important; color: rgba(255, 255, 255, .72) !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-tab:not(.on):not([aria-pressed="true"]) { background: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-tab:is(.on, [aria-pressed="true"]) { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-lyrics,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-queue { grid-area: lyr !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):not(.lyrics-mode):not(.queue-mode) :is(.room-lyrics, .room-queue) { display: none !important; }

  /* Lyrics or Playing Next: small artwork beside the title, the panel fills the middle. */
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .immersive-layout {
    grid-template-columns: 56px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto !important;
    grid-template-areas:
      "art title like opts"
      "art artist like opts"
      "lyr lyr lyr lyr"
      "prog prog prog prog"
      "trans trans trans trans"
      "vol vol vol vol"
      "bot bot bot bot" !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .immersive-art {
    container-type: normal; width: 56px !important; height: 56px !important; margin: 0 !important; align-self: center !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .immersive-art > button { width: 56px !important; height: 56px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) #room-cover { border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .3) !important; transform: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) #room-title { font-size: 17px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) #room-artist { font-size: 15px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) :is(.room-lyrics, .room-queue) {
    align-self: stretch !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 16px -28px 0 !important; padding: 0 28px !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%) !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b).queue-mode .room-queue:not([hidden]) { display: flex !important; flex-direction: column; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .room-progress { margin-top: 18px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .room-transport { margin: 6px 0 6px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .room-transport :is(.icon-btn, .main-play) { height: 56px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b):is(.lyrics-mode, .queue-mode) .room-bottom { margin-top: 14px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .lyric-line { font-size: 28px !important; line-height: 1.22 !important; font-weight: 700 !important; letter-spacing: -.02em !important; }

  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-queue-head h3 { font: 700 17px/1.2 var(--font-display) !important; color: #fff !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-mode {
    width: 48px !important; height: 30px !important; border-radius: 999px !important;
    background: rgba(255, 255, 255, .14) !important; box-shadow: none !important;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-mode.on { background: rgba(255, 255, 255, .9) !important; color: #000 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-mode svg { width: 17px !important; height: 17px !important; }

  /* Progress and volume: a thin, crisp line inside a tall invisible touch
     area; it thickens under the finger, as in Apple Music. The fill follows
     --pct (kept current by liquid-glass.js and ios.js). */
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume) {
    -webkit-appearance: none !important; appearance: none !important;
    display: block !important; box-sizing: border-box !important;
    width: 100% !important; height: 30px !important; margin: -12px 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .9) 0 var(--pct, 0%), rgba(255, 255, 255, .24) var(--pct, 0%) 100%)
      center / 100% var(--tk) no-repeat !important;
    --tk: 6px;
    /* Rounded ends: two dots and the middle, cut out of the line. */
    -webkit-mask:
      radial-gradient(circle calc(var(--tk) / 2) at calc(var(--tk) / 2) 50%, #000 96%, transparent 100%),
      radial-gradient(circle calc(var(--tk) / 2) at calc(100% - var(--tk) / 2) 50%, #000 96%, transparent 100%),
      linear-gradient(#000 0 0) center / calc(100% - var(--tk)) 100% no-repeat !important;
    mask:
      radial-gradient(circle calc(var(--tk) / 2) at calc(var(--tk) / 2) 50%, #000 96%, transparent 100%),
      radial-gradient(circle calc(var(--tk) / 2) at calc(100% - var(--tk) / 2) 50%, #000 96%, transparent 100%),
      linear-gradient(#000 0 0) center / calc(100% - var(--tk)) 100% no-repeat !important;
    cursor: pointer;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume).held,
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume):active { --tk: 11px; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume)::-webkit-slider-runnable-track { background: none !important; border: 0 !important; height: 30px; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume)::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 1px !important; height: 30px !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume)::-moz-range-track { background: none !important; border: 0 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume)::-moz-range-progress { background: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) :is(#room-seek, #room-volume)::-moz-range-thumb { opacity: 0 !important; border: 0 !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-progress > div {
    display: flex !important; justify-content: space-between !important;
    margin-top: 3px !important; font-variant-numeric: tabular-nums;
  }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-volume { display: flex !important; align-items: center !important; gap: 12px !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-volume svg { width: 16px !important; height: 16px !important; color: rgba(255, 255, 255, .55) !important; flex: none; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-volume #room-volume { flex: 1 1 auto; width: auto !important; margin: 0 !important; }

  /* Short screens (iPhone SE, small Androids): tighter spacing. */
  @media (max-height: 700px) {
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-layout { padding-top: calc(env(safe-area-inset-top, 0px) + 36px) !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .immersive-art { margin-bottom: 16px !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-progress { margin-top: 22px !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport { margin: 6px 0 4px !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-transport :is(.icon-btn, .main-play) { height: 54px !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-bottom { margin-top: 10px !important; }
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .lyric-line { font-size: 24px !important; }
  }

  /* A touch never leaves a button looking pressed. */
  @media (hover: none) {
    html:not(.x) body #immersive:not(.g26a):not(.g26b) .room-tab:hover:not(.on):not([aria-pressed="true"]) { background: none !important; }
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  html:not(.x) body .player, html:not(.x) body .mobile-tabs { animation: none !important; }
  html:not(.x) body #immersive:not(.g26a):not(.g26b)[open] { animation: none !important; }
}