/*
 * atelier-zero × warm-editorial — embodied AI paper reading station
 * 视觉源：~/intern-journal/explorations/open-design/design-systems/atelier-zero/DESIGN.md
 *         ~/intern-journal/explorations/open-design/design-systems/warm-editorial/DESIGN.md
 */

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500;1,700&family=JetBrains+Mono:wght@400;500&display=swap");

/* embodied-ai · Jason DS layer 2 override：暖米 Playfair coral 保留 */
:root {
  --jx-paper: #efe7d2;
  --jx-surface: #f5ecd8;
  --jx-surface-sunk: #e0d6c0;
  --jx-ink: #15140f;
  --jx-ink-2: #2d2a23;
  --jx-ink-muted: #6f685a;
  --jx-rule: rgba(21,20,15,0.10);
  --jx-rule-strong: rgba(21,20,15,0.32);
  --jx-accent: #ed6f5c;  /* coral 期刊调，satellite 局部品牌色 */
  --jx-accent-hub: #2240d6;  /* 回 hub 仍墨蓝 */
  --jx-font-display: "Playfair Display", "Source Serif 4", "Songti SC", Georgia, serif;
}

:root {
  /* === atelier-zero 色板 === */
  --paper: #efe7d2;
  --paper-warm: #ece4cf;
  --paper-dark: #ddd2b6;
  --bone: #f7f1de;
  --ink: #15140f;
  --ink-soft: #2a2620;
  --ink-mute: #5a5448;
  --ink-faint: #8b8676;
  --coral: #ed6f5c;
  --coral-soft: #f08e7c;       /* solid 文本色 (不透明) */
  --coral-tint: rgba(237, 111, 92, 0.22); /* 半透明背景 */
  --mustard: #e9b94a;
  --olive: #6e7448;

  /* === fonts === */
  --font-sans: "Inter", -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-display: "Inter", "Inter Tight", -apple-system, sans-serif;
  --font-serif: "Playfair Display", "Source Han Serif SC", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* === scale === */
  --measure: 68ch;
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* 锚点跳转避开顶部 masthead */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.62;
  font-feature-settings: "ss01", "cv11", "kern";
  letter-spacing: 0.005em;
  position: relative;
  min-height: 100vh;
}

/* === paper noise overlay === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(106, 92, 56, 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(106, 92, 56, 0.04), transparent 60%);
  mix-blend-mode: multiply;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1001;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* === layout === */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) var(--gutter);
}

/* === masthead === */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.5rem var(--gutter) 1.25rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.masthead .star { color: var(--mustard); margin-right: 0.45em; }

.masthead a {
  color: var(--ink);
  text-decoration: none;
}

.masthead nav { display: flex; gap: 1.25rem; }

.masthead nav a:hover { color: var(--coral); }

/* === typography === */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}

h1 em, .display-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 2.4rem 0 1rem;
}

h3 {
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 0.6rem;
}

p {
  max-width: var(--measure);
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--coral);
  text-decoration-color: var(--coral);
}

strong { font-weight: 700; color: var(--ink); }

em { font-style: italic; font-family: var(--font-serif); font-weight: 500; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bone);
  padding: 0.1em 0.4em;
  border: 1px solid var(--paper-dark);
  border-radius: 2px;
}

pre {
  font-family: var(--font-mono);
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 1.2rem 0;
  max-width: 100%;
}

pre code { background: none; border: none; padding: 0; }

blockquote {
  border-left: 2px solid var(--coral);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 1.4rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

ul, ol {
  max-width: var(--measure);
  margin: 0 0 1.2rem 1.4rem;
  color: var(--ink-soft);
}

li { margin-bottom: 0.4rem; }

hr {
  border: none;
  border-top: 1px solid var(--ink);
  margin: 2.5rem 0;
}

/* === atelier roman numeral === */
.roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
  font-size: 0.9em;
  letter-spacing: 0.04em;
}

/* === eyebrow === */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: inline-block;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 0.2rem;
}

/* === plate / figure === */
figure {
  margin: 2.2rem 0;
  max-width: 100%;
}

figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
}

figcaption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 0.5rem;
  padding-left: 0.2rem;
}

figcaption .plate {
  color: var(--coral);
  font-weight: 500;
  margin-right: 0.6em;
}

/* === paper card grid (index) === */
.papers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}

.paper-card {
  border: 1px solid var(--ink);
  background: var(--bone);
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.paper-card:hover {
  background: var(--paper-warm);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 -1px var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .paper-card:hover { transform: none; box-shadow: none; }
}

.paper-card .num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.paper-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}

.paper-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.paper-card h3 a:hover { color: var(--coral); }

.paper-card .topic {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.paper-card .difficulty { color: var(--coral); font-size: 0.85rem; }

.paper-card .status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.paper-card .status.stub { color: var(--coral); }

.paper-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

/* === topic row === */
.topic-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 3rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink);
}

.topic-row .topic-roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
  font-size: 1.4rem;
}

.topic-row h2 {
  margin: 0;
  font-size: 1.4rem;
}

.topic-row .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* === note page === */
.note-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 6rem;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 1rem 0 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-dark);
}

.note-meta .label { color: var(--ink-mute); margin-right: 0.4em; }

.note-meta .difficulty { color: var(--coral); }

.note-content h2 {
  font-size: 1.5rem;
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px dotted var(--ink-faint);
}

.note-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1rem;
}

.note-content img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--paper-dark);
}

/* === footer === */
footer {
  border-top: 1px solid var(--ink);
  padding: 2rem var(--gutter);
  margin-top: 4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}

footer .fin { color: var(--coral); font-family: var(--font-serif); font-style: italic; text-transform: lowercase; letter-spacing: 0; }

/* === responsive === */
@media (max-width: 600px) {
  html { font-size: 16px; }
  .masthead { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
  .masthead nav { gap: 1rem; }
}

/* === print === */
@media print {
  body::before, body::after { display: none; }
  .masthead, footer { display: none; }
}

/* hub-satellite return link — 不改主体设计 */
.return-to-hub {
  font-family: var(--font-mono, "JetBrains Mono", Menlo, monospace);
  font-size: 0.875rem;
  color: var(--ink-mute, #5a5448);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin-right: 0.75rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.return-to-hub:hover {
  color: var(--coral, #ed6f5c);
  border-bottom-color: var(--coral, #ed6f5c);
}
.mast-divider {
  color: var(--ink-faint, rgba(0,0,0,0.2));
  margin: 0 0.5rem;
}

/* === editorial polish (借鉴 The New Yorker / Aeon · Psyche / Offscreen) === */

/* Drop cap — 每篇笔记正文第一段首字母 */
.note-content > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 0.85;
  float: left;
  margin: 0.18em 0.12em 0 -0.04em;
  color: var(--coral);
}

@media (max-width: 640px) {
  .note-content > p:first-of-type::first-letter {
    font-size: 3rem;
    margin: 0.12em 0.08em 0 0;
  }
}

/* Asterism ornament — 替代实线 hr，节奏更轻 */
.note-content hr,
hr.ornament {
  border: none;
  margin: 2.6rem auto;
  text-align: center;
  height: auto;
  overflow: visible;
}

.note-content hr::before,
hr.ornament::before {
  content: "✦  ✦  ✦";
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: var(--mustard);
  display: inline-block;
}

/* End mark — 文章结尾的小方块（New Yorker ◼） */
.endmark {
  text-align: center;
  margin: 3rem 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--mustard);
  letter-spacing: 0.5em;
  line-height: 1;
}

/* Dek — 副标题，h1 后独占一段 */
.dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 32ch;
  margin: 0.6rem 0 1.2rem;
  letter-spacing: -0.005em;
}

/* Reading meta — 阅读时长 + 字数 */
.reading-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.8rem 0 1.4rem;
}

.reading-meta .dot {
  margin: 0 0.6em;
  color: var(--paper-dark);
}

