@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul,input[type=range i]{margin:0;padding:0;color:inherit;font-weight:inherit;font-size:inherit}ol,ul{list-style:none}img{max-width:100%;height:auto}:root{--spacing-2xsmall: .25rem;--spacing-xsmall: .5rem;--spacing-small: .75rem;--spacing-base: 1rem;--spacing-large: 1.5rem;--spacing-xlarge: 2rem;--spacing-2xlarge: 3.5rem;--spacing-3xlarge: 5rem;--font-family: "Inter", sans-serif;--weight-base: 400;--weight-semibold: 600;--weight-bold: 700;--font-size-xsmall: .75rem;--font-size-small: .875rem;--font-size-base: 1rem;--font-size-large: 1.125rem;--font-size-xlarge: 1.25rem;--font-size-2xlarge: 1.5rem;--font-size-3xlarge: 2rem;--radius-small: 4px;--radius-base: 8px;--radius-large: 16px;--radius-full: 99rem;--max-app-width: 1100px;--min-button-size: 40px;--max-phone-width: 600px;--transition: background-color .2s ease, color .2s ease, border-color .2s ease;--ui-font: var(--weight-base) var(--font-size-base)/1.4 var(--font-family);--line-graph-label-font: var(--weight-bold) var(--font-size-base)/1.4 var(--font-family);--color-primary-xlight: #f5f9ff;--color-primary-light: #D5E6FF;--color-primary-base: #2B80FF;--color-primary-dark: #145EFC;--color-primary-xdark: #1551d3;--color-primary-2xdark: #102974;--color-neutral-light: hsl(216, 12%, 98%);--color-neutral-base: hsl(216, 15%, 95%);--color-neutral-dark: hsl(228, 19%, 92%);--color-neutral-xdark: hsl(229, 22%, 87%);--color-neutral-2xdark: hsl(229, 24%, 80%);--color-shade-light: #8F98AE;--color-shade-base: #6B7282;--color-shade-dark: #33435c;--color-shade-xdark: #23324b;--color-shade-2xdark: #172336;--color-white: #ffffff;--color-error-base: #CA4848;--color-success-base: #53ca48;--color-modal-background: #00000070;--elevation-light: 0 .125rem 0 0 #00000020;--elevation-medium: 0 .125rem 0 0 #00000030}html{font-family:var(--font-family)}body{background-color:var(--color-primary-xlight)}.size-wrapper{width:100%;max-width:var(--max-app-width);padding:var(--spacing-large) var(--spacing-base)}.truncate-overflow-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h1{font:var(--weight-semibold) var(--font-size-large)/1.4 var(--font-family);color:var(--color-shade-2xdark)}h2{font:var(--weight-semibold) var(--font-size-base)/1.4 var(--font-family);color:var(--color-shade-2xdark)}p{font:var(--weight-base) var(--font-size-base)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.large-heading{font:var(--weight-semibold) var(--font-size-2xlarge)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.heading{font:var(--weight-semibold) var(--font-size-large)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.heading-secondary{font:var(--weight-base) var(--font-size-large)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.body{font:var(--weight-base) var(--font-size-base)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.body-secondary{font:var(--weight-base) var(--font-size-base)/1.4 var(--font-family);color:var(--color-shade-base)}.caption{font:var(--weight-base) var(--font-size-small)/1.4 var(--font-family);color:var(--color-shade-2xdark)}.caption-secondary{font:var(--weight-base) var(--font-size-small)/1.4 var(--font-family);color:var(--color-shade-base)}svg.stave-scalable{width:100%!important;height:auto!important;max-width:230px}.stave-show-wrong-note{animation:fadeInWrongNote .3s cubic-bezier(.65,0,.35,1) forwards,note-shake .3s ease-in-out}.stave-show-wrong-note>path{animation:fadeInWrongNote .3s cubic-bezier(.65,0,.35,1) forwards,note-shake .3s ease-in-out}.stave-hide-wrong-note{animation:fadeOutWrongNote .4s cubic-bezier(.65,0,.35,1) forwards}.stave-hide-wrong-note>path{animation:fadeOutWrongNote .4s cubic-bezier(.65,0,.35,1) forwards}@keyframes fadeInWrongNote{0%{fill:transparent;stroke:transparent}to{fill:var(--color-error-base);stroke:var(--color-error-base)}}@keyframes note-shake{0%,to{transform:translate(0)}20%{transform:translate(-1px)}40%{transform:translate(1px)}60%{transform:translate(-1px)}80%{transform:translate(1px)}}@keyframes fadeOutWrongNote{0%{fill:var(--color-error);stroke:var(--color-error)}to{fill:transparent;stroke:transparent}}@media (max-width: 600px){.mobile-hide{display:none}}._NavbarWrapper_1wuzw_1{display:flex;align-items:center;justify-content:center;background-color:var(--color-white);padding:var(--spacing-2xsmall) 0;border-bottom:1px solid var(--color-neutral-base)}._SizeWrapper_1wuzw_10{display:flex;justify-content:center;gap:var(--spacing-small);width:100%;max-width:var(--max-app-width);padding:0 var(--spacing-base)}._SizeWrapper_1wuzw_10>:last-child{margin-left:auto}._IconTextContainer_1wuzw_23{display:flex;align-items:center;gap:var(--spacing-small);cursor:pointer}._TitleContainer_1wuzw_30{display:flex;align-items:center}._SidebarWrapper_1wuzw_35{position:fixed;top:0;right:-400px;width:400px;height:100vh;background-color:var(--color-primary-xlight);z-index:999;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.65,0,.35,1);overflow-y:auto;padding-bottom:var(--spacing-3xlarge)}._SidebarWrapper_1wuzw_35._open_1wuzw_50{right:0}@media (max-width: 600px){._SidebarWrapper_1wuzw_35{width:70%;right:-70%}._SidebarWrapper_1wuzw_35._open_1wuzw_50{right:0}}._Backdrop_1wuzw_66{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-modal-background);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.65,0,.35,1);z-index:998}._Backdrop_1wuzw_66._show_1wuzw_79{opacity:1;pointer-events:all}._Header_1wuzw_84{display:flex;align-items:center;padding:var(--spacing-2xsmall) var(--spacing-base);padding-right:var(--spacing-2xsmall);border-bottom:1px solid var(--color-neutral-base);background-color:var(--color-white)}._Header_1wuzw_84>h1{margin-right:auto;padding-left:var(--spacing-2xsmall)}._SidebarItemContainer_1wuzw_98{display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-base);cursor:pointer;transition:var(--transition)}._SidebarItemContainer_1wuzw_98:not(._Active_1wuzw_106):hover{background-color:var(--color-neutral-base)}._SidebarItemContainer_1wuzw_98._Active_1wuzw_106{border-left:3px solid var(--color-primary-base);background-color:var(--color-white)}._SidebarItemTextContainer_1wuzw_116{display:flex;gap:var(--spacing-2xsmall);align-items:center}._SidebarItemSubTextContainer_1wuzw_122{display:flex;align-items:center}._button_sjkro_1{display:flex;justify-content:center;align-items:center;gap:var(--spacing-2xsmall);font:var(--ui-font);cursor:pointer;border:none;background:none;transition:var(--transition)}._button_sjkro_1._size-small_sjkro_14{padding:var(--spacing-xsmall) var(--spacing-xsmall)}._button_sjkro_1._size-medium_sjkro_18{padding:var(--spacing-xsmall) var(--spacing-base)}._button_sjkro_1._size-large_sjkro_22{padding:var(--spacing-xsmall) var(--spacing-large)}._fullWidth_sjkro_26{width:100%}._round-small_sjkro_31{border-radius:var(--radius-base)}._round-full_sjkro_35{border-radius:var(--radius-full)}._contained_sjkro_39{position:relative;background-color:var(--color-primary-base);color:var(--color-white);box-shadow:var(--elevation-medium)}._contained_sjkro_39:hover{background-color:var(--color-primary-base)}._contained_sjkro_39:active{top:1px;box-shadow:none}._contained_sjkro_39>svg>path{fill:var(--color-white);color:var(--color-white)}._contained_sjkro_39._disabled_sjkro_60{cursor:default;background-color:var(--color-shade-base)}._contained_sjkro_39._disabled_sjkro_60:active{top:unset;box-shadow:var(--elevation-medium)}._outlined_sjkro_70{background-color:var(--color-white);border:1px solid var(--color-shade-light);color:var(--color-shade-2xdark)}._outlined_sjkro_70:hover{background-color:var(--color-neutral-base)}._outlined_sjkro_70:focus{outline:2px solid var(--color-primary-base)}._outlined_sjkro_70._active_sjkro_84{color:var(--color-white);background-color:var(--color-primary-base)}._outlined_sjkro_70._active_sjkro_84>svg>path{fill:var(--color-white);color:var(--color-white)}._outlined_sjkro_70._active_sjkro_84:focus{outline:revert}._text_sjkro_98:hover{background-color:var(--color-primary-base)}._text-secondary_sjkro_104{color:var(--color-shade-xdark)}._text-secondary_sjkro_104:hover{background-color:var(--color-neutral-base)}._text-secondary_sjkro_104:focus{outline:2px solid var(--color-primary-base)}._text_sjkro_98._active_sjkro_84{color:var(--color-white);background-color:var(--color-primary-base)}._text_sjkro_98._active_sjkro_84>svg>path{fill:var(--color-white);color:var(--color-white)}._text-secondary_sjkro_104._active_sjkro_84{color:var(--color-white);background-color:var(--color-primary-base)}._text-secondary_sjkro_104._active_sjkro_84>svg>path{fill:var(--color-white);color:var(--color-white)}._text-secondary_sjkro_104._active_sjkro_84:focus{outline:revert}._PageWrapper_1ovj7_1{display:flex;align-items:center;justify-content:center}._SizeWrapper_1ovj7_7{width:100%;max-width:30rem;padding:var(--spacing-small)}._CardsWrapper_1ovj7_13{display:flex;flex-direction:column;gap:var(--spacing-base)}._InputDeviceHeader_1ovj7_19{display:flex;align-items:center;padding:var(--spacing-base) var(--spacing-small)}._InputDeviceHeader_1ovj7_19>:first-child{flex:1}._InputDeviceDropDownButton_1ovj7_29._Rotated_1ovj7_29 svg{transform:rotate(180deg);transition:transform .2s ease}._InputDeviceDropDownButton_1ovj7_29 svg{transition:transform .2s ease}._InputDeviceTextContainer_1ovj7_38{display:flex;flex-direction:column;gap:var(--spacing-2xsmall)}._InputDeviceTextContainer_1ovj7_38>._InputDeviceTextItem_1ovj7_44:nth-child(2n){gap:0}._InputDeviceTextItem_1ovj7_44{display:flex;align-items:center;gap:var(--spacing-2xsmall)}._InputDeviceButtonContainer_1ovj7_54{margin-top:var(--spacing-2xsmall)}._ExpandedContent_1ovj7_58{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .25s ease,padding .25s ease;padding:0 var(--spacing-small)}._ExpandedContentButtonContainer_1ovj7_66{display:flex;justify-content:flex-end;padding-top:var(--spacing-base)}._ErrorText_1ovj7_72{color:var(--color-error-base);margin-top:var(--spacing-2xsmall)}._BackButtonWrapper_oeo9n_1{margin-bottom:var(--spacing-2xsmall)}._modalHeaderContainer_mayon_3{display:flex;align-items:center;gap:var(--spacing-2xsmall);padding:var(--spacing-xsmall) var(--spacing-small);padding-right:var(--spacing-2xsmall);border-bottom:1px solid var(--color-neutral-dark)}._modalHeaderContainer_mayon_3>h1{flex:1}._ToggleWrapper_mayon_18{width:50px;height:26px;background-color:var(--color-neutral-base);border-radius:var(--radius-full);border:1px solid var(--color-neutral-dark);position:relative;cursor:pointer;transition:background-color .25s ease;padding:0}._ToggleThumb_mayon_30{position:absolute;top:3px;left:3px;width:18px;height:18px;background-color:var(--color-white);border-radius:var(--radius-full);transition:left .25s ease,right .25s ease,transform .25s ease;border:1px solid var(--color-neutral-2xdark)}._ToggleChecked_mayon_43{background-color:var(--color-primary-base)}._ToggleChecked_mayon_43 ._ToggleThumb_mayon_30{left:calc(100% - 21px)}._ToggleButtonGroupWrapper_mayon_52{display:flex;flex-wrap:wrap;gap:var(--spacing-2xsmall)}._ToggleButtonGroupActive_mayon_58{background-color:var(--color-white)}._IconWrapper_mayon_63{display:flex;justify-content:center;align-items:center;height:var(--min-button-size);width:var(--min-button-size);background-color:var(--color-primary-light);border-radius:var(--radius-full)}._IconWrapper_mayon_63>svg{fill:var(--color-primary-base);flex-shrink:0}._CardWrapper_mayon_80{align-items:stretch;border:1px solid var(--color-neutral-dark);border-radius:var(--radius-base);background-color:var(--color-white);width:100%;box-shadow:var(--elevation-medium);overflow:hidden}._CardClickable_mayon_90{cursor:pointer}._padding-base_mayon_94{padding:var(--spacing-base)}._SizeWrapper_1r8wq_1{width:100%;max-width:30rem;padding:var(--spacing-small)}._PWASizeWrapper_1r8wq_7{width:100%;max-width:40rem;padding:var(--spacing-small)}._CardsWrapper_1r8wq_13{display:flex;flex-direction:column;gap:var(--spacing-base)}._InputDeviceHeader_1r8wq_19{display:flex;align-items:center;padding:var(--spacing-base) var(--spacing-small)}._InputDeviceHeader_1r8wq_19>:first-child{flex:1}._InputDeviceDropDownButton_1r8wq_29._Rotated_1r8wq_29 svg{transform:rotate(180deg);transition:transform .2s ease}._InputDeviceDropDownButton_1r8wq_29 svg{transition:transform .2s ease}._InputDeviceTextContainer_1r8wq_38{display:flex;flex-direction:column;gap:var(--spacing-2xsmall)}._InputDeviceTextContainer_1r8wq_38>._InputDeviceTextItem_1r8wq_44:nth-child(2n){gap:0}._InputDeviceTextItem_1r8wq_44{display:flex;align-items:center;gap:var(--spacing-2xsmall)}._InputDeviceButtonContainer_1r8wq_54{margin-top:var(--spacing-small)}._InputDeviceButtonContainer_1r8wq_54>p{margin-bottom:var(--spacing-2xsmall)}._ExpandedContent_1r8wq_62{display:flex;flex-direction:column;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .3s ease,padding .3s ease;padding:0 var(--spacing-base)}._Show_1r8wq_72{max-height:500px;opacity:1;padding:var(--spacing-base);border-top:1px solid var(--color-neutral-dark)}._ExpandedContentButtonContainer_1r8wq_79{display:flex;justify-content:flex-end;padding-top:var(--spacing-base)}._ErrorText_1r8wq_85{color:var(--color-error-base);margin-top:var(--spacing-2xsmall)}._MidiPlaybackExapandedContent_1r8wq_90{gap:var(--spacing-2xsmall)}._MidiPlaybackExapandedContent_1r8wq_90>p:last-child{margin-top:var(--spacing-small)}._InputWrapper_1n03i_1{display:flex;flex-direction:column;width:100%;padding:2px}._Input_1n03i_1{width:100%;padding:var(--spacing-small);border-radius:var(--radius-small);border:1px solid var(--color-neutral-xdark);font-size:var(--font-size-base);color:var(--color-shade-2xdark);background-color:var(--color-white)}._Input_1n03i_1::placeholder{color:var(--color-shade-light)}._Input_1n03i_1:focus{outline:2px solid var(--color-main)}._InputSelect_1n03i_26{width:100%;padding:var(--spacing-small);border-radius:var(--radius-small);border:1px solid var(--color-neutral-xdark);font-size:var(--font-size-base);color:var(--color-shade-2xdark);background-color:var(--color-white);cursor:pointer}._InputSelect_1n03i_26:focus{outline:2px solid var(--color-primary-base)}._InputWrapper_1n03i_1>p{min-height:1.4em}._Error_1n03i_45{color:var(--color-error)}._SliderWrapper_1n03i_49{display:flex;align-items:center;width:100%}._SliderWrapper_1n03i_49._SliderValue_1n03i_54{align-self:flex-end;text-align:right}._SliderLabel_1n03i_60{display:flex;flex-direction:column;color:var(--color-shade-2xdark);flex-grow:1}._SliderLabel_1n03i_60>p._Hide_1n03i_67{display:none}._SliderValue_1n03i_54{text-align:right;width:fit-content;min-width:1.8rem;margin-right:var(--spacing-small)}._Slider_1n03i_49::-webkit-slider-thumb{cursor:grab}._CustomFileInput_1n03i_82::file-selector-button{background-color:var(--color-primary-base);color:var(--color-white);padding:var(--spacing-xsmall) var(--spacing-small);border:none;border-radius:var(--radius-base);cursor:pointer;transition:background-color .3s ease;font:var(--ui-font)}._CustomFileInput_1n03i_82::file-selector-button:hover{background-color:var(--color-primary-base)}._HomePageWrapper_1r6cy_1{display:flex;flex-direction:column;align-items:center}._SizeWrapper_1r6cy_7{gap:var(--spacing-small);width:100%;max-width:var(--max-app-width);padding:0 var(--spacing-base)}._HeaderContainer_1r6cy_14{margin-top:var(--spacing-base)}._ItemsContainer_1r6cy_18{margin-top:var(--spacing-small)}._HomePageWrapper_1r6cy_1 ._ItemsContainer_1r6cy_18:nth-child(n+3){margin-top:var(--spacing-xlarge)}._CardContainer_1r6cy_26{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-base);margin-top:var(--spacing-small)}._CardContent_1r6cy_33{display:flex;flex-direction:column;height:100%;align-items:stretch;padding:var(--spacing-base);text-align:center}._IconContainer_1r6cy_42{margin:0 auto;margin-bottom:var(--spacing-xsmall)}@media (min-width: 600px){._CardContainer_1r6cy_26{grid-template-columns:repeat(3,1fr);justify-content:start}}._NoteDrillPageWrapper_11h96_1{display:flex;justify-content:center}._HeaderContainer_11h96_6{display:flex;flex-direction:column;width:100%}._CardContainer_11h96_12{display:grid;gap:var(--spacing-base);padding-top:var(--spacing-base);grid-template-columns:repeat(2,1fr)}._CardContent_11h96_19{display:flex;flex-direction:column;height:100%;align-items:stretch}._CardContent_11h96_19>:last-child{margin-top:auto}._IconContainer_11h96_30{display:flex;justify-content:center;padding:0 var(--spacing-base);padding-top:var(--spacing-large)}._TextContainer_11h96_37{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-base) var(--spacing-base);text-align:center}._TextContainer_11h96_37>h2{margin-bottom:var(--spacing-2xsmall)}._ButtonContainer_11h96_49{padding:var(--spacing-base);padding-top:var(--spacing-small)}._DeviceContainer_11h96_54{background-color:var(--color-neutral-base);padding:var(--spacing-base);border-radius:var(--radius-base);border:1px solid var(--color-neutral-xdark)}._DeviceContainer_11h96_54 button{margin-top:var(--spacing-xsmall)}._DeviceContainerTextItem_11h96_65{display:flex;gap:var(--spacing-2xsmall);padding-top:var(--spacing-2xsmall)}@media (max-width: 600px){._CardContainer_11h96_12{grid-template-columns:1fr}}._PresetDrillsWrapper_rjd2j_1{display:flex;flex-direction:column}._CardContainer_rjd2j_6{display:grid;gap:var(--spacing-base);grid-template-columns:repeat(2,1fr)}._HeadingContainer_rjd2j_12{margin-bottom:var(--spacing-xsmall)}._TextContainer_rjd2j_16{display:flex;flex-direction:column;padding:var(--spacing-xlarge) var(--spacing-base);padding-top:var(--spacing-large)}._HeaderContainer_rjd2j_23{display:flex;gap:var(--spacing-2xsmall);margin-bottom:var(--spacing-2xsmall)}._PracticeButtonContainer_rjd2j_29{display:flex;gap:var(--spacing-small);padding:var(--spacing-base);border-top:1px solid var(--color-neutral-dark)}._DifficultyPill_rjd2j_36{width:fit-content;padding:var(--spacing-2xsmall) var(--spacing-xsmall);border-radius:var(--radius-base);background-color:var(--color-neutral-dark);margin-bottom:var(--spacing-small)}@media (max-width: 600px){._CardContainer_rjd2j_6{grid-template-columns:1fr}}._backdrop_zo7yc_1{position:fixed;inset:0;background:var(--color-modal-background);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:var(--spacing-small);opacity:0;pointer-events:none;transition:opacity .2s ease-out}._backdrop_zo7yc_1._open_zo7yc_16{opacity:1;pointer-events:auto}._modal_zo7yc_21{width:100%;max-width:31rem;border-radius:.5rem;transform:scale(.8);opacity:0;transition:transform .2s ease-out,opacity .2s ease-out}._modal_zo7yc_21._open_zo7yc_16{transform:scale(1);opacity:1}._LineGraphContainer_q1bk9_1{margin-top:var(--spacing-small);margin-bottom:var(--spacing-large)}._DataContainer_q1bk9_6{color:var(--color-white);background-color:var(--color-primary-base);width:fit-content;padding:var(--spacing-small) var(--spacing-base);border-radius:var(--radius-base);margin:var(--spacing-2xsmall) 0}._EmptyGraphContainer_q1bk9_15{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-base);padding:var(--spacing-base);background-color:var(--color-neutral-dark);border:1px solid var(--color-neutral-base);border-radius:var(--radius-base);margin:var(--spacing-base) 0;text-align:center}._ModalContentContainer_acjg5_1{display:flex;flex-direction:column;gap:var(--spacing-small);padding:var(--spacing-small) var(--spacing-base)}._ModalActionButtonsContainer_acjg5_8{display:flex;gap:var(--spacing-small);padding:var(--spacing-base);border-top:1px solid var(--color-neutral-dark)}._ModalFlexContainer_acjg5_15{display:flex;overflow:hidden}._CustomDrillsWrapper_14uu7_1{display:flex;flex-direction:column;align-items:center}._ContentWrapper_14uu7_7{width:100%;max-width:35rem}._CardHeaderContainer_14uu7_12{display:flex;padding:var(--spacing-base);padding-bottom:var(--spacing-xsmall)}._InputsContainer_14uu7_18{padding:var(--spacing-base);padding-top:0}._InputsContainer_14uu7_18>h2{padding-top:var(--spacing-large);padding-bottom:var(--spacing-xsmall)}._FlexInputsContainer_14uu7_28{display:flex;gap:var(--spacing-small)}._FlexButtonsContainer_14uu7_33{display:flex;flex-wrap:wrap;gap:var(--spacing-2xsmall)}._SubmitButtonContainer_14uu7_39{display:flex;flex-direction:column;gap:var(--spacing-small);padding:var(--spacing-base);border-top:1px solid var(--color-neutral-dark)}._OctaveButtonsContainer_h1zvq_1{display:flex;justify-content:center;flex-direction:column;gap:var(--spacing-base)}._StaveContainer_h1zvq_8{flex:1;display:flex;justify-content:center;padding:0 var(--spacing-large)}._RangeContainer_h1zvq_15{padding:var(--spacing-base);margin-top:var(--spacing-small);text-align:center}._SelectedRangeContainer_h1zvq_21{margin:0 auto;margin-top:var(--spacing-xsmall);text-align:center;width:clamp(3rem,100%,7.5rem);padding:var(--spacing-base);background-color:var(--color-primary-base);border-radius:var(--radius-base)}._SelectedRangeContainer_h1zvq_21 p{color:var(--color-white)}._LoadingWrapper_1sjcr_1{display:flex;justify-content:center;align-items:center;height:100dvh;width:100dvw}._KeyVisualizerPageWrapper_7i658_1{display:flex;flex-direction:column;align-items:center;margin-top:var(--spacing-2xsmall);padding-bottom:var(--spacing-large)}._SizeWrapper_7i658_9{gap:var(--spacing-small);width:100%;max-width:var(--max-app-width);padding:0 var(--spacing-base)}._KeyWrapper_7i658_16{display:flex;flex-direction:column;align-items:start;margin-bottom:var(--font-size-base)}._KeyInputWrapper_7i658_23{display:flex}._KeyInputWrapper_7i658_23 select:last-child{width:10em}._NotesInScaleWrapper_7i658_31{display:flex;flex-direction:column;align-items:start;gap:var(--spacing-xsmall)}._NotesContainer_7i658_38{display:flex;gap:var(--spacing-base)}._ChordsInScaleWrapper_7i658_43{display:flex;flex-direction:column;align-items:start;gap:var(--spacing-xsmall);margin-top:var(--spacing-xlarge)}._ChordWrapper_7i658_51{display:flex;align-items:center;gap:var(--spacing-base);margin-top:var(--spacing-small)}._ChordButtonContainer_7i658_58{display:flex;align-items:center;gap:var(--spacing-2xsmall)}._ChordButtonContainer_7i658_58>p{width:3rem;overflow:hidden}._ChordNotes_7i658_69{display:flex;gap:var(--spacing-xsmall);width:6rem}