/* ZRDAO OpenSlide —— 主题遵循 frontend/DESIGN.md「The Terminal Curator」
   要点：近黑底 + 矩阵绿功能色、禁用实线分割（用背景色阶）、辉光代替投影、
   正文用 on-surface-variant 而非纯白、圆角不超过 0.75rem。 */

@font-face { font-family: Inter; src: url(fonts/inter-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(fonts/grotesk-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(fonts/grotesk-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #0e0e0e;
  --surface-low: #131313;
  --surface-high: #201f1f;
  --surface-highest: #262626;
  --primary: #9cff93;
  --primary-strong: #00fc40;
  --on-primary: #005a10;
  --on-surface: #ededed;
  --on-surface-variant: #adaaaa;
  --outline: #484847;
  --chrome-h: 3.4rem;

  --sans: Inter, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --display: 'Space Grotesk', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: clamp(15px, 2.05vmin, 22px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ 幻灯片框架 */

#deck { position: relative; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  bottom: var(--chrome-h);
  display: none;
  flex-direction: column;
  padding: 3.2rem clamp(1.6rem, 5vw, 5.5rem) 1.4rem;
  overflow: hidden;
}
.slide.is-active { display: flex; animation: flick 140ms ease-out; }

/* 供 mermaid 量尺寸：保留布局但不可见。不能用 display:none，
   那样 getBBox 会返回 NaN，图会画歪。 */
.slide.is-measuring { display: flex; visibility: hidden; }

@keyframes flick { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide.is-active { animation: none; } }

.slide-head { flex: 0 0 auto; margin-bottom: 1.5rem; }

.slide-num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

.slide-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.3rem, 2.6rem);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
}

.slide-sub { margin: 0.5rem 0 0; color: var(--on-surface-variant); font-size: 0.92rem; }

/* 正文区。估高是启发式的，这里的滚动是兜底，保证任何情况下都不丢内容。 */
.slide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-highest) transparent;
  padding-right: 0.4rem;
}
.slide-body::-webkit-scrollbar { width: 6px; }
.slide-body::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: 3px; }

/* ------------------------------------------------------------ 正文元素 */

.slide-body > :first-child { margin-top: 0; }

p { margin: 0 0 0.95em; color: var(--on-surface-variant); max-width: 76ch; }
strong { color: var(--on-surface); font-weight: 600; }
em { color: var(--on-surface); font-style: italic; }

a { color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(156, 255, 147, 0.28); }
a:hover { border-bottom-color: var(--primary); }

code {
  font-family: var(--display);
  font-size: 0.86em;
  background: var(--surface-highest);
  color: var(--primary);
  padding: 0.08em 0.38em;
  border-radius: 4px;
  word-break: break-all;
}

pre {
  background: var(--surface-low);
  border-radius: 0.5rem;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin: 0 0 1em;
}
pre code { background: none; padding: 0; color: var(--on-surface-variant); word-break: normal; }

h3.blk-h, h4.blk-h {
  font-family: var(--display);
  font-weight: 700;
  color: var(--on-surface);
  margin: 1.5em 0 0.6em;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}
h3.blk-h::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.95em;
  background: var(--primary);
  margin-right: 0.6rem;
  vertical-align: -0.12em;
  border-radius: 1px;
}

ul, ol { margin: 0 0 1em; padding-left: 1.35em; color: var(--on-surface-variant); max-width: 78ch; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--primary); }
ul.nested { margin: 0.4em 0 0.2em; }

blockquote {
  margin: 0 0 1.1em;
  padding: 0.9rem 1.3rem;
  background: var(--surface-low);
  border-radius: 0.5rem;
  color: var(--on-surface-variant);
  max-width: 78ch;
}
blockquote strong { color: var(--primary); }

/* 表格：无实线分割，靠背景色阶与斑马纹区分（DESIGN.md 的 No-Line 规则） */
.tbl-wrap {
  overflow-x: auto;
  margin: 0 0 1.1em;
  border-radius: 0.5rem;
  background: var(--surface-low);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-highest) transparent;
}
.tbl-wrap::-webkit-scrollbar { height: 6px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: 3px; }

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
thead th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--surface-high);
  padding: 0.68rem 0.95rem;
  white-space: nowrap;
  text-align: left;
}
tbody td {
  padding: 0.6rem 0.95rem;
  color: var(--on-surface-variant);
  vertical-align: top;
}
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
tbody td strong { color: var(--on-surface); }

/* ------------------------------------------------------------ 图与图示 */

.fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; height: 100%; justify-content: center; }
.fig img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 0 40px rgba(156, 255, 147, 0.08);
}
.fig figcaption {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  text-align: center;
}

/* 图注要占位置：让图在 flex 里可收缩，否则 max-height:100% 会把图注挤出页面 */
.slide--image .slide-body { display: flex; }
.slide--image .fig { min-height: 0; }
.slide--image .fig img { flex: 0 1 auto; min-height: 0; max-height: 100%; }
/* 图片独占页的图注已经作为页头副标题出现过，不必重复 */
.slide--image .fig figcaption { display: none; }

