:root {
  --bg: #f6f4ed;
  --panel: #eeeee5;
  --text: #1b211c;
  --muted: #5f6b58;
  --accent: #fa6b3b;
  --line: #d9ddd1;
  --soft: #e5ebdc;
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: #ffd1b8;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid #c94c22;
  outline-offset: 5px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.wrap {
  width: min(1200px, calc(100% - 96px));
  margin: auto;
}
.header {
  width: min(1360px, calc(100% - 96px));
  margin: auto;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand {
  font-size: 27px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -1.4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.brand-divider {
  font-weight: 400;
  color: #646860;
  margin: 0 8px;
}
.brand-note {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.header nav {
  display: flex;
  gap: 28px;
  font-size: 12px;
}
.header nav a:hover,
.text-link:hover {
  color: #b9441d;
}
.nav-github {
  font-size: 12px;
  padding: 10px 17px;
  border: 1px solid var(--line);
  border-radius: 30px;
}
.skip {
  position: fixed;
  top: -80px;
  left: 15px;
  padding: 10px 20px;
  background: var(--text);
  color: white;
  z-index: 50;
}
.skip:focus {
  top: 15px;
}
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 54px;
  padding-top: 75px;
}
.eyebrow,
.section-label {
  font: 10px var(--mono);
  letter-spacing: 1.6px;
  color: var(--muted);
  display: flex;
  gap: 11px;
  align-items: center;
}
.signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
h1 {
  font-size: clamp(64px, 7vw, 98px);
  line-height: 1.02;
  letter-spacing: -6px;
  font-weight: 650;
  margin: 30px 0;
}
h1 span {
  color: #c4532c;
}
.hero-description {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -0.8px;
  line-height: 1.6;
}
.hero-support {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 20px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 29px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 14px 21px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  transition:
    transform 0.18s,
    background 0.18s;
}
.button:hover {
  transform: translateY(-3px);
}
.primary {
  background: var(--text);
  color: var(--bg);
}
.primary:hover {
  background: #333e30;
}
.secondary {
  border: 1px solid #cdd2c4;
}
.compatibility {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.compatibility > span:first-child {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.compatibility b {
  font-size: 14px;
  font-weight: 500;
}
.compatibility-note {
  flex-basis: 100%;
  color: #60665c;
  font: 9px var(--mono);
}
.hero-visual {
  align-self: center;
  background: var(--soft);
  border: 1px solid #d0d8c6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px #3140240b;
  transform: rotate(1deg);
}
.visual-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 19px;
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #64735a;
  border-bottom: 1px solid #cdd6c4;
}
.tiny-square {
  width: 5px;
  height: 5px;
  background: #849971;
}
.live {
  margin-left: auto;
  font-size: 7px;
  color: #606a56;
}
.agent-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 27px 0 0;
}
.agent-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  padding: 9px 18px;
  border: 1px solid #c4cdbb;
  border-radius: 7px;
  background: #f6f6ef;
}
.or {
  font: 9px var(--mono);
  color: #5c6656;
}
.connector {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.connector::before {
  content: "";
  height: 100%;
  border-left: 1px dashed #adbaa1;
  position: absolute;
}
.connector span {
  position: relative;
  background: var(--soft);
  color: #5c6850;
  font: 7px var(--mono);
  letter-spacing: 1px;
  padding: 3px 9px;
}
.flow-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 22px;
  padding: 18px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 9px;
}
.file-icon {
  font: 27px var(--mono);
  color: #ecac8f;
}
.flow-file b {
  display: block;
  font: 12px var(--mono);
}
.flow-file div > span {
  display: block;
  font-size: 9px;
  margin-top: 6px;
  color: #9fae94;
}
.file-status {
  margin-left: auto;
  font: 7px var(--mono);
  letter-spacing: 1px;
  border: 1px solid #5c6a52;
  padding: 4px 5px;
  border-radius: 4px;
  color: #c4d3ba;
}
.replay-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5b6851;
  margin: 22px 40px;
}
.replay-line span {
  flex: 1;
  border-top: 1px dashed #b7c2ac;
}
.replay-line b {
  font: 8px var(--mono);
  letter-spacing: 1px;
}
.run-stack {
  padding: 0 22px;
}
.run-stack > div {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f2f5eb;
  border: 1px solid #ced8c4;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 7px;
  font-size: 11px;
}
.run-index {
  font: 9px var(--mono);
  color: #5e6656;
}
.run-stack b {
  margin-left: auto;
  font: 8px var(--mono);
  color: #586a50;
  white-space: nowrap;
}
.run-stack i {
  font-style: normal;
  margin-left: 4px;
}
.visual-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 23px;
  padding: 17px 22px;
  border-top: 1px solid #cdd6c4;
  font-size: 9px;
  color: #6e7f62;
}
.visual-counter {
  margin-left: auto;
  font: 14px var(--mono);
  color: #5b6d51;
}
.hero-footer {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #60675a;
}
.intro {
  padding: 105px 0 94px;
}
h2 {
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -2px;
  font-weight: 550;
}
.intro-heading,
.onboarding-heading,
.evidence-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 90px;
  margin-top: 24px;
}
.intro-heading p,
.onboarding-heading p,
.evidence-heading > p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.9;
  max-width: 440px;
}
.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-top: 41px;
}
.workflow {
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f0f0e7;
}
.workflow.active {
  background: #e4eadb;
  border-color: #c5d0ba;
}
.workflow-label {
  font-size: 13px;
  color: #68745d;
  margin-bottom: 21px;
}
.workflow-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.workflow-steps b {
  font-weight: 400;
  color: #5f6856;
}
.workflow p {
  font-size: 12px;
  color: var(--muted);
  margin: 24px 0 18px;
}
.workflow-tag {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #5f6657;
}
.workflow.active .workflow-tag {
  color: #6a8157;
}
.repair-note {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 23px;
  color: var(--muted);
  font-size: 11px;
}
.repair-note > .ui-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #61685a;
}
.repair-note strong {
  font-weight: 500;
  color: #46513e;
}
.repair-note > a {
  margin-left: auto;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.demo-section {
  padding: 90px 0;
  background: #202820;
  color: #f3f2e9;
}
.demo-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 90px;
  align-items: center;
}
.demo-layout .section-label {
  color: #a2b096;
}
.demo-layout h2 {
  margin: 24px 0;
  font-size: 43px;
}
.demo-layout h2 em {
  font-style: normal;
  color: #eaa583;
}
.demo-layout > div > p {
  max-width: 350px;
  font-size: 13px;
  color: #a6b19b;
}
.demo-controls {
  display: flex;
  gap: 7px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.demo-tab {
  background: transparent;
  color: #bac6b1;
  border: 1px solid #56634c;
  padding: 8px 13px;
  border-radius: 25px;
  font-size: 11px;
}
.demo-tab.selected {
  background: #e8e7dc;
  border-color: #e8e7dc;
  color: #253020;
}
.demo-layout .demo-caption {
  font-size: 10px;
  margin-top: 17px;
  max-width: 380px;
  color: #829377;
}
.terminal {
  border: 1px solid #42513a;
  border-radius: 10px;
  background: #161e16;
  box-shadow: 0 24px 45px #0002;
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 13px 17px;
  background: #2a3527;
  color: #b5c2aa;
  font: 9px var(--mono);
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b7c5e;
}
.terminal-bar button {
  margin-left: auto;
}
.icon-button {
  font-size: 10px;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  padding: 4px 9px;
}
.icon-button:hover {
  opacity: 0.7;
}
.terminal-body {
  padding: 24px 23px;
}
.command {
  display: flex;
  gap: 10px;
  font: 11px/1.8 var(--mono);
  color: #d3daca;
  overflow-wrap: anywhere;
}
.command > span {
  color: #b3c49b;
}
.command code {
  min-width: 0;
}
.terminal-lines {
  min-height: 210px;
  padding: 31px 0;
}
.terminal-lines > div {
  display: flex;
  gap: 13px;
  font-size: 11px;
  margin-bottom: 17px;
  color: #9bac8d;
}
.line-number {
  font: 9px var(--mono);
  padding-top: 4px;
  color: #9aaf88;
}
.terminal-lines .good {
  color: #c5d8ad;
}
.terminal-lines .warn {
  color: #eab396;
}
.terminal-total {
  border-top: 1px solid #33452c;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 8px var(--mono);
  color: #8aa077;
}
.terminal-total b {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: #c5d8ad;
}
.advantages {
  padding: 100px 0;
}
.advantage-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 65px;
  gap: 35px;
  align-items: center;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.advantage-row:first-of-type {
  margin-top: 30px;
}
.advantage-number {
  font: 10px var(--mono);
  color: #606858;
}
.advantage-row h3 {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.5;
}
.advantage-row p {
  font-size: 13px;
  color: var(--muted);
}
.advantage-symbol {
  font-size: 47px;
  color: #5e6855;
  text-align: right;
}
.evidence-section {
  background: #e7ecdf;
  padding: 83px 0 67px;
  border-top: 1px solid #d5ddcc;
  border-bottom: 1px solid #d5ddcc;
}
.evidence-heading {
  margin-top: 0;
}
.evidence-heading h2 {
  margin-top: 23px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 46px 0 31px;
}
.metric-grid > div {
  padding: 0 32px;
  border-right: 1px solid #c5d0b9;
}
.metric-grid > div:first-child {
  padding-left: 0;
}
.metric-grid > div:last-child {
  border: 0;
}
.metric-grid span {
  color: #5e6a52;
  font: 8px var(--mono);
  letter-spacing: 1px;
}
.metric-grid b {
  display: block;
  color: #38582e;
  font-size: 78px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -5px;
  margin-top: 8px;
}
.metric-grid small {
  font-size: 27px;
  letter-spacing: -1px;
  margin-left: 5px;
}
.metric-grid p {
  font-size: 11px;
  color: #5c6850;
}
.methodology {
  border: 1px solid #c4cfb9;
  border-radius: 6px;
  font-size: 12px;
}
summary {
  cursor: pointer;
}
.methodology summary {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.methodology-content {
  padding: 0 20px 22px;
  color: #68795a;
  font-size: 12px;
}
.methodology-content p {
  margin: 13px 0;
}
.methodology-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
caption {
  text-align: left;
  padding: 9px 0;
}
th,
td {
  border-bottom: 1px solid #c5d1b8;
  padding: 10px;
  text-align: left;
  font-weight: 400;
}
.complex-proof {
  margin-top: 28px;
  padding-top: 25px;
  border-top: 1px solid #c9d3bf;
  display: flex;
  gap: 20px;
  align-items: center;
}
.proof-icon {
  font-size: 33px;
  color: #566846;
}
.complex-proof strong {
  font-weight: 550;
  font-size: 13px;
}
.complex-proof p {
  color: #5c6850;
  font-size: 11px;
  margin-top: 6px;
}
.onboarding {
  padding: 95px 0 65px;
}
.agent-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 34px 0;
}
.agent-picker button {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 20px;
  font-size: 13px;
  border: 1px solid #ccd3c3;
  border-radius: 6px;
  background: transparent;
  color: #616b59;
}
.agent-picker button.selected {
  background: #e6ebdf;
  color: #34482b;
  border-color: #a7b999;
}
.agent-picker > span {
  font-size: 11px;
  color: #61685a;
  margin-left: 12px;
}
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.onboarding-steps li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.step-number {
  font: 11px var(--mono);
  padding-top: 8px;
  color: #5c6655;
}
.onboarding-steps h3 {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: -0.6px;
}
.onboarding-steps p {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0;
  max-width: 780px;
}
.onboarding-steps a {
  font-size: 11px;
  color: #5a684f;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.install-command {
  margin: 20px 0 12px;
  background: #eeeee5;
  border: 1px solid #d1d7c8;
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
.install-command button {
  position: absolute;
  right: 16px;
  top: 15px;
  color: #626a5c;
}
.install-command pre {
  margin: 0;
  padding-top: 12px;
  overflow-x: auto;
  font: 12px/2 var(--mono);
  color: #586d48;
}
.inline-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #eeeee5;
  border: 1px solid #d1d7c8;
  border-radius: 6px;
  padding: 12px 18px;
  margin: 17px 0;
  max-width: 780px;
}
.inline-command code {
  font-size: 12px;
  overflow-wrap: anywhere;
}
code {
  font-family: var(--mono);
  font-size: 0.9em;
}
.prompt-card {
  padding: 21px 23px;
  margin: 20px 0;
  border: 1px solid #e6cbb8;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #f4e8dc;
}
.prompt-card p {
  margin: 0 0 13px;
  font-size: 14px;
  color: #6e5945;
}
.prompt-card button {
  color: #9b7050;
}
.onboarding-steps .small-note {
  font-size: 11px;
  color: #616859;
}
.faq {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 75px;
  padding: 25px 0 85px;
}
.faq h2 {
  margin-top: 24px;
}
.faq-items details {
  border-bottom: 1px solid var(--line);
}
.faq-items summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  list-style: none;
  font-size: 13px;
}
.faq-items summary > span {
  color: #606b56;
}
.faq-items p {
  padding: 0 0 25px;
  font-size: 12px;
  color: var(--muted);
}
.faq-items details[open] .disclosure-icon,
.methodology[open] .disclosure-icon {
  transform: rotate(45deg);
}
.final-cta {
  text-align: center;
  padding: 76px 0 86px;
  border-top: 1px solid var(--line);
}
.final-cta .section-label {
  justify-content: center;
}
.final-cta h2 {
  margin: 25px 0 32px;
  font-size: 56px;
  letter-spacing: -2.5px;
}
.final-cta h2 span {
  color: #ac4b2a;
}
.final-cta .text-link {
  display: block;
  margin-top: 22px;
  font-size: 12px;
  color: var(--muted);
}
.footer {
  border-top: 1px solid var(--line);
  padding: 27px 0 35px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.footer .brand {
  font-size: 23px;
}
.footer > div {
  display: flex;
  gap: 25px;
  color: #62695a;
  font-size: 9px;
}
.footer > div a {
  color: #5c704d;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 15px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 18px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 10px 25px #0002;
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 30;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.clipboard-fallback {
  position: fixed;
  top: 0;
  left: -9999px;
}
@media (max-width: 1100px) {
  .brand-note {
    display: none;
  }
  .hero {
    gap: 35px;
  }
  h1 {
    font-size: 75px;
    letter-spacing: -4.8px;
  }
  .hero-description {
    font-size: 21px;
  }
  .hero-support {
    font-size: 13px;
  }
  .file-status {
    display: none;
  }
  .flow-file b {
    font-size: 10px;
  }
  .intro-heading,
  .onboarding-heading,
  .evidence-heading {
    gap: 45px;
  }
  .demo-layout {
    gap: 45px;
  }
  .advantage-row {
    gap: 23px;
    grid-template-columns: 35px 1fr 1fr 45px;
  }
  .metric-grid b {
    font-size: 65px;
  }
  .faq {
    gap: 45px;
  }
}
@media (max-width: 760px) {
  .wrap,
  .header {
    width: calc(100% - 40px);
  }
  .header {
    height: 78px;
    gap: 12px;
  }
  .header nav {
    gap: 18px;
    font-size: 11px;
  }
  .header nav > a:first-child,
  .nav-github,
  .brand-divider {
    display: none;
  }
  .brand {
    font-size: 24px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 42px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  h1 {
    font-size: clamp(53px, 12vw, 82px);
    letter-spacing: -3.8px;
    margin: 25px 0;
  }
  .hero-description {
    font-size: 22px;
  }
  .hero-support {
    font-size: 13px;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .compatibility {
    gap: 18px;
    margin-top: 29px;
  }
  .compatibility-note {
    font-size: 8px;
  }
  .hero-visual {
    width: 100%;
    max-width: 520px;
    justify-self: center;
    transform: none;
  }
  .flow-file b {
    font-size: 12px;
  }
  .hero-footer {
    margin-top: 0;
    padding: 20px 0;
    font-size: 7px;
  }
  .hero-footer > span:last-child {
    display: none;
  }
  .intro {
    padding: 65px 0;
  }
  h2 {
    font-size: 34px;
  }
  .intro-heading,
  .onboarding-heading,
  .evidence-heading {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  .intro-heading p,
  .onboarding-heading p,
  .evidence-heading > p {
    font-size: 13px;
    max-width: none;
  }
  .workflow-grid {
    grid-template-columns: 1fr;
    margin-top: 27px;
  }
  .workflow {
    padding: 23px 24px;
  }
  .workflow-steps {
    font-size: 14px;
  }
  .repair-note {
    flex-wrap: wrap;
    gap: 9px;
    align-items: start;
  }
  .repair-note > p {
    flex: 1;
  }
  .repair-note > a {
    margin-left: 30px;
  }
  .demo-section {
    padding: 60px 0;
  }
  .demo-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .demo-layout h2 {
    font-size: 38px;
  }
  .terminal-lines {
    min-height: 190px;
  }
  .advantages {
    padding: 60px 0;
  }
  .advantage-row {
    grid-template-columns: 28px 1fr 42px;
    gap: 15px;
    padding: 28px 0;
    align-items: start;
  }
  .advantage-row h3 {
    font-size: 23px;
  }
  .advantage-row p {
    grid-column: 2;
    font-size: 12px;
  }
  .advantage-symbol {
    grid-column: 3;
    grid-row: 1/3;
    font-size: 40px;
  }
  .evidence-section {
    padding: 60px 0 45px;
  }
  .metric-grid {
    margin: 33px 0 25px;
  }
  .metric-grid > div {
    padding: 0 11px;
  }
  .metric-grid b {
    font-size: 41px;
    letter-spacing: -2.5px;
  }
  .metric-grid small {
    font-size: 15px;
    letter-spacing: -0.6px;
  }
  .metric-grid span {
    display: block;
    min-height: 23px;
    font-size: 6px;
    letter-spacing: 0.4px;
  }
  .metric-grid p {
    font-size: 9px;
  }
  .methodology summary {
    padding: 14px;
    font-size: 11px;
  }
  .methodology-content {
    padding: 0 14px 20px;
  }
  .complex-proof {
    align-items: start;
    gap: 13px;
  }
  .complex-proof p {
    font-size: 10px;
  }
  .onboarding {
    padding: 65px 0 45px;
  }
  .agent-picker {
    margin: 28px 0 20px;
  }
  .agent-picker > span {
    flex-basis: 100%;
    margin-left: 0;
    font-size: 10px;
  }
  .onboarding-steps li {
    grid-template-columns: 30px 1fr;
    gap: 14px;
    padding: 25px 0;
  }
  .onboarding-steps h3 {
    font-size: 18px;
  }
  .onboarding-steps p {
    font-size: 12px;
  }
  .install-command {
    padding: 17px;
    margin: 18px 0 12px;
  }
  .install-command pre {
    padding-top: 20px;
    font-size: 10px;
  }
  .inline-command {
    padding: 12px 10px;
    gap: 9px;
  }
  .inline-command code {
    font-size: 10px;
  }
  .prompt-card {
    padding: 17px;
  }
  .prompt-card p {
    font-size: 12px;
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-bottom: 55px;
  }
  .faq-items summary {
    font-size: 12px;
    padding: 20px 0;
  }
  .final-cta {
    padding: 60px 0;
  }
  .final-cta h2 {
    font-size: 40px;
    letter-spacing: -1.8px;
  }
  .footer {
    flex-wrap: wrap;
    padding: 25px 0;
  }
  .footer > div {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    font-size: 8px;
  }
  .desktop-break {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  .button:hover {
    transform: none;
  }
}

/* Readable small labels and controls, including on the tinted panels. */
.visual-top,
.visual-bottom {
  color: #526247;
}
.workflow-label,
.workflow.active .workflow-tag {
  color: #526247;
}
.prompt-card .icon-button {
  color: #805637;
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
.noscript-note {
  margin: 0 auto 32px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 760px) {
  button {
    min-height: 44px;
  }
  .header nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .header nav a:first-child {
    display: none;
  }
}

.brand-wordmark {
  display: block;
  width: 108px;
  height: 32px;
}
.footer .brand-wordmark {
  width: 94.5px;
  height: 28px;
}
.methodology-content {
  color: #526247;
}
@media (max-width: 760px) {
  .brand-wordmark {
    width: 101.25px;
    height: 30px;
  }
}

@media (max-width: 760px) {
  .install-command pre {
    padding-top: 44px;
  }
}

/* Let long install commands scroll inside their block on narrow screens. */
.onboarding-steps li > div {
  min-width: 0;
}
.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .metric-grid b {
    font-size: clamp(34px, 10.4vw, 41px);
  }
}

/* Vector UI icons and unmodified, locally served official product assets. */
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.agent-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.compatibility b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compatibility .agent-icon {
  width: 20px;
  height: 20px;
}
.agent-chip .agent-icon {
  width: 24px;
  height: 24px;
}
.agent-picker .agent-icon {
  width: 20px;
  height: 20px;
}
.ui-icon.file-icon {
  width: 32px;
  height: 32px;
}
.ui-icon.advantage-icon {
  width: 42px;
  height: 42px;
  color: #5e6855;
  justify-self: end;
}
.ui-icon.proof-icon {
  width: 33px;
  height: 33px;
}
.visual-counter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.disclosure-icon {
  width: 14px;
  height: 14px;
}
.workflow-arrow {
  width: 16px;
  height: 16px;
  color: #69765f;
}

/* Lead with the product's job; keep the brand slogan as supporting copy. */
.hero h1 {
  font-size: clamp(36px, 3.3vw, 48px);
  line-height: 1.35;
  letter-spacing: -2.3px;
  word-break: keep-all;
}
.hero-description {
  word-break: keep-all;
  font-size: 20px;
  line-height: 1.6;
}
.hero-support strong {
  color: var(--text);
  font-weight: 550;
}
.hero-request {
  margin: 22px 22px 0;
  padding: 15px 18px;
  border: 1px solid #c4cdbb;
  border-radius: 8px;
  background: #f6f6ef;
}
.hero-request > span {
  color: #526247;
  font-size: 10px;
}
.hero-request p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 5px;
  word-break: keep-all;
}
.hero-visual .connector {
  height: 36px;
}
.hero-visual .connector span,
.hero-visual .replay-line b {
  font-size: 9px;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(29px, 7.4vw, 46px);
    letter-spacing: -1.5px;
  }
  .hero-description {
    font-size: 18px;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0;
  }
  .hero-request {
    margin: 18px 16px 0;
    padding: 12px 14px;
  }
  .hero-visual .visual-top {
    font-size: 9px;
    letter-spacing: 0;
  }
}

/* Concrete work and verified outcomes take the first screen. */
.hero-visual {
  transform: none;
}
.hero-request {
  margin-bottom: 18px;
}
.document-scene {
  margin: 0 22px;
  background: #fffdf7;
  border: 1px solid #c4cdbb;
  border-radius: 8px;
  overflow: hidden;
}
.document-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  background: #eeeee5;
  border-bottom: 1px solid #d3d7ca;
  font-size: 12px;
}
.document-title small {
  margin-left: auto;
  font-size: 9px;
  color: #526247;
}
.document-paper {
  min-height: 175px;
  padding: 22px;
}
.paper-label {
  color: #526247;
  font-size: 10px;
}
.document-paper .document-heading {
  font-size: 18px;
  margin: 9px 0 13px;
  font-weight: 600;
}
.document-paper p {
  font-size: 12px;
  color: #4d5945;
  line-height: 1.9;
}
.document-caret {
  display: inline-block;
  width: 1px;
  height: 15px;
  background: #526247;
  margin-top: 8px;
}
.document-actions {
  list-style: none;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  border-top: 1px solid #d3d7ca;
  color: #3c5033;
}
.document-actions b {
  display: block;
  font: 9px var(--mono);
  margin-bottom: 3px;
}
.hero-proof {
  padding: 20px 22px;
  font-size: 12px;
}
.hero-proof p {
  margin: 10px 0 5px;
}
.hero-proof a,
.case-source,
.application-note a {
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.evidence-tag {
  display: inline-block;
  color: #36502d;
  background: #e6ecdd;
  border: 1px solid #bac7ae;
  border-radius: 4px;
  font-size: 10px;
  padding: 4px 7px;
}
.use-cases {
  padding: 65px 0 75px;
  scroll-margin-top: 30px;
}
.cases-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: end;
  margin: 22px 0 35px;
}
.cases-heading p {
  color: var(--muted);
  max-width: 460px;
  font-size: 14px;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.use-case {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid #ccd3c2;
  border-radius: 12px;
  background: #f1f2e9;
}
.case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.case-number {
  font: 10px var(--mono);
  color: #526247;
}
.use-case h3 {
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: -1px;
  margin: 25px 0 17px;
}
.use-case blockquote {
  margin: 0 0 16px;
  padding-left: 13px;
  border-left: 2px solid var(--accent);
  font-size: 14px;
  color: #2d3e27;
  word-break: keep-all;
}
.use-case > p {
  color: #526247;
  font-size: 12px;
  line-height: 1.9;
}
.case-steps {
  margin: 22px 0;
  padding-left: 20px;
  color: #42513a;
  font-size: 12px;
  line-height: 2.2;
}
.case-mini-form {
  display: grid;
  gap: 8px;
  padding: 15px;
  margin: 22px 0;
  background: #fffdf7;
  border: 1px solid #d0d7c6;
  border-radius: 6px;
  font-size: 12px;
}
.case-mini-form strong {
  border-top: 1px solid #d0d7c6;
  padding-top: 8px;
  font-weight: 600;
}
.case-outcome {
  margin-top: auto;
  border-top: 1px solid #cbd4c0;
  padding-top: 18px;
}
.case-outcome > span {
  font-size: 10px;
  color: #526247;
}
.case-outcome strong {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  margin: 5px 0 9px;
}
.case-outcome p {
  font-size: 11px;
  line-height: 1.9;
  color: #526247;
}
.case-source {
  margin-top: 17px;
  align-self: start;
}
.application-note {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 50px;
  row-gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  margin-top: 20px;
}
.application-note h3 {
  font-size: 20px;
}
.application-note p {
  font-size: 13px;
  color: #526247;
}
.application-note a {
  grid-column: 2;
  justify-self: start;
}
@media (max-width: 1000px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
  .use-case {
    padding: 25px;
  }
  .use-case h3 br {
    display: none;
  }
}
@media (max-width: 760px) {
  .use-cases {
    padding: 45px 0;
  }
  .cases-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cases-heading h2 {
    font-size: 30px;
  }
  .document-scene {
    margin: 0 16px;
  }
  .document-title {
    padding: 12px;
    flex-wrap: wrap;
  }
  .document-title small {
    width: 100%;
    margin-left: 24px;
  }
  .document-paper {
    padding: 18px;
  }
  .document-actions {
    font-size: 9px;
  }
  .hero-proof {
    padding: 18px 16px;
  }
  .application-note {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .application-note a {
    grid-column: 1;
  }
}

.hero {
  padding-top: 32px;
}
.hero .agent-row {
  margin-top: 18px;
}
.hero .hero-request {
  margin-top: 16px;
  margin-bottom: 14px;
  padding: 12px 15px;
}
.hero .document-paper {
  min-height: 150px;
  padding: 17px 20px;
}
.hero .hero-proof {
  padding-top: 15px;
  padding-bottom: 16px;
}
.hero-copy {
  align-self: center;
}
.use-cases {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .hero {
    padding-top: 26px;
  }
  .use-cases {
    margin-top: 30px;
  }
}

/* Genuine app-window recordings, with native controls and original screenshots. */
.hero-real-media {
  margin: 18px 20px 0;
}
.hero-real-media video {
  display: block;
  width: 100%;
  height: auto;
  background: #1b211c;
  border-radius: 8px;
}
.hero-real-media figcaption {
  padding: 18px 0 20px;
  font-size: 12px;
}
.hero-real-media figcaption strong {
  font-weight: 600;
}
.hero-real-media figcaption p {
  margin: 8px 0;
  color: #46563d;
}
.hero-real-media figcaption a,
.recording-method a {
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.recordings-heading {
  margin: 20px 0 27px;
  scroll-margin-top: 30px;
}
.recordings-heading h3 {
  font-size: 25px;
  margin: 12px 0;
  letter-spacing: -0.7px;
}
.recordings-heading > p {
  max-width: 760px;
  color: #526247;
  font-size: 13px;
}
.recording-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.recorded-case {
  padding: 25px;
  border: 1px solid #ccd3c2;
  border-radius: 12px;
  background: #f1f2e9;
  min-width: 0;
}
.recorded-case h3 {
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: -1px;
  margin: 24px 0;
}
.recorded-case video {
  display: block;
  width: 100%;
  height: 370px;
  object-fit: contain;
  background: #242423;
  border-radius: 8px;
}
.recorded-case blockquote {
  margin: 20px 0 14px;
  border-left: 2px solid var(--accent);
  padding-left: 13px;
  font-size: 15px;
}
.recorded-case > p {
  font-size: 13px;
  color: #46563d;
  line-height: 1.9;
}
.recorded-case .recording-caption {
  color: #526247;
  font-size: 11px;
  margin-top: 12px;
}
.recorded-case .case-source {
  display: inline-block;
}
.recording-method {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #ccd3c2;
  border-radius: 8px;
  color: #46563d;
  font-size: 12px;
}
.recording-method p {
  margin: 15px 0;
  line-height: 1.9;
}
@media (max-width: 760px) {
  .recording-grid {
    grid-template-columns: 1fr;
  }
  .recorded-case {
    padding: 20px;
  }
  .recorded-case video {
    height: 330px;
  }
  .hero-real-media {
    margin: 16px 16px 0;
  }
  .recordings-heading h3 {
    font-size: 23px;
  }
}

.raw-recording {
  display: block;
  width: fit-content;
  margin-top: 16px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pointer-disclosure {
  margin-top: 22px;
  padding: 15px 18px;
  border-left: 3px solid #2b7de9;
  background: #eaf0f7;
  font-size: 12px;
  color: #29405b;
  line-height: 1.9;
}

.browser-examples {
  scroll-margin-top: 24px;
  padding-bottom: 45px;
  margin-bottom: 35px;
  border-bottom: 1px solid var(--line);
}
.browser-recording-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.browser-case {
  padding: 21px;
}
.browser-case .case-top {
  flex-wrap: wrap;
}
.browser-case h4 {
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.8px;
  margin: 22px 0;
}
.browser-case video {
  height: auto;
  aspect-ratio: 8 / 5;
}
.browser-case blockquote {
  font-size: 14px;
  word-break: keep-all;
}
.browser-source {
  display: block;
  width: fit-content;
  margin-top: 14px;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.browser-path-note {
  margin-top: 23px;
  padding: 17px 19px;
  background: #eaf0e2;
  border: 1px solid #c7d2bc;
  border-radius: 7px;
  color: #46563d;
  font-size: 12px;
  line-height: 1.9;
}
@media (max-width: 1000px) {
  .browser-recording-grid {
    grid-template-columns: 1fr;
  }
  .browser-case video {
    max-height: 400px;
  }
  .browser-case h4 br {
    display: none;
  }
}

.video-shell {
  position: relative;
}
.video-start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 19px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #1b211cee;
  color: white;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px #0003;
  cursor: pointer;
  white-space: nowrap;
}
.video-start[hidden] {
  display: none;
}
.video-start:hover {
  background: #34452d;
}
.video-start .ui-icon {
  width: 19px;
  height: 19px;
}

/* Real application gallery; all examples remain available without JavaScript. */
.example-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}
.example-filters[hidden],
.everyday-case[hidden] {
  display: none;
}
.example-filters button {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.example-filters button[aria-pressed="true"] {
  background: var(--text);
  color: #fff;
}
.case-result {
  border-left: 3px solid #cc542e;
  padding-left: 12px;
  font-weight: 600;
  font-size: 13px;
}
.fixture-example {
  margin: 20px 0 40px;
}
.fixture-example > article {
  max-width: 740px;
  margin: 20px 0;
}
.everyday-case video {
  object-fit: contain;
  background: #fff;
}
.everyday-case .video-shell {
  margin-top: auto;
}

/* Tacto product site — charcoal, warm white and a single brand accent. */
:root{--bg:#fafaf9;--panel:#fff;--text:#202321;--muted:#686d69;--line:#e3e5e1;--soft:#f0f1ee;--accent:#d64c26}
body{font-size:15px;line-height:1.7;color:var(--text)}
::selection{background:#fbd8c9;color:#202321}
h1,h2,h3,h4{word-break:keep-all}
.wrap{width:min(1200px,calc(100% - 96px))}
.header{height:88px;width:min(1328px,calc(100% - 96px));gap:24px}
.brand{gap:16px}.brand-note{font:10px var(--mono);letter-spacing:1px;color:#606b59}.brand-divider{color:#c9ceca;margin:0}
.header nav{gap:32px;font-size:13px;font-weight:550}.header nav a:hover{color:var(--accent)}
.nav-github{font-size:12px;border-radius:7px;padding:9px 16px;background:#fff;border-color:#dedfdb}
.hero.wrap{width:min(1392px,calc(100% - 40px));padding:64px clamp(32px,4.4vw,72px);background:#1c211f;color:#fff;border-radius:20px;display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center;overflow:hidden}
.hero-copy{min-width:0;max-width:570px}
.release-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #48504a;border-radius:30px;padding:6px 11px;font:10px/1.6 var(--mono);letter-spacing:.4px;color:#d4dad3;max-width:100%}
.release-pill>span:nth-child(2){font:11px var(--sans);letter-spacing:0;border-left:1px solid #48504a;padding-left:10px}.release-pill .ui-icon{width:12px;height:12px}
.signal{width:5px;height:5px;background:#fa865c;box-shadow:0 0 0 3px #fa865c18}
.hero h1{font-size:clamp(39px,3.85vw,58px);line-height:1.26;letter-spacing:-2.8px;font-weight:650;margin:30px 0 23px}
.hero h1 span{color:#a8b1aa}
.hero-description{font-size:16px;line-height:1.9;letter-spacing:-.35px;color:#c5cdc6;font-weight:400}
.hero-actions{display:flex;gap:10px;margin:29px 0 0;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border-radius:7px;font-size:13px;font-weight:600;transition:background .16s,transform .16s}
.button.primary{background:#bf4726;border:1px solid #bf4726;color:#fff;box-shadow:none}.button.primary:hover{background:#d65430;transform:translateY(-1px)}
.button.secondary{background:transparent;border:1px solid #525b54;color:#f0f2ef}.button.secondary:hover{background:#2b332d}
.hero .compatibility{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:31px;padding:0;border:0;color:#f5f7f3;font-size:13px}
.compatibility>span:first-child{font:9px var(--mono);letter-spacing:1.3px;color:#9ea99f}.compatibility b{font-weight:550;display:inline-flex;align-items:center;gap:7px}
.hero .agent-icon{width:20px;height:20px;background:#fff;border-radius:5px;padding:2px}
.platform-note{font:11px/1.6 var(--sans);color:#a0aca2;margin-top:16px}
.hero-film{margin:0;min-width:0;background:#f5f6f3;border:1px solid #566055;border-radius:12px;box-shadow:0 24px 60px #0004;overflow:hidden;color:#202321;transform:rotate(-1deg)}
.film-heading{height:37px;padding:0 15px;display:flex;align-items:center;gap:7px;background:#303831;color:#b8c5ba;font:9px var(--mono);letter-spacing:1px}
.film-heading>span:last-child{margin-left:auto;letter-spacing:0;color:#d1d9d1}.film-dot{height:5px;width:5px;border-radius:50%;background:#9cb49f}
.hero-film video{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;background:#fff}
.hero-film figcaption{padding:18px 20px 9px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.hero-film figcaption strong{display:block;font-size:13px;letter-spacing:-.25px}.hero-film figcaption div>span{display:block;font-size:11px;margin-top:4px;color:#606b59}
.film-evidence{font-size:9px;padding:4px 7px;background:#e6ebe3;color:#455747;border-radius:4px;white-space:nowrap}.film-note{font-size:9px;color:#697168;padding:0 20px 15px}
.hero-film .video-start{background:#202721ed;font-size:12px;box-shadow:0 4px 24px #0004}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:48px 0 50px;border-bottom:1px solid var(--line)}
.principles>div{min-width:0}.principles>div>span{font:10px var(--mono);letter-spacing:1.1px;color:#606b59}
.principles h2{font-size:18px;letter-spacing:-.5px;line-height:1.5;margin:12px 0 8px;font-weight:600}.principles p{font-size:13px;line-height:1.8;color:var(--muted);max-width:310px}
.eyebrow,.section-label{font:10px/1.6 var(--mono);letter-spacing:1.7px;color:#606b59}
.workflow-library{padding-top:90px;scroll-margin-top:32px}
.workflow-heading,.cases-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:42px;margin:18px 0 32px}
.workflow-heading h2,.cases-heading h2,.intro-heading h2,.evidence-heading h2,.onboarding-heading h2,.app-showcase h2{font-size:clamp(32px,3.1vw,46px);line-height:1.28;font-weight:600;letter-spacing:-1.9px}
.workflow-heading>p,.cases-heading>p{font-size:14px;line-height:1.85;color:var(--muted);max-width:360px}
.workflow-studio{display:grid;grid-template-columns:1fr;border:1px solid #dde0da;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 12px 40px #17211a04}
.workflow-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px;gap:4px;border-bottom:1px solid var(--line);background:#f0f2ed}
.workflow-rail button{border:1px solid transparent;border-radius:8px;background:transparent;color:#606b59;padding:18px 20px;display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.workflow-rail button:hover{background:#e8ece4}.workflow-rail button[aria-pressed="true"]{border-color:#d9dfd4;background:white;color:#202820;box-shadow:0 2px 4px #17211a06}
.workflow-number{font:9px var(--mono);letter-spacing:.5px;color:#606b59}.workflow-rail button[aria-pressed="true"] .workflow-number{color:#b54a29}
.workflow-rail strong{font-size:16px;font-weight:600;letter-spacing:-.4px}.workflow-rail button>span:last-child{font-size:11px;line-height:1.7}
.workflow-content{padding:28px 32px 20px;min-width:0;display:grid;grid-template-columns:1fr 1.15fr;column-gap:42px;align-content:start}
.carousel-toolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;font-size:11px;color:#606b59}
#carousel-count{margin-left:8px;color:#263224}#task-carousel .carousel-toolbar button,#task-carousel .carousel-arrows button{min-height:44px;padding:8px 14px;font-size:11px;background:#fff;color:#586252;border:1px solid #dce1d7;border-radius:6px}
.scenario-status{grid-column:1;justify-self:start;font-size:10px;color:#7c6349;background:#f6f1e9;padding:4px 8px;border-radius:4px}
#workflow-title{grid-column:1;font-size:24px;line-height:1.45;letter-spacing:-.8px;margin-top:17px}
.workflow-request{grid-column:1;font-size:14px;line-height:1.85;color:#5e6959;margin-top:12px;min-height:0;word-break:keep-all}
.workflow-studio .workflow-steps{grid-column:1;align-items:stretch;display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:18px 0;counter-reset:work}
.workflow-studio .workflow-steps li{width:100%;counter-increment:work;display:grid;grid-template-columns:22px 1fr;column-gap:10px;border-top:1px solid #edf0e9;padding:12px 0;font-size:12px}
.workflow-studio .workflow-steps li::before{content:'0' counter(work);grid-row:1/3;font:10px/1.8 var(--mono);color:#8c9687}.workflow-studio .workflow-steps span{font-size:10px;color:#606b59}.workflow-studio .workflow-steps strong{font-size:12px;font-weight:500;line-height:1.8;color:#3a4636;grid-column:2}
.workflow-result,.workflow-repeat{grid-column:1;display:grid;grid-template-columns:62px 1fr;gap:8px;font-size:12px;line-height:1.85;color:#64705d;padding-top:10px;border-top:1px solid #edf0e9}.workflow-repeat{margin-top:10px}.workflow-result>span,.workflow-repeat>span{font-size:10px;font-weight:600;color:#45513e}
.workflow-recording{grid-column:2;grid-row:2;align-self:center;min-width:0}
.workflow-recording .hero-real-media{display:block;margin:0;border:1px solid #dfe4da;border-radius:10px;overflow:hidden;background:#fafbf8}
.workflow-recording video{display:block;width:100%;height:auto;aspect-ratio:8/5;border-radius:0;background:#fff;object-fit:contain}
.workflow-recording figcaption{padding:20px}.recording-badge{font-size:10px;color:#606b59;background:#edf1e8;padding:3px 7px;border-radius:4px}
#carousel-title{display:block;font-size:14px;line-height:1.7;margin-top:10px;color:#2e3b29}.workflow-recording figcaption p{font-size:12px;line-height:1.85;margin:7px 0 12px;color:#697561}.workflow-recording figcaption a{font-size:11px;color:#45533d;text-decoration:underline;text-underline-offset:4px}
.carousel-navigation{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:24px;padding-top:16px}.carousel-navigation>p{font-size:10px;line-height:1.8;color:#606b59}.carousel-arrows{display:flex;gap:6px;flex-shrink:0}
.carousel-toolbar[hidden],.carousel-navigation[hidden]{display:none}.scenario-note{font-size:11px;line-height:1.9;color:#606b59;margin-top:16px;max-width:1000px}
.use-cases{margin-top:90px;padding-top:0;border:0}.cases-heading>p{max-width:350px}
.recordings-heading{margin-top:28px}.recordings-heading h3{font-size:20px;letter-spacing:-.5px;margin-top:14px}.recordings-heading>p{font-size:13px;color:#606b59;max-width:640px;margin-top:10px}
.evidence-tag{font-size:9px;color:#627259;background:#f1f4ed;border-color:#e2e8dc;border-radius:4px}.example-filters{display:flex;gap:5px;width:fit-content;padding:4px;border:1px solid #dde3d7;border-radius:8px;background:#f0f3eb;margin:24px 0 12px}
.example-filters button{min-height:44px;border:0;border-radius:5px;background:transparent;color:#606d55;padding:8px 15px;font-size:12px}.example-filters button[aria-pressed="true"]{background:white;color:#26311f;box-shadow:0 1px 4px #18241114}
.browser-recording-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.recorded-case{border:1px solid #e0e4da;border-radius:12px;background:white;padding:20px;box-shadow:none;min-width:0}
.browser-case h4{font-size:20px;line-height:1.45;letter-spacing:-.6px;margin:20px 0}.recorded-case video{border-radius:7px;width:100%;background:#fff;height:auto;aspect-ratio:8/5}.recorded-case blockquote{font-size:13px;color:#3f5035;line-height:1.8}.recorded-case>p{font-size:12px;line-height:1.85;color:#6a765f}.recorded-case .recording-caption{font-size:10px;color:#606b59}.recorded-case .case-result{font-size:11px;background:#f0f4e9;color:#4f643f;border-color:#dee8d2;border-radius:4px}.case-source,.raw-recording{font-size:10px;color:#6b795f}
.recording-method,.browser-path-note,.pointer-disclosure{font-size:11px;background:#f3f5ef;border:1px solid #e1e6da;border-radius:7px;color:#657358;padding:16px 20px}.browser-examples{border-bottom:0;margin-bottom:0}
.intro{margin-top:72px;padding-top:50px;border-top:1px solid var(--line)}.intro-heading{gap:60px}.intro-heading>p{font-size:14px;line-height:1.9;color:#606b59}.workflow{background:#fff;border:1px solid #dde4d6;border-radius:10px}.workflow.active{background:#f4f7ef;border-color:#cbd8bd}.workflow.active .workflow-tag{color:#536c3d;background:#e5eddc}.repair-note{color:#68765c;font-size:12px}.repair-note strong{color:#3e5031}
.demo-section{background:#1e2520;color:#f1f4ed;margin-top:72px;padding:72px 0}.demo-layout{gap:70px}.demo-layout h2{font-size:46px;line-height:1.25;letter-spacing:-2px;font-weight:550}.demo-layout h2 em{color:#f69872;font-style:normal}.demo-layout>div>p{color:#aebca5;font-size:13px}.demo-layout .section-label{color:#9da991}.demo-tab{border-radius:6px;background:#293226;border-color:#4c5943;color:#ccd7c4;min-height:44px}.demo-tab.selected{background:#e7eedf;color:#24321a;border-color:#e7eedf}.terminal{border-radius:10px;background:#161d16;border:1px solid #46533e;box-shadow:0 16px 50px #0002}.terminal-bar{background:#2c3527}.terminal-lines .good{color:#a7d48b}.terminal-lines .warn{color:#ffc487}.terminal-total b{color:#b9e69e}.terminal .icon-button{color:#b9c6b0}.demo-caption{color:#a5b59b}
.advantages{padding-top:62px}.advantage-row{padding:30px 0;border-color:#e0e6d8}.advantage-row h3{font-size:26px;letter-spacing:-.7px}.advantage-row p{font-size:13px;color:#606b59}.advantage-symbol{color:#96a788}
.evidence-section{margin-top:70px;background:#edf2e7;padding:70px 0;color:#273320}.evidence-heading>p{font-size:13px;color:#606b59}.metric-grid{border-color:#d7e0cc;margin-top:36px}.metric-grid>div{border-color:#d7e0cc}.metric-grid b{font-size:70px;letter-spacing:-3px;font-weight:500;color:#2e4221}.metric-grid span{font-size:9px;color:#606b59}.metric-grid p{font-size:12px;color:#606b59}.methodology{font-size:12px;border-color:#d7e0cc}.methodology-content{color:#617052}
.app-showcase{display:grid;grid-template-columns: .8fr 1.25fr;align-items:center;gap:70px;padding:100px 0;border-bottom:1px solid var(--line)}.app-showcase h2{margin:18px 0 23px}.app-showcase-copy>p{font-size:14px;line-height:1.9;color:#6a7661}.app-showcase ul{padding:0;list-style:none;font-size:13px;line-height:2.7;color:#45543b;margin:22px 0}.app-showcase li::before{content:'—';margin-right:10px;color:#9fae92}.app-local-note{font-size:11px;color:#606b59}.app-showcase figure{margin:0;min-width:0}.app-showcase img{width:100%;height:auto;display:block;border:1px solid #dce3d3;border-radius:12px;box-shadow:0 20px 65px #26361b12}.app-showcase figcaption{text-align:right;color:#606b59;font-size:10px;margin-top:12px}
.onboarding{padding-top:90px}.onboarding-heading>p{font-size:14px;color:#606b59}.agent-picker button{border-radius:6px}.agent-picker button.selected{background:#273621;border-color:#273621;color:white}.onboarding-steps>li{border-color:#dce4d3}.onboarding-steps h3{font-size:22px;letter-spacing:-.5px}.onboarding-steps p{font-size:13px;line-height:1.9;color:#67745d}.install-command,.prompt-card{border-radius:8px;box-shadow:none}.prompt-card{background:white;border-color:#dfe6d6}.onboarding-steps .small-note{font-size:11px;color:#606b59}
.faq{padding-top:70px;margin-top:60px}.faq h2{font-size:32px;letter-spacing:-1px}.faq summary{font-size:14px}.faq details{border-color:#e0e7d7}.faq details p{font-size:13px;color:#6a775f;line-height:1.9}
.final-cta{margin-top:90px;padding:70px;background:#20271e;border-radius:16px;color:#fff;text-align:center}.final-cta .section-label{justify-content:center;color:#a3b297}.final-cta h2{font-size:46px;line-height:1.3;letter-spacing:-1.8px;font-weight:550}.final-cta h2 span{color:#a5b39b}.final-cta .button.primary{background:#bf4726;border-color:#bf4726;color:#fff}.final-cta .text-link{color:#bcc9b1;font-size:12px}.footer{padding:45px 0;color:#7a8671}.footer>div{font-size:10px}.footer .brand-note{font-size:8px}
:focus-visible{outline:3px solid #df6a43;outline-offset:4px}.skip:not(:focus){top:0;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
@media(min-width:1500px){.hero.wrap{padding-top:80px;padding-bottom:80px}.hero h1{font-size:62px}}
@media(max-width:1100px){.hero.wrap{gap:30px;padding:45px 34px}.hero h1{font-size:42px;letter-spacing:-2px}.release-pill>span:nth-child(2){display:none}.hero-description{font-size:14px}.hero-actions .button{font-size:11px;padding:11px 13px}.film-evidence{display:none}.workflow-content{column-gap:28px}.hero-film figcaption strong{font-size:11px}.brand-note,.brand-divider{display:none}.app-showcase{gap:40px}.browser-recording-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.wrap,.header{width:calc(100% - 48px)}.header{height:76px}.header nav{gap:20px;font-size:12px}.hero.wrap{grid-template-columns:1fr;padding:44px 32px;gap:36px;width:calc(100% - 24px);border-radius:14px}.hero-copy{max-width:none}.hero h1{font-size:48px;letter-spacing:-2.2px}.hero-description{font-size:15px}.hero-actions .button{font-size:13px}.hero-film{transform:none}.hero .compatibility{margin-top:24px}.principles{gap:24px;padding:32px 0}.principles h2{font-size:15px}.principles p{font-size:12px}.workflow-library{padding-top:60px}.workflow-heading,.cases-heading{display:block}.workflow-heading>p,.cases-heading>p{margin-top:18px}.workflow-rail button{padding:14px 12px}.workflow-rail strong{font-size:14px}.workflow-rail button>span:last-child{display:none}.workflow-content{display:block;padding:24px}.workflow-request{min-height:0}.workflow-recording{margin-top:24px}.workflow-recording .hero-real-media{display:grid;grid-template-columns:1.2fr 1fr;align-items:center}.workflow-recording figcaption{padding:18px}.carousel-toolbar{padding-bottom:20px}.app-showcase{grid-template-columns:1fr;gap:30px;padding:64px 0}.app-showcase-copy>p br{display:none}.app-showcase ul{display:flex;flex-wrap:wrap;gap:0 20px;margin:12px 0}.intro-heading{gap:28px}.demo-layout{gap:32px}.demo-layout h2{font-size:36px}.final-cta{padding:48px 24px}.final-cta h2{font-size:36px}.metric-grid b{font-size:54px}}
@media(max-width:540px){.header{width:calc(100% - 40px);gap:12px;height:70px}.header nav{gap:15px;font-size:11px}.nav-github{display:none}.brand-wordmark{width:88px}.hero.wrap{padding:34px 23px}.hero h1{font-size:clamp(32px,8.6vw,44px);letter-spacing:-1.8px;margin:24px 0 18px}.release-pill{font-size:9px}.hero-description{font-size:13px}.hero-actions{margin-top:24px;gap:8px}.hero-actions .button{font-size:11px;padding:12px;gap:6px}.hero .compatibility{gap:16px;font-size:12px}.hero .compatibility>span:first-child{font-size:8px}.hero-film figcaption{padding:14px 14px 7px}.hero-film figcaption strong{font-size:11px}.hero-film figcaption div>span{font-size:10px}.film-note{padding:0 14px 12px;font-size:8px}.film-heading{height:31px;font-size:8px;padding:0 12px}.platform-note{font-size:10px}.principles{grid-template-columns:1fr;gap:20px;padding:28px 0}.principles>div{display:grid;grid-template-columns:95px 1fr;column-gap:12px}.principles>div>span{grid-row:1/3;font-size:9px;padding-top:3px;letter-spacing:0}.principles h2{font-size:15px;margin:0 0 4px}.principles p{font-size:11px}.workflow-heading h2,.cases-heading h2,.intro-heading h2,.evidence-heading h2,.onboarding-heading h2,.app-showcase h2{font-size:31px;letter-spacing:-1.4px}.section-label{font-size:9px}.workflow-heading>p,.cases-heading>p{font-size:12px}.workflow-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.workflow-rail button{padding:12px}.workflow-number{font-size:8px}.workflow-rail strong{font-size:13px}.workflow-content{padding:20px}#workflow-title{font-size:21px}.workflow-request{font-size:13px}.workflow-recording .hero-real-media{display:block}.carousel-navigation>p{font-size:9px}.scenario-note{font-size:10px}.use-cases{margin-top:60px}.browser-recording-grid{grid-template-columns:1fr}.recorded-case{padding:20px}.browser-case h4{font-size:22px}.example-filters{width:100%;gap:2px}.example-filters button{flex:1;min-height:44px;padding:8px 5px;font-size:10px}.intro{margin-top:45px;padding-top:40px}.intro-heading>p{font-size:13px}.workflow-steps{font-size:12px}.workflow{padding:22px}.repair-note{font-size:11px}.demo-section{padding:48px 0}.demo-layout h2{font-size:34px}.demo-controls{gap:6px}.demo-tab{font-size:11px;padding:10px}.advantages{padding-top:35px}.advantage-row h3{font-size:23px}.evidence-section{padding:48px 0;margin-top:40px}.metric-grid b{font-size:56px}.evidence-heading>p{font-size:12px}.app-showcase{padding:55px 0}.onboarding{padding-top:55px}.onboarding-steps h3{font-size:20px}.onboarding-steps p{font-size:12px}.faq{margin-top:30px;padding-top:45px}.faq h2{font-size:29px}.final-cta{margin-top:55px;padding:40px 20px}.final-cta h2{font-size:29px;letter-spacing:-1.2px}.final-cta .text-link{display:block;margin:18px auto 0}.footer{padding:30px 0;gap:22px}.footer .brand-note{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.hero-film{transform:none}}

.workflow-narrative{grid-column:1;grid-row:2;min-width:0;align-self:center}
.case-details{margin-top:15px;border-top:1px solid var(--line);padding-top:12px;font-size:11px;color:#606b59}.case-details summary{cursor:pointer;min-height:32px;font-size:11px;font-weight:550}.case-details blockquote{margin:14px 0;padding-left:12px;border-left:2px solid #dc6945}.case-details p{font-size:12px;line-height:1.9;margin:10px 0}.case-details .recording-caption{font-size:10px;color:#606b59}.case-details[open]{padding-bottom:4px}.everyday-case .case-result{margin-top:14px}

/* Matched observations: expose both arms, not just percentage reductions. */
.benchmark-comparison{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;margin-top:28px;padding:30px;background:#fafcf7;border:1px solid #d5dec9;border-radius:12px}
.benchmark-chart{min-width:0;align-self:center}.benchmark-chart-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}.benchmark-chart-top h3{font-size:15px;letter-spacing:-.3px}.benchmark-chart-top>span{font-size:10px;color:#5c6c4d}
.benchmark-bar-row+.benchmark-bar-row{margin-top:20px}.benchmark-bar-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px}.benchmark-bar-label strong{font:500 19px var(--mono);letter-spacing:-.6px}.benchmark-track{background:#e4eadc;height:12px;border-radius:3px;overflow:hidden}.benchmark-bar{height:100%;border-radius:3px}.sky-bar{width:100%;background:#9da996}.tacto-bar{width:46.49%;background:#be4a28}.benchmark-chart-note{font-size:11px;line-height:1.9;color:#5e6f4e;margin-top:24px}
.benchmark-table{min-width:0}.benchmark-table .table-scroll{margin:0}.benchmark-table table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:12px}.benchmark-table caption{text-align:left;color:#5b6b4c;font-size:10px;margin-bottom:12px;white-space:normal}.benchmark-table th,.benchmark-table td{padding:10px 12px;border-bottom:1px solid #dfe7d5;text-align:right}.benchmark-table th:first-child{text-align:left;font-weight:500}.benchmark-table thead th{font-size:11px;color:#596b49}.benchmark-table thead th:nth-child(2){color:#a13c1e}.benchmark-table tbody td:nth-child(2){font-weight:650;background:#f0f5e9}.benchmark-table td{font-variant-numeric:tabular-nums}.benchmark-table tbody tr:last-child th,.benchmark-table tbody tr:last-child td{border-bottom:0}
.benchmark-scope{font-size:11px;line-height:1.9;color:#566849;margin:17px 0 22px}.benchmark-scope strong{margin-right:7px;color:#364b27}.replay-distinction{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid #d5dfc9;padding-top:27px;margin-top:28px;align-items:center}.replay-distinction span{font:9px var(--mono);letter-spacing:1px;color:#586e48}.replay-distinction h3{font-size:17px;line-height:1.65;letter-spacing:-.4px;margin-top:8px}.replay-distinction p{font-size:12px;line-height:1.9;color:#5e704f}
@media(max-width:900px){.benchmark-comparison{grid-template-columns:1fr;gap:30px}.benchmark-chart{max-width:560px;width:100%}.benchmark-chart-note br{display:none}.benchmark-table th,.benchmark-table td{padding:12px}.replay-distinction{gap:25px}}
@media(max-width:540px){.benchmark-comparison{padding:20px;gap:25px}.benchmark-chart-top{display:block;margin-bottom:20px}.benchmark-chart-top>span{display:block;margin-top:5px}.benchmark-table table{font-size:11px}.benchmark-table th,.benchmark-table td{padding:10px 6px}.benchmark-scope{font-size:10px}.replay-distinction{grid-template-columns:1fr;gap:12px}.replay-distinction h3{font-size:16px}.replay-distinction p{font-size:11px}}

.activity-promise{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:#d2ddcc;text-underline-offset:4px}.activity-promise:hover{text-decoration:underline;color:#fff}.activity-promise .ui-icon{width:13px;height:13px}
.principles{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.app-local-note{display:block;max-width:350px;line-height:1.9}
@media(max-width:1000px){.principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}}
@media(max-width:540px){.principles{grid-template-columns:1fr;gap:20px}.activity-promise{font-size:10px;gap:6px}.app-local-note{font-size:11px}}
.principles p,.app-local-note{word-break:keep-all}

/* Explain the product first; the full case library follows onboarding. */
.principles + .app-showcase{padding-top:64px;padding-bottom:64px}
.app-showcase + .intro{margin-top:0;padding-top:64px;padding-bottom:56px;border-top:0}
.intro + .evidence-section{margin-top:0}
.faq + .workflow-library{margin-top:72px;padding-top:64px;border-top:1px solid var(--line)}
@media(max-width:760px){.header nav a:first-child{display:inline-flex}}
@media(max-width:540px){.principles + .app-showcase{padding-top:44px;padding-bottom:44px}.app-showcase + .intro{padding-top:44px;padding-bottom:44px}.faq + .workflow-library{margin-top:44px;padding-top:44px}}

/* Connected Flow canvas: readable nodes, a single primary path. */
.graph-explorer{margin-top:32px;border:1px solid #d4d9ce;border-radius:16px;overflow:hidden;background:#fff}
.graph-toolbar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid #d4d9ce;background:#fff}
.graph-toolbar>div:first-child{display:flex;align-items:center;gap:10px;margin-right:auto}.graph-toolbar strong{font-size:15px}.graph-toolbar>div:first-child>span{font-size:12px;color:#596253}.graph-toolbar .ui-icon{width:18px;height:18px}
.graph-input-picker{display:flex;align-items:center;gap:5px}.graph-input-picker>span{font-size:12px;color:#596253;margin-right:5px}.graph-input-picker button,#flow-walk{min-height:42px;border:1px solid #cbd2c5;border-radius:8px;background:#fff;padding:9px 13px;font-size:13px;color:#273222;cursor:pointer}.graph-input-picker button[aria-pressed=true]{background:#fcebe3;border-color:#b94723;color:#923518;font-weight:650}#flow-walk{display:inline-flex;align-items:center;gap:7px;background:#283523;border-color:#283523;color:#fff}#flow-walk:disabled{opacity:.6;cursor:default}
.flow-canvas{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:22px;row-gap:76px;padding:34px 28px;background-color:#f6f8f3;background-image:radial-gradient(#cbd3c3 .8px,transparent .8px);background-size:18px 18px}
.flow-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}.flow-edge{fill:none;stroke:#88947e;stroke-width:1.7;marker-end:url(#edge-arrow)}.flow-edge.replay{stroke:#b94b27;stroke-width:2.3}.flow-edge.exception{stroke:#7b8772;stroke-dasharray:5 5}.flow-connection{fill:#fff;stroke:#929e88;stroke-width:1.5}.flow-connection.replay{stroke:#b94b27}
.graph-node{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:18px 15px;border:1px solid #bfc9b6;border-radius:10px;background:#fff;box-shadow:0 3px 9px #29391a08}.graph-node strong{font-size:14px;line-height:1.5;font-weight:650;word-break:keep-all}.graph-kicker{font-size:11px;line-height:1.6;color:#596451}.graph-agent{grid-column:1/3;grid-row:1}.graph-saved{grid-column:3/5;grid-row:1}.graph-saved>strong{font-family:var(--mono);font-size:14px}.graph-node-heading{display:flex;align-items:center;gap:10px}.flow-provider-icons{display:flex;gap:5px}.flow-provider-icons img{width:21px;height:21px;object-fit:contain}.graph-replay-label{grid-column:5/7;grid-row:1;align-self:center;display:grid;grid-template-columns:8px 1fr;align-items:center;gap:10px;font-size:14px}.graph-replay-label>span:last-child{grid-column:2;font-size:12px;line-height:1.7;color:#596451}.graph-live-dot{width:7px;height:7px;border-radius:50%;background:#b94b27}.graph-step{grid-row:2;min-height:142px;border-top:3px solid #b94b27}.graph-value{font:500 28px/1.2 var(--mono);color:#a23d1d;margin-top:4px}.graph-result{background:#edf3e7;border-color:#82976c;border-top-color:#526c39}.graph-result .graph-value{color:#3a5725}.graph-repair{grid-column:3/5;grid-row:3;border-style:dashed}.graph-repair>span:not(.graph-kicker):not(.graph-port){font-size:12px;color:#596451}.graph-stop{grid-column:5/7;grid-row:3;border-style:dashed}.graph-legend{grid-column:1/3;grid-row:3;display:flex;flex-direction:column;align-self:center;gap:12px;color:#596451;font-size:12px}.graph-legend span{display:flex;align-items:center;gap:9px}.graph-legend i{width:22px;border-top:2px solid #88947e}.graph-legend span:nth-child(2) i{border-color:#b94b27}.graph-legend span:last-child i{border-top-style:dashed}.graph-port{display:none}
.graph-step[data-state=active]{outline:3px solid #b94b27;outline-offset:4px;box-shadow:0 0 0 7px #fae8de}.graph-step[data-state=done]{border-color:#6c8158;background:#edf3e7}.graph-step[data-state=done] .graph-value{color:#3a5725}
.graph-inspector{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 24px;border-top:1px solid #d4d9ce;font-size:13px;color:#34442b}.graph-inspector>div{display:flex;gap:20px}.graph-inspector a{display:inline-flex;align-items:center;gap:5px;text-underline-offset:4px}.graph-inspector a:hover{text-decoration:underline}.graph-inspector .ui-icon{width:14px;height:14px}.graph-disclosure{padding:0 24px 20px;margin:0;color:#596451;font-size:12px;line-height:1.9}.graph-disclosure a{text-decoration:underline;text-underline-offset:3px}
.app-image-link{display:block;cursor:zoom-in}.app-showcase figcaption a{text-decoration:underline;text-underline-offset:3px;color:inherit}.intro-heading>p,.app-showcase-copy>p,.evidence-heading>p{font-size:16px;line-height:1.9;color:#515e47}.principles p{font-size:14px;line-height:1.8}.app-local-note{font-size:12px;color:#58634f}
@media(max-width:1000px){.flow-canvas{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:64px}.graph-agent{grid-column:1/3;grid-row:1}.graph-saved{grid-column:1/3;grid-row:2}.graph-replay-label{grid-column:3;grid-row:1/3}.graph-step{grid-row:auto}.graph-step:nth-of-type(4){grid-column:1;grid-row:3}.graph-step:nth-of-type(5){grid-column:2;grid-row:3}.graph-step:nth-of-type(6){grid-column:3;grid-row:3}.graph-step:nth-of-type(7){grid-column:3;grid-row:4}.graph-step:nth-of-type(8){grid-column:2;grid-row:4}.graph-step:nth-of-type(9){grid-column:1;grid-row:4}.graph-repair{grid-column:2/4;grid-row:5}.graph-stop{grid-column:1/3;grid-row:6}.graph-legend{grid-column:3;grid-row:6}.graph-toolbar{gap:14px}.graph-toolbar>div:first-child{width:100%}}
@media(max-width:540px){.graph-explorer{margin-top:24px;border-radius:12px}.graph-toolbar{padding:16px;gap:12px}.graph-toolbar>div:first-child{gap:8px;flex-wrap:wrap}.graph-toolbar strong{font-size:14px}.graph-toolbar>div:first-child>span{font-size:11px}.graph-input-picker{gap:4px}.graph-input-picker>span{display:none}.graph-input-picker button,#flow-walk{font-size:12px;padding:9px 10px;min-height:44px}#flow-walk{margin-left:auto}.flow-canvas{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 18px;column-gap:24px;row-gap:52px}.graph-agent{grid-column:1/3;grid-row:1}.graph-saved{grid-column:1/3;grid-row:2}.graph-replay-label{grid-column:1/3;grid-row:3;padding-left:18px}.graph-step:nth-of-type(4){grid-column:1;grid-row:4}.graph-step:nth-of-type(5){grid-column:2;grid-row:4}.graph-step:nth-of-type(6){grid-column:2;grid-row:5}.graph-step:nth-of-type(7){grid-column:1;grid-row:5}.graph-step:nth-of-type(8){grid-column:1;grid-row:6}.graph-step:nth-of-type(9){grid-column:2;grid-row:6}.graph-node{padding:16px 12px;gap:8px}.graph-node strong{font-size:13px}.graph-kicker{font-size:11px}.graph-step{min-height:137px}.graph-value{font-size:27px}.graph-repair{grid-column:1/3;grid-row:7}.graph-stop{grid-column:1/3;grid-row:8}.graph-legend{grid-column:1/3;grid-row:9;flex-direction:row;flex-wrap:wrap;gap:15px;font-size:11px}.graph-legend i{width:15px}.graph-inspector{padding:18px 16px;font-size:12px;gap:16px}.graph-inspector>div{gap:18px}.graph-disclosure{padding:0 16px 18px;font-size:11px}.intro-heading>p,.app-showcase-copy>p,.evidence-heading>p{font-size:15px}.principles p{font-size:13px}}
.header-actions{display:flex;align-items:center;gap:12px}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;font-size:12px;font-weight:550;line-height:1;white-space:nowrap;border:1px solid #dedfdb;border-radius:7px;background:var(--panel)}
.lang-switch a{padding:7px 9px;border-radius:5px;color:var(--muted)}
.lang-switch a:hover{color:var(--accent)}
.lang-switch a[aria-current="page"]{background:var(--soft);color:var(--text)}
@media(max-width:540px){.lang-switch{font-size:11px}.lang-switch a{padding:6px 8px}.lang-switch a[aria-current="page"]{display:none}}
/* English nav labels are longer: keep them on one line and drop the first link on phones. */
@media(max-width:540px){html:lang(en) .header{gap:10px}html:lang(en) .header nav{gap:12px}html:lang(en) .header nav a{white-space:nowrap}}
@media(max-width:420px){html:lang(en) .header nav a:first-child{display:none}}
@media(max-width:340px){html:lang(en) .header nav{gap:10px;font-size:10px}html:lang(en) .brand-wordmark{width:76px}}