@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format("woff2")}@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4.woff2) format("woff2")}@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format("woff2")}@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.woff2) format("woff2")}:root{--bg: #fbfcfe;--text: #1b2330;--text-muted: #5a6573;--text-faint: #98a2b3;--panel: #f4f7fb;--card: #ffffff;--border: #e6ebf3;--border-strong: #d3dae6;--accent: #3a6df0;--accent-strong: #2f5ad6;--accent-soft: #e9effe;--accent-ink: #1f47b8;--accent-on: #ffffff;--accent-border: #acc3fb;--lh: #2f6df0;--rh: #e23b3b;--root: #2e9e44;--lh-key: #2456c8;--rh-key: #c22f2f;--key-white: #ffffff;--key-black: #232b3a;--key-border: #1b2330;--font-display: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;--font-ui: "Hanken Grotesk", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--radius-sm: 7px;--radius: 9px;--radius-lg: 13px;--shadow: 0 12px 28px -18px rgba(20, 28, 48, .4);--stage-shadow: 0 10px 14px -10px rgba(20, 28, 48, .3)}body,.chord-picker,.playback,.export-bar,.browser-group,.grand-staff,.stage,.now-playing,.np-hands,.chip,.filter-chip,.seg,.voicing-item,.group-count,.vi-hands,.play-btn,.random-btn,.export-bar button,.picker-select,.symbol-entry input,.key{transition:background-color .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease}@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}:where(button,input,select,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.key:focus-visible{outline-offset:-2px;z-index:5}.play-btn:active:not(:disabled),.random-btn:active{transform:translateY(1px)}.app-header h1,.current-symbol,.now-playing strong{font-optical-sizing:auto}.app-header h1{line-height:1.05}.current-symbol{letter-spacing:-.01em}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--text);transition:background .4s ease,color .4s ease}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;font-family:var(--font-ui);color:var(--text)}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap}.app-header__titlerow{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.app-header h1{margin:0;font-family:var(--font-display);font-size:2.1rem;font-weight:600;letter-spacing:-.015em}.app-tagline{margin:0;color:var(--text-muted);max-width:60ch;line-height:1.5}.app-main{margin-top:2rem}.placeholder{padding:1.25rem 1.5rem;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--panel);color:var(--text-muted)}.controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-bottom:.5rem}.control{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-muted)}.control input[type=text],.control input:not([type]){font-size:1rem;padding:.4rem .6rem;border:1px solid var(--border-strong);border-radius:var(--radius);width:11rem}.count{color:var(--text-muted);font-size:.85rem}.error{color:var(--root);font-size:.85rem}.symbol-entry{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}.symbol-entry input{font-size:1rem;padding:.4rem .6rem;border:1px solid var(--border-strong);border-radius:var(--radius);width:12rem}.symbol-entry .hint{color:var(--text-faint);font-size:.8rem}.symbol-error{color:var(--root);font-size:.82rem}.random-btn{font-size:.9rem;padding:.4rem .75rem;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);cursor:pointer;white-space:nowrap}.random-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 78%,var(--accent) 14%)}.playback{display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap;overflow-x:auto;margin:.25rem 0 .75rem;padding:.5rem .75rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.playback .control{flex:0 0 auto}.playback input[type=range]{width:80px}.playback .control span{white-space:nowrap}.current-symbol{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--text);min-width:4rem;white-space:nowrap;flex:0 0 auto}.now-playing strong{font-family:var(--font-display);font-weight:600}.control--check{gap:.35rem;cursor:pointer}.play-btn{font-size:.95rem;padding:.4rem .9rem;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--card);cursor:pointer}.play-btn:hover:not(:disabled){background:var(--accent-strong);box-shadow:0 4px 12px -6px var(--accent)}.play-btn:disabled{opacity:.5;cursor:default}.stage{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;position:sticky;top:0;z-index:20;background:var(--bg);padding:.5rem 0;box-shadow:var(--stage-shadow)}.stage .keyboard-scroll{flex:1 1 420px;min-width:0}.stage .grand-staff{flex:0 0 auto}.legend-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.4rem 0 .75rem}.legend-bar .hint{color:var(--text-faint);font-size:.82rem}.legend-bar .loading{color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:999px;padding:.1rem .6rem;font-size:.78rem}.np-hands{font-size:.75rem;color:var(--text-muted);background:var(--panel);border-radius:999px;padding:.1rem .5rem}.now-playing{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1rem;font-size:.95rem}.now-playing .notes{color:var(--text-muted);font-variant-numeric:tabular-nums}.legend{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-muted);font-size:.85rem}.swatch{width:12px;height:12px;border-radius:3px;display:inline-block;margin-left:.6rem}.swatch--lh{background:var(--lh)}.swatch--rh{background:var(--rh)}.swatch--root{background:var(--root);border-radius:50%}.voicing-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem}.voicing-list button{width:100%;display:flex;align-items:baseline;gap:.5rem;padding:.45rem .6rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;text-align:left;font-size:.85rem}.voicing-list button:hover{background:var(--accent-soft);border-color:var(--accent-border)}.voicing-list button.selected{background:var(--accent-soft);border-color:var(--accent)}.voicing-list .vfamily{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint)}.voicing-list .vlabel{flex:1}.voicing-list .vhands{color:var(--text-faint);font-size:.75rem}@media(max-width:820px){.app{padding:1.25rem 1rem}.stage{flex-direction:column;position:static;box-shadow:none;padding:0}.stage .keyboard-scroll,.stage .grand-staff{flex:1 1 100%;width:100%}.stage .grand-staff{align-self:center}.app-header h1{font-size:1.5rem}}@media(max-width:520px){.controls,.playback,.chord-picker{gap:.6rem .8rem}.playback{flex-wrap:wrap;overflow-x:visible}.symbol-entry{flex-wrap:wrap}.browser-groups{column-width:auto;column-count:1}}.keyboard-scroll{overflow-x:auto;overflow-y:hidden;padding:12px 0;width:100%;-webkit-overflow-scrolling:touch}.keyboard{position:relative;margin:0 auto;-webkit-user-select:none;user-select:none}.key{position:absolute;top:0;padding:0;margin:0;border:1px solid var(--key-border);box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}.key--white{background:var(--key-white);border-radius:0 0 3px 3px;z-index:1}.key--white:hover,.key--white:active{background:var(--accent-soft)}.key--black{background:var(--key-black);border-radius:0 0 2px 2px;z-index:2}.key--black:hover{filter:brightness(1.3)}.key--black:active{filter:brightness(.85)}.key--lh.key--white{background:var(--lh)}.key--lh.key--black{background:var(--lh-key)}.key--rh.key--white{background:var(--rh)}.key--rh.key--black{background:var(--rh-key)}.key--lh:hover,.key--rh:hover{filter:brightness(1.08)}.key__root-dot{width:9px;height:9px;margin-bottom:8px;border-radius:50%;background:var(--root);box-shadow:0 0 0 2px #fffc}.key--black .key__root-dot{margin-bottom:6px}.key__octave{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:8px;line-height:1;color:var(--text-faint);pointer-events:none}.key__octave--mid{color:var(--root);font-weight:700;font-size:9px}.key--middle-c.key--white:not(.key--lh):not(.key--rh){background:color-mix(in srgb,var(--root) 12%,var(--key-white))}.key--middle-c.key--white{box-shadow:inset 2px 0 0 var(--root)}.grand-staff{display:inline-block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px 10px;min-width:240px;box-shadow:var(--shadow)}.grand-staff svg{display:block}.chord-picker{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.7rem .85rem;padding:.7rem .85rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow-x:auto}.picker-section{display:flex;flex-direction:column;gap:.35rem;flex:0 0 auto}.picker-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);font-weight:600}.picker-row{display:flex;flex-wrap:nowrap;gap:.2rem}.chip{min-width:1.5rem;padding:.28rem .4rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.82rem;cursor:pointer;white-space:nowrap}.chip:hover{border-color:var(--accent-border);background:var(--accent-soft)}.chip--on{background:var(--accent);border-color:var(--accent);color:var(--card);font-weight:600}.picker-select{padding:.35rem .4rem;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--card);font-size:.85rem;min-width:7rem}@media(max-width:520px){.chord-picker{flex-wrap:wrap;overflow-x:visible}.picker-row{flex-wrap:wrap}}.voicing-browser{margin-top:.5rem}.browser-filters{display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap;margin-bottom:.75rem}.family-filters{display:flex;flex-wrap:wrap;gap:.3rem}.filter-chip{padding:.25rem .55rem;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:.78rem;cursor:pointer}.filter-chip:hover{background:var(--accent-soft)}.filter-chip--off{background:var(--panel);border-color:var(--border);color:var(--text-faint);text-decoration:line-through}.hand-filter{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}.seg{padding:.3rem .7rem;border:none;background:var(--card);color:var(--text-muted);font-size:.8rem;cursor:pointer;border-right:1px solid var(--border)}.seg:last-child{border-right:none}.seg--on{background:var(--accent);color:var(--card);font-weight:600}.variants-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--text-muted);cursor:pointer;margin-left:auto}.browser-count{color:var(--text-muted);font-size:.8rem}.browser-groups{column-width:260px;column-gap:1rem}.browser-group{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.5rem .6rem;background:var(--card);margin-bottom:.75rem;break-inside:avoid;-webkit-column-break-inside:avoid;box-shadow:var(--shadow)}.group-header{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);display:flex;align-items:center;gap:.4rem}.group-count{font-size:.7rem;background:var(--panel);color:var(--text-muted);border-radius:999px;padding:.05rem .4rem}.group-info{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:none;border-radius:999px;background:transparent;color:var(--text-faint);font-size:.95rem;line-height:1;cursor:pointer}.group-info:hover{color:var(--accent);background:var(--accent-soft)}.group-info--on{color:var(--accent-on);background:var(--accent)}.group-info-panel{margin:0 0 .5rem;padding:.45rem .55rem;border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-ink);font-size:.78rem;line-height:1.4}.group-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.voicing-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;font-size:.83rem;text-align:left}.voicing-item:hover{background:var(--accent-soft);border-color:var(--accent-border)}.voicing-item--selected{background:var(--accent-soft);border-color:var(--accent);font-weight:600}.vi-hands{font-size:.68rem;padding:.05rem .35rem;border-radius:5px;color:var(--card)}.vi-hands--1{background:var(--text-faint)}.vi-hands--2{background:var(--lh)}.browser-empty{color:var(--text-muted);font-style:italic;column-span:all}.export-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem;padding:.5rem .75rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.export-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);font-weight:600;margin-right:.25rem}.export-bar button{font-size:.85rem;padding:.35rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--card);cursor:pointer}.export-bar button:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-border)}.export-bar button:disabled{opacity:.5;cursor:default}.export-bar .share-btn{border-color:var(--accent);color:var(--accent-ink);font-weight:600}.export-status{color:var(--lh);font-size:.8rem;margin-left:.25rem}.help{position:relative;display:inline-flex}.help-btn{width:1.6rem;height:1.6rem;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--font-ui);font-size:.9rem;font-weight:700;line-height:1;cursor:pointer}.help-btn:hover,.help-btn--on{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}.help-panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;width:min(22rem,88vw);padding:.85rem 1rem 1rem;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:0 18px 40px -20px #141c3073;font-size:.85rem;color:var(--text)}.help-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}.help-panel__head strong{font-family:var(--font-display);font-size:1.05rem;font-weight:600}.help-close{border:none;background:transparent;color:var(--text-faint);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .2rem}.help-close:hover{color:var(--text)}.help-list{margin:0}.help-list dt{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink);margin-top:.6rem}.help-list dt:first-child{margin-top:0}.help-list dd{margin:.15rem 0 0;color:var(--text-muted);line-height:1.45}.help-list code{font-family:var(--font-mono);font-size:.82em;background:var(--panel);padding:.05rem .3rem;border-radius:var(--radius-sm);color:var(--text)}.help-list kbd{font-family:var(--font-mono);font-size:.78em;background:var(--panel);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);padding:.02rem .32rem;color:var(--text)}.help-i{color:var(--accent);font-size:.95em}.help-swatch{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin:0 .15rem 0 .35rem;vertical-align:-1px}.help-swatch--lh{background:var(--lh)}.help-swatch--rh{background:var(--rh)}.help-swatch--root{background:var(--root);border-radius:50%}