/* The homepage system introduction ("From hypothesis to system"), between the hypothesis and results.
   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). 15 October 2026: the box is simpler (the
   models are tags, episodic memory is one past episode, and only names are left), and under a rule it
   shows COMPUTE: cognition at each of the agent's steps, drawn small. ttc-system.20261013.css (the
   October 13 drawing) is retained but no longer loaded. 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 tags, M1 to M3. */
.ttc-art .tc-tag { fill:rgba(var(--field-glow-rgb),.16); stroke:rgb(var(--field-glow-rgb)); stroke-width:1.2; }
.ttc-art .tc-tag-text { font:8.5px/1 var(--mono); letter-spacing:.6px; fill:var(--ink); }

/* Episodic memory: one past episode in coral. */
.ttc-art .tc-mem { stroke:var(--coral); stroke-width:2.2; }
.ttc-art .tc-mem-node { fill:var(--coral); }

/* 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; }

/* Compute: under a rule, cognition at each step, drawn small. What it called comes in on wires (lit
   tags for the models it called, faint outlines for the rest; episodic memory in coral), and its
   answer goes out to a small plain check, green where it searched. A faint dotted line drops from
   cognition's dot to the step in hand. */
.ttc-art .tc-rule { stroke:var(--ink); stroke-opacity:.14; stroke-width:1; }
.ttc-art .tc-drop { stroke:var(--ink); stroke-opacity:.35; stroke-width:1.4; stroke-dasharray:.1 4.2; }
.ttc-art .tc-compute { letter-spacing:1.2px; }
.ttc-art .tc-mini { fill:none; stroke:var(--ink); stroke-opacity:.16; stroke-width:1; }
.ttc-art .tc-mini--on { fill:rgb(var(--field-glow-rgb)); stroke:rgb(var(--field-glow-rgb)); stroke-opacity:1; }
.ttc-art .tc-wire { stroke:rgb(var(--field-glow-rgb)); stroke-width:1.4; }
.ttc-art .tc-wire--mem { stroke:var(--coral); stroke-width:1.1; }
.ttc-art .tc-ep { stroke:var(--coral); stroke-width:1.6; }
.ttc-art .tc-ep--off { stroke:var(--ink); stroke-opacity:.12; }
.ttc-art .tc-out { stroke:var(--ink); stroke-opacity:.45; stroke-width:1.2; }
.ttc-art .tc-fan { stroke:var(--ink); stroke-opacity:.4; stroke-width:1.1; }
.ttc-art .tc-fan-sel { stroke:var(--accent); stroke-width:1.8; }
.ttc-art .tc-check--step circle { fill:none; }
.ttc-art .tc-check--step path { stroke-width:1.5; }
.ttc-art .tc-check--plain path { stroke:var(--ink); stroke-opacity:.55; }
.ttc-art .tc-step--ahead { opacity:.55; }

/* 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; }
.ttc-art--tall .tc-tag-text { font-size:9px; letter-spacing:.4px; }

/* 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; }
  .ttc-art--wide .tc-compute { letter-spacing:.3px; }   /* so COMPUTE clears step 1's drawing */
}

@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; }
  .ttc-art--wide .tc-compute { letter-spacing:.3px; }   /* so COMPUTE clears step 1's drawing */
}

@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; }
}