/* ============ 补充组件样式 ============ */

/* ---- 数据链节点（第二章） ---- */
/* 收起 = 随字宽收缩的胶囊；展开 = 卡片。宽度与文字长度匹配，不再长条 */
.chain{display:flex;flex-direction:column;align-items:center;gap:0;counter-reset:chn}
.ch-node{position:relative;display:block;width:186px;max-width:100%;
  border:2px solid var(--line-2);border-radius:99px;padding:11px 26px;text-align:center;
  background:var(--paper-2);box-shadow:var(--sh);cursor:pointer;margin-bottom:30px;
  transition:width 2.3s var(--ease-o),padding 2.3s var(--ease-o),border-radius 2.3s var(--ease-o),
             border-color .6s,background .6s,box-shadow .6s,transform .6s var(--ease)}
.ch-node:last-child{margin-bottom:0}
.ch-node .cn{display:block;font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap}
.ch-node .cn::before{counter-increment:chn;content:"0" counter(chn);
  font-family:var(--num);font-size:11.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.08em;margin-right:9px;vertical-align:1px}
.ch-node.on .cn::before{color:var(--teal)}
.ch-node:hover{border-color:var(--teal);transform:translateY(-2px)}
.ch-node.on{width:430px;max-width:100%;border-radius:var(--r);text-align:left;padding:14px 24px;
  border-color:var(--teal);background:var(--teal-s);box-shadow:var(--sh-h)}
.ch-node .cd{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.75;max-height:0;overflow:hidden;
  transition:max-height 2.5s var(--ease-o),margin .7s}
.ch-node.on .cd{max-height:200px;margin-top:8px}
/* 即将展开的下一个节点：与正在展开的节点同样的颜色变化，但保持收起形态（胶囊），作"马上轮到你"预告 */
.ch-node.up{border-color:var(--teal);background:var(--teal-s);box-shadow:var(--sh-h)}
.ch-node.up .cn::before{color:var(--teal)}
/* 连接箭头：3.5px 主色柱 + 15px 箭头，明显可辨 */
.ch-node:not(:last-child)::after{content:"";position:absolute;left:50%;margin-left:-1.75px;bottom:-30px;
  width:3.5px;height:30px;background:var(--teal);border-radius:2px;opacity:.78}
.ch-node:not(:last-child)::before{content:"";position:absolute;left:50%;margin-left:-7.5px;bottom:-30px;
  border-left:7.5px solid transparent;border-right:7.5px solid transparent;
  border-top:11px solid var(--teal);opacity:.92}

/* ---- 大金额块（3.65亿） ---- */
.bigmoney{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;background:var(--paper-2);
  border:1px solid var(--gold);border-radius:var(--r-l);padding:30px 32px;margin-top:28px;
  box-shadow:var(--sh-h);position:relative;overflow:hidden}
.bigmoney::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:99px;
  background:var(--gold-s);z-index:0}
.bm-left{position:relative;z-index:1}
.bm-k{font-size:12.5px;letter-spacing:.16em;color:var(--gold);font-weight:700;margin-bottom:8px}
.bm-v{font-family:var(--num);font-size:clamp(44px,5.6vw,72px);font-weight:800;color:var(--ink);line-height:1.05}
.bm-v small{font-size:.38em;font-weight:600;color:var(--ink-2)}
.bm-d{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.75}
.bm-d b{color:var(--ink)}
.bm-ex{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.bm-ex .ex{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:9px}
.bm-right{position:relative;z-index:1;align-self:center}

/* ---- mini 行 ---- */
.mini{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14px;color:var(--ink-2);
  line-height:1.65;border-bottom:1px dashed var(--line)}
.mini:last-child{border-bottom:0}
.mini .mk{width:24px;height:24px;border-radius:7px;background:var(--teal-s);color:var(--teal);
  display:grid;place-items:center;font-family:var(--num);font-size:12px;font-weight:700;flex:none;margin-top:2px}
.mini.lg{padding:14px 0;font-size:15px;color:var(--ink)}

/* ---- stat-stack（Renfe 三数字） ---- */
.stat-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat-stack .ss{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:16px 14px;box-shadow:var(--sh);transition:transform .4s var(--ease)}
.stat-stack .ss:hover{transform:translateY(-4px)}
.stat-stack .sv{display:block;font-family:var(--num);font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--teal)}
.stat-stack .sv small{font-size:.5em}
.stat-stack .ss.b .sv{color:var(--brick)}
.stat-stack .ss.g .sv{color:var(--gold)}
.stat-stack .sk{display:block;font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.55}

