.step6-area .s6-scene { position:absolute; inset:0; container-type:size; }
/* Dough/grid below pearls; moving tools and lifted piece above the food. */
.step6-area .s6-dough { position:absolute; left:18%; top:46%; width:64%; aspect-ratio:2; z-index:2; pointer-events:none; }
.step6-area .s6-dough > img { display:block; width:100%; height:100%; }
/* Match the flat PNG's visible bounds, including its transparent edge padding. */
.step6-area .s6-dough > .s6-cut-art { position:absolute; left:6.3%; top:4.7%; width:87.4%; height:94.2%; opacity:0; }
.step6-area .s6-grooves { position:absolute; left:6.3%; top:4.7%; width:87.4%; height:94.2%; }
.step6-area .s6-grid { position:absolute; inset:0; mask-image:url('../flat_dough5.png'); -webkit-mask-image:url('../flat_dough5.png'); mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
/* Panel-relative grooves reveal in sync with the blade; the PNG mask clips their edges. */
.step6-area .s6-cut { position:absolute; display:block; background:#6b3a12; border-radius:.15cqw; transform-origin:top left; }
.step6-area .s6-horizontal { left:0; width:100%; height:.9cqw; margin-top:-.45cqw; box-shadow:0 .18cqw 0 #ffe1a8; transform:scaleX(0); }
.step6-area .s6-vertical { top:0; width:.9cqw; height:100%; margin-left:-.45cqw; box-shadow:.18cqw 0 0 #ffe1a8; transform:scaleY(0); }
.step6-area .s6-tool { position:absolute; display:block; padding:0; margin:0; border:0; background:transparent; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; z-index:12; transform-origin:24% 86%; }
.step6-area .s6-tool > img { display:block; width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; }
.step6-area .s6-scraper { width:24%; }
.step6-area .s6-hand { width:16%; }
.step6-area .s6-tool:focus-visible { outline:3px dashed #945421; outline-offset:4px; }
.step6-area .s6-dragging { cursor:grabbing; z-index:20; }
.step6-area .s6-returning { transition:left .35s ease,top .35s ease,transform .35s ease; }
.step6-area .s6-pile { position:absolute; inset:0; z-index:5; pointer-events:none; }
.step6-area .s6-pearl { position:absolute; display:block; width:5.1%; aspect-ratio:1.06; border-radius:48%; border:1px solid #ad7a43; opacity:0; transform:translate(-50%,-50%) scale(.3); background-color:#d2a46b; background-image:radial-gradient(circle,#f1d9b6 0 1px,transparent 1.2px),radial-gradient(circle,#ad8455 0 .6px,transparent 1px),radial-gradient(ellipse at 44% 40%,#dfbc8b,#c49965); background-size:7px 9px,11px 8px,100% 100%; background-position:0 0,3px 4px,0 0; box-shadow:0 2px 2px #67472228; }
.step6-area .s6-visible { opacity:1; transform:translate(-50%,-50%) scale(1); animation:s6-pearl-in .25s ease-out; }
.step6-area .s6-piece { position:absolute; width:4.2%; aspect-ratio:1; background:#dcb078; border:1px solid #a37440; box-shadow:0 3px 3px #56351d33; z-index:14; pointer-events:none; }
.step6-area [hidden] { display:none; }
.step6-area .step6-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 s6-pearl-in { from { opacity:0; transform:translate(-50%,-80%) scale(.5); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }