.panel{background:linear-gradient(145deg,#1c232d,#171c24);border:1px solid var(--line);border-radius:16px;padding:24px}.chord-page{padding-bottom:30px}.picker-block+.picker-block{margin-top:23px}.picker-label{display:block;font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--accent);margin-bottom:12px}.note-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px}.note-button,.quality-button{border:1px solid #394554;background:#151b23;color:#dbe1e9;border-radius:8px;padding:11px 4px;font:600 13px 'DM Sans';cursor:pointer;transition:.15s}.note-button:hover,.quality-button:hover{border-color:var(--accent);color:var(--accent)}.note-button.active,.quality-button.active{background:var(--accent);border-color:var(--accent);color:#17191d}.quality-grid{display:flex;flex-wrap:wrap;gap:8px}.quality-button{padding:10px 15px}.chord-summary{border-top:1px solid #ffffff12;margin-top:24px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.chord-summary h2{font:600 30px 'Space Grotesk';margin:0 0 5px}.chord-summary p,.voicing-heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}.chord-notes{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.note-chip{border:1px solid #55432e;background:#30271d;color:#f0c98f;padding:8px 11px;border-radius:20px;font-size:12px;font-weight:700}.voicing-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:42px 0 18px}.voicing-heading h2{font:600 25px 'Space Grotesk';margin:7px 0}.compact-select{font-size:11px;color:var(--muted);white-space:nowrap}.compact-select select{display:block;margin-top:7px;background:#171e27;border:1px solid #394554;border-radius:8px;color:var(--text);padding:10px;width:170px}.voicing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.voicing-card{background:linear-gradient(145deg,#1c232d,#171c24);border:1px solid var(--line);border-radius:14px;padding:17px;min-width:0}.voicing-card h3{font:600 17px 'Space Grotesk';margin:0 0 4px}.voicing-meta{color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:8px}.shape-tag{color:var(--accent);font-weight:700;letter-spacing:.7px}.diagram-wrap{margin:14px auto 10px;max-width:280px}.chord-diagram{display:block;width:100%;height:auto;overflow:visible}.diagram-caption{font-size:11px;color:var(--muted);text-align:center;margin:7px 0 12px}.fingering{border-top:1px solid #ffffff12;padding-top:11px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}.fingering strong{color:var(--text);font-weight:600}.voicing-card .position-label{color:var(--accent2)}.empty-voicings{grid-column:1/-1;text-align:center;padding:30px;color:var(--muted);background:#191e26;border:1px solid var(--line);border-radius:12px}.chord-footnote{font-size:11px;color:#778392;line-height:1.7;margin:20px 2px}.diagram-string{stroke:#8793a2;stroke-width:1.5}.diagram-fret{stroke:#596574;stroke-width:1.2}.diagram-nut{stroke:#d9e0e8;stroke-width:4}.diagram-dot{fill:var(--accent);stroke:#17191d;stroke-width:1.5}.diagram-root{fill:#f2d3a2}.diagram-text{fill:#9aa5b4;font:10px 'DM Sans'}.diagram-finger{fill:#15191f;font:bold 10px 'DM Sans';text-anchor:middle;dominant-baseline:central}.diagram-open{fill:none;stroke:#d7dce3;stroke-width:1.5}.diagram-muted{fill:#8d98a7;font:12px 'DM Sans';text-anchor:middle}
@media(max-width:850px){.voicing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.note-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:560px){.panel{padding:17px}.voicing-grid{grid-template-columns:1fr}.voicing-heading{align-items:flex-start;flex-direction:column}.chord-summary{align-items:flex-start;flex-direction:column}.chord-notes{justify-content:flex-start}.compact-select select{width:100%}}