/* Difficulty / must-read 徽章 — 用在 paper card */
.badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18em 0.55em;
  border: 1px solid currentColor;
  border-radius: 2px;
  display: inline-block;
}

.badge.diff-easy { color: var(--olive); }
.badge.diff-medium { color: var(--mustard); }
.badge.diff-hard { color: var(--coral); }

.badge.must-read {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}

/* Era 行 — 主题分组的演进顺序提示 */
.era-hint {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.95rem;
  margin: 0.5rem 0 1.5rem;
  padding-left: 0.2rem;
}

/* Learn 上下页导航 */
.learn-pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.learn-pager a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.2em;
}

.learn-pager a:hover {
  color: var(--coral);
  border-color: var(--coral);
}

.learn-pager .step-info {
  color: var(--ink-faint);
}

/* 移动端阅读体验 */
@media (max-width: 640px) {
  html { font-size: 16px; }
  body { line-height: 1.7; }
  .note-content { max-width: 100%; }
  .note-content p { line-height: 1.75; }
}

/* ============================================================
   长远改进 — Pagefind 搜索 / Outline / KaTeX / 缩略图 / Issue
   ============================================================ */

/* === Search trigger button === */
.search-trigger {
  background: none;
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.15s, color 0.15s;
}
.search-trigger:hover { border-color: var(--coral); color: var(--coral); }
.search-trigger .search-icon { font-size: 1.05em; line-height: 1; }
.search-trigger .search-hint {
  font-size: 0.7rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  border-radius: 2px;
  padding: 0 0.35em;
  color: var(--ink-faint);
}

/* === Search dialog === */
.search-dialog {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0;
  max-width: 720px;
  width: 92%;
  max-height: 80vh;
  margin-top: 8vh;
  position: relative;
}
.search-dialog::backdrop { background: rgba(21, 20, 15, 0.55); }
.search-close-form {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
}
.search-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--ink-mute);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  line-height: 1;
}
.search-close:hover { color: var(--coral); }
.search-container { padding: 1.5rem 2rem 2rem; }

/* Pagefind UI 主题色覆盖 */
:root {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--coral);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--paper-dark);
  --pagefind-ui-tag: var(--paper-warm);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 2px;
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-image-box-ratio: 4 / 3;
  --pagefind-ui-font: var(--font-sans);
}
.pagefind-ui__search-input {
  font-family: var(--font-serif) !important;
  font-style: italic;
}
.pagefind-ui__result-title {
  font-family: var(--font-display) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.pagefind-ui__result-link { color: var(--ink) !important; text-decoration: none; }
.pagefind-ui__result-link:hover { color: var(--coral) !important; }
mark { background: var(--mustard); color: var(--ink); padding: 0 0.1em; }
html.dark-theme mark { background: var(--coral); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) mark { background: var(--coral); color: var(--paper); }
}

/* === Outline 右栏 === */
.note-shell.has-outline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 3rem;
  max-width: 1100px;
}
.note-shell.has-outline .note-main { min-width: 0; grid-column: 1; grid-row: 1; }
.note-shell.has-outline .outline { grid-column: 2; grid-row: 1; }
.outline {
  position: sticky;
  top: 2rem;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-left: 1px solid var(--paper-dark);
  padding-left: 1rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.outline-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.outline ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.outline li { margin: 0.4rem 0; line-height: 1.4; }
.outline a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.15s, padding-left 0.15s;
  display: block;
  border-left: 2px solid transparent;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.outline a:hover { color: var(--ink); }
.outline a.active {
  color: var(--coral);
  border-left-color: var(--coral);
}
@media (max-width: 1024px) {
  .note-shell.has-outline { grid-template-columns: 1fr; }
  .outline {
    position: static;
    border-left: none;
    border-top: 1px solid var(--paper-dark);
    border-bottom: 1px solid var(--paper-dark);
    padding: 1rem 0;
    margin: 0 0 1.5rem;
    max-height: 12rem;
  }
}

/* === KaTeX 微调 === */
.katex { font-size: 1.05em !important; }
.katex-display {
  margin: 1.4rem 0 !important;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--coral);
  background: var(--bone);
  overflow-x: auto;
}

/* === Paper card 缩略图 === */
.paper-card {
  position: relative;
}
.paper-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  margin: -1.4rem -1.4rem 0.8rem;
  width: calc(100% + 2.8rem);
  background-size: cover;
  background-position: center;
}
/* === Era hint === */
.era-hint {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.92rem;
  margin: -0.5rem 0 1rem;
  padding-left: 0.2rem;
}

/* === Learn 折叠互动 === */
.note-content details {
  border: 1px solid var(--paper-dark);
  background: var(--bone);
  padding: 0.8rem 1.2rem;
  margin: 1.4rem 0;
  border-radius: 2px;
}
.note-content details[open] { border-color: var(--coral); }
.note-content details summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--coral);
  list-style: none;
  position: relative;
  padding-left: 1.4em;
}
.note-content details summary::-webkit-details-marker { display: none; }
.note-content details summary::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.3em;
  color: var(--coral);
  line-height: 1;
}
.note-content details[open] summary::before { content: "✓"; color: var(--olive); }
.note-content details > *:not(summary) { margin-top: 0.8rem; }

/* === Sandbox iframe wrapper === */
.sandbox-wrap {
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  padding: 0.8rem;
  margin: 1.6rem 0;
}
.sandbox-wrap iframe { width: 100%; height: 480px; border: none; background: white; }
.sandbox-caption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* === Issue cover page === */
.issue-cover {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5rem) var(--gutter);
}
.issue-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 0.8rem 0;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.issue-masthead .issue-title { color: var(--ink); font-weight: 700; }
.issue-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--coral);
  margin: 0.5rem 0;
}
.issue-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 1.5rem 0 1rem;
  max-width: 22ch;
}
.issue-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.issue-editorial {
  max-width: 38ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 1rem 0 3rem;
}
.issue-editorial p { margin-bottom: 0.9rem; max-width: none; }
.issue-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0 4rem;
}
.issue-plate {
  border: 1px solid var(--ink);
  background: var(--bone);
  padding: 1.2rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: background 0.15s;
}
.issue-plate:hover { background: var(--paper-warm); }
.issue-plate .plate-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--coral);
}
.issue-plate .plate-topic {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.issue-plate .plate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-decoration: none;
}

/* —— Dark mode：system + manual override (.dark-theme on html) —— */
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) {
    color-scheme: dark;
    --paper: #1f1b14;
    --paper-warm: #241f17;
    --paper-dark: #15120c;
    --bone: #2a241b;
    --ink: #ebe1c9;
    --ink-soft: #cdc3ad;
    --ink-mute: #a39a86;
    --ink-faint: #6f685a;
    --coral: #f08775;
    --coral-soft: #f5a092;     /* 暗模式：solid 文本色保留可读对比 */
    --coral-tint: rgba(240, 135, 117, 0.22);
    --mustard: #e6c068;
    --olive: #a8b07a;
  }
}
html.dark-theme {
  color-scheme: dark;
  --paper: #1f1b14;
  --paper-warm: #241f17;
  --paper-dark: #15120c;
  --bone: #2a241b;
  --ink: #ebe1c9;
  --ink-soft: #cdc3ad;
  --ink-mute: #a39a86;
  --ink-faint: #6f685a;
  --coral: #f08775;
  --coral-soft: #f5a092;
  --coral-tint: rgba(240, 135, 117, 0.22);
  --mustard: #e6c068;
  --olive: #a8b07a;
}
@media (prefers-color-scheme: dark) {
  /* noise/grain overlay：暗底要切 screen 不然黑成一片 */
  html:not(.light-theme) body::before,
  html:not(.light-theme) body::after {
    mix-blend-mode: screen;
    opacity: 0.06;
  }
}
html.dark-theme body::before,
html.dark-theme body::after {
  mix-blend-mode: screen;
  opacity: 0.06;
}
/* === Paper card thumbnail placeholder === */
.paper-card .thumb-placeholder {
  background: linear-gradient(135deg, var(--bone) 0%, var(--paper-warm) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.paper-card .thumb-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
.paper-card .thumb-placeholder span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--coral);
  letter-spacing: -0.02em;
  z-index: 1;
}

