*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;-webkit-tap-highlight-color:transparent;touch-action:none}#canvas{display:block;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:0;touch-action:none}.vignette-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;background:radial-gradient(circle at center,transparent 40%,rgba(9,21,5,1) 100%);mix-blend-mode:hard-light}#share-toast{position:fixed;top:calc(64px + env(safe-area-inset-top));right:20px;z-index:40;font-family:Aspekta-450,sans-serif;font-size:14px;letter-spacing:1px;color:#72ddf9e6;background:#0a285099;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(114,221,249,.25);border-radius:16px;padding:6px 14px;opacity:1;transition:opacity .2s ease;pointer-events:none;-webkit-user-select:none;user-select:none}#share-toast.hidden{opacity:0}#panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;opacity:0;background:transparent;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);pointer-events:none;transition:opacity .28s ease,backdrop-filter .28s ease,background .28s ease}#panel-backdrop.active{opacity:1;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(6px);background:#0000008c;pointer-events:auto}.intro-hidden{transform:translateY(120px);opacity:0;pointer-events:none}.intro-visible{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}#bottom-assembly{position:fixed;left:50%;transform:translate(-50%);width:80%;min-width:320px;max-width:560px;bottom:42px;z-index:30;display:flex;flex-direction:column;align-items:center}.controls-group{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:0}.controls-row{display:flex;align-items:flex-end;justify-content:center;gap:14px;flex-wrap:wrap}:root{--noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.controls-panel{display:inline-flex;flex-direction:column;align-items:center;gap:0;padding:8px 6px 2px;overflow:visible;position:relative;border-radius:8px;border:1px solid #111}.controls-panel.metal{background:#0a1e3c8c;border-color:#72ddf926;box-shadow:inset 0 8px 12px #0009,0 1px 1px #72ddf914}.panel-release-label{font-family:Aspekta-450,sans-serif;font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#c4f1fb;text-shadow:0 0 12px rgba(114,221,249,.7),0 -1px 1px rgba(0,0,0,.8);text-align:center;width:100%;padding:2px 8px 6px;white-space:nowrap;overflow:hidden;max-height:30px;transition:max-height .3s ease,opacity .3s ease,padding .3s ease,margin .3s ease;animation:releaseLabelPulse 2.5s infinite linear}.panel-label-hidden{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}@keyframes releaseLabelPulse{0%{opacity:.7;filter:brightness(.85)}2%{opacity:1;filter:brightness(1.1)}4%{opacity:.7;filter:brightness(.85)}8%{opacity:1;filter:brightness(1.05)}9%{opacity:.7;filter:brightness(.85)}12%{opacity:1;filter:brightness(1.05)}40%{opacity:1;filter:brightness(1.1)}42%{opacity:.7;filter:brightness(.85)}44%{opacity:1;filter:brightness(1.2)}75%{opacity:1;filter:brightness(1.1)}77%{opacity:.55;filter:brightness(.75)}78%{opacity:1;filter:brightness(1.08)}98%{opacity:1;filter:brightness(1.1)}to{opacity:.7;filter:brightness(.85)}}.controls-panel-row{display:flex;align-items:center;gap:2px}.panel-divider-horizontal{height:1px;width:calc(100% - 12px);margin:1px 0;background:#72ddf91a;box-shadow:0 1px #0000004d;overflow:hidden;transition:height .3s ease,opacity .3s ease,margin .3s ease}.panel-divider{width:1px;align-self:stretch;margin:4px;background:#72ddf91a;box-shadow:1px 0 #0000004d}.tape-btn{position:relative;width:52px;height:56px;border:none;padding:0;cursor:pointer;outline:none;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.24,1.05,.48,1.05),box-shadow .18s cubic-bezier(.24,1.05,.48,1.05),background .15s ease-out;transform:translateY(-12px);z-index:2;pointer-events:auto}.tape-btn.pressed{transform:translateY(0);transition:transform .04s cubic-bezier(.2,0,1,.8),box-shadow .04s cubic-bezier(.2,0,1,.8),background .06s ease-in}.metal .tape-btn{background:linear-gradient(to bottom,#1e466ed9,#0f233ce6);box-shadow:inset 0 1px 1px #72ddf94d,inset 1px 0 2px #72ddf91f,inset -1px 0 2px #0000004d,inset 0 -2px 2px #00000080,0 1px #0006,0 2px #0c192de6,0 3px #0a1628e6,0 4px #081223e6,0 5px #060f1ee6,0 6px #050c19e6,0 7px #040a16e6,0 8px #030812e6,0 9px #02060ee6,0 10px #01040ae6,0 11px #000206e6,0 12px #000003e6,0 15px 8px #000000b3}.metal .tape-btn.pressed{background:linear-gradient(to bottom,#142d4bd9,#0a192de6);box-shadow:inset 0 12px 10px #00000080,inset 0 1px 1px #72ddf91f,inset 0 -1px 2px #0000004d}.controls-panel .tape-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-image:var(--noise-texture);mix-blend-mode:overlay;opacity:.2;pointer-events:none;z-index:1}.tape-btn .icon,.tape-btn .tape-led{position:relative;z-index:2}.tape-led{position:absolute;top:6px;width:18px;height:3px;border-radius:2px;background:#034;box-shadow:inset 0 1px 1px #000c;transition:all .2s}.tape-btn.play:not(.pressed) .tape-led{animation:ledPulseRed 1.2s infinite alternate ease-in-out}@keyframes ledPulseRed{0%{background:#300;box-shadow:inset 0 1px 1px #0006}to{background:#ff3b3b;box-shadow:0 0 6px #ff3b3be6,0 0 14px #ff3b3b80,inset 0 1px 1px #fffc}}.tape-btn.play.pressed .tape-led{animation:none;background:#72ddf9;box-shadow:0 0 6px #72ddf9e6,0 0 14px #72ddf980,inset 0 1px 1px #ffffffe6}.tape-btn .icon{margin-top:8px;display:flex;align-items:center;justify-content:center;color:#72ddf966;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.6)) drop-shadow(0 1px 1px rgba(114,221,249,.12));transition:all .2s}.tape-btn .icon svg{fill:currentColor}.tape-btn.pressed .icon{color:#c4f1fb;filter:drop-shadow(0 0 12px rgba(114,221,249,.7)) drop-shadow(0 -1px 1px rgba(0,0,0,.8))}.controls-panel .tape-btn.presave{width:auto;min-width:100px;height:fill;flex-direction:row;gap:10px;padding:0 16px;background:transparent;border-radius:10px;border:none;border-top:1px solid rgba(114,221,249,.6);box-shadow:none;overflow:visible}.presave-frosted-glass{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;border-radius:inherit;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:radial-gradient(circle at center,#14a0bef2,#0a82a0e0 55%,#056e8cd9);box-shadow:inset 0 0 35px #00b4d2b3,inset 0 8px 15px #ffffff40,0 2px #056e8cf2,0 3px #046482eb,0 4px #035873e0,0 5px #024e69d9,0 6px #02445fd1,0 7px #013a52c7,0 8px #013248bd,0 9px #002a3eb3,0 10px #002334a8,0 11px #001c2a9e,0 12px #00142094,0 14px 10px #000812b3,0 0 50px #00b4dc80}.tape-btn.presave.pressed{box-shadow:none}.tape-btn.presave.pressed .presave-frosted-glass{background:radial-gradient(circle at center,#14a0bef2,#0a82a0e0 55%,#056e8cd9);box-shadow:inset 0 0 50px #00c8e6e6,inset 0 8px 15px #ffffff80,0 1px #005a7899,0 0 60px #00c8f0cc;filter:brightness(1.2) contrast(1.15)}.presave-content{display:flex;align-items:center;gap:2px;position:relative;z-index:2}.presave-heart{flex-shrink:0}.presave-text{font-family:Aspekta-450,sans-serif;font-size:1.3em;font-weight:700;letter-spacing:.2px;text-transform:uppercase}.tape-btn.presave .presave-text{color:#c4f1fb;text-shadow:0 0 20px rgba(114,221,249,.8),0 1px 1px rgba(0,0,0,.2)}.tape-btn.presave .presave-heart{fill:#c4f1fb;filter:drop-shadow(0 0 20px rgba(114,221,249,.8)) drop-shadow(0 1px 1px rgba(0,0,0,.2))}.tape-btn.presave:not(.pressed) .presave-frosted-glass{animation:presavePulse 2.5s infinite linear}@keyframes presavePulse{0%{opacity:.85;filter:brightness(.95)}2%{opacity:1;filter:brightness(1.1) contrast(1.1)}4%{opacity:.85;filter:brightness(.9)}8%{opacity:1;filter:brightness(1.05)}9%{opacity:.85;filter:brightness(.9)}12%{opacity:1;filter:brightness(1.05)}40%{opacity:1;filter:brightness(1.1)}42%{opacity:.85;filter:brightness(.9)}44%{opacity:1;filter:brightness(1.2)}75%{opacity:1;filter:brightness(1.1)}77%{opacity:.7;filter:brightness(.8)}78%{opacity:1;filter:brightness(1.08) contrast(1.2)}98%{opacity:1;filter:brightness(1.1)}to{opacity:.85;filter:brightness(.9)}}.tape-btn.presave.pressed .presave-heart{animation:none;fill:#72ddf9;filter:drop-shadow(0 0 10px rgba(114,221,249,.7)) drop-shadow(0 -1px 1px rgba(0,0,0,.8))}.tape-btn.presave.pressed .presave-text{animation:none;color:#c4f1fb;text-shadow:0 0 12px rgba(114,221,249,.5),0 -1px 1px rgba(0,0,0,.4)}.bass-section{display:flex;align-items:center;gap:4px;padding:0 4px 0 0}.sub-knob{width:56px;height:56px;border-radius:50%;position:relative;cursor:pointer;background:linear-gradient(135deg,#374665,#1f293b 40%,#111824);box-shadow:inset 0 1px 2px #72ddf94d,inset 0 -1px 2px #0009,0 1px #000000b3,0 2px #18202e,0 3px #161d2a,0 4px #141a26,0 5px #111722,0 6px #0f141d,0 7px #0d1119,0 8px #0b0e15,0 9px #080b11,0 10px #06080c,0 11px #040508,0 12px #020304,0 18px 15px #000000e6}.sub-knob:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;background:repeating-conic-gradient(#555,#999,#555,#bbb,#555 4deg);opacity:.15;mix-blend-mode:multiply}#bass-knob{background:transparent;box-shadow:none;border:none}.sub-knob-floor-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;box-shadow:0 4px 6px #00000080,0 14px 8px #0006;pointer-events:none;z-index:1}.sub-knob-pivot{position:absolute;width:100%;height:100%;border-radius:50%}.pivot-3{width:100%;height:100%;border-radius:50%;position:relative;background:repeating-conic-gradient(from 0deg,#0f1e37e6,#1e3755e6 1.8deg,#325578cc 5deg,#0f1e37e6 5.4deg)}.pivot-3-cap{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;transform:translateY(-8px);background:linear-gradient(135deg,#234669d9,#0f1e37e6);box-shadow:inset 0 1px 1px #72ddf980,inset 0 -2px 1px #00000080,0 1px #0009,0 2px #0c192de6,0 3px #0a1628e6,0 4px #081223e6,0 2px #060f1ee6,0 6px #040c19e6,0 7px #030914e6,0 8px #02060ee6,0 12px 10px #000000b3}.pivot-3-cap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-image:var(--noise-texture);mix-blend-mode:overlay;opacity:.35;pointer-events:none}.sub-knob-pivot-notch{position:absolute;width:48px;height:48px;top:-4px;left:4px;border-radius:50%}.knob-embossed-notch{position:absolute;top:4px;left:50%;margin-left:-3px;width:4.5px;height:12px;background:#034;border-radius:3px;box-shadow:inset 0 2px 4px #000,inset 0 1px 1px #000c;z-index:3;transition:background .15s,box-shadow .15s}.knob-embossed-notch.glow-on{background:#72ddf9;box-shadow:0 0 6px #72ddf9e6,0 0 14px #72ddf980,inset 0 1px 2px #ffffffe6}.led-segment-notch{position:absolute;top:0;left:0;width:4px;height:8px;background:#034;border-radius:1.4px;opacity:.15;transition:opacity .1s,box-shadow .1s;box-shadow:inset 0 0 1px #000;z-index:1}.led-segment-notch.active{opacity:1;background:var(--seg-clr);box-shadow:0 0 6px var(--seg-clr),0 0 14px var(--seg-clr),inset 0 1px 2px #ffffffe6;z-index:3}.sub-label{font-family:Aspekta-450,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#72ddf959;text-shadow:0 -1px 1px rgba(0,0,0,.4),0 1px 1px rgba(114,221,249,.08);transition:all .2s}.sub-label.glow-on{color:#c4f1fb;text-shadow:0 0 12px rgba(114,221,249,.7),0 -1px 1px rgba(0,0,0,.8)}#broke-logo{position:fixed;top:calc(0px + env(safe-area-inset-top));left:4px;z-index:100;display:flex;flex-direction:row;align-items:center;gap:2px;text-decoration:none;cursor:pointer}.broke-logo-icon{width:90px;height:90px;transition:filter .4s ease}.broke-logo-icon img{width:100%;height:100%;filter:brightness(0) saturate(100%) invert(62%) sepia(60%) saturate(500%) hue-rotate(150deg) brightness(1.1);animation:vinylSpin 4s linear infinite;animation-play-state:paused}#broke-logo.spinning .broke-logo-icon{filter:drop-shadow(0 0 6px rgba(156,226,243,.9)) drop-shadow(0 0 12px rgba(0,180,220,.8))}#broke-logo.spinning .broke-logo-icon img{animation-play-state:running}#broke-logo:hover .broke-logo-icon{filter:drop-shadow(0 0 2px rgba(114,221,249,.9)) drop-shadow(0 0 24px rgba(0,180,220,.55))}.broke-logo-label-wrap{overflow:hidden;max-width:0;transition:max-width .4s cubic-bezier(.16,1,.3,1)}.broke-logo-label{display:block;font-family:Archivo Black,sans-serif;font-weight:900;font-size:18px;letter-spacing:-.1px;color:#c4f1fc;text-transform:uppercase;white-space:nowrap;padding-right:0}#broke-logo:hover .broke-logo-label-wrap,#broke-logo.touched .broke-logo-label-wrap,body.presave-active #broke-logo .broke-logo-label-wrap{max-width:200px}@keyframes vinylSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#share-btn{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:100;height:42px;min-width:42px;border-radius:21px;border:1px solid rgba(114,221,249,.3);background:#0a285059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#72ddf9d9;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 11px;overflow:hidden;outline:none;user-select:none;-webkit-user-select:none;transition:top .45s cubic-bezier(.22,.9,.36,1),right .45s cubic-bezier(.22,.9,.36,1),background .3s ease,border-color .3s ease,box-shadow .3s ease,gap .3s ease}#share-btn .share-icon{flex-shrink:0;transition:opacity .2s ease,transform .25s ease}#share-btn .close-icon{position:absolute;flex-shrink:0;opacity:0;transform:rotate(-90deg) scale(.5);transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}.share-label{font-family:Aspekta-450,sans-serif;font-size:14px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;max-width:60px;opacity:1;overflow:hidden;margin-left:4px}#share-btn:hover{background:#0a285080;border-color:#72ddf980;box-shadow:0 0 16px #72ddf926}#share-btn.close-mode{top:max(calc(16px + env(safe-area-inset-top)),calc(50vh - 220px));right:max(16px,calc(50vw - 280px));border-color:#72ddf980;background:#0a28508c}#share-btn.close-mode .share-icon{opacity:0;transform:rotate(90deg) scale(.5)}#share-btn.close-mode .close-icon{opacity:1;transform:rotate(0) scale(1)}#share-btn.close-mode .share-label{max-width:0;opacity:0;margin-left:0}#share-btn.close-mode:hover{border-color:#72ddf9b3;box-shadow:0 0 20px #72ddf940}#share-btn:focus-visible{outline:2px solid rgba(114,221,249,.6);outline-offset:2px}#presave-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding-bottom:120px;opacity:0;pointer-events:none;transition:opacity .35s ease}#presave-overlay.active{opacity:1;pointer-events:auto}.overlay-content{display:flex;flex-direction:column;align-items:center;max-width:560px;width:90%;max-height:80vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.overlay-content::-webkit-scrollbar{display:none}.presave-prompt{font-family:Aspekta-450,sans-serif;font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#72ddf973;text-align:center;max-width:360px;line-height:1.6;margin:0 0 28px;opacity:0;transform:translateY(12px)}#presave-overlay.active .presave-prompt{animation:presavePromptIn .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:40ms}@keyframes presavePromptIn{0%{opacity:0;transform:translateY(12px);color:#72ddf940;text-shadow:none}to{opacity:1;transform:translateY(0);color:#c4f1fb;text-shadow:0 0 12px rgba(114,221,249,.7),0 -1px 1px rgba(0,0,0,.8)}}.platform-buttons{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;padding:0}.platform-pill{display:flex;align-items:center;justify-content:center;height:52px;padding:0 20px;border-radius:24px;background:#0a285073;border:1px solid rgba(114,221,249,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none;transition:all .25s ease;white-space:nowrap;-webkit-user-select:none;user-select:none;opacity:0;transform:translateY(16px)}#presave-overlay.active .platform-pill{animation:overlayPillIn .4s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i, 0) * 60ms + 80ms)}@keyframes overlayPillIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.platform-pill:hover{border-color:#72ddf980;background:#0a285099;box-shadow:0 0 16px #72ddf91f}.platform-pill:focus-visible{outline:2px solid rgba(114,221,249,.6);outline-offset:2px}.platform-logo{height:20px;width:auto;object-fit:contain;opacity:.85;transition:opacity .2s ease}.platform-pill:hover .platform-logo{opacity:1}.platform-pill[data-slug=spotify] .platform-logo{height:26px}.platform-pill[data-slug=applemusic] .platform-logo{height:22px}.platform-pill[data-slug=deezer] .platform-logo{height:26px}.platform-pill[data-slug=amazonmusic] .platform-logo{height:24px}.platform-pill[data-slug=tidal] .platform-logo{height:12px}.platform-pill[data-slug=soundcloud] .platform-logo{height:22px}.platform-pill[data-slug=audiomack] .platform-logo{height:14px}.swm-credit{position:fixed;bottom:calc(4px + env(safe-area-inset-bottom));left:16px;z-index:35;text-decoration:none;transition:opacity .2s ease;opacity:.4;display:flex;align-items:center}.swm-credit-prefix{font-family:Aspekta-450,sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-right:5px;white-space:nowrap}.swm-credit-logo{height:38px;width:auto;display:block;filter:brightness(0) invert(1) opacity(1)}.swm-credit:hover{opacity:.7}@media(prefers-reduced-motion:reduce){.tape-btn{transition-duration:0ms}.tape-btn.play:not(.pressed) .tape-led{animation:none}.tape-btn.presave:not(.pressed) .presave-frosted-glass{animation:none}.tier2-inner,#panel-backdrop{transition-duration:.12s}}@media(max-width:768px){.platform-buttons{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto;gap:8px}.platform-pill{height:44px}.controls-row{gap:10px}.broke-logo-icon{width:72px;height:72px}#broke-logo{gap:1px}.broke-logo-label{font-size:13px}}@media(max-width:480px){#bottom-assembly{width:100%;max-width:100%;bottom:28px;padding:0;left:0;right:0;transform:none}.controls-group{width:100%;flex-direction:row;align-items:flex-end;justify-content:center;padding:0 16px calc(20px + env(safe-area-inset-bottom)) 16px}.controls-row{width:100%;display:flex;justify-content:center;align-items:flex-end;gap:8px;flex-wrap:wrap}.platform-pill{height:38px;padding:0 16px}.platform-pill .platform-logo{height:16px}#share-btn.close-mode{top:calc(16px + env(safe-area-inset-top));right:16px}}