*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--sky: #7cc6ee;--sky-deep: #4ea7d8;--sun: #ffd84d;--sun-deep: #f0b400;--coral: #ff8a78;--coral-deep: #e76a55;--mint: #a7e3c5;--mint-deep: #6dc69a;--cream: #fff7e8;--paper: #fffdf7;--ink: #3a3856;--ink-soft: #6e6c8a;--pencil: #d8d4c3;--shadow-soft: 0 6px 0 rgba(58, 56, 86, .08);--shadow-card: 0 14px 30px -16px rgba(58, 56, 86, .35), 0 4px 0 rgba(58, 56, 86, .06);--radius-sm: 14px;--radius-md: 22px;--radius-lg: 32px;--font-display: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;--font-body: "Fredoka", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-family:var(--font-body);color:var(--ink);color-scheme:light}html,body{background:var(--paper);min-height:100dvh}body{background:radial-gradient(circle at 12% 10%,rgba(124,198,238,.18),transparent 45%),radial-gradient(circle at 88% 20%,rgba(255,216,77,.18),transparent 50%),radial-gradient(circle at 50% 95%,rgba(167,227,197,.22),transparent 55%),var(--paper);background-attachment:fixed}#app{min-height:100dvh;max-width:560px;margin-inline:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));position:relative}button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--font-display);color:var(--ink);letter-spacing:.5px}h1{font-size:clamp(2rem,8vw,2.75rem);line-height:1.05}h2{font-size:clamp(1.5rem,6vw,1.9rem);line-height:1.1}p{color:var(--ink-soft)}.app-shell{display:flex;flex-direction:column;gap:18px;min-height:calc(100dvh - 32px)}.app-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}.app-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}.app-logo .logo-dot{width:20px;height:20px;border-radius:50%;background:conic-gradient(from 90deg,var(--coral),var(--sun),var(--mint),var(--sky),var(--coral));box-shadow:var(--shadow-soft)}.icon-btn{width:40px;height:40px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);color:var(--ink);transition:transform .15s ease}.icon-btn:active{transform:scale(.92)}.icon-btn svg{width:18px;height:18px}.dashboard{display:flex;flex-direction:column;gap:18px;flex:1}.dashboard-hello{display:flex;flex-direction:column;gap:4px}.dashboard-hello h1{font-size:clamp(2.2rem,9vw,3rem)}.dashboard-hello p{font-family:var(--font-display);font-size:1.15rem;color:var(--ink-soft)}.tile-grid{display:grid;grid-template-columns:1fr;gap:14px}.tile{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);min-height:84px;transition:transform .18s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;width:100%;text-align:left}.tile:active{transform:scale(.97)}.tile-icon{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.tile-icon svg{width:32px;height:32px}.tile-color .tile-icon{background:#ff8a7838}.tile-trace .tile-icon{background:#7cc6ee38}.tile-mission .tile-icon{background:#a7e3c547}.tile-text{display:flex;flex-direction:column;gap:2px}.tile-text h2{margin:0;font-size:1.4rem}.tile-text p{font-family:var(--font-display);font-size:1rem;color:var(--ink-soft)}.tile-chev{width:18px;height:18px;margin-left:auto;color:var(--ink-soft);opacity:.5;flex:0 0 auto}.dashboard-shelf{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-soft);text-align:left;width:100%}.dashboard-shelf>svg{width:24px;height:24px;color:var(--sun-deep);flex:0 0 auto}.dashboard-shelf .shelf-count{font-family:var(--font-display);font-size:1.2rem;color:var(--coral-deep)}.dashboard-shelf .shelf-stickers{display:inline-flex;margin-left:auto}.dashboard-shelf .sticker-pill{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;margin-left:-6px;background:var(--cream);border:2px solid white;box-shadow:0 2px 6px #3a385626}.activity{display:flex;flex-direction:column;gap:14px;flex:1}.activity-bar{display:flex;align-items:center;gap:8px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.choice{background:#fff;border-radius:var(--radius-md);padding:12px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;gap:6px;min-height:128px;transition:transform .18s cubic-bezier(.34,1.56,.64,1);position:relative}.choice:active{transform:scale(.95)}.choice .choice-thumb{width:80%;aspect-ratio:1;border-radius:var(--radius-sm);background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.choice .choice-thumb svg{width:72%;height:72%}.choice .choice-label{font-family:var(--font-display);font-size:1rem}.choice-done{position:absolute;top:6px;right:6px;background:var(--mint);border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 4px #3a385633;font-size:12px}.choice-done svg{width:13px;height:13px}.color-stage{flex:1;display:flex;flex-direction:column;gap:12px}.canvas-wrap{position:relative;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);padding:12px;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:manipulation}.canvas-wrap svg{width:100%;height:100%;max-height:56vh;display:block}.coloring-svg path[data-fill]{cursor:pointer;transition:fill .2s ease}.coloring-svg path.outline{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}.color-palette{display:flex;gap:10px;justify-content:center;padding:10px 8px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-wrap:wrap}.swatch{width:48px;height:48px;border-radius:50%;border:4px solid white;box-shadow:0 0 0 2px #3a385614,0 4px 8px #3a385626;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.swatch:active{transform:scale(.9)}.swatch[data-selected=true]{transform:scale(1.18);box-shadow:0 0 0 3px var(--ink),0 4px 8px #3a385640}.trace-stage{flex:1;display:flex;flex-direction:column;gap:12px}.trace-svg{width:100%;max-height:60vh;touch-action:none;-webkit-user-select:none;user-select:none}.trace-svg .trace-base{fill:none;stroke:var(--pencil);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 26}.trace-svg .trace-glow{fill:none;stroke:var(--sky);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(124,198,238,.7));transition:stroke-dashoffset .2s ease}.trace-svg .trace-start{fill:var(--coral);stroke:#fff;stroke-width:4}.trace-svg .trace-end{fill:var(--sun);stroke:var(--ink);stroke-width:4}.trace-hint{font-family:var(--font-display);text-align:center;font-size:1.1rem;color:var(--ink-soft)}.mission-stage{flex:1;display:flex;flex-direction:column;gap:12px}.mission-strip{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow-x:auto}.mission-strip .strip-slot{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--cream);font-size:15px;line-height:1;border:2px dashed var(--pencil);transition:transform .3s ease}.mission-strip .strip-slot.filled{background:var(--mint);border:2px solid white;box-shadow:0 2px 6px #3a38562e;animation:pop-in .35s cubic-bezier(.34,1.56,.64,1)}.mission-prompt{text-align:center;padding:12px 14px;font-family:var(--font-display);font-size:1.15rem;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);color:var(--ink)}.mission-scene{flex:1;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);padding:12px;display:flex;align-items:center;justify-content:center;min-height:320px;position:relative;overflow:hidden}.mission-scene svg{width:100%;height:100%;max-height:56vh}.mission-scene .target{cursor:pointer;transition:transform .2s ease;transform-box:fill-box;transform-origin:center}.mission-scene .target.found{animation:tada .6s ease}.mission-scene .target.wrong{animation:wiggle .4s ease}.trophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trophy-card{background:#fff;border-radius:var(--radius-md);padding:10px 8px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:88px;text-align:center}.trophy-card.locked{opacity:.45;box-shadow:var(--shadow-soft);background:var(--cream)}.trophy-icon{font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(58,56,86,.2))}.trophy-label{font-family:var(--font-display);font-size:.9rem;color:var(--ink)}.parent-page{display:flex;flex-direction:column;gap:14px}.parent-card{background:#fff;border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px}.parent-card h2{font-family:var(--font-display);font-size:1.3rem;margin-bottom:8px}.parent-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--cream)}.parent-row:last-child{border-bottom:0}.parent-row .label{font-family:var(--font-display);font-size:1.1rem;color:var(--ink)}.toggle{width:56px;height:32px;border-radius:32px;background:var(--cream);position:relative;transition:background .2s ease;flex:0 0 auto}.toggle[data-on=true]{background:var(--mint)}.toggle .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s ease}.toggle[data-on=true] .knob{transform:translate(24px)}.saved-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saved-thumb{background:var(--cream);border-radius:var(--radius-sm);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:8px}.saved-thumb svg{width:100%;height:100%}.empty{text-align:center;padding:20px;font-family:var(--font-display);color:var(--ink-soft)}.danger-btn{padding:12px 16px;border-radius:999px;background:var(--coral);color:#fff;font-family:var(--font-display);font-size:1.05rem;box-shadow:0 4px 0 var(--coral-deep);align-self:flex-start;transition:transform .18s ease}.danger-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--coral-deep)}.celebrate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#3a385659;z-index:50;padding:24px;animation:fade-in .25s ease}.celebrate-card{background:#fff;border-radius:var(--radius-lg);padding:24px;text-align:center;display:flex;flex-direction:column;gap:14px;max-width:320px;width:100%;position:relative;overflow:hidden}.celebrate-card h2{font-size:2rem;color:var(--coral-deep)}.celebrate-trophy{font-size:44px;line-height:1;animation:pop-in .5s cubic-bezier(.34,1.56,.64,1)}.celebrate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:12px 18px;border-radius:999px;font-family:var(--font-display);font-size:1.15rem;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.btn-primary{background:var(--sky);color:#fff;box-shadow:0 4px 0 var(--sky-deep)}.btn-secondary{background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--pencil)}.btn-primary:active,.btn-secondary:active{transform:translateY(2px)}.btn-primary:active{box-shadow:0 2px 0 var(--sky-deep)}.btn-secondary:active{box-shadow:0 2px 0 var(--pencil)}.sparkle-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sparkle{position:absolute;width:18px;height:18px;color:var(--sun);animation:sparkle-fly 1.4s ease-out forwards;opacity:0}.star-burst{position:absolute;width:32px;height:32px;pointer-events:none;animation:star-burst .6s ease-out forwards;color:var(--sun-deep)}.back-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:1rem;background:#fff;padding:6px 12px 6px 8px;border-radius:999px;box-shadow:var(--shadow-soft);color:var(--ink)}.back-btn svg{width:16px;height:16px;flex:0 0 auto}.back-btn:active{transform:scale(.95)}.bounce-in{animation:bounce-in .4s cubic-bezier(.34,1.56,.64,1)}.page-title{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.2rem;background:#fff;padding:5px 14px;border-radius:999px;box-shadow:var(--shadow-soft)}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce-in{0%{transform:scale(.8) translateY(8px);opacity:0}60%{transform:scale(1.04) translateY(-2px);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes tada{0%{transform:scale(1)}20%{transform:scale(1.2) rotate(-6deg)}40%{transform:scale(1.2) rotate(6deg)}60%{transform:scale(1.15) rotate(-3deg)}to{transform:scale(1) rotate(0)}}@keyframes sparkle-fly{0%{opacity:0;transform:translate(0) scale(.4) rotate(0)}20%{opacity:1}to{opacity:0;transform:translate(var(--dx, 0),var(--dy, -60px)) scale(1.4) rotate(180deg)}}@keyframes star-burst{0%{transform:scale(.4);opacity:1}to{transform:scale(1.8);opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}