/* 首页产品演示 V2 · 工作交接与团队项目
 *
 * 只扩展共享 V2 外壳，不重定义 .tt-product-demo--v2、.tt-v2-sidebar、
 * .tt-v2-main、.tt-v2-detail 或 .tt-v2-result 的全局契约。
 */

.tt-product-demo--handoff-v2,
.tt-product-demo--project-v2 {
  --tt-module-blue: #397bd6;
  --tt-module-blue-soft: #eaf2fd;
  --tt-module-blue-faint: #f5f8fd;
  --tt-module-ink: #252a30;
  --tt-module-muted: #6f7781;
  --tt-module-faint: #98a0aa;
  --tt-module-line: rgba(49, 65, 87, 0.075);
  --tt-module-green: #3c9567;
  color: var(--tt-module-ink);
}

/* ── 任务共享：私聊邀请 → 确认参与 → 实时原任务 ── */

.tt-session-share-workspace {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0.6rem;
  padding: 0.6rem;
  background: #f1f4f7;
}

.tt-session-share-chat,
.tt-session-share-detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #fff;
}

.tt-session-share-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.tt-session-share-chat__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  background: #fafafa;
}

.tt-session-share-chat__header > i,
.tt-session-share-message > i {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #5f7184;
  background: #e5edf4;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 680;
}

.tt-session-share-chat__header span,
.tt-session-share-card__permission,
.tt-session-share-card__notice,
.tt-session-share-detail__header > span,
.tt-session-share-run header > span,
.tt-session-share-boundary > span,
.tt-session-share-transfer > span {
  display: grid;
  min-width: 0;
}

