/* This shell is shared by React routes and server-rendered pages. */
linxi-site-nav {
  position: fixed;
  top: calc(20px + var(--site-navigation-offset, 0px));
  left: 50%;
  z-index: 100;
  display: block;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  view-transition-name: site-navigation;
  border-radius: 999px;
  /* Blur the page at the transition host, before its isolated contents. */
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  color: #edf5fa;
  transition: color .45s ease, backdrop-filter .45s ease;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
linxi-site-nav[data-theme="light"] {
  color: #17171a;
  -webkit-backdrop-filter: blur(13px) saturate(155%) brightness(1.015);
  backdrop-filter: blur(13px) saturate(155%) brightness(1.015);
}
/* Keep the navigation visually continuous when changing documents. */
::view-transition-group(site-navigation) { animation-duration: .18s; z-index: 100; }
::view-transition-old(site-navigation) { animation: none; opacity: 0; }
::view-transition-new(site-navigation) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}