/* ============================================================
   生态优先 绿色发展之探索 · 讲座演示网页
   设计系统：生态绿 + 大漠沙金｜浅色默认 / 深色一键切换
   舞台固定 1600×900（16:9），等比缩放适配桌面与手机
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --stage-w:1600px; --stage-h:900px;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","Source Han Serif CN",STSong,SimSun,Georgia,serif;
  --num:"DIN Alternate","Bahnschrift","Helvetica Neue",Arial,var(--sans);
  --r-s:6px; --r-m:12px; --r-l:18px;
  --pad-x:74px; --pad-y:52px;
}
html[data-theme="light"]{
  --bg:#f2f5ef; --bg2:#e7eee4;
  --stage:#fbfcfa;
  --surface:#ffffff; --surface2:#f4f8f2; --surface3:#eef4ec;
  --ink:#12241b; --ink2:#2f4a3c; --muted:#6b8074; --faint:#93a79b;
  --line:rgba(18,36,27,.12); --line2:rgba(18,36,27,.07);
  --brand:#1c7a4b; --brand2:#2f9e63; --brand-soft:#e3f2e8; --brand-ink:#0e4d2f;
  --sand:#b8791c; --sand2:#d79b34; --sand-soft:#fbf1dd; --sand-ink:#7d5109;
  --clay:#a8442a; --clay-soft:#fbeae5;
  --shadow:0 1px 2px rgba(18,36,27,.05), 0 8px 26px -12px rgba(18,36,27,.16);
  --shadow-s:0 1px 2px rgba(18,36,27,.06), 0 4px 14px -8px rgba(18,36,27,.14);
  --scrim:linear-gradient(100deg,rgba(8,26,17,.86) 0%,rgba(8,26,17,.56) 44%,rgba(8,26,17,.10) 82%,rgba(8,26,17,.02) 100%);
  --pat:rgba(18,36,27,.045);
}
html[data-theme="dark"]{
  --bg:#070d0a; --bg2:#0b130f;
  --stage:#0d1712;
  --surface:#14211a; --surface2:#18271f; --surface3:#1e2f26;
  --ink:#e9f2ec; --ink2:#c3d4c9; --muted:#8fa79a; --faint:#6d8579;
  --line:rgba(233,242,236,.14); --line2:rgba(233,242,236,.08);
  --brand:#4ecf8f; --brand2:#38b478; --brand-soft:rgba(78,207,143,.14); --brand-ink:#8ff0bd;
  --sand:#eab96a; --sand2:#d69f42; --sand-soft:rgba(234,185,106,.14); --sand-ink:#f4d3a0;
  --clay:#e58a6b; --clay-soft:rgba(229,138,107,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7);
  --shadow-s:0 1px 2px rgba(0,0,0,.35), 0 5px 16px -9px rgba(0,0,0,.55);
  --scrim:linear-gradient(100deg,rgba(4,10,7,.94) 0%,rgba(4,10,7,.80) 48%,rgba(4,10,7,.34) 100%);
  --pat:rgba(233,242,236,.05);
}

/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit}
::selection{background:var(--brand);color:#fff}

#viewport{position:fixed;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(1200px 620px at 12% -8%,var(--bg2),transparent 70%),
    radial-gradient(900px 520px at 108% 106%,var(--bg2),transparent 70%),
    var(--bg);}

#stage{position:relative;width:var(--stage-w);height:var(--stage-h);flex:none;
  background:var(--stage);overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.45);
  transform-origin:center center;transition:background .35s ease}
/* 等高线纹理底 */
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'><g fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='1.1'><path d='M-40 760 C 180 700 320 800 520 742 S 880 640 1120 706 1500 760 1680 700'/><path d='M-40 812 C 200 752 340 852 540 794 S 900 692 1140 758 1520 812 1700 752'/><path d='M-40 690 C 160 636 300 726 500 674 S 860 578 1100 640 1480 692 1660 636'/><path d='M-40 128 C 220 76 400 168 640 112 S 1040 22 1280 84 1560 132 1680 88'/><path d='M-40 74 C 200 26 380 114 620 60 S 1020 -28 1260 32 1540 82 1660 38'/></g></svg>");
  background-size:1600px 900px;opacity:.9;mix-blend-mode:var(--pat-blend,normal)}

/* ---------- 3. 幻灯片骨架 ---------- */
.slide{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;
  padding:var(--pad-y) var(--pad-x) 0;opacity:0}
