.vinyl-jukebox{align-items:center;gap:1.75rem;display:flex}.vinyl-jukebox--compact{justify-content:center;gap:0;width:100%}.vinyl-stage{place-items:center;width:190px;height:190px;display:grid;position:relative}.vinyl-stage:before{content:"";filter:blur(10px);pointer-events:none;background:radial-gradient(circle at 36% 30%,#ffd07a80,#ffd07a00 52%),radial-gradient(circle at 64% 68%,#78aeff57,#78aeff00 56%),radial-gradient(circle,#ffffff24,#fff0 72%);border-radius:9999px;position:absolute;inset:14px}.vinyl-stage:after{content:"";pointer-events:none;border:1px solid #fff3;border-radius:9999px;position:absolute;inset:8px;box-shadow:inset 0 0 40px #ffffff14}.vinyl-record{cursor:pointer;background:radial-gradient(circle at 28% 26%,#ffffff2e,#fff0 30%),radial-gradient(circle at 70% 74%,#ffffff0f,#fff0 44%),radial-gradient(circle,#303030 0%,#0a0a0a 48%,#000 100%);border:1px solid #ffffff2e;border-radius:50%;outline:none;width:170px;height:170px;transition:transform .22s,box-shadow .22s;position:relative;box-shadow:0 22px 40px #0000009e,0 0 0 2px #ffffff12,inset 0 1px #ffffff40,inset 0 -18px 34px #000000a6}.vinyl-record:focus-visible{box-shadow:0 0 0 3px #ffffff61,0 0 0 8px #facc1538,0 22px 42px #000000a8}.vinyl-record:hover{transform:scale(1.02);box-shadow:0 26px 46px #000000a8,0 0 0 2px #ffffff24,0 0 22px #ffd07a40,inset 0 1px #ffffff4d,inset 0 -18px 34px #000000b3}.vinyl-record.spinning{animation:10s linear infinite spin}.vinyl-outer{background:repeating-radial-gradient(circle,#ffffff1c 0 1px,#ffffff08 2px 3px,#0000 4px 6px),conic-gradient(from 22deg,#ffffff29,#ffffff05 24%,#ffffff26 36%,#ffffff05 66%,#ffffff1a 76%,#ffffff08);border-radius:50%;position:absolute;inset:0}.vinyl-label{background-color:#252525;background-image:radial-gradient(circle at 36% 32%,#fff3,#fff0 48%),none;background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:2px solid #ffffff2e;border-radius:50%;width:66px;height:66px;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0009,inset 0 1px 8px #00000073}.vinyl-label-image{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.vinyl-hole{background:#0b0b0b;border:1px solid #ffffff47;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000000a6}.vinyl-meta{flex-direction:column;gap:.5rem;display:flex}.vinyl-title{font-weight:600}.vinyl-artist{opacity:.7;font-size:.9rem}.vinyl-play-btn{color:#111827;cursor:pointer;background:linear-gradient(135deg,#f97316,#facc15);border:none;border-radius:9999px;width:fit-content;margin-top:.5rem;padding:.4rem 1.25rem;font-weight:600;transition:transform .15s,box-shadow .15s}.vinyl-play-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #f9731659}.vinyl-play-btn:active{box-shadow:none;transform:translateY(0)}.vinyl-play-btn:focus-visible{outline-offset:2px;outline:2px solid #facc15bf}.vinyl-jukebox--compact .vinyl-stage{width:min(100%,190px)}@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}.vinyl-jukebox--compact .vinyl-stage:before,.vinyl-jukebox--compact .vinyl-stage:after{display:none}.vinyl-jukebox--compact .vinyl-record{border-color:#0000;box-shadow:0 18px 34px #00000094,inset 0 1px #ffffff38,inset 0 -18px 34px #000000a6}.vinyl-jukebox--compact .vinyl-record:hover{box-shadow:0 22px 40px #0000009e,0 0 18px #ffd07a2e,inset 0 1px #ffffff42,inset 0 -18px 34px #000000b3}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}