/* === Hero illustration grid === */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
  margin: 1rem 0 0;
}
.hero-text { min-width: 0; }
.hero-figure {
  margin: 0;
  position: relative;
}
.hero-figure picture,
.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
}
.hero-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 0.5rem;
  padding-left: 0.2rem;
}
.hero-figure figcaption .plate {
  color: var(--coral);
  font-weight: 500;
  margin-right: 0.6em;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-figure { order: -1; }
}

/* === Topic hero illustration === */
.topic-hero {
  margin: 0 0 2rem;
  position: relative;
}
.topic-hero picture,
.topic-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
}
@media (max-width: 600px) {
  .topic-hero img { max-height: 200px; }
}

/* === Page hero illustration (about / learn / issues / topics) === */
.page-hero {
  margin: 1.5rem 0 2rem;
  position: relative;
}
.page-hero picture,
.page-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
}
@media (max-width: 600px) {
  .page-hero img { max-height: 220px; }
}

/* === Timeline page === */
.timeline-year {
  margin: 3rem 0;
  position: relative;
}
.timeline-year-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin: 0 0 1.5rem;
}
.timeline-year-label .year-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--coral);
  letter-spacing: -0.02em;
  line-height: 1;
}
.timeline-year-label .year-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
.timeline-item { margin: 0; padding: 0; }
.timeline-item a {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--paper-dark);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s;
}
.timeline-item a:hover {
  background: var(--bone);
}
.timeline-topic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--coral);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1;
}
.timeline-topic[data-topic="planning"] { color: var(--mustard); }
.timeline-topic[data-topic="vla"] { color: var(--coral); }
.timeline-topic[data-topic="diffusion-policy"] { color: var(--coral-soft); }
.timeline-topic[data-topic="imitation"] { color: var(--olive); }
.timeline-topic[data-topic="world-model"] { color: var(--coral); }
.timeline-topic[data-topic="multimodal"] { color: var(--mustard); }
.timeline-topic[data-topic="rf"] { color: var(--coral); }
.timeline-topic[data-topic="auditory"] { color: var(--mustard); }
.timeline-topic[data-topic="dataset-eval"] { color: var(--olive); }
.timeline-topic[data-topic="sim"] { color: var(--coral); }
.timeline-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.timeline-venue {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .timeline-item a { grid-template-columns: 3rem 1fr; }
  .timeline-venue { grid-column: 2; font-size: 0.7rem; margin-top: 0.2rem; }
}

/* === Stats dashboard on home === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 2rem;
  margin: 2.5rem 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--paper-dark);
}
.stat-num {
  color: var(--coral);
  font-size: 1.8rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-denom {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  margin-top: -1rem;
  margin-left: 4px;
}
.stat-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  margin-top: 0.4rem;
}

/* === Compare page === */
.compare-section {
  margin: 3rem 0 4rem;
}
.compare-topic {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}
.compare-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--paper-dark);
  font-weight: 500;
}
.compare-table tbody td {
  padding: 0.7rem 0.7rem;
  border-bottom: 1px solid var(--paper-dark);
  vertical-align: top;
}
.compare-table tbody tr:hover {
  background: var(--bone);
}
.cell-year {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-mute);
  white-space: nowrap;
  width: 4rem;
}
.cell-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  width: 30%;
}
.cell-title a {
  color: var(--ink);
  text-decoration: none;
}
.cell-title a:hover {
  color: var(--coral);
}
.cell-venue {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  width: 6rem;
}
.cell-tldr {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.era-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 0.15em 0.55em;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.era-badge.era-founder { color: var(--coral); }
.era-badge.era-classic { color: var(--ink-mute); }
.era-badge.era-frontier { color: var(--olive); }

@media (max-width: 700px) {
  .compare-table thead { display: none; }
  .compare-table tbody td { display: block; padding: 0.2rem 0; border: none; }
  .compare-table tbody tr {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--paper-dark);
  }
  .cell-title { width: auto; }
  .cell-venue { width: auto; }
}

/* === Topic landing === */
.topic-landing-hero {
  display: block;
  margin: 2rem 0 2.5rem;
  border: 1px solid var(--paper-dark);
}
.topic-landing-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.topic-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  border-radius: 2px;
  margin: 2rem 0;
}
.topic-meta-grid > div {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--paper-dark);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.topic-meta-grid > div:last-child { border-right: none; }
.topic-intro {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 1.5rem 0;
}
.primer-list {
  counter-reset: primer;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.primer-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--paper-dark);
  align-items: start;
}
.primer-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--coral);
  line-height: 1;
}
.primer-body { display: flex; flex-direction: column; gap: 0.4rem; }
.primer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.25;
}
.primer-title:hover { color: var(--coral); }
.primer-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.primer-tldr {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .topic-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-meta-grid > div:nth-child(2) { border-right: none; }
  .topic-meta-grid > div:nth-child(1), .topic-meta-grid > div:nth-child(2) {
    border-bottom: 1px solid var(--paper-dark);
  }
}

/* === reading progress === */
.read-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.3em 0.8em;
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.read-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.read-btn.is-read {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
}
.read-btn.is-read:hover {
  background: var(--coral);
  border-color: var(--coral);
}
.eai-card-read {
  position: relative;
  border-color: var(--olive) !important;
}
.eai-card-read .thumb { opacity: 0.7; filter: saturate(0.7); }
.eai-card-read h3 { opacity: 0.75; }
.eai-card-read p { opacity: 0.65; }
.eai-card-read::after {
  content: "✓";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--olive);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border-radius: 50%;
  z-index: 2;
}
.eai-card-read:hover { opacity: 1; }
.eai-card-read:hover .thumb,
.eai-card-read:hover h3,
.eai-card-read:hover p { opacity: 1; filter: none; }

/* === next pick widget === */
.next-pick {
  margin: 2rem 0;
  border: 2px solid var(--ink);
  background: var(--bone);
  position: relative;
}
.next-pick::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 1px solid var(--coral);
  pointer-events: none;
  z-index: -1;
}
.next-pick-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 0.7rem 1.2rem 0.3rem;
  border-bottom: 1px solid var(--paper-dark);
}
.next-pick-card {
  display: block;
  padding: 1.2rem 1.4rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.next-pick-card:hover { background: var(--paper-warm); }
.next-pick-meta {
  display: flex;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.next-pick-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0.2rem 0 0.5rem;
}
.next-pick-tldr {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
}
.next-pick-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.next-pick-difficulty { color: var(--coral); letter-spacing: 0.1em; }
.next-pick-reason { color: var(--ink-faint); text-transform: uppercase; }

/* === glossary === */
.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.5rem 0 0;
  border: 1px solid var(--ink);
  border-right: none;
}
.glossary-nav a {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.4rem;
  border-right: 1px solid var(--paper-dark);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  min-width: 2rem;
  transition: background 0.15s;
}
.glossary-nav a:hover { background: var(--coral); color: var(--paper); }
.glossary-section { margin: 3rem 0; }
.glossary-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 4rem;
  color: var(--coral);
  line-height: 1;
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.3rem;
}
.glossary-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 1rem 1.5rem;
}
.glossary-term {
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.25rem;
}
.glossary-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.glossary-full {
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.glossary-def {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 0.25rem 0 0.8rem;
  border-bottom: 1px dashed var(--paper-dark);
}
.glossary-source {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--coral);
  text-decoration: none;
}
.glossary-source:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .glossary-list { grid-template-columns: 1fr; gap: 0.4rem 0; }
  .glossary-term { padding-top: 1rem; border-top: 1px solid var(--paper-dark); }
  .glossary-def { border-bottom: none; padding-bottom: 0.4rem; }
}

