.music-listen{--record:min(64vw,300px);--record-gap:38px;overflow:hidden}.record-track{display:flex;gap:var(--record-gap);overflow-x:auto;scroll-snap-type:x proximity;padding:30px calc((100% - var(--record))/2) 65px;scrollbar-width:none;perspective:1100px;touch-action:pan-x pan-y pinch-zoom}.record-track::-webkit-scrollbar{display:none}.record-cover{flex:0 0 var(--record);width:var(--record);padding:0;background:none;color:var(--cream);scroll-snap-align:center;transform:scale(.82) rotateY(-18deg);opacity:.55;transition:transform .45s,opacity .45s;position:relative}.record-cover[aria-pressed="true"]{transform:scale(1) rotateY(0);opacity:1}.record-cover>img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #ffffff38;box-shadow:4px 4px #080a0c,0 25px 42px #000a;-webkit-box-reflect:below 8px linear-gradient(transparent 85%,#0002)}.record-cover>span{position:absolute;left:12px;top:12px;background:#10120fdd;color:#fff;padding:5px 8px;font-size:10px}.record-controls{display:flex;align-items:center;justify-content:center;gap:28px;text-align:center;margin-bottom:24px}.record-controls>div{width:320px;max-width:60%}.record-controls h4{font:500 30px/1.1 var(--display);margin:0 0 8px}.record-controls p{font-size:13px;color:var(--muted);margin:0}.record-controls button:disabled{opacity:.25}.record-player{max-width:460px;margin:auto}.record-player>a{display:inline-flex;margin-top:18px;font-size:13px}.listen-note{text-align:center}@media(max-width:760px){.music-listen{--record-gap:22px}.record-controls{gap:12px}.record-controls h4{font-size:27px}}@media(prefers-reduced-motion:reduce){.record-cover{transition:none}}.paused .record-cover,.reduced .record-cover{transition:none}
.record-track{align-items:center}.record-cover>img{height:auto;display:block}

.record-player>iframe{height:175px}.record-player>a{font-size:11px;margin-top:10px}.listen-note{font-size:10px;opacity:.75}

.record-track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:auto}.record-cover{touch-action:pan-x pan-y pinch-zoom}