/* ---- 生命周期 pill 链 ---- */
.pillbox{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{padding:10px 18px;border-radius:99px;background:var(--paper-2);border:1.5px solid var(--line);
  font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;position:relative;
  transition:all .35s var(--ease);box-shadow:var(--sh)}
.pill:hover{transform:translateY(-3px);border-color:var(--teal);color:var(--teal)}
.pill.on{background:var(--teal);border-color:var(--teal);color:#fff}
.pill.on::after{content:attr(data-d);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-size:12px;font-weight:400;padding:8px 12px;border-radius:8px;
  white-space:nowrap;z-index:20;box-shadow:var(--sh-h)}

/* ---- 揭示浮层占位 ---- */
@media print{ .nav,#cur,#cur-ring,.toolbar,#flow{display:none} }

/* ---- 作者署名（封面 / 页脚） ---- */
.hero-by{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1);padding:var(--s-3);
  border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--paper-2) 74%,transparent);
  -webkit-box-shadow:var(--sh);box-shadow:var(--sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:540px}
.hero-by .av{position:relative;width:56px;height:56px;min-width:56px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:transparent;-webkit-box-shadow:0 6px 18px rgba(20,30,40,.18);box-shadow:0 6px 18px rgba(20,30,40,.18)}
.hero-by .av img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:50% 100%;object-position:50% 100%;border-radius:0}
.hero-by .by-t{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;line-height:1.32}
.hero-by .by-t .role{font-size:10px;letter-spacing:.22em;color:var(--gold);margin-bottom:2px}
.hero-by .by-t b{font-size:15.5px;color:var(--acc);font-weight:800;letter-spacing:.03em}
.hero-by .by-t small{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.hero-by .by-d{margin-top:var(--s-1);padding-top:var(--s-1);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;border-top:1px solid var(--line)}
.foot-by{width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--ink-2)}
.foot-by b{color:var(--acc);font-weight:800}
@media (max-width:640px){.hero-by{border-radius:var(--r-s)}.hero-by .by-d{width:100%;text-align:center}}

/* ---- 旧内核兼容补丁 ---- */
.nav{position:-webkit-sticky;position:sticky}
.glass,.nav,.toolbar,.tb{-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}

/* ---- 五场景翻卡：3+2 布局，窄屏逐级降列 ---- */
.flip-grid.g5{grid-template-columns:repeat(3,1fr)}
.flip-grid.g5 .flip{height:250px}
.flip-grid.g5 .q{font-size:15.5px}
@media (max-width:1000px){.flip-grid.g5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.flip-grid.g5{grid-template-columns:1fr}.flip-grid.g5 .flip{height:220px}}

/* ---- 全屏：补底色，避免全屏后边缘露白/露黑 ---- */
html:fullscreen,html:-webkit-full-screen,html:-ms-fullscreen{background:var(--paper);overflow:auto}
html:fullscreen body,html:-webkit-full-screen body{background:var(--paper)}

