:root{--color-close: #4caf50;--color-medium: #ff9800;--color-far: #f44336;--color-diatonic: #ab47bc;--color-tonic: #2196f3;--color-subdominant: #ff9800;--color-dominant: #f44336;--bg-primary: #1a1a2e;--bg-panel: #16213e;--bg-card: #1f2b47;--text-primary: #e0e0e0;--text-accent: #ffffff;--text-muted: #8892a4;--border-color: #2a3a5c;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{min-width:320px;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{padding:1rem 2rem;background-color:var(--bg-panel);border-bottom:1px solid var(--border-color)}.app-header h1{font-size:1.5rem;color:var(--text-accent);font-weight:600}.app-header .subtitle{font-size:.85rem;color:var(--text-muted)}.app-main{flex:1;padding:2rem}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background-color:var(--bg-panel);border-bottom:1px solid var(--border-color)}.app-header h1{font-size:1.25rem;color:var(--text-accent);font-weight:600;margin:0}.app-header .subtitle{font-size:.75rem;color:var(--text-muted);margin:0}.app-header__tonic{display:flex;align-items:baseline;gap:.5rem}.tonic-label{font-size:.8rem;color:var(--text-muted)}.tonic-chord{font-size:1.5rem;font-weight:700;color:var(--color-tonic)}.tonic-notes{font-size:.8rem;color:var(--text-muted)}.app-key-selector{padding:.75rem 1.5rem;background-color:var(--bg-panel);border-bottom:1px solid var(--border-color)}.app-layout{display:grid;grid-template-columns:280px 1fr 280px;flex:1;overflow:hidden}@media(max-width:900px){.app-layout{grid-template-columns:1fr}}.app-main{padding:1.5rem;overflow-y:auto}.app-detail{padding:1.5rem;border-left:1px solid var(--border-color);overflow-y:auto}.placeholder{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-muted);font-style:italic}.key-selector{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.key-buttons{display:flex;gap:.25rem}.key-btn{width:2.5rem;height:2rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-card);color:var(--text-primary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.key-btn:hover{border-color:var(--color-tonic);color:var(--text-accent)}.key-btn--active{background:var(--color-tonic);color:#fff;border-color:var(--color-tonic)}.key-controls{display:flex;align-items:center;gap:1rem}.mode-toggle{display:flex;gap:0}.mode-btn{padding:.3rem .8rem;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:.8rem;cursor:pointer;transition:all .15s}.mode-btn:first-child{border-radius:4px 0 0 4px}.mode-btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mode-btn--active{background:var(--color-tonic);color:#fff;border-color:var(--color-tonic)}.seventh-toggle{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-muted);cursor:pointer}.seventh-toggle input{cursor:pointer}.chord-browser{padding:1rem;border-right:1px solid var(--border-color);overflow-y:auto;background:var(--bg-panel)}.chord-browser__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:1rem}.chord-browser__group{margin-bottom:1.25rem}.chord-browser__group-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.chord-browser__group--tonic .chord-browser__group-title{color:var(--color-tonic)}.chord-browser__group--diatonic .chord-browser__group-title{color:var(--color-diatonic)}.chord-browser__group--close .chord-browser__group-title{color:var(--color-close)}.chord-browser__group--medium .chord-browser__group-title{color:var(--color-medium)}.chord-browser__group--far .chord-browser__group-title{color:var(--color-far)}.chord-browser__count{font-size:.65rem;background:var(--bg-card);padding:.1rem .4rem;border-radius:10px;color:var(--text-muted)}.chord-browser__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.35rem}.chord-card{display:flex;flex-direction:column;align-items:center;padding:.4rem .25rem;border:1px solid;border-radius:6px;background:var(--bg-card);cursor:pointer;transition:all .15s;font-family:inherit}.chord-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000004d}.chord-card__symbol{font-size:.85rem;font-weight:600;color:var(--text-accent)}.chord-card__shared{font-size:.55rem;margin-top:.15rem}.progression-timeline{margin-bottom:1.5rem}.progression-timeline__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.progression-timeline__title{font-size:1rem;font-weight:600;color:var(--text-accent)}.timeline-section{border:1px solid var(--border-color);border-radius:8px;padding:.75rem;margin-bottom:.75rem;background:var(--bg-panel);cursor:pointer;transition:border-color .15s}.timeline-section--active{border-color:var(--color-tonic)}.timeline-section__chords{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;min-height:2.5rem}.timeline-section__empty{display:flex;align-items:center;color:var(--text-muted);font-size:.8rem;font-style:italic;padding:.25rem}.chord-slot{position:relative;display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem .35rem;border:1px solid var(--border-color);border-bottom:3px solid;border-radius:6px;background:var(--bg-card);cursor:grab;transition:all .15s;min-width:50px}.chord-slot:active{cursor:grabbing}.chord-slot--dragging{opacity:.4}.chord-slot:hover{border-color:var(--text-muted)}.chord-slot--selected{border-color:var(--color-tonic);box-shadow:0 0 0 1px var(--color-tonic)}.chord-slot__symbol{font-size:.9rem;font-weight:600;color:var(--text-accent)}.chord-slot__dot{width:6px;height:6px;border-radius:50%;margin-top:.2rem}.chord-slot__delete{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border:none;border-radius:50%;background:var(--color-far);color:#fff;font-size:.65rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;padding:0}.chord-slot:hover .chord-slot__delete{opacity:1}.section-label{display:flex;align-items:center;gap:.5rem}.section-label__select{padding:.2rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-card);color:var(--text-primary);font-size:.8rem;font-family:inherit;cursor:pointer}.section-label__input{padding:.2rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-card);color:var(--text-primary);font-size:.8rem;font-family:inherit;width:120px}.section-label__delete{width:20px;height:20px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:color .15s}.section-label__delete:hover{color:var(--color-far)}.btn{padding:.4rem 1rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card);color:var(--text-primary);font-size:.85rem;font-family:inherit;cursor:pointer;transition:all .15s}.btn:hover{border-color:var(--color-tonic);color:var(--text-accent)}.btn--small{padding:.25rem .6rem;font-size:.75rem}.btn--primary{background:var(--color-tonic);border-color:var(--color-tonic);color:#fff}.btn--primary:hover{opacity:.9}.btn:disabled{opacity:.4;cursor:not-allowed}.radial-viz{display:flex;justify-content:center;margin:1rem 0}.radial-viz svg{max-width:100%;height:auto}.function-labels{margin-top:1.5rem}.function-labels__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:.75rem}.function-labels__section{margin-bottom:1rem}.function-labels__section-name{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.25rem}.function-labels__row{display:flex;gap:.5rem;flex-wrap:wrap}.function-labels__chord{display:flex;flex-direction:column;align-items:center;padding:.25rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-card);min-width:40px}.function-labels__roman{font-size:.8rem;font-weight:600;color:var(--text-accent)}.function-labels__func{font-size:.75rem;font-weight:700}.function-labels__syntactical{font-size:.55rem;color:var(--text-muted);margin-top:.1rem}.voice-leading{margin-top:1.5rem}.voice-leading__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:.75rem}.voice-leading__section{margin-bottom:1rem}.voice-leading__section-name{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.25rem}.voice-leading__pairs{display:flex;flex-direction:column;gap:.25rem}.voice-leading__pair{display:flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.2rem .4rem;border-radius:4px}.voice-leading__pair--rough{background:#f443361a;border:1px solid rgba(244,67,54,.3)}.voice-leading__from,.voice-leading__to{font-weight:600;color:var(--text-accent)}.voice-leading__arrow{color:var(--text-muted)}.voice-leading__shared{font-size:.7rem;color:var(--text-muted);margin-left:auto}.harmonic-tools{margin-bottom:1.5rem}.harmonic-tools__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:.75rem}.harmonic-tools__hint{font-size:.8rem;color:var(--text-muted);font-style:italic}.harmonic-tools__buttons{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.75rem}.harmonic-tools__result{margin-top:.75rem;padding:.75rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card)}.harmonic-tools__result-label{font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}.harmonic-tools__result-chords{display:flex;flex-wrap:wrap;gap:.35rem}.playback-controls{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.playback-controls__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:0}.playback-controls__buttons{display:flex;gap:.5rem}.playback-controls__tempo{display:flex;flex-direction:column;gap:.25rem}.playback-controls__tempo label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.playback-controls__tempo input[type=range]{width:100%;cursor:pointer}.playback-controls__tempo-value{font-size:.85rem;font-weight:600;color:var(--text-accent);min-width:2rem}.guitar-diagram{margin-bottom:1.5rem}.guitar-diagram__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:.75rem}.guitar-diagram__hint{font-size:.8rem;color:var(--text-muted);font-style:italic}.guitar-diagram__svg{display:flex;justify-content:center;margin:.5rem 0}.guitar-diagram__svg svg{max-width:100%;height:auto;max-height:220px}.guitar-diagram__nav{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem}.guitar-diagram__nav-label{font-size:.75rem;color:var(--text-muted);min-width:80px;text-align:center}.save-export{margin-top:1.5rem}.save-export__title{font-size:.9rem;font-weight:600;color:var(--text-accent);margin-bottom:.75rem}.save-export__field{margin-bottom:.75rem}.save-export__field label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.save-export__input{padding:.3rem .5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-card);color:var(--text-primary);font-size:.8rem;font-family:inherit;flex:1}.save-export__buttons{display:flex;gap:.5rem;margin-bottom:.75rem}.save-export__status{font-size:.75rem;color:var(--color-close);margin-bottom:.5rem}.save-export__saved h4{font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem}.save-export__item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.8rem}.save-export__item-name{flex:1;color:var(--text-primary)}