:root{--bg-deep:#0a0d18;--bg-elev-0:#10141f;--bg-elev-1:#161b29;--bg-elev-2:#1d2235;--bg-elev-3:#252b42;--line:#ffffff12;--line-strong:#ffffff24;--text:#f4ecdb;--text-soft:#c8c2b4;--text-muted:#7a8099;--text-faint:#4b5170;--brass:#d4a559;--brass-bright:#f0c878;--brass-deep:#8a6a2e;--brass-glow:#d4a55940;--cool:#7eb2ff;--cool-soft:#7eb2ff2e;--good:#5be2a3;--good-soft:#5be2a329;--bad:#ff7a7a;--bad-soft:#ff7a7a29;--warn:#f2b544;--warn-soft:#f2b54429;--h2:#d97b4a;--h3:#7eb2ff;--h4:#5be2a3;--h5:#f2b544;--h6:#c79bff;--h7:#ff7a7a;--h8:#c8c2b4;--staff-color:#f4ecdb8c;--text-primary:var(--text);--radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-xl:32px;--shadow-card:0 8px 24px #0000004d;--shadow-elev:0 12px 32px #0006, inset 0 1px 0 #ffffff0a;--shadow-brass:0 8px 20px var(--brass-glow), inset 0 1px 0 #ffffff4d;--shadow-sheet:0 -8px 32px #00000080;--safe-bottom:env(safe-area-inset-bottom,0px);--tab-bar-height:calc(60px + var(--safe-bottom))}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-deep);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-family:Geist,system-ui,-apple-system,sans-serif;font-size:16px}#root{height:100%}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;font-family:inherit}input,select,textarea{color:inherit;font-family:inherit}.serif{letter-spacing:-.01em;font-family:Instrument Serif,Georgia,serif;font-weight:400}.mono{font-variant-numeric:tabular-nums;font-family:Geist Mono,ui-monospace,monospace}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-elev-3);border-radius:2px}@media (prefers-color-scheme:light){:root{--bg-deep:#ece6d8;--bg-elev-0:#f2ede2;--bg-elev-1:#faf7f0;--bg-elev-2:#ede7d9;--bg-elev-3:#e2dbc9;--line:#00000014;--line-strong:#00000026;--text:#1c1510;--text-soft:#4a3e2e;--text-muted:#7a6e5e;--text-faint:#b0a090;--text-primary:#1c1510;--brass:#8a5e15;--brass-bright:#9e6c18;--brass-deep:#6a4510;--brass-glow:#8a5e1538;--cool:#2457a3;--cool-soft:#2457a31f;--good:#166b38;--good-soft:#166b381f;--bad:#b52222;--bad-soft:#b522221f;--warn:#c47a00;--warn-soft:#c47a0024;--h2:#b85e28;--h3:#1a5fa8;--h4:#166b38;--h5:#c47a00;--h6:#7a3ab8;--h7:#b52222;--h8:#4a3e2e;--staff-color:#1e140a6b;--shadow-card:0 2px 8px #00000017;--shadow-elev:0 4px 16px #0000001c, inset 0 1px 0 #ffffffb3;--shadow-brass:0 4px 12px #8a5e1538, inset 0 1px 0 #ffffff80;--shadow-sheet:0 -4px 20px #0000001c}html,body{background:var(--bg-deep);color:var(--text)}}.app{background:var(--bg-deep);flex-direction:column;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.app-header{z-index:20;background:var(--bg-elev-0);border-bottom:1px solid var(--line);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.brand-mark{background:radial-gradient(circle at 35% 35%, var(--brass-bright), var(--brass-deep));width:32px;height:32px;box-shadow:0 2px 8px var(--brass-glow);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.brand-mark-letter{color:var(--bg-deep);font-family:Instrument Serif,Georgia,serif;font-size:18px;font-weight:400;line-height:1}.brand-wordmark{color:var(--text);letter-spacing:-.01em;font-family:Instrument Serif,Georgia,serif;font-size:17px;font-weight:400}.header-pills{align-items:center;gap:6px;display:flex}.header-info-btn{cursor:pointer;color:var(--text-muted);opacity:.6;background:0 0;border:none;align-items:center;padding:0 2px;font-size:16px;line-height:1;transition:opacity .15s;display:flex}.header-info-btn:hover,.header-info-btn:focus-visible{opacity:1;color:var(--text-soft)}.header-pill{background:var(--bg-elev-1);border:1px solid var(--line-strong);color:var(--text-soft);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;border-radius:999px;align-items:center;gap:5px;padding:6px 12px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:flex}.header-pill:hover{background:var(--bg-elev-2);border-color:var(--brass);color:var(--text)}.tab-bar{width:100%;max-width:480px;padding:8px 12px var(--safe-bottom);z-index:20;pointer-events:none;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.tab-bar-inner{pointer-events:all;-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-strong);background:#10141fe6;border-radius:22px;align-items:center;display:flex}.tab-item{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit;background:0 0;border:none;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:3px;padding:10px 4px 8px;transition:background .15s;display:flex}.tab-item.active{background:#d4a55924}.tab-icon{font-size:20px;line-height:1}.tab-label{letter-spacing:.04em;color:var(--text-faint);font-size:10px;font-weight:600;transition:color .15s}.tab-item.active .tab-label{color:var(--brass-bright)}.screen{padding-bottom:calc(var(--tab-bar-height) + 12px);overscroll-behavior:contain;flex:1;animation:.26s cubic-bezier(.22,1,.36,1) both screenIn;overflow-y:auto}.card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-card)}.card-elev{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line-strong);box-shadow:var(--shadow-elev)}.staff-wrapper{border-radius:var(--radius);border:1px solid var(--line);background:#ffffff08;justify-content:center;align-items:center;padding:8px 0;animation:.22s cubic-bezier(.22,1,.36,1) both noteIn;display:flex;overflow:hidden}.staff-wrapper svg path.vf-notehead-base,.staff-wrapper svg .vf-notehead path,.staff-wrapper svg .vf-stavenote path{fill:var(--brass-bright)!important}.staff-wrapper svg .vf-stave path,.staff-wrapper svg .vf-stave line,.staff-wrapper svg .vf-stave rect{stroke:#f4ecdb8c!important;fill:#f4ecdb8c!important}.staff-wrapper svg .vf-clef path{fill:var(--text-soft)!important}.staff-wrapper svg .vf-keysignature path,.staff-wrapper svg .vf-accidental path{fill:var(--text)!important}.note-picker{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);padding:14px}.note-picker-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.note-picker-hint{color:var(--brass);font-family:Geist Mono,monospace;font-size:13px;font-weight:600}.note-picker-feedback-hint{color:var(--text-muted);letter-spacing:.02em;font-family:Geist Mono,monospace;font-size:13px;font-weight:700}.note-picker:has(.letter-btn:disabled){opacity:.7;padding:10px 14px}.note-picker:has(.letter-btn:disabled) .note-letters-grid{gap:3px}.note-picker:has(.letter-btn:disabled) .letter-btn{height:36px;font-size:13px}.note-picker:has(.letter-btn:disabled) .acc-modifier-row{gap:4px}.note-picker:has(.letter-btn:disabled) .acc-pill{height:28px;padding:0 8px;font-size:13px}.note-letters-grid{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.letter-btn{background:var(--bg-elev-2);border:1px solid var(--line);height:52px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px;justify-content:center;align-items:center;padding:0;font-size:14px;font-weight:600;transition:background .12s,color .12s,box-shadow .12s,border-color .12s;display:flex;position:relative}.letter-btn:hover{background:var(--bg-elev-3);color:var(--text)}.letter-btn.selected{background:linear-gradient(135deg, var(--brass), var(--brass-deep));border-color:var(--brass);color:var(--bg-deep);box-shadow:0 4px 12px var(--brass-glow);font-weight:700}.letter-btn .acc-badge{color:var(--brass-bright);font-size:9px;font-weight:700;line-height:1;position:absolute;top:3px;right:4px}.letter-btn.selected .acc-badge{color:#0009}.acc-modifier-row{gap:5px;margin-top:8px;display:flex}.acc-pill{background:var(--bg-elev-2);border:1px solid var(--line);height:38px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:4px;font-size:15px;font-weight:600;transition:background .12s,color .12s,border-color .12s,opacity .12s;display:flex}.acc-pill:disabled{opacity:.35;cursor:default}.acc-pill.selected{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.acc-pill:hover:not(:disabled):not(.selected){background:var(--bg-elev-3);color:var(--text)}.slide-input{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);padding:14px}.slide-input-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.qv-pill{background:var(--bg-elev-2);border:1px solid var(--line);height:28px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;padding:0 12px;font-size:12px;font-weight:700;transition:background .12s,color .12s,border-color .12s}.qv-pill.active{background:var(--cool-soft);border-color:var(--cool);color:var(--cool)}.position-buttons{gap:4px;display:flex}.pos-btn{background:var(--bg-elev-2);border:1px solid var(--line);height:52px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px;flex:1;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:background .12s,color .12s,box-shadow .12s,border-color .12s;display:flex}.pos-btn:hover{background:var(--bg-elev-3);color:var(--text)}.pos-btn.selected{background:linear-gradient(135deg, var(--brass), var(--brass-deep));border-color:var(--brass);color:var(--bg-deep);box-shadow:0 4px 12px var(--brass-glow);font-weight:800}.current-selection{color:var(--brass);text-align:center;margin-top:8px;font-family:Geist Mono,monospace;font-size:13px;font-weight:600}.valve-input{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);padding:14px}.valve-input-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.valve-combo-display{color:var(--brass);font-family:Geist Mono,monospace;font-size:13px;font-weight:600}.valve-row{flex-wrap:wrap;gap:4px;display:flex}.valve-btn{background:var(--bg-elev-2);border:1px solid var(--line);min-width:52px;min-height:48px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px;flex:1;font-size:14px;font-weight:600;transition:background .12s,color .12s,border-color .12s}.valve-btn:hover:not(:disabled){background:var(--bg-elev-3);color:var(--text)}.valve-btn.selected{background:linear-gradient(135deg, var(--brass), var(--brass-deep));border-color:var(--brass);color:var(--bg-deep);box-shadow:0 3px 10px var(--brass-glow);font-weight:700}.valve-btn:disabled{opacity:.4;cursor:default}.trombone-slide{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);padding:14px}.trombone-slide.disabled{opacity:.5;pointer-events:none}.slide-track{cursor:pointer;-webkit-user-select:none;user-select:none;padding:14px 0 28px;position:relative}.slide-rail{background:var(--bg-elev-2);border-radius:4px;height:8px;position:relative;overflow:hidden}.slide-fill{background:linear-gradient(90deg, var(--brass-deep), var(--brass));opacity:0;border-radius:4px;width:0;transition:width .22s,opacity .15s;position:absolute;inset:0}.slide-fill.visible{opacity:1}.slide-handle{background:radial-gradient(circle at 35% 35%, var(--brass-bright), var(--brass-deep));border:2px solid var(--bg-elev-1);width:34px;height:34px;box-shadow:0 0 10px var(--brass-glow), 0 2px 6px #0006;cursor:grab;touch-action:none;border-radius:50%;justify-content:center;align-items:center;transition:left .22s,box-shadow .1s;display:flex;position:absolute;top:14px;transform:translate(-50%)translateY(-50%)}.slide-handle:active{cursor:grabbing;box-shadow:0 0 16px var(--brass-glow), 0 2px 8px #00000080}.slide-handle-label{color:var(--bg-deep);pointer-events:none;font-size:13px;font-weight:800;line-height:1}.slide-ticks{position:absolute;bottom:0;left:0;right:0}.slide-tick{flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;transform:translate(-50%)}.slide-tick-mark{background:var(--line);width:1px;height:6px}.slide-tick-label{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px;transition:color .15s,font-weight .15s}.slide-tick.active .slide-tick-mark{background:var(--brass);width:2px}.slide-tick.active .slide-tick-label{color:var(--brass);font-weight:700}.slide-selection-label{color:var(--brass);text-align:center;opacity:0;min-height:18px;font-size:12px;font-weight:600;transition:opacity .15s}.slide-selection-label.visible{opacity:1}.trumpet-valves{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);padding:14px}.valve-buttons-row{justify-content:center;gap:20px;padding:8px 0 4px;display:flex}.valve-button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.valve-button:disabled{opacity:.4;pointer-events:none}.valve-body{flex-direction:column;align-items:center;display:flex}.valve-cap{background:var(--bg-elev-2);border:1.5px solid var(--line-strong);z-index:1;border-radius:12px;justify-content:center;align-items:center;width:56px;height:60px;transition:transform 70ms,box-shadow 70ms,background 70ms,border-color 70ms;display:flex;position:relative;transform:translateY(0);box-shadow:0 5px #0000008c,inset 0 1px #ffffff0f}.valve-number{color:var(--text-soft);pointer-events:none;font-size:22px;font-weight:800;line-height:1;transition:color 70ms}.valve-rod{background:var(--bg-elev-3,#1e2236);border:1.5px solid var(--line);border-top:none;border-radius:0 0 6px 6px;width:40px;height:10px;margin-top:-2px;transition:height 70ms}.valve-button.pressed .valve-cap{background:linear-gradient(160deg, var(--brass-deep), var(--brass));border-color:var(--brass);transform:translateY(5px);box-shadow:0 0 #0000,inset 0 2px 4px #0006}.valve-button.pressed .valve-number{color:var(--bg-deep)}.valve-button.pressed .valve-rod{height:5px}.valve-button .valve-body+span,.valve-hint{color:var(--text-muted);text-align:center;font-size:11px}.valve-hint{margin-top:6px;font-style:italic}.lp-valve{color:var(--brass-bright);font-family:Geist Mono,monospace;font-size:15px;font-weight:700}.action-row{gap:8px;display:flex}.submit-btn{border-radius:var(--radius);background:linear-gradient(135deg, var(--brass), var(--brass-deep));height:52px;color:var(--bg-deep);letter-spacing:.01em;cursor:pointer;box-shadow:var(--shadow-brass);-webkit-tap-highlight-color:transparent;border:none;flex:1;font-size:16px;font-weight:700;transition:opacity .15s,box-shadow .15s,transform .1s}.submit-btn:active:not(:disabled){box-shadow:none;transform:scale(.96)}.submit-btn:hover:not(:disabled){opacity:.92}.submit-btn:disabled{opacity:.35;box-shadow:none;cursor:not-allowed}.skip-btn{border-radius:var(--radius);border:1px solid var(--line);height:52px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;background:0 0;flex-shrink:0;padding:0 18px;font-size:14px;font-weight:600;transition:opacity .15s,border-color .15s}.skip-btn:active{opacity:.55}.skip-btn:hover{border-color:var(--text-muted)}.feedback-area{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);animation:.23s cubic-bezier(.22,1,.36,1) both feedbackIn;overflow:hidden}.feedback-area.correct{border-color:var(--good)}.feedback-area.incorrect{border-color:var(--bad)}.feedback-chip{border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:700;display:inline-flex}.feedback-chip.correct{background:var(--good-soft);color:var(--good);border:1px solid var(--good)}.feedback-chip.incorrect{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad)}.feedback-body{flex-direction:column;align-items:center;gap:8px;padding:16px 20px 20px;display:flex}.feedback-note-display{color:var(--text);text-align:center;font-family:Instrument Serif,Georgia,serif;font-size:26px;font-weight:400}.feedback-note-display .intl-name{color:var(--text-muted);font-size:18px}.feedback-position-display{color:var(--brass);font-size:15px;font-weight:600}.feedback-harmonic{color:var(--text-muted);letter-spacing:.2px;font-size:12px}.feedback-explanation{color:var(--text-muted);text-align:center;max-width:320px;font-size:13px;line-height:1.5}.feedback-alternatives{flex-direction:column;align-items:center;gap:6px;display:flex}.feedback-alt-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.feedback-alt-list{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.feedback-alt-item{flex-direction:column;align-items:center;gap:2px;display:flex}.feedback-alt-badge{background:var(--bg-elev-2);border:1px solid var(--line-strong);color:var(--text-soft);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600}.feedback-alt-harmonic{color:var(--text-muted);font-size:10px}.next-btn{border-radius:var(--radius);background:var(--bg-elev-2);border:1px solid var(--line-strong);height:48px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;margin-top:4px;padding:0 28px;font-size:15px;font-weight:600;transition:background .15s,color .15s}.next-btn:hover{background:var(--bg-elev-3);color:var(--text)}.sheet-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);background:#05070eb3;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings-sheet,.info-sheet{background:var(--bg-elev-1);border:1px solid var(--line-strong);width:100%;max-width:480px;box-shadow:var(--shadow-sheet);overscroll-behavior:contain;border-bottom:none;border-radius:24px 24px 0 0;max-height:85vh;overflow-y:auto}.info-brand-block{align-items:center;gap:14px;padding:4px 20px 16px;display:flex}.info-brand-mark{background:radial-gradient(circle at 35% 35%, var(--brass-bright), var(--brass-deep));width:52px;height:52px;box-shadow:0 4px 12px var(--brass-glow);color:var(--bg-deep);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;font-family:Instrument Serif,Georgia,serif;font-size:28px;font-weight:400;line-height:1;display:flex}.info-brand-text{flex-direction:column;gap:2px;display:flex}.info-brand-name{color:var(--text);font-family:Instrument Serif,Georgia,serif;font-size:22px;line-height:1.1}.info-brand-version{color:var(--brass);letter-spacing:.02em;font-family:Geist Mono,monospace;font-size:13px;font-weight:600}.info-copyright{color:var(--text-muted);margin:0 20px 20px;font-size:13px;line-height:1.5}.info-changelog{flex-direction:column;gap:20px;padding:0 20px 32px;display:flex}.info-release{border-top:1px solid var(--line);padding-top:16px}.info-release-header{align-items:baseline;gap:10px;margin-bottom:10px;display:flex}.info-release-version{color:var(--brass);letter-spacing:.02em;font-family:Geist Mono,monospace;font-size:14px;font-weight:600}.info-release-date{color:var(--text-muted);font-size:12px}.info-release-items{flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;display:flex}.info-release-items li{color:var(--text-soft);padding-left:14px;font-size:14px;line-height:1.4;position:relative}.info-release-items li:before{content:"·";color:var(--brass);font-weight:700;position:absolute;left:0}.drag-handle{background:var(--line-strong);border-radius:2px;width:36px;height:4px;margin:12px auto 4px}.sheet-header{justify-content:space-between;align-items:center;padding:8px 20px 16px;display:flex}.sheet-title{color:var(--text);font-family:Instrument Serif,Georgia,serif;font-size:22px;font-weight:400}.sheet-close{background:var(--bg-elev-2);border:1px solid var(--line);width:32px;height:32px;color:var(--text-muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:14px;transition:background .15s;display:flex}.sheet-close:hover{background:var(--bg-elev-3);color:var(--text)}.sheet-section{padding:0 20px 20px}.sheet-section+.sheet-section{border-top:1px solid var(--line);padding-top:20px}.sheet-section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.segmented{background:var(--bg-elev-2);border-radius:12px;gap:3px;padding:3px;display:flex}.segmented button{min-height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;font-family:inherit;font-size:13px;font-weight:600;transition:background .15s,color .15s}.segmented button.active{background:var(--bg-elev-1);color:var(--brass-bright);box-shadow:0 1px 4px #0000004d}.toggle-row{background:var(--bg-elev-2);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;min-height:44px;margin-bottom:4px;padding:10px 14px;display:flex}.toggle-row-label{color:var(--text-soft);flex:1;margin-right:12px;font-size:14px}.switch-track{background:var(--bg-elev-3);border:1px solid var(--line-strong);cursor:pointer;border-radius:11px;flex-shrink:0;width:38px;height:22px;transition:background .2s,border-color .2s;position:relative}.switch-track.on{background:var(--brass);border-color:var(--brass)}.switch-thumb{background:#fff;border-radius:50%;width:16px;height:16px;transition:left .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.switch-track.on .switch-thumb{left:18px}.pill-wrap{flex-wrap:wrap;gap:6px;display:flex}.key-pill{background:var(--bg-elev-2);border:1px solid var(--line);color:var(--text-soft);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.key-pill.active{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.range-selects{gap:12px;display:flex}.range-selects>div{flex:1}.small-label{color:var(--text-muted);margin-bottom:4px;font-size:12px;font-weight:600;display:block}.range-select{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-elev-2);width:100%;color:var(--text);padding:8px 10px;font-family:inherit;font-size:14px}.range-hint{color:var(--text-muted);margin-top:6px;font-size:12px}.danger-btn{border-radius:var(--radius-sm);background:var(--bad-soft);border:1px solid var(--bad);width:100%;height:44px;color:var(--bad);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;transition:opacity .15s}.danger-btn:hover{opacity:.8}.data-btn-row{gap:8px;margin-bottom:8px;display:flex}.data-btn{border-radius:var(--radius-sm);background:var(--bg-elev-2);border:1px solid var(--line-strong);height:40px;color:var(--text-muted);cursor:pointer;flex:1;font-family:inherit;font-size:13px;font-weight:600;transition:opacity .15s,border-color .15s}.data-btn:hover{border-color:var(--brass);color:var(--brass)}.home-screen{flex-direction:column;gap:14px;padding:20px 16px;display:flex}.greeting-block{padding:4px 0}.greeting-date{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-size:11px;font-weight:600}.greeting-headline{color:var(--text);font-family:Instrument Serif,Georgia,serif;font-size:24px;font-weight:400;line-height:1.3}.greeting-headline em{color:var(--brass-bright);font-style:italic}.streak-ring-card{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow-elev);flex-direction:column;align-items:center;gap:14px;padding:22px;display:flex}.streak-ring-wrap{width:160px;height:160px;position:relative}.streak-ring-center{flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:0}.streak-number{color:var(--brass-bright);font-family:Instrument Serif,Georgia,serif;font-size:56px;font-weight:400;line-height:1}.streak-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.streak-subtitle{color:var(--text-soft);text-align:center;font-size:14px}.cta-btn{border-radius:var(--radius);background:linear-gradient(135deg, var(--brass), var(--brass-deep));width:100%;height:52px;color:var(--bg-deep);letter-spacing:.01em;cursor:pointer;box-shadow:var(--shadow-brass);-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-size:16px;font-weight:700;transition:opacity .15s;display:flex}.cta-btn:hover{opacity:.92}.stats-row{gap:10px;display:flex}.stat-mini-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);flex-direction:column;flex:1;gap:4px;padding:14px;display:flex}.stat-mini-value{color:var(--brass-bright);font-family:Geist Mono,monospace;font-size:22px;font-weight:700;line-height:1}.stat-mini-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.exercise-screen{flex-direction:column;gap:12px;padding:16px;display:flex}.exercise-header{justify-content:space-between;align-items:center;padding:0 2px;display:flex}.exercise-context{color:var(--text-muted);font-size:13px}.exercise-context strong{color:var(--brass)}.key-context-btn{font:inherit;font-size:inherit;color:var(--brass);cursor:pointer;background:0 0;border:none;border-bottom:1px dashed #d4a55973;align-items:center;gap:3px;margin:0;padding:0;font-weight:600;line-height:1.3;transition:color .15s,border-color .15s;display:inline-flex}.key-context-btn:hover,.key-context-btn:focus-visible{color:var(--brass-bright);border-bottom-color:#f0c878b3;outline:none}.key-context-btn:active{opacity:.75}.key-context-caret{opacity:.65;margin-top:1px;font-size:10px;line-height:1}.key-picker-sheet{max-height:65vh}.no-note{color:var(--text-muted);text-align:center;padding:2rem;font-size:14px;font-style:italic}.progress-bar-wrap{flex-shrink:0;align-items:center;gap:6px;display:flex}.progress-dots{align-items:center;gap:4px;display:flex}.progress-dot{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background .2s,transform .2s}.progress-dot.done{background:var(--brass);border-color:var(--brass)}.progress-dot.correct{background:var(--good);border-color:var(--good)}.progress-dot.incorrect{background:var(--bad);border-color:var(--bad)}.progress-dot.current{background:var(--brass-bright);border-color:var(--brass-bright);box-shadow:0 0 6px var(--brass-glow);transform:scale(1.35)}.progress-label{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:28px;font-size:11px}.stat-mini-card.xp-card{background:linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev-1));border-color:color-mix(in srgb, var(--brass) 30%, transparent)}.stat-mini-value.xp-value{color:var(--brass-bright);font-size:13px}.hero-stats-row.hero-stats-4 .hero-stat-card{padding:12px 6px}.hero-stats-row.hero-stats-4 .hero-stat-value{font-size:16px}.hero-stats-row.hero-stats-4 .hero-stat-label{font-size:9px}.hero-stat-card.xp-hero-card{border-color:color-mix(in srgb, var(--brass) 35%, transparent)}.hero-stat-value.xp-hero-value{color:var(--brass-bright);font-size:15px}.recommended-card{background:var(--bg-elev-1);border:1px solid color-mix(in srgb, var(--bad) 25%, var(--line));border-radius:var(--radius-lg);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.recommended-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.recommended-title{color:var(--text-primary);font-size:13px;font-weight:700}.recommended-sub{color:var(--text-muted);font-size:11px}.recommended-notes{flex-wrap:wrap;gap:6px;display:flex}.recommended-note-chip{background:var(--bg-elev-2);border:1px solid color-mix(in srgb, var(--bad) 30%, var(--line));color:var(--text-primary);border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:13px;font-weight:600;display:inline-flex}.recommended-note-count{color:var(--bad);font-size:11px;font-weight:500}.recommended-cta{color:var(--brass);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;align-self:flex-start;padding:0;font-size:13px;font-weight:600;transition:opacity .15s}.recommended-cta:active{opacity:.6}.weekly-chart-card{background:var(--bg-elev-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}.weekly-chart-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;font-size:11px;font-weight:700}.weekly-chart-bars{align-items:flex-end;gap:6px;height:72px;display:flex}.weekly-bar-col{flex-direction:column;flex:1;align-items:center;gap:4px;height:100%;display:flex}.weekly-bar-track{flex:1;align-items:flex-end;width:100%;display:flex}.weekly-bar-fill{background:var(--bg-elev-2);border-radius:3px 3px 0 0;width:100%;min-height:0;transition:height .4s cubic-bezier(.22,1,.36,1)}.weekly-bar-fill.today{background:linear-gradient(180deg, var(--brass-bright), var(--brass));box-shadow:0 0 8px var(--brass-glow)}.weekly-bar-label{color:var(--text-muted);font-size:10px;font-weight:500}.weekly-bar-label.today{color:var(--brass-bright);font-weight:700}.weekly-bar-count{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:9px}.activity-grid-card{background:var(--bg-elev-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}.activity-grid-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;font-size:11px;font-weight:700}.activity-grid-wrap{gap:6px;display:flex;overflow-x:auto}.activity-day-labels{flex-direction:column;flex-shrink:0;gap:3px;display:flex}.activity-day-label{color:var(--text-muted);align-items:center;height:12px;font-size:9px;line-height:1;display:flex}.activity-grid-cols{flex:1;gap:3px;display:flex}.activity-grid-col{flex-direction:column;gap:3px;display:flex}.activity-cell{background:var(--bg-elev-2);border-radius:2px;flex-shrink:0;width:12px;height:12px}.activity-cell.empty{background:0 0}.activity-cell.low{background:color-mix(in srgb, var(--brass) 35%, var(--bg-elev-2))}.activity-cell.mid{background:color-mix(in srgb, var(--brass) 65%, var(--bg-elev-2))}.activity-cell.high{background:var(--brass-bright);box-shadow:0 0 4px var(--brass-glow)}.activity-cell.today{outline:1px solid var(--brass-bright);outline-offset:1px}.activity-legend{justify-content:flex-end;align-items:center;gap:4px;margin-top:10px;display:flex}.activity-legend-label{color:var(--text-muted);font-size:9px}.result-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:32px 24px 100px;display:flex}.result-emoji{font-size:64px;line-height:1}.result-headline{color:var(--text);margin:0;font-family:Instrument Serif,Georgia,serif;font-size:32px;font-weight:400}.result-score-row{align-items:center;gap:16px;margin:4px 0;display:flex}.result-score-block{flex-direction:column;align-items:center;gap:2px;display:flex}.result-score-num{font-size:36px;font-weight:700;line-height:1}.result-score-block.correct .result-score-num{color:var(--good)}.result-score-block.total .result-score-num{color:var(--text)}.result-score-block.incorrect .result-score-num{color:var(--bad)}.result-score-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.result-score-divider{color:var(--text-muted);opacity:.5;align-self:flex-end;padding-bottom:18px;font-size:28px}.result-accuracy-wrap{flex-direction:column;align-items:center;gap:6px;width:100%;max-width:260px;display:flex}.result-accuracy-bar{background:var(--bg-elev-2);border-radius:99px;width:100%;height:8px;overflow:hidden}.result-accuracy-fill{background:linear-gradient(90deg, var(--brass-deep), var(--brass-bright));border-radius:99px;height:100%;transition:width .6s}.result-accuracy-label{color:var(--text-soft);font-size:13px}.result-actions{flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:8px;display:flex}.result-home-btn{border:1px solid var(--line-strong);color:var(--text-soft);cursor:pointer;background:0 0;border-radius:12px;padding:12px 20px;font-size:15px;transition:border-color .2s,color .2s}.result-home-btn:hover{border-color:var(--brass);color:var(--brass)}.library-screen{flex-direction:column;gap:16px;padding:20px 16px;display:flex}.screen-headline{color:var(--text);font-family:Instrument Serif,Georgia,serif;font-size:34px;font-weight:400}.screen-subtitle{color:var(--text-muted);margin-top:2px;font-size:14px}.profile-screen{flex-direction:column;gap:16px;padding:20px 16px;display:flex}.profile-header-row{justify-content:space-between;align-items:flex-start;display:flex}.settings-icon-btn{background:var(--bg-elev-1);border:1px solid var(--line);width:40px;height:40px;color:var(--text-muted);cursor:pointer;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:background .15s;display:flex}.settings-icon-btn:hover{background:var(--bg-elev-2);color:var(--text)}.hero-stats-row{gap:8px;display:flex}.hero-stat-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);text-align:center;flex-direction:column;flex:1;gap:4px;padding:14px 10px;display:flex}.hero-stat-value{color:var(--brass-bright);font-family:Geist Mono,monospace;font-size:20px;font-weight:700}.hero-stat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:10px;font-weight:600}.instrument-switch-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);padding:16px}.instrument-switch-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.note-stats-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);padding:16px}.note-stats-title{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;font-size:11px;font-weight:600}.note-stat-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.note-stat-name{color:var(--text-soft);min-width:38px;font-size:13px;font-weight:600}.note-stat-bar-track{background:var(--bg-elev-2);border-radius:4px;flex:1;height:7px;overflow:hidden}.note-stat-bar-fill{background:var(--good);border-radius:4px;height:100%;transition:width .3s}.note-stat-bar-fill.warn{background:var(--warn)}.note-stat-bar-fill.bad{background:var(--bad)}.note-stat-pct{color:var(--text-muted);text-align:right;min-width:36px;font-family:Geist Mono,monospace;font-size:12px;font-weight:600}.error-box-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);padding:16px}.error-box-title{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.error-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.error-list li{border-bottom:1px solid var(--line);color:var(--text-soft);padding:6px 0;font-size:14px}.error-list li:last-child{border-bottom:none}.octave-sup{vertical-align:super;font-size:.7em}.empty-msg{color:var(--text-muted);font-size:14px;font-style:italic}.reset-btn{border-radius:var(--radius-sm);background:var(--bad-soft);border:1px solid var(--bad);width:100%;height:44px;color:var(--bad);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;transition:opacity .15s}.reset-btn:hover{opacity:.8}.lookup-inner{flex-direction:column;gap:12px;display:flex}.lookup-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line)}.lookup-card-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.lookup-note-name{color:var(--brass-bright);font-family:Instrument Serif,Georgia,serif;font-size:22px}.lookup-octave,.lookup-intl{color:var(--text-muted);font-size:14px}.lookup-card-body{align-items:flex-start;gap:8px;padding:8px;display:flex}.lookup-positions{flex-direction:column;flex:1;gap:6px;display:flex}.lookup-pos{border-radius:var(--radius-sm);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.lookup-pos.canonical{border:1px solid var(--brass);background:#d4a5591f}.lookup-pos.alternative{background:var(--bg-elev-2);border:1px solid var(--line)}.lp-num{color:var(--brass-bright);text-align:center;min-width:26px;font-family:Geist Mono,monospace;font-size:22px;font-weight:800;line-height:1}.lookup-pos.alternative .lp-num{color:var(--text-soft);font-size:18px}.lp-qv{background:var(--cool-soft);color:var(--cool);border-radius:999px;padding:2px 6px;font-size:10px;font-weight:700}.lp-qv-alt{background:var(--cool-soft);color:var(--cool)}.lp-tag{color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-left:auto;font-size:11px}.lp-harmonic{color:var(--text-muted);flex-basis:100%;margin-top:2px;font-size:11px}.lookup-hint{text-align:center;color:var(--text-muted);padding:2rem 1rem;font-size:14px;font-style:italic}.lookup-not-in-key{text-align:center;color:var(--bad);background:var(--bad-soft);border-radius:var(--radius);padding:.75rem 1rem;font-size:14px;font-weight:500}.lookup-results{flex-direction:column;gap:8px;display:flex}.lookup-letter-grid{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.lookup-letter-btn{background:var(--bg-elev-2);border:1px solid var(--line);height:44px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;font-size:14px;font-weight:600;transition:background .12s,color .12s,border-color .12s}.lookup-letter-btn:hover{background:var(--bg-elev-3);color:var(--text)}.lookup-letter-btn.active{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.octave-row{gap:6px;display:flex}.octave-pill{background:var(--bg-elev-2);border:1px solid var(--line);height:38px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;flex:1;font-size:13px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.octave-pill.active{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.lookup-key-row{align-items:center;gap:8px;display:flex}.lookup-key-label{color:var(--text-muted);white-space:nowrap;font-size:13px;font-weight:600}.lookup-key-select{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text);flex:1;padding:8px 10px;font-family:inherit;font-size:14px}.clickable-staff-wrapper{flex-direction:column;align-items:center;gap:.25rem;display:flex;position:relative}.clickable-staff-svg{display:block}.clickable-staff-overlay{cursor:pointer;z-index:1;position:absolute;top:0;left:0}.staff-hover-band{pointer-events:none;background:#d4a5592e;border-top:1px solid #d4a55966;border-bottom:1px solid #d4a55966;align-items:center;height:10px;display:flex;position:absolute;left:0;right:0}.staff-hover-label{color:var(--brass);white-space:nowrap;background:var(--bg-elev-1);border-radius:2px;padding:0 3px;font-size:.68rem;font-weight:700;line-height:1;position:absolute;right:6px}.staff-click-hint{color:var(--text-muted);text-align:center;margin:0;font-size:.72rem}.lookup-acc-row{align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.lookup-acc-label{color:var(--text-muted);white-space:nowrap;font-size:13px;font-weight:600}.lookup-acc-buttons{flex:1;gap:.4rem;display:flex}.acc-btn{background:var(--bg-elev-2);color:var(--text-soft);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;flex:1;padding:.4rem .3rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .15s}.acc-btn:hover{border-color:var(--brass);color:var(--brass)}.acc-btn.active{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.harmonic-input{background:var(--bg-elev-1);border-radius:var(--radius-lg);border:1px solid var(--line);flex-direction:column;gap:10px;padding:14px;display:flex}.harmonic-num-row{flex-wrap:wrap;gap:5px;display:flex}.harmonic-num-btn{background:var(--bg-elev-2);border:1px solid var(--line);min-width:44px;height:48px;color:var(--text-soft);-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:12px;flex:1;font-family:inherit;font-size:18px;font-weight:700;transition:background .12s,color .12s,border-color .12s}.harmonic-num-btn.warn{color:var(--bad);border-style:dashed}.harmonic-num-btn:hover{background:var(--bg-elev-3);color:var(--text)}.harmonic-num-btn.selected{background:linear-gradient(135deg, var(--brass), var(--brass-deep));border-color:var(--brass);color:var(--bg-deep);border-style:solid}.harmonic-root-row{flex-wrap:wrap;gap:5px;display:flex}.harmonic-root-btn{background:var(--bg-elev-2);border:1px solid var(--line);min-width:44px;height:44px;color:var(--text-soft);-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:10px;padding:0 8px;font-family:inherit;font-size:13px;font-weight:600;transition:background .12s,color .12s}.harmonic-root-btn:hover{background:var(--bg-elev-3);color:var(--text)}.harmonic-root-btn.selected{background:linear-gradient(135deg, var(--brass), var(--brass-deep));border-color:var(--brass);color:var(--bg-deep)}.harmonic-grid{margin:0}.hg-intro{color:var(--text-muted);margin:0 0 8px;font-size:13px;font-style:italic}.hg-scroll{-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}.hg-table{border-collapse:collapse;white-space:nowrap;min-width:100%;font-size:.82rem}.hg-table .hg-row-label{text-align:center;border-right:2px solid var(--line);background:var(--bg-elev-2);min-width:2rem;color:var(--text-soft);padding:.35rem .5rem;font-size:.78rem;font-weight:700}.hg-table thead .hg-row-label{border-bottom:2px solid var(--line);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.hg-col-header{text-align:center;border-bottom:2px solid var(--line);border-right:1px solid var(--line);background:var(--bg-elev-2);min-width:2.8rem;padding:.3rem .4rem}.hg-col-pos{color:var(--text);font-size:.78rem;font-weight:700;display:block}.hg-col-root{color:var(--text-muted);font-size:.68rem;display:block}.hg-cell{text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:default;color:var(--text-soft);padding:.4rem .45rem;font-weight:600;transition:opacity .1s}.hg-cell-active{cursor:pointer}.hg-cell-active:hover{opacity:.75}.hg-cell-empty{color:var(--text-faint);font-size:.75rem;font-weight:400}.hg-cell-selected{outline:2px solid var(--brass);outline-offset:-2px}.hg-cell-warn{font-style:italic}.hg-detail{border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--bg-elev-1);align-items:center;gap:.6rem;margin-top:.5rem;padding:.55rem .85rem;font-size:.88rem;display:flex}.hg-detail-note{text-align:center;min-width:2.2rem;color:var(--brass-bright);font-size:1.3rem;font-weight:800;line-height:1}.hg-detail-info{color:var(--text-muted);flex:1;font-size:.82rem;line-height:1.4}.hg-h2{color:var(--h2);background-color:#d97b4a26}.hg-h3{color:var(--h3);background-color:#7eb2ff1f}.hg-h4{color:var(--h4);background-color:#5be2a31f}.hg-h5{color:var(--h5);background-color:#f2b5441f}.hg-h6{color:var(--h6);background-color:#c79bff1f}.hg-h7{color:var(--h7);background-color:#ff7a7a1f}.hg-h8{color:var(--h8);background-color:#c8c2b41a}.library-section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.help-cards{flex-direction:column;gap:8px;display:flex}.help-card{background:var(--bg-elev-1);border-radius:var(--radius);border:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:12px;padding:14px 16px;transition:background .15s;display:flex}.help-card:hover{background:var(--bg-elev-2)}.help-card-icon{flex-shrink:0;font-size:22px}.help-card-content{flex:1}.help-card-title{color:var(--text);margin-bottom:2px;font-size:15px;font-weight:600}.help-card-sub{color:var(--text-muted);font-size:13px}.help-card-arrow{color:var(--text-faint);font-size:16px}.help-detail-back{color:var(--brass);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;align-items:center;gap:6px;padding:8px 0;font-size:14px;font-weight:600;display:flex}.help-tab{color:var(--text);padding:0 0 2rem;line-height:1.6}.help-tab h1{color:var(--brass-bright);margin:0 0 .75rem;font-family:Instrument Serif,Georgia,serif;font-size:22px;font-weight:400}.help-tab h2{color:var(--text);margin:1.25rem 0 .5rem;font-size:16px;font-weight:700}.help-tab p,.help-tab ul{color:var(--text-soft);margin:0 0 .75rem;font-size:14px}.help-tab ul{padding-left:1.2rem}.help-tab li{margin-bottom:.4rem}.help-tab hr{border:none;border-top:1px solid var(--line);margin:1rem 0}.help-table-wrap{border-radius:var(--radius);border:1px solid var(--line);margin-bottom:.75rem;overflow-x:auto}.help-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:.82rem}.help-table th{background:var(--bg-elev-2);text-align:left;border-bottom:2px solid var(--line);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;padding:.45rem .6rem;font-size:.78rem;font-weight:700}.help-table td{border-bottom:1px solid var(--line);color:var(--text-soft);padding:.4rem .6rem}.help-table tbody tr:last-child td{border-bottom:none}.help-table tbody tr:nth-child(2n){background:var(--bg-elev-2)}.help-warning{background:var(--warn-soft);border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);margin:.75rem 0;padding:.65rem .85rem;font-size:.88rem}.stats-table{border-collapse:collapse;width:100%;font-size:13px}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--line);color:var(--text-soft);padding:.35rem .5rem}.stats-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600}.stats-table .row-bad td{color:var(--bad)}.copyright-footer{text-align:center;color:var(--text-faint);padding:.5rem 1rem .8rem;font-size:11px}.lookup-tab{flex-direction:column;gap:10px;display:flex}.name-input{flex-direction:column;gap:6px;display:flex}.note-row{flex-wrap:wrap;gap:5px;display:flex}.note-btn{background:var(--bg-elev-2);border:1px solid var(--line);min-width:44px;min-height:44px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:0 6px;font-family:inherit;font-size:13px;font-weight:600;transition:background .12s,color .12s,border-color .12s}.note-btn:hover{background:var(--bg-elev-3);color:var(--text)}.note-btn.selected{border-color:var(--brass);color:var(--brass-bright);background:#d4a55929}.note-btn.accidental{color:var(--text-muted);font-size:12px}.note-btn.accidental.selected{color:var(--brass-bright)}.input-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600;display:block}.lookup-or-divider{color:var(--text-faint);align-items:center;gap:8px;font-size:12px;font-style:italic;display:flex}.lookup-or-divider:before,.lookup-or-divider:after{content:"";background:var(--line);flex:1;height:1px}@keyframes screenIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes noteIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes feedbackIn{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes inputIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.trombone-slide,.trumpet-valves,.note-picker,.harmonic-input{animation:.2s cubic-bezier(.22,1,.36,1) 60ms both inputIn}.onboarding-sheet{text-align:center;padding-bottom:36px}.onboarding-logo{margin:12px 0 8px;font-size:52px;line-height:1}.onboarding-title{color:var(--text);margin:0 0 10px;font-family:Instrument Serif,Georgia,serif;font-size:26px;font-weight:400;line-height:1.3}.onboarding-title em{color:var(--brass-bright);font-style:italic}.onboarding-sub{color:var(--text-soft);margin:0 0 24px;font-size:15px;line-height:1.5}.onboarding-steps{text-align:left;flex-direction:column;gap:14px;margin:0 0 28px;padding:0;list-style:none;display:flex}.onboarding-steps li{color:var(--text-soft);align-items:flex-start;gap:12px;font-size:14px;line-height:1.45;display:flex}.onboarding-step-icon{flex-shrink:0;margin-top:-1px;font-size:20px}.onboarding-cta{width:100%;margin-bottom:14px;font-size:17px}.onboarding-hint{color:var(--text-faint);margin:0;font-size:12px;line-height:1.4}