Add test mode

- /test/ page reads config from URL hash (#subject=...&topic=...&n=10&...)
- TestSetup modal on subject + topic pages: pick size + course/level/paper, hit Start
- TestRunner picks N random pestle questions matching filters, fetches full HTML,
  renders with collapsible markschemes
- Mulberry32 PRNG so reloading without changing seed is reproducible (we always
  pass a fresh seed for now; can be exposed later for sharing tests)
- Christos rows are filtered out of the pool — they're PDF links, not testable inline

Author: web-flow

site/app/globals.css

@@ -193,8 +193,110 @@ footer {
   font-size: 13px;
 }
 
-.page-title { margin: 24px 0 8px; }
-.page-lede { color: var(--muted); margin: 0 0 12px; max-width: 720px; }
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 24px 0 8px;
+}
+.page-header h1 { margin: 0; }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  color: var(--fg);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.btn:hover { border-color: var(--accent); }
+.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
+.btn-primary:hover { filter: brightness(1.1); }
+.btn-block { width: 100%; padding: 12px; font-size: 15px; }
+
+.test-setup-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.test-setup-row { display: flex; flex-direction: column; gap: 6px; }
+.test-setup-row label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
+}
+.test-setup-row select {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+}
+
+.size-buttons { display: flex; gap: 8px; }
+.size-btn {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  color: var(--fg);
+  font: inherit;
+  cursor: pointer;
+}
+.size-btn:hover { border-color: var(--accent); }
+.size-btn.active {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+.test-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 24px 0 16px;
+}
+.test-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+
+.test-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  counter-reset: test-q;
+}
+.test-item {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 20px;
+  background: var(--card);
+}
+.test-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.test-item-header h2 { margin: 0; font-size: 18px; }
+.test-item-header .meta { color: var(--muted); font-size: 13px; }
 
 .topic-card {
   display: block;

site/app/subject/[key]/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { listSubjectKeys, loadSubject } from "@/lib/data";
+import { TestSetup } from "@/components/TestSetup";
 
 export async function generateStaticParams() {
   const keys = await listSubjectKeys();
@@ -29,7 +30,10 @@ export default async function SubjectPage({
       <p style={{ margin: 0 }}>
         <Link href="/">← all subjects</Link>
       </p>
-      <h1>{subj.label}</h1>
+      <div className="page-header">
+        <h1>{subj.label}</h1>
+        <TestSetup subject={key} hasMaths={key === "maths"} />
+      </div>
       <div className="summary-bar">
         <span>{subj.total.toLocaleString()} questions</span>
         {sourceLine && <span>{sourceLine}</span>}

site/app/subject/[key]/topic/[tid]/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { listSubjectKeys, loadSubject, loadSubjectTopic } from "@/lib/data";
 import { TopicBrowser } from "@/components/TopicBrowser";
+import { TestSetup } from "@/components/TestSetup";
 
 export async function generateStaticParams() {
   const keys = await listSubjectKeys();
@@ -37,9 +38,12 @@ export default async function TopicPage({
       <p style={{ margin: 0 }}>
         <Link href={`/subject/${key}/`}>← {subj.label}</Link>
       </p>
-      <h1>
-        {topic.id}. {topic.name}
-      </h1>
+      <div className="page-header">
+        <h1>
+          {topic.id}. {topic.name}
+        </h1>
+        <TestSetup subject={key} topic={tid} hasMaths={key === "maths"} />
+      </div>
       <p className="summary-bar">
         <span>{questions.length.toLocaleString()} questions</span>
       </p>

site/app/test/page.tsx

@@ -0,0 +1,5 @@
+import { TestRunner } from "@/components/TestRunner";
+
+export default function TestPage() {
+  return <TestRunner />;
+}