.step9-area .s9-scene { position:absolute; inset:0; container-type:size; isolation:isolate; }
.step9-area .s9-scene [hidden] { display:none !important; }
.step9-area .s9-scene img { display:block; width:100%; height:100%; object-fit:fill; user-select:none; pointer-events:none; -webkit-user-drag:none; }
/* Stove 1, pot 3, steam 4, lid 8/drag 20, controls 30. */
.step9-area .s9-stove { position:absolute; left:27%; top:55%; width:48%; height:41.14%; z-index:1; }
.step9-area .s9-stove img { position:absolute; inset:0; }
.step9-area .s9-fire { transition:opacity .4s; }
.step9-area .s9-medium .s9-fire { opacity:.42; }
.step9-area .s9-pot { position:absolute; left:26.7%; top:37.1%; width:48.5%; height:36.4%; z-index:3; pointer-events:none; }
.step9-area .s9-pot img { position:absolute; bottom:0; }
.step9-area .s9-pot .s9-sinking { height:97.77%; }
.step9-area .s9-floating { opacity:0; transition:opacity 2.5s; }
/* Animate only the opening so the pot body remains seated on the grate. */
.step9-area .s9-rising .s9-floating { opacity:1; }
.step9-area .s9-rising:not(.s9-floated) .s9-floating { animation:s9-rise 2.5s ease-out; clip-path:inset(0 0 49% 0); }
.step9-area .s9-surface { position:absolute; left:20%; top:23%; width:60%; height:17%; border-radius:50%; box-shadow:inset 0 0 5px #e2f8ff; }
.step9-area .s9-running .s9-surface { animation:s9-simmer 1.3s ease-in-out infinite; }
.step9-area .s9-steam { position:absolute; left:41%; top:31%; width:21%; height:17%; z-index:4; pointer-events:none; }
.step9-area .s9-steam i { position:absolute; left:10%; bottom:0; height:70%; width:12%; border-left:3px solid #fff9; border-radius:50%; filter:blur(1px); }
.step9-area .s9-running .s9-steam i { animation:s9-steam 2.6s ease-out infinite; }
.step9-area .s9-steam i:nth-child(2) { left:47%; animation-delay:-.9s; }
.step9-area .s9-steam i:nth-child(3) { left:80%; animation-delay:-1.7s; }
.step9-area .s9-knob { position:absolute; left:58.5%; top:83%; width:10%; height:11%; z-index:7; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.step9-area .s9-knob:disabled { cursor:default; }
.step9-area .s9-knob.s9-glow { background:#ffd40030; }
.step9-area .s9-lid { position:absolute; left:7%; top:10%; width:30%; height:24.1%; z-index:8; touch-action:none; user-select:none; cursor:grab; transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .35s; }
/* Supplied lid has transparent padding: crop only that padding, preserve the art. */
.step9-area .s9-lid-crop { position:absolute; inset:0; overflow:hidden; }
.step9-area .s9-lid-crop img { position:absolute; left:-.12%; top:-40%; width:107.53%; height:169.5%; }
.step9-area .s9-lid.s9-seated { width:33.09%; height:26.36%; }
.step9-area .s9-lid.s9-dragging { transition:none; z-index:20; cursor:grabbing; }
.step9-area .s9-glow { animation:s9-glow 1.15s ease-in-out infinite; }
/* Under the lid, trim only the steam above the rim's back edge; the rim and both handles stay whole. */
.step9-area .s9-covered .s9-pot { clip-path:polygon(0 22%,16% 22%,18% 16%,25% 10.5%,35% 8%,50% 7%,65% 8%,75% 10.5%,82% 16%,84% 22%,100% 22%,100% 100%,0 100%); }
.step9-area .s9-covered .s9-steam { opacity:0; }
.step9-area .s9-clock { position:absolute; left:77%; top:18%; width:20%; height:33.3%; z-index:6; }
.step9-area .s9-clock svg { width:100%; height:100%; display:block; }
.step9-area .s9-numerals { font:900 21px Arial,sans-serif; fill:#111; text-anchor:middle; dominant-baseline:central; }
.step9-area .s9-hour,.step9-area .s9-minute { transform-origin:100px 100px; }
.step9-area .s9-later { position:absolute; left:76%; top:26%; width:21%; text-align:center; font:bold 4.3cqw/1.2 Georgia,serif; color:#56351d; animation:s9-pop .35s ease-out; z-index:6; }
.step9-area .s9-word { position:absolute; left:5%; top:56%; width:18%; height:29%; color:#5a2a0a; text-align:center; z-index:6; animation:s9-pop .4s ease-out; pointer-events:none; }
.step9-area .s9-word svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.step9-area .s9-word path { stroke:#ffc928; stroke-width:4; stroke-linecap:round; fill:none; }
.step9-area .s9-word strong { position:relative; display:block; font:bold 12cqw/1.15 serif; color:#ffc928; -webkit-text-stroke:.075em #5a2a0a; paint-order:stroke fill; }
.step9-area .s9-word small { position:relative; display:block; font:bold 4cqw/1.2 Arial,sans-serif; }
.step9-area .step9-reset { position:absolute; right:3%; top:2%; z-index:30; width:26%; height:13%; box-sizing:border-box; border:2px solid #56351d; border-radius:10px; background:#fff1d0; padding:7px 14px; font-size:clamp(12px,1.4vw,19px); white-space:nowrap; cursor:pointer; }
@keyframes s9-glow { 0%,100% { filter:drop-shadow(0 0 3px #ffd400); } 50% { filter:drop-shadow(0 0 10px #ffd400) drop-shadow(0 0 4px #ffb000); } }
@keyframes s9-rise { from { transform:translateY(3%); } to { transform:translateY(0); } }
@keyframes s9-simmer { 0%,100% { opacity:.2; transform:scale(.96); } 50% { opacity:.65; transform:scale(1.02); } }
@keyframes s9-steam { from { opacity:0; transform:translateY(0) rotate(-9deg); } 30% { opacity:.7; } to { opacity:0; transform:translateY(-40%) rotate(14deg); } }
@keyframes s9-pop { from { opacity:0; transform:scale(.55); } 75% { transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
.step9-area .s9-off .s9-fire { opacity:0; }