@property --ambient{syntax:'<color>';inherits:true;initial-value:#e4edfa}
@property --music-accent{syntax:'<color>';inherits:true;initial-value:#315ed5}
@property --music-glow{syntax:'<color>';inherits:true;initial-value:#dce8f7}
:root{--muted:#5c6a7e;--music-accent:#315ed5;--music-on-accent:#fff;--music-glow:#dce8f7;transition:--ambient .4s,--music-accent .4s,--music-glow .4s}
.dark{--muted:#aab7cb}
.generated-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;overflow:hidden;container-type:inline-size;background:var(--cover);color:var(--cover-ink)}
.generated-cover .generated-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.generated-cover>strong{margin:0 0 22px;max-width:95%;font-size:clamp(17px,calc(var(--title-scale,13)*1cqw),48px);font-weight:600;line-height:1.2;letter-spacing:-.035em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.generated-cover .cover-artist{position:absolute;bottom:20px;left:24px;right:24px;font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9;letter-spacing:0}
.recommendation-grid .generated-cover{padding:26px}
.recommendation-grid .generated-cover strong{font-size:clamp(18px,calc(var(--title-scale,13)*1cqw),45px);-webkit-line-clamp:3}
.recommendation-grid .generated-cover .cover-artist{display:block}
@media(min-width:1025px){.recommendation-grid[data-count="4"] .album-card:not(:first-child) .generated-cover{padding:14px}.recommendation-grid[data-count="4"] .album-card:not(:first-child) .generated-cover strong{font-size:clamp(14px,calc(var(--title-scale,13)*1cqw),23px)}.recommendation-grid[data-count="4"] .album-card:not(:first-child) .cover-artist{display:none}}
.small-cover,.dock-art,.large-art,.album-art{position:relative;padding:0;overflow:hidden;box-sizing:border-box}
.small-cover>img,.dock-art>img,.large-art>img,.album-art>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block;border-radius:inherit}
.cover-equalizer{position:absolute;left:11px;top:11px;z-index:3;display:none;align-items:flex-end;gap:3px;padding:6px 7px;height:27px;border-radius:8px;background:#1522398f;color:#fff;pointer-events:none}
.cover-equalizer i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;transform-origin:bottom;animation:music-eq .85s ease-in-out infinite alternate;animation-play-state:paused}
.cover-equalizer i:nth-child(1){height:55%;animation-delay:-.2s}.cover-equalizer i:nth-child(2){height:95%;animation-delay:-.65s}.cover-equalizer i:nth-child(3){height:40%;animation-delay:-.4s}.cover-equalizer i:nth-child(4){height:75%;animation-delay:-.1s}
.album-card.is-current .cover-equalizer,.track-row.current .cover-equalizer,.queue-row.current .cover-equalizer,.dock-art .cover-equalizer,.large-art .cover-equalizer{display:flex}
.small-cover .cover-equalizer,.dock-art .cover-equalizer{inset:auto 3px 3px auto;height:21px;padding:4px;gap:2px;border-radius:5px}.small-cover .cover-equalizer i,.dock-art .cover-equalizer i{width:2px}
body[data-music-playing="true"] .cover-equalizer i{animation-play-state:running}
@keyframes music-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.track-row{border-bottom:0;border-radius:13px;padding:10px 12px;margin:2px -12px;transition:background .18s,color .18s}
.track-row:hover,.track-row:focus-within{background:var(--soft)}
.track-row.current{background:color-mix(in srgb,var(--music-accent) 8%,var(--paper))}
.track-row.current .track-description strong,.queue-row.current .track-description strong{color:var(--music-accent)}
.track-description strong{font-size:14px}.track-description p,.track-duration{font-size:12px}
.album-caption p,.recommendation-grid .album-caption p{font-size:12px;color:var(--muted)}
.player-panel{isolation:isolate;box-shadow:0 22px 80px #152a4033,inset 0 1px 0 #ffffffad}
.player-panel:before{content:"";position:absolute;z-index:-1;inset:-90px;background-image:var(--playing-art,none);background-size:cover;background-position:center;filter:blur(70px) saturate(.7);opacity:.28;pointer-events:none;transition:opacity .4s}
.player-panel-inner{position:relative;z-index:1}
.player-panel.immersive{background:color-mix(in srgb,var(--ambient) 24%,var(--paper))}
.player-panel.immersive:before{opacity:.46}
.large-art{box-shadow:0 20px 45px #172c4626,inset 0 0 0 1px #ffffff7d}
.mini-player:not(.is-empty){border-color:color-mix(in srgb,var(--music-glow) 60%,#fff);box-shadow:inset 0 1px 0 #ffffffc2,0 12px 30px color-mix(in srgb,var(--music-glow) 30%,transparent);transition:background .4s,border-color .4s,box-shadow .4s,opacity .15s,visibility .15s}
.dock-controls .primary-play,.transport .large-play{background:var(--music-accent);color:var(--music-on-accent);box-shadow:0 4px 15px color-mix(in srgb,var(--music-accent) 20%,transparent);transition:background .4s,color .4s,box-shadow .4s,transform .18s}
.dock-progress>span{background:var(--music-accent);transition:width .3s linear,background .4s}
.mode-control[data-enabled=true]{color:var(--music-accent)}
.seek-area input,.volume-row input{height:44px;background:transparent;border-radius:0;padding:0;touch-action:pan-y;cursor:pointer}
.seek-area input::-webkit-slider-runnable-track,.volume-row input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--music-accent) var(--progress,0%),#8190a040 var(--progress,0%))}
.seek-area input::-webkit-slider-thumb,.volume-row input::-webkit-slider-thumb{width:28px;height:28px;margin-top:-12px;border:8px solid transparent;background:var(--music-accent);background-clip:padding-box;box-shadow:none;cursor:grab}
.seek-area input::-moz-range-track,.volume-row input::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--music-accent) var(--progress,0%),#8190a040 var(--progress,0%))}
.seek-area input::-moz-range-thumb,.volume-row input::-moz-range-thumb{width:12px;height:12px;border:8px solid transparent;background:var(--music-accent);background-clip:padding-box;box-shadow:none;cursor:grab}
.time-row{font-size:12px;margin-top:0}.volume-row{gap:12px}.mode-label,.queue-heading,.player-footnote{font-size:12px}
#lyricsPane:has(.lyrics-lines),#lyricsPane:has(.lyrics-plain){mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.lyric-line{opacity:.75;color:var(--muted)}.lyric-line.active{opacity:1;color:var(--ink)}
.music-empty{border:0;background:linear-gradient(145deg,var(--soft),color-mix(in srgb,var(--music-glow) 12%,var(--paper)));padding:36px 24px 44px;border-radius:20px}
.empty-illustration{display:block;width:210px;max-width:65%;height:auto;margin:0 auto 16px;color:#6c88ab}
.music-empty h2{font-size:21px;color:var(--ink)}.music-empty p{font-size:14px;color:var(--muted);line-height:1.7;margin:12px auto;max-width:440px}
.music-empty .text-button{font-size:14px;min-height:44px;padding:8px 15px}
.guest-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.85fr);gap:32px;align-items:center;padding:52px 44px;min-height:400px;border-radius:24px;background:radial-gradient(ellipse at 90% 10%,#f4dcbb 0,transparent 56%),linear-gradient(130deg,#fff8ed,#edf3fb);box-shadow:inset 0 1px 0 #fff,0 16px 40px #62543b0a}
.guest-hero h1{font-size:36px}.guest-hero p{font-size:15px;line-height:1.8;color:#5c6676;margin:20px 0 25px;max-width:410px}.guest-hero .upload-trigger{display:inline-flex;width:auto}
.guest-hero .empty-illustration{width:100%;max-width:340px;margin:0;color:#947c5b;filter:drop-shadow(0 14px 20px #83684419)}
.guest-hero .art-record{transform-origin:160px 110px;animation:record-turn 24s linear infinite}
@keyframes record-turn{to{transform:rotate(360deg)}}
.dark .player-panel{border-color:color-mix(in srgb,var(--music-glow) 32%,#ffffff30);box-shadow:inset 0 1px 0 #e1edff45,0 24px 90px #0006}
.dark .mini-player:not(.is-empty){border-color:color-mix(in srgb,var(--music-glow) 38%,#ffffff1f);box-shadow:inset 0 1px 0 #e1edff45,0 12px 36px #0005}
.dark .guest-hero{background:radial-gradient(ellipse at 90% 5%,#65523f66,transparent 60%),linear-gradient(135deg,#242a34,#172639);box-shadow:inset 0 1px 0 #ffffff24,0 16px 40px #0002}
.dark .guest-hero p{color:#b8c2cf}.dark .guest-hero .empty-illustration{color:#ceb591}.dark .empty-illustration{color:#91acce}
@media(max-width:760px){
 .generated-cover .cover-artist{left:16px;right:16px;bottom:14px;font-size:12px}.recommendation-grid .generated-cover{padding:17px}.recommendation-grid .generated-cover strong{font-size:clamp(18px,calc(var(--title-scale,13)*1cqw),33px)}
 .recommendation-grid .album-caption p{font-size:12px}.track-description strong{font-size:14px}.track-description p{font-size:12px}
 .track-row .icon-button{width:40px;height:44px}.track-row{min-height:76px;padding:9px 10px;margin:2px -10px}.track-row .small-cover{width:48px;height:48px}
 .player-panel:before{inset:-60px}.player-panel,.player-panel.immersive{background:color-mix(in srgb,var(--ambient) 20%,var(--paper))}
 .large-art .generated-cover .cover-artist{bottom:18px;left:22px}.time-row{font-size:12px}.detail-tabs button{font-size:13px}.queue-row .track-description p{font-size:12px}.dock-copy>span{font-size:11px}
 .music-empty{padding:24px 18px 34px}.guest-hero{display:flex;flex-direction:column-reverse;align-items:stretch;padding:28px 24px;gap:10px;min-height:0}.guest-hero .empty-illustration{width:220px;max-width:100%;margin:auto}.guest-hero h1{font-size:29px}.guest-hero p{font-size:14px;margin:15px 0 20px}.guest-hero .upload-trigger{display:flex;width:100%}
}
@media(prefers-reduced-motion:reduce){:root{transition:none}.cover-equalizer i,.guest-hero .art-record{animation:none!important}.cover-equalizer i{transform:scaleY(.75)}}
@media(min-width:761px){.large-art{width:min(100%,315px);max-height:none;align-self:center}.player-panel.immersive .large-art{width:min(100%,410px);max-height:none}}
.mobile-nav button{font-size:11px}.dock-copy strong{font-size:13px}.dock-copy>span{font-size:12px}#pickLrc{font-size:12px}
@media(max-width:760px){.dock-copy strong{font-size:12px}.dock-copy>span{font-size:12px}}
.home-kind{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:6px;background:#e6edfc;color:#315cbe;font-size:12px;font-weight:550}
.playlist-recommendation .cover-play{opacity:1;transform:none}
.playlist-recommendation .cover-play .icon{fill:none;stroke-width:1.7}
.dark .home-kind{background:#8ba8ee20;color:#bdd0ff}

/* The host keeps playback alive; embedded pages provide their own navigation. */
html[data-music-outside="true"] .site-header{display:none}
html[data-music-outside="true"] #musicView{display:none}
html[data-music-outside="true"] #siteView[hidden]{display:block}
body[data-outside="true"]{height:100dvh;overflow:hidden}
body[data-outside="true"] #siteView{height:100dvh;overflow:hidden}
body[data-outside="true"] #siteFrame{height:100dvh;width:100%;display:block}
@media(max-width:760px){body[data-outside="true"] .mini-player{bottom:calc(16px + env(safe-area-inset-bottom) + var(--site-bottom-inset,0px))}}
.sync-post-option{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;cursor:pointer;white-space:nowrap}
.sync-post-option input{width:18px;height:18px;accent-color:var(--blue);margin:0}
.sync-post-option:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

html[data-music-outside="true"][data-shell-header="true"] .site-header{display:flex}

.generated-cover:has(.cover-artist:empty)>strong{margin-bottom:0}.generated-cover .cover-artist:empty{display:none}