:root {
  --md-primary-fg-color: #06b6d4;
  --md-primary-fg-color--light: #22d3ee;
  --md-primary-fg-color--dark: #0e7490;
  --md-accent-fg-color: #22d3ee;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0e14;
  --md-code-bg-color: #0d1219;
}

.md-header {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.15) 0%, transparent 100%),
              var(--md-default-bg-color);
  backdrop-filter: blur(10px);
}

.md-tabs {
  background-color: rgba(6, 182, 212, 0.06);
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-radius: 0.6rem;
  border: 1px solid rgba(6, 182, 212, 0.2);
  transition: border-color 0.2s, transform 0.2s;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: rgba(6, 182, 212, 0.6);
  transform: translateY(-2px);
}

.md-typeset code {
  border-radius: 0.3rem;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(6, 182, 212, 0.1);
  color: #67e8f9;
}