/* The homepage system introduction ("From hypothesis to system"), between the hypothesis and results.
   13 October 2026: the graphic (drawn by scripts/build_ttc_figure.py) shows the loop the agent runs at
   each step: the environment above the agent (observations down, tool calls up), the agent's
   trajectory, and the Test Time Cognition box below it (the task down, the answer up), with three
   models and episodic memory feeding cognition, which runs the search. The copy uses the shared
   section type in section-type.20261006.css: the title is the size of the other section titles, and
   the lead is set like the hero's paragraphs. The section's layout is as on 6 October
   (ttc-system.20261006.css, no longer loaded). */
.ttc-bridge {
  background:var(--cream);
  padding:64px 0 0;
  margin:0 0 76px;
}

.ttc-bridge-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(48px,5vw,80px);
  padding:30px 0 50px;
  align-items:center;
}

.ttc-copy h2 {
  margin:0 0 26px;
}

.ttc-copy em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.ttc-lead {
  margin:0 0 18px;
}

.ttc-body {
  font:400 17px/1.65 var(--sans);
  color:var(--muted-text);
  margin:0 0 20px;
  max-width:570px;
}

/* The graphic. Every colour is a site theme token, so both themes work; figure-colors.20260928.css
   gives the dark theme its lighter coral, green and sage inside .ttc-figure. There are two drawings:
   wide, and tall for phones. */
.ttc-figure { margin:0; width:100%; }
.ttc-art { display:block; width:100%; height:auto; overflow:visible; }
.ttc-art--tall { display:none; }

/* The three layers: the environment is dashed (it is outside the system), the agent a plain box, and
   Test Time Cognition the green frame. */
.ttc-art .tc-env { fill:none; stroke:var(--ink); stroke-opacity:.4; stroke-width:1.1; stroke-dasharray:3 4; }
.ttc-art .tc-agent { fill:var(--paper); stroke:var(--ink); stroke-opacity:.38; stroke-width:1.1; }
.ttc-art .tc-frame { fill:var(--paper); stroke:var(--accent); stroke-width:1.4; }
.ttc-art .tc-dot { fill:var(--ink); }

.ttc-art .tc-title { font:400 19px/1 var(--sans); letter-spacing:-.4px; fill:var(--ink); }
.ttc-art .tc-caption { font:9px/1 var(--mono); letter-spacing:1.2px; fill:var(--muted-text); }
.ttc-art :is(.tc-env-name, .tc-model-name) { letter-spacing:1px; }
.ttc-art .tc-label { font:10px/1 var(--mono); letter-spacing:2.1px; fill:var(--accent-text); }
.ttc-art .tc-flow { font:9px/1 var(--mono); letter-spacing:1.2px; fill:var(--muted-text); }
.ttc-art .tc-flow--up { fill:var(--accent-text); }
.ttc-art .tc-step { font:8.5px/1 var(--mono); letter-spacing:1px; fill:var(--muted-text); opacity:.8; }
.ttc-art .tc-step--now { fill:var(--ink); opacity:1; }

/* What goes down (observations, tasks) is ink; what comes up (tool calls, answers) is green. */
.ttc-art .tc-down { stroke:var(--ink); stroke-opacity:.6; stroke-width:1.3; }
.ttc-art .tc-up { stroke:var(--accent); stroke-width:1.5; }

/* The environment's glyphs: a shell, files, the web and users. */
.ttc-art .tc-glyph { fill:none; stroke:var(--ink); stroke-opacity:.5; stroke-width:1.1; }

/* The agent's trajectory: the steps taken, the current step, and the dashed way on to the goal. */
.ttc-art .tc-run { stroke:var(--ink); stroke-opacity:.7; stroke-width:1.3; }
.ttc-art .tc-run--ahead { stroke-opacity:.35; stroke-dasharray:2 4; }
.ttc-art .tc-node { fill:var(--paper); stroke:var(--ink); stroke-opacity:.7; stroke-width:1.3; }
.ttc-art .tc-node--now { stroke-opacity:1; stroke-width:2; }
.ttc-art .tc-node--ahead { stroke-opacity:.35; }
.ttc-art .tc-goal circle { fill:var(--paper); stroke:var(--accent); stroke-width:1.4; }
.ttc-art .tc-goal path { stroke:var(--accent); stroke-width:1.6; }

