.record-player{position:absolute;left:12px;top:var(--player-top,235px);width:clamp(160px,21vw,270px);z-index:5;color:#e8e7e2;text-align:center}
.player-controls{position:absolute;inset:0;z-index:3}
.player-control{display:grid;place-items:center;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:#fff;border-radius:0;padding:0;cursor:pointer}
.player-control svg{width:clamp(76px,48%,112px);height:auto;fill:currentColor;stroke:none;opacity:0;filter:drop-shadow(0 2px 5px #0009);pointer-events:none;transition:opacity .18s ease}
.record-player:hover .player-control svg,.player-control:focus-visible svg{opacity:.65}
.player-control:focus-visible{outline:2px solid #a2a6ff;outline-offset:-5px}
.player-control .pause-icon{display:none}
.is-playing .player-control .play-icon{display:none}
.is-playing .player-control .pause-icon{display:block}
.player-deck{position:relative;width:100%;aspect-ratio:1;filter:drop-shadow(0 8px 13px #000b)}
.player-disc{position:absolute;left:15.4%;top:13.2%;width:73.6%;height:73.6%;border-radius:50%;overflow:hidden;background:#11161c;animation:record-turn 8s linear infinite;animation-play-state:paused;z-index:1}
.is-playing .player-disc{animation-play-state:running}
.player-disc img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:scale(.94);border-radius:50%;display:block}
.player-disc:after{content:'';position:absolute;inset:0;border:1px solid #b4c5d277;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,#ffffff08 3.5px 4px);box-shadow:inset 0 0 0 3px #a8b1c355,inset 0 0 18px #0008;pointer-events:none}
.player-housing{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.player-status{font-size:9px;line-height:1.45;letter-spacing:.025em;margin:0 auto;max-width:95%;overflow-wrap:anywhere;color:#b8c2c4;background:#080a09d9;padding:3px 5px;border-radius:3px;display:table}
.record-player.is-playing .player-status{color:#e0e3ff}
@keyframes record-turn{to{transform:rotate(-360deg)}}
@media(max-width:620px){.record-player{left:10px;width:150px}.player-status{font-size:9px}}
@media(hover:none){.player-control svg{opacity:.65}}
@media(prefers-reduced-motion:reduce){.player-disc{animation:none}.player-control svg{transition:none}}
/* Keep the sound source obvious, even without hover or a mouse. */
.record-player.has-track .player-control svg{opacity:.82}
.record-player.has-track .player-control{filter:drop-shadow(0 2px 7px #000c)}
.record-player.arrival-attention .player-control{animation:player-arrival-ring 1.1s ease-in-out 4}
.record-player.arrival-attention .player-control svg{animation:player-arrival-icon 1.1s ease-in-out 4;opacity:1}
.record-player.arrival-attention .player-status{outline:1px solid #ff9c42;color:#fff0dc}
@keyframes player-arrival-ring{0%,100%{box-shadow:0 0 0 0 #ff8a1200}50%{box-shadow:0 0 0 5px #ff8a1277,0 0 28px #ff8a1255}}
@keyframes player-arrival-icon{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){.record-player.arrival-attention .player-control,.record-player.arrival-attention .player-control svg{animation:none}.record-player.arrival-attention .player-control{outline:2px solid #ff9c42;outline-offset:-6px}}