.recognition-diagram{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:1rem 0;padding:12px;border:1px solid var(--jgg-border);border-radius:10px;background:var(--jgg-surface);color:var(--jgg-text);overflow:hidden}
.recognition-diagram .recognition-board-scroll{box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:3px 0 7px;scrollbar-gutter:stable}
.recognition-diagram .recognition-board-scroll>svg{display:block;width:auto;max-width:none;height:auto;font-family:inherit}
.recognition-diagram .recognition-board-scroll:focus-visible{outline:3px solid var(--jgg-focus);outline-offset:-3px;border-radius:4px}
.recognition-diagram .recognition-board-surface{fill:var(--jgg-surface-subtle)}
.recognition-diagram .recognition-fret{stroke:var(--jgg-control-border);stroke-width:1}
.recognition-diagram .recognition-nut{stroke-width:4}
.recognition-diagram .recognition-string{stroke:var(--jgg-control-border)}
.recognition-diagram .recognition-string-label,.recognition-diagram .recognition-fret-label{fill:var(--jgg-text);font-size:15px;font-weight:700}
.recognition-diagram .recognition-column-label{fill:var(--jgg-text-muted);font-size:12px}
.recognition-diagram .recognition-mute{fill:var(--jgg-text-muted);font-size:18px;font-weight:700}
.recognition-diagram .recognition-position{fill:var(--jgg-accent);stroke:var(--jgg-accent);stroke-width:2}
.recognition-diagram .recognition-open{fill:var(--jgg-surface)}
.recognition-diagram .recognition-inlay{fill:var(--jgg-border)}
.recognition-diagram figcaption{margin:.5rem 0 0;font-size:14px;line-height:1.6;overflow-wrap:anywhere;color:var(--jgg-text-muted)}
.recognition-diagram figcaption strong{color:var(--jgg-text);font-weight:700}
.recognition-unavailable{font-size:1rem;line-height:1.6;color:var(--jgg-text-muted)}
@media(max-width:580px){.recognition-diagram{padding:10px}.recognition-diagram figcaption{font-size:14px}}