/* ==========================================================================
   DeepDive · Slide Deck Kit
   在线讲解幻灯片放映引擎样式。与 Design System v2 共用 tokens。
   设计画布固定 1280×720（16:9），由 deck.js 按视口等比缩放，
   保证任意屏幕（含投影仪）字号比例一致，并可直接打印为 PDF。
   依赖：colors_and_type.css（提供 --bg/--fg/--accent 等 token）
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);-webkit-font-smoothing:antialiased}
body{font-family:var(--serif);color:var(--fg-dim);line-height:1.7}
:lang(zh),:lang(zh-Hans),:lang(zh-Hant),.cjk,.cjk *{font-style:normal!important;font-synthesis-style:none}
em,i{font-style:normal}
em.accent,.accent{color:var(--accent);font-style:normal}
a{color:inherit;text-decoration:none}

/* ---------- 舞台 ---------- */
.deck{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.stage{position:relative;width:1280px;height:720px;transform-origin:center center;flex:none}

.slide{position:absolute;inset:0;padding:60px 84px 76px;background:var(--bg);
       display:flex;flex-direction:column;justify-content:center;
       opacity:0;visibility:hidden;transition:opacity .26s ease,transform .26s ease;
       transform:translateY(10px)}
.slide.is-active{opacity:1;visibility:visible;transform:none}

/* ---------- 通用排版 ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
         color:var(--accent);margin-bottom:26px;flex:none}
.eyebrow .dim{color:var(--fg-mute)}
.slide h1{font-family:var(--display);font-weight:300;font-size:66px;line-height:1.14;
          letter-spacing:-.01em;color:var(--fg)}
.slide h2{font-family:var(--display);font-weight:300;font-size:46px;line-height:1.18;
          letter-spacing:-.01em;color:var(--fg);margin-bottom:30px}
.slide h3{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.3;color:var(--fg)}
.slide p{font-size:21px;line-height:1.72}
.slide p+p{margin-top:16px}
.slide strong{color:var(--fg);font-weight:600}
.lede{font-size:24px;line-height:1.66;color:var(--fg-dim);max-width:960px}
.note{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--fg-mute);line-height:1.7}
.rule{height:1px;background:var(--line);margin:26px 0;flex:none}

/* ---------- 封面 ---------- */
.s-cover{justify-content:center}
.s-cover .kick{font-family:var(--mono);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
               color:var(--accent);margin-bottom:34px}
.s-cover h1{font-size:74px;max-width:1080px}
.s-cover .sub{font-size:23px;line-height:1.65;color:var(--fg-dim);max-width:900px;margin-top:30px}
.s-cover .meta{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
               color:var(--fg-mute);margin-top:44px}

/* ---------- 章节分隔 ---------- */
.s-part{justify-content:center;align-items:flex-start}
.s-part .no{font-family:var(--mono);font-size:15px;letter-spacing:.24em;color:var(--accent);
            border-top:1px solid var(--accent);padding-top:16px;margin-bottom:34px}
.s-part h1{font-size:70px;max-width:1040px}
.s-part .sub{font-size:22px;color:var(--fg-mute);margin-top:26px;max-width:880px}

/* ---------- 大字论断 ---------- */
.s-stmt{justify-content:center}
.s-stmt .big{font-family:var(--display);font-weight:300;font-size:56px;line-height:1.26;
             color:var(--fg);max-width:1000px}
.s-stmt .by{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--fg-mute);margin-top:38px}

/* ---------- 要点列表 ---------- */
.bullets{list-style:none;display:flex;flex-direction:column;gap:20px;max-width:1000px}
.bullets li{position:relative;padding-left:34px;font-size:21px;line-height:1.62;color:var(--fg-dim)}
.bullets li::before{content:'›';position:absolute;left:0;top:-1px;color:var(--accent);
                    font-family:var(--mono);font-size:22px}
.bullets li b{color:var(--fg);font-weight:600}
.bullets.tight li{font-size:19px;line-height:1.55}
.bullets.tight{gap:15px}

