.metronome,.pitch-tool{font-family:Roboto,sans-serif}*,:after,:before{box-sizing:border-box}.content,body,html{width:100%;height:100%;margin:0}body{background-color:rgba(50,0,255,.1)}.content{height:calc(100% - 85px);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.metronome-box{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end;margin-bottom:10px}.metronome,.metronome-toggle{flex-direction:row;box-sizing:border-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal}.disclaimer{text-align:center;font-weight:700;color:#fff;padding:5px;background-color:rgba(0,0,255,.4);font-size:16px}.disclaimer a{color:#fff}.rw-i-caret-up:before{content:'\0025B2'}.rw-i-caret-down:before{content:'\0025BC'}.rw-i-caret-down:before,.rw-i-caret-up:before{color:#444;font-size:.8em}.metronome-toggle-container{position:relative;display:inline-block}.metronome-toggle{border:1px solid #000;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.metronome-toggle.open{color:#dfe0e4;background-color:#333}.metronome-toggle.open:not(:active) svg{fill:#dfe0e4}.metronome-toggle svg{height:1.35em;fill:#333;margin-right:8px}.metronome{padding:1em;border:1px solid #333;background-color:#fff;display:-webkit-box;display:flex;height:3.5em;-webkit-box-align:center;align-items:center;font-size:14px}.metronome.hover-box{z-index:1022;position:absolute;top:36px;right:0;box-shadow:5px 5px 30px -5px #333}.metronome.hover-box.hidden{display:none}.metronome *,.metronome :after,.metronome :before{box-sizing:border-box}.metronome .toggle-button{font-size:1em;text-transform:uppercase}.metronome .beep-visualizer{height:1.5em;min-width:1.5em;border-radius:.75em;margin:0 1.5em;background-color:#dfe0e4;-webkit-transition:background-color .3s ease-out;transition:background-color .3s ease-out}.metronome .beep-visualizer.active{background-color:#F16082;-webkit-transition:background-color 0s;transition:background-color 0s}.metronome .sound-options{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.metronome .sound-option{display:-webkit-box;display:flex;font-size:1.22em;height:1.22em;margin-right:12px;cursor:pointer}.metronome .bpm-selector-container,.pitch-tool-toggle{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal}.pitch-tool,.pitch-tool .control-label,.pitch-tool .current-octave{cursor:default}.metronome .sound-option svg{height:100%}.metronome .sine-wave svg{fill:#d0cfcf}.metronome .sine-wave.selected svg{fill:#578CC4}.metronome .wood-block .st0{fill:#444}.metronome .wood-block .st1{fill:#888}.metronome .wood-block .st2{fill:#ccc}.metronome .wood-block .st3{fill:#aaa}.metronome .wood-block .st4{fill:#444}.metronome .wood-block.selected .st0{fill:#333}.metronome .wood-block.selected .st1{fill:#8b775f}.metronome .wood-block.selected .st2{fill:#a39079}.metronome .wood-block.selected .st3{fill:#99846a}.metronome .wood-block.selected .st4{fill:#333}.metronome .bpm-selector-container{display:flex;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:9em}.metronome .bpm-selector-label{color:#9D9C9C;font-size:1.3em;margin-right:.5em}.pitch-tool-toggle{display:flex;flex-direction:row;-webkit-box-align:center;align-items:center}.pitch-tool-toggle.open{color:#eee;background-color:#333}.pitch-tool-toggle.open:not(:active) svg{fill:#eee}.pitch-tool-toggle svg{height:1.35em;fill:#333;margin-right:8px}.pitch-tool-container{z-index:1020}.pitch-tool{width:100%;height:100%;border:1px solid #333;background-color:#fff}.pitch-tool.selection-disabled{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pitch-tool .control-box{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;border-bottom:1px solid #333;width:100%;height:30%}.pitch-tool .controls,.pitch-tool .controls-instrument{flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal}.pitch-tool .controls{display:-webkit-box;display:flex;justify-content:space-around;color:#333;font-size:14px}.pitch-tool.above-400 .controls{font-size:18px}.pitch-tool.above-600 .controls{font-size:24px}.pitch-tool.above-800 .controls{font-size:30px}.pitch-tool.above-1000 .controls{font-size:36px}.pitch-tool.above-1200 .controls{font-size:42px}.pitch-tool.above-1400 .controls{font-size:48px}.pitch-tool.above-1600 .controls{font-size:54px}.pitch-tool.above-1800 .controls{font-size:60px}.pitch-tool .controls-instrument,.pitch-tool .controls-octave{align-self:center}.pitch-tool .controls-instrument{display:-webkit-box;display:flex}.pitch-tool .control-label{color:#666}.pitch-tool .octave-shifter{font-weight:700;font-size:1.33em;margin-left:calc(1.33em / 5);margin-right:calc(1.33em / 5);line-height:1em}.pitch-tool .octave-shifter:not(.exhausted){cursor:pointer}.pitch-tool .octave-shifter:not(.exhausted):active{color:#3a7a94}.pitch-tool .octave-shifter.exhausted{color:#aaa}.pitch-tool .instrument-selector{display:-webkit-box;display:flex;font-size:1.22em;height:1.22em;margin-left:calc(1.22em / 8);margin-right:calc(1.22em / 8);cursor:pointer}.pitch-tool .instrument-selector svg{height:100%;fill:#333}.pitch-tool .instrument-selector.selected svg{fill:#3a7a94}.pitch-tool.above-1000 .instrument-selector,.pitch-tool.above-1200 .instrument-selector,.pitch-tool.above-1400 .instrument-selector,.pitch-tool.above-1600 .instrument-selector,.pitch-tool.above-1800 .instrument-selector,.pitch-tool.above-600 .instrument-selector,.pitch-tool.above-800 .instrument-selector{padding:calc(1.22em / 8) calc(1.22em / 4);border:1px solid #aaa;border-radius:calc(1.22em / 6)}.pitch-tool .keys{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;width:100%;height:70%;position:relative}.pitch-tool .black-key,.pitch-tool .white-key{position:relative;border:1px outset}.pitch-tool .white-key{background-color:#fff;width:100%;height:100%}.pitch-tool .white-key.pressed{background-color:#eee}.pitch-tool .black-key{background:-webkit-linear-gradient(#222,#888);background:linear-gradient(#222,#888);color:#fff;width:calc(60% / 15);height:60%;z-index:1021;position:absolute;margin-left:calc((0% - 30%)/ 15)}.pitch-tool .black-key.pressed{background:-webkit-linear-gradient(#888,#222);background:linear-gradient(#888,#222)}.pitch-tool .key-name{position:absolute;bottom:2%;left:0;right:0;text-align:center;color:#aaa;cursor:default;font-size:18px}