/* ZÄHLWIESE · BACKSTUBE 209 — entirely new layout built from separately drawn
   wax / coloured-pencil artwork in the *exact* approved Zahlenjagd meadow.
   No CSS gradient, emojis, browser-default button, 3D or flattened mockup. */
#app .zw209{
 position:fixed!important;inset:0!important;z-index:500!important;
 width:100%!important;height:100dvh!important;min-height:0!important;
 padding:0!important;margin:0!important;overflow:hidden!important;
 background:#8bc960 url('/hunt-v189/meadow-portrait.webp') left center/cover no-repeat!important;
 isolation:isolate!important;
 font-family:'Trebuchet MS','Arial Rounded MT Bold',Arial,sans-serif!important;
 user-select:none!important;-webkit-user-select:none!important;
 touch-action:manipulation!important;
}
#app .zw209 *,#app .zw209 *::before,#app .zw209 *::after{
 box-sizing:border-box!important;-webkit-tap-highlight-color:transparent!important;
}
#app .zw209 img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
#app .zw209 button{
 margin:0;border:0;padding:0;background:none;box-shadow:none;
 font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;
}
#app .zw209 button:focus-visible{outline:4px dashed #ffed9b!important;outline-offset:2px!important}
#app .zw209-top{position:absolute!important;inset:0 0 auto!important;height:24%!important;z-index:11!important;pointer-events:none!important}
#app .zw209-title{
 position:absolute!important;width:84%!important;max-width:470px!important;
 height:auto!important;left:50%!important;top:35%!important;
 transform:translateX(-50%)!important;object-fit:contain!important;
 filter:drop-shadow(0 4px 3px #6440276b)!important;pointer-events:none!important;
}
#app .zw209 .zw209-home,#app .zw209 .zw209-reset{
 position:absolute!important;right:max(11px,env(safe-area-inset-right))!important;
 width:clamp(50px,14vw,73px)!important;height:clamp(50px,14vw,73px)!important;
 border-radius:50%!important;display:grid!important;place-items:center!important;
 pointer-events:auto!important;
 filter:drop-shadow(0 3px 3px #68483474)!important;
}
#app .zw209 .zw209-home{top:max(10px,env(safe-area-inset-top))!important}
#app .zw209 .zw209-reset{top:calc(max(10px,env(safe-area-inset-top)) + clamp(51px,14vw,75px))!important;width:clamp(39px,10vw,53px)!important;height:clamp(39px,10vw,53px)!important;right:max(18px,calc(env(safe-area-inset-right) + 7px))!important}
#app .zw209 .zw209-home img,#app .zw209 .zw209-reset img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209 .zw209-home:active,#app .zw209 .zw209-reset:active{transform:scale(.93)!important}
#app .zw209-stage-sign{
 position:absolute!important;left:50%!important;top:23%!important;
 width:min(81%,340px)!important;height:10.5%!important;
 transform:translateX(-50%)!important;z-index:10!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 filter:drop-shadow(0 3px 3px #79472f60)!important;pointer-events:none!important;
}
#app .zw209-stage-sign img{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;
}
#app .zw209-stage-sign span{
 position:relative!important;z-index:1!important;
 font-size:clamp(17px,5.8vw,27px)!important;font-weight:1000!important;
 letter-spacing:-.6px!important;white-space:nowrap!important;
 color:#7e3d25!important;text-shadow:1px 1px #fff4b8,-1px -1px #f6db9b!important;
 -webkit-text-stroke:.3px #633a2b!important;
}
#app .zw209-table{
 position:absolute!important;left:0!important;right:0!important;bottom:-2%!important;
 height:30%!important;z-index:2!important;pointer-events:none!important;
 background:url('/bakery-v218/counter.webp') center center / cover no-repeat!important;
 filter:drop-shadow(0 -5px 5px #74552b67)!important;
}
#app .zw209-friends{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:5!important}
#app .zw209 .zw209-friend{
 position:absolute!important;width:clamp(83px,26vw,140px)!important;
 height:auto!important;aspect-ratio:1!important;
 bottom:20.3%!important;z-index:5!important;
 pointer-events:auto!important;
 filter:drop-shadow(0 4px 4px #365a2777)!important;
 transition:transform .35s cubic-bezier(.19,.73,.3,1.2)!important;
}
#app .zw209 .zw209-moritz{left:0.5%!important}
#app .zw209 .zw209-igor{right:0.5%!important}
#app .zw209 .zw209-friend img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209 .zw209-friend.zw209-fed{animation:zw209-celebrate .65s ease-in-out 1!important}
#app .zw209 .zw209-friend:active{transform:scale(1.055)!important}
@keyframes zw209-celebrate{
 0%,100%{transform:rotate(0) translateY(0)}
 25%{transform:rotate(-5deg) translateY(-9px)}
 55%{transform:rotate(6deg) translateY(-12px)}
}
/* Illustrated food selection. No card wrapper or hard-edged container. */
#app .zw209-choices{
 position:absolute!important;left:9%!important;top:34%!important;width:82%!important;
 height:41%!important;z-index:9!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 gap:clamp(9px,2vw,18px)!important;align-items:center!important;justify-items:center!important;
}
#app .zw209 .zw209-choice{
 width:min(100%,clamp(78px,25vw,137px))!important;height:auto!important;
 aspect-ratio:1!important;min-width:72px!important;min-height:72px!important;
 display:grid!important;place-items:center!important;border-radius:50%!important;
 background:none!important;
 filter:drop-shadow(0 4px 3px #59492f77)!important;
 animation:zw209-choice-bob 3.2s ease-in-out infinite!important;
}
#app .zw209-choice:nth-child(2n){animation-delay:-1.4s!important}
#app .zw209-choice:nth-child(3n){animation-delay:-2.1s!important}
#app .zw209-choice img{width:100%!important;height:100%!important;object-fit:contain!important;filter:saturate(1.14) contrast(1.055)!important}
#app .zw209-choice:active{transform:scale(.9)!important;animation:none!important}
@keyframes zw209-choice-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* The ingredient request appears only as large pictures; no reading required. */
#app .zw209-clue{
 position:absolute!important;top:32.5%!important;left:17%!important;width:66%!important;height:13%!important;
 z-index:9!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
 background:url('/bakery-v218/stage-wood.webp') center/100% 100% no-repeat!important;
 filter:drop-shadow(0 2px 2px #764b3061)!important;
}
#app .zw209-clue-icons{height:76%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:1px!important;min-width:0!important}
#app .zw209-clue-icons img{height:100%!important;width:clamp(40px,12vw,68px)!important;object-fit:contain!important;transition:opacity .23s ease,transform .23s ease!important}
#app .zw209-clue-icons img.zw209-added{opacity:.25!important;transform:scale(.8)!important}
#app .zw209-clue-arrow{width:17%!important;height:65%!important}
#app .zw209-clue-arrow img{width:100%!important;height:100%!important;object-fit:contain!important}
/* Real object placement zone, same original handpainted blue bowl in each stage. */
#app .zw209-work{
 position:absolute!important;z-index:6!important;
 left:21%!important;top:46%!important;width:58%!important;height:24%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 pointer-events:auto!important;
}
#app .zw209-work .zw209-bowl{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 7px 4px #3a663c65)!important}
#app .zw209-drop{position:absolute!important;inset:17% 10% 13% 10%!important;z-index:5!important;border-radius:50%!important;pointer-events:none!important;transition:filter .15s ease!important}
#app .zw209-drop.zw209-drop-hover{outline:7px dashed #fff4be!important;outline-offset:5px!important;filter:drop-shadow(0 0 14px #f3eaa9)!important}
#app .zw209-drop.zw209-invite{animation:zw209-invite 1s ease-in-out infinite!important}
@keyframes zw209-invite{50%{filter:drop-shadow(0 0 15px #fff0b4)}}
#app .zw209-tray{
 position:absolute!important;left:15%!important;bottom:2.1%!important;width:70%!important;height:22%!important;
 z-index:9!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 gap:3px 6px!important;justify-items:center!important;align-items:center!important;
}
#app .zw209 .zw209-ing{
 display:grid!important;place-items:center!important;
 width:clamp(47px,15.2vw,78px)!important;height:clamp(47px,15.2vw,78px)!important;
 min-width:45px!important;min-height:45px!important;border-radius:50%!important;
 background:rgba(255,247,209,.78)!important;
 border:3px solid #b67740!important;outline:2px dashed rgba(255,237,175,.84)!important;
 filter:drop-shadow(0 3px 3px #583a2568)!important;
 touch-action:none!important;
}
#app .zw209-ing img{width:94%!important;height:94%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-ing.zw209-needed{animation:zw209-needed 1.3s ease-in-out infinite!important;border-color:#e9b44a!important;z-index:2!important}
#app .zw209-ing.zw209-wrong{animation:zw209-wrong .48s ease 1!important}
#app .zw209-ing.zw209-dragging{opacity:.6!important}
@keyframes zw209-needed{50%{filter:drop-shadow(0 0 10px #fff6b8) drop-shadow(0 3px 3px #583a2568);scale:1.06}}
@keyframes zw209-wrong{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
#app .zw209-mix .zw209-work,#app .zw209-bake .zw209-work{
 top:42%!important;height:29%!important;width:64%!important;left:18%!important;
}
#app .zw209 .zw209-whisk-in{
 position:absolute!important;z-index:7!important;left:50%!important;top:24%!important;
 width:25%!important;height:51%!important;object-fit:contain!important;
 transform:translate(calc(-50% + var(--wx,0px)),var(--wy,0px)) rotate(var(--wa,-14deg))!important;
 filter:drop-shadow(0 3px 2px #65503c59)!important;pointer-events:none!important;
}
#app .zw209-swirl-ring{
 position:absolute!important;inset:16% 19%!important;z-index:6!important;
 border:6px dashed #fff3ab!important;opacity:0!important;border-radius:50%!important;
 transform:rotate(-20deg)!important;pointer-events:none!important;
}
#app .zw209-mix-work.zw209-ready .zw209-swirl-ring{opacity:.8!important;animation:zw209-ring 2.8s linear infinite!important}
@keyframes zw209-ring{to{transform:rotate(340deg)}}
#app .zw209-pips{
 position:absolute!important;top:72%!important;left:50%!important;transform:translateX(-50%)!important;
 z-index:10!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;
}
#app .zw209-pips span,.zw209-served-pips span{
 display:block!important;width:24px!important;height:24px!important;border-radius:50%!important;
 border:4px solid #aa6c3d!important;background:#fff0c4!important;
 box-shadow:0 2px 2px #62422d67!important;
 transition:background .2s ease,scale .2s ease!important;
}
#app .zw209-pips span.complete,.zw209-served-pips span.done{
 background:#77bb6c!important;border-color:#397e51!important;scale:1.14!important;
 filter:drop-shadow(0 0 7px #fff0b1)!important;
}
#app .zw209 .zw209-tool{
 position:absolute!important;left:50%!important;bottom:4%!important;
 transform:translateX(-50%)!important;z-index:12!important;
 width:clamp(98px,29vw,143px)!important;height:clamp(98px,29vw,143px)!important;
 border-radius:50%!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px #60432b76)!important;
 animation:zw209-tool-bob 2.1s ease-in-out infinite!important;
}
#app .zw209-tool img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-tool.zw209-dragging{opacity:.55!important}
@keyframes zw209-tool-bob{50%{filter:drop-shadow(0 0 11px #fff1ba) drop-shadow(0 5px 4px #60432b76);translate:0 -4px}}
#app .zw209 .zw209-oven-work{top:39%!important;height:34%!important;left:23%!important;width:54%!important}
#app .zw209 .zw209-oven{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;filter:drop-shadow(0 5px 3px #7550367f)!important;z-index:4!important;
}
#app .zw209-oven-food{
 position:absolute!important;z-index:5!important;left:32%!important;top:53%!important;
 width:37%!important;height:23%!important;opacity:0!important;transform:scale(.45) translateY(12px)!important;
 transition:opacity .45s ease,transform .5s ease!important;
 filter:saturate(1.1) brightness(.85)!important;pointer-events:none!important;
}
#app .zw209-oven-food img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209-heat-1 .zw209-oven-food{opacity:.45!important;transform:scale(.65) translateY(6px)!important}
#app .zw209-heat-2 .zw209-oven-food{opacity:.75!important;transform:scale(.85) translateY(2px)!important}
#app .zw209-heat-3 .zw209-oven-food{opacity:1!important;transform:scale(1) translateY(0)!important}
#app .zw209-oven-work.zw209-baking{filter:drop-shadow(0 0 9px #ffc779)!important}
#app .zw209-bake-pips{top:74%!important}
#app .zw209-oven-smoke{position:absolute!important;left:30%!important;top:17%!important;width:40%!important;height:30%!important;pointer-events:none!important}
#app .zw209-baking .zw209-oven-smoke{animation:zw209-vapor 1.5s ease-in-out infinite!important;border-radius:50%!important;box-shadow:0 -8px 21px #ffe2ab8a!important}
@keyframes zw209-vapor{50%{opacity:.8;transform:translateY(-6px)}100%{opacity:.2;transform:translateY(-16px)}}
#app .zw209 .zw209-serve-work{
 top:42%!important;height:29%!important;left:23%!important;width:54%!important;
}
#app .zw209-serving-plate{
 position:absolute!important;inset:25% 4% 0!important;
 border-radius:50%!important;background:rgba(255,249,218,.88)!important;
 outline:7px solid #deb06e!important;box-shadow:0 4px 4px #66502e75!important;pointer-events:none!important;
}
#app .zw209 .zw209-serving{
 position:absolute!important;inset:0!important;z-index:7!important;
 display:grid!important;place-items:center!important;touch-action:none!important;
 filter:drop-shadow(0 5px 3px #7550356e)!important;
}
#app .zw209-serving img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-served-pips{
 position:absolute!important;top:75%!important;left:50%!important;
 transform:translateX(-50%)!important;display:flex!important;gap:16px!important;z-index:10!important;
}
#app .zw209 .zw209-next{
 position:absolute!important;left:50%!important;bottom:3%!important;
 transform:translateX(-50%)!important;
 width:clamp(94px,26vw,136px)!important;height:auto!important;aspect-ratio:1!important;
 z-index:11!important;display:grid!important;justify-items:center!important;align-items:center!important;
 filter:drop-shadow(0 5px 3px #744d356f)!important;
}
#app .zw209-next img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209-next span{display:none!important}
.zw209-ghost{
 position:fixed!important;z-index:99998!important;
 width:clamp(65px,16vw,100px)!important;height:clamp(65px,16vw,100px)!important;
 object-fit:contain!important;transform:translate(-50%,-50%)!important;
 filter:drop-shadow(0 5px 4px #6a482a80)!important;
 pointer-events:none!important;touch-action:none!important;
}
.zw209-burst{
 position:fixed!important;z-index:99999!important;width:clamp(13px,4vw,22px)!important;height:clamp(13px,4vw,22px)!important;
 object-fit:contain!important;pointer-events:none!important;
 animation:zw209-confetti .75s ease-out both!important;
}
@keyframes zw209-confetti{
 from{opacity:0;transform:translate(-50%,-50%) scale(.2)}
 20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 to{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) rotate(32deg) scale(.4)}
}
/* On a wide iPhone the illustrated background switches to Zahlenjagd's own
   landscape painting; proportions and the tactile objects remain independent. */