.slide.on{display:flex;opacity:1;animation:slideIn .5s cubic-bezier(.22,.7,.24,1) backwards}
@keyframes slideIn{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}
.slide.leaving{display:flex;animation:slideOut .22s ease both}
@keyframes slideOut{to{opacity:0;transform:translateY(-8px)}}

.s-head{flex:none;position:relative;padding-bottom:14px;margin-bottom:22px}
.s-head:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand2) 34%,var(--sand2) 76%,var(--sand) 100%);opacity:.9}
.s-kicker{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;letter-spacing:.06em;
  color:var(--brand);font-weight:600;margin-bottom:4px}
.s-kicker:before{content:"";width:20px;height:2px;background:var(--sand2);border-radius:2px}
.s-title{margin:0;font-family:var(--serif);font-weight:700;font-size:39px;line-height:1.22;letter-spacing:.01em;color:var(--ink)}
.s-title small{display:block;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--muted);letter-spacing:.02em;margin-top:6px}
.s-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.s-foot{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--faint);letter-spacing:.04em;border-top:1px solid var(--line2);margin-top:10px}
.s-foot .brandmark{display:inline-flex;align-items:center;gap:8px}
.s-foot .brandmark i{width:14px;height:14px;border-radius:50% 50% 50% 2px;background:linear-gradient(140deg,var(--brand),var(--sand2));display:inline-block}
.s-no{font-family:var(--num);letter-spacing:.1em}

/* 无头部（封面/章头/致谢） */
.slide.bare{padding:0}
.slide.bare .s-body{gap:0}

/* ---------- 4. 文字组件 ---------- */
.lead{font-size:20px;line-height:1.72;color:var(--ink2)}
p{margin:0 0 10px}
strong{color:var(--ink);font-weight:700}
em{font-style:normal;color:var(--brand);font-weight:700}
u,.hl{ text-decoration:none;color:var(--sand-ink);background:linear-gradient(transparent 62%,var(--sand-soft) 62%);font-weight:700}
.dim{color:var(--muted)}
.src{font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.src:before{content:"— ";}

ul.bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
ul.bul>li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:var(--ink2)}
ul.bul>li:before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;
  background:var(--brand);transform:rotate(45deg);opacity:.85}
ul.bul.sand>li:before{background:var(--sand2)}
ul.bul>li>ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
ul.bul>li>ul>li{position:relative;padding-left:18px;font-size:15px;color:var(--muted)}
ul.bul>li>ul>li:before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--faint)}

ol.num{list-style:none;counter-reset:n;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ol.num>li{counter-increment:n;position:relative;padding-left:38px;font-size:16.5px;line-height:1.6;color:var(--ink2)}
ol.num>li:before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.02em;
  font-family:var(--num);font-size:17px;font-weight:700;color:var(--sand);letter-spacing:.02em}

.q{position:relative;padding:14px 18px 14px 20px;border-radius:var(--r-m);background:var(--surface2);
  border-left:4px solid var(--brand);font-size:16.5px;line-height:1.68;color:var(--ink2)}
.q .who{display:block;margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:.03em}
.q.sand{border-left-color:var(--sand2);background:var(--sand-soft);color:var(--sand-ink)}
.q.clay{border-left-color:var(--clay);background:var(--clay-soft)}

/* ---------- 5. 卡片 / 网格 ---------- */
.grid{display:grid;gap:14px;min-height:0}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)} .g2r{grid-template-rows:repeat(2,1fr)}
.row{display:flex;gap:16px;min-height:0}
.col{display:flex;flex-direction:column;gap:14px;min-height:0}
.fill{flex:1;min-height:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px 18px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;min-width:0}
.card.tint{background:var(--surface2)}
.card.branded{border-color:color-mix(in srgb,var(--brand) 32%,transparent)}
.card.sandy{border-color:color-mix(in srgb,var(--sand2) 40%,transparent);background:var(--sand-soft)}
.card h4{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.01em;
  display:flex;align-items:center;gap:8px}
.card h4 .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.card p,.card li{font-size:15px;line-height:1.6;color:var(--ink2)}
.card .idx{position:absolute;right:12px;top:6px;font-family:var(--num);font-size:34px;font-weight:700;
  color:var(--line);line-height:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:13px;font-weight:600;background:var(--brand-soft);color:var(--brand-ink);letter-spacing:.02em}
