/* ============================================================
   技术·组织·工作的未来 · Web Slide 设计系统
   视觉语言参照 https://5wdxkvgzuxtmy.ok.kimi.link/ ：
   暖白纸感背景 + 克莱因蓝(IKB)高亮 + Inter/Noto Sans SC/JetBrains Mono +
   Carbon 8px 间距网格 + 每页可选 5 种背景变体。
   ============================================================ */

:root{
  --paper:#fafaf8; --paper-rgb:250,250,248;
  --ink:#0a0a0a; --ink-rgb:10,10,10;
  --grey-1:#f0f0ee; --grey-2:#d4d4d2; --grey-3:#737373;
  --accent:#002FA7; --accent-rgb:0,47,167;
  --accent-on:#ffffff; --accent-bright:#5B7BFF;

  --text-secondary:#525252; --text-helper:#737373;
  --border-subtle:#e0e0e0; --border-strong:#a3a3a3;

  --sans:"Inter","Helvetica Neue","Helvetica","Arial",system-ui,-apple-system,sans-serif;
  --sans-zh:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono","SF Mono","Cascadia Code","Consolas",ui-monospace,monospace;

  --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:24px; --sp-7:32px;
  --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px;

  --ease-prod:cubic-bezier(.2,0,.38,.9);
  --ease-exp:cubic-bezier(.4,.14,.3,1);
  --dur-mod:.24s; --dur-slow:.4s;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);
  font-family:var(--sans),var(--sans-zh);-webkit-font-smoothing:antialiased}

#deck{position:relative;width:100vw;height:100vh;overflow:hidden}
.slide{
  position:absolute;inset:0;width:100vw;height:100vh;
  display:none;
}
.slide.active{display:flex}

.canvas-card{
  width:100%;height:100%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:5.6vh 5.5vw 4.2vh;
  background:var(--paper);color:var(--ink);
}
.slide.grey .canvas-card{background:var(--grey-1);color:var(--ink)}
.slide.dark .canvas-card{background:var(--ink);color:var(--paper)}
.slide.accent .canvas-card{background:var(--accent);color:var(--accent-on)}

/* ---------- dot-matrix decoration (pure CSS, no canvas/WebGL) ---------- */
.dot-mat{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(currentColor 1.1px, transparent 1.1px);
  background-size:20px 20px}
.slide.dark .dot-mat,.slide.accent .dot-mat{opacity:.14}
.canvas-card > *:not(.dot-mat){position:relative;z-index:1}

/* ---------- chrome (top) / foot (bottom) ---------- */
.chrome{
  display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.65;margin-bottom:auto;flex:0 0 auto
}
.foot{
  margin-top:auto;flex:0 0 auto;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  opacity:.5;padding-top:1.6vh;border-top:1px solid currentColor;
  border-color:rgba(127,127,127,.25)
}

/* ---------- kicker / tag / rule ---------- */
.kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7em}
.slide.dark .kicker,.slide.accent .kicker{color:var(--accent-bright)}
.slide.accent .kicker{color:rgba(255,255,255,.85)}
.rule{width:100%;height:1px;background:currentColor;opacity:.18}
.rule.accent{background:var(--accent);opacity:1;height:2px}

/* ---------- shared body wrapper ---------- */
.body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;gap:2.2vh}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.h-title{font-family:var(--sans),var(--sans-zh);font-weight:250;font-size:3.6vw;line-height:1.12;letter-spacing:-.02em}
.h-title.hero{font-size:5.6vw;font-weight:200}
.h-sub{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:1.35vw;opacity:.68;line-height:1.4;margin-top:1vh}
.h-en{font-family:var(--sans);font-weight:300;opacity:.55;font-size:.85vw;margin-top:.6vh}
.note{font-family:var(--sans),var(--sans-zh);font-size:1vw;opacity:.7;line-height:1.5;margin-top:1.4vh}
.source{font-family:var(--mono);font-size:.62vw;opacity:.42;margin-top:1vh;letter-spacing:.02em}

/* ============ layout: cover ============ */
.l-cover{align-items:flex-start;justify-content:center;gap:1.6vh}
.l-cover .h-title{font-size:6.4vw;font-weight:200;line-height:1.02;white-space:pre-line}
.l-cover .h-sub{font-size:1.15vw;margin-top:1.6vh}
.l-cover .date{font-family:var(--mono);font-size:.85vw;opacity:.5;margin-top:4vh;
  border-top:1px solid rgba(255,255,255,.25);padding-top:1.4vh;width:100%}

