@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --neon-primary: #8b5cf6;
  --neon-secondary: #d946ef;
  --neon-accent: #06b6d4;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a12;
  --md-default-bg-color--light: #12121f;
  --md-default-bg-color--lighter: #1a1a2e;
  --md-default-fg-color: #f0f0f5;
  --md-default-fg-color--light: #c7c9d3;
  --md-default-fg-color--lighter: #9ca3af;
  --md-primary-fg-color: var(--neon-primary);
  --md-primary-fg-color--light: #a78bfa;
  --md-primary-fg-color--dark: #7c3aed;
  --md-accent-fg-color: var(--neon-accent);
  --md-typeset-a-color: var(--neon-accent);
  --md-code-bg-color: rgba(0, 0, 0, 0.45);
  --md-code-fg-color: #8be9fd;
}

.md-header {
  background: rgba(10, 10, 18, 0.92);
  border-bottom: 1px solid rgba(139, 92, 246, 0.25);
  backdrop-filter: blur(12px);
}

.md-tabs {
  background: rgba(10, 10, 18, 0.88);
  border-bottom: 1px solid rgba(217, 70, 239, 0.2);
}

.md-main {
  background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 40%),
              radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.08), transparent 40%),
              #0a0a12;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: #ffffff;
}

.md-typeset h1 {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.md-typeset a:hover {
  color: var(--neon-secondary);
}

.md-typeset code {
  color: #7dd3fc;
}

.md-typeset pre > code {
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.5rem;
}

.md-typeset .admonition,
.md-typeset details {
  border-color: rgba(139, 92, 246, 0.4);
  background-color: rgba(18, 18, 31, 0.72);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(139, 92, 246, 0.15);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--neon-accent);
}

.md-search__form {
  background-color: rgba(26, 26, 46, 0.9);
}

.md-typeset .mermaid {
  padding: 0.5rem;
}

.md-typeset .mermaid svg {
  width: 100%;
  height: auto;
  min-height: 38rem;
}