/* Floating navigation: one moving surface, two disclosure panels. */
#nav {
  --nav-ink: var(--ink);
  --nav-muted: color-mix(in srgb, var(--nav-ink) 68%, transparent);
  --nav-glass: color-mix(in srgb, var(--surface) 82%, transparent);
  --nav-panel: color-mix(in srgb, var(--surface) 98%, transparent);
  --nav-line: color-mix(in srgb, var(--nav-ink) 16%, transparent);
  --nav-hover: color-mix(in srgb, var(--nav-ink) 11%, transparent);
  --nav-motion: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--nav-ink);
}
#nav .nav-inner {
  position: relative;
  width: min(100%, 1120px);
  max-width: none;
  min-height: 56px;
  margin-inline: auto;
  padding: 7px 9px 7px 17px;
  gap: 19px;
  border: 1px solid var(--nav-line);
  border-radius: 999px;
  background: var(--nav-glass);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-ink) 6%, transparent), 0 8px 24px -20px #0009;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  transition: background .3s ease, box-shadow .3s ease;
}
#nav.scrolled .nav-inner { background: var(--nav-panel); box-shadow: 0 10px 28px -20px #0009; }
#nav .brand { flex: 0 0 auto; gap: 9px; color: var(--nav-ink); font-family: var(--sans, var(--f-sans)); font-size: 16px; font-weight: 600; letter-spacing: -.04em; }
#nav .brand small { display: none; }
#nav .brand-mark { width: 28px; height: 28px; color: var(--nav-ink); background: transparent; box-shadow: none; border-radius: 0; font-size: 0; }
#nav .brand-mark::before { content: ""; display: block; width: 28px; height: 28px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h8v4H6v8h4v4H2zM14 4h8v16h-8v-4h4V8h-4zM10 10h4v4h-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
#nav .nav-menu { position: static; }
#nav .brand.wordmark { font-size: 25px; letter-spacing: -1.4px; gap: 7px; }
#nav .wordmark svg { width: 25px; height: 25px; }
#nav .nav-links { display: flex; align-items: center; gap: 3px; margin: 0; }
#nav :is(.nav-menu-trigger, .nav-links > a) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-ink);
  font: 500 13px/1.4 var(--sans, var(--f-sans));
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
#nav :is(.nav-menu-trigger:hover, .nav-menu-trigger[aria-expanded="true"], .nav-links > a:hover) { background: var(--nav-hover); }
#nav :is(.nav-links > a[aria-current="page"], .nav-menu-trigger[data-current])::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1px; background: var(--nav-muted);
}
#nav .nav-chevron { flex: 0 0 12px; opacity: .75; transition: transform .3s var(--nav-motion); }
#nav .nav-menu-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
#nav .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#nav .nav-actions .btn { min-height: 36px; padding: 8px 15px; border: 0; border-radius: 999px; background: var(--nav-ink); color: var(--surface); font-size: 13px; white-space: nowrap; box-shadow: 0 3px 8px #0001; }
#nav .nav-actions .btn:hover { background: color-mix(in srgb, var(--nav-ink) 90%, var(--surface)); transform: translateY(-1px); }
#nav :is(.theme-toggle, .status-trigger, .campaign-trigger, .nav-toggle) { flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--nav-ink); box-shadow: none; }
#nav :is(.theme-toggle, .status-trigger, .campaign-trigger, .nav-toggle):hover { background: var(--nav-hover); }
#nav .status-trigger-dot { width: 5px; height: 5px; flex: 0 0 5px; }
#nav .status-trigger svg { width: 17px; height: 17px; }
#nav .status-trigger-label { display: none; }
#nav .nav-toggle { display: none; }
#nav .nav-toggle span { width: 18px; background: var(--nav-ink); }
#nav .nav-links > a::after { transform: none; width: auto; }
#nav :is(.nav-links a, .nav-menu-trigger):hover { opacity: 1; }
#nav .nav-links > a { border-bottom: 0; text-decoration: none; }
#nav :focus-visible { outline: 2px solid var(--nav-ink); outline-offset: 3px; }