@media(orientation:landscape){
 #app .zw209{background-image:url('/hunt-v189/meadow-landscape.webp')!important;background-position:center center!important}
 #app .zw209-top{height:25%!important}
 #app .zw209-title{
  top:1%!important;width:36%!important;max-width:360px!important;
  transform:translateX(-50%)!important;
 }
 #app .zw209 .zw209-home{
  width:clamp(46px,11dvh,65px)!important;height:clamp(46px,11dvh,65px)!important;
  right:max(9px,env(safe-area-inset-right))!important;top:5px!important;
 }
 #app .zw209 .zw209-reset{
  width:clamp(37px,9dvh,49px)!important;height:clamp(37px,9dvh,49px)!important;
  top:calc(8px + clamp(45px,11dvh,65px))!important;
 }
 #app .zw209-stage-sign{top:19%!important;width:42%!important;height:17%!important}
 #app .zw209-stage-sign span{font-size:clamp(16px,5dvh,24px)!important}
 #app .zw209-table{height:34%!important}
 #app .zw209 .zw209-friend{width:clamp(108px,31dvh,164px)!important;bottom:12%!important}
 #app .zw209 .zw209-moritz{left:12%!important}
 #app .zw209 .zw209-igor{right:10%!important}
 #app .zw209-choices{
  top:35%!important;left:32%!important;width:36%!important;height:57%!important;
  gap:2px 9px!important;
 }
 #app .zw209 .zw209-choice{width:clamp(72px,23dvh,105px)!important;min-width:67px!important;min-height:67px!important}
 #app .zw209-clue{
  top:34%!important;left:38%!important;width:26%!important;height:20%!important;
 }
 #app .zw209-clue-icons img{width:clamp(33px,10dvh,57px)!important}
 #app .zw209-work,
 #app .zw209-mix .zw209-work,
 #app .zw209-bake .zw209-work{
  top:35%!important;left:38%!important;width:24%!important;height:47%!important;
 }
 #app .zw209-collect .zw209-work{top:47%!important;height:37%!important}
 #app .zw209-tray{
  left:34%!important;bottom:1%!important;width:32%!important;height:31%!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-template-rows:1fr!important;
  gap:2px!important;
 }
 #app .zw209 .zw209-ing{width:clamp(39px,11dvh,61px)!important;height:clamp(39px,11dvh,61px)!important;min-width:37px!important;min-height:37px!important;border-width:2px!important}
 #app .zw209-mix .zw209-work{top:40%!important;height:43%!important}
 #app .zw209-pips{top:79%!important;gap:7px!important}
 #app .zw209-pips span{width:18px!important;height:18px!important;border-width:3px!important}
 #app .zw209 .zw209-tool{
  left:83%!important;bottom:7%!important;
  width:clamp(78px,25dvh,105px)!important;height:clamp(78px,25dvh,105px)!important;
 }
 #app .zw209 .zw209-oven-work{top:37%!important;left:40%!important;width:20%!important;height:50%!important}
 #app .zw209-bake-pips{top:80%!important}
 #app .zw209 .zw209-serve-work{top:38%!important;left:40%!important;width:20%!important;height:49%!important}
 #app .zw209-served-pips{top:85%!important}
 #app .zw209 .zw209-next{
  left:83%!important;bottom:6%!important;width:clamp(77px,24dvh,112px)!important;
 }
}
@media(orientation:portrait) and (max-height:610px){
 #app .zw209-title{top:33%!important;width:76%!important}
 #app .zw209-stage-sign{top:24%!important;height:10%!important}
 #app .zw209-choices{top:34%!important;height:41%!important}
 #app .zw209 .zw209-choice{width:clamp(70px,24vw,91px)!important;min-width:65px!important;min-height:65px!important}
 #app .zw209-tray{height:23%!important}
 #app .zw209 .zw209-ing{width:clamp(44px,14vw,60px)!important;height:clamp(44px,14vw,60px)!important;min-width:43px!important;min-height:43px!important}
 #app .zw209 .zw209-tool{bottom:1%!important;width:clamp(76px,24vw,108px)!important;height:clamp(76px,24vw,108px)!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 *{animation-duration:.01ms!important;transition-duration:.01ms!important}
 .zw209-burst{display:none!important}
}/* v209 precision layout refinements after full in-browser visual inspection. */
#app .zw209 .zw209-choice{
 animation:none!important;
}
#app .zw209 .zw209-choice img{
 animation:zw209-choice-bob 3.2s ease-in-out infinite!important;
}
#app .zw209 .zw209-choice:nth-child(2n) img{animation-delay:-1.4s!important}
#app .zw209 .zw209-choice:nth-child(3n) img{animation-delay:-2.1s!important}
#app .zw209 .zw209-friend{
 width:clamp(119px,34vw,158px)!important;
 bottom:17.5%!important;
}
#app .zw209 .zw209-table{height:25%!important}
#app .zw209-stage-sign span{
 font-size:clamp(17px,5.4vw,25px)!important;
}
@media(orientation:landscape){
 #app .zw209 .zw209-friend{
  width:clamp(115px,35dvh,160px)!important;
  bottom:10%!important;
 }
 #app .zw209 .zw209-table{height:30%!important}
 #app .zw209-stage-sign span{font-size:clamp(17px,4.8dvh,24px)!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-choice img{animation:none!important}
}/* Stable child-sized touch surfaces; animate the crayon pictures, not hitboxes. */
#app .zw209 .zw209-ing.zw209-needed{animation:none!important;scale:1!important}
#app .zw209 .zw209-ing.zw209-needed img{
 animation:zw209-needed-art 1.45s ease-in-out infinite!important;
}
@keyframes zw209-needed-art{
 0%,100%{transform:scale(1)}
 50%{transform:scale(1.07)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-ing.zw209-needed img{animation:none!important}
}/* v209 landscape corrections: no sign overlap, no controls on Igor, 3-year-old hit targets. */
@media(orientation:landscape){
 #app .zw209-title{width:27%!important;max-width:248px!important;top:1%!important}
 #app .zw209-stage-sign{top:22%!important;width:34%!important;height:16%!important}
 #app .zw209 .zw209-tool{
  left:27%!important;bottom:5%!important;
  width:clamp(82px,24dvh,108px)!important;height:clamp(82px,24dvh,108px)!important;
 }
 #app .zw209 .zw209-next{
  left:68%!important;bottom:5%!important;
  width:clamp(72px,21dvh,96px)!important;
 }
 #app .zw209-tray{
  left:31%!important;bottom:0%!important;width:38%!important;height:29%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:1px 5px!important;
 }
 #app .zw209 .zw209-ing{
  width:clamp(47px,13.2dvh,60px)!important;height:clamp(47px,13.2dvh,60px)!important;
  min-width:46px!important;min-height:46px!important;
 }
 #app .zw209-collect .zw209-work{
  top:38%!important;height:36%!important;
 }
 #app .zw209-clue{
  top:36%!important;height:16%!important;
 }
}
@media(orientation:landscape) and (max-height:375px){
 #app .zw209 .zw209-ing{width:46px!important;height:46px!important;min-width:44px!important;min-height:44px!important}
 #app .zw209-stage-sign span{font-size:17px!important}
}/* Final landscape collect composition: separate wood labels and bowl,
   keep all eight ingredient buttons inside the safe-area. */