/* === quick filter === */
.quick-filter {
  margin: 1.5rem 0 2rem;
  padding: 0.8rem 1.2rem;
  background: rgba(217, 207, 178, 0.96);
  border: 1px solid var(--paper-dark);
  border-radius: 2px;
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
  .quick-filter { position: static; }
}
.qf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0;
}
.qf-row + .qf-row { border-top: 1px dashed var(--paper-dark); margin-top: 0.3rem; padding-top: 0.6rem; }
.qf-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  width: 4rem;
  flex-shrink: 0;
}
.qf-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--paper);
  color: var(--ink-mute);
  border: 1px solid var(--paper-dark);
  padding: 0.3em 0.7em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
}
.qf-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.qf-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.qf-chip-all.is-active {
  background: var(--coral);
  border-color: var(--coral);
}
.qf-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--coral);
}

/* === graph === */
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--paper-dark);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.12s;
}
.legend-item:hover { color: var(--ink); }
.legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}
.graph-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
  max-width: 280px;
  font-size: 0.85rem;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tt-title { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin-bottom: 0.3rem; }
.tt-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--mustard); letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.tt-tldr { font-size: 0.82rem; line-height: 1.4; opacity: 0.9; }

/* === streak === */
.streak-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0;
  padding: 1rem 1.4rem;
  background: var(--paper-warm);
  border: 1px solid var(--coral);
  border-left-width: 4px;
}
.streak-flame {
  font-size: 1.6rem;
  line-height: 1;
}
.streak-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.streak-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--coral);
  line-height: 1;
}
.streak-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.streak-detail {
  display: flex;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
}
.streak-detail span:first-child {
  font-weight: 700;
  color: var(--ink);
}
.streak-detail .dl {
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-left: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}
@media (max-width: 700px) {
  .streak-box { grid-template-columns: auto 1fr; }
  .streak-detail { grid-column: 1 / -1; padding-top: 0.5rem; border-top: 1px dashed var(--paper-dark); }
}

/* === backlinks === */
.backlinks {
  margin: 3rem 0 0;
  padding: 1.2rem 1.4rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  border-left: 3px solid var(--olive);
}
.backlinks-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.7rem;
}
.backlinks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.backlinks-list li { border-bottom: 1px dashed var(--paper-dark); }
.backlinks-list li:last-child { border-bottom: none; }
.backlinks-list a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.8rem;
  padding: 0.6rem 0;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.backlinks-list a:hover { background: var(--paper-warm); }
.bl-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.bl-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.backlinks-list a:hover .bl-title { color: var(--coral); }
.bl-topic {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
@media (max-width: 700px) {
  .backlinks-list a { grid-template-columns: 2.5rem 1fr; }
  .bl-topic { grid-column: 2; padding-top: 0.2rem; }
}

/* === what's new === */
.whats-new {
  margin: 2rem 0;
  padding: 0;
}
.wn-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wn-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-dark);
}
.wn-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
}
.wn-card {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background 0.15s;
}
.wn-card:last-child { border-right: none; }
.wn-card:hover { background: var(--paper-warm); }
.wn-issue { background: var(--ink); color: var(--paper); }
.wn-issue:hover { background: var(--coral); }
.wn-issue .wn-tag { color: var(--mustard); }
.wn-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}
.wn-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.wn-tldr {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.wn-issue .wn-tldr { color: var(--paper); opacity: 0.85; }
@media (max-width: 900px) {
  .wn-grid { grid-template-columns: 1fr 1fr; }
  .wn-card { border-bottom: 1px solid var(--paper-dark); }
  .wn-issue { grid-column: 1 / -1; }
}

/* === print === */
@media print {
  /* 隐藏交互元素 */
  .masthead,
  .search-trigger,
  .search-dialog,
  .read-btn,
  .quick-filter,
  .next-pick,
  .streak-box,
  .whats-new,
  .outline,
  .jx-footer,
  .topic-hero,
  .hero-figure,
  details summary,
  details ol,
  .graph-legend,
  #graph-container {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  .shell, .note-shell { max-width: none !important; padding: 0 !important; }
  .note-main { width: 100% !important; }

  h1 { font-size: 22pt; page-break-after: avoid; }
  h2 { font-size: 14pt; page-break-after: avoid; margin-top: 1.6em; }
  h3 { font-size: 12pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  pre, blockquote, figure, table { page-break-inside: avoid; }

  /* 链接显示 URL */
  a[href^="/"]::after,
  a[href^="https://"]::after,
  a[href^="http://"]::after {
    content: " <" attr(href) ">";
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #666;
    word-break: break-all;
  }
  /* 内部锚点链接不打印 URL */
  a[href^="#"]::after { content: ""; }

  img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }
  figcaption { font-size: 9pt; color: #555; }

  /* 在第一页顶部加打印水印 */
  .note-content::before {
    content: "Embodied AI Reading Station — printed copy. Source: estelledc.github.io/embodied-ai-reading-station";
    display: block;
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #888;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
  }

  /* backlinks 简化 */
  .backlinks {
    border: none;
    background: transparent;
    padding: 0.5em 0;
    border-top: 1px solid #ccc;
  }
  .reading-meta { color: #666; font-size: 9pt; }
  .endmark { display: none; }
}

/* === keyboard help === */
.kb-help-dialog {
  border: 2px solid var(--ink);
  background: var(--paper);
  max-width: 32rem;
  width: 90vw;
  padding: 1.6rem 1.8rem;
  font-family: var(--font-sans);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.kb-help-dialog::backdrop {
  background: rgba(58, 52, 42, 0.55);
}
.kb-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0.2em 0.4em;
}
.kb-close:hover { color: var(--coral); }
.kb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kb-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0.3rem 0 1.2rem;
  letter-spacing: -0.02em;
}
.kb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.kb-table tr td {
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--paper-dark);
}
.kb-keys { width: 9rem; }
.kb-desc { color: var(--ink-soft); }
.kb-help-dialog kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  border-bottom-width: 2px;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  color: var(--ink);
  margin-right: 0.3em;
  min-width: 1.2em;
  text-align: center;
}
.kb-foot {
  margin: 1.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.kb-trigger {
  background: transparent;
  border: 1px solid var(--paper-dark);
  padding: 0.3em 0.6em;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  border-radius: 2px;
  transition: all 0.12s;
  margin-left: 0.4rem;
}
.kb-trigger:hover {
  border-color: var(--coral);
  color: var(--coral);
}
@media (max-width: 700px) {
  .kb-trigger { display: none; }
}

/* === prev/next nav === */
.prev-next-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 0;
}
.pn-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  min-height: 5rem;
}
.pn-card:not(.pn-empty):hover {
  border-color: var(--coral);
  background: var(--paper-warm);
  transform: translateY(-2px);
}
.pn-empty { background: transparent; border: 1px dashed var(--paper-dark); opacity: 0.3; }
.pn-next { text-align: right; }
.pn-dir {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}
.pn-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.pn-tldr {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .prev-next-nav { grid-template-columns: 1fr; }
  .pn-empty { display: none; }
  .pn-next { text-align: left; }
}

/* === topic mini timeline === */
.topic-timeline-section { margin: 2.5rem 0; }
.topic-timeline-wrap {
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  padding: 1rem 0.5rem;
  margin: 1rem 0;
}
.topic-timeline { width: 100%; height: auto; max-height: 120px; }
.topic-timeline circle { transition: r 0.15s; cursor: pointer; }
.topic-timeline circle:hover { r: 7; }
.timeline-legend {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
}
.lg-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.lg-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }

/* === breadcrumbs === */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all 0.12s;
}
.breadcrumbs a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.bc-sep {
  color: var(--paper-dark);
}
.bc-current {
  color: var(--coral);
  font-weight: 600;
}

