@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap");

/* VANTA Robotics Blackbook - Super dark, minimal, orbital aesthetic */
html {
  color-scheme: dark;
  background-color: #060708;
}

body,
body[data-theme="light"],
body[data-theme="dark"],
body[data-theme="auto"] {
  --font-stack: "IBM Plex Sans", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-stack--headings: "Space Grotesk", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-stack--monospace: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --bb-bg: #060708;
  --bb-bg-2: #0a0c0f;
  --bb-surface: #0c0f12;
  --bb-surface-2: #101418;
  --bb-line: rgba(255, 255, 255, 0.06);
  --bb-line-strong: rgba(255, 255, 255, 0.1);
  --bb-text: #d6d9dd;
  --bb-text-muted: #9aa2ab;
  --bb-text-dim: #7e8792;
  --bb-accent: #b7c4ff;

  --color-foreground-primary: var(--bb-text);
  --color-foreground-secondary: var(--bb-text-muted);
  --color-foreground-muted: var(--bb-text-dim);
  --color-foreground-border: var(--bb-line);
  --color-background-primary: var(--bb-bg);
  --color-background-secondary: var(--bb-surface);
  --color-background-hover: var(--bb-surface-2);
  --color-background-hover--transparent: rgba(16, 20, 24, 0);
  --color-background-border: var(--bb-line);
  --color-background-item: rgba(255, 255, 255, 0.08);
  --color-card-border: var(--bb-line);
  --color-card-background: var(--bb-surface);
  --color-card-marginals-background: var(--bb-surface-2);
  --color-header-background: transparent;
  --color-header-border: var(--bb-line);
  --color-header-text: var(--bb-text);
  --color-sidebar-background: rgba(9, 11, 14, 0.9);
  --color-sidebar-background-border: var(--bb-line);
  --color-sidebar-brand-text: var(--bb-text);
  --color-sidebar-caption-text: var(--bb-text-dim);
  --color-sidebar-link-text: var(--bb-text-muted);
  --color-sidebar-link-text--top-level: var(--bb-accent);
  --color-sidebar-search-text: var(--bb-text);
  --color-sidebar-search-background: rgba(12, 16, 20, 0.6);
  --color-sidebar-search-background--focus: rgba(14, 18, 22, 0.9);
  --color-sidebar-search-border: var(--bb-line);
  --color-sidebar-search-icon: var(--bb-text-dim);
  --color-toc-background: transparent;
  --color-toc-title-text: var(--bb-text-dim);
  --color-toc-item-text: var(--bb-text-muted);
  --color-toc-item-text--hover: var(--bb-text);
  --color-toc-item-text--active: var(--bb-accent);
  --color-content-foreground: var(--bb-text);
  --color-content-background: transparent;
  --color-link: var(--bb-accent);
  --color-link-underline: rgba(255, 255, 255, 0.12);
  --color-link--hover: #e1e6ff;
  --color-link-underline--hover: rgba(255, 255, 255, 0.24);
  --color-link--visited: #9aa3c4;
  --color-link-underline--visited: rgba(255, 255, 255, 0.1);
  --color-highlight-on-target: rgba(255, 255, 255, 0.06);
  --color-inline-code-background: rgba(255, 255, 255, 0.06);

  background-color: var(--bb-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120vmax 80vmax at 15% 5%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 32%, transparent 60%),
    radial-gradient(70vmax 70vmax at 100% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
    repeating-radial-gradient(circle at 68% 48%, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 18px);
  opacity: 0.65;
  filter: blur(0.2px);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 60%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(closest-side at 20% 80%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 65%);
  opacity: 0.6;
}

.page,
.main,
.content,
.sidebar-drawer,
.toc-drawer,
.sidebar-container,
.toc-container,
header,
.mobile-header {
  position: relative;
  z-index: 1;
  background: transparent;
}

.mobile-header,
header {
  backdrop-filter: blur(6px);
}

.sidebar-drawer {
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.95) 0%, rgba(7, 9, 11, 0.8) 100%);
  border-right: 1px solid var(--bb-line);
}

.toc-drawer {
  border-left: 1px solid var(--bb-line);
  background: linear-gradient(180deg, rgba(8, 10, 13, 0.7) 0%, rgba(6, 8, 10, 0.6) 100%);
}

.content {
  padding-top: 2.5rem;
}

article[role="main"] {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.2rem, 2.5vw, 3rem);
}

h2 {
  font-size: clamp(1.6rem, 2vw, 2.2rem);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-stack--monospace);
}

pre,
div[class^="highlight-"],
div[class*=" highlight-"] {
  background: rgba(9, 12, 16, 0.85);
  border: 1px solid var(--bb-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

p,
li {
  line-height: 1.7;
}

blockquote {
  background: rgba(10, 12, 15, 0.8);
  border-left: 2px solid var(--bb-line-strong);
}

.sidebar-search-container {
  border-radius: 10px;
  border: 1px solid var(--bb-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.sidebar-search {
  border: none;
  color: var(--bb-text);
}

.sidebar-tree .reference,
.toc-tree a.reference {
  border-radius: 8px;
}

.sidebar-tree .reference:hover,
.toc-tree a.reference:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-tree .current > .reference {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.toc-tree {
  border-left: 1px solid var(--bb-line);
}

table.docutils {
  background: rgba(9, 12, 16, 0.9);
  border: 1px solid var(--bb-line);
}

table.docutils th {
  background: rgba(13, 16, 20, 0.9);
}

hr.docutils {
  background-color: var(--bb-line);
}

footer,
.bottom-of-page {
  border-top: 1px solid var(--bb-line);
}

@media (max-width: 67em) {
  .content {
    padding: 1.5rem 1.5rem 2rem;
  }
}