body.kids{--kids-ink:#33281c;--kids-white:#fffdf7;--n-c:#ff5d5d;--n-d:#ff9f43;--n-e:#f6c90e;--n-f:#4fbf6e;--n-g:#3d8bfd;--n-a:#9b5de5;--n-b:#f15bb5;min-height:100vh;color:var(--kids-ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background-color:#0000;background-image:radial-gradient(circle at 84% 6%,#f6c90e59,#0000 26%),linear-gradient(#bfe8ff 0%,#e3f6ff 42%,#fff3df 78%,#ffe9c7 100%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box;flex-direction:column;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;overflow-x:hidden}body.kids:before,body.kids:after{content:"";z-index:0;pointer-events:none;opacity:.9;background:#fff;border-radius:999px;position:fixed}body.kids:before{width:150px;height:46px;animation:46s linear infinite kids-cloud-drift;top:9%;left:-160px;box-shadow:38px -22px 0 12px #fff,86px -10px 0 4px #fff}body.kids:after{opacity:.7;width:110px;height:34px;animation:64s linear -26s infinite kids-cloud-drift;top:22%;left:-120px;box-shadow:30px -16px 0 9px #fff,64px -7px 0 3px #fff}@keyframes kids-cloud-drift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 320px))}}.kids-topbar,.kids-views,.kids-panel,.kids-piano{z-index:1;position:relative}.kids-topbar{padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 4px;justify-content:space-between;align-items:center;gap:12px;display:flex}.kids-exit,.kids-quiet-btn{color:#33281c8c;cursor:pointer;background:#33281c1a;border:none;border-radius:999px;justify-content:center;align-items:center;min-width:64px;min-height:44px;padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.kids-topbar__right{align-items:center;gap:10px;display:flex}.kids-jar{background:var(--kids-white);border-radius:999px;align-items:center;gap:8px;padding:8px 18px;font-size:22px;font-weight:900;display:inline-flex;box-shadow:0 4px #33281c1f}.kids-jar__star{background:var(--n-e);filter:drop-shadow(0 2px #00000026);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:26px;height:26px}.kids-views{box-sizing:border-box;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:900px;margin:0 auto;padding:10px 16px;display:grid}.kids-view-button{color:#fff;text-shadow:0 2px #0000002e;background:linear-gradient(180deg, #ff8fa3, var(--n-c));border:none;border-radius:24px;min-height:68px;padding:14px 8px;font-size:clamp(17px,2.4vw,22px);font-weight:900;transition:transform .12s;box-shadow:0 7px #00000029}.kids-view-button:nth-child(2){background:linear-gradient(180deg, #ffd166, var(--n-d));color:#6a4a10;text-shadow:none}.kids-view-button:nth-child(3){background:linear-gradient(180deg, #7ee0a0, var(--n-f));color:#14532d;text-shadow:none}.kids-view-button:nth-child(4){background:linear-gradient(180deg, #84b6f9, var(--n-g));color:#123a78;text-shadow:none}.kids-view-button.is-active{outline-offset:-5px;outline:5px solid #fff;transform:translateY(4px);box-shadow:0 3px #00000029}.kids-panel{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:150px;padding:12px 16px 16px;display:flex}.kids-free-title{color:#fff;text-shadow:0 3px #3d8bfde6,0 6px 14px #3d8bfd59;margin:0;font-size:clamp(30px,5vw,44px);font-weight:900}.kids-free-prompt{color:#4c5a68;margin:0;font-size:clamp(18px,2.6vw,24px);font-weight:800}.kids-note-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.kids-note-bubble{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:62px;height:62px;font-size:20px;font-weight:900;animation:1.8s ease-in-out infinite kids-bubble-bounce;display:inline-flex;box-shadow:inset 0 -6px #0000002e,0 6px 12px #33281c2e}.kids-note-bubble:nth-child(2){animation-delay:.12s}.kids-note-bubble:nth-child(3){animation-delay:.24s}.kids-note-bubble:nth-child(4){animation-delay:.36s}.kids-note-bubble:nth-child(5){animation-delay:.48s}.kids-note-bubble:nth-child(6){animation-delay:.6s}.kids-note-bubble:nth-child(7){animation-delay:.72s}.kids-note-bubble--c,.kids-note-pop--c,.kids-key__label--c,.kids-key--tone-c{--tone:var(--n-c)}.kids-note-bubble--d,.kids-note-pop--d,.kids-key__label--d,.kids-key--tone-d{--tone:var(--n-d)}.kids-note-bubble--e,.kids-note-pop--e,.kids-key__label--e,.kids-key--tone-e{--tone:var(--n-e)}.kids-note-bubble--f,.kids-note-pop--f,.kids-key__label--f,.kids-key--tone-f{--tone:var(--n-f)}.kids-note-bubble--g,.kids-note-pop--g,.kids-key__label--g,.kids-key--tone-g{--tone:var(--n-g)}.kids-note-bubble--a,.kids-note-pop--a,.kids-key__label--a,.kids-key--tone-a{--tone:var(--n-a)}.kids-note-bubble--b,.kids-note-pop--b,.kids-key__label--b,.kids-key--tone-b{--tone:var(--n-b)}.kids-note-bubble{background:var(--tone)}.kids-note-bubble--e{color:#6a4a10}.kids-song-title,.kids-cheer{color:#3d5a80;margin:0;font-size:clamp(26px,4vw,38px);font-weight:900}.kids-cheer{color:var(--n-c);text-shadow:0 3px #fffc;font-size:clamp(32px,5vw,46px);animation:.5s cubic-bezier(.34,1.56,.64,1) kids-pop}.kids-status{color:#4c5a68;margin:0;font-size:clamp(18px,2.6vw,23px);font-weight:800}.kids-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.kids-button{min-height:50px;color:var(--kids-ink);background:var(--kids-white);border:none;border-radius:999px;padding:13px 24px;font-size:18px;font-weight:900;box-shadow:0 5px #33281c29}.kids-button--primary{background:linear-gradient(180deg, #ffd166, var(--n-d));color:#6a4a10}.kids-button--ghost{box-shadow:none;background:#33281c14}.kids-echo-streak{color:var(--n-a);background:#9b5de526;border-radius:999px;align-self:center;align-items:center;padding:13px 20px;font-size:18px;font-weight:900;display:inline-flex}.kids-song-grid{grid-template-columns:repeat(auto-fit,minmax(150px,205px));justify-content:center;gap:14px;width:100%;max-width:780px;display:grid}.kids-song-card{color:#fff;text-shadow:0 2px #00000029;background:linear-gradient(160deg, var(--n-g), var(--n-a));border:none;border-radius:22px;flex-direction:column;align-items:center;gap:9px;min-height:116px;padding:22px 12px 16px;font-weight:900;transition:transform .12s;display:flex;position:relative;box-shadow:0 7px #33281c2e}.kids-song-card:nth-child(2n){background:linear-gradient(160deg, #7ee0a0, var(--n-f))}.kids-song-card:nth-child(3n){background:linear-gradient(160deg, #ff8fa3, var(--n-b))}.kids-song-card:active{transform:translateY(4px);box-shadow:0 3px #33281c2e}.kids-song-card__title{font-size:20px;line-height:1.25}.kids-song-card__level{gap:6px;display:inline-flex}.kids-level-dot{background:#ffffff59;border-radius:50%;width:13px;height:13px}.kids-level-dot.is-filled{background:#fff}.kids-song-card__done{color:#ffffffe6;font-size:12px;font-weight:800;position:absolute;top:10px;right:12px}.kids-progress{background:#33281c24;border-radius:999px;width:min(430px,84%);height:16px;overflow:hidden;box-shadow:inset 0 3px 4px #33281c33}.kids-progress__fill{background:linear-gradient(90deg, var(--n-f), var(--n-e));border-radius:999px;width:0%;height:100%;transition:width .25s}.kids-settings{z-index:70;background:#33281c73;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.kids-settings[hidden]{display:none}.kids-settings__card{background:var(--kids-white);box-sizing:border-box;border-radius:26px;flex-direction:column;gap:10px;width:min(560px,100%);max-height:86vh;padding:22px 24px 24px;display:flex;overflow-y:auto;box-shadow:0 18px 48px #33281c59}.kids-settings__title{color:#3d5a80;margin:0 0 4px;font-size:24px;font-weight:900}.kids-settings__label{color:#4c5a68;margin:6px 0 0;font-size:16px;font-weight:800}.kids-settings__notes{flex-wrap:wrap;gap:10px;display:flex}.kids-note-toggle{color:#fff;cursor:pointer;border:none;border-radius:50%;width:58px;height:58px;font-size:18px;font-weight:900;box-shadow:inset 0 -6px #0000002e,0 4px 10px #33281c29}.kids-note-toggle--c{background:var(--n-c)}.kids-note-toggle--d{background:var(--n-d)}.kids-note-toggle--e{background:var(--n-e);color:#6a4a10}.kids-note-toggle--f{background:var(--n-f)}.kids-note-toggle--g{background:var(--n-g)}.kids-note-toggle--a{background:var(--n-a)}.kids-note-toggle--b{background:var(--n-b)}.kids-note-toggle.is-off{opacity:.32;filter:grayscale(.8);box-shadow:inset 0 -4px #0000001f}.kids-segment{flex-wrap:wrap;gap:8px;display:flex}.kids-segment__option{background:var(--kids-white);color:#4c5a68;cursor:pointer;border:2px solid #33281c29;border-radius:999px;min-height:44px;padding:10px 18px;font-size:16px;font-weight:800}.kids-segment__option.is-active{border-color:var(--n-g);color:#24509b;background:#3d8bfd24}.kids-settings__bpm-row{align-items:center;gap:14px;display:flex}.kids-settings__bpm{min-height:44px;accent-color:var(--n-g);flex:1}.kids-settings__bpm-value{text-align:right;color:#3d5a80;font-variant-numeric:tabular-nums;min-width:52px;font-size:20px;font-weight:900}.kids-settings__card .kids-button{align-self:center;min-width:140px;margin-top:10px}.kids-settings__reload{color:#a13030;box-shadow:none;background:#ff5d5d1f;min-height:44px;font-size:15px}.kids-update-banner{top:calc(env(safe-area-inset-top,0px) + 12px);z-index:80;background:var(--kids-white);color:#3d5a80;border-radius:999px;align-items:center;gap:10px;padding:10px 12px 10px 18px;font-weight:800;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #33281c47}.kids-update-banner[hidden]{display:none}.kids-update-banner .kids-button{min-height:40px;padding:8px 18px;font-size:15px}.kids-staff-wrap{padding:0 18px}.kids-staff{background:var(--kids-white);border-radius:18px;width:100%;height:auto;max-height:172px;display:block;box-shadow:0 5px #33281c1f,0 12px 24px #33281c1f}.kids-staff-line,.kids-staff-ledger{stroke:#6f7a87;stroke-width:1.6px;stroke-linecap:round}.kids-staff-clef__fallback path{stroke:#1f2430;fill:none}.kids-staff-clef__glyph{fill:#1f2430;font-family:Bravura,serif}.kids-staff-note .kids-staff-notehead{fill:#1f2430}.kids-staff-note .kids-staff-notehead--hollow{fill:var(--kids-white);stroke:#1f2430;stroke-width:1.9px}.kids-staff-note .kids-staff-stem{stroke:#1f2430;stroke-width:1.9px;stroke-linecap:round}.kids-staff-note .kids-staff-note__hl{fill:#ffd1668c}.kids-staff-note.is-current .kids-staff-note__hl{animation:1.1s ease-in-out infinite kids-highlight-pulse}.kids-staff-note.is-done{opacity:.3}@keyframes kids-highlight-pulse{0%,to{opacity:.55}50%{opacity:1}}.kids-piano{padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px)}#kids-keyboard{background:linear-gradient(135deg, var(--n-d), var(--n-c) 55%, var(--n-b));border-radius:26px;padding:10px;box-shadow:0 10px #33281c33,0 22px 40px #33281c38}.kids-keyboard{touch-action:none;background:#f4efe3;border-radius:18px;height:clamp(220px,34vh,340px);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 4px 10px #33281c38}.kids-key{background:linear-gradient(180deg, #fffef8 34%, color-mix(in srgb, var(--tone,#fffef8) 20%, #fffef8));box-shadow:inset 0 -7px 0 color-mix(in srgb, var(--tone,#fffef8) 34%, #fffef8e6), inset -2px 0 0 #33281c12;border:none;border-radius:0 0 14px 14px;padding:0;transition:transform 60ms,filter 60ms;position:absolute;top:0;bottom:0;transform:translateY(0)}.kids-key--white{z-index:1}.kids-key--black{z-index:2;background:linear-gradient(#5d4a7e,#372a52);height:60%;box-shadow:inset 0 -6px #0006}.kids-key__label{background:var(--tone,#999);color:#fff;text-align:center;pointer-events:none;border-radius:999px;min-width:58%;padding:8px 4px;font-size:clamp(13px,1.9vw,18px);font-weight:900;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:inset 0 -4px #00000038}.kids-key__label--e{color:#6a4a10}.kids-key__dot{pointer-events:none;background:#ffd166;border-radius:50%;width:14px;height:14px;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 -3px #00000040}.kids-keyboard--labels-hidden .kids-key__label{display:none}.kids-key--pressed{filter:brightness(.94)saturate(1.25);transform:translateY(4px)scale(.985)}.kids-key--off{opacity:.28;filter:grayscale(.85)}.kids-key--glow,.kids-key--glow-hint{z-index:3}.kids-key--glow:after,.kids-key--glow-hint:after{content:"";aspect-ratio:1;background:var(--n-e);filter:drop-shadow(0 3px #0003);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:46%;animation:1s ease-in-out infinite kids-star-wave;position:absolute;top:10px;left:50%;transform:translate(-50%)}.kids-key--glow{background:linear-gradient(#fff8e1 30%,#ffe9a8);box-shadow:0 0 0 5px #f6c90ea6,0 0 30px 10px #f6c90e80}.kids-key--glow-hint{background:linear-gradient(#fff3ec 30%,#ffd2c2);animation:.6s ease-in-out infinite kids-glow-hint;box-shadow:0 0 0 7px #ff5d5d99,0 0 38px 14px #ff5d5d73}.kids-key--wobble{animation:.45s kids-wobble}.kids-fx-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.kids-sparkle,.kids-confetti{opacity:0;visibility:hidden;position:absolute;top:0;left:0}.kids-sparkle{background:hsl(var(--hue,45) 95% 60%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:18px;height:18px;transform:translate3d(var(--tx,50vw), var(--ty,50vh), 0) scale(0)}.kids-sparkle.is-active{visibility:visible;animation:.7s ease-out kids-sparkle-fly}.kids-confetti{background:hsl(var(--hue,45) 85% 58%);width:13px;height:19px;transform:translate3d(var(--tx,50vw), -5vh, 0) rotate(0deg);border-radius:4px}.kids-confetti.is-active{visibility:visible;animation:kids-confetti-fall 2.2s cubic-bezier(.3, .6, .7, 1) var(--delay,0s)}.kids-note-pop{background:var(--tone,var(--n-c));color:#fff;text-shadow:0 2px #0003;border-radius:999px;padding:10px 24px;font-size:30px;font-weight:900;animation:1s ease-out forwards kids-note-pop-rise;position:absolute;transform:translate(-50%,-100%);box-shadow:inset 0 -5px #00000038,0 8px 18px #33281c40}.kids-note-pop--e{color:#6a4a10;text-shadow:none}@keyframes kids-bubble-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes kids-star-wave{0%,to{transform:translate(-50%)scale(1)rotate(-6deg)}50%{transform:translate(-50%)scale(1.18)rotate(8deg)}}@keyframes kids-glow-hint{0%,to{filter:brightness(1.05)}50%{filter:brightness(1.22)}}@keyframes kids-wobble{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@keyframes kids-sparkle-fly{0%{opacity:1;transform:translate3d(var(--tx), var(--ty), 0) scale(.3)}70%{opacity:1}to{opacity:0;transform:translate3d(calc(var(--tx) + var(--dx,0px)), calc(var(--ty) + var(--dy,0px)), 0) scale(1.15) rotate(var(--rot,0deg))}}@keyframes kids-confetti-fall{0%{opacity:1;transform:translate3d(var(--tx), -6vh, 0) rotate(0deg)}85%{opacity:1}to{opacity:0;transform:translate3d(calc(var(--tx) + var(--drift,0px)), 105vh, 0) rotate(680deg)}}@keyframes kids-note-pop-rise{0%{opacity:0;transform:translate(-50%,-60%)scale(.5)}18%{opacity:1;transform:translate(-50%,-110%)scale(1.08)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-220%)scale(1)}}@keyframes kids-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@media (width<=620px){.kids-views,.kids-song-grid{grid-template-columns:repeat(2,1fr)}.kids-note-bubble{width:50px;height:50px;font-size:17px}.kids-keyboard{height:clamp(190px,30vh,260px)}.kids-key__label{padding:6px 2px;font-size:12px}}@media (prefers-reduced-motion:reduce){body.kids:before,body.kids:after{animation:none;display:none}.kids-note-bubble,.kids-key--glow:after,.kids-key--glow-hint,.kids-key--glow-hint:after,.kids-staff-note.is-current .kids-staff-note__hl,.kids-cheer{animation:none}.kids-key--glow{box-shadow:0 0 0 6px #f6c90eb3}.kids-key--glow-hint{box-shadow:0 0 0 8px #ff5d5db3}.kids-sparkle.is-active{opacity:.9;visibility:visible;transform:translate3d(var(--tx), var(--ty), 0) scale(1);animation:none}.kids-confetti.is-active{opacity:0;animation:none}.kids-note-pop{opacity:1;animation:none}.kids-progress__fill,.kids-view-button{transition:none}}