:root{--sky:#95ddf3;--green:#63bd62;--deep:#203d3a;--cream:#fffbea;--yellow:#ffd84e;--pink:#f58e9b;--red:#dc5b52;--white:#fff;--shadow:#20423822}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;color:var(--deep);background:var(--sky)}button{font:inherit}.app{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:max(16px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom))}.sky{position:absolute;inset:0;z-index:-2;background:linear-gradient(#8ddaf2 0 61%,#a4dd70 61% 100%)}.sun{position:absolute;right:8%;top:7%;width:70px;height:70px;border-radius:50%;background:#ffe274;box-shadow:0 0 0 12px #fff3a33d}.sun:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#ffe88f}.cloud{position:absolute;width:82px;height:25px;background:#fff;border-radius:30px;opacity:.85}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}.cloud:before{width:38px;height:38px;left:12px;bottom:4px}.cloud:after{width:48px;height:48px;right:8px;bottom:2px}.cloud-one{left:-12px;top:12%}.cloud-two{right:3%;top:28%;transform:scale(.65)}.hills{position:absolute;left:-10%;width:120%;border-radius:50% 50% 0 0}.hills-back{bottom:26%;height:25%;background:#84cc71}.hills-front{bottom:-15%;height:49%;background:#62b85f}.barn{position:absolute;right:-6px;bottom:24%;width:94px;height:83px;transition:.7s;transform:translateX(140px)}.barn.show{transform:translateX(0)}.barn-body{position:absolute;inset:24px 7px 0;background:#d85f55;border:5px solid #fff2d4}.barn-roof{position:absolute;z-index:2;left:0;top:4px;width:94px;height:45px;background:#a74743;clip-path:polygon(50% 0,100% 65%,92% 78%,50% 28%,8% 78%,0 65%)}.barn-door{position:absolute;width:30px;height:43px;left:23px;bottom:0;background:#8c403c;border:4px solid #fff2d4}.fence{position:absolute;bottom:18%;left:-2%;right:-2%;height:38px;border-top:7px solid #f9e6b5;border-bottom:7px solid #f9e6b5;opacity:.9}.fence i{position:absolute;width:9px;height:61px;top:-17px;background:#fff1ca;border-radius:3px}.fence i:nth-child(1){left:8%}.fence i:nth-child(2){left:36%}.fence i:nth-child(3){left:67%}.fence i:nth-child(4){right:5%}.brand{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:#fff9;color:#31594b;font-weight:900;font-size:12px;letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--yellow);color:#fff}.stage{width:min(100%,430px);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 0 36px}.lesson-card{min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;z-index:5}.eyebrow{margin:0 0 8px;font-size:11px;line-height:1.2;font-weight:900;letter-spacing:1.6px;color:#3d695b}.lesson-card h1{margin:0;font-size:clamp(36px,12vw,56px);line-height:.9;letter-spacing:-2px;text-shadow:0 3px 0 #fff7}.lesson-card h1 span{color:#fff}.subline{margin:11px 0 0;font-size:16px;font-weight:700}.cow-wrap{position:relative;width:300px;height:255px;margin:-2px 0 3px}.cow{position:absolute;width:250px;height:190px;left:24px;top:35px;filter:drop-shadow(0 7px 0 #36654620);animation:cowIdle 2.8s ease-in-out infinite;transform-origin:center bottom}.cow-body{position:absolute;left:43px;top:45px;width:162px;height:105px;border:5px solid var(--deep);border-radius:48% 48% 40% 42%;background:#fff}.spot{position:absolute;background:var(--deep);border-radius:48%}.spot-one{left:18px;top:8px;width:55px;height:43px;transform:rotate(18deg)}.spot-two{right:19px;bottom:12px;width:43px;height:36px;transform:rotate(-12deg)}.cow-head{position:absolute;z-index:4;left:0;top:18px;width:99px;height:105px;border:5px solid var(--deep);border-radius:44% 44% 48% 48%;background:#fff}.head-spot{position:absolute;width:39px;height:35px;right:7px;top:0;background:var(--deep);border-radius:40% 40% 55% 50%}.ear{position:absolute;width:35px;height:22px;top:7px;background:#fff;border:5px solid var(--deep);border-radius:60% 30% 60% 30%}.ear-left{left:-26px;transform:rotate(15deg)}.ear-right{right:-26px;transform:scaleX(-1) rotate(15deg)}.horn{position:absolute;width:13px;height:25px;top:-19px;background:#ffe4a7;border:4px solid var(--deep);border-radius:70% 70% 20% 20%}.horn-left{left:19px;transform:rotate(-18deg)}.horn-right{right:19px;transform:rotate(18deg)}.eye{position:absolute;width:8px;height:11px;top:39px;border-radius:50%;background:var(--deep);z-index:3}.eye-left{left:24px}.eye-right{right:24px}.muzzle{position:absolute;left:11px;right:11px;bottom:6px;height:46px;border:4px solid var(--deep);border-radius:48%;background:#f5acae}.muzzle i{position:absolute;top:14px;width:6px;height:7px;border-radius:50%;background:#a45864}.muzzle i:first-child{left:22px}.muzzle i:nth-child(2){right:22px}.muzzle b{position:absolute;width:20px;height:8px;left:50%;bottom:4px;transform:translateX(-50%);border-bottom:3px solid #8a4752;border-radius:50%}.leg{position:absolute;z-index:-1;top:126px;width:27px;height:59px;background:#fff;border:5px solid var(--deep);border-radius:0 0 10px 10px}.leg i{position:absolute;bottom:-5px;left:-5px;width:27px;height:17px;background:var(--deep);border-radius:0 0 8px 8px}.leg-one{left:62px}.leg-two{left:99px}.leg-three{right:51px}.leg-four{right:18px}.tail{position:absolute;z-index:-1;right:24px;top:55px;width:54px;height:64px;border-right:7px solid var(--deep);border-radius:50%;transform:rotate(25deg)}.tail b{position:absolute;right:-12px;bottom:-5px;width:18px;height:24px;background:var(--deep);border-radius:50%}.cow-shadow{position:absolute;left:47px;bottom:18px;width:205px;height:27px;border-radius:50%;background:#3d7b4934}.grass-tufts{position:absolute;left:0;right:0;bottom:15px;color:#367b49;font-size:25px;letter-spacing:5px}.cow.dance{animation:cowDance .55s ease-in-out infinite}.cow.eat{animation:eat 1.1s ease-in-out infinite}.cow.jump{animation:cowJump .62s ease-in-out 4}.leg-count{position:absolute;inset:0;pointer-events:none}.number-bubble{position:absolute;display:grid;place-items:center;width:38px;height:38px;border:4px solid #fff;border-radius:50%;background:var(--yellow);box-shadow:0 4px 0 #be8c22;color:#735011;font-weight:900;font-size:20px;animation:pop .35s both}.number-bubble:nth-child(1){left:75px;top:178px}.number-bubble:nth-child(2){left:112px;top:184px}.number-bubble:nth-child(3){right:75px;top:184px}.number-bubble:nth-child(4){right:40px;top:174px}.actions{position:relative;z-index:10;min-height:72px}.play-button,.done-button,.secondary-button{border:0;cursor:pointer;min-height:61px;border-radius:22px;font-weight:900;letter-spacing:.5px;box-shadow:0 7px 0 #cb9422,0 10px 25px #27523526;transition:transform .15s,box-shadow .15s}.play-button{display:flex;align-items:center;gap:12px;padding:0 34px;background:var(--yellow);color:#4b492d;font-size:18px}.play-icon{display:grid;place-items:center;width:35px;height:35px;padding-left:3px;background:#fff;border-radius:50%;color:#ef826e}.play-button:active,.done-button:active,.secondary-button:active,.choice:active{transform:translateY(5px);box-shadow:0 2px 0 #cb9422}.choices{position:relative;z-index:9;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:3px 0 10px}.choices[hidden],.result-actions[hidden],.progress[hidden]{display:none}.choice{border:4px solid #fff;background:#fff9e8;min-height:82px;border-radius:19px;color:var(--deep);font-size:15px;font-weight:900;box-shadow:0 6px 0 #3e8555;cursor:pointer}.choice span{display:block;font-size:25px;margin-bottom:4px}.choice.wrong{animation:shake .35s;background:#ffd7d1}.choice.right{animation:pop .45s;background:#fff29b}.result-actions{position:relative;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.secondary-button,.done-button{min-height:58px;font-size:14px;padding:0 12px}.secondary-button{background:#fff;color:#386152;box-shadow:0 6px 0 #b7cfbd}.done-button{background:var(--yellow);color:#55471f}.progress{position:absolute;z-index:20;left:18px;right:18px;bottom:max(12px,env(safe-area-inset-bottom));height:7px;border-radius:8px;background:#fff8;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#f6ca41}.sound-toggle{position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));z-index:10;border:0;border-radius:50%;width:40px;height:40px;background:#fff9;color:#426554;font-size:20px;font-weight:900;cursor:pointer}.sound-toggle.muted{opacity:.55}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30}.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall 2.1s linear forwards}.finished .sky{background:linear-gradient(#9de4f6 0 61%,#78c968 61%)}.done-state .cow{animation:cowIdle 2.8s ease-in-out infinite}.done-state .lesson-card{animation:pop .5s}.app:not(.playing) .progress{opacity:0}.playing .progress{opacity:1}@keyframes cowIdle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes cowDance{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11px) rotate(3deg)}}@keyframes eat{0%,100%{transform:rotate(0)}50%{transform:translate(-12px,12px) rotate(-10deg)}}@keyframes cowJump{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-38px) rotate(3deg)}}@keyframes pop{0%{transform:scale(.2);opacity:0}75%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (max-height:700px){.lesson-card{min-height:104px}.lesson-card h1{font-size:36px}.cow-wrap{height:222px;transform:scale(.88);margin:-12px 0 -8px}.stage{padding-bottom:20px}.choice{min-height:68px}}@media (min-width:700px){.app{max-width:520px;min-height:850px;margin:20px auto;border-radius:38px;box-shadow:0 30px 80px #1d463a50}.sky{border-radius:38px}body{background:#eaf6e5}.stage{width:430px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* The user's colored cow artwork replaces the original CSS-drawn character. */
img.cow{width:258px;height:224px;left:20px;top:8px;object-fit:contain;object-position:center;filter:drop-shadow(0 9px 0 #36654620)}
img.cow{top:44px}
img.cow.still{animation:none;transform:none;left:21px;top:44px}
img.cow.greet{animation:cowGreet .75s ease-in-out infinite;transform-origin:50% 85%}
img.cow.bounce{animation:cowBounce .65s ease-in-out infinite}
img.cow.walk{animation:cowWalk 1.2s ease-in-out infinite}
img.cow.count{animation:cowCount 1.25s ease-in-out infinite}
img.cow.milk{animation:cowMilk 1s ease-in-out infinite}

/* Illustrated farm backdrop created for this coloring-book experience. */
.sky{background-image:linear-gradient(#ffffff0a,#143c2612),url("farm-background.png");background-size:cover;background-position:center center}
.sky .sun,.sky .cloud,.sky .hills,.sky .fence{display:none}
.finished .sky{background-image:linear-gradient(#fff57a12,#143c2612),url("farm-background.png");background-size:cover;background-position:center center}
.brand{background:#ffffffe8;box-shadow:0 4px 14px #24492e21}
.lesson-card{text-shadow:0 2px 7px #ffffffb8}
.lesson-card h1{text-shadow:0 3px 0 #fff,0 5px 16px #264d3759}
.eyebrow:empty,.subline:empty{display:none}
@keyframes cowGreet{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes cowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px) scale(1.02)}}
@keyframes cowWalk{0%,100%{transform:translateX(-7px) translateY(0)}50%{transform:translateX(7px) translateY(-5px)}}
@keyframes cowCount{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes cowMilk{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) scale(1.015)}}
.grass-tufts{display:none}
.cow-shadow{left:48px;bottom:-10px;width:205px;height:24px;background:#244f2f52;filter:blur(2px)}
.number-bubble:nth-child(1){top:216px}.number-bubble:nth-child(2){top:222px}.number-bubble:nth-child(3){top:222px}.number-bubble:nth-child(4){top:212px}
@keyframes cowJump{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-3deg) scale(1.035)}70%{transform:rotate(3deg) scale(1.035)}}

/* Landing composition: cow in the foreground grass, play control below it. */
.app:not(.playing):not(.finished):not(.done-state):not([data-scene]) .cow-wrap{position:relative;top:clamp(70px,10vh,105px)}
.app:not(.playing):not(.finished):not(.done-state):not([data-scene]) #startActions{position:relative;top:clamp(125px,18vh,165px)}
.app:not(.playing):not(.finished):not(.done-state):not([data-scene]) .cow-shadow{bottom:-11px;background:#173d255f;width:198px;left:51px;height:22px}
.app[data-scene="eat"] .grass-tufts{animation:grassWiggle .55s ease-in-out infinite}
.app[data-scene="walk"] .cow-shadow{animation:shadowWalk 1.2s ease-in-out infinite}
@keyframes grassWiggle{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}
@keyframes shadowWalk{0%,100%{transform:translateX(-7px) scaleX(.96)}50%{transform:translateX(7px) scaleX(1.03)}}