body{background:#f3f0ff}.shapes-stage{position:absolute;inset:0}.hole,.piece,.sparkle{width:var(--size);height:var(--size);position:absolute;top:0;left:0}.hole svg,.piece svg,.sparkle svg{width:100%;height:100%;overflow:visible}.hole svg>*{fill:#3b33551f;stroke:#3b33554d;stroke-width:4px;stroke-dasharray:8 6}.piece{z-index:1;touch-action:none;will-change:transform;filter:drop-shadow(0 4px 0 color-mix(in srgb, var(--c) 65%, #000));transition:transform .18s ease-out}.piece svg>*{fill:var(--c);stroke:var(--c);stroke-width:4px}.piece svg{transition:scale .15s}.piece.is-dragging{z-index:2;filter:drop-shadow(0 10px 8px #3b33554d);transition:none}.piece.is-dragging svg{scale:1.12}.piece.is-returning{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.piece.is-placed{filter:none}.piece.is-placed svg{animation:.3s ease-out snap}@keyframes snap{50%{scale:1.15}}.sparkle{z-index:3;pointer-events:none;width:36px;height:36px;margin:-18px 0 0 -18px;animation:1.2s ease-out forwards burst}.sparkle svg>*{fill:var(--c)}@keyframes burst{0%{opacity:1;transform:translate(0)scale(.3)rotate(0)}to{transform:translate(var(--dx), var(--dy)) scale(1.2) rotate(180deg);opacity:0}}.hole.is-hidden{opacity:0}.hole{transition:opacity .3s}.piece.is-hidden{opacity:0;pointer-events:none}.piece.is-popping{transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .15s}.surprise-box{z-index:3;width:calc(var(--size) * 1.6);height:calc(var(--size) * 1.6);touch-action:manipulation;cursor:pointer;background:0 0;border:0;min-width:96px;min-height:96px;padding:0;position:absolute;top:0;left:0}.surprise-box svg{pointer-events:none;transform-origin:50% 90%;width:180%;height:180%;animation:2.4s ease-in-out infinite box-wiggle;position:absolute;inset:-40%}.surprise-box .box-lid{transform-box:fill-box;transform-origin:0 100%;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s .3s}.surprise-box.is-open svg{animation:none}.surprise-box.is-open .box-lid{opacity:0;transform:translate(-10%,-60%)rotate(-35deg)}.surprise-box.is-open .box-body{opacity:0;transition:opacity .3s .6s}@keyframes box-wiggle{0%,70%,to{rotate:0deg}76%{rotate:-6deg}82%{rotate:6deg}88%{rotate:-4deg}94%{rotate:3deg}}