/* === theme toggle button === */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--paper-dark);
  padding: 0.3em 0.6em;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-mute);
  border-radius: 2px;
  transition: all 0.12s;
  margin-left: 0.4rem;
  min-width: 2.2rem;
}
.theme-toggle:hover {
  border-color: var(--coral);
  color: var(--coral);
}
@media (max-width: 700px) {
  .theme-toggle { font-size: 0.9rem; min-width: 1.8rem; }
}

/* === tags === */
.note-tags {
  margin: 0.5rem 0 1rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.note-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  background: var(--bone);
  color: var(--ink-mute);
  text-decoration: none;
  padding: 0.2em 0.6em;
  border-radius: 2px;
  transition: all 0.12s;
}
.note-tag:hover { background: var(--coral); color: var(--paper); }
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.tag-cloud-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.tag-cloud-item:hover {
  border-color: var(--coral);
  background: var(--paper-warm);
  transform: translateY(-2px);
}
.tag-name {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
}
.tag-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--coral);
  font-weight: 700;
}

/* === heading anchor copy === */
.note-content h2,
.note-content h3 {
  position: relative;
  padding-right: 1.5em;
}
.heading-anchor {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  padding: 0 0.3em;
  cursor: pointer;
}
.note-content h2:hover .heading-anchor,
.note-content h3:hover .heading-anchor {
  opacity: 1;
}
.heading-anchor:hover { color: var(--coral); }
.heading-anchor.copied {
  color: var(--olive);
  opacity: 1;
}

/* === scroll progress bar === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--coral);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 100;
  transition: transform 0.05s ease-out;
  pointer-events: none;
}
@media print { .scroll-progress { display: none; } }

.streak-export {
  background: transparent;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.4em 0.8em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
}
.streak-export:hover {
  background: var(--coral);
  color: var(--paper);
}

/* === venue stats === */
.venue-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.venue-bar-row {
  display: grid;
  grid-template-columns: 8rem 1fr 3rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
  transition: background 0.12s;
}
.venue-bar-row:hover { background: var(--paper-warm); }
.venue-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-bar-track {
  height: 1rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  position: relative;
  overflow: hidden;
}
.venue-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--coral) 0%, var(--mustard) 100%);
}
.venue-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--coral);
  font-weight: 700;
  text-align: right;
}

/* === auto-mark toast === */
.auto-mark-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  background: var(--olive);
  color: var(--paper);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.auto-mark-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.auto-mark-toast button {
  background: transparent;
  border: 1px solid var(--paper);
  color: var(--paper);
  padding: 0.2em 0.6em;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 2px;
}
.auto-mark-toast button:hover { background: var(--paper); color: var(--olive); }
@media print { .auto-mark-toast { display: none; } }

/* === stats dashboard === */
.big-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid var(--ink);
  margin: 1.5rem 0;
}
.big-stats > div {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--paper-dark);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.big-stats > div:last-child { border-right: none; }
.bs-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--coral);
  line-height: 1;
}
.bs-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stats-section { margin: 2rem 0; }
.stats-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 0.7rem;
  border-bottom: 1px solid var(--paper-dark);
  padding-bottom: 0.3rem;
}
.stats-bars { display: flex; flex-direction: column; gap: 0.25rem; }
.stats-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.2rem 0;
}
.stats-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.stats-label:hover { color: var(--coral); }
.vbar {
  position: relative;
  height: 1.4rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
}
.vbar-fill {
  height: 100%;
  background: var(--coral);
  opacity: 0.55;
}
.vbar-num {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 700px) {
  .big-stats { grid-template-columns: 1fr 1fr; }
  .big-stats > div:nth-child(2) { border-right: none; }
}

/* === more-nav dropdown === */
.more-nav { display: inline; position: relative; }
.more-nav summary {
  list-style: none;
  cursor: pointer;
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--ink-mute);
}
.more-nav summary::-webkit-details-marker { display: none; }
.more-nav summary::marker { content: ""; }
.more-nav summary:hover { color: var(--coral); }
.more-nav-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.6rem 0;
  min-width: 12rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.4rem;
}
.more-nav-panel a {
  padding: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-mute);
  transition: background 0.1s, color 0.1s;
}
.more-nav-panel a:hover {
  background: var(--paper-warm);
  color: var(--coral);
}
@media (max-width: 700px) {
  .more-nav-panel { right: auto; left: 0; min-width: 9rem; }
}

/* === related views === */
.related-views {
  max-width: 75rem;
  margin: 4rem auto 1.5rem;
  padding: 0 1.5rem;
}
.rv-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.rv-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-dark);
}
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--paper-dark);
}
.rv-card {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.15s;
}
.rv-card:last-child { border-right: none; }
.rv-card:hover { background: var(--paper-warm); }
.rv-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rv-card:hover .rv-label { color: var(--coral); }
.rv-desc {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-card { border-right: none; border-bottom: 1px solid var(--paper-dark); }
  .rv-card:last-child { border-bottom: none; }
}
@media print { .related-views { display: none; } }

/* === cite block === */
.cite-block {
  margin: 2rem 0 0;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
}
.cite-block summary {
  padding: 0.7rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  list-style: none;
}
.cite-block summary::-webkit-details-marker { display: none; }
.cite-block summary::before {
  content: "›";
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.15s;
}
.cite-block[open] summary::before { transform: rotate(90deg); }
.cite-content {
  padding: 0 1.2rem 1.2rem;
  position: relative;
}
.cite-tab-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--coral);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.cite-code {
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  padding: 0.8rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
  overflow-x: auto;
  margin: 0 0 0.6rem;
  white-space: pre;
}
.cite-copy {
  background: transparent;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.4em 0.9em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
}
.cite-copy:hover { background: var(--coral); color: var(--paper); }
.cite-copy.copied { background: var(--olive); border-color: var(--olive); color: var(--paper); }

/* === reading lists === */
.reading-list {
  margin: 3rem 0 4rem;
  padding: 1.5rem 1.8rem;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  border-left: 4px solid var(--coral);
}
.rl-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem 1rem;
  align-items: baseline;
  border-bottom: 1px dashed var(--paper-dark);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}
.rl-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 0.2em 0.6em;
  border: 1px solid var(--coral);
  border-radius: 2px;
  align-self: center;
}
.rl-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0;
}
.rl-subtitle {
  grid-column: 2;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0;
  font-style: italic;
}
.rl-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  align-self: center;
}
.rl-intro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1rem;
}
@media (max-width: 700px) {
  .rl-header { grid-template-columns: 1fr auto; }
  .rl-subtitle { grid-column: 1 / -1; }
}

/* === reading timer badge === */
.read-timer-badge {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: var(--paper);
  border: 1px solid var(--coral);
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--coral);
  letter-spacing: 0.06em;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 95;
  pointer-events: none;
}
.read-timer-badge::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--coral);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 0.3s ease-out;
}
@media print { .read-timer-badge { display: none; } }

/* === image lightbox === */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 14, 11, 0.92);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s;
}
.img-lightbox.show { opacity: 1; }
.img-lightbox img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.lb-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: transparent;
  border: 1px solid rgba(239, 231, 210, 0.5);
  color: var(--paper);
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.lb-close:hover { background: var(--coral); border-color: var(--coral); }
.lb-caption {
  margin-top: 1rem;
  color: rgba(239, 231, 210, 0.8);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  max-width: 60ch;
  text-align: center;
}
@media print { .img-lightbox { display: none; } }

