:root {
  --sa-accent: #5eead4;
  --sa-ink: #102a43;
}

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

.markdown-section {
  max-width: 920px;
  line-height: 1.68;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
  color: var(--sa-ink);
  letter-spacing: -0.02em;
}

.markdown-section blockquote {
  border-left-color: var(--sa-accent);
}

.markdown-section table {
  display: table;
  width: 100%;
}

/* Mermaid renders in the browser so diagrams stay sharp at every zoom level. */
.markdown-section .mermaid {
  margin: 1.5rem 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid #dbe3ec;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #0f172a;
}

.markdown-section .mermaid svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .markdown-section .mermaid {
    padding: 0.6rem;
  }
}