.tt-session-share-chat__header strong { font-size: 0.72rem; }
.tt-session-share-chat__header em { color: #a1a7ae; font-style: normal; }

.tt-session-share-chat__body {
  min-height: 0;
  overflow: auto;
  padding: 0.85rem;
}

.tt-session-share-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.tt-session-share-message p {
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-radius: 0.2rem 0.65rem 0.65rem 0.65rem;
  color: #606974;
  background: #f2f4f6;
  line-height: 1.52;
}

.tt-session-share-card {
  width: min(100%, 22rem);
  margin: 0.7rem auto 0;
  overflow: hidden;
  border-radius: 0.78rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e8ebee;
}

.tt-session-share-card > header,
.tt-session-share-card > footer,
.tt-session-share-detail__header,
.tt-session-share-run > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.tt-session-share-card > header { padding: 0.75rem 0.8rem 0.35rem; }
.tt-session-share-card > header > span { display: inline-flex; align-items: center; gap: 0.3rem; color: #3374c5; font-size: 0.58rem; font-weight: 680; }
.tt-session-share-card > header svg { width: 0.78rem; height: 0.78rem; stroke: currentColor; }
.tt-session-share-card > header em { padding: 0.22rem 0.42rem; border-radius: 999px; color: #93652b; background: #fff0d9; font-size: 0.5rem; font-style: normal; }
.tt-session-share-card > h4 { margin: 0; padding: 0.15rem 0.8rem; font-size: 0.76rem; line-height: 1.4; }
.tt-session-share-card > p { margin: 0; padding: 0.1rem 0.8rem 0.55rem; color: #8c939b; font-size: 0.56rem; }

.tt-session-share-card__permission {
  gap: 0.18rem;
  margin: 0 0.8rem;
  padding: 0.55rem 0.62rem;
  border-radius: 0.55rem;
  background: #f3f6f9;
}

.tt-session-share-card__permission b { color: #3b668f; font-size: 0.56rem; }
.tt-session-share-card__permission span { color: #7d8791; font-size: 0.52rem; line-height: 1.42; }

.tt-session-share-card__notice {
  gap: 0.2rem;
  margin: 0.5rem 0.8rem 0.65rem;
  padding: 0.58rem 0.62rem;
  border-radius: 0.55rem;
  background: #edf4fb;
}

.tt-session-share-card__notice strong { font-size: 0.56rem; }
.tt-session-share-card__notice small { line-height: 1.4; }
.tt-session-share-card > footer { padding: 0.62rem 0.8rem; background: #fafafa; }
.tt-session-share-card > footer > span { color: #969da5; font-size: 0.5rem; }
.tt-session-share-card > footer > b { padding: 0.4rem 0.58rem; border-radius: 0.45rem; color: #fff; background: #3f7fd2; font-size: 0.52rem; }

.tt-session-share-chat__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.75rem 0.7rem;
  padding: 0.62rem 0.7rem;
  border-radius: 0.6rem;
  color: #a1a7ae;
  background: #f4f5f6;
  font-size: 0.54rem;
}

.tt-session-share-chat__composer b { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: #fff; background: #79a7df; }

.tt-session-share-detail {
  padding: 0.85rem;
  background: #f8fafc;
}

.tt-session-share-detail__header { align-items: flex-start; }
.tt-session-share-detail__header h4 { margin: 0.18rem 0 0; font-size: 0.78rem; line-height: 1.35; }
.tt-session-share-detail__header > em { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.28rem 0.42rem; border-radius: 999px; color: #407a60; background: #e3f1e9; font-size: 0.5rem; font-style: normal; white-space: nowrap; }
.tt-session-share-detail__header > em i,
.tt-session-share-run > header em i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: #55a978; }

.tt-session-share-detail__permission {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.48rem 0.58rem;
  border-radius: 0.5rem;
  color: #65717d;
  background: #eef3f8;
  font-size: 0.52rem;
}
.tt-session-share-detail__permission b { padding: 0.22rem 0.35rem; border-radius: 0.3rem; color: #326cae; background: #dfeaf7; white-space: nowrap; }

.tt-session-share-run {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border-radius: 0.65rem;
  background: #fff;
}
.tt-session-share-run > header strong { font-size: 0.62rem; }
.tt-session-share-run > header small { margin-top: 0.12rem; }
.tt-session-share-run > header em { display: inline-flex; align-items: center; gap: 0.28rem; color: #41785f; font-size: 0.5rem; font-style: normal; }
.tt-session-share-run ol { display: grid; gap: 0.28rem; margin: 0.6rem 0; padding: 0; list-style: none; }
.tt-session-share-run li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.42rem; align-items: center; padding: 0.38rem 0.44rem; border-radius: 0.42rem; background: #f5f7f8; }
.tt-session-share-run li > i { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; color: #52836d; background: #e3f0e9; font-size: 0.48rem; font-style: normal; }
.tt-session-share-run li span { display: grid; gap: 0.05rem; }
.tt-session-share-run li b { font-size: 0.54rem; }
.tt-session-share-run li.is-running { background: #eaf2fb; }
.tt-session-share-run li.is-running > i { color: #3b74b4; background: #d9e8f8; }
.tt-session-share-run__resources { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tt-session-share-run__resources span { padding: 0.3rem 0.42rem; border-radius: 0.35rem; color: #5f6f7d; background: #edf1f4; font-size: 0.48rem; }

.tt-session-share-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  margin: 0.55rem 0 0;
  padding: 0.58rem;
  border-radius: 0.55rem;
  color: #5c6f66;
  background: #ebf3ef;
}
.tt-session-share-boundary > i { font-style: normal; }
.tt-session-share-boundary b { font-size: 0.52rem; }
.tt-session-share-boundary small { margin-top: 0.15rem; line-height: 1.4; }

.tt-session-share-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 0.55rem;
  padding: 0.58rem;
  border-radius: 0.55rem;
  background: #f2f0ec;
}
.tt-session-share-transfer b { margin-top: 0.12rem; color: #6f6153; font-size: 0.54rem; }
.tt-session-share-transfer p { max-width: 55%; margin: 0; color: #91887f; font-size: 0.48rem; line-height: 1.4; text-align: right; }

@media (max-width: 680px) {
  .tt-session-share-workspace { grid-template-columns: minmax(0, 1fr); }
  .tt-session-share-chat__header,
  .tt-session-share-message,
  .tt-session-share-chat__composer { display: none; }
  .tt-session-share-chat { grid-template-rows: minmax(0, 1fr); }
  .tt-session-share-chat__body { padding: 0.5rem; }
  .tt-session-share-card { margin-top: 0; }
  .tt-session-share-detail { display: none; }
}

/* ── 工作交接 · 真实 Electron 工作面 ──────────────────────── */

#handoff .feat__media--shot:has(.tt-product-demo--handoff-v2) {
  background:
    radial-gradient(circle at 12% 4%, rgba(214, 230, 250, 0.96), transparent 37%),
    radial-gradient(circle at 88% 92%, rgba(244, 225, 204, 0.66), transparent 36%),
    linear-gradient(124deg, #eef4fb 0%, #f6f3ef 57%, #f5f7fa 100%);
}

#handoff .feat__media--shot:has(.tt-product-demo--handoff-v2) .feat__media-art {
  opacity: 0;
}

#handoff .feat__media-product:has(> .tt-product-demo--handoff-v2) {
  width: min(92%, 1180px);
  aspect-ratio: 1.74;
  border: 0;
  border-radius: 1.25cqw;
  box-shadow:
    0 0.18cqw 0.7cqw rgba(45, 58, 77, 0.06),
    0 2.15cqw 5.8cqw rgba(45, 58, 77, 0.15);
}

.tt-product-demo--handoff-v2 {
  --tt-handoff-blue: #397bd6;
  --tt-handoff-blue-soft: #eaf2fd;
  --tt-handoff-green: #35a36d;
  --tt-handoff-ink: #25292f;
  --tt-handoff-muted: #747b84;
  --tt-handoff-faint: #9da4ad;
  container-type: inline-size;
  color: var(--tt-handoff-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  text-rendering: geometricPrecision;
  user-select: none;
}

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

.home-product-zoom .tt-product-demo--handoff-v2 [data-demo-step] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.tt-product-demo--handoff-v2 .tt-handoff-refined-body {
  min-height: 0;
  grid-template-columns: 3rem 13.5rem minmax(0, 1fr);
}

.tt-product-demo--handoff-v2 .tt-handoff-refined-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0.82rem 0.68rem;
  background: #f5f7fa;
}

.tt-handoff-refined-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.42rem 0.52rem;
  color: #59616b;
}

.tt-handoff-refined-sidebar__head strong {
  font-size: 0.76rem;
  font-weight: 650;
}

.tt-handoff-refined-sidebar__head span {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: #e9edf2;
  color: #858d97;
  font-size: 0.62rem;
}

.tt-handoff-refined-inbox {
  display: grid;
  gap: 0.28rem;
}

.tt-handoff-refined-inbox__item {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.58rem 0.55rem;
  border-radius: 0.55rem;
  color: #707883;
}

.tt-handoff-refined-inbox__item.is-current {
  background: #fff;
  color: var(--tt-handoff-ink);
}

.tt-handoff-refined-inbox__item > i,
.tt-handoff-refined-avatar {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: #e2ebf7;
  color: #436b9e;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 650;
}

.tt-handoff-refined-inbox__item > i.is-muted {
  background: #e9ecef;
  color: #7c848d;
}

.tt-handoff-refined-inbox__item > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.tt-handoff-refined-inbox__item strong,
.tt-handoff-refined-inbox__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-inbox__item strong {
  font-size: 0.71rem;
  font-weight: 620;
}

.tt-handoff-refined-inbox__item small {
  color: #959ca5;
  font-size: 0.61rem;
}

.tt-handoff-refined-inbox__item em {
  width: max-content;
  margin-top: 0.14rem;
  color: #3971bd;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 620;
}

.tt-handoff-refined-sidebar__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.48rem;
  margin-top: auto;
  padding: 0.62rem 0.55rem;
  border-radius: 0.58rem;
  background: #edf1f5;
  color: #76808a;
}

.tt-handoff-refined-sidebar__hint > svg {
  margin-top: 0.06rem;
}

.tt-handoff-refined-sidebar__hint > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.tt-handoff-refined-sidebar__hint strong {
  color: #525b65;
  font-size: 0.65rem;
  font-weight: 620;
}

.tt-handoff-refined-sidebar__hint small {
  color: #8b939c;
  font-size: 0.58rem;
  line-height: 1.4;
}

.tt-handoff-refined-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 16.6rem;
  gap: 0.48rem;
  padding: 0.48rem;
  background: #f3f5f8;
}

.tt-handoff-refined-work,
.tt-handoff-refined-result {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.82rem;
  box-shadow: none;
}

.tt-handoff-refined-work {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 90% 4%, rgba(234, 242, 253, 0.56), transparent 25%),
    #fff;
}

.tt-handoff-refined-header {
  min-width: 0;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0 1.15rem;
}

.tt-handoff-refined-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tt-handoff-refined-header h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #30353b;
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-header > div > span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.28rem;
  color: #6a7684;
  font-size: 0.62rem;
}

.tt-handoff-refined-header > div > span i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--tt-handoff-green);
}

.tt-handoff-refined-people {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.tt-handoff-refined-people i {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: -0.24rem;
  place-items: center;
  border: 0.12rem solid #fff;
  border-radius: 50%;
  background: #e2ebf7;
  color: #55708f;
  font-size: 0.58rem;
  font-style: normal;
}

.tt-handoff-refined-people i:nth-child(2) {
  background: #f0e5d7;
  color: #806a51;
}

.tt-handoff-refined-people small {
  margin-left: 0.3rem;
  color: #8a929b;
  font-size: 0.6rem;
}

.tt-handoff-refined-flow {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.68rem;
  overflow: hidden;
  padding: 0.35rem 1.15rem 0.55rem;
}

.tt-handoff-refined-message {
  display: flex;
  max-width: 84%;
  align-items: flex-start;
  gap: 0.55rem;
}

.tt-handoff-refined-message > div {
  min-width: 0;
  padding: 0.58rem 0.72rem;
  border-radius: 0.2rem 0.72rem 0.72rem 0.72rem;
  background: #f4f6f9;
}

.tt-handoff-refined-message header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tt-handoff-refined-message strong {
  font-size: 0.67rem;
  font-weight: 650;
}

.tt-handoff-refined-message time {
  color: #a0a7af;
  font-size: 0.57rem;
}

.tt-handoff-refined-message p,
.tt-handoff-refined-agent p {
  margin: 0.25rem 0 0;
  color: #5d6570;
  font-size: 0.68rem;
  line-height: 1.5;
}

.tt-handoff-refined-context {
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border-radius: 0.7rem;
  background: #f7f8fa;
}

.tt-handoff-refined-context > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tt-handoff-refined-context > header > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
}

.tt-handoff-refined-context svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: #6e7e91;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.tt-handoff-refined-context strong {
  font-size: 0.68rem;
  font-weight: 650;
}

.tt-handoff-refined-context > header small {
  color: #939aa3;
  font-size: 0.58rem;
}

.tt-handoff-refined-resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.tt-handoff-refined-resources span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.28rem;
  padding: 0.42rem 0.5rem;
  overflow: hidden;
  border-radius: 0.48rem;
  background: #fff;
  color: #747d87;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-resources b {
  color: #3971bd;
  font-size: 0.72rem;
}

.tt-handoff-refined-resume {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.52rem;
  padding: 0.48rem 0.58rem;
  border-radius: 0.52rem;
  background: var(--tt-handoff-blue-soft);
}

.tt-handoff-refined-resume > i {
  width: 0.54rem;
  height: 0.54rem;
  flex: 0 0 auto;
  border: 0.14rem solid #fff;
  border-radius: 50%;
  background: var(--tt-handoff-blue);
  box-shadow: 0 0 0 0.08rem rgba(57, 123, 214, 0.18);
}

.tt-handoff-refined-resume > span {
  display: grid;
  min-width: 0;
  gap: 0.03rem;
}

.tt-handoff-refined-resume small {
  color: #7590b2;
  font-size: 0.55rem;
}

.tt-handoff-refined-resume strong {
  overflow: hidden;
  color: #315f99;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-resume em {
  margin-left: auto;
  color: #3971bd;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 650;
}

.tt-handoff-refined-agent {
  display: grid;
  gap: 0.32rem;
  padding-left: 2.35rem;
}

.tt-handoff-refined-agent > header {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}

.tt-handoff-refined-agent__avatar {
  width: 1.55rem;
  height: 1.55rem;
  margin-left: -2.35rem;
  overflow: hidden;
  border-radius: 50%;
}

.tt-handoff-refined-agent__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tt-handoff-refined-agent header strong {
  font-size: 0.67rem;
  font-weight: 650;
}

.tt-handoff-refined-agent header small {
  padding: 0.1rem 0.28rem;
  border-radius: 999px;
  background: #e8f0fd;
  color: #4f78b0;
  font-size: 0.54rem;
}

.tt-handoff-refined-agent p {
  margin-top: 0;
}

.tt-handoff-refined-agent__trace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.tt-handoff-refined-agent__trace span {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.28rem 0.42rem;
  border-radius: 0.4rem;
  background: #f4f6f8;
  color: #76808a;
  font-size: 0.57rem;
}

.tt-handoff-refined-agent__trace span:last-child {
  color: #3971bd;
  background: #edf4fd;
}

.tt-handoff-refined-agent__trace i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--tt-handoff-blue);
}

.tt-product-demo--handoff-v2 .electron-showcase__composer-wrap {
  padding: 0 1rem 0.55rem;
}

.tt-handoff-refined-result {
  display: flex;
  flex-direction: column;
  padding: 1.08rem 0.95rem;
  background: #f9fafc;
}

.tt-handoff-refined-result > header small {
  color: #8f97a1;
  font-size: 0.6rem;
  font-weight: 620;
  letter-spacing: 0.08em;
}

.tt-handoff-refined-result h4 {
  margin: 0.18rem 0 0;
  font-size: 0.85rem;
  font-weight: 650;
}

.tt-handoff-refined-result header p {
  margin: 0.28rem 0 0;
  color: #7b838d;
  font-size: 0.62rem;
  line-height: 1.5;
}

.tt-handoff-refined-progress {
  display: grid;
  gap: 0.36rem;
  margin-top: 0.82rem;
}

.tt-handoff-refined-progress > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0 0.44rem;
  align-items: center;
  padding: 0.48rem 0.52rem;
  border-radius: 0.5rem;
  background: #fff;
}

.tt-handoff-refined-progress i {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 50%;
  background: #e7f4ed;
  color: var(--tt-handoff-green);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
}

.tt-handoff-refined-progress b {
  overflow: hidden;
  color: #414850;
  font-size: 0.65rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-progress small {
  overflow: hidden;
  color: #9299a1;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-handoff-refined-writeback {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.72rem;
  padding: 0.68rem 0.65rem;
  border-radius: 0.62rem;
  background: #eaf2fd;
  color: #315f99;
}

.tt-handoff-refined-writeback > span {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.59rem;
  font-weight: 620;
}

.tt-handoff-refined-writeback > span i {
  display: grid;
  width: 1.08rem;
  height: 1.08rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--tt-handoff-green);
  font-size: 0.56rem;
  font-style: normal;
}

.tt-handoff-refined-writeback strong {
  font-size: 0.78rem;
  font-weight: 680;
}

.tt-handoff-refined-writeback small {
  overflow: hidden;
  color: #6682a6;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: 2.8rem 11.6rem minmax(0, 1fr);
  }

  .tt-handoff-refined-workspace {
    grid-template-columns: minmax(0, 1fr) 14.6rem;
  }

  .tt-handoff-refined-sidebar__hint {
    display: none;
  }
}

@media (max-width: 900px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  .tt-product-demo--handoff-v2 .tt-handoff-refined-sidebar {
    display: none;
  }

  .tt-handoff-refined-workspace {
    grid-template-columns: minmax(0, 1fr) 13.5rem;
  }

  .tt-handoff-refined-resources span:last-child,
  .tt-handoff-refined-people small {
    display: none;
  }

  .tt-handoff-refined-resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tt-handoff-refined-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-handoff-refined-result {
    display: none;
  }

  .tt-handoff-refined-flow {
    padding-inline: 0.8rem;
  }

  .tt-product-demo--handoff-v2 .electron-showcase__composer-wrap {
    padding-inline: 0.7rem;
  }
}

/* ── 消息里的协作任务 ────────────────────────────────────── */

.tt-product-demo--handoff-v2 .tt-handoff-refined-body {
  grid-template-columns: 3rem 13.8rem minmax(0, 1fr);
}

.tt-message-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0.76rem 0.64rem;
  background: #f5f7fa;
}

.tt-message-nav__head {
  display: flex;
  height: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.34rem;
}

.tt-message-nav__head strong {
  color: #3c434b;
  font-size: 0.78rem;
  font-weight: 660;
}

.tt-message-nav__head button,
.tt-message-thread button {
  border: 0;
  font: inherit;
}

.tt-message-nav__head button {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 0.4rem;
  background: #e9edf2;
  color: #737c86;
  font-size: 0.8rem;
}

.tt-message-nav__search {
  display: flex;
  height: 2rem;
  align-items: center;
  gap: 0.38rem;
  margin: 0.32rem 0 0.62rem;
  padding: 0 0.56rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #a1a7ae;
  font-size: 0.61rem;
}

.tt-message-nav__search svg {
  width: 0.78rem;
  height: 0.78rem;
}

.tt-message-nav__section {
  display: grid;
  gap: 0.18rem;
  margin-bottom: 0.64rem;
}

.tt-message-nav__section > small {
  padding: 0 0.38rem 0.22rem;
  color: #929aa4;
  font-size: 0.57rem;
  font-weight: 620;
}

.tt-message-nav__item {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.72rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  padding: 0.48rem 0.48rem;
  border-radius: 0.52rem;
  color: #68717b;
}

.tt-message-nav__item.is-current {
  background: #fff;
  color: #30363d;
}

.tt-message-nav__item > i,
.tt-chat-avatar,
.tt-message-thread__records > article > i {
  display: grid;
  width: 1.72rem;
  height: 1.72rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e7ebf0;
  color: #687480;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 650;
}

.tt-message-nav__item > i.is-group {
  border-radius: 0.48rem;
  background: #dfeafb;
  color: #3f70ae;
}

.tt-message-nav__item > i.is-amber {
  background: #f4e9da;
  color: #8d6c49;
}

.tt-message-nav__item > i.is-muted {
  background: #eceff2;
  color: #7c858f;
}

.tt-message-nav__item > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.tt-message-nav__item strong,
.tt-message-nav__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-message-nav__item strong {
  font-size: 0.67rem;
  font-weight: 630;
}

.tt-message-nav__item small {
  color: #969da5;
  font-size: 0.56rem;
}

.tt-message-nav__item > em {
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border-radius: 50%;
  background: #3e7ed7;
  color: #fff;
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 650;
}

.tt-message-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 17.2rem;
  gap: 0.48rem;
  padding: 0.48rem;
  background: #f3f5f8;
}