/* === issue badges === */
.issue-badges {
  margin: 0.5rem 0 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.issue-badge {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  background: var(--ink);
  color: var(--mustard);
  text-decoration: none;
  padding: 0.3em 0.8em;
  border-radius: 2px;
  transition: all 0.12s;
}
.issue-badge:hover {
  background: var(--coral);
  color: var(--paper);
}

/* === reading list progress === */
.rl-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}
.rl-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  overflow: hidden;
}
.rl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive) 0%, var(--coral) 100%);
  width: 0;
  transition: width 0.3s;
}
.rl-progress-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--coral);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.primer-item-read .primer-num { color: var(--olive); }
.primer-item-read .primer-num::after { content: " ✓"; font-size: 0.5em; }
.primer-item-read .primer-title { color: var(--ink-faint); }

/* === graph layout controls === */
.graph-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0.6rem;
}
.gc-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}
.gc-btn {
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.3em 0.7em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
}
.gc-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}
.gc-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* === copy markdown button === */
.copy-md-btn {
  background: transparent;
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.2em 0.5em;
  cursor: pointer;
  border-radius: 2px;
  margin-left: 0.4rem;
  transition: all 0.12s;
}
.copy-md-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}
.copy-md-btn.copied {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
}

/* === quality dashboard === */
.quality-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.2rem 0;
  border: 1px solid var(--ink);
}
.qs-cell {
  flex: 1;
  min-width: 8rem;
  padding: 0.7rem 1rem;
  border-right: 1px solid var(--paper-dark);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.qs-cell:last-child { border-right: none; }
.qs-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--coral);
  line-height: 1;
}
.qs-kind {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.quality-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.quality-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--ink);
}
.quality-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--paper-dark);
  vertical-align: top;
}
.q-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 0.15em 0.5em;
  margin-right: 0.3em;
  border-radius: 2px;
  white-space: nowrap;
}
.q-thin, .q-thick { background: rgba(237, 111, 92, 0.15); color: var(--coral); }
.q-no-tldr, .q-no-tags { background: rgba(233, 185, 74, 0.18); color: #8a6915; }
.q-no-year, .q-no-venue { background: rgba(110, 116, 72, 0.15); color: var(--olive); }
.q-no-scene-img, .q-no-method-img { background: var(--bone); color: var(--ink-mute); }

/* === skip link === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  padding: 0.6em 1.2em;
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
  top: 0;
  outline: 2px solid var(--coral-text);
  outline-offset: -2px;
}
#main-content { outline: none; }
#main-content:focus-visible { outline: 2px solid var(--coral-text); outline-offset: -2px; }

/* === pn-card read state === */
.pn-card-read {
  border-color: var(--olive) !important;
  position: relative;
}
.pn-card-read::after {
  content: "✓";
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  background: var(--olive);
  color: var(--paper);
  padding: 0.05em 0.4em;
  border-radius: 2px;
  letter-spacing: 0;
}
.pn-card-read .pn-title { color: var(--ink-soft); }

/* === topic landing progress === */
.topic-progress {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.8rem 1rem;
  align-items: center;
  margin: 1rem 0 2rem;
  padding: 0.8rem 1.2rem;
  background: var(--bone);
  border-left: 3px solid var(--coral);
}
.tp-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tp-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--coral);
  letter-spacing: -0.02em;
}
.tp-bar {
  flex: 1;
  height: 6px;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  overflow: hidden;
  min-width: 8rem;
}
.tp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive) 0%, var(--coral) 100%);
  width: 0;
  transition: width 0.3s;
}

/* === link preview popup === */
.link-preview {
  position: fixed;
  z-index: 90;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.7rem 0.9rem;
  max-width: 26rem;
  font-size: 0.85rem;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 0.18s;
}
.link-preview.show { opacity: 1; }
.lp-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.lp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.lp-tldr {
  color: var(--ink-soft);
  line-height: 1.45;
  font-size: 0.84rem;
}
@media (max-width: 700px), (hover: none) {
  .link-preview { display: none; }
}
@media print { .link-preview { display: none; } }

/* === graph read badge === */
.graph-read-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--olive);
  font-weight: 700;
  padding: 0.3em 0.6em;
  border: 1px solid var(--olive);
  border-radius: 2px;
}

/* === my stats === */
.my-stats { background: var(--paper-warm); padding: 1.5rem 1.8rem; border-left: 3px solid var(--coral); }
.my-topic-bars { margin-top: 1rem; }

/* === share button === */
.share-btn {
  background: transparent;
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  font-size: 0.92rem;
  line-height: 1;
  padding: 0.2em 0.55em;
  cursor: pointer;
  border-radius: 2px;
  margin-left: 0.4rem;
  transition: all 0.12s;
}
.share-btn:hover { border-color: var(--coral); color: var(--coral); }
.share-btn.copied { background: var(--olive); color: var(--paper); border-color: var(--olive); }

/* === changelog === */
.cl-day { margin: 1.8rem 0; }
.cl-date {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--coral);
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--paper-dark);
  padding-bottom: 0.3rem;
}
.cl-list { list-style: none; padding: 0; margin: 0; }
.cl-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--paper-dark);
}
.cl-item:last-child { border-bottom: none; }
.cl-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  text-align: center;
  background: var(--bone);
  color: var(--ink-mute);
}
.cl-tag-feat { background: rgba(110, 116, 72, 0.15); color: var(--olive); }
.cl-tag-fix { background: rgba(237, 111, 92, 0.15); color: var(--coral); }
.cl-tag-perf { background: rgba(233, 185, 74, 0.18); color: #8a6915; }
.cl-tag-docs { background: rgba(62, 98, 128, 0.15); color: #3e6280; }
.cl-tag-ci { background: rgba(108, 96, 104, 0.15); color: #6c6068; }
.cl-subject {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}
.cl-hash {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.cl-hash:hover { color: var(--coral); }
@media (max-width: 700px) {
  .cl-item { grid-template-columns: 1fr auto; }
  .cl-tag { grid-row: 1; }
}

/* === graph search input === */
.gc-search {
  margin-left: auto;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.3em 0.7em;
  color: var(--ink);
  border-radius: 2px;
  min-width: 14rem;
  outline: none;
}
.gc-search:focus { border-color: var(--coral); }
.gc-search::placeholder { color: var(--ink-faint); }
@media (max-width: 700px) {
  .gc-search { min-width: 0; flex: 1; margin-left: 0; }
}

/* === human site map === */
.sm-section { margin: 2rem 0; }
.sm-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.3rem;
}
.sm-list { list-style: none; padding: 0; margin: 0; }
.sm-list li {
  display: grid;
  grid-template-columns: 13rem 1fr auto;
  gap: 0.8rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--paper-dark);
  align-items: baseline;
}
.sm-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.sm-label:hover { color: var(--coral); }
.sm-desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}
.sm-url {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .sm-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  .sm-url { display: none; }
}

/* === svg export button === */
.svg-export-btn {
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.3em 0.6em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
}
.svg-export-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}
@media print { .svg-export-btn { display: none; } }

/* === code copy button === */
.note-content pre { position: relative; }
.code-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.15em 0.5em;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s, all 0.12s;
}
.note-content pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { border-color: var(--coral); color: var(--coral); }
.code-copy-btn.copied { background: var(--olive); color: var(--paper); border-color: var(--olive); opacity: 1; }
@media print { .code-copy-btn { display: none; } }

/* === back to top button === */
.back-top-btn {
  position: fixed;
  bottom: 4rem;
  right: 1.5rem;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 50;
  transition: transform 0.15s, background 0.15s;
}
.back-top-btn:hover {
  background: var(--coral);
  transform: translateY(-3px);
}
@media (max-width: 700px) {
  .back-top-btn { bottom: 1rem; right: 1rem; }
}
@media print { .back-top-btn { display: none; } }

/* === learn featured cards === */
.learn-featured { margin: 2rem 0; }
.lf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--ink);
}
.lf-card {
  padding: 2rem 1.6rem;
  border-right: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 0.15s;
  background: var(--paper-warm);
}
.lf-card:last-child { border-right: none; }
.lf-card:hover { background: var(--paper); }
.lf-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--coral);
  line-height: 1;
}
.lf-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.lf-card:hover .lf-title { color: var(--coral); }
.lf-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .lf-grid { grid-template-columns: 1fr; }
  .lf-card { border-right: none; border-bottom: 1px solid var(--paper-dark); }
  .lf-card:last-child { border-bottom: none; }
}

