:root{--bg:#1d3a4a;--ink:#f1ece0;--orange:#f2a541;--pink:#e4577a;--mint:#a9d6c3;--deep:#12252f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 Onest,sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:32px;padding:16px 5vw;background:#1d3a4acc;backdrop-filter:blur(8px)}
.logo{font:800 24px Unbounded;margin-right:auto;color:var(--orange)}
.top nav{display:flex;gap:24px}
.cartbtn,.main{font:500 16px Onest;border:0;border-radius:99px;padding:12px 22px;cursor:pointer;background:var(--orange);color:var(--deep);transition:transform .15s}
.cartbtn:active,.main:active{transform:scale(.96)}
.cartbtn b{background:var(--deep);color:var(--orange);border-radius:99px;padding:1px 8px;margin-left:6px}
.stage{display:grid;grid-template-columns:minmax(320px,720px) 1fr;gap:5vw;align-items:center;padding:4vw 5vw 8vw}
.deck{position:relative;aspect-ratio:1;width:100%}
#viz{position:absolute;inset:0;width:100%;height:100%}
.platter{position:absolute;inset:14%;border-radius:50%;background:repeating-radial-gradient(#0c1a22 0 2px,#16303d 3px 4px);box-shadow:0 20px 60px #0008;display:grid;place-items:center;animation:spin 1.8s linear infinite;animation-play-state:paused}
.platter.on{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.label{width:34%;aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;text-align:center;color:#fff;font:800 clamp(9px,1.3vw,14px) Unbounded;padding:10%;transition:background .5s}
.platter.drop .label{animation:land .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes land{from{transform:scale(.4);opacity:0}}
.arm{position:absolute;right:4%;top:6%;width:6px;height:46%;background:#cfd8dc;border-radius:4px;transform-origin:50% 0;transform:rotate(-18deg);transition:transform 1s cubic-bezier(.6,0,.3,1)}
.arm i{position:absolute;bottom:-6px;left:-7px;width:20px;height:28px;background:var(--pink);border-radius:4px}
.arm.down{transform:rotate(14deg)}
.panel h1{font:800 clamp(30px,4vw,54px)/1.08 Unbounded;margin-bottom:18px}
.sub{max-width:46ch;opacity:.85;margin-bottom:28px}
.crate{display:flex;gap:14px;overflow-x:auto;padding:16px 2px 18px;scroll-snap-type:x mandatory}
.rec{flex:0 0 110px;scroll-snap-align:start;border:0;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left}
.rec .cover{aspect-ratio:1;border-radius:8px;transition:transform .25s}
.rec:hover .cover,.rec[aria-selected=true] .cover{transform:translateY(-10px) rotate(-3deg)}
.rec small{display:block;margin-top:8px;font-size:13px;line-height:1.3}
.ctrl{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ctrl label{display:grid;gap:4px;font-size:14px}
input[type=range]{accent-color:var(--orange);width:200px}
.shop{background:var(--ink);color:var(--deep);padding:7vw 5vw}
.shophead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:end;margin-bottom:36px}
h2{font:800 clamp(28px,3.6vw,46px) Unbounded}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:2px solid var(--deep);background:none;border-radius:99px;padding:6px 16px;font:500 15px Onest;cursor:pointer;color:var(--deep)}
.filters button[aria-pressed=true]{background:var(--deep);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}
.card .cover{aspect-ratio:1;border-radius:6px;position:relative;overflow:hidden}
.card .cover::after{content:"";position:absolute;right:-30%;top:10%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#0c1a22 0 22%,#16303d 23%);transition:transform .4s}
.card:hover .cover::after{transform:translateX(-35%)}
.card h3{font:500 18px Onest;margin-top:12px}
.card p{opacity:.7;font-size:14px}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.card button{border:0;background:var(--deep);color:var(--ink);border-radius:99px;padding:8px 16px;cursor:pointer;font:500 14px Onest}
.visit{padding:9vw 5vw;max-width:900px}
.visit p{margin-top:16px;max-width:50ch}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(380px,100%);background:var(--deep);padding:28px;transform:translateX(100%);transition:transform .4s;z-index:9;display:flex;flex-direction:column;gap:16px}
.drawer.open{transform:none}
.drawer ul{list-style:none;padding:0;flex:1;overflow:auto;display:grid;gap:10px;align-content:start}
.drawer li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #fff2;padding-bottom:8px}
.drawer li button{background:none;border:0;color:var(--pink);cursor:pointer}
@media(max-width:860px){.stage{grid-template-columns:1fr}.top nav{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}