html,body{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden}#notAvailable{visibility:0;opacity:0;position:absolute;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;font-size:20px;background-color:#b6a8b5;color:#555;text-align:center}#notAvailable p{width:80%;border-radius:5%;padding:10px;box-shadow:1px 1px 1px 1px #555;background-color:#ddd}.interactive{cursor:pointer}.iconBtn{background:none;border:none;padding:0;cursor:pointer;color:inherit;font-size:inherit;width:auto}#mainDiv{position:absolute;height:100vh;width:100vw;display:grid;grid-template-columns:4vmax auto;grid-template-rows:4vmax auto;background-color:#ddd;padding:0;margin:0}#logo{height:100%;width:100%;padding:0;margin:0;background:#999;z-index:3}#sidebar{position:relative;height:100%;width:100%;background-color:#ddd;padding:0;margin:0;z-index:2;filter:drop-shadow(0 0 10px #555)}#header{height:100%;width:100%;padding:0;margin:0;background-color:#555;filter:drop-shadow(0 0 20px #555);z-index:2;display:flex;align-items:center}#header .presetBar{display:flex;align-items:center;gap:5px;padding:0 10px;height:100%;margin-left:auto}#header .presetBar__name{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;color:#ddd;font-size:11px;padding:2px 4px;width:110px;transition:border-color .2s}#header .presetBar__name::placeholder{color:#ffffff4d}#header .presetBar__name:focus{background:transparent;color:#ddd;outline:none;border-bottom-color:#ffffff8c}#header .presetBar__btn{height:auto;padding:4px 10px;font-size:10px;background:#ffffff14;color:#ffffffb3;border:1px solid rgba(255,255,255,.1);border-radius:10px;width:auto;white-space:nowrap;display:inline-flex;flex-direction:column;align-items:center;gap:1px;text-transform:none;transition:background .15s,color .15s,border-color .15s}#header .presetBar__btn:hover{background:#ffffff26;color:#ddd;border-color:#fff3}#header .presetBar__btn:active{background:#ffffff1a}#header .presetBar__btn--clear{background:transparent;border-color:#c8323259;color:#dc6464cc}#header .presetBar__btn--clear:hover{background:#c8323226;color:#f08282;border-color:#c8323299}#header .presetBar__btnLabel{display:flex;align-items:center;gap:5px}#header .presetBar__btnLabel i{font-size:8px;opacity:.5}#header .presetBar__shortcut{font-size:9px;opacity:.5;letter-spacing:.05em;line-height:1}#header .presetBar__count{background:#ffffff2e;border-radius:8px;padding:0 5px;font-size:9px;line-height:1.6}#header .presetBar__dropdown{position:relative}#header .presetBar__dropdownPanel{position:absolute;top:calc(100% + 4px);left:0;background:#414141;border:1px solid rgba(255,255,255,.08);border-radius:6px;box-shadow:0 6px 24px #00000073;min-width:180px;z-index:500;overflow:hidden}#header .presetBar__dropdownItem{display:flex;align-items:center;gap:2px;padding-left:12px;transition:background .1s}#header .presetBar__dropdownItem:hover{background:#ffffff0f}#header .presetBar__dropdownItem span{flex:1;color:#ffffffd9;font-size:11px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 6px 8px 0}#header .presetBar__dropdownItem span:hover{color:#ddd}#header .presetBar__dropdownDelete{background:none;border:none;color:#fff3;font-size:11px;padding:6px 10px;cursor:pointer;border-radius:0;width:auto;flex-shrink:0;text-transform:none;transition:color .15s,background .15s}#header .presetBar__dropdownDelete:hover{color:#dc5050e6;background:#c832321f}#header .presetBar__dropdownDelete:active{background:transparent}#header .presetBar__dropdownEmpty{padding:10px 14px;color:#ffffff4d;font-size:11px;font-style:italic}#header .presetBar__clearConfirm{font-size:10px;color:#dc6464e6;white-space:nowrap}#header .presetBar__btn--add{padding:4px 9px}#header .presetBar__btn--add i{font-size:13px;opacity:1}#addModuleWrapper{position:relative;height:100%;display:flex;align-items:center;padding:0 10px}#addModuleWrapper .modulePalette{position:absolute;top:100%;left:0;z-index:500;background:#414141;border:1px solid rgba(255,255,255,.08);border-radius:6px;box-shadow:0 8px 32px #00000080;width:200px;overflow:hidden}#addModuleWrapper .modulePalette__search{width:100%;box-sizing:border-box;padding:8px 10px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.08);color:#ddd;font-size:12px;text-align:left}#addModuleWrapper .modulePalette__search::placeholder{color:#ffffff4d}#addModuleWrapper .modulePalette__search:focus{outline:none;background:transparent;color:#ddd}#addModuleWrapper .modulePalette__list{list-style:none;margin:0;padding:4px 0;max-height:280px;overflow-y:auto}#addModuleWrapper .modulePalette__item{padding:7px 12px;font-size:12px;color:#fffc;cursor:pointer;text-align:left}#addModuleWrapper .modulePalette__item:hover,#addModuleWrapper .modulePalette__item--active{background:#ffffff14;color:#ddd}#addModuleWrapper .modulePalette__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}#addModuleWrapper .modulePalette__empty{padding:10px 12px;font-size:11px;color:#ffffff4d;font-style:italic}#playSpace{z-index:1;position:relative;background-color:#b6a8b5;background-image:url(/modular/media/bedge-grunge.png);width:100%}#playSpace #patchExit{position:absolute;right:3%;top:3%;font-size:6vh;color:#ddd}#playSpace #patchExit:hover{color:#600}#playSpace .alertBox{position:absolute;top:24px;left:50%;transform:translate(-50%) translateY(-120%);opacity:0;z-index:200;display:flex;align-items:stretch;min-width:320px;max-width:480px;background:#484848;border-radius:8px;overflow:hidden;box-shadow:0 8px 32px #00000059,0 2px 8px #0003;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}#playSpace .alertBox--visible{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto}#playSpace .alertBox__icon{display:flex;align-items:center;justify-content:center;padding:0 14px;background:#600;color:#ddd;font-size:18px}#playSpace .alertBox__body{flex:1;padding:10px 16px}#playSpace .alertBox__title{margin:0 0 2px;font-size:13px;font-weight:700;color:#ddd;letter-spacing:.5px;text-transform:uppercase}#playSpace .alertBox__message{margin:0;font-size:14px;color:#c4c4c4;line-height:1.4}#playSpace .alertBox__close{display:flex;align-items:center;padding:0 12px;color:#aaa;font-size:14px;transition:color .2s}#playSpace .alertBox__close:hover{color:#600}#playSpace .alertBox__timer{position:absolute;bottom:0;left:0;height:3px;background:#600;animation:alertTimer 4s linear forwards}@keyframes alertTimer{0%{width:100%}to{width:0%}}#playSpace .dragDiv{position:absolute;width:12.5vw;height:10.5vh}#playSpace .moduleDiv{position:absolute;top:2vh;left:2vh;background-color:#ddd;filter:drop-shadow(0 0 10px #555);text-align:center;min-width:150px;border-radius:2px;padding-bottom:5%;transform-origin:center center;transition:transform .25s cubic-bezier(.4,0,1,1),opacity .25s cubic-bezier(.4,0,1,1),filter .25s cubic-bezier(.4,0,1,1)}#playSpace .moduleDiv--closing{transform:scale(.85);opacity:0;filter:drop-shadow(0 0 0px transparent);pointer-events:none}#playSpace .moduleDiv:hover .cordOuter.show{visibility:visible;opacity:1}#playSpace .moduleDiv:hover .cordOuter.hide{visibility:none;opacity:0}#playSpace .moduleDiv:hover #firstParam{opacity:1}#playSpace .moduleDiv .iconBtn{position:absolute;top:0;left:0}#playSpace .moduleDiv .fa-times{color:#ddd;visibility:hidden;opacity:0;position:absolute;width:12px;height:12px;top:-8px;left:-4px;transition:filter .2s,visibility .2s,opacity .2s,color .2s,transform .2s;cursor:pointer}#playSpace .moduleDiv .fa-times:hover{filter:drop-shadow(0 0 3px rgba(0,0,0,.4));color:#600;transform:scale(1.3)}#playSpace .moduleDiv p{border-radius:2px 2px 0 0;width:100%;height:30%;background-color:#555;color:#ddd;margin:0 0 5%;padding-top:4%;padding-bottom:4%;cursor:move;transition:background-color .3s,color .3s}#playSpace .moduleDiv p:hover,#playSpace .moduleDiv p:focus-within{background-color:#6f6f6f;color:#f7f7f7}#playSpace .moduleDiv p:hover .fa-times,#playSpace .moduleDiv p:focus-within:not(:focus) .fa-times{visibility:visible;opacity:1}#playSpace .moduleDiv #fillingDiv{height:100%;width:100%;display:flex;justify-content:center;align-items:center}#playSpace .moduleDiv #fillingDiv input{width:60%}#playSpace .moduleDiv #fillingDiv button{width:20%;height:20%}#playSpace #firstParam{position:absolute;top:-1vh;right:25%;background-color:#024b30}#playSpace #firstParam .cordInner{background-color:#555}#playSpace #firstParam .tooltiptext{bottom:calc(100% + 4px);font-size:11px}#playSpace #inputOuter{top:-1vh;right:75%}#playSpace #outputOuter{bottom:-1vh;right:50%}#playSpace #outputOuter .cordInner{background-color:#ddd}:focus-visible{outline:2px solid rgba(220,220,220,.75);outline-offset:2px;box-shadow:0 0 0 4px #ffffff1a,0 0 10px #ffffff26}input:focus-visible{outline:none;box-shadow:none}input[type=range]:focus-visible{outline:2px solid rgba(220,220,220,.5);outline-offset:4px;box-shadow:none}.cordOuter:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px #dcdcdccc,0 0 10px #ffffff59}line:focus-visible{outline:none;stroke:#ddd;stroke-width:5}.moduleDiv button:focus-visible{outline:2px solid rgba(60,60,60,.7);outline-offset:2px;box-shadow:0 0 0 3px #00000014}.moduleDiv p button:focus-visible{outline:2px solid rgba(220,220,220,.75);outline-offset:2px;box-shadow:0 0 0 4px #ffffff1a,0 0 10px #ffffff26}.moduleDiv input[type=text]:focus-visible,.moduleDiv input[type=number]:focus-visible{outline:2px solid rgba(60,60,60,.6);outline-offset:1px;box-shadow:none}.moduleDiv input[type=range]:focus-visible{outline:2px solid rgba(60,60,60,.55);outline-offset:3px;box-shadow:none}.moduleDiv .selectorDiv:focus-visible{outline:2px solid rgba(60,60,60,.7);outline-offset:1px;box-shadow:none}.selectorDiv{width:40%;color:#ddd;background:#555;text-transform:capitalize;position:relative;display:inline-block;border-radius:3px;font-size:12px}.selectorDiv span{display:block;padding:3px}.selectorDiv #selectorContent{width:100%;min-width:max-content;display:none;position:absolute;z-index:200}.selectorDiv .selectorVal{display:block;background:#555;padding:3px}.selectorDiv .selectorVal:hover{background:#6f6f6f;cursor:pointer}.selectorDiv:hover,.selectorDiv.selectorDiv--open{border-radius:3px 3px 0 0}.selectorDiv:hover span,.selectorDiv.selectorDiv--open span{color:#b6a8b5}.selectorDiv:hover #selectorContent,.selectorDiv.selectorDiv--open #selectorContent{display:block}.oscDiv #oscBoxOne{display:flex;align-items:center;justify-content:space-evenly;margin-bottom:10px}.oscDiv #waveSelector{z-index:100}.oscDiv #rangeNum{background:#6f6f6f;color:#ddd;width:29%;position:relative;left:35%;border-radius:3px;margin-bottom:5%}.oscDiv #freqNumInput{width:29%;position:relative;border-radius:3px}.oscDiv .switch input{opacity:0;width:0;height:0}.oscDiv .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.oscDiv .slider:before{position:absolute;content:"";height:14px;width:14px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.oscDiv input:checked+.slider{background-color:#555}.oscDiv input:focus-visible+.slider{box-shadow:0 0 0 2px #3c3c3c99}.oscDiv input:checked+.slider:before{-webkit-transform:translateX(34px);-ms-transform:translateX(34px);transform:translate(34px)}.oscDiv .slider.round{border-radius:34px;z-index:100}.oscDiv .slider.round:before{border-radius:50%}#gainRangeInput{margin-top:3.5%}#gainNumInput{width:33%}#filterBoxOne{display:flex;align-items:center;justify-content:space-evenly}#filterSelector{z-index:1000}#ADSRDiv{display:flex;flex-direction:column;align-items:center}#ADSRSliderlogSliderWhole{margin-top:13px}#ADSRBox{width:100%;display:flex;align-items:center;justify-content:space-evenly;margin:5px 0}#ADSRControls{width:75%;height:30%;display:grid;grid:50% 50%/50% 50%}#ADSRControls label input{width:75%}#delayDiv{position:relative;width:100%;height:100%}#distortionCurveDiv{margin-bottom:5px;margin-top:15px}#distortionSelector{z-index:6;margin-bottom:10px}#reverbSelector{z-index:6;margin:5px 0}#RecorderDiv #recorderButtons{display:flex;align-items:center;justify-content:space-evenly;margin-bottom:5px}#RecorderDiv a{color:#ddd}#RecorderDiv a:link{color:#555}#RecorderDiv a{margin-bottom:3px}.compressorDiv{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0}.noiseDiv{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0}.noiseDiv #noiseSelector{z-index:6}.lfoDiv{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0}.lfoDiv #lfoWaveSelector{z-index:6;margin-bottom:4px}.sequencerDiv{width:100%;padding:6px 4px;display:flex;flex-direction:column;gap:6px}.sequencerDiv__controls{display:flex;align-items:center;justify-content:center;gap:6px}.sequencerDiv__controls #seqWaveSelector{z-index:6}.sequencerDiv__playBtn{width:28px;height:28px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sequencerDiv__playBtn i{font-size:10px}.sequencerDiv__stepCount{display:flex;align-items:center;gap:3px;flex-shrink:0}.sequencerDiv__stepCountBtn{width:18px;height:18px;padding:0;border-radius:3px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.sequencerDiv__stepCountBtn:disabled{opacity:.3;cursor:not-allowed}.sequencerDiv__stepCountNum{font-size:10px;min-width:16px;text-align:center;opacity:.8}.sequencerDiv__steps{display:grid;gap:3px}.sequencerDiv__step{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:1;transition:opacity .15s}.sequencerDiv__step--muted{opacity:.35}.sequencerDiv__step--playing .sequencerDiv__step__stepNote{background-color:#888;color:#ddd;box-shadow:0 0 6px #fff6}.sequencerDiv__stepNote{width:100%;font-size:8px;padding:3px 1px;border-radius:3px;cursor:pointer;text-align:center;background-color:#555;color:#ddd;white-space:nowrap;overflow:hidden;transition:background-color .1s}.sequencerDiv__stepNote:hover{background-color:#6f6f6f}.sequencerDiv__stepToggle{width:8px;height:8px;border-radius:50%;border:1.5px solid #555;background:transparent;padding:0;cursor:pointer;transition:background .15s}.sequencerDiv__stepToggle--on{background:#555}.dragDiv:has(.sequencerDiv){width:36vw}#outputDiv{position:absolute;right:0%;bottom:0%;width:86.4px;height:172.8px;background-color:#ddd;filter:drop-shadow(0 0 10px #555);text-align:center;border-radius:3px}#outputDiv p{border-radius:2px 2px 0 0;width:100%;height:20%;line-height:180%;background-color:#555;color:#ddd;margin:0;padding-top:4%;padding-bottom:4%}#outputDiv .cordOuter{position:absolute;left:50%;top:90%;transform:translate(-50%,-50%);visibility:1;opacity:1;background-color:#888;width:14px;height:14px}#outputDiv .cordInner{background-color:#ddd}#outputDiv #outputCenter{height:80%;width:100%;position:relative}#outputDiv #outputCenter input[type=range]{position:relative;transform:rotate(270deg);top:30%;right:2.5%;width:100%;height:5%}#outputDiv #outputCenter input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%}#outputDiv #outputCenter input[type=range]::-webkit-slider-thumb{border:2px solid rgb(110.5,110.5,110.5);border-radius:50%;margin-top:-4.5%;height:12px;width:12px}#outputDiv #outputCenter input[type=range]::-moz-range-track{width:100%;height:100%}#outputDiv #outputCenter input[type=range]::-moz-range-thumb{margin-top:-6%;height:10px;width:10px}.cordOuter{visibility:0;opacity:0;position:absolute;width:15px;height:15px;background-color:#888;border-radius:50%;transition:transform .6s,filter .3s,visibility .3s,opacity .3s;display:flex;align-items:center;justify-content:center;padding:0;transform:translate(50%)}.cordOuter:hover{filter:drop-shadow(0 0 5px #555)}.cordOuter .cordInner{width:65%;height:65%;border-radius:50%;padding:0;margin:0;background-color:#555}#returnSpace{height:100%;width:100%}svg{position:absolute;width:100%;height:100%;pointer-events:none;stroke-linecap:round}svg line{position:absolute;stroke:#555;stroke-width:3;pointer-events:all;cursor:pointer}svg line:hover{stroke:#600}.show{visibility:visible}.hide{visibility:hidden}.raise{filter:drop-shadow(0 0 5px #ddd)}.patchSource{visibility:visible;opacity:1;filter:drop-shadow(0 0 8px #ddd);transform:translate(50%) scale(1.2)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;text-align:center}input[type=text]{-moz-appearance:textfield;text-align:center;background:#ddd;color:#555;width:29%;border-radius:3px}input,input:focus{border:0;outline:none}input:focus{background:#555;color:#ddd}.tooltiptext{visibility:hidden;width:max-content;font-size:12px;background-color:#6f6f6f;color:#ddd;text-align:center;border-radius:6px;padding:5px 8px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);z-index:100;white-space:nowrap}.tooltiptext .paramSpan{color:#fff;text-decoration:underline}.tooltip{position:relative}.tooltip:hover .tooltiptext{display:block;z-index:2000;visibility:visible}.tooltiptext:after{content:" ";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:rgb(110.5,110.5,110.5) transparent transparent transparent}input[type=range]{-webkit-appearance:none;position:relative;border-radius:6.5px;width:80%}input[type=range]:focus{outline:none;border-radius:10px}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;cursor:pointer;background:#555;border-radius:3px;border:.2px solid rgb(110.5,110.5,110.5)}input[type=range]::-webkit-slider-thumb{border:2px solid rgb(110.5,110.5,110.5);border-radius:50%;background:#ddd;cursor:pointer;-webkit-appearance:none;height:12px;width:12px}input[type=range]:focus::-webkit-slider-runnable-track{background:#555;border-radius:3px}input[type=range]::-moz-range-track{cursor:pointer;background:#555;height:100%;border-radius:3px;border:.2px solid rgb(110.5,110.5,110.5)}input[type=range]::-moz-range-thumb{border:2px solid rgb(110.5,110.5,110.5);border-radius:50%;background:#ddd;cursor:pointer;margin-top:-6%}.switch{position:relative;display:inline-block;width:60px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:14px;width:14px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#555}input:focus+.slider{box-shadow:0 0 1px #555}input:checked+.slider:before{-webkit-transform:translateX(34px);-ms-transform:translateX(34px);transform:translate(34px)}.slider.round{border-radius:34px;z-index:100}.slider.round:before{border-radius:50%}.dialWhole{height:60px;width:33%;display:flex;justify-content:center;flex-direction:column}.dialWhole input[type=range]{width:40px;height:40px;position:relative}.dialWhole #dialKnob{height:30px;width:30px;border-radius:50%;filter:drop-shadow(3px 3px 3px #555);position:relative}.dialWhole #dialKnob .dialRange{opacity:0;z-index:6}.dialWhole #dialKnob #dialEmpty{height:30px;width:30px;border-radius:50%;position:absolute;left:9px;top:0}.dialWhole #dialNumInput{height:30%;width:45px}button{background-color:#555;width:40%;text-transform:capitalize;font-size:12px;cursor:pointer;color:#ddd;outline:none;border:none;padding:3px 5px;border-radius:3px}button:active{background-color:#3c3c3c}.errorBoundary{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background-color:#555;display:flex;flex-direction:column;align-items:center;justify-content:center}.errorBoundary__title{color:#b6a8b5;font-size:2rem;margin-bottom:1rem}.errorBoundary__message{color:#ddd;font-size:1.2rem;margin-bottom:2rem;text-align:center;max-width:60%}.errorBoundary__reload{background-color:#b6a8b5;color:#555;font-size:1rem;padding:.5rem 2rem;border:none;border-radius:4px;cursor:pointer;width:auto}.errorBoundary__reload:hover{filter:brightness(1.1)}@media only screen and (max-device-width:480px){#App{visibility:0;opacity:0}#notAvailable{visibility:visible;opacity:1}}@media only screen and (max-device-width:800px){#App{visibility:0;opacity:0}#notAvailable{visibility:visible;opacity:1}}