/* ============================================================
   acts.css — per-screen layout & animation
   ============================================================ */

/* shared screen scaffold */
.intro, .act1, .engine, .roles, .whyus, .paradigm, .whynow, .market,
.rvm, .flywheel, .runner, .nosession, .valuation, .whyworth, .ask {
  height: 100%; display: flex; flex-direction: column; min-height: 0;
}
.act1-head, .engine-head, .roles-head, .wu-head, .pd-head, .wn-head, .mk-head,
.rvm-head, .fw-head, .rn-head, .ns-head, .vl-head, .ww-head, .ask-head { flex: none; }

/* ============================================================
   Intro
   ============================================================ */
.intro {
  align-items: center; justify-content: center; text-align: center;
  gap: 6px;
}
.intro-mark { position: relative; width: 84px; height: 84px; margin-bottom: 18px; }
.im-core {
  position: absolute; inset: 50%; width: 30px; height: 30px; margin: -15px;
  border-radius: var(--r-chip); background: var(--accent);
  box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
  animation: hubSpin 6s linear infinite;
}
.im-orbit, .im-orbit.o2 {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--line-2);
}
.im-orbit { animation: spinPulse 4s var(--ease) infinite; }
.im-orbit.o2 { inset: 14px; border-color: var(--accent-050); animation-delay: .5s; }
@keyframes spinPulse { 0%,100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
.intro-kicker { font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; color: var(--accent); }
.intro-title { font-size: var(--t-display); font-weight: 600; letter-spacing: var(--tr-display); line-height: var(--lh-display); margin: 14px 0 10px; }
.intro-sub { font-size: var(--t-lead); color: var(--ink-3); line-height: var(--lh-lead); max-width: 760px; }
.intro-hint { margin-top: 26px; font-size: var(--t-small); color: var(--ink-4); }

/* ============================================================
   Act 1 — experience
   ============================================================ */
.act1-head { margin-bottom: 18px; }
.act1-head .h-title { margin-top: 8px; }
.act1-main {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 340px 1fr; gap: 44px; align-items: stretch;
}
.a1-left { display: flex; align-items: center; justify-content: center; min-height: 0; }
.a1-left .phone { height: 100%; max-height: 620px; width: auto; }
.a1-right { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.scenario-cap {
  flex: none; height: 34px; display: flex; align-items: center; gap: 10px;
  font-size: var(--t-small); color: var(--ink-3); opacity: .85; transition: opacity var(--dur-ui) var(--ease-ui);
}
.cap-idle { color: var(--ink-4); }
.cap-mode { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.cap-mode.m-fanout { background: var(--accent); }
.cap-mode.m-serial { background: var(--pos); }
.cap-mode.m-converge { background: var(--warn); }
.a1-stagewrap { flex: 1; min-height: 0; }

.route-idle {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--ink-4);
  font-size: var(--t-small);
}
.ri-pulse {
  width: 54px; height: 54px; border-radius: var(--r-card);
  background: var(--surface); border: 1px dashed var(--line-2);
  animation: idlePulse 2.2s var(--ease) infinite;
}
@keyframes idlePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(18,20,28,.04); opacity: .7; } 50% { box-shadow: 0 0 0 10px rgba(18,20,28,0); opacity: 1; } }

.chip-row {
  flex: none; display: flex; gap: 14px; align-items: center;
  padding: 22px 0 6px; flex-wrap: wrap;
}
.chip-prompt { font-size: var(--t-small); color: var(--ink-4); margin-left: 4px; }

/* ============================================================
   Act 1 — cinematic narrative
   ============================================================ */
.nar { height: 100%; display: flex; flex-direction: column; }
.nar-head { flex: none; margin-bottom: 16px; }
.nar-head .h-title { margin-top: 8px; }

/* 切任务时顶部文案的柔和「替换」：淡出旧、淡入新（与 wnMorphIn 同款语言），
   标题 → 解法副文 轻微错峰级联，手机与对话保持不动。 */
.nar-swap { animation: narSwap .46s var(--ease-reveal) both; }
.nar-head .kicker.nar-swap  { animation-delay: 0s; }
.nar-head .h-title.nar-swap { animation-delay: .06s; }
.nar-head .nar-sub.nar-swap { animation-delay: .12s; }
@keyframes narSwap {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* 痛点已写进标题；解法降为一行弱化副文，靠左一条细发丝引出，克制不抢戏。 */
.nar-sub {
  position: relative; margin: 12px 0 0; padding-left: 15px; max-width: 720px;
  font-size: var(--t-small); line-height: 1.55; color: var(--ink-3);
  font-weight: 400; text-wrap: pretty;
}
.nar-sub::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px;
  border-radius: 2px; background: var(--accent); opacity: .55;
}

.nar-stage { position: relative; flex: 1; min-height: 0; overflow: visible; }

/* ---- phone layer (compose + return) ---- */
.phone-layer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px 0 42px;
  transition: opacity var(--dur-scene) var(--ease), transform var(--dur-scene) var(--ease), filter var(--dur-scene) var(--ease);
}
.phone-layer.receded { opacity: 0; transform: scale(.9) translateY(-18px); filter: blur(5px); pointer-events: none; }

