karti-ai
a21596b3e4
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
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
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>
|
||
);
|
||
}
|