@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/JetBrainsMonoNerdFont-Regular.ttf) format("truetype")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/JetBrainsMonoNerdFont-Medium.ttf) format("truetype")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/JetBrainsMonoNerdFont-Bold.ttf) format("truetype")}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#12121e;color:#e0e0e0;line-height:1.6}#root{min-height:100vh}.app{max-width:960px;margin:0 auto;padding:2rem}.app-header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #262638}.app-header h1{font-size:2.5rem;color:#4a6fa5;margin-bottom:.5rem}.app-header .subtitle{font-size:1.1rem;color:#888}.toolbar{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1.5rem;background:#1e1e30;border-radius:12px;margin-bottom:1.5rem;align-items:center}.toggle-group{display:flex;flex-direction:column;gap:.5rem}.group-label{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.toggle-buttons{display:flex;gap:.5rem}.toggle-btn{padding:.5rem 1rem;background:#2a2a3e;color:#aaa;border:1px solid #333;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}.toggle-btn:hover{background:#333348;color:#e0e0e0}.toggle-btn.active{background:#4a6fa5;color:#fff;border-color:#4a6fa5;box-shadow:0 0 12px #4a6fa566}.syntax-help-btn{margin-left:auto;padding:.5rem 1.5rem;background:#2a2a3e;color:#aaa;border:1px solid #333;border-radius:6px;cursor:pointer;transition:all .2s}.syntax-help-btn:hover{background:#4a6fa5;color:#fff;border-color:#4a6fa5}.key-selector{background:#2a2a3e;color:#e0e0e0;border:1px solid #333;border-radius:6px;padding:.5rem .75rem;font-size:.9rem;font-family:inherit;cursor:pointer;transition:all .2s}.key-selector:focus{outline:2px solid #4a6fa5;outline-offset:1px}.chord-input-container{position:relative;margin-bottom:1.5rem;background:#1a1a2e;border-radius:8px;border:2px solid #333;padding:1rem;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.chord-input-textarea{width:100%;min-height:120px;padding:0;margin:0;background:transparent;color:#e0e0e0;caret-color:#4a6fa5;border:none;outline:none;font-size:1.1rem;font-family:inherit;line-height:1.5;resize:vertical;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:#4a4a6a #1a1a2e}.chord-input-container.playing .chord-input-textarea{color:transparent}.chord-input-textarea::-webkit-scrollbar{width:8px}.chord-input-textarea::-webkit-scrollbar-track{background:#1a1a2e;border-radius:4px}.chord-input-textarea::-webkit-scrollbar-thumb{background:#4a4a6a;border-radius:4px}.chord-input-textarea::-webkit-scrollbar-thumb:hover{background:#5a5a7a}.chord-input-display{position:absolute;top:1rem;left:1rem;right:1rem;bottom:1rem;padding:0;overflow:hidden;pointer-events:none;font-size:1.1rem;font-family:inherit;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}.chord-token{color:#e0e0e0}.chord-token.chord-active{background:#4a6fa54d;color:#4a6fa5;border-radius:3px;box-shadow:0 0 8px #4a6fa580}.chord-token.chord-invalid{color:#e07a5f;background:#e07a5f26;border-radius:3px;text-decoration:wavy underline;text-decoration-color:#e07a5f}.chord-token.chord-warning{color:#f0a030;background:#f0a03026;border-radius:3px;text-decoration:wavy underline;text-decoration-color:#f0a030}.playback-controls{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;padding:1.5rem;background:#1e1e30;border-radius:12px;margin-bottom:1.5rem}.transport-buttons{display:flex;gap:.5rem}.control-btn,.play-btn{padding:.75rem 1.5rem;background:#2a2a3e;color:#e0e0e0;border:1px solid #333;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:all .2s}.control-btn:hover:not(:disabled),.play-btn:hover:not(:disabled){background:#333348;border-color:#4a6fa5}.control-btn:disabled,.play-btn:disabled{opacity:.3;cursor:not-allowed}.play-btn{min-width:80px}.play-btn.playing{background:#8b2e2e;border-color:#e07a5f;color:#fff}.tempo-control{display:flex;align-items:center;gap:.75rem;flex:1;min-width:200px}.tempo-control label{font-size:.9rem;color:#888}.tempo-slider{flex:1;accent-color:#4a6fa5}.tempo-value{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;color:#e0e0e0;min-width:3rem}.chord-counter{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;color:#aaa;font-size:.95rem;margin-left:auto}.note-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.note-card{flex:1;min-width:150px;padding:1.5rem;background:#1e1e30;border:2px solid;border-radius:12px;text-align:center}.note-name{font-size:2rem;font-weight:700;margin-bottom:.5rem;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.voice-part{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}.note-freq{font-size:.95rem;color:#aaa;margin-bottom:.5rem;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.note-interval{font-size:.85rem;color:#666;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.tuning-comparison{padding:1.5rem;background:#1e1e30;border-radius:12px;margin-bottom:1.5rem}.tuning-header h3{color:#e0e0e0;margin-bottom:1.5rem;text-align:center}.tuning-columns{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.tuning-col{display:flex;flex-direction:column;gap:.75rem}.tuning-col-label{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.5rem;border-radius:6px;text-align:center;margin-bottom:.5rem}.tuning-col-label.just{background:#2a9d8f33;color:#2a9d8f}.tuning-col-label.equal{background:#4a6fa533;color:#4a6fa5}.tuning-row{display:flex;justify-content:space-between;padding:.5rem;background:#2a2a3e;border-radius:6px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.9rem}.tuning-row .note-name{font-size:.9rem;color:#e0e0e0;margin:0}.tuning-row .freq-value{color:#aaa}.cents{color:#888;font-size:.85rem}.cents-zero{color:#2a9d8f}.syntax-reference{position:fixed;top:0;right:0;bottom:0;width:500px;max-width:90vw;background:#1e1e30;border-left:2px solid #262638;box-shadow:-4px 0 20px #00000080;transform:translate(100%);transition:transform .3s ease;overflow-y:auto;z-index:100}.syntax-reference.open{transform:translate(0)}.syntax-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#262638;position:sticky;top:0;z-index:10}.syntax-header h2{color:#e0e0e0;font-size:1.3rem}.close-btn{background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:.5rem;line-height:1;transition:color .2s}.close-btn:hover{color:#e07a5f}.syntax-content{padding:1.5rem}.syntax-content section{margin-bottom:2rem}.syntax-content h3{color:#4a6fa5;font-size:1.1rem;margin-bottom:1rem}.format-section .format-example{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:1.2rem;padding:1rem;background:#2a2a3e;border-radius:8px;margin-bottom:1rem}.fmt-inversion{color:#7a5fca}.fmt-root{color:#2a9d8f;font-weight:700}.fmt-quality{color:#e07a5f}.format-desc{color:#888;font-size:.9rem;line-height:1.5}.root-chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{padding:.4rem .8rem;background:#2a2a3e;border:1px solid #333;border-radius:6px;font-size:.9rem;color:#e0e0e0}.chip code{color:#2a9d8f;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;margin-left:.3rem}.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.quality-item{padding:.75rem;background:#2a2a3e;border-radius:6px;display:flex;flex-direction:column;gap:.25rem}.quality-display{color:#e0e0e0;font-size:.95rem}.quality-code{color:#e07a5f;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.85rem}.inversion-info{color:#aaa;font-size:.9rem;line-height:1.8}.inversion-info p{margin-bottom:.5rem}.inversion-info strong{color:#7a5fca;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.inversion-info em{color:#666;font-style:italic}.voice-leading-options{display:flex;flex-direction:column;gap:.5rem;min-width:200px}.voice-leading-advanced summary{cursor:pointer;color:#888;font-size:.85rem;-webkit-user-select:none;user-select:none}.voice-leading-advanced summary:hover{color:#e0e0e0}.slider-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#aaa}.slider-name{min-width:4rem;color:#888}.vl-slider{flex:1;accent-color:#4a6fa5;min-width:100px}.slider-value{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;min-width:3rem;text-align:right;color:#e0e0e0;font-size:.85rem}.key-badge-container{position:relative;display:inline-block;align-self:flex-end}.key-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#1e1e30;border:1px solid #333;border-radius:6px;color:#e0e0e0;font-family:inherit;font-size:.78rem;cursor:pointer;transition:border-color .15s}.key-badge:hover{border-color:#4a6fa5}.key-badge-label{color:#888}.key-badge-value{font-weight:600}.key-badge-auto{font-size:.6rem;color:#2a9d8f;font-style:italic;opacity:.8}.key-badge.manual .key-badge-value{color:#4a6fa5}.key-badge-dropdown{position:absolute;bottom:calc(100% + 6px);right:0;background:#1e1e30;border:1px solid #333;border-radius:8px;padding:8px;z-index:50;min-width:260px;box-shadow:0 4px 16px #00000080}.key-badge-reset{width:100%;padding:6px 8px;margin-bottom:6px;background:#2a9d8f1a;border:1px solid rgba(42,157,143,.3);border-radius:4px;color:#2a9d8f;font-family:inherit;font-size:.75rem;cursor:pointer}.key-badge-reset:hover{background:#2a9d8f33}.key-badge-section{margin-bottom:6px}.key-badge-section:last-child{margin-bottom:0}.key-badge-section-label{font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;padding-left:4px}.key-badge-option{display:inline-block;padding:3px 8px;margin:2px;background:#262638;border:1px solid transparent;border-radius:4px;color:#e0e0e0;font-family:inherit;font-size:.75rem;cursor:pointer}.key-badge-option:hover{border-color:#4a6fa5}.key-badge-option.active{background:#4a6fa540;border-color:#4a6fa5;color:#fff}.chord-input-wrapper{position:relative;margin-bottom:1rem}.chord-input-wrapper .key-badge-container{position:absolute;bottom:8px;right:8px;z-index:5}.suggestions-panel{background:#1a1a2e;border:1px solid #262638;border-radius:10px;margin-bottom:1.5rem;overflow:hidden}.suggestions-panel.disabled{opacity:.5;pointer-events:none}.suggestions-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 16px;background:none;border:none;color:#888;font-family:inherit;font-size:.82rem;cursor:pointer;transition:color .15s}.suggestions-header:hover{color:#e0e0e0}.suggestions-title{display:flex;align-items:center;gap:8px}.suggestions-current{background:#4a6fa533;color:#4a6fa5;padding:1px 8px;border-radius:4px;font-weight:600;font-size:.85rem}.suggestions-toggle{font-size:.7rem;color:#666}.suggestions-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}.suggestion-chip{display:inline-flex;align-items:stretch;background:#262638;border:1px solid #333;border-radius:6px;overflow:hidden;transition:border-color .15s}.suggestion-chip:hover{border-color:#4a6fa5}.chip-play{display:flex;align-items:center;gap:5px;padding:6px 10px;background:none;border:none;color:#e0e0e0;font-family:inherit;font-size:.82rem;cursor:pointer;transition:background .15s}.chip-play:hover:not(:disabled){background:#4a6fa526}.chip-play-icon{font-size:.55rem;color:#4a6fa5}.chip-add{display:flex;align-items:center;padding:6px 8px;background:none;border:none;border-left:1px solid #333;color:#666;font-family:inherit;font-size:.78rem;cursor:pointer;transition:all .15s}.chip-add:hover:not(:disabled){color:#2a9d8f;background:#2a9d8f1a}@media(max-width:768px){.app{padding:1rem}.toolbar{flex-direction:column}.syntax-help-btn{margin-left:0;width:100%}.playback-controls{flex-direction:column}.chord-counter{margin-left:0}.note-cards{flex-direction:column}.tuning-columns,.quality-grid{grid-template-columns:1fr}.voice-leading-options{width:100%}.suggestions-chips{gap:4px}.chip-play{padding:5px 8px;font-size:.75rem}.chip-add{padding:5px 6px;font-size:.7rem}.key-badge-dropdown{min-width:220px}}