.piano-key[data-v-a68c6816]{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.5rem;-webkit-user-select:none;user-select:none;border-radius:0 0 4px 4px;cursor:pointer;transition:transform .1s ease}.white-key[data-v-a68c6816]{background:#fff;height:300px;width:80px;z-index:1;border:1px solid #ccc;border-bottom-width:4px}.black-key[data-v-a68c6816]{background:#333;height:150px;width:40px;z-index:2;border:1px solid #000;border-bottom-width:4px}.key-label[data-v-a68c6816]{position:absolute;bottom:5px;font-size:12px;font-weight:700;color:#000}.black-key .key-label[data-v-a68c6816]{color:#fff;transform:rotate(90deg);margin-bottom:20px}.active[data-v-a68c6816]{transform:translateY(2px)}.white-key.active[data-v-a68c6816]{background-color:#f0f0f0}.black-key.active[data-v-a68c6816]{background-color:#222}.piano-keyboard[data-v-d38a028b]{margin:0 auto;padding:20px}.keyboard-layout[data-v-d38a028b]{position:relative;display:flex;flex-direction:column}.white-keys[data-v-d38a028b]{display:flex;position:relative;z-index:1;gap:2px}.black-keys[data-v-d38a028b]{position:absolute;width:100%;height:0;z-index:2}.black-key-absolute[data-v-d38a028b]{position:absolute;top:0;transform:translate(-30%)}.white-keys[data-v-d38a028b] .white-key{border:1px solid #ccc;border-bottom-width:4px}.black-keys[data-v-d38a028b] .black-key{border:1px solid #000;border-bottom-width:4px}.color-config[data-v-863a4da8]{padding:var(--spacing-lg)}.keyboard-container[data-v-863a4da8]{margin:var(--spacing-xl) auto;max-width:800px;background:var(--light);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}