html,body,#root{height:100%}:root{--bg:#14181f;--panel:#1d232e;--panel-hover:#232a37;--border:#2b3241;--text:#e8ebf0;--muted:#9aa4b5;--accent:#e8a33d;--accent-glow:#e8a33d59;--green:#3ecf6a;--yellow:#e8c93d;--red:#e8543d;--ease:cubic-bezier(.2, .7, .3, 1)}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 50% -10%, #1c2230 0%, var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0;font-family:system-ui,-apple-system,sans-serif}.app{max-width:960px;margin:0 auto;padding:24px 16px 64px}.app-header h1{letter-spacing:-.01em;margin-bottom:12px;font-size:1.6rem}.tabs{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.tabs button,.shape-picker button{background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), color .18s var(--ease);border-radius:8px;padding:8px 16px;font-size:.9rem}.tabs button:hover,.shape-picker button:hover{background:var(--panel-hover);border-color:#3a4356}.tabs button:active,.shape-picker button:active{transform:scale(.96)}.tabs button.tab-active,.shape-picker button.tab-active{background:var(--accent);color:#1a1200;border-color:var(--accent);box-shadow:0 2px 12px var(--accent-glow)}.tabs button.tab-active:hover,.shape-picker button.tab-active:hover{background:var(--accent)}.tab-panel{animation:fade-in .28s var(--ease)}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.chord-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;display:grid}.chord-card{background:var(--panel);border:1px solid var(--border);cursor:pointer;color:var(--text);transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex}.chord-card:hover{border-color:var(--accent);background:var(--panel-hover);transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.chord-card:active{transform:translateY(-1px)scale(.98)}.chord-card-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 8px 20px var(--accent-glow)}.chord-diagram circle,.chord-diagram rect,.chord-diagram line{transition:opacity .15s var(--ease)}.chord-card h3{margin:0;font-size:1.1rem}.chord-diagram{color:var(--text)}.chord-string{stroke:var(--muted);stroke-width:1px}.chord-fretline{stroke:var(--border);stroke-width:1px}.chord-nut{fill:var(--text)}.chord-dot{fill:var(--accent)}.chord-dot-label{fill:#1a1200;font-weight:600}.chord-marker,.chord-basefret{fill:var(--muted)}.chord-barre{fill:var(--accent);opacity:.55}.caged-view,.practice-view{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}.caged-example{animation:pop-in .24s var(--ease)}@keyframes pop-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.shape-picker{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.caged-content{flex-wrap:wrap;align-items:flex-start;gap:32px;display:flex}.position-table{border-collapse:collapse}.position-table th,.position-table td{border:1px solid var(--border);text-align:left;padding:6px 14px}.practice-view{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.feedback-indicator{background:var(--bg);border:1px solid var(--border);min-height:24px;transition:border-color .2s var(--ease), background-color .2s var(--ease);border-radius:999px;align-items:center;gap:10px;padding:10px 18px;display:flex}.feedback-dot{background:var(--muted);width:12px;height:12px;transition:background-color .2s var(--ease), box-shadow .2s var(--ease);border-radius:50%}.feedback-green .feedback-dot{background:var(--green);box-shadow:0 0 8px var(--green);animation:dot-pulse .6s var(--ease)}.feedback-yellow .feedback-dot{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}.feedback-red .feedback-dot{background:var(--red)}.feedback-green{border-color:var(--green);background:#3ecf6a14}.feedback-yellow{border-color:var(--yellow);background:#e8c93d14}.feedback-red{border-color:var(--red)}@keyframes dot-pulse{0%{transform:scale(.6)}60%{transform:scale(1.3)}to{transform:scale(1)}}.mic-button,.skip-button{cursor:pointer;transition:transform .12s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), opacity .18s var(--ease);border:none;border-radius:8px;padding:10px 24px;font-size:1rem;font-weight:600}.mic-button{background:var(--accent);color:#1a1200;box-shadow:0 4px 14px var(--accent-glow)}.mic-button:hover{box-shadow:0 6px 18px var(--accent-glow);transform:translateY(-1px)}.mic-button:active{transform:translateY(0)scale(.97)}.skip-button{color:var(--muted);border:1px solid var(--border);background:0 0}.skip-button:hover{color:var(--text);border-color:#3a4356}.practice-controls{gap:10px;display:flex}.practice-intro{color:var(--muted);max-width:420px}.streak-badge{background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:4px 14px;font-size:.85rem}.drill-chord{animation:pop-in .3s var(--ease)}.drill-chord h2{margin-bottom:4px}.drill-chord-advancing{animation:correct-flash .5s var(--ease)}@keyframes correct-flash{0%{transform:scale(1)}30%{filter:drop-shadow(0 0 14px var(--green));transform:scale(1.06)}to{filter:drop-shadow(0 0 #0000);transform:scale(1)}}.error-text{color:var(--red)}.all-chords-view{flex-direction:column;gap:16px;display:flex}.chord-filters{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.chord-filters select{background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 12px;font-size:.9rem}.chord-count{color:var(--muted);font-size:.85rem}.chord-card-static{cursor:default;position:relative}.chord-card-static:hover{box-shadow:none;transform:none}.chord-shape-tag{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.65rem}.song-view{background:var(--panel);border:1px solid var(--border);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:10px;padding:20px;display:flex}.song-picker{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px;display:flex}.song-picker button{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);border-radius:8px;padding:8px 14px;font-size:.85rem}.song-picker button:hover{border-color:#3a4356}.song-picker button:active{transform:scale(.96)}.song-artist{color:var(--muted);margin-top:-8px}.song-capo{color:var(--accent)}.song-chart{text-align:left;flex-direction:column;gap:18px;width:100%;max-width:520px;display:flex}.chart-section-label{color:var(--muted);align-items:center;gap:10px;margin-bottom:10px;font-size:.85rem;display:flex}.chart-section-rule{border-top:1px dashed var(--border);flex:1}.chart-line{flex-wrap:wrap;gap:10px;margin-bottom:10px;display:flex}.chart-chord{background:var(--accent);color:#1a1200;border-radius:6px;padding:4px 10px;font-size:.95rem;font-weight:700}.song-chord-diagrams{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.song-tips{text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:10px;width:100%;max-width:520px;padding:16px 20px}.song-tips h3{margin-top:0}.song-tips ul{color:var(--text);flex-direction:column;gap:8px;margin:0;padding-left:20px;display:flex}.song-hint{color:var(--muted);font-size:.85rem}.song-divider{border:none;border-top:1px solid var(--border);width:100%;margin:8px 0}.song-search{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.song-search-bar{gap:8px;width:100%;max-width:420px;display:flex}.song-search-bar input{background:var(--bg);border:1px solid var(--border);color:var(--text);transition:border-color .18s var(--ease);border-radius:8px;flex:1;padding:10px 14px;font-size:.95rem}.song-search-bar input:focus{border-color:var(--accent);outline:none}.mic-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.song-search-results{flex-direction:column;gap:8px;width:100%;max-width:480px;margin:0;padding:0;list-style:none;display:flex}.song-search-result{background:var(--bg);border:1px solid var(--border);text-align:left;animation:fade-in .2s var(--ease);border-radius:10px;padding:10px 14px}.song-search-artist{color:var(--muted)}.song-search-meta{color:var(--muted);margin-top:2px;font-size:.8rem}.song-search-link{color:var(--muted);font-size:.8rem;text-decoration:none}.song-search-link:hover{text-decoration:underline}.song-search-play-button{background:var(--green);color:#06210f;cursor:pointer;transition:transform .12s var(--ease), box-shadow .18s var(--ease);border:none;border-radius:6px;margin-top:4px;padding:6px 14px;font-size:.85rem;font-weight:600}.song-search-play-button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #3ecf6a59}