/* 演示页 /slides 的样式, 从 A0_8_page_slides.html 的 <style> 拆出来。 */

/*
 一页一屏的介绍稿，见客户时讲用，跟站点其它页分开：
 那几页是网页排版（会滚动、跟随明暗模式），这一页是固定 1280x720 的版心，
 按窗口缩放，浏览器打印出来正好一页一张，不用另做一份 ppt。
*/
:root {
  --deep: #10122e;
  --deep2: #1b1f4d;
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.74);
  --faint: rgba(255, 255, 255, 0.42);
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.055);
  --accent: #5f9cf5;
  --accent2: #9b8bf0;
  --warm: #eeb44a;
  --aqua: #5fe0d6;
  --sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #07081a;
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}

/* 版心：固定 1280x720，靠 JS 量出的比例整体缩放，字号和间距一次定死 */
#fit { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { width: 1280px; height: 720px; position: relative; transform-origin: center center; }

.slide {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: 60px 76px 66px;
  background: radial-gradient(1100px 600px at 78% -12%, #2b2f6b 0%, var(--deep2) 42%, var(--deep) 100%);
  border-radius: 14px;
  overflow: hidden;
}
.slide.on { display: flex; }
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(95, 156, 245, 0.10), transparent 46%);
}
.slide > * { position: relative; z-index: 1; }

.kicker {
  font-size: 15px; letter-spacing: 0.14em; color: var(--faint);
  margin-bottom: 14px;
}
h2 { font-size: 40px; line-height: 1.26; margin: 0 0 10px; font-weight: 650; letter-spacing: -0.01em; }
.rule { width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); margin: 0 0 24px; }

/* 正文块吃掉标题和脚注之间剩下的高度, 内容在这一段里居中, 页与页之间位置才稳 */
.slide > .grid, .slide > .steps, .slide > .versus, .slide > .talk, .slide > ul.plain, .slide > .charts, .slide > .boardpage { flex: 1; align-content: center; }
.slide > .talk { justify-content: center; }

/* 卡片网格 */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px;
}
/* 卡片标题走青色: 一页里先看见的是这几个词, 底下正文留白字 */
.card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 620; color: var(--aqua); }
.card p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--dim); }
.card .num { font-size: 30px; font-weight: 650; color: var(--accent); display: block; margin-bottom: 4px; }
.card.warm { border-color: rgba(238, 180, 74, 0.34); }
.card.warm h3 { color: var(--warm); }

/* 编号的三步 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { border-top: 2px solid var(--line); padding-top: 16px; }
.step .no { font-size: 14px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.step h3 { margin: 0 0 8px; font-size: 21px; color: var(--aqua); }
.step p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--dim); }

ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li { font-size: 18px; line-height: 1.7; color: var(--dim); padding-left: 20px; position: relative; margin-bottom: 11px; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
ul.plain li b { color: var(--ink); font-weight: 600; }

/* 对比两栏 */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.versus .col { border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; background: var(--glass); }
.versus .col.new { border-color: rgba(95, 156, 245, 0.45); background: rgba(95, 156, 245, 0.09); }
.versus h3 { margin: 0 0 14px; font-size: 19px; letter-spacing: 0.02em; }
.versus .col.old h3 { color: var(--faint); }
.versus .col.new h3 { color: var(--accent); }
.versus li { font-size: 17px; line-height: 1.6; margin-bottom: 11px; }
.versus .col.old li::before { background: rgba(255, 255, 255, 0.3); }

/* 对话样例 */
.talk { display: flex; flex-direction: column; gap: 12px; }
.bubble { border-radius: 12px; padding: 14px 18px; font-size: 17.5px; line-height: 1.62; max-width: 76%; }
.bubble.q { background: rgba(95, 156, 245, 0.16); border: 1px solid rgba(95, 156, 245, 0.36); align-self: flex-start; }
.bubble.a { background: var(--glass); border: 1px solid var(--line); color: var(--dim); align-self: flex-end; }
/* 两栏的抬头：左边一列是人说的，右边一列是它给的 */
.talkhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.talkhead span { font-size: 14.5px; letter-spacing: 0.12em; }
.talkhead .ql { color: var(--accent); }
.talkhead .al { color: var(--aqua); }

