.music-tabs { display:flex; gap:.35rem; flex-wrap:nowrap; overflow-x:auto; }
.music-tabs .tab-nav__link { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; flex-shrink:0; min-width:44px; min-height:44px; box-sizing:border-box; }
.music-tabs svg { width:1.2rem; height:1.2rem; flex:none; }
.music-tabs.is-compact .music-tab-label { display:none; }
.music-tabs.is-compact .tab-nav__link { flex:1 0 44px; padding-inline:.5rem; }
.sos-intro { margin-block:2rem; max-width:55rem; }
.sos-intro h1 { font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; }
.sos-albums { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--space-5); }
.sos-album-card { min-width:0; display:flex; flex-direction:column; padding:var(--space-3); border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent); border-radius:var(--radius-lg); background:color-mix(in srgb,var(--color-surface-1) 85%,transparent); transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
.sos-album-card:hover,.sos-album-card:focus-within { border-color:var(--color-link); box-shadow:var(--shadow-raised); }
.sos-album-card__body { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:var(--space-2); padding:var(--space-4) var(--space-1) var(--space-1); }
.sos-album-card h2 { margin:0; font-size:var(--font-size-xl); line-height:var(--line-height-tight); }
.sos-album-card__meta { margin:0 0 var(--space-2); color:var(--color-text-muted); font-size:var(--font-size-sm); font-variant-numeric:tabular-nums; }
.sos-album-card__body > .btn { margin-top:auto; width:100%; text-align:center; box-sizing:border-box; min-height:44px; background:var(--color-surface-2); color:var(--color-text); border:1px solid color-mix(in srgb,var(--color-border) 50%,transparent); }
.sos-album-card__body > .btn:hover { background:var(--color-action-soft); border-color:var(--color-link); text-decoration:none; }
.sos-cover { position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--radius-md); background:var(--color-surface-2); }
.sos-cover img { width:100%; height:100%; object-fit:cover; }
.sos-album-card__heading { display:flex; align-items:center; justify-content:space-between; width:100%; gap:var(--space-2); }
.sos-latest-release { flex:none; padding:.15rem .45rem; border:1px solid var(--color-border); border-radius:var(--radius-pill); color:var(--color-text-muted); font-size:var(--font-size-xs); line-height:1.4; }
.sos-cover-placeholder { display:grid; place-items:center; height:100%; font-size:5rem; }
.sos-album-hero { display:grid; grid-template-columns:minmax(180px,300px) 1fr; align-items:center; gap:2rem; margin-block:1.5rem 2.5rem; }
.sos-album-hero h1 { font-size:clamp(2.4rem,7vw,4rem); line-height:1.1; margin-block:.5rem; }
.sos-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-block:var(--space-4); }
.sos-actions .btn { min-height:44px; align-self:center; }
.sos-actions .btn:not(.btn-primary) { border:1px solid var(--color-border); background:var(--color-surface-1); color:var(--color-text); }
.sos-actions .btn:not(.btn-primary):hover { border-color:var(--color-link); background:var(--color-action-soft); }
.sos-library-actions { padding-block:var(--space-3); gap:var(--space-3) var(--space-4); }
.sos-library-summary { color:var(--color-text-muted); font-size:var(--font-size-sm); }
[data-sos-library-status]:empty { display:none; }
.sos-track { border-bottom:1px solid var(--color-border); padding-block:.45rem; }
.sos-track:nth-child(even) { background:var(--color-surface-1); }
.sos-track.is-playing { background:var(--color-surface-2); }
.sos-track-row { display:flex; align-items:center; gap:.8rem; padding:.4rem; }
.sos-track-play { position:relative; flex:none; width:44px; height:44px; border:0; background:transparent; color:inherit; cursor:pointer; }
.sos-track-play:disabled { cursor:default; opacity:.5; }
.sos-play-symbol { display:none; }
.sos-track-play:not(:disabled):hover [data-sos-number], .sos-track.is-playing [data-sos-number] { display:none; }
.sos-track-play:not(:disabled):hover .sos-play-symbol, .sos-track.is-playing .sos-play-symbol { display:inline; }
.sos-track-identity { flex:1; min-width:0; }
.sos-track-identity h2 { font-size:1rem; margin:0; overflow-wrap:anywhere; }
.sos-track-identity p { margin:0; font-size:.9rem; color:var(--color-text-muted); }
.sos-duration { font-variant-numeric:tabular-nums; white-space:nowrap; }
.sos-badge { font-size:.7rem; padding:.15rem .4rem; border:1px solid var(--color-border); border-radius:var(--radius-pill); }
.sos-track-details { padding:0 .8rem .4rem 3.7rem; }
.sos-track-details summary { cursor:pointer; min-height:28px; font-size:.8rem; }
.sos-track-details dt { font-weight:bold; }.sos-track-details dd { margin:0 0 .5rem; }
.sos-copy { white-space:pre-line; overflow-wrap:anywhere; }
.sos-feature { padding:2rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); margin-bottom:2rem; }
/* The persistent player remains the audio owner. These controls follow its fold pattern. */
.sos-transport { display:flex; flex:none; align-items:center; gap:var(--space-4); min-width:0; }
.sos-transport[hidden] { display:none; }
.sos-queue-position { flex:none; width:9ch; font-size:var(--font-size-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss-player.is-sos { padding-bottom:var(--space-4); }
.ss-player > .sos-upnext { display:none; position:absolute; bottom:.35rem; left:50%; transform:translateX(-50%); width:70%; min-width:0; color:var(--color-text-muted); font-size:.8rem; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.ss-player.is-sos > .sos-upnext:not(:empty) { display:block; }
.sos-open-experience { display:inline-flex; flex:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid color-mix(in srgb,var(--color-border) 40%,transparent); border-radius:var(--radius-md); color:var(--color-text-muted); background:transparent; cursor:pointer; }
.sos-open-experience:hover { color:var(--color-link); border-color:var(--color-link); background:var(--color-accent-a08); }
.sos-open-experience svg { width:20px; height:20px; }
.sos-queue-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-pill); color:var(--color-text-muted); background:var(--color-surface-1); cursor:pointer; }
.sos-queue-toggle svg { width:18px; height:18px; }
.ss-player.is-sos .sos-footer-shuffle,.ss-player.is-sos.is-track .ss-player__prev,.ss-player.is-sos.is-track .ss-player__next { display:inline-flex; }
.ss-player.is-sos.is-show :is(.ss-player__back30,.ss-player__fwd30,.ss-player__zoombtn,.ss-player__zoomstrip) { display:none; }
html.ss-show.ss-zoom:has(.ss-player.is-sos) { --player-zoom-h:0px; }
.sos-queue-toggle[aria-pressed=true] { color:var(--color-on-action); background:var(--color-action); border-color:var(--color-action); box-shadow:0 0 0 2px var(--color-action-soft); }
.ss-player:not(.is-sos) .sos-footer-shuffle { display:none; }
.ss-player.is-sos :is(.ss-player__prev,.ss-player__next):disabled { opacity:.4; cursor:default; }

/* One bounded surface holds the stage and every playback control, including fullscreen. */
.sos-experience { box-sizing:border-box; width:min(1040px,calc(100vw - 2rem)); height:min(800px,calc(100dvh - 2rem)); max-width:100vw; max-height:100dvh; padding:0; overflow:hidden; background:var(--color-surface-1); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-floating); }
.sos-experience::backdrop { background:var(--overlay-backdrop); }
.sos-experience__surface { display:flex; flex-direction:column; gap:var(--space-3); box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0; overflow:auto; padding:var(--space-5); background:var(--color-surface-1); }
.sos-experience__surface > :not(.sos-stage) { flex-shrink:0; }
.sos-experience.is-expanded { position:fixed; inset:0; width:100vw; height:100dvh; margin:0; border:0; border-radius:0; }
.sos-experience__surface:fullscreen { width:100vw; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; padding:max(var(--space-5),env(safe-area-inset-top)) max(var(--space-5),env(safe-area-inset-right)) max(var(--space-5),env(safe-area-inset-bottom)) max(var(--space-5),env(safe-area-inset-left)); }
.sos-experience__header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.sos-experience__identity { min-width:0; }
.sos-experience__identity p { margin:var(--space-1) 0 0; color:var(--color-text-muted); font-size:var(--font-size-sm); overflow-wrap:anywhere; }
.sos-experience__identity .sos-experience__album { margin:0 0 var(--space-1); color:var(--color-link); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); letter-spacing:.06em; text-transform:uppercase; }
.sos-experience h2 { margin:0; color:var(--color-text); font-size:clamp(1.2rem,2.8vw,1.75rem); line-height:var(--line-height-tight); overflow-wrap:anywhere; }
.sos-window-actions { display:flex; flex:none; gap:var(--space-2); }
.sos-experience__byline { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; }
.sos-experience__position { flex:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sos-experience .sos-queue-toggle:disabled { opacity:.4; cursor:default; }
.sos-stage { position:relative; flex:1 0 190px; min-height:190px; overflow:hidden; isolation:isolate; border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent); border-radius:var(--radius-lg); background:var(--color-canvas); }
.sos-stage__ambience { position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; filter:blur(35px); opacity:.3; pointer-events:none; }
.sos-stage::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(transparent,var(--color-canvas)); opacity:.65; pointer-events:none; }
.sos-stage canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; pointer-events:none; }
.sos-stage__artwork { position:absolute; inset:var(--space-5); z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-3); min-width:0; }
.sos-stage__artwork img { display:block; min-height:0; max-width:min(100%,360px); max-height:calc(100% - 2rem); width:auto; height:auto; aspect-ratio:1; object-fit:contain; border-radius:var(--radius-md); filter:drop-shadow(0 8px 18px var(--color-scrim)); }
.sos-stage__caption { display:flex; justify-content:center; gap:var(--space-3); flex:none; max-width:100%; color:var(--color-text-muted); font-size:var(--font-size-xs); font-variant-numeric:tabular-nums; }
.sos-stage__caption span + span { padding-left:var(--space-3); border-left:1px solid var(--color-border); }
.sos-stage__artwork img[hidden],.sos-stage__ambience[hidden],.sos-lyrics[hidden] { display:none; }
.has-lyrics .sos-stage__artwork { right:60%; }
.sos-lyrics { position:absolute; inset:var(--space-4) var(--space-4) var(--space-4) 42%; z-index:3; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; box-sizing:border-box; padding:var(--space-5); border-radius:var(--radius-md); text-align:center; color:var(--color-text); background:color-mix(in srgb,var(--color-canvas) 90%,transparent); font-size:clamp(1.15rem,2.6vw,1.8rem); line-height:1.6; overflow-wrap:anywhere; }
.sos-lyric-line { margin:0 0 var(--space-4); opacity:.65; }
.sos-lyric-line.is-active { opacity:1; font-weight:var(--font-weight-bold); }
.sos-lyric-line .is-sung { color:var(--lyric-color,var(--color-link)); }
.sos-lyrics.is-plain { text-align:left; white-space:pre-line; font-size:var(--font-size-md); }
.sos-lyrics[data-mode=popup]:not([hidden]) { display:flex; align-items:center; justify-content:center; }
.sos-lyrics[data-mode=popup] .is-active { animation:sos-lyric-enter var(--duration-normal) ease-out; }
.has-visual .sos-stage canvas { opacity:1; }
.has-visual .sos-stage__ambience { opacity:.12; }
.has-visual .sos-stage__artwork { top:auto; right:auto; bottom:var(--space-4); left:var(--space-4); align-items:flex-start; gap:var(--space-2); }
.has-visual .sos-stage__artwork img { width:80px; max-height:80px; }
.has-visual .sos-stage__caption { padding:.2rem .45rem; border-radius:var(--radius-sm); background:var(--color-canvas); }
.has-visual.has-lyrics .sos-lyrics { left:45%; background:color-mix(in srgb,var(--color-canvas) 85%,transparent); }
.sos-display-options { display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--space-3); }
.sos-scroller { position:relative; flex:0 0 clamp(72px,11vh,100px); min-height:72px; overflow:hidden; border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent); border-radius:var(--radius-md); background:var(--color-canvas); color:var(--color-text); }
.sos-scroller[hidden] { display:none; }
.sos-scroller iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.sos-scroller-copy:not(.sr-only) { box-sizing:border-box; height:100%; margin:0; padding:var(--space-3); overflow:auto; white-space:pre-line; }
.sos-scroller-option { display:flex; flex:none; align-items:center; gap:var(--space-2); min-height:44px; }
.sos-display-options .sos-scroller-option label { display:flex; flex:none; align-items:center; gap:var(--space-1); margin:0; cursor:pointer; }
.sos-scroller-option input { accent-color:var(--color-action); }
.sos-display-options label { display:grid; flex:1 1 8rem; gap:var(--space-1); min-width:0; color:var(--color-text-muted); font-size:var(--font-size-xs); }
.sos-display-options label[hidden] { display:none; }
.sos-display-options select { display:block; box-sizing:border-box; width:100%; height:44px; min-width:0; padding:.5rem .65rem; border:1px solid color-mix(in srgb,var(--color-border) 65%,transparent); border-radius:var(--radius-md); background:var(--color-surface-2); color:var(--color-text); font:inherit; font-size:var(--font-size-sm); cursor:pointer; }
.sos-display-options select:hover:not(:disabled) { border-color:var(--color-link); }
.sos-display-options select:disabled { opacity:.6; cursor:default; }
.sos-lyric-availability { flex:0 1 auto; padding-bottom:.75rem; font-size:var(--font-size-xs); color:var(--color-text-muted); }
.sos-lyric-availability:empty,.sos-experience__status:empty { display:none; }
.sos-experience__status { margin:0; color:var(--color-text-muted); font-size:var(--font-size-xs); overflow-wrap:anywhere; }
.sos-progress { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-3); font-size:var(--font-size-xs); font-variant-numeric:tabular-nums; color:var(--color-text-muted); }
.sos-progress label { display:flex; min-width:0; align-items:center; height:32px; }
.sos-progress input[type=range] { width:100%; min-width:0; margin:0; accent-color:var(--color-action); cursor:pointer; }
/* Reuse the footer's transport classes instead of creating another button vocabulary. */
.sos-playback-controls { display:flex; justify-content:center; align-items:center; gap:clamp(1.25rem,5vw,3rem); padding-block:var(--space-2); }
.sos-primary-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-4); }
.sos-primary-controls :is(.ss-player__prev,.ss-player__next) { display:inline-flex; }
.sos-primary-controls :is(.ss-player__prev,.ss-player__next):disabled { opacity:.4; cursor:default; }
.sos-primary-controls .ss-player__toggle svg { width:22px; height:22px; }
.sos-queue-toggle:hover { color:var(--color-text); border-color:var(--color-link); }
.sos-queue-toggle[aria-pressed=true]:hover { color:var(--color-on-action); }
.sos-experience :focus-visible,.music-tabs :focus-visible,.sos-album-card :focus-visible,.sos-transport :focus-visible,.sos-queue-toggle:focus-visible,.sos-open-experience:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
@keyframes sos-lyric-enter { from { opacity:0; transform:translateY(.5em) scale(.96); } to { opacity:1; transform:none; } }

