/* Viršutinė juosta kaip VitePress puslapiuose, kad aprašas neatrodytų kaip
   kita svetainė. Scalar jos aukštį žino iš `--scalar-custom-header-height`. */
:root {
  --topbar-height: 56px;
  --scalar-custom-header-height: var(--topbar-height);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
}

body.dark-mode {
  background: #0f0f0f;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-height);
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e2e3;
  background: #ffffff;
  color: #3c3c43;
}

body.dark-mode .topbar {
  border-bottom-color: #2d2d2d;
  background: #0f0f0f;
  color: #dfdfd6;
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

.brand {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.wordmark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1b1b1f;
}

body.dark-mode .wordmark {
  color: #fffff5;
}

.dot {
  color: #9f5dfa;
}

.product {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #e2e2e3;
  font-size: 14px;
  font-weight: 500;
}

body.dark-mode .product {
  border-left-color: #2d2d2d;
}

.topbar nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
}

.topbar nav a:hover,
.topbar nav a[aria-current='page'] {
  color: #7c3aed;
}

body.dark-mode .topbar nav a:hover,
body.dark-mode .topbar nav a[aria-current='page'] {
  color: #a78bfa;
}

@media (max-width: 640px) {
  .topbar {
    padding: 0 16px;
  }

  .product {
    display: none;
  }

  .topbar nav {
    gap: 14px;
  }
}