:root {
  --md-primary-fg-color: #0f766e;
  --md-primary-fg-color--light: #14988f;
  --md-accent-fg-color: #d97706;
}

.md-typeset .hero {
  padding: 1.5rem;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(13, 148, 136, 0.14), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #f0fdfa 45%, #fffbeb 100%);
}

.md-typeset .hero h1 {
  margin-top: 0;
}

.md-typeset .endpoint-card {
  padding: 1rem;
  border-left: 4px solid #0f766e;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.05);
}

.md-typeset .env-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.md-typeset .env-grid > div {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  background: #fff;
}