diff --git a/src/lib/napkin/MathMap.svelte b/src/lib/napkin/MathMap.svelte
new file mode 100644
index 0000000..2750924
--- /dev/null
+++ b/src/lib/napkin/MathMap.svelte
@@ -0,0 +1,1331 @@
+<script lang="ts" module>
+	import type { MathStatus } from '#lib/math.js';
+	import type Circle from 'lucide-svelte/icons/circle';
+
+	export type MapChapter = {
+		key: string;
+		partKey: string;
+		title: string;
+		exerciseCount: number | null;
+		exercisesDone: number;
+		prereqs: string[];
+	};
+	export type MapPart = { key: string; num: number | null; title: string };
+	export type StatusStyle = Record<MathStatus, { color: string; icon: typeof Circle }>;
+</script>
+
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import { STATUS_LABEL } from '#lib/math.js';
+	import { buildMapLayout, PART_ACCENT, PART_LINKS, type MapRegion } from './map';
+	import Plus from 'lucide-svelte/icons/plus';
+	import Minus from 'lucide-svelte/icons/minus';
+	import Maximize from 'lucide-svelte/icons/maximize';
+	import Target from 'lucide-svelte/icons/target';
+	import Search from 'lucide-svelte/icons/search';
+	import X from 'lucide-svelte/icons/x';
+
+	let {
+		parts,
+		chapters,
+		statusOf,
+		status,
+		currentKey = null,
+		filter = 'all',
+		selected = $bindable(null),
+		panel
+	}: {
+		parts: MapPart[];
+		chapters: MapChapter[];
+		statusOf: (c: MapChapter) => MathStatus;
+		status: StatusStyle;
+		currentKey?: string | null;
+		filter?: MathStatus | 'all';
+		selected?: string | null;
+		panel: Snippet<[string]>;
+	} = $props();
+
+	const layout = $derived(
+		buildMapLayout(
+			parts.map((p) => ({
+				key: p.key,
+				chapters: chapters.filter((c) => c.partKey === p.key).map((c) => c.key)
+			}))
+		)
+	);
+	const chapterByKey = $derived(new Map(chapters.map((c) => [c.key, c])));
+	const partByKey = $derived(new Map(parts.map((p) => [p.key, p])));
+	const nodeByKey = $derived(new Map(layout.nodes.map((n) => [n.key, n])));
+	const regionByKey = $derived(new Map(layout.regions.map((r) => [r.key, r])));
+
+	// View transform: screen = world * k + (tx, ty).
+	let k = $state(0.5);
+	let tx = $state(0);
+	let ty = $state(0);
+	let cw = $state(0);
+	let ch = $state(0);
+	let ready = $state(false);
+	let svg: SVGSVGElement | undefined = $state();
+
+	const MIN_K = 0.08;
+	const MAX_K = 2.5;
+	const PAD = 40;
+	const clampK = (v: number) => Math.min(MAX_K, Math.max(MIN_K, v));
+	const far = $derived(k < 0.42);
+	const mobile = $derived(cw > 0 && cw < 720);
+	/** Screen space the panel covers, so focusing a node keeps it visible next to the panel. */
+	const panelInset = $derived(
+		selected
+			? mobile
+				? { right: 0, bottom: ch * 0.55 }
+				: { right: 380, bottom: 0 }
+			: { right: 0, bottom: 0 }
+	);
+
+	let anim = 0;
+	function animateTo(nk: number, ntx: number, nty: number, ms = 320) {
+		cancelAnimationFrame(anim);
+		if (matchMedia('(prefers-reduced-motion: reduce)').matches) ms = 0;
+		const [k0, x0, y0] = [k, tx, ty];
+		const t0 = performance.now();
+		const step = (t: number) => {
+			const p = ms ? Math.min(1, (t - t0) / ms) : 1;
+			const e = 1 - Math.pow(1 - p, 3);
+			k = k0 + (nk - k0) * e;
+			tx = x0 + (ntx - x0) * e;
+			ty = y0 + (nty - y0) * e;
+			if (p < 1) anim = requestAnimationFrame(step);
+		};
+		anim = requestAnimationFrame(step);
+	}
+	/** Fit a world-space box into the visible part of the map. */
+	function fitBox(x: number, y: number, w: number, h: number, maxK = MAX_K, animate = true) {
+		const vw = cw - panelInset.right;
+		const vh = ch - panelInset.bottom;
+		if (vw <= 0 || vh <= 0) return;
+		const nk = clampK(Math.min((vw - PAD * 2) / w, (vh - PAD * 2) / h, maxK));
+		const ntx = (vw - w * nk) / 2 - x * nk;
+		const nty = (vh - h * nk) / 2 - y * nk;
+		if (animate) animateTo(nk, ntx, nty);
+		else [k, tx, ty] = [nk, ntx, nty];
+	}
+	export function fit(animate = true) {
+		fitBox(0, 0, layout.width, layout.height, 1, animate);
+	}
+	function fitRegion(r: MapRegion) {
+		fitBox(r.x - 40, r.y - 40, r.w + 80, r.h + 80, 1.3);
+	}
+	/** Centre a chapter (at a readable zoom) and open its panel. */
+	export function focusChapter(key: string, open = true) {
+		const n = nodeByKey.get(key);
+		if (!n) return;
+		if (open) selected = key;
+		const nk = Math.min(Math.max(k, mobile ? 0.8 : 0.95), mobile ? 1 : 1.3);
+		// Wait a frame so the panel is laid out, then centre in what is actually visible
+		// (beside the side panel, above the bottom sheet, inside the viewport).
+		requestAnimationFrame(() => {
+			const v = visibleBox();
+			animateTo(nk, v.x - (n.x + n.w / 2) * nk, v.y - (n.y + n.h / 2) * nk);
+		});
+	}
+	/** Centre of the unobstructed part of the map, in map-local screen px. */
+	function visibleBox() {
+		if (!svg) return { x: cw / 2, y: ch / 2 };
+		const r = svg.getBoundingClientRect();
+		let right = r.width;
+		let bottom = Math.min(r.height, innerHeight - r.top);
+		const top = Math.max(0, -r.top) + 48;
+		// Sizes, not rects: the panel may still be mid slide-in.
+		const panelEl = svg.parentElement?.querySelector<HTMLElement>('.panel');
+		if (panelEl) {
+			if (mobile) bottom = Math.min(bottom, innerHeight - panelEl.offsetHeight - r.top);
+			else right = Math.min(right, r.width - panelEl.offsetWidth);
+		}
+		return { x: right / 2, y: bottom > top + 40 ? (top + bottom) / 2 : ch / 2 };
+	}
+	function zoomAt(px: number, py: number, factor: number, animate = false) {
+		const nk = clampK(k * factor);
+		const ntx = px - ((px - tx) / k) * nk;
+		const nty = py - ((py - ty) / k) * nk;
+		if (animate) animateTo(nk, ntx, nty, 180);
+		else [k, tx, ty] = [nk, ntx, nty];
+	}
+	const zoomBy = (f: number) =>
+		zoomAt((cw - panelInset.right) / 2, (ch - panelInset.bottom) / 2, f, true);
+
+	/** Start readable: fit the width (within limits), roots at the top, the current chapter in view. */
+	function initialView() {
+		const nk = clampK(Math.min(1, Math.max(cw < 720 ? 0.55 : 0.45, (cw - PAD * 2) / layout.width)));
+		if (layout.width * nk + PAD * 2 <= cw && layout.height * nk + PAD * 2 <= ch) return fit(false);
+		let ntx = (cw - layout.width * nk) / 2;
+		let nty = PAD;
+		const n = currentKey ? nodeByKey.get(currentKey) : undefined;
+		if (n) {
+			const cx = n.x + n.w / 2;
+			const cy = n.y + n.h / 2;
+			if (cx * nk + ntx < PAD || cx * nk + ntx > cw - PAD) ntx = cw / 2 - cx * nk;
+			if (cy * nk + nty > ch * 0.7)
+				nty = Math.max(ch * 0.4 - cy * nk, ch - PAD - layout.height * nk);
+		}
+		[k, tx, ty] = [nk, ntx, nty];
+	}
+
+	onMount(() => {
+		initialView();
+		ready = true;
+	});
+
+	// Pointer gestures: one pointer pans, two pinch-zoom, a tap selects.
+	// Plain Map on purpose: gesture bookkeeping, nothing renders from it.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const pointers = new Map<number, { x: number; y: number }>();
+	let moved = 0;
+	let downKey: string | null = null;
+	let downRegion: string | null = null;
+	let pinch: { d: number; mx: number; my: number } | null = null;
+	const local = (e: PointerEvent | WheelEvent | MouseEvent) => {
+		const r = svg!.getBoundingClientRect();
+		return { x: e.clientX - r.left, y: e.clientY - r.top };
+	};
+	function pinchState() {
+		const [a, b] = [...pointers.values()];
+		return { d: Math.hypot(a.x - b.x, a.y - b.y), mx: (a.x + b.x) / 2, my: (a.y + b.y) / 2 };
+	}
+	function onpointerdown(e: PointerEvent) {
+		if (e.button !== 0 && e.pointerType === 'mouse') return;
+		cancelAnimationFrame(anim);
+		svg!.setPointerCapture(e.pointerId);
+		pointers.set(e.pointerId, local(e));
+		if (pointers.size === 1) {
+			moved = 0;
+			const t = e.target as Element;
+			downKey = t.closest('[data-key]')?.getAttribute('data-key') ?? null;
+			downRegion = t.closest('[data-region]')?.getAttribute('data-region') ?? null;
+		} else if (pointers.size === 2) {
+			pinch = pinchState();
+			moved = 99;
+		}
+	}
+	function onpointermove(e: PointerEvent) {
+		const prev = pointers.get(e.pointerId);
+		if (!prev) return;
+		const p = local(e);
+		pointers.set(e.pointerId, p);
+		if (pointers.size === 1) {
+			const dx = p.x - prev.x;
+			const dy = p.y - prev.y;
+			moved += Math.abs(dx) + Math.abs(dy);
+			if (moved > 6) {
+				tx += dx;
+				ty += dy;
+			}
+		} else if (pointers.size === 2 && pinch) {
+			const next = pinchState();
+			tx += next.mx - pinch.mx;
+			ty += next.my - pinch.my;
+			if (pinch.d > 0) zoomAt(next.mx, next.my, next.d / pinch.d);
+			pinch = next;
+		}
+	}
+	function onpointerup(e: PointerEvent) {
+		if (!pointers.has(e.pointerId)) return;
+		pointers.delete(e.pointerId);
+		if (pointers.size < 2) pinch = null;
+		if (pointers.size === 0 && moved <= 6 && e.type === 'pointerup') {
+			const tapped = downKey ? chapterByKey.get(downKey) : undefined;
+			if (tapped && !far) {
+				selected = selected === tapped.key ? null : tapped.key;
+			} else if (downRegion && !far && selected) {
+				selected = null;
+			} else if (tapped || downRegion) {
+				const r = regionByKey.get(tapped?.partKey ?? downRegion ?? '');
+				if (r) fitRegion(r);
+			} else selected = null;
+		}
+		if (pointers.size === 1) moved = 99;
+	}
+	function ondblclick(e: MouseEvent) {
+		const p = local(e);
+		zoomAt(p.x, p.y, 1.8, true);
+	}
+	function onkeydown(e: KeyboardEvent) {
+		if ((e.target as HTMLElement).closest('input, textarea, button, .panel')) return;
+		const step = 80;
+		const actions: Record<string, () => void> = {
+			'+': () => zoomBy(1.3),
+			'=': () => zoomBy(1.3),
+			'-': () => zoomBy(1 / 1.3),
+			'0': () => fit(),
+			ArrowLeft: () => animateTo(k, tx + step, ty, 120),
+			ArrowRight: () => animateTo(k, tx - step, ty, 120),
+			ArrowUp: () => animateTo(k, tx, ty + step, 120),
+			ArrowDown: () => animateTo(k, tx, ty - step, 120),
+			Escape: () => (selected = null)
+		};
+		const act = actions[e.key];
+		if (act) {
+			e.preventDefault();
+			act();
+		}
+	}
+	// Wheel zooms around the cursor; non-passive so the page does not scroll underneath.
+	const wheelZoom: Attachment<SVGSVGElement> = (el) => {
+		const wheel = (e: WheelEvent) => {
+			e.preventDefault();
+			cancelAnimationFrame(anim);
+			const p = local(e);
+			const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
+			zoomAt(p.x, p.y, Math.exp(-e.deltaY * unit * (e.ctrlKey ? 0.01 : 0.0016)));
+		};
+		el.addEventListener('wheel', wheel, { passive: false });
+		return () => el.removeEventListener('wheel', wheel);
+	};
+	function onpanelkey(e: KeyboardEvent) {
+		if (e.key === 'Escape') selected = null;
+	}
+
+	// Derived state for drawing.
+	const statusByKey = $derived(new Map(chapters.map((c) => [c.key, statusOf(c)])));
+	const regionStats = $derived(
+		new Map(
+			layout.regions.map((r) => {
+				const list = chapters.filter((c) => c.partKey === r.key);
+				let done = 0;
+				let active = 0;
+				let skipped = 0;
+				for (const c of list) {
+					const s = statusByKey.get(c.key);
+					if (s === 'done') done++;
+					else if (s === 'skipped') skipped++;
+					else if (s === 'reading' || s === 'exercises') active++;
+				}
+				return [
+					r.key,
+					{ total: list.length, done, active, skipped, complete: done + skipped === list.length }
+				];
+			})
+		)
+	);
+	const selectedPart = $derived(selected ? (chapterByKey.get(selected)?.partKey ?? null) : null);
+	let hoverPart = $state<string | null>(null);
+	const focusPart = $derived(selectedPart ?? hoverPart);
+	const selectedPrereqs = $derived(
+		new Set(selected ? (chapterByKey.get(selected)?.prereqs ?? []) : [])
+	);
+
+	const chLabel = (key: string) => (/^\d+$/.test(key) ? `Ch ${key}` : `App ${key}`);
+	/** Short region name for the zoomed-out view: "Set Theory I: ZFC, …" → "Set Theory I". */
+	const farName = (p: MapPart | undefined) => partShort(p).split(':')[0].replace(/^Alg /, 'Alg. ');
+	const trunc = (s: string, n: number) => (s.length > n ? s.slice(0, n - 1).trimEnd() + '…' : s);
+	const partShort = (p: MapPart | undefined) =>
+		p ? p.title.replace(/^Algebraic /, 'Alg ').replace(/ \(TO DO\)$/, '') : '';
+	const ringLen = (c: MapChapter, s: MathStatus) =>
+		c.exerciseCount ? Math.min(1, c.exercisesDone / c.exerciseCount) : s === 'done' ? 1 : 0;
+	const R = 10;
+	const CIRC = 2 * Math.PI * R;
+
+	// Search: jump to a chapter by number or title.
+	let query = $state('');
+	let searchOpen = $state(false);
+	let active = $state(0);
+	const results = $derived.by(() => {
+		const q = query
+			.trim()
+			.toLowerCase()
+			.replace(/^(ch|chapter|app)\.?\s*/, '');
+		if (!q) return [];
+		const exact = chapters.filter((c) => c.key.toLowerCase() === q);
+		const rest = chapters.filter(
+			(c) => c.key.toLowerCase() !== q && c.title.toLowerCase().includes(q)
+		);
+		return [...exact, ...rest].slice(0, 8);
+	});
+	function pick(key: string) {
+		query = '';
+		searchOpen = false;
+		focusChapter(key);
+	}
+	function onsearchkey(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			active = Math.min(active + 1, results.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			active = Math.max(active - 1, 0);
+		} else if (e.key === 'Enter' && results[active]) {
+			e.preventDefault();
+			pick(results[active].key);
+			(e.target as HTMLInputElement).blur();
+		} else if (e.key === 'Escape') {
+			query = '';
+			(e.target as HTMLInputElement).blur();
+		}
+	}
+
+	// Minimap (desktop): drag to move the view.
+	const MINI_W = 170;
+	const miniScale = $derived(MINI_W / layout.width);
+	let miniDrag = false;
+	/** The visible world rect, clipped to the map. */
+	const miniView = $derived.by(() => {
+		const x0 = Math.max(0, -tx / k);
+		const y0 = Math.max(0, -ty / k);
+		const x1 = Math.min(layout.width, (cw - tx) / k);
+		const y1 = Math.min(layout.height, (ch - ty) / k);
+		return { x: x0, y: y0, w: Math.max(0, x1 - x0), h: Math.max(0, y1 - y0) };
+	});
+	function miniMove(e: PointerEvent) {
+		const r = (e.currentTarget as SVGElement).getBoundingClientRect();
+		const wx = (e.clientX - r.left) / miniScale;
+		const wy = (e.clientY - r.top) / miniScale;
+		cancelAnimationFrame(anim);
+		tx = (cw - panelInset.right) / 2 - wx * k;
+		ty = (ch - panelInset.bottom) / 2 - wy * k;
+	}
+	const sel = $derived(selected ? chapterByKey.get(selected) : undefined);
+</script>
+
+<div class={['map', { far, ready, open: !!selected }]} bind:clientWidth={cw} bind:clientHeight={ch}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<svg
+		bind:this={svg}
+		{@attach wheelZoom}
+		class="canvas"
+		role="application"
+		aria-label="Map of the Napkin: drag to pan, pinch or scroll to zoom, tap a chapter to open it"
+		tabindex="0"
+		{onpointerdown}
+		{onpointermove}
+		{onpointerup}
+		onpointercancel={onpointerup}
+		{ondblclick}
+		{onkeydown}
+	>
+		<defs>
+			<marker
+				id="napkin-arrow"
+				viewBox="0 0 10 10"
+				refX="9"
+				refY="5"
+				markerWidth="7"
+				markerHeight="7"
+				orient="auto-start-reverse"
+			>
+				<path d="M0,1 L9,5 L0,9 z" class="arrow" />
+			</marker>
+			<marker
+				id="napkin-arrow-hi"
+				viewBox="0 0 10 10"
+				refX="9"
+				refY="5"
+				markerWidth="7"
+				markerHeight="7"
+				orient="auto-start-reverse"
+			>
+				<path d="M0,1 L9,5 L0,9 z" class="arrow hi" />
+			</marker>
+		</defs>
+		<g style:transform="translate({tx}px, {ty}px) scale({k})" class="world">
+			<g class="edges">
+				{#each layout.edges as e (e.id)}
+					{@const hi = focusPart !== null && (e.from === focusPart || e.to === focusPart)}
+					<path
+						d={e.d}
+						class={[
+							'edge',
+							{
+								optional: e.optional,
+								hi,
+								dim: focusPart !== null && !hi,
+								met: regionStats.get(e.from)?.complete
+							}
+						]}
+						marker-end={hi ? 'url(#napkin-arrow-hi)' : 'url(#napkin-arrow)'}
+					/>
+				{/each}
+			</g>
+			{#each layout.regions as r (r.key)}
+				{@const p = partByKey.get(r.key)}
+				{@const st = regionStats.get(r.key)}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<g
+					class={['region', { focus: focusPart === r.key }]}
+					data-region={r.key}
+					style:--accent={PART_ACCENT[r.key] ?? '#a1a1aa'}
+					onpointerenter={() => (hoverPart = r.key)}
+					onpointerleave={() => (hoverPart = hoverPart === r.key ? null : hoverPart)}
+				>
+					<rect class="rbg" x={r.x} y={r.y} width={r.w} height={r.h} rx="16" />
+					<rect
+						class="badge"
+						x={r.x + 12}
+						y={r.y + 12}
+						width={p?.num === null ? 30 : 26}
+						height="20"
+						rx="6"
+					/>
+					<text class="bnum" x={r.x + 12 + (p?.num === null ? 15 : 13)} y={r.y + 26.5}
+						>{p?.num ?? 'A–E'}</text
+					>
+					<text class="rtitle" x={r.x + (p?.num === null ? 50 : 46)} y={r.y + 27}
+						>{trunc(partShort(p), 22)}</text
+					>
+					{#if st}
+						<text class="rcount" x={r.x + r.w - 12} y={r.y + 27}>{st.done}/{st.total}</text>
+						<rect class="rtrack" x={r.x + 12} y={r.y + 37} width={r.w - 24} height="3" rx="1.5" />
+						{#if st.done}<rect
+								class="rdone"
+								x={r.x + 12}
+								y={r.y + 37}
+								width={((r.w - 24) * st.done) / st.total}
+								height="3"
+								rx="1.5"
+							/>{/if}
+					{/if}
+				</g>
+			{/each}
+			<g class="nodes">
+				{#each layout.nodes as n (n.key)}
+					{@const c = chapterByKey.get(n.key)}
+					{#if c}
+						{@const s = statusByKey.get(n.key) ?? 'not_started'}
+						{@const Icon = status[s].icon}
+						<g
+							class={[
+								'node',
+								s,
+								{
+									current: currentKey === n.key,
+									selected: selected === n.key,
+									pre: selectedPrereqs.has(n.key),
+									dim: filter !== 'all' && filter !== s
+								}
+							]}
+							data-key={n.key}
+							style:--c={status[s].color}
+							transform="translate({n.x},{n.y})"
+						>
+							<title
+								>{chLabel(c.key)}: {c.title} ({STATUS_LABEL[s]}{c.exerciseCount
+									? `, ${c.exercisesDone}/${c.exerciseCount} exercises`
+									: ''})</title
+							>
+							{#if currentKey === n.key}<rect
+									class="glow"
+									x="-4"
+									y="-4"
+									width={n.w + 8}
+									height={n.h + 8}
+									rx="12"
+								/>{/if}
+							<rect class="nbg" width={n.w} height={n.h} rx="9" />
+							<circle class="track" cx="18" cy={n.h / 2} r={R} />
+							{#if ringLen(c, s) > 0}
+								<circle
+									class="ring"
+									cx="18"
+									cy={n.h / 2}
+									r={R}
+									stroke-dasharray="{ringLen(c, s) * CIRC} {CIRC}"
+									transform="rotate(-90 18 {n.h / 2})"
+								/>
+							{/if}
+							<text class="nkey" x="18" y={n.h / 2 + 3.5}>{c.key}</text>
+							<text class="ntitle" x="36" y={n.h / 2 + 4.2}>{trunc(c.title, 25)}</text>
+							{#if s !== 'not_started'}
+								<Icon
+									x={n.w - 22}
+									y={n.h / 2 - 7}
+									size={14}
+									strokeWidth={2.25}
+									class="nicon"
+									aria-hidden="true"
+								/>
+							{/if}
+						</g>
+					{/if}
+				{/each}
+			</g>
+			{#if far}
+				<g class="labels" aria-hidden="true">
+					{#each layout.regions as r (r.key)}
+						{@const p = partByKey.get(r.key)}
+						{@const st = regionStats.get(r.key)}
+						<g class="rlabel" data-region={r.key}>
+							<text
+								x={r.x + r.w / 2}
+								y={r.y + r.h / 2}
+								style:font-size="{Math.min(12.5 / k, 60)}px"
+							>
+								{trunc(farName(p), Math.max(6, Math.floor(((r.w + 80) * k) / 6.6)))}
+							</text>
+							{#if st && (r.w + 80) * k > 60}
+								<text
+									class="sub"
+									x={r.x + r.w / 2}
+									y={r.y + r.h / 2 + Math.min(17 / k, 72)}
+									style:font-size="{Math.min(11 / k, 48)}px"
+								>
+									{p?.num !== null ? `Part ${p?.num} · ` : ''}{st.done}/{st.total} done
+								</text>
+							{/if}
+						</g>
+					{/each}
+				</g>
+			{/if}
+		</g>
+	</svg>
+
+	<div class="search" role="search">
+		<Search size={14} class="s-icon" />
+		<input
+			type="search"
+			placeholder="Jump to chapter…"
+			aria-label="Jump to a chapter by number or title"
+			bind:value={query}
+			onfocus={() => (searchOpen = true)}
+			onblur={() => setTimeout(() => (searchOpen = false), 150)}
+			oninput={() => (active = 0)}
+			onkeydown={onsearchkey}
+		/>
+		{#if searchOpen && results.length}
+			<ul class="results">
+				{#each results as c, i (c.key)}
+					{@const s = statusByKey.get(c.key) ?? 'not_started'}
+					<li>
+						<button
+							class={{ active: i === active }}
+							onmousedown={(e) => e.preventDefault()}
+							onclick={() => pick(c.key)}
+						>
+							<span class="dot" style:--c={status[s].color}></span>
+							<span class="rk">{c.key}</span>
+							<span class="rt">{c.title}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<div class="tools">
+		{#if currentKey}
+			<button
+				class="tool wide"
+				onclick={() => currentKey && focusChapter(currentKey)}
+				title="Jump to the current chapter"><Target size={15} /><span>current</span></button
+			>
+		{/if}
+		<button class="tool" onclick={() => zoomBy(1.35)} aria-label="Zoom in"
+			><Plus size={16} /></button
+		>
+		<button class="tool" onclick={() => zoomBy(1 / 1.35)} aria-label="Zoom out"
+			><Minus size={16} /></button
+		>
+		<button class="tool" onclick={() => fit()} aria-label="Fit the whole map"
+			><Maximize size={15} /></button
+		>
+	</div>
+
+	<div class="legend" aria-label="Legend">
+		{#each Object.entries(status) as [s, v] (s)}
+			<span class="li"
+				><span class="sw {s}" style:--c={v.color}></span>{STATUS_LABEL[s as MathStatus]}</span
+			>
+		{/each}
+		<span class="li extra"
+			><svg width="22" height="8" aria-hidden="true"><path d="M1,4 H21" class="lg-edge" /></svg
+			>prereq</span
+		>
+		<span class="li extra"
+			><svg width="22" height="8" aria-hidden="true"
+				><path d="M1,4 H21" class="lg-edge optional" /></svg
+			>optional</span
+		>
+		<span class="li extra"
+			><svg width="12" height="12" aria-hidden="true"
+				><circle cx="6" cy="6" r="4.5" class="lg-ring" /></svg
+			>exercises</span
+		>
+	</div>
+
+	{#if !mobile && cw}
+		<svg
+			class="mini"
+			width={MINI_W}
+			height={layout.height * miniScale}
+			role="presentation"
+			onpointerdown={(e) => {
+				miniDrag = true;
+				(e.currentTarget as SVGElement).setPointerCapture(e.pointerId);
+				miniMove(e);
+			}}
+			onpointermove={(e) => miniDrag && miniMove(e)}
+			onpointerup={() => (miniDrag = false)}
+		>
+			<g transform="scale({miniScale})">
+				{#each layout.regions as r (r.key)}
+					{@const st = regionStats.get(r.key)}
+					<rect
+						x={r.x}
+						y={r.y}
+						width={r.w}
+						height={r.h}
+						rx="18"
+						class="mreg"
+						style:--p={st ? (st.done + st.skipped) / st.total : 0}
+						style:--a={st?.active ? 1 : 0}
+					/>
+				{/each}
+				<rect
+					class="view"
+					x={miniView.x}
+					y={miniView.y}
+					width={miniView.w}
+					height={miniView.h}
+					rx={8 / miniScale}
+				/>
+			</g>
+		</svg>
+	{/if}
+
+	{#if sel}
+		{@const s = statusByKey.get(sel.key) ?? 'not_started'}
+		{@const Icon = status[s].icon}
+		{@const p = partByKey.get(sel.partKey)}
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<aside
+			class="panel"
+			onkeydown={onpanelkey}
+			aria-label="Chapter {sel.key}"
+			style:--c={status[s].color}
+		>
+			<div class="grab" aria-hidden="true"></div>
+			<header>
+				<span class="sicon"><Icon size={18} strokeWidth={2.25} /></span>
+				<div class="ph">
+					<span class="pk">{chLabel(sel.key)}</span>
+					<h2>{sel.title}</h2>
+					{#if p}
+						<button
+							class="part-link"
+							onclick={() => {
+								const r = regionByKey.get(p.key);
+								if (r) fitRegion(r);
+							}}>{p.num !== null ? `Part ${p.num} · ` : ''}{p.title}</button
+						>
+					{/if}
+				</div>
+				<button class="close" onclick={() => (selected = null)} aria-label="Close"
+					><X size={16} /></button
+				>
+			</header>
+			{#if PART_LINKS.some((l) => l.to === sel.partKey)}
+				<div class="links">
+					{#each PART_LINKS.filter((l) => l.to === sel.partKey) as l (l.from)}
+						{@const from = partByKey.get(l.from)}
+						{@const st = regionStats.get(l.from)}
+						<button
+							class={['plink', { optional: l.optional, met: st?.complete }]}
+							title="{l.optional ? 'Optional: ' : 'Builds on '}{from?.title}"
+							onclick={() => {
+								const r = regionByKey.get(l.from);
+								if (r) fitRegion(r);
+							}}
+							>{l.optional ? 'optional' : 'needs'} · {partShort(from)}
+							{#if st}<span class="muted">{st.done}/{st.total}</span>{/if}</button
+						>
+					{/each}
+				</div>
+			{/if}
+			<div class="pbody">{@render panel(sel.key)}</div>
+		</aside>
+	{/if}
+</div>
+
+<style>
+	.map {
+		position: relative;
+		height: 100%;
+		overflow: hidden;
+		border: 1px solid var(--site-border);
+		border-radius: 0.9rem;
+		background:
+			radial-gradient(
+					circle,
+					color-mix(in srgb, var(--site-text) 9%, transparent) 1px,
+					transparent 1.2px
+				)
+				0 0 / 22px 22px,
+			var(--site-bg);
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	.canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
+		touch-action: none;
+		cursor: grab;
+		outline: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+	.ready .canvas {
+		opacity: 1;
+	}
+	.canvas:active {
+		cursor: grabbing;
+	}
+	.canvas:focus-visible {
+		box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--site-text) 30%, transparent);
+	}
+	.world {
+		transform-origin: 0 0;
+		will-change: transform;
+	}
+
+	/* edges */
+	.edge {
+		fill: none;
+		stroke: color-mix(in srgb, var(--site-text) 30%, transparent);
+		stroke-width: 1.6;
+		transition:
+			stroke 0.15s,
+			opacity 0.15s;
+	}
+	.edge.optional {
+		stroke-dasharray: 2 6;
+		stroke-linecap: round;
+	}
+	.edge.met {
+		stroke: color-mix(in srgb, #22c55e 55%, transparent);
+	}
+	.edge.dim {
+		opacity: 0.25;
+	}
+	.edge.hi {
+		stroke: var(--site-text);
+		stroke-width: 2.2;
+	}
+	.arrow {
+		fill: color-mix(in srgb, var(--site-text) 45%, transparent);
+	}
+	.arrow.hi {
+		fill: var(--site-text);
+	}
+
+	/* regions */
+	.region {
+		cursor: pointer;
+	}
+	.rbg {
+		fill: var(--site-surface);
+		stroke: var(--site-border);
+		stroke-width: 1;
+		transition: stroke 0.15s;
+	}
+	.region.focus .rbg {
+		stroke: color-mix(in srgb, var(--accent) 70%, var(--site-border));
+	}
+	.badge {
+		fill: var(--accent);
+	}
+	.bnum {
+		fill: #0a0a0a;
+		font-size: 11px;
+		font-weight: 700;
+		text-anchor: middle;
+	}
+	.rtitle {
+		fill: var(--site-text);
+		font-size: 13px;
+		font-weight: 600;
+	}
+	.rcount {
+		fill: var(--site-muted);
+		font-size: 11px;
+		text-anchor: end;
+		font-variant-numeric: tabular-nums;
+	}
+	.rtrack {
+		fill: color-mix(in srgb, var(--site-text) 8%, transparent);
+	}
+	.rdone {
+		fill: #22c55e;
+	}
+
+	/* nodes */
+	.node {
+		cursor: pointer;
+		transition: opacity 0.15s;
+	}
+	.nbg {
+		fill: color-mix(in srgb, var(--site-text) 4%, var(--site-surface));
+		stroke: color-mix(in srgb, var(--site-text) 14%, transparent);
+		stroke-width: 1;
+		transition:
+			fill 0.15s,
+			stroke 0.15s;
+	}
+	.node:hover .nbg {
+		stroke: color-mix(in srgb, var(--site-text) 40%, transparent);
+	}
+	.node:not(.not_started) .nbg {
+		fill: color-mix(in srgb, var(--c) 15%, var(--site-surface));
+		stroke: color-mix(in srgb, var(--c) 55%, transparent);
+	}
+	.node.done .nbg {
+		fill: color-mix(in srgb, var(--c) 24%, var(--site-surface));
+	}
+	.node.skipped .nbg {
+		fill: color-mix(in srgb, var(--c) 8%, var(--site-surface));
+		stroke-dasharray: 4 3;
+	}
+	.node.selected .nbg {
+		stroke: var(--site-text);
+		stroke-width: 2;
+	}
+	.node.pre .nbg {
+		stroke: var(--site-text);
+		stroke-dasharray: 3 3;
+		stroke-width: 1.4;
+	}
+	.node.dim {
+		opacity: 0.22;
+	}
+	.glow {
+		fill: none;
+		stroke: var(--c);
+		stroke-width: 2;
+		animation: pulse 2.2s ease-in-out infinite;
+	}
+	@keyframes pulse {
+		50% {
+			opacity: 0.25;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.glow {
+			animation: none;
+		}
+	}
+	.track {
+		fill: none;
+		stroke: color-mix(in srgb, var(--site-text) 14%, transparent);
+		stroke-width: 2.5;
+	}
+	.ring {
+		fill: none;
+		stroke: var(--c);
+		stroke-width: 2.5;
+		stroke-linecap: round;
+	}
+	.nkey {
+		fill: var(--site-muted);
+		font-size: 9px;
+		font-weight: 700;
+		text-anchor: middle;
+		font-variant-numeric: tabular-nums;
+	}
+	.node:not(.not_started) .nkey {
+		fill: var(--site-text);
+	}
+	.ntitle {
+		fill: var(--site-text);
+		font-size: 12px;
+	}
+	.node.not_started .ntitle {
+		fill: color-mix(in srgb, var(--site-text) 78%, transparent);
+	}
+	.node.skipped .ntitle {
+		fill: var(--site-muted);
+		text-decoration: line-through;
+	}
+	.node :global(.nicon) {
+		color: var(--c);
+	}
+
+	/* zoomed out: big region labels, no node text */
+	.far .ntitle,
+	.far .nkey,
+	.far .node :global(.nicon),
+	.far .rtitle,
+	.far .rcount,
+	.far .bnum {
+		display: none;
+	}
+	.far .node {
+		cursor: inherit;
+	}
+	.rlabel {
+		cursor: zoom-in;
+	}
+	.rlabel text {
+		fill: var(--site-text);
+		font-weight: 700;
+		text-anchor: middle;
+		paint-order: stroke;
+		stroke: var(--site-bg);
+		stroke-width: 0.3em;
+		stroke-linejoin: round;
+		letter-spacing: -0.01em;
+	}
+	.rlabel text.sub {
+		fill: var(--site-muted);
+		font-weight: 500;
+	}
+
+	/* overlays */
+	.search {
+		position: absolute;
+		top: 0.6rem;
+		left: 0.6rem;
+		width: min(17rem, calc(100% - 13rem));
+	}
+	.search :global(.s-icon) {
+		position: absolute;
+		left: 0.6rem;
+		top: 0.62rem;
+		color: var(--site-muted);
+		pointer-events: none;
+	}
+	.search input {
+		width: 100%;
+		height: 2.1rem;
+		padding: 0 0.6rem 0 1.9rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		font: inherit;
+		font-size: 0.85rem;
+		color: var(--site-text);
+	}
+	.search input:focus {
+		outline: none;
+		border-color: var(--site-muted);
+	}
+	.results {
+		margin-top: 0.3rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: var(--site-surface);
+		padding: 0.25rem;
+		box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
+	}
+	.results button {
+		display: grid;
+		grid-template-columns: auto 1.7rem minmax(0, 1fr);
+		align-items: center;
+		gap: 0.45rem;
+		width: 100%;
+		padding: 0.35rem 0.45rem;
+		border-radius: 0.4rem;
+		font-size: 0.82rem;
+		text-align: left;
+		cursor: pointer;
+		color: inherit;
+	}
+	.results button.active,
+	.results button:hover {
+		background: var(--site-hover);
+	}
+	.dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 999px;
+		background: var(--c);
+	}
+	.rk {
+		color: var(--site-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.rt {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.tools {
+		position: absolute;
+		top: 0.6rem;
+		right: 0.6rem;
+		display: flex;
+		gap: 0.3rem;
+		transition: right 0.2s;
+	}
+	.open .tools {
+		right: calc(380px + 0.6rem);
+	}
+	.tool {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.3rem;
+		min-width: 2.1rem;
+		height: 2.1rem;
+		padding: 0 0.5rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		color: var(--site-text);
+		font-size: 0.8rem;
+		cursor: pointer;
+	}
+	.tool:hover {
+		border-color: var(--site-muted);
+	}
+	.tool.wide :global(svg) {
+		color: #38bdf8;
+	}
+	.legend {
+		position: absolute;
+		right: 0.6rem;
+		bottom: 0.6rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: 0.25rem 0.7rem;
+		max-width: 30rem;
+		padding: 0.4rem 0.65rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		font-size: 0.72rem;
+		color: var(--site-muted);
+		pointer-events: none;
+		transition: right 0.2s;
+	}
+	.open .legend {
+		right: calc(380px + 0.6rem);
+	}
+	.li {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		white-space: nowrap;
+	}
+	.sw {
+		width: 0.8rem;
+		height: 0.6rem;
+		border-radius: 0.2rem;
+		border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
+		background: color-mix(in srgb, var(--c) 30%, transparent);
+	}
+	.sw.not_started {
+		background: color-mix(in srgb, var(--site-text) 6%, transparent);
+		border-color: color-mix(in srgb, var(--site-text) 25%, transparent);
+	}
+	.sw.skipped {
+		border-style: dashed;
+	}
+	.lg-edge {
+		stroke: color-mix(in srgb, var(--site-text) 55%, transparent);
+		stroke-width: 1.6;
+	}
+	.lg-edge.optional {
+		stroke-dasharray: 2 4;
+		stroke-linecap: round;
+	}
+	.lg-ring {
+		fill: none;
+		stroke: #f59e0b;
+		stroke-width: 2;
+		stroke-dasharray: 18 40;
+		transform: rotate(-90deg);
+		transform-origin: 6px 6px;
+	}
+	.mini {
+		position: absolute;
+		left: 0.6rem;
+		bottom: 0.6rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		cursor: crosshair;
+		touch-action: none;
+	}
+	.mreg {
+		fill: color-mix(
+			in srgb,
+			#22c55e calc(var(--p) * 75%),
+			color-mix(in srgb, var(--site-text) 14%, transparent)
+		);
+		stroke: color-mix(in srgb, #38bdf8 calc(var(--a) * 100%), transparent);
+		stroke-width: 18;
+	}
+	.view {
+		fill: color-mix(in srgb, var(--site-text) 6%, transparent);
+		stroke: var(--site-text);
+		stroke-width: 14;
+	}
+
+	/* chapter panel: side panel on desktop, bottom sheet on mobile */
+	.panel {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 380px;
+		display: flex;
+		flex-direction: column;
+		border-left: 1px solid var(--site-border);
+		background: var(--site-surface);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		animation: slide-in 0.18s ease-out;
+		user-select: text;
+		-webkit-user-select: text;
+	}
+	@keyframes slide-in {
+		from {
+			transform: translateX(24px);
+			opacity: 0;
+		}
+	}
+	.grab {
+		display: none;
+	}
+	.panel header {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		gap: 0.6rem;
+		align-items: start;
+		padding: 0.9rem 0.9rem 0.6rem;
+		border-bottom: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
+	}
+	.sicon {
+		display: inline-flex;
+		margin-top: 0.15rem;
+		color: var(--c);
+	}
+	.ph {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		min-width: 0;
+	}
+	.pk {
+		font-size: 0.75rem;
+		color: var(--site-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.ph h2 {
+		font-size: 1.05rem;
+		font-weight: 600;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+	}
+	.part-link {
+		align-self: flex-start;
+		font-size: 0.75rem;
+		color: var(--site-muted);
+		text-align: left;
+		cursor: pointer;
+	}
+	.part-link:hover {
+		color: var(--site-text);
+	}
+	.close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.9rem;
+		height: 1.9rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.5rem;
+		color: var(--site-muted);
+		cursor: pointer;
+	}
+	.close:hover {
+		color: var(--site-text);
+		border-color: var(--site-muted);
+	}
+	.links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		padding: 0.6rem 0.9rem 0;
+	}
+	.plink {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.15rem 0.5rem;
+		border: 1px solid var(--site-border);
+		border-radius: 999px;
+		font-size: 0.72rem;
+		color: var(--site-text);
+		cursor: pointer;
+	}
+	.plink.optional {
+		border-style: dashed;
+		color: var(--site-muted);
+	}
+	.plink.met {
+		border-color: color-mix(in srgb, #22c55e 60%, transparent);
+	}
+	.plink .muted {
+		color: var(--site-muted);
+	}
+	.pbody {
+		padding: 0.7rem 0.9rem 1rem;
+	}
+
+	@media (max-width: 719px) {
+		.panel {
+			position: fixed;
+			top: auto;
+			left: 0;
+			width: auto;
+			max-height: 72dvh;
+			border-left: 0;
+			border-top: 1px solid var(--site-border);
+			border-radius: 1rem 1rem 0 0;
+			box-shadow: 0 -12px 40px rgb(0 0 0 / 0.45);
+			z-index: 50;
+			animation: sheet-in 0.22s ease-out;
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+		@keyframes sheet-in {
+			from {
+				transform: translateY(40%);
+				opacity: 0;
+			}
+		}
+		.grab {
+			display: block;
+			width: 2.5rem;
+			height: 0.25rem;
+			margin: 0.5rem auto 0;
+			border-radius: 999px;
+			background: var(--site-border);
+		}
+		.panel header {
+			padding-top: 0.5rem;
+		}
+		.open .tools,
+		.open .legend {
+			right: 0.6rem;
+		}
+		.search {
+			width: calc(100% - 11.2rem);
+		}
+		.legend .extra {
+			display: none;
+		}
+		.tool.wide span {
+			display: none;
+		}
+		.legend {
+			left: 0.6rem;
+			justify-content: flex-start;
+			gap: 0.2rem 0.55rem;
+			font-size: 0.66rem;
+		}
+	}
+</style>
diff --git a/src/lib/napkin/map.test.ts b/src/lib/napkin/map.test.ts
new file mode 100644
index 0000000..aae72ea
--- /dev/null
+++ b/src/lib/napkin/map.test.ts
@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { buildMapLayout, MAP_GRID, PART_ACCENT, PART_LINKS } from './map';
+
+// Chapter counts per part, as in the seeded Napkin.
+const COUNTS: Record<string, number> = {
+	'1': 3,
+	'2': 3,
+	'3': 3,
+	'4': 7,
+	'5': 3,
+	'6': 4,
+	'7': 3,
+	'8': 5,
+	'9': 4,
+	'10': 5,
+	'11': 3,
+	'12': 4,
+	'13': 6,
+	'14': 6,
+	'15': 5,
+	'16': 3,
+	'17': 4,
+	'18': 6,
+	'19': 5,
+	'20': 6,
+	'21': 4,
+	'22': 3,
+	appendix: 5
+};
+let n = 0;
+const parts = Object.entries(COUNTS).map(([key, count]) => ({
+	key,
+	chapters: Array.from({ length: count }, () => String(++n))
+}));
+const layout = buildMapLayout(parts);
+
+/** Points along an absolute M/L/C path. */
+function samples(d: string) {
+	const tokens = d.match(/[MLC]|-?\d+(?:\.\d+)?/g) ?? [];
+	const pts: [number, number][] = [];
+	let cur: [number, number] = [0, 0];
+	let i = 0;
+	const num = () => Number(tokens[i++]);
+	while (i < tokens.length) {
+		const cmd = tokens[i++];
+		if (cmd === 'M' || cmd === 'L') {
+			const p: [number, number] = [num(), num()];
+			if (cmd === 'L')
+				for (let t = 0; t <= 1; t += 0.05)
+					pts.push([cur[0] + (p[0] - cur[0]) * t, cur[1] + (p[1] - cur[1]) * t]);
+			cur = p;
+		} else if (cmd === 'C') {
+			const [c1, c2, p] = [
+				[num(), num()],
+				[num(), num()],
+				[num(), num()]
+			];
+			for (let t = 0; t <= 1; t += 0.05) {
+				const u = 1 - t;
+				pts.push([
+					u ** 3 * cur[0] + 3 * u * u * t * c1[0] + 3 * u * t * t * c2[0] + t ** 3 * p[0],
+					u ** 3 * cur[1] + 3 * u * u * t * c1[1] + 3 * u * t * t * c2[1] + t ** 3 * p[1]
+				]);
+			}
+			cur = p as [number, number];
+		} else throw new Error(`unexpected path token ${cmd}`);
+	}
+	return pts;
+}
+
+describe('napkin map layout', () => {
+	it('places every part and every chapter', () => {
+		expect(layout.regions.map((r) => r.key).sort()).toEqual(Object.keys(COUNTS).sort());
+		expect(layout.nodes).toHaveLength(n);
+		for (const key of Object.keys(COUNTS)) {
+			expect(MAP_GRID[key]).toBeDefined();
+			expect(PART_ACCENT[key]).toMatch(/^#[0-9a-f]{6}$/);
+		}
+	});
+
+	it('keeps regions apart and nodes inside their region', () => {
+		const rs = layout.regions;
+		for (let a = 0; a < rs.length; a++)
+			for (let b = a + 1; b < rs.length; b++) {
+				const [p, q] = [rs[a], rs[b]];
+				const overlap = p.x < q.x + q.w && q.x < p.x + p.w && p.y < q.y + q.h && q.y < p.y + p.h;
+				expect(overlap, `${p.key} overlaps ${q.key}`).toBe(false);
+			}
+		for (const node of layout.nodes) {
+			const r = rs.find((x) => x.key === node.partKey)!;
+			expect(node.x).toBeGreaterThanOrEqual(r.x);
+			expect(node.y).toBeGreaterThanOrEqual(r.y);
+			expect(node.x + node.w).toBeLessThanOrEqual(r.x + r.w);
+			expect(node.y + node.h).toBeLessThanOrEqual(r.y + r.h);
+		}
+	});
+
+	it('draws one edge per part link, optional ones flagged', () => {
+		expect(layout.edges).toHaveLength(PART_LINKS.length);
+		expect(layout.edges.filter((e) => e.optional)).toHaveLength(
+			PART_LINKS.filter((l) => l.optional).length
+		);
+		expect(PART_LINKS.filter((l) => l.optional).length).toBe(10);
+		for (const e of layout.edges) expect(e.d).toMatch(/^M/);
+	});
+
+	it('never routes an edge through an unrelated region', () => {
+		for (const e of layout.edges) {
+			const others = layout.regions.filter((r) => r.key !== e.from && r.key !== e.to);
+			for (const [x, y] of samples(e.d))
+				for (const r of others) {
+					const inside = x > r.x + 1 && x < r.x + r.w - 1 && y > r.y + 1 && y < r.y + r.h - 1;
+					expect(inside, `${e.id} crosses part ${r.key} at ${x},${y}`).toBe(false);
+				}
+		}
+	});
+
+	it('flows downward from the roots', () => {
+		const row = (k: string) => MAP_GRID[k][1];
+		for (const l of PART_LINKS) expect(row(l.to)).toBeGreaterThanOrEqual(row(l.from) - 1);
+		for (const root of ['2', '3', '4', '21']) expect(row(root)).toBeLessThanOrEqual(1);
+		for (const leaf of ['18', '20', '15']) expect(row(leaf)).toBe(5);
+	});
+});
diff --git a/src/lib/napkin/map.ts b/src/lib/napkin/map.ts
new file mode 100644
index 0000000..0597535
--- /dev/null
+++ b/src/lib/napkin/map.ts
@@ -0,0 +1,303 @@
+/**
+ * The Napkin as a 2D map: one region per part, one node per chapter, prereq edges between parts.
+ *
+ * Region placement follows the book's dependency chart ("Advice for the reader", PDF p. 9,
+ * tex/frontmatter/digraph.tex): Abs Alg, Lin Alg, Topology and Set Theory are the roots and
+ * everything flows down to Alg Geo, Alg Top and Alg NT. Regions sit on a hand-placed grid; edges
+ * are routed through the empty channels between rows and the gutters between columns, so they
+ * never cut through a region.
+ */
+
+/** Part → [column, row] on the map grid. */
+export const MAP_GRID: Record<string, readonly [number, number]> = {
+	appendix: [0, 0],
+	'1': [3, 0],
+	'21': [0, 1],
+	'2': [1, 1],
+	'4': [3, 1],
+	'3': [5, 1],
+	'22': [0, 2],
+	'5': [1, 2],
+	'6': [2, 2],
+	'7': [4, 2],
+	'8': [5, 2],
+	'17': [2, 3],
+	'12': [4, 3],
+	'9': [5, 3],
+	'10': [6, 3],
+	'19': [1, 4],
+	'16': [2, 4],
+	'14': [3, 4],
+	'13': [4, 4],
+	'11': [6, 4],
+	'20': [1, 5],
+	'18': [2, 5],
+	'15': [3, 5]
+};
+
+export type PartLink = { from: string; to: string; optional: boolean };
+
+/**
+ * Part-level prereqs from the book's chart. `optional` = dotted in the book (\coreqc), solid
+ * otherwise (\prereqc). Additions: Starting Out leads into Abs Alg and Topology, Measure →
+ * Probability and Diff Geo → Riemann Surfaces (one block in the chart each).
+ */
+export const PART_LINKS: readonly PartLink[] = (
+	[
+		['1', '2'],
+		['1', '3'],
+		['2', '4', true],
+		['2', '5'],
+		['2', '6'],
+		['4', '6'],
+		['4', '7'],
+		['2', '17'],
+		['4', '17', true],
+		['3', '17', true],
+		['17', '6', true],
+		['3', '8'],
+		['3', '9'],
+		['8', '9', true],
+		['16', '9', true],
+		['3', '10'],
+		['8', '10', true],
+		['10', '11'],
+		['4', '12'],
+		['3', '12'],
+		['8', '12', true],
+		['12', '13'],
+		['2', '14'],
+		['4', '14'],
+		['14', '15'],
+		['5', '15'],
+		['3', '16'],
+		['5', '16'],
+		['16', '17', true],
+		['16', '18'],
+		['17', '18'],
+		['2', '19'],
+		['3', '19'],
+		['17', '19', true],
+		['19', '20'],
+		['17', '20'],
+		['21', '22']
+	] as const
+).map(([from, to, optional]) => ({ from, to, optional: optional === true }));
+
+/** Accent per area of maths (region badge stripe), kept apart from the status colours. */
+export const PART_ACCENT: Record<string, string> = {
+	'1': '#e4e4e7',
+	appendix: '#a1a1aa',
+	'2': '#f472b6',
+	'5': '#f472b6',
+	'6': '#f472b6',
+	'17': '#f472b6',
+	'4': '#818cf8',
+	'7': '#818cf8',
+	'3': '#2dd4bf',
+	'16': '#2dd4bf',
+	'18': '#2dd4bf',
+	'8': '#fb923c',
+	'9': '#fb923c',
+	'10': '#fb923c',
+	'11': '#fb923c',
+	'12': '#fb923c',
+	'13': '#fb923c',
+	'14': '#e879f9',
+	'15': '#e879f9',
+	'19': '#a3e635',
+	'20': '#a3e635',
+	'21': '#94a3b8',
+	'22': '#94a3b8'
+};
+
+export const MAP = {
+	regionWidth: 240,
+	gutter: 96,
+	rowGap: 120,
+	head: 46,
+	padX: 10,
+	padBottom: 10,
+	nodeHeight: 34,
+	nodeGap: 6,
+	portGap: 18,
+	laneGap: 12
+} as const;
+
+export type MapRegion = {
+	key: string;
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+	col: number;
+	row: number;
+};
+export type MapNode = { key: string; partKey: string; x: number; y: number; w: number; h: number };
+export type MapEdge = {
+	id: string;
+	from: string;
+	to: string;
+	optional: boolean;
+	d: string;
+	/** End point, for the arrow head. */
+	end: { x: number; y: number; dir: 'down' | 'up' | 'right' };
+};
+export type MapLayout = {
+	regions: MapRegion[];
+	nodes: MapNode[];
+	edges: MapEdge[];
+	width: number;
+	height: number;
+};
+
+const r1 = (n: number) => Math.round(n * 10) / 10;
+
+export function buildMapLayout(
+	parts: readonly { key: string; chapters: readonly string[] }[],
+	links: readonly PartLink[] = PART_LINKS
+): MapLayout {
+	const M = MAP;
+	const W = M.regionWidth;
+	const colX = (c: number) => c * (W + M.gutter);
+	const heightOf = (n: number) => M.head + n * (M.nodeHeight + M.nodeGap) - M.nodeGap + M.padBottom;
+
+	const placed = parts.filter((p) => MAP_GRID[p.key]);
+	const rows = Math.max(...placed.map((p) => MAP_GRID[p.key][1])) + 1;
+	const cols = Math.max(...placed.map((p) => MAP_GRID[p.key][0])) + 1;
+	const rowHeight = Array.from({ length: rows }, () => 0);
+	for (const p of placed) {
+		const [, r] = MAP_GRID[p.key];
+		rowHeight[r] = Math.max(rowHeight[r], heightOf(p.chapters.length));
+	}
+	const rowTop: number[] = [0];
+	for (let r = 1; r < rows; r++) rowTop[r] = rowTop[r - 1] + rowHeight[r - 1] + M.rowGap;
+	/** Channel between row r and r + 1: [channelTop, channelBottom]. */
+	const chTop = (r: number) => rowTop[r] + rowHeight[r];
+	const chBot = (r: number) => rowTop[r + 1];
+
+	const regions: MapRegion[] = [];
+	const nodes: MapNode[] = [];
+	for (const p of placed) {
+		const [col, row] = MAP_GRID[p.key];
+		const reg = {
+			key: p.key,
+			col,
+			row,
+			x: colX(col),
+			y: rowTop[row],
+			w: W,
+			h: heightOf(p.chapters.length)
+		};
+		regions.push(reg);
+		p.chapters.forEach((key, i) =>
+			nodes.push({
+				key,
+				partKey: p.key,
+				x: reg.x + M.padX,
+				y: reg.y + M.head + i * (M.nodeHeight + M.nodeGap),
+				w: W - 2 * M.padX,
+				h: M.nodeHeight
+			})
+		);
+	}
+	const reg = new Map(regions.map((r) => [r.key, r]));
+	const usable = links.filter((l) => reg.has(l.from) && reg.has(l.to));
+
+	// Ports: spread each region's edges along its bottom (outgoing down / incoming up) and top.
+	type Side = 'top' | 'bottom';
+	const portLists = new Map<string, { id: string; other: number }[]>();
+	const addPort = (key: string, side: Side, id: string, other: number) => {
+		const k = `${key}:${side}`;
+		if (!portLists.has(k)) portLists.set(k, []);
+		portLists.get(k)!.push({ id, other });
+	};
+	const idOf = (l: PartLink) => `${l.from}-${l.to}`;
+	for (const l of usable) {
+		const a = reg.get(l.from)!;
+		const b = reg.get(l.to)!;
+		if (a.row === b.row) continue;
+		const down = b.row > a.row;
+		addPort(a.key, down ? 'bottom' : 'top', idOf(l), b.x + b.w / 2);
+		addPort(b.key, down ? 'top' : 'bottom', idOf(l), a.x + a.w / 2);
+	}
+	const portX = (key: string, side: Side, id: string) => {
+		const r = reg.get(key)!;
+		const list = [...portLists.get(`${key}:${side}`)!].sort(
+			(p, q) => p.other - q.other || (p.id < q.id ? -1 : 1)
+		);
+		const i = list.findIndex((p) => p.id === id);
+		const gap = Math.min(M.portGap, (r.w * 0.7) / Math.max(1, list.length));
+		return r.x + r.w / 2 + (i - (list.length - 1) / 2) * gap;
+	};
+	/** Is x free of regions in every row strictly between a and b? */
+	const freeAt = (x: number, a: number, b: number) =>
+		regions.every((r) => r.row <= a || r.row >= b || x < r.x - 14 || x > r.x + r.w + 14);
+	const gutterLoad = new Map<number, number>();
+	const s = (x0: number, y0: number, x1: number, y1: number) => {
+		if (Math.abs(x0 - x1) < 0.5) return ` L${r1(x1)},${r1(y1)}`;
+		const m = (y0 + y1) / 2;
+		return ` C${r1(x0)},${r1(m)} ${r1(x1)},${r1(m)} ${r1(x1)},${r1(y1)}`;
+	};
+
+	const edges: MapEdge[] = [];
+	for (const l of usable) {
+		const a = reg.get(l.from)!;
+		const b = reg.get(l.to)!;
+		const id = idOf(l);
+		let d: string;
+		let end: MapEdge['end'];
+		if (a.row === b.row) {
+			// Same row (Abs Alg ⇢ Lin Alg): straight across at header height.
+			const y = a.y + 23;
+			const [x0, x1] = a.x < b.x ? [a.x + a.w, b.x] : [a.x, b.x + b.w];
+			d = `M${r1(x0)},${r1(y)} L${r1(x1)},${r1(y)}`;
+			end = { x: x1, y, dir: 'right' };
+		} else if (b.row < a.row) {
+			// Upward (optional back-links, adjacent rows only).
+			const sx = portX(a.key, 'top', id);
+			const tx = portX(b.key, 'bottom', id);
+			const ty = b.y + b.h;
+			d = `M${r1(sx)},${r1(a.y)}` + s(sx, a.y, tx, chTop(b.row)) + ` L${r1(tx)},${r1(ty)}`;
+			end = { x: tx, y: ty, dir: 'up' };
+		} else {
+			const sx = portX(a.key, 'bottom', id);
+			const tx = portX(b.key, 'top', id);
+			const sy = a.y + a.h;
+			const ty = b.y;
+			d = `M${r1(sx)},${r1(sy)} L${r1(sx)},${r1(chTop(a.row))}`;
+			if (b.row === a.row + 1) d += s(sx, chTop(a.row), tx, ty);
+			else if (freeAt(tx, a.row, b.row))
+				d += s(sx, chTop(a.row), tx, chBot(a.row)) + ` L${r1(tx)},${r1(ty)}`;
+			else if (freeAt(sx, a.row, b.row))
+				d += ` L${r1(sx)},${r1(chTop(b.row - 1))}` + s(sx, chTop(b.row - 1), tx, ty);
+			else {
+				// Down a gutter between columns: the one with the least detour, then the least used.
+				let best = { g: 0, cost: Infinity };
+				for (let g = 0; g <= cols; g++) {
+					const gx = colX(g) - M.gutter / 2;
+					const cost = Math.abs(sx - gx) + Math.abs(tx - gx) + (gutterLoad.get(g) ?? 0) * 40;
+					if (cost < best.cost) best = { g, cost };
+				}
+				const n = gutterLoad.get(best.g) ?? 0;
+				gutterLoad.set(best.g, n + 1);
+				const lane = (n % 2 ? -1 : 1) * Math.ceil(n / 2) * M.laneGap;
+				const gx = colX(best.g) - M.gutter / 2 + lane;
+				d +=
+					s(sx, chTop(a.row), gx, chBot(a.row)) +
+					` L${r1(gx)},${r1(chTop(b.row - 1))}` +
+					s(gx, chTop(b.row - 1), tx, ty);
+			}
+			end = { x: tx, y: ty, dir: 'down' };
+		}
+		edges.push({ id, from: l.from, to: l.to, optional: l.optional, d, end });
+	}
+
+	return {
+		regions,
+		nodes,
+		edges,
+		width: colX(cols) - M.gutter,
+		height: rowTop[rows - 1] + rowHeight[rows - 1]
+	};
+}
diff --git a/src/routes/trackers/math/+page.svelte b/src/routes/trackers/math/+page.svelte
index bfba98c..0cb9ee1 100644
--- a/src/routes/trackers/math/+page.svelte
+++ b/src/routes/trackers/math/+page.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { enhance } from '$app/forms';
+	import { replaceState } from '$app/navigation';
+	import { page } from '$app/state';
+	import MathMap from '#lib/napkin/MathMap.svelte';
 	import type { SubmitFunction } from '@sveltejs/kit';
 	import TrackerIcon from '#lib/components/TrackerIcon.svelte';
 	import PrivateLock from '#lib/components/PrivateLock.svelte';
@@ -26,6 +30,7 @@
 	import ListChecks from 'lucide-svelte/icons/list-checks';
 	import MapIcon from 'lucide-svelte/icons/map';
 	import StickyNote from 'lucide-svelte/icons/sticky-note';
+	import List from 'lucide-svelte/icons/list';
 
 	let { data, form } = $props();
 
@@ -47,6 +52,46 @@
 	let filter = $state<MathStatus | 'all'>('all');
 	let errorKey = $state('');
 
+	// Map (default) or the original list; ?view=list in the URL, remembered per device.
+	type View = 'map' | 'list';
+	const VIEW_KEY = 'math:view';
+	const urlView = (): View | null => {
+		const v = page.url.searchParams.get('view');
+		return v === 'list' || v === 'map' ? v : null;
+	};
+	let view = $state<View>(urlView() ?? 'map');
+	let selected = $state<string | null>(null);
+	let map: ReturnType<typeof MathMap> | undefined = $state();
+	onMount(() => {
+		if (urlView()) return;
+		try {
+			const saved = localStorage.getItem(VIEW_KEY);
+			if (saved === 'list' || saved === 'map') view = saved;
+		} catch {
+			// Ignore.
+		}
+	});
+	function setView(next: View) {
+		if (next === view) return;
+		view = next;
+		try {
+			localStorage.setItem(VIEW_KEY, next);
+		} catch {
+			// Not persisted; fine.
+		}
+		const url = new URL(page.url);
+		if (next === 'map') url.searchParams.delete('view');
+		else url.searchParams.set('view', next);
+		replaceState(url, {});
+	}
+	/** Jump to a chapter: centre it on the map, or expand it in the list. */
+	function goTo(e: MouseEvent, key: string) {
+		if (view === 'map' && map) {
+			e.preventDefault();
+			map.focusChapter(key);
+		} else open[key] = true;
+	}
+
 	const statusOf = (c: Chapter): MathStatus => pending[c.key] ?? c.status;
 	const byKey = $derived(new Map(data.chapters.map((c) => [c.key, c])));
 
@@ -219,7 +264,7 @@
 						class="dot"
 						style:--c={STATUS[statusOf(p)].color}
 						title="{chapterLabel(p.key)} {p.title}: {STATUS_LABEL[statusOf(p)]}"
-						onclick={() => (open[p.key] = true)}>{p.key}</a
+						onclick={(e) => goTo(e, p.key)}>{p.key}</a
 					>
 				{/each}
 			</span>
@@ -297,7 +342,7 @@
 	</div>
 {/snippet}
 
-<div class="math-page">
+<div class={['math-page', `${view}-view`]}>
 	<header class="head">
 		<TrackerIcon name="math" class="size-10" />
 		<div>
@@ -310,13 +355,25 @@
 				>, chapter by chapter.
 			</p>
 		</div>
+		<div class="views" role="group" aria-label="View">
+			<button
+				class={{ on: view === 'map' }}
+				aria-pressed={view === 'map'}
+				onclick={() => setView('map')}><MapIcon size={14} />map</button
+			>
+			<button
+				class={{ on: view === 'list' }}
+				aria-pressed={view === 'list'}
+				onclick={() => setView('list')}><List size={14} />list</button
+			>
+		</div>
 	</header>
 
 	<section class="overview card">
 		<div class="big">
 			<span class="pct">{pct(counts.done, countable)}%</span>
 			<span class="muted"
-				>{counts.done} of {countable} chapters done{#if counts.skipped}{' · '}{counts.skipped}
+				>{counts.done} of {countable} chapters done{#if counts.skipped}&nbsp;· {counts.skipped}
 					skipped{/if}</span
 			>
 		</div>
@@ -343,7 +400,27 @@
 		</div>
 	</section>
 
-	{#if current}
+	{#if view === 'map'}
+		<div class="map-wrap">
+			<MathMap
+				bind:this={map}
+				bind:selected
+				parts={data.parts}
+				chapters={data.chapters}
+				{statusOf}
+				status={STATUS}
+				currentKey={current?.chapter.key ?? null}
+				{filter}
+			>
+				{#snippet panel(key)}
+					{@const c = byKey.get(key)}
+					{#if c}<div class="in-panel">{@render details(c)}</div>{/if}
+				{/snippet}
+			</MathMap>
+		</div>
+	{/if}
+
+	{#if current && view === 'list'}
 		{@const c = current.chapter}
 		{@const part = data.parts.find((p) => p.key === c.partKey)}
 		<section class="current card" style:--c={STATUS[statusOf(c)].color}>
@@ -363,62 +440,62 @@
 	{/if}
 
 	<div class="layout">
-		<div class="parts">
-			{#each parts as p (p.key)}
-				{#if p.shown.length}
-					<section class="part card">
-						<button
-							class="part-head"
-							aria-expanded={!collapsedParts[p.key]}
-							onclick={() => (collapsedParts[p.key] = !collapsedParts[p.key])}
-						>
-							<span class="pnum">{p.num ?? 'A–E'}</span>
-							<span class="ptitle">{p.title}</span>
-							<span class="pbar">{@render bar(p.counts, p.chapters.length)}</span>
-							<span class="muted pcount">{p.counts.done}/{p.chapters.length}</span>
-							<ChevronDown size={16} class={!collapsedParts[p.key] ? 'chev flipped' : 'chev'} />
-						</button>
-						{#if !collapsedParts[p.key]}
-							<ul class="chapters">
-								{#each p.shown as c (c.key)}
-									{@const s = statusOf(c)}
-									<li id="ch-{c.key}" class={['chapter', s, { open: open[c.key] }]}>
-										<button
-											class="row"
-											aria-expanded={!!open[c.key]}
-											onclick={() => (open[c.key] = !open[c.key])}
-										>
-											{@render statusIcon(s)}
-											<span class="ckey">{c.key}</span>
-											<span class="ctitle">{c.title}</span>
-											<span class="cmeta">
-												{#if c.exerciseCount}<span
-														class={['ex', { full: c.exercisesDone >= c.exerciseCount }]}
-														>{c.exercisesDone}/{c.exerciseCount}</span
-													>{/if}
-												{#if c.prereqs.length}
-													{@const info = prereqInfo(c)}
-													<span
-														class="pre"
-														title="builds on Ch {compactKeys(c.prereqs)} ({info.done}/{info.list
-															.length} done)"
-														style:--c={info.done === info.list.length
-															? STATUS.done.color
-															: '#a1a1aa'}>⟵ {compactKeys(c.prereqs)}</span
-													>
-												{/if}
-											</span>
-											<ChevronDown size={14} class={open[c.key] ? 'chev flipped' : 'chev'} />
-										</button>
-										{#if open[c.key]}{@render details(c)}{/if}
-									</li>
-								{/each}
-							</ul>
-						{/if}
-					</section>
-				{/if}
-			{/each}
-		</div>
+		{#if view === 'list'}<div class="parts">
+				{#each parts as p (p.key)}
+					{#if p.shown.length}
+						<section class="part card">
+							<button
+								class="part-head"
+								aria-expanded={!collapsedParts[p.key]}
+								onclick={() => (collapsedParts[p.key] = !collapsedParts[p.key])}
+							>
+								<span class="pnum">{p.num ?? 'A–E'}</span>
+								<span class="ptitle">{p.title}</span>
+								<span class="pbar">{@render bar(p.counts, p.chapters.length)}</span>
+								<span class="muted pcount">{p.counts.done}/{p.chapters.length}</span>
+								<ChevronDown size={16} class={!collapsedParts[p.key] ? 'chev flipped' : 'chev'} />
+							</button>
+							{#if !collapsedParts[p.key]}
+								<ul class="chapters">
+									{#each p.shown as c (c.key)}
+										{@const s = statusOf(c)}
+										<li id="ch-{c.key}" class={['chapter', s, { open: open[c.key] }]}>
+											<button
+												class="row"
+												aria-expanded={!!open[c.key]}
+												onclick={() => (open[c.key] = !open[c.key])}
+											>
+												{@render statusIcon(s)}
+												<span class="ckey">{c.key}</span>
+												<span class="ctitle">{c.title}</span>
+												<span class="cmeta">
+													{#if c.exerciseCount}<span
+															class={['ex', { full: c.exercisesDone >= c.exerciseCount }]}
+															>{c.exercisesDone}/{c.exerciseCount}</span
+														>{/if}
+													{#if c.prereqs.length}
+														{@const info = prereqInfo(c)}
+														<span
+															class="pre"
+															title="builds on Ch {compactKeys(c.prereqs)} ({info.done}/{info.list
+																.length} done)"
+															style:--c={info.done === info.list.length
+																? STATUS.done.color
+																: '#a1a1aa'}>⟵ {compactKeys(c.prereqs)}</span
+														>
+													{/if}
+												</span>
+												<ChevronDown size={14} class={open[c.key] ? 'chev flipped' : 'chev'} />
+											</button>
+											{#if open[c.key]}{@render details(c)}{/if}
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</section>
+					{/if}
+				{/each}
+			</div>{/if}
 
 		<aside class="side">
 			<section class="card">
@@ -436,7 +513,7 @@
 										><ListChecks size={14} /></span
 									>{:else}<span class="sicon" style:--c="#fbbf24"><StickyNote size={14} /></span
 									>{/if}
-								<a href="#ch-{a.chapterKey}" onclick={() => (open[a.chapterKey] = true)}
+								<a href="#ch-{a.chapterKey}" onclick={(e) => goTo(e, a.chapterKey)}
 									>{chapterLabel(a.chapterKey)}</a
 								>
 								<span class="atext">{activityText(a)}</span>
@@ -479,6 +556,61 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
+	.math-page.map-view {
+		max-width: 110rem;
+	}
+	.views {
+		display: inline-flex;
+		margin-left: auto;
+		align-self: flex-start;
+		padding: 0.15rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: var(--site-surface);
+	}
+	.views button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.3rem 0.65rem;
+		border-radius: 0.45rem;
+		font-size: 0.82rem;
+		color: var(--site-muted);
+		cursor: pointer;
+	}
+	.views button:hover {
+		color: var(--site-text);
+	}
+	.views button.on {
+		background: var(--site-hover);
+		color: var(--site-text);
+	}
+	.map-wrap {
+		height: max(28rem, calc(100dvh - 6rem));
+		scroll-margin-top: 4.5rem;
+	}
+	.map-view .layout {
+		display: block;
+	}
+	.map-view .side {
+		position: static;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
+		align-items: start;
+	}
+	.in-panel .details {
+		padding: 0;
+	}
+	.in-panel .seg {
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+	.in-panel .seg button {
+		flex-direction: column;
+		gap: 0.15rem;
+		padding: 0.45rem 0.2rem;
+		font-size: 0.7rem;
+	}
 	.head {
 		display: flex;
 		align-items: center;