.drzzl-aglio{--green:#123d21;--orange:#ff6b00;--yellow:#ffd21c;--cream:#f5ead9;position:relative;max-width:1500px;margin:auto;border:7px solid var(--green);color:var(--cream);background:#111;font-family:"Courier New",monospace;overflow:hidden;box-shadow:0 22px 70px #0005}.drzzl-aglio *{box-sizing:border-box}.drzzl-aglio button{font:900 .75rem/1 "Courier New",monospace;letter-spacing:.04em;cursor:pointer;touch-action:manipulation}
.drzzl-aglio__header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;min-height:50px;padding:8px 18px;border-bottom:5px solid var(--orange);color:var(--yellow);background:#111;text-align:center;font-weight:900}.drzzl-aglio__header span{text-align:left}.drzzl-aglio__header button{justify-self:end;padding:7px 10px;border:2px solid var(--yellow);color:var(--yellow);background:#111}
.drzzl-aglio__viewport{position:relative;aspect-ratio:16/7.2;min-height:420px;overflow:hidden;background:#d7c7b3}.drzzl-aglio__world{position:absolute;inset:0;transform:translateX(var(--walk,0)) scale(1.035);transition:transform .7s cubic-bezier(.2,.75,.25,1)}.drzzl-aglio[data-step="0"]{--walk:3%;--focus-x:11%}.drzzl-aglio[data-step="1"]{--walk:1.5%;--focus-x:30%}.drzzl-aglio[data-step="2"],.drzzl-aglio[data-step="3"]{--walk:0%;--focus-x:51%}.drzzl-aglio[data-step="4"],.drzzl-aglio[data-step="5"]{--walk:-2.5%;--focus-x:72%}.drzzl-aglio[data-step="6"]{--walk:-4%;--focus-x:90%}.drzzl-aglio__kitchen{position:absolute;inset:0;background:var(--kitchen) center/cover no-repeat}.drzzl-aglio__shade{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--focus-x) 51%,transparent 0 12%,#07160e80 31%,#07160ed8 68%);pointer-events:none;transition:background .55s}
.drzzl-aglio__station{position:absolute;z-index:8;transform:translate(-50%,-50%);border:3px solid transparent;border-radius:50%;pointer-events:none;transition:.3s}.drzzl-aglio__station b{position:absolute;top:-27px;left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:20px;color:#fff;background:#111d;white-space:nowrap;font-size:.62rem}.station-bag{left:11%;top:51%;width:16%;height:41%}.station-sink{left:30%;top:51%;width:18%;height:49%}.station-board{left:51%;top:51%;width:19%;height:43%}.station-hob{left:72%;top:51%;width:20%;height:49%}.station-plate{left:90%;top:51%;width:13%;height:34%}.drzzl-aglio[data-step="0"] [data-station="0"],.drzzl-aglio[data-step="1"] [data-station="1"],.drzzl-aglio[data-step="2"] [data-station="2"],.drzzl-aglio[data-step="3"] [data-station="2"],.drzzl-aglio[data-step="4"] [data-station="4"],.drzzl-aglio[data-step="5"] [data-station="4"],.drzzl-aglio[data-step="6"] [data-station="6"]{border-color:var(--yellow);box-shadow:0 0 0 7px #ffd21c22,0 0 35px #ffd21c88}
.drzzl-aglio__food{position:absolute;z-index:6;width:6%;height:15%;opacity:0;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 7px 5px #0006);transition:left .65s,top .65s,transform .35s,opacity .25s}.food-spaghetti{background-image:var(--spaghetti)}.food-garlic{background-image:var(--garlic)}.food-chilli{background-image:var(--chilli)}.food-parsley{background-image:var(--parsley)}.food-spaghetti.is-unpacked{left:17%;top:29%;opacity:1}.food-garlic.is-unpacked{left:19%;top:43%;opacity:1}.food-chilli.is-unpacked{left:17%;top:57%;opacity:1}.food-parsley.is-unpacked{left:19%;top:68%;opacity:1}.drzzl-aglio__food.is-lifting{transform:translate(-75px,-65px) scale(1.25) rotate(-8deg)}.food-parsley.at-sink{left:27%;top:44%;width:7%;height:20%;transform:rotate(8deg)}.drzzl-aglio.washed .food-parsley{filter:drop-shadow(0 6px 5px #0006) saturate(1.2) brightness(1.1)}.drzzl-aglio[data-step="2"] .food-garlic,.drzzl-aglio[data-step="3"] .food-chilli{left:48%;top:43%;width:7%;height:17%;opacity:1}.drzzl-aglio[data-step="2"] .food-garlic{clip-path:inset(0 var(--garlic-cut,0%) 0 0)}.drzzl-aglio[data-step="3"] .food-chilli{clip-path:inset(0 var(--chilli-cut,0%) 0 0)}
.drzzl-aglio__water{position:absolute;z-index:9;left:29.6%;top:29%;width:2.5%;height:25%;opacity:0;pointer-events:none}.drzzl-aglio__water:before{content:"";position:absolute;left:48%;top:0;width:7px;height:78%;border-radius:50%;background:linear-gradient(90deg,#72d6ff55,#eaffffff,#76ddff66);box-shadow:0 0 10px #c8f7ff}.drzzl-aglio__water i{position:absolute;bottom:0;width:7px;height:7px;border:2px solid #dfffff;border-radius:50%;animation:splash .55s infinite}.drzzl-aglio__water i:nth-child(2){left:55%;animation-delay:.2s}.drzzl-aglio__water i:nth-child(3){left:25%;animation-delay:.35s}.drzzl-aglio.is-washing .drzzl-aglio__water{opacity:1}
.drzzl-aglio__knife{position:absolute;z-index:10;left:51%;top:25%;width:4.5%;height:31%;opacity:0;background:var(--knife) center/contain no-repeat;filter:drop-shadow(5px 7px 5px #0007);transform:rotate(8deg);transform-origin:50% 85%}.drzzl-aglio[data-step="2"] .drzzl-aglio__knife,.drzzl-aglio[data-step="3"] .drzzl-aglio__knife{opacity:1}.drzzl-aglio.is-chopping .drzzl-aglio__knife{animation:chop .24s cubic-bezier(.2,.8,.3,1)}.drzzl-aglio__cut{position:absolute;z-index:7;left:49%;top:48%;width:7%;height:12%;opacity:0}.drzzl-aglio[data-step="2"] .cut-garlic{opacity:var(--garlic-opacity,0);background:radial-gradient(ellipse,#f0e2b3 0 45%,transparent 48%) 0 0/24px 18px}.drzzl-aglio[data-step="3"] .cut-chilli{opacity:var(--chilli-opacity,0);background:radial-gradient(ellipse,#d72d16 0 44%,transparent 48%) 0 0/19px 15px}
.drzzl-aglio__bottle{position:absolute;z-index:12;width:6%;height:28%;opacity:0;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(6px 9px 7px #0008);transform-origin:50% 82%;transition:.25s}.bottle-kitchen{left:76%;top:18%;background-image:var(--kitchen-oil)}.bottle-table{left:85%;top:17%;background-image:var(--table-oil)}.drzzl-aglio[data-step="4"] .bottle-kitchen,.drzzl-aglio[data-step="6"].is-plating .bottle-table{opacity:1}.drzzl-aglio.is-pouring .bottle-kitchen,.drzzl-aglio.is-dressing .bottle-table{transform:rotate(-64deg) translate(-12%,15%)}.drzzl-aglio__oil-stream{position:absolute;z-index:11;width:7px;height:19%;opacity:0;border-radius:50%;background:linear-gradient(90deg,#a36d12,#ffe499,#a96d0b);transform:rotate(10deg);transform-origin:top}.stream-kitchen{left:73.5%;top:35%}.stream-table{left:89%;top:38%}.drzzl-aglio.is-pouring .stream-kitchen,.drzzl-aglio.is-dressing .stream-table{opacity:.95;animation:oil .22s infinite alternate}
.drzzl-aglio__pan-food{position:absolute;z-index:7;left:67.7%;top:39%;width:9%;height:22%;opacity:0;border-radius:50%;transition:.2s}.drzzl-aglio__pan-food.visible{opacity:1}.drzzl-aglio__pan-food i{position:absolute;width:19%;height:15%;border:2px solid #d8c798;border-radius:50%;background:#f3e6ba;transition:.25s}.drzzl-aglio__pan-food i:nth-child(1){left:10%;top:25%}.drzzl-aglio__pan-food i:nth-child(2){left:38%;top:12%}.drzzl-aglio__pan-food i:nth-child(3){left:67%;top:24%}.drzzl-aglio__pan-food i:nth-child(4){left:22%;top:50%}.drzzl-aglio__pan-food i:nth-child(5){left:55%;top:48%}.drzzl-aglio__pan-food i:nth-child(6){left:73%;top:67%}.drzzl-aglio__pan-food i:nth-child(7){left:8%;top:70%}.drzzl-aglio__pan-food i:nth-child(8){left:42%;top:75%}.drzzl-aglio[data-cook="golden"] .drzzl-aglio__pan-food i{background:#d69a2d;border-color:#9d6419}.drzzl-aglio[data-cook="burnt"] .drzzl-aglio__pan-food i{background:#42230d;border-color:#170b04}.drzzl-aglio.is-frying .drzzl-aglio__pan-food i{animation:bubble .48s infinite alternate}
.drzzl-aglio__pasta{position:absolute;z-index:8;left:66.7%;top:37%;width:11%;height:25%;opacity:0;border-radius:50%;background:var(--finished) center/contain no-repeat;filter:drop-shadow(0 3px 3px #0008);transition:left .7s,top .7s,width .7s,height .7s,opacity .2s}.drzzl-aglio__pasta.in-pan{opacity:1}.drzzl-aglio.is-mixing .drzzl-aglio__pasta{animation:toss .52s cubic-bezier(.2,.7,.4,1)}.drzzl-aglio.is-plating .drzzl-aglio__pasta{left:85.6%;top:38%;width:9%;height:23%}.drzzl-aglio__plated{position:absolute;z-index:8;left:85.7%;top:39%;width:9%;height:22%;opacity:0;background:var(--finished) center/contain no-repeat;transition:.5s}.drzzl-aglio.is-plating .drzzl-aglio__plated{opacity:1}.drzzl-aglio__steam{position:absolute;z-index:10;left:69%;top:29%;opacity:0;color:#fff;font-size:1.5rem}.drzzl-aglio.is-frying .drzzl-aglio__steam,.drzzl-aglio.is-mixing .drzzl-aglio__steam{opacity:.65;animation:steam 1s infinite}
.drzzl-aglio__hud{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;min-height:205px;padding:17px 22px;border-top:6px solid var(--orange);background:repeating-linear-gradient(#131313 0 3px,#111 3px 6px)}.drzzl-aglio__copy p{margin:0 0 6px}.drzzl-aglio__copy>p:first-child{color:var(--yellow);font-size:.72rem;font-weight:900;letter-spacing:.12em}.drzzl-aglio__copy h2{margin:5px 0;color:var(--orange);font:900 clamp(2rem,4.4vw,4rem)/.9 Arial Black,Impact,sans-serif}.drzzl-aglio__copy>p:nth-of-type(2){font-weight:900}.drzzl-aglio__copy small{color:var(--yellow);font-weight:900}.drzzl-aglio__controls{display:flex;flex-wrap:wrap;align-content:center;gap:9px}.drzzl-aglio__controls button{min-height:48px;padding:10px 12px;border:4px solid #000;color:#111;background:var(--yellow);box-shadow:4px 4px 0 #0008}.drzzl-aglio__unpack{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.drzzl-aglio__unpack[hidden],.drzzl-aglio__controls [hidden],.drzzl-aglio__meter[hidden]{display:none!important}.drzzl-aglio__unpack button.is-picked{opacity:.3;transform:translateY(4px);box-shadow:none}.drzzl-aglio__action,.drzzl-aglio__next{width:100%}.drzzl-aglio__next{color:#fff!important;background:var(--orange)!important}.drzzl-aglio__action.is-holding{transform:translateY(4px);box-shadow:none}.drzzl-aglio__meter{width:100%;height:21px;padding:3px;border:3px solid #fff;background:linear-gradient(90deg,#761f13 0 35%,var(--yellow) 36% 78%,#761f13 79%)}.drzzl-aglio__meter i{display:block;height:100%;width:0;background:#fff;mix-blend-mode:difference;transition:width .05s linear}
.drzzl-aglio__result{position:absolute;z-index:30;inset:50px 0 0;display:grid;place-content:center;padding:30px;color:#fff;text-align:center;background:#123d21ed}.drzzl-aglio__result[hidden]{display:none}.drzzl-aglio__result span{color:var(--yellow);font-weight:900}.drzzl-aglio__result h2{margin:15px;color:var(--orange);font:900 clamp(3rem,8vw,7rem)/.85 Arial Black,Impact,sans-serif}.drzzl-aglio__result button{justify-self:center;padding:14px 20px;border:4px solid #000;background:var(--yellow)}
@keyframes splash{to{transform:translate(9px,-15px) scale(1.7);opacity:0}}@keyframes chop{0%{transform:translateY(-55px) rotate(4deg)}60%{transform:translateY(36px) rotate(12deg)}100%{transform:rotate(8deg)}}@keyframes oil{to{transform:rotate(10deg) scaleX(.7)}}@keyframes bubble{to{transform:translateY(-5px) scale(1.12);box-shadow:0 0 0 3px #ffe89a88}}@keyframes toss{40%{transform:translateY(-34%) scale(.88) rotate(8deg)}70%{transform:translateY(-12%) rotate(-5deg)}}@keyframes steam{to{transform:translateY(-18px);opacity:0}}
@media(max-width:760px){.drzzl-aglio__header{grid-template-columns:1fr 1fr;padding:7px 9px;font-size:.65rem}.drzzl-aglio__header strong{display:none}.drzzl-aglio__viewport{aspect-ratio:auto;min-height:410px}.drzzl-aglio__world{left:50%;right:auto;width:980px;transform:translateX(calc(-50% + var(--mobile-walk,34%))) scale(1.02)}.drzzl-aglio[data-step="0"]{--mobile-walk:35%}.drzzl-aglio[data-step="1"]{--mobile-walk:20%}.drzzl-aglio[data-step="2"],.drzzl-aglio[data-step="3"]{--mobile-walk:0%}.drzzl-aglio[data-step="4"],.drzzl-aglio[data-step="5"]{--mobile-walk:-20%}.drzzl-aglio[data-step="6"]{--mobile-walk:-35%}.drzzl-aglio__hud{grid-template-columns:1fr;min-height:310px;padding:14px}.drzzl-aglio__copy h2{font-size:clamp(1.8rem,10vw,3rem)}.drzzl-aglio__result{inset:43px 0 0}}