@media screen and (prefers-reduced-motion: no-preference){
  html.theme-switching::view-transition-old(root){animation:none;z-index:1}
  html.theme-switching::view-transition-new(root){animation:theme-reveal .48s cubic-bezier(.2,.72,.2,1) both;z-index:2}
  html.theme-switching #themeIcon.ti{animation:theme-icon-turn .48s cubic-bezier(.2,.72,.2,1)}
  html.theme-switching.theme-liquid::view-transition-new(root){clip-path:var(--theme-drop);animation:theme-drop-hold .9s linear}
  html.theme-switching.theme-liquid::view-transition-old(root){animation:theme-drop-settle .9s cubic-bezier(.22,1,.36,1)}
  html.theme-color-fallback :is(body,.top-bar,.sidebar,.card,.modal,.btn,button,input,select,textarea){
    transition:background-color .38s ease,color .38s ease,border-color .38s ease,box-shadow .38s ease!important;
  }
  @keyframes theme-reveal{
    from{clip-path:circle(0 at var(--theme-reveal-x) var(--theme-reveal-y))}
    to{clip-path:circle(var(--theme-reveal-radius) at var(--theme-reveal-x) var(--theme-reveal-y))}
  }
  @keyframes theme-icon-turn{
    from{transform:rotate(-70deg) scale(.72);opacity:.45}
    to{transform:rotate(0) scale(1);opacity:1}
  }
  @keyframes theme-drop-hold{
    to{opacity:1}
  }
  @keyframes theme-drop-settle{
    to{transform:scale(.97);filter:blur(2px) brightness(.9)}
  }
}