.step12-area .s12-scene { position:absolute; inset:0; container-type:size; }
.step12-area .s12-scene img { position:absolute; display:block; width:100%; height:100%; object-fit:fill; user-select:none; pointer-events:none; }
.step12-area .s12-scene [hidden] { display:none; }
/* Stove 1; pot 3; shaker 5; stream 7; tools 10/20; Reset 30. */
.step12-area .s12-scene .s12-stove { left:7%; top:62%; width:40%; height:34.28%; z-index:1; }
.step12-area .s12-pot { position:absolute; left:6.75%; top:47.08%; width:40.42%; height:30.33%; z-index:3; pointer-events:none; }
/* The front wall occludes the dipped bowl while its handle stays visible. */
.step12-area .s12-scene .s12-pot-front { display:none; left:6.75%; top:47.08%; width:40.42%; height:30.33%; z-index:15; clip-path:polygon(0 48%,100% 48%,100% 100%,0 100%); }
.step12-area .s12-scooping .s12-pot-front { display:block; }
/* Follow the rim outline: steam above it can fade without fading the pot. */
.step12-area .s12-pot-base { clip-path:polygon(0 24%,14% 24%,16% 18%,23% 12%,32% 9%,50% 8%,68% 10%,78% 15%,86% 24%,100% 24%,100% 100%,0 100%); }
.step12-area .s12-pot-steam { clip-path:polygon(0 0,100% 0,100% 24%,86% 24%,78% 15%,68% 10%,50% 8%,32% 9%,23% 12%,16% 18%,14% 24%,0 24%); animation:s12-simmer 1.5s ease-in-out infinite; transition:opacity .65s; }
.step12-area .s12-off .s12-pot-steam { opacity:0; animation:none; }
.step12-area .s12-knob { position:absolute; left:33.4%; top:85.31%; width:6%; height:8.57%; z-index:6; border:0; border-radius:50%; padding:0; background:transparent; cursor:pointer; touch-action:manipulation; }
.step12-area .s12-knob:focus-visible { outline:3px solid #ffc928; outline-offset:2px; }
.step12-area .s12-knob:disabled { cursor:default; }
/* Match visible cup walls; source body PNG has transparent side padding. */
.step12-area .s12-scene .s12-body { left:58.6%; top:58.37%; width:27.3%; height:37.63%; z-index:5; }
.step12-area .s12-scene .s12-assembled { left:61%; top:43%; width:30%; height:53%; z-index:5; }
/* Alpha bounds: body rim 502/900 * 27.3 = 15.23% panel width.
   Crop lid's transparent sides (source x183..733, y2..475), preserving its ratio. */
.step12-area .s12-lid { position:absolute; left:81.5%; top:74.16%; width:15.23%; height:21.84%; overflow:hidden; z-index:5; }
.step12-area .s12-lid img { left:-33.21%; top:-.42%; width:163.34%; height:100.63%; }
.step12-area .s12-tool { position:absolute; z-index:10; touch-action:none; cursor:grab; user-select:none; transition:left .35s ease,top .35s ease,transform .35s ease; }
.step12-area .s12-strainer { left:12%; top:15%; width:24%; height:29.2%; }
.step12-area .s12-ladle { left:51%; top:19%; width:30%; height:34.17%; transform-origin:18% 75%; }
/* One unchanged drag box. Register full art to empty at hole (830,46)
   and bowl (~175,485): 1.057 scale about the handle hole. Transparent
   margins absorb the offset; all visible pixels remain inside the hit box. */
.step12-area .s12-ladle img { left:0; top:0; width:100%; height:100%; }
.step12-area .s12-ladle .s12-full { left:-5.26%; top:-.43%; width:105.7%; height:100.72%; }
.step12-area .s12-dragging { cursor:grabbing; transition:none; z-index:20; }
.step12-area .s12-dipping { animation:s12-dip .62s ease-in-out; }
.step12-area .s12-mirrored { transform-origin:82% 75%; }
.step12-area .s12-mirrored img { transform:scaleX(-1); }
/* Mirror both registered images around the shared wrapper's center. */
.step12-area .s12-mirrored .s12-full { transform-origin:52.28% 50%; }
.step12-area .s12-pouring { transform:rotate(-22deg); }
/* End above the mesh front edge so liquid never draws over the cup wall. */
.step12-area .s12-stream-clip { position:absolute; left:65%; top:44%; width:16%; height:12%; overflow:hidden; z-index:7; pointer-events:none; clip-path:polygon(0 0,100% 0,100% 80%,80% 96%,50% 100%,20% 96%,0 80%); }
.step12-area .s12-stream { position:absolute; left:42%; top:0; width:8%; height:100%; border-radius:40%; background:linear-gradient(90deg,#b76e37,#f4c68f 45%,#d69555); opacity:0; transform-origin:top; }
.step12-area .s12-flowing .s12-stream { animation:s12-flow 1.05s linear both; }
.step12-area .step12-reset { position:absolute; right:3%; top:2%; z-index:30; border:2px solid #56351d; border-radius:10px; background:#fff1d0; padding:7px 14px; font-size:clamp(12px,1.4vw,19px); cursor:pointer; }
@keyframes s12-simmer { 0%,100% { opacity:.85; } 50% { opacity:1; } }
@keyframes s12-dip { 0%,100% { transform:translateY(0) rotate(0); } 45%,65% { transform:translateY(3cqh) rotate(-12deg); } }
@keyframes s12-flow { 0% { opacity:0; transform:scaleY(0); } 15%,80% { opacity:1; transform:scaleY(1); } 100% { opacity:0; transform:scaleY(1); } }

.step12-area .step12-reset { white-space:nowrap; }