.step11-area .s11-scene { position:absolute; inset:0; container-type:size; isolation:isolate; }
.step11-area .s11-scene img { display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.step11-area .s11-resetting * { animation:none !important; transition:none !important; }
/* Fixed stove/pot seat; all three trimmed pot bodies end at y73.5%. */
.step11-area .s11-stove { position:absolute; left:46%; top:55%; width:48%; height:41.14%; object-fit:fill; z-index:1; }
.step11-area .s11-pot-back,
.step11-area .s11-pot-front { position:absolute; inset:0; pointer-events:none; }
.step11-area .s11-pot-back { z-index:3; }
.step11-area .s11-pot-front { z-index:8; clip-path:polygon(0 47%,54% 47%,56% 50%,61% 53%,70% 55%,79% 53%,84% 50%,86% 47%,100% 47%,100% 100%,0 100%); }
.step11-area .s11-pot { position:absolute; left:45.7%; width:48.5%; object-fit:fill; opacity:0; transition:opacity .65s ease; }
.step11-area .s11-pot-water { top:37.1%; height:36.4%; }
.step11-area .s11-pot-tea { top:39.41%; height:34.09%; }
.step11-area .s11-pot-milktea { top:37.24%; height:36.26%; }
.step11-area .s11-scene[data-pot="water"] .s11-pot-water,
.step11-area .s11-scene[data-pot="tea"] .s11-pot-tea,
.step11-area .s11-scene[data-pot="milktea"] .s11-pot-milktea { opacity:1; }
.step11-area .s11-surface { position:absolute; inset:0; z-index:5; clip-path:ellipse(14.6% 5.6% at 70% 48.5%); pointer-events:none; }
.step11-area .s11-bubbles,
.step11-area .s11-rings { position:absolute; inset:0; }
.step11-area .s11-bubble { position:absolute; width:1.7%; height:2.6%; border:.16cqw solid #fff4dabb; border-radius:50%; background:#fff6de33; animation:s11-bubble 1.25s ease-out infinite; }
.step11-area .s11-rings { opacity:0; transition:opacity .4s ease; }
.step11-area .s11-mixing .s11-rings { opacity:1; }
.step11-area .s11-rings i { position:absolute; left:64%; top:46%; width:12%; height:5%; border:.6cqw solid #fffbe7d9; border-radius:50%; filter:blur(.18cqw); animation:s11-swirl 1.45s ease-out infinite; }
.step11-area .s11-rings i:nth-child(2) { left:60%; top:48%; width:17%; height:6%; animation-delay:-.5s; }
.step11-area .s11-rings i:nth-child(3) { left:70%; top:45%; width:10%; height:4%; animation-delay:-1s; }
/* Pouring art is mirrored to put the stream on the right, away from Reset. The front rim masks its foot. */
.step11-area .s11-pour-layer { position:absolute; inset:0; z-index:6; pointer-events:none; }
.step11-area .s11-pouring { position:absolute; transform:scaleX(-1); }
.step11-area .s11-pouring img { width:100%; height:100%; object-fit:fill; }
.step11-area .s11-pouring-tea { left:39%; top:20%; width:38%; height:32%; }
.step11-area .s11-pouring-tea img { transform:rotate(-20deg); transform-origin:20% 92%; animation:s11-tea-pour 1.3s ease-in-out; }
.step11-area .s11-pouring-milk { left:35%; top:18%; width:43%; height:34%; }
.step11-area .s11-pouring-milk img { animation:s11-milk-pour 1.3s ease-in-out; transform-origin:20% 90%; }
.step11-area .s11-steam { position:absolute; left:58%; top:32%; width:24%; height:16%; z-index:9; pointer-events:none; }
.step11-area .s11-steam i { position:absolute; left:12%; bottom:0; width:11%; height:72%; border-left:.6cqw solid #fff9e4bb; border-radius:50%; filter:blur(.2cqw); animation:s11-steam 2.5s ease-out infinite; }
.step11-area .s11-steam i:nth-child(2) { left:47%; animation-delay:-.8s; }
.step11-area .s11-steam i:nth-child(3) { left:81%; animation-delay:-1.65s; }
.step11-area .s11-tool { position:absolute; z-index:15; touch-action:none; cursor:grab; user-select:none; }
.step11-area .s11-tool:focus-visible { outline:3px solid #a96516; outline-offset:4px; border-radius:8px; }
.step11-area .s11-tea { left:24%; top:55%; width:15%; height:35%; }
.step11-area .s11-tea img { width:100%; height:100%; object-fit:fill; }
.step11-area .s11-milk { left:4%; top:50%; width:18%; height:40%; overflow:hidden; }
/* The jug PNG has transparent side gutters; crop only those gutters, keeping the real art. */
.step11-area .s11-milk img { position:absolute; left:-54.6%; top:-4.3%; width:207.4%; height:108.8%; object-fit:fill; }
.step11-area .s11-returning { transition:left .35s ease,top .35s ease; }
.step11-area .s11-returning-safe { transition:left .2s ease,top .15s ease .2s; }
.step11-area .s11-dragging { z-index:25; cursor:grabbing; transition:none; }
.step11-area .s11-lid { position:absolute; left:24%; top:55%; width:15%; height:35%; z-index:16; pointer-events:none; clip-path:inset(0 0 74% 0); animation:s11-lid .42s ease-out forwards; }
.step11-area .s11-lid img { width:100%; height:100%; object-fit:fill; }
/* Milk cap strip: same box and crop as the jug, clipped just below the red cap. */
.step11-area .s11-milk-cap { position:absolute; width:18%; height:40%; overflow:hidden; z-index:16; pointer-events:none; clip-path:inset(0 0 88.5% 0); animation:s11-lid .42s ease-out forwards; }
.step11-area .s11-milk-cap img { position:absolute; left:-54.6%; top:-4.3%; width:207.4%; height:108.8%; object-fit:fill; }
.step11-area .step11-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 s11-lid { from { opacity:1; transform:translateY(0) rotate(0); } to { opacity:0; transform:translateY(-18%) rotate(-12deg); } }
@keyframes s11-bubble { 0% { opacity:0; transform:scale(.3); } 45% { opacity:.85; } 100% { opacity:0; transform:translateY(-75%) scale(1.3); } }
@keyframes s11-swirl { 0% { opacity:.15; transform:scale(.4) rotate(-12deg); } 35% { opacity:.9; } 100% { opacity:0; transform:scale(1.55) rotate(18deg); } }
@keyframes s11-steam { 0% { opacity:0; transform:translateY(0) rotate(-12deg); } 25% { opacity:.65; } 100% { opacity:0; transform:translateY(-60%) rotate(15deg); } }
@keyframes s11-tea-pour { 0%,100% { opacity:.3; transform:rotate(-16deg); } 15%,85% { opacity:1; transform:rotate(-20deg); } }
@keyframes s11-milk-pour { 0%,100% { opacity:.3; transform:rotate(3deg); } 15%,85% { opacity:1; transform:rotate(0); } }

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