:root {
  --md-primary-fg-color: #3157a4;
  --md-primary-fg-color--light: #3b82f6;
  --md-primary-fg-color--dark: #1e3a8a;
  --md-accent-fg-color: #22d3ee;
}

body {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.md-header {
  background: linear-gradient(90deg, #07111f 0%, #102449 56%, #32135c 100%);
}

.md-tabs {
  background: #0b1730;
}

.vibe-hero {
  text-align: center;
  margin: 0 0 2rem;
}

.vibe-hero img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 18px 55px rgba(37, 99, 235, 0.18);
}

.vibe-tagline {
  max-width: 54rem;
  margin: 0 auto 1.5rem;
  font-size: 1.16rem;
  color: var(--md-default-fg-color--light);
}

.vibe-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.vibe-actions .md-button {
  min-width: 10rem;
}

.vibe-screenshot {
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18);
}

.vibe-small {
  color: var(--md-default-fg-color--light);
  font-size: 0.88rem;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0c111b;
  --md-default-fg-color: #eff6ff;
  --md-code-bg-color: #080d15;
}

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

.md-typeset h2 {
  font-weight: 700;
}

.md-typeset .grid.cards > ul > li {
  border-color: rgba(59, 130, 246, 0.28);
}