.article .highlight-box,
.article .warning-box,
.article .info-box {
  margin: 20px 0;
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
  background: rgba(51, 214, 255, .07);
  color: #c7d7e6;
}

.article .warning-box {
  border-left-color: var(--amber);
  background: rgba(184, 221, 255, .07);
}

.article .info-box {
  border-left-color: var(--mint);
  background: rgba(124, 199, 255, .07);
}

.article .highlight-box p,
.article .warning-box p,
.article .info-box p,
.article .highlight-box li,
.article .warning-box li,
.article .info-box li { color: inherit; }

.article .diagram {
  margin: 1.8em 0;
  padding: 20px;
  overflow-x: auto;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  background: rgba(5, 8, 18, .58);
  color: #c7d7e6;
  text-align: center;
}

.article .diagram-title {
  margin-bottom: 15px;
  color: var(--cyan);
  font-size: 1.05em;
  font-weight: 700;
}

.article .diagram-content,
.article .bayer-matrix {
  display: inline-block;
  max-width: 100%;
  padding: 15px;
  overflow-x: auto;
  border: 1px solid rgba(125, 211, 252, .16);
  border-radius: 6px;
  background: rgba(16, 24, 39, .82);
  color: #d9e8f5;
  font-family: "Noto Sans Mono CJK SC", "Droid Sans Fallback", "Courier New", monospace;
  line-height: 1.5;
  text-align: left;
  white-space: pre;
}

.article .bayer-grid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.article .bayer-col { text-align: left; }
.article .bayer-col-title { margin-bottom: 8px; color: var(--mint); font-weight: 700; }
.article .bayer-matrix { padding: 10px 12px; }

.article .formula {
  margin: 15px 0;
  padding: 15px;
  border: 1px solid rgba(125, 211, 252, .16);
  border-radius: 6px;
  background: rgba(51, 214, 255, .07);
  color: #d9e8f5;
  font-family: "Times New Roman", serif;
  font-style: italic;
  text-align: center;
}

.article .section-divider {
  margin: 40px 0;
  border-top: 1px solid var(--line);
}

.article .reference {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9em;
}

.article .bnr-result { margin: 1.8em 0; text-align: center; }
.article .bnr-result img { border: 1px solid rgba(125, 211, 252, .2); border-radius: 6px; }
.article .bnr-result p { margin-top: 10px; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
  .article .diagram { padding: 12px; }
  .article .diagram-content { font-size: .78rem; }
}