*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d}:root{--handle-girth: 10;--handle-multiplier: .5px;--surface-1: hsl(210 10% 50%);--surface-2: hsl(210 10% 40%);--surface-3: hsl(210 10% 30%);--surface-4: hsl(210 10% 20%);--surface-5: hsl(210 10% 10%);--speaker: hsl(0 0% 6%);--trim: hsl(0 0% 90%);--tweeter: hsl(0 0% 30%);--handle: hsl(0 0% 8%);--label: hsl(0 0% 98%);--top: hsl(210 10% 65%);--front: var(--surface-1);--grill: hsl(0 0% 10%);--back: var(--surface-3);--cassette: hsl(0 0% 0%);--control: hsl(210 80% 80%);--play: hsl(10 80% 80%);--accent: hsl(10 50% 50%);--drawer: hsl(210 10% 6%)}.scene-wrapper{transform:translateZ(100vmin)}body{display:grid;place-items:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui}span{display:block}.play-btn{position:relative;border:0;padding:0;background:none}.play-btn__text{color:#fff;padding:1rem 2rem;background:var(--front)}.txt{display:flex;align-items:center;gap:.5rem}.play-btn__text svg{width:24px}.play-btn__box{--depth: var(--boom-depth);display:none;position:absolute;inset:0;color:var(--surface-3);opacity:1;transform:translateZ(-1px)}.play-btn__box>.cuboid>.cuboid__side:nth-of-type(2):after{content:"";height:16%;width:60%;position:absolute;bottom:6%;right:0;background:repeating-linear-gradient(0deg,var(--grill) 0 20%,transparent 20% 40%)}.speaker{position:absolute;height:55%;aspect-ratio:1;border-radius:50%;bottom:0;background:conic-gradient(from 190deg,hsl(0 0% 20%) 0 45deg,transparent 0deg),var(--speaker);border:4px solid var(--trim)}.tweeter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:50%;aspect-ratio:1;border-radius:50%;background:var(--tweeter)}.controls{position:absolute;bottom:10%;left:10%;height:16%;display:flex;gap:4px}.bear{position:absolute;left:5%;top:5%;width:20%;rotate:-30deg}.brand{color:var(--trim);text-shadow:2px 2px red;position:absolute;right:4%;top:8%;font-size:1rem;font-family:monospace;font-weight:700}.brand:after{content:"";position:absolute;top:110%;width:100%;aspect-ratio:2 / 1;background:var(--label);right:0}.control{--depth: 20;height:100%;aspect-ratio:1;color:var(--control)}.control:nth-of-type(1){color:#a3f5b1}.cogs{position:absolute;top:50%;left:50%;translate:-50% -50%;height:40%;width:70%;display:flex;justify-content:space-between}.cogs:after{content:"";font-family:cursive;background:#fff;height:.5rem;position:absolute;top:110%;width:80%;left:50%;overflow:hidden;translate:-50% 0}.cog{fill:#000;stroke:var(--trim)}.control:nth-of-type(3){aspect-ratio:2 / 1;color:var(--play)}.speaker--left{left:0;translate:10% -10%}.speaker--right{right:0;translate:-10% -10%}.cassette-hole{--depth: 20;color:var(--surface-4);aspect-ratio:4 / 2.5;width:25%;position:absolute;top:50%;left:50%;translate:-50% 0;transform-origin:50% 100%;transform:translateZ(-11px)}.cassette-hole .cuboid__side:nth-of-type(5){display:none}.cassette{--depth: 10;color:var(--cassette);width:90%;aspect-ratio:4 / 2.5;transform:translateZ(-11px)}.cassette-deck{aspect-ratio:4 / 2.5;background:linear-gradient(90deg,var(--drawer) 10px,transparent 10px calc(100% - 10px),var(--drawer) calc(100% - 10px)),linear-gradient(0deg,var(--drawer) 10px,transparent 10px calc(100% - 10px),var(--drawer) calc(100% - 10px)),linear-gradient(-65deg,transparent 70%,hsl(0 0% 100% / .5) 70.5% 80%,transparent 80.5% 82%,hsl(0 0% 100% / .5) 82.5% 84%,transparent 84.5%),#fff3;display:grid;place-items:center;width:25%;position:absolute;top:50%;left:50%;translate:-50% 0;transform-origin:50% 100%;transform:rotateX(0)}.cassette .cuboid__side:nth-of-type(5){background:linear-gradient(90deg,transparent 60%,red 60.5% 70.5%,transparent 71%),var(--cassette)}.cassette-deck:after,.cassette-deck:before{content:"";position:absolute;bottom:0;height:85%;width:10%;background:var(--drawer)}.cassette-deck:after{left:100%;transform-origin:0 50%;transform:rotateY(90deg);clip-path:polygon(0 0,100% 25%,100% 100%,0 100%)}.cassette-deck:before{right:100%;transform-origin:100% 50%;transform:rotateY(-90deg);clip-path:polygon(0 25%,100% 0%,100% 100%,0 100%)}.play-btn>.cuboid{color:var(--back)}.play-btn__box>.cuboid>.cuboid__side:nth-of-type(5){filter:none;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * .5px));top:0;left:0;background:linear-gradient(180deg,var(--front) 50%,transparent 50% 77%,var(--front) 77%),linear-gradient(90deg,var(--front) 38.5%,transparent 38.5% 62.5%,var(--front) 62.5%),hsl(0 0% 50% / var(--fill, 0))}.eq-wrap{width:25%;aspect-ratio:16 / 6;top:20%;position:absolute;left:50%;translate:-50% 0}.eq{border:4px solid black;aspect-ratio:16 / 6;width:100%;background:#000}.eq-wrap:after{content:"";position:absolute;inset:0;border:4px solid black;background:linear-gradient(-65deg,transparent 50%,hsl(0 0% 100% / .5) 50.5% 60%,transparent 60.5% 62%,hsl(0 0% 100% / .5) 62.5% 64%,transparent 64.5%)}.top{position:absolute;bottom:10%;width:calc(90% - (2 * (var(--handle-girth) * 1px)));height:90%;--depth: calc(var(--active) * 40);left:50%;translate:-50% 0;color:var(--top);transform:translateZ(-20px)}.top .cuboid__side:nth-of-type(2){background:var(--back)}.play-btn__backdrop{background:var(--surface);position:absolute;inset:0;z-index:0}.play-btn__box>.cuboid>.cuboid__side:nth-of-type(6){background:linear-gradient(0deg,var(--back) calc(100% - (var(--handle-girth) * 1px)),transparent calc(100% - (var(--handle-girth) * 1px))),linear-gradient(90deg,var(--back) 5%,transparent 5% 95%,var(--back) 95%)}.top>.cuboid>.cuboid__side:nth-of-type(5):after{content:"";position:absolute;right:10%;top:0;background:repeating-linear-gradient(90deg,var(--grill) 0 5%,transparent 5% 10%);height:30%;width:36%}.play-btn__box>.cuboid>.cuboid__side:nth-of-type(1){background:linear-gradient(0deg,var(--top) 10%,transparent 10%),linear-gradient(90deg,var(--top) 5%,transparent 5% 95%,var(--top) 95%)}.handle{color:var(--handle);height:80%;position:absolute;top:0;left:50%;translate:-50% 0;width:90%;transform-origin:50% 100%;transform:translateZ(calc(var(--handle-girth) * -.5px)) rotateX(0)}.handle__segment{--depth: calc(var(--active) * var(--handle-girth));position:absolute}.handle__left{width:calc(var(--handle-girth) * var(--handle-multiplier));height:100%;left:0}.handle__right{width:calc(var(--handle-girth) * var(--handle-multiplier));height:100%;right:0}.handle__top{height:calc(var(--handle-girth) * var(--handle-multiplier));width:100%}.btn-scene{--active: 0;position:relative}.btn-shadow{width:100%;aspect-ratio:4 / 1;background:#1a1a1a;top:100%;position:absolute;translate:0 -50%;transform:rotateX(90deg) translateY(-1px)}.cuboid{--color-range-lower: 180;--color-range-upper: 340;--step: calc((var(--color-range-upper) - var(--color-range-lower)) / var(--count));--alpha: calc(1 - ((.85 / var(--count)) * var(--index)));--color: hsl(calc(var(--color-range-lower) + (var(--step) * var(--index))) 80% 60% / var(--alpha));--bg: currentColor}.cuboid{width:100%;height:100%;position:relative}.cuboid__side{background:var(--bg);filter:brightness(var(--b, 1));border:calc(var(--size) * .0075vmin) solid var(--color);position:absolute}.cuboid__side:nth-of-type(1){--b: 1.1;filter:none;height:calc(var(--depth, 20) * 1px);width:100%;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){--b: .9;height:100%;width:calc(var(--depth, 20) * 1px);top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--b: .5;width:100%;height:calc(var(--depth, 20) * 1px);bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--b: 1;height:100%;width:calc(var(--depth, 20) * 1px);left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){filter:none;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * .5px));top:0;left:0}.cuboid__side:nth-of-type(6){--b: 1.2;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * -.5px)) rotateY(180deg);top:0;left:0}