@layer existing {
/* ============================================================
   讲次笔记页 — 与 design.css 同一套视觉语言
   · 阅读面优先：正文 720px 栏宽、1.8 行高、克制的分隔
   · 黄色高亮块 / 旋转标签 / 虚线框 / 等宽标签 全部退场
   · 公式块改为面板底色 + 发丝描边，让公式本身成为主体
   ============================================================ */

body.nb-page {
  background: var(--bg) ;
  color: var(--fg) ;
  font-family: var(--font-sans) ;
  margin: 0;
}

/* ---------- 顶栏 ---------- */
.nb-topbar {
  background: var(--nav-bg) ;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ln-hair) ;
  padding: 11px max(20px, env(safe-area-inset-left)) ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 9000);
}
.nb-topbar a {
  color: var(--accent) ;
  text-decoration: none;
  font-family: var(--font-sans) ;
  font-size: var(--fs-xs) ;
  font-weight: var(--fw-medium) ;
  letter-spacing: 0 ;
}
.nb-topbar a:hover { color: var(--accent-hover) ; text-decoration: none ; }

.nb-crumb {
  font-family: var(--font-sans) ;
  font-size: var(--fs-xs) ;
  font-weight: var(--fw-regular);
  letter-spacing: 0 ;
  color: var(--muted) ;
}

/* ---------- 文章容器：正文栏宽 720px ---------- */
.nb-wrap {
  max-width: 720px ;
  margin: 0 auto;
  padding: 56px 22px 110px ;
}

/* 讲次标签：从黄色旋转色块改为克制的眉标 */
.nb-lecttag {
  display: inline-block;
  font-family: var(--font-sans) ;
  font-size: var(--fs-eyebrow) ;
  font-weight: var(--fw-semi) ;
  letter-spacing: var(--ls-eyebrow) ;
  background: none ;
  color: var(--accent) ;
  padding: 0 ;
  transform: none ;
  margin-bottom: 16px ;
}

.nb-title {
  font-family: var(--font-display) ;
  font-size: clamp(30px, 4.6vw, 46px) ;
  font-weight: var(--fw-semi) ;
  line-height: 1.12 ;
  letter-spacing: -0.026em ;
  margin: 0 0 20px ;
  color: var(--fg) ;
}

/* 元信息：粗黄左条 → 细强调线 */
.nb-meta {
  font-size: var(--fs-sm) ;
  line-height: 1.8 ;
  color: var(--muted) ;
  border-left: 2px solid var(--accent) ;
  padding: 2px 0 2px 16px ;
  margin: 0 0 40px ;
  background: none ;
}
.nb-meta b { color: var(--fg-2) ; font-weight: var(--fw-semi); }

.nb-body { margin-top: 0 ; }

/* ---------- 正文层级 ----------
   笔记正文实际使用 h5 作为小节标题（历史约定），h3/h4 也保留同样的语义，
   因此把 h3 与 h5 归为一级、h4 与 h6 归为二级，避免出现无样式的裸标题。 */
.nb-body h3,
.nb-body h5 {
  font-family: var(--font-display) ;
  font-size: var(--fs-h3) ;
  font-weight: var(--fw-semi) ;
  line-height: 1.3 ;
  letter-spacing: -0.018em ;
  color: var(--fg) ;
  margin: 56px 0 18px ;
  padding: 0 0 14px ;
  border-left: none ;
  border-bottom: 1px solid var(--ln-hair) ;
}
.nb-body h4,
.nb-body h6 {
  font-size: var(--fs-h4) ;
  font-weight: var(--fw-semi) ;
  letter-spacing: -0.012em ;
  color: var(--fg) ;
  margin: 34px 0 12px ;
  padding: 0 ;
  border: none ;
}
.nb-body p, .nb-body li {
  font-size: var(--fs-body) ;
  line-height: 1.85 ;
  color: var(--fg-2) ;
  margin: 14px 0 ;
  letter-spacing: 0;
}
.nb-body ul, .nb-body ol { padding-left: 22px ; margin: 14px 0 ; gap: 8px; }
.nb-body li::marker { color: var(--muted-2); }
.nb-body b, .nb-body strong { color: var(--fg) ; font-weight: var(--fw-semi); }
.nb-body a { color: var(--accent) ; }

