.crate{--card:clamp(220px, 64vw, 300px);position:relative}.crate__track{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px calc(50% - var(--card) / 2) 6px;margin-inline:calc(-1 * var(--crate-bleed,clamp(1rem, 4vw, 2rem)));gap:clamp(4px,1.5vw,18px);display:flex;overflow-x:auto;mask:linear-gradient(90deg,#0000,#000 9% 91%,#0000)}.crate__track::-webkit-scrollbar{display:none}@media (hover:hover) and (pointer:fine){.crate__track{cursor:grab}.crate__track.is-dragging{cursor:grabbing;scroll-snap-type:none}.crate__track.is-dragging .rec{pointer-events:none}}.crate__track:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:12px}.rec{flex:0 0 var(--card);scroll-snap-align:center;text-align:center;min-width:0;color:var(--white);-webkit-tap-highlight-color:transparent;opacity:.5;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);display:flex;transform:scale(.82)}.rec.is-on{opacity:1;transform:none}.crate__track.is-jumping .rec,.crate__track.is-jumping .rec *{transition:none!important}.rec:focus-visible{outline:none}.rec:focus-visible .rec__disc{outline:2px solid var(--pink);outline-offset:6px}.rec__vinyl{aspect-ratio:1;width:100%;margin-bottom:.9rem;display:block;position:relative}.rec__disc{z-index:1;background:radial-gradient(circle,#0000 0 34%,#ffffff1a 34.5% 35%,#0000 35.5% 46%,#ffffff0d 46.3% 46.6%,#0000 47% 70%,#ffffff0d 70.3% 70.6%,#0000 71%),repeating-radial-gradient(circle,#0b0a0f 0 1.1px,#19171f 1.5px 2.5px);border-radius:50%;position:absolute;inset:6%;box-shadow:0 22px 44px #000000a6,inset 0 0 0 1px #ffffff24,inset 0 0 0 5px #0b0a0f,inset 0 0 0 6px #ffffff0f}.rec__disc:after{content:"";pointer-events:none;background:conic-gradient(from calc(35deg + var(--sh,0deg)), transparent 0 7%, #ffffff29 12%, transparent 18% 50%, color-mix(in srgb, var(--lbl) 22%, transparent) 56%, transparent 63%);border-radius:50%;position:absolute;inset:0}.rec__shadow{filter:blur(6px);background:radial-gradient(closest-side,#000000bf,#0000);border-radius:50%;height:10%;position:absolute;bottom:1%;left:14%;right:14%}.rec__label{background:radial-gradient(circle at 34% 28%, #fff 0, var(--lbl) 62%);color:#17171c;border-radius:50%;justify-content:center;align-items:center;animation:1.8s linear infinite paused recSpin;display:flex;position:absolute;inset:33%;box-shadow:inset 0 0 0 1px #0000001a}.rec__rim{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.rec__rim text{font:800 7.4px var(--font-sub);fill:#17171c;fill-opacity:.72}.rec__label img{filter:brightness(0);opacity:.78;width:34%;height:auto}.rec__spindle{aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#fff,#9a9aa6 60%,#4a4a55);border-radius:50%;width:7%;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 1px 2px #00000080}.rec.is-on .rec__label{animation-play-state:running}@keyframes recSpin{to{rotate:360deg}}.rec__arm{z-index:2;pointer-events:none;transform-origin:86% 10%;opacity:0;filter:drop-shadow(0 6px 6px #00000080);width:52%;height:52%;transition:rotate 1s cubic-bezier(.3,1.25,.5,1),opacity .4s;position:absolute;top:-2%;right:-4%;rotate:-34deg}.rec.is-on .rec__arm{opacity:1;transition-delay:.15s;rotate:0deg}.rec__title{font-family:var(--font-sub);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;font-size:1rem;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.rec__now{opacity:0;align-items:flex-end;gap:2px;height:11px;margin-bottom:.35rem;transition:opacity .4s;display:inline-flex}.rec__now i{transform-origin:50% 100%;border-radius:2px;width:3px;height:100%;animation:.45s ease-in-out infinite alternate paused recBar}.rec__now i:first-child{background:#ff2081}.rec__now i:nth-child(2){background:#a64de8;animation-duration:.38s;animation-delay:-.2s}.rec__now i:nth-child(3){background:#4b7bff;animation-duration:.52s;animation-delay:-.1s}.rec.is-on .rec__now{opacity:1}.rec.is-on .rec__now i{animation-play-state:running}@keyframes recBar{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.rec__artists{color:var(--grey);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.82rem;overflow:hidden}@media (hover:hover) and (pointer:fine){.rec:hover{opacity:.8}.rec.is-on:hover{opacity:1}}.crate__ctrl{justify-content:center;align-items:center;gap:1rem;margin-top:.4rem;display:flex}.crate__dots{gap:8px;display:flex}.crate__dots i{background:#ffffff38;border-radius:50%;width:7px;height:7px;transition:background-color .3s,transform .3s}.crate__dots i.is-on{background:var(--pink);transform:scale(1.3)}.crate__btn{appearance:none;cursor:pointer;width:44px;height:44px;color:var(--white);background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;transition:color .25s,transform .25s;display:inline-flex}.crate__btn:hover{color:var(--pink)}.crate__btn:focus-visible{outline:2px solid var(--pink);outline-offset:2px}.crate .rec__disc:before{content:"";pointer-events:none;background:conic-gradient(from 0deg, transparent 0 8%, #ffffff24 14%, transparent 22% 48%, #0000002e 58%, transparent 68% 100%);rotate:var(--a,0deg);border-radius:50%;position:absolute;inset:0;mask:radial-gradient(circle,#0000 0 34%,#000 35%)}.crate .rec__label{rotate:var(--a,0deg);animation:none}.crate .rec.is-scratching .rec__disc{cursor:grabbing}.crate .rec.is-scratching .rec__arm{transition-duration:.2s;rotate:-6deg}@media (prefers-reduced-motion:reduce){.rec__label{animation:none}.rec,.rec__arm{transition:none}.rec__now i{animation:none}}