/* realistic iPhone */
.iphone {
  position: relative; height: min(100%, 624px); aspect-ratio: 312 / 648;
  background: #0a0a0c; border-radius: 48px; padding: 5px; z-index: 2;
  /* Apple 式接触阴影：模糊远大于偏移、负扩散，叠在物理深色边框之上 */
  box-shadow: 0 10px 38px rgba(18,20,28,.13), 0 40px 80px -24px rgba(18,20,28,.22), 0 0 0 2px #2a2a2e;
}
.ip-island {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 25px; background: #0a0a0c; border-radius: 14px; z-index: 6;
}
.ip-screen {
  width: 100%; height: 100%; min-width: 0; background: #ededed; border-radius: 43px; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
}
/* 屏幕镜面高光：135° 极淡线性高光，浮在内容之上、同心圆角、不挡点击 */
.ip-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 42%);
}
.ip-status {
  flex: none; height: 46px; padding: 15px 28px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  font-size: var(--t-small); font-weight: 600; color: #0a0a0c;
}
.ips-right { display: flex; align-items: center; gap: 6px; }
.ips-sig { width: 17px; height: 11px; display: inline-block;
  background: repeating-linear-gradient(90deg, #0a0a0c 0 3px, transparent 3px 5px); }
.ips-bat { width: 24px; height: 12px; border: 1.5px solid #0a0a0c; border-radius: 3px; position: relative; display: inline-block; }
.ips-bat::after { content: ""; position: absolute; inset: 2px; width: 15px; background: #0a0a0c; border-radius: 1px; }
.ips-bat::before { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; background: #0a0a0c; border-radius: 0 1px 1px 0; }

/* header: no chrome, just the current entry's logo + name (cleared below the island) */
.wx-head {
  flex: none; min-height: 84px; padding-top: 34px; gap: 9px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.wx-head .btile { box-shadow: var(--sh-1); }
.wx-app { font-size: var(--t-body); font-weight: 600; color: #181818; letter-spacing: -.01em; }
.wx-body {
  flex: 1; min-width: 0; overflow-y: auto; padding: 12px 13px 78px;
  display: flex; flex-direction: column; gap: 13px; background: #ededed;
}
.wx-body::-webkit-scrollbar { width: 0; }
/* Phone-sized chat bubbles: scaled down from page body so the simulator reads like a real messaging app. */
.wx-body .bubble {
  max-width: 78%;
  padding: 8px 12px;
  font-size: var(--t-chat);
  line-height: var(--lh-chat);
  letter-spacing: var(--tr-chat);
}
.wx-body .deliver-card { max-width: 86%; }

/* floating liquid-glass composer */
.wx-input {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0 12px 14px; background: transparent;
}
.wx-inbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 15px; border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-sh);
}
.wx-in-field {
  flex: 1 1 0; width: 0; min-width: 0; font-size: var(--t-caption); font-weight: 500; color: var(--ink);
  letter-spacing: 0; line-height: 1.38; -webkit-font-smoothing: antialiased;
  /* composer grows like the real iMessage input so投资人 sees the whole prompt (up to 2 lines) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; word-break: break-word;
}
/* 整段对话结束后，输入框清空为占位（不再显示已发出的任务文案） */
.wx-in-ph { color: var(--ink-4); font-weight: 400; }
/* send cue — a quiet hand-drawn arrow toward the send button. First-time viewers
   don't realise the pre-filled prompt is theirs to send. Ink-toned, no emoji, no chrome. */
.send-guide {
  position: absolute; right: 22px; bottom: 62px; z-index: 6; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  animation: sgFloat 2.6s var(--ease) infinite;
}
.sg-label {
  font-size: var(--t-caption); font-weight: 450; letter-spacing: .03em; white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 60%, transparent); padding-right: 2px;
}
.sg-arrow { width: 50px; height: 38px; margin-right: 4px; overflow: visible; }
.sg-line, .sg-tip {
  fill: none; stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.sg-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sgDraw 1.1s var(--ease-draw) .15s forwards; }
.sg-tip  { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sgDraw .5s var(--ease-draw) 1s forwards; }
@keyframes sgDraw  { to { stroke-dashoffset: 0; } }
@keyframes sgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.wx-send {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
  box-shadow: 0 3px 10px rgba(18,20,28,.2);
}
.wx-send svg { display: block; }
.wx-send:active:not(:disabled) { transform: scale(.88); }
/* quiet neutral halo — draws the eye without shouting */
.wx-send.cue { animation: wxSendCue 2.1s var(--ease) infinite; }
@keyframes wxSendCue {
  0%,100% { box-shadow: 0 3px 10px rgba(18,20,28,.2), 0 0 0 0 rgba(28,28,30,.14); }
  50%     { box-shadow: 0 3px 10px rgba(18,20,28,.2), 0 0 0 8px rgba(28,28,30,0); }
}
.wx-send:disabled { opacity: .45; cursor: default; }

/* entry halo — multiple entrances around the phone */
.entry-halo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.halo-icon {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: haloFloat 5s var(--ease) infinite;
}
.halo-icon:nth-child(2) { animation-delay: .6s; }
.halo-icon:nth-child(3) { animation-delay: 1.2s; }
.halo-icon:nth-child(4) { animation-delay: .3s; }
.halo-icon:nth-child(5) { animation-delay: .9s; }
.halo-icon:nth-child(6) { animation-delay: 1.5s; }
@keyframes haloFloat { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 7px)); } }
.halo-icon .btile { box-shadow: var(--sh-2); }
.halo-label { font-size: var(--t-caption); color: var(--ink-3); font-weight: 500; }
.halo-caption {
  position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%);
  font-size: var(--t-small); color: var(--ink-4); white-space: nowrap;
}

/* entry hint strip under the phone */
.entry-strip {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 3;
  font-size: var(--t-small); color: var(--ink-4); white-space: nowrap;
}
.entry-strip .es-dots { display: flex; gap: 6px; }
.entry-strip .es-dot {
  width: 18px; height: 18px; border-radius: var(--r-chip); opacity: .35;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); filter: grayscale(.3);
}
.entry-strip .es-dot.on { opacity: 1; transform: scale(1.18); filter: none; }

