/* ===== CSS Variables (default / :root = dark) ===== */
:root,
[data-theme="dark"] {
  --bg: #1e1e1e;
  --bg-secondary: #252526;
  --text: #d4d4d4;
  --text-secondary: #a0a0a0;
  --link: #569cd6;
  --link-hover: #9cdcfe;
  --border: #3c3c3c;
  --code-bg: #1e1e1e;
  --code-border: #3c3c3c;
  --header-bg: #252526;
  --header-border: #3c3c3c;
  --card-bg: #252526;
  --card-shadow: rgba(0,0,0,0.4);
  --blockquote-border: #569cd6;
  --blockquote-bg: #252526;
  --table-stripe: #2d2d2d;
  --kbd-bg: #333333;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-secondary: #f8f8f8;
  --text: #333333;
  --text-secondary: #666666;
  --link: #b31b1b;
  --link-hover: #8b1515;
  --border: #e0e0e0;
  --code-bg: #f5f5f5;
  --code-border: #e0e0e0;
  --header-bg: #fafafa;
  --header-border: #ddd;
  --card-bg: #ffffff;
  --card-shadow: rgba(0,0,0,0.08);
  --blockquote-border: #b31b1b;
  --blockquote-bg: #fdf6f6;
  --table-stripe: #f9f9f9;
  --kbd-bg: #eee;
}

/* ===== Transitions ===== */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Linux Libertine', 'Georgia', 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ===== Scrollbars (transparent track — no default white gutter) ===== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== Header ===== */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top, 0px);
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 24px;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.site-title:hover {
  color: var(--link);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.github-link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 2px;
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  box-sizing: border-box;
}
.github-link:hover {
  color: var(--link);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  min-width: 36px;
  height: 30px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover {
  border-color: var(--link);
}

/* ===== Container ===== */
.container {
  max-width: 960px;
  margin: 0 auto;
  /* Reserve space for fixed site-header (min-height 56px + vertical padding). */
  padding: calc(72px + env(safe-area-inset-top, 0px) + 2rem) 24px 2rem;
}

/* Paper pages: shift right to make room for left TOC */
@media (min-width: 1201px) {
  .paper-content {
    position: relative;
  }
}

/* ===== Index Page ===== */
.index-header {
  text-align: center;
  margin-bottom: 0.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--border);
}

.index-header h1 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.index-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

/* Hero meta chips: note count + update-log entry on one row. */
.index-meta-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
}

.index-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.26rem 0.95rem;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.84rem;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}

a.index-chip-link {
  color: var(--link);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

a.index-chip-link:hover {
  color: var(--link-hover);
  border-color: var(--link);
}

.index-chip-arrow {
  font-size: 0.8em;
}

/* ⭐️ legend sits right above the paper list it annotates. */
.index-main .index-legend {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.85;
  text-align: right;
  margin: 0 0 0.35rem;
}

.paper-count {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--text-secondary);
}

.empty-hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
  padding: 0.5rem 1rem;
}

.category-section {
  margin-bottom: 2rem;
}

.category-title {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 110px;
}

.category-title .cat-icon {
  margin-right: 0.4rem;
}

.category-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted, #888);
  margin-top: -0.4rem;
  margin-bottom: 0.8rem;
  font-style: italic;
}

.category-sort-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.8;
  margin: -0.55rem 0 0.75rem;
}

.subcategory-sort-hint {
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.75;
  margin: -0.25rem 0 0.45rem 0.8rem;
}

.subcategory-section {
  margin-bottom: 1.2rem;
}

.subcategory-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--accent, #4a9eff);
  scroll-margin-top: 110px;
}

.toc-sublist {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.2rem;
}

.toc-link-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  padding: 0.1rem 0.4rem;
}

.paper-list {
  list-style: none;
  padding: 0;
}

.paper-list li {
  margin-bottom: 0.4rem;
}

.paper-list-toggle-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0.2rem 0 0.6rem;
  padding: 0.65rem 1rem;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.88rem;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--link);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.paper-list-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.2rem 0 0.6rem;
}

.paper-list-toggle-group .paper-list-toggle-btn {
  flex: 1;
  margin: 0;
}

.paper-list-toggle-btn:hover {
  background: var(--link);
  color: var(--bg);
}

.paper-list.is-folded .paper-list-item-folded {
  display: none;
}

body.index-search-active .paper-list-toggle-group {
  display: none;
}

.paper-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
}

.paper-card:hover {
  border-color: var(--link);
  box-shadow: 0 2px 8px var(--card-shadow);
  color: var(--link);
}

.paper-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.paper-card .paper-title {
  font-weight: 600;
}

.paper-card .paper-published {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.paper-card .paper-opensource {
  flex-shrink: 0;
  line-height: 1;
}

/* ===== Paper Layout with TOC ===== */
.paper-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.paper-body {
  flex: 1;
  min-width: 0;
}

/* ===== TOC Sidebar ===== */
.toc-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  order: -1;
  margin-left: -260px;
  z-index: 10;
}

