/* THEME and its persistent playback bar. */
.theme-page{max-width:1180px;margin:0 auto;padding:clamp(42px,7vh,90px) clamp(24px,5vw,78px) 110px;min-height:calc(100svh - 74px)}
.theme-layout{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(260px,1.65fr) minmax(175px,.8fr);align-items:center;gap:clamp(24px,4vw,64px)}
.theme-track-info{position:relative;z-index:2;padding-bottom:24px}
.theme-track-info h1{font-size:clamp(30px,3.7vw,48px);font-weight:500;line-height:1.2;letter-spacing:-.035em;margin:0 0 14px;overflow-wrap:anywhere;word-break:keep-all;white-space:pre-line}
.theme-track-info #track-artist{font-size:12px;letter-spacing:.04em;color:var(--ink);margin:0}
.theme-album{position:relative;isolation:isolate;width:100%;max-width:400px;aspect-ratio:1.02;justify-self:center;transform:scale(.9)}
.cd-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.cd-control{position:absolute;inset:0;touch-action:none;outline:none;cursor:grab}
.cd-control.is-dragging{cursor:grabbing}
.theme-album:has(.cd-control:focus-visible:not(.is-pointer-focused)){outline:1px solid #8b0000;outline-offset:4px;border-radius:4px}
.cd-fallback{position:absolute;inset:8%;border-radius:50%;overflow:hidden;background:#8b0000;color:#ffd1dc;mask-image:radial-gradient(circle,transparent 0 9%,#000 9.5%)}
.cd-fallback>img{width:100%;height:100%;object-fit:cover}
.theme-cover-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(20px,3vw,40px);letter-spacing:.08em}
.cd-fallback.has-cover .theme-cover-fallback,.is-webgl .cd-fallback{display:none}
.theme-album:not(.is-webgl) .cd-canvas,.theme-album:not(.is-webgl) .cd-control{visibility:hidden}
@media(max-width:560px){.theme-layout>.theme-album{margin:10px auto 16px}}
.theme-playlist{min-width:0}
.theme-playlist h2{font-size:9px;font-weight:400;letter-spacing:.15em;display:flex;justify-content:space-between;gap:20px;color:var(--muted);margin:0 0 20px}
.music-track-list{list-style:none;padding:0;margin:0;max-height:min(300px,50svh);overflow-y:auto;overscroll-behavior:contain}
.music-track-list li{margin:0}
.music-track-list button{display:flex;align-items:baseline;gap:14px;width:100%;padding:13px 0;text-align:left;font-size:13px;line-height:1.7}
.music-track-copy{display:flex;flex-direction:column;min-width:0}
.music-track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-track-artist{font-size:10px;color:var(--muted);margin-top:3px}
.music-track-list button:hover,.music-track-list button[aria-current=true]{color:#8b0000}
.music-track-list button:focus-visible{outline-offset:-2px}
#audio-error{font-size:11px;line-height:1.8;color:#8b0000}
.mini-player{--progress:0%;position:fixed;left:clamp(12px,3vw,48px);right:clamp(12px,3vw,48px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;color:var(--ink)}
.mini-player-bar{position:relative;display:grid;grid-template-columns:114px minmax(100px,190px) minmax(100px,1fr);align-items:center;gap:22px;min-height:64px;padding:0 22px}
.player-buttons{display:flex;align-items:center}
.player-buttons button{width:38px;height:44px;display:grid;place-items:center;padding:0;flex-shrink:0}
.player-buttons svg{width:14px;height:14px;stroke-width:1.6}
.player-buttons .mini-play svg{width:17px;height:17px}
.mini-track-info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-width:0;min-height:44px;padding:4px 0;text-align:left;font-size:12px;line-height:1.5;letter-spacing:.015em}
#mini-track-title,#mini-track-artist{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mini-track-artist{font-size:9px;color:var(--muted)}
.mini-player .seek-line{gap:12px;color:inherit;font-size:9px;min-width:0;font-variant-numeric:tabular-nums}
.mini-player .seek-line span{min-width:31px}
.mini-player .seek-line span:last-child{text-align:right}
.mini-player input[type=range]{appearance:none;-webkit-appearance:none;display:block;margin:0;background:transparent;height:30px;cursor:pointer;color:inherit}
.mini-player input[type=range]::-webkit-slider-runnable-track{height:1px;background:currentColor;opacity:.6}
.mini-player input[type=range]::-moz-range-track{height:1px;background:currentColor;opacity:.6}
.mini-player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:4px;height:11px;margin-top:-5px;background:currentColor;border:0;border-radius:0}
.mini-player input[type=range]::-moz-range-thumb{width:4px;height:11px;background:currentColor;border:0;border-radius:0}
.mini-player[data-loading=true] .mini-play{opacity:.5}






#mini-audio-error{position:absolute;left:0;bottom:100%;background:var(--paper);padding:8px 12px;font-size:10px;line-height:1.6;max-width:360px;margin:0 0 4px;color:#8b0000}
@media(max-width:900px){.theme-layout{grid-template-columns:120px minmax(220px,1fr);gap:30px}.theme-playlist{grid-column:2;max-width:360px}.mini-player-bar{grid-template-columns:105px minmax(90px,150px) minmax(90px,1fr);gap:15px;padding:0 16px}.player-buttons button{width:35px}}
@media(max-width:560px){.theme-page{padding:40px 28px 155px}.theme-layout{grid-template-columns:1fr;gap:28px}.theme-track-info{grid-row:2;padding:0}.theme-track-info h1{font-size:30px;margin-bottom:8px}.theme-track-info #track-artist{font-size:11px}.theme-album{max-width:360px;margin:0 auto;grid-row:1}.theme-playlist{grid-column:1;max-width:none;margin-top:5px}.theme-playlist h2{margin-bottom:5px}.mini-player{bottom:calc(10px + env(safe-area-inset-bottom))}.mini-player-bar{grid-template-columns:98px minmax(0,1fr);gap:0 12px;padding:8px 12px 6px;min-height:87px}.player-buttons button{width:32px;height:36px}.mini-track-info{min-height:36px;font-size:11px}.mini-player .seek-line{grid-column:1/-1;font-size:8px;gap:10px}.mini-player .seek-line input{height:23px}.mini-player .seek-line span{min-width:27px}}

/* Only the playback line fills with the track's progress. */
.mini-player.is-expanded{left:50%;right:auto;transform:translateX(-50%);width:calc(min(100%,1180px) - clamp(24px,5vw,78px) - clamp(24px,5vw,78px))}
.mini-player.is-expanded .mini-player-bar{padding-left:0;padding-right:0}
.mini-player .seek-line input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#8b0000 var(--progress),#c7c8c4 var(--progress));opacity:1}
.mini-player .seek-line input::-moz-range-track{height:2px;background:linear-gradient(to right,#8b0000 var(--progress),#c7c8c4 var(--progress));opacity:1}
.mini-player .seek-line input::-webkit-slider-thumb{background:#8b0000}
.mini-player .seek-line input::-moz-range-thumb{background:#8b0000}
/* Keep the compact control on every page outside THEME. */
.mini-player:not(.is-expanded){left:auto;right:max(28px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));max-width:calc(100vw - 48px)}
.mini-player:not(.is-expanded) .mini-player-bar{display:flex;gap:4px;min-height:40px;max-width:340px;padding:0}
.mini-player:not(.is-expanded) .player-buttons button:not(.mini-play),.mini-player:not(.is-expanded) .seek-line{display:none}
.mini-player:not(.is-expanded) .player-buttons .mini-play{width:40px;height:40px}
.mini-player:not(.is-expanded) .mini-play svg{width:15px;height:15px}
.mini-player:not(.is-expanded) .mini-track-info{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:6px;min-height:40px;padding:10px 0;font-size:11px;line-height:20px}
.mini-player:not(.is-expanded) #mini-track-artist{max-width:110px;flex-shrink:0;font-size:10px}
.mini-player:not(.is-expanded) #mini-track-artist::before{content:'— '}


.mini-player:not(.is-expanded) #mini-audio-error{left:auto;right:0;width:max-content;max-width:calc(100vw - 48px)}
@media(max-width:560px){.mini-player:not(.is-expanded){right:max(20px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100vw - 40px)}.mini-player:not(.is-expanded) .mini-player-bar{max-width:calc(100vw - 40px)}.mini-player:not(.is-expanded) #mini-track-artist{max-width:90px}}
@media(max-width:560px){
  .mini-player.is-expanded{width:calc(100% - 56px)}
  .mini-player.is-expanded .mini-player-bar{grid-template-columns:minmax(0,1fr) 132px;grid-template-areas:'track controls' 'timeline timeline';gap:8px;padding:12px 0 4px;min-height:0}
  .mini-player.is-expanded .mini-track-info{grid-area:track;min-height:44px;padding:0;gap:4px;font-size:17px;line-height:1.35}
  .mini-player.is-expanded #mini-track-artist{font-size:11px}
  .mini-player.is-expanded .player-buttons{grid-area:controls;justify-self:end}
  .mini-player.is-expanded .player-buttons button{width:44px;height:44px}
  .mini-player.is-expanded .player-buttons svg{width:16px;height:16px}
  .mini-player.is-expanded .player-buttons .mini-play svg{width:20px;height:20px}
  .mini-player.is-expanded .seek-line{grid-area:timeline;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;font-size:11px;color:var(--muted)}
  .mini-player.is-expanded .seek-line input{grid-column:1/-1;grid-row:1;width:100%;height:30px}
  .mini-player.is-expanded #time-current{grid-column:1;grid-row:2}
  .mini-player.is-expanded #time-total{grid-column:2;grid-row:2}
  .mini-player.is-expanded .seek-line input::-webkit-slider-thumb{width:7px;height:7px;margin-top:-2.5px;border-radius:50%}
  .mini-player.is-expanded .seek-line input::-moz-range-thumb{width:7px;height:7px;border-radius:50%}

}
@media(max-width:560px) and (pointer:coarse){.mini-player.is-expanded .seek-line input{height:44px}}

/* On desktop, center the album and stacked controls as one composition. */
@media(min-width:561px){
  .theme-playlist .music-track-list{max-height:360px}
  body.is-theme-page{min-height:100svh;display:grid;grid-template-rows:auto minmax(24px,1fr) auto auto minmax(24px,1fr)}
  body.is-theme-page>.site-header{grid-row:1}
  body.is-theme-page>main{grid-row:3;min-width:0}
  body.is-theme-page .theme-page{min-height:0;padding-top:0;padding-bottom:0}
  .mini-player.is-expanded{grid-row:4;position:relative;left:auto;right:auto;bottom:auto;transform:none;width:min(420px,calc(100% - 48px));margin:36px auto 0}
  .mini-player.is-expanded .mini-player-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:'track' 'timeline' 'controls';gap:8px;min-height:0;padding:0}
  .mini-player.is-expanded .mini-track-info{grid-area:track;align-items:center;text-align:center;padding:0;min-height:44px;font-size:15px;gap:3px}
  .mini-player.is-expanded #mini-track-artist{font-size:11px}
  .mini-player.is-expanded .seek-line{grid-area:timeline;width:100%;font-size:10px;color:var(--muted)}
  .mini-player.is-expanded .player-buttons{grid-area:controls;justify-self:center;gap:6px}
  .mini-player.is-expanded .player-buttons button{width:44px;height:44px}
  .mini-player.is-expanded .player-buttons svg{width:18px;height:18px}
  .mini-player.is-expanded .player-buttons .mini-play svg{width:22px;height:22px}

  .mini-player.is-expanded #mini-audio-error{left:50%;transform:translateX(-50%);width:max-content;max-width:100%}
}

/* Keep the fixed CD case centered between the two side panels. */
@media(min-width:901px){
  .theme-page{container-type:inline-size;max-width:1480px}
  .theme-layout{
    --album-gap:64px;
    /* Scale with both the screen width and the height left under the menu and player. */
    --album-width:min(680px,calc(100cqw - 350px - var(--album-gap) - var(--album-gap)),calc(100svh - 340px));
    grid-template-columns:minmax(0,1fr) var(--album-width) minmax(0,1fr);
    column-gap:var(--album-gap);
  }
  .theme-album{width:var(--album-width);max-width:none;justify-self:center}
  .theme-track-info,.theme-playlist{align-self:start;margin-top:clamp(72px,8vw,104px)}
  .theme-track-info{min-width:0;text-align:right}
}

.music-track-list button[aria-current=true] .music-track-name{font-weight:700}
#mini-track-title{font-weight:700}