.record-crate{margin-top:34px;border-top:1px solid var(--line);padding-top:17px;position:relative}.crate-filter{position:absolute}.crate-topline{display:flex;justify-content:space-between;gap:20px;font:9px var(--mono);color:var(--muted);letter-spacing:.4px}.crate-topline i{font-style:normal;color:var(--orange);margin-left:12px}.crate-stage{height:410px;position:relative;perspective:1100px;isolation:isolate;overflow:hidden;touch-action:pan-y;--drag:0px;--card-gap:65px;--card-size:262px;margin-top:18px;cursor:grab}.crate-stage:active{cursor:grabbing}.crate-sleeves{position:absolute;inset:0;z-index:3;transform-style:preserve-3d}.crate-card{position:absolute;left:50%;top:36px;width:var(--card-size);height:var(--card-size);background:var(--art-paper);padding:0;box-shadow:0 2px 0 #151914,4px 5px 0 #15191433;border:1px solid #6e7764;transform-origin:center bottom;transform:translateX(-50%) translateX(calc(var(--slot)*var(--card-gap) + var(--drag))) translateY(calc(var(--depth)*17px)) translateZ(calc(var(--depth)*-55px)) rotateY(calc(var(--slot)*-13deg)) rotateZ(calc(var(--slot)*2.5deg)) scale(var(--scale));transition:transform .52s cubic-bezier(.2,.7,.15,1),opacity .4s;overflow:hidden;user-select:none;-webkit-user-select:none}.crate-card[hidden]{display:none}.crate-card img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;filter:url(#crate-dither);transition:filter .3s,opacity .2s;pointer-events:none}.crate-card.cover-ready img{opacity:1}.crate-card[data-slot="0"]:hover img,.crate-card[data-slot="0"]:focus-visible img{filter:none}.crate-card[data-slot="0"]{cursor:pointer}.crate-cover-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;font:italic 28px/1.15 Instrument,serif;color:#25291f;background:repeating-linear-gradient(0deg,#eee9de 0,#eee9de 4px,#d7d2c655 4px,#d7d2c655 5px)}.crate-back-wall{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) perspective(800px) rotateX(-7deg);width:535px;height:215px;background:#d3ccb6;clip-path:polygon(8% 0,92% 0,100% 94%,0 94%);border:1px solid #8a8168;z-index:1}.crate-photo{position:absolute;bottom:-9px;left:50%;width:450px;height:230px;transform:translateX(-50%);object-fit:cover;object-position:center 94%;mix-blend-mode:multiply;image-rendering:pixelated;z-index:4;pointer-events:none;opacity:.58}.crate-front-wall{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:490px;height:98px;border:1px solid #655d48;box-shadow:6px 6px 0 #10150e44;background:repeating-linear-gradient(0deg,#d8d1bd 0,#d8d1bd 2px,#aaa08c 2px,#d5ccb6 3px,#d5ccb6 11px);z-index:12;clip-path:polygon(0 5%,98% 0,100% 93%,1% 100%);display:flex;align-items:center;justify-content:space-between;padding:26px 34px;color:#25291f;pointer-events:none}.crate-front-wall>span{font:15px var(--mono);letter-spacing:3px;border:1px solid #777052;padding:6px 11px;transform:rotate(-2deg)}.crate-front-wall>i{font:italic 20px Instrument,serif;transform:rotate(-4deg)}.crate-heart-burst{position:absolute;left:50%;top:115px;transform:translateX(-50%);font:68px var(--sans);color:var(--orange);z-index:20;opacity:0;pointer-events:none;text-shadow:3px 3px var(--paper)}.heart-burst .crate-heart-burst{animation:crate-love .65s ease-out both}@keyframes crate-love{0%{opacity:0;transform:translateX(-50%) scale(.3)}35%{opacity:1;transform:translateX(-50%) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px) scale(.9)}}.is-dragging .crate-card{transition:none}.crate-record-info{text-align:center;min-height:106px;padding-top:13px}.crate-record-artist{display:block;font:10px/1.7 var(--mono);color:var(--muted)}.crate-record-title{font-size:29px;line-height:1.2;font-weight:400;letter-spacing:-.7px;margin:8px 0}.crate-record-year{font:9px var(--mono);color:var(--muted)}.crate-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:16px}.crate-flip{display:flex;align-items:center;gap:8px}.crate-flip button{width:35px;height:35px;border:1px solid var(--line);font:17px var(--mono)}.crate-flip button:hover{border-color:var(--orange);color:var(--orange)}.crate-flip>span{font:9px var(--mono);color:var(--muted);margin-left:8px}.crate-like{display:flex;align-items:center;gap:10px;font:10px var(--mono);min-height:38px}.crate-heart{font-size:27px;color:var(--orange)}.crate-like[aria-pressed="true"]{color:var(--orange)}.crate-like:disabled{opacity:.5}.crate-like-count{border-left:1px solid var(--line);padding-left:10px;color:var(--muted)}.crate-surprise{font:9px var(--mono);padding:10px 0}.crate-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font:8px/1.8 var(--mono);color:var(--muted)}.crate-bottom label{display:flex;align-items:center;gap:10px}.crate-bottom label>span{color:var(--orange);font-size:17px}.crate-search{width:235px;border:0;background:transparent;color:var(--ink);font:10px var(--mono);padding:9px 0;border-bottom:1px solid var(--line);border-radius:0}.crate-search::placeholder{color:var(--muted)}.crate-save-status{text-align:right}.record-crate noscript p{margin-top:25px;font:12px var(--mono)}.record-crate noscript a{text-decoration:underline}[data-theme="dark"] .crate-photo{mix-blend-mode:normal;opacity:.28}[data-theme="dark"] .crate-back-wall{background:#5b6253;border-color:#7f8772}
@media(max-width:700px){.record-crate{margin-top:27px}.crate-topline{font-size:7px}.crate-topline i{margin-left:6px}.crate-stage{height:332px;--card-size:210px;--card-gap:40px;margin-top:13px}.crate-card{top:31px}.crate-back-wall{width:330px;height:169px;bottom:17px}.crate-front-wall{width:300px;height:81px;padding:18px 20px;bottom:10px}.crate-front-wall>span{font-size:10px;letter-spacing:1.8px;padding:6px 8px}.crate-front-wall>i{font-size:15px;max-width:90px}.crate-photo{width:300px;height:180px;bottom:-1px}.crate-record-info{min-height:101px}.crate-record-title{font-size:25px;max-width:340px;margin:7px auto}.crate-record-artist{font-size:9px}.crate-controls{gap:10px;flex-wrap:wrap}.crate-flip>span{display:none}.crate-like{font-size:9px;gap:7px}.crate-surprise{font-size:8px}.crate-bottom{align-items:flex-start;flex-direction:column;gap:15px;margin-top:15px}.crate-search{width:245px;font-size:10px}.crate-save-status{text-align:left;font-size:8px}.crate-heart-burst{font-size:55px;top:97px}}
@media(prefers-reduced-motion:reduce){.crate-card,.crate-card img{transition:none}.heart-burst .crate-heart-burst{animation:none!important}}html[data-motion="paused"] .crate-card{transition:none}