/* The models: small networks, each with the pathway its weights have learned in sage. */
.ttc-art .tc-edge { stroke:var(--ink); stroke-opacity:.12; stroke-width:.7; }
.ttc-art .tc-neuron { fill:var(--paper); stroke:var(--ink); stroke-opacity:.4; stroke-width:1; }
.ttc-art .tc-neuron--prior { fill:rgb(var(--field-glow-rgb)); stroke:rgb(var(--field-glow-rgb)); stroke-opacity:1; }
.ttc-art .tc-prior { stroke:rgb(var(--field-glow-rgb)); stroke-width:2.2; }

/* Episodic memory: three past episodes in coral, the most recent the strongest. */
.ttc-art .tc-mem { stroke:var(--coral); }
.ttc-art .tc-mem--1 { stroke-width:2.2; }
.ttc-art .tc-mem--2 { stroke-width:1.6; stroke-opacity:.55; }
.ttc-art .tc-mem--3 { stroke-width:1.6; stroke-opacity:.35; }
.ttc-art .tc-mem-node { fill:var(--coral); }
.ttc-art .tc-mem-node--2 { fill-opacity:.55; }
.ttc-art .tc-mem-node--3 { fill-opacity:.35; }

/* What feeds cognition, and cognition itself. */
.ttc-art .tc-guide { stroke-width:1.8; stroke-dasharray:.1 4.6; }
.ttc-art .tc-guide--weights { stroke:rgb(var(--field-glow-rgb)); stroke-width:2; }
.ttc-art .tc-guide--memory { stroke:var(--coral); }
.ttc-art .tc-cognition { fill:var(--ink); }

/* The search: branches fainter further out, dead ends crossed out, the chosen path green, and its
   answer a plain check on a clearing (the circled check is the agent's goal). */
.ttc-art .tc-branch { stroke:var(--ink); stroke-opacity:.38; stroke-width:1.3; }
.ttc-art .tc-branch--2 { stroke-opacity:.32; stroke-width:1.15; }
.ttc-art .tc-branch--3 { stroke-opacity:.26; stroke-width:1; }
.ttc-art .tc-x { stroke:var(--muted); stroke-opacity:.75; stroke-width:1.2; }
.ttc-art .tc-sel { stroke:var(--accent); stroke-width:2.6; }
.ttc-art .tc-check circle { fill:var(--paper); stroke:none; }
.ttc-art .tc-check path { stroke:var(--accent); stroke-width:2.1; }

/* The tall drawing is narrower, so its small capitals are drawn a size up from the start. */
.ttc-art--tall :is(.tc-caption, .tc-flow) { font-size:10px; letter-spacing:1px; }
.ttc-art--tall .tc-step { font-size:9.5px; letter-spacing:.8px; }
.ttc-art--tall .tc-label { font-size:10.5px; letter-spacing:1.6px; }

/* The labels are drawn in the graphic's own units, so where it is drawn smaller its small capitals are
   set a size up: beside the copy on narrower desktops, and under it on small tablets. Under 1180
   pixels the graphic goes under the copy, as the hero's video does, so it is drawn large enough to
   read. Phones get the tall drawing. */
@media (min-width:1180px) and (max-width:1360px) {
  .ttc-art--wide :is(.tc-caption, .tc-flow) { font-size:10px; letter-spacing:1px; }
  .ttc-art--wide .tc-step { font-size:10px; letter-spacing:.8px; }
}

@media (max-width:1179px) {
  .ttc-bridge-grid { grid-template-columns:minmax(0,1fr); gap:40px; }
  .ttc-figure { max-width:680px; }
}

@media (max-width:760px) {
  .ttc-bridge { padding-top:40px; margin-bottom:55px; }
  .ttc-bridge-grid { gap:35px; padding:24px 0 32px; }
}

@media (max-width:700px) {
  .ttc-art--wide :is(.tc-caption, .tc-flow) { font-size:10px; letter-spacing:1px; }
  .ttc-art--wide .tc-step { font-size:10px; letter-spacing:.8px; }
}

@media (max-width:560px) {
  .ttc-figure { max-width:440px; }
  .ttc-art--wide { display:none; }
  .ttc-art--tall { display:block; }
}

@media (max-width:360px) {
  .ttc-art--tall :is(.tc-caption, .tc-flow) { font-size:10.5px; letter-spacing:.8px; }
  .ttc-art--tall .tc-step { font-size:10.5px; letter-spacing:.6px; }
}