@view-transition { navigation: auto; }
html.cm-slide-right::view-transition-old(root) { animation: cm-slide-out-left 560ms cubic-bezier(.45,0,.2,1) both; }
html.cm-slide-right::view-transition-new(root) { animation: cm-slide-in-right 560ms cubic-bezier(.45,0,.2,1) both; }
html.cm-slide-left::view-transition-old(root) { animation: cm-slide-out-right 560ms cubic-bezier(.45,0,.2,1) both; }
html.cm-slide-left::view-transition-new(root) { animation: cm-slide-in-left 560ms cubic-bezier(.45,0,.2,1) both; }
html::view-transition-group(root) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.45,0,.2,1); }
html::view-transition-old(root), html::view-transition-new(root) { mix-blend-mode: normal; backface-visibility: hidden; }
@keyframes cm-slide-out-left { to { transform: translateX(-100%); } }
@keyframes cm-slide-in-right { from { transform: translateX(100%); } }
@keyframes cm-slide-out-right { to { transform: translateX(100%); } }
@keyframes cm-slide-in-left { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html::view-transition-old(root), html::view-transition-new(root) { animation: none !important; }
}