:root{color-scheme:light;font-family:sans-serif;background:#f3e9dc}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 50% 40%,#fff9ef 0%,transparent 70%)}#toy{position:relative;width:100%;height:100svh;height:100dvh}#stage{position:absolute;inset:env(safe-area-inset-top) 0 calc(112px + env(safe-area-inset-bottom));touch-action:none}#stage.hovering,.fallback{cursor:grab}#stage.dragging{cursor:grabbing}#stage:focus{outline:none}.box-focus{position:absolute;display:none;pointer-events:none;border:2px solid #604737;border-radius:12px}#stage:focus-visible .box-focus{display:block}#stage:focus-visible .fallback{outline:2px solid #604737;outline-offset:8px}canvas{display:block;width:100%;height:100%;-webkit-tap-highlight-color:transparent}.flavors{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:16px;padding:8px 14px;border-radius:60px;background:#ffffff36;border:1px solid #ffffff55;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.swatch{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;padding:7px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.swatch span{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 33% 25%,#f54c55,#cc1020);box-shadow:inset 0 1px 2px #fff5,0 3px 6px #40231720;transition:transform .25s}.swatch[data-flavor=strawberry] span{background:radial-gradient(circle at 33% 25%,#f39cbe,#d9447f)}.swatch[data-flavor=matcha] span{background:radial-gradient(circle at 33% 25%,#b3bf7d,#718447)}.swatch.selected{box-shadow:inset 0 0 0 1px #60473770}.swatch:hover span{transform:scale(1.1)}.swatch:active span{transform:scale(.92)}.swatch:focus-visible{outline:2px solid #604737;outline-offset:3px}.credit{position:absolute;top:max(20px,env(safe-area-inset-top));left:0;right:0;margin:0;text-align:center;font:600 16px "Baloo 2",Trebuchet MS,sans-serif;color:#604737;pointer-events:none}.credit a{color:inherit;pointer-events:auto}.fallback{position:absolute;width:auto;height:min(53%,110vw);max-width:60%;left:50%;top:60%;transform:translate(-50%,-50%) rotate(-9deg);box-shadow:24px 30px 40px #50332025}@media(max-height:480px){#stage{bottom:calc(76px + env(safe-area-inset-bottom))}.flavors{bottom:max(12px,env(safe-area-inset-bottom));padding:2px 10px}}@media(prefers-reduced-motion:reduce){.swatch span{transition:none}}