/* Keep the desktop chrome in the same coordinate system at every UI scale. */
@media (min-width:901px) {
  html.desktop-app:not(.account-embedded) body:not(.account-page) .app-shell {
    position:relative;
  }
  html.desktop-app:not(.account-embedded) body:not(.account-page) .app-shell > .app-sidebar {
    position:absolute;
    top:0;
    height:100%;
    min-height:0;
    view-transition-name:blyp-sidebar;
  }
  html.desktop-app:not(.account-embedded) body:not(.account-page) .app-shell > .app-main {
    height:100%;
    min-height:0;
  }
  html.desktop-app:not(.account-embedded) body:not(.account-page) .app-topbar {
    view-transition-name:blyp-topbar;
  }
  html.desktop-app:not(.account-embedded) .desktop-titlebar {
    view-transition-name:blyp-titlebar;
  }
}

/* Never slide, resize or crossfade the navigation chrome between documents. */
html.desktop-app::view-transition-group(blyp-sidebar),
html.desktop-app::view-transition-group(blyp-topbar),
html.desktop-app::view-transition-group(blyp-titlebar),
html.desktop-app::view-transition-group(root) {
  animation:none;
}
html.desktop-app::view-transition-old(blyp-sidebar),
html.desktop-app::view-transition-old(blyp-topbar),
html.desktop-app::view-transition-old(blyp-titlebar) {
  animation:none;
  opacity:1;
  mix-blend-mode:normal;
}
html.desktop-app::view-transition-new(blyp-sidebar),
html.desktop-app::view-transition-new(blyp-topbar),
html.desktop-app::view-transition-new(blyp-titlebar) {
  animation:blyp-page-in 0ms linear 60ms both;
  mix-blend-mode:normal;
}
/* An opaque old frame stays underneath the new one. Fading both frames with
   plus-lighter exposed the blue wallpaper as a full-window flash. */
html.desktop-app::view-transition-image-pair(root) { isolation:isolate; background:var(--bg); }
html.desktop-app::view-transition-old(root) { animation:none; opacity:1; mix-blend-mode:normal; }
html.desktop-app::view-transition-new(root) { animation:blyp-page-in 80ms ease-out 60ms both; mix-blend-mode:normal; }
@keyframes blyp-page-in { from { opacity:0; } to { opacity:1; } }
html.desktop-app:not(.account-embedded) body:not(.account-page) .anim { animation:none; }
@media (prefers-reduced-motion:reduce) {
  html.desktop-app::view-transition-new(blyp-sidebar),
  html.desktop-app::view-transition-new(blyp-topbar),
  html.desktop-app::view-transition-new(blyp-titlebar),
  html.desktop-app::view-transition-old(root),
  html.desktop-app::view-transition-new(root) { animation:none; }
}