@font-face { font-family: "Literata"; src: url("fonts/literata-latin-opsz-400-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Warm white that sits with the painting's temperature. No accent: the painting is the colour. */
:root {
  --light-background: oklch(0.985 0.006 80);
  --light-foreground: oklch(0.24 0.012 60);
  --light-muted: oklch(0.55 0.015 60);
  --light-border: oklch(0.9 0.008 80);
  --background: var(--light-background);
  --foreground: var(--light-foreground);
  --muted: var(--light-muted);
  --border: var(--light-border);
  --heading: "Literata", ui-serif, Georgia, serif;
  --body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  /* Content never grows past --page; wider screens get more margin, not a stretched layout. */
  --page: 84rem;
  --edge: max(var(--gutter), calc((100vw - var(--page)) / 2));
  /* One type scale for the whole page. */
  --t-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --t-sub: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --t-title: 1rem;
  --t-body: 0.9375rem;
  --t-small: 0.8125rem;
}
/* Dark is the painting's own shadows, warm like the light theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.195 0.009 70);
    --foreground: oklch(0.94 0.008 80);
    --muted: oklch(0.68 0.014 75);
    --border: oklch(1 0 0 / 9%);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem var(--edge);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--heading);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.brand img { width: 28px; height: 28px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 40rem) { h1 br { display: none; } }
@media (prefers-color-scheme: dark) { .brand img { filter: invert(1); mix-blend-mode: screen; } }
.topnav { display: flex; align-items: center; gap: 1.5rem; }
.signin { font-size: 0.9375rem; color: var(--muted); }
.signin:hover { color: var(--foreground); }

/* The stage carries the painting and one line. Everything else is on the page. */
.hero { padding: 0.5rem var(--edge) 0; }
.stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(62vh, 42rem);
  border-radius: 1.25rem;
  overflow: hidden;
  background: #1c1a17;
}
.stage img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 40%;
}
/* Only enough to seat the type; the sky stays as painted. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(12 11 10 / 0.55), transparent 45%);
}
h1 {
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 20ch;
  font-family: var(--heading);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.lede {
  display: grid;
  gap: 2.5rem;
  max-width: 36rem;
  margin: 5rem 0 0;
  padding: 0 clamp(0rem, 2vw, 1.5rem);
}
.lede p {
  margin: 0;
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem 2.5rem; }
.cta { font-weight: 450; color: var(--foreground); }
.cta span { display: inline-block; transition: transform 0.2s; }
.cta:hover span { transform: translateX(0.2em); }
.quiet { font-size: 1rem; color: var(--muted); }
.quiet:hover { color: var(--foreground); }

/* Section two: principles, drawn. One figure per part, features come later. */
.system { margin: clamp(7rem, 14vw, 12rem) 0 0; padding: 0 var(--edge) clamp(8rem, 16vw, 14rem); }
h2 { margin: 0; max-width: 30ch; font-family: var(--heading); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em; text-wrap: pretty; }
h2 span { color: var(--muted); }
.figs { container-type: inline-size; --k: min(1.15px, 0.094cqw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(4rem, 7vw, 6rem); }
.figs figure { margin: 0; }
/* Each figure sits on a muted tint from a different part of the painting: lit stone, sea grey-green, rock umber. */
.art { height: 16.5rem; display: grid; place-items: center; --ink: var(--foreground); background: var(--panel); border-radius: 0.75rem; }
.art[data-i="1"] { --panel: color-mix(in oklab, #a8946c 26%, var(--background)); }
.art[data-i="2"] { --panel: color-mix(in oklab, #5f6658 24%, var(--background)); }
.art[data-i="3"] { --panel: color-mix(in oklab, #75604a 24%, var(--background)); }
.art svg { width: calc(var(--w) * var(--k)); height: auto; overflow: visible; }
.art path, .art circle { vector-effect: non-scaling-stroke; }
.art path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.art .bg { fill: var(--panel); stroke: none; }
.art .goal { stroke-dasharray: 3 3; opacity: 0.45; }
.art .wire { stroke-dasharray: 0 4; stroke-width: 1.25; opacity: 0.6; }
.art .tex { fill: var(--ink); opacity: 0.45; }
figcaption { margin-top: 1.75rem; }
figcaption b { display: block; font-weight: 500; font-size: var(--t-title); }
figcaption .tag { display: block; width: fit-content; margin: 0.15rem 0 0; font-weight: 400; font-size: var(--t-small); color: var(--muted); }
.tag a:hover { color: var(--foreground); }
.pill { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; font-style: normal; font-size: 0.6875rem; line-height: 1.5; vertical-align: 0.05em; }
figcaption p { margin: 0.6rem 0 0; max-width: 34ch; text-wrap: pretty; font-size: var(--t-body); font-weight: 300; line-height: 1.5; color: var(--muted); }
/* The links line up across the three columns, whatever the caption lengths. */
.figs figure { display: flex; flex-direction: column; }
.figs figcaption { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
figcaption .more { display: inline-flex; gap: 0.35rem; margin-top: auto; padding-top: 1rem; font-size: var(--t-body); font-weight: 450; color: var(--foreground); }
figcaption .more span { transition: transform 0.2s; }
figcaption .more:hover span { transform: translateY(0.15em); }
@media (max-width: 52rem) { .figs { --k: min(1.15px, 0.3cqw); grid-template-columns: 1fr; gap: 4rem; } }

/* Deep dives: one per part. Tag, title with subtitle below, one rendered scene on the part's tint, a feature row. */
/* The cut from the overview into the parts: a hairline across the page and the part's tag. */
.deep { padding: clamp(2.5rem, 5vw, 4rem) var(--edge) clamp(8rem, 16vw, 14rem); }
/* Each part's top strip: a hairline and its tag. The strips share one container (.deeps), so each sticks under the ones before it at the top,
   and waits above the ones after it at the bottom until its section arrives. --row is one strip; n is three parts. */
.deeps { --row: 3rem; }
.part { position: sticky; z-index: 20; display: flex; align-items: center; gap: 0.6rem; height: var(--row); padding: 0 var(--edge); border-top: 1px solid var(--border); background: var(--background); font-size: var(--t-small); font-weight: 500; color: var(--foreground); transition: color 0.2s ease; }
/* Margins that cancel out in flow but make every strip's sticky range the same, so the three enter and leave as one block
   instead of the later strips sliding over the earlier ones at the ends of .deeps. */
.part:nth-of-type(1) { top: 0; bottom: calc(2 * var(--row)); margin-bottom: calc(2 * var(--row)); }
.part:nth-of-type(2) { top: var(--row); bottom: var(--row); margin: var(--row) 0; }
.part:nth-of-type(3) { top: calc(2 * var(--row)); bottom: 0; margin-top: calc(2 * var(--row)); }
.deep:nth-of-type(1) { margin: calc(-2 * var(--row)) 0 calc(-1 * var(--row)); }
.deep:nth-of-type(2) { margin: calc(-1 * var(--row)) 0 calc(-2 * var(--row)); }
.part[aria-current] { box-shadow: 0 1px 0 var(--border); }
.part.wait { color: var(--muted); }
.part:hover { color: var(--foreground); }
#engine { scroll-margin-top: 3rem; }
#context { scroll-margin-top: 6rem; }
#reviews { scroll-margin-top: 9rem; }
.part .ico { width: 1.125rem; height: 1.125rem; overflow: visible; }
.part .ico path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.part .ico .bg { fill: var(--background); stroke: none; }
.deep-head h2 { max-width: 24ch; }
.deep-head .sub { margin: 1.25rem 0 0; max-width: 40ch; font-size: var(--t-sub); font-weight: 300; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.feats b { display: block; font-weight: 500; font-size: var(--t-title); }
.feats p { margin: 0.4rem 0 0; font-size: var(--t-body); font-weight: 300; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.scene { --tint: #5f6658 24%; --panel: color-mix(in oklab, var(--tint), var(--background)); --win: color-mix(in oklab, white 55%, var(--background)); position: relative; margin-top: clamp(3rem, 6vw, 5rem); height: calc(42rem * var(--s, 1)); border-radius: 1rem; background: var(--panel); overflow: hidden; font-size: 0.75rem; line-height: 1.55; color: color-mix(in oklab, var(--foreground) 82%, var(--background)); }
.canvas { position: relative; width: 84rem; height: 42rem; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.scene[data-tone="1"] { --tint: #a8946c 26%; }
.scene[data-tone="3"] { --tint: #75604a 24%; }
.win { position: absolute; background: var(--win); border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: 0.75rem; box-shadow: 0 1px 2px oklch(0 0 0 / 4%), 0 12px 32px -12px oklch(0.3 0.02 60 / 18%); }
.win .bar, .stack .bar { display: flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 0.9rem; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--muted); font-size: 0.6875rem; white-space: nowrap; }
.page { top: 8%; left: 35%; right: -3%; height: 110%; }
.split { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 13rem; height: 100%; }
.tree { display: grid; align-content: start; gap: 0.05rem; padding: 0.9rem 0.6rem; border-right: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--muted); font-size: 0.75rem; }
.tree span { padding: 0.3rem 0.5rem; border-radius: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .grp { margin-top: 0.75rem; font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; }
.tree .grp:first-child { margin-top: 0; }
.tree .on { background: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); }
.page .crumb.now { color: var(--foreground); }
.page::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; border-radius: 0 0 0.75rem 0.75rem; background: linear-gradient(to bottom, transparent, var(--win)); pointer-events: none; }
.page .sep { opacity: 0.4; }
.doc { padding: 1.5rem 1.75rem; }
.doc .h { margin: 0; font-weight: 500; font-size: 0.9375rem; line-height: 1.3; color: var(--foreground); }
.doc .meta { margin: 0.2rem 0 0; font-size: 0.6875rem; color: var(--muted); }
.doc ul, .doc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; max-width: 56ch; }
.doc > p { margin: 0.6rem 0 0; max-width: 56ch; }
.doc .meta + p { margin-top: 1rem; }
.doc a { color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--foreground) 30%, transparent); text-underline-offset: 2px; }
.doc table { width: 100%; max-width: 56ch; border-collapse: collapse; font-size: 0.6875rem; }
.doc th { padding: 0.35rem 0.5rem 0.35rem 0; text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); }
.doc td { padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 6%, transparent); }
.st { display: inline-block; padding: 0 0.4rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); color: var(--muted); white-space: nowrap; }
.st.on { color: var(--foreground); }
.doc pre { margin: 0.5rem 0 0; max-width: 56ch; padding: 0.7rem 0.85rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--foreground) 5%, transparent); font: 0.6875rem/1.6 ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; }
.doc pre .k { color: var(--muted); }
.doc ul li { position: relative; padding-left: 1rem; }
.doc ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.65em; width: 0.3rem; height: 1px; background: var(--muted); }
.rail { display: grid; align-content: start; gap: 0.3rem; padding: 1.5rem 0.9rem; border-left: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--muted); font-size: 0.75rem; }
.rail .grp { margin-top: 1rem; font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rail .grp:first-child { margin-top: 0; }
.person { display: flex; align-items: center; gap: 0.5rem; color: var(--foreground); }
.av { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
.agents { display: inline-flex; }
.agents .mark { width: 1.25rem; height: 1.25rem; padding: 0.15rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--win); }
.agents .mark + .mark { margin-left: -0.35rem; }
.doc h4 { margin: 1.1rem 0 0.3rem; font-size: 0.75rem; font-weight: 500; color: var(--foreground); }
.doc p { margin: 0; max-width: 46ch; }
.session { left: 4.5%; top: 26%; width: 32%; z-index: 3; }
.stack { position: absolute; left: 4.5%; width: 32%; height: 3rem; overflow: hidden; background: var(--win); border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: 0.75rem; box-shadow: 0 8px 24px -14px oklch(0.3 0.02 60 / 22%); }
.stack .bar { border-bottom: 0; }
.stack.s1 { top: calc(26% - 2.1rem); transform: scale(0.95); z-index: 2; }
.stack.s2 { top: calc(26% - 4rem); transform: scale(0.9); z-index: 1; opacity: 0.85; }
.mark { display: block; width: 1rem; height: 1rem; }
.session .title { color: var(--foreground); }
.session .sub, .stack .sub { margin-left: auto; }
.msgs { display: grid; gap: 0.8rem; padding: 1rem 1rem 0.8rem; }
.msg { display: grid; gap: 0.2rem; }
.msg .who { font-size: 0.6875rem; color: var(--muted); }
.msg p { margin: 0; }
.ctx { display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: var(--panel); }
.ctx-label { font-size: 0.5625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ctx b { font-weight: 500; color: var(--foreground); }
.ctx-line { color: var(--muted); }
.composer { display: flex; align-items: center; justify-content: space-between; margin: 0 0.6rem 0.6rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: 0.6rem; color: var(--muted); }
.send { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 0.45rem; background: var(--foreground); }
.send svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: var(--background); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The product stays light in dark mode, like a screenshot on a dark page: every window takes the light tokens back. */
@media (prefers-color-scheme: dark) {
  .win, .stack {
    --background: var(--light-background); --foreground: var(--light-foreground); --muted: var(--light-muted); --border: var(--light-border);
    --panel: color-mix(in oklab, var(--tint), var(--background)); --win: color-mix(in oklab, white 55%, var(--background));
    color: color-mix(in oklab, var(--foreground) 82%, var(--background));
  }
}
@media (max-width: 52rem) {
  .feats { grid-template-columns: 1fr 1fr; }
  .scene { height: auto; padding: 1.25rem; display: grid; gap: 1rem; }
  .win { position: static; width: auto; height: auto; }
  .doc { padding: 1.25rem; }
  .scene { grid-template-columns: minmax(0, 1fr); }
  .canvas { width: auto; height: auto; transform: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .doc { overflow-x: auto; }
  .doc table { min-width: 22rem; }
  .doc pre { white-space: pre-wrap; }
  .tree, .rail, .stack { display: none; }
}
@media (max-width: 30rem) { .feats { grid-template-columns: 1fr; } }
.reveal .deep-head, .reveal .scene, .reveal .feats { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal .scene { transition-delay: 0.12s; }
.reveal .feats { transition-delay: 0.24s; }
.reveal.in .deep-head, .reveal.in .scene, .reveal.in .feats { opacity: 1; transform: none; }

/* Review gates scene: one run of a UI change on the left, with the gate's history below; the agent getting the result on the right. */
.gate { top: 7%; left: 3.5%; width: 58%; height: 100%; overflow: hidden; }
.gatebody { padding: 1.25rem 1.5rem; }
.runhd { display: flex; align-items: center; gap: 0.7rem; }
.runhd .h { margin: 0; font-weight: 500; font-size: 0.9375rem; color: var(--foreground); }
.runhd .by { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--muted); }
.runhd .mark { width: 0.85rem; height: 0.85rem; }
.run2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }
.shot { display: grid; place-items: center; padding: 1.25rem; border-radius: 0.6rem; background: color-mix(in oklab, var(--foreground) 4%, transparent); }
.mini { width: 100%; min-width: 0; max-width: 17rem; padding: 0.9rem; border-radius: 0.5rem; background: var(--win); border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); font-size: 0.625rem; }
.mini p { margin: 0; }
.mini .mt { font-weight: 500; font-size: 0.75rem; color: var(--foreground); }
.mini .ms { margin-top: 0.1rem; color: var(--muted); }
.mfield { display: flex; justify-content: space-between; margin-top: 0.7rem; padding: 0.35rem 0.5rem; border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); border-radius: 0.35rem; color: var(--muted); }
.mrole { color: var(--foreground); }
.mbtns { display: flex; gap: 0.3rem; margin-top: 0.5rem; padding: 0.25rem; border-radius: 0.45rem; }
.mbtns.flag { box-shadow: 0 0 0 1.5px color-mix(in oklab, #9a4a2e 70%, transparent); }
.mb { padding: 0.3rem 0.45rem; border-radius: 0.35rem; white-space: nowrap; }
.mb.p { background: var(--foreground); color: var(--background); }
.mtog { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; color: var(--muted); }
.mtog i { width: 1.2rem; height: 0.7rem; border-radius: 1rem; background: color-mix(in oklab, var(--foreground) 18%, transparent); }
.cks { display: grid; align-content: start; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.cks li { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.55rem 0.6rem; border-radius: 0.45rem; color: var(--foreground); }
.cks li.fail { background: color-mix(in oklab, #9a4a2e 7%, transparent); color: #9a4a2e; }
.cks .vd { margin-top: 0.1rem; }
.hist h4 { display: flex; gap: 0.5rem; margin: 1.5rem 0 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--foreground); }
.hist h4 span { font-weight: 400; color: var(--muted); }
.cells { display: grid; grid-template-columns: repeat(52, 1fr); gap: 3px; }
.cells b { aspect-ratio: 1; border-radius: 2px; background: color-mix(in oklab, var(--foreground) 22%, transparent); }
.cells b.f { background: color-mix(in oklab, #9a4a2e 65%, transparent); }
.cells b.now { box-shadow: 0 0 0 1.5px var(--win), 0 0 0 3px #9a4a2e; }
.runs { margin: 0.9rem 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); }
.runs li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 6%, transparent); }
.runs .rt { flex: 1; color: var(--foreground); }
.runs .mark { width: 0.85rem; height: 0.85rem; }
.runs .rw { width: 3.5rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.gate::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(to bottom, transparent, var(--win)); pointer-events: none; }
.rs { left: auto; right: 3.5%; top: 22%; width: 35%; }
.gres { display: grid; gap: 0.35rem; padding: 0.7rem 0.8rem; border-radius: 0.6rem; background: color-mix(in oklab, #9a4a2e 7%, transparent); }
.gres p { margin: 0; color: var(--foreground); }
.grhead { display: flex; align-items: center; justify-content: space-between; }
.sc { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vd { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; white-space: nowrap; }
.vd i { display: grid; place-items: center; width: 0.95rem; height: 0.95rem; border-radius: 50%; }
.vd svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vd.fail { color: #9a4a2e; } .vd.fail i { background: #9a4a2e; }
.vd.ok { color: var(--foreground); } .vd.ok i { background: var(--foreground); }
.vd.ok svg { stroke: var(--background); }
@media (max-width: 52rem) {
  .run2 { grid-template-columns: minmax(0, 1fr); }
  .shot { padding: 0.75rem; }
  .mbtns { flex-wrap: wrap; }
  .gate, .rs { width: auto; }
  .cells { grid-template-columns: repeat(26, 1fr); }
  .cells b:nth-child(-n+104) { display: none; }
  .runhd { flex-wrap: wrap; }
  .gate::after { display: none; }
}

/* Autonomy Engine scene: a research board for one objective, with a timeline. A concept, labelled in development. */
.part .pill { margin-left: 0.2rem; font-weight: 400; color: var(--muted); }
.board { top: 7%; left: 3.5%; right: 3.5%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; grid-template-rows: auto 1fr; overflow: hidden; }
.board .bar { grid-column: 1 / -1; }
.bwk { margin-left: auto; }
.bbody { padding: 1.4rem 1.75rem; }
.lbl, .hs { font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.obj .h { margin: 0.35rem 0 0; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--foreground); }
.omet { display: flex; align-items: center; gap: 0.45rem; margin: 0.45rem 0 0; color: var(--muted); }
.hyps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.5rem; }
.hyp { display: grid; align-content: start; gap: 0.4rem; padding: 0.9rem 1rem; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: 0.6rem; }
.hyp p { margin: 0; }
.hyp .ht { font-weight: 500; color: var(--foreground); }
.hyp .he { color: var(--muted); }
.hyp .ha { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent); color: var(--muted); }
.hyp .ha .mark { width: 0.85rem; height: 0.85rem; }
.hs { display: flex; align-items: center; gap: 0.4rem; }
.hs::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.hyp.yes { border-color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.hyp.yes .hs { color: var(--foreground); } .hyp.yes .hs::before { background: var(--foreground); }
.hyp.run .hs::before { border: 1.5px solid var(--foreground); }
.hyp.out { background: color-mix(in oklab, var(--foreground) 3%, transparent); }
.hyp.out .ht { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--foreground) 35%, transparent); }
.hyp.out .hs::before { background: color-mix(in oklab, var(--foreground) 25%, transparent); }
.tl { margin-top: 2.25rem; }
.tlbar { height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.tlbar i { display: block; height: 100%; border-radius: 2px; background: var(--foreground); }
.tlm { position: relative; height: 3.2rem; margin-top: 0.6rem; }
.tlm span { position: absolute; top: 0; padding-left: 0.5rem; border-left: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent); color: var(--muted); white-space: nowrap; line-height: 1.45; }
.tlm b { font-weight: 400; color: var(--foreground); }
.tlm span.now b { font-weight: 500; }
.brail { display: grid; align-content: start; gap: 0.45rem; padding: 1.4rem 1.1rem; border-left: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); }
.brail .grp { margin-top: 0.9rem; font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.brail .grp:first-child { margin-top: 0; }
.ask { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: 0.55rem; background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.ask p { margin: 0; color: var(--foreground); }
.ask .btn { justify-self: start; padding: 0.25rem 0.65rem; border-radius: 0.4rem; background: var(--foreground); color: var(--background); }
.lr { margin: 0; color: var(--foreground); }
.lr span { display: block; color: var(--muted); font-size: 0.6875rem; }
.feed { margin-top: 1.4rem; }
.feed ul { margin: 0.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); }
.feed li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 6%, transparent); }
.feed li span { flex: 1; color: var(--foreground); }
.feed li em { font-style: normal; color: var(--muted); white-space: nowrap; }
.feed .mark { width: 0.85rem; height: 0.85rem; flex: none; }
.feed .av { width: 0.95rem; height: 0.95rem; flex: none; }
.feed li b { font-weight: 500; }
.feed em.live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--foreground); }
.feed em.live::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--foreground) 20%, transparent); border-top-color: var(--foreground); }
.tl { margin-top: 1.75rem; }
.tlm { height: 2.8rem; }
@media (max-width: 52rem) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .brail { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); }
  .hyps { grid-template-columns: minmax(0, 1fr); }
  .tl { display: none; }
  .feed li:nth-child(n+3) { display: none; }
}