.tt-message-mobile-task {
  display: none;
}

.tt-message-feed,
.tt-message-thread {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.82rem;
  box-shadow: none;
}

.tt-message-feed {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
}

.tt-message-feed__header {
  display: flex;
  height: 3.45rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem;
}

.tt-message-feed__header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
}

.tt-message-feed__header h4 {
  margin: 0;
  overflow: hidden;
  color: #30353b;
  font-size: 0.8rem;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-message-feed__header > div span {
  color: #9198a1;
  font-size: 0.56rem;
}

.tt-message-feed__people {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.tt-message-feed__people i,
.tt-message-feed__people small {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: -0.2rem;
  place-items: center;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: #e2ebf7;
  color: #58708c;
  font-size: 0.53rem;
  font-style: normal;
}

.tt-message-feed__people i:nth-child(2) {
  background: #e1eef2;
  color: #4f7280;
}

.tt-message-feed__people i:nth-child(3) {
  background: #f3e8d9;
  color: #806b52;
}

.tt-message-feed__people small {
  background: #eef1f4;
  color: #78818b;
}

.tt-message-feed__body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.56rem;
  overflow: hidden;
  padding: 0 1rem 0.45rem;
}

.tt-message-feed__date {
  display: flex;
  justify-content: center;
}

.tt-message-feed__date span {
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  background: #f4f6f8;
  color: #9aa1a9;
  font-size: 0.51rem;
}

.tt-chat-message {
  display: flex;
  max-width: 86%;
  align-items: flex-start;
  gap: 0.5rem;
}

.tt-chat-message > div {
  min-width: 0;
}

.tt-chat-message header,
.tt-message-thread__records article header {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}

.tt-chat-message header strong,
.tt-message-thread__records article strong {
  color: #3d444c;
  font-size: 0.64rem;
  font-weight: 650;
}

.tt-chat-message header small,
.tt-message-thread__records article header small {
  padding: 0.08rem 0.25rem;
  border-radius: 999px;
  background: #e8f0fd;
  color: #4e79b3;
  font-size: 0.48rem;
}

.tt-chat-message time,
.tt-message-thread__records time {
  color: #a3a9b0;
  font-size: 0.52rem;
}

.tt-chat-message p {
  margin: 0.2rem 0 0;
  padding: 0.5rem 0.62rem;
  border-radius: 0.18rem 0.58rem 0.58rem 0.58rem;
  background: #f4f6f8;
  color: #5c6570;
  font-size: 0.62rem;
  line-height: 1.48;
}

.tt-chat-avatar.is-agent,
.tt-message-thread__records > article > i.is-agent {
  background: #fff;
}

.tt-chat-avatar img,
.tt-message-thread__records > article > i img,
.tt-collaboration-message__meta .is-agent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-collaboration-message {
  display: grid;
  width: calc(100% - 2.22rem);
  align-self: flex-end;
  gap: 0.42rem;
  padding: 0.68rem 0.72rem;
  border-radius: 0.68rem;
  background: #f3f6fa;
}

.tt-collaboration-message > header,
.tt-collaboration-message > header span,
.tt-collaboration-message > header em {
  display: flex;
  align-items: center;
}

.tt-collaboration-message > header {
  justify-content: space-between;
  gap: 0.6rem;
}

.tt-collaboration-message > header span {
  gap: 0.34rem;
}

.tt-collaboration-message > header svg {
  width: 0.84rem;
  height: 0.84rem;
  stroke: #4a79b7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tt-collaboration-message > header strong {
  color: #4b627c;
  font-size: 0.57rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.tt-collaboration-message > header em {
  gap: 0.26rem;
  color: #3f8e68;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 620;
}

.tt-collaboration-message > header em i,
.tt-message-thread__status > div:first-child span i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #37a06c;
}

.tt-collaboration-message h5 {
  margin: 0;
  color: #30363d;
  font-size: 0.78rem;
  font-weight: 670;
}

.tt-collaboration-message > p {
  margin: 0;
  color: #747c85;
  font-size: 0.58rem;
  line-height: 1.45;
}

.tt-collaboration-message__meta {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 0.9fr;
  gap: 0.34rem;
}

.tt-collaboration-message__meta > span {
  display: grid;
  gap: 0.14rem;
  padding: 0.35rem 0.42rem;
  border-radius: 0.42rem;
  background: #fff;
}

.tt-collaboration-message__meta small {
  color: #9aa1a9;
  font-size: 0.49rem;
}

.tt-collaboration-message__meta b {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.2rem;
  overflow: hidden;
  color: #555e68;
  font-size: 0.55rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-collaboration-message__meta b i {
  display: grid;
  width: 1rem;
  height: 1rem;
  margin-right: -0.1rem;
  place-items: center;
  overflow: hidden;
  border: 0.06rem solid #fff;
  border-radius: 50%;
  background: #e6edf7;
  color: #57718f;
  font-size: 0.43rem;
  font-style: normal;
}

.tt-collaboration-message__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.tt-collaboration-message__progress span {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.24rem 0.34rem;
  border-radius: 0.34rem;
  background: #e8f4ee;
  color: #4c8067;
  font-size: 0.51rem;
}

.tt-collaboration-message__progress i {
  font-style: normal;
  font-weight: 700;
}

.tt-collaboration-message__progress .is-pending {
  background: #e9f1fc;
  color: #4e75a7;
}

.tt-collaboration-message__progress .is-pending i {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #4380d4;
}

.tt-collaboration-message > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #969da5;
  font-size: 0.5rem;
}

.tt-collaboration-message > footer button {
  border: 0;
  background: transparent;
  color: #4077bd;
  font: inherit;
  font-weight: 630;
}

.tt-collaboration-message > footer button b {
  display: inline-grid;
  min-width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.12rem;
  place-items: center;
  border-radius: 50%;
  background: #dfeaf9;
  font-size: 0.46rem;
}

.tt-product-demo--handoff-v2 .tt-message-composer {
  padding: 0 0.86rem 0.52rem;
}

.tt-product-demo--handoff-v2 .tt-message-composer .electron-showcase__composer {
  min-height: 3.55rem;
}

.tt-message-thread {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 0.86rem 0.78rem 0.72rem;
  background: #f9fafc;
}

.tt-message-thread__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.12rem;
}

