.sliders__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}.sliders__octave{width:40%}.Keyboard{display:-ms-flexbox;display:flex;position:relative;overflow:hidden;background:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:222px}.Keyboard:after,.Keyboard:before{content:"";pointer-events:none;position:absolute;left:0;width:100%;z-index:2}.Keyboard:before{-webkit-box-shadow:0 4px 2px #d52,0 4px 0 #a55;box-shadow:0 4px 2px #d52,0 4px 0 #a55;height:4px;top:-4px}.Keyboard:after{top:0;height:100%;border-radius:5px;-webkit-box-shadow:0 0 0 2px #000 inset,0 0 0 4px #000;box-shadow:inset 0 0 0 2px #000,0 0 0 4px #000}.Keyboard .key{cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0)}.Keyboard .key,.Keyboard .key .top{border-style:none!important}.Keyboard .black{z-index:0;background-color:#111;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.1),rgba(0,0,0,.2)),-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.8),rgba(0,0,0,.1)),-webkit-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-webkit-linear-gradient(left,rgba(0,0,0,.3),hsla(0,0%,100%,.3) 1px,transparent 6px),-webkit-linear-gradient(right,rgba(0,0,0,.3),hsla(0,0%,100%,.3) 1px,transparent 6px);background-image:-o-linear-gradient(top,hsla(0,0%,100%,.1),rgba(0,0,0,.2)),-o-radial-gradient(center,ellipse,rgba(0,0,0,.8),rgba(0,0,0,.1)),-o-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-o-linear-gradient(left,rgba(0,0,0,.3) 0,hsla(0,0%,100%,.3) 1px,transparent 6px),-o-linear-gradient(right,rgba(0,0,0,.3) 0,hsla(0,0%,100%,.3) 1px,transparent 6px);background-image:linear-gradient(180deg,hsla(0,0%,100%,.1),rgba(0,0,0,.2)),radial-gradient(ellipse at center,rgba(0,0,0,.8),rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.1)),linear-gradient(90deg,rgba(0,0,0,.3) 0,hsla(0,0%,100%,.3) 1px,transparent 6px),linear-gradient(270deg,rgba(0,0,0,.3) 0,hsla(0,0%,100%,.3) 1px,transparent 6px);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset,1px 0 0 0 #333 inset,0 1px 2px hsla(60,13%,65%,.4),0 0 0 2px #000,0 40px 0 2px #333;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 1px 0 0 0 #333,0 1px 2px hsla(60,13%,65%,.4),0 0 0 2px #000,0 40px 0 2px #333;margin-top:-10px!important}.Keyboard .black._active{-webkit-transform:translate3d(0,-22.5px,0);transform:translate3d(0,-22.5px,0)}.Keyboard .black:before{right:100%;border-radius:2px;margin-right:-1px;border:10px solid transparent;border-bottom-color:#000;border-right-color:#000;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}.Keyboard .black:after,.Keyboard .black:before{content:"";position:absolute;top:100%;margin-top:-2px}.Keyboard .black:after{left:100%;border-radius:2px;margin-left:-1px;border:10px solid transparent;border-bottom-color:#000;border-left-color:#000;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg)}.Keyboard .white{z-index:1;background-color:#eded68;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,.8))),radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,.1)),-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.2)),to(rgba(0,0,0,.1))),-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.1)),color-stop(hsla(0,0%,100%,.2)),to(rgba(0,0,0,.1)));background-image:-webkit-linear-gradient(top,#fff,hsla(0,0%,100%,.8)),-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.5),rgba(0,0,0,.1)),-webkit-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-webkit-linear-gradient(left,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1));background-image:-o-linear-gradient(top,#fff,hsla(0,0%,100%,.8)),-o-radial-gradient(center,ellipse,rgba(0,0,0,.5),rgba(0,0,0,.1)),-o-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-o-linear-gradient(left,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1));background-image:linear-gradient(180deg,#fff,hsla(0,0%,100%,.8)),radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.1)),linear-gradient(90deg,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1));background-position:50%,15px 50px,50%;background-size:100% 100%,300% 100%,100% 100%;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset,1px 0 0 0 #fff inset,0 0 0 1px #b2b29a,0 20px 0 -1px #a9a999,0 20px 0 0 #c1c1ae,0 20px 0 1px #b2b29a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 1px 0 0 0 #fff,0 0 0 1px #b2b29a,0 20px 0 -1px #a9a999,0 20px 0 0 #c1c1ae,0 20px 0 1px #b2b29a}.Keyboard .white._active{background-size:100% 100%,100% 100%,100% 100%,300% 100%,100% 100%;background-position:50%,50%,50%,15px 50px,50%;background-image:-webkit-linear-gradient(top,#fff,hsla(0,0%,100%,.7)),-webkit-linear-gradient(left,rgba(0,0,0,.5),transparent 8px),-webkit-linear-gradient(right,rgba(0,0,0,.5),transparent 6px),-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.5),rgba(0,0,0,.1)),-webkit-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-webkit-linear-gradient(left,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1));background-image:-o-linear-gradient(top,#fff,hsla(0,0%,100%,.7)),-o-linear-gradient(left,rgba(0,0,0,.5),transparent 8px),-o-linear-gradient(right,rgba(0,0,0,.5),transparent 6px),-o-radial-gradient(center,ellipse,rgba(0,0,0,.5),rgba(0,0,0,.1)),-o-linear-gradient(bottom,rgba(0,0,0,.2),rgba(0,0,0,.1)),-o-linear-gradient(left,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1));background-image:linear-gradient(180deg,#fff,hsla(0,0%,100%,.7)),linear-gradient(90deg,rgba(0,0,0,.5),transparent 8px),linear-gradient(270deg,rgba(0,0,0,.5),transparent 6px),radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.1)),linear-gradient(90deg,rgba(0,0,0,.1),hsla(0,0%,100%,.2),rgba(0,0,0,.1))}.Keyboard .white .top{-webkit-box-shadow:1px 0 0 0 rgba(0,0,0,.1) inset,1px 0 0 0 #fff inset,0 -1px 0 0 #fff,0 -1px 0 1px #b2b29a;box-shadow:inset 1px 0 0 0 rgba(0,0,0,.1),inset 1px 0 0 0 #fff,0 -1px 0 0 #fff,0 -1px 0 1px #b2b29a;margin-bottom:-1px}.Keyboard .white .top:after,.Keyboard .white .top:before{position:absolute;bottom:0;height:4px;width:4px;margin-bottom:2px}.Keyboard .white .top:before{left:100%;border-radius:0 0 0 2px;margin-left:1px;-webkit-box-shadow:-1px 0 0 0 #b2b29a,0 1px 0 0 #b2b29a,-3px 3px 0 #fff;box-shadow:-1px 0 0 0 #b2b29a,0 1px 0 0 #b2b29a,-3px 3px 0 #fff}.Keyboard .white .top:after{right:100%;margin-right:1px;border-radius:0 0 2px 0;-webkit-box-shadow:1px 0 0 0 #b2b29a,0 1px 0 0 #b2b29a,3px 3px 0 #fff;box-shadow:1px 0 0 0 #b2b29a,0 1px 0 0 #b2b29a,3px 3px 0 #fff}.Keyboard .white.left .top:before,.Keyboard .white.right .top:after{content:""}.Keyboard .white.center{border-radius:2px}.Keyboard .white.center .top:after,.Keyboard .white.center .top:before{content:""}.Poti{color:#fff}.Poti .PotiIndicator{color:transparent}.Poti .PotiIndicator:before{content:"";position:absolute;bottom:0;left:0;height:2px;width:2px;background:#fff;margin-bottom:5px;border-radius:100%}.Poti .PotiIndicator .label{color:#fff}.Poti .PotiIndicator._numbered:before{content:normal}.Poti .PotiKnob{z-index:2;-webkit-box-shadow:0 0 2px 1px hsla(0,0%,100%,.1) inset,0 0 0 2px #111 inset;box-shadow:inset 0 0 2px 1px hsla(0,0%,100%,.1),inset 0 0 0 2px #111;margin-top:-5px}.Poti .PotiKnob:before{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:110%;padding:4px 0;-webkit-box-shadow:0 2px 0 1px #111,0 2px 0 6px #1e1e1e,0 2px 0 7px #111;box-shadow:0 2px 0 1px #111,0 2px 0 6px #1e1e1e,0 2px 0 7px #111;background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),transparent 10px),-webkit-linear-gradient(left,transparent 20%,hsla(0,0%,100%,.2) 40%,transparent 70%);background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5) 0,transparent 10px),-o-linear-gradient(left,transparent 20%,hsla(0,0%,100%,.2) 40%,transparent 70%);background-image:linear-gradient(0deg,rgba(0,0,0,.5) 0,transparent 10px),linear-gradient(90deg,transparent 20%,hsla(0,0%,100%,.2) 40%,transparent 70%)}.Poti .PotiKnob:after,.Poti .PotiKnob:before{content:"";position:absolute;top:0;height:100%;border-radius:100%;background-color:#1e1e1e}.Poti .PotiKnob:after{left:0;width:100%;background-image:-webkit-radial-gradient(closest-corner,hsla(0,0%,7%,.2) 10%,hsla(0,0%,7%,.1) 60%,hsla(0,0%,100%,.1) 80%);background-image:-o-radial-gradient(closest-corner,hsla(0,0%,7%,.2) 10%,hsla(0,0%,7%,.1) 60%,hsla(0,0%,100%,.1) 80%);background-image:radial-gradient(closest-corner,hsla(0,0%,7%,.2) 10%,hsla(0,0%,7%,.1) 60%,hsla(0,0%,100%,.1) 80%);-webkit-box-shadow:inherit;box-shadow:inherit}.Poti .PotiMarker{z-index:2;color:red;font-size:6px;will-change:transform}.Poti._colored .PotiIndicator:before{height:4px;margin-bottom:2px;border-radius:0}.Poti._colored .PotiKnob{z-index:2;-webkit-box-shadow:0 0 0 2px #1e1e1e inset;box-shadow:inset 0 0 0 2px #1e1e1e;margin-top:-5px;background:currentColor;border-width:0;position:relative}.Poti._colored .PotiKnob:before{height:120%;width:110%;padding:1px;-webkit-box-shadow:0 1px 0 1px #111;box-shadow:0 1px 0 1px #111;top:0}.Poti._colored .PotiKnob:after{background-color:inherit}.Poti._colored .PotiMarker{z-index:2;color:#111;font-size:6px}.Poti._colored.green .PotiKnob{color:green}.Poti._colored.red .PotiKnob{color:red}.Poti._colored.yellow .PotiKnob{color:#ff0}.oscillator{border-radius:4px;display:block;background:#333;padding:10px;margin:40px 0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3) inset;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}.synth{text-align:center;position:relative;margin:50px;border-radius:4px;display:inline-block;padding:0 20px;-webkit-box-shadow:0 0 0 2px rgba(0,0,0,.3) inset;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3);background-color:#1414aa;background-image:radial-gradient(10px 90px,6px 120px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),radial-gradient(70px 130px,8px 180px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),radial-gradient(20px 120px,6px 0,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),-webkit-gradient(linear,left top,right top,color-stop(10%,transparent),color-stop(15%,rgba(0,0,0,.05)),color-stop(40%,transparent),color-stop(60%,hsla(0,0%,100%,.05)),color-stop(70%,transparent)),-webkit-gradient(linear,left top,right top,color-stop(10%,transparent),color-stop(10%,rgba(0,0,0,.05)),color-stop(50%,transparent),color-stop(60%,hsla(0,0%,100%,.05)),color-stop(65%,transparent)),-webkit-gradient(linear,left top,right top,color-stop(10%,transparent),color-stop(10%,rgba(0,0,0,.05)),color-stop(55%,transparent),color-stop(60%,hsla(0,0%,100%,.05)),color-stop(60%,transparent)),-webkit-gradient(linear,left bottom,right top,from(rgba(0,0,0,.2)),color-stop(60%,transparent));background-image:-webkit-radial-gradient(10px 90px,6px 120px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),-webkit-radial-gradient(70px 130px,8px 180px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),-webkit-radial-gradient(20px 120px,6px 0,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),-webkit-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 15%,transparent 40%,hsla(0,0%,100%,.05) 60%,transparent 70%),-webkit-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 0,transparent 50%,hsla(0,0%,100%,.05) 60%,transparent 65%),-webkit-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 0,transparent 55%,hsla(0,0%,100%,.05) 60%,transparent 0),-webkit-linear-gradient(bottom left,rgba(0,0,0,.2),transparent 60%);background-image:-o-radial-gradient(10px 90px,6px 120px,transparent 10%,rgba(0,0,0,.05) 10%,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.05) 60%,transparent 60%),-o-radial-gradient(70px 130px,8px 180px,transparent 10%,rgba(0,0,0,.05) 10%,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.05) 60%,transparent 60%),-o-radial-gradient(20px 120px,6px 120px,transparent 10%,rgba(0,0,0,.05) 10%,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.05) 60%,transparent 60%),-o-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 15%,transparent 40%,hsla(0,0%,100%,.05) 60%,transparent 70%),-o-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 10%,transparent 50%,hsla(0,0%,100%,.05) 60%,transparent 65%),-o-linear-gradient(left,transparent 10%,rgba(0,0,0,.05) 10%,transparent 55%,hsla(0,0%,100%,.05) 60%,transparent 60%),-o-linear-gradient(bottom left,rgba(0,0,0,.2),transparent 60%);background-image:radial-gradient(10px 90px,6px 120px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),radial-gradient(70px 130px,8px 180px,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),radial-gradient(20px 120px,6px 0,transparent 10%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 40%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05) 60%,transparent 0),linear-gradient(90deg,transparent 10%,rgba(0,0,0,.05) 15%,transparent 40%,hsla(0,0%,100%,.05) 60%,transparent 70%),linear-gradient(90deg,transparent 10%,rgba(0,0,0,.05) 0,transparent 50%,hsla(0,0%,100%,.05) 60%,transparent 65%),linear-gradient(90deg,transparent 10%,rgba(0,0,0,.05) 0,transparent 55%,hsla(0,0%,100%,.05) 60%,transparent 0),linear-gradient(to top right,rgba(0,0,0,.2),transparent 60%);background-size:250px 200px,120px 300px,100px 500px,8px 100%,12px 100%,20px 100%,100% 100%;-webkit-box-shadow:0 -26px 0 0 rgba(0,0,0,.5) inset,0 -26px 10px 0 hsla(0,0%,100%,.2) inset;box-shadow:inset 0 -26px 0 0 rgba(0,0,0,.5),inset 0 -26px 10px 0 hsla(0,0%,100%,.2)}.synth:after,.synth:before{content:"";position:absolute;top:-3px;bottom:-3px;width:40px;background-color:#a0280a;background-image:inherit;background-size:inherit;border-radius:3px}.synth:before{left:-30px;-webkit-box-shadow:0 -32px 0 0 rgba(0,0,0,.5) inset,0 -32px 10px 0 hsla(0,0%,100%,.2) inset,10px 0 10px -10px rgba(0,0,0,.6);box-shadow:inset 0 -32px 0 0 rgba(0,0,0,.5),inset 0 -32px 10px 0 hsla(0,0%,100%,.2),10px 0 10px -10px rgba(0,0,0,.6)}.synth:after{right:-30px;-webkit-box-shadow:0 -32px 0 0 rgba(0,0,0,.5) inset,0 -32px 10px 0 hsla(0,0%,100%,.2) inset,-10px 0 10px -10px rgba(0,0,0,.6);box-shadow:inset 0 -32px 0 0 rgba(0,0,0,.5),inset 0 -32px 10px 0 hsla(0,0%,100%,.2),-10px 0 10px -10px rgba(0,0,0,.6)}.mysynth{text-align:center}body{margin:0;padding:0}
/*# sourceMappingURL=main.f315b72f.css.map*/