@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap";:root{--brand-accent-light:#059669;--brand-accent-dark:#10b981;--accent-color:var(--brand-accent-light);--bg-color-light:#f8fafc;--bg-color-dark:#0f172a;--bg-color:var(--bg-color-light);--surface-color-light:#fff;--surface-color-dark:#1e293b;--surface-color:var(--surface-color-light);--text-main-light:#0f172a;--text-main-dark:#f8fafc;--text-main:var(--text-main-light);--text-muted-light:#64748b;--text-muted-dark:#94a3b8;--text-muted:var(--text-muted-light);--border-color-light:#e2e8f0;--border-color-dark:#334155;--border-color:var(--border-color-light);--shadow-sm-light:0 1px 2px 0 #0000000d;--shadow-sm-dark:0 1px 2px 0 #0006;--shadow-sm:var(--shadow-sm-light);--shadow-lg-light:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-lg-dark:0 10px 15px -3px #00000080, 0 4px 6px -2px #0000004d;--shadow-lg:var(--shadow-lg-light)}@media (prefers-color-scheme:dark){:root{--accent-color:var(--brand-accent-dark);--bg-color:var(--bg-color-dark);--surface-color:var(--surface-color-dark);--text-main:var(--text-main-dark);--text-muted:var(--text-muted-dark);--border-color:var(--border-color-dark);--shadow-sm:var(--shadow-sm-dark);--shadow-lg:var(--shadow-lg-dark)}}@supports (color:light-dark(white, black)){:root{--accent-color:light-dark(var(--brand-accent-light),var(--brand-accent-dark));--bg-color:light-dark(var(--bg-color-light),var(--bg-color-dark));--surface-color:light-dark(var(--surface-color-light),var(--surface-color-dark));--text-main:light-dark(var(--text-main-light),var(--text-main-dark));--text-muted:light-dark(var(--text-muted-light),var(--text-muted-dark));--border-color:light-dark(var(--border-color-light),var(--border-color-dark))}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;accent-color:var(--accent-color);--radius:16px;font-family:Inter,system-ui,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100vh;margin:0;padding:0;transition:background-color .3s;display:flex}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-family:Outfit,system-ui,sans-serif}a{color:var(--accent-color);text-decoration:none}a:hover{text-decoration:underline}button{background-color:var(--surface-color);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:9999px;padding:.6rem 1.2rem;font-family:Inter,sans-serif;font-size:.95rem;font-weight:500;transition:all .2s ease-in-out}button:hover{box-shadow:var(--shadow-sm);background-color:var(--lightningcss-light,#f1f5f9)var(--lightningcss-dark,#334155);transform:translateY(-1px)}button:active{transform:translateY(0)}button.primary{background:var(--accent-color);color:#fff;box-shadow:var(--shadow-sm);border:none}button.primary:hover{background-color:var(--lightningcss-light,#047857)var(--lightningcss-dark,#059669);transform:translateY(-1px)}.glass{background-color:var(--surface-color);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.sticky-top{z-index:50;background:var(--surface-color);border-bottom:1px solid var(--border-color);margin-left:-1.5rem;margin-right:-1.5rem;padding:1rem 1.5rem;position:sticky;top:0}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}@keyframes staggerEnter{0%{opacity:0;transform:translateY(15px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.animate-in{opacity:0;animation:.4s cubic-bezier(.16,1,.3,1) forwards staggerEnter}.chord-grid>:first-child{animation-delay:50ms}.chord-grid>:nth-child(2){animation-delay:.1s}.chord-grid>:nth-child(3){animation-delay:.15s}.chord-grid>:nth-child(4){animation-delay:.2s}.chord-grid>:nth-child(5){animation-delay:.25s}.chord-grid>:nth-child(6){animation-delay:.3s}.chord-grid>:nth-child(7){animation-delay:.35s}.chord-grid>:nth-child(8){animation-delay:.4s}@keyframes icon-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.icon-pop-active{animation:.3s cubic-bezier(.175,.885,.32,1.275) icon-pop}::view-transition-old(root){animation-duration:.3s}::view-transition-new(root){animation-duration:.3s}dialog.expanded-chord-modal{background:0 0;border:none;outline:none;max-width:90vw;max-height:90vh;margin:auto;padding:0;overflow:visible}dialog.expanded-chord-modal::backdrop{-webkit-backdrop-filter:blur(8px);background:#000000b3;animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.vt-expanded-card{view-transition-name:expanded-card}::view-transition-old(expanded-card){animation-duration:.4s;animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}::view-transition-new(expanded-card){animation-duration:.4s;animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}.filter-chips-container{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.filter-chip{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border-radius:9999px;padding:.4rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.filter-chip:hover{background-color:var(--surface-color);color:var(--text-main);border-color:#666}.filter-chip.active{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}.family-section{margin-bottom:3rem}.family-section-header{color:var(--text-main);border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.5rem;font-weight:700}.dropdown-option{text-align:left;-webkit-backdrop-filter:none;cursor:pointer;width:100%;color:var(--text-main);background-color:#0000;border:none;border-radius:0;padding:.75rem 1rem;transition:background-color .2s,color .2s}.fretboard-wrapper{padding-top:1rem;padding-bottom:2rem;padding-right:2rem;overflow-x:auto}.tuning-info{color:var(--text-muted);margin:-.5rem 0 0}.fretboard{border:1px solid var(--border-color);background:linear-gradient(#1e1e1e 0%,#151515 100%);border-radius:4px;min-width:800px;height:220px;margin-top:10px;margin-bottom:30px;display:flex;position:relative;box-shadow:inset 0 2px 10px #00000080}.fret-col{border-right:2px solid #444;flex-direction:column;flex:1;display:flex;position:relative}.fret-col.nut{background:#111;border-right:6px solid #e5e5e5;border-top-left-radius:4px;border-bottom-left-radius:4px;flex:.2}.fret-number{text-align:center;width:100%;color:var(--text-muted);font-size:.9rem;font-weight:700;position:absolute;bottom:-30px}.fret-number.open-label{width:auto;left:-10px}.fret-marker{pointer-events:none;background:#ffffff14;border-radius:50%;width:24px;height:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fret-marker.double-1{top:25%}.fret-marker.double-2{top:75%}.string-line{left:0;right:0;top:var(--pos);height:var(--thick);z-index:1;pointer-events:none;background:linear-gradient(#999 0%,#666 100%);position:absolute;box-shadow:0 1px 2px #00000080}.note-circle{left:50%;top:var(--pos);background:var(--accent-color);color:#fff;z-index:2;cursor:default;border:1px solid #0000001a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.85rem;font-weight:700;transition:transform .2s;display:flex;position:absolute;transform:translate(-50%,-50%)}.note-circle:hover{z-index:3;transform:translate(-50%,-50%)scale(1.1)}.note-circle.open{border:1px solid var(--border-color);color:var(--text-main);background:#2a2a2a;left:-15px}@media (width<=768px){.fretboard-wrapper{padding-top:1rem;padding-bottom:2rem;padding-right:0;overflow:hidden auto}.fretboard{background:linear-gradient(90deg,#1e1e1e 0%,#151515 100%);flex-direction:column;width:100%;min-width:0;height:65vh;min-height:400px}.fret-col{border-bottom:2px solid #444;border-right:none;flex-direction:row}.fret-col.nut{border-bottom:6px solid #e5e5e5;border-right:none;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-left-radius:0}.string-line{top:0;bottom:0;left:calc(100% - var(--pos));width:var(--thick);background:linear-gradient(90deg,#999 0%,#666 100%);height:auto}.note-circle{left:calc(100% - var(--pos));width:24px;height:24px;font-size:.7rem;top:50%}.note-circle.open{left:calc(100% - var(--pos));top:-15px}.fret-number{width:auto;top:50%;bottom:auto;right:25px;transform:translateY(-50%)}.fret-number.open-label{top:25px;left:50%;right:auto;transform:translate(-50%)}.fret-marker.double-1{top:50%;left:25%}.fret-marker.double-2{top:50%;left:75%}}.dropdown-option:hover{background-color:var(--border-color)}.dropdown-option.selected{color:var(--brand-accent-light);background-color:#6366f11a}.dropdown-option.selected:hover{background-color:#6366f133}.navbar-container{justify-content:space-between;align-items:center;gap:1rem;display:flex}.navbar-brand{flex-direction:row;align-items:center;gap:1rem;display:flex}.navbar-actions{align-items:center;gap:1rem;display:flex}.chord-grid-responsive{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem;display:grid}.mobile-only{display:none!important}.desktop-only{display:flex!important}@media (width<=768px){.mobile-only{display:flex!important}.desktop-only{display:none!important}.navbar-container{flex-direction:column;align-items:stretch;padding:1rem 1.2rem!important}.navbar-brand{justify-content:space-between;width:100%}.navbar-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.75rem}.navbar-brand h1{font-size:1.5rem!important}button{padding:.5rem 1rem!important;font-size:.85rem!important}.chord-grid-responsive{grid-template-columns:1fr;gap:1.5rem}}