.btn[data-v-2f647924]{flex:1;color:#000;font-size:1.1em;font-weight:700;border:none;border-right:1px solid var(--secondary-dark);border-top:none;border-bottom:3px solid var(--secondary-dark);background:var(--secondary);padding:5px 10px}.btn-active[data-v-2f647924]{background:var(--primary);border-right:1px solid var(--primary);border-bottom:3px solid var(--primary-dark)}.btn[data-v-2f647924]:hover{background:var(--secondary-hover)}.btn-active[data-v-2f647924]:hover{background:var(--primary-hover)}.btn[data-v-2f647924]:active{background:var(--secondary-dark)}.btn-active[data-v-2f647924]:active{background:var(--primary-dark)}.btn[data-v-2f647924]:focus{outline:0!important}.btn[data-v-2f647924]::-moz-focus-inner{border:0}.chords-container[data-v-13adb775],.inversion-container[data-v-a5bce472]{display:flex}.key[data-v-f0e548cf]{flex:1;position:relative;display:flex;font-weight:700;align-items:flex-end;border:1px solid black;border-bottom:5px solid black;justify-content:center;-webkit-user-select:none;user-select:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;background:#f5f5f5}.black-key[data-v-f0e548cf]{position:absolute;border-width:2px;border-top-width:1px;border-bottom:5px solid #111111;width:46%;height:65%;right:-23%;z-index:1;color:#fff;background:#000}.key[data-v-f0e548cf]:hover{background:var(--primary);color:#000}.key[data-v-f0e548cf]:active,.pressed[data-v-f0e548cf]{background:var(--primary-dark);color:#000}.key-group[data-v-e32a32d5]{flex:1;display:flex;position:relative}.key-container[data-v-9fd3a7ba]{display:flex;height:40%;max-height:600px;position:relative;width:100%}.press-container[data-v-d250b721],.notes-container[data-v-50a7ace9],.scale-container[data-v-1f38028f]{display:flex}.footer[data-v-ac5b8d35]{display:flex;align-self:flex-end;margin:0 20px 15px}:root{--primary: #ef476f;--primary-dark: #cc395b;--primary-hover: #da395f;--secondary: #118ab2;--secondary-dark: #0c6d8d;--secondary-hover: #1080a5;--accent: #ffd166;--accent-dark: #b39143;--accent-hover: #e7bb52;--success: #06d6a0;--success-dark: #049770;--success-hover: #04be8d;--background: #073b4c;--label-text: #032530;--text: #1f2d3d}html{height:100%;font-size:16px}body{height:100%;min-height:600px;margin:0;padding:0;font-family:sans-serif;background:var(--background)}#app{height:100%;display:flex}.container{flex:1;display:flex;flex-direction:column;justify-content:space-between}.label{font-weight:700;color:var(--accent)}