:root{--bg-color:#1a1a2e;--surface-color:#16213e;--border-color:#334155;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--accent-color:#6366f1}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background:var(--bg-color);color:var(--text-primary);min-height:100dvh}#app{min-height:100dvh}.key-selector[data-v-8cb1e122]{align-items:center;gap:.75rem;padding:1rem;display:flex}.key-selector label[data-v-8cb1e122]{color:var(--text-primary);align-items:center;gap:.4rem;font-size:1rem;display:flex}.key-selector select[data-v-8cb1e122]{border:1px solid var(--border-color);background:var(--surface-color);color:var(--text-primary);cursor:pointer;border-radius:8px;padding:.5rem .75rem;font-size:1rem}.chord-button[data-v-e8fb5602]{aspect-ratio:1;border:2px solid var(--border-color);background:var(--surface-color);min-width:0;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:12px;outline:none;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;padding:.45rem;transition:background .1s,transform .1s,border-color .1s;display:flex}.chord-button[data-v-e8fb5602]:active,.chord-button.active[data-v-e8fb5602]{background:var(--accent-color);border-color:var(--accent-color);transform:scale(.95)}.chord-button.selectable[data-v-e8fb5602]{cursor:crosshair}.chord-button.selected[data-v-e8fb5602]{border-color:#daa520;box-shadow:0 0 8px #daa52080}.chord-button.selectable.selected[data-v-e8fb5602]{background:#daa52026}.degree[data-v-e8fb5602]{opacity:.6;font-size:.85rem}.label[data-v-e8fb5602]{margin-top:2px;font-size:1.3rem;font-weight:600}.chord-bar[data-v-e3d4480f]{flex:1;gap:.5rem;padding:.25rem .5rem;display:flex}.chord-bar[data-v-e3d4480f]::-webkit-scrollbar{height:4px}.chord-bar[data-v-e3d4480f]::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.control-panel[data-v-14fa60aa]{flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem;display:flex}.control-group[data-v-14fa60aa]{align-items:center;gap:.5rem;display:flex}.control-label[data-v-14fa60aa]{opacity:.7;min-width:3rem;font-size:.85rem}.control-panel select[data-v-14fa60aa]{border:1px solid var(--border-color);background:var(--surface-color);color:var(--text-primary);cursor:pointer;border-radius:8px;padding:.4rem .75rem;font-size:.85rem}.toggle-buttons[data-v-14fa60aa]{border:1px solid var(--border-color);border-radius:8px;display:flex;overflow:hidden}.toggle-buttons button[data-v-14fa60aa],.midi-toggle[data-v-14fa60aa]{background:var(--surface-color);color:var(--text-primary);cursor:pointer;border:none;padding:.4rem .75rem;font-size:.85rem;transition:background .15s}.toggle-buttons button.active[data-v-14fa60aa],.midi-toggle.active[data-v-14fa60aa]{background:var(--accent-color);color:#fff}.midi-toggle[data-v-14fa60aa]{border:1px solid var(--border-color);border-radius:8px;min-width:3rem}.midi-toggle.disabled[data-v-14fa60aa]{opacity:.4;cursor:not-allowed}.custom-mode-toggle[data-v-14fa60aa]{border:1px solid var(--border-color);background:var(--surface-color);color:var(--text-primary);cursor:pointer;border-radius:8px;min-width:6rem;padding:.4rem .75rem;font-size:.85rem;transition:background .15s,border-color .15s}.custom-mode-toggle.selecting[data-v-14fa60aa]{color:#fff;background:#b8860b;border-color:#daa520}.custom-mode-toggle.reordering[data-v-14fa60aa]{color:#fff;background:#6a5acd;border-color:#7b68ee}.custom-mode-toggle.active[data-v-14fa60aa]{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.octave-display[data-v-14fa60aa]{background:var(--surface-color);min-width:2rem;color:var(--text-primary);justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex}.toggle-buttons button[data-v-14fa60aa]:disabled{opacity:.3;cursor:not-allowed}.app[data-v-c18a295b]{max-width:960px;margin:0 auto;padding:1rem}.app-header[data-v-c18a295b]{justify-content:space-between;align-items:center;display:flex}.app-header h1[data-v-c18a295b]{margin:0;padding:.5rem 1rem;font-size:1.5rem}.mode-toggle[data-v-c18a295b]{border:1px solid var(--border-color);border-radius:8px;margin-right:1rem;display:flex;overflow:hidden}.mode-toggle button[data-v-c18a295b]{background:var(--surface-color);color:var(--text-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;outline:none;padding:.4rem .75rem;font-size:.85rem;transition:background .15s}.mode-toggle button.active[data-v-c18a295b]{background:var(--accent-color);color:#fff}.chord-rows[data-v-c18a295b]{flex-direction:column;gap:.25rem;display:flex}.chord-row[data-v-c18a295b]{align-items:center;display:flex}.row-label[data-v-c18a295b]{opacity:.5;text-align:right;flex-shrink:0;min-width:4.5rem;padding-right:.5rem;font-size:.7rem}.start-screen[data-v-c18a295b]{justify-content:center;align-items:center;min-height:60vh;display:flex}.start-button[data-v-c18a295b]{border:2px solid var(--accent-color);background:var(--surface-color);color:var(--text-primary);cursor:pointer;border-radius:20px;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 3rem;font-size:1.2rem;transition:background .2s,transform .1s;display:flex}.start-button[data-v-c18a295b]:active{background:var(--accent-color);transform:scale(.95)}.start-icon[data-v-c18a295b]{font-size:3rem}.active-grid[data-v-c18a295b]{flex-wrap:wrap;place-content:center;gap:.75rem;min-height:60vh;padding:1rem;display:flex}.active-grid:not(.reordering) .active-chord-wrapper[data-v-c18a295b]{width:200px;height:200px}.active-grid:not(.reordering) .active-chord-wrapper[data-v-c18a295b] .chord-button{min-height:100%}.active-grid:not(.reordering) .active-chord-wrapper[data-v-c18a295b] .chord-button .label{font-size:2.2rem}.active-grid.reordering .active-chord-wrapper[data-v-c18a295b]{width:70px;height:70px}.active-grid.reordering[data-v-c18a295b]{border:2px dashed #daa52066;border-radius:12px}.active-chord-wrapper[data-v-c18a295b]{position:relative}.active-chord-wrapper.dragging[data-v-c18a295b]{opacity:.5}.active-chord-wrapper.reorder-mode[data-v-c18a295b]{cursor:grab}.active-chord-wrapper.reorder-mode[data-v-c18a295b]:active{cursor:grabbing}.active-chord-wrapper.reorder-mode[data-v-c18a295b] .chord-button{pointer-events:none}.chord-grid-enter-active[data-v-c18a295b],.chord-grid-leave-active[data-v-c18a295b]{transition:all .3s}.chord-grid-enter-from[data-v-c18a295b],.chord-grid-leave-to[data-v-c18a295b]{opacity:0;transform:scale(.8)}.chord-grid-move[data-v-c18a295b]{transition:transform .3s}.empty-active[data-v-c18a295b]{opacity:.5;justify-content:center;align-items:center;padding:3rem 1rem;font-size:.9rem;display:flex}