@keyframes FwdZoomOut{0%{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}@keyframes FwdZoomIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes BwdZoomOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}@keyframes BwdZoomIn{0%{transform:scale(5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes FwdMoveOut{0%{transform:translateZ(0) rotateX(0);opacity:1}50%{transform:translate3d(-10cm,0,-50cm) rotateX(45deg);opacity:1}to{transform:translate3d(-50cm,0,-50cm) rotateX(0);opacity:0}}@keyframes FwdMoveIn{0%{transform:translate3d(50cm,0,-50cm) rotateX(0);opacity:0}50%{transform:translate3d(10cm,0,-50cm) rotateX(-45deg);opacity:1}to{transform:translateZ(0) rotateX(0);opacity:1}}@keyframes BwdMoveOut{0%{transform:translateZ(0) rotateX(0);opacity:1}50%{transform:translate3d(10cm,0,-50cm) rotateX(-45deg);opacity:1}to{transform:translate3d(50cm,0,-50cm) rotateX(0);opacity:0}}@keyframes BwdMoveIn{0%{transform:translate3d(-50cm,0,-50cm) rotateX(0);opacity:0}50%{transform:translate3d(-10cm,0,-50cm) rotateX(45deg);opacity:1}to{transform:translateZ(0) rotateX(0);opacity:1}}::view-transition-image-pair(*){perspective:50cm}#demo:where(.astro-67rb557r){background:var(--vtbot-gradbg);padding:4ex;border:1px dotted var(--vtbot-accent)}.button-grid:where(.astro-67rb557r){display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--vtbot-gradbg);padding:3ex}.button-grid:where(.astro-67rb557r) button:where(.astro-67rb557r){padding:10px;font-size:16px;color:var(--vtbot-color);background:var(--vtbot-table-background);border:dotted 1px var(--vtbot-color)}.button-grid:where(.astro-67rb557r) button:where(.astro-67rb557r).selected{color:var(--vtbot-accent);background:var(--vtbot-gradbg);border:solid 2px var(--vtbot-accent)}a{color:var(--vtbot-global-accent)}img{background-color:gray;padding:.2ex;margin:1ex}::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-group(*){animation:none}