.ex-vinyl-player{display:grid;grid-template-columns:minmax(130px,.85fr) minmax(0,1.15fr);gap:18px 24px;min-width:0;padding:26px;border:1px solid #dbe5e9;border-radius:18px;background:linear-gradient(145deg,#f8fbfc,#fffdfa 65%,#f5eee1);box-shadow:0 12px 32px #143b5710;overflow:hidden;position:relative}
.ex-record-stage{position:relative;align-self:center;aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:18px 4px 16px}
.ex-record-caption{position:absolute;top:0;font-size:7px;letter-spacing:.13em;color:#8c9ca3;white-space:nowrap}
.ex-record-disc{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at center,#152c3c 0,#0a1b28 2px,#29404d 3px,#091925 4px);box-shadow:0 9px 17px #09233735,inset 0 0 0 1px #8498a8;z-index:1;animation:ex-vinyl-turn 18s linear infinite;animation-play-state:paused}
.ex-record-disc:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,#e5f4fc40 12%,transparent 23%,transparent 48%,#d5ebf333 62%,transparent 73%);z-index:2;pointer-events:none}
.ex-disc-photo{position:absolute;inset:12%;overflow:hidden;border:3px solid #f8f2e6;border-radius:50%;box-shadow:0 0 0 2px #b49a62,0 0 0 4px #061723}
.ex-disc-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.ex-disc-centre{position:absolute;width:12px;height:12px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#f5f2e8;border:3px solid #29444e;box-shadow:0 0 0 2px #f5f2e8c0;z-index:3}
.ex-disc-placeholder{position:absolute;inset:30%;display:grid;place-items:center;border-radius:50%;background:#e9e2d3;color:#315c72;font:italic 600 35px Georgia,serif;letter-spacing:-4px}
.ex-record-arm{position:absolute;top:8%;right:0;width:11px;height:62%;border-radius:8px;background:linear-gradient(90deg,#c6b178,#f7e7bd,#9f8d62);transform-origin:50% 5%;transform:rotate(-24deg);transition:transform .65s ease;z-index:4;box-shadow:1px 1px 2px #09233735;pointer-events:none}
.ex-record-arm:before{content:'';position:absolute;top:-1px;left:-3px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle,#a48c5c 20%,#e9dcb4 24%,#c3ad7d 70%);border:1px solid #917b50}
.ex-record-arm:after{content:'';position:absolute;bottom:-4px;left:-4px;width:18px;height:27px;border-radius:4px;background:linear-gradient(90deg,#18384a,#3b5864);transform:rotate(17deg)}
.ex-record-shadow{position:absolute;bottom:1%;width:76%;height:8%;border-radius:50%;background:#183c5418;filter:blur(5px)}
.ex-record-info{align-self:center;min-width:0}.ex-record-info .ex-kicker{font-size:8px;letter-spacing:.13em;color:#997d45}.ex-record-info h3{font-size:clamp(18px,1.7vw,26px);line-height:1.45;color:#0a426c;margin:9px 0 13px;overflow-wrap:anywhere;font-weight:500}
.ex-record-artist{display:flex;align-items:center;gap:7px;font-size:11px;color:#5f7b8c;margin:0}.ex-record-artist svg{width:14px;height:14px;flex:none}.ex-record-description{font-size:11px;line-height:1.8;color:#75858c;margin:12px 0 0;max-height:5.4em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-record-equalizer{height:17px;display:flex;gap:3px;align-items:flex-end;opacity:0;transition:opacity .25s;margin-top:13px;color:#397d99}.ex-record-equalizer i{width:2px;height:11px;background:#5b98ad;border-radius:2px;animation:ex-music-bars .8s ease-in-out alternate infinite;animation-play-state:paused}.ex-record-equalizer i:nth-child(2){height:7px;animation-delay:-.3s}.ex-record-equalizer i:nth-child(3){height:15px;animation-delay:-.5s}.ex-record-equalizer i:nth-child(4){height:8px;animation-delay:-.1s}.ex-record-equalizer i:nth-child(5){animation-delay:-.6s}.ex-record-equalizer span{font-size:9px;letter-spacing:.03em;align-self:center;margin-left:5px}
.ex-vinyl-player.is-playing .ex-record-disc,.ex-vinyl-player.is-playing .ex-record-equalizer i{animation-play-state:running}.ex-vinyl-player.is-playing .ex-record-arm{transform:rotate(9deg)}.ex-vinyl-player.is-playing .ex-record-equalizer{opacity:1}
.ex-vinyl-player>audio{grid-column:1/-1;width:100%;margin:5px 0}.ex-vinyl-player.is-enhanced>audio{display:none}.ex-record-controls{grid-column:1/-1;min-width:0}.ex-record-controls[hidden]{display:none}
.ex-record-transport{display:flex;justify-content:center;align-items:center;gap:21px;margin:1px 0 17px}.ex-record-transport>button,.ex-record-volume>button{display:grid;place-items:center;width:37px;height:37px;padding:0;line-height:1;border:0;border-radius:50%;background:transparent;color:#447088;cursor:pointer;transition:background .2s,transform .2s}.ex-record-transport>button:disabled{opacity:.3;cursor:default}.ex-record-transport>.ex-record-play{width:53px;height:53px;color:#fff;background:linear-gradient(135deg,#0b81af,#07578e);box-shadow:0 6px 14px #13678a26}.ex-record-play svg{display:block;width:22px;height:22px}
.ex-record-timeline{display:flex;align-items:center;gap:11px;min-width:0;font-size:10px;font-variant-numeric:tabular-nums;color:#617e8d}.ex-record-timeline>span{width:35px;flex-shrink:0}.ex-record-timeline>span:last-child{text-align:right}
.ex-record-controls input[type=range]{appearance:none;-webkit-appearance:none;min-width:0;height:4px;padding:0;border:0;border-radius:8px;background:linear-gradient(to right,#2088aa 0 var(--played,0%),#d9e3e6 var(--played,0%) 100%);cursor:pointer;accent-color:#0876a3;box-shadow:none}.ex-record-timeline>input{width:100%;flex:1}.ex-record-controls input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #1682a5;box-shadow:0 1px 4px #19445c20}.ex-record-controls input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #1682a5}.ex-record-controls input[type=range]:disabled{opacity:.55;cursor:default}.ex-record-controls input[type=range]:focus-visible,.ex-record-controls button:focus-visible{outline:2px solid #137fa9;outline-offset:5px}
.ex-record-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;min-height:29px}.ex-record-state{font-size:10px;line-height:1.6;color:#826344;flex:1;min-width:0}.ex-record-volume{display:flex;align-items:center;gap:5px;flex-shrink:0}.ex-record-volume>button{width:28px;height:28px}.ex-record-volume svg{width:15px;height:15px}.ex-record-volume input{width:60px}.ex-record-source{grid-column:1/-1;font-size:10px;color:#41768e;justify-self:center;text-decoration:none;margin-top:-8px}.ex-record-source:hover{text-decoration:underline}.ex-record-unavailable{grid-column:1/-1;font-size:12px;color:#7f8e96;margin:0}
.ex-tracklist .ex-track-cover{width:37px;height:37px;object-fit:cover;border-radius:5px;flex:none}.ex-tracklist>button.is-active{box-shadow:inset 3px 0 #1284ae}.ex-tracklist>button{transition:background .2s}
@keyframes ex-vinyl-turn{to{transform:rotate(360deg)}}@keyframes ex-music-bars{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@media(hover:hover){.ex-record-transport>button:not(:disabled):hover,.ex-record-volume>button:hover{background:#dfedf2;transform:translateY(-1px)}.ex-record-transport>.ex-record-play:hover{background:linear-gradient(135deg,#0b8fbc,#096798)}}
@media(max-width:1100px){.ex-vinyl-player{padding:20px;gap:14px 19px;grid-template-columns:minmax(115px,.85fr) minmax(0,1.15fr)}.ex-record-info h3{font-size:20px}}
@media(max-width:600px){.ex-vinyl-player{padding:22px 20px 15px;grid-template-columns:1fr;gap:10px;border-radius:15px}.ex-record-info h3{font-size:19px}.ex-record-caption{font-size:6px;letter-spacing:.08em}.ex-record-description{font-size:10px}.ex-record-artist{font-size:10px}.ex-record-transport{gap:27px;margin-bottom:20px}.ex-record-transport>.ex-record-play{width:55px;height:55px}.ex-record-timeline{font-size:11px}.ex-record-volume input{width:65px}.ex-record-state{font-size:10px}}

@media(max-width:600px){.ex-record-stage{width:170px;justify-self:center}.ex-record-info{text-align:center}.ex-record-info h3{font-size:21px;margin:7px 0 8px}.ex-record-artist{justify-content:center;font-size:11px}.ex-record-description{margin-top:8px;-webkit-line-clamp:2;max-height:3.6em}.ex-record-equalizer{justify-content:center;margin-top:8px}.ex-record-caption{font-size:7px}.ex-record-transport{margin-top:0}}

/* Thin visible track with a larger touch target. */
.ex-record-controls input[type=range]{height:26px;background-size:100% 4px;background-repeat:no-repeat;background-position:center}.ex-record-controls input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent}.ex-record-controls input[type=range]::-webkit-slider-thumb{margin-top:-4px}.ex-record-controls input[type=range]::-moz-range-track{height:4px;background:transparent}@media(max-width:600px){.ex-record-transport>button:not(.ex-record-play){width:44px;height:44px}.ex-record-volume>button{width:38px;height:38px}}