/* ---------- 公式 ---------- */
.nb-body .katex { font-size: 1.1em ; color: var(--fg) ; }
.nb-body .katex-display {
  margin: 22px 0 ;
  padding: 20px 18px ;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface) ;
  border: 1px solid var(--ln-hair) ;
  border-radius: var(--r-md) ;
}

/* 公式速览块的标签与内部节奏 */
.nb-body .fml-head {
  font-family: var(--font-sans) ;
  font-size: var(--fs-eyebrow) ;
  font-weight: var(--fw-semi) ;
  letter-spacing: var(--ls-eyebrow) ;
  color: var(--accent) ;
  margin: 0 0 20px ;
}
.nb-body .fml { margin: 0 0 12px ; }
.nb-body .fml > p { margin: 0 0 6px ; }
.nb-body .fml > p:last-child { margin-bottom: 0 ; }
.nb-body .fml-sep {
  border: none ;
  border-top: 1px solid var(--ln-hair) ;
  margin: 40px 0 32px ;
}

/* ---------- 信息盒 ---------- */
.nb-box {
  background: var(--surface) ;
  border: 1px solid var(--ln-hair) ;
  border-radius: var(--r-md) ;
  padding: 20px 22px ;
  margin: 22px 0 ;
}
.nb-box .bt {
  font-family: var(--font-sans) ;
  font-size: var(--fs-eyebrow) ;
  font-weight: var(--fw-semi) ;
  letter-spacing: var(--ls-eyebrow) ;
  color: var(--muted) ;
  margin-bottom: 10px ;
}

/* 提示盒：虚线黄框 → 蓝色调面板 */
.nb-tip {
  background: var(--accent-soft) ;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent) ;
  border-radius: var(--r-md) ;
  padding: 20px 22px ;
  margin: 22px 0 ;
}
.nb-tip .bt {
  color: var(--accent) ;
  font-weight: var(--fw-semi) ;
  font-size: var(--fs-eyebrow) ;
  letter-spacing: var(--ls-eyebrow) ;
  margin-bottom: 8px ;
  font-family: var(--font-sans) ;
}
.nb-tip p, .nb-tip li { font-size: var(--fs-sm) ; color: var(--fg-2) ; }

/* ---------- 上/下一篇 ---------- */
.nb-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 72px ;
  padding-top: 28px ;
  border-top: 1px solid var(--ln-hair) ;
  flex-wrap: wrap;
}
.nb-nav a {
  color: var(--fg-2) ;
  text-decoration: none ;
  font-size: var(--fs-xs) ;
  font-weight: var(--fw-medium);
  border: 1px solid var(--ln-hair) ;
  background: var(--surface) ;
  padding: 10px 18px ;
  border-radius: var(--r-pill) ;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.nb-nav a:hover {
  border-color: var(--ln-strong) ;
  color: var(--fg) ;
  background: var(--surface-2) ;
}

/* ---------- 表格 / 引用 ---------- */
.nb-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 22px 0;
}
.nb-body th {
  text-align: left;
  font-size: var(--fs-xs) ;
  font-weight: var(--fw-semi);
  color: var(--muted) ;
  padding: 0 12px 11px ;
  border-bottom: 1px solid var(--ln-hair) ;
}
.nb-body td {
  padding: 13px 12px ;
  border-bottom: 1px solid var(--ln-hair) ;
  color: var(--fg-2) ;
}
.nb-body blockquote {
  margin: 22px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--ln-strong);
  color: var(--muted);
}
.nb-body hr {
  border: none;
  border-top: 1px solid var(--ln-hair);
  margin: 44px 0;
}
.nb-body img { border-radius: var(--r-md); display: block; margin: 22px auto; }
.nb-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--ln-hair);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--fg-2);
}

/* ---------- 围栏代码块 ---------- */
.nb-body pre.nb-code {
  position: relative;
  margin: 22px 0;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--ln-hair);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.nb-body pre.nb-code code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.68;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--fg-2);
  white-space: pre;
  tab-size: 4;
}
/* 语言标签：写在 data-lang 上，不参与文本选择 */
.nb-body pre.nb-code[data-lang] { padding-top: 34px; }
.nb-body pre.nb-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  user-select: none;
}
html[data-theme="dark"] .nb-body pre.nb-code {
  background: color-mix(in srgb, var(--surface) 70%, #000 30%);
}

@media (max-width: 640px) {
  .nb-wrap { padding: 40px 16px 84px ; }
  .nb-body p, .nb-body li { font-size: 16px ; }
}

}