:root{--bg:#fff7e6;--ink:#2b2350;--purple:#7b4dff;--pink:#ff5c8a;--yellow:#ffc933;--green:#2ecc8f;--blue:#3aa7ff;--white-key:#fff;--black-key:#2b2350;--radius:20px;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--ink);font-family:var(--font);margin:0;font-size:20px}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--purple);color:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;display:flex}.indicator{align-items:center;gap:10px;font-weight:700;display:flex}.dot{background:var(--yellow);border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 3px #ffffff59}.indicator[data-connected=true] .dot{background:var(--green)}.header-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.instrument-select,.chip{font:inherit;color:var(--ink);cursor:pointer;background:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:700}.chip:hover,.instrument-select:hover{background:var(--yellow)}.loading{background:#ffffff40;border-radius:999px;padding:6px 12px;font-weight:700}.loading[data-status=loading]:before{content:"⏳ "}.loading[hidden]{display:none}.app-main{flex-direction:column;flex:1;align-items:center;gap:24px;width:100%;max-width:1000px;margin:0 auto;padding:28px 24px 40px;display:flex}.start-panel{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.start-button{font:inherit;color:#fff;background:var(--pink);border-radius:var(--radius);cursor:pointer;border:0;padding:22px 56px;font-size:2rem;font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 8px #c93a65}.start-button:hover{transform:translateY(-2px)}.start-button:active{transform:translateY(6px);box-shadow:0 2px #c93a65}.start-button:disabled{opacity:.7;cursor:progress}.start-button[hidden]{display:none}.message{border-radius:var(--radius);text-align:center;max-width:720px;margin:0;padding:14px 20px;line-height:1.4}.message-help{border:3px solid var(--blue);background:#e4f3ff}.message-warning{border:3px solid var(--yellow);background:#fff0c2;font-weight:700}.message[hidden]{display:none}.last-note{text-align:center}.last-note-caption{opacity:.7;font-weight:700}.last-note-name{color:var(--purple);min-height:1.2em;font-size:5rem;font-weight:900}.last-note-name.pop{animation:.25s ease-out pop}@keyframes pop{0%{transform:scale(.6)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.last-note-name.pop{animation:none}.start-button{transition:none}}.keyboard-stage{border-radius:var(--radius);background:#fff;width:100%;padding:6px 12px 10px;box-shadow:0 6px #e9e1ff}.piano-keyboard{-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:132px;position:relative}.white-layer,.black-layer{position:absolute;inset:0}.black-layer{pointer-events:none;height:62%;bottom:auto}.key{font:inherit;cursor:pointer;border:0;padding:0}.key-white{background:var(--white-key);color:var(--ink);border:1px solid #d9d0f0;border-top:0;border-radius:0 0 12px 12px;justify-content:center;align-items:flex-end;padding-bottom:10px;font-weight:800;display:flex;position:absolute;top:0;bottom:0;box-shadow:inset -2px 0 #e4dcf5,inset 0 -5px #e9e1ff}.key-black{pointer-events:auto;background:var(--black-key);border-radius:0 0 8px 8px;height:100%;position:absolute;top:0;box-shadow:inset 0 -6px #4a3f7a}.key-white.is-target{box-shadow:inset 0 0 0 4px var(--purple);background:#efe8ff}.key-black.is-target{background:var(--purple);box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--purple)}.key-white.is-solved{box-shadow:inset 0 0 0 4px var(--green);background:#dcf8ec}.key-black.is-solved{background:var(--green);box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--green)}.key-white.is-down{background:var(--yellow);box-shadow:inset 0 3px #c9a21d}.key-black.is-down{background:var(--pink)}.key-white.is-down.is-target{box-shadow:inset 0 0 0 4px var(--purple), inset 0 3px 0 #c9a21d}.key-white.is-down.is-solved{box-shadow:inset 0 0 0 4px var(--green), inset 0 3px 0 #c9a21d}.key-black.is-down.is-target{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--purple)}.key-black.is-down.is-solved{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--green)}.keys-host{position:absolute;inset:0}.octave-notice{z-index:2;border-radius:var(--radius);border:4px solid var(--yellow);text-align:center;background:#fff0c2;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;padding:12px 18px;font-size:1.15rem;font-weight:800;display:flex;position:absolute;inset:auto 10% calc(100% + 6px);box-shadow:0 6px #e3b52a}.octave-notice[hidden]{display:none}.octave-reset{font:inherit;color:#fff;background:var(--purple);cursor:pointer;border:0;border-radius:999px;padding:10px 22px;font-weight:800;box-shadow:0 4px #5a35c4}.octave-reset:focus-visible,.key:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.key-label{pointer-events:none;font-size:.9rem}.hide-labels .key-label{visibility:hidden}.middle-c-mark{background:var(--pink);pointer-events:none;border-radius:50%;width:14px;height:14px;margin-left:-7px;position:absolute;top:70%;left:50%}.hand-lane{width:100%;height:112px;position:relative}.hand{flex-direction:column;transition:left .5s cubic-bezier(.3,1.3,.5,1),width .5s;display:flex;position:absolute;top:0;bottom:0}.hand[hidden]{display:none}.hand-palm{color:#8a4b2a;white-space:nowrap;background:#ffd8b5;border-radius:24px 24px 12px 12px;justify-content:center;align-items:center;height:36px;margin:0 6%;font-size:.85rem;font-weight:800;display:flex;overflow:hidden}.hand-fingers{flex:1;display:flex}.finger{flex-direction:column;flex:1 1 0;align-items:center;min-width:0;display:flex}.finger-stem{background:#ffd8b5;border-radius:0 0 14px 14px;width:52%;height:40px;margin-top:-2px}.finger[data-finger="1"] .finger-stem{height:16px}.finger[data-finger="3"] .finger-stem{height:44px}.finger[data-finger="5"] .finger-stem{height:30px}.finger-dot{color:#8a4b2a;background:#fff;border:3px solid #e7a777;border-radius:50%;place-items:center;width:34px;height:34px;margin-top:-14px;font-size:1.1rem;font-weight:900;display:grid}.finger.is-active .finger-stem{background:#ffc08f}.finger.is-active .finger-dot{background:var(--purple);color:#fff;border-color:#fff;width:50px;height:50px;margin-top:-18px;font-size:1.7rem;animation:1.4s ease-in-out infinite finger-pulse;box-shadow:0 0 0 5px #7b4dff59}.finger.is-solved .finger-dot{background:var(--green);box-shadow:0 0 0 5px #2ecc8f59}@keyframes finger-pulse{50%{transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.hand{transition:none}.finger.is-active .finger-dot{animation:none}}.staff-demo{flex-direction:column;align-items:center;gap:14px;width:100%;display:flex}.clef-choice{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}.clef-button{font:inherit;color:var(--ink);border-radius:var(--radius);cursor:pointer;background:#fff;border:4px solid #0000;align-items:center;gap:10px;padding:10px 26px;font-size:1.4rem;font-weight:800;display:flex;box-shadow:0 6px #cfc6e8}.clef-button:hover{background:#fff3c9}.clef-button[aria-pressed=true]{border-color:var(--purple);background:#efe8ff}.clef-icon{font-size:2.6rem;line-height:1}.names-help{box-shadow:0 4px #cfc6e8}.names-help[aria-pressed=true]{background:#e4f3ff}.clef-button:focus-visible,.names-help:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.staff-box{border-radius:var(--radius);background:#fff;width:100%;min-height:200px;padding:8px 0;box-shadow:0 6px #e9e1ff}.staff-host,.staff-svg{width:100%;display:block}.staff-svg .staff-name{font-family:var(--font);font-weight:800}.staff-svg .staff-name.is-current{font-weight:900}.staff-svg g.is-current{filter:drop-shadow(0 0 3px #7b4dff8c)}@media (width<=700px){.key-label{font-size:.7rem}.last-note-name{font-size:3.5rem}.clef-button{padding:8px 16px;font-size:1.1rem}.clef-icon{font-size:2rem}}.staff-error{text-align:center;margin:0;padding:24px;font-weight:700}.staff-frame{width:100%;position:relative}.bravo{color:#fff;background:var(--green);pointer-events:none;border-radius:999px;margin:0;padding:6px 18px;font-size:1.8rem;font-weight:900;animation:.3s ease-out pop;position:absolute;top:14px;right:18px}.bravo:empty{display:none}.staff-demo.is-solved .staff-box{box-shadow:0 0 0 5px var(--green), 0 6px 0 #9ee6c8}.next-button{font:inherit;color:#fff;background:var(--blue);border-radius:var(--radius);cursor:pointer;border:0;padding:12px 26px;font-size:1.3rem;font-weight:800;box-shadow:0 6px #1f7fcf}.next-button:hover{transform:translateY(-2px)}.next-button:active{transform:translateY(4px);box-shadow:0 2px #1f7fcf}.next-button.is-ready{background:var(--green);animation:.3s ease-out pop;box-shadow:0 6px #17a673}.next-button:focus-visible{outline:4px solid var(--purple);outline-offset:3px}@media (prefers-reduced-motion:reduce){.bravo,.next-button.is-ready{animation:none}}@media (width>=1200px){.app-main{grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:12px 24px;max-width:1240px;padding-top:10px;padding-bottom:10px;display:grid}.app-main>.start-panel{grid-area:1/2}.app-main>.game-screen{grid-area:1/1}.app-main>.keyboard-stage{grid-column:1/-1}.start-button{padding:18px 28px;font-size:1.6rem}.last-note-name{font-size:4rem}.staff-demo{gap:10px}.clef-button{padding:6px 20px}.clef-icon{font-size:2.2rem}}@media (width<=700px){.hand-palm{font-size:.65rem}.finger-dot{width:24px;height:24px;font-size:.8rem}.finger.is-active .finger-dot{width:38px;height:38px;font-size:1.2rem}.next-button{padding:8px 16px;font-size:1.1rem}}.game-screen{flex-direction:column;gap:10px;width:100%;display:flex}.game-screen[hidden],.game-screen [hidden]{display:none}.round-hud{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;display:flex}.round-prompt{color:var(--purple);min-width:11ch;margin:0;font-size:1.6rem;font-weight:900}.round-progress{gap:8px;margin:0;padding:0;list-style:none;display:flex}.dot-step{background:#e4dcf5;border:3px solid #0000;border-radius:50%;width:26px;height:26px;transition:background .2s,transform .2s}.dot-step[data-state=clean]{background:var(--green)}.dot-step[data-state=helped]{background:var(--yellow)}.dot-step[data-state=current]{border-color:var(--purple);background:#fff;transform:scale(1.2)}.streak{opacity:.45;align-items:center;gap:6px;font-size:1.7rem;font-weight:900;display:flex}.streak[data-active=true]{opacity:1;color:#e8590c}.streak.bump{animation:.3s ease-out pop}.hint-button{font:inherit;color:var(--ink);background:var(--yellow);cursor:pointer;border:0;border-radius:999px;padding:10px 22px;font-size:1.2rem;font-weight:800;box-shadow:0 4px #c9a21d}.hint-button:disabled{opacity:.45;cursor:default;box-shadow:none}.hint-button:focus-visible,.play-button:focus-visible,.octave-free:focus-visible,.chip:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.game-screen .staff-frame{position:relative}.game-screen.is-solved .staff-box{box-shadow:0 0 0 5px var(--green), 0 6px 0 #9ee6c8}.burst-host{pointer-events:none;width:0;height:0;position:absolute;top:50%;left:50%}.burst-star{opacity:0;font-size:2.2rem;animation:.9s ease-out forwards burst;position:absolute;top:-.5em;left:-.5em}@keyframes burst{0%{opacity:1;transform:translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) scale(.4)}70%{opacity:1}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(1.3) rotate(40deg)}}.octave-notice.octave-alert{z-index:3;inset:auto 8% 8px}.start-card,.round-result{border-radius:var(--radius);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:250px;padding:14px 18px;display:flex;box-shadow:0 6px #e9e1ff}.round-setup{flex-direction:column;align-items:center;gap:14px;display:flex}.octave-free{font-size:1.1rem;box-shadow:0 4px #cfc6e8}.octave-free[aria-pressed=true]{background:#dcf8ec}.play-button{font:inherit;color:#fff;background:var(--green);border-radius:var(--radius);cursor:pointer;border:0;padding:14px 54px;font-size:2rem;font-weight:900;transition:transform .1s,box-shadow .1s;box-shadow:0 8px #17a673}.play-button:hover{transform:translateY(-2px)}.play-button:active{transform:translateY(6px);box-shadow:0 2px #17a673}.result-title{color:var(--purple);margin:0;font-size:2rem;font-weight:900}.result-stars{gap:10px;font-size:3.6rem;line-height:1;display:flex}.result-star{filter:grayscale()opacity(.25)}.result-star.is-won{filter:none;animation:.5s ease-out backwards pop}.result-star.is-won:nth-child(2){animation-delay:.15s}.result-star.is-won:nth-child(3){animation-delay:.3s}.result-stats{gap:36px;font-size:1.7rem;font-weight:900;display:flex}.result-stat{align-items:center;display:flex}@media (width>=1200px){.game-screen{gap:8px}.start-card,.round-result{gap:10px;min-height:310px;padding:8px 18px}.round-result .result-title{font-size:1.6rem}.result-stars{font-size:2.8rem}.result-stats{font-size:1.4rem}}@media (prefers-reduced-motion:reduce){.burst-star,.result-star.is-won,.streak.bump,.dot-step{transition:none;animation:none}.play-button{transition:none}}.game-screen .staff-box{height:310px;min-height:0;padding:0;overflow:hidden}.game-screen .staff-host,.game-screen .staff-svg{height:100%}.mode-tabs{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mode-tab{font:inherit;color:#fff;cursor:pointer;background:#ffffff29;border:3px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:8px 20px;font-size:1.15rem;font-weight:900;display:flex}.mode-tab:hover{background:#ffffff4d}.mode-tab[aria-selected=true]{color:var(--purple);border-color:var(--yellow);background:#fff;box-shadow:0 4px #5a35c4}.mode-tab-icon{font-size:1.4rem;line-height:1}.mode-tab:focus-visible{outline:4px solid var(--yellow);outline-offset:2px}.mode-screen[hidden],.keyboard-stage[hidden],.mode-screen [hidden]{display:none}.mode-screen{grid-template-columns:230px minmax(0,1fr);gap:12px;width:100%;height:352px;display:grid}.mode-screen>.sequence-result{grid-area:1/2}.finger.is-played .finger-stem{background:#ffb36b}.finger.is-played .finger-dot{color:#fff;background:#ff8a3d;border-color:#fff;width:50px;height:50px;margin-top:-18px;font-size:1.7rem;animation:.25s ease-out pop;box-shadow:0 0 0 5px #ff8a3d59}.finger.is-active.is-played .finger-dot{background:var(--green);box-shadow:0 0 0 5px #2ecc8f59}.exercise-picker,.song-picker{border-radius:var(--radius);background:#fff;flex-direction:column;gap:10px;padding:10px 12px;display:flex;overflow:hidden;box-shadow:0 6px #e9e1ff}.exercise-picker{gap:6px}.exercise-group-title{margin:0 0 4px;font-size:.95rem;font-weight:900}.exercise-row{grid-template-columns:repeat(2,1fr);gap:4px;display:grid}.exercise-button{font:inherit;color:var(--ink);cursor:pointer;white-space:nowrap;background:#f3efff;border:3px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:4px;height:32px;font-size:1.05rem;font-weight:900;line-height:1;display:flex;position:relative}.exercise-button.is-long{grid-column:span 2}.exercise-button:hover{background:#fff3c9}.exercise-button[aria-pressed=true]{border-color:var(--purple);background:#efe8ff;box-shadow:0 3px #cfc6e8}.exercise-stars{color:#e8a400;font-size:.7rem}.exercise-stars:empty{display:none}.song-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.song-button{text-align:left;width:100%;font:inherit;color:var(--ink);cursor:pointer;background:#f3efff;border:3px solid #0000;border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:6px 10px;font-size:1rem;font-weight:800;display:grid}.song-button:hover{background:#fff3c9}.song-button[aria-pressed=true]{border-color:var(--purple);background:#efe8ff}.song-icon{grid-row:1/3;font-size:1.6rem}.song-stars{color:#e8a400;min-height:.9em;font-size:.75rem}.exercise-button:focus-visible,.song-button:focus-visible,.listen-button:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.finger-card{border-radius:var(--radius);background:#fff;flex-direction:column;grid-area:1/2;justify-content:center;align-items:center;gap:8px;padding:10px;display:flex;box-shadow:0 6px #e9e1ff}.exercise-title{opacity:.7;margin:0;font-size:1.2rem;font-weight:900}.finger-big{background:var(--purple);color:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:150px;height:150px;display:flex;box-shadow:0 8px #5a35c4}.finger-caption{opacity:.85;margin-bottom:-10px;font-size:1rem;font-weight:800}.finger-number{font-size:6rem;font-weight:900;line-height:1}.finger-number.pop{animation:.3s ease-out pop}.finger-hand{margin:0;font-weight:800}.step-strip{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.step-chip{width:40px;height:40px;color:var(--ink);background:#e4dcf5;border-radius:50%;place-items:center;font-size:1.2rem;font-weight:900;transition:background .2s,transform .2s;display:grid}.step-chip[data-state=done]{background:var(--green);color:#fff}.step-chip[data-state=current]{box-shadow:inset 0 0 0 4px var(--purple);color:var(--purple);background:#fff;transform:scale(1.2)}.sequence-prompt{color:var(--purple);text-align:center;min-height:1.3em;margin:0;font-size:1.5rem;font-weight:900}.mode-screen[data-message=outOfPosition] .sequence-prompt,.song-screen.has-message .sequence-prompt{color:#e8590c}.mode-screen[data-message=outOfPosition] .sequence-prompt{border:4px solid var(--yellow);border-radius:var(--radius);background:#fff0c2;padding:4px 18px;animation:.25s ease-out pop}.song-play{flex-direction:column;grid-area:1/2;gap:6px;min-height:0;display:flex}.song-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.song-toolbar .sequence-prompt{flex:1;font-size:1.3rem}.listen-button{font:inherit;color:#fff;background:var(--blue);cursor:pointer;border:0;border-radius:999px;padding:10px 22px;font-size:1.25rem;font-weight:900;box-shadow:0 4px #1f7fcf}.listen-button[aria-pressed=true]{background:var(--pink);box-shadow:0 4px #c93a65}.restart-button{box-shadow:0 4px #cfc6e8}.phrase-indicator{font-size:1.1rem;font-weight:900}.song-progress{background:#e4dcf5;border-radius:999px;height:10px;overflow:hidden}.song-progress-bar{background:var(--green);width:0;height:100%;transition:width .2s;display:block}.song-screen .staff-box{flex:1;min-height:0;padding:0;overflow:hidden}.song-screen .staff-host,.song-screen .staff-svg{height:100%}.staff-svg .staff-finger{font-family:var(--font);font-weight:900}.sequence-result{border-radius:var(--radius);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:14px 18px;display:flex;box-shadow:0 6px #e9e1ff}.sequence-result .result-stats{margin:0}.result-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.again-button{font-size:1.2rem;box-shadow:0 4px #cfc6e8}.next-step{padding:12px 34px;font-size:1.6rem}@media (width>=1200px){.app-main>.mode-screen{grid-area:1/1}}@media (width<=900px){.mode-screen{grid-template-columns:minmax(0,1fr);height:auto}.mode-screen>*{grid-area:auto/1!important}.song-screen .staff-box{flex:none;height:260px}}@media (prefers-reduced-motion:reduce){.finger-number.pop,.finger.is-played .finger-dot,.step-chip,.song-progress-bar{transition:none;animation:none}}.last-note[hidden]{display:none}.key-finger-badge{z-index:3;pointer-events:none;color:#fff;background:#ff8a3d;border-radius:50%;place-items:center;width:34px;height:34px;font-size:1.2rem;font-weight:900;animation:.25s ease-out pop;display:grid;position:absolute;top:4px;left:50%;transform:translate(-50%);box-shadow:0 0 0 4px #ff8a3d59}.key-black .key-finger-badge{width:28px;height:28px;font-size:1rem}@media (prefers-reduced-motion:reduce){.key-finger-badge{animation:none}}