/* ============================================================
   AI × UI 设计工作流 — 分享站
   白底简洁 · Dither 点阵风格 · PPT 式翻页
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --ink: #14151a;
  --ink-soft: #5b606e;
  --ink-faint: #9aa0ad;
  --line: #e9eaee;

  /* 主强调色 —— 想换风格调这个变量即可 */
  --accent: #2f5bff;
  --accent-soft: rgba(47, 91, 255, 0.10);
  --accent-ink: #1f3fc4;

  /* Dither 点阵墨色（默认近黑，可改成强调色） */
  --dither: #14151a;

  --maxw: 1120px;
  --pad: clamp(28px, 6vw, 96px);

  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-hand: "Shantell Sans", "Segoe Print", cursive;


  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);

  /* 圆角节奏与投影（P1-3）：收敛全站散落值，改风格只改此处 */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --shadow-1: 0 14px 36px -26px rgba(20, 21, 26, 0.28);
  --shadow-2: 0 24px 60px -30px rgba(20, 21, 26, 0.3);
  --shadow-3: 0 24px 60px -28px rgba(20, 21, 26, 0.28);
  --shadow-accent-soft: 0 10px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

/* ---------- Deck 容器 ---------- */
.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: default;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  background-color: #fff;
  /* 统一点阵纹理（Dither 风），所有页面共用 */
  background-image: radial-gradient(rgba(20, 21, 26, 0.05) 1px, transparent 1.4px);
  background-size: 16px 16px;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease),
    visibility 0s linear 0.55s;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease),
    visibility 0s;
  z-index: 2;
}

/* 内容居中容器 */
.slide-inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 地址栏输入框仍允许选中/复制 URL */
.slide input, .slide textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ---------- 文字排版 ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 8px;
  background-image: radial-gradient(var(--accent) 1.3px, transparent 1.5px);
  background-size: 6px 6px;
}

h1.title {
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 26px;
  max-width: 16ch;
}
h2.heading {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 20px;
}
.lead {
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 8px;
}
.meta {
  margin-top: 40px;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* 内容页两栏 */
.cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: 18px;
}
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
}

ul.points {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.points li {
  position: relative;
  padding: 14px 0 14px 30px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
ul.points li:first-child { border-top: none; }
ul.points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 10px;
  height: 10px;
  background-image: radial-gradient(var(--accent) 2px, transparent 2.4px);
  background-size: 5px 5px;
}

/* ---------- Dither 装饰元素 ---------- */
.dither-radial {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 角落点阵块 */
.dither-corner {
  position: absolute;
  width: clamp(120px, 18vw, 240px);
  height: clamp(120px, 18vw, 240px);
  background-image: radial-gradient(var(--dither) 1.4px, transparent 1.6px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 72%);
  opacity: 0.9;
  pointer-events: none;
}
.dither-corner.tr { top: -40px; right: -30px; }
.dither-corner.bl { bottom: -50px; left: -30px; }

/* 背景大点阵球（hero 用） */
.hero-blob {
  position: absolute;
  width: min(72vmin, 760px);
  height: min(72vmin, 760px);
  top: 50%;
  right: -12%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

/* 页面序号徽标 */
.page-tag {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.page-tag .dot {
  width: 22px;
  height: 22px;
  background-image: radial-gradient(var(--ink) 1.5px, transparent 1.7px);
  background-size: 7px 7px;
}

/* 站点徽标：固定左上角，点击头像 = 切换全屏 */
.site-badge {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 60;
  display: block;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.site-badge:hover { transform: scale(1.06); opacity: 0.9; }
.site-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* 封面页：居中已有头像，隐藏左上角全局徽标（含全屏开关） */
body.cover-active .site-badge { display: none; }

/* 预览/示例徽标 */
.badge-preview {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--accent-ink);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
  background: var(--bg);
  transform: rotate(-3deg);
  z-index: 5;
}

/* ---------- 入场动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.slide.is-active .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 导航 ---------- */
.deck-nav {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 20;
}
.nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease), border-color 0.2s, color 0.2s;
}
.nav-btn:hover { transform: scale(1.08); border-color: var(--accent); color: var(--accent); }
.nav-btn:disabled { opacity: 0.3; cursor: default; transform: none; border-color: var(--line); color: var(--ink); }
.nav-btn svg { width: 18px; height: 18px; }

.deck-dots { display: flex; gap: 9px; align-items: center; }
.deck-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s;
}
.deck-dots button:hover { transform: scale(1.3); }
.deck-dots button.is-active { background: var(--accent); transform: scale(1.3); }

.deck-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--line);
  z-index: 20;
}
.deck-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}

/* 光标微光（hero 生动感）
   注意 z-index 必须高于 .slide（1/2），否则被页面盖住看不到；
   低于导航控件（20/60），且 pointer-events:none 不挡交互 */
.cursor-glow {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s;
}

/* ---------- 全屏模式 ---------- */
/* 进入全屏后：淡出外壳控件，但保留左上角头像（即全屏开关） */
body.fs-mode .deck-nav,
body.fs-mode .deck-progress,
body.fs-mode .cursor-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
/* 全屏下头像作为开关：默认半透明，移动鼠标 / 悬停时清晰 */
body.fs-mode .site-badge {
  opacity: 0.4;
  transition: opacity 0.35s var(--ease);
}
body.fs-mode.fs-awake .site-badge,
body.fs-mode .site-badge:hover { opacity: 1; }
/* 鼠标移动时短暂唤出工具栏，静止后再次隐藏 */
body.fs-mode.fs-awake .deck-nav {
  opacity: 1;
  pointer-events: auto;
}

/* 全屏且鼠标静止：隐藏光标，营造纯演示画面 */
body.fs-mode:not(.fs-awake) .deck { cursor: none; }

