/* KiteMind 演示动画。**本文件是生成的**，改节奏请改 gen.py 再跑一次。
 *
 * 为什么不写 JS：本站 CSP 是 default-src 'none'，连 script-src 都没有。
 * 加一行脚本就得放宽安全头，而"不加载第三方、不跑任何脚本"是产品主张
 * 的一部分。为一段宣传动画松安全头，不划算。
 * 同理 CSS 也不能写成行内 <style>——style-src 'self' 不含 unsafe-inline。
 *
 * 一轮 14 秒，四段：
 *    0.3s  打「把下周的产品发布拆成一张导图」→ 三支主干依次画出     出图
 *    4.4s  打「产品介绍下面再加一条：定价」→ 只多那一条，别的不动   改图
 *    7.7s  左栏换成导出面板，七种格式依次亮                        导出
 *    9.6s  左栏收起、画布铺满，走四站演说                          演说
 *
 * 图里每一条路径、每一个坐标、每一支颜色，都和首屏那张导图一致，
 * 也就是和引擎渲出来的一致。导出面板的分组名和页脚是 App 里的原串。
 * 演说四站的走法照 `PresentationPlan`：**先给全貌，再一支一支讲**，
 * 每一站只画那一支的子树（不是"别的变淡"，是别的不画）。
 *
 * ⚠️ 一处有意的简化：App 聚焦时会把那一支当根重新布局，这里是缩放过去。
 * 观众读到的是同一件事（"只看这一支"），但不是逐像素等同。
 *
 * 线条颜色写死在 SVG 属性里，这儿只管深色变体——理由见 styles.css。 */

/* 颜色一律**转接**官网的变量，后面那个值只是离线预览和出片台的兜底。
   照抄一份色号看着更省事，但这段动画就在首屏、和旁边的卡片肩并肩——
   官网换一次底色，抄来的那份不会跟着换，于是首屏出现两种白。 */
