*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}:root{--bg: #f5f2eb;--surface: #fffdf5;--border: #ddd0bb;--primary: #6b8e23;--primary-fg: #ffffff;--text: #2c2520;--text-muted: #7a6a5a;--radius: 6px;--radius-lg: 10px;--gap: 12px}.app{min-height:100vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 20px}.app-header h1{margin:0;font-size:1.35rem;font-weight:700}.app-main{flex:1;display:flex;flex-direction:column;gap:var(--gap);padding:16px;max-width:900px;width:100%;margin:0 auto}.selector-panel{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}.section-title{margin:0;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.section-title--genre{margin-top:4px;padding-top:2px}.section-title--progressions{font-size:.7rem;letter-spacing:.08em;color:var(--primary);padding-bottom:2px;border-bottom:2px solid var(--primary);align-self:flex-start;padding-right:8px}.key-selector{display:flex;flex-direction:column;gap:8px}.key-buttons{display:flex;flex-wrap:wrap;gap:6px}.key-btn{min-width:42px;height:42px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text);transition:background .12s,color .12s,border-color .12s}.key-btn:hover{border-color:var(--primary);color:var(--primary)}.key-btn.active{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}.key-btn--toggle{min-width:54px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}.key-btn__sep{opacity:.45;margin:0 1px;font-weight:400}.key-btn.active .key-btn__alt.is-selected{text-decoration:underline;text-underline-offset:2px}.quality-toggle{display:flex;gap:6px}.quality-btn{padding:5px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text);transition:background .12s,color .12s,border-color .12s}.quality-btn.active{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}.style-tabs{display:flex;flex-wrap:wrap;gap:2px;border-top:1px solid var(--border);padding-top:10px}.style-tab{padding:8px 16px;border:none;border-radius:var(--radius);background:transparent;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text-muted);transition:background .12s,color .12s}.style-tab:hover{background:var(--bg);color:var(--text)}.style-tab.active{background:var(--bg);color:var(--primary)}.content-area{display:flex;flex-direction:column;gap:var(--gap)}.progression-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.progression-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .12s,box-shadow .12s;text-align:left}.progression-item:hover{border-color:var(--primary);box-shadow:0 2px 8px #0d6efd1a}.progression-item.active{border-color:var(--primary);box-shadow:0 2px 8px #0d6efd2e}.prog-name{font-weight:700;font-size:.95rem;margin-bottom:10px}.prog-chords{display:flex;flex-wrap:wrap;gap:6px}.chord-cell{display:flex;flex-direction:column;align-items:center;min-width:44px;background:var(--bg);border-radius:var(--radius);padding:6px 8px}.chord-name{font-size:.83rem;font-weight:700;color:var(--text);white-space:nowrap}.chord-rn{font-size:.7rem;color:var(--text-muted);margin-top:2px;white-space:nowrap}.progression-detail{background:var(--surface);border:1px solid var(--primary);border-radius:var(--radius-lg);padding:20px}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}.detail-header h2{margin:0;font-size:1.05rem;font-weight:700}.close-btn{border:none;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--text-muted);padding:0 4px;flex-shrink:0}.close-btn:hover{color:var(--text)}.detail-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.export-midi-btn,.record-audio-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.8rem;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s}.export-midi-btn:hover,.record-audio-btn:hover:not(:disabled){background:var(--border)}.record-audio-btn:disabled{opacity:.6;cursor:default}.record-audio-btn.recording{background:#dc3545;color:#fff;border-color:#dc3545}.detail-feel{margin:0 0 8px;color:var(--text-muted);font-size:.83rem;font-style:italic}.detail-description{margin:0 0 16px;font-size:.9rem;line-height:1.65}.detail-chords{display:flex;flex-wrap:wrap;gap:8px}.detail-chord-cell{display:flex;flex-direction:column;align-items:center;min-width:50px;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;background:var(--bg);transition:background .15s,border-color .15s}.detail-chord-cell.playhead-active{background:var(--primary);border-color:var(--primary)}.detail-chord-cell.playhead-active .chord-name,.detail-chord-cell.playhead-active .chord-rn{color:var(--primary-fg)}.playback-controls{display:flex;align-items:center;gap:16px;margin:12px 0;padding:10px 14px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}.playback-buttons{display:flex;gap:8px}.ctrl-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--radius);cursor:pointer;font-size:1rem;background:var(--primary);color:var(--primary-fg);transition:opacity .12s}.ctrl-btn:hover:not(:disabled){opacity:.85}.ctrl-btn:disabled{opacity:.4;cursor:default}.ctrl-stop{background:var(--text-muted)}.tempo-control{display:flex;align-items:center;gap:8px;flex:1}.tempo-label{font-size:.8rem;font-weight:600;color:var(--text-muted);white-space:nowrap;min-width:52px;text-align:right}.tempo-slider{flex:1;accent-color:var(--primary);height:4px}.detail-inline-item{list-style:none}.notation-section{margin:4px 0 16px}.notation-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 8px}.progression-notation{border-radius:var(--radius);background:var(--bg);padding:4px 0}.progression-notation svg{display:block}.notation-wrapper{display:flex;flex-direction:column;gap:8px}.instrument-panel{display:flex;flex-direction:column;gap:8px;margin:8px 0;padding:10px 14px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}.instrument-selector{display:flex;gap:6px}.instr-btn{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.85rem;cursor:pointer;transition:background .1s,border-color .1s}.instr-btn.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.instr-btn:hover:not(.active){background:var(--border)}.panel-row{display:flex;gap:6px;flex-wrap:wrap}.option-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.8rem;cursor:pointer;transition:background .1s,border-color .1s}.option-btn.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.option-btn:hover:not(.active){background:var(--border)}@media(max-width:480px){.app-main{padding:10px;gap:10px}.selector-panel{padding:12px}.key-btn{min-width:36px;height:36px;font-size:.75rem}.style-tab{padding:8px 10px;font-size:.8rem}.progression-item{padding:12px 14px}}