/* ---------- 封面：Dither 噪点汇聚成标题 ---------- */
.slide.cover {
  justify-content: center;
}
/* 柔和光晕，增加层次（仍在标题粒子之下） */
.slide.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 36%, rgba(47, 91, 255, 0.05), transparent 70%),
    radial-gradient(40% 40% at 82% 12%, rgba(47, 91, 255, 0.04), transparent 70%),
    radial-gradient(46% 42% at 12% 88%, rgba(47, 91, 255, 0.035), transparent 70%);
}
.cover-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* 封面居中头像（标题正上方） */
.cover-avatar {
  position: absolute;
  top: clamp(46px, 15vh, 116px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(58px, 8vh, 84px);
  height: clamp(58px, 8vh, 84px);
  z-index: 2;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.cover-avatar:hover { transform: translateX(-50%) scale(1.06); }
.cover-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 标题下方装饰性英文 */
.cover-sub {
  position: absolute;
  top: 63%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  z-index: 2;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: 1.9s;
}
.slide.is-active .cover-sub {
  opacity: 1;
  transform: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cover-meta {
  position: absolute;
  top: auto;
  bottom: clamp(34px, 6vh, 64px);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: 1.5s;
}
.slide.is-active .cover-meta {
  opacity: 1;
  transform: none;
}

/* ---------- 第 2 页：分步点击揭示 ---------- */
.step-slide .slide-inner {
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.step-text {
  max-width: 24em;
  margin: 0;
  font-size: clamp(18px, 2.3vw, 29px);
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    max-height 0.7s var(--ease), margin-top 0.7s var(--ease);
}
.step-text.show {
  opacity: 1;
  transform: none;
  max-height: 20em;
  overflow: visible; /* 允许 .ann 手绘标注的箭头/标签/高亮阴影溢出可见 */
}
/* 段2出现时才顶出空隙，把段1向上顶、两段整体居中 */
.step-text.show + .step-text.show { margin-top: 1.8em; }

.step-big {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: clamp(46px, 9vw, 124px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.step-big .accent { color: var(--accent); }
.step-big.show { opacity: 1; transform: none; }

.step-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  z-index: 1;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.step-hint.show { opacity: 0.75; }

/* ---------- 第 3 页：浏览器 MockUp 复刻妙多板块 ---------- */
.browser-mock {
  position: relative;
  width: min(960px, 92vw);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  z-index: 1;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-faint); opacity: 0.55;
}
.browser-url {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--ink-soft);
  font-size: 13px;
}
.browser-url .lock { width: 13px; height: 13px; flex: none; opacity: 0.7; }
.browser-url .url-input {
  border: none; outline: none; background: transparent;
  font: inherit; color: var(--ink-soft); width: 100%;
}
.browser-url:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.browser-reload {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.3s var(--ease), color 0.2s, border-color 0.2s;
}
.browser-reload:hover { color: var(--accent); border-color: var(--accent); }
.browser-reload:active { transform: rotate(180deg); }
.browser-reload svg { width: 16px; height: 16px; }

.browser-view {
  max-height: 62vh;
  overflow-y: auto;
  padding: clamp(26px, 4vw, 52px);
  background-image: radial-gradient(rgba(20, 21, 26, 0.045) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.mf-hero { text-align: center; margin-bottom: 28px; }
.mf-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px;
}
.mf-title {
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12;
  letter-spacing: -0.015em; font-weight: 700; margin: 0; color: var(--ink);
}
.mf-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 26px;
}
.mf-tab {
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s var(--ease);
}
.mf-tab:hover { border-color: var(--accent); color: var(--accent); }
.mf-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.mf-panels { position: relative; }
.mf-panel { display: none; }
.mf-panel.is-active { display: block; animation: mfIn 0.5s var(--ease); }
@keyframes mfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mf-sub {
  text-align: center; color: var(--ink-soft);
  font-size: clamp(15px, 1.8vw, 18px); margin: 0 0 22px;
}
.mf-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mf-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.mf-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 28px -18px rgba(47, 91, 255, 0.5);
  transform: translateY(-2px);
}
.mf-ico {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  background-image: radial-gradient(var(--accent) 2px, transparent 2.4px);
  background-size: 7px 7px;
  border: 1.5px solid var(--accent); border-radius: 8px;
}
.mf-card h3 { margin: 0 0 6px; font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; color: var(--ink); }
.mf-card p { margin: 0; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.65; color: var(--ink-soft); }

/* 刷新加载态 */
.browser-view.loading { opacity: 0.35; transition: opacity 0.2s; }

/* 让 neat-annotations 的标签字体生效 */
.ann { --ann-font: var(--font-hand); }
/* 项目级手绘标注定制：注释/箭头走 neat purple、高亮底纹 16% 紫色（覆盖 neat 默认浅灰，白底上更清晰） */
.ann {
  --ann-color: #8657c8;
  --ann-mark: color-mix(in srgb, #8657c8 16%, transparent);
}
/* 标注浮层置顶：箭头/标签 z-index 提到全局最高，避免被卡片/浏览器 MockUp 等遮挡 */
.ann::before { z-index: 999; }
.ann::after  { z-index: 1000; }

/* ========== 第 4 页：截图页 ========== */
.screenshot-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 32px 48px;
}
.ss-caption {
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  max-width: 56ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.slide.is-active .screenshot-slide .ss-caption {
  opacity: 1;
  transform: none;
  transition-delay: 200ms;
}
.ss-frame {
  width: 100%;
  max-width: 1100px;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.slide.is-active .screenshot-slide .ss-frame {
  opacity: 1;
  transform: none;
  transition-delay: 400ms;
}
.ss-view {
  overflow: hidden;
  background: #fff;
  padding: 0;            /* 覆盖 .browser-view 的内边距，让截图贴满外框 */
  max-height: none;      /* 不裁剪高度，外框随截图高度撑满 */
  display: block;
}
.ss-view img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* 让第 5 页的 screenshot-slide 有确定高度，mcp-layer 才能用 absolute inset 撑满 */
.mcp-slide .screenshot-slide { height: 100%; }

/* 第 5 页：MasterGo → Sketch → MCP 流程图 分步切换 */
.mcp-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 32px 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
  pointer-events: none;
}
.mcp-layer.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 第 4 页内截图帧不需要额外入场动画，由 mcp-layer 统一淡入淡出 */
.mcp-layer .ss-frame {
  opacity: 1;
  transform: none;
  transition: none;
}
.mcp-caption {
  font-size: clamp(18px, 2.3vw, 27px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
.mcp-flow-title {
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 44px;
}
.mcp-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 52px);
}
.mcp-flow-node {
  min-width: clamp(130px, 20vw, 200px);
  padding: 24px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  text-align: center;
  font-size: clamp(19px, 2.7vw, 31px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}
.mcp-flow-node.accent {
  color: var(--accent);
  border-color: var(--accent);
}
.mcp-flow-arrow {
  width: clamp(30px, 5vw, 60px);
  height: 2px;
}
.mcp-flow-arrow::after {
  width: 9px; height: 9px;
}

/* ========== 第 6 页：WorkBuddy 三点优势（分步揭示） ========== */
.wb-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.wb-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 18px;
  transition: left .8s var(--ease), transform .8s var(--ease);
}
.wb-slide.left .wb-brand {
  left: 21%;
  transform: translate(-50%, -50%) scale(.92);
}
.wb-icon {
  flex-shrink: 0;
}
.wb-logo-img {
  display: block;
  width: clamp(44px, 5vw, 60px);
  height: clamp(44px, 5vw, 60px);
  border-radius: 30%;
  filter: drop-shadow(0 8px 20px rgba(1,200,134,.28));
}
.wb-name {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  max-width: 320px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .45s var(--ease), max-width .5s var(--ease), margin .5s var(--ease), transform .5s var(--ease);
}
.wb-slide.left .wb-name {
  opacity: 0;
  max-width: 0;
  margin-left: -18px;
  transform: translateX(-12px);
}
.wb-points {
  position: absolute;
  top: 50%; left: 38%; right: 7%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  max-width: 640px;
}
.wb-point {
  margin: 0;
  font-size: clamp(16px, 2vw, 25px);
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  opacity: 0;
  transform: translateY(22px);
  max-height: 0;
  overflow: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease), max-height .6s var(--ease);
}
.wb-point::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-2px);
}
.wb-point.show {
  opacity: 1;
  transform: none;
  max-height: 220px;
}


/* ========== 第 7 页：MCP 对比（VS 风格） ========== */
.vs-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 8px;
}
.vs-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  padding: 30px 28px 34px;
  box-shadow: 0 18px 50px -22px rgba(47,91,255,.28);
}
.vs-name {
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.vs-rows { list-style: none; margin: 0; padding: 0; }
.vs-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.vs-rows li:last-child { border-bottom: none; }
.vs-k {
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.vs-v {
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 600;
  color: var(--accent);
  text-align: right;
}
.vs-badge {
  align-self: center;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  margin: 0 -12px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px -10px rgba(20,21,26,.5);
  z-index: 2;
}
@media (max-width: 720px) {
  .vs-wrap { flex-direction: column; align-items: stretch; gap: 14px; }
  .vs-badge { align-self: center; margin: -28px 0; width: 46px; height: 46px; }
}

/* 第 7 页：步骤切换（VS 表 → 经验卡） */
.vs-step {
  width: 100%;
  transition: opacity .4s var(--ease), visibility 0s;
}
.vs-step:not(.show) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.zip-diagram {
  width: 100%;
  margin-top: 2px;
}
.zip-diagram svg {
  width: 100%;
  height: auto;
  max-width: 680px;
  display: block;
  margin: 0 auto;
}

/* ========== 第 8 页：经验卡（背面墙 → 翻转展开 → 模型榜） ========== */
/* 状态0：满屏上下滚动的经验卡背面墙（淡色、无文字） */
.exp-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: auto;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(44px, 7vh, 90px) 6vw;
  align-content: start;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.exp-wall.gone {
  opacity: 0;
  transform: scale(.92) rotateX(10deg);
  pointer-events: none;
}
.exp-wall::-webkit-scrollbar { width: 8px; }
.exp-wall::-webkit-scrollbar-thumb { background: rgba(20,21,26,.12); border-radius: 4px; }
.exp-back-card {
  aspect-ratio: 3 / 4;
  align-self: start;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, #f4f6fa 0%, #e8ecf3 100%);
  box-shadow: 0 10px 26px -16px rgba(20,21,26,.16);
  position: relative;
}
.exp-back-card::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px; height: 38px;
  border: 2px solid rgba(47,91,255,.18);
  border-radius: 10px;
}

/* 状态1：翻转展开的经验卡（文字 + Arena 截图），横向占大部分屏幕 */
.exp-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s;
}
.exp-panel.show { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.exp-panel-inner {
  width: min(86vw, 1000px);
  max-height: 88vh;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-xl);
  padding: 28px 34px 32px;
  box-shadow: 0 26px 64px -22px rgba(47,91,255,.42);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: rotateY(-92deg) scale(.62);
  transform-origin: center;
  opacity: 0;
  transition: transform .75s cubic-bezier(.2,.85,.3,1), opacity .5s var(--ease);
}
.exp-panel.show .exp-panel-inner { transform: none; opacity: 1; }
.exp-tag {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 13px;
}
.exp-text {
  margin: 0;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}
.exp-panel .browser-mock { width: 100%; }

