@view-transition{navigation:auto}
main{view-transition-name:space-panel}
html[data-space-direction="1"]{--space-enter:100vw;--space-leave:-100vw}
html[data-space-direction="-1"]{--space-enter:-100vw;--space-leave:100vw}
html[data-space-direction]::view-transition-old(root),html[data-space-direction]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-space-direction]::view-transition-old(space-panel){animation:space-page-out .38s cubic-bezier(.22,.7,.25,1) both;mix-blend-mode:normal}
html[data-space-direction]::view-transition-new(space-panel){animation:space-page-in .38s cubic-bezier(.22,.7,.25,1) both;mix-blend-mode:normal}
@keyframes space-page-out{to{transform:translateX(var(--space-leave))}}
@keyframes space-page-in{from{transform:translateX(var(--space-enter))}to{transform:translateX(0)}}
html[data-space-entering] main{transform:translateX(var(--space-enter))}
@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation-duration:0s!important}html[data-space-entering] main{transform:none}}