/* 版式：1920×1080 固定画布按视口等比缩放，一屏一页，底部整条是“下一页”。
   视觉沿用问卷站：暖白纸面、衬线大字、手绘线条。演示需要在任何系统主题下保持同一观感，所以只用浅色。 */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-Italic.ttf) format('truetype'); }
/* 本机思源宋体按页面实际用字裁出的子集（tools/subset-fonts.py 生成），可变字重 */
@font-face { font-family: 'MemoSerif'; font-weight: 200 900; font-display: swap; src: url(fonts/NotoSerifSC-sub.woff) format('woff'); }

:root {
  --bg: #FAF9F5;
  --paper: #FFFFFF;
  --ink: #141413;
  --ink-2: #3D3D3A;
  --muted: #87867F;
  --faint: #D9D6CC;
  --line: #E6E4DD;
  --orange: #D97757;
  --orange-soft: #F6E4DB;
  --a: #7DAEE0; --a-deep: #3F78B5;
  --b: #EC968E; --b-deep: #BF5348;
  --c: #86C796; --c-deep: #3D8C53;

  --serif: 'Instrument Serif', 'MemoSerif', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --cn: 'MemoSerif', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --sans: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --s: 1;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); }
body { font-family: var(--cn); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.bg-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.bg-lines.on { opacity: 1; }

.stage {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s));
  user-select: none; -webkit-user-select: none;
}

/* ---------- 页 ---------- */
.page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; }
.page.active { opacity: 1; visibility: visible; transition: opacity .55s ease .1s, visibility 0s; }
.page.active .rise { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.head { position: absolute; left: 160px; top: 108px; right: 160px; }
.eyebrow { margin: 0 0 18px; font-family: var(--sans); font-size: 24px; letter-spacing: .14em; color: var(--muted); }
.title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 84px; line-height: 1.15; letter-spacing: -.005em; text-wrap: balance; }
.sub { margin: 16px 0 0; font-family: var(--serif); font-size: 36px; line-height: 1.45; color: var(--ink-2); }
.display { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 132px; line-height: 1.12; letter-spacing: -.01em; }
.lead { font-family: var(--serif); font-size: 40px; color: var(--ink-2); margin: 34px 0 0; }
.latin { font-family: 'Instrument Serif', serif; font-style: italic; }
.hint { position: absolute; left: 160px; top: 914px; margin: 0; font-family: var(--sans); font-size: 22px; color: var(--muted); letter-spacing: .04em; }
.replay {
  position: absolute; right: 160px; top: 906px; border: 0; background: none; padding: 6px 2px;
  font-family: var(--sans); font-size: 22px; color: var(--muted); letter-spacing: .06em;
  border-bottom: 1.5px solid var(--faint); transition: color .2s, border-color .2s;
}
.replay:hover { color: var(--orange); border-color: var(--orange); }

/* 文字压在画面上时，留一圈纸色晕，避免被线条咬掉 */
.halo { text-shadow: 0 0 22px var(--bg), 0 0 8px var(--bg), 0 0 3px var(--bg); }

/* ---------- 封面 ---------- */
.cover-inner { position: absolute; left: 300px; top: 300px; right: 300px; pointer-events: none; }
.brand { margin: 0 0 54px; font-family: var(--serif); font-size: 36px; }
.brand em, .end-foot em { color: var(--muted); font-style: italic; margin-left: 6px; }
.cover-inner .display, .cover-inner .lead, .cover-inner .brand { text-shadow: 0 0 26px var(--bg), 0 0 10px var(--bg), 0 0 4px var(--bg); }