/* 状态2：模型排行榜（点击后逐行揭示） */
.exp-models {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s;
}
.exp-models.show { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s; }
.exp-models-title {
  margin: 0;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.model-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 14px -8px rgba(20,21,26,.08);
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .45s var(--ease), transform .5s cubic-bezier(.22,1,.36,1),
    border-color .3s, box-shadow .3s;
}
.model-item.visible { opacity: 1; transform: none; }
.model-item:hover { border-color: var(--accent); box-shadow: 0 8px 24px -10px rgba(47,91,255,.25); }
.model-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.model-icon--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.model-name {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ========== 第 9 页：AI 对话界面（自动播放） ========== */
.chat-stage {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5.5vh, 64px);
  padding: 0 6vw;
}
.chat-head {
  margin: 0;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .6s var(--ease) .05s, transform .6s var(--ease) .05s;
}
.chat-slide.is-active .chat-head { opacity: 1; transform: none; }

.chat-flow {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 34px);
}
.chat-row { display: flex; }
.chat-row--user { justify-content: flex-end; }
.chat-row--ai { justify-content: flex-start; align-items: center; gap: 14px; }

/* 用户对话气泡（先出现） */
.chat-bubble {
  max-width: min(80%, 560px);
  padding: 22px 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 18px 44px -18px rgba(47,91,255,.5);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease) .9s, transform .9s var(--ease) .9s;
}
.chat-slide.is-active .chat-bubble { opacity: 1; transform: none; }
.chat-bubble-text {
  margin: 0;
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1.62;
  text-align: left;
  font-weight: 500;
}

/* WorkBuddy 头像 + 深度思考（后出现，时差大） */
.chat-avatar {
  flex-shrink: 0;
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  border-radius: 26%;
  overflow: hidden;
  box-shadow: 0 10px 26px -10px rgba(1,200,134,.4);
  background: #fff;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease) 2.8s, transform .9s var(--ease) 2.8s;
}
.chat-slide.is-active .chat-avatar { opacity: 1; transform: none; }
.chat-avatar img { width: 100%; height: 100%; object-fit: contain; }

.chat-ai-label {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease) 3.05s, transform .8s var(--ease) 3.05s;
}
.chat-slide.is-active .chat-ai-label { opacity: 1; transform: none; }

