.callout {
  --callout-bg: var(--callout-note-bg, #f0f4f8);
  --callout-accent: var(--callout-note-accent, #4a90e2);
  background: var(--callout-bg);
  border-left: 4px solid var(--callout-accent);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.callout-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--callout-accent);
}

.callout-body > :first-child {
  margin-top: 0;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.callout-note      { --callout-bg: #e8f0fe; --callout-accent: #4a90e2; }
.callout-abstract,
.callout-summary,
.callout-tldr      { --callout-bg: #e0f7fa; --callout-accent: #26a69a; }
.callout-info,
.callout-todo      { --callout-bg: #e3f2fd; --callout-accent: #2196f3; }
.callout-tip,
.callout-hint,
.callout-important { --callout-bg: #fff8e1; --callout-accent: #ffa726; }
.callout-success,
.callout-check,
.callout-done      { --callout-bg: #e8f5e9; --callout-accent: #43a047; }
.callout-question,
.callout-help,
.callout-faq       { --callout-bg: #f3e5f5; --callout-accent: #8e24aa; }
.callout-warning,
.callout-caution,
.callout-attention { --callout-bg: #fff3e0; --callout-accent: #fb8c00; }
.callout-failure,
.callout-fail,
.callout-missing   { --callout-bg: #ffebee; --callout-accent: #e53935; }
.callout-danger,
.callout-error     { --callout-bg: #ffebee; --callout-accent: #c62828; }
.callout-bug       { --callout-bg: #fce4ec; --callout-accent: #d81b60; }
.callout-example   { --callout-bg: #f3e5f5; --callout-accent: #7b1fa2; }
.callout-quote,
.callout-cite      { --callout-bg: #f5f5f5; --callout-accent: #757575; }