.arpeggio-diagram__board{justify-content:center;width:100%;display:flex}.arpeggio-diagram{background:var(--surface-2);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-card);padding:var(--spacing-xl);gap:var(--spacing-lg);flex-direction:column;display:flex}.arpeggio-diagram__board-svg{background:var(--gradient-wood);border-radius:var(--border-radius-lg);width:100%;max-width:min(960px,100%);height:auto;box-shadow:var(--shadow-card);border:1px solid #ffffff14;display:none;overflow:visible}.arpeggio-diagram__board-svg--vertical{max-width:420px;display:block}.arpeggio-diagram__string-line,.arpeggio-diagram__fret-line{vector-effect:non-scaling-stroke}.arpeggio-diagram__string-line{stroke:#9aacc4b8}.arpeggio-diagram__fret-line{stroke:#00000047}.arpeggio-diagram__nut{fill:#0000008c}.arpeggio-diagram__position-marker{fill:#ffffff2e;stroke:#ffffff47;stroke-width:1.2px}.arpeggio-diagram__open-string-placeholder{fill:#0000;stroke:#ffffff40;stroke-width:1.4px}.arpeggio-diagram__open-string-label{fill:#0a0e15eb;font-size:clamp(1.05rem,.9rem + .5vw,1.6rem);font-weight:var(--font-weight-semibold);letter-spacing:.04em;paint-order:normal;stroke:none}.arpeggio-diagram__fret-label{fill:#0c1018f0;font-size:clamp(1rem,.88rem + .4vw,1.4rem);font-weight:var(--font-weight-semibold);letter-spacing:.02em;paint-order:normal;stroke:none}.arpeggio-diagram__note-group{transition:var(--transition-fast);filter:drop-shadow(0 2px 6px #04060a59)}.arpeggio-diagram__note-circle{fill:#ffffff24;stroke:#ffffff42;stroke-width:1.8px}.arpeggio-diagram__note-group--active .arpeggio-diagram__note-circle{fill:rgba(var(--accent-primary-rgb),.68);stroke:rgba(var(--accent-primary-rgb),.95)}.arpeggio-diagram__note-group--root .arpeggio-diagram__note-circle{fill:var(--accent-primary);stroke:rgba(var(--accent-primary-rgb),1)}.arpeggio-diagram__note-group--support .arpeggio-diagram__note-circle{fill:#141a244d;stroke:#141a248c}.arpeggio-diagram__note-text{fill:#fdfdfd;font-size:clamp(14px,13.2px + .32vw,18px);font-weight:var(--font-weight-semibold);paint-order:stroke fill;stroke:#090c12a8;stroke-width:1.05px;stroke-linejoin:round;letter-spacing:.01em}.arpeggio-diagram__note-text--root{fill:#fefefe;stroke:#0c121c80}.arpeggio-diagram__note-text--support{fill:var(--text-secondary);stroke:#0a0d1299;font-size:12px;font-weight:var(--font-weight-medium)}.pattern-toolbar{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.pattern-toolbar__label{text-transform:uppercase;letter-spacing:.08em;font-size:var(--font-size-xxs);color:var(--text-muted)}.pattern-toolbar__buttons{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.pattern-meta{gap:var(--spacing-xs);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.pattern-meta__name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.pattern-meta__description{font-size:var(--font-size-xxs);color:var(--text-secondary);line-height:var(--line-height-snug)}.pattern-pill{border:1px solid var(--border-color);background:var(--surface-1);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;transition:var(--transition-fast);border-radius:999px;min-width:44px;padding:6px 14px}.pattern-pill:hover{color:var(--text-primary);border-color:rgba(var(--accent-primary-rgb),.4);background:#ffffff0a}.pattern-pill:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.pattern-pill--active{background:var(--gradient-primary);color:var(--text-primary);border-color:rgba(var(--accent-primary-rgb),.6);box-shadow:var(--shadow-sm)}.arpeggio-legend{gap:var(--spacing-md);color:var(--text-secondary);font-size:var(--font-size-xs);flex-wrap:wrap;display:flex}.legend-item{align-items:center;gap:var(--spacing-xs);display:inline-flex}.legend-dot{background:rgba(var(--accent-primary-rgb),.45);border-radius:50%;justify-content:center;align-items:center;width:10px;height:10px;display:inline-flex}.legend-dot--root{background:var(--accent-primary);box-shadow:0 0 0 2px rgba(var(--accent-primary-rgb),.35)}.legend-dot--active{background:rgba(var(--accent-primary-rgb),.55)}.legend-dot--support{background:#ffffff24;border:1px solid #ffffff2e}@media (max-width:640px){.arpeggio-diagram__board-svg--horizontal{display:none}.arpeggio-diagram__board-svg--vertical{display:block}.pattern-pill{padding:var(--spacing-xs)var(--spacing-sm)}.arpeggio-diagram__note-text{stroke-width:.9px;font-size:12px}.arpeggio-diagram__note-text--support{font-size:10px}.arpeggio-diagram__open-string-label,.arpeggio-diagram__fret-label{stroke:none;font-size:clamp(1rem,.92rem + .35vw,1.2rem)}}@media (min-width:641px){.arpeggio-diagram__board-svg--horizontal{display:block}.arpeggio-diagram__board-svg--vertical{display:none}}@media (min-width:1024px){.arpeggio-diagram__board-svg--horizontal{max-width:1100px}}