/* paper-reading blog — Ant Design skin (volcano primary, dual theme). Theme driven by , set by assets/theme.js (+ inline prepaint snippet in ). Spec: docs/superpowers/specs/2026-06-11-antd-restyle-design.md */ /* ===== §1 Design tokens ===== */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #f5f5f5; --bg-card: #ffffff; --text: rgba(0, 0, 0, 0.88); --text-secondary: rgba(0, 0, 0, 0.65); --text-tertiary: rgba(0, 0, 0, 0.45); --border: #d9d9d9; --rule: #f0f0f0; --accent: #d4380d; /* volcano-7: link/active text on light bg */ --accent-hover: #fa541c; /* volcano-6 */ --accent-soft: #fff2e8; /* volcano-1 */ --accent-border: #ffbb96; /* volcano-3 */ --info: #1677ff; --info-soft: #e6f4ff; --info-border: #91caff; --warn: #faad14; --warn-soft: #fffbe6; --warn-border: #ffe58f; --code-bg: #fafafa; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12); --ease: cubic-bezier(0.645, 0.045, 0.355, 1); --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace; } :root[data-theme="dark"] { color-scheme: dark; --bg: #141414; --bg-card: #1f1f1f; --text: rgba(255, 255, 255, 0.85); --text-secondary: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(255, 255, 255, 0.45); --border: #424242; --rule: #303030; --accent: #ff7a45; /* volcano-5: readable on dark */ --accent-hover: #ff9c6e; --accent-soft: #2b1611; --accent-border: #592716; --info: #3c9ae8; --info-soft: #111a2c; --info-border: #15395b; --warn: #d8bd14; --warn-soft: #2b2611; --warn-border: #594214; --code-bg: #141414; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.48), 0 3px 6px -4px rgba(0, 0, 0, 0.6); } /* ===== §1 Base ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :where(h1, h2, h3, h4)[id] { scroll-margin-top: 4.5rem; } body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.75; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } main { max-width: 780px; margin: 0 auto; padding: 2rem 1.6rem 5rem; } /* Detail pages only (papers/tutorials carry data-pagefind-body): white card. */ main[data-pagefind-body] { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-1); padding: 2.5rem 3rem 3rem; margin: 2rem auto 4rem; } a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--text); } h1 { font-size: 1.9rem; margin: 0 0 0.6rem; } h2 { font-size: 1.4rem; margin: 3rem 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } h3 { font-size: 1.12rem; margin: 2rem 0 0.7rem; } h4 { font-size: 1rem; margin: 1.4rem 0 0.5rem; } p { margin: 0.9rem 0; } ul, ol { padding-left: 1.4rem; } li { margin: 0.35rem 0; } strong { font-weight: 600; color: var(--text); } hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; } .page__intro { color: var(--text-secondary); margin-top: 0; } .back-link a, a.back-link { font-size: 0.9rem; color: var(--text-secondary); } .back-link a:hover, a.back-link:hover { color: var(--accent); } .empty { color: var(--text-tertiary); font-style: italic; } /* legacy .meta info box (early paper pages) */ .meta { font-size: 0.9rem; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.5rem 0 2.5rem; } .meta > div { padding: 0.15rem 0; } .meta strong { color: var(--text); } /* ===== §1 Figures ===== */ figure { margin: 2rem 0; padding: 0.9rem 0.9rem 0.4rem; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; } figure img { width: 100%; height: auto; display: block; border-radius: 4px; } /* keep paper figures legible in dark mode: figures are white-background PDFs */ :root[data-theme="dark"] figure img { background: #fff; } figcaption { font-size: 0.86rem; color: var(--text-secondary); text-align: center; margin: 0.7rem 0.4rem 0.3rem; line-height: 1.5; } /* ===== §1 Code ===== */ pre { background: var(--code-bg); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; margin: 0.6rem 0 1.4rem; } pre code { font-family: var(--mono); background: transparent; padding: 0; color: var(--text); } :not(pre) > code { background: var(--rule); color: var(--text); padding: 0.1em 0.4em; border-radius: 4px; font-family: var(--mono); font-size: 0.88em; } .code-source { font-family: var(--mono); font-size: 0.8rem; color: var(--text-secondary); margin: 1.5rem 0 0.2rem; } /* ===== §1 Tables ===== */ /* content tables only — §3 resets these for the hljs-ln line-number table inside 
 */
