Redesign in Prime Intellect's design language, both themes, three viewports

Eighteen agents: three design directions judged on whether a COO on a phone
actually learns what an environment is, on craft, and on landing without a
rewrite; one spec; a foundation of measured tokens; six build lanes; three
browser verifiers; a final gate pass.

The materials are Prime Intellect's, measured from their site: near-black
grounds, one green, sharp radii, mono small-caps labels, Geist and Geist Mono
self-hosted because production CSP is font-src 'self'. Two of their own greys
fail contrast on their own ground (#737373 is 4.02:1, #6E6E6E is 3.73:1 on
#0F0F0F), so --muted is lifted and the CSS comment carries the number — or
someone will 'correct' it back. Every text-on-ground pair in both themes is
tabulated in src/index.css with its measured ratio.

The two rules that resolved every conflict: data is mono, sentences are sans;
the language wins on materials, the lesson wins on legibility. Light mode is a
finished paper theme, not an inversion.

What did not change: the derived-tabs contract, the honesty markers, the
isolation lint, every gate. 419 contract checks, entry chunk at 74% of budget,
zero horizontal overflow on any route at 390/1024/1440 in either theme.

Also flips Alert Triage to status 'live' — the pipeline built it but never
promoted it, so it was badged SPEC on its own playable page and the home page
counted one environment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB

src/components/site/DefinitionStrip.tsx

@@ -0,0 +1,38 @@
+import { ANATOMY } from '@/content/anatomy';
+import { cn } from '@/lib/utils';
+
+/**
+ * The definition, before the catalogue.
+ *
+ * Four cells, one per part of an environment, read from `@/content/anatomy` —
+ * the same source `EnvAnatomy` renders on every Play and Evidence tab. That is
+ * the whole point: a visitor learns the four labels here, on the landing, and
+ * then meets them again on the word game and the fraud screen and reads both
+ * as "same machine, different grader". If this strip and the anatomy boxes
+ * ever disagreed on the words, the lesson would break at the first click.
+ *
+ * Hairline above and below; 2×2 at a phone width, four across from `lg`.
+ */
+export function DefinitionStrip({ className }: { className?: string }) {
+  return (
+    <ol
+      aria-label="The four parts of an environment"
+      className={cn(
+        'grid grid-cols-2 gap-x-6 gap-y-5 border-y border-border py-5 lg:grid-cols-4 lg:gap-x-8',
+        className,
+      )}
+    >
+      {ANATOMY.map((part) => (
+        <li key={part.key} className="flex min-w-0 flex-col gap-1">
+          <p className="flex items-baseline gap-2">
+            <span className="font-mono text-label uppercase tracking-label text-muted">
+              {String(part.index).padStart(2, '0')}
+            </span>
+            <span className="text-ui font-semibold text-fg">{part.kicker}</span>
+          </p>
+          <p className="text-small text-fg-2">{part.gloss}</p>
+        </li>
+      ))}
+    </ol>
+  );
+}