:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-strong: #f5f5f2;
  --white: #ffffff;
  --ink: #1f2520;
  --ink-soft: #4f574f;
  --ink-muted: #676e68;
  --sage: #5f763f;
  --sage-dark: #52663a;
  --sage-light: #e8eddf;
  --line: rgba(31, 37, 32, 0.14);
  --sky: #cdeaf0;
  --blue: #7ba6b1;
  --clay: #d79a72;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --max: 1200px;
  --shadow-window: 0 32px 80px rgba(35, 55, 48, 0.2), 0 3px 12px rgba(35, 55, 48, 0.1);
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

/* 作者样式在层叠里压过 UA 的 [hidden] { display: none }，所以每处 el.hidden = true 都靠这条兜底。
   缺它时 .tour-works-list > button / .tour-skill-row / .tour-check-row 的隐藏全是空操作。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  overflow-x: clip;
  background: #ffffff;
  color: var(--ink);
  font-family: "Geist", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
body.download-open { overflow: hidden; }

.download-platforms {
  display: inline-flex;
  pointer-events: auto;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 12px;
}
.download-platforms:hover { color: var(--sage-dark); }
.download-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 100px rgba(31, 37, 32, .2);
  text-align: left;
}
.download-dialog::backdrop { background: rgba(31, 37, 32, .35); }
.download-dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.download-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-strong);
  color: var(--ink-soft);
  font-size: 26px;
  cursor: pointer;
}
.download-dialog h2 { margin: 24px 0 8px; font-size: 28px; letter-spacing: -.04em; line-height: 1.2; }
.download-dialog #download-description { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.download-status { min-height: 20px; margin: 16px 0; color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.download-packages { display: grid; gap: 20px; }
.download-system h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.download-detected { padding: 3px 7px; border-radius: 6px; background: var(--sage-light); color: var(--sage-dark); font-size: 11px; font-weight: 500; }
.download-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.download-installer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.is-detected .download-installer { background: #f6f8f2; border-color: #d4dfc7; }
.download-installer:hover { background: var(--sage-light); border-color: var(--sage); }
.download-installer strong { display: block; font-size: 15px; font-weight: 600; }
.download-installer small { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.download-installer-arrow { flex-shrink: 0; color: var(--sage-dark); font-size: 20px; }
.download-unavailable { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-muted); font-size: 12px; line-height: 1.7; }
.download-release-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; color: var(--ink-soft); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.download-dialog :focus-visible, .download-platforms:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
@media (max-width: 480px) {
  .download-dialog { padding: 22px; }
  .download-options { grid-template-columns: 1fr; }
  .download-installer { min-height: 76px; padding: 12px 14px; }
}

.not-found {
  width: min(calc(100% - 40px), 1040px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 30px 0 70px;
  display: flex;
  flex-direction: column;
}
.not-found > div { margin: auto 0; }
.not-found > div > span { color: var(--sage); font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; }
.not-found h1 { max-width: 780px; margin: 24px 0 22px; font-size: clamp(52px,8vw,100px); }
.not-found p { margin: 0 0 28px; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  --header-progress: 0;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(calc(100% - 32px), 1240px);
  height: 74px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 32px rgba(31,37,32,0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: var(--header-progress);
  transform: translateX(-50%);
  will-change: opacity;
  pointer-events: none;
}

body.menu-open .site-header::before { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.brand img { width: 31px; height: 31px; border-radius: 8px; }

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav a,
.text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 160ms ease;
}

.site-nav a:hover,
.text-link:hover { color: var(--ink); }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }

.language-toggle {
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.language-toggle:hover { background: rgba(31,37,32,0.06); color: var(--ink); }
.language-toggle-mobile { display: none; }

.menu-button { display: none; }

.button {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, .site-nav a:focus-visible, .text-link:focus-visible, .language-toggle:focus-visible, .tour-app-preview button:focus-visible,
.agent-example-tabs button:focus-visible, .acp-workflows button:focus-visible, .automation-trigger-tabs button:focus-visible, .capability-marks a:focus-visible {
  outline: 3px solid rgba(111, 134, 79, 0.28);
  outline-offset: 3px;
}

.button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-small { min-height: 38px; padding-inline: 16px; border-radius: 10px; font-size: 13px; }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #343c35; }
.button-light { background: rgba(255,255,255,0.78); border-color: rgba(31,37,32,0.14); color: var(--ink); }
.button-light:hover { background: var(--white); border-color: rgba(31,37,32,0.24); }
.button-sage { background: var(--sage); color: #fff; }
.button-sage:hover { background: #53683a; }

.hero {
  width: 100%;
  margin: 0;
  position: relative;
}

section[id] { scroll-margin-top: 78px; }

.hero-intro {
  min-height: 100svh;
  padding: 92px 24px 104px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.hero-decorations {
  --decor-ink: #26312b;
  --decor-white: #ffffff;
  --decor-cream: #fff8e8;
  --decor-yellow-pale: #fff0c8;
  --decor-yellow: #f5c866;
  --decor-orange: #f49a3e;
  --decor-blue: #64bce7;
  --decor-blue-light: #bce4f2;
  --decor-sage: #9bbb82;
  --decor-sage-light: #dce9cd;
  --decor-sage-dark: #6f9253;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(36px);
}

.hero-decorations [data-decor] { pointer-events: auto; }

.decor-piece {
  --rotation: 0deg;
  position: absolute;
  margin: 0;
  animation: decor-float 6.8s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transform: rotate(var(--rotation));
  transform-origin: center;
}

.decor-mark-card {
  min-width: 104px;
  min-height: 78px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(31,37,32,0.12);
  border-radius: 21px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 13px 28px rgba(45,65,56,0.11);
  backdrop-filter: blur(8px);
}

.decor-mark-icon { width: 42px; height: 42px; display: block; }
.decor-mark-card-wide { min-width: 134px; }
.decor-mark-card-wide .decor-mark-icon { width: 74px; height: 32px; }

.decor-pi .decor-mark-card {
  min-width: 86px;
  min-height: 86px;
  padding: 15px;
  border: 0;
  border-radius: 30px 17px 27px 20px;
  background: #fff1ce;
}

.decor-pi .decor-mark-icon { width: 45px; height: 45px; }
.decor-acp .decor-mark-card {
  border-color: rgba(31,37,32,0.2);
  border-radius: 15px;
  background: rgba(255,255,255,0.9);
  box-shadow: 8px 9px 0 rgba(123,166,177,0.22);
}

.decor-pi { --rotation: -8deg; --delay: -1.2s; left: clamp(42px, 5.5vw, 86px); top: 300px; }
.decor-acp { --rotation: 6deg; --delay: -3.4s; right: clamp(118px, 10vw, 156px); top: 348px; animation-duration: 7.6s; }
.decor-mcp { --rotation: 9deg; --delay: -5s; left: clamp(76px, 8vw, 124px); top: 510px; animation-duration: 7.2s; }
.decor-mcp .decor-mark-card { min-width: 116px; border-radius: 999px; background: #acdcea; }
.decor-mcp .decor-mark-icon { width: 40px; height: 40px; }

.decor-object {
  --rotation: 0deg;
  position: absolute;
  display: block;
  width: 38px;
  height: auto;
  aspect-ratio: var(--decor-ratio, 1);
  user-select: none;
  filter: drop-shadow(0 5px 8px rgba(45,65,56,0.06));
  animation: decor-float 7.2s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transform: rotate(var(--rotation));
  transform-origin: center;
}

.decor-left-agent-panel { --decor-ratio: 130 / 84; --rotation: -4deg; --delay: -4.1s; left: clamp(30px, 4vw, 62px); top: 240px; width: 82px; animation-duration: 7.9s; }
.decor-left-agent-blue { --decor-ratio: 112 / 70; --rotation: -7deg; --delay: -2.8s; left: clamp(-2px, 0.8vw, 12px); top: 414px; width: 74px; animation-duration: 7.1s; }
.decor-left-agent-orange { --decor-ratio: 116 / 73; --rotation: 5deg; --delay: -5.3s; left: clamp(104px, 8.2vw, 128px); top: 404px; width: 76px; animation-duration: 8.2s; }
.decor-left-agent-check-a { --decor-ratio: 1; --rotation: -10deg; --delay: -1.9s; left: clamp(40px, 4.2vw, 65px); top: 398px; width: 22px; animation-duration: 6.4s; }
.decor-left-agent-check-b { --decor-ratio: 1; --rotation: 8deg; --delay: -3.7s; left: clamp(106px, 8.4vw, 130px); top: 391px; width: 22px; animation-duration: 7.6s; }

.decor-right-clock { --decor-ratio: 1; --rotation: 4deg; --delay: -2.2s; right: clamp(92px, 8.4vw, 130px); top: 246px; width: 76px; animation-duration: 6.3s; }
.decor-right-refresh { --decor-ratio: 110 / 115; --rotation: 7deg; --delay: -4.4s; right: clamp(-4px, 0.8vw, 12px); top: 326px; width: 80px; animation-duration: 7.5s; }
.decor-right-calendar { --decor-ratio: 128 / 98; --rotation: 5deg; --delay: -1.1s; right: clamp(10px, 1.8vw, 28px); top: 446px; width: 80px; animation-duration: 6.8s; }
.decor-right-workflow { --decor-ratio: 88 / 58; --rotation: -6deg; --delay: -3.3s; right: clamp(102px, 8.8vw, 136px); top: 466px; width: 66px; animation-duration: 7.9s; }

.decor-extension-green { --decor-ratio: 126 / 76; --rotation: 8deg; --delay: -4.7s; right: clamp(146px, 12.8vw, 198px); top: 552px; width: 80px; animation-duration: 7.4s; }
.decor-extension-blue { --decor-ratio: 91 / 116; --rotation: -6deg; --delay: -2.3s; right: clamp(68px, 7vw, 108px); top: 536px; width: 66px; animation-duration: 8s; }
.decor-extension-orange { --decor-ratio: 104 / 48; --rotation: 7deg; --delay: -5.1s; right: clamp(30px, 3.5vw, 54px); top: 618px; width: 76px; animation-duration: 6.9s; }

.burst-left-check { --decor-ratio: 1; --rotation: -13deg; left: clamp(270px, 23.5vw, 365px); top: 326px; width: 30px; }
.burst-left-card { --decor-ratio: 58 / 48; --rotation: 9deg; left: clamp(230px, 20vw, 310px); top: 438px; width: 32px; animation-delay: -2.4s; }
.burst-left-node { --decor-ratio: 1; --rotation: -8deg; left: clamp(270px, 23.5vw, 365px); top: 544px; width: 25px; animation-delay: -4.8s; }
.burst-right-plug { --decor-ratio: 56 / 48; --rotation: 12deg; right: clamp(270px, 23.5vw, 365px); top: 330px; width: 32px; animation-delay: -1.2s; }
.burst-right-grid { --decor-ratio: 1; --rotation: -9deg; right: clamp(230px, 20vw, 310px); top: 442px; width: 29px; animation-delay: -3.6s; }
.burst-right-card { --decor-ratio: 58 / 48; --rotation: 8deg; right: clamp(270px, 23.5vw, 365px); top: 548px; width: 31px; animation-delay: -5.4s; }

.decor-confetti {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  user-select: none;
  box-shadow: 0 5px 13px rgba(45,65,56,0.08);
  transform: rotate(26deg);
}

.decor-confetti-one { left: clamp(168px, 13vw, 202px); top: 240px; width: 10px; height: 10px; }
.decor-confetti-two { right: clamp(176px, 13vw, 202px); top: 226px; width: 15px; height: 15px; }
.decor-confetti-three { left: clamp(176px, 13vw, 202px); top: 324px; width: 9px; height: 9px; }
.decor-confetti-four { right: clamp(188px, 14vw, 218px); top: 270px; width: 12px; height: 12px; }
.decor-confetti-five { right: clamp(170px, 13vw, 202px); top: 582px; width: 11px; height: 11px; }

@keyframes decor-float {
  from { transform: translate3d(0, 0, 0) rotate(var(--rotation)); }
  to { transform: translate3d(0, -7px, 0) rotate(var(--rotation)); }
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: center;
  pointer-events: none;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.065em;
  font-weight: 610;
}

h1 em, h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}

h1 em { display: inline-block; white-space: nowrap; }

.hero-title-prefix {
  width: fit-content;
  margin-inline: auto;
  display: block;
  pointer-events: auto;
}

.hero-rotator {
  height: 1.08em;
  margin-top: 0.18em;
  display: block;
  overflow: hidden;
  font-size: 0.9em;
  line-height: 1.08;
}

.hero-rotator-item {
  width: fit-content;
  margin-inline: auto;
  display: block;
  line-height: inherit;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: auto;
}

html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2 { letter-spacing: -0.045em; }

html[lang="zh-CN"] h1 { font-size: clamp(44px, 4.5vw, 62px); line-height: 1.08; }
html[lang="zh-CN"] h1 em,
html[lang="zh-CN"] h2 em { font-family: "STSong", "Songti SC", serif; font-style: italic; }

/* English serif lettering needs its own spacing, not the display sans tracking. */
html[lang="en"] h1,
html[lang="en"] h2 { letter-spacing: -0.025em; }

html[lang="en"] h1 em,
html[lang="en"] h2 em,
html[lang="en"] .agent-blueprint h3,
html[lang="en"] .automation-job h3,
html[lang="en"] .enterprise-stack strong {
  letter-spacing: 0;
  word-spacing: 0.04em;
}

html[lang="en"] .hero-rotator {
  height: 1.3em;
  margin-top: 0.25em;
  font-size: min(0.82em, 52px);
  line-height: 1.3;
}

html[lang="en"] .hero-rotator-item {
  max-width: 100%;
  padding-inline: 0.08em;
  white-space: normal;
  text-wrap: balance;
}

