.chord-diagram-container.svelte-u8msff{display:inline-block;padding:var(--space-lg)}.chord-diagram.svelte-u8msff{display:flex;gap:var(--space-sm);align-items:flex-start}.fret-numbers.svelte-u8msff{display:flex;flex-direction:column;margin-top:28px}.fret-number.svelte-u8msff{height:40px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-muted);font-weight:500;padding-right:var(--space-xs)}.diagram-grid.svelte-u8msff{display:flex;flex-direction:column}.string-indicators.svelte-u8msff{display:grid;grid-template-columns:repeat(6,30px);height:20px;margin-bottom:var(--space-xs)}.string-indicator.svelte-u8msff{position:relative;width:30px}.muted-marker.svelte-u8msff,.open-marker.svelte-u8msff{position:absolute;left:-7px;top:50%;transform:translateY(-50%);font-size:.875rem;font-weight:700;color:var(--text-secondary)}.spacer.svelte-u8msff{display:block;height:20px}.fretboard-grid.svelte-u8msff{display:grid;grid-template-columns:repeat(6,30px);grid-template-rows:repeat(5,40px)}.grid-cell.svelte-u8msff{position:relative;display:flex;align-items:center;justify-content:center;border-left:2px solid var(--border-secondary);border-top:1px solid var(--border-secondary)}.grid-cell.thick-string.svelte-u8msff{border-left:3px solid var(--border-secondary)}.grid-cell.first-fret.svelte-u8msff{border-top:4px solid var(--border-secondary)}.grid-cell.last-string.svelte-u8msff{border-right:none;border-top:none;border-bottom:none;background-color:transparent}.grid-cell.last-fret.svelte-u8msff{border-bottom:1px solid var(--border-secondary)}.grid-cell.last-fret.last-string.svelte-u8msff{border-bottom:none}.note-marker.svelte-u8msff{position:absolute;width:22px;height:22px;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;z-index:10;line-height:1;left:-11px}.grid-cell.thick-string.svelte-u8msff .note-marker:where(.svelte-u8msff){left:-11px}.string-labels.svelte-u8msff{display:grid;grid-template-columns:repeat(6,30px);margin-top:var(--space-xs)}.string-label.svelte-u8msff{font-size:.625rem;color:var(--text-muted);font-weight:500;position:relative;left:-15px;text-align:center;width:30px}.chords-page.svelte-gxlogc{max-width:1200px;margin:0 auto;padding:var(--space-lg)}.page-header.svelte-gxlogc{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);color:var(--accent-primary)}.page-header.svelte-gxlogc h1:where(.svelte-gxlogc){font-size:2rem;font-weight:700;color:var(--text-primary);margin:0}.intro.svelte-gxlogc{font-size:1.1rem;color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-xl)}.mode-toggle-group.svelte-gxlogc{display:flex;justify-content:center;align-items:stretch;margin-bottom:var(--space-lg)}.mode-btn.svelte-gxlogc{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-secondary);background-color:var(--bg-secondary);color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin:0}.mode-btn.primary.svelte-gxlogc{font-weight:600}.mode-btn.learn.svelte-gxlogc{border-radius:var(--radius-md) 0 0 var(--radius-md);border-right:none}.mode-btn.explore.svelte-gxlogc{border-radius:0 var(--radius-md) var(--radius-md) 0}.sub-mode-group.svelte-gxlogc{display:flex;align-items:stretch;overflow:hidden;max-width:0;opacity:0;transition:max-width .3s ease,opacity .2s ease}.sub-mode-group.visible.svelte-gxlogc{max-width:200px;opacity:1}.mode-btn.sub.svelte-gxlogc{font-size:.8rem;padding:var(--space-sm) var(--space-sm);background-color:var(--bg-tertiary);color:var(--text-muted);border-left:none;border-radius:0;white-space:nowrap}.mode-btn.sub.active.svelte-gxlogc{background-color:var(--accent-secondary);border-color:var(--accent-secondary);color:#fff}.mode-btn.sub.svelte-gxlogc:hover:not(.active){background-color:var(--bg-secondary);color:var(--text-primary)}.mode-btn.svelte-gxlogc:hover:not(.active){background-color:var(--bg-tertiary);color:var(--text-primary)}.mode-btn.primary.active.svelte-gxlogc{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.item-selector.svelte-gxlogc{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);padding:var(--space-lg);background-color:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.nav-btn.svelte-gxlogc{width:48px;height:48px;border-radius:50%;border:2px solid var(--border-secondary);background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.nav-btn.svelte-gxlogc:hover{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.item-display.svelte-gxlogc{display:flex;flex-direction:column;align-items:center;min-width:200px}.item-name.svelte-gxlogc{font-size:1.75rem;font-weight:800;color:var(--accent-primary);line-height:1}.item-symbol.svelte-gxlogc{font-size:.9rem;color:var(--text-muted);margin-top:var(--space-xs)}.item-order.svelte-gxlogc{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap}.order-dot.svelte-gxlogc{width:32px;height:32px;border-radius:50%;background-color:var(--bg-tertiary);color:var(--text-muted);font-weight:600;font-size:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.order-dot.svelte-gxlogc:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.order-dot.active.svelte-gxlogc{background-color:var(--accent-primary);color:#fff}.concept-card.svelte-gxlogc{background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-md)}.concept-card.svelte-gxlogc h3:where(.svelte-gxlogc){font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-md)}.concept-card.svelte-gxlogc p:where(.svelte-gxlogc){color:var(--text-secondary);line-height:1.6;margin:0}.concept-card.svelte-gxlogc p:where(.svelte-gxlogc)+p:where(.svelte-gxlogc){margin-top:var(--space-sm)}.concept-card.highlight.svelte-gxlogc{background:linear-gradient(135deg,#673ab71a,#673ab70d);border:1px solid rgba(103,58,183,.2)}.feature-list.svelte-gxlogc{margin:0;padding-left:var(--space-lg);color:var(--text-secondary)}.feature-list.svelte-gxlogc li:where(.svelte-gxlogc){margin-bottom:var(--space-sm);line-height:1.6}.feature-list.svelte-gxlogc li:where(.svelte-gxlogc):last-child{margin-bottom:0}.example-grid.svelte-gxlogc{display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:center;margin-top:var(--space-md)}.example-item.svelte-gxlogc{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.example-label.svelte-gxlogc{font-size:.85rem;color:var(--text-muted);font-weight:500}.controls.svelte-gxlogc{background:var(--bg-secondary);padding:var(--space-lg);border-radius:var(--radius-lg);margin-bottom:var(--space-xl);border:1px solid var(--border-primary);display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:center;align-items:center}@media (max-width: 768px){.controls.svelte-gxlogc{flex-direction:column;align-items:stretch;gap:var(--space-md)}.control-group.svelte-gxlogc{width:100%}}.control-group.svelte-gxlogc{display:flex;align-items:center;gap:var(--space-sm)}.control-group.svelte-gxlogc label:where(.svelte-gxlogc){font-weight:500;color:var(--text-secondary);font-size:.875rem}.control-group.svelte-gxlogc select:where(.svelte-gxlogc){padding:var(--space-sm) var(--space-md);padding-right:32px;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.control-group.svelte-gxlogc select:where(.svelte-gxlogc):hover{border-color:var(--border-secondary)}.control-group.svelte-gxlogc select:where(.svelte-gxlogc):focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #673ab733}.selected-chord-info.svelte-gxlogc{margin-bottom:var(--space-xl)}.no-voicings.svelte-gxlogc{color:var(--text-secondary);font-style:italic;text-align:center;padding:var(--space-xl)}.chord-grid.svelte-gxlogc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl);margin-bottom:var(--space-xl)}@media (min-width: 1024px){.chord-grid.svelte-gxlogc{grid-template-columns:repeat(3,1fr)}}.chord-item.svelte-gxlogc{display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);background:var(--surface-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all .2s ease}.chord-item.svelte-gxlogc:hover{border-color:var(--primary-color);box-shadow:0 4px 12px var(--shadow-color);transform:translateY(-2px)}.chord-pills.svelte-gxlogc{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-md);align-items:center}.pill.svelte-gxlogc{display:inline-block;padding:4px 12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:999px;font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap}.pill.shape-pill.svelte-gxlogc{background:#22c55e26;color:#22c55e;border-color:#22c55e4d}.pill.inversion-pill.svelte-gxlogc{background:#a855f726;color:#a855f7;border-color:#a855f74d}.pill.fret-pill.svelte-gxlogc{background:var(--bg-tertiary);color:var(--text-secondary)}.pill.notation-pill.svelte-gxlogc{font-family:monospace;letter-spacing:.05em}.loading-container.svelte-gxlogc{display:flex;justify-content:center;align-items:center;min-height:200px;padding:var(--space-xl)}.loading-text.svelte-gxlogc{color:var(--text-secondary);font-style:italic}@media (max-width: 640px){.chords-page.svelte-gxlogc{padding:var(--space-md)}.page-header.svelte-gxlogc h1:where(.svelte-gxlogc){font-size:1.5rem}.item-name.svelte-gxlogc{font-size:1.5rem}.item-selector.svelte-gxlogc{padding:var(--space-md);gap:var(--space-md)}.nav-btn.svelte-gxlogc{width:40px;height:40px}.item-display.svelte-gxlogc{min-width:150px}.order-dot.svelte-gxlogc{width:28px;height:28px;font-size:.75rem}.example-grid.svelte-gxlogc{flex-direction:column;align-items:center}}