.kv2-immersive-song {
  display: none;
}

.kv2-song-detail-feed {
  display: contents;
}

.kv2-facebook-composer__send-spinner,
.kv2-facebook-composer__send-success {
  display: none;
}

.kv2-song-comments__sheet-handle,
.kv2-song-comments__sheet-close {
  display: none;
}

@media (max-width: 768px) {
  html:has(body.kv2-mobile-song-detail-page),
  body.kv2-mobile-song-detail-page {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body:has(.kv2-immersive-song) {
    overflow-x: hidden;
    background: #050706;
  }

  body:has(.kv2-immersive-song) .mobile-top-bar,
  body:has(.kv2-immersive-song) .navbar,
  body:has(.kv2-immersive-song) .desktop-navbar,
  body:has(.kv2-immersive-song) .site-footer,
  body:has(.kv2-immersive-song) .footer {
    display: none !important;
  }

  body:has(.kv2-immersive-song) .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: none;
  }

  body:has(.kv2-immersive-song) .song-detail-section,
  body:has(.kv2-immersive-song) .song-detail-section > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body:has(.kv2-immersive-song) .song-detail-layout,
  body:has(.kv2-immersive-song) .desktop-lyrics-panel {
    display: none !important;
  }

  .kv2-song-detail-feed {
    position: relative;
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .kv2-song-detail-feed::-webkit-scrollbar {
    display: none;
  }

  body.kv2-bottom-sheet-open .kv2-song-detail-feed {
    overflow: hidden;
  }

  .kv2-immersive-song {
    --immersive-green: #94a77b;
    --immersive-ink: #050706;
    --immersive-muted: rgba(255, 255, 255, 0.68);
    position: relative;
    display: block;
    width: 100%;
    min-height: 100svh;
    height: 100dvh;
    color: #fff;
    background: var(--immersive-ink);
    isolation: isolate;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .kv2-immersive-song svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .kv2-immersive-topbar {
    /* Empty second-row space must not intercept the compact rail avatar. */
    pointer-events: none;
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    /* Back | Song/LRC+ modes | more, with the Song Info control on its own
       second row beneath the Back button. */
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: auto auto;
    align-items: center;
    /* Row gap tuned so the Song Info control clears Back by ~11px. */
    gap: 10px 6px;
    min-height: 72px;
    padding: max(10px, env(safe-area-inset-top)) 12px 8px;
    background: linear-gradient(180deg, rgba(3, 5, 4, 0.92), rgba(3, 5, 4, 0));
  }

  .kv2-immersive-topbar > * { pointer-events: auto; }

  .kv2-immersive-back { grid-column: 1; grid-row: 1; }

  .kv2-immersive-modes { grid-column: 2; grid-row: 1; }

  .kv2-immersive-more-trigger { grid-column: 3; grid-row: 1; }

  .kv2-immersive-back,
  .kv2-immersive-more-trigger {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    border: 0;
    border-radius: 50%;
    background: rgba(4, 8, 6, 0.42);
    backdrop-filter: blur(12px);
  }

  .kv2-immersive-modes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1.4vw, 8px);
    min-width: 0;
  }

  .kv2-immersive-modes button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 40px;
    height: 40px;
    padding: 0 9px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      min-width 180ms ease;
  }

  .kv2-immersive-modes button span {
    display: none;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .kv2-immersive-modes button.is-active {
    min-width: 68px;
    color: var(--immersive-green);
    border-color: rgba(148, 167, 123, 0.24);
    background:
      linear-gradient(135deg, rgba(148, 167, 123, 0.19), rgba(87, 104, 69, 0.12));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 7px 20px rgba(0, 0, 0, 0.14);
  }

  .kv2-immersive-modes button.is-active span {
    display: inline;
  }

  .kv2-immersive-modes button:disabled {
    opacity: 0.26;
  }

  .kv2-immersive-modes button svg {
    width: 21px;
    height: 21px;
  }

  .kv2-immersive-viewport {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background: #060806;
  }

  .kv2-immersive-mode {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 240ms ease;
  }

  .kv2-immersive-mode.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .kv2-immersive-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(circle at 32% 32%, rgba(148, 167, 123, 0.14), transparent 38%),
      #0a0d0b;
  }

  .kv2-immersive-backdrop img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
    opacity: 1;
    filter: none;
    transform: none;
    image-rendering: auto;
  }

  .kv2-immersive-song [data-kv2-mode-panel="song"] [data-kv2-main-artwork] {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-kv2-artwork-effect-viewport]::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background:
      radial-gradient(
        circle at 50% 42%,
        var(--ambient-primary, rgba(105, 255, 142, 0.18)),
        transparent 56%
      ),
      radial-gradient(
        circle at 24% 72%,
        var(--ambient-secondary, rgba(58, 143, 255, 0.1)),
        transparent 46%
      );
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .kv2-immersive-backdrop::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    bottom: max(0px, calc(100% - 100dvh));
    background:
      linear-gradient(
        180deg,
        rgba(3, 5, 4, 0.16) 8%,
        rgba(3, 5, 4, 0.02) 40%,
        rgba(3, 5, 4, 0.12) 57%,
        rgba(3, 5, 4, 0.48) 73%,
        rgba(3, 5, 4, 0.78) 88%,
        rgba(3, 5, 4, 0.9) 100%
      ),
      linear-gradient(90deg, transparent 52%, rgba(3, 5, 4, 0.15));
  }

  .kv2-immersive-song [data-kv2-mode-panel="song"] .kv2-immersive-backdrop::after {
    opacity: 0.92;
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .kv2-immersive-song.is-artwork-effect-running[data-active-mode="song"][data-playback-state="playing"][data-artwork-effect="slow-zoom-in"]
  [data-kv2-mode-panel="song"] [data-kv2-main-artwork] {
    animation: kv2-artwork-slow-zoom-in 20s ease-in-out infinite alternate;
    will-change: transform;
  }

  .kv2-immersive-song[data-active-mode="song"][data-playback-state="paused"]
  [data-kv2-artwork-effect-viewport]::before {
    opacity: 0.38;
  }

  .kv2-immersive-song[data-active-mode="song"][data-playback-state="playing"]
  [data-kv2-artwork-effect-viewport]::before {
    opacity: 0.58;
  }

  .kv2-immersive-song[data-active-mode="song"][data-playback-state="playing"]
  [data-kv2-mode-panel="song"] .kv2-immersive-backdrop::after {
    opacity: 1;
  }

  @keyframes kv2-artwork-slow-zoom-in {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(0, 0, 0) scale(1.025); }
  }

  .kv2-immersive-backdrop--mv img {
    object-position: center;
  }

  .kv2-immersive-backdrop--lyrics img {
    filter: blur(16px) brightness(0.42) saturate(1.2);
    transform: scale(1.15);
  }

  .kv2-immersive-backdrop--karaoke img {
    filter: brightness(0.48) saturate(1.12);
  }

  .kv2-immersive-play-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    color: #fff;
    border: 0;
    background: transparent;
  }

  .kv2-immersive-play-button {
    position: absolute;
    left: 50%;
    top: 48%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(8, 13, 10, 0.34));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 14px 38px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
  }

  .kv2-immersive-play-surface:active .kv2-immersive-play-button {
    transform: translate(-50%, -50%) scale(0.96);
  }

  .kv2-immersive-play-button svg {
    width: 29px;
    height: 29px;
    margin-left: 3px;
    fill: currentColor;
    stroke: none;
  }

  .kv2-immersive-pause-icon {
    display: none;
    margin-left: 0 !important;
  }

  .kv2-immersive-play-surface[data-playback-state="playing"] .kv2-immersive-play-icon {
    display: none;
  }

  .kv2-immersive-play-surface[data-playback-state="playing"] .kv2-immersive-pause-icon {
    display: block;
  }

  .kv2-immersive-play-surface[data-playback-state="playing"]:not(.has-user-feedback) .kv2-immersive-play-button {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }

  .kv2-immersive-engine-proxy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .kv2-immersive-lyrics-preview,
  .kv2-immersive-karaoke-copy {
    position: absolute;
    z-index: 3;
    top: 24%;
    left: 28px;
    right: 82px;
    display: grid;
    gap: 8px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.72);
  }

  .kv2-immersive-lyrics-preview span,
  .kv2-immersive-karaoke-copy span {
    color: var(--immersive-green);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .kv2-immersive-lyrics-preview strong,
  .kv2-immersive-karaoke-copy strong {
    font-size: clamp(2rem, 9vw, 3.8rem);
    line-height: 0.98;
  }

  .kv2-immersive-info {
    position: absolute;
    z-index: 50;
    left: 20px;
    right: 82px;
    bottom: calc(max(0px, 100% - 100dvh) + max(94px, env(safe-area-inset-bottom) + 82px));
    display: flex;
    align-items: flex-end;
    gap: 13px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.85);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0));
    transition: filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.kv2-mobile-song-detail-page:has(.global-player-container[data-player-visible="true"])
  .kv2-immersive-info {
    visibility: hidden;
  }

  .kv2-immersive-song[data-active-mode="song"][data-playback-state="playing"]
  .kv2-immersive-info {
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.24));
  }

  .kv2-immersive-info__art {
    flex: 0 0 68px;
    width: 68px;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  }

  .kv2-immersive-song .kv2-immersive-info h1 {
    max-width: 14ch;
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(0.75rem, 3.6vw, 1.05rem);
    line-height: 1.05;
  }

  .kv2-immersive-info p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.9rem;
  }

  .kv2-immersive-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
  }

  .kv2-immersive-rail {
    position: absolute;
    z-index: 70;
    right: 10px;
    /* Bound the rail between the top controls and the mobile player dock. */
    top: var(--song-rail-top, calc(max(10px, env(safe-area-inset-top)) + 40px));
    bottom: var(--song-rail-bottom, calc(100% - 100dvh + var(--mobile-nav-height, 0px) + var(--player-height-mobile) + var(--space-md)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--song-rail-gap, clamp(12px, 2.1dvh, 16px));
  }

  .kv2-immersive-rail__artist {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    color: #fff;
    font-weight: 850;
    border: 1.5px solid rgba(225, 232, 217, 0.76);
    border-radius: 50%;
    background: #193c24;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(8, 13, 10, 0.28);
  }

  .kv2-immersive-rail__artist img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .kv2-immersive-rail__action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 54px;
    min-height: 48px;
    padding: 0;
    color: rgba(240, 243, 236, 0.82);
    font-size: 0.67rem;
    font-weight: 750;
    border: 0;
    background: transparent;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  }

  /* Icon-only actions retain their explicit accessible button names. */
  .kv2-immersive-rail [data-playlist-trigger] > span,
  .kv2-immersive-rail [data-kv2-mobile-share] > span,
  .kv2-immersive-rail [data-kv2-sheet-open="more"] > span {
    display: none;
  }

  .kv2-immersive-rail__action svg {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 7px;
    color: rgba(240, 243, 236, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(5, 9, 7, 0.28));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 7px 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.38));
  }

  .kv2-immersive-rail__action svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
  }

  .kv2-immersive-rail__action.liked svg path {
    fill: currentColor;
    stroke: currentColor;
  }

  .kv2-immersive-rail__action.liked svg {
    color: var(--kv2-kelibatmu-green);
    background: transparent;
  }

  .kv2-immersive-rail__action svg circle {
    fill: currentColor;
    stroke: none;
  }

  body.kv2-mobile-song-detail-page .kv2-mbn {
    border-top: 1px solid rgba(224, 232, 217, 0.1);
    background:
      linear-gradient(180deg, rgba(14, 19, 16, 0.72), rgba(5, 8, 7, 0.88));
    box-shadow:
      0 -16px 38px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(28px) saturate(1.24);
    -webkit-backdrop-filter: blur(28px) saturate(1.24);
  }

  body.kv2-mobile-song-detail-page .kv2-mbn__container {
    padding-top: 7px;
  }

  body.kv2-mobile-song-detail-page .kv2-mbn__item:hover {
    background: rgba(148, 167, 123, 0.08);
  }

  body.kv2-mobile-song-detail-page .kv2-mbn__item--active .kv2-mbn__icon,
  body.kv2-mobile-song-detail-page .kv2-mbn__item--search.kv2-mbn__item--active .kv2-mbn__icon {
    stroke: var(--immersive-green, #94a77b);
  }

  body.kv2-mobile-song-detail-page .kv2-mbn__item--active .kv2-mbn__label {
    color: #a8b991;
  }

  .kv2-comment-marquee {
    position: absolute; z-index: 55;
    inset-inline: 4% 24%; bottom: 24%; height: 24%; max-height: 240px;
    --activity-row: min(5.5dvh, 48px);
    overflow: hidden; pointer-events: none;
  }
  .kv2-comment-marquee__item {
    position: absolute; left: 0; bottom: 0;
    display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px;
    width: min(100%, 320px); height: calc(var(--activity-row) - 4px); box-sizing: border-box;
    padding: 3px 7px; color: #fff; border: 0; border-radius: 12px;
    background: rgba(7, 12, 9, .15); backdrop-filter: blur(2px);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(100%);
    transition: none; will-change: transform, opacity;
  }
  .kv2-comment-marquee__item.is-active {
    visibility: visible;
  }
  .kv2-comment-marquee__item[data-activity-kind="like"] { grid-template-columns: minmax(0, 1fr); background: transparent; backdrop-filter: none; }
  .kv2-comment-marquee__like-identity { position: relative; width: min(36px, calc(var(--activity-row) - 10px)); height: min(36px, calc(var(--activity-row) - 10px)); }
  .kv2-comment-marquee__like-identity > .kv2-comment-marquee__avatar { width: 100%; height: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
  .kv2-comment-marquee__like-badge { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #07120d; border: 1px solid rgba(168,185,145,.45); box-sizing: border-box; }
  .kv2-comment-marquee__like-badge > svg { width: 11px; height: 11px; }
  .kv2-comment-marquee__item > svg { width: 22px; height: 22px; }
  .kv2-comment-marquee__avatar { display: grid; place-items: center; width: 24px; height: 24px; overflow: hidden; font-size: .7rem; border-radius: 50%; background: rgba(19,77,55,.3); }
  /* Comment portraits use the accepted Like portrait geometry; row/clock stay unchanged. */
  .kv2-comment-marquee__item[data-activity-kind="comment"] {
    grid-template-columns: min(36px, calc(var(--activity-row) - 10px)) minmax(0, 1fr);
  }
  .kv2-comment-marquee__item[data-activity-kind="comment"] > .kv2-comment-marquee__avatar {
    width: min(36px, calc(var(--activity-row) - 10px));
    height: min(36px, calc(var(--activity-row) - 10px));
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
  }
  .kv2-comment-marquee__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .kv2-comment-marquee__copy { display: grid; gap: 1px; min-width: 0; }
  .kv2-comment-marquee__copy strong, .kv2-comment-marquee__copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kv2-comment-marquee__copy strong { font-size: .7rem; line-height: 1.15; }
  .kv2-comment-marquee__copy > span { color: rgba(255,255,255,.85); font-size: .65rem; line-height: 1.15; }
  .kv2-comment-marquee.is-paused { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .kv2-comment-marquee__item { transition: none; }
  }

  .kv2-song-feed__loader {
    position: relative;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 1px;
    overflow: visible;
    color: rgba(255, 255, 255, 0.72);
    background: #050706;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .kv2-song-feed__loader.is-loading,
  .kv2-song-feed__loader.is-error {
    height: 36px;
    opacity: 1;
  }

  .kv2-song-feed__loader span {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-top-color: var(--immersive-green);
    border-radius: 50%;
    animation: kv2-feed-loader-spin 700ms linear infinite;
  }

  .kv2-song-feed__loader.is-error span {
    display: none;
  }

  .kv2-song-feed__loader em {
    font-size: 0.75rem;
    font-style: normal;
  }

  .kv2-pull-refresh {
    position: fixed;
    z-index: 11980;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(9, 14, 11, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -18px);
    transition: opacity 140ms ease, transform 180ms ease;
  }

  .kv2-pull-refresh.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .kv2-pull-refresh span {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.24);
    border-top-color: var(--immersive-green, #4bd366);
    border-radius: 50%;
  }

  .kv2-pull-refresh.is-ready span {
    border-color: var(--immersive-green, #4bd366);
  }

  .kv2-pull-refresh.is-refreshing span {
    animation: kv2-feed-loader-spin 650ms linear infinite;
  }

  .kv2-pull-refresh em {
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 720;
    white-space: nowrap;
  }

  @keyframes kv2-feed-loader-spin {
    to { transform: rotate(360deg); }
  }

  .kv2-immersive-sheet-backdrop {
    position: fixed;
    z-index: 12000;
    inset: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    transition: opacity 220ms ease;
  }

  .kv2-immersive-sheet-backdrop.is-open {
    opacity: 1;
  }

  .kv2-immersive-sheet {
    position: fixed;
    z-index: 12020;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 4px;
    max-height: 78dvh;
    padding: 10px 18px max(22px, env(safe-area-inset-bottom));
    overflow-y: auto;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: rgba(14, 18, 16, 0.98);
    box-shadow: 0 -22px 64px rgba(0, 0, 0, 0.46);
    transform: translateY(105%);
    transition: transform 240ms cubic-bezier(0.2, 0.78, 0.2, 1);
  }

  .kv2-immersive-sheet.is-open {
    transform: translateY(0);
  }

  .kv2-immersive-sheet.is-dragging {
    transition: none;
  }

  .kv2-immersive-sheet__handle,
  .kv2-song-comments__sheet-handle {
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    touch-action: none;
    cursor: grab;
  }

  .kv2-immersive-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 10px;
  }

  .kv2-immersive-sheet h2 {
    margin: 0;
    font-size: 1.15rem;
  }

  .kv2-immersive-sheet header button,
  .kv2-song-comments__sheet-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #fff;
    font-size: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }

  .kv2-immersive-sheet > a,
  .kv2-immersive-sheet > button,
  .kv2-immersive-sheet form button {
    width: 100%;
    min-height: 52px;
    padding: 0 10px;
    color: #fff;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
  }

  body.kv2-bottom-sheet-open {
    overflow: hidden;
  }

  body.kv2-bottom-sheet-open .kv2-immersive-rail {
    opacity: 0;
    pointer-events: none;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments {
    position: fixed;
    z-index: 12020;
    left: 0;
    right: 0;
    bottom: var(
      --comment-composer-bottom,
      var(--kv2-comment-keyboard-offset, 0px)
    );
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: min(82dvh, var(--comment-sheet-available-height, 760px), 760px);
    max-height: min(
      var(--comment-sheet-available-height, calc(100dvh - 8px)),
      calc(100dvh - 8px)
    );
    margin: 0;
    padding: 10px 16px 0;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: rgba(12, 16, 14, 0.98);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.52);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(105%);
    transition:
      transform 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
      opacity 160ms ease,
      visibility 0s linear 240ms;
    will-change: bottom, height, transform;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments.is-dragging {
    transition: none;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__header {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__sheet-handle {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__header > div:not(.kv2-song-comments__sheet-handle) {
    padding-top: 12px;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--comment-composer-height, 72px) + 12px);
    scroll-padding-bottom: calc(var(--comment-composer-height, 72px) + 12px);
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__composer {
    position: absolute;
    z-index: 4;
    right: 16px;
    left: 16px;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 14, 0.98);
  }

  body:has(.kv2-immersive-song) .kv2-song-comments .kv2-facebook-composer__bar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__composer textarea,
  body:has(.kv2-immersive-song) .kv2-song-comments__reply textarea {
    min-height: 44px;
    font-size: 16px;
  }

  body:has(.kv2-immersive-song) .kv2-song-comments__composer:focus-within textarea {
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 18px;
  }

  .kv2-comment-composer__emoji-row {
    display: none;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 1px 42px 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .kv2-comment-composer__emoji-row::-webkit-scrollbar {
    display: none;
  }

  .kv2-song-comments__composer:focus-within .kv2-comment-composer__emoji-row,
  .kv2-song-comments__composer.is-emoji-open .kv2-comment-composer__emoji-row {
    display: flex;
  }

  .kv2-song-comments .kv2-comment-composer__emoji-row button,
  .kv2-song-comments .kv2-comment-composer__tool {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    color: #fff;
    font-size: 1.05rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }

  .kv2-song-comments .kv2-comment-composer__emoji-row button:active,
  .kv2-song-comments .kv2-comment-composer__tool:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.94);
  }

  .kv2-comment-composer__controls {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .kv2-song-comments .kv2-comment-composer__controls .kv2-facebook-composer__send {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(75, 211, 102, 0.38);
    color: #041208;
    background: linear-gradient(145deg, #72e487, #35b957);
    box-shadow: 0 6px 18px rgba(42, 188, 78, 0.24);
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  }

  .kv2-song-comments .kv2-comment-composer__controls .kv2-facebook-composer__send:disabled {
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
  }

  .kv2-song-comments .kv2-facebook-composer__send[data-state="loading"] {
    cursor: wait;
  }

  .kv2-song-comments .kv2-facebook-composer__send[data-state="loading"] .kv2-facebook-composer__send-icon,
  .kv2-song-comments .kv2-facebook-composer__send[data-state="success"] .kv2-facebook-composer__send-icon {
    display: none;
  }

  .kv2-song-comments .kv2-facebook-composer__send[data-state="loading"] .kv2-facebook-composer__send-spinner {
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(4, 18, 8, 0.28);
    border-top-color: #041208;
    border-radius: 50%;
    animation: kv2-feed-loader-spin 650ms linear infinite;
  }

  .kv2-song-comments .kv2-facebook-composer__send[data-state="success"] .kv2-facebook-composer__send-success {
    display: inline;
    font-size: 1rem;
  }

  .kv2-comment-composer__feedback {
    min-height: 16px;
    margin: 4px 42px 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .kv2-comment-composer__feedback[data-variant="error"] {
    color: #ff9494;
  }

  body.kv2-comment-keyboard-open:has(.kv2-immersive-song) .kv2-song-comments {
    height: min(var(--comment-sheet-available-height, calc(100dvh - 8px)), 760px);
    max-height: min(
      var(--comment-sheet-available-height, calc(100dvh - 8px)),
      calc(100dvh - 8px)
    );
    border-radius: 18px 18px 0 0;
  }

  body.kv2-comment-keyboard-open .kv2-mbn,
  body.kv2-comment-keyboard-open .global-player-container {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
    transition: none !important;
  }

  body:has(.kv2-immersive-song) .playlist-modal-overlay {
    z-index: 12000;
    align-items: flex-end;
    padding: 0;
  }

  body:has(.kv2-immersive-song) .playlist-modal {
    max-width: none;
    max-height: 82dvh;
    border-radius: 24px 24px 0 0;
    transform: translateY(105%);
  }

  body:has(.kv2-immersive-song) .playlist-modal-overlay.active .playlist-modal {
    transform: translateY(0);
  }

  body:has(.kv2-immersive-song) .playlist-modal-header {
    padding: 24px 20px 14px;
  }

  body:has(.kv2-immersive-song) .playlist-modal-body {
    max-height: 50dvh;
  }
}

@media (max-width: 390px) {
  .kv2-immersive-topbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding-inline: 8px;
  }

  .kv2-immersive-back,
  .kv2-immersive-more-trigger {
    width: 38px;
    height: 38px;
  }

  .kv2-immersive-modes {
    gap: 0;
  }

  .kv2-immersive-modes button {
    min-width: 36px;
    padding-inline: 7px;
  }

  .kv2-immersive-modes button.is-active {
    min-width: 59px;
  }

  .kv2-immersive-modes button span {
    font-size: 0.64rem;
  }

  .kv2-immersive-rail {
    right: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv2-immersive-song [data-kv2-main-artwork],
  .kv2-immersive-song [data-kv2-artwork-effect-viewport]::before {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .kv2-immersive-song [data-kv2-artwork-effect-viewport]::before {
    opacity: 0 !important;
  }

  .kv2-immersive-song [data-kv2-artwork-effect-viewport]::before,
  .kv2-immersive-song .kv2-immersive-backdrop::after,
  .kv2-immersive-song .kv2-immersive-info {
    transition: none !important;
  }

  .kv2-song-feed__loader span,
  .kv2-pull-refresh.is-refreshing span {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .kv2-immersive-play-button,
  .kv2-song-feed__loader span,
  .kv2-immersive-mode,
  .kv2-immersive-sheet,
  body:has(.kv2-immersive-song) .kv2-song-comments,
  body:has(.kv2-immersive-song) .playlist-modal {
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .kv2-immersive-rail__action.song-like-btn.liked,
  .kv2-immersive-rail__action.song-like-btn.is-liked { background: transparent; }
}

/* ==========================================================================
   Song Info
   The control sits on the topbar's second row, directly beneath Back and
   centred on it. The sheet reuses the existing .kv2-immersive-sheet framework
   (position: fixed, bottom-anchored, 78dvh max-height, own scroll, safe-area
   padding) so no parallel modal system is introduced.
   ========================================================================== */
@media (max-width: 768px) {
  /* 42px interactive target; the visible circle stays 33px and never moves. */
  .kv2-immersive-song .kv2-immersive-info-trigger {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    /* Quieter glyph; artwork shows through the circle behind it. */
    color: rgba(255, 255, 255, 0.78);
    -webkit-tap-highlight-color: transparent;
  }

  /* Stationary translucent circle - light enough to read as part of the
     artwork rather than a solid action button. */
  .kv2-immersive-song .kv2-immersive-info-trigger::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 33px;
    height: 33px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
  }

  /* No animated halo: the breathing now lives on the glyph itself. */
  .kv2-immersive-song .kv2-immersive-info-trigger::after {
    content: none;
  }

  /* Classic serif/italic lowercase "i" information glyph. */
  .kv2-immersive-song .kv2-immersive-info-trigger svg {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
  }

  /* Only the glyph's brightness breathes - no scale, position or border
     animation, so the circle and the glyph's footprint stay stationary. */
  .kv2-immersive-song .kv2-immersive-info-trigger text {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    fill: #ffffff;
    stroke: none;
    opacity: 0.48;
    animation: kv2-info-glyph-breathe 5.2s ease-in-out infinite;
  }

  .kv2-immersive-song .kv2-immersive-info-trigger:hover {
    color: #ffffff;
  }

  .kv2-immersive-song .kv2-immersive-info-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
  }

  /* --- sheet geometry is unchanged; only the content presentation changes -- */
  .kv2-immersive-sheet--info {
    max-width: 100%;
    gap: 10px;
    /* Zero the top padding so the sticky header sits at the very top of the
       scrollport; otherwise content scrolls through the padding/handle strip
       above the header and bleeds over the title. */
    padding-top: 0;
    /* Cards sit close to the edge so their inner text keeps ~20px margins. */
    padding-inline: 8px;
  }

  .kv2-immersive-sheet--info header {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Bleed to the sheet edges so the opaque background covers the full width. */
    margin: 0 -8px;
    padding: 10px 20px 8px;
    /* Fully opaque (not the sheet's 0.98 alpha) so scrolled content cannot
       ghost through the sticky header. */
    background: rgb(14, 18, 16);
  }

  /* .kv2-immersive-song uses isolation:isolate, which traps the sheet's
     z-index:12020 inside its own stacking context. Elements fixed in the ROOT
     stacking context therefore paint OVER any immersive bottom sheet:
       - .kv2-mbn (mobile bottom nav, z-index 210)
       - .global-player-container (floating player, z-index 300)
     Both would otherwise cover the last content rows. Song Info and the
     right-rail More sheet own the foreground while open; the separate player
     options menu does not use either sheet selector.

     This is a layering/opacity state only: no playback logic, no DOM changes
     and no audio element involvement, so playback, progress and play/pause
     state are untouched and the player simply returns when the sheet closes. */
  body.kv2-bottom-sheet-open:has(.kv2-immersive-sheet--info.is-open, .kv2-immersive-sheet--more.is-open) .kv2-mbn,
  body.kv2-bottom-sheet-open:has(.kv2-immersive-sheet--info.is-open, .kv2-immersive-sheet--more.is-open) .global-player-container {
    opacity: 0;
    pointer-events: none;
  }

  .global-player-container {
    transition: opacity 180ms ease;
  }

  /* Restrained content surface for ABOUT / STORY / RELEASE DETAILS. */
  .kv2-immersive-info-block {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
  }

  .kv2-immersive-info-block h3 {
    margin: 0 0 11px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(148, 167, 123, 0.78);
  }

  /* theme-light.css loads AFTER this file and colours headings through
     :root[data-theme-preference="system"] :where(h1..h6) - specificity (0,2,0),
     which outranks the plain class selector above. The muted-green heading
     colour therefore has to be pinned at matching-or-higher specificity. */
  :root[data-theme-preference] .kv2-immersive-song .kv2-immersive-info-block h3 {
    color: rgba(148, 167, 123, 0.78);
  }

  /* ABOUT / STORY read as secondary descriptive metadata: lighter, italic and
     quieter than the headings. Only the prose body is italicised. */
  .kv2-immersive-info-block p {
    margin: 0;
    font-size: 15.5px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    text-align: left;
    text-wrap: pretty;
    color: rgba(255, 255, 255, 0.68);
    overflow-wrap: anywhere;
    /* Preserves any intentional line breaks already present in the DB text. */
    white-space: pre-line;
  }

  /* --- release metadata: compact rows, not content cards ------------------ */
  .kv2-immersive-info-ids {
    display: grid;
    gap: 14px;
    margin: 0;
  }

  .kv2-immersive-info-id {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .kv2-immersive-info-id dt {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
  }

  .kv2-immersive-info-id dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-width: 0;
  }

  /* Identifiers stay upright (never italic prose) but sit in the same quiet
     metadata hierarchy as the rest of Song Info. */
  .kv2-immersive-info-id__value {
    min-width: 0;
    font-size: 15.5px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.68);
    overflow-wrap: anywhere;
  }

  /* Optical compensation for ink density. An ISRC is two letters plus ten
     digits, so at an identical colour it carries ~9% more ink than an all-digit
     UPC and reads noticeably brighter on device. Measured glyph coverage here
     is 0.09096 (ISRC) vs 0.08362 (UPC) = ratio 1.088, so the UPC alpha is
     raised 0.68 x 1.088 = 0.74 to equalise the perceived brightness of the two
     rows. This is systematic (every ISRC in the catalogue is letter-prefixed),
     so a single constant applies across songs. */
  .kv2-immersive-info-id--upc .kv2-immersive-info-id__value {
    color: rgba(255, 255, 255, 0.74);
  }

  .kv2-immersive-song .kv2-immersive-info-id__copy {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
  }

  .kv2-immersive-song .kv2-immersive-info-id__copy svg {
    width: 16px;
    height: 16px;
  }

  .kv2-immersive-song .kv2-immersive-info-id__copy:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  .kv2-immersive-song .kv2-immersive-info-id__copy:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
  }

  .kv2-immersive-song .kv2-immersive-info-id__copy.is-copied {
    color: #a8dcb2;
    border-color: rgba(168, 220, 178, 0.45);
    background: rgba(168, 220, 178, 0.1);
  }
}

@keyframes kv2-info-glyph-breathe {
  0%,
  100% {
    opacity: 0.48;
  }

  50% {
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv2-immersive-song .kv2-immersive-info-trigger text {
    animation: none !important;
    /* Static, clearly visible glyph when motion is not wanted. */
    opacity: 0.8;
  }
}

/* ==========================================================================
   Clear Screen (swipe) - presentation state only.
   A horizontal swipe that begins in the middle of the artwork fades the Song
   Details chrome away and back. Kept visible and functional: the artwork, the
   .kv2-immersive-play-surface tap target, the floating .global-player-container
   and the Song Info trigger. The topbar itself is deliberately NOT hidden
   because .kv2-immersive-info-trigger lives inside it.
   ========================================================================== */
@media (max-width: 768px) {
  /* Fade plumbing lives on the normal state so both entering and leaving the
     state animate. Existing transitions are preserved where present. */
  .kv2-immersive-song .kv2-immersive-back,
  .kv2-immersive-song .kv2-immersive-modes,
  .kv2-immersive-song .kv2-immersive-more-trigger,
  .kv2-immersive-song .kv2-immersive-rail,
  .kv2-immersive-song .kv2-comment-marquee {
    transition: opacity 280ms ease;
  }

  .kv2-immersive-song .kv2-immersive-info {
    transition: filter 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
  }

  body:has(.kv2-immersive-song) .kv2-mbn {
    transition: opacity 280ms ease;
  }

  /* Chrome fades out. None of these stay clickable while hidden. */
  .kv2-immersive-song.is-clear-screen .kv2-immersive-back,
  .kv2-immersive-song.is-clear-screen .kv2-immersive-modes,
  .kv2-immersive-song.is-clear-screen .kv2-immersive-more-trigger,
  .kv2-immersive-song.is-clear-screen .kv2-immersive-rail,
  .kv2-immersive-song.is-clear-screen .kv2-immersive-info,
  .kv2-immersive-song.is-clear-screen .kv2-comment-marquee,
  .kv2-immersive-song.is-clear-screen .kv2-immersive-play-button {
    opacity: 0;
    pointer-events: none;
  }

  /* Feed infinite-scroll sentinel row. Pull-to-refresh uses a separate
     .kv2-pull-refresh element, which is deliberately left untouched so its
     feedback and behaviour are unchanged. */
  .kv2-immersive-song.is-clear-screen .kv2-song-feed__loader {
    opacity: 0;
    pointer-events: none;
  }

  /* Global bottom navigation; lives outside the slide root. */
  body:has(.kv2-immersive-song.is-clear-screen) .kv2-mbn {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv2-immersive-song .kv2-immersive-back,
  .kv2-immersive-song .kv2-immersive-modes,
  .kv2-immersive-song .kv2-immersive-more-trigger,
  .kv2-immersive-song .kv2-immersive-rail,
  .kv2-immersive-song .kv2-comment-marquee,
  .kv2-immersive-song .kv2-immersive-info,
  body:has(.kv2-immersive-song) .kv2-mbn {
    transition: none !important;
  }
}