.ModeMenu_panel__AxXVO{color:#000}.ModeMenu_list__vykG9{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-padding-start:0}.ModeMenu_item__GqHKL{list-style:none;background-color:#f3f3f3}.ModeMenu_item__GqHKL.ModeMenu_selected__r_BQq{font-weight:700;color:#fff;background-color:#788b91;transition:color .3s,background-color .3s}.SettingsMenu_root__jWBGH input[type=range]{-webkit-appearance:none;position:relative;width:100%}.SettingsMenu_root__jWBGH input[type=range]::-webkit-slider-runnable-track{width:300px;height:4px;border:none;border-radius:3px}.SettingsMenu_root__jWBGH input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:#788b91;border:2px solid #455357;margin-top:-5px;cursor:pointer}.SettingsMenu_root__jWBGH input[type=range]:focus{outline:none}.SettingsMenu_root__jWBGH input[type=number],.SettingsMenu_root__jWBGH input[type=time]{border-radius:4px;background:#f3f3f3;padding:5px;border:none;width:100%}.SettingsMenu_hidden__Tg1UZ{display:none}.SettingsMenu_heading__m90wA{background-color:#788b91;height:55px;line-height:55px;padding-left:60px;font-size:2rem;position:fixed;left:0;right:0;z-index:1;top:0}.SettingsMenu_panel__YDD8T{color:#000}.SettingsMenu_noMargin__TsIXk{margin:0}.SettingsMenu_splitInput__zbOfd{display:grid;grid-template-columns:75px 1fr;margin-top:10px;margin-bottom:30px;align-items:center}.SettingsMenu_splitInput__zbOfd input[type=range]{max-width:95%;margin-left:5%;height:4px}.SettingsMenu_splitInput__zbOfd input[type=number],.SettingsMenu_splitInput__zbOfd input[type=text]{width:75px;border:none;padding:5px 10px;border-radius:4px}.SettingsMenu_list__rtekX{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-padding-start:0}.SettingsMenu_item__yO3BB{list-style:none;background-color:#f3f3f3}.SettingsMenu_item__yO3BB.SettingsMenu_selected__6czQE{font-weight:700;color:#fff;background-color:#788b91;transition:color .3s,background-color .3s}@media(min-width:768px){.SettingsMenu_rowList__jR4Gc{display:flex;flex-direction:row}.SettingsMenu_rowList__jR4Gc .SettingsMenu_item__yO3BB{flex-grow:1}.SettingsMenu_rowList__jR4Gc .SettingsMenu_item__yO3BB:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.SettingsMenu_rowList__jR4Gc .SettingsMenu_item__yO3BB:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}.SettingsMenu_menuGroup__ysNd4{border-radius:4px;border:1px solid #788b91;padding:10px;width:auto;margin-bottom:35px}@media(max-width:576px){.SettingsMenu_menuGroup__ysNd4{margin:10px 10px 35px}}.SettingsMenu_menuGroup__ysNd4 h4{color:#333;margin-top:-30px;background:#cfd8dc;width:fit-content;padding:0 5px}.SettingsMenu_sliderGroup__fkfgB{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;margin-top:12px;padding:8px 10px;background:#f3f3f3;border-radius:4px}.SettingsMenu_sliderGroup__fkfgB label{margin:0!important}.SettingsMenu_switch__4r9En{position:relative;display:inline-block;width:40px;height:20px}.SettingsMenu_switch__4r9En input{display:none}.SettingsMenu_switch__4r9En .SettingsMenu_slider__ciTkJ{position:absolute;cursor:pointer;top:4px;left:0;right:0;bottom:4px;background-color:#cfd8dc;transition:.4s}.SettingsMenu_switch__4r9En .SettingsMenu_slider__ciTkJ:before{position:absolute;content:"";height:20px;width:20px;left:0;bottom:0;right:0;top:-4px;background-color:#788b91;transition:.4s}.SettingsMenu_switch__4r9En .SettingsMenu_slider__ciTkJ.SettingsMenu_round__4X2PX{border-radius:20px;box-shadow:0 2px 7px 0 rgba(0,0,0,.2)}.SettingsMenu_switch__4r9En .SettingsMenu_slider__ciTkJ.SettingsMenu_round__4X2PX:before{border-radius:50%;box-shadow:0 2px 7px 0 rgba(0,0,0,.2)}.SettingsMenu_switch__4r9En input:checked+.SettingsMenu_slider__ciTkJ{background-color:rgb(46.4423076923,55.8653846154,58.5576923077)}.SettingsMenu_switch__4r9En input:focus+.SettingsMenu_slider__ciTkJ{box-shadow:0 0 1px rgb(177.5060240964,192.0361445783,198.4939759036)}.SettingsMenu_switch__4r9En input:checked+.SettingsMenu_slider__ciTkJ:before{transform:translateX(20px)}.Header_menu__5LuJ1{position:absolute;top:0;left:0;right:0;z-index:2}@media(min-height:500px){.Header_menu__5LuJ1{position:relative;background:#788b91;width:100%;height:55px}}.Header_title__G1xQb{height:55px;line-height:55px;padding-left:60px;font-size:2rem;text-transform:capitalize}@media(max-height:500px){.Header_title__G1xQb{display:none}}@media(min-height:500px){.Header_title__G1xQb{font-size:1.25rem}}.Header_menuIcon__9Z1Ss{position:absolute;height:75px;width:75px;top:-25px;left:-25px;background:#788b91;z-index:3;border-radius:50px;transition:top .3s,left .3s,right .3s,background .3s}.Header_menuIcon__9Z1Ss.Header_settings__HY6qs{left:unset;right:-25px}.Header_menuIcon__9Z1Ss.Header_settings__HY6qs .hamburger-box{transform:rotate(90deg);left:unset}@media(min-height:500px){.Header_menuIcon__9Z1Ss{position:absolute;top:0;left:0;height:55px;border-radius:0;width:unset;background:#788b91;border-bottom-right-radius:30px}.Header_menuIcon__9Z1Ss.Header_settings__HY6qs{top:0;right:0;left:unset;width:unset;border-bottom-right-radius:0;border-bottom-left-radius:30px}}.Header_menuInner__IyvT2{overflow:hidden;height:0;transition:height .3s ease-in-out,padding .3s;position:absolute;width:100%;top:0}.Header_menuInner__IyvT2.Header_settings__HY6qs{background-color:#cfd8dc}.Header_open__W7fh1 .Header_menuIcon__9Z1Ss{top:-20px;left:-20px}.Header_open__W7fh1 .Header_menuIcon__9Z1Ss.Header_settings__HY6qs{left:unset;right:-20px}@media(min-height:500px){.Header_open__W7fh1 .Header_menuIcon__9Z1Ss{top:0;left:0;width:unset}.Header_open__W7fh1 .Header_menuIcon__9Z1Ss.Header_settings__HY6qs{right:0}}.Header_open__W7fh1 .Header_menuInner__IyvT2{overflow-y:auto;top:0;height:100vh;padding:75px 0}.Stave_stave__4kRko{height:200px;width:100%;background-color:#f3f3f3;padding:20px;margin-top:15px;border-radius:3px}.Stave_stave__4kRko .semibreve{position:absolute;height:20px;width:40px;left:50%;top:2px;background-image:url(/icons/semibreve.svg);background-size:contain;background-position:50%;background-repeat:no-repeat}.Stave_stave__4kRko .semibreve.--{display:none}.Stave_stave__4kRko .semibreve.current{left:calc(50% - 65px)}.Stave_stave__4kRko .semibreve.sharp:after{background-image:url(/icons/sharp.svg)}.Stave_stave__4kRko .semibreve.flat:after,.Stave_stave__4kRko .semibreve.sharp:after{content:"";background-repeat:no-repeat;background-size:contain;width:40px;height:34px;display:block;margin-left:45px;margin-top:-18px}.Stave_stave__4kRko .semibreve.flat:after{background-image:url(/icons/flat.svg)}.Stave_stave__4kRko .semibreve.correct{left:calc(50% - 65px);background-image:url(/icons/semibreve-green.svg)}.Stave_stave__4kRko .semibreve.correct.sharp:after{background-image:url(/icons/sharp-green.svg)}.Stave_stave__4kRko .semibreve.correct.flat:after{background-image:url(/icons/flat-green.svg)}.Stave_stave__4kRko .semibreve.D6{top:-42px}.Stave_stave__4kRko .semibreve.C6{top:-31px}.Stave_stave__4kRko .semibreve.B5{top:-20px}.Stave_stave__4kRko .semibreve.A5{top:-9px}.Stave_stave__4kRko .semibreve.G5{top:2px}.Stave_stave__4kRko .semibreve.F5{top:13px}.Stave_stave__4kRko .semibreve.E5{top:24px}.Stave_stave__4kRko .semibreve.D5{top:35px}.Stave_stave__4kRko .semibreve.C5{top:46px}.Stave_stave__4kRko .semibreve.B4{top:57px}.Stave_stave__4kRko .semibreve.A4{top:68px}.Stave_stave__4kRko .semibreve.G4{top:79px}.Stave_stave__4kRko .semibreve.F4{top:90px}.Stave_stave__4kRko .semibreve.E4{top:101px}.Stave_stave__4kRko .semibreve.D4{top:112px}.Stave_stave__4kRko .semibreve.C4{top:123px}.Stave_stave__4kRko .semibreve.B3{top:134px}.Stave_stave__4kRko .semibreve.A3{top:145px}.Stave_stave__4kRko .semibreve.G3{top:156px}.Stave_clef__35Iz3{position:absolute;height:180px;width:100px;margin-top:-20px;background-image:url(/icons/clef.svg);background-size:contain;background-position:50%;background-repeat:no-repeat}.Stave_line__uia6Z{border-bottom:2px solid #000;width:100%;margin-bottom:20px}.Stave_line__uia6Z.Stave_short__m5Jn7{width:20%;min-width:120px;margin-left:auto;margin-right:auto}.NoteDisplay_noteDiv__H0GY_{text-transform:capitalize}.NoteDisplay_currentNoteContainer__GtCFq{margin:1vh auto 3vh;width:40vh;height:40vh;max-width:200px;max-height:200px;border-radius:50%;background-color:#f3f3f3;color:#000;text-align:center;font-size:120px;font-size:22vh;position:relative}.NoteDisplay_currentNoteContainer__GtCFq.NoteDisplay_initBtn__tvuWV{display:flex;justify-content:center;align-items:center}.NoteDisplay_currentNoteContainer__GtCFq.NoteDisplay_initBtn__tvuWV button{color:#f3f3f3;font-size:60px;font-size:13vh;background-color:#4d4365;border:0;border-radius:10px;padding-bottom:10px}.NoteDisplay_currentNoteContainer__GtCFq.NoteDisplay_initBtn__tvuWV button:hover{background-color:#434458}.NoteDisplay_currentOctaveContainer__G8Xq6{width:15vh;height:15vh;max-width:75px;max-height:75px;border-radius:50px;position:absolute;bottom:0;right:0;background-color:#cfd8dc;font-size:50px;font-size:10vh}.NoteDisplay_detuneLeftCol__Bvplu{display:flex;justify-content:flex-end;align-items:center}.NoteDisplay_detuneRightCol__OT5ys{display:flex;justify-content:flex-start;align-items:center}.NoteDisplay_detuneContainer__uhazS{height:40px;width:100%;max-width:250px;bottom:0;border:2px solid #fff;border-radius:3px;background-color:#f3f3f3;background-image:url(/icons/scaleBar.svg);background-size:100% 100%}.NoteDisplay_detuneContainerUp__8UQfU{right:15px}.NoteDisplay_detune__9uMJ8{height:100%;opacity:.6}.NoteDisplay_detuneDown__NEGgn{margin-left:auto}@media(min-height:500px){.NoteDisplay_currentNoteContainer__GtCFq{font-size:120px}.NoteDisplay_currentNoteContainer__GtCFq.NoteDisplay_initBtn__tvuWV button{font-size:60px}.NoteDisplay_currentOctaveContainer__G8Xq6{font-size:50px}}@media(min-width:576px){.NoteDisplay_currentNoteContainer__GtCFq{margin:20px auto 0}}.Footer_mode__WVUv4{position:fixed;bottom:10px;left:10px;color:#cfd8dc;font-size:22px;text-transform:capitalize;display:none}@media(max-height:500px){.Footer_mode__WVUv4{display:block}}.Footer_opts__EsTnc{position:fixed;bottom:0;right:0;display:flex}.Footer_fullscreen__S9vQ0,.Footer_metronome__zrzC4,.Footer_mic__0k2go{width:50px;height:50px;background-size:cover;background-repeat:no-repeat}.Footer_metronome__zrzC4{background-image:url(/icons/metronome.svg)}.Footer_fullscreen__S9vQ0{background-image:url(/icons/fullscreen.svg)}.Footer_fullscreen__S9vQ0.Footer_off__DE_rr{background-image:url(/icons/fullscreen-off.svg)}.Footer_mic__0k2go{background-image:url(/icons/mic-on.svg)}.Footer_mic__0k2go.Footer_off__DE_rr{background-image:url(/icons/mic-off.svg)}