.toc-wrapper {
  padding: 0.8rem 0;
}

.toc-title {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item {
  margin-bottom: 0.15rem;
}

.toc-item.toc-h3 {
  padding-left: 0.8rem;
}

.toc-link {
  display: block;
  padding: 0.25rem 0.5rem;
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  transition: all 0.15s ease;
}

.toc-link:hover {
  color: var(--link);
  background: var(--bg-secondary);
}

.toc-link.active {
  color: var(--link);
  border-left-color: var(--link);
  font-weight: 600;
  background: var(--bg-secondary);
}

/* ===== Right Sidebar (quick actions) ===== */
.right-sidebar {
  width: 140px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  margin-right: -170px;
  align-self: flex-start;
}

.right-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 0;
}

.right-sidebar-link {
  display: block;
  padding: 0.35rem 0.5rem;
  font-family: 'Arial', sans-serif;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.right-sidebar-link:hover {
  color: var(--link);
  background: var(--bg-secondary);
  border-left-color: var(--link);
}

@media (max-width: 1200px) {
  .right-sidebar {
    display: none;
  }
}

/* TOC: narrower thumb; track stays transparent via global rules above */
.toc-sidebar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.toc-sidebar::-webkit-scrollbar-thumb {
  border-radius: 3px;
}

/* Sidebar Toggle & Overlay */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 20px;
  width: 48px;
  height: 48px;
  background: var(--link);
  color: #fff;
  border-radius: 50%;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.sidebar-toggle:active {
  transform: scale(0.9);
}
.sidebar-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* Sticky left TOC needs ~1440px viewport (960px container + 24px padding +
   260px negative margin). Below that, use the drawer to avoid left-edge clipping. */
@media (max-width: 1439px) {
  .toc-sidebar {
    position: fixed;
    /* Match Robotics_Notebooks mobile drawer: gap below viewport top / notch */
    top: calc(16px + env(safe-area-inset-top, 0px));
    /* Stop above the floating sidebar toggle (24px + 48px) with breathing room */
    bottom: calc(24px + 48px + 28px + env(safe-area-inset-bottom, 0px));
    left: -280px;
    width: 260px;
    height: auto;
    max-height: none;
    background: var(--bg);
    margin: 0;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    border-radius: 0 16px 16px 0;
    z-index: 1300;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    margin-left: 0;
    float: none;
  }
  .toc-sidebar.open {
    left: 0;
  }
  .sidebar-toggle {
    display: flex;
    z-index: 1350;
  }
  .sidebar-overlay {
    z-index: 1250;
  }
}

@media (max-width: 1200px) {
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* fallback for browsers without overflow: clip */
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* Container and paper wrappers must not exceed viewport on mobile,
     otherwise margin: 0 auto centers them within an over-wide document
     and the visible content gets pushed off-screen. */
  .container,
  .paper-content,
  .paper-layout,
  .paper-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .header-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Wider container for paper pages to accommodate TOC (desktop only) */
@media (min-width: 1201px) {
  .paper-content .paper-layout {
    max-width: none;
  }
}

/* ===== Index Layout with TOC ===== */
.index-layout {
  display: block;
  position: relative;
}

.index-main {
  min-width: 0;
}

.index-layout .toc-sidebar {
  position: sticky;
  top: 70px;
  float: left;
  width: 220px;
  margin-left: -260px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

@media (max-width: 1439px) {
  .index-layout .toc-sidebar {
    /* Mirror subpage drawer; desktop float/height must not leak here */
    float: none;
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    bottom: calc(24px + 48px + 28px + env(safe-area-inset-bottom, 0px));
    left: -280px;
    width: 260px;
    height: auto;
    max-height: none;
    margin: 0;
    margin-left: 0;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    border-radius: 0 16px 16px 0;
    z-index: 1300;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
  }
  .index-layout .toc-sidebar.open {
    left: 0;
  }

  body:has(.index-layout) .site-footer {
    margin-top: 0.5rem;
    padding: 10px 0 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  body:has(.index-layout) .category-section:last-child {
    margin-bottom: 1rem;
  }

  body:has(.index-layout) .container {
    padding-bottom: 0.5rem;
  }
}

/* ===== Search Box ===== */
.search-container {
  margin-bottom: 0.4rem;
  position: relative;
}

#paper-search {
  width: 100%;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#paper-search:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(179, 27, 27, 0.1);
}

[data-theme="dark"] #paper-search:focus {
  box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.2);
}

.search-no-results {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ===== Mermaid ===== */
.mermaid-container {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin-bottom: 2rem;
  overflow: hidden;
  text-align: left;
  scroll-margin-top: 110px;
}

.mermaid-title {
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: list-item;
  list-style: none; /* Remove bullet/triangle to match paper cards */
  outline: none;
  scroll-margin-top: 110px;
}

.mermaid-title::-webkit-details-marker {
  display: none; /* Hide arrow in Safari */
}

.mermaid {
  text-align: center;
  margin-top: 0.5rem;
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  contain: inline-size;
  /* iOS 文本自动放大会让 foreignObject 内文字超出 Mermaid 渲染时测量的
     标签宽度，行尾字符被裁掉（如「并行环境」缺「境」）。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Mermaid sometimes injects fixed-width SVGs that can stretch the document
   on mobile Safari. Keep the diagram inside its own horizontal scroller. */
.mermaid svg {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
}

.mermaid:has(svg) {
  cursor: zoom-in;
}

.roadmap-link-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

#roadmap-mermaid svg g.roadmap-node-link {
  cursor: pointer;
}

/* 年份淡化只能用不透明文字色实现，不能用 opacity / filter / transform /
   color-mix(..., transparent) 等会引入 alpha 的属性：WebKit（iOS Safari）
   会为 foreignObject 内元素单独建合成层，绘制时丢失祖先 SVG 的 transform，
   年份会堆叠到图表左上角或在中英文切换后 innerHTML 重插时消失。 */
#roadmap-mermaid .roadmap-node-year,
.mermaid-lightbox__stage .roadmap-node-year {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.2;
}

#roadmap-mermaid svg g.roadmap-node-link:focus {
  outline: none;
}

#roadmap-mermaid svg g.roadmap-node-link:focus-visible > rect,
#roadmap-mermaid svg g.roadmap-node-link:focus-visible > polygon,
#roadmap-mermaid svg g.roadmap-node-link:focus-visible > path {
  stroke: var(--link-color, #4a9eff);
  stroke-width: 2.5px;
}

#roadmap-mermaid svg g.roadmap-node-link:hover > rect,
#roadmap-mermaid svg g.roadmap-node-link:hover > polygon,
#roadmap-mermaid svg g.roadmap-node-link:hover > path,
.mermaid-lightbox__stage svg g.roadmap-node-link:hover > rect,
.mermaid-lightbox__stage svg g.roadmap-node-link:hover > polygon,
.mermaid-lightbox__stage svg g.roadmap-node-link:hover > path {
  filter: brightness(1.12);
  stroke-width: 2.5px;
}

.mermaid-lightbox__stage svg g.roadmap-node-link {
  cursor: pointer;
}

/* ===== Mermaid lightbox (click to enlarge, drag to pan) ===== */
body.mermaid-lightbox-open {
  overflow: hidden;
}

.mermaid-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.mermaid-lightbox[hidden] {
  display: none !important;
}

.mermaid-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.mermaid-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1200px);
  height: min(92vh, 900px);
  margin: auto;
  padding: 0.75rem 1rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1201px) {
  .mermaid-lightbox__panel {
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    padding: 0.6rem 0.85rem 0.85rem;
  }
}

