:root{--purple-100-hs: 278 100%;--purple-90-hs: 278 90%;--bgPurple: hsl(var(--purple-100-hs) 6% / 1);--bgDarkPurple: hsl(var(--purple-100-hs) 7% / 1);--lightPink: hsl(var(--purple-90-hs) 80% / 1);--black: hsl(var(--purple-100-hs) 6% / 1);--black-a15: rgb(0 0 0 / .15);--black-a25: rgb(0 0 0 / .25);--white-a05: rgb(255 255 255 / .05);--purple-6: hsl(var(--purple-100-hs) 6% / 1);--purple-7: hsl(var(--purple-100-hs) 7% / 1);--purple-8: hsl(var(--purple-100-hs) 8% / 1);--purple-9: hsl(var(--purple-100-hs) 9% / 1);--purple-10: hsl(var(--purple-100-hs) 10% / 1);--purple-11: hsl(var(--purple-100-hs) 11% / 1);--purple-12: hsl(var(--purple-100-hs) 12% / 1);--purple-13: hsl(var(--purple-100-hs) 13% / 1);--purple-14: hsl(var(--purple-100-hs) 14% / 1);--purple-15: hsl(var(--purple-100-hs) 15% / 1);--purple-16: hsl(var(--purple-100-hs) 16% / 1);--purple-26: hsl(var(--purple-100-hs) 26% / 1);--purple-20: hsl(var(--purple-100-hs) 20% / 1);--purple-50: hsl(var(--purple-90-hs) 50% / 1);--purple-60: hsl(var(--purple-90-hs) 60% / 1);--purple-70: hsl(var(--purple-100-hs) 70% / 1);--purple-72: hsl(var(--purple-100-hs) 72% / 1);--purple-80: hsl(var(--purple-90-hs) 75% / 1);--purple-92: hsl(var(--purple-100-hs) 92% / 1);--purple-4-a2: hsl(var(--purple-100-hs) 4% / .2);--purple-4-a3: hsl(var(--purple-100-hs) 4% / .3);--purple-4-a45: hsl(var(--purple-100-hs) 4% / .45);--purple-4-a6: hsl(var(--purple-100-hs) 4% / .6);--purple-4-a65: hsl(var(--purple-100-hs) 4% / .65);--purple-6-a15: hsl(var(--purple-100-hs) 6% / .15);--purple-6-a85: hsl(var(--purple-100-hs) 6% / .85);--purple-8-a45: hsl(var(--purple-100-hs) 8% / .45);--purple-8-a75: hsl(var(--purple-100-hs) 8% / .75);--purple-9-a85: hsl(var(--purple-100-hs) 9% / .85);--purple-10-a15: hsl(var(--purple-100-hs) 10% / .15);--purple-10-a5: hsl(var(--purple-100-hs) 10% / .5);--purple-10-a65: hsl(var(--purple-100-hs) 10% / .65);--purple-10-a85: hsl(var(--purple-100-hs) 10% / .85);--purple-10-a9: hsl(var(--purple-100-hs) 10% / .9);--purple-11-a9: hsl(var(--purple-100-hs) 11% / .9);--purple-12-a9: hsl(var(--purple-100-hs) 12% / .9);--purple-14-a9: hsl(var(--purple-100-hs) 14% / .9);--purple-16-a6: hsl(var(--purple-100-hs) 16% / .6);--purple-16-a75: hsl(var(--purple-100-hs) 16% / .75);--purple-18-a6: hsl(var(--purple-100-hs) 18% / .6);--purple-20-a1: hsl(var(--purple-100-hs) 20% / .1);--purple-20-a85: hsl(var(--purple-100-hs) 20% / .85);--purple-30-a2: hsl(var(--purple-100-hs) 30% / .2);--purple-30-a25: hsl(var(--purple-100-hs) 30% / .25);--purple-30-a3: hsl(var(--purple-100-hs) 30% / .3);--purple-30-a85: hsl(var(--purple-100-hs) 30% / .85);--purple-35-a5: hsl(var(--purple-100-hs) 35% / .5);--purple-50-a02: hsl(var(--purple-100-hs) 50% / .02);--purple-50-a1: hsl(var(--purple-100-hs) 50% / .1);--purple-50-a15: hsl(var(--purple-100-hs) 50% / .15);--purple-50-a2: hsl(var(--purple-100-hs) 50% / .2);--purple-50-a3: hsl(var(--purple-100-hs) 50% / .3);--purple-50-a4: hsl(var(--purple-100-hs) 50% / .4);--purple-50-a5: hsl(var(--purple-100-hs) 50% / .5);--purple-55-a5: hsl(var(--purple-100-hs) 55% / .5);--purple-60-a35: hsl(var(--purple-100-hs) 60% / .35);--purple-70-a15: hsl(var(--purple-100-hs) 70% / .15);--purple-70-a5: hsl(var(--purple-100-hs) 70% / .5);--purple-70-a8: hsl(var(--purple-100-hs) 70% / .8);--purple-75-a7: hsl(var(--purple-100-hs) 75% / .7);--purple-76-a725: hsl(var(--purple-100-hs) 76% / .725);--purple-80-a1: hsl(var(--purple-100-hs) 80% / .1);--purple-80-a25: hsl(var(--purple-100-hs) 80% / .25);--purple-80-a4: hsl(var(--purple-100-hs) 80% / .4);--purple-80-a85: hsl(var(--purple-100-hs) 80% / .85);--purple-80-a9: hsl(var(--purple-100-hs) 80% / .9);--keyboard-white-key-top: hsl(var(--purple-90-hs) 72% / .85);--keyboard-white-key-bottom: hsl(var(--purple-90-hs) 75% / .85);--keyboard-white-key-border: hsl(var(--purple-90-hs) 10% / .3);--controls-bg: hsl(var(--purple-100-hs) 11.5% / .85);--adsr-wrapper-bg-top: hsl(var(--purple-100-hs) 12% / .5);--adsr-wrapper-bg-bottom: hsl(var(--purple-100-hs) 12% / .5);--preset-bar-bg-top: hsl(var(--purple-100-hs) 12% / .82);--preset-bar-bg-bottom: hsl(var(--purple-100-hs) 11% / .85);--cyan-70: hsl(184 90% 70% / 1);--magenta-50: hsl(307 90% 50% / 1);--magenta-70: hsl(307 90% 70% / 1);--magenta-80: hsl(307 90% 80% / 1);--orange-50: hsl(28 90% 50% / 1);--orange-70: hsl(28 100% 70% / 1);--orange-70-a25: hsl(28 100% 70% / .25);--orange-72: hsl(28 100% 72% / 1);--orange-8: hsl(28 100% 8% / 1);--red-50-a15: hsl(0 100% 50% / .15);--red-50-a25: hsl(0 100% 50% / .25);--red-50-a75: hsl(0 100% 50% / .75);--red-60-a75: hsl(0 100% 60% / .75);--red-80-a75: hsl(0 100% 80% / .75);--red-s60-30-a25: hsl(0 60% 30% / .25);--red-s80-65: hsl(0 80% 65% / 1)}#midi-keyboard{position:relative;width:min(65vw,98rem);height:100%;-webkit-user-select:none;user-select:none;z-index:2;box-shadow:0 -8px 8px 0 var(--purple-50-a15);border-radius:6px}.white-keys{display:flex;height:100%}.white-keys,.black-keys{contain:layout style}.key{position:relative;border:none;outline:none;padding:0;contain:layout paint;cursor:pointer}.key.white{flex:1;position:relative;background:linear-gradient(to bottom,var(--keyboard-white-key-top),var(--keyboard-white-key-bottom));border-right:1px solid var(--keyboard-white-key-border);border-radius:0 0 4px 4px;box-shadow:0 2px 2px var(--purple-50-a1),0 2px var(--purple-80),0 2px 2px var(--purple-8-a75)}.key.white:first-child{border-radius:4px 0 4px 4px}.key.white:last-child{border-radius:0 4px 4px}.key.white.active{box-shadow:inset 0 2px 14px var(--black-a15)}.key.white.active span.label{transform:translate(-50%) translateY(-2px)}.key.white.active .active-indicator{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--purple-50-a4);border-radius:0 0 4px 4px;animation:active-indicator-fade .05s linear}@keyframes active-indicator-fade{0%{opacity:0}to{opacity:1}}.black-keys{position:absolute;top:0;left:0;right:0;height:60%;pointer-events:none}.key.black{position:absolute;height:100%;background:linear-gradient(to bottom,var(--purple-13),var(--purple-12));border-radius:0 0 4px 4px;box-shadow:0 3px 4px var(--black-a15),0 2px var(--purple-15);pointer-events:auto}.key.black.active{box-shadow:inset 0 2px 4px var(--black-a25)}.key.black.active span.label{transform:translate(-50%) translateY(-2px)}.key.black.active .active-indicator{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--purple-50-a4);border-radius:0 0 4px 4px;animation:active-indicator-fade 25ms linear}.key.white span.label,.key.black span.label{position:absolute;bottom:8px;left:50%;transform:translate(-50%) translateY(0);font-size:1.2rem;font-size:10px;color:var(--purple-20);font-family:Arial,sans-serif;opacity:0}.key.black span.label{color:var(--purple-80)}.show-labels .key.white span.label,.show-labels .key.black span.label{opacity:1}button{border:none;border-radius:4px;padding:.8rem 1.6rem;background:transparent;color:var(--lightPink);font-family:var(--pixel-font);font-size:1.5rem;display:flex;align-items:center;justify-content:center;white-space:nowrap}button:disabled{opacity:.5;transition:opacity .2s ease-in-out}.select-wrapper{position:relative;display:inline-block;fill:var(--purple-80)}.select-wrapper select{min-width:5.2rem}.select-wrapper:after{content:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 3 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L0 -1.31134e-07L1.5 2L3 0Z' fill='hsla(278, 100%, 80%, 1)'/%3E%3C/svg%3E%0A");position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1.2rem}select{appearance:none;background:var(--purple-16-a6);color:var(--purple-80);border:1px solid var(--purple-50-a1);border-radius:30px;padding:.4rem 1rem;font-size:1.4rem;cursor:pointer;outline:none;font-family:inherit}option{background:var(--purple-12);font-size:1.4rem}option:checked{background:var(--purple-20)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;border-radius:50px;background:var(--purple-16-a6)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;background:var(--purple-50);border-radius:50%;cursor:none}input[type=range]::-webkit-slider-runnable-track{height:1.5rem;border:none;border-radius:50px}input[type=range]::-webkit-slider-thumb:hover{background:var(--purple-60)}label,span{font-size:1.4rem;color:var(--purple-80);white-space:nowrap}span{font-variant-numeric:tabular-nums}input[type=checkbox]{appearance:none;background:var(--purple-50);border:1px solid var(--purple-50-a1);border-radius:30px;padding:4px;font-size:1.4rem;cursor:pointer;outline:none;width:1.6rem;height:1.6rem;font-family:inherit;transition:opacity .15s ease-in-out;opacity:.35}input[type=checkbox]:checked{opacity:1}input{width:100%;padding:.8rem 1rem;height:3.8rem;border-radius:4px;border:1px solid var(--purple-50-a2);background:#30004d80;color:var(--purple-80);font-size:1.4rem}#octave-value{min-width:1ch}#bpm-value{min-width:3ch}.metronome-beats{display:flex;justify-content:center;gap:.45rem;margin-inline:1.4rem}.metronome-beat{width:min(.95rem,.75vw);height:min(.95rem,.75vw);background:var(--purple-50);border-radius:50%;margin:0 2px;contain:layout style;opacity:.25}.metronome-beat.active{opacity:1}#adsr-wrapper{background:linear-gradient(to bottom,var(--adsr-wrapper-bg-top),var(--adsr-wrapper-bg-bottom));border:1px solid var(--purple-50-a1);padding:.8rem;gap:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 0 0 .25rem var(--purple-10),0 .1rem 0 .45rem #8100cc1a;margin-top:-3px}#adsr-editor{position:relative}#adsr-editor svg{background:#1b002b;border:1px solid var(--purple-50-a1);width:min(25rem,20vw);height:auto;border-radius:4px;display:block;box-shadow:inset 0 0 16px 8px var(--purple-10-a15)}.adsr-handle{cursor:grab}.adsr-handle:active{cursor:none}path.adsr-path-playback{transform:translateZ(0);animation:playbackDash 1s linear infinite}path.adsr-path-slowdown{animation:playbackDash .4s ease-out forwards}#adsr-editor-lfo-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:.8rem}@keyframes playbackDash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-20}}#bottom-controls{display:flex;align-items:center;gap:1rem;position:absolute;bottom:clamp(5.5rem,5dvh + .5rem,7.5rem);left:50%;width:25rem;height:6rem;transform:translate(-50%) scale(1);z-index:201;background:#340052bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--purple-50-a1);border-bottom:2px solid var(--purple-30-a2);border-radius:50px;padding:1rem 1.2rem 1rem 1.8rem;box-shadow:inset 0 0 12px 12px var(--purple-6-a15);opacity:1;animation:moveUp 1s cubic-bezier(.4,0,.2,1) forwards;isolation:isolate}@media(min-width:1600px){#bottom-controls{bottom:75px}}@keyframes moveUp{0%{transform:translate(-50%) scale(.95)}}#randomize-cycles-per-loop svg{transition:transform .2s cubic-bezier(.5,1.2,1,.85)}#randomize-cycles-per-loop svg:hover{transform:rotate(45deg)}#randomize-cycles-per-loop svg:active{transform:rotate(-270deg)}#toggle-mixer,#randomize-cycles-per-loop{padding:0}#toggle-mixer svg #mixer-circle-1,#toggle-mixer svg #mixer-circle-2,#toggle-mixer svg #mixer-circle-3,#toggle-mixer svg #mixer-circle-4{transition:transform .2s cubic-bezier(.5,1.2,1,.85)}#toggle-mixer svg:hover #mixer-circle-1{transform:translateY(4px)}#toggle-mixer svg:hover #mixer-circle-2{transform:translateY(-4px)}#toggle-mixer svg:hover #mixer-circle-3{transform:translateY(3px)}#toggle-mixer svg:hover #mixer-circle-4{transform:translateY(-2px)}#mixer-ui{position:absolute;top:50%;left:50%;transform:scale(.9) translateY(-50%) translate(-50%);display:flex;background:var(--purple-10-a9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;border:1px solid var(--purple-50-a1);border-radius:8px;box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 .6rem var(--purple-10),0 1px 0 .6rem var(--purple-20);opacity:0;transform-origin:left center;animation:fadeIn .3s cubic-bezier(.4,0,.2,1) forwards,zoomIn .3s ease-out forwards}#mixer-ui>:first-child{position:sticky;left:0;z-index:1}#mixer-tracks{display:flex;gap:8px;height:41rem;padding:1.6rem}#mixer-footer{padding:8px;display:flex}.mixer-effect-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mixer-effect-toggle-button{background:var(--orange-50);color:var(--purple-8);border:none;border-radius:50%;padding:.6rem .2rem;font-size:1.2rem;cursor:pointer;width:1.2rem;height:1.2rem}.mixer-effect-toggle-button.is-bypassed{background:var(--orange-70-a25)}.mixer-effect-knob-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px}#mixer-effects-rack{background:var(--purple-10-a9);border:1px solid var(--purple-50-a1);border-radius:6px;padding:8px;display:flex;gap:8px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--purple-8-a45);z-index:200;pointer-events:none;animation:fadeIn .3s ease-out forwards}.track-ui{--top-opacity: 0;--bottom-opacity: .65;position:relative;display:flex;align-items:center;justify-content:space-between;width:3.2rem;height:100%;background:linear-gradient(to bottom,hsla(278,90%,13%,var(--top-opacity)),hsla(278,90%,20%,var(--bottom-opacity)));writing-mode:vertical-rl;padding:.4rem .4rem 1.6rem;gap:1.2rem;border-radius:4rem}.track-ui:first-child{background:linear-gradient(to bottom,hsla(18,90%,10%,var(--top-opacity)),hsla(18,90%,25%,var(--bottom-opacity)))}.track-ui:first-child>.track-name{color:var(--orange-72)}.track-ui:nth-child(2){background:linear-gradient(to bottom,hsla(278,90%,10%,var(--top-opacity)),hsla(278,90%,25%,var(--bottom-opacity)))}.track-ui:nth-child(2)>.track-name{color:var(--purple-80)}.track-ui:nth-last-child(-n+6){background:linear-gradient(to bottom,hsla(307,90%,10%,var(--top-opacity)),hsla(307,90%,25%,var(--bottom-opacity)))}.track-ui:nth-last-child(-n+6)>.track-name{color:var(--magenta-80)}.track-ui:nth-last-child(-n+1){background:linear-gradient(to bottom,hsla(184,90%,10%,var(--top-opacity)),hsla(184,90%,25%,var(--bottom-opacity)))}.track-ui:nth-last-child(-n+1)>.track-name{color:var(--cyan-70)}.track-ui.is-selected{outline:1px solid hsla(278,80%,70%,.5)}.track-input-volume-container{position:relative;width:100%;height:100%}.track-ui-input{background:transparent;border:none;outline:none;appearance:none;direction:rtl;height:100%;padding:.4rem}input[type=range].track-ui-input{background:transparent;position:relative;z-index:1;-moz-appearance:none}input[type=range].track-ui-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2rem;height:2rem;background:linear-gradient(to bottom,var(--purple-55-a5) 0 40%,var(--purple-50-a5) 40% 48%,var(--purple-10-a5) 48% 52%,var(--purple-50-a5) 52% 60%,var(--purple-35-a5) 60% 100%);border:1px solid var(--purple-70-a15);border-radius:2px;position:relative;filter:drop-shadow(0px 2px 2px var(--purple-30-a25));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}input[type=range].track-ui-input::-webkit-slider-runnable-track{height:1.5rem;border:none;border-radius:50px}input[type=range].track-ui-input::-webkit-slider-thumb:hover{filter:drop-shadow(0px 2px 2px var(--purple-60-a35))}input[type=range].track-ui-input::-moz-range-thumb{width:2rem;height:2rem;background:linear-gradient(to bottom,var(--purple-55-a5) 0 40%,var(--purple-50-a5) 40% 48%,var(--purple-10-a5) 48% 52%,var(--purple-50-a5) 52% 60%,var(--purple-35-a5) 60% 100%);border:1px solid var(--purple-70-a15);border-radius:2px;filter:drop-shadow(0px 2px 2px var(--purple-30-a25));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}input[type=range].track-ui-input::-moz-range-track{height:1.5rem;border:none;border-radius:50px;background:transparent}input[type=range].track-ui-input::-moz-range-progress{background:transparent}input[type=range].track-ui-input:hover::-moz-range-thumb{filter:drop-shadow(0px 2px 2px var(--purple-60-a35))}input[type=range].track-ui-input.is-dragging::-webkit-slider-thumb,input[type=range].track-ui-input.is-dragging::-moz-range-thumb{cursor:none!important}.track-input-volume-analyzer{position:absolute;bottom:.6rem;left:50%;transform:translate(-50%);width:10px;height:23.8rem;border-radius:2.4rem;background:var(--purple-80-a25);pointer-events:none}.track-name{font-size:1.2rem;color:var(--purple-72);transform:rotate(180deg);line-height:1;height:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .6rem;border:none}.mute-button,.solo-button{background:#33180073;color:#ffad6659;border:none;border-radius:4px;padding:.6rem .2rem;font-size:1.2rem;cursor:pointer;outline:none;transform:rotate(-90deg);height:2.2rem}:is(.mute-button,.solo-button).is-active{background:var(--orange-50);color:var(--orange-8)}:is(.mute-button,.solo-button).is-disabled{cursor:initial}.solo-button{background:#33000073;color:#ff666659}.solo-button.is-active{background:var(--red-50-a75);color:#290000bf}.track-solo-mute-container{display:flex;gap:1px;margin-top:1rem}@keyframes zoomIn{to{transform:scale(1) translateY(-50%) translate(-50%)}}.mixer-effect-panel{position:relative;background:var(--purple-14-a9);width:10rem;padding:.8rem;border-radius:4px;font-family:Arial,sans-serif;display:flex;flex-direction:column}.mixer-effect-panel.is-dragging{background:var(--purple-10-a5);border:1px solid var(--purple-50-a1)}.mixer-effect-panel.is-dragging>*{opacity:0}.mixer-effect-slot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--purple-10-a5);border:1px solid var(--purple-50-a1)}.mixer-effect-container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;height:100%}.mixer-effect-container label,.mixer-effect-container span{font-size:1.1rem;color:var(--purple-80)}.mixer-effect-slot-empty-button{cursor:pointer;border:1px solid var(--purple-30-a25);border-radius:50%;height:3.6rem;width:3.6rem;display:grid;place-items:center;transition:background-color .05s ease-in}.mixer-effect-slot-empty-button:hover{background:var(--purple-16)}.mixer-effect-picker-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;gap:4px;background:var(--purple-10-a9);border:1px solid var(--purple-50-a2);border-radius:4px;padding:.6rem;box-shadow:0 4px 16px var(--purple-4-a6);animation:fxPickerFadeIn .1s ease-out forwards}.mixer-effect-picker-option{background:transparent;border:none;color:var(--purple-80);font-size:1.2rem;padding:.6rem 1.2rem;border-radius:2px;cursor:pointer;white-space:nowrap;text-align:left;transition:background .05 ease-in}.mixer-effect-picker-option:hover{background:var(--purple-30-a3)}.mixer-effect-context-menu{position:absolute;z-index:1000;display:flex;flex-direction:column;gap:2px;background:var(--purple-12-a9);border:1px solid var(--purple-50-a2);border-radius:4px;padding:.4rem;box-shadow:0 4px 16px var(--purple-4-a2);animation:fxPickerFadeIn .1s ease-out forwards}.mixer-effect-context-menu-option{background:transparent;border:none;color:var(--red-s80-65);font-size:1.2rem;padding:.5rem 1.4rem;border-radius:2px;cursor:pointer;white-space:nowrap;text-align:left;transition:background .05 ease-in}.mixer-effect-context-menu-option:hover{background:var(--red-s60-30-a25)}@keyframes fxPickerFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}#cloud-canvas-wrapper{position:absolute;bottom:126%;margin-bottom:-1cqi;left:2%;width:clamp(188px,18vw,25rem);aspect-ratio:25/15;isolation:isolate;box-shadow:inset 0 0 1.2rem 1.2rem var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -.1rem 0 .7rem var(--purple-10),0 0 0 .7rem var(--purple-20);border-radius:4px;cursor:zoom-in;transform:translateY(14%);animation:fadeUp 1s cubic-bezier(.4,0,.2,1) forwards;z-index:-1}#cloud-canvas-wrapper.zoomed-in{cursor:zoom-out}#cloud-canvas-wrapper:before{content:"";position:absolute;top:calc(100% + 4px);left:7%;width:1.6rem;height:2rem;background:radial-gradient(ellipse at center,var(--purple-11) 0%,var(--purple-8) 100%);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}#cloud-canvas-wrapper:after{content:"";position:absolute;top:calc(100% + 4px);right:7%;width:1.6rem;height:2rem;background:radial-gradient(ellipse at center,var(--purple-11) 0%,var(--purple-8) 100%);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}@keyframes fadeUp{to{transform:translateY(0)}}#cloud-canvas{display:block;width:100%;max-width:100%;height:100%;background:#170024;border-radius:4px}.knob-container{position:relative;width:min(2.4rem,2vw);height:min(2.4rem,2vw);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px var(--purple-20-a85);touch-action:none;user-select:none;-webkit-user-select:none}.knob-container:focus-visible{outline:1px solid hsla(278,100%,70%,1);outline-offset:2px}.knob-container.disabled{opacity:.5;pointer-events:none}.knob{position:absolute;width:100%;height:100%;aspect-ratio:1;background:linear-gradient(-135deg,var(--purple-16) 30%,var(--purple-26) 100%);box-shadow:inset 0 0 15px 5px var(--purple-10-a65);border-radius:50%;transition:transform .1s}.knob-line{position:absolute;top:10%;left:50%;width:var(--knob-line-size, 3px);aspect-ratio:1 / 1;border-radius:999px;background:var(--purple-70);transform:translate(-50%)}.knob-depth{position:absolute}.tooltip.knob-tooltip{position:absolute;left:50%;bottom:calc(100% + .7rem);transform:translate(-50%,.2rem);opacity:0;pointer-events:none;white-space:nowrap;z-index:10;font-size:min(1.1rem,.9vw);line-height:1;padding:.45rem .65rem;border-radius:4px;color:#da99fff2;background:#27003df2;box-shadow:0 6px 14px #0b070d40;transition:opacity .15s ease,transform .15s ease;transition-delay:0s;font-variant-numeric:tabular-nums}.tooltip.knob-tooltip.knob-tooltip-top{left:50%;bottom:calc(100% + .7rem);top:auto;transform:translate(-50%,.2rem)}.tooltip.knob-tooltip.knob-tooltip-bottom{left:50%;top:calc(100% + .7rem);bottom:auto;transform:translate(-50%,-.2rem)}.tooltip.knob-tooltip.knob-tooltip-left{left:auto;right:calc(100% + .7rem);top:50%;bottom:auto;transform:translate(.2rem,-50%)}.tooltip.knob-tooltip.knob-tooltip-right{left:calc(100% + .7rem);top:50%;bottom:auto;transform:translate(-.2rem,-50%)}.knob-container:hover .tooltip.knob-tooltip,.knob-container:focus-within .tooltip.knob-tooltip,.knob-container.is-rotating .tooltip.knob-tooltip{opacity:1;transform:translate(-50%);transition-delay:.15s}.knob-container:hover .tooltip.knob-tooltip.knob-tooltip-bottom,.knob-container:focus-within .tooltip.knob-tooltip.knob-tooltip-bottom,.knob-container.is-rotating .tooltip.knob-tooltip.knob-tooltip-bottom{transform:translate(-50%)}.knob-container:hover .tooltip.knob-tooltip.knob-tooltip-left,.knob-container:focus-within .tooltip.knob-tooltip.knob-tooltip-left,.knob-container.is-rotating .tooltip.knob-tooltip.knob-tooltip-left{transform:translateY(-50%)}.knob-container:hover .tooltip.knob-tooltip.knob-tooltip-right,.knob-container:focus-within .tooltip.knob-tooltip.knob-tooltip-right,.knob-container.is-rotating .tooltip.knob-tooltip.knob-tooltip-right{transform:translateY(-50%)}.global-lfo-rate-container{display:flex;align-items:center;gap:12px;transition:opacity .3s cubic-bezier(.4,0,.2,1)}#global-lfo-rate-value{min-width:4ch}#glide-time-container{display:flex;gap:12px;font-variant-numeric:tabular-nums}#glide-time-container span{min-width:6ch}#scale-container{display:flex;align-items:center;gap:8px}select#scale{min-width:80px}#arp-mode{min-width:75px}#navbar-container{position:absolute;display:flex;gap:3rem;align-items:center;justify-content:space-between;width:100%;color:var(--purple-92);margin:2rem 0;left:50%;transform:translate(-50%)}@media(max-width:1400px){#navbar-container{gap:2rem}}.navbar-center{display:flex;gap:.8rem 2.6rem;align-items:center;justify-content:center;flex-wrap:wrap}#controls{position:relative;display:flex;height:min(20rem,17vw);width:min-content;padding:1.2rem;background:var(--controls-bg);border:1px solid var(--purple-50-a1);border-radius:8px;box-shadow:inset 0 0 1.2rem 1.2rem var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -.75px 0 .6rem var(--purple-10),0 1px 0 .6rem var(--purple-20);gap:1.6rem}#controls-wrapper{position:absolute;bottom:126%;margin-bottom:-1cqi;right:2%;width:clamp(188px,18vw,25rem);aspect-ratio:25/15;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;transform:translateY(14%);animation:fadeUp 1s .05s cubic-bezier(.4,0,.2,1) forwards;z-index:-1}#controls-panel-container{width:100%;height:100%;box-shadow:inset 0 0 1.2rem 1.2rem var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -.1rem 0 .7rem var(--purple-10),0 0 0 .7rem var(--purple-20);border-radius:4px;isolation:isolate;display:grid;place-items:center;color:var(--purple-80);font-size:1.4rem}#controls-panel-container:before{content:"";position:absolute;top:calc(100% + 4px);left:7%;width:1.6rem;height:2rem;background:radial-gradient(ellipse at center,var(--purple-11) 0%,var(--purple-8) 100%);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}#controls-panel-container:after{content:"";position:absolute;top:calc(100% + 4px);right:7%;width:1.6rem;height:2rem;background:radial-gradient(ellipse at center,var(--purple-11) 0%,var(--purple-8) 100%);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}.sound-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;font-optical-sizing:auto;font-weight:400;font-style:normal;font-family:var(--pixel-font);height:100%;width:100%}.sound-panel:has(.knob-container.is-rotating){cursor:none}#wave-type{font-size:1.1rem;min-width:10rem}#periodic-wave-canvas{width:100%;height:100%;background:#1d002e;border-radius:8px;aspect-ratio:25 / 15}.wave-type-container-wrapper{position:absolute;width:100%;bottom:0;left:0}.wave-type-container{display:flex;align-items:center;justify-content:space-between;padding:.4rem;width:100%}.sound-name{margin-bottom:8px}#sound-data-visualizer{width:100%;height:100%;position:absolute;inset:0;z-index:-1;background:#1d002e;aspect-ratio:25 / 15;border-radius:8px}.loaded-sound-bottom-row{display:flex;justify-content:space-between;width:100%;position:absolute;bottom:.4rem;right:.4rem;padding-left:4px}.upload-buttons-container,.upload-gen-button-group{display:flex;gap:4px}.clear-sound-button,.upload-button{background:var(--purple-18-a6);color:var(--purple-80);border:1px solid var(--purple-50-a1);border-radius:30px;padding:.3rem .8rem;font-size:1.1rem;cursor:pointer;outline:none;flex-shrink:0;font-family:var(--pixel-font)}.clear-sound-button{margin:0;line-height:1}.clear-sound-button span{font-size:1.55rem;margin-top:-2.6px}.harmonics-lfo-rate-knob-container{position:absolute;top:.6rem;right:.6rem;display:flex;align-items:center;font-size:1.1rem;color:var(--purple-80);width:96%;justify-content:space-between}.harmonics-lfo-rate-knob-container-inner{display:flex;align-items:center;gap:8px}.harmonics-lfo-rate-knob-container-inner label{font-size:1.1rem;width:4.5rem;text-align:right}#glide-time-container{display:flex;align-items:center;gap:8px;transition:opacity .3s cubic-bezier(.4,0,.2,1);margin-left:2px}#glide-time-container label{font-size:1.1rem}.sound-duration{position:absolute;bottom:4px;left:4px;font-size:1.1rem}.sound-metadata{display:flex;align-items:center;justify-content:space-between;gap:8px;position:absolute;top:4px;width:100%;padding:0 4px;font-size:1.1rem;pointer-events:none}.sound-metadata>*{white-space:nowrap;pointer-events:auto}#lfo-rate-value{min-width:6ch}.three-d-waveform-container{display:flex;align-items:center;gap:4px}.three-d-waveform-container label{font-size:1.1rem;color:var(--magenta-80)}.three-d-waveform-button{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--magenta-50);border:none;cursor:pointer;flex-shrink:0;padding:0;opacity:.35}.three-d-waveform-button.active{opacity:1}#canvas-visualizer{position:absolute;top:calc(100% - 5px);width:min(15rem,12vw);height:90px;left:50%;transform:translate(-50%) translateY(-100%);cursor:zoom-in}#canvas-visualizer.zoomed-in{cursor:zoom-out}#drum-machine-canvas{width:100%;height:auto;aspect-ratio:16 / 4;display:block}.drum-machine-canvas-wrapper{width:min(50rem,40vw);position:absolute;bottom:2rem;left:50%;transform:translate(-50%) translateY(150%);visibility:hidden;transition:transform .7s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s}.drum-machine-canvas-wrapper.is-active{visibility:visible;transform:translate(-50%) translateY(0);pointer-events:auto;transition:transform .6s cubic-bezier(.4,0,.2,1),visibility 0s linear .175s}.drum-machine-canvas-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--purple-50-a3);border-radius:4px;background:var(--purple-8);box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -.5px 0 6px var(--purple-10),0 1px 0 6px var(--purple-20)}.drum-machine-canvas-container:before{content:"";position:absolute;top:calc(100% + 6px);left:7%;width:1.6rem;height:3.1rem;background:var(--purple-10);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}.drum-machine-canvas-container:after{content:"";position:absolute;top:calc(100% + 6px);right:7%;width:1.6rem;height:3.1rem;background:var(--purple-10);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}.drum-machine-sounds-wrapper{width:100%;display:grid;grid-template-columns:repeat(4,1fr);padding:.6rem;gap:.6rem;background:var(--purple-8)}.drum-machine-sounds-wrapper>:first-of-type{border-top:3px solid hsla(307,80%,40%,.85);color:#b814a5d9;background:#b814a506}.drum-machine-sounds-wrapper>:nth-child(2){border-top:3px solid hsla(278,80%,50%,.85);color:#9b19e6d9;background:#9b19e606}.drum-machine-sounds-wrapper>:nth-child(3){border-top:3px solid hsla(24,80%,50%,.85);color:#e66b19d9;background:#e66b1906}.drum-machine-sounds-wrapper>:nth-child(4){border-top:3px solid hsla(184,80%,40%,.85);color:#0ab6c2d9;background:#14adb806}#drum-machine-canvas{cursor:pointer}.drum-machine-sounds-item{padding:.4rem;display:flex;flex-direction:column;min-width:0;min-height:0}.drum-machine-sounds-item-waveform{height:4.25rem;border-radius:2px;cursor:pointer}.drum-machine-sounds-item-title{font-size:1.1rem;font-weight:400;margin-bottom:.2rem}.drum-machine-top-panel{position:absolute;bottom:104%;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;padding:.6rem;gap:.6rem;width:30%;height:27px;background-color:#1d002ed9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 5px var(--purple-10),0 1px 0 5px var(--purple-20);border-radius:6px 6px 0 0;z-index:-1}.drum-machine-top-panel-container{display:flex;justify-content:center;align-items:center;width:100%}.drum-machine-top-panel-container select{font-size:1.1rem;border-radius:0;background:none;border:none;text-align:center;color:var(--purple-80-a85)}.drum-machine-top-panel-container span{font-size:1.2rem}.drum-machine-top-panel-container button{font-size:1.1rem;padding:.3rem .8rem;border-radius:50px;background:#27003d80;border:1px solid hsla(278,100%,14%,.85);color:var(--purple-80-a85);cursor:pointer}#note-sequence-canvas{width:100%;height:auto;aspect-ratio:600 / 225;display:block}.note-sequence-canvas-container{display:flex;align-items:center;justify-content:center;cursor:pointer}#bass-sequence-canvas{width:calc(100% - 100px);aspect-ratio:500 / 225;display:block}.bass-sequence-canvas-container{display:flex;align-items:stretch;justify-content:space-between;width:100%}.bass-sequence-knob-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;flex-shrink:0;gap:.9rem;background:#240038bf;border-left:2px solid hsla(278,100%,15%)}.bass-sequence-knob-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}.bass-sequence-knob-container span{font-size:1.2rem;color:var(--purple-80-a9)}.sequencer-panel{width:min(60rem,45vw);position:absolute;bottom:20px;left:50%;display:flex;flex-direction:column;align-items:center;border:1px solid var(--purple-50-a3);border-radius:4px;background:var(--purple-8);box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -.75px 0 6px var(--purple-10),0 0 0 6px var(--purple-20);transform:translate(-50%) translateY(120%) scale(1);visibility:hidden;transition:transform .6s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;pointer-events:none}.sequencer-panel.is-active{transform:translate(-50%) translateY(0) scale(1);visibility:visible;transition:transform .6s cubic-bezier(.4,0,.2,1),visibility 0s linear .175s;pointer-events:auto}.sequencer-panel:before{content:"";position:absolute;top:calc(100% + 6px);left:7%;width:16px;height:31px;background:var(--purple-10);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}.sequencer-panel:after{content:"";position:absolute;top:calc(100% + 6px);right:7%;width:16px;height:31px;background:var(--purple-10);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}.sequencer-tabs{display:flex;width:100%;border-bottom:1px solid var(--purple-50-a2)}.sequencer-tab{flex:1;padding:1rem 1.6rem;border:none;border-bottom:2px solid transparent;background:#30004d33;color:var(--purple-70-a5);font-family:var(--pixel-font);font-size:1.3rem;cursor:pointer;border-radius:0!important;transition:color .15s cubic-bezier(.075,.82,.165,1),background .15s cubic-bezier(.075,.82,.165,1)}.sequencer-tab:hover{color:var(--purple-70-a8);background:var(--purple-50-a02)}.sequencer-tab.active{color:var(--purple-80);background:var(--purple-50-a1);border-bottom:2px solid hsla(305,100%,50%,.35)}#save-preset-modal-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(var(--purple-100-hs) 4% / 0);display:flex;align-items:center;justify-content:center;animation:fadeInSavePresetModalOverlayBg .5s cubic-bezier(.175,.885,.32,1) forwards}#save-preset-modal-title{font-size:3.2rem;margin-bottom:1.4rem}#save-preset-modal-label{font-size:1.4rem;color:var(--purple-70)}#save-preset-modal-description{font-size:1.6rem;margin-bottom:1.6rem}#save-preset-modal-form{display:flex;flex-direction:column;gap:4px}#save-preset-modal-buttons{display:flex;justify-content:space-between;margin-top:2.4rem}#save-preset-modal-button-group{display:flex;gap:16px}#save-preset-button{cursor:pointer;background-color:#002905;color:#99ffa7;border:1px solid hsla(128,100%,50%,.1);box-shadow:inset 0 0 10px 10px #001f0426,0 0 0 1px #00520b,0 -1px 0 2px #003307,0 2px 0 2px #00660e}#close-save-preset-button{cursor:pointer;background-color:#1a0029;color:#da99ff;border:1px solid hsla(278,100%,50%,.1);box-shadow:inset 0 0 10px 10px #13001f26,0 0 0 1px #340052,0 -1px 0 2px #200033,0 2px 0 2px #410066}@keyframes fadeInSavePresetModalOverlayBg{to{background-color:var(--purple-4-a3)}}#save-preset-modal-content{animation:fadeInModal .75s cubic-bezier(.175,.885,.32,1) forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;background-color:#200033f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2.4rem;border-radius:6px;width:min(400px,90vw);min-width:400px;color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 4px var(--purple-10),0 2px 0 4px var(--purple-20)}.settings-modal-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(var(--purple-100-hs) 4% / 0);display:flex;align-items:center;justify-content:center;animation:fadeInSettingsModalOverlayBg .5s cubic-bezier(.175,.885,.32,1) forwards}#settings-modal-content{animation:fadeInModal .75s cubic-bezier(.175,.885,.32,1) forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;background-color:hsl(var(--purple-100-hs) 10% / .95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2.4rem;border-radius:6px;color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 4px var(--purple-10),0 2px 0 4px var(--purple-20);min-width:320px}.settings-modal-title{font-size:3.2rem;margin-bottom:2rem}.settings-modal-sections{display:flex;flex-direction:column;gap:2rem}.settings-modal-section{display:flex;flex-direction:column;gap:1rem}.settings-modal-section-title{font-size:1.3rem;font-weight:500;color:var(--purple-70);margin-bottom:0rem}.settings-modal-field{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}.settings-modal-label{font-size:1.4rem;color:var(--purple-80-a9)}.settings-modal-slider-row{display:flex;align-items:center;gap:1rem}.settings-modal-slider{accent-color:var(--purple-70);width:120px;cursor:pointer}.settings-modal-slider-value{font-size:1.4rem;color:var(--purple-70-a5);min-width:36px;text-align:right}.settings-modal-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}.settings-modal-checkbox{position:absolute;opacity:0;width:0;height:0}.settings-modal-toggle-track{width:36px;height:20px;background:#30004d80;border-radius:10px;border:1px solid var(--purple-50-a2);transition:background .2s}.settings-modal-checkbox:checked+.settings-modal-toggle-track{background:#61009999;border-color:var(--purple-50-a3)}.settings-modal-shortcuts{display:flex;flex-direction:column;gap:.8rem}.settings-modal-shortcut{display:flex;align-items:center;gap:.8rem}.settings-modal-kbd{font-size:1.3rem;padding:2px 4px;background:#30004d66;border:1px solid var(--purple-50-a2);border-radius:4px;color:var(--purple-80-a9);min-width:20px;text-align:center;font-weight:600}.settings-modal-kbd-addition{font-size:1.4rem;padding:2px 4px;background:#30004d66;border:1px solid var(--purple-50-a2);border-radius:4px;color:var(--purple-80-a9);min-width:20px;text-align:center;margin-left:-4px}.settings-modal-shortcut-desc{font-size:1.4rem;color:var(--purple-80)}.setting-modal-no-midi{font-size:1.4rem}.settings-modal-buttons{display:flex;justify-content:flex-end;margin-top:2.4rem}.settings-modal-close-button{cursor:pointer;background-color:var(--purple-8);color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 2px var(--purple-10),0 2px 0 2px var(--purple-20)}@keyframes fadeInSettingsModalOverlayBg{to{background-color:var(--purple-4-a3)}}#presets-bar{position:absolute;top:-23px;left:50%;transform:translate(-50%);width:70%;display:flex;justify-content:center;align-items:center;border-radius:12px 12px 0 0;background:linear-gradient(var(--preset-bar-bg-top),var(--preset-bar-bg-bottom));border:1px solid var(--purple-50-a1);border-bottom:none;height:22px}#presets-bar select{font-size:1.1rem;border-radius:0;background:none;border:none;text-align:center;color:var(--purple-80-a85)}#presets-bar span{font-size:1.2rem}#volume-bar{position:absolute;bottom:-23px;left:50%;transform:translate(-50%);width:70%;display:flex;justify-content:center;align-items:center;border-radius:0 0 12px 12px;background:linear-gradient(to top,var(--preset-bar-bg-bottom),var(--preset-bar-bg-top));border:1px solid var(--purple-50-a1);border-top:none;height:22px;overflow:hidden;padding:6px;z-index:-1}.master-volume-analyzer{width:95%;height:7px;border-radius:12px;pointer-events:none;background:#1d002ed9}#bpm-input{width:3rem;padding:0;font-size:1.4rem;background:transparent;border:none;color:var(--purple-80);font-family:var(--pixel-font);-moz-appearance:textfield}#bpm-input::-webkit-outer-spin-button,#bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#formant-controls-wrapper{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.8rem;position:absolute;top:-2.55rem;left:50%;border-radius:4px 4px 0 0;transform:translate(-50%,3rem);background:#200033d9;box-shadow:inset 0 0 1rem 1rem var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 .6rem var(--purple-11),0 1px 0 .6rem var(--purple-20);animation:fadeUpControls .5s cubic-bezier(.4,0,.2,1) forwards}#formant-controls-wrapper.is-exiting{pointer-events:none;animation:fadeOutControls .35s cubic-bezier(.4,0,.2,1) forwards}@keyframes fadeUpControls{0%{transform:translate(-50%,3rem);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}@keyframes fadeOutControls{0%{transform:translate(-50%,-50%);opacity:1}to{transform:translate(-50%,3rem);opacity:0}}#formant-controls-container{display:contents}#loaded-sample-sidepanel-container{position:absolute;right:-4.1rem;top:50%;transform:translateY(-50%);display:block;z-index:-1}#loaded-sample-leftpanel-container{position:absolute;left:-4.1rem;top:50%;transform:translateY(-50%);display:block;z-index:-1}#loaded-sample-sidepanel-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:.8rem .7rem .8rem .8rem;border-radius:0 6px 6px 0;background:#200033d9;box-shadow:inset 0 0 1rem 1rem var(--purple-6-a15),0 0 0 1px var(--purple-16),1px 0 0 .5rem var(--purple-11),1px 0 0 .5rem var(--purple-20);animation:fadeInSidePanel .35s cubic-bezier(.4,0,.2,1) forwards}#loaded-sample-leftpanel-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:.8rem;border-radius:6px 0 0 6px;background:#200033d9;box-shadow:inset 0 0 1rem 1rem var(--purple-6-a15),0 0 0 1px var(--purple-16),-1px 0 0 .5rem var(--purple-11),-1px 0 0 .5rem var(--purple-20);animation:fadeInSidePanelLeft .35s cubic-bezier(.4,0,.2,1) forwards}#loaded-sample-sidepanel-wrapper.is-exiting{pointer-events:none;animation:fadeOutSidePanel .35s cubic-bezier(.4,0,.2,1) forwards}#loaded-sample-leftpanel-wrapper.is-exiting{pointer-events:none;animation:fadeOutSidePanelLeft .35s cubic-bezier(.4,0,.2,1) forwards}@keyframes fadeInSidePanel{0%{transform:translate(-5rem);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeInSidePanelLeft{0%{transform:translate(5rem);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOutSidePanel{0%{transform:translate(0)}to{transform:translate(-5rem)}}@keyframes fadeOutSidePanelLeft{0%{transform:translate(0)}to{transform:translate(5rem)}}.follow-note-indicator{width:min(1.2rem,.8vw);height:min(1.2rem,.8vw);padding:0;border-radius:999px;border:none;background:#ff770040;cursor:pointer;transition:all .125s ease-in-out}.follow-note-indicator.is-active{background:#f70}.sfx-prompt-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:fadeInSfxPromptModalOverlayBg .5s cubic-bezier(.175,.885,.32,1) forwards;background-color:hsl(var(--purple-100-hs) 4% / 0);z-index:100;pointer-events:none}.sfx-prompt-modal-content{animation:fadeInModal .75s cubic-bezier(.175,.885,.32,1) forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;width:min(400px,90vw);min-width:400px;background-color:#200033f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2.4rem;border-radius:6px;color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 4px var(--purple-10),0 2px 0 4px var(--purple-20);pointer-events:auto}.sfx-prompt-modal-title{font-size:3rem;margin-bottom:1.4rem}.sfx-prompt-modal-label{font-size:1.4rem;margin-bottom:.4rem;color:var(--purple-70);font-weight:500}.sfx-prompt-modal-sections{display:flex;flex-direction:column;gap:2.4rem}.sfx-prompt-modal-section{display:flex;flex-direction:column}.sfx-prompt-modal-input{width:100%;padding:.8rem 1rem;height:4.2rem;border-radius:4px;border:1px solid var(--purple-50-a2);background:#30004d80;color:var(--purple-80);font-size:1.4rem}.sfx-prompt-modal-input::placeholder{color:var(--purple-70-a5)}.sfx-prompt-modal-error{margin:2px 0 0;min-height:1.6rem;font-size:1.2rem;color:#ff9ea4}.sfx-prompt-modal-error:empty{display:none}.sfx-prompt-modal-buttons{display:flex;justify-content:space-between;margin-top:2.4rem}.sfx-prompt-modal-actions{gap:.8rem}.sfx-prompt-modal-action-group{display:flex;gap:1.6rem}.sfx-prompt-modal-button{cursor:pointer;background-color:var(--purple-8);color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 2px var(--purple-10),0 2px 0 2px var(--purple-20)}.sfx-prompt-modal-button-generate{background-color:#002905;color:#99ffa7;border:1px solid hsla(128,100%,50%,.1);box-shadow:inset 0 0 10px 10px #001f0426,0 0 0 1px #00520b,0 -1px 0 2px #003307,0 2px 0 2px #00660e}.sfx-prompt-modal-button-use{background-color:#b35300;color:#ffc999;border:1px solid hsla(28,100%,50%,.1);box-shadow:inset 0 0 10px 10px #1f0e0026,0 0 0 1px #522600,0 -1px 0 4px #331800,0 2px 0 4px #663000}.sfx-prompt-modal-button.is-hidden{display:none}.sfx-prompt-modal-player{margin-top:.8rem}.sfx-prompt-modal-player.is-hidden{display:none}@keyframes fadeInSfxPromptModalOverlayBg{to{background-color:var(--purple-4-a2)}}@property --fade-top-start{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --fade-top-end{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@keyframes scroll-fade-top{0%{--fade-top-start: 0%;--fade-top-end: 0%}1%,to{--fade-top-start: 0%;--fade-top-end: 6%}}.sfx-prompt-modal-saved-sounds-section{margin-top:1.6rem;position:relative}.sfx-prompt-modal-saved-sounds-list-mask{--fade-bottom-start: 94%;--fade-bottom-end: 99%;max-height:200px}.sfx-prompt-modal-saved-sounds-list{display:flex;flex-direction:column;gap:.6rem;height:100%;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:hsla(278,100%,80%,.5) transparent;padding-bottom:1rem;scroll-timeline:--sounds-scroll block;background:#200033d9;padding:.6rem 1rem .6rem .6rem;border-radius:4px}.sfx-prompt-modal-saved-sound{display:flex;align-items:center;gap:.8rem;padding:.8rem;color:var(--purple-80);border:1px solid var(--purple-50-a1);background:#1a0029bf;border-radius:4px}.sfx-prompt-modal-saved-sound-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Arial,sans-serif;font-size:1.3rem}.sfx-prompt-modal-saved-sound-play{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2.4rem;aspect-ratio:1;overflow:visible;background-color:var(--purple-16);border-radius:50%;cursor:pointer;padding:0;transition:border .15s ease-in;border:1px solid transparent}.sfx-prompt-modal-saved-sound-play:hover{border:1px solid var(--purple-50-a2)}.sfx-prompt-modal-saved-sound-play svg{display:block;width:.8rem;height:.8rem}.sfx-prompt-modal-saved-sound-date{flex-shrink:0;font-size:1.1rem;font-family:Arial,sans-serif;color:var(--purple-80, #a080c0);opacity:.8}.sfx-prompt-modal-saved-sound-use{flex-shrink:0;padding:.3rem .8rem;font-size:1.2rem;background-color:#b35300;color:#ffc999;border:1px solid hsla(28,100%,50%,.1);border-radius:3px;cursor:pointer;transition:background-color .15s ease-in}.sfx-prompt-modal-saved-sound-use:hover{background-color:#cc5f00}.sfx-prompt-modal-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem}.sfx-prompt-modal-tags button{background-color:var(--purple-8);color:var(--purple-80);padding:.4rem 1rem;font-size:1.1rem;font-weight:400;border:1px solid var(--purple-50-a2);border-radius:999px;cursor:pointer;transition:background-color .15s ease-in,border .15s ease-in}.sfx-prompt-modal-tags button:hover{background-color:var(--purple-10);border:1px solid var(--purple-50-a3)}.midi-modal-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(var(--purple-100-hs) 4% / 0);display:flex;align-items:center;justify-content:center;animation:fadeInMidiModalOverlayBg .5s cubic-bezier(.175,.885,.32,1) forwards}.midi-modal-content{animation:fadeInModal .75s cubic-bezier(.175,.885,.32,1) forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;background-color:#200033f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2.4rem;border-radius:6px;color:var(--purple-80);border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 4px var(--purple-10),0 2px 0 4px var(--purple-20)}.midi-modal-title{font-size:3.2rem;margin-bottom:10px}.midi-modal-description{font-size:1.6rem;margin-bottom:24px}.midi-modal-buttons{display:flex;justify-content:space-between;margin-top:30px}.midi-modal-button-group{display:flex;gap:16px;margin-right:24px}.midi-modal-export-audio-button{cursor:pointer;background-color:#002905;color:#99ffa7;border:1px solid hsla(128,100%,50%,.1);box-shadow:inset 0 0 10px 10px #001f0426,0 0 0 1px #00520b,0 -1px 0 2px #003307,0 2px 0 2px #00660e}.midi-modal-export-midi-button{cursor:pointer;background-color:#b35300;color:#ffc999;border:1px solid hsla(28,100%,50%,.1);box-shadow:inset 0 0 10px 10px #1f0e0026,0 0 0 1px #522600,0 -1px 0 4px #331800,0 2px 0 4px #663000}.midi-modal-cancel-button{cursor:pointer;background-color:#1a0029;color:#da99ff;border:1px solid hsla(278,100%,50%,.1);box-shadow:inset 0 0 10px 10px #13001f26,0 0 0 1px #340052,0 -1px 0 2px #200033,0 2px 0 2px #410066}@keyframes fadeInMidiModalOverlayBg{to{background-color:var(--purple-4-a3)}}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}*:focus-visible{outline:none}:root{--pixel-font: "Pixelify Sans", sans-serif}html{font-size:clamp(55%,.65vw,62.5%);font-family:var(--pixel-font);height:100%;overflow:hidden}body{background:hsl(var(--purple-100-hs) 7.5% / 1);font-optical-sizing:auto;font-weight:400;font-style:normal;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}#canvas{width:min(50vw,725px);aspect-ratio:725/331;z-index:-1;position:relative;margin-bottom:6px;animation:fadeUpArc 1s cubic-bezier(.4,0,.2,1) forwards;transform:translateY(3%);display:block;background:transparent}@keyframes fadeUp{to{transform:translateY(10px)}}@keyframes fadeUpArc{to{transform:translateY(0)}}canvas,button{touch-action:manipulation}#app-container{display:flex;flex-direction:column;align-items:center;perspective:1000px;perspective-origin:center center;height:100dvh;max-width:min(90vw,140rem);margin:0 auto}@media(max-width:1400px){#app-container{max-width:92vw}}#stage{display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;min-height:0;transform-origin:center center;isolation:isolate;transform-style:preserve-3d;margin-top:-60px}@keyframes fadeInStage{to{transform:translateY(0)}}.bg{position:absolute;background-size:cover;inset:0;opacity:.124;z-index:-2;width:100%;height:100%}.zoomed-in-overlay{position:absolute;inset:0;transition:opacity .3s ease-out;opacity:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,var(--purple-4-a45) 100%)}.zoomed-in-overlay.show{opacity:1;pointer-events:none}@keyframes fadeInOverlay{to{opacity:1}}.wrapper{margin:auto;display:flex;flex-direction:column;align-items:center}.header-container{display:flex;align-items:center;gap:1.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#export-midi:disabled{cursor:not-allowed}#start-recording{background:var(--red-50-a15);border:2px solid var(--red-50-a15);filter:drop-shadow(0 0 8px var(--red-50-a15))}#start-recording circle{fill:var(--red-50-a25)}#start-recording.active{background:var(--red-60-a75);border:2px solid var(--red-60-a75);filter:drop-shadow(0 0 8px var(--red-50-a15))}#start-recording.active circle{fill:var(--red-80-a75)}#tracks-info{position:absolute;top:-30rem;right:-300px;background:var(--purple-9-a85);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:6px;border:1px solid var(--purple-80-a1);padding:.4rem;display:grid;gap:.4rem;font-family:Arial,sans-serif;opacity:0;transform:translateZ(0);transition:transform .6s .15s cubic-bezier(.175,.885,.32,1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 0 0 3px var(--purple-10),0 1px 0 3px var(--purple-20);pointer-events:none;z-index:200}#tracks-info.show{opacity:1;pointer-events:auto}#tracks-info-list{display:grid;grid-template-columns:2.4rem auto auto;text-align:center;gap:0 1.2rem}#tracks-info-list>div{background:var(--purple-11-a9);padding:.4rem 1.2rem;border-bottom:1px solid var(--purple-80-a1)}#tracks-info-list>:nth-child(2n){background:var(--purple-13)}#tracks-info-list select{font-size:.8rem;position:relative;padding-right:1.6rem}.tracks-info-row-select{position:relative}.tracks-info-row-select:after{content:url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 3 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L0 -1.31134e-07L1.5 2L3 0Z' fill='hsla(278, 100%, 80%, 1)'/%3E%3C/svg%3E%0A");position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.8rem}.tracks-info-row{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;background:var(--white-a05);text-align:center;align-items:center}.tracks-info-row h6{font-size:.85rem;font-weight:700;margin:0}.tracks-info-label{display:flex;align-items:center;position:relative}.tracks-info-label label{position:absolute;right:-2px;top:50%;transform:translateY(-50%);cursor:pointer}.tracks-info-reset-buttons{display:flex;gap:1.1rem;justify-content:flex-end;padding-right:1rem}#footer-container{position:absolute;bottom:0;left:50%;transform:translate(-50%);height:7.5rem;width:100%;display:flex;align-items:center;justify-content:space-between;text-align:center;z-index:-1}.footer-gradient-text{font-size:1.4rem;background:linear-gradient(to left,var(--purple-75-a7) 0%,var(--purple-76-a725) 50%,var(--purple-75-a7) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}@keyframes fadeInModal{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.randomize-octave-label{display:flex;align-items:center;gap:.8rem;cursor:pointer;color:var(--purple-80)}@media(max-width:800px){#mobile-warning-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--purple-4-a65);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000}}@media(max-width:800px){#mobile-warning-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--purple-10);color:var(--purple-80);padding:2.4rem;border-radius:6px;border:1px solid var(--purple-50-a1);box-shadow:inset 0 0 10px 10px var(--purple-6-a15),0 0 0 1px var(--purple-16),0 -1px 0 4px var(--purple-10),0 2px 0 4px var(--purple-20);width:min(90vw,400px);text-align:center}#mobile-warning-content h1{font-size:3rem;margin-bottom:1.6rem;color:var(--purple-70);line-height:1.1}#mobile-warning-content span{font-size:1.4rem;margin-bottom:1.6rem;color:var(--purple-80);white-space:wrap}}.osc2-enabled-container,.white-noise-enabled-container{display:flex;align-items:center;gap:4px}:is(.osc2-enabled-container,.white-noise-enabled-container) label{font-size:1.1rem;color:var(--orange-70)}.osc2-enabled-button,.repeat-active-button,.white-noise-enabled-button{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--orange-50);border:none;cursor:pointer;flex-shrink:0;padding:0;opacity:.35}:is(.osc2-enabled-button,.repeat-active-button,.white-noise-enabled-button).active{opacity:1}#rounds-per-measure{width:5.9rem}