/*
 两页真图。图不画在幻灯片的深蓝底上, 每张单独坐在一块近黑的板子里 ——
 应用里深色模式就是这个样子, 客户看到的和演示时看到的是同一套配色。
 数据来自 A0_9_slides_charts_sales_pbc.js, 那个文件是脚本从两份公开样例算出来的。
*/
.charts { display: grid; gap: 14px; }
.charts.c3 { grid-template-columns: repeat(3, 1fr); }
.charts.c4 { grid-template-columns: repeat(4, 1fr); }
figure.ch {
  margin: 0; display: flex; flex-direction: column;
  background: rgba(6, 7, 20, 0.52); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px 12px;
}
.ch .ask { font-size: 14.5px; color: var(--accent); margin: 0 0 9px; line-height: 1.4; }
.ch .vg { display: flex; justify-content: center; }
.ch .says { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.charts.c4 .ask { font-size: 13.5px; }
.charts.c4 .says { font-size: 12.5px; line-height: 1.5; }
/* vega 自己不管字体, 不指定的话轴上是 Times */
.ch text, .board text { font-family: var(--sans) !important; }

/* 定制面板那页：左边一句话和四条说明, 右边一整块真面板 */
.boardpage { display: grid; grid-template-columns: 336px 1fr; gap: 22px; align-items: center; }
.bside .bubble.q { max-width: none; font-size: 16.5px; margin-bottom: 16px; }
.bside ul.plain li { font-size: 15.5px; line-height: 1.6; margin-bottom: 9px; }
.bside ul.plain li::before { top: 10px; }
.board {
  background: rgba(6, 7, 20, 0.52); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px 16px;
}
.board .bhead { font-size: 13px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 12px; }
.board .bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.board figure { margin: 0; }
.board figcaption { font-size: 12.5px; color: var(--dim); margin-bottom: 5px; }

/* 本地同步那页的流程图。SVG 里不写死颜色, 全走这几条, 深浅一处改 */
.syncwrap { margin-bottom: 20px; }
.flow { width: 100%; height: auto; display: block; }
.flow .box rect { fill: rgba(6, 7, 20, 0.52); stroke: var(--line); stroke-width: 1; }
.flow .box.on rect { fill: rgba(95, 156, 245, 0.10); stroke: rgba(95, 156, 245, 0.45); }
.flow .bt { fill: var(--ink); font-size: 17px; font-weight: 620; }
.flow .bs { fill: var(--dim); font-size: 13px; }
.flow .arr { stroke: var(--accent); stroke-width: 1.6; }
.flow .al { fill: var(--faint); font-size: 12.5px; text-anchor: middle; }
.flow .back { fill: none; stroke: var(--warm); stroke-width: 1.6; stroke-dasharray: 5 4; }
.flow .bl { fill: var(--warm); font-size: 13px; text-anchor: middle; opacity: 0.9; }

.foot-note { margin-top: auto; padding-top: 18px; font-size: 15.5px; color: var(--faint); line-height: 1.6; }

/* 封面和结尾 */
.cover { justify-content: center; padding: 0 92px; }
.cover .brand { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-bottom: 30px; }
.cover .bar { width: 12px; border-radius: 3px; background: var(--accent); }
.cover .bar:nth-child(2) { background: var(--accent2); }
.cover .bar:nth-child(3) { background: var(--warm); }
.cover h1 { font-size: 60px; margin: 0 0 10px; font-weight: 660; letter-spacing: -0.015em; }
.cover .sub { font-size: 23px; color: var(--dim); margin: 0 0 32px; line-height: 1.55; max-width: 820px; }
.cover .tag { font-size: 17px; color: var(--faint); letter-spacing: 0.06em; margin: 0; }
/* 封面第二句是这份稿子的主张, 提亮一档跟上面那句处境分开 */
.cover .sub .hl { color: var(--aqua); }

/* 控制条 */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(7, 8, 26, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px; color: var(--faint); z-index: 20;
}
#bar button, #bar a {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 8px; padding: 5px 13px; font-size: 14px; cursor: pointer;
  font-family: var(--sans); text-decoration: none;
}
#bar button:hover, #bar a:hover { border-color: var(--accent); color: var(--ink); }
#page { min-width: 64px; text-align: center; }

@media print {
  @page { size: 1280px 720px; margin: 0; }
  body { overflow: visible; background: #fff; }
  #fit { position: static; display: block; }
  #stage { transform: none !important; width: 1280px; height: auto; }
  .slide { display: flex !important; position: relative; inset: auto; width: 1280px; height: 720px; border-radius: 0; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #bar { display: none; }
}