.tt-message-thread__header span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.tt-message-thread__header small {
  color: #929aa4;
  font-size: 0.53rem;
  font-weight: 620;
}

.tt-message-thread__header h4 {
  margin: 0;
  overflow: hidden;
  color: #353b42;
  font-size: 0.75rem;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-message-thread__header button {
  background: transparent;
  color: #8f969e;
  font-size: 0.88rem;
}

.tt-message-thread__status {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.7rem;
  padding: 0.58rem;
  border-radius: 0.58rem;
  background: #edf3fb;
}

.tt-message-thread__status > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tt-message-thread__status > div:first-child span {
  display: flex;
  align-items: center;
  gap: 0.26rem;
  color: #3d7b5d;
  font-size: 0.57rem;
  font-weight: 650;
}

.tt-message-thread__status > div:first-child small {
  color: #8c98a7;
  font-size: 0.49rem;
}

.tt-message-thread__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
}

.tt-message-thread__summary span {
  display: grid;
  gap: 0.06rem;
  color: #7c8794;
  font-size: 0.46rem;
}

.tt-message-thread__summary b {
  color: #3f5f84;
  font-size: 0.64rem;
}

.tt-message-thread__records {
  display: grid;
  align-content: start;
  gap: 0.66rem;
  min-height: 0;
  padding: 0.76rem 0.1rem 0;
  overflow: hidden;
}

