body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center;height:100vh;width:100vw;position:relative;outline:none;cursor:none}.App .Visualizer{cursor:auto;outline:none}.App .AppModal{cursor:auto;z-index:3;position:fixed;top:0;left:0;width:100vw;height:100vh;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.App .AppModal__Content{max-width:600px;max-height:600px;margin:50px;background:#fff;border-radius:6px;-webkit-box-shadow:0 0 60px rgba(0,0,0,.1);box-shadow:0 0 60px rgba(0,0,0,.1);z-index:4;position:relative;padding:50px}.App .AppModal__Overlay{position:absolute;top:0;left:0;background:rgba(0,0,0,.5);width:100%;height:100%}.App .AppModal__Content button{border:none;background-color:#11bf07;cursor:pointer;color:#fff;padding:5px 10px;font-size:12px;border-radius:6px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.App pre{position:absolute;left:0;top:0;width:100vw;height:100vh;text-align:left;padding:20px;z-index:1}.CanvasFrame{position:relative}.CanvasFrame__TopBar button{cursor:pointer}.CanvasFrame__TopBar{position:absolute;left:0;top:0;width:100vw;height:60px;background-color:rgba(0,0,0,.5);border-bottom:1px solid #333;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:10px;cursor:auto}.CanvasFrame__Canvas{position:absolute;left:0;max-height:100vh;max-width:100vw;overflow:hidden;top:0}.CanvasFrame .VariableControls{-ms-flex:1 1;flex:1 1;text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.CanvasFrame .FixedControls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.text-left{text-align:left}.App .ContextualMenu{position:fixed;padding:10px;border-radius:10px;right:50px;bottom:50px;background-color:hsla(0,0%,100%,.8);-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.App .ContextualMenu.recording,.App .ContextualMenu:hover{background-color:rgba(255,0,0,.7);cursor:pointer}.Visualizer{position:absolute;bottom:-975px;left:0;width:calc(100% - 80px);padding:20px;margin:20px;-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1);-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;will-change:bottom}.Visualizer strong{margin-right:10px}.Visualizer .row{margin-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.Visualizer .row div{-ms-flex:1 1;flex:1 1}.Visualizer__Frequency,.Visualizer__Level,.Visualizer__Note{float:left;margin-right:15px}.Visualizer__Color{float:right;margin-right:15px;border:2px solid #fff}.Piano{height:35px;margin-left:15px}.Piano .Piano__Octave{float:left;height:100%}.Piano .Piano__WhiteKey{-webkit-box-sizing:border-box;box-sizing:border-box;float:left;height:100%;width:30px;border:2px solid #000;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;margin-left:-15px;padding-bottom:20px;z-index:1;position:relative;cursor:pointer}.Piano .Piano__WhiteKey.no-margin{margin-left:0}.Piano .Piano__BlackKey{float:left;background:#000;height:30%;width:30px;margin-left:-15px;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;padding-bottom:20px;border:3px solid #000;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:2;position:relative;cursor:pointer}
/*# sourceMappingURL=main.a0490590.css.map*/