:root{--bg: #0a1412;--surface: #111c1a;--card: #182422;--card-hover: #1e2c29;--accent: #2dd4bf;--accent-glow: rgba(45, 212, 191, .3);--accent2: #f59e0b;--text: #e0f0ed;--text-muted: #7a9e98;--border: #1e3330;--strong-color: #2dd4bf;--strong-glow: rgba(45, 212, 191, .35);--common-color: #67e8f9;--common-glow: rgba(103, 232, 249, .25);--possible-color: #6ee7b7;--possible-glow: rgba(110, 231, 183, .2);--header-height: 64px;--footer-height: 270px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden}body{overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column}#app-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}.header-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}@media (min-width: 480px){.header-inner{flex-wrap:nowrap;min-height:var(--header-height);padding:0 16px}}.app-title{font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}.controls{display:flex;gap:8px;flex:1;justify-content:flex-end;align-items:center}.control-group{display:flex;align-items:center;gap:6px}.control-group label{font-size:.75rem;color:var(--text-muted);font-weight:500;white-space:nowrap}.btn-group{display:flex;flex-wrap:wrap;gap:3px}.selector-btn{background:var(--card);border:1px solid var(--border);color:var(--text-muted);border-radius:5px;padding:3px 6px;font-size:.72rem;font-weight:600;cursor:pointer;min-height:26px;min-width:26px;white-space:nowrap;transition:border-color .12s,color .12s,background .12s;-webkit-tap-highlight-color:transparent;font-family:inherit}.selector-btn.active{border-color:var(--accent);color:var(--accent);background:#2dd4bf14}.selector-btn:active{background:var(--card-hover)}main{flex:1;padding:16px;padding-bottom:calc(var(--footer-height) + 24px);max-width:1200px;margin:0 auto;width:100%}#chord-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width: 480px){#chord-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){#chord-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){#chord-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1200px){#chord-grid{grid-template-columns:repeat(7,1fr)}}.chord-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s,transform .2s;display:flex;flex-direction:column;gap:10px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@media (max-width: 479px){.header-inner{gap:6px;padding:8px 10px}.app-title{font-size:1rem}.control-group label{display:none}.controls{gap:6px;justify-content:flex-start;flex:0 0 100%}}@media (max-width: 479px){.chord-card{flex-direction:column;padding:10px;gap:6px}.diagram-container svg{height:auto}.numeral{font-size:1.4rem}.chord-card.active:after{content:none}}.chord-card:active{background:var(--card-hover)}.chord-card.active{border-color:var(--accent);background:#2dd4bf24;box-shadow:0 0 0 2px var(--accent),0 12px 40px #2dd4bf73;transform:translateY(-4px) scale(1.02);z-index:1}.chord-card.strength-strong{border-color:var(--strong-color);box-shadow:0 0 12px var(--strong-glow)}.chord-card.strength-common{border-color:var(--common-color);box-shadow:0 0 8px var(--common-glow)}.chord-card.strength-possible{border-color:var(--possible-color)}.chord-card.strength-unusual{border-color:var(--border)}.suggestion-badge{position:absolute;top:-10px;right:10px;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.02em;text-transform:uppercase;pointer-events:none}.badge-strong{background:var(--strong-color);color:#0a1412}.badge-common{background:var(--common-color);color:#0a1412}.badge-possible{background:var(--possible-color);color:#0a1412}.card-top{display:flex;flex-direction:column;gap:2px}.numeral{font-size:1.7rem;font-weight:800;color:var(--accent2);line-height:1;font-variant-numeric:tabular-nums}.chord-name{font-size:.95rem;color:var(--text-muted);font-weight:500}.diagram-container{display:flex;align-items:center;justify-content:center;padding-bottom:6px}.diagram-container svg{width:100%;height:auto;max-width:170px}@media (min-width: 1024px){.diagram-container svg{max-width:220px}}.diagram-container .barre,.prog-diagram .barre{fill:#2dd4bf!important}.diagram-loading{width:40px;height:40px;flex-shrink:0;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.no-fingering{font-size:.75rem;color:var(--text-muted);text-align:center;line-height:1.4}#progression-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surface);border-top:1px solid var(--border);padding:10px 16px 12px;height:var(--footer-height);display:flex;flex-direction:column;gap:8px}.progression-header{display:flex;align-items:center;justify-content:space-between}.progression-label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.progression-actions{display:flex;gap:8px}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:4px 12px;font-size:.8rem;cursor:pointer;min-height:32px;transition:border-color .15s,color .15s}.btn-ghost:active,.btn-ghost:hover{border-color:var(--text-muted);color:var(--text)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:16px}.modal-backdrop[hidden]{display:none}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1rem;font-weight:700}.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;line-height:1;padding:0 4px}.modal-hint{font-size:.75rem;color:var(--text-muted);line-height:1.4}.fret-editor{overflow-x:auto}.fret-nav-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.fret-nav-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:6px;width:32px;height:32px;font-size:.75rem;cursor:pointer;transition:background .12s}.fret-nav-btn:disabled{opacity:.3;cursor:default}.fret-nav-btn:not(:disabled):active{background:var(--border)}.fret-nav-label{font-size:.8rem;color:var(--text-muted);min-width:80px;text-align:center}.fret-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}.fret-label-cell{width:24px;flex-shrink:0;font-size:.7rem;color:var(--text-muted);text-align:right;padding-right:4px;background:none;border:none;cursor:pointer;border-radius:4px;-webkit-tap-highlight-color:transparent;align-self:stretch}.fret-label-cell:active{color:var(--accent);background:var(--accent-glow)}.string-header{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text-muted);border-radius:6px;height:36px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s,color .12s;-webkit-tap-highlight-color:transparent}.string-header:active{background:var(--border)}.string-header.is-muted{color:var(--text-muted);border-color:var(--text-muted)}.fret-cell{flex:1;background:var(--card);border:1px solid var(--border);border-radius:6px;height:36px;cursor:pointer;transition:background .12s,border-color .12s;-webkit-tap-highlight-color:transparent}.fret-cell.active{background:var(--accent);border-color:var(--accent)}.fret-cell.muted{opacity:.3;cursor:default}.chord-id-result{font-size:.82rem;font-weight:600;padding:8px 12px;border-radius:8px;text-align:center;letter-spacing:.01em}.chord-id-result[hidden]{display:none}.chord-id-in-key{background:#2dd4bf1a;color:var(--accent);border:1px solid rgba(45,212,191,.3)}.chord-id-out-of-key{background:#8891a814;color:var(--text-muted);border:1px solid var(--border)}.modal-footer{display:flex;gap:8px;align-items:center}.chord-name-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0 12px;height:40px;font-size:.9rem;min-width:0}.chord-name-input:focus{outline:none;border-color:var(--accent)}.btn-accent{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:0 16px;height:40px;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .15s}.btn-accent:active{opacity:.8}.progression-slots{display:flex;gap:8px;overflow-x:auto;overflow-y:visible;padding:10px 4px 2px;margin-top:-10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.progression-slots::-webkit-scrollbar{display:none}.progression-empty{font-size:.8rem;color:var(--text-muted);padding:4px 0}.prog-slot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 14px 12px;position:relative;min-width:116px;cursor:pointer}.prog-diagram{width:108px}.prog-diagram svg{width:108px;height:112px}.prog-slot-selected{border-color:var(--accent2);box-shadow:0 0 0 2px var(--accent2);cursor:pointer}.prog-slot-selected:after{content:"▶";position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:.65rem;color:var(--accent2);pointer-events:none;z-index:1}.prog-numeral{font-size:1.3rem;font-weight:700;color:var(--accent2)}.prog-name{font-size:1rem;color:var(--text-muted);white-space:nowrap}.prog-remove{position:absolute;top:-9px;right:-9px;background:var(--surface);border:1px solid rgba(239,68,68,.4);color:#ef4444;cursor:pointer;font-size:.8rem;line-height:1;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s,border-color .15s}.prog-remove:active{background:#ef444426;border-color:#ef4444}.prog-position{font-size:.65rem;color:var(--text-muted);opacity:.5;font-variant-numeric:tabular-nums}.prog-key-divider{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 4px;align-self:stretch}.prog-key-divider:before{content:"";display:block;width:1px;flex:1;background:var(--accent);opacity:.4;margin:0 auto}.prog-key-label{font-size:.62rem;font-weight:700;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;writing-mode:vertical-rl;text-orientation:mixed;opacity:.7}#theory-panel{margin-top:24px;display:flex;flex-direction:column;gap:12px}.theory-row{display:flex;gap:12px;flex-wrap:wrap}.theory-block{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}.theory-block-scale{flex:1;min-width:220px}.theory-block-related{min-width:160px}.theory-block-full{width:100%}.theory-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px}.theory-notes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.note-chip{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:.85rem;font-weight:600;color:var(--text)}.theory-keysig{font-size:.78rem;color:var(--text-muted)}.theory-related-key{font-size:1.3rem;font-weight:700;color:var(--accent);margin-top:2px}.theory-functions{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}@media (max-width: 767px){.theory-functions{grid-template-columns:repeat(4,1fr)}}.theory-fn{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface);border-radius:8px;padding:8px 4px;text-align:center}.fn-numeral{font-size:.95rem;font-weight:700;color:var(--accent2)}.fn-root{font-size:.8rem;font-weight:600;color:var(--text)}.fn-name{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.theory-progressions{display:flex;flex-wrap:wrap;gap:8px}.prog-preset{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 14px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s;-webkit-tap-highlight-color:transparent}.prog-preset:hover,.prog-preset:active{border-color:var(--accent);color:var(--accent);background:#2dd4bf0f}