/* ==========================================================================
   learn.docker.oaiai.ai — 课件站设计系统
   规则：颜色/间距/字号一律走令牌，不在组件里写死；两套主题只换令牌。
   图：不引外部图片、不画 SVG —— 靠排版、色块、边框、动效表现。
   ========================================================================== */

:root {
  /* 配色（深色为默认） */
  --bg: #0a0e14;
  --bg-grid: rgba(120, 160, 200, 0.045);
  --panel: #111823;
  --panel-2: #16202e;
  --line: #24313f;
  --line-soft: #1b2532;
  --fg: #e8eef6;
  --fg-dim: #93a2b4;
  --fg-mute: #64748b;
  --accent: #3ed7c0;
  --accent-soft: rgba(62, 215, 192, 0.14);
  --accent-2: #6aa9ff;
  --accent-2-soft: rgba(106, 169, 255, 0.14);
  --warn: #ffb454;
  --warn-soft: rgba(255, 180, 84, 0.13);
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.13);
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.13);
  --code-bg: #0d1420;      /* 终端块：两套主题都保持深底浅字（终端质感） */
  --code-fg: #cfe3ff;
  --code-inline-bg: #16202e;   /* 行内代码：跟随主题，保证可读 */
  --code-inline-fg: #a9cdf0;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* 字体 */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  /* 尺度 */
  --pad-x: clamp(24px, 5.5vw, 96px);
  --pad-y: clamp(24px, 5vh, 64px);
  --gap: clamp(12px, 1.6vw, 24px);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1180px;
}

html[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-grid: rgba(20, 60, 90, 0.05);
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --line: #d7dee8;
  --line-soft: #e6ebf2;
  --fg: #16202b;
  --fg-dim: #5a6b7d;
  --fg-mute: #8496a8;
  --accent: #0f9e8a;
  --accent-soft: rgba(15, 158, 138, 0.12);
  --accent-2: #2f6fd0;
  --accent-2-soft: rgba(47, 111, 208, 0.12);
  --warn: #b26a00;
  --warn-soft: rgba(178, 106, 0, 0.12);
  --danger: #d33a52;
  --danger-soft: rgba(211, 58, 82, 0.1);
  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, 0.1);
  --code-bg: #101722;
  --code-fg: #d6e6ff;
  --code-inline-bg: #eaeff6;
  --code-inline-fg: #14507a;
  --shadow: 0 18px 44px rgba(20, 40, 70, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* 背景网格：给"工程感"打底，避免大屏发空 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   幻灯片容器
   ========================================================================== */

.deck { position: fixed; inset: 0; z-index: 1; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.995);
  transition: opacity 0.34s ease, transform 0.34s ease, visibility 0.34s;
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.slide > .body { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* 上一页退回的方向感 */
.deck[data-dir="back"] .slide { transform: translateY(-14px) scale(0.995); }
.deck[data-dir="back"] .slide.active { transform: none; }

/* ==========================================================================
   排版
   ========================================================================== */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.14; font-weight: 700; letter-spacing: -0.01em; }

h1 {
  font-size: clamp(38px, 5.6vw, 84px);
  letter-spacing: -0.03em;
}

h2 { font-size: clamp(26px, 3.3vw, 48px); }

h3 { font-size: clamp(17px, 1.5vw, 22px); }

.lede {
  font-size: clamp(15px, 1.45vw, 21px);
  color: var(--fg-dim);
  line-height: 1.7;
  max-width: 62ch;
}

p { margin: 0 0 0.9em; line-height: 1.75; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; line-height: 1.85; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--accent); }

.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.hl { color: var(--accent); font-weight: 600; }
.hl2 { color: var(--accent-2); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.good { color: var(--ok); font-weight: 600; }
.strike { text-decoration: line-through; color: var(--fg-mute); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   布局
   ========================================================================== */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .grid2, .grid3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   组件
   ========================================================================== */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.5vw, 24px);
}

.card.accent { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.card.warnbox { border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); background: var(--warn-soft); }
.card.badbox { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: var(--danger-soft); }
.card.okbox { border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); background: var(--ok-soft); }
.card.soft { background: var(--panel-2); }

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 18px);
  margin-bottom: 10px;
}

.card-head .pill { margin-left: auto; }

.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }

.card-label {
  font-family: var(--mono);
  font-size: clamp(11px, 0.95vw, 13px);
  color: var(--fg-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(11px, 0.85vw, 13px);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--fg-dim);
  white-space: nowrap;
}

.pill.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: var(--accent-soft); }
.pill.good { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); background: var(--ok-soft); }
.pill.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); background: var(--danger-soft); }
.pill.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); background: var(--warn-soft); }

/* --- 代码与终端 ----------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-inline-bg);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--code-inline-fg);
}

pre {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.7;
  overflow-x: auto;
}

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

/* 终端块里的代码继承终端配色（深底浅字），不跟随主题 */
.term pre code { color: inherit; }

.term {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
}

html[data-theme="light"] .term-bar { background: rgba(255, 255, 255, 0.06); }

.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.term-bar .dot.r { background: #ff5f57; }
.term-bar .dot.y { background: #febc2e; }
.term-bar .dot.g { background: #28c840; }
.term-bar .t { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); margin-left: 6px; }

.term pre { padding: 14px 16px; color: var(--code-fg); }

.term pre .c { color: #6b7f96; }          /* 注释 */
.term pre .p { color: var(--accent); }     /* 提示符 */
.term pre .o { color: #9db4cc; }           /* 输出 */

/* 打字机：仅在需要该页时启动。
   延迟按行号阶梯递增，覆盖到 12 行 —— 超过 12 行的终端请拆页（再多就太慢）。 */
.type .line { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.slide.active .type .line { animation: typing 0.42s steps(48, end) forwards; }
.slide.active .type .line:nth-child(1)  { animation-delay: 0.15s; }
.slide.active .type .line:nth-child(2)  { animation-delay: 0.43s; }
.slide.active .type .line:nth-child(3)  { animation-delay: 0.71s; }
.slide.active .type .line:nth-child(4)  { animation-delay: 0.99s; }
.slide.active .type .line:nth-child(5)  { animation-delay: 1.27s; }
.slide.active .type .line:nth-child(6)  { animation-delay: 1.55s; }
.slide.active .type .line:nth-child(7)  { animation-delay: 1.83s; }
.slide.active .type .line:nth-child(8)  { animation-delay: 2.11s; }
.slide.active .type .line:nth-child(9)  { animation-delay: 2.39s; }
.slide.active .type .line:nth-child(10) { animation-delay: 2.67s; }
.slide.active .type .line:nth-child(11) { animation-delay: 2.95s; }
.slide.active .type .line:nth-child(12) { animation-delay: 3.23s; }
@keyframes typing { to { width: 100%; } }

/* 兜底：万一某页内容超高（大段 YAML），整页等比缩小而不是被裁掉 */
.slide.tall .body { font-size: 0.92em; }
.slide.tall .term pre { font-size: clamp(11px, 0.92vw, 13px); }

/* --- 步骤 ----------------------------------------------------------------- */

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }

.steps > li {
  counter-increment: s;
  position: relative;
  padding: 0 0 0 46px;
  margin-bottom: 14px;
}

.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.steps > li::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -14px;
  width: 1px;
  background: var(--line);
}

.steps > li:last-child::after { display: none; }
.steps > li:last-child { margin-bottom: 0; }

/* --- 对比表 / 键值表 ------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-size: clamp(13px, 1.1vw, 16px); }

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
}

th {
  color: var(--fg-dim);
  font-weight: 600;
  font-size: 0.86em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom-color: var(--line);
}

tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }

/* --- 痛点卡（D7 → D8 的桥） ----------------------------------------------- */

.pain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 14px; align-items: center; }
.pain .arrow { color: var(--accent); font-family: var(--mono); }

/* --- 大数字 / 要点块 ------------------------------------------------------ */

.stat { display: flex; align-items: baseline; gap: 10px; }
.stat .n { font-family: var(--mono); font-size: clamp(28px, 3vw, 46px); font-weight: 700; color: var(--accent); line-height: 1; }
.stat .u { color: var(--fg-dim); }

/* --- 概念卡（图标位用字母/符号代替图） ------------------------------------ */

.concept { display: flex; gap: 12px; align-items: flex-start; }

.concept .mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.concept .mark.b { background: var(--accent-2-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line)); }
.concept .mark.y { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.concept .mark.r { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }

/* --- 动效：镜像分层 ------------------------------------------------------- */

.layers { display: flex; flex-direction: column-reverse; gap: 6px; }

.layer {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 14px);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.slide.active .layers .layer { opacity: 1; transform: none; }
.slide.active .layers .layer:nth-child(1) { transition-delay: 0.1s; }
.slide.active .layers .layer:nth-child(2) { transition-delay: 0.28s; }
.slide.active .layers .layer:nth-child(3) { transition-delay: 0.46s; }
.slide.active .layers .layer:nth-child(4) { transition-delay: 0.64s; }
.slide.active .layers .layer:nth-child(5) { transition-delay: 0.82s; }

.layer.w { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }

/* --- 动效：Pod 起落（滚动更新） ------------------------------------------- */

.pods { display: flex; gap: 10px; }

.pod {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  transition: background 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, color 0.4s ease;
}

.pod.new { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pod.old { opacity: 0.35; }

.slide.active .pods .pod.new { background: var(--accent-soft); color: var(--accent); animation: pop 0.5s ease both; }
.slide.active .pods .pod.new:nth-child(2) { animation-delay: 0.35s; }
.slide.active .pods .pod.new:nth-child(3) { animation-delay: 0.7s; }
@keyframes pop { from { transform: scale(0.72); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   页面外壳：顶栏 / 进度 / 页码 / 目录浮层
   ========================================================================== */

.chrome {
  position: fixed;
  z-index: 5;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
}

.topbar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(16px, 3vw, 40px);
  pointer-events: none;
}

.topbar .brand { color: var(--fg-dim); letter-spacing: 0.05em; }
.topbar .brand b { color: var(--accent); }
.topbar .spacer { flex: 1; }

.btn {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: 8px;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line-soft);
  z-index: 6;
}

.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }

.pager {
  bottom: 14px;
  right: clamp(16px, 3vw, 40px);
  display: flex;
  gap: 8px;
  align-items: center;
}

.pager b { color: var(--fg-dim); }
.coursetag { bottom: 14px; left: clamp(16px, 3vw, 40px); }

.hint {
  position: fixed;
  z-index: 6;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  transition: opacity 0.4s ease;
}

.hint.gone { opacity: 0; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  padding: 8vh 8vw;
  overflow-y: auto;
  display: none;
}

.overlay.open { display: block; }
.overlay h3 { margin-bottom: 18px; }

.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }

.toc a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  text-decoration: none;
  background: var(--panel);
  transition: border-color 0.2s, color 0.2s;
}

.toc a:hover { border-color: var(--accent); color: var(--fg); }
.toc a b { font-family: var(--mono); color: var(--accent); font-size: 12px; min-width: 26px; }

/* ==========================================================================
   首页（课程列表）
   ========================================================================== */

.home { position: relative; z-index: 1; padding: clamp(48px, 10vh, 130px) var(--pad-x); }
.home .wrap { max-width: var(--maxw); margin: 0 auto; }

.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); margin-top: 42px; }

.lesson {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.lesson:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.lesson .no { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }
.lesson h3 { margin: 10px 0 8px; }
.lesson p { color: var(--fg-dim); font-size: 14px; margin: 0 0 14px; }
.lesson .meta { display: flex; gap: 8px; flex-wrap: wrap; }

.lesson.todo { opacity: 0.55; pointer-events: none; }

@media print {
  body::before, .chrome, .progress, .hint { display: none !important; }
  .slide { position: static; opacity: 1; visibility: visible; transform: none; page-break-after: always; height: 100vh; }
}