.sp-root { --sp-ink:#213b35; --sp-muted:#66796f; --sp-green:#285346; --sp-pad:clamp(12px,min(2.7cqw,3.3cqh),38px); --sp-gap:clamp(12px,min(1.8cqw,2.3cqh),26px); position:relative; min-width:0; min-height:0; container-type:size; overflow:hidden; isolation:isolate; color:var(--sp-ink); background:#eef0e7; font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.sp-root *, .sp-root *::before, .sp-root *::after { box-sizing:border-box; }
.sp-root * { color:inherit; }
.sp-root [hidden] { display:none!important; }
.sp-root button, .sp-root input, .sp-root select { font:inherit; }
.sp-root button, .sp-root a, .sp-root input, .sp-root select { -webkit-tap-highlight-color:transparent; }
.sp-root button { cursor:pointer; color:inherit; }
.sp-root button:disabled, .sp-root input:disabled, .sp-root select:disabled { opacity:.36; cursor:default; }
.sp-root [aria-disabled="true"]:not(:disabled) { cursor:progress; }
.sp-root :focus-visible { outline:3px solid #bc7639; outline-offset:4px; }
.sp-root svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sp-root h1, .sp-root h2, .sp-root h3, .sp-root p { margin:0; }
.sp-shell { position:relative; width:min(1560px,100%); height:100%; margin:auto; padding:var(--sp-pad); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:var(--sp-gap); overflow:hidden; }
.sp-header, .sp-brand, .sp-header-right { display:flex; align-items:center; min-width:0; }
.sp-header { justify-content:space-between; gap:12px; }
.sp-brand { gap:14px; }
.sp-mark { display:grid; place-items:center; width:48px; height:48px; border:1px solid #c5cec2; border-radius:50%; background:#e4e9dc; }
.sp-eyebrow { display:block; font-size:10px; font-weight:650; letter-spacing:1.8px; color:var(--sp-muted); }
.sp-header h1 { font-size:clamp(21px,2.7cqw,32px); line-height:1.25; font-weight:550; letter-spacing:-1px; }
.sp-header-right { gap:12px; }
.sp-badge { display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:12px; padding:7px 12px; border:1px solid #cbd3c5; border-radius:30px; }
.sp-badge i { width:6px; height:6px; background:#9b9e90; border-radius:50%; }
.sp-root[data-fresh="true"] .sp-badge i { background:#56845b; }
.sp-icon-button { width:44px; height:44px; border:0; background:transparent; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0; }
.sp-icon-button:hover:enabled { background:#dce4d8; }
.sp-care-button { border:1px solid #cbd3c5; }
.sp-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0fr); column-gap:0; min-height:0; min-width:0; transition:grid-template-columns 300ms ease,column-gap 300ms ease; }
.sp-main-card { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; min-height:0; padding:clamp(16px,min(3cqw,3.7cqh),42px); border:1px solid #d6decf; border-radius:clamp(16px,2cqw,26px); background:#fafbf5; overflow:hidden; box-shadow:0 8px 25px #27473906; }
.sp-listening { min-width:0; min-height:0; display:flex; align-items:center; gap:clamp(18px,3cqw,40px); padding-bottom:var(--sp-gap); }
.sp-art-area { min-width:0; min-height:0; flex:0 0 auto; height:clamp(100px,min(30cqw,40cqh),440px); max-height:100%; aspect-ratio:1; }
.sp-art { position:relative; height:100%; width:auto; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#dce2cc; box-shadow:0 14px 30px #233f3025; }
.sp-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-record { position:absolute; inset:10%; border-radius:50%; background:repeating-radial-gradient(circle,#344f3e 0px,#344f3e 2px,#3a5642 3px,#3a5642 4px); display:grid; place-items:center; box-shadow:0 6px 15px #142a2a30; }
.sp-record>div { width:34%; height:34%; border-radius:50%; display:grid; place-items:center; color:#ece1bc; background:#b87843; }
.sp-song { min-width:0; }
.sp-song h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-1px; font-size:clamp(26px,min(4.1cqw,6cqh),58px); line-height:1.08; margin:14px 0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.sp-artist { font-size:clamp(14px,1.5cqw,20px); line-height:1.5; color:#4e6a59; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.sp-album { margin-top:8px!important; color:var(--sp-muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-equalizer { height:25px; display:flex; gap:4px; align-items:end; margin-top:24px; opacity:.25; }
.sp-equalizer i { width:3px; height:5px; background:#668559; border-radius:2px; }
.sp-is-playing .sp-equalizer { opacity:1; }
.sp-is-playing .sp-equalizer i { animation:sp-meter 1s ease-in-out infinite alternate; }
.sp-equalizer i:nth-child(2) { animation-delay:-.5s; }.sp-equalizer i:nth-child(3) { animation-delay:-.2s; }.sp-equalizer i:nth-child(4) { animation-delay:-.8s; }.sp-equalizer i:nth-child(5) { animation-delay:-.3s; }
@keyframes sp-meter { to { height:23px; } }
.sp-player { min-width:0; border-top:1px solid #dfe5d9; padding-top:clamp(12px,2cqh,24px); }
.sp-progress { display:flex; align-items:center; gap:12px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--sp-muted); }
.sp-progress span { min-width:30px; }
.sp-progress span:last-child { text-align:right; }
.sp-timeline { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.sp-timeline::after { content:""; position:absolute; z-index:1; pointer-events:none; left:2px; right:2px; top:50%; height:8px; transform:translateY(-50%); border-radius:8px; opacity:0; background:linear-gradient(135deg,#aec3a2 25%,#37644f 25%,#37644f 50%,#aec3a2 50%,#aec3a2 75%,#37644f 75%); background-size:24px 24px; transition:opacity 120ms ease; }
.sp-awaiting .sp-timeline::after { opacity:.5; animation:sp-waiting-stripes 850ms linear infinite; }
@keyframes sp-waiting-stripes { to { background-position:24px 0; } }
.sp-root input[type="range"] { accent-color:var(--sp-green); cursor:pointer; height:28px; min-width:0; width:100%; margin:0; background:transparent; }
.sp-transport { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin:6px 0 14px; }
.sp-spotify-link { color:#557058; font-size:11px; text-decoration:none; width:fit-content; }
.sp-spotify-link:hover { text-decoration:underline; }
.sp-play-buttons { display:flex; align-items:center; gap:clamp(10px,2cqw,24px); }
.sp-play-buttons .sp-icon-button svg path { fill:currentColor; stroke-width:1.3; }
.sp-play-button { width:64px; height:64px; border:0; border-radius:50%; background:var(--sp-green); color:#f3f5ea!important; display:grid; place-items:center; box-shadow:0 5px 12px #28534620; }
.sp-play-button:hover:enabled { background:#376550; }
.sp-play-button svg:first-child { fill:currentColor; margin-left:3px; }.sp-play-button svg:last-child { display:none; stroke-width:3; }
.sp-play-button.sp-playing svg:first-child { display:none; }.sp-play-button.sp-playing svg:last-child { display:block; }
.sp-command-state { font-size:10px; color:var(--sp-muted); text-align:right; }
.sp-volume { display:flex; align-items:center; gap:14px; width:min(410px,100%); margin:0 auto; }
.sp-volume>svg { width:19px; height:19px; }
.sp-volume label { display:flex; align-items:center; gap:14px; flex:1; min-width:0; font-size:9px; letter-spacing:1.5px; color:var(--sp-muted); }
.sp-volume output { min-width:36px; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.sp-side { display:grid; grid-template-rows:minmax(0,1.35fr) minmax(0,1fr); gap:var(--sp-gap); min-height:0; min-width:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 180ms ease,visibility 0s linear 180ms; }
.sp-side-card { border:1px solid #cfd8c6; border-radius:22px; padding:clamp(18px,2.4cqw,34px); min-height:0; min-width:0; overflow:hidden; }
.sp-sleep { background:#e0e8d5; display:flex; flex-direction:column; justify-content:center; }
.sp-sleep .sp-eyebrow { display:flex; align-items:center; justify-content:space-between; }
.sp-sleep .sp-eyebrow svg { width:21px; height:21px; }
.sp-sleep h2 { font:400 clamp(25px,2.5cqw,36px)/1.16 Georgia,serif; letter-spacing:-.5px; margin:20px 0 10px; }
.sp-side-copy, .sp-timer-description { font-size:12px; color:#688061; }
.sp-timer-value { font-size:24px; letter-spacing:-.7px; font-variant-numeric:tabular-nums; margin-top:clamp(18px,3cqh,38px); }
.sp-timer-options { display:flex; gap:8px; margin:20px 0 10px; }
.sp-timer-options button { flex:1; border:1px solid #c2ceb8; border-radius:10px; background:#edf1e6; padding:10px 4px; font-size:18px; }
.sp-timer-options button:hover:enabled { background:#f9faf4; }
.sp-timer-options span { margin-left:4px; font-size:9px; color:var(--sp-muted); }
.sp-fine { color:var(--sp-muted); font-size:11px; line-height:1.55; margin-top:15px!important; }
.sp-text-button { padding:4px 0; align-self:start; color:#47664f; background:none; border:0; font-size:11px!important; text-decoration:underline; }
.sp-output { display:flex; flex-direction:column; justify-content:center; background:#e9ecdf; }
.sp-output h3 { font-size:17px; font-weight:500; margin:12px 0 5px; }
.sp-output p { color:var(--sp-muted); font-size:12px; }
.sp-quality { font-size:10px; margin-top:14px; color:#6d7b62; letter-spacing:.4px; }
.sp-secondary { border:1px solid #becbb7; border-radius:9px; min-height:40px; padding:9px 12px; background:transparent; font-size:12px!important; }
.sp-secondary:hover:enabled { background:#f3f5ec; }
.sp-output .sp-secondary { margin-top:20px; }
.sp-footer { display:flex; justify-content:space-between; gap:18px; font-size:11px; color:#76826c; min-width:0; }
.sp-footer>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-footer-meta { flex-shrink:0; font-size:9px; letter-spacing:1.2px; }
.sp-toast { position:absolute; z-index:5; bottom:var(--sp-pad); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:13px 18px; background:#284e3e; color:white; border-radius:12px; box-shadow:0 5px 20px #0003; font-size:13px; }
.sp-toast.sp-error { background:#754b31; }
.sp-overlay { position:absolute; z-index:4; inset:0; padding:12px; display:grid; place-items:center; background:#172c2770; backdrop-filter:blur(4px); }
.sp-dialog { width:min(430px,100%); max-height:100%; padding:clamp(12px,2cqh,28px); background:#f7f9f0; border-radius:20px; display:flex; flex-direction:column; gap:12px; }
.sp-dialog-heading, .sp-dialog-row, .sp-dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-dialog-heading h2 { font:26px Georgia,serif; }
.sp-dialog-heading .sp-icon-button { font-size:26px; width:36px; height:36px; }
.sp-dialog-status { font-size:13px; color:var(--sp-muted); }
.sp-dialog-row { font-size:12px; border-top:1px solid #dee4d5; padding-top:10px; }
.sp-dialog-row strong { font-weight:500; }
.sp-dialog-row select { border:1px solid #cbd5c2; border-radius:6px; padding:7px; background:transparent; color:inherit; font-size:12px; }
.sp-dialog-actions { margin-top:4px; }.sp-dialog-actions button { flex:1; }
.sp-wide .sp-stage { grid-template-columns:minmax(0,1fr) minmax(0,.47fr); column-gap:var(--sp-gap); }
.sp-wide .sp-side { opacity:1; visibility:visible; pointer-events:auto; transition-delay:100ms,0s; }
.sp-wide .sp-listening { flex-direction:column; justify-content:center; text-align:center; gap:clamp(18px,3cqh,38px); }
.sp-wide .sp-art-area { height:clamp(150px,min(29cqw,32cqh),420px); }
.sp-wide .sp-song h2 { margin:10px 0; font-size:clamp(28px,min(3.3cqw,4.4cqh),52px); -webkit-line-clamp:2; }
.sp-wide .sp-equalizer { display:none; }
.sp-compact .sp-shell { grid-template-rows:auto minmax(0,1fr); gap:12px; }
.sp-compact .sp-header h1 { font-size:21px; }
.sp-compact .sp-brand { gap:8px; }.sp-compact .sp-mark, .sp-compact .sp-brand .sp-eyebrow { display:none; }
.sp-compact .sp-header-right { gap:6px; }.sp-compact .sp-badge { padding:5px 8px; font-size:10px; }
.sp-compact .sp-care-button { width:36px; height:36px; }
.sp-compact .sp-main-card { padding:12px; border-radius:14px; }
.sp-compact .sp-listening { gap:14px; padding-bottom:10px; }
.sp-compact .sp-art-area { height:clamp(54px,min(22cqw,20cqh),100px); }.sp-compact .sp-art { border-radius:5px; }
.sp-compact .sp-song h2 { font-family:inherit; font-size:clamp(17px,min(5cqw,6cqh),24px); line-height:1.16; letter-spacing:-.4px; margin:0 0 5px; -webkit-line-clamp:2; }
.sp-compact .sp-song .sp-eyebrow, .sp-compact .sp-album, .sp-compact .sp-equalizer, .sp-compact .sp-footer, .sp-compact .sp-spotify-link { display:none; }
.sp-compact .sp-command-state { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sp-compact .sp-artist { font-size:12px; line-height:1.3; -webkit-line-clamp:1; }
.sp-compact .sp-player { padding-top:3px; }
.sp-compact .sp-progress { gap:8px; font-size:10px; }.sp-compact .sp-progress input { height:20px; }
.sp-compact .sp-transport { display:flex; justify-content:center; margin:0 0 4px; }
.sp-compact .sp-play-button { width:44px; height:44px; }.sp-compact .sp-play-buttons { gap:24px; }
.sp-compact .sp-icon-button { height:36px; }
.sp-compact .sp-volume { gap:10px; }.sp-compact .sp-volume label { font-size:0; gap:0; }
.sp-compact .sp-volume input { height:24px; }
@container (max-height:340px) { .sp-dialog { gap:6px; border-radius:12px; }.sp-dialog .sp-fine,.sp-dialog-row:has([data-el="mac-volume"]) { display:none; }.sp-dialog-heading h2 { font-size:22px; }.sp-dialog-row { padding-top:6px; } }
@container (min-height:500px) and (max-width:590px) { .sp-compact .sp-listening { flex-direction:column; justify-content:center; text-align:center; gap:22px; }.sp-compact .sp-art-area { height:min(61cqw,33cqh); }.sp-compact .sp-song h2 { font:30px/1.1 Georgia,serif; }.sp-compact .sp-artist { font-size:15px; -webkit-line-clamp:2; }.sp-compact .sp-player { padding-top:12px; }.sp-compact .sp-transport { margin:8px 0; }.sp-compact .sp-play-button { width:56px; height:56px; }.sp-compact .sp-main-card { padding:20px; }.sp-compact .sp-volume input { height:36px; } }
.sp-medium .sp-song h2 { -webkit-line-clamp:2; }
@container (max-height:550px) { .sp-medium .sp-equalizer { display:none; } }
@container (max-height:460px) { .sp-medium .sp-song .sp-eyebrow,.sp-medium .sp-album { display:none; }.sp-medium .sp-song h2 { font-size:24px; margin:0 0 8px; } }
@media (prefers-reduced-motion:reduce) { .sp-root *, .sp-root *::before, .sp-root *::after { animation:none!important; transition:none!important; }.sp-is-playing .sp-equalizer i:nth-child(2n) { height:18px; } }