.nav,
.wf-page .nav {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  width: min(1240px, calc(100% - 36px)) !important;
  max-width: calc(100vw - 20px) !important;
  height: 74px;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 28px;
  transform: translateX(-50%);
  overflow: visible;
  background: color-mix(in srgb, var(--bg) 42%, transparent) !important;
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  backdrop-filter: blur(30px) saturate(175%);
  box-shadow: 0 14px 42px #00000012, inset 0 1px 0 #ffffff0c !important;
  transition: top .36s cubic-bezier(.2, .75, .25, 1), width .36s cubic-bezier(.2, .75, .25, 1), height .32s ease, background .3s ease, box-shadow .3s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
  isolation: isolate;
}

.nav::before,
.wf-page .nav::before {
  content: none !important;
  display: none !important;
}

.nav .container.nav-inner,
.wf-page .nav .container.nav-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center !important;
  justify-content: initial !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  min-height: 0 !important;
  min-width: 0;
  padding-inline: clamp(18px, 2.3vw, 30px) !important;
  gap: clamp(10px, 1.4vw, 22px) !important;
  box-sizing: border-box;
}

.nav .brand,
.wf-page .nav .brand {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  flex-shrink: 0;
  transform: none !important;
}

.nav .brand:hover,
.wf-page .nav .brand:hover {
  transform: none !important;
}

.nav .brand-name {
  white-space: nowrap;
}

.nav .nav-links,
.wf-page .nav .nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.15vw, 19px) !important;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(11px, .95vw, 13px);
}

.nav .nav-links a,
.wf-page .nav .nav-links a {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 10px clamp(8px, .85vw, 12px) !important;
  margin: 0;
  border: 0 !important;
  border-radius: 999px;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
  line-height: 1.15;
  white-space: nowrap;
  transform: none !important;
  transition: color .24s ease, background-color .28s ease, opacity .24s ease;
}

.nav .nav-links a::before,
.wf-page .nav .nav-links a::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  z-index: -1;
  border: 0 !important;
  border-radius: inherit;
  background: color-mix(in srgb, #9b7bff 13%, transparent) !important;
  box-shadow: none !important;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .26s ease, transform .3s cubic-bezier(.2, .75, .25, 1), background-color .26s ease;
  pointer-events: none;
}

.nav .nav-links a::after,
.wf-page .nav .nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 4px;
  width: 0;
  height: 2px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #a58aff, #70c5ff);
  box-shadow: 0 0 10px #9b7bff44;
  opacity: 0;
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.2, .75, .25, 1), opacity .2s ease;
}

.nav .nav-links a:hover,
.nav .nav-links a:focus-visible,
.nav .nav-links a.active,
.nav .nav-links a[aria-current="page"],
.wf-page .nav .nav-links a:hover,
.wf-page .nav .nav-links a:focus-visible,
.wf-page .nav .nav-links a.active,
.wf-page .nav .nav-links a[aria-current="page"] {
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  transform: none !important;
}

.nav .nav-links a:hover::before,
.nav .nav-links a:focus-visible::before,
.nav .nav-links a.active::before,
.nav .nav-links a[aria-current="page"]::before {
  opacity: 1;
  transform: scale(1);
}

.nav .nav-links a:hover::after,
.nav .nav-links a:focus-visible::after,
.nav .nav-links a.active::after,
.nav .nav-links a[aria-current="page"]::after {
  width: 20px;
  opacity: .82;
}

.nav .nav-actions,
.wf-page .nav .nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.nav .btn,
.nav .theme-toggle,
.nav .menu-toggle {
  transform: none !important;
}

.nav .btn:hover,
.nav .theme-toggle:hover,
.nav .menu-toggle:hover {
  transform: none !important;
}

.nav .btn {
  transition: box-shadow .25s ease, filter .25s ease, background-color .25s ease !important;
}

.nav .btn:hover {
  box-shadow: 0 8px 24px #8e6cff20, inset 0 1px 0 #ffffff3b;
  filter: brightness(1.04);
}

.nav .theme-toggle,
.nav .menu-toggle {
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease !important;
}

.nav .theme-toggle:hover,
.nav .menu-toggle:hover {
  box-shadow: 0 5px 18px #8e6cff1c, inset 0 1px 0 #ffffff20;
}