/* 第 9 页：步骤切换（对话界面 → 经验卡） */
.chat-step {
  width: 100%;
  transition: opacity .4s var(--ease), visibility 0s;
}
.chat-step:not(.show) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 深度思考 三点加载循环 */
.chat-dots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.chat-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .25;
  animation: chatDot 1.2s infinite ease-in-out;
}
.chat-dots i:nth-child(2) { animation-delay: .2s; }
.chat-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: .2; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ========== 第 10 页：Benchmark 产物（标签切换嵌入） ========== */
.bench-slide { justify-content: flex-start; gap: clamp(12px, 2vh, 20px); padding-top: calc(var(--pad) + 56px); }
.bench-caption {
  margin: 0;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.bench-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.bench-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
    background .2s var(--ease), box-shadow .2s var(--ease);
}
.bench-tab:hover { border-color: var(--accent); color: var(--accent); }
.bench-tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(47,91,255,.55);
}
.fmt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.4;
}
.fmt--html { background: rgba(47,91,255,.12); color: var(--accent); }
.fmt--md { background: rgba(20,21,26,.08); color: #5b6472; }
.bench-tab.is-active .fmt--html { background: rgba(255,255,255,.22); color: #fff; }
.bench-tab.is-active .fmt--md { background: rgba(255,255,255,.2); color: #fff; }

.bench-stage { position: relative; width: 100%; flex: 1; min-height: 0; }
.bench-frame { display: none; width: 100%; max-width: 1140px; margin: 0 auto; height: 100%; }
.bench-frame.is-active { display: flex; flex-direction: column; }
.bench-view {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  max-height: none;
}
.bench-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------- 第 11 页：主观结论 逐句卡片揭示 ---------- */
.concl-wrap {
  position: relative;
  z-index: 1;
  width: min(860px, 90vw);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  transition: opacity .45s var(--ease), transform .5s var(--ease), visibility 0s;
}
/* 第 5 步：结论整体淡出 */
.concl-wrap.gone {
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  visibility: hidden;
  pointer-events: none;
}
.concl-card {
  display: none;                 /* 隐藏时不占空间，避免空白间隙 */
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 24px;
  box-shadow: 0 18px 44px -30px rgba(20, 21, 26, 0.30);
  text-align: left;
}
.concl-card.show {
  display: flex;
  animation: conclIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes conclIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
/* 第 1-2 张卡：第 3 步起被「组合面板」一起圈住（表达两模型可混合使用） */
.concl-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border-radius: var(--r-xl);
  border: 1.5px solid transparent;
  background: transparent;
  transition: padding .45s var(--ease), background .45s var(--ease),
    border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.concl-group.show {
  padding: 22px;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent) 2%, transparent));
  box-shadow: 0 26px 60px -34px rgba(47, 91, 255, .40);
  animation: conclFrameIn 0.55s ease both;
}
/* 两卡之间的「组合」连接器：横向连线 + 中心 + 节点（第 3 步出现） */
.concl-plus {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -2px 0;
}
.concl-plus.show {
  display: flex;
  animation: conclIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.concl-plus::before,
.concl-plus::after {
  content: "";
  height: 2px;
  width: clamp(36px, 11vw, 120px);
  background: linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent) 55%, transparent);
  opacity: .55;
}
.concl-plus .node {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(47, 91, 255, .60);
}
@keyframes conclFrameIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
/* 第 5 步经验卡（复用 .exp-panel）：截图 16:10 全屏，限高裁切底部 */
.concl-exp .exp-panel-inner { overflow-y: auto; }
.concl-exp .ss-view img {
  max-height: 46vh;
  width: 100%;
  object-fit: cover;
  object-position: top;
}
/* 第 3 步：配套注释（普通字体，干净样式；手绘批注后续另加） */
.concl-note {
  display: none;
  position: relative;
  margin: 6px 0 0;
  padding: 4px 4px 4px 16px;
  border-left: 3px solid var(--accent);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.concl-note.show { display: block; animation: conclIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.concl-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concl-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.concl-text {
  margin: 0;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- 第 12 页：工具箱节点图（Harness / Modal / MCP） ---------- */
.tool-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tool-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(960px, 92vw);
}
.tool-node {
  flex: 0 0 auto;
  width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 20px;
  box-shadow: 0 18px 44px -30px rgba(20, 21, 26, 0.28);
  text-align: center;
}
.tool-label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tool-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tool-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-icon img { width: 100%; height: 100%; object-fit: contain; }
.tool-name {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--ink);
}
/* 节点之间的连线 + 往返光点（模拟数据交换） */
.tool-link {
  flex: 1 1 auto;
  position: relative;
  height: 2px;
  min-width: 56px;
  margin: 0 6px;
}
.tool-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  opacity: 0.45;
}
.tool-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
}
.tool-slide.is-active .tool-dot { animation: toolFlow 2.4s ease-in-out infinite alternate; }
.tool-slide.is-active .tool-dot:nth-child(3) { animation-name: toolFlowRev; animation-duration: 3.1s; animation-delay: 0.7s; }
.tool-slide.is-active .tool-dot:nth-child(4) { animation-duration: 2.0s; animation-delay: 1.4s; }
@keyframes toolFlow {
  from { left: 4%;  opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { left: 96%; opacity: 0; }
}
@keyframes toolFlowRev {
  from { left: 96%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { left: 4%;  opacity: 0; }
}
/* 第二组 / 第三组：绝对定位覆盖第一组位置，默认隐藏，点击后逐一浮现 */
.tool-row--b,
.tool-row--c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tool-row--b .tool-node,
.tool-row--b .tool-link,
.tool-row--c .tool-node,
.tool-row--c .tool-link {
  opacity: 0;
  animation: toolIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 1) * 140ms);
  animation-play-state: paused;
}
.tool-row--b.show .tool-node,
.tool-row--b.show .tool-link,
.tool-row--c.show .tool-node,
.tool-row--c.show .tool-link {
  animation-play-state: running;
  animation-delay: calc(0.75s + var(--i, 1) * 140ms);
}
@keyframes toolIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* 第一组：点击后变灰 → 消失 */
.tool-row--a.old { animation: toolAway 0.8s var(--ease) forwards; }
@keyframes toolAway {
  0%   { filter: grayscale(0); opacity: 1; }
  45%  { filter: grayscale(1); opacity: 1; }
  100% { filter: grayscale(1); opacity: 0; transform: scale(0.96); }
}
/* 第二组：再点击后同样变灰 → 消失（不能用 toolAway：其 transform 会覆盖绝对定位的 translate） */
.tool-row--b.old { animation: toolAwayFlat 0.8s var(--ease) forwards; }
@keyframes toolAwayFlat {
  0%   { filter: grayscale(0); opacity: 1; }
  45%  { filter: grayscale(1); opacity: 1; }
  100% { filter: grayscale(1); opacity: 0; }
}
/* 第三组只有 2 个节点：连线固定宽度（避免 flex 拉伸把两个容器撑得太远） */
.tool-row--c .tool-link {
  flex: 0 0 auto;
  width: 180px;
}
/* 第二组出现后：中间偏上淡入文案（与第 9 页 .chat-head 同风格，不强调） */
.tool-quote {
  position: absolute;
  top: calc(50% - 175px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.tool-quote.show { animation: quoteIn 0.9s var(--ease) both; animation-delay: 1.35s; }
@keyframes quoteIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ========== 新页：工作流定位（原型 → 设计 → 开发，设计分支 Sketch / 蓝湖） ========== */
.pipeline-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vh, 44px);
  padding: 0 var(--pad);
}
.pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(900px, 92vw);
}
/* 主流程行 */
.pl-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 26px);
}
.pl-node {
  min-width: clamp(126px, 17vw, 178px);
  padding: 26px 32px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -28px rgba(20, 21, 26, 0.3);
  text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pl-node:hover { transform: translateY(-2px); border-color: var(--accent); }
.pl-node-label {
  font-size: clamp(20px, 2.7vw, 30px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
}
/* 「设计」是分支起点：强调蓝色 */
.pl-node--origin {
  border-color: var(--accent);
  box-shadow: 0 18px 44px -22px rgba(47, 91, 255, 0.5);
}
.pl-node--origin .pl-node-label { color: var(--accent); }
/* 箭头 */
.pl-arrow {
  width: clamp(26px, 5vw, 52px);
  height: 2px;
}
.pl-arrow::after {
  width: 8px; height: 8px;
}
/* 分支：从「设计」往下派生 */
.pl-branch {
  --card-w: clamp(148px, 22vw, 192px);
  --gap: clamp(48px, 10vw, 116px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}
.pl-stem {
  width: 2px;
  height: 26px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  opacity: .6;
}
.pl-leaves {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  padding-top: 26px;
}
/* 横向连接杆：两端正好落在两个卡片中心 */
.pl-bar {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(var(--card-w) + var(--gap));
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  opacity: .6;
}
/* 两个方框之间：向右箭头，表示 设计(Sketch) → 交付(蓝湖)（位于卡片垂直中心、水平居中） */
.pl-flow-arrow {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  width: clamp(26px, 5vw, 46px);
  height: 2px;
  margin-left: calc(clamp(26px, 5vw, 46px) / -2);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  opacity: 0;
  transition: opacity .5s var(--ease);
  transition-delay: var(--d, 0s);
}
.pipeline-slide.is-active .pl-flow-arrow { opacity: .85; }
.pl-flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: .9;
}
.pl-card {
  position: relative;
  width: var(--card-w);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
/* 卡片顶部垂直连接线，连到横向 bar */
.pl-card::before {
  content: "";
  position: absolute;
  top: -26px; left: 50%;
  translate: -50% 0;
  width: 2px; height: 26px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  opacity: .6;
}
.pl-card-k {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.pl-card-v {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

/* 顺序揭示：页面进入后依次出现 */
.pipeline-slide .pl-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--d, 0s);
}
.pipeline-slide.is-active .pl-reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 第 13 页：用例 1 画板命名规范化（对话 → 两阶段报告） ---------- */
/* 步骤 0：标题 + 对话界面（absolute 铺满居中，复用 .chat-slide 自动播放动画） */
.casechat-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  transition: opacity .4s var(--ease), visibility 0s;
}
.casechat-step:not(.show) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.casechat-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.step-slide.is-active .casechat-title { opacity: 1; transform: none; }
.casechat-sub {
  margin: -6px 0 0;
  font-size: clamp(14px, 1.7vw, 18px);
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s;
}
.step-slide.is-active .casechat-sub { opacity: 1; transform: none; }
/* 步骤 1+2：报告区 + 经验卡 容器
   Step 1（默认 .show）：布局参考第 10 页 bench-slide —— Tab 在顶部
   （padding-top 避开头像/页码行）、iframe 填满剩余空间，不顶到页面边缘。
   Step 2（.moved）：切换为横向 flex，经验卡 + 报告区整体居中。 */
.casechat-pair {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12px, 2vh, 20px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease-in-out, visibility 0s;
}
.casechat-pair.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 报告区（Tab + iframe，复用 .bench-tabs/.bench-stage/.bench-frame） */
.casechat-pair .casechat-stage {
  display: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  transition: width .55s var(--ease), flex .55s var(--ease);
}
.casechat-pair .casechat-stage.show {
  display: flex;
  /* backwards 填充：动画结束后 transform 不残留，
     静态样式天然生效，不依赖 animation:none 的时序 */
  animation: caseStageIn .55s var(--ease) backwards;
}
@keyframes caseStageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 步骤 2：报告区 + 经验卡 整体居中（横向 flex，报告区收窄 + 虚线外框）。
   ⚠️ 保持与 Step 1 相同的 padding（不改成 0），虚线框的上下边缘与 Step 1 报告区一致 */
.casechat-pair.moved {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
}
.casechat-pair.moved .casechat-stage {
  flex: 0 0 auto;
  width: min(62vw, 1060px);
  height: 100%;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 3%, #fff);
}
/* 左侧经验卡（复用 .exp-panel-inner 白卡，窄版，flex 子项）。
   ⚠️ 默认必须 display:none：否则 Step 1（column 布局）时它会占据空间，
   把 iframe 底部顶上去，导致浏览器变短、底边与第 10 页不齐。
   order:-1 保证在 row 布局（Step 2）中排在 stage 左侧 */
.casechat-pair .casechat-exp {
  display: none;
  order: -1;
  width: clamp(220px, 18vw, 300px);
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease) .15s, visibility 0s;
}
.casechat-pair .casechat-exp.show {
  display: block;
  opacity: 1;
  visibility: visible;
}
.casechat-pair .casechat-exp .exp-panel-inner {
  width: 100%;
  padding: 22px 24px;
  border-radius: var(--r-md);
}
/* 第13页经验卡没有外层 .exp-panel，需在这里直接重置 .exp-panel-inner
   的翻转动效起点（rotateY/scale/opacity:0），否则卡片永远不可见 */
.casechat-pair .casechat-exp.show .exp-panel-inner {
  transform: none;
  opacity: 1;
  transition: transform .55s var(--ease) .1s, opacity .5s var(--ease) .15s;
}
.casechat-pair .casechat-exp .exp-text {
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.7;
}

/* ---------- 第 14 页：Design System 自动构建（流程 → 截图 → AI + MCP 组合框） ---------- */
.dsp-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 var(--pad);
}
/* 步骤 0：横向流程图（复用第 2 页 pl-node/pl-arrow） */
.dsp-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1180px, 95vw);
  transition: filter .35s var(--ease), opacity .55s var(--ease) .3s, transform .55s var(--ease) .3s, visibility 0s;
}
/* 点击后：整体变灰 → 淡出 */
.dsp-flow.gone {
  filter: grayscale(1);
  opacity: 0;
  transform: scale(0.97);
  visibility: hidden;
  pointer-events: none;
}
/* 节点：文字较多，紧凑化（允许两行） */
.pl-node--dsp {
  min-width: clamp(184px, 15.5vw, 224px);
  padding: 28px 24px;
}
.pl-node--dsp .pl-node-label {
  font-size: clamp(18px, 2.15vw, 23px);
  line-height: 1.35;
}
/* 箭头：不能直接复用 .reveal（pl-arrow 自带 opacity），用同节奏的过渡揭示；左右加留白不贴容器 */
.dsp-arrow {
  opacity: 0;
  width: clamp(30px, 3.6vw, 46px);
  margin: 0 clamp(8px, 1vw, 12px);
  transition: opacity .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.dsp-slide.is-active .dsp-arrow { opacity: .7; }
/* 步骤 1：浏览器 MockUp 框住截图（地址栏写 Figma MCP 帮助文档），上方 caption 文本 */
.dsp-shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 20px);
  padding: 0 var(--pad);
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s;
}
.dsp-shot.show {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
.dsp-shot .dsp-caption {
  margin: 0;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  max-width: none;      /* 不限宽，配合 nowrap 保持单行 */
  white-space: nowrap;  /* 不换行 */
}
.dsp-shot.gone {
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  visibility: hidden;
  pointer-events: none;
}
/* dsp-shot 内的浏览器 mockup：宽度固定为图片最大宽度（min(1100px,92vw)），
   图片 width:100% 填满 → 左右顶满、上下按比例贴合；
   不用 fit-content（长 URL 会撑宽地址栏 → mockup 比图宽 + 触发横向滚动条） */
.dsp-shot .browser-mock {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dsp-shot .browser-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  /* 覆盖通用 .browser-view 的 padding（clamp 26-52px 白边）、max-height(62vh)、
     overflow-y:auto 与点阵背景：第 14 页要图片直接顶满 */
  padding: 0;
  max-height: none;
  overflow: hidden;
}
.dsp-shot .browser-view img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 2 * var(--pad) - 72px);
  object-fit: contain;
}
/* dsp-shot 内的 URL 栏样式：横向铺满允许完整显示长 URL */
.dsp-shot .browser-url {
  flex: 1;
  min-width: 0;
}
.dsp-shot .browser-url input {
  text-overflow: ellipsis;
}
/* 步骤 2：AI + MCP 组合框（虚线包住 设计变量 + 组件 + 代码） */
.dsp-package {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dsp-package.show {
  opacity: 1;
  visibility: visible;
  animation: caseStageIn .55s var(--ease) both;
}
.dsp-package-box {
  position: relative;
  padding: 78px 92px 64px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 3%, #fff);
}
.dsp-package-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 11px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: var(--shadow-accent-soft);
}
.dsp-package-inner {
  display: flex;
  align-items: center;
  gap: 30px;
}
.dsp-cell {
  min-width: 188px;
  padding: 32px 40px;
  border-radius: var(--r-lg);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
}
.dsp-plus {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* ---------- 第 15 页：用例 2 设计文件审计（对话 → 报告 → iMac 截图） ---------- */
/* 步骤 0：标题 + 对话界面（复用 .casechat-title / .casechat-sub / .chat-flow，复用 chat-slide 自动播放动画） */
.caseaudit-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  transition: opacity .4s var(--ease), visibility 0s;
}
.caseaudit-step:not(.show) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 步骤 1：审计报告（浏览器 MockUp 嵌入 HTML） */
.caseaudit-report {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease-in-out, visibility 0s;
}
.caseaudit-report.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .55s var(--ease);
}
.caseaudit-report .browser-mock {
  width: 100%;
  max-width: 1180px;
  height: 100%;
  max-height: calc(100vh - 2 * var(--pad));
  display: flex;
  flex-direction: column;
}
.caseaudit-report .browser-view {
  flex: 1;
  min-height: 0;
  position: relative;
}
.caseaudit-report .bench-iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* 步骤 2：iMac MockUp 套住 Sketch 截图 */
.caseaudit-mockup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s var(--ease) .05s, visibility 0s;
}
.caseaudit-mockup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .55s var(--ease) .05s;
}
/* 第 15 页：经验卡（Sketch MCP 文档截图）加宽；MockUp 复用 .ss-view 贴住图片，整图完整展示 */
.caseaudit-insight .exp-panel-inner {
  width: min(92vw, 1240px);
  overflow-y: auto;
}
.caseaudit-insight .browser-view {
  max-height: none;
}

