/* deck.css · 方法论详解课讲课页样式（复制自 FDE 公开课讲课页，删去 FDE 公开课各页专用样式后改）
 * Input:  index.html 的 .pg 页、.art 画板、.at 定位块、data-d 装饰、data-step / data-only / data-until 分步、.notes 讲者要点；
 *         src/h.mjs 生成的版面部件（.stack .cols .cd .qt .chips .say .tagline .tw 表格 .pyr 三层）
 * Output: 投屏版（每页一屏，1600×900 画板等比缩放，单位 --u）与手机版（≤760px，按 DOM 顺序竖排）；动效四层：加载、入场、分步、悬停（文件末尾）
 * Pos:    全部视觉令牌与版式；具体的画在 js/ 里
 */
/* 字：标题用霞鹜漫黑（记号笔），正文与批注用小赖（细钢笔）。两款均 OFL-1.1 */
@font-face { font-family:"FDE Marker"; src:url(../fonts/marker.woff2) format("woff2"); font-display:block; }
@font-face { font-family:"FDE Hand"; src:url(../fonts/hand.woff2) format("woff2"); font-display:block; }
:root {
  --paper:#f1e9d6; --ink:#2b2420; --mute:#5b5147; --rule:#b3a487; --graphite:#8f8471;
  --val:#e0a84f;  --val-ink:#83540e;
  --flow:#86b596; --flow-ink:#2b6650;
  --exp:#e39478;  --exp-ink:#9b3f27;
  --arch:#86a6d8; --arch-ink:#2b5085;
  --mark:#f0d46c; --fde:#5a3f8c; --fde-ink:#5a3f8c; --fde-l:#c4b2e3;
  --marker:"FDE Marker","Kaiti SC","STKaiti",cursive;
  --hand:"FDE Hand","Kaiti SC","STKaiti",cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
  --flow-in:cubic-bezier(.2,.75,.35,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  /* 画板单位：1600×900 的画板放进视口，取宽高里较紧的一边 */
  --u:min(calc(100vw / 1600), calc(100vh / 900));
}
* { box-sizing:border-box; }
/* 纸：脚本生成一张可平铺的纸纹，铺在整页，随页面滚动 */
html { margin:0; background-color:var(--paper); background-image:var(--paper-img, none); background-size:512px 512px; }
body { margin:0; background:transparent; color:var(--ink); font-family:var(--hand); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; mix-blend-mode:multiply;
  background:
    radial-gradient(55% 45% at 16% 20%, rgba(150,118,70,.05), transparent 70%),
    radial-gradient(45% 55% at 84% 78%, rgba(150,118,70,.06), transparent 70%),
    radial-gradient(130% 120% at 50% 45%, transparent 62%, rgba(120,92,58,.10) 100%); }
main { position:relative; z-index:1; }
html.blackout main { visibility:hidden; }
html.blackout { background:#111; }

/* ---------- 页与画板 ---------- */
.pg { position:relative; height:100vh; overflow:hidden; }
.deco { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:multiply; }
/* 页面画布 sheet：只盖住要画的那一块，位置由脚本给 */
.sheet { position:absolute; pointer-events:none; mix-blend-mode:multiply; }
.art { position:absolute; left:calc(50% - 800 * var(--u)); top:calc(50% - 450 * var(--u)); width:calc(1600 * var(--u)); height:calc(900 * var(--u)); font-size:calc(24 * var(--u)); line-height:1.55; }
.at { position:absolute; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u)); width:calc(var(--w) * var(--u)); height:calc(var(--h) * var(--u)); margin:0; }
.ch { display:inline-block; }
.nw { white-space:nowrap; }

