:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6e7c8;--bg-alt:#efd9b0;--surface:#fff8e8;--surface-alt:#ffeccb;--text:#3a2b1c;--muted:#8b7355;--accent:#fdb156;--accent-strong:#e58f2b;--accent-ink:#3f2a0f;--border:#4a3624;--border-strong:#2c1f14;--focus:#2f6fd0;--shadow:#2c1f14;--overlay:#2c1f148c;--correct:#4e9d57;--correct-ink:#f2ffe8;--wrong:#cf564d;--wrong-ink:#fff1ee;--font-heading:"Press Start 2P", "Courier New", monospace;--font-body:"Pixelify Sans", "Trebuchet MS", sans-serif;--font-numeric:"VT323", "Courier New", monospace;--text-xs:12px;--text-sm:14px;--text-base:18px;--text-lg:22px;--text-xl:28px;--text-2xl:36px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius:0px;--border-w:2px;--shadow-px:4px;--transition-fast:90ms steps(2, end);--transition-smooth:70ms linear;--transition-base:.15s steps(3, end)}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#241a2e;--bg-alt:#1b1322;--surface:#2f2240;--surface-alt:#3c2c52;--text:#f2e6cf;--muted:#b3a0c4;--accent:#fdb156;--accent-strong:#ffc879;--accent-ink:#2a1808;--border:#6f5a86;--border-strong:#cbb6e2;--focus:#8fc4ff;--shadow:#0c0711;--overlay:#0c0711b8;--correct:#6cc47a;--correct-ink:#0f240f;--wrong:#f07a72;--wrong-ink:#2a0d0a}@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p.woff2)format("woff2")}@font-face{font-family:Pixelify Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/pixelify-sans.woff2)format("woff2")}@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/vt323.woff2)format("woff2")}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;height:100%}body,#root{min-height:100%}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background-color:var(--bg);-webkit-font-smoothing:none;text-rendering:optimizespeed;font-weight:400;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:.02em;color:var(--text);font-weight:400;line-height:1.5}p{max-width:68ch}a{color:var(--accent-strong);text-decoration:underline}a:hover{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}img,picture,canvas,svg,video{max-width:100%;display:block}img,canvas,svg,.pixelated{image-rendering:crisp-edges;image-rendering:pixelated}::selection{color:var(--accent-ink);background-color:var(--accent)}:focus-visible{outline:var(--border-w) solid var(--focus);outline-offset:var(--space-1)}a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 var(--border-w) var(--focus)}.pixel-panel{padding:var(--space-4);color:var(--text);background-color:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow)}.pixel-panel--alt{background-color:var(--surface-alt)}.pixel-divider{height:var(--border-w);background-color:var(--border);border:0}.pixel-button{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);color:var(--accent-ink);background-color:var(--accent);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow);-webkit-user-select:none;user-select:none;transition:transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);font-weight:700;line-height:1.2;display:inline-flex}.pixel-button:hover:not(:disabled){background-color:var(--accent-strong)}.pixel-button:active:not(:disabled){transform:translate(var(--shadow-px), var(--shadow-px));box-shadow:0 0 0 0 var(--shadow)}.pixel-button:disabled{cursor:not-allowed;box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--border);opacity:.6}.pixel-button--ghost{color:var(--text);background-color:var(--surface)}.pixel-button--ghost:hover:not(:disabled){color:var(--accent-ink);background-color:var(--accent)}.pixel-key{padding:var(--space-1);color:var(--text);background-color:var(--surface);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:flex-end;display:flex;position:relative}.pixel-key:hover:not(:disabled){background-color:var(--surface-alt)}.pixel-key:active:not(:disabled){transform:translateY(var(--space-1))}.pixel-key--correct{color:var(--correct-ink);background-color:var(--correct)}.pixel-key--wrong{color:var(--wrong-ink);background-color:var(--wrong)}.pixel-key--target{outline:var(--border-w) solid var(--accent);outline-offset:calc(-1 * var(--border-w))}.pixel-key:disabled{cursor:not-allowed;opacity:.7}.pixel-heading{font-family:var(--font-heading)}.pixel-numeric{font-family:var(--font-numeric);font-variant-numeric:tabular-nums;letter-spacing:.02em}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[hidden]{display:none!important}.visually-hidden:focus,.visually-hidden:focus-within{clip:auto;white-space:normal;width:auto;height:auto;margin:0;position:static;overflow:visible}:where(header,main,aside,footer,nav,section){min-width:0}#root{width:100%;max-width:100%}.audio-controls,.audio-controls__live,.tuner__off{gap:var(--space-3);flex-direction:column;align-items:center;display:flex}.tuner__hint,.tuner__message{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted);text-align:center;margin:0}.tuner__message--error{color:var(--wrong)}.tuner__action{cursor:pointer}.tuner__action:focus-visible{outline:var(--border-w) solid var(--focus);outline-offset:var(--space-1)}.tuner__meter{gap:var(--space-2);flex-direction:column;align-items:center;width:100%;display:flex}.tuner__level{background-color:var(--muted);border:var(--border-w) solid var(--border-strong);width:200px;max-width:100%;height:16px;position:relative;overflow:hidden}.tuner__level-fill{background-color:var(--correct);transition:width var(--transition-fast);position:absolute;top:0;bottom:0;left:0}.tuner__level-band{background-color:var(--correct);border-left:var(--border-w) solid var(--border-strong);border-right:var(--border-w) solid var(--border-strong);opacity:.4;position:absolute;top:0;bottom:0}.tuner__level-state{font-family:var(--font-heading);font-size:var(--text-xs);color:var(--text);letter-spacing:.04em;margin:0}.tuner__gain{gap:var(--space-1);flex-direction:column;align-items:center;display:flex}.tuner__gain-label{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted)}.tuner__gain-slider{width:200px;max-width:100%;accent-color:var(--accent)}.tuner__gain-slider:focus-visible{outline:var(--border-w) solid var(--focus);outline-offset:var(--space-1)}.tuner__gain-value{font-family:var(--font-numeric);font-size:var(--text-sm);color:var(--text)}@media (prefers-reduced-motion:reduce){.tuner__level-fill{transition:none}}.audio-gate{z-index:100;padding:var(--space-5);background-color:var(--overlay);cursor:pointer;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.audio-gate__panel{gap:var(--space-4);text-align:center;cursor:default;flex-direction:column;align-items:center;max-width:420px;display:flex}.audio-gate__title{font-size:var(--text-lg);color:var(--text);margin:0}.audio-gate__hint{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted);margin:0}.audio-gate__action{margin-top:var(--space-2);cursor:pointer}.audio-gate__loading{align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text);margin:0;display:flex}.audio-gate__spinner{width:var(--space-3);height:var(--space-3);background-color:var(--accent);border:var(--border-w) solid var(--border-strong);animation:audio-gate-pulse var(--transition-base) infinite alternate;display:inline-block}@keyframes audio-gate-pulse{0%{opacity:.3}to{opacity:1}}.audio-gate__error{gap:var(--space-3);flex-direction:column;align-items:center;display:flex}.audio-gate__error-text{font-family:var(--font-body);font-size:var(--text-sm);color:var(--wrong);margin:0}@media (prefers-reduced-motion:reduce){.audio-gate__spinner{animation:none}}.controls{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.controls__button{min-width:9rem}.feedback{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:var(--text);background-color:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow);display:flex}.feedback--correct{background-color:var(--surface-alt);border-color:var(--correct)}.feedback--wrong{background-color:var(--surface-alt);border-color:var(--wrong)}.feedback__glyph{min-width:var(--space-5);font-family:var(--font-heading);font-size:var(--text-base);justify-content:center;align-items:center;display:inline-flex}.feedback--correct .feedback__glyph{color:var(--correct)}.feedback--wrong .feedback__glyph{color:var(--wrong)}.feedback__verdict{font-family:var(--font-body);font-size:var(--text-base);font-weight:700}.feedback__details{gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted);flex-direction:column;display:flex}.feedback__detail{white-space:nowrap}.feedback__label{font-family:var(--font-numeric);font-size:var(--text-base);color:var(--text)}.instrument-picker{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.instrument-picker__label{font-size:var(--text-xs);color:var(--muted)}.instrument-picker__control{padding:var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text);background-color:var(--surface);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow)}.instrument-picker__control:hover:not(:disabled){background-color:var(--surface-alt)}.instrument-picker__control:disabled{cursor:not-allowed;opacity:.6}.keyboard-shell{gap:var(--space-1);flex-direction:column;width:100%;display:flex}.keyboard-divisions{width:100%;height:var(--text-sm);font-family:var(--font-numeric);font-size:var(--text-xs);color:var(--muted);-webkit-user-select:none;user-select:none;pointer-events:none;line-height:1;position:relative}.keyboard-divisions__mark{border-left:var(--border-w) solid var(--border);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0}.keyboard{width:100%;height:var(--keyboard-height,180px);background-color:var(--surface-alt);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow);-webkit-user-select:none;user-select:none;touch-action:manipulation;display:flex;position:relative;overflow:hidden}.keyboard .piano-key{padding:0 0 var(--space-1);font-family:var(--font-numeric);line-height:1;overflow:hidden}.keyboard button.piano-key--white{z-index:1;flex:none;width:1.92308%;height:100%}.keyboard button.piano-key--black{top:0;left:var(--key-left,0%);z-index:2;background-color:var(--text);width:1.25%;height:62%;color:var(--surface);position:absolute}.keyboard button.piano-key--black:hover:not(:disabled){background-color:var(--border-strong);color:var(--surface)}.keyboard button.piano-key--active,.keyboard button.piano-key--active:hover:not(:disabled){background-color:var(--accent);color:var(--accent-ink)}.keyboard button.piano-key--correct,.keyboard button.piano-key--correct:hover:not(:disabled){background-color:var(--correct);color:var(--correct-ink)}.keyboard button.piano-key--wrong,.keyboard button.piano-key--wrong:hover:not(:disabled){background-color:var(--wrong);color:var(--wrong-ink)}.keyboard button.piano-key--target{outline:var(--border-w) solid var(--accent);outline-offset:calc(-1 * var(--border-w))}.keyboard button.piano-key:focus-visible{outline:var(--border-w) solid var(--focus);outline-offset:calc(-1 * var(--border-w));z-index:3}.keyboard button.piano-key:disabled{cursor:not-allowed}.piano-key__glyph{font-size:var(--text-base);pointer-events:none;font-weight:700}.note-display{gap:var(--space-1);height:100%;padding:var(--space-3) var(--space-4);text-align:center;background-color:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-px) var(--shadow-px) 0 0 var(--shadow);flex-direction:column;justify-content:center;align-items:center;display:flex}.note-display__caption{font-family:var(--font-body);font-size:var(--text-xs);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.note-display__value{font-size:var(--text-lg);color:var(--text)}.note-display__value--hidden{color:var(--muted)}.range-picker{justify-content:center;gap:var(--space-3);flex-wrap:wrap;align-items:stretch;width:100%;display:flex}.range-picker__option{gap:var(--space-2);text-align:left;align-items:flex-start}.range-picker__option--selected{outline:var(--border-w) solid var(--border-strong);outline-offset:calc(-1 * var(--border-w))}.range-picker__check{text-align:center;width:1em;font-weight:700;display:inline-block}.range-picker__text{gap:var(--space-1);flex-direction:column;display:flex}.range-picker__name{font-weight:700}.range-picker__bounds{font-size:var(--text-xs);color:var(--accent-ink)}.stats-graph{min-width:0}.stats-graph__bars{align-items:flex-end;gap:var(--space-1);height:72px;display:flex}.stats-graph__bar{background-color:var(--accent-strong);border:var(--border-w) solid var(--border);flex:1;min-height:2px}.stats-graph__empty{font-size:var(--text-xs);color:var(--muted);margin:0}.stats-panel{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.stats-panel__title{font-size:var(--text-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.stats-panel__summary{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stats-panel__stat{gap:var(--space-1);padding:var(--space-2);background-color:var(--surface-alt);border:var(--border-w) solid var(--border);flex-direction:column;display:flex}.stats-panel__progress{min-width:0}.stats-panel__label{font-family:var(--font-heading);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.stats-panel__value{font-size:var(--text-xl);color:var(--accent-strong);line-height:1.1}.stats-panel__meta{font-size:var(--text-xs);color:var(--muted)}.stats-panel__history{gap:var(--space-2);flex-direction:column;display:flex}.stats-panel__subtitle{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.stats-panel__days{gap:var(--space-1);flex-direction:column;max-height:16rem;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.stats-panel__day{gap:var(--space-2);padding:var(--space-1) var(--space-2);background-color:var(--surface);border:var(--border-w) solid var(--border);grid-template-columns:1fr auto auto;align-items:baseline;display:grid}.stats-panel__day-date{color:var(--text)}.stats-panel__day-accuracy{color:var(--accent-strong)}.stats-panel__day-attempts{font-size:var(--text-xs);color:var(--muted)}.stats-panel__empty{padding:var(--space-3);color:var(--muted);text-align:center;border:var(--border-w) dashed var(--border)}.stats-panel__reset{align-self:flex-start}.theme-toggle{background:var(--surface);width:2.25rem;height:2.25rem;color:var(--text);border:var(--pixel-border-width,2px) solid var(--border);box-shadow:var(--pixel-shadow,none);image-rendering:pixelated;cursor:pointer;font:inherit;border-radius:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}.theme-toggle:focus-visible{outline:var(--pixel-border-width,2px) solid var(--accent);outline-offset:2px}.theme-toggle__glyph{font-size:1.1rem;display:block}.tuner{gap:var(--space-3);flex-direction:column;align-items:stretch;width:100%;display:flex}.tuner__live{gap:var(--space-3);flex-direction:column;align-items:center;display:flex}.tuner__gauge{aspect-ratio:200/110;width:100%;position:relative}.tuner__scale{width:100%;height:100%;display:block;overflow:visible}.tuner__arc{fill:none;stroke:var(--border);stroke-width:var(--border-w)}.tuner__tick{stroke:var(--border);stroke-width:1px}.tuner__tick--major{stroke:var(--border-strong);stroke-width:var(--border-w)}.tuner__target{stroke:var(--accent-strong);stroke-width:var(--border-w)}.tuner__target--hit{stroke:var(--correct)}.tuner__needle{background-color:var(--accent-strong);border:var(--border-w) solid var(--border-strong);transform-origin:50% 100%;width:2%;height:70.909%;transition:transform var(--transition-smooth);margin-left:-1%;position:absolute;bottom:9.0909%;left:50%}.tuner__pivot{aspect-ratio:1;background-color:var(--accent);border:var(--border-w) solid var(--border-strong);width:7%;margin-left:-3.5%;position:absolute;bottom:2.7273%;left:50%}.tuner__state{font-family:var(--font-heading);font-size:var(--text-sm);color:var(--text);letter-spacing:.04em;margin:0}.tuner__state--in-tune{color:var(--correct)}.tuner--in-tune{border-color:var(--correct)}.tuner__cents{font-family:var(--font-numeric);font-size:var(--text-sm);color:var(--text);text-align:center;white-space:nowrap;max-width:100%;margin:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.tuner__needle{transition:none}}.app{gap:var(--space-5);min-height:100vh;padding:var(--space-5);color:var(--text);background-color:var(--bg);flex-direction:column;display:flex}.app__header{gap:var(--space-4);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.app__title{font-size:var(--text-xl)}.app__main{gap:var(--space-5);flex-direction:column;align-items:stretch;display:flex}.app__settings{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.app__round{gap:var(--space-4);flex-direction:column;display:flex}.app__trainer{gap:var(--space-5);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;display:grid}.app__trainer-side{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.app__trainer-top{gap:var(--space-4);align-items:stretch;display:flex}.app__trainer-top>*{flex:1 1 0;min-width:0}.app__replay-card{justify-content:center;align-items:center;display:flex}.app__replay-card .controls{flex-wrap:nowrap}.app__replay-card .controls__button{flex:1 1 0;min-width:0}@media (width>=900px){.app__replay-card .controls{align-items:stretch;gap:var(--space-2);flex:auto}.app__replay-card .controls__button{white-space:nowrap;padding-inline:var(--space-1)}}@media (width<=899px){.app__trainer{grid-template-columns:minmax(0,1fr)}}.app__notice{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--muted);background-color:var(--surface-alt);border:var(--border-w) solid var(--border)}.app__notice--warning{color:var(--wrong-ink);background-color:var(--wrong)}.app__footer{font-size:var(--text-sm);color:var(--muted);justify-content:center;display:flex}