.chord-diagrams-section,.fretboard-section{background:var(--bg-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}.chord-diagram-list{width:100%}.diagrams-header{text-align:center;margin-bottom:var(--spacing-lg)}.diagrams-header h3{color:var(--text-primary);font-size:var(--font-size-5xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}.diagram-count{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.diagrams-grid{grid-template-columns:repeat(auto-fit,minmax(var(--diagram-min-width),1fr));gap:var(--diagram-gap);justify-items:center;display:grid}.chord-diagram-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--diagram-card-padding);width:100%;max-width:var(--diagram-min-width);transition:var(--transition-card);box-shadow:var(--shadow-card);--fretboard-left-offset:calc(var(--spacing-xs) + var(--fret-number-width) + var(--spacing-xs));--fretboard-inner-padding:calc(var(--spacing-xs) + 1px);--fretboard-right-offset:var(--spacing-xs)}.chord-diagram-card:hover{box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-primary-rgb),.4);transform:translateY(-4px)scale(1.01)}.chord-info{justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap;align-items:center;display:flex}.difficulty{color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.barre-indicator{background:var(--accent-primary);color:#fff;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-xs);text-transform:uppercase;letter-spacing:.5px;padding:2px 6px}.chord-diagram-2d{margin-bottom:6px;position:relative}.base-fret-label{color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);z-index:var(--z-higher);position:absolute;top:0;left:-25px}.string-markers{grid-template-columns:repeat(var(--string-count,6),minmax(0,1fr));height:var(--string-marker-height);margin-bottom:6px;margin-left:var(--fretboard-left-offset);margin-right:var(--fretboard-right-offset);padding-inline:var(--fretboard-inner-padding);z-index:var(--z-medium);place-items:center;display:grid}.string-marker{justify-content:center;align-items:center;width:100%;display:flex}.marker-muted{color:var(--text-secondary);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);justify-content:center;align-items:center;display:flex}.marker-open{color:var(--accent-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);justify-content:center;align-items:center;display:flex}.marker-empty{height:16px}.fretboard-container{gap:var(--spacing-xs);background:var(--bg-secondary);border-radius:var(--border-radius-sm);padding:var(--spacing-xs);border:none;align-items:stretch;display:flex}.fret-numbers{min-width:var(--fret-number-width);flex-direction:column;justify-content:flex-start;align-items:center;padding-top:4px;padding-bottom:4px;padding-right:0;display:flex}.fret-number{color:var(--text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);height:var(--string-marker-height);justify-content:center;align-items:center;display:flex}.nut{background:var(--text-primary);height:3px;z-index:var(--z-base);border-radius:1px;grid-area:1/1/auto/-1;margin-bottom:2px}.fretboard{grid-template-columns:repeat(var(--string-count,6),1fr);background:var(--gradient-wood);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);flex:1;grid-template-rows:12px repeat(5,20px);gap:0;padding:3px;display:grid;position:relative}.fret-line{height:var(--fret-line-height);background:var(--color-fret-line);z-index:var(--z-base);grid-column:1/-1;align-self:center}.string-line{width:var(--string-line-width);background:var(--gradient-string);z-index:var(--z-low);grid-row:1/-1;justify-self:center;box-shadow:inset 0 0 2px #0000004d}.finger-dot{width:var(--finger-dot-size);height:var(--finger-dot-size);background:var(--gradient-finger-dot);color:#fff;font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-finger-dot);z-index:var(--z-high);border:2px solid #fff;border-radius:50%;justify-content:center;place-self:start center;align-items:center;display:flex;transform:translateY(-50%)}.barre-span{background:var(--gradient-finger-dot);color:#fff;font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);border-radius:var(--barre-radius);height:var(--barre-height);min-height:var(--barre-height);box-shadow:var(--shadow-finger-dot);z-index:var(--z-medium);border:2px solid #fff;justify-content:center;place-self:start stretch;align-items:center;padding:0 6px;display:flex;transform:translateY(-50%)}.barre-label{pointer-events:none}.string-names{grid-template-columns:repeat(var(--string-count,6),minmax(0,1fr));margin-top:var(--spacing-xs);margin-left:var(--fretboard-left-offset);margin-right:var(--fretboard-right-offset);padding-inline:var(--fretboard-inner-padding);place-items:center;height:14px;display:grid}.string-names span{color:var(--text-secondary);font-size:var(--font-size-xxs);font-weight:var(--font-weight-semibold);text-align:center;width:100%}.chord-diagram-footer{text-align:center}.produced-notes{color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.produced-notes span{color:var(--text-primary);font-weight:var(--font-weight-semibold)}.no-diagrams{text-align:center;padding:var(--spacing-3xl);color:var(--text-secondary)}.no-diagrams p{margin:0;font-size:1rem}@media (max-width:768px){.diagrams-grid{grid-template-columns:repeat(auto-fit,minmax(var(--diagram-max-width),1fr));gap:var(--spacing-lg)}.chord-diagram-card{max-width:var(--diagram-max-width);padding:var(--spacing-md)}.fretboard-grid{height:125px}.finger-position{width:14px;height:14px}.finger-number{font-size:.6rem}}@media (max-width:480px){.chord-diagrams-section{padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.diagrams-header{margin-bottom:var(--spacing-md)}.diagrams-header h3{font-size:var(--font-size-2xl)}.diagrams-grid{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.chord-diagram-card{max-width:140px;padding:8px}.chord-name{font-size:1rem}.fretboard-grid{height:115px;padding:6px}.finger-position{width:12px;height:12px}.finger-number{font-size:.55rem}.string-names span{font-size:.6rem}}.chord-diagram-clickable{width:100%;max-width:var(--diagram-min-width);cursor:pointer;border-radius:var(--border-radius-lg);transition:var(--transition-card);outline:none;justify-content:center;display:flex}.chord-diagram-clickable:focus-visible{box-shadow:0 0 0 3px rgba(var(--accent-primary-rgb),.35)}.chord-diagram-clickable:focus-visible .chord-diagram-card{border-color:rgba(var(--accent-primary-rgb),.55);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.chord-variation-overlay{padding:var(--spacing-xl);z-index:var(--z-modal,9999);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#06070a99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.chord-variation-container{background:var(--surface-2);border-radius:var(--border-radius-xl);width:min(720px,100%);max-height:90vh;box-shadow:var(--shadow-xl);border:1px solid var(--border-color);padding:var(--spacing-xl);gap:var(--spacing-lg);outline:none;flex-direction:column;display:flex;overflow-y:auto}.chord-variation-header{justify-content:space-between;align-items:center;gap:var(--spacing-md);display:flex}.chord-variation-close{color:var(--text-secondary);font-size:var(--font-size-xl);cursor:pointer;align-items:center;gap:var(--spacing-2xs);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--border-radius-md);transition:var(--transition-fast);background:0 0;border:none;display:inline-flex}.chord-variation-close:hover,.chord-variation-close:focus-visible{color:var(--text-primary);background:rgba(var(--accent-primary-rgb),.15);outline:none}.chord-variation-title h2{color:var(--text-primary);font-size:var(--font-size-4xl);font-weight:var(--font-weight-semibold);margin:0}.chord-variation-subtitle{color:var(--text-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-2xs);display:block}.chord-variation-content{gap:var(--spacing-lg);flex-direction:column;display:flex}.chord-variation-section{gap:var(--spacing-sm);flex-direction:column;display:flex}.chord-variation-section h3{color:var(--text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.chord-variation-diagram{justify-content:center;display:flex}.chord-variation-diagram .chord-diagram-card{width:100%;max-width:var(--diagram-min-width);cursor:default;margin:0 auto}.chord-variation-diagram .fretboard-container{width:100%;margin:0 auto}.chord-variation-diagram .chord-diagram-card:hover{box-shadow:var(--shadow-card);border-color:var(--border-color);transform:none}.chord-variation-overview{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.chord-variation-overview-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-md);gap:var(--spacing-2xs);flex-direction:column;min-height:100px;display:flex}.overview-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.overview-value{color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md)}.chord-variation-note-sequence{align-items:center;gap:var(--spacing-xs);color:var(--text-primary);font-weight:var(--font-weight-medium);flex-wrap:wrap;display:flex}.chord-variation-note-sequence span+span:before{content:"→";color:var(--text-secondary);margin-right:var(--spacing-xs)}.chord-variation-note-badges{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.chord-variation-note-badge{background:rgba(var(--accent-primary-rgb),.12);color:var(--accent-primary);border-radius:var(--border-radius-pill);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:4px 10px}.chord-variation-strings{gap:var(--spacing-sm);flex-direction:column;display:flex}.chord-string-row{gap:var(--spacing-sm);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-sm)var(--spacing-md);grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;display:grid}.chord-string-label{font-weight:var(--font-weight-semibold);color:var(--text-primary)}.chord-string-open{color:var(--text-secondary);font-size:var(--font-size-sm)}.chord-string-note{color:var(--text-primary);font-weight:var(--font-weight-medium)}.chord-string-note-muted{color:var(--text-secondary);font-style:italic}.chord-string-finger{color:var(--text-secondary);font-size:var(--font-size-sm)}.chord-variation-close-arrow{font-size:var(--font-size-lg)}.chord-variation-close-x{font-size:var(--font-size-2xl);line-height:1}@media (max-width:900px){.chord-variation-overview{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}@media (max-width:768px){.chord-variation-overlay{padding:var(--spacing-md);align-items:stretch}.chord-variation-container{border-radius:var(--border-radius-lg);width:100%;max-height:100vh;padding:var(--spacing-lg)}.chord-variation-title h2{font-size:var(--font-size-3xl)}.chord-variation-close-x{display:none}.chord-variation-close-arrow{display:inline-flex}.chord-string-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:769px){.chord-variation-close-arrow{display:none}}.chord-variation-diagram-wrapper{justify-content:center;align-items:center;gap:var(--spacing-sm);display:flex}.chord-variation-nav-button{color:var(--text-secondary);font-size:var(--font-size-3xl);width:var(--control-lg);height:var(--control-lg);cursor:pointer;transition:var(--transition-fast);background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.chord-variation-nav-button:hover,.chord-variation-nav-button:focus-visible{color:var(--text-primary);border-color:rgba(var(--accent-primary-rgb),.35);background:rgba(var(--accent-primary-rgb),.12);outline:none}.chord-variation-nav-button:active{transform:translateY(1px)}.chord-variation-nav-button:disabled{opacity:.45;cursor:not-allowed}@media (max-width:768px){.chord-variation-diagram-wrapper{gap:var(--spacing-xs)}.chord-variation-nav-button{font-size:var(--font-size-2xl);width:var(--control-md);height:var(--control-md)}}