/* ---------- 字 ---------- */
.kicker { font-size:.8em; line-height:1.55; color:var(--mute); letter-spacing:.04em; }
h2 { font-family:var(--marker); font-weight:400; font-size:2.05em; line-height:1.28; margin:0; }
h1, h2, .mk, .lb.mk { -webkit-mask-image:var(--ink-mask, none); mask-image:var(--ink-mask, none); -webkit-mask-size:512px 512px; mask-size:512px 512px; }
/* 遮罩只盖住元素自身的框：自带圈、框、线的字不加遮罩，否则画在框外的部分会被裁掉 */
.mk[data-d] { -webkit-mask-image:none; mask-image:none; }
.mk { font-family:var(--marker); font-weight:400; }
.t { font-size:1em; }
.sm { font-size:.78em; color:var(--mute); }
.big { font-size:1.3em; line-height:1.45; }
.foot { font-size:.7em; color:var(--mute); }
.q-open::before { content:"“"; } .q-close::after { content:"”"; }
.ink-val { color:var(--val-ink); } .ink-flow { color:var(--flow-ink); } .ink-exp { color:var(--exp-ink); } .ink-arch { color:var(--arch-ink); } .ink-fde { color:var(--fde); } .ink-mute { color:var(--mute); }
/* 手写字的“抖”：悬停时字按一拍一拍跳一下（逐字错开） */
@keyframes boil {
  0% { translate:0 0; rotate:0deg; } 33% { translate:0 -.04em; rotate:2.4deg; }
  66% { translate:0 .02em; rotate:-1.8deg; } 100% { translate:0 0; rotate:0deg; }
}
.hov:hover .ch, .lb.mk:hover .ch { animation:boil .42s steps(1, end) calc(var(--i, 0) * 30ms) 1; }

/* ---------- 装饰：每个带 data-d 的元素底下垫一块自己的画布 ---------- */
[data-d] { position:relative; }
.at[data-d] { position:absolute; }
/* 卡纸类的块按内容定高，--h 只作版面估算 */
.at[data-d~="card"] { height:auto; }
:is(span, mark, b)[data-d] { white-space:nowrap; }
.dc { position:absolute; pointer-events:none; mix-blend-mode:multiply; z-index:0; }
.dc.solid { mix-blend-mode:normal; }
[data-d] > :not(.dc) { position:relative; z-index:1; }
/* 分步：data-step=n 的元素在第 n 步出现；画上去的用擦除式展开 */
[data-step] { opacity:0; transition:opacity .45s var(--ease); }
[data-step].on, html.all [data-step] { opacity:1; }
.wipe[data-step] { opacity:1; clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease); }
.wipe[data-step].on, html.all .wipe[data-step] { clip-path:inset(0 0 0 0); }
/* data-only=n 的元素只在第 n 步出现（例如随步变长的项目周期） */
[data-only] { opacity:0; transition:opacity .45s var(--ease); }
[data-only].on { opacity:1; }
.reset [data-step], .reset [data-only], .reset .dc, .reset canvas, .reset .pop { transition:none !important; }

/* ---------- 底栏：九段导航条与页码 ---------- */
.six { display:flex; gap:.1em; align-items:center; font-size:.62em; color:var(--mute); }
.six span { position:relative; padding:.12em .45em .16em; white-space:nowrap; }
.six span.on { color:var(--ink); }
.pno { font-size:.7em; color:var(--mute); text-align:right; }

/* ---------- 图：画布叠层加 HTML 标签 ---------- */
figure { margin:0; }
.fig { container-type:inline-size; }
.fig > canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:multiply; }
.fig > canvas.solid { mix-blend-mode:normal; }
.labels { position:absolute; inset:0; pointer-events:none; }
.lb { position:absolute; white-space:nowrap; line-height:1.2; }
.lb.mk { font-family:var(--marker); }
.lb.wrap { white-space:normal; }

/* data-until=n 的元素只在第 n 步之前出现（同一位置换一句主句） */
[data-until] { opacity:0; transition:opacity .45s var(--ease); }
[data-until].on { opacity:1; }
.reset [data-until] { transition:none !important; }

/* ---------- 主句：一页一句，写大 ---------- */
.pg h2 { font-size:2.35em; line-height:1.2; }
.pg h2.ttl { font-size:2.9em; text-align:center; }

/* ---------- 右上角：这一页用到哪一横、客户形成哪个判断 ---------- */
.hx.at { display:flex; justify-content:flex-end; align-items:center; gap:.55em; font-size:.74em; line-height:1.55; }
.hx .lead { color:var(--mute); margin-left:.8em; }
.hx .chip { padding:0 .2em; }