/* ---- chat rows: clean message alignment without side avatars ---- */
.wx-row { display: flex; align-items: flex-start; animation: bubbleIn .5s var(--ease) both; }
.wx-row.out { justify-content: flex-end; }
.wx-row.in { justify-content: flex-start; }
.wx-av { width: 32px; height: 32px; flex: none; border-radius: var(--r-chip); overflow: hidden; }
.wx-av.bot { background: #1d1d1f; position: relative; box-shadow: var(--sh-1); }
.wx-av.bot::after {
  content: ""; position: absolute; inset: 9px; border-radius: 4px;
  border: 2px solid rgba(255,255,255,.92);
}
.wx-row .bubble { box-shadow: var(--sh-1); }
.wx-row.out .bubble { border-bottom-right-radius: 5px; border-bottom-left-radius: 17px; }
.wx-row.in .bubble { border-bottom-left-radius: 5px; }

/* ---- flying bubble (FLIP shared element across the transition) ---- */
.fly-bubble {
  position: absolute; left: 50%; top: 50%; z-index: 30;
  transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none;
}
.fly-bubble .fb-inner { will-change: transform; }
.fly-bubble.flying .fb-inner { animation: flyHop .92s var(--ease); }
@keyframes flyHop { 0% { transform: translateY(0); } 46% { transform: translateY(-54px); } 100% { transform: translateY(0); } }
.fly-bubble .fb-pill {
  display: inline-block; max-width: 360px; padding: 9px 14px; border-radius: var(--r-lg);
  font-size: var(--t-chat); font-weight: 500; line-height: var(--lh-chat); box-shadow: var(--sh-3);
  border-bottom-right-radius: 6px;
}

/* routing nodes appear AFTER the hub finishes parsing */
.route-node { animation: nodeIn .5s var(--ease); }
@keyframes nodeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* hub "parsing" shimmer before nodes show */
.route-hub.working .hub-core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, var(--accent-glow) 50%, transparent 70%);
  background-size: 220% 100%; animation: hubScan 1.3s var(--ease) infinite;
}
@keyframes hubScan { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* ---- conveyor dispatch (active node stays centered, finished nodes slide left out of frame) ---- */
.dispatch { position: absolute; inset: 0; overflow: hidden; }
.dp-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform calc(1.25s * var(--spd, 1)) var(--ease); }
.agent-stage { height: 100%; }
.dp-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* ① 常驻底线：发丝级低对比，始终在位（双层流光底层，1px） */
.dp-wires .wire-base { fill: none; stroke: var(--line-2); stroke-width: 1; opacity: .6; }
/* ② 顶层点亮线：描边生长 */
.dp-wires .wire-line { fill: none; stroke-width: 1.5; opacity: .5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: dpDraw .6s var(--ease-draw) forwards; }
@keyframes dpDraw { to { stroke-dashoffset: 0; } }
/* 权衡线：三条连线始终都在。.pulse（拍板前）脉冲表示「还在掂量」；拍板后未选中的退成静态 faint 留底（连线不消失）。 */
.dp-wires .wire-weigh {
  fill: none; stroke-width: 1.3; opacity: .2; stroke-linecap: round;
  stroke-dasharray: 4 5; transition: opacity .5s var(--ease);
}
.dp-wires .wire-weigh.pulse { animation: weighPulse 1.5s var(--ease) infinite; }
@keyframes weighPulse { 0%,100% { opacity: .22; } 50% { opacity: .44; } }
/* ③ 流光统一为小光点，沿线移动，不再用短线段扫动。 */
.dp-wires .wire-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor);
  opacity: .96;
}
/* columns: positioned at colX, full height; flexbox distributes nodes vertically */
.dp-col {
  position: absolute; top: 0; bottom: 0; width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
}
.dp-col.center { justify-content: center; }
.dp-tgroup { display: flex; flex-direction: column; align-items: center; gap: 18px; }
@keyframes nodeRise {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}
.dp-agent.in, .dp-tool.in { animation: nodeRise .6s var(--ease) both; }

/* a calm colored light sweeps across the active white card (identity = sweep color, low-sat) */
.dp-sweep::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, var(--sweep, rgba(18,20,28,.05)) 50%, transparent 62%);
  background-size: 230% 100%; animation: dpSweep calc(2.6s * var(--spd, 1)) ease-in-out infinite;
}
@keyframes dpSweep { 0% { background-position: 138% 0; } 100% { background-position: -38% 0; } }

/* AgentPilot hub — white card, kept neutral */
.dp-hub {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--sh-2);
  text-align: center; width: 210px; z-index: 6;
}
.dp-hub.run { border-color: var(--line-2); }
.dp-anchor { position: absolute; inset: 0; pointer-events: none; }
.dph-title { font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; }
.dph-sub { font-size: var(--t-caption); color: var(--ink-3); margin-top: 4px; min-height: 16px; }

/* the SAME card morphs: collapsed AgentPilot node <-> expanded analysis panel */
.dp-azcard { text-align: left; width: 230px; transition: width .5s var(--ease), box-shadow .4s var(--ease); }
.dp-azcard.expanded { width: clamp(300px, 34vw, 340px); box-shadow: var(--sh-3); }
.dp-az-head { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.dp-az-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ch); flex: none; animation: hintPulse 1.6s var(--ease) infinite; }
.dp-az-collapse { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease); }
.dp-azcard.expanded .dp-az-collapse { max-height: 420px; opacity: 1; margin-top: 12px; }
/* 工具调度模式：路由不展开，固定尺寸卡片，只换文案 + 转圈，绝不变大小 */
.dp-azcard.dp-az-orch { width: 250px; transition: box-shadow .4s var(--ease); }
.dp-az-orch .dp-az-quick { margin-top: 11px; }
.dp-az-quick { display: flex; align-items: flex-start; gap: 9px; }
/* 文案区固定 2 行高度：分析中 / 已选定 两种文案长短不一也不改卡片高度 */
.dp-az-quick .azq-t { font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; min-height: 2.8em; }
.dp-az-quick .azq-t b { color: var(--ink); font-weight: 700; }
.azq-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: hubSpin .8s linear infinite; }
.dp-az-rows { display: flex; flex-direction: column; }
.dim-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--line); opacity: 0; animation: dimIn .32s var(--ease) both; animation-delay: var(--d, 0s);
}
.dim-row:first-child { border-top: none; }
.dim-ic { width: 28px; height: 28px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; flex: none; }
.dim-k { font-size: var(--t-caption); font-weight: 600; color: var(--ink); width: 62px; flex: none; }
.dim-vwrap { position: relative; flex: 1; min-width: 0; min-height: 30px; display: flex; align-items: center; }
.dim-skel { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 9px; width: 82%; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 220% 100%;
  opacity: 0; animation: dimSkel .42s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes dimSkel { 0% { opacity: 0; background-position: 170% 0; } 25% { opacity: 1; } 80% { opacity: 1; background-position: -70% 0; } 100% { opacity: 0; } }
.dim-v { position: relative; font-size: var(--t-caption); color: var(--ink-3); line-height: 1.3; opacity: 0; animation: dimIn .3s var(--ease) both; animation-delay: calc(var(--d, 0s) + .3s); }
.dim-ok { margin-left: auto; color: var(--pos); font-size: var(--t-caption); font-weight: 700; flex: none;
  opacity: 0; animation: tickPop .3s var(--ease) both; animation-delay: calc(var(--d, 0s) + .34s); }
.dp-az-foot { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  opacity: 0; animation: dimIn .45s var(--ease) both; animation-delay: var(--d, 0s); }
.azf-label { font-size: var(--t-caption); font-weight: 500; color: var(--ink-2); }
.azf-agents { display: flex; gap: 6px; flex: none; }
.azf-agents .btile { box-shadow: none; border: 1px solid var(--line); }
@keyframes dimIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* sub-agent / model node — white card; identity = the brand logo + the colored sweep。
   三张卡固定同样大小（宽 + 最小高度），文案长短不改尺寸，选择前后形状不变。 */
.dp-agent {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 13px 14px; box-shadow: var(--sh-2); width: 214px; min-height: 108px; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 9px;
}
.dpa-head { display: flex; align-items: center; gap: 10px; padding-right: 48px; }
.dpa-ic { border-radius: var(--r-chip); display: inline-flex; flex: none; }
.dpa-meta { min-width: 0; flex: 1 1 auto; }
.dpa-name { font-size: var(--t-body); font-weight: 700; letter-spacing: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpa-summary { margin-top: 4px; font-size: var(--t-caption); font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpa-pills { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.dpa-src { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-caption); font-weight: 600; }
.dpa-srcdot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dpa-tag { display: inline-block; font-size: var(--t-caption); font-weight: 600; padding: 2px 8px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-3); }
/* 理由区固定 2 行高度：评估中(cap) / 选中(why) / 落选(rejWhy) 长短不一也不改卡片高度 */
.dpa-why { font-size: var(--t-caption); color: var(--ink-3); line-height: 1.32; min-height: 2.64em; }
/* 备选 Agent 评估中 / 选中 / 排除 —— 路由是「选一个」，且看得见选择过程 */
.dpa-flag { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 36px; height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  font-size: var(--t-caption); font-weight: 800; color: var(--ink-4); white-space: nowrap; background: var(--surface-2); }
.dpa-flag.eval { color: var(--ink-3); }
.dpa-evaldot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: evalBlink 1s var(--ease) infinite; }
@keyframes evalBlink { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
/* 评估中：三张卡中性并列，等额权重；拍板后未选中的「慢慢变淡」（.7s 过渡） */
.dp-agent { transition: opacity .7s var(--ease), filter .7s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.dp-agent.eval { opacity: .96; }
/* 选中：只高亮（描边 + 阴影），尺寸不变 */
.dp-agent.sel { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
.dp-agent.sel .dpa-flag { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* 落选：仅「稍微置灰」—— 轻度降透明 + 轻度去色，尺寸 / 位置完全不变 */
.dp-agent.rej { opacity: .62; filter: grayscale(.4); box-shadow: var(--sh-1); }
.dp-agent.rej .dpa-why { color: var(--ink-4); }
.azf-selname { font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); margin-left: 7px; }
/* 分析中：不点名赢家，只给「下一步去比对」的指向 */
.azf-pending { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: 600; color: var(--ink-3); }
.azf-arrow { color: var(--accent); font-weight: 800; animation: azfNudge 1.4s var(--ease) infinite; }
@keyframes azfNudge { 0%,100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(3px); opacity: 1; } }

.dp-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 94px; z-index: 4; }
.dpt-ic { display: inline-flex; }   /* wire anchors to the icon's center, not the icon+label+badge block */
.dpt-label { font-size: var(--t-caption); color: var(--ink-2); font-weight: 500; text-align: center; line-height: 1.25; }
/* 仅作角标定位 + 出场动画 + 悬浮投影；圆形与白勾由内部 .done-tick 统一绘制 */
.dpt-check {
  position: absolute; top: -6px; right: 22px; border-radius: 50%;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pos) 14%, transparent);
  animation: tickPop .4s var(--ease) both;
}
/* 本机模拟操作徽标 — 把「只能在本机用 Computer Use 完成」的步骤和飞书那类 API 调用区分开
   低饱和暖金底，去掉过亮的纯橙 */
