diff --git a/apps/web/src/cache-headers.test.ts b/apps/web/src/cache-headers.test.ts
index aedb0d3e..9e74ef79 100644
--- a/apps/web/src/cache-headers.test.ts
+++ b/apps/web/src/cache-headers.test.ts
@@ -48,7 +48,7 @@ describe('cacheHeadersMiddleware', () => {
     const mw = cacheHeadersMiddleware()
     const c = ctx('GET', new Response('placeholder'))
     const next = async () => {
-      c.res = new Response(null, { status: 301, headers: { Location: '/demos#hash' } })
+      c.res = new Response(null, { status: 301, headers: { Location: '/concepts#hash' } })
     }
 
     await mw(c, next)
diff --git a/apps/web/src/components/demos-tabs.tsx b/apps/web/src/components/demos-tabs.tsx
index b4eb0dac..6a2482ac 100644
--- a/apps/web/src/components/demos-tabs.tsx
+++ b/apps/web/src/components/demos-tabs.tsx
@@ -72,9 +72,9 @@ const TABS: Tab[] = [
     blurb: 'Content-defined chunking ships and verifies only the parts of a file that changed.',
     body: (
       <>
-        mkit cuts big files into content-defined chunks (FastCDC), ships only the chunks that changed, and verifies each
-        one as it arrives. git re-stores the whole binary on every edit. Watch the auto-editor run, or drop in your own
-        large file.
+        mkit cuts big files into content-defined chunks (FastCDC) and verifies each one against a Bao root as it arrives
+        — corruption is caught mid-stream and re-fetched, not discovered after the download. Watch the file stream in
+        verified, or corrupt the connection and see the verifier catch it.
       </>
     ),
     Demo: StreamingDemo,
@@ -177,7 +177,7 @@ export function DemosTabs() {
           the active tab (wrapping around). Switches tabs in place rather than
           navigating away. */}
       <section className='space-y-4 pt-8'>
-        <h2 className='text-xl font-semibold tracking-tight'>More demos to explore</h2>
+        <h2 className='text-xl font-semibold tracking-tight'>More concepts to explore</h2>
         <ul className='grid gap-4 sm:grid-cols-3'>
           {upNext.map((t) => (
             <li key={t.id}>
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 816d5659..105b3e66 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -2,12 +2,12 @@ import { Link } from 'waku'
 import { GridLogo } from './grid-logo'
 import { ThemeToggle } from './theme-toggle'
 
-// Top-nav order: the combined demos playground first (it now folds in the
+// Top-nav order: the combined concepts playground first (it now folds in the
 // tree and push walkthroughs as tabs), then the doc-style pages
 // (performance, parity, specs), then the live multiplayer room. Reordering
 // the site nav is editing this list — nothing else.
 const NAV_LINKS = [
-  { to: '/demos', label: 'demos' },
+  { to: '/concepts', label: 'concepts' },
   { to: '/performance', label: 'performance' },
   { to: '/parity', label: 'parity' },
   { to: '/specs', label: 'specs' },
diff --git a/apps/web/src/components/streaming-demo.tsx b/apps/web/src/components/streaming-demo.tsx
index 07b0ad4b..49b888b0 100644
--- a/apps/web/src/components/streaming-demo.tsx
+++ b/apps/web/src/components/streaming-demo.tsx
@@ -1,143 +1,75 @@
 'use client'
 
-import { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
-import { mulberry32 } from '../lib/grid-svg'
+import { useEffect, useRef, useState } from 'react'
+import { type FileAsset, decodePpmHeader, generateDefaultPpm } from '../lib/ppm'
 import { ChunkStrip, type StripChunk } from './chunk-strip'
-import { ObjectRow } from './result-panel'
 import { formatBytes, useMkit } from './use-mkit'
 
-// `source` lets the auto-edit loop pick the right mutator: defaults regenerate via canvas+PPM so a single grid-cell
-// edit produces a single localised byte-range change, uploads get random byte flips.
-type FileAsset = { name: string; bytes: Uint8Array; source: 'default' | 'upload' }
+// The wasm results expose their chunk lists via an index getter; materialise once into the shape ChunkStrip renders.
+function stripChunks(r: {
+  chunk_count: number
+  chunk(i: number): { offset: number; len: number; hash_hex: string } | undefined
+}): StripChunk[] {
+  return Array.from({ length: r.chunk_count }, (_, i) => {
+    const c = r.chunk(i)!
+    return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
+  })
+}
+
+// Blit rows [from, to) of `src` (bytes assembled at their file offsets) onto `ctx` at row `from`, converting the PPM's
+// packed RGB triples into RGBA.
+function paintRows(
+  ctx: CanvasRenderingContext2D,
+  src: Uint8Array,
+  ppm: { width: number; pixelStart: number },
+  from: number,
+  to: number,
+) {
+  const { width, pixelStart } = ppm
+  const bytesPerRow = width * 3
+  const rowSpan = to - from
+  const rgba = new Uint8ClampedArray(width * rowSpan * 4)
+  let p = pixelStart + from * bytesPerRow
+  for (let i = 0; i < width * rowSpan; i++) {
+    rgba[i * 4] = src[p++]!
+    rgba[i * 4 + 1] = src[p++]!
+    rgba[i * 4 + 2] = src[p++]!
+    rgba[i * 4 + 3] = 255
+  }
+  ctx.putImageData(new ImageData(rgba, width, rowSpan), 0, from)
+}
 
-const DEFAULT_NAME = 'grid.ppm'
 const DEFAULT_SEED = 0xc0de_cafe
-// Demo-only hard cap. At 64 KiB avg FastCDC chunks, 128 MiB → ~2,048 chunks — the strip stays readable (each chip is
-// still visible at typical viewport widths) and the wasm passes finish in a few seconds on a modest laptop. Above this
-// we'd risk OOM in wasm32 (the linear memory ceiling is 4 GiB and our passes hold multiple copies — input, chunker
-// state, Bao outboard) and start freezing the tab while building tens of thousands of DOM nodes. Real mkit has no
-// such limit; the cap only applies to this interactive page.
-const MAX_FILE_BYTES = 128 * 1024 * 1024
-// Auto-edit cadence. 500 ms is the visible target — the user perceives a continuously changing chunker. The
-// `tickRunning` guard naturally throttles to whatever rate the wasm pass actually completes at on the host machine,
-// so a slow device falls back to "as fast as possible" instead of stacking ticks.
-const AUTO_EDIT_INTERVAL_MS = 500
-// Bao re-encode is the heaviest wasm pass in the demo (full outboard tree) — well above the chunker/blob/delta cost.
-// Run it on a slower cadence (every Nth tick) so the chunker can stay snappy at 500 ms while the Bao section still
-// re-roots often enough to feel live. ~2 s is below the threshold where the user notices a "stale" Bao root.
-const BAO_THROTTLE_TICKS = 4
 
 export function StreamingDemo() {
   const [currentFile, setCurrentFile] = useState<FileAsset | null>(null)
-  // `baoFile` lags `currentFile` and only updates every `BAO_THROTTLE_TICKS` auto-edit ticks. Lets the heavy
-  // bao_encode pass run on a slower cadence than the chunker / ChunkedBlob / delta sections.
-  const [baoFile, setBaoFile] = useState<FileAsset | null>(null)
-  const [previousFile, setPreviousFile] = useState<FileAsset | null>(null)
-  const baoTickRef = useRef(0)
-  const [tooLarge, setTooLarge] = useState<{ name: string; size: number } | null>(null)
-  const [autoEdit, setAutoEdit] = useState(true)
   // React strict-mode mounts twice; cache the generated default bytes so we don't burn the canvas pipeline twice on
   // first paint. Ref survives the remount.
   const generatedRef = useRef<FileAsset | null>(null)
-  // Accumulated cell-hue overrides for the default PPM so each auto-edit tick adds one drifted square on top of the
-  // running mutation history, instead of replacing the whole image. Reset whenever the file is replaced.
-  const overridesRef = useRef<CellOverride[]>([])
-  // Mirror of `currentFile` so the auto-edit interval can read the latest bytes without re-binding on every render.
-  const currentFileRef = useRef<FileAsset | null>(null)
-  currentFileRef.current = currentFile
 
   useEffect(() => {
     if (generatedRef.current) {
       setCurrentFile(generatedRef.current)
       return
     }
-    const asset = generateDefaultPpm(DEFAULT_SEED, [])
+    const asset = generateDefaultPpm(DEFAULT_SEED)
     generatedRef.current = asset
     setCurrentFile(asset)
-    setBaoFile(asset)
   }, [])
 
-  // Reject oversized files *before* reading the ArrayBuffer — saves the browser from allocating hundreds of MiB just
-  // to throw it away. Real mkit has no cap; this is purely to keep the demo page responsive.
-  const tryReplaceFile = async (file: File) => {
-    const name = file.name || 'file'
-    if (file.size > MAX_FILE_BYTES) {
-      setTooLarge({ name, size: file.size })
-      return
-    }
-    const buf = await file.arrayBuffer()
-    setTooLarge(null)
-    setAutoEdit(false)
-    overridesRef.current = []
-    baoTickRef.current = 0
-    const next: FileAsset = { name, bytes: new Uint8Array(buf), source: 'upload' }
-    setPreviousFile(currentFile)
-    setCurrentFile(next)
-    setBaoFile(next)
-  }
-
-  // Auto-edit loop: snapshot the current file as the delta baseline once when toggled on, then mutate `currentFile`
-  // every tick. Default file → grow `overridesRef` and re-render the PPM (localised byte-range change). Uploaded file
-  // → flip 1–3 random bytes outside any image header. The interval reads the latest file via the functional updater
-  // so we don't restart it on every state change.
-  useEffect(() => {
-    if (!autoEdit) return
-    setPreviousFile(currentFile)
-    let cancelled = false
-    let tickRunning = false
-    const id = window.setInterval(() => {
-      if (cancelled || tickRunning) return
-      tickRunning = true
-      try {
-        const captured = currentFileRef.current
-        if (!captured || cancelled) {
-          tickRunning = false
-          return
-        }
-        const next: FileAsset =
-          captured.source === 'default'
-            ? driftDefaultPpm(DEFAULT_SEED, overridesRef.current)
-            : mutateRandomBytes(captured)
-        if (cancelled) return
-        setCurrentFile(next)
-        baoTickRef.current = (baoTickRef.current + 1) % BAO_THROTTLE_TICKS
-        if (baoTickRef.current === 0) setBaoFile(next)
-      } finally {
-        tickRunning = false
-      }
-    }, AUTO_EDIT_INTERVAL_MS)
-    return () => {
-      cancelled = true
-      window.clearInterval(id)
-    }
-    // We deliberately depend only on autoEdit. The interval reads currentFile via the setter callback so it stays
-    // current without restarting on every tick.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoEdit])
-
   if (!currentFile) {
     return <p className='text-sm text-muted'>Generating default file…</p>
   }
 
   return (
     // Mobile-first ordering: live sections above the file sidebar so a phone landing on the streaming demo sees the
-    // chunker changing immediately, then scrolls down to the file controls. See `hash-demo.tsx` for the same pattern.
+    // download running immediately, then scrolls down to the file controls. See `hash-demo.tsx` for the same pattern.
     <div className='flex flex-col-reverse gap-10 lg:grid lg:grid-cols-[minmax(0,20rem)_1fr] lg:gap-12'>
       <div className='space-y-6 lg:sticky lg:top-24 lg:self-start'>
-        <FileSidebar
-          current={currentFile}
-          previous={previousFile}
-          onReplace={tryReplaceFile}
-          rejected={tooLarge}
-          autoEdit={autoEdit}
-          onToggleAutoEdit={() => setAutoEdit((v) => !v)}
-        />
+        <FileSidebar current={currentFile} />
       </div>
       <div className='space-y-12'>
-        <StreamingChunker file={currentFile} />
-        <StreamingChunkedBlob file={currentFile} />
-        <StreamingDelta current={currentFile} previous={previousFile} />
-        <StreamingBaoVerify file={baoFile ?? currentFile} />
+        <StreamingVerifiedDownload file={currentFile} />
       </div>
     </div>
   )
@@ -145,459 +77,281 @@ export function StreamingDemo() {
 
 // --- sidebar -----------------------------------------------------------------
 
-function FileSidebar({
-  current,
-  previous,
-  onReplace,
-  rejected,
-  autoEdit,
-  onToggleAutoEdit,
-}: {
-  current: FileAsset
-  previous: FileAsset | null
-  onReplace: (file: File) => void | Promise<void>
-  rejected: { name: string; size: number } | null
-  autoEdit: boolean
-  onToggleAutoEdit: () => void
-}) {
-  const fileRef = useRef<HTMLInputElement>(null)
-  const [dragOver, setDragOver] = useState(false)
-
+function FileSidebar({ current }: { current: FileAsset }) {
   return (
-    <div className='space-y-4'>
-      <div className='flex items-start gap-3'>
-        <FilePreview asset={current} />
-        <div className='min-w-0 flex-1'>
-          <span className='block text-sm text-muted'>Current file</span>
-          <p className='mt-1 text-sm font-medium break-all'>{current.name}</p>
-          <p className='text-xs text-muted'>{formatBytes(current.bytes.byteLength)}</p>
-          {previous ? (
-            <p className='mt-1 text-xs text-muted'>
-              (prev: {previous.name}, {formatBytes(previous.bytes.byteLength)})
-            </p>
-          ) : null}
-        </div>
-      </div>
-      {rejected ? (
-        <p className='text-xs text-amber-700 dark:text-amber-400'>
-          <span className='font-medium'>{rejected.name}</span> is {formatBytes(rejected.size)}. The demo cap is{' '}
-          {formatBytes(MAX_FILE_BYTES)} to keep this page responsive. mkit handles gigabytes; the cap only applies to
-          this interactive page.
-        </p>
-      ) : null}
-
-      <div
-        onDragOver={(e) => {
-          e.preventDefault()
-          setDragOver(true)
-        }}
-        onDragLeave={() => setDragOver(false)}
-        onDrop={(e) => {
-          e.preventDefault()
-          setDragOver(false)
-          const f = e.dataTransfer.files?.[0]
-          if (f) void onReplace(f)
-        }}
-        className={`rounded-md border border-dashed p-3 text-xs transition-colors ${
-          // text-muted must live in the else branch: both .text-* classes set the same property, so
-          // stylesheet order (not className order) would decide and text-fg loses to a later text-muted.
-          dragOver ? 'border-fg text-fg' : 'border-hairline text-muted'
-        }`}
-      >
-        Drop a file here, or
-        <button
-          type='button'
-          onClick={() => fileRef.current?.click()}
-          className='ml-1 underline underline-offset-4 transition-opacity hover:opacity-70'
-        >
-          choose one
-        </button>
-        .
-      </div>
-      <input
-        ref={fileRef}
-        type='file'
-        className='hidden'
-        onChange={(e) => {
-          const f = e.target.files?.[0]
-          if (f) void onReplace(f)
-          e.target.value = ''
-        }}
-      />
-      <p className='text-xs text-muted'>
-        Replace the file and the delta section fills in; the prior version is captured automatically. Demo cap:{' '}
-        {formatBytes(MAX_FILE_BYTES)}.
-      </p>
-
-      <div className='space-y-2 border-t border-hairline pt-4'>
-        <button
-          type='button'
-          onClick={onToggleAutoEdit}
-          aria-pressed={autoEdit}
-          className={`inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border px-3 text-sm font-medium transition-all duration-200 active:scale-[0.96] sm:h-9 ${
-            autoEdit ? 'border-fg bg-fg text-bg' : 'border-hairline hover:border-blue-500/50'
-          }`}
-        >
-          <span aria-hidden className={`size-1.5 rounded-full ${autoEdit ? 'animate-pulse bg-bg' : 'bg-muted'}`} />
-          {autoEdit ? 'Auto-editing' : 'Auto-edit'}
-        </button>
-        <p className='text-xs text-muted'>
-          {current.source === 'default'
-            ? 'Drifts one grid cell per tick. FastCDC keeps most chunks stable while the edited region’s chunk re-hashes.'
-            : 'Flips 1–3 random bytes per tick, skipping any image header, so you can watch the chunker react to small edits.'}
-        </p>
+    <div className='flex items-start gap-3'>
+      <FilePreview asset={current} />
+      <div className='min-w-0 flex-1'>
+        <span className='block text-sm text-muted'>Current file</span>
+        <p className='mt-1 text-sm font-medium break-all'>{current.name}</p>
+        <p className='text-xs text-muted'>{formatBytes(current.bytes.byteLength)}</p>
       </div>
     </div>
   )
 }
 
-// --- section 1: chunker ------------------------------------------------------
-
-function StreamingChunker({ file }: { file: FileAsset }) {
-  const api = useMkit()
-  const result = useMemo(() => {
-    const r = api.chunk_boundaries(file.bytes)
-    const chunks: StripChunk[] = Array.from({ length: r.chunk_count }, (_, i) => {
-      const c = r.chunk(i)!
-      return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
-    })
-    return { chunks, avg: r.avg, min: r.min, max: r.max, count: r.chunk_count }
-  }, [api, file])
-
-  const [tamperByte, setTamperByte] = useState(Math.floor(file.bytes.byteLength / 2))
-  // Re-anchor when file changes so the slider stays in range.
-  useEffect(() => {
-    setTamperByte(Math.floor(file.bytes.byteLength / 2))
-  }, [file])
-
-  const deferredByte = useDeferredValue(tamperByte)
-  const highlightIndex = useMemo(() => {
-    return findChunkAtOffset(result.chunks, deferredByte)
-  }, [result.chunks, deferredByte])
-
-  return (
-    <Section
-      id='chunker'
-      title='Chunker (FastCDC)'
-      description='Content-defined boundaries — chunks shift, but only locally, when bytes change.'
-    >
-      <p className='text-sm text-muted'>
-        {result.count} chunks · avg {formatBytes(result.avg)} ({formatBytes(result.min)}–{formatBytes(result.max)})
-      </p>
-      <ChunkStrip
-        chunks={result.chunks}
-        totalLen={file.bytes.byteLength}
-        ariaLabel='FastCDC chunks'
-        highlightIndex={highlightIndex ?? undefined}
-        markerByte={deferredByte}
-      />
-      <div className='space-y-2'>
-        <label className='block text-xs text-muted'>
-          Tamper byte: {tamperByte.toLocaleString()} of {(file.bytes.byteLength - 1).toLocaleString()}
-        </label>
-        <input
-          type='range'
-          min={0}
-          max={Math.max(0, file.bytes.byteLength - 1)}
-          step={1}
-          value={tamperByte}
-          onChange={(e) => setTamperByte(Number(e.target.value))}
-          className='w-full'
-          aria-label='Tamper byte offset'
-        />
-        <p className='text-xs text-muted'>
-          Edit byte {tamperByte.toLocaleString()} — only chunk {highlightIndex !== null ? highlightIndex : '–'} would
-          change. FastCDC's rolling hash keeps the rest stable.
-        </p>
-      </div>
-    </Section>
-  )
-}
-
-// --- section 2: chunked blob -------------------------------------------------
-
-function StreamingChunkedBlob({ file }: { file: FileAsset }) {
-  const api = useMkit()
-  const blob = useMemo(() => {
-    const r = api.chunked_blob_encode(file.bytes)
-    const chunks: StripChunk[] = Array.from({ length: r.chunk_count }, (_, i) => {
-      const c = r.chunk(i)!
-      return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
-    })
-    return { rootHash: r.root_hash_hex, bytesLen: r.bytes_len, count: r.chunk_count, chunks }
-  }, [api, file])
-
-  return (
-    <Section
-      id='chunked-blob'
-      title='ChunkedBlob'
-      description='Manifest object: the root hash commits to the list of chunk hashes.'
-    >
-      <div className='divide-y divide-hairline border-y border-hairline'>
-        <ObjectRow hash={blob.rootHash} label='ChunkedBlob root' meta={formatBytes(blob.bytesLen)} />
-        {blob.chunks.map((c, i) => (
-          <ObjectRow
-            key={`${c.offset}-${c.hash_hex}`}
-            hash={c.hash_hex}
-            label={`chunk ${i.toString().padStart(2, '0')}`}
-            meta={`offset ${c.offset.toLocaleString()} · ${formatBytes(c.len)}`}
-          />
-        ))}
-      </div>
-    </Section>
-  )
+// --- verified download ---------------------------------------------
+
+// Everything the stream needs, captured once when the user presses Start. Streaming a snapshot (not the live file)
+// keeps playback stable across a fresh Start. `ppm` is non-null in practice — the only file here is the generated
+// grid PPM — and gates the progressive canvas paint, but stays nullable: decodePpmHeader still returns null on
+// malformed bytes, and the guard is cheap.
+type DownloadSnapshot = {
+  bytes: Uint8Array
+  chunks: StripChunk[]
+  rootHex: string
+  outboard: Uint8Array
+  ppm: { width: number; height: number; pixelStart: number } | null
 }
 
-// --- section 3: delta --------------------------------------------------------
-
-function StreamingDelta({ current, previous }: { current: FileAsset; previous: FileAsset | null }) {
-  const api = useMkit()
-
-  const data = useMemo(() => {
-    if (!previous) return null
-    const prev = api.chunk_boundaries(previous.bytes)
-    const curr = api.chunk_boundaries(current.bytes)
-    const prevChunks: StripChunk[] = Array.from({ length: prev.chunk_count }, (_, i) => {
-      const c = prev.chunk(i)!
-      return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
-    })
-    const currChunks: StripChunk[] = Array.from({ length: curr.chunk_count }, (_, i) => {
-      const c = curr.chunk(i)!
-      return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
-    })
-    const prevHashes = new Set(prevChunks.map((c) => c.hash_hex))
-    const currHashes = new Set(currChunks.map((c) => c.hash_hex))
-    const prevDim = new Set<number>()
-    prevChunks.forEach((c, i) => {
-      if (currHashes.has(c.hash_hex)) prevDim.add(i)
-    })
-    const currDim = new Set<number>()
-    currChunks.forEach((c, i) => {
-      if (prevHashes.has(c.hash_hex)) currDim.add(i)
-    })
-    const summary = api.delta_encode(previous.bytes, current.bytes)
-    return {
-      prevChunks,
-      currChunks,
-      prevDim,
-      currDim,
-      bytesOnWire: summary.bytes_on_wire,
-      fullSize: summary.full_size,
-    }
-  }, [api, previous, current])
-
-  return (
-    <Section
-      id='delta'
-      title='Delta'
-      description='Wire format that ships only the new + changed chunks against a known base.'
-    >
-      {!data ? (
-        <p className='text-sm text-muted'>Replace the file to see the delta.</p>
-      ) : (
-        <>
-          <div className='space-y-1'>
-            <p className='text-xs text-muted'>Previous</p>
-            <ChunkStrip
-              chunks={data.prevChunks}
-              totalLen={previous!.bytes.byteLength}
-              ariaLabel='Previous file chunks'
-              dimSet={data.prevDim}
-            />
-          </div>
-          <div className='space-y-1'>
-            <p className='text-xs text-muted'>Current</p>
-            <ChunkStrip
-              chunks={data.currChunks}
-              totalLen={current.bytes.byteLength}
-              ariaLabel='Current file chunks'
-              dimSet={data.currDim}
-            />
-          </div>
-          <DeltaStat bytesOnWire={data.bytesOnWire} fullSize={data.fullSize} />
-        </>
-      )}
-    </Section>
-  )
+type DownloadState = {
+  phase: 'idle' | 'streaming' | 'done'
+  cursor: number // next chunk index to fetch
+  failing: boolean // the last attempt at `cursor` was rejected; stays true as long as the connection stays corrupted
+  verified: Set<number>
+  verifiedBytes: number // payload bytes that passed verification
+  wireBytes: number // everything sent: payloads + proofs, including rejected slices
+  wastedBytes: number // slices that failed verification and were thrown away
+  rejected: number // count of rejected attempts
 }
 
-function DeltaStat({ bytesOnWire, fullSize }: { bytesOnWire: number; fullSize: number }) {
-  const savings = fullSize > 0 ? (1 - bytesOnWire / fullSize) * 100 : 0
-  const positive = savings > 0
-  return (
-    <div className='rounded-lg border border-hairline bg-hairline/40 p-4 text-center'>
-      {positive ? (
-        <>
-          <div className='text-3xl font-semibold tabular-nums'>{Math.round(savings)}% saved</div>
-          <div className='text-sm text-muted'>
-            {formatBytes(bytesOnWire)} sent · {formatBytes(fullSize)} for a full re-upload
-          </div>
-        </>
-      ) : (
-        <>
-          <div className='text-base font-medium'>No shared chunks — full upload wins</div>
-          <div className='mt-1 text-sm text-muted'>
-            Delta is {formatBytes(bytesOnWire)} vs {formatBytes(fullSize)} full. Two files with no overlapping content
-            (e.g. unrelated images) ship the whole payload either way. Edit the same file to see savings.
-          </div>
-        </>
-      )}
-    </div>
-  )
+// Factory, not a shared constant: DownloadState holds a Set, and a module-level instance would alias the same Set
+// into every reset. Every caller gets fresh state.
+function freshDownloadState(): DownloadState {
+  return {
+    phase: 'idle',
+    cursor: 0,
+    failing: false,
+    verified: new Set(),
+    verifiedBytes: 0,
+    wireBytes: 0,
+    wastedBytes: 0,
+    rejected: 0,
+  }
 }
 
-// --- section 4: bao verify ---------------------------------------------------
+// One chunk per tick. The only file here is the generated grid (~9 chunks), so 600 ms × 9 ≈ 5.4 s — slow enough to
+// watch chunks verify one at a time.
+const TICK_MS = 600
 
-type StreamState = {
-  pending: Set<number>
-  verified: Set<number>
-  failed: Set<number>
-  cursor: number
-}
-const EMPTY_STREAM: StreamState = { pending: new Set(), verified: new Set(), failed: new Set(), cursor: 0 }
-
-function StreamingBaoVerify({ file }: { file: FileAsset }) {
+function StreamingVerifiedDownload({ file }: { file: FileAsset }) {
   const api = useMkit()
-  const baoData = useMemo(() => {
-    const enc = api.bao_encode(file.bytes)
-    const r = api.chunk_boundaries(file.bytes)
-    const chunks: StripChunk[] = Array.from({ length: r.chunk_count }, (_, i) => {
-      const c = r.chunk(i)!
-      return { offset: c.offset, len: c.len, hash_hex: c.hash_hex }
-    })
-    return {
-      hashHex: enc.hash_hex,
-      outboard: enc.outboard,
-      chunks,
-      bytesLen: file.bytes.byteLength,
-    }
-  }, [api, file])
-
-  const [streamState, setStreamState] = useState<StreamState>(EMPTY_STREAM)
-  const [tamperedIndex, setTamperedIndex] = useState<number | null>(null)
-  const [playing, setPlaying] = useState(false)
+  const [snapshot, setSnapshot] = useState<DownloadSnapshot | null>(null)
+  const [dl, setDl] = useState<DownloadState>(freshDownloadState)
+  const [corrupt, setCorrupt] = useState(false)
+  const corruptRef = useRef(corrupt) // read by the tick so toggling mid-stream applies to the next fetch
+  corruptRef.current = corrupt
+  // Verified payload bytes assembled at their file offsets — the paint source. Allocated only for PPM snapshots.
+  const assembledRef = useRef<Uint8Array | null>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  // Rows already blitted to the canvas, so a tick only draws the newly-completed span instead of repainting from
+  // scratch.
+  const paintedRowsRef = useRef(0)
+  // React strict-mode mounts twice; without this guard the auto-start effect would fire `start()` twice on first
+  // load, discarding the first snapshot. Ref survives the remount, so only the first real mount starts the stream.
+  const autoStartedRef = useRef(false)
+
+  // Clear the canvas to the same placeholder fill `FilePreview` uses for undecodable bytes, once per fresh snapshot.
+  // Keyed on `snapshot` (a new object every Start), never on `file` — see the tick effect below for why that split
+  // matters.
+  useEffect(() => {
+    if (!snapshot?.ppm) return
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+    // clearRect first: the placeholder fill is translucent, and on a restart it would otherwise just tint the
+    // previous run's image instead of erasing it.
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.fillStyle = 'rgba(0,0,0,0.04)'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  }, [snapshot])
+
+  // Capture everything the stream needs up front — the tick works only off the snapshot.
+  const start = () => {
+    const bytes = file.bytes
+    const r = api.chunk_boundaries(bytes)
+    const chunks = stripChunks(r)
+    const enc = api.bao_encode(bytes)
+    const ppm = decodePpmHeader(bytes)
+    assembledRef.current = ppm ? new Uint8Array(bytes.byteLength) : null
+    paintedRowsRef.current = 0
+    setSnapshot({ bytes, chunks, rootHex: enc.hash_hex, outboard: enc.outboard, ppm })
+    setDl({ ...freshDownloadState(), phase: 'streaming' })
+  }
 
-  // Reset state when the file changes.
+  // Auto-start on mount so the page demos itself on load, without waiting for a click.
   useEffect(() => {
-    setStreamState(EMPTY_STREAM)
-    setTamperedIndex(null)
-    setPlaying(false)
-  }, [file])
-
-  // Stream tick: once playing, advance one chunk every 200 ms. Pull the slice
-  // from the outboard, optionally corrupt one byte if we're at the tampered
-  // index, then verify.
+    if (autoStartedRef.current) return
+    autoStartedRef.current = true
+    start()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const reset = () => {
+    setDl(freshDownloadState())
+    setSnapshot(null)
+    assembledRef.current = null
+    paintedRowsRef.current = 0
+  }
+
+  // The tick: fetch the next chunk as a bao slice and verify it against the root. Sequential and single-flight by
+  // construction — the timeout only re-arms once `setDl` has landed a new state. While the connection is corrupted,
+  // EVERY attempt arrives tampered and is rejected: the stream stalls at the current chunk, waste piles up, and
+  // nothing unverified ever reaches the image. Fixing the connection lets the next attempt through and the stream
+  // resumes where it stalled.
   useEffect(() => {
-    if (!playing) return
-    if (streamState.cursor >= baoData.chunks.length) {
-      setPlaying(false)
-      return
-    }
-    const idx = streamState.cursor
-    const chunk = baoData.chunks[idx]!
-    setStreamState((s) => ({
-      ...s,
-      pending: new Set(s.pending).add(idx),
-    }))
+    if (dl.phase !== 'streaming' || !snapshot) return
     const t = setTimeout(() => {
+      const next: DownloadState = { ...dl, verified: new Set(dl.verified) }
+      const chunk = snapshot.chunks[next.cursor]!
+      let ok = false
       try {
-        const slice = api.bao_slice(baoData.outboard, file.bytes, chunk.offset, chunk.len)
+        const slice = api.bao_slice(snapshot.outboard, snapshot.bytes, chunk.offset, chunk.len)
+        next.wireBytes += slice.length
         const buf = new Uint8Array(slice)
-        if (tamperedIndex === idx && buf.length > 0) {
-          // Flip the last byte — Bao verifier reads slice format end-to-end so any payload mutation trips it.
-          buf[buf.length - 1] = (buf[buf.length - 1] ?? 0) ^ 0x01
+        if (corruptRef.current) buf[buf.length - 1] = (buf[buf.length - 1] ?? 0) ^ 0x01
+        const v = api.bao_verify_slice(snapshot.rootHex, buf, chunk.offset, chunk.len)
+        if (v.ok) {
+          if (assembledRef.current && v.bytes) assembledRef.current.set(v.bytes, chunk.offset)
+          ok = true
+        } else {
+          next.wastedBytes += slice.length
         }
-        const result = api.bao_verify_slice(baoData.hashHex, buf, chunk.offset, chunk.len)
-        setStreamState((s) => {
-          const pending = new Set(s.pending)
-          pending.delete(idx)
-          const verified = new Set(s.verified)
-          const failed = new Set(s.failed)
-          if (result.ok) verified.add(idx)
-          else failed.add(idx)
-          return { pending, verified, failed, cursor: s.cursor + 1 }
-        })
       } catch {
-        setStreamState((s) => {
-          const pending = new Set(s.pending)
-          pending.delete(idx)
-          const failed = new Set(s.failed)
-          failed.add(idx)
-          return { ...s, pending, failed, cursor: s.cursor + 1 }
-        })
+        // Slice extraction can only throw on internal errors; treat it like a rejected attempt.
+      }
+      if (ok) {
+        next.verified.add(next.cursor)
+        next.verifiedBytes += chunk.len
+        next.cursor += 1
+        next.failing = false
+        if (next.cursor >= snapshot.chunks.length) next.phase = 'done'
+      } else {
+        next.rejected += 1
+        next.failing = true
       }
-    }, 200)
-    return () => clearTimeout(t)
-  }, [playing, streamState.cursor, baoData, api, file.bytes, tamperedIndex])
 
-  const start = () => {
-    setStreamState(EMPTY_STREAM)
-    setPlaying(true)
-  }
-  const reset = () => {
-    setPlaying(false)
-    setStreamState(EMPTY_STREAM)
+      if (snapshot.ppm) {
+        const ctx = canvasRef.current?.getContext('2d')
+        const assembled = assembledRef.current
+        if (ctx && assembled) {
+          if (ok) {
+            // Verified bytes form a contiguous prefix (the stream is sequential), so paint only the newly-completed
+            // rows.
+            const { width, pixelStart } = snapshot.ppm
+            const prefixBytes =
+              next.cursor < snapshot.chunks.length ? snapshot.chunks[next.cursor]!.offset : snapshot.bytes.byteLength
+            const rowsDone = Math.floor(Math.max(0, prefixBytes - pixelStart) / (width * 3))
+            if (rowsDone > paintedRowsRef.current) {
+              paintRows(ctx, assembled, snapshot.ppm, paintedRowsRef.current, rowsDone)
+              paintedRowsRef.current = rowsDone
+            }
+          } else {
+            // Stall marker at the first unpainted row; the resumed stream's paint overwrites it.
+            ctx.fillStyle = 'rgba(220,38,38,0.85)'
+            ctx.fillRect(0, paintedRowsRef.current, snapshot.ppm.width, 2)
+          }
+        }
+      }
+
+      setDl(next)
+    }, TICK_MS)
+    return () => clearTimeout(t)
+  }, [dl, snapshot, api])
+
+  const total = snapshot?.bytes.byteLength ?? 0
+  const proofBytes = dl.wireBytes - dl.wastedBytes - dl.verifiedBytes
+  const startLabel =
+    dl.phase === 'streaming' ? 'Downloading…' : dl.phase === 'done' ? 'Download again' : 'Start download'
+
+  // Arming the toggle while idle would otherwise be invisible until the next Start — restart so the effect is
+  // immediate. corruptRef is written by the render this setCorrupt triggers, and the first tick fires no sooner than
+  // `TICK_MS` later, so start()'s fresh snapshot is in place well before corruptRef is read.
+  const toggleCorrupt = () => {
+    const next = !corrupt
+    setCorrupt(next)
+    if (next && dl.phase !== 'streaming') start()
   }
 
   return (
-    <Section
-      id='bao'
-      title='Bao streaming verify'
-      description='Each chunk verifies against the root as it lands — no need to wait for the full file.'
-    >
-      <p className='text-xs text-muted font-mono break-all'>
-        Bao root: {baoData.hashHex.slice(0, 16)}… · outboard {formatBytes(baoData.outboard.length)} for a{' '}
-        {formatBytes(baoData.bytesLen)} file
-      </p>
-      <ChunkStrip
-        chunks={baoData.chunks}
-        totalLen={baoData.bytesLen}
-        ariaLabel='Bao stream chunks'
-        verifiedSet={streamState.verified}
-        pendingSet={streamState.pending}
-        failedSet={streamState.failed}
-        tamperIndex={tamperedIndex ?? undefined}
-      />
-      <div className='flex flex-wrap items-center gap-3'>
+    <Section id='bao' title='Verified download (Bao)'>
+      {snapshot ? (
+        <p className='text-xs text-muted font-mono break-all'>
+          Bao root: {snapshot.rootHex.slice(0, 16)}… · outboard {formatBytes(snapshot.outboard.length)} (~6% of the
+          file)
+        </p>
+      ) : null}
+      {snapshot ? (
+        <p className='text-xs text-muted'>
+          {snapshot.chunks.length} content-defined chunks (FastCDC) · avg {formatBytes(total / snapshot.chunks.length)}
+        </p>
+      ) : null}
+      {snapshot?.ppm ? (
+        <canvas
+          ref={canvasRef}
+          width={snapshot.ppm.width}
+          height={snapshot.ppm.height}
+          role='img'
+          aria-label='Verified download preview — the image fills in as chunks verify'
+          className='size-40 rounded-sm bg-white'
+          style={{ boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)' }}
+        />
+      ) : null}
+      {snapshot ? (
+        <ChunkStrip
+          chunks={snapshot.chunks}
+          totalLen={snapshot.bytes.byteLength}
+          ariaLabel='Verified download chunks'
+          verifiedSet={dl.verified}
+          pendingSet={dl.phase === 'streaming' && !dl.failing ? new Set([dl.cursor]) : undefined}
+          failedSet={dl.failing ? new Set([dl.cursor]) : undefined}
+        />
+      ) : null}
+      {dl.failing ? (
+        <p role='status' className='text-xs text-red-700 dark:text-red-400'>
+          Chunk {dl.cursor} keeps arriving corrupted — rejected every attempt (hash mismatch). The stream is stalled;
+          nothing unverified reaches the image. Fix the connection to resume.
+        </p>
+      ) : null}
+      {snapshot ? (
+        <>
+          <CorruptSwitch checked={corrupt} onToggle={toggleCorrupt} />
+          <div className='flex flex-wrap items-center gap-3'>
+            <button
+              type='button'
+              onClick={start}
+              disabled={dl.phase === 'streaming'}
+              className='inline-flex h-10 items-center justify-center rounded-lg border border-hairline px-3 text-sm font-medium transition-colors hover:border-blue-500/50 active:translate-y-px disabled:opacity-40 sm:h-9'
+            >
+              {startLabel}
+            </button>
+            <button
+              type='button'
+              onClick={reset}
+              className='inline-flex h-10 items-center justify-center rounded-lg px-3 text-sm text-muted transition-opacity hover:opacity-70 active:translate-y-px sm:h-9'
+            >
+              Reset
+            </button>
+          </div>
+        </>
+      ) : (
         <button
           type='button'
           onClick={start}
-          disabled={playing}
-          className='inline-flex h-10 items-center justify-center rounded-lg border border-hairline px-3 text-sm font-medium transition-colors hover:border-blue-500/50 active:translate-y-px disabled:opacity-40 sm:h-9'
+          className='inline-flex h-11 items-center justify-center rounded-lg border border-fg bg-fg px-6 text-base font-medium text-bg transition-opacity hover:opacity-90 active:translate-y-px'
         >
-          {playing ? 'Streaming…' : 'Start stream'}
+          Start download
         </button>
-        <button
-          type='button'
-          onClick={reset}
-          className='inline-flex h-10 items-center justify-center rounded-lg px-3 text-sm text-muted transition-opacity hover:opacity-70 active:translate-y-px sm:h-9'
-        >
-          Reset
-        </button>
-        <label className='ml-2 flex items-center gap-2 text-xs text-muted'>
-          <span>Tamper chunk</span>
-          <select
-            value={tamperedIndex ?? ''}
-            onChange={(e) => setTamperedIndex(e.target.value === '' ? null : Number(e.target.value))}
-            className='rounded-md border border-hairline bg-transparent py-1 pl-2 pr-7 font-mono text-base sm:text-xs'
-          >
-            <option value=''>none</option>
-            {baoData.chunks.map((_, i) => (
-              <option key={i} value={i}>
-                {i}
-              </option>
-            ))}
-          </select>
-        </label>
-        {tamperedIndex !== null ? (
-          <span className='rounded-full border border-red-300 bg-red-50 px-2 py-0.5 text-xs text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-400'>
-            Will tamper chunk {tamperedIndex}
-          </span>
-        ) : null}
-      </div>
-      <p className='text-xs text-muted'>
-        Verified {streamState.verified.size} · failed {streamState.failed.size} · {baoData.chunks.length} total
-      </p>
+      )}
+      {snapshot ? (
+        <p className='text-xs text-muted tabular-nums'>
+          Verified {formatBytes(dl.verifiedBytes)} of {formatBytes(total)} · {formatBytes(dl.wireBytes)} on the wire ·{' '}
+          {formatBytes(proofBytes)} proof · {dl.rejected} rejected ({formatBytes(dl.wastedBytes)} wasted)
+        </p>
+      ) : null}
+      {dl.phase === 'done' ? (
+        <p className='text-xs text-muted'>Complete — every byte verified before it was shown.</p>
+      ) : null}
     </Section>
   )
 }
@@ -612,156 +366,51 @@ function Section({
 }: {
   id: string
   title: string
-  description: string
+  description?: string
   children: React.ReactNode
 }) {
   return (
     <section id={id} className='space-y-4 scroll-mt-24'>
       <header className='space-y-1'>
         <h2 className='text-sm font-semibold'>{title}</h2>
-        <p className='text-sm text-subtle'>{description}</p>
+        {description ? <p className='text-sm text-subtle'>{description}</p> : null}
       </header>
       {children}
     </section>
   )
 }
 
-function findChunkAtOffset(chunks: StripChunk[], offset: number): number | null {
-  for (let i = 0; i < chunks.length; i++) {
-    const c = chunks[i]!
-    if (offset >= c.offset && offset < c.offset + c.len) return i
-  }
-  return chunks.length > 0 ? chunks.length - 1 : null
-}
-
-// Build a 512×512 PPM (NetPBM P6) from a deterministic mulberry32 noise grid (256×256 cells × 2 px each), with
-// optional hue overrides on specific cells. PPM rather than PNG so a single-cell edit produces a contiguous
-// byte-range change (~12 bytes per cell at 2px×2px×3bytes) instead of zlib-cascading the change across the entire
-// compressed stream — which is the whole point of demonstrating content-defined chunking. PPM picked over BMP for
-// the smaller, format-agnostic header (`P6 width height 255` in ASCII) and natural RGB byte order.
-type CellOverride = { x: number; y: number; hue: number }
-
-// 512×512 raster (256 cells × 2 px) keeps ~12 FastCDC chunks (above the 4-chunk min that makes the strip readable)
-// while cutting wasm bandwidth-bound work — chunker, ChunkedBlob, delta, Bao — by 2.25× vs the prior 768-pixel grid.
-// Per-tick wasm budget drops below ~70 ms which restores 500 ms cadence with main-thread headroom.
-const GRID_CELLS = 256
-const GRID_CELL_PX = 2
-const GRID_SIZE = GRID_CELLS * GRID_CELL_PX
-
-// Module-scoped cache of the unmutated baseline RGBA grid, keyed by seed. The 65k `fillRect` baseline draw is the
-// dominant cost in the per-tick auto-edit loop; once we've computed the base for a given seed, every subsequent drift
-// tick just copies this buffer and writes the override pixels directly into the copy. Reset the cache by reloading
-// the page (the seed never changes during a session).
-const baselineCache = new Map<number, Uint8ClampedArray>()
-
-function buildBaseline(seed: number): Uint8ClampedArray {
-  const cached = baselineCache.get(seed)
-  if (cached) return cached
-  const canvas = document.createElement('canvas')
-  canvas.width = GRID_SIZE
-  canvas.height = GRID_SIZE
-  const ctx = canvas.getContext('2d')
-  if (!ctx) throw new Error('canvas 2d unavailable')
-  const rand = mulberry32(seed)
-  for (let y = 0; y < GRID_CELLS; y++) {
-    for (let x = 0; x < GRID_CELLS; x++) {
-      const hue = Math.floor(rand() * 360)
-      ctx.fillStyle = `hsl(${hue} 70% 60%)`
-      ctx.fillRect(x * GRID_CELL_PX, y * GRID_CELL_PX, GRID_CELL_PX, GRID_CELL_PX)
-    }
-  }
-  const data = ctx.getImageData(0, 0, GRID_SIZE, GRID_SIZE).data
-  baselineCache.set(seed, data)
-  return data
-}
-
-// Resolve `hsl(h 70% 60%)` to packed RGBA (4 bytes) once per override so the per-pixel write loop is straight integer
-// stores rather than a string parse + canvas state shuffle.
-function hueToRgba(hue: number): [number, number, number] {
-  // HSL → RGB at S=70%, L=60%. Math straight from the CSS-color spec.
-  const s = 0.7
-  const l = 0.6
-  const c = (1 - Math.abs(2 * l - 1)) * s
-  const hp = (((hue % 360) + 360) % 360) / 60
-  const x = c * (1 - Math.abs((hp % 2) - 1))
-  let r1 = 0
-  let g1 = 0
-  let b1 = 0
-  if (hp < 1) {
-    r1 = c
-    g1 = x
-  } else if (hp < 2) {
-    r1 = x
-    g1 = c
-  } else if (hp < 3) {
-    g1 = c
-    b1 = x
-  } else if (hp < 4) {
-    g1 = x
-    b1 = c
-  } else if (hp < 5) {
-    r1 = x
-    b1 = c
-  } else {
-    r1 = c
-    b1 = x
-  }
-  const m = l - c / 2
-  return [Math.round((r1 + m) * 255), Math.round((g1 + m) * 255), Math.round((b1 + m) * 255)]
-}
-
-function generateDefaultPpm(seed: number, overrides: CellOverride[]): FileAsset {
-  const base = buildBaseline(seed)
-  const data = new Uint8ClampedArray(base) // copy so mutations don't pollute the cached baseline
-  for (const o of overrides) {
-    const [r, g, b] = hueToRgba(o.hue)
-    const x0 = o.x * GRID_CELL_PX
-    const y0 = o.y * GRID_CELL_PX
-    for (let dy = 0; dy < GRID_CELL_PX; dy++) {
-      for (let dx = 0; dx < GRID_CELL_PX; dx++) {
-        const i = ((y0 + dy) * GRID_SIZE + (x0 + dx)) * 4
-        data[i] = r
-        data[i + 1] = g
-        data[i + 2] = b
-        // alpha stays 255 from the canvas baseline
-      }
-    }
-  }
-  const bytes = encodePpm(data, GRID_SIZE, GRID_SIZE)
-  return { name: DEFAULT_NAME, bytes, source: 'default' }
-}
-
-// Push one new override onto the running list and re-render. Cell coordinate is uniformly random across the grid.
-function driftDefaultPpm(seed: number, overrides: CellOverride[]): FileAsset {
-  overrides.push({
-    x: Math.floor(Math.random() * GRID_CELLS),
-    y: Math.floor(Math.random() * GRID_CELLS),
-    hue: Math.floor(Math.random() * 360),
-  })
-  return generateDefaultPpm(seed, overrides)
-}
-
-// Flip 1–3 bytes outside any recognised image header. Header preservation keeps a real PNG/JPEG/PPM upload still
-// readable as that format if the user opens it elsewhere; the chunker doesn't care either way but the courtesy
-// matters when a user drops in their own file.
-function mutateRandomBytes(asset: FileAsset): FileAsset {
-  const bytes = new Uint8Array(asset.bytes)
-  const headerSkip = detectHeaderSize(bytes)
-  const range = bytes.length - headerSkip
-  if (range <= 0) return asset
-  const flips = 1 + Math.floor(Math.random() * 3)
-  for (let i = 0; i < flips; i++) {
-    const offset = headerSkip + Math.floor(Math.random() * range)
-    // XOR with a non-zero mask so the byte definitely changes.
-    bytes[offset] = ((bytes[offset] ?? 0) ^ (1 + Math.floor(Math.random() * 255))) & 0xff
-  }
-  return { ...asset, bytes }
+// Minimal accessible switch — no switch component exists elsewhere in the codebase (theme-toggle is a plain button).
+// `role='switch'` + `aria-checked` gives it the right semantics; the pill track and sliding thumb are plain divs.
+function CorruptSwitch({ checked, onToggle }: { checked: boolean; onToggle: () => void }) {
+  return (
+    // Track, thumb, and label all live inside the switch button: the visible text is the accessible name, and
+    // clicking the label toggles — a bare unnamed pill fails both.
+    <button
+      type='button'
+      role='switch'
+      aria-checked={checked}
+      onClick={onToggle}
+      className='group flex items-center gap-2'
+    >
+      <span
+        className={`inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors ${
+          checked ? 'bg-red-600' : 'bg-hairline'
+        }`}
+      >
+        <span
+          aria-hidden
+          className={`size-4 rounded-full bg-white transition-transform ${checked ? 'translate-x-4' : 'translate-x-0'}`}
+        />
+      </span>
+      <span className='text-sm transition-opacity group-hover:opacity-80'>Corrupt the connection</span>
+    </button>
+  )
 }
 
-// 96 px square preview of the current file. PPM is parsed and blitted directly via putImageData on an offscreen
-// canvas, then downscaled with `drawImage`; everything else is rendered through a Blob URL `<img>` decode. Both paths
-// fall back to a hairline placeholder if decoding fails (e.g. non-image upload). Small enough to redraw on every
-// auto-edit tick without breaking the budget.
+// 96 px square preview of the current file. The file here is always our generated PPM: parsed and blitted directly
+// via putImageData on an offscreen canvas, then downscaled with `drawImage`. Falls back to a hairline placeholder if
+// decoding fails.
 function FilePreview({ asset }: { asset: FileAsset }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -770,9 +419,9 @@ function FilePreview({ asset }: { asset: FileAsset }) {
     if (!canvas) return
     const ctx = canvas.getContext('2d')
     if (!ctx) return
-    let cancelled = false
 
-    const drawPlaceholder = () => {
+    const ppm = decodePpmHeader(asset.bytes)
+    if (!ppm) {
       ctx.fillStyle = 'rgba(0,0,0,0.04)'
       ctx.fillRect(0, 0, canvas.width, canvas.height)
       ctx.fillStyle = 'rgba(0,0,0,0.3)'
@@ -780,54 +429,24 @@ function FilePreview({ asset }: { asset: FileAsset }) {
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       ctx.fillText('binary', canvas.width / 2, canvas.height / 2)
-    }
-
-    const ppm = decodePpmHeader(asset.bytes)
-    if (ppm) {
-      const { width, height, pixelStart } = ppm
-      const rgba = new Uint8ClampedArray(width * height * 4)
-      const src = asset.bytes
-      for (let i = 0, p = pixelStart; i < width * height; i++) {
-        rgba[i * 4] = src[p++]!
-        rgba[i * 4 + 1] = src[p++]!
-        rgba[i * 4 + 2] = src[p++]!
-        rgba[i * 4 + 3] = 255
-      }
-      const off = document.createElement('canvas')
-      off.width = width
-      off.height = height
-      off.getContext('2d')?.putImageData(new ImageData(rgba, width, height), 0, 0)
-      ctx.imageSmoothingEnabled = true
-      ctx.imageSmoothingQuality = 'low'
-      ctx.drawImage(off, 0, 0, canvas.width, canvas.height)
       return
     }
-
-    // Decode anything <Image> can handle — PNG, JPEG, GIF, WebP, BMP. Copy into a fresh ArrayBuffer-backed view so
-    // the Blob constructor's BlobPart type (which rejects Uint8Array<SharedArrayBuffer>) is satisfied.
-    const owned = new Uint8Array(asset.bytes.byteLength)
-    owned.set(asset.bytes)
-    const blob = new Blob([owned.buffer])
-    const url = URL.createObjectURL(blob)
-    const img = new Image()
-    img.onload = () => {
-      if (cancelled) return
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.imageSmoothingEnabled = true
-      ctx.imageSmoothingQuality = 'low'
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-      URL.revokeObjectURL(url)
-    }
-    img.onerror = () => {
-      if (!cancelled) drawPlaceholder()
-      URL.revokeObjectURL(url)
-    }
-    img.src = url
-
-    return () => {
-      cancelled = true
-      URL.revokeObjectURL(url)
+    const { width, height, pixelStart } = ppm
+    const rgba = new Uint8ClampedArray(width * height * 4)
+    const src = asset.bytes
+    for (let i = 0, p = pixelStart; i < width * height; i++) {
+      rgba[i * 4] = src[p++]!
+      rgba[i * 4 + 1] = src[p++]!
+      rgba[i * 4 + 2] = src[p++]!
+      rgba[i * 4 + 3] = 255
     }
+    const off = document.createElement('canvas')
+    off.width = width
+    off.height = height
+    off.getContext('2d')?.putImageData(new ImageData(rgba, width, height), 0, 0)
+    ctx.imageSmoothingEnabled = true
+    ctx.imageSmoothingQuality = 'low'
+    ctx.drawImage(off, 0, 0, canvas.width, canvas.height)
   }, [asset])
 
   return (
@@ -840,85 +459,3 @@ function FilePreview({ asset }: { asset: FileAsset }) {
     />
   )
 }
-
-// Walk the three ASCII whitespace-separated tokens after the `P6` magic, returning width/height and the byte offset
-// where pixel data starts. Tolerates `#` comments per the spec. Returns null on anything else.
-function decodePpmHeader(bytes: Uint8Array): { width: number; height: number; pixelStart: number } | null {
-  if (bytes.length < 11 || bytes[0] !== 0x50 || bytes[1] !== 0x36) return null
-  let p = 2
-  const readToken = (): string | null => {
-    // Skip whitespace and `#`-prefixed comment lines.
-    while (p < bytes.length) {
-      const b = bytes[p]!
-      if (b === 0x20 || b === 0x09 || b === 0x0a || b === 0x0d) {
-        p++
-        continue
-      }
-      if (b === 0x23) {
-        while (p < bytes.length && bytes[p] !== 0x0a) p++
-        continue
-      }
-      break
-    }
-    const start = p
-    while (p < bytes.length) {
-      const b = bytes[p]!
-      if (b === 0x20 || b === 0x09 || b === 0x0a || b === 0x0d) break
-      p++
-    }
-    if (p === start) return null
-    return new TextDecoder().decode(bytes.subarray(start, p))
-  }
-  const widthTok = readToken()
-  const heightTok = readToken()
-  const maxvalTok = readToken()
-  if (!widthTok || !heightTok || !maxvalTok) return null
-  // Spec: exactly one whitespace char follows maxval before the binary pixel block starts.
-  if (p < bytes.length) p++
-  const width = Number(widthTok)
-  const height = Number(heightTok)
-  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return null
-  if (bytes.length < p + width * height * 3) return null
-  return { width, height, pixelStart: p }
-}
-
-function detectHeaderSize(bytes: Uint8Array): number {
-  if (bytes.length < 8) return 0
-  // PNG: 89 50 4E 47 0D 0A 1A 0A
-  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) return 8
-  // PPM (P6): "P6\n<width> <height>\n255\n" — three ASCII lines, length varies. Walk until we've passed three
-  // newlines so a random byte flip lands strictly in the pixel body.
-  if (bytes[0] === 0x50 && bytes[1] === 0x36) {
-    let nl = 0
-    for (let i = 2; i < Math.min(bytes.length, 64); i++) {
-      if (bytes[i] === 0x0a) {
-        nl++
-        if (nl === 3) return i + 1
-      }
-    }
-    return 0
-  }
-  // JPEG: FF D8 ... start; conservative skip of first 4 bytes (SOI + first marker)
-  if (bytes[0] === 0xff && bytes[1] === 0xd8) return 4
-  return 0
-}
-
-// Encode RGBA pixels to a NetPBM P6 (binary PPM) blob. Header is three ASCII lines — magic `P6`, dimensions, and
-// max-component value 255 — followed by raw RGB triplets in scanline order. No row padding, no endian-flipped bytes,
-// no quirks. ~15-byte header for our 512×512 grid.
-function encodePpm(rgba: Uint8ClampedArray, width: number, height: number): Uint8Array {
-  const headerStr = `P6\n${width} ${height}\n255\n`
-  const headerBytes = new TextEncoder().encode(headerStr)
-  const pixelBytes = width * height * 3
-  const out = new Uint8Array(headerBytes.length + pixelBytes)
-  out.set(headerBytes, 0)
-  let p = headerBytes.length
-  const total = width * height
-  for (let i = 0; i < total; i++) {
-    const j = i * 4
-    out[p++] = rgba[j]!
-    out[p++] = rgba[j + 1]!
-    out[p++] = rgba[j + 2]!
-  }
-  return out
-}
diff --git a/apps/web/src/lib/ppm.ts b/apps/web/src/lib/ppm.ts
new file mode 100644
index 00000000..d13f3bfd
--- /dev/null
+++ b/apps/web/src/lib/ppm.ts
@@ -0,0 +1,99 @@
+import { mulberry32 } from './grid-svg'
+
+export type FileAsset = { name: string; bytes: Uint8Array }
+
+const DEFAULT_NAME = 'grid.ppm'
+
+// Build a 512×512 PPM (NetPBM P6) from a deterministic mulberry32 noise grid (256×256 cells × 2 px each). PPM rather
+// than PNG so the byte layout stays a flat, uncompressed grid — the whole point of demonstrating content-defined
+// chunking on something format-agnostic. PPM picked over BMP for the smaller, format-agnostic header
+// (`P6 width height 255` in ASCII) and natural RGB byte order.
+
+// 512×512 raster (256 cells × 2 px) keeps chunk counts and wasm bandwidth-bound work (chunker, Bao) modest so the
+// demo page stays responsive.
+const GRID_CELLS = 256
+const GRID_CELL_PX = 2
+const GRID_SIZE = GRID_CELLS * GRID_CELL_PX
+
+// Render the deterministic grid and encode it as a PPM. Called once per session — the caller (`StreamingDemo`'s
+// `generatedRef`) caches the result across the strict-mode double mount, so there's no need for a module-level cache
+// here.
+export function generateDefaultPpm(seed: number): FileAsset {
+  const canvas = document.createElement('canvas')
+  canvas.width = GRID_SIZE
+  canvas.height = GRID_SIZE
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('canvas 2d unavailable')
+  const rand = mulberry32(seed)
+  for (let y = 0; y < GRID_CELLS; y++) {
+    for (let x = 0; x < GRID_CELLS; x++) {
+      const hue = Math.floor(rand() * 360)
+      ctx.fillStyle = `hsl(${hue} 70% 60%)`
+      ctx.fillRect(x * GRID_CELL_PX, y * GRID_CELL_PX, GRID_CELL_PX, GRID_CELL_PX)
+    }
+  }
+  const data = ctx.getImageData(0, 0, GRID_SIZE, GRID_SIZE).data
+  const bytes = encodePpm(data, GRID_SIZE, GRID_SIZE)
+  return { name: DEFAULT_NAME, bytes }
+}
+
+// Walk the three ASCII whitespace-separated tokens after the `P6` magic, returning width/height and the byte offset
+// where pixel data starts. Tolerates `#` comments per the spec. Returns null on anything else.
+export function decodePpmHeader(bytes: Uint8Array): { width: number; height: number; pixelStart: number } | null {
+  if (bytes.length < 11 || bytes[0] !== 0x50 || bytes[1] !== 0x36) return null
+  let p = 2
+  const readToken = (): string | null => {
+    // Skip whitespace and `#`-prefixed comment lines.
+    while (p < bytes.length) {
+      const b = bytes[p]!
+      if (b === 0x20 || b === 0x09 || b === 0x0a || b === 0x0d) {
+        p++
+        continue
+      }
+      if (b === 0x23) {
+        while (p < bytes.length && bytes[p] !== 0x0a) p++
+        continue
+      }
+      break
+    }
+    const start = p
+    while (p < bytes.length) {
+      const b = bytes[p]!
+      if (b === 0x20 || b === 0x09 || b === 0x0a || b === 0x0d) break
+      p++
+    }
+    if (p === start) return null
+    return new TextDecoder().decode(bytes.subarray(start, p))
+  }
+  const widthTok = readToken()
+  const heightTok = readToken()
+  const maxvalTok = readToken()
+  if (!widthTok || !heightTok || !maxvalTok) return null
+  // Spec: exactly one whitespace char follows maxval before the binary pixel block starts.
+  if (p < bytes.length) p++
+  const width = Number(widthTok)
+  const height = Number(heightTok)
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return null
+  if (bytes.length < p + width * height * 3) return null
+  return { width, height, pixelStart: p }
+}
+
+// Encode RGBA pixels to a NetPBM P6 (binary PPM) blob. Header is three ASCII lines — magic `P6`, dimensions, and
+// max-component value 255 — followed by raw RGB triplets in scanline order. No row padding, no endian-flipped bytes,
+// no quirks. ~15-byte header for our 512×512 grid.
+function encodePpm(rgba: Uint8ClampedArray, width: number, height: number): Uint8Array {
+  const headerStr = `P6\n${width} ${height}\n255\n`
+  const headerBytes = new TextEncoder().encode(headerStr)
+  const pixelBytes = width * height * 3
+  const out = new Uint8Array(headerBytes.length + pixelBytes)
+  out.set(headerBytes, 0)
+  let p = headerBytes.length
+  const total = width * height
+  for (let i = 0; i < total; i++) {
+    const j = i * 4
+    out[p++] = rgba[j]!
+    out[p++] = rgba[j + 1]!
+    out[p++] = rgba[j + 2]!
+  }
+  return out
+}
diff --git a/apps/web/src/pages/demos.tsx b/apps/web/src/pages/concepts.tsx
similarity index 65%
rename from apps/web/src/pages/demos.tsx
rename to apps/web/src/pages/concepts.tsx
index 41dc2d61..cdef7b7b 100644
--- a/apps/web/src/pages/demos.tsx
+++ b/apps/web/src/pages/concepts.tsx
@@ -6,9 +6,9 @@ export default function DemosPage() {
   return (
     <div className='space-y-8'>
       <Seo
-        title='mkit — demos'
-        description='Six interactive demos of mkit in one place: BLAKE3 content addressing, the Merkle tree, Ed25519 signatures, content-defined chunked streaming, pushes, and signed attestations — all running right in your browser.'
-        path='/demos'
+        title='mkit — concepts'
+        description='Six interactive concepts of mkit in one place: BLAKE3 content addressing, the Merkle tree, Ed25519 signatures, content-defined chunked streaming, pushes, and signed attestations — all running right in your browser.'
+        path='/concepts'
         card='See it work'
       />
       <DemosTabs />
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 6840b5eb..a5f0171e 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -91,8 +91,8 @@ export default function HomePage() {
 
       <ul className='grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4'>
         <Demo
-          to='/demos'
-          title='demos'
+          to='/concepts'
+          title='concepts'
           body='Six playgrounds in one: hashing, the Merkle tree, signatures, chunked streaming, pushes, and attestations — each one live, right in your browser.'
         />
         <Demo
@@ -131,12 +131,12 @@ function InstallCommand({ command }: { command: string }) {
 
 // `to` is narrowed to the concrete route literals Waku emits — a plain
 // `string` is too wide for Waku 1.0.0-alpha.8's typed Link.
-type DemoRoute = '/demos' | '/performance' | '/parity' | '/multiplayer'
+type DemoRoute = '/concepts' | '/performance' | '/parity' | '/multiplayer'
 
 // Soft per-tile mesh gradients: layered low-alpha radial blooms over the
 // white card so text stays legible while each tile reads distinct.
 const MESH: Record<DemoRoute, string> = {
-  '/demos':
+  '/concepts':
     'radial-gradient(at 18% 22%, rgba(99,102,241,0.10), transparent 55%), radial-gradient(at 82% 12%, rgba(56,189,248,0.08), transparent 55%)',
   '/performance':
     'radial-gradient(at 18% 18%, rgba(251,146,60,0.09), transparent 55%), radial-gradient(at 82% 80%, rgba(248,113,113,0.08), transparent 55%)',
@@ -148,7 +148,7 @@ const MESH: Record<DemoRoute, string> = {
 
 // Per-tile accent colour (solid hue echoing each tile's mesh) for the header shape.
 const SHAPE_COLOR: Record<DemoRoute, string> = {
-  '/demos': 'rgb(99,102,241)',
+  '/concepts': 'rgb(99,102,241)',
   '/performance': 'rgb(249,115,22)',
   '/parity': 'rgb(139,92,246)',
   '/multiplayer': 'rgb(236,72,153)',
@@ -166,7 +166,7 @@ function TileShape({ to }: { to: DemoRoute }) {
   } as const
   const shape = (() => {
     switch (to) {
-      case '/demos':
+      case '/concepts':
         return (
           <>
             <rect x='3' y='3' width='4' height='4' rx='1' />
diff --git a/apps/web/src/redirects.test.ts b/apps/web/src/redirects.test.ts
index c0c81432..4f4ab636 100644
--- a/apps/web/src/redirects.test.ts
+++ b/apps/web/src/redirects.test.ts
@@ -3,23 +3,24 @@ import { redirectMiddleware, resolveRedirect } from './redirects'
 
 describe('resolveRedirect', () => {
   it.each([
-    ['/hash', '/demos#hash'],
-    ['/tree', '/demos#tree'],
-    ['/sign', '/demos#sign'],
-    ['/streaming', '/demos#streaming'],
-    ['/push', '/demos#push'],
-    ['/attest', '/demos#attest'],
+    ['/hash', '/concepts#hash'],
+    ['/tree', '/concepts#tree'],
+    ['/sign', '/concepts#sign'],
+    ['/streaming', '/concepts#streaming'],
+    ['/push', '/concepts#push'],
+    ['/attest', '/concepts#attest'],
+    ['/demos', '/concepts'],
   ])('maps deleted route %s to %s', (from, to) => {
     expect(resolveRedirect(from)).toBe(to)
   })
 
   it('tolerates a single trailing slash', () => {
-    expect(resolveRedirect('/sign/')).toBe('/demos#sign')
+    expect(resolveRedirect('/sign/')).toBe('/concepts#sign')
   })
 
   it('leaves live and unknown routes alone', () => {
     expect(resolveRedirect('/')).toBeNull()
-    expect(resolveRedirect('/demos')).toBeNull()
+    expect(resolveRedirect('/concepts')).toBeNull()
     expect(resolveRedirect('/multiplayer')).toBeNull()
     expect(resolveRedirect('/hash/extra')).toBeNull()
   })
@@ -41,11 +42,19 @@ describe('redirectMiddleware', () => {
     expect(nextCalled).toBe(false)
     expect(res).toBeInstanceOf(Response)
     expect((res as Response).status).toBe(301)
-    expect((res as Response).headers.get('Location')).toBe('/demos#streaming')
+    expect((res as Response).headers.get('Location')).toBe('/concepts#streaming')
   })
 
-  it('delegates to next for a live route', async () => {
+  it('301s the renamed /demos page to /concepts without calling next', async () => {
     const { res, nextCalled } = await run('/demos')
+    expect(nextCalled).toBe(false)
+    expect(res).toBeInstanceOf(Response)
+    expect((res as Response).status).toBe(301)
+    expect((res as Response).headers.get('Location')).toBe('/concepts')
+  })
+
+  it('delegates to next for a live route', async () => {
+    const { res, nextCalled } = await run('/concepts')
     expect(nextCalled).toBe(true)
     expect(res).toBeUndefined()
   })
diff --git a/apps/web/src/redirects.ts b/apps/web/src/redirects.ts
index 001d752b..81b9510f 100644
--- a/apps/web/src/redirects.ts
+++ b/apps/web/src/redirects.ts
@@ -1,21 +1,26 @@
 // Legacy-route redirects.
 //
 // The hash/sign/tree/streaming/push/attest demos used to each have their own
-// page; they are now tabs on `/demos` (see components/demos-tabs.tsx, which
+// page; they are now tabs on `/concepts` (see components/demos-tabs.tsx, which
 // keys off `#hash | #tree | #sign | #streaming | #push | #attest`). The old
 // pages were deleted, so those paths no longer prerender to a static asset —
 // which means Cloudflare hands the request to the Worker's Hono app, where this
 // middleware can 301 it to the new anchor instead of letting the RSC router
 // 404. Permanent (301) because the old URLs are gone for good: search engines
 // and any existing inbound links should learn the new location.
+//
+// `/demos` itself was renamed to `/concepts`; it 301s the same way. Fragments
+// aren't visible server-side, but browsers carry them over automatically on a
+// same-path-shape redirect, so a plain path 301 is enough.
 
 const REDIRECTS: Record<string, string> = {
-  '/hash': '/demos#hash',
-  '/tree': '/demos#tree',
-  '/sign': '/demos#sign',
-  '/streaming': '/demos#streaming',
-  '/push': '/demos#push',
-  '/attest': '/demos#attest',
+  '/hash': '/concepts#hash',
+  '/tree': '/concepts#tree',
+  '/sign': '/concepts#sign',
+  '/streaming': '/concepts#streaming',
+  '/push': '/concepts#push',
+  '/attest': '/concepts#attest',
+  '/demos': '/concepts',
 }
 
 /**
@@ -33,7 +38,8 @@ export function resolveRedirect(pathname: string): string | null {
 type RedirectContext = { req: { raw: Request } }
 
 /**
- * Cloudflare-adapter middleware factory that 301s the deleted demo routes to their `/demos#…` anchors.
+ * Cloudflare-adapter middleware factory that 301s the deleted demo routes to their `/concepts#…` anchors (and the
+ * renamed `/demos` page to `/concepts`).
  *
  * Like the installer sniff, this must be wired via the adapter's `middlewareFns` option (see waku.server.tsx): it runs
  * inside the deployed Worker's Hono app, before the RSC page router, so it intercepts a path that no longer has a