:root{--bg:#1a1a2e;--surface:#16213e;--surface-raised:#0f3460;--accent:#e94560;--accent-dim:#b03348;--shift-accent:#4ecdc4;--shift-accent-dim:#2e9e98;--text:#eaeaea;--text-muted:#9a9ab0;--radius:12px;--radius-sm:8px;--gap:12px;--font:"Inter", system-ui, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);justify-content:center;align-items:flex-start;min-height:100vh;padding:24px 16px 48px;display:flex}#app{width:100%;max-width:600px}.app-wrapper{flex-direction:column;gap:28px;display:flex}.app-header{text-align:center}.app-title{letter-spacing:.04em;color:var(--accent);font-size:1.8rem;font-weight:700}.key-selector{gap:var(--gap);justify-content:center;display:flex}.selector-group{flex-direction:column;align-items:center;gap:6px;display:flex}.selector-group label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.72rem}.select-wrapper{position:relative}.select-wrapper:after{content:"▾";pointer-events:none;color:var(--text-muted);font-size:.8rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}select{appearance:none;background:var(--surface);border:1px solid var(--surface-raised);color:var(--text);font-size:1rem;font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;outline:none;padding:10px 36px 10px 16px;transition:border-color .15s}select:focus{border-color:var(--accent)}.chord-grid{gap:var(--gap);grid-template-columns:repeat(7,1fr);display:grid}@media (width<=480px){.chord-grid{grid-template-columns:repeat(4,1fr)}}.chord-btn{background:var(--surface);border-radius:var(--radius);color:var(--text);cursor:pointer;font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:2px solid #0000;flex-direction:column;align-items:center;gap:4px;padding:16px 6px;transition:background .12s,border-color .12s,transform 80ms;display:flex}.chord-btn:hover{background:var(--surface-raised);border-color:var(--accent-dim)}.chord-btn:active{transform:scale(.96)}.chord-btn--active{background:var(--surface-raised);border-color:var(--accent)}.chord-btn--shifted{border-color:var(--shift-accent-dim)}.chord-btn--shifted .chord-roman,.chord-btn--shifted .chord-quality,.chord-btn--shifted .chord-name{color:var(--shift-accent)}.chord-roman{color:var(--text-muted);letter-spacing:.05em;font-size:.78rem;font-weight:600}.chord-btn--active .chord-roman{color:var(--accent)}.chord-name{font-size:1.1rem;font-weight:700}.chord-quality{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.voicing-display{text-align:center;min-height:2rem;font-size:.95rem}.voicing-placeholder{color:var(--text-muted);font-style:italic}.voicing-info{color:var(--text);font-weight:500}.voicing-info em{color:var(--text-muted);font-size:.85rem;font-style:normal}.control-panel{border-top:1px solid var(--surface-raised);padding-top:8px}.control-panel__handle{color:var(--text-muted);cursor:pointer;font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;background:0 0;border:none;justify-content:center;align-items:center;gap:6px;width:100%;padding:4px 0;font-size:.78rem;transition:color .15s;display:flex}.control-panel__handle:hover{color:var(--text)}.control-panel__chevron{font-size:.65rem}.control-panel__body{flex-direction:column;gap:12px;padding:16px 0 4px;display:flex}.control-row{justify-content:space-between;align-items:center;display:flex}.control-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}.mode-tabs{justify-content:center;gap:4px;margin-top:12px;display:flex}.mode-tab{border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-family:var(--font);letter-spacing:.06em;text-transform:uppercase;background:0 0;border:1px solid #0000;padding:6px 20px;font-size:.82rem;font-weight:500;transition:color .15s,border-color .15s}.mode-tab:hover{color:var(--text)}.mode-tab--active{border-color:var(--accent);color:var(--accent)}.detect-view{flex-direction:column;gap:28px;display:flex}.detect-chord-display{text-align:center;flex-direction:column;justify-content:center;gap:8px;min-height:120px;display:flex}.detect-chord-name{letter-spacing:-.02em;color:var(--text);font-size:clamp(3rem,12vw,7rem);font-weight:700;line-height:1}.detect-chord-notes{color:var(--text-muted);letter-spacing:.12em;min-height:1.4rem;font-size:1rem;font-weight:600}.detect-note--extra{color:var(--surface-raised)}.detect-diatonic{color:var(--accent);letter-spacing:.06em;text-transform:uppercase;min-height:1.2rem;font-size:.82rem}.detect-controls{flex-direction:column;align-items:center;gap:12px;display:flex}.detect-status{color:var(--text-muted);letter-spacing:.06em;font-size:.75rem}.detect-keyboard-wrap{flex-direction:column;gap:8px;width:100%;display:flex;overflow-x:auto}.piano-clear-btn{background:var(--surface);border:1px solid var(--border,#555);border-radius:var(--radius-sm);color:var(--text-muted,#aaa);cursor:pointer;align-self:flex-end;padding:4px 12px;font-size:.75rem}.piano-clear-btn:hover{background:var(--surface-raised,#2a2a2a);color:var(--text)}.piano-keyboard{-webkit-user-select:none;user-select:none;width:100%;min-width:280px;height:110px;position:relative}.piano-key{cursor:pointer;border-radius:0 0 4px 4px;transition:background 50ms;position:absolute}.piano-key--white{box-sizing:border-box;background:#e8e8e8;border:1px solid #999;height:100%;top:0}.piano-key--white:hover{background:#f5f5f5}.piano-key--white.piano-key--active{background:var(--accent)}.piano-key--black{z-index:2;box-sizing:border-box;background:#1a1a1a;border:1px solid #000;height:62%;top:0}.piano-key--black:hover{background:#333}.piano-key--black.piano-key--active{background:var(--accent-dim)}.build-info{color:var(--text-muted);opacity:.45;letter-spacing:.04em;pointer-events:none;font-size:.65rem;font-family:var(--font);position:fixed;bottom:8px;right:12px}.segment-toggle{background:var(--surface);border-radius:var(--radius-sm);gap:2px;padding:3px;display:flex}.segment-btn{border-radius:calc(var(--radius-sm) - 2px);color:var(--text-muted);cursor:pointer;font-family:var(--font);background:0 0;border:none;padding:6px 16px;font-size:.82rem;font-weight:500;transition:background .15s,color .15s}.segment-btn:hover{color:var(--text)}.segment-btn--active{background:var(--surface-raised);color:var(--text)}