diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 47d174e..42d23ef 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,8 +1,5 @@
-# Test and build every PR and every push to master, so pool contributions get
-# checked automatically instead of a maintainer running the suite by hand.
-# No lint gate yet: the tree has ~20 pre-existing eslint errors, and a gate
-# that fails on day one teaches everyone to ignore it. Add `pnpm lint` here
-# once those are fixed (tracked in the issues).
+# Lint, test and build every PR and every push to master, so pool contributions
+# get checked automatically instead of a maintainer running the suite by hand.
 
 name: CI
 
@@ -25,5 +22,6 @@ jobs:
           node-version: 22
           cache: pnpm
       - run: pnpm install --frozen-lockfile
+      - run: pnpm lint
       - run: pnpm test
       - run: pnpm build
diff --git a/src/components/analyzer/AnalyzerPage.tsx b/src/components/analyzer/AnalyzerPage.tsx
index 0209b4a..3a19c2e 100644
--- a/src/components/analyzer/AnalyzerPage.tsx
+++ b/src/components/analyzer/AnalyzerPage.tsx
@@ -146,7 +146,8 @@ export default function AnalyzerPage() {
   const [result, setResult] = useState<CompilationResult | null>(null);
   const [selectedContract, setSelectedContract] = useState(0);
   const [selectedSlots, setSelectedSlots] = useState<Set<number>>(new Set());
-  const [autoAnalyzed, setAutoAnalyzed] = useState(false);
+  // Not state: it only guards the one-time auto-analyze and never renders.
+  const autoAnalyzed = useRef(false);
 
   // Trace state
   const [selectedFunction, setSelectedFunction] = useState<string>("");
@@ -256,16 +257,16 @@ export default function AnalyzerPage() {
       analyzeProgress.finish();
       setLoading(false);
     },
-    [analyzeProgress]
+    [analyzeProgress, setTab]
   );
 
   // Auto-analyze when navigated with ?q= param
   useEffect(() => {
-    if (queryInput && !autoAnalyzed) {
-      setAutoAnalyzed(true);
+    if (queryInput && !autoAnalyzed.current) {
+      autoAnalyzed.current = true;
       handleAnalyze();
     }
-  }, [queryInput, autoAnalyzed, handleAnalyze]);
+  }, [queryInput, handleAnalyze]);
 
   const handleSelectContract = useCallback(
     (idx: number) => {
diff --git a/src/components/btx/ConstructionSection.tsx b/src/components/btx/ConstructionSection.tsx
index dad320c..c89df45 100644
--- a/src/components/btx/ConstructionSection.tsx
+++ b/src/components/btx/ConstructionSection.tsx
@@ -8,6 +8,8 @@ import Hint from "./Hint";
 
 const COMMITTEE_N = 5;
 const BATCH = 5;
+const ALL_BATCH: boolean[] = new Array(BATCH).fill(true);
+const ALL_COMMITTEE: boolean[] = new Array(COMMITTEE_N).fill(true);
 
 export default function ConstructionSection() {
   const { ref, isVisible } = useInView(0.1);
@@ -208,6 +210,13 @@ function CommitteeAnimation() {
   const playingRef = useRef(false);
   const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
   const nextDotId = useRef(0);
+  // Reduced motion shows the final frame. The preference is only known after
+  // hydration, so it is applied here at render time instead of being written
+  // into state from an effect.
+  const ctShown = reduced ? ALL_BATCH : ctVisible;
+  const serversShown = reduced ? ALL_COMMITTEE : serverOn;
+  const ptShown = reduced ? ALL_BATCH : ptVisible;
+  const dotsShown = reduced ? [] : dots;
 
   const cx = 320;
   const cy = 140;
@@ -345,14 +354,9 @@ function CommitteeAnimation() {
     const el = svgRef.current;
     if (!el) return;
     if (reduced) {
-      // The initializers above ran during hydration, when the media query
-      // isn't known yet (reduced=false) — force the final frame here.
+      // The final frame is rendered from `reduced` above; just stop playback.
       clearTimers();
       playingRef.current = false;
-      setCtVisible(new Array(BATCH).fill(true));
-      setServerOn(new Array(COMMITTEE_N).fill(true));
-      setPtVisible(new Array(BATCH).fill(true));
-      setDots([]);
       return;
     }
     const io = new IntersectionObserver(
@@ -397,7 +401,7 @@ function CommitteeAnimation() {
         {cts.map((c, i) => (
           <g
             key={i}
-            opacity={ctVisible[i] ? 1 : 0}
+            opacity={ctShown[i] ? 1 : 0}
             style={{ transition: "opacity 0.4s" }}
           >
             <rect
@@ -465,7 +469,7 @@ function CommitteeAnimation() {
               cx={s.sx}
               cy={s.sy}
               r={9}
-              fill={serverOn[i] ? colors.solutionAccent : colors.solutionAccentLight}
+              fill={serversShown[i] ? colors.solutionAccent : colors.solutionAccentLight}
               stroke={colors.solutionAccent}
               strokeWidth={1.2}
               style={{ transition: "fill 0.3s" }}
@@ -476,7 +480,7 @@ function CommitteeAnimation() {
               textAnchor="middle"
               fontFamily="var(--font-plex-mono), ui-monospace, monospace"
               fontSize={8}
-              fill={serverOn[i] ? "white" : colors.solutionAccent}
+              fill={serversShown[i] ? "white" : colors.solutionAccent}
               fontWeight={600}
             >
               σ{i + 1}
@@ -487,7 +491,7 @@ function CommitteeAnimation() {
         {pts.map((p, i) => (
           <g
             key={i}
-            opacity={ptVisible[i] ? 1 : 0}
+            opacity={ptShown[i] ? 1 : 0}
             style={{ transition: "opacity 0.4s" }}
           >
             <rect
@@ -522,7 +526,7 @@ function CommitteeAnimation() {
           </g>
         ))}
 
-        {dots.map((d) => (
+        {dotsShown.map((d) => (
           <FlyingDotEl key={d.id} dot={d} />
         ))}
       </svg>
@@ -582,6 +586,9 @@ function FftComparison() {
     reduced ? btxActiveOrder.length : 0,
   );
 
+  const naiveShown = reduced ? 64 : naiveCount;
+  const btxShown = reduced ? btxActiveOrder.length : btxCount;
+
   useEffect(() => {
     if (reduced) {
       naiveRefs.current.forEach((el) => {
@@ -597,8 +604,7 @@ function FftComparison() {
           el.style.opacity = "0.95";
         }
       });
-      setNaiveCount(64);
-      setBtxCount(btxActiveOrder.length);
+      // The counts are rendered from `reduced` below.
       return;
     }
 
@@ -757,11 +763,11 @@ function FftComparison() {
       >
         <span style={{ color: colors.problemAccentStrong }}>
           Without FFT:{" "}
-          <span className="font-semibold tabular-nums">{naiveCount}</span> / 64
+          <span className="font-semibold tabular-nums">{naiveShown}</span> / 64
         </span>
         <span className="text-solution-accent">
           With FFT:{" "}
-          <span className="font-semibold tabular-nums">{btxCount}</span> / ~
+          <span className="font-semibold tabular-nums">{btxShown}</span> / ~
           {btxActiveOrder.length}
         </span>
       </div>
diff --git a/src/components/infra/InfraContent.tsx b/src/components/infra/InfraContent.tsx
index 1957625..98b02ac 100644
--- a/src/components/infra/InfraContent.tsx
+++ b/src/components/infra/InfraContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useState, useEffect } from "react";
+import { useState, useSyncExternalStore } from "react";
 import OraclePlayground from "./OraclePlayground";
 import IndexerPlayground from "./IndexerPlayground";
 import SwapPlayground from "./SwapPlayground";
@@ -25,25 +25,40 @@ const CATEGORIES: Category[] = [
   { id: "auth", label: "Add Auth", icon: "⊡", ready: false },
 ];
 
+/** The ready category named by the URL hash, if any. */
+export function readHashCategory(): string | null {
+  const hash = window.location.hash.slice(1);
+  return CATEGORIES.some((c) => c.id === hash && c.ready) ? hash : null;
+}
+
+export function serverHashCategory(): string | null {
+  return null;
+}
+
+// The hash is only restored on load, so there is nothing to subscribe to.
+const subscribeHash = () => () => {};
+
 export default function InfraContent() {
-  const [active, setActive] = useState("oracles");
+  // Server and hydration render the default tab; a valid hash applies right
+  // after hydration. A tab the user picks takes over from there.
+  const hashCategory = useSyncExternalStore(
+    subscribeHash,
+    readHashCategory,
+    serverHashCategory
+  );
+  const [picked, setPicked] = useState<string | null>(null);
   const [visited, setVisited] = useState(() => new Set(["oracles"]));
-
-  // Restore active tab from URL hash on mount
-  useEffect(() => {
-    const hash = window.location.hash.slice(1);
-    const valid = CATEGORIES.find((c) => c.id === hash && c.ready);
-    if (valid) {
-      setActive(hash);
-      setVisited((prev) => new Set(prev).add(hash));
-    }
-  }, []);
+  const active = picked ?? hashCategory ?? "oracles";
+  // The open tab always counts as visited, including one restored from the hash.
+  const opened = new Set(visited).add(active);
 
   const selectCategory = (id: string) => {
-    setActive(id);
+    setPicked(id);
+    // Keep the tab being left mounted too, so a tab restored from the hash
+    // keeps its state like any other visited one.
     setVisited((prev) => {
-      if (prev.has(id)) return prev;
-      return new Set(prev).add(id);
+      if (prev.has(id) && prev.has(active)) return prev;
+      return new Set(prev).add(active).add(id);
     });
     window.history.replaceState(null, "", `#${id}`);
   };
@@ -104,28 +119,28 @@ export default function InfraContent() {
 
       {/* Active playground — lazy mount, keep alive */}
       <div className="w-full max-w-5xl mb-28">
-        {visited.has("oracles") && (
+        {opened.has("oracles") && (
           <div className={active !== "oracles" ? "hidden" : "playground-enter"}>
             <ErrorBoundary>
               <OraclePlayground />
             </ErrorBoundary>
           </div>
         )}
-        {visited.has("indexers") && (
+        {opened.has("indexers") && (
           <div className={active !== "indexers" ? "hidden" : "playground-enter"}>
             <ErrorBoundary>
               <IndexerPlayground />
             </ErrorBoundary>
           </div>
         )}
-        {visited.has("swaps") && (
+        {opened.has("swaps") && (
           <div className={active !== "swaps" ? "hidden" : "playground-enter"}>
             <ErrorBoundary>
               <SwapPlayground />
             </ErrorBoundary>
           </div>
         )}
-        {visited.has("payments") && (
+        {opened.has("payments") && (
           <div className={active !== "payments" ? "hidden" : "playground-enter"}>
             <ErrorBoundary>
               <PaymentsPlayground />
diff --git a/src/components/infra/OraclePlayground.tsx b/src/components/infra/OraclePlayground.tsx
index c63c3e1..0ecdc1e 100644
--- a/src/components/infra/OraclePlayground.tsx
+++ b/src/components/infra/OraclePlayground.tsx
@@ -201,6 +201,15 @@ export default function OraclePlayground() {
   const [error, setError] = useState<string | null>(null);
   const latestPriceRef = useRef<number | null>(null);
 
+  // A new token starts from an empty chart; the effect below fetches it.
+  const selectToken = (i: number) => {
+    if (i === selectedToken) return;
+    setSelectedToken(i);
+    setLoading(true);
+    setError(null);
+    setPrices([]);
+  };
+
   const token = TOKENS[selectedToken];
 
   // Fetch real prices from RedStone API
@@ -231,10 +240,6 @@ export default function OraclePlayground() {
       }
     };
 
-    // Reset state for new token
-    setLoading(true);
-    setError(null);
-    setPrices([]);
     latestPriceRef.current = null;
 
     fetchPrice();
@@ -294,7 +299,7 @@ export default function OraclePlayground() {
               {TOKENS.map((t, i) => (
                 <button
                   key={t.symbol}
-                  onClick={() => setSelectedToken(i)}
+                  onClick={() => selectToken(i)}
                   className={`font-mono text-sm px-3 py-2 rounded-lg border transition-all ${
                     selectedToken === i
                       ? "bg-text-primary text-surface border-text-primary"
diff --git a/src/components/mip3/MemoryPoolSection.tsx b/src/components/mip3/MemoryPoolSection.tsx
index 4375f92..4acf071 100644
--- a/src/components/mip3/MemoryPoolSection.tsx
+++ b/src/components/mip3/MemoryPoolSection.tsx
@@ -100,15 +100,15 @@ export default function MemoryPoolSection() {
   }, [handleNext, handlePrev, isPlaying]);
 
   // Auto-advance when playing using a timer
+  // Playback stops in the same tick that reaches the last step.
   useEffect(() => {
-    if (!isPlaying) return;
-    if (stepIdx >= demoSteps.length - 1) {
-      setIsPlaying(false);
-      return;
-    }
-    const timer = setTimeout(() => setStepIdx((s) => s + 1), 1200);
+    if (!isPlaying || finished) return;
+    const timer = setTimeout(() => {
+      setStepIdx(stepIdx + 1);
+      if (stepIdx + 1 >= demoSteps.length - 1) setIsPlaying(false);
+    }, 1200);
     return () => clearTimeout(timer);
-  }, [isPlaying, stepIdx]);
+  }, [isPlaying, stepIdx, finished, demoSteps.length]);
 
   return (
     <section ref={ref} className="py-24 px-6 bg-surface-elevated relative">
diff --git a/src/components/mip3/Mip3HeroSection.tsx b/src/components/mip3/Mip3HeroSection.tsx
index ffb4cd2..a75cadc 100644
--- a/src/components/mip3/Mip3HeroSection.tsx
+++ b/src/components/mip3/Mip3HeroSection.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useLanguage } from "@/i18n/LanguageContext";
 import SpecDisclaimer from "@/components/SpecDisclaimer";
+import { HERO_STEPS, nextHeroTick, type HeroTick } from "./heroTimeline";
 
 // Quadratic: words²/512 + 3*words
 function ethMemoryCost(bytes: number): number {
@@ -18,38 +19,22 @@ function mip3MemoryCost(bytes: number): number {
 }
 
 const TARGET_BYTES = 1_048_576; // 1 MB
-const STEPS = 40;
-const STEP_DELAY = 80;
 
 export default function Mip3HeroSection() {
   const { t } = useLanguage();
-  const [step, setStep] = useState(0);
-  const [running, setRunning] = useState(false);
+  const [tick, setTick] = useState<HeroTick>({ step: 0, cycle: 0 });
+  const { step } = tick;
 
+  // One timer per frame, so a cleanup can never cancel the restart.
   useEffect(() => {
-    const timer = setTimeout(() => setRunning(true), 1000);
+    const { delay, ...next } = nextHeroTick(tick);
+    const timer = setTimeout(() => setTick(next), delay);
     return () => clearTimeout(timer);
-  }, []);
-
-  const innerTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  useEffect(() => {
-    if (!running) return;
-    if (step >= STEPS) {
-      // Reset after pause
-      const timer = setTimeout(() => {
-        setStep(0);
-        innerTimerRef.current = setTimeout(() => setRunning(true), 500);
-      }, 3000);
-      setRunning(false);
-      return () => { clearTimeout(timer); clearTimeout(innerTimerRef.current); };
-    }
-    const timer = setTimeout(() => setStep((s) => s + 1), STEP_DELAY);
-    return () => clearTimeout(timer);
-  }, [step, running]);
+  }, [tick]);
 
   // Exponential scale so early steps show small sizes, later steps show big
   const currentBytes = Math.round(
-    32 * Math.pow(TARGET_BYTES / 32, step / STEPS)
+    32 * Math.pow(TARGET_BYTES / 32, step / HERO_STEPS)
   );
   const ethGas = ethMemoryCost(currentBytes);
   const mip3Gas = mip3MemoryCost(currentBytes);
@@ -151,7 +136,7 @@ export default function Mip3HeroSection() {
           {/* Ratio */}
           <div className="flex items-center justify-between mt-4 pt-4 border-t border-border">
             <p className="font-mono text-xs text-text-tertiary">
-              {step >= STEPS
+              {step >= HERO_STEPS
                 ? t("mip3.hero.memoryOf")
                 : `${t("mip3.hero.expanding")} ${formatBytes(currentBytes)}...`}
             </p>
diff --git a/src/components/mip3/heroTimeline.test.ts b/src/components/mip3/heroTimeline.test.ts
new file mode 100644
index 0000000..47b30b5
--- /dev/null
+++ b/src/components/mip3/heroTimeline.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { HERO_STEPS, HERO_STEP_DELAY, nextHeroTick, type HeroTick } from "./heroTimeline";
+
+describe("MIP-3 hero counter timeline", () => {
+  it("waits before the first cycle, climbs, holds, and starts over", () => {
+    let tick: HeroTick = { step: 0, cycle: 0 };
+    const delays: number[] = [];
+    // Two full cycles: every step, the hold, and the restart.
+    for (let i = 0; i < 2 * (HERO_STEPS + 1); i += 1) {
+      const { delay, ...next } = nextHeroTick(tick);
+      delays.push(delay);
+      tick = next;
+    }
+
+    expect(tick).toEqual({ step: 0, cycle: 2 });
+    // First cycle starts after 1s, a restart after 0.5s, each plus one step.
+    expect(delays[0]).toBe(1000 + HERO_STEP_DELAY);
+    expect(delays[HERO_STEPS + 1]).toBe(500 + HERO_STEP_DELAY);
+    // The last frame is held for 3s before resetting to step 0.
+    expect(delays[HERO_STEPS]).toBe(3000);
+    expect(delays.slice(1, HERO_STEPS)).toEqual(new Array(HERO_STEPS - 1).fill(HERO_STEP_DELAY));
+  });
+
+  it("resets from the last frame rather than stopping there", () => {
+    expect(nextHeroTick({ step: HERO_STEPS, cycle: 3 })).toEqual({
+      step: 0,
+      cycle: 4,
+      delay: 3000,
+    });
+  });
+});
diff --git a/src/components/mip3/heroTimeline.ts b/src/components/mip3/heroTimeline.ts
new file mode 100644
index 0000000..02cbc6f
--- /dev/null
+++ b/src/components/mip3/heroTimeline.ts
@@ -0,0 +1,25 @@
+export const HERO_STEPS = 40;
+export const HERO_STEP_DELAY = 80;
+const START_DELAY = 1000;
+const END_PAUSE = 3000;
+const RESTART_DELAY = 500;
+
+export interface HeroTick {
+  step: number;
+  cycle: number;
+}
+
+/**
+ * The next frame of the hero counter and how long to wait for it.
+ *
+ * The counter climbs to HERO_STEPS, holds the last frame, then starts over.
+ * The first cycle waits a little longer before it begins.
+ */
+export function nextHeroTick({ step, cycle }: HeroTick): HeroTick & { delay: number } {
+  if (step >= HERO_STEPS) return { step: 0, cycle: cycle + 1, delay: END_PAUSE };
+  if (step === 0) {
+    const wait = cycle === 0 ? START_DELAY : RESTART_DELAY;
+    return { step: 1, cycle, delay: wait + HERO_STEP_DELAY };
+  }
+  return { step: step + 1, cycle, delay: HERO_STEP_DELAY };
+}
diff --git a/src/components/mip4/BundlerComparisonSection.tsx b/src/components/mip4/BundlerComparisonSection.tsx
index 8fa590e..f4fa54c 100644
--- a/src/components/mip4/BundlerComparisonSection.tsx
+++ b/src/components/mip4/BundlerComparisonSection.tsx
@@ -61,10 +61,8 @@ export default function BundlerComparisonSection() {
     if (mode === "without") {
       // Without MIP-4: all ops execute (no early detection), then entire bundle reverts.
       // The bundler has no way to know which op caused the failure.
-      if (nextStep > USER_OPS.length) {
-        setIsPlaying(false);
-        return;
-      }
+      // Playback already stopped in the revert timer below.
+      if (nextStep > USER_OPS.length) return;
 
       // After all ops processed, trigger the full bundle revert
       if (nextStep === USER_OPS.length) {
@@ -100,16 +98,19 @@ export default function BundlerComparisonSection() {
     } else {
       // With MIP-4: dippedIntoReserve() identifies the violating op.
       // That op is reverted, but the rest of the bundle continues.
-      if (nextStep >= USER_OPS.length) {
-        setIsPlaying(false);
-        if (opStatuses.some((s) => s === "flagged")) {
-          setMessage(t("mip4.bundler.withMessage"));
-        }
-        return;
-      }
+      // Playback already stopped when the last op started below.
+      if (nextStep >= USER_OPS.length) return;
       const op = USER_OPS[nextStep];
       const timer = setTimeout(() => {
         setStep(nextStep);
+        if (nextStep === USER_OPS.length - 1) {
+          // Same moment and same statuses as checking it once the last op
+          // is reached: earlier ops are settled, the last one is still running.
+          setIsPlaying(false);
+          if (opStatuses.some((s) => s === "flagged")) {
+            setMessage(t("mip4.bundler.withMessage"));
+          }
+        }
         setOpStatuses((prev) => {
           const next = [...prev];
           next[nextStep] = "executing";
diff --git a/src/components/mip4/TransactionTimelineSection.tsx b/src/components/mip4/TransactionTimelineSection.tsx
index baffc03..32bd5b2 100644
--- a/src/components/mip4/TransactionTimelineSection.tsx
+++ b/src/components/mip4/TransactionTimelineSection.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion, AnimatePresence } from "framer-motion";
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { useInView } from "../useInView";
 import { useLanguage } from "@/i18n/LanguageContext";
 
@@ -119,13 +119,12 @@ export default function TransactionTimelineSection() {
   }, [anyViolation]);
 
   // Keyboard navigation — only when focus is within this section
-  const sectionRef = useRef<HTMLElement>(null);
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
       const focused = e.target as Element;
       if (focused.closest('button, a, select, [role="button"]')) return;
-      if (!sectionRef.current?.contains(document.activeElement) && document.activeElement !== document.body) return;
+      if (!ref.current?.contains(document.activeElement) && document.activeElement !== document.body) return;
       if (e.key === "ArrowRight" || e.key === "ArrowDown") {
         e.preventDefault();
         handleNext();
@@ -140,13 +139,13 @@ export default function TransactionTimelineSection() {
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [handleNext, handlePrev, handleReset, handleCheck]);
+  }, [handleNext, handlePrev, handleReset, handleCheck, ref]);
 
   const maxBalance = 70; // for bar scaling
   const finished = stepIdx >= STEPS.length - 1;
 
   return (
-    <section ref={(el) => { (ref as React.MutableRefObject<HTMLElement | null>).current = el; sectionRef.current = el; }} className="py-24 px-6 bg-surface-elevated relative">
+    <section ref={ref} className="py-24 px-6 bg-surface-elevated relative">
       <div
         className={`max-w-5xl mx-auto section-reveal ${
           isVisible ? "visible" : ""
diff --git a/src/components/mip7/CollisionSection.tsx b/src/components/mip7/CollisionSection.tsx
index 48f0e5f..e9fd037 100644
--- a/src/components/mip7/CollisionSection.tsx
+++ b/src/components/mip7/CollisionSection.tsx
@@ -109,7 +109,7 @@ export default function CollisionSection() {
             </div>
             {(step.monad.status === "claimed" || step.monad.status === "conflict") && (
               <div className="font-mono text-xs bg-surface rounded-lg p-3 border border-border">
-                <span className="text-text-tertiary">// executes </span>
+                <span className="text-text-tertiary">{"// executes "}</span>
                 <span className="text-solution-accent">Monad FAST_HASH</span>
               </div>
             )}
@@ -157,12 +157,12 @@ export default function CollisionSection() {
             </div>
             {step.ethereum.status === "claimed" || step.ethereum.status === "conflict" ? (
               <div className="font-mono text-xs bg-surface rounded-lg p-3 border border-border">
-                <span className="text-text-tertiary">// executes </span>
+                <span className="text-text-tertiary">{"// executes "}</span>
                 <span className="text-problem-accent">Ethereum SWAP17</span>
               </div>
             ) : (
               <div className="font-mono text-xs bg-surface rounded-lg p-3 border border-border text-text-tertiary">
-                // 0xAB → INVALID
+                {"// 0xAB → INVALID"}
               </div>
             )}
           </div>
diff --git a/src/components/mip7/JumpdestSection.tsx b/src/components/mip7/JumpdestSection.tsx
index 8531403..9234cb2 100644
--- a/src/components/mip7/JumpdestSection.tsx
+++ b/src/components/mip7/JumpdestSection.tsx
@@ -232,18 +232,18 @@ export default function JumpdestSection() {
   }, []);
 
   // Auto-advance
+  // Playback stops in the same tick that scans the last byte.
   useEffect(() => {
-    if (!isPlaying) return;
-    if (scanStep >= totalBytes - 1) {
-      setIsPlaying(false);
-      return;
-    }
+    if (!isPlaying || done) return;
     const timer = setTimeout(
-      () => setScanStep((s) => s + 1),
+      () => {
+        setScanStep(scanStep + 1);
+        if (scanStep + 1 >= totalBytes - 1) setIsPlaying(false);
+      },
       scanStep === -1 ? 300 : 700
     );
     return () => clearTimeout(timer);
-  }, [isPlaying, scanStep, totalBytes]);
+  }, [isPlaying, scanStep, totalBytes, done]);
 
   const started = scanStep >= 0;
 
diff --git a/src/components/spam-mev/ExplainModeContext.tsx b/src/components/spam-mev/ExplainModeContext.tsx
index 9037570..2801fc9 100644
--- a/src/components/spam-mev/ExplainModeContext.tsx
+++ b/src/components/spam-mev/ExplainModeContext.tsx
@@ -3,10 +3,10 @@
 import {
   createContext,
   useContext,
-  useState,
-  useEffect,
+  useSyncExternalStore,
   type ReactNode,
 } from "react";
+import { storedPreference } from "@/lib/stored-preference";
 
 export type ExplainMode = "simple" | "technical";
 
@@ -22,26 +22,21 @@ const Context = createContext<ExplainModeContextType>({
   toggle: () => {},
 });
 
-function readStored(): ExplainMode {
-  if (typeof window === "undefined") return "technical";
-  const v = localStorage.getItem(STORAGE_KEY);
-  return v === "simple" ? "simple" : "technical";
+const stored = storedPreference(STORAGE_KEY);
+
+export function readExplainMode(): ExplainMode {
+  return stored.read() === "simple" ? "simple" : "technical";
+}
+
+export function serverExplainMode(): ExplainMode {
+  return "technical";
 }
 
 export function ExplainModeProvider({ children }: { children: ReactNode }) {
-  const [mode, setMode] = useState<ExplainMode>("technical");
-
-  // Hydrate from localStorage after mount
-  useEffect(() => {
-    setMode(readStored());
-  }, []);
-
-  const toggle = () =>
-    setMode((m) => {
-      const next = m === "simple" ? "technical" : "simple";
-      localStorage.setItem(STORAGE_KEY, next);
-      return next;
-    });
+  // Server and hydration render "technical"; a saved mode applies right after.
+  const mode = useSyncExternalStore(stored.subscribe, readExplainMode, serverExplainMode);
+
+  const toggle = () => stored.write(mode === "simple" ? "technical" : "simple");
 
   return (
     <Context.Provider value={{ mode, toggle }}>{children}</Context.Provider>
diff --git a/src/components/spam-mev/SpamHeroSection.tsx b/src/components/spam-mev/SpamHeroSection.tsx
index 10fbc68..51a6021 100644
--- a/src/components/spam-mev/SpamHeroSection.tsx
+++ b/src/components/spam-mev/SpamHeroSection.tsx
@@ -53,10 +53,14 @@ export default function SpamHeroSection() {
   const [cycle, setCycle] = useState(0);
   const [mounted, setMounted] = useState(false);
 
-  // Only start random generation after hydration
+  // Random cells only on the client: the first block replaces the static grid
+  // one task after hydration, so the server markup is what hydrates.
   useEffect(() => {
-    setMounted(true);
-    setCells(generateBlock());
+    const timer = setTimeout(() => {
+      setMounted(true);
+      setCells(generateBlock());
+    }, 0);
+    return () => clearTimeout(timer);
   }, []);
 
   const startCycle = useCallback(() => {
diff --git a/src/i18n/LanguageContext.tsx b/src/i18n/LanguageContext.tsx
index 1b58202..6db4c5a 100644
--- a/src/i18n/LanguageContext.tsx
+++ b/src/i18n/LanguageContext.tsx
@@ -3,11 +3,12 @@
 import {
   createContext,
   useContext,
-  useState,
   useEffect,
   useCallback,
+  useSyncExternalStore,
   type ReactNode,
 } from "react";
+import { storedPreference } from "@/lib/stored-preference";
 import en from "./en";
 import zh from "./zh";
 
@@ -41,39 +42,43 @@ function getNestedValue(obj: Record<string, unknown>, path: string): string {
   return typeof current === "string" ? current : path;
 }
 
-export function LanguageProvider({ children }: { children: ReactNode }) {
-  const [locale, setLocaleState] = useState<Locale>("en");
-  const [showBanner, setShowBanner] = useState(false);
-  const [mounted, setMounted] = useState(false);
+const storedLocale = storedPreference("locale");
 
-  useEffect(() => {
-    const saved = localStorage.getItem("locale");
-    if (saved === "en" || saved === "zh") {
-      // User has a saved preference - use it directly
-      setLocaleState(saved);
-    } else {
-      // No saved preference - check if browser is Chinese
-      const lang = navigator.language || "";
-      if (lang.startsWith("zh")) {
-        // Show banner asking if they want Chinese, but stay on English
-        setShowBanner(true);
-      }
-    }
-    setMounted(true);
-  }, []);
+/**
+ * What the visitor's language setup asks for: a saved choice, an offer to
+ * switch for a Chinese browser with no saved choice, or nothing.
+ */
+export type LocalePreference = Locale | "offer-zh" | "none";
+
+export function readLocalePreference(): LocalePreference {
+  const saved = storedLocale.read();
+  if (saved === "en" || saved === "zh") return saved;
+  // No saved preference: offer Chinese to a Chinese browser, but stay on English.
+  return (navigator.language || "").startsWith("zh") ? "offer-zh" : "none";
+}
+
+export function serverLocalePreference(): LocalePreference {
+  return "none";
+}
+
+export function LanguageProvider({ children }: { children: ReactNode }) {
+  // Server and hydration render English with no banner; a saved choice or the
+  // Chinese-browser offer applies right after hydration.
+  const preference = useSyncExternalStore(
+    storedLocale.subscribe,
+    readLocalePreference,
+    serverLocalePreference
+  );
+  const locale: Locale = preference === "zh" ? "zh" : "en";
+  const showBanner = preference === "offer-zh";
 
   const setLocale = useCallback((l: Locale) => {
-    setLocaleState(l);
-    localStorage.setItem("locale", l);
+    storedLocale.write(l);
     document.documentElement.lang = l;
-    setShowBanner(false);
   }, []);
 
-  const dismissBanner = useCallback(() => {
-    setShowBanner(false);
-    // Save English preference so banner doesn't show again
-    localStorage.setItem("locale", "en");
-  }, []);
+  // Save English preference so banner doesn't show again
+  const dismissBanner = useCallback(() => storedLocale.write("en"), []);
 
   const t = useCallback(
     (key: string): string => {
@@ -89,26 +94,6 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
     document.documentElement.lang = locale;
   }, [locale]);
 
-  if (!mounted) {
-    return (
-      <LanguageContext.Provider
-        value={{
-          locale: "en",
-          setLocale,
-          t: (key: string) =>
-            getNestedValue(
-              translations.en as unknown as Record<string, unknown>,
-              key
-            ),
-          showBanner: false,
-          dismissBanner,
-        }}
-      >
-        {children}
-      </LanguageContext.Provider>
-    );
-  }
-
   return (
     <LanguageContext.Provider value={{ locale, setLocale, t, showBanner, dismissBanner }}>
       {children}
diff --git a/src/lib/hydration.test.ts b/src/lib/hydration.test.ts
new file mode 100644
index 0000000..1faf69c
--- /dev/null
+++ b/src/lib/hydration.test.ts
@@ -0,0 +1,70 @@
+import { createElement, type ReactNode } from "react";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  ExplainModeProvider,
+  readExplainMode,
+  useExplainMode,
+} from "@/components/spam-mev/ExplainModeContext";
+import { readHashCategory, serverHashCategory } from "@/components/infra/InfraContent";
+import { LanguageProvider, readLocalePreference, useLanguage } from "@/i18n/LanguageContext";
+
+// Storage and window are both present, so a provider that read the saved value
+// while rendering (a state initializer, say) would leak it into this server render.
+function stubStorage(entries: Record<string, string>) {
+  const store = new Map(Object.entries(entries));
+  vi.stubGlobal("window", { location: { hash: "" } });
+  vi.stubGlobal("localStorage", {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => void store.set(key, value),
+  });
+}
+
+function ModeProbe() {
+  return createElement("span", null, useExplainMode().mode);
+}
+
+function LanguageProbe() {
+  const { locale, showBanner, t } = useLanguage();
+  return createElement("span", null, `${locale}|${showBanner}|${t("nav.clearSigning")}`);
+}
+
+function render(provider: (props: { children: ReactNode }) => ReactNode, probe: () => ReactNode) {
+  return renderToString(createElement(provider, null, createElement(probe)));
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("saved preferences apply after hydration, never during it", () => {
+  it("renders the technical explain mode on the server even when simple is saved", () => {
+    stubStorage({ "spam-mev-mode": "simple" });
+    expect(render(ExplainModeProvider, ModeProbe)).toContain("technical");
+    // The client snapshot used right after hydration picks up the saved mode.
+    expect(readExplainMode()).toBe("simple");
+  });
+
+  it("renders English with no banner on the server even when Chinese is saved", () => {
+    stubStorage({ locale: "zh" });
+    vi.stubGlobal("navigator", { language: "zh-CN" });
+    expect(render(LanguageProvider, LanguageProbe)).toContain("en|false|Clear Signing");
+    expect(readLocalePreference()).toBe("zh");
+  });
+
+  it("offers Chinese to a Chinese browser only when nothing is saved", () => {
+    vi.stubGlobal("navigator", { language: "zh-CN" });
+    stubStorage({});
+    expect(readLocalePreference()).toBe("offer-zh");
+    stubStorage({ locale: "en" });
+    expect(readLocalePreference()).toBe("en");
+  });
+
+  it("restores only a ready tab from the URL hash, and only on the client", () => {
+    expect(serverHashCategory()).toBeNull();
+    vi.stubGlobal("window", { location: { hash: "#indexers" } });
+    expect(readHashCategory()).toBe("indexers");
+    vi.stubGlobal("window", { location: { hash: "#bridges" } });
+    expect(readHashCategory()).toBeNull();
+  });
+});
diff --git a/src/lib/stored-preference.ts b/src/lib/stored-preference.ts
new file mode 100644
index 0000000..1f9a31c
--- /dev/null
+++ b/src/lib/stored-preference.ts
@@ -0,0 +1,27 @@
+/**
+ * A localStorage value for useSyncExternalStore.
+ *
+ * The server and the hydrating client render the fallback snapshot, and the
+ * stored value is applied right after hydration, so reading a saved
+ * preference can no longer produce a hydration mismatch. Writes go through
+ * `write` so every subscriber re-reads.
+ */
+export function storedPreference(key: string) {
+  const listeners = new Set<() => void>();
+
+  return {
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    read(): string | null {
+      return localStorage.getItem(key);
+    },
+    write(value: string) {
+      localStorage.setItem(key, value);
+      for (const listener of listeners) listener();
+    },
+  };
+}