.chip.sand{background:var(--sand-soft);color:var(--sand-ink)}
.chip.gray{background:var(--surface3);color:var(--muted)}
.chip.clay{background:var(--clay-soft);color:var(--clay)}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;
  box-shadow:var(--shadow-s);position:relative;overflow:hidden;min-width:0}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand),var(--sand2))}
.kpi .v{font-family:var(--num);font-size:33px;font-weight:700;line-height:1.05;color:var(--brand);letter-spacing:.01em}
.kpi .v span{font-size:15px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:.02em}
.kpi.sand .v{color:var(--sand)} .kpi.clay .v{color:var(--clay)}
.kpi .k{font-size:13.5px;color:var(--muted);margin-top:4px;letter-spacing:.03em;line-height:1.4}
.kpi .sub{font-size:12.5px;color:var(--faint);margin-top:2px}

/* 数字环（三北/战役） */
.ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:2px dashed color-mix(in srgb,var(--brand) 55%,transparent);background:var(--surface);
  box-shadow:var(--shadow-s);padding:8px}
.ring b{display:block;font-family:var(--num);font-size:24px;color:var(--brand);line-height:1.1}
.ring i{font-style:normal;font-size:12.5px;color:var(--muted);display:block;margin-top:2px;line-height:1.3}

/* ---------- 6. 图片 ---------- */
.fig{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--surface3);
  border:1px solid var(--line);box-shadow:var(--shadow-s);min-height:0}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);cursor:zoom-in}
.fig:hover img{transform:scale(1.045)}
.fig figcaption,.fig .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 8px;
  font-size:12.5px;color:#fff;line-height:1.4;letter-spacing:.02em;
  background:linear-gradient(transparent,rgba(6,18,12,.82));pointer-events:none}
.fig.contain img,.fig.map img{object-fit:contain;background:var(--surface)}
.fig.map{background:var(--surface)}
.fig.plain{border:none;box-shadow:none;background:none}
.fig.plain img{border-radius:var(--r-m)}
.figwrap{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.figwrap .cap2{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.4}
.ph-grid{display:grid;gap:10px;min-height:0}

/* ---------- 7. 图表 ---------- */
.chart{width:100%;min-height:0;position:relative}
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:10px 12px 6px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;min-height:0;min-width:0}
.chartbox .ct{font-size:14px;font-weight:700;color:var(--ink2);padding:2px 4px 6px;display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.chartbox .ct em{font-style:normal;font-weight:600;color:var(--brand)}
.chartbox .cs{font-size:12px;color:var(--faint);padding:6px 4px 2px}
/* .grow 同时作为弹性占位工具类：在纵向 flex 容器里必须显式 grow 才能拿到高度 */
.grow{flex:1 1 auto;min-height:0;min-width:0}
.chartbox.grow{flex:1 1 auto;min-height:0}
.svgbox.grow{flex:1 1 auto;min-height:0}

/* ---------- 8. 表格 ---------- */
table.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
table.tb th,table.tb td{padding:7px 9px;text-align:center;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2)}
table.tb th{background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:13px;line-height:1.3}
table.tb thead tr:first-child th{border-top:none}
table.tb td:first-child,table.tb th:first-child{text-align:left;font-weight:600;color:var(--ink)}
table.tb tbody tr:hover{background:var(--surface2)}
table.tb tr:last-child td{border-bottom:none}
table.tb td.num{font-family:var(--num);letter-spacing:.01em}
table.tb td.tot{font-weight:700;color:var(--sand-ink);background:var(--sand-soft)}
table.tb td:last-child,table.tb th:last-child{border-right:none}
table.tb.sm{font-size:12.6px} table.tb.sm th,table.tb.sm td{padding:5px 7px}

/* ---------- 9. 时间轴 ---------- */
.tl{position:relative;padding-left:26px;display:flex;flex-direction:column;gap:10px}
.tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--brand),var(--sand2))}
.tl .it{position:relative}
.tl .it:before{content:"";position:absolute;left:-22px;top:.5em;width:9px;height:9px;border-radius:50%;
  background:var(--stage);border:2.5px solid var(--brand)}
.tl .it.sand:before{border-color:var(--sand2)}
.tl .y{font-family:var(--num);font-weight:700;color:var(--brand);font-size:15.5px;letter-spacing:.02em}
.tl .it.sand .y{color:var(--sand)}
.tl .tx{font-size:14.8px;color:var(--ink2);line-height:1.55}

