/* 官网产品演示组件
 * 外壳尺寸与信息架构对照 Electron 的 ShellTopBar、ActivityRail、
 * TaskWorkspaceHeader、WorkdirPaneShell 与 TabCode 组件实现。
 */

.tt-product-demo {
  --tt-accent: #dd7a20;
  --tt-green: #36a66a;
  --tt-red: #d85d57;
  --tt-ink: #292724;
  --tt-muted: #8b8781;
  --tt-faint: #aaa6a0;
  --tt-line: rgba(42, 38, 33, 0.09);
  --tt-panel: #ffffff;
  --tt-sidebar: #f8f8f7;
  --tt-shell-topbar-height: 4.08cqw;
  --tt-activity-rail-width: 3.72cqw;
  /*
   * Electron 排版镜像：字体栈与字重角色保持同源，只使用
   * Regular 400 / Medium 500 / Semibold 600。
   * 字号使用容器单位，让整套产品壳像截图一样等比缩放。
   */
  --tt-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --tt-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --tt-text-micro: 0.58cqw;
  --tt-text-caption: 0.66cqw;
  --tt-text-meta: 0.74cqw;
  --tt-text-body: 0.82cqw;
  --tt-text-message: 0.88cqw;
  --tt-text-primary: 0.94cqw;
  --tt-text-subtitle: 1.05cqw;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: #f7f4f0;
  color: var(--tt-ink);
  font-family: var(--tt-font-sans);
  font-size: var(--tt-text-body);
  font-weight: 400;
  line-height: 1.57;
  font-feature-settings: "rlig" 1, "calt" 1;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-align: left;
  user-select: none;
}

.tt-product-demo *,
.tt-product-demo *::before,
.tt-product-demo *::after {
  box-sizing: border-box;
}

.tt-product-demo svg {
  display: block;
  width: 1.3cqw;
  height: 1.3cqw;
  max-width: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.tt-shell-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: var(--tt-shell-topbar-height);
  padding: 0 1.05cqw;
  border-bottom: 1px solid rgba(40, 34, 28, 0.035);
  background: linear-gradient(90deg, #f6eadf 0%, #f4ede7 38%, #f6f3ef 100%);
}

.tt-traffic-lights {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  margin-right: 1.2cqw;
}

.tt-traffic-lights i {
  width: 1.05cqw;
  height: 1.05cqw;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
}

.tt-traffic-lights i:nth-child(1) { background: #ff5f57; }
.tt-traffic-lights i:nth-child(2) { background: #febc2e; }
.tt-traffic-lights i:nth-child(3) { background: #28c840; }

.tt-shell-collapse {
  display: grid;
  place-items: center;
  width: 1.9cqw;
  height: 1.9cqw;
  margin-right: 0.75cqw;
  color: #99948e;
}

.tt-org-switcher {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  height: 2.7cqw;
  max-width: 18cqw;
  padding: 0 0.9cqw;
  border-radius: 0.7cqw;
  background: rgba(255, 255, 255, 0.26);
  font-size: var(--tt-text-subtitle);
  font-weight: 500;
  white-space: nowrap;
}

.tt-org-switcher svg {
  width: 0.9cqw;
  height: 0.9cqw;
  color: #9b9690;
}

.tt-global-search {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  width: 24.5cqw;
  height: 2.35cqw;
  padding: 0 0.75cqw;
  border: 1px solid rgba(49, 43, 38, 0.04);
  border-radius: 0.65cqw;
  background: rgba(70, 62, 55, 0.03);
  color: #a19d98;
  transform: translate(-50%, -50%);
}

.tt-global-search svg {
  width: 1.05cqw;
  height: 1.05cqw;
  margin-right: 0.55cqw;
}

.tt-global-search span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: var(--tt-text-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-global-search kbd {
  padding: 0.08cqw 0.38cqw;
  border-radius: 0.28cqw;
  background: rgba(255, 255, 255, 0.58);
  color: #b5b0aa;
  font: 500 var(--tt-text-micro)/1.4 var(--tt-font-sans);
}

.tt-shell-status {
  display: flex;
  align-items: center;
  gap: 0.95cqw;
  margin-left: auto;
  color: #92908b;
}

.tt-shell-status__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5cqw;
  height: 1.5cqw;
}

.tt-shell-status__item svg {
  width: 1.25cqw;
  height: 1.25cqw;
}

.tt-shell-status__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.38cqw;
  height: 0.38cqw;
  border: 0.08cqw solid #f5f1ed;
  border-radius: 50%;
  background: #319568;
}

.tt-shell-body {
  display: grid;
  grid-template-columns: var(--tt-activity-rail-width) minmax(0, 1fr);
  height: calc(100% - var(--tt-shell-topbar-height));
  min-height: 0;
}

.tt-activity-rail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding: 0.8cqw 0 0.7cqw;
  background: var(--tt-sidebar);
}

.tt-rail-org {
  display: grid;
  place-items: center;
  width: 2.2cqw;
  height: 2.2cqw;
  margin-bottom: 1.05cqw;
  border-radius: 0.65cqw;
  background: #d99a45;
  color: #fff;
  font-size: var(--tt-text-message);
  font-weight: 600;
}

.tt-rail-nav,
.tt-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.68cqw;
}

.tt-rail-bottom { margin-top: auto; }

.tt-rail-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.15cqw;
  height: 2.15cqw;
  border-radius: 0.55cqw;
  color: #33312f;
}

.tt-rail-button svg {
  width: 1.12cqw;
  height: 1.12cqw;
}

.tt-rail-button .tt-rail-product-icon,
.tt-rail-button .tt-rail-product-icon * {
  fill: currentColor;
  stroke: none;
}

