.vinyl-jukebox{display:flex;gap:1.75rem;align-items:center}.vinyl-stage{position:relative;display:grid;place-items:center;width:190px;height:190px}.vinyl-stage:before{inset:14px;background:radial-gradient(circle at 36% 30%,rgba(255,208,122,.5),rgba(255,208,122,0) 52%),radial-gradient(circle at 64% 68%,rgba(120,174,255,.34),rgba(120,174,255,0) 56%),radial-gradient(circle at center,hsla(0,0%,100%,.14),hsla(0,0%,100%,0) 72%);filter:blur(10px)}.vinyl-stage:after,.vinyl-stage:before{content:"";position:absolute;border-radius:9999px;pointer-events:none}.vinyl-stage:after{inset:8px;border:1px solid hsla(0,0%,100%,.2);box-shadow:inset 0 0 40px hsla(0,0%,100%,.08)}.vinyl-record{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 28% 26%,hsla(0,0%,100%,.18),hsla(0,0%,100%,0) 30%),radial-gradient(circle at 70% 74%,hsla(0,0%,100%,.06),hsla(0,0%,100%,0) 44%),radial-gradient(circle at center,#303030 0,#0a0a0a 48%,#000 100%);position:relative;border:1px solid hsla(0,0%,100%,.18);box-shadow:0 22px 40px rgba(0,0,0,.62),0 0 0 2px hsla(0,0%,100%,.07),inset 0 1px 0 hsla(0,0%,100%,.25),inset 0 -18px 34px rgba(0,0,0,.65);cursor:pointer;outline:none;transition:transform .22s ease,box-shadow .22s ease}.vinyl-record:focus-visible{box-shadow:0 0 0 3px hsla(0,0%,100%,.38),0 0 0 8px rgba(250,204,21,.22),0 22px 42px rgba(0,0,0,.66)}.vinyl-record:hover{transform:scale(1.02);box-shadow:0 26px 46px rgba(0,0,0,.66),0 0 0 2px hsla(0,0%,100%,.14),0 0 22px rgba(255,208,122,.25),inset 0 1px 0 hsla(0,0%,100%,.3),inset 0 -18px 34px rgba(0,0,0,.7)}.vinyl-record.spinning{animation:spin 10s linear infinite}.vinyl-outer{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,hsla(0,0%,100%,.11) 0,hsla(0,0%,100%,.11) 1px,hsla(0,0%,100%,.03) 2px,hsla(0,0%,100%,.03) 3px,transparent 4px,transparent 6px),conic-gradient(from 22deg,hsla(0,0%,100%,.16),hsla(0,0%,100%,.02) 24%,hsla(0,0%,100%,.15) 36%,hsla(0,0%,100%,.02) 66%,hsla(0,0%,100%,.1) 76%,hsla(0,0%,100%,.03))}.vinyl-label{width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 36% 32%,hsla(0,0%,100%,.2),hsla(0,0%,100%,0) 48%),#252525;background-size:cover;background-position:50%;border:2px solid hsla(0,0%,100%,.18);box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 8px rgba(0,0,0,.45)}.vinyl-hole,.vinyl-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vinyl-hole{width:10px;height:10px;background:#0b0b0b;border-radius:50%;border:1px solid hsla(0,0%,100%,.28);box-shadow:0 0 0 1px rgba(0,0,0,.65)}.vinyl-meta{display:flex;flex-direction:column;gap:.5rem}.vinyl-title{font-weight:600}.vinyl-artist{opacity:.7;font-size:.9rem}.vinyl-play-btn{margin-top:.5rem;width:-moz-fit-content;width:fit-content;padding:.4rem 1.25rem;border-radius:9999px;background:linear-gradient(135deg,#f97316,#facc15);color:#111827;font-weight:600;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.vinyl-play-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(249,115,22,.35)}.vinyl-play-btn:active{transform:translateY(0);box-shadow:none}.vinyl-play-btn:focus-visible{outline:2px solid rgba(250,204,21,.75);outline-offset:2px}@media (max-width:640px){.vinyl-jukebox{gap:1.1rem}.vinyl-stage{width:160px;height:160px}.vinyl-record{width:142px;height:142px}.vinyl-label{width:56px;height:56px}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}