.dpt-cu {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 1px;
  padding: 1.5px 7px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .02em;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
}
.dpt-cu::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 24%, transparent);
}

/* ============================================================
   工具调度模式（痛点2）— 桌面端按顺序编排多个 App 的「操作序列」
   一条竖脊把 ①②③④ 串起来，强调这是「一个 Agent 在你桌面上接力操作」
   ============================================================ */
.dp-seq { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(86vw, 360px); }
.dp-seq-cap {
  display: flex; align-items: center; gap: 7px; margin-bottom: 2px;
  font-size: var(--t-caption); font-weight: 600; color: var(--ink-3);
}
.seq-cap-ic { display: inline-flex; color: var(--accent); }
/* 竖脊：从第 1 步贯到最后一步，落在序号徽标中心线上 */
.dp-seq::before {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: 18px; width: 2px;
  background: linear-gradient(var(--line-2), var(--line)); border-radius: 2px; z-index: 0;
}
.dp-seqstep {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  opacity: 0; transform: translateY(10px);
  animation: nodeRise .5s var(--ease) both; animation-delay: calc(var(--si) * .12s);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
/* 三态：待执行(暗) → 执行中(高亮抬起) → 已完成 */
.dp-seqstep.s-wait { opacity: .5; }
.dp-seqstep.s-run {
  opacity: 1; border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateX(-2px);
}
.dp-seqstep.s-done { opacity: 1; border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.seq-n {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-caption); font-weight: 800; color: #fff; background: var(--ink-4);
  transition: background .35s var(--ease);
}
.dp-seqstep.s-run .seq-n { background: var(--accent); box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 38%, transparent); }
.dp-seqstep.s-done .seq-n {
  background: color-mix(in srgb, var(--pos) 54%, var(--surface)); color: rgba(255,255,255,.9);
  border: 1px solid color-mix(in srgb, var(--pos) 22%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pos) 14%, transparent);
  opacity: .82;
}
.seq-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: hubSpin .7s linear infinite;
}
.seq-ic { flex: none; display: inline-flex; }   /* wire 锚到 app 图标中心 */
/* 汇总连线锚点：卡片右侧末端中点（measure 取其中心 ≈ 卡片右边缘中线） */
.seq-rt { position: absolute; right: 0; top: 50%; width: 1px; height: 1px; pointer-events: none; }
.seq-act { font-size: var(--t-small); font-weight: 600; color: var(--ink); line-height: 1.3; min-width: 0; flex: 1 1 auto; }
.seq-app { font-weight: 700; color: var(--ink-3); margin-right: 7px; }
/* 调用方式徽标：CU 高亮(暖金) · CLI/API 与 本机读取 走中性，弱化 */
.seq-via {
  flex: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--t-caption); font-weight: 700;
}
.seq-via.cu { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.seq-via.cli, .seq-via.fs { color: var(--ink-4); background: var(--surface-2); font-weight: 600; }

/* ---- routing debug panel ---- */
.dp-debug {
  position: absolute; left: 14px; bottom: 14px; z-index: 60; width: 246px;
  font-size: var(--t-caption); color: var(--ink-2); border-radius: var(--r-card); overflow: hidden;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); box-shadow: var(--glass-sh);
}
.dpd-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.dpd-x { width: 22px; height: 22px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-small); line-height: 1; }
.dpd-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.dpd-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dpd-btn { padding: 5px 10px; border-radius: var(--r-chip); font-size: var(--t-caption); font-weight: 500;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent; transition: all var(--dur-ui) var(--ease-ui); }
.dpd-btn:hover { background: var(--surface-3); }
.dpd-btn.on { background: var(--ch); color: #fff; }
.dpd-btn.wide { width: 100%; text-align: center; background: var(--ink); color: #fff; }
.dpd-lbl { min-width: 64px; color: var(--ink-3); }
.dpd-range { flex: 1; accent-color: var(--ch); }

/* ---- global debug-mode toggle ---- */
.dbg-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  padding: 7px 13px; border-radius: var(--r-pill); font-size: var(--t-caption); font-weight: 600;
  color: var(--ink-2); background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); box-shadow: var(--glass-sh);
  opacity: .55; transition: opacity var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.dbg-toggle:hover { opacity: 1; }
.dbg-toggle.on { opacity: 1; background: var(--ink); color: #fff; border-color: transparent; }

/* ---- universal scrubbable timeline debug panel ----
   作为「调试」按钮上方弹出的 popover：锚定右下角、浮在 .dbg-toggle 正上方，
   开关与退出都从那一处完成，不再和左下角的「改文案」入口打架。仍可拖动 sb-head 移走。 */
.sb-debug {
  position: fixed; right: 16px; bottom: 76px; z-index: 96; width: 320px;
  font-size: var(--t-caption); color: var(--ink-2); border-radius: var(--r-card); overflow: hidden;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); box-shadow: var(--glass-sh); user-select: none;
  transform-origin: bottom right; animation: sbPop .2s var(--ease) both;
}
@keyframes sbPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.sb-debug.min { width: 220px; }
.sb-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: grab;
  font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.sb-head:active { cursor: grabbing; }
.sb-play { width: 24px; height: 24px; border-radius: var(--r-chip); background: var(--ch); color: #fff;
  font-size: var(--t-caption); line-height: 1; display: flex; align-items: center; justify-content: center; flex: none; }
.sb-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-time { color: var(--ink-3); font-size: var(--t-caption); flex: none; }
.sb-x { width: 22px; height: 22px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-small); line-height: 1; flex: none; }
.sb-body { padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 11px; }
.sb-track { position: relative; height: 22px; cursor: pointer; display: flex; align-items: center; touch-action: none; }
.sb-track::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px;
  background: var(--surface-2); }
