@font-face{font-family:Raleway;src:url(/static/fonts/Raleway/subset-Raleway-Italic.woff2) format("woff2"),url(/static/fonts/Raleway/subset-Raleway-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Raleway;src:url(/static/fonts/Raleway/subset-Raleway-Black.woff2) format("woff2"),url(/static/fonts/Raleway/subset-Raleway-Black.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Raleway;src:url(/static/fonts/Raleway/subset-Raleway-Bold.woff2) format("woff2"),url(/static/fonts/Raleway/subset-Raleway-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Raleway;src:url(/static/fonts/Raleway/subset-Raleway-Regular.woff2) format("woff2"),url(/static/fonts/Raleway/subset-Raleway-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}:root{--border-color: #a2a2a2;--upper-layer-z-index: 10;--keyboard-height: 180px;--keyboard-height-short: 120px;--keyboard-height-very-short: 90px;--button-color: #727290;--button-color-highlight: #e0e0e7;--default-width: 900px;--line-spacing: 30px;--body-background: #e7e7e7;--body-color: #333333;--settings-panel-width: 270px;--red: #fe4e50;--green: #aada80;--blue: #34a0f2;--error-color: #d14343;--header-height: 50px}body{color:var(--body-color);background:var(--body-background);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:var(--button-color);padding:5px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px #0003;border:1px solid var(--button-color);cursor:pointer;text-decoration:none;&:focus{outline:none;box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #00f3}&:hover{background:color-mix(in oklab,var(--button-color),white 2%);color:#fff}&:disabled{background:color-mix(in oklab,var(--button-color),white 55%);opacity:.8;cursor:default}&.outline{background:#fff;color:color-mix(in oklab,var(--button-color),black 10%)}&.big_button{font-size:18px;padding:10px 18px}}blockquote{background:#f7f7f7;padding:1em;margin:1em 0;>p{margin:0 0 1em;color:#666;&:first-child{margin-top:0}&:last-child{margin-bottom:0}}}a{color:var(--button-color);&:hover{color:color-mix(in oklab,var(--button-color),black 10%)}}.header_spacer{height:50px}.slider_slider_component{display:inline-block;box-sizing:border-box;min-width:100px;position:relative;padding:5px 10px;&.slider_disabled{opacity:.5;.slider_slider_nub{cursor:default}}.slider_slider_track{background:#0000004d;height:4px;border-radius:4px;position:relative}.slider_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%;&:focus{box-shadow:0 0 0 2px color-mix(in oklab,var(--blue),white 20%)}}}.slider_slider_input{border:1px solid var(--border-color);border-radius:4px;overflow:hidden;margin-left:10px;box-sizing:border-box;height:27px;line-height:25px;vertical-align:top;display:inline-flex;align-items:center;background:#ffffffe6;.slider_component{flex:1}.slider_slider_label{font-size:13px;font-weight:700;padding:0 4px;opacity:.8}.slider_slider_value{font-family:monospace;display:block;height:100%;background:var(--border-color);color:#fff;min-width:30px;text-align:center}}.keyboard_keyboard{--white-key-width: 40px;--black-key-width: 35px;box-sizing:border-box;user-select:none;position:absolute;bottom:0;left:0;right:0;height:var(--keyboard-height);z-index:1;.settings_open &{left:var(--settings-panel-width)}background:#d6d6d6;overflow:auto;border-top:1px solid #D6D6D6;white-space:nowrap;text-align:center;.keyboard_key_wrapper{position:relative;height:100%;display:inline-block;vertical-align:top}.keyboard_key{&.keyboard_labeled:before{content:attr(data-note);position:absolute;bottom:20%;left:0;right:0;text-align:center;font-size:14px;color:#999}&.keyboard_black{position:absolute;width:var(--black-key-width);left:0;top:0;margin-left:calc(var(--black-key-width) / -2);border-radius:0 0 8px 8px;bottom:40%;background:#333;z-index:3;box-shadow:inset 0 -15px #0000004d,inset 0 -17px #ffffff12;&:hover{background:color-mix(in oklab,#333,white 5%)}&:active,&.keyboard_active,&.keyboard_held{background:color-mix(in oklab,#333,black 3%);box-shadow:inset 0 -10px #0000004d,inset 0 -12px #ffffff12}}&.keyboard_white{background:#fff;width:var(--white-key-width);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;&:hover{background:#f3f3f3}&:active,&.keyboard_active,&.keyboard_held{background:color-mix(in oklab,#f3f3f3,black 5%);box-shadow:0 0 0 2px #999,inset 0 -10px #0000001a,inset 0 5px 10px -5px #0003}}}@media(max-width:1100px){height:var(--keyboard-height-short)}@media(max-width:800px){height:var(--keyboard-height-very-short);.keyboard_key.keyboard_black{bottom:50%}}}.lightbox_lightbox{background:transparent;border:none;padding:30px;margin:auto;max-width:calc(100vw - 60px);max-height:calc(100vh - 60px);&::backdrop{background:#fffc;animation:lightbox_backdrop-fade-in .2s ease}&[open]{animation:lightbox_dialog-slide-in .2s ease-out}.lightbox_lightbox_content{background:#fff;border:1px solid color-mix(in oklab,var(--border-color),white 10%);border-radius:6px;box-shadow:0 0 20px #0003;width:600px;max-width:100%;padding:20px;h2{margin-top:0;color:#444}p{line-height:1.5;&:last-child{margin-bottom:0}}}@media(max-width:600px){padding:0;max-width:100vw;max-height:100vh;.lightbox_lightbox_content{box-sizing:border-box;width:100vw;height:100vh;border-radius:0;border:0;overflow:auto;box-shadow:none}}}@keyframes lightbox_backdrop-fade-in{0%{opacity:0}to{opacity:1}}@keyframes lightbox_dialog-slide-in{0%{transform:translateY(10%);opacity:0}to{transform:translate(0);opacity:1}}.tabs_tabs_component{list-style:none;display:flex;padding:0;margin:0;border-bottom:1px solid color-mix(in srgb,var(--button-color),transparent 20%);z-index:0;>li{padding:0;margin:0 5px 0 0;&:last-child{margin-right:0}>button{color:color-mix(in oklab,var(--button-color),black 10%);border-color:color-mix(in srgb,var(--button-color),transparent 20%);border-bottom:0;border-radius:4px 4px 0 0;background:color-mix(in oklab,var(--button-color),white 90%);box-shadow:none;&.tabs_active{box-shadow:0 1px #fff;z-index:1;background:#fff}}}}.stats_lightbox_stats_lightbox{--note-column-width: 40px;.stats_lightbox_note_bars_container,.stats_lightbox_note_timings_container,.stats_lightbox_progress_container{margin:30px 0;position:relative}.stats_lightbox_progress_summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px;>div{border:1px solid color-mix(in srgb,white,transparent 75%);padding:12px}strong{display:block;font-size:24px;line-height:1.1}span{color:#bbb;display:block;font-size:13px;margin-top:4px}}.stats_lightbox_progress_container h3{font-size:16px;margin:0 0 12px}.stats_lightbox_progress_actions{align-items:center;border-top:1px solid color-mix(in srgb,white,transparent 85%);display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:16px;a{color:#fff}button{margin:0}}.stats_lightbox_progress_message,.stats_lightbox_progress_error{color:#bbb;font-size:13px}.stats_lightbox_progress_error{color:var(--red)}.stats_lightbox_progress_row{align-items:center;display:grid;grid-template-columns:var(--note-column-width) minmax(140px,1fr) minmax(120px,1fr);gap:12px;margin-bottom:12px;.stats_lightbox_note_name{font-weight:700;text-align:center}.stats_lightbox_progress_details{min-width:0;strong,span{display:block}span{color:#bbb;font-size:13px;overflow-wrap:anywhere}}.stats_lightbox_progress_meter{background:color-mix(in srgb,var(--red),transparent 70%);height:16px;span{background:color-mix(in oklab,var(--green),black 8%);display:block;height:100%}}}.stats_lightbox_timing_legend{color:#999;font-size:14px;text-align:center;text-transform:uppercase;margin-left:var(--note-column-width);line-height:24px}.stats_lightbox_line_container{margin-left:var(--note-column-width);position:absolute;inset:24px 0 0;.stats_lightbox_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;&:last-child{margin-bottom:0}.stats_lightbox_note_name{display:inline-block;font-weight:700;text-align:center;width:var(--note-column-width)}.stats_lightbox_note_timing{flex:1;position:relative;background:color-mix(in srgb,var(--blue),transparent 50%);.stats_lightbox_timing_progress{height:100%;position:absolute;top:0;left:0;background:var(--blue)}.stats_lightbox_timing_label{position:absolute;color:#fff;top:0;left:10px}}}.stats_lightbox_note_stat_row{line-height:24px;display:flex;margin-bottom:10px;&:last-child{margin-bottom:0}.stats_lightbox_note_name{text-align:center;width:var(--note-column-width);font-weight:700}.stats_lightbox_note_rates{flex:1;display:flex;height:100%}.stats_lightbox_hit_bar,.stats_lightbox_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_hit_bar{background:color-mix(in oklab,var(--green),black 8%)}.stats_lightbox_miss_bar{background:var(--red);text-align:right}}.stats_lightbox_footer_buttons{margin-top:20px;display:flex}.stats_lightbox_spacer{flex:1}}.sight_reading_page_sight_reading_page{background:var(--body-background);.sight_reading_page_workspace{display:flex;@media(max-width:1100px){display:block}justify-content:center;align-items:center;position:absolute;inset:50px 0 0;overflow:auto}&.keyboard_open .sight_reading_page_workspace{bottom:var(--keyboard-height);@media(max-width:1100px){bottom:var(--keyboard-height-short)}@media(max-width:800px){bottom:var(--keyboard-height-very-short)}}&.settings_open .sight_reading_page_workspace{left:var(--settings-panel-width)}&.sight_reading_page_fullscreen{width:100%;height:100%;.sight_reading_page_workspace{top:0}.sight_reading_page_workspace_header,.sight_reading_page_keyboard_toggle,.sight_reading_page_toolbar{display:none}}.sight_reading_page_workspace_header{margin-bottom:20px;display:flex;align-items:center;>button{margin-right:10px}.sight_reading_page_stats{text-align:right;flex:1}@media(max-width:1100px){margin-top:20px;padding-left:20px;padding-right:20px}.sight_reading_page_stats{white-space:nowrap}}.sight_reading_page_workspace_wrapper{flex:1;max-width:var(--default-width);width:100%;@media(max-width:1100px){max-width:none}}.sight_reading_page_practice_coach{margin:-8px 0 16px;display:flex;align-items:center;gap:16px;@media(max-width:1100px){padding:0 20px}@media(max-width:600px){align-items:stretch;flex-direction:column;gap:8px}.sight_reading_page_coach_text{min-width:220px;font-size:14px;color:#333;strong{display:block;font-size:15px;margin-bottom:2px}span{color:#777;font-size:12px;font-weight:700;text-transform:uppercase}}.sight_reading_page_goal_meter{height:8px;flex:1;border-radius:4px;overflow:hidden;background:color-mix(in oklab,var(--border-color),white 70%);span{display:block;height:100%;min-width:3px;background:var(--button-color);transition:width .15s ease}}.sight_reading_page_coach_action{flex:none;white-space:nowrap;font-size:13px}}.sight_reading_page_toolbar{margin:20px 0;display:flex;align-items:center;justify-content:end;gap:10px;@media(max-width:1100px){padding:0 20px;margin-bottom:40px}@media(max-width:500px){flex-direction:column;align-items:flex-end}>.sight_reading_page_labeled_tool{display:flex;align-items:center;gap:5px;.sight_reading_page_label{font-size:14px;opacity:.8}}>.slider_input{margin:0}}.sight_reading_page_toggle_switch{flex:none;border:2px solid #333;border-radius:4px;background:#333;position:relative;font-weight:700;font-size:13px;cursor:pointer;user-select:none;overflow:hidden;&:before{position:absolute;content:"";width:50%;left:0;top:0;bottom:0;background:var(--button-color);z-index:1;border-radius:2px;transition:.1s ease all;box-shadow:inset 0 0 0 1px #fff3}&.sight_reading_page_second{&:before{left:50%;right:2px}.sight_reading_page_toggle_option{&:nth-child(1){opacity:.5}&:nth-child(2){opacity:1}}}.sight_reading_page_toggle_option{&:nth-child(2){opacity:.5}display:inline-block;position:relative;z-index:2;width:60px;color:#fff;text-align:center;padding:4px 10px}}.sight_reading_page_keyboard_toggle{position:absolute;z-index:2;bottom:10px;right:10px}&.sight_reading_page_scroll_mode{.sight_reading_page_staff_wrapper{&:before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 60px);right:0;width:120px;background:#9fffb8}}}}.staff_staff_wrapper{background:#fff;margin:0 0 20px;padding:15px 0 10px 40px;overflow:hidden;position:relative;@media(max-width:1100px){border-radius:0;border-left:0;border-right:0;padding-left:20px}}.staff_grand_staff{.staff_staff{&:first-child{margin-bottom:70px}}}.staff_staff{position:relative;height:calc(var(--line-spacing) * 4);border-left:6px solid black;margin:calc(var(--line-spacing) * 2) 0 calc(var(--line-spacing) * 2) 0;.staff_cleff{z-index:1;user-select:none;-webkit-user-drag:none}&.staff_g_staff{.staff_cleff{position:absolute;left:14px;height:165%;top:-28%}}&.staff_f_staff{.staff_cleff{position:absolute;left:8px;height:82%}}.staff_ledger_line{position:absolute;height:2px;background:#666}.staff_lines{.staff_line{height:2px;position:absolute;top:0;left:0;right:0;background:#666}.staff_line2{top:25%}.staff_line3{top:50%}.staff_line4{top:75%}.staff_line5{top:auto;bottom:0}}.staff_key_signature{position:absolute;left:100px;top:0;bottom:0;.staff_accidental{position:absolute;top:0;&.staff_sharp{height:78%;transform:translateY(-50%)}&.staff_flat{height:50%;transform:translate(-44%,-71%)}}}.staff_staff_song_notes{.staff_measure_line{width:2px;position:absolute;background:#666;top:0;bottom:0;&[data-label]{&:before{position:absolute;content:attr(data-label);font-size:12px;font-weight:700;bottom:100%;padding-bottom:4px;color:#888}}}.staff_note_bar{position:absolute;top:0;left:120px;height:20%;transform:translateY(-47%);&:before{content:"";position:absolute;inset:4px 0;background:#69a25d;box-shadow:0 0 0 2px #2f3a35;border-radius:12px}&.staff_is_sharp{&:before{background:#a25d5d;border-radius:12px 12px 0 0}}&.staff_is_flat{&:before{background:#5d92a2;border-radius:0 0 12px 12px}}&.staff_is_natural{&:before{background:#915da2;border-radius:0}}&.staff_held{&:before{background:#94e085;box-shadow:0 0 0 2px color-mix(in oklab,#2f3a35,white 10%)}}&.staff_outside_loop{&:before{background:#bbb;box-shadow:none}}}}.staff_staff_notes{position:absolute;inset:0 0 0 120px;.staff_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_accidental{height:100%;position:absolute;right:110%;&.staff_sharp{height:300%;top:-100%}&.staff_flat{height:200%;top:-91%}&.staff_natural{height:300%;top:-100%;right:115%}}.staff_note{position:absolute;top:0;left:120px;height:20%;transform:translateY(-47%);transition:.1s ease transform;.staff_primary{height:100%}&.staff_group_offset{margin-left:30px}&.staff_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}}.staff_chord_staff{padding:40px 20px;.staff_chord_scrolling{white-space:nowrap}.staff_chord{font-size:30px;font-weight:700;width:160px;display:inline-flex;align-items:center}.staff_touched{margin-left:5px;font-weight:400;display:flex;height:35px;align-items:center;.staff_right{color:var(--green)}.staff_wrong{color:var(--red)}}}@keyframes staff_noteshake{0%,to{transform:translateY(-47%)}10%,30%,50%,70%,90%{transform:translate(-7%,-47%)}20%,40%,60%,80%{transform:translate(7%,-47%)}}.staff_noteshake{animation-name:staff_noteshake;animation-duration:.5s}@keyframes staff_errorshake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5%)}20%,40%,60%,80%{transform:translate(5%)}}.staff_errorshake{animation-name:staff_errorshake;animation-duration:.5s}.shared_stat_container{display:inline-block;vertical-align:top;text-align:right;margin-left:15px;border-left:1px solid color-mix(in oklab,var(--border-color),white 20%);padding:5px 0 5px 15px;&:first-child{border-left:0}.shared_value{font-size:22px;margin-bottom:4px}.shared_label{font-size:12px;font-weight:700;text-transform:uppercase;color:#999}}.select_select_component{display:inline-block;box-sizing:border-box;min-width:30px;position:relative;border:1px solid var(--border-color);padding:4px 16px;background:#fff;border-radius:4px;&:hover{.select_selected_option{color:#444}}&.select_focused{border-color:color-mix(in oklab,var(--border-color),black 20%);box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #00f3;.select_select_component{color:#444}}.svgicon{margin-left:10px;fill:color-mix(in srgb,var(--border-color),transparent 20%)}.select_selected_option{font-size:14px;color:#666;display:flex;align-items:center;.select_selected_option_name{flex:1}svg{margin-top:2px}}select{-moz-appearance:none;-webkit-appearance:none;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;&:hover{cursor:pointer}}}.settings_panel_settings_panel{box-sizing:border-box;user-select:none;display:flex;flex-direction:column;gap:15px;position:fixed;overflow:auto;left:0;top:var(--header-height);bottom:0;background:#d6d6d6;width:var(--settings-panel-width);border-right:2px solid var(--border-color);z-index:1;&.slide_right-enter{opacity:0;transform:translate(-20%);transition:opacity .2s ease,transform .2s ease;&.slide_right-enter-active{transform:translate(0);opacity:1}}&.slide_right-exit{opacity:1;transition:opacity .1s ease;&.slide_right-exit-active{opacity:0}}.settings_panel_settings_header{padding:15px 20px;background:var(--border-color);color:#fff;display:flex;align-items:center;h3{margin:0}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 var(--border-color);color:#444;&.settings_panel_active{color:color-mix(in oklab,var(--button-color),black 10%);background:color-mix(in oklab,var(--button-color),white 80%);border-color:var(--button-color);box-shadow:0 0 0 1px var(--button-color)}}.settings_panel_assignment_list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.settings_panel_assignment_button{background:#fff;border:1px solid var(--border-color);color:#444;display:block;padding:8px 10px;text-align:left;strong,span{display:block}span{color:#666;font-size:12px;margin-top:2px}}.settings_panel_assignment_form{display:grid;gap:8px;label{color:#666;display:grid;font-size:12px;font-weight:700;gap:3px}}.settings_panel_generator_inputs{border:1px solid var(--border-color);padding:10px;background:#ffffff80;display:flex;flex-direction:column;gap:5px}.settings_panel_generator_input{.settings_panel_input_label{font-size:13px;color:#666;font-weight:700}.settings_panel_select_component{display:block}.settings_panel_slider_row{height:26px;display:flex;align-items:center;.slider_component{width:auto;flex:1}.settings_panel_current_value{width:20px;text-align:center}}.settings_panel_note_range_row{display:flex;margin-top:5px;label{font-size:12px;font-weight:700;color:#666;display:flex;>*{margin-left:5px}}>*{flex-grow:1;align-items:center;margin-left:5px;&:first-child{margin-left:0}}}}.settings_panel_settings_group{padding:0 10px;h4{font-weight:700;text-transform:uppercase;color:#666;font-size:12px;margin:0 10px 10px}}}.staff_two_notes_staff{>svg{display:block}}.form_form_buttons{margin-top:32px}.form_form_error{background:var(--error-color);color:#fff;padding:15px 20px;margin-bottom:20px}.form_input_row{margin-bottom:15px;.form_label{color:#666;font-weight:700;margin-bottom:5px;font-size:14px;text-transform:uppercase}input[type=text],input[type=password],input[type=email]{box-sizing:border-box;border:1px solid color-mix(in oklab,var(--border-color),white 10%);font-family:Raleway,sans-serif;font-size:16px;padding:8px 16px;width:50%}&:last-child{margin-bottom:0}}.page_container_page_container{background:#fff;margin:60px auto;width:600px;padding:40px;@media(max-width:640px){margin:0;width:auto;padding:20px}>h2{margin-top:0;font-size:32px}p{font-size:16px;line-height:1.5}>p:last-child{margin-bottom:0}>ul{font-size:16px;line-height:1.5;>li{margin-bottom:8px;&:last-child{margin-bottom:0}}}}.guide_pages_guide_page{display:flex;justify-content:center;margin:60px auto;@media(max-width:720px){margin:0;.guide_pages_page_navigation{display:none}}.guide_pages_page_navigation{width:150px;>section{margin-bottom:20px;&:last-child{margin-bottom:0}}.guide_pages_nav_header{font-weight:700;text-transform:uppercase;font-size:14px}a.guide_pages_active{font-weight:700}ul{list-style:none;margin:10px 0;padding:0}li{margin-bottom:10px;&:last-child{margin-bottom:0}}}li img{vertical-align:middle}p{>code{background:#0000000d}}pre{padding:10px;border-radius:4px;background:#0000000d;box-shadow:0 0 0 1px inset #0000001a}}.guide_pages_page_container{margin:0;align-self:flex-start;padding-top:30px;padding-bottom:30px;>h1,h2,h3,h4{margin-bottom:.5em;margin-top:1em}>h2{font-size:24px}>h1{font-size:30px;font-weight:900}>:first-child{margin-top:0}p{margin-top:.5em}}.stats_stats_page{h2{margin-top:0}}.flash_cards_flash_card_page{.flash_cards_flash_card_header{display:flex;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--border-color),transparent 50%);padding:8px 20px;background:#ffffff4d;>.flash_cards_exercise_label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}}.flash_cards_card_holder{text-align:center;margin:40px 0;@media(max-width:1100px){margin-top:0}}.flash_cards_no_cards_error{text-align:center;padding:40px;display:block}.flash_cards_transition_group{position:relative;>.flash_cards_card_row{position:absolute;top:0;left:0;right:0;&:first-child{position:static}}}.flash_cards_flash_card{background:#fff;font-size:80px;display:inline-block;padding:80px 40px;font-weight:700;position:relative;@media(max-width:1100px){font-size:60px;display:block}}.flash_cards_card_row{--card-transition-speed: .4s;&.show_card-enter{.flash_cards_flash_card{opacity:.5;transition:opacity var(--card-transition-speed) ease,transform var(--card-transition-speed) ease-out;transform:scale(.8);&:before{content:"";position:absolute;inset:0;background:#000;opacity:.5;transition:opacity var(--card-transition-speed) ease}}&.show_card-enter-active{.flash_cards_flash_card{transform:scale(1);opacity:1;&:before{opacity:0}}}}&.show_card-exit{.flash_cards_flash_card{transform:rotate(0);transition:all var(--card-transition-speed) ease-out;opacity:1}&.show_card-exit-active{.flash_cards_flash_card{transform:translate(-100px,50px) rotate(-40deg);opacity:0}}}}.flash_cards_start_message{background:#fff;padding:20px;margin:40px auto;text-align:center;max-width:400px}.flash_cards_card_options{margin-top:40px;text-align:center;>button{margin-left:15px;font-size:18px;padding:10px 20px;&:first-child{margin-left:0}}@media(max-width:1100px){position:fixed;bottom:0;left:0;right:0;margin:0;padding:10px;background:color-mix(in srgb,var(--body-background),transparent 20%);>button{margin:5px}}}.flash_cards_exercise_selector{display:block}.flash_cards_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_cards_selected{background:#ffffff4d;border:1px solid rgba(0,0,0,.2)}&:last-child{margin-bottom:0}input{margin-right:8px}}}.flash_cards_chord_identification_exercise{.flash_cards_flash_card{padding-top:10px;padding-bottom:10px;.staff{min-width:300px;font-size:12px}}}.midi_button_midi_button{background:transparent;padding:6px 8px;color:#666;font-size:14px;cursor:pointer;>div{display:flex;align-items:center}&:hover{opacity:1}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}&:hover{background:color-mix(in oklab,var(--body-background),white 5%)}}.ear_training_page_ear_training_page{@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){padding-bottom:0}>.ear_training_page_exercise_label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.5em;margin:0;@media(max-width:900px){font-size:1.2em}}}.ear_training_page_warning{color:var(--error-color);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 var(--border-color);border-radius:3px;display:flex;align-items:center;gap:2px;min-height:26px;>span{font-size:12px;font-weight:700;&:first-child{padding-left:5px}}code{min-width:28px;text-align:center}>.ear_training_page_shuffle_button{padding:2px 8px;border:0;border-radius:0;font-size:12px;align-self:stretch}>.slider_component{flex:1;min-width:0;.slider_track{flex:1;min-width:0}}}fieldset{border:1px solid #ddd;legend{font-size:13px;font-weight:700;text-transform:uppercase;color:#666}}.ear_training_page_range_picker{display:flex;align-items:center;gap:10px;button{&.ear_training_page_active{background-color:color-mix(in oklab,var(--button-color),white 10%);box-shadow:0 0 0 2px color-mix(in oklab,var(--border-color),black 20%)}}.ear_training_page_current_range{margin-left:auto}}.ear_training_page_confirm_buttons{display:flex;margin-top:20px;.ear_training_page_spacer{flex:1}}}.melody_recognition_exercise_melody_recognition_exercise{.melody_recognition_exercise_interval_settings{margin:20px 0;.melody_recognition_exercise_enabled_intervals{padding:10px}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;li{padding:0;margin:0}}}.melody_recognition_exercise_autoplay_options{padding:10px;input[type=checkbox]{margin:0 10px 0 0}ul{list-style:none;padding:0;margin:0;>li{font-size:15px;margin-bottom:15px;label{display:flex;align-items:center;>*{margin-right:10px;&:last-child{margin-right:0}}}&:last-child{margin-bottom:0}}}}.melody_recognition_exercise_song_selector{.melody_recognition_exercise_global_controls{display:flex;align-items:center;>*{margin-right:10px;&:last-child{margin-right:0}}@media(max-width:600px){align-items:stretch;flex-direction:column;>*{margin:0 0 10px;&:last-child{margin:0}}}}.melody_recognition_exercise_current_song{margin-top:20px;background:color-mix(in oklab,var(--body-background),white 50%);padding:10px;display:flex;flex-direction:column;gap:10px;>p{margin:0}.melody_recognition_exercise_song_title{font-weight:700;font-size:18px}.melody_recognition_exercise_song_controls{display:flex;align-items:center;gap:10px}}}}.melody_recognition_exercise_page_container{margin-top:20px;margin-bottom:20px}.melody_playback_exercise_melody_playback_exercise{min-height:100%;display:flex;flex-direction:column;gap:20px;details.melody_playback_exercise_instructions{margin-bottom:10px;summary{cursor:pointer;font-weight:700}}.melody_playback_exercise_keyboard{margin-top:auto;position:static}.melody_playback_exercise_stat_controls{display:flex;align-items:center;gap:10px;>.melody_playback_exercise_stats_row{margin-left:auto}}fieldset{margin-top:20px;>.melody_playback_exercise_spacer{flex:1}}}.melody_playback_exercise_page_container{margin-top:0;margin-bottom:0;>p:first-child{margin-top:0}}.sidebar_toggle_sidebar_button{display:inline-flex;align-items:center;cursor:pointer;>.sidebar_svgicon{margin-right:4px}}.sidebar_has_sidebar{width:auto;max-width:none;display:flex;min-height:calc(100vh - var(--header-height));@media(max-width:900px){.sidebar_sidebar{display:none}&.sidebar_sidebar_open{position:relative;display:block;&:before{content:"";position:absolute;inset:0;background:#00000080;z-index:10}.sidebar_sidebar{position:fixed;display:block;top:var(--header-height);left:0;bottom:0;z-index:11;overflow-y:auto}}}.sidebar_content_column{flex:1;min-width:0}.sidebar_sidebar{width:250px;flex:none;box-sizing:border-box;background:#efefef;padding:20px;.sidebar_nav_header{font-weight:700;text-transform:uppercase;font-size:12px}nav{ul{list-style:none;padding:0;margin:20px 0}li{margin-bottom:8px;&:last-child{margin-bottom:0}}a.sidebar_active{text-decoration:none;font-weight:700}}}}.play_along_page_play_along_page{overflow:hidden;.play_along_page_draggable{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_settings_open{margin-left:250px}}.play_along_page_transport_controls{display:flex;align-items:center;padding-right:40px;>*{margin-left:10px;&:first-child{margin-left:0}}.play_along_page_play_pause{min-width:60px}>button{height:28px;.svgicon{fill:#fff}}input[type=text]{margin-left:10px;box-sizing:border-box;border:1px solid color-mix(in oklab,var(--border-color),white 10%);font-family:Raleway,sans-serif;font-size:13px;padding:4px;height:28px;width:45px;border-radius:2px;text-align:center}.play_along_page_loop_controls{margin-left:20px;display:flex;align-items:center;.play_along_page_label_text{font-size:13px;font-weight:700;opacity:.8}}.play_along_page_spacer{flex:1}.play_along_page_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;>*{margin-right:10px;display:flex;align-items:center;&:last-child{margin-right:0}}}.play_along_page_empty_tracks{margin:20px 0}&.play_along_page_has_song{.play_along_page_staff_wrapper{.play_along_page_song_error{position:absolute;inset:0;background:#fffc;z-index:2;display:flex;align-items:center;justify-content:center}}}&:not(.play_along_page_has_song){.play_along_page_song_error{padding:20px 0}}.play_along_page_settings_label{display:block;margin:0 10px 10px}.play_along_page_input_label{font-size:13px;color:#666;font-weight:700;margin-bottom:5px}.play_along_page_slider_row{display:flex;.slider_component{flex:1}}.play_along_page_current_value{width:20px;text-align:center}}.song_editor_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;input[type=text]{width:100%;box-sizing:border-box}}>textarea{flex-basis:1;flex-grow:1}.song_editor_form_tools{display:flex;align-items:center;.song_editor_select_component{height:28px;padding:0 10px;display:flex;box-sizing:border-box}>*{margin-left:5px}>:first-child{margin-left:0;flex:1}}}.songs_songs_page{.songs_sidebar{.songs_new_song_button{display:block;text-align:center}}.songs_content_column{padding:20px;>section{h2{margin-top:0}margin-bottom:40px;&:last-child{margin-bottom:0}}}.songs_song_cell{background:#fff;padding:10px;.songs_publish_status{float:right;background:#ddd;font-size:12px;font-weight:700;border-radius:4px;padding:3px 6px;margin-left:5px;color:color-mix(in srgb,var(--body-color),transparent 20%)}.songs_song_title{font-size:20px;a{color:#55556b;text-decoration:none}margin-bottom:5px}.songs_time_played{font-size:14px;font-weight:700;margin-bottom:5px}.songs_song_creator{opacity:.8;margin-bottom:8px}.songs_song_stats{display:flex;font-size:14px;opacity:.5;justify-content:space-between}}.songs_song_cell_list{list-style:none;padding:0;margin:0;display:grid;grid-gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.songs_page_container{align-self:flex-start}.header_header{box-sizing:border-box;padding:0 20px;height:50px;background:#fff;position:fixed;top:0;left:0;right:0;z-index:calc(var(--upper-layer-z-index) - 1);gap:20px;width:100%;display:flex;align-items:center;.header_user_links{flex:1;display:flex;align-items:center;gap:20px;color:#666;>a,>.header_right_section{white-space:nowrap}}.header_menu_toggle{position:relative;button{background:transparent;padding:6px 8px;color:#666;font-size:14px;cursor:pointer;>svg{fill:#333;margin-left:3px;display:inline-block;vertical-align:1px}}.header_menu_shroud{position:fixed;inset:0;background:#fffc;z-index:1}.header_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 color-mix(in oklab,var(--border-color),white 10%);border-radius:4px;box-shadow:0 0 20px #0003;.header_midi_button_wrapper{padding:8px 10px 5px;display:flex;>button{flex:1;text-align:left;display:block}}.header_account_area{border-bottom:1px solid color-mix(in oklab,var(--border-color),white 20%);display:flex;padding:8px 10px;align-items:center;&.header_logged_in{>:first-child{flex:1}.header_username{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}&.header_logged_out{>*{flex:1;&:last-child{text-align:right}}}}ul{list-style:none;padding:0;margin:0;li{margin:8px 10px;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 &{button{visibility:hidden}}h1{margin:0 20px 0 0;line-height:15px;font-size:22px;text-transform:uppercase;color:#444;a{color:inherit;text-decoration:none}}.header_logo_link{padding:0}a{padding:3px 6px;font-weight:700;text-decoration:none;color:#444;&:hover{color:var(--button-color)}&.active{font-weight:700;text-decoration:none;background:#f6f6f6;color:color-mix(in oklab,var(--button-color),black 8%);border-radius:2px;box-shadow:0 0 0 2px #0000001a}}}.midi_selector_midi_selector{background:#fff;border:2px solid color-mix(in oklab,var(--border-color),white 20%);max-height:200px;overflow-y:auto;.midi_selector_midi_input_row{padding:6px 10px;display:flex;align-items:center;cursor:pointer;border:none;background:none;width:100%;text-align:left;font:inherit;color:inherit;margin:0;border-radius:0;box-shadow:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;&:hover{background:#f5f5f5}&:focus{outline:2px solid rgba(0,0,255,.2);outline-offset:-4px}&:active{background:color-mix(in oklab,var(--button-color-highlight),black 5%)}&.midi_selector_selected{background:var(--button-color-highlight)}&.midi_selector_selected:focus{outline:2px solid color-mix(in oklab,var(--button-color-highlight),black 20%)}.midi_selector_row_icon{width:24px;opacity:.7;margin-right:5px}.midi_selector_input_name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}}}.midi_instrument_picker_midi_instrument_picker_component{.midi_instrument_picker_midi_instrument_test_buttons{margin-top:20px;>button{margin-right:10px;&:last-child{margin-right:0}}}.midi_instrument_picker_midi_options{margin-bottom:15px;display:flex;.slider_component{margin:0 10px;width:200px}.midi_instrument_picker_select_component{margin-left:10px}>*{margin-left:30px;height:26px;display:flex;align-items:center;&:first-child{margin-left:0}}@media(max-width:600px){flex-direction:column;>*{margin-top:10px;margin-left:0}}}}.device_picker_lightbox_device_picker_lightbox{.device_picker_lightbox_input_row{margin-top:10px}.device_picker_lightbox_device_type_picker{margin-bottom:10px}.device_picker_lightbox_label{margin-right:5px}}