/* 横向时间轴 */
.tlx{display:flex;align-items:stretch;gap:0;position:relative}
.tlx:after{content:"";position:absolute;left:4%;right:4%;top:26px;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--sand2))}
.tlx .n{flex:1;text-align:center;position:relative;padding:0 6px}
.tlx .n .d{width:14px;height:14px;border-radius:50%;background:var(--stage);border:3px solid var(--brand);margin:20px auto 10px;position:relative;z-index:2}
.tlx .n.sandy .d{border-color:var(--sand2)}
.tlx .n .y{font-family:var(--num);font-weight:700;font-size:15px;color:var(--ink)}
.tlx .n .t{font-size:13.4px;color:var(--ink2);line-height:1.45;margin-top:2px}

/* ---------- 10. 条文 / 法典块 ---------- */
.law{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s)}
.law .lb{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--brand-soft);
  color:var(--brand-ink);font-size:13.5px;font-weight:700;letter-spacing:.04em;border-bottom:1px solid var(--line2)}
.law .lc{padding:12px 16px;font-size:15.4px;line-height:1.75;color:var(--ink2)}
.law .lc.origin{font-family:var(--serif)}
.law.sandy .lb{background:var(--sand-soft);color:var(--sand-ink)}

/* ---------- 11. 封面 / 章节页 ---------- */
.cover{position:absolute;inset:0;overflow:hidden;background:#08150f}
.cover .bg{position:absolute;inset:0}
.cover .bg img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
.cover .scrim{position:absolute;inset:0;background:var(--scrim)}
.cover .fg{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:0 92px;color:#fff}
.cover .tagline{display:inline-flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.28em;
  color:#cfe9d8;margin-bottom:18px}
.cover .tagline:before{content:"";width:44px;height:2px;background:linear-gradient(90deg,var(--sand2),transparent)}
.cover h1{margin:0;font-family:var(--serif);font-size:78px;line-height:1.16;font-weight:700;letter-spacing:.04em;
  text-shadow:0 8px 40px rgba(0,0,0,.5)}
.cover h1 .g{background:linear-gradient(100deg,#ffffff 8%,#a8ecc5 52%,#f0cf8e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover .sub{margin-top:20px;font-size:21px;letter-spacing:.14em;color:#d9e9df}
.cover .meta{margin-top:44px;display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.cover .meta .who{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:.08em}
.cover .meta .role{font-size:15px;color:#bcd4c4;letter-spacing:.06em;line-height:1.6}
.cover .meta .sep{width:1px;height:44px;background:rgba(255,255,255,.28)}

.divider{position:absolute;inset:0;overflow:hidden;background:#08150f}
.divider .bg{position:absolute;inset:0}
.divider .bg img{width:100%;height:100%;object-fit:cover;animation:kb 30s ease-in-out infinite alternate}
.divider .scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(8,21,15,.92) 0%,rgba(8,21,15,.72) 42%,rgba(8,21,15,.18) 78%,rgba(8,21,15,.42) 100%)}
.divider .fg{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 92px;color:#fff}
.divider .cn{font-family:var(--num);font-size:150px;font-weight:700;line-height:.86;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.22));-webkit-background-clip:text;background-clip:text;color:transparent}
.divider .ck{font-size:14px;letter-spacing:.34em;color:#a9d7b8;margin:14px 0 8px}
.divider h2{margin:0;font-family:var(--serif);font-size:60px;font-weight:700;letter-spacing:.06em}
.divider .d{margin-top:18px;max-width:760px;font-size:17px;line-height:1.8;color:#d5e7db}
.divider .marks{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.divider .marks span{padding:5px 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-size:13.5px;color:#e8f3ec;letter-spacing:.04em}

/* 提纲页 */
.toc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:center}
.toc .i{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.toc .i:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.toc .i b{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--num);font-size:20px;color:#fff;background:linear-gradient(140deg,var(--brand),var(--brand2))}
.toc .i:nth-child(even) b{background:linear-gradient(140deg,var(--sand2),var(--sand))}
.toc .i span{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.03em}
.toc .i em{position:absolute;right:14px;top:8px;font-style:normal;font-size:12.5px;color:var(--faint);letter-spacing:.06em}

/* ---------- 12. SVG 图示容器 ---------- */
.svgbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);padding:8px 12px;display:flex;min-height:0;align-items:center}
.svgbox svg{width:100%;height:100%;display:block}
svg .n-fill{fill:var(--surface2)} svg .n-str{stroke:var(--line)}
svg .t{fill:var(--ink);font-family:var(--sans);font-weight:700}
svg .t2{fill:var(--ink2);font-family:var(--sans)}
svg .tm{fill:var(--muted);font-family:var(--sans)}
svg .tb-w{fill:#fff;font-family:var(--sans);font-weight:700}
svg .a{stroke:var(--brand);fill:none;stroke-width:2}
svg .a-sand{stroke:var(--sand2);fill:none;stroke-width:2}
svg .b-g{fill:var(--brand)} svg .b-g2{fill:var(--brand2)} svg .b-s{fill:var(--sand2)} svg .b-s2{fill:var(--sand)}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fadein{opacity:0;animation:fi .6s ease forwards}
@keyframes fi{to{opacity:1}}

/* ---------- 13. 控件 ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;gap:10px;pointer-events:none;font-size:13px}
#hud>*{pointer-events:auto}
.hudgrp{display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid var(--line);border-radius:999px;padding:5px 7px;box-shadow:var(--shadow-s);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn{appearance:none;border:none;background:transparent;cursor:pointer;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink2);transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--brand-soft);color:var(--brand)}
.btn:active{transform:scale(.92)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#pageno{font-family:var(--num);letter-spacing:.06em;color:var(--ink2);padding:0 6px;min-width:74px;text-align:center}
#pageno b{color:var(--brand);font-size:15px}
#bar{position:fixed;left:0;top:0;height:3px;z-index:45;width:0;
  background:linear-gradient(90deg,var(--brand),var(--sand2));transition:width .35s cubic-bezier(.2,.7,.2,1)}
#hint{position:fixed;right:18px;bottom:60px;z-index:39;font-size:12px;color:var(--faint);
  background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;transition:opacity .5s;backdrop-filter:blur(8px)}
#hint.gone{opacity:0;pointer-events:none}
#hint kbd{font-family:var(--num);background:var(--surface3);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin:0 1px}

/* 目录抽屉 */
#drawer{position:fixed;top:0;left:0;bottom:0;width:min(360px,86vw);z-index:60;background:var(--stage);
  border-right:1px solid var(--line);box-shadow:24px 0 60px -30px rgba(0,0,0,.5);
  transform:translateX(-100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
#drawer.open{transform:none}
#drawer .dh{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
#drawer .dh h3{margin:0;font-family:var(--serif);font-size:21px}
#drawer .dh p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
#drawer .dl{overflow:auto;padding:10px 10px 20px;flex:1}
#drawer .sec{font-size:12px;color:var(--sand-ink);letter-spacing:.1em;padding:14px 12px 6px;font-weight:700}
#drawer a{display:flex;gap:10px;align-items:baseline;padding:7px 12px;border-radius:8px;text-decoration:none;
  color:var(--ink2);font-size:14px;line-height:1.4;transition:background .18s}
#drawer a:hover{background:var(--surface2)}
#drawer a.cur{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
#drawer a i{font-style:normal;font-family:var(--num);font-size:12px;color:var(--faint);flex:none;width:26px}
#scrim{position:fixed;inset:0;z-index:55;background:rgba(6,14,10,.5);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#scrim.on{opacity:1;pointer-events:auto}

/* 缩略图总览 */
#map{position:fixed;inset:0;z-index:62;background:color-mix(in srgb,var(--bg) 96%,transparent);
  display:none;flex-direction:column;padding:22px 26px}
#map.on{display:flex}
#map .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#map .mh h3{margin:0;font-family:var(--serif);font-size:22px}
#map .mg{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding-bottom:20px}
#map .mt{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:9px 11px;cursor:pointer;
  transition:transform .2s,border-color .2s}
#map .mt:hover{transform:translateY(-2px);border-color:var(--brand)}
#map .mt.cur{border-color:var(--brand);background:var(--brand-soft)}
#map .mt i{font-style:normal;font-family:var(--num);font-size:11px;color:var(--faint)}
#map .mt span{display:block;font-size:13px;color:var(--ink2);line-height:1.4;margin-top:2px}

/* 灯箱 */
#lightbox{position:fixed;inset:0;z-index:70;background:rgba(4,10,7,.92);display:none;
  align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
#lightbox.on{display:flex;animation:fi .25s ease}
#lightbox img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:8px;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.8);background:#fff}
#lightbox .lbcap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#dfeae2;font-size:14px;
  padding:0 40px;line-height:1.5}
#lightbox .lbx{position:absolute;top:20px;right:24px;color:#e8f2ea;font-size:26px;cursor:pointer;line-height:1}

/* 演讲者备注 */
#notes{position:fixed;left:0;right:0;bottom:0;max-height:38vh;overflow:auto;z-index:58;background:var(--stage);
  border-top:2px solid var(--sand2);padding:14px 22px 18px;display:none;font-size:14px;color:var(--ink2);line-height:1.7}
#notes.on{display:block}
#notes h5{margin:0 0 6px;font-size:12px;letter-spacing:.14em;color:var(--sand-ink)}

/* 图上叠加的书法字（原稿黑色底，用 screen 混合去底） */
.fig .glyph{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-4deg);
  width:52%;height:auto;mix-blend-mode:screen;pointer-events:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
html[data-theme="dark"] .fig .glyph{filter:drop-shadow(0 2px 12px rgba(0,0,0,.8))}

/* 主题曲播放器 */
.song{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:rgba(8,22,15,.42);color:#eaf5ee;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,background .25s,transform .2s}
.song:hover{border-color:rgba(255,255,255,.6);background:rgba(8,22,15,.6);transform:translateY(-1px)}
.song .ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand2),var(--sand2));color:#08150f}
.song .ic svg{width:15px;height:15px;fill:currentColor;stroke:none}
.song .tx{text-align:left;line-height:1.25}
.song .tx b{display:block;font-family:var(--serif);font-size:16px;letter-spacing:.06em;font-weight:700}
.song .tx span{font-size:11.5px;letter-spacing:.1em;color:#bcd6c4}
.song .eq{display:flex;align-items:flex-end;gap:2.5px;height:16px;margin-left:4px}
.song .eq i{width:3px;height:4px;background:linear-gradient(var(--sand2),var(--brand2));border-radius:2px}
.song.play .eq i{animation:eq .9s ease-in-out infinite alternate}
.song.play .eq i:nth-child(2){animation-delay:.15s}.song.play .eq i:nth-child(3){animation-delay:.3s}
.song.play .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:16px}}
.song .prog{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.song{position:relative}
.song .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand2),var(--sand2))}
#hud .song{padding:5px 12px 5px 5px;font-size:12px}
#hud .song .ic{width:26px;height:26px}
#hud .song .tx b{font-size:12.5px}#hud .song .tx span{display:none}

