.arpeggios-fretboard-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-md);padding:var(--spacing-lg)}.arpeggio-diagram__board{width:100%;margin-top:var(--spacing-sm);justify-content:center;display:flex}.arpeggio-diagram{box-shadow:none;gap:var(--spacing-lg);background:0 0;border:none;border-radius:0;flex-direction:column;padding:0;display:flex}.arpeggio-controls{justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);flex-wrap:wrap;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:rgba(var(--accent-primary-rgb),.46);stroke:rgba(var(--accent-primary-rgb),.66);stroke-width:1.8px}.arpeggio-diagram__note-group--active .arpeggio-diagram__note-circle{fill:rgba(var(--accent-primary-rgb),.64);stroke:rgba(var(--accent-primary-rgb),.88)}.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:rgba(var(--accent-primary-rgb),.48);stroke:rgba(var(--accent-primary-rgb),.72)}.arpeggio-diagram__note-text{fill:#fdfdfd;font-size:clamp(13px,12.2px + .32vw,17px);font-weight:var(--font-weight-semibold);paint-order:stroke fill;stroke:#090c12c7;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:#fffffff0;stroke:#0a0d12ad;font-size:clamp(12px,11.2px + .3vw,15px);font-weight:var(--font-weight-medium)}.pattern-toolbar{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;flex:420px;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);flex-direction:column;margin-bottom:0;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),.5);background:#ffffff14}.pattern-pill:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;box-shadow:0 0 0 4px rgba(var(--accent-primary-rgb),.2)}.pattern-pill--active{background:rgba(var(--accent-primary-rgb),.34);color:var(--text-primary);border-color:rgba(var(--accent-primary-rgb),.7);box-shadow:0 0 0 1px rgba(var(--accent-primary-rgb),.14)}.label-mode-toggle{align-items:center;gap:var(--spacing-xs);border:1px solid var(--border-color);background:var(--surface-3);border-radius:999px;flex-shrink:0;padding:4px;display:inline-flex}.label-mode-toggle__buttons{align-items:center;gap:2px;display:inline-flex}.label-mode-toggle__button{color:var(--text-secondary);min-width:64px;min-height:32px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;transition:var(--transition-fast);background:0 0;border:1px solid #0000;border-radius:999px;padding:5px 12px}.label-mode-toggle__button:hover{color:var(--text-primary)}.label-mode-toggle__button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;box-shadow:0 0 0 3px rgba(var(--accent-primary-rgb),.18)}.label-mode-toggle__button--active{border-color:rgba(var(--accent-primary-rgb),.45);background:rgba(var(--accent-primary-rgb),.24);color:var(--text-primary)}.arpeggio-legend{gap:var(--spacing-sm)var(--spacing-md);color:var(--text-secondary);font-size:var(--font-size-xs);flex-wrap:wrap;align-items:center;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:9px;height:9px;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:rgba(var(--accent-primary-rgb),.48);border:1px solid rgba(var(--accent-primary-rgb),.72)}@media (max-width:640px){.arpeggios-fretboard-section{padding:var(--spacing-md)}.arpeggio-diagram__board-svg--horizontal{display:none}.arpeggio-diagram__board-svg--vertical{display:block}.pattern-pill{padding:var(--spacing-xs)var(--spacing-sm)}.arpeggio-controls{justify-content:flex-start;align-items:stretch;gap:var(--spacing-md);flex-direction:column}.pattern-toolbar{flex:auto;width:100%}.pattern-toolbar__buttons{gap:var(--spacing-xs)}.label-mode-toggle,.label-mode-toggle__buttons{justify-content:center;width:100%}.label-mode-toggle__button{flex:1 1 0;min-width:64px;max-width:140px;min-height:34px}.arpeggio-diagram__note-text{stroke-width:.9px;font-size:12px}.arpeggio-diagram__note-text--support{font-size:11px}.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}}