.tt-rail-button.is-active {
  color: var(--tt-accent);
}

.tt-rail-button.has-badge::after {
  content: "2";
  position: absolute;
  right: -0.15cqw;
  top: -0.12cqw;
  display: grid;
  place-items: center;
  min-width: 0.78cqw;
  height: 0.78cqw;
  padding: 0 0.18cqw;
  border: 0.1cqw solid var(--tt-sidebar);
  border-radius: 999px;
  background: #d84c46;
  color: white;
  font-size: 0.45cqw;
  font-weight: 600;
  line-height: 1;
}

.tt-rail-profile {
  display: grid;
  place-items: center;
  width: 2.25cqw;
  height: 2.25cqw;
  border: 0.1cqw solid rgba(29, 26, 23, 0.08);
  border-radius: 50%;
  background: #f4c434;
  color: #151515;
}

.tt-rail-profile svg {
  width: 1.15cqw;
  height: 1.15cqw;
}

.tt-task-workspace {
  display: grid;
  grid-template-columns: 44% 56%;
  min-width: 0;
  min-height: 0;
  background: var(--tt-panel);
}

.tt-task-chat,
.tt-code-workbench {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.tt-task-chat {
  border-right: 1px solid var(--tt-line);
}

.tt-task-header,
.tt-workbench-header {
  display: flex;
  align-items: center;
  height: 3.45cqw;
  min-height: 0;
  padding: 0 1.65cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-task-header h4 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: var(--tt-text-subtitle);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-task-header__snapshot,
.tt-task-header__collaborator {
  display: grid;
  place-items: center;
  width: 1.7cqw;
  height: 1.7cqw;
  color: #77736e;
}

.tt-task-header__snapshot { margin-left: 0.55cqw; }
.tt-task-header__collaborator { margin-left: auto; border-radius: 0.55cqw; background: #faf9f7; }

.tt-task-header__snapshot svg,
.tt-task-header__collaborator svg {
  width: 1cqw;
  height: 1cqw;
}

.tt-chat-scroll {
  position: absolute;
  inset: 3.45cqw 0 7.75cqw;
  overflow: hidden;
  padding: 1.55cqw 3.2cqw 0 2.05cqw;
}

.tt-chat-user {
  margin-left: auto;
  max-width: 92%;
  padding: 0.95cqw 1.05cqw;
  border-radius: 0.9cqw;
  background: #fbfbfa;
  font-size: var(--tt-text-primary);
  line-height: 1.7;
}

.tt-chat-agent {
  margin-top: 1.8cqw;
}

.tt-chat-agent__identity {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  color: #77736e;
  font-size: var(--tt-text-message);
  font-weight: 500;
}

.tt-agent-avatar {
  display: grid;
  place-items: center;
  width: 1.65cqw;
  height: 1.65cqw;
  overflow: hidden;
  border: 1px solid rgba(43, 36, 30, 0.1);
  border-radius: 50%;
  background: #f5eadc;
  color: #27231f;
}

.tt-agent-avatar svg {
  width: 1.25cqw;
  height: 1.25cqw;
  stroke-width: 1.35;
}

.tt-chat-agent__copy {
  margin-top: 0.8cqw;
  font-size: var(--tt-text-message);
  line-height: 1.7;
}

.tt-tool-trace {
  display: grid;
  gap: 0.34cqw;
  margin-top: 0.85cqw;
  color: #aaa6a0;
  font-size: var(--tt-text-meta);
  line-height: 1.5;
}

.tt-tool-trace span {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
}

.tt-tool-trace svg {
  width: 0.8cqw;
  height: 0.8cqw;
}

.tt-agent-summary {
  margin-top: 1.15cqw;
  font-size: var(--tt-text-message);
  line-height: 1.7;
}

.tt-agent-summary strong {
  display: block;
  margin-bottom: 0.3cqw;
  color: #3d3935;
  font-weight: 600;
}

.tt-agent-summary ul {
  display: grid;
  gap: 0.16cqw;
  margin: 0;
  padding: 0;
}

.tt-agent-summary li::before {
  content: "•";
  margin-right: 0.45cqw;
  color: #c4c0bb;
}

.tt-composer {
  position: absolute;
  left: 1.95cqw;
  right: 1.55cqw;
  bottom: 0.75cqw;
  height: 6.25cqw;
  overflow: hidden;
  border: 1px solid rgba(45, 40, 35, 0.08);
  border-radius: 0.85cqw;
  background: rgba(252, 251, 249, 0.96);
  box-shadow: 0 0.4cqw 1.6cqw rgba(42, 35, 29, 0.04);
}

.tt-composer__placeholder {
  padding: 0.85cqw 0.95cqw;
  color: #beb9b3;
  font-size: var(--tt-text-message);
  line-height: 1.47;
}

.tt-composer__path {
  position: absolute;
  right: 0.95cqw;
  top: 2.72cqw;
  max-width: 48%;
  overflow: hidden;
  color: #aaa59f;
  font-size: var(--tt-text-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-composer__toolbar {
  position: absolute;
  inset: auto 0.8cqw 0.48cqw;
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  color: #6f6b66;
  font-size: var(--tt-text-meta);
}

.tt-composer__tool {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  white-space: nowrap;
}

.tt-composer__tool svg { width: 0.86cqw; height: 0.86cqw; }
.tt-composer__tool.is-accent { color: #289f6c; }

.tt-composer__spacer { flex: 1; }

.tt-composer__send {
  display: grid;
  place-items: center;
  width: 1.65cqw;
  height: 1.65cqw;
  border-radius: 50%;
  background: #faf9f7;
  color: #d9d5d0;
}

.tt-composer__send svg { width: 0.85cqw; height: 0.85cqw; }

.tt-workbench-header {
  padding: 0 1cqw;
}

.tt-workbench-tabs {
  display: flex;
  align-items: center;
  gap: 0.28cqw;
}

.tt-workbench-tab {
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  height: 2.2cqw;
  padding: 0 0.8cqw;
  border-radius: 0.65cqw;
  color: #77736e;
  font-size: var(--tt-text-body);
  white-space: nowrap;
}

.tt-workbench-tab svg { width: 0.95cqw; height: 0.95cqw; }

.tt-workbench-tab.is-active {
  background: #f0eeeb;
  color: #2d2a27;
  font-weight: 500;
}

.tt-workbench-viewmodes {
  display: flex;
  align-items: center;
  gap: 0.15cqw;
  margin-left: auto;
  padding: 0.2cqw;
  border: 1px solid rgba(46, 40, 35, 0.07);
  border-radius: 0.55cqw;
  background: #faf9f7;
}

.tt-viewmode {
  display: grid;
  place-items: center;
  width: 1.5cqw;
  height: 1.5cqw;
  border-radius: 0.38cqw;
  color: #99958f;
}

.tt-viewmode svg { width: 0.8cqw; height: 0.8cqw; }
.tt-viewmode.is-active { background: #fff; color: var(--tt-accent); box-shadow: 0 0.1cqw 0.35cqw rgba(40, 34, 29, 0.08); }

.tt-code-meta {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  height: 2.75cqw;
  padding: 0 1.15cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
  color: #6f6b66;
  font-size: var(--tt-text-meta);
}

.tt-code-meta svg { width: 0.95cqw; height: 0.95cqw; color: #99958f; }
.tt-code-meta strong { font-weight: 500; }
.tt-code-meta .tt-added { color: var(--tt-green); }
.tt-code-meta .tt-removed { color: var(--tt-red); }

.tt-branch-pill {
  margin-left: 0.2cqw;
  padding: 0.18cqw 0.55cqw;
  border-radius: 999px;
  background: #faf9f7;
  color: #77736e;
  font-size: var(--tt-text-caption);
}

.tt-code-layout {
  display: grid;
  grid-template-columns: 46% 54%;
  height: calc(100% - 6.2cqw);
  min-height: 0;
}

.tt-code-sidebar {
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(42, 38, 33, 0.12);
  background: #fbfbfa;
}

.tt-code-sidebar__title {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  height: 2.05cqw;
  padding: 0 1.1cqw;
  color: #8d8983;
  font-size: var(--tt-text-meta);
  font-weight: 500;
}

.tt-code-sidebar__title svg { width: 0.82cqw; height: 0.82cqw; }

.tt-file-search {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  height: 2.05cqw;
  margin: 0 0.75cqw;
  padding: 0 0.7cqw;
  border-radius: 0.45cqw;
  background: #f5f3f1;
  color: #aaa59f;
  font-size: var(--tt-text-meta);
}

.tt-file-search svg { width: 0.85cqw; height: 0.85cqw; }

.tt-file-tools {
  display: flex;
  align-items: center;
  height: 2.1cqw;
  padding: 0 0.95cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
  color: #9a9690;
}

.tt-file-tools span {
  display: grid;
  place-items: center;
  width: 1.5cqw;
  height: 1.5cqw;
}

.tt-file-tools svg { width: 0.82cqw; height: 0.82cqw; }
.tt-file-tools__spacer { flex: 1; }

.tt-file-tree {
  padding: 0.6cqw 0.65cqw 0.9cqw;
  color: #5c5955;
  font-size: var(--tt-text-meta);
}

.tt-tree-row {
  display: flex;
  align-items: center;
  height: 1.65cqw;
  min-width: 0;
  padding-right: 0.45cqw;
  border-radius: 0.35cqw;
}

.tt-tree-row.is-current {
  border: 1px solid rgba(221, 122, 32, 0.28);
  background: rgba(221, 122, 32, 0.075);
}

.tt-tree-indent-1 { padding-left: 1.25cqw; }
.tt-tree-indent-2 { padding-left: 2.25cqw; }

.tt-tree-caret {
  display: grid;
  place-items: center;
  width: 1cqw;
  color: #aaa59f;
}

.tt-tree-caret svg { width: 0.65cqw; height: 0.65cqw; }

.tt-tree-icon {
  position: relative;
  width: 0.82cqw;
  height: 0.67cqw;
  margin-right: 0.45cqw;
  border-radius: 0.12cqw;
  background: #8da7ad;
}

.tt-tree-icon.is-folder::before {
  content: "";
  position: absolute;
  left: 0.08cqw;
  top: -0.2cqw;
  width: 0.35cqw;
  height: 0.22cqw;
  border-radius: 0.1cqw 0.1cqw 0 0;
  background: inherit;
}

.tt-tree-icon.is-file {
  width: 0.62cqw;
  height: 0.78cqw;
  border: 0.08cqw solid #83a1aa;
  background: transparent;
}

.tt-tree-icon.is-code { border-color: #e88a51; }
.tt-tree-icon.is-doc { border-color: #4d8ecf; }
.tt-tree-row strong { color: #cf7d13; font-weight: 600; }

.tt-code-editor {
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

.tt-editor-toolbar {
  display: flex;
  align-items: center;
  height: 2.25cqw;
  padding: 0 0.85cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
  color: #9d9993;
  font-size: var(--tt-text-caption);
}

.tt-editor-breadcrumb {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-editor-breadcrumb strong {
  color: #56524e;
  font-style: italic;
  font-weight: 600;
}

.tt-save-action {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  margin-right: 0.65cqw;
  padding: 0.25cqw 0.48cqw;
  border-radius: 0.35cqw;
  background: #fff1e5;
  color: #dc781d;
  font-size: var(--tt-text-caption);
}

.tt-save-action svg,
.tt-editor-actions svg { width: 0.8cqw; height: 0.8cqw; }

.tt-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  color: #a29e98;
}

.tt-code-lines {
  height: calc(100% - 2.25cqw);
  overflow: hidden;
  padding: 0.7cqw 0 1cqw;
  counter-reset: tt-code-line;
  background: linear-gradient(90deg, #fbfbfa 0, #fbfbfa 3.2cqw, #fff 3.2cqw);
  color: #333;
  font: var(--tt-text-caption)/1.58 var(--tt-font-mono);
  font-variant-ligatures: none;
  tab-size: 2;
}

.tt-code-line {
  min-height: 1.08cqw;
  padding: 0 0.55cqw 0 3.6cqw;
  white-space: pre;
}

.tt-code-line::before {
  content: counter(tt-code-line);
  counter-increment: tt-code-line;
  display: inline-block;
  width: 2.4cqw;
  margin-left: -3.05cqw;
  margin-right: 0.65cqw;
  color: #2f7ea2;
  text-align: right;
}

.tt-tok-tag { color: #ca201c; }
.tt-tok-attr { color: #0645cc; }
.tt-tok-string { color: #003dbb; }
.tt-tok-comment { color: #168221; }
.tt-tok-prop { color: #ba1613; }
.tt-tok-value { color: #0055c8; }
.tt-tok-muted { color: #77736e; }

/* ── 任务共享与节点分叉 ─────────────────────────────────────────── */

.tt-product-demo--handoff .tt-rail-nav .has-badge::after {
  content: "7";
}

.tt-handoff-workspace {
  display: grid;
  grid-template-columns: 18cqw 42.5cqw minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.tt-im-sidebar,
.tt-direct-chat,
.tt-shared-task {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tt-im-sidebar {
  padding: 0.65cqw 0.38cqw;
  border-right: 1px solid var(--tt-line);
  background: #fafafa;
}

.tt-im-sidebar__actions {
  display: grid;
  gap: 0.28cqw;
  padding: 0 0.2cqw 0.55cqw;
  color: #4e4b47;
  font-size: var(--tt-text-message);
  font-weight: 500;
}

.tt-im-sidebar__actions span {
  display: flex;
  align-items: center;
  gap: 0.58cqw;
  height: 1.72cqw;
  padding: 0 0.45cqw;
}

.tt-im-sidebar__actions svg,
.tt-im-search svg {
  width: 1cqw;
  height: 1cqw;
  color: #6c6863;
}

.tt-im-search {
  display: flex;
  align-items: center;
  gap: 0.48cqw;
  height: 2.15cqw;
  padding: 0 0.62cqw;
  border-radius: 0.55cqw;
  background: rgba(38, 34, 30, 0.035);
  color: #aaa6a0;
  font-size: var(--tt-text-message);
}

.tt-im-section-title {
  padding: 0.55cqw 0.45cqw 0.25cqw;
  color: #54504c;
  font-size: var(--tt-text-primary);
  font-weight: 600;
}

.tt-im-conversation {
  display: grid;
  grid-template-columns: 2.55cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55cqw;
  min-height: 3.65cqw;
  padding: 0.48cqw 0.45cqw;
  border-radius: 0.55cqw;
  color: #69645f;
}

.tt-im-conversation.is-current {
  background: rgba(42, 38, 33, 0.045);
}

.tt-person-avatar {
  display: grid;
  place-items: center;
  width: 2.35cqw;
  height: 2.35cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-size: var(--tt-text-primary);
  font-style: normal;
  font-weight: 600;
}

.tt-person-avatar--yellow { background: #cfbf3f; }
.tt-person-avatar--cyan { background: #48b8c1; }

.tt-im-conversation__body {
  display: grid;
  min-width: 0;
  gap: 0.12cqw;
}

.tt-im-conversation__body strong {
  overflow: hidden;
  color: #34312e;
  font-size: var(--tt-text-message);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-im-conversation__body small {
  overflow: hidden;
  color: #a19d98;
  font-size: var(--tt-text-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-im-conversation time {
  align-self: start;
  padding-top: 0.12cqw;
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
}

.tt-direct-chat {
  position: relative;
  border-right: 1px solid var(--tt-line);
  background: #fff;
}

.tt-direct-chat__header {
  display: flex;
  align-items: center;
  gap: 0.62cqw;
  height: 3.45cqw;
  padding: 0 0.85cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-direct-chat__header .tt-person-avatar {
  width: 2.3cqw;
  height: 2.3cqw;
}

.tt-direct-chat__header > span:nth-child(2) {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.tt-direct-chat__header strong {
  font-size: var(--tt-text-primary);
  font-weight: 600;
}

.tt-direct-chat__header small {
  color: #8f8a84;
  font-size: var(--tt-text-caption);
}

.tt-direct-chat__header > svg {
  width: 1.05cqw;
  height: 1.05cqw;
  margin-left: auto;
  color: #99948e;
}

.tt-direct-chat__date {
  padding-top: 0.95cqw;
  color: #aaa6a0;
  font-size: var(--tt-text-caption);
  text-align: center;
}

.tt-handoff-chat-flow {
  padding: 0.05cqw 1.05cqw 5.35cqw;
}

.tt-handoff-chat-message {
  display: flex;
  align-items: flex-end;
  gap: 0.48cqw;
  margin-top: 0.62cqw;
}

.tt-handoff-chat-message > .tt-person-avatar {
  width: 1.7cqw;
  height: 1.7cqw;
  font-size: var(--tt-text-caption);
}

.tt-handoff-chat-message__body {
  display: grid;
  max-width: 27cqw;
  gap: 0.2cqw;
}

.tt-handoff-chat-message__meta {
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
}

.tt-handoff-chat-message__meta strong {
  color: #77726c;
  font-weight: 500;
}

.tt-handoff-chat-message__meta time {
  font: inherit;
}

.tt-handoff-chat-message__bubble {
  display: block;
  padding: 0.52cqw 0.68cqw;
  border-radius: 0.58cqw 0.58cqw 0.58cqw 0.18cqw;
  background: #f6f5f3;
  color: #514d48;
  font-size: var(--tt-text-message);
  line-height: 1.55;
}

.tt-handoff-chat-message--outgoing {
  justify-content: flex-end;
}

.tt-handoff-chat-message--outgoing .tt-handoff-chat-message__body {
  max-width: 24cqw;
  justify-items: end;
}

.tt-handoff-chat-message--outgoing .tt-handoff-chat-message__bubble {
  border-radius: 0.58cqw 0.58cqw 0.18cqw 0.58cqw;
  background: #f8f1e9;
}

.tt-handoff-chat-flow .tt-share-card {
  width: 23.5cqw;
  margin: 0.68cqw 0 0 2.18cqw;
}

.tt-share-card {
  width: 22cqw;
  margin: 0.65cqw 1.05cqw 0 auto;
  overflow: hidden;
  border: 1px solid rgba(42, 38, 33, 0.08);
  border-radius: 0.62cqw;
  background: #fff;
}

.tt-share-card__eyebrow,
.tt-share-card__relation,
.tt-share-tier,
.tt-share-card__action {
  display: flex;
  align-items: center;
}

.tt-share-card__eyebrow {
  gap: 0.4cqw;
  padding: 0.7cqw 0.85cqw 0;
}

.tt-share-card__eyebrow > span {
  display: flex;
  align-items: center;
  gap: 0.36cqw;
  color: var(--tt-accent);
  font-size: var(--tt-text-caption);
  font-weight: 600;
}

.tt-share-card__eyebrow svg,
.tt-share-tier svg,
.tt-share-card__action svg,
.tt-shared-task__tabs svg,
.tt-fork-task-action svg,
.tt-message-actions svg {
  width: 0.88cqw;
  height: 0.88cqw;
}

.tt-share-card__eyebrow em {
  margin-left: auto;
  padding: 0.16cqw 0.42cqw;
  border-radius: 0.28cqw;
  background: rgba(42, 38, 33, 0.04);
  color: #8f8a84;
  font-size: var(--tt-text-micro);
  font-style: normal;
}

.tt-share-card h4 {
  margin: 0;
  padding: 0.38cqw 0.85cqw 0;
  color: #302d29;
  font-size: var(--tt-text-primary);
  font-weight: 600;
  line-height: 1.45;
}

.tt-share-card__relation {
  gap: 0.4cqw;
  padding: 0.45cqw 0.85cqw 0;
  color: #7e7973;
  font-size: var(--tt-text-caption);
}

.tt-share-card__relation .tt-person-avatar {
  width: 1.35cqw;
  height: 1.35cqw;
  font-size: var(--tt-text-caption);
}

.tt-share-tier {
  gap: 0.32cqw;
  padding: 0.4cqw 0.85cqw 0.65cqw;
  color: #86817b;
  font-size: var(--tt-text-caption);
}

.tt-share-card__action {
  min-height: 2.15cqw;
  justify-content: flex-end;
  padding: 0 0.85cqw;
  border-top: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-share-card__action span {
  display: flex;
  align-items: center;
  gap: 0.32cqw;
  color: var(--tt-accent);
  font-size: var(--tt-text-caption);
  font-weight: 500;
}

.tt-im-composer {
  position: absolute;
  left: 1.05cqw;
  right: 1.05cqw;
  bottom: 0.8cqw;
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  height: 4cqw;
  padding: 0 0.75cqw;
  border: 1px solid rgba(42, 38, 33, 0.08);
  border-radius: 0.7cqw;
  color: #b3afa9;
  font-size: var(--tt-text-message);
}

.tt-im-composer > svg {
  width: 1cqw;
  height: 1cqw;
}

.tt-im-composer > svg:last-child { opacity: 0.45; }

.tt-im-composer small {
  margin-left: auto;
  color: #99948e;
  font-size: var(--tt-text-caption);
}

.tt-shared-task {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.tt-shared-task__tabs {
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  height: 3.1cqw;
  padding: 0 0.85cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
  color: #8f8a84;
  font-size: var(--tt-text-caption);
}

.tt-shared-task__tabs span,
.tt-shared-task__tabs strong {
  display: flex;
  align-items: center;
  gap: 0.34cqw;
  min-width: 0;
}

.tt-shared-task__tabs strong {
  overflow: hidden;
  padding: 0.48cqw 0.65cqw;
  border-radius: 0.45cqw;
  background: rgba(42, 38, 33, 0.045);
  color: #3b3834;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-shared-task__head {
  display: flex;
  align-items: center;
  gap: 0.58cqw;
  min-height: 4.35cqw;
  padding: 0 0.85cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-shared-task__mark {
  display: grid;
  place-items: center;
  width: 1.7cqw;
  height: 1.7cqw;
  flex: 0 0 auto;
  border-radius: 0.5cqw;
  background: #fff5eb;
  color: var(--tt-accent);
}

.tt-shared-task__mark svg {
  width: 0.95cqw;
  height: 0.95cqw;
}

.tt-shared-task__identity {
  display: grid;
  min-width: 0;
  gap: 0.18cqw;
}

.tt-shared-task__identity strong {
  overflow: hidden;
  font-size: var(--tt-text-message);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-shared-task__identity small {
  display: flex;
  align-items: center;
  gap: 0.35cqw;
  color: #8f8a84;
  font-size: var(--tt-text-micro);
}

.tt-shared-task__identity i {
  width: 0.35cqw;
  height: 0.35cqw;
  border-radius: 50%;
  background: var(--tt-green);
}

.tt-fork-task-action {
  display: flex;
  align-items: center;
  gap: 0.35cqw;
  margin-left: auto;
  padding: 0.48cqw 0.62cqw;
  border-radius: 0.48cqw;
  background: rgba(221, 122, 32, 0.085);
  color: #cb6d18;
  font-size: var(--tt-text-caption);
  font-weight: 500;
  white-space: nowrap;
}

.tt-shared-transcript {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.8cqw 0.9cqw 1.4cqw;
}

.tt-shared-node {
  margin-bottom: 0.8cqw;
  color: #4b4743;
  font-size: var(--tt-text-meta);
  line-height: 1.62;
}

.tt-shared-node p { margin: 0; }

.tt-shared-node small {
  display: block;
  margin-top: 0.25cqw;
  color: #aaa6a0;
  font-size: var(--tt-text-caption);
}

.tt-step-summary {
  display: flex;
  align-items: center;
  gap: 0.32cqw;
  margin-top: 0.34cqw;
  color: #7f7a74;
  font-size: var(--tt-text-caption);
}

.tt-step-summary svg {
  width: 0.78cqw;
  height: 0.78cqw;
}

.tt-artifact-row {
  display: flex;
  align-items: center;
  min-height: 2.1cqw;
  margin-top: 0.4cqw;
  padding: 0 0.6cqw;
  border-radius: 0.45cqw;
  background: rgba(42, 38, 33, 0.035);
  font-size: var(--tt-text-caption);
}

.tt-artifact-row span {
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-artifact-row svg {
  width: 0.85cqw;
  height: 0.85cqw;
  color: #76716b;
}

.tt-artifact-row em {
  margin-left: auto;
  color: var(--tt-accent);
  font-size: var(--tt-text-caption);
  font-style: normal;
}

.tt-message-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.48cqw;
  min-height: 1.55cqw;
  margin-top: 0.25cqw;
  color: #9b9690;
}

.tt-message-actions span {
  display: flex;
  align-items: center;
  gap: 0.32cqw;
  padding: 0.3cqw 0.48cqw;
  border-radius: 0.38cqw;
  color: #cb6d18;
  font-size: var(--tt-text-caption);
  font-weight: 500;
}

.tt-shared-node--final {
  color: #35322f;
  font-weight: 500;
}

.tt-shared-node--final ul {
  display: grid;
  gap: 0.16cqw;
  margin: 0.35cqw 0 0;
  padding: 0;
  color: #5e5954;
  font-size: var(--tt-text-caption);
  font-weight: 400;
}

.tt-shared-node--final li::before {
  content: "•";
  margin-right: 0.35cqw;
  color: #b6b1aa;
}

/* ── AI 分身工作台 ─────────────────────────────────────────────── */

.tt-agent-settings-workspace {
  display: grid;
  grid-template-columns: 17.2cqw minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.tt-agent-sidebar {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.65cqw 0.4cqw;
  border-right: 1px solid var(--tt-line);
  background: #fafaf9;
}

.tt-agent-sidebar__primary {
  display: grid;
  gap: 0.12cqw;
  padding-bottom: 0.5cqw;
}

.tt-agent-sidebar__action {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  min-width: 0;
  height: 2.25cqw;
  padding: 0 0.65cqw;
  border-radius: 0.42cqw;
  color: #46423e;
  font-size: var(--tt-text-message);
  font-weight: 500;
}

.tt-agent-sidebar__action svg {
  width: 1.02cqw;
  height: 1.02cqw;
  flex: 0 0 auto;
  stroke-width: 1.65;
}

.tt-agent-sidebar__title {
  padding: 0.4cqw 0.65cqw 0.48cqw;
  color: #65615c;
  font-size: var(--tt-text-meta);
  font-weight: 600;
}

.tt-agent-list {
  display: grid;
  gap: 0.12cqw;
}

.tt-agent-list-item {
  display: grid;
  grid-template-columns: 2.55cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.62cqw;
  min-width: 0;
  min-height: 3.88cqw;
  padding: 0.35cqw 0.48cqw;
  border-radius: 0.55cqw;
  color: #4b4742;
}

.tt-agent-list-item.is-active {
  background: rgba(45, 41, 37, 0.055);
}

.tt-agent-list-item img,
.tt-agent-identity-card img {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.tt-agent-list-item__copy,
.tt-agent-identity-card__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.tt-agent-list-item__copy strong {
  overflow: hidden;
  color: #37332f;
  font-size: var(--tt-text-message);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-list-item__copy small,
.tt-agent-list-item time {
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
  font-weight: 400;
  line-height: 1.45;
}

.tt-agent-list-item time {
  align-self: start;
  padding-top: 0.3cqw;
  white-space: nowrap;
}

.tt-agent-canvas {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1.05cqw 1.1cqw;
  background: #fff;
}

.tt-agent-overview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 5.45cqw minmax(0, 1fr);
  gap: 0.72cqw;
  width: 100%;
  height: 100%;
}

.tt-agent-config-card,
.tt-agent-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(42, 38, 33, 0.075);
  border-radius: 0.72cqw;
  background: rgba(250, 250, 249, 0.4);
}

.tt-agent-config-card {
  grid-column: span 3;
  padding: 0.82cqw 0.9cqw;
}

.tt-agent-identity-card {
  display: grid;
  grid-template-columns: 3.15cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72cqw;
}

.tt-agent-identity-card__copy strong {
  overflow: hidden;
  color: #37332f;
  font-size: var(--tt-text-subtitle);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-identity-card__copy small {
  align-self: flex-start;
  margin-top: 0.28cqw;
  padding: 0.07cqw 0.32cqw;
  border-radius: 0.25cqw;
  background: rgba(221, 122, 32, 0.09);
  color: var(--tt-accent);
  font-size: var(--tt-text-micro);
  line-height: 1.45;
}

.tt-agent-config-card__title,
.tt-agent-pane__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42cqw;
  color: #403c37;
  font-size: var(--tt-text-message);
}

.tt-agent-config-card__title svg,
.tt-agent-pane__title svg {
  width: 1.02cqw;
  height: 1.02cqw;
  flex: 0 0 auto;
  color: var(--tt-accent);
  stroke-width: 1.75;
}

.tt-agent-config-card__title strong,
.tt-agent-pane__title strong {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-config-card p,
.tt-agent-pane__header p {
  overflow: hidden;
  margin: 0.42cqw 1.25cqw 0 0;
  color: #96918b;
  font-size: var(--tt-text-meta);
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-card-action {
  position: absolute;
  right: 0.78cqw;
  top: 0.78cqw;
  width: 0.9cqw !important;
  height: 0.9cqw !important;
  color: #99948e;
  stroke-width: 1.65 !important;
}

.tt-agent-memory-pane {
  grid-column: span 7;
}

.tt-agent-recent-pane {
  grid-column: span 5;
}

.tt-agent-pane__header {
  height: 4.55cqw;
  padding: 0.88cqw 1cqw 0.72cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.06);
}

.tt-agent-memory-toolbar {
  display: flex;
  align-items: center;
  gap: 0.18cqw;
  height: 2.65cqw;
  padding: 0 0.92cqw;
  color: #817c76;
  font-size: var(--tt-text-meta);
}

.tt-agent-memory-toolbar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25cqw;
  padding: 0.28cqw 0.48cqw;
  border-radius: 0.35cqw;
  white-space: nowrap;
}

.tt-agent-memory-toolbar > span.is-active {
  background: rgba(42, 38, 33, 0.055);
  color: var(--tt-accent);
  font-weight: 600;
}

.tt-agent-memory-toolbar svg {
  width: 0.78cqw;
  height: 0.78cqw;
}

.tt-agent-memory-toolbar__spacer {
  min-width: 0;
  flex: 1;
}

.tt-agent-memory-distill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.15cqw;
  margin: 0 0.95cqw;
  padding: 0 0.72cqw;
  border: 1px solid rgba(42, 38, 33, 0.07);
  border-radius: 0.42cqw;
  color: #96918b;
  font-size: var(--tt-text-meta);
}

.tt-agent-memory-distill > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.32cqw;
  color: #67625d;
  font-weight: 500;
}

.tt-agent-memory-distill svg {
  width: 0.86cqw;
  height: 0.86cqw;
}

.tt-agent-memory-copy {
  height: calc(100% - 10.35cqw);
  overflow: hidden;
  padding: 0.68cqw 0.95cqw 1cqw;
}

.tt-agent-memory-copy section {
  padding: 0.65cqw 0 0.72cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-agent-memory-copy section:first-child {
  padding-top: 0;
}

.tt-agent-memory-copy strong {
  color: #4a4641;
  font-size: var(--tt-text-message);
  font-weight: 600;
}

.tt-agent-memory-copy p {
  margin: 0.38cqw 0 0;
  color: #68635e;
  font-size: var(--tt-text-meta);
  line-height: 1.65;
}

.tt-agent-recent-list {
  height: calc(100% - 4.55cqw);
  overflow: hidden;
}

.tt-agent-recent-list section {
  padding: 0.72cqw 0.95cqw 0.66cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.055);
}

.tt-agent-recent-list strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35cqw;
  overflow: hidden;
  color: #4b4742;
  font-size: var(--tt-text-meta);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-recent-list strong svg {
  width: 0.82cqw;
  height: 0.82cqw;
  flex: 0 0 auto;
  color: #9d9892;
}

.tt-agent-recent-list p {
  overflow: hidden;
  margin: 0.26cqw 0 0;
  color: #aaa6a0;
  font-size: var(--tt-text-caption);
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-agent-recent-list small {
  display: inline-block;
  margin-top: 0.3cqw;
  padding: 0.06cqw 0.36cqw;
  border-radius: 999px;
  background: rgba(42, 38, 33, 0.05);
  color: #8f8a84;
  font-size: var(--tt-text-micro);
  line-height: 1.45;
}

@media (prefers-reduced-motion: no-preference) {
  .tt-product-demo .tt-shell-status__item::after {
    animation: tt-status-breathe 2.6s ease-in-out infinite;
  }

  /*
   * 产品组件进入约三分之一视口后，用真实的工作步骤建立节奏：
   * 回复落位 → 工具调用 → 结论 → 文件定位与保存。
   * 放大克隆没有 .feat__media.is-demo-active 祖先，因此不重播阶段动画，
   * 只保留在线状态与代码光标这种环境微动。
   */
  .feat__media .tt-product-demo--agent-execution .tt-chat-agent__copy,
  .feat__media .tt-product-demo--agent-execution .tt-tool-trace span,
  .feat__media .tt-product-demo--agent-execution .tt-agent-summary strong,
  .feat__media .tt-product-demo--agent-execution .tt-agent-summary li {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }

  .feat__media .tt-product-demo--agent-execution .tt-tree-row.is-current {
    background: transparent;
    box-shadow: 0 0 0 rgba(221, 122, 32, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-chat-agent__copy {
    animation: tt-demo-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-tool-trace span {
    animation: tt-demo-step-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-tool-trace span:nth-child(1) {
    animation-delay: 460ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-tool-trace span:nth-child(2) {
    animation-delay: 580ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-tool-trace span:nth-child(3) {
    animation-delay: 700ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary strong,
  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary li {
    animation: tt-demo-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary strong {
    animation-delay: 880ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary li:nth-child(1) {
    animation-delay: 1020ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary li:nth-child(2) {
    animation-delay: 1120ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-agent-summary li:nth-child(3) {
    animation-delay: 1220ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-tree-row.is-current {
    animation: tt-demo-file-focus 760ms ease-out 1180ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-execution .tt-save-action {
    animation: tt-demo-save-confirm 720ms ease-out 1480ms both;
  }

  .tt-product-demo--agent-execution .tt-code-line:nth-child(14)::after {
    content: "";
    display: inline-block;
    width: 0.08cqw;
    height: 0.72cqw;
    margin-left: 0.18cqw;
    background: var(--tt-accent);
    vertical-align: -0.08cqw;
    animation: tt-demo-caret 1.1s steps(1, end) 1.7s infinite;
  }

  .feat__media .tt-product-demo--agent-settings .tt-agent-list-item,
  .feat__media .tt-product-demo--agent-settings .tt-agent-config-card,
  .feat__media .tt-product-demo--agent-settings .tt-agent-pane {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item,
  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-config-card,
  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-pane {
    animation: tt-demo-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item:nth-child(1) {
    animation-delay: 120ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item:nth-child(2) {
    animation-delay: 190ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item:nth-child(3) {
    animation-delay: 260ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item:nth-child(4) {
    animation-delay: 330ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item:nth-child(5) {
    animation-delay: 400ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-list-item.is-active img {
    animation: tt-agent-avatar-focus 720ms ease-out 520ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-config-card:nth-child(1) {
    animation-delay: 460ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-config-card:nth-child(2) {
    animation-delay: 560ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-config-card:nth-child(3) {
    animation-delay: 660ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-config-card:nth-child(4) {
    animation-delay: 760ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-memory-pane {
    animation-delay: 900ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-recent-pane {
    animation-delay: 1020ms;
  }

  .feat__media.is-demo-active .tt-product-demo--agent-settings .tt-agent-skill-card .tt-agent-config-card__title svg {
    animation: tt-agent-skill-focus 820ms ease-out 1180ms both;
  }

  .feat__media .tt-product-demo--handoff .tt-share-card,
  .feat__media .tt-product-demo--handoff .tt-handoff-chat-message,
  .feat__media .tt-product-demo--handoff .tt-shared-task__head,
  .feat__media .tt-product-demo--handoff .tt-shared-node,
  .feat__media .tt-product-demo--handoff .tt-fork-task-action,
  .feat__media .tt-product-demo--handoff .tt-message-actions {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-handoff-chat-stage-1 {
    animation: tt-demo-step-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-share-card {
    animation: tt-demo-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 340ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-handoff-chat-stage-2 {
    animation: tt-demo-step-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 560ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-handoff-chat-stage-3 {
    animation: tt-demo-step-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 760ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-task__head {
    animation: tt-demo-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 980ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-node {
    animation: tt-demo-step-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-node:nth-child(1) {
    animation-delay: 1160ms;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-node:nth-child(2) {
    animation-delay: 1320ms;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-node:nth-child(3) {
    animation-delay: 1480ms;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-shared-node:nth-child(4) {
    animation-delay: 1640ms;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-fork-task-action {
    animation: tt-demo-step-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 1800ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-message-actions {
    animation: tt-demo-step-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1) 1920ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff .tt-message-actions span {
    animation: tt-handoff-fork-focus 760ms ease-out 2080ms both;
  }

  .tt-product-demo--handoff .tt-shared-task__identity i {
    animation: tt-status-breathe 2.4s ease-in-out infinite;
  }
}

@keyframes tt-status-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes tt-demo-step-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tt-demo-file-focus {
  0% {
    background: transparent;
    box-shadow: 0 0 0 rgba(221, 122, 32, 0);
  }
  48% {
    background: rgba(221, 122, 32, 0.12);
    box-shadow: 0 0 0.8cqw rgba(221, 122, 32, 0.12);
  }
  100% {
    background: rgba(221, 122, 32, 0.075);
    box-shadow: 0 0 0 rgba(221, 122, 32, 0);
  }
}

@keyframes tt-demo-save-confirm {
  0%, 100% {
    background: #fff1e5;
    transform: translate3d(0, 0, 0);
  }
  45% {
    background: #ffe3ca;
    transform: translate3d(0, -0.08cqw, 0);
  }
}

@keyframes tt-demo-caret {
  0%, 46% { opacity: 0.9; }
  47%, 100% { opacity: 0; }
}

@keyframes tt-agent-avatar-focus {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(221, 122, 32, 0);
    transform: scale(1);
  }
  48% {
    box-shadow: 0 0 0 0.22cqw rgba(221, 122, 32, 0.14);
    transform: scale(1.035);
  }
}

@keyframes tt-agent-skill-focus {
  0%, 100% {
    color: var(--tt-accent);
    transform: scale(1);
  }
  50% {
    color: #ef9b42;
    transform: scale(1.16) rotate(-4deg);
  }
}

@keyframes tt-handoff-fork-focus {
  0%, 100% {
    background: transparent;
    transform: translate3d(0, 0, 0);
  }
  48% {
    background: rgba(221, 122, 32, 0.1);
    transform: translate3d(0, -0.06cqw, 0);
  }
}