*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1c1c22}.app-header h1{margin:0 0 .4rem;font-size:1.9rem;letter-spacing:-.01em}.app-tagline{margin:0;color:#555;max-width:60ch;line-height:1.5}.app-main{margin-top:2rem}.placeholder{padding:1.25rem 1.5rem;border:1px dashed #c9c9d2;border-radius:10px;background:#fafafc;color:#444}.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:#555}.control input[type=text],.control input:not([type]){font-size:1rem;padding:.4rem .6rem;border:1px solid #c9c9d2;border-radius:8px;width:11rem}.count{color:#777;font-size:.85rem}.error{color:#d7263d;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 #c9c9d2;border-radius:8px;width:12rem}.symbol-entry .hint{color:#9a9aa4;font-size:.8rem}.symbol-error{color:#d7263d;font-size:.82rem}.playback{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.25rem 0 .75rem;padding:.5rem .75rem;background:#f6f7fb;border:1px solid #e4e4ec;border-radius:10px}.current-symbol{font-size:1.1rem;font-weight:700;color:#1c1c22;min-width:4rem}.control--check{gap:.35rem;cursor:pointer}.play-btn{font-size:.95rem;padding:.4rem .9rem;border:1px solid #6b8cff;border-radius:8px;background:#6b8cff;color:#fff;cursor:pointer}.play-btn:hover:not(:disabled){background:#5577f0}.play-btn:disabled{opacity:.5;cursor:default}.stage{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}.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:#9a9aa4;font-size:.82rem}.legend-bar .loading{color:#b06a00;background:#fff5e6;border:1px solid #f0dcb8;border-radius:999px;padding:.1rem .6rem;font-size:.78rem}.np-hands{font-size:.75rem;color:#777;background:#eef0f6;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:#555;font-variant-numeric:tabular-nums}.legend{display:inline-flex;align-items:center;gap:.4rem;color:#666;font-size:.85rem}.swatch{width:12px;height:12px;border-radius:3px;display:inline-block;margin-left:.6rem}.swatch--lh{background:#2ec4b6}.swatch--rh{background:#ff8c42}.swatch--root{background:#d7263d;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 #dcdce4;border-radius:8px;background:#fff;cursor:pointer;text-align:left;font-size:.85rem}.voicing-list button:hover{background:#f3f6ff;border-color:#b9c6ef}.voicing-list button.selected{background:#e8efff;border-color:#6b8cff}.voicing-list .vfamily{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:#8a8a96}.voicing-list .vlabel{flex:1}.voicing-list .vhands{color:#999;font-size:.75rem}@media(max-width:820px){.app{padding:1.25rem 1rem}.stage{flex-direction:column}.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}.browser-groups{grid-template-columns:1fr}}.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 #2a2a2a;box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}.key--white{background:#fcfcfc;border-radius:0 0 3px 3px;z-index:1}.key--white:hover{background:#eef4ff}.key--white:active{background:#dde8ff}.key--black{background:linear-gradient(#333,#111);border-radius:0 0 2px 2px;z-index:2}.key--black:hover{background:linear-gradient(#444,#222)}.key--black:active{background:linear-gradient(#222,#000)}.key--lh.key--white{background:#2ec4b6}.key--lh.key--black{background:#1f8f85}.key--rh.key--white{background:#ff8c42}.key--rh.key--black{background:#d96f2c}.key--lh:hover,.key--rh:hover{filter:brightness(1.08)}.key__root-dot{width:9px;height:9px;margin-bottom:8px;border-radius:50%;background:#d7263d;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:#9aa3b2;pointer-events:none}.key__octave--mid{color:#d7263d;font-weight:700;font-size:9px}.key--middle-c.key--white:not(.key--lh):not(.key--rh){background:#fdecee}.key--middle-c.key--white{box-shadow:inset 2px 0 #d7263d73}.grand-staff{display:inline-block;background:#fff;border:1px solid #e4e4ec;border-radius:10px;padding:6px 10px;min-width:240px}.grand-staff svg{display:block}.chord-picker{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem 1.5rem;padding:.85rem 1rem;background:#f6f7fb;border:1px solid #e4e4ec;border-radius:12px}.picker-section{display:flex;flex-direction:column;gap:.4rem}.picker-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#8a8a96;font-weight:600}.picker-row{display:flex;flex-wrap:wrap;gap:.25rem}.chip{min-width:2rem;padding:.3rem .5rem;border:1px solid #d3d6e0;border-radius:7px;background:#fff;color:#2a2a33;font-size:.85rem;cursor:pointer}.chip:hover{border-color:#9fb0f0;background:#f1f4ff}.chip--on{background:#6b8cff;border-color:#6b8cff;color:#fff;font-weight:600}.picker-select{padding:.4rem .5rem;border:1px solid #d3d6e0;border-radius:8px;background:#fff;font-size:.9rem;min-width:9rem}.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 #c9d2f0;border-radius:999px;background:#e8efff;color:#3550b0;font-size:.78rem;cursor:pointer}.filter-chip:hover{background:#dbe6ff}.filter-chip--off{background:#f1f1f4;border-color:#dcdce4;color:#9a9aa4;text-decoration:line-through}.hand-filter{display:inline-flex;border:1px solid #d3d6e0;border-radius:8px;overflow:hidden}.seg{padding:.3rem .7rem;border:none;background:#fff;color:#555;font-size:.8rem;cursor:pointer;border-right:1px solid #e4e4ec}.seg:last-child{border-right:none}.seg--on{background:#6b8cff;color:#fff;font-weight:600}.variants-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:#555;cursor:pointer;margin-left:auto}.browser-count{color:#888;font-size:.8rem}.browser-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem 1rem;align-items:start}.browser-group{border:1px solid #e7e7ee;border-radius:10px;padding:.5rem .6rem;background:#fff}.group-header{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:#555;display:flex;align-items:center;gap:.4rem}.group-count{font-size:.7rem;background:#eef0f6;color:#777;border-radius:999px;padding:.05rem .4rem}.group-info{margin-left:auto;color:#b3b8c5;font-size:.85rem;cursor:help}.group-header:hover .group-info{color:#6b8cff}.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 #e7e7ee;border-radius:7px;background:#fbfbfd;cursor:pointer;font-size:.83rem;text-align:left}.voicing-item:hover{background:#f1f4ff;border-color:#b9c6ef}.voicing-item--selected{background:#e8efff;border-color:#6b8cff;font-weight:600}.vi-hands{font-size:.68rem;padding:.05rem .35rem;border-radius:5px;color:#fff}.vi-hands--1{background:#8a93a6}.vi-hands--2{background:#2ec4b6}.browser-empty{color:#888;font-style:italic;grid-column:1 / -1}.export-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem;padding:.5rem .75rem;background:#f6f7fb;border:1px solid #e4e4ec;border-radius:10px}.export-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#8a8a96;font-weight:600;margin-right:.25rem}.export-bar button{font-size:.85rem;padding:.35rem .7rem;border:1px solid #d3d6e0;border-radius:7px;background:#fff;cursor:pointer}.export-bar button:hover:not(:disabled){background:#f1f4ff;border-color:#b9c6ef}.export-bar button:disabled{opacity:.5;cursor:default}.export-bar .share-btn{border-color:#6b8cff;color:#3550b0;font-weight:600}.export-status{color:#2ec4b6;font-size:.8rem;margin-left:.25rem}