/* ---------- 数据格 ---------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);flex:none}
.stats.c2{grid-template-columns:repeat(2,1fr)}
.stats.c3{grid-template-columns:repeat(3,1fr)}
.stats.c4{grid-template-columns:repeat(4,1fr)}
.stats .cell{background:var(--bg);padding:30px 26px}
.stats .n{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;color:var(--accent);
          font-variant-numeric:tabular-nums;margin-bottom:14px}
.stats .n.sm{font-size:38px}
.stats .l{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
          color:var(--fg-mute);line-height:1.6}

/* ---------- 两栏对照 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
     border:1px solid var(--line);flex:none}
.two .col{background:var(--bg);padding:30px 28px}
.two .ct{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--accent);margin-bottom:18px}
.two .col p{font-size:18px;line-height:1.62}
.two ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.two li{font-size:17.5px;line-height:1.55;padding-left:20px;position:relative;color:var(--fg-dim)}
.two li::before{content:'·';position:absolute;left:4px;color:var(--accent);font-family:var(--mono)}

/* ---------- 阶梯 / 流程 ---------- */
.steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);flex:none}
.steps .step{display:grid;grid-template-columns:78px 1fr;gap:26px;align-items:baseline;
             padding:17px 4px;border-bottom:1px solid var(--line)}
.steps .k{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--accent)}
.steps .v{font-size:19px;line-height:1.55;color:var(--fg-dim)}
.steps .v b{color:var(--fg);font-weight:600}

/* ---------- 引语 ---------- */
.s-quote{justify-content:center}
.s-quote .q{position:relative;padding-left:34px;max-width:940px}
.s-quote .q::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--accent)}
.s-quote .q p{font-family:var(--display);font-weight:300;font-size:44px;line-height:1.3;color:var(--fg)}
.s-quote .src{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
              color:var(--fg-mute);margin-top:32px;padding-left:34px}

/* ---------- 图表 / 图片 / 视频 ----------
 * 次级数据系列色：浅色模式下自动深化，保证在米色纸面上仍有 AA 对比度。
 * 图表里第二条曲线/第二组柱子请用 var(--fig-2)，不要写死 hex。
 */
:root{--fig-2:#7fb88b}
[data-mode="light"],.mode-light{--fig-2:#4a7a55}
/* mint 主题下 --accent 本身就是这个绿，次级色必须换一个色相，否则两组数据分不开 */
[data-theme="mint"]{--fig-2:#f5a524}
[data-mode="light"][data-theme="mint"],.mode-light[data-theme="mint"]{--fig-2:#b8761a}

.fig{flex:none;width:100%}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.fig-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--fg-mute);margin-top:16px;line-height:1.6}
.fig-cap b{color:var(--accent);font-weight:400}
.fig-src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-mute);
         margin-top:6px;opacity:.75}

/* 整页大图版式：眉标 + 图占满 */
.s-fig{justify-content:center}
.s-fig h2{font-size:36px;margin-bottom:24px}

/* 图文两栏：左图右论点 */
.fig-split{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;flex:none}
.fig-split .side .bullets li{font-size:18px;line-height:1.55}
.fig-split .side .bullets{gap:14px}

/* 截图 / 插画 */
.shot{flex:none;border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot.cap{border-bottom:none}

/* 图片墙：一排多张外部配图（媒体报道等），统一裁成同一比例便于对齐 */
.shots{display:grid;gap:18px;flex:none}
.shots.c2{grid-template-columns:repeat(2,1fr)}
.shots.c3{grid-template-columns:repeat(3,1fr)}
.shots.c4{grid-template-columns:repeat(4,1fr)}
.shots figure{margin:0;display:flex;flex-direction:column}
.shots .shot img{aspect-ratio:3/2;object-fit:cover}
.shots figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--fg-mute);
                  margin-top:10px;line-height:1.6}
.shots figcaption b{color:var(--accent);font-weight:400;letter-spacing:.12em}

/* 并排两图（高度不等时居中对齐更稳） */
.figs{display:grid;gap:44px;align-items:center;flex:none}
.figs.c2{grid-template-columns:repeat(2,1fr)}
.figs .sub-cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg-mute);
               margin-top:12px;line-height:1.6}

/* 视频嵌入（16:9） */
.embed{flex:none;position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
       background:var(--bg-2)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--fg-mute);
            margin-top:10px}

