/* Japanese-friendly typography */
:root {
  --content-max-width: 820px;
}

.content {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.75;
}

.content h1, .content h2, .content h3, .content h4, .content h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

/* Callout/box styles to replace tcolorbox */
.content blockquote.note,
.content blockquote.def,
.content blockquote.key,
.content blockquote.warn,
.content blockquote.tip {
  border-left: 4px solid #3a86ff;
  background: rgba(58, 134, 255, 0.06);
  padding: 0.8em 1em;
  margin: 1em 0;
  border-radius: 4px;
}

.content blockquote.def {
  border-left-color: #2a9d8f;
  background: rgba(42, 157, 143, 0.06);
}

.content blockquote.key {
  border-left-color: #e76f51;
  background: rgba(231, 111, 81, 0.07);
}

.content blockquote.warn {
  border-left-color: #f4a261;
  background: rgba(244, 162, 97, 0.08);
}

.content blockquote.tip {
  border-left-color: #8338ec;
  background: rgba(131, 56, 236, 0.06);
}

/* Generic blockquote styling for callout-like content */
.content blockquote {
  border-left: 4px solid #888;
  background: rgba(127, 127, 127, 0.06);
  padding: 0.6em 1em;
  margin: 1em 0;
}

/* Tables */
.content table {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}
.content table th,
.content table td {
  border: 1px solid #ccc;
  padding: 0.5em 0.8em;
}
.content table th {
  background: rgba(127, 127, 127, 0.1);
  font-weight: 600;
}

/* Figure captions */
.content figure {
  margin: 1.5em 0;
  text-align: center;
}
.content figure img {
  max-width: 100%;
  height: auto;
}
.content figure figcaption {
  font-size: 0.92em;
  color: #666;
  margin-top: 0.5em;
}

/* Constrain image sizes — source PNGs are very large (some over 10000px wide).
   Block layout, centered, capped width so figures don't overwhelm the text column. */
.content p > img,
.content img {
  display: block;
  max-width: min(100%, 640px);
  height: auto;
  margin: 1em auto;
}

/* Image captions (italic single-line paragraphs immediately after an image) */
.content p > img + em,
.content p img + em {
  display: block;
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

/* Constrain mermaid diagrams as well */
.mermaid {
  text-align: center;
  margin: 1.5em auto;
  max-width: 800px;
}
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Citation links */
.content a.cite {
  text-decoration: none;
  font-size: 0.9em;
  color: #3a86ff;
}
.content a.cite::before { content: "["; }
.content a.cite::after { content: "]"; }

/* Inline code in zh/ja */
.content code {
  font-family: "Menlo", "Consolas", "Liberation Mono", monospace;
}

/* (Mermaid styling above) */