@charset "UTF-8";.device_picker_lightbox .input_row{margin-top:10px}.device_picker_lightbox .midi_instrument_test_buttons{margin-top:20px}.device_picker_lightbox .midi_instrument_test_buttons>button{margin-right:10px}.device_picker_lightbox .midi_instrument_test_buttons>button:last-child{margin-right:0}.device_picker_lightbox .device_type_picker{margin-bottom:10px}.device_picker_lightbox .device_type_picker .label{margin-right:5px}@media (min-width: 900px){.ear_training_page .toggle_sidebar_button{display:none}}.ear_training_page .exercise_header{padding:20px;display:flex;align-items:center;gap:10px}@media (max-width: 900px){.ear_training_page .exercise_header{padding-bottom:0}}.ear_training_page .exercise_header>.exercise_label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.5em;margin:0}@media (max-width: 900px){.ear_training_page .exercise_header>.exercise_label{font-size:1.2em}}.ear_training_page .warning{color:#d14343;font-weight:700;margin-bottom:20px}.ear_training_page .choose_device h3{margin-top:0}.ear_training_page .slider_group{flex:1;border:1px solid #a2a2a2;border-radius:3px;display:flex;align-items:center;gap:2px;min-height:26px}.ear_training_page .slider_group>span{font-size:12px;font-weight:700}.ear_training_page .slider_group>span:first-child{padding-left:5px}.ear_training_page .slider_group code{min-width:28px;text-align:center}.ear_training_page .slider_group>.shuffle_button{padding:2px 8px;border:0;border-radius:0;font-size:12px;align-self:stretch}.ear_training_page .slider_group>.slider_component{flex:1;min-width:0}.ear_training_page .slider_group>.slider_component .slider_track{flex:1;min-width:0}.ear_training_page .melody_recognition_exercise .page_container{margin-top:20px;margin-bottom:20px}.ear_training_page .melody_recognition_exercise .interval_settings{margin:20px 0}.ear_training_page .melody_recognition_exercise .interval_settings fieldset{padding:10px}.ear_training_page .melody_recognition_exercise .interval_settings ul{list-style:none;margin:0 0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-gap:10px;align-items:start;padding:0}.ear_training_page .melody_recognition_exercise .interval_settings ul li{padding:0;margin:0}.ear_training_page .melody_recognition_exercise .autoplay_options{padding:10px}.ear_training_page .melody_recognition_exercise .autoplay_options input[type=checkbox]{margin:0 10px 0 0}.ear_training_page .melody_recognition_exercise .autoplay_options ul{list-style:none;padding:0;margin:0}.ear_training_page .melody_recognition_exercise .autoplay_options ul>li{font-size:15px;margin-bottom:15px}.ear_training_page .melody_recognition_exercise .autoplay_options ul>li label{display:flex;align-items:center}.ear_training_page .melody_recognition_exercise .autoplay_options ul>li label>*{margin-right:10px}.ear_training_page .melody_recognition_exercise .autoplay_options ul>li label>*:last-child{margin-right:0}.ear_training_page .melody_recognition_exercise .autoplay_options ul>li:last-child{margin-bottom:0}.ear_training_page .melody_recognition_exercise .song_selector .global_controls{display:flex;align-items:center}.ear_training_page .melody_recognition_exercise .song_selector .global_controls>*{margin-right:10px}.ear_training_page .melody_recognition_exercise .song_selector .global_controls>*:last-child{margin-right:0}@media (max-width: 600px){.ear_training_page .melody_recognition_exercise .song_selector .global_controls{align-items:stretch;flex-direction:column}.ear_training_page .melody_recognition_exercise .song_selector .global_controls>*{margin:0 0 10px}.ear_training_page .melody_recognition_exercise .song_selector .global_controls>*:last-child{margin:0}}.ear_training_page .melody_recognition_exercise .song_selector .current_song{margin-top:20px;background:#f3f3f3;padding:10px;display:flex;flex-direction:column;gap:10px}.ear_training_page .melody_recognition_exercise .song_selector .current_song>p{margin:0}.ear_training_page .melody_recognition_exercise .song_selector .current_song .song_title{font-weight:700;font-size:18px}.ear_training_page .melody_recognition_exercise .song_selector .current_song .song_controls{display:flex;align-items:center;gap:10px}.ear_training_page .melody_playback_exercise{min-height:100%;display:flex;flex-direction:column;gap:20px}.ear_training_page .melody_playback_exercise details.instructions{margin-bottom:10px}.ear_training_page .melody_playback_exercise details.instructions summary{cursor:pointer;font-weight:700}.ear_training_page .melody_playback_exercise .keyboard{margin-top:auto;position:static}.ear_training_page .melody_playback_exercise .page_container{margin-top:0;margin-bottom:0}.ear_training_page .melody_playback_exercise .page_container>p:first-child{margin-top:0}.ear_training_page .melody_playback_exercise .stat_controls{display:flex;align-items:center;gap:10px}.ear_training_page .melody_playback_exercise .stat_controls>.stats_row{margin-left:auto}.ear_training_page .melody_playback_exercise fieldset{margin-top:20px}.ear_training_page .melody_playback_exercise fieldset>.spacer{flex:1}.ear_training_page fieldset{border:1px solid #ddd}.ear_training_page fieldset legend{font-size:13px;font-weight:700;text-transform:uppercase;color:#666}.ear_training_page .range_picker{display:flex;align-items:center;gap:10px}.ear_training_page .range_picker button.active{background-color:#8f8fa6;box-shadow:0 0 0 2px #6f6f6f}.ear_training_page .range_picker .current_range{margin-left:auto}.ear_training_page .confirm_buttons{display:flex;margin-top:20px}.ear_training_page .confirm_buttons .spacer{flex:1}.flash_card_page .flash_card_header{display:flex;align-items:center;border-bottom:1px solid rgba(162,162,162,.5);padding:8px 20px;background:#ffffff4d}.flash_card_page .flash_card_header>.exercise_label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.flash_card_page .card_holder{text-align:center;margin:40px 0}@media (max-width: 1100px){.flash_card_page .card_holder{margin-top:0}}.flash_card_page .no_cards_error{text-align:center;padding:40px;display:block}.flash_card_page .transition_group{position:relative}.flash_card_page .transition_group>.card_row{position:absolute;top:0;left:0;right:0}.flash_card_page .transition_group>.card_row:first-child{position:static}.flash_card_page .flash_card{background:#fff;font-size:80px;display:inline-block;padding:80px 40px;font-weight:700;position:relative}@media (max-width: 1100px){.flash_card_page .flash_card{font-size:60px;display:block}}.flash_card_page .card_row.show_card-enter .flash_card{opacity:.5;transition:opacity .4s ease,transform .4s ease-out;transform:scale(.8)}.flash_card_page .card_row.show_card-enter .flash_card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#000;opacity:.5;transition:opacity .4s ease}.flash_card_page .card_row.show_card-enter.show_card-enter-active .flash_card{transform:scale(1);opacity:1}.flash_card_page .card_row.show_card-enter.show_card-enter-active .flash_card:before{opacity:0}.flash_card_page .card_row.show_card-exit .flash_card{transform:rotate(0);transition:all .4s ease-out;opacity:1}.flash_card_page .card_row.show_card-exit.show_card-exit-active .flash_card{transform:translate(-100px,50px) rotate(-40deg);opacity:0}.flash_card_page .start_message{background:#fff;padding:20px;margin:40px auto;text-align:center;max-width:400px}.flash_card_page .card_options{margin-top:40px;text-align:center}.flash_card_page .card_options>button{margin-left:15px;font-size:18px;padding:10px 20px}.flash_card_page .card_options>button:first-child{margin-left:0}@media (max-width: 1100px){.flash_card_page .card_options{position:fixed;bottom:0;left:0;right:0;margin:0;padding:10px;background:#e7e7e7cc}.flash_card_page .card_options>button{margin:5px}}.flash_card_page .settings_panel .exercise_selector{display:block}.flash_card_page .settings_panel .test_group{font-size:16px;font-weight:700;border:1px solid rgba(0,0,0,.1);padding:2px 8px;border-radius:3px;color:#666;white-space:nowrap}.flash_card_page .settings_panel .test_group.selected{background:#ffffff4d;border:1px solid rgba(0,0,0,.2)}.flash_card_page .settings_panel .test_group:last-child{margin-bottom:0}.flash_card_page .settings_panel .test_group input{margin-right:8px}.chord_identification_exercise .flash_card{padding-top:10px;padding-bottom:10px}.chord_identification_exercise .flash_card .staff{min-width:300px;font-size:12px}.guide_page{display:flex;justify-content:center;margin:60px auto}@media (max-width: 720px){.guide_page{margin:0}.guide_page .page_navigation{display:none}}.guide_page .page_container{margin:0;align-self:flex-start;padding-top:30px;padding-bottom:30px}.guide_page .page_container>h1,.guide_page .page_container h2,.guide_page .page_container h3,.guide_page .page_container h4{margin-bottom:.5em;margin-top:1em}.guide_page .page_container>h2{font-size:24px}.guide_page .page_container>h1{font-size:30px;font-weight:900}.guide_page .page_container>:first-child{margin-top:0}.guide_page .page_container p{margin-top:.5em}.guide_page .page_navigation{width:150px}.guide_page .page_navigation>section{margin-bottom:20px}.guide_page .page_navigation>section:last-child{margin-bottom:0}.guide_page .page_navigation .nav_header{font-weight:700;text-transform:uppercase;font-size:14px}.guide_page .page_navigation a.active{font-weight:700}.guide_page .page_navigation ul{list-style:none;margin:10px 0;padding:0}.guide_page .page_navigation li{margin-bottom:10px}.guide_page .page_navigation li:last-child{margin-bottom:0}.guide_page li img{vertical-align:middle}.guide_page p>code{background:#0000000d}.guide_page pre{padding:10px;border-radius:4px;background:#0000000d;box-shadow:0 0 0 1px inset #0000001a}.toggle_sidebar_button{display:inline-flex;align-items:center;cursor:pointer}.toggle_sidebar_button>.svgicon{margin-right:4px}.has_sidebar{width:auto;max-width:none;display:flex;min-height:calc(100dvh - 50px)}@media (max-width: 900px){.has_sidebar .sidebar{display:none}.has_sidebar.sidebar_open{position:relative;display:block}.has_sidebar.sidebar_open:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:#00000080;z-index:10}.has_sidebar.sidebar_open .sidebar{position:fixed;display:block;top:50px;left:0;bottom:0;z-index:11;overflow-y:auto}}.has_sidebar .content_column{flex:1;min-width:0}.has_sidebar .sidebar{width:250px;flex:none;box-sizing:border-box;background:#efefef;padding:20px}.has_sidebar .sidebar .nav_header{font-weight:700;text-transform:uppercase;font-size:12px}.has_sidebar .sidebar nav ul{list-style:none;padding:0;margin:20px 0}.has_sidebar .sidebar nav li{margin-bottom:8px}.has_sidebar .sidebar nav li:last-child{margin-bottom:0}.has_sidebar .sidebar nav a.active{text-decoration:none;font-weight:700}.keyboard{box-sizing:border-box;-moz-box-sizing:border-box;-moz-user-select:none;-webkit-user-select:none;user-select:none;position:absolute;bottom:0;left:0;right:0;height:180px;z-index:1;background:#d6d6d6;overflow:auto;border-top:1px solid #D6D6D6;white-space:nowrap;text-align:center}.settings_open .keyboard{left:270px}.keyboard .key_wrapper{position:relative;height:100%;display:inline-block;vertical-align:top}.keyboard .key.labeled:before{content:attr(data-note);position:absolute;bottom:20%;left:0;right:0;text-align:center;font-size:14px;color:#999}.keyboard .key.black{position:absolute;width:35px;left:0;top:0;margin-left:-17.5px;border-radius:0 0 8px 8px;bottom:40%;background:#333;z-index:3;box-shadow:inset 0 -15px #0000004d,inset 0 -17px #ffffff12}.keyboard .key.black:hover{background:#404040}.keyboard .key.black:active,.keyboard .key.black.active,.keyboard .key.black.held{background:#2b2b2b;box-shadow:inset 0 -10px #0000004d,inset 0 -12px #ffffff12}.keyboard .key.white{background:#fff;width:40px;height:calc(100% - 10px);margin:0 1px;border-radius:0 0 8px 8px;box-shadow:0 0 0 2px #999,inset 0 -15px #0000001a,inset 0 5px 10px -5px #0003;z-index:1}.keyboard .key.white:hover{background:#f3f3f3}.keyboard .key.white:active,.keyboard .key.white.active,.keyboard .key.white.held{background:#e6e6e6;box-shadow:0 0 0 2px #999,inset 0 -10px #0000001a,inset 0 5px 10px -5px #0003}@media (max-width: 1100px){.keyboard{height:120px}}@media (max-width: 800px){.keyboard{height:90px}.keyboard .key.black{bottom:50%}}.lightbox_shroud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#fffc;display:flex;justify-content:center;align-items:center}.lightbox_shroud.show_lightbox-enter{opacity:0;transition:opacity .2s ease}.lightbox_shroud.show_lightbox-enter .lightbox{transition:transform .2s ease-out;transform:translateY(10%)}.lightbox_shroud.show_lightbox-enter.show_lightbox-enter-active{opacity:1}.lightbox_shroud.show_lightbox-enter.show_lightbox-enter-active .lightbox{transform:translate(0)}.lightbox_shroud.show_lightbox-exit{opacity:1;transition:opacity .1s ease}.lightbox_shroud.show_lightbox-exit.show_lightbox-exit-active{opacity:0}.lightbox_shroud .lightbox{background:#fff;border:1px solid #bcbcbc;border-radius:6px;box-shadow:0 0 20px #0003;width:600px;padding:20px}@media (max-width: 600px){.lightbox_shroud .lightbox{box-sizing:border-box;width:100%;position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;border-radius:0;border:0}}.lightbox_shroud .lightbox h2{margin-top:0;color:#444}.lightbox_shroud .lightbox p{line-height:1.5}.lightbox_shroud .lightbox p:last-child{margin-bottom:0}.lightbox_shroud .lightbox .footer_buttons{margin-top:20px;display:flex}.lightbox_shroud .lightbox .footer_buttons .spacer{flex:1}@font-face{font-family:Raleway;src:url(/assets/subset-Raleway-Italic-DpPkCFTO.woff2) format("woff2"),url(/assets/subset-Raleway-Italic-DUFJDOtF.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Raleway;src:url(/assets/subset-Raleway-Black-Cg8FEC-T.woff2) format("woff2"),url(/assets/subset-Raleway-Black-CvzPQpPT.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Raleway;src:url(/assets/subset-Raleway-Bold-CXx_RD-m.woff2) format("woff2"),url(/assets/subset-Raleway-Bold-DhnPW25y.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Raleway;src:url(/assets/subset-Raleway-Regular-C85KQweg.woff2) format("woff2"),url(/assets/subset-Raleway-Regular-BGUakTG-.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}body{color:#333;background:#e7e7e7;font-family:Raleway,sans-serif;margin:0;padding:0}:focus{outline-color:#00f3}button,.button{color:#fff;font-weight:700;font-family:Raleway,sans-serif;font-size:14px;border:0;background:#727290;padding:5px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px #0003;border:1px solid #727290;cursor:pointer;text-decoration:none}button:focus,.button:focus{outline:none;box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #00f3}button:hover,.button:hover{background:#787894;color:#fff}button:disabled,.button:disabled{background:#818181;opacity:.8;cursor:default}button.outline,.button.outline{background:#fff;color:#5b5b74}button.big_button,.button.big_button{font-size:18px;padding:10px 18px}blockquote{background:#f7f7f7;padding:1em;margin:1em 0}blockquote>p{margin:0 0 1em;color:#666}blockquote>p:first-child{margin-top:0}blockquote>p:last-child{margin-bottom:0}.return_link:before{content:"←";display:inline-block;margin-right:5px;text-decoration:none}a{color:#727290}a:hover{color:#5b5b74}form .form_buttons,.form .form_buttons{margin-top:32px}form .form_error,.form .form_error{background:#d14343;color:#fff;padding:15px 20px;margin-bottom:20px}form .input_row,.form .input_row{margin-bottom:15px}form .input_row .label,.form .input_row .label{color:#666;font-weight:700;margin-bottom:5px;font-size:14px;text-transform:uppercase}form .input_row input[type=text],form .input_row input[type=password],form .input_row input[type=email],.form .input_row input[type=text],.form .input_row input[type=password],.form .input_row input[type=email]{box-sizing:border-box;-moz-box-sizing:border-box;border:1px solid #bcbcbc;font-family:Raleway,sans-serif;font-size:16px;padding:8px 16px;width:50%}form .input_row:last-child,.form .input_row:last-child{margin-bottom:0}.page_container{background:#fff;margin:60px auto;width:600px;padding:40px}@media (max-width: 640px){.page_container{margin:0;width:auto;padding:20px}}.page_container>h2{margin-top:0;font-size:32px}.page_container p{font-size:16px;line-height:1.5}.page_container>p:last-child{margin-bottom:0}.page_container>ul{font-size:16px;line-height:1.5}.page_container>ul>li{margin-bottom:8px}.page_container>ul>li:last-child{margin-bottom:0}.header_spacer{height:50px}.header{box-sizing:border-box;padding:0 20px;height:50px;background:#fff;position:fixed;top:0;left:0;right:0;z-index:9;gap:20px;width:100%;display:flex;align-items:center}.header .user_links{flex:1;display:flex;align-items:center;gap:20px;color:#666}.header .user_links>a,.header .user_links>.right_section{white-space:nowrap}.header .menu_toggle{position:relative}.header .menu_toggle button{background:transparent;padding:6px 8px;color:#666;font-size:14px;cursor:pointer}.header .menu_toggle button>svg{fill:#333;margin-left:3px;display:inline-block;vertical-align:1px}.header .menu_toggle .menu_shroud{position:fixed;top:0;right:0;bottom:0;left:0;background:#fffc;z-index:1}.header .menu_toggle .navigation_menu{z-index:2}.header .navigation_menu{position:absolute;top:100%;left:0;min-width:200px;background:#fff;margin-top:10px;border:1px solid #bcbcbc;border-radius:4px;box-shadow:0 0 20px #0003}.header .navigation_menu .midi_button_wrapper{padding:8px 10px 5px;display:flex}.header .navigation_menu .midi_button_wrapper>button{flex:1;text-align:left;display:block}.header .navigation_menu .account_area{border-bottom:1px solid #d5d5d5;display:flex;padding:8px 10px;align-items:center}.header .navigation_menu .account_area.logged_in>:first-child{flex:1}.header .navigation_menu .account_area.logged_in .username{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header .navigation_menu .account_area.logged_out>*{flex:1}.header .navigation_menu .account_area.logged_out>*:last-child{text-align:right}.header .navigation_menu ul{list-style:none;padding:0;margin:0}.header .navigation_menu ul li{margin:8px 10px}.header .navigation_menu ul li a{display:block}.header .right_section{text-align:right;flex:1}.header .logo,.header .logo_small{opacity:.7;display:block}.header .logo_small{display:none}@media (max-width: 1200px){.header .logo{display:none}.header .logo_small{display:block}}.settings_open .header button{visibility:hidden}.header h1{margin:0 20px 0 0;line-height:15px;font-size:22px;text-transform:uppercase;color:#444}.header h1 a{color:inherit;text-decoration:none}.header .logo_link{padding:0}.header a{padding:3px 6px;font-weight:700;text-decoration:none;color:#444}.header a:hover{color:#727290}.header a.active{font-weight:700;text-decoration:none;background:#f6f6f6;color:#60607a;border-radius:2px;box-shadow:0 0 0 2px #0000001a}.workspace{display:flex;justify-content:center;align-items:center;position:absolute;top:50px;left:0;right:0;bottom:0;overflow:auto}@media (max-width: 1100px){.workspace{display:block}}.keyboard_open .workspace{bottom:180px}@media (max-width: 1100px){.keyboard_open .workspace{bottom:120px}}@media (max-width: 800px){.keyboard_open .workspace{bottom:90px}}.settings_open .workspace{left:270px}.workspace h1{font-size:28px;margin:13px 0 0}@media (max-width: 1100px){.workspace h1{margin-top:25px}}.stat_container{display:inline-block;vertical-align:top;text-align:right;margin-left:15px;border-left:1px solid #d5d5d5;padding:5px 0 5px 15px}.stat_container:first-child{border-left:0}.stat_container .value{font-size:22px;margin-bottom:4px}.stat_container .label{font-size:12px;font-weight:700;text-transform:uppercase;color:#999}.staff_wrapper{background:#fff;margin:0 0 20px;padding:15px 0 10px 40px;overflow:hidden;position:relative}@media (max-width: 1100px){.staff_wrapper{border-radius:0;border-left:0;border-right:0;padding-left:20px}}.scroll_mode .staff_wrapper:before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 60px);right:0;width:120px;background:#9fffb8}.github_link{opacity:.5}.github_link:hover{opacity:1}.github_link img{width:30px;height:30px}@media (max-width: 1100px){.github_link{display:none}}@keyframes noteshake{0%,to{transform:translateY(-47%)}10%,30%,50%,70%,90%{transform:translate(-7%,-47%)}20%,40%,60%,80%{transform:translate(7%,-47%)}}.noteshake{animation-name:noteshake;animation-duration:.5s}@keyframes errorshake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5%)}20%,40%,60%,80%{transform:translate(5%)}}.errorshake{animation-name:errorshake;animation-duration:.5s}.midi_button{background:transparent;padding:6px 8px;color:#666;font-size:14px;cursor:pointer}.midi_button>div{display:flex;align-items:center}.midi_button:hover{opacity:1}.midi_button img{opacity:.6;margin-right:4px}.midi_button .current_input_name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;box-sizing:border-box;max-width:150px;color:#444;font-weight:700}.midi_button:hover{background:#f4f4f4}.tabs_component{list-style:none;display:flex;padding:0;margin:0;border-bottom:1px solid rgba(114,114,144,.8);z-index:0}.tabs_component>li{padding:0;margin:0 5px 0 0}.tabs_component>li:last-child{margin-right:0}.tabs_component>li>button{color:#5b5b74;border-color:#727290cc;border-bottom:0;border-radius:4px 4px 0 0;background:#f1f1f4;box-shadow:none}.tabs_component>li>button.active{box-shadow:0 1px #fff;z-index:1;background:#fff}.midi_instrument_picker_component .midi_options{margin-bottom:15px;display:flex}.midi_instrument_picker_component .midi_options .slider_component{margin:0 10px;width:200px}.midi_instrument_picker_component .midi_options .select_component{margin-left:10px}.midi_instrument_picker_component .midi_options>*{margin-left:30px;height:26px;display:flex;align-items:center}.midi_instrument_picker_component .midi_options>*:first-child{margin-left:0}@media (max-width: 600px){.midi_instrument_picker_component .midi_options{flex-direction:column}.midi_instrument_picker_component .midi_options>*{margin-top:10px;margin-left:0}}.midi_selector{background:#fff;border:2px solid #d5d5d5;max-height:200px;overflow-y:auto}.midi_selector .midi_input_row{padding:6px 10px;display:flex;align-items:center;cursor:pointer}.midi_selector .midi_input_row:hover{background:#f5f5f5}.midi_selector .midi_input_row:active{background:#d2d2dc}.midi_selector .midi_input_row.selected{background:#e0e0e7}.midi_selector .midi_input_row .row_icon{width:24px;opacity:.7;margin-right:5px}.midi_selector .midi_input_row .input_name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.play_along_page{overflow:hidden}.play_along_page .draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;display:flex;flex-direction:column}.play_along_page .keyboard{position:static}.play_along_page .staff_wrapper{margin-bottom:0}.play_along_page .play_along_workspace>h2{font-size:20px;background:#fff;padding:20px 20px 0 40px;margin:0}.play_along_page .play_along_workspace.settings_open{margin-left:250px}.play_along_page .transport_controls{display:flex;align-items:center;padding-right:40px}.play_along_page .transport_controls>*{margin-left:10px}.play_along_page .transport_controls>*:first-child{margin-left:0}.play_along_page .transport_controls .play_pause{min-width:60px}.play_along_page .transport_controls>button{height:28px}.play_along_page .transport_controls>button .svgicon{fill:#fff}.play_along_page .transport_controls input[type=text]{margin-left:10px;box-sizing:border-box;-moz-box-sizing:border-box;border:1px solid #bcbcbc;font-family:Raleway,sans-serif;font-size:13px;padding:4px;height:28px;width:45px;border-radius:2px;text-align:center}.play_along_page .transport_controls .loop_controls{margin-left:20px;display:flex;align-items:center}.play_along_page .transport_controls .loop_controls .label_text{font-size:13px;font-weight:700;opacity:.8}.play_along_page .transport_controls .spacer{flex:1}.play_along_page .transport_controls .transport_slider{width:200px;height:28px}.play_along_page .song_tracks{background:#fff;margin:0;padding:20px 40px;display:flex;align-items:center;list-style:none}.play_along_page .song_tracks>*{margin-right:10px;display:flex;align-items:center}.play_along_page .song_tracks>*:last-child{margin-right:0}.play_along_page .empty_tracks{margin:20px 0}.play_along_page.has_song .staff_wrapper .song_error{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffc;z-index:2;display:flex;align-items:center;justify-content:center}.play_along_page:not(.has_song) .song_error{padding:20px 0}.play_along_page .settings_panel .slider_row{display:flex}.play_along_page .settings_panel .slider_row .slider_component{flex:1}.play_along_page .settings_panel label{display:block;margin:0 10px 10px}.play_along_page .settings_panel label .input_label{font-size:13px;color:#666;font-weight:700;margin-bottom:5px}.select_component{display:inline-block;box-sizing:border-box;min-width:30px;position:relative;border:1px solid #a2a2a2;padding:4px 16px;background:#fff;border-radius:4px}.select_component:hover .selected_option{color:#444}.select_component.focused{border-color:#6f6f6f;box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #00f3}.select_component.focused .select_component{color:#444}.select_component .svgicon{margin-left:10px;fill:#a2a2a2cc}.select_component .selected_option{font-size:14px;color:#666;display:flex;align-items:center}.select_component .selected_option .selected_option_name{flex:1}.select_component .selected_option svg{margin-top:2px}.select_component select{-moz-appearance:none;-webkit-appearance:none;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.select_component select:hover{cursor:pointer}.settings_panel{box-sizing:border-box;-moz-box-sizing:border-box;-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;gap:15px;position:fixed;overflow:auto;left:0;top:50px;bottom:0;background:#d6d6d6;width:270px;border-right:2px solid #a2a2a2;z-index:1}.settings_panel.slide_right-enter{opacity:0;transform:translate(-20%);transition:opacity .2s ease,transform .2s ease}.settings_panel.slide_right-enter.slide_right-enter-active{transform:translate(0);opacity:1}.settings_panel.slide_right-exit{opacity:1;transition:opacity .1s ease}.settings_panel.slide_right-exit.slide_right-exit-active{opacity:0}.settings_panel .settings_header{padding:15px 20px;background:#a2a2a2;color:#fff;display:flex;align-items:center}.settings_panel .settings_header h3{margin:0}.settings_panel .settings_header button{margin-left:auto}.settings_panel .button_group{display:grid;grid-gap:5px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.settings_panel .toggle_option{background:#fff;border:1px solid #a2a2a2;color:#444}.settings_panel .toggle_option.active{color:#5b5b74;background:#e3e3e9;border-color:#727290;box-shadow:0 0 0 1px #727290}.settings_panel .generator_inputs{border:1px solid #a2a2a2;padding:10px;background:#ffffff80;display:flex;flex-direction:column;gap:5px}.settings_panel .generator_input .input_label{font-size:13px;color:#666;font-weight:700}.settings_panel .generator_input .select_component{display:block}.settings_panel .generator_input .slider_row{height:26px;display:flex;align-items:center}.settings_panel .generator_input .slider_row .slider_component{width:auto;flex:1}.settings_panel .generator_input .slider_row .current_value{width:20px;text-align:center}.settings_panel .generator_input .note_range_row{display:flex;margin-top:5px}.settings_panel .generator_input .note_range_row label{font-size:12px;font-weight:700;color:#666;display:flex}.settings_panel .generator_input .note_range_row label>*{margin-left:5px}.settings_panel .generator_input .note_range_row>*{flex-grow:1;align-items:center;margin-left:5px}.settings_panel .generator_input .note_range_row>*:first-child{margin-left:0}.settings_panel .settings_group{padding:0 10px}.settings_panel .settings_group h4{font-weight:700;text-transform:uppercase;color:#666;font-size:12px;margin:0 10px 10px}.sight_reading_page{background:#e7e7e7}.sight_reading_page.fullscreen{width:100%;height:100%}.sight_reading_page.fullscreen .workspace{top:0}.sight_reading_page.fullscreen .workspace_header,.sight_reading_page.fullscreen .keyboard_toggle,.sight_reading_page.fullscreen .toolbar{display:none}.sight_reading_page .workspace_header{margin-bottom:20px;display:flex;align-items:center}.sight_reading_page .workspace_header>button{margin-right:10px}.sight_reading_page .workspace_header .stats{text-align:right;flex:1}@media (max-width: 1100px){.sight_reading_page .workspace_header{margin-top:20px;padding-left:20px;padding-right:20px}}.sight_reading_page .workspace_header .stats{white-space:nowrap}.sight_reading_page .workspace_wrapper{flex:1;max-width:900px;width:100%}@media (max-width: 1100px){.sight_reading_page .workspace_wrapper{max-width:none}}.sight_reading_page .toolbar{text-align:right;margin:20px 0}@media (max-width: 1100px){.sight_reading_page .toolbar{padding:0 20px;margin-bottom:40px}}.sight_reading_page .toolbar .left_tools{float:left}.sight_reading_page .toolbar .tool{display:inline-block}.sight_reading_page .toolbar .tool .label{display:inline-block;vertical-align:middle;margin-right:5px;font-size:14px;opacity:.8}@media (max-width: 500px){.sight_reading_page .toolbar .tool .speed_picker{display:flex;margin-top:10px}}.sight_reading_page .toggle_switch{display:inline-block;vertical-align:middle;border:2px solid #333;border-radius:4px;background:#333;position:relative;font-weight:700;font-size:13px;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;user-select:none;overflow:hidden}.sight_reading_page .toggle_switch:before{position:absolute;content:"";width:50%;left:0;top:0;bottom:0;background:#727290;z-index:1;border-radius:2px;transition:.1s ease all;box-shadow:inset 0 0 0 1px #fff3}.sight_reading_page .toggle_switch.second:before{left:50%;right:2px}.sight_reading_page .toggle_switch.second .toggle_option:nth-child(1){opacity:.5}.sight_reading_page .toggle_switch.second .toggle_option:nth-child(2){opacity:1}.sight_reading_page .toggle_switch .toggle_option{display:inline-block;position:relative;z-index:2;width:60px;color:#fff;text-align:center;padding:4px 10px}.sight_reading_page .toggle_switch .toggle_option:nth-child(2){opacity:.5}.sight_reading_page .keyboard_toggle{position:absolute;z-index:2;bottom:10px;right:10px}.slider_component{display:inline-block;box-sizing:border-box;min-width:100px;position:relative;padding:5px 10px}.slider_component.disabled{opacity:.5}.slider_component.disabled .slider_nub{cursor:default}.slider_component .slider_track{background:#0000004d;height:4px;border-radius:4px;position:relative}.slider_component .slider_nub{position:absolute;padding:0;width:12px;height:12px;border-radius:12px;box-shadow:0 0 0 2px #fff;margin-top:-6px;margin-left:-6px;top:50%;left:50%}.slider_component .slider_nub:focus{box-shadow:0 0 0 2px #d6ecfc}.slider_input{border:1px solid #a2a2a2;border-radius:4px;overflow:hidden;margin-left:10px;box-sizing:border-box;-moz-box-sizing:border-box;height:27px;line-height:25px;vertical-align:top;display:inline-flex;align-items:center;background:#ffffffe6}.slider_input .slider_component{flex:1}.slider_input .slider_label{font-size:13px;font-weight:700;padding:0 4px;opacity:.8}.slider_input .slider_value{font-family:monospace;display:block;height:100%;background:#a2a2a2;color:#fff;min-width:30px;text-align:center}.song_editor{min-height:200px;padding:20px;display:flex}.song_editor .song_editor_tools{width:25%;max-width:350px;min-width:220px;margin-left:20px;flex-basis:1}.song_editor .song_editor_tools input[type=text]{width:100%;box-sizing:border-box;-moz-box-sizing:border-box}.song_editor>textarea{flex-basis:1;flex-grow:1}.song_editor .form_tools{display:flex;align-items:center}.song_editor .form_tools .select_component{height:28px;padding:0 10px;display:flex;box-sizing:border-box}.song_editor .form_tools>*{margin-left:5px}.song_editor .form_tools>:first-child{margin-left:0;flex:1}.songs_page .page_container{align-self:flex-start}.songs_page .sidebar .new_song_button{display:block;text-align:center}.songs_page .content_column{padding:20px}.songs_page .content_column>section{margin-bottom:40px}.songs_page .content_column>section h2{margin-top:0}.songs_page .content_column>section:last-child{margin-bottom:0}.songs_page .song_cell{background:#fff;padding:10px}.songs_page .song_cell .publish_status{float:right;background:#ddd;font-size:12px;font-weight:700;border-radius:4px;padding:3px 6px;margin-left:5px;color:#333c}.songs_page .song_cell .song_title{font-size:20px;margin-bottom:5px}.songs_page .song_cell .song_title a{color:#55556b;text-decoration:none}.songs_page .song_cell .time_played{font-size:14px;font-weight:700;margin-bottom:5px}.songs_page .song_cell .song_creator{opacity:.8;margin-bottom:8px}.songs_page .song_cell .song_stats{display:flex;font-size:14px;opacity:.5;justify-content:space-between}.songs_page .song_cell_list{list-style:none;padding:0;margin:0;display:grid;grid-gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.grand_staff .staff:first-child{margin-bottom:70px}.staff{position:relative;height:120px;border-left:6px solid black;margin:60px 0}.staff .cleff{z-index:1;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.staff.g_staff .cleff{position:absolute;left:14px;height:165%;top:-28%}.staff.f_staff .cleff{position:absolute;left:8px;height:82%}.staff .ledger_line{position:absolute;height:2px;background:#666}.staff .lines .line{height:2px;position:absolute;top:0;left:0;right:0;background:#666}.staff .lines .line2{top:25%}.staff .lines .line3{top:50%}.staff .lines .line4{top:75%}.staff .lines .line5{top:auto;bottom:0}.staff .key_signature{position:absolute;left:100px;top:0;bottom:0}.staff .key_signature .accidental{position:absolute;top:0}.staff .key_signature .accidental.sharp{height:78%;transform:translateY(-50%)}.staff .key_signature .accidental.flat{height:50%;transform:translate(-44%,-71%)}.staff .staff_song_notes .measure_line{width:2px;position:absolute;background:#666;top:0;bottom:0}.staff .staff_song_notes .measure_line[data-label]:before{position:absolute;content:attr(data-label);font-size:12px;font-weight:700;bottom:100%;padding-bottom:4px;color:#888}.staff .staff_song_notes .note_bar{position:absolute;top:0;left:120px;height:20%;transform:translateY(-47%)}.staff .staff_song_notes .note_bar:before{content:"";position:absolute;top:4px;right:0;bottom:4px;left:0;background:#69a25d;box-shadow:0 0 0 2px #2f3a35;border-radius:12px}.staff .staff_song_notes .note_bar.is_sharp:before{background:#a25d5d;border-radius:12px 12px 0 0}.staff .staff_song_notes .note_bar.is_flat:before{background:#5d92a2;border-radius:0 0 12px 12px}.staff .staff_song_notes .note_bar.is_natural:before{background:#915da2;border-radius:0}.staff .staff_song_notes .note_bar.held:before{background:#94e085;box-shadow:0 0 0 2px #46564f}.staff .staff_song_notes .note_bar.outside_loop:before{background:#bbb;box-shadow:none}.staff .staff_notes{position:absolute;top:0;left:120px;right:0;bottom:0}.staff .staff_notes .annotation{background:gray;color:#fff;position:absolute;padding:5px 10px;border-radius:4px;font-size:12px;font-weight:700;opacity:.5;text-shadow:0 1px 2px rgba(0,0,0,.5)}.staff .staff_notes .accidental{height:100%;position:absolute;right:110%}.staff .staff_notes .accidental.sharp{height:300%;top:-100%}.staff .staff_notes .accidental.flat{height:200%;top:-91%}.staff .staff_notes .accidental.natural{height:300%;top:-100%;right:115%}.staff .staff_notes .note{position:absolute;top:0;left:120px;height:20%;transform:translateY(-47%);transition:.1s ease transform}.staff .staff_notes .note .primary{height:100%}.staff .staff_notes .note.group_offset{margin-left:30px}.staff .staff_notes .note.held{opacity:.2;transform:scale3d(1.1,1.1,1) translateY(-47%)}.staff .time_bar{position:absolute;top:0;bottom:0;width:2px;background:red;left:220px}.chord_staff{padding:40px 20px}.chord_staff .chord_scrolling{white-space:nowrap}.chord_staff .chord{font-size:30px;font-weight:700;width:160px;display:inline-flex;align-items:center}.chord_staff .touched{margin-left:5px;font-weight:400;display:flex;height:35px;align-items:center}.chord_staff .touched .right{color:#aada80}.chord_staff .touched .wrong{color:#fe4e50}.stats_lightbox .note_bars_container,.stats_lightbox .note_timings_container{margin:30px 0;position:relative}.stats_lightbox .timing_legend{color:#999;font-size:14px;text-align:center;text-transform:uppercase;margin-left:40px;line-height:24px}.stats_lightbox .line_container{margin-left:40px;position:absolute;top:24px;right:0;bottom:0;left:0}.stats_lightbox .line_container .average_line{position:absolute;top:0;left:50%;width:2px;background:#fffc;z-index:1;bottom:0}.stats_lightbox .note_timing_row{line-height:24px;margin-bottom:10px;display:flex}.stats_lightbox .note_timing_row:last-child{margin-bottom:0}.stats_lightbox .note_timing_row .note_name{display:inline-block;font-weight:700;text-align:center;width:40px}.stats_lightbox .note_timing_row .note_timing{flex:1;position:relative;background:#34a0f280}.stats_lightbox .note_timing_row .note_timing .timing_progress{height:100%;position:absolute;top:0;left:0;background:#34a0f2}.stats_lightbox .note_timing_row .note_timing .timing_label{position:absolute;color:#fff;top:0;left:10px}.stats_lightbox .note_stat_row{line-height:24px;display:flex;margin-bottom:10px}.stats_lightbox .note_stat_row:last-child{margin-bottom:0}.stats_lightbox .note_stat_row .note_name{text-align:center;width:40px;font-weight:700}.stats_lightbox .note_stat_row .note_rates{flex:1;display:flex;height:100%}.stats_lightbox .note_stat_row .hit_bar,.stats_lightbox .note_stat_row .miss_bar{height:100%;box-sizing:border-box;padding:0 8px;font-weight:700;color:#fff;box-shadow:0 0 0 4px #fff}.stats_lightbox .note_stat_row .hit_bar{background:#95cc66}.stats_lightbox .note_stat_row .miss_bar{background:#fe4e50;text-align:right}.stats_page h2{margin-top:0}