:root{--black: hsla(284, 100%, 6%, 1);--black-a15: rgba(0, 0, 0, .15);--black-a25: rgba(0, 0, 0, .25);--white-a05: rgba(255, 255, 255, .05);--pink: hsla(284, 100%, 50%, 1);--lightPink: hsla(284, 100%, 80%, 1);--lightPurple: hsla(284, 100%, 80%, 1);--darkPurple: rgb(22, 10, 26);--mediumPurple: hsla(284, 100%, 16%, 1);--purple: hsla(284, 100%, 50%, 1);--bgPurple: hsla(284, 100%, 7%, 1);--bgDarkPurple: hsla(284, 100%, 7%, 1);--purple-10: hsla(284, 100%, 10%);--purple-10-a15: hsla(284, 100%, 10%, .15);--purple-10-a2: hsla(284, 100%, 10%, .2);--purple-10-a5: hsla(284, 100%, 10%, .5);--purple-10-a65: hsla(284, 100%, 10%, .65);--purple-10-a9: hsla(284, 100%, 10%, .9);--purple-11: hsla(284, 100%, 11%, 1);--purple-11-a9: hsla(284, 100%, 11%, .9);--purple-12: hsla(284, 100%, 12%, 1);--purple-12-a9: hsla(284, 100%, 12%, .9);--purple-13: hsla(284, 100%, 13%, 1);--purple-13-a85: hsla(284, 100%, 13%, .85);--purple-14-a85: hsla(284, 100%, 14%, .85);--purple-14-a9: hsla(284, 100%, 14%, .9);--purple-15: hsla(284, 100%, 15%, 1);--purple-16: hsla(284, 100%, 16%, 1);--purple-16-a6: hsla(284, 100%, 16%, .6);--purple-16-a75: hsla(284, 100%, 16%, .75);--purple-17-a9: hsla(284, 100%, 17%, .9);--purple-18-a6: hsla(284, 100%, 18%, .6);--purple-20: hsla(284, 100%, 20%, 1);--purple-20-a1: hsla(284, 100%, 20%, .1);--purple-20-a125: hsla(284, 100%, 20%, .125);--purple-20-a85: hsla(284, 100%, 20%, .85);--purple-30-a2: hsla(284, 100%, 30%, .2);--purple-30-a25: hsla(284, 100%, 30%, .25);--purple-30-a3: hsla(284, 100%, 30%, .3);--purple-35-a5: hsla(284, 100%, 35%, .5);--purple-4-a2: hsla(284, 100%, 4%, .2);--purple-4-a45: hsla(284, 100%, 4%, .45);--purple-4-a6: hsla(284, 100%, 4%, .6);--purple-4-a65: hsla(284, 100%, 4%, .65);--purple-4-a8: hsla(284, 100%, 4%, .8);--purple-50: hsla(284, 100%, 50%);--purple-50-a02: hsla(284, 100%, 50%, .02);--purple-50-a1: hsla(284, 100%, 50%, .1);--purple-50-a15: hsla(284, 100%, 50%, .15);--purple-50-a2: hsla(284, 100%, 50%, .2);--purple-50-a3: hsla(284, 100%, 50%, .3);--purple-50-a4: hsla(284, 100%, 50%, .4);--purple-50-a5: hsla(284, 100%, 50%, .5);--purple-55-a5: hsla(284, 100%, 55%, .5);--purple-6-a15: hsla(284, 100%, 6%, .15);--purple-60: hsla(284, 100%, 60%, 1);--purple-60-a35: hsla(284, 100%, 60%, .35);--purple-7: hsla(284, 100%, 7%, 1);--purple-70: hsla(284, 100%, 70%, 1);--purple-70-a15: hsla(284, 100%, 70%, .15);--purple-70-a5: hsla(284, 100%, 70%, .5);--purple-70-a8: hsla(284, 100%, 70%, .8);--purple-72: hsla(284, 100%, 72%, 1);--purple-75-a7: hsla(284, 100%, 75%, .7);--purple-76-a725: hsla(284, 100%, 76%, .725);--purple-8: hsla(284, 100%, 8%, 1);--purple-8-a45: hsla(284, 100%, 8%, .45);--purple-8-a75: hsla(284, 100%, 8%, .75);--purple-80: hsla(284, 100%, 80%, 1);--purple-80-a1: hsla(284, 100%, 80%, .1);--purple-80-a25: hsla(284, 100%, 80%, .25);--purple-80-a4: hsla(284, 100%, 80%, .4);--purple-80-a85: hsla(284, 100%, 80%, .85);--purple-80-a9: hsla(284, 100%, 80%, .9);--purple-86-a85: hsla(284, 100%, 86%, .85);--purple-9: hsla(284, 100%, 9%, 1);--purple-92: hsla(284, 100%, 92%, 1);--keyboard-white-key-top: hsla(284, 100%, 79%, .85);--keyboard-white-key-bottom: hsla(284, 100%, 82%, .85);--keyboard-white-key-border: hsla(284, 100%, 10%, .2);--adsr-wrapper-bg-bottom: hsla(284, 100%, 15%, .9);--adsr-wrapper-bg-top: hsla(284, 100%, 16%, .9);--preset-bar-bg-bottom: hsla(284, 100%, 10%, .85);--preset-bar-bg-top: hsla(284, 100%, 12%, .85);--controls-bg: hsla(284, 100%, 13%, .9);--cyan-70: hsla(184, 100%, 70%, 1);--indigo-s20-80-a3: hsla(255, 20%, 80%, .3);--magenta-30-a7: hsla(307, 100%, 30%, .7);--magenta-50: hsla(307, 100%, 50%, 1);--magenta-70: hsla(307, 100%, 70%, 1);--magenta-80: hsla(307, 100%, 80%, 1);--orange-30: hsla(28, 100%, 30%, 1);--orange-50: hsla(28, 100%, 50%, 1);--orange-50-a1: hsla(28, 100%, 50%, .1);--orange-50-a15: hsla(28, 100%, 50%, .15);--orange-70: hsla(28, 100%, 70%, 1);--orange-70-a25: hsla(28, 100%, 70%, .25);--orange-72: hsla(28, 100%, 72%, 1);--orange-8: hsla(28, 100%, 8%, 1);--orange-8-a75: hsla(28, 100%, 8%, .75);--red-50-a15: hsla(0, 100%, 50%, .15);--red-50-a25: hsla(0, 100%, 50%, .25);--red-50-a75: hsla(0, 100%, 50%, .75);--red-60-a25: hsla(0, 100%, 60%, .25);--red-60-a75: hsla(0, 100%, 60%, .75);--red-80-a75: hsla(0, 100%, 80%, .75);--red-s60-30-a25: hsla(0, 60%, 30%, .25);--red-s80-65: hsla(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-11));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:focus-visible{outline:1px solid hsla(284,100%,70%,1);outline-offset:2px}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(284, 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.5rem;cursor:pointer;outline:none;font-family:inherit}select:focus-visible{outline:1px solid hsla(284,100%,70%,1);outline-offset:2px}option{background:var(--purple-12);font-size:1.4rem}option:checked{background:var(--purple-20)}option:focus-visible{outline:1px solid hsla(284,100%,70%,1);outline-offset:2px}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.5rem;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:focus-visible{outline:1px solid hsla(284,100%,70%,1);outline-offset:2px}#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:1.2rem 1rem;gap:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:6px;box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 2px var(--purple-11),0 2px 0 3px var(--purple-20);margin-top:-4px}#adsr-editor{position:relative}#adsr-editor svg{background:#250033;border:1px solid var(--purple-50-a1);width:min(25rem,20vw);height:auto;border-radius:6px;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:var(--purple-16-a75);-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);z-index:1000;border:1px solid var(--purple-50-a1);border-radius:6px;box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 8px var(--purple-10),0 2px 0 10px 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:8px;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: .25;--bottom-opacity: .5;position:relative;display:flex;align-items:center;justify-content:space-between;width:3.2rem;height:100%;background:linear-gradient(to bottom,hsla(284,100%,13%,var(--top-opacity)),hsla(284,100%,20%,var(--bottom-opacity)));writing-mode:vertical-rl;padding:.4rem .4rem 1.6rem;gap:1.2rem;border-radius:4rem;box-shadow:0 2px var(--orange-50-a15)}.track-ui:first-child{background:linear-gradient(to bottom,hsla(18,100%,10%,var(--top-opacity)),hsla(18,100%,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(284,100%,10%,var(--top-opacity)),hsla(284,100%,25%,var(--bottom-opacity)))}.track-ui:nth-child(2)>.track-name{color:var(--purple-80)}.track-ui:nth-child(n+11){background:linear-gradient(to bottom,hsla(307,100%,10%,var(--top-opacity)),hsla(307,100%,25%,var(--bottom-opacity)))}.track-ui:nth-child(n+11)>.track-name{color:var(--magenta-80)}.track-ui:nth-child(n+16){background:linear-gradient(to bottom,hsla(184,100%,10%,var(--top-opacity)),hsla(184,100%,25%,var(--bottom-opacity)))}.track-ui:nth-child(n+16)>.track-name{color:var(--cyan-70)}.track-ui.is-selected{outline:1px solid hsla(284,100%,70%,1)}.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);border:1px solid var(--orange-50-a1);width:10rem;padding:.8rem;border-radius:4px;font-family:Arial,sans-serif;display:flex;flex-direction:column}.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;top:calc(-100% + clamp(.35rem,1.2vw,.8rem));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 -1px 0 .8rem var(--purple-11),0 1px 0 .9rem var(--purple-20);border-radius:6px;cursor:zoom-in;transform:translateY(20%);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% + 6px);left:7%;width:1.6rem;height:3.1rem;background:radial-gradient(ellipse at center,var(--purple-10) 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% + 6px);right:7%;width:1.6rem;height:3.1rem;background:radial-gradient(ellipse at center,var(--purple-10) 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{width:100%;max-width:100%;height:100%;display:block;background:linear-gradient(to top,var(--bgPurple) 0%,var(--bgDarkPurple) 100%);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(284,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 .15s}.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:#e499fff2;background:#2d003df2;border:1px solid var(--purple-30-a85);box-shadow:0 6px 14px #0c070d40;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 3rem;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:6px;box-shadow:inset 0 0 1.2rem 1.2rem var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 .4rem var(--purple-11),0 2px 0 .6rem var(--purple-20);gap:1.6rem}#canvas-visualizer{position:absolute;top:calc(100% - 2px);left:50%;transform:translate(-50%) translateY(-100%);cursor:zoom-in}#canvas-visualizer.zoomed-in{cursor:zoom-out}#controls-wrapper{position:absolute;top:calc(-100% + .8rem);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(20%);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 -1px 0 .8rem var(--purple-11),0 1px 0 .9rem var(--purple-20);border-radius:6px;isolation:isolate;background:linear-gradient(to top,var(--bgPurple) 0%,var(--bgDarkPurple) 100%);display:grid;place-items:center;color:var(--purple-80);font-size:1.4rem}#controls-panel-container:before{content:"";position:absolute;top:calc(100% + 6px);left:7%;width:1.6rem;height:3.1rem;background:radial-gradient(ellipse at center,var(--purple-10) 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% + 6px);right:7%;width:1.6rem;height:3.1rem;background:radial-gradient(ellipse at center,var(--purple-10) 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.2rem;min-width:10rem}#periodic-wave-canvas{width:100%;height:100%;background:var(--purple-9);border-radius:4px;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:var(--purple-9);aspect-ratio:25 / 15}.loaded-sound-bottom-row{display:flex;justify-content:space-between;width:100%;position:absolute;bottom:.4rem;right:.4rem;padding-left:4px}.upload-buttons-container{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.2rem;cursor:pointer;outline:none;flex-shrink:0;font-family:var(--pixel-font)}.harmonics-lfo-rate-knob-container{position:absolute;top:.6rem;right:.6rem;display:flex;align-items:center;font-size:1.2rem;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.2rem;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.2rem}.sound-duration{position:absolute;bottom:4px;left:4px;font-size:1.2rem}.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.2rem;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.2rem;color:var(--magenta-80)}.three-d-waveform-button{width:1.2rem;height:1.2rem;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}#drum-machine-canvas{width:100%;height:auto;aspect-ratio:16 / 4;display:block}.drum-machine-canvas-container{width:min(50rem,40vw);position:absolute;bottom:2rem;left:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--purple-50-a3);border-radius:6px;background:var(--purple-8);box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 8px var(--purple-10),0 2px 0 8px var(--purple-20);transform:translate(-50%) translateY(150%);transition:transform .5s cubic-bezier(.4,0,.2,1);cursor:pointer}.drum-machine-canvas-container.is-active{transform:translate(-50%) translateY(0);pointer-events:auto}.drum-machine-canvas-container:before{content:"";position:absolute;top:calc(100% + 6px);left:7%;width:1.6rem;height:3.1rem;background:var(--purple-9);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-9);box-shadow:inset 0 0 2px 2px var(--purple-20-a1);z-index:-1}#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:#38004d4d;border-left:2px solid hsla(284,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:6px;background:var(--purple-8);box-shadow:inset 0 0 12px 12px var(--purple-6-a15),0 0 0 2px var(--purple-16),0 -1px 0 8px var(--purple-10),0 2px 0 8px 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-9);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-9);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:#38004d33;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(--magenta-70);background:var(--purple-50-a1);border-bottom:2px solid var(--magenta-30-a7)}#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:var(--purple-10);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)}#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:#22002ed9}#bpm-input{width:3rem;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:#250033;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 .7rem var(--purple-20);animation:fadeUpControls .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes fadeUpControls{to{transform:translate(-50%,-50%)}}#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:#250033;box-shadow:inset 0 0 1rem 1rem var(--purple-6-a15),0 0 0 2px var(--purple-16),1px 0 0 .6rem var(--purple-11),1px 0 0 .7rem 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 .8rem .8rem .7rem;border-radius:6px 0 0 6px;background:#250033;box-shadow:inset 0 0 1rem 1rem var(--purple-6-a15),0 0 0 2px var(--purple-16),-1px 0 0 .6rem var(--purple-11),-1px 0 0 .7rem 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}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}*:focus-visible{outline:2px solid hsla(284,100%,70%,1)}: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:linear-gradient(to bottom,var(--bgPurple),hsla(284,100%,7%,1));font-optical-sizing:auto;font-weight:400;font-style:normal;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}.bg-overlay{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 40%,hsla(284,100%,6%,.6) 100%);z-index:-1;pointer-events:none}#canvas{width:min(50vw,725px);aspect-ratio:725/331;z-index:-1;position:relative;margin-bottom:5px;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-10);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 -1px 0 4px var(--purple-10),0 2px 0 4px 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(284, 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)}}#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:var(--purple-10);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)}.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.2rem;color:var(--orange-70)}.osc2-enabled-button,.repeat-active-button,.white-noise-enabled-button{width:1.2rem;height:1.2rem;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}