@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{color-scheme:dark;--bg: #0e1430;--paper: #1a2348;--ink: #f6f0e4;--muted: #d4c8e6;--gold: #f0c85a;--gold-deep: #e0b03a;--teal: #7ee0d4;--teal-deep: #146863;--line: rgba(240, 200, 90, .32);--shadow: 0 12px 32px rgba(4, 6, 16, .35);--overlay: rgba(6, 8, 18, .72);--correct: #8ed98a;--hinted: #f0c85a;--wrong: #f0b4aa;--correct-bg: #163528;--hint-bg: #3a3014;--wrong-bg: #3a2422;--idle-bg: #243056;--chip: #243056;--chip-selected: #1e3f44;--input-bg: #0c1228;--primary: #e8b84a;--primary-text: #2a2208;--danger: #9a4e48;--danger-text: #fff8f6;--staff-bg: #1b2448;--staff-ink: #f7f1e4;--staff-line: #f7f1e4;--staff-muted: #c4b8a8;--staff-track: rgba(247, 241, 228, .28);--staff-playhead: #f0c85a;--key-white: #f7f3ea;--key-ink: #2a241c;--key-black: #16131c;--key-frame: #5c6a88;--logo-bg: #1a2348;--star-dim: #b4a8d0;--node: #141a36;--reward-selected: #2a2410;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;background:var(--bg)}button,input{font:inherit;color:inherit}h1,h2,h3{font-family:Fraunces,Georgia,serif;margin:0 0 .35em}p{margin:0 0 .75em;line-height:1.45}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}::selection{background:#f0c85a59;color:var(--ink)}.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;isolation:isolate;z-index:0;background:transparent;color:var(--ink)}.app-shell:before,.app-shell:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}.app-shell:before{background-color:var(--bg);background-image:radial-gradient(1.2px 1.2px at 8% 16%,rgba(247,241,228,.5),transparent),radial-gradient(1px 1px at 22% 40%,rgba(247,241,228,.22),transparent),radial-gradient(1.5px 1.5px at 34% 12%,rgba(240,200,90,.4),transparent),radial-gradient(1px 1px at 47% 68%,rgba(247,241,228,.2),transparent),radial-gradient(1px 1px at 61% 24%,rgba(247,241,228,.28),transparent),radial-gradient(1.6px 1.6px at 73% 56%,rgba(247,241,228,.34),transparent),radial-gradient(1px 1px at 84% 18%,rgba(240,200,90,.32),transparent),radial-gradient(1px 1px at 93% 76%,rgba(247,241,228,.22),transparent),radial-gradient(1.2px 1.2px at 15% 84%,rgba(247,241,228,.26),transparent),radial-gradient(1px 1px at 54% 46%,rgba(247,241,228,.16),transparent),radial-gradient(ellipse 70% 46% at 10% 0%,rgba(96,74,160,.18),transparent 60%),radial-gradient(ellipse 42% 32% at 100% 100%,rgba(40,130,140,.12),transparent 55%),radial-gradient(ellipse 32% 26% at 0% 100%,rgba(212,168,74,.08),transparent 52%);background-repeat:no-repeat}.app-shell:after{background-image:radial-gradient(1.4px 1.4px at 18% 22%,rgba(247,241,228,.7),transparent),radial-gradient(1.2px 1.2px at 68% 14%,rgba(240,200,90,.65),transparent),radial-gradient(1px 1px at 88% 48%,rgba(247,241,228,.55),transparent),radial-gradient(1.3px 1.3px at 40% 78%,rgba(247,241,228,.5),transparent);background-repeat:no-repeat;animation:night-twinkle 8s ease-in-out infinite}@keyframes night-twinkle{0%,to{opacity:.35}50%{opacity:.9}}.app-shell[data-theme=sky]{--bg: #0c1c2e;--paper: #143044;--gold: #f2d48a;--teal: #8ef3ea;--teal-deep: #0e6e68;--line: rgba(142, 243, 234, .34);--chip: #1a3c4e;--chip-selected: #1a4a52;--input-bg: #0a1624;--logo-bg: #143044;--idle-bg: #1a3c4e;--node: #102433}.app-shell[data-theme=meadow]{--bg: #0e1c18;--paper: #163028;--muted: #d5e6dc;--gold: #e8d48a;--teal: #9ee8c0;--teal-deep: #1d6b4a;--line: rgba(158, 232, 192, .34);--chip: #1c3a32;--chip-selected: #1e4a3e;--input-bg: #0c1614;--logo-bg: #163028;--idle-bg: #1c3a32;--node: #10241e;--star-dim: #b7d2c4}.app-shell[data-theme=dusk]{--bg: #160e22;--paper: #261838;--muted: #e4d6f4;--gold: #f0c878;--teal: #e0c4f8;--teal-deep: #6d4d92;--line: rgba(224, 196, 248, .36);--chip: #321e48;--chip-selected: #3a2858;--input-bg: #120c1c;--logo-bg: #261838;--idle-bg: #321e48;--node: #1c1228;--reward-selected: #2e2410;--star-dim: #cbb6e4}.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}.lesson-bar{flex-wrap:wrap;align-items:center}.lesson-title{min-width:0;flex:1 1 12rem}.lesson-tools{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px;flex:0 1 auto}.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:var(--chip);color:var(--ink);cursor:pointer;min-height:48px}.btn.primary{background:linear-gradient(180deg,#f3d078 0%,var(--gold-deep) 100%);color:var(--primary-text);box-shadow:0 8px 22px #e0b03a38}.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}.btn.danger{background:var(--danger);color:var(--danger-text)}.btn.xl{min-height:56px;font-size:1.1rem;padding:14px 28px}.btn.tiny{min-height:40px;padding:6px 12px}.btn:disabled{opacity:1;cursor:not-allowed;background:var(--node);color:var(--muted);box-shadow:none}.chip,.avatar{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);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:var(--chip-selected);color:var(--ink)}.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:var(--input-bg);color:var(--ink);min-height:48px}input[type=checkbox]{accent-color:var(--gold)}.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;box-shadow:0 0 8px #f7f1e433}.legend p{margin:0;color:var(--muted);font-size:.92rem}.pin-overlay{position:fixed;inset:0;background:var(--overlay);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(--gold)}.pin-dots span.filled{background:var(--gold)}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.pin-key{min-height:56px;border:1px solid var(--line);border-radius:16px;background:var(--chip);color:var(--ink);font-weight:800;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(--staff-bg);border-radius:20px;border:1px solid var(--line);box-shadow:0 0 24px #f0c85a14;padding:8px 12px;height:100%;display:grid;place-items:center}.staff-wrap svg{width:100%;max-height:220px}.grand-staff{display:grid;gap:6px;width:100%;min-height:0}.hand-label{margin:0 0 2px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}.grand-staff .staff-wrap{height:auto;padding:2px 8px}.grand-staff .staff-wrap svg{max-height:108px}.staff-line{stroke:var(--staff-line);stroke-width:1.7px}.clef-stroke{fill:none;stroke:var(--staff-line);stroke-linecap:round;stroke-linejoin:round}.clef-stroke path{stroke-width:3.1px}.clef-dot,.bass-clef{fill:var(--staff-line)}.clef-dot{stroke:none}.staff-playhead{stroke:var(--staff-playhead)}.hold-track{fill:var(--staff-track)}.finger-svg,.staff-name{font-family:Nunito,sans-serif;font-weight:800}.finger-svg,.scroll-finger{fill:var(--gold)}.staff-name,.now-label{fill:var(--staff-ink)}.finger-svg{font-size:16px}.staff-name{font-size:18px}.prompt{text-align:left}.prompt h2{font-size:3.2rem;line-height:.95}.prompt h2.together-title{font-size:1.7rem;line-height:1.15}.dynamic-cue{margin:4px 0 8px;font-size:2rem;font-weight:800;line-height:1}.dynamic-cue[data-dynamic=soft]{color:var(--teal)}.dynamic-cue[data-dynamic=loud]{color:var(--ink)}.dynamic-choice{display:flex;gap:8px;margin-top:8px}.dynamic-choice button[aria-pressed=true]{outline:3px solid var(--teal);background:var(--chip-selected);color:var(--ink)}.beat-cue{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:1.35rem;font-weight:800}.beat-pulse{width:14px;height:14px;border-radius:50%;background:#f7f1e447;flex:0 0 14px}.beat-pulse.on{background:var(--teal);box-shadow:0 0 8px #7ee0d4a6}.mode-toggle{display:flex;gap:6px}.mode-toggle .chip{min-height:40px;padding:6px 12px}.scroll-staff{background:var(--staff-bg);border-radius:20px;border:1px solid var(--line);box-shadow:0 0 24px #f0c85a14;padding:4px 8px 0;overflow:hidden;width:100%}.scroll-staff svg{width:100%;height:auto;display:block;max-height:250px}.scroll-staff[data-clef=grand] svg{max-height:320px}.scroll-finger{font-size:13px}.now-label{font-family:Nunito,sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em}.timed-cue{background:var(--idle-bg);color:var(--ink)}.timed-cue[data-cue=on-time]{background:var(--correct-bg);color:var(--correct)}.timed-cue[data-cue=early],.timed-cue[data-cue=late]{background:var(--hint-bg);color:var(--hinted)}.prompt.timed h2{font-size:1.8rem}.white-key[data-upcoming=true]:before,.black-key[data-upcoming=true]:before{content:"";position:absolute;top:8px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%}.white-key[data-upcoming=true]:before{background:#0e6b66}.black-key[data-upcoming=true]:before{background:var(--gold)}.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:var(--idle-bg);color:var(--ink)}.banner.correct{background:var(--correct-bg);color:var(--correct)}.banner.hinted{background:var(--hint-bg);color:var(--hinted)}.banner.wrong{background:var(--wrong-bg);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:var(--idle-bg);color:var(--ink);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:#8d84a0;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,.listen-pill.is-connected .listen-dot{background:var(--teal)}.listen-pill.is-connected,.listen-pill.is-detected{background:var(--correct-bg);color:var(--correct)}.listen-pill.is-detected .listen-dot{background:var(--correct)}.listen-pill.is-error{background:var(--wrong-bg);color:var(--wrong)}.listen-pill.is-error .listen-dot{background:var(--wrong)}.keyboard{position:relative;height:28vh;min-height:150px;max-height:220px;background:var(--key-frame);border-radius:18px;padding:10px 10px 8px;box-shadow:inset 0 0 0 1px #f0c85a66,0 12px 28px #00000047}.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:var(--key-white);color:var(--key-ink);position:relative;cursor:pointer;touch-action:none;-webkit-touch-callout:none;box-shadow:inset 0 -10px 14px #2a20120f}.white-key.tone-hint,.white-key[data-hint=true]{box-shadow:inset 0 0 0 5px var(--teal-deep);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:#062421;font-size:.68rem;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:3px 7px;white-space:nowrap}@keyframes hint-pulse{0%,to{background:#d7f7f3}50%{background:#b7efe8}}.white-key.tone-correct{background:#d9f6e4;box-shadow:inset 0 0 0 4px #2f8f5b,0 0 16px #8ed98a8c}.white-key.tone-correct-after-hint{background:#f8e7b4;box-shadow:inset 0 0 0 4px #c4920a,0 0 16px #f0c85a80}.white-key.tone-wrong{background:#f6e0db;box-shadow:inset 0 0 0 4px #c4847c}.key-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:800;color:var(--key-ink)}.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:linear-gradient(180deg,#4a4556 0%,var(--key-black) 28%);box-shadow:0 0 0 2px #f3eee6;cursor:pointer;touch-action:none;-webkit-touch-callout:none}.black-key.tone-correct{box-shadow:0 0 0 2px #f3eee6,inset 0 0 0 3px #8ed98a,0 0 12px #8ed98a73}.black-key.tone-correct-after-hint{box-shadow:0 0 0 2px #f3eee6,inset 0 0 0 3px var(--gold),0 0 12px #f0c85a66}.black-key.tone-wrong{box-shadow:0 0 0 2px #f3eee6,inset 0 0 0 3px #f0b4aa}.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:#f7f1e447}.stage-pips span.on{background:var(--gold);box-shadow:0 0 8px #f0c85abf}.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);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:.85rem;z-index:5}.app-shell:has(.lesson-bar)>.session-chip{display:none}.lesson-tools .session-chip{position:static;top:auto;left:auto;transform:none;z-index:auto;flex:0 0 auto}.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(--staff-ink)}.mic-retry{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--wrong-bg)}.mic-retry p{margin:0 0 8px;color:var(--wrong);font-size:.92rem}.midi-fallback{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--idle-bg)}.midi-fallback p{margin:0;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:var(--node);border:2px solid rgba(240,200,90,.45);box-shadow:0 0 18px #f0c85a1f;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:var(--node);overflow:hidden;margin:8px 0 6px}.xp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:inherit}.course-path ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}.path-step{position:relative;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-step:not(:last-child):before{content:"";position:absolute;left:21px;top:52px;bottom:-10px;border-left:2px dotted rgba(240,200,90,.45);pointer-events:none}.path-node{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--node);color:var(--gold);border:2px solid rgba(240,200,90,.55);box-shadow:0 0 12px #f0c85a33}.path-step.open .path-node{background:radial-gradient(circle at 35% 30%,#ffe7a8,var(--gold-deep));color:var(--primary-text);border-color:#ffe7a8;box-shadow:0 0 16px #f0c85a80}.path-step.locked .path-node{color:var(--muted);border-color:#d4c8e659;box-shadow:none}.path-copy h3{margin-bottom:.15em}.path-copy p{margin-bottom:.4em}.star-row{display:flex;gap:6px;font-size:2rem;color:var(--star-dim);margin:8px 0}.star-row.tiny{font-size:1.2rem;margin:0 0 8px}.star-row .lit{color:var(--gold);text-shadow:0 0 8px rgba(240,200,90,.55)}.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(--gold);background:var(--reward-selected);color:var(--ink);box-shadow:0 0 0 1px #f0c85a59}.reward-tile.locked{border-style:dashed;color:var(--muted);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{border-style:dashed}.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(prefers-reduced-motion:reduce){.app-shell:after{animation:none;opacity:.55}.white-key.tone-hint,.white-key[data-hint=true]{animation:none;background:#b7efe8}.celebrate-card{animation:none}}@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}}