.hero-description {
  max-width: 680px;
  margin: 24px auto 0;
  color: #6f786f;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.hero-actions { margin-top: 26px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hero-actions .button { pointer-events: auto; }

.product-stage { position: relative; z-index: 2; width: min(1160px, calc(100% - 48px)); margin: -150px auto 0; }

.app-window {
  overflow: hidden;
  border: 1px solid rgba(27,36,41,0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-window);
}

.window-bar {
  height: 40px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid #e8e9e5;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(18px) saturate(120%);
}

.window-shell-toggle,
.window-shell-actions i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #f1f3f3; }
.window-shell-toggle { justify-self: start; }
.window-shell-toggle i { width: 12px; height: 12px; border: 1px solid #647078; border-radius: 3px; box-shadow: inset 4px 0 0 rgba(100,112,120,.15); }
.window-shell-actions { justify-self: end; display: flex; gap: 6px; }
.window-shell-actions i { background: transparent; }
.window-shell-actions i:first-child::before { content: ""; width: 11px; height: 9px; border: 1px solid #748088; border-radius: 2px; box-shadow: inset 4px 0 0 rgba(100,112,120,.13); }
.window-shell-actions i:last-child::before { content: ""; width: 12px; height: 8px; border: 1px solid #748088; border-radius: 2px; box-shadow: 3px -3px 0 -2px #fff, 3px -3px 0 -1px #748088; }

.tour-app-preview {
  position: relative;
  height: 660px;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  color: #1b2429;
  text-align: left;
}

.tour-app-preview button { color: inherit; }

.tour-sidebar {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 17px 12px 14px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(27,36,41,0.08);
  background: #f7f8f8;
}

.tour-sidebar button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.tour-sidebar-brand { height: 39px; padding: 0 7px; display: flex; align-items: center; gap: 8px; }
.tour-sidebar-brand img { width: 23px; height: 23px; border-radius: 6px; }
.tour-sidebar-brand strong { font-size: 12px; letter-spacing: -.02em; }
.tour-new-task { min-height: 37px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 9px !important; background: #1b2429 !important; color: #fff !important; font-size: 11px; font-weight: 650; }
.tour-new-task > span:first-child { font-size: 16px; font-weight: 400; }
.tour-nav-group { margin-top: 14px; display: grid; gap: 3px; }
.tour-nav-item { min-height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border-radius: 8px !important; color: #667078 !important; font-size: 11px; transition: background-color 160ms ease, color 160ms ease; }
.tour-nav-item:hover { background: rgba(27,36,41,0.045) !important; color: #1b2429 !important; }
.tour-nav-item.is-active { background: rgba(27,36,41,0.075) !important; color: #1b2429 !important; font-weight: 650; }
.tour-nav-icon { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(27,36,41,0.08); font-size: 10px; }
.tour-nav-icon-orb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6f864f; }
.tour-sidebar-label { margin: 18px 10px 7px; color: #9aa2a7; font-size: 8px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; }
.tour-recent-item { min-height: 32px; padding: 0 8px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 7px; border-radius: 7px !important; color: #59636a !important; font-size: 8px; }
.tour-recent-item:hover { background: rgba(27,36,41,0.045) !important; }
.tour-recent-item > span:first-child { width: 6px; height: 6px; border-radius: 2px; background: #9fadb4; }
.tour-recent-item.is-active { background: rgba(27,36,41,0.06) !important; color: #1b2429 !important; font-weight: 620; }
.tour-recent-item.is-active > span:first-child { background: #6f864f; }
.tour-recent-item small { color: #a1a9ae; font-size: 8px; }
.tour-recent-short { display: none; }
.tour-sidebar-bottom { margin-top: auto; padding: 11px 7px 0; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(27,36,41,0.07); }
.tour-avatar { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #e8eddf; color: #52663a; font-size: 10px; font-weight: 700; }
.tour-sidebar-bottom div { min-width: 0; display: grid; gap: 1px; }
.tour-sidebar-bottom strong { font-size: 9px; }
.tour-sidebar-bottom small { overflow: hidden; color: #8a949a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.tour-scenes { position: relative; min-width: 0; overflow: hidden; background: #fff; }
.tour-scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translate3d(18px,0,0); pointer-events: none; transition: opacity 240ms ease, transform 420ms cubic-bezier(.22,1,.36,1); }
.tour-scene.is-active { z-index: 2; opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
.tour-scene-topbar { min-height: 51px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(27,36,41,0.07); background: rgba(255,255,255,0.84); font-size: 11px; font-weight: 650; }
.tour-scene-topbar button { padding: 6px 9px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(27,36,41,0.09); border-radius: 7px; background: #fff; font-size: 9px; cursor: pointer; }
.tour-scene-topbar button:hover { background: #f7f8f8; }
.tour-scene-topbar button i { color: #8a949a; font-style: normal; }
.tour-top-action { background: #1b2429 !important; color: #fff !important; }

.tour-welcome-app { flex: 1; min-height: 0; padding: 18px 26px 14px; overflow: hidden; background: #fff; }
.tour-welcome-role { display: flex; align-items: center; gap: 8px; }
.tour-role-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #e8eddf; color: #52663a; font-size: 10px; font-weight: 700; }
.tour-welcome-role strong { font-size: 11px; }
.tour-welcome-center { width: min(640px, calc(100% - 30px)); margin: 20px auto 0; text-align: center; }
.tour-welcome-center h3 { margin: 0; font-size: 29px; line-height: 1.15; letter-spacing: -.045em; font-weight: 520; }
html[lang="zh-CN"] .tour-welcome-center h3 { font-family: "STSong", "Songti SC", serif; letter-spacing: -.02em; }
.tour-composer { width: 100%; min-height: 92px; margin-top: 18px; padding: 14px 14px 11px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; border: 1px solid rgba(27,36,41,0.12); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(27,36,41,0.06), inset 0 1px 0 rgba(255,255,255,.8); color: #7e8a92 !important; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.tour-composer:hover { border-color: rgba(27,36,41,0.25); box-shadow: 0 18px 44px rgba(27,36,41,0.11); transform: translateY(-2px); }
.tour-composer > span:first-child { font-size: 11px; }
.tour-composer-tools { display: flex; align-items: center; gap: 7px; }
.tour-composer-tools i { min-height: 26px; padding: 4px 7px; display: grid; gap: 1px; border: 1px solid rgba(27,36,41,.08); border-radius: 7px; background: #fff; color: #667078; font-size: 7px; font-style: normal; }
.tour-composer-tools i strong { color: #39434a; font-size: 8px; font-weight: 560; }
.tour-composer-tools .tour-plus { width: 26px; padding: 0; place-items: center; font-size: 13px; }
.tour-composer-tools .tour-model { min-height: auto; margin-left: auto; padding: 4px 5px; display: block; border: 0; color: #7c878e; }
.tour-composer-tools b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #1b2429; color: #fff; font-size: 11px; }
.tour-example-heading { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; color: #7d888f; font-size: 8px; text-align: left; }
.tour-example-heading small { color: #a0a8ad; font-size: 7px; }
.tour-agent-examples { margin-top: 7px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.tour-agent-examples > button { min-width: 0; min-height: 48px; padding: 7px 8px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(27,36,41,.08); border-radius: 10px; background: #fafbfb; color: #1b2429; text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.tour-agent-examples > button:hover { border-color: rgba(111,134,79,.32); background: #fff; transform: translateY(-1px); }
.tour-agent-examples > button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.tour-agent-examples strong, .tour-agent-examples small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-agent-examples strong { font-size: 8px; }
.tour-agent-examples small { color: #8a949a; font-size: 6.5px; }
.tour-agent-examples > button > i { color: #98a1a6; font-size: 8px; font-style: normal; }
.tour-example-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 700; }
.example-release { background: #e8eddf; color: #52663a; }
.example-research { background: #e2e8ed; color: #4a5f73; }
.example-brief { background: #edf0e8; color: #5d7046; }
.example-content { background: #f6ecd7; color: #91682e; }
.tour-blank-chat { margin: 7px auto 0; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #879198; font-size: 8px; cursor: pointer; }
.tour-blank-chat i { font-style: normal; }

.tour-agents-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px,.72fr) minmax(320px,1.28fr); }
.tour-agent-list { padding: 22px 16px; border-right: 1px solid rgba(27,36,41,0.07); background: #fafbfb; }
.tour-list-heading { padding: 0 7px 10px; display: flex; align-items: center; justify-content: space-between; color: #7e8a92; font-size: 9px; }
.tour-list-heading span { padding: 2px 6px; border-radius: 999px; background: #edf0f1; font-size: 8px; }
.tour-agent-card { width: 100%; min-height: 66px; padding: 10px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.tour-agent-card:hover { background: #fff; }
.tour-agent-card.is-active { border-color: rgba(27,36,41,.08); background: #fff; box-shadow: 0 7px 22px rgba(27,36,41,.05); }
.tour-agent-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.tour-agent-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tour-agent-card small { overflow: hidden; color: #879198; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tour-agent-card > i { color: #a1a9ae; font-style: normal; }
.tour-role-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #42505a; font-size: 12px; font-weight: 700; }
.role-release { background: #e8eddf; color: #52663a; }
.role-research { background: #e2e8ed; color: #4a5f73; }
.role-content { background: #f6ecd7; color: #91682e; }
.tour-agent-detail { margin: auto; width: min(520px, calc(100% - 46px)); padding: 23px; border: 1px solid rgba(27,36,41,.09); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 19px 50px rgba(27,36,41,.08); }
.tour-agent-detail-head { display: flex; align-items: center; gap: 11px; }
.tour-agent-detail-head > div { display: grid; gap: 3px; }
.tour-agent-detail-head strong { font-size: 13px; }
.tour-agent-detail-head small { color: #89939a; font-size: 8px; }
.tour-live-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #67756a; font-size: 8px; font-weight: 600; }
.tour-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #6f864f; box-shadow: 0 0 0 4px rgba(111,134,79,.11); }
.tour-agent-field { margin-top: 20px; padding: 14px; border-radius: 11px; background: #f7f8f8; }
.tour-agent-field > span, .tour-agent-settings span { color: #8a949a; font-size: 8px; }
.tour-agent-field p { margin: 6px 0 0; color: #4c575e; font-size: 10px; line-height: 1.55; }
.tour-agent-settings { margin-top: 9px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(27,36,41,.08); border-radius: 11px; background: rgba(27,36,41,.08); }
.tour-agent-settings > div { min-width: 0; padding: 11px 12px; display: grid; gap: 4px; background: #fff; }
.tour-agent-settings strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tour-agent-run, .tour-run-now { width: 100%; min-height: 36px; margin-top: 13px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 9px; background: #1b2429; color: #fff !important; font-size: 9px; font-weight: 650; cursor: pointer; }

.tour-task-layout { flex: 1; min-height: 0; padding: 28px; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); gap: 24px; background: #fafbfb; }
.tour-task-hero, .tour-run-list { align-self: center; border: 1px solid rgba(27,36,41,.08); border-radius: 17px; background: #fff; box-shadow: 0 16px 42px rgba(27,36,41,.06); }
.tour-task-hero { padding: 28px; }
.tour-task-status { display: inline-flex; align-items: center; gap: 6px; color: #66756a; font-size: 8px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.tour-task-status i { width: 7px; height: 7px; border-radius: 50%; background: #6f864f; }
.tour-task-hero h3 { margin: 15px 0 8px; font-size: 23px; line-height: 1.1; letter-spacing: -.04em; }
.tour-task-hero > p { max-width: 440px; margin: 0; color: #69747b; font-size: 10px; line-height: 1.55; }
.tour-trigger-switch { width: fit-content; margin-top: 23px; padding: 3px; display: flex; border-radius: 8px; background: #f1f3f3; }
.tour-trigger-switch button { padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: #7c878e; font-size: 8px; cursor: pointer; }
.tour-trigger-switch button.is-active { background: #fff; color: #1b2429; box-shadow: 0 2px 8px rgba(27,36,41,.07); }
.tour-trigger-summary { margin-top: 18px; padding-top: 14px; display: flex; justify-content: space-between; border-top: 1px solid rgba(27,36,41,.07); font-size: 9px; }
.tour-trigger-summary span { color: #879198; }
.tour-run-list { overflow: hidden; }
.tour-run-head { padding: 15px 16px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(27,36,41,.07); font-size: 9px; }
.tour-run-head span { color: #6f864f; font-size: 8px; }
.tour-run-row { min-height: 66px; padding: 12px 15px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid rgba(27,36,41,.06); }
.tour-run-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #e8eddf; color: #52663a; font-size: 9px; font-weight: 700; }
.tour-run-row div { min-width: 0; display: grid; gap: 3px; }
.tour-run-row strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tour-run-row small, .tour-run-row > span:last-child { color: #8b959b; font-size: 7px; }
.tour-run-now { width: auto; margin: 14px 15px; }

.tour-workspace-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); }
.tour-conversation { position: relative; min-width: 0; padding: 30px 28px 94px; overflow: hidden; background: #fff; }
.tour-conversation-context { width: min(520px,92%); margin-bottom: 18px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(111,134,79,.2); border-radius: 11px; background: rgba(232,237,223,.24); color: #536148; }
.tour-conversation-context > span:first-child { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #fff; font-size: 9px; font-weight: 700; box-shadow: 0 3px 10px rgba(27,36,41,.05); }
.tour-conversation-context > span:last-child { min-width: 0; display: grid; gap: 2px; }
.tour-conversation-context strong { overflow: hidden; color: #34412d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tour-conversation-context small { overflow: hidden; color: #7c8876; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.tour-user-message { width: min(390px,78%); margin-left: auto; padding: 12px 14px; border-radius: 13px 13px 4px 13px; background: #f0f1f1; color: #4a555c; font-size: 9px; line-height: 1.55; }
.tour-agent-message { width: min(520px,92%); margin-top: 25px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; }
.tour-agent-message > img { width: 27px; height: 27px; border-radius: 8px; }
.tour-agent-message > div > strong { font-size: 9px; }
.tour-agent-message p { margin: 7px 0 0; color: #576269; font-size: 9px; line-height: 1.55; }
.tour-subagents { margin-top: 13px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(27,36,41,.08); border-radius: 10px; background: #fafbfb; font-size: 8px; }
.tour-subagents > span { display: flex; align-items: center; gap: 7px; }
.tour-subagents i { width: 6px; height: 6px; border-radius: 50%; background: #6f864f; animation: tour-pulse 1.8s ease-in-out infinite; }
.tour-mini-composer { position: absolute; left: 24px; right: 24px; bottom: 19px; min-height: 68px; padding: 11px 12px 9px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; border: 1px solid rgba(27,36,41,.11); border-radius: 13px; background: rgba(255,255,255,.9); box-shadow: 0 13px 34px rgba(27,36,41,.09); color: #8a949a; font-size: 8px; backdrop-filter: blur(14px); }
.tour-mini-tools { display: flex; align-items: center; gap: 10px; }
.tour-mini-tools i { color: #657078; font-size: 7px; font-style: normal; }
.tour-mini-tools small { margin-left: auto; color: #7e8a92; font-size: 7px; }
.tour-mini-composer b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #1b2429; color: #fff; }
.tour-workspace-panel { min-width: 0; border-left: 1px solid rgba(27,36,41,.08); background: #f8f9f9; }
.tour-workspace-tabs { height: 42px; padding: 0 10px; display: flex; align-items: end; gap: 13px; border-bottom: 1px solid rgba(27,36,41,.08); }
.tour-workspace-tabs button { height: 32px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8a949a; font-size: 8px; cursor: pointer; }
.tour-workspace-tabs button.is-active { border-bottom-color: #1b2429; color: #1b2429; font-weight: 650; }
.tour-workspace-content { padding: 16px; }
.tour-workspace-heading { padding-bottom: 11px; display: flex; justify-content: space-between; color: #68737a; font-size: 8px; }
.tour-workspace-heading strong { color: #1b2429; }
.tour-check-row { min-height: 42px; padding: 0 2px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 7px; border-top: 1px solid rgba(27,36,41,.06); font-size: 8px; }
.tour-check-row i { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #d5dadd; border-radius: 5px; color: transparent; font-size: 7px; font-style: normal; }
.tour-check-row.complete i { border-color: transparent; background: #e8eddf; color: #52663a; }
.tour-check-row.running i { border: 2px solid #d8dddf; border-top-color: #6f864f; border-radius: 50%; animation: tour-spin 1.1s linear infinite; }
.tour-check-row small { color: #8b959b; font-size: 7px; }
.tour-check-row.complete small { color: #6f864f; }
.tour-file-row { min-height: 56px; display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 9px; align-items: center; border-bottom: 1px solid rgba(27,36,41,.06); }
.tour-file-row > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #e2e8ed; color: #4a5f73; font-size: 6px; font-style: normal; font-weight: 700; }
.tour-file-row > span { min-width: 0; display: grid; gap: 2px; }
.tour-file-row strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tour-file-row small { color: #8b959b; font-size: 7px; }
.tour-output-card { min-height: 210px; padding: 18px; border: 1px solid rgba(27,36,41,.08); border-radius: 13px; background: #fff; }
.tour-output-card > span { color: #6f864f; font-size: 7px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.tour-output-card > strong { margin-top: 10px; display: block; font-size: 12px; }
.tour-output-card p { margin: 8px 0 20px; color: #7e8a92; font-size: 8px; line-height: 1.5; }
.tour-output-card > i { height: 5px; display: block; overflow: hidden; border-radius: 999px; background: #edf0f1; }
.tour-output-card > i span { width: 58%; height: 100%; display: block; border-radius: inherit; background: #6f864f; }

/* Product tour mirrors the renderer's real component anatomy. The mock data is
   intentionally isolated here; Electron stores and runtime services are not bundled. */
.tour-page-header { min-height: 92px; padding: 23px 28px 17px; display: flex; align-items: end; justify-content: space-between; gap: 22px; border-bottom: 1px solid rgba(27,36,41,.08); }
.tour-page-header > div { min-width: 0; }
.tour-page-header h3, .tour-hub-header h3, .tour-works-head h3 { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -.035em; }
.tour-page-header p, .tour-hub-header > p, .tour-works-head p { margin: 5px 0 0; color: #7d878d; font-size: 9px; line-height: 1.5; }
.tour-primary-action, .tour-list-page-header > button { min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: #1b2429; color: #fff !important; font-size: 9px; font-weight: 650; cursor: pointer; }
.tour-agent-library { flex: 1; min-height: 0; padding: 24px 28px; overflow: auto; }
.tour-content-label { margin-bottom: 11px; color: #899399; font-size: 8px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.tour-workspace-agent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.tour-workspace-agent { min-width: 0; min-height: 178px; padding: 16px; display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto 1fr auto; align-content: start; gap: 11px; border: 1px solid #dce4d3; border-radius: 12px; background: rgba(232,237,223,.2); color: #1b2429; text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.tour-workspace-agent:hover { border-color: #9eb582; background: rgba(232,237,223,.42); transform: translateY(-2px); }
.tour-workspace-agent-copy { min-width: 0; display: grid; align-content: center; gap: 4px; }
.tour-workspace-agent-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tour-workspace-agent-copy small { color: #778188; font-size: 7px; line-height: 1.45; }
.tour-agent-metrics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-content: start; gap: 7px 10px; color: #818b91; }
.tour-agent-metrics i { font-size: 7px; font-style: normal; }
.tour-workspace-agent time { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid rgba(111,134,79,.14); color: #98a0a5; font-size: 7px; }
.tour-agent-empty-note { margin-top: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; border: 1px dashed rgba(27,36,41,.13); border-radius: 11px; color: #667078; }
.tour-agent-empty-note > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #f1f3f3; font-size: 14px; }
.tour-agent-empty-note > div { display: grid; gap: 3px; }
.tour-agent-empty-note strong { color: #39434a; font-size: 9px; }
.tour-agent-empty-note small { font-size: 7px; }

.tour-hub-header { min-height: 112px; padding: 23px 28px 0; border-bottom: 1px solid rgba(27,36,41,.08); }
.tour-hub-tabs { height: 42px; margin-top: 13px; display: flex; align-items: end; gap: 5px; }
.tour-hub-tabs button { height: 35px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #7e888e; font-size: 9px; cursor: pointer; }
.tour-hub-tabs button.is-active { border-bottom-color: #6f864f; color: #52663a; font-weight: 650; }
.tour-hub-panel { flex: 1; min-height: 0; padding: 18px 28px 24px; overflow: auto; }
.tour-plugin-install { padding: 15px; border: 1px solid rgba(27,36,41,.11); border-radius: 10px; background: #f8f9f9; }
.tour-plugin-install > div:first-child { display: flex; align-items: center; gap: 9px; }
.tour-plugin-install > div:first-child > span:last-child { display: flex; align-items: baseline; gap: 7px; }
.tour-plugin-install strong { font-size: 9px; }
.tour-plugin-install small { color: #899399; font-size: 7px; }
.tour-install-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #e8eddf; color: #52663a; }
.tour-plugin-install > div:nth-child(2) { margin-top: 11px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
.tour-plugin-install > div:nth-child(2) > button, .tour-plugin-install label, .tour-hub-toolbar > button, .tour-tool-group-title > button { min-height: 31px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(27,36,41,.12); border-radius: 7px; background: #fff; font-size: 8px; }
.tour-plugin-install label { padding-right: 4px; }
.tour-plugin-install label > input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #7d878d; font-size: 7px; }
.tour-plugin-install label > button { min-height: 24px; padding: 0 9px; border: 0; border-radius: 5px; background: #1b2429; color: #fff; font-size: 7px; cursor: pointer; }
.tour-plugin-install > p { margin: 9px 0 0; color: #557139; font-size: 7px; }
.tour-plugin-list { margin-top: 14px; display: grid; gap: 8px; }
.tour-plugin-row { min-height: 78px; padding: 13px 14px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(27,36,41,.09); border-radius: 10px; }
.tour-plugin-row > i { width: 7px; height: 7px; border-radius: 50%; background: #a5adb1; }
.tour-plugin-row > i.is-on { background: #7b9857; }
.tour-plugin-row > span { min-width: 0; display: grid; gap: 3px; }
.tour-plugin-row strong { font-size: 9px; }
.tour-plugin-row strong small { margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: #f0f2f2; color: #899399; font-size: 6px; font-weight: 500; }
.tour-plugin-row > span > small, .tour-plugin-row em { color: #7e888e; font-size: 7px; font-style: normal; }
.tour-toggle { position: relative; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: #d9dddf; cursor: pointer; transition: background-color 160ms ease; }
.tour-toggle > i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(27,36,41,.2); transition: transform 180ms ease; }
.tour-toggle.is-on { background: #6f864f; }
.tour-toggle.is-on > i { transform: translateX(14px); }
.tour-hub-toolbar { display: flex; gap: 8px; }
.tour-hub-toolbar > label, .tour-works-search { flex: 1; min-height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(27,36,41,.11); border-radius: 8px; background: #fff; }
.tour-hub-toolbar input, .tour-works-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #39434a; font-size: 8px; }
.tour-hub-summary { margin: 13px 0 8px; color: #899399; font-size: 7px; }
.tour-skill-list { display: grid; gap: 7px; }
.tour-skill-row { min-height: 67px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(27,36,41,.09); border-radius: 9px; }
.tour-skill-row > span { min-width: 0; flex: 1; display: grid; gap: 5px; }
.tour-skill-row strong { font-size: 9px; }
.tour-skill-row strong i { margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: #edf3e5; color: #617d41; font-size: 6px; font-style: normal; font-weight: 500; }
.tour-skill-row small { color: #7e888e; font-size: 7px; }
.tour-tool-group { padding: 14px 0; border-bottom: 1px solid rgba(27,36,41,.08); }
.tour-tool-group:first-child { padding-top: 0; }
.tour-tool-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-tool-group-title > span { display: grid; gap: 3px; }
.tour-tool-group-title strong { font-size: 10px; }
.tour-tool-group-title small { color: #879198; font-size: 7px; }
.tour-tool-row { min-height: 58px; margin-top: 8px; padding: 10px 12px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto auto; align-items: center; gap: 10px; border: 1px solid rgba(27,36,41,.08); border-radius: 9px; }
.tour-tool-row > i { width: 7px; height: 7px; border-radius: 50%; background: #9aa2a7; }
.tour-tool-row > i.is-connected { background: #7b9857; }
.tour-tool-row > span { display: grid; gap: 3px; }
.tour-tool-row strong { font-size: 9px; }
.tour-tool-row small, .tour-tool-row em, .tour-tool-row b { color: #849097; font-size: 7px; font-style: normal; font-weight: 500; }
.tour-tool-row b { color: #61784a; }
.tour-cli-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.tour-cli-grid > span { padding: 11px; display: flex; justify-content: space-between; border: 1px solid rgba(27,36,41,.08); border-radius: 8px; font-size: 8px; }
.tour-cli-grid i { font-style: normal; font-weight: 650; }
.tour-cli-grid b { color: #899399; font-size: 7px; font-weight: 500; }

.tour-list-page-header { min-height: 64px; padding: 0 23px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(27,36,41,.08); }
.tour-page-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #e8eddf; color: #52663a; font-size: 12px; }
.tour-list-page-header h3 { flex: 1; margin: 0; font-size: 13px; }
.tour-task-list { flex: 1; min-height: 0; padding: 18px 23px; overflow: auto; }
.tour-task-row { min-height: 82px; padding: 12px; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(27,36,41,.09); border-radius: 10px; }
.tour-task-row + .tour-task-row { margin-top: 8px; }
.tour-task-power { width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #edf0f1; color: #8c969c; font-size: 7px; cursor: pointer; }
.tour-task-power.is-on { background: #e8eddf; color: #52663a; }
.tour-task-row > span:nth-child(2) { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; }
.tour-task-row strong { max-width: 70%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tour-task-row > span:nth-child(2) > i { padding: 2px 6px; border-radius: 999px; background: #edf3e5; color: #617d41; font-size: 6px; font-style: normal; }
.tour-task-row > span:nth-child(2) > i.is-running { background: #f7eed9; color: #976d2c; }
.tour-task-row small { flex-basis: 100%; display: flex; align-items: center; gap: 6px; color: #879198; }
.tour-task-row small b { font-size: 7px; font-weight: 500; }
.tour-task-actions { display: flex; opacity: 0; transition: opacity 150ms ease; }
.tour-task-row:hover .tour-task-actions, .tour-task-row:focus-within .tour-task-actions { opacity: 1; }
.tour-task-actions button { width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; color: #899399; cursor: pointer; }
.tour-task-actions button:hover { background: #f1f3f3; color: #52663a; }
.tour-task-editor { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 30px; background: rgba(27,36,41,.38); }
.tour-task-editor-card { position: relative; width: min(620px,calc(100% - 20px)); min-height: 410px; display: grid; grid-template-rows: auto 1fr auto; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(27,36,41,.25); }
.tour-task-editor-head { padding: 17px 18px 11px; display: flex; align-items: center; gap: 8px; }
.tour-task-editor-head strong { flex: 1; font-size: 14px; }
.tour-task-editor-head button { padding: 6px 9px; border: 1px solid rgba(27,36,41,.1); border-radius: 999px; background: #fff; color: #69747b; font-size: 7px; cursor: pointer; }
.tour-task-editor-head button:last-child { width: 27px; height: 27px; padding: 0; border: 0; font-size: 14px; }
.tour-task-editor-card > p { margin: 0; padding: 12px 18px; color: #566168; font-size: 10px; line-height: 1.65; }
.tour-task-editor-footer { padding: 12px 15px; display: flex; align-items: end; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(27,36,41,.08); }
.tour-task-editor-footer > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-task-editor-footer button { min-height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; background: #f2f4f3; color: #5f6a70; font-size: 7px; cursor: pointer; }
.tour-task-editor-footer .is-smart { background: #eef0fa; color: #5d6192; }
.tour-task-editor-footer > span { display: flex; gap: 5px; }
.tour-task-editor-footer > span button { background: transparent; }
.tour-task-editor-footer > span .tour-create-task { border-radius: 7px; background: #1b2429; color: #fff; }
.tour-task-trigger-popover { position: absolute; left: 150px; bottom: 53px; width: 245px; padding: 10px; border: 1px solid rgba(27,36,41,.1); border-radius: 10px; background: #fff; box-shadow: 0 14px 40px rgba(27,36,41,.15); }
.tour-task-trigger-popover > div { display: flex; padding: 2px; border-radius: 7px; background: #f1f3f3; }
.tour-task-trigger-popover button { flex: 1; min-height: 25px; border: 0; border-radius: 5px; background: transparent; color: #7d878d; font-size: 7px; cursor: pointer; }
.tour-task-trigger-popover button.is-active { background: #fff; color: #52663a; box-shadow: 0 1px 4px rgba(27,36,41,.08); }
.tour-task-trigger-popover p { margin: 9px 2px 1px; color: #68737a; font-size: 7px; }

.tour-works-page { flex: 1; min-height: 0; padding: 28px 34px; overflow: auto; background: #f8f9f9; }
.tour-works-head { display: flex; align-items: start; gap: 11px; }
.tour-works-head > div { min-width: 0; flex: 1; }
.tour-works-head > button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #7d878d; cursor: pointer; font-size: 13px; }
.tour-works-search { margin-top: 19px; background: #fff; }
.tour-works-list { margin-top: 12px; overflow: hidden; border: 1px solid rgba(27,36,41,.1); border-radius: 11px; background: #fff; }
.tour-works-list > button { width: 100%; min-height: 70px; padding: 11px 13px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid rgba(27,36,41,.07); background: #fff; color: #1b2429; text-align: left; cursor: pointer; }
.tour-works-list > button:last-child { border-bottom: 0; }
.tour-works-list > button:hover { background: #f8f9f9; }
.tour-work-thumb { width: 45px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: #edf0f1; color: #657078; font-size: 7px; font-weight: 700; }
.report-thumb { background: #e8eddf; color: #52663a; }
.brief-thumb { background: #e2e8ed; color: #4a5f73; }
.tour-works-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.tour-works-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tour-works-list small, .tour-works-list time { color: #899399; font-size: 7px; }
.tour-works-empty { padding: 45px; text-align: center; color: #899399; font-size: 9px; }

.tour-subagent-card { margin-top: 12px; overflow: hidden; border: 1px solid rgba(111,134,79,.28); border-radius: 9px; background: rgba(232,237,223,.22); }
.tour-subagent-card > div:first-child { min-height: 35px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(111,134,79,.16); font-size: 7px; }
.tour-subagent-card > div:first-child strong { color: #52663a; }
.tour-subagent-card > div:first-child i { color: #4f8b5b; font-style: normal; }
.tour-subagent-card > div:first-child small { margin-left: auto; color: #899399; }
.tour-subagent-card > div:nth-child(2) { padding: 9px; background: #fff; }
.tour-subagent-card > div:nth-child(2) p { margin: 0 0 8px; color: #59646a; font-size: 7px; }
.tour-subagent-card > div:nth-child(2) > span { min-height: 24px; display: grid; grid-template-columns: 12px 38px minmax(0,1fr); align-items: center; gap: 5px; font-size: 6px; }
.tour-subagent-card > div:nth-child(2) em { color: #879198; font-style: normal; }
.tour-subagent-card footer { min-height: 29px; padding: 0 9px; display: flex; align-items: center; color: #899399; font-size: 6px; }
.tour-subagent-card footer button { margin-left: auto; display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #52663a; font-size: 6px; cursor: pointer; }
.tour-workspace-tabs { align-items: center; overflow: hidden; }
.tour-workspace-tabs button { flex: 0 1 auto; height: 25px; padding: 0 7px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; text-overflow: ellipsis; white-space: nowrap; }
.tour-workspace-tabs button.is-active { border-color: rgba(27,36,41,.12); background: #fff; }
.tour-workspace-tabs .tour-workspace-plus { flex: 0 0 auto; width: 23px; padding: 0; border: 0; }
.tour-workspace-summary { padding: 7px 0; }
.tour-workspace-summary section { border-bottom: 1px solid rgba(27,36,41,.06); }
.tour-workspace-summary h4 { min-height: 30px; margin: 0; padding: 0 9px; display: flex; align-items: center; gap: 5px; color: #68737a; font-size: 7px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.tour-workspace-summary h4 i { font-style: normal; }
.tour-workspace-summary section > button { width: calc(100% - 14px); min-height: 48px; margin: 0 7px 8px; padding: 7px; display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 7px; border: 0; border-radius: 7px; background: #fff; color: #1b2429; text-align: left; cursor: pointer; }
.tour-summary-file { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: #e8eddf; color: #52663a; font-size: 7px; }
.tour-workspace-summary section > button > span:last-child { min-width: 0; display: grid; gap: 3px; }
.tour-workspace-summary strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.tour-workspace-summary small { color: #899399; font-size: 6px; }
.tour-source-chips { padding: 0 9px 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.tour-source-chips span { padding: 4px 6px; border: 1px solid rgba(27,36,41,.08); border-radius: 5px; background: #fff; color: #68737a; font-size: 6px; }
.tour-report-document { min-height: 350px; padding: 23px 20px; background: #fff; }
.tour-report-document > span { color: #61784a; font-size: 6px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.tour-report-document h4 { margin: 8px 0 11px; font-size: 13px; }
.tour-report-document p { color: #59646a; font-size: 7px; line-height: 1.55; }
.tour-report-document strong { display: block; margin-top: 17px; font-size: 8px; }
.tour-report-document ul { margin: 8px 0 0; padding-left: 15px; color: #657078; font-size: 7px; line-height: 1.75; }

.tour-caption { position: relative; min-height: 104px; padding: 22px 24px 20px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 22px; }
.tour-caption-index { align-self: start; display: flex; gap: 5px; color: #9aa2a7; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; }
.tour-caption-index span:first-child { color: #1b2429; }
.tour-caption-index i { font-style: normal; }
.tour-caption-copy strong { display: block; font-size: 17px; letter-spacing: -.025em; }
.tour-caption-copy p { margin: 6px 0 0; color: #6f7a80; font-size: 11px; line-height: 1.5; }
.tour-caption-hint { display: flex; align-items: center; gap: 8px; color: #778188; font-size: 9px; }
.tour-caption-hint i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(27,36,41,.1); border-radius: 50%; color: #1b2429; font-style: normal; }
.tour-caption-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: rgba(27,36,41,.07); }
.tour-caption-progress span { display: block; width: 100%; height: 100%; background: #6f864f; transform: scaleX(0); transform-origin: left; }
.product-stage.is-autoplaying .tour-caption-progress span { animation: tour-progress 5.6s linear both; }

@keyframes tour-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tour-spin { to { transform: rotate(360deg); } }
@keyframes tour-pulse { 50% { opacity: .35; transform: scale(.78); } }

.section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 152px 0; }

.section-index {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}

.section-index-light { color: #a8bb87; }

.pi-principle {
  min-height: 100svh;
  padding-top: 116px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 52px;
  align-content: center;
}

.pi-principle h2 { font-size: clamp(44px, 4.5vw, 62px); }

.pi-principle-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(46px, 7vw, 110px);
  align-items: end;
}

h2 {
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.058em;
  font-weight: 590;
}

.pi-principle-summary p,
.acp-intro p {
  width: min(640px, 100%);
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.pi-principle-summary strong {
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.55;
}

.pi-flow {
  --pi-flow-duration: 8s;
  position: relative;
  grid-column: 2;
  height: 420px;
  margin-top: 46px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  contain: layout paint;
}

.pi-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pi-flow-line {
  stroke: rgba(31, 37, 32, 0.2);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  vector-effect: non-scaling-stroke;
}

.pi-flow-node,
.pi-flow-result,
.pi-flow-core {
  position: absolute;
  z-index: 2;
}

.pi-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  translate: -50% -50%;
}

.pi-flow-node > span:last-child,
.pi-flow-result > div {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.pi-flow-node strong,
.pi-flow-result strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.pi-flow-node small,
.pi-flow-result small {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.3;
}

.pi-flow-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(31, 37, 32, 0.18);
  border-radius: 50%;
  background: var(--paper);
  color: var(--sage-dark);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 650;
}

.pi-flow-task { left: 8%; top: 50%; translate: 0 -50%; }
.pi-flow-task > i {
  width: 9px;
  height: 9px;
  border: 2px solid var(--sage);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 5px rgba(95, 118, 63, 0.1);
}
.pi-flow-context { left: 23%; top: 23%; }
.pi-flow-skill { left: 20%; top: 77%; }
.pi-flow-tool { left: 35%; top: 88%; }

.pi-flow-core {
  left: 50%;
  top: 50%;
  width: 198px;
  height: 198px;
  padding: 34px 18px 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 37, 32, 0.2);
  border-radius: 50%;
  background: var(--paper);
  translate: -50% -50%;
}

.pi-flow-core::before,
.pi-flow-core::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(95, 118, 63, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.pi-flow-core::before { inset: -18px; }
.pi-flow-core::after { inset: -37px; border-color: rgba(31, 37, 32, 0.07); }

.pi-flow-mark {
  width: 31px;
  height: 31px;
  color: var(--ink);
}

.pi-flow-mark svg { width: 100%; height: 100%; }
.pi-flow-core > span {
  margin-top: 10px;
  color: var(--sage);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pi-flow-core > strong { margin-top: 5px; font-size: 27px; letter-spacing: -0.045em; }
.pi-flow-core > small {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 9px;
}
.pi-flow-core > small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

.pi-flow-result {
  left: 79%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  translate: 0 -50%;
}
.pi-flow-result > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-size: 16px;
  font-weight: 700;
}

.pi-flow-caption {
  position: absolute;
  right: 0;
  bottom: 18px;
  margin: 0;
  color: var(--ink-muted);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.pi-flow.is-active .pi-flow-task { animation: pi-flow-node-in var(--pi-flow-duration) 0s both infinite; }
.pi-flow.is-active .pi-flow-context { animation: pi-flow-node-in var(--pi-flow-duration) 0.55s both infinite; }
.pi-flow.is-active .pi-flow-skill { animation: pi-flow-node-in var(--pi-flow-duration) 1s both infinite; }
.pi-flow.is-active .pi-flow-tool { animation: pi-flow-node-in var(--pi-flow-duration) 1.45s both infinite; }
.pi-flow.is-active .pi-flow-result { animation: pi-flow-result-in var(--pi-flow-duration) 2.9s both infinite; }
.pi-flow.is-active .pi-flow-core { animation: pi-flow-core-work var(--pi-flow-duration) 1.65s both infinite; }
.pi-flow.is-active .pi-flow-core::before { animation: pi-flow-ring var(--pi-flow-duration) 1.7s both infinite; }
.pi-flow.is-active .pi-flow-core > small i { animation: pi-flow-status 1.5s ease-in-out infinite; }
.pi-flow.is-active .pi-flow-line { animation: pi-flow-line var(--pi-flow-duration) both infinite; }
.pi-flow.is-active .pi-flow-line-context { animation-delay: 0.55s; }
.pi-flow.is-active .pi-flow-line-skill { animation-delay: 1s; }
.pi-flow.is-active .pi-flow-line-tool { animation-delay: 1.45s; }
.pi-flow.is-active .pi-flow-line-result { animation-delay: 2.9s; }

@keyframes pi-flow-node-in {
  0%, 5% { opacity: 0; transform: translate3d(-9px, 5px, 0); }
  13%, 73% { opacity: 1; transform: translate3d(0, 0, 0); }
  84%, 100% { opacity: 0.32; transform: translate3d(0, 0, 0); }
}

@keyframes pi-flow-result-in {
  0%, 29% { opacity: 0; transform: translate3d(-12px, 0, 0); }
  39%, 77% { opacity: 1; transform: translate3d(0, 0, 0); }
  88%, 100% { opacity: 0.32; transform: translate3d(0, 0, 0); }
}

@keyframes pi-flow-core-work {
  0%, 18%, 89%, 100% { border-color: rgba(31, 37, 32, 0.2); transform: scale(1); }
  30%, 70% { border-color: rgba(95, 118, 63, 0.58); transform: scale(1.015); }
}

@keyframes pi-flow-ring {
  0%, 20%, 88%, 100% { opacity: 0.3; transform: scale(0.97); }
  38%, 72% { opacity: 1; transform: scale(1.035); }
}

@keyframes pi-flow-line {
  0%, 8% { opacity: 0.14; stroke-dashoffset: 22; }
  24%, 72% { opacity: 0.72; stroke-dashoffset: 0; }
  88%, 100% { opacity: 0.16; stroke-dashoffset: -20; }
}

@keyframes pi-flow-status {
  50% { opacity: 0.35; transform: scale(0.76); }
}

.agent-section {
  min-height: 100svh;
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
}

.agent-section-inner {
  width: min(100%, var(--max));
  min-height: calc(100svh - 56px);
  margin: 0 auto;
  padding: 108px 0 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agent-heading {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.agent-heading h2 { margin: 0; font-size: clamp(52px, 5.6vw, 78px); }

.agent-showcase {
  min-height: 330px;
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
}

.agent-blueprint {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.agent-blueprint img { width: 48px; height: 48px; border-radius: 13px; }
.agent-blueprint > span {
  margin-top: 17px;
  color: #8f998f;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.agent-blueprint h3 {
  margin: 7px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.agent-example-tabs {
  width: min(560px, 100%);
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agent-example-tabs button {
  min-height: 55px;
  padding: 9px 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
  border-bottom: 1px solid rgba(250, 248, 243, 0.14);
  background: transparent;
  color: #7f887f;
  cursor: pointer;
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.agent-example-tabs button + button { border-left: 1px solid rgba(250, 248, 243, 0.12); }
.agent-example-tabs button > span {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}
.agent-example-tabs button strong { font-size: 11px; font-weight: 540; }
.agent-example-tabs button:hover,
.agent-example-tabs button:focus-visible,
.agent-example-tabs button.is-active {
  background: rgba(250, 248, 243, 0.05);
  color: var(--paper);
}

.capability-rail {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
}
.capability-rail > span {
  color: #7f887f;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.capability-marks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.capability-marks > a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #aeb6ae;
  border-radius: 8px;
  transition: color 180ms ease, background-color 180ms ease;
}
.capability-marks > a:hover { color: var(--paper); background: rgba(250, 248, 243, 0.04); }
.capability-marks > a + a { border-left: 1px solid rgba(250, 248, 243, 0.1); }
.capability-marks img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: invert(1) grayscale(1);
  opacity: 0.76;
}
.capability-marks > a:nth-child(2) img { width: 37px; }
.capability-marks i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 248, 243, 0.24);
  border-radius: 50%;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-style: normal;
}
.capability-marks strong {
  font-size: 10px;
  font-weight: 540;
}

.acp-section {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 52px;
  align-content: center;
}
.acp-intro { max-width: 920px; }
.acp-intro p { margin-top: 26px; font-size: 15px; }
.acp-stage {
  grid-column: 2;
  margin-top: 66px;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) 190px minmax(300px, 1.15fr);
  align-items: stretch;
}
.acp-agent-node {
  min-height: 218px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f7f7f4;
}
.acp-agent-node img { width: 48px; height: 48px; margin-bottom: auto; border-radius: 13px; }
.acp-agent-node span {
  color: var(--sage);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.acp-agent-node strong { margin-top: 7px; font-size: 25px; letter-spacing: -.045em; }
.acp-bridge { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.acp-bridge i { height: 1px; background: var(--line); }
.acp-bridge span {
  position: relative;
  z-index: 1;
  padding: 9px 12px;
  border: 1px solid rgba(95,118,63,.25);
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.acp-bridge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 5px rgba(95,118,63,.1);
  animation: acp-signal 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
.acp-workflows { display: grid; border-top: 1px solid var(--line); }
.acp-workflows button {
  min-height: 72px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.acp-workflows button::after { content: "↗"; opacity: 0; transform: translate(-4px,4px); transition: opacity 180ms ease, transform 180ms ease; }
.acp-workflows button span { color: var(--sage); font-size: 9px; }
.acp-workflows button strong { font-size: 15px; font-weight: 560; }
.acp-workflows button:hover,
.acp-workflows button.is-active { background: #f7f7f4; color: var(--ink); }
.acp-workflows button.is-active::after { opacity: 1; transform: translate(0,0); }
.acp-flow-panel {
  grid-column: 1 / -1;
  margin-top: 28px;
  min-height: 58px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1.25fr;
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 12px;
}
.acp-flow-panel i { color: var(--sage); font-style: normal; }
.acp-flow-panel strong { color: var(--ink); font-size: 12px; font-weight: 570; text-align: right; }
.acp-note {
  grid-column: 2;
  margin-top: 54px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
}
.acp-note strong { font-size: 17px; letter-spacing: -.025em; }
.acp-note p { margin: 0; color: var(--ink-soft); font-size: 13px; }

@keyframes acp-signal {
  0%, 12% { left: 4%; opacity: 0; }
  22%, 78% { opacity: 1; }
  88%, 100% { left: calc(96% - 7px); opacity: 0; }
}

.automation-section { min-height: 100svh; padding: 28px; background: var(--ink); color: var(--paper); }
.automation-section-inner {
  width: min(100%, var(--max));
  min-height: calc(100svh - 56px);
  margin: 0 auto;
  padding: 108px 0 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.automation-heading { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 52px; align-items: center; }
.automation-heading h2 { margin: 0; font-size: clamp(52px,5.6vw,78px); }
.automation-demo { margin-top: 70px; border-top: 1px solid rgba(250,248,243,.14); }
.automation-trigger-tabs { width: fit-content; margin: 24px auto 0; padding: 4px; display: flex; gap: 3px; border: 1px solid rgba(250,248,243,.13); border-radius: 999px; }
.automation-trigger-tabs button {
  min-width: 104px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #899289;
  font-size: 11px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.automation-trigger-tabs button:hover { color: var(--paper); }
.automation-trigger-tabs button.is-active { background: var(--paper); color: var(--ink); }
.automation-panel { min-height: 340px; padding-top: 54px; }
.automation-job { display: flex; flex-direction: column; align-items: center; text-align: center; }
.automation-job > span {
  color: #a8bb87;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.automation-job h3 { margin: 12px 0 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(46px,5.6vw,72px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.automation-job small { margin-top: 14px; color: #909a90; font-size: 11px; }
.automation-run {
  position: relative;
  width: min(760px,100%);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.automation-run::before { content: ""; position: absolute; top: 8px; left: 16.66%; right: 16.66%; height: 1px; background: rgba(250,248,243,.16); }
.automation-run-progress {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 16.66%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8bb87;
  box-shadow: 0 0 0 5px rgba(168,187,135,.12);
  animation: automation-signal 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
.automation-run > div { position: relative; z-index: 3; display: grid; justify-items: center; gap: 18px; text-align: center; }
.automation-run > div span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(250,248,243,.2); border-radius: 50%; background: var(--ink); color: #8d978d; font-size: 7px; }
.automation-run > div strong { color: #aeb6ae; font-size: 11px; font-weight: 530; }

@keyframes automation-signal {
  0%, 12% { left: 16.66%; opacity: 0; }
  22%, 78% { opacity: 1; }
  88%, 100% { left: calc(83.33% - 7px); opacity: 0; }
}

.enterprise-section {
  min-height: 100svh;
  padding: 132px max(24px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(420px,.86fr);
  align-items: center;
  gap: clamp(64px,9vw,132px);
  background: #263027;
  color: var(--paper);
}
.enterprise-copy h2 { margin: 34px 0 36px; font-size: clamp(48px,5.4vw,74px); }
.enterprise-copy .button { margin-top: 0; }
.enterprise-stack { border-top: 1px solid rgba(250,248,243,.16); }
.enterprise-stack > div {
  min-height: 126px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 7px 16px;
  border-bottom: 1px solid rgba(250,248,243,.16);
}
.enterprise-stack span { grid-row: 1 / 3; color: #91a775; font-size: 9px; }
.enterprise-stack small { color: #8e998f; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.enterprise-stack strong { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(28px,3.1vw,42px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }

.final-cta {
  width: min(calc(100% - 48px), var(--max));
  margin: 120px auto;
  padding: 100px 28px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  text-align: center;
  background: #eef2e8;
}

.final-cta > img { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; }
.final-proof { margin-bottom: 24px; color: var(--sage-dark); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.final-cta h2 { margin-bottom: 22px; }
.final-cta > p { color: var(--ink-soft); font-size: 16px; }

.site-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 36px 0 50px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 28px;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 12px;
}

.site-footer .brand { color: var(--ink); font-size: 15px; }
.site-footer .brand img { width: 26px; height: 26px; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer nav a {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer nav a:hover { color: var(--ink); }

/* Readable product window: preserve the real app's density instead of shrinking it. */
.product-stage { width: min(1240px, calc(100% - 32px)); margin-top: -185px; }
.window-bar { height: 44px; padding-inline: 12px; }
.tour-app-preview {
  height: 760px;
  grid-template-columns: 236px minmax(0, 1fr);
  font-size: 13px;
}
.tour-sidebar { padding: 20px 14px 16px; }
.tour-sidebar-brand { height: 44px; padding-inline: 8px; gap: 10px; }
.tour-sidebar-brand img { width: 27px; height: 27px; border-radius: 8px; }
.tour-sidebar-brand strong { font-size: 15px; }
.tour-new-task { min-height: 42px; padding-inline: 13px; font-size: 14px; }
.tour-new-task > span:first-child { font-size: 18px; }
.tour-nav-group { margin-top: 16px; gap: 4px; }
.tour-nav-item { min-height: 40px; padding-inline: 11px; gap: 10px; font-size: 14px; }
.tour-nav-icon { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.tour-nav-icon-orb::before { width: 9px; height: 9px; }
.tour-sidebar-label { margin: 22px 11px 8px; font-size: 10px; }
.tour-recent-item { min-height: 38px; padding-inline: 9px; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; font-size: 11px; }
.tour-recent-item small { font-size: 10px; }
.tour-sidebar-bottom { padding: 14px 8px 0; gap: 10px; }
.tour-avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 12px; }
.tour-sidebar-bottom strong { font-size: 12px; }
.tour-sidebar-bottom small { font-size: 10px; }

.tour-welcome-app { padding: 24px 32px 20px; overflow: auto; }
.tour-role-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.tour-welcome-role { gap: 10px; }
.tour-welcome-role strong { font-size: 14px; }
.tour-welcome-center { width: min(720px, calc(100% - 24px)); margin-top: 28px; }
.tour-welcome-center h3 { font-size: 34px; }
.tour-composer { min-height: 122px; margin-top: 22px; padding: 18px 18px 14px; border-radius: 18px; }
.tour-composer > span:first-child { font-size: 14px; }
.tour-composer-tools { gap: 9px; }
.tour-composer-tools i { min-height: 34px; padding: 5px 9px; border-radius: 8px; font-size: 10px; }
.tour-composer-tools i strong { font-size: 11px; }
.tour-composer-tools .tour-plus { width: 34px; font-size: 17px; }
.tour-composer-tools b { width: 32px; height: 32px; font-size: 13px; }
.tour-example-heading { margin-top: 20px; font-size: 11px; }
.tour-example-heading small { font-size: 10px; }
.tour-agent-examples { margin-top: 10px; gap: 10px; }
.tour-agent-examples > button { min-height: 68px; padding: 10px 12px; grid-template-columns: 40px minmax(0,1fr) auto; gap: 11px; border-radius: 12px; }
.tour-example-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
.tour-agent-examples strong { font-size: 13px; }
.tour-agent-examples small { font-size: 11px; }
.tour-agent-examples > button > i { font-size: 12px; }
.tour-blank-chat { margin-top: 12px; font-size: 11px; }

.tour-page-header { min-height: 110px; padding: 28px 32px 20px; }
.tour-page-header h3, .tour-hub-header h3, .tour-works-head h3 { font-size: 24px; }
.tour-page-header p, .tour-hub-header > p, .tour-works-head p { margin-top: 7px; font-size: 13px; }
.tour-primary-action, .tour-list-page-header > button { min-height: 40px; padding-inline: 15px; font-size: 12px; }
.tour-agent-library { padding: 28px 32px; }
.tour-content-label { margin-bottom: 14px; font-size: 10px; }
.tour-workspace-agent-grid { gap: 14px; }
.tour-workspace-agent { min-height: 210px; padding: 18px; grid-template-columns: 44px minmax(0,1fr); gap: 13px; border-radius: 14px; }
.tour-role-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; }
.tour-workspace-agent-copy strong { font-size: 14px; }
.tour-workspace-agent-copy small { margin-top: 3px; font-size: 11px; line-height: 1.5; }
.tour-agent-metrics { gap: 8px; }
.tour-agent-metrics i { font-size: 10px; }
.tour-workspace-agent time { padding-top: 12px; font-size: 10px; }
.tour-agent-empty-note { margin-top: 20px; padding: 16px 18px; gap: 13px; }
.tour-agent-empty-note > span { width: 36px; height: 36px; font-size: 17px; }
.tour-agent-empty-note strong { font-size: 12px; }
.tour-agent-empty-note small { margin-top: 3px; font-size: 10px; }

.tour-hub-header { min-height: 132px; padding: 28px 32px 0; }
.tour-hub-tabs { height: 48px; margin-top: 15px; gap: 8px; }
.tour-hub-tabs button { height: 41px; padding-inline: 15px; gap: 7px; font-size: 12px; }
.tour-hub-panel { padding: 22px 32px 28px; }
.tour-plugin-install { padding: 18px; border-radius: 12px; }
.tour-plugin-install > div:first-child { gap: 10px; }
.tour-install-icon { width: 32px; height: 32px; border-radius: 9px; }
.tour-plugin-install strong { font-size: 13px; }
.tour-plugin-install small { font-size: 11px; }
.tour-plugin-install > div:nth-child(2) { margin-top: 14px; gap: 10px; }
.tour-plugin-install > div:nth-child(2) > button, .tour-plugin-install label, .tour-hub-toolbar > button, .tour-tool-group-title > button { min-height: 38px; padding-inline: 12px; font-size: 11px; }
.tour-plugin-install label > input { font-size: 11px; }
.tour-plugin-install label > button { min-height: 30px; font-size: 10px; }
.tour-plugin-install > p { font-size: 10px; }
.tour-plugin-list { margin-top: 12px; gap: 9px; }
.tour-plugin-row { min-height: 92px; padding: 15px 16px; gap: 13px; }
.tour-plugin-row strong, .tour-skill-row strong, .tour-tool-row strong { font-size: 13px; }
.tour-plugin-row strong small, .tour-skill-row strong i { font-size: 9px; }
.tour-plugin-row > span > small, .tour-plugin-row em, .tour-skill-row small, .tour-tool-row small, .tour-tool-row em, .tour-tool-row b { font-size: 10px; }
.tour-toggle { width: 40px; height: 24px; }
.tour-toggle > i { width: 20px; height: 20px; }
.tour-toggle.is-on > i { transform: translateX(16px); }
.tour-hub-toolbar > label, .tour-works-search { min-height: 42px; padding-inline: 13px; font-size: 12px; }
.tour-hub-toolbar input, .tour-works-search input { font-size: 12px; }
.tour-hub-summary { margin: 15px 0 10px; font-size: 10px; }
.tour-skill-list { gap: 9px; }
.tour-skill-row { min-height: 82px; padding: 14px 16px; }
.tour-tool-group { padding: 18px 0; }
.tour-tool-group-title strong { font-size: 14px; }
.tour-tool-group-title small { font-size: 10px; }
.tour-tool-row { min-height: 70px; margin-top: 10px; padding: 12px 14px; }
.tour-cli-grid { margin-top: 12px; gap: 10px; }
.tour-cli-grid > span { padding: 14px; font-size: 12px; }
.tour-cli-grid b { font-size: 10px; }

.tour-list-page-header { min-height: 76px; padding-inline: 28px; gap: 11px; }
.tour-page-icon { width: 35px; height: 35px; font-size: 14px; }
.tour-list-page-header h3 { font-size: 18px; }
.tour-task-list { padding: 22px 28px; }
.tour-task-row { min-height: 102px; padding: 15px; grid-template-columns: 35px minmax(0,1fr) auto; gap: 14px; }
.tour-task-power { width: 34px; height: 34px; font-size: 10px; }
.tour-task-row strong { font-size: 14px; }
.tour-task-row > span:nth-child(2) > i { font-size: 10px; }
.tour-task-row small { margin-top: 8px; gap: 7px; }
.tour-task-row small b { font-size: 11px; }
.tour-task-actions button { width: 32px; height: 32px; font-size: 12px; }
.tour-task-editor-card { width: min(720px, calc(100% - 24px)); min-height: 470px; }
.tour-task-editor-head { padding: 20px 22px 14px; }
.tour-task-editor-head strong { font-size: 17px; }
.tour-task-editor-head button { font-size: 11px; }
.tour-task-editor-card > p { padding: 16px 22px; font-size: 14px; }
.tour-task-editor-footer { padding: 15px 18px; }
.tour-task-editor-footer button { min-height: 32px; padding-inline: 10px; font-size: 10px; }
.tour-task-trigger-popover { width: 280px; padding: 12px; }
.tour-task-trigger-popover button, .tour-task-trigger-popover p { font-size: 10px; }

.tour-works-page { padding: 32px 40px; }
.tour-works-head > button { width: 36px; height: 36px; font-size: 16px; }
.tour-works-search { margin-top: 22px; }
.tour-works-list { margin-top: 14px; }
.tour-works-list > button { min-height: 86px; padding: 14px 16px; grid-template-columns: 56px minmax(0,1fr) auto; gap: 14px; }
.tour-work-thumb { width: 52px; height: 38px; font-size: 10px; }
.tour-works-list strong { font-size: 14px; }
.tour-works-list small, .tour-works-list time { font-size: 11px; }
.tour-works-empty { font-size: 12px; }

.tour-workspace-layout { grid-template-columns: minmax(0,1.45fr) minmax(330px,.75fr); }
.tour-conversation { padding: 36px 34px 114px; }
.tour-conversation-context { width: min(650px,95%); margin-bottom: 22px; padding: 12px 14px; gap: 11px; }
.tour-conversation-context > span:first-child { width: 33px; height: 33px; border-radius: 9px; font-size: 12px; }
.tour-conversation-context strong { font-size: 12px; }
.tour-conversation-context small { font-size: 10px; }
.tour-user-message { width: min(480px,82%); padding: 15px 17px; font-size: 13px; }
.tour-agent-message { width: min(650px,95%); margin-top: 30px; grid-template-columns: 34px minmax(0,1fr); gap: 12px; }
.tour-agent-message > img { width: 33px; height: 33px; }
.tour-agent-message > div > strong { font-size: 13px; }
.tour-agent-message p { margin-top: 9px; font-size: 13px; }
.tour-subagent-card { margin-top: 14px; }
.tour-subagent-card > div:first-child { min-height: 44px; padding-inline: 12px; gap: 8px; font-size: 11px; }
.tour-subagent-card > div:nth-child(2) { padding: 12px; }
.tour-subagent-card > div:nth-child(2) p { font-size: 11px; }
.tour-subagent-card > div:nth-child(2) > span { min-height: 30px; grid-template-columns: 16px 48px minmax(0,1fr); font-size: 10px; }
.tour-subagent-card footer { min-height: 36px; padding-inline: 12px; font-size: 10px; }
.tour-subagent-card footer button { font-size: 10px; }
.tour-mini-composer { left: 30px; right: 30px; bottom: 24px; min-height: 82px; padding: 14px 15px 11px; font-size: 12px; }
.tour-mini-tools i, .tour-mini-tools small { font-size: 10px; }
.tour-mini-composer b { width: 30px; height: 30px; }
.tour-workspace-tabs { height: 52px; padding-inline: 13px; gap: 7px; }
.tour-workspace-tabs button { height: 36px; padding-inline: 8px; font-size: 11px; }
.tour-workspace-tabs .tour-workspace-plus { width: 30px; }
.tour-workspace-summary { padding: 10px 0; }
.tour-workspace-summary h4 { min-height: 38px; padding-inline: 12px; font-size: 10px; }
.tour-workspace-summary section > button { width: calc(100% - 20px); min-height: 64px; margin: 0 10px 10px; padding: 10px; grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
.tour-summary-file { width: 36px; height: 36px; font-size: 9px; }
.tour-workspace-summary strong { font-size: 12px; }
.tour-workspace-summary small { font-size: 10px; }
.tour-source-chips { padding: 0 12px 12px; gap: 7px; }
.tour-source-chips span { padding: 5px 7px; font-size: 9px; }
.tour-report-document { min-height: 430px; padding: 28px 24px; }
.tour-report-document > span { font-size: 9px; }
.tour-report-document h4 { font-size: 18px; }
.tour-report-document p, .tour-report-document ul { font-size: 11px; }
.tour-report-document strong { font-size: 12px; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-actions { display: none; }
  .menu-button {
    justify-self: end;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
  }
  .menu-button span:not(.sr-only) { width: 18px; height: 1.5px; display: block; background: var(--ink); transition: transform 180ms ease; }
  .menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.75px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }
  .site-nav {
    position: fixed;
    inset: 74px 16px auto;
    padding: 24px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(250,248,243,0.98);
    box-shadow: 0 22px 60px rgba(31,37,32,0.16);
  }
  .site-nav.open { display: flex; }
  .site-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .site-nav a:last-of-type { border-bottom: 0; }
  .site-nav .language-toggle-mobile {
    width: 100%;
    margin-top: 8px;
    padding: 16px 0 8px;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
    border-radius: 0;
    font-size: 15px;
  }

  .hero-intro { min-height: 100svh; padding: 92px 24px 104px; }
  .hero-decorations { display: none; }
  .product-stage { width: min(1040px, 94%); margin-top: -58px; }
  .tour-app-preview { height: 470px; grid-template-columns: 148px minmax(0,1fr); }
  .tour-sidebar { padding-inline: 9px; }
  .tour-sidebar-bottom { display: none; }
  .tour-agents-layout { grid-template-columns: minmax(190px,.68fr) minmax(280px,1.32fr); }
  .tour-agent-detail { width: calc(100% - 30px); padding: 18px; }
  .tour-task-layout { padding: 20px; gap: 16px; }
  .tour-workspace-layout { grid-template-columns: minmax(0,1.1fr) minmax(230px,.9fr); }

  .pi-principle,
  .acp-section { grid-template-columns: 120px minmax(0, 1fr); column-gap: 34px; }
  .pi-principle-copy { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.62fr); gap: 42px; }
  .pi-flow { height: 420px; }
  .pi-flow-core { width: 178px; height: 178px; }
  .pi-flow-context { left: 21%; }
  .pi-flow-skill { left: 18%; }
  .pi-flow-tool { left: 33%; }
  .pi-flow-result { left: 76%; }

  .agent-heading { grid-template-columns: 120px minmax(0, 1fr); gap: 34px; }
  .capability-rail { grid-template-columns: 120px minmax(0, 1fr); gap: 34px; }

  .acp-stage { grid-template-columns: minmax(210px,.8fr) 110px minmax(280px,1.1fr); }
  .automation-heading { grid-template-columns: 120px minmax(0,1fr); gap: 34px; }
  .enterprise-section { grid-template-columns: minmax(0,1fr) minmax(350px,.86fr); gap: 60px; }
}

@media (max-width: 720px) {
  .site-header { width: calc(100% - 28px); height: 66px; }
  .site-nav { top: 66px; }
  .brand span { font-size: 17px; }
  .brand img { width: 29px; height: 29px; }

  .hero { width: 100%; margin-bottom: 0; }
  .hero-intro { min-height: 100svh; padding: 82px 18px 112px; }
  .hero-decorations {
    display: block;
    z-index: 1;
    overflow: hidden;
    transform: none;
  }
  .hero-decorations > * { display: none; }
  .hero-decorations > .decor-pi,
  .hero-decorations > .decor-acp,
  .hero-decorations > .decor-left-agent-blue,
  .hero-decorations > .decor-right-clock { display: block; }

  .decor-pi {
    left: calc(50% - 140px);
    right: auto;
    top: 112px;
  }
  .decor-pi .decor-mark-card {
    width: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 9px;
    border-radius: 20px 12px 18px 14px;
  }
  .decor-pi .decor-mark-icon { width: 32px; height: 32px; }

  .decor-left-agent-blue {
    left: calc(50% - 72px);
    right: auto;
    top: 122px;
    width: 62px;
  }

  .decor-right-clock {
    left: calc(50% + 2px);
    right: auto;
    top: 110px;
    width: 58px;
  }

  .decor-acp {
    left: calc(50% + 70px);
    right: auto;
    top: 119px;
  }
  .decor-acp .decor-mark-card {
    width: 78px;
    min-width: 78px;
    min-height: 54px;
    padding: 9px;
    border-radius: 12px;
    box-shadow: 5px 6px 0 rgba(123,166,177,0.18);
  }
  .decor-acp .decor-mark-icon { width: 58px; height: 22px; }

  h1 { font-size: clamp(38px, 10.5vw, 48px); }
  html[lang="zh-CN"] h1 { font-size: 40px; }
  .hero-rotator { font-size: 0.75em; }
  html[lang="en"] .hero-rotator {
    height: 2.6em;
    font-size: clamp(28px, 6.7vw, 40px);
  }
  .hero-description { max-width: 330px; margin-top: 20px; font-size: 13px; line-height: 1.55; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-title-prefix { white-space: normal; }
  .product-stage { width: calc(100% - 20px); margin: -46px auto 0; }
  .app-window { border-radius: 15px; }
  .window-bar { height: 34px; padding-inline: 7px; }
  .window-shell-toggle,
  .window-shell-actions i { width: 21px; height: 21px; border-radius: 7px; }
  .tour-app-preview { height: 430px; grid-template-columns: 76px minmax(0,1fr); }
  .tour-sidebar { padding: 9px 5px; }
  .tour-sidebar-brand { height: 30px; padding: 0 4px; gap: 4px; }
  .tour-sidebar-brand img { width: 16px; height: 16px; border-radius: 5px; }
  .tour-sidebar-brand strong { font-size: 7px; }
  .tour-new-task { min-height: 30px; padding: 0 7px; gap: 3px; font-size: 7px; }
  .tour-new-task > span:first-child { font-size: 11px; }
  .tour-nav-group { margin-top: 8px; gap: 2px; }
  .tour-nav-item { min-height: 30px; padding: 0 6px; gap: 5px; font-size: 7px; }
  .tour-nav-icon { width: 15px; height: 15px; border-radius: 5px; font-size: 7px; }
  .tour-nav-icon-orb::before { width: 6px; height: 6px; }
  .tour-sidebar-label, .tour-recent-item, .tour-sidebar-bottom { display: none; }
  .tour-scene-topbar { min-height: 39px; padding: 0 9px; font-size: 8px; }
  .tour-scene-topbar button { padding: 4px 6px; gap: 3px; font-size: 6px; }
  .tour-welcome-app { padding: 8px 9px 6px; }
  .tour-welcome-role { gap: 4px; }
  .tour-role-avatar { width: 20px; height: 20px; border-radius: 7px; font-size: 7px; }
  .tour-welcome-role strong { font-size: 7px; }
  .tour-welcome-center { width: calc(100% - 8px); margin-top: 8px; }
  .tour-welcome-center h3 { font-size: 17px; }
  .tour-composer { min-height: 72px; margin-top: 10px; padding: 9px; border-radius: 11px; }
  .tour-composer > span:first-child { font-size: 7px; }
  .tour-composer-tools { gap: 4px; }
  .tour-composer-tools i { min-height: 20px; padding: 2px 4px; font-size: 4px; }
  .tour-composer-tools i strong { font-size: 5px; }
  .tour-composer-tools .tour-plus { width: 20px; font-size: 9px; }
  .tour-composer-tools .tour-model { font-size: 5px; }
  .tour-composer-tools b { width: 19px; height: 19px; border-radius: 6px; font-size: 8px; }
  .tour-example-heading { margin-top: 7px; font-size: 5px; }
  .tour-example-heading small { font-size: 4px; }
  .tour-agent-examples { margin-top: 4px; gap: 3px; }
  .tour-agent-examples > button { min-height: 34px; padding: 4px; grid-template-columns: 20px minmax(0,1fr) auto; gap: 4px; border-radius: 6px; }
  .tour-agent-examples strong { font-size: 5px; }
  .tour-agent-examples small { font-size: 4px; }
  .tour-example-icon { width: 20px; height: 20px; border-radius: 6px; font-size: 6px; }
  .tour-blank-chat { margin-top: 3px; font-size: 5px; }
  .tour-agents-layout { display: block; overflow: hidden; }
  .tour-agent-list { height: 108px; padding: 9px 7px; display: flex; gap: 4px; border-right: 0; border-bottom: 1px solid rgba(27,36,41,.07); }
  .tour-list-heading { display: none; }
  .tour-agent-card { min-width: 0; min-height: 84px; padding: 7px 4px; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .tour-agent-card > span:nth-child(2) { width: 100%; }
  .tour-agent-card strong { font-size: 6px; }
  .tour-agent-card small, .tour-agent-card > i { display: none; }
  .tour-role-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 8px; }
  .tour-agent-detail { width: calc(100% - 14px); margin: 7px; padding: 10px; border-radius: 11px; }
  .tour-agent-detail-head { gap: 6px; }
  .tour-agent-detail-head strong { font-size: 8px; }
  .tour-agent-detail-head small, .tour-live-pill { font-size: 5px; }
  .tour-live-pill i { width: 4px; height: 4px; box-shadow: none; }
  .tour-agent-field { margin-top: 8px; padding: 7px; }
  .tour-agent-field > span, .tour-agent-settings span { font-size: 5px; }
  .tour-agent-field p { margin-top: 3px; font-size: 6px; }
  .tour-agent-settings { margin-top: 5px; border-radius: 7px; }
  .tour-agent-settings > div { padding: 6px; }
  .tour-agent-settings strong { font-size: 5px; }
  .tour-agent-run { min-height: 27px; margin-top: 6px; border-radius: 7px; font-size: 6px; }
  .tour-task-layout { padding: 8px; display: block; overflow: hidden; }
  .tour-task-hero { padding: 12px; border-radius: 10px; }
  .tour-task-status { font-size: 5px; }
  .tour-task-status i { width: 5px; height: 5px; }
  .tour-task-hero h3 { margin: 7px 0 4px; font-size: 14px; }
  .tour-task-hero > p { font-size: 6px; }
  .tour-trigger-switch { margin-top: 9px; }
  .tour-trigger-switch button { padding: 4px 6px; font-size: 5px; }
  .tour-trigger-summary { margin-top: 7px; padding-top: 7px; font-size: 6px; }
  .tour-run-list { margin-top: 7px; border-radius: 10px; }
  .tour-run-head { padding: 8px; font-size: 6px; }
  .tour-run-head span { font-size: 5px; }
  .tour-run-row { min-height: 39px; padding: 6px 8px; grid-template-columns: 18px minmax(0,1fr) auto; gap: 5px; }
  .tour-run-check { width: 17px; height: 17px; border-radius: 5px; font-size: 6px; }
  .tour-run-row strong { font-size: 6px; }
  .tour-run-row small, .tour-run-row > span:last-child { font-size: 5px; }
  .tour-run-now { min-height: 26px; margin: 7px 8px; font-size: 6px; }
  .tour-workspace-layout { grid-template-columns: minmax(0,.92fr) minmax(120px,1.08fr); }
  .tour-conversation { padding: 13px 8px 65px; }
  .tour-user-message { width: 88%; padding: 7px; border-radius: 8px 8px 3px 8px; font-size: 5px; }
  .tour-agent-message { width: 100%; margin-top: 12px; grid-template-columns: 18px minmax(0,1fr); gap: 5px; }
  .tour-agent-message > img { width: 18px; height: 18px; border-radius: 5px; }
  .tour-agent-message > div > strong, .tour-agent-message p { font-size: 5px; }
  .tour-agent-message p { margin-top: 3px; }
  .tour-subagents { margin-top: 6px; padding: 6px; font-size: 5px; }
  .tour-mini-composer { left: 6px; right: 6px; bottom: 7px; min-height: 48px; padding: 6px; border-radius: 8px; font-size: 5px; }
  .tour-mini-tools { gap: 4px; }
  .tour-mini-tools i, .tour-mini-tools small { font-size: 4px; }
  .tour-mini-composer b { width: 18px; height: 18px; border-radius: 5px; }
  .tour-workspace-tabs { height: 32px; padding: 0 5px; gap: 6px; }
  .tour-workspace-tabs button { height: 24px; font-size: 5px; }
  .tour-workspace-content { padding: 7px; }
  .tour-workspace-heading { padding-bottom: 5px; font-size: 5px; }
  .tour-check-row { min-height: 34px; grid-template-columns: 13px minmax(0,1fr); gap: 4px; font-size: 5px; }
  .tour-check-row i { width: 12px; height: 12px; border-radius: 4px; }
  .tour-check-row small { display: none; }
  .tour-file-row { min-height: 45px; grid-template-columns: 23px minmax(0,1fr); gap: 5px; }
  .tour-file-row > i { width: 22px; height: 22px; border-radius: 6px; font-size: 4px; }
  .tour-file-row strong, .tour-file-row small { font-size: 5px; }
  .tour-output-card { min-height: 170px; padding: 9px; border-radius: 8px; }
  .tour-output-card > span { font-size: 4px; }
  .tour-output-card > strong { margin-top: 6px; font-size: 7px; }
  .tour-output-card p { margin: 6px 0 12px; font-size: 5px; }
  .tour-caption { min-height: 124px; padding: 17px 12px 19px; grid-template-columns: 42px minmax(0,1fr); gap: 8px; }
  .tour-caption-index { font-size: 7px; }
  .tour-caption-copy strong { font-size: 13px; }
  .tour-caption-copy p { margin-top: 4px; font-size: 8px; }
  .tour-caption-hint { grid-column: 2; margin-top: -3px; font-size: 7px; }
  .tour-caption-hint i { width: 19px; height: 19px; }

  .section { width: calc(100% - 40px); padding: 104px 0; }
  .pi-principle,
  .acp-section { display: block; }
  .pi-principle-copy,
  .acp-intro { margin-top: 28px; }
  h2 { font-size: 44px; }
  .pi-principle-copy { display: block; }
  .pi-principle { padding-top: 96px; padding-bottom: 82px; }
  .pi-principle-copy h2 { font-size: 40px; }
  .pi-principle-summary { margin-top: 30px; }
  .pi-principle-summary p, .acp-intro p { font-size: 16px; }
  .pi-principle-summary strong { width: min(290px, 100%); margin-top: 19px; padding-top: 15px; }
  .pi-flow { height: 400px; margin-top: 50px; }
  .pi-flow-lines { display: none; }
  .pi-flow-task { left: 50%; top: 7%; translate: -50% 0; }
  .pi-flow-context { left: 17%; top: 26%; }
  .pi-flow-skill { left: 80%; top: 29%; }
  .pi-flow-tool { left: 15%; top: 67%; }
  .pi-flow-core { left: 52%; top: 50%; width: 154px; height: 154px; padding: 27px 13px 21px; }
  .pi-flow-core::before { inset: -13px; }
  .pi-flow-core::after { inset: -27px; }
  .pi-flow-mark { width: 25px; height: 25px; }
  .pi-flow-core > span { margin-top: 7px; font-size: 8px; }
  .pi-flow-core > strong { font-size: 23px; }
  .pi-flow-core > small { max-width: 115px; margin-top: 7px; text-align: center; }
  .pi-flow-result { left: 50%; top: 82%; translate: -50% 0; white-space: nowrap; }
  .pi-flow-caption { right: auto; bottom: 13px; left: 50%; width: 100%; text-align: center; translate: -50% 0; }

  .agent-section { padding: 18px; }
  .agent-section-inner { min-height: calc(100svh - 36px); padding: 86px 0 44px; }
  .agent-heading { display: block; }
  .agent-heading h2 { margin-top: 27px; font-size: 42px; }
  .agent-showcase { min-height: 270px; margin-top: 40px; }
  .agent-blueprint { min-height: 145px; }
  .agent-blueprint img { width: 40px; height: 40px; }
  .agent-blueprint h3 { font-size: 48px; }
  .agent-example-tabs { margin-top: 20px; }
  .agent-example-tabs button { min-height: 48px; padding-inline: 6px; gap: 5px; }
  .agent-example-tabs button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .capability-rail { margin-top: 34px; padding-top: 17px; display: block; }
  .capability-marks { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-marks > a { min-height: 42px; justify-content: flex-start; }
  .capability-marks > a + a { padding-left: 10px; }
  .capability-marks > a:nth-child(4) { padding-left: 0; border-left: 0; }
  .capability-marks strong { font-size: 9px; }
  .capability-marks img { width: 21px; height: 21px; }
  .capability-marks > a:nth-child(2) img { width: 31px; }

  .acp-intro p { margin-top: 22px; font-size: 14px; }
  .acp-stage { margin-top: 50px; display: block; }
  .acp-agent-node { min-height: 164px; padding: 22px; }
  .acp-agent-node img { width: 42px; height: 42px; }
  .acp-bridge { height: 88px; display: grid; grid-template-columns: 1fr; }
  .acp-bridge i { display: none; }
  .acp-bridge span { min-width: 72px; justify-self: center; text-align: center; }
  .acp-bridge::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); }
  .acp-bridge::after { top: 8%; left: calc(50% - 3px); animation-name: acp-signal-mobile; }
  .acp-workflows button { min-height: 64px; }
  .acp-flow-panel { margin-top: 22px; padding: 13px 8px; gap: 10px; font-size: 10px; }
  .acp-flow-panel strong { font-size: 10px; }
  .acp-note { margin-top: 48px; display: block; }
  .acp-note p { margin-top: 12px; }

  .automation-section { padding: 18px; }
  .automation-section-inner { min-height: calc(100svh - 36px); padding: 88px 0 64px; }
  .automation-heading { display: block; }
  .automation-heading h2 { margin-top: 27px; font-size: 42px; }
  .automation-demo { margin-top: 48px; }
  .automation-trigger-tabs { width: 100%; }
  .automation-trigger-tabs button { min-width: 0; flex: 1; padding-inline: 7px; }
  .automation-panel { min-height: 310px; padding-top: 48px; }
  .automation-job h3 { font-size: 44px; }
  .automation-run { margin-top: 68px; }
  .automation-run > div strong { max-width: 88px; font-size: 9px; line-height: 1.35; }

  .enterprise-section { padding: 94px 20px; display: block; }
  .enterprise-copy h2 { font-size: 44px; }
  .enterprise-stack { margin-top: 70px; }
  .enterprise-stack > div { min-height: 108px; }
  .enterprise-stack strong { font-size: 34px; }
  .enterprise-copy .button { width: 100%; }

  .final-cta { width: calc(100% - 20px); margin: 72px auto; padding: 72px 20px; border-radius: 22px; }
  .final-cta h2 { font-size: 38px; }

  .site-footer { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 16px; }
  .site-footer nav { order: 2; flex-wrap: wrap; row-gap: 10px; }
}

@keyframes acp-signal-mobile {
  0%, 12% { top: 8%; opacity: 0; }
  22%, 78% { opacity: 1; }
  88%, 100% { top: calc(92% - 7px); opacity: 0; }
}

@media (max-width: 720px) {
  .product-stage { margin-top: -84px; }
  .tour-app-preview { height: 500px; }
  .tour-page-header { min-height: 61px; padding: 11px 10px 8px; gap: 7px; }
  .tour-page-header h3, .tour-hub-header h3, .tour-works-head h3 { font-size: 10px; }
  .tour-page-header p, .tour-hub-header > p, .tour-works-head p { margin-top: 3px; font-size: 5px; }
  .tour-primary-action, .tour-list-page-header > button { min-height: 25px; padding: 0 7px; gap: 3px; border-radius: 6px; font-size: 5px; }
  .tour-agent-library { padding: 10px; }
  .tour-content-label { margin-bottom: 5px; font-size: 5px; }
  .tour-workspace-agent-grid { grid-template-columns: 1fr; gap: 4px; }
  .tour-workspace-agent { min-height: 76px; padding: 7px; grid-template-columns: 27px minmax(0,1fr); grid-template-rows: auto auto; gap: 5px; border-radius: 7px; }
  .tour-workspace-agent-copy { gap: 2px; }
  .tour-workspace-agent-copy strong { font-size: 6px; }
  .tour-workspace-agent-copy small { font-size: 4px; }
  .tour-agent-metrics { grid-column: 2; gap: 4px; }
  .tour-agent-metrics i { font-size: 4px; }
  .tour-workspace-agent time { display: none; }
  .tour-agent-empty-note { margin-top: 5px; padding: 6px; gap: 5px; border-radius: 7px; }
  .tour-agent-empty-note > span { width: 20px; height: 20px; border-radius: 6px; font-size: 8px; }
  .tour-agent-empty-note strong { font-size: 5px; }
  .tour-agent-empty-note small { font-size: 4px; }

  .tour-hub-header { min-height: 79px; padding: 11px 10px 0; }
  .tour-hub-tabs { height: 31px; margin-top: 6px; }
  .tour-hub-tabs button { height: 27px; padding: 0 6px; gap: 3px; font-size: 5px; }
  .tour-hub-panel { padding: 8px 9px 11px; }
  .tour-plugin-install { padding: 7px; border-radius: 7px; }
  .tour-plugin-install > div:first-child { gap: 4px; }
  .tour-plugin-install > div:first-child > span:last-child { display: grid; gap: 1px; }
  .tour-plugin-install strong { font-size: 5px; }
  .tour-plugin-install small { font-size: 4px; }
  .tour-install-icon { width: 18px; height: 18px; border-radius: 5px; font-size: 7px; }
  .tour-plugin-install > div:nth-child(2) { margin-top: 5px; grid-template-columns: 1fr; gap: 4px; }
  .tour-plugin-install > div:nth-child(2) > button, .tour-plugin-install label, .tour-hub-toolbar > button, .tour-tool-group-title > button { min-height: 24px; padding: 0 6px; font-size: 5px; }
  .tour-plugin-install label > input { font-size: 4px; }
  .tour-plugin-install label > button { min-height: 18px; font-size: 4px; }
  .tour-plugin-install > p { margin-top: 4px; font-size: 4px; }
  .tour-plugin-list { margin-top: 6px; gap: 4px; }
  .tour-plugin-row { min-height: 57px; padding: 6px; grid-template-columns: 5px minmax(0,1fr) auto; gap: 5px; border-radius: 7px; }
  .tour-plugin-row > i { width: 5px; height: 5px; }
  .tour-plugin-row > span { gap: 2px; }
  .tour-plugin-row strong { font-size: 5px; }
  .tour-plugin-row strong small { font-size: 4px; }
  .tour-plugin-row > span > small, .tour-plugin-row em { font-size: 4px; }
  .tour-toggle { width: 24px; height: 14px; }
  .tour-toggle > i { width: 10px; height: 10px; }
  .tour-toggle.is-on > i { transform: translateX(10px); }
  .tour-hub-toolbar { gap: 4px; }
  .tour-hub-toolbar > label, .tour-works-search { min-height: 25px; padding: 0 6px; font-size: 5px; }
  .tour-hub-toolbar input, .tour-works-search input { font-size: 5px; }
  .tour-hub-summary { margin: 6px 0 4px; font-size: 4px; }
  .tour-skill-list { gap: 4px; }
  .tour-skill-row { min-height: 51px; padding: 6px; }
  .tour-skill-row > span { gap: 2px; }
  .tour-skill-row strong { font-size: 5px; }
  .tour-skill-row strong i, .tour-skill-row small { font-size: 4px; }
  .tour-tool-group { padding: 7px 0; }
  .tour-tool-group-title strong { font-size: 6px; }
  .tour-tool-group-title small { font-size: 4px; }
  .tour-tool-row { min-height: 43px; margin-top: 4px; padding: 6px; grid-template-columns: 5px minmax(0,1fr) auto; gap: 5px; }
  .tour-tool-row > i { width: 5px; height: 5px; }
  .tour-tool-row strong { font-size: 5px; }
  .tour-tool-row small, .tour-tool-row em, .tour-tool-row b { font-size: 4px; }
  .tour-tool-row em { display: none; }
  .tour-cli-grid { margin-top: 5px; gap: 4px; }
  .tour-cli-grid > span { padding: 6px; font-size: 5px; }
  .tour-cli-grid b { font-size: 4px; }

  .tour-list-page-header { min-height: 42px; padding: 0 9px; gap: 5px; }
  .tour-page-icon { width: 21px; height: 21px; border-radius: 6px; font-size: 7px; }
  .tour-list-page-header h3 { font-size: 8px; }
  .tour-task-list { padding: 8px; }
  .tour-task-row { min-height: 76px; padding: 7px; grid-template-columns: 22px minmax(0,1fr); gap: 6px; }
  .tour-task-power { width: 21px; height: 21px; font-size: 5px; }
  .tour-task-row strong { max-width: 68%; font-size: 6px; }
  .tour-task-row > span:nth-child(2) > i { font-size: 4px; }
  .tour-task-row small { gap: 3px; }
  .tour-task-row small b { font-size: 4px; }
  .tour-task-actions { grid-column: 2; margin-top: -4px; opacity: 1; }
  .tour-task-actions button { width: 20px; height: 20px; font-size: 6px; }
  .tour-task-editor { padding: 8px; }
  .tour-task-editor-card { width: calc(100% - 4px); min-height: 320px; border-radius: 10px; }
  .tour-task-editor-head { padding: 9px 9px 6px; gap: 4px; }
  .tour-task-editor-head strong { font-size: 8px; }
  .tour-task-editor-head button { padding: 4px 6px; font-size: 5px; }
  .tour-task-editor-card > p { padding: 8px 10px; font-size: 6px; }
  .tour-task-editor-footer { padding: 7px; display: block; }
  .tour-task-editor-footer > div { gap: 3px; }
  .tour-task-editor-footer button { min-height: 20px; padding: 0 5px; font-size: 4px; }
  .tour-task-editor-footer > span { margin-top: 5px; justify-content: end; }
  .tour-task-trigger-popover { left: 12px; right: 12px; bottom: 61px; width: auto; padding: 6px; }
  .tour-task-trigger-popover button, .tour-task-trigger-popover p { font-size: 4px; }

  .tour-works-page { padding: 12px 10px; }
  .tour-works-head { gap: 6px; }
  .tour-works-head > button { width: 21px; height: 21px; font-size: 8px; }
  .tour-works-search { margin-top: 9px; }
  .tour-works-list { margin-top: 6px; border-radius: 7px; }
  .tour-works-list > button { min-height: 60px; padding: 6px; grid-template-columns: 34px minmax(0,1fr); gap: 6px; }
  .tour-work-thumb { width: 32px; height: 24px; border-radius: 5px; font-size: 5px; }
  .tour-works-list strong { font-size: 6px; }
  .tour-works-list small { font-size: 4px; }
  .tour-works-list time { display: none; }
  .tour-works-empty { padding: 25px; font-size: 6px; }

  .tour-subagent-card { margin-top: 6px; border-radius: 6px; }
  .tour-subagent-card > div:first-child { min-height: 25px; padding: 0 5px; gap: 3px; font-size: 4px; }
  .tour-subagent-card > div:first-child small { display: none; }
  .tour-subagent-card > div:nth-child(2) { padding: 5px; }
  .tour-subagent-card > div:nth-child(2) p, .tour-subagent-card > div:nth-child(2) > span { font-size: 4px; }
  .tour-subagent-card footer { min-height: 21px; padding: 0 5px; font-size: 4px; }
  .tour-subagent-card footer button { font-size: 4px; }
  .tour-workspace-tabs { gap: 2px; }
  .tour-workspace-tabs button { padding: 0 3px; font-size: 4px; }
  .tour-workspace-summary { padding: 3px 0; }
  .tour-workspace-summary h4 { min-height: 22px; padding: 0 5px; font-size: 4px; }
  .tour-workspace-summary section > button { width: calc(100% - 8px); min-height: 37px; margin: 0 4px 4px; padding: 4px; grid-template-columns: 22px minmax(0,1fr); gap: 4px; }
  .tour-summary-file { width: 21px; height: 21px; border-radius: 5px; font-size: 4px; }
  .tour-workspace-summary strong, .tour-workspace-summary small { font-size: 4px; }
  .tour-source-chips { padding: 0 5px 6px; gap: 3px; }
  .tour-source-chips span { padding: 3px; font-size: 4px; }
  .tour-report-document { min-height: 260px; padding: 9px 7px; }
  .tour-report-document > span { font-size: 4px; }
  .tour-report-document h4 { margin: 5px 0 7px; font-size: 7px; }
  .tour-report-document p, .tour-report-document strong, .tour-report-document ul { font-size: 4px; }
}

@media (max-width: 1100px) and (min-width: 721px) {
  .product-stage { width: calc(100% - 24px); margin-top: -165px; }
  .tour-app-preview { height: 700px; grid-template-columns: 210px minmax(0,1fr); }
  .tour-workspace-agent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tour-workspace-agent { min-height: 170px; }
  .tour-workspace-layout { grid-template-columns: minmax(0,1.25fr) minmax(290px,.75fr); }
}

@media (max-width: 720px) {
  .product-stage { width: calc(100% - 16px); margin-top: -112px; }
  .window-bar { height: 38px; padding-inline: 8px; }
  .tour-app-preview {
    height: 650px;
    grid-template-columns: 1fr;
    grid-template-rows: 104px minmax(0,1fr);
    font-size: 13px;
  }
  .tour-sidebar {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: 40px 38px;
    align-items: center;
    align-content: center;
    gap: 6px 4px;
    border-right: 0;
    border-bottom: 1px solid rgba(27,36,41,.08);
  }
  .tour-sidebar-brand { width: 31px; height: 40px; padding: 0; grid-column: 1; grid-row: 1; }
  .tour-sidebar-brand img { width: 25px; height: 25px; }
  .tour-sidebar-brand strong, .tour-new-task, .tour-sidebar-label, .tour-sidebar-bottom { display: none; }
  .tour-nav-group { min-width: 0; margin: 0; display: grid; grid-column: 2 / 5; grid-row: 1; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
  .tour-nav-item { min-width: 0; min-height: 40px; padding: 0 3px; justify-content: center; gap: 4px; border-radius: 8px !important; font-size: 9px; white-space: nowrap; }
  .tour-nav-icon { width: 20px; height: 20px; flex: 0 0 auto; font-size: 10px; }
  .tour-recent-item { min-width: 0; min-height: 38px; padding: 0 6px; display: grid; grid-template-columns: 6px minmax(0,1fr); grid-row: 2; gap: 5px; border: 1px solid rgba(27,36,41,.06) !important; background: rgba(255,255,255,.72) !important; font-size: 10px; }
  .tour-recent-item[data-tour-demo="subagent"] { grid-column: 1; }
  .tour-recent-item[data-tour-demo="automation"] { grid-column: 2; }
  .tour-recent-item[data-tour-demo="agent"] { grid-column: 3; }
  .tour-recent-item[data-tour-demo="tools"] { grid-column: 4; }
  .tour-recent-item > span:nth-child(2), .tour-recent-item small { display: none; }
  .tour-recent-short { display: block; overflow: hidden; color: #59636a; text-overflow: ellipsis; white-space: nowrap; }
  .tour-scenes { min-height: 0; }
  .tour-scene { overflow: auto; }

  .tour-welcome-app { padding: 16px 14px 14px; }
  .tour-role-avatar { width: 30px; height: 30px; }
  .tour-welcome-role strong { font-size: 13px; }
  .tour-welcome-center { width: 100%; margin-top: 16px; }
  .tour-welcome-center h3 { font-size: 25px; }
  .tour-composer { min-height: 108px; margin-top: 16px; padding: 14px 13px 11px; }
  .tour-composer > span:first-child { font-size: 13px; }
  .tour-composer-tools { gap: 5px; }
  .tour-composer-tools i { min-height: 30px; padding: 4px 6px; font-size: 9px; }
  .tour-composer-tools i strong { font-size: 9px; }
  .tour-composer-tools .tour-plus { width: 30px; }
  .tour-composer-tools b { width: 29px; height: 29px; }
  .tour-example-heading { margin-top: 15px; font-size: 11px; }
  .tour-example-heading small { font-size: 9px; }
  .tour-agent-examples { grid-template-columns: 1fr; gap: 7px; }
  .tour-agent-examples > button { min-height: 59px; padding: 8px 10px; grid-template-columns: 36px minmax(0,1fr) auto; }
  .tour-example-icon { width: 36px; height: 36px; }
  .tour-agent-examples strong { font-size: 12px; }
  .tour-agent-examples small { font-size: 10px; }
  .tour-blank-chat { min-height: 30px; font-size: 11px; }

  .tour-page-header { min-height: 94px; padding: 18px 15px 14px; align-items: center; gap: 12px; }
  .tour-page-header h3, .tour-hub-header h3, .tour-works-head h3 { font-size: 20px; }
  .tour-page-header p, .tour-hub-header > p, .tour-works-head p { font-size: 11px; }
  .tour-primary-action, .tour-list-page-header > button { min-height: 36px; padding-inline: 11px; font-size: 10px; }
  .tour-agent-library { padding: 16px 14px; }
  .tour-content-label { margin-bottom: 9px; font-size: 9px; }
  .tour-workspace-agent-grid { grid-template-columns: 1fr; gap: 8px; }
  .tour-workspace-agent { min-height: 112px; padding: 12px; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; gap: 8px; }
  .tour-role-icon { width: 38px; height: 38px; }
  .tour-workspace-agent-copy strong { font-size: 13px; }
  .tour-workspace-agent-copy small { font-size: 10px; }
  .tour-agent-metrics { grid-column: 2; gap: 6px; }
  .tour-agent-metrics i { font-size: 9px; }
  .tour-workspace-agent time { display: none; }
  .tour-agent-empty-note { margin-top: 9px; padding: 11px 12px; }
  .tour-agent-empty-note strong { font-size: 11px; }
  .tour-agent-empty-note small { font-size: 9px; }

  .tour-hub-header { min-height: 116px; padding: 17px 15px 0; }
  .tour-hub-tabs { height: 42px; margin-top: 10px; }
  .tour-hub-tabs button { height: 36px; padding-inline: 10px; font-size: 11px; }
  .tour-hub-panel { padding: 14px 15px 18px; }
  .tour-plugin-install { padding: 13px; }
  .tour-plugin-install strong { font-size: 12px; }
  .tour-plugin-install small { font-size: 10px; }
  .tour-install-icon { width: 28px; height: 28px; }
  .tour-plugin-install > div:nth-child(2) { grid-template-columns: 1fr; gap: 7px; }
  .tour-plugin-install > div:nth-child(2) > button, .tour-plugin-install label, .tour-hub-toolbar > button, .tour-tool-group-title > button { min-height: 36px; font-size: 10px; }
  .tour-plugin-install label > input { font-size: 10px; }
  .tour-plugin-install label > input,
  .tour-works-search input { min-height: 24px; }
  .tour-plugin-install label > button, .tour-plugin-install > p { font-size: 9px; }
  .tour-plugin-row { min-height: 82px; padding: 12px; }
  .tour-plugin-row strong, .tour-skill-row strong, .tour-tool-row strong { font-size: 12px; }
  .tour-plugin-row > span > small, .tour-plugin-row em, .tour-skill-row small, .tour-tool-row small, .tour-tool-row em, .tour-tool-row b { font-size: 9px; }
  .tour-hub-toolbar > label, .tour-works-search { min-height: 40px; font-size: 11px; }
  .tour-hub-toolbar input, .tour-works-search input { font-size: 11px; }
  .tour-hub-summary { font-size: 9px; }
  .tour-skill-row { min-height: 72px; padding: 11px 12px; }
  .tour-tool-group-title strong { font-size: 13px; }
  .tour-tool-group-title small { font-size: 9px; }
  .tour-tool-row { min-height: 64px; }
  .tour-tool-row em { display: none; }
  .tour-cli-grid { grid-template-columns: 1fr; }
  .tour-cli-grid > span { padding: 11px; font-size: 11px; }

  .tour-list-page-header { min-height: 64px; padding-inline: 14px; }
  .tour-page-icon { width: 32px; height: 32px; font-size: 13px; }
  .tour-list-page-header h3 { font-size: 17px; }
  .tour-task-list { padding: 13px 14px; }
  .tour-task-row { min-height: 96px; padding: 12px; grid-template-columns: 32px minmax(0,1fr); gap: 10px; }
  .tour-task-power { width: 31px; height: 31px; font-size: 9px; }
  .tour-task-row strong { max-width: 70%; font-size: 12px; }
  .tour-task-row > span:nth-child(2) > i { font-size: 8px; }
  .tour-task-row small b { font-size: 9px; }
  .tour-task-actions { grid-column: 2; margin-top: -3px; opacity: 1; }
  .tour-task-actions button { width: 30px; height: 30px; font-size: 11px; }
  .tour-task-editor { padding: 10px; }
  .tour-task-editor-card { width: 100%; min-height: 430px; }
  .tour-task-editor-head { padding: 15px 15px 10px; }
  .tour-task-editor-head strong { font-size: 15px; }
  .tour-task-editor-head button { font-size: 10px; }
  .tour-task-editor-card > p { padding: 13px 15px; font-size: 12px; }
  .tour-task-editor-footer { padding: 11px; display: block; }
  .tour-task-editor-footer button { min-height: 30px; font-size: 9px; }
  .tour-task-trigger-popover { left: 12px; right: 12px; bottom: 68px; width: auto; }
  .tour-task-trigger-popover button, .tour-task-trigger-popover p { font-size: 9px; }

  .tour-works-page { padding: 20px 15px; }
  .tour-works-head > button { width: 34px; height: 34px; }
  .tour-works-search { margin-top: 15px; }
  .tour-works-list { margin-top: 10px; }
  .tour-works-list > button { min-height: 80px; padding: 11px 10px; grid-template-columns: 48px minmax(0,1fr); gap: 11px; }
  .tour-work-thumb { width: 45px; height: 34px; font-size: 9px; }
  .tour-works-list strong { font-size: 13px; }
  .tour-works-list small { font-size: 10px; }
  .tour-works-list time { display: none; }

  .tour-workspace-layout { grid-template-columns: 1fr; grid-template-rows: minmax(330px,1.2fr) minmax(220px,.8fr); overflow: auto; }
  .tour-conversation { min-height: 330px; padding: 20px 15px 92px; overflow: visible; }
  .tour-conversation-context { width: 100%; margin-bottom: 14px; padding: 10px 11px; gap: 9px; }
  .tour-conversation-context > span:first-child { width: 29px; height: 29px; font-size: 10px; }
  .tour-conversation-context strong { font-size: 11px; }
  .tour-conversation-context small { font-size: 9px; }
  .tour-user-message { width: 88%; padding: 12px 13px; font-size: 12px; }
  .tour-agent-message { width: 100%; margin-top: 18px; grid-template-columns: 30px minmax(0,1fr); gap: 9px; }
  .tour-agent-message > img { width: 29px; height: 29px; }
  .tour-agent-message > div > strong, .tour-agent-message p { font-size: 12px; }
  .tour-subagent-card > div:first-child { min-height: 38px; padding-inline: 8px; font-size: 9px; }
  .tour-subagent-card > div:first-child small { display: none; }
  .tour-subagent-card > div:nth-child(2) p { font-size: 10px; }
  .tour-subagent-card > div:nth-child(2) > span { font-size: 9px; }
  .tour-subagent-card footer { font-size: 9px; }
  .tour-subagent-card footer button { min-height: 28px; padding: 0 4px; font-size: 9px; }
  .tour-mini-composer { left: 12px; right: 12px; bottom: 12px; min-height: 72px; font-size: 11px; }
  .tour-mini-tools i, .tour-mini-tools small { font-size: 9px; }
  .tour-workspace-panel { min-height: 220px; border-left: 0; border-top: 1px solid rgba(27,36,41,.08); }
  .tour-workspace-tabs { height: 46px; padding-inline: 8px; }
  .tour-workspace-tabs button { height: 34px; font-size: 10px; }
  .tour-workspace-summary h4 { min-height: 34px; font-size: 9px; }
  .tour-workspace-summary section > button { min-height: 56px; }
  .tour-workspace-summary strong { font-size: 10px; }
  .tour-workspace-summary small, .tour-source-chips span { font-size: 9px; }
  .tour-report-document { min-height: 330px; padding: 20px 16px; }
  .tour-report-document h4 { font-size: 17px; }
  .tour-report-document p, .tour-report-document strong, .tour-report-document ul { font-size: 11px; }
}

/* Recent items replay short, deterministic product flows on demand. */
.tour-recent-item.is-demo-running > span:first-child {
  background: #6f864f;
  animation: recent-demo-pulse 900ms cubic-bezier(.65,0,.35,1) infinite;
}
.tour-recent-item.is-demo-complete > span:first-child {
  background: #6f864f;
  box-shadow: 0 0 0 3px rgba(111,134,79,.13);
}

[data-recent-chat] [data-chat-context],
[data-recent-chat] [data-recent-chat-agent],
[data-recent-chat] [data-recent-subagent-card] {
  transition: opacity 280ms cubic-bezier(.16,1,.3,1), transform 360ms cubic-bezier(.16,1,.3,1);
}
[data-recent-chat][data-demo-phase="context"] [data-chat-context] {
  animation: recent-demo-enter 360ms cubic-bezier(.16,1,.3,1) both;
}
[data-recent-chat][data-demo-phase="user"] [data-recent-chat-user] {
  animation: recent-demo-enter 360ms cubic-bezier(.16,1,.3,1) both;
}
[data-recent-chat][data-demo-phase="context"] [data-recent-chat-agent],
[data-recent-chat][data-demo-phase="user"] [data-recent-chat-agent] {
  opacity: 0;
  transform: translate3d(0,10px,0);
}
[data-recent-chat][data-demo-phase="context"] [data-recent-subagent-card],
[data-recent-chat][data-demo-phase="user"] [data-recent-subagent-card],
[data-recent-chat][data-demo-phase="agent"] [data-recent-subagent-card] {
  opacity: 0;
  transform: translate3d(0,8px,0);
}
[data-recent-chat][data-demo-phase="running"] [data-recent-subagent-status] {
  display: inline-block;
  animation: recent-demo-spin 900ms linear infinite;
}

[data-recent-task-row],
[data-recent-agent-card],
[data-recent-plugin-row],
[data-recent-skill-row],
[data-recent-tool-row],
[data-recent-output] {
  position: relative;
  isolation: isolate;
}
[data-recent-task-row]::after,
[data-recent-agent-card]::after,
[data-recent-plugin-row]::after,
[data-recent-skill-row]::after,
[data-recent-tool-row]::after,
[data-recent-output]::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 3;
  border: 2px solid rgba(111,134,79,.58);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity 220ms cubic-bezier(.16,1,.3,1), transform 320ms cubic-bezier(.16,1,.3,1);
}
[data-recent-task-row].is-demo-focus::after,
[data-recent-agent-card].is-demo-focus::after,
[data-recent-plugin-row].is-demo-focus::after,
[data-recent-skill-row].is-demo-focus::after,
[data-recent-tool-row].is-demo-focus::after,
[data-recent-output].is-demo-focus::after {
  opacity: 1;
  transform: scale(1);
}
[data-recent-task-status].is-demo-running::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 5px;
  display: inline-block;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: recent-demo-spin 700ms linear infinite;
}
[data-recent-agent-card].is-demo-sequencing .tour-agent-metrics i {
  opacity: 0;
  animation: recent-demo-enter 420ms cubic-bezier(.16,1,.3,1) forwards;
}
[data-recent-agent-card].is-demo-sequencing .tour-agent-metrics i:nth-child(2) { animation-delay: 180ms; }
[data-recent-agent-card].is-demo-sequencing .tour-agent-metrics i:nth-child(3) { animation-delay: 360ms; }

@keyframes recent-demo-enter {
  from { opacity: 0; transform: translate3d(0,8px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes recent-demo-pulse {
  50% { opacity: .42; transform: scale(.76); }
}
@keyframes recent-demo-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}