/* Animated figures for the homepage's guiding-hypothesis cards, drawn by
   assets/js/hypothesis-figures.20261008.js. Every colour is a site theme token, so the light
   (sage and coral) and dark (graphite and chalk) themes both work. */

/* With no label row above it, each figure sits centred in its box: the top and bottom padding are
   evened out, keeping the box height and the drawing size. */
.hypothesis-figure { padding-block:30px; }
@media (max-width:760px) { .hypothesis-figure { padding-block:27px; } }

.hypothesis-figure .hf-svg { display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink); }

/* The search space, drawn as a forest: branches thin and fade as they reach outward. */
.hf-tw { fill: none; stroke: var(--ink); }
.hf-tw--1 { stroke-opacity: .7; stroke-width: 1.25; }
.hf-tw--2 { stroke-opacity: .58; stroke-width: 1.05; }
.hf-tw--3 { stroke-opacity: .45; stroke-width: .85; }
.hf-tw--4 { stroke-opacity: .34; stroke-width: .7; }
.hf-knot { fill: var(--ink); fill-opacity: .6; }
.hf-node { fill: var(--paper); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.15; }
/* Every search starts from a solid dot at its root. */
.hf-node--root { fill: var(--ink); stroke: none; }

/* Explicit search: the selected path, in accent green. */
.hf-sel { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.hf-sel-node { fill: var(--accent); stroke: var(--paper); stroke-width: 1.4; }
.hf-goal circle { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.hf-goal path { fill: none; stroke: var(--accent); stroke-width: 1.7; }
.hf-x { fill: none; stroke: var(--muted); stroke-width: 1.2; }

/* Episodic memory, in coral. */
.hf-mem { fill: none; stroke: var(--coral); stroke-width: 2.2; }
.hf-mem-node { fill: var(--coral); stroke: var(--paper); stroke-width: 1.4; }
/* Small joints along a selected or recalled route. */
.hf-sel-node--sm, .hf-mem-node--sm { stroke-width: .8; }

/* Learned priors: the rays that bound the sage wedge. */
.hf-ray { stroke: rgb(var(--field-glow-rgb)); stroke-width: .9; stroke-opacity: .55; }

/* Cognition's root dot, in the colour of whoever is at work: learned priors, memory, or search. */
.hf-tint { stroke: none; opacity: 0; }
.hf-tint--weights { fill: rgb(var(--field-glow-rgb)); }
.hf-tint--memory { fill: var(--coral); }
.hf-tint--search { fill: var(--accent); }

/* Learning: the line of experience under the four problems, with a tick at each start. */
.hf-axis { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 1; }
.hf-tick { fill: var(--ink); fill-opacity: .5; }

.hf-label { font: 9px/1 var(--mono); letter-spacing: .9px; text-transform: uppercase; fill: var(--muted); }

/* 2 October 2026 (hypothesis-figures.20261002.css): on phones the figures are drawn at about half
   size, so their captions are set larger to stay legible. */
@media (max-width: 760px) {
  .hf-label { font-size: 14px; }
}

/* 8 October 2026 (hypothesis-figures.20261008.css): the Cognition figure is an agent's trajectory, as
   in the hero video, under the model's learned weights and a bank of episodic memory. The agent's line
   runs through its steps over an axis; branches a search tries light in green; thin curves carry
   episodes down from the bank into a step's dot, and each step's result up into the bank. */
.hf-leg { fill: none; stroke: var(--ink); stroke-opacity: .9; stroke-width: 1.5; }
.hf-head { fill: var(--ink); }
.hf-try { fill: none; stroke: var(--accent); stroke-width: 1.15; }
.hf-link { stroke-width: 1.1; }
.hf-alt { stroke-width: 1.3; }
/* A step's answer: a small plain check on a clearing in the background colour (the run's goal keeps
   the large circled check). */
.hf-check circle { fill: var(--paper); stroke: none; }
.hf-check path { fill: none; stroke: var(--accent); stroke-width: 1.9; }
/* The episodic memory bank: past episodes, each a short coral route, under their name. */
.hf-ep { fill: none; stroke: var(--coral); stroke-width: 1.4; }
.hf-ep-node { fill: var(--coral); }
/* The model's learned weights: a small layered network beside the bank, as in the Test Time Cognition
   graphic, each weight at a strength of its own, with the pathway the weights have learned in sage. Its
   pulse and the funnels it makes are sage too. */
.hf-net-edge { stroke: var(--ink); stroke-width: .6; }
.hf-neuron { fill: var(--paper); stroke: var(--ink); stroke-opacity: .45; stroke-width: .8; }
.hf-neuron--prior { fill: rgb(var(--field-glow-rgb)); stroke: none; }
.hf-prior { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: 1.6; }
.hf-prior--lit { stroke-width: 2.3; }
.hf-prior-node { fill: rgb(var(--field-glow-rgb)); stroke: var(--paper); stroke-width: 1.4; }
/* A funnel the weights make, on its way down to its step, and a funnel's edges while it opens. */
.hf-ray--made { stroke-opacity: .95; stroke-width: 1.3; }
/* The names of the weights and the bank, and the axis's step names and name. */
.hf-bank-label, .hf-axis-label { font-size: 8.5px; }
@media (max-width: 760px) {
  .hf-bank-label, .hf-axis-label { font-size: 11px; letter-spacing: .6px; }
}