.piano-container[data-v-090d93c3]{display:flex;flex-direction:column;align-items:center;width:100%}.piano[data-v-090d93c3]{display:flex;flex-direction:column;align-items:center}.keys[data-v-090d93c3]{display:flex;position:relative}.key[data-v-090d93c3]{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;transition:background-color .05s ease}.key .note[data-v-090d93c3]{position:absolute;bottom:10px;width:100%;text-align:center;color:#444;font-weight:700}.key.black[data-v-090d93c3]{width:30px;height:120px;margin:0 -15px;z-index:1;background-color:#000;box-shadow:0 2px 4px #0003}.key.black .note[data-v-090d93c3]{bottom:20px;color:#fff}.key.black .enharmonic[data-v-090d93c3]{position:absolute;bottom:5px;width:100%;text-align:center;color:#999;font-size:.65rem}.key.preview-note[data-v-090d93c3]{background-color:#c8e6c9}.key.preview-note.black[data-v-090d93c3]{background-color:#81c784}.key.active-note[data-v-090d93c3]{background-color:#4caf50}.key.active-note.black[data-v-090d93c3]{background-color:#2e7d32}.key[data-v-090d93c3]:hover{filter:brightness(.95)}.key[data-v-090d93c3]:active{transform:translateY(1px)}@media (max-width: 459px){.key[data-v-090d93c3]{width:19px;height:130px;margin:-.25px;font-size:.6rem}.key.black[data-v-090d93c3]{width:14px;height:80px;margin:0 -8px}}@media (min-width: 460px){.key[data-v-090d93c3]{width:25px;height:160px;font-size:.7rem}.key.black[data-v-090d93c3]{width:19px;height:100px;margin:0 -10px}}@media (min-width: 600px){.key[data-v-090d93c3]{width:30px;height:180px;font-size:.75rem}.key.black[data-v-090d93c3]{width:22px;height:110px;margin:0 -12px}}@media (min-width: 768px){.key[data-v-090d93c3]{width:35px;height:180px;font-size:.7rem}.key.black[data-v-090d93c3]{width:25px;height:110px;margin:0 -14px}}@media (min-width: 900px){.key[data-v-090d93c3]{width:40px;height:200px;font-size:.8rem}.key.black[data-v-090d93c3]{width:30px;height:120px;margin:0 -15px}}.piano-controls-container[data-v-b91d9fb7]{padding:0 1rem;margin-top:1rem}.piano-controls[data-v-b91d9fb7]{display:flex;gap:1.5rem;flex-wrap:nowrap;justify-content:center;align-items:flex-start;padding:1.25rem 1.5rem;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.control-item[data-v-b91d9fb7]{display:flex;flex-direction:column;gap:.75rem;min-width:200px;flex:1;max-width:300px}.volume-control[data-v-b91d9fb7]{min-width:110px;max-width:130px;flex:0 0 auto;align-items:flex-start}.volume-knob-wrapper[data-v-b91d9fb7]{display:flex;flex-direction:row;align-items:center;gap:.75rem;padding:.5rem;background-color:rgba(var(--v-theme-surface),.5);border:1px solid rgba(var(--v-theme-on-surface),.1);border-radius:8px;transition:all .2s ease;width:100%;min-height:48px}.volume-knob-wrapper[data-v-b91d9fb7]:hover{border-color:rgba(var(--v-theme-primary),.3);background-color:rgba(var(--v-theme-surface),.8)}.volume-knob-desktop[data-v-b91d9fb7]{display:flex;flex-direction:row;align-items:center;gap:.75rem;width:100%}.volume-slider-mobile[data-v-b91d9fb7]{display:none;flex-direction:column;align-items:center;gap:.5rem;width:100%}.volume-slider-horizontal[data-v-b91d9fb7]{width:100%;margin:0}.volume-knob[data-v-b91d9fb7]{position:relative;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--v-theme-surface),.95),rgba(var(--v-theme-on-surface),.15));border:2px solid rgba(var(--v-theme-on-surface),.2);box-shadow:inset 0 2px 4px #0000001a,0 2px 8px #0000001a;display:flex;align-items:center;justify-content:center;transition:all .2s ease;cursor:pointer;flex-shrink:0}.volume-knob[data-v-b91d9fb7]:hover{border-color:rgba(var(--v-theme-primary),.5);transform:scale(1.05)}.volume-knob[data-v-b91d9fb7]:active{transform:scale(.95)}.knob-indicator[data-v-b91d9fb7]{position:absolute;top:3px;left:50%;transform:translate(-50%) rotate(var(--rotation));transform-origin:center 17px;width:3px;height:7px;background-color:rgba(var(--v-theme-primary),1);border-radius:2px;box-shadow:0 1px 2px #0000004d;transition:transform .1s ease}.knob-value[data-v-b91d9fb7]{font-size:.875rem;font-weight:600;color:rgba(var(--v-theme-primary),1);-webkit-user-select:none;user-select:none;flex:1;text-align:left;line-height:1;min-width:45px}.control-label[data-v-b91d9fb7]{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:rgba(var(--v-theme-on-surface),.7);text-transform:uppercase;letter-spacing:.5px}.instrument-control[data-v-b91d9fb7]{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgba(var(--v-theme-surface),.5);border:1px solid rgba(var(--v-theme-on-surface),.1);border-radius:8px;transition:all .2s ease}.instrument-control[data-v-b91d9fb7]:hover{border-color:rgba(var(--v-theme-primary),.3);background-color:rgba(var(--v-theme-surface),.8)}.nav-btn[data-v-b91d9fb7]{flex-shrink:0;transition:all .2s ease}.nav-btn[data-v-b91d9fb7]:hover:not(:disabled){transform:scale(1.1)}.nav-btn[data-v-b91d9fb7]:disabled{opacity:.3}.instrument-display[data-v-b91d9fb7]{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:center;padding:.25rem .5rem;min-height:32px}.instrument-icon[data-v-b91d9fb7]{color:rgba(var(--v-theme-primary),.8)}.instrument-name[data-v-b91d9fb7]{font-size:.9375rem;font-weight:500;color:rgba(var(--v-theme-on-surface),1);-webkit-user-select:none;user-select:none}.tempo-control[data-v-b91d9fb7]{display:flex;align-items:center;gap:.75rem;padding:.5rem;background-color:rgba(var(--v-theme-surface),.5);border:1px solid rgba(var(--v-theme-on-surface),.1);border-radius:8px;transition:all .2s ease}.tempo-control[data-v-b91d9fb7]:hover{border-color:rgba(var(--v-theme-primary),.3);background-color:rgba(var(--v-theme-surface),.8)}.tempo-value[data-v-b91d9fb7]{font-size:1.25rem;font-weight:700;color:rgba(var(--v-theme-primary),1);min-width:45px;text-align:right}.tempo-unit[data-v-b91d9fb7]{font-size:.75rem;font-weight:600;color:rgba(var(--v-theme-on-surface),.6);text-transform:uppercase;letter-spacing:.5px}.tempo-slider[data-v-b91d9fb7]{flex:1;margin:0}.v-theme--dark .piano-controls[data-v-b91d9fb7]{background-color:rgba(var(--v-theme-surface),.6);border:1px solid rgba(var(--v-theme-on-surface),.1)}.v-theme--light .piano-controls[data-v-b91d9fb7]{background-color:rgba(var(--v-theme-surface),.8);border:1px solid rgba(var(--v-theme-on-surface),.1)}@media (max-width: 600px){.piano-controls-container[data-v-b91d9fb7]{padding:0 .75rem}.piano-controls[data-v-b91d9fb7]{flex-direction:column;gap:1rem;padding:1rem}.control-item[data-v-b91d9fb7]{min-width:100%;max-width:100%;width:100%}.volume-control[data-v-b91d9fb7]{min-width:100%;max-width:100%}.volume-knob-desktop[data-v-b91d9fb7]{display:none}.volume-slider-mobile[data-v-b91d9fb7]{display:flex}.knob-value-mobile[data-v-b91d9fb7]{font-size:.875rem;font-weight:600;color:rgba(var(--v-theme-primary),1);-webkit-user-select:none;user-select:none;text-align:center}.volume-knob-wrapper[data-v-b91d9fb7]{justify-content:center;flex-direction:column}.tempo-control[data-v-b91d9fb7]{flex-wrap:wrap}.tempo-value[data-v-b91d9fb7]{font-size:1.125rem}.instrument-display[data-v-b91d9fb7]{min-height:28px}.instrument-name[data-v-b91d9fb7]{font-size:.875rem}}@media (max-width: 400px){.piano-controls[data-v-b91d9fb7]{padding:.75rem;gap:1rem}.control-label[data-v-b91d9fb7]{font-size:.75rem}}