.kdemo {
  --kd-ground: var(--ground, #FAFAF9); --kd-card: var(--card, #FFFFFF);
  --kd-ink: var(--ink, #14161A); --kd-muted: var(--muted, #6B7076);
  --kd-faint: var(--faint, #9AA0A6); --kd-line: var(--line, #E6E7E9);
  --kd-soft: var(--soft, #F2F2F1);
  color: var(--kd-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  display: flex; flex-direction: column; gap: 14px;
  animation: stage 14.0s infinite;
}
@media (prefers-color-scheme: dark) {
  /* 同上：兜底值换成深色的那一套。在官网里这几行只是把 var() 再解析一遍，
     值还是站里的；离线预览时才轮到后面那个色号。 */
  .kdemo {
    --kd-ground: var(--ground, #0F1113); --kd-card: var(--card, #17191C);
    --kd-ink: var(--ink, #F2F2F1); --kd-muted: var(--muted, #9AA1A9);
    --kd-faint: var(--faint, #767D85); --kd-line: var(--line, #26292E);
    --kd-soft: var(--soft, #1C1F23);
  }
  .kdemo .b1 { stroke: #7FA8D4; }
  .kdemo .b2 { stroke: #D9A96A; }
  .kdemo .b3 { stroke: #C295B4; }
  .kdemo .f-ground { fill: #0F1113; }
}

/* 用 grid 而不是 flex：出片台那一版要把左栏收到 0，
   grid-template-columns 可以直接补间，flex-basis 配 gap 补不干净。
 *
 * ⚠️ **站里不收栏**，收栏的动画只在出片台上跑（见 film 那段）。
 * 画布一变宽，按 viewBox 的比例高度也跟着长（1280 上是 233 → 345），
 * 于是整页下面的内容每 14 秒被推下去再收回来。Chrome 有 scroll anchoring
 * 看不太出来，**Safari 没有**——给 iOS 用户看的站，不能拿 Safari 当边角情况。
 * 视频没有这个问题：它的画幅本来就是定死的 1440×640。 */
.kdemo-row {
  display: grid; grid-template-columns: 320px 1fr; column-gap: 26px;
  align-items: center;
}
.kdemo-en .kdemo-row { grid-template-columns: 344px 1fr; }
.kdemo-side { display: grid; min-width: 0; }
.kdemo-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; }
.kdemo-compose { animation: panelCompose 14.0s infinite; }
.kdemo-export  { animation: panelExport  14.0s infinite; gap: 7px;
  background: var(--kd-card); border: 1px solid var(--kd-line);
  border-radius: 16px; padding: 14px 16px; }

.kdemo-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--kd-muted);
  background: var(--kd-soft); border-radius: 999px; padding: 5px 12px;
  animation: badge 14.0s infinite;
}
.kdemo-badge svg { display: block; }

.kdemo-box {
  background: var(--kd-card); border: 1px solid var(--kd-line);
  border-radius: 16px; padding: 16px 18px; min-height: 76px;
  display: grid; align-content: center;   /* 两句话叠同一格，框不会变成两行高 */
}
.kdemo-line {
  grid-area: 1 / 1;
  justify-self: start;   /* 按内容定宽，打字时由 max-width 截——见 gen-demo.py 的 typing() */
  font-size: 15px; line-height: 1.55; white-space: nowrap; overflow: hidden;
  border-right: 2px solid currentColor;
  animation-duration: 14.0s, 1.06s; animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, steps(2, jump-none);
  animation-name: none, caret;
}
.kdemo-l1 { animation-name: type1, caret; }
.kdemo-l2 { animation-name: type2, caret; }
@keyframes caret { from { border-right-color: currentColor } to { border-right-color: transparent } }

/* ---- 英文版 ----
   两版只差三样：左栏宽度、打字的宽度和步数、演说那几站的缩放。
   时间线、图、颜色、每一处间距都同一份——英文不是另做一版，
   是同一版里"这句话在英文里更长"。 */
.kdemo-en .kdemo-l1 { animation-name: type1En, caret; }
.kdemo-en .kdemo-l2 { animation-name: type2En, caret; }
.kdemo-en .scene { animation-name: sceneEn; }

.kdemo-send {
  align-self: flex-start; font-size: 14px; font-weight: 600;
  color: var(--kd-ground); background: var(--kd-ink);
  border-radius: 999px; padding: 7px 20px; animation: send 14.0s infinite;
}

/* ---- 导出面板。分组名和页脚是 App 里的原串，不是重写的。 ---- */
.kdemo-ex-title { font-size: 14px; font-weight: 700; }
.kdemo-ex-group { font-size: 11.5px; color: var(--kd-faint); margin-top: 3px; }
.kdemo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kdemo-chip {
  font-size: 12.5px; background: var(--kd-soft); color: var(--kd-ink);
  border-radius: 8px; padding: 4px 9px; opacity: 0;
}
.kdemo-ex-foot { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--kd-muted); }
.kdemo-chip.c1 { animation: chip1 14.0s infinite; }
.kdemo-chip.c2 { animation: chip2 14.0s infinite; }
.kdemo-chip.c3 { animation: chip3 14.0s infinite; }
.kdemo-chip.c4 { animation: chip4 14.0s infinite; }
.kdemo-chip.c5 { animation: chip5 14.0s infinite; }
.kdemo-chip.c6 { animation: chip6 14.0s infinite; }
.kdemo-chip.c7 { animation: chip7 14.0s infinite; }

/* ---- 画布 ---- */
.kdemo-map {
  position: relative; min-width: 0;
  background: var(--kd-card); border: 1px solid var(--kd-line);
  border-radius: 18px; padding: 20px 16px;
}
.kdemo-map svg { display: block; width: 100%; height: auto; }
/* 缩放要按 viewBox 的坐标走，不是按元素盒子 */
.kdemo .scene { transform-box: view-box; transform-origin: 0 0; animation: scene 14.0s infinite; }

.kdemo-think {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 7px; animation: think 14.0s infinite;
}
.kdemo-think i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--kd-muted);
  animation: blip .54s infinite;
}
.kdemo-think i:nth-child(2) { animation-delay: .09s }
.kdemo-think i:nth-child(3) { animation-delay: .18s }

/* ---- 演说模式的 chrome：✕ 在右上，进度胶囊在底部中间 ---- */
.kdemo-pres { position: absolute; inset: 0; animation: pres 14.0s infinite; }
.kdemo-x {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kd-soft); color: var(--kd-muted); font-size: 12px;
}
.kdemo-dots {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; align-items: center; gap: 7px;
}
.kdemo-dots i { height: 7px; width: 7px; border-radius: 999px; background: currentColor; opacity: .35; }
.kdemo-dots i.p1 { animation: dot1 14.0s infinite; }
.kdemo-dots i.p2 { animation: dot2 14.0s infinite; }
.kdemo-dots i.p3 { animation: dot3 14.0s infinite; }
.kdemo-dots i.p4 { animation: dot4 14.0s infinite; }

.kdemo-caps { display: grid; min-height: 1.6em; text-align: center; }
.kdemo-cap { grid-area: 1 / 1; margin: 0; font-size: 13px; line-height: 1.6; color: var(--kd-muted); }
.kdemo-cap1 { animation: cap1 14.0s infinite }
.kdemo-cap2 { animation: cap2 14.0s infinite }
.kdemo-cap3 { animation: cap3 14.0s infinite }

/* 图里各件的入场 */
/* dasharray 写 "1 2" 不写 "1"：周期是 3 不是 2。写 "1" 的话，描边起步那一刻
   dashoffset=1，下一段虚线恰好从路径终点起头，圆头线帽在终点画出一个点——
   线还没到，终点先亮一下（出片时第 140 帧「定价」那条的末端，第 45、50 帧也有）。 */
.kdemo svg .ln { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.kdemo .a-root { transform-box: fill-box; transform-origin: center; animation: root 14.0s infinite; }
.kdemo .a-m1 { animation: drawM1 14.0s infinite } .kdemo .a-f1 { animation: drawF1 14.0s infinite }
.kdemo .a-m2 { animation: drawM2 14.0s infinite } .kdemo .a-f2 { animation: drawF2 14.0s infinite }
.kdemo .a-m3 { animation: drawM3 14.0s infinite } .kdemo .a-f3 { animation: drawF3 14.0s infinite }
.kdemo .a-l1 { animation: lbl1 14.0s infinite } .kdemo .a-l2 { animation: lbl2 14.0s infinite }
.kdemo .a-l3 { animation: lbl3 14.0s infinite }
.kdemo .a-new { animation: drawNew 14.0s infinite }
.kdemo .a-newl { animation: lblNew 14.0s infinite }

/* 关了动效的人直接看最后一帧：改完的整张图。不是"不给看"，是"不用等"。 */
@media (prefers-reduced-motion: reduce) {
  .kdemo, .kdemo * { animation: none !important; }
  .kdemo svg .ln { stroke-dashoffset: 0; }
  .kdemo .kdemo-l1, .kdemo-think, .kdemo-cap1, .kdemo-cap3,
  .kdemo .kdemo-export, .kdemo .kdemo-pres { display: none; }
  .kdemo .kdemo-l2, .kdemo .kdemo-cap2 { opacity: 1; }
  .kdemo .kdemo-l2 { max-width: none; border-right-color: transparent; }
  .kdemo .kdemo-chip { opacity: 1; }
}

/* 两栏在 980px 以下就不成立了：左栏是定死的 320/344px，剩给画布的宽度
   往下掉得比窗口还快——768px 的窗口只剩 350px 画布，632 的 viewBox 缩进去，
   11.5 个用户单位的标签只剩 6px 高。**断点按画布够不够宽定，不是按"手机/平板"定。** */
@media (max-width: 980px) {
  /* 一列的时候"左栏"本来就在上面，收起来只会跳，所以收栏那一下也关掉。
     两个选择器都得写：.kdemo-en .kdemo-row 的权重比 .kdemo-row 高，
     只关前者，英文版会照旧收栏。 */
  .kdemo-row, .kdemo-en .kdemo-row { grid-template-columns: 1fr; row-gap: 16px; }

  /* 输入框铺满一整行会变成一条空荡荡的白带——它在 App 里就是个输入框大小。 */
  .kdemo-side { max-width: 420px; }


  /* 打字那行是 nowrap 的，装不下就被 overflow 切掉——那句话**永远打不完**。
     宽度写成 em 正好让它跟着字号走：字号按视口算，宽度自己跟着缩。
     系数是倒推的：可用宽度 = 100vw − 48(版心) − 38(框的 padding 和边框)，
     中文要装 14em，英文要装 19.05em，各留 2px 给光标。
     （英文那句在 320px 的 SE 上按 15px 要 286px，可用只有 234px。
     系数落到 11.36px，那一档实测 225px——小字号字距松，是 19.82em 不是 19.05em——
     加光标 227px，还剩约 7px。） */
  .kdemo-line { font-size: min(15px, calc(7.0vw - 6.4px)); }
  .kdemo-en .kdemo-line { font-size: min(15px, calc(5.05vw - 4.8px)); }
}

/* 画布窄到 600px 以下，标签跟着放大——和 styles.css 里静态图那条是同一条规矩。 */
@media (max-width: 640px) {
  .kdemo-map text { font-size: 14px; }

  /* 字一放大，各支的包围盒就变宽，演说那几站得按新包围盒重算，
     否则贴着边缩的那几站会把标签切掉。 */
  .kdemo .scene { animation-name: sceneSm; }
  .kdemo-en .scene { animation-name: sceneSmEn; }
}

@keyframes stage {
  0.0% { opacity: 0 }
  1.7857% { opacity: 1 }
  98.2143% { opacity: 1 }
  100.0% { opacity: 0 }
}

@keyframes badge {
  0.0% { opacity: 0 }
  0.7143% { opacity: 0 }
  3.5714% { opacity: 1 }
  53.2143% { opacity: 1 }
  55.0% { opacity: 0 }
  68.5714% { opacity: 0 }
  70.3571% { opacity: 1 }
  100.0% { opacity: 1 }
}

@keyframes type1 {
  0.0% { max-width: 0; opacity: 1 }
  2.1429% { max-width: 0; opacity: 1; animation-timing-function: steps(1, end) }
  2.602% { max-width: calc(1em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  3.0612% { max-width: calc(2em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  3.5204% { max-width: calc(3em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  3.9796% { max-width: calc(4em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  4.4388% { max-width: calc(5em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  4.898% { max-width: calc(6em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  5.3571% { max-width: calc(7em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  5.8163% { max-width: calc(8em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  6.2755% { max-width: calc(9em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  6.7347% { max-width: calc(10em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  7.1939% { max-width: calc(11em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  7.6531% { max-width: calc(12em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  8.1122% { max-width: calc(13em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  8.5714% { max-width: 40em; opacity: 1 }
  29.2857% { max-width: 40em; opacity: 1 }
  31.4286% { max-width: 40em; opacity: 0 }
  100.0% { max-width: 40em; opacity: 0 }
}

@keyframes type2 {
  0.0% { max-width: 0; opacity: 0 }
  30.7143% { max-width: 0; opacity: 0 }
  31.0714% { max-width: 0; opacity: 1; animation-timing-function: steps(1, end) }
  31.511% { max-width: calc(1em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  31.9505% { max-width: calc(2em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  32.3901% { max-width: calc(3em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  32.8297% { max-width: calc(4em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  33.2692% { max-width: calc(5em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  33.7088% { max-width: calc(6em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  34.1484% { max-width: calc(7em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  34.5879% { max-width: calc(8em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  35.0275% { max-width: calc(9em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  35.467% { max-width: calc(10em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  35.9066% { max-width: calc(11em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  36.3462% { max-width: calc(12em + 2px); opacity: 1; animation-timing-function: steps(1, end) }
  36.7857% { max-width: 40em; opacity: 1 }
  100.0% { max-width: 40em; opacity: 1 }
}

@keyframes type1En {
  0.0% { max-width: 0; opacity: 1 }
  2.1429% { max-width: 0; opacity: 1; animation-timing-function: steps(1, end) }
  2.3036% { max-width: calc(0.58em + 2.98px); opacity: 1; animation-timing-function: steps(1, end) }
  2.4643% { max-width: calc(0.8863em + 3.88px); opacity: 1; animation-timing-function: steps(1, end) }
  2.625% { max-width: calc(1.365em + 4.82px); opacity: 1; animation-timing-function: steps(1, end) }
  2.7857% { max-width: calc(1.844em + 5.69px); opacity: 1; animation-timing-function: steps(1, end) }
  2.9464% { max-width: calc(2.3104em + 6.61px); opacity: 1; animation-timing-function: steps(1, end) }
  3.1071% { max-width: calc(2.3104em + 6.61px); opacity: 1; animation-timing-function: steps(1, end) }
  3.2679% { max-width: calc(3.022em + 8.45px); opacity: 1; animation-timing-function: steps(1, end) }
  3.4286% { max-width: calc(3.5159em + 9.38px); opacity: 1; animation-timing-function: steps(1, end) }
  3.5893% { max-width: calc(3.9468em + 10.27px); opacity: 1; animation-timing-function: steps(1, end) }
  3.75% { max-width: calc(4.2329em + 11.2px); opacity: 1; animation-timing-function: steps(1, end) }
  3.9107% { max-width: calc(4.2329em + 11.2px); opacity: 1; animation-timing-function: steps(1, end) }
  4.0714% { max-width: calc(5.1369em + 13.02px); opacity: 1; animation-timing-function: steps(1, end) }
  4.2321% { max-width: calc(5.6121em + 13.94px); opacity: 1; animation-timing-function: steps(1, end) }
  4.3929% { max-width: calc(6.1071em + 14.86px); opacity: 1; animation-timing-function: steps(1, end) }
  4.5536% { max-width: calc(6.5754em + 15.76px); opacity: 1; animation-timing-function: steps(1, end) }
  4.7143% { max-width: calc(6.7955em + 16.68px); opacity: 1; animation-timing-function: steps(1, end) }
  4.875% { max-width: calc(7.1792em + 17.59px); opacity: 1; animation-timing-function: steps(1, end) }
  5.0357% { max-width: calc(7.1792em + 17.59px); opacity: 1; animation-timing-function: steps(1, end) }
  5.1964% { max-width: calc(7.5622em + 19.41px); opacity: 1; animation-timing-function: steps(1, end) }
  5.3571% { max-width: calc(8.0367em + 20.35px); opacity: 1; animation-timing-function: steps(1, end) }
  5.5179% { max-width: calc(8.5433em + 21.27px); opacity: 1; animation-timing-function: steps(1, end) }
  5.6786% { max-width: calc(9.0518em + 22.17px); opacity: 1; animation-timing-function: steps(1, end) }
  5.8393% { max-width: calc(9.5345em + 23.1px); opacity: 1; animation-timing-function: steps(1, end) }
  6.0% { max-width: calc(10.0482em + 23.99px); opacity: 1; animation-timing-function: steps(1, end) }
  6.1607% { max-width: calc(10.0482em + 23.99px); opacity: 1; animation-timing-function: steps(1, end) }
  6.3214% { max-width: calc(10.4233em + 25.83px); opacity: 1; animation-timing-function: steps(1, end) }
  6.4821% { max-width: calc(10.9309em + 26.75px); opacity: 1; animation-timing-function: steps(1, end) }
  6.6429% { max-width: calc(11.2192em + 27.64px); opacity: 1; animation-timing-function: steps(1, end) }
  6.8036% { max-width: calc(11.7268em + 28.56px); opacity: 1; animation-timing-function: steps(1, end) }
  6.9643% { max-width: calc(11.7268em + 28.56px); opacity: 1; animation-timing-function: steps(1, end) }
  7.125% { max-width: calc(12.4083em + 30.38px); opacity: 1; animation-timing-function: steps(1, end) }
  7.2857% { max-width: calc(12.4083em + 30.38px); opacity: 1; animation-timing-function: steps(1, end) }
  7.4464% { max-width: calc(13.4058em + 32.24px); opacity: 1; animation-timing-function: steps(1, end) }
  7.6071% { max-width: calc(13.5784em + 33.12px); opacity: 1; animation-timing-function: steps(1, end) }
  7.7679% { max-width: calc(14.0859em + 34.04px); opacity: 1; animation-timing-function: steps(1, end) }
  7.9286% { max-width: calc(14.6217em + 34.99px); opacity: 1; animation-timing-function: steps(1, end) }
  8.0893% { max-width: calc(14.6217em + 34.99px); opacity: 1; animation-timing-function: steps(1, end) }
  8.25% { max-width: calc(15.6225em + 36.8px); opacity: 1; animation-timing-function: steps(1, end) }
  8.4107% { max-width: calc(16.0963em + 37.73px); opacity: 1; animation-timing-function: steps(1, end) }
  8.5714% { max-width: 40em; opacity: 1 }
  29.2857% { max-width: 40em; opacity: 1 }
  31.4286% { max-width: 40em; opacity: 0 }
  100.0% { max-width: 40em; opacity: 0 }
}

@keyframes type2En {
  0.0% { max-width: 0; opacity: 0 }
  30.7143% { max-width: 0; opacity: 0 }
  31.0714% { max-width: 0; opacity: 1; animation-timing-function: steps(1, end) }
  31.2619% { max-width: calc(0.5976em + 2.97px); opacity: 1; animation-timing-function: steps(1, end) }
  31.4524% { max-width: calc(1.1058em + 3.9px); opacity: 1; animation-timing-function: steps(1, end) }
  31.6429% { max-width: calc(1.6464em + 4.77px); opacity: 1; animation-timing-function: steps(1, end) }
  31.8333% { max-width: calc(1.6464em + 4.77px); opacity: 1; animation-timing-function: steps(1, end) }
  32.0238% { max-width: calc(2.365em + 6.62px); opacity: 1; animation-timing-function: steps(1, end) }
  32.2143% { max-width: calc(2.8722em + 7.54px); opacity: 1; animation-timing-function: steps(1, end) }
  32.4048% { max-width: calc(3.367em + 8.46px); opacity: 1; animation-timing-function: steps(1, end) }
  32.5952% { max-width: calc(3.367em + 8.46px); opacity: 1; animation-timing-function: steps(1, end) }
  32.7857% { max-width: calc(4.0802em + 10.28px); opacity: 1; animation-timing-function: steps(1, end) }
  32.9762% { max-width: calc(4.5877em + 11.2px); opacity: 1; animation-timing-function: steps(1, end) }
  33.1667% { max-width: calc(5.1251em + 12.12px); opacity: 1; animation-timing-function: steps(1, end) }
  33.3571% { max-width: calc(5.6219em + 13.02px); opacity: 1; animation-timing-function: steps(1, end) }
  33.5476% { max-width: calc(5.9248em + 13.95px); opacity: 1; animation-timing-function: steps(1, end) }
  33.7381% { max-width: calc(5.9248em + 13.95px); opacity: 1; animation-timing-function: steps(1, end) }
  33.9286% { max-width: calc(6.6905em + 15.77px); opacity: 1; animation-timing-function: steps(1, end) }
  34.119% { max-width: calc(6.9936em + 16.7px); opacity: 1; animation-timing-function: steps(1, end) }
  34.3095% { max-width: calc(7.4952em + 17.59px); opacity: 1; animation-timing-function: steps(1, end) }
  34.5% { max-width: calc(8.0349em + 18.49px); opacity: 1; animation-timing-function: steps(1, end) }
  34.6905% { max-width: calc(8.5404em + 19.43px); opacity: 1; animation-timing-function: steps(1, end) }
  34.881% { max-width: calc(9.0257em + 20.32px); opacity: 1; animation-timing-function: steps(1, end) }
  35.0714% { max-width: calc(9.3222em + 21.24px); opacity: 1; animation-timing-function: steps(1, end) }
  35.2619% { max-width: calc(9.5434em + 22.15px); opacity: 1; animation-timing-function: steps(1, end) }
  35.4524% { max-width: calc(9.5434em + 22.15px); opacity: 1; animation-timing-function: steps(1, end) }
  35.6429% { max-width: calc(10.3073em + 23.99px); opacity: 1; animation-timing-function: steps(1, end) }
  35.8333% { max-width: calc(10.6121em + 24.9px); opacity: 1; animation-timing-function: steps(1, end) }
  36.0238% { max-width: calc(10.7819em + 25.83px); opacity: 1; animation-timing-function: steps(1, end) }
  36.2143% { max-width: calc(11.2666em + 26.73px); opacity: 1; animation-timing-function: steps(1, end) }
  36.4048% { max-width: calc(11.4368em + 27.65px); opacity: 1; animation-timing-function: steps(1, end) }
  36.5952% { max-width: calc(11.9433em + 28.59px); opacity: 1; animation-timing-function: steps(1, end) }
  36.7857% { max-width: 40em; opacity: 1 }
  100.0% { max-width: 40em; opacity: 1 }
}

@keyframes send {
  0.0% { opacity: .35; transform: scale(1) }
  3.2143% { opacity: .35; transform: scale(1) }
  5.0% { opacity: 1; transform: scale(1) }
  8.5714% { opacity: 1; transform: scale(1) }
  9.2857% { opacity: 1; transform: scale(.92) }
  10.1429% { opacity: 1; transform: scale(1) }
  11.4286% { opacity: .35; transform: scale(1) }
  32.1429% { opacity: .35; transform: scale(1) }
  33.9286% { opacity: 1; transform: scale(1) }
  36.7857% { opacity: 1; transform: scale(1) }
  37.5% { opacity: 1; transform: scale(.92) }
  38.3571% { opacity: 1; transform: scale(1) }
  39.6429% { opacity: .35; transform: scale(1) }
  100.0% { opacity: .35; transform: scale(1) }
}

@keyframes think {
  0.0% { opacity: 0 }
  9.4286% { opacity: 0 }
  10.0% { opacity: 1 }
  11.2857% { opacity: 1 }
  11.8571% { opacity: 0 }
  37.7143% { opacity: 0 }
  38.2143% { opacity: 1 }
  39.2857% { opacity: 1 }
  39.8571% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes blip {
  0% { opacity: .25 }
  50% { opacity: 1 }
  100% { opacity: .25 }
}

@keyframes root {
  0.0% { opacity: 0; transform: scale(.72) }
  11.7857% { opacity: 0; transform: scale(.72); animation-timing-function: cubic-bezier(.2,1.3,.4,1) }
  13.9286% { opacity: 1; transform: scale(1) }
  78.5714% { opacity: 1; transform: scale(1) }
  79.5714% { opacity: 0; transform: scale(1) }
  100.0% { opacity: 0; transform: scale(1) }
}

@keyframes drawM1 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  12.6429% { stroke-dashoffset: 1; opacity: 0 }
  12.8571% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  15.3571% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes drawM2 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  13.7143% { stroke-dashoffset: 1; opacity: 0 }
  13.9286% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  16.4286% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes drawM3 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  14.7857% { stroke-dashoffset: 1; opacity: 0 }
  15.0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  17.5% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes drawF1 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  14.0714% { stroke-dashoffset: 1; opacity: 0 }
  14.2857% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  16.7857% { stroke-dashoffset: 0; opacity: 1 }
  85.0% { stroke-dashoffset: 0; opacity: 1 }
  86.0% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes lbl1 {
  0.0% { opacity: 0 }
  14.2857% { opacity: 0 }
  16.4286% { opacity: 1 }
  85.0% { opacity: 1 }
  86.0% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes drawF2 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  15.1429% { stroke-dashoffset: 1; opacity: 0 }
  15.3571% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  17.8571% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  85.0% { stroke-dashoffset: 0; opacity: 0 }
  86.0% { stroke-dashoffset: 0; opacity: 1 }
  91.4286% { stroke-dashoffset: 0; opacity: 1 }
  92.4286% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes lbl2 {
  0.0% { opacity: 0 }
  15.3571% { opacity: 0 }
  17.5% { opacity: 1 }
  78.5714% { opacity: 1 }
  79.5714% { opacity: 0 }
  85.0% { opacity: 0 }
  86.0% { opacity: 1 }
  91.4286% { opacity: 1 }
  92.4286% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes drawF3 {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  16.2143% { stroke-dashoffset: 1; opacity: 0 }
  16.4286% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  18.9286% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  91.4286% { stroke-dashoffset: 0; opacity: 0 }
  92.4286% { stroke-dashoffset: 0; opacity: 1 }
  100.0% { stroke-dashoffset: 0; opacity: 1 }
}

@keyframes lbl3 {
  0.0% { opacity: 0 }
  16.4286% { opacity: 0 }
  18.5714% { opacity: 1 }
  78.5714% { opacity: 1 }
  79.5714% { opacity: 0 }
  91.4286% { opacity: 0 }
  92.4286% { opacity: 1 }
  100.0% { opacity: 1 }
}

@keyframes drawNew {
  0.0% { stroke-dashoffset: 1; opacity: 0 }
  39.7857% { stroke-dashoffset: 1; opacity: 0 }
  40.0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  43.2143% { stroke-dashoffset: 0; opacity: 1 }
  78.5714% { stroke-dashoffset: 0; opacity: 1 }
  79.5714% { stroke-dashoffset: 0; opacity: 0 }
  85.0% { stroke-dashoffset: 0; opacity: 0 }
  86.0% { stroke-dashoffset: 0; opacity: 1 }
  91.4286% { stroke-dashoffset: 0; opacity: 1 }
  92.4286% { stroke-dashoffset: 0; opacity: 0 }
  100.0% { stroke-dashoffset: 0; opacity: 0 }
}

@keyframes lblNew {
  0.0% { opacity: 0 }
  42.5% { opacity: 0 }
  43.9286% { opacity: 1 }
  78.5714% { opacity: 1 }
  79.5714% { opacity: 0 }
  85.0% { opacity: 0 }
  86.0% { opacity: 1 }
  91.4286% { opacity: 1 }
  92.4286% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes panelCompose {
  0.0% { opacity: 1 }
  53.2143% { opacity: 1 }
  55.0% { opacity: 0 }
  68.5714% { opacity: 0 }
  70.3571% { opacity: 1 }
  100.0% { opacity: 1 }
}

@keyframes panelExport {
  0.0% { opacity: 0 }
  55.0% { opacity: 0 }
  57.1429% { opacity: 1 }
  66.7857% { opacity: 1 }
  68.5714% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes chip1 {
  0.0% { opacity: 0; transform: translateY(5px) }
  57.5% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  59.0714% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip2 {
  0.0% { opacity: 0; transform: translateY(5px) }
  58.1429% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  59.7143% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip3 {
  0.0% { opacity: 0; transform: translateY(5px) }
  58.7857% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  60.3571% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip4 {
  0.0% { opacity: 0; transform: translateY(5px) }
  59.4286% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  61.0% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip5 {
  0.0% { opacity: 0; transform: translateY(5px) }
  60.0714% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  61.6429% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip6 {
  0.0% { opacity: 0; transform: translateY(5px) }
  60.7143% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  62.2857% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes chip7 {
  0.0% { opacity: 0; transform: translateY(5px) }
  61.3571% { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  62.9286% { opacity: 1; transform: translateY(0) }
  100.0% { opacity: 1; transform: translateY(0) }
}

@keyframes row {
  0.0% { grid-template-columns: 320px 1fr; column-gap: 26px }
  68.5714% { grid-template-columns: 320px 1fr; column-gap: 26px; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  71.7857% { grid-template-columns: 0px 1fr; column-gap: 0px }
  100.0% { grid-template-columns: 0px 1fr; column-gap: 0px }
}

@keyframes rowEn {
  0.0% { grid-template-columns: 344px 1fr; column-gap: 26px }
  68.5714% { grid-template-columns: 344px 1fr; column-gap: 26px; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  71.7857% { grid-template-columns: 0px 1fr; column-gap: 0px }
  100.0% { grid-template-columns: 0px 1fr; column-gap: 0px }
}

@keyframes side {
  0.0% { opacity: 1 }
  68.5714% { opacity: 1 }
  70.3571% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes pres {
  0.0% { opacity: 0 }
  70.3571% { opacity: 0 }
  71.7857% { opacity: 1 }
  96.7857% { opacity: 1 }
  98.9286% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes scene {
  0.0% { transform: translate(0,0) scale(1) }
  78.5714% { transform: translate(0,0) scale(1); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.5714% { transform: translate(67.6px, -1.8px) scale(2.40) }
  85.0% { transform: translate(67.6px, -1.8px) scale(2.40); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  87.0% { transform: translate(-612.5px, -26.0px) scale(2.00) }
  91.4286% { transform: translate(-612.5px, -26.0px) scale(2.00); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  93.4286% { transform: translate(-812.0px, -261.0px) scale(2.40) }
  100.0% { transform: translate(-812.0px, -261.0px) scale(2.40) }
}

@keyframes sceneSm {
  0.0% { transform: translate(0,0) scale(1) }
  78.5714% { transform: translate(0,0) scale(1); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.5714% { transform: translate(73.6px, 1.8px) scale(2.40) }
  85.0% { transform: translate(73.6px, 1.8px) scale(2.40); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  87.0% { transform: translate(-585.7px, -19.3px) scale(1.93) }
  91.4286% { transform: translate(-585.7px, -19.3px) scale(1.93); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  93.4286% { transform: translate(-824.0px, -257.4px) scale(2.40) }
  100.0% { transform: translate(-824.0px, -257.4px) scale(2.40) }
}

@keyframes sceneEn {
  0.0% { transform: translate(0,0) scale(1) }
  78.5714% { transform: translate(0,0) scale(1); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.5714% { transform: translate(72.1px, -1.8px) scale(2.40) }
  85.0% { transform: translate(72.1px, -1.8px) scale(2.40); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  87.0% { transform: translate(-654.0px, -26.0px) scale(2.00) }
  91.4286% { transform: translate(-654.0px, -26.0px) scale(2.00); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  93.4286% { transform: translate(-796.2px, -261.0px) scale(2.40) }
  100.0% { transform: translate(-796.2px, -261.0px) scale(2.40) }
}

@keyframes sceneSmEn {
  0.0% { transform: translate(0,0) scale(1) }
  78.5714% { transform: translate(0,0) scale(1); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.5714% { transform: translate(78.1px, 1.8px) scale(2.40) }
  85.0% { transform: translate(78.1px, 1.8px) scale(2.40); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  87.0% { transform: translate(-633.6px, -19.3px) scale(1.93) }
  91.4286% { transform: translate(-633.6px, -19.3px) scale(1.93); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  93.4286% { transform: translate(-803.4px, -257.4px) scale(2.40) }
  100.0% { transform: translate(-803.4px, -257.4px) scale(2.40) }
}

@keyframes dot1 {
  0.0% { width: 7px; opacity: .35 }
  71.7857% { width: 7px; opacity: .35; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  73.2143% { width: 20px; opacity: 1 }
  78.5714% { width: 20px; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.0% { width: 7px; opacity: .35 }
  100.0% { width: 7px; opacity: .35 }
}

@keyframes dot2 {
  0.0% { width: 7px; opacity: .35 }
  78.5714% { width: 7px; opacity: .35; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  80.0% { width: 20px; opacity: 1 }
  85.0% { width: 20px; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  86.4286% { width: 7px; opacity: .35 }
  100.0% { width: 7px; opacity: .35 }
}

@keyframes dot3 {
  0.0% { width: 7px; opacity: .35 }
  85.0% { width: 7px; opacity: .35; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  86.4286% { width: 20px; opacity: 1 }
  91.4286% { width: 20px; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  92.8571% { width: 7px; opacity: .35 }
  100.0% { width: 7px; opacity: .35 }
}

@keyframes dot4 {
  0.0% { width: 7px; opacity: .35 }
  91.4286% { width: 7px; opacity: .35; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  92.8571% { width: 20px; opacity: 1 }
  97.8571% { width: 20px; opacity: 1; animation-timing-function: cubic-bezier(.33,0,.2,1) }
  99.2857% { width: 7px; opacity: .35 }
  100.0% { width: 7px; opacity: .35 }
}

@keyframes cap1 {
  0.0% { opacity: 0 }
  19.6429% { opacity: 0 }
  21.4286% { opacity: 1 }
  30.3571% { opacity: 1 }
  32.5% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes cap2 {
  0.0% { opacity: 0 }
  43.5714% { opacity: 0 }
  45.3571% { opacity: 1 }
  53.9286% { opacity: 1 }
  56.0714% { opacity: 0 }
  100.0% { opacity: 0 }
}

@keyframes cap3 {
  0.0% { opacity: 0 }
  85.7143% { opacity: 0 }
  87.5% { opacity: 1 }
  100.0% { opacity: 1 }
}