/* ---------- 版面部件（src/h.mjs） ---------- */
.stack { display:flex; flex-direction:column; gap:1.4em; }
.stack > [data-d~="hl"], .stack > .say[data-d] { align-self:flex-start; }
.c { text-align:center; }
.c .say, .c .tagline { text-align:center; }
.cols { display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); gap:var(--g, 2.4em); align-items:start; }
.cols.flow { gap:var(--g, 3.6em); }
.cols.six-flow { --g:3.3em; }
.cols.six-flow .cd h3 { font-size:1em; }
.cd { min-width:0; }
.cd h3 { font-family:var(--marker); font-weight:400; font-size:1.18em; line-height:1.32; margin:0; }
.cd h3 + p, .cd .k + h3, .cd .ic + h3 { margin-top:.3em; }
.cd p { margin:0; font-size:.9em; line-height:1.5; }
.cd h3 + p { margin-top:.45em; }
.cd p + p { margin-top:.35em; }
.cd .k { font-size:.74em; color:var(--mute); letter-spacing:.04em; }
.cd .k + p { margin-top:.2em; }
.cd .m { color:var(--mute); font-size:.82em; }
.cd .r, .say.red, .red { color:var(--exp-ink); }
.cd .b { font-family:var(--marker); font-size:1.05em; }
.cd .q { font-family:var(--marker); font-size:1em; line-height:1.45; }
.cd .a { color:var(--exp-ink); font-family:var(--marker); }
.cd .chips { display:flex; flex-wrap:wrap; gap:.4em .8em; }
.tg { font-family:var(--marker); color:var(--mute); margin-right:.45em; font-size:.92em; }
.cd .r .tg { color:var(--exp-ink); }
.ic { display:block; position:relative; width:3em; height:3em; margin-bottom:.35em; }
.ic > canvas { position:absolute; inset:0; width:100%; height:100%; }
.qt .q { font-size:1.45em; line-height:1.42; margin:0; }
.qt.wide .q { font-size:1.3em; }
.qt .who { font-size:.74em; color:var(--mute); text-align:right; margin:.5em 0 0; }
.chips { margin:0; display:flex; flex-wrap:wrap; gap:.5em 1em; align-items:center; }
.chips .lead { font-size:.8em; color:var(--mute); }
.chip { padding:0 .15em; }
.say { font-size:1.35em; line-height:1.42; margin:0; }
.say.sm { font-size:1.08em; }
.tagline { font-size:.86em; color:var(--mute); margin:0; }
.eq { font-size:1.9em; line-height:1.4; margin:.4em 0 .2em; }
/* 三层：上窄下宽，叠成一座台 */
.pyr { display:flex; flex-direction:column; align-items:center; gap:1.9em; }
.pyr .cd { width:100%; }
.pyr .l3 { width:56%; } .pyr .l2 { width:76%; } .pyr .l1 { width:96%; }
.pyr .say { align-self:flex-end; }
/* 表格：总表、问答小表 */
.tw table { width:100%; border-collapse:collapse; font-size:.74em; line-height:1.42; }
.tw th, .tw td { text-align:left; vertical-align:top; padding:.5em .7em; }
.tw thead th { font-family:var(--hand); font-weight:400; color:var(--mute); font-size:.92em; padding-bottom:.4em; }
.tw tbody th { font-family:var(--marker); font-weight:400; white-space:nowrap; }
.tw tr.todo th, .tw tr.loop th { color:var(--mute); }
.tw td.j { font-family:var(--marker); white-space:nowrap; }
.tw tr.loop td.j { color:var(--exp-ink); }
.tw .chip { margin-right:.35em; white-space:nowrap; }
table.sum th:first-child { width:6.2em; } table.sum td:nth-child(3) { width:8.6em; } table.sum td.j { width:6.4em; } table.sum td.ev { width:30%; }
table.qt2 { font-size:.86em; }
table.qt2 th:first-child { width:46%; font-family:var(--hand); }
table.qt2 td[data-step] { font-family:var(--marker); color:var(--exp-ink); }
.five table.qt2 th:first-child { width:7em; font-family:var(--marker); }

/* ---------- 讲者条：N 键开关，投屏时默认不显示 ---------- */
.notes.at { top:auto; bottom:calc(84 * var(--u)); height:auto; z-index:5; font-size:.78em; line-height:1.6; visibility:hidden; }
html.notes .notes.at { visibility:visible; }
.notes p { margin:0; }
.notes p + p { margin-top:.2em; }
.notes .src { color:var(--mute); font-size:.9em; }
.notes b { font-family:var(--marker); font-weight:400; }

.hint.at { margin:0; font-size:.75em; color:var(--mute); text-align:right; }
.lb.c { text-align:center; }
.lb.wrap { line-height:1.3; }