/* iMac 电脑线框：参考 .browser-mock 风格（白底 + 1px 细线 + 圆角 + 顶栏 macOS 三个控制点）
   线框电脑：白底 + 1px 细线 + 圆角（参考 .browser-mock），保留 屏幕/下巴/支架/底座 四个结构元素。
   图片完整填充：屏幕高度由图片撑开（不设固定比例、不用 contain/cover），无留白、不裁切 */
.imac {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(720px, 78vw, 1180px);
}
/* 屏幕主体（含图片）：白底细线框，图片决定高度 */
.imac-screen {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.imac-screen img {
  display: block;
  width: 100%;
  height: auto; /* 高度由图片自身比例撑开 → 完整填充、无留白 */
}
/* 下巴：屏幕正下方浅色小条（细线框） */
.imac-chin {
  width: 30%;
  height: 14px;
  margin-top: -1px;
  background: #f5f5f6;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
/* 支架：浅灰渐变梯形（向下收窄） */
.imac-stand {
  width: clamp(56px, 6.5vw, 88px);
  height: clamp(40px, 5.5vh, 64px);
  margin-top: -1px;
  background: linear-gradient(180deg, #ececee 0%, #d8d9dc 100%);
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
/* 底座：浅灰扁平椭圆（桌面接触） */
.imac-base {
  width: clamp(200px, 21vw, 300px);
  height: 12px;
  margin-top: -1px;
  background: linear-gradient(180deg, #e6e7e8 0%, #d0d1d4 100%);
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* ---------- 第 17 页：Vibe Design（Step 0 大字 → Step 1 左文右图） ---------- */
/* 大字标题：复用 step-big 视觉（clamp 46-124px / 700 / --ink 黑色），但显隐由
   .vibe-slide 自定义 renderStep 控制（不用 step-big 类，避开通用"最后一步才显示"逻辑） */
.vibe-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: clamp(46px, 9vw, 124px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .6s ease-in-out, transform .7s ease-in-out;
}
.vibe-title.show { opacity: 1; transform: none; }

/* Step 1：左文 + 右图（flex 居中，padding-top 避开头像/页码行） */
.vibe-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.vibe-content.show { opacity: 1; transform: none; pointer-events: auto; }

.vibe-text {
  flex: 1;
  max-width: 520px;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.7;
  color: var(--ink);
}
.vibe-shot {
  flex: 1;
  max-width: min(560px, 48vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vibe-shot img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 2 * var(--pad) - 72px);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  object-fit: contain;
  display: block;
}

/* ---------- 第 18 页：AI Agent + Taste/DESIGN.md → Sketch（变灰 → 两文本淡入） ---------- */
.agent-slide { align-items: center; justify-content: center; }
/* Step 0/1：流程图（AI Agent 框 → 箭头 → Sketch 框），step>=1 整体变灰 */
.agent-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  transition: filter .45s var(--ease);
}
.agent-flow.gray { filter: grayscale(1); }
/* AI Agent 框：虚线蓝框 + 顶部 pill 标签，包裹两个容器 */
.agent-box {
  position: relative;
  padding: 44px 52px 42px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 3%, #fff);
}
.agent-box-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.agent-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.agent-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 320px;
  padding: 20px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.agent-item-k {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-faint);
}
.agent-item-v {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}
/* 箭头：AI Agent 框 → Sketch 框（与第 2/14 页 .pl-arrow 一致：accent 蓝渐变 + 蓝箭头角） */
.agent-arrow {
  width: clamp(48px, 6vw, 76px);
  height: 2.5px;
}
.agent-arrow::after {
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
}
/* Sketch 框：icon + 名称 */
.agent-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.agent-node .tool-icon {
  width: 58px;
  height: 58px;
}
.agent-node-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
/* Step 2：中间偏上文本 */
.agent-up {
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.agent-up.show { opacity: 1; transform: none; }
/* Step 2：中间偏下两个画叉文本 */
.agent-down {
  position: absolute;
  bottom: 26%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s;
  pointer-events: none;
}
.agent-down.show { opacity: 1; transform: none; }
.agent-x {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--ink-soft);
}
.agent-x::before {
  content: "✕";
  font-size: 1.05em;
  font-weight: 700;
  color: #e5484d;
}

/* ---------- 第 19 页：AI to HTML（大字 → 四 Tab → 文本生成 App 布局） ---------- */
.htmlgen-slide { align-items: center; justify-content: center; }

/* Step 0：大字 "AI to HTML"（HTML 用 .accent 蓝，AI to 黑，step-big 视觉；显隐由自定义 renderStep 控制） */
.htmlgen-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: clamp(46px, 9vw, 124px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .6s ease-in-out, transform .7s ease-in-out;
  pointer-events: none;
}
.htmlgen-title.show { opacity: 1; transform: none; }
.htmlgen-title .accent { color: var(--accent); }

/* Step 1：四个生成方式容器（竖排大按钮，点击任一进入布局；Step 2 时 .gone 淡出） */
.htmlgen-choices {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vh, 22px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s;
  pointer-events: none;
}
.htmlgen-choices.show { opacity: 1; visibility: visible; pointer-events: auto; }
.htmlgen-choices.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s linear .45s;
}
.htmlgen-choice {
  width: min(520px, 78vw);
  padding: 22px 32px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.htmlgen-choice:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Step 2：四个生成方式 Tab（胶囊样式，参考 .bench-tab） */
.htmlgen-tabs {
  position: absolute;
  top: calc(var(--pad) + 56px);
  left: 0;
  right: 0;
  /* z-index 必须高于布局容器（.htmlgen-stage/.htmlgen-web/.htmlgen-proto 均 absolute inset:0，
     .show 后 pointer-events:auto 会盖住 Tab 区域导致点击落空/触发翻页） */
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s;
  pointer-events: none;
}
.htmlgen-tabs.show { opacity: 1; visibility: visible; pointer-events: auto; }
.htmlgen-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.htmlgen-tab.is-on,
.htmlgen-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Step 2：列表 + 编辑器 + 箭头 + 手机（flex 水平居中） */
.htmlgen-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.htmlgen-stage.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* 左：纵向 Tab 列表（收窄，文字水平居中，垂直居中排列） */
.htmlgen-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: clamp(116px, 10.5vw, 140px);
}
.htmlgen-list-item {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.htmlgen-list-item:hover { border-color: var(--accent); color: var(--accent); }
.htmlgen-list-item.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* 中：文本编辑器线框（750×1624 比例。
   高度 = 可用高 - 144px（上下各留 72px，与上方 Tab 保持间距）；
   width:auto + aspect-ratio 由高度推导宽度 → 比例严格 750/1624。
   ⚠️ 不要加 max-width：height 为显式值时 max-width 截断宽度会导致比例破坏） */
.htmlgen-editor {
  height: calc(100% - 144px);
  width: auto;
  aspect-ratio: 750 / 1624;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-editor-bar {
  height: 30px;
  flex-shrink: 0;
  background: #f5f5f6;
  border-bottom: 1px solid var(--line);
}
.htmlgen-editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}
/* 编辑器内容：等宽字体模拟代码/提示词编辑器，pre-wrap 按宽度换行可滚动；
   7 段拆分到 .editor-block，默认隐藏、.is-active 显示（点击左侧 Tab 切换） */
.htmlgen-editor-body .editor-text {
  margin: 0;
  padding: 14px 16px 28px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.htmlgen-editor-body .editor-block { display: none; }
.htmlgen-editor-body .editor-block.is-active { display: block; }

/* 箭头：编辑器 → 手机（蓝色渐变，同 .pl-arrow/.agent-arrow） */
.htmlgen-arrow {
  width: clamp(30px, 4vw, 52px);
  height: 2.5px;
}
.htmlgen-arrow::after {
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
}

/* 右：手机线框（750×1624；高度与编辑器一致、按比例得宽，边框与编辑器一致 1px --line） */
.htmlgen-phone {
  height: calc(100% - 144px);
  width: auto;
  aspect-ratio: 750 / 1624;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-phone-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;   /* iframe 固定 750×1624 并 scale 适配，body 本身不滚动（页面内滚动） */
  background: #fff;
  position: relative;
}
/* 手机内嵌 7 个 HTML 产物 iframe：
   iframe 保持 750×1624 视口渲染（与浏览器 DevTools 750×1624@100% 一致），
   由 JS 按容器宽度计算 scale 缩放（transform-origin: top left） */
.htmlgen-phone-body .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1624px;
  border: 0;
  background: #fff;
  transform-origin: top left;
  display: none;
}
.htmlgen-phone-body .phone-frame.is-active { display: block; }

/* ---------- 第 19 页（文本生成 Web）：左列表 + 浏览器 MockUp（1920×1080） ---------- */
.htmlgen-web {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.htmlgen-web.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* 左：纵向 Tab 列表（同 App 列表风格） */
.htmlgen-web-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: clamp(116px, 10.5vw, 140px);
}
.htmlgen-web-item {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.htmlgen-web-item:hover { border-color: var(--accent); color: var(--accent); }
.htmlgen-web-item.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* 右：浏览器 MockUp（1920×1080）。bar 固定高度、body 保持 16:9 aspect-ratio，
   iframe 固定 1920×1080 + scale 缩放（若后续嵌入产物）→ 不裁切不变形 */
.htmlgen-browser {
  /* 尽可能大：宽度 = min(84vw, 按可用高度反推) —— 高度 = 视口 - 上下 padding(2*pad+56)
     - 顶部/底部间距(120px) - 地址栏(44px) 后，按 16:9 反推宽度；
     保证不遮上方四个 Tab 且留出更充裕间距 */
  width: min(84vw, calc((100vh - 2 * var(--pad) - 220px) * 16 / 9));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-browser .browser-bar { flex-shrink: 0; }
.htmlgen-browser-body {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
/* 浏览器内嵌产物 iframe：固定 1920×1080 视口渲染，JS 按容器宽度 scale 缩放 */
.htmlgen-browser-body .web-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: 0;
  background: #fff;
  transform-origin: top left;
  display: none;
}
.htmlgen-browser-body .web-frame.is-active { display: block; }

/* ---------- 第 19 页（原型图生成 App）：左列表 + 中图片（按宽度填充可滚动）+ 箭头 + 手机 ---------- */
.htmlgen-proto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.htmlgen-proto.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* 左：纵向 Tab 列表 */
.htmlgen-proto-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: clamp(116px, 10.5vw, 140px);
}
.htmlgen-proto-item {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.htmlgen-proto-item:hover { border-color: var(--accent); color: var(--accent); }
.htmlgen-proto-item.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* 中：按宽度填充的图片（750×1624 比例容器，图片很长时上下滚动） */
.htmlgen-proto-shot {
  /* 与"文本生成 App"编辑器同款：高度驱动（calc(100% - 144px) + aspect-ratio 反推宽度），保证二者等高 */
  height: calc(100% - 144px);
  width: auto;
  aspect-ratio: 750 / 1624;
  flex-shrink: 0;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-proto-shot .proto-image {
  display: none;
  width: 100%;
  height: auto;
}
.htmlgen-proto-shot .proto-image.is-active { display: block; }

/* 右：手机线框（750×1624，与 App 手机同风格，产物后续填） */
.htmlgen-proto-phone {
  /* 与"文本生成 App"手机同款：高度驱动，与中间图片等高 */
  height: calc(100% - 144px);
  width: auto;
  aspect-ratio: 750 / 1624;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-proto-phone-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
}
/* proto 手机内嵌产物 iframe：固定 750×1624 视口渲染 + JS scale 缩放 */
.htmlgen-proto-phone-body .proto-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1624px;
  border: 0;
  background: #fff;
  transform-origin: top left;
  display: none;
}
.htmlgen-proto-phone-body .proto-frame.is-active { display: block; }

/* ---------- 第 19 页（原型图生成 Web）：左 Tab（ERP 原型 / 生成界面）+ 右浏览器（图片或 HTML） ---------- */
.htmlgen-proto-web {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
  z-index: 1;
}
.htmlgen-proto-web.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* 左：2 个 Tab（同 web-list 风格） */
.htmlgen-proto-web-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: clamp(116px, 10.5vw, 140px);
}
.htmlgen-proto-web-item {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.htmlgen-proto-web-item:hover { border-color: var(--accent); color: var(--accent); }
.htmlgen-proto-web-item.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* 右：浏览器 MockUp（与 Web 浏览器同结构，body 内嵌图或 iframe） */
.htmlgen-proto-browser {
  width: min(84vw, calc((100vh - 2 * var(--pad) - 220px) * 16 / 9));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.htmlgen-proto-browser .browser-bar { flex-shrink: 0; }
.htmlgen-proto-browser-body {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
/* ERP 原型图：按宽度填充、上下滚动 */
.htmlgen-proto-browser-body .proto-web-image {
  display: none;
  width: 100%;
  height: auto;
}
.htmlgen-proto-browser-body .proto-web-image.is-active { display: block; }
/* 生成界面 HTML：固定 1920×1080 视口 + scale */
.htmlgen-proto-browser-body .proto-web-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: 0;
  background: #fff;
  transform-origin: top left;
  display: none;
}
.htmlgen-proto-browser-body .proto-web-frame.is-active { display: block; }

/* ---------- 第 20 页：一键生成 UI（两行 → 知识库 → 规则 → 驱动对） ---------- */
.dsg-slide { align-items: center; justify-content: center; }
.dsg-hero, .dsg-kb, .dsg-rules, .dsg-drive {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.dsg-hero.show, .dsg-kb.show, .dsg-rules.show, .dsg-drive.show {
  opacity: 1;
  visibility: visible;
}
.dsg-hero.gone, .dsg-kb.gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
}
/* Step 3：出现"设计即代码"时，规则内容淡出（不再变灰保留） */
.dsg-rules.gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
}

/* Step 0：外框 + 两行 + 一键生成 UI pill 标注 */
.dsg-frame {
  position: relative;
  padding: 80px 96px 66px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 3%, #fff);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.dsg-frame-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 36px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: var(--shadow-accent-soft);
}
.dsg-row {
  min-width: 520px;
  padding: 34px 48px;
  border-radius: var(--r-lg);
  font-size: clamp(23px, 2.8vw, 31px);
  font-weight: 600;
}

/* Step 1：知识库（顶部 pill）→ 延伸出 4 个子容器 */
.dsg-kb { flex-direction: column; gap: 40px; }
.dsg-kb-root {
  padding: 28px 72px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: var(--shadow-accent-soft);
}
.dsg-kb-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.dsg-kb-item {
  min-width: 190px;
  padding: 22px 40px;
  border-radius: var(--r-md);
  font-size: 22px;
  font-weight: 600;
}

/* Step 2：规则文本 + 6 个容器 */
.dsg-rules { flex-direction: column; gap: 40px; }
.dsg-rules-text {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.dsg-rules-items {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.dsg-rule {
  padding: 26px 40px;
  border-radius: var(--r-md);
  font-size: 22px;
  font-weight: 600;
}

/* Step 3：画布驱动 → 规格驱动 + 上方标蓝"设计即代码" */
.dsg-drive { flex-direction: column; gap: 36px; }
.dsg-drive-title {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.dsg-drive-pair {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
.dsg-drive-node {
  padding: 34px 56px;
  border-radius: var(--r-lg);
  font-size: clamp(24px, 2.9vw, 32px);
  font-weight: 700;
}
.dsg-drive-arrow {
  width: clamp(40px, 5vw, 64px);
  height: 2.5px;
}
.dsg-drive-arrow::after {
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
}

/* ---------- 第 21 页：结构化劳动 + 创意设计 ---------- */
.blend-slide { align-items: center; justify-content: center; }
.blend-combine {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3vw, 44px);
}
.blend-cell {
  min-width: clamp(200px, 24vw, 300px);
  padding: clamp(26px, 3.4vh, 40px) clamp(30px, 3vw, 44px);
  border-radius: var(--r-lg);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
}
.blend-plus {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* ---------- 第 22 页：Vibe Design 更适合 / 环状闭环流程 / 质量结论 ---------- */
.vd22-slide { align-items: center; justify-content: center; }

/* Step 0：文本 + 三容器（居中，偏上） */
.vd22-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.vd22-hero.show { opacity: 1; visibility: visible; }
.vd22-hero.gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
}
.vd22-hero-text {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.vd22-hero-items {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}
.vd22-hero-item {
  min-width: clamp(176px, 18vw, 244px);
  padding: clamp(24px, 3vh, 32px) clamp(28px, 2.4vw, 36px);
  border-radius: var(--r-md);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
}

/* Step 1+：环状闭环流程图（680×680，svg 连线 + 8 节点由 JS 定位） */
.vd22-cycle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.vd22-cycle.show { opacity: 1; visibility: visible; }
.vd22-cycle .vd22-svg {
  position: absolute;
  width: clamp(520px, 60vw, 680px);
  height: clamp(520px, 60vw, 680px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .45s var(--ease);
}
/* 变灰时线条整体淡出（节点仍单独变灰保留） */
.vd22-cycle .vd22-svg.dim { opacity: 0; }
.vd22-node {
  /* 以视口中心（cycle flex 居中）为圆心环形定位：
     left/top 50% + rotate(--a) translateY(-R) rotate(-a)，与居中的 svg 圆环坐标系一致 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-1 * var(--R, 240px))) rotate(calc(-1 * var(--a, 0deg)));
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: filter .45s var(--ease), opacity .45s var(--ease);
}
.vd22-node.dim { filter: grayscale(1); opacity: .55; }
/* Step 4：前三节点亮起时标蓝（取消置灰 + 蓝边框/蓝字/浅蓝底） */
.vd22-node.lit {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Step 2+：两行结论文本（页面中间偏下，竖排） */
.vd22-t1, .vd22-t2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.vd22-t1 { bottom: 16%; }
.vd22-t2 { bottom: 11%; }
.vd22-t1.show, .vd22-t2.show { opacity: 1; transform: none; }

/* ---------- 第 23 页：能力边界 → Design Co-Pilot → 两条规则 + 浏览器截图 ---------- */
.cap-slide { align-items: center; justify-content: center; }

/* Step 0：能力边界文本 + 5 容器 */
.cap-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.cap-hero.show { opacity: 1; visibility: visible; }
.cap-hero.gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
}
.cap-hero-text {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.cap-hero-items {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  flex-wrap: wrap;
  justify-content: center;
}
.cap-hero-item {
  min-width: clamp(130px, 14vw, 180px);
  padding: clamp(14px, 2vh, 20px) clamp(20px, 2vw, 28px);
  border-radius: var(--r-sm);
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 600;
}

/* Step 1：大字 "Design Co-Pilot"（复用 step-big 视觉，HTML 蓝色 span） */
.cap-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: clamp(46px, 9vw, 124px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .6s ease-in-out, transform .7s ease-in-out;
  pointer-events: none;
}
.cap-title.show { opacity: 1; transform: none; }
.cap-title.gone {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cap-title .accent { color: var(--accent); }

/* Step 2：两条规则 + 浏览器 MockUp 套截图 */
.cap-rules {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vh, 18px);
  padding: calc(var(--pad) + 56px) var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.cap-rules.show { opacity: 1; visibility: visible; pointer-events: auto; }
.cap-rule {
  margin: 0;
  max-width: 34em;
  position: relative;
  z-index: 2; /* 高于 .cap-browser 的 z-index:1，保证 ann 标注不被 MockUp 遮住 */
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
/* 浏览器 MockUp 在 cap-rules 内，复用通用 .browser-mock；
   内部 padding/margin 重置 + body fit-contain，让截图贴满 */
.cap-browser { width: min(1080px, 78vw); max-height: none; }
.cap-browser .browser-view {
  flex: 1;
  min-height: 0;
  background: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-browser-body { padding: 0; }
.cap-browser-body img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--pad) - 180px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- 第 24 页：Design Co-Pilot 三模式（Read / Propose / Execute） ---------- */
.mode-slide { align-items: center; justify-content: center; gap: clamp(26px, 4vh, 44px); }
.mode-title {
  margin: 0;
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.mode-title .accent { color: var(--accent); }
.mode-cards {
  display: flex;
  gap: clamp(18px, 2.2vw, 30px);
  flex-wrap: wrap;
  justify-content: center;
}
.mode-card {
  position: relative;
  z-index: 1;
  width: clamp(240px, 24vw, 320px);
  padding: clamp(22px, 2.6vh, 30px) clamp(24px, 2vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
/* 带 neat 标注的卡片置顶，避免 ann-w 溢出标注被相邻卡遮挡 */
.mode-card:has(.ann) { z-index: 5; }
.mode-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700;
  color: var(--ink);
}
.mode-emoji { font-size: 1.15em; line-height: 1; }
.mode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}
/* 条目项目符号：沿用 wb-point 的 accent 圆点语言 */
.mode-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 第 25 页：想法→决策→创造 → Taste → 三词 → 撒花 Thanks ---------- */
.taste-slide { align-items: center; justify-content: center; }
.taste-flow, .taste-big, .taste-words, .taste-thanks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.taste-flow.show, .taste-big.show, .taste-words.show, .taste-thanks.show { opacity: 1; visibility: visible; }
.taste-flow.gone, .taste-big.gone, .taste-words.gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
}

/* Step 0：想法 → 决策 → 创造（column：主流程在上，决策展开框在下） */
.taste-flow { flex-direction: column; gap: clamp(26px, 4vh, 44px); }
.tf-nodes {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}
.tf-node {
  min-width: clamp(130px, 14vw, 180px);
  padding: clamp(20px, 2.6vh, 30px) clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-md);
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 700;
}
.tf-node--decision { border-color: var(--accent); color: var(--accent); }
.tf-arrow {
  width: clamp(32px, 4vw, 52px);
  height: 2.5px;
}
.tf-arrow::after {
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
}
/* 决策下方展开的框：虚线蓝框包裹 观察→分析→比较→解释→质疑 */
.tf-decision {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s;
}
.tf-decision.show { opacity: 1; visibility: visible; }
.tf-decision-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(20px, 2.6vh, 28px) clamp(26px, 2.6vw, 36px);
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 3%, #fff);
}
.tf-sub {
  min-width: clamp(86px, 9vw, 120px);
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.4vw, 20px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.tf-sub-arrow {
  width: clamp(14px, 1.6vw, 22px);
  height: 2px;
}
.tf-sub-arrow::after {
  width: 6px;
  height: 6px;
}

/* Step 2：大字 Taste（step-big 视觉） */
.taste-big {
  margin: 0;
  font-size: clamp(56px, 11vw, 148px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  transform: scale(0.94);
  transition: opacity .6s ease-in-out, transform .7s ease-in-out;
}
.taste-big.show { transform: none; }

/* Step 3：三词 + 号连接 */
.taste-words {
  flex-wrap: wrap;
  gap: clamp(18px, 2.2vw, 32px);
}
.taste-word {
  min-width: clamp(190px, 20vw, 260px);
  padding: clamp(26px, 3.4vh, 40px) clamp(28px, 3vw, 40px);
  border-radius: var(--r-lg);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
}
.taste-plus {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* Step 4：撒花 + 大字 Thanks. */
.taste-thanks { flex-direction: column; gap: 0; }
.thanks-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.confetti {
  position: absolute;
  left: 50%;
  top: 46%;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFly 2.6s var(--ease) forwards;
}
@keyframes confettiFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 0deg)) scale(.4); }
}
.thanks-title {
  position: relative;
  margin: 0;
  font-size: clamp(56px, 11vw, 148px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}

/* ---------- 第 16 页：Token 如水一般流走 → 设计工程逆向 ---------- */
.token-slide { align-items: center; justify-content: center; }

/* Step 1：Token 流水动画（JS 生成 .token-drop，从上往下流走循环） */
.token-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s;
  pointer-events: none;
}
.token-stage.show { opacity: 1; visibility: visible; }
/* Step 1 居中文本：Token 如水一般流走 */
.token-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--ink);
  z-index: 2;
  pointer-events: none;
}
.token-flow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.token-drop {
  position: absolute;
  top: -24px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  animation: tokenFall var(--dur, 3s) var(--ease) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes tokenFall {
  0%   { opacity: 0; transform: translateY(0) scale(.7); }
  10%  { opacity: .9; }
  55%  { opacity: .65; }
  100% { opacity: 0; transform: translateY(calc(100vh + 40px)) scale(1.05); }
}

/* Step 2：设计工程逆向 + 分析 + 审计 */
.reverse-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.4vh, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s;
  pointer-events: none;
}
.reverse-stage.show { opacity: 1; visibility: visible; }
.reverse-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.reverse-combine {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3vw, 44px);
}
.reverse-cell {
  min-width: clamp(190px, 21vw, 260px);
  padding: clamp(24px, 3vh, 36px) clamp(30px, 3vw, 42px);
  border-radius: var(--r-lg);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
}
.reverse-plus {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* ---------- 白底卡片公共类（P1-4） ---------- */
/* 11 个中性白卡共用：背景/描边/投影/字色/居中；改卡片风格只改此处 */
.dsg-row, .dsg-kb-item, .dsg-rule, .vd22-hero-item, .cap-hero-item,
.taste-word, .reverse-cell, .blend-cell, .dsp-cell, .tf-node, .dsg-drive-node {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: center;
}

/* ---------- 箭头公共类（P1-5） ---------- */
/* 7 处流程箭头共用：渐变线 + 三角角；尺寸差异由各元素保留 */
.pl-arrow, .mcp-flow-arrow, .agent-arrow, .htmlgen-arrow,
.dsg-drive-arrow, .tf-arrow, .tf-sub-arrow {
  position: relative;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  flex: 0 0 auto;
  opacity: .75;
}
.pl-arrow::after, .mcp-flow-arrow::after, .agent-arrow::after,
.htmlgen-arrow::after, .dsg-drive-arrow::after, .tf-arrow::after, .tf-sub-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: .85;
}

/* ---------- 全局：元素出现时的淡入上浮动画（消除闪现） ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 第 20 页：各状态容器 .show 时子元素上浮入场 */
.dsg-hero.show .dsg-frame { animation: fadeUp .6s ease-in-out both; }
.dsg-kb.show .dsg-kb-root,
.dsg-kb.show .dsg-kb-item { animation: fadeUp .55s ease-in-out both; }
.dsg-rules.show .dsg-rules-text,
.dsg-rules.show .dsg-rule { animation: fadeUp .55s ease-in-out both; }
.dsg-drive.show .dsg-drive-title,
.dsg-drive.show .dsg-drive-node { animation: fadeUp .55s ease-in-out both; }
/* 第 24 页：三张模式卡进入时依次上浮 */
.mode-slide.is-active .mode-card { animation: fadeUp .6s ease-in-out both; }
/* 第 7 页：VS 双卡上浮 */
.vs-step.show .vs-card { animation: fadeUp .55s ease-in-out both; }
/* 第 22 页：hero 文本与容器上浮 */
.vd22-hero.show .vd22-hero-text,
.vd22-hero.show .vd22-hero-item { animation: fadeUp .55s ease-in-out both; }
/* 第 25 页：三词与 Thanks 上浮 */
.taste-words.show .taste-word,
.taste-words.show .taste-plus { animation: fadeUp .5s ease-in-out both; }
.taste-thanks.show .thanks-title { animation: fadeUp .6s ease-in-out both; }
/* 第 5 页：MCP 流程图节点上浮 */
.mcp-slide .flow-step.show .mcp-flow-node { animation: fadeUp .5s ease-in-out both; }
/* 第 25 页：主流程节点与展开框上浮 */
.taste-flow.show .tf-node,
.taste-flow.show .tf-arrow,
.taste-flow.show .tf-decision { animation: fadeUp .5s ease-in-out both; }

/* ---------- 补充：第 16 页 + 第 19 页及之后 状态容器内部元素淡入 ---------- */
/* 第 16 页：流水标题与"设计工程逆向"各元素上浮入场 */
.token-stage.show .token-caption { animation: fadeUp .6s ease-in-out both; }
.reverse-stage.show .reverse-title,
.reverse-stage.show .reverse-cell,
.reverse-stage.show .reverse-plus { animation: fadeUp .55s ease-in-out both; }
/* 第 19 页：四容器选择器依次上浮；Tab、列表、MockUp 淡入 */
.htmlgen-choices.show .htmlgen-choice { animation: fadeUp .5s ease-in-out both; }
.htmlgen-tabs.show .htmlgen-tab { animation: fadeUp .45s ease-in-out both; }
.htmlgen-stage.show .htmlgen-list-item { animation: fadeUp .4s ease-in-out both; }
.htmlgen-stage.show .htmlgen-editor { animation: fadeUp .5s ease-in-out both; }
.htmlgen-stage.show .htmlgen-arrow { animation: fadeUp .5s ease-in-out both; }
.htmlgen-stage.show .htmlgen-phone { animation: fadeUp .5s ease-in-out both; }
.htmlgen-web.show .htmlgen-web-item { animation: fadeUp .4s ease-in-out both; }
.htmlgen-web.show .htmlgen-browser { animation: fadeUp .5s ease-in-out both; }
.htmlgen-proto.show .htmlgen-proto-item { animation: fadeUp .4s ease-in-out both; }
.htmlgen-proto.show .htmlgen-proto-shot { animation: fadeUp .5s ease-in-out both; }
.htmlgen-proto.show .htmlgen-proto-phone { animation: fadeUp .5s ease-in-out both; }
.htmlgen-proto-web.show .htmlgen-proto-web-item { animation: fadeUp .4s ease-in-out both; }
.htmlgen-proto-web.show .htmlgen-proto-browser { animation: fadeUp .5s ease-in-out both; }
/* 编辑器内容块切换时淡入 */
.htmlgen-editor-body .editor-block.is-active { animation: fadeUp .3s ease-in-out both; }
/* 第 23 页：能力边界/规则 + 浏览器上浮 */
.cap-hero.show .cap-hero-text,
.cap-hero.show .cap-hero-item { animation: fadeUp .55s ease-in-out both; }
.cap-rules.show .cap-rule,
.cap-rules.show .cap-browser { animation: fadeUp .55s ease-in-out both; }

/* ---------- 窄屏提示层：窗口过窄（<720px）时提示横屏/拉宽，不展示具体内容 ---------- */
.narrow-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(20, 21, 26, 0.05) 1px, transparent 1.4px);
  background-size: 16px 16px;
}
@media (max-width: 720px) {
  .narrow-screen { display: flex; }
}
.narrow-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 340px;
  text-align: center;
}
.narrow-icon {
  width: 76px;
  height: 76px;
  color: var(--accent);
  opacity: .9;
}
.narrow-text {
  margin: 0;
  font-size: clamp(15px, 4.5vw, 18px);
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink-soft);
}