*,:after,:before{box-sizing:border-box;font-family:Roboto;overflow:hidden}body{display:flex;margin:0}button{color:#000;font-size:18px;margin:0;padding:10px 20.2px}input[type=range]{width:20px}.container{background-color:#15171a;height:100%;left:50%;margin:0;overflow:hidden;padding-bottom:0;position:absolute;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:3}.piano{width:100%}.white{background-color:#fff;height:8vw;opacity:1;z-index:3}.black,.white{border:1px solid #333}.black{background-color:#000;height:5vw;margin-left:-.45vw;margin-right:-.45vw;z-index:4}.animated{overflow:visible;position:absolute}.noteName_black{color:#fff;display:flex;font-size:.7vw;font-weight:700;height:100%;justify-content:center;text-align:center;width:100%}.noteName_black span{align-self:flex-end;margin:5px 0;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.noteName_white{color:#000;display:flex;font-size:2vh;font-weight:700;height:100%;text-align:center;width:100%}.tzTimer{display:absolute;font-size:25px;margin-left:40px}.noteName_white span{align-self:flex-end;width:100%}.timer{margin-left:85px;margin-top:5px;position:absolute;z-index:10}.loadingMsg{display:block;font-size:50px;text-align:center}.backgroundRotateContainer{align-items:center;background-color:#000;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;width:100%;z-index:9999999}.backgroundRotateContainer h2{text-align:center;width:80%}.measureLine{background-color:#333;height:1px;overflow:inherit;position:absolute;text-align:right;width:100vw}.measureLine span{color:#fff;position:relative;right:30px}.measureLineObserver{background-color:#282c34;border:1px solid #ff0;height:1px;left:40px;position:absolute;width:5vh}.sheetMusicContainer{display:flex;height:300px;z-index:4}.OSMDsheetMusicContainer,.sheetMusicContainer{background-color:#d4d4d4;position:absolute;width:100%}.OSMDsheetMusicContainer{z-index:9}.OSMDsheetMusic{left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:top .5s ease;width:90%}.logoWatermark{bottom:8.25vw;font-size:20px;font-weight:700;height:20px;left:.25vw;opacity:.3;position:absolute;width:150px;z-index:999}@media screen and (max-width:500px){button{padding:10px 20.6px}}@media screen and (max-height:500px){button{font-size:16px;padding:5px 10.7px}.timer{font-size:26px;margin-left:55px}.black,.white{border:.5px solid #333}.logoWatermark{bottom:8vw;font-size:14px;left:.25vw}}button{border:.5px solid #333;cursor:pointer;display:block;outline:none}.PlayerControls_controlsContainer__GlQYH{overflow:visible;position:absolute;width:60px;z-index:1000}.PlayerControls_controlsContainer__GlQYH h1,h2{text-align:center}.PlayerControls_controlsContainer__GlQYH button{border-radius:0}.PlayerControls_controlsContainer__GlQYH input[type=color]{border:none;height:30px;margin:5px;padding:1px;width:30px}.PlayerControls_controlsContainer__GlQYH span{margin-left:20px}.PlayerControls_inner_btn__95PEa{display:inline-block;margin:10px}.PlayerControls_exit_btn__OM6JE{padding:6px 10px;position:absolute;right:0}.PlayerControls_speedButtonContainer__\+fgfT button{align-items:center;display:flex;font-size:.9rem;justify-content:center;width:100%}.PlayerControls_cosmeticsBox__QMH7A h3{text-align:center}.PlayerControls_cosmeticsBox__QMH7A input{padding:0;text-align:center}.PlayerControls_settingsBox__gqwtx{background-color:#1e1e1e;border:3px solid #fff;left:60px;max-height:80vh;overflow:auto;position:absolute;width:550px;z-index:999}.PlayerControls_settingsBox__gqwtx h3{text-align:center}.PlayerControls_settings__k1xju span,input{margin:10px}.PlayerControls_color-picker-container__04iGX{display:flex;justify-content:space-between;padding:20px}.PlayerControls_color-picker-container__04iGX>div{align-items:center;display:flex;flex:1 1;flex-direction:column;padding:10px}.PlayerControls_thumb__R8TXZ{position:absolute}.PlayerControls_pianoRangeContainer__iULd1{display:inline-flex;gap:10px}.PlayerControls_pianoRangeContainer__iULd1 span{align-content:center;margin:0}.PlayerControls_pianoRangeContainer__iULd1 button{padding:1px 8px}.PlayerControls_pianoRangeSettings__EYyN4{margin-top:10px;text-align:center}.PlayerControls_pianoRangeSettings__EYyN4 h3{color:red}.PlayerControls_tileColorContainer__8NmdU{margin:20px 0}.PlayerControls_inlineBox__xFyBL{display:inline-flex}.PlayerControls_inlineBox__xFyBL span{align-content:center}.PlayerControls_inlineBox__xFyBL input[type=range]{align-content:center;width:100px}.PlayerControls_disabledDiv__0lK39{opacity:.5;pointer-events:none}.PlayerControls_buttonControlsContainer__Z1XP8{width:100%}.PlayerControls_buttonControlsContainer__Z1XP8 button{display:inline-block;margin:3px;padding:0 7px}@media screen and (max-height:500px){.PlayerControls_controlsContainer__GlQYH{width:38px}.PlayerControls_speedButtonContainer__\+fgfT button{font-size:.725rem}.PlayerControls_settingsBox__gqwtx{font-size:.9rem;left:38px}}@media screen and (max-width:500px){.PlayerControls_settingsBox__gqwtx{border:2px solid #fff;left:0;max-height:70vh;width:100vw}.PlayerControls_exit_btn__OM6JE{left:0;width:40px}}.custom-range-container{height:82%;overflow:visible;position:absolute;right:0;width:30px;z-index:10}.custom-range-container button{border-radius:5px;margin:0 auto;padding:3px}.custom-range-container input[type=range]{-webkit-appearance:none;appearance:none;border-radius:5px;height:22px;margin:0;outline:none;position:absolute;right:.75vh;top:4vh;-webkit-transform:rotate(270deg) translateY(-100%);transform:rotate(270deg) translateY(-100%);-webkit-transform-origin:top right;transform-origin:top right;width:79vh}.custom-range-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #4caf50;border-radius:50%;cursor:pointer;height:20px;overflow:visible;width:20px;z-index:20}.custom-range-container input[type=range]::-moz-range-thumb{background:#fff;border:2px solid #4caf50;border-radius:50%;cursor:pointer;height:20px;overflow:visible;width:20px;z-index:20}@media screen and (max-height:500px){.custom-range-container input[type=range]{right:1vh;top:8vh;-webkit-transform:rotate(270deg) translateY(-100%);transform:rotate(270deg) translateY(-100%);width:72vh}.custom-range-container button{padding:3px}}.OrientationLines_container__u3IhE{background-color:initial;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.OrientationLines_divider__aeDOd{height:100%;opacity:.5;overflow:visible;position:absolute;top:0;width:2px}.OrientationLines_halfStep__z9X40{background-color:#363636}.OrientationLines_inter__DUcq1{background-color:#202020}@media screen and (max-width:500px){.OrientationLines_divider__aeDOd{opacity:.7px;width:1px}}.Keys_keysContainer__gaU3h{bottom:0;display:flex;left:0;position:absolute;width:100%;z-index:10;z-index:99}.MeasureLines_measureLine__UY5i9{background-color:#333;height:1px;overflow:inherit;position:absolute;text-align:right;width:100vw;z-index:1}.MeasureLines_measureLine__UY5i9 span{color:#fff;position:relative;right:30px}.MeasureLines_measureLineObserver__HrkTn{height:1px;left:40px;position:absolute;visibility:hidden;width:5vh}.SustainLines_sustainLine__MJaCo{height:1px;overflow:inherit;position:absolute;text-align:right;width:100vw;z-index:2}.SustainLines_sustainLineObserver__CQP3n{border:2px solid red;height:1px;left:80px;position:absolute;visibility:hidden;width:5vh}.StartCover_startCoverBackground__4V\+sq{background-color:rgba(51,51,51,.75);height:100%;position:absolute;text-align:center;width:100%;z-index:9999}.StartCover_startCover__FWoY2 button{display:inline-block}.StartCover_startCover__FWoY2{background-color:#1e1e1e;height:100%;margin:0 auto;overflow:auto;position:relative;text-align:center;width:100%;z-index:5}.StartCover_materialSelectionContainer__SAYVJ{align-items:center;display:flex;gap:10px;justify-content:center;margin-bottom:50px}.StartCover_materialSelectionContainer__SAYVJ a{color:#fff;margin:5px}.StartCover_modeSelectionContainer__N0e5a{display:flex;gap:40px;justify-content:center;margin-bottom:30px}.StartCover_modeSelectionContainer__N0e5a div{background-color:grey;cursor:pointer;padding:50px}.StartCover_modeSelectionContainer__N0e5a div:hover{background-color:#934add}.StartCover_learningModeContainer__dLzvD{display:flex;gap:30px;justify-content:center;margin-bottom:20px}.StartCover_learningModeContainer__dLzvD div{background-color:grey;cursor:pointer;padding:20px}.StartCover_learningModeContainer__dLzvD div:hover{background-color:#934add}.StartCover_handsContainer__bVs3t{align-items:center;display:flex;font-size:30px;gap:30px;justify-content:center;margin-bottom:20px}.StartCover_handsContainer__bVs3t div{background-color:grey;cursor:pointer;padding:15px 15px 10px}.StartCover_handsContainer__bVs3t div:hover{background-color:#934add}.StartCover_crText__JDY88{bottom:10px;left:0;position:absolute;right:0}.StartCover_earlyAccess__tOPmR{bottom:0;color:#e12b2b;font-size:20px;font-weight:700;position:absolute;right:20px}@media screen and (max-width:500px){.StartCover_modeSelectionContainer__N0e5a{margin:20px 15px}.StartCover_modeSelectionContainer__N0e5a div{padding:10px}.StartCover_materialSelectionContainer__SAYVJ{margin-bottom:30px}.StartCover_learningModeContainer__dLzvD div{padding:10px}.StartCover_handsContainer__bVs3t{margin-bottom:30px;margin-top:30px}.StartCover_handsContainer__bVs3t div{padding:8px 8px 5px}.StartCover_crText__JDY88{font-size:11px}select{grid-template-columns:1fr;width:150px}.StartCover_earlyAccess__tOPmR{bottom:15px;font-size:14px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@media screen and (max-height:500px){h1{margin:10px}.StartCover_modeSelectionContainer__N0e5a{margin-bottom:10px}.StartCover_modeSelectionContainer__N0e5a div{padding:10px}.StartCover_materialSelectionContainer__SAYVJ{margin-bottom:10px}.StartCover_learningModeContainer__dLzvD div{padding:10px}.StartCover_learningModeContainer__dLzvD{margin-bottom:10px}.StartCover_handsContainer__bVs3t{font-size:25px;margin-bottom:10px}.StartCover_handsContainer__bVs3t div{padding:10px 10px 5px}.StartCover_crText__JDY88{margin-top:30px;position:relative}}body{background-color:#000;color:#fff}.WelcomeScreen_container__-LsD1{align-items:center;background-position:50%;background-size:cover;display:flex;flex-direction:column;height:100vh;justify-content:center;overflow:hidden;width:100vw}.WelcomeScreen_title__h3RHK{-webkit-animation:WelcomeScreen_slideDown__OsYQK 1s ease-out forwards;animation:WelcomeScreen_slideDown__OsYQK 1s ease-out forwards;color:#fff;font-size:3rem;opacity:0;text-align:center}.WelcomeScreen_button__oUDi9{-webkit-animation:WelcomeScreen_fadeIn__fIuUF 2s ease-out forwards;animation:WelcomeScreen_fadeIn__fIuUF 2s ease-out forwards;background-color:#28a745;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;margin-top:1rem;opacity:0;padding:.8rem 2rem}@-webkit-keyframes WelcomeScreen_slideDown__OsYQK{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes WelcomeScreen_slideDown__OsYQK{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes WelcomeScreen_fadeIn__fIuUF{0%{opacity:0}to{opacity:1}}@keyframes WelcomeScreen_fadeIn__fIuUF{0%{opacity:0}to{opacity:1}}