.mermaid-lightbox__close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.mermaid-lightbox__close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.mermaid-lightbox__hint {
  margin: 0 0 0.5rem;
  padding-right: 2rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.mermaid-lightbox__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-secondary);
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.mermaid-lightbox__viewport.is-dragging {
  cursor: grabbing;
}

.mermaid-lightbox__viewport.is-pinching {
  cursor: zoom-in;
}

.mermaid-lightbox__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  will-change: transform;
}

/* Hidden until fitToViewport — prevents one frame at scale(1). */
.mermaid-lightbox__stage.is-preparing {
  visibility: hidden;
}

.mermaid-lightbox__stage .mermaid-lightbox__svg {
  display: block;
  max-width: none !important;
}

[data-theme="dark"] .mermaid {
  background: #1e1e1e;
}

/*
 * Paper Mermaid notes zone subgraphs with `style SUB fill:#pastel,stroke:#…`.
 * Mermaid emits that fill as an inline `style="fill:#… !important"`, so normal
 * CSS cannot recolor the cluster rect. Darken pastel panels slightly and force
 * black subgraph titles in dark mode (inline page + fullscreen lightbox).
 * Match any custom hex fill on the cluster backdrop rect — not a fixed palette.
 */
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) > rect,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) > rect {
  filter: brightness(0.68) saturate(1.05) contrast(1.04);
}