/* ============ layout: hook ============ */
.l-hook{align-items:center;text-align:center;gap:2vh}
.l-hook .h-title{font-size:3.4vw;white-space:pre-line;max-width:64vw}
.l-hook .scale{display:flex;gap:1.6vw;justify-content:center;margin-top:2vh;flex-wrap:wrap}
.l-hook .scale span{font-family:var(--mono);font-size:1.6vw;font-weight:300;opacity:.35;
  border:1px solid var(--border-subtle);border-radius:100px;padding:.5vh 1.6vw}
.l-hook .note{max-width:52vw}

/* ============ layout: divider ============ */
.l-divider{flex-direction:row;align-items:center;gap:4vw}
.l-divider .num{font-family:var(--sans);font-weight:200;font-size:11vw;line-height:1;opacity:.16;
  letter-spacing:-.04em;flex:0 0 auto}
.l-divider .txt{display:flex;flex-direction:column;gap:1vh}
.l-divider .part{font-family:var(--mono);font-size:.85vw;letter-spacing:.2em;opacity:.6}
.l-divider .h-title{font-size:5vw}

/* ============ layout: title (title-only / section pause) ============ */
.l-title{align-items:flex-start;justify-content:center;gap:1.2vh}
.l-title .deco{font-family:var(--mono);font-size:.85vw;opacity:.4;margin-top:2vh}
.l-title .cta{font-family:var(--mono);font-size:.8vw;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin-top:1.6vh}

/* ============ layout: chain ============ */
.l-chain .nodes{display:flex;align-items:stretch;gap:1.2vw;flex:1;min-height:0}
.l-chain .node{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6vh;text-align:center;border:1px solid var(--border-subtle);border-radius:6px;padding:2vh 1vw}
.slide.dark .l-chain .node{border-color:rgba(255,255,255,.18)}
.l-chain .node .k1{font-family:var(--mono);font-size:.7vw;letter-spacing:.1em;opacity:.5;text-transform:uppercase}
.l-chain .node .k2{font-family:var(--sans),var(--sans-zh);font-size:1.5vw;font-weight:500;margin-top:.4vh}
.l-chain .node .k3{font-size:.85vw;opacity:.6;margin-top:.6vh}
.l-chain .arrow{display:flex;align-items:center;font-size:1.6vw;opacity:.35;flex:0 0 auto}
.l-chain .tagline{text-align:center;font-size:1.05vw;opacity:.75;margin-top:2vh}

/* ============ layout: agenda ============ */
.l-agenda .items{display:flex;flex-direction:column;gap:2vh;flex:1;justify-content:center}
.l-agenda .item{display:flex;gap:1.6vw;align-items:baseline;border-top:1px solid var(--border-subtle);
  padding-top:1.6vh}
.slide.dark .l-agenda .item{border-color:rgba(255,255,255,.18)}
.l-agenda .item .n{font-family:var(--mono);font-size:1vw;opacity:.4;flex:0 0 2.4vw}
.l-agenda .item .t{font-size:1.3vw;font-weight:500}
.l-agenda .item .d{font-size:.95vw;opacity:.65;margin-top:.3vh}

