.step7-area .s7-stage { position:absolute; inset:0; container-type:size; user-select:none; }
.step7-area .s7-stage [hidden] { display:none !important; }
.step7-area .step7-reset { position:absolute; right:3%; top:2%; width:26%; height:13%; box-sizing:border-box; z-index:30; border:2px solid #56351d; border-radius:10px; background:#fff1d0; padding:7px 14px; font-size:clamp(12px,3.2cqw,19px); white-space:nowrap; cursor:pointer; }
.step7-area .s7-stage img { display:block; width:100%; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
/* Stove 2, pot 5, pouring 8, steam 9, drag 20, Reset 30. */
.step7-area .s7-stove { position:absolute; left:40%; top:51%; width:38%; aspect-ratio:1536/1024; z-index:2; }
.step7-area .s7-knob { position:absolute; left:66%; top:68%; width:15%; height:25%; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:manipulation; }
.step7-area .s7-knob:focus-visible { outline:3px solid #d08617; outline-offset:3px; }
.step7-area .s7-draggable { position:absolute; cursor:grab; touch-action:none; transition:left .35s ease,top .35s ease; }
.step7-area .s7-pot { width:33%; aspect-ratio:900/533; z-index:5; }
.step7-area .s7-pot img { position:absolute; inset:0; }
/* Normalize the supplied water PNG's alpha bbox to the empty pot's visible box. */
.step7-area .s7-pot[data-kind="water"] img { left:-4.4489%; top:-7.2215%; width:109.5618%; height:116.6463%; }
/* Boiling artwork includes steam above the body: keep the base fixed. */
.step7-area .s7-pot[data-kind="boiling"] img { top:-8.6957%; height:108.6957%; }
.step7-area .s7-pitcher { width:19.5%; aspect-ratio:367/414; z-index:6; }
.step7-area .s7-pitcher img { position:absolute; left:-10.8992%; top:-8.9372%; width:117.1662%; height:119.3237%; }
.step7-area .s7-dragging { z-index:20; cursor:grabbing; transition:none; }
.step7-area .s7-lit .s7-draggable { cursor:default; }
.step7-area .s7-pour { position:absolute; aspect-ratio:900/1015; z-index:8; pointer-events:none; clip-path:inset(0 0 9% 0); animation:s7-pour-in .18s ease-out; }
.step7-area .s7-pour.s7-mirrored img { transform:scaleX(-1); }
.step7-area .s7-steam { position:absolute; width:13%; height:12%; z-index:9; pointer-events:none; }
.step7-area .s7-steam i { position:absolute; left:12%; bottom:0; width:13%; height:56%; border-radius:50%; background:linear-gradient(0deg,#ffffff00,#ffffffe0,#ffffff00); filter:blur(2px); animation:s7-steam 1.9s ease-out infinite; }
.step7-area .s7-steam i:nth-child(2) { left:43%; animation-delay:-.65s; }
.step7-area .s7-steam i:nth-child(3) { left:73%; animation-delay:-1.3s; }
.step7-area .s7-boiling .s7-pot img { transform-origin:50% 100%; animation:s7-simmer .65s ease-in-out infinite alternate; }
.step7-area .s7-callout { position:absolute; left:82%; top:36%; width:11%; z-index:10; text-align:center; color:#5a2a0a; pointer-events:none; animation:s7-pop .38s cubic-bezier(.2,1.7,.5,1); }
.step7-area .s7-callout span { position:relative; display:block; font-family:"DFKai-SB","KaiTi",serif; font-size:9cqw; line-height:1; font-weight:900; color:#ffc928; -webkit-text-stroke:.075em #5a2a0a; paint-order:stroke fill; }
.step7-area .s7-callout small { display:block; font-size:3.1cqw; line-height:1.2; font-weight:800; }
.step7-area .s7-callout svg { position:absolute; width:125%; height:110%; left:-12%; top:-9%; overflow:visible; }
.step7-area .s7-callout path { stroke:#ffc928; stroke-width:5; stroke-linecap:round; fill:none; }
.step7-area .s7-shake { animation:s7-shake .3s ease; }
@keyframes s7-shake { 25%,75% { transform:rotate(-12deg); } 50% { transform:rotate(12deg); } }
@keyframes s7-pour-in { from { opacity:0; transform:translateY(-2%); } to { opacity:1; transform:translateY(0); } }
@keyframes s7-simmer { from { transform:scaleY(1); } to { transform:scaleY(1.008); } }
@keyframes s7-steam { 0% { opacity:0; transform:translate(0,15%) scale(.65); } 25% { opacity:.65; } 100% { opacity:0; transform:translate(25%,-75%) scale(1.2); } }
@keyframes s7-pop { from { opacity:0; transform:scale(.35); } to { opacity:1; transform:scale(1); } }