/* ---- 翻卡：hover 必须有明确的可点击提示 ---- */
.flip{-webkit-transition:-webkit-transform .42s var(--ease);transition:transform .42s var(--ease)}
.flip:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px)}
.flip:hover .flip-f.f{border-color:var(--teal);background:var(--teal-s);box-shadow:var(--sh-h)}
.f-badge{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:9px;
  background:var(--teal-s);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:.7;
  -webkit-transition:opacity .3s,background .3s,-webkit-transform .45s var(--ease);transition:opacity .3s,background .3s,transform .45s var(--ease);z-index:4}
.f-badge svg{width:15px;height:15px;fill:var(--teal)}
.flip:hover .f-badge{opacity:1;background:var(--teal);-webkit-transform:rotate(-30deg) scale(1.06);transform:rotate(-30deg) scale(1.06)}
.flip:hover .f-badge svg{fill:#fff}
.flip-f.f .hint{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.09em;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px}
.flip-f.f .hint::before{content:'';width:14px;height:14px;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224 48v96a16 16 0 0 1-16 16H88a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h120a16 16 0 0 1 16 16Z' opacity='0'/><path d='M128 72 96 104h32v48h32v-48h32l-32-32Z' opacity='0'/><path d='M224 128a96 96 0 1 1-29.9-69.7' fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round'/><path d='M224 40v56h-56' fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M224 128a96 96 0 1 1-29.9-69.7' fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round'/><path d='M224 40v56h-56' fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.flip:hover .flip-f.f .hint::before{-webkit-animation:spin-badge .9s var(--ease);animation:spin-badge .9s var(--ease)}
@-webkit-keyframes spin-badge{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}
@keyframes spin-badge{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- 封面：核心词独占一行并放大（编辑式高亮块，不用圆框） ---- */
.hero-key{font-size:26px;font-size:clamp(21px,2.5vw,33px);font-weight:800;color:var(--acc);
  letter-spacing:.03em;line-height:1.2;margin:16px 0 12px;display:inline-block;
  padding:9px 18px 9px 15px;border-radius:0 14px 14px 0;border-left:5px solid var(--gold);
  background:var(--gold-s);box-shadow:0 1px 0 rgba(201,138,22,.10)}
.hero-sub.kp{margin-bottom:0}
.hero-key + .hero-sub{margin-top:0}

/* ---- 作者署名：真实头像呼吸光点 ---- */
.hero-by .av::before,.hero-by .av::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(.5px);z-index:3}
.hero-by .av::before{width:6px;height:6px;top:-4px;right:-4px;background:radial-gradient(circle,#F5D78E 0%,rgba(245,215,142,0) 70%);-webkit-animation:sparkle 2.8s var(--ease) infinite;animation:sparkle 2.8s var(--ease) infinite}
.hero-by .av::after{width:5px;height:5px;bottom:0;left:-5px;background:radial-gradient(circle,#7DD3C0 0%,rgba(125,211,192,0) 70%);-webkit-animation:sparkle 2.8s var(--ease) infinite 1.4s;animation:sparkle 2.8s var(--ease) infinite 1.4s}
@-webkit-keyframes sparkle{0%,100%{opacity:.35;-webkit-transform:scale(.8);transform:scale(.8)}50%{opacity:1;-webkit-transform:scale(1.35);transform:scale(1.35)}}
@keyframes sparkle{0%,100%{opacity:.35;-webkit-transform:scale(.8);transform:scale(.8)}50%{opacity:1;-webkit-transform:scale(1.35);transform:scale(1.35)}}

/* ---- 摘要页：五个业务场景清单（下划线） ---- */
.scn-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;margin-top:10px}
.scn-list .u{display:inline-block;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--teal);padding-bottom:1px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}

/* ---- 情境光标：带动作提示时变成胶囊 ---- */
#cur.has-lb,#cur.has-lb.ring{width:auto;height:26px;min-width:26px;padding:0 13px;border:0;border-radius:99px;
  background:var(--teal);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;box-shadow:0 4px 14px rgba(14,97,84,.32)}
#cur.has-lb .cl{opacity:1;color:#fff;font-size:11.5px}

/* ---- 鼠标跟随高光（全局：贯穿所有页面卡片） ---- */
.card,.pcard{position:relative;overflow:hidden}
.card::after,.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(170px 170px at var(--mx,50%) var(--my,50%),
    rgba(var(--spot-rgb),.18),rgba(var(--spot-rgb),0) 70%);
  opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}
.card:hover::after,.pcard:hover::after{opacity:1}

/* ---- 每页核心关键词（统一特别设计：大一号 + 彩色粗下划线） ---- */
.kw{font-size:1.16em;font-weight:800;letter-spacing:.01em;line-height:1.45;
  color:var(--kw-c,var(--teal));border-bottom:3px solid var(--kw-c,var(--teal));
  padding-bottom:1px;cursor:default;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}
.kw:hover{opacity:.76}
.kw-teal{--kw-c:var(--teal)} .kw-gold{--kw-c:var(--gold)} .kw-brick{--kw-c:var(--brick)}
.kw-indigo{--kw-c:var(--indigo)} .kw-plum{--kw-c:var(--plum)} .kw-olive{--kw-c:var(--olive)}

/* ---- 章节模糊背景（第5页 CH.03） ---- */
.has-bg{overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 28%;
  filter:blur(10px) saturate(1.15);opacity:.42;
  -webkit-transform:scale(1.12);transform:scale(1.12)}
.sec-bg::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.3}
body.dark .sec-bg{opacity:.3}
body.dark .sec-bg::after{background:var(--paper);opacity:.55}
.has-bg .wrap{position:relative;z-index:1}

/* ---- 结尾页背景（CH.08 汇报总结：铁路行人） ---- */
/* 底图：调强存在感（更清晰、更亮），作为整体氛围；scale 1.0 取消放大、画面退远见更多环境 */
.ending .sec-bg{filter:blur(5px) saturate(1.16);opacity:.6;background-position:center;transform:scale(1.0)}
.ending .sec-bg::after{opacity:.32}
/* 不规则清晰光斑层：同图、全清晰，用多个椭圆遮罩透出，避开中央文字带 → 质感更强 */
.end-shards{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(IMG_BGEND);background-size:cover;background-position:center;
  -webkit-transform:scale(1.0);transform:scale(1.0);opacity:.96;
  -webkit-mask-image:
     radial-gradient(34% 42% at 11% 17%, #000 50%, transparent 72%),
     radial-gradient(42% 28% at 90% 13%, #000 48%, transparent 70%),
     radial-gradient(26% 44% at 94% 68%, #000 52%, transparent 74%),
     radial-gradient(38% 40% at 8% 79%, #000 50%, transparent 72%),
     radial-gradient(60% 12% at 50% 99%, #000 46%, transparent 72%);
  mask-image:
     radial-gradient(34% 42% at 11% 17%, #000 50%, transparent 72%),
     radial-gradient(42% 28% at 90% 13%, #000 48%, transparent 70%),
     radial-gradient(26% 44% at 94% 68%, #000 52%, transparent 74%),
     radial-gradient(38% 40% at 8% 79%, #000 50%, transparent 72%),
     radial-gradient(60% 12% at 50% 99%, #000 46%, transparent 72%);
  -webkit-mask-composite:source-over;mask-composite:add}
.end-shards::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.16}
body.dark .ending .sec-bg{opacity:.42}
body.dark .end-shards{opacity:.55}
body.dark .end-shards::after{background:var(--paper);opacity:.4}

/* ---- 整幅横幅英文标语（实心白字 + 投影，不用镂空） ---- */
.pcard.full .ban-cap{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  padding:46px 30px 22px;text-align:center;background:none}
.pcard.full .ban-cap .en{font-family:var(--num);font-weight:800;
  font-size:clamp(15px,2.2vw,25px);line-height:1.5;letter-spacing:.04em;
  color:#fff;text-transform:uppercase;text-shadow:0 2px 12px rgba(60,15,0,.55)}
.pcard.full .ban-cap .en b{color:#FFD27A;font-weight:800;text-shadow:0 2px 12px rgba(60,15,0,.55)}

/* ---- 超大 "data" 大字（左侧空白与人物呼应，衬线斜体特殊字体） ---- */
.pcard.full .bigword{position:absolute;left:2.5%;top:46%;transform:translateY(-50%);
  z-index:2;pointer-events:none;user-select:none;-webkit-user-select:none;
  font-family:Didot,"Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:700;line-height:.94;letter-spacing:-.025em;
  font-size:clamp(100px,18vw,280px);
  color:rgba(255,248,236,.94);
  filter:drop-shadow(0 12px 34px rgba(70,10,0,.38))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pcard.full .bigword{
    background:linear-gradient(104deg,#FFF9EE 6%,rgba(255,249,238,.96) 46%,rgba(255,209,132,.88) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
body.dark .pcard.full .bigword{color:rgba(255,244,224,.9)}

/* ============ 阅读进度条（顶部，始终可见） ============ */
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:62;background:transparent;pointer-events:none}
#progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));
  transition:width .12s linear;box-shadow:0 0 8px rgba(14,97,84,.5)}

/* ============ 当前章节角标（左下，常驻显示读到哪章） ============ */
#chBadge{position:fixed;left:18px;bottom:18px;z-index:58;display:flex;align-items:center;gap:9px;
  max-width:62vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:9px 15px;border-radius:99px;font-size:13.5px;font-weight:600;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  border:1px solid var(--line);box-shadow:var(--sh-h);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
#chBadge .bdot{width:9px;height:9px;border-radius:99px;background:var(--teal);flex:none;box-shadow:0 0 0 4px var(--teal-s)}
#chBadge .bt{color:var(--ink);letter-spacing:.02em}

/* ============ 目录面板（点工具条"目录"弹出，列出全部章节） ============ */
#toc{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  padding:40px;background:rgba(12,18,16,.5);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease-o),visibility .35s}
#toc.show{opacity:1;visibility:visible}
.toc-box{position:relative;width:min(960px,92vw);max-height:86vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:34px 36px 30px;box-shadow:var(--sh-b);transform:translateY(14px) scale(.98);
  transition:transform .4s var(--ease-o)}
#toc.show .toc-box{transform:none}
.toc-close{position:absolute;top:16px;right:18px;width:36px;height:36px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);
  font-size:22px;line-height:1;cursor:pointer;transition:transform .25s,background .25s,color .25s}
.toc-close:hover{transform:rotate(90deg);background:var(--teal);color:#fff;border-color:var(--teal)}
.toc-h{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.toc-sub{font-size:clamp(24px,3vw,34px);font-weight:800;margin:6px 0 24px;line-height:1.2}
.toc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.toc-i{display:flex;flex-direction:column;gap:4px;text-align:left;padding:15px 17px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);cursor:pointer;
  transition:transform .25s var(--ease-o),box-shadow .25s var(--ease-o),border-color .25s var(--ease-o)}
.toc-i:hover{transform:translateY(-3px);box-shadow:var(--sh-b);border-color:var(--teal)}
.toc-no{font-family:var(--num);font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.12em}
.toc-t{font-size:18px;font-weight:700;line-height:1.25}
.toc-d{font-size:13px;color:var(--ink-2);line-height:1.45}
@media(max-width:680px){
  .toc-grid{grid-template-columns:1fr}
  .toc-box{padding:28px 22px 24px}
  #chBadge{left:12px;bottom:12px;padding:8px 13px;font-size:12.5px}
  #progress{height:4px}
}

/* 目录按钮：工具条内与其它按钮同款 */
#tbToc.on{background:var(--teal);border-color:var(--teal)}
#tbToc.on svg{color:#fff}
#tbToc.on .lb{color:#fff}