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/demo/DemoErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import type { ErrorInfo, ReactNode } from 'react';
-import { AlertTriangle, ExternalLink, RotateCcw } from 'lucide-react';
+import { AlertTriangle, RotateCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 const REPO_URL = 'https://git.karti.ai/PIG/PIG-Demo';
@@ -53,21 +53,21 @@ export class DemoErrorBoundary extends Component<DemoErrorBoundaryProps, DemoErr
 
     const { demoTitle, sourceHref } = this.props;
     return (
-      <div role="alert" className="card mx-auto my-10 max-w-xl p-6">
+      <div role="alert" className="mx-auto my-10 max-w-xl rounded-xl border border-border bg-surface p-5 sm:p-6">
         <div className="flex items-center gap-2 text-warning">
           <AlertTriangle className="size-5" aria-hidden="true" />
-          <h2 className="text-base font-semibold">
+          <h2 className="text-h3 text-fg">
             {demoTitle ? `${demoTitle} failed to render` : 'This demo failed to render'}
           </h2>
         </div>
-        <p className="mt-3 text-sm leading-relaxed text-muted">
+        <p className="mt-3 max-w-measure text-prose text-fg-2">
           Something in this demo threw while drawing. The rest of the site is unaffected — every
           other demo is a separate module. The environment and the recorded runs behind this page
           are in the repository either way, and you can run them yourself.
         </p>
-        <p className="mt-3 break-words rounded-lg bg-surface-2 px-3 py-2 font-mono text-xs text-muted">
+        <pre className="mt-3 whitespace-pre-wrap break-words rounded-md border border-border bg-surface-3 px-3 py-2 font-mono text-code text-fg-2">
           {error.message || 'Unknown error'}
-        </p>
+        </pre>
         <div className="mt-5 flex flex-wrap gap-2">
           <Button size="touch" onClick={this.handleReset}>
             <RotateCcw aria-hidden="true" />
@@ -76,7 +76,7 @@ export class DemoErrorBoundary extends Component<DemoErrorBoundaryProps, DemoErr
           <Button variant="outline" size="touch" asChild>
             <a href={sourceHref ?? REPO_URL} rel="noreferrer">
               Read the source
-              <ExternalLink aria-hidden="true" />
+              <span aria-hidden="true">↗</span>
             </a>
           </Button>
         </div>