computing-pi: clickable avg toggle + second instruction line

T9: The center avg display is now a <button>. Clicking it toggles
between showing avg × 4 (with 'π ≈ 3.1416' reference) and showing
plain avg (with 'π/4 ≈ 0.7854'). Label flips accordingly. Subtle
background hover wash to hint at interactivity.

T10: Added a second instruction line below 'Click on any of the
completed runs to view the full sequence.' calling out the avg
toggle. Both lines sit in a shared centered text-muted-foreground
container with small vertical gap.

src/components/interactives/ComputingPi.tsx

@@ -76,6 +76,7 @@ const ComputingPi: React.FC = () => {
   const [runs, setRuns] = useState<Run[]>([]);
   const [running, setRunning] = useState(false);
   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [showTimes4, setShowTimes4] = useState(true);
 
   const started = runs.length > 0;
   const allStopped = started && runs.every((r) => r.stopped);
@@ -144,17 +145,24 @@ const ComputingPi: React.FC = () => {
               />
             </div>
 
-            <div className="flex flex-col items-center">
+            <button
+              type="button"
+              onClick={() => setShowTimes4((v) => !v)}
+              aria-label="Toggle between average and average × 4"
+              className="flex flex-col items-center rounded-lg px-3 py-1 -my-1 hover:bg-background/60 transition-colors cursor-pointer"
+            >
               <span className="text-xs uppercase tracking-wide text-muted-foreground">
-                Average × 4
+                {showTimes4 ? 'Average × 4' : 'Average'}
               </span>
               <span className="font-mono text-3xl tabular-nums">
-                {avgTimes4 !== null ? avgTimes4.toFixed(4) : '—'}
+                {avgTimes4 !== null
+                  ? (showTimes4 ? avgTimes4 : avgTimes4 / 4).toFixed(4)
+                  : '—'}
               </span>
               <span className="text-xs text-muted-foreground">
-                π ≈ 3.1416
+                {showTimes4 ? 'π ≈ 3.1416' : 'π/4 ≈ 0.7854'}
               </span>
-            </div>
+            </button>
 
             <div className="flex justify-center sm:justify-end">
               {!started ? (
@@ -179,9 +187,10 @@ const ComputingPi: React.FC = () => {
           {/* Instruction + grid of runs */}
           {started ? (
             <>
-              <p className="text-xs text-center text-muted-foreground">
+              <div className="text-xs text-center text-muted-foreground space-y-0.5">
-                Click on any of the completed runs to view the full sequence.
+                <p>Click on any of the completed runs to view the full sequence.</p>
-              </p>
+                <p>Click on the average shown above to toggle between seeing the average and the average multiplied by 4.</p>
+              </div>
               <div
                 className="grid gap-2"
                 style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))' }}

src/data/admin-data.json

@@ -450,6 +450,7 @@
         "text": "Make it so that if the user clicks on the average shown, they can toggle between seeing the average and the average multiplied by 4. When showing average, show the value of pi/4 below (instead of pi).",
         "done": true,
         "refId": "T9",
+        "remark": "Wrapped the center avg display in a <button> with a subtle hover wash. Added showTimes4 state (default true). Label flips Average × 4 ↔ Average, the big number divides by 4 when showing plain avg, and the reference line flips between 'π ≈ 3.1416' and 'π/4 ≈ 0.7854'.",
         "doneDate": "2026-04-21"
       },
       {
@@ -457,6 +458,7 @@
         "text": "Just below \"Click on any of the completed runs to view the full sequence.\", add the line \"Click on the average shown above to toggle between seeing the average and the average multiplied by 4).\"",
         "done": true,
         "refId": "T10",
+        "remark": "Stacked a second <p> under the existing instruction in a space-y-0.5 div so both lines share the centered text-muted-foreground styling.",
         "doneDate": "2026-04-21"
       }
     ]