/* ---------- 章节页 ---------- */
.div-inner { position: absolute; left: 300px; top: 250px; }
.div-no { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 200px; line-height: 1; color: var(--orange); }
.div-title { margin: 10px 0 0; font-family: var(--serif); font-weight: 600; font-size: 132px; line-height: 1.1; }
.div-sub { margin: 30px 0 0; font-family: var(--serif); font-size: 38px; color: var(--muted); word-spacing: .3em; }
.agenda { position: absolute; left: 300px; top: 820px; width: 1320px; height: 90px; overflow: visible; }
.agenda .ag-track { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.agenda .ag-done { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.agenda .ag-now { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.page.active .agenda .ag-now { animation: draw 1.4s .6s var(--ease-out) forwards; }
.agenda circle { fill: var(--bg); stroke: var(--faint); stroke-width: 2.5; }
.agenda circle.done { fill: var(--ink); stroke: var(--ink); }
.agenda circle.now { fill: var(--orange); stroke: var(--orange); }
.agenda text { font-family: var(--cn); font-size: 26px; fill: var(--muted); }
.agenda text.now { fill: var(--ink); font-weight: 600; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- 用户研究：一位画师的访谈 ---------- */
.who-avatar { position: absolute; left: 1540px; top: 100px; width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line); box-shadow: 0 26px 50px -30px rgba(20, 20, 19, .35); }
.who-facts { position: absolute; left: 160px; top: 460px; display: flex; }
.who-fact { width: 540px; }
.who-num { margin: 0; font-family: 'Instrument Serif', serif; font-size: 210px; line-height: 1; letter-spacing: -.01em; }
.who-num small { margin-left: 10px; font-family: var(--cn); font-size: 60px; font-weight: 600; }
.who-fact.hot .who-num { color: var(--orange); }
.who-cap { margin: 22px 0 0; font-family: var(--serif); font-size: 36px; color: var(--ink-2); }
.flip-box { top: 330px; height: 560px; cursor: pointer; }
.ref-box { top: 400px; height: 470px; }
/* 画面上的短标注：left/top 是文字中心 */
.r-tag { position: absolute; margin: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-family: var(--sans); font-size: 21px; color: var(--muted); letter-spacing: .06em; }
.r-tag.later { opacity: 0; transition: opacity .5s; }
.r-tag.later.on { opacity: 1; }
.r-say { font-family: var(--serif); font-size: 32px; color: var(--orange); letter-spacing: 0; text-shadow: 0 0 14px var(--bg), 0 0 5px var(--bg); }
.r-cap { font-family: var(--serif); font-size: 30px; color: var(--ink-2); letter-spacing: 0; }
.r-strike { font-family: var(--cn); font-size: 28px; letter-spacing: .04em; text-decoration: line-through; text-decoration-thickness: 2px; }
.r-key { font-family: var(--cn); font-size: 30px; color: var(--orange); letter-spacing: .04em; }
.quote-page { position: absolute; left: 260px; top: 270px; right: 160px; }
.quote-pre { margin: 0 0 44px; font-family: var(--serif); font-size: 40px; color: var(--muted); word-spacing: .3em; }
.quote-main { font-size: 136px; white-space: nowrap; }
.quote-by { margin: 56px 0 0; font-family: var(--cn); font-size: 40px; color: var(--ink-2); }
.quote-post { margin: 90px 0 0; font-family: var(--serif); font-size: 56px; color: var(--ink); }
.method-main { margin: 0 0 56px; font-family: var(--serif); font-weight: 600; font-size: 100px; line-height: 1.3; text-indent: -1em; }
.method-cost { margin: 70px 0 0; font-family: var(--serif); font-size: 44px; color: var(--ink); word-spacing: .2em; }
.method-cost em { font-style: normal; font-weight: 600; color: var(--orange); }

/* ---------- 问卷：每个创作方向一页，左右各一个数字 ---------- */
.survey .eyebrow { color: var(--kd); }
.fact { position: absolute; top: 370px; width: 720px; }
.big { margin: 0; font-family: 'Instrument Serif', var(--cn); font-size: 180px; line-height: .95; letter-spacing: -.01em; color: var(--kd); }
.big small { margin-left: 14px; font-family: var(--cn); font-size: 54px; letter-spacing: 0; color: var(--ink-2); }
.big.cn { font-family: var(--serif); font-weight: 600; font-size: 150px; line-height: 1.1; }
/* 完成委托：左边一张账单，右边是算出来的钱 */
.bill { position: absolute; left: 160px; top: 350px; width: 860px; }
.bill-row { display: flex; align-items: baseline; gap: 18px; margin: 0; padding: 14px 0; }
.bill-row span { font-family: var(--serif); font-size: 34px; color: var(--ink-2); white-space: nowrap; }
.bill-row i { flex: 1; border-bottom: 2.5px dotted var(--faint); transform: translateY(-10px); }
.bill-row b { font-family: 'Instrument Serif', var(--cn); font-weight: 400; font-size: 72px; line-height: 1; color: var(--kd); white-space: nowrap; }
.bill-row b small { margin-left: 10px; font-family: var(--cn); font-size: 26px; color: var(--muted); }
.payout { position: absolute; left: 1160px; top: 340px; width: 600px; border-left: 2.5px solid var(--line); padding-left: 64px; }
.pay + .pay { margin-top: 44px; }
.pay .big { font-size: 130px; }
.pay .say { margin-top: 10px; font-size: 32px; }
.how { margin: 6px 0 0; font-family: var(--sans); font-size: 21px; color: var(--muted); letter-spacing: .04em; }
.fact.third { top: 340px; width: 480px; }
.fact.third .viz { width: 480px; height: 130px; margin-top: 28px; }
.qtag { margin: 0 0 12px; font-family: var(--sans); font-size: 21px; letter-spacing: .06em; color: var(--muted); }
.say { margin: 20px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1.4; color: var(--ink-2); }
.viz { display: block; margin-top: 34px; width: 720px; height: 170px; overflow: visible; }
.viz .track { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; }
.viz .ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.viz .hot { fill: none; stroke: var(--kd); stroke-width: 5; stroke-linecap: round; }
.viz .ins { fill: none; stroke: var(--kd); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 10; }
.viz .swath { fill: none; stroke: var(--k); stroke-width: 36; stroke-linecap: round; opacity: .6; }
.viz .bar { fill: none; stroke: var(--kd); stroke-width: 14; stroke-linecap: round; }
.viz .bar.dim { stroke: var(--faint); }
.viz .est { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 6; }
.viz .dot { fill: var(--kd); }
.viz .hole { fill: none; stroke: var(--faint); stroke-width: 2.5; }
.viz text { font-family: var(--sans); font-size: 20px; fill: var(--muted); letter-spacing: .04em; }
.viz text.k { fill: var(--kd); font-weight: 600; }
/* 进页时：线画出来、点弹出来、其余淡入（--d 延迟，--to 画到哪） */
.viz .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.page.active .viz .draw { animation: drawTo var(--dur, .9s) var(--d, .5s) var(--ease-out) forwards; }
@keyframes drawTo { to { stroke-dashoffset: var(--to, 0); } }
.viz .pop, .viz .fade { opacity: 0; }
.viz .pop { transform-box: fill-box; transform-origin: center; }
.page.active .viz .pop { animation: pop .5s var(--d, .6s) var(--ease-out) forwards; }
.page.active .viz .fade { animation: fadeIn .6s var(--d, .6s) ease forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
.src { position: absolute; left: 160px; right: 160px; top: 914px; margin: 0; font-family: var(--sans); font-size: 21px; color: var(--muted); letter-spacing: .04em; }

/* ---------- 交互舞台 ---------- */
.box { position: absolute; left: 160px; width: 1600px; }
.box canvas { position: absolute; left: 0; top: 0; touch-action: none; }
.soft-box { top: 372px; height: 520px; }
.cog-box { top: 372px; height: 520px; }
.undo-box { top: 400px; width: 780px; height: 440px; }
.edit-box { top: 400px; width: 780px; height: 520px; }

.new-layer {
  position: absolute; left: 0; top: 0; height: 46px; padding: 0 22px 0 16px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--faint); border-radius: 999px; background: var(--bg);
  font-family: var(--sans); font-size: 21px; color: var(--ink-2);
  transition: border-color .2s, color .2s, transform .2s var(--ease-out);
}
.new-layer span { font-size: 28px; line-height: 1; margin-top: -3px; color: var(--orange); }
.new-layer:hover, .new-layer.flash { border-color: var(--orange); color: var(--orange); }
.new-layer:disabled { opacity: .4; cursor: not-allowed; }
.new-layer.pulse { animation: pulse .9s var(--ease-out) 2; }
@keyframes pulse { 50% { transform: scale(1.08); border-color: var(--orange); color: var(--orange); } }

.stage-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  font-family: var(--sans); font-size: 20px; color: var(--orange); letter-spacing: .04em;
  transform: translate(-50%, -150%); opacity: 0; transition: opacity .25s;
  text-shadow: 0 0 8px var(--bg), 0 0 3px var(--bg);
}
.stage-tip.on { opacity: 1; }

/* ---------- .memoline ---------- */
.memo-title { margin: -8px 0 0; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 150px; line-height: 1.02; letter-spacing: -.01em; }
.memo-zone {
  position: absolute; left: 960px; top: 112px; width: 800px; height: 400px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px;
  box-shadow: 0 30px 60px -40px rgba(20, 20, 19, .28);
  cursor: crosshair;
}
.memo-zone canvas { position: absolute; left: 0; top: 0; touch-action: none; }
.pen { position: absolute; left: 0; top: 0; width: 60px; height: 200px; margin: -190px 0 0 -14px; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: visible; }
.pen.on { opacity: 1; }
.chain { position: absolute; left: 160px; top: 620px; width: 1600px; height: 250px; overflow: hidden; }
.chain-track { position: absolute; left: 0; top: 0; height: 100%; transition: transform .7s var(--ease-out); }
.fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.blk { position: absolute; top: 34px; width: 176px; height: 88px; border-radius: 10px; overflow: hidden; }
.blk canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.blk.state { background: var(--paper); border: 1.5px solid var(--faint); }
.blk.event { border: 1.5px solid var(--ec); background: color-mix(in srgb, var(--ec) 13%, var(--paper)); }
.blk.fresh { animation: blkIn .6s var(--ease-out) both; }
@keyframes blkIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.link { position: absolute; top: 76px; width: 44px; height: 4px; }
.link::before { content: ''; position: absolute; left: 8px; right: 8px; top: 1px; height: 2px; background: var(--faint); }
.blk-label { position: absolute; top: 146px; width: 176px; text-align: center; font-family: var(--cn); font-size: 30px; color: var(--ink-2); animation: blkIn .6s var(--ease-out) both; }
.blk-label.ev { color: var(--orange); }
.chain-more { position: absolute; top: 46px; font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--muted); transition: left .7s var(--ease-out), opacity .4s; }

/* ---------- 实机演示 ---------- */
/* 精确撤销：左边示意动画，右边实机 GIF（录屏小，按框高放大）；文件不在时显示占位 */
.clip { position: absolute; left: 1000px; top: 372px; width: 760px; height: 520px; margin: 0; display: flex; align-items: center; justify-content: center; }
.clip img { display: none; height: 100%; width: auto; max-width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -36px rgba(20, 20, 19, .35); }
.clip.ready img { display: block; }
.clip.ready .clip-empty { display: none; }
.clip-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.clip-empty p { margin: 0; font-family: var(--serif); font-size: 40px; color: var(--muted); }
.clip-empty small { font-family: var(--sans); font-size: 20px; color: var(--faint); letter-spacing: .04em; }
.clip-dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clip-dash rect { width: calc(100% - 4px); height: calc(100% - 4px); fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 10 12; }
/* 事件编辑：实机截图改前 → 改后 */
.shots { position: absolute; left: 1000px; top: 372px; width: 760px; height: 520px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
.shots img { height: 320px; width: auto; background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -36px rgba(20, 20, 19, .35); }
.shots-arrow { width: 56px; height: 24px; flex: none; overflow: visible; }
.shots-arrow path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 设计树类比 ---------- */
.tree-panel { position: absolute; left: 160px; top: 330px; width: 470px; }
.tree-cap { margin: 0 0 14px; font-family: var(--sans); font-size: 22px; color: var(--muted); letter-spacing: .08em; }
.tree { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.tree-row { position: relative; }
.tree-row .tr-main {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px 12px 16px;
  border: 0; background: none; border-radius: 10px; text-align: left;
  font-family: var(--cn); font-size: 30px; color: var(--ink);
  transition: background .2s, color .2s;
}
.tree-row .tr-main:hover { background: rgba(20, 20, 19, .04); }
.tree-row .tr-icon { flex: none; width: 26px; height: 26px; color: var(--muted); }
.tree-row .tr-name { flex: 1; }
.tree-row .tr-val { font-family: var(--sans); font-size: 21px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tree-row.sel .tr-main { color: var(--orange); }
.tree-row.sel .tr-icon { color: var(--orange); }
.tree-row.off .tr-name, .tree-row.off .tr-val { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.tree-row.off .tr-icon { color: var(--faint); }
.tr-eye {
  position: absolute; right: -52px; top: 13px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--faint); background: var(--bg); display: grid; place-items: center; color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
}
.tr-eye svg { width: 22px; height: 22px; }
.tr-eye:hover { border-color: var(--orange); color: var(--orange); }
.tree-row.off .tr-eye { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); }
.tr-slider { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.tr-slider > div { overflow: hidden; min-height: 0; padding: 0 12px 0 56px; }
.tree-row.sel .tr-slider { grid-template-rows: 1fr; }
.tr-slider input { width: 100%; margin: 8px 0 16px; accent-color: var(--orange); height: 28px; cursor: grab; }
.tree-row::before { content: ''; position: absolute; left: -21px; top: 31px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--faint); }
.tree-row.rebuild::before { animation: rebuild .8s ease-out; }
@keyframes rebuild { 0% { background: var(--orange); border-color: var(--orange); transform: scale(1.5); } 100% { background: var(--bg); border-color: var(--faint); transform: scale(1); } }
.tree-map { margin-top: 34px; padding-left: 16px; }
.tree-map p { margin: 0 0 10px; font-family: var(--cn); font-size: 26px; color: var(--muted); }
.tree-map b { font-weight: 600; color: var(--ink); margin-left: 6px; }
.tree-map .glyph { display: inline-block; width: 34px; color: var(--orange); font-family: var(--sans); }
.tree-map p { transition: color .4s; }
.tree-map p b { transition: color .4s; }
.tree-map p.on { color: var(--ink); }
.tree-map p.on b { color: var(--orange); }
.tree-view { position: absolute; left: 700px; top: 290px; width: 1100px; height: 600px; cursor: grab; }
.tree-view:active { cursor: grabbing; }
.tree-view canvas { position: absolute; left: 0; top: 0; touch-action: none; }
.tree-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--sans); font-size: 26px; color: var(--muted); }
.tree-hint { top: 920px; }

/* ---------- 事件编辑 ---------- */
.edit-tools {
  position: absolute; z-index: 5; display: flex; gap: 4px; padding: 6px;
  background: var(--ink); border-radius: 999px; transform: translate(-50%, -100%);
  box-shadow: 0 14px 30px -14px rgba(20, 20, 19, .5);
  animation: toolsIn .3s var(--ease-out);
}
.edit-tools button { border: 0; background: none; color: var(--bg); font-family: var(--sans); font-size: 21px; padding: 8px 18px; border-radius: 999px; transition: background .15s, color .15s; }
.edit-tools button:hover { background: var(--orange); color: #fff; }
@keyframes toolsIn { from { opacity: 0; transform: translate(-50%, -80%); } }

/* ---------- 思维导图 ---------- */
.mindmap { position: absolute; left: 600px; top: 290px; width: 1200px; height: 660px; overflow: visible; }
.mindmap text { font-family: var(--serif); text-anchor: middle; dominant-baseline: central; }
.mm-center { font-size: 66px; font-weight: 600; fill: var(--ink); cursor: pointer; }
.mm-branch { font-size: 40px; font-weight: 600; fill: var(--ink); }
.mm-leaf { font-size: 29px; fill: var(--ink-2); }
.mm-leaf.plan { fill: var(--muted); }
.mm-host { font-size: 40px; font-weight: 600; fill: var(--muted); }
.mm-hostsub { font-family: var(--sans) !important; font-size: 21px; fill: var(--muted); letter-spacing: .06em; }
.mindmap path { fill: none; stroke-linecap: round; }
.mm-edge { stroke: var(--ink); stroke-width: 2.4; opacity: .55; }
.mm-edge.plan { stroke-dasharray: 3 10; opacity: .7; stroke: var(--muted); }
.mm-ring { stroke: var(--orange); stroke-width: 3.5; }
.map-switch { position: absolute; left: 160px; top: 520px; display: flex; gap: 0; border: 1.5px solid var(--faint); border-radius: 999px; padding: 4px; }
.map-switch button { border: 0; background: none; padding: 10px 26px; border-radius: 999px; font-family: var(--sans); font-size: 22px; color: var(--muted); transition: background .3s, color .3s; }
.map-switch button.on { background: var(--ink); color: var(--bg); }
.map-legend { position: absolute; left: 160px; top: 610px; margin: 0; font-family: var(--sans); font-size: 21px; color: var(--muted); opacity: 0; transition: opacity .6s; }
.map-legend.on { opacity: 1; }

/* ---------- 长期价值 ---------- */
.ambient { position: absolute; left: 0; top: 0; pointer-events: none; }
.future-notes { position: absolute; left: 160px; top: 800px; }
.future-notes p { margin: 0 0 18px; font-family: var(--serif); font-size: 34px; color: var(--ink-2); display: flex; align-items: center; gap: 22px; }
.swatch { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--c); }
.data-head { z-index: 1; }
.data-head .sub { margin-top: 18px; line-height: 1.38; }
.data-note { margin: 14px 0 0; font-family: var(--sans); font-size: 21px; color: var(--muted); letter-spacing: .06em; }
/* 论文从左边流向分界线，过线以后变成创作流；“记艺线”标在分界线顶上（x 与 value.js 的 DX 一致） */
.data-tag { position: absolute; margin: 0; font-family: var(--sans); font-size: 21px; letter-spacing: .14em; color: var(--muted); }
.data-tag.cut { color: var(--orange); font-family: var(--cn); font-size: 26px; font-weight: 600; letter-spacing: .08em; width: 200px; margin-left: -100px; text-align: center; }

/* 预期收入与价值：三列对着长期价值的三页，顶上一条线串起来（列的 left 与 value.js 的 XS 一致） */
.rev-line { position: absolute; left: 160px; top: 318px; width: 1600px; height: 24px; margin: 0; }
.rev-line .plan { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 10; }
.rev-line circle { fill: var(--bg); stroke: var(--muted); stroke-width: 2.5; }
.rev-line circle.on { fill: var(--ink); stroke: var(--ink); }
.rev { position: absolute; top: 362px; width: 480px; }
.rev-sec { margin: 0; font-family: var(--sans); font-size: 22px; letter-spacing: .06em; color: var(--ink-2); }
.rev-k { margin: 30px 0 2px; font-family: var(--sans); font-size: 20px; letter-spacing: .14em; color: var(--muted); }
.rev-big { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 128px; line-height: 1.1; color: var(--orange); }
.rev-how { margin: 8px 0 0; font-family: var(--serif); font-size: 30px; line-height: 1.45; color: var(--ink-2); }
.rev-val { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.25; }
.rev-ref { margin: 14px 0 0; font-family: var(--sans); font-size: 21px; line-height: 1.55; letter-spacing: .03em; color: var(--muted); }

/* ---------- 结尾：如果我当时…… ---------- */
.end-inner { position: absolute; left: 260px; right: 160px; top: 380px; }
.reel { display: flex; align-items: center; gap: 36px; }
.reel-prefix { flex: none; font-family: var(--serif); font-weight: 600; font-size: 104px; line-height: 1.1; text-shadow: 0 0 26px var(--bg), 0 0 10px var(--bg); }
.reel-window { position: relative; flex: 1; height: 200px; overflow: hidden; }
.reel-item {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 40px; line-height: 1.45;
  text-shadow: 0 0 16px var(--bg), 0 0 6px var(--bg);
  animation: reelUp var(--d, .3s) var(--ease-out) both;
}
.reel-item.out { animation: reelOut var(--d, .3s) ease-in both; }
@keyframes reelUp { from { opacity: 0; transform: translateY(70%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes reelOut { to { opacity: 0; transform: translateY(-70%); filter: blur(2px); } }
.reel-final {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-family: var(--serif); font-weight: 700; color: var(--orange); font-size: 104px; white-space: nowrap;
  text-shadow: 0 0 26px var(--bg), 0 0 10px var(--bg);
  animation: finalIn .7s var(--ease-out) both;
}
.reel-final .ul { position: absolute; left: 0; bottom: -10px; width: 100%; height: 22px; overflow: visible; }
.reel-final .ul path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s .5s var(--ease-out) forwards; }
@keyframes finalIn { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
.reel-replay { margin-top: 30px; border: 0; background: none; padding: 0; font-family: var(--sans); font-size: 22px; color: var(--muted); opacity: 0; transition: opacity .3s, color .2s; }
.reel-replay.show { opacity: 1; }
.reel-replay:hover { color: var(--orange); }
.end-foot { position: absolute; left: 260px; top: 860px; margin: 0; font-family: var(--serif); font-size: 34px; color: var(--ink-2); word-spacing: .3em; text-shadow: 0 0 16px var(--bg), 0 0 6px var(--bg); }

/* ---------- 命题 ---------- */
.thesis { position: absolute; left: 260px; top: 250px; right: 200px; }
.thesis-pre { margin: 0 0 40px; font-family: var(--serif); font-size: 44px; color: var(--muted); }
.thesis-main { position: relative; display: inline-block; font-size: 136px; white-space: nowrap; }
.thesis-main .ul { position: absolute; left: 0; bottom: -14px; width: 100%; height: 26px; overflow: visible; }
.thesis-main .ul path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.page.active .thesis-main .ul path { animation: draw 1.2s 1s var(--ease-out) forwards; }
.thesis-post { margin: 70px 0 0; font-family: var(--serif); font-size: 56px; color: var(--ink); }

/* ---------- 底部翻页条 ---------- */
.pager {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px; z-index: 20;
  display: flex; align-items: center; gap: 26px; padding: 0 120px 0 110px;
  cursor: pointer;
}
.pager::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(250, 249, 245, 0), var(--bg) 45%); z-index: -1; }
.pager-back { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid transparent; background: none; font-size: 34px; line-height: 1; color: var(--muted); padding: 0 0 4px; transition: border-color .2s, color .2s; }
.pager-back:hover { border-color: var(--faint); color: var(--ink); }
.pager-sec { flex: none; min-width: 120px; font-family: var(--sans); font-size: 21px; color: var(--muted); letter-spacing: .1em; }
.pager-line { flex: 1; height: 24px; overflow: visible; }
.pl-track { fill: none; stroke: var(--line); stroke-width: 2; }
.pl-fill { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; transition: stroke-dashoffset .8s var(--ease-out); }
.pager-count { flex: none; font-family: var(--sans); font-size: 21px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pager-next { flex: none; font-family: var(--sans); font-size: 34px; color: var(--ink); transition: transform .25s var(--ease-out), color .2s; }
.pager:hover .pager-next { transform: translateX(8px); color: var(--orange); }
.pager.last .pager-next { opacity: .25; }
.pager.first .pager-back { visibility: hidden; }

.debug-err { position: fixed; left: 8px; bottom: 8px; z-index: 99; margin: 0; max-width: 60vw; padding: 6px 10px; background: #fff; color: #b00; font: 12px/1.4 monospace; white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  .page.active .rise { animation: none; }
  .chain-track, .pl-fill { transition: none; }
  .page.active .viz .draw { animation: none; stroke-dashoffset: var(--to, 0); }
  .page.active .viz .pop, .page.active .viz .fade { animation: none; opacity: 1; }
}