:root{--surface:#f5f5f3;--surface-raised:#fff;--border:#e2e0da;--ink:#1c1b18;--ink-muted:#6b6a63;--accent:#b8791f;--accent-soft:#b8791f1f;--good:#3f8f5f;--good-soft:#3f8f5f1f;--bad:#c1473f;--font:"Instrument Sans", system-ui, sans-serif;--ease-out:cubic-bezier(.22, .7, .29, 1);font:16px/1.5 var(--font);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--surface:#18181b;--surface-raised:#222226;--border:#35343a;--ink:#f2f1ee;--ink-muted:#98978f;--accent:#d9973a;--accent-soft:#d9973a29;--good:#5cc98a;--good-soft:#5cc98a24;--bad:#e2665f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--surface:#18181b;--surface-raised:#222226;--border:#35343a;--ink:#f2f1ee;--ink-muted:#98978f;--accent:#d9973a;--accent-soft:#d9973a29;--good:#5cc98a;--good-soft:#5cc98a24;--bad:#e2665f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--surface);min-width:320px;transition:background .16s var(--ease-out);margin:0}p{margin:0}button{font:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.page{background:var(--surface);flex-direction:column;align-items:center;min-height:100svh;display:flex}.sheet{flex-direction:column;width:100%;max-width:clamp(620px,46vw,820px);padding:28px 24px 0;display:flex}@media (width>=900px){.sheet{max-width:clamp(820px,62vw,1080px)}}.tool-switcher{gap:4px;width:100%;max-width:clamp(620px,46vw,820px);padding:20px 24px 0;display:flex}@media (width>=900px){.tool-switcher{max-width:clamp(820px,62vw,1080px)}}.tool-switcher-item{color:var(--ink-muted);transition:color .14s var(--ease-out), border-color .14s var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;padding:6px 4px;font-size:13px;font-weight:600}.tool-switcher-item:hover:not(.active){color:var(--ink)}.tool-switcher-item.active{color:var(--accent);border-color:var(--accent)}.app-shell{flex:1;align-items:flex-start;display:flex}.tab-bar{z-index:20;background:color-mix(in srgb, var(--surface-raised) 92%, transparent);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);position:fixed;bottom:0;left:0;right:0}.tab-bar-inner{gap:2px;max-width:clamp(620px,46vw,820px);margin:0 auto;padding:8px 24px;display:flex}.tab-bar-item{color:var(--ink-muted);text-align:center;transition:background .14s var(--ease-out), color .14s var(--ease-out);background:0 0;border:none;border-radius:8px;flex:1;padding:10px;font-size:13px;font-weight:600}.tab-bar-item:hover:not(.active){color:var(--ink)}.tab-bar-item.active{background:var(--accent-soft);color:var(--accent)}.panel-stack{min-width:0;padding-bottom:calc(64px + env(safe-area-inset-bottom));flex:1}.practice-panel,.stats-panel{flex-direction:column;padding-bottom:32px;display:none}.practice-panel.panel-active,.stats-panel.panel-active{display:flex}@media (width>=900px){.tab-bar{display:none}.panel-stack{gap:40px;padding-bottom:0;display:flex}.practice-panel,.stats-panel{display:flex}.practice-panel{flex:1.3;min-width:0}.stats-panel{border-left:1px solid var(--border);flex:1;min-width:0;padding-left:40px}}.loop-row{justify-content:space-between;align-items:center;gap:12px;margin:16px 0 8px;display:flex}.loop-label{color:var(--ink-muted);align-items:center;gap:4px;font-size:13px;font-weight:600;display:inline-flex}.switch{border:1px solid var(--border);background:var(--surface-raised);width:38px;height:22px;transition:background .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:999px;padding:2px;position:relative}.switch-knob{background:var(--ink-muted);width:16px;height:16px;transition:transform .16s var(--ease-out), background .14s var(--ease-out);border-radius:50%;display:block}.switch.on{background:var(--accent);border-color:var(--accent)}.switch.on .switch-knob{background:#fff;transform:translate(16px)}.switch:disabled{opacity:.5}.panel-heading{color:var(--ink);margin:0;font-size:15px;font-weight:700}.panel-subhead{color:var(--ink-muted);margin:2px 0 14px;font-size:12px}.panel-heading-row{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.session-reset{border:1px solid var(--border);background:var(--surface-raised);color:var(--ink-muted);white-space:nowrap;transition:color .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:999px;margin-top:1px;padding:4px 10px;font-size:11px;font-weight:600}.session-reset:hover{color:var(--ink);border-color:var(--ink-muted)}.string-times-header,.string-times-row{grid-template-columns:1.1fr 1fr 1fr;align-items:center;gap:8px;display:grid}.string-times-header{color:var(--ink-muted);padding:0 4px 6px;font-size:11px}.string-times-header span:not(:first-child){justify-self:end}.string-times-header-session{align-items:center;gap:4px;display:inline-flex}.string-times-list{flex-direction:column;gap:2px;margin:0 0 20px;padding:0;list-style:none;display:flex}.string-times-row{border-radius:8px;padding:6px 4px}.string-times-row.active{background:var(--accent-soft)}.string-times-label{color:var(--ink);font-weight:700}.string-times-group{flex-direction:column;align-items:flex-end;line-height:1.3;display:flex}.string-times-value{font-variant-numeric:tabular-nums;color:var(--ink-muted)}.string-times-avg{font-variant-numeric:tabular-nums;color:var(--ink-muted);opacity:.75;font-size:11px}.string-times-row.active .string-times-value{color:var(--accent)}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;margin-bottom:18px;padding-bottom:14px;display:flex}.titles{flex-direction:column;gap:2px;display:flex}.site-name{letter-spacing:.02em;color:var(--ink-muted);margin:0;font-size:12px;font-weight:600}.page-title{color:var(--ink);margin:0;font-size:20px;font-weight:700}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-timer{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:16px;font-weight:600}.theme-toggle{border:1px solid var(--border);background:var(--surface-raised);width:30px;height:30px;color:var(--ink-muted);transition:color .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:8px;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{color:var(--ink);border-color:var(--ink-muted)}.controls-stack{flex-direction:column;gap:12px;margin-bottom:8px;display:flex}.controls-row{align-items:flex-end;gap:16px;display:flex}.control{flex-direction:column;gap:7px;min-width:0;display:flex}.control-string{flex:1}.control-frets{flex:none}.control-chords{margin-bottom:12px}.mic-select{background:var(--surface-raised);border:1px solid var(--border);width:100%;height:36px;color:var(--ink);text-overflow:ellipsis;border-radius:10px;padding:0 12px;font-size:13px;font-weight:600}.mic-select:disabled{opacity:.5}.control-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);align-items:center;gap:4px;font-size:11px;font-weight:600;display:inline-flex}.info-tip{display:inline-flex;position:relative}.info-tip-trigger{border:1px solid var(--border);background:var(--surface-raised);width:15px;height:15px;color:var(--ink-muted);letter-spacing:0;text-transform:none;transition:color .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:10px;font-weight:700;line-height:1;display:flex}.info-tip-trigger:hover,.info-tip-trigger:focus-visible{color:var(--accent);border-color:var(--accent)}.info-tip-bubble{background:var(--ink);width:max-content;max-width:min(200px,100vw - 56px);color:var(--surface);letter-spacing:0;text-transform:none;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s var(--ease-out), transform .14s var(--ease-out);z-index:5;border-radius:8px;padding:8px 10px;font-size:12px;font-weight:500;line-height:1.4;position:absolute;bottom:calc(100% + 8px);left:0;right:auto;transform:translateY(4px)}.info-tip-bubble.align-end{left:auto;right:0}.info-tip:hover .info-tip-bubble,.info-tip-trigger:focus-visible~.info-tip-bubble,.info-tip-bubble.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.segmented{background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;gap:2px;padding:3px;display:flex}.segmented-option{min-width:0;height:36px;color:var(--ink-muted);font-variant-numeric:tabular-nums;transition:background .14s var(--ease-out), color .14s var(--ease-out);background:0 0;border:none;border-radius:7px;flex:1;font-size:14px;font-weight:600}.segmented-option.active{background:var(--accent-soft);color:var(--accent)}.segmented-option:disabled{opacity:.5}.stepper{background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;align-items:stretch;padding:3px 0;display:flex;overflow:hidden}.stepper-button{width:36px;height:36px;color:var(--ink);transition:background .14s var(--ease-out);background:0 0;border:none;font-size:17px;font-weight:600;line-height:1}.stepper-button:hover:not(:disabled){background:var(--surface)}.stepper-button:disabled{opacity:.35}.stepper-value{font-variant-numeric:tabular-nums;width:38px;color:var(--ink);justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.stage{flex-direction:column;align-items:center;padding:20px 0 12px;display:flex}.note-display{justify-content:center;align-items:center;min-height:120px;display:flex}.note-idle,.note-error{color:var(--ink-muted);font-size:clamp(20px,2.6vw,28px);font-weight:600}.note-error{color:var(--bad)}.note-done{flex-direction:column;align-items:center;gap:4px;display:flex}.note-done-time{color:var(--good);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:clamp(48px,9vw,84px);font-weight:800;line-height:1}.note-done-label{color:var(--good);font-size:clamp(14px,1.8vw,17px);font-weight:700}.note-glyph{color:var(--accent);letter-spacing:-.02em;animation:note-in .14s var(--ease-out);font-size:clamp(120px,24vw,220px);font-weight:800;line-height:1;display:inline-block;position:relative}.note-glyph.note-count{color:var(--ink-muted)}.chord-glyph{font-size:clamp(64px,13vw,130px)}.note-next{letter-spacing:0;color:var(--ink-muted);opacity:.4;font-size:clamp(18px,3.4vw,36px);font-weight:700;position:absolute;bottom:clamp(-16px,-1.8vw,-6px);right:clamp(-18px,-2vw,-8px)}@keyframes note-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hearing-row{min-height:1.3em;color:var(--ink-muted);text-align:center;margin-top:4px;font-size:14px;font-weight:500}.hearing-row strong{color:var(--ink);margin:0 2px;font-weight:700}.hearing-row.match strong{color:var(--good)}.hearing-cents{font-variant-numeric:tabular-nums;margin-left:2px}.hearing-tick{color:var(--good);margin-left:6px;font-weight:700}.hearing-last{opacity:.6}.hearing-last strong{color:var(--ink-muted);margin:0 2px;font-weight:700}.octave-meter{flex-direction:column;align-items:center;gap:10px;min-height:44px;margin-top:12px;display:flex}.octave-meter-label{color:var(--ink-muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:600;display:inline-flex}.octave-meter-dots{gap:12px;display:flex}.dot{border:2px solid var(--border);width:20px;height:20px;transition:background .18s var(--ease-out), border-color .18s var(--ease-out);border-radius:50%}.dot.lit{background:var(--good);border-color:var(--good);animation:dot-pop .26s var(--ease-out)}@keyframes dot-pop{0%{transform:scale(.55)}60%{transform:scale(1.18)}to{transform:scale(1)}}.beat-row{gap:12px;margin-top:4px;display:flex}.beat-dot{border:2px solid var(--border);width:12px;height:12px;transition:background 80ms var(--ease-out), border-color 80ms var(--ease-out), transform 80ms var(--ease-out);border-radius:50%}.beat-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);background:var(--surface-raised);color:var(--ink-muted);transition:background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}.chip:hover:not(:disabled):not(.active){border-color:var(--ink-muted);color:var(--ink)}.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.chip:disabled{opacity:.6}.note-queue{grid-template-columns:repeat(12,1fr);gap:4px;width:100%;margin-top:8px;display:grid}.note-tile{aspect-ratio:1;border:1px solid var(--border);background:var(--surface-raised);width:100%;min-width:0;color:var(--ink-muted);opacity:.6;transition:opacity .16s var(--ease-out), background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);border-radius:8px;justify-content:center;align-items:center;font-size:clamp(10px,2.6vw,13px);font-weight:700;display:flex}.note-tile.current{opacity:1;background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.note-tile.done{opacity:1;background:var(--good-soft);color:var(--good);border-color:#0000}.transport{flex-direction:column;align-items:center;gap:10px;margin-top:22px;display:flex}.primary-button{background:var(--accent);color:#fff;min-width:200px;transition:transform .12s var(--ease-out), filter .12s var(--ease-out);border:none;border-radius:999px;padding:14px 28px;font-size:15px;font-weight:700}.primary-button:hover:not(:disabled){filter:brightness(1.06)}.primary-button:active:not(:disabled){transform:translateY(1px)}.primary-button:disabled{opacity:.55;cursor:not-allowed}.transport-caption{min-height:1.2em;color:var(--ink-muted);font-size:13px}.practice-log{border-top:1px solid var(--border);margin-top:28px;padding-top:18px}.practice-log-stats{gap:28px;margin-bottom:16px;display:flex}.stat{flex-direction:column;gap:2px;display:flex}.stat-value{color:var(--ink);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.stat-label{color:var(--ink-muted);font-size:12px}.heatmap{gap:5px;display:flex}.heatmap-col{flex-direction:column;flex:1;align-items:center;gap:5px;display:flex}.heatmap-cell{aspect-ratio:1;background:var(--surface-raised);border:1px solid var(--border);border-radius:5px;width:100%;max-width:22px}.heatmap-cell.level-1{background:color-mix(in srgb, var(--accent) 25%, var(--surface-raised));border-color:#0000}.heatmap-cell.level-2{background:color-mix(in srgb, var(--accent) 50%, var(--surface-raised));border-color:#0000}.heatmap-cell.level-3{background:color-mix(in srgb, var(--accent) 75%, var(--surface-raised));border-color:#0000}.heatmap-cell.level-4{background:var(--accent);border-color:#0000}.heatmap-day{color:var(--ink-muted);font-size:10px}@media (width<=480px){.controls-row{flex-direction:column;align-items:stretch;gap:12px}.control-frets{align-self:flex-start}}@media (width<=400px){.note-glyph{font-size:96px}.heatmap-day{display:none}}.modal-backdrop{z-index:50;background:#0006;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:14px;width:100%;max-width:360px;padding:24px;box-shadow:0 20px 50px #00000040}.modal-title{color:var(--ink);margin:0 0 10px;font-size:17px;font-weight:700}.modal-body{color:var(--ink-muted);margin:0 0 20px;font-size:14px;line-height:1.5}.modal-button{background:var(--accent);color:#fff;width:100%;transition:filter .12s var(--ease-out);border:none;border-radius:999px;padding:12px 20px;font-size:14px;font-weight:700}.modal-button:hover{filter:brightness(1.06)}