@media(orientation:landscape){
 #app .zw209-collect .zw209-stage-sign{top:16%!important;height:14%!important}
 #app .zw209-collect .zw209-clue{top:32%!important;height:16%!important}
 #app .zw209-collect .zw209-work{top:49%!important;height:27%!important}
 #app .zw209-collect .zw209-tray{bottom:4.5%!important;height:27%!important}
}/* Small phones: Moritz and Igor stay visible below the recipe artwork. */
@media(orientation:portrait) and (max-height:650px){
 #app .zw209-choose .zw209-friend{
  width:clamp(103px,31vw,118px)!important;
  bottom:5.5%!important;
 }
 #app .zw209-choose .zw209-choices{
  top:33.5%!important;height:38%!important;
 }
}
/* v210: Hand-drawn art always fully inside toddler-sized buttons. */
#app .zw209 .zw209-choice{
  padding:4%!important;box-sizing:border-box!important;overflow:visible!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
#app .zw209 .zw209-choice img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  object-position:center center!important;display:block!important;
}
#app .zw209 .zw209-ing{padding:5%!important;box-sizing:border-box!important;overflow:visible!important}
#app .zw209 .zw209-ing img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important}
#app .zw209 .zw209-tool{padding:7%!important;box-sizing:border-box!important;overflow:visible!important}
#app .zw209 .zw209-tool img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important}
#app .zw209 .zw209-mix-work{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important}
#app .zw209 .zw209-whisk-in{
  position:absolute!important;z-index:7!important;left:50%!important;top:25%!important;
  width:67%!important;height:63%!important;object-fit:contain!important;
  transform:translate(calc(-50% + var(--wx,0px)),var(--wy,0px)) rotate(var(--zw210-spin,-23deg))!important;
  transform-origin:50% 59%!important;
  filter:drop-shadow(0 4px 2px #65503c59)!important;pointer-events:none!important;
}
#app .zw209-ready:not(.zw210-stirring):not(.zw210-finished) .zw209-whisk-in{
  animation:zw210-whisk-wiggle 1.65s ease-in-out infinite!important;
}
@keyframes zw210-whisk-wiggle{
  0%,100%{rotate:-13deg;translate:0 0}
  50%{rotate:19deg;translate:0 -3px}
}
#app .zw210-stirring .zw209-whisk-in{animation:none!important}
#app .zw210-finished .zw209-whisk-in{
  animation:zw210-whisk-celebrate .5s ease-in-out 1!important;
}
@keyframes zw210-whisk-celebrate{50%{scale:1.16;rotate:85deg}}
#app .zw209-baking .zw209-oven{
  animation:zw210-oven-bake .84s ease-in-out 4!important;
}
@keyframes zw210-oven-bake{0%,100%{translate:0 0;scale:1}50%{translate:0 -3px;scale:1.025}}
#app .zw209-heat-1 .zw209-oven-food,
#app .zw209-heat-2 .zw209-oven-food,
#app .zw209-heat-3 .zw209-oven-food{animation:zw210-food-rise 1.2s ease-in-out infinite alternate!important}
@keyframes zw210-food-rise{to{translate:0 -6px;scale:1.07}}
@media(orientation:portrait){
  #app .zw209-choose .zw209-choices{top:31%!important;height:36%!important}
}
@media(orientation:landscape){
  #app .zw209-choose .zw209-choices{top:30%!important;height:45%!important}
}
@media(prefers-reduced-motion:reduce){
  #app .zw209 .zw209-whisk-in,#app .zw209 .zw209-oven,
  #app .zw209 .zw209-oven-food{animation:none!important}
}