/* ---------- 手机：≤760px，每页按 DOM 顺序竖排，分步全部展开 ---------- */
@media (max-width:760px) {
  .pg { height:auto; overflow:visible; overflow-x:clip; padding:30px 16px 36px; }
  .art { position:relative; left:auto; top:auto; width:auto; height:auto; font-size:17px; display:flex; flex-direction:column; gap:14px; }
  .at, .at[data-d] { position:relative; left:auto; top:auto; width:auto; height:auto; }
  .pg h2, .pg h2.ttl { font-size:1.55em; text-align:left; }
  .kicker { font-size:.88em; }
  .six, .hint.at { display:none; }
  .pno { order:99; }
  .fig.at { aspect-ratio:var(--ma); }
  [data-until]:not(.on) { display:none; }
  .notes.at { display:none; }
  .hx.at { justify-content:flex-start; flex-wrap:wrap; font-size:.8em; }
  .hx .lead:first-child { margin-left:0; }
  .cols, .cols.six-flow { grid-template-columns:1fr; gap:1.9em; }
  .cols.flow { gap:3.4em; }
  .stack { gap:1.5em; }
  .pyr .l3, .pyr .l2, .pyr .l1 { width:100%; }
  .say { font-size:1.2em; } .say.sm { font-size:1.05em; }
  .qt .q { font-size:1.25em; }
  .eq { font-size:1.4em; }
  .tw table, .tw thead, .tw tbody, .tw tr, .tw th, .tw td { display:block; width:auto !important; }
  .tw thead { display:none; }
  .tw tr { padding:.6em 0; }
  .tw th, .tw td { padding:.1em 0; }
  .tw td::before { content:attr(data-l) "："; color:var(--mute); font-family:var(--hand); }
  .tw tr.todo td { display:none; }
  .tw td.j { white-space:normal; }
  table.qt2 { font-size:.95em; }
}
@media (min-width:761px) { html { scroll-snap-type:y mandatory; } .pg { scroll-snap-align:start; } }
@media (prefers-reduced-motion:reduce) {
  [data-step], [data-until], .wipe[data-step], .hov, .boot, .boot .ln, .boot .dt { transition:none !important; }
  .ch, .boot svg, .boot .dt { animation:none !important; }
}

/* ---------- 讲课页通用块 ---------- */
mark { background:none; color:inherit; }
.hov { transition:opacity .45s var(--ease), translate .3s var(--ease); }
.hov:hover { translate:0 calc(-4 * var(--u)); }

/* ---------- 投屏放大：卡片、断言、表格按投屏的阅读距离放大；卡片排满一行时等高，正文块在版面里垂直居中 ---------- */
@media (min-width:761px) {
  .stack { justify-content:safe center; gap:2.1em; }
  .cols.op { grid-template-columns:1.65fr 1fr 1fr .85fr; }
  .cols.op .cd h3 { font-size:1.25em; }
  table.sum { font-size:.76em; }
  table.sum td.ev { width:25%; }
  .tw th, .tw td { padding:.38em .6em; }
  .pyr { gap:1.6em; justify-content:safe center; }
  .pyr .cd { font-size:1.06em; }
  .cols { align-items:stretch; gap:var(--g, 3em); }
  .cols.flow { gap:var(--g, 4.4em); }
  .cols.six-flow { --g:3.6em; }
  .cd { font-size:1.25em; }
  .cols.six-flow .cd { font-size:1.08em; }
  .say { font-size:1.6em; } .say.sm { font-size:1.25em; }
  .tagline { font-size:1em; }
  .chips { font-size:1.1em; }
  .eq { font-size:2.2em; }
  .tw table { font-size:.86em; }
  table.qt2 { font-size:1.06em; }
  .hx.at { font-size:.9em; }
}

/* ---------- 动效（html.mv：脚本在没开 Reduce Motion、不是 ?all 时加上） ----------
 * 加载：一条线画过六个点，点按加载进度填黄；第一页画好后淡出
 * 入场：标题逐字落笔 → 卡片、断言、图按阅读顺序一拍一拍落下 → 彩铅底、下划线、圈、表格线、图的各层从左往右擦出
 * 分步：新出现的块淡入并上浮一点；往回翻和滚轮读到的页直接显示（.quiet）
 * 悬停：卡片抬起回弹、标题字抖一下；导航条每一段可点
 */