#nav .nav-dropdown-surface {
  position: absolute;
  top: calc(100% + 12px);
  left: var(--nav-panel-left, 0px);
  width: var(--nav-panel-width, 516px);
  height: var(--nav-panel-height, 230px);
  border-radius: 16px;
  background: var(--nav-panel);
  box-shadow: 0 0 0 .5px var(--nav-line), inset 0 1px 0 color-mix(in srgb, var(--nav-ink) 9%, transparent), 0 20px 44px -24px #0009;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top center;
  transition: opacity .35s var(--nav-motion), transform .35s var(--nav-motion), left .35s var(--nav-motion), width .35s var(--nav-motion), height .35s var(--nav-motion);
}
#nav[data-dropdown-open] .nav-dropdown-surface { opacity: 1; transform: translateY(0) scale(1); }
#nav .nav-dropdown-reveal, #nav .nav-dropdown-reveal > div { display: contents; }
#nav .nav-dropdown {
  position: absolute;
  z-index: 1;
  top: calc(100% + 12px);
  left: var(--nav-panel-left, 0px);
  padding: 8px;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .35s var(--nav-motion), transform .35s var(--nav-motion), visibility 0s .35s;
}
#nav .nav-dropdown::before { content: ""; position: absolute; top: -16px; right: 0; left: 0; height: 16px; }
#nav .nav-menu[data-open] .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
#nav .nav-developers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 616px; }
#nav .nav-platform { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8px; width: 516px; }
#nav .nav-platform-links { display: grid; gap: 4px; }
#nav .nav-dropdown a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-ink);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease;
}
#nav .nav-dropdown a:hover, #nav .nav-dropdown a:focus-visible { background: var(--nav-hover); }
#nav .nav-link-title { display: block; font-weight: 500; }
#nav .nav-link-description { display: block; font-weight: 400; color: var(--nav-muted); }
#nav .nav-dropdown .nav-feature { justify-content: flex-end; padding: 18px; border: 1px solid var(--nav-line); background: var(--nav-hover); }
#nav .nav-feature .nav-link-title { font-size: 17px; }
#nav .nav-feature-mark { margin-bottom: auto; padding-bottom: 24px; opacity: .75; }
#nav .nav-feature-mark svg { display: block; width: 25px; height: 25px; }
#nav .nav-feature:hover { background: color-mix(in srgb, var(--nav-ink) 17%, transparent); }
#nav:not([data-nav-ready]) .nav-menu:is(:hover, :focus-within) .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: var(--nav-panel); border-radius: 16px; }

@media (max-width: 1080px) and (min-width: 981px) {
  #nav .nav-inner { gap: 12px; }
  #nav :is(.nav-menu-trigger, .nav-links > a) { padding-inline: 9px; }
}
@media (max-width: 980px) {
  #nav { padding: 10px 16px 0; }
  #nav .nav-inner { min-height: 56px; gap: 10px; padding: 5px 7px 5px 14px; }
  #nav .nav-toggle { display: flex; }
  #nav .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 12px;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--nav-line);
    border-radius: 18px;
    background: var(--nav-panel);
    box-shadow: 0 20px 44px -24px #0009;
    backdrop-filter: blur(24px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top center;
    transition: opacity .3s var(--nav-motion), transform .3s var(--nav-motion), visibility 0s .3s;
  }
  body.nav-open #nav .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  #nav :is(.nav-menu-trigger, .nav-links > a) { justify-content: space-between; width: 100%; min-height: 44px; padding: 12px; font-size: 14px; }
  #nav .nav-dropdown-surface { display: none; }
  #nav .nav-dropdown-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--nav-motion); }
  #nav .nav-menu[data-open] .nav-dropdown-reveal { grid-template-rows: 1fr; }
  #nav .nav-dropdown-reveal > div { display: block; overflow: hidden; }
  #nav .nav-dropdown { display: grid; position: static; width: auto; margin: 0 4px 4px; padding: 4px; border-left: 1px solid var(--nav-line); border-radius: 0; transform: translateY(-5px); }
  #nav .nav-dropdown::before { content: none; }
  #nav .nav-developers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  #nav .nav-dropdown a { padding: 10px; font-size: 12px; }
  #nav .nav-dropdown .nav-feature { padding: 12px; }
  #nav .nav-feature .nav-link-title { font-size: 15px; }
  body.nav-open #nav .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open #nav .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open #nav .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  #nav:not([data-nav-ready]) .nav-inner { flex-wrap: wrap; border-radius: 20px; }
  #nav:not([data-nav-ready]) { position: relative; }
  #nav:not([data-nav-ready]) .nav-links { position: static; order: 3; flex-basis: 100%; opacity: 1; visibility: visible; pointer-events: auto; transform: none; max-height: none; }
  #nav:not([data-nav-ready]) .nav-toggle { display: none; }
  #nav:not([data-nav-ready]) .nav-dropdown-reveal { grid-template-rows: 1fr; }
  #nav:not([data-nav-ready]) .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}
@media (max-width: 480px) {
  #nav { padding-inline: 10px; }
  #nav .nav-inner { gap: 6px; padding-left: 11px; }
  #nav .brand.wordmark { gap: 5px; font-size: 23px; }
  #nav .wordmark svg { width: 23px; height: 23px; }
  #nav .brand-mark, #nav .brand-mark::before { width: 23px; height: 23px; }
  #nav .nav-actions { gap: 1px; }
  #nav .nav-actions .btn { max-width: none; padding-inline: 10px; font-size: 11px; }
  #nav :is(.theme-toggle, .status-trigger, .campaign-trigger, .nav-toggle) { width: 32px; min-width: 32px; }
}
@media (max-width: 359px) {
  #nav .brand.wordmark { gap: 4px; font-size: 20px; }
  #nav .wordmark svg { width: 20px; height: 20px; }
  #nav .nav-actions .btn { display: none; }
  #nav .brand-mark, #nav .brand-mark::before { width: 20px; height: 20px; }
  #nav .nav-inner { padding-inline: 7px; gap: 4px; }
  #nav .nav-actions .btn { padding-inline: 7px; font-size: 10px; }
  #nav .nav-developers { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #nav *, #nav *::before, #nav *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}