@import "https://fonts.googleapis.com/css2?family=Moo+Lah+Lah&display=swap";:root{color:#26314a;font-synthesis:none;background:#f7f9ff;font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}.game{z-index:1;isolation:isolate;text-align:center;border-radius:1.5rem;width:min(100% - 2rem,900px);margin:0 auto;padding:2.5rem 1.25rem 3rem;position:relative;overflow:hidden}#app{isolation:isolate;min-height:100vh;position:relative}#app:before,#app:after{content:"";z-index:-1;pointer-events:none;animation:.7s both scene-fade-in;position:absolute;inset:0}.color-cursor{z-index:20;background:var(--cursor-color);opacity:0;pointer-events:none;border:3px solid #fff;border-radius:50%;width:1.65rem;height:1.65rem;margin:-.825rem 0 0 -.825rem;transition:opacity .15s;position:fixed;box-shadow:0 .15rem .5rem #26314a59}#app.has-selected-color,#app.has-selected-color *{cursor:none}#app.has-selected-color .color-cursor{opacity:1}#app.scene-water:before{background:radial-gradient(circle at 16% 22%,#fff9 0 4px,#0000 5px) 0 0/130px 130px,radial-gradient(circle at 82% 34%,#ffffff80 0 7px,#0000 8px) 0 0/180px 180px,linear-gradient(#b9e9f5,#6eb9dc 72%,#5299c3);animation:.7s both scene-fade-in,9s linear infinite water-bubbles}#app.scene-grass:before{background:linear-gradient(#d9f3b7 0 68%,#81c96b 68%)}#app.scene-grass:after{background:repeating-linear-gradient(105deg,#0000 0 22px,#489c4e4d 23px 26px,#0000 27px 45px);height:32%;animation:.7s both scene-fade-in,3.5s ease-in-out infinite alternate grass-sway;top:auto}#app.scene-home:before{background:repeating-linear-gradient(90deg,#f8e8cb 0 32px,#f4dcb8 33px 35px),linear-gradient(#f8e8cb 0 76%,#c99c6b 76%)}.home-toy{z-index:0;pointer-events:none;position:fixed;bottom:11vh;left:-6rem}.background-visitor{z-index:0;pointer-events:none;filter:drop-shadow(.1rem .2rem .15rem #394a6033);width:7.5rem;height:auto;animation:8s linear infinite background-visitor-flight;animation-delay:var(--visitor-delay);position:fixed;top:23vh;left:-9rem}.water-fish{z-index:0;top:var(--fish-top);left:calc(-8rem + var(--fish-offset));width:var(--fish-size);opacity:0;pointer-events:none;filter:drop-shadow(.1rem .15rem .12rem #26608540);height:auto;animation:12s linear infinite water-fish-swim-right;animation-delay:var(--fish-delay);position:fixed}.water-fish-left{animation-name:water-fish-swim-left}.visitor-butterfly{top:18vh}.visitor-ladybug{width:6rem;top:37vh}.visitor-reverse{animation-direction:reverse}.visitor-ladybug .ladybug-left-wing,.visitor-ladybug .ladybug-right-wing{transform-box:fill-box}.visitor-ladybug .ladybug-left-wing{transform-origin:100%;animation:.7s ease-in-out infinite alternate ladybug-left-wing-flap}.visitor-ladybug .ladybug-right-wing{transform-origin:0;animation:.7s ease-in-out infinite alternate ladybug-right-wing-flap}.dog-ball{width:5.25rem;height:5.25rem;animation:6s linear infinite dog-ball-roll;animation-delay:var(--toy-delay);background:radial-gradient(circle at 34% 28%,#fff7e8 0 9%,#0000 10%),#ef6b5d;border:4px solid #c94b45;border-radius:50%;box-shadow:inset -.55rem -.65rem #a0342f40,.15rem .35rem .45rem #593f2c38}.cat-yarn{width:5.6rem;height:5.6rem;animation:7s linear infinite cat-yarn-roll;animation-delay:var(--toy-delay);background:repeating-radial-gradient(at 35% 35%,#0000 0 8px,#ffeffcd1 9px 12px,#0000 13px 19px),#dc91ca;border:4px solid #aa5d9b;border-radius:50%;box-shadow:inset -.55rem -.65rem #763b6f38,.15rem .35rem .45rem #593f2c38}.cat-thread{width:0;height:.8rem;animation:7s linear infinite cat-yarn-thread;animation-delay:var(--toy-delay);background:radial-gradient(at 7px 0,#0000 0 4px,#b662a8 4.5px 6px,#0000 6.5px) 0 0/14px 8px repeat-x;bottom:calc(11vh + 2.45rem);left:-1rem}#app.scene-savannah:before{background:radial-gradient(circle at 82% 16%,#fff4b0 0 4%,#f7ca62 5% 8%,#0000 9%),linear-gradient(#f8d88b 0 68%,#d9a95d 68%);animation:.7s both scene-fade-in,4s ease-in-out infinite alternate savannah-sun}#app.scene-savannah:after{filter:drop-shadow(0 1px 2px #ae753352);background:linear-gradient(100deg,#0000 0 18%,#fffff0fa 19% 35%,#0000 36%) 4% 35%/225px 7px no-repeat,linear-gradient(100deg,#0000 0 34%,#fffff0e6 35% 57%,#0000 58%) 70% 24%/185px 6px no-repeat,linear-gradient(100deg,#0000 0 14%,#fffff0e0 15% 31%,#0000 32%) 76% 48%/155px 5px no-repeat,linear-gradient(100deg,#0000 0 45%,#fffff0d1 46% 71%,#0000 72%) 19% 57%/210px 5px no-repeat;animation:.7s both scene-fade-in,5s ease-in-out infinite savannah-wind}#app.scene-forest:before{background:linear-gradient(#cfe7d0 0 68%,#78a66d 68%)}#app.scene-forest:after{background:linear-gradient(90deg,#0000 0 11%,#436f4b42 11% 15%,#0000 15% 78%,#436f4b42 78% 83%,#0000 83%)}.game-header{text-align:left;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:.25rem .35rem;display:flex}.eyebrow{color:#596dc4;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .2rem;font-size:.75rem;font-weight:900}h1{white-space:nowrap;margin:0;font-family:Moo Lah Lah,cursive;font-size:clamp(2.35rem,4.5vw,3.3rem);font-weight:400;line-height:.9}.game-title{margin:.45rem 0 0;font-size:1.25rem;font-weight:800}.instruction{color:#5d6886;max-width:38rem;margin:.7rem 0 0}.stars{color:#f6c74f;grid-template-columns:repeat(5,1fr);justify-items:center;gap:.12rem;width:7.1rem;font-size:1.55rem;display:grid}.star{animation:1.8s ease-in-out infinite star-bob;display:inline-block}.star:nth-child(2n){animation-delay:-.55s}.star:nth-child(3n){animation-delay:-1.1s}.star.is-lost{opacity:0;transform:scale(.35)}.star.is-newly-lost{color:#dfe4f1;animation:.65s ease-in forwards star-fly-away}.butterfly-area{place-items:center;min-height:27rem;margin:1rem 0;display:grid}.butterfly{width:min(100%,44rem);overflow:visible}@media (width>=601px){.butterfly{height:min(52vh,480px)}}.butterfly-area.is-leaving .butterfly{transform-origin:50%}.butterfly-area.is-flying .butterfly{animation:1.15s ease-in forwards fly-away}.butterfly-area.is-swimming .butterfly{animation:1.15s ease-in forwards swim-away}.butterfly-area.is-running .butterfly{animation:1.15s ease-in forwards run-away}.butterfly-area.is-arriving .butterfly{transform-origin:50%;animation:.75s cubic-bezier(.2,.8,.35,1) both fly-in}.wing-fields .wing-field{fill:#fff;stroke:#d6ddef;stroke-width:5px;cursor:pointer;transition:fill .2s}.wing-fields .wing-field:hover:not(.is-complete){fill:#edf1fa}.wing-fields .wing-field:focus{outline:none}.wing-fields .wing-field:focus-visible{stroke:#596dc4;stroke-width:9px}.wing-fields .wing-field.is-complete{fill:var(--field-color);cursor:default}.task-label{fill:#384360;text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:21px;font-weight:800}.wing-fields .wing-field.is-complete+.task-label{fill:#fff}.wing-outline{fill:none;stroke:#aeb9d5;stroke-width:6px;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.body{fill:#4d5674}.eye{fill:#fff}.pupil{fill:#26314a}.animal-line{fill:none;stroke:#4d5674;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.animal-nose,.ladybug-spot,.ladybug-head{fill:#4d5674;pointer-events:none}.animal-ladybug .wing-outline{stroke-width:8px}.ladybug-shell{fill:#fff;stroke:#aeb9d5;stroke-width:7px;stroke-linejoin:round}.ladybug-head-shape{fill:#4d5674}.ladybug-seam{fill:none;stroke:#4d5674;stroke-width:7px;stroke-linecap:round;pointer-events:none}.dog-muzzle{fill:#e8edf8;stroke:#4d5674;stroke-width:5px;pointer-events:none}.animal-ear,.wolf-ear{fill:#e7b2c4;stroke:#4d5674;stroke-width:7px;stroke-linejoin:round}.dog-ear{fill:#b98662;stroke:#4d5674;stroke-width:7px;pointer-events:none}.dog-tail{fill:none;stroke:#b98662;stroke-width:18px;stroke-linecap:round;pointer-events:none}.dog-bowl-shape{pointer-events:none}.dog-bowl-shape path{fill:#ef6b5d;stroke:#a84b3d;stroke-width:5px;stroke-linejoin:round}.dog-bowl-shape ellipse{fill:#73533c;stroke:#a84b3d;stroke-width:5px}.dog-bowl-shape text{fill:#fff4dc;letter-spacing:.08em;text-anchor:middle;font-size:14px;font-weight:900}.cat-bowl-shape{pointer-events:none}.cat-bowl-body{fill:#5c9ee3;stroke:#3d6fa9;stroke-width:5px;stroke-linejoin:round}.cat-bowl-rim{fill:#b8e7f8;stroke:#3d6fa9;stroke-width:5px}.cat-bowl-fish{fill:none;stroke:#fffdf4;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.cat-bowl-shape circle{fill:#fffdf4}.wolf-muzzle{fill:#d8e0ef;stroke:#4d5674;stroke-width:6px;stroke-linejoin:round}.ray-tail{fill:none;stroke:#718bb8;stroke-width:10px;stroke-linecap:round}.mouse-ear{fill:#f2bfd1;stroke:#4d5674;stroke-width:7px}.mouse-nose{fill:#e77db0}.mouse-tail{fill:none;stroke:#f2bfd1;stroke-width:12px;stroke-linecap:round}.hamster-ear{fill:#d6a36e;stroke:#4d5674;stroke-width:6px}.hamster-cheek{fill:#f5d9c0;stroke:#4d5674;stroke-width:5px}.jellyfish-tentacles{fill:none;stroke:#c58ad8;stroke-width:12px;stroke-linecap:round}.seahorse-fin{fill:#99c9df;stroke:#4d5674;stroke-width:6px;stroke-linejoin:round}.seahorse-tail{fill:none;stroke:#99c9df;stroke-width:12px;stroke-linecap:round}.seahorse-crest{fill:#99c9df;stroke:#4d5674;stroke-width:6px;stroke-linejoin:round}.seahorse-base{fill:#fff;stroke:#aeb9d5;stroke-width:7px;stroke-linejoin:round}.sleep-zzz{fill:#596dc4;font-family:sans-serif;font-size:28px;font-weight:900}.sleep-zzz-small{font-size:20px}.giraffe-horns,.giraffe-mane{fill:none;stroke:#b98662;stroke-width:10px;stroke-linecap:round;stroke-linejoin:round}.giraffe-tip{fill:#b98662}.giraffe-base{fill:#fff;stroke:#aeb9d5;stroke-width:7px;stroke-linejoin:round}.bee-wing{fill:#d7edf8;stroke:#4d5674;stroke-width:6px}.bee-stripe{fill:none;stroke:#4d5674;stroke-width:10px}.antenna{fill:none;stroke:#4d5674;stroke-width:7px;stroke-linecap:round}.color-panel{background:#fff;border:1px solid #e3e8f5;border-radius:1.2rem;padding:1.3rem;box-shadow:0 .5rem 1.5rem #45588514}h2{margin:0 0 1rem;font-size:1.05rem}.color-options{flex-wrap:wrap;justify-content:center;gap:.65rem;display:flex}.color-option{color:#37425f;cursor:pointer;background:#f4f6fc;border:2px solid #0000;border-radius:99rem;align-items:center;gap:.45rem;min-width:4.5rem;padding:.45rem .65rem;font-weight:800;display:inline-flex}.color-option:hover,.color-option.is-selected{border-color:var(--color)}.color-option.is-selected{background:color-mix(in srgb, var(--color), white 82%);box-shadow:0 0 0 .2rem color-mix(in srgb, var(--color), transparent 78%)}.color-dot{background:var(--color);border-radius:50%;width:1.1rem;height:1.1rem}.status{color:#5d6886;min-height:1.5rem;margin:1.25rem 0;font-weight:700}.next-round{color:#fff;cursor:pointer;background:#596dc4;border:0;border-radius:.7rem;padding:.8rem 1.25rem;font-weight:800;box-shadow:0 .2rem #4154a5}.next-round:hover{background:#4d61b9}.restart-in-scene{align-self:center;padding:1rem 1.5rem;font-size:1.1rem}@keyframes fly-away{0%{opacity:1;transform:translate(0)rotate(0)scale(1)}35%{transform:translate(4rem,-1.5rem)rotate(10deg)scale(1.02)}to{opacity:0;transform:translate(115vw,-16rem)rotate(28deg)scale(.45)}}@keyframes fly-in{0%{opacity:0;transform:translate(-90vw,8rem)rotate(-20deg)scale(.55)}to{opacity:1;transform:translate(0)rotate(0)scale(1)}}@keyframes swim-away{0%{opacity:1;transform:translate(0)rotate(0)}35%{transform:translate(5rem,.7rem)rotate(5deg)}70%{transform:translate(10rem,-.6rem)rotate(-4deg)}to{opacity:0;transform:translate(115vw,.2rem)rotate(3deg)}}@keyframes run-away{0%{opacity:1;transform:translate(0)}30%{transform:translate(4rem,-.45rem)}55%{transform:translate(8rem,.2rem)}80%{transform:translate(13rem,-.4rem)}to{opacity:0;transform:translate(115vw)}}@keyframes scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes water-bubbles{0%{background-position:0 0,0 0,0 0}to{background-position:35px -130px,-20px -180px,0 0}}@keyframes grass-sway{0%{transform:translate(-.4rem)skew(-2deg)}to{transform:translate(.4rem)skew(2deg)}}@keyframes savannah-wind{0%{opacity:0;transform:translate(-105vw)}12%,72%{opacity:1}to{opacity:0;transform:translate(105vw)}}@keyframes dog-ball-roll{0%{opacity:0;transform:translate(-4rem)rotate(0)}8%,84%{opacity:1}to{opacity:0;transform:translate(110vw)rotate(900deg)}}@keyframes background-visitor-flight{0%{opacity:0;transform:translate(-10rem)translateY(.5rem)rotate(-4deg)}8%,88%{opacity:1}25%{transform:translate(27vw)translateY(-1rem)rotate(5deg)}52%{transform:translate(58vw)translateY(.8rem)rotate(-3deg)}78%{transform:translate(88vw)translateY(-.6rem)rotate(4deg)}to{opacity:0;transform:translate(120vw)translateY(.4rem)rotate(-4deg)}}@keyframes water-fish-swim-right{0%{opacity:0;transform:translate(-10rem)}4%,21%{opacity:1}26%,to{opacity:0;transform:translate(115vw)}}@keyframes water-fish-swim-left{0%{opacity:0;transform:translate(115vw)}4%,21%{opacity:1}26%,to{opacity:0;transform:translate(-10rem)}}@keyframes ladybug-left-wing-flap{0%{transform:rotate(0)}to{transform:rotate(-25deg)}}@keyframes ladybug-right-wing-flap{0%{transform:rotate(0)}to{transform:rotate(25deg)}}@keyframes cat-yarn-roll{0%{opacity:0;transform:translate(-4rem)rotate(0)}10%,82%{opacity:1}to{opacity:0;transform:translate(110vw)rotate(-760deg)}}@keyframes cat-yarn-thread{0%{opacity:1;width:0}10%{opacity:1;width:max(0px,11vw - 8.6rem)}20%{opacity:1;width:max(0px,22vw - 8.2rem)}30%{opacity:1;width:max(0px,33vw - 7.8rem)}40%{opacity:1;width:max(0px,44vw - 7.4rem)}50%{opacity:1;width:max(0px,55vw - 7rem)}60%{opacity:1;width:max(0px,66vw - 6.6rem)}70%{opacity:1;width:max(0px,77vw - 6.2rem)}80%{opacity:1;width:max(0px,88vw - 5.8rem)}90%{opacity:1;width:max(0px,99vw - 5.4rem)}to{opacity:0;width:calc(110vw - 5rem)}}@keyframes savannah-sun{0%{filter:brightness()}to{filter:brightness(1.08)saturate(1.12)}}@keyframes star-bob{0%,to{transform:translateY(0)rotate(-4deg)scale(1)}50%{transform:translateY(-.18rem)rotate(4deg)scale(1.08)}}@keyframes star-fly-away{0%{opacity:1;transform:translate(0)rotate(0)scale(1)}to{opacity:0;transform:translate(.9rem,-1.8rem)rotate(135deg)scale(.35)}}@media (width<=600px){.game{border-radius:0;width:100%;padding:1.5rem .25rem 2rem}.game-header{grid-template-columns:1fr auto;align-items:start;gap:.25rem .5rem;padding:.1rem .25rem;display:grid}.game-header>div:first-child{min-width:0}.game-header .instruction{margin-top:.2rem;font-size:.84rem;line-height:1.3}.game-header h1{white-space:normal;font-size:clamp(2rem,10vw,2.7rem)}.game-title{margin-top:.2rem;font-size:.98rem}.stars{gap:0;width:6.4rem;font-size:1.2rem}.butterfly-area{min-height:0;padding-bottom:.5rem;display:grid;overflow:visible}.butterfly{width:calc(100% + .5rem);max-width:44rem;margin:0 -.25rem;display:block}.task-label{font-size:32px}}