:root {
  --waymark-purple: #6366f1;
  --waymark-purple-dark: #4f46e5;
  --waymark-purple-soft: rgba(99, 102, 241, 0.12);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--waymark-purple);
  --md-primary-fg-color--light: #818cf8;
  --md-primary-fg-color--dark: var(--waymark-purple-dark);
  --md-accent-fg-color: var(--waymark-purple);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--waymark-purple);
  --md-primary-fg-color--light: #818cf8;
  --md-primary-fg-color--dark: #312e81;
  --md-accent-fg-color: #a5b4fc;
}

.md-typeset .grid.cards.waymark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
}

.md-typeset .grid.cards.waymark-grid > div {
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 0.8rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
  box-shadow: 0 0.2rem 0.8rem rgba(15, 23, 42, 0.05);
}

.md-typeset .admonition.waymark,
.md-typeset details.waymark {
  border-color: var(--waymark-purple);
}

.md-typeset .waymark > .admonition-title,
.md-typeset .waymark > summary {
  background-color: var(--waymark-purple-soft);
}

.md-typeset .waymark code {
  color: var(--waymark-purple-dark);
}

.md-typeset pre > code {
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

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

.md-typeset .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.md-typeset .hero-actions .md-button {
  margin: 0;
}