:root{--ink:#354e59;--paper:#fff9ed;--pink:#ffb7a8;--peach:#ffd6b7;--yellow:#f8d96b;--mint:#a9ddc7;--sky:#a8c9e8;--purple:#d3c0e6;--rose:#f7dfe1;--outline:#53616b;--font:"Chalkboard SE","Marker Felt","Comic Sans MS","Trebuchet MS",system-ui,sans-serif}
*{box-sizing:border-box}html{height:100%;background:#e5efec}body{margin:0;min-height:100%;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent;overflow-x:hidden}button{font-family:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #718ed9;outline-offset:3px}button:disabled{cursor:default}svg{overflow:visible}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 16%,#fff7e9 0,transparent 36%),radial-gradient(circle at 90% 88%,#d5e9ee 0,transparent 48%)}.device{position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(#7e7d6f22 .65px,transparent 1px);background-size:8px 8px;display:flex;flex-direction:column}.device:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 0 80px #ffcfa323}.app-header{height:auto;min-height:82px;padding:calc(env(safe-area-inset-top,0px) + 14px) 19px 10px;display:flex;align-items:center;justify-content:space-between;gap:7px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:8px;white-space:nowrap}.brand-mark{width:38px;height:38px;flex-shrink:0}.brand-name{font-size:clamp(22px,6vw,29px);letter-spacing:-1.2px;font-weight:900;transform:rotate(-2deg);line-height:1}.small-caption{font:700 10px var(--font);letter-spacing:1.5px;color:#758e88;text-transform:uppercase;display:block;margin-top:6px}.header-tools{display:flex;align-items:center;gap:8px}.icon-button{display:grid;place-items:center;flex-shrink:0;background:#ffffffbf;color:var(--ink);border:2.5px solid #5a697065;border-radius:18px;width:46px;height:46px;box-shadow:1px 3px 0 #53616b1c}.icon-button svg{width:23px;height:23px}.main-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;position:relative;padding:10px 17px max(calc(env(safe-area-inset-bottom,0px) + 18px),20px)}.corner-doodle{position:absolute;pointer-events:none;width:70px;opacity:.8;z-index:-1}.corner-doodle.left{top:18%;left:-25px;transform:rotate(-19deg)}.corner-doodle.right{top:28%;right:-30px;transform:rotate(22deg)}.intro-content{justify-content:center;gap:10px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 25px)}.intro-scene{position:relative;width:min(90%,390px);height:270px;display:grid;place-items:center;animation:floatUp 4s ease-in-out infinite}.intro-scene svg{width:100%;height:100%}.welcome-title{text-align:center;font-size:clamp(38px,11vw,54px);letter-spacing:-2px;line-height:1.05;margin:0 0 4px;color:#375761;text-shadow:2px 3px 0 #f3d9b3;transform:rotate(-2deg)}.welcome-subtitle{font-size:19px;text-align:center;line-height:1.4;margin:2px 16px 23px;color:#687b7c;max-width:330px}.big-button{width:min(100%,320px);min-height:78px;display:flex;align-items:center;justify-content:center;gap:14px;background:#f1c765;border:3px solid #53616b;border-radius:26px 31px 27px 25px;color:var(--ink);font-size:26px;font-weight:900;box-shadow:3px 7px 0 #ba9e68,0 15px 30px #c6a8762b;transition:transform .16s,box-shadow .16s}.big-button:active{transform:translate(3px,6px) rotate(1deg);box-shadow:0 1px 0 #ba9e68}.big-button svg{width:27px;height:27px}.welcome-footer{font-size:12px;font-weight:800;letter-spacing:.35px;color:#83928c;text-align:center;padding-top:11px}.progress{width:100%;max-width:550px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 2px 8px;min-height:28px}.progress-left{font-size:14px;font-weight:900;color:#76847f;letter-spacing:.4px}.progress-track{display:flex;gap:6px;align-items:center}.progress-dot{width:11px;height:11px;border-radius:50%;background:#e2e5d6;border:1.5px solid #839d93}.progress-dot.done{background:#a9ddc7}.progress-dot.current{background:#f1c765;transform:scale(1.15)}.praise-tag{font-size:14px;font-weight:900;color:#628e80}.equation-area{text-align:center;width:100%;padding:7px 0 4px}.eyebrow{font-weight:900;color:#798c83;font-size:16px;letter-spacing:.1px;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:7px}.eyebrow svg{width:22px;height:22px}.equation{display:flex;justify-content:center;align-items:center;gap:clamp(7px,2.7vw,18px);font-weight:900;font-size:clamp(56px,15vw,90px);line-height:1.17;letter-spacing:-2px;padding:8px 0 1px;user-select:none}.equation .n1{color:#e18370;transform:rotate(-5deg)}.equation .n2{color:#569d91;transform:rotate(3deg)}.equation .op{color:#b0a0b9;transform:rotate(7deg);font-size:.78em}.equation .equals{font-size:.68em;color:#a7aead}.equation .unknown{color:#ceaa43;transform:rotate(-7deg)}.instruction{font-size:20px;font-weight:800;line-height:1.26;text-align:center;color:#647a79;margin:6px 0 12px;max-width:370px}.visual-board{width:100%;max-width:540px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:12px;margin:5px 0 19px}.count-card{position:relative;border:2.4px solid #74847a7d;background:#ffffffb0;border-radius:26px 23px 29px 23px;box-shadow:3px 5px 0 #53616b12;min-height:174px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px 10px;overflow:hidden}.count-card:first-child{background-color:#fff0e9c0}.count-card:last-child{background-color:#ecf8edc0}.count-card:nth-child(2){transform:rotate(1deg)}.count-card:nth-child(1){transform:rotate(-1deg)}.count-card .card-num{position:absolute;top:7px;left:13px;font-weight:1000;font-size:20px;color:#8e9282}.hand-set{display:flex;align-items:end;justify-content:center;gap:0;width:100%;height:140px}.hand-svg{width:min(100%,140px);height:100%;filter:drop-shadow(1px 3px 0 #64706b1c)}.hand-set.two .hand-svg{width:55%;margin:0 -5px}.animal-group{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;min-height:125px;align-content:center;width:100%}.animal-card{width:clamp(54px,12.5vw,78px);height:clamp(67px,14.5vw,94px);margin:-1px -3px;filter:drop-shadow(1px 3px 0 #525e6024)}.animal-card:nth-child(even){transform:rotate(6deg)}.animal-card:nth-child(odd){transform:rotate(-5deg)}.animal-svg{width:100%;height:100%;transform-origin:center 83%}.animal-card.happy .animal-svg{animation:happyHop .47s ease-in-out 3}.answer-wrap{width:100%;max-width:510px;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:auto}.answer-label{font-size:16px;color:#73847f;font-weight:900}.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:13px}.answer{height:100px;border:3px solid #67777a;background:#fff5d6;border-radius:25px 29px 25px 30px;font-size:clamp(47px,12vw,64px);color:var(--ink);font-weight:1000;box-shadow:3px 6px 0 #aebbb52e;position:relative;transition:transform .16s}.answer:nth-child(2){background:#d7f2df;transform:rotate(-2deg)}.answer:nth-child(3){background:#e9e0f6;transform:rotate(2deg)}.answer:active{transform:translateY(5px)}.answer.wrong{animation:wiggle .35s ease;background:#ffe4e5}.hint{height:25px;font-size:17px;color:#cb7778;font-weight:900;text-align:center;margin-top:2px}.result-title{text-align:center;font-size:clamp(36px,10vw,54px);font-weight:1000;color:#55977a;text-shadow:2px 2px #e6f4d1;transform:rotate(-3deg);margin:14px 0 3px}.result-number{text-align:center;font-size:clamp(80px,23vw,122px);line-height:1.1;font-weight:1000;color:#e8a756;text-shadow:3px 5px 0 #f7e6cc;transform:rotate(-5deg)}.result-instruction{font-size:20px;text-align:center;color:#587477;font-weight:900;line-height:1.2;max-width:350px;margin:6px auto 12px}.result-visual{width:100%;min-height:192px;display:flex;justify-content:center;align-items:center;flex-direction:column;margin:8px auto;max-width:510px;border:2.5px dashed #acc8b6;background:#f0f9eac2;border-radius:35px 28px 32px 27px;padding:9px 8px}.result-hands{height:194px;width:100%;display:flex;align-items:end;justify-content:center;gap:0}.result-hands .hand-svg{width:min(47%,180px);height:191px}.result-hands .hand-svg:only-child{width:min(72%,225px)}.result-animals{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;width:100%}.result-animals .animal-card{width:clamp(55px,12vw,79px);height:clamp(67px,14vw,96px)}.counting-message{font-size:18px;min-height:26px;font-weight:900;color:#6d8981;margin:0 0 5px}.bottom-actions{margin-top:auto;width:100%;display:flex;align-items:center;flex-direction:column;gap:12px;padding-top:13px}.next-button{background:#f6cf7c;min-height:65px;font-size:22px;width:min(100%,310px)}.interaction-title{font-size:22px;line-height:1.2;text-align:center;font-weight:950;color:#557a70;margin:7px auto 5px}.care-button{display:flex;align-items:center;justify-content:center;gap:14px;background:#ffd8a7;border:3px solid #748480;border-radius:27px;padding:10px 21px;min-width:245px;min-height:83px;color:var(--ink);font-size:22px;font-weight:950;box-shadow:3px 6px 0 #9eaba326}.care-button svg{width:55px;height:55px;flex-shrink:0}.care-button.done{background:#c6eccd;transform:scale(1.03)}.care-celebration{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.success-doodle{width:100px;height:50px;position:absolute;top:-14px;left:calc(50% + 80px);pointer-events:none;animation:pop .6s both}.confetti{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}.confetti-piece{position:absolute;top:-6%;width:10px;height:18px;border-radius:4px;animation:fall var(--dur) ease-in var(--delay) forwards;transform:rotate(var(--rot));opacity:.95}.cloudscape{position:absolute;bottom:-10px;left:0;right:0;height:100px;background:#e0efdcc0;clip-path:polygon(0 60%,10% 40%,24% 59%,42% 37%,62% 58%,78% 42%,100% 62%,100% 100%,0 100%);z-index:-1}.care-nudge{display:block;font-size:14px;color:#7e938e;text-align:center;max-width:280px;margin:4px}.status-toast{margin:0 auto;font-size:16px;color:#599b82;font-weight:900;min-height:26px;max-width:320px;text-align:center}.parent-panel{width:min(100%,450px);margin:50px auto 0;padding:25px 23px;background:white;border:2px solid #879b91;border-radius:30px;text-align:center;box-shadow:6px 7px 0 #9ca8a326}.parent-panel h1{font-size:31px}.parent-panel p{line-height:1.5;color:#657c77;font-size:16px}.secondary-button{padding:14px 20px;background:#e3eee9;border:2px solid #7c9693;border-radius:16px;color:#45656a;font-size:17px;font-weight:800;min-height:55px;margin:8px}.parent-panel .btn-row{display:flex;flex-wrap:wrap;justify-content:center}.volume-off-line{width:2.3px;height:23px;background:#53616b;transform:rotate(45deg);position:absolute;top:10px}.muted{opacity:.6}.speech-bubble{position:absolute;right:7%;top:4%;width:70px;transform:rotate(9deg)}.helper-illustration{width:38px;height:38px}.pet-heart{position:absolute;color:#df8495;animation:floatHeart 1s ease forwards;font-size:40px;pointer-events:none}.animal-pet{border:0;background:transparent;padding:0;position:relative}.animal-pet:active{transform:scale(.95)}.animal-pet .animal-card{pointer-events:none}.animal-pet.focus{outline:3px dashed #9ad0b2;border-radius:24px}.voice-alert{font-size:13px;text-align:center;color:#986d52;max-width:310px;padding:5px}.welcome-subtitle strong{color:#569b8a}
@keyframes floatUp{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes happyHop{0%,100%{transform:translateY(0) rotate(0)}32%{transform:translateY(-21px) rotate(-6deg)}65%{transform:translateY(-6px) rotate(6deg)}}@keyframes pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes fall{0%{transform:translate3d(0,-20px,0) rotate(var(--rot));opacity:0}9%{opacity:1}100%{transform:translate3d(var(--shift),115vh,0) rotate(710deg);opacity:0}}@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes sway{50%{transform:rotate(4deg)}}@keyframes pulse{50%{transform:scale(1.08)}}.animate-entry{animation:pop .42s ease both}.care-button.ready{animation:pulse 1.5s ease-in-out infinite}.result-hand-evolve .hand-svg{animation:pop .24s ease both}
@media (min-width:680px){.device{width:430px;min-height:min(880px,calc(100dvh - 40px));height:min(880px,calc(100dvh - 40px));max-height:950px;margin:20px auto;border:8px solid #283f4f;border-radius:45px;box-shadow:0 20px 70px #64818135,0 0 0 3px #8ca5a0a8;overflow-y:auto}.app-header{padding-top:20px}.intro-scene{height:285px}}
@media (max-height:690px){.app-header{min-height:65px;padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:5px}.main-content{padding-top:2px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 11px)}.equation{font-size:clamp(50px,13vw,70px);padding-top:0}.instruction{font-size:18px;margin:2px 0 6px}.visual-board{margin:3px 0 12px}.count-card{min-height:139px}.hand-set{height:121px}.animal-group{min-height:115px}.answer{height:85px}.intro-scene{height:215px}.result-visual{min-height:160px}.result-hands{height:150px}.result-hands .hand-svg{height:150px}.result-number{font-size:73px}.result-title{font-size:38px;margin-top:5px}.result-animals .animal-card{height:76px;width:60px}.welcome-subtitle{margin-bottom:9px}}
@media (max-width:355px){.brand-name{font-size:22px}.small-caption{font-size:8px}.icon-button{width:41px;height:41px}.visual-board{gap:7px}.count-card{padding:4px}.answer{height:84px}.answers{gap:8px}.animal-card{width:55px;height:75px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.animal-pet{background:none;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:20px}.animal-pet:active .animal-svg{transform:scale(.9) rotate(-9deg)}.animal-pet:focus-visible{outline:3px dashed #7cbd9c}.care-visual{position:absolute;margin-top:-60px;right:5%;width:71px;height:71px;filter:drop-shadow(2px 4px 0 #e1b89a44);animation:happyHop .55s ease-in-out 2}.care-visual svg{width:100%;height:100%}.result-visual{position:relative}



/* Zählwiese 2 – Original Wachsmalstift-Bilderwelt */
:root{
 --ink:#4b473d;--paper:#fff3d9;--outline:#8a654f;
 --font:"Chalkboard SE","Marker Felt","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
}
html{background:#a8cedd!important;overflow-x:hidden}
body{color:#5d493a;overflow-x:hidden;background:#c9e6d6}
body:before{display:none}
.device{
 width:100%;min-height:100svh;min-height:100dvh;height:auto;
 background:#d1e9e9 url("/meadow.svg") center center/cover no-repeat;
 isolation:isolate;overflow:visible;
}
.device:after{box-shadow:inset 0 0 46px #fff0c55c;z-index:-1}
.app-header{
 min-height:76px; padding:calc(env(safe-area-inset-top,0px) + 9px) 13px 3px;
 align-items:center;
}
.brand-mark{width:32px;height:32px;filter:drop-shadow(0 2px #e4b871)}
.brand-name{
 color:#df6b50;display:inline-block;font-size:clamp(29px,7.4vw,36px);
 letter-spacing:-1.6px;text-shadow:1.2px 2px 0 #ffdf9d, -1px -1px 0 #fff4d7;
 -webkit-text-stroke:.25px #a55e45;
}
.small-caption{font-size:9.8px;letter-spacing:.2px;text-transform:none;margin-top:0;color:#3f745d;text-shadow:0 1px #ffffe2}
.icon-button{
 height:47px;width:47px;border:3px solid #a37848; border-radius:50%;
 background:linear-gradient(135deg,#ffefb7,#e8b76b);
 box-shadow:inset 1px 2px #fff7d3, 2px 4px 0 #a0784f8f;
}
.icon-button svg{width:24px;height:24px}
.main-content{padding:7px 13px max(18px,calc(env(safe-area-inset-bottom,0px) + 17px));min-height:calc(100dvh - 86px)}
.intro-content{gap:6px;justify-content:center}
.intro-scene{
 width:min(95%,350px);height:245px;animation:floatUp 4.5s ease-in-out infinite;
 filter:drop-shadow(2px 5px 1px #658d7444);
}
.intro-scene img{width:100%;height:100%;object-fit:contain}
.welcome-title{color:#d45e48;font-size:clamp(43px,11vw,58px);line-height:1.02;text-shadow:2px 3px 0 #fff2b9, -1px -1px #fff4d9;letter-spacing:-1px;-webkit-text-stroke:.45px #b36a52}
.welcome-subtitle{
 max-width:345px;margin:5px 0 20px;line-height:1.37;font-size:20px;font-weight:800;
 color:#4c765f; text-shadow:1px 1px #fff4d9;
}
.welcome-subtitle strong{color:#ac664d}
.big-button{
 border:5px solid #94683f;background:linear-gradient(180deg,#f6d69c,#e9ad66 60%,#e5ac67);
 box-shadow:inset 0 3px #fff1c2,3px 6px 0 #9b703e,0 14px 28px #74684631;
 color:#644632;font-size:26px;border-radius:17px 26px 19px 23px;
 transform:rotate(-1deg);text-shadow:1px 2px #ffeac3;
}
.big-button svg{filter:drop-shadow(1px 2px #c6a375)}
.big-button:active{transform:translate(3px,5px) rotate(-1deg);box-shadow:inset 0 3px #fff2c4}
.welcome-footer{color:#526d5c;text-shadow:1px 1px #fffbdc;font-size:12px}
.progress{width:100%;margin:0 auto 5px;max-width:540px;min-height:30px;padding:0 4px}
.progress-left{color:#566b48;font-size:15px;text-shadow:1px 1px #fff1ca}
.progress-dot{width:12px;height:12px;border:2px solid #7b9666;background:#fcf5d8}
.progress-dot.current{background:#f0c75a;box-shadow:0 0 0 2px #f5e9bb}
.progress-dot.done{background:#7ac36b}
.equation-area{
 width:100%;max-width:520px;margin:2px auto 7px;padding:12px 13px 13px;
 background:
 repeating-linear-gradient(-16deg,transparent 0 13px,#d4f3d20a 14px 15px),
 repeating-linear-gradient(8deg,#244c3b 0 25px,#2e5741 26px 28px,#214938 30px 55px);
 border:9px solid #b88446;border-radius:14px 12px 17px 13px;
 box-shadow:0 0 0 2px #845b3a, inset 0 0 0 3px #a1b69b, inset 0 0 20px #132b24,4px 6px 0 #584b3355;
 position:relative; transform:rotate(-.25deg)
}
.equation-area:after{
 content:"";position:absolute;inset:-9px;pointer-events:none;border-radius:inherit;
 background:repeating-linear-gradient(171deg,transparent 0 5px,#784e2830 6px 7px,transparent 10px 17px);
}
.eyebrow{font-size:15px;color:#e0eac7;letter-spacing:0;text-shadow:1px 1px 0 #436449}
.equation{padding:2px 0 0;gap:clamp(6px,3vw,18px);font-size:clamp(52px,14vw,76px);
 font-family:"Chalkboard SE","Marker Felt",sans-serif;letter-spacing:-1px;
}
.equation .n1,.equation .n2,.equation .op,.equation .equals,.equation .unknown{
 color:#fff9e6;text-shadow:1px 1px #95bba4,-2px -2px #e9f2d566;transform:none;
}
.equation .unknown{color:#f5d77b;text-shadow:0 2px #997e4a}
.instruction{margin:7px 0 8px;max-width:370px;font-size:19px;color:#4c694e;text-shadow:1px 1px #fffbd8}
.visual-board{gap:10px;margin:3px 0 9px;max-width:510px;align-items:stretch}
.count-card{
 border:4px solid #b78a5d;background:#fff3d6e8!important;
 border-radius:21px 23px 22px 20px;
 box-shadow:inset 2px 2px #fff9ea,3px 5px 0 #98765071,0 0 0 1px #aa8657;
 padding:9px 4px 10px;min-height:158px;transform:none!important;
 overflow:hidden;
}
.count-card:after{content:"";inset:0;position:absolute;pointer-events:none;
 background:repeating-linear-gradient(25deg,transparent 0 8px,#9e8c5d10 9px 10px);border-radius:18px}
.count-card:first-child{background:#ffecd5e8!important}
.count-card:last-child{background:#edf5d9ed!important}
.count-card .card-num{top:6px;left:10px;color:#a4704e;font-size:22px;text-shadow:1px 1px white}
.hand-set{height:154px;gap:0}
.hand-svg{height:154px;width:min(100%,137px);filter:drop-shadow(1px 3px 0 #755d4540)}
.hand-set.two .hand-svg{width:58%;margin:0 -8px}
.animal-group{min-height:140px;max-width:100%;row-gap:0}
.animal-card{width:clamp(47px,11.5vw,72px);height:clamp(59px,13.8vw,87px);filter:drop-shadow(1px 2px 0 #a47e5755)}
.animal-svg{filter:contrast(1.08) saturate(.88)}
.answer-wrap{gap:8px;max-width:510px;margin-top:auto;width:100%;padding-bottom:10px}
.answer-label{color:#52694e;font-size:17px;text-shadow:1px 1px #fffbd6}
.answers{gap:11px}
.answer{
 min-height:92px;height:clamp(88px,12.5vh,105px);
 border:4px solid #a67648;border-radius:27px 24px 29px 23px;
 font-family:"Chalkboard SE","Marker Felt",sans-serif;
 color:#705037;font-size:clamp(48px,14vw,68px);
 box-shadow:inset 1px 3px #fff7d9,3px 5px 0 #765f436e;
 text-shadow:1px 2px #fff6cf
}
.answer:nth-child(1){background:linear-gradient(140deg,#b6e1fa,#83c2e8)}
.answer:nth-child(2){background:linear-gradient(140deg,#c1eab4,#8ed58b);transform:rotate(-1deg)}
.answer:nth-child(3){background:linear-gradient(140deg,#ffe7ae,#f9be67);transform:rotate(1deg)}
.answer:active{filter:brightness(.97);transform:translateY(4px)}
.hint{font-size:18px;color:#ac685a;min-height:25px;text-shadow:1px 1px #fff7d8}
.cloudscape,.corner-doodle{display:none}
.result-title{margin:8px 0 3px;color:#eeaf45;font-size:clamp(37px,10vw,47px);
 text-shadow:2px 2px #fff9d9,-1px -1px #a1764e;-webkit-text-stroke:.6px #866b4b}
.result-number{font-family:"Chalkboard SE","Marker Felt",sans-serif;color:#d37352;text-shadow:3px 4px #ffe3a9;font-size:clamp(73px,22vw,111px)}
.result-instruction{margin:2px 0 8px;color:#41684e;text-shadow:1px 1px #fff8d4;font-size:20px}
.result-visual{
 background:#fff1d6f0; border:6px solid #bf8d55;border-radius:24px;
 box-shadow:inset 0 0 0 2px #fff7e1,4px 7px 0 #80604063;
 min-height:178px;margin:6px auto;max-width:510px
}
.result-hands{height:190px;align-items:end}
.result-hands .hand-svg{height:180px;width:min(49%,175px)}
.result-hands .hand-svg:only-child{width:min(77%,215px)}
.counting-message{color:#6d7354;font-size:19px}
.result-animals .animal-card{width:clamp(51px,12vw,77px);height:clamp(65px,14vw,91px)}
.bottom-actions{padding-top:6px;gap:7px}
.interaction-title{font-size:21px;color:#4c7454;text-shadow:1px 1px #fff7db}
.care-button{
 min-height:79px;border:4px solid #9b7153;
 background:linear-gradient(#f4d69a,#edb775);
 color:#5c4d37;box-shadow:inset 0 2px #fff3c1,3px 5px 0 #79654880;
 font-size:23px;
}
.care-button.done{background:#a7dba0}
.next-button{min-height:72px}
.status-toast{color:#467955}
.friend-banner{
 display:block;width:min(74%,245px);max-height:118px;object-fit:contain;
 filter:drop-shadow(1px 4px #6481655a);margin:0 auto -7px;
}
.friend-peek{width:min(51%,170px);height:auto;display:block;margin:0 auto -10px;filter:drop-shadow(1px 3px #64816556)}
.parent-panel{background:#fff2d9;border:5px solid #a17a51;border-radius:19px;
 box-shadow:4px 7px 0 #7855367d}
.confetti{z-index:9}
.confetti-piece{border:1px solid #fff1c874}
@media (min-width:680px) {
 .device{
  width:430px;min-height:min(900px,calc(100dvh - 34px));height:min(900px,calc(100dvh - 34px));
  margin:17px auto;border:8px solid #405148;border-radius:43px;overflow-y:auto;
  background-size:100% 100%;
  box-shadow:0 17px 80px #54776a44,0 0 0 3px #9ba999;
 }
 .app-header{padding-top:16px}
 .main-content{min-height:calc(100% - 79px)}
}
@media(max-height:750px){
 .intro-scene{height:193px}
 .app-header{min-height:66px;padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
 .main-content{min-height:calc(100dvh - 73px)}
 .equation-area{padding:7px 10px;border-width:7px}
 .equation{font-size:clamp(45px,13vw,67px)}
 .instruction{font-size:17px;margin:3px 0 5px}
 .visual-board{margin:2px 0 5px}
 .count-card{min-height:132px}
 .hand-set,.hand-svg{height:127px}
 .animal-group{min-height:114px}
 .answer{height:78px;min-height:78px}
 .answer-label{font-size:15px}
 .friend-peek{max-height:58px;width:auto}
 .result-hands,.result-hands .hand-svg{height:150px}
 .result-visual{min-height:150px}
 .result-number{font-size:70px}
}
@media (max-width:360px){
 .visual-board{gap:7px}
 .count-card{min-height:132px}
 .hand-set,.hand-svg{height:130px}
 .answer{height:82px;min-height:82px}
 .brand-name{font-size:27px}
 .small-caption{font-size:8px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.care-visual{display:grid;place-items:center;height:60px;min-height:60px;margin:-2px auto 0;animation:treatRise .9s cubic-bezier(.2,.9,.2,1) both}
.care-visual svg{width:72px;height:72px;filter:drop-shadow(2px 3px #7c86634d)}
@keyframes treatRise{from{transform:translateY(22px) scale(.3);opacity:0}65%{transform:translateY(-11px) scale(1.12);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}
.raised-finger{transform-origin:50% 80%;animation:fingerBloom .24s ease-out both}
@keyframes fingerBloom{from{opacity:.6;transform:scaleY(.93)}to{opacity:1;transform:scaleY(1)}}


/* Zählwiese: independent original crayon storybook edition, v4 */
:root{--font:"Chalkboard SE","Marker Felt","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;--wood:#cb8d48;--line:#725233}
html,body{background:#9cc8d5!important}
.device{background:#a4d3ea url('/storybook-landscape.svg') center/100% 100% no-repeat!important;overflow:hidden;min-height:100dvh}
.device:after{box-shadow:inset 0 0 20px #fff5d623,inset 0 -11px 37px #6f9a4866}
.app-header{padding:calc(env(safe-area-inset-top,0px) + 7px) 17px 4px;min-height:62px}
.brand-mark{width:31px;height:31px;transform:rotate(-8deg)}
.brand-name{color:#fff0ad!important;font-size:28px;letter-spacing:-1px;text-shadow:-1.8px -1.8px #a95d3f,2px 2px #b75a3d,3px 4px #4a80668c;-webkit-text-stroke:1px #ad7755}
.small-caption{display:none}
.icon-button{width:43px;height:43px;border:3px solid #98734b;border-radius:50%;background:#efc17c;box-shadow:2px 3px #78553791,inset 0 2px #fff4d0}
.icon-button svg{width:23px;height:23px}
.main-content{padding:0 15px max(17px,calc(env(safe-area-inset-bottom,0px) + 10px));min-height:calc(100dvh - 65px);gap:0}
.progress{min-height:63px;padding:1px 0 0;flex-direction:column;gap:3px;justify-content:center;position:relative}
.wood-heading{
 color:#684329;background:#edbc76;
 border:3.5px solid #9c653b;border-radius:10px 18px 8px 15px;
 font:900 clamp(19px,5.4vw,26px) var(--font);
 padding:7px 28px 7px;min-width:220px;text-align:center;position:relative;display:block;
 box-shadow:inset 0 3px #fbe0a1,2px 4px #74503396,0 7px 18px #8b672f40;
 text-shadow:1px 1px #f6e3bc;transform:rotate(-1.3deg);
}
.wood-heading:before{content:"";position:absolute;inset:4px 10px;opacity:.36;pointer-events:none;
 background:repeating-linear-gradient(174deg,transparent 0 7px,#9c623221 7.5px 9px,transparent 10px 15px);
 border-radius:5px}
.progress-track{gap:5px;min-height:12px}
.progress-dot{width:10px;height:10px;border:1.5px solid #8e9b6a;background:#b6daf0;box-shadow:1px 1px #ffeabb}
.progress-dot.done{background:#65ac68}
.progress-dot.current{background:#ebbf54;transform:scale(1.2)}
.progress-left{display:none}
.equation-area{
 padding:7px 12px 9px;margin:6px auto 0;width:100%;max-width:510px;min-height:150px;
 border:11px solid #a8733f;border-radius:17px 14px 19px 17px;transform:rotate(-.45deg);
 background:#234d3e!important;
 box-shadow:0 0 0 2.8px #79502e, inset 0 0 0 3px #50745a, inset 0 0 30px #091f1988, 4px 6px #564d3078;
}
.equation-area:after{inset:-10px;opacity:.7;background:repeating-linear-gradient(-15deg,transparent 0 10px,#70432225 11px 13px,transparent 14px 21px)}
.equation-area:before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;border-radius:4px;background:
 repeating-linear-gradient(3deg,transparent 0 18px,#fff4c313 19px 20px,transparent 20.5px 42px),
 repeating-linear-gradient(177deg,transparent 0 5px,#95b6a615 5.5px 6px,transparent 7px 23px);}
.eyebrow{font:800 16px var(--font);color:#e9edc7;text-shadow:0 0 2px #e7eec4,1px 1px #508367}
.equation{gap:clamp(4px,2.3vw,13px);font-family:"Chalkboard SE","Marker Felt",sans-serif;font-size:clamp(60px,15vw,77px);padding:6px 0 3px;letter-spacing:-2px}
.equation span{color:#fff9e9!important;filter:drop-shadow(1px 1px #a7d1b5);text-shadow:1px 0 #d7e5c9,-1px -1px #e5ebd4!important}
.equation .unknown{color:#f7ca5d!important;text-shadow:2px 2px #b88646!important}
.instruction{margin:4px 0 3px;font-size:17px;font-weight:900;color:#2b6252;text-shadow:1px 1px #fff9d3,-1px -1px #fff4d2}
.visual-board{
 width:100%;max-width:510px;min-height:clamp(174px,25vh,230px);height:clamp(174px,25vh,230px);
 margin:3px auto 0;gap:4px;display:grid;grid-template-columns:1fr 1fr;align-items:end;
 background:transparent;border:none;
}
.count-card,.count-card:first-child,.count-card:last-child{
 background:transparent!important;border:none;box-shadow:none;border-radius:0;transform:none!important;
 overflow:visible;min-height:100%;height:100%;padding:2px 0 4px;display:flex;justify-content:flex-end;
}
.count-card:after{display:none}
.count-card .card-num{
 left:22px;top:0;font-size:18px;color:#694d34;z-index:1;border-radius:15px;
 background:#ffefccdd;padding:0 9px;transform:rotate(-8deg);border:2px solid #e8ca9478;
}
.hand-set,.hand-svg{height:clamp(171px,25vh,225px);max-height:100%}
.hand-set{align-items:end;overflow:visible}
.hand-svg{width:min(94%,170px);filter:drop-shadow(3px 6px 0 #55826848)}
.hand-set.two .hand-svg{width:60%;margin:0 -10px}
.animal-group{min-height:180px;max-height:224px;align-content:center;justify-content:center;gap:0}
.animal-card{width:clamp(56px,14.7vw,77px);height:clamp(63px,16.3vw,95px);margin:-4px -8px;filter:drop-shadow(2px 5px 2px #6280574a)}
.animal-card:nth-child(3n){transform:rotate(6deg) translateY(2px)}
.animal-card:nth-child(even){transform:rotate(-5deg)}
.animal-svg{transform:scale(1.21);filter:saturate(1.03) contrast(1.04)}
.answer-wrap{margin-top:auto;gap:2px;padding-bottom:2px;position:relative;justify-content:end;min-height:203px;max-width:510px}
.friend-peek{
 width:auto!important;max-width:180px!important;max-height:101px!important;height:98px!important;
 margin:-2px auto -6px!important;object-fit:contain;
 filter:drop-shadow(2px 3px 1px #65835a66)
}
.answer-label{font-weight:900;font-size:16px;color:#356549;text-shadow:1.5px 1.5px #ffefd2;margin:0 0 6px}
.answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.answer,.answer:nth-child(2),.answer:nth-child(3),.answer:nth-child(4){
 min-width:0;min-height:76px;height:clamp(76px,10vh,91px);padding:0;
 border:4px solid #f9efd1;outline:2.5px solid #ba9056;border-radius:28px 27px 30px 28px;
 font:900 clamp(42px,11vw,59px) var(--font);color:#5b5140;
 box-shadow:inset 0 3px 0 #fff9e099,2px 5px 0 #8f865a8a;
 text-shadow:1px 2px #fff6d0;transform:rotate(0);
}
.answer:nth-child(1){background:#87ceef!important;color:#335c87}
.answer:nth-child(2){background:#9bd58b!important;color:#356c48}
.answer:nth-child(3){background:#ffd273!important;color:#8e552f}
.answer:nth-child(4){background:#f4a8bd!important;color:#983d5c}
.answer:active{transform:scale(.93)!important}
.answer.wrong{animation:wiggle .34s}
.hint{font-size:14px;min-height:16px;color:#9e5746;text-shadow:1px 1px #fff3ce}
.result-title{font:900 clamp(35px,9vw,43px) var(--font);color:#edb64d;
 text-shadow:1px 2px #fff8c5,-1px -1px #90644d,2px 3px #a15b3f;-webkit-text-stroke:.6px #9d634c}
.result-number{font-size:clamp(65px,19vw,91px);color:#eeab50;text-shadow:2px 2px #fff6c3}
.result-instruction{font-size:19px;color:#316048;margin:1px auto 5px;text-shadow:1px 1px #fff4d4}
.result-visual{min-height:190px;height:auto;max-height:254px;margin:4px auto 7px;overflow:visible;
 border:6px solid #a57347;border-radius:21px;background:#fff3d8ed;
 box-shadow:inset 0 0 0 3px #fff8e6,3px 5px #7055307a}
.result-hands{height:190px}
.result-hands .hand-svg{height:185px;width:min(49%,170px);max-height:unset}
.result-hands .hand-svg:only-child{width:min(75%,225px)}
.result-animals{min-height:142px;padding:8px}
.result-animals .animal-card{width:clamp(55px,14vw,77px);height:clamp(67px,15.6vw,90px)}
.counting-message{font-size:17px;min-height:23px}
.success-doodle{width:86px;height:70px;right:-20px;top:-9px}
.bottom-actions{margin-top:auto;padding:8px 0 0;gap:5px}
.next-button{width:min(100%,300px);min-height:72px;border-radius:13px}
.care-button{width:min(100%,288px);min-height:81px}
.care-button svg{width:56px;height:56px}
.interaction-title{color:#316048;font-size:19px;text-shadow:1px 1px #fff8cf}
.confetti{position:absolute;z-index:11}
.cloudscape{display:none}
.intro-content{justify-content:flex-start;min-height:calc(100dvh - 64px);gap:0}
.intro-scene{width:min(100%,365px);height:clamp(230px,34vh,315px);margin:20px auto 2px}
.intro-scene img{height:100%;width:100%;object-fit:contain}
.welcome-title{
 margin:3px auto 8px;color:#dd7150;transform:rotate(-3deg);font-size:clamp(46px,12vw,59px);
 text-shadow:2px 2px #fff3c2,3px 4px #bb7349;letter-spacing:-2px}
.welcome-subtitle{
 font-size:clamp(18px,5vw,21px);max-width:340px;margin:4px auto 16px;
 color:#3e6f4d;text-shadow:1px 1px #fef6d2;line-height:1.35}
.big-button{
 background:linear-gradient(175deg,#f8dfa7,#dfae6a);
 border:4px solid #87552f;border-radius:12px 16px 10px 18px;
 box-shadow:inset 0 3px #fff1c0,2px 5px 0 #865931,0 5px 21px #82774566;
 color:#65452c;text-shadow:1px 1px #fff4d5;
 transform:rotate(-1.5deg);font-size:25px
}
.big-button:before{content:"";position:absolute;inset:6px 8px;opacity:.5;border-radius:inherit;pointer-events:none;
 background:repeating-linear-gradient(171deg,transparent 0 7px,#9c692524 8px 9px,transparent 10px 16px);}
.welcome-footer{color:#48684f;font-size:12px;margin:11px auto}
.parent-panel{background:#f4e0b9d9;border:5px solid #956039;border-radius:16px}
.parent-panel h1{color:#79512d}
.secondary-button{background:#f1d6a3;color:#6a4e3d;border-color:#946f43}
@media(min-width:680px){.device{width:430px;margin:17px auto;height:min(920px,calc(100dvh - 34px));min-height:min(920px,calc(100dvh - 34px));border:8px solid #3c4a47;border-radius:43px;overflow-y:auto;background-size:100% 100%!important}.main-content{min-height:calc(100% - 65px)}}
@media(max-height:735px){
 .app-header{min-height:53px}
 .main-content{min-height:calc(100dvh - 55px)}
 .progress{min-height:54px}
 .wood-heading{font-size:19px;padding:4px 22px}
 .equation-area{min-height:116px;border-width:8px;padding:5px}
 .eyebrow{font-size:13px}
 .equation{font-size:clamp(53px,13vw,62px);padding:0}
 .instruction{font-size:15px;margin:0}
 .visual-board{height:clamp(149px,23vh,180px);min-height:149px}
 .hand-set,.hand-svg{height:165px}
 .animal-group{min-height:149px}
 .animal-card{width:53px;height:62px}
 .answer-wrap{min-height:167px}
 .friend-peek{height:72px!important;max-height:72px!important}
 .answer{height:67px!important;min-height:67px!important;font-size:44px!important}
 .result-hands,.result-hands .hand-svg{height:148px}
 .result-visual{min-height:147px}
 .result-number{font-size:70px}
 .intro-scene{height:205px;margin:6px auto}
 .welcome-title{font-size:42px}
 .welcome-subtitle{font-size:18px;margin:4px auto}
}
@media(max-width:350px){
 .answer{font-size:41px!important}
 .answers{gap:5px}
 .visual-board{gap:0}
 .hand-svg{width:98%}
 .count-card .card-num{left:12px}
}
@media(prefers-reduced-motion:reduce){.raised-finger,.animal-svg,.intro-scene{animation:none!important}}

/* Pencil handwriting that is drawn stroke-by-stroke, not typographic numerals */
.equation{gap:clamp(0px,.9vw,6px);padding:3px 0;line-height:1}
.equation > span{display:flex;align-items:center;justify-content:center;gap:0;min-width:0}
.chalkglyph{display:inline-block;width:clamp(43px,12vw,62px);height:77px;vertical-align:middle;overflow:visible;filter:drop-shadow(1px 2px #90af8b55)}
.equation .op .chalkglyph,.equation .equals .chalkglyph{width:38px;height:63px}
.equation .unknown .chalkglyph{width:49px}
.care-celebration{position:relative;width:100%;margin:0 auto}
.result-title{font-size:clamp(35px,10vw,49px);position:relative;z-index:4;line-height:1.13;margin:4px auto 8px;transform:rotate(-2deg)}
.result-math{
 width:100%;max-width:520px;min-height:128px;border:10px solid #a8733f;
 border-radius:14px;background:#234d3e;box-shadow:0 0 0 2px #765135,inset 0 0 0 3px #5e8062,inset 0 0 20px #142a22a9,3px 5px #6e4e3377;
 display:flex;align-items:center;justify-content:center;gap:1px;padding:14px 7px;
 position:relative;transform:rotate(-.35deg)
}
.result-math:before{
 content:"";position:absolute;inset:1px;pointer-events:none;
 background:repeating-linear-gradient(171deg,transparent 0 11px,#f5e8bf07 12px 13px,transparent 14px 21px)
}
.result-math .chalkglyph{width:clamp(40px,11vw,56px);height:76px;z-index:2}
.result-math .chalkglyph:nth-child(2),.result-math .chalkglyph:nth-child(4){width:34px;height:57px}
.result-math .chalkglyph:last-child{filter:drop-shadow(0 0 5px #ffe29b85)}
.success-doodle{width:66px;height:58px;top:-10px;left:auto;right:-18px;z-index:5}
.result-visual{margin-top:7px}
.count-card .animal-card{width:var(--animal-size,70px)!important;height:calc(var(--animal-size,70px)*1.12)!important;margin:-5px -7px}
.count-card .animal-svg{transform:scale(1.22)}
.count-card .animal-group{max-height:235px;min-height:190px}
.home-header .brand{display:none!important}
.home-header{justify-content:flex-end}
.home-header .header-tools{margin-left:auto}
.rainbow-title{display:flex;align-items:center;justify-content:center;white-space:nowrap;
 font:900 clamp(43px,12.2vw,61px) var(--font);letter-spacing:-3px;
 margin:10px auto -4px;line-height:1.2;filter:drop-shadow(2px 3px #fef1bf);}
.rainbow-title span{display:inline-block;transform:rotate(calc((var(--i) - 4)*.9deg));
 color:#e8745d;text-shadow:1px 2px #fff5c7,2px 4px #7c846b50;
 -webkit-text-stroke:1px #8b704b}
.rainbow-title span:nth-child(2),.rainbow-title span:nth-child(7){color:#efb74b}
.rainbow-title span:nth-child(3),.rainbow-title span:nth-child(8){color:#6c9e5f}
.rainbow-title span:nth-child(4),.rainbow-title span:nth-child(9){color:#71b1da}
.rainbow-title span:nth-child(5){color:#ae7fad}
.rainbow-title span:nth-child(6){color:#e69098}
.intro-content .intro-scene{height:clamp(255px,36vh,325px);width:min(100%,375px);margin:5px auto 16px}
.intro-content .welcome-subtitle{color:#4b6143;font-size:clamp(19px,5.7vw,23px);margin:0 auto 16px;max-width:315px;text-shadow:1px 1px #f8f0cd}
.intro-content .big-button{margin:5px auto 0;min-height:84px}
.intro-content .welcome-footer{margin:14px auto}
.parent-voice-label{display:block;font-size:16px;font-weight:800;text-align:left;margin:14px 0 5px;color:#6c553e}
.parent-voice-select{display:block;min-height:45px;width:100%;max-width:100%;border:2px solid #977348;border-radius:12px;background:#fff3d7;color:#543f30;padding:8px 12px;font-size:16px;font-family:var(--font)}
.parent-panel .secondary-button{margin:6px}
@media(max-height:735px){
 .rainbow-title{font-size:42px;margin:4px auto 0}
 .intro-content .intro-scene{height:235px;margin:3px auto 4px}
 .result-math{min-height:112px;padding:6px}
 .result-math .chalkglyph{height:64px}
 .result-title{font-size:36px}
 .chalkglyph{width:40px;height:63px}
 .equation .op .chalkglyph,.equation .equals .chalkglyph{width:32px;height:53px}
 .equation-area{min-height:113px}
 .count-card .animal-group{min-height:146px}
}
.home-header{justify-content:space-between!important}.home-header .parent-gear{display:grid;margin-left:0;margin-right:auto;width:42px;height:42px}.home-header .header-tools{margin-left:auto}
@media (orientation:landscape) and (max-height:520px){.device{width:100%;height:auto;min-height:100dvh;max-height:none;overflow:visible;border:0;border-radius:0;margin:0;background-size:cover!important}.main-content{min-height:460px}.answer-wrap{margin-top:10px}.app-header{padding:4px 15px;min-height:51px}.count-card .card-num{top:-2px}}


/* V5: original hand-illustrated skin for the actual playable screens */
.wood-heading{
  width:min(100%,360px)!important;min-width:0;min-height:65px;
  background:url('/wood-sign.svg') center/100% 100% no-repeat!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:12px 14px 13px!important;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(19px,5.5vw,25px)!important;
  color:#654022!important;text-shadow:1px 1px #fff0c5;
}
.wood-heading:before{display:none!important}
.equation-area,.result-math{
  background:url('/chalk-board.svg') center/100% 100% no-repeat!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  transform:rotate(-.25deg);
}
.equation-area{padding:20px 19px 19px!important;min-height:161px}
.equation-area:before,.equation-area:after,.result-math:before{display:none!important}
.result-math{min-height:157px;padding:26px 14px 23px!important}
.equation{gap:clamp(0px,.5vw,5px)}
.chalkglyph{filter:drop-shadow(1px 1px #86aa8699)}
.answer,.answer:nth-child(1),.answer:nth-child(2),.answer:nth-child(3),.answer:nth-child(4){
  background-color:transparent!important;
  background-repeat:no-repeat!important;background-position:center!important;
  background-size:100% 100%!important;
  border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;
  color:#38608c;
  transition:transform .14s ease,filter .14s ease!important;
}
.answer:nth-child(1){background-image:url('/button-blue.svg')!important;color:#2c648b!important}
.answer:nth-child(2){background-image:url('/button-green.svg')!important;color:#366f45!important}
.answer:nth-child(3){background-image:url('/button-yellow.svg')!important;color:#8e552e!important}
.answer:nth-child(4){background-image:url('/button-pink.svg')!important;color:#873651!important}
.answer:active{transform:translateY(5px) scale(.95)!important;filter:brightness(.97)}
.crayon-answer-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;transform:rotate(-2deg)}
.crayon-answer-digit{display:block;width:min(58%,56px);height:83%;color:inherit;overflow:visible;filter:drop-shadow(.8px 1px #fff5df88)}
.crayon-answer-number.double{gap:0;transform:rotate(1deg)}
.crayon-answer-number.double .crayon-answer-digit{width:35%;max-width:30px;height:73%}
.crayon-answer-number.double .crayon-answer-digit:first-child{margin-right:-2px}
.count-card .animal-group{height:100%;min-height:100%;align-content:center;justify-content:center;gap:0}
.animal-group .animal-card{width:var(--animal-size,80px)!important;height:calc(var(--animal-size,80px)*1.18)!important;margin:-5px -8px}
.animal-card .animal-svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 2px 0 #936f513f)!important}
.animal-card:nth-child(2n) .animal-svg{transform:rotate(-3deg)}
.animal-card:nth-child(3n) .animal-svg{transform:rotate(4deg)}
.result-animals .animal-card{width:clamp(53px,13.5vw,79px)!important;height:clamp(66px,16vw,92px)!important;margin:-2px -4px}
.result-animals{max-width:100%;max-height:245px}
.big-button,.next-button,.care-button{
  background:url('/wood-sign.svg') center/100% 100% no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  color:#604324!important;text-shadow:1px 1px #fef1c9!important;
}
.big-button:before{display:none!important}
.big-button:active,.next-button:active,.care-button:active{transform:translateY(4px) scale(.985)!important}
.welcome-subtitle{color:#4b593e}
.rainbow-title{font-size:clamp(48px,13.3vw,65px)!important;letter-spacing:-1.8px!important;margin:10px auto 2px}
.intro-content .intro-scene{width:min(96%,400px)!important;height:clamp(250px,38vh,336px);margin:0 auto 9px}
.friend-peek{filter:drop-shadow(2px 3px #8d8d6963)}
.home-header{height:48px;min-height:48px}
.home-header .icon-button,.icon-button{
 background:url('/button-yellow.svg') center/100% 100% no-repeat!important;
 border:0!important;box-shadow:none!important;
}
.parent-gear{margin-left:0}
@media(max-height:745px){
  .wood-heading{min-height:52px;padding:6px 13px!important}
  .progress{min-height:56px}
  .equation-area{min-height:126px;padding:8px 15px!important}
  .equation .chalkglyph{height:61px;width:41px}
  .equation .op .chalkglyph,.equation .equals .chalkglyph{height:52px;width:31px}
  .equation .unknown .chalkglyph{width:43px}
  .result-math{min-height:113px;padding:10px!important}
  .result-math .chalkglyph{height:65px}
  .rainbow-title{font-size:clamp(41px,11vw,48px)!important;margin:5px auto}
  .intro-content .intro-scene{height:clamp(195px,32vh,230px)}
}
@media(max-width:340px){
  .answer{min-height:65px!important;height:65px!important}
  .crayon-answer-digit{height:77%}
  .count-card .animal-card{margin:-4px -10px!important}
  .wood-heading{font-size:19px!important}
}
.original-hand{object-fit:contain;overflow:visible;filter:drop-shadow(2px 4px 1px #89725540)!important}.mirror-hand{transform:scaleX(-1)}.hand-set.two .original-hand{width:59%}.result-hands .original-hand{object-fit:contain}@media(max-height:745px){.original-hand{height:165px}}
/* Character placement mirrors the illustrated game-page composition */
.app-header:not(.home-header) .brand{display:none!important}
.app-header:not(.home-header){min-height:58px;padding:calc(env(safe-area-inset-top,0px) + 6px) 16px 1px}
.app-header:not(.home-header) .header-tools{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0}
.friend-peek-pair{width:100%;height:103px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 12px;margin:0 auto -3px}
.friend-peek-pair img{display:block;width:min(34%,129px);height:106px;max-height:106px;object-fit:contain;filter:drop-shadow(2px 4px 1px #546b5260)}
.friend-peek-pair .peek-mouse{transform:rotate(-4deg)}
.friend-peek-pair .peek-hedgehog{transform:rotate(3deg)}
@media(max-height:745px){
  .friend-peek-pair{height:73px;margin-top:-4px}
  .friend-peek-pair img{height:79px;max-height:79px;width:28%}
  .app-header:not(.home-header){min-height:48px;padding-top:3px}
}
.care-button.ready{animation:none!important;transform:none!important}.care-button.ready svg{animation:pulse 1.6s ease-in-out infinite;transform-origin:center}.care-button:active{filter:brightness(.96)}@media(prefers-reduced-motion:reduce){.care-button.ready svg{animation:none!important}}
/* Hand-lettered names of the two main characters */
.friends-name-row{
 display:grid;grid-template-columns:1fr 1fr;align-items:center;
 width:min(95%,350px);gap:9px;margin:-9px auto 7px;
 font:900 clamp(19px,5vw,23px) "Chalkboard SE","Marker Felt","Comic Sans MS",sans-serif;
 line-height:1.1;text-align:center;letter-spacing:-.35px;
 filter:drop-shadow(1px 2px #fff9ce);
}
.friends-name-row span:first-child{color:#2e6f9b;transform:rotate(-4deg);text-shadow:1px 1px #f9efdb}
.friends-name-row span:last-child{color:#487841;transform:rotate(3deg);text-shadow:1px 1px #f9efdb}
.intro-content .welcome-subtitle{margin:4px auto 13px}
.intro-content .intro-scene{margin-bottom:2px}
@media(max-height:735px){
 .friends-name-row{font-size:18px;margin:-10px auto 3px}
 .intro-content .intro-scene{margin-bottom:0}
 .intro-content .welcome-subtitle{font-size:17px;margin:1px auto 10px}
}
.original-hand{object-fit:contain!important;width:100%;height:100%}.hand-set .original-hand{width:min(100%,170px)}.hand-set.two .original-hand{width:59%}.result-hands .original-hand{object-fit:contain!important}.mirror-hand{transform:scaleX(-1)}.hand-placeholder{display:inline-block;height:100%;width:min(100%,170px)}.original-hand{object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(1px 3px 0 #876f5a35)!important}.hand-set .original-hand{width:min(100%,178px)}.hand-set.two .original-hand{width:59%}.result-hands .original-hand{object-fit:contain!important}.mirror-hand{transform:scaleX(-1)}

/* Premium QA 2026-10-28: preserve the hand-drawn storybook art */
:root{--zw-focus:#254f8c;--zw-touch:48px;--zw-reading-line:1.32}
html{overscroll-behavior-y:none}
body{min-width:320px}
button,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,.answer:focus-visible,.big-button:focus-visible,
.icon-button:focus-visible,.care-button:focus-visible,
.secondary-button:focus-visible,select:focus-visible{
 outline:4px solid var(--zw-focus)!important;outline-offset:3px!important}
.icon-button{min-width:var(--zw-touch);min-height:var(--zw-touch)}
.answers{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
.answer{min-width:0;touch-action:manipulation}
.main-content,.answer-wrap,.visual-board{min-width:0}
.equation{max-width:100%;min-width:0}
.hint{min-height:27px;height:auto;line-height:var(--zw-reading-line)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.parent-voice-select{max-width:100%}
@media (max-width:679px) and (max-height:630px) and (orientation:portrait){
 .app-header:not(.home-header){min-height:48px;padding-top:calc(env(safe-area-inset-top,0px) + 2px)}
 .main-content{padding-top:0;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
 .progress{min-height:43px;margin:0}
 .wood-heading{min-height:45px!important;padding:5px 12px!important}
 .equation-area{min-height:100px;padding:4px 11px!important}
 .equation .chalkglyph{height:50px;width:35px}
 .equation .op .chalkglyph,.equation .equals .chalkglyph{height:40px;width:27px}
 .equation .unknown .chalkglyph{width:40px}
 .instruction{margin:1px auto 2px;font-size:16px;line-height:1.15}
 .visual-board{margin:1px 0 0}
 .count-card{min-height:111px}
 .hand-set,.hand-set .hand-svg{height:111px}
 .animal-group{min-height:95px}
 .friend-peek-pair{height:52px;margin-top:-4px}
 .friend-peek-pair img{height:58px;max-height:58px;width:27%}
 .answer-wrap{gap:2px;margin-top:5px}
 .answer-label{line-height:1.1}
 .answer{height:62px!important;min-height:62px!important}
 .hint{min-height:17px;font-size:14px}
}
@media (max-width:360px){
 .answer{min-width:0}
 .answer .crayon-answer-digit{max-width:42px}
 .brand-name{letter-spacing:-1px}
 .wood-heading{font-size:clamp(18px,5.8vw,21px)!important}
}
@media (orientation:landscape) and (max-height:520px){
 .device{min-height:100dvh}
 .main-content{min-height:0}
 .answer{min-height:56px!important}
 .answer-wrap{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
 .animate-entry,.confetti-piece,.care-button.ready svg,.intro-scene{animation:none!important}
}
/* Premium finishing: safe areas, keyboard focus, child-friendly typography */
.eyebrow{margin:0}
[data-focus-heading]:focus{outline:none}
[data-focus-heading]:focus-visible{outline:3px solid #254f8c;outline-offset:4px}
.voice-help{font-size:15px;line-height:1.4;color:#445f59;max-width:330px;margin:4px auto 12px}
.parent-panel{margin-top:clamp(8px,3dvh,30px);margin-bottom:12px}
.parent-panel h1{margin:4px auto 12px}
.parent-panel .secondary-button{min-height:48px}
.parent-voice-select{min-height:48px;font-size:16px}
.app-header:not(.home-header){padding-top:max(7px,calc(env(safe-area-inset-top,0px) + 5px))}
.home-header{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
@media(max-height:745px){
 .app-header:not(.home-header){padding-top:max(5px,calc(env(safe-area-inset-top,0px) + 3px))}
 .parent-panel{padding:13px 16px}
}
@media(max-width:360px){.parent-panel{padding:13px 11px}.parent-panel .secondary-button{margin:5px}}
@media(min-width:680px) and (orientation:portrait){.device{overflow-y:auto}}
@media (orientation:landscape) and (max-height:520px){
 .device{overflow-y:visible}
 .app-header:not(.home-header){padding-top:max(7px,calc(env(safe-area-inset-top,0px) + 4px))}
}

/* Avoid infinite transforms on the Largest Contentful Paint hero. */
.intro-content .intro-scene{animation:none!important}

/* Pre-rendered, visually identical painted background; SVG kept as fallback. */
.device{background-color:#a4d3ea!important;background-image:url('/storybook-portrait.webp')!important;background-size:100% 100%!important}
@media(orientation:landscape) and (max-height:520px){
 .device{background-image:url('/storybook-landscape.webp')!important;background-size:100% 100%!important}
}

.intro-scene picture{display:block;width:100%;height:100%}