styles.css

/*
 * Hide flag icons in language switcher
 */

/* Hide flag image in the language button (CDN flags) */
img[src*="cloudfront.net/flags"] {
  display: none !important;
}

/* Hide colored circle indicator in the language button */
button[aria-haspopup="menu"] > div:first-child {
  display: none !important;
}

/* Hide colored circle indicators in dropdown menu items */
[role="menuitem"] > div:first-child {
  display: none !important;
}

/*
 * Fix box-drawing character alignment in code blocks.
 *
 * JetBrains Mono (Mintlify default) renders box-drawing chars (─│┌┐└┘)
 * wider than ASCII, causing ~2px misalignment on wide diagrams.
 * Menlo renders them at equal width.
 */
pre code {
  font-family: Menlo, Monaco, "Courier New", monospace !important;
}

/*
 * CJK-aligned ASCII-art diagrams.
 *
 * Problem: In browser monospace fonts, CJK characters render at ~1.7× ASCII
 * width instead of the terminal-standard 2×. This breaks box-drawing alignment
 * in diagrams that mix Chinese text with ASCII borders (│┌┐└┘─).
 *
 * Solution: Use <pre class="cjk-diagram"> with each CJK char wrapped in
 * <b> tags. CSS forces each <b> to display:inline-block;width:2ch, which
 * locks every CJK character to exactly 2 monospace ASCII character widths.
 * Works with any monospace font on any OS/browser.
 */
pre.cjk-diagram {
  display: block !important; /* Override Mintlify's display:flex on <pre> */
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 24px;
  font-family: Menlo, Monaco, "Courier New", monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 16px 0;
  background: #f8f8f8;
  color: #1e1e1e;
}

.dark pre.cjk-diagram {
  background: #1e1e1e;
  color: #d4d4d4;
}

pre.cjk-diagram b {
  display: inline-block;
  width: 2ch;
  text-align: center;
  font-weight: normal;
}