.piano[data-v-1551b271]{display:flex;flex-direction:column;align-items:center}.keys[data-v-1551b271]{display:flex;position:relative}.key[data-v-1551b271]{width:40px;height:200px;font-size:.8rem;border:1px solid #000;border-bottom-left-radius:4px;border-bottom-right-radius:4px;position:relative;background-color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}.key .note[data-v-1551b271]{position:absolute;bottom:10px;width:100%;text-align:center;color:#444}.key.black[data-v-1551b271]{width:30px;height:120px;margin:0 -15px;z-index:1;background-color:#000;box-shadow:0 2px 4px #0003}.key.black .note[data-v-1551b271]{bottom:20px;color:#fff}.key.black .enharmonic[data-v-1551b271]{position:absolute;bottom:5px;width:100%;text-align:center;color:#999}.key.highlighted-note[data-v-1551b271]{background-color:rgba(var(--v-theme-secondary),1)}.key.active-note[data-v-1551b271]{background-color:rgba(var(--v-theme-primary),1)}@media (max-width: 459px){.key[data-v-1551b271]{width:19px;height:130px;margin:-.25px;font-size:.6rem}.key.black[data-v-1551b271]{width:14px;height:80px;margin:0 -8px}}@media (min-width: 460px){.key[data-v-1551b271]{width:25px;height:160px;font-size:.7rem}.key.black[data-v-1551b271]{width:19px;height:100px;margin:0 -10px}}@media (min-width: 600px){.key[data-v-1551b271]{width:30px;height:180px;font-size:.75rem}.key.black[data-v-1551b271]{width:22px;height:110px;margin:0 -12px}}@media (min-width: 768px){.key[data-v-1551b271]{width:35px;height:180px;font-size:.7rem}.key.black[data-v-1551b271]{width:25px;height:110px;margin:0 -14px}}@media (min-width: 900px){.key[data-v-1551b271]{width:40px;height:200px;font-size:.8rem}.key.black[data-v-1551b271]{width:30px;height:120px;margin:0 -15px}}