/* Album browser: all album composition and CD material rules live here. */
:root{--album-d:min(48svh,34vw,460px)}
#gallery{position:fixed;inset:0;transition:opacity .3s,visibility .3s}
.singles-mode #gallery,.playlists-mode #gallery{opacity:0;visibility:hidden;pointer-events:none}
.album-toolbar{position:absolute;top:103px;left:6vw;right:6vw;max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;z-index:30;transition:opacity .2s}
.album-toolbar>p{font-size:12px;letter-spacing:.08em}.album-toolbar>p>span{color:var(--muted);margin-left:5px;font-size:10px}
.album-view-switch{display:flex;gap:22px}.album-view-switch button{min-width:44px;min-height:44px;font-size:12px;color:var(--muted);position:relative}
.album-view-switch button[aria-pressed=true]{color:var(--ink)}.album-view-switch button[aria-pressed=true]:after{content:'';position:absolute;bottom:7px;left:12px;right:12px;height:1px;background:currentColor}
#albumGrid{position:absolute;inset:158px 6vw 82px;max-width:1320px;margin:auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:38px 32px;align-content:start;align-items:start;padding:20px 4px 38px;touch-action:pan-y}
.album-card{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;padding:0 0 7px;min-width:0;animation:album-enter .3s var(--ease) both}
.grid-disc{width:clamp(140px,16vw,220px);max-width:100%;aspect-ratio:1;position:relative;display:block;transform:rotateX(3deg) rotateY(-8deg);transition:transform .28s var(--ease);margin-bottom:23px;pointer-events:none}
.album-card:hover .grid-disc{transform:translateY(-3px) rotateX(5deg) rotateY(-6deg)}
.album-card-title{font:500 20px/1.5 var(--serif);position:relative;max-width:100%;overflow-wrap:anywhere;padding:0 8px}.selection-dot{position:absolute;right:-2px;top:.68em;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0}.album-card.current .selection-dot{opacity:1}
.album-card-meta{font-size:10px;line-height:1.8;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.album-card-meta>span{margin:0 4px}
body[data-album-view=focus] #albumGrid{display:none}
#stage{position:absolute;inset:150px 0 210px;perspective:1900px;perspective-origin:50% 50%;touch-action:pan-y;overflow:hidden}
.disc{position:absolute;left:50%;top:50%;width:var(--album-d);height:var(--album-d);margin:calc(var(--album-d)/-2) 0 0 calc(var(--album-d)/-2);cursor:pointer;outline:none}
.cd-model{--th:calc(var(--album-d)*.009);transform-style:preserve-3d}
.cd-model .disc-inner,.cd-model .disc-rotor{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.cd-model .disc-inner{transition:transform .85s var(--ease)}
.cd-model .disc-rotor{animation:record-turn 44s linear infinite;animation-play-state:paused}
.detail-open .disc.selected .disc-rotor,.detail-open .detail-model .disc-rotor{animation-play-state:running}
.rotation-paused .cd-model .disc-rotor,.page-hidden .cd-model .disc-rotor,.singles-mode .cd-model .disc-rotor,.playlists-mode .cd-model .disc-rotor{animation-play-state:paused}
@keyframes record-turn{to{transform:rotateZ(360deg)}}
.cd-model .disc-shadow{position:absolute;inset:1%;border-radius:50%;box-shadow:5px 17px 24px -10px #14251d36;transform:translateZ(calc(var(--th)*-.6));pointer-events:none}
.cd-model .face,.cd-model .edge,.cd-model .disc-sheen{position:absolute;inset:0;border-radius:50%;display:block;mask-image:radial-gradient(circle closest-side at center,transparent 0 12.2%,#000 12.8%);-webkit-mask-image:radial-gradient(circle closest-side at center,transparent 0 12.2%,#000 12.8%)}
.cd-model .edge{mask-image:radial-gradient(circle closest-side,transparent 0 27%,#000 27.6%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 27%,#000 27.6%);transform:translateZ(calc(var(--th)*var(--layer)));background:conic-gradient(from 15deg,#6d7976,#eaf0ed 12%,#9eaaa4 25%,#f8f9ed 40%,#6f7e7b 59%,#dce6e1 75%,#9ca8a0 88%,#e8eeeb)}
.cd-model .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 1px #f7fff6b3;background:conic-gradient(from 12deg,#7e8c85,#f7faf4 20%,#a5b2ac 39%,#e8eee8 63%,#89988e 80%,#eef4ec)}
.cd-model .face.front{transform:translateZ(calc(var(--th)/2));background:transparent}
.cd-model .face.front:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 12deg,#7e8c85,#f7faf4 20%,#a5b2ac 39%,#e8eee8 63%,#89988e 80%,#eef4ec);mask-image:radial-gradient(circle closest-side,transparent 0 97.7%,#000 98%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 97.7%,#000 98%)}
.cd-model .art{position:absolute;inset:1%;width:98%;height:98%;object-fit:cover;display:block;border-radius:50%;background-size:cover;mask-image:radial-gradient(circle closest-side at center,transparent 0 27%,#000 27.6%);-webkit-mask-image:radial-gradient(circle closest-side at center,transparent 0 27%,#000 27.6%)}
.cd-model .face.back{transform:rotateY(180deg) translateZ(calc(var(--th)/2));background:transparent}
.cd-model .face.back:before{content:'';position:absolute;inset:0;border-radius:50%;mask-image:radial-gradient(circle closest-side,transparent 0 27%,#000 27.6%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 27%,#000 27.6%);background:radial-gradient(circle closest-side,transparent 0 26.5%,#f8fff65e 26.7% 27%,transparent 27.2% 86%,#f7fff952 86.2% 86.5%,transparent 86.7%),conic-gradient(from 28deg,#aab7b0,#ecf0e8 12%,#b6c9c6 22%,#c9c0cf 26%,#dce0ca 29%,#eff1e8 43%,#a4b4ae 58%,#dce5dc 73%,#bebac8 78%,#e2dfc4 81%,#b5c2b8)}
.cd-model .hub{position:absolute;inset:36.5%;border-radius:50%;background:conic-gradient(from 125deg,#dce4e168,#faffffa6 19%,#99aaa066 38%,#e9f0eb9c 58%,#c3d0c08c 78%,#f3f7ef99);border:1px solid #f8fff58c;box-shadow:inset 0 0 0 1px #64756b38}
.cd-model .plug{position:absolute;left:43.7%;top:43.7%;width:12.6%;height:12.6%;border-radius:50%;border:1px solid #e9f3e6a3;box-shadow:0 1px 1px #20332c70,inset 0 1px 1px #13271f80;background:transparent}
.cd-model .disc-sheen{pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(130deg,#ffffff2c,transparent 37%,transparent 63%,#13271d0d 86%,#ffffff12)}
.cd-model .front-sheen{transform:translateZ(calc(var(--th)/2 + 1px))}.cd-model .back-sheen{transform:rotateY(180deg) translateZ(calc(var(--th)/2 + 1px));background:linear-gradient(135deg,#fff7,transparent 38%,#253b2410 78%,#fff2)}
.cd-model .rim{position:absolute;inset:0;width:100%;height:100%}.cd-model .rim text{font:1.7px var(--sans);letter-spacing:.2em;fill:#17271c91}.cd-model .rim.lit text{fill:#f6f5e5cc}
.cd-model .backprint{position:absolute;top:72%;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.15em;white-space:nowrap;color:#344a3c99}
.disc:focus-visible:after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--accent);pointer-events:none}
.film-info{position:absolute;left:20%;right:20%;bottom:134px;text-align:center;pointer-events:none;transition:opacity .2s,translate .25s var(--ease)}
.film-info h1{font:500 clamp(26px,2.8vw,40px)/1.4 var(--serif);letter-spacing:.03em;margin:0 0 5px}.album-meta{font-size:11px;line-height:1.8;color:var(--muted)}
.changing .film-info{opacity:0;translate:0 5px}
.gallery-bottom{position:absolute;bottom:76px;left:6vw;right:6vw;display:flex;align-items:center;justify-content:space-between;z-index:25;transition:opacity .2s}
.gallery-bottom>span{font-size:9px;letter-spacing:.08em;color:var(--muted);width:220px}.gallery-hint{text-align:right}
.transport{display:flex;gap:10px}.transport button{font-size:12px;padding:0 12px;min-height:44px;min-width:44px;white-space:nowrap}.transport button:hover{color:var(--accent);background:#f5f3e65c}.transport button:disabled{opacity:.3;cursor:default}.transport span{margin-left:8px}
body[data-album-view=grid]:not(.detail-open) #stage,body[data-album-view=grid] .film-info,body[data-album-view=grid] .gallery-bottom{visibility:hidden;pointer-events:none;opacity:0}
.detail-open #albumGrid,.detail-open .album-toolbar,.detail-open .film-info,.detail-open .gallery-bottom{opacity:0;visibility:hidden;pointer-events:none}
.detail-open #stage{inset:0;overflow:hidden}
#detail{position:absolute;top:108px;bottom:65px;left:47%;right:7%;z-index:35;overflow:auto;padding:16px 12px 35px 8px;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .25s,transform .4s var(--ease),visibility .25s;scrollbar-width:thin}
.detail-open #detail{visibility:visible;opacity:1;transform:none}.detail-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;gap:12px}.detail-top button{font-size:10px;letter-spacing:.03em;min-height:44px;color:var(--muted)}
.detail-disc{display:none}#detail h2{font:500 clamp(34px,4.2vw,64px)/1.2 var(--serif);letter-spacing:.02em;margin:14px 0}.detail-credit{font-size:11px;color:var(--muted);line-height:1.8}
.track-heading{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding:15px 0 10px;margin-top:30px;font-size:9px;letter-spacing:.08em;color:var(--muted)}
.album-tracks{list-style:none}.album-tracks li{display:flex;align-items:center;gap:14px;min-height:49px;border-bottom:1px solid var(--line)}.album-tracks li:hover{background:#24221e04}.album-tracks .no{font:italic 13px var(--serif);color:var(--muted);min-width:24px}.track-name{flex:1;min-width:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.album-tracks .heart{min-width:44px;width:44px;min-height:44px}.track-time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.detail-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:28px;font-size:10px;line-height:1.8}.detail-bottom>a{border-bottom:1px solid var(--ink);padding-bottom:6px}.detail-bottom>span{color:var(--muted)}
@keyframes album-enter{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(min-width:701px) and (max-width:1100px){#albumGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-disc{width:clamp(165px,20vw,220px)}.gallery-bottom>span{width:100px}.gallery-hint{visibility:hidden}#detail{left:44%;right:4%}.detail-top{margin-bottom:20px}}
@media(max-width:700px){
 :root{--album-d:min(65vw,39svh,300px)}
 .album-toolbar{top:88px;left:22px;right:22px}.album-toolbar>p{font-size:11px}.album-view-switch{gap:14px}.album-view-switch button{font-size:11px}
 #albumGrid{inset:147px 22px 64px;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding:14px 0 35px}
 .grid-disc{width:min(37vw,170px);margin-bottom:17px}.album-card-title{font-size:16px;line-height:1.45;padding:0 5px}.album-card-meta{font-size:11px;line-height:1.6;margin-top:6px}.album-card-meta>span{margin:0 1px}.selection-dot{width:3px;height:3px;right:-1px}
 #stage{inset:144px 0 215px;perspective:1200px}.film-info{left:22px;right:22px;bottom:145px}.film-info h1{font-size:27px;margin-bottom:7px}.album-meta{font-size:11px}
 .gallery-bottom{left:10px;right:10px;bottom:77px;justify-content:center}.gallery-bottom>span{display:none}.transport{gap:1px}.transport button{padding:0 12px;font-size:11px}.transport span{margin-left:5px}
 .detail-open #stage{display:none}#detail{inset:88px 0 60px;padding:0 20px 30px;transform:translateY(12px)}.detail-top{margin-bottom:17px;position:relative;z-index:2}.detail-top button{font-size:11px}
 .detail-intro{display:flex;flex-direction:column;align-items:center;text-align:center}.detail-disc{display:block;width:164px;height:164px;margin:1px auto 23px}.detail-model{position:relative;width:100%;height:100%;--th:1.5px;transform:rotateY(-6deg) rotateX(3deg)}
 .detail-title{width:100%}#dNumber{font-size:8px;letter-spacing:.12em}#detail h2{font-size:31px;line-height:1.3;margin:10px 0}.detail-credit{font-size:11px}.track-heading{font-size:9px;letter-spacing:.02em;margin-top:25px}.album-tracks li{gap:9px;min-height:54px}.album-tracks .no{min-width:19px;font-size:12px}.track-name{font-size:13px}.track-time{font-size:10px}.album-tracks .heart{min-width:44px;width:44px}.detail-bottom{font-size:10px;gap:16px}
}
@media(max-height:680px) and (min-width:701px){:root{--album-d:min(43svh,32vw,360px)}.album-toolbar{top:90px}#stage{inset:133px 0 170px}.film-info{bottom:113px}.film-info h1{font-size:27px}.gallery-bottom{bottom:60px}#detail{top:88px;bottom:55px}.detail-top{margin-bottom:10px}#detail h2{font-size:36px}.track-heading{margin-top:20px}#albumGrid{top:142px;bottom:66px}}
@media(max-height:720px) and (max-width:700px){:root{--album-d:min(58vw,34svh,250px)}#stage{inset:136px 0 190px}.film-info{bottom:131px}.film-info h1{font-size:24px}.gallery-bottom{bottom:70px}}
@media(prefers-reduced-motion:reduce){.cd-model .disc-rotor{animation:none!important}.album-card{animation:none}.cd-model .disc-inner,.grid-disc,#detail{transition:none}}