[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label span,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label p,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label text,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label tspan,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label span,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label p,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label text,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label tspan {
  color: #000000 !important;
  fill: #000000 !important;
}

[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label foreignObject,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label foreignObject,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[style*="fill:#"]) .cluster-label foreignObject *,
[data-theme="dark"] :is(.paper-body .mermaid, .mermaid-lightbox__stage) svg g.cluster:has(> rect[fill^="#"]) .cluster-label foreignObject * {
  color: #000000 !important;
  fill: #000000 !important;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.breadcrumb a {
  color: var(--link);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .sep {
  margin: 0 0.5rem;
  color: var(--text-secondary);
}

/* ===== Paper Content ===== */
.paper-body h1,
.paper-body h2,
.paper-body h3,
.paper-body h4,
.paper-body h5,
.paper-body h6 {
  scroll-margin-top: 80px;
}

.paper-body h1 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.paper-body h2 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.paper-body h3 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.paper-body h4, .paper-body h5, .paper-body h6 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
}

/* Parenthetical function names in headings: keep “（`fn`）” on one line */
.paper-body .heading-code-phrase {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.paper-body .heading-code-phrase code {
  display: inline;
  margin: 0;
  vertical-align: baseline;
}

.paper-body p {
  margin-bottom: 1rem;
}

.paper-body a {
  color: var(--link);
  text-decoration: none;
}
.paper-body a:hover {
  text-decoration: underline;
  color: var(--link-hover);
}

/* Lists */
.paper-body ul, .paper-body ol {
  margin-bottom: 1rem;
  padding-left: 1.8rem;
}
.paper-body li {
  margin-bottom: 0.3rem;
}

/* Blockquotes */
.paper-body blockquote {
  border-left: 3px solid var(--blockquote-border);
  background: var(--blockquote-bg);
  padding: 0.8rem 1.2rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
  color: var(--text-secondary);
}
.paper-body blockquote p {
  margin-bottom: 0.3rem;
}

/* Code */
.paper-body code {
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--code-border);
}

.paper-body pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1rem 0;
  line-height: 1.5;
  contain: inline-size;
}

.paper-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
}

/* Tables */
.table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  -webkit-overflow-scrolling: touch;
  contain: inline-size paint;
}

.paper-body table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.92em;
}

.paper-body th, .paper-body td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.8rem;
  text-align: left;
}

.paper-body th {
  background: var(--bg-secondary);
  font-family: 'Arial', sans-serif;
  font-weight: 700;
}

.paper-body tr:nth-child(even) {
  background: var(--table-stripe);
}

/* Images */
.paper-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

/* HR */
.paper-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* KaTeX overrides */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  contain: inline-size;
}

/* Mermaid htmlLabels render math inside SVG foreignObject; inline-size containment collapses width to 0. */
.mermaid foreignObject .katex-display {
  contain: none;
  display: inline-block;
  width: max-content;
  max-width: none;
  padding: 0;
  overflow: visible;
}

/* iOS WebKit:foreignObject 内任何自带合成层的内容（opacity、filter、滚动
   容器、定位偏移）都会丢失祖先 SVG 变换、被画到图表左上角原点。KaTeX 的
   HTML 输出依赖 position:relative 偏移排版，无法整体规避，因此 iOS 上
   Mermaid 公式改走原生 MathML（mermaid-config.js 中 forceLegacyMathML:
   false）。以下为兜底：若意外出现 KaTeX 双输出，隐藏会触发 bug 的 HTML
   部分，并把默认用 absolute+clip 隐藏的 MathML 副本恢复为可见静态排版
   （absolute 定位本身也会触发该 bug）。 */
html.ios :is(.paper-body .mermaid, .mermaid-lightbox__stage) foreignObject .katex-html {
  display: none !important;
}

html.ios :is(.paper-body .mermaid, .mermaid-lightbox__stage) foreignObject .katex-mathml {
  position: static !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  display: inline-block !important;
  max-width: 100%;
}

/* 下方移动端规则会把 .katex-display 变成滚动容器；滚动容器在 WebKit 里
   也是层叠合成层，处于 foreignObject 内同样触发错位，iOS 上保持不可滚动。 */
