.vinyl{padding-right:16%;position:relative}.vinyl-sleeve{z-index:1;aspect-ratio:1;border:var(--rule-hair) solid var(--color-ink);background:var(--color-placeholder);position:relative;overflow:hidden;box-shadow:0 1px 1px #0003,0 8px 16px -6px #00000059,0 20px 32px -14px #0000004d}.vinyl-sleeve:after{content:"";pointer-events:none;background:radial-gradient(circle,#0000 46%,#ffffff12 47.5%,#0000 49%),linear-gradient(135deg,#ffffff29,#0000 30% 75%,#0000001f);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14,inset -3px 0 6px -3px #00000059}.vinyl-fallback{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.vinyl-disc{--peek:12%;aspect-ratio:1;width:80%;transform:translate(var(--peek), -50%);position:absolute;top:50%;left:2%}.vinyl-disc-spin{background:conic-gradient(from 30deg,#0000 0deg,#ffffff21 25deg,#0000 60deg 180deg,#ffffff1a 205deg,#0000 240deg),repeating-radial-gradient(circle,#ffffff09 0 1px,#0000 1px 3px),radial-gradient(circle,#161616 0 36%,#0b0b0b 37%,#111 38%,#0b0b0b 97%,#222 98%,#050505 100%);border-radius:50%;width:100%;height:100%;position:relative;box-shadow:0 0 0 1px #0009,0 6px 14px -4px #00000073}.vinyl-label{background:var(--color-accent,#c33);border-radius:50%;position:absolute;inset:32%;overflow:hidden;box-shadow:0 0 0 1px #00000080}.vinyl-label:after{content:"";aspect-ratio:1;background:var(--color-paper,#fafafa);border-radius:50%;width:9%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 1px #00000080}@media (prefers-reduced-motion:no-preference){.vinyl-disc{transition:transform var(--motion-reveal) var(--ease-snap)}.vinyl-sleeve{transition:translate var(--motion-reveal) var(--ease-snap)}.group:is(:hover,:focus-visible) .vinyl-disc{--peek:24%}.group:is(:hover,:focus-visible) .vinyl-sleeve{translate:-2%}.vinyl-disc-spin{animation:1.8s linear infinite paused vinyl-spin}.group:is(:hover,:focus-visible) .vinyl-disc-spin{animation-play-state:running}}@keyframes vinyl-spin{to{rotate:1turn}}