/* v210 touch target stability: animate the artwork, never the button's hitbox. */
#app .zw209 .zw209-tool{animation:none!important;translate:0 0!important}
#app .zw209 .zw209-tool img{animation:zw210-tool-picture 2.1s ease-in-out infinite!important}
@keyframes zw210-tool-picture{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(-5deg)}}
#app .zw209 .zw209-tool.zw209-dragging img{animation:none!important}
@media(prefers-reduced-motion:reduce){#app .zw209 .zw209-tool img{animation:none!important}}

/* v210 measured in rendered iPhone screenshots: prevent percentage padding shrinking artwork. */
#app .zw209 .zw209-choice{padding:2px!important}
#app .zw209 .zw209-ing{padding:3px!important}
#app .zw209 .zw209-tool{padding:3px!important}
#app .zw209 .zw209-tool img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}

/* v210 landscape: recipe drawings stay below the wooden stage sign. */
@media(orientation:landscape){
 #app .zw209-choose .zw209-choices{top:36%!important;height:35%!important}
 #app .zw209-choose .zw209-choice{width:clamp(64px,18dvh,76px)!important;min-width:62px!important;min-height:62px!important}
}

/* Version 211: A truly illustrated, layered stirring action with clean transparent WebP art.
   The actual game uses image elements and DOM pointer interactions, never Canvas. */
#app .zw209-mix-work{overflow:visible!important;touch-action:none!important}
#app .zw209 .zw211-whisk-holder{
 position:absolute!important;left:51%!important;top:-8%!important;
 width:43%!important;height:91%!important;z-index:7!important;
 display:flex!important;justify-content:center!important;align-items:center!important;
 pointer-events:none!important;
 transform-origin:50% 79%!important;
 animation:zw211-stirring 1.15s ease-in-out infinite!important;
}
#app .zw209 .zw211-whisk-art{
 display:block!important;width:100%!important;height:100%!important;
 object-fit:contain!important;object-position:center!important;
 filter:drop-shadow(1px 3px 1px rgba(93,55,30,.22))!important;
 pointer-events:none!important;
}
#app .zw209 .zw211-bowl-front{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;z-index:8!important;pointer-events:none!important;
}
#app .zw209-mix-work .zw209-drop{z-index:9!important;pointer-events:none!important}
#app .zw209-mix-work .zw209-bowl{z-index:4!important}
#app .zw209 .zw209-swirl-ring{display:none!important}
@keyframes zw211-stirring{
 0%,100%{transform:translateX(-50%) translate(-14px,-6px) rotate(-14deg)}
 25%{transform:translateX(-50%) translate(7px,3px) rotate(6deg)}
 50%{transform:translateX(-50%) translate(15px,-2px) rotate(14deg)}
 75%{transform:translateX(-50%) translate(-5px,5px) rotate(-3deg)}
}
#app .zw209-mix-work.zw211-finger-stir .zw211-whisk-holder{
 animation-duration:.8s!important;
}
#app .zw209-mix-work.zw211-mix-finished .zw211-whisk-holder{
 animation:zw211-finish .57s ease-in forwards!important;
}
@keyframes zw211-finish{
 to{transform:translateX(-50%) translateY(-28px) rotate(18deg) scale(.94)}
}
/* Baked-in crayon symbols are never stretched or clipped by their circular controls. */
#app .zw209 .zw209-tool img,#app .zw209 .zw209-ing img,
#app .zw209 .zw209-choice img{object-fit:contain!important;object-position:50% 50%!important}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw211-whisk-holder{animation:none!important;transform:translateX(-50%)!important}
}