@media(max-width:900px) {
    .ss-player.is-sos { padding-bottom:.55rem; }
    .ss-player.is-sos > .sos-upnext:not(:empty) { display:none; }
    .ss-player.is-sos:not(.is-open) :is(.ss-player__prev,.ss-player__next,.sos-footer-shuffle) { display:none; }
    .ss-player.is-sos.is-open :is(.ss-player__prev,.ss-player__next,.sos-footer-shuffle) { display:inline-flex; width:44px; height:44px; }
    .ss-player.is-sos.is-open .ss-player__transport { grid-area:4 / 1 / 5 / -1; gap:var(--space-4); }
    .ss-player.is-sos .sos-transport { grid-area:2 / 1 / 3 / -1; justify-content:flex-end; max-width:none; border-top:1px solid color-mix(in srgb,var(--color-border) 30%,transparent); padding-top:var(--space-1); }
    .ss-player.is-sos.is-open .sos-transport { grid-row:5; }
}
@media(max-width:600px) {
    .sos-album-hero { grid-template-columns:1fr; gap:var(--space-4); }
    .sos-album-hero .sos-cover { width:min(70vw,300px); margin-inline:auto; }
    .sos-library-summary { flex-basis:100%; }
    .sos-badge { display:none; }
    .sos-track-details { padding-left:var(--space-4); }
    .ss-player.is-sos .sos-transport { justify-content:space-between; }
    .sos-experience { width:calc(100vw - 1rem); height:calc(100dvh - 1rem); }
    .sos-experience__surface { padding:var(--space-4); }
    .sos-experience__header { align-items:flex-start; gap:var(--space-2); }
    .sos-window-actions { gap:var(--space-1); }
    .sos-experience__identity .sos-experience__album { font-size:.65rem; letter-spacing:.03em; }
    .sos-stage { min-height:200px; flex-basis:200px; }
    .sos-stage__artwork { inset:var(--space-4); }
    .has-lyrics .sos-stage__artwork { top:var(--space-3); right:auto; left:var(--space-3); bottom:auto; width:64px; }
    .has-lyrics .sos-stage__artwork img { width:64px; max-height:64px; }
    .has-lyrics .sos-stage__caption { display:none; }
    .sos-experience.has-lyrics .sos-lyrics { inset:var(--space-2) var(--space-2) var(--space-2) 84px; padding:var(--space-3); }
    .has-visual .sos-stage__artwork img { width:64px; max-height:64px; }
    .sos-display-options { gap:var(--space-2); }
    .sos-display-options label { flex-basis:calc(50% - .5rem); }
    .sos-display-options select { font-size:16px; }
    .sos-lyric-availability { flex:1 1 8rem; padding-bottom:.75rem; }
    .sos-playback-controls { gap:var(--space-5); }
    .sos-primary-controls { gap:var(--space-3); }

}
@media(prefers-reduced-motion:reduce) { .sos-experience *,.sos-album-card { animation:none!important; transition:none!important; } }