@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Libre+Franklin:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--color-bg: #15161A;--color-surface: #1C1E23;--color-surface-2: #24272D;--color-surface-3: #2D3137;--color-line: #2D3037;--color-line-strong: #3D4149;--color-text: #E7EAEE;--color-muted: #9298A1;--color-subtle: #636870;--color-accent: #D99A3A;--color-accent-ink: #E8BA6A;--color-accent-tint: color-mix(in oklab, #D99A3A 14%, #1C1E23);--color-accent-glow: color-mix(in oklab, #D99A3A 60%, transparent);--color-guitar: #C2674A;--color-bass: #8A80B6;--color-uke: #3F9B91;--color-drums: #C45D6E;--color-piano: #5E8CC0;--bg: var(--color-bg);--surface: var(--color-surface);--surface-2: var(--color-surface-2);--surface-3: var(--color-surface-3);--line: var(--color-line);--line-strong: var(--color-line-strong);--text: var(--color-text);--muted: var(--color-muted);--accent: var(--color-accent);--accent-ink: var(--color-accent-ink)}:root{--font-display: "Space Grotesk", sans-serif;--font-body: "Hanken Grotesk", sans-serif;--mono: "JetBrains Mono", monospace;--font-brand: "Bricolage Grotesque", var(--font-display);--font-display-alt-1: "Bricolage Grotesque", sans-serif;--font-display-alt-2: "Libre Franklin", sans-serif;--font-display-alt-3: "Instrument Serif", serif;--font-body-alt-1: "IBM Plex Sans", sans-serif;--font-body-alt-2: "Public Sans", sans-serif;--text-2xs: 10px;--text-xs: 11px;--text-sm: 12.5px;--text-base: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 22px;--text-2xl: 28px;--text-3xl: 38px;--text-4xl: 56px;--leading-tight: 1.02;--leading-snug: 1.15;--leading-normal: 1.4;--leading-relaxed: 1.55;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700}:root{--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-7: 32px;--sp-8: 40px;--sp-9: 48px;--sp-10: 64px;--r-sm: 6px;--r-md: 8px;--r-lg: 12px;--r-xl: 16px;--r-2xl: 24px;--r-pill: 999px;--shadow-xs: 0 1px 4px -1px rgba(0,0,0,.5);--shadow-sm: 0 2px 8px -2px rgba(0,0,0,.55);--shadow-md: 0 8px 24px -8px rgba(0,0,0,.65);--shadow-lg: 0 18px 50px -24px rgba(0,0,0,.7);--shadow-accent: 0 4px 14px -4px var(--color-accent-glow, rgba(217,154,58,.6));--pad-x: var(--sp-8)}:root{--duration-instant: 80ms;--duration-fast: .12s;--duration-base: .16s;--duration-slow: .28s;--duration-enter: .22s;--ease-default: ease;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--t-color: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);--t-border: border-color var(--duration-base) var(--ease-default);--t-lift: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);--t-filter: filter var(--duration-fast) var(--ease-default);--t-fade: opacity var(--duration-base) var(--ease-default)}.tool-lead{color:var(--muted);font-size:var(--text-md);max-width:60ch;margin:var(--sp-3) auto 0;text-align:center}.tool-body>:first-child,.tool-body>div:first-child>:first-child{margin-top:0}.tool-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}.tool-card{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5);background:var(--surface-2);border-radius:var(--r-lg);text-decoration:none;transition:background .16s,transform .16s}.tool-card:hover{background:var(--surface-3);transform:translateY(-2px)}.tool-card .tc-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--surface-3);color:var(--accent-ink)}.tool-card:hover .tc-icon{background:color-mix(in srgb,var(--accent) 18%,var(--surface-3))}.tc-label{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--text)}.tc-sub{display:block;color:var(--muted);font-size:var(--text-sm);margin-top:2px}.tool-filters{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}.search-row{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3)}.search-row .filter-search{flex:1;margin-bottom:0}.notation-switch{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0}.notation-switch-label{font-size:12.5px;color:var(--muted)}.cf-toggle{width:34px;height:19px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);position:relative;flex-shrink:0;cursor:pointer;transition:background .14s,border-color .14s}.cf-toggle:after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:left .14s,background .14s}.cf-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-glow)}.cf-toggle.on{background:color-mix(in oklab,var(--accent) 40%,var(--surface-2));border-color:var(--accent)}.cf-toggle.on:after{left:17px;background:var(--accent-ink)}.filter-search{display:flex;align-items:center;gap:.5rem;max-width:420px;padding:.4rem .9rem;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:13px;transition:border-color .16s,box-shadow .16s}.filter-search:focus-within{box-shadow:0 0 24px 2px color-mix(in oklab,var(--accent) 55%,transparent)}.filter-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:.98rem;padding:.4rem 0}.filter-search input::placeholder{color:var(--faint)}.filter-search .fs-icon{flex-shrink:0;display:grid;place-items:center;color:var(--faint);pointer-events:none}.filter-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}.cf-select{position:relative}.cf-select-btn{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md, 10px);padding:var(--sp-2) var(--sp-3);color:var(--text);min-width:132px;transition:border-color .14s}.cf-select-btn:hover{border-color:var(--line-strong)}.cf-select-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-glow)}.cf-select-cap{font-family:var(--mono);font-size:var(--text-2xs, 10px);letter-spacing:.08em;text-transform:uppercase;color:var(--color-subtle)}.cf-select-val{flex:1;text-align:left;font-size:var(--text-sm);font-weight:600}.cf-select-chev{flex-shrink:0;color:var(--muted)}.cf-menu{position:absolute;top:calc(100% + var(--sp-2));left:0;z-index:41;min-width:100%;background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-lg, 14px);padding:var(--sp-2);box-shadow:0 26px 54px -18px #000000b8;max-height:60vh;overflow-y:auto}.cf-menu[hidden]{display:none}.cf-menu-item{display:block;border-radius:var(--r-md, 10px);padding:var(--sp-2) var(--sp-3);color:var(--text);text-decoration:none;font-size:var(--text-sm);white-space:nowrap}.cf-menu-item:hover{background:var(--surface-2)}.cf-menu-item.on{background:color-mix(in oklab,var(--accent) 18%,var(--surface-2));color:var(--accent-ink);font-weight:600}.cf-menu-item.is-disabled{opacity:.32;pointer-events:none}.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.chip-label{font-family:var(--mono);font-size:var(--text-2xs, 10px);letter-spacing:.08em;text-transform:uppercase;color:var(--color-subtle);margin-right:var(--sp-1)}.chip{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:var(--text-sm);font-weight:500;line-height:1;transition:background .14s,color .14s,box-shadow .14s}.chip:hover{color:var(--text);background:var(--surface-3)}.chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-glow)}.chip.is-disabled{opacity:.32;color:var(--faint);background:var(--surface-2);cursor:not-allowed;pointer-events:none}.chip.active{color:var(--accent-ink);font-weight:600;background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));box-shadow:0 0 0 1px var(--color-accent-glow),0 0 16px -6px var(--accent)}.tool-count{font-family:var(--mono);font-size:var(--text-sm);color:var(--muted)}.tool-count b{color:var(--accent-ink);font-weight:600}.chord-notes{color:var(--muted);font-size:var(--text-sm);margin:var(--sp-1) 0 0}.chord-notes[hidden]{display:none}.chord-grid{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);transition:opacity .12s}.chord-grid.is-loading{opacity:.45;pointer-events:none}.chord-card{appearance:none;border:0;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3) var(--sp-2);transition:background .14s,transform .14s}.chord-card[hidden]{display:none}.chord-card:hover{background:var(--surface-3);transform:translateY(-2px)}.chord-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-glow)}.chord-card .chorddiag{width:100%}.chord-card .chorddiag svg{width:100%;height:auto}.chord-card .cc-name{font-family:var(--mono);font-size:var(--text-xs);font-weight:700;color:var(--accent-ink);letter-spacing:.02em;padding-top:var(--sp-1);line-height:1}.chord-empty{margin-top:var(--sp-6);color:var(--muted);font-size:var(--text-md)}.chord-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#0000009e;backdrop-filter:blur(2px);padding:var(--sp-5)}.chord-modal[hidden]{display:none}.cm-card{background:var(--surface-2);border-radius:var(--r-xl);box-shadow:0 24px 60px -16px #000c;padding:var(--sp-6);max-width:360px;width:100%;display:flex;flex-direction:column;align-items:center}.cm-head{display:flex;align-items:baseline;justify-content:space-between;width:100%;margin-bottom:var(--sp-4)}.cm-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);color:var(--text)}.cm-close{appearance:none;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:4px}.cm-close:hover{color:var(--text)}.cm-notes{font-family:var(--mono);font-size:var(--text-sm);color:var(--muted);margin-top:var(--sp-4)}.cm-notes b{color:var(--accent-ink);font-weight:600}.cm-body :where(.chorddiag){background:none;border:0;padding:0}.chorddiag{display:inline-flex;flex-direction:column;align-items:center;user-select:none;-webkit-user-select:none}.chorddiag svg{display:block}.chorddiag-name{font-family:var(--mono);font-size:var(--text-xs);color:var(--accent-ink);font-weight:700;letter-spacing:.02em;padding-top:var(--sp-1);line-height:1}.chord-card .chorddiag-name{display:none}.chord-slider-view{position:relative}.chord-slide[hidden]{display:none}.chord-slide svg{display:block}.chord-slider-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2) 0 0}.chord-slider-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;transition:color .12s}.chord-slider-btn:hover{color:var(--accent-ink)}.chord-slider-count{font-family:var(--mono);font-size:var(--text-sm);color:var(--muted);min-width:34px;text-align:center}.metro{margin-top:var(--sp-7);display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)}.metro:not(.compact){margin-inline:auto;max-width:480px;padding:var(--sp-7) var(--sp-6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl)}.metro-bpm{display:flex;flex-direction:column;align-items:center;gap:2px}.metro-bpm-num{font-family:var(--font-display);font-weight:700;font-size:clamp(72px,14vw,132px);line-height:.9;color:var(--text);font-variant-numeric:tabular-nums}.metro-bpm-label{font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--color-subtle)}.metro-beats{display:flex;gap:var(--sp-3);height:22px;align-items:center}.metro-beat{width:14px;height:14px;border-radius:999px;background:var(--surface-3);transition:transform .06s,background .06s}.metro-beat.on{background:var(--accent-ink);transform:scale(1.5)}.metro-beat.accent.on{background:var(--accent)}.metro-range{width:min(440px,92%)}.metro-range input[type=range]{width:100%;accent-color:var(--accent)}.metro-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:center}.metro-step{appearance:none;border:0;cursor:pointer;width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);font-size:22px;line-height:1;transition:background .14s}.metro-step:hover{background:var(--surface-3);color:var(--accent-ink)}.metro-play{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-radius:999px;background:var(--accent);color:#15161a;font:inherit;font-weight:700;font-size:var(--text-md);transition:filter .14s,transform .1s}.metro-play:hover{filter:brightness(1.06)}.metro-play:active{transform:scale(.97)}.tool-select{appearance:none;padding:var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-3);border:0;border-radius:var(--r-md);background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239298A1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center;color:var(--text);font:inherit;font-size:var(--text-sm);cursor:pointer}.tool-field{display:inline-flex;flex-direction:column;gap:4px}.tool-field>span{font-family:var(--mono);font-size:var(--text-2xs, 10px);letter-spacing:.08em;text-transform:uppercase;color:var(--color-subtle)}.transposer{margin-top:var(--sp-7);display:grid;gap:var(--sp-5);grid-template-columns:1fr;max-width:760px}.transposer textarea{width:100%;min-height:180px;resize:vertical;background:var(--surface-2);border:0;border-radius:var(--r-lg);color:var(--text);font-family:var(--mono);font-size:var(--text-md);line-height:1.7;padding:var(--sp-4);outline:1px solid transparent;transition:box-shadow .16s}.transposer textarea:focus{box-shadow:0 0 0 3px var(--color-accent-glow)}.tx-controls{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}.tx-stepper{display:inline-flex;align-items:center;gap:var(--sp-3);background:var(--surface-2);border-radius:999px;padding:4px}.tx-stepper button{appearance:none;border:0;cursor:pointer;width:36px;height:36px;border-radius:999px;background:var(--surface-3);color:var(--text);font-size:20px;line-height:1;transition:background .14s,color .14s}.tx-stepper button:hover{background:color-mix(in srgb,var(--accent) 16%,var(--surface-3));color:var(--accent-ink)}.tx-amount{font-family:var(--mono);font-size:var(--text-lg);color:var(--accent-ink);min-width:64px;text-align:center;font-weight:600}.tx-out{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--sp-4);font-family:var(--mono);font-size:var(--text-md);line-height:1.7;color:var(--text);white-space:pre-wrap;min-height:120px}.tx-out .ch{color:var(--accent-ink);font-weight:600}.tx-key{font-family:var(--mono);font-size:var(--text-sm);color:var(--muted)}.tx-key b{color:var(--accent-ink)}.tuner{margin-top:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-6);align-items:center}.tuner:not(.compact){margin-inline:auto;max-width:480px;padding:var(--sp-7) var(--sp-6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl)}.tuner-strings{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center}.string-btn{appearance:none;border:0;cursor:pointer;width:88px;height:88px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .14s,box-shadow .14s,transform .1s}.string-btn:hover{background:var(--surface-3)}.string-btn.ringing{background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));box-shadow:0 0 0 1px var(--color-accent-glow),0 0 28px -6px var(--accent)}.string-btn .sb-note{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--accent-ink)}.string-btn .sb-str{font-family:var(--mono);font-size:var(--text-2xs, 10px);color:var(--muted);letter-spacing:.06em}.tuner-hint{color:var(--muted);font-size:var(--text-sm)}.glossary{margin-top:var(--sp-6);display:grid;gap:var(--sp-5)}.gloss-group{display:grid;gap:var(--sp-3)}.gloss-group[hidden]{display:none}.gloss-cat{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-subtle)}.gloss-item{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}.gloss-item[hidden]{display:none}.gloss-term{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--text)}.gloss-def{color:var(--muted);font-size:var(--text-md);margin-top:4px;line-height:1.55}.gloss-empty{color:var(--muted);font-size:var(--text-md)}.legal{max-width:760px;margin:0 auto;padding:var(--sp-7) var(--pad-x) var(--sp-10)}.legal h1{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text);margin:0 0 var(--sp-2);letter-spacing:-.02em}.legal .legal-updated{font-family:var(--mono);font-size:var(--text-sm);color:var(--color-subtle);margin-bottom:var(--sp-7)}.legal h2{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text);margin:var(--sp-7) 0 var(--sp-3)}.legal p,.legal li{color:var(--muted);font-size:var(--text-md);line-height:1.7}.legal ul{padding-left:var(--sp-5);display:grid;gap:var(--sp-2)}.legal a{color:var(--accent-ink)}.legal strong{color:var(--text);font-weight:600}@media(max-width:720px){.chord-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}