/* The same glass/purple primary header is rendered on the homepage and subpages. */
#site-nav {
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
  height: auto;
  min-height: 68px;
  padding: 16px max(24px, calc((100vw - 1280px) / 2));
  margin: 0;
  background: rgba(4,6,15,.9);
  border-bottom: 1px solid rgba(100,140,255,.18);
  backdrop-filter: blur(20px) saturate(180%);
  color: #e2e8f8;
  font: 500 13px/1.5 'Inter', sans-serif;
}
#site-nav .site-brand { color: #e2e8f8; font: 700 16px/1.5 'Orbitron', sans-serif; white-space: nowrap; }
#site-nav .site-symbol { color: #b4a3ff; font: 28px/1 sans-serif; vertical-align: middle; }
#site-nav .site-number { color: #b4a3ff; }
#site-nav .site-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
#site-nav a { color: #b0bbd4; text-decoration: none; padding: 4px 0; }
#site-nav a:hover { color: #e2e8f8; }
#site-nav a:focus-visible { outline: 2px solid #00d4ff; outline-offset: 4px; border-radius: 2px; }
#site-nav .site-github { border: 1px solid rgba(123,97,255,.45); border-radius: 8px; padding: 6px 12px; color: #d5ccff; }
@media (max-width: 600px) {
  #site-nav { padding: 12px 16px; gap: 8px; }
  #site-nav .site-links { width: 100%; gap: 6px 16px; }
}
.docs-content { min-width: 0; }
@media (max-width: 700px) {
  .docs-layout { flex-direction: column; }
  .docs-layout .docs-sidebar { width: 100% !important; min-height: 0 !important; }
  .docs-layout .docs-content { padding: 24px 16px !important; max-width: 100%; }
}