.piano-app.svelte-ivr4pj{display:flex;flex-direction:column;gap:12px}.piano-app.compact.svelte-ivr4pj{gap:4px}.toolbar.svelte-ivr4pj{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-group.svelte-ivr4pj{display:flex;align-items:center;gap:4px}.range-select.svelte-ivr4pj{padding:5px 8px;border-radius:6px;border:1px solid #d1d5db;background:#fff;font-size:.8rem;color:#1f2937;cursor:pointer}.dark .range-select.svelte-ivr4pj{background:#1f1f2e;border-color:#444;color:#e5e7eb}.tool-btn.svelte-ivr4pj{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .12s ease;padding:0}.tool-btn.svelte-ivr4pj svg{width:18px;height:18px}.tool-btn.svelte-ivr4pj:hover{background:#f1f5f9;color:#334155;border-color:#94a3b8}.tool-btn.active.svelte-ivr4pj{background:#eff6ff;color:#3b82f6;border-color:#3b82f6}.dark .tool-btn.svelte-ivr4pj{background:#1f1f2e;border-color:#444;color:#94a3b8}.dark .tool-btn.svelte-ivr4pj:hover{background:#2a2a3a;color:#e5e7eb;border-color:#666}.dark .tool-btn.active.svelte-ivr4pj{background:#1e3a5f;color:#60a5fa;border-color:#3b82f6}.tool-btn.keyboard-btn.svelte-ivr4pj svg{width:24px;height:24px}.tool-btn.panic-btn.svelte-ivr4pj{color:#b91c1c;border-color:#fca5a5;background:#fef2f2}.tool-btn.panic-btn.svelte-ivr4pj:hover{background:#fee2e2;color:#991b1b;border-color:#ef4444}.dark .tool-btn.panic-btn.svelte-ivr4pj{background:#2a1212;border-color:#7f1d1d;color:#fca5a5}.dark .tool-btn.panic-btn.svelte-ivr4pj:hover{background:#3b1414;color:#fecaca;border-color:#ef4444}.panic-glyph.svelte-ivr4pj{font-size:1.1rem;font-weight:900;line-height:1}.midi-dot.svelte-ivr4pj{position:absolute;top:4px;right:4px;width:6px;height:6px;background:#22c55e;border-radius:50%}.active-color-dot.svelte-ivr4pj{position:absolute;bottom:3px;right:3px;width:8px;height:8px;border-radius:50%;border:1.5px solid white;box-shadow:0 0 0 1px #0003}.dark .active-color-dot.svelte-ivr4pj{border-color:#1f1f2e;box-shadow:0 0 0 1px #ffffff4d}.color-bar.svelte-ivr4pj{display:flex;align-items:center;gap:12px;padding:8px 10px;background:linear-gradient(to right,#3b82f60f,#8b5cf60f);border:1px solid rgba(59,130,246,.25);border-radius:8px;flex-wrap:wrap}.dark .color-bar.svelte-ivr4pj{background:linear-gradient(to right,#3b82f61a,#8b5cf61a);border-color:#3b82f666}.color-swatches.svelte-ivr4pj{display:flex;align-items:center;gap:6px;flex:1}.color-swatch.svelte-ivr4pj{width:26px;height:26px;border:2px solid rgba(0,0,0,.15);border-radius:50%;cursor:pointer;padding:0;transition:transform .1s,border-color .1s}.color-swatch.svelte-ivr4pj:hover{transform:scale(1.1)}.color-swatch.active.svelte-ivr4pj{border-color:#1f2937;transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 4px #1f2937}.dark .color-swatch.svelte-ivr4pj{border-color:#fff3}.dark .color-swatch.active.svelte-ivr4pj{border-color:#fff;box-shadow:0 0 0 2px #1f1f2e,0 0 0 4px #fff}.clear-all-btn.svelte-ivr4pj{padding:6px 12px;font-size:.75rem;font-weight:500;border-radius:6px;border:1px solid #d1d5db;background:#fff;color:#475569;cursor:pointer;transition:all .1s}.clear-all-btn.svelte-ivr4pj:hover:not(:disabled){background:#fef2f2;border-color:#fca5a5;color:#dc2626}.clear-all-btn.svelte-ivr4pj:disabled{opacity:.4;cursor:default}.dark .clear-all-btn.svelte-ivr4pj{background:#1f1f2e;border-color:#444;color:#cbd5e1}.dark .clear-all-btn.svelte-ivr4pj:hover:not(:disabled){background:#3a1f1f;border-color:#b91c1c;color:#fca5a5}.keyboard-container.color-mode.svelte-ivr4pj{box-shadow:0 0 0 2px #3b82f666}.midi-menu-backdrop.svelte-ivr4pj{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999}.midi-menu.svelte-ivr4pj{position:fixed;z-index:1000;min-width:180px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:4px;display:flex;flex-direction:column;gap:2px}.dark .midi-menu.svelte-ivr4pj{background:#1f1f2e;border-color:#444;box-shadow:0 4px 16px #0006}.midi-menu-item.svelte-ivr4pj{padding:8px 12px;font-size:.8rem;border-radius:6px;border:none;background:none;text-align:left;color:#374151}.dark .midi-menu-item.svelte-ivr4pj{color:#e5e7eb}.midi-menu-item.device-name.svelte-ivr4pj{display:flex;align-items:center;gap:8px;font-weight:600}.midi-menu-item.status-text.svelte-ivr4pj{color:#6b7280;font-style:italic}.dark .midi-menu-item.status-text.svelte-ivr4pj{color:#9ca3af}.midi-menu-item.action.svelte-ivr4pj{cursor:pointer;color:#3b82f6;font-weight:500}.midi-menu-item.action.svelte-ivr4pj:hover{background:#f1f5f9}.dark .midi-menu-item.action.svelte-ivr4pj{color:#60a5fa}.dark .midi-menu-item.action.svelte-ivr4pj:hover{background:#2a2a3a}.midi-menu-dot.svelte-ivr4pj{width:8px;height:8px;border-radius:50%;flex-shrink:0}.midi-menu-dot.connected.svelte-ivr4pj{background:#22c55e}.keyboard-container.svelte-ivr4pj{border-radius:8px;overflow:hidden}.octave-indicator.svelte-ivr4pj{display:flex;align-items:center;justify-content:center;gap:8px}.oct-btn.svelte-ivr4pj{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;transition:all .1s;padding:0}.oct-btn.svelte-ivr4pj:hover:not(:disabled){background:#f1f5f9;color:#334155}.oct-btn.svelte-ivr4pj:disabled{opacity:.3;cursor:default}.dark .oct-btn.svelte-ivr4pj{background:#1f1f2e;border-color:#444;color:#94a3b8}.dark .oct-btn.svelte-ivr4pj:hover:not(:disabled){background:#2a2a3a;color:#e5e7eb}.oct-label.svelte-ivr4pj{font-size:.8rem;font-weight:600;color:#64748b;min-width:24px;text-align:center}.dark .oct-label.svelte-ivr4pj{color:#94a3b8}.keyboard-help.svelte-ivr4pj{display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:pointer}.keymap-octave.svelte-ivr4pj{--kw: 29px;--bk-half: 13px;position:relative}.keymap-blacks.svelte-ivr4pj{position:relative;height:27px}.keymap-blacks.svelte-ivr4pj kbd.bk:where(.svelte-ivr4pj){position:absolute;top:0;display:flex;align-items:center;justify-content:center;width:26px;height:24px;border-radius:4px;font-size:.7rem;font-weight:600;font-family:inherit;background:#333;color:#fff;border:1px solid #555;transition:background .06s ease,transform .06s ease,box-shadow .06s ease}.keymap-blacks.svelte-ivr4pj kbd.bk.active:where(.svelte-ivr4pj){background:#3b82f6;border-color:#2563eb;color:#fff;transform:scale(1.1);box-shadow:0 0 8px #3b82f699;z-index:1}.dark .keymap-blacks.svelte-ivr4pj kbd.bk:where(.svelte-ivr4pj){background:#d4d4e0;color:#1a1a2e;border-color:#888}.dark .keymap-blacks.svelte-ivr4pj kbd.bk.active:where(.svelte-ivr4pj){background:#60a5fa;border-color:#3b82f6;color:#fff;box-shadow:0 0 8px #60a5fa99}.keymap-whites.svelte-ivr4pj{display:flex;gap:3px}.keymap-whites.svelte-ivr4pj kbd.wk:where(.svelte-ivr4pj){display:flex;align-items:center;justify-content:center;width:26px;height:24px;border-radius:4px;font-size:.7rem;font-weight:600;font-family:inherit;background:#fff;color:#333;border:1px solid #ccc;transition:background .06s ease,transform .06s ease,box-shadow .06s ease}.keymap-whites.svelte-ivr4pj kbd.wk.active:where(.svelte-ivr4pj){background:#bfdbfe;border-color:#3b82f6;color:#1e40af;transform:scale(1.1);box-shadow:0 0 8px #3b82f666;z-index:1}.dark .keymap-whites.svelte-ivr4pj kbd.wk:where(.svelte-ivr4pj){background:#2a2a3a;color:#e5e7eb;border-color:#555}.dark .keymap-whites.svelte-ivr4pj kbd.wk.active:where(.svelte-ivr4pj){background:#1e3a5f;border-color:#3b82f6;color:#93c5fd;box-shadow:0 0 8px #3b82f680}.keymap-labels.svelte-ivr4pj{display:flex;gap:3px;margin-top:2px}.keymap-labels.svelte-ivr4pj span:where(.svelte-ivr4pj){display:flex;align-items:center;justify-content:center;width:26px;height:16px;font-size:.65rem;color:#94a3b8;font-weight:500}.dark .keymap-labels.svelte-ivr4pj span:where(.svelte-ivr4pj){color:#64748b}.octave-divider.svelte-ivr4pj{width:80%;height:1px;background:#e2e8f0;margin:4px 0}.dark .octave-divider.svelte-ivr4pj{background:#334155}.desktop-only.svelte-ivr4pj{display:flex}@media (max-width: 640px){.desktop-only.svelte-ivr4pj,.octave-indicator.svelte-ivr4pj{display:none}.tool-btn.svelte-ivr4pj{width:38px;height:38px}.tool-btn.svelte-ivr4pj svg{width:20px;height:20px}.tool-btn.keyboard-btn.svelte-ivr4pj svg{width:26px;height:26px}}