table {
  border-collapse: collapse;
  margin: 1.5rem 0;
  width: 100%;
  font-size: 0.92rem;
}
th, td {
  border-bottom: 1px solid var(--rule);
  padding: 0.65rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
th { font-weight: 600; color: var(--text); background: var(--bg); }
:root[data-theme="dark"] th { background: rgba(255, 255, 255, 0.04); }

blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.6rem 0;
  padding: 0.4rem 1.2rem;
  color: var(--text-secondary);
}

/* ===== §1 MathJax ===== */
mjx-container { font-size: 1.03em; }
/* !important required: MathJax's own mjx-container[jax][display] rule out-specifies us */
mjx-container[display="true"] { margin: 1.2rem 0 !important; }

.math-translation {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0.85rem 1.2rem;
  border-left: 2px solid var(--rule);
  padding-left: 0.7rem;
  font-style: italic;
}

/* ===== §1 In-article card grids (术语速查 / 全局路线图 / 研究启发) ===== */
/* Reusable blocks borrowed from the Krea-2 report layout. Used in paper/tutorial
   index.md as raw 
 with .card children.
   Theme-aware via CSS variables. */
.summary-grid,
.term-grid {
  display: grid;
  gap: 0.9rem;
  margin: 1.5rem 0;
}
.summary-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.term-grid    { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.summary-grid .card,
.term-grid .card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.summary-grid .card > :first-child,
.term-grid .card > :first-child { margin-top: 0; }
.summary-grid .card > :last-child,
.term-grid .card > :last-child { margin-bottom: 0; }
.summary-grid .card h3,
.term-grid .card h4 { font-size: 1rem; }
.summary-grid .card p,
.term-grid .card p { font-size: 0.9rem; color: var(--text-secondary); }

/* Callout box — for a core definition / positioning statement */
.callout {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

/* ===== §1 Footer ===== */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

/* ===== §1 Small screens ===== */
@media (max-width: 600px) {
  main { padding: 1rem 1rem 4rem; }
  main[data-pagefind-body] { padding: 1.4rem 1.2rem 2rem; margin: 1rem 0.6rem 2rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.25rem; }
}

/* ===== §1 Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ===== §2 Site nav ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 1.6rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--rule);
}
.site-nav::before,
.site-nav::after { content: ""; flex: 1 1 0; min-width: 0; }
.site-nav > .site-nav__brand { order: 1; margin-right: auto; }
.site-nav > .site-nav__links { order: 2; margin-left: auto; }
.site-nav::before { order: 0; max-width: calc((100% - 780px) / 2); }
.site-nav::after  { order: 3; max-width: calc((100% - 780px) / 2); }

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-nav__brand:hover { color: var(--accent); background: var(--accent-soft); }
.site-nav__home-icon { flex: 0 0 auto; display: block; }
.site-nav__brand-text { white-space: nowrap; }

.site-nav__links { display: flex; align-items: center; gap: 0.35rem; }

.site-nav__link {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--text); background: var(--rule); }
.site-nav__link.active { color: var(--accent); background: var(--accent-soft); }

.site-nav__search-btn,
.site-nav__theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-nav__search-btn:hover,
.site-nav__theme-btn:hover { color: var(--text); background: var(--rule); }

/* theme toggle shows the icon of the theme you'd switch TO */
:root[data-theme="light"] .theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }

/* ===== §2 Post cards (antd Card) ===== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  color: var(--text);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent-border);
}

/* stretched-link: title  covers the whole card; chips re-raise above it */
.post-card__title-link { color: inherit; }
.post-card__title-link::after { content: ""; position: absolute; inset: 0; }
.post-card__title-link:hover { color: var(--accent); }
.post-card__tags a { position: relative; z-index: 1; }
/* focus ring should trace the whole card, not just the title words */
.post-card__title-link:focus-visible { outline: none; }
.post-card__title-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.post-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.post-card__badge {
  display: inline-block;
  padding: 0 0.55rem;
  line-height: 1.7;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.post-card__badge--paper {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}
.post-card__badge--tutorial {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-border);
}
.post-card__badge--survey {
  background: var(--success-soft, rgba(82, 196, 26, 0.12));
  color: var(--success, #389e0d);
  border-color: var(--success-border, rgba(82, 196, 26, 0.3));
}
/* badge text needs AA on its soft bg in light mode; dark tokens already pass */
:root[data-theme="light"] .post-card__badge--paper,
:root:not([data-theme]) .post-card__badge--paper { color: #ad2102; }   /* volcano-8 */
:root[data-theme="light"] .post-card__badge--tutorial,
:root:not([data-theme]) .post-card__badge--tutorial { color: #0958d9; } /* blue-7 */
:root[data-theme="light"] .post-card__badge--survey,
:root:not([data-theme]) .post-card__badge--survey { color: #237804; }   /* green-8 */

.post-card__date {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.post-card__added { font-weight: 500; }
.post-card__paper-date { color: var(--text-tertiary); font-size: 0.9em; }
.post-card__extra { color: var(--text-tertiary); font-size: 0.9em; }

.post-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  border: none;
  padding: 0;
}

.post-card__tldr {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.2rem;
}

/* ===== §2 Tag chips (antd Tag) ===== */
.tag-chip {
  display: inline-block;
  padding: 0 0.55rem;
  line-height: 1.8;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.76rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.tag-chip:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.tag-chip--more {
  background: transparent;
  color: var(--text-tertiary);
  border-style: dashed;
  cursor: default;
}
.tag-chip--more:hover {
  color: var(--text-tertiary);
  border-color: var(--border);
  background: transparent;
}

/* ===== §2 Pagination (antd Pagination) ===== */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0 1rem;
}
.pager__item,
.pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.pager__item:hover,
.pager__nav:hover { color: var(--accent); background: var(--accent-soft); }
.pager__item--current {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
  background: var(--bg-card);
  cursor: default;
}
.pager__item--current:hover { background: var(--bg-card); }
.pager__item--disabled { color: var(--text-tertiary); cursor: default; opacity: 0.6; }
.pager__item--disabled:hover { color: var(--text-tertiary); background: transparent; }

/* ===== §2 Tag cloud (concepts.html) ===== */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: baseline;
  padding: 2rem 0;
}
.tag-cloud__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.2;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  /* font-size set inline by build.py */
}
.tag-cloud__item:hover { background: var(--accent-soft); color: var(--accent); }
.tag-cloud__count {
  font-size: 0.7em;
  color: var(--text-tertiary);
  margin-left: 0.2em;
  font-weight: 400;
  vertical-align: super;
}

/* ===== §2 Concept page ===== */
.page--concept .concept__body { margin: 1rem 0 2rem 0; }
.page--concept .concept__body h2 { font-size: 1.2rem; }
.page--concept .concept__aliases { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: 1rem; }
.page--concept .concept__aliases code { background: var(--rule); padding: 1px 4px; border-radius: 3px; }

/* ===== §2 Mobile ===== */
@media (max-width: 640px) {
  .site-nav { padding: 0 0.9rem; height: 48px; }
  .site-nav__brand-text { display: none; }
  .site-nav__links {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .site-nav__link { padding: 0.3rem 0.6rem; font-size: 0.86rem; }
  .post-grid { grid-template-columns: 1fr; gap: 1rem; }
  .post-card { padding: 0.9rem 1rem; }
}

/* ===== §3 Floating TOC (antd Anchor style) ===== */
.toc {
  position: fixed;
  top: 5rem;
  left: max(1.2rem, calc((100vw - 780px) / 2 - 260px));
  width: 230px;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 0.4rem 0;
  z-index: 50;
  scrollbar-width: thin;
}
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.toc-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 0.5rem 1rem;
}

.toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.toc li { margin: 0; }
.toc li.h3 { font-size: 0.78rem; }

.toc a {
  display: block;
  padding: 0.22rem 0.6rem 0.22rem 0.85rem;
  margin-left: -2px;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.toc li.h3 a { padding-left: 1.7rem; }
.toc li.h2 > a { font-weight: 500; color: var(--text); }
.toc a:hover { color: var(--accent); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }

/* hide below 1280px: the fixed TOC would overlap the white main card (230px TOC vs (vw-780)/2 left gap) */
@media (max-width: 1280px) { .toc { display: none; } }

/* ===== §3 Post meta block ===== */
.post-meta {
  display: block;
  margin: 0 0 1.6rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.post-meta__row { margin: 0.15rem 0; }
.post-meta__date strong { color: var(--text); }
.post-meta__paper-date { color: var(--text-tertiary); }
.post-meta__authors { color: var(--text-secondary); }
.post-meta__venue { color: var(--text-tertiary); font-style: italic; }
.post-meta__extra { color: var(--text-tertiary); font-size: 0.92em; }
.post-meta__links a.post-meta__link {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 0.55rem;
  line-height: 1.8;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.85em;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.post-meta__links a.post-meta__link:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.post-meta__concepts { margin-top: 0.4rem; }
.post-meta__concepts a.concept-chip {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0 0.55rem;
  line-height: 1.8;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.85em;
  transition: background 0.2s var(--ease);
}
.post-meta__concepts a.concept-chip:hover { background: var(--bg-card); }

/* ===== §3 highlight.js — github palette (light) ===== */
.hljs { color: #24292e; background: transparent; }
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag,
.hljs-template-variable, .hljs-type, .hljs-variable.language_ { color: #d73a49; }
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__,
.hljs-title.function_ { color: #6f42c1; }
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number,
.hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id,
.hljs-variable { color: #005cc5; }
.hljs-string, .hljs-meta .hljs-string, .hljs-regexp { color: #032f62; }
.hljs-built_in, .hljs-symbol { color: #e36209; }
.hljs-comment, .hljs-code, .hljs-formula { color: #6a737d; }
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: #22863a; }
.hljs-subst { color: #24292e; }
.hljs-section { color: #005cc5; font-weight: 700; }
.hljs-bullet { color: #735c0f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-addition { color: #22863a; background: #f0fff4; }
.hljs-deletion { color: #b31d28; background: #ffeef0; }

/* ===== §3 highlight.js — github-dark palette ===== */
:root[data-theme="dark"] .hljs { color: #c9d1d9; }
:root[data-theme="dark"] .hljs-doctag, :root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-meta .hljs-keyword,
:root[data-theme="dark"] .hljs-template-tag,
:root[data-theme="dark"] .hljs-template-variable,
:root[data-theme="dark"] .hljs-type,
:root[data-theme="dark"] .hljs-variable.language_ { color: #ff7b72; }
:root[data-theme="dark"] .hljs-title, :root[data-theme="dark"] .hljs-title.class_,
:root[data-theme="dark"] .hljs-title.class_.inherited__,
:root[data-theme="dark"] .hljs-title.function_ { color: #d2a8ff; }
:root[data-theme="dark"] .hljs-attr, :root[data-theme="dark"] .hljs-attribute,
:root[data-theme="dark"] .hljs-literal, :root[data-theme="dark"] .hljs-meta,
:root[data-theme="dark"] .hljs-number, :root[data-theme="dark"] .hljs-operator,
:root[data-theme="dark"] .hljs-selector-attr,
:root[data-theme="dark"] .hljs-selector-class,
:root[data-theme="dark"] .hljs-selector-id,
:root[data-theme="dark"] .hljs-variable { color: #79c0ff; }
:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-meta .hljs-string,
:root[data-theme="dark"] .hljs-regexp { color: #a5d6ff; }
:root[data-theme="dark"] .hljs-built_in,
:root[data-theme="dark"] .hljs-symbol { color: #ffa657; }
:root[data-theme="dark"] .hljs-comment, :root[data-theme="dark"] .hljs-code,
:root[data-theme="dark"] .hljs-formula { color: #8b949e; }
:root[data-theme="dark"] .hljs-name, :root[data-theme="dark"] .hljs-quote,
:root[data-theme="dark"] .hljs-selector-tag,
:root[data-theme="dark"] .hljs-selector-pseudo { color: #7ee787; }
:root[data-theme="dark"] .hljs-subst { color: #c9d1d9; }
:root[data-theme="dark"] .hljs-section { color: #388bfd; font-weight: 700; } /* #1f6feb fails AA on #141414 */
:root[data-theme="dark"] .hljs-bullet { color: #f2cc60; }
:root[data-theme="dark"] .hljs-addition { color: #aff5b4; background: #033a16; }
:root[data-theme="dark"] .hljs-deletion { color: #ffdcd7; background: #67060c; }

/* ===== §3 Code line numbers (highlightjs-line-numbers.js) ===== */
/* the plugin wraps code in a  — neutralise our global
   table styles inside 
 and style the number gutter */
table.hljs-ln { border-collapse: collapse; margin: 0; width: auto; font-size: inherit; }
table.hljs-ln td { border: none; padding: 0; vertical-align: top; }
/* must out-specify the td reset above (0,2,2 > 0,1,2), or the gutter loses its border/padding */
table.hljs-ln td.hljs-ln-numbers {
  user-select: none;
  -webkit-user-select: none;
  text-align: right;
  color: var(--text-tertiary);
  border-right: 1px solid var(--border);
  padding-right: 0.7em;
  white-space: nowrap;
}
table.hljs-ln td.hljs-ln-code { padding-left: 0.9em; }

/* ===== §3 Comments (Giscus) ===== */
.comments {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.comments h2 { font-size: 1.3rem; margin-bottom: 0.4rem; border: none; padding: 0; }
.comments__note { color: var(--text-tertiary); font-size: 0.9rem; margin: 0 0 1.2rem 0; }
.comments__note a { color: var(--accent); }
.giscus, .giscus-frame { min-height: 200px; }

/* ===== §3 Lightbox ===== */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lightbox-overlay.open { opacity: 1; }
.lightbox-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 4px;
  cursor: zoom-out;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
  background: #fff;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.12); }

/* ===== §3 Search modal (antd Modal) + Pagefind UI theme vars ===== */
.search-modal { position: fixed; inset: 0; z-index: 1000; }
.search-modal[hidden] { display: none; }
.search-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.search-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 8vh auto 8vh;
  max-height: 84vh;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 0.75rem 1.5rem 1rem;
  box-shadow: var(--shadow-2);
  /* Pagefind UI custom props — keep the widget on-theme */
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--bg-card);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--rule);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 6px;
  --pagefind-ui-font: var(--sans);
}
.search-modal__close {
  position: sticky; top: 0; z-index: 2;
  align-self: flex-end;
  margin: 0 -0.5rem 0.25rem 0;
  padding: 0 0.25rem;
  background: var(--bg-card); border: none;
  font-size: 1.25rem; line-height: 1.4;
  color: var(--text-tertiary); cursor: pointer;
}
.search-modal__close:hover { color: var(--text); }
body.search-open { overflow: hidden; }

/* =====================================================================
   §4 writing-tutorial contract components — antd palette.
   Mirror of .claude/skills/writing-tutorial/templates/style-additions.css;
   keep the two in sync (Task 8 backfills the template).
   ===================================================================== */

.tutorial-page .badge.tutorial-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.tutorial-page .lede {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.6rem 0 2rem;
}

/* weak-discovery warning (antd Alert warning) */
.provenance-warning {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.65;
}
.provenance-warning .warn-title {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 0.4rem;
  display: block;
}

/* spiral-step rails — antd palette: blue/green/purple/gold/volcano */
.spiral-step {
  margin: 1.4rem 0 0.4rem;
  padding-left: 0.9rem;
  border-left: 3px solid transparent;
}
.spiral-step-1 { border-left-color: #1677ff; }   /* 直觉 · daybreak blue */
.spiral-step-2 { border-left-color: #52c41a; }   /* demo · polar green */
.spiral-step-3 { border-left-color: #722ed1; }   /* 正式化 · golden purple */
.spiral-step-4 { border-left-color: #faad14; }   /* 代码 · gold */
.spiral-step-5 { border-left-color: #fa541c; }   /* 洞察 · volcano */
.spiral-step h3 { margin-top: 0.6rem; }

/* teaching-demo code block — dashed green frame */
pre:has(code.teaching-demo) { border: 1px dashed #52c41a; }
.code-source.teaching-demo-note { font-style: italic; color: #389e0d; } /* green-7: AA on white */
:root[data-theme="dark"] .code-source.teaching-demo-note { color: #52c41a; }

/* insights bullets */
ul.insights { list-style: none; padding: 0; margin: 0.6rem 0; }
ul.insights li {
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  line-height: 1.65;
}
ul.insights li::before {
  content: "▸";
  position: absolute;
  left: 0.2rem;
  color: var(--accent);
  font-weight: 700;
}

.hand-off {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* references */
.references {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}
.references h3 { font-size: 1rem; margin-top: 1.6rem; }
ol.ref-list { padding-left: 1.5rem; margin: 0.4rem 0; line-height: 1.7; }
ol.ref-list li { margin: 0.25rem 0; font-size: 0.92rem; }