@import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;800;900&display=swap);.piano{-webkit-user-select:none;-moz-user-select:none;user-select:none;height:var(--height,100px)}.piano__wrapper{--white-width:calc(var(--height, 100)/4*1);--black--width:calc(var(--white-width)*0.6);height:100%;display:flex;margin-left:calc(var(--black--width)/2)}.piano .key{flex:0 0 auto;position:relative;margin-left:calc(var(--black--width)/-2)}.piano .key:nth-child(12n+2),.piano .key:nth-child(12n+7){left:calc(var(--white-width)/-10)}.piano .key:nth-child(12n+4),.piano .key:nth-child(12n+11){left:calc(var(--white-width)/10)}.piano .key.key-white{width:var(--white-width);height:100%;border-left:1px solid #bbb;border-bottom:1px solid #bbb;border-radius:0 0 5px 5px;box-shadow:inset -1px 0 0 hsla(0,0%,100%,.8),inset 0 0 5px #ccc,0 0 3px rgba(0,0,0,.2);background:linear-gradient(180deg,#eee 0,#fff)}.piano .key.key-white.active{border-top:1px solid #777;border-left:1px solid #999;border-bottom:1px solid #999;box-shadow:inset 2px 0 3px rgba(0,0,0,.1),inset -5px 5px 20px rgba(0,0,0,.3),0 0 3px rgba(0,0,0,.5);background:linear-gradient(180deg,#fff 0,#bfbfbf)}.piano .key.key-white+.key-white{margin:0}.piano .key.key-black{z-index:1;width:var(--black--width);height:60%;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;border-radius:0 0 3px 3px;box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,#222,#555)}.piano .key.key-black.active{box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -2px 2px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);background:linear-gradient(180deg,#444,#222)}.section{width:100%;display:flex;flex-direction:column}.section+.section{margin-top:1em}.section__wrapper{display:block}.section-label{width:100%;display:flex;justify-content:space-between;margin-bottom:.15em}.section-label .label{font-family:Orbitron,sans-serif;font-size:.95em;font-weight:900;color:#fff;text-transform:uppercase;mix-blend-mode:overlay;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.section-content{width:100%;flex:1;display:grid;justify-items:center;align-items:flex-end}.mod-matrix-row{color:inherit;text-align:center;border:1px solid rgba(0,0,0,.26666666666666666)}.mod-matrix-row th{font-size:.9em}.mod-matrix-row td{height:100%}.mod-matrix-row td:active,.mod-matrix-row td:focus{outline:none}.mod-matrix-row select{white-space:nowrap;text-overflow:ellipsis;text-align:center;-moz-text-align-last:center;text-align-last:center;width:100%;height:100%;background:transparent;color:inherit;cursor:pointer;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none}.mod-matrix-row select::-ms-expand{display:none}.mod-matrix-row select:active,.mod-matrix-row select:focus{outline:none;background:rgba(0,0,0,.2)}.mod-matrix-row select option:checked{background:red;color:green}.display{box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,.4666666666666667),inset -2px -2px 5px 1px hsla(0,0%,80%,.13333333333333333);display:inline-block;padding:4px;border-radius:2px;overflow:hidden;box-sizing:content-box}.display__wrapper{height:inherit;border-radius:1px;background-color:#121212;box-shadow:inset 0 0 1px 1px rgba(0,0,0,.4666666666666667);display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.display__content{overflow:hidden}.display.light{box-shadow:inset 2px 2px 4px 2px rgba(0,0,0,.4666666666666667),inset -2px -2px 5px 2px hsla(0,0%,80%,.13333333333333333);box-shadow:inset 2px 2px 3px 2px #000,inset -2px -2px 5px 2px hsla(0,0%,80%,.13333333333333333),-1px -1px 2px 2px rgba(0,0,0,.6666666666666666),1px 1px 2px 2px hsla(0,0%,66.7%,.13333333333333333);padding:1px}.display.light .display__wrapper{background-color:#e5e9ec;color:#414446;box-shadow:inset 0 0 2px 1px #000}.mod-matrix table{border-collapse:collapse;width:18em;height:100%;table-layout:fixed;text-align:center;margin:.1em;border-style:hidden}.mod-matrix tbody,.mod-matrix thead{font-size:.6em;text-transform:uppercase;height:100%}.mod-matrix thead th{padding:.3em;background-color:#cfd3d4;background-clip:padding-box}.mod-matrix thead th:nth-child(2){width:31%}.mod-matrix thead th:nth-child(3){width:40%}.mod-matrix thead th:nth-child(4){width:20%}.mod-matrix td,.mod-matrix th{border:1px solid rgba(0,0,0,.26666666666666666)}.meter{display:flex;height:100%}.meter-channel{width:1em;margin:.1em;flex:1;overflow:hidden;background:linear-gradient(180deg,red 5%,orange 20%,green 60%);box-shadow:inset 0 0 2px 0 #333,inset 0 0 1px 3px #000,0 0 2px 1px #252525,0 0 2px 1px #111}.meter-channel:before{content:"";background:#111;position:absolute;width:100%;height:100%;transform-origin:center top;transform:scaleY(calc(1 - var(--level, 0)))}.main-screen{display:flex;align-items:center}.main-screen__content{color:#414446;font-weight:500;width:20ch;text-align:center;font-size:.75em;padding:.4em .2em;overflow:hidden;height:2em}.main-screen__content select{color:inherit;font-weight:inherit;font-size:inherit;text-align:inherit}.main-screen__content select option{font-size:.8em;font-weight:400}.main-screen__overlay{top:0;left:0;position:absolute;width:100%;height:100%;font-size:1.2em;line-height:1.7}.main-screen .display{flex:1;margin:0 .5em}.main-screen button{cursor:pointer;background:#111;color:#fff;border:none;border-radius:20%;width:1.7em;height:2em;display:inline-flex;margin:.5em 0;justify-content:center;box-shadow:0 0 .1em #000,inset 0 0 0 .1em #000;transform-origin:center}.main-screen button span{text-shadow:0 0 1px currentColor;font-size:1em;line-height:2}.main-screen button:active,.main-screen button:focus{outline:none}.main-screen button:active{box-shadow:0 0 .05em #000,inset 0 0 .1em .1em #000;transform:scale(.95)}.main-screen button.next span{transform:rotate(90deg)}.main-screen button.prev span{transform:rotate(-90deg)}.main-screen .triangle{margin:auto;display:inline-block;position:relative;background-color:#111;text-align:left;transform:rotate(-60deg) skewX(-30deg) scaleY(.866)}.main-screen .triangle:after,.main-screen .triangle:before{content:"";position:absolute;background-color:inherit}.main-screen .triangle,.main-screen .triangle:after,.main-screen .triangle:before{width:1em;height:1em;border-top-right-radius:30%}.main-screen .triangle:before{transform:rotate(-135deg) skewX(-45deg) scale(1.414,.707) translateY(-50%)}.main-screen .triangle:after{transform:rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)}.controller{font-size:.8em;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:.1em}.controller__wrapper{width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center}.controller__wrapper:not(:last-child){margin-bottom:.2em}.controller__label{bottom:0;font-weight:600;font-size:.7em;white-space:nowrap;text-align:center;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:hsla(0,0%,100%,.4666666666666667);display:flex;justify-content:center}.controller.label-right{flex-direction:row}.controller.label-right .controller__wrapper:not(:last-child){margin-right:.2em}.controller.label-left{flex-direction:row-reverse}.controller.label-left .controller__wrapper:not(:last-child){margin-left:.2em;margin-bottom:0}.controller.label-top{flex-direction:column-reverse}.controller.label-top .controller__wrapper:not(:last-child){margin-top:.2em}.checkbox{cursor:pointer}.checkbox__input input{position:absolute;opacity:0;z-index:-1;-webkit-appearance:none;-moz-appearance:none;appearance:none}.checkbox__input input.checked+span{box-shadow:0 0 .05em .1em #111,0 .1em .1em 0 rgba(17,17,17,.6666666666666666)}.checkbox__input input.checked+span:before{background-color:#fff;background:radial-gradient(circle at center,#fff,#aaa);box-shadow:0 0 .4em hsla(0,0%,100%,.3333333333333333),0 0 0 .05em #000,inset 0 0 .08em .13em #000}.checkbox__control{display:inline-block;width:1.2em;height:1.2em;border-radius:25%;display:flex;box-shadow:0 0 .05em #111,0 .1em .1em 0 rgba(17,17,17,.6666666666666666)}.checkbox__control:before{content:"";border-radius:inherit;width:100%;height:100%;margin:auto;display:block;background:linear-gradient(0deg,#333,#555);box-shadow:0 0 0 .03em #000,inset 0 0 .04em .08em #000,inset 0 -.07em .35em rgba(17,17,17,.3333333333333333)}.synth{display:inline-block;margin:auto;flex-shrink:0}.synth__wrapper{margin:1rem auto;overflow:hidden;border-radius:.4em}.synth__wrapper:before{content:"";z-index:2;pointer-events:none;position:absolute;width:100%;height:100%;box-shadow:inset 0 .4em .15em -.3em hsla(0,0%,100%,.26666666666666666),inset .3em 0 .2em -.2em hsla(0,0%,66.7%,.3333333333333333),inset -.3em 0 .2em -.2em rgba(0,0,0,.6666666666666666);mix-blend-mode:hard-light}.synth__layout{background:#050505;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-auto-rows:auto;border-style:solid;border-width:0 3em;-o-border-image:url(../../../src/assets/img/wood.b32c2a97.jpg) 0 100%;border-image:url(../../../src/assets/img/wood.b32c2a97.jpg) 0 100%;box-shadow:inset .6em 0 .1em -.5em #000,inset -.6em 0 .1em -.5em #000,inset 0 0 3em 3em #000}.synth__layout:before{content:"";z-index:1;pointer-events:none;position:absolute;width:100%;height:100%;box-shadow:0 0 .3em .1em #111}.synth__layout .row-divider{position:relative;z-index:4}.synth__layout .row-divider:before{content:"";position:absolute;left:0;right:0;margin:0 auto;width:100%;height:6px;border-radius:1px;box-shadow:0 3px 2px 0 rgba(85,85,85,.06666666666666667),0 -1px 1px #111,inset -1px 2px 4px 2px rgba(0,0,0,.5333333333333333),inset 1px -1px 2px 2px hsla(0,0%,46.7%,.06666666666666667);height:3px;border-radius:0;box-shadow:0 1px 1px 0 rgba(85,85,85,.3333333333333333),0 -1px 1px rgba(0,0,0,.26666666666666666),inset 1px -1px 2px 2px #000}.synth__layout .row{background:#181b1c;display:grid;grid-auto-flow:column;grid-template-columns:auto;grid-auto-columns:auto}.synth__layout .row.row-3{z-index:2}.synth__layout .row.effects{grid-template-columns:min-content auto}.synth__layout .col{position:relative;padding:.7em 1em;display:flex}.synth__layout .col+.col:before{content:"";position:absolute;left:0;top:0;bottom:0;margin:auto 0;width:5px;height:87%;border-radius:1px;width:3px;height:100%;border-radius:0;box-shadow:1px 0 3px 0 rgba(85,85,85,.3333333333333333),-2px 0 1px rgba(0,0,0,.26666666666666666),inset -1px 1px 1px 0 #000}.synth__layout .text{position:absolute;left:20%;top:50%;font-size:4rem;text-transform:uppercase;font-weight:800;mix-blend-mode:overlay;color:#fff}.synth__layout .piano-section{margin:auto;margin-bottom:0;padding:.1em;box-shadow:inset 0 0 2px 2px #111}.synth__layout .piano-section__wrapper:before{box-shadow:inset 0 6px 8px 1px rgba(17,17,17,.6666666666666666),inset 0 3px 3px 1px #111;content:"";position:absolute;width:100%;height:100%;pointer-events:none;z-index:3}.section #section__amp-env,.section #section__filter-env,.section #section__osc-1,.section #section__osc-2{justify-items:start;grid-auto-rows:1fr;grid-template-rows:1fr;grid-auto-flow:column;-moz-column-gap:.1em;column-gap:.1em}.section #section__chorus,.section #section__filter,.section #section__lfo-1,.section #section__lfo-2{grid-template-rows:1fr 1fr;grid-template-columns:repeat(3,1fr);-moz-column-gap:.1em;column-gap:.1em}.section #section__filter{grid-template-columns:repeat(2,1fr)}.section #section__lfo-1,.section #section__lfo-2{min-width:5em}.section #section__filter .controller:nth-child(-n+2),.section #section__lfo-1 .controller:nth-child(-n+3),.section #section__lfo-2 .controller:nth-child(-n+3){align-self:baseline}.section #section__limiter{align-items:center}.section #section__delay,.section #section__distort,.section #section__reverb{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-end}.section #section__delay .controller,.section #section__distort .controller,.section #section__reverb .controller{flex:1 0 33%}.section #section__distort .controller:first-child{flex:0 0 80%}.section #section__mixer{grid-template-columns:1fr;grid-auto-flow:column;grid-auto-columns:1fr;grid-auto-rows:auto;justify-items:center;align-items:stretch;-moz-column-gap:.5em;column-gap:.5em}.section #section__master{grid-template-columns:1fr auto}.section .toggle-fx .checkbox__control{width:2.5em;height:2.5em}.section .toggle-fx .checkbox__control:after{font-size:1.5em;content:"FX"}.section .toggle-fx .checkbox__control:after,.section .toggle-scope .checkbox__control:after{font-family:sans-serif;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;color:rgba(0,0,0,.5333333333333333)}.section .toggle-scope .checkbox__control:after{content:"∿"}.bottom-panel{perspective:600px;z-index:1}.bottom-panel__wrapper{width:100%;height:100%;transform-style:preserve-3d;display:grid;grid-template:1fr/1fr 1fr/1fr;transform:translateZ(-4.8em);transition:transform 1s ease-out;will-change:transform}.bottom-panel__wrapper.show-kb{transform:translateZ(-4.8em) rotateY(0deg)}.bottom-panel__wrapper.show-fx{transform:translateZ(-4.8em) rotateX(-90deg)}.bottom-panel__wrapper .row{background:#181b1c;border-bottom:.1em solid #000;transform:rotateY(0deg) translateZ(4.8em);grid-column:1/-1;grid-row:1/-1}.bottom-panel__wrapper .row.effects{transform:rotateX(90deg) translateZ(4.8em)}@font-face{font-family:OpenSansPX;font-weight:400;font-style:normal;src:url(../../../src/assets/fonts/OpenSansPX.64190095.ttf) format("truetype")}@font-face{font-family:OpenSansPXBold;font-weight:700;font-style:normal;src:url(../../../src/assets/fonts/OpenSansPXBold.571cbac6.ttf) format("truetype")}*{box-sizing:border-box;margin:0;padding:0;position:relative}#app,body,html{height:100%;width:100%;overflow:hidden}body{transition:0s;font-family:Calibri,Trebuchet MS,sans-serif;background-color:#181b1c;background-color:#000;color:#e4e8ea;-webkit-font-smoothing:antialiased;font-size:18px;font-size:20px}#app{display:flex}li,ul{list-style:none}select{color:inherit;cursor:pointer;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;text-align:center;-moz-text-align-last:center;text-align-last:center;width:100%;height:100%;background:transparent;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none}select option{color:initial;font-size:.9em;width:100%}select::-ms-expand{display:none}select:active,select:focus{outline:none}.handle{cursor:grab}.handle:active,.handle:focus{cursor:pointer!important}.flex{display:flex}.flex-column{flex-direction:column}.flex-1{flex:1}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.align-center{align-items:center}.h-full{height:100%}.w-full{width:100%}.m-auto{margin:auto}