/* 站点样式（docsify 阅读页）
   沿用 tao-te-ching 的阅读排版：手机端行宽、字体与封面留白；
   去掉星图相关样式，另加「卦画」一行。 */

/* 标题下的卦画：䷀ 与「乾下乾上」，小一号、居中、淡化 */
.markdown-section .hexagram {
  text-align: center;
  font-size: 1.9em;
  line-height: 1.15;
  letter-spacing: .1em;
  margin: .1em 0 1.1em;
  color: var(--strong-color, #555);
}
.markdown-section .hexagram span {
  display: block;
  margin-top: .25em;
  font-size: .42em;
  letter-spacing: .16em;
  color: #8a8a8a;
}

/* 原文逐爻成段，段距略松，便于对照 */
.markdown-section h2 + p { margin-top: .6em; }

/* ===== 手机阅读 ===== */
@media (max-width: 780px) {
  /* docsify 默认 max-width: calc(100% - 90px)，手机上一行只剩 300px，太窄 */
  .markdown-section {
    max-width: calc(100% - 32px); margin: 0 16px;
    padding: 6px 0 84px; font-size: 15.5px; line-height: 1.9;
  }
  .markdown-section h1 { font-size: 1.5em; line-height: 1.35; }
  .markdown-section h2 { font-size: 1.24em; }
  .markdown-section h3 { font-size: 1.08em; }
  /* 表格、代码块横向滚动，不撑破版面 */
  .markdown-section table { display: block; overflow-x: auto; font-size: 13px; }
  .markdown-section pre { font-size: 12.5px; }
  .app-nav { padding-inline: 12px; }
  .app-nav > ul { gap: 0 .45em; font-size: 14px; }
}

/* 手机窄屏：封面左右各留 20px */
@media (max-width: 640px) {
  .cover-main { margin-inline: 20px; }
  .cover h1 { font-size: 2.1rem; line-height: 1.25; }
}

/* 深色模式：封面盖一层深色，避免浅色渐变上的浅灰字对比不足 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cover:before {
    background: rgba(7, 11, 22, .8);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
:root[data-theme="dark"] .cover:before {
  background: rgba(7, 11, 22, .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ===== 顶部导航：宇宙卦象 CTA =====
   站点招牌入口，做成实心胶囊；其余导航保持普通文字。 */
.app-nav a.nav-universe {
  display: inline-flex; align-items: center; gap: .42em;
  padding: .32em .9em; border-radius: 999px;
  color: #eef5ff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #2a5bd7 0%, #0b85d7 55%, #6a5cd8 100%);
  border: 1px solid rgba(150, 190, 255, .55);
  box-shadow: 0 3px 16px -5px rgba(42, 91, 215, .85), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.app-nav a.nav-universe:hover {
  color: #fff; text-decoration: none; transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 24px -6px rgba(52, 121, 235, .95), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.app-nav a.nav-universe:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 2px; }
.nav-universe-icon { width: 14px; height: 14px; display: block; flex: none; }
.nav-universe-icon path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 780px) {
  .app-nav a.nav-universe { padding: .26em .68em; gap: .32em; }
  .nav-universe-icon { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav a.nav-universe { transition: none; }
  .app-nav a.nav-universe:hover { transform: none; }
}