.nav.nav-scrolled,
.wf-page .nav.nav-scrolled {
  top: 9px !important;
  width: min(1160px, calc(100% - 44px)) !important;
  height: 68px;
  background: color-mix(in srgb, var(--bg) 34%, transparent) !important;
  border: 0 !important;
  box-shadow: 0 16px 44px #00000018, inset 0 1px 0 #ffffff0c !important;
  transform: translateX(-50%);
}

.nav.nav-hidden,
.wf-page .nav.nav-hidden {
  transform: translate(-50%, calc(-100% - 26px));
}

html[data-theme="light"] .nav,
html[data-theme="light"] .wf-page .nav {
  background: color-mix(in srgb, #fff 45%, transparent) !important;
  box-shadow: 0 14px 40px #29213c0d, inset 0 1px 0 #ffffff6b !important;
}

html[data-theme="light"] .nav.nav-scrolled,
html[data-theme="light"] .wf-page .nav.nav-scrolled {
  background: color-mix(in srgb, #fff 38%, transparent) !important;
}

.mobile-menu,
.wf-page .mobile-menu {
  border: 0 !important;
  border-radius: 26px !important;
  outline: 0 !important;
}

.mobile-menu a,
.wf-page .mobile-menu a {
  border: 0 !important;
  outline-offset: 3px;
  border-radius: 17px;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a[aria-current="page"],
.wf-page .mobile-menu a:hover,
.wf-page .mobile-menu a:focus-visible,
.wf-page .mobile-menu a[aria-current="page"] {
  border: 0 !important;
  background: color-mix(in srgb, #9270ff 12%, transparent) !important;
  transform: none;
}

@media (max-width: 1040px) and (min-width: 941px) {
  .nav .container.nav-inner {
    padding-inline: 16px !important;
    gap: 8px !important;
  }

  .nav .nav-links {
    gap: 4px !important;
    font-size: 11px;
  }

  .nav .nav-links a {
    padding-inline: 7px !important;
  }

  .nav .brand {
    font-size: 16px;
  }

  .nav .brand-logo {
    width: 28px;
    height: 28px;
  }

  .nav .btn {
    padding-inline: 12px;
    font-size: 11px;
  }
}

@media (max-width: 940px) {

  .nav,
  .wf-page .nav {
    top: 10px !important;
    width: calc(100% - 28px) !important;
    height: 66px;
    border-radius: 23px;
  }

  .nav.nav-scrolled,
  .wf-page .nav.nav-scrolled {
    top: 7px !important;
    width: calc(100% - 34px) !important;
    height: 62px;
  }

  .nav .container.nav-inner,
  .wf-page .nav .container.nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    padding-inline: 15px !important;
    gap: 10px !important;
  }

  .nav .nav-links,
  .wf-page .nav .nav-links,
  .nav .nav-actions>.btn {
    display: none !important;
  }

  .nav .nav-actions,
  .wf-page .nav .nav-actions {
    margin-left: auto;
    display: flex;
  }

  .nav .menu-toggle {
    display: grid !important;
  }

  .mobile-menu,
  .wf-page .mobile-menu {
    top: 85px;
    left: 50%;
    right: auto;
    width: calc(100% - 28px);
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
  }

  .nav.nav-scrolled+.mobile-menu {
    top: 79px;
  }
}

@media (max-width: 420px) {

  .nav,
  .wf-page .nav {
    width: calc(100% - 18px) !important;
    height: 62px;
    border-radius: 21px;
  }

  .nav .container.nav-inner,
  .wf-page .nav .container.nav-inner {
    padding-inline: 11px !important;
  }

  .nav .brand {
    gap: 6px;
    font-size: 15px;
  }

  .nav .brand-logo {
    width: 26px;
    height: 26px;
  }

  .nav .theme-toggle,
  .nav .menu-toggle {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }

  .mobile-menu,
  .wf-page .mobile-menu {
    top: 79px;
    width: calc(100% - 18px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav,
  .nav *,
  .mobile-menu,
  .mobile-menu * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .nav.nav-hidden,
  .wf-page .nav.nav-hidden {
    transform: translateX(-50%);
  }
}