@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/nunito-latin-600-normal-Br8yIETf.woff2) format("woff2"),url(/assets/nunito-latin-600-normal-Cd0eNu1l.woff) format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/nunito-latin-700-normal-Dort48En.woff2) format("woff2"),url(/assets/nunito-latin-700-normal-OcDqTBcA.woff) format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/nunito-latin-800-normal-Dz8SOQK_.woff2) format("woff2"),url(/assets/nunito-latin-800-normal-D-J0wlBY.woff) format("woff")}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fraunces-latin-600-normal-BFCDtZfi.woff2) format("woff2"),url(/assets/fraunces-latin-600-normal-DL5QCzvS.woff) format("woff")}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fraunces-latin-700-normal-CEOla-zY.woff2) format("woff2"),url(/assets/fraunces-latin-700-normal-DTjk5d1Q.woff) format("woff")}:root{--bg: #f4efe6;--paper: #fffaf1;--ink: #2c2418;--muted: #6d6254;--teal: #2f6f6a;--teal-deep: #1f4f4b;--correct: #2f8f5b;--hinted: #d4a017;--wrong: #c44b3c;--line: #e4d8c4;--shadow: 0 12px 32px rgba(44, 36, 24, .08);color:var(--ink);font-family:Nunito,Trebuchet MS,sans-serif;font-size:18px;background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%;height:100dvh;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}button,input{font:inherit}h1,h2,h3{font-family:Fraunces,Georgia,serif;margin:0 0 .35em}p{margin:0 0 .75em;line-height:1.45}.app-shell{height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative;background:var(--bg);color:var(--ink)}.app-shell[data-theme=sky]{--bg: #e7f1f6;--paper: #f7fcff;--ink: #1d2a33;--muted: #5a6d78;--teal: #2a7a86;--teal-deep: #1b5560;--line: #c9dbe3}.app-shell[data-theme=meadow]{--bg: #e8f0e3;--paper: #f7fbf3;--ink: #243024;--muted: #5d6b58;--teal: #3d7a4a;--teal-deep: #295533;--line: #c9d6c0}.app-shell[data-theme=dusk]{--bg: #1e1a24;--paper: #2a2433;--ink: #f3ece2;--muted: #c4b8a8;--teal: #6fb8b2;--teal-deep: #4d8b86;--line: #3d3548;--shadow: 0 12px 32px rgba(0, 0, 0, .28)}.app-shell[data-theme=dusk] .chip.selected,.app-shell[data-theme=dusk] .avatar.selected{background:#3d4f4c}.app-shell[data-theme=dusk] input:not([type=checkbox]){background:#1e1a24;color:var(--ink)}.app-shell[data-theme=dusk] .reward-tile.selected,.app-shell[data-theme=dusk] .white-key{color:#2c2418}.app-shell[data-theme=dusk] .reward-tile.selected{background:#3d4f4c;color:var(--ink)}.page{flex:1;min-height:0;padding:20px 28px 24px;display:flex;flex-direction:column;gap:14px;overflow:auto}.page.narrow{max-width:520px;margin:0 auto;width:100%}.welcome{align-items:flex-start;justify-content:center;max-width:680px;margin:0 auto}.lede{font-size:1.15rem}.welcome-points{margin:0 0 8px 1.1em;color:var(--muted)}.topbar,.lesson-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;gap:10px;align-items:center}.brand span,.eyebrow{display:block;color:var(--muted);font-size:.85rem}.profile-strip,.choice-row,.avatar-row,.row-actions,.row-fields{display:flex;flex-wrap:wrap;gap:8px}.lesson-card,.info-grid article,.pin-card,.settings section{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn{border:0;border-radius:999px;padding:12px 18px;background:#efe6d6;color:var(--ink);cursor:pointer;min-height:48px}.btn.primary{background:var(--teal);color:#fff}.btn.ghost{background:transparent;border:1.5px solid var(--line)}.btn.danger{background:var(--wrong);color:#fff}.btn.xl{min-height:56px;font-size:1.1rem;padding:14px 28px}.btn.tiny{min-height:40px;padding:6px 12px}.btn:disabled{opacity:.55;cursor:not-allowed}.chip,.avatar{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;min-height:44px;padding:8px 14px;cursor:pointer}.avatar{width:52px;border-radius:16px;font-size:1.4rem}.chip.selected,.avatar.selected{border-color:var(--teal);background:#e4f0ee}.muted{color:var(--muted)}.error-text{color:var(--wrong)}.success-text{color:var(--correct)}label{display:flex;flex-direction:column;gap:6px;font-weight:700}input[type=text],input:not([type=checkbox]){border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;min-height:48px}.toggle{flex-direction:row;align-items:center;gap:10px}.legend{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.legend li{display:flex;gap:10px}.swatch{width:18px;height:18px;border-radius:50%;margin-top:4px;flex:0 0 18px}.legend p{margin:0;color:var(--muted);font-size:.92rem}.pin-overlay{position:fixed;inset:0;background:#2c241859;display:grid;place-items:center;padding:20px;z-index:20}.pin-card{width:min(420px,100%);text-align:center}.pin-dots{display:flex;justify-content:center;gap:12px;margin:12px 0 16px}.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--teal)}.pin-dots span.filled{background:var(--teal)}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.pin-key{min-height:56px;border:0;border-radius:16px;background:#efe6d6;cursor:pointer}.lesson{padding-bottom:12px}.lesson-stage{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:center;flex:1;min-height:0}.staff-wrap{background:var(--paper);border-radius:20px;border:1px solid var(--line);padding:8px 12px;height:100%;display:grid;place-items:center}.staff-wrap svg{width:100%;max-height:220px}.finger-svg,.staff-name{font-family:Nunito,sans-serif;font-weight:800;fill:var(--teal)}.finger-svg{font-size:16px}.staff-name{font-size:18px}.prompt{text-align:left}.prompt h2{font-size:3.2rem;line-height:.95}.prompt-kicker{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.8rem;margin-bottom:0}.banner{border-radius:14px;padding:10px 12px;font-weight:700}.banner.idle{background:#efe6d6}.banner.correct{background:#d7f0e2;color:var(--correct)}.banner.hinted{background:#f8e7b0;color:#8a6a08}.banner.wrong{background:#f7d6d1;color:var(--wrong)}.status-line{font-size:.85rem;color:var(--muted)}.listen-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.listen-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:#efe6d6;font-size:.85rem}.listen-pill strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.listen-dot{width:8px;height:8px;border-radius:50%;background:#b2a48f;flex:0 0 8px}.listen-pill.is-starting .listen-dot,.listen-pill.is-calibrating .listen-dot{background:var(--hinted)}.listen-pill.is-listening .listen-dot{background:var(--teal)}.listen-pill.is-detected{background:#d7f0e2}.listen-pill.is-detected .listen-dot{background:var(--correct)}.listen-pill.is-error{background:#f7d6d1}.listen-pill.is-error .listen-dot{background:var(--wrong)}.keyboard{position:relative;height:28vh;min-height:150px;max-height:220px;background:#1f1a14;border-radius:18px;padding:10px 10px 8px}.white-row{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height:100%}.white-key{border:0;border-radius:0 0 12px 12px;background:#fffdf8;position:relative;cursor:pointer}.white-key.tone-hint,.white-key[data-hint=true]{box-shadow:inset 0 0 0 5px #2f6f6a;background:#c8efe9;animation:hint-pulse 1.15s ease-in-out infinite}.hint-flag{position:absolute;top:10px;left:50%;transform:translate(-50%);background:var(--teal);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:3px 7px;white-space:nowrap}@keyframes hint-pulse{0%,to{background:#c8efe9}50%{background:#8ed9d0}}.white-key.tone-correct{background:#b7e7c8}.white-key.tone-correct-after-hint{background:#f3d56a}.white-key.tone-wrong{background:#f0b2aa}.key-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:800;color:var(--muted)}.black-row{position:absolute;inset:10px 10px 38%;pointer-events:none}.black-key{pointer-events:auto;position:absolute;width:7.75%;height:100%;border:0;border-radius:0 0 8px 8px;background:#2b241c;cursor:pointer}.black-key.tone-wrong{background:var(--wrong)}.lesson-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.stage-pips{display:flex;gap:8px}.stage-pips span{width:10px;height:10px;border-radius:50%;background:#d7cbb6}.stage-pips span.on{background:var(--teal)}.stage-pips span.done{background:var(--correct)}.stage-blurb{margin:0;color:var(--muted)}.session-chip{position:absolute;top:10px;left:50%;transform:translate(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem;z-index:5}.kid-list{list-style:none;padding:0;margin:0 0 10px}.kid-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}.kid-list .muted{margin-bottom:4px}.page.done{justify-content:center;align-items:flex-start}.rest-svg{font-size:42px;fill:var(--ink)}.mic-retry{margin-top:8px;padding:10px 12px;border-radius:14px;background:#f7d6d1}.mic-retry p{margin:0 0 8px;color:var(--wrong);font-size:.92rem}.kid-passport,.course-path,.reward-shelf,.continue-card,.celebrate-card,.song-library-preview,.library-intro,.library-legal{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow)}.kid-passport{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}.passport-face{position:relative;width:88px;height:88px;border-radius:24px;background:#efe6d6;display:grid;place-items:center;font-size:2.4rem}.passport-sticker,.passport-badge{position:absolute;font-size:1.2rem}.passport-sticker{top:-8px;left:-8px}.passport-badge{right:-8px;bottom:-8px}.xp-bar{height:12px;border-radius:999px;background:#efe6d6;overflow:hidden;margin:8px 0 6px}.xp-bar span{display:block;height:100%;background:var(--teal);border-radius:inherit}.course-path ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}.path-step{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}.path-step:last-child{border-bottom:0}.path-node{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#efe6d6}.path-step.open .path-node{background:#d7f0e2;color:var(--correct)}.path-step.locked{opacity:.72}.path-copy h3{margin-bottom:.15em}.path-copy p{margin-bottom:.4em}.star-row{display:flex;gap:6px;font-size:2rem;color:#d7cbb6;margin:8px 0}.star-row.tiny{font-size:1.2rem;margin:0 0 8px}.star-row .lit{color:var(--hinted)}.reward-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.reward-tile{border:1.5px solid var(--line);background:var(--paper);border-radius:16px;min-height:92px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--ink)}.reward-tile span{font-size:1.4rem}.reward-tile small{color:var(--muted);font-size:.75rem}.reward-tile.selected{border-color:var(--teal);background:#e4f0ee}.reward-tile.locked{opacity:.55;cursor:not-allowed}.preview-songs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}.song-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.song-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}.song-card.locked{opacity:.82}.song-composer{font-weight:700;color:var(--muted);margin-bottom:.4em}.song-license,.song-license-line{font-size:.85rem}.song-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}.library-legal h2{margin-bottom:.4em}.celebrate-card{animation:celebrate-pop .55s ease-out;max-width:560px}@keyframes celebrate-pop{0%{transform:scale(.86);opacity:0}55%{transform:scale(1.04);opacity:1}to{transform:scale(1)}}@media(max-width:900px){.info-grid,.lesson-stage,.kid-passport,.song-card{grid-template-columns:1fr}.reward-grid{grid-template-columns:repeat(2,1fr)}.prompt h2{font-size:2.4rem}.page{padding:16px}}