/*
 * Unified product-site layer.
 * Keeps the existing content and interactions, while applying one restrained
 * visual system across every section: generous type, warm cards, soft rules.
 */

:root {
  --shell: min(1080px, calc(100vw - 48px));
  --ui-page: #fdfdfd;
  --ui-card: #f7f5f4;
  --ui-card-strong: #f1efec;
  --ui-ink: #0d0d0c;
  --ui-copy: #302f2d;
  --ui-muted: #8d8984;
  --ui-rule: #e7e3df;
  --ui-rule-strong: #d9d4cf;
  --ui-radius-lg: 32px;
  --ui-radius-md: 24px;
  --ui-shadow: 0 24px 70px rgba(41, 35, 29, 0.055);
  --ui-section-space: clamp(64px, 5.5vw, 88px);
}

/* Claude model selector ---------------------------------------------------- */
html body .claude-video-prompt .claude-prompt-model {
  position: static;
  display: flex;
  width: auto;
  height: 29px;
  min-height: 29px;
  margin-left: auto;
  padding: 0 8px;
  gap: 4px;
  align-items: center;
  color: #252521;
  background: #f7f6f3;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font: 500 11px/1 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

html body .claude-video-prompt .claude-prompt-model:hover,
html body .claude-video-prompt .claude-prompt-model:focus-visible,
html body .claude-video-prompt .claude-prompt-model[aria-expanded="true"] {
  background: #f2f1ee;
  outline: none;
}

html body .claude-video-prompt .claude-prompt-model i {
  color: #918e87;
  font-style: normal;
  font-weight: 400;
}

html body .claude-video-prompt .claude-prompt-model > svg {
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  fill: none;
  stroke: #68665f;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .claude-model-menu[hidden] {
  display: none;
}

html body .claude-model-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% - 3px);
  right: 64px;
  width: min(244px, calc(100vw - 28px));
  padding: 5px;
  overflow: hidden;
  color: #252521;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d8d6d1;
  border-radius: 12px;
  box-shadow:
    0 14px 34px rgba(44, 42, 37, 0.14),
    0 2px 6px rgba(44, 42, 37, 0.08);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

html body .claude-model-menu button {
  appearance: none;
  position: static;
  width: 100%;
  height: auto;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

html body .claude-model-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 41px;
  padding: 6px 8px;
  gap: 8px;
  align-items: center;
  border-radius: 8px !important;
}

html body .claude-model-item:hover,
html body .claude-model-item:focus-visible {
  background: #f2f1ef;
  outline: none;
}

html body .claude-model-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

html body .claude-model-item strong {
  color: #23231f;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.15;
}

html body .claude-model-item strong em {
  display: inline-flex;
  min-height: 15px;
  margin-left: 4px;
  padding-inline: 5px;
  align-items: center;
  color: #1f5f9f;
  background: #d9eaff;
  border-radius: 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  vertical-align: 1px;
}

html body .claude-model-item small {
  overflow: hidden;
  color: #918e87;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-model-item > i {
  padding: 3px 7px;
  color: #1858a0;
  background: #fff;
  border: 1px solid #e2e0db;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

html body .claude-model-item > svg {
  display: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #2e78db;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .claude-model-item.is-selected > svg {
  display: block;
}

html body .claude-model-submenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  min-height: 36px;
  padding: 0 9px;
  gap: 6px;
  align-items: center;
  border-top: 1px solid #e6e4df !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body .claude-model-submenu:hover,
html body .claude-model-submenu:focus-visible {
  background: #f7f6f3;
  outline: none;
}

html body .claude-model-submenu i {
  color: #8e8b84;
  font-style: normal;
  font-weight: 400;
}

html body .claude-model-submenu svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #8e8b84;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AI client compatibility switcher — inspired by ElevenLabs' masked customer-story tabs. */
html body .agent-compatibility {
  padding: 40px 0;
  background: var(--ui-page, #f5f4ef);
}

html body .agent-switcher {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-height: 44px;
}

html body .agent-brand-tabs {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

html body .agent-brand-tab {
  --tile-bg: #dfddd7;
  position: relative;
  width: 44px;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  outline: none;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}

html body .agent-brand-tab:focus-visible {
  outline: 2px solid var(--ui-ink, #181816);
  outline-offset: 4px;
}

html body .agent-tab-timer {
  position: absolute;
  inset: -5px auto auto -5px;
  width: 54px;
  max-width: none;
  height: 54px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

html body .agent-brand-tab.is-selected .agent-tab-timer {
  opacity: 1;
}

html body .agent-tab-timer rect {
  fill: none;
  stroke: var(--agent-color);
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html body .agent-brand-tab.is-selected .agent-tab-timer rect {
  animation: agent-tab-progress 4.2s linear forwards;
}

html body .agent-logo-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--agent-surface, var(--tile-bg));
  overflow: hidden;
  opacity: .36;
  transition: opacity 280ms ease;
}

html body .agent-brand-tab:hover {
  transform: translateY(-2px);
}

html body .agent-brand-tab.is-selected .agent-logo-tile {
  opacity: 1;
}

html body .agent-logo-tile img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

html body .agent-logo-official.is-opencode {
  width: 100%;
  height: 100%;
}

html body .agent-logo-official.is-codex {
  width: 34px;
  height: 34px;
}

html body .agent-logo-official.is-claude {
  width: 27px;
  height: 27px;
}

html body .agent-logo-official.is-deepseek {
  width: 29px;
  height: 29px;
  filter: brightness(0) invert(1);
}

html body .agent-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html body .agent-panel-stack {
  display: grid;
  min-width: 0;
  min-height: 44px;
  align-items: start;
}

html body .agent-panel {
  grid-area: 1 / 1;
  max-width: none;
  opacity: 0;
  pointer-events: none;
}

html body .agent-panel.is-active,
html body .agent-panel.is-leaving {
  opacity: 1;
}

html body .agent-panel.is-active {
  z-index: 2;
  pointer-events: auto;
}

html body .agent-panel.is-leaving {
  z-index: 1;
}

html body .agent-panel-mask {
  width: fit-content;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(to right, #000 0 35%, transparent 66% 100%);
  mask-image: linear-gradient(to right, #000 0 35%, transparent 66% 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html body .agent-panel.is-active .agent-panel-mask {
  animation: agent-copy-in 540ms cubic-bezier(.2,.72,.2,1) both;
}

html body .agent-panel.is-leaving .agent-panel-mask {
  animation: agent-copy-out 420ms cubic-bezier(.4,0,.6,1) both;
}

html body .agent-panel h2 {
  margin: 0;
  color: var(--ui-ink, #181816);
  font-size: 15px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
}

html body .agent-panel h2 span {
  display: inline-block;
  margin-left: 3px;
  font-size: 12px;
  transform: translateY(-2px);
}

html body .agent-panel p {
  margin: 6px 0 0;
  color: var(--ui-muted, #77736c);
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 0;
  white-space: nowrap;
}

@keyframes agent-tab-progress {
  to { stroke-dashoffset: 0; }
}

@keyframes agent-copy-in {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@keyframes agent-copy-out {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
}

html.theme-dark body .agent-compatibility {
  background: var(--ui-page, #080a12);
}

html.theme-dark body .agent-brand-tab {
  --tile-bg: #262725;
}

@media (max-width: 900px) {
  html body .agent-switcher {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html body .agent-brand-tabs {
    justify-content: flex-start;
    max-width: 224px;
  }
}

@media (max-width: 560px) {
  html body .agent-compatibility {
    padding: 32px 0;
  }

  html body .agent-brand-tab {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
  }

  html body .agent-logo-tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  html body .agent-logo-tile img {
    max-width: none;
    max-height: none;
  }

  html body .agent-panel p {
    max-width: 34ch;
    margin-top: 8px;
    line-height: 20px;
    white-space: normal;
  }
}

/* Quick Start v2.7 — simplified, with fewer nested surfaces. */
html body #quickstart .quickstart-install-stage .quickstart-install-card {
  height: 570px;
  flex-basis: 570px;
  background: #f3f2ef;
  border: 0;
  border-radius: 28px;
}

html body #quickstart .quickstart-install-visual {
  padding: 34px;
}

html body #quickstart .quickstart-install-summary strong,
html body #quickstart .quickstart-demo-stage-heading strong {
  font-size: 25px;
}

html body #quickstart .quickstart-account-option,
html body #quickstart .quickstart-account-option + .quickstart-account-option {
  margin-top: 24px;
  padding: 22px 0 0;
  background: transparent;
  border: 0;
  border-top: .5px solid #d8d5cf;
  border-radius: 0;
}

html body #quickstart .quickstart-account-option > p,
html body #quickstart .quickstart-account-action small {
  display: none;
}

html body #quickstart .quickstart-account-action {
  margin-top: 14px;
}

html body #quickstart .quickstart-account-action a {
  min-height: 34px;
  padding: 0 15px;
}

html body #quickstart .quickstart-account-command {
  margin-top: 12px;
  padding: 11px 11px 11px 15px;
  background: rgba(255, 255, 255, .72);
  border: 0;
  border-radius: 12px;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 94px;
  padding: 15px 4px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

html body #quickstart .quickstart-agent-eyebrow {
  display: none;
}

html body #quickstart .quickstart-install-stage .agent-switcher {
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
}

html body #quickstart .quickstart-install-stage .agent-tab-timer {
  display: block;
  inset: -6px auto auto -6px;
  width: 48px;
  height: 48px;
}

html body #quickstart .quickstart-install-stage .agent-brand-tab.is-selected .agent-logo-tile {
  outline: 0;
}

html body #quickstart .quickstart-install-stage .agent-panel p {
  max-width: none;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
}

html body #quickstart .quickstart-demo-stage {
  padding: 30px 16px 16px;
  background: #f3f2ef;
  border: 0;
  border-radius: 28px;
}

html body #quickstart .quickstart-demo-stage-heading {
  padding: 0 14px 20px;
}

html body #quickstart .quickstart-repository-command {
  top: 0;
  right: 0;
  left: 0;
  padding: 17px 18px;
  background: rgba(249, 249, 247, .96);
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: none;
}

html body #quickstart .quickstart-repository-intro span,
html body #quickstart .quickstart-repository-intro small {
  display: none;
}

html body #quickstart .quickstart-repository-intro {
  grid-template-columns: 1fr;
}

html body #quickstart .quickstart-repository-code {
  margin-top: 9px;
  border: 0;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  border: 0;
  border-radius: 21px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-visual {
  padding-top: 42px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    min-height: 570px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    min-height: 550px;
  }

  html body #quickstart .quickstart-install-visual {
    padding: 26px;
  }

  html body #quickstart .quickstart-install-stage .agent-switcher {
    grid-template-columns: 1fr;
  }
}

/* Quick Start v2.11 — client switcher belongs to the setup card. */
html body #quickstart .quickstart-install-stage {
  gap: 0;
  overflow: hidden;
  background: #f3f2ef;
  border-radius: 28px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 110px;
  padding: 20px 34px;
  background: transparent;
  border: 0;
  border-top: .5px solid #d8d5cf;
  border-radius: 0;
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 20px 26px 24px;
  }
}

/* Quick Start v2.10 — final contained setup composition. */
html body #quickstart .quickstart-install-stage {
  gap: 0;
  overflow: hidden;
  background: #f3f2ef;
  border-radius: 28px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 110px;
  padding: 20px 34px;
  background: transparent;
  border: 0;
  border-top: .5px solid #d8d5cf;
  border-radius: 0;
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 20px 26px 24px;
  }
}

/* Quick Start v2.9 — contain the client switcher inside the setup card. */
html body #quickstart .quickstart-install-stage {
  gap: 0;
  overflow: hidden;
  background: #f3f2ef;
  border-radius: 28px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 110px;
  padding: 20px 34px;
  background: transparent;
  border-top: .5px solid #d8d5cf;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-install-stage {
    background: #f3f2ef;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 20px 26px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .agent-brand-tab.is-selected .agent-tab-timer rect,
  html body .agent-panel.is-active .agent-panel-mask,
  html body .agent-panel.is-leaving .agent-panel-mask {
    animation: none;
    stroke-dashoffset: 0;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* ElevenLabs-style hero stage: one quiet rail, one action, one visual focus. */
html body .hero .interactive-case-label,
html body .hero .session-story-step,
html body .hero .session-story-path,
html body .hero .session-story-play {
  display: none;
}

html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
  position: absolute;
  z-index: 24;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: auto;
  height: 52px;
  padding: 4px;
  overflow: hidden;
  color: #262623;
  background: #efeeeb;
  border: 1px solid rgba(31, 31, 29, 0.1);
  border-radius: 18px 18px 0 0;
  box-shadow: none;
  clip: auto;
  clip-path: none;
  white-space: normal;
  backdrop-filter: none;
}

html body .hero .session-stage-tab {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 42px;
  color: #77746e;
  border-radius: 13px;
  font: 450 12px/1 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.015em;
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

html body .hero .session-stage-tab > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: #aaa7a0;
  border-radius: 50%;
}

html body .hero .session-stage-codex > i { background: #262b33; }
html body .hero .session-stage-memory > i { background: #4d9779; }
html body .hero .session-stage-claude > i { background: #d97757; }

html body .hero .session-demo[data-state="idle"] .session-stage-codex,
html body .hero .session-demo[data-state^="codex-"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-memory"] .session-stage-memory,
html body .hero .session-demo[data-state="codex-handoff"] .session-stage-memory,
html body .hero .session-demo[data-state="searching"] .session-stage-memory,
html body .hero .session-demo[data-state="memory-1"] .session-stage-memory,
html body .hero .session-demo[data-state="asking"] .session-stage-claude,
html body .hero .session-demo[data-state="skill"] .session-stage-claude,
html body .hero .session-demo[data-state="inspecting"] .session-stage-claude,
html body .hero .session-demo[data-state="answer"] .session-stage-claude {
  color: #20211e;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 31, 29, 0.08), 0 1px 2px rgba(31, 31, 29, 0.04);
}

html body .hero .codex-composer.is-ready button[data-codex-send-button] {
  cursor: pointer;
}

@media (min-width: 901px) {
  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 52px;
    height: 648px;
  }

  html body .hero .session-demo .codex-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .codex-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .codex-sim {
    transform: translateY(18px);
  }

  html body .hero .session-demo .claude-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .claude-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .claude-sim {
    transform: translateY(-18px);
  }

  html body .hero .real-handoff-link {
    min-width: 138px;
    padding: 8px 10px;
    border-color: rgba(77, 151, 121, 0.18);
    border-radius: 11px;
    box-shadow: 0 8px 22px rgba(35, 54, 45, 0.11);
  }
}

@media (max-width: 900px) {
  html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    height: 52px;
    padding: 4px;
  }

  html body .hero .session-stage-tab {
    height: 42px;
    font-size: 10px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 52px;
    height: 648px;
  }
}

@media (max-width: 760px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 790px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 56px;
    height: 734px;
  }

  html body .hero .real-agent-grid .claude-sim,
  html body .hero .real-agent-stage[data-agent-focus] .claude-sim {
    top: 370px;
  }
}

@media (max-width: 520px) {
  html body .hero .session-stage-tab {
    gap: 5px;
    font-size: 9px;
  }

  html body .hero .session-stage-tab > i {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
  }
}

/* Good Cases scroll story -------------------------------------------------
 * Editorial copy scrolls on the left while a live HTML product surface stays
 * fixed on the right. The visual language follows the restrained Studio page:
 * hairline rules, paper surfaces, no decorative shadows, local state motion.
 */
html body #cases .case-scroll-story,
html.theme-dark body #cases .case-scroll-story {
  --story-ink: #000000;
  --story-copy: #777169;
  --story-muted: #92908a;
  --story-rule: rgba(29, 29, 26, 0.13);
  --story-paper: #f5f3f1;
  --story-panel: #eeece8;
  --story-positive: #6f8875;
  --story-positive-soft: #dce8df;
  --story-negative: #d67669;
  --story-negative-soft: #f2ded9;
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(520px, 1.18fr);
  align-items: start;
  border-top: 0.5px solid var(--story-rule);
  border-bottom: 0.5px solid var(--story-rule);
}

html.theme-dark body #cases .case-scroll-story {
  --story-ink: #f0eee9;
  --story-copy: #b8b5ae;
  --story-muted: #7e7d77;
  --story-rule: rgba(240, 238, 233, 0.13);
  --story-paper: #141512;
  --story-panel: #1a1b18;
  --story-positive: #94ab98;
  --story-positive-soft: #243129;
  --story-negative: #de887c;
  --story-negative-soft: #362420;
}

html body #cases .case-story-copy,
html.theme-dark body #cases .case-story-copy {
  border-right: 0.5px solid var(--story-rule);
}

html body #cases .case-story-step,
html.theme-dark body #cases .case-story-step {
  min-height: 560px;
  padding: 72px clamp(34px, 4vw, 58px) 56px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 0.5px solid var(--story-rule);
  opacity: 0.42;
  outline: none;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body #cases .case-story-step:last-child,
html.theme-dark body #cases .case-story-step:last-child {
  border-bottom: 0;
}

html body #cases .case-story-step.is-active,
html body #cases .case-story-step:focus-visible,
html.theme-dark body #cases .case-story-step.is-active,
html.theme-dark body #cases .case-story-step:focus-visible {
  opacity: 1;
}

html body #cases .case-story-step:focus-visible,
html.theme-dark body #cases .case-story-step:focus-visible {
  box-shadow: inset 2px 0 0 var(--story-positive);
}

html body #cases .case-story-index,
html.theme-dark body #cases .case-story-index {
  margin-bottom: 28px;
  color: var(--story-muted);
  font: 500 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.085em;
}

html body #cases .case-story-step.is-active .case-story-index,
html.theme-dark body #cases .case-story-step.is-active .case-story-index {
  color: var(--story-positive);
}

html body #cases .case-story-step h3,
html.theme-dark body #cases .case-story-step h3 {
  max-width: 430px;
  margin: 0;
  color: var(--story-ink);
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.01em;
}

html body #cases .case-story-step > p,
html.theme-dark body #cases .case-story-step > p {
  max-width: 440px;
  margin: 18px 0 0;
  color: var(--story-copy);
  font-size: 17px;
  line-height: 25px;
  letter-spacing: normal;
}

html body #cases .case-story-step > p code,
html.theme-dark body #cases .case-story-step > p code {
  padding: 2px 5px;
  color: var(--story-ink);
  background: color-mix(in srgb, var(--story-rule) 48%, transparent);
  border-radius: 4px;
  font-size: 0.9em;
}

html body #cases .case-story-metrics,
html.theme-dark body #cases .case-story-metrics {
  max-width: 440px;
  margin: 32px 0 0;
  display: grid;
  gap: 13px;
  border: 0;
}

html body #cases .case-story-metrics > div,
html.theme-dark body #cases .case-story-metrics > div {
  min-height: 0;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
}

html body #cases .case-story-metrics > div + div,
html.theme-dark body #cases .case-story-metrics > div + div {
  border-top: 0;
}

html body #cases .case-story-metrics dt,
html.theme-dark body #cases .case-story-metrics dt {
  color: var(--story-muted);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .case-story-metrics dd,
html.theme-dark body #cases .case-story-metrics dd {
  margin: 0;
  color: var(--story-ink);
  font: 500 14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-story-metrics dd span,
html.theme-dark body #cases .case-story-metrics dd span {
  color: var(--story-muted);
  font-size: 11px;
  font-weight: 400;
}

html body #cases .case-story-metrics > div:last-child dt,
html body #cases .case-story-metrics > div:last-child dd,
html.theme-dark body #cases .case-story-metrics > div:last-child dt,
html.theme-dark body #cases .case-story-metrics > div:last-child dd {
  color: var(--story-positive);
}

html body #cases .case-story-detail,
html.theme-dark body #cases .case-story-detail {
  width: fit-content;
  margin-top: 30px;
  padding: 0 0 5px;
  color: var(--story-ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid currentColor;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
}

html body #cases .case-story-detail span,
html.theme-dark body #cases .case-story-detail span {
  display: inline-block;
  margin-left: 7px;
  transition: transform 180ms ease;
}

html body #cases .case-story-detail:hover span,
html body #cases .case-story-detail:focus-visible span,
html.theme-dark body #cases .case-story-detail:hover span,
html.theme-dark body #cases .case-story-detail:focus-visible span {
  transform: translate(2px, -2px);
}

html body #cases .case-story-stage,
html.theme-dark body #cases .case-story-stage {
  min-width: 0;
  height: 100%;
  padding: 0 0 0 clamp(28px, 3.8vw, 58px);
}

html body #cases .case-story-sticky,
html.theme-dark body #cases .case-story-sticky {
  --story-ink: #1c211c;
  --story-copy: #5f655f;
  --story-muted: #7c827b;
  --story-rule: rgba(33, 48, 37, 0.14);
  --story-paper: rgba(246, 243, 236, 0.82);
  --story-panel: rgba(239, 237, 229, 0.72);
  --story-positive: #52775b;
  --story-positive-soft: rgba(206, 224, 210, 0.76);
  --story-negative: #b87169;
  --story-negative-soft: rgba(232, 213, 208, 0.78);
  --story-retry: #94875f;
  position: sticky;
  top: 82px;
  height: min(650px, calc(100vh - 112px));
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: #164f32 url("./assets/generated/quickstart-conversation-bg-v2.png") center 50% / cover no-repeat;
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

html body #cases .case-story-sticky::before,
html.theme-dark body #cases .case-story-sticky::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: none;
  mix-blend-mode: normal;
}

html body #cases .case-story-panels,
html.theme-dark body #cases .case-story-panels {
  position: relative;
  z-index: 1;
  height: 100%;
}

html body #cases .case-story-panel,
html.theme-dark body #cases .case-story-panel {
  position: absolute;
  inset: 0;
  padding: clamp(24px, 3vw, 38px);
  overflow: hidden;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: translateY(10px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 700ms;
}

html body #cases .case-route-panel,
html.theme-dark body #cases .case-route-panel {
  display: grid;
  place-items: center;
}

html body #cases .case-story-panel.case-route-panel > header,
html.theme-dark body #cases .case-story-panel.case-route-panel > header,
html body #cases .case-story-panel.case-procedure-panel > header,
html.theme-dark body #cases .case-story-panel.case-procedure-panel > header {
  display: none;
}

html body #cases .case-procedure-panel,
html.theme-dark body #cases .case-procedure-panel {
  display: grid;
  place-items: center;
}

html body #cases .case-story-panel.is-active,
html.theme-dark body #cases .case-story-panel.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 70ms, 70ms, 70ms, 0s;
}

html body #cases .case-story-panel > header,
html.theme-dark body #cases .case-story-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

html body #cases .case-story-panel > header span,
html.theme-dark body #cases .case-story-panel > header span {
  color: var(--story-muted);
  font-size: 12px;
}

html body #cases .case-story-panel > header strong,
html.theme-dark body #cases .case-story-panel > header strong {
  color: var(--story-ink);
  font-size: 13px;
  font-weight: 500;
}

/* Case 01: retry branch versus direct recalled path. */
html body #cases .case-route-compare,
html.theme-dark body #cases .case-route-compare {
  width: 100%;
  height: min(470px, calc(100% - 42px));
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: #f6f3ec;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(8, 30, 21, 0.2);
}

html body #cases .case-route-lane,
html.theme-dark body #cases .case-route-lane {
  min-width: 0;
  display: grid;
  grid-template-rows: 52px minmax(170px, 1fr) 164px;
}

html body #cases .case-route-lane + .case-route-lane,
html.theme-dark body #cases .case-route-lane + .case-route-lane {
  border-left: 0.5px solid var(--story-rule);
}

html body #cases .case-route-lane-head,
html.theme-dark body #cases .case-route-lane-head {
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--story-rule);
}

html body #cases .case-route-lane-head b,
html.theme-dark body #cases .case-route-lane-head b {
  padding: 6px 10px;
  color: var(--story-muted);
  background: color-mix(in srgb, var(--story-rule) 34%, transparent);
  border-radius: 999px;
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .case-route-lane.is-on .case-route-lane-head b,
html.theme-dark body #cases .case-route-lane.is-on .case-route-lane-head b {
  color: var(--story-positive);
  background: var(--story-positive-soft);
}

html body #cases .case-route-lane-head span,
html.theme-dark body #cases .case-route-lane-head span {
  color: var(--story-muted);
  font-size: 10px;
}

html body #cases .case-route-map,
html.theme-dark body #cases .case-route-map {
  position: relative;
  min-height: 178px;
}

html body #cases .case-route-map::before,
html.theme-dark body #cases .case-route-map::before {
  position: absolute;
  top: 56%;
  right: 14%;
  left: 14%;
  height: 1px;
  background: color-mix(in srgb, var(--story-muted) 16%, transparent);
  content: "";
}

html body #cases .route-line,
html.theme-dark body #cases .route-line {
  position: absolute;
  height: 1px;
  display: block;
  background: color-mix(in srgb, var(--story-muted) 24%, transparent);
  border-radius: 999px;
  transform-origin: left center;
}

html body #cases .route-main,
html.theme-dark body #cases .route-main {
  top: 56%;
  right: 14%;
  left: 14%;
  background: color-mix(in srgb, var(--story-negative) 44%, transparent);
}

html body #cases .case-route-lane.is-on .route-main,
html.theme-dark body #cases .case-route-lane.is-on .route-main {
  background: color-mix(in srgb, var(--story-positive) 42%, transparent);
}

html body #cases .route-branch,
html.theme-dark body #cases .route-branch {
  top: 56%;
  left: 38%;
  width: 26%;
  background: color-mix(in srgb, var(--story-negative) 46%, transparent);
  transform: rotate(-24deg);
}

html body #cases .route-node,
html.theme-dark body #cases .route-node {
  position: absolute;
  top: calc(56% - 4px);
  width: 8px;
  height: 8px;
  display: block;
  background: var(--story-paper);
  border: 1px solid color-mix(in srgb, var(--story-muted) 82%, transparent);
  border-radius: 50%;
}

html body #cases .route-node.n1,
html.theme-dark body #cases .route-node.n1 { left: calc(14% - 4px); }
html body #cases .route-node.n2,
html.theme-dark body #cases .route-node.n2 { left: calc(38% - 4px); }
html body #cases .route-node.n3,
html.theme-dark body #cases .route-node.n3 { left: calc(62% - 4px); }
html body #cases .route-node.n4,
html.theme-dark body #cases .route-node.n4 { right: calc(14% - 4px); }

html body #cases .route-node.retry,
html.theme-dark body #cases .route-node.retry {
  top: calc(56% - 35px);
  left: calc(62% - 4px);
  border-color: var(--story-negative);
}

html body #cases .case-route-lane.is-on .route-node,
html.theme-dark body #cases .case-route-lane.is-on .route-node {
  border-color: var(--story-positive);
}

html body #cases .route-label,
html.theme-dark body #cases .route-label {
  position: absolute;
  top: calc(56% + 14px);
  width: 42px;
  color: var(--story-muted);
  font-size: 9px;
  text-align: center;
  transform: translateX(-50%);
}

html body #cases .route-label.l1,
html.theme-dark body #cases .route-label.l1 { left: 14%; }
html body #cases .route-label.l2,
html.theme-dark body #cases .route-label.l2 { left: 38%; }
html body #cases .route-label.l3,
html.theme-dark body #cases .route-label.l3 { left: 62%; }
html body #cases .route-label.l4,
html.theme-dark body #cases .route-label.l4 { left: 86%; }

html body #cases .route-label.retry-label,
html.theme-dark body #cases .route-label.retry-label {
  top: calc(56% - 53px);
  left: 62%;
  color: var(--story-negative);
}

html body #cases .case-mini-code,
html.theme-dark body #cases .case-mini-code {
  min-height: 0;
  overflow: hidden;
  border-top: 0.5px solid var(--story-rule);
  background: color-mix(in srgb, var(--story-panel) 64%, var(--story-paper));
}

html body #cases .mini-code-scroll,
html.theme-dark body #cases .mini-code-scroll {
  position: relative;
  height: calc(100% - 38px);
  overflow: hidden;
}

html body #cases .mini-code-scroll::after,
html.theme-dark body #cases .mini-code-scroll::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 2px;
  height: 34%;
  background: color-mix(in srgb, var(--story-muted) 32%, transparent);
  border-radius: 999px;
  content: "";
  opacity: 0.28;
}

html body #cases .mini-code-track,
html.theme-dark body #cases .mini-code-track {
  will-change: transform;
}

html body #cases .mini-code-bar,
html.theme-dark body #cases .mini-code-bar {
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 0.5px solid var(--story-rule);
}

html body #cases .mini-code-bar > i,
html.theme-dark body #cases .mini-code-bar > i {
  width: 5px;
  height: 5px;
  display: block;
  background: var(--story-muted);
  border-radius: 50%;
  opacity: 0.55;
}

html body #cases .mini-code-bar b,
html.theme-dark body #cases .mini-code-bar b {
  margin-left: auto;
  color: var(--story-muted);
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}

html body #cases .case-route-lane.is-on .mini-code-bar b,
html.theme-dark body #cases .case-route-lane.is-on .mini-code-bar b {
  color: var(--story-positive);
}

html body #cases .case-mini-code code,
html.theme-dark body #cases .case-mini-code code {
  min-height: 27px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--story-copy);
  border-bottom: 0;
  font: 400 9px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

html body #cases .case-mini-code code.is-command,
html.theme-dark body #cases .case-mini-code code.is-command {
  color: var(--story-ink);
  background: color-mix(in srgb, #e9c36d 18%, transparent);
}

html body #cases .case-mini-code code.is-retry,
html.theme-dark body #cases .case-mini-code code.is-retry {
  color: color-mix(in srgb, var(--story-negative) 72%, var(--story-ink));
  background: color-mix(in srgb, var(--story-negative-soft) 58%, transparent);
}

html body #cases .case-mini-code code > i,
html.theme-dark body #cases .case-mini-code code > i {
  color: var(--story-muted);
  font-style: normal;
}

html body #cases .case-mini-code code > em,
html.theme-dark body #cases .case-mini-code code > em {
  margin-left: auto;
  font-style: normal;
}

html body #cases .case-mini-code code.is-error,
html.theme-dark body #cases .case-mini-code code.is-error {
  color: var(--story-negative);
  background: var(--story-negative-soft);
}

html body #cases .case-mini-code code.is-memory,
html body #cases .case-mini-code code.is-pass,
html.theme-dark body #cases .case-mini-code code.is-memory,
html.theme-dark body #cases .case-mini-code code.is-pass {
  color: var(--story-positive);
  background: var(--story-positive-soft);
}

/* Case 02: the same commit request after a session boundary. The visual
 * grammar deliberately mirrors Case 01: one quiet paper panel, two lanes,
 * restrained status color, and independent OFF/ON timelines. */
html body #cases .procedure-compare,
html.theme-dark body #cases .procedure-compare {
  width: 100%;
  height: min(470px, calc(100% - 42px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: #f6f3ec;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(8, 30, 21, 0.2);
}

html body #cases .procedure-lane,
html.theme-dark body #cases .procedure-lane {
  min-width: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
}

html body #cases .procedure-lane + .procedure-lane,
html.theme-dark body #cases .procedure-lane + .procedure-lane {
  border-left: 0.5px solid var(--story-rule);
}

html body #cases .procedure-lane-head,
html.theme-dark body #cases .procedure-lane-head {
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--story-rule);
}

html body #cases .procedure-lane-head b,
html.theme-dark body #cases .procedure-lane-head b {
  padding: 6px 10px;
  color: var(--story-muted);
  background: color-mix(in srgb, var(--story-rule) 34%, transparent);
  border-radius: 999px;
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .procedure-lane.is-on .procedure-lane-head b,
html.theme-dark body #cases .procedure-lane.is-on .procedure-lane-head b {
  color: var(--story-positive);
  background: var(--story-positive-soft);
}

html body #cases .procedure-lane-head span,
html.theme-dark body #cases .procedure-lane-head span {
  color: var(--story-muted);
  font-size: 9px;
}

html body #cases .procedure-thread,
html.theme-dark body #cases .procedure-thread {
  position: relative;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
}

html body #cases .procedure-prompt,
html.theme-dark body #cases .procedure-prompt {
  display: flex;
  gap: 8px;
  align-items: center;
}

html body #cases .procedure-prompt > i,
html.theme-dark body #cases .procedure-prompt > i {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--story-muted);
  background: color-mix(in srgb, var(--story-rule) 34%, transparent);
  border-radius: 50%;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
}

html body #cases .procedure-prompt > span,
html.theme-dark body #cases .procedure-prompt > span {
  min-width: 0;
  padding: 9px 14px;
  overflow: hidden;
  color: var(--story-copy);
  background: color-mix(in srgb, var(--story-rule) 25%, transparent);
  border: 0.5px solid var(--story-rule);
  border-radius: 12px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #cases .procedure-terminal,
html.theme-dark body #cases .procedure-terminal {
  position: relative;
  min-height: 132px;
  margin-top: 22px;
  padding: 42px 16px 16px;
  overflow: hidden;
  color: var(--story-copy);
  background: color-mix(in srgb, var(--story-panel) 68%, var(--story-paper));
  border: 0.5px solid var(--story-rule);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
}

html body #cases .procedure-terminal-bar,
html.theme-dark body #cases .procedure-terminal-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 30px;
  padding: 0 12px;
  display: flex;
  gap: 5px;
  align-items: center;
  background: color-mix(in srgb, var(--story-rule) 32%, transparent);
  border-bottom: 0.5px solid var(--story-rule);
}

html body #cases .procedure-terminal-bar > i,
html.theme-dark body #cases .procedure-terminal-bar > i {
  width: 5px;
  height: 5px;
  background: var(--story-muted);
  border-radius: 50%;
  opacity: 0.55;
}

html body #cases .procedure-terminal > small,
html.theme-dark body #cases .procedure-terminal > small {
  display: block;
  color: var(--story-muted);
  font: 400 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .procedure-type,
html.theme-dark body #cases .procedure-type {
  width: 0;
  max-width: 100%;
  margin-top: 16px;
  display: block;
  overflow: hidden;
  color: var(--story-ink);
  font: 500 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

html body #cases .procedure-terminal > em,
html.theme-dark body #cases .procedure-terminal > em {
  width: fit-content;
  margin-top: 15px;
  padding: 5px 8px;
  display: block;
  color: var(--story-negative);
  background: var(--story-negative-soft);
  border-radius: 999px;
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  opacity: 0;
}

html body #cases .procedure-lane.is-on .procedure-terminal > em,
html.theme-dark body #cases .procedure-lane.is-on .procedure-terminal > em {
  color: var(--story-positive);
  background: var(--story-positive-soft);
}

html body #cases .procedure-recall,
html.theme-dark body #cases .procedure-recall {
  position: absolute;
  z-index: 3;
  top: 52px;
  right: 14px;
  max-width: calc(100% - 60px);
  padding: 10px 12px;
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--story-positive);
  background: color-mix(in srgb, var(--story-paper) 94%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--story-positive) 30%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(35, 54, 45, 0.12);
  opacity: 0;
  transform: translateY(-7px) scale(0.96);
}

html body #cases .procedure-recall > i,
html.theme-dark body #cases .procedure-recall > i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--story-positive);
  border-radius: 7px;
  font-size: 11px;
  font-style: normal;
}

html body #cases .procedure-recall span,
html.theme-dark body #cases .procedure-recall span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

html body #cases .procedure-recall small,
html.theme-dark body #cases .procedure-recall small,
html body #cases .procedure-recall b,
html.theme-dark body #cases .procedure-recall b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #cases .procedure-recall small,
html.theme-dark body #cases .procedure-recall small {
  color: var(--story-copy);
  font-size: 8px;
}

html body #cases .procedure-recall b,
html.theme-dark body #cases .procedure-recall b {
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .procedure-correction,
html.theme-dark body #cases .procedure-correction {
  width: fit-content;
  max-width: 85%;
  margin: 14px 0 0 auto;
  padding: 8px 12px;
  color: var(--story-negative);
  background: color-mix(in srgb, var(--story-paper) 84%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--story-negative) 60%, transparent);
  border-radius: 11px;
  font-size: 9px;
  opacity: 0;
  transform: translateY(6px);
}

html body #cases .procedure-pass,
html.theme-dark body #cases .procedure-pass {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--story-positive);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--story-positive-soft) 66%, transparent);
  font-size: 13px;
  opacity: 0;
  transform: scale(0.65);
}

html body #cases .procedure-result,
html.theme-dark body #cases .procedure-result {
  position: absolute;
  right: 20px;
  bottom: 17px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--story-negative);
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0;
  transform: translateY(6px);
}

html body #cases .procedure-lane.is-on .procedure-result,
html.theme-dark body #cases .procedure-lane.is-on .procedure-result {
  color: var(--story-positive);
}

html body #cases .procedure-result strong,
html.theme-dark body #cases .procedure-result strong {
  padding: 5px 9px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 999px;
  font-weight: 500;
}

/* Case 03: the same context is compacted; only Memory restores the rationale. */
html body #cases .case-context-panel,
html.theme-dark body #cases .case-context-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

html body #cases .context-compare,
html.theme-dark body #cases .context-compare {
  min-height: 0;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: #f6f3ec;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(8, 30, 21, 0.2);
}

html body #cases .context-lane,
html.theme-dark body #cases .context-lane {
  min-width: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
}

html body #cases .context-lane + .context-lane,
html.theme-dark body #cases .context-lane + .context-lane {
  border-left: 0.5px solid var(--story-rule);
}

html body #cases .context-lane-head,
html.theme-dark body #cases .context-lane-head {
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--story-rule);
}

html body #cases .context-lane-head b,
html.theme-dark body #cases .context-lane-head b {
  padding: 6px 10px;
  color: var(--story-muted);
  background: rgba(105, 111, 105, 0.1);
  border-radius: 999px;
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .context-lane.is-on .context-lane-head b,
html.theme-dark body #cases .context-lane.is-on .context-lane-head b {
  color: var(--story-positive);
  background: var(--story-positive-soft);
}

html body #cases .context-lane-head span,
html.theme-dark body #cases .context-lane-head span {
  color: var(--story-muted);
  font-size: 9px;
}

html body #cases .context-lane.is-on .context-lane-head span,
html.theme-dark body #cases .context-lane.is-on .context-lane-head span {
  color: var(--story-positive);
}

html body #cases .context-scene,
html.theme-dark body #cases .context-scene {
  position: relative;
  min-height: 0;
  padding: 26px 22px 22px;
  overflow: hidden;
}

html body #cases .context-current,
html.theme-dark body #cases .context-current {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 14px;
  background: rgba(244, 245, 243, 0.92);
  border: 0.5px solid rgba(72, 81, 73, 0.18);
  border-radius: 12px;
  overflow: hidden;
  transform-origin: center bottom;
  will-change: opacity, transform, clip-path, filter;
}

html body #cases .context-current small,
html.theme-dark body #cases .context-current small,
html body #cases .context-question small,
html.theme-dark body #cases .context-question small,
html body #cases .context-answer small,
html.theme-dark body #cases .context-answer small,
html body #cases .context-memory-recall small,
html.theme-dark body #cases .context-memory-recall small {
  color: var(--story-muted);
  font: 600 7.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.055em;
}

html body #cases .context-chips,
html.theme-dark body #cases .context-chips {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 0.72fr 0.72fr 1fr;
  gap: 7px;
}

html body #cases .context-chips i,
html.theme-dark body #cases .context-chips i,
html body #cases .context-chips strong,
html.theme-dark body #cases .context-chips strong {
  height: 23px;
  border-radius: 999px;
}

html body #cases .context-chips i,
html.theme-dark body #cases .context-chips i {
  background: #e9ecea;
}

html body #cases .context-chips strong,
html.theme-dark body #cases .context-chips strong {
  display: grid;
  place-items: center;
  color: #a2673c;
  background: #fff1de;
  border: 0.5px solid rgba(207, 139, 68, 0.42);
  font-size: 7px;
  font-weight: 500;
  white-space: nowrap;
}

html body #cases .context-compact,
html.theme-dark body #cases .context-compact {
  position: absolute;
  z-index: 5;
  top: 105px;
  left: 50%;
  width: 108px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--story-muted);
  background: rgba(246, 243, 236, 0.96);
  border: 0.5px solid var(--story-rule);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(28, 33, 28, 0.1);
  opacity: 0;
  transform: translate(-50%, 7px) scale(0.94);
  transform-origin: center;
  will-change: opacity, transform;
}

html body #cases .context-compact span,
html.theme-dark body #cases .context-compact span {
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.07em;
}

html body #cases .context-compact i,
html.theme-dark body #cases .context-compact i {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

html body #cases .context-question,
html.theme-dark body #cases .context-question {
  position: absolute;
  z-index: 2;
  top: 154px;
  right: 22px;
  left: 22px;
  padding-bottom: 0;
  border-bottom: 0;
  opacity: 0;
  transform: translateY(7px);
}

html body #cases .context-question p,
html.theme-dark body #cases .context-question p {
  margin: 8px 0 0;
  color: var(--story-ink);
  font-size: 12px;
  line-height: 1.35;
}

html body #cases .context-memory-recall,
html.theme-dark body #cases .context-memory-recall {
  position: absolute;
  z-index: 4;
  top: 91px;
  right: 28px;
  left: 28px;
  min-height: 47px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--story-positive);
  background: rgba(220, 233, 221, 0.96);
  border: 0.5px solid rgba(82, 119, 91, 0.34);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(39, 73, 48, 0.12);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

html body #cases .context-memory-recall > i,
html.theme-dark body #cases .context-memory-recall > i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

html body #cases .context-memory-recall > i::before,
html.theme-dark body #cases .context-memory-recall > i::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  margin: 7px;
  background: currentColor;
  border-radius: 50%;
}

html body #cases .context-memory-recall span,
html.theme-dark body #cases .context-memory-recall span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

html body #cases .context-memory-recall strong,
html.theme-dark body #cases .context-memory-recall strong {
  font-size: 9px;
  font-weight: 600;
}

html body #cases .context-answer,
html.theme-dark body #cases .context-answer {
  position: absolute;
  z-index: 2;
  top: 220px;
  right: auto;
  left: 22px;
  width: min(78%, 276px);
  height: 102px;
  padding: 11px 13px 38px;
  box-sizing: border-box;
  background: rgba(246, 243, 236, 0.58);
  border: 0.5px solid var(--story-rule);
  border-radius: 11px;
  opacity: 0;
  transform: translateY(10px);
}

html body #cases .context-lane.is-on .context-answer,
html.theme-dark body #cases .context-lane.is-on .context-answer {
  height: 122px;
  background: rgba(244, 248, 243, 0.62);
  border-color: color-mix(in srgb, var(--story-positive) 24%, var(--story-rule));
}

html body #cases .context-answer p,
html.theme-dark body #cases .context-answer p {
  max-width: 100%;
  margin: 8px 0 0;
  color: var(--story-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.012em;
}

html body #cases .context-answer > small,
html.theme-dark body #cases .context-answer > small {
  display: block;
}

html body #cases .context-answer span,
html.theme-dark body #cases .context-answer span {
  position: absolute;
  bottom: 25px;
  left: 13px;
  width: fit-content;
  padding: 5px 8px 5px 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--story-negative);
  background: color-mix(in srgb, var(--story-negative) 9%, transparent);
  border-radius: 999px;
  font: 500 7px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

html body #cases .context-answer span::before,
html.theme-dark body #cases .context-answer span::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  background: currentColor;
  border-radius: 50%;
}

html body #cases .context-lane.is-on .context-answer span,
html.theme-dark body #cases .context-lane.is-on .context-answer span {
  color: var(--story-positive);
  background: color-mix(in srgb, var(--story-positive) 10%, transparent);
}

/* Case 01 uses two independent 11.66s timelines, matching the source GIF:
 * 7.86s of work followed by a 3.8s result hold. ON reaches test/complete first;
 * OFF pauses on the failed branch, retries, then catches up. */
html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-main,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-main {
  animation: story-off-route-progress 11.66s linear infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-main,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-main {
  animation: story-on-route-progress 11.66s linear infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-branch,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-branch {
  animation: story-off-route-branch 11.66s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node {
  animation-duration: 11.66s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n1,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n1 { animation-name: story-off-node-1; }
html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n2,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n2 { animation-name: story-off-node-2; }
html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.retry,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.retry { animation-name: story-off-node-retry; }
html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n3,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n3 { animation-name: story-off-node-3; }
html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n4,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n4 { animation-name: story-off-node-4; }

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node {
  animation-duration: 11.66s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n1,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n1 { animation-name: story-on-node-1; }
html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n2,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n2 { animation-name: story-on-node-2; }
html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n3,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n3 { animation-name: story-on-node-3; }
html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n4,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n4 { animation-name: story-on-node-4; }

html body #cases .case-route-panel.is-active .case-route-lane.is-off .mini-code-track,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .mini-code-track {
  animation: story-code-scroll-off 11.66s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .mini-code-track,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .mini-code-track {
  animation: story-code-scroll-on 11.66s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-terminal,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-terminal {
  animation: story-procedure-terminal 8.96s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-type-off,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-type-off {
  animation: story-procedure-type-off 8.96s steps(30, end) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-type-on,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-type-on {
  animation: story-procedure-type-on 8.96s steps(23, end) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-recall,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-recall {
  animation: story-procedure-recall 8.96s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-terminal > em,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-terminal > em {
  animation: story-procedure-meta 8.96s ease infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-correction,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-correction {
  animation: story-procedure-correction 8.96s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-pass,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-pass {
  animation: story-procedure-pass 8.96s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-procedure-panel.is-active .procedure-result,
html.theme-dark body #cases .case-procedure-panel.is-active .procedure-result {
  animation: story-procedure-result 8.96s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-current,
html.theme-dark body #cases .case-context-panel.is-active .context-current {
  animation: story-context-current 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-chips strong,
html.theme-dark body #cases .case-context-panel.is-active .context-chips strong {
  animation: story-context-key 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-lane.is-on .context-chips strong,
html.theme-dark body #cases .case-context-panel.is-active .context-lane.is-on .context-chips strong {
  animation-name: story-context-key-on;
}

html body #cases .case-context-panel.is-active .context-compact,
html.theme-dark body #cases .case-context-panel.is-active .context-compact {
  animation: story-context-compact 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-compact i,
html.theme-dark body #cases .case-context-panel.is-active .context-compact i {
  animation: story-context-dot 700ms ease-in-out infinite alternate;
}

html body #cases .case-context-panel.is-active .context-compact i + i,
html.theme-dark body #cases .case-context-panel.is-active .context-compact i + i {
  animation-delay: 210ms;
}

html body #cases .case-context-panel.is-active .context-question,
html.theme-dark body #cases .case-context-panel.is-active .context-question {
  animation: story-context-question 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-memory-recall,
html.theme-dark body #cases .case-context-panel.is-active .context-memory-recall {
  animation: story-context-recall 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-answer,
html.theme-dark body #cases .case-context-panel.is-active .context-answer {
  animation: story-context-answer-off 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

html body #cases .case-context-panel.is-active .context-lane.is-on .context-answer,
html.theme-dark body #cases .case-context-panel.is-active .context-lane.is-on .context-answer {
  animation-name: story-context-answer-on;
}

@keyframes story-off-route-progress {
  0%, 8% { clip-path: inset(0 100% 0 0); opacity: 0.42; }
  18%, 43% { clip-path: inset(0 62% 0 0); opacity: 0.72; }
  56% { clip-path: inset(0 36% 0 0); opacity: 0.82; }
  68%, 100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes story-on-route-progress {
  0%, 8% { clip-path: inset(0 100% 0 0); opacity: 0.42; }
  18% { clip-path: inset(0 62% 0 0); opacity: 0.76; }
  38% { clip-path: inset(0 36% 0 0); opacity: 0.9; }
  52%, 100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes story-off-route-branch {
  0%, 18% { transform: rotate(-24deg) scaleX(0); opacity: 0; }
  25%, 43% { transform: rotate(-24deg) scaleX(1); opacity: 0.72; }
  51%, 100% { transform: rotate(-24deg) scaleX(1); opacity: 0.2; }
}

@keyframes story-off-node-1 {
  0%, 7% { background: var(--story-paper); transform: scale(0.78); }
  10%, 15% { background: var(--story-negative); border-color: var(--story-negative); transform: scale(1.35); }
  18%, 100% { background: var(--story-negative); border-color: var(--story-negative); transform: scale(1); }
}

@keyframes story-off-node-2 {
  0%, 14% { background: var(--story-paper); transform: scale(0.8); }
  18%, 44% { background: var(--story-negative); border-color: var(--story-negative); transform: scale(1.35); }
  48%, 100% { background: var(--story-retry); border-color: var(--story-retry); transform: scale(1); }
}

@keyframes story-off-node-retry {
  0%, 21% { opacity: 0; background: var(--story-paper); transform: scale(0.65); }
  27%, 36% { opacity: 1; background: var(--story-negative); border-color: var(--story-negative); transform: scale(1.42); }
  42%, 100% { opacity: 1; background: var(--story-negative); border-color: var(--story-negative); transform: scale(1); }
}

@keyframes story-off-node-3 {
  0%, 50% { background: var(--story-paper); transform: scale(0.8); }
  56%, 63% { background: var(--story-retry); border-color: var(--story-retry); transform: scale(1.35); }
  66%, 100% { background: var(--story-retry); border-color: var(--story-retry); transform: scale(1); }
}

@keyframes story-off-node-4 {
  0%, 62% { background: var(--story-paper); transform: scale(0.8); }
  68%, 74% { background: var(--story-positive); border-color: var(--story-positive); transform: scale(1.5); }
  78%, 100% { background: var(--story-positive); border-color: var(--story-positive); transform: scale(1.12); }
}

@keyframes story-on-node-1 {
  0%, 7% { background: var(--story-paper); transform: scale(0.78); }
  10%, 15% { background: var(--story-positive); transform: scale(1.35); }
  18%, 100% { background: var(--story-positive); transform: scale(1); }
}

@keyframes story-on-node-2 {
  0%, 14% { background: var(--story-paper); transform: scale(0.8); }
  18%, 25% { background: var(--story-positive); transform: scale(1.35); }
  29%, 100% { background: var(--story-positive); transform: scale(1); }
}

@keyframes story-on-node-3 {
  0%, 32% { background: var(--story-paper); transform: scale(0.8); }
  38%, 47% { background: var(--story-positive); transform: scale(1.48); }
  51%, 100% { background: var(--story-positive); transform: scale(1.08); }
}

@keyframes story-on-node-4 {
  0%, 46% { background: var(--story-paper); transform: scale(0.8); }
  52%, 60% { background: var(--story-positive); transform: scale(1.62); }
  64%, 100% { background: var(--story-positive); transform: scale(1.22); }
}

@keyframes story-code-scroll-off {
  0%, 8% { transform: translateY(0); }
  16% { transform: translateY(-27px); }
  25% { transform: translateY(-54px); }
  34% { transform: translateY(-81px); }
  43% { transform: translateY(-108px); }
  52% { transform: translateY(-135px); }
  60% { transform: translateY(-162px); }
  68%, 100% { transform: translateY(-180px); }
}

@keyframes story-code-scroll-on {
  0%, 8% { transform: translateY(0); }
  15% { transform: translateY(-27px); }
  22% { transform: translateY(-54px); }
  30% { transform: translateY(-81px); }
  38% { transform: translateY(-108px); }
  46% { transform: translateY(-135px); }
  54%, 100% { transform: translateY(-153px); }
}

@keyframes story-procedure-terminal {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  18%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes story-procedure-type-off {
  0%, 20% { width: 0; }
  58%, 100% { width: 100%; }
}

@keyframes story-procedure-type-on {
  0%, 20% { width: 0; }
  48%, 100% { width: 100%; }
}

@keyframes story-procedure-recall {
  0%, 10% { opacity: 0; transform: translateY(-7px) scale(0.96); }
  18%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes story-procedure-meta {
  0%, 50% { opacity: 0; transform: translateY(4px); }
  60%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes story-procedure-correction {
  0%, 61% { opacity: 0; transform: translateY(6px); }
  70%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes story-procedure-pass {
  0%, 51% { opacity: 0; transform: scale(0.65); }
  59% { opacity: 1; transform: scale(1.2); }
  66%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes story-procedure-result {
  0%, 71% { opacity: 0; transform: translateY(6px); }
  79%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes story-context-current {
  0%, 13% {
    clip-path: inset(0 round 12px);
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  18% {
    clip-path: inset(5% 2% round 11px);
    filter: blur(0);
    opacity: 0.9;
    transform: translateY(2px) scaleX(0.985) scaleY(0.86);
  }
  24% {
    clip-path: inset(24% 6% round 10px);
    filter: blur(0.2px);
    opacity: 0.64;
    transform: translateY(5px) scaleX(0.94) scaleY(0.52);
  }
  29% {
    clip-path: inset(44% 16% round 999px);
    filter: blur(0.55px);
    opacity: 0.16;
    transform: translateY(9px) scaleX(0.76) scaleY(0.12);
  }
  31%, 100% {
    clip-path: inset(48% 22% round 999px);
    filter: blur(0.7px);
    opacity: 0;
    transform: translateY(10px) scaleX(0.68) scaleY(0.04);
  }
}

@keyframes story-context-key {
  0%, 13% { opacity: 1; transform: scale(1); }
  21% { opacity: 0.88; transform: scale(0.96); }
  29%, 100% { opacity: 0; transform: scale(0.82); }
}

@keyframes story-context-key-on {
  0%, 13% {
    color: #a2673c;
    background: #fff1de;
    border-color: rgba(207, 139, 68, 0.42);
    opacity: 1;
    transform: scale(1);
  }
  21% { opacity: 0.88; transform: scale(0.96); }
  29%, 51% { opacity: 0; transform: scale(0.82); }
  62%, 89% {
    color: var(--story-positive);
    background: rgba(220, 233, 221, 0.98);
    border-color: rgba(82, 119, 91, 0.42);
    opacity: 1;
    transform: scale(1);
  }
  97%, 100% {
    color: var(--story-positive);
    background: rgba(220, 233, 221, 0.98);
    border-color: rgba(82, 119, 91, 0.42);
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes story-context-compact {
  0%, 15% { opacity: 0; transform: translate(-50%, -8px) scaleX(0.68) scaleY(0.38); }
  20% { opacity: 0.55; transform: translate(-50%, -4px) scaleX(0.84) scaleY(0.68); }
  25%, 30% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  36%, 100% { opacity: 0; transform: translate(-50%, -7px) scale(0.94); }
}

@keyframes story-context-dot {
  from { opacity: 0.28; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes story-context-question {
  0%, 30% { opacity: 0; transform: translateY(7px); }
  39%, 89% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes story-context-recall {
  0%, 38% { opacity: 0; transform: translateY(10px) scale(0.96); }
  47% { opacity: 1; transform: translateY(0) scale(1); }
  61% { opacity: 1; transform: translateY(-2px) scale(1); }
  68%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

@keyframes story-context-answer-off {
  0%, 48% { opacity: 0; transform: translateY(10px); }
  58%, 89% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes story-context-answer-on {
  0%, 59% { opacity: 0; transform: translateY(10px); }
  69%, 89% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(-3px); }
}

@media (max-width: 1060px) {
  html body #cases .case-scroll-story,
  html.theme-dark body #cases .case-scroll-story {
    grid-template-columns: minmax(290px, 0.76fr) minmax(460px, 1.24fr);
  }

  html body #cases .case-story-stage,
  html.theme-dark body #cases .case-story-stage {
    padding-left: 24px;
  }

  html body #cases .case-route-lane,
  html.theme-dark body #cases .case-route-lane {
    grid-template-rows: 48px minmax(150px, 1fr) 150px;
  }
}

@media (max-width: 820px) {
  html body #cases .case-scroll-story,
  html.theme-dark body #cases .case-scroll-story {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
  }

  html body #cases .case-story-stage,
  html.theme-dark body #cases .case-story-stage {
    position: sticky;
    z-index: 10;
    top: 58px;
    order: -1;
    width: 100%;
    height: 410px;
    padding: 0;
    background: var(--story-paper);
    border-bottom: 0.5px solid var(--story-rule);
  }

  html body #cases .case-story-sticky,
  html.theme-dark body #cases .case-story-sticky {
    position: relative;
    top: 0;
    height: 410px;
    min-height: 0;
    border: 0;
    border-radius: 18px;
  }

  html body #cases .case-story-copy,
  html.theme-dark body #cases .case-story-copy {
    position: relative;
    z-index: 1;
    border-right: 0;
  }

  html body #cases .case-story-step,
  html.theme-dark body #cases .case-story-step {
    min-height: 520px;
    padding: 76px 22px 54px;
    background: color-mix(in srgb, var(--story-paper) 96%, transparent);
  }

  html body #cases .case-story-step h3,
  html.theme-dark body #cases .case-story-step h3,
  html body #cases .case-story-step > p,
  html.theme-dark body #cases .case-story-step > p,
  html body #cases .case-story-metrics,
  html.theme-dark body #cases .case-story-metrics {
    max-width: none;
  }

  html body #cases .case-story-panel,
  html.theme-dark body #cases .case-story-panel {
    padding: 18px;
  }

  html body #cases .case-route-compare,
  html.theme-dark body #cases .case-route-compare,
  html body #cases .procedure-compare,
  html.theme-dark body #cases .procedure-compare,
  html body #cases .context-compare,
  html.theme-dark body #cases .context-compare {
    height: calc(100% - 18px);
    margin: 0;
  }

  html body #cases .case-context-panel,
  html.theme-dark body #cases .case-context-panel {
    grid-template-rows: minmax(0, 1fr);
  }

  html body #cases .case-context-panel > header,
  html.theme-dark body #cases .case-context-panel > header {
    display: none;
  }

  html body #cases .context-lane,
  html.theme-dark body #cases .context-lane {
    grid-template-rows: 42px minmax(0, 1fr);
  }

  html body #cases .context-scene,
  html.theme-dark body #cases .context-scene {
    padding: 15px;
  }

  html body #cases .context-memory-recall,
  html.theme-dark body #cases .context-memory-recall {
    top: 78px;
    right: 18px;
    left: 18px;
  }

  html body #cases .context-question,
  html.theme-dark body #cases .context-question {
    top: 132px;
    right: 15px;
    left: 15px;
  }

  html body #cases .context-answer,
  html.theme-dark body #cases .context-answer {
    top: 190px;
    right: auto;
    left: 15px;
    width: calc(100% - 30px);
    height: 102px;
    min-height: 0;
    padding: 11px 12px 36px;
  }

  html body #cases .context-lane.is-on .context-answer,
  html.theme-dark body #cases .context-lane.is-on .context-answer {
    height: 118px;
  }

  html body #cases .case-route-lane,
  html.theme-dark body #cases .case-route-lane {
    grid-template-rows: 42px minmax(112px, 1fr) 122px;
  }

  html body #cases .case-mini-code code,
  html.theme-dark body #cases .case-mini-code code {
    min-height: 25px;
    font-size: 8px;
  }

  html body #cases .mini-code-bar,
  html.theme-dark body #cases .mini-code-bar {
    height: 31px;
  }

  html body #cases .procedure-lane,
  html.theme-dark body #cases .procedure-lane {
    grid-template-rows: 42px minmax(0, 1fr);
  }

  html body #cases .procedure-thread,
  html.theme-dark body #cases .procedure-thread {
    padding: 13px;
  }

  html body #cases .procedure-terminal,
  html.theme-dark body #cases .procedure-terminal {
    min-height: 116px;
    margin-top: 16px;
    padding: 38px 11px 11px;
  }
}

@media (max-width: 520px) {
  html body #cases .case-story-stage,
  html.theme-dark body #cases .case-story-stage,
  html body #cases .case-story-sticky,
  html.theme-dark body #cases .case-story-sticky {
    height: 350px;
  }

  html body #cases .case-story-panel,
  html.theme-dark body #cases .case-story-panel {
    padding: 13px;
  }

  html body #cases .case-story-panel > header span,
  html.theme-dark body #cases .case-story-panel > header span {
    display: none;
  }

  html body #cases .case-route-lane-head span,
  html.theme-dark body #cases .case-route-lane-head span,
  html body #cases .procedure-lane-head span,
  html.theme-dark body #cases .procedure-lane-head span,
  html body #cases .route-label,
  html.theme-dark body #cases .route-label {
    display: none;
  }

  html body #cases .case-route-lane,
  html.theme-dark body #cases .case-route-lane {
    grid-template-rows: 38px minmax(96px, 1fr) 112px;
  }

  html body #cases .case-route-lane-head,
  html.theme-dark body #cases .case-route-lane-head {
    padding: 0 10px;
  }

  html body #cases .case-mini-code code,
  html.theme-dark body #cases .case-mini-code code {
    padding: 0 7px;
    gap: 5px;
    font-size: 6.8px;
  }

  html body #cases .procedure-lane,
  html.theme-dark body #cases .procedure-lane {
    grid-template-rows: 38px minmax(0, 1fr);
  }

  html body #cases .procedure-lane-head,
  html.theme-dark body #cases .procedure-lane-head {
    padding: 0 9px;
  }

  html body #cases .procedure-thread,
  html.theme-dark body #cases .procedure-thread {
    padding: 9px;
  }

  html body #cases .procedure-prompt {
    gap: 5px;
  }

  html body #cases .procedure-prompt > i,
  html.theme-dark body #cases .procedure-prompt > i {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 7px;
  }

  html body #cases .procedure-prompt > span,
  html.theme-dark body #cases .procedure-prompt > span {
    padding: 7px 8px;
    font-size: 7.5px;
  }

  html body #cases .procedure-terminal,
  html.theme-dark body #cases .procedure-terminal {
    min-height: 103px;
    margin-top: 12px;
    padding: 33px 8px 8px;
    border-radius: 10px;
  }

  html body #cases .procedure-terminal-bar,
  html.theme-dark body #cases .procedure-terminal-bar {
    height: 25px;
    padding-inline: 8px;
  }

  html body #cases .procedure-type,
  html.theme-dark body #cases .procedure-type {
    margin-top: 11px;
    font-size: 6.8px;
  }

  html body #cases .procedure-terminal > em,
  html.theme-dark body #cases .procedure-terminal > em {
    margin-top: 9px;
    padding: 4px 6px;
    font-size: 6.4px;
  }

  html body #cases .procedure-recall,
  html.theme-dark body #cases .procedure-recall {
    top: 40px;
    right: 7px;
    max-width: calc(100% - 24px);
    padding: 7px;
    gap: 6px;
  }

  html body #cases .procedure-recall > i,
  html.theme-dark body #cases .procedure-recall > i {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 8px;
  }

  html body #cases .procedure-recall small,
  html.theme-dark body #cases .procedure-recall small,
  html body #cases .procedure-recall b,
  html.theme-dark body #cases .procedure-recall b {
    font-size: 6.2px;
  }

  html body #cases .procedure-correction,
  html.theme-dark body #cases .procedure-correction {
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 6.5px;
  }

  html body #cases .procedure-result,
  html.theme-dark body #cases .procedure-result {
    right: 9px;
    bottom: 7px;
    left: 9px;
    font-size: 6px;
  }

  html body #cases .procedure-result strong,
  html.theme-dark body #cases .procedure-result strong {
    padding: 4px 6px;
  }

  html body #cases .procedure-pass,
  html.theme-dark body #cases .procedure-pass {
    right: 8px;
    bottom: 8px;
    width: 21px;
    height: 21px;
    font-size: 10px;
  }

  html body #cases .context-lane,
  html.theme-dark body #cases .context-lane {
    grid-template-rows: 38px minmax(0, 1fr);
  }

  html body #cases .context-lane-head,
  html.theme-dark body #cases .context-lane-head {
    padding: 0 9px;
  }

  html body #cases .context-lane-head span,
  html.theme-dark body #cases .context-lane-head span {
    display: none;
  }

  html body #cases .context-scene,
  html.theme-dark body #cases .context-scene {
    padding: 9px;
  }

  html body #cases .context-current,
  html.theme-dark body #cases .context-current {
    padding: 9px;
  }

  html body #cases .context-current small,
  html.theme-dark body #cases .context-current small,
  html body #cases .context-question small,
  html.theme-dark body #cases .context-question small,
  html body #cases .context-answer small,
  html.theme-dark body #cases .context-answer small {
    font-size: 6px;
  }

  html body #cases .context-chips,
  html.theme-dark body #cases .context-chips {
    margin-top: 7px;
    gap: 4px;
  }

  html body #cases .context-chips i,
  html.theme-dark body #cases .context-chips i,
  html body #cases .context-chips strong,
  html.theme-dark body #cases .context-chips strong {
    height: 18px;
  }

  html body #cases .context-chips strong,
  html.theme-dark body #cases .context-chips strong {
    font-size: 5.6px;
  }

  html body #cases .context-compact,
  html.theme-dark body #cases .context-compact {
    top: 65px;
    width: 84px;
    height: 27px;
  }

  html body #cases .context-memory-recall,
  html.theme-dark body #cases .context-memory-recall {
    top: 58px;
    right: 10px;
    left: 10px;
    min-height: 38px;
    padding: 7px;
  }

  html body #cases .context-question,
  html.theme-dark body #cases .context-question {
    top: 103px;
    right: 9px;
    left: 9px;
    padding-bottom: 9px;
  }

  html body #cases .context-question p,
  html.theme-dark body #cases .context-question p {
    margin-top: 6px;
    font-size: 8px;
  }

  html body #cases .context-answer,
  html.theme-dark body #cases .context-answer {
    top: 150px;
    right: auto;
    left: 9px;
    width: calc(100% - 18px);
    height: 88px;
    min-height: 0;
    padding: 8px 8px 30px;
  }

  html body #cases .context-lane.is-on .context-answer,
  html.theme-dark body #cases .context-lane.is-on .context-answer {
    height: 104px;
  }

  html body #cases .context-answer span,
  html.theme-dark body #cases .context-answer span {
    bottom: 8px;
    left: 8px;
  }

  html body #cases .context-lane.is-on .context-answer span,
  html.theme-dark body #cases .context-lane.is-on .context-answer span {
    bottom: 24px;
  }

  html body #cases .context-answer p,
  html.theme-dark body #cases .context-answer p {
    margin: 7px 0 9px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #cases .case-story-panel,
  html.theme-dark body #cases .case-story-panel,
  html body #cases .case-story-panel *,
  html.theme-dark body #cases .case-story-panel * {
    animation: none !important;
    transition: none !important;
  }
}

/* Showcase scenario navigation — compact, editorial tabs inspired by ElevenLabs. */
html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs),
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs),
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs) {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::before,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::before,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: -1px;
  left: -1px;
  height: 76px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.01)),
    #f5f3f1;
  border-radius: 24px 24px 0 0;
  content: "";
  pointer-events: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::after,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::after,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs)::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -1px;
  left: -1px;
  height: 77px;
  border-radius: 24px 24px 0 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.075);
  content: "";
  pointer-events: none;
}

html body .hero .handoff-stage-label.showcase-tabs,
html.theme-dark body .hero .handoff-stage-label.showcase-tabs {
  top: 6px;
  right: 5px;
  left: 5px;
  height: 44px;
  gap: 0;
  padding: 0;
}

html body .hero .showcase-tabs > .showcase-tab {
  appearance: none;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 20px;
  color: #44403b;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font: 400 18px/1.6 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: default;
}

html body .hero .showcase-tabs > .showcase-tab i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-right: 2px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0 8%, transparent 24%),
    radial-gradient(circle at 72% 70%, #f16e42 0 16%, transparent 46%),
    conic-gradient(from 210deg, #7a5bd6, #f4a83e, #f36d52, #7a5bd6);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(31, 31, 29, 0.12), 0 0 0 0.5px rgba(255, 255, 255, 0.7);
}

html body .hero .showcase-tabs > .showcase-tab:nth-child(2) i {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.78) 0 8%, transparent 24%),
    radial-gradient(circle at 72% 70%, #319ed0 0 16%, transparent 46%),
    conic-gradient(from 205deg, #2f70c9, #45a26c, #6bb56f, #2f70c9);
}

html body .hero .showcase-tabs > .showcase-tab:nth-child(3) i {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.82) 0 9%, transparent 25%),
    radial-gradient(circle at 68% 72%, #7a7d7c 0 17%, transparent 47%),
    conic-gradient(from 210deg, #6e716f, #d7d9d7, #9a9d9b, #6e716f);
}

html body .hero .showcase-tabs > .showcase-tab[aria-selected="true"] {
  color: #000;
  background: #fff;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

html body .hero .real-agent-stage:has(.showcase-tabs) .real-agent-grid,
html.theme-dark body .hero .real-agent-stage:has(.showcase-tabs) .real-agent-grid {
  z-index: 1;
  top: 56px;
  right: -1px;
  left: -1px;
  background: #f5f3f1;
  border: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.075);
}

@media (max-width: 900px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs),
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs),
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-tabs) {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  html body .hero .handoff-stage-label.showcase-tabs,
  html.theme-dark body .hero .handoff-stage-label.showcase-tabs {
    top: 6px;
    right: 4px;
    left: 4px;
    height: 44px;
    gap: 0;
    padding: 0;
  }

  html body .hero .showcase-tabs > .showcase-tab {
    gap: 6px;
    padding-inline: 8px;
    border-radius: 14px;
    font-size: 12.5px;
    letter-spacing: -0.02em;
  }

  html body .hero .real-agent-stage:has(.showcase-tabs) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.showcase-tabs) .real-agent-grid {
    top: 56px;
    background: #f5f3f1;
    border: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.075);
  }
}

@media (max-width: 520px) {
  html body .hero .showcase-tabs > .showcase-tab i {
    display: none;
  }
}

html.theme-dark {
  --ui-page: #11110f;
  --ui-card: #191815;
  --ui-card-strong: #211f1b;
  --ui-ink: #f4f2ed;
  --ui-copy: #cbc7bf;
  --ui-muted: #88847d;
  --ui-rule: #2d2b27;
  --ui-rule-strong: #403d37;
  --ui-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

html body,
html.theme-dark body {
  color: var(--ui-copy);
  background: var(--ui-page);
}

html body .site-header,
html.theme-dark body .site-header {
  background: color-mix(in srgb, var(--ui-page) 94%, transparent);
  border-color: var(--ui-rule);
}

html body .hero,
html.theme-dark body .hero {
  color: var(--ui-copy);
  background: var(--ui-page);
  border-bottom: 0;
}

html body .section,
html body .section-cases,
html body .section-quickstart,
html body .section-memories,
html body .section-demo,
html body .section-faq,
html.theme-dark body .section,
html.theme-dark body .section-cases,
html.theme-dark body .section-quickstart,
html.theme-dark body .section-memories,
html.theme-dark body .section-demo,
html.theme-dark body .section-faq {
  min-height: 0;
  padding: var(--ui-section-space) 0;
  color: var(--ui-copy);
  background: var(--ui-page);
  border-top: 0;
  border-bottom: 1px solid var(--ui-rule);
}

html body .section-heading,
html body .section-memories > .content-shell > .section-heading,
html.theme-dark body .section-heading,
html.theme-dark body .section-memories > .content-shell > .section-heading {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(42px, 4.5vw, 68px);
  display: block;
}

html body #cases > .content-shell,
html body #quickstart > .content-shell,
html body #architecture > .content-shell,
html body #architecture-comparison > .content-shell,
html body #faq > .content-shell,
html.theme-dark body #cases > .content-shell,
html.theme-dark body #quickstart > .content-shell,
html.theme-dark body #architecture > .content-shell,
html.theme-dark body #architecture-comparison > .content-shell,
html.theme-dark body #faq > .content-shell {
  width: min(1080px, calc(100vw - 48px));
  max-width: 1080px;
}

html body .section-heading .section-index,
html body .section-memories > .content-shell > .section-heading .section-index,
html.theme-dark body .section-heading .section-index,
html.theme-dark body .section-memories > .content-shell > .section-heading .section-index {
  display: none;
}

html body .section-heading h2,
html body .section-memories > .content-shell > .section-heading h2,
html.theme-dark body .section-heading h2,
html.theme-dark body .section-memories > .content-shell > .section-heading h2 {
  width: min(1180px, 100%);
  max-width: none;
  margin: 0;
  color: var(--ui-ink);
  font-size: clamp(38px, 3.2vw, 54px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

/* Cases */
html body .section-cases .content-shell {
  display: block;
}

html body .section-cases .section-heading h2 {
  max-width: 950px;
}

html body .case-explorer {
  width: 100%;
}

html body .case-gallery {
  padding: 0;
}

html body .case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  border: 0;
}

html body .case-slide,
html.theme-dark body .case-slide {
  position: relative;
  min-height: 270px;
  padding: clamp(26px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ui-copy);
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
  overflow: hidden;
  transform: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html body .case-slide::before {
  content: "";
  position: absolute;
  inset: 70px auto auto 50%;
  width: clamp(96px, 9vw, 138px);
  height: clamp(96px, 9vw, 138px);
  border: 1px solid color-mix(in srgb, var(--ui-ink) 45%, transparent);
  border-radius: 50%;
  background: transparent;
  opacity: 0.55;
  transform: translateX(-50%);
}

html body .case-slide::after {
  content: "";
  position: absolute;
  top: clamp(98px, 10vw, 146px);
  left: 22%;
  width: 56%;
  height: 1px;
  background: var(--ui-ink);
  opacity: 0.22;
  transform: rotate(-12deg);
}

html body .case-slide.tone-indigo::before {
  border-radius: 20% 70% 30% 60%;
  transform: translateX(-50%) rotate(24deg);
}

html body .case-slide.tone-blue::before {
  border-style: dashed;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--ui-ink) 4%, transparent), 0 0 0 38px color-mix(in srgb, var(--ui-ink) 2%, transparent);
}

html body .case-slide:hover,
html body .case-slide:focus-visible,
html body .case-slide.is-active,
html.theme-dark body .case-slide:hover,
html.theme-dark body .case-slide.is-active {
  color: var(--ui-copy);
  background: var(--ui-card);
  border-color: var(--ui-rule-strong);
  box-shadow: var(--ui-shadow);
  transform: translateY(-4px);
}

html body .case-slide-type {
  position: relative;
  z-index: 1;
  color: var(--ui-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
}

html body .case-slide > strong {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin-top: auto;
  color: var(--ui-ink);
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

html body .case-slide > small,
html.theme-dark body .case-slide > small {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  color: var(--ui-muted);
  line-height: 1.5;
}

html body .case-slide > small b,
html body .case-slide-open {
  color: var(--ui-copy);
}

html body .case-slide-open {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 30px;
  padding-top: 20px;
  justify-content: space-between;
  border-top: 1px solid var(--ui-rule);
}

html body .case-lab,
html.theme-dark body .case-lab {
  margin-top: 24px;
  padding: clamp(10px, 1vw, 16px);
  color: var(--ui-copy);
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

html body .case-lab-header,
html body .case-lab-controls,
html body .case-lab-hero {
  border-color: var(--ui-rule);
}

html body .case-lab-header h3,
html body .case-lab-hero h4,
html body .case-outcome-header h4,
html body .case-lane-heading {
  color: var(--ui-ink);
}

html body .case-lab-hero blockquote,
html body .case-outcome-card,
html body .case-lane,
html body .case-memory-recall,
html body .case-lane-answer,
html.theme-dark body .case-lab-hero blockquote,
html.theme-dark body .case-outcome-card,
html.theme-dark body .case-lane,
html.theme-dark body .case-memory-recall,
html.theme-dark body .case-lane-answer {
  color: var(--ui-copy);
  background: var(--ui-page);
  border-color: var(--ui-rule);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
}

/* Quick start */
html body .section.section-quickstart,
html.theme-dark body .section.section-quickstart {
  color: var(--ui-copy);
  background: var(--ui-page);
  border-color: var(--ui-rule);
}

html body .section-quickstart .quickstart-heading,
html.theme-dark body .section-quickstart .quickstart-heading {
  margin-bottom: clamp(42px, 4.5vw, 66px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: start;
  text-align: left;
}

html body .section-quickstart .quickstart-heading h2,
html.theme-dark body .section-quickstart .quickstart-heading h2 {
  color: var(--ui-ink);
  font-size: clamp(50px, 4.5vw, 70px);
  font-weight: 470;
  line-height: 0.92;
  letter-spacing: -0.075em;
}

html body #quickstart .quickstart-heading > p:last-child,
html.theme-dark body #quickstart .quickstart-heading > p:last-child {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--ui-copy);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
}

html body .quickstart-tabs,
html.theme-dark body .quickstart-tabs {
  gap: 8px;
  padding: 8px;
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  overflow: hidden;
}

html body .quickstart-tab,
html.theme-dark body .quickstart-tab {
  min-height: 68px;
  color: var(--ui-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 24px;
  box-shadow: none;
}

html body .quickstart-tab.is-active,
html.theme-dark body .quickstart-tab.is-active {
  color: var(--ui-ink);
  background: var(--ui-page);
  border-color: var(--ui-rule);
  box-shadow: 0 5px 18px rgba(31, 26, 21, 0.04);
}

html body .quickstart-tab strong,
html body .quickstart-tab small {
  color: inherit;
}

html body .quickstart-panel,
html.theme-dark body .quickstart-panel {
  padding: clamp(24px, 2.7vw, 42px);
  color: var(--ui-copy);
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-top: 0;
  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
  box-shadow: none;
}

html body .quickstart-panel-intro {
  margin-bottom: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
  gap: 28px;
}

html body .quickstart-panel-intro > span {
  color: var(--ui-muted);
}

html body .quickstart-panel-intro h3,
html body .quickstart-step h3,
html body .start-step h3 {
  color: var(--ui-ink);
}

html body .quickstart-install-journey {
  gap: clamp(16px, 2vw, 28px);
}

html body .quickstart-install-panel .start-step,
html body .quickstart-step,
html body .quickstart-prepare,
html body .quickstart-chat,
html.theme-dark body .quickstart-install-panel .start-step,
html.theme-dark body .quickstart-step,
html.theme-dark body .quickstart-prepare,
html.theme-dark body .quickstart-chat {
  color: var(--ui-copy);
  background: var(--ui-page);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
}

html body .quickstart-install-panel .start-step {
  min-height: 280px;
  padding: 28px 30px;
}

html body .quickstart-install-panel .start-step-head > span,
html body .quickstart-step-heading > span {
  color: var(--ui-page);
  background: var(--ui-ink);
}

html body .start-inline-action {
  color: var(--ui-page);
  background: var(--ui-ink);
  border-color: var(--ui-ink);
  border-radius: 999px;
}

html body .quickstart-install-panel .start-command,
html body .quickstart-command-row,
html body .start-command,
html.theme-dark body .quickstart-install-panel .start-command,
html.theme-dark body .quickstart-command-row,
html.theme-dark body .start-command {
  color: var(--ui-ink);
  background: var(--ui-card-strong);
  border: 1px solid var(--ui-rule);
  border-radius: 16px;
}

html body .quickstart-install-panel .start-command code,
html body .quickstart-command-row code,
html body .start-command code {
  color: var(--ui-ink);
}

html body .quickstart-copy-button,
html body .quickstart-install-panel .start-command .quickstart-copy-button,
html.theme-dark body .quickstart-copy-button {
  color: var(--ui-ink);
  background: var(--ui-page);
  border-color: var(--ui-rule-strong);
}

html body .quickstart-chat-log,
html body .quickstart-chat-message,
html body .quickstart-auto-note,
html.theme-dark body .quickstart-chat-log,
html.theme-dark body .quickstart-chat-message,
html.theme-dark body .quickstart-auto-note {
  color: var(--ui-copy);
  background: var(--ui-card);
  border-color: var(--ui-rule);
  border-radius: 18px;
  box-shadow: none;
}

/* Memory types — this is the visual anchor for the whole page. */
html body .section-memories,
html.theme-dark body .section-memories {
  padding: var(--ui-section-space) 0;
}

html body .section-memories .memory-grid-lineart,
html.theme-dark body .section-memories .memory-grid-lineart {
  width: min(100%, 980px);
  max-width: 980px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 0;
}

html body .section-memories .memory-grid-lineart > .memory-line-card,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
  height: auto;
  height: 250px;
  min-height: 250px;
  padding: 0 24px 22px;
  color: var(--ui-copy);
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html body .section-memories .memory-grid-lineart > .memory-line-card:hover {
  border-color: var(--ui-rule-strong);
  box-shadow: var(--ui-shadow);
  transform: translateY(-3px);
}

html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
  flex: 1;
  min-height: 118px;
  margin: 0 -24px 10px;
  padding: 14px 42px 0;
  color: var(--ui-ink);
}

html body .section-memories .memory-line-visual svg {
  width: min(100%, 230px);
  height: min(100%, 135px);
}

html body .section-memories .memory-grid-lineart > .memory-line-card h3,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card h3 {
  margin: 0 0 8px;
  color: var(--ui-ink);
  font-size: 20px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

html body .section-memories .memory-grid-lineart > .memory-line-card > p,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card > p {
  max-width: 690px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.42;
}

/* Comparison */
html body .comparison-table-wrap,
html.theme-dark body .comparison-table-wrap {
  padding: 10px;
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
  overflow: hidden;
}

html body .comparison-table {
  border-collapse: separate;
  border-spacing: 0;
}

html body .comparison-table th,
html body .comparison-table td,
html.theme-dark body .comparison-table th,
html.theme-dark body .comparison-table td {
  padding: 20px 22px;
  font-size: 14px;
  color: var(--ui-copy);
  background: var(--ui-page);
  border-color: var(--ui-rule);
}

html body .comparison-table thead th,
html.theme-dark body .comparison-table thead th {
  color: var(--ui-muted);
  background: transparent;
}

html body .comparison-table tbody th,
html body .comparison-table td strong {
  color: var(--ui-ink);
  font-size: 16px;
}

html body .comparison-table tbody th span {
  color: var(--ui-muted);
}

html body .comparison-table td:nth-child(3),
html.theme-dark body .comparison-table td:nth-child(3) {
  background: var(--ui-card-strong);
}

html body .comparison-table tbody tr:last-child > *:first-child {
  border-bottom-left-radius: 22px;
}

html body .comparison-table tbody tr:last-child > *:last-child {
  border-bottom-right-radius: 22px;
}

/* FAQ */
html body .section.section-faq,
html.theme-dark body .section.section-faq {
  color: var(--ui-copy);
  background: var(--ui-page);
}

html body .faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: start;
}

html body .section-faq .section-heading h2,
html.theme-dark body .section-faq .section-heading h2 {
  color: var(--ui-ink);
  font-size: clamp(50px, 4.5vw, 70px);
  font-weight: 480;
}

html body .faq-list,
html.theme-dark body .faq-list {
  display: grid;
  gap: 12px;
  border: 0;
}

html body .faq-list details,
html.theme-dark body .faq-list details {
  color: var(--ui-copy);
  background: var(--ui-card);
  border: 1px solid var(--ui-rule);
  border-radius: 22px;
  overflow: hidden;
}

html body .faq-list summary,
html.theme-dark body .faq-list summary {
  padding: clamp(21px, 2vw, 30px);
  color: var(--ui-ink);
  font-size: clamp(18px, 1.4vw, 23px);
  font-weight: 540;
}

html body .faq-list details p,
html body .faq-list details p a,
html.theme-dark body .faq-list details p,
html.theme-dark body .faq-list details p a {
  color: var(--ui-muted);
}

html body .faq-list details p {
  padding: 0 clamp(24px, 2.4vw, 36px) clamp(26px, 2.5vw, 38px);
}

/* Footer */
html body .site-footer,
html.theme-dark body .site-footer {
  padding-top: clamp(68px, 7vw, 104px);
  color: var(--ui-copy);
  background: var(--ui-card);
  border-top: 0;
}

html body .footer-main,
html body .footer-bottom {
  border-color: var(--ui-rule);
}

html body .footer-slogan,
html.theme-dark body .footer-slogan {
  max-width: 840px;
  color: var(--ui-ink);
  font-size: clamp(42px, 4.2vw, 66px);
  font-weight: 480;
  line-height: 0.94;
  letter-spacing: -0.07em;
}

html body .footer-byline,
html body .footer-link-groups a,
html body .footer-bottom {
  color: var(--ui-muted);
}

html body .footer-follow {
  min-width: 184px;
}

html body .footer-follow-label {
  margin: 0 0 15px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

html body .footer-social {
  gap: 0;
}

html body .footer-social .footer-social-link {
  width: 100%;
  min-height: 48px;
  padding: 0 0 7px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--ui-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
}

html body .footer-social .footer-social-link:first-child {
  border-top: 0;
}

html body .footer-social-copy {
  display: grid;
  gap: 2px;
  line-height: 1.15;
}

html body .footer-social-copy strong {
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 600;
}

html body .footer-social-copy small {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 400;
}

html body .footer-social .footer-social-link:hover {
  color: var(--ui-ink);
  background: transparent;
}

/* English.css contains compact fallbacks for the previous layout. Re-open the
 * generous proportions here so both languages share the same design system. */
html[data-language="en"] body .section-heading,
html[data-language="en"] body .section-memories > .content-shell > .section-heading {
  margin-bottom: clamp(42px, 4.5vw, 68px);
  display: block;
}

html[data-language="en"] body .section-heading h2,
html[data-language="en"] body .architecture-page-heading h2,
html[data-language="en"] body .faq-heading h2,
html[data-language="en"] body .section-memories > .content-shell > .section-heading h2 {
  width: min(1180px, 100%);
  max-width: none;
  font-size: clamp(38px, 3.2vw, 54px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

html[data-language="en"] body .case-grid {
  gap: clamp(16px, 1.5vw, 24px);
}

html[data-language="en"] body .case-slide {
  min-height: 270px;
  padding: clamp(26px, 2.2vw, 34px);
}

html[data-language="en"] body .case-slide > strong {
  margin-top: auto;
  font-size: clamp(22px, 1.75vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

html[data-language="en"] body .case-slide > small {
  margin-top: 18px;
  padding-top: 0;
  font-size: 14px;
  line-height: 1.5;
}

html[data-language="en"] body .case-slide-open {
  margin-top: 30px;
  padding-top: 20px;
}

html[data-language="en"] body .section-quickstart .quickstart-heading h2 {
  width: auto;
  margin: 0;
  font-size: clamp(50px, 4.5vw, 70px);
  font-weight: 470;
  line-height: 0.92;
  letter-spacing: -0.075em;
}

html[data-language="en"] body .section-quickstart .quickstart-heading {
  margin-bottom: clamp(42px, 4.5vw, 66px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: start;
  text-align: left;
}

html[data-language="en"] body #quickstart .quickstart-heading > p:last-child {
  max-width: 620px;
  margin: 10px 0 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
}

html[data-language="en"] body .quickstart-tabs {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  gap: 8px;
}

html[data-language="en"] body .quickstart-panel-intro {
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: clamp(28px, 3vw, 44px);
}

html[data-language="en"] body .quickstart-install-panel .start-step,
html[data-language="en"] body .quickstart-install-panel .start-step:nth-child(2),
html[data-language="en"] body .quickstart-install-panel .start-step:last-child {
  min-height: 280px;
  padding: 28px 30px;
}

html body .quickstart-install-panel .start-step h3,
html[data-language="en"] body .quickstart-install-panel .start-step h3 {
  min-height: 0;
  margin: 22px 0 12px;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.18;
}

html body .quickstart-install-panel .start-step > p,
html[data-language="en"] body .quickstart-install-panel .start-step > p {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.55;
}

html body .quickstart-install-panel .start-step > p:not(.start-step-note),
html[data-language="en"] body .quickstart-install-panel .start-step > p:not(.start-step-note) {
  min-height: 0;
}

html body .quickstart-install-panel .start-inline-action,
html body .quickstart-install-panel .start-command {
  min-height: 48px;
}

html body .quickstart-install-panel .start-step .start-step-note {
  margin-top: 14px;
  margin-bottom: 0;
}

html body .quickstart-install-panel .start-checklist {
  margin-top: 14px;
}

html[data-language="en"] body .section-faq .section-heading h2,
html[data-language="en"] body .section-faq .faq-heading h2 {
  font-size: clamp(50px, 4.5vw, 70px);
  font-weight: 480;
}

@media (max-width: 1080px) {
  html body .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body .case-slide:last-child {
    width: 100%;
    grid-column: 1 / -1;
  }

  html body .section-quickstart .quickstart-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  html body #quickstart .quickstart-heading > p:last-child {
    max-width: 760px;
  }
}

@media (max-width: 820px) {
  :root {
    --shell: calc(100vw - 36px);
    --ui-section-space: 84px;
    --ui-radius-lg: 26px;
  }

  html body .section-heading h2,
  html body .section-memories > .content-shell > .section-heading h2,
  html.theme-dark body .section-heading h2,
  html.theme-dark body .section-memories > .content-shell > .section-heading h2 {
    font-size: clamp(42px, 11vw, 64px);
  }

  html body .case-grid,
  html body .section-memories .memory-grid-lineart,
  html.theme-dark body .section-memories .memory-grid-lineart,
  html body .faq-layout {
    grid-template-columns: 1fr;
  }

  html body .case-slide,
  html body .case-slide:last-child {
    width: 100%;
    min-height: 340px;
    grid-column: auto;
  }

  html body .quickstart-tabs {
    grid-template-columns: 1fr;
    border-radius: 24px 24px 0 0;
  }

  html body .quickstart-tab {
    min-height: 76px;
  }

  html body .quickstart-panel-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
    min-height: 410px;
  }

  html body .faq-layout {
    gap: 42px;
  }

  html body .comparison-table-wrap {
    overflow-x: auto;
  }

  html body .comparison-table {
    min-width: 760px;
  }
}

@media (max-width: 560px) {
  :root {
    --ui-section-space: 68px;
  }

  html body .section-heading,
  html body .section-memories > .content-shell > .section-heading {
    margin-bottom: 42px;
  }

  html body .section-quickstart .quickstart-heading h2,
  html.theme-dark body .section-quickstart .quickstart-heading h2 {
    font-size: clamp(54px, 18vw, 78px);
  }

  html body .case-slide {
    padding: 26px;
  }

  html body .quickstart-panel {
    padding: 16px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
    min-height: 360px;
    padding-right: 24px;
    padding-bottom: 28px;
    padding-left: 24px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
    min-height: 200px;
    margin-right: -24px;
    margin-left: -24px;
    padding-right: 38px;
    padding-left: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .case-slide,
  html body .memory-line-card {
    transition: none;
  }
}

/* Targeted typography calibration. Keep the hero proportions untouched and
 * use the same restrained weight hierarchy across editorial sections. */
html body,
html.theme-dark body {
  font-synthesis: none;
}

html body .hero h1.hero-slogan,
html.theme-dark body .hero h1.hero-slogan,
html[data-language="en"] body .hero h1.hero-slogan {
  font-weight: 300;
}

html body .section-memories > .content-shell > .section-heading h2,
html.theme-dark body .section-memories > .content-shell > .section-heading h2,
html[data-language="en"] body .section-memories > .content-shell > .section-heading h2 {
  font-weight: 400;
}

html body .section-cases .section-heading h2,
html.theme-dark body .section-cases .section-heading h2,
html[data-language="en"] body .section-cases .section-heading h2,
html body #architecture-comparison .section-heading h2,
html.theme-dark body #architecture-comparison .section-heading h2,
html[data-language="en"] body #architecture-comparison .section-heading h2 {
  font-weight: 400;
}

html body .case-slide > strong,
html.theme-dark body .case-slide > strong,
html[data-language="en"] body .case-slide > strong {
  font-weight: 400;
}

html body .case-slide > small b,
html.theme-dark body .case-slide > small b,
html[data-language="en"] body .case-slide > small b,
html body .case-slide-open,
html.theme-dark body .case-slide-open,
html[data-language="en"] body .case-slide-open {
  font-weight: 500;
}

/* Figma unified system v11 -------------------------------------------------
 * A compact editorial scale inspired by Cursor and ElevenLabs. This block is
 * intentionally last: it normalizes the many historical page-specific layers
 * without replacing any interaction markup or JavaScript behavior.
 */
:root {
  --shell: min(1180px, calc(100vw - 64px));
  --ui-page: #fcfcfb;
  --ui-card: #f6f4f2;
  --ui-card-strong: #efede9;
  --ui-ink: #0e0e0d;
  --ui-copy: #373633;
  --ui-muted: #817e78;
  --ui-rule: #e5e2de;
  --ui-rule-strong: #cfcbc5;
  --ui-accent: #087d70;
  --ui-accent-soft: #e8f4f1;
  --ui-radius-lg: 20px;
  --ui-radius-md: 14px;
  --ui-shadow: 0 22px 60px rgba(33, 29, 25, 0.055);
  --ui-section-space: clamp(88px, 8vw, 124px);
}

html.theme-dark {
  --ui-page: #11110f;
  --ui-card: #1a1916;
  --ui-card-strong: #22201c;
  --ui-ink: #f5f3ef;
  --ui-copy: #cbc8c1;
  --ui-muted: #918d85;
  --ui-rule: #302e29;
  --ui-rule-strong: #48443d;
  --ui-accent: #68c9bb;
  --ui-accent-soft: #173b35;
}

html body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html body .header-inner {
  width: var(--shell);
  height: 64px;
  gap: 26px;
}

html body .header-logo {
  width: 150px;
}

html body .desktop-nav {
  gap: 26px;
  color: var(--ui-copy);
  font-size: 13px;
  font-weight: 400;
}

html body .header-cta {
  min-height: 38px;
  padding: 9px 17px;
  color: var(--ui-page);
  background: var(--ui-ink);
  border-color: var(--ui-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

html body .theme-toggle,
html body .language-toggle {
  min-height: 36px;
  color: var(--ui-copy);
  border-color: var(--ui-rule);
  border-radius: 999px;
}

html body .site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(30, 27, 23, 0.035);
}

html body .hero,
html.theme-dark body .hero {
  padding: clamp(72px, 7vw, 104px) 0 clamp(78px, 7vw, 110px);
  background: var(--ui-page);
}

html body .hero::before {
  display: none;
}

html body .hero .hero-layout,
html.theme-dark body .hero .hero-layout {
  gap: clamp(54px, 5vw, 76px);
}

html body .hero .hero-copy-compact,
html.theme-dark body .hero .hero-copy-compact {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.78fr);
  column-gap: clamp(64px, 7vw, 108px);
  align-items: start;
}

html body .hero .hero-copy-compact h1.hero-slogan,
html.theme-dark body .hero .hero-copy-compact h1.hero-slogan,
html[data-language="en"] body .hero h1.hero-slogan {
  max-width: 660px;
  margin: 0;
  color: var(--ui-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", Arial, sans-serif;
  font-size: clamp(48px, 4.05vw, 58px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

html body .hero .hero-copy-compact .hero-lede,
html.theme-dark body .hero .hero-copy-compact .hero-lede {
  max-width: 470px;
  margin: 8px 0 0;
  color: var(--ui-copy);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.018em;
}

html body .hero .hero-copy-compact .hero-actions,
html.theme-dark body .hero .hero-copy-compact .hero-actions {
  margin-top: 28px;
  gap: 10px;
}

html body .hero .hero-copy-compact .hero-actions .button,
html.theme-dark body .hero .hero-copy-compact .hero-actions .button {
  min-width: 0;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

html body .button-primary {
  color: var(--ui-page);
  background: var(--ui-ink);
  border-color: var(--ui-ink);
}

html body .button-secondary {
  color: var(--ui-ink);
  background: transparent;
  border-color: var(--ui-rule-strong);
}

html body .cursor-scene {
  min-height: clamp(520px, 47vw, 650px);
}

html body .cursor-workbench.product-workbench {
  height: clamp(470px, 42vw, 570px);
  border-color: var(--ui-rule-strong);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(36, 31, 26, 0.075);
}

html body .cursor-cli {
  width: min(520px, 42vw);
  border-color: var(--ui-rule-strong);
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(36, 31, 26, 0.09);
}

html body .section,
html body .section-cases,
html body .section-quickstart,
html body .section-memories,
html body .section-demo,
html body .section-faq {
  padding: var(--ui-section-space) 0;
}

html body #cases > .content-shell,
html body #quickstart > .content-shell,
html body #architecture > .content-shell,
html body #architecture-comparison > .content-shell,
html body #faq > .content-shell {
  width: var(--shell);
  max-width: 1180px;
}

html body .section-heading,
html body .section-memories > .content-shell > .section-heading,
html[data-language="en"] body .section-heading,
html[data-language="en"] body .section-memories > .content-shell > .section-heading {
  margin-bottom: clamp(34px, 4vw, 52px);
}

html body .section-heading h2,
html body .section-memories > .content-shell > .section-heading h2,
html[data-language="en"] body .section-heading h2,
html[data-language="en"] body .architecture-page-heading h2,
html[data-language="en"] body .faq-heading h2,
html[data-language="en"] body .section-memories > .content-shell > .section-heading h2 {
  max-width: 900px;
  color: var(--ui-ink);
  font-size: clamp(34px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.05em;
}

html body .case-grid,
html[data-language="en"] body .case-grid {
  gap: 16px;
}

html body .case-slide,
html[data-language="en"] body .case-slide {
  min-height: 238px;
  padding: 24px;
  border-radius: var(--ui-radius-lg);
}

html body .case-slide::before {
  inset: 64px auto auto 50%;
  width: 100px;
  height: 100px;
  opacity: 0.34;
}

html body .case-slide > strong,
html[data-language="en"] body .case-slide > strong {
  max-width: 320px;
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

html body .case-slide > small,
html[data-language="en"] body .case-slide > small {
  margin-top: 14px;
  font-size: 13px;
}

html body .case-slide-open,
html[data-language="en"] body .case-slide-open {
  margin-top: 22px;
  padding-top: 16px;
  font-size: 12px;
}

html body .case-slide:hover,
html body .case-slide:focus-visible,
html body .case-slide.is-active {
  border-color: var(--ui-rule-strong);
  box-shadow: 0 14px 34px rgba(33, 29, 25, 0.055);
  transform: translateY(-2px);
}

html body .case-lab {
  margin-top: 18px;
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
}

html body .section-quickstart .quickstart-heading,
html[data-language="en"] body .section-quickstart .quickstart-heading {
  margin-bottom: clamp(34px, 4vw, 52px);
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.8fr);
  gap: clamp(50px, 7vw, 92px);
}

html body .section-quickstart .quickstart-heading h2,
html[data-language="en"] body .section-quickstart .quickstart-heading h2 {
  font-size: clamp(38px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

html body #quickstart .quickstart-heading > p:last-child,
html[data-language="en"] body #quickstart .quickstart-heading > p:last-child {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.62;
}

html body .quickstart-tabs {
  padding: 6px;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

html body .quickstart-tab {
  min-height: 58px;
  border-radius: 14px;
}

html body .quickstart-panel {
  padding: clamp(24px, 3vw, 38px);
  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}

html body .quickstart-install-panel .start-step,
html[data-language="en"] body .quickstart-install-panel .start-step,
html[data-language="en"] body .quickstart-install-panel .start-step:nth-child(2),
html[data-language="en"] body .quickstart-install-panel .start-step:last-child {
  min-height: 250px;
  padding: 26px;
  border-radius: var(--ui-radius-lg);
}

html body .quickstart-install-panel .start-step h3,
html[data-language="en"] body .quickstart-install-panel .start-step h3 {
  margin: 18px 0 10px;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
}

html body .start-inline-action {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  border-radius: 12px;
}

html body .section-memories .memory-grid-lineart {
  width: 100%;
  max-width: none;
  gap: 16px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card {
  height: 248px;
  min-height: 248px;
  padding: 0 26px 24px;
  border-radius: var(--ui-radius-lg);
}

html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
  min-height: 124px;
  margin: 0 -26px 8px;
}

html body .section-memories .memory-line-visual svg {
  width: min(100%, 205px);
  height: 118px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card h3 {
  font-size: 20px;
  font-weight: 400;
}

html body .comparison-table-wrap {
  padding: 0;
  border-radius: var(--ui-radius-lg);
}

html body .comparison-table th,
html body .comparison-table td {
  padding: 18px 20px;
  font-size: 13px;
}

html body .comparison-table tbody th,
html body .comparison-table td strong {
  font-size: 15px;
  font-weight: 500;
}

html body .comparison-table td:nth-child(3) {
  background: color-mix(in srgb, var(--ui-card-strong) 72%, var(--ui-page));
}

html body .faq-layout {
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(52px, 8vw, 112px);
}

html body .section-faq .section-heading h2,
html[data-language="en"] body .section-faq .section-heading h2,
html[data-language="en"] body .section-faq .faq-heading h2 {
  font-size: clamp(38px, 3.4vw, 48px);
  font-weight: 300;
}

html body .faq-list {
  gap: 10px;
}

html body .faq-list details {
  border-radius: 16px;
}

html body .faq-list summary {
  padding: 20px 22px;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
}

html body .site-footer {
  padding-top: clamp(72px, 7vw, 104px);
}

html body .footer-slogan {
  max-width: 720px;
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.02;
}

@media (max-width: 900px) {
  :root {
    --shell: calc(100vw - 40px);
    --ui-section-space: 82px;
  }

  html body .hero .hero-copy-compact,
  html.theme-dark body .hero .hero-copy-compact,
  html body .section-quickstart .quickstart-heading,
  html body .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  html body .hero .hero-copy-compact h1.hero-slogan {
    font-size: clamp(44px, 7.5vw, 58px);
  }

  html body .hero .hero-copy-compact .hero-lede {
    max-width: 640px;
    margin-top: 0;
  }
}

/* Recall emphasis: briefly spotlight only the memory entering the context. */
html body .cursor-workbench[data-state="memory-1"] .claude-memory-log p:nth-child(1),
html body .cursor-workbench[data-state="memory-2"] .claude-memory-log p:nth-child(2),
html body .cursor-workbench[data-state="memory-3"] .claude-memory-log p:nth-child(3) {
  border-radius: 5px;
  animation: recalled-memory-highlight 520ms ease-out both;
}

@keyframes recalled-memory-highlight {
  0% {
    background: rgba(35, 129, 102, 0);
    box-shadow: inset 2px 0 rgba(35, 129, 102, 0);
  }

  28% {
    background: rgba(35, 129, 102, 0.14);
    box-shadow: inset 2px 0 rgba(35, 129, 102, 0.72);
  }

  100% {
    background: rgba(35, 129, 102, 0.035);
    box-shadow: inset 2px 0 rgba(35, 129, 102, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .cursor-workbench[data-state="memory-1"] .claude-memory-log p:nth-child(1),
  html body .cursor-workbench[data-state="memory-2"] .claude-memory-log p:nth-child(2),
  html body .cursor-workbench[data-state="memory-3"] .claude-memory-log p:nth-child(3) {
    animation: none;
    background: rgba(35, 129, 102, 0.08);
    box-shadow: inset 2px 0 rgba(35, 129, 102, 0.4);
  }
}

/* Four memory types — one shared horizontal system, not four floating cards. */
html body .section-memories .memory-grid-lineart,
html.theme-dark body .section-memories .memory-grid-lineart {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--ui-rule);
  border: 1px solid var(--ui-rule);
  border-radius: 24px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
  position: relative;
  height: 340px;
  min-height: 340px;
  padding: 0 24px 26px;
  background: #f5f3f1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: background-color 180ms ease;
}

html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
  background: var(--ui-card);
}

html body .section-memories .memory-grid-lineart > .memory-line-card::before {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 1;
  color: var(--ui-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

html body .section-memories .memory-grid-lineart > .memory-line-card:nth-child(1)::before { content: "FIG 0.1"; }
html body .section-memories .memory-grid-lineart > .memory-line-card:nth-child(2)::before { content: "FIG 0.2"; }
html body .section-memories .memory-grid-lineart > .memory-line-card:nth-child(3)::before { content: "FIG 0.3"; }
html body .section-memories .memory-grid-lineart > .memory-line-card:nth-child(4)::before { content: "FIG 0.4"; }

html body .section-memories .memory-grid-lineart > .memory-line-card:hover,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card:hover {
  background: color-mix(in srgb, var(--ui-card) 72%, var(--ui-page));
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
  flex: 0 0 205px;
  min-height: 205px;
  margin: 0 -24px 8px;
  padding: 46px 24px 4px;
}

html body .section-memories .memory-line-visual svg {
  width: min(100%, 165px);
  height: 145px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card h3,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card h3 {
  margin-bottom: 9px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

html body .section-memories .memory-grid-lineart > .memory-line-card > p,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card > p {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  html body .section-memories .memory-grid-lineart,
  html.theme-dark body .section-memories .memory-grid-lineart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  html body .section-memories .memory-grid-lineart,
  html.theme-dark body .section-memories .memory-grid-lineart {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
    height: 300px;
    min-height: 300px;
  }

html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
    flex-basis: 172px;
    min-height: 172px;
  }
}

/* Quick Start v2.14 — make the demo clearly optional without adding another card. */
html body #quickstart .quickstart-optional-badge {
  display: inline-flex;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  align-items: center;
  background: #e8eee3;
  color: #596651;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 20px;
  white-space: nowrap;
}

html body #quickstart .quickstart-demo-note {
  max-width: 620px;
  margin: 12px 0 0;
  color: #74716b;
  font-size: 14px;
  line-height: 22px;
}

html.theme-dark body #quickstart .quickstart-optional-badge {
  background: rgba(153, 175, 139, .16);
  color: #b9c9ae;
}

html.theme-dark body #quickstart .quickstart-demo-note {
  color: rgba(239, 238, 233, .58);
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-demo-note {
    max-width: 34em;
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
  }
}

/* Claude Code Desktop — session-first workspace, based on the native Code tab. */
html body .claude-tabbar {
  height: 34px;
  padding-inline: 11px;
  background: #fbfbfa;
  border-bottom-color: #e8e6e1;
}

html body .claude-tab.is-active {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-self: center;
  color: #393936;
  font-size: 8px;
  font-weight: 560;
}

html body .claude-tab.is-active img {
  display: block;
  width: 9px;
  height: 9px;
}

html body .claude-tab-add {
  color: #96958f;
  font: 550 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-desktop-shell {
  grid-template-columns: 132px minmax(0, 1fr);
  height: calc(100% - 34px);
  background: #fff;
}

html body .claude-sidebar {
  padding: 9px 8px 38px;
  color: #6d6b66;
  background: #f5f4f1;
  border-right-color: #e7e5df;
}

html body .claude-mode {
  background: #e9e7e2;
}

html body .claude-mode b,
html body .claude-mode span {
  color: #797772;
  font-size: 7px;
}

html body .claude-mode b {
  color: #282724;
  background: #fff;
  box-shadow: 0 1px 3px rgba(48, 45, 39, 0.12);
}

html body .claude-sidebar nav {
  gap: 2px;
  margin-top: 10px;
}

html body .claude-sidebar nav > * {
  padding: 6px 7px;
  font-size: 7.5px;
}

html body .claude-sidebar nav b {
  background: #ebe9e4;
}

html body .claude-sidebar > small {
  margin: 16px 7px 6px;
  color: #9c9992;
  font-size: 6px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

html body .claude-sidebar li {
  padding: 5px 7px;
  font-size: 7px;
}

html body .claude-sidebar li::before {
  color: #c4c0b9;
  content: "";
}

html body .claude-sidebar li.is-active {
  color: #292824;
  background: #e9e6e0;
  font-weight: 550;
}

html body .claude-account {
  grid-template-columns: 20px 1fr auto;
  color: #6c6964;
  font-size: 7px;
}

html body .claude-home {
  background: #fdfdfc;
}

html body .claude-home > header.claude-workspace-header {
  height: 39px;
  padding: 0 12px;
  color: #86837c;
  border-bottom: 1px solid #eceae5;
  font-size: 7px;
}

html body .claude-workspace-header > span,
html body .claude-workspace-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

html body .claude-workspace-header > span > b {
  color: #363531;
  font-weight: 600;
}

html body .claude-workspace-header > span > i {
  color: #c2bfb8;
  font-style: normal;
}

html body .claude-workspace-actions em,
html body .claude-workspace-actions b {
  padding: 4px 6px;
  color: #66635d;
  background: #f3f1ed;
  border: 1px solid #e5e2dc;
  border-radius: 5px;
  font-style: normal;
  font-weight: 500;
}

html body .claude-welcome {
  top: 51%;
  width: min(76%, 430px);
}

html body .claude-welcome-copy {
  display: grid;
  grid-template-columns: 29px auto;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 17px;
  width: auto;
}

html body .claude-code-mark {
  display: block;
  width: 29px;
  height: 29px;
}

html body .claude-welcome .claude-welcome-copy h2 {
  display: block;
  margin: 0;
  color: #262521;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.05;
  text-align: left;
}

html body .claude-welcome .claude-terminal-input {
  min-height: 88px;
  padding: 13px;
  border-color: #d9d5ce;
  border-radius: 13px;
  box-shadow: 0 9px 24px rgba(48, 43, 35, 0.08), 0 1px 2px rgba(48, 43, 35, 0.06);
}

html body .claude-welcome .claude-terminal-input > p {
  color: #55514b;
  font-size: 8px;
}

html body .claude-terminal-input footer {
  grid-template-columns: 1fr auto 24px;
}

html body .claude-terminal-input footer em {
  color: #8a867e;
  font-size: 6px;
}

html body .claude-terminal-input button {
  background: #d97757;
  box-shadow: 0 2px 5px rgba(217, 119, 87, 0.24);
}

html body .claude-suggestions {
  gap: 6px;
  justify-content: flex-start;
  margin: 9px 2% 0;
}

html body .claude-suggestions span {
  padding: 4px 7px;
  color: #79756e;
  background: transparent;
  border-color: #e5e2dc;
  box-shadow: none;
  font-size: 6px;
}

html body .claude-session {
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  padding: 0;
}

html body .claude-session-thread {
  min-width: 0;
  padding: 14px 14px 12px;
  overflow: hidden;
}

html body .claude-session .claude-user-prompt {
  max-width: 88%;
  margin: 0 0 10px auto;
  padding: 8px 10px;
  color: #4e4a44;
  background: #f0eeea;
  border-radius: 10px 10px 3px 10px;
  font-size: 7px;
  line-height: 1.42;
}

html body .claude-session .claude-harmonizing {
  margin: 8px 2px;
  font-size: 7px;
}

html body .claude-session .claude-harmonizing img {
  display: block;
  width: 9px;
  height: 9px;
}

html body .claude-session .claude-memory-log {
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f8f7f4;
  border-color: #e6e3dc;
  border-radius: 9px;
}

html body .claude-memory-log > header {
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
  color: #77736c;
  background: #f2f0eb;
  border-bottom: 1px solid #e6e3dc;
  font-size: 6px;
}

html body .claude-memory-log > header span {
  color: #4c4943;
  font-weight: 650;
}

html body .claude-memory-log > header em {
  color: #2b8167;
  font-style: normal;
}

html body .claude-session .claude-memory-log p {
  grid-template-columns: 65px minmax(0, 1fr);
  margin: 0;
  padding: 5px 9px;
  border-bottom: 1px solid #ece9e3;
  font-size: 6px;
}

html body .claude-session .claude-memory-log small {
  display: block;
  padding: 6px 9px;
  background: #fff;
  font-size: 5.5px;
}

html body .claude-session .claude-answer {
  margin: 10px 2px 0;
  font-size: 7px;
  line-height: 1.48;
}

html body .claude-session .claude-answer > img {
  display: block;
  width: 9px;
  height: 9px;
  margin-top: 1px;
}

html body .claude-session .claude-tool-call {
  min-height: 28px;
  margin-top: 8px;
  padding-inline: 8px;
  border-radius: 7px;
  font-size: 6px;
}

html body .claude-session .claude-finish {
  margin: 7px 2px 0;
  font-size: 6px;
}

html body .claude-context-panel {
  padding: 11px 9px;
  overflow: hidden;
  color: #706d66;
  background: #faf9f7;
  border-left: 1px solid #e9e6e0;
  font-size: 6px;
}

html body .claude-context-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #3d3a35;
  font-size: 7px;
  font-weight: 600;
}

html body .claude-context-panel > header b {
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  color: #77736c;
  background: #ebe8e2;
  border-radius: 5px;
  font-size: 6px;
}

html body .claude-change-stat {
  display: flex;
  gap: 6px;
  margin: 11px 0 14px;
  font-size: 7px;
}

html body .claude-change-stat b { color: #2b8467; }
html body .claude-change-stat em { color: #b86360; font-style: normal; }

html body .claude-context-panel > small {
  color: #a19d95;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

html body .claude-context-panel ul {
  display: grid;
  gap: 6px;
  margin: 7px 0 14px;
  padding: 0;
  list-style: none;
}

html body .claude-context-panel li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
}

html body .claude-context-panel li i {
  color: #b06b53;
  font-style: normal;
  font-weight: 700;
}

html body .claude-context-panel li span {
  overflow: hidden;
  color: #5b5852;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-checks {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid #e9e6e0;
}

html body .claude-checks span {
  display: flex;
  gap: 5px;
  align-items: center;
}

html body .claude-checks i {
  color: #2b8467;
  font-style: normal;
}

html body .cursor-workbench[data-state="memory-1"] .claude-memory-log p:nth-of-type(1),
html body .cursor-workbench[data-state="memory-2"] .claude-memory-log p:nth-of-type(-n + 2),
html body .cursor-workbench[data-state="memory-3"] .claude-memory-log p,
html body .cursor-workbench[data-state="answer"] .claude-memory-log p {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .cursor-workbench[data-state="memory-1"] .claude-memory-log p:nth-of-type(1),
html body .cursor-workbench[data-state="memory-2"] .claude-memory-log p:nth-of-type(2),
html body .cursor-workbench[data-state="memory-3"] .claude-memory-log p:nth-of-type(3) {
  animation: recalled-memory-highlight 520ms ease-out both;
}

html body .claude-home .claude-replay {
  top: 7px;
  right: 126px;
  z-index: 2;
  padding: 4px 6px;
  color: #6d6962;
  background: #f5f3ef;
  border-color: #e2dfd8;
  border-radius: 5px;
}

@media (max-width: 980px) {
  html body .claude-desktop-shell {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  html body .claude-session {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
}

@media (max-width: 760px) {
  html body .claude-desktop-shell {
    grid-template-columns: 1fr;
  }

  html body .claude-session {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  html body .claude-welcome {
    width: min(86%, 430px);
  }
}

/* Case detail progressive disclosure v1 ------------------------------------ */
html body #cases .case-process-details,
html body #cases .case-lab-video,
html.theme-dark body #cases .case-process-details,
html.theme-dark body #cases .case-lab-video {
  display: block;
  margin: 0 36px 18px;
  overflow: visible;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--case-detail-rule);
  border-radius: 0;
  box-shadow: none;
}

html body #cases .case-process-details > summary,
html body #cases .case-lab-video > summary,
html.theme-dark body #cases .case-process-details > summary,
html.theme-dark body #cases .case-lab-video > summary {
  min-height: 62px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 18px;
  align-items: center;
  color: var(--case-detail-ink);
  cursor: pointer;
  list-style: none;
}

html body #cases .case-process-details > summary::-webkit-details-marker,
html body #cases .case-lab-video > summary::-webkit-details-marker,
html.theme-dark body #cases .case-process-details > summary::-webkit-details-marker,
html.theme-dark body #cases .case-lab-video > summary::-webkit-details-marker {
  display: none;
}

html body #cases .case-process-details > summary > span,
html.theme-dark body #cases .case-process-details > summary > span {
  font-size: 14px;
  font-weight: 500;
}

html body #cases .case-process-details > summary > strong,
html.theme-dark body #cases .case-process-details > summary > strong {
  color: var(--case-detail-positive);
  font: 500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.025em;
}

html body #cases .case-process-details > summary > i,
html body #cases .case-lab-video > summary > i,
html.theme-dark body #cases .case-process-details > summary > i,
html.theme-dark body #cases .case-lab-video > summary > i {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, 2px);
  transition: transform 180ms ease;
}

html body #cases .case-process-details[open] > summary > i,
html body #cases .case-lab-video[open] > summary > i,
html.theme-dark body #cases .case-process-details[open] > summary > i,
html.theme-dark body #cases .case-lab-video[open] > summary > i {
  transform: rotate(225deg) translate(-2px, 2px);
}

html body #cases .case-process-details[open] > summary,
html body #cases .case-lab-video[open] > summary,
html.theme-dark body #cases .case-process-details[open] > summary,
html.theme-dark body #cases .case-lab-video[open] > summary {
  border-bottom: 1px solid var(--case-detail-rule);
}

html body #cases .case-process-body,
html.theme-dark body #cases .case-process-body {
  background: transparent;
}

html body #cases .case-process-body .case-lab-controls,
html.theme-dark body #cases .case-process-body .case-lab-controls {
  border-top: 0;
}

html body #cases .case-process-body .case-lanes,
html.theme-dark body #cases .case-process-body .case-lanes {
  margin-top: 22px;
  margin-bottom: 24px;
}

html body #cases .case-lane-answer,
html.theme-dark body #cases .case-lane-answer {
  display: none !important;
}

html body #cases .case-memory-recall,
html.theme-dark body #cases .case-memory-recall {
  max-width: 640px;
  padding: 12px 14px;
}

html body #cases .case-memory-recall p,
html.theme-dark body #cases .case-memory-recall p {
  font-size: 13px;
  line-height: 1.55;
}

html body #cases .case-lab-video > summary,
html.theme-dark body #cases .case-lab-video > summary {
  grid-template-columns: auto minmax(0, 1fr) 18px;
}

html body #cases .case-lab-video .case-card-label,
html.theme-dark body #cases .case-lab-video .case-card-label {
  padding: 0;
  color: var(--case-detail-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 400 9px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

html body #cases .case-video-summary-copy,
html.theme-dark body #cases .case-video-summary-copy {
  display: grid;
  gap: 4px;
}

html body #cases .case-video-summary-copy strong,
html.theme-dark body #cases .case-video-summary-copy strong {
  color: var(--case-detail-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

html body #cases .case-video-summary-copy small,
html.theme-dark body #cases .case-video-summary-copy small {
  color: var(--case-detail-muted);
  font-size: 11px;
  line-height: 1.35;
}

html body #cases .case-lab-video .case-video-player,
html.theme-dark body #cases .case-lab-video .case-video-player {
  width: 100%;
  min-width: 0;
  padding: 14px;
  background: #0c0d0b;
}

html body #cases .case-lab-video video,
html.theme-dark body #cases .case-lab-video video {
  width: 100%;
  display: block;
  border-radius: 8px;
}

@media (max-width: 760px) {
  html body #cases .case-process-details,
  html body #cases .case-lab-video,
  html.theme-dark body #cases .case-process-details,
  html.theme-dark body #cases .case-lab-video {
    margin: 0 20px 14px;
    border-radius: 0;
  }

  html body #cases .case-process-details > summary,
  html body #cases .case-lab-video > summary,
  html.theme-dark body #cases .case-process-details > summary,
  html.theme-dark body #cases .case-lab-video > summary {
    min-height: 58px;
    padding: 14px 0;
    gap: 10px;
  }

  html body #cases .case-process-details > summary {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  html body #cases .case-process-details > summary > strong {
    grid-column: 1;
    grid-row: 2;
  }

  html body #cases .case-process-details > summary > i {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  html body #cases .case-lab-video > summary {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  html body #cases .case-lab-video .case-card-label {
    display: none;
  }
}

html body #cases .case-slide:focus-visible,
html.theme-dark body #cases .case-slide:focus-visible {
  outline: 1px solid color-mix(in srgb, #71846b 72%, transparent);
  outline-offset: -1px;
}

html body #cases .case-outcome-artifacts,
html body #cases .case-outcome-evidence,
html.theme-dark body #cases .case-outcome-artifacts,
html.theme-dark body #cases .case-outcome-evidence {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--case-detail-rule);
  border: 1px solid var(--case-detail-rule);
  border-radius: 14px;
}

html body #cases .case-outcome-arrow,
html.theme-dark body #cases .case-outcome-arrow {
  display: none;
}

html body #cases .case-artifact,
html body #cases .case-evidence,
html.theme-dark body #cases .case-artifact,
html.theme-dark body #cases .case-evidence,
html body #cases .case-artifact.is-on,
html body #cases .case-evidence.is-on,
html.theme-dark body #cases .case-artifact.is-on,
html.theme-dark body #cases .case-evidence.is-on {
  padding: 18px;
  color: var(--case-detail-copy);
  background: var(--case-detail-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #cases .case-artifact.is-on,
html body #cases .case-evidence.is-on,
html.theme-dark body #cases .case-artifact.is-on,
html.theme-dark body #cases .case-evidence.is-on {
  background: color-mix(in srgb, var(--case-detail-positive) 5%, var(--case-detail-paper));
}

html body #cases .case-artifact header span,
html body #cases .case-evidence header span,
html.theme-dark body #cases .case-artifact header span,
html.theme-dark body #cases .case-evidence header span,
html body #cases .case-artifact header strong,
html body #cases .case-evidence header strong,
html.theme-dark body #cases .case-artifact header strong,
html.theme-dark body #cases .case-evidence header strong {
  color: var(--case-detail-muted);
  font-weight: 500;
}

html body #cases .case-artifact.is-on header span,
html body #cases .case-evidence.is-on header span,
html body #cases .case-artifact.is-on header strong,
html body #cases .case-evidence.is-on header strong,
html.theme-dark body #cases .case-artifact.is-on header span,
html.theme-dark body #cases .case-evidence.is-on header span,
html.theme-dark body #cases .case-artifact.is-on header strong,
html.theme-dark body #cases .case-evidence.is-on header strong {
  color: var(--case-detail-positive);
}

html body #cases .case-artifact header i,
html body #cases .case-evidence header i,
html.theme-dark body #cases .case-artifact header i,
html.theme-dark body #cases .case-evidence header i,
html body #cases .case-artifact.is-on header i,
html body #cases .case-evidence.is-on header i,
html.theme-dark body #cases .case-artifact.is-on header i,
html.theme-dark body #cases .case-evidence.is-on header i {
  width: 20px;
  height: 20px;
  color: var(--case-detail-muted);
  background: transparent;
}

html body #cases .case-artifact.is-on header i,
html body #cases .case-evidence.is-on header i,
html.theme-dark body #cases .case-artifact.is-on header i,
html.theme-dark body #cases .case-evidence.is-on header i {
  color: var(--case-detail-positive);
}

html body #cases .case-artifact code,
html.theme-dark body #cases .case-artifact code,
html body #cases .case-evidence blockquote,
html.theme-dark body #cases .case-evidence blockquote,
html body #cases .case-evidence.is-on blockquote,
html.theme-dark body #cases .case-evidence.is-on blockquote {
  color: var(--case-detail-copy);
  font-size: 13px;
  font-weight: 400;
}

html body #cases .case-artifact.is-on code,
html.theme-dark body #cases .case-artifact.is-on code {
  color: var(--case-detail-ink);
}

html body #cases .case-artifact > div span,
html body #cases .case-artifact.is-on > div span,
html.theme-dark body #cases .case-artifact > div span,
html.theme-dark body #cases .case-artifact.is-on > div span {
  padding: 4px 0;
  color: var(--case-detail-muted);
  background: transparent;
  border-radius: 0;
}

html body #cases .case-artifact.is-on > div span,
html.theme-dark body #cases .case-artifact.is-on > div span,
html body #cases .case-evidence.is-on small,
html.theme-dark body #cases .case-evidence.is-on small {
  color: var(--case-detail-positive);
}

html body #cases .case-evidence mark,
html.theme-dark body #cases .case-evidence mark {
  padding: 0;
  color: inherit;
  background: transparent;
  border-bottom: 1px solid var(--case-detail-positive);
}

@media (max-width: 760px) {
  html body #cases .case-outcome-artifacts,
  html body #cases .case-outcome-evidence,
  html.theme-dark body #cases .case-outcome-artifacts,
  html.theme-dark body #cases .case-outcome-evidence {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  html body .claude-session {
    grid-template-columns: 1fr;
  }

  html body .claude-context-panel {
    display: none;
  }

  html body .claude-session-thread {
    padding: 10px 11px 8px;
  }

  html body .claude-session .claude-user-prompt {
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 6px;
  }

  html body .cursor-workbench[data-state="answer"] .claude-harmonizing {
    display: none;
  }

  html body .claude-memory-log > header,
  html body .claude-session .claude-memory-log p,
  html body .claude-session .claude-memory-log small {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  html body .claude-session .claude-answer {
    margin-top: 7px;
    font-size: 6px;
  }

  html body .claude-session .claude-tool-call,
  html body .claude-session .claude-finish {
    display: none;
  }
}

/* Keep the four-stage comparison visible within a desktop viewport. */
@media (min-width: 901px) {
  html body #architecture-comparison,
  html.theme-dark body #architecture-comparison {
    padding-block: clamp(56px, 7vh, 72px);
  }

  html body #architecture-comparison .comparison-aligned-heading,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading {
    margin-bottom: clamp(24px, 3vh, 34px);
  }

  html body #architecture-comparison .comparison-aligned-heading h2,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading h2,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading h2 {
    font-size: clamp(36px, 3vw, 44px);
    line-height: 1;
  }

  html body #architecture-comparison .comparison-table {
    table-layout: fixed;
  }

  html body #architecture-comparison .comparison-table th,
  html body #architecture-comparison .comparison-table td,
  html.theme-dark body #architecture-comparison .comparison-table th,
  html.theme-dark body #architecture-comparison .comparison-table td,
  html[data-language="en"] body #architecture-comparison .comparison-table th,
  html[data-language="en"] body #architecture-comparison .comparison-table td {
    padding: 14px 18px;
  }

  html body #architecture-comparison .comparison-table thead th,
  html.theme-dark body #architecture-comparison .comparison-table thead th,
  html[data-language="en"] body #architecture-comparison .comparison-table thead th {
    font-size: 15px;
    line-height: 1.3;
  }

  html body #architecture-comparison .comparison-table tbody th,
  html body #architecture-comparison .comparison-table td strong,
  html.theme-dark body #architecture-comparison .comparison-table tbody th,
  html.theme-dark body #architecture-comparison .comparison-table td strong,
  html[data-language="en"] body #architecture-comparison .comparison-table tbody th,
  html[data-language="en"] body #architecture-comparison .comparison-table td strong {
    font-size: 15px;
    line-height: 1.32;
  }

  html body #architecture-comparison .comparison-table tbody th span,
  html.theme-dark body #architecture-comparison .comparison-table tbody th span {
    margin-bottom: 2px;
    font-size: 12px;
  }

  html body #architecture-comparison .comparison-table td p,
  html.theme-dark body #architecture-comparison .comparison-table td p,
  html[data-language="en"] body #architecture-comparison .comparison-table td p {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.42;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  html body #architecture-comparison,
  html.theme-dark body #architecture-comparison {
    padding-block: 44px;
  }

  html body #architecture-comparison .comparison-aligned-heading,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading {
    margin-bottom: 20px;
  }

  html body #architecture-comparison .comparison-table th,
  html body #architecture-comparison .comparison-table td,
  html.theme-dark body #architecture-comparison .comparison-table th,
  html.theme-dark body #architecture-comparison .comparison-table td,
  html[data-language="en"] body #architecture-comparison .comparison-table th,
  html[data-language="en"] body #architecture-comparison .comparison-table td {
    padding-block: 11px;
  }
}

/* FAQ: quiet editorial rows instead of elevated accordion cards. */
html body #faq .faq-list,
html.theme-dark body #faq .faq-list {
  display: block;
  border-top: 1px solid var(--ui-rule);
}

html body #faq .faq-list details,
html.theme-dark body #faq .faq-list details,
html body #faq .faq-list details:hover,
html.theme-dark body #faq .faq-list details:hover,
html body #faq .faq-list details[open],
html.theme-dark body #faq .faq-list details[open] {
  overflow: visible;
  color: var(--ui-copy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ui-rule);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html body #faq .faq-list summary,
html.theme-dark body #faq .faq-list summary {
  position: relative;
  min-height: 0;
  padding: 27px 52px 27px 0;
  color: var(--ui-ink);
  font-size: clamp(17px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

html body #faq .faq-list summary::-webkit-details-marker,
html.theme-dark body #faq .faq-list summary::-webkit-details-marker {
  display: none;
}

html body #faq .faq-list summary::after,
html.theme-dark body #faq .faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 2px;
  width: auto;
  height: auto;
  display: block;
  color: var(--ui-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  transition: color 160ms ease, transform 160ms ease;
}

html body #faq .faq-list details[open] summary,
html.theme-dark body #faq .faq-list details[open] summary {
  padding-bottom: 13px;
}

html body #faq .faq-list details[open] summary::after,
html.theme-dark body #faq .faq-list details[open] summary::after {
  content: "−";
  color: var(--ui-ink);
  transform: translateY(-50%);
}

html body #faq .faq-list details p,
html.theme-dark body #faq .faq-list details p {
  max-width: 720px;
  margin: 0;
  padding: 0 52px 29px 0;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.005em;
}

html body #faq .faq-list details p a,
html.theme-dark body #faq .faq-list details p a {
  color: var(--ui-ink);
  text-decoration-color: var(--ui-rule-strong);
  text-underline-offset: 3px;
}

@media (max-width: 680px) {
  html body #faq .faq-list summary,
  html.theme-dark body #faq .faq-list summary {
    padding: 22px 38px 22px 0;
    font-size: 17px;
  }

  html body #faq .faq-list details p,
  html.theme-dark body #faq .faq-list details p {
    padding: 0 38px 24px 0;
    font-size: 14px;
  }
}

/* Comparison heading shares the same editorial scale and alignment as the memory heading. */
html body #architecture-comparison .comparison-aligned-heading,
html.theme-dark body #architecture-comparison .comparison-aligned-heading,
html[data-language="en"] body #architecture-comparison .comparison-aligned-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 56px);
  row-gap: clamp(28px, 3vw, 38px);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(52px, 5.5vw, 72px);
}

html body #architecture-comparison .comparison-aligned-heading .section-index,
html.theme-dark body #architecture-comparison .comparison-aligned-heading .section-index,
html[data-language="en"] body #architecture-comparison .comparison-aligned-heading .section-index {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  width: auto;
  max-width: none;
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
}

html body #architecture-comparison .comparison-aligned-heading h2,
html.theme-dark body #architecture-comparison .comparison-aligned-heading h2,
html[data-language="en"] body #architecture-comparison .comparison-aligned-heading h2 {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 503px;
  margin: 0;
  color: var(--ui-ink);
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: normal;
  text-align: left;
  text-wrap: balance;
}

@media (max-width: 820px) {
  html body #architecture-comparison .comparison-aligned-heading,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 42px;
  }

  html body #architecture-comparison .comparison-aligned-heading h2,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading h2,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    font-size: clamp(32px, 9vw, 36px);
    line-height: 1.17;
  }
}

/* ElevenLabs-style section header: eyebrow above a balanced title/copy split. */
html body #architecture .architecture-split-heading,
html.theme-dark body #architecture .architecture-split-heading,
html[data-language="en"] body #architecture .architecture-split-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 56px);
  row-gap: clamp(28px, 3vw, 38px);
  align-items: start;
  justify-items: normal;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(52px, 5.5vw, 72px);
  text-align: left;
}

html body #architecture .architecture-split-heading .section-index,
html.theme-dark body #architecture .architecture-split-heading .section-index,
html[data-language="en"] body #architecture .architecture-split-heading .section-index {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  width: auto;
  max-width: none;
  margin: 0;
  color: #68705f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .01em;
  text-align: left;
  text-transform: uppercase;
}

html body #architecture > .content-shell,
html.theme-dark body #architecture > .content-shell {
  width: min(1118px, calc(100vw - 48px));
  max-width: 1118px;
}

html body #architecture .architecture-split-heading h2,
html.theme-dark body #architecture .architecture-split-heading h2,
html[data-language="en"] body #architecture .architecture-split-heading h2 {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 503px;
  margin: 0;
  color: var(--ui-ink);
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: normal;
  text-align: left;
  text-wrap: balance;
}

html body #architecture .architecture-split-heading h2 span,
html.theme-dark body #architecture .architecture-split-heading h2 span,
html[data-language="en"] body #architecture .architecture-split-heading h2 span {
  display: block;
}

html body #architecture .architecture-split-heading .architecture-heading-copy,
html.theme-dark body #architecture .architecture-split-heading .architecture-heading-copy,
html[data-language="en"] body #architecture .architecture-split-heading .architecture-heading-copy {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: 503px;
  margin: 0;
  color: var(--ui-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
  text-align: left;
}

@media (max-width: 820px) {
  html body #architecture .architecture-split-heading,
  html.theme-dark body #architecture .architecture-split-heading,
  html[data-language="en"] body #architecture .architecture-split-heading {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 42px;
  }

  html body #architecture .architecture-split-heading h2,
  html.theme-dark body #architecture .architecture-split-heading h2,
  html[data-language="en"] body #architecture .architecture-split-heading h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    font-size: clamp(32px, 9vw, 36px);
    line-height: 1.17;
  }

  html body #architecture .architecture-split-heading .architecture-heading-copy,
  html.theme-dark body #architecture .architecture-split-heading .architecture-heading-copy,
  html[data-language="en"] body #architecture .architecture-split-heading .architecture-heading-copy {
    grid-column: 1;
    grid-row: 3;
    max-width: 640px;
    margin-top: 2px;
  }
}

@media (max-width: 680px) {
  html body #architecture > .content-shell,
  html.theme-dark body #architecture > .content-shell {
    width: min(1118px, calc(100vw - 28px));
  }
}

/* ElevenLabs-style page rails: broken intersections with a centered marker. */
@media (min-width: 901px) {
  html body main#main > .section {
    --page-rail-width: min(1228px, calc(100vw - 40px));
    --page-rail-rule: rgba(0, 0, 0, 0.05);
    --page-rail-dot: #000;
    --page-rail-surface: var(--ui-page);
    position: relative;
    border-bottom-color: var(--page-rail-rule);
  }

  html body main#main > #cases {
    border-top: 1px solid var(--page-rail-rule);
  }

  html body main#main > .section::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--page-rail-width);
    border-inline: 1px solid var(--page-rail-rule);
    pointer-events: none;
    transform: translateX(-50%);
  }

  html body main#main > .section::after {
    content: "";
    position: absolute;
    z-index: 21;
    top: -10px;
    left: 50%;
    width: calc(var(--page-rail-width) + 20px);
    height: 20px;
    pointer-events: none;
    transform: translateX(-50%);
    background:
      radial-gradient(circle, var(--page-rail-dot) 0 1px, transparent 1.05px) left 9px center / 2px 2px no-repeat,
      radial-gradient(circle, var(--page-rail-dot) 0 1px, transparent 1.05px) right 9px center / 2px 2px no-repeat,
      linear-gradient(var(--page-rail-surface), var(--page-rail-surface)) left center / 20px 20px no-repeat,
      linear-gradient(var(--page-rail-surface), var(--page-rail-surface)) right center / 20px 20px no-repeat;
  }

  html.theme-dark body main#main > .section {
    --page-rail-rule: rgba(255, 255, 255, 0.09);
    --page-rail-dot: #fff;
  }
}

/* Cross-agent hero: the existing task board becomes a Codex → Claude Code handoff. */
html body .agent-handoff-grid,
html.theme-dark body .agent-handoff-grid {
  position: relative;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  background: #f5f1e8;
}

html body .handoff-pane {
  min-width: 0;
  overflow: hidden;
}

html body .handoff-codex {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 42px;
  color: #34322d;
  background: #f7f2e7;
  border-right: 1px solid #d8d1c5;
}

html body .handoff-codex > header,
html body .handoff-claude > header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
}

html body .handoff-codex > header {
  border-bottom: 1px solid #ddd5c9;
}

html body .handoff-codex > header b,
html body .handoff-claude > header b {
  font-size: 12px;
  font-weight: 600;
}

html body .handoff-codex > header small,
html body .handoff-claude > header small {
  margin-left: auto;
  color: #8d877d;
  font-size: 9px;
}

html body .handoff-agent-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .handoff-agent-mark.is-codex {
  color: #f8f7f3;
  background: #20211f;
}

html body .handoff-agent-mark.is-claude {
  color: #294e6f;
  background: #f0a17d;
}

html body .handoff-codex-body {
  padding: 30px 34px 26px;
  overflow: hidden;
}

html body .handoff-kicker {
  color: #7c756b;
  font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body .handoff-codex-body h3 {
  max-width: 410px;
  margin: 15px 0 12px;
  color: #292722;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

html body .handoff-codex-body > p {
  max-width: 410px;
  margin: 0;
  color: #746e65;
  font-size: 12px;
  line-height: 1.58;
}

html body .handoff-conclusion {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 15px 17px;
  background: #a7a69e;
  border-left: 4px solid #73c8ec;
  border-radius: 10px;
}

html body .handoff-conclusion span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
}

html body .handoff-conclusion strong {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
}

html body .handoff-codex-body pre {
  max-height: 142px;
  margin: 18px 0 0;
  padding: 14px 16px;
  overflow: hidden;
  color: #777168;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #e1dacf;
  border-radius: 10px;
  font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

html body .handoff-codex > footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #827b71;
  border-top: 1px solid #ddd5c9;
  font-size: 9px;
}

html body .handoff-codex > footer i {
  width: 7px;
  height: 7px;
  background: #3a9477;
  border-radius: 50%;
}

html body .handoff-claude,
html.theme-dark body .handoff-claude {
  position: relative;
  color: #eaf1f5;
  background: #294f70;
  border: 0;
}

html body .handoff-claude > header,
html.theme-dark body .handoff-claude > header {
  justify-content: space-between;
  color: #eaf1f5;
  background: #315c7f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

html body .handoff-claude > header > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

html body .handoff-claude > header small {
  color: rgba(234, 241, 245, 0.64);
}

html body .handoff-claude > header button,
html.theme-dark body .handoff-claude > header button {
  color: rgba(234, 241, 245, 0.7);
}

html body .handoff-claude .cursor-agent-body {
  padding: 24px 26px 88px;
}

html body .handoff-claude .cursor-agent-body::before {
  content: none;
}

html body .handoff-idle-guide {
  position: absolute;
  top: 46%;
  left: 50%;
  display: grid;
  gap: 7px;
  width: min(330px, 78%);
  color: rgba(234, 241, 245, 0.7);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 260ms ease;
}

html body .handoff-idle-guide span {
  color: rgba(234, 241, 245, 0.45);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

html body .handoff-idle-guide strong {
  color: #f4f7f9;
  font-size: 17px;
  font-weight: 500;
}

html body .handoff-idle-guide small {
  color: rgba(234, 241, 245, 0.58);
  font-size: 10px;
}

html body .cursor-workbench:not([data-state="idle"]) .handoff-idle-guide {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 6px));
  pointer-events: none;
}

html body .handoff-claude .cursor-prompt {
  color: #eef4f7;
  background: rgba(20, 43, 63, 0.38);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  line-height: 1.45;
}

html body .handoff-claude .cursor-memory-log {
  color: #a9cadc;
}

html body .handoff-claude .cursor-memory-log p b {
  color: #8de0bd;
}

html body .handoff-claude .cursor-memory-log span {
  color: rgba(234, 241, 245, 0.7);
}

html body .handoff-claude .cursor-memory-log small {
  color: #8de0bd;
}

html body .handoff-claude .cursor-agent-answer,
html body .handoff-claude .cursor-agent-finish {
  color: #eef4f7;
}

html body .handoff-claude .cursor-file-card {
  color: #eaf1f5;
  background: rgba(18, 40, 59, 0.34);
  border-color: rgba(255, 255, 255, 0.18);
}

html body .handoff-claude .cursor-file-card em {
  color: #8de0bd;
}

html body .handoff-claude .cursor-agent-input {
  color: rgba(234, 241, 245, 0.7);
  background: rgba(20, 43, 63, 0.82);
  border-color: rgba(255, 255, 255, 0.22);
}

html body .handoff-claude .cursor-agent-input button {
  color: #294f70;
  background: #eaf1f5;
}

html body .handoff-claude .session-demo-live {
  color: #8de0bd;
}

html body .handoff-bridge {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 47%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: #f4f7f5;
  background: #2d7f68;
  border: 5px solid rgba(245, 243, 239, 0.92);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(29, 54, 47, 0.2);
  transform: translate(-50%, -50%);
  transition: transform 260ms ease, background-color 260ms ease;
}

html body .handoff-bridge span {
  margin-top: 6px;
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

html body .handoff-bridge i {
  margin-top: -8px;
  font-size: 17px;
  font-style: normal;
}

html body .cursor-workbench[data-state="searching"] .handoff-bridge,
html body .cursor-workbench[data-state^="memory"] .handoff-bridge {
  background: #278e70;
  transform: translate(-50%, -50%) scale(1.08);
}

html body .cursor-workbench[data-state="answer"] .handoff-bridge {
  background: #1f705b;
}

@media (max-width: 900px) {
  html body .agent-handoff-grid,
  html.theme-dark body .agent-handoff-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  html body .handoff-codex-body {
    padding: 24px 22px;
  }

  html body .handoff-codex-body h3 {
    font-size: 24px;
  }

  html body .handoff-bridge {
    left: 45%;
  }
}

@media (max-width: 760px) {
  html body .agent-handoff-grid,
  html.theme-dark body .agent-handoff-grid {
    grid-template-columns: 1fr;
  }

  html body .handoff-codex {
    display: none;
  }

  html body .handoff-bridge {
    top: 20px;
    left: 50%;
    width: 118px;
    height: 24px;
    border-width: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
  }

  html body .handoff-bridge span {
    margin: 0;
  }

  html body .handoff-bridge i {
    margin: 0 0 0 5px;
    font-size: 12px;
  }

  html body .cursor-workbench[data-state="searching"] .handoff-bridge,
  html body .cursor-workbench[data-state^="memory"] .handoff-bridge,
  html body .cursor-workbench[data-state="answer"] .handoff-bridge {
    transform: translateX(-50%);
  }

  html body .handoff-claude > header {
    padding-top: 14px;
  }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100vw - 28px);
    --ui-section-space: 68px;
    --ui-radius-lg: 16px;
  }

  html body .header-inner {
    width: calc(100vw - 28px);
    height: 58px;
  }

  html body .hero,
  html.theme-dark body .hero {
    padding: 54px 0 64px;
  }

  html body .hero .hero-copy-compact h1.hero-slogan,
  html.theme-dark body .hero .hero-copy-compact h1.hero-slogan {
    font-size: clamp(38px, 10.8vw, 48px);
    line-height: 1.01;
  }

  html body .hero .hero-copy-compact .hero-actions {
    flex-wrap: wrap;
  }

  html body .cursor-scene {
    min-height: 480px;
  }

  html body .section-heading h2,
  html body .section-memories > .content-shell > .section-heading h2,
  html[data-language="en"] body .section-heading h2,
  html[data-language="en"] body .architecture-page-heading h2 {
    font-size: clamp(32px, 9vw, 40px);
  }

  html body .case-grid,
  html body .section-memories .memory-grid-lineart {
    grid-template-columns: 1fr;
  }

  html body .case-slide,
  html body .case-slide:last-child {
    min-height: 230px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card {
    height: 260px;
    min-height: 260px;
  }

  html body .quickstart-tabs {
    grid-template-columns: 1fr;
  }

  html body .comparison-table {
    min-width: 720px;
  }
}

/* ElevenLabs reference calibration v12 ------------------------------------
 * Measured from the live homepage at 1440px: 1178px shell, paired 564px
 * columns, 48px display type, 52px line-height, 24px product radius.
 */
html body .hero,
html.theme-dark body .hero {
  padding-top: 112px;
  padding-bottom: 96px;
}

html body .hero .hero-layout,
html.theme-dark body .hero .hero-layout {
  width: min(1178px, calc(100vw - 64px));
  gap: 36px;
}

html body .hero .hero-copy-compact,
html.theme-dark body .hero .hero-copy-compact,
html[data-language="en"] body .hero .hero-copy-compact {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

html body .hero .hero-copy-compact .hero-intro,
html.theme-dark body .hero .hero-copy-compact .hero-intro {
  width: 100%;
}

html body .hero .hero-copy-compact h1.hero-slogan,
html.theme-dark body .hero .hero-copy-compact h1.hero-slogan,
html[data-language="en"] body .hero h1.hero-slogan {
  width: 100%;
  max-width: 564px;
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -0.02em;
}

html body .hero .hero-copy-compact .hero-lede,
html.theme-dark body .hero .hero-copy-compact .hero-lede {
  width: 100%;
  max-width: 564px;
  margin: 0;
  justify-self: stretch;
  color: var(--ui-ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

html body .hero .hero-copy-compact .hero-actions,
html.theme-dark body .hero .hero-copy-compact .hero-actions {
  margin-top: 32px;
}

html body .hero .hero-copy-compact .hero-actions .button,
html.theme-dark body .hero .hero-copy-compact .hero-actions .button {
  min-height: 44px;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 400;
}

html body .cursor-scene {
  width: 100%;
  max-width: none;
  min-height: 620px;
  margin: 0;
  padding: 0 0 62px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

html body .cursor-workbench.product-workbench,
html:not(.theme-dark) .cursor-workbench.product-workbench,
html.theme-dark body .cursor-workbench.product-workbench {
  width: 100%;
  height: 558px;
  color: var(--ui-copy);
  background: #f5f3f1;
  border: 1px solid #e4e0dc;
  border-radius: 24px;
  box-shadow: none;
}

html body .cursor-titlebar {
  height: 52px;
  padding-inline: 20px;
  background: #f8f7f5;
  border-color: #e4e0dc;
  font-size: 12px;
}

html body .cursor-grid {
  height: calc(100% - 52px);
}

html body .cursor-queue,
html body .cursor-agent,
html body .cursor-preview {
  background: #f7f5f3;
  border-color: #e4e0dc;
}

html body .cursor-preview {
  background: #fbfaf8;
}

html body .cursor-cli {
  right: 20px;
  bottom: 18px;
  width: min(470px, 42vw);
  background: rgba(250, 249, 247, 0.98);
  border-color: #d7d2cc;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(37, 32, 27, 0.1);
}

html body .cursor-scene-mask {
  height: 56px;
  background: linear-gradient(to bottom, rgba(253, 252, 252, 0), var(--ui-page) 82%);
}

html body .section-heading h2,
html body .section-memories > .content-shell > .section-heading h2,
html[data-language="en"] body .section-heading h2,
html[data-language="en"] body .architecture-page-heading h2,
html[data-language="en"] body .faq-heading h2,
html[data-language="en"] body .section-memories > .content-shell > .section-heading h2,
html body .section-quickstart .quickstart-heading h2,
html[data-language="en"] body .section-quickstart .quickstart-heading h2,
html body .section-faq .section-heading h2 {
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -0.025em;
}

html body .case-slide,
html body .quickstart-tabs,
html body .quickstart-panel,
html body .quickstart-install-panel .start-step,
html body .section-memories .memory-grid-lineart > .memory-line-card,
html body .comparison-table-wrap,
html body .faq-list details {
  background: #f5f3f1;
  border-color: #e4e0dc;
}

html body .case-slide,
html body .section-memories .memory-grid-lineart > .memory-line-card,
html body .comparison-table-wrap {
  border-radius: 24px;
}

@media (max-width: 900px) {
  html body .hero,
  html.theme-dark body .hero {
    padding-top: 72px;
  }

  html body .hero .hero-copy-compact,
  html.theme-dark body .hero .hero-copy-compact,
  html[data-language="en"] body .hero .hero-copy-compact {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }

  html body .hero .hero-copy-compact .hero-lede,
  html.theme-dark body .hero .hero-copy-compact .hero-lede {
    max-width: 620px;
  }
}

@media (max-width: 680px) {
  html body .cursor-title-action {
    display: none;
  }

  html body .hero,
  html.theme-dark body .hero {
    padding-top: 54px;
    padding-bottom: 68px;
  }

  html body .hero .hero-layout,
  html.theme-dark body .hero .hero-layout {
    width: calc(100vw - 28px);
    gap: 34px;
  }

  html body .hero .hero-copy-compact h1.hero-slogan,
  html.theme-dark body .hero .hero-copy-compact h1.hero-slogan,
  html[data-language="en"] body .hero h1.hero-slogan {
    font-size: clamp(38px, 10.2vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }

  html body .hero .hero-copy-compact .hero-lede,
  html.theme-dark body .hero .hero-copy-compact .hero-lede {
    font-size: 16px;
    line-height: 1.55;
  }

  html body .hero .hero-copy-compact .hero-actions .button,
  html.theme-dark body .hero .hero-copy-compact .hero-actions .button {
    padding-inline: 18px;
    font-size: 14px;
  }

  html body .cursor-scene {
    min-height: 480px;
    padding-bottom: 42px;
  }

  html body .cursor-workbench.product-workbench,
  html:not(.theme-dark) .cursor-workbench.product-workbench {
    height: 470px;
    border-radius: 18px;
  }
}

/* Geometry correction for the local font metrics. */
@media (min-width: 901px) {
  html body .hero,
  html.theme-dark body .hero {
    padding-top: 123px;
  }

  html body .hero .hero-copy-compact h1.hero-slogan,
  html.theme-dark body .hero .hero-copy-compact h1.hero-slogan,
  html[data-language="en"] body .hero h1.hero-slogan {
    line-height: 44px;
  }

  html body .hero .hero-copy-compact .hero-actions,
  html.theme-dark body .hero .hero-copy-compact .hero-actions {
    margin-top: 31px;
  }

  html body .hero .hero-copy-compact .hero-actions .button,
  html.theme-dark body .hero .hero-copy-compact .hero-actions .button {
    height: 44px;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px;
  }

  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    width: 100%;
    max-width: none;
    min-height: 620px;
    margin: 0;
    padding: 0 0 62px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
  }

  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench,
  html.theme-dark body .hero .cursor-workbench.product-workbench {
    width: 100%;
    height: 558px;
    margin: 0;
    background: #f5f3f1;
    border: 1px solid #e4e0dc;
    border-radius: 24px;
    box-shadow: none;
  }
}

/* Header alignment and a useful idle state complete the product-led hero. */
@media (min-width: 901px) {
  html body .hero .hero-layout,
  html.theme-dark body .hero .hero-layout {
    gap: 46px;
  }
}

html body .header-inner {
  gap: 46px;
}

html body .header-logo {
  width: 120px;
}

html body .desktop-nav {
  justify-self: start;
}

html body .cursor-workbench[data-state="idle"] .cursor-agent-body::before {
  content: "01\A Start a new session.\A Do not repeat the project background.";
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(250px, 78%);
  color: #86827c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
  transform: translate(-50%, -50%);
}

/* Cool pearl field: quiet atmospheric depth without a competing illustration. */
@media (min-width: 901px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    min-height: 672px;
    padding: 28px 28px 86px;
    overflow: hidden;
    border: 1px solid #d8dddc;
    border-radius: 24px;
    background-color: #e8ebea;
    background-image:
      radial-gradient(ellipse at 7% 16%, rgba(190, 207, 203, 0.7) 0%, rgba(203, 216, 212, 0.34) 24%, transparent 52%),
      radial-gradient(ellipse at 91% 11%, rgba(226, 218, 210, 0.58) 0%, rgba(225, 220, 214, 0.22) 24%, transparent 51%),
      radial-gradient(ellipse at 52% 108%, rgba(192, 204, 206, 0.62) 0%, rgba(207, 216, 216, 0.2) 31%, transparent 58%),
      linear-gradient(132deg, #eef0ef 0%, #e4e9e7 48%, #ece9e5 100%);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.44);
  }

  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench,
  html.theme-dark body .hero .cursor-workbench.product-workbench {
    background: rgba(250, 250, 248, 0.95);
    border-color: rgba(100, 116, 112, 0.25);
    box-shadow: 0 18px 52px rgba(48, 63, 60, 0.13);
  }

  html body .cursor-cli {
    right: 16px;
    bottom: 26px;
  }
}

@media (max-width: 900px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    padding: 10px 10px 48px;
    overflow: hidden;
    border: 1px solid #d8dddc;
    background-color: #e8ebea;
    background-image:
      radial-gradient(ellipse at 8% 15%, rgba(190, 207, 203, 0.64) 0%, rgba(203, 216, 212, 0.3) 25%, transparent 54%),
      radial-gradient(ellipse at 92% 12%, rgba(226, 218, 210, 0.52) 0%, rgba(225, 220, 214, 0.18) 25%, transparent 52%),
      radial-gradient(ellipse at 50% 110%, rgba(192, 204, 206, 0.56) 0%, rgba(207, 216, 216, 0.18) 32%, transparent 60%),
      linear-gradient(132deg, #eef0ef 0%, #e4e9e7 48%, #ece9e5 100%);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 72px rgba(255, 255, 255, 0.42);
  }
}

/* Final cross-agent color lock after the historical task-board overrides. */
html body .cursor-agent.handoff-claude,
html.theme-dark body .cursor-agent.handoff-claude {
  color: #eaf1f5;
  background: #294f70;
  border-right: 0;
}

html body .cursor-agent.handoff-claude > header,
html.theme-dark body .cursor-agent.handoff-claude > header {
  color: #eaf1f5;
  background: #315c7f;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

html body .cursor-workbench .handoff-claude .cursor-agent-body::before,
html.theme-dark body .cursor-workbench .handoff-claude .cursor-agent-body::before {
  content: none;
}

/* Real-product cross-agent stage: Codex desktop thread + Claude Code terminal. */
html body .real-agent-stage,
html:not(.theme-dark) body .real-agent-stage,
html.theme-dark body .real-agent-stage {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  width: 100%;
  height: 558px;
  overflow: visible;
  color: #20201e;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .handoff-stage-label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 0 4px;
  color: #555a56;
  font-size: 10px;
}

html body .handoff-stage-label > span {
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

html body .handoff-stage-label > b {
  font-weight: 450;
}

html body .handoff-stage-label > em {
  display: flex;
  gap: 7px;
  align-items: center;
  font-style: normal;
}

html body .handoff-stage-label > em i {
  width: 7px;
  height: 7px;
  background: #238166;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(35, 129, 102, 0.12);
}

html body .real-agent-grid {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #f2f1ee;
  border: 1px solid rgba(58, 62, 58, 0.1);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  isolation: isolate;
}

html body .real-agent-grid::after {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: 42px;
  background: linear-gradient(to bottom, rgba(242, 241, 238, 0), #f2f1ee 88%);
  content: "";
  pointer-events: none;
}

html body .real-agent-grid .codex-sim,
html body .real-agent-grid .claude-sim {
  position: absolute;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

html body .real-agent-grid .codex-sim {
  z-index: 1;
  top: 32px;
  left: 3.4%;
  width: 64%;
  height: calc(100% - 50px);
  transform: translateY(7px);
}

html body .real-agent-grid .claude-sim {
  z-index: 2;
  top: 23px;
  right: 3.4%;
  width: 60%;
  height: calc(100% - 50px);
  transform: translateY(-2px);
}

html body .real-agent-stage[data-agent-focus="codex"] .codex-sim {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(40, 46, 42, 0.17);
}

html body .real-agent-stage[data-agent-focus="codex"] .claude-sim {
  transform: translateY(7px);
}

html body .real-agent-stage[data-agent-focus="claude"] .codex-sim {
  transform: translateY(7px);
}

html body .real-agent-stage[data-agent-focus="claude"] .claude-sim {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(40, 46, 42, 0.17);
}

html body .real-agent-stage[data-agent-focus="codex"] .real-handoff-link {
  translate: -5px 4px;
}

html body .real-agent-stage[data-agent-focus="claude"] .real-handoff-link {
  translate: 5px -4px;
}

@media (prefers-reduced-motion: reduce) {
  html body .real-agent-grid .codex-sim,
  html body .real-agent-grid .claude-sim,
  html body .real-handoff-link {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  html body .real-agent-grid .codex-sim {
    transform: translateY(7px);
  }

  html body .real-agent-grid .claude-sim {
    transform: translateY(-2px);
  }
}

html body .real-agent-grid {
  min-height: 0;
}

html body .sim-window {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(58, 62, 58, 0.18);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(40, 46, 42, 0.13);
}

html body .sim-window-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  font-size: 9px;
}

html body .sim-traffic {
  display: flex;
  gap: 6px;
  justify-self: start;
}

html body .sim-traffic i {
  width: 8px;
  height: 8px;
  background: #d5d5d1;
  border-radius: 50%;
}

html body .sim-window-title {
  justify-self: center;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .codex-window-actions {
  justify-self: end;
  color: #8a8a85;
}

html body .codex-sim {
  color: #262624;
  background: #f7f7f5;
}

html body .codex-window-bar {
  color: #696964;
  background: #f3f3f1;
  border-bottom: 1px solid #dcdcd8;
}

html body .codex-app-shell {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  height: calc(100% - 36px);
}

html body .codex-sidebar {
  padding: 13px 9px;
  overflow: hidden;
  color: #666662;
  background: #ecece9;
  border-right: 1px solid #d9d9d5;
}

html body .codex-brand {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 4px 18px;
  color: #20201e;
  font-size: 11px;
}

html body .codex-brand img {
  width: 17px;
  height: 17px;
  padding: 3px;
  background: #20201e;
  border-radius: 4px;
}

html body .codex-nav-label {
  display: block;
  margin: 14px 6px 6px;
  color: #9b9b96;
  font: 650 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
}

html body .codex-project,
html body .codex-thread-item {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 7px 6px;
  border-radius: 6px;
}

html body .codex-project.is-active,
html body .codex-thread-item.is-active {
  color: #2c2c29;
  background: #dcdcd7;
}

html body .codex-project > i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: #f4f4f1;
  background: #2a2a28;
  border-radius: 4px;
  font-size: 7px;
  font-style: normal;
}

html body .codex-thread-item > i {
  width: 7px;
  height: 7px;
  margin: 3px;
  background: #9d9d97;
  border-radius: 50%;
}

html body .codex-project > span,
html body .codex-thread-item > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html body .codex-project b,
html body .codex-thread-item b {
  overflow: hidden;
  font-size: 9px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .codex-project small,
html body .codex-thread-item small {
  color: #999993;
  font-size: 7px;
}

html body .codex-thread-view {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #fafaf8;
}

html body .codex-thread-view > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid #e2e2de;
}

html body .codex-thread-view > header > span {
  display: grid;
  gap: 2px;
}

html body .codex-thread-view > header b {
  font-size: 10px;
  font-weight: 580;
}

html body .codex-thread-view > header small {
  color: #92928c;
  font-size: 7px;
}

html body .codex-thread-view > header em {
  color: #397e68;
  font-size: 8px;
  font-style: normal;
}

html body .codex-thread-scroll {
  flex: 1;
  padding: 18px 19px 76px;
  overflow: hidden;
}

html body .codex-user-message {
  width: fit-content;
  max-width: 88%;
  margin-left: auto;
  padding: 9px 11px;
  color: #4d4d49;
  background: #ededE9;
  border-radius: 10px 10px 3px 10px;
  font-size: 9px;
  line-height: 1.45;
}

html body .codex-response {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  margin-top: 18px;
}

html body .codex-response-mark {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #f5f5f2;
  background: #20201e;
  border-radius: 5px;
  font-size: 9px;
}

html body .codex-response p {
  margin: 0;
  color: #484844;
  font-size: 9px;
  line-height: 1.58;
}

html body .codex-response p code,
html body .codex-answer code {
  padding: 1px 4px;
  background: #ebebe7;
  border-radius: 3px;
  font: inherit;
}

html body .codex-summary {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  background: #f0f0ec;
  border: 1px solid #deded9;
  border-left: 3px solid #272725;
  border-radius: 7px;
}

html body .codex-summary span {
  color: #898983;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html body .codex-summary strong {
  color: #262624;
  font-size: 10px;
  font-weight: 600;
}

html body .codex-summary small {
  color: #777771;
  font-size: 8px;
}

html body .codex-response pre {
  margin: 10px 0 0;
  padding: 10px 11px;
  color: #5e5e59;
  background: #f4f4f0;
  border: 1px solid #e2e2dd;
  border-radius: 7px;
  font: 8px/1.52 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

html body .codex-memory-saved {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: #3f705f;
}

html body .codex-memory-saved > i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #fff;
  background: #377b65;
  border-radius: 50%;
  font-size: 8px;
  font-style: normal;
}

html body .codex-memory-saved > span {
  display: grid;
  gap: 1px;
}

html body .codex-memory-saved b {
  font-size: 8px;
  font-weight: 600;
}

html body .codex-memory-saved small {
  color: #81817b;
  font-size: 7px;
}

html body .codex-composer {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 25px;
  align-items: center;
  min-height: 44px;
  padding: 6px 6px 6px 11px;
  color: #9a9a94;
  background: rgba(250, 250, 248, 0.96);
  border: 1px solid #d9d9d4;
  border-radius: 9px;
  box-shadow: 0 7px 18px rgba(39, 39, 36, 0.06);
  font-size: 8px;
}

html body .codex-composer button {
  width: 25px;
  height: 25px;
  color: #fff;
  background: #292927;
  border: 0;
  border-radius: 6px;
}

html body .claude-sim {
  position: relative;
  color: #dbe8ef;
  background: #214a69;
  border-color: rgba(9, 36, 56, 0.52);
}

html body .claude-tabbar {
  grid-template-columns: auto 1fr auto;
  color: #c8d9e3;
  background: #183d59;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

html body .claude-tabbar .sim-traffic i:nth-child(1) { background: #ff6b62; }
html body .claude-tabbar .sim-traffic i:nth-child(2) { background: #ffbd44; }
html body .claude-tabbar .sim-traffic i:nth-child(3) { background: #00ca4e; }

html body .claude-tab {
  justify-self: center;
  padding: 6px 18px;
  color: #edf4f7;
  background: #285473;
  border-radius: 6px 6px 0 0;
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-tab b {
  margin-left: 16px;
  color: rgba(237, 244, 247, 0.55);
  font-weight: 400;
}

html body .claude-tab-add {
  justify-self: end;
  font-size: 14px;
}

html body .claude-terminal {
  position: relative;
  height: calc(100% - 36px);
  padding: 17px 18px 67px;
  overflow: hidden;
  color: #dce9ef;
  background: #214a69;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html body .claude-startup {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

html body .claude-pixel-mark {
  color: #f39a70;
  font-size: 31px;
  line-height: 1;
}

html body .claude-startup > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  align-items: baseline;
}

html body .claude-startup b {
  color: #f6f2ea;
  font-size: 11px;
}

html body .claude-startup small,
html body .claude-startup p,
html body .claude-startup code {
  margin: 0;
  color: #a9c0ce;
  font-size: 8px;
}

html body .claude-startup p,
html body .claude-startup code {
  grid-column: 1 / -1;
}

html body .claude-terminal-rule {
  height: 1px;
  margin: 14px 0 12px;
  background: rgba(255, 255, 255, 0.2);
}

html body .claude-user-prompt {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  padding: 7px 8px;
  color: #f0f5f7;
  background: rgba(117, 101, 87, 0.55);
  border: 0;
  border-radius: 2px;
  font-size: 8px;
  line-height: 1.45;
}

html body .claude-user-prompt b {
  color: #f39a70;
}

html body .claude-harmonizing {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 12px 3px 0;
  visibility: hidden;
  color: #f19a77;
  font-size: 9px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 200ms ease;
}

html body .claude-harmonizing i {
  font-style: normal;
}

html body .cursor-workbench[data-state="searching"] .claude-harmonizing,
html body .cursor-workbench[data-state^="memory"] .claude-harmonizing {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .cursor-workbench[data-state^="memory"] .claude-harmonizing {
  color: #9fd0bf;
}

html body .claude-memory-log {
  gap: 6px;
  margin: 11px 3px 0;
  font-size: 8px;
}

html body .claude-memory-log p {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px;
}

html body .claude-memory-log p b,
html body .claude-memory-log small {
  color: #91cfb8;
  font-size: 7px;
}

html body .claude-memory-log span {
  color: #b7cbd6;
}

html body .claude-answer {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 7px;
  margin-top: 13px;
  color: #e8f0f4;
  font-size: 8px;
  line-height: 1.55;
}

html body .claude-answer > b {
  color: #f39a70;
}

html body .claude-answer code {
  padding: 1px 3px;
  color: #f2e4bc;
  background: rgba(7, 33, 51, 0.38);
  border-radius: 2px;
  font: inherit;
}

html body .claude-tool-call {
  min-height: 30px;
  margin-top: 9px;
  color: #c9d9e1;
  background: rgba(14, 51, 75, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  font-size: 8px;
}

html body .claude-tool-call > span,
html body .claude-tool-call em {
  color: #91cfb8;
}

html body .claude-finish {
  margin-top: 9px;
  color: #dbe8ee;
  font-size: 8px;
}

html body .claude-finish b {
  color: #91cfb8;
}

html body .claude-terminal-input {
  position: absolute;
  right: 12px;
  bottom: 31px;
  left: 12px;
  display: grid;
  grid-template-columns: 14px 1fr 24px;
  align-items: center;
  min-height: 38px;
  padding: 5px 6px 5px 10px;
  color: #d4e1e7;
  background: #1b405c;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  font-size: 8px;
}

html body .claude-terminal-input > span:first-child {
  color: #f39a70;
  font-size: 12px;
}

html body .claude-terminal-input button {
  width: 23px;
  height: 23px;
  color: #173a54;
  background: #dce8ed;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

html body .claude-terminal > footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  height: 23px;
  padding: 0 11px;
  color: #9fb8c6;
  background: #173d59;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 7px;
}

html body .claude-terminal > footer b {
  color: #f1a17d;
  font-weight: 600;
}

html body .claude-terminal .session-demo-live {
  right: 13px;
  bottom: 5px;
  color: transparent;
}

html body .claude-replay {
  position: absolute;
  top: 12px;
  right: 14px;
  visibility: hidden;
  padding: 5px 7px;
  color: #b7cad5;
  background: #173d59;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 3px;
  font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0;
  cursor: pointer;
  transition: opacity 180ms ease;
}

html body .cursor-workbench[data-state="answer"] .claude-replay {
  visibility: visible;
  opacity: 1;
}

html body .cursor-workbench:not([data-state="idle"]) .claude-terminal-input {
  opacity: 0.48;
  pointer-events: none;
}

html body .real-handoff-link {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 6px 8px;
  color: #5f6561;
  background: rgba(247, 248, 245, 0.96);
  border: 1px solid rgba(72, 84, 77, 0.22);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(42, 50, 45, 0.12);
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  transform: translate(-50%, -50%);
  transition: color 220ms ease, border-color 220ms ease, transform 240ms ease, translate 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .real-handoff-link i {
  font-size: 11px;
  font-style: normal;
}

html body .cursor-workbench[data-state="searching"] .real-handoff-link,
html body .cursor-workbench[data-state^="memory"] .real-handoff-link {
  color: #216e58;
  border-color: rgba(33, 110, 88, 0.46);
  transform: translate(-50%, -50%) scale(1.06);
}

html body .cursor-workbench[data-state="answer"] .real-handoff-link {
  color: #f4f8f5;
  background: #26735c;
  border-color: #26735c;
}

/* Claude Code continues the recalled task through install and health check. */
html body .cursor-workbench[data-state="installing"] .cursor-prompt,
html body .cursor-workbench[data-state="installing"] .cursor-memory-log,
html body .cursor-workbench[data-state="installing"] .claude-memory-log p,
html body .cursor-workbench[data-state="installing"] [data-install-step="install"],
html body .cursor-workbench[data-state="checking"] .cursor-prompt,
html body .cursor-workbench[data-state="checking"] .cursor-memory-log,
html body .cursor-workbench[data-state="checking"] .claude-memory-log p,
html body .cursor-workbench[data-state="checking"] .claude-tool-call {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .cursor-workbench[data-state="installing"] .claude-harmonizing,
html body .cursor-workbench[data-state="checking"] .claude-harmonizing {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .cursor-workbench[data-state="installing"] .claude-harmonizing {
  color: #b57455;
}

html body .cursor-workbench[data-state="checking"] .claude-harmonizing {
  color: #238166;
}

html body .cursor-workbench[data-state="installing"] .real-handoff-link,
html body .cursor-workbench[data-state="checking"] .real-handoff-link {
  color: #216e58;
  background: #f7fbf8;
  border-color: rgba(33, 110, 88, 0.42);
  transform: translate(-50%, -50%) scale(1.06);
}

html body .cursor-workbench:not([data-state="checking"]):not([data-state="answer"]) .claude-context-panel > :not(header) {
  visibility: hidden;
  opacity: 0;
}

html body .claude-context-panel > :not(header) {
  transition: opacity 220ms ease;
}

html body .claude-change-stat em {
  color: #238166;
}

@media (max-width: 980px) {
  html body .codex-app-shell {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  html body .codex-sidebar {
    padding-inline: 6px;
  }

  html body .real-agent-grid .codex-sim {
    left: 2.5%;
    width: 66%;
  }

  html body .real-agent-grid .claude-sim {
    right: 2.5%;
    width: 62%;
  }

  html body .real-handoff-link {
    left: 49%;
  }
}

@media (max-width: 760px) {
  html body .real-agent-stage,
  html:not(.theme-dark) body .real-agent-stage,
  html.theme-dark body .real-agent-stage {
    grid-template-rows: 36px minmax(0, 1fr);
    height: 470px;
  }

  html body .handoff-stage-label {
    grid-template-columns: 1fr auto;
    padding-inline: 2px;
  }

  html body .handoff-stage-label > b {
    display: none;
  }

  html body .real-agent-grid {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html body .codex-sim {
    display: none;
  }

  html body .real-agent-grid .claude-sim {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    transform: none;
  }

  html body .real-agent-grid::after {
    content: none;
  }

  html body .real-handoff-link {
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
  }

  html body .cursor-workbench[data-state="searching"] .real-handoff-link,
  html body .cursor-workbench[data-state^="memory"] .real-handoff-link,
  html body .cursor-workbench[data-state="answer"] .real-handoff-link {
    transform: translateX(-50%);
  }
}

/* ElevenLabs-faithful overlapping panels: mirrored masks, 12px depth and hover-to-front switching. */
html body .real-agent-grid .codex-sim,
html body .real-agent-grid .claude-sim {
  --panel-inset: clamp(16px, 2.86%, 32px);
  top: 23px;
  width: calc((100% - (var(--panel-inset) * 2)) * 0.6);
  height: calc(100% - 42px);
  color: #222220;
  background: #fff;
  border-color: rgba(31, 31, 29, 0.14);
  cursor: pointer;
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, -webkit-mask-position, mask-position;
}

html body .real-agent-grid .codex-sim {
  left: var(--panel-inset);
  -webkit-mask-image: linear-gradient(to right, #fff 77.5%, transparent 81%);
  mask-image: linear-gradient(to right, #fff 77.5%, transparent 81%);
}

html body .real-agent-grid .claude-sim {
  right: var(--panel-inset);
  -webkit-mask-image: linear-gradient(to left, #fff 77.5%, transparent 81%);
  mask-image: linear-gradient(to left, #fff 77.5%, transparent 81%);
}

html body .real-agent-stage[data-agent-focus="codex"] .codex-sim {
  z-index: 1;
  -webkit-mask-position: -150% 0;
  mask-position: -150% 0;
  transform: translateY(0);
  box-shadow: 0 18px 45px rgba(40, 46, 42, 0.13);
}

html body .real-agent-stage[data-agent-focus="codex"] .claude-sim {
  z-index: 0;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transform: translateY(12px);
  box-shadow: 0 18px 45px rgba(40, 46, 42, 0.13);
}

html body .real-agent-stage[data-agent-focus="claude"] .codex-sim {
  z-index: 0;
  -webkit-mask-position: -100% 0;
  mask-position: -100% 0;
  transform: translateY(12px);
  box-shadow: 0 18px 45px rgba(40, 46, 42, 0.13);
}

html body .real-agent-stage[data-agent-focus="claude"] .claude-sim {
  z-index: 1;
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
  transform: translateY(0);
  box-shadow: 0 18px 45px rgba(40, 46, 42, 0.13);
}

html body .real-agent-grid [data-agent-panel]:focus-visible {
  outline: 2px solid rgba(24, 24, 21, 0.72);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  html body .real-agent-grid .codex-sim,
  html body .real-agent-grid .claude-sim {
    transition: none;
  }
}

@media (max-width: 760px) {
  html body .real-agent-grid .codex-sim,
  html body .real-agent-grid .claude-sim {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

html body .codex-app-real {
  grid-template-columns: 118px minmax(0, 1fr) 126px;
  background: #fff;
}

html body .codex-app-real .codex-sidebar {
  position: relative;
  padding: 12px 8px 40px;
  color: #555551;
  background: #f4f5f5;
  border-right-color: #e2e3e3;
}

html body .codex-app-real .codex-brand {
  justify-content: space-between;
  margin: 0 4px 11px;
  font-size: 10px;
}

html body .codex-app-real .codex-brand span {
  color: #8c9294;
  font-size: 8px;
  white-space: nowrap;
}

html body .codex-primary-nav {
  display: grid;
  gap: 1px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e1e2e2;
}

html body .codex-primary-nav span {
  padding: 5px 5px;
  color: #454846;
  border-radius: 5px;
  font-size: 8px;
}

html body .codex-primary-nav span:first-child {
  background: #e8e9e9;
}

html body .codex-app-real .codex-nav-label {
  margin-top: 10px;
  color: #9a9e9c;
  font-family: inherit;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html body .codex-app-real .codex-project {
  padding-block: 6px;
}

html body .codex-app-real .codex-thread-item {
  margin-left: 8px;
  padding-block: 5px;
}

html body .codex-app-real .codex-thread-item.is-active {
  background: #e5e7e7;
}

html body .codex-account {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 19px 1fr auto;
  gap: 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #e1e2e2;
  font-size: 8px;
}

html body .codex-account i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #fff;
  background: #25ae66;
  border-radius: 50%;
  font-size: 6px;
  font-style: normal;
}

html body .codex-inspector {
  padding: 12px 10px;
  color: #666a68;
  background: #fbfbfa;
  border-left: 1px solid #e4e4e1;
  font-size: 8px;
}

html body .codex-inspector header,
html body .codex-inspector div {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 5px;
  align-items: center;
  min-height: 27px;
}

html body .codex-inspector header {
  grid-template-columns: 1fr auto;
  color: #8c8f8d;
  border-bottom: 1px solid #ececea;
}

html body .codex-inspector div b,
html body .codex-inspector header b {
  color: #343634;
  font-weight: 550;
}

html body .codex-inspector small {
  display: block;
  margin: 13px 0 5px;
  color: #9a9d9b;
}

html body .codex-inspector p {
  margin: 7px 0;
  overflow: hidden;
  color: #747875;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-tabbar {
  color: #656662;
  background: #fafaf9;
  border-bottom-color: #e4e3e0;
}

html body .claude-tab {
  padding: 0;
  color: #666763;
  background: transparent;
  font: 500 8px/1.2 system-ui, sans-serif;
}

html body .claude-tab-add {
  color: #242522;
}

html body .claude-desktop-shell {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  height: calc(100% - 36px);
  color: #262622;
  background: #fff;
}

html body .claude-sidebar {
  position: relative;
  padding: 10px 8px 38px;
  overflow: hidden;
  color: #686964;
  background: #f7f7f5;
  border-right: 1px solid #e5e4e0;
  font-size: 8px;
}

html body .claude-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: #ecebe8;
  border-radius: 7px;
}

html body .claude-mode b,
html body .claude-mode span {
  padding: 5px 6px;
  border-radius: 5px;
  font-weight: 500;
  text-align: center;
}

html body .claude-mode b {
  color: #292a27;
  background: #fff;
  box-shadow: 0 1px 3px rgba(33, 33, 31, 0.13);
}

html body .claude-sidebar nav {
  display: grid;
  gap: 1px;
  margin-top: 8px;
}

html body .claude-sidebar nav > * {
  padding: 5px 6px;
  font-weight: 450;
}

html body .claude-sidebar nav b {
  color: #282925;
  background: #eeede9;
  border-radius: 5px;
}

html body .claude-sidebar > small {
  display: block;
  margin: 17px 6px 7px;
  color: #9a9a95;
}

html body .claude-sidebar ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .claude-sidebar li {
  overflow: hidden;
  padding: 5px 7px;
  border-radius: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-sidebar li::before {
  margin-right: 6px;
  color: #b6b6b1;
  content: "○";
}

html body .claude-sidebar li.is-active {
  color: #2c2d2a;
  background: #ecebe8;
}

html body .claude-account {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #e4e3e0;
}

html body .claude-account i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #4b4c48;
  background: #e9e8e4;
  border-radius: 50%;
  font-style: normal;
}

html body .claude-home {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

html body .claude-home > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  color: #9a9993;
  font-size: 8px;
}

html body .claude-home > header u {
  color: #2c65a5;
  text-underline-offset: 2px;
}

html body .claude-welcome {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(82%, 470px);
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 320ms ease;
}

html body .claude-welcome h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  color: #1e1e1b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.035em;
}

html body .claude-welcome h2 i {
  color: #d9774f;
  font-family: system-ui, sans-serif;
  font-size: 27px;
  font-style: normal;
}

html body .claude-welcome .claude-terminal-input {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 92px;
  padding: 14px;
  color: #92928d;
  background: #fff;
  border: 1px solid #d7d6d1;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(44, 43, 38, 0.08);
  font-family: system-ui, sans-serif;
  font-size: 10px;
}

html body .claude-terminal-input p {
  margin: 0;
}

html body .claude-terminal-input footer {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  gap: 8px;
  align-items: end;
  color: #777771;
  font-size: 7px;
}

html body .claude-terminal-input footer b {
  padding: 4px 7px;
  color: #282824;
  background: #f2f1ee;
  border: 1px solid #e3e2de;
  border-radius: 5px;
}

html body .claude-terminal-input footer em {
  color: #2e2e2a;
  font-style: normal;
  white-space: nowrap;
}

html body .claude-terminal-input button {
  width: 23px;
  height: 23px;
  color: #fff;
  background: #22221f;
  border-radius: 50%;
}

html body .claude-suggestions {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 11px;
}

html body .claude-suggestions span {
  padding: 5px 7px;
  color: #565650;
  background: #fff;
  border: 1px solid #dfded9;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(40, 40, 36, 0.05);
  font-size: 7px;
}

html body .claude-session {
  position: absolute;
  top: 48px;
  right: 20px;
  bottom: 18px;
  left: 20px;
  padding: 10px 6px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 240ms ease, transform 320ms ease;
}

html body .cursor-workbench:not([data-state="idle"]) .claude-welcome {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, calc(-50% - 10px));
}

html body .cursor-workbench:not([data-state="idle"]) .claude-session {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .claude-session .claude-user-prompt {
  grid-template-columns: 1fr;
  width: fit-content;
  max-width: 82%;
  margin-left: auto;
  padding: 8px 10px;
  color: #464642;
  background: #f0efec;
  border-radius: 10px 10px 3px 10px;
  font-family: system-ui, sans-serif;
  font-size: 8px;
}

html body .claude-session .claude-harmonizing {
  color: #d9774f;
}

html body .claude-session .claude-memory-log {
  padding: 9px 10px;
  color: #55564f;
  background: #f8f8f6;
  border: 1px solid #e8e7e2;
  border-radius: 8px;
}

html body .claude-session .claude-memory-log p {
  grid-template-columns: 78px minmax(0, 1fr);
}

html body .claude-session .claude-memory-log p b,
html body .claude-session .claude-memory-log small {
  color: #238166;
}

html body .claude-session .claude-memory-log span,
html body .claude-session .claude-answer,
html body .claude-session .claude-finish {
  color: #4b4c47;
}

html body .claude-session .claude-answer > b {
  color: #d9774f;
}

html body .claude-session .claude-answer code {
  color: #44443f;
  background: #eeede9;
}

html body .claude-session .claude-tool-call {
  color: #555650;
  background: #f7f7f5;
  border-color: #e2e2dd;
}

html body .claude-home .session-demo-live {
  position: absolute;
  right: 12px;
  bottom: 5px;
  color: transparent;
  font-size: 1px;
}

html body .claude-home .claude-replay {
  top: 11px;
  right: 40px;
  color: #666761;
  background: #f6f5f2;
  border-color: #deddd8;
}

@media (max-width: 980px) {
  html body .codex-app-real {
    grid-template-columns: 104px minmax(0, 1fr) 108px;
  }

  html body .claude-desktop-shell {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  html body .real-agent-grid .claude-sim,
  html body .real-agent-stage[data-agent-focus] .claude-sim {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform: none;
  }

  html body .claude-desktop-shell {
    grid-template-columns: 1fr;
  }

  html body .claude-sidebar {
    display: none;
  }

  html body .claude-welcome {
    width: 88%;
  }
}

/* Quiet product stage: one container, no duplicate demo chrome. */
html body .hero .cursor-scene,
html.theme-dark body .hero .cursor-scene {
  width: min(1120px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 514px;
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .handoff-stage-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html body .real-agent-grid {
  width: 100%;
  height: 100%;
  background: #f3f2ef;
  border: 1px solid rgba(39, 39, 36, 0.09);
  border-radius: 28px;
  box-shadow: none;
}

html body .real-agent-grid::after {
  content: none;
}

@media (max-width: 760px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 432px;
  }

  html body .real-agent-grid {
    overflow: hidden;
    background: #f3f2ef;
    border: 1px solid rgba(39, 39, 36, 0.09);
    border-radius: 22px;
  }

  html body .real-handoff-link {
    display: none;
  }
}

/* Codex desktop fidelity: native sidebar rhythm and an explicit agent mark. */
html body .codex-app-real {
  grid-template-columns: 22% minmax(0, 58%) 20%;
}

html body .codex-app-real .codex-sidebar {
  padding: 12px 10px 42px;
  background: #f5f6f6;
}

html body .codex-app-real .codex-brand {
  min-height: 24px;
  margin: 0 5px 12px;
}

html body .codex-app-real .codex-brand > b {
  color: #3c403f;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

html body .codex-app-real .codex-brand > b i {
  color: #747a78;
  font-size: 8px;
  font-style: normal;
}

html body .codex-brand-tools {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
}

html body .codex-brand-tools svg,
html body .codex-primary-nav svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html body .codex-brand-tools svg {
  width: 14px;
  height: 14px;
}

html body .codex-brand-tools > i {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 5px;
  height: 5px;
  background: #3795f5;
  border: 1px solid #f5f6f6;
  border-radius: 50%;
}

html body .codex-primary-nav {
  gap: 2px;
  padding: 0 0 11px;
}

html body .codex-primary-nav span {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 6px 6px;
  color: #414644;
  background: transparent;
  font-size: 9px;
  font-weight: 470;
}

html body .codex-primary-nav span:first-child {
  background: transparent;
}

html body .codex-primary-nav svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

html body .codex-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 6px 19px;
  color: #9b9f9d;
  font-size: 8px;
}

html body .codex-section-label i {
  font-size: 13px;
  font-style: normal;
}

html body .codex-app-real .codex-nav-label {
  margin: 0 6px 7px;
  color: #9b9f9d;
  font-size: 8px;
}

html body .codex-app-real .codex-project,
html body .codex-app-real .codex-thread-item {
  padding-inline: 7px;
}

html body .codex-app-real .codex-project b,
html body .codex-app-real .codex-thread-item b {
  font-size: 8.5px;
}

html body .codex-response {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
}

html body img.codex-response-mark {
  display: block;
  width: 19px;
  height: 19px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border-radius: 5px;
}

html body .codex-app-real .codex-inspector {
  align-self: stretch;
  margin: 8px 8px 8px 0;
  padding: 8px 9px;
  overflow: hidden;
  color: #5f6361;
  background: #fff;
  border: 1px solid #e0e1df;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(35, 38, 36, 0.08);
  font-size: 7.5px;
}

html body .codex-app-real .codex-inspector > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 27px;
  padding: 0 1px 5px;
  color: #999c9a;
  border: 0;
}

html body .codex-app-real .codex-inspector > header b {
  color: #8b8f8d;
  font-size: 8px;
  font-weight: 560;
}

html body .codex-app-real .codex-inspector > header span {
  font-size: 13px;
  font-weight: 300;
}

html body .codex-inspector-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 25px;
  padding: 0 1px;
}

html body .codex-inspector-row svg,
html body .codex-source-more svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html body .codex-inspector-row b {
  overflow: hidden;
  color: #303330;
  font-size: 7.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .codex-inspector-row > span,
html body .codex-inspector-row > em {
  color: #8d918f;
  font-style: normal;
}

html body .codex-inspector-row.is-muted,
html body .codex-inspector-row.is-muted b {
  color: #999c9a;
}

html body .codex-inspector-rule {
  height: 1px;
  min-height: 1px;
  margin: 7px 0;
  background: #ededeb;
}

html body .codex-inspector-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 24px;
}

html body .codex-inspector-label small {
  margin: 0;
  color: #959896;
  font-size: 7.5px;
}

html body .codex-inspector-label span {
  color: #a0a3a1;
  font-size: 13px;
}

html body .codex-source,
html body .codex-source-more {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 25px;
  color: #747875;
}

html body .codex-source > span,
html body .codex-source-more > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .codex-source-thumb {
  display: block;
  width: 20px;
  height: 17px;
  background-color: #f5f5f2;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

html body .codex-source-thumb.is-a {
  background-image: linear-gradient(90deg, #e7e9e7 29%, transparent 29%), linear-gradient(#d9ddda 1px, transparent 1px);
  background-size: 100% 100%, 8px 4px;
}

html body .codex-source-thumb.is-b {
  background-image: linear-gradient(135deg, #dce5e1 0 35%, #f3eee9 35% 65%, #e8e8e4 65%);
}

html body .codex-source-thumb.is-c {
  background-image: linear-gradient(#ecebe7 35%, #d8dedb 35% 43%, #f7f6f3 43% 67%, #e1e3e0 67%);
}

html body .codex-source-more {
  color: #999c9a;
}

html body .codex-source-more svg {
  justify-self: center;
}

html body .codex-app-real .codex-inspector .codex-inspector-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 25px;
}

html body .codex-app-real .codex-inspector .codex-inspector-row b {
  color: #303330;
  font-size: 7.5px;
  font-weight: 550;
}

html body .codex-app-real .codex-inspector .codex-inspector-row.is-muted b {
  color: #999c9a;
}

html body .codex-app-real .codex-inspector .codex-inspector-rule {
  display: block;
  height: 1px;
  min-height: 1px;
  margin: 7px 0;
}

html body .codex-app-real .codex-inspector .codex-inspector-label {
  display: flex;
  min-height: 24px;
}

html body .codex-app-real .codex-inspector .codex-source,
html body .codex-app-real .codex-inspector .codex-source-more {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  min-height: 25px;
}

@media (max-width: 980px) {
  html body .codex-app-real {
    grid-template-columns: 22% minmax(0, 58%) 20%;
  }
}

/* Memory showcase v17: one calm horizontal board on desktop. */
html body .section-memories .memory-grid-lineart,
html.theme-dark body .section-memories .memory-grid-lineart {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--ui-rule);
  border: 1px solid var(--ui-rule);
  border-radius: 24px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
  height: 340px;
  min-height: 340px;
  padding: 0 24px 26px;
  background: #f5f3f1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
  background: var(--ui-card);
}

html body .section-memories .memory-grid-lineart > .memory-line-card:hover,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card:hover {
  background: color-mix(in srgb, var(--ui-card) 72%, var(--ui-page));
  border: 0;
  box-shadow: none;
  transform: none;
}

html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
  flex: 0 0 205px;
  min-height: 205px;
  margin: 0 -24px 8px;
  padding: 46px 24px 4px;
}

html body .section-memories .memory-grid-lineart > .memory-line-card h3,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card h3 {
  margin-bottom: 9px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

html body .section-memories .memory-grid-lineart > .memory-line-card > p,
html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card > p {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  html body .section-memories .memory-grid-lineart,
  html.theme-dark body .section-memories .memory-grid-lineart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  html body .section-memories .memory-grid-lineart,
  html.theme-dark body .section-memories .memory-grid-lineart {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card {
    height: 300px;
    min-height: 300px;
  }

  html body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual,
  html.theme-dark body .section-memories .memory-grid-lineart > .memory-line-card .memory-line-visual {
    flex-basis: 172px;
    min-height: 172px;
  }
}

@media (max-width: 680px) {
  html body #architecture-comparison .comparison-table,
  html.theme-dark body #architecture-comparison .comparison-table {
    min-width: 0;
  }
}

/* Comparison v2: concise copy and a calmer, less stretched proportion. */
@media (min-width: 901px) {
  html body #architecture-comparison .comparison-aligned-heading,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading,
  html body #architecture-comparison .comparison-table-wrap,
  html.theme-dark body #architecture-comparison .comparison-table-wrap {
    width: min(100%, 1180px);
    margin-inline: auto;
  }

  html body #architecture-comparison .comparison-aligned-heading,
  html.theme-dark body #architecture-comparison .comparison-aligned-heading,
  html[data-language="en"] body #architecture-comparison .comparison-aligned-heading {
    margin-bottom: 30px;
  }

  html body #architecture-comparison .comparison-table thead th:first-child {
    width: 20%;
  }

  html body #architecture-comparison .comparison-table thead th:nth-child(2),
  html body #architecture-comparison .comparison-table thead th:nth-child(3) {
    width: 40%;
  }

  html body #architecture-comparison .comparison-table th,
  html body #architecture-comparison .comparison-table td,
  html.theme-dark body #architecture-comparison .comparison-table th,
  html.theme-dark body #architecture-comparison .comparison-table td,
  html[data-language="en"] body #architecture-comparison .comparison-table th,
  html[data-language="en"] body #architecture-comparison .comparison-table td {
    height: 72px;
    padding: 14px 20px;
    vertical-align: middle;
  }

  html body #architecture-comparison .comparison-table thead th,
  html.theme-dark body #architecture-comparison .comparison-table thead th,
  html[data-language="en"] body #architecture-comparison .comparison-table thead th {
    height: 52px;
  }

  html body #architecture-comparison .comparison-table tbody th,
  html.theme-dark body #architecture-comparison .comparison-table tbody th,
  html[data-language="en"] body #architecture-comparison .comparison-table tbody th {
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
  }

  html body #architecture-comparison .comparison-table .comparison-statement,
  html.theme-dark body #architecture-comparison .comparison-table .comparison-statement,
  html[data-language="en"] body #architecture-comparison .comparison-table .comparison-statement {
    margin: 0;
    color: var(--ui-ink);
    font-size: 15px;
    font-weight: 450;
    line-height: 1.45;
  }

  html:not([data-language="en"]) body #architecture-comparison .comparison-table tbody th {
    font-weight: 600;
  }

  html:not([data-language="en"]) body #architecture-comparison .comparison-table tbody th span {
    display: inline;
    margin: 0 10px 0 0;
    font-weight: 400;
  }

  html[data-language="en"] body #architecture-comparison .comparison-table tbody th span {
    display: inline;
    margin: 0 10px 0 0;
  }

  html:not([data-language="en"]) body #architecture-comparison .comparison-table .comparison-statement {
    font-weight: 400;
  }
}

/* ElevenLabs-inspired type hierarchy for the comparison section. */
html body #architecture-comparison .comparison-aligned-heading h2,
html.theme-dark body #architecture-comparison .comparison-aligned-heading h2,
html[data-language="en"] body #architecture-comparison .comparison-aligned-heading h2 {
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: normal;
}

html body #architecture-comparison .comparison-table,
html.theme-dark body #architecture-comparison .comparison-table,
html[data-language="en"] body #architecture-comparison .comparison-table {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

html body #architecture-comparison .comparison-table thead th,
html.theme-dark body #architecture-comparison .comparison-table thead th,
html[data-language="en"] body #architecture-comparison .comparison-table thead th {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.01em;
}

html body #architecture-comparison .comparison-table tbody th,
html.theme-dark body #architecture-comparison .comparison-table tbody th,
html[data-language="en"] body #architecture-comparison .comparison-table tbody th {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.01em;
}

html body #architecture-comparison .comparison-table tbody th span,
html.theme-dark body #architecture-comparison .comparison-table tbody th span,
html[data-language="en"] body #architecture-comparison .comparison-table tbody th span {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.04em;
}

html body #architecture-comparison .comparison-table td strong,
html.theme-dark body #architecture-comparison .comparison-table td strong,
html[data-language="en"] body #architecture-comparison .comparison-table td strong {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
}

html body #architecture-comparison .comparison-table td p,
html.theme-dark body #architecture-comparison .comparison-table td p,
html[data-language="en"] body #architecture-comparison .comparison-table td p {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.01em;
}

/* Comparison v3: an editorial path comparison instead of a boxed data grid. */
@media (min-width: 901px) {
  html body #architecture-comparison .comparison-table-wrap,
  html.theme-dark body #architecture-comparison .comparison-table-wrap {
    overflow: hidden;
    background: #f5f3f1;
    border: 1px solid #e4e0dc;
    border-radius: 24px;
    box-shadow: none;
  }

  html.theme-dark body #architecture-comparison .comparison-table-wrap {
    background: var(--ui-card);
    border-color: var(--ui-rule);
  }

  html body #architecture-comparison .comparison-table,
  html.theme-dark body #architecture-comparison .comparison-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  html body #architecture-comparison .comparison-table th,
  html body #architecture-comparison .comparison-table td,
  html.theme-dark body #architecture-comparison .comparison-table th,
  html.theme-dark body #architecture-comparison .comparison-table td {
    padding-inline: 28px;
    background: transparent;
    border-right: 0;
    border-bottom: 1px solid var(--ui-rule);
  }

  html body #architecture-comparison .comparison-table tr:last-child > *,
  html.theme-dark body #architecture-comparison .comparison-table tr:last-child > * {
    border-bottom: 0;
  }

  html body #architecture-comparison .comparison-table thead th,
  html.theme-dark body #architecture-comparison .comparison-table thead th,
  html[data-language="en"] body #architecture-comparison .comparison-table thead th {
    height: 56px;
    color: var(--ui-muted);
    background: transparent;
    font-size: 14px;
    font-weight: 400;
  }

  html body #architecture-comparison .comparison-table thead th:first-child {
    width: 20%;
  }

  html body #architecture-comparison .comparison-table thead th:nth-child(2) {
    width: 35%;
  }

  html body #architecture-comparison .comparison-table thead th:nth-child(3) {
    position: relative;
    width: 45%;
    padding-left: 48px;
    color: var(--ui-ink);
  }

  html body #architecture-comparison .comparison-table thead th:nth-child(3)::before,
  html.theme-dark body #architecture-comparison .comparison-table thead th:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 28px;
    width: 7px;
    height: 7px;
    background: #5f9d8f;
    border-radius: 50%;
    transform: translateY(-50%);
  }

  html body #architecture-comparison .comparison-table tbody th,
  html body #architecture-comparison .comparison-table tbody td,
  html.theme-dark body #architecture-comparison .comparison-table tbody th,
  html.theme-dark body #architecture-comparison .comparison-table tbody td,
  html[data-language="en"] body #architecture-comparison .comparison-table tbody th,
  html[data-language="en"] body #architecture-comparison .comparison-table tbody td {
    height: 82px;
  }

  html body #architecture-comparison .comparison-table tbody td:nth-child(2),
  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(2) {
    padding-right: 48px;
  }

  html body #architecture-comparison .comparison-table tbody td:nth-child(3),
  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(3) {
    position: relative;
    padding-left: 48px;
  }

  html body #architecture-comparison .comparison-table tbody td:nth-child(3)::before,
  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(3)::before {
    content: "\2192";
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--ui-muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-50%);
  }

  html body #architecture-comparison .comparison-table tbody td:nth-child(2) .comparison-statement,
  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(2) .comparison-statement {
    color: #77736e;
  }

  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(2) .comparison-statement {
    color: var(--ui-muted);
  }

  html body #architecture-comparison .comparison-table tbody td:nth-child(3) .comparison-statement,
  html.theme-dark body #architecture-comparison .comparison-table tbody td:nth-child(3) .comparison-statement {
    color: var(--ui-ink);
  }
}

/* ElevenLabs-aligned hero stage: one shared grid from copy to product. */
@media (min-width: 901px) {
  html body .hero,
  html.theme-dark body .hero {
    padding-top: 112px;
  }

  html body .hero .hero-layout,
  html.theme-dark body .hero .hero-layout {
    width: min(1152px, calc(100vw - 64px));
    gap: 36px;
  }

  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    width: 100%;
    max-width: none;
    min-height: 620px;
    margin: 0;
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 558px;
  }
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
  overflow: hidden;
  background: #f4f3f0;
  border: 1px solid rgba(31, 31, 29, 0.1);
  border-radius: 24px;
}

html body .hero .handoff-stage-label,
html.theme-dark body .hero .handoff-stage-label {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: auto;
  height: 64px;
  padding: 7px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: #5f5f5a;
  white-space: normal;
}

html body .hero .handoff-stage-label > span,
html body .hero .handoff-stage-label > b,
html body .hero .handoff-stage-label > em {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 17px;
  box-shadow: none;
  font: 450 15px/1.2 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.015em;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html body .hero .handoff-stage-label > span i,
html body .hero .handoff-stage-label > b i,
html body .hero .handoff-stage-label > em i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #b8bab5;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-style: normal;
}

html body .hero .handoff-stage-label > span i {
  background: #232521;
}

html body .hero .handoff-stage-label > b i {
  background: #2d8a6b;
}

html body .hero .handoff-stage-label > em i {
  background: #d9774f;
}

html body .real-agent-stage[data-agent-focus="codex"] .handoff-stage-label > span,
html body .real-agent-stage[data-agent-focus="claude"] .handoff-stage-label > em {
  color: #20201d;
  background: #fff;
  border-color: rgba(31, 31, 29, 0.12);
  box-shadow: 0 2px 5px rgba(31, 31, 29, 0.08);
}

html body .hero .real-agent-grid,
html.theme-dark body .hero .real-agent-grid {
  position: absolute;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  background: #f4f3f0;
  border: 0;
  border-top: 1px solid rgba(31, 31, 29, 0.08);
  border-radius: 0 0 24px 24px;
}

html body .hero .real-agent-grid .codex-sim,
html body .hero .real-agent-grid .claude-sim {
  top: 15px;
  height: calc(100% - 28px);
}

@media (max-width: 900px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    overflow: hidden;
    background: #f4f3f0;
    border: 1px solid rgba(31, 31, 29, 0.1);
    border-radius: 20px;
  }

  html body .hero .handoff-stage-label,
  html.theme-dark body .hero .handoff-stage-label {
    height: 54px;
    gap: 4px;
    padding: 6px;
  }

  html body .hero .handoff-stage-label > span,
  html body .hero .handoff-stage-label > b,
  html body .hero .handoff-stage-label > em {
    display: flex;
    gap: 6px;
    padding-inline: 7px;
    border-radius: 14px;
    font-size: 11px;
  }

  html body .hero .real-agent-grid,
  html.theme-dark body .hero .real-agent-grid {
    position: absolute;
    top: 54px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    background: #f4f3f0;
    border: 0;
    border-top: 1px solid rgba(31, 31, 29, 0.08);
    border-radius: 0 0 20px 20px;
  }
}

/* Header alignment: ElevenLabs grid with the existing MemoraX typography and controls. */
@media (min-width: 901px) {
  :root {
    --header-height: 64px;
  }

  html body .site-header,
  html.theme-dark body .site-header {
    position: relative;
    top: auto;
    height: 64px;
    background: var(--ui-page);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  html body .header-inner,
  html.theme-dark body .header-inner {
    width: calc(100vw - 80px);
    height: 64px;
    display: flex;
    gap: 28px;
    align-items: center;
  }

  html body .header-logo,
  html.theme-dark body .header-logo {
    width: 145px;
    height: 19px;
  }

  html body .desktop-nav,
  html.theme-dark body .desktop-nav,
  html[data-language="en"] body .desktop-nav {
    display: flex;
    gap: 0;
    align-items: center;
    justify-self: auto;
    margin-right: auto;
    color: var(--ui-ink);
  }

  html body .desktop-nav a,
  html.theme-dark body .desktop-nav a,
  html[data-language="en"] body .desktop-nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    transition: color 160ms ease, background-color 160ms ease;
  }

  html body .desktop-nav a:hover,
  html.theme-dark body .desktop-nav a:hover,
  html body .desktop-nav a[aria-current="location"],
  html.theme-dark body .desktop-nav a[aria-current="location"] {
    color: var(--ui-ink);
    background: color-mix(in srgb, var(--ui-ink) 6%, transparent);
    font-weight: 400;
  }

  html body .desktop-nav a::after,
  html.theme-dark body .desktop-nav a::after,
  html body .reading-progress,
  html.theme-dark body .reading-progress {
    display: none;
  }

  html body .header-actions,
  html.theme-dark body .header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  html body .theme-toggle,
  html.theme-dark body .theme-toggle {
    width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 9999px;
  }

  html body .language-toggle,
  html.theme-dark body .language-toggle {
    min-width: 84px;
    min-height: 36px;
    padding: 0 14px;
    gap: 6px;
    border: 0;
    border-radius: 9999px;
    font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
  }

  html body .header-cta,
  html.theme-dark body .header-cta,
  html[data-language="en"] body .header-cta {
    min-height: 36px;
    display: inline-flex;
    padding: 0 14px;
    gap: 6px;
    border: 0;
    border-radius: 9999px;
    box-shadow: none;
    font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: normal;
  }

  html:not(.theme-dark) body .theme-toggle,
  html:not(.theme-dark) body .language-toggle {
    color: #000;
    background: #fff;
    box-shadow:
      0 0 1px rgba(0, 0, 0, 0.4),
      0 1px 1px rgba(0, 0, 0, 0.04),
      0 2px 4px rgba(0, 0, 0, 0.04);
  }

  html:not(.theme-dark) body .theme-toggle:hover,
  html:not(.theme-dark) body .language-toggle:hover {
    color: #000;
    background: #fff;
    border: 0;
    box-shadow:
      0 0 1px rgba(0, 0, 0, 0.4),
      0 1px 1px rgba(0, 0, 0, 0.04),
      0 2px 4px rgba(0, 0, 0, 0.04);
    transform: none;
  }

  html:not(.theme-dark) body .language-toggle:not(.is-en) [data-language-option="zh"],
  html:not(.theme-dark) body .language-toggle.is-en [data-language-option="en"] {
    color: #000;
    background: transparent;
    box-shadow: none;
    font-weight: 500;
  }

  html:not(.theme-dark) body .language-toggle [data-language-option] {
    color: rgba(0, 0, 0, 0.42);
  }

  html:not(.theme-dark) body .language-toggle:not(.is-en) [data-language-option="zh"],
  html:not(.theme-dark) body .language-toggle.is-en [data-language-option="en"] {
    color: #000;
  }

  html:not(.theme-dark) body .header-cta,
  html:not(.theme-dark) body .header-cta:hover {
    color: #fff;
    background: #000;
    border: 0;
    box-shadow: none;
  }
}

html body .hero .hero-actions .button,
html.theme-dark body .hero .hero-actions .button {
  min-height: 44px;
  padding: 0 20px;
  gap: 8px;
  border-radius: 999px;
  font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.01em;
}

html:not(.theme-dark) body .hero .hero-actions .button-primary,
html:not(.theme-dark) body .hero .hero-actions .button-primary:hover {
  color: #fff;
  background: #000;
  border: 0;
  box-shadow: none;
  transform: none;
}

html:not(.theme-dark) body .hero .hero-actions .button-secondary,
html:not(.theme-dark) body .hero .hero-actions .button-secondary:hover {
  color: #000;
  background: #fff;
  border: 0;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04);
  transform: none;
}

html body .hero .showcase-tabs .showcase-tab,
html.theme-dark body .hero .showcase-tabs .showcase-tab {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}

html:not(.theme-dark) body .hero .showcase-tabs .showcase-tab[aria-selected="true"] {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

html:not(.theme-dark) body .hero .showcase-tabs .showcase-tab[aria-selected="true"]::before,
html:not(.theme-dark) body .hero .showcase-tabs .showcase-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
}

html:not(.theme-dark) body .hero .showcase-tabs .showcase-tab[aria-selected="true"]::before {
  z-index: -2;
  top: 2px;
  right: 3px;
  bottom: 2px;
  left: 2px;
  background: #ebe8e4;
}

html:not(.theme-dark) body .hero .showcase-tabs .showcase-tab[aria-selected="true"]::after {
  z-index: -1;
  inset: 0 1px 0 0;
  background: #fff;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

/* The workbench currently demonstrates one agent handoff, so describe the
   interaction directly instead of presenting unavailable scenario tabs. */
html body .hero .handoff-stage-label.showcase-summarybar,
html.theme-dark body .hero .handoff-stage-label.showcase-summarybar {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

html body .hero .showcase-summarybar > p,
html.theme-dark body .hero .showcase-summarybar > p {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  color: #716d67;
  font: 400 13px/18px Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.006em;
  text-align: center;
}

html body .hero .showcase-summarybar > p > i,
html.theme-dark body .hero .showcase-summarybar > p > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0 8%, transparent 24%),
    radial-gradient(circle at 72% 70%, #f16e42 0 16%, transparent 46%),
    conic-gradient(from 210deg, #7a5bd6, #f4a83e, #f36d52, #7a5bd6);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(31, 31, 29, 0.12), 0 0 0 0.5px rgba(255, 255, 255, 0.7);
}

html.theme-dark body .hero .showcase-summarybar > p {
  color: #a29e96;
}

@media (max-width: 520px) {
  html body .hero .handoff-stage-label.showcase-summarybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar {
    padding-inline: 12px;
  }

  html body .hero .showcase-summarybar > p,
  html.theme-dark body .hero .showcase-summarybar > p {
    gap: 6px;
    font-size: 11px;
    line-height: 16px;
  }
}

@media (min-width: 901px) {
  html body .hero .hero-copy-compact,
  html.theme-dark body .hero .hero-copy-compact,
  html[data-language="en"] body .hero .hero-copy-compact {
    row-gap: 0;
  }

  html body .hero .hero-copy-compact .hero-intro,
  html.theme-dark body .hero .hero-copy-compact .hero-intro,
  html[data-language="en"] body .hero .hero-copy-compact .hero-intro {
    display: contents;
  }

  html body .hero .hero-copy-compact h1.hero-slogan,
  html.theme-dark body .hero .hero-copy-compact h1.hero-slogan,
  html[data-language="en"] body .hero h1.hero-slogan {
    font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 52px;
    letter-spacing: -0.02em;
    grid-column: 1;
    grid-row: 1;
  }

  html body .hero .hero-copy-compact .hero-lede,
  html.theme-dark body .hero .hero-copy-compact .hero-lede,
  html[data-language="en"] body .hero .hero-copy-compact .hero-lede {
    font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.01em;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  html body .hero .hero-copy-compact .hero-actions,
  html.theme-dark body .hero .hero-copy-compact .hero-actions,
  html[data-language="en"] body .hero .hero-copy-compact .hero-actions {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (min-width: 1280px) {
  html body .header-inner,
  html.theme-dark body .header-inner {
    width: calc(min(100vw, 1304px) - 128px);
    gap: 36px;
  }
}

@media (min-width: 901px) and (max-width: 940px) {
  html body .header-cta,
  html.theme-dark body .header-cta {
    display: none;
  }
}

/* Editorial section alignment v21 -----------------------------------------
 * Cases and Quick start now use the same split-heading and shared-surface
 * language as Architecture: one calm plane, fine rules, restrained accents.
 */
html body #cases .cases-split-heading,
html.theme-dark body #cases .cases-split-heading,
html[data-language="en"] body #cases .cases-split-heading,
html body #quickstart .quickstart-heading,
html.theme-dark body #quickstart .quickstart-heading,
html[data-language="en"] body #quickstart .quickstart-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 56px);
  row-gap: clamp(28px, 3vw, 38px);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(48px, 5vw, 68px);
  text-align: left;
}

html body #cases .cases-split-heading .section-index,
html.theme-dark body #cases .cases-split-heading .section-index,
html[data-language="en"] body #cases .cases-split-heading .section-index,
html body #quickstart .quickstart-heading .section-index,
html.theme-dark body #quickstart .quickstart-heading .section-index,
html[data-language="en"] body #quickstart .quickstart-heading .section-index {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  width: auto;
  max-width: none;
  margin: 0;
  color: var(--ui-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

html body #cases .cases-split-heading h2,
html.theme-dark body #cases .cases-split-heading h2,
html[data-language="en"] body #cases .cases-split-heading h2,
html body #quickstart .quickstart-heading h2,
html.theme-dark body #quickstart .quickstart-heading h2,
html[data-language="en"] body #quickstart .quickstart-heading h2 {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 520px;
  margin: 0;
  color: var(--ui-ink);
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: normal;
  text-align: left;
  text-wrap: balance;
}

html body #cases .cases-heading-copy,
html.theme-dark body #cases .cases-heading-copy,
html[data-language="en"] body #cases .cases-heading-copy,
html body #quickstart .quickstart-heading > p:last-child,
html.theme-dark body #quickstart .quickstart-heading > p:last-child,
html[data-language="en"] body #quickstart .quickstart-heading > p:last-child {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: 503px;
  margin: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
  text-align: left;
}

/* Cases: a single comparison surface instead of three floating cards. */
html body #cases .case-grid,
html.theme-dark body #cases .case-grid,
html[data-language="en"] body #cases .case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--ui-rule);
  border: 1px solid var(--ui-rule);
  border-radius: 24px;
}

html body #cases .case-slide,
html.theme-dark body #cases .case-slide,
html[data-language="en"] body #cases .case-slide {
  min-height: 300px;
  padding: 26px 24px 22px;
  color: var(--ui-copy);
  background: #f5f3f1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html body #cases .case-slide::before,
html body #cases .case-slide::after,
html.theme-dark body #cases .case-slide::before,
html.theme-dark body #cases .case-slide::after {
  content: none;
  display: none;
}

html.theme-dark body #cases .case-slide {
  background: var(--ui-card);
}

html body #cases .case-slide:hover,
html body #cases .case-slide:focus-visible,
html body #cases .case-slide.is-active,
html.theme-dark body #cases .case-slide:hover,
html.theme-dark body #cases .case-slide:focus-visible,
html.theme-dark body #cases .case-slide.is-active {
  color: var(--ui-copy);
  background: color-mix(in srgb, var(--ui-card) 72%, var(--ui-page));
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

html body #cases .case-slide:focus-visible,
html.theme-dark body #cases .case-slide:focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: -3px;
}

html body #cases .case-slide-type,
html.theme-dark body #cases .case-slide-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

html body #cases .case-slide > strong,
html.theme-dark body #cases .case-slide > strong,
html[data-language="en"] body #cases .case-slide > strong {
  margin-top: auto;
  font-size: clamp(20px, 1.55vw, 23px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

html body #cases .case-slide-open,
html.theme-dark body #cases .case-slide-open,
html[data-language="en"] body #cases .case-slide-open {
  margin-top: 24px;
  padding-top: 17px;
  border-top-color: var(--ui-rule);
  font-size: 12px;
}

/* Quick start: one joined work surface with quiet tab and step divisions. */
html body #quickstart .quickstart-tabs,
html.theme-dark body #quickstart .quickstart-tabs,
html[data-language="en"] body #quickstart .quickstart-tabs {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-rule);
  border: 1px solid var(--ui-rule);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}

html body #quickstart .quickstart-tab,
html.theme-dark body #quickstart .quickstart-tab,
html[data-language="en"] body #quickstart .quickstart-tab {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 86px;
  padding: 18px 24px;
  color: var(--ui-muted);
  background: #f5f3f1;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px transparent;
  transform: none;
}

html.theme-dark body #quickstart .quickstart-tab {
  background: var(--ui-card);
}

html body #quickstart .quickstart-tab:hover,
html.theme-dark body #quickstart .quickstart-tab:hover {
  color: var(--ui-ink);
  background: color-mix(in srgb, var(--ui-card) 72%, var(--ui-page));
}

html body #quickstart .quickstart-tab.is-active,
html.theme-dark body #quickstart .quickstart-tab.is-active {
  color: var(--ui-ink);
  background: var(--ui-page);
  border: 0;
  box-shadow: inset 0 -2px var(--ui-ink);
}

html body #quickstart .quickstart-tab:focus-visible,
html.theme-dark body #quickstart .quickstart-tab:focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: -3px;
}

html body #quickstart .quickstart-tab > span:first-child,
html.theme-dark body #quickstart .quickstart-tab > span:first-child {
  width: auto;
  height: auto;
  display: block;
  place-items: initial;
  color: var(--ui-muted);
  background: transparent;
  border-radius: 0;
  font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #quickstart .quickstart-tab strong,
html.theme-dark body #quickstart .quickstart-tab strong {
  font-size: 16px;
  font-weight: 500;
}

html body #quickstart .quickstart-tab small,
html.theme-dark body #quickstart .quickstart-tab small {
  font-size: 12px;
  font-weight: 400;
}

html body #quickstart .quickstart-panel,
html.theme-dark body #quickstart .quickstart-panel {
  padding: 0 32px 32px;
  background: #f5f3f1;
  border: 1px solid var(--ui-rule);
  border-top: 0;
  border-radius: 0 0 24px 24px;
}

html.theme-dark body #quickstart .quickstart-panel {
  background: var(--ui-card);
}

html body #quickstart .quickstart-panel-intro,
html.theme-dark body #quickstart .quickstart-panel-intro,
html[data-language="en"] body #quickstart .quickstart-panel-intro {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: 28px;
  margin: 0 0 28px;
  padding: 34px 0 28px;
  border-bottom: 1px solid var(--ui-rule);
}

html body #quickstart .quickstart-panel-intro > span,
html.theme-dark body #quickstart .quickstart-panel-intro > span {
  padding-top: 4px;
  color: var(--ui-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-panel-intro h3,
html.theme-dark body #quickstart .quickstart-panel-intro h3 {
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

html body #quickstart .quickstart-install-journey,
html.theme-dark body #quickstart .quickstart-install-journey {
  width: 100%;
  max-width: none;
  gap: 1px;
  overflow: hidden;
  background: var(--ui-rule);
  border: 1px solid var(--ui-rule);
  border-radius: 20px;
}

html body #quickstart .quickstart-install-panel .start-step,
html body #quickstart .quickstart-install-panel .start-step:nth-child(2),
html body #quickstart .quickstart-install-panel .start-step:last-child,
html.theme-dark body #quickstart .quickstart-install-panel .start-step {
  min-height: 286px;
  padding: 28px;
  background: var(--ui-page);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #quickstart .quickstart-install-panel .start-step-head > span,
html.theme-dark body #quickstart .quickstart-install-panel .start-step-head > span {
  width: auto;
  height: auto;
  padding: 0;
  color: var(--ui-ink);
  background: transparent;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
}

html body #quickstart .quickstart-install-panel .start-step h3,
html.theme-dark body #quickstart .quickstart-install-panel .start-step h3,
html[data-language="en"] body #quickstart .quickstart-install-panel .start-step h3 {
  margin: 34px 0 12px;
  font-size: clamp(22px, 1.75vw, 25px);
  font-weight: 400;
}

html body #quickstart .quickstart-install-panel .start-inline-action,
html.theme-dark body #quickstart .quickstart-install-panel .start-inline-action {
  min-height: 46px;
  color: var(--ui-page);
  background: var(--ui-ink);
  border-color: var(--ui-ink);
  border-radius: 999px;
  font-weight: 500;
}

html body #quickstart .quickstart-install-footer,
html.theme-dark body #quickstart .quickstart-install-footer {
  width: 100%;
  max-width: none;
  margin-top: 18px;
  padding: 0;
}

html body #quickstart .quickstart-guide,
html.theme-dark body #quickstart .quickstart-guide {
  padding-top: 32px;
}

html body #quickstart .quickstart-step-heading > span,
html.theme-dark body #quickstart .quickstart-step-heading > span {
  width: auto;
  height: auto;
  display: block;
  padding: 4px 0 0;
  color: var(--ui-muted);
  background: transparent;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-step-heading h3,
html.theme-dark body #quickstart .quickstart-step-heading h3 {
  font-size: clamp(22px, 1.75vw, 25px);
  font-weight: 400;
  letter-spacing: -0.03em;
}

html body #quickstart .quickstart-step,
html.theme-dark body #quickstart .quickstart-step {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

html body #quickstart .quickstart-step + .quickstart-step,
html.theme-dark body #quickstart .quickstart-step + .quickstart-step {
  margin-top: 38px;
  padding-top: 38px;
  border-top: 1px solid var(--ui-rule);
}

html body #quickstart .quickstart-prepare,
html.theme-dark body #quickstart .quickstart-prepare,
html body #quickstart .quickstart-chat,
html.theme-dark body #quickstart .quickstart-chat {
  border: 1px solid var(--ui-rule);
  border-radius: 18px;
  box-shadow: none;
}

html body #quickstart .quickstart-command-row code,
html.theme-dark body #quickstart .quickstart-command-row code {
  color: var(--ui-ink);
  background: var(--ui-card-strong);
  border: 1px solid var(--ui-rule);
}

@media (max-width: 820px) {
  html body #cases .cases-split-heading,
  html.theme-dark body #cases .cases-split-heading,
  html[data-language="en"] body #cases .cases-split-heading,
  html body #quickstart .quickstart-heading,
  html.theme-dark body #quickstart .quickstart-heading,
  html[data-language="en"] body #quickstart .quickstart-heading {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 42px;
  }

  html body #cases .cases-split-heading h2,
  html.theme-dark body #cases .cases-split-heading h2,
  html[data-language="en"] body #cases .cases-split-heading h2,
  html body #quickstart .quickstart-heading h2,
  html.theme-dark body #quickstart .quickstart-heading h2,
  html[data-language="en"] body #quickstart .quickstart-heading h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    font-size: clamp(32px, 9vw, 36px);
    line-height: 1.17;
  }

  html body #cases .cases-heading-copy,
  html.theme-dark body #cases .cases-heading-copy,
  html[data-language="en"] body #cases .cases-heading-copy,
  html body #quickstart .quickstart-heading > p:last-child,
  html.theme-dark body #quickstart .quickstart-heading > p:last-child,
  html[data-language="en"] body #quickstart .quickstart-heading > p:last-child {
    grid-column: 1;
    grid-row: 3;
    max-width: 640px;
  }

  html body #cases .case-grid,
  html.theme-dark body #cases .case-grid,
  html[data-language="en"] body #cases .case-grid {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  html body #cases .case-slide,
  html.theme-dark body #cases .case-slide,
  html[data-language="en"] body #cases .case-slide {
    min-height: 250px;
  }
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-tabs,
  html.theme-dark body #quickstart .quickstart-tabs,
  html[data-language="en"] body #quickstart .quickstart-tabs {
    grid-template-columns: 1fr;
    border-radius: 18px 18px 0 0;
  }

  html body #quickstart .quickstart-tab,
  html.theme-dark body #quickstart .quickstart-tab,
  html[data-language="en"] body #quickstart .quickstart-tab {
    min-height: 76px;
    padding: 15px 18px;
  }

  html body #quickstart .quickstart-panel,
  html.theme-dark body #quickstart .quickstart-panel {
    padding: 0 16px 18px;
    border-radius: 0 0 18px 18px;
  }

  html body #quickstart .quickstart-panel-intro,
  html.theme-dark body #quickstart .quickstart-panel-intro,
  html[data-language="en"] body #quickstart .quickstart-panel-intro {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 26px 0 22px;
  }

  html body #quickstart .quickstart-install-journey,
  html.theme-dark body #quickstart .quickstart-install-journey {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  html body #quickstart .quickstart-install-panel .start-step,
  html body #quickstart .quickstart-install-panel .start-step:nth-child(2),
  html body #quickstart .quickstart-install-panel .start-step:last-child,
  html.theme-dark body #quickstart .quickstart-install-panel .start-step {
    min-height: 0;
    padding: 22px;
  }
}

/* Codex Desktop fidelity — derived from the installed app's public CSS tokens. */
html body .codex-sim {
  --codex-ink: #1a1c1f;
  --codex-secondary: rgba(26, 28, 31, 0.7);
  --codex-tertiary: rgba(26, 28, 31, 0.5);
  --codex-border: rgba(26, 28, 31, 0.08);
  --codex-border-light: rgba(26, 28, 31, 0.05);
  --codex-border-heavy: rgba(26, 28, 31, 0.12);
  color: var(--codex-ink);
  background: #fff;
  border-color: var(--codex-border-heavy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  font-weight: 445;
}

html body .codex-window-bar {
  height: 32px;
  padding-inline: 11px;
  color: var(--codex-tertiary);
  background: #f9f9f9;
  border-bottom-color: var(--codex-border-light);
  font-size: 7px;
}

html body .codex-window-bar .sim-traffic {
  gap: 5px;
}

html body .codex-window-bar .sim-traffic i {
  width: 7px;
  height: 7px;
  background: #d8d8d8;
}

html body .codex-window-bar .sim-window-title {
  color: var(--codex-secondary);
  font-weight: 445;
}

html body .codex-window-actions {
  color: var(--codex-tertiary);
  font-size: 6.5px;
}

html body .codex-app-real {
  grid-template-columns: 20% minmax(0, 63%) 17%;
  height: calc(100% - 32px);
  background: #fff;
}

html body .codex-app-real .codex-sidebar {
  padding: 10px 8px 34px;
  color: var(--codex-secondary);
  background: rgba(237, 237, 237, 0.58);
  border-right-color: var(--codex-border-light);
}

html body .codex-app-real .codex-brand {
  min-height: 22px;
  margin: 0 4px 9px;
  color: var(--codex-ink);
  font-size: 8px;
}

html body .codex-app-real .codex-brand > b {
  font-weight: 560;
}

html body .codex-brand-tools {
  gap: 7px;
}

html body .codex-brand-tools svg {
  width: 11px;
  height: 11px;
  color: var(--codex-tertiary);
  stroke-width: 1.7;
}

html body .codex-app-real .codex-primary-nav {
  display: grid;
  gap: 1px;
  padding: 0;
}

html body .codex-app-real .codex-primary-nav > span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  padding: 4px 6px;
  color: var(--codex-secondary);
  border-radius: 8px;
  font-size: 7px;
  font-weight: 445;
}

html body .codex-app-real .codex-primary-nav svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke-width: 1.7;
}

html body .codex-app-real .codex-section-label,
html body .codex-app-real .codex-nav-label {
  margin: 12px 6px 5px;
  color: var(--codex-tertiary);
  font-family: inherit;
  font-size: 6px;
  font-weight: 445;
  letter-spacing: 0;
  text-transform: none;
}

html body .codex-app-real .codex-project,
html body .codex-app-real .codex-thread-item {
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 5px;
  min-height: 0;
  padding: 5px 6px;
  border-radius: 8px;
}

html body .codex-app-real .codex-thread-item.is-active {
  color: var(--codex-ink);
  background: rgba(26, 28, 31, 0.055);
}

html body .codex-app-real .codex-project > i {
  width: 12px;
  height: 12px;
  background: #303030;
  border-radius: 4px;
  font-size: 5px;
}

html body .codex-app-real .codex-thread-item > i {
  width: 5px;
  height: 5px;
  margin: 3px 4px;
  background: rgba(26, 28, 31, 0.4);
}

html body .codex-app-real .codex-project b,
html body .codex-app-real .codex-thread-item b {
  color: inherit;
  font-size: 6.5px;
  font-weight: 500;
}

html body .codex-app-real .codex-project small,
html body .codex-app-real .codex-thread-item small {
  color: var(--codex-tertiary);
  font-size: 5.5px;
}

html body .codex-app-real .codex-account {
  right: 8px;
  bottom: 7px;
  left: 8px;
  color: var(--codex-secondary);
  border-top-color: var(--codex-border-light);
  font-size: 6.5px;
}

html body .codex-app-real .codex-account > i {
  width: 18px;
  height: 18px;
  background: #16a765;
  font-size: 5px;
}

html body .codex-thread-view {
  color: var(--codex-ink);
  background: #fff;
}

html body .codex-thread-view > header {
  height: 39px;
  padding: 0 12px;
  border-bottom-color: var(--codex-border-light);
}

html body .codex-thread-view > header b {
  color: var(--codex-ink);
  font-size: 7.5px;
  font-weight: 560;
}

html body .codex-thread-view > header small,
html body .codex-thread-view > header em {
  color: var(--codex-tertiary);
  font-size: 5.5px;
}

html body .codex-thread-scroll {
  width: min(100%, 490px);
  margin-inline: auto;
  padding: 14px 15px 66px;
}

html body .codex-user-message {
  max-width: 82%;
  padding: 8px 10px;
  color: var(--codex-secondary);
  background: rgba(26, 28, 31, 0.05);
  border-radius: 12px;
  font-size: 7px;
  line-height: 1.45;
}

html body .codex-response {
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  margin-top: 15px;
}

html body .codex-response-mark {
  width: 16px;
  height: 16px;
  padding: 3px;
  background: #303030;
  border-radius: 5px;
}

html body .codex-response p {
  color: var(--codex-secondary);
  font-size: 7px;
  line-height: 1.52;
}

html body .codex-response p code,
html body .codex-answer code {
  padding: 1px 3px;
  color: var(--codex-ink);
  background: rgba(26, 28, 31, 0.05);
  border-radius: 4px;
}

html body .codex-summary {
  gap: 3px;
  margin-top: 10px;
  padding: 9px 10px;
  background: rgba(237, 237, 237, 0.42);
  border: 0;
  border-radius: 10px;
}

html body .codex-summary span {
  color: var(--codex-tertiary);
  font-size: 5px;
  font-weight: 500;
  letter-spacing: 0;
}

html body .codex-summary strong {
  color: var(--codex-ink);
  font-size: 7.5px;
  font-weight: 560;
}

html body .codex-summary small {
  color: var(--codex-secondary);
  font-size: 6px;
}

html body .codex-response pre {
  margin-top: 8px;
  padding: 9px 10px;
  color: var(--codex-secondary);
  background: rgba(237, 237, 237, 0.4);
  border: 0;
  border-radius: 10px;
  font-size: 6px;
  line-height: 1.48;
}

html body .codex-memory-saved {
  gap: 6px;
  margin-top: 8px;
  color: #18815a;
}

html body .codex-memory-saved > i {
  width: 15px;
  height: 15px;
  background: #16a765;
  font-size: 6px;
}

html body .codex-memory-saved b { font-size: 6px; }
html body .codex-memory-saved small { color: var(--codex-tertiary); font-size: 5px; }

html body .codex-composer {
  right: 12px;
  bottom: 11px;
  left: 12px;
  min-height: 40px;
  padding: 5px 6px 5px 11px;
  color: var(--codex-tertiary);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--codex-border-heavy);
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(13, 13, 13, 0.04), 0 0 18px rgba(13, 13, 13, 0.05);
  font-size: 6.5px;
}

html body .codex-composer button {
  width: 24px;
  height: 24px;
  background: #303030;
  border-radius: 8px;
  font-size: 8px;
}

html body .codex-app-real .codex-inspector {
  padding: 10px 8px;
  color: var(--codex-secondary);
  background: #f9f9f9;
  border-left-color: var(--codex-border-light);
  border-radius: 0;
  box-shadow: none;
}

html body .codex-app-real .codex-inspector header,
html body .codex-app-real .codex-inspector div {
  min-height: 23px;
}

html body .codex-app-real .codex-inspector header {
  color: var(--codex-tertiary);
  border-bottom: 0;
  font-size: 6px;
}

html body .codex-app-real .codex-inspector .codex-inspector-row {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 2px 1px;
}

html body .codex-app-real .codex-inspector .codex-inspector-row svg {
  width: 11px;
  height: 11px;
  color: var(--codex-tertiary);
  stroke-width: 1.6;
}

html body .codex-app-real .codex-inspector .codex-inspector-row b {
  color: var(--codex-secondary);
  font-size: 5.7px;
  font-weight: 500;
}

html body .codex-app-real .codex-inspector .codex-inspector-row.is-muted b,
html body .codex-app-real .codex-inspector small,
html body .codex-app-real .codex-inspector em {
  color: var(--codex-tertiary);
}

html body .codex-app-real .codex-inspector .codex-inspector-rule {
  background: var(--codex-border-light);
}

html body .codex-app-real .codex-inspector .codex-source,
html body .codex-app-real .codex-inspector .codex-source-more {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 21px;
  color: var(--codex-tertiary);
  font-size: 5.5px;
}

html body .codex-app-real .codex-source-thumb {
  width: 16px;
  height: 14px;
  border-color: var(--codex-border);
  border-radius: 4px;
}

@media (max-width: 980px) {
  html body .codex-app-real {
    grid-template-columns: 20% minmax(0, 63%) 17%;
  }
}

/* Showcase tail rhythm — measured against ElevenLabs' 24px product-card inset. */
@media (min-width: 901px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 610px;
  }

  html body .hero .real-agent-grid::after,
  html.theme-dark body .hero .real-agent-grid::after {
    content: none;
  }

  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    top: 28px;
    height: calc(100% - 70px);
  }

  html body .real-agent-stage[data-agent-focus="codex"] .claude-sim,
  html body .real-agent-stage[data-agent-focus="claude"] .codex-sim {
    transform: translateY(12px);
  }

  html body .codex-app-real .codex-account,
  html body .claude-account {
    bottom: 18px;
  }

  html body .codex-composer {
    bottom: 20px;
  }

  html body .codex-thread-scroll {
    padding-bottom: 82px;
  }
}

/* Quick Start v2 — measured from ElevenLabs' 12-column bento layout. */
html body .quickstart-legacy,
html body .agent-compatibility-legacy {
  display: none !important;
}

html body #quickstart.quickstart-v2,
html.theme-dark body #quickstart.quickstart-v2 {
  --quick-v2-paper: #fbfaf8;
  --quick-v2-card: #f5f3f1;
  --quick-v2-ink: #11110f;
  --quick-v2-copy: #77736c;
  --quick-v2-rule: #e7e2dc;
  padding: clamp(88px, 9vw, 132px) 0;
  color: var(--quick-v2-ink);
  background: var(--quick-v2-paper);
  border: 0;
}

html body #quickstart.quickstart-v2 > .quickstart-v2-shell {
  display: flex;
  width: min(1220px, calc(100vw - 64px));
  max-width: none;
  flex-direction: column;
}

html body #quickstart .quickstart-v2-heading,
html.theme-dark body #quickstart .quickstart-v2-heading,
html[data-language="en"] body #quickstart .quickstart-v2-heading {
  order: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  align-items: end;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  text-align: left;
}

html body #quickstart .quickstart-v2-heading .section-index,
html.theme-dark body #quickstart .quickstart-v2-heading .section-index {
  grid-column: 1 / -1;
  margin: 0 0 24px;
  color: #68705f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-v2-heading h2,
html.theme-dark body #quickstart .quickstart-v2-heading h2,
html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
  grid-column: 1 / span 8;
  max-width: 760px;
  margin: 0;
  color: var(--quick-v2-ink);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

html body #quickstart .quickstart-v2-heading > p:last-child,
html.theme-dark body #quickstart .quickstart-v2-heading > p:last-child,
html[data-language="en"] body #quickstart .quickstart-v2-heading > p:last-child {
  grid-column: 9 / -1;
  max-width: 32ch;
  margin: 0 0 4px;
  justify-self: end;
  color: var(--quick-v2-copy);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}

html body #quickstart .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-agent-compatibility {
  order: 3;
  padding: clamp(38px, 4vw, 52px) 0 0;
  background: transparent;
}

html body #quickstart .quickstart-agent-compatibility .agent-switcher {
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 20px;
}

html body #quickstart .quickstart-bento {
  display: grid;
  order: 2;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

html body #quickstart .quickstart-bento-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  height: 568px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
}

html body #quickstart .quickstart-install-card {
  grid-column: span 5;
  color: var(--quick-v2-ink);
  background: var(--quick-v2-card);
  box-shadow: inset 0 0 0 1px var(--quick-v2-rule);
}

html body #quickstart .quickstart-conversation-card {
  grid-column: span 7;
  color: #fff;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(255, 225, 194, .96) 0 7%, rgba(242, 206, 172, .74) 18%, transparent 38%),
    radial-gradient(ellipse at 81% 53%, rgba(155, 204, 229, .92) 0 9%, rgba(122, 186, 216, .64) 22%, transparent 42%),
    radial-gradient(ellipse at 53% 57%, rgba(211, 218, 20, .92) 0 8%, rgba(184, 193, 18, .72) 25%, transparent 48%),
    radial-gradient(ellipse at 14% 12%, #348959 0 8%, #176a3c 32%, transparent 59%),
    radial-gradient(ellipse at 78% 92%, #07513f 0 12%, #06392e 42%, transparent 66%),
    linear-gradient(145deg, #0b4c2c 0%, #173f20 38%, #466824 62%, #064239 100%);
}

html body #quickstart .quickstart-conversation-card::before {
  position: absolute;
  z-index: -1;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.68'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  content: "";
  mix-blend-mode: soft-light;
  opacity: .36;
  pointer-events: none;
}

html body #quickstart .quickstart-conversation-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 48%, rgba(1, 31, 22, .34) 100%);
  content: "";
  pointer-events: none;
}

html body #quickstart .quickstart-card-visual {
  min-height: 0;
  flex: 1 1 auto;
}

html body #quickstart .quickstart-install-visual {
  display: flex;
  padding: 30px 28px 18px;
  flex-direction: column;
}

html body #quickstart .quickstart-card-step {
  margin: 0;
  color: #6e7568;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
}

html body #quickstart .quickstart-command-lines {
  margin: auto 0;
  border-top: 1px solid #d9d4cd;
  border-bottom: 1px solid #d9d4cd;
}

html body #quickstart .quickstart-command-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  min-height: 66px;
}

html body #quickstart .quickstart-command-line + .quickstart-command-line {
  border-top: 1px solid #d9d4cd;
}

html body #quickstart .quickstart-command-line > span {
  color: #aaa59e;
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #quickstart .quickstart-command-line code {
  min-width: 0;
  overflow-x: auto;
  color: #26361d;
  background: transparent;
  font: 500 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

html body #quickstart .quickstart-command-line .quickstart-copy-button,
html.theme-dark body #quickstart .quickstart-command-line .quickstart-copy-button {
  width: 32px;
  height: 32px;
  color: #716d67;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

html body #quickstart .quickstart-command-line .quickstart-copy-button:hover,
html body #quickstart .quickstart-command-line .quickstart-copy-button:focus-visible {
  color: #172512;
  background: rgba(31, 60, 24, .08);
}

html body #quickstart .quickstart-card-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 28px 32px;
}

html body #quickstart .quickstart-card-copy p {
  margin: 0 0 7px;
  color: #87827b;
  font-size: 15px;
  line-height: 1.45;
}

html body #quickstart .quickstart-card-copy h3 {
  margin: 0;
  color: inherit;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

html body #quickstart .quickstart-card-copy > span {
  display: block;
  margin-top: 9px;
  color: #6f6b65;
  font-size: 15px;
  line-height: 1.55;
}

html body #quickstart .quickstart-conversation-visual {
  position: relative;
  min-height: 420px;
  padding: 38px 28px 18px;
}

html body #quickstart .quickstart-conversation-flow {
  display: flex;
  width: min(84%, 470px);
  margin: 6px auto 0;
  flex-direction: column;
  align-items: flex-start;
}

html body #quickstart .quickstart-bubble,
html body #quickstart .quickstart-memory-status,
html body #quickstart .quickstart-memory-result {
  width: fit-content;
  margin: 0;
  font-size: 15px;
  line-height: 1.48;
}

html body #quickstart .quickstart-bubble {
  max-width: 82%;
  padding: 14px 18px;
  color: #171714;
  background: rgba(255, 255, 255, .96);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(14, 34, 18, .08);
}

html body #quickstart .quickstart-bubble.is-user {
  align-self: flex-end;
  color: #fff;
  background: rgba(53, 61, 40, .2);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: none;
}

html body #quickstart .quickstart-memory-status {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0 10px 6%;
  padding: 10px 14px;
  color: rgba(255, 255, 255, .94);
  background: rgba(20, 44, 25, .25);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

html body #quickstart .quickstart-memory-status i {
  width: 13px;
  height: 13px;
  border: 2px dotted currentColor;
  border-radius: 50%;
  animation: quickstart-memory-spin 2.2s linear infinite;
}

html body #quickstart .quickstart-memory-result {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px 6%;
  padding: 9px 14px;
  color: #203019;
  background: rgba(235, 242, 215, .9);
  border-radius: 999px;
}

html body #quickstart .quickstart-memory-result span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

html body #quickstart .quickstart-bubble.is-agent {
  margin-left: 6%;
}

html body #quickstart .quickstart-conversation-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}

html body #quickstart .quickstart-conversation-copy p {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  letter-spacing: .08em;
}

html body #quickstart .quickstart-conversation-copy h3 {
  max-width: 15em;
  color: #fff;
}

html body #quickstart .quickstart-scene-pages {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-bottom: 3px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

html body #quickstart .quickstart-scene-pages b {
  position: relative;
  color: #fff;
  font-weight: 500;
}

html body #quickstart .quickstart-scene-pages b::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: #e9815e;
  content: "";
}

@keyframes quickstart-memory-spin {
  to { transform: rotate(360deg); }
}

html.theme-dark body #quickstart.quickstart-v2 {
  --quick-v2-paper: #11120f;
  --quick-v2-card: #1d1e1a;
  --quick-v2-ink: #f3f1ea;
  --quick-v2-copy: #a7a39b;
  --quick-v2-rule: #30312c;
}

html.theme-dark body #quickstart .quickstart-install-card {
  color: var(--quick-v2-ink);
}

html.theme-dark body #quickstart .quickstart-command-lines,
html.theme-dark body #quickstart .quickstart-command-line + .quickstart-command-line {
  border-color: #3b3c36;
}

html.theme-dark body #quickstart .quickstart-command-line code {
  color: #dce7d2;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-v2-heading h2,
  html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
    grid-column: 1 / span 9;
  }

  html body #quickstart .quickstart-v2-heading > p:last-child,
  html[data-language="en"] body #quickstart .quickstart-v2-heading > p:last-child {
    grid-column: 10 / -1;
  }

  html body #quickstart .quickstart-bento-card {
    height: 540px;
  }

  html body #quickstart .quickstart-install-card,
  html body #quickstart .quickstart-conversation-card {
    grid-column: span 6;
  }
}

@media (max-width: 680px) {
  html body #quickstart.quickstart-v2,
  html.theme-dark body #quickstart.quickstart-v2 {
    padding: 72px 0;
  }

  html body #quickstart.quickstart-v2 > .quickstart-v2-shell {
    width: min(100% - 28px, 1118px);
  }

  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    display: block;
    margin-bottom: 34px;
  }

  html body #quickstart .quickstart-v2-heading .section-index {
    margin-bottom: 18px;
  }

  html body #quickstart .quickstart-v2-heading h2,
  html.theme-dark body #quickstart .quickstart-v2-heading h2,
  html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  html body #quickstart .quickstart-v2-heading > p:last-child,
  html.theme-dark body #quickstart .quickstart-v2-heading > p:last-child,
  html[data-language="en"] body #quickstart .quickstart-v2-heading > p:last-child {
    max-width: 34ch;
    margin-top: 18px;
  }

  html body #quickstart .quickstart-agent-compatibility .agent-switcher {
    grid-template-columns: 1fr;
  }

  html body #quickstart .quickstart-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #quickstart .quickstart-install-card,
  html body #quickstart .quickstart-conversation-card {
    grid-column: 1;
    height: 520px;
  }

  html body #quickstart .quickstart-conversation-flow {
    width: 100%;
  }

  html body #quickstart .quickstart-conversation-copy {
    display: block;
  }

  html body #quickstart .quickstart-scene-pages {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #quickstart .quickstart-memory-status i {
    animation: none;
  }
}

/* Quick Start v2.1 — live ElevenLabs type metrics + raster/noise material stack. */
html body #quickstart .quickstart-v2-heading,
html.theme-dark body #quickstart .quickstart-v2-heading,
html[data-language="en"] body #quickstart .quickstart-v2-heading {
  margin-bottom: 48px;
}

html body #quickstart .quickstart-v2-heading .section-index,
html.theme-dark body #quickstart .quickstart-v2-heading .section-index {
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-v2-heading h2,
html.theme-dark body #quickstart .quickstart-v2-heading h2,
html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
  grid-column: 1 / span 6;
  max-width: 503px;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: 0;
}

html body #quickstart .quickstart-v2-heading > p:last-child,
html.theme-dark body #quickstart .quickstart-v2-heading > p:last-child,
html[data-language="en"] body #quickstart .quickstart-v2-heading > p:last-child {
  grid-column: 7 / -1;
  width: 100%;
  max-width: 503px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-conversation-card {
  background-color: #164f32;
  background-image: url("./assets/generated/quickstart-conversation-bg-v2.png");
  background-position: center 50%;
  background-size: cover;
}

html body #quickstart .quickstart-conversation-card::before {
  z-index: 0;
  inset: 0;
  background-image: none;
  opacity: 0;
}

html body #quickstart .quickstart-conversation-card::after {
  z-index: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .35) 0%,
      rgba(0, 0, 0, .33) 16%,
      rgba(0, 0, 0, .26) 35%,
      rgba(0, 0, 0, .16) 53%,
      rgba(0, 0, 0, .06) 71%,
      rgba(0, 0, 0, 0) 100%
    );
}

html body #quickstart .quickstart-conversation-card .quickstart-card-visual {
  position: relative;
  z-index: 1;
}

html body #quickstart .quickstart-card-copy p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-card-copy h3 {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-card-copy > span {
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-conversation-visual {
  min-height: 0;
  padding: 0 28px;
  overflow: hidden;
}

html body #quickstart .quickstart-conversation-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
}

html body #quickstart .quickstart-conversation-scroll::-webkit-scrollbar {
  display: none;
}

html body #quickstart .quickstart-conversation-scroll:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .72);
  outline-offset: -5px;
  border-radius: 18px;
}

html body #quickstart .quickstart-scroll-scene {
  display: flex;
  width: min(74%, 360px);
  min-height: 100%;
  margin: 0 auto;
  padding: 54px 0 72px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html body #quickstart .quickstart-bubble,
html body #quickstart .quickstart-memory-status,
html body #quickstart .quickstart-memory-result {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

html body #quickstart .quickstart-bubble {
  max-width: 240px;
  padding: 10px 14px;
  border-radius: 20px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1.677px 3.354px rgba(0, 0, 0, .04);
}

html body #quickstart .quickstart-bubble.is-user {
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

html body #quickstart .quickstart-memory-status {
  margin: 16px 0 8px 0;
  padding: 10px 14px;
  font-weight: 500;
}

html body #quickstart .quickstart-memory-result {
  margin: 0 0 8px;
  padding: 10px 14px;
}

html body #quickstart .quickstart-bubble.is-agent {
  margin-left: 0;
}

html body #quickstart .quickstart-conversation-copy {
  z-index: 2;
  padding-top: 0;
  border-top: 0;
}

html body #quickstart .quickstart-conversation-copy p {
  color: rgba(255, 255, 255, .8);
}

html body #quickstart .quickstart-conversation-copy h3 {
  max-width: 28em;
  color: #fff;
}

html body #quickstart .quickstart-scene-pages {
  gap: 18px;
}

html body #quickstart .quickstart-scene-pages button {
  position: relative;
  min-width: 20px;
  padding: 0 0 3px;
  color: rgba(255, 255, 255, .62);
  background: transparent;
  border: 0;
  font: 400 12px/20px inherit;
  cursor: pointer;
}

html body #quickstart .quickstart-scene-pages button:hover,
html body #quickstart .quickstart-scene-pages button:focus-visible,
html body #quickstart .quickstart-scene-pages button.is-active {
  color: #fff;
}

html body #quickstart .quickstart-scene-pages button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .72);
  outline-offset: 4px;
  border-radius: 3px;
}

html body #quickstart .quickstart-scene-pages button.is-active::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: #fff;
  content: "";
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-v2-heading h2,
  html.theme-dark body #quickstart .quickstart-v2-heading h2,
  html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
    font-size: 32px;
    line-height: 38px;
  }

  html body #quickstart .quickstart-scroll-scene {
    width: 88%;
  }
}

/* Quick Start v2.2 — the deployed four-round MemoraX conversation, inside the green scroller. */
html body #quickstart .quickstart-scroll-scene {
  width: min(88%, 470px);
  padding: 34px 0 62px;
  justify-content: center;
}

html body #quickstart .quickstart-round-meta {
  display: grid;
  width: 100%;
  margin-bottom: 14px;
  color: #fff;
}

html body #quickstart .quickstart-round-meta > span {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .06em;
}

html body #quickstart .quickstart-round-meta strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

html body #quickstart .quickstart-round-meta small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble {
  position: relative;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 19px;
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-user {
  width: fit-content;
  max-width: 88%;
  padding: 10px 42px 10px 14px;
}

html body #quickstart .quickstart-bubble blockquote,
html body #quickstart .quickstart-bubble p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-agent {
  width: fit-content;
  max-width: 92%;
  margin-top: 8px;
  padding: 11px 14px 12px;
}

html body #quickstart .quickstart-round-agent {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 6px;
  color: #6f746a;
}

html body #quickstart .quickstart-round-agent img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  object-position: center;
}

html body #quickstart .quickstart-round-agent strong {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

html body #quickstart .quickstart-round-copy,
html.theme-dark body #quickstart .quickstart-round-copy {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, .78);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

html body #quickstart .quickstart-round-copy:hover,
html body #quickstart .quickstart-round-copy:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .13);
}

html body #quickstart .quickstart-round-copy svg {
  width: 14px;
  height: 14px;
}

html body #quickstart .quickstart-session-break {
  display: grid;
  width: min(100%, 360px);
  margin: 0 auto 12px;
  padding: 9px 13px;
  color: #fff;
  background: rgba(20, 49, 27, .24);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

html body #quickstart .quickstart-session-break small {
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  line-height: 15px;
}

html body #quickstart .quickstart-session-break strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

html body #quickstart .quickstart-session-break span {
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 16px;
}

html body #quickstart .quickstart-scroll-scene:last-child {
  padding-top: 58px;
  padding-bottom: 36px;
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-scroll-scene {
    width: 92%;
    padding-block: 28px 58px;
  }

  html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-user,
  html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-agent {
    max-width: 96%;
  }
}

/* Quick Start v2.3 — final ElevenLabs proportion and typography pass. */
html body main#main > #quickstart.quickstart-v2,
html.theme-dark body main#main > #quickstart.quickstart-v2 {
  --page-rail-surface: var(--quick-v2-paper);
  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  border-bottom: 1px solid var(--page-rail-rule, rgba(0, 0, 0, .05));
}

html body #quickstart .quickstart-v2-heading h2,
html.theme-dark body #quickstart .quickstart-v2-heading h2,
html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
  font-family: "Helvetica Neue", "PingFang SC", "Noto Sans SC", Inter, sans-serif;
  font-weight: 300;
}

html body #quickstart .quickstart-install-card,
html body #quickstart .quickstart-conversation-card {
  grid-column: span 6;
  box-shadow: none;
}

html body #quickstart .quickstart-install-card {
  background: #f5f3f1;
}

html body #quickstart .quickstart-card-step {
  color: #777b70;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .07em;
}

html body #quickstart .quickstart-command-line code {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

html body #quickstart .quickstart-card-copy p,
html body #quickstart .quickstart-card-copy h3,
html body #quickstart .quickstart-card-copy > span {
  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .01em;
}

html body #quickstart .quickstart-card-copy h3 {
  margin-top: 18px;
}

html body #quickstart .quickstart-scroll-scene {
  width: min(76%, 420px);
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble {
  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-user {
  max-width: 100%;
  font-weight: 500;
}

html body #quickstart .quickstart-scroll-scene .quickstart-bubble.is-agent {
  max-width: 100%;
}

html body #quickstart .quickstart-round-meta > span {
  font-size: 12px;
  line-height: 18px;
}

/* Video-faithful Claude Code handoff: recall, inspect current code, then correct. */
html body .claude-sim .claude-tabbar {
  color: #aeb8b4;
  background: #333d40;
  border-bottom-color: rgba(245, 242, 236, 0.1);
}

html body .claude-sim .claude-tab,
html body .claude-sim .claude-tab-add {
  color: #dfe4e1;
}

html body .claude-video-shell {
  grid-template-columns: minmax(0, 1fr);
  color: #dce2df;
  background: #2a3336;
}

html body .claude-terminal-home {
  color: #dce2df;
  background: #2a3336;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html body .claude-terminal-home > .claude-workspace-header {
  height: 38px;
  color: #7f8c88;
  background: #2d373a;
  border-bottom: 1px solid rgba(245, 242, 236, 0.1);
}

html body .claude-terminal-home .claude-workspace-header b,
html body .claude-terminal-home .claude-workspace-header em {
  color: #dfe4e1;
}

html body .claude-terminal-home .claude-workspace-actions {
  display: none;
}

html body .claude-terminal-home .claude-workspace-header i {
  margin-left: 7px;
  color: #6f7c78;
  font-style: normal;
}

html body .claude-video-idle {
  top: 44%;
  width: calc(100% - 28px);
  color: #dce2df;
}

html body .claude-terminal-startup {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-bottom: 18px;
}

html body .claude-terminal-startup img {
  width: 34px;
  height: 34px;
}

html body .claude-terminal-startup span {
  display: grid;
  gap: 3px;
}

html body .claude-terminal-startup b {
  color: #f5f0e8;
  font-size: 12px;
}

html body .claude-terminal-startup small,
html body .claude-terminal-mode {
  color: #7f8c88;
  font-size: 7px;
}

html body .claude-video-prompt {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 24px;
  gap: 6px;
  align-items: center;
  padding: 10px 9px;
  color: #eceeea;
  background: rgba(104, 88, 74, 0.25);
  border-block: 1px solid rgba(232, 220, 206, 0.1);
  font-size: 8px;
  line-height: 1.45;
}

html body .claude-video-prompt p,
html body .claude-terminal-mode {
  margin: 0;
}

html body .claude-video-prompt button[data-session-demo-start] {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: #252f33;
  background: #d8dedb;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

html body .claude-terminal-mode {
  margin-top: 14px;
}

html body .claude-video-session {
  top: 38px;
  display: block;
  color: #dce2df;
  background: #2a3336;
}

html body .claude-video-session .claude-session-thread {
  height: 100%;
  padding: 11px 14px 28px;
  overflow: hidden;
}

html body .claude-video-session .claude-user-prompt {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  max-width: 100%;
  margin: 0;
  padding: 7px 8px;
  color: #eceeea;
  background: rgba(104, 88, 74, 0.24);
  border-radius: 0;
  font: 7px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-video-session .claude-user-prompt b {
  color: #fff;
}

html body .claude-video-session .claude-harmonizing {
  margin: 8px 2px 7px;
  color: #d98a68;
  font: 7px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-terminal-event,
html body .claude-terminal-inspection,
html body .claude-video-session .claude-memory-log {
  visibility: hidden;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

html body .claude-terminal-event {
  display: grid;
  gap: 3px;
  margin: 7px 2px;
  color: #aeb9b5;
  font-size: 6.5px;
  line-height: 1.4;
}

html body .claude-terminal-event b,
html body .claude-terminal-inspection b {
  overflow: hidden;
  color: #e8ecea;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-terminal-event b::first-letter,
html body .claude-terminal-inspection b::first-letter {
  color: #55a987;
}

html body .claude-terminal-event span,
html body .claude-terminal-inspection span {
  padding-left: 12px;
  color: #7f8c88;
}

html body .claude-video-session .claude-memory-log {
  margin: 8px 2px;
  color: #bcc6c2;
  background: rgba(39, 62, 53, 0.4);
  border-color: rgba(85, 169, 135, 0.24);
  border-radius: 4px;
  box-shadow: inset 2px 0 #55a987;
}

html body .claude-video-session .claude-memory-log > header {
  color: #aeb9b5;
  background: rgba(255, 255, 255, 0.025);
  border-bottom-color: rgba(245, 242, 236, 0.08);
}

html body .claude-video-session .claude-memory-log > header span,
html body .claude-video-session .claude-memory-log > header em,
html body .claude-video-session .claude-memory-log p b,
html body .claude-video-session .claude-memory-log small {
  color: #6db797;
}

html body .claude-video-session .claude-memory-log p {
  color: #bcc6c2;
  border-bottom-color: rgba(245, 242, 236, 0.07);
  animation: none !important;
}

html body .claude-video-session .claude-memory-log p span {
  color: #bcc6c2;
}

html body .claude-video-session .claude-memory-log small {
  background: rgba(255, 255, 255, 0.018);
}

html body .claude-terminal-inspection {
  display: grid;
  gap: 6px;
  margin: 8px 2px;
  font-size: 6.2px;
  line-height: 1.38;
}

html body .claude-terminal-inspection p {
  display: grid;
  gap: 2px;
  margin: 0;
}

html body .claude-video-session .claude-video-answer {
  grid-template-columns: 11px minmax(0, 1fr);
  margin-top: 9px;
  color: #e8ecea;
}

html body .claude-video-answer > div {
  display: grid;
  gap: 4px;
}

html body .claude-video-answer strong {
  color: #f1f2ee;
  font-size: 7px;
  font-weight: 560;
}

html body .claude-video-answer p {
  margin: 0;
  color: #aeb9b5;
  font-size: 6.3px;
  line-height: 1.4;
}

html body .claude-video-answer p i {
  color: #55a987;
  font-style: normal;
}

html body .claude-video-answer p:nth-of-type(2) i {
  color: #d3a05f;
}

html body .claude-video-session .claude-finish {
  color: #7f8c88;
}

html body .claude-terminal-home .claude-replay {
  top: 7px;
  right: 9px;
  color: #c3cbc7;
  background: #333d40 !important;
  border-color: rgba(245, 242, 236, 0.14) !important;
}

/* The transfer is already clear from the overlapping panels and recall log. */
html body .hero .real-handoff-link {
  display: none;
}

html body .cursor-workbench[data-state="asking"] .claude-harmonizing,
html body .cursor-workbench[data-state="skill"] .claude-harmonizing,
html body .cursor-workbench[data-state="searching"] .claude-harmonizing,
html body .cursor-workbench[data-state="memory-1"] .claude-harmonizing,
html body .cursor-workbench[data-state="inspecting"] .claude-harmonizing,
html body .cursor-workbench[data-state="skill"] [data-video-step="skill"],
html body .cursor-workbench[data-state="searching"] [data-video-step="skill"],
html body .cursor-workbench[data-state="searching"] [data-video-step="search"],
html body .cursor-workbench[data-state="memory-1"] [data-video-step="skill"],
html body .cursor-workbench[data-state="memory-1"] [data-video-step="search"],
html body .cursor-workbench[data-state="memory-1"] [data-video-step="memory"],
html body .cursor-workbench[data-state="inspecting"] [data-video-step],
html body .cursor-workbench[data-state="answer"] [data-video-step] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

html body .cursor-workbench[data-state="memory-1"] .claude-memory-log p,
html body .cursor-workbench[data-state="inspecting"] .claude-memory-log p,
html body .cursor-workbench[data-state="answer"] .claude-memory-log p {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Terminal results do not reserve space before the command actually returns. */
html body .claude-video-session [data-video-step],
html body .claude-video-session .claude-terminal-inspection {
  display: none;
}

html body .cursor-workbench[data-state="skill"] [data-video-step="skill"],
html body .cursor-workbench[data-state="searching"] [data-video-step="skill"],
html body .cursor-workbench[data-state="searching"] [data-video-step="search"],
html body .cursor-workbench[data-state="memory-1"] [data-video-step="skill"],
html body .cursor-workbench[data-state="memory-1"] [data-video-step="search"],
html body .cursor-workbench[data-state="inspecting"] .claude-terminal-event,
html body .cursor-workbench[data-state="answer"] .claude-terminal-event {
  display: grid;
}

html body .cursor-workbench[data-state="memory-1"] [data-video-step="memory"],
html body .cursor-workbench[data-state="inspecting"] [data-video-step="memory"],
html body .cursor-workbench[data-state="answer"] [data-video-step="memory"] {
  display: grid;
}

html body .cursor-workbench[data-state="inspecting"] .claude-terminal-inspection,
html body .cursor-workbench[data-state="answer"] .claude-terminal-inspection {
  display: grid;
}

html body .cursor-workbench[data-state="skill"] .real-handoff-link,
html body .cursor-workbench[data-state="searching"] .real-handoff-link,
html body .cursor-workbench[data-state="memory-1"] .real-handoff-link,
html body .cursor-workbench[data-state="inspecting"] .real-handoff-link {
  color: #216e58;
  border-color: rgba(33, 110, 88, 0.46);
  transform: translate(-50%, -50%) scale(1.06);
}

html body .cursor-workbench:not([data-state="idle"]) .real-handoff-link {
  visibility: hidden;
  opacity: 0;
}

@media (max-width: 520px) {
  html body .claude-video-session .claude-session-thread {
    padding: 7px 9px 18px;
  }

  html body .claude-terminal-event,
  html body .claude-terminal-inspection,
  html body .claude-video-answer p {
    font-size: 5.4px;
  }

  html body .claude-terminal-inspection {
    gap: 3px;
    margin-block: 5px;
  }

  html body .claude-video-session [data-video-step="skill"],
  html body .claude-video-session [data-video-step="search"],
  html body .claude-video-session .claude-terminal-inspection p:first-child {
    display: none;
  }

  html body .claude-video-session .claude-memory-log {
    margin-block: 5px;
  }

  html body .claude-video-session .claude-video-answer {
    margin-top: 5px;
  }

  html body .claude-video-answer strong {
    font-size: 5.8px;
  }
}

/* Quick Start v2.4 — keep installation and demo preparation visibly separate. */
html body #quickstart .quickstart-install-card,
html body #quickstart .quickstart-conversation-card {
  height: 660px;
}

html body #quickstart .quickstart-install-visual {
  padding: 32px;
}

html body #quickstart .quickstart-install-summary {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}

html body #quickstart .quickstart-install-summary strong,
html body #quickstart .quickstart-demo-heading strong {
  color: #171815;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

html body #quickstart .quickstart-install-summary span,
html body #quickstart .quickstart-demo-heading span {
  color: #85817b;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

html body #quickstart .quickstart-install-visual > .quickstart-command-lines {
  margin: 18px 0 0;
  border-top: 0;
  border-bottom: 0;
}

html body #quickstart .quickstart-install-visual > .quickstart-command-lines .quickstart-command-line {
  min-height: 58px;
}

html body #quickstart .quickstart-install-note {
  margin: 10px 0 0;
  color: #85817b;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

html body #quickstart .quickstart-platform-support,
html.theme-dark body #quickstart .quickstart-platform-support {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 18px 0 0;
  color: #66625c;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

html body #quickstart .quickstart-platform-support i,
html.theme-dark body #quickstart .quickstart-platform-support i {
  color: #9a968f;
  font-style: normal;
}

html body #quickstart .quickstart-demo-repository {
  margin-top: 0;
}

html body #quickstart .quickstart-demo-step {
  margin: 60px 0 0;
}

html body #quickstart .quickstart-demo-heading {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}

html body #quickstart .quickstart-demo-command-card,
html.theme-dark body #quickstart .quickstart-demo-command-card {
  margin-top: 14px;
  padding: 6px 18px;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  box-shadow:
    rgba(0, 0, 0, .4) 0 0 1px,
    rgba(0, 0, 0, .04) 0 1px 1px,
    rgba(0, 0, 0, .04) 0 2px 4px;
}

html body #quickstart .quickstart-demo-command-card .quickstart-command-line {
  min-height: 52px;
}

html body #quickstart .quickstart-demo-command-card .quickstart-command-line code {
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}

html body #quickstart .quickstart-demo-command-card .quickstart-command-line + .quickstart-command-line {
  border-top-color: #e7e4e0;
}

html body #quickstart .quickstart-demo-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 18px 2px 0;
  padding-top: 15px;
  border-top: 1px solid #dedad4;
}

html body #quickstart .quickstart-demo-next small {
  color: #77746f;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-demo-next-copy {
  color: #696660;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

html body #quickstart .quickstart-demo-next-copy strong {
  color: #171815;
  font-weight: 600;
}

html body #quickstart .quickstart-demo-next i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #171815;
  font-style: normal;
}

html body #quickstart .quickstart-demo-next i svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-install-card {
    height: 710px;
  }

  html body #quickstart .quickstart-conversation-card {
    height: 560px;
  }

  html body #quickstart .quickstart-install-visual {
    padding: 28px 22px;
  }
}

/* Quiet GitHub icon control in the desktop header. */
html body .header-cta.github-star-button,
html body .header-cta.github-star-button:hover,
html.theme-dark body .header-cta.github-star-button,
html.theme-dark body .header-cta.github-star-button:hover {
  min-height: 36px;
  width: 36px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: #000;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  transform: none;
}

html body .github-star-action,
html body .github-star-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  white-space: nowrap;
}

html body .github-star-action {
  padding: 0;
  background: transparent;
  border: 0;
}

html body .github-star-action svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

html body .github-star-count {
  min-width: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

html body .header-cta.github-star-button:hover {
  color: #171717;
  background: rgba(31, 35, 40, 0.055);
  box-shadow: none;
}

html body .header-cta.github-star-button:hover .github-star-action {
  background: transparent;
}

html.theme-dark body .header-cta.github-star-button {
  color: #f0eee9;
  background: transparent;
  border: 0;
}

html.theme-dark body .header-cta.github-star-button:hover {
  color: #f0eee9;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
}

html.theme-dark body .github-star-action {
  background: transparent;
  border: 0;
}

html.theme-dark body .header-cta.github-star-button:hover .github-star-action {
  background: transparent;
}

@media (min-width: 901px) and (max-width: 940px) {
  html body .header-cta.github-star-button,
  html.theme-dark body .header-cta.github-star-button {
    display: none;
  }
}

/* Cases editorial render v1: keep artwork and copy in separate zones. */
html body #cases .cases-split-heading,
html.theme-dark body #cases .cases-split-heading,
html[data-language="en"] body #cases .cases-split-heading {
  row-gap: clamp(28px, 3vw, 38px);
  margin-bottom: clamp(52px, 5vw, 68px);
}

html body #cases .cases-split-heading h2,
html.theme-dark body #cases .cases-split-heading h2,
html[data-language="en"] body #cases .cases-split-heading h2 {
  max-width: 560px;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: normal;
}

html body #cases .cases-heading-copy,
html.theme-dark body #cases .cases-heading-copy,
html[data-language="en"] body #cases .cases-heading-copy {
  max-width: 520px;
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
}

html body #cases .case-grid,
html.theme-dark body #cases .case-grid,
html[data-language="en"] body #cases .case-grid {
  gap: 0;
  background: #e5e2de;
  border-color: #e5e2de;
  border-radius: 26px;
}

html body #cases .case-slide,
html.theme-dark body #cases .case-slide,
html[data-language="en"] body #cases .case-slide {
  min-height: 368px;
  padding: 26px 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--ui-copy);
  background: #f5f3f1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  transform: none;
}

html.theme-dark body #cases .case-grid {
  background: var(--ui-rule);
  border-color: var(--ui-rule);
}

html.theme-dark body #cases .case-slide {
  background: #141512;
}

html body #cases .case-slide:hover,
html body #cases .case-slide:focus-visible,
html body #cases .case-slide.is-active,
html.theme-dark body #cases .case-slide:hover,
html.theme-dark body #cases .case-slide:focus-visible,
html.theme-dark body #cases .case-slide.is-active {
  color: var(--ui-copy);
  background: color-mix(in srgb, var(--ui-card) 76%, var(--ui-page));
  box-shadow: none;
  transform: none;
}

html body #cases .case-slide-visual,
html.theme-dark body #cases .case-slide-visual {
  width: 100%;
  height: 150px;
  display: grid;
  place-items: center;
  margin: -4px 0 8px;
  color: #8f8b85;
  pointer-events: none;
}

html body #cases .case-slide-visual svg,
html.theme-dark body #cases .case-slide-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

html body #cases .case-line,
html.theme-dark body #cases .case-line,
html body #cases .case-marker-ring,
html.theme-dark body #cases .case-marker-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

html body #cases .case-line-dashed,
html.theme-dark body #cases .case-line-dashed,
html body #cases .case-marker-ring,
html.theme-dark body #cases .case-marker-ring {
  stroke-dasharray: 5 5;
  opacity: 0.62;
}

html body #cases .case-line-accent,
html.theme-dark body #cases .case-line-accent {
  color: #71846b;
  stroke-width: 1.5;
}

html body #cases .case-marker-dot,
html.theme-dark body #cases .case-marker-dot {
  fill: #71846b;
}

html.theme-dark body #cases .case-slide-visual {
  color: #706f69;
}

html.theme-dark body #cases .case-line-accent,
html.theme-dark body #cases .case-marker-dot {
  color: #9aac92;
  fill: #9aac92;
}

html body #cases .case-slide-type,
html.theme-dark body #cases .case-slide-type,
html[data-language="en"] body #cases .case-slide-type {
  margin: 0 0 18px;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.085em;
}

html body #cases .case-slide > strong,
html.theme-dark body #cases .case-slide > strong,
html[data-language="en"] body #cases .case-slide > strong {
  max-width: 100%;
  margin: 0;
  color: var(--ui-ink);
  font-size: clamp(21px, 1.45vw, 23px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

html body #cases .case-slide > small,
html.theme-dark body #cases .case-slide > small,
html[data-language="en"] body #cases .case-slide > small {
  margin-top: 16px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 820px) {
  html body #cases .cases-split-heading,
  html.theme-dark body #cases .cases-split-heading,
  html[data-language="en"] body #cases .cases-split-heading {
    row-gap: 18px;
    margin-bottom: 48px;
  }

  html body #cases .cases-split-heading h2,
  html.theme-dark body #cases .cases-split-heading h2,
  html[data-language="en"] body #cases .cases-split-heading h2 {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.12;
  }

  html body #cases .case-grid,
  html.theme-dark body #cases .case-grid,
  html[data-language="en"] body #cases .case-grid {
    border-radius: 20px;
  }

  html body #cases .case-slide,
  html.theme-dark body #cases .case-slide,
  html[data-language="en"] body #cases .case-slide {
    min-height: 340px;
    padding: 24px 22px 22px;
  }

  html body #cases .case-slide-visual,
  html.theme-dark body #cases .case-slide-visual {
    height: 136px;
    margin-bottom: 8px;
  }
}

@media (max-width: 420px) {
  html body #cases .case-slide,
  html.theme-dark body #cases .case-slide,
  html[data-language="en"] body #cases .case-slide {
    min-height: 328px;
  }

  html body #cases .case-slide > strong,
  html.theme-dark body #cases .case-slide > strong,
  html[data-language="en"] body #cases .case-slide > strong {
    font-size: 22px;
  }
}

/* Expanded case editorial v1 ------------------------------------------------
 * Turn the case detail from a dashboard into one calm editorial work surface.
 */
html body #cases .case-lab,
html.theme-dark body #cases .case-lab {
  --case-detail-ink: #181815;
  --case-detail-copy: #4f4d48;
  --case-detail-muted: #85817a;
  --case-detail-rule: #dfdcd7;
  --case-detail-surface: #f5f3f1;
  --case-detail-paper: #fbfaf8;
  --case-detail-positive: #71846b;
  margin-top: 18px;
  padding: 0;
  overflow: visible;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--case-detail-rule);
  border-bottom: 1px solid var(--case-detail-rule);
  border-radius: 0;
  box-shadow: none;
  animation: case-detail-enter 260ms ease both;
  scroll-margin-top: 88px;
}

html.theme-dark body #cases .case-lab {
  --case-detail-ink: #f2f0eb;
  --case-detail-copy: #c4c0b8;
  --case-detail-muted: #88857e;
  --case-detail-rule: #32332f;
  --case-detail-surface: #141512;
  --case-detail-paper: #191a17;
  --case-detail-positive: #9aac92;
}

@keyframes case-detail-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

html body #cases .case-lab-header,
html.theme-dark body #cases .case-lab-header {
  padding: 34px 36px 28px;
  border-bottom: 1px solid var(--case-detail-rule);
}

html body #cases .case-lab-kicker,
html.theme-dark body #cases .case-lab-kicker {
  color: var(--case-detail-muted);
  font: 400 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.09em;
}

html body #cases .case-lab-header h3,
html.theme-dark body #cases .case-lab-header h3 {
  max-width: 900px;
  margin: 10px 0 0;
  color: var(--case-detail-ink);
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif;
  font-size: clamp(28px, 2.5vw, 32px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

html body #cases .case-lab-hero,
html.theme-dark body #cases .case-lab-hero {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(40px, 6vw, 84px);
  padding: 30px 36px;
  border-bottom: 0;
}

html body #cases .case-lab-hero h4,
html.theme-dark body #cases .case-lab-hero h4 {
  max-width: 630px;
  margin: 0;
  color: var(--case-detail-ink);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.02em;
}

html body #cases .case-lab-hero blockquote,
html.theme-dark body #cases .case-lab-hero blockquote {
  margin: 0;
  padding: 2px 0 2px 22px;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--case-detail-positive);
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.65;
}

html body #cases .case-outcome-card,
html.theme-dark body #cases .case-outcome-card {
  margin: 0 36px 28px;
  overflow: visible;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--case-detail-rule);
  border-bottom: 1px solid var(--case-detail-rule);
  border-radius: 0;
  box-shadow: none;
}

html body #cases .case-outcome-header,
html.theme-dark body #cases .case-outcome-header {
  gap: 24px;
  padding: 20px 0 18px;
  border-bottom: 0;
}

html body #cases .case-outcome-header h4,
html.theme-dark body #cases .case-outcome-header h4 {
  color: var(--case-detail-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

html body #cases .case-outcome-header > strong,
html.theme-dark body #cases .case-outcome-header > strong {
  padding: 0;
  color: var(--case-detail-positive);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.035em;
}

html body #cases .case-outcome-body,
html.theme-dark body #cases .case-outcome-body {
  padding: 0 0 22px;
}

html body #cases .case-outcome-time,
html.theme-dark body #cases .case-outcome-time {
  gap: 15px;
}

html body #cases .case-time-row,
html.theme-dark body #cases .case-time-row {
  grid-template-columns: 34px minmax(120px, 1fr) 58px 100px;
  gap: 12px;
}

html body #cases .case-time-row > span,
html.theme-dark body #cases .case-time-row > span {
  color: var(--case-detail-muted);
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .case-time-row.is-on > span,
html.theme-dark body #cases .case-time-row.is-on > span,
html body #cases .case-time-row.is-on > strong,
html.theme-dark body #cases .case-time-row.is-on > strong,
html body #cases .case-time-row.is-on > small b,
html.theme-dark body #cases .case-time-row.is-on > small b {
  color: var(--case-detail-positive);
}

html body #cases .case-time-track,
html.theme-dark body #cases .case-time-track {
  height: 4px;
  background: color-mix(in srgb, var(--case-detail-muted) 18%, transparent);
  border-radius: 999px;
}

html body #cases .case-time-track i,
html.theme-dark body #cases .case-time-track i {
  background: var(--case-detail-muted);
}

html body #cases .case-time-row.is-on .case-time-track i,
html.theme-dark body #cases .case-time-row.is-on .case-time-track i {
  background: var(--case-detail-positive);
}

html body #cases .case-time-track em,
html.theme-dark body #cases .case-time-track em {
  width: 7px;
  height: 7px;
  border-color: var(--case-detail-paper);
  background: var(--case-detail-muted);
  box-shadow: 0 0 0 1px var(--case-detail-muted);
}

html body #cases .case-time-track em::after,
html.theme-dark body #cases .case-time-track em::after {
  color: var(--case-detail-muted);
  font-weight: 500;
}

html body #cases .case-time-row > strong,
html.theme-dark body #cases .case-time-row > strong {
  color: var(--case-detail-ink);
  font: 500 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-time-row > small,
html.theme-dark body #cases .case-time-row > small,
html body #cases .case-time-row > small b,
html.theme-dark body #cases .case-time-row > small b,
html body #cases .case-time-row > small span,
html.theme-dark body #cases .case-time-row > small span {
  color: var(--case-detail-muted);
  font-size: 10px;
  font-weight: 400;
}

html body #cases .case-lab-controls,
html.theme-dark body #cases .case-lab-controls {
  padding: 18px 36px;
  background: transparent;
  border-top: 1px solid var(--case-detail-rule);
  border-bottom: 1px solid var(--case-detail-rule);
}

html body #cases .case-play-controls,
html body #cases .case-view-switch,
html.theme-dark body #cases .case-play-controls,
html.theme-dark body #cases .case-view-switch {
  gap: 8px;
}

html body #cases .case-lab-controls button,
html.theme-dark body #cases .case-lab-controls button {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--case-detail-copy);
  background: transparent;
  border: 1px solid var(--case-detail-rule);
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transform: none;
}

html body #cases .case-lab-controls button:hover,
html body #cases .case-lab-controls button:focus-visible,
html.theme-dark body #cases .case-lab-controls button:hover,
html.theme-dark body #cases .case-lab-controls button:focus-visible {
  color: var(--case-detail-ink);
  background: var(--case-detail-paper);
  border-color: var(--case-detail-muted);
  transform: none;
}

html body #cases .case-control-icon,
html.theme-dark body #cases .case-control-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #cases [data-control-icon="play"] .case-control-pause,
html body #cases [data-control-icon="pause"] .case-control-play,
html.theme-dark body #cases [data-control-icon="play"] .case-control-pause,
html.theme-dark body #cases [data-control-icon="pause"] .case-control-play {
  display: none;
}

html body #cases .case-step-delta,
html.theme-dark body #cases .case-step-delta {
  gap: 10px;
}

html body #cases .case-step-delta span,
html.theme-dark body #cases .case-step-delta span {
  color: var(--case-detail-muted);
  font: 400 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

html body #cases .case-step-delta strong,
html.theme-dark body #cases .case-step-delta strong {
  padding: 0;
  color: var(--case-detail-positive);
  background: transparent;
  border-radius: 0;
  font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-view-switch,
html.theme-dark body #cases .case-view-switch {
  align-self: stretch;
}

html body #cases .case-view-switch button,
html.theme-dark body #cases .case-view-switch button {
  padding-inline: 8px;
  color: var(--case-detail-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}

html body #cases .case-view-switch button.is-active,
html.theme-dark body #cases .case-view-switch button.is-active {
  color: var(--case-detail-ink);
  background: transparent;
  border-color: var(--case-detail-ink);
}

html body #cases .case-lanes,
html.theme-dark body #cases .case-lanes {
  gap: 0;
  margin: 28px 36px 36px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--case-detail-rule);
  border-bottom: 1px solid var(--case-detail-rule);
  border-radius: 0;
}

html body #cases .case-lane,
html.theme-dark body #cases .case-lane {
  min-height: 0;
  padding: 26px 32px 22px 0;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #cases .case-lane-on,
html.theme-dark body #cases .case-lane-on {
  padding-right: 0;
  padding-left: 32px;
  background: transparent;
  border-left: 1px solid var(--case-detail-rule);
}

html body #cases .case-lane > header,
html.theme-dark body #cases .case-lane > header {
  padding-bottom: 16px;
  border-color: var(--case-detail-rule);
}

html body #cases .case-lane-heading,
html.theme-dark body #cases .case-lane-heading {
  gap: 10px;
  color: var(--case-detail-ink);
  font-size: 16px;
  font-weight: 500;
}

html body #cases .case-lane-heading span,
html.theme-dark body #cases .case-lane-heading span {
  min-width: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--case-detail-muted);
  background: transparent;
  border-radius: 0;
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-lane-heading span::before,
html.theme-dark body #cases .case-lane-heading span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

html body #cases .case-lane-on .case-lane-heading span,
html.theme-dark body #cases .case-lane-on .case-lane-heading span {
  color: var(--case-detail-positive);
  background: transparent;
}

html body #cases .case-lane > header small,
html.theme-dark body #cases .case-lane > header small,
html body #cases .case-lane-on > header small,
html.theme-dark body #cases .case-lane-on > header small {
  padding: 0;
  color: var(--case-detail-muted);
  background: transparent;
  border-radius: 0;
  font: 400 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-lane-log,
html.theme-dark body #cases .case-lane-log {
  gap: 0;
  margin-top: 0;
}

html body #cases .case-log-item,
html.theme-dark body #cases .case-log-item {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--case-detail-rule);
  border-radius: 0;
}

html body #cases .case-log-item.is-neutral,
html.theme-dark body #cases .case-log-item.is-neutral {
  grid-template-columns: 22px minmax(0, 1fr);
}

html body #cases .case-log-item i,
html.theme-dark body #cases .case-log-item i,
html body #cases .case-lane-on .case-log-item i,
html.theme-dark body #cases .case-lane-on .case-log-item i {
  width: auto;
  height: auto;
  padding-top: 4px;
  justify-content: flex-start;
  color: var(--case-detail-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body #cases .case-lane-on .case-log-item i,
html.theme-dark body #cases .case-lane-on .case-log-item i {
  color: var(--case-detail-positive);
}

html body #cases .case-log-main,
html.theme-dark body #cases .case-log-main {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

html body #cases .case-log-item p,
html.theme-dark body #cases .case-log-item p {
  margin: 2px 0 0;
  color: var(--case-detail-copy);
  font-size: 13px;
  line-height: 1.55;
}

html body #cases .case-like,
html body #cases .case-dislike,
html.theme-dark body #cases .case-like,
html.theme-dark body #cases .case-dislike {
  display: none;
}

html body #cases .case-lane-on .case-like,
html.theme-dark body #cases .case-lane-on .case-like {
  color: var(--case-detail-positive);
}

html body #cases .case-like-icon,
html body #cases .case-dislike-icon,
html.theme-dark body #cases .case-like-icon,
html.theme-dark body #cases .case-dislike-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.45;
}

html body #cases .case-memory-tool,
html.theme-dark body #cases .case-memory-tool {
  color: var(--case-detail-copy);
  background: transparent;
  border-color: var(--case-detail-rule);
  border-radius: 10px;
}

html body #cases .case-memory-tool i,
html.theme-dark body #cases .case-memory-tool i {
  color: var(--case-detail-paper);
  background: var(--case-detail-positive);
}

html body #cases .case-memory-tool em,
html.theme-dark body #cases .case-memory-tool em,
html body #cases .case-memory-toggle,
html.theme-dark body #cases .case-memory-toggle,
html body #cases .case-memory-toggle span,
html.theme-dark body #cases .case-memory-toggle span {
  color: var(--case-detail-positive);
}

html body #cases .case-memory-toggle,
html.theme-dark body #cases .case-memory-toggle {
  grid-column: 1;
  grid-row: auto;
  min-height: 22px;
  margin-top: 10px;
  padding: 0;
  gap: 7px;
  justify-self: start;
  border-radius: 0;
}

html body #cases .case-memory-toggle::after,
html.theme-dark body #cases .case-memory-toggle::after {
  display: none;
}

html body #cases .case-memory-toggle span,
html.theme-dark body #cases .case-memory-toggle span {
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.055em;
}

html body #cases .case-memory-toggle span::before,
html.theme-dark body #cases .case-memory-toggle span::before {
  display: none;
}

html body #cases .case-memory-toggle i,
html body #cases .case-lane-on .case-memory-toggle i,
html.theme-dark body #cases .case-memory-toggle i,
html.theme-dark body #cases .case-lane-on .case-memory-toggle i {
  top: -1px;
  width: 6px;
  height: 6px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

html body #cases .case-memory-recall,
html.theme-dark body #cases .case-memory-recall {
  grid-column: 1;
  grid-row: auto;
  max-width: 560px;
  margin-top: 12px;
  padding: 2px 0 2px 16px;
  overflow: visible;
  color: var(--case-detail-copy);
  background: transparent;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--case-detail-positive) 68%, var(--case-detail-rule));
  border-radius: 0;
  box-shadow: none;
  animation-duration: 220ms;
}

html body #cases .case-memory-recall::before,
html.theme-dark body #cases .case-memory-recall::before {
  display: none;
}

html body #cases .case-memory-recall header,
html.theme-dark body #cases .case-memory-recall header {
  display: block;
}

html body #cases .case-memory-recall header > b,
html.theme-dark body #cases .case-memory-recall header > b {
  display: none;
}

html body #cases .case-memory-recall header span,
html.theme-dark body #cases .case-memory-recall header span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}

html body #cases .case-memory-recall header small,
html.theme-dark body #cases .case-memory-recall header small {
  color: var(--case-detail-positive);
  font: 550 8px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.09em;
}

  html body #cases .case-memory-recall header strong,
  html.theme-dark body #cases .case-memory-recall header strong {
  color: var(--case-detail-muted);
  font-size: 10px;
  font-weight: 450;
  line-height: 1.4;
}

html body #cases .case-memory-recall > p,
html.theme-dark body #cases .case-memory-recall > p {
  margin: 8px 0 0;
  padding: 0;
  color: var(--case-detail-copy);
  border: 0;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  html body #cases .case-lab-header,
  html.theme-dark body #cases .case-lab-header {
    padding: 26px 20px 22px;
  }

  html body #cases .case-lab-header h3,
  html.theme-dark body #cases .case-lab-header h3 {
    font-size: 27px;
  }

  html body #cases .case-lab-hero,
  html.theme-dark body #cases .case-lab-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }

  html body #cases .case-outcome-card,
  html.theme-dark body #cases .case-outcome-card {
    margin: 0 20px 22px;
  }

  html body #cases .case-outcome-header,
  html.theme-dark body #cases .case-outcome-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  html body #cases .case-time-row,
  html.theme-dark body #cases .case-time-row {
    grid-template-columns: 28px minmax(58px, 1fr) 48px 74px;
    gap: 7px;
  }

  html body #cases .case-lab-controls,
  html.theme-dark body #cases .case-lab-controls {
    padding: 16px 20px;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  html body #cases .case-play-controls,
  html.theme-dark body #cases .case-play-controls,
  html body #cases .case-view-switch,
  html.theme-dark body #cases .case-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #cases .case-view-switch,
  html.theme-dark body #cases .case-view-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html body #cases .case-step-delta,
  html.theme-dark body #cases .case-step-delta {
    justify-content: space-between;
    order: -1;
  }

  html body #cases .case-lanes,
  html.theme-dark body #cases .case-lanes {
    grid-template-columns: 1fr;
    margin: 22px 20px 26px;
    border-radius: 0;
  }

  html body #cases .case-lane,
  html.theme-dark body #cases .case-lane {
    min-height: 0;
    padding: 22px 0;
  }

  html body #cases .case-lane-on,
  html.theme-dark body #cases .case-lane-on {
    border-top: 1px solid var(--case-detail-rule);
    border-left: 0;
  }
}

/* Final focus treatment for the joined case surface. */
html body #cases .case-slide:focus-visible,
html.theme-dark body #cases .case-slide:focus-visible {
  outline: 1px solid rgba(113, 132, 107, 0.72);
  outline-offset: -1px;
}

/* Claude App Code workspace v4 — measured from the native app shell. */
html body .claude-sim {
  --claude-app-ink: #262624;
  --claude-app-copy: #5f5e59;
  --claude-app-muted: #999791;
  --claude-app-rule: #e9e7e2;
  --claude-app-soft: #f4f3f0;
  color: var(--claude-app-ink);
  background: #fff;
  border-color: rgba(35, 34, 31, 0.14);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

html body .claude-sim .claude-tabbar {
  height: 32px;
  padding-inline: 11px;
  color: var(--claude-app-muted);
  background: #fbfbfa;
  border-bottom: 1px solid var(--claude-app-rule);
}

html body .claude-sim .claude-tabbar .sim-traffic {
  gap: 5px;
}

html body .claude-sim .claude-tabbar .sim-traffic i {
  width: 7px;
  height: 7px;
  background: #d8d8d6;
}

html body .claude-sim .claude-tab,
html body .claude-sim .claude-tab-add {
  color: #77756f;
}

html body .claude-sim .claude-tab {
  gap: 5px;
  font-size: 7px;
  font-weight: 500;
}

html body .claude-sim .claude-tab img {
  width: 9px;
  height: 9px;
}

html body .claude-sim .claude-tab-add {
  font: 500 6.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-video-shell {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  height: calc(100% - 32px);
  color: var(--claude-app-ink);
  background: #fff;
}

html body .claude-app-sidebar {
  position: relative;
  min-width: 0;
  padding: 9px 8px 32px;
  overflow: hidden;
  color: #6e6c66;
  background: #f7f7f5;
  border-right: 1px solid var(--claude-app-rule);
  font-size: 6.5px;
}

html body .claude-sidebar-tools {
  display: flex;
  gap: 8px;
  height: 16px;
  padding-inline: 5px;
  align-items: center;
  color: #999791;
  font-size: 8px;
}

html body .claude-app-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 3px 0 7px;
  padding: 2px;
  background: #ecebe8;
  border-radius: 6px;
}

html body .claude-app-mode > * {
  display: flex;
  gap: 4px;
  height: 19px;
  align-items: center;
  justify-content: center;
  color: #8b8983;
  border-radius: 5px;
  font-weight: 450;
}

html body .claude-app-mode b {
  color: #292825;
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 34, 30, 0.12), 0 0 0 0.5px rgba(36, 34, 30, 0.07);
}

html body .claude-app-mode i,
html body .claude-app-nav i {
  width: 10px;
  color: inherit;
  font-style: normal;
  text-align: center;
}

html body .claude-app-nav {
  display: grid;
  gap: 1px;
}

html body .claude-app-nav > * {
  display: flex;
  gap: 6px;
  min-height: 20px;
  padding: 0 6px;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  font-weight: 430;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-app-nav b {
  color: #2d2c29;
  background: #ebeae7;
}

html body .claude-recent-heading {
  display: flex;
  margin: 17px 5px 6px;
  align-items: center;
  justify-content: space-between;
  color: #a3a19b;
  font-size: 5.8px;
}

html body .claude-recent-heading i {
  font-style: normal;
}

html body .claude-recent-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .claude-recent-list li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  gap: 4px;
  min-height: 20px;
  padding: 0 5px;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
}

html body .claude-recent-list li > i {
  width: 4px;
  height: 4px;
  border: 1px solid #cac7c1;
  border-radius: 50%;
}

html body .claude-recent-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-recent-list li.is-active {
  color: #34332f;
  background: #edebe7;
}

html body .claude-recent-list li.is-active > i {
  background: #d97757;
  border-color: #d97757;
}

html body .claude-sidebar-account {
  position: absolute;
  right: 8px;
  bottom: 9px;
  left: 8px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  gap: 6px;
  height: 25px;
  align-items: center;
  color: #706e68;
  border-top: 1px solid var(--claude-app-rule);
}

html body .claude-sidebar-account > i {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #56544f;
  background: #e5e4e0;
  border-radius: 50%;
  font-style: normal;
}

html body .claude-sidebar-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-terminal-home {
  position: relative;
  min-width: 0;
  color: var(--claude-app-ink);
  background: #fdfdfc;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

html body .claude-terminal-home > .claude-workspace-header {
  display: flex;
  height: 34px;
  padding: 0 9px 0 11px;
  align-items: center;
  justify-content: space-between;
  color: #918f89;
  background: #fff;
  border-bottom: 1px solid var(--claude-app-rule);
  font-size: 6.2px;
}

html body .claude-terminal-home .claude-workspace-header > span,
html body .claude-terminal-home .claude-workspace-actions {
  display: flex;
  gap: 5px;
  min-width: 0;
  align-items: center;
}

html body .claude-terminal-home .claude-workspace-header b,
html body .claude-terminal-home .claude-workspace-header em {
  color: #3d3b37;
  font-style: normal;
  font-weight: 500;
}

html body .claude-terminal-home .claude-workspace-header > span:first-child em {
  overflow: hidden;
  color: #8b8983;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-terminal-home .claude-workspace-actions {
  display: flex;
}

html body .claude-terminal-home .claude-workspace-actions em,
html body .claude-terminal-home .claude-workspace-actions b {
  padding: 3px 5px;
  color: #65625d;
  background: #f5f4f1;
  border: 1px solid #e8e5df;
  border-radius: 5px;
  font-size: 5.8px;
}

html body .claude-code-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  height: calc(100% - 34px);
}

html body .claude-code-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

html body .claude-video-idle {
  top: 47%;
  width: calc(100% - 26px);
  max-width: 330px;
  color: var(--claude-app-ink);
}

html body .claude-terminal-startup {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  margin: 0 auto 13px;
  align-items: center;
  justify-content: center;
}

html body .claude-terminal-startup img {
  width: 27px;
  height: 27px;
}

html body .claude-terminal-startup span {
  display: grid;
  gap: 2px;
}

html body .claude-terminal-startup b {
  color: #24231f;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

html body .claude-terminal-startup small {
  color: #96938c;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 5.6px;
  line-height: 1.35;
}

html body .claude-video-prompt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: minmax(28px, auto) 18px;
  gap: 3px 8px;
  min-height: 66px;
  padding: 9px 8px 6px 10px;
  color: #4d4b46;
  background: #fff;
  border: 1px solid #dfdcd6;
  border-radius: 11px;
  box-shadow: 0 7px 20px rgba(45, 42, 36, 0.07), 0 1px 2px rgba(45, 42, 36, 0.04);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 6.7px;
  line-height: 1.45;
}

html body .claude-video-prompt p {
  grid-column: 1 / -1;
  margin: 0;
  padding-right: 4px;
  color: #57544f;
}

html body .claude-video-prompt footer {
  display: flex;
  grid-column: 1;
  gap: 8px;
  align-items: center;
  color: #98958e;
  font-size: 5.5px;
}

html body .claude-video-prompt footer em {
  color: #77746e;
  font-style: normal;
}

html body .claude-video-prompt footer i {
  color: #aaa7a0;
  font-style: normal;
}

html body .claude-video-prompt button[data-session-demo-start] {
  grid-column: 2;
  grid-row: 2;
  width: 22px;
  height: 22px;
  align-self: end;
  color: #fff;
  background: #d97757;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(217, 119, 87, 0.24);
}

html body .claude-code-shortcuts {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  justify-content: center;
}

html body .claude-code-shortcuts span {
  padding: 4px 6px;
  color: #77746e;
  background: #fff;
  border: 1px solid #e3e0da;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(45, 42, 36, 0.04);
  font-size: 5.4px;
  white-space: nowrap;
}

html body .claude-diff-panel {
  position: relative;
  min-width: 0;
  padding: 10px 8px 34px;
  overflow: hidden;
  color: #706d67;
  background: #faf9f7;
  border-left: 1px solid var(--claude-app-rule);
  font-size: 5.5px;
}

html body .claude-diff-panel > header,
html body .claude-diff-panel li,
html body .claude-diff-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html body .claude-diff-panel > header {
  color: #3e3b36;
  font-size: 6.6px;
  font-weight: 550;
}

html body .claude-diff-panel > header b {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #7a7771;
  background: #ebe8e2;
  border-radius: 5px;
  font-size: 5.5px;
}

html body .claude-diff-summary {
  justify-content: flex-start;
  gap: 5px;
  margin: 9px 0 10px;
}

html body .claude-diff-summary strong { color: #2b8467; }
html body .claude-diff-summary em { color: #b86360; font-style: normal; }
html body .claude-diff-summary i { margin-left: auto; color: #a09d96; font-style: normal; }

html body .claude-diff-panel ul {
  display: grid;
  gap: 2px;
  margin: 0 -3px 10px;
  padding: 0;
  list-style: none;
}

html body .claude-diff-panel li {
  min-height: 19px;
  padding: 0 4px;
  border-radius: 4px;
}

html body .claude-diff-panel li.is-active {
  color: #45423d;
  background: #edeae4;
}

html body .claude-diff-panel li span {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .claude-diff-panel li span i {
  margin-right: 4px;
  color: #a87150;
  font: 500 4.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-diff-panel li b {
  color: #2b8467;
  font-size: 5px;
}

html body .claude-mini-diff {
  display: grid;
  gap: 3px;
  padding: 7px 5px;
  background: #f4f2ee;
  border: 1px solid #e7e3dc;
  border-radius: 5px;
}

html body .claude-mini-diff small {
  margin-bottom: 2px;
  color: #85817a;
  font: 500 5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body .claude-mini-diff i {
  width: 82%;
  height: 2px;
  background: #d7d3cd;
  border-radius: 2px;
}

html body .claude-mini-diff i:nth-of-type(2),
html body .claude-mini-diff i:nth-of-type(3),
html body .claude-mini-diff i:nth-of-type(5) {
  width: 92%;
  background: #bedbce;
  box-shadow: inset 2px 0 #54a080;
}

html body .claude-repo-state {
  position: absolute;
  right: 8px;
  bottom: 10px;
  left: 8px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

html body .claude-repo-state > i {
  width: 5px;
  height: 5px;
  background: #2f9a72;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(47, 154, 114, 0.12);
}

html body .claude-repo-state span {
  display: grid;
  gap: 1px;
}

html body .claude-repo-state b {
  color: #5c5953;
  font-size: 5.2px;
  font-weight: 500;
}

html body .claude-repo-state small {
  color: #9a9790;
  font-size: 4.8px;
}

html body .claude-video-session {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 0;
  color: var(--claude-app-copy);
  background: #fff;
}

html body .claude-video-session .claude-session-thread {
  height: 100%;
  padding: 10px 12px 24px;
  overflow: hidden;
}

html body .claude-video-session .claude-user-prompt {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  max-width: 100%;
  margin: 0 0 8px;
  padding: 7px 8px;
  color: #4e4b46;
  background: #f3f2ef;
  border: 1px solid #ece9e3;
  border-radius: 8px;
  font: 6.3px/1.45 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

html body .claude-video-session .claude-user-prompt b {
  color: #77736c;
}

html body .claude-video-session .claude-harmonizing {
  margin: 7px 2px;
  color: #d97757;
  font: 6.2px/1.35 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

html body .claude-terminal-event,
html body .claude-terminal-inspection {
  color: #77746e;
  font-size: 5.6px;
}

html body .claude-terminal-event b,
html body .claude-terminal-inspection b {
  color: #4a4742;
}

html body .claude-terminal-event b::first-letter,
html body .claude-terminal-inspection b::first-letter {
  color: #2f9270;
}

html body .claude-terminal-event span,
html body .claude-terminal-inspection span {
  color: #98958e;
}

html body .claude-video-session .claude-memory-log {
  color: #5f5c56;
  background: #f6faf8;
  border-color: #dcebe4;
  border-radius: 7px;
  box-shadow: inset 2px 0 #439876;
}

html body .claude-video-session .claude-memory-log > header {
  color: #74716a;
  background: #eff6f2;
  border-bottom-color: #dfeae4;
}

html body .claude-video-session .claude-memory-log > header span,
html body .claude-video-session .claude-memory-log > header em,
html body .claude-video-session .claude-memory-log p b,
html body .claude-video-session .claude-memory-log small {
  color: #2f8465;
}

html body .claude-video-session .claude-memory-log p,
html body .claude-video-session .claude-memory-log p span {
  color: #5f5c56;
  border-bottom-color: #e3ece7;
}

html body .claude-video-session .claude-memory-log small {
  background: #fbfdfc;
}

html body .claude-video-session .claude-video-answer {
  color: #4e4b46;
}

html body .claude-video-answer strong {
  color: #302e2a;
}

html body .claude-video-answer p {
  color: #66635d;
}

html body .claude-video-session .claude-finish {
  color: #95928b;
}

html body .claude-terminal-home .claude-replay {
  top: 7px;
  right: 57px;
  color: #696660;
  background: #f6f5f2 !important;
  border-color: #dedbd5 !important;
}

@media (max-width: 720px) {
  html body .claude-video-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  html body .claude-code-workspace {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  html body .claude-app-sidebar {
    padding-inline: 6px;
  }

  html body .claude-recent-list li:nth-child(n + 3),
  html body .claude-app-nav span:nth-of-type(n + 3),
  html body .claude-mini-diff {
    display: none;
  }
}

@media (max-width: 520px) {
  html body .claude-video-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  html body .claude-code-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  html body .claude-diff-panel {
    display: none;
  }

  html body .claude-app-mode > * {
    font-size: 5.3px;
  }

  html body .claude-app-nav > * {
    padding-inline: 3px;
  }

  html body .claude-terminal-startup small,
  html body .claude-code-shortcuts span:nth-child(n + 3) {
    display: none;
  }
}
/* Temporary render preview: calmer case detail ---------------------------- */
html body #cases .case-lab {
  --case-detail-rule: rgba(24, 24, 21, 0.07);
  border-bottom: 0;
}

html body #cases .case-outcome-card,
html.theme-dark body #cases .case-outcome-card {
  margin-bottom: 38px;
  border-top: 0;
  border-bottom: 0;
}

html body #cases .case-lab-video .case-card-label,
html.theme-dark body #cases .case-lab-video .case-card-label {
  display: none;
}

html body #cases .case-lab-video > summary,
html.theme-dark body #cases .case-lab-video > summary {
  grid-template-columns: minmax(0, 1fr) 18px;
}

html body #cases .case-process-details > summary,
html body #cases .case-lab-video > summary,
html.theme-dark body #cases .case-process-details > summary,
html.theme-dark body #cases .case-lab-video > summary {
  min-height: 70px;
}

html body #cases .case-process-details > summary:hover,
html body #cases .case-lab-video > summary:hover,
html.theme-dark body #cases .case-process-details > summary:hover,
html.theme-dark body #cases .case-lab-video > summary:hover {
  background: rgba(24, 24, 21, 0.025);
}

/* Open dual-agent stage ----------------------------------------------------
 * Let the Codex and Claude windows sit directly on the page instead of
 * nesting them inside a third, decorative workbench.
 */
html body .hero .cursor-workbench.product-workbench.real-agent-stage,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage::before,
html body .hero .cursor-workbench.product-workbench.real-agent-stage::after,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage::before,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage::after,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage::before,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage::after {
  content: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::before,
html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::after,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::before,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::after,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::before,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.showcase-summarybar)::after {
  content: none;
}

html body .hero .handoff-stage-label.showcase-summarybar,
html.theme-dark body .hero .handoff-stage-label.showcase-summarybar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html body .hero .real-agent-grid,
html.theme-dark body .hero .real-agent-grid {
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body .hero .real-agent-stage:has(.showcase-summarybar) .real-agent-grid,
html:not(.theme-dark) body .hero .real-agent-stage:has(.showcase-summarybar) .real-agent-grid,
html.theme-dark body .hero .real-agent-stage:has(.showcase-summarybar) .real-agent-grid {
  top: 0;
  right: auto;
  bottom: auto;
  left: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 901px) {
  html body .hero .hero-layout,
  html.theme-dark body .hero .hero-layout {
    overflow: visible;
  }

  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    width: min(1320px, calc(100vw - 48px));
    max-width: none;
    min-height: 660px;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 640px;
  }

  html body .hero .real-agent-grid,
  html.theme-dark body .hero .real-agent-grid {
    position: relative;
    inset: auto;
    display: block;
  }
}

@media (max-width: 900px) {
  html body .hero .real-agent-grid,
  html.theme-dark body .hero .real-agent-grid {
    top: 0;
    border: 0;
    border-radius: 0;
  }
}

/* Hero cleanup and readable desktop app typography ------------------------ */
@media (min-width: 901px) {
  html body main#main > .hero,
  html.theme-dark body main#main > .hero {
    border-top: 0;
    border-bottom: 0;
  }

  html body main#main > .hero::before,
  html body main#main > .hero::after,
  html.theme-dark body main#main > .hero::before,
  html.theme-dark body main#main > .hero::after {
    content: none;
    display: none;
  }

  html body .codex-window-bar { font-size: 9px; }
  html body .codex-window-actions { font-size: 8px; }
  html body .codex-app-real .codex-brand { font-size: 11px; }
  html body .codex-app-real .codex-primary-nav > span { font-size: 9.5px; }
  html body .codex-app-real .codex-section-label,
  html body .codex-app-real .codex-nav-label { font-size: 7.5px; }
  html body .codex-app-real .codex-project b,
  html body .codex-app-real .codex-thread-item b { font-size: 8.5px; }
  html body .codex-app-real .codex-project small,
  html body .codex-app-real .codex-thread-item small { font-size: 7px; }
  html body .codex-app-real .codex-account { font-size: 8.5px; }
  html body .codex-thread-view > header b { font-size: 9.5px; }
  html body .codex-thread-view > header small,
  html body .codex-thread-view > header em { font-size: 7px; }
  html body .codex-user-message,
  html body .codex-response p { font-size: 9.5px; }
  html body .codex-summary span { font-size: 6px; }
  html body .codex-summary strong { font-size: 9.5px; }
  html body .codex-summary small { font-size: 7.8px; }
  html body .codex-response pre { font-size: 8px; }
  html body .codex-memory-saved b { font-size: 7px; }
  html body .codex-memory-saved small { font-size: 6px; }
  html body .codex-composer { font-size: 8.5px; }
  html body .codex-app-real .codex-inspector header { font-size: 7px; }
  html body .codex-app-real .codex-inspector .codex-inspector-row b { font-size: 6.7px; }
  html body .codex-app-real .codex-inspector .codex-source,
  html body .codex-app-real .codex-inspector .codex-source-more { font-size: 6.4px; }

  html body .claude-sim .claude-tab { font-size: 9px; }
  html body .claude-sim .claude-tab-add { font-size: 8px; }
  html body .claude-app-sidebar { font-size: 8.5px; }
  html body .claude-sidebar-tools { font-size: 9px; }
  html body .claude-recent-heading { font-size: 7.4px; }
  html body .claude-terminal-home > .claude-workspace-header { font-size: 8.2px; }
  html body .claude-terminal-home .claude-workspace-actions em,
  html body .claude-terminal-home .claude-workspace-actions b { font-size: 7.4px; }
  html body .claude-terminal-startup b { font-size: 16px; }
  html body .claude-terminal-startup small { font-size: 7.5px; }
  html body .claude-video-prompt { font-size: 9px; }
  html body .claude-video-prompt footer { font-size: 7.2px; }
  html body .claude-code-shortcuts span { font-size: 7px; }
  html body .claude-diff-panel { font-size: 7.2px; }
  html body .claude-diff-panel > header { font-size: 8.2px; }
  html body .claude-diff-panel > header b { font-size: 6.4px; }
  html body .claude-diff-panel li span i,
  html body .claude-diff-panel li b,
  html body .claude-mini-diff small { font-size: 5.8px; }
  html body .claude-repo-state b { font-size: 6.2px; }
  html body .claude-repo-state small { font-size: 5.8px; }
  html body .claude-video-session .claude-user-prompt { font-size: 8.5px; }
  html body .claude-video-session .claude-harmonizing { font-size: 8px; }
  html body .claude-terminal-event,
  html body .claude-terminal-inspection { font-size: 7.2px; }
  html body .claude-video-answer strong { font-size: 9px; }
  html body .claude-video-answer p { font-size: 8.2px; }
}

/* Claude-native sidebar proportions + foreground macOS traffic lights ----- */
@media (min-width: 901px) {
  html body .claude-video-shell {
    grid-template-columns: 142px minmax(0, 1fr);
  }

  html body .claude-app-sidebar {
    padding: 12px 10px 38px;
    color: #5f5d57;
    font-size: 10.5px;
  }

  html body .claude-sidebar-tools {
    min-height: 18px;
    padding: 0 6px;
    gap: 10px;
    font-size: 11px;
  }

  html body .claude-app-mode {
    gap: 3px;
    margin: 7px 0 10px;
    padding: 3px;
    background: #eeedea;
    border-radius: 10px;
  }

  html body .claude-app-mode > * {
    gap: 7px;
    height: 29px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 1;
  }

  html body .claude-app-mode b {
    background: #fff;
    box-shadow:
      0 1px 3px rgba(36, 34, 30, 0.16),
      0 0 0 1px rgba(36, 34, 30, 0.07);
  }

  html body .claude-app-mode i,
  html body .claude-app-nav i {
    width: 15px;
    flex: 0 0 15px;
    font-size: 13px;
  }

  html body .claude-app-nav {
    gap: 2px;
  }

  html body .claude-app-nav > * {
    gap: 9px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 10.5px;
  }

  html body .claude-app-nav b {
    color: #272622;
    background: #eeedea;
  }

  html body .claude-recent-heading {
    margin-top: 18px;
    padding: 0 7px 7px;
    font-size: 8px;
  }

  html body .claude-recent-list li {
    min-height: 27px;
    padding-inline: 9px;
    border-radius: 8px;
    font-size: 9px;
  }

  html body .claude-sidebar-account {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 9px;
  }
}

html body .hero .real-agent-grid .sim-traffic {
  gap: 6px;
}

html body .hero .real-agent-grid .sim-traffic i,
html body .hero .codex-window-bar .sim-traffic i,
html body .hero .claude-sim .claude-tabbar .sim-traffic i {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background: #d8d8d6;
  border: 1px solid rgba(24, 24, 22, 0.035);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.32);
  transition: background-color 160ms ease, border-color 160ms ease;
}

html body .hero .real-agent-stage[data-agent-focus="codex"] .codex-sim .sim-traffic i:nth-child(1),
html body .hero .real-agent-stage[data-agent-focus="claude"] .claude-sim .sim-traffic i:nth-child(1) {
  background: #ff5f57;
  border-color: #e14842;
}

html body .hero .real-agent-stage[data-agent-focus="codex"] .codex-sim .sim-traffic i:nth-child(2),
html body .hero .real-agent-stage[data-agent-focus="claude"] .claude-sim .sim-traffic i:nth-child(2) {
  background: #febc2e;
  border-color: #d89d16;
}

html body .hero .real-agent-stage[data-agent-focus="codex"] .codex-sim .sim-traffic i:nth-child(3),
html body .hero .real-agent-stage[data-agent-focus="claude"] .claude-sim .sim-traffic i:nth-child(3) {
  background: #28c840;
  border-color: #19a832;
}

/* Exact icon geometry and a tighter, aligned window stack ----------------- */
html body .claude-app-mode i svg,
html body .claude-app-nav i svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 901px) {
  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    top: 28px;
    width: calc((100% - (var(--panel-inset) * 2)) * 0.66);
    height: calc(100% - 70px);
    -webkit-mask-image: none;
    mask-image: none;
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition:
      box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
      border-color 420ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  html body .real-agent-stage[data-agent-focus="codex"] .codex-sim {
    transform: translateY(0);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.18),
      0 3px 10px rgba(0, 0, 0, 0.09);
  }

  html body .real-agent-stage[data-agent-focus="claude"] .claude-sim {
    transform: translateY(0);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.18),
      0 3px 10px rgba(0, 0, 0, 0.09);
  }

  html body .real-agent-stage[data-agent-focus="codex"] .claude-sim,
  html body .real-agent-stage[data-agent-focus="claude"] .codex-sim {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }
}

/* Readable Claude execution transcript; leave the surrounding app UI alone. */
@media (min-width: 901px) {
  html body .claude-video-session .claude-user-prompt { font-size: 10px; }
  html body .claude-video-session .claude-harmonizing { font-size: 9.5px; }
  html body .claude-video-session .claude-terminal-event,
  html body .claude-video-session .claude-terminal-inspection { font-size: 8.8px; }
  html body .claude-video-session .claude-memory-log > header,
  html body .claude-video-session .claude-memory-log p { font-size: 8.5px; }
  html body .claude-video-session .claude-memory-log small { font-size: 7.8px; }
  html body .claude-video-session .claude-video-answer strong { font-size: 10px; }
  html body .claude-video-session .claude-video-answer p { font-size: 9.2px; }
  html body .claude-video-session .claude-finish { font-size: 7.8px; }
}

/* Hero baseline and deeper overlap, following the reference composition. */
@media (min-width: 901px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    width: min(1320px, calc(100vw - 48px));
  }

  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    width: calc((100% - (var(--panel-inset) * 2)) * 0.68);
  }

  html body .hero .real-agent-grid .claude-sim,
  html body .real-agent-stage[data-agent-focus="claude"] .claude-sim,
  html body .real-agent-stage[data-agent-focus="codex"] .claude-sim {
    transform: translateY(-10px);
  }
}

/* At the fixed-width desktop stage, align the Codex frame to the first
 * visible glyph in “Never” instead of the centered heading element box.
 */
@media (min-width: 1368px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    transform: translateX(calc(-50% + 52px));
  }
}

/* Native-scale dual workbench ---------------------------------------------
 * Keep the large desktop frames, then mirror the real Codex / Claude visual
 * hierarchy: 11–14px application copy, wider composers, and useful inspectors.
 */
@media (min-width: 901px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    min-height: 760px;
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 740px;
  }

  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    top: 22px;
    width: calc((100% - (var(--panel-inset) * 2)) * 0.75);
    height: calc(100% - 48px);
  }

  html body .hero .real-agent-grid .claude-sim,
  html body .real-agent-stage[data-agent-focus="claude"] .claude-sim,
  html body .real-agent-stage[data-agent-focus="codex"] .claude-sim {
    transform: translateY(-8px);
  }

  html body .sim-window-bar {
    min-height: 36px;
    padding-inline: 13px;
  }

  html body .codex-window-bar { font-size: 13px; }
  html body .codex-window-actions { font-size: 11px; }
  html body .codex-app-real {
    grid-template-columns: 190px minmax(0, 1fr) 175px;
  }
  html body .codex-sidebar { padding: 14px 11px 42px; }
  html body .codex-app-real .codex-brand { font-size: 14px; }
  html body .codex-app-real .codex-primary-nav > span {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 12.5px;
  }
  html body .codex-app-real .codex-section-label,
  html body .codex-app-real .codex-nav-label { font-size: 10.5px; }
  html body .codex-app-real .codex-project b,
  html body .codex-app-real .codex-thread-item b { font-size: 12px; }
  html body .codex-app-real .codex-project small,
  html body .codex-app-real .codex-thread-item small { font-size: 10.5px; }
  html body .codex-app-real .codex-project,
  html body .codex-app-real .codex-thread-item { min-height: 40px; }
  html body .codex-app-real .codex-account {
    right: 11px;
    bottom: 14px;
    left: 11px;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    gap: 8px;
    min-height: 42px;
    padding-top: 10px;
    color: #20211f;
    font-size: 14px;
    font-weight: 500;
  }
  html body .codex-app-real .codex-account > i {
    width: 20px;
    height: 20px;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  html body .codex-app-real .codex-account > b {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: #858886;
    border: 1.5px solid #959896;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }
  html body .codex-thread-view > header { min-height: 48px; }
  html body .codex-thread-view > header b { font-size: 13px; }
  html body .codex-thread-view > header small,
  html body .codex-thread-view > header em { font-size: 10.5px; }
  html body .codex-user-message,
  html body .codex-response p { font-size: 13px; }
  html body .codex-user-message { padding: 10px 12px; }
  html body .codex-summary span { font-size: 10.5px; }
  html body .codex-summary strong { font-size: 13px; }
  html body .codex-summary small { font-size: 11px; }
  html body .codex-response pre {
    padding: 11px 12px;
    font-size: 11.5px;
  }
  html body .codex-memory-saved b { font-size: 11px; }
  html body .codex-memory-saved small { font-size: 10.5px; }
  html body .codex-composer {
    min-height: 46px;
    font-size: 12px;
  }
  html body .codex-app-real .codex-inspector { padding: 13px 10px; }
  html body .codex-app-real .codex-inspector header { font-size: 11px; }
  html body .codex-app-real .codex-inspector .codex-inspector-row b { font-size: 11px; }
  html body .codex-app-real .codex-inspector .codex-source,
  html body .codex-app-real .codex-inspector .codex-source-more { font-size: 10.5px; }

  html body .claude-sim .claude-tab { font-size: 12px; }
  html body .claude-sim .claude-tab-add { font-size: 10px; }
  html body .claude-video-shell {
    grid-template-columns: 166px minmax(0, 1fr);
  }
  html body .claude-app-sidebar {
    padding: 9px 6px 40px;
    font-size: 10.5px;
  }
  html body .claude-sidebar-tools {
    min-height: 18px;
    padding-inline: 5px;
    gap: 10px;
    font-size: 0;
  }
  html body .claude-sidebar-tools span {
    display: grid;
    width: 13px;
    height: 13px;
    place-items: center;
    color: #8d8b85;
  }
  html body .claude-sidebar-tools svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html body .claude-app-mode {
    gap: 2px;
    margin: 4px 0 8px;
    padding: 2px;
    border-radius: 7px;
  }
  html body .claude-app-mode > * {
    gap: 5px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 5px;
    font-size: 10.5px;
  }
  html body .claude-app-mode b {
    box-shadow:
      0 1px 2px rgba(36, 34, 30, 0.08),
      0 0 0 0.5px rgba(36, 34, 30, 0.06);
  }
  html body .claude-app-mode i,
  html body .claude-app-nav i {
    width: 13px;
    flex-basis: 13px;
    font-size: 12px;
  }
  html body .claude-app-nav {
    gap: 1px;
  }
  html body .claude-app-nav > * {
    gap: 7px;
    min-height: 25px;
    padding-inline: 7px;
    border-radius: 6px;
    font-size: 10.5px;
  }
  html body .claude-recent-heading {
    margin: 17px 7px 6px;
    padding: 0;
    font-size: 9.5px;
  }
  html body .claude-recent-list li {
    min-height: 25px;
    padding-inline: 7px;
    border-radius: 6px;
    font-size: 10px;
  }
  html body .claude-sidebar-account {
    right: 6px;
    bottom: 8px;
    left: 6px;
    min-height: 32px;
    padding-inline: 7px;
    font-size: 10.5px;
  }
  html body .claude-terminal-home > .claude-workspace-header {
    min-height: 40px;
    font-size: 10.5px;
  }
  html body .claude-terminal-home .claude-workspace-actions em,
  html body .claude-terminal-home .claude-workspace-actions b { font-size: 10px; }
  html body .claude-code-workspace {
    grid-template-columns: minmax(0, 1fr) 160px;
  }
  html body .claude-video-idle {
    width: calc(100% - 36px);
    max-width: 460px;
  }
  html body .claude-terminal-startup {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
  html body .claude-terminal-startup img {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.35em;
    vertical-align: -0.075em;
  }
  html body .claude-terminal-startup b {
    display: block;
    transform: translateX(-4px);
    font-size: clamp(24px, 2.1vw, 28px);
    font-weight: 330;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
  }
  html body .claude-terminal-startup b > span {
    display: inline;
  }
  html body .claude-video-prompt {
    display: flex;
    width: min(440px, calc(100% - 20px));
    margin-inline: auto;
    min-height: 116px;
    padding: 17px 17px 13px;
    flex-direction: column;
    gap: 12px;
    border-color: #dedbd5;
    border-radius: 19px;
    box-shadow:
      0 10px 28px rgba(45, 42, 36, 0.065),
      0 1px 2px rgba(45, 42, 36, 0.035);
    font-size: 13.5px;
    line-height: 1.5;
  }
  html body .claude-video-prompt p {
    min-height: 42px;
    padding-right: 0;
  }
  html body .claude-video-prompt footer {
    display: flex;
    width: 100%;
    min-height: 27px;
    gap: 8px;
    align-items: center;
    color: #8c8982;
    font-size: 11px;
  }
  html body .claude-video-prompt footer .claude-prompt-add {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    color: #65625d;
    font-size: 16px;
  }
  html body .claude-prompt-surface {
    display: flex;
    height: 25px;
    padding: 2px;
    align-items: center;
    color: #98958f;
    background: #f3f2ef;
    border-radius: 7px;
  }
  html body .claude-prompt-surface b,
  html body .claude-prompt-surface i {
    display: grid;
    height: 21px;
    padding-inline: 8px;
    place-items: center;
    border-radius: 5px;
    font-style: normal;
    font-weight: 500;
  }
  html body .claude-prompt-surface b {
    color: #35332f;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(45, 42, 36, 0.09),
      0 0 0 0.5px rgba(45, 42, 36, 0.06);
  }
  html body .claude-prompt-model {
    display: flex;
    margin-left: auto;
    gap: 4px;
    align-items: center;
    color: #35332f;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
  }
  html body .claude-prompt-model i {
    color: #918e87;
    font-style: normal;
    font-weight: 400;
  }
  html body .claude-prompt-model small {
    color: #77746e;
    font-size: 10px;
  }
  html body .claude-prompt-key {
    margin-right: 30px;
    color: #aaa7a0;
    white-space: nowrap;
  }
  html body .claude-video-prompt button[data-session-demo-start] {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 25px;
    height: 25px;
    border-radius: 8px;
  }
  html body .claude-code-shortcuts {
    gap: 8px;
    margin-top: 12px;
  }
  html body .claude-code-shortcuts span {
    min-height: 31px;
    padding: 7px 10px;
    border-radius: 9px;
    box-shadow:
      0 2px 5px rgba(45, 42, 36, 0.055),
      0 0 0 0.5px rgba(45, 42, 36, 0.035);
    font-size: 11.5px;
  }
  html body .claude-diff-panel {
    padding: 13px 10px 38px;
    font-size: 11px;
  }
  html body .claude-diff-panel > header { font-size: 12px; }
  html body .claude-diff-panel > header b { font-size: 10.5px; }
  html body .claude-diff-panel li {
    min-height: 25px;
    padding-inline: 6px;
    border-radius: 6px;
  }
  html body .claude-mini-diff {
    gap: 4px;
    padding: 9px 7px;
    border-radius: 8px;
  }
  html body .claude-diff-panel li span i,
  html body .claude-diff-panel li b,
  html body .claude-mini-diff small { font-size: 10.5px; }
  html body .claude-repo-state b { font-size: 10.5px; }
  html body .claude-repo-state small { font-size: 10px; }
  html body .claude-video-session .claude-user-prompt { font-size: 13px; }
  html body .claude-video-session .claude-harmonizing { font-size: 12px; }
  html body .claude-video-session .claude-terminal-event,
  html body .claude-video-session .claude-terminal-inspection { font-size: 11px; }
  html body .claude-video-session .claude-memory-log > header,
  html body .claude-video-session .claude-memory-log p { font-size: 11px; }
  html body .claude-video-session .claude-memory-log small { font-size: 10.5px; }
  html body .claude-video-session .claude-video-answer strong { font-size: 13px; }
  html body .claude-video-session .claude-video-answer p { font-size: 12px; }
  html body .claude-video-session .claude-finish { font-size: 10.5px; }
}

/* Codex sidebar: current app's native single-line 30px row system. */
@media (min-width: 901px) {
  html body .hero .codex-app-real {
    grid-template-columns: 188px minmax(0, 1fr) 175px;
  }

  html body .hero .codex-app-real .codex-sidebar {
    padding: 10px 8px 34px 7px;
  }

  html body .hero .codex-app-real .codex-project,
  html body .hero .codex-app-real .codex-thread-item {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0 8px;
    border-radius: 10px;
  }

  html body .hero .codex-app-real .codex-project {
    margin-bottom: 2px;
  }

  html body .hero .codex-app-real .codex-project > i,
  html body .hero .codex-app-real .codex-thread-item > i {
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 0;
    background: transparent;
  }

  html body .hero .codex-app-real .codex-project > i {
    display: grid;
    place-items: center;
    color: rgba(26, 28, 31, 0.82);
  }

  html body .hero .codex-app-real .codex-project > i svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html body .hero .codex-app-real .codex-thread-item > i {
    visibility: hidden;
  }

  html body .hero .codex-app-real .codex-project > span,
  html body .hero .codex-app-real .codex-thread-item > span {
    display: block;
    min-width: 0;
  }

  html body .hero .codex-app-real .codex-project b,
  html body .hero .codex-app-real .codex-thread-item b {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 450;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body .hero .codex-app-real .codex-project small,
  html body .hero .codex-app-real .codex-thread-item small {
    display: none;
  }

  html body .hero .codex-app-real .codex-thread-item.is-active {
    background: rgba(26, 28, 31, 0.05);
  }
}

/* Keep this final override after the demo-scale rules above. */
@media (min-width: 901px) {
  html body .hero .codex-app-real .codex-primary-nav > span,
  html body .hero .codex-app-real .codex-project b {
    font-size: 10.5px;
    font-weight: 445;
    line-height: 20px;
  }

  html body .hero .codex-app-real .codex-thread-item b {
    font-size: 10px;
    font-weight: 445;
    line-height: 20px;
  }

  html body .hero .codex-app-real .codex-section-label,
  html body .hero .codex-app-real .codex-nav-label {
    font-size: 9.5px;
    font-weight: 445;
    line-height: 20px;
  }
}

/* Case disclosures: the chevron is the playback control; keep separators quiet. */
html body #cases .case-process-title,
html.theme-dark body #cases .case-process-title {
  display: block;
  min-width: 0;
}

html body #cases .case-process-details,
html body #cases .case-lab-video,
html.theme-dark body #cases .case-process-details,
html.theme-dark body #cases .case-lab-video {
  border-top: 0;
}

html body #cases .case-process-details[open] > summary,
html body #cases .case-lab-video[open] > summary,
html.theme-dark body #cases .case-process-details[open] > summary,
html.theme-dark body #cases .case-lab-video[open] > summary {
  border-bottom: 0;
}

/* Codex sidebar: mirror the installed app's 30px row and 16px icon tokens. */
@media (min-width: 901px) {
  html body .hero .codex-app-real .codex-primary-nav {
    gap: 0;
  }

  html body .hero .codex-app-real .codex-primary-nav > span {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    gap: 8px;
    border-radius: 10px;
  }

  html body .hero .codex-app-real .codex-primary-nav svg,
  html body .hero .codex-app-real .codex-brand-tools svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  html body .hero .codex-app-real .codex-primary-nav svg {
    stroke-width: 1.6;
  }

  html body .hero .codex-app-real .codex-brand-tools {
    gap: 8px;
  }
}

/* Cursor-inspired bounded dragging for the two hero application windows. */
@media (min-width: 901px) {
  html body .hero .real-agent-grid .sim-window-bar {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  html body .hero .real-agent-grid .codex-sim {
    transform: translate3d(var(--agent-drag-x, 0px), var(--agent-drag-y, 0px), 0);
  }

  html body .hero .real-agent-grid .claude-sim,
  html body .hero .real-agent-stage[data-agent-focus="claude"] .claude-sim,
  html body .hero .real-agent-stage[data-agent-focus="codex"] .claude-sim {
    transform: translate3d(var(--agent-drag-x, 0px), calc(var(--agent-drag-y, 0px) - 32px), 0);
  }

  html body .hero .real-agent-grid [data-agent-panel].is-agent-dragging {
    cursor: grabbing;
    transition: none;
    user-select: none;
  }

html body .hero .real-agent-grid [data-agent-panel].is-agent-dragging .sim-window-bar {
    cursor: grabbing;
  }
}

/* Codex conversation: mirror the installed app's native message primitives. */
html body .hero .codex-app-real .codex-response-mark {
  display: none;
}

html body .hero .codex-app-real .codex-response-timing {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 18px;
  padding: 0 0 8px;
  color: rgba(26, 28, 31, 0.56);
  border-bottom: 0.5px solid rgba(24, 24, 21, 0.1);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

html body .hero .codex-app-real .codex-response-timing svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

@media (min-width: 901px) {
  html body .hero .codex-app-real .codex-thread-scroll {
    width: min(100%, 500px);
    padding-inline: 16px;
  }

  html body .hero .codex-app-real .codex-user-message {
    box-sizing: border-box;
    width: fit-content;
    max-width: 77%;
    min-width: 0;
    padding: 8px 12px;
    overflow: hidden;
    color: rgba(26, 28, 31, 0.82);
    background: rgba(26, 28, 31, 0.05);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  html body .hero .codex-app-real .codex-response {
    display: block;
    min-width: 0;
    margin-top: 12px;
  }

  html body .hero .codex-app-real .codex-response > div {
    min-width: 0;
  }

  html body .hero .codex-app-real .codex-response p {
    margin: 0;
    color: rgba(26, 28, 31, 0.82);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
  }

  html body .hero .codex-app-real .codex-summary {
    display: flex;
    gap: 3px;
    margin-top: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  html body .hero .codex-app-real .codex-summary span {
    color: rgba(26, 28, 31, 0.48);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
  }

  html body .hero .codex-app-real .codex-summary strong {
    color: rgba(26, 28, 31, 0.92);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
  }

  html body .hero .codex-app-real .codex-summary small {
    color: rgba(26, 28, 31, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }
}

/* Codex thread summary is an elevated popover, not a stretched third column. */
@media (min-width: 901px) {
  html body .hero .codex-app-real {
    position: relative;
    grid-template-columns: 20% minmax(0, 80%);
  }

  html body .hero .codex-app-real .codex-inspector {
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 16px;
    width: 260px;
    max-width: calc(100% - 32px);
    height: auto;
    max-height: calc(100% - 16px);
    margin: 0;
    padding: 10px 14px 8px;
    align-self: start;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--codex-secondary);
    background: rgba(255, 255, 255, 0.98);
    border: 0;
    border-radius: 25px;
    box-shadow: 0 0 0 0.5px rgba(13, 13, 13, 0.1), 0 3px 7.5px rgba(13, 13, 13, 0.04), 0 0 20px rgba(13, 13, 13, 0.05);
  }

  html body .hero .codex-app-real .codex-inspector > header {
    min-height: 28px;
    padding: 0 0 2px;
    color: var(--codex-tertiary);
    font-size: 14px;
  }

  html body .hero .codex-app-real .codex-inspector > header b {
    color: var(--codex-tertiary);
    font-size: 12.5px;
    font-weight: 520;
  }

  html body .hero .codex-app-real .codex-inspector > header span,
  html body .hero .codex-app-real .codex-inspector .codex-inspector-label span {
    font-size: 20px;
    line-height: 1;
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-row {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 29px;
    padding: 0;
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-row svg {
    width: 16px;
    height: 16px;
    color: var(--codex-secondary);
    stroke-width: 1.7;
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-row b {
    color: var(--codex-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-row.is-muted b,
  html body .hero .codex-app-real .codex-inspector .codex-inspector-row > em {
    color: var(--codex-tertiary);
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-rule {
    height: 1px;
    min-height: 1px;
    margin: 12px 0 0;
    background: var(--codex-border);
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-label {
    min-height: 28px;
  }

  html body .hero .codex-app-real .codex-inspector .codex-inspector-label small {
    color: var(--codex-tertiary);
    font-size: 12px;
    font-weight: 500;
  }

  html body .hero .codex-app-real .codex-inspector .codex-source,
  html body .hero .codex-app-real .codex-inspector .codex-source-more {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    min-height: 30px;
    color: var(--codex-tertiary);
    font-size: 12.5px;
  }

  html body .hero .codex-app-real .codex-inspector .codex-source-thumb {
    width: 22px;
    height: 19px;
    border-color: var(--codex-border-heavy);
    border-radius: 5px;
  }

  html body .hero .codex-app-real .codex-inspector .codex-source-more svg {
    width: 16px;
    height: 16px;
  }
}

/* Codex window-toolbar controls and the native summary-panel reveal motion. */
html body .hero .codex-thread-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  justify-self: end;
}

html body .hero .codex-location-button,
html body .hero .codex-inspector-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin: 0;
  color: var(--codex-ink);
  background: #fff;
  border: 0;
  font: inherit;
}

html body .hero .codex-location-button {
  gap: 5px;
  padding: 0 8px;
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px var(--codex-border-heavy), 0 1px 2px rgba(13, 13, 13, 0.04);
}

html body .hero .codex-location-button > span {
  color: var(--codex-ink);
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1;
}

html body .hero .codex-location-chevron {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--codex-tertiary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

html body .hero .codex-inspector-toggle {
  width: 28px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

html body .hero .codex-inspector-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

html body .hero .codex-inspector-toggle[aria-expanded="true"] {
  background: rgba(26, 28, 31, 0.075);
}

html body .hero .codex-inspector-toggle:hover {
  background: rgba(26, 28, 31, 0.055);
}

html body .hero .codex-inspector-toggle:focus-visible {
  outline: 2px solid rgba(22, 133, 229, 0.7);
  outline-offset: 2px;
}

html body .hero .codex-app-real .codex-inspector .codex-browser-row {
  grid-template-columns: 18px minmax(0, 1fr);
}

html body .hero .codex-browser-mark {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

@media (min-width: 901px) {
  html body .hero .codex-app-real .codex-inspector {
    transform: translateX(0) scale(1);
    transform-origin: top right;
    opacity: 1;
    visibility: visible;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease, visibility 180ms ease;
  }

  html body .hero .codex-app-real .codex-inspector.is-collapsed {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero .codex-app-real .codex-inspector {
    transition: none;
  }
}

/* Hero taskboards: a 0.5px lift without changing spacing or hierarchy. */
@media (min-width: 901px) {
  html body .hero .codex-app-real .codex-primary-nav > span,
  html body .hero .codex-app-real .codex-project b {
    font-size: 11px;
  }

  html body .hero .codex-app-real .codex-thread-item b {
    font-size: 10.5px;
  }

  html body .hero .codex-app-real .codex-section-label,
  html body .hero .codex-app-real .codex-nav-label {
    font-size: 10px;
  }

  html body .hero .claude-app-mode > *,
  html body .hero .claude-app-nav > *,
  html body .hero .claude-sidebar-account {
    font-size: 11px;
  }

  html body .hero .claude-recent-heading {
    font-size: 10px;
  }

  html body .hero .claude-recent-list li {
    font-size: 10.5px;
  }
}

/* Claude Code hairline calibration ----------------------------------------
 * Native app chrome separates surfaces with low-contrast hairlines. Keep
 * hierarchy in the fills; let borders describe structure without boxing it.
 */
:root {
  --ui-rule: rgba(24, 24, 21, 0.045);
  --ui-rule-strong: rgba(24, 24, 21, 0.065);
  --ui-hairline: rgba(24, 24, 21, 0.055);
  --ui-hairline-strong: rgba(24, 24, 21, 0.065);
  --claude-chrome-rule: rgba(24, 24, 21, 0.25);
  --claude-frame-rule: rgba(24, 24, 21, 0.14);
  --claude-control-rule: rgba(24, 24, 21, 0.1);
}

html body .theme-toggle,
html body .language-toggle,
html body .claude-model-menu,
html body .claude-model-item > i,
html body .claude-terminal-home .claude-workspace-actions em,
html body .claude-terminal-home .claude-workspace-actions b,
html body .claude-video-prompt,
html body .claude-code-shortcuts span {
  border-width: 0.5px;
  border-color: var(--ui-hairline-strong);
}

html:not(.theme-dark) body .hero .hero-actions .button-secondary,
html:not(.theme-dark) body .hero .hero-actions .button-secondary:hover {
  border: 0;
  box-shadow:
    inset 0 0 0 0.5px var(--claude-control-rule),
    0 1px 2px rgba(24, 24, 21, 0.018);
}

html body .hero .hero-actions .button-primary,
html body .header-cta {
  border: 0;
}

html body .hero .real-agent-grid .codex-sim,
html body .hero .real-agent-grid .claude-sim {
  border-width: 0.5px;
  border-style: solid;
  border-color: var(--claude-frame-rule);
}

html body .claude-sim {
  --claude-app-rule: rgba(24, 24, 21, 0.075);
  border-color: var(--claude-frame-rule);
}

html body .hero .claude-sim .claude-tabbar,
html body .hero .codex-window-bar {
  border-top: 0;
  border-bottom: 0.5px solid var(--claude-chrome-rule);
  box-shadow: none;
}

html body .claude-terminal-home > .claude-workspace-header {
  border-bottom: 0.5px solid var(--claude-app-rule);
}

html body .claude-diff-panel {
  border-left-width: 0.5px;
}

html body .claude-sidebar-account,
html body .claude-model-submenu {
  border-top-width: 0.5px !important;
}

html body .claude-video-prompt {
  border-color: var(--claude-frame-rule);
  box-shadow:
    0 8px 24px rgba(24, 24, 21, 0.035),
    0 1px 2px rgba(24, 24, 21, 0.018);
}

html body .claude-app-mode b {
  box-shadow:
    inset 0 0 0 0.5px var(--claude-control-rule),
    0 1px 2px rgba(24, 24, 21, 0.025);
}

html body .claude-terminal-home .claude-workspace-actions em,
html body .claude-terminal-home .claude-workspace-actions b,
html body .claude-code-shortcuts span,
html body .claude-model-item > i {
  border-color: var(--claude-control-rule);
  box-shadow: 0 1px 2px rgba(24, 24, 21, 0.018);
}

html body .section-memories .memory-grid-lineart,
html.theme-dark body .section-memories .memory-grid-lineart,
html body #cases .case-grid,
html.theme-dark body #cases .case-grid,
html body #quickstart .quickstart-tabs,
html.theme-dark body #quickstart .quickstart-tabs,
html body #quickstart .quickstart-panel,
html.theme-dark body #quickstart .quickstart-panel,
html body #quickstart .quickstart-install-journey,
html.theme-dark body #quickstart .quickstart-install-journey,
html body #architecture-comparison .comparison-table-wrap,
html.theme-dark body #architecture-comparison .comparison-table-wrap {
  border-width: 0.5px;
  border-color: var(--ui-hairline);
}

html body .section-memories .memory-grid-lineart,
html.theme-dark body .section-memories .memory-grid-lineart,
html body #cases .case-grid,
html.theme-dark body #cases .case-grid,
html body #quickstart .quickstart-tabs,
html.theme-dark body #quickstart .quickstart-tabs,
html body #quickstart .quickstart-install-journey,
html.theme-dark body #quickstart .quickstart-install-journey {
  gap: 0.5px;
  background: var(--ui-hairline);
}

html body #quickstart .quickstart-panel-intro,
html.theme-dark body #quickstart .quickstart-panel-intro,
html body #quickstart .quickstart-command-lines,
html body #quickstart .quickstart-command-line + .quickstart-command-line {
  border-width: 0.5px;
  border-color: var(--ui-hairline);
}

html body #quickstart .quickstart-install-card {
  box-shadow: inset 0 0 0 0.5px var(--ui-hairline);
}

html body #quickstart .quickstart-bubble.is-user,
html body #quickstart .quickstart-memory-status {
  border-width: 0.5px;
}

html body #quickstart .quickstart-memory-result span {
  border-width: 0.5px;
}

@media (max-resolution: 1dppx) {
  html body .theme-toggle,
  html body .language-toggle,
  html body .claude-model-menu,
  html body .claude-video-prompt,
  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    border-width: 1px;
  }
}

/* Match the native Codex workspace switcher proportions. */
html body .hero .codex-app-real .codex-brand > b {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--codex-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

html body .hero .codex-app-real .codex-brand .codex-brand-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--codex-tertiary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

html body .hero .codex-thread-view > header {
  border-bottom-width: 0.5px;
}

html[data-language="en"] body .hero .codex-app-real .codex-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-items: start;
}

html[data-language="en"] body .hero .codex-app-real .codex-summary > * {
  min-width: 0;
}

html body .hero .claude-video-prompt p.is-awaiting::before {
  padding-left: 3px;
  color: #95938d;
  border-left: 1px solid #252522;
  content: attr(data-placeholder);
  animation: claude-prompt-placeholder-caret 920ms steps(1, end) infinite;
}

html body .hero .claude-video-prompt p[data-claude-typing-prompt] {
  width: 100%;
  align-self: stretch;
  text-align: left;
}

html body .hero .claude-video-prompt p.is-typing::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  content: "";
  animation: claude-prompt-caret 920ms steps(1, end) infinite;
}

html body .hero .claude-video-prompt:focus-visible {
  outline: 1px solid rgba(112, 108, 101, 0.42);
  outline-offset: 3px;
}

html body .hero .claude-video-prompt.is-composing button[data-claude-send-button] {
  color: rgba(72, 69, 63, 0.42);
  background: #ece9e5;
  box-shadow: none;
  cursor: default;
}

html body .hero .claude-video-prompt.is-ready button[data-claude-send-button] {
  animation: claude-send-ready 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html body .hero .claude-video-prompt.is-composing .claude-prompt-key {
  color: #9b9891;
}

@keyframes claude-prompt-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes claude-prompt-placeholder-caret {
  0%, 48% { border-left-color: #252522; }
  49%, 100% { border-left-color: transparent; }
}

@keyframes claude-send-ready {
  0% { transform: scale(0.92); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero .claude-video-prompt p.is-typing::after,
  html body .hero .claude-video-prompt p.is-awaiting::before,
  html body .hero .claude-video-prompt.is-ready button[data-claude-send-button] {
    animation: none;
  }
}

/* Codex → Claude story: create the memory first, then visibly hand it off. */
html body .hero .session-demo [data-codex-step],
html body .hero .session-demo [data-codex-working] {
  display: none;
}

html body .hero .session-demo .codex-user-message.is-visible,
html body .hero .session-demo .codex-response p.is-visible,
html body .hero .session-demo .codex-response pre.is-visible {
  display: block;
  animation: codex-story-step-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html body .hero .session-demo .codex-response-timing.is-visible,
html body .hero .session-demo .codex-summary.is-visible,
html body .hero .session-demo .codex-memory-saved.is-visible,
html body .hero .session-demo .codex-work-status.is-visible {
  display: flex;
  animation: codex-story-step-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html body .hero .session-demo .codex-work-status {
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  color: rgba(26, 28, 31, 0.56);
  font-size: 12px;
  line-height: 1.4;
}

html body .hero .session-demo .codex-work-status > i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1.5px solid rgba(26, 28, 31, 0.18);
  border-top-color: rgba(26, 28, 31, 0.68);
  border-radius: 50%;
  animation: codex-story-spin 780ms linear infinite;
}

html body .hero .session-demo[data-state^="codex-"] .claude-welcome {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}

html body .hero .session-demo[data-state^="codex-"] .claude-session {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
}

html body .hero .codex-composer [data-codex-typing-prompt] {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(26, 28, 31, 0.78);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .hero .codex-composer [data-codex-typing-prompt].is-awaiting::before {
  color: rgba(26, 28, 31, 0.42);
  content: attr(data-placeholder);
}

html body .hero .codex-composer [data-codex-typing-prompt].is-typing::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  content: "";
  animation: codex-story-caret 900ms steps(1, end) infinite;
}

html body .hero .codex-composer.is-composing button[data-codex-send-button],
html body .hero .codex-composer.is-submitted button[data-codex-send-button] {
  color: rgba(255, 255, 255, 0.68);
  background: rgba(48, 48, 48, 0.38);
  cursor: default;
}

html body .hero .codex-composer.is-ready button[data-codex-send-button] {
  animation: codex-story-send-ready 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html body .hero .codex-composer.is-sending button[data-codex-send-button],
html body .hero .claude-video-prompt button[data-claude-send-button].is-sending {
  transform: translateY(-2px) scale(0.92);
  filter: brightness(1.12);
}

html body .hero .session-demo[data-state="codex-memory"] .codex-memory-saved,
html body .hero .session-demo[data-state="codex-handoff"] .codex-memory-saved {
  box-shadow: 0 0 0 1px rgba(72, 138, 112, 0.2), 0 8px 24px rgba(72, 138, 112, 0.12);
}

html body .hero .session-demo[data-state="codex-handoff"] .handoff-stage-label p > i {
  background: #4d9779;
  box-shadow: 0 0 0 5px rgba(77, 151, 121, 0.12);
}

html body .hero .session-demo[data-state="codex-handoff"] .claude-video-prompt.is-ready button[data-claude-send-button] {
  animation: claude-handoff-ready 1600ms ease-in-out infinite;
}

html body .hero .interactive-case-label {
  position: absolute;
  z-index: 12;
  top: -16px;
  left: 28px;
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #77736d;
  background: rgba(250, 249, 247, 0.96);
  border: 1px solid rgba(31, 31, 29, 0.11);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(31, 31, 29, 0.05);
  font: 500 11px/1 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.005em;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

html body .hero .interactive-case-label::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: #4d9779;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(77, 151, 121, 0.1);
  content: "";
}

html body .hero .interactive-case-label > span {
  color: #96918a;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
}

html body .hero .interactive-case-label > b {
  color: #4f4c47;
  font-weight: 500;
}

@media (max-width: 700px) {
  html body .hero .interactive-case-label {
    top: -14px;
    left: 14px;
    min-height: 28px;
    padding-inline: 11px;
    font-size: 10px;
  }

  html body .hero .interactive-case-label > span {
    display: none;
  }
}

@keyframes codex-story-step-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes codex-story-spin {
  to { transform: rotate(360deg); }
}

@keyframes codex-story-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes codex-story-send-ready {
  0% { transform: scale(0.92); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes claude-handoff-ready {
  0%, 100% { box-shadow: 0 4px 12px rgba(207, 99, 66, 0.18); transform: translateY(0); }
  50% { box-shadow: 0 5px 18px rgba(207, 99, 66, 0.34); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero .session-demo .is-visible,
  html body .hero .session-demo .codex-work-status > i,
  html body .hero .codex-composer [data-codex-typing-prompt].is-typing::after,
  html body .hero .codex-composer.is-ready button[data-codex-send-button],
  html body .hero .session-demo[data-state="codex-handoff"] .claude-video-prompt.is-ready button[data-claude-send-button] {
    animation: none;
  }
}

/* Cross-session handoff story: two real agents, one guided memory path. */
html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
  position: absolute;
  z-index: 24;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(290px, 1.5fr) minmax(190px, 0.9fr) auto;
  gap: 18px;
  align-items: center;
  width: auto;
  height: 72px;
  padding: 10px 12px 10px 18px;
  overflow: visible;
  color: #262623;
  background: rgba(249, 248, 245, 0.96);
  border: 1px solid rgba(31, 31, 29, 0.1);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(31, 31, 29, 0.055);
  clip: auto;
  clip-path: none;
  white-space: normal;
  backdrop-filter: blur(18px);
}

html body .hero .session-story-step {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 12px;
  opacity: 0.46;
  transition: color 300ms ease, background-color 300ms ease, opacity 300ms ease;
}

html body .hero .session-story-step > span {
  color: #88847d;
  font: 600 8px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.1em;
}

html body .hero .session-story-step > b {
  overflow: hidden;
  color: #292926;
  font: 540 12px/1.3 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .hero .session-story-step > small {
  overflow: hidden;
  color: #89857f;
  font: 400 9px/1.3 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .hero .session-story-path {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 50px;
}

html body .hero .session-story-line {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  overflow: hidden;
  background: rgba(31, 31, 29, 0.12);
}

html body .hero .session-story-line > span {
  display: block;
  width: 0;
  height: 100%;
  background: #4d9779;
  transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .hero .session-story-memory {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px 6px 7px;
  background: #f9f8f5;
  border: 1px solid rgba(31, 31, 29, 0.1);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(31, 31, 29, 0.045);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

html body .hero .session-story-memory > em {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: #fff;
  background: #262723;
  border-radius: 50%;
  font: 600 10px/1 Inter, sans-serif;
  font-style: normal;
}

html body .hero .session-story-memory > span {
  display: grid;
  min-width: 0;
}

html body .hero .session-story-memory b {
  color: #32322f;
  font: 550 10px/1.25 Inter, sans-serif;
}

html body .hero .session-story-memory small {
  overflow: hidden;
  color: #817d77;
  font: 400 8px/1.35 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .hero .session-story-play {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 38px;
  padding: 0 15px;
  color: #fff;
  background: #20211e;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(31, 31, 29, 0.12);
  font: 500 11px/1 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
}

html body .hero .session-story-play:hover:not(:disabled) {
  transform: translateY(-1px);
}

html body .hero .session-story-play:disabled {
  opacity: 0.42;
  cursor: default;
}

html body .hero .session-story-play > i {
  font-size: 8px;
  font-style: normal;
}

html body .hero .session-demo[data-state="idle"] .session-story-source,
html body .hero .session-demo[data-state^="codex-"] .session-story-source,
html body .hero .session-demo[data-state="asking"] .session-story-target,
html body .hero .session-demo[data-state="skill"] .session-story-target,
html body .hero .session-demo[data-state="searching"] .session-story-target,
html body .hero .session-demo[data-state="memory-1"] .session-story-target,
html body .hero .session-demo[data-state="inspecting"] .session-story-target,
html body .hero .session-demo[data-state="answer"] .session-story-target {
  background: rgba(255, 255, 255, 0.86);
  opacity: 1;
}

html body .hero .session-demo[data-state="codex-memory"] .session-story-line > span {
  width: 44%;
}

html body .hero .session-demo[data-state="codex-handoff"] .session-story-line > span {
  width: 62%;
}

html body .hero .session-demo[data-state="asking"] .session-story-line > span,
html body .hero .session-demo[data-state="skill"] .session-story-line > span,
html body .hero .session-demo[data-state="searching"] .session-story-line > span,
html body .hero .session-demo[data-state="memory-1"] .session-story-line > span,
html body .hero .session-demo[data-state="inspecting"] .session-story-line > span,
html body .hero .session-demo[data-state="answer"] .session-story-line > span {
  width: 100%;
}

html body .hero .session-demo[data-state="codex-memory"] .session-story-memory,
html body .hero .session-demo[data-state="codex-handoff"] .session-story-memory,
html body .hero .session-demo[data-state="searching"] .session-story-memory,
html body .hero .session-demo[data-state="memory-1"] .session-story-memory {
  border-color: rgba(77, 151, 121, 0.42);
  box-shadow: 0 4px 16px rgba(77, 151, 121, 0.13);
  transform: translateY(-1px);
}

html body .hero .session-demo[data-state="codex-handoff"] .session-story-memory > em,
html body .hero .session-demo[data-state="searching"] .session-story-memory > em,
html body .hero .session-demo[data-state="memory-1"] .session-story-memory > em,
html body .hero .session-demo[data-state="answer"] .session-story-memory > em {
  background: #4d9779;
}

@media (min-width: 901px) {
  html body .hero .cursor-scene,
  html.theme-dark body .hero .cursor-scene {
    min-height: 724px;
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 700px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 84px;
    height: 616px;
  }

  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim {
    top: 24px;
    height: calc(100% - 48px);
    cursor: default;
  }

  html body .hero .real-agent-grid .sim-window-bar {
    cursor: default;
    touch-action: auto;
    user-select: auto;
  }

  html body .hero .session-demo .codex-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .codex-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .codex-sim {
    transform: translateY(8px);
  }

  html body .hero .session-demo .claude-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .claude-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .claude-sim {
    transform: translateY(-24px);
  }

  html body .hero .session-demo .codex-sim {
    z-index: 2;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.07);
  }

  html body .hero .session-demo .claude-sim {
    z-index: 1;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.055);
  }

  html body .hero .session-demo[data-state="codex-handoff"] .codex-sim,
  html body .hero .session-demo[data-state="asking"] .codex-sim,
  html body .hero .session-demo[data-state="skill"] .codex-sim,
  html body .hero .session-demo[data-state="searching"] .codex-sim,
  html body .hero .session-demo[data-state="memory-1"] .codex-sim,
  html body .hero .session-demo[data-state="inspecting"] .codex-sim,
  html body .hero .session-demo[data-state="answer"] .codex-sim {
    z-index: 1;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.055);
  }

  html body .hero .session-demo[data-state="codex-handoff"] .claude-sim,
  html body .hero .session-demo[data-state="asking"] .claude-sim,
  html body .hero .session-demo[data-state="skill"] .claude-sim,
  html body .hero .session-demo[data-state="searching"] .claude-sim,
  html body .hero .session-demo[data-state="memory-1"] .claude-sim,
  html body .hero .session-demo[data-state="inspecting"] .claude-sim,
  html body .hero .session-demo[data-state="answer"] .claude-sim {
    z-index: 2;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.07);
  }

  html body .hero .real-handoff-link {
    position: absolute;
    z-index: 18;
    top: 50%;
    left: 44%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 154px;
    padding: 10px 12px;
    color: #343531;
    background: rgba(250, 250, 247, 0.97);
    border: 1px solid rgba(77, 151, 121, 0.28);
    border-radius: 13px;
    box-shadow: 0 12px 32px rgba(35, 54, 45, 0.16);
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition: left 720ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, transform 320ms ease, visibility 240ms ease;
  }

  html body .hero .real-handoff-link > span {
    color: #4d9779;
    font: 650 8px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
    letter-spacing: 0.09em;
  }

  html body .hero .real-handoff-link > strong {
    color: #2e2f2b;
    font: 570 11px/1.35 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  }

  html body .hero .real-handoff-link > small {
    color: #85817b;
    font: 400 8px/1.35 Inter, sans-serif;
  }

  html body .hero .session-demo[data-state="codex-memory"] .real-handoff-link,
  html body .hero .session-demo[data-state="codex-handoff"] .real-handoff-link,
  html body .hero .session-demo[data-state="asking"] .real-handoff-link,
  html body .hero .session-demo[data-state="skill"] .real-handoff-link,
  html body .hero .session-demo[data-state="searching"] .real-handoff-link,
  html body .hero .session-demo[data-state="memory-1"] .real-handoff-link {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  html body .hero .session-demo[data-state="codex-handoff"] .real-handoff-link {
    left: 50%;
  }

  html body .hero .session-demo[data-state="asking"] .real-handoff-link,
  html body .hero .session-demo[data-state="skill"] .real-handoff-link,
  html body .hero .session-demo[data-state="searching"] .real-handoff-link,
  html body .hero .session-demo[data-state="memory-1"] .real-handoff-link {
    left: 56%;
  }

  html body .hero .session-demo[data-state="memory-1"] .real-handoff-link {
    opacity: 0.18;
  }
}

html body .hero .claude-replay {
  display: none;
}

@media (max-width: 900px) {
  html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    height: 116px;
    padding: 10px;
  }

  html body .hero .session-story-path {
    grid-column: 1 / 3;
    grid-row: 2;
    height: 36px;
  }

  html body .hero .session-story-target {
    grid-column: 2;
    grid-row: 1;
  }

  html body .hero .session-story-play {
    grid-column: 3;
    grid-row: 1 / 3;
    min-width: 96px;
    padding-inline: 12px;
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 700px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 128px;
    height: 572px;
  }
}

@media (max-width: 760px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 830px;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 128px;
    height: 702px;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  html body .hero .real-agent-grid .codex-sim,
  html body .hero .real-agent-grid .claude-sim,
  html body .hero .real-agent-stage[data-agent-focus] .codex-sim,
  html body .hero .real-agent-stage[data-agent-focus] .claude-sim {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 332px;
    border-radius: 16px;
    transform: none;
  }

  html body .hero .real-agent-grid .codex-sim {
    top: 0;
  }

  html body .hero .real-agent-grid .claude-sim,
  html body .hero .real-agent-stage[data-agent-focus] .claude-sim {
    top: 370px;
  }

  html body .hero .real-handoff-link {
    display: none;
  }
}

@media (max-width: 520px) {
  html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
    grid-template-columns: 1fr 1fr;
    height: 164px;
    padding: 10px;
  }

  html body .hero .session-story-step {
    padding: 5px 6px;
  }

  html body .hero .session-story-step > small {
    display: none;
  }

  html body .hero .session-story-path {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  html body .hero .session-story-play {
    grid-column: 1 / 3;
    grid-row: 3;
    min-height: 34px;
  }

  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 878px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 176px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero .session-story-step,
  html body .hero .session-story-line > span,
  html body .hero .session-story-memory,
  html body .hero .real-handoff-link {
    transition: none;
  }
}

/* Final hero composition --------------------------------------------------
 * Mirror ElevenLabs' current homepage hierarchy: a single quiet segmented
 * rail attached to one large stage. The Codex composer is the only start
 * control; the Memory handoff is shown inside the stage, not explained above
 * it with a second timeline and play button.
 */
html body .hero .interactive-case-label,
html body .hero .session-story-step,
html body .hero .session-story-path,
html body .hero .session-story-play {
  display: none;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::before,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::before,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::before {
  height: 52px;
  border-radius: 18px 18px 0 0;
}

html body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::after,
html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::after,
html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage:has(.session-storybar)::after {
  height: 52px;
  border-radius: 18px 18px 0 0;
}

html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
  position: absolute;
  z-index: 24;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: auto;
  height: 52px;
  padding: 4px;
  overflow: hidden;
  color: #262623;
  background: #efeeeb;
  border: 1px solid rgba(31, 31, 29, 0.1);
  border-radius: 18px 18px 0 0;
  box-shadow: none;
  clip: auto;
  clip-path: none;
  white-space: normal;
  backdrop-filter: none;
}

html body .hero .session-stage-tab {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 42px;
  color: #77746e;
  background: transparent;
  border-radius: 13px;
  box-shadow: none;
  font: 450 12px/1 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: -0.015em;
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

html body .hero .session-stage-tab > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}

html body .hero .session-stage-codex > i { background: #262b33; }
html body .hero .session-stage-memory > i { background: #4d9779; }
html body .hero .session-stage-claude > i { background: #d97757; }

html body .hero .session-demo[data-state="idle"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-asking"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-working"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-analysis"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-plan"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-code"] .session-stage-codex,
html body .hero .session-demo[data-state="codex-memory"] .session-stage-memory,
html body .hero .session-demo[data-state="codex-handoff"] .session-stage-memory,
html body .hero .session-demo[data-state="searching"] .session-stage-memory,
html body .hero .session-demo[data-state="memory-1"] .session-stage-memory,
html body .hero .session-demo[data-state="asking"] .session-stage-claude,
html body .hero .session-demo[data-state="skill"] .session-stage-claude,
html body .hero .session-demo[data-state="inspecting"] .session-stage-claude,
html body .hero .session-demo[data-state="answer"] .session-stage-claude {
  color: #20211e;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 31, 29, 0.08), 0 1px 2px rgba(31, 31, 29, 0.04);
}

html body .hero .codex-composer.is-ready button[data-codex-send-button] {
  cursor: pointer;
}

@media (min-width: 901px) {
  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 52px;
    height: 648px;
  }

  html body .hero .session-demo .codex-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .codex-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .codex-sim {
    transform: translateY(18px);
  }

  html body .hero .session-demo .claude-sim,
  html body .hero .session-demo[data-agent-focus="codex"] .claude-sim,
  html body .hero .session-demo[data-agent-focus="claude"] .claude-sim {
    transform: translateY(-18px);
  }

  html body .hero .real-handoff-link {
    min-width: 138px;
    padding: 8px 10px;
    border-color: rgba(77, 151, 121, 0.18);
    border-radius: 11px;
    box-shadow: 0 8px 22px rgba(35, 54, 45, 0.11);
  }
}

@media (max-width: 900px) {
  html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    height: 52px;
    padding: 4px;
  }

  html body .hero .session-story-path,
  html body .hero .session-story-target,
  html body .hero .session-story-play {
    display: none;
  }

  html body .hero .session-stage-tab {
    height: 42px;
    font-size: 10px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 52px;
    height: 648px;
  }
}

@media (max-width: 760px) {
  html body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html:not(.theme-dark) body .hero .cursor-workbench.product-workbench.real-agent-stage,
  html.theme-dark body .hero .cursor-workbench.product-workbench.real-agent-stage {
    height: 790px;
  }

  html body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html:not(.theme-dark) body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid,
  html.theme-dark body .hero .real-agent-stage:has(.session-storybar) .real-agent-grid {
    top: 56px;
    height: 734px;
  }
}

@media (max-width: 520px) {
  html body .hero .handoff-stage-label.showcase-summarybar.session-storybar,
  html.theme-dark body .hero .handoff-stage-label.showcase-summarybar.session-storybar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 52px;
    padding: 4px;
  }

  html body .hero .session-stage-tab {
    gap: 5px;
    padding: 0;
    font-size: 9px;
  }

  html body .hero .session-stage-tab > i {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
  }
}

/* Good Cases: use spacing and the artwork edge instead of editorial grid rails. */
html body #cases .case-scroll-story,
html.theme-dark body #cases .case-scroll-story {
  border-top: 0;
  border-bottom: 0;
}

html body #cases .case-story-copy,
html.theme-dark body #cases .case-story-copy {
  border-right: 0;
}

html body #cases .case-story-step,
html.theme-dark body #cases .case-story-step {
  border-bottom: 0;
}

@media (min-width: 901px) {
  html body main#main > #cases,
  html.theme-dark body main#main > #cases {
    border-top: 0;
  }

  html body main#main > #cases::before,
  html.theme-dark body main#main > #cases::before {
    content: none;
  }

  html body main#main > #cases::after,
  html.theme-dark body main#main > #cases::after {
    position: absolute;
    z-index: 22;
    top: auto;
    right: auto;
    bottom: -10px;
    left: 50%;
    width: var(--shell);
    height: 20px;
    background:
      radial-gradient(circle, var(--page-rail-dot) 0 1px, transparent 1.05px) 41% center / 2px 2px no-repeat,
      linear-gradient(var(--page-rail-surface), var(--page-rail-surface)) 41% center / 20px 20px no-repeat;
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  html body #cases > .content-shell,
  html.theme-dark body #cases > .content-shell {
    --case-guide-split: 41%;
    --case-guide-marker: calc(41vw + 9px);
    position: relative;
  }

  html body #cases > .content-shell::before,
  html.theme-dark body #cases > .content-shell::before {
    position: absolute;
    z-index: 0;
    top: calc(-1px - var(--ui-section-space));
    left: 50%;
    width: 100vw;
    height: 3px;
    background:
      radial-gradient(circle at var(--case-guide-marker) 50%, currentColor 0 1px, transparent 1.2px),
      linear-gradient(
        to right,
        var(--page-rail-rule, rgba(0, 0, 0, 0.05)) 0 calc(var(--case-guide-marker) - 20px),
        transparent calc(var(--case-guide-marker) - 20px) calc(var(--case-guide-marker) + 20px),
        var(--page-rail-rule, rgba(0, 0, 0, 0.05)) calc(var(--case-guide-marker) + 20px) 100%
      ) center / 100% 1px no-repeat;
    color: var(--page-rail-dot, #000);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  html body #cases > .content-shell::after,
  html.theme-dark body #cases > .content-shell::after {
    position: absolute;
    z-index: 0;
    top: calc(20px - var(--ui-section-space));
    bottom: calc(0px - var(--ui-section-space));
    left: var(--case-guide-split);
    width: 1px;
    background: var(--page-rail-rule, rgba(0, 0, 0, 0.05));
    content: "";
    pointer-events: none;
  }
}

@media (min-width: 1280px) {
  html body #cases > .content-shell,
  html.theme-dark body #cases > .content-shell {
    --case-guide-marker: calc(50vw - 106.2px);
  }
}

/* Case 01: future waypoints stay neutral until the runner reaches them. */
html body #cases .case-route-panel.is-active .route-node,
html.theme-dark body #cases .case-route-panel.is-active .route-node {
  background: var(--story-paper);
  border-color: color-mix(in srgb, var(--story-muted) 68%, transparent);
  transform: none !important;
  animation-duration: 11.66s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n1,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n1 {
  animation-name: refined-off-node-1 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n2,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n2 {
  animation-name: refined-off-node-2 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.retry,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.retry {
  animation-name: refined-off-node-retry !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n3,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n3 {
  animation-name: refined-off-node-3 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n4,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-node.n4 {
  animation-name: refined-off-node-4 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n1,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n1 {
  animation-name: refined-on-node-1 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n2,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n2 {
  animation-name: refined-on-node-2 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n3,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n3 {
  animation-name: refined-on-node-3 !important;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n4,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-node.n4 {
  animation-name: refined-on-node-4 !important;
}

html body #cases .case-route-panel.is-active .route-line,
html.theme-dark body #cases .case-route-panel.is-active .route-line {
  animation: none !important;
  clip-path: none !important;
}

html body #cases .case-route-panel.is-active .route-main,
html.theme-dark body #cases .case-route-panel.is-active .route-main {
  opacity: 0.52;
}

html body #cases .case-route-panel.is-active .route-branch,
html.theme-dark body #cases .case-route-panel.is-active .route-branch {
  opacity: 0.34;
}

html body #cases .route-runner,
html.theme-dark body #cases .route-runner {
  position: absolute;
  z-index: 4;
  top: 56%;
  left: 14%;
  width: 7px;
  height: 7px;
  display: block;
  color: var(--story-negative);
  background: currentColor;
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 20%, white),
    0 1px 3px color-mix(in srgb, currentColor 20%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: top, left, transform;
}

html body #cases .route-runner::before,
html.theme-dark body #cases .route-runner::before {
  content: none;
}

html body #cases .route-runner::after,
html.theme-dark body #cases .route-runner::after {
  position: absolute;
  top: calc(50% - 0.5px);
  right: calc(50% + 3px);
  width: 13px;
  height: 1px;
  background: linear-gradient(to left, currentColor, transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0.92);
  transform-origin: right center;
}

html body #cases .case-route-lane.is-on .route-runner,
html.theme-dark body #cases .case-route-lane.is-on .route-runner {
  color: var(--story-positive);
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-runner,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-runner {
  animation: story-off-runner 11.66s infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-off .route-runner::after,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-off .route-runner::after {
  animation: story-off-runner-trail 11.66s infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-runner,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-runner {
  animation: story-on-runner 11.66s infinite;
}

html body #cases .case-route-panel.is-active .case-route-lane.is-on .route-runner::after,
html.theme-dark body #cases .case-route-panel.is-active .case-route-lane.is-on .route-runner::after {
  animation: story-on-runner-trail 11.66s infinite;
}

@keyframes story-off-runner {
  0%, 7% {
    top: 56%;
    left: 14%;
    color: var(--story-negative);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  7% {
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.22, 1);
  }
  18%, 23% {
    top: 56%;
    left: 38%;
    color: var(--story-negative);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  23% {
    animation-timing-function: cubic-bezier(0.45, 0.02, 0.2, 1);
  }
  31%, 37% {
    top: calc(56% - 35px);
    left: 62%;
    color: var(--story-negative);
    transform: translate(-50%, -50%) rotate(-24deg);
  }
  37% {
    animation-timing-function: cubic-bezier(0.5, 0.02, 0.24, 1);
  }
  48%, 52% {
    top: 56%;
    left: 38%;
    color: var(--story-negative);
    transform: translate(-50%, -50%) rotate(156deg);
  }
  52% {
    transform: translate(-50%, -50%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.2, 1);
  }
  63%, 68% {
    top: 56%;
    left: 62%;
    color: var(--story-retry);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  68% {
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.2, 1);
  }
  78%, 100% {
    top: 56%;
    left: 86%;
    color: var(--story-positive);
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes story-on-runner {
  0%, 7% {
    top: 56%;
    left: 14%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  7% {
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.2, 1);
  }
  20%, 25% {
    top: 56%;
    left: 38%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.2, 1);
  }
  38%, 43% {
    top: 56%;
    left: 62%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  43% {
    animation-timing-function: cubic-bezier(0.48, 0.04, 0.2, 1);
  }
  56%, 100% {
    top: 56%;
    left: 86%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes story-off-runner-trail {
  0%, 6.9%, 18%, 22.9%, 31%, 36.9%, 48%, 51.9%, 63%, 67.9%, 78%, 100% {
    opacity: 0;
    transform: scaleX(0.72);
  }
  7%, 17.9%, 23%, 30.9%, 37%, 47.9%, 52%, 62.9%, 68%, 77.9% {
    opacity: 0.18;
    transform: scaleX(1);
  }
}

@keyframes story-on-runner-trail {
  0%, 6.9%, 20%, 24.9%, 38%, 42.9%, 56%, 100% {
    opacity: 0;
    transform: scaleX(0.72);
  }
  7%, 19.9%, 25%, 37.9%, 43%, 55.9% {
    opacity: 0.18;
    transform: scaleX(1);
  }
}

@keyframes refined-off-node-1 {
  0%, 100% { background: var(--story-negative); border-color: var(--story-negative); }
}

@keyframes refined-off-node-2 {
  0%, 17.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  18%, 100% { background: var(--story-negative); border-color: var(--story-negative); }
}

@keyframes refined-off-node-retry {
  0%, 30.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  31%, 100% { background: var(--story-negative); border-color: var(--story-negative); }
}

@keyframes refined-off-node-3 {
  0%, 62.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  63%, 100% { background: var(--story-retry); border-color: var(--story-retry); }
}

@keyframes refined-off-node-4 {
  0%, 77.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  78%, 100% { background: var(--story-positive); border-color: var(--story-positive); }
}

@keyframes refined-on-node-1 {
  0%, 100% { background: var(--story-positive); border-color: var(--story-positive); }
}

@keyframes refined-on-node-2 {
  0%, 19.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  20%, 100% { background: var(--story-positive); border-color: var(--story-positive); }
}

@keyframes refined-on-node-3 {
  0%, 37.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  38%, 100% { background: var(--story-positive); border-color: var(--story-positive); }
}

@keyframes refined-on-node-4 {
  0%, 55.9% { background: var(--story-paper); border-color: color-mix(in srgb, var(--story-muted) 68%, transparent); }
  56%, 100% { background: var(--story-positive); border-color: var(--story-positive); }
}

@media (prefers-reduced-motion: reduce) {
  html body #cases .case-route-panel.is-active .route-runner,
  html.theme-dark body #cases .case-route-panel.is-active .route-runner {
    top: 56%;
    left: 86%;
    animation: none;
  }
}

/* Quick Start v2.5 — two clear stages with direct account-mode installation. */
html body #quickstart .quickstart-bento {
  align-items: stretch;
}

html body #quickstart .quickstart-install-card {
  height: 680px;
}

html body #quickstart .quickstart-install-visual {
  padding: 28px 28px 30px;
}

html body #quickstart .quickstart-install-summary {
  gap: 5px;
  margin-top: 12px;
}

html body #quickstart .quickstart-install-summary strong {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

html body #quickstart .quickstart-install-summary span {
  font-size: 12px;
  line-height: 18px;
}

html body #quickstart .quickstart-account-option {
  padding-top: 22px;
  border-top: .5px solid #d9d4cd;
}

html body #quickstart .quickstart-account-formal {
  margin-top: 24px;
}

html body #quickstart .quickstart-account-option + .quickstart-account-option {
  margin-top: 22px;
}

html body #quickstart .quickstart-account-heading {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}

html body #quickstart .quickstart-account-heading strong {
  color: #171815;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

html body #quickstart .quickstart-account-heading span,
html body #quickstart .quickstart-account-option > p,
html body #quickstart .quickstart-account-action small {
  color: #77746f;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
}

html body #quickstart .quickstart-account-option > p {
  margin: 8px 0 0;
}

html body #quickstart .quickstart-account-action {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 13px;
}

html body #quickstart .quickstart-account-action a {
  display: inline-flex;
  min-height: 36px;
  padding: 0 18px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #11110f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

html body #quickstart .quickstart-account-action a:hover,
html body #quickstart .quickstart-account-action a:focus-visible {
  color: #fff;
  background: #34332f;
  transform: translateY(-1px);
}

html body #quickstart .quickstart-account-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 12px 12px 15px;
  background: rgba(255, 255, 255, .58);
  border: .5px solid #d7d2cb;
  border-radius: 14px;
}

html body #quickstart .quickstart-account-command code {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow-x: auto;
  color: #26361d;
  background: transparent;
  font: 500 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  scrollbar-width: none;
}

html body #quickstart .quickstart-account-command code::-webkit-scrollbar {
  display: none;
}

html body #quickstart .quickstart-account-command code span {
  display: block;
}

html body #quickstart .quickstart-account-command .quickstart-copy-button,
html.theme-dark body #quickstart .quickstart-account-command .quickstart-copy-button {
  width: 32px;
  height: 32px;
  color: #716d67;
  background: transparent;
  border-radius: 999px;
}

html body #quickstart .quickstart-demo-stage {
  display: flex;
  min-width: 0;
  height: 680px;
  grid-column: span 6;
  flex-direction: column;
}

html body #quickstart .quickstart-demo-stage-heading {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  padding: 1px 6px 18px;
}

html body #quickstart .quickstart-demo-stage-heading strong {
  color: var(--quick-v2-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

html body #quickstart .quickstart-demo-stage-heading > span {
  color: var(--quick-v2-copy);
  font-size: 12px;
  line-height: 18px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  width: 100%;
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
}

html body #quickstart .quickstart-repository-command {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  margin-bottom: 14px;
  padding: 15px 16px;
  color: #171815;
  background: #f5f3f1;
  border: .5px solid #dedad4;
  border-radius: 18px;
}

html body #quickstart .quickstart-repository-intro {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}

html body #quickstart .quickstart-repository-intro small {
  grid-row: 1 / span 2;
  padding-top: 2px;
  color: #6d7568;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-repository-intro strong {
  color: #171815;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

html body #quickstart .quickstart-repository-intro > span {
  color: #77746f;
  font-size: 11px;
  line-height: 16px;
}

html body #quickstart .quickstart-repository-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 11px;
  padding: 9px 10px 9px 13px;
  background: #fff;
  border: .5px solid #d7d2cb;
  border-radius: 12px;
}

html body #quickstart .quickstart-repository-code code {
  display: grid;
  min-width: 0;
  gap: 1px;
  overflow-x: auto;
  color: #26361d;
  background: transparent;
  font: 500 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  scrollbar-width: none;
}

html body #quickstart .quickstart-repository-code code span {
  display: block;
}

html body #quickstart .quickstart-repository-command .quickstart-copy-button {
  display: inline-flex;
  width: auto;
  min-width: 112px;
  height: 34px;
  padding: 0 13px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #11110f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

html body #quickstart .quickstart-repository-command .quickstart-copy-button:hover,
html body #quickstart .quickstart-repository-command .quickstart-copy-button:focus-visible {
  color: #fff;
  background: #34332f;
}

html body #quickstart .quickstart-repository-command .quickstart-copy-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

html body #quickstart .quickstart-copy-visible {
  display: inline;
  white-space: nowrap;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-visual {
  padding-top: 0;
}

html body #quickstart .quickstart-demo-stage .quickstart-scroll-scene {
  padding-top: 26px;
  padding-bottom: 56px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-copy {
  justify-content: center;
  padding: 8px 28px 24px;
}

html body #quickstart .quickstart-demo-stage .quickstart-scene-pages {
  width: 100%;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
}

html body #quickstart .quickstart-demo-stage .quickstart-scene-pages button {
  min-width: 46px;
}

html.theme-dark body #quickstart .quickstart-account-heading strong,
html.theme-dark body #quickstart .quickstart-demo-stage-heading strong {
  color: var(--quick-v2-ink);
}

html.theme-dark body #quickstart .quickstart-account-option {
  border-top-color: #3b3c36;
}

html.theme-dark body #quickstart .quickstart-account-command {
  background: rgba(255, 255, 255, .035);
  border-color: #3b3c36;
}

html.theme-dark body #quickstart .quickstart-account-command code {
  color: #dce7d2;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-install-card,
  html body #quickstart .quickstart-demo-stage {
    grid-column: span 6;
  }

  html body #quickstart .quickstart-account-action {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-install-card,
  html body #quickstart .quickstart-demo-stage {
    grid-column: 1;
  }

  html body #quickstart .quickstart-install-card {
    height: auto;
    min-height: 680px;
  }

  html body #quickstart .quickstart-demo-stage {
    height: 660px;
  }

  html body #quickstart .quickstart-demo-stage-heading {
    padding: 4px 2px 16px;
  }

  html body #quickstart .quickstart-account-heading {
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
  }

  html body #quickstart .quickstart-account-action {
    gap: 9px;
  }

  html body #quickstart .quickstart-repository-command {
    padding: 14px;
  }

  html body #quickstart .quickstart-repository-intro {
    grid-template-columns: 1fr;
  }

  html body #quickstart .quickstart-repository-intro small {
    grid-row: auto;
  }

  html body #quickstart .quickstart-repository-code {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #quickstart .quickstart-repository-command .quickstart-copy-button {
    width: 100%;
  }
}

/* Keep the client switcher directly below the setup card. */
html body #quickstart .quickstart-install-stage {
  display: flex;
  min-width: 0;
  height: 680px;
  grid-column: span 6;
  flex-direction: column;
  gap: 16px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  width: 100%;
  height: 620px;
  flex: 0 0 620px;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  width: 100%;
  padding: 0;
}

html body #quickstart .quickstart-install-stage .agent-switcher {
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-install-stage {
    height: auto;
    grid-column: span 6;
  }

  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    height: auto;
    min-height: 680px;
    flex-basis: auto;
  }

  html body #quickstart .quickstart-install-stage .agent-switcher {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 680px) {
  html body #quickstart .quickstart-install-stage {
    grid-column: 1;
  }
}

/* Quick Start v2.6 — editorial product showcase inspired by ElevenLabs. */
html body #quickstart.quickstart-v2,
html.theme-dark body #quickstart.quickstart-v2 {
  --quick-showcase-surface: #f4f3f0;
  --quick-showcase-card: #fbfbfa;
  --quick-showcase-line: #dedbd5;
  --quick-showcase-muted: #77746d;
  background: #fdfdfc;
}

html body #quickstart .quickstart-v2-heading,
html.theme-dark body #quickstart .quickstart-v2-heading,
html[data-language="en"] body #quickstart .quickstart-v2-heading {
  margin-bottom: 56px;
}

html body #quickstart .quickstart-v2-heading .section-index,
html.theme-dark body #quickstart .quickstart-v2-heading .section-index {
  margin-bottom: 20px;
  color: #6f7469;
  font-size: 12px;
  letter-spacing: .11em;
}

html body #quickstart .quickstart-v2-heading h2,
html.theme-dark body #quickstart .quickstart-v2-heading h2,
html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
  max-width: 720px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

html body #quickstart .quickstart-v2-heading > p:last-child,
html.theme-dark body #quickstart .quickstart-v2-heading > p:last-child,
html[data-language="en"] body #quickstart .quickstart-v2-heading > p:last-child {
  max-width: 31ch;
  color: #5f5c56;
  font-size: 16px;
  line-height: 24px;
}

html body #quickstart .quickstart-bento {
  gap: 28px;
}

html body #quickstart .quickstart-install-stage,
html body #quickstart .quickstart-demo-stage {
  height: 720px;
}

html body #quickstart .quickstart-install-stage {
  grid-column: span 5;
  gap: 16px;
}

html body #quickstart .quickstart-demo-stage {
  grid-column: span 7;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  height: 540px;
  flex: 0 0 540px;
  background: var(--quick-showcase-surface);
  border: .5px solid var(--quick-showcase-line);
  border-radius: 30px;
  box-shadow: none;
}

html body #quickstart .quickstart-install-visual {
  padding: 30px;
}

html body #quickstart .quickstart-card-step {
  color: #747970;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .11em;
}

html body #quickstart .quickstart-install-summary {
  gap: 6px;
  margin-top: 14px;
}

html body #quickstart .quickstart-install-summary strong {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.035em;
}

html body #quickstart .quickstart-install-summary span {
  color: var(--quick-showcase-muted);
  font-size: 14px;
  line-height: 21px;
}

html body #quickstart .quickstart-account-option,
html body #quickstart .quickstart-account-option + .quickstart-account-option {
  margin-top: 12px;
  padding: 18px;
  background: var(--quick-showcase-card);
  border: .5px solid var(--quick-showcase-line);
  border-radius: 18px;
}

html body #quickstart .quickstart-account-formal {
  margin-top: 24px;
}

html body #quickstart .quickstart-account-heading strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

html body #quickstart .quickstart-account-heading span,
html body #quickstart .quickstart-account-option > p,
html body #quickstart .quickstart-account-action small {
  color: var(--quick-showcase-muted);
  font-size: 13px;
  line-height: 20px;
}

html body #quickstart .quickstart-account-option > p {
  margin-top: 8px;
  line-height: 1.45;
}

html body #quickstart .quickstart-account-action {
  margin-top: 12px;
}

html body #quickstart .quickstart-account-action a {
  min-height: 36px;
  padding: 0 16px;
  background: #11110f;
}

html body #quickstart .quickstart-account-command {
  margin-top: 12px;
  padding: 10px 10px 10px 14px;
  background: #fff;
  border-color: var(--quick-showcase-line);
  border-radius: 12px;
}

html body #quickstart .quickstart-account-command code {
  font-size: 13px;
  line-height: 18px;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 124px;
  flex: 1 1 auto;
  padding: 18px 20px;
  background: var(--quick-showcase-surface);
  border: .5px solid var(--quick-showcase-line);
  border-radius: 24px;
}

html body #quickstart .quickstart-agent-eyebrow {
  margin: 0 0 13px;
  color: #747970;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}

html body #quickstart .quickstart-install-stage .agent-switcher {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

html body #quickstart .quickstart-install-stage .agent-brand-tabs {
  gap: 8px;
}

html body #quickstart .quickstart-install-stage .agent-brand-tab,
html body #quickstart .quickstart-install-stage .agent-logo-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

html body #quickstart .quickstart-install-stage .agent-logo-tile img {
  width: 23px;
  height: 23px;
}

html body #quickstart .quickstart-install-stage .agent-logo-official.is-codex {
  width: 27px;
  height: 27px;
}

html body #quickstart .quickstart-install-stage .agent-logo-official.is-opencode {
  width: 100%;
  height: 100%;
}

html body #quickstart .quickstart-install-stage .agent-panel h2 {
  font-size: 15px;
  line-height: 18px;
}

html body #quickstart .quickstart-install-stage .agent-panel p {
  margin-top: 5px;
  color: var(--quick-showcase-muted);
  font-size: 14px;
  line-height: 20px;
  white-space: normal;
}

html body #quickstart .quickstart-demo-stage {
  padding: 22px 16px 16px;
  background: var(--quick-showcase-surface);
  border: .5px solid var(--quick-showcase-line);
  border-radius: 30px;
}

html body #quickstart .quickstart-demo-stage-heading {
  gap: 5px;
  padding: 0 10px 18px;
}

html body #quickstart .quickstart-demo-stage-heading strong {
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

html body #quickstart .quickstart-demo-stage-heading > span {
  color: var(--quick-showcase-muted);
  font-size: 12px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  border: .5px solid rgba(0, 0, 0, .08);
  border-radius: 23px;
  box-shadow: none;
}

html body #quickstart .quickstart-repository-command {
  top: 18px;
  right: 18px;
  left: 18px;
  padding: 14px;
  background: rgba(251, 251, 250, .96);
  border: .5px solid rgba(0, 0, 0, .1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(23, 25, 18, .08);
}

html body #quickstart .quickstart-repository-code {
  margin-top: 10px;
  padding: 9px 10px 9px 13px;
  border-radius: 11px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-visual {
  padding-top: 58px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-copy {
  padding-bottom: 18px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #quickstart .quickstart-install-stage,
  html body #quickstart .quickstart-demo-stage {
    width: 100%;
    height: auto;
    grid-column: 1;
  }

  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    height: auto;
    min-height: 540px;
    flex-basis: auto;
  }

  html body #quickstart .quickstart-install-stage .agent-switcher {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
  }

  html body #quickstart .quickstart-demo-stage {
    height: 680px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    margin-bottom: 30px;
  }

  html body #quickstart .quickstart-install-visual {
    padding: 24px;
  }

  html body #quickstart .quickstart-account-option,
  html body #quickstart .quickstart-account-option + .quickstart-account-option {
    padding: 16px;
  }

  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 17px;
  }

  html body #quickstart .quickstart-install-stage .agent-switcher {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html body #quickstart .quickstart-demo-stage {
    height: 680px;
    padding: 20px 12px 12px;
  }
}

/* Quick Start v2.8 — final simplified composition. */
html body #quickstart .quickstart-install-stage {
  gap: 0;
  overflow: hidden;
  background: #f3f2ef;
  border-radius: 28px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  height: 590px;
  flex-basis: 590px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

html body #quickstart .quickstart-install-visual {
  padding: 40px;
}

html body #quickstart .quickstart-install-summary strong,
html body #quickstart .quickstart-demo-stage-heading strong {
  font-size: 24px;
  line-height: 32px;
}

html body #quickstart .quickstart-account-option,
html body #quickstart .quickstart-account-option + .quickstart-account-option {
  margin-top: 28px;
  padding: 26px 0 0;
  background: transparent;
  border: 0;
  border-top: .5px solid #d8d5cf;
  border-radius: 0;
}

html body #quickstart .quickstart-account-option > p,
html body #quickstart .quickstart-account-action small,
html body #quickstart .quickstart-agent-eyebrow,
html body #quickstart .quickstart-repository-intro span,
html body #quickstart .quickstart-repository-intro small {
  display: none;
}

html body #quickstart .quickstart-account-action {
  margin-top: 18px;
}

html body #quickstart .quickstart-account-action a {
  min-height: 34px;
  padding: 0 15px;
  font-size: 14px;
  line-height: 14px;
}

html body #quickstart .quickstart-account-command {
  margin-top: 16px;
  padding: 14px 14px 14px 16px;
  background: rgba(255, 255, 255, .72);
  border: 0;
  border-radius: 12px;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 130px;
  padding: 28px 40px;
  background: transparent;
  border: 0;
  border-top: .5px solid #d8d5cf;
  border-radius: 0;
}

html body #quickstart .quickstart-install-stage .agent-switcher {
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
}

html body #quickstart .quickstart-install-stage .agent-panel p {
  max-width: none;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
}

html body #quickstart .quickstart-demo-stage {
  padding: 36px 24px 24px;
  background: #f3f2ef;
  border: 0;
  border-radius: 28px;
}

html body #quickstart .quickstart-demo-stage-heading {
  padding: 0 12px 28px;
}

html body #quickstart .quickstart-repository-command {
  top: 0;
  right: 0;
  left: 0;
  padding: 20px 22px;
  background: rgba(249, 249, 247, .96);
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: none;
}

html body #quickstart .quickstart-repository-intro {
  grid-template-columns: 1fr;
}

html body #quickstart .quickstart-repository-intro strong {
  font-size: 17px;
  line-height: 22px;
}

html body #quickstart .quickstart-repository-code {
  margin-top: 9px;
  border: 0;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  border: 0;
  border-radius: 21px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-visual {
  padding-top: 54px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    min-height: 590px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    min-height: 550px;
  }

  html body #quickstart .quickstart-install-visual {
    padding: 26px;
  }

  html body #quickstart .quickstart-install-stage .agent-switcher {
    grid-template-columns: 1fr;
  }

  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 20px 26px 24px;
  }
}

/* Quick Start v2.11 — open editorial layout with restrained separators. */
html body #quickstart .quickstart-v2-heading,
html.theme-dark body #quickstart .quickstart-v2-heading,
html[data-language="en"] body #quickstart .quickstart-v2-heading {
  margin-bottom: 40px;
}

html body #quickstart .quickstart-bento {
  align-items: start;
  gap: clamp(36px, 4vw, 56px);
}

html body #quickstart .quickstart-install-stage {
  height: auto;
  gap: 40px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  height: auto;
  flex: 0 0 auto;
}

html body #quickstart .quickstart-install-visual {
  padding: 0;
}

html body #quickstart .quickstart-install-summary {
  gap: 5px;
  margin-top: 5px;
}

html body #quickstart .quickstart-account-formal {
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}

html body #quickstart .quickstart-account-heading {
  align-items: center;
}

html body #quickstart .quickstart-account-heading .quickstart-account-action {
  gap: 5px;
  align-items: flex-end;
  margin: 0;
  flex-direction: column;
}

html body #quickstart .quickstart-account-heading .quickstart-account-action a {
  min-height: 30px;
  padding: 0 13px;
  color: #31402c;
  background: #e2e9dd;
  font-size: 12px;
}

html body #quickstart .quickstart-account-heading .quickstart-account-action a:hover,
html body #quickstart .quickstart-account-heading .quickstart-account-action a:focus-visible {
  color: #273522;
  background: #d5dfcf;
}

html body #quickstart .quickstart-account-heading .quickstart-account-action small {
  display: block;
  color: #7b8176;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}

html body #quickstart .quickstart-account-option + .quickstart-account-option {
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
}

html body #quickstart .quickstart-account-command,
html body #quickstart .quickstart-repository-code {
  background: #f5f5f2;
}

html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

html body #quickstart .quickstart-demo-stage {
  height: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-demo-stage-heading {
  padding: 0 0 24px;
}

html body #quickstart .quickstart-repository-command {
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

html body #quickstart .quickstart-repository-code {
  margin-top: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 13px;
}

html body #quickstart .quickstart-repository-command .quickstart-copy-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  color: #6f756b;
  background: transparent;
}

html body #quickstart .quickstart-repository-command .quickstart-copy-button:hover,
html body #quickstart .quickstart-repository-command .quickstart-copy-button:focus-visible {
  color: #34432f;
  background: rgba(52, 67, 47, .08);
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  height: 520px;
  flex: 0 0 520px;
  border-radius: 24px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    margin-bottom: 36px;
  }

  html body #quickstart .quickstart-bento {
    gap: 72px;
  }

  html body #quickstart .quickstart-install-stage {
    height: auto;
    gap: 40px;
  }

  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    height: auto;
    min-height: 0;
    flex-basis: auto;
  }

  html body #quickstart .quickstart-demo-stage {
    height: auto;
  }

  html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
    height: 560px;
    flex-basis: 560px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    margin-bottom: 30px;
  }

  html body #quickstart .quickstart-bento {
    gap: 64px;
  }

  html body #quickstart .quickstart-install-stage {
    gap: 36px;
  }

  html body #quickstart .quickstart-install-stage .quickstart-install-card {
    min-height: 0;
  }

  html body #quickstart .quickstart-install-visual,
  html body #quickstart .quickstart-install-stage .quickstart-agent-compatibility,
  html.theme-dark body #quickstart .quickstart-install-stage .quickstart-agent-compatibility {
    padding: 0;
  }

  html body #quickstart .quickstart-account-formal {
    margin-top: 20px;
  }

  html body #quickstart .quickstart-account-heading {
    gap: 16px;
    align-items: flex-start;
    flex-direction: row;
  }

  html body #quickstart .quickstart-account-option + .quickstart-account-option {
    margin-top: 32px;
    padding-top: 0;
  }

  html body #quickstart .quickstart-demo-stage {
    height: auto;
    padding: 0;
  }

  html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
    height: 540px;
    flex-basis: 540px;
  }
}

/* Quick Start v2.12 — setup row followed by a guided demo row. */
html body #quickstart .quickstart-bento {
  row-gap: 56px;
}

html body #quickstart .quickstart-install-stage {
  grid-column: 1 / -1;
  gap: 32px;
}

html body #quickstart .quickstart-install-stage .quickstart-install-card {
  width: 100%;
}

html body #quickstart .quickstart-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: 20px;
}

html body #quickstart .quickstart-account-grid .quickstart-account-action {
  gap: 10px;
  align-items: center;
  flex-direction: row;
}

html body #quickstart .quickstart-account-grid .quickstart-account-option,
html body #quickstart .quickstart-account-grid .quickstart-account-option + .quickstart-account-option {
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border: 0;
}

@media (min-width: 901px) {
  html body #quickstart .quickstart-account-grid .quickstart-account-option {
    display: grid;
    grid-template-rows: 32px auto;
    align-content: start;
  }

  html body #quickstart .quickstart-account-grid .quickstart-account-heading {
    align-items: center;
  }

  html body #quickstart .quickstart-account-grid .quickstart-account-command {
    margin-top: 12px;
  }
}

html body #quickstart .quickstart-demo-stage {
  display: grid;
  height: auto;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px clamp(36px, 4vw, 56px);
  align-items: start;
}

html body #quickstart .quickstart-demo-stage-heading {
  grid-column: 1 / -1;
  padding: 0;
}

html body #quickstart .quickstart-repository-command {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  align-self: center;
}

html body #quickstart .quickstart-repository-code {
  margin-top: 14px;
}

html body #quickstart .quickstart-repository-guidance {
  margin-top: 34px;
}

html body #quickstart .quickstart-repository-guidance > strong {
  display: block;
  color: #171815;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
}

html body #quickstart .quickstart-repository-guidance ol {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding-left: 20px;
  color: #74716b;
  font-size: 14px;
  line-height: 20px;
}

html body #quickstart .quickstart-repository-guidance li {
  padding-left: 4px;
}

html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
  width: 100%;
  height: 480px;
  grid-column: 2;
  grid-row: 2;
  flex-basis: auto;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-account-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  html body #quickstart .quickstart-demo-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  html body #quickstart .quickstart-demo-stage-heading,
  html body #quickstart .quickstart-repository-command,
  html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
    grid-column: 1;
    grid-row: auto;
  }

  html body #quickstart .quickstart-repository-command {
    align-self: stretch;
  }

  html body #quickstart .quickstart-repository-guidance {
    margin-top: 28px;
  }

  html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
    height: 520px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-bento {
    row-gap: 60px;
  }

  html body #quickstart .quickstart-account-grid {
    margin-top: 22px;
  }

  html body #quickstart .quickstart-demo-stage {
    gap: 28px;
  }

  html body #quickstart .quickstart-demo-stage .quickstart-conversation-card {
    height: 540px;
  }
}

/* Quick Start v2.13 — match the Memory section inset and editorial rules. */
html body main#main > #quickstart.quickstart-v2 > .quickstart-v2-shell,
html.theme-dark body main#main > #quickstart.quickstart-v2 > .quickstart-v2-shell {
  width: min(1118px, calc(100vw - 48px));
  max-width: 1118px;
}

html body #quickstart .quickstart-v2-heading h2,
html.theme-dark body #quickstart .quickstart-v2-heading h2,
html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -.02em;
}

html body #quickstart .quickstart-bento {
  row-gap: 64px;
  padding-inline: 8px;
}

html body #quickstart .quickstart-install-visual > .quickstart-card-step,
html body #quickstart .quickstart-demo-stage-heading > .quickstart-card-step {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: center;
}

html body #quickstart .quickstart-install-visual > .quickstart-card-step::after,
html body #quickstart .quickstart-demo-stage-heading > .quickstart-card-step::after {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(23, 24, 21, .12);
  content: "";
}

html body #quickstart .quickstart-account-grid {
  margin-top: 0;
}

html body #quickstart .quickstart-demo-stage {
  row-gap: 28px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-bento {
    padding-inline: 0;
  }
}

@media (max-width: 680px) {
  html body main#main > #quickstart.quickstart-v2 > .quickstart-v2-shell,
  html.theme-dark body main#main > #quickstart.quickstart-v2 > .quickstart-v2-shell {
    width: min(1118px, calc(100vw - 28px));
  }

  html body #quickstart .quickstart-install-visual > .quickstart-card-step,
  html body #quickstart .quickstart-demo-stage-heading > .quickstart-card-step {
    gap: 12px;
  }

  html body #quickstart .quickstart-v2-heading h2,
  html.theme-dark body #quickstart .quickstart-v2-heading h2,
  html[data-language="en"] body #quickstart .quickstart-v2-heading h2 {
    font-size: 34px;
    line-height: 40px;
  }
}

/* Quick Start v2.16 — final spacing after removing the Step 01 rule. */
html body #quickstart .quickstart-v2-heading,
html.theme-dark body #quickstart .quickstart-v2-heading,
html[data-language="en"] body #quickstart .quickstart-v2-heading {
  margin-bottom: 64px;
}

html body #quickstart .quickstart-install-stage {
  gap: 40px;
}

@media (max-width: 900px) {
  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    margin-bottom: 52px;
  }

  html body #quickstart .quickstart-install-stage {
    gap: 40px;
  }
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-v2-heading,
  html.theme-dark body #quickstart .quickstart-v2-heading,
  html[data-language="en"] body #quickstart .quickstart-v2-heading {
    margin-bottom: 44px;
  }

  html body #quickstart .quickstart-install-stage {
    gap: 36px;
  }

  html body #quickstart .quickstart-account-grid {
    margin-top: 0;
  }
}

/* Quick Start v2.22 — official account CTA, slightly enlarged in black and white. */
html body #quickstart .quickstart-account-formal .quickstart-account-action a {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: auto;
  padding: 0 16px;
  color: #fff;
  background: #000;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html body #quickstart .quickstart-account-formal .quickstart-account-action a:hover,
html body #quickstart .quickstart-account-formal .quickstart-account-action a:focus-visible {
  color: #fff;
  background: #000;
  border: 0;
  box-shadow: none;
  transform: none;
}

html body #quickstart .quickstart-account-formal .quickstart-account-action a:focus-visible {
  outline: 3px solid rgba(82, 111, 70, .28);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  html body #quickstart .quickstart-account-formal .quickstart-account-action a {
    width: auto;
    min-width: 0;
    min-height: 36px;
    height: auto;
    padding-inline: 16px;
    font-size: 14px;
  }
}

/* Quick Start v2.23 — let wrapped English account titles grow naturally. */
@media (min-width: 901px) {
  html body #quickstart .quickstart-account-grid .quickstart-account-option {
    grid-template-rows: minmax(32px, auto) auto;
  }
}