/* === daily pick === */
.daily-pick {
  margin: 1.5rem 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--mustard);
}
.dp-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard);
  padding: 0.6rem 1.2rem 0.3rem;
  border-bottom: 1px solid var(--paper-dark);
  background: rgba(233, 185, 74, 0.08);
}
.dp-card {
  display: block;
  padding: 1.2rem 1.4rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.dp-card:hover { background: rgba(233, 185, 74, 0.05); }
.dp-meta {
  display: flex;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.dp-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0.2rem 0 0.5rem;
}
.dp-tldr {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
}
.dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.dp-difficulty { color: var(--coral); }
.dp-date { color: var(--ink-faint); }

/* === extended footer === */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  padding: 1rem 0;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.footer-col a {
  display: block;
  padding: 0.18rem 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.12s;
}
.footer-col a:hover { color: var(--coral); }
@media (max-width: 700px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media print { .footer-cols { display: none; } }

/* === search shortcuts === */
.search-shortcuts {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--paper-dark);
}
.ss-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.ss-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.ss-grid a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.7rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  text-decoration: none;
  color: var(--ink);
  border-radius: 2px;
  transition: all 0.12s;
  text-align: center;
}
.ss-grid a:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}
@media (max-width: 700px) {
  .ss-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === completion medal === */
.completion-medal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, var(--mustard) 0%, var(--coral) 100%);
  color: var(--paper);
  border: 2px solid var(--ink);
}
.cm-icon {
  font-family: var(--font-display);
  font-size: 4rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  align-self: center;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}
.cm-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
  margin-bottom: 0.3rem;
}
.cm-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.cm-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  opacity: 0.95;
}
.cm-text a {
  color: var(--paper);
  text-decoration: underline;
  font-family: var(--font-mono);
  font-size: 0.92em;
}
@media (max-width: 700px) {
  .completion-medal { grid-template-columns: 1fr; text-align: center; }
}

/* === issue index hero + archive === */
.issue-hero-card {
  display: block;
  margin: 2rem 0;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 80%, black) 100%);
  color: var(--paper);
  text-decoration: none;
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.issue-hero-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--coral) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.issue-hero-card:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 80%, black) 0%, var(--ink) 100%); }
/* 暗模式下 ink 已经接近浅色 → 翻转为高对比 paper-warm 背景 */
html.dark-theme .issue-hero-card {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--coral);
}
html.dark-theme .issue-hero-card:hover {
  background: var(--bone);
}
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .issue-hero-card {
    background: var(--paper-warm);
    color: var(--ink);
    border-color: var(--coral);
  }
  html:not(.light-theme) .issue-hero-card:hover { background: var(--bone); }
}
.ihc-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ihc-tag { background: var(--coral); color: var(--paper); padding: 0.2em 0.6em; border-radius: 2px; }
.ihc-num { color: var(--mustard); }
.ihc-date { color: var(--paper); opacity: 0.6; }
.ihc-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.7rem;
  color: var(--paper);
}
.ihc-intro {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.2rem;
  max-width: 52ch;
  opacity: 0.9;
}
.ihc-cta {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--mustard);
  display: inline-block;
}

.issue-archive { margin-top: 1.5rem; }
.ia-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.ia-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 1rem;
  padding: 0.9rem 1rem;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--paper-dark);
  transition: background 0.12s;
}
.ia-row:hover { background: var(--paper-warm); }
.ia-num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--coral);
  letter-spacing: 0.04em;
}
.ia-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ia-date {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .ihc-title { font-size: 1.8rem; }
  .ia-row { grid-template-columns: 4rem 1fr; }
  .ia-date { grid-column: 2; }
}

/* === milestone badges === */
.milestone-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.ms-badge {
  padding: 0.8rem 1rem;
  border: 1px solid var(--paper-dark);
  background: var(--bone);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all 0.15s;
}
.ms-earned {
  background: var(--paper-warm);
  border-color: var(--coral);
}
.ms-locked { opacity: 0.4; }
.ms-icon {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--coral);
}
.ms-locked .ms-icon { color: var(--ink-faint); }
.ms-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.ms-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.ms-desc {
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .milestone-row { grid-template-columns: repeat(2, 1fr); }
}

.auto-mark-toast .amt-next {
  margin-left: 0.5rem;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--paper);
  padding-bottom: 1px;
}
.auto-mark-toast .amt-next:hover { border-bottom-color: var(--mustard); color: var(--mustard); }

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 保留必要的 transform（避免 broken state） */
  .skip-link:focus { transform: none; }
}

/* === discover page === */
.discover-section { margin: 2rem 0; }
.discover-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
}
.ds-hint {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
  line-height: 1.5;
}
.ds-card, .ds-list { margin-top: 0.5rem; }
.ds-link {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.6rem;
  transition: all 0.15s;
}
.ds-link:hover { border-color: var(--coral); background: var(--paper-warm); }
.ds-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ds-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0.3rem 0 0.4rem;
  color: var(--ink);
}
.ds-link:hover .ds-title { color: var(--coral); }
.ds-tldr {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* === last commits on home === */
.last-commits {
  margin: 2rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--bone);
  border-left: 3px solid var(--olive);
  font-size: 0.88rem;
}
.lc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.last-commits ul { list-style: none; padding: 0; margin: 0; }
.last-commits li {
  display: flex;
  gap: 0.7rem;
  padding: 0.2rem 0;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.lc-ago {
  flex-shrink: 0;
  width: 6rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.lc-subject { color: var(--ink); line-height: 1.4; }
.lc-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--coral);
  text-decoration: none;
}
.lc-more:hover { text-decoration: underline; }

/* === search history === */
.search-history {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--paper-dark);
}
.sh-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.search-history ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.search-history button {
  background: transparent;
  border: 1px solid var(--paper-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.2em 0.7em;
  cursor: pointer;
  color: var(--ink);
  border-radius: 2px;
  transition: all 0.12s;
}
.search-history button::before {
  content: "↺ ";
  color: var(--ink-faint);
  margin-right: 0.2em;
}
.search-history button:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}

.streak-goal {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-left: 0.6rem;
}

/* === feedback FAB === */
.feedback-fab {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 40;
  transition: all 0.15s;
}
.feedback-fab:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
  transform: translateY(-2px);
}
/* 当 back-top-btn 也在时往下移 */
.back-top-btn ~ .feedback-fab,
.feedback-fab + .back-top-btn { bottom: 4rem; }
@media print { .feedback-fab { display: none; } }
@media (max-width: 700px) {
  .feedback-fab { width: 2.2rem; height: 2.2rem; font-size: 0.9rem; }
}

/* === graph search count label === */
.gc-count {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--coral);
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
}

/* === timeline era bands === */
.timeline-band {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin: 2rem 0 1rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(90deg, var(--paper-warm) 0%, var(--paper) 100%);
  border-left: 3px solid var(--mustard);
}
.tb-range {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--coral);
  font-weight: 700;
}
.tb-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tb-note {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}
@media (max-width: 700px) {
  .timeline-band { grid-template-columns: 1fr; }
  .tb-note { grid-column: 1; }
}

/* === lightbox prev/next === */
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(239, 231, 210, 0.1);
  border: 1px solid rgba(239, 231, 210, 0.4);
  color: var(--paper);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
