.bg-roll,.bg-land,.bg-pop,.bg-flip-in,.bg-hit,.bg-pulse{transform-box:fill-box;transform-origin:50%}.bg-roll{animation:.76s cubic-bezier(.2,.75,.25,1) both bg-roll;animation-delay:calc(var(--i,0) * 90ms)}@keyframes bg-roll{0%{opacity:0;transform:translate(-18%,-70%)rotate(-430deg)scale(.55)}18%{opacity:1}55%{transform:translate(3%,6%)rotate(14deg)scale(1.08)}72%{transform:translateY(-6%)rotate(-7deg)scale(.97)}86%{transform:translateY(1%)rotate(2deg)scale(1.01)}to{opacity:1;transform:none}}.bg-land{animation:.42s cubic-bezier(.22,1,.36,1) both bg-land;animation-delay:calc(var(--i,0) * 60ms)}@keyframes bg-land{0%{opacity:0;transform:translateY(-28%)scale(1.12)}60%{opacity:1;transform:translateY(2%)scale(.96,1.04)}to{transform:none}}.bg-pop{animation:.36s cubic-bezier(.22,1,.36,1) bg-pop}@keyframes bg-pop{0%{transform:scale(1)}40%{transform:scale(1.22)}to{transform:scale(1)}}.bg-flip-in{animation:.52s cubic-bezier(.22,1,.36,1) both bg-flip-in;animation-delay:calc(var(--i,0) * 80ms);backface-visibility:hidden}@keyframes bg-flip-in{0%{opacity:.4;transform:perspective(600px)rotateY(-90deg)scale(.94)}60%{opacity:1;transform:perspective(600px)rotateY(8deg)scale(1.03)}to{transform:none}}.bg-hit{animation:.42s cubic-bezier(.36,.07,.19,.97) bg-hit}@keyframes bg-hit{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}.bg-pulse{animation:1.4s ease-in-out infinite bg-pulse}@keyframes bg-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}:root[data-motion=reduce] :is(.bg-roll,.bg-land,.bg-pop,.bg-flip-in,.bg-hit,.bg-pulse){animation:none}@media (prefers-reduced-motion:reduce){:root:not([data-motion=full]) :is(.bg-roll,.bg-land,.bg-pop,.bg-flip-in,.bg-hit,.bg-pulse){animation:none}}.zb{flex-direction:column;gap:6px;min-inline-size:0;display:flex;position:relative}.zb__viewport{touch-action:pan-x pan-y;border-radius:inherit;position:relative;overflow:hidden}.zb--zoomed .zb__viewport{touch-action:none;cursor:grab}.zb--zoomed .zb__viewport:active{cursor:grabbing}.zb__content{transform-origin:0 0;will-change:transform}.zb__controls{order:-1;align-self:flex-end;gap:6px;display:flex}.zb__controls button{color:#2a2520;cursor:pointer;background:linear-gradient(#fffdf6,#eadfc4);border:1px solid #00000040;border-radius:12px;block-size:36px;inline-size:36px;font:900 1.2rem/1 system-ui,sans-serif;box-shadow:inset 0 1px #fffc,0 3px 8px #00000059}.zb__controls button:hover:not(:disabled){background:linear-gradient(#fff,#f2e8cf)}.zb__controls button:disabled{opacity:.45;cursor:default}.zb__controls button:focus-visible{outline:3px solid var(--focus,#ffd34d);outline-offset:2px}.zb__tip{color:#fff;pointer-events:none;background:#0009;border-radius:999px;inline-size:fit-content;margin:0 auto;padding:4px 12px;font-size:.75rem;position:absolute;inset-block-end:8px;inset-inline:0}@media (orientation:landscape) and (height<=560px){.zb__viewport{max-block-size:calc(100dvh - 66px)}.zb__content>svg{max-block-size:calc(100dvh - 66px);inline-size:auto;max-inline-size:100%;margin-inline:auto}}