html.ios .paper-body .mermaid foreignObject .katex-display {
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Mobile Safari: nowrap flex labels + max-content KaTeX can paint outside node boxes. */
@media (max-width: 600px) {
  .paper-body .mermaid {
    contain: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .paper-body .mermaid svg foreignObject {
    overflow: hidden;
  }

  .paper-body .mermaid foreignObject .nodeLabel > div,
  .paper-body .mermaid foreignObject .labelBkg,
  .paper-body .mermaid foreignObject .edgeLabel > div {
    display: block !important;
    width: 100% !important;
    max-width: calc(100vw - 3rem) !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    box-sizing: border-box;
    text-align: center;
  }

  .paper-body .mermaid foreignObject .katex-display {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .paper-body .mermaid foreignObject .katex {
    max-width: 100%;
    font-size: 0.95em;
  }
}

/* iOS WebKit 会把 foreignObject 内的百分比宽度按外层 SVG 视口（而非
   foreignObject 自身）解析，上方媒体查询的 width: 100% 因此把「是/否」
   等短边标签的背景拉成横贯整图的宽条。iOS 改用内在尺寸取宽——
   fit-content 不依赖包含块解析，在解析正确的浏览器上与 100%
   （= 标签实测宽度）结果一致。 */
html.ios .paper-body .mermaid foreignObject .nodeLabel > div,
html.ios .paper-body .mermaid foreignObject .labelBkg,
html.ios .paper-body .mermaid foreignObject .edgeLabel > div {
  width: fit-content !important;
}

/* ===== Paper Nav ===== */
.paper-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.back-link {
  font-family: 'Arial', sans-serif;
  font-size: 0.9rem;
  color: var(--link);
  text-decoration: none;
}
.back-link:hover {
  text-decoration: underline;
}

.prev-link, .next-link {
  font-family: 'Arial', sans-serif;
  font-size: 0.9rem;
  color: var(--link);
  text-decoration: none;
}
.prev-link:hover, .next-link:hover {
  text-decoration: underline;
}

/* ===== Footer ===== */
.site-footer {
  padding: 24px 0 20px;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.footer-text {
  margin: 0;
}

.footer-author-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-author-link:hover {
  color: var(--link);
  border-bottom-color: var(--link);
}

.footer-text-zh {
  display: none;
}

html[data-lang-mode="zh"] .footer-text-en {
  display: none;
}

html[data-lang-mode="zh"] .footer-text-zh {
  display: block;
}

/* ===== Language Toggle ===== */
.lang-toggle {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 0.6rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
  line-height: 1;
  user-select: none;
  min-width: 36px;
  height: 30px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-toggle:hover {
  background: var(--link);
  color: #fff;
  border-color: var(--link);
}

/* ===== Sponsor ===== */
.sponsor-toggle {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  color: #e2566a;
  transition: border-color 0.3s ease, background 0.3s ease;
  user-select: none;
  min-width: 36px;
  height: 30px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sponsor-toggle:hover {
  border-color: #e2566a;
  background: rgba(226, 86, 106, 0.12);
}
.sponsor-icon {
  color: #e2566a;
}

body.sponsor-dialog-open {
  overflow: hidden;
}

.sponsor-dialog {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sponsor-dialog[hidden] {
  display: none;
}

.sponsor-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sponsor-dialog__panel {
  position: relative;
  width: min(100%, 320px);
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 16px 48px var(--card-shadow);
  text-align: center;
}

.sponsor-dialog__title {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.sponsor-dialog__hint {
  font-family: 'Arial', sans-serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.sponsor-dialog__qr {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 1rem;
  border-radius: 12px;
}

.sponsor-dialog__close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.sponsor-dialog__close:hover {
  border-color: var(--link);
  color: var(--link);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .container {
    padding: calc(72px + env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
  }
  .paper-body h1 {
    font-size: 1.4rem;
  }
  .paper-body h2 {
    font-size: 1.15rem;
  }
  .index-header h1 {
    font-size: 1.5rem;
  }
  .header-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0.6rem 0.5rem;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .site-title {
    display: block;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    line-height: 1.25;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
  }
  .header-right {
    flex: 0 0 auto;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-left: auto;
  }
  .github-link {
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .lang-toggle,
  .theme-toggle,
  .sponsor-toggle {
    min-width: 32px;
    height: 30px;
    padding: 0 0.45rem;
  }
  .category-title,
  .subcategory-title,
  .mermaid-title {
    scroll-margin-top: 130px;
  }
  .mermaid-container {
    margin-bottom: 2.8rem;
  }
  .paper-body th, .paper-body td {
    padding: 0.45rem 0.6rem;
    font-size: 0.9em;
  }
}

/* Tablet column gets denser spacing to keep readability. */
@media (max-width: 1200px) and (min-width: 601px) {
  .paper-body th, .paper-body td {
    padding: 0.48rem 0.68rem;
  }
}

/* ===========================
   Rouge Syntax Highlighting — Single Box (table mode)
   =========================== */
/* Block Rouge wrappers only — inline ``code.highlighter-rouge`` in headings must stay inline */
.paper-body div.highlighter-rouge {
  margin: 1.2rem 0;
}

/* ===== Code blocks (rouge colors + custom per-line layout) ===== */
.paper-body div.highlighter-rouge {
  margin: 1.2rem 0;
}

.paper-body .code-block {
  background: #ffffff !important;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 0;
  font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre;
  contain: inline-size;
  /* Grid layout so every row aligns to the same two columns (gutter + cell)
     and the cell track sizes to the widest line. Without this short rows are
     narrower than long rows and scrolling looks like ragged per-line drift. */
  display: grid;
  grid-template-columns: 3rem auto;
  grid-auto-flow: row;
}

[data-theme="dark"] .paper-body .code-block {
  background: #1e1e1e !important;
  border-color: #3c3c3c;
}

@media (prefers-color-scheme: dark) {
  .paper-body .code-block {
    background: #1e1e1e;
    border-color: #3c3c3c;
  }
}

.paper-body .code-row {
  /* Make the row "transparent" so its two children (.code-ln and .code-cell)
     become direct grid items of .code-block. This guarantees every row aligns
     to the same gutter/cell columns regardless of line length. */
  display: contents;
}

.paper-body .code-ln {
  /* Grid column 1 (3rem) handles the width; gutter just paints inside it. */
  text-align: right;
  padding-right: 0.75rem;
  color: #999;
  user-select: none;
  font-size: inherit;
  line-height: inherit;
  /* Keep gutter fixed and opaque even when code scrolls left */
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
}

.paper-body .code-cell {
  /* Grid column 2 (auto) sizes to the widest cell, so every row visually
     shares the same right edge while scrolling. */
  padding-right: 1.5rem;
  white-space: pre;
  word-break: normal;
  font-size: inherit;
  line-height: inherit;
}

/* Dark mode (code-ln) */
[data-theme="dark"] .paper-body .code-ln {
  color: #555;
  background: #1e1e1e;
}

/* ===========================
   Rouge syntax colors — dark mode (Dracula)
   =========================== */
[data-theme="dark"] .highlight .k,  [data-theme="dark"] .highlight .kd { color: #ff79c6; }
[data-theme="dark"] .highlight .nb, [data-theme="dark"] .highlight .nc { color: #bd93f9; }
[data-theme="dark"] .highlight .no, [data-theme="dark"] .highlight .nv { color: #50fa7b; }
[data-theme="dark"] .highlight .s,  [data-theme="dark"] .highlight .s1, [data-theme="dark"] .highlight .s2 { color: #f1fa8c; }
[data-theme="dark"] .highlight .c,  [data-theme="dark"] .highlight .cm, [data-theme="dark"] .highlight .co { color: #6272a4; font-style: italic; }
[data-theme="dark"] .highlight .o,  [data-theme="dark"] .highlight .ow { color: #ff79c6; }
[data-theme="dark"] .highlight .mi, [data-theme="dark"] .highlight .mf { color: #bd93f9; }
[data-theme="dark"] .highlight .nf, [data-theme="dark"] .highlight .fm { color: #50fa7b; }
[data-theme="dark"] .highlight .ne { color: #ffb86c; }
[data-theme="dark"] .highlight .nt { color: #ff79c6; }
[data-theme="dark"] .highlight .vc, [data-theme="dark"] .highlight .vi, [data-theme="dark"] .highlight .vm { color: #50fa7b; }
[data-theme="dark"] .highlight .sr, [data-theme="dark"] .highlight .ss, [data-theme="dark"] .highlight .se, [data-theme="dark"] .highlight .sc { color: #f1fa8c; }
[data-theme="dark"] .highlight .err { color: #ff5555; }
[data-theme="dark"] .highlight .p,  [data-theme="dark"] .highlight .n  { color: #f8f8f2; }

/* Rouge syntax colors — light mode (GitHub) */
:root:not([data-theme="dark"]) .highlight .k,  :root:not([data-theme="dark"]) .highlight .kd { color: #cf222e; }
:root:not([data-theme="dark"]) .highlight .nb, :root:not([data-theme="dark"]) .highlight .nc { color: #8250df; }
:root:not([data-theme="dark"]) .highlight .no, :root:not([data-theme="dark"]) .highlight .nv { color: #953800; }
:root:not([data-theme="dark"]) .highlight .s,  :root:not([data-theme="dark"]) .highlight .s1, :root:not([data-theme="dark"]) .highlight .s2 { color: #0a3069; }
:root:not([data-theme="dark"]) .highlight .c,  :root:not([data-theme="dark"]) .highlight .cm, :root:not([data-theme="dark"]) .highlight .co { color: #6e7781; font-style: italic; }
:root:not([data-theme="dark"]) .highlight .o  { color: #cf222e; }
:root:not([data-theme="dark"]) .highlight .mi, :root:not([data-theme="dark"]) .highlight .mf { color: #8250df; }
:root:not([data-theme="dark"]) .highlight .nf, :root:not([data-theme="dark"]) .highlight .fm { color: #8250df; }
:root:not([data-theme="dark"]) .highlight .ne { color: #953800; }
:root:not([data-theme="dark"]) .highlight .nt { color: #116329; }
:root:not([data-theme="dark"]) .highlight .vc, :root:not([data-theme="dark"]) .highlight .vi, :root:not([data-theme="dark"]) .highlight .vm { color: #953800; }
:root:not([data-theme="dark"]) .highlight .sr, :root:not([data-theme="dark"]) .highlight .ss, :root:not([data-theme="dark"]) .highlight .se, :root:not([data-theme="dark"]) .highlight .sc { color: #0a3069; }
:root:not([data-theme="dark"]) .highlight .err { color: #cf222e; }
:root:not([data-theme="dark"]) .highlight .p,  :root:not([data-theme="dark"]) .highlight .n  { color: #24292f; }

/* ===== Mobile overrides (isolated to reduce future merge conflicts) ===== */
@media (max-width: 1200px) {
  .header-inner {
    /* Title and right group share the same row; the title flexes
       and wraps internally instead of pushing the buttons to a
       second row. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .site-title {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .header-right {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .paper-layout {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .paper-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Do not make the whole column horizontally scrollable — that shows blank
       margin on the right when a child (table/code) is wider than the viewport.
       Tables scroll inside .table-wrapper; code scrolls inside .code-block. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Scroll the whole .code-block (all lines together), not each .code-cell. */
  .paper-body .code-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* ``minmax(0, auto)`` lets the code column scroll inside the block instead
       of expanding the page width (grid default ``auto`` = max-content). */
    grid-template-columns: 3rem minmax(0, auto);
    /* ``contain: paint`` keeps wide tables from inflating the root scroll width on
       iOS Safari (``inline-size`` alone still lets overflow widen the layout
       viewport when the user pinch-zooms out). ``strict`` collapses height. */
    contain: inline-size paint;
  }

  .paper-body .table-wrapper {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    contain: inline-size paint;
  }

  /* Rouge block wrapper only (``div.highlighter-rouge``). Inline ``code.highlighter-rouge``
     in headings must not become ``display: block`` or they break onto their own line. */
  .paper-body div.highlighter-rouge {
    display: block;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    contain: inline-size;
  }

  /* Inline code (in paragraphs/lists/tables): don't shatter identifiers at every
     underscore the way the parent's ``word-break: break-word`` would. Break at
     ``<wbr>`` hints (added by paper.js around / . _ - in long paths) first,
     and only fall back to mid-token breaks when a single token still overflows. */
  .paper-body p code,
  .paper-body li code,
  .paper-body td code,
  .paper-body th code,
  .paper-body h1 code,
  .paper-body h2 code,
  .paper-body h3 code,
  .paper-body h4 code,
  .paper-body h5 code,
  .paper-body h6 code,
  .paper-body blockquote code,
  .paper-body dt code,
  .paper-body dd code {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .paper-body h1 code,
  .paper-body h2 code,
  .paper-body h3 code,
  .paper-body h4 code,
  .paper-body h5 code,
  .paper-body h6 code {
    white-space: nowrap;
  }

  .paper-body h1,
  .paper-body h2,
  .paper-body h3,
  .paper-body p,
  .paper-body li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .paper-content {
    max-width: 100%;
    overflow-x: hidden; /* fallback for older Safari */
    overflow-x: clip;   /* preferred: no scroll container */
  }

  .paper-body .mermaid {
    width: 100%;
    max-width: 100%;
  }

  .paper-body table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
  }

  .paper-body th,
  .paper-body td {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Inline code in tables (e.g. hidden_dims arrays): keep on one line so
     columns stay readable; horizontal scroll on .table-wrapper handles overflow. */
  .paper-body th code,
  .paper-body td code {
    white-space: nowrap;
  }

  /* Key–value style tables (e.g. 基本信息): do not let column 1 shrink to
     awkward wraps; short labels stay on one line when there is room. */
  .paper-body th:first-child,
  .paper-body td:first-child {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ===== Update Log Page (updates.html) ===== */
.updates-page {
  max-width: 860px;
  margin: 0 auto;
}

.updates-header {
  text-align: center;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--border);
}

.updates-header h1 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.updates-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.updates-stats {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0 0 0.8rem;
}

.updates-stats strong {
  color: var(--text);
  font-weight: 700;
}

.updates-stats-sep {
  margin: 0 0.5rem;
  opacity: 0.6;
}

/* GitHub-style activity heatmap. Level colors follow the site accent of each
   theme — dark: VS Code blue ending at --link/--link-hover; light: arXiv red
   ending at --link/--link-hover. Both ramps pass the ordinal checks
   (monotone lightness, adjacent ΔL ≥ 0.06, faintest step ≥ 2:1 vs surface). */
.updates-heatmap {
  --hm-cell-min: 9px; /* cell width floor: below it the container scrolls */
  --hm-gap: 3px;
  --hm-level-0: #2d2d2e;
  --hm-level-1: #1d4f8c;
  --hm-level-2: #2a6cb4;
  --hm-level-3: #569cd6;
  --hm-level-4: #9cdcfe;
  --hm-cell-line: rgba(255, 255, 255, 0.06);
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 14px 10px;
  margin-bottom: 1.6rem;
}

[data-theme="light"] .updates-heatmap {
  --hm-level-0: #ebedf0;
  --hm-level-1: #eba39c;
  --hm-level-2: #d96b60;
  --hm-level-3: #b31b1b;
  --hm-level-4: #8b1515;
  --hm-cell-line: rgba(27, 31, 36, 0.06);
}

.updates-heatmap-scroll {
  overflow-x: auto;
  padding: 2px;
}

/* Fluid width: exactly 53 week columns share the row; on narrow screens cells
   hit the floor, min-width kicks in and the wrapper scrolls (anchored to the
   newest week via scrollLeft). */
.updates-heatmap-inner {
  min-width: max-content;
  max-width: 100%;
}

.updates-heatmap-months {
  display: grid;
  grid-template-columns: repeat(53, minmax(var(--hm-cell-min), 1fr));
  gap: var(--hm-gap);
  margin-left: calc(26px + var(--hm-gap));
  height: 18px;
  font-size: 0.68rem;
  color: var(--text-secondary);
}

/* width:0 keeps labels out of the 1fr track sizing (equal-width fr tracks
   would grow to the widest label); text overflows right from its column. */
.updates-heatmap-months span {
  white-space: nowrap;
  width: 0;
  overflow: visible;
}

.updates-heatmap-body {
  display: flex;
  gap: var(--hm-gap);
}

.updates-heatmap-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  row-gap: var(--hm-gap);
  align-items: center;
  width: 26px;
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.updates-heatmap-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(53, minmax(var(--hm-cell-min), 1fr));
  grid-template-rows: repeat(7, auto);
  gap: var(--hm-gap);
}

.updates-heatmap-cell {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--hm-level-0);
  box-shadow: inset 0 0 0 1px var(--hm-cell-line);
}

.updates-heatmap-cell[data-level="1"] { background: var(--hm-level-1); }
.updates-heatmap-cell[data-level="2"] { background: var(--hm-level-2); }
.updates-heatmap-cell[data-level="3"] { background: var(--hm-level-3); }
.updates-heatmap-cell[data-level="4"] { background: var(--hm-level-4); }

.updates-heatmap-cell.is-pad {
  visibility: hidden;
}

button.updates-heatmap-cell {
  cursor: pointer;
}

button.updates-heatmap-cell:hover,
button.updates-heatmap-cell:focus-visible {
  outline: 1px solid var(--text-secondary);
  outline-offset: 1px;
}

/* Selection ring uses the text color, not the accent: an accent-colored ring
   is hard to tell apart on accent-colored cells. */
button.updates-heatmap-cell.is-active {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.updates-heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--hm-gap);
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.updates-heatmap-legend .updates-heatmap-cell {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.updates-heatmap-legend-hint {
  margin-right: auto;
}

/* ── Timeline ── */
.updates-timeline-title {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  color: var(--text);
  margin: 1.8rem 0 1rem;
}

.updates-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.88rem;
  color: var(--text);
  margin: 0 0 1rem;
}

.updates-clear-filter {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.8rem;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--link);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  cursor: pointer;
}

.updates-clear-filter:hover {
  color: var(--link-hover);
  border-color: var(--link-hover);
}

.updates-timeline-days {
  position: relative;
  padding-left: 18px;
}

.updates-timeline-days::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.updates-day {
  margin-bottom: 1.5rem;
}

.updates-day-date {
  position: relative;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.updates-day-dot {
  position: absolute;
  left: -18px;
  top: 0.42em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--link);
  box-shadow: 0 0 0 3px var(--bg);
}

.updates-day-meta {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.55rem;
}

.updates-day-list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.updates-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.93rem;
  line-height: 1.55;
  padding: 0.12rem 0;
}

.updates-day.is-folded .updates-item-folded {
  display: none;
}

.updates-badge {
  flex: none;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.66rem;
  line-height: 1.5;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  white-space: nowrap;
  transform: translateY(-1px);
}

.updates-badge-added {
  color: var(--link);
  border-color: var(--link);
  background: rgba(86, 156, 214, 0.12);
}

[data-theme="light"] .updates-badge-added {
  background: rgba(179, 27, 27, 0.06);
}

.updates-item-link {
  color: var(--link);
  text-decoration: none;
  min-width: 0;
}

a.updates-item-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.updates-item-opensource {
  flex: none;
  line-height: 1;
}

.updates-item-cat {
  flex: none;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.85;
  white-space: nowrap;
}

.updates-day-more {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.3rem 0.9rem;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.8rem;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--link);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.updates-day-more:hover {
  color: var(--link-hover);
  border-color: var(--link-hover);
}

.updates-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-left: 18px;
}

.updates-timeline-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.updates-timeline-back-to-top {
  margin-left: auto;
}

.updates-timeline-more-days,
.updates-timeline-show-all,
.updates-timeline-collapse,
.updates-timeline-back-to-top {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 0.8rem;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--link);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.updates-timeline-more-days:hover,
.updates-timeline-show-all:hover,
.updates-timeline-collapse:hover,
.updates-timeline-back-to-top:hover {
  color: var(--link-hover);
  border-color: var(--link-hover);
}

@media (max-width: 640px) {
  .updates-timeline-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-left: 0;
    padding-right: 0;
  }
  .updates-timeline-actions-left {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .updates-timeline-more-days,
  .updates-timeline-show-all,
  .updates-timeline-collapse,
  .updates-timeline-back-to-top {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.88rem;
  }
  .updates-timeline-back-to-top {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .updates-header h1 {
    font-size: 1.4rem;
  }
  .updates-item {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }
  .updates-item-cat {
    flex-basis: 100%;
    padding-left: 0;
  }
}