.header-navigation {
  display: flex;
  overflow: hidden;
  border: 1px solid #ffffff42;
  border-radius: 999px;
  background: #0404049e;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.header-navigation button {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f2;
  cursor: pointer;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.92rem;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.header-navigation button + button {
  border-left: 1px solid #ffffff29;
}

.header-navigation button:hover,
.header-navigation button:focus-visible {
  background: #f4f4f2;
  color: #030303;
  outline: none;
}

.header-navigation button:disabled {
  opacity: 0.24;
  cursor: default;
}

.header-navigation button:disabled:hover,
.header-navigation button:disabled:focus-visible {
  background: transparent;
  color: #f4f4f2;
}

.loader-mark {
  letter-spacing: 0.16em;
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  white-space: nowrap;
}

.loader-track {
  width: 8.8rem;
}

.portal-entering .header-navigation,
.portal-open .header-navigation,
.portal-switching .header-navigation,
.portal-leaving .header-navigation {
  pointer-events: none;
}

@media (max-width: 760px) {
  .header-navigation button {
    width: 2.45rem;
    height: 2.45rem;
  }
}