/* The link from a part to its own page. */
.explore { display: inline-flex; gap: 0.35rem; margin-top: 2.25rem; font-size: var(--t-body); font-weight: 450; color: var(--foreground); }
.explore span { transition: transform 0.2s; }
.explore:hover span { transform: translateX(0.2em); }

/* Template page: the product's template cards with search and tabs, generated by tools/templates.py. */
.tplpage { padding: clamp(2rem, 5vw, 4rem) var(--edge) clamp(6rem, 12vw, 10rem); }
.back { font-size: var(--t-small); color: var(--muted); }
.back:hover { color: var(--foreground); }
.ptitle { margin: 1.5rem 0 0; padding: 0; max-width: none; font-size: var(--t-h2); line-height: 1.1; color: var(--foreground); }
.psub { margin: 0.9rem 0 0; max-width: 44ch; font-size: var(--t-sub); font-weight: 300; line-height: 1.55; color: var(--muted); }
.lib { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.libbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.libbar input { width: 15rem; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklab, var(--foreground) 3%, var(--background)); font: inherit; font-size: var(--t-small); color: var(--foreground); }
.libbar input:focus { outline: 2px solid color-mix(in oklab, var(--foreground) 25%, transparent); outline-offset: 1px; }
.empty { margin: 2rem 0 0; font-size: var(--t-body); color: var(--muted); }
.empty[hidden] { display: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tabs button { padding: 0.35rem 0.8rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: var(--t-small); color: var(--muted); cursor: pointer; }
.tabs button:hover { color: var(--foreground); }
.tabs button[aria-selected="true"] { background: var(--foreground); color: var(--background); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; margin-top: 1.5rem; }
.tcard { display: grid; gap: 0.2rem; color: inherit; }
.tcard[hidden] { display: none; }
.tcard .template-art { display: block; width: 100%; height: auto; aspect-ratio: 20 / 13; margin-bottom: 0.7rem; border-radius: 0.6rem; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.tcard:hover .template-art { transform: translateY(-3px); box-shadow: 0 6px 20px oklch(0 0 0 / 7%); }
.tcard h2 { margin: 0; max-width: none; font-family: inherit; font-weight: 500; font-size: var(--t-body); line-height: inherit; letter-spacing: normal; text-wrap: wrap; }
.tcard span { font-size: var(--t-small); color: var(--muted); }
.tcard em { display: flex; justify-content: space-between; margin-top: 0.3rem; font-style: normal; font-size: 0.75rem; color: var(--muted); }
.tcard em i { font-style: normal; }
.tcard:hover em i { color: var(--foreground); }
@media (prefers-reduced-motion: reduce) { .tcard .template-art { transition: none; } }
@media (max-width: 52rem) {
  .tgrid { grid-template-columns: 1fr 1fr; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .libbar input { width: 100%; }
  .tabs button { flex: none; }
}
@media (max-width: 30rem) { .tgrid { grid-template-columns: minmax(0, 1fr); } }


/* Closing: a second painting as a band, the storm clearing over a valley, bookending the hero; then the same ask. */
.closing { padding: 0 var(--edge) clamp(7rem, 14vw, 12rem); }
.band { min-height: 0; aspect-ratio: 3 / 1; }
.band img { object-position: 58% 50%; }
.band h2 { margin: 0; padding: clamp(1.75rem, 4vw, 3.5rem); max-width: 24ch; font-family: var(--heading); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
@media (max-width: 52rem) { .band { aspect-ratio: 4 / 3; } }
/* Footer: quiet, one line on desktop. */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 3rem; padding: 2rem var(--edge) 2.5rem; border-top: 1px solid var(--border); font-size: var(--t-small); color: var(--muted); }
.foot .brand { font-size: var(--t-small); gap: 0.5rem; }
.foot .brand img { width: 20px; height: 20px; }
.foot a:hover { color: var(--foreground); }
.foot p { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.social { display: inline-flex; gap: 0.9rem; margin-left: 0.5rem; }
@media (max-width: 40rem) { .social { margin-left: 0; } }
.social a { display: inline-flex; }
.social svg { width: 15px; height: 15px; fill: currentColor; }

/* Calls to action: one filled button per place, Book a call; everything else is a quiet text link. */
.btn { display: inline-flex; align-items: center; padding: 0.6rem 1.1rem; border-radius: 0.55rem; background: var(--foreground); color: var(--background); font-size: 0.9375rem; font-weight: 450; line-height: 1.2; transition: opacity 0.2s; }
.btn:hover { opacity: 0.85; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.actions { align-items: center; }
.alt, .lede .alt { margin: 0; font-size: var(--t-small); color: var(--muted); }
.alt a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.2em; }
.next { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 2.25rem 0 0; }
.next .explore { margin-top: 0; }
.tplpage .alt { margin-top: 3rem; }
.actions .cta { font-size: 0.9375rem; }
.lede .alt { margin-top: -1rem; }

/* Legal pages: the templates page shell with a readable column of prose. */
.legal .updated { margin: 0.75rem 0 0; font-size: var(--t-small); color: var(--muted); }
.legal .psub { max-width: 42rem; }
.legal .psub a, .prose a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.2em; }
.prose { max-width: 42rem; margin-top: 1rem; font-size: var(--t-body); font-weight: 300; line-height: 1.65; color: var(--muted); }
.prose h2 { margin: 3rem 0 0; font-family: var(--body); font-size: var(--t-title); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--foreground); }
.prose p, .prose ul { margin: 0.75rem 0 0; }
.prose ul { padding-left: 1.1rem; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { font-weight: 500; color: var(--foreground); }