.slide--diagram .slide-body { display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
.mermaid { width: 100%; height: 100%; display: flex; justify-content: center; }
/* mermaid 会在 svg 上写死内联 max-width，必须覆盖才能铺满；
   svg 自带 viewBox，配合默认的 preserveAspectRatio 即可等比适配。 */
.mermaid svg { max-width: none !important; width: 100%; height: 100%; }

/* 作品志：图文并置 */
.slide--work .slide-body {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: start;
}
.slide--work .fig { height: auto; align-self: start; }
.slide--work .fig img { max-height: 62vh; }
.slide--work .work-text > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .slide--work .slide-body { grid-template-columns: 1fr; }
  .slide--work .fig img { max-height: 34vh; }
}

/* ------------------------------------------------------------ 封面与章节页 */

.slide--cover { justify-content: center; align-items: flex-start; gap: 0.4rem; padding-bottom: 4rem; }
.slide--cover .fig {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
  opacity: 0.22;
  justify-content: center;
}
.slide--cover .fig img { height: 100%; width: 100%; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }
.slide--cover .fig figcaption { display: none; }
.slide--cover > *:not(.fig) { position: relative; z-index: 1; }
.slide--cover p { max-width: 62ch; }
.slide--cover blockquote {
  background: rgba(19, 19, 19, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 64ch;
}
.slide--cover blockquote strong { color: var(--primary); }

.cover-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vmin, 5rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--primary) 0%, var(--primary-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cover-sub {
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vmin, 1.5rem);
  color: var(--on-surface);
  margin: 0 0 2rem;
  letter-spacing: 0.02em;
}
.cover-hint {
  margin: 1.6rem 0 0;
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--outline);
}

.chapter-inner { margin: auto 0; max-width: 90ch; }
.chapter-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5.6vmin, 4.1rem);
  line-height: 1.15;
  margin: 0 0 1.6rem;
  letter-spacing: -0.015em;
  background: linear-gradient(96deg, var(--primary) 0%, var(--primary-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chapter-lead p { font-size: 1.06rem; color: var(--on-surface-variant); max-width: 70ch; }
.chapter-lead strong { color: var(--on-surface); }

/* ------------------------------------------------------------ 底部导航条 */

#chrome {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--chrome-h);
  background: var(--surface-low);
  z-index: 20;
}

#progress { height: 2px; background: var(--surface-highest); }
#progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-strong) 100%);
  transition: width 160ms ease-out;
}

#bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: calc(var(--chrome-h) - 2px);
  padding: 0 clamp(0.9rem, 3vw, 2.2rem);
  font-size: 0.8rem;
}

#bar button, #bar a {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--surface-highest);
  color: var(--primary);
  border: 1px solid rgba(72, 72, 71, 0.2);
  border-radius: 4px;
  padding: 0.38rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
#bar button:hover, #bar a:hover { box-shadow: 0 0 24px rgba(156, 255, 147, 0.18); }

#crumb {
  flex: 1 1 auto;
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#counter { font-family: var(--display); color: var(--on-surface-variant); letter-spacing: 0.08em; white-space: nowrap; }

/* ------------------------------------------------------------ 目录浮层 */

#toc-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(14, 14, 14, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 5vh, 3.5rem);
}
#toc-panel[hidden] { display: none; }

#toc-inner {
  width: min(58rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-low);
  border-radius: 0.75rem;
  padding: 1.4rem clamp(1rem, 3vw, 2.2rem);
  overflow: hidden;
}

#toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
#toc-head strong { font-family: var(--display); letter-spacing: 0.14em; color: var(--primary); }
#toc-close {
  font-family: var(--display);
  background: var(--surface-highest);
  color: var(--on-surface-variant);
  border: 0;
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

#toc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 0.4rem 0 0;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-highest) transparent;
  columns: 2;
  column-gap: 2.2rem;
}
@media (max-width: 760px) { #toc-list { columns: 1; } }

#toc-list li { margin: 0; break-inside: avoid; }
#toc-list a {
  display: block;
  padding: 0.26rem 0.6rem;
  border-radius: 4px;
  border: 0;
  color: var(--on-surface-variant);
  font-size: 0.86rem;
  line-height: 1.5;
}
#toc-list a:hover { background: var(--surface-highest); color: var(--on-surface); }
#toc-list .lv1 a { font-family: var(--display); font-weight: 700; color: var(--on-surface); margin-top: 0.7rem; }
#toc-list .lv2 a { padding-left: 1.5rem; }
#toc-list .lv3 a { padding-left: 2.6rem; font-size: 0.8rem; }
#toc-list a.current { color: var(--primary); background: var(--surface-high); }

#toc-keys { margin: 1rem 0 0; font-size: 0.74rem; color: var(--outline); letter-spacing: 0.04em; }

/* ------------------------------------------------------------ 打印 / 导出 PDF */

@page { size: A4 landscape; margin: 10mm; }

@media print {
  html, body { overflow: visible; height: auto; background: #fff; }
  #chrome, #toc-panel { display: none !important; }
  #deck { height: auto; }
  .slide {
    position: relative;
    inset: auto;
    display: flex !important;
    height: 187mm;
    page-break-after: always;
    break-after: page;
    padding: 8mm 10mm;
    overflow: hidden;
  }
  .slide-body { overflow: visible; }
  .fig img { box-shadow: none; }
}