.tt-message-thread__records > article {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.44rem;
}

.tt-message-thread__records > article > i {
  width: 1.48rem;
  height: 1.48rem;
  font-size: 0.54rem;
}

.tt-message-thread__records > article > i.is-blue {
  background: #dfeef3;
  color: #4b7383;
}

.tt-message-thread__records article > div {
  min-width: 0;
}

.tt-message-thread__records article p {
  margin: 0.18rem 0 0;
  color: #626b75;
  font-size: 0.55rem;
  line-height: 1.45;
}

.tt-message-thread__attachment,
.tt-message-thread__trace {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.28rem;
  padding: 0.24rem 0.34rem;
  overflow: hidden;
  border-radius: 0.34rem;
  background: #edf3fb;
  color: #4b76a9;
  font-size: 0.49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-message-thread__trace {
  background: #eaf4ef;
  color: #4f8068;
}

.tt-message-thread__reply {
  display: flex;
  height: 2.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.34rem 0 0.56rem;
  border-radius: 0.52rem;
  background: #fff;
  color: #a0a6ad;
  font-size: 0.54rem;
}

.tt-message-thread__reply button {
  display: grid;
  width: 1.42rem;
  height: 1.42rem;
  place-items: center;
  border-radius: 50%;
  background: #e1ebf9;
  color: #3f7fd5;
}

.tt-message-thread__reply svg {
  width: 0.72rem;
  height: 0.72rem;
}

@media (max-width: 1180px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: 2.8rem 11.8rem minmax(0, 1fr);
  }

  .tt-message-workspace {
    grid-template-columns: minmax(0, 1fr) 14.6rem;
  }

  .tt-message-thread__summary span {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  .tt-product-demo--handoff-v2 .tt-message-nav {
    display: none;
  }

  .tt-message-workspace {
    grid-template-columns: minmax(0, 1fr) 13.6rem;
  }

  .tt-collaboration-message__meta > span:last-child {
    display: none;
  }

  .tt-collaboration-message__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .tt-message-workspace {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.28rem;
  }

  .tt-message-thread,
  .tt-message-feed {
    display: none;
  }

  .tt-message-mobile-task {
    display: grid;
    align-content: center;
    gap: 0.32rem;
    padding: 0.64rem 0.72rem;
    border-radius: 0.62rem;
    background: #fff;
  }

  .tt-message-mobile-task header,
  .tt-message-mobile-task header em,
  .tt-message-mobile-task footer {
    display: flex;
    align-items: center;
  }

  .tt-message-mobile-task header {
    justify-content: space-between;
    color: #4d6684;
    font-size: 0.62rem;
  }

  .tt-message-mobile-task header em {
    gap: 0.2rem;
    color: #438261;
    font-style: normal;
  }

  .tt-message-mobile-task header i {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: #37a06c;
  }

  .tt-message-mobile-task > strong {
    color: #323940;
    font-size: 0.78rem;
  }

  .tt-message-mobile-task > small {
    color: #87909a;
    font-size: 0.54rem;
  }

  .tt-message-mobile-task footer {
    flex-wrap: wrap;
    gap: 0.24rem;
    font-size: 0.5rem;
  }

  .tt-message-mobile-task footer span {
    padding: 0.2rem 0.3rem;
    border-radius: 0.3rem;
    background: #eaf4ef;
    color: #4d8068;
  }

  .tt-message-mobile-task footer span:last-child {
    background: #eaf1fb;
    color: #4e76a7;
  }

}

@media (max-width: 30rem) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tt-product-demo--handoff-v2 .tt-shell-body,
.tt-product-demo--project-v2 .tt-shell-body {
  background: #f5f7fa;
}

.tt-product-demo--handoff-v2 .tt-rail-button.is-active,
.tt-product-demo--project-v2 .tt-rail-button.is-active {
  border-radius: 0.58cqw;
  background: var(--tt-module-blue-soft);
  color: var(--tt-module-blue);
}

.tt-product-demo--handoff-v2 .tt-rail-profile,
.tt-product-demo--project-v2 .tt-rail-profile {
  border-color: rgba(57, 123, 214, 0.1);
  background: #eef4fc;
  color: #315f9d;
  font-size: clamp(6px, 0.64cqw, 10px);
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-workspace,
.tt-product-demo--project-v2 .tt-project-v2-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-workspace {
  grid-template-columns: 15.4cqw minmax(0, 1fr) 25.2cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-workspace {
  grid-template-columns: 14.4cqw minmax(0, 1fr) 24.8cqw;
}

.tt-product-demo--handoff-v2 .tt-v2-sidebar,
.tt-product-demo--project-v2 .tt-v2-sidebar,
.tt-product-demo--handoff-v2 .tt-v2-main,
.tt-product-demo--project-v2 .tt-v2-main,
.tt-product-demo--handoff-v2 .tt-v2-detail,
.tt-product-demo--project-v2 .tt-v2-detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tt-product-demo--handoff-v2 .tt-v2-sidebar,
.tt-product-demo--project-v2 .tt-v2-sidebar {
  padding: 1.05cqw 0.82cqw;
  border-right: 1px solid var(--tt-module-line);
  background: #f5f7f9;
}

.tt-product-demo--handoff-v2 .tt-v2-main,
.tt-product-demo--project-v2 .tt-v2-main {
  display: flex;
  flex-direction: column;
  padding: 1.15cqw 1.35cqw;
  background: #fff;
}

.tt-product-demo--handoff-v2 .tt-v2-detail,
.tt-product-demo--project-v2 .tt-v2-detail {
  display: flex;
  flex-direction: column;
  padding: 1.15cqw 1.05cqw;
  border-left: 1px solid var(--tt-module-line);
  background: #f5f7f9;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-eyebrow,
.tt-product-demo--project-v2 .tt-project-v2-eyebrow {
  display: block;
  color: #8b949f;
  font-size: clamp(6px, 0.58cqw, 9px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-section-title,
.tt-product-demo--project-v2 .tt-project-v2-section-title {
  margin: 0.16cqw 0 0;
  color: var(--tt-module-ink);
  font-size: clamp(9px, 0.98cqw, 15px);
  font-weight: 600;
  line-height: 1.35;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-copy,
.tt-product-demo--project-v2 .tt-project-v2-copy {
  margin: 0.28cqw 0 0;
  color: var(--tt-module-muted);
  font-size: clamp(7px, 0.66cqw, 10px);
  line-height: 1.5;
}

/* ── 工作交接 ─────────────────────────────────────────────── */

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox {
  display: grid;
  gap: 0.48cqw;
  margin-top: 0.82cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.7cqw minmax(0, 1fr);
  gap: 0.5cqw;
  padding: 0.62cqw 0.55cqw;
  border-radius: 0.58cqw;
  color: #6d7580;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-item.is-current {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 123, 214, 0.08);
  color: var(--tt-module-ink);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-avatar,
.tt-product-demo--project-v2 .tt-project-v2-avatar {
  display: grid;
  place-items: center;
  width: 1.7cqw;
  height: 1.7cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e7eef8;
  color: #345f98;
  font-size: clamp(6px, 0.58cqw, 9px);
  font-style: normal;
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-avatar.is-muted {
  background: #eceff2;
  color: #7b838c;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-copy {
  display: grid;
  min-width: 0;
  gap: 0.12cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-copy span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.3cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-copy strong {
  overflow: hidden;
  font-size: clamp(7px, 0.7cqw, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-copy time {
  margin-left: auto;
  color: #a1a8b1;
  font-size: clamp(5px, 0.52cqw, 8px);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #7e8791;
  font-size: clamp(6px, 0.58cqw, 9px);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-state {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 0.28cqw;
  margin-top: 0.2cqw;
  color: #3971bd;
  font-size: clamp(5px, 0.54cqw, 8px);
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-inbox-state i {
  width: 0.32cqw;
  height: 0.32cqw;
  border-radius: 50%;
  background: var(--tt-module-blue);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-main-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.75cqw;
  padding-bottom: 0.9cqw;
  border-bottom: 1px solid var(--tt-module-line);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-main-head > div {
  min-width: 0;
  flex: 1;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-main-head h4 {
  margin: 0.18cqw 0 0;
  overflow: hidden;
  color: var(--tt-module-ink);
  font-size: clamp(9px, 0.96cqw, 15px);
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.34cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-meta span {
  padding: 0.24cqw 0.42cqw;
  border-radius: 999px;
  background: #f0f3f6;
  color: #69727c;
  font-size: clamp(5px, 0.54cqw, 8px);
  font-weight: 500;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55cqw;
  margin-top: 0.8cqw;
  padding: 0.64cqw 0.72cqw;
  border-radius: 0.58cqw;
  background: #f6f8fb;
  color: #59636e;
  font-size: clamp(7px, 0.68cqw, 10px);
  line-height: 1.5;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-note .tt-handoff-v2-avatar {
  width: 1.5cqw;
  height: 1.5cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-note strong {
  color: #303740;
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-timeline {
  position: relative;
  display: grid;
  gap: 0.55cqw;
  margin-top: 0.78cqw;
  padding-left: 1.05cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-timeline::before {
  content: "";
  position: absolute;
  top: 0.72cqw;
  bottom: 0.72cqw;
  left: 0.34cqw;
  width: 1px;
  background: #dfe4ea;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.62cqw;
  min-height: 2.55cqw;
  padding: 0.48cqw 0.62cqw;
  border-radius: 0.56cqw;
  background: #f8f9fb;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node::before {
  content: "";
  position: absolute;
  left: -0.91cqw;
  width: 0.46cqw;
  height: 0.46cqw;
  border: 0.1cqw solid #f8f9fb;
  border-radius: 50%;
  background: #9ca6b0;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node.is-breakpoint {
  background: var(--tt-module-blue-faint);
  box-shadow: inset 0 0 0 1px rgba(57, 123, 214, 0.1);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node.is-breakpoint::before {
  background: var(--tt-module-blue);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node > span:first-child {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.08cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node strong {
  overflow: hidden;
  color: #333a42;
  font-size: clamp(7px, 0.7cqw, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node small {
  overflow: hidden;
  color: #858e98;
  font-size: clamp(6px, 0.58cqw, 9px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-context-node em {
  flex: 0 0 auto;
  padding: 0.2cqw 0.4cqw;
  border-radius: 999px;
  background: #e8f1fd;
  color: #3971bd;
  font-size: clamp(5px, 0.54cqw, 8px);
  font-style: normal;
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-artifact {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5cqw;
  min-height: 2.25cqw;
  margin-top: 0.66cqw;
  padding: 0 0.65cqw;
  border-radius: 0.52cqw;
  background: #f3f5f7;
  color: #424a53;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-artifact svg {
  width: 0.9cqw;
  height: 0.9cqw;
  color: #6c7f96;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-artifact strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(7px, 0.66cqw, 10px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-artifact small {
  margin-left: auto;
  color: #8b949e;
  font-size: clamp(5px, 0.54cqw, 8px);
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-branch {
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  margin-top: 0.72cqw;
  padding: 0.52cqw 0.6cqw;
  border-radius: 0.5cqw;
  background: #eaf2fd;
  color: #356dad;
  font-size: clamp(6px, 0.62cqw, 9px);
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-branch svg {
  width: 0.82cqw;
  height: 0.82cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress {
  display: grid;
  gap: 0.42cqw;
  margin-top: 0.8cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.18cqw minmax(0, 1fr);
  align-items: center;
  gap: 0.5cqw;
  min-height: 2.2cqw;
  padding: 0.4cqw 0.5cqw;
  border-radius: 0.48cqw;
  background: rgba(255, 255, 255, 0.82);
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row > i {
  display: grid;
  place-items: center;
  width: 1.18cqw;
  height: 1.18cqw;
  border-radius: 50%;
  background: #e6f3eb;
  color: var(--tt-module-green);
  font-size: clamp(5px, 0.5cqw, 8px);
  font-style: normal;
  font-weight: 700;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row span {
  display: grid;
  min-width: 0;
  gap: 0.08cqw;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row strong {
  overflow: hidden;
  color: #384049;
  font-size: clamp(7px, 0.66cqw, 10px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row small {
  color: #8c949d;
  font-size: clamp(5px, 0.54cqw, 8px);
}

.tt-product-demo--handoff-v2 .tt-v2-result {
  display: grid;
  gap: 0.24cqw;
  margin-top: auto;
  padding: 0.82cqw 0.78cqw;
  border-radius: 0.62cqw;
  background: #e9f2ff;
  color: #2f629f;
}

.tt-product-demo--handoff-v2 .tt-v2-result span {
  display: flex;
  align-items: center;
  gap: 0.38cqw;
  font-size: clamp(6px, 0.62cqw, 9px);
  font-weight: 600;
}

.tt-product-demo--handoff-v2 .tt-v2-result span i {
  display: grid;
  place-items: center;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: #fff;
  color: var(--tt-module-green);
  font-size: clamp(6px, 0.56cqw, 9px);
  font-style: normal;
}

.tt-product-demo--handoff-v2 .tt-v2-result strong {
  font-size: clamp(9px, 0.9cqw, 14px);
  font-weight: 650;
  line-height: 1.35;
}

.tt-product-demo--handoff-v2 .tt-v2-result small {
  overflow: hidden;
  color: #5d7da5;
  font-size: clamp(6px, 0.58cqw, 9px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 团队项目 ─────────────────────────────────────────────── */

.tt-product-demo--project-v2 .tt-project-v2-current {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5cqw;
  margin-top: 0.78cqw;
  padding: 0.62cqw 0.58cqw;
  border-radius: 0.58cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 123, 214, 0.08);
}

.tt-product-demo--project-v2 .tt-project-v2-current-icon {
  display: grid;
  place-items: center;
  width: 1.62cqw;
  height: 1.62cqw;
  flex: 0 0 auto;
  border-radius: 0.46cqw;
  background: var(--tt-module-blue-soft);
  color: var(--tt-module-blue);
}

.tt-product-demo--project-v2 .tt-project-v2-current-icon svg {
  width: 0.86cqw;
  height: 0.86cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-current > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.08cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-current strong {
  overflow: hidden;
  font-size: clamp(7px, 0.7cqw, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-current small {
  color: #87909a;
  font-size: clamp(5px, 0.54cqw, 8px);
}

.tt-product-demo--project-v2 .tt-project-v2-nav-label {
  margin-top: 1cqw;
  color: #929aa4;
  font-size: clamp(5px, 0.54cqw, 8px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tt-product-demo--project-v2 .tt-project-v2-nav-list {
  display: grid;
  gap: 0.15cqw;
  margin-top: 0.34cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-nav-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42cqw;
  min-height: 1.76cqw;
  padding: 0 0.45cqw;
  color: #747d87;
  font-size: clamp(6px, 0.6cqw, 9px);
}

.tt-product-demo--project-v2 .tt-project-v2-nav-item i {
  width: 0.34cqw;
  height: 0.34cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #aeb5bd;
}

.tt-product-demo--project-v2 .tt-project-v2-nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-main-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.8cqw;
  padding-bottom: 0.82cqw;
  border-bottom: 1px solid var(--tt-module-line);
}

.tt-product-demo--project-v2 .tt-project-v2-main-head > div:first-child {
  min-width: 0;
  flex: 1;
}

.tt-product-demo--project-v2 .tt-project-v2-main-head h4 {
  margin: 0.15cqw 0 0;
  overflow: hidden;
  color: var(--tt-module-ink);
  font-size: clamp(9px, 0.98cqw, 15px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-stats {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.38cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-stats span {
  padding: 0.25cqw 0.44cqw;
  border-radius: 999px;
  background: #f0f3f6;
  color: #69727c;
  font-size: clamp(5px, 0.54cqw, 8px);
  font-weight: 500;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-board {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62cqw;
  margin-top: 0.82cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-lane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0.58cqw;
  border-radius: 0.62cqw;
  background: #f5f7f9;
}

.tt-product-demo--project-v2 .tt-project-v2-lane > header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.36cqw;
  min-height: 1.45cqw;
  padding: 0 0.12cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-lane > header i {
  width: 0.38cqw;
  height: 0.38cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a6aeb7;
}

.tt-product-demo--project-v2 .tt-project-v2-lane.is-running > header i {
  background: var(--tt-module-blue);
}

.tt-product-demo--project-v2 .tt-project-v2-lane.is-done > header i {
  background: var(--tt-module-green);
}

.tt-product-demo--project-v2 .tt-project-v2-lane > header strong {
  overflow: hidden;
  color: #4c555f;
  font-size: clamp(6px, 0.62cqw, 9px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-lane > header span {
  margin-left: auto;
  color: #929aa4;
  font-size: clamp(5px, 0.52cqw, 8px);
}

.tt-product-demo--project-v2 .tt-project-v2-card {
  display: grid;
  min-width: 0;
  gap: 0.34cqw;
  margin-top: 0.48cqw;
  padding: 0.58cqw;
  border-radius: 0.54cqw;
  background: #fff;
}

.tt-product-demo--project-v2 .tt-project-v2-card.is-selected {
  background: #f7faff;
  box-shadow: inset 0 0 0 1px rgba(57, 123, 214, 0.16);
}

.tt-product-demo--project-v2 .tt-project-v2-card > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #363e47;
  font-size: clamp(7px, 0.66cqw, 10px);
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tt-product-demo--project-v2 .tt-project-v2-card-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.34cqw;
  color: #858e98;
  font-size: clamp(5px, 0.52cqw, 8px);
}

.tt-product-demo--project-v2 .tt-project-v2-card-meta .tt-project-v2-avatar {
  width: 1.02cqw;
  height: 1.02cqw;
  font-size: clamp(5px, 0.46cqw, 7px);
}

.tt-product-demo--project-v2 .tt-project-v2-card-meta span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-card-flag {
  justify-self: start;
  padding: 0.16cqw 0.34cqw;
  border-radius: 999px;
  background: #fbeded;
  color: #bd5757;
  font-size: clamp(5px, 0.5cqw, 8px);
  font-weight: 600;
}

.tt-product-demo--project-v2 .tt-project-v2-detail-state {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 0.3cqw;
  margin-top: 0.38cqw;
  color: #3e8a65;
  font-size: clamp(6px, 0.6cqw, 9px);
  font-weight: 600;
}

.tt-product-demo--project-v2 .tt-project-v2-detail-state i {
  width: 0.34cqw;
  height: 0.34cqw;
  border-radius: 50%;
  background: var(--tt-module-green);
}

.tt-product-demo--project-v2 .tt-project-v2-people {
  display: grid;
  gap: 0.42cqw;
  margin-top: 0.85cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5cqw;
  min-height: 2.35cqw;
  padding: 0.42cqw 0.52cqw;
  border-radius: 0.5cqw;
  background: rgba(255, 255, 255, 0.82);
}

.tt-product-demo--project-v2 .tt-project-v2-person > span {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.08cqw;
}

.tt-product-demo--project-v2 .tt-project-v2-person strong {
  overflow: hidden;
  color: #39414a;
  font-size: clamp(7px, 0.66cqw, 10px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-person small {
  color: #8b949e;
  font-size: clamp(5px, 0.52cqw, 8px);
}

.tt-product-demo--project-v2 .tt-project-v2-person em {
  color: #3971bd;
  font-size: clamp(5px, 0.52cqw, 8px);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-project-v2-acceptance {
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  margin-top: 0.6cqw;
  color: #6f7882;
  font-size: clamp(6px, 0.58cqw, 9px);
}

.tt-product-demo--project-v2 .tt-project-v2-acceptance svg {
  width: 0.78cqw;
  height: 0.78cqw;
  color: var(--tt-module-blue);
}

.tt-product-demo--project-v2 .tt-v2-result {
  display: grid;
  gap: 0.22cqw;
  margin-top: auto;
  padding: 0.82cqw 0.78cqw;
  border-radius: 0.62cqw;
  background: #e9f2ff;
  color: #2f629f;
}

.tt-product-demo--project-v2 .tt-v2-result > span {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  font-size: clamp(6px, 0.6cqw, 9px);
  font-weight: 600;
}

.tt-product-demo--project-v2 .tt-v2-result svg {
  width: 0.88cqw;
  height: 0.88cqw;
  color: var(--tt-module-blue);
}

.tt-product-demo--project-v2 .tt-v2-result strong {
  overflow: hidden;
  font-size: clamp(9px, 0.9cqw, 14px);
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-product-demo--project-v2 .tt-v2-result small {
  color: #5d7da5;
  font-size: clamp(6px, 0.58cqw, 9px);
}

/* 只推动故事状态；基础壳始终可见，动画完成后保持结果态。 */
@media (prefers-reduced-motion: no-preference) {
  .feat__media .tt-product-demo--handoff-v2 [data-demo-step],
  .feat__media .tt-product-demo--project-v2 [data-demo-step] {
    opacity: 0;
    transform: translate3d(0, 0.28cqw, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step],
  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step] {
    animation-duration: 560ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step] {
    animation-name: tt-handoff-v2-step-in;
  }

  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step="1"] { animation-delay: 120ms; }
  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step="2"] { animation-delay: 340ms; }
  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step="3"] { animation-delay: 580ms; }
  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step="4"] { animation-delay: 820ms; }
  .feat__media.is-demo-active .tt-product-demo--handoff-v2 [data-demo-step="5"] { animation-delay: 1080ms; }

  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step] {
    animation-name: tt-project-v2-step-in;
  }

  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step="1"] { animation-delay: 140ms; }
  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step="2"] { animation-delay: 380ms; }
  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step="3"] { animation-delay: 680ms; }
  .feat__media.is-demo-active .tt-product-demo--project-v2 [data-demo-step="4"] { animation-delay: 960ms; }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .tt-product-demo--handoff-v2 [data-demo-step],
  .tt-product-demo--project-v2 [data-demo-step] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* 演示图会在正文中被缩放展示；元信息仍须达到可扫读的字号下限。 */
.tt-product-demo--handoff-v2 :is(
    .tt-handoff-v2-eyebrow,
    .tt-handoff-v2-inbox-copy time,
    .tt-handoff-v2-inbox-copy small,
    .tt-handoff-v2-inbox-state,
    .tt-handoff-v2-context-meta span,
    .tt-handoff-v2-context-node small,
    .tt-handoff-v2-context-node em,
    .tt-handoff-v2-artifact small,
    .tt-handoff-v2-branch,
    .tt-handoff-v2-progress-row > i,
    .tt-handoff-v2-progress-row small
  ),
.tt-product-demo--project-v2 :is(
    .tt-project-v2-eyebrow,
    .tt-project-v2-current small,
    .tt-project-v2-nav-label,
    .tt-project-v2-nav-item,
    .tt-project-v2-stats span,
    .tt-project-v2-lane > header strong,
    .tt-project-v2-lane > header span,
    .tt-project-v2-card-meta,
    .tt-project-v2-card-flag,
    .tt-project-v2-detail-state,
    .tt-project-v2-person small,
    .tt-project-v2-person em,
    .tt-project-v2-acceptance
  ) {
  font-size: clamp(7px, 0.66cqw, 10px);
}

.tt-product-demo--project-v2 .tt-project-v2-card-meta .tt-project-v2-avatar {
  font-size: clamp(6px, 0.58cqw, 9px);
}

/* 产品插槽在窄视口仍保持横向工作台；先裁掉次要导航，不牺牲主故事和结果。 */
@container (max-width: 760px) {
  .tt-product-demo--handoff-v2 .tt-handoff-v2-workspace,
  .tt-product-demo--project-v2 .tt-project-v2-workspace {
    grid-template-columns: minmax(0, 1.5fr) minmax(104px, 0.9fr);
  }

  .tt-product-demo--handoff-v2 .tt-v2-sidebar,
  .tt-product-demo--project-v2 .tt-v2-sidebar {
    display: none;
  }

  .tt-product-demo--handoff-v2 .tt-v2-main,
  .tt-product-demo--project-v2 .tt-v2-main {
    padding-inline: 1cqw;
  }

  .tt-product-demo--handoff-v2 .tt-v2-detail,
  .tt-product-demo--project-v2 .tt-v2-detail {
    display: flex;
    padding-inline: 0.8cqw;
  }
}

@container (max-width: 470px) {
  .tt-product-demo--handoff-v2 .tt-handoff-v2-workspace,
  .tt-product-demo--project-v2 .tt-project-v2-workspace {
    grid-template-columns: minmax(0, 1.25fr) minmax(92px, 0.92fr);
  }

  .tt-product-demo--handoff-v2 .tt-handoff-v2-copy,
  .tt-product-demo--project-v2 .tt-project-v2-copy,
  .tt-product-demo--handoff-v2 .tt-handoff-v2-note,
  .tt-product-demo--handoff-v2 .tt-handoff-v2-artifact small,
  .tt-product-demo--project-v2 .tt-project-v2-stats span:last-child,
  .tt-product-demo--project-v2 .tt-project-v2-acceptance {
    display: none;
  }

  .tt-product-demo--handoff-v2 .tt-handoff-v2-main-head,
  .tt-product-demo--project-v2 .tt-project-v2-main-head {
    padding-bottom: 0.55cqw;
  }

  .tt-product-demo--handoff-v2 .tt-handoff-v2-context-meta {
    display: none;
  }

  .tt-product-demo--handoff-v2 .tt-handoff-v2-timeline,
  .tt-product-demo--project-v2 .tt-project-v2-board {
    margin-top: 0.52cqw;
  }

  .tt-product-demo--handoff-v2 .tt-handoff-v2-context-node,
  .tt-product-demo--project-v2 .tt-project-v2-card,
  .tt-product-demo--project-v2 .tt-project-v2-lane {
    padding: 0.42cqw;
  }

  .tt-product-demo--project-v2 .tt-project-v2-board {
    gap: 0.34cqw;
  }

  .tt-product-demo--project-v2 .tt-project-v2-card-meta span:last-child,
  .tt-product-demo--handoff-v2 .tt-handoff-v2-progress-row small,
  .tt-product-demo--project-v2 .tt-project-v2-person small {
    display: none;
  }

  .tt-product-demo--handoff-v2 .tt-v2-result,
  .tt-product-demo--project-v2 .tt-v2-result {
    min-width: 0;
    padding: 0.46cqw 0.54cqw;
  }

  .tt-product-demo--handoff-v2 .tt-v2-result small {
    display: none;
  }

  .tt-product-demo--project-v2 .tt-v2-result > span {
    display: none;
  }

  .tt-product-demo--handoff-v2 .tt-v2-result strong,
  .tt-product-demo--project-v2 .tt-v2-result strong,
  .tt-product-demo--project-v2 .tt-v2-result small {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tt-product-demo--project-v2 .tt-project-v2-card {
    gap: 0.16cqw;
    margin-top: 0.28cqw;
    padding: 0.32cqw;
  }

  .tt-product-demo--project-v2 .tt-project-v2-card > strong {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}