.vinyl-stage{height:clamp(310px,46vw,560px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#414242 0%,#1b1e20 40%,#101214 78%);perspective:1800px;border:1px solid #ffffff17;border-radius:8px;margin-top:24px}
.vinyl-jacket{position:absolute;z-index:2;width:38%;aspect-ratio:1;left:31%;top:12%;transform-style:preserve-3d;transform:rotateY(-8deg);transition:transform 1.4s,left 1.4s,opacity 1.4s;box-shadow:2px 2px 0 #b5afa3,4px 4px 0 #393731,12px 25px 35px #0009}
.vinyl-jacket img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden}.vinyl-back{transform:rotateY(180deg)}
.vinyl-record{position:absolute;z-index:1;width:36%;aspect-ratio:1;left:32%;top:14%;border-radius:50%;background:#070708;box-shadow:0 0 0 2px #333,10px 20px 30px #0009;transition:left 1.5s,top 1.5s,width 1.5s,transform 1.5s;transform:rotate(-18deg)}
.vinyl-grooves{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 1px,#232325 1px 1.6px,#090909 1.6px 3px);mask-image:radial-gradient(circle,transparent 0 21%,#000 22% 68%,transparent 69%)}
.vinyl-record:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0deg,#fff2 40deg,transparent 70deg,transparent 180deg,#fff2 220deg,transparent 250deg);pointer-events:none}
.vinyl-label{position:absolute;width:33%;height:33%;left:33.5%;top:33.5%;object-fit:cover;border-radius:50%;z-index:2}.vinyl-hole{position:absolute;width:2.3%;height:2.3%;left:48.85%;top:48.85%;background:#171a1c;border:1px solid #aaa7;border-radius:50%;z-index:3}
.vinyl-stage[data-step="1"] .vinyl-jacket{transform:rotateY(180deg)}
.vinyl-stage[data-step="2"] .vinyl-jacket,.vinyl-stage[data-step="3"] .vinyl-jacket,.vinyl-stage[data-step="5"] .vinyl-jacket{left:13%;transform:rotateY(-6deg)}
.vinyl-stage[data-step="2"] .vinyl-record{left:40%;transform:rotate(0)}
.vinyl-stage[data-step="3"] .vinyl-record{left:54%;transform:rotate(10deg)}
.vinyl-stage[data-step="4"] .vinyl-jacket{left:5%;opacity:.18;transform:rotateY(-12deg)}
.vinyl-stage[data-step="4"] .vinyl-record{left:27%;top:5%;width:46%;transform:rotate(0);z-index:3}
.vinyl-stage[data-step="5"] .vinyl-record{left:14%;transform:rotate(-18deg)}
.vinyl-preview>.small-note{text-align:center;max-width:740px;margin:25px auto}.vinyl-preview .cd-dialog img{max-height:75vh;object-fit:contain}
@media(max-width:600px){.vinyl-stage{height:290px}.vinyl-jacket{top:25%;width:46%;left:27%}.vinyl-record{top:27%;width:43%;left:28.5%}.vinyl-stage[data-step="2"] .vinyl-jacket,.vinyl-stage[data-step="3"] .vinyl-jacket,.vinyl-stage[data-step="5"] .vinyl-jacket{left:5%}.vinyl-stage[data-step="3"] .vinyl-record{left:51%}.vinyl-stage[data-step="4"] .vinyl-record{width:76%;left:12%;top:10%}.vinyl-stage[data-step="5"] .vinyl-record{left:6.5%}}
@media(prefers-reduced-motion:reduce){.vinyl-jacket,.vinyl-record{transition:none}}