.sb-fill { position: absolute; left: 0; height: 5px; border-radius: 3px; background: var(--ch); }
.sb-tick { position: absolute; width: 2px; height: 9px; transform: translateX(-50%);
  background: var(--ink-3); opacity: .35; border-radius: 1px; pointer-events: none; }
.sb-tick.on { opacity: .9; background: var(--ch); }
.sb-handle { position: absolute; width: 15px; height: 15px; border-radius: 50%; transform: translateX(-50%);
  background: var(--surface); border: 2px solid var(--ch); box-shadow: 0 1px 4px rgba(18,20,28,.18); pointer-events: none; }
.sb-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-step { padding: 4px 9px; border-radius: var(--r-chip); font-size: var(--t-caption); font-weight: 500;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent; transition: all var(--dur-micro) var(--ease-ui); }
.sb-step:hover { background: var(--surface-3); }
.sb-step.on { background: var(--ch); color: #fff; }
.sb-row { display: flex; align-items: center; gap: 5px; }
.sb-lbl { color: var(--ink-3); margin-right: 2px; }
.sb-rate { padding: 4px 7px; border-radius: var(--r-chip); font-size: var(--t-caption); background: var(--surface-2); color: var(--ink-2); }
.sb-rate.on { background: var(--ink); color: #fff; }
.sb-replay { margin-left: auto; padding: 4px 9px; border-radius: var(--r-chip); font-size: var(--t-caption);
  background: var(--ink); color: #fff; }

/* typing indicator (chat reply) */
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4);
  animation: typingBounce 1.2s var(--ease) infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ---- agent layer (decomposition / routing) ---- */
.agent-layer {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(80% 90% at 50% 42%, var(--surface) 0%, var(--surface-2) 70%, var(--surface-3) 100%);
  border: 1px solid var(--line);
  opacity: 0; transform: scale(1.04); pointer-events: none;
  transition: opacity var(--dur-scene) var(--ease), transform var(--dur-scene) var(--ease);
}
.agent-layer.on { opacity: 1; transform: none; pointer-events: auto; }

.hero-task { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 20px 0 6px; }
.hero-bubble {
  background: #95ec69; color: #0d2912; padding: 12px 22px; border-radius: var(--r-card);
  font-size: var(--t-body); font-weight: 500; box-shadow: var(--sh-2); max-width: 82%;
  animation: heroIn .8s var(--ease) both;
}
@keyframes heroIn { from { transform: scale(.7) translateY(46px); } to { transform: none; } }
.hero-cap { font-size: var(--t-small); color: var(--ink-4); }

.agent-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
}
.agent-badge { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; }
.agent-status {
  font-size: var(--t-small); color: var(--accent); background: var(--accent-050);
  padding: 7px 16px; border-radius: var(--r-pill); font-weight: 500; transition: all var(--dur-ui) var(--ease-ui);
}
.agent-stage { flex: 1; min-height: 0; position: relative; }
.agent-stage .route-stage { border: none; border-radius: 0; background: transparent; box-shadow: none; }

/* 命中提示徽标 — 低饱和暖金，白底发丝边 */
.detect-callout {
  position: absolute; top: 58%; left: 24%; transform: translate(-50%, -50%); z-index: 7;
  background: var(--surface); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  padding: 7px 13px; border-radius: var(--r-card); font-size: var(--t-caption); font-weight: 600;
  box-shadow: var(--sh-2); white-space: nowrap;
}

/* ============================================================
   Act 1 — engine reveal (收口屏)
   ============================================================ */
.engine { align-items: center; }
.engine-head { text-align: center; margin-bottom: 8px; }
.engine-head .h-title { margin-top: 8px; }
.engine-stage {
  flex: 1; min-height: 0; width: 100%; max-width: 1080px;
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 10px 0;
}
.mini-route {
  position: absolute; width: 264px; height: 188px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: transform .8s var(--spring), opacity .5s var(--ease), filter .5s var(--ease), box-shadow .8s var(--ease);
  display: flex; flex-direction: column; padding: 18px 20px 14px;
}
.mr-head { display: flex; flex-direction: column; gap: 3px; }
.mr-name { font-size: var(--t-small); font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.mr-tag { font-size: var(--t-caption); color: var(--ink-3); font-weight: 500; }
.mr-svg { flex: 1; width: 100%; margin-top: 6px; overflow: visible; }

/* 共有产品引擎核：AgentPilot */
.mr-hub-box { fill: var(--accent); }
.mr-hub-g { filter: drop-shadow(0 4px 10px var(--accent-glow)); }
.mr-hub-dot { fill: #fff; }
/* 扇出/收敛的端点节点 */
.mr-node { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
/* 智能路由：只选中一个候选 Agent —— 选中那路高亮，其余置灰 */
.mr-node.is-sel { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 2px 6px var(--accent-glow)); }
.mr-node.is-dim { stroke: var(--line-2); opacity: .4; }
.mr-edge.is-dim { stroke: var(--ink-3); opacity: .25; animation: none; stroke-dasharray: 4 6; }
/* 编排里的工具瓦片 */
.mr-tool { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
/* 连线：流向动画 */
.mr-edge {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 5 7; opacity: .55;
  animation: mrFlow 1.1s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes mrFlow { to { stroke-dashoffset: -24; } }

/* 散开：三张活各自错落 */
.mini-route.c1 { transform: translate(-300px, -6px) rotate(-5deg); }
.mini-route.c2 { transform: translate(0, 24px) rotate(2deg); z-index: 3; }
.mini-route.c3 { transform: translate(300px, -6px) rotate(5deg); }

/* 叠合：收拢成一摞（保留厚度感，依次落定，不消失） */
.engine-stage.stacked .mini-route.c1 { transform: translate(-15px, -9px) rotate(-3.5deg) scale(.9); transition-delay: 0s; }
.engine-stage.stacked .mini-route.c2 { transform: translate(0, 0) rotate(0deg) scale(.93); transition-delay: .14s; }
.engine-stage.stacked .mini-route.c3 { transform: translate(15px, 9px) rotate(3.5deg) scale(.9); transition-delay: .07s; }

/* 化作引擎：这一摞向外化开、虚化退场（交叉淡入引擎） */
.engine-stage.revealed .mini-route {
  opacity: 0; filter: blur(7px);
  transition: transform .65s var(--ease), opacity .55s var(--ease), filter .55s var(--ease);
}
.engine-stage.revealed .mini-route.c1 { transform: translate(-46px, -20px) rotate(-7deg) scale(1.05); }
.engine-stage.revealed .mini-route.c2 { transform: translate(0, 6px) scale(1.08); }
.engine-stage.revealed .mini-route.c3 { transform: translate(46px, 20px) rotate(7deg) scale(1.05); }

.engine-core {
  position: absolute; opacity: 0; transform: scale(.92) translateY(8px);
  transition: opacity .7s var(--ease) .3s, transform .8s var(--spring) .3s;
  pointer-events: none;
}
.engine-core.on { opacity: 1; transform: scale(1) translateY(0); }
/* 引擎逐节装配：四步依次浮现 */
.engine-core .ec-step, .engine-core .ec-arrow {
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.engine-core.on .ec-step, .engine-core.on .ec-arrow { opacity: 1; transform: translateY(0); }
.engine-core.on .ec-step:nth-child(1) { transition-delay: .42s; }
.engine-core.on .ec-arrow:nth-child(2) { transition-delay: .52s; }
.engine-core.on .ec-step:nth-child(3) { transition-delay: .60s; }
.engine-core.on .ec-arrow:nth-child(4) { transition-delay: .70s; }
.engine-core.on .ec-step:nth-child(5) { transition-delay: .78s; }
.engine-core.on .ec-arrow:nth-child(6) { transition-delay: .88s; }
.engine-core.on .ec-step:nth-child(7) { transition-delay: .96s; }
.ec-flow {
  display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; justify-content: center;
}
/* 统一尺寸的玻璃步骤卡（与三图卡同一套材质） */
.ec-step {
  width: 190px; flex: none;
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  box-shadow: var(--glass-sh);
  padding: 20px 22px; text-align: left;
}
.ec-eye { font-size: var(--t-caption); font-weight: 700; letter-spacing: -.01em; color: var(--accent); }
.ec-title { font-size: var(--t-h3); font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.ec-cap { font-size: var(--t-caption); font-weight: 500; color: var(--ink-3); line-height: 1.4; }
/* 引擎核 · 本机 Agent：同尺寸，以石板靛实底 + inset 高光突出 */
.ec-step.hub {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 12px 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.ec-step.hub .ec-eye { color: rgba(255,255,255,.82); }
.ec-step.hub .ec-title { color: #fff; }
.ec-step.hub .ec-cap { color: rgba(255,255,255,.9); }

/* 连接：流动虚线 + 箭头（统一石板靛流向语言） */
.ec-arrow {
  flex: none; align-self: center; position: relative;
  width: 46px; height: 12px; margin: 0 4px; opacity: .65;
}
.ec-arrow::before {
  content: ""; position: absolute; left: 2px; right: 10px; top: 50%; height: 2px; transform: translateY(-50%);
  background-image: linear-gradient(90deg, var(--accent) 55%, transparent 0);
  background-size: 11px 2px; background-repeat: repeat-x;
  animation: ecFlow 1.1s linear infinite;
}
.ec-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 7px solid var(--accent);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
@keyframes ecFlow { to { background-position: 11px 0; } }
.engine-foot { flex: none; min-height: 96px; display: flex; align-items: center; justify-content: center; padding-top: 8px; }
.engine-line {
  max-width: 920px; text-align: center; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2);
}
.engine-line b { color: var(--ink); font-weight: 600; }

/* ============================================================
   Roles — 支撑每一种角色：引擎居中（圆角卡片），角色径向环绕
   ============================================================ */
.roles { align-items: center; }
.roles-head { text-align: center; margin-bottom: 4px; }
.roles-head .h-title { margin-top: 8px; }
.roles-sub { margin: 8px auto 0; max-width: 720px; font-size: var(--t-lead);
  line-height: 1.55; color: var(--ink-3); }
.roles-sub b { color: var(--ink); font-weight: 600; }

/* 正方形环形舞台 —— 锁成正方形，useSize 量到的 w≈h，故为真圆 */
.roles-ring {
  flex: 1; min-height: 0; position: relative;
  width: min(70vh, 720px); aspect-ratio: 1; max-height: 100%;
  margin: 4px auto;
}

/* 连线层：复用全篇 wire-base / wire-lit（见 scenes.css），此处整体调淡 ——
   底线极淡，accent 高亮线也压低；me（投资人）那条略亮，其余收敛、按序点亮、无流光点。 */
.roles-wires { position: absolute; inset: 0; overflow: visible; }
.roles-wires .wire-base { stroke-width: 1; opacity: .3; }
.roles-wire .wire-lit { opacity: .16; stroke-width: 1; transition-delay: calc(var(--i) * 26ms); }
.roles-wire.me .wire-lit { opacity: .55; stroke-width: 1.4; transition-delay: 0s; }

/* 中心：产品 / 引擎 —— 圆角卡片，与全篇 hub-core 一致（不是圆形） */
.roles-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6; display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 12px 18px 12px 13px; border-radius: var(--r-card); box-shadow: var(--sh-2);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  animation: rolesCoreIn .7s var(--spring) both;
}
.roles-core.on { border-color: var(--accent); box-shadow: 0 8px 26px var(--accent-glow); }
@keyframes rolesCoreIn { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }
.rc-text { display: flex; flex-direction: column; line-height: 1.2; }
.rc-name { font-size: var(--t-small); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.rc-sub { font-size: var(--t-caption); color: var(--ink-4); }
/* 圆角光晕脉冲（跟卡片同形，不是圆） */
.rc-halo {
  position: absolute; inset: -1px; border-radius: var(--r-card);
  border: 1.5px solid var(--accent); opacity: 0; pointer-events: none;
}
.roles-core.on .rc-halo { animation: rcHalo 2.6s var(--ease) infinite; }
@keyframes rcHalo {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* 角色节点 —— 锚点在图标中心，标签浮下方、徽标浮上方（不压连线） */
.role-node {
  position: absolute; transform: translate(-50%, -50%) scale(.4);
  z-index: 4; width: 48px; height: 48px; opacity: 0; pointer-events: none;
  transition: opacity .42s var(--ease), transform .5s var(--spring);
  transition-delay: calc(var(--i) * 30ms);
}
.roles-ring.spread .role-node { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.role-ic {
  width: 100%; height: 100%; border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  box-shadow: var(--sh-2); transition: color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
.role-node:hover { z-index: 7; }
.role-node:hover .role-ic { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
/* 标签沿半径朝外摆（ux,uy 为朝外单位向量）—— 连线朝内、标签朝外，二者永不交叠 */
.role-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(calc(var(--ux) * 44px), calc(var(--uy) * 44px));
  font-size: var(--t-caption); color: var(--ink-3); font-weight: 500; white-space: nowrap;
}

/* 投资人 —— 刚刚演示过的角色，lit 时即亮（不等 spread） */
.role-node.me {
  transform: translate(-50%, -50%) scale(.5);
  transition: opacity .5s var(--ease), transform .6s var(--spring);
  transition-delay: 0s; z-index: 5;
}
.roles-ring.lit .role-node.me { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
.role-node.me .role-ic {
  background: var(--accent-050); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.role-node.me .role-label { color: var(--ink); font-weight: 700; }
/* 徽标沿半径朝外、落在标签更外侧（投资人在 12 点 → 标签在上、徽标更上，均不压连线） */
.role-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(calc(var(--ux) * 70px), calc(var(--uy) * 70px));
  font-size: var(--t-caption); font-weight: 700; color: #fff; background: var(--accent);
  padding: 1px 9px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: 0 3px 10px var(--accent-glow);
}

.roles-foot { flex: none; min-height: 60px; display: flex; align-items: center; justify-content: center; padding-top: 4px; }
.roles-line { max-width: 860px; text-align: center; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); }
.roles-line b { color: var(--ink); font-weight: 600; }

/* ============================================================
   Why us — people are the subject (top), capability demoted below
   ============================================================ */
.whyus { align-items: center; justify-content: flex-start; gap: clamp(18px, 2.6vh, 34px); }
.wu-head { text-align: center; }
.wu-head .h-title { margin-top: 10px; }
.wu-head .h-sub { margin: 10px auto 0; max-width: 860px; line-height: 1.55; }
.wu-head .h-sub b { color: var(--ink); font-weight: 600; }

/* —— PRIMARY: the people —— */
.pp-row {
  /* 头部固定在顶部后，人物卡组在头部与底部之间垂直居中（上 auto 外边距） */
  flex: none; margin-top: auto; display: flex; gap: clamp(16px, 1.8vw, 28px);
  justify-content: center; width: 100%; max-width: 1140px;
}
.pp-card {
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-lg); box-shadow: var(--glass-sh);
  padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.2vw, 32px);
  opacity: 0; transform: translateY(24px) scale(.985);
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .45s var(--ease);
}
.pp-card.in { opacity: 1; transform: none; }
.pp-card:hover { box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.7); }
.pp-top { display: flex; align-items: center; gap: 16px; }
.pp-av {
  position: relative; overflow: hidden;
  flex: none; width: clamp(54px, 4vw, 62px); height: clamp(54px, 4vw, 62px);
  border-radius: var(--r-lg); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tint) 44%, transparent);
}
.pp-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.pp-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-name { font-size: clamp(21px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.022em; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.pp-role { font-size: var(--t-small); font-weight: 600; letter-spacing: .06em; }
.pp-creds {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: clamp(18px, 1.8vw, 22px); padding-top: clamp(18px, 1.8vw, 22px);
  border-top: 1px solid var(--line);
}
.pp-cred {
  position: relative; padding-left: 18px;
  font-size: var(--t-small); color: var(--ink-3); line-height: 1.35;
}
.pp-cred::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--tint); opacity: .7;
}
/* capability the person owns — one quiet tag riding on the card, under the name */
.pp-cap {
  display: inline-flex; margin-top: clamp(15px, 1.6vw, 19px);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  color: var(--tint); padding: 5px 11px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tint) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
}

/* —— BENCH: lighter pair (架构师 named + capped, 顾问 待填充) — secondary to founders —— */
.wu-bench {
  flex: none; margin-bottom: auto; width: 100%; max-width: 1140px; align-self: center;
  display: flex; justify-content: center; gap: clamp(14px, 1.6vw, 24px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.wu-bench.in { opacity: 1; transform: none; }
.bn-card {
  flex: 0 1 560px; min-width: 0; position: relative; display: flex; align-items: center; gap: 16px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-card); box-shadow: var(--sh-1);
  padding: clamp(15px, 1.4vw, 19px) clamp(20px, 1.9vw, 26px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.wu-bench.in .bn-card { opacity: 1; transform: none; }
.bn-card.tbd { background: transparent; border: 1px dashed var(--line-2); box-shadow: none; }
.bn-av {
  flex: none; width: clamp(38px, 3vw, 44px); height: clamp(38px, 3vw, 44px);
  border-radius: var(--r-chip); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.02em;
}
.bn-card.tbd .bn-av { color: var(--ink-4); background: var(--surface-2) !important; }
.bn-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bn-role {
  font-size: var(--t-small); font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.bn-tbd {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--ink-4);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 1px 7px;
}
.bn-cred { font-size: var(--t-caption); color: var(--ink-3); line-height: 1.35; }
.bn-cap {
  flex: none; align-self: center; font-size: 11px; font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap; color: var(--tint); padding: 4px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tint) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
}

@media (max-width: 900px) {
  .pp-row { flex-direction: column; }
  /* 列布局下卡片须按内容撑高，否则 flex:1 1 0 会把各卡压成等高(~42px)、头像姓名被裁 */
  .pp-card { flex: 0 0 auto; }
  .pp-name { white-space: normal; }
  .wu-bench { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ============================================================
   移动端（≤600px）— 只在此断点内重排，桌面未受影响，所有动画保留
   覆盖屏：act1-flow / act1-alert（.nar）· act1-engine · team（.whyus）
   ============================================================ */
@media (max-width: 600px) {

  /* ---- Act 1 narrative（flow / alert 共用 .nar 结构）---- */
  .nar-head { margin-bottom: 12px; }
  .nar-sub { margin-top: 10px; padding-left: 13px; }

  /* 手机模型：窄屏改为「宽度驱动」，避免 height+aspect-ratio 把机身压得过窄、
     导致气泡退化成一字一行。宽度取 78vw（与规范 .phone 一致），高度随之自适应，
     并以 100% 上限防止在矮屏溢出。 */
  .iphone {
    width: min(78vw, 300px); height: auto; max-height: 100%;
    aspect-ratio: 312 / 648; border-radius: 40px;
  }
  .ip-screen { border-radius: 36px; }

  /* 手机层内边距收紧，给底部 entry-strip / send-guide 让位 */
  .phone-layer { padding: 10px 0 54px; }

  /* 入口提示条：窄屏换行、缩小、不溢出 */
  .entry-strip {
    bottom: 4px; gap: 6px; max-width: 92%;
    flex-wrap: wrap; justify-content: center; text-align: center;
    white-space: normal; row-gap: 4px;
  }
  .entry-strip .es-dots { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .entry-strip .es-dot { width: 16px; height: 16px; }

  /* 发送引导箭头：缩小并上移，确保不压住手机输入区 */
  .send-guide { right: 14px; bottom: 56px; }
  .sg-arrow { width: 42px; height: 32px; }

  /* 解析面板 / dispatch 卡片：收窄，杜绝横向出血 */
  .dp-azcard { width: min(82vw, 230px); }
  .dp-azcard.expanded { width: min(86vw, 320px); }
  .dp-hub { width: min(78vw, 210px); }
  .dp-agent { width: min(80vw, 214px); }

  /* agent layer 顶栏：内边距收紧、状态药丸可换行不溢出 */
  .agent-top { padding: 11px 14px; gap: 8px; }
  .agent-status { padding: 5px 11px; }

  .detect-callout { left: 50%; padding: 6px 11px; }

  /* ---- Act 1 engine 收口屏 ---- */
  .engine-head { margin-bottom: 6px; }

  /* 三图散开范围收小，杜绝 ±300px 出血；叠合/化开动画保留 */
  .mini-route { width: min(76vw, 264px); height: 168px; padding: 15px 17px 12px; }
  .mini-route.c1 { transform: translate(-18vw, -10px) rotate(-5deg); }
  .mini-route.c2 { transform: translate(0, 22px) rotate(2deg); }
  .mini-route.c3 { transform: translate(18vw, -10px) rotate(5deg); }
  .engine-stage.stacked .mini-route.c1 { transform: translate(-12px, -8px) rotate(-3.5deg) scale(.9); }
  .engine-stage.stacked .mini-route.c3 { transform: translate(12px, 8px) rotate(3.5deg) scale(.9); }
  .engine-stage.revealed .mini-route.c1 { transform: translate(-30px, -16px) rotate(-7deg) scale(1.04); }
  .engine-stage.revealed .mini-route.c3 { transform: translate(30px, 16px) rotate(7deg) scale(1.04); }

  /* 引擎核四步：横排 → 纵向堆叠，箭头转 90° 向下，不出血 */
  .ec-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .ec-step { width: 100%; max-width: 320px; padding: 14px 18px; }
  .ec-arrow { width: 12px; height: 22px; align-self: center; margin: 4px 0; transform: rotate(90deg); }

  .engine-foot { min-height: 0; padding-top: 12px; }
  .engine-line { font-size: var(--t-body); }

  /* ---- team（凭什么是我们）---- */
  .whyus { gap: 16px; justify-content: flex-start; }
  /* pp-row 已在 900px 单列；此处收紧卡片内边距 */
  .pp-card { padding: 20px 18px; }
  .pp-creds { margin-top: 16px; padding-top: 16px; }

  /* eval 行：标题/标签/chips 纵向堆叠，chips 左对齐换行不溢出 */
  .wb-eval { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wb-chips { justify-content: flex-start; }
  .wb-caps { padding: 11px 16px; }
}

/* Act 2 / Act 3 per-screen styles now live entirely in act2.css and act3.css.
   The legacy duplicates that used to live here were removed — they bled unset
   properties (flex-direction, display, min-height) into those screens. */

/* ============================================================
   dev · 页面内文案编辑器（仅开发者模式渲染，详见 edit.jsx）
   ============================================================ */
body.copy-edit-on .stage,
body.copy-edit-on .stage * { cursor: text; }
body.copy-edit-on .stage *:hover {
  outline: 1px dashed rgba(91, 100, 120, .55);
  outline-offset: 2px;
  border-radius: 3px;
}
.copy-editor-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 9998;
  display: flex; align-items: center; gap: 10px;
}
.ce-btn {
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  padding: 9px 13px; border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #1f2329;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14); cursor: pointer;
}
.ce-btn.on { background: #5b6478; color: #fff; border-color: #5b6478; }
.ce-btn:disabled { opacity: .55; cursor: default; }
.ce-tip { font: 12px system-ui; color: #5b6478; background: rgba(255,255,255,.85);
  padding: 5px 9px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.copy-editor-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 24, .45);
}
.cem-card {
  width: min(560px, 92vw); background: #fff; border-radius: 16px;
  padding: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
}
.cem-card h4 { margin: 0 0 12px; font: 600 14px system-ui; color: #5b6478; }
.cem-card textarea {
  width: 100%; min-height: 120px; box-sizing: border-box;
  font: 15px/1.6 system-ui; padding: 12px; border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .18); resize: vertical;
}
.cem-hint { margin-top: 8px; font: 12px system-ui; color: #9aa0ac; }
.cem-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.copy-editor-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 10001; background: #1f2329; color: #fff;
  padding: 11px 18px; border-radius: 10px; font: 13px system-ui;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
}