.sound-keyboard-container[data-v-d4003a08]{background-color:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);outline:none}.keyboard-wrapper[data-v-d4003a08]{position:relative;height:240px;overflow-y:hidden;padding-bottom:10px;scroll-behavior:smooth}.piano-key[data-v-d4003a08]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color .1s ease;position:relative;flex-shrink:0}.white-key[data-v-d4003a08]{width:50px;height:100%;background-color:#f8f9fa;border:1px solid #ced4da;border-radius:0 0 5px 5px;z-index:1}.black-key[data-v-d4003a08]{width:30px;height:60%;background-color:#212529;border-radius:0 0 4px 4px;margin-left:-15px;margin-right:-15px;z-index:2;box-shadow:0 3px 5px #0006}.white-key[data-v-d4003a08]:hover,.black-key[data-v-d4003a08]:hover{background-color:var(--bs-danger)!important}.piano-key.bg-success[data-v-d4003a08]{background-color:var(--bs-success)!important}@media(prefers-color-scheme:dark){.sound-keyboard-container[data-v-d4003a08]{background-color:#212529;border-color:#495057}.white-key[data-v-d4003a08]{background-color:#dee2e6;border-color:#495057}.black-key[data-v-d4003a08]{background-color:#111}.key-label[data-v-d4003a08]{color:#495057!important}}