@import url(https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);@import url(https://fonts.cdnfonts.com/css/14-segment-led);@import url(https://fonts.cdnfonts.com/css/seven-segment);:root{--clr_grey:#b2b2b2;--clr_disabled:#ffe6e6;--clr_red:#ff8484;--clr_white:#dfdbce;--clr_dark:#1c1e21;--clr_black:#14171b;--clr_yellow:#ffb72c;--clr_red:#fc4b4b;--clr_green:#47be61;--clr_blue:#1a8df8;--clr_purple:#b47df3;--clr_yellow_light:#ffb72c33;--clr_red_light:#fc4b4b33;--clr_green_light:#47be6133;--clr_blue_light:#1a8df833;--clr_white_light:#dfdbce33;--clr_black_light:#0e111b33;--keyFlat_width:4rem;--keyFlat_height:10rem;--keySharp_width:3rem;--keySharp_height:6rem;--keySharp_margin:0 -1.5rem;--tooth_width:4.5rem;--tooth_height:5rem;--mouth_width:39rem}.themeTrack1{--clr_currentTrack:#ffb72c;--clr_currentTrack_light:#ffb72c33}.themeTrack2{--clr_currentTrack:#fc4b4b;--clr_currentTrack_light:#fc4b4b33}.themeTrack3{--clr_currentTrack:#47be61;--clr_currentTrack_light:#47be6133}.themeTrack4{--clr_currentTrack:#1a8df8;--clr_currentTrack_light:#1a8df833}h1,h2,h3,h4,h5,h6{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}p{margin:0}body{background:#1c1e21;background:var(--clr_dark);color:#fc4b4b;color:var(--clr_red);color:#dfdbce;color:var(--clr_white);font-family:Inter,sans-serif;margin:3rem;min-height:100vh}#root{width:100%}.App{gap:2.5rem}.App,main,section{display:flex;flex-direction:column}section{align-items:center;flex-wrap:wrap;gap:1rem;justify-content:space-between}#waveformContainer{display:flex;flex-direction:column}#sequencerUI{padding:10px}#sequencerUI,#sequencer_step_container{align-items:center;display:flex;flex-direction:column;justify-content:center}#sequencer_steps{display:flex;flex-direction:row;gap:10px;padding:10px}#sequencer_buttons{width:auto}#sequencer_tempo{display:flex;flex-direction:column;width:57rem}#sequencer_tempo input{color:#282828}.led{background:red;border-radius:3px;height:8px;margin-top:15px;width:15px}.note{align-items:center;display:flex;height:30px;justify-content:center;min-width:50px}.nbrStep,.note{color:#1c1e21;color:var(--clr_dark);font-weight:500}.nbrStep{margin-top:5px}#enabledInput{-webkit-appearance:none;appearance:none;background-color:initial;width:120px}label{color:#dfdbce;color:var(--clr_white);font-size:1rem;font-weight:300;letter-spacing:.125rem;text-align:left}label span{color:var(--clr_currentTrack)}#tempoInput label span{color:#b47df3;color:var(--clr_purple)}#tempoInput #enabledInput::-webkit-slider-thumb{background-color:#b47df3;background-color:var(--clr_purple)}#enabledInput::-webkit-slider-runnable-track{background-color:#dfdbce;background-color:var(--clr_white);border-radius:1rem;height:.5rem;position:relative;width:120px}#enabledInput::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--clr_currentTrack);border-radius:50%;box-shadow:2px 2px 0 0 #0000004d;box-sizing:border-box;cursor:pointer;height:1rem;position:relative;top:50%;translate:0 -50%;width:1rem}#enabledInput::-moz-range-track{height:8px}#enabledInput::-moz-range-thumb,#enabledInput::-moz-range-track{background-color:#b2b2b2;background-color:var(--clr_grey);border-radius:8px;position:relative}#enabledInput::-moz-range-thumb{appearance:none;box-sizing:border-box;cursor:pointer;height:24px;width:24px}#enabledInput::-moz-range-progress{background-color:#b2b2b2;background-color:var(--clr_grey);border-radius:8px;height:8px}#disabled::-webkit-slider-runnable-track{background-color:#b2b2b2;background-color:var(--clr_grey);border-radius:8px;height:8px;position:relative}#disabled::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#b2b2b2;background-color:var(--clr_grey);border:1px solid #fff;border-radius:50%;border-radius:8px;box-sizing:border-box;cursor:pointer;cursor:not-allowed;height:1rem;height:24px;position:relative;top:50%;translate:0 -50%;width:1rem;width:24px}#disabled::-moz-range-track{position:relative}#disabled::-moz-range-progress,#disabled::-moz-range-track{background-color:#b2b2b2;background-color:var(--clr_grey);border-radius:8px;height:8px}#disabledLabel{font-style:italic}#disabledButton,#disabledLabel{color:#b2b2b2;color:var(--clr_grey)}#disabledButton{background:#fff;border:1px solid #b2b2b2;border:1px solid var(--clr_grey);border-radius:.5rem;cursor:not-allowed;font-size:1.5rem;margin:2rem;padding:.5rem 1rem;text-transform:uppercase;width:auto}#sequencer_steps input[type=text]{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:#1c1e21;color:var(--clr_dark);display:flex;font-weight:500;height:30px;justify-content:center;text-align:center;width:40px}#sequencer_steps input[type=text]:focus{border:none;outline:none}#ENV,#VCA,#VCF,#VCO{box-shadow:2px 2px 3px #0003;padding:1rem}.synth{align-items:top;border-radius:1rem;display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center;padding:1rem}#canvas,.synth{width:auto}#sequenceSettings{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;width:100%}#directionInput,#divisionInput,#gateLengthInput,#lengthInput,#midiChInput,#octaveInput,#offsetInput,#pulsesInput,#randOctaveInput,#ratchetInput,#rootNoteInput,#scaleInput,#syncInput,#tempoInput,#transposeInput{display:flex;flex-direction:column;gap:.5rem;width:10rem;z-index:10}#ring{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;position:relative;width:100%}#euclidean,#sequence,#transport{display:flex;flex-direction:column;gap:.5rem}.dropdown{border:1px solid #b2b2b2;border:1px solid var(--clr_grey);border-radius:.5rem;position:relative}.dropdown,.selectList{padding:.25em;text-align:center}.selectList{height:3rem;overflow-y:auto}.selectList p:hover{background-color:#b2b2b2;background-color:var(--clr_grey);color:#fff}#noteToDisplay{align-items:center;color:#b2b2b2;color:var(--clr_grey);display:flex;font-size:4rem;justify-content:center;left:0;position:absolute;text-align:center;top:0}#playBtn,#randOctaveBtn,#syncBtn{background:#fff;border:1px solid #b2b2b2;border:1px solid var(--clr_grey);border-radius:.5rem;color:#1c1e21;color:var(--clr_dark);cursor:pointer;padding:.5rem 1rem;text-transform:uppercase;width:auto}#heroWrapper{width:22rem}#heroWrapper h1{color:#b47df3;color:var(--clr_purple);font-size:2rem;font-weight:200;letter-spacing:.75rem;text-align:left;text-transform:uppercase}#heroWrapper h3{text-wrap:wrap;color:#dfdbce;color:var(--clr_white);font-size:1rem;font-weight:300;letter-spacing:.0125rem;text-align:left}#transportWrapper{align-items:center;display:flex;flex-direction:row;gap:2rem;justify-content:flex-end}#displayWrapper{align-items:center;display:flex;flex-direction:column;justify-content:space-between;min-width:200px}#displayCounterWrapper{align-items:center;display:flex;flex-direction:row;gap:1rem}#playheadCounter{font-size:2em;font-weight:300;width:5rem}#currentNote,#playheadCounter{color:var(--clr_currentTrack);text-align:center}#currentNote{font-size:1em;font-weight:200;letter-spacing:.75rem;text-transform:uppercase;width:12rem}#slideButtonWrapper{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;justify-content:center;width:10rem}#slideOnOff{color:var(--clr_currentTrack);font-size:1rem;font-weight:300;letter-spacing:.125rem;text-align:left}#slideButtonRow{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}#toggle{border:1px solid #dfdbce;border:1px solid var(--clr_white);border-radius:1rem;height:1rem;position:relative;width:2rem}#toggleON{left:1rem}#toggleOFF,#toggleON{background:var(--clr_currentTrack);border-radius:1rem;box-shadow:2px 2px 0 0 #0000004d;height:1rem;position:absolute;top:0;transition:all .3s ease;width:1rem;z-index:1}#toggleOFF{left:0}#firstRowSection{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;width:100%}#tracksSection{position:relative}#parametersSection{align-items:flex-start;align-self:stretch;background-color:#14171b;background-color:var(--clr_black);border-radius:0 1rem 0 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:3rem;padding:2rem}#keyboardSection,#sequencerSection{align-items:flex-start;background-color:#14171b;background-color:var(--clr_black);display:flex;flex-direction:column;gap:3.5rem;padding:2rem}#headerSection{column-gap:5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;width:100%}#euclideanCol,#melodyCol,#routingCol{align-items:flex-start;display:flex;flex:1 0;flex-direction:column;gap:1rem;justify-content:center}.fadersWrapper{align-items:center;display:flex;flex-wrap:wrap;gap:2rem}.colTitleWrapper{align-items:center;align-self:stretch;display:flex;gap:1rem}.colTitleWrapper h4{font-size:1rem;font-weight:700;letter-spacing:.2rem;text-transform:uppercase}#euclideanInputRowOpen,#optionsInputRowOpen{display:flex;flex-direction:row;flex-wrap:wrap;gap:2rem;opacity:1;padding-top:1rem;transition:all .3s linear}#euclideanInputRowClose,#optionsInputRowClose{display:flex;flex-direction:row;gap:2rem;opacity:0;padding-top:1rem;transition:all .3s linear}.open{display:flex}#sequencerWrapper{align-items:flex-end;align-self:stretch;display:flex;gap:1rem;height:8.5rem;justify-content:center}.step{border-radius:.5rem;flex:1 0}.step,.subStepWrapper{align-self:stretch;cursor:pointer}.subStepWrapper{display:flex;flex:1 0;flex-direction:column;gap:.5rem}.subStep{align-self:stretch;border-radius:.5rem;flex:1 0}#sectionWrapper{align-items:center;display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;width:100%}#keyboardOverflow{align-items:center;display:flex;flex-direction:row;flex-grow:1;justify-content:flex-start;overflow:scroll;position:relative}#keyboardWrapper{align-items:top;display:flex;flex-direction:row;justify-content:center}#chevronLeftIcon{color:#0000;transform:translateY(-50%) translateX(25%)}#chevronRightIcon{color:#0000;transform:translateY(-50%)translateX(-25%)}.keyFlat{background-color:#dfdbce;background-color:var(--clr_white);border:1px solid #14171b;border:1px solid var(--clr_black);color:#14171b;color:var(--clr_black);height:10rem;height:var(--keyFlat_height);width:4rem;width:var(--keyFlat_width);z-index:20}.keyFlat,.keySharp{align-items:center;border-radius:.5rem;cursor:pointer;display:flex;justify-content:center}.keySharp{background-color:#14171b;background-color:var(--clr_black);border-top-left-radius:0;border-top-right-radius:0;color:#dfdbce;color:var(--clr_white);height:6rem;height:var(--keySharp_height);margin:0 -1.5rem;margin:var(--keySharp_margin);width:3rem;width:var(--keySharp_width);z-index:2;z-index:21}.keyFlat .keyText{margin-top:5rem}.keySharp .keyText{margin-top:3rem}.keyPressed{background-color:var(--clr_currentTrack)}#chevronLeftIcon,#chevronRightIcon,#minusIcon,#plusIcon{align-items:center;border:3px solid var(--clr_currentTrack);border-radius:3rem;color:var(--clr_currentTrack);cursor:pointer;display:flex;font-size:2rem;justify-content:center;padding:.25rem;transition:all .2s ease-in-out}#chevronLeftIcon:hover,#chevronRightIcon:hover,#minusIcon:hover,#plusIcon:hover{background-color:var(--clr_currentTrack);color:#14171b;color:var(--clr_black);transition:all .1s ease-in-out}#pauseIcon,#playIcon,#recordIcon,#stopIcon{cursor:pointer}.closeIcon,.expandIcon{background-color:#14171b;background-color:var(--clr_black);border-radius:1rem;color:var(--clr_currentTrack);font-size:2rem;transform:rotate(0deg);transition:all .3s ease-in-out}.closeIcon:hover{background-color:var(--clr_currentTrack);border-radius:1rem;color:#14171b;color:var(--clr_black);transform:rotate(180deg);transition:opacity .3s ease-in-out}.section_title{align-items:center;border-bottom:1px solid var(--clr_currentTrack);box-sizing:initial;cursor:pointer;display:flex;flex-direction:row;height:auto;justify-content:space-between;margin:0;min-width:100%;padding-bottom:.25rem;width:100%;z-index:5}.section_title h4{font-weight:300;letter-spacing:.3rem;margin:0}#MidiOutputWrapper{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;justify-content:flex-start;width:10rem}#selectMidiDevice{border-radius:5px;color:#b47df3;color:var(--clr_purple);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px}#selectMidiDevice,button{background-color:#14171b;background-color:var(--clr_black);font-size:1rem}button{border-radius:.5rem;color:var(--clr_currentTrack);cursor:pointer;font-family:Inter,sans-serif;padding:.5rem}button,button:hover{border:1px solid var(--clr_currentTrack);transition:all .3s ease-in-out}button:hover{background-color:var(--clr_currentTrack);color:#14171b;color:var(--clr_black)}#animationIcon{border:1px solid var(--clr_currentTrack);border-radius:2rem;bottom:1rem;color:var(--clr_currentTrack);font-size:1.5rem;padding:.5rem;position:absolute;right:1rem}#track_container{align-items:center;display:flex;flex-direction:row;gap:1rem;justify-content:flex-start;left:5.5rem;position:absolute;top:3rem;transform:translate(-50%,-50%)}#track_1_enable{background:#ffb72c;background:var(--clr_yellow);border:none;opacity:.4}#track_1_disable{background:none;border:1px solid #ffb72c;border:1px solid var(--clr_yellow)}#track_2_enable{background:#fc4b4b;background:var(--clr_red);border:none;opacity:.4}#track_2_disable{background:none;border:1px solid #fc4b4b;border:1px solid var(--clr_red)}#track_3_enable{background:#47be61;background:var(--clr_green);border:none;opacity:.4}#track_3_disable{background:none;border:1px solid #47be61;border:1px solid var(--clr_green)}#track_4_enable{background:#1a8df8;background:var(--clr_blue);border:none;opacity:.4}#track_4_disable{background:none;border:1px solid #1a8df8;border:1px solid var(--clr_blue)}#currentTrack{opacity:1}.track{border-radius:2rem;height:2rem;width:2rem}.track_1{background:#ffb72c;background:var(--clr_yellow)}.track_2{background:#fc4b4b;background:var(--clr_red)}.track_3{background:#47be61;background:var(--clr_green)}.track_4{background:#1a8df8;background:var(--clr_blue)}#tracksWrapper{background:#1c1e21;background:var(--clr_dark);display:flex;flex-direction:row;justify-content:space-between;width:100%}.trackWrapper{background:#1c1e21;background:var(--clr_dark);border-radius:0}.currentTrackWrapper,.trackWrapper{align-items:center;align-self:stretch;display:flex;flex:1 0;flex-direction:column;gap:32px;padding:32px}.currentTrackWrapper{background-clip:padding-box;background-color:#14171b;background-color:var(--clr_black);border-top-left-radius:3rem;border-top-right-radius:3rem}.muteSoloWrapper{align-items:center;display:flex;flex-direction:row;justify-content:center;z-index:10}#mute_0,#mute_1,#mute_2,#mute_3,#solo_0,#solo_1,#solo_2,#solo_3{cursor:pointer;display:inline;font-size:1rem;font-weight:700;padding:.5rem 1rem;transition:all .4s ease}#mute_0,#mute_1,#mute_2,#mute_3{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}#solo_0,#solo_1,#solo_2,#solo_3{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}#mute_0,#solo_0{border:1px solid #ffb72c33;border:1px solid var(--clr_yellow_light);color:#ffb72c;color:var(--clr_yellow)}#mute_0:hover,#solo_0:hover{background-color:#ffb72c33;background-color:var(--clr_yellow_light)}#mute_1,#solo_1{border:1px solid #fc4b4b33;border:1px solid var(--clr_red_light);color:#fc4b4b;color:var(--clr_red)}#mute_1:hover,#solo_1:hover{background-color:#fc4b4b33;background-color:var(--clr_red_light)}#mute_2,#solo_2{border:1px solid #47be6133;border:1px solid var(--clr_green_light);color:#47be61;color:var(--clr_green)}#mute_2:hover,#solo_2:hover{background-color:#47be6133;background-color:var(--clr_green_light)}#mute_3,#solo_3{border:1px solid #1a8df833;border:1px solid var(--clr_blue_light);color:#1a8df8;color:var(--clr_blue)}#mute_3:hover,#solo_3:hover{background-color:#1a8df833;background-color:var(--clr_blue_light)}.muteOn_0,.soloOn_0{background-color:#ffb72c;background-color:var(--clr_yellow)}.muteOn_0 span,.soloOn_0 span{color:#14171b;color:var(--clr_black)}.muteOn_1,.soloOn_1{background-color:#fc4b4b;background-color:var(--clr_red)}.muteOn_1 span,.soloOn_1 span{color:#14171b;color:var(--clr_black)}.muteOn_2,.soloOn_2{background-color:#47be61;background-color:var(--clr_green)}.muteOn_2 span,.soloOn_2 span{color:#14171b;color:var(--clr_black)}.muteOn_3,.soloOn_3{background-color:#1a8df8;background-color:var(--clr_blue)}.muteOn_3 span,.soloOn_3 span{color:#14171b;color:var(--clr_black)}.muteOff,.soloOff{background-color:initial}
/*# sourceMappingURL=main.5c382f51.css.map*/