@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg: #131c16;--color-bg-raised: #1a2620;--color-accent-orange: #d97757;--color-accent-orange-light: #e89968;--color-accent-green: #7fb88a;--color-accent-green-light: #9ed1a8;--color-string: #ece8de;--color-string-dim: #93a596;--color-error: #e0735a;--color-success: #7fae8a;--font-display: "Fraunces", serif;--font-body: "Space Grotesk", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 10px}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);background-image:radial-gradient(circle at 15% 0%,rgba(127,184,138,.08),transparent 45%),radial-gradient(circle at 85% 100%,rgba(217,119,87,.07),transparent 50%);color:var(--color-string);font-family:var(--font-body);min-height:100vh}.app-shell{max-width:980px;margin:0 auto;padding:48px 24px 80px}.app-header{margin-bottom:40px;border-bottom:1px solid rgba(127,184,138,.18);padding-bottom:28px}.app-header h1{font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;font-size:clamp(2.2rem,5vw,3.2rem);margin:0 0 8px;color:var(--color-accent-green);letter-spacing:-.01em}.subtitle{font-size:1.05rem;color:var(--color-string-dim);margin:0;max-width:560px;line-height:1.5}.input-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}@media (max-width: 720px){.input-panel{grid-template-columns:1fr}}.input-card{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px}.input-card h2{font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-orange-light);margin:0}.input-card input[type=text],.input-card input[type=file]{background:var(--color-bg);border:1px solid rgba(232,226,212,.16);border-radius:6px;padding:10px 12px;color:var(--color-string);font-family:var(--font-body);font-size:.9rem}.input-card input[type=text]::placeholder{color:var(--color-string-dim)}.btn{border:none;border-radius:6px;padding:10px 16px;font-family:var(--font-body);font-weight:600;font-size:.88rem;cursor:pointer;transition:transform .12s ease,filter .12s ease}.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.98)}.btn:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.btn-primary{background:var(--color-accent-orange-light);color:#1c1815}.btn-secondary{background:transparent;border:1px solid var(--color-accent-green);color:var(--color-accent-green)}.btn-stop{background:var(--color-error);color:#1c1815;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.75}}.status-text{color:var(--color-accent-orange-light);font-size:.9rem;margin:4px 0}.error-text{color:var(--color-error);font-size:.9rem;margin:4px 0}.source-label{color:var(--color-string-dim);font-family:var(--font-mono);font-size:.82rem;margin:4px 0 0}.waveform-section{margin-top:32px}.waveform-wrapper{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:20px}.waveform-canvas{width:100%;height:140px;display:block}.waveform-meta{margin-top:12px;font-family:var(--font-mono);font-size:.78rem;color:var(--color-string-dim)}.waveform-placeholder{background:var(--color-bg-raised);border:1px dashed rgba(232,226,212,.18);border-radius:var(--radius);padding:48px 20px;text-align:center;color:var(--color-string-dim);font-size:.92rem}.app-footer{margin-top:48px;border-top:1px solid rgba(127,184,138,.14);padding-top:20px;color:var(--color-string-dim);font-size:.82rem;font-family:var(--font-mono)}.analyze-action{display:flex;justify-content:center;margin:28px 0}.btn-large{font-size:1rem;padding:14px 32px}.btn:disabled{opacity:.6;cursor:not-allowed}.analysis-section{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-top:24px}@media (max-width: 720px){.analysis-section{grid-template-columns:1fr}}.key-card,.chords-card{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:24px}.key-card h2,.chords-card h2{font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-orange-light);margin:0 0 16px}.key-display{font-family:var(--font-display);font-size:2.4rem;font-weight:600;color:var(--color-accent-green);margin-bottom:16px}.confidence-bar-track{background:var(--color-bg);border-radius:4px;height:6px;overflow:hidden}.confidence-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent-orange),var(--color-accent-green));transition:width .4s ease}.confidence-label{font-size:.8rem;color:var(--color-string-dim);margin:10px 0 0;line-height:1.5}.chord-timeline{display:flex;flex-wrap:wrap;gap:8px}.chord-chip{background:var(--color-bg);border:1px solid rgba(127,184,138,.2);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;cursor:default}.chord-name{font-family:var(--font-display);font-size:1.1rem;color:var(--color-string)}.chord-time{font-family:var(--font-mono);font-size:.68rem;color:var(--color-string-dim)}.disclaimer{font-size:.78rem;color:var(--color-string-dim);margin-top:16px;line-height:1.5}.theory-tools{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}.transpose-card,.capo-card,.scales-card{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:24px}.transpose-card h2,.capo-card h2,.scales-card h2{font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-orange-light);margin:0 0 16px}.card-subtext{font-size:.85rem;color:var(--color-string-dim);margin:0 0 16px;line-height:1.5}.transpose-controls{display:flex;align-items:center;gap:16px;margin-bottom:18px}.btn-small{width:40px;height:40px;padding:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;border-radius:8px}.transpose-readout{flex:1;text-align:center}.transpose-key{font-family:var(--font-display);font-size:1.6rem;color:var(--color-accent-green)}.transpose-offset{font-family:var(--font-mono);font-size:.76rem;color:var(--color-string-dim);margin-top:2px}.btn-link{background:none;border:none;color:var(--color-accent-orange-light);font-size:.78rem;text-decoration:underline;cursor:pointer;font-family:var(--font-body)}.transposed-chord-row{display:flex;flex-wrap:wrap;gap:8px}.chord-chip-small{background:var(--color-bg);border:1px solid rgba(127,184,138,.2);border-radius:6px;padding:6px 10px;font-family:var(--font-display);font-size:.95rem;color:var(--color-string)}.capo-options{display:flex;flex-direction:column;gap:10px}.capo-option-button{font-family:inherit;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease,transform .1s ease,box-shadow .15s ease;box-shadow:0 1px #0003}.capo-option-button:hover{border-color:var(--color-accent-orange-light);background:#d9775714;transform:translateY(-1px)}.capo-option-button:active{transform:translateY(0)}.capo-option-button:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.capo-option-selected,.capo-option-selected:hover{background:var(--color-accent-orange)!important;border-color:var(--color-accent-orange)!important;box-shadow:0 2px 8px #d9775759;transform:translateY(0)}.capo-option-selected .capo-fret,.capo-option-selected .capo-shape{color:#1c1815}.capo-selected-tag{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#1c1815;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}.capo-active-banner{background:#d977571f;border:1px solid rgba(217,119,87,.35);border-radius:8px;padding:12px 16px;font-size:.85rem;color:var(--color-string);line-height:1.5}.capo-active-banner strong{color:var(--color-accent-orange-light)}.capo-option{background:var(--color-bg);border:2px solid rgba(127,184,138,.25);border-radius:8px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}.capo-option-none{border-color:#7fae8a73}.capo-fret{font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--color-accent-green)}.capo-shape{font-family:var(--font-mono);font-size:.82rem;color:var(--color-string-dim)}.scale-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(232,226,212,.08);gap:16px}.scale-row:last-child{border-bottom:none}.scale-row-secondary{opacity:.75}.scale-name{font-family:var(--font-body);font-weight:600;font-size:.88rem;color:var(--color-string);white-space:nowrap}.scale-notes{font-family:var(--font-mono);font-size:.82rem;color:var(--color-accent-orange-light);text-align:right}.charts-section{margin-top:24px}.charts-header{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}.charts-header h2{font-family:var(--font-display);font-size:1.5rem;color:var(--color-accent-green);margin:0}.charts-controls{display:flex;flex-wrap:wrap;gap:12px}.toggle-group{display:flex;background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.18);border-radius:8px;padding:4px;gap:4px}.toggle-btn{background:transparent;border:none;color:var(--color-string-dim);font-family:var(--font-body);font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.toggle-btn:hover{color:var(--color-string)}.toggle-btn-active{background:var(--color-accent-orange-light);color:#1c1815}.diagram-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:24px}.diagram-card{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:16px}.diagram-card-inner{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-chord-name{font-family:var(--font-display);font-size:1.2rem;color:var(--color-string)}.diagram-fret-label{font-family:var(--font-mono);font-size:.7rem;color:var(--color-string-dim)}.chord-diagram-svg{width:100%;max-width:150px}.piano-diagram-svg{max-width:180px}.diagram-barre-note{font-family:var(--font-mono);font-size:.68rem;color:var(--color-accent-orange-light)}.diagram-notes-list{font-family:var(--font-mono);font-size:.78rem;color:var(--color-string-dim)}.diagram-unavailable{text-align:center;color:var(--color-string-dim);font-size:.82rem;padding:12px 0}.tab-section{margin-top:8px}.tab-display{margin-top:16px;display:flex;flex-direction:column;gap:16px}.tab-block{background:var(--color-bg-raised);border:1px solid rgba(127,184,138,.14);border-radius:var(--radius);padding:16px 20px}.tab-block-label{font-family:var(--font-display);font-size:1rem;color:var(--color-accent-green);margin-bottom:8px}.tab-lines{font-family:var(--font-mono);font-size:.82rem;color:var(--color-string);line-height:1.6;margin:0;white-space:pre}