@keyframes fade { from { opacity:0; } }
@keyframes ink { from { opacity:0; translate:0 .2em; } }
@keyframes rise { from { opacity:0; translate:0 calc(22 * var(--u)); } }
@keyframes sweep { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes beat { 50% { scale:1.25; } }
@keyframes gone { to { opacity:0; visibility:hidden; } }

/* 加载层：盖住整页，纸色和页面一样；脚本坏了 12 秒后也会自己退 */
.boot { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background-color:var(--paper); background-image:var(--paper-img, none); background-size:512px 512px;
  transition:opacity .6s var(--ease), visibility 0s linear .6s; animation:gone .4s ease 12s forwards; }
html[data-ready] .boot, html.all .boot { opacity:0; visibility:hidden; }
.boot svg { width:min(360px, 72vw); overflow:visible; animation:fade .45s var(--ease) .18s backwards; }
.boot .ln { fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .45s var(--flow-in); }
.boot .dt { fill:var(--paper); stroke:var(--ink); stroke-width:1.5; transform-box:fill-box; transform-origin:center; transition:fill .35s var(--ease) .15s; }
.boot .dt.on { fill:var(--mark); }
.boot .dt.on:not(:has(~ .dt.on)) { animation:beat 1.1s var(--ease) infinite; }

/* 分步：淡入加上浮（画布不动，带擦除的画布仍按擦除） */
html.mv [data-step]:not(canvas):not(.wipe) { translate:0 calc(14 * var(--u)); transition:opacity .55s var(--flow-in), translate .7s var(--flow-in); }
html.mv [data-step].on:not(canvas) { translate:none; }

@media (min-width:761px) {
  /* 加载层还在时入场先停住，淡出时一起播 */
  html.mv:not([data-ready]) .pg.in * { animation-play-state:paused !important; }
  html.mv .pg.in:not(.quiet) h2 .ch { animation:ink .55s var(--flow-in) backwards; animation-delay:calc(min(var(--i), 28) * 24ms + 60ms); }
  html.mv .pg.in:not(.quiet) .hx { animation:fade .6s var(--ease) .5s backwards; }
  html.mv .pg.in:not(.quiet) .beat { animation:rise .75s var(--flow-in) backwards; animation-delay:calc(var(--k) * 95ms + 260ms); }
  html.mv .pg.in:not(.quiet) :is(.beat, .hx) .dc:not(.solid):not([data-step]) { animation:sweep .8s var(--ease) backwards; animation-delay:calc(var(--k, 0) * 95ms + 620ms); }
  html.mv .pg.in:not(.quiet) .fig.beat > canvas:not([data-step]) { animation:sweep 1.1s var(--ease) backwards; animation-delay:calc(var(--k) * 95ms + 320ms); }
  html.mv .pg.in:not(.quiet) .fig.beat .lb:not([data-step]) { animation:fade .5s var(--ease) backwards; animation-delay:calc(var(--k) * 95ms + 850ms); }
  html.mv .pg.in:not(.quiet) .tw.beat tbody tr { animation:fade .5s var(--ease) backwards; animation-delay:calc(var(--k) * 95ms + 380ms + var(--r) * 70ms); }
  html.mv .pg.in:not(.quiet) > canvas.sheet:not([data-step]) { animation:sweep 1s var(--ease) .7s backwards; }
}
@media (hover:hover) and (min-width:761px) {
  html.mv .cd[data-d~="card"] { transition:translate .45s var(--spring), opacity .55s var(--flow-in); }
  html.mv .cd[data-d~="card"]:hover { translate:0 calc(-6 * var(--u)); }
  html.mv .cd:hover h3 .ch { animation:boil .42s steps(1, end) calc(var(--i, 0) * 30ms) 1; }
  .six span[data-go] { cursor:pointer; transition:color .25s var(--ease), translate .35s var(--spring); }
  .six span[data-go]:hover { color:var(--ink); translate:0 calc(-3 * var(--u)); }
}
/* 手机：滚到才出场 */
@media (max-width:760px) {
  html.mv :is(.beat, .pg h2, .pg .hx) { opacity:0; translate:0 16px; transition:opacity .6s var(--flow-in) var(--dl, 0ms), translate .7s var(--flow-in) var(--dl, 0ms); }
  html.mv :is(.beat, .pg h2, .pg .hx).seen { opacity:1; translate:none; }
  html.mv .seen .dc:not(.solid):not([data-step]), html.mv .fig.seen > canvas:not([data-step]) { animation:sweep .9s var(--ease) calc(var(--dl, 0ms) + 250ms) backwards; }
}