/* ---------- 14. 动效工具 ---------- */
.scrolly{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scrolly::-webkit-scrollbar{width:8px;height:8px}
.scrolly::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-content:start}
.wall figure{margin:0;position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface2);aspect-ratio:4/3}
.wall figure img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.wall figure figcaption{position:absolute;left:0;bottom:0;font-size:10px;line-height:1.25;padding:2px 5px;
  background:rgba(6,18,12,.72);color:#fff;border-radius:0 6px 0 0}

.on .rise>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards}
.on .rise>*:nth-child(1){animation-delay:.04s}.on .rise>*:nth-child(2){animation-delay:.1s}
.on .rise>*:nth-child(3){animation-delay:.16s}.on .rise>*:nth-child(4){animation-delay:.22s}
.on .rise>*:nth-child(5){animation-delay:.28s}.on .rise>*:nth-child(6){animation-delay:.34s}
.on .rise>*:nth-child(7){animation-delay:.4s}.on .rise>*:nth-child(8){animation-delay:.46s}
.on .rise>*:nth-child(n+9){animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.on .grow{animation:grow .8s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes grow{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* 动画兜底：结束后强制可见，避免任何环境下停在起始帧 */
.anim-done .rise>*,.noanim .rise>*,.anim-done .grow,.noanim .grow,
.anim-done .slide.on,.noanim .slide.on{animation:none!important;opacity:1!important;transform:none!important}

kbd{font-family:var(--num);background:var(--surface3);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:12px;color:var(--ink2)}
code{font-family:Menlo,Consolas,monospace;background:var(--surface3);border-radius:5px;padding:1px 5px;font-size:12.5px;color:var(--brand-ink)}

/* ---------- 15. 打印 ---------- */
@media print{
  body{overflow:visible;background:#fff}
  #viewport{position:static;display:block;background:#fff}
  #stage{width:auto;height:auto;box-shadow:none;transform:none!important;background:#fff}
  #stage::before{display:none}
  .slide{display:flex!important;opacity:1!important;position:relative;inset:auto;page-break-after:always;
    height:100vh;animation:none!important;transform:none!important}
  #hud,#bar,#hint,#drawer,#scrim,#map,#lightbox,#notes{display:none!important}
}