.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}.zb--full{background:radial-gradient(120% 90% at 50% 30%,#235c43,#10301f);justify-content:center;align-items:center;block-size:100dvh;inline-size:100vw;padding:8px}.zb--full .zb__viewport{max-block-size:calc(100dvh - 58px);max-inline-size:100%}.zb--full .zb__content>svg{max-block-size:calc(100dvh - 58px);inline-size:auto;max-inline-size:100%}@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}}