.styles_button__KA1RX{position:relative;color:var(--color-on-control);width:58px;height:44px;display:inline-block;font-size:var(--text-control);padding:4px 8px;margin:4px;background:var(--color-control);border:0;border-radius:var(--radius-md);transition:var(--motion-base) var(--motion-ease) background}.styles_button__KA1RX:hover{color:var(--color-on-control);cursor:pointer}.styles_button__KA1RX.styles_widthAuto__L46TY{width:auto;height:38px;padding:0 12px;font-size:var(--text-small)}.chords .styles_buttonSelected__jFAIL{background:var(--color-tool-chords);box-shadow:inset 0 0 0 2px var(--color-tool-chords-ink)}.scales .styles_buttonSelected__jFAIL{background:var(--color-tool-scales);box-shadow:inset 0 0 0 2px var(--color-tool-scales-ink)}.arpeggios .styles_buttonSelected__jFAIL{background:var(--color-tool-arpeggios);box-shadow:inset 0 0 0 2px var(--color-tool-arpeggios-ink)}@media(hover:hover){.chords .styles_button__KA1RX:not(.styles_buttonSelected__jFAIL):hover{background:var(--color-tool-chords-hover)}.scales .styles_button__KA1RX:not(.styles_buttonSelected__jFAIL):hover{background:var(--color-tool-scales-hover)}.arpeggios .styles_button__KA1RX:not(.styles_buttonSelected__jFAIL):hover{background:var(--color-tool-arpeggios-hover)}}.styles_keys__lrZWI{text-align:center;font-size:var(--text-page)}@media only screen and (max-width:767px){.styles_keys__lrZWI{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}}.styles_types__6g1WI{text-align:center}.styles_break__2BDRL{display:none}@media only screen and (max-width:1023px){.styles_break__2BDRL{display:block}}@media only screen and (max-width:767px){.styles_break__2BDRL{display:none}.arpeggios .styles_types__6g1WI,.chords .styles_types__6g1WI,.scales .styles_types__6g1WI{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}}.styles_controls__76WIH{margin-bottom:16px}