#app .zw209 .zw211-whisk-holder{top:-18%!important;width:47%!important}


/* Backstube v212: REAL stirring - image layers driven by animation frames. */
#app .zw209 .zw211-whisk-holder{
  top:-18%!important;
  animation:none!important;
  will-change:transform;
  transform:translateX(-50%)!important;
}
#app .zw209 .zw212-batter-motion{
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
 transform-origin:55% 37%!important;
 will-change:transform!important;z-index:5!important;pointer-events:none!important;
}
#app .zw209 .zw211-bowl-front{z-index:8!important}
#app .zw209 .zw212-cheer{
 position:absolute!important;inset:0!important;z-index:2!important;opacity:0!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
 transition:opacity .2s ease!important;pointer-events:none!important;
}
#app .zw209 .zw212-base{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209 .zw212-delighted .zw212-cheer{opacity:1!important}
#app .zw209 .zw212-delighted .zw212-base{opacity:0!important}
#app .zw209 .zw212-waiting img.zw212-base{animation:zw212-wait .62s ease-in-out infinite!important}
#app .zw209 .zw212-chewing img.zw212-base{
 animation:zw212-chew .31s ease-in-out infinite!important;
 transform-origin:53% 36%!important;
}
#app .zw209 .zw212-delighted img.zw212-cheer{animation:zw212-cheer-bounce 1.2s ease-in-out 1!important}
@keyframes zw212-wait{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes zw212-chew{
 0%,100%{transform:translateY(0px) scaleY(1) rotate(-1deg)}
 50%{transform:translateY(3px) scaleY(.955) rotate(2deg)}
}
@keyframes zw212-cheer-bounce{
 0%,100%{transform:translateY(0) scale(1)}
 28%{transform:translateY(-15px) scale(1.06)}
 52%{transform:translateY(0px) scale(.97)}
 75%{transform:translateY(-8px) scale(1.03)}
}
.zw212-bite-flight{
 position:fixed!important;z-index:99992!important;pointer-events:none!important;
 width:clamp(73px,19vw,112px)!important;height:clamp(73px,19vw,112px)!important;
 object-fit:contain!important;transform:translate(-50%,-50%);
 filter:drop-shadow(0 3px 2px #6b4e3266)!important;will-change:left,top,transform;
}
.zw212-crumb{
 position:fixed!important;width:clamp(10px,2.7vw,19px)!important;
 height:clamp(10px,2.7vw,19px)!important;object-fit:contain!important;
 z-index:99993!important;pointer-events:none!important;
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw212-chewing img,#app .zw209 .zw212-delighted img,
 #app .zw209 .zw212-waiting img{animation:none!important}
}

/* v212 visual QA: the batter is now a 24-frame painted WebP with a STATIC bowl rim.
   Each hand-drawn dough frame is warped only inside the original dough oval. */
#app .zw209 .zw211-whisk-holder{transform:translateX(-50%)!important}
#app .zw209 .zw212-delighted .zw212-cheer{
 width:122%!important;height:122%!important;max-width:none!important;
 left:-11%!important;top:-8%!important;
}
#app .zw209 .zw212-portions-1 .zw209-serving img{
 transform:scale(.70) rotate(-5deg)!important;opacity:.82!important;
}
#app .zw209 .zw212-portions-2 .zw209-serving img{
 transform:scale(.2)!important;opacity:0!important;
}
#app .zw209 .zw209-serving img{
 transition:transform .48s ease,opacity .48s ease!important;
}