/* ============ layout: timeline-row ============ */
.l-timeline .track{display:flex;align-items:flex-end;gap:1vw;flex:1;position:relative;padding-top:2vh}
.l-timeline .step{flex:1;display:flex;flex-direction:column;gap:.8vh}
.l-timeline .step .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.l-timeline .step:last-child .dot{background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.l-timeline .step .yr{font-family:var(--mono);font-size:.85vw;opacity:.55;margin-top:.6vh}
.l-timeline .step .mid{font-size:.95vw;font-weight:500;margin-top:.6vh;line-height:1.3}
.l-timeline .step .lo{font-size:.8vw;opacity:.6;margin-top:.4vh}
.l-timeline .callout{margin-top:2.4vh;padding:1.4vh 1.6vw;border-left:3px solid var(--accent);
  background:rgba(var(--accent-rgb),.06);font-size:.95vw;line-height:1.5}

/* ============ layout: icongrid ============ */
.l-icongrid .grid{display:grid;gap:1.4vw;flex:1;align-content:center}
.l-icongrid .grid.c-1{grid-template-columns:1fr}
.l-icongrid .grid.c-2{grid-template-columns:repeat(2,1fr)}
.l-icongrid .grid.c-3{grid-template-columns:repeat(3,1fr)}
.l-icongrid .grid.c-4{grid-template-columns:repeat(4,1fr)}
.l-icongrid .grid.c-5{grid-template-columns:repeat(5,1fr)}
.l-icongrid .grid.c-6{grid-template-columns:repeat(6,1fr)}
.l-icongrid .card{border:1px solid var(--border-subtle);border-radius:6px;padding:1.6vh 1.2vw;
  display:flex;flex-direction:column;gap:.6vh}
.slide.dark .l-icongrid .card,.slide.accent .l-icongrid .card{border-color:rgba(255,255,255,.2)}
.l-icongrid .card .ic{font-size:1.5vw;line-height:1}
.l-icongrid .card .hd{font-size:1vw;font-weight:600;line-height:1.3}
.l-icongrid .card .bd{font-size:.82vw;opacity:.75;line-height:1.45}
.l-icongrid .card .en{font-size:.72vw;opacity:.5;line-height:1.4;margin-top:.2vh}
.l-icongrid .stage-head{display:flex;align-items:baseline;gap:1vw;margin-bottom:.6vh}
.l-icongrid .stage-head .org{font-size:1vw;font-weight:600}
.l-icongrid .stage-head .yr{font-family:var(--mono);font-size:.78vw;opacity:.55}
.l-icongrid .closing{margin-top:1.8vh;font-size:.95vw;opacity:.8;border-top:1px solid var(--border-subtle);
  padding-top:1.4vh}
.slide.dark .l-icongrid .closing,.slide.accent .l-icongrid .closing{border-color:rgba(255,255,255,.2)}

/* ============ layout: quote (social-post card) ============ */
.l-quote .card{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.6vh;
  border:1px solid var(--border-subtle);border-radius:8px;padding:3vh 3vw;background:var(--paper)}
.l-quote .qsource{font-family:var(--mono);font-size:.8vw;opacity:.55}
.l-quote .quser{font-size:.9vw;font-weight:600;opacity:.7}
.l-quote blockquote{font-size:1.5vw;line-height:1.5;font-weight:400;font-style:italic}
.l-quote .meta{font-family:var(--mono);font-size:.8vw;opacity:.5}
.l-quote .caption{font-size:.95vw;font-weight:600;color:var(--accent);margin-top:.6vh}
.l-quote .site{font-family:var(--mono);font-size:.72vw;opacity:.4}

/* ============ layout: compare ============ */
.l-compare .cols{display:flex;gap:2vw;flex:1;align-items:stretch}
.l-compare .col{flex:1;border:1px solid var(--border-subtle);border-radius:6px;padding:2vh 1.6vw;
  display:flex;flex-direction:column;gap:1vh}
.slide.dark .l-compare .col{border-color:rgba(255,255,255,.2)}
.l-compare .col.right{border-color:var(--accent);background:rgba(var(--accent-rgb),.05)}
.l-compare .col h3{font-size:1.05vw;font-weight:600}
.l-compare .col ul{list-style:none;display:flex;flex-direction:column;gap:.6vh}
.l-compare .col li{font-size:.88vw;opacity:.78;line-height:1.4;padding-left:1em;position:relative}
.l-compare .col li::before{content:"–";position:absolute;left:0;opacity:.5}
.l-compare .vs{display:flex;align-items:center;font-family:var(--mono);font-size:1vw;opacity:.4;flex:0 0 auto}

/* ============ layout: link (embed reference) ============ */
.l-link{align-items:center;justify-content:center;text-align:center;gap:2vh}
.l-link .h-title{font-size:1.8vw;font-style:italic;max-width:60vw}
.l-link a{font-family:var(--mono);font-size:1.1vw;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:.3vh;word-break:break-all}
.l-link .caption{font-size:.9vw;opacity:.55}

/* ============ layout: stat ============ */
.l-stat .statrow{display:flex;gap:1.6vw;flex:0 0 auto}
.l-stat .statcard{flex:1;border:1px solid var(--border-subtle);border-radius:6px;padding:2vh 1.6vw}
.slide.dark .l-stat .statcard,.slide.accent .l-stat .statcard{border-color:rgba(255,255,255,.2)}
.l-stat .statcard .big{font-family:var(--sans);font-weight:250;font-size:3.4vw;line-height:1;
  letter-spacing:-.02em;color:var(--accent)}
.slide.dark .l-stat .statcard .big,.slide.accent .l-stat .statcard .big{color:var(--accent-bright)}
.slide.accent .l-stat .statcard .big{color:#fff}
.l-stat .statcard .lbl{font-size:.85vw;opacity:.65;margin-top:.6vh;line-height:1.4}
.l-stat .notes{margin-top:1.6vh;display:flex;flex-direction:column;gap:.7vh}
.l-stat .notes .row{font-size:.88vw;line-height:1.4}
.l-stat .notes .row b{opacity:.85}
.l-stat .closing{margin-top:1.6vh;font-size:1vw;line-height:1.5;border-top:1px solid var(--border-subtle);
  padding-top:1.4vh}
.slide.dark .l-stat .closing{border-color:rgba(255,255,255,.2)}
.l-stat .chart{display:flex;align-items:flex-end;gap:1vw;height:16vh;margin:1.4vh 0}
.l-stat .chart .bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:.4vh}
.l-stat .chart .bar .fill{width:70%;background:var(--accent);border-radius:2px 2px 0 0}
.slide.dark .l-stat .chart .bar .fill{background:var(--accent-bright)}
.l-stat .chart .bar .v{font-family:var(--mono);font-size:.75vw;opacity:.7}
.l-stat .chart .bar .lb{font-size:.68vw;opacity:.55;text-align:center}

/* ============ layout: closing ============ */
.l-closing{align-items:center;justify-content:center;text-align:center;gap:2vh}
.l-closing .h-title{font-size:2.2vw;letter-spacing:.1em;opacity:.6}
.l-closing blockquote{font-size:2.6vw;font-weight:300;line-height:1.3;max-width:66vw}
.l-closing .en{font-size:1vw;opacity:.6;max-width:56vw;margin-top:1vh}
.l-closing .cta{margin-top:2.4vh;font-family:var(--mono);font-size:.9vw;letter-spacing:.14em;opacity:.7}

/* ============ embedded screenshots / figures (migrated from pptx) ============ */
.img-row{display:flex;gap:1.4vw;justify-content:center;align-items:center;flex:1;min-height:0;
  max-height:52vh;width:100%}
.img-row img{flex:1 1 auto;min-width:0;max-width:100%;max-height:52vh;height:auto;object-fit:contain;
  border-radius:4px;border:1px solid var(--border-subtle);box-shadow:0 2px 16px rgba(0,0,0,.12)}
.slide.dark .img-row img,.slide.accent .img-row img{border-color:rgba(255,255,255,.18)}
.l-link.has-img .h-title{font-size:1.15vw;font-style:normal;opacity:.65;margin-bottom:.4vh}
.l-link.has-img a{font-size:.85vw;margin-top:1vh}
.l-title .img-row{margin-top:1.4vh}
.l-stat .stat-img{max-height:38vh;margin:.4vh 0}
.l-stat .stat-img img{max-height:38vh}

.quote-thumb{max-width:100%;max-height:22vh;object-fit:contain;border-radius:6px;
  border:1px solid var(--border-subtle);box-shadow:0 2px 16px rgba(0,0,0,.1);margin-bottom:1vh;
  align-self:flex-start}

.canvas-card > .qr-badge{position:absolute;top:5.6vh;right:5.5vw;z-index:2;background:#fff;border-radius:8px;
  padding:1vh .9vw;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.qr-badge img{width:9vw;height:9vw;display:block;object-fit:contain}
.qr-badge .qr-label{font-family:var(--sans-zh);font-size:.75vw;color:var(--ink);margin-top:.4vh;
  font-weight:600}

/* ---------- nav ---------- */
#navhint{position:fixed;bottom:1.4vh;left:50%;transform:translateX(-50%);z-index:50;
  font-family:var(--mono);font-size:10px;color:rgba(150,150,150,.55);letter-spacing:.1em;
  pointer-events:none}
#progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:60;
  transition:width var(--dur-mod) var(--ease-prod)}