.music-player-grid{display:grid;grid-template-columns:minmax(190px,240px) minmax(240px,320px);align-items:center;justify-content:space-between;gap:2rem;width:100%}.music-player-visual{display:flex;min-height:300px;justify-content:center;align-items:flex-start}.music-player-details{display:flex;width:100%;min-width:0;flex-direction:column;gap:1.5rem;justify-self:end}.music-player-metadata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;font-size:.75rem}.music-player-metadata>div{min-width:0}.music-player-metadata dt{color:rgb(115 115 115);line-height:1.25}.music-player-metadata dd{margin-top:.2rem;overflow:hidden;color:currentColor;font-weight:500;line-height:1.35;text-overflow:ellipsis}.music-player-metadata__composer{grid-column:1/-1}.music-player-metadata__composer dd{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.album{--border-radius:3px;--cover-translate:-4%;--cover-rotate:-2deg;--vinyl-travel-duration:1.4s;--cd-exit-x:112%;position:relative;width:144px;max-width:144px;aspect-ratio:142/131;margin:0 auto 152px}.album .cover{position:relative;width:100%;height:100%;z-index:2;transition:transform .5s ease-in-out}.album .cover .case.cd{display:block;width:100%;height:100%;margin:0}.album .cover:before{height:10%;background:linear-gradient(180deg,rgba(255,255,255,.4) 1%,transparent 50%)}.album .cover:after,.album .cover:before{content:"";position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:3}.album .cover:after{height:100%;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 4%),linear-gradient(225deg,rgba(162,162,162,.1),rgba(162,162,162,.2) 4%,rgba(255,255,255,.2) 6%,rgba(255,255,255,.6) 7%,rgba(255,255,255,.2) 0,rgba(218,218,218,.04) 0,transparent 0),linear-gradient(45deg,rgba(14,14,14,.7),rgba(0,0,0,.5),rgba(0,0,0,.2) 4%,rgba(14,14,14,.2) 6%,rgba(255,255,255,.3) 7%,rgba(218,218,218,.4) 0,transparent 8%)}.album--case-arriving .cover .case:after,.album--case-arriving .cover:after,.album--case-arriving .cover:before{opacity:0}.album .vinyl-motion{position:absolute;top:5%;right:0;width:90%;aspect-ratio:1/1;transform:translate(0);z-index:1}.album .vinyl{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:transparent;-webkit-mask-image:radial-gradient(circle,transparent 0 5.5%,#000 6% 100%);mask-image:radial-gradient(circle,transparent 0 5.5%,#000 6% 100%);transform:rotate(270deg);box-shadow:0 0 0 1px rgb(35 40 44/.75),0 8px 18px rgb(0 0 0/.42)}.album .vinyl-cover{position:absolute;inset:2.5%;background-size:cover;background-position:50%;border-radius:50%;-webkit-mask-image:radial-gradient(circle,transparent 0 17%,#000 17.5% 94%,transparent 94.5% 100%);mask-image:radial-gradient(circle,transparent 0 17%,#000 17.5% 94%,transparent 94.5% 100%)}.album .vinyl-motion:after,.album .vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}.album .vinyl-motion:after{z-index:2;background-image:conic-gradient(from 135deg,transparent 40%,rgb(255 255 255/.5),transparent 60%),conic-gradient(from -45deg,transparent 40%,rgb(255 255 255/.42),transparent 60%),conic-gradient(from 45deg,transparent 38%,rgb(239 83 80/.38),rgb(255 152 0/.34),rgb(255 235 59/.32),rgb(76 175 80/.3),rgb(33 150 243/.36),rgb(156 39 176/.34),transparent 62%),conic-gradient(from -135deg,transparent 38%,rgb(255 205 210/.3),rgb(255 224 178/.3),rgb(255 249 196/.28),rgb(200 230 201/.28),rgb(187 222 251/.32),rgb(225 190 231/.3),transparent 62%);mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,transparent 0 17%,#000 17.5% 94%,transparent 94.5% 100%);mask-image:radial-gradient(circle,transparent 0 17%,#000 17.5% 94%,transparent 94.5% 100%)}.album .vinyl:after{z-index:3;background:radial-gradient(circle,transparent 0 93.5%,rgb(238 243 246/.88) 94%,rgb(91 99 105/.9) 98%,rgb(225 231 234/.9) 100%)}.album .cd-hub{position:absolute;inset:33%;z-index:4;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgb(255 255 255/.82),transparent 38%),rgb(205 214 219/.72);border:1px solid rgb(244 248 250/.76);box-shadow:inset 0 0 7px rgb(255 255 255/.72),inset 0 0 0 2px rgb(90 101 108/.18);-webkit-backdrop-filter:blur(8px) grayscale(1);backdrop-filter:blur(8px) grayscale(1);-webkit-mask-image:radial-gradient(circle,transparent 0 32%,#000 35% 100%);mask-image:radial-gradient(circle,transparent 0 32%,#000 35% 100%)}.album--deploying .cover,.album--parked .cover,.album--playing .cover,.album:hover .cover{transform:translateX(var(--cover-translate)) rotate(var(--cover-rotate))}.album--deploying .vinyl-motion{animation:vinyl-deploy var(--vinyl-travel-duration) cubic-bezier(.65,0,.35,1) both}.album--parked .vinyl-motion,.album--playing .vinyl-motion{transform:translateY(112%)}.album--retracting .vinyl-motion{animation:vinyl-deploy var(--vinyl-travel-duration) cubic-bezier(.65,0,.35,1) reverse both}.album--playing .vinyl{animation:vinyl-spin 2.4s linear infinite}@keyframes vinyl-deploy{0%{transform:translate(0)}45%{transform:translate(var(--cd-exit-x))}72%{transform:translate(var(--cd-exit-x),112%)}to{transform:translateY(112%)}}@keyframes vinyl-spin{0%{transform:rotate(270deg)}to{transform:rotate(630deg)}}@media (prefers-reduced-motion:reduce){.album--deploying .vinyl-motion,.album--playing .vinyl,.album--retracting .vinyl-motion{animation:none}.album--deploying .vinyl-motion,.album--parked .vinyl-motion,.album--playing .vinyl-motion{transform:translateY(112%)}}@media (max-width:767px){.music-player-grid{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:1.5rem}.music-player-details{justify-self:stretch;text-align:center}.album{--cover-translate:-52%;--cover-rotate:-7deg;--cd-exit-x:48%;margin-right:auto;margin-left:auto}}.track-cd-case{position:relative;width:3.5rem;height:3.5rem;flex-shrink:0;margin-inline:.125rem}.track-cd-case__scale{position:absolute;top:.375rem;left:.25rem;width:142px;height:131px;transform:scale(.338028);transform-origin:top left}.track-cd-case__tilt{width:142px;height:131px;transform:rotate(var(--track-cd-rotation));transform-origin:center;transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease}.track-cd-case__tilt .case{margin:0}.group:focus-within .track-cd-case__tilt,.group:hover .track-cd-case__tilt{filter:drop-shadow(0 8px 7px rgb(0 0 0/.22));transform:rotate(0deg) scale(1.08) translateY(-3px)}.track-cd-case__playing{position:absolute;right:.125rem;bottom:.25rem;display:flex;height:.75rem;align-items:flex-end;gap:2px;color:var(--foreground);filter:drop-shadow(0 1px 1px rgb(255 255 255/.9)) drop-shadow(0 1px 2px rgb(0 0 0/.35));pointer-events:none}.track-cd-case__playing span{width:2px;height:100%;border-radius:999px;background:currentColor;animation:track-cd-playing .7s ease-in-out infinite alternate}.track-cd-case__playing span:nth-child(2){height:65%;animation-delay:-.35s}.track-cd-case__playing span:nth-child(3){height:85%;animation-delay:-175ms}@keyframes track-cd-playing{to{height:30%}}@media (prefers-reduced-motion:reduce){.track-cd-case__tilt{transition:filter .16s ease}.group:focus-within .track-cd-case__tilt,.group:hover .track-cd-case__tilt{transform:rotate(var(--track-cd-rotation))}.track-cd-case__playing span{animation:none}}::view-transition-group(.music-cd-layer-0){z-index:3;animation-duration:.6s}::view-transition-group(.music-cd-layer-1){z-index:2;animation-duration:.6s}::view-transition-group(.music-cd-layer-2){z-index:1;animation-duration:.6s}