/* When both friends have eaten, the finished plate disappears rather than
   displaying the same full meal. Hand-painted hearts celebrate the two bites. */
#app .zw209 .zw212-portions-2 .zw209-serving-plate{
 opacity:0!important;transform:scale(.72)!important;
 transition:opacity .55s ease,transform .55s ease!important;
}
#app .zw209 .zw212-finale-hearts{
 position:absolute!important;left:50%!important;top:48%!important;
 transform:translateX(-50%)!important;
 width:clamp(130px,37vw,230px)!important;height:clamp(55px,11vh,95px)!important;
 display:flex!important;align-items:center!important;justify-content:space-around!important;
 z-index:9!important;pointer-events:none!important;
}
#app .zw209 .zw212-finale-hearts img{
 width:31%!important;height:75%!important;object-fit:contain!important;
 filter:drop-shadow(0 3px 2px rgba(105,55,60,.2))!important;
 animation:zw212-floating-heart 1.85s ease-in-out infinite alternate!important;
}
#app .zw209 .zw212-finale-hearts img:nth-child(2){animation-delay:-.63s!important}
#app .zw209 .zw212-finale-hearts img:nth-child(3){animation-delay:-1.26s!important}
@keyframes zw212-floating-heart{
 from{transform:translateY(4px) rotate(-9deg) scale(.9)}
 to{transform:translateY(-14px) rotate(10deg) scale(1.09)}
}
@media(orientation:landscape){
 #app .zw209 .zw212-finale-hearts{top:43%!important;left:50%!important;height:26%!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw212-finale-hearts img{animation:none!important}
}

/* v213 six bespoke colored-pencil food paintings are now REAL game images,
   not CSS/Canvas art. Recipe buttons reuse the hand-painted plate rim. */
#app .zw209 .zw209-choice img.zw213-recipe-icon{
 width:100%!important;height:100%!important;object-fit:contain!important;
 object-position:center!important;filter:drop-shadow(0 3px 1px rgba(90,65,30,.16))!important;
}
#app .zw209-gather img.zw213-bowl-state{
 width:100%!important;height:100%!important;object-fit:contain!important;
 animation:zw213-bowl-added .4s cubic-bezier(.25,.65,.25,1) both!important;
}
@keyframes zw213-bowl-added{
 0%{transform:scale(.955) translateY(3px)}
 60%{transform:scale(1.045) translateY(-3px)}
 100%{transform:scale(1) translateY(0)}
}
/* The serving plate is also a genuine colored-pencil illustration. */
#app .zw209 .zw209-serving-plate{
 background:transparent url('/bakery-v218/recipe-plate-blank.webp') center center / contain no-repeat!important;
 outline:0!important;box-shadow:none!important;border:0!important;
 border-radius:0!important;inset:3% 0 0!important;
}
#app .zw209 .zw209-serving img{
 width:79%!important;height:79%!important;object-fit:contain!important;
 object-position:center!important;
}
#app .zw209 .zw209-oven-food img{object-fit:contain!important}
#app .zw209 .zw209-serving.zw213-serving-flash img{
 animation:zw213-serving-appearance .5s ease-out both!important;
}
@keyframes zw213-serving-appearance{0%{opacity:.5;scale:.85}100%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){
 #app .zw209-gather img.zw213-bowl-state{animation:none!important}
}

/* 214: hand-count clue: finger amount, numeral on the palm, then exactly
   that number of painted ingredient illustrations. Responsive without canvas. */