/* 打印时 iframe 不会渲染，留个占位说明 */
@media print{
  .embed{display:flex;align-items:center;justify-content:center}
  .embed iframe{display:none}
  .embed::after{content:'▶ 视频片段（请在网页版放映时播放）';font-family:var(--mono);font-size:13px;
                letter-spacing:.14em;color:var(--fg-mute)}
}

/* ---------- 综合判断块 ---------- */
.syn{border:1px solid var(--accent-soft);background:var(--accent-soft);padding:26px 30px;flex:none}
.syn .tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
          color:var(--accent);margin-bottom:14px}
.syn p{font-size:20px;line-height:1.65;color:var(--fg)}

/* ---------- 结尾 ---------- */
.s-end{justify-content:center}
.s-end h1{font-size:56px;max-width:1020px}
.s-end .links{margin-top:44px;display:flex;flex-direction:column;gap:14px}
.s-end .links a{font-family:var(--mono);font-size:15px;letter-spacing:.08em;color:var(--fg);
                border-bottom:1px solid var(--accent);padding-bottom:3px;align-self:flex-start;
                transition:color .15s}
.s-end .links a:hover{color:var(--accent)}

/* ---------- 放映 UI ---------- */
.deck-bar{position:fixed;left:0;right:0;bottom:0;height:2px;background:var(--line);z-index:40}
.deck-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .26s ease}

.deck-hud{position:fixed;right:20px;bottom:16px;z-index:41;display:flex;align-items:center;gap:16px;
          font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fg-mute)}
.deck-hud .lamp{width:7px;height:7px;border-radius:50%;background:var(--accent);
                box-shadow:0 0 12px 2px var(--accent-glow)}
.deck-hud .num{color:var(--fg)}
.deck-hud button{font:inherit;letter-spacing:inherit;color:var(--fg-mute);background:none;border:none;
                 cursor:pointer;text-transform:uppercase;transition:color .15s}
.deck-hud button:hover{color:var(--accent)}

.deck-brand{position:fixed;left:22px;bottom:16px;z-index:41;font-family:var(--mono);font-size:11px;
            letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute)}
.deck-brand a{color:var(--accent)}
.deck-brand .t{color:var(--fg-mute)}

/* 目录抽屉 */
.deck-toc{position:fixed;inset:0;z-index:60;background:var(--bg);padding:52px 6vw;overflow-y:auto;
          display:none}
.deck-toc.is-open{display:block}
.deck-toc h2{font-family:var(--display);font-weight:300;font-size:34px;color:var(--fg);margin-bottom:8px}
.deck-toc .hint{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
                color:var(--fg-mute);margin-bottom:30px}
.deck-toc ol{list-style:none;counter-reset:toc;max-width:900px}
.deck-toc li{counter-increment:toc;border-bottom:1px solid var(--line)}
.deck-toc button{display:flex;gap:22px;align-items:baseline;width:100%;text-align:left;padding:13px 4px;
                 background:none;border:none;cursor:pointer;font-family:var(--serif);font-size:18px;
                 color:var(--fg-dim);transition:color .15s}
.deck-toc button:hover,.deck-toc li.is-cur button{color:var(--accent)}
.deck-toc button::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:12px;
                         letter-spacing:.1em;color:var(--fg-mute);flex:none;width:26px}

/* 帮助条 */
.deck-help{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:41;
           font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--fg-mute);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.deck-help.show{opacity:1}

/* ---------- 窄屏提示（幻灯片仍可看，只是缩得较小） ---------- */
@media (max-width:640px){
  .deck-help{display:none}
  .deck-hud{right:12px;gap:11px}
  .deck-brand{left:12px;font-size:10px}
}

/* ---------- 打印 / 导出 PDF ---------- */
@media print{
  @page{size:1280px 720px;margin:0}
  html,body{overflow:visible;height:auto;background:#fff}
  .deck{position:static;display:block;overflow:visible}
  .stage{transform:none!important;width:1280px;height:720px}
  .slide{position:relative;opacity:1!important;visibility:visible!important;transform:none!important;
         page-break-after:always;break-after:page;width:1280px;height:720px}
  .slide:last-child{page-break-after:auto;break-after:auto}
  .deck-bar,.deck-hud,.deck-brand,.deck-toc,.deck-help{display:none!important}
}