.lb-prev:hover, .lb-next:hover {
  background: var(--coral);
  border-color: var(--coral);
}
.lb-counter {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-left: 0.5rem;
  color: var(--mustard);
}
@media (max-width: 700px) {
  .lb-prev, .lb-next { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
  .lb-prev { left: 0.5rem; }
  .lb-next { right: 0.5rem; }
}

/* === cheatsheet === */
.cs-section { margin: 1.5rem 0; page-break-inside: avoid; }
.cs-topic-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.3rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.cs-topic-h a { color: var(--ink); text-decoration: none; }
.cs-topic-h a:hover { color: var(--coral); }
.cs-roman {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--coral);
}
.cs-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-left: auto;
}
.cs-list { list-style: none; padding: 0; margin: 0; }
.cs-item {
  display: grid;
  grid-template-columns: 3rem 1.2rem minmax(8rem, 14rem) 1fr 6rem;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--paper-dark);
  font-size: 0.86rem;
}
.cs-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.cs-era {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  font-weight: 700;
}
.cs-era-founder { color: var(--coral); }
.cs-era-classic { color: var(--ink-mute); }
.cs-era-frontier { color: var(--olive); }
.cs-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.3;
}
.cs-title:hover { color: var(--coral); }
.cs-tldr {
  color: var(--ink-soft);
  line-height: 1.4;
  font-size: 0.84rem;
}
.cs-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-align: right;
}
@media (max-width: 800px) {
  .cs-item { grid-template-columns: 2.5rem 1rem 1fr; gap: 0.4rem; }
  .cs-tldr, .cs-meta { grid-column: 3; }
  .cs-meta { font-size: 0.65rem; }
}
@media print {
  .cs-section { font-size: 9pt; }
  .cs-item { padding: 0.15rem 0; gap: 0.4rem; grid-template-columns: 2.5rem 1rem 12rem 1fr 5rem; }
  .cs-title, .cs-tldr { font-size: 8.5pt; }
}

/* === timeline year nav === */
.year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.5rem 0 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
}
.year-nav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.25em 0.6em;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.12s;
}
.year-nav a:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}

/* === syllabus === */
.syl-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem 1rem;
  align-items: center;
  margin: 1.2rem 0 1.5rem;
  padding: 0.8rem 1.2rem;
  background: var(--paper-warm);
  border: 1px solid var(--coral);
}
.syl-bar {
  height: 8px;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  overflow: hidden;
}
.syl-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive) 0%, var(--coral) 100%);
  width: 0;
  transition: width 0.3s;
}
.syl-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--coral);
}
.syl-week { margin: 2rem 0; }
.syl-week-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.3rem;
}
.syl-goal {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--coral);
  margin: 0 0 1rem;
}
.syl-days { list-style: none; padding: 0; margin: 0; }
.syl-day {
  display: grid;
  grid-template-columns: 1.4rem 4rem 1fr;
  gap: 0.7rem 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--paper-dark);
  transition: opacity 0.2s;
}
.syl-day.syl-done { opacity: 0.5; }
.syl-day.syl-done .syl-paper { text-decoration: line-through; }
.syl-check {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: var(--olive);
}
.syl-day-num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--coral);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.syl-paper {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.syl-paper:hover { color: var(--coral); }
.syl-focus {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.syl-focus a { color: var(--coral); }
@media (max-width: 700px) {
  .syl-day { grid-template-columns: 1.4rem 1fr; }
  .syl-day-num { grid-row: 1; grid-column: 2; margin-bottom: 0.2rem; }
  .syl-day-body { grid-row: 2; grid-column: 2; }
}

/* === footer star CTA === */
.footer-star-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--paper-dark);
}
.star-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ink);
  color: var(--mustard);
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}
.star-cta:hover {
  background: var(--coral);
  color: var(--paper);
}
.star-icon {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
}
.star-mood {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media print { .footer-star-row { display: none; } }

/* === blindspot === */
.my-blindspot {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--bone);
  border-left: 3px solid var(--mustard);
}
.mb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a6915;
  margin-bottom: 0.6rem;
}
.my-blindspot ul { list-style: none; padding: 0; margin: 0; }
.my-blindspot li { padding: 0.3rem 0; border-bottom: 1px dashed var(--paper-dark); }
.my-blindspot li:last-child { border-bottom: none; }
.my-blindspot a {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.my-blindspot a:hover { color: var(--coral); }
.my-blindspot strong { color: var(--coral); font-weight: 700; }

/* === backlinks era groups === */
.bl-era-group { margin: 0.6rem 0; }
.bl-era-group:not(:first-child) {
  border-top: 1px dashed var(--paper-dark);
  padding-top: 0.6rem;
}
.bl-era-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.3rem;
}

/* === status chip === */
.status-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 2px;
  cursor: help;
}
.status-deep { background: var(--coral); color: var(--paper); }
.status-summary { background: rgba(110, 116, 72, 0.18); color: var(--olive); }
.status-light { background: var(--bone); color: var(--ink-faint); }

/* === graph stats panel === */
.graph-stats-panel {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(239, 231, 210, 0.92);
  border: 1px solid var(--paper-dark);
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  pointer-events: none;
  border-radius: 2px;
}
.gsp-row {
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
}
.gsp-label {
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.gsp-num {
  color: var(--coral);
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) { .graph-stats-panel { display: none; } }
@media print { .graph-stats-panel { display: none; } }

/* === about size bars === */
.size-bars { display: flex; flex-direction: column; gap: 0.4rem; margin: 1rem 0; }
.sb-row {
  display: grid;
  grid-template-columns: 12rem 1fr 5rem;
  gap: 0.8rem;
  align-items: center;
}
.sb-label {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--ink);
}
.sb-track {
  height: 1rem;
  background: var(--bone);
  border: 1px solid var(--paper-dark);
  position: relative;
  overflow: hidden;
}
.sb-fill { height: 100%; }
.sb-num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--coral);
  font-weight: 700;
  text-align: right;
}
@media (max-width: 700px) {
  .sb-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* === a11y: focus-visible 全局 (WCAG 2.4.7) === */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--coral-text);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 卡片类内描边（避免外边距裁掉） */
.paper-card:focus-visible,
.pn-card:focus-visible,
.lf-card:focus-visible,
.rv-card:focus-visible,
.wn-card:focus-visible,
.qf-chip:focus-visible {
  outline-offset: -2px;
}

/* === a11y: WCAG AA 文本对比 ===
   coral #ed6f5c on paper #efe7d2 ≈ 3.0:1，对正常字号 < 4.5:1。
   --coral-text 用于正常字号文本/链接（约 5:1）；--coral 留给 ≥18px 或 bold ≥14px。 */
:root {
  --coral-text: #c44a36;
}
html.dark-theme,
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) {
    --coral-text: #f08775;
  }
}

/* nav 当前页 不再仅靠颜色（违反 WCAG 1.4.1）— 加 underline + bold */
.masthead nav a[aria-current="page"] {
  color: var(--coral-text) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}

/* === dark-mode 修补：写死 rgba/hex 替换为 token 派生 === */
html.dark-theme .quick-filter,
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .quick-filter {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
  }
}
html.dark-theme {
  --quick-filter-bg: color-mix(in srgb, var(--paper) 96%, transparent);
}
.quick-filter { background: var(--quick-filter-bg, rgba(217, 207, 178, 0.96)); }

html.dark-theme .graph-stats-panel,
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .graph-stats-panel {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }
}

/* lightbox 暗模式：背景已经是黑色不变；prev/next/close 按钮在暗底变浅 */
html.dark-theme .lb-close,
html.dark-theme .lb-prev,
html.dark-theme .lb-next,
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .lb-close,
  html:not(.light-theme) .lb-prev,
  html:not(.light-theme) .lb-next {
    border-color: rgba(235, 225, 201, 0.5);
  }
}

/* changelog/quality tag 暗模式补色 */
html.dark-theme .cl-tag-perf,
html.dark-theme .q-no-tldr,
html.dark-theme .q-no-tags {
  color: var(--mustard);
}
html.dark-theme .cl-tag-docs {
  color: #8aaed4;
}
html.dark-theme .cl-tag-ci {
  color: var(--ink-mute);
}