#app .zw209 .zw214-clue{
 gap:clamp(3px,1.2vw,9px)!important;
 justify-content:center!important;
 align-items:center!important;
 padding:4px 14px!important;
 box-sizing:border-box!important;
 overflow:visible!important;
}
#app .zw209 .zw214-hand{
 position:relative!important;flex:0 0 auto!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 height:96%!important;width:clamp(56px,19%,94px)!important;
 min-width:48px!important;
}
#app .zw209 .zw214-hand-art{
 display:block!important;max-width:100%!important;width:100%!important;
 height:100%!important;object-fit:contain!important;object-position:center center!important;
 filter:drop-shadow(0 2px 1px rgba(86,49,29,.25))!important;
}
#app .zw209 .zw214-hand-number{
 position:absolute!important;left:52%!important;top:68%!important;
 transform:translate(-50%,-50%) rotate(-6deg)!important;
 color:#623416!important;
 font-family:'Segoe Print','Comic Neue',cursive!important;
 font-size:clamp(22px,4.8vw,34px)!important;line-height:1!important;
 font-weight:900!important;
 -webkit-text-stroke:.35px #fff2d3!important;
 text-shadow:1px 1px 0 #fff3c9,0 0 3px #fff3c9!important;
 pointer-events:none!important;
}
#app .zw209 .zw214-remaining-icons{
 display:flex!important;flex:0 1 auto!important;min-width:0!important;
 height:82%!important;align-items:center!important;
 justify-content:center!important;gap:2px!important;
}
#app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
 display:block!important;flex:0 1 auto!important;min-width:0!important;
 width:clamp(39px,11vw,65px)!important;height:100%!important;
 max-width:27%!important;
 object-fit:contain!important;object-position:center center!important;
 opacity:1!important;transform:none!important;
 filter:drop-shadow(0 2px 1px rgba(88,52,30,.2))!important;
}
@media(orientation:portrait) {
 #app .zw209 .zw214-clue{
  left:9%!important;width:82%!important;
  top:32%!important;height:15.5%!important;
 }
 #app .zw209 .zw214-hand{
  width:clamp(56px,24%,102px)!important;
 }
 #app .zw209 .zw214-hand-number{
  font-size:clamp(23px,6vw,36px)!important;
 }
 #app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
  width:clamp(39px,14vw,67px)!important;
 }
}
@media(orientation:landscape){
 #app .zw209-collect .zw214-clue{
  left:34%!important;width:32%!important;
  top:30.5%!important;height:21.5%!important;
  padding:2px 6px!important;gap:1px!important;
 }
 #app .zw209 .zw214-hand{width:clamp(34px,19%,58px)!important;min-width:31px!important}
 #app .zw209 .zw214-hand-number{font-size:clamp(15px,4dvh,23px)!important}
 #app .zw209 .zw214-remaining-icons{gap:0!important;height:90%!important}
 #app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
  width:clamp(25px,7dvh,40px)!important;
 }
}
@media(orientation:landscape) and (max-height:375px){
 #app .zw209-collect .zw214-clue{top:29.5%!important;height:22.5%!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw214-hand{animation:none!important}
}

/* v214 visual QA: keep EACH remaining ingredient large (never relative to shrinking group). */
#app .zw209 .zw214-hand-number{
 top:54%!important;
 text-shadow:-1px -1px 0 #fff4d3,1px 1px 0 #fff4d3,0 0 3px #ffebbd!important;
}
#app .zw209 .zw214-remaining-icons{
 flex:0 1 auto!important;width:auto!important;max-width:72%!important;
 gap:clamp(2px,.7vw,6px)!important;
}
#app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
 flex:0 0 clamp(41px,11.6vw,62px)!important;
 width:clamp(41px,11.6vw,62px)!important;
 min-width:41px!important;max-width:none!important;
}
@media(orientation:portrait){
 #app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
  flex-basis:clamp(43px,13.2vw,62px)!important;
  width:clamp(43px,13.2vw,62px)!important;
 }
}
@media(orientation:landscape){
 #app .zw209 .zw214-remaining-icons{max-width:75%!important;gap:1px!important}
 #app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
  flex-basis:clamp(31px,9.2dvh,44px)!important;
  width:clamp(31px,9.2dvh,44px)!important;
  min-width:30px!important;
 }
 #app .zw209 .zw214-hand-number{top:55%!important}
}

/* v215 high-contrast numbers are baked into 480px wax-crayon art: no fuzzy CSS glyphs */
#app .zw209 .zw214-hand-number{display:none!important}
#app .zw209 .zw214-hand-art{
  image-rendering:auto!important;filter:none!important;
  width:100%!important;height:100%!important;
  object-fit:contain!important;
}
#app .zw209 .zw214-hand{
 width:clamp(77px,26%,105px)!important;min-width:74px!important;
 height:108%!important;transform:none!important;transition:none!important;
}
#app .zw209 .zw214-clue{gap:clamp(4px,1vw,9px)!important}
#app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
 transition:none!important;filter:none!important;
}
#app .zw209 .zw214-clue,#app .zw209 .zw214-remaining-icons{filter:none!important}
#app .zw209 .zw214-clue{contain:layout style!important}
#app .zw209 .zw213-bowl-state{animation:none!important;transition:none!important}
@media(orientation:landscape){
 #app .zw209 .zw214-hand{width:clamp(44px,21%,72px)!important;min-width:43px!important;height:110%!important}
 #app .zw209-collect .zw214-clue{height:23%!important;top:29.8%!important}
}
@media(orientation:portrait) and (max-width:360px){
 #app .zw209 .zw214-hand{width:71px!important;min-width:68px!important}
 #app .zw209 .zw214-remaining-icons img.zw214-ingredient-icon{
  width:clamp(40px,13vw,48px)!important;flex-basis:clamp(40px,13vw,48px)!important}
}

/* v216: each raster illustration is normalized to an exactly centered 300x300
   transparent circle. The button chrome does NOT move; only art pixels are fixed. */
#app .zw209 .zw209-choice,#app .zw209 .zw209-ing,#app .zw209 .zw209-tool{
 align-items:center!important;justify-content:center!important;
 padding:2px!important;box-sizing:border-box!important;
}
#app .zw209 .zw209-choice img.zw213-recipe-icon,
#app .zw209 .zw209-ing img,
#app .zw209 .zw209-tool img{
 width:100%!important;height:100%!important;
 object-fit:contain!important;object-position:50% 50%!important;
 margin:0!important;padding:0!important;
 transform:none;
}
#app .zw209 .zw209-ing img{pointer-events:none!important}
#app .zw209 .zw209-choice img.zw213-recipe-icon{filter:none!important}
#app .zw209 .zw209-tool.zw209-dragging img{animation:none!important}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-choice img,#app .zw209 .zw209-ing img,#app .zw209 .zw209-tool img{
  animation:none!important;transition:none!important;
 }
}

/* v216 visual-QA fix: centered independent of intrinsic image dimensions.
   Keep button hitboxes fixed; move only their image layer. */
#app .zw209 .zw209-choice,#app .zw209 .zw209-ing,#app .zw209 .zw209-tool{
 position:relative!important;
}
#app .zw209 .zw209-choice > img,
#app .zw209 .zw209-ing > img,
#app .zw209 .zw209-tool > img{
 position:absolute!important;
 display:block!important;
 left:50%!important;
 top:50%!important;
 translate:-50% -50%!important;
 width:calc(100% - 4px)!important;
 height:calc(100% - 4px)!important;
 max-width:none!important;max-height:none!important;
 margin:0!important;padding:0!important;
 object-fit:contain!important;
 object-position:50% 50%!important;
 flex:none!important;
 pointer-events:none!important;
}

/* v218: two visible navigation controls in a separate horizontal row,
   leaving the painted title and draggable whisk completely unobstructed. */
#app .zw209 .zw209-home,
#app .zw209 .zw209-reset{
 top:max(6px,env(safe-area-inset-top))!important;
 width:clamp(58px,16vw,66px)!important;height:clamp(58px,16vw,66px)!important;
 min-width:58px!important;min-height:58px!important;
 border:0!important;padding:0!important;
 position:absolute!important;z-index:22!important;
 transform:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 overflow:visible!important;
}
#app .zw209 .zw209-home{right:max(9px,env(safe-area-inset-right))!important}
#app .zw209 .zw209-reset{
 right:calc(max(9px,env(safe-area-inset-right)) + clamp(58px,16vw,66px) + 9px)!important;
}
#app .zw209 .zw209-home img,
#app .zw209 .zw209-reset img{
 position:absolute!important;left:50%!important;top:50%!important;
 translate:-50% -50%!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center!important;
 margin:0!important;padding:0!important;pointer-events:none!important;
}
#app .zw209-mix .zw209-tool.zw209-whisk-tool,
#app .zw209-bake .zw209-tool.zw209-tray-tool{
 position:absolute!important;
 top:auto!important;bottom:9%!important;
 left:50%!important;right:auto!important;
 transform:translateX(-50%)!important;
 translate:0 0!important;
 width:clamp(112px,29vw,132px)!important;
 height:clamp(112px,29vw,132px)!important;
 min-width:105px!important;min-height:105px!important;
 padding:0!important;
 z-index:13!important;
 overflow:visible!important;
 animation:none!important;
 touch-action:none!important;
}
#app .zw209-mix .zw209-tool.zw209-whisk-tool > img,
#app .zw209-bake .zw209-tool.zw209-tray-tool > img{
 position:absolute!important;
 left:50%!important;top:50%!important;translate:-50% -50%!important;
 width:100%!important;height:100%!important;
 object-fit:contain!important;object-position:center!important;
 padding:0!important;margin:0!important;
 pointer-events:none!important;
 animation:zw218-tool-welcome 1.9s ease-in-out infinite!important;
}
@keyframes zw218-tool-welcome {
  0%,100%{scale:1}
  50%{scale:1.055}
}
#app .zw209-gather .zw213-bowl-state.zw218-bowl-pop{
 animation:zw218-fill-pop .28s cubic-bezier(.2,.7,.3,1) both!important;
}
@keyframes zw218-fill-pop{0%{scale:.975}55%{scale:1.025}100%{scale:1}}
#app .zw209-gather .zw218-bowl-outgoing{
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
 z-index:7!important;opacity:0!important;
 pointer-events:none!important;animation:zw218-fade-out .29s ease-out both!important;
}
@keyframes zw218-fade-out{0%{opacity:1}100%{opacity:0}}
@media(orientation:landscape){
 #app .zw209 .zw209-home,#app .zw209 .zw209-reset{
  top:5px!important;width:clamp(54px,13dvh,64px)!important;
  height:clamp(54px,13dvh,64px)!important;
  min-width:54px!important;min-height:54px!important;
 }
 #app .zw209 .zw209-reset{
  right:calc(max(9px,env(safe-area-inset-right)) + clamp(54px,13dvh,64px) + 9px)!important;
 }
 #app .zw209-mix .zw209-tool.zw209-whisk-tool,
 #app .zw209-bake .zw209-tool.zw209-tray-tool{
  left:71%!important;bottom:7%!important;top:auto!important;
  width:clamp(84px,24dvh,104px)!important;height:clamp(84px,24dvh,104px)!important;
  min-width:84px!important;min-height:84px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .zw209-mix .zw209-tool.zw209-whisk-tool > img,
 #app .zw209-bake .zw209-tool.zw209-tray-tool > img,
 #app .zw209-gather .zw213-bowl-state.zw218-bowl-pop,
 #app .zw209-gather .zw218-bowl-outgoing{
  animation:none!important;
 }
}

/* Short-screen iPhone / compact Safari: whisk stays BELOW progress pips. */
@media(orientation:portrait) and (max-height:650px){
 #app .zw209-mix .zw209-tool.zw209-whisk-tool,
 #app .zw209-bake .zw209-tool.zw209-tray-tool{
  bottom:1%!important;
  top:auto!important;
  width:clamp(95px,30vw,108px)!important;
  height:clamp(95px,30vw,108px)!important;
  min-width:95px!important;min-height:95px!important;
 }
 #app .zw209-title{
  width:58%!important;top:47%!important;
 }
}