/* 刘润直播间《假工作的终结》：1920×1080 画布，按窗口等比缩放。点一下走一步。
   直播多在手机上看，正文不小于 44px，每页只放标题、图、数字和关键词，要说的话在讲稿里。
   右下角 x>1560、y>720 不放要紧的东西，留给摄像头小窗（按 G 看位置）。
   纸色底放证据，墨色底放结论；红色只给转折和警告，黄色只给要记住的那几个字；海水只出现在冰山上。
   基础部分（页、字号、出场方式、部件、冰山）沿用《AI都会教你了，为什么还要上课？》那套课件。 */

: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; }


/* ---------- 这套课件新加的通用部件 ---------- */
/* 右上角：这一页的说法出自《真本事》哪一章 */
.bk { position: absolute; z-index: 3; right: 120px; top: 46px; font: 800 26px/1 var(--serif); color: var(--ink); background: rgba(255, 255, 255, 0.6); padding: 12px 18px 12px 20px; border-left: 8px solid var(--red); white-space: nowrap; }
.ink .bk { color: var(--paper); background: rgba(255, 255, 255, 0.08); }
/* 段落里的小标题（第一步：爆炸 / ① 能力……） */
.tag { position: absolute; z-index: 2; left: 120px; top: 126px; font: 900 56px/1 var(--sans); color: var(--red); white-space: nowrap; }
/* 一条墨色横幅放结论；墨色页上反过来用纸色 */
.band { position: absolute; z-index: 2; left: 120px; background: var(--ink); color: var(--paper); padding: 32px 40px; }
.ink .band { background: var(--paper); color: var(--ink); }
.lab { top: 52px; }

/* ---------- 1 封面 ---------- */
.cover .venue { left: 120px; top: 150px; font: 700 34px/1 var(--sans); color: var(--mute2); letter-spacing: 0.04em; }
.cover .t { left: 110px; top: 250px; }
.cover .s { left: 120px; top: 520px; color: #e8e3da; }
.cover .by { left: 120px; top: 680px; font: 700 40px/1 var(--sans); color: var(--mute2); }
.cover .book { left: 1300px; top: 120px; width: 420px; --rot: 4deg; box-shadow: 20px 20px 0 rgba(0, 0, 0, 0.45); }

/* ---------- 2 AI 不会先抢走你的工作 ---------- */
.hook .l1 { left: 120px; top: 170px; }
.hook .l2 { left: 120px; top: 390px; }
.hook .l3 { left: 120px; top: 700px; color: #e8e3da; }

/* ---------- 3 是哪部分 ---------- */
.skills .k { left: 120px; top: 130px; color: var(--mute); }
.skills .w { position: absolute; z-index: 2; background: var(--ink); color: var(--paper); font: 900 84px/1 var(--sans); padding: 30px 40px; white-space: nowrap; }
.skills .w1 { left: 120px; top: 230px; }
.skills .w2 { left: 492px; top: 230px; }
.skills .w3 { left: 864px; top: 230px; }
.skills .w4 { left: 120px; top: 400px; }
.skills .w5 { left: 576px; top: 400px; }
.skills .was { left: 120px; top: 600px; }
.skills .stamp { left: 760px; top: 520px; --rot: -8deg; font-size: 100px; padding: 24px 34px; border-width: 9px; }

/* ---------- 4 付钱买的是什么 ---------- */
.askq .pre { left: 120px; top: 130px; color: var(--mute2); }
.askq .l1 { left: 120px; top: 230px; }
.askq .l2 { left: 120px; top: 350px; }
.askq .l3 { left: 120px; top: 470px; }
.askq .l4 { left: 120px; top: 700px; color: #e8e3da; }
.askq .fw { font: 900 150px/1 var(--sans); color: var(--yellow); vertical-align: -0.16em; margin-left: 10px; }

/* ---------- 5 我是谁 ---------- */
.bio .name { left: 120px; top: 120px; }
.bio .alias { left: 124px; top: 270px; color: var(--mute); }
.bio .rail { position: absolute; z-index: 1; left: 128px; top: 420px; width: 4px; height: 352px; background: var(--ink); }
.bio .row { position: absolute; z-index: 2; left: 172px; font: 800 50px/1 var(--sans); white-space: nowrap; }
.bio .row::before { content: ""; position: absolute; left: -54px; top: 14px; width: 20px; height: 20px; background: var(--ink); border-radius: 50%; }
.bio .r1 { top: 400px; }
.bio .r2 { top: 490px; }
.bio .r3 { top: 580px; }
.bio .r4 { top: 670px; }
.bio .r5 { top: 760px; }
.bio .now-k { left: 1180px; top: 130px; font-size: 28px; }
.bio .now1 { left: 1180px; top: 180px; }
.bio .now2 { left: 1180px; top: 280px; }
.bio .book { left: 1200px; top: 410px; width: 300px; --rot: 3deg; box-shadow: 12px 12px 0 var(--ink); }

/* ---------- 6 在腾讯 ---------- */
.tx .l1 { left: 120px; top: 120px; }
.tx .l2 { left: 120px; top: 262px; color: var(--mute2); }
.tx .l3 { left: 120px; top: 340px; color: var(--yellow); }
.tx .l4 { left: 120px; top: 560px; color: #e8e3da; }
.tx .l5 { left: 120px; top: 720px; }

/* ---------- 7 四个问题 ---------- */
.map .t { left: 120px; top: 130px; }
.map .r { font: 900 64px/1.2 var(--sans); white-space: nowrap; }
.map .r b { display: inline-block; width: 120px; font: 700 50px/1 var(--mono); color: var(--red); }
.map .r1 { left: 120px; top: 320px; }
.map .r2 { left: 120px; top: 450px; }
.map .r3 { left: 120px; top: 580px; }
.map .r4 { left: 120px; top: 710px; }

/* ---------- 8 去创业公司 ---------- */
.start1 .k { left: 120px; top: 130px; color: var(--mute); }
.start1 .l1 { left: 120px; top: 220px; }
.start1 .r1 { left: 120px; top: 420px; }
.start1 .r2 { left: 120px; top: 510px; }
.start1 .r3 { left: 120px; top: 600px; }
.start1 .r4 { left: 120px; top: 720px; }

/* ---------- 9 我错了：动作代替结果 ---------- */
.start2 .k { left: 120px; top: 120px; }
.start2 .s { left: 120px; top: 260px; color: var(--mute); }
.start2 .col { position: absolute; z-index: 2; top: 350px; }
.start2 .c1 { left: 120px; }
.start2 .c2 { left: 980px; }
.start2 .col .h { font: 900 96px/1.1 var(--sans); }
.start2 .col .m { margin-top: 22px; font: 700 46px/1 var(--sans); color: var(--mute); }
.start2 .vs { position: absolute; z-index: 1; left: 880px; top: 350px; height: 280px; border-left: 4px solid var(--ink); }
.start2 .band { top: 700px; font: 900 58px/1.2 var(--sans); }

/* ---------- 10 公司离结果近，不等于每个人离结果近 ---------- */
.start3 .l1 { left: 120px; top: 220px; color: var(--mute2); }
.start3 .l2 { left: 120px; top: 300px; }
.start3 .l3 { left: 120px; top: 470px; }

/* ---------- 11 定义 ---------- */
.defn .k { left: 120px; top: 140px; color: var(--mute); }
.defn .d1 { left: 120px; top: 220px; }
.defn .d2 { left: 120px; top: 370px; }
.defn .cmp { left: 120px; top: 600px; }
.defn .cmp .row { display: flex; align-items: center; gap: 26px; margin-bottom: 34px; font: 800 46px/1 var(--sans); white-space: nowrap; }
.defn .cmp i { font-style: normal; color: var(--mute); }
.defn .cmp b { font: 900 46px/1 var(--sans); padding: 14px 22px; }
.defn .cmp .t-real { background: var(--ink); color: var(--paper); }
.defn .cmp .t-fake { background: var(--red); color: #fff; }

/* ---------- 12 只问一句 ---------- */
.test .k { left: 120px; top: 130px; color: var(--mute); }
.test .q1 { left: 120px; top: 200px; }
.test .q2 { left: 120px; top: 320px; }
.test .chain { left: 120px; top: 500px; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.test .node { font: 800 40px/1 var(--sans); border: 3px solid var(--ink); background: #fff; padding: 22px 24px; box-shadow: 6px 6px 0 var(--ink); }
.test .chain i { font: 900 44px/1 var(--sans); font-style: normal; color: var(--mute); }
.test .no { left: 120px; top: 646px; color: var(--red); }
.test .stamp { left: 470px; top: 648px; --rot: -3deg; }
.test .sticker { left: 124px; top: 830px; --rot: -1.5deg; }

/* ---------- 13 最危险的浪费 ---------- */
.pg .q1 { left: 120px; top: 150px; }
.pg .q2 { left: 120px; top: 270px; }
.pg .q3 { left: 120px; top: 390px; }
.pg .who { left: 124px; top: 540px; }
.pg .bq { left: 120px; top: 660px; color: #e8e3da; border-left: 8px solid var(--red); padding-left: 30px; }

/* ---------- 14 训练你 8 年 ---------- */
.years .l1 { left: 120px; top: 140px; }
.years .l2 { left: 120px; top: 320px; }
.years .l3 { left: 120px; top: 470px; }
.years .l4 { left: 120px; top: 690px; }
.years .l5 { left: 120px; top: 770px; }

/* ---------- 15 煎饼摊主 ---------- */
.bing .col { position: absolute; z-index: 2; top: 150px; }
.bing .c1 { left: 120px; }
.bing .c2 { left: 980px; }
.bing .col .h { font: 900 96px/1.1 var(--sans); white-space: nowrap; }
.bing .col .m { margin-top: 26px; font: 700 46px/1 var(--sans); color: var(--mute); }
.bing .col .v { margin-top: 30px; font: 900 76px/1 var(--sans); }
.bing .vs { position: absolute; z-index: 1; left: 880px; top: 150px; height: 340px; border-left: 4px solid var(--ink); }
.bing .band { top: 600px; width: 1400px; font: 900 56px/1.45 var(--sans); }

/* ---------- 16 是结构 ---------- */
.struct .t { left: 120px; top: 130px; }
.struct .r { font: 900 60px/1.2 var(--sans); white-space: nowrap; }
.struct .r b { display: inline-block; width: 80px; font: 900 60px/1 var(--mono); color: var(--red); }
.struct .r span { display: block; margin: 12px 0 0 80px; font: 700 38px/1.3 var(--sans); color: var(--mute); }
.struct .r1 { left: 120px; top: 290px; }
.struct .r2 { left: 120px; top: 470px; }
.struct .r3 { left: 120px; top: 650px; }

/* ---------- 17 荒谬的结果 ---------- */
.absurd .l1 { left: 120px; top: 200px; }
.absurd .l2 { left: 120px; top: 330px; }
.absurd .l3 { left: 120px; top: 560px; color: #e8e3da; }
.absurd .l4 { left: 120px; top: 650px; }

/* ---------- 18 过去卖得很贵 ---------- */
.costly .t { left: 120px; top: 140px; }
.costly .s1 { left: 120px; top: 320px; color: var(--mute); }
.costly .s2 { left: 120px; top: 390px; }
.costly .s3 { left: 120px; top: 560px; color: var(--mute); }
.costly .s4 { left: 120px; top: 630px; }

/* ---------- 19 苦劳也没有了 ---------- */
.kulao .l1 { left: 120px; top: 200px; color: var(--mute2); }
.kulao .l2 { left: 110px; top: 350px; color: var(--yellow); }
.kulao .l3 { left: 120px; top: 650px; color: #e8e3da; }

/* ---------- 20 第一步：爆炸 ---------- */
.boom .l1 { left: 120px; top: 220px; }
.boom .l2 { left: 120px; top: 340px; }
.boom .rw { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.boom .rw span { width: 260px; font: 800 44px/1 var(--sans); }
.boom .rw i { font: 900 44px/1 var(--sans); font-style: normal; color: var(--mute); margin-right: 18px; }
.boom .rw em { font: 800 32px/1 var(--sans); font-style: normal; background: var(--ink); color: var(--paper); padding: 12px 14px; }
.boom .rw1 { left: 120px; top: 490px; }
.boom .rw2 { left: 120px; top: 590px; }
.boom .rw3 { left: 120px; top: 690px; }
.boom .band { top: 812px; font: 900 46px/1.2 var(--sans); }

/* ---------- 21 总经理：7 句话 ---------- */
.gm .m1 { left: 120px; top: 140px; max-width: 1300px; }
.gm .m1 .bub { font: 700 54px/1.45 var(--sans); padding: 26px 36px; }
.gm .m2 { left: 640px; top: 470px; max-width: 900px; }
.gm .m2 .bub { font: 900 96px/1 var(--sans); padding: 34px 48px; }
.gm .msg .who { font-size: 26px; }
.gm .l3 { left: 120px; top: 760px; }

/* ---------- 22 第二步：贬值 ---------- */
.devalue .l1 { left: 120px; top: 220px; }
.devalue .l2 { left: 120px; top: 340px; }
.devalue .qq { left: 120px; color: var(--yellow); }
.devalue .q1 { top: 520px; }
.devalue .q2 { top: 610px; }
.devalue .q3 { top: 700px; }

/* ---------- 22b 两面夹击 ---------- */
.pincer .t { left: 120px; top: 150px; }
.pincer .card { position: absolute; z-index: 2; top: 330px; width: 780px; height: 270px; border: 3px solid var(--ink); background: #fff; padding: 46px 44px; box-shadow: 10px 10px 0 var(--ink); }
.pincer .card b { display: block; font: 900 62px/1 var(--sans); white-space: nowrap; }
.pincer .card span { display: block; margin-top: 30px; font: 700 40px/1.35 var(--sans); color: var(--mute); white-space: nowrap; }
.pincer .k1 { left: 120px; }
.pincer .k2 { left: 960px; background: var(--ink); color: var(--paper); box-shadow: 10px 10px 0 var(--yellow); }
.pincer .k2 b { color: var(--yellow); }
.pincer .k2 span { color: #e8e3da; }
.pincer .l3 { left: 120px; top: 700px; }

/* ---------- 23 一张图：先爆炸，再贬值 ---------- */
.curve .t { left: 120px; top: 120px; }
.curve .chart { left: 120px; top: 250px; overflow: visible; }
.curve .chart .ax { stroke: var(--ink); stroke-width: 4; }
.curve .chart .aim { stroke: var(--red); stroke-width: 4; stroke-dasharray: 14 12; }
.curve .chart text { font-family: var(--sans); font-weight: 900; fill: var(--ink); }
.curve .chart .ail { font-size: 40px; fill: var(--red); }
.curve .chart .axl { font-size: 30px; font-weight: 700; fill: var(--mute); }
.curve .chart .lq { font-size: 34px; fill: var(--red); }
.curve .chart .lp { font-size: 34px; }
.curve .chart .bang { font-size: 60px; fill: var(--red); }
.curve .chart .drop { font-size: 52px; }
.curve .chart path { fill: none; stroke-width: 12; stroke-linecap: round; }
.curve .chart .qty { stroke: var(--red); }
.curve .chart .price { stroke: var(--ink); }
.curve .chart path.grow { stroke-dasharray: var(--L, 2000); stroke-dashoffset: var(--L, 2000); transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s); }
.curve .chart path.grow.on { stroke-dashoffset: 0; }
.curve .chart text[data-in] { transition: opacity 0.5s var(--out) var(--d, 0s); }
.curve .chart text[data-in]:not(.on) { opacity: 0; }

/* ---------- 24 议价能力先消失 ---------- */
.pricing .l1 { left: 120px; top: 170px; }
.pricing .l2 { left: 120px; top: 320px; }
.pricing .l3 { left: 120px; top: 560px; color: var(--mute); }
.pricing .l4 { left: 120px; top: 640px; }

/* ---------- 25 为什么分不清 ---------- */
.whyq .l1 { left: 120px; top: 260px; }
.whyq .l2 { left: 120px; top: 390px; }
.whyq .l3 { left: 120px; top: 520px; }

/* ---------- 26 冰山：水面上 ---------- */
.above .wtag { left: 120px; top: 170px; }
.above .wtag .meta { margin-top: 8px; }
.above .c1 { left: 470px; top: 170px; --rot: -3deg; }
.above .c2 { left: 540px; top: 286px; --rot: 2deg; }
.above .c3 { left: 1190px; top: 150px; --rot: 2deg; }
.above .c4 { left: 1215px; top: 270px; --rot: -2deg; }
.above .n1 { left: 1460px; top: 92px; }
.above .n2 { left: 1500px; top: 190px; }
.above .n3 { left: 1420px; top: 296px; }
.above .n4 { left: 1590px; top: 296px; }
.above .n5 { left: 1740px; top: 190px; }
.above .stamp { left: 120px; top: 480px; --rot: -3deg; background: transparent; color: #ff6a4a; border-color: #ff6a4a; font-size: 72px; }

/* ---------- 27 冰山：水面下 ---------- */
.below .sky { left: 120px; top: 150px; }
.below .w { left: 120px; top: 450px; }
.below .zb { left: 640px; top: 470px; width: 640px; text-align: center; }
.below .zb b { font-size: 100px; }
.below .zb span { font-size: 36px; margin-top: 22px; }

/* ---------- 28 代理指标 ---------- */
.proxy .t1 { left: 120px; top: 110px; }
.proxy .t2 { left: 120px; top: 230px; }
.proxy .seaband { position: absolute; z-index: 1; left: 0; right: 0; top: 560px; bottom: 0; background: var(--sea); border-top: 5px solid var(--ink); }
.proxy .items { left: 120px; top: 440px; display: flex; gap: 22px; }
.proxy .items span { background: var(--ice); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font: 800 42px/1 var(--sans); padding: 16px 22px; }
.proxy .under { left: 120px; top: 770px; color: #fff; font: 900 64px/1 var(--sans); }
.proxy .arr { left: 330px; top: 545px; width: 12px; height: 205px; background: var(--yellow); transform-origin: 50% 100%; transition: transform 0.7s var(--out) var(--d, 0s), opacity 0.3s; }
.proxy .arr::before { content: ""; position: absolute; left: -22px; top: -30px; border: 28px solid transparent; border-top: 0; border-bottom: 36px solid var(--yellow); }
.proxy .arr:not(.on) { transform: scaleY(0); opacity: 0; }
.proxy .why { left: 390px; top: 600px; color: #fff; font: 800 42px/1.45 var(--sans); }
.proxy .concl { left: 120px; top: 900px; color: var(--yellow); }

/* ---------- 29 代理指标失效 ---------- */
.broken .l1 { left: 120px; top: 170px; }
.broken .l2 { left: 120px; top: 290px; }
.broken .stamp { left: 120px; top: 470px; --rot: -3deg; font-size: 104px; padding: 26px 36px; border-width: 10px; }
.broken .l4 { left: 120px; top: 730px; }

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

/* ---------- 31 高手看得出来 ---------- */
.experts .l1 { left: 120px; top: 160px; }
.experts .l2 { left: 120px; top: 330px; }
.experts .l3 { left: 120px; top: 560px; }
.experts .l4 { left: 120px; top: 650px; }

/* ---------- 32 学校的训练 ---------- */
.school .k { left: 120px; top: 140px; color: var(--mute); }
.school .b { left: 120px; padding-left: 36px; border-left: 8px solid var(--ink); }
.school .b1 { top: 230px; }
.school .b2 { top: 330px; }
.school .b3 { top: 430px; }
.school .band { top: 580px; width: 1400px; }
.school .band span { display: block; font: 700 44px/1.3 var(--sans); color: #e8e3da; }
.school .band b { display: block; margin-top: 16px; font: 900 96px/1.1 var(--sans); color: var(--yellow); }

/* ---------- 33 学习也有假的 ---------- */
.flearn .t { left: 120px; top: 110px; }
.flearn .k { left: 120px; top: 240px; }
.flearn .axis { position: absolute; z-index: 1; left: 858px; top: 316px; height: 270px; border-left: 4px solid var(--ink); }
.flearn .row { position: absolute; z-index: 2; left: 0; width: 1920px; height: 90px; }
.flearn .r1 { top: 340px; }
.flearn .r2 { top: 470px; }
.flearn .row p { position: absolute; left: 120px; top: 22px; width: 460px; text-align: right; font: 800 44px/1 var(--sans); white-space: nowrap; }
.flearn .row .bar { position: absolute; top: 6px; height: 78px; transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0.15s); }
.flearn .r1 .bar { left: 862px; width: 672px; background: var(--ink); }
.flearn .r2 .bar { left: 620px; width: 238px; background: var(--red); transform-origin: 100% 50%; }
.flearn .row:not(.on) .bar { transform: scaleX(0); }
.flearn .row p, .flearn .row em { transition: opacity 0.5s var(--out) var(--d2, 0s); }
.flearn .row em { --d2: 0.9s; position: absolute; top: 14px; font: 900 60px/1 var(--sans); font-style: normal; }
.flearn .row:not(.on) p, .flearn .row:not(.on) em { opacity: 0; }
.flearn .r1 em { left: 1556px; }
.flearn .r2 em { left: 884px; color: var(--red); }
.flearn .ask { left: 884px; top: 484px; color: var(--red); }
.flearn .r3 { left: 120px; top: 620px; }
.flearn .band { top: 720px; font: 900 52px/1.2 var(--sans); }

/* ---------- 34 水面下第一层：判断 ---------- */
.judge .sky { left: 120px; top: 170px; color: var(--mute); }
.judge .jd { left: 560px; top: 450px; width: 800px; text-align: center; }
.judge .jd b { font-size: 104px; }
.judge .jd span { font-size: 34px; margin-top: 24px; }
.judge .taste { left: 1190px; top: 130px; font: 900 52px/1.35 var(--serif); }

/* ---------- 35 判断从哪来 ---------- */
.roots .t { left: 120px; top: 150px; }
.roots .jd2 { left: 765px; top: 515px; width: 400px; text-align: center; }
.roots .jd2 b { font-size: 84px; }
.roots .wmd, .roots .crf { top: 770px; width: 420px; text-align: center; }
.roots .wmd { left: 535px; }
.roots .crf { left: 975px; }
.roots .wmd b, .roots .crf b { font-size: 66px; }
.roots .wmd span, .roots .crf span { font-size: 32px; margin-top: 16px; }

/* ---------- 36 世界模型 ---------- */
.wmodel .t { left: 120px; top: 150px; }
.wmodel .loop { left: 120px; top: 330px; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.wmodel .loop span { border: 3px solid var(--ink); background: #fff; font: 900 50px/1 var(--sans); padding: 22px 28px; box-shadow: 6px 6px 0 var(--ink); }
.wmodel .loop .end { background: var(--yellow); }
.wmodel .loop i { font: 900 50px/1 var(--sans); font-style: normal; }
.wmodel .note { left: 120px; top: 470px; }
.wmodel .band { top: 590px; width: 1400px; }
.wmodel .band span { display: block; font: 700 42px/1.35 var(--sans); color: #e8e3da; }
.wmodel .band b { display: block; margin-top: 16px; font: 900 66px/1.2 var(--sans); color: var(--yellow); }

/* ---------- 37 手艺 ---------- */
.craft .t { left: 120px; top: 150px; }
.craft .cell { position: absolute; z-index: 2; top: 300px; width: 480px; height: 260px; border: 3px solid var(--ink); background: #fff; padding: 36px 38px; }
.craft .cell b { display: block; font: 900 66px/1 var(--sans); }
.craft .cell span { display: block; margin-top: 24px; font: 700 40px/1.4 var(--sans); color: var(--mute); }
.craft .c1 { left: 120px; }
.craft .c2 { left: 640px; }
.craft .c3 { left: 1160px; background: var(--ink); color: var(--paper); box-shadow: 12px 12px 0 var(--yellow); }
.craft .c3 b { color: var(--yellow); }
.craft .c3 span { color: #e8e3da; }
.craft .l1 { left: 120px; top: 640px; }
.craft .l2 { left: 120px; top: 730px; }

/* ---------- 38 只能做出来 ---------- */
.hands .l1 { left: 120px; top: 130px; }
.hands .l2 { left: 120px; top: 280px; }
.hands .p1 { left: 120px; top: 480px; color: #e8e3da; }
.hands .p2 { left: 120px; top: 570px; color: #e8e3da; }
.hands .ratio { position: absolute; z-index: 2; left: 1180px; top: 430px; display: flex; align-items: flex-start; gap: 26px; }
.hands .ratio div { text-align: center; }
.hands .ratio b { display: block; font: 900 150px/1 var(--sans); color: var(--yellow); }
.hands .ratio span { display: block; margin-top: 14px; font: 800 40px/1 var(--sans); color: #e8e3da; }
.hands .ratio i { font: 900 110px/1.2 var(--sans); font-style: normal; color: var(--mute2); }

/* ---------- 39 真本事就是水面下 ---------- */
.zbs .book { left: 150px; top: 140px; width: 460px; --rot: -3deg; box-shadow: 18px 18px 0 var(--ink); }
.zbs .l1 { left: 720px; top: 160px; }
.zbs .l2 { left: 720px; top: 280px; }
.zbs .l3 { left: 720px; top: 440px; }
.zbs .l4 { left: 720px; top: 680px; color: var(--mute); }

/* ---------- 40 能力、习惯、机制 ---------- */
.three .l1 { left: 120px; top: 170px; }
.three .l2 { left: 120px; top: 300px; }
.three .w { top: 520px; font: 900 170px/1 var(--sans); color: var(--yellow); letter-spacing: -0.02em; }
.three .w1 { left: 120px; }
.three .w2 { left: 600px; }
.three .w3 { left: 1080px; }

/* ---------- 41 能力 ---------- */
.ability .st { display: flex; align-items: baseline; gap: 44px; white-space: nowrap; }
.ability .st b { width: 250px; font: 900 70px/1 var(--sans); }
.ability .st span { font: 700 44px/1.3 var(--sans); color: var(--mute); }
.ability .s1 { left: 120px; top: 290px; }
.ability .s2 { left: 120px; top: 420px; }
.ability .s3 { left: 120px; top: 550px; }
.ability .sticker { left: 124px; top: 700px; --rot: -2deg; font-size: 44px; }

/* ---------- 42 习惯 ---------- */
.habits .hb { font: 900 62px/1.2 var(--sans); white-space: nowrap; }
.habits .hb b { display: inline-block; width: 80px; font: 900 62px/1 var(--mono); color: var(--red); }
.habits .hb span { display: block; margin: 12px 0 0 80px; font: 700 40px/1.3 var(--sans); color: var(--mute); }
.habits .h1 { left: 120px; top: 270px; }
.habits .h2 { left: 120px; top: 450px; }
.habits .h3 { left: 120px; top: 630px; }

/* ---------- 43 10% ---------- */
.tenpct .l1 { left: 120px; top: 140px; }
.tenpct .l2 { left: 120px; top: 260px; }
.tenpct .weeks { position: absolute; z-index: 2; left: 120px; top: 420px; width: 1400px; height: 72px; display: grid; grid-template-columns: repeat(26, 1fr); gap: 8px; }
.tenpct .weeks i { background: rgba(18, 17, 16, 0.13); }
.tenpct .weeks i.hot { background: var(--yellow); outline: 4px solid var(--ink); }
.tenpct .l3 { left: 120px; top: 570px; }
.tenpct .l4 { left: 120px; top: 730px; }

/* ---------- 44 机制：带团队 ---------- */
.mgr .m { font: 900 68px/1.2 var(--sans); white-space: nowrap; }
.mgr .m b { display: inline-block; width: 90px; font: 900 68px/1 var(--mono); color: var(--red); }
.mgr .m1 { left: 120px; top: 280px; }
.mgr .m2 { left: 120px; top: 410px; }
.mgr .m3 { left: 120px; top: 540px; }
.mgr .m4 { left: 120px; top: 670px; }

/* ---------- 45 机制：说了不算 ---------- */
.solo .t { left: 120px; top: 240px; }
.solo .loop { left: 120px; top: 390px; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.solo .loop span { border: 3px solid var(--ink); background: #fff; font: 900 44px/1 var(--sans); padding: 20px 24px; box-shadow: 6px 6px 0 var(--ink); }
.solo .loop .end { background: var(--yellow); }
.solo .loop i { font: 900 44px/1 var(--sans); font-style: normal; }
.solo .qt { left: 120px; top: 560px; }
.solo .qw { left: 124px; top: 660px; }
.solo .sticker { left: 124px; top: 780px; --rot: -2deg; font-size: 42px; }

/* ---------- 46 从有用到不同 ---------- */
.renai .l1 { left: 120px; top: 140px; }
.renai .l2 { left: 120px; top: 300px; color: #e8e3da; }
.renai .q1 { left: 120px; top: 460px; }
.renai .q2 { left: 120px; top: 610px; }
.renai .qw { left: 124px; top: 800px; color: var(--mute2); }

/* ---------- 47 求真 ---------- */
.qiuzhen .who { left: 124px; top: 160px; font-size: 28px; }
.qiuzhen .l1 { left: 120px; top: 220px; color: var(--mute); }
.qiuzhen .l2 { left: 110px; top: 400px; }
.qiuzhen .l3 { left: 120px; top: 690px; }

/* ---------- 48 学点真本事，做点真东西 ---------- */
.finale .l1 { left: 120px; top: 170px; }
.finale .l2 { left: 120px; top: 320px; color: var(--yellow); }
.finale .book { left: 1250px; top: 110px; width: 400px; --rot: 4deg; box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.45); }
.finale .bt { left: 120px; top: 540px; color: #e8e3da; }
.finale .ba { left: 124px; top: 615px; }
.finale .ask { left: 120px; top: 780px; 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; }