: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);justify-content:center;min-height:100svh;display:flex}.sheet{flex-direction:column;width:100%;max-width:620px;padding:40px 24px 64px;display:flex}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;margin-bottom:28px;padding-bottom:20px;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-row{align-items:flex-end;gap:16px;margin-bottom:8px;display:flex}.control{flex-direction:column;gap:7px;min-width:0;display:flex}.control-string{flex:1}.control-frets{flex:none}.control-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-size:11px;font-weight:600}.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;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:48px 0 20px;display:flex}.note-display{justify-content:center;align-items:center;min-height:200px;display:flex}.note-idle,.note-error,.note-done{color:var(--ink-muted);font-size:19px;font-weight:600}.note-error{color:var(--bad)}.note-done{color:var(--good);font-size:22px;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}@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}.octave-meter{gap:8px;min-height:10px;margin-top:16px;display:flex}.dot{border:1.5px solid var(--border);width:9px;height:9px;transition:background .18s var(--ease-out), border-color .18s var(--ease-out);border-radius:50%}.dot.lit{background:var(--good);border-color:var(--good)}.note-queue{flex-wrap:wrap;justify-content:center;gap:6px;width:100%;margin-top:8px;display:flex}.note-tile{border:1px solid var(--border);background:var(--surface-raised);width:30px;height:30px;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: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:40px;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:56px;padding-top:24px}.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<=400px){.note-glyph{font-size:96px}.heatmap-day{display:none}}