:root {
  --capstone-bg: #f2f3f5;
  --capstone-panel: #ffffff;
  --capstone-ink: #20242a;
  --capstone-muted: #606a76;
  --capstone-border: #ccd1d7;
  --capstone-border-light: #e4e7ea;
  --capstone-blue: #195ea8;
  --capstone-blue-bg: #edf5ff;
  --capstone-night: #252a31;
  --capstone-sans: "Segoe UI", Aptos, system-ui, sans-serif;
  --capstone-mono: "Cascadia Mono", Consolas, monospace;
}

.capstone-nav {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.45rem max(1rem, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: var(--capstone-night);
  color: #f2f4f6;
  font-family: var(--capstone-sans);
}

.capstone-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.capstone-brand strong {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.capstone-brand span {
  color: #b5bdc6;
  font-family: var(--capstone-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capstone-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.capstone-nav-links a {
  padding: 0.36rem 0.55rem;
  border: 1px solid transparent;
  color: #c8ced5;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.capstone-nav-links a:hover,
.capstone-nav-links a:focus-visible {
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
  color: white;
}

.capstone-nav-links a[aria-current="page"] {
  border-color: rgba(220, 236, 255, 0.35);
  background: rgba(25, 94, 168, 0.26);
  color: #dcecff;
}

.capstone-nav--floating {
  position: absolute;
  right: auto;
  bottom: 16px;
  left: 16px;
  min-height: 0;
  width: auto;
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: rgba(37, 42, 49, 0.94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.capstone-nav--floating .capstone-brand {
  padding-inline: 0.45rem;
}

@media (max-width: 680px) {
  .capstone-nav {
    gap: 0.5rem;
  }

  .capstone-brand span,
  .capstone-nav-links .nav-secondary {
    display: none;
  }

  .capstone-nav-links a {
    padding-inline: 0.42rem;
  }

  .capstone-nav--floating {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}