:root{--bg:#fff7ef;--card:#fff;--ink:#3b3550;--soft-ink:#7b7593;--pink:#ff7aa2;--pink-soft:#ffe1ea;--lilac:#b9a7f5;--lilac-soft:#efeaff;--mint:#7fd6b5;--sun:#ffd166;--radius:22px;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:Nunito,ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;margin:0}body{overscroll-behavior:none;min-height:100dvh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}h1,h2{margin:0}img{max-width:100%}#root{max-width:1100px;padding:max(16px, env(safe-area-inset-top)) 20px 32px;margin:0 auto}.splash{place-items:center;min-height:90dvh;font-size:80px;display:grid}.big-button{background:var(--pink);color:#fff;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:64px;padding:18px 30px;font-size:22px;font-weight:800;transition:transform 80ms;display:inline-flex;box-shadow:0 6px #e05583}.big-button:active{transform:translateY(4px);box-shadow:0 2px #e05583}.big-button:disabled{opacity:.5}.big-button.soft{background:var(--lilac-soft);color:var(--ink);box-shadow:0 6px #d4c9fb}.ghost-button{background:var(--card);border:2px solid #e4def2;border-radius:999px;min-height:48px;padding:10px 18px;font-size:17px;font-weight:700}.ghost-button.danger{color:#b3264e;margin-top:28px}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.notice{background:#fff3cd;border-radius:16px;padding:14px 18px;font-size:18px}.empty{color:var(--soft-ink);text-align:center;padding:24px;font-size:20px}.status{text-align:center;color:var(--soft-ink);font-size:22px}.section-title{margin:28px 0 12px;font-size:24px}.welcome{text-align:center;justify-items:center;gap:18px;padding-top:10vh;display:grid}.welcome-art{font-size:84px}.welcome h1{font-size:48px}.welcome p{max-width:560px;margin:0;font-size:22px}.welcome .small{color:var(--soft-ink);font-size:17px}.voice-toggle{z-index:5;background:var(--card);border:0;border-radius:50%;width:60px;height:60px;font-size:28px;position:fixed;bottom:18px;right:18px;box-shadow:0 4px 16px #0002}.kid-top{justify-content:space-between;align-items:center;display:flex}.kid-top h1{font-size:44px}.grownup-link{color:var(--soft-ink);background:0 0;border:0;padding:12px;font-size:16px}.streak-card{background:linear-gradient(135deg, #fff, var(--pink-soft));border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;padding:20px 24px;display:flex;box-shadow:0 4px 18px #ff7aa222}.streak-number{align-items:center;gap:14px;display:flex}.streak-flame{font-size:54px}.streak-number strong{font-size:30px;display:block}.streak-number span{color:var(--soft-ink);font-size:18px}.week-row{gap:8px;display:flex}.week-day{text-align:center;width:48px;color:var(--soft-ink);background:#fff;border-radius:14px;gap:2px;padding:6px 0;font-weight:700;display:grid}.week-day b{min-height:28px;font-size:22px}.week-done{background:#fff4c7}.week-today{outline:3px solid var(--pink)}.piece-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;display:grid}.piece-card{background:var(--card);border-radius:var(--radius);text-align:left;border:0;gap:8px;min-height:170px;padding:22px;display:grid;box-shadow:0 6px #ece6f7,0 8px 22px #0000000d}.piece-card:active{transform:translateY(3px)}.piece-title{font-size:26px;font-weight:800}.piece-page{color:var(--soft-ink);font-size:16px}.goal-notes{color:#d4cde6;flex-wrap:wrap;gap:4px;font-size:22px;display:flex}.played-today{color:#2f9d74;font-weight:700}.play-chip{background:var(--mint);color:#fff;border-radius:999px;justify-self:start;padding:8px 18px;font-size:20px;font-weight:800}.sticker-shelf{border-radius:var(--radius);background:var(--lilac-soft);border:0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;margin-top:28px;padding:18px 22px;display:flex}.shelf-title{font-size:22px;font-weight:800}.shelf-stickers{gap:6px;font-size:36px;display:flex}.sync-note{color:var(--soft-ink);text-align:center}.practice,.sticker-book,.parent,.book-page{gap:16px;display:grid}.practice-top{grid-template-columns:auto 1fr auto;align-items:center;gap:12px;display:grid}.practice-top h1{text-align:center;font-size:28px}.progress-dots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.dot{background:#e7e1f3;border-radius:50%;width:14px;height:14px}.dot-done{background:var(--sun)}.dot-now{background:var(--pink);transform:scale(1.3)}.staff-scroll{background:var(--card);border-radius:var(--radius);scrollbar-width:none;padding:6px 0;overflow-x:auto;box-shadow:inset 0 0 0 2px #f0ebf8}.note{transition:opacity .3s}.note-done{opacity:.55}.note-current .note-head{animation:1.1s ease-in-out infinite bob}.note-selected ellipse{stroke:var(--pink);stroke-width:5px}@keyframes bob{50%{transform:translateY(-6px)}}.cheer{text-align:center;height:34px;font-size:30px;animation:.6s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(1)}}.keyboard{width:100%;height:auto;max-height:40dvh;display:block}.key-target{animation:1s ease-in-out infinite glow}@keyframes glow{50%{opacity:.55}}.big-actions{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.listening-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;font-size:22px;font-weight:700;display:flex}.mic-pulse{font-size:32px;animation:1.4s infinite glow}.finish{text-align:center;justify-items:center;gap:18px;padding-top:4vh;display:grid}.finish h1{font-size:44px}.finish-detail{max-width:640px;margin:0;font-size:24px}.confetti{letter-spacing:8px;font-size:40px;animation:1.2s ease-out forwards pop}.sticker-pick h2{margin-bottom:14px;font-size:28px}.sticker-choices{justify-content:center;gap:22px;display:flex}.sticker-choice{background:#fff;border:0;border-radius:50%;width:132px;height:132px;font-size:76px;animation:2.4s ease-in-out infinite wiggle;box-shadow:0 8px #ece6f7,0 10px 26px #0000001a}.sticker-choice:nth-child(2){animation-delay:.3s}.sticker-choice:nth-child(3){animation-delay:.6s}@keyframes wiggle{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-8deg)}92%{transform:rotate(8deg)}}.picked p{font-size:22px}.sticker-big{font-size:110px;animation:.5s ease-out pop-in;display:inline-block}@keyframes pop-in{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}.sparkly{filter:drop-shadow(0 0 8px #ffd166)drop-shadow(0 0 2px #fff);animation:2s ease-in-out infinite shimmer;display:inline-block}@keyframes shimmer{50%{filter:drop-shadow(0 0 16px #ffb3d0)drop-shadow(0 0 4px #fff);transform:scale(1.06)}}.finish-actions{justify-items:center;gap:16px;display:grid}.take-button{background:var(--mint);box-shadow:0 6px #4fb592}.polish{justify-items:center;gap:10px;width:100%;display:grid}.polish p{margin:0;font-size:22px;font-weight:800}.polish .staff-scroll{width:100%}.sticker-page{border-radius:var(--radius);background:#fff;padding:16px 20px;box-shadow:0 4px #ece6f7}.sticker-page h2{color:var(--soft-ink);margin-bottom:8px;font-size:20px}.sticker-row{flex-wrap:wrap;gap:10px;font-size:54px;display:flex}.book-page img{border-radius:14px;box-shadow:0 4px 16px #0002}.teacher-notes{padding:0;font-size:22px;list-style:none}.parent{font-size:18px}.parent p{margin:0}.add-homework{justify-self:start}.parent-summary{color:var(--soft-ink)}.parent-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.parent-list li{background:#fff;border-radius:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex}.parent-list li>div:first-child{gap:2px;display:grid}.parent-list span{color:var(--soft-ink);font-size:16px}.parent-footer{color:var(--soft-ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;display:flex}.photo-button{justify-self:start}.photo-strip{flex-wrap:wrap;gap:12px;display:flex}.photo-strip figure{gap:6px;width:160px;margin:0;display:grid}.photo-strip img{object-fit:cover;border-radius:10px;height:200px}.editor label{flex:1;gap:4px;font-size:16px;font-weight:700;display:grid}.editor label.narrow{flex:0 0 140px}.editor input,.editor select,.editor textarea{background:#fff;border:2px solid #e4def2;border-radius:12px;width:100%;padding:10px 12px;font-size:18px}.editor-grid{grid-template-columns:1fr 220px;gap:18px;display:grid}.editor-grid>div{gap:12px;display:grid}.editor-photo img{object-fit:contain;border-radius:12px;max-height:300px}.hint-text{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.modal-backdrop{z-index:10;background:#3b355066;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{border-radius:var(--radius);background:#fff;gap:16px;min-width:min(360px,100%);padding:26px;font-size:20px;display:grid}.modal label{gap:8px;display:grid}.modal input{border:2px solid #e4def2;border-radius:12px;padding:10px;font-size:28px}.chart{background:#fff;border-radius:18px;align-items:flex-end;gap:6px;height:200px;padding:14px;display:flex}.bar-wrap{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;max-width:40px;height:100%;display:flex}.bar-label{color:var(--soft-ink);font-size:11px}.bar{background:var(--lilac);border-radius:8px 8px 2px 2px;width:100%;min-height:4px}.plays{border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}.plays th,.plays td{text-align:left;border-bottom:1px solid #f0ebf8;padding:8px 12px}.archived summary{color:var(--soft-ink);cursor:pointer;margin:12px 0;font-size:18px}@media (width<=700px){.editor-grid{grid-template-columns:1fr}.practice-top h1{font-size:22px}.sticker-choice{width:96px;height:96px;font-size:56px}.kid-top h1{font-size:34px}}
