@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f1a;color:#e0e0e0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;min-width:320px}#root{width:100%}:root{--bg: #0f0f1a;--panel: #161625;--line: #262640;--text: #e6e6ee;--muted: #8a8aa0;--accent: #4d8dff;--root: #ff4d5e;--tone: #3f7fe8;--added: #f0a830;--wood: #3a2a1e;--fret: #9a9aa8;--nut: #e8dcc8;--string: #d0d0d8}.app{max-width:1280px;margin:0 auto;padding:10px 16px 12px}.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.top h1{font-size:1.1rem;font-weight:800;color:var(--accent)}.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}.seg button{flex:1;background:none;border:0;color:var(--muted);font:inherit;font-size:.9rem;font-weight:700;padding:7px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}.seg button.is-on{background:var(--accent);color:#fff}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:5px}.swatch{width:12px;height:12px;border-radius:50%}.swatch.dot-root{background:var(--root)}.swatch.dot-tone{background:var(--tone)}.swatch.dot-added{background:var(--added)}.hint{margin-top:6px;color:var(--muted);font-size:.88rem;line-height:1.45}.hint b{color:var(--text)}.form-picker{display:none}.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}.form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px 4px}.form h3{font-size:1rem;font-weight:800}.form-label{margin-top:4px;font-size:.82rem;font-weight:700;color:var(--text)}.form-label span{margin-left:6px;font-weight:500;color:var(--muted)}.form h3 span{margin-left:6px;font-size:.8rem;font-weight:600;color:var(--muted)}.board{display:block;width:100%;max-height:max(140px,calc((100vh - 360px)/2));margin:2px auto 0;font-family:JetBrains Mono,monospace}.board-wood{fill:var(--wood)}.board-fret{stroke:var(--fret);stroke-width:1.5;opacity:.6}.board-nut{stroke:var(--nut);stroke-width:5}.board-string{stroke:var(--string);opacity:.7}.is-unused .board-string{opacity:.22}.is-unused .board-label{opacity:.35}.board-label{fill:var(--muted);font-size:12px;font-weight:700}.board-fretnum{fill:var(--muted);font-size:13px}.board-fretnum.is-root{fill:var(--root);font-weight:800;font-size:15px}.dot circle{stroke-width:1.5}.dot text{font-size:12px;font-weight:800;fill:#fff}.dot-root circle{fill:var(--root);stroke:#ff9aa4}.dot-tone circle{fill:var(--tone);stroke:#8fb6ff}.dot-added circle{fill:var(--added);stroke:#ffd48a}.dot-added text{fill:#1a1206}.bottom{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;margin-top:10px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.card h2{font-size:1rem;font-weight:800}.card h2 span{margin-left:6px;font-size:.78rem;font-weight:500;color:var(--muted)}.grid{width:100%;margin-top:8px;border-collapse:collapse;table-layout:fixed;text-align:center}.grid th,.grid td{padding:6px 0;border:1px solid var(--line)}.grid thead th{color:var(--root);font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;border-top:0}.grid thead th:first-child,.grid tbody th{width:40px;border-left:0}.grid tbody th{color:var(--muted);font-size:.78rem;font-weight:600}.grid td{font-weight:800;font-size:.95rem}.grid td.is-sharp{color:var(--muted);font-weight:500;font-size:.78rem}.pairs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:8px}.pairs div{display:flex;flex-direction:column;align-items:center;background:#1d1d30;border-radius:6px;padding:4px 0}.pairs b{font-size:.9rem}.pairs small{font-size:.72rem;color:var(--muted)}.degrees{width:100%;margin-top:8px;border-collapse:separate;border-spacing:3px;table-layout:fixed;text-align:center;font-size:.9rem}.degrees th{width:52px;text-align:left;font-weight:600;color:var(--muted);font-size:.78rem}.degrees td{background:#1d1d30;border-radius:6px;padding:4px 0;font-weight:700}.degrees td.is-root{background:var(--root);color:#fff}@media(max-width:760px){.app{padding-top:8px}.top h1{display:none}.form-picker{display:flex;margin-top:8px}.forms{grid-template-columns:minmax(0,1fr)}.form:not(.is-picked){display:none}.board{max-height:max(150px,calc((100vh - 500px)/2))}.bottom{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}.form h3,.top .hint,.card .hint,.card h2 span{display:none}.form{padding-top:4px}.card{padding:8px 10px}.grid th,.grid td{padding:4px 0}.degrees td{padding:2px 0}.pairs{gap:2px}.pairs b{font-size:.72rem}.pairs small{font-size:.55rem}.grid td{font-size:.8rem}.grid td.is-sharp{font-size:.65rem}.grid thead th:first-child,.grid tbody th{width:30px}}