.tray{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,2.5vw,1.25rem);padding:clamp(.4rem,1.6vw,.8rem);padding-bottom:max(clamp(.4rem,1.6vw,.8rem),env(safe-area-inset-bottom));touch-action:none}.tray-main{display:flex;flex-direction:column;gap:clamp(.35rem,1.2vw,.6rem)}.tabs{display:flex;justify-content:center;gap:clamp(.3rem,1.2vw,.6rem)}.tab{display:grid;place-items:center;width:clamp(42px,8.5vw,58px);aspect-ratio:1;padding:0;border:none;border-radius:40%;background:#ffffff6b;color:#b1626c;cursor:pointer;transition:background .14s ease,transform .14s ease,color .14s ease}.tab svg{width:58%;height:58%}.tab.is-active{background:#fff;color:#e96c7b;transform:translateY(-3px) scale(1.08);box-shadow:0 5px 12px #4a2a2f42}.panels{position:relative;display:grid;place-items:center;min-height:clamp(56px,12vw,80px)}.panel{display:none;gap:clamp(.4rem,1.6vw,.85rem);align-items:center;justify-content:center;flex-wrap:wrap}.panel.is-active{display:flex}.chip{display:grid;place-items:center;width:clamp(52px,10.5vw,74px);aspect-ratio:1;padding:0;border:4px solid rgba(255,255,255,.62);border-radius:50%;background:#ffffff8c;background-size:88%;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 10px #4a2a2f3d;transition:transform .14s ease,border-color .14s ease;cursor:pointer}.chip.is-selected{border-color:#fff;transform:scale(1.14);box-shadow:0 6px 16px #4a2a2f57}.chip:active{transform:scale(.94)}.swatch{background:var(--flavour)}.chip-base:before{content:"";width:62%;height:62%;background:#e3b579}.chip-waffle:before{clip-path:polygon(50% 100%,4% 16%,96% 16%)}.chip-sugar:before{background:#f0cf9c;clip-path:polygon(50% 100%,14% 10%,86% 10%)}.chip-tub:before{background:#fff1e4;border:3px solid #f7a8dd;box-sizing:border-box;clip-path:polygon(12% 6%,88% 6%,76% 100%,24% 100%)}.bottle{color:var(--sauce);background:#ffffffd1}.bottle svg{width:54%;height:54%}.shaker-body{position:relative;display:block;width:62%;height:62%;border-radius:30%;background:#ffffffe6;overflow:hidden}.shaker-body i{position:absolute;left:calc(14% + (var(--i) / var(--n)) * 74%);top:calc(18% + (var(--i) * 13%));width:14%;height:26%;border-radius:40%;transform:rotate(calc(var(--i) * 37deg))}.dispense{display:grid;place-items:center;width:clamp(88px,20vw,128px);aspect-ratio:1;padding:0;border:6px solid #fff;border-radius:50%;background:#fff6;box-shadow:0 6px 18px #4a2a2f52;transition:transform 90ms ease;cursor:pointer;flex:none}.dispense.is-held{transform:scale(.93)}.dispense-inner{display:block;width:62%;aspect-ratio:1;border-radius:50%;background:#fff6ea;box-shadow:inset 0 -4px 8px #4a2a2f2e}.corner-button{position:absolute;z-index:3;top:max(.75rem,env(safe-area-inset-top));display:grid;place-items:center;width:clamp(50px,10vw,68px);aspect-ratio:1;padding:0;border:none;border-radius:50%;background:#ffffffb8;color:#b1626c;box-shadow:0 4px 12px #4a2a2f38;cursor:pointer;touch-action:none}.corner-left{left:max(.75rem,env(safe-area-inset-left))}.corner-right{right:max(.75rem,env(safe-area-inset-right))}.corner-button svg{width:54%;height:54%}.corner-button:active{transform:scale(.92)}@media(orientation:landscape){.tray{inset:0 0 0 auto;flex-direction:column;align-items:center;justify-content:center;padding-right:max(clamp(.4rem,1.6vw,.8rem),env(safe-area-inset-right))}.tabs{flex-wrap:wrap;max-width:clamp(120px,22vh,160px)}.tab{width:clamp(42px,7vh,54px)}.panel{max-width:clamp(140px,26vh,190px)}.chip{width:clamp(48px,8vh,66px)}.dispense{width:clamp(80px,15vh,112px)}}@media(prefers-reduced-motion:reduce){.chip,.tab,.dispense,.corner-button{transition:none}.chip.is-selected,.tab.is-active{transform:none}}.corner-finish{right:max(.75rem,env(safe-area-inset-right));top:auto;bottom:max(.75rem,env(safe-area-inset-bottom));width:clamp(64px,13vw,88px);background:#2ec4b6;color:#fff;box-shadow:0 6px 18px #146e6666}.corner-home{left:max(.75rem,env(safe-area-inset-left));top:auto;bottom:max(.75rem,env(safe-area-inset-bottom));width:clamp(46px,9vw,60px);background:#ffffff8c;text-decoration:none}@media(orientation:portrait){.corner-finish,.corner-home{bottom:auto;top:max(.75rem,env(safe-area-inset-top))}.corner-finish{right:max(.75rem,env(safe-area-inset-right))}.corner-right{right:calc(max(.75rem,env(safe-area-inset-right)) + clamp(72px,15vw,100px))}.corner-home{left:calc(max(.75rem,env(safe-area-inset-left)) + clamp(58px,12vw,78px))}}.replay{position:absolute;z-index:4;left:50%;top:50%;display:grid;place-items:center;width:clamp(110px,26vw,168px);aspect-ratio:1;padding:0;border:none;border-radius:50%;background:#2ec4b6;color:#fff;box-shadow:0 10px 30px #146e6673;opacity:0;transform:translate(-50%,-50%) scale(.7);pointer-events:none;transition:opacity .42s ease,transform .42s cubic-bezier(.2,1.3,.5,1);cursor:pointer}.replay svg{width:56%;height:56%}.replay.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}body.celebrating .tray,body.celebrating .corner-button{opacity:0;pointer-events:none;transition:opacity .26s ease}.tray,.corner-button{transition:opacity .26s ease}@media(prefers-reduced-motion:reduce){.replay{transition:opacity .2s ease;transform:translate(-50%,-50%)}.replay.is-visible{transform:translate(-50%,-50%)}}