.root-selector{margin-bottom:2rem}.root-buttons{display:flex;flex-wrap:wrap;gap:6px}.root-btn{background:transparent;border:1px solid #e2e8f0;border-radius:8px;padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;color:#374151;transition:background .12s,border-color .12s,color .12s}.root-btn:hover{background:#f1f5f9}.root-btn.active{background:#3c3489;border-color:#3c3489;color:#eeedfe}.mode-toggle{display:flex;gap:6px;margin-top:12px}.mode-btn{background:transparent;border:1px solid #e2e8f0;border-radius:8px;padding:5px 18px;font-size:13px;font-family:inherit;cursor:pointer;color:#374151;transition:background .12s,border-color .12s,color .12s}.mode-btn:hover{background:#f1f5f9}.mode-btn.active{background:#3c3489;border-color:#3c3489;color:#eeedfe}.fretboard-header{display:flex;align-items:center;margin-bottom:2px}.fretboard-header__spacer{width:24px;min-width:24px;padding-right:8px}.fretboard-header__nut{width:28px;min-width:28px}.fretboard-header__fret{width:44px;min-width:44px;text-align:center;font-size:11px;color:#9ca3af}.fretboard-header__fret--marker{color:#6b7280;font-weight:500}.fret-note{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;position:relative;z-index:1;flex-shrink:0;transition:background .15s}.fret-note--md{width:34px;height:34px;font-size:11px}.fret-note--sm{width:24px;height:24px;font-size:10px}.fret-note--scale{background:#3c3489;color:#eeedfe}.fret-note--root{background:#afa9ec;color:#26215c}.fret-note--empty{background:transparent;color:transparent}.fret-note--dimmed{background:#3c3489;color:#eeedfe;opacity:.2}.fret-note--chord{background:transparent;color:#3c3489;outline:2px solid #3C3489;outline-offset:-2px;font-weight:600}.fret-note--chord-root{background:#afa9ec;color:#26215c;outline:2px solid #26215C;outline-offset:-2px;font-weight:600}.string-row{display:flex;align-items:center}.string-label{width:24px;min-width:24px;font-size:12px;color:#6b7280;text-align:right;padding-right:8px;font-weight:500}.fret-cell{width:44px;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-right:.5px solid #e2e8f0;position:relative}.fret-cell--nut{width:28px;min-width:28px;border-right:3px solid #9ca3af}.string-line{position:absolute;top:50%;left:0;right:0;height:1px;background:#d1d5db;transform:translateY(-50%);z-index:0}.scale-notes{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.scale-note-circle{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;background:#3c3489;color:#eeedfe;transition:opacity .15s,outline .15s,background .15s;flex-shrink:0}.scale-note-circle--root{background:#afa9ec;color:#26215c}.scale-note-circle--chord{background:transparent;color:#3c3489;outline:2px solid #3C3489;outline-offset:-2px}.scale-note-circle--root.scale-note-circle--chord{background:#afa9ec;color:#26215c;outline:2px solid #26215C;outline-offset:-2px}.scale-note-circle--dimmed{opacity:.2}.fretboard-section{margin-bottom:2rem}.fretboard-scroll{overflow-x:auto;padding-bottom:8px}.fretboard{display:inline-block;min-width:max-content}.chord-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem 1.25rem;min-width:110px;cursor:pointer;transition:border-color .15s,box-shadow .15s}.chord-card:hover{border-color:#afa9ec}.chord-card--selected{border:2px solid #3C3489;box-shadow:0 0 0 3px #eeedfe}.chord-card__name{font-size:15px;font-weight:500;margin-bottom:2px;color:#111827}.chord-card__degree{font-size:11px;color:#9ca3af;margin-bottom:10px}.chord-card__notes{display:flex;flex-wrap:wrap;gap:4px}.note-pill{display:inline-block;background:#f3f4f6;border-radius:20px;padding:2px 8px;font-size:11px;color:#6b7280}.note-pill--root{background:#eeedfe;color:#3c3489}.chord-grid-section{margin-bottom:2rem}.chord-grid{display:flex;flex-wrap:wrap;gap:10px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background:#f9fafb}.section-label-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.section-label{font-size:11px;color:#9ca3af;letter-spacing:.07em;text-transform:uppercase;margin-bottom:0;white-space:nowrap}.section-label__sub{color:#6b7280;text-transform:none;letter-spacing:0;font-size:12px}.app{min-height:100vh;padding:2rem 1.5rem;max-width:1100px;margin:0 auto}.app-header{margin-bottom:2rem}.app-title{font-size:20px;font-weight:500;color:#111827;letter-spacing:-.01em}