/* Zählwiese V53: full illustrated finger-counting game from supplied artwork.
   This scene is one authentic crayon/colored-pencil illustrated composition.
   All interaction targets map onto the real wood and paper shapes. */
#app:has(.zw-finger-book-v53){
 position:relative!important;isolation:isolate!important;
 overflow:hidden!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;
 min-height:0!important;display:block!important;background:#8bca87!important;
}
body:has(.zw-finger-book-v53) .device{
 background:#80bb90!important;background-image:none!important;
}
#app:has(.zw-finger-book-v53)>.app-header{
 position:absolute!important;top:0!important;left:0!important;width:100%!important;height:0!important;
 min-height:0!important;max-height:0!important;margin:0!important;padding:0!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
 overflow:visible!important;z-index:50!important;pointer-events:none!important;
}
#app:has(.zw-finger-book-v53)>.app-header .brand,
#app:has(.zw-finger-book-v53)>.app-header .header-tools{
 visibility:visible!important;opacity:1!important;display:block!important;
 overflow:visible!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important;
}
#app:has(.zw-finger-book-v53)>.app-header .brand{display:none!important}
#app:has(.zw-finger-book-v53)>.app-header .zw-go-home{
 position:absolute!important;top:1.5dvh!important;left:2%!important;
 width:34%!important;height:10dvh!important;min-width:0!important;min-height:48px!important;
 border:0!important;box-shadow:none!important;background:transparent!important;
 border-radius:28px!important;opacity:0!important;pointer-events:auto!important;
 touch-action:manipulation!important;transform:none!important;z-index:51!important;
}
#app:has(.zw-finger-book-v53)>.app-header .zw-go-home:focus-visible{opacity:.4!important;background:#fff7bd!important;outline:3px solid #ffe49c!important}
#app:has(.zw-finger-book-v53) .zw-finger-book-v53.main-content{
 position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 flex:none!important;overflow:hidden!important;box-sizing:border-box!important;
 margin:0!important;padding:0!important;border:0!important;z-index:2!important;
 background:none!important;isolation:isolate!important;
}
.zw-book-art{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;
 background-image:url('/finger-scene-v53.webp')!important;
 background-color:#8ac583!important;background-size:100% 100%!important;
 background-position:center center!important;background-repeat:no-repeat!important;
 isolation:isolate!important;container-type:normal!important;
}
.zw-book-sr{
 position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;margin:0!important;padding:0!important;
 border:0!important;
}
.zw-book-progress{
 position:absolute!important;z-index:4!important;left:33%!important;top:16.7%!important;
 width:35%!important;height:3.5%!important;display:flex!important;justify-content:center!important;align-items:center!important;
 gap:clamp(2px,.6vw,5px)!important;
 border-radius:24px!important;background:linear-gradient(90deg,#79bdddda,#84c4dcf0,#8dcbdfee)!important;
 padding:2px 4px!important;margin:0!important;box-shadow:inset 0 1px #e9faff88!important;
}
.zw-book-step{
 display:block!important;flex:0 1 auto!important;width:clamp(9px,2.4vw,15px)!important;height:clamp(9px,2.4vw,15px)!important;
 border:2px solid #c3b18b!important;border-radius:50%!important;
 background:linear-gradient(#fff8df,#e0e3df)!important;
 box-shadow:0 2px 0 #747d6788,inset 0 1px #fff9e4!important;
}
.zw-book-step.done{background:linear-gradient(#bbdf92,#6da877)!important;border-color:#648766!important}
.zw-book-step.current{background:linear-gradient(#ffeaa6,#f5b740)!important;border-color:#b88446!important;box-shadow:0 0 0 2px #fff2cb,0 2px #7e684f!important;transform:scale(1.16)}
.zw-book-equation{
 position:absolute!important;z-index:3!important;top:22.15%!important;left:14%!important;width:72%!important;height:12.5%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(7px,2.7vw,20px)!important;
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 font-family:"Chalkboard SE","Marker Felt","Comic Sans MS",cursive,system-ui!important;
 color:#fff4cd!important;text-align:center!important;
 filter:drop-shadow(1px 2px 0 #5677679a)!important;white-space:nowrap!important;pointer-events:none!important;
}
.zw-book-equation span,.zw-book-equation em,.zw-book-equation strong{
 font-size:clamp(38px,12vw,88px)!important;line-height:1!important;
 font-style:normal!important;font-weight:750!important;display:inline-block!important;
 text-shadow:1px 1px #f7edd6ab,-1px 0 #e5debd87,0 0 1px #fff8db!important;
 -webkit-text-stroke:.8px #fff5e0aa!important;letter-spacing:-1px!important;
}
.zw-book-equation strong{color:#ffe178!important;-webkit-text-stroke:.8px #ddaf59!important}
.zw-book-equation em{font-size:clamp(28px,9vw,68px)!important}
.zw-book-hand-pair,.zw-book-result-hands{
 position:absolute!important;inset:39.2% 7.5% auto 7.5%!important;
 width:85%!important;height:24.9%!important;display:flex!important;justify-content:space-between!important;
 align-items:center!important;gap:5%!important;z-index:5!important;
 pointer-events:auto!important;
}
.zw-book-hand-card{
 position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:47%!important;height:100%!important;margin:0!important;padding:0!important;
 border:0!important;background:transparent!important;box-shadow:none!important;border-radius:20px!important;
 flex:none!important;touch-action:manipulation!important;overflow:hidden!important;cursor:pointer!important;
}
.zw-book-hand-card:focus-visible{outline:3px solid #ffdc79!important;outline-offset:-3px!important}
.zw-book-hand-card:active{background:#fff8bd35!important}
.zw-book-hand-card .hand-svg,
.zw-book-result-hands .hand-svg{
 display:block!important;flex:none!important;width:123%!important;height:123%!important;
 min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
 object-fit:contain!important;object-position:center!important;
 filter:drop-shadow(1px 3px 1px #8b694c6b)!important;
 margin:0!important;position:relative!important;
 animation:zw-book-hand-breathe 4.1s ease-in-out infinite!important;transform-origin:50% 78%!important;
}
.zw-book-hand-card:nth-child(2) .hand-svg{animation-delay:-2s!important}
@keyframes zw-book-hand-breathe{
 0%,64%,100%{transform:translateY(1%) rotate(0)}
 78%{transform:translateY(-3%) rotate(-2deg)}
}
.zw-book-hand-card.zw-book-touched .hand-svg{animation:zw-book-hand-wave .7s ease-out 1!important}
@keyframes zw-book-hand-wave{
 0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-9deg) translateY(-6%)}70%{transform:rotate(6deg) translateY(0)}
}
.zw-book-empty-hand{display:block;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,#fff8db92,transparent 69%);}
.zw-book-answer-row{
 position:absolute!important;left:4.85%!important;top:65.3%!important;
 width:90.2%!important;height:12.6%!important;z-index:9!important;
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 column-gap:1.45%!important;align-items:center!important;margin:0!important;padding:0!important;
 background:none!important;border:0!important;box-shadow:none!important;
}
.zw-book-answer-row .zw-book-answer-value,
.zw-book-answer-row button.zw-book-answer-value{
 appearance:none!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;
 border:0!important;outline-offset:-5px!important;border-radius:19px!important;
 background:transparent!important;box-shadow:none!important;margin:0!important;padding:0!important;
 font:900 clamp(38px,11.4vw,73px)/1 "Chalkboard SE","Marker Felt","Comic Sans MS",cursive,system-ui!important;
 color:#67482f!important;text-shadow:1px 2px 1px #fff1bb9e,-1px -1px #8b5b416b!important;
 -webkit-text-stroke:1px #745037!important;
 transition:filter .16s!important;transform:none!important;cursor:pointer!important;touch-action:manipulation!important;
}
.zw-book-answer-row .zw-book-answer-value:nth-child(2){color:#764e51!important}
.zw-book-answer-row .zw-book-answer-value:nth-child(3){color:#376882!important}
.zw-book-answer-row .zw-book-answer-value:nth-child(4){color:#55703c!important}
.zw-book-answer-row .zw-book-answer-value:focus-visible{outline:4px solid #fff5b1!important}
.zw-book-answer-row button.zw-book-answer-value:active{transform:scale(.92)!important;background:#fff9e155!important}
.zw-book-answer-row button.zw-book-answer-value.wrong{animation:zw-book-wrong .52s ease-out!important;background:#f2aba95e!important}
@keyframes zw-book-wrong{0%,100%{transform:translateX(0)}23%{transform:translateX(-7px) rotate(-3deg)}52%{transform:translateX(7px) rotate(2deg)}74%{transform:translateX(-3px)}}
.zw-book-answer-completed .zw-book-answer-value:not(.is-right){opacity:.4!important}
.zw-book-answer-completed .zw-book-answer-value.is-right{color:#376f50!important;animation:zw-book-answer-yes 1s ease-out both!important}
@keyframes zw-book-answer-yes{0%{transform:scale(1);opacity:.5}30%{transform:scale(1.16);opacity:1}100%{transform:scale(1.04)}}
.zw-book-next{
 position:absolute!important;top:85.6%!important;left:40.8%!important;width:18.7%!important;height:12.1%!important;
 border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;
 z-index:10!important;touch-action:manipulation!important;cursor:pointer!important;padding:0!important;min-width:0!important;
 transition:filter .16s!important;
}
.zw-book-next:active{transform:scale(.94)!important;background:#fff4b439!important}
.zw-book-next:focus-visible{outline:4px solid #f8dc9a!important}
.zw-book-question .zw-book-next{opacity:.9}
.zw-book-question .zw-book-next.zw-book-hint-pulse{animation:zw-book-help .7s ease-in-out}
@keyframes zw-book-help{30%{transform:scale(1.08)}70%{transform:scale(.96)}}
.zw-book-hint{position:absolute!important;bottom:0;left:0;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;}
.zw-book-success .zw-book-result-hands{gap:3%;pointer-events:none!important}
.zw-book-result-hands img.hand-svg{width:50%!important;height:110%!important;max-width:50%!important;animation:zw-book-reveal .6s ease-out both!important}
.zw-book-result-hands img.hand-svg:only-child{width:50%!important;margin-left:0!important;margin-right:auto!important}
.zw-book-result-hands img.mirror-hand{transform:scaleX(-1)!important}
@keyframes zw-book-reveal{0%{opacity:.65;transform:translateY(12px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
.zw-book-reward{position:absolute!important;left:78%!important;top:33%!important;width:12%!important;height:8%!important;z-index:11!important;filter:drop-shadow(0 2px #bc8b56a8)!important;animation:zw-book-star .9s ease-in-out infinite alternate}
.zw-book-reward svg{width:100%;height:100%}
@keyframes zw-book-star{to{transform:scale(1.1) rotate(9deg)}}
.zw-book-question .zw-book-hand-card.zw-book-touched{animation:zw-book-card-spark .48s ease-in-out!important}
@keyframes zw-book-card-spark{30%{background:#ffeaa039}100%{background:transparent}}
/* narrow iPhone and larger iPad scaling */
@media(max-width:360px){
 .zw-book-equation{gap:clamp(4px,2vw,9px)!important}
 .zw-book-equation span,.zw-book-equation strong{font-size:clamp(34px,11vw,55px)!important}
 .zw-book-equation em{font-size:clamp(27px,8.3vw,40px)!important}
 .zw-book-answer-row .zw-book-answer-value{font-size:clamp(34px,10.2vw,52px)!important}
 .zw-book-hand-card .hand-svg{width:130%!important;height:127%!important}
}
@media(orientation:landscape) and (max-height:540px){
 #app:has(.zw-finger-book-v53) .zw-finger-book-v53{height:100%!important}
 .zw-book-art{background-size:100% 100%!important}
 .zw-book-answer-row .zw-book-answer-value{font-size:clamp(24px,5.4vw,47px)!important}
 .zw-book-equation span,.zw-book-equation strong{font-size:clamp(30px,7vw,58px)!important}
 .zw-book-equation em{font-size:clamp(23px,5vw,45px)!important}
 .zw-book-hand-card .hand-svg{height:125%!important}
}
@media(prefers-reduced-motion:reduce){
 .zw-book-hand-card .hand-svg,.zw-book-reward,.zw-book-answer-completed .is-right{animation:none!important}
}

/* A separate hand-painted landscape scene; no stretched people, boards or digits. */
@media(orientation:landscape) and (max-height:620px){
 .zw-book-art{background-image:url('/finger-scene-landscape-v53.webp')!important;background-size:100% 100%!important}
 #app:has(.zw-finger-book-v53)>.app-header .zw-go-home{
  top:1.4dvh!important;left:.8%!important;width:19%!important;height:16dvh!important;
 }
 .zw-book-progress{left:43%!important;top:15%!important;width:23%!important;height:4.3%!important;padding:1px!important}
 .zw-book-step{width:clamp(9px,1.6vw,13px)!important;height:clamp(9px,1.6vw,13px)!important}
 .zw-book-equation{
  left:5.5%!important;top:26.5%!important;width:35.5%!important;height:20%!important;
  gap:clamp(6px,1.2vw,12px)!important;
 }
 .zw-book-equation span,.zw-book-equation strong{font-size:clamp(32px,6.1vw,58px)!important}
 .zw-book-equation em{font-size:clamp(26px,4.9vw,49px)!important}
 .zw-book-hand-pair,.zw-book-result-hands{
  inset:auto!important;left:49.1%!important;top:19.8%!important;width:48.2%!important;height:32.8%!important;gap:1.7%!important;
 }
 .zw-book-hand-card{width:49.15%!important;height:100%!important}
 .zw-book-hand-card .hand-svg{width:110%!important;height:135%!important}
 .zw-book-result-hands img.hand-svg{width:49%!important;height:133%!important;max-width:49%!important}
 .zw-book-answer-row{left:23.3%!important;top:58.1%!important;width:60.4%!important;height:23%!important;column-gap:1.05%!important}
 .zw-book-answer-row .zw-book-answer-value{font-size:clamp(31px,5.6vw,59px)!important}
 .zw-book-next{left:90%!important;top:71.1%!important;width:9%!important;height:20%!important}
 .zw-book-reward{left:38%!important;top:41%!important;width:5.5%!important;height:11%!important}
}