.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 rgba(255,255,255,.08);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:rgba(154,172,196,.72)}.arpeggio-diagram__fret-line{stroke:rgba(0,0,0,.28)}.arpeggio-diagram__nut{fill:rgba(0,0,0,.55)}.arpeggio-diagram__position-marker{fill:rgba(255,255,255,.18);stroke:rgba(255,255,255,.28);stroke-width:1.2px}.arpeggio-diagram__open-string-placeholder{fill:transparent;stroke:rgba(255,255,255,.25);stroke-width:1.4px}.arpeggio-diagram__open-string-label{fill:rgba(10,14,21,.92);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:rgba(12,16,24,.94);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 rgba(4,6,10,.35))}.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:rgba(9,12,18,.78);stroke-width:1.05px;stroke-linejoin:round;letter-spacing:.01em}.arpeggio-diagram__note-text--root{fill:#fefefe;stroke:rgba(12,18,28,.5)}.arpeggio-diagram__note-text--support{fill:rgba(255,255,255,.94);stroke:rgba(10,13,18,.68);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);border-radius:var(--border-radius-pill);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);min-width:44px;padding:6px 14px}.pattern-pill:hover{color:var(--text-primary);border-color:rgba(var(--accent-primary-rgb), .5);background:rgba(255,255,255,.08)}.pattern-pill:focus-visible{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);border-radius:var(--border-radius-pill);background:var(--surface-3);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);border-radius:var(--border-radius-pill);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 transparent;padding:5px 12px}.label-mode-toggle__button:hover{color:var(--text-primary)}.label-mode-toggle__button:focus-visible{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 (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:var(--font-size-xxs)}.arpeggio-diagram__open-string-label,.arpeggio-diagram__fret-label{stroke:none;font-size:clamp(1rem,.92rem + .35vw,1.2rem)}}@media (width>=641px){.arpeggio-diagram__board-svg--horizontal{display:block}.arpeggio-diagram__board-svg--vertical{display:none}}@media (width>=1024px){.arpeggio-diagram__board-svg--horizontal{max-width:1100px}}