/* 横屏 PPT：1920×1080 画布，按窗口等比缩放。点一下走一步。
   右下角 x>1560、y>720 不放要紧的东西，留给摄像头小窗（按 G 看位置）。
   纸色底放证据，墨色底放结论；红色只给转折和警告，黄色只给要记住的那几个字；海水只出现在冰山上。 */

:root {
  --paper: #efebe3;
  --ink: #121110;
  --mute: #77716a;
  --mute2: #a59f95;
  --line: rgba(18, 17, 16, 0.14);
  --red: #ee4b2b;
  --yellow: #ffd43b;
  --white: #ffffff;
  --sea: #163846;
  --sea2: #21495a;
  --ice: #fbfaf7;
  --ice2: #cddce2;
  --sans: "NSans", "PingFang SC", sans-serif;
  --serif: "NSerif", "Songti SC", serif;
  --mono: "SF Mono", "Menlo", monospace;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0b0a; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.idle, body.idle * { cursor: none !important; }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  background: var(--paper);
}
body.notes #stage { left: calc(var(--k) * 960px + 16px); }
body.capture #stage { left: 0; top: 0; transform: none; }

/* ---------- 页 ---------- */
.slide { position: absolute; inset: 0; display: none; overflow: hidden; }
.slide.cur { display: block; }
.slide.paper { background: var(--paper); color: var(--ink); }
.slide.ink { background: var(--ink); color: var(--white); }
.slide::before {
  /* 纸张的颗粒，静态，不占动画 */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.09 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
.slide.ink::before { opacity: 0.9; mix-blend-mode: screen; filter: invert(1); }
.a { position: absolute; z-index: 2; }

/* 顶上的位置标签 */
.lab { position: absolute; z-index: 2; left: 120px; top: 56px; font: 500 24px/1 var(--mono); letter-spacing: 0.03em; color: var(--mute); white-space: nowrap; }
.ink .lab { color: var(--mute2); }
.lab b { font-weight: 700; color: var(--red); margin-right: 14px; }

/* 字号 */
.mega { font: 900 200px/1 var(--sans); letter-spacing: -0.04em; }
.hero { font: 900 128px/1.1 var(--sans); letter-spacing: -0.03em; }
.big { font: 900 96px/1.15 var(--sans); letter-spacing: -0.02em; }
.mid { font: 900 66px/1.25 var(--sans); letter-spacing: -0.01em; }
.sub { font: 700 46px/1.4 var(--sans); }
.body { font: 600 38px/1.5 var(--sans); }
.meta { font: 500 24px/1.5 var(--mono); color: var(--mute); letter-spacing: 0.01em; }
.ink .meta { color: var(--mute2); }
.quote { font-family: var(--serif); font-weight: 900; }
.nowrap { white-space: nowrap; }
.red { color: var(--red); }
.yel { color: var(--yellow); }
.gry { color: var(--mute); }
.ink .gry { color: #8f8a82; }

/* 荧光笔：.on 后从左扫到右 */
.hl {
  background-image: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.6s var(--out) var(--hd, 0.35s);
}
.on .hl, .hl.on { background-size: 100% 100%; }
.ink .hl, .seaside .hl { background-image: linear-gradient(transparent 62%, rgba(255, 212, 59, 0.42) 62%, rgba(255, 212, 59, 0.42) 92%, transparent 92%); }

/* ---------- 出场方式（加在带 data-in 的元素上） ---------- */
[data-in] { transition: opacity 0.5s var(--out) var(--d, 0s), transform 0.65s var(--out) var(--d, 0s), clip-path 0.7s var(--out) var(--d, 0s); }
.up:not(.on) { opacity: 0; transform: translateY(40px); }
.fade:not(.on) { opacity: 0; }
.left:not(.on) { opacity: 0; transform: translateX(-60px); }
.right:not(.on) { opacity: 0; transform: translateX(60px); }
.pop:not(.on) { opacity: 0; transform: scale(0.55) rotate(var(--rot, 0deg)); }
.pop.on { transform: rotate(var(--rot, 0deg)); transition-timing-function: var(--out), var(--spring), var(--out); }
.slam:not(.on) { opacity: 0; transform: scale(2.2) rotate(var(--rot, 0deg)); }
.slam.on { transform: rotate(var(--rot, 0deg)); transition-duration: 0.18s, 0.28s, 0s; transition-timing-function: ease-out, cubic-bezier(0.2, 0.9, 0.3, 1.25), linear; }
.wipe:not(.on) { clip-path: inset(0 100% 0 0); }
.wipe.on { clip-path: inset(0 0 0 0); }
.rise:not(.on) { opacity: 0; transform: translateY(70px) rotate(var(--rot, 0deg)); }
.rise.on { transform: rotate(var(--rot, 0deg)); }
.chars .c { display: inline-block; white-space: pre; transition: opacity 0.4s var(--out), transform 0.6s var(--out); transition-delay: calc(var(--d, 0s) + var(--i) * 0.022s); }
.chars:not(.on) .c { opacity: 0; transform: translateY(0.5em); }
[data-in].chars { transition: none; }

/* 手画的红圈、红线：path 的长度由脚本写进 --L */
.draw { position: absolute; z-index: 3; overflow: visible; pointer-events: none; }
.draw path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--L, 2000); stroke-dashoffset: var(--L, 2000); transition: stroke-dashoffset 0.55s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0.2s); }
.draw.on path { stroke-dashoffset: 0; }

.strike { position: absolute; left: -14px; right: -14px; top: 52%; height: 12px; margin-top: -6px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0) rotate(-2deg); transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s); box-shadow: 0 0 0 3px rgba(238, 75, 43, 0.15); }
.strike.on { transform: scaleX(1) rotate(-2deg); }

/* 退场、变暗 */
.dim { opacity: 0.3 !important; transition: opacity 0.4s var(--out) !important; }
.away { opacity: 0 !important; transform: translateY(-50px) scale(0.97) !important; pointer-events: none; transition: opacity 0.35s ease-in, transform 0.45s ease-in !important; }

/* 往回翻时瞬间到位 */
#stage.instant *, #stage.instant *::before, #stage.instant *::after { transition: none !important; animation: none !important; }

/* ---------- 部件 ---------- */
.shot { position: absolute; z-index: 2; overflow: hidden; background: #fff; border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); }
.shot img { display: block; width: 100%; }
.real { position: absolute; z-index: 4; font: 600 20px/1 var(--mono); background: var(--ink); color: var(--paper); padding: 9px 12px; white-space: nowrap; letter-spacing: 0.02em; }
.ink .real { background: var(--paper); color: var(--ink); }
.sticker { position: absolute; z-index: 4; background: var(--yellow); color: var(--ink); font: 900 38px/1 var(--sans); padding: 16px 22px; box-shadow: 5px 5px 0 var(--ink); white-space: nowrap; }
.stamp { position: absolute; z-index: 5; border: 7px solid var(--red); color: var(--red); font: 900 64px/1 var(--sans); padding: 18px 26px; white-space: nowrap; letter-spacing: 0.02em; background: rgba(239, 235, 227, 0.86); }
.chip { position: absolute; z-index: 4; background: var(--ice); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font: 800 42px/1 var(--sans); padding: 16px 22px; white-space: nowrap; }
.noun { position: absolute; z-index: 4; font: 600 30px/1 var(--mono); color: var(--ink); border: 2px dashed var(--ink); padding: 10px 14px; white-space: nowrap; background: rgba(239, 235, 227, 0.9); }
.src { position: absolute; z-index: 2; left: 120px; top: 1010px; font: 500 21px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.ink .src { color: var(--mute2); }

/* 聊天气泡 */
.msg { position: absolute; z-index: 4; max-width: 640px; }
.msg .who { font: 500 22px/1 var(--mono); color: var(--mute); margin-bottom: 12px; }
.msg .bub { display: inline-block; background: var(--ink); color: var(--paper); font: 700 38px/1.42 var(--sans); padding: 22px 30px; border-radius: 30px 30px 30px 8px; }
.msg.ai .bub { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); }
.msg.pop { transform-origin: 0 100%; }

/* ---------- 冰山（模板在 index.html，脚本复制到每个 .berg-slot） ---------- */
.berg-slot { position: absolute; inset: 0; z-index: 1; }
.berg { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.berg .sea { fill: var(--sea); }
.berg .ripple { stroke: rgba(255, 255, 255, 0.07); stroke-width: 3; fill: none; }
.berg .tip { fill: var(--ice); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.berg .layer polygon { fill: var(--ice2); stroke: rgba(255, 255, 255, 0.75); stroke-width: 4; stroke-linejoin: round; }
.berg .layer.l2 polygon { fill: #b8cdd6; }
.berg .split { stroke: rgba(22, 56, 70, 0.45); stroke-width: 3; stroke-dasharray: 12 10; }
.berg .mid-split { stroke: rgba(22, 56, 70, 0.32); stroke-width: 3; stroke-dasharray: 10 10; }
.berg .wl { stroke: var(--ink); stroke-width: 4; }
.berg .layer { transform-box: view-box; transition: opacity 0.9s var(--out) var(--d, 0s), transform 1.1s var(--out) var(--d, 0s); }
.berg .layer polygon { transition: fill 0.9s var(--out) var(--d, 0s), stroke 0.9s var(--out) var(--d, 0s); }
.berg .layer:not(.on):not(.ghost) { opacity: 0; transform: translateY(70px); }
/* 还没讲到的那一层：海里一道虚线轮廓，讲到时才亮起来 */
.berg .layer.ghost:not(.on) polygon { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 16 14; }
.berg .gone { display: none; }
.berg .mid-split { transition: opacity 0.6s var(--out) var(--d, 0.3s); }
.berg .mid-split:not(.on) { opacity: 0; }
.dim-static { opacity: 0.32; }

/* 冰山上的字：水面以上用墨色，海里用白色 */
.seaside { color: var(--white); }
.icelab { position: absolute; z-index: 3; color: var(--sea); }
.icelab b { display: block; font: 900 60px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.icelab span { display: block; margin-top: 18px; font: 700 30px/1.55 var(--sans); }
.wlab { position: absolute; z-index: 3; color: var(--white); }
.wlab b { display: block; font: 900 60px/1 var(--sans); }
.wlab span { display: block; margin-top: 16px; font: 600 32px/1.4 var(--sans); color: #c9dbe2; }

/* 摄像头小窗的位置（按 G），不进成片 */
.guides { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 50; }
.guides.on { display: block; }
.guides .cam { position: absolute; left: 1560px; top: 720px; width: 360px; height: 360px; border: 4px dashed #7cf; background: rgba(0, 120, 255, 0.08); display: grid; place-items: center; font: 700 28px/1.4 var(--sans); color: #7cf; text-align: center; }

/* 类名 s1、s2……里的数字是第一版的页码，加页以后不等于现在的页码；新加的页用意思起名（wmdef、lecun……）。 */

/* ---------- 1 开场 ---------- */
.s1 .q1 { left: 120px; top: 270px; }
.s1 .q2 { left: 120px; top: 420px; }
.s1 .me { left: 124px; top: 660px; --rot: -2deg; font-size: 46px; padding: 20px 28px; }

/* ---------- 2 课上讲的，AI 也能讲 ---------- */
.s2 .t1 { left: 120px; top: 150px; }
.s2 .t2 { left: 120px; top: 262px; }
.s2 .q { position: absolute; z-index: 3; top: 480px; background: var(--ink); color: var(--paper); font: 800 52px/1 var(--sans); padding: 26px 32px; }
.s2 .qa { left: 120px; }
.s2 .qb { left: 560px; --d: 0.12s; }
.s2 .sec { left: 1060px; top: 430px; font: 900 190px/1 var(--sans); color: var(--red); letter-spacing: -0.04em; --rot: -3deg; }
.s2 .tail { left: 120px; top: 660px; }
.s2 .concl { left: 120px; top: 800px; }

/* ---------- 3 卖点 ---------- */
.s3 .k { left: 120px; top: 210px; }
.s3 .w { position: absolute; z-index: 2; top: 280px; background: var(--ink); color: var(--paper); font: 900 92px/1 var(--sans); padding: 34px 40px; white-space: nowrap; }
.s3 .w1 { left: 120px; }
.s3 .w2 { left: 600px; }
.s3 .w3 { left: 1080px; }
.s3 .ask { left: 120px; top: 600px; }

/* ---------- 4 我的答案 ---------- */
.s4 .pre { left: 120px; top: 120px; font: 600 40px/1 var(--sans); color: var(--mute2); }
.s4 .l1 { left: 120px; top: 210px; }
.s4 .l2 { left: 120px; top: 440px; font: 800 58px/1 var(--sans); color: #e8e3da; }
.s4 .l3 { left: 120px; top: 560px; }
.s4 .l4 { left: 120px; top: 690px; }

/* ---------- 5 水面上 ---------- */
.s5 .tag { left: 120px; top: 228px; }
.s5 .tag .mid { color: var(--ink); }
.s5 .tag .meta { margin-top: 6px; }
.s5 .c1 { left: 452px; top: 196px; --rot: -3deg; }
.s5 .c2 { left: 1196px; top: 150px; --rot: 2deg; }
.s5 .c3 { left: 1210px; top: 270px; --rot: -1.5deg; }
.s5 .n1 { left: 560px; top: 318px; }
.s5 .n2 { left: 1500px; top: 90px; }
.s5 .n3 { left: 1600px; top: 186px; }
.s5 .n4 { left: 1470px; top: 222px; }
.s5 .n5 { left: 1660px; top: 300px; }
.s5 .stamp { left: 120px; top: 470px; --rot: -3deg; background: transparent; color: #ff6a4a; border-color: #ff6a4a; }
.s5 .why { left: 124px; top: 620px; width: 740px; color: #dfe9ed; font: 700 38px/1.5 var(--sans); }

/* ---------- 6 研究摘要 ---------- */
.s6 .doc { left: 120px; top: 150px; width: 620px; --rot: -2deg; }
.s6 .k { left: 860px; top: 170px; }
.s6 .title { left: 860px; top: 214px; width: 900px; font: 900 56px/1.3 var(--serif); }
.s6 .feel { left: 860px; top: 380px; font: 700 38px/1 var(--sans); color: var(--mute); }
.s6 .ask { left: 860px; top: 470px; }
.s6 .stamp { left: 210px; top: 560px; --rot: -7deg; font-size: 60px; }
.s6 .stamp small { display: block; margin-top: 10px; font: 800 34px/1 var(--sans); }

/* ---------- 7 像样的答案 ---------- */
.s7 .l1 { left: 120px; top: 220px; }
.s7 .l2 { left: 120px; top: 370px; }
.s7 .l3 { left: 120px; top: 620px; color: #e8e3da; }

/* ---------- 8 门票 ---------- */
.s8 .t { left: 120px; top: 150px; }
.s8 .s { left: 120px; top: 290px; color: var(--mute); }
.s8 .ticket { left: 120px; top: 450px; width: 760px; height: 300px; --rot: -3deg; background: var(--ink); color: var(--yellow); display: flex; align-items: center; justify-content: center; gap: 46px; font: 900 170px/1 var(--sans); letter-spacing: 0.04em;
  -webkit-mask: radial-gradient(circle 36px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 36px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.s8 .ticket i { width: 0; height: 200px; border-left: 5px dashed rgba(255, 212, 59, 0.6); }
.s8 .only { left: 960px; top: 540px; }

/* ---------- 9 tutorial 那句话 ---------- */
.s9 .k { left: 120px; top: 150px; }
.s9 .q1 { left: 120px; top: 210px; font: 900 64px/1.4 var(--serif); }
.s9 .q2 { left: 120px; top: 320px; font: 900 64px/1.4 var(--serif); }
.s9 .what { left: 120px; top: 560px; }
.s9 .down { left: 124px; top: 700px; color: var(--red); }

/* ---------- 10 水面下：两种直觉 ---------- */
.s10 .sky { left: 120px; top: 300px; }
.s10 .w { left: 120px; top: 430px; }
.s10 .tech { left: 690px; top: 440px; }
.s10 .prod { left: 1010px; top: 440px; }
.s10 .icelab span { font-size: 29px; }

/* ---------- 11 问问立正：没搭复杂的 RAG ---------- */
.s11 .k { left: 120px; top: 120px; width: 760px; white-space: normal; }
.s11 .num { left: 112px; top: 200px; font: 900 168px/1 var(--sans); letter-spacing: -0.04em; }
.s11 .num small { font-size: 84px; letter-spacing: 0; margin-left: 6px; }
.s11 .shot { left: 960px; top: 150px; width: 820px; --rot: 2deg; }
.s11 .rag { left: 120px; top: 470px; }
.s11 .rag .x { position: relative; display: inline-block; }
.s11 .nope { left: 690px; top: 470px; --rot: 4deg; background: var(--red); color: #fff; }
.s11 .how { left: 120px; top: 640px; display: flex; gap: 20px; align-items: center; }
.s11 .how span { background: #fff; border: 3px solid var(--ink); font: 800 38px/1 var(--sans); padding: 16px 20px; white-space: nowrap; }
.s11 .how em { font: 900 44px/1 var(--sans); font-style: normal; }
.s11 .good { left: 124px; top: 760px; font: 900 52px/1 var(--sans); }

/* ---------- 12 水面上，水面下 ---------- */
.s12 .seaband { position: absolute; z-index: 1; left: 0; right: 0; top: 540px; bottom: 0; background: var(--sea); border-top: 4px solid var(--ink); }
.s12 .k1 { left: 120px; top: 170px; }
.s12 .t1 { left: 120px; top: 230px; }
.s12 .k2 { left: 120px; top: 620px; color: #9fb6bf; }
.s12 .t2 { left: 120px; top: 680px; color: var(--white); }

/* ---------- 13 内存超了 ---------- */
.s13 .t { left: 120px; top: 90px; }
.s13 .k { left: 120px; top: 214px; }
.s13 .chart { left: 120px; top: 310px; width: 1000px; height: 330px; }
.s13 .bar { position: absolute; left: 0; height: 92px; display: flex; align-items: center; padding-left: 26px; font: 800 32px/1 var(--sans); color: #fff; transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0.1s), opacity 0.4s; }
.s13 .bar:not(.on) { transform: scaleX(0); }
.s13 .before { top: 40px; width: 650px; background: var(--red); }
.s13 .after { top: 186px; width: 258px; background: var(--ink); color: var(--yellow); }
.s13 .v { position: absolute; z-index: 3; font: 900 46px/1 var(--sans); white-space: nowrap; }
.s13 .v1 { left: 680px; top: 63px; color: var(--red); }
.s13 .v2 { left: 282px; top: 209px; }
.s13 .limit { position: absolute; left: 640px; top: 0; height: 330px; border-left: 5px dashed var(--ink); }
.s13 .limit span { position: absolute; left: -100px; top: -38px; font: 700 26px/1 var(--mono); white-space: nowrap; }
.s13 .ok { left: 120px; top: 670px; font: 700 34px/1.5 var(--sans); }
.s13 .m1 { left: 1180px; top: 280px; }
.s13 .m2 { left: 1180px; top: 470px; }

/* ---------- 14 “没看过” ---------- */
.s14 .t { left: 120px; top: 80px; position: absolute; z-index: 2; }
.s14 .t .x { position: relative; display: inline-block; }
.s14 .k { left: 120px; top: 206px; color: var(--mute); }
.s14 .chart { left: 120px; top: 270px; width: 960px; height: 440px; }
.s14 .base { position: absolute; left: 0; right: 0; top: 400px; border-top: 4px solid var(--ink); }
.s14 .col { position: absolute; bottom: 40px; width: 170px; background: var(--red); transform-origin: 50% 100%; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s); }
.s14 .col.c1 { left: 20px; height: 7px; }
.s14 .col.c2 { left: 250px; height: 83px; --d: 0.25s; }
.s14 .col.c3 { left: 480px; height: 330px; --d: 0.5s; }
.s14 .chart:not(.on) .col { transform: scaleY(0); }
.s14 .chart .val, .s14 .chart .day, .s14 .chart .d4box { transition: opacity 0.5s var(--out) var(--d2, 0.9s); }
.s14 .chart .v1 { --d2: 0.35s; }
.s14 .chart .v2 { --d2: 0.6s; }
.s14 .chart .v3 { --d2: 0.95s; }
.s14 .chart .d4box { --d2: 1.4s; }
.s14 .chart .day { --d2: 0.1s; }
.s14 .chart:not(.on) .val, .s14 .chart:not(.on) .day, .s14 .chart:not(.on) .d4box { opacity: 0; }
.s14 .val { position: absolute; z-index: 3; width: 170px; text-align: center; font: 900 44px/1 var(--sans); }
.s14 .val.v1 { left: 20px; top: 338px; }
.s14 .val.v2 { left: 250px; top: 262px; }
.s14 .val.v3 { left: 480px; top: 14px; }
.s14 .day { position: absolute; top: 418px; width: 170px; text-align: center; font: 600 24px/1 var(--mono); color: var(--mute); }
.s14 .d1 { left: 20px; }
.s14 .d2 { left: 250px; }
.s14 .d3 { left: 480px; }
.s14 .d4box { position: absolute; left: 700px; top: 150px; width: 260px; color: var(--red); }
.s14 .d4box b { display: block; font: 900 44px/1.2 var(--sans); }
.s14 .d4box span { display: block; margin-top: 12px; font: 700 30px/1.45 var(--sans); }
.s14 .fast { left: 1180px; top: 270px; background: #fff; border: 3px dashed var(--ink); font: 800 40px/1 var(--sans); padding: 20px 24px; white-space: nowrap; }
.s14 .m { left: 1180px; top: 400px; }
.s14 .no { left: 1184px; top: 580px; font: 900 76px/1 var(--sans); color: var(--red); }

/* ---------- 15 换了一个问题 ---------- */
.s15 .l1 { left: 120px; top: 220px; }
.s15 .l2 { left: 120px; top: 370px; }
.s15 .l3 { left: 120px; top: 620px; color: #e8e3da; }

/* ---------- 16 判断从哪来 ---------- */
.s16 .q1, .s18 .q1 { left: 120px; top: 90px; }
.s16 .q2, .s18 .q2 { left: 120px; top: 214px; font: 700 38px/1.45 var(--sans); width: 680px; color: var(--mute); }
.s16 .tech, .s18 .tech { left: 690px; top: 440px; }
.s16 .prod, .s18 .prod { left: 1010px; top: 440px; }
.s16 .w2, .s18 .w2 { left: 120px; top: 760px; }
.s16 .wm, .s18 .wm { left: 590px; top: 760px; }
.s18 .craft { left: 1010px; top: 760px; }
.s16 .icelab span, .s18 .icelab span { font-size: 29px; }

/* ---------- 17 预测打分 ---------- */
.s17 .t { left: 120px; top: 80px; }
.s17 .s { left: 120px; top: 196px; color: var(--mute); }
.s17 .k { left: 120px; top: 230px; }
.s17 .bets { left: 120px; top: 272px; width: 1360px; }
.s17 .bets > div { display: grid; grid-template-columns: 56px 1fr 110px 300px; align-items: center; height: 62px; border-bottom: 2px solid var(--line); font: 700 32px/1 var(--sans); }
.s17 .bets i { font: 700 26px/1 var(--mono); font-style: normal; color: var(--mute); }
.s17 .bets em { font: 700 32px/1 var(--mono); font-style: normal; text-align: right; padding-right: 26px; }
.s17 .bets .out { font: 900 32px/1 var(--sans); }
.s17 .out.yes::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 14px; background: var(--ink); }
.s17 .out.part { color: var(--mute); }
.s17 .out.no { color: var(--red); }
.s17 .foot { left: 120px; top: 700px; }
.s17 .foot .mid { display: block; font-size: 56px; }
.s17 .foot .sub2 { display: block; margin-top: 10px; font: 700 34px/1.4 var(--sans); color: var(--mute); }

/* ---------- 19 鸭哥一眼 ---------- */
.s19 .t1 { left: 120px; top: 100px; }
.s19 .t2 { left: 120px; top: 190px; }
.s19 .yr { left: 124px; top: 400px; font: 900 52px/1 var(--sans); }
.s19 .num { left: 110px; top: 470px; }
.s19 .how { left: 124px; top: 690px; font: 700 34px/1.4 var(--sans); color: var(--mute); }
.s19 .qt { left: 1060px; top: 400px; font: 900 44px/1.3 var(--serif); }
.s19 .qt small { display: block; margin-top: 10px; font: 500 22px/1 var(--mono); color: var(--mute); }
.s19 .ccjj { left: 1056px; top: 520px; font: 900 128px/1 var(--sans); letter-spacing: -0.02em; }
.s19 .ccjj-s { left: 1060px; top: 670px; width: 480px; font: 700 32px/1.45 var(--sans); }

/* ---------- 20 《真本事》 ---------- */
.s20 .k { left: 120px; top: 90px; }
.s20 .col { position: absolute; z-index: 2; top: 150px; }
.s20 .col1 { left: 120px; }
.s20 .col2 { left: 1000px; }
.s20 .col .mid { color: var(--mute); }
.s20 .col .big { margin-top: 10px; }
.s20 .band { position: absolute; z-index: 1; left: 0; width: 1520px; top: 620px; height: 260px; background: var(--sea); border-top: 4px solid var(--ink); }
.s20 .above { left: 120px; top: 450px; }
.s20 .below { left: 120px; top: 660px; color: #fff; }
.s20 .above b, .s20 .below b { font: 900 46px/1.3 var(--sans); }
.s20 .above span, .s20 .below span { display: block; font: 700 36px/1.5 var(--sans); }
.s20 .below span { color: #c9dbe2; }

/* ---------- 21 游泳 ---------- */
.s21 .l1 { left: 120px; top: 150px; }
.s21 .l2 { left: 120px; top: 360px; color: #e8e3da; }
.s21 .l3 { left: 120px; top: 440px; color: #e8e3da; }
.s21 .l4 { left: 120px; top: 640px; color: var(--yellow); }

/* ---------- 22 中间隔着一股劲 ---------- */
.s22 .l1 { left: 120px; top: 130px; }
.s22 .l2 { left: 120px; top: 250px; }
.s22 .know { left: 120px; top: 600px; }
.s22 .do { left: 1220px; top: 600px; }
.s22 .gap { left: 430px; top: 642px; width: 760px; border-top: 6px dashed rgba(255, 255, 255, 0.35); }
.s22 .jin { left: 690px; top: 470px; font: 900 230px/1 var(--sans); color: var(--yellow); }

/* ---------- 23 劲往哪漏 ---------- */
.s23 .t { left: 120px; top: 80px; }
.s23 .h { position: absolute; z-index: 2; top: 230px; display: flex; align-items: baseline; gap: 18px; }
.s23 .h i { font: 900 44px/1 var(--mono); font-style: normal; color: var(--red); }
.s23 .h1 { left: 120px; }
.s23 .h2 { left: 1000px; }
.s23 .a1 { left: 120px; top: 340px; width: 780px; font: 700 40px/1.45 var(--sans); }
.s23 .qt { left: 120px; top: 500px; width: 800px; font: 900 40px/1.5 var(--serif); }
.s23 .qsrc { left: 120px; top: 760px; }
.s23 .a2 { left: 1000px; top: 340px; width: 540px; }
.s23 .a2 b { display: block; font: 900 52px/1.3 var(--sans); }
.s23 .a2 span { display: block; margin-top: 16px; font: 700 32px/1.55 var(--sans); color: var(--mute); }
.s23 .spin { left: 1000px; top: 600px; display: flex; align-items: center; gap: 22px; font: 900 44px/1.2 var(--sans); color: var(--red); }
.s23 .spin i { display: inline-block; width: 64px; height: 64px; border: 8px solid var(--red); border-right-color: transparent; border-radius: 50%; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 24 识字助手 ---------- */
.s24 .t { left: 120px; top: 80px; }
.s24 .s { left: 120px; top: 196px; color: var(--mute); }
.s24 .k { left: 120px; top: 300px; }
.s24 .row { position: absolute; z-index: 2; left: 120px; width: 1680px; height: 80px; display: grid; grid-template-columns: 420px 1fr; align-items: center; }
.s24 .row p { font: 800 32px/1.3 var(--sans); padding-right: 20px; }
.s24 .row p b { font-family: var(--mono); margin-right: 14px; color: var(--mute); }
.s24 .row div { display: flex; align-items: center; }
.s24 .row .bar { height: 60px; display: block; flex: none; transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0.15s); }
.s24 .row:not(.on) .bar { transform: scaleX(0); }
.s24 .row p, .s24 .row em { transition: opacity 0.5s var(--out) var(--d3, 0s); }
.s24 .row em { --d3: 0.8s; }
.s24 .row:not(.on) p, .s24 .row:not(.on) em { opacity: 0; }
.s24 .row em { display: inline-block; vertical-align: middle; margin-left: 20px; font: 900 40px/1 var(--sans); font-style: normal; }
.s24 .r1 { top: 390px; }
.s24 .r1 .bar { width: 1050px; background: var(--red); }
.s24 .r2 { top: 510px; }
.s24 .r2 .bar { width: 257px; background: #c9776a; }
.s24 .r3 { top: 630px; }
.s24 .r3 .bar { width: 66px; background: var(--ink); }
.s24 .r3 em { color: var(--ink); }
.s24 .r3 em span { background: var(--yellow); padding: 4px 10px; }
.s24 .line3 { left: 619px; top: 372px; height: 400px; border-left: 5px solid var(--red); }
.s24 .line3 span { position: absolute; left: 16px; bottom: 0; font: 800 26px/1 var(--sans); color: var(--red); white-space: nowrap; }

/* ---------- 25 用来扔的 ---------- */
.s25 .l1 { left: 120px; top: 150px; }
.s25 .l2 { left: 120px; top: 290px; }
.s25 .l3 { left: 120px; top: 450px; font: 700 42px/1 var(--sans); color: var(--mute2); }
.s25 .l4 { left: 120px; top: 600px; }
.s25 .l5 { left: 120px; top: 700px; }

/* ---------- 26 具体 ---------- */
.s26 .l1 { left: 120px; top: 90px; }
.s26 .l2 { left: 120px; top: 200px; }
.s26 .k { left: 120px; top: 330px; }
.s26 .bigjob { left: 120px; top: 420px; width: 540px; height: 220px; background: var(--ink); color: var(--paper); font: 900 64px/220px var(--sans); text-align: center; }
.s26 .cut { left: 640px; top: 396px; height: 270px; border-left: 6px dashed var(--red); }
.s26 .piece { left: 760px; top: 470px; background: var(--yellow); color: var(--ink); font: 900 40px/1.25 var(--sans); padding: 24px 28px; box-shadow: 7px 7px 0 var(--ink); --rot: 2deg; }
.s26 .ship { left: 1180px; top: 500px; font: 900 56px/1.2 var(--sans); }
.s26 .qt { left: 120px; top: 720px; font: 900 44px/1.45 var(--serif); }
.s26 .qsrc { left: 120px; top: 870px; }

/* ---------- 27 旁边有人 ---------- */
.s27 .l1 { left: 120px; top: 90px; color: var(--mute); }
.s27 .l2 { left: 120px; top: 180px; }
.s27 .paths { left: 120px; top: 380px; width: 1360px; height: 400px; }
.s27 .paths path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--L, 4000); stroke-dashoffset: var(--L, 4000); transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0.1s); }
.s27 .paths path.on { stroke-dashoffset: 0; }
.s27 .paths .alone { stroke: var(--mute2); stroke-width: 6; }
.s27 .paths .guided { stroke: var(--ink); stroke-width: 12; --d: 0.1s; }
.s27 .paths circle { fill: var(--ink); }
.s27 .pl1 { left: 1160px; top: 380px; font: 700 30px/1.4 var(--sans); color: var(--mute); }
.s27 .pl2 { left: 1160px; top: 670px; font: 900 34px/1.4 var(--sans); }
.s27 .pl2 span { background: var(--yellow); padding: 2px 8px; }
.s27 .rule { left: 120px; top: 810px; }

/* ---------- 28 点评 ---------- */
.s28 .q { left: 120px; top: 90px; }
.s28 .k { left: 120px; top: 240px; }
.s28 .qt { left: 120px; top: 290px; width: 1400px; font: 900 50px/1.6 var(--serif); }
.s28 .qsrc { left: 120px; top: 640px; }

/* ---------- 29 三件事 ---------- */
.s29 .it { position: absolute; z-index: 2; left: 120px; display: grid; grid-template-columns: 180px 1fr; align-items: start; }
.s29 .it .n { font: 900 170px/0.85 var(--sans); color: transparent; -webkit-text-stroke: 4px var(--ink); }
.s29 .it b { display: block; font: 900 62px/1.15 var(--sans); white-space: nowrap; }
.s29 .it span { display: block; margin-top: 14px; font: 700 34px/1.4 var(--sans); color: var(--mute); }
.s29 .q { left: 120px; top: 80px; }
.s29 .i1 { top: 230px; }
.s29 .i2 { top: 420px; }
.s29 .i3 { top: 610px; }
.s29 .ours { left: 120px; top: 830px; width: 1360px; background: var(--ink); color: var(--paper); font: 800 38px/1 var(--sans); padding: 32px 36px; white-space: nowrap; }
.s29 .ours em { font-style: normal; color: var(--yellow); }

/* ---------- 30 检验标准 ---------- */
.s30 .pre { left: 120px; top: 120px; font: 800 52px/1.2 var(--sans); color: #e8e3da; }
.s30 .ck { position: absolute; z-index: 2; left: 120px; display: flex; align-items: center; gap: 34px; font: 900 58px/1.2 var(--sans); white-space: nowrap; }
.s30 .ck i { flex: none; width: 64px; height: 64px; border: 6px solid var(--white); }
.s30 .c1 { top: 300px; }
.s30 .c2 { top: 430px; }
.s30 .fail { left: 120px; top: 620px; font: 900 76px/1.2 var(--sans); color: var(--red); }

/* ---------- 31 AI 的判断也越来越好 ---------- */
.s31 .q { left: 120px; top: 130px; font: 900 70px/1.3 var(--serif); }
.s31 .yes { left: 120px; top: 260px; color: var(--mute); }
.s31 .l1 { left: 120px; top: 420px; }
.s31 .l2 { left: 120px; top: 540px; }
.s31 .tail { left: 120px; top: 720px; font: 700 38px/1.5 var(--sans); color: var(--mute); }

/* ---------- 32 谁不用上课 ---------- */
.s32 .t { left: 120px; top: 110px; font-size: 80px; }
.s32 .li { position: absolute; z-index: 2; left: 120px; display: flex; align-items: center; gap: 24px; font: 800 52px/1 var(--sans); }
.s32 .li i { font: 900 52px/1 var(--sans); font-style: normal; }
.s32 .li1 { top: 290px; }
.s32 .li2 { top: 380px; }
.s32 .li3 { top: 470px; }
.s32 .also { left: 120px; top: 640px; color: var(--red); }

/* ---------- 33 回到开头 ---------- */
.s33 .q1 { left: 120px; top: 180px; }
.s33 .q2 { left: 120px; top: 330px; }
.s33 .l3 { left: 120px; top: 600px; color: #e8e3da; }

/* ---------- 34 整座冰山 ---------- */
.s34 .h { left: 120px; top: 100px; }
.s34 .h2 { left: 120px; top: 196px; font: 700 34px/1.5 var(--sans); color: var(--ink); width: 660px; }
.s34 .ans { left: 1190px; top: 180px; --rot: 2deg; }
.s34 .ans small { display: block; margin-top: 10px; font: 700 26px/1 var(--sans); color: var(--mute); }
.s34 .judg { left: 715px; top: 430px; text-align: center; width: 500px; }
.s34 .judg b { font-size: 110px; }
.s34 .deep { left: 640px; top: 830px; width: 680px; text-align: center; }
.s34 .deep b { font-size: 52px; }
.s34 .arrow { left: 360px; top: 420px; width: 40px; height: 580px; }
.s34 .arrow i { position: absolute; left: 12px; top: 0; bottom: 34px; width: 16px; background: var(--yellow); transform-origin: 50% 0; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s); }
.s34 .arrow em { position: absolute; left: -10px; bottom: 0; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 46px solid var(--yellow); transition: opacity 0.3s var(--d, 0s); }
.s34 .arrow:not(.on) i { transform: scaleY(0); }
.s34 .arrow:not(.on) em { opacity: 0; }
.s34 .jin { left: 120px; top: 560px; font: 900 170px/1 var(--sans); color: var(--yellow); }
.s34 .jin-s { left: 124px; top: 750px; font: 700 34px/1.4 var(--sans); color: #e7eef1; }

/* ---------- 世界模型是什么（Jim Fan） ---------- */
.wmdef .jf { left: 120px; top: 150px; width: 700px; --rot: -1.5deg; }
.wmdef .k { left: 900px; top: 150px; }
.wmdef .def { left: 900px; top: 196px; font: 900 72px/1.25 var(--sans); }
.wmdef .add { left: 900px; top: 410px; width: 700px; }
.wmdef .add .meta { display: block; margin-bottom: 10px; }
.wmdef .add b { display: block; font: 900 40px/1.3 var(--sans); }
.wmdef .add .sm { display: block; margin-top: 12px; font: 700 28px/1.5 var(--sans); color: var(--mute); }
.wmdef .ex { left: 900px; background: var(--ink); color: var(--paper); font: 800 30px/1.4 var(--sans); padding: 18px 24px; white-space: nowrap; }
.wmdef .ex1 { top: 590px; }
.wmdef .ex2 { top: 690px; }

/* ---------- “没看过”背后的模型 ---------- */
.wmex .t { left: 120px; top: 90px; }
.wmex .q { left: 120px; top: 210px; color: var(--mute); }
.wmex .why { left: 120px; top: 310px; width: 1300px; }
.wmex .eq { left: 120px; top: 400px; display: flex; align-items: center; gap: 24px; }
.wmex .eq .box { background: var(--ink); color: var(--paper); font: 900 64px/1 var(--sans); padding: 22px 30px; }
.wmex .eq i { font: 900 64px/1 var(--sans); font-style: normal; }
.wmex .cells { left: 120px; top: 600px; width: 780px; height: 270px; display: grid; gap: 4px; }
.wmex .cells i { background: var(--red); opacity: 0.85; }
.wmex .cells.wipe { transition: clip-path 1.4s cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0s); }
.wmex .more { left: 980px; top: 600px; }
.wmex .more b { display: block; font: 900 46px/1.3 var(--sans); }
.wmex .more span { display: block; margin-top: 8px; font: 900 46px/1.3 var(--sans); color: var(--red); }
.wmex .fix { left: 980px; top: 790px; font: 900 44px/1.3 var(--sans); }

/* ---------- LeCun：长的是世界模型 ---------- */
.lecun .jl { left: 120px; top: 110px; width: 900px; --rot: -1deg; }
.lecun .k { left: 120px; top: 470px; }
.lecun .zh { left: 120px; top: 520px; width: 1400px; font: 900 46px/1.5 var(--serif); }
.lecun .want { left: 120px; top: 740px; display: flex; align-items: center; gap: 26px; font: 800 44px/1 var(--sans); white-space: nowrap; }
.lecun .want .x { position: relative; color: var(--mute); }
.lecun .want b { background: var(--yellow); padding: 12px 18px; font-weight: 900; }

/* ---------- 怎么长：做预测 ---------- */
.predict .t { left: 120px; top: 100px; }
.predict .loop { left: 120px; top: 280px; display: flex; align-items: center; gap: 22px; }
.predict .loop span { border: 3px solid var(--ink); background: #fff; font: 900 48px/1 var(--sans); padding: 20px 26px; box-shadow: 6px 6px 0 var(--ink); }
.predict .loop .end { background: var(--yellow); }
.predict .loop i { font: 900 48px/1 var(--sans); font-style: normal; }
.predict .form { left: 120px; top: 460px; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.predict .form .lead { font: 800 40px/1 var(--sans); }
.predict .form .c { border: 3px dashed var(--ink); font: 800 36px/1 var(--sans); padding: 14px 18px; }
.predict .note { left: 120px; top: 570px; color: var(--mute); }
.predict .band { left: 120px; top: 700px; width: 1360px; background: var(--ink); color: var(--paper); font: 900 50px/1 var(--sans); padding: 36px 40px; }
.predict .band em { font-style: normal; color: var(--yellow); }

/* ---------- 鸭哥也是这么做的 ---------- */
.yanexp .t { left: 120px; top: 80px; }
.yanexp .card { left: 120px; top: 210px; width: 1360px; background: #fff; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 28px 34px; }
.yanexp .card p { margin-top: 14px; font: 800 34px/1.45 var(--sans); }
.yanexp .card q { display: block; margin-top: 14px; font: 900 34px/1.5 var(--serif); color: var(--mute); quotes: none; }
.yanexp .card .then { margin-top: 18px; display: flex; gap: 16px; flex-wrap: wrap; }
.yanexp .card .then span { background: var(--yellow); font: 800 28px/1 var(--sans); padding: 12px 16px; }
.yanexp .band { left: 120px; top: 610px; width: 1360px; background: var(--ink); color: var(--paper); font: 800 34px/1.45 var(--sans); padding: 24px 32px; }
.yanexp .band em { display: block; margin-top: 6px; font-style: normal; font-weight: 900; color: var(--yellow); }
.yanexp .flow { left: 120px; top: 810px; display: flex; align-items: center; gap: 16px; }
.yanexp .flow span { border: 3px solid var(--ink); background: #fff; font: 800 30px/1 var(--sans); padding: 14px 16px; white-space: nowrap; }
.yanexp .flow .end { background: var(--yellow); }
.yanexp .flow i { font: 900 34px/1 var(--sans); font-style: normal; }

/* ---------- 鸭哥这么厉害，那我怎么学 ---------- */
.howlearn .t { left: 120px; top: 80px; }
.howlearn .qt { left: 120px; top: 220px; width: 1400px; font: 900 40px/1.6 var(--serif); }
.howlearn .qsrc { left: 120px; top: 372px; }
.howlearn .half { top: 450px; width: 640px; }
.howlearn .h1 { left: 120px; }
.howlearn .h2 { left: 900px; }
.howlearn .half b { display: block; font: 900 56px/1.1 var(--sans); }
.howlearn .half > span { display: block; margin-top: 12px; font: 800 38px/1.3 var(--sans); }
.howlearn .chips { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.howlearn .chips em { font-style: normal; background: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font: 800 30px/1 var(--sans); padding: 12px 16px; }
.howlearn .half .sm { margin-top: 20px; font: 700 30px/1.4 var(--sans); color: var(--mute); }
.howlearn .half ul { margin-top: 18px; list-style: none; }
.howlearn .half li { position: relative; margin-bottom: 10px; padding-left: 30px; font: 700 32px/1.45 var(--sans); }
.howlearn .half li::before { content: ""; position: absolute; left: 0; top: 17px; width: 14px; height: 14px; background: var(--ink); }

/* 链接：点开出处。点链接不翻页（deck.js）；虚线下划线，录屏时不抢眼 */
#stage a { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: pointer; }
#stage a:hover { color: var(--red); }
#stage .chips a, #stage .real a { text-decoration: none; }
#stage .chips a { display: block; }
#stage .chips em { display: inline-block; }
#stage .chips a:hover em { background: var(--yellow); }
#stage .ours a { color: var(--yellow); }

/* ---------- 讲稿（按 N）：右边的提词器，录屏时裁掉 ---------- */
#notes { position: fixed; top: 0; bottom: 0; right: 0; display: none; flex-direction: column; padding: 22px 30px 18px; background: #161513; color: #f1ede6; font-family: var(--sans); }
body.notes #notes { display: flex; }
#notes .top { display: flex; justify-content: space-between; font: 500 14px/1 var(--mono); color: #9b958b; padding-bottom: 14px; border-bottom: 1px solid #2c2a27; }
#notes .tp { flex: 1; overflow-y: auto; padding: 32vh 6px 55vh 0; scrollbar-width: none; }
#notes .tp::-webkit-scrollbar { display: none; }
#notes .part { margin: 34px 0 4px; font: 700 13px/1 var(--mono); letter-spacing: 0.12em; color: var(--red); }
#notes .pg { margin: 20px 0 6px; font: 500 12px/1 var(--mono); color: #6f6a62; }
#notes .ln { margin: 6px 0; padding: 4px 0 4px 16px; border-left: 4px solid transparent; font: 500 20px/1.5 var(--sans); color: #8f897f; transition: color 0.2s, font-size 0.2s; }
#notes .ln.past { color: #4c4843; }
#notes .ln.next { color: #d6d0c6; }
#notes .ln.cur { font-size: 30px; font-weight: 700; line-height: 1.45; color: #fff; border-left-color: var(--yellow); }
#notes .keys { padding-top: 12px; border-top: 1px solid #2c2a27; font: 500 12px/1.6 var(--mono); color: #6f6a62; }
#toast { position: fixed; left: 16px; bottom: 16px; z-index: 100; background: rgba(0, 0, 0, 0.78); color: #fff; padding: 10px 16px; border-radius: 6px; font: 500 14px/1.4 var(--sans); transition: opacity 0.6s; }
body.capture #notes, body.capture #toast { display: none !important; }