.key[data-v-1c051df9]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);-o-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.pressed-key[data-v-1c051df9]{background-color:#dd6b20;-webkit-transition-property:background-color,border-color,color,fill,stroke;-o-transition-property:background-color,border-color,color,fill,stroke;transition-property:background-color,border-color,color,fill,stroke;-webkit-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s}.black-key[data-v-1c051df9]{max-width:20rem;height:5.5rem;width:1.5rem;margin-left:.25rem;margin-right:.25rem;z-index:20;-webkit-box-shadow:1px 2px 3px 1px rgba(53,53,53,.45);box-shadow:1px 2px 3px 1px rgba(53,53,53,.45)}.black-key[data-v-1c051df9]:active,.black-key[data-v-1c051df9]:focus{-webkit-box-shadow:1px 1px 2px 1px rgba(53,53,53,.35);box-shadow:1px 1px 2px 1px rgba(53,53,53,.35)}.black-key>.height-info[data-v-1c051df9]{color:#718096}.black-key>.height-info[data-v-1c051df9],.black-key>.name-info[data-v-1c051df9]{-webkit-transition-property:background-color,border-color,color,fill,stroke;-o-transition-property:background-color,border-color,color,fill,stroke;transition-property:background-color,border-color,color,fill,stroke;-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s}.black-key>.name-info[data-v-1c051df9]{color:#cbd5e0}.black-key:hover>.height-info[data-v-1c051df9]{color:#319795}.black-key:hover>.name-info[data-v-1c051df9]{color:#4fd1c5}.white-key[data-v-1c051df9]{max-width:20rem;height:8rem;width:2rem;z-index:10}.white-key[data-v-1c051df9]:hover{background-color:#b2f5ea}.black-key.pressed-key>.height-info[data-v-1c051df9],.white-key.pressed-key>.height-info[data-v-1c051df9]{-webkit-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s}.black-key.pressed-key>.height-info[data-v-1c051df9],.black-key.pressed-key>.name-info[data-v-1c051df9],.white-key.pressed-key>.height-info[data-v-1c051df9],.white-key.pressed-key>.name-info[data-v-1c051df9]{color:#fbd38d;-webkit-transition-property:background-color,border-color,color,fill,stroke;-o-transition-property:background-color,border-color,color,fill,stroke;transition-property:background-color,border-color,color,fill,stroke}.black-key.pressed-key>.name-info[data-v-1c051df9],.white-key.pressed-key>.name-info[data-v-1c051df9]{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s}@media (min-width:1024px){.white-key[data-v-1c051df9]{height:12rem;width:2.5rem}.black-key[data-v-1c051df9]{height:8rem;width:1.75rem;margin-left:.375rem;margin-right:.375rem}}.out-of-range[data-v-1c051df9]{opacity:.15;pointer-events:none;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.out-of-range>div[data-v-1c051df9]{opacity:0}.active-key[data-v-1c051df9]{background-color:#2c7a7b!important;border-width:1px!important;border-color:#285e61!important;color:#fff!important}.active-key>.height-info[data-v-1c051df9]{color:#38b2ac}.active-key>.name-info[data-v-1c051df9]{color:#81e6d9}.bg[data-v-63041fdb]{background:#38b2ac;background:-o-linear-gradient(left,#38999a 0,#36a7a2 100%);background:-webkit-gradient(linear,left top,right top,from(#38999a),to(#36a7a2));background:linear-gradient(90deg,#38999a,#36a7a2)}