Design tokens + agent iteration hardening

- tokens.css: full token layer (type scale rem-based, palette, spacing, radii)
- App.css rebuilt token-driven; zero hardcoded colors/px font sizes
- readability preset: --root-font-size 112%; button matrix scrolls when narrow
- App.tsx split into real components (Hero, CodeSample, RightRail + reflow)
- light theme via [data-theme=light] overrides; topbar sun/moon toggle persisted
- scripts/check-tokens.mjs + npm run check (lint, token guard, tsc, build)
- AGENTS.md: token contract, check gate, preview workflow

src/components/RightRail.tsx

@@ -0,0 +1,39 @@
+import { Button } from './Button'
+import { Icon } from './Icon'
+
+type RightRailProps = { sections: string[] }
+
+export function RightRail({ sections }: RightRailProps) {
+  return (
+    <aside className="right-rail">
+      <div className="rail-card">
+        <span className="eyebrow">On this page</span>
+        {sections.map((label, i) => (
+          <a className={i === 0 ? 'rail-link active' : 'rail-link'} href={i === 0 ? '#button-matrix' : '#'} key={label}>
+            <span>0{i + 1}</span>
+            {label}
+          </a>
+        ))}
+      </div>
+
+      <div className="rail-card release">
+        <div className="release-icon">
+          <Icon name="layers" size={18} />
+        </div>
+        <strong>Designed to be extended</strong>
+        <p>Bring your brand, keep the rhythm. Tokens are portable and components stay unopinionated.</p>
+        <button className="text-button">
+          Read the docs <Icon name="arrow" size={14} />
+        </button>
+      </div>
+
+      <div className="rail-card">
+        <span className="eyebrow">Need a hand?</span>
+        <p className="rail-copy">Check the contribution guide or say hello in the community.</p>
+        <Button variant="secondary" className="full">
+          Open community <span>↗</span>
+        </Button>
+      </div>
+    </aside>
+  )
+}