:root{color:#17201c;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f3ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%}body{min-width:320px;min-height:100dvh;margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app-shell{background:radial-gradient(circle at 20% 15%,#cd5c4824,#0000 28%),linear-gradient(135deg,#f6f3ea 0%,#dbe6dc 100%);width:100%;min-height:100dvh;padding-block:clamp(20px,4vw,48px);padding-inline:clamp(24px,5vw,72px);display:flex;position:relative}.start-screen{flex-direction:column;justify-content:flex-start;width:min(100%,700px);min-height:calc(100dvh - clamp(48px,10vw,144px));margin:0 auto;padding-top:clamp(72px,12vh,108px);display:flex;position:relative}.stats-screen{flex-direction:column;width:min(100%,760px);min-height:calc(100dvh - clamp(48px,10vw,144px));margin:0 auto;display:flex}.app-shell-practice{height:100dvh;min-height:0;padding-block:clamp(18px,4vw,48px) 0;padding-inline:0;overflow:hidden}.practice-screen{flex-direction:column;justify-content:start;gap:clamp(14px,3vh,34px);width:100%;height:100%;min-height:0;margin:0 auto;display:flex;overflow:hidden}.practice-navbar{justify-content:space-between;align-items:center;width:100%;margin:0 auto;padding-inline:clamp(18px,5vw,72px);display:flex}.practice-topbar{grid-template-columns:1fr auto 1fr;align-items:center;gap:18px 28px;width:100%;margin:auto;padding-inline:clamp(18px,5vw,72px);display:grid}.practice-prompt{flex-wrap:wrap;grid-column:2;justify-content:center;align-items:baseline;gap:10px 14px;min-width:0;padding-block:12px 14px;display:flex}.practice-lesson{color:#40514a;text-align:left;flex-direction:column;grid-column:1;gap:4px;min-width:0;font-weight:800;line-height:1.25;display:flex}.practice-lesson strong{color:#17201c;font-size:1rem}.practice-lesson span{color:#526058;font-size:.84rem}.practice-mode-info{max-width:230px;font-weight:700}.eyebrow{color:#6b4d38;letter-spacing:0;text-transform:uppercase;margin:0 0 14px;font-size:.82rem;font-weight:700}h1{margin:0;font-size:4.8rem;line-height:.95}.start-title-row{align-items:center;gap:14px;max-width:100%;display:flex}.start-title-row h1,.stats-screen h1{font-size:3.2rem}.start-topbar{justify-content:flex-end;align-items:flex-start;gap:16px;width:100%;margin:0;display:flex;position:absolute;top:0;left:0;right:0}.stats-level{color:#40514a;margin:18px 0 0;font-size:1.05rem;font-weight:800}.stats-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px;display:grid}.stats-callout{background:#fffdf8b8;border:1px solid #17201c1f;border-radius:8px;flex-direction:column;gap:4px;min-width:0;padding:16px;display:flex;box-shadow:0 14px 28px #1f29231f}.stats-callout span,.stats-callout small{color:#6b4d38;letter-spacing:0;text-transform:uppercase;font-size:.76rem;font-weight:800}.stats-callout strong{color:#17201c;font-size:1.8rem;line-height:1.05}.note-stats-list{flex-direction:column;gap:8px;margin-top:22px;display:flex}.note-stat-row{color:#40514a;background:#fffdf89e;border:1px solid #17201c1a;border-radius:8px;grid-template-columns:minmax(58px,.7fr) minmax(78px,.9fr) minmax(120px,1fr) minmax(120px,1fr);align-items:center;gap:12px;min-height:48px;padding:10px 14px;font-weight:800;display:grid}.note-stat-row strong{color:#17201c;font-size:1.2rem}.note-stat-row small{color:#526058;text-align:right;font-size:.86rem;font-weight:800}.stats-actions{flex-wrap:wrap;gap:12px;margin-top:16px;display:flex}.stats-action-button{color:#fffdf8;cursor:pointer;background:#17201c;border:1px solid #fffdf847;border-radius:8px;justify-content:center;align-items:center;min-height:46px;padding:0 18px;font-weight:800;transition:box-shadow .16s,transform .16s,background-color .16s;display:inline-flex;box-shadow:0 16px 28px #1f29232e,inset 0 -3px #00000038}.stats-action-button-secondary{background:#2c7b3b;border-color:#2c7b3b38}.stats-action-button-tertiary{color:#17201c;background:#fffdf8e0;border-color:#17201c24}.stats-action-button:hover{transform:translateY(-2px);box-shadow:0 20px 34px #1f292338,inset 0 -3px #00000038}.stats-action-button:active{transform:translateY(0)}.stats-action-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.prompt-label{color:#6b4d38;letter-spacing:0;text-align:center;text-transform:uppercase;flex:0 0 100%;font-size:.8rem;font-weight:800}.practice-mode-badge{color:#1f5a2b;letter-spacing:0;text-transform:uppercase;background:#f0faece0;border:1px solid #2c7b3b3d;border-radius:999px;align-self:flex-start;align-items:center;min-height:26px;padding:0 10px;font-size:.74rem;font-weight:800;line-height:1;display:inline-flex}.note-prompt-row{flex:0 0 100%;grid-template-columns:minmax(0,1fr);justify-content:center;place-items:center;gap:0 clamp(14px,2.5vw,24px);width:100%;min-width:0;display:grid}.note-prompt-row.has-next-note{grid-template-columns:minmax(0,1fr) clamp(24px,4vw,40px) minmax(0,1fr)}.current-note-slot{flex:none;justify-content:center;justify-self:center;align-items:center;width:1.72em;min-height:.92em;font-size:6rem;display:inline-flex;position:relative}.has-next-note .current-note-slot{justify-self:end}.current-note{color:#17201c;text-align:center;flex:none;font-size:1em;line-height:.82}.current-note-enter{transform-origin:50%;animation:.26s cubic-bezier(.2,.86,.25,1) both current-note-promote}.current-note-exit{pointer-events:none;justify-content:center;align-items:center;animation:.24s both current-note-fade-out;display:inline-flex;position:absolute;inset:0}.next-note-value{color:#40514a;text-align:left;justify-self:start;min-width:3.6em;font-size:2rem;line-height:1}.next-note-arrow{color:#6b4d38;justify-self:center;font-size:2.15rem;font-weight:900;line-height:1}.next-note-preview-enter{animation:.26s both next-note-fade-in}@keyframes current-note-promote{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes current-note-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}@keyframes next-note-fade-in{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){.current-note-enter,.current-note-exit,.next-note-preview-enter,.start-menu-panel{animation:none}.current-note-exit{opacity:0}}.score{color:#40514a;text-align:right;flex-direction:column;grid-column:3;justify-self:end;align-items:flex-end;font-weight:700;line-height:1.35;display:flex}.practice-progress{color:#17201c;font-weight:900}.controls{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.start-screen>.controls{width:100%;margin:22px 0 0}.start-screen>.controls .practice-notes-control{width:100%}.main-menu-button{color:#17201c;cursor:pointer;background:#fffdf8c7;border:1px solid #17201c24;border-radius:8px;justify-content:center;align-items:center;height:44px;padding:0 16px;font-weight:800;transition:background-color .16s,box-shadow .16s,transform .16s;display:inline-flex;box-shadow:0 10px 22px #1f29231f}.main-menu-button:hover{background:#fffdf8;transform:translateY(-1px);box-shadow:0 14px 26px #1f292329}.main-menu-button:active{transform:translateY(0)}.main-menu-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.practice-navbar-left{align-items:center;gap:10px;min-width:0;display:flex}.midi-navbar-status-wrap{flex:none;display:inline-flex;position:relative}.midi-navbar-status{color:#6b4d38;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:#fffdf8c7;border:1px solid #17201c24;border-radius:8px;flex:none;justify-content:center;align-items:center;max-width:min(34vw,280px);height:44px;padding:0 14px;font-weight:800;transition:background-color .16s,box-shadow .16s,transform .16s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 10px 22px #1f29231f}.midi-navbar-status:hover{background:#fffdf8;transform:translateY(-1px);box-shadow:0 14px 26px #1f292329}.midi-navbar-status:active{transform:translateY(0)}.midi-navbar-status:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.midi-navbar-status.is-connected{color:#1f5a2b}.midi-navbar-status.is-connecting{color:#c95c40}.midi-navbar-status.is-error{color:#8f2f2a}.start-topbar .midi-navbar-status{max-width:none}.midi-status-popover{z-index:6;color:#17201c;background:#fffdf8;border:1px solid #17201c1f;border-radius:8px;flex-direction:column;gap:8px;min-width:220px;padding:14px;display:flex;position:absolute;top:calc(100% + 10px);left:0;box-shadow:0 24px 44px #1f292333}.start-topbar .midi-status-popover,.practice-navbar-actions .midi-status-popover{left:auto;right:0}.midi-status-popover-label{color:#6b4d38;letter-spacing:0;text-transform:uppercase;font-size:.74rem;font-weight:800}.midi-status-popover-value{color:#17201c;font-size:.94rem;line-height:1.25}.midi-status-popover-button{color:#1f5a2b;cursor:pointer;text-align:center;background:#f0faecd6;border:1px solid #2c7b3b38;border-radius:8px;min-height:40px;padding:0 12px;font-weight:800;transition:background-color .16s,border-color .16s,transform .16s}.midi-status-popover-button:hover:not(:disabled){background:#f5fff1;border-color:#2c7b3b57;transform:translateY(-1px)}.midi-status-popover-button:disabled{cursor:not-allowed;opacity:.62}.midi-status-popover-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.practice-navbar-actions{align-items:center;gap:10px;display:flex}.finish-practice-button{color:#1f5a2b;cursor:pointer;background:#f0faecd6;border:1px solid #2c7b3b38;border-radius:8px;justify-content:center;align-items:center;height:44px;padding:0 16px;font-weight:800;transition:background-color .16s,box-shadow .16s,transform .16s;display:inline-flex;box-shadow:0 10px 22px #1f29231a}.finish-practice-button:hover{background:#f5fff1;transform:translateY(-1px);box-shadow:0 14px 26px #1f292324}.finish-practice-button:active{transform:translateY(0)}.finish-practice-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.practice-menu{justify-self:end;position:relative}.menu-button{color:#17201c;cursor:pointer;background:#fffdf8c7;border:1px solid #17201c24;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .16s,box-shadow .16s,transform .16s;display:inline-flex;box-shadow:0 10px 22px #1f29231f}.menu-button:hover{background:#fffdf8;transform:translateY(-1px);box-shadow:0 14px 26px #1f292329}.menu-button:active{transform:translateY(0)}.menu-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.menu-icon{flex-direction:column;gap:4px;width:20px;display:flex}.menu-icon span{background:currentColor;border-radius:999px;height:2px;display:block}.practice-menu-panel{z-index:5;background:#fffdf8;border:1px solid #17201c1f;border-radius:8px;min-width:220px;padding:16px;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 24px 44px #1f292333}.practice-menu-panel .controls{flex-direction:column;align-items:start;margin-top:0}.practice-menu-panel .toggle-control{white-space:nowrap;width:100%}.practice-menu-panel .practice-notes-control{width:100%}.practice-notes-control{color:#17201c;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;flex-direction:column;flex:0 0 100%;gap:8px;width:min(100%,420px);font-weight:700;display:flex}.practice-notes-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.practice-notes-header strong{color:#6b4d38;font-size:.9rem}.practice-notes-control input{accent-color:#2c7b3b;cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}.practice-notes-control input:focus-visible{outline-offset:4px;outline:3px solid #c95c40}.practice-notes-steps{--practice-note-thumb-offset:9px;color:#526058;pointer-events:none;-webkit-user-select:none;user-select:none;height:1.2em;font-size:.74rem;font-weight:800;display:block;position:relative}.practice-notes-steps span{white-space:nowrap;position:absolute;top:0;transform:translate(-50%)}.practice-notes-steps span:first-child{left:var(--practice-note-thumb-offset)}.practice-notes-steps span:nth-child(2){left:calc(25% + (var(--practice-note-thumb-offset) / 2))}.practice-notes-steps span:nth-child(3){left:50%}.practice-notes-steps span:nth-child(4){left:calc(75% - (var(--practice-note-thumb-offset) / 2))}.practice-notes-steps span:nth-child(5){left:calc(100% - var(--practice-note-thumb-offset))}.restore-defaults-button{color:#6b4d38;cursor:pointer;text-align:center;background:#fff6e8;border:1px solid #6b4d3838;border-radius:8px;width:100%;min-height:40px;padding:0 12px;font-weight:800;transition:background-color .16s,border-color .16s,transform .16s}.restore-defaults-button:hover{background:#ffedd2;border-color:#6b4d3857;transform:translateY(-1px)}.restore-defaults-button:active{transform:translateY(0)}.restore-defaults-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.toggle-control{color:#17201c;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-weight:700;display:inline-flex}.toggle-control input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.toggle-track{background:#cdd6cf;border:2px solid #17201c3d;border-radius:999px;width:46px;height:26px;transition:background-color .16s,border-color .16s;position:relative}.toggle-thumb{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .16s;position:absolute;top:3px;left:3px;box-shadow:0 2px 5px #1f292340}.toggle-control input:checked+.toggle-track{background:#4da85e;border-color:#2c7b3b}.toggle-control input:checked+.toggle-track .toggle-thumb{transform:translate(20px)}.toggle-control input:focus-visible+.toggle-track{outline-offset:3px;outline:3px solid #c95c40}.level-groups{flex-direction:column;gap:24px;width:100%;margin-top:34px;display:flex}.start-menu{overflow:hidden}.start-menu-panel{animation:.22s cubic-bezier(.2,.86,.25,1) both start-menu-enter}.level-list{flex-direction:column;gap:12px;width:100%;display:flex}.level-button{color:#fffdf8;text-align:left;cursor:pointer;letter-spacing:0;background:linear-gradient(#ffffff24,#0000 48%),#17201c;border:1px solid #fffdf847;border-radius:8px;justify-content:space-between;align-items:center;gap:18px;width:100%;padding:16px 18px 16px 20px;transition:box-shadow .16s,transform .16s,background-color .16s;display:inline-flex;box-shadow:0 16px 28px #1f29232e,inset 0 -3px #00000038}.level-button strong,.level-button small{display:block}.level-button>span:first-child{flex:auto;min-width:0}.level-button strong{font-size:1.04rem;font-weight:800}.level-button small{color:#fffdf8bd;margin-top:3px;font-size:.86rem;font-weight:700}.level-button>span:last-child{color:#17201c;background:#e0b958;border-radius:50%;flex:none;justify-content:center;align-items:center;width:26px;height:26px;font-size:1.1rem;line-height:1;display:inline-flex}.level-button:hover{transform:translateY(-2px);box-shadow:0 20px 34px #1f292338,inset 0 -3px #00000038}.level-button:disabled{cursor:not-allowed;opacity:.55;transform:none}.level-button:disabled:hover{transform:none;box-shadow:0 16px 28px #1f29232e,inset 0 -3px #00000038}.level-button:active{transform:translateY(0);box-shadow:0 10px 18px #1f292329,inset 0 -1px #00000038}.level-button:focus-visible{outline-offset:3px;outline:3px solid #c95c40}.level-button-category{min-height:72px}.level-button-back{background:linear-gradient(#ffffff24,#0000 48%),#6b4d38}.level-button-back>span:last-child{color:#6b4d38;background:#fffdf8}@keyframes start-menu-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.keyboard{filter:drop-shadow(0 24px 40px #1f292338);-webkit-user-select:none;user-select:none;flex:0 0 clamp(240px,42vh,440px);width:100%;min-height:0;margin:0 auto;position:relative;overflow:hidden}.white-keys{background:#252525;border:10px solid #252525;border-radius:8px;height:100%;display:grid;overflow:hidden}.white-key{color:#526058;cursor:pointer;touch-action:none;background:linear-gradient(#fffdf8 0%,#e4dfd3 100%);border:0;border-left:1px solid #c8c2b5;justify-content:center;align-items:end;min-width:0;padding:0 8px 18px;display:flex}.white-key:first-child{border-left:0}.key-labels{pointer-events:none;flex-direction:column;align-items:center;gap:6px;min-width:0;display:inline-flex}.note-key-label{font-size:.86rem;font-weight:700}.computer-key-label{color:#17201c;background:#fffdf8c7;border:1px solid #17201c33;border-radius:6px;justify-content:center;align-items:center;min-width:24px;height:22px;padding:0 6px;font-size:.76rem;font-weight:900;line-height:1;display:inline-flex;box-shadow:inset 0 -2px #17201c1f}.white-key.is-active{color:#1f231f;background:linear-gradient(#fff4c7 0%,#e0b958 100%);box-shadow:inset 0 10px 22px #6f4e202e}.white-key.is-incorrect{color:#451713;background:linear-gradient(#ffd9d6 0%,#d34b42 100%);box-shadow:inset 0 10px 22px #5f16123d}.white-key.is-correct{color:#14381d;background:linear-gradient(#dff8c7 0%,#4da85e 100%);box-shadow:inset 0 10px 22px #1552233d}.black-keys{pointer-events:none;height:62%;position:absolute;inset:10px 10px auto}.black-key{left:calc((100% / var(--white-key-count)) * var(--key-position));z-index:2;width:calc((100% / var(--white-key-count)) * .56);color:#f7efe1;cursor:pointer;pointer-events:auto;touch-action:none;background:linear-gradient(90deg,#ffffff14,#0000 22%),linear-gradient(#262626 0%,#050505 100%);border:1px solid #080808;border-radius:0 0 6px 6px;justify-content:center;align-items:end;height:100%;padding:0 4px 12px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 4px 8px #00000047,inset 0 -10px 18px #ffffff14}.black-key .computer-key-label{color:#fffdf8;background:#fffdf824;border-color:#fffdf838;box-shadow:inset 0 -2px #0000003d}.black-key.is-active{background:linear-gradient(#45372c 0%,#15100d 100%);box-shadow:inset 0 -10px 18px #ffffff0a,inset 0 12px 20px #cf933938}.black-key.is-incorrect{color:#fff7ef;background:linear-gradient(#8f2f2a 0%,#421310 100%);box-shadow:inset 0 -10px 18px #ffffff0d,inset 0 12px 22px #ff4a3d42}.black-key.is-correct{color:#f3fff2;background:linear-gradient(#28623a 0%,#0d2514 100%);box-shadow:inset 0 -10px 18px #ffffff0d,inset 0 12px 22px #5edf6e42}@media (width<=820px){.app-shell{padding:14px}.app-shell-practice{padding-block:10px 0}.start-screen{justify-content:start;padding-top:0}.start-topbar{margin-bottom:16px;position:static}.stats-screen{justify-content:start}.eyebrow{margin-bottom:8px;font-size:.74rem}h1{font-size:2.35rem;line-height:1}.start-title-row{gap:10px}.level-groups{gap:14px;margin-top:16px}.level-list{gap:8px}.level-button{min-height:46px;padding:9px 12px}.level-button strong{font-size:.94rem;line-height:1.15}.level-button small{display:none}.controls{gap:8px 12px;margin-top:12px}.toggle-control{font-size:.9rem}.practice-notes-control{gap:6px}.stats-level{margin-top:8px;font-size:.92rem}.stats-summary{grid-template-columns:1fr;gap:8px;margin-top:12px}.stats-callout{padding:10px}.stats-callout strong{font-size:1.2rem}.note-stats-list{gap:6px;margin-top:10px}.note-stat-row{min-height:38px;padding:7px 10px}.stats-actions{gap:8px;margin-top:10px}.stats-action-button{min-height:42px;padding-inline:14px;font-size:.92rem}.practice-screen{gap:10px}.practice-topbar{grid-template-columns:1fr;gap:8px 16px;padding-inline:12px}.practice-prompt{grid-area:1/1;gap:10px;padding-block:10px 12px}.practice-lesson{text-align:center;grid-area:2/1;align-items:center;gap:2px;font-size:.84rem}.practice-lesson strong{font-size:.9rem}.practice-lesson span{font-size:.76rem}.prompt-label{text-align:center;width:100%;font-size:.72rem}.practice-mode-badge{align-self:center;min-height:22px;padding-inline:8px;font-size:.68rem}.current-note-slot{font-size:3.6rem}.next-note-value{font-size:1.45rem}.next-note-arrow{font-size:1.55rem}.practice-topbar .score{text-align:right;grid-area:3/1;justify-self:end;font-size:.84rem;line-height:1.24}.keyboard{filter:drop-shadow(0 16px 24px #1f292333);flex-basis:clamp(170px,36vh,280px);min-height:0}.white-keys{border-width:6px}.black-keys{inset:6px 6px auto}}@media (width<=520px){.app-shell{padding:12px}h1{font-size:1.65rem}.start-title-row{align-items:start}.start-title-row h1{flex:auto;min-width:0}.note-stat-row{grid-template-columns:1fr;gap:2px}.note-stat-row small{text-align:left}.stats-actions{flex-direction:column}.stats-action-button{width:100%}.level-groups{gap:12px;margin-top:12px}.level-list{gap:6px}.level-button{min-height:40px;padding:6px 10px}.level-button strong{font-size:.84rem}.level-button>span:last-child{width:22px;height:22px;font-size:.95rem}.practice-navbar{padding-inline:12px}.main-menu-button{height:40px;padding-inline:12px;font-size:.9rem}.midi-navbar-status{max-width:38vw;height:40px;padding-inline:10px;font-size:.82rem}.finish-practice-button{height:40px;padding-inline:12px;font-size:.9rem}.menu-button{width:40px;height:40px}.controls{flex-direction:column;align-items:start}.start-screen>.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;width:100%;display:grid}.start-screen>.controls .toggle-control{gap:6px;min-width:0;font-size:.78rem;line-height:1.1}.toggle-track{border-width:1px;flex:none;width:38px;height:22px}.toggle-thumb{width:14px;height:14px;top:3px;left:3px}.toggle-control input:checked+.toggle-track .toggle-thumb{transform:translate(16px)}.start-screen>.controls .practice-notes-control{grid-column:1/-1}.keyboard{flex-basis:clamp(210px,38vh,300px);min-height:0}.white-key{padding:0 2px 12px}.note-key-label{font-size:.72rem}.computer-key-label{min-width:20px;height:20px;padding-inline:5px;font-size:.68rem}}@media (width<=380px){h1{font-size:1.48rem}.level-button strong{font-size:.78rem}.start-screen>.controls .toggle-control{font-size:.72rem}.current-note-slot{font-size:3.2rem}}