diff --git a/package-lock.json b/package-lock.json
index 462b3da6..58f333eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@codemirror/theme-one-dark": "^6.0.0",
         "@xyflow/svelte": "^1.5.0",
         "codemirror": "^6.0.0",
+        "driver.js": "^1.4.0",
         "jspdf": "^4.1.0",
         "katex": "^0.16.0",
         "opentype.js": "^1.3.4",
@@ -1272,7 +1273,6 @@
       "integrity": "sha512-Vp3zX/qlwerQmHMP6x0Ry1oY7eKKRcOWGc2P59srOp4zcqyn+etJyQpELgOi4+ZSUgteX8Y387NuwruLgGXLUQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "@sveltejs/acorn-typescript": "^1.0.5",
@@ -1312,7 +1312,6 @@
       "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
         "debug": "^4.4.1",
@@ -1512,7 +1511,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2055,7 +2053,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -2175,8 +2172,7 @@
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1566079.tgz",
       "integrity": "sha512-MJfAEA1UfVhSs7fbSQOG4czavUp1ajfg6prlAN0+cmfa2zNjaIbvq8VneP7do1WAQQIvgNJWSMeP6UyI90gIlQ==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/dompurify": {
       "version": "3.3.1",
@@ -2188,6 +2184,12 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/driver.js": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.4.0.tgz",
+      "integrity": "sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew==",
+      "license": "MIT"
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2298,7 +2300,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2968,7 +2969,6 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.1.0.tgz",
       "integrity": "sha512-xd1d/XRkwqnsq6FP3zH1Q+Ejqn2ULIJeDZ+FTKpaabVpZREjsJKRJwuokTNgdqOU+fl55KgbvgZ1pRTSWCP2kQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "fast-png": "^6.2.0",
@@ -3363,7 +3363,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3397,7 +3396,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3521,7 +3519,6 @@
       "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -3970,7 +3967,6 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.46.0.tgz",
       "integrity": "sha512-ZhLtvroYxUxr+HQJfMZEDRsGsmU46x12RvAv/zi9584f5KOX7bUrEbhPJ7cKFmUvZTJXi/CFZUYwDC6M1FigPw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -4239,7 +4235,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4288,7 +4283,6 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
diff --git a/package.json b/package.json
index 2e96f67e..e197eea7 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@codemirror/theme-one-dark": "^6.0.0",
     "@xyflow/svelte": "^1.5.0",
     "codemirror": "^6.0.0",
+    "driver.js": "^1.4.0",
     "jspdf": "^4.1.0",
     "katex": "^0.16.0",
     "opentype.js": "^1.3.4",
diff --git a/src/app.css b/src/app.css
index ae20dca8..e570d513 100644
--- a/src/app.css
+++ b/src/app.css
@@ -717,3 +717,4 @@ body.assembly-pending .svelte-flow__edge {
 		transform: scale(1);
 	}
 }
+
diff --git a/src/lib/components/FlowCanvas.svelte b/src/lib/components/FlowCanvas.svelte
index 911f3991..55b0a35b 100644
--- a/src/lib/components/FlowCanvas.svelte
+++ b/src/lib/components/FlowCanvas.svelte
@@ -14,6 +14,7 @@
 	import '@xyflow/svelte/dist/style.css';
 
 	import { isInputFocused } from '$lib/utils/focus';
+	import { isTourActive } from '$lib/tours/inputMode';
 	import BaseNode from './nodes/BaseNode.svelte';
 	import EventNode from './nodes/EventNode.svelte';
 	import AnnotationNode from './nodes/AnnotationNode.svelte';
@@ -31,6 +32,7 @@
 	import { dropTargetBridge } from '$lib/stores/dropTargetBridge';
 	import { contextMenuStore } from '$lib/stores/contextMenu';
 	import { nodeUpdatesStore } from '$lib/stores/nodeUpdates';
+	import { assemblyAnimationTrigger } from '$lib/animation/assemblyAnimation';
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { GRID_SIZE, SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
@@ -74,6 +76,8 @@
 
 	// Keyboard shortcuts for node manipulation
 	function handleKeydown(event: KeyboardEvent) {
+		// While a guided tour runs, driver.js owns the keyboard.
+		if (isTourActive()) return;
 		if (isInputFocused(event)) return;
 
 		// Handle Delete key (SvelteFlow's deleteKeyCode doesn't work reliably for 'Delete')
@@ -444,6 +448,19 @@
 		}
 	});
 
+	// On model load, the initial routing pass runs with fallback 80×40
+	// dimensions because nodes haven't been measured yet, and the per-node
+	// $effect above silently records first measurements without rerouting.
+	// Trigger a full reroute once measurements have settled.
+	let lastAssemblyTrigger = 0;
+	const unsubAssembly = assemblyAnimationTrigger.subscribe((v) => {
+		if (v > lastAssemblyTrigger) {
+			lastAssemblyTrigger = v;
+			setTimeout(() => updateRoutingContext(), 400);
+		}
+	});
+	onDestroy(() => unsubAssembly());
+
 	// Track if we're currently syncing to prevent loops
 	let isSyncing = false;
 
diff --git a/src/lib/components/ResizablePanel.svelte b/src/lib/components/ResizablePanel.svelte
index cd56bf33..0f428449 100644
--- a/src/lib/components/ResizablePanel.svelte
+++ b/src/lib/components/ResizablePanel.svelte
@@ -179,6 +179,8 @@
 <aside
 	class="resizable-panel glass-panel {position}"
 	class:resizing={isResizing}
+	data-panel={title ?? ''}
+	data-tour={title ? `panel-${title.toLowerCase()}` : ''}
 	style="
 		{position === 'left' || position === 'right' ? `width: ${getWidth()}px;` : ''}
 		{(position === 'bottom-left' || position === 'bottom-right') && controlledWidth !== undefined ? `width: ${getWidth()}px;` : ''}
diff --git a/src/lib/components/SubsystemBreadcrumb.svelte b/src/lib/components/SubsystemBreadcrumb.svelte
index 879b9444..bc558562 100644
--- a/src/lib/components/SubsystemBreadcrumb.svelte
+++ b/src/lib/components/SubsystemBreadcrumb.svelte
@@ -27,7 +27,7 @@
 </script>
 
 {#if !isAtRoot}
-	<nav class="breadcrumb glass-panel" transition:fly={{ y: -10, duration: 150 }}>
+	<nav class="breadcrumb glass-panel" data-tour="breadcrumb" transition:fly={{ y: -10, duration: 150 }}>
 		{#each breadcrumbs as crumb, i}
 			<button
 				class="crumb-pill"
diff --git a/src/lib/components/WelcomeModal.svelte b/src/lib/components/WelcomeModal.svelte
index 7e09dd0a..2b625ae4 100644
--- a/src/lib/components/WelcomeModal.svelte
+++ b/src/lib/components/WelcomeModal.svelte
@@ -5,6 +5,7 @@
 	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
 	import { PATHVIEW_VERSION, EXTRACTED_VERSIONS } from '$lib/constants/dependencies';
+	import { startGuidedTour, type TourId } from '$lib/tours';
 
 	interface Example {
 		name: string;
@@ -51,6 +52,12 @@
 		onClose();
 	}
 
+	function handleStartTour(id: TourId) {
+		onClose();
+		// Wait for the banner's slide-out so highlights aren't covered
+		setTimeout(() => startGuidedTour(id), 350);
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			onClose();
@@ -132,6 +139,29 @@
 
 		<div class="separator"></div>
 
+		<div class="tour-section">
+			<div class="tour-text">
+				<strong>Guided Tours</strong>
+				<span>Step-by-step walkthroughs that highlight the editor's main areas in turn so you know what each does.</span>
+			</div>
+			<div class="tour-buttons">
+				<button class="action-card" onclick={() => handleStartTour('start')}>
+					<Icon name="compass" size={20} />
+					<span class="action-label">Start</span>
+				</button>
+				<button class="action-card" onclick={() => handleStartTour('modeling')}>
+					<Icon name="shapes" size={20} />
+					<span class="action-label">Modeling</span>
+				</button>
+				<button class="action-card" onclick={() => handleStartTour('simulation')}>
+					<Icon name="play-circle" size={20} />
+					<span class="action-label">Simulation</span>
+				</button>
+			</div>
+		</div>
+
+		<div class="separator"></div>
+
 		<div class="examples-section">
 			<div class="examples-grid">
 				{#each examples as example}
@@ -228,6 +258,43 @@
 		letter-spacing: 0.2px;
 	}
 
+	.tour-section {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		gap: 8px;
+		align-items: center;
+	}
+
+	.tour-text {
+		grid-column: 1 / 4;
+	}
+
+	.tour-buttons {
+		grid-column: 4 / -1;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
+	}
+
+	.tour-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		line-height: 1.35;
+		color: var(--text-muted);
+	}
+
+	.tour-text strong {
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.tour-text span {
+		font-size: 11px;
+	}
+
 	.actions {
 		display: grid;
 		grid-template-columns: repeat(6, 1fr);
@@ -278,7 +345,7 @@
 
 	.examples-grid {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		grid-template-columns: repeat(2, 1fr);
 		grid-auto-rows: min-content;
 		align-items: start;
 		gap: 10px;
@@ -383,10 +450,6 @@
 		.banner-content {
 			padding-right: 90px;
 		}
-
-		.examples-grid {
-			grid-template-columns: repeat(2, 1fr);
-		}
 	}
 
 	@media (max-width: 500px) {
diff --git a/src/lib/components/dialogs/BlockPropertiesDialog.svelte b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
index 309c2b31..c27783de 100644
--- a/src/lib/components/dialogs/BlockPropertiesDialog.svelte
+++ b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
@@ -249,7 +249,7 @@
 
 {#if nodeId && node && typeDef}
 	<div class="dialog-backdrop" onclick={handleBackdropClick} transition:fade={{ duration: 150 }} role="presentation">
-		<div class="properties-dialog glass-panel" style="--node-color: {currentColor}" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
+		<div class="properties-dialog glass-panel" data-tour="dialog-properties" style="--node-color: {currentColor}" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
 			<div class="dialog-header">
 				{#if showCode}
 					<span id="dialog-title">Python Code</span>
@@ -258,6 +258,7 @@
 						<input
 							id="dialog-title"
 							class="node-name-input"
+							data-tour="block-name-input"
 							type="text"
 							value={node.name}
 							oninput={(e) => handleNameChange(e.currentTarget.value)}
@@ -377,6 +378,7 @@
 											<button
 												class="pin-btn"
 												class:pinned
+												data-tour="block-pin-btn"
 												onclick={() => togglePinParam(param.name)}
 												use:tooltip={pinned ? "Unpin from node" : "Pin to node"}
 												aria-label={pinned ? "Unpin from node" : "Pin to node"}
diff --git a/src/lib/components/dialogs/ExportDialog.svelte b/src/lib/components/dialogs/ExportDialog.svelte
index 25d43db3..77680ad2 100644
--- a/src/lib/components/dialogs/ExportDialog.svelte
+++ b/src/lib/components/dialogs/ExportDialog.svelte
@@ -135,7 +135,7 @@
 
 {#if open}
 	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={handleBackdropClick} role="presentation">
-		<div class="dialog glass-panel" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
+		<div class="dialog glass-panel" data-tour="dialog-python-export" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
 			<div class="dialog-header">
 				<span id="dialog-title">Export Python Code</span>
 				<div class="header-actions">
diff --git a/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte b/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
index 20f8d669..85263fc4 100644
--- a/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
+++ b/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
@@ -95,6 +95,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
 		<div
 			class="dialog glass-panel"
+			data-tour="dialog-shortcuts"
 			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
 			onclick={(e) => e.stopPropagation()}
 			role="dialog"
diff --git a/src/lib/components/dialogs/SearchDialog.svelte b/src/lib/components/dialogs/SearchDialog.svelte
index 6481a3d9..4588f9df 100644
--- a/src/lib/components/dialogs/SearchDialog.svelte
+++ b/src/lib/components/dialogs/SearchDialog.svelte
@@ -139,6 +139,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
 		<div
 			class="search-dialog glass-panel"
+			data-tour="dialog-search"
 			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
 			onclick={(e) => e.stopPropagation()}
 			role="dialog"
diff --git a/src/lib/components/dialogs/ToolboxManagerDialog.svelte b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
index 0a6c6423..115e6c22 100644
--- a/src/lib/components/dialogs/ToolboxManagerDialog.svelte
+++ b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
@@ -349,6 +349,7 @@
 	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={handleBackdrop} role="presentation">
 		<div
 			class="dialog glass-panel manager-modal"
+			data-tour="dialog-toolbox-manager"
 			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
 			role="dialog"
 			aria-modal="true"
diff --git a/src/lib/components/dialogs/shared/ColorPicker.svelte b/src/lib/components/dialogs/shared/ColorPicker.svelte
index 5cf73ee0..de1b4ef9 100644
--- a/src/lib/components/dialogs/shared/ColorPicker.svelte
+++ b/src/lib/components/dialogs/shared/ColorPicker.svelte
@@ -47,7 +47,7 @@
 
 <svelte:window onclick={handleClickOutside} />
 
-<div class="color-picker-wrapper">
+<div class="color-picker-wrapper" data-tour="block-color-picker">
 	<button class="picker-btn" class:ghost={variant === 'ghost'} onclick={toggle} aria-label="Change color" use:tooltip={{ text: 'Color', position: tooltipPosition }}>
 		<svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke={iconColor || 'currentColor'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 			<circle cx="12" cy="12" r="10"/>
diff --git a/src/lib/components/icons/Icon.svelte b/src/lib/components/icons/Icon.svelte
index 90af7c45..5f4b08b9 100644
--- a/src/lib/components/icons/Icon.svelte
+++ b/src/lib/components/icons/Icon.svelte
@@ -443,6 +443,22 @@
 		<text x="2" y="18" font-size="11" font-weight="700" font-family="system-ui, sans-serif">A</text>
 		<text x="10" y="18" font-size="11" font-weight="700" font-family="system-ui, sans-serif">a</text>
 	</svg>
+{:else if name === 'compass'}
+	<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<circle cx="12" cy="12" r="10"/>
+		<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>
+	</svg>
+{:else if name === 'shapes'}
+	<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<circle cx="6" cy="18" r="3.5"/>
+		<rect x="13" y="13" width="8" height="8" rx="1"/>
+		<polygon points="12 1 18 10 6 10"/>
+	</svg>
+{:else if name === 'play-circle'}
+	<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<circle cx="12" cy="12" r="10"/>
+		<polygon points="10 8 16 12 10 16 10 8"/>
+	</svg>
 {:else}
 	<span class="text-icon">{name}</span>
 {/if}
diff --git a/src/lib/stores/searchDialog.ts b/src/lib/stores/searchDialog.ts
new file mode 100644
index 00000000..63bfcf6c
--- /dev/null
+++ b/src/lib/stores/searchDialog.ts
@@ -0,0 +1,21 @@
+/**
+ * Store for the global Search dialog. Promoted from local +page.svelte
+ * state so external code (guided tours) can open/close it without
+ * dispatching synthetic keyboard events.
+ */
+import { writable, get } from 'svelte/store';
+
+const open = writable(false);
+
+export const searchDialogStore = {
+	subscribe: open.subscribe,
+	open(): void {
+		open.set(true);
+	},
+	close(): void {
+		open.set(false);
+	},
+	isOpen(): boolean {
+		return get(open);
+	}
+};
diff --git a/src/lib/tours/actions.ts b/src/lib/tours/actions.ts
new file mode 100644
index 00000000..e8e0b7b7
--- /dev/null
+++ b/src/lib/tours/actions.ts
@@ -0,0 +1,220 @@
+/**
+ * Promise-based tour actions. Every UI side-effect a tour can trigger lives
+ * here as an awaitable function that resolves when the UI has reached the
+ * expected post-condition (panel open, dialog mounted, simulation finished,
+ * …). Step scripts stay readable: `await openPanel('blocks')` instead of
+ * hand-rolled `setTimeout(..., 280)` chains.
+ *
+ * Magic timeouts cluster *here* (one place to tune), not in step content.
+ */
+
+import { graphStore } from '$lib/stores/graph';
+import { openNodeDialog, closeNodeDialog } from '$lib/stores/nodeDialog';
+import { searchDialogStore } from '$lib/stores/searchDialog';
+import { triggerFitView } from '$lib/stores/viewActions';
+import { importFromUrl } from '$lib/schema/fileOps';
+import { base } from '$app/paths';
+import { T, type PanelName, type DialogKind } from './targets';
+
+/* --- Generic UI primitives -------------------------------------------- */
+
+const ANIM = {
+	panelToggle: 280, // svelte fly duration (200ms) + a bit of slack
+	dialogOpen: 320, // dialog scale-in + measurement settle
+	dialogClose: 200,
+	storeMutation: 350, // graphStore mutation → SvelteFlow re-render
+	keatexRender: 450, // store mutation + KaTeX re-typeset
+	simulationStart: 800, // run kicks off, panels auto-mount
+	postFitView: 140 // small grace period after fitView before next step
+};
+
+/** Resolve when a selector returns a node (polled), or after `timeoutMs`
+ *  whichever comes first. Used by panel/dialog actions to wait for the
+ *  corresponding DOM to mount before we hand control back. */
+export function waitForElement(selector: string, timeoutMs = 1000): Promise<Element | null> {
+	const found = document.querySelector(selector);
+	if (found) return Promise.resolve(found);
+	return new Promise((resolve) => {
+		const start = performance.now();
+		const tick = () => {
+			const el = document.querySelector(selector);
+			if (el) return resolve(el);
+			if (performance.now() - start > timeoutMs) return resolve(null);
+			requestAnimationFrame(tick);
+		};
+		requestAnimationFrame(tick);
+	});
+}
+
+/** Resolve when a selector stops returning a node, or after `timeoutMs`. */
+export function waitForElementGone(selector: string, timeoutMs = 1000): Promise<void> {
+	if (!document.querySelector(selector)) return Promise.resolve();
+	return new Promise((resolve) => {
+		const start = performance.now();
+		const tick = () => {
+			if (!document.querySelector(selector)) return resolve();
+			if (performance.now() - start > timeoutMs) return resolve();
+			requestAnimationFrame(tick);
+		};
+		requestAnimationFrame(tick);
+	});
+}
+
+const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+
+/* --- Panel actions ---------------------------------------------------- */
+
+function isPanelOpen(name: PanelName): boolean {
+	const btn = document.querySelector<HTMLButtonElement>(T.panelToggle(name));
+	return !!btn?.classList.contains('active');
+}
+
+/** Open a panel and resolve once its content is mounted. No-op if already open. */
+export async function openPanel(name: PanelName): Promise<void> {
+	if (isPanelOpen(name)) return;
+	const btn = document.querySelector<HTMLButtonElement>(T.panelToggle(name));
+	btn?.click();
+	await waitForElement(T.panelContent(name), 800);
+	await sleep(ANIM.panelToggle - 100); // wait for fly-in to settle
+}
+
+/** Close a panel and resolve once it has unmounted. No-op if already closed. */
+export async function closePanel(name: PanelName): Promise<void> {
+	if (!isPanelOpen(name)) return;
+	const btn = document.querySelector<HTMLButtonElement>(T.panelToggle(name));
+	btn?.click();
+	await waitForElementGone(T.panelContent(name), 800);
+}
+
+/* --- Dialog actions --------------------------------------------------- */
+
+/** Open the block-properties dialog for `nodeId` and resolve when ready. */
+export async function openBlockProperties(nodeId: string): Promise<void> {
+	openNodeDialog(nodeId);
+	await waitForElement(T.dialog('properties'), 800);
+	await sleep(ANIM.dialogOpen - 200); // dialog mount + fields render
+}
+
+/** Close the block-properties dialog. No-op if not open. */
+export async function closeBlockProperties(): Promise<void> {
+	closeNodeDialog();
+	await waitForElementGone(T.dialog('properties'), 600);
+}
+
+/** Click a toolbar button (by data-tour action) and wait for any dialog
+ *  it opens to mount. */
+export async function clickToolbar(
+	action: Parameters<typeof T.toolbarButton>[0],
+	dialogToWaitFor?: DialogKind
+): Promise<void> {
+	const btn = document.querySelector<HTMLButtonElement>(T.toolbarButton(action));
+	btn?.click();
+	if (dialogToWaitFor) {
+		await waitForElement(T.dialog(dialogToWaitFor), 800);
+		await sleep(ANIM.dialogOpen - 200);
+	} else {
+		await sleep(ANIM.dialogOpen - 100);
+	}
+}
+
+/** Open the toolbox-manager dialog (button lives inside the Block Library
+ *  panel actions slot). The Blocks panel must already be open. */
+export async function openToolboxManager(): Promise<void> {
+	const btn = document.querySelector<HTMLButtonElement>(T.openToolboxManager);
+	btn?.click();
+	await waitForElement(T.dialog('toolbox-manager'), 800);
+	await sleep(ANIM.dialogOpen - 200);
+}
+
+/** Open the search dialog (no toolbar button — it's shortcut-only). */
+export async function openSearchDialog(): Promise<void> {
+	searchDialogStore.open();
+	await waitForElement(T.dialog('search'), 800);
+	await sleep(ANIM.dialogOpen - 200);
+}
+
+/** Close every dialog that might be open: search + properties via stores,
+ *  others by clicking their close button. */
+export async function closeAllDialogs(): Promise<void> {
+	closeNodeDialog();
+	searchDialogStore.close();
+	document
+		.querySelectorAll<HTMLButtonElement>('[data-tour^="dialog-"] [aria-label="Close"]')
+		.forEach((b) => b.click());
+	await sleep(ANIM.dialogClose);
+}
+
+/* --- Block customisation actions -------------------------------------- */
+
+/** Apply a side-effect to the graph and wait for SvelteFlow to re-render. */
+export async function applyChange(
+	mutation: () => void,
+	{ delay = ANIM.storeMutation } = {}
+): Promise<void> {
+	mutation();
+	await sleep(delay);
+	triggerFitView();
+	await sleep(ANIM.postFitView);
+}
+
+/** Set a block's name. Use `delay: ANIM.keatexRender` for LaTeX names. */
+export const setBlockName = (id: string, name: string, delay = ANIM.storeMutation) =>
+	applyChange(() => graphStore.updateNodeName(id, name), { delay });
+
+/** Set a block's accent color. */
+export const setBlockColor = (id: string, color: string) =>
+	applyChange(() => graphStore.updateNodeColor(id, color));
+
+/** Pin the first parameter shown in the open block-properties dialog —
+ *  uses the actual DOM button order so it matches what the user just saw
+ *  highlighted (param-key order from the model can differ). */
+export const pinFirstParam = () =>
+	applyChange(() => {
+		const btn = document.querySelector<HTMLButtonElement>(T.blockField('pin-btn'));
+		if (btn && !btn.classList.contains('pinned')) btn.click();
+	});
+
+/** Drill into the first Subsystem block found in the current graph level.
+ *  Waits for the breadcrumb element to mount so the Breadcrumb step that
+ *  follows finds its target. */
+export const drillIntoFirstSubsystem = async () => {
+	await applyChange(() => {
+		const sub = graphStore.getAllNodes().find((n) => n.type === 'Subsystem');
+		if (sub) graphStore.drillDown(sub.id);
+	});
+	await waitForElement('[data-tour="breadcrumb"]', 800);
+};
+
+/** Navigate back to the root of the subsystem hierarchy. */
+export const navigateToRoot = () =>
+	applyChange(() => {
+		if (!graphStore.isAtRoot()) graphStore.navigateTo(0);
+	});
+
+/* --- Simulation actions ----------------------------------------------- */
+
+/** Trigger Run via the toolbar button. Resolves after the run starts and
+ *  Results/Console panels have had time to auto-mount. */
+export async function runSimulation(): Promise<void> {
+	const btn = document.querySelector<HTMLButtonElement>(T.toolbarButton('run'));
+	btn?.click();
+	await sleep(ANIM.simulationStart);
+	triggerFitView();
+	await sleep(ANIM.postFitView);
+}
+
+/* --- Demo loading ----------------------------------------------------- */
+
+/** Import an example model by filename (relative to /examples) and wait
+ *  for the assembly animation grace period before the tour proceeds. */
+export async function loadDemo(filename: string): Promise<boolean> {
+	const url = `${base}/examples/${filename}`;
+	const result = await importFromUrl(url);
+	if (!result.success) return false;
+	await sleep(250);
+	triggerFitView();
+	await sleep(350);
+	return true;
+}
+
+export { ANIM };
diff --git a/src/lib/tours/anchors.ts b/src/lib/tours/anchors.ts
new file mode 100644
index 00000000..751e3c27
--- /dev/null
+++ b/src/lib/tours/anchors.ts
@@ -0,0 +1,43 @@
+/**
+ * Floating-corner anchors for tour popovers that don't have a real DOM
+ * target (intros, outros, summary tables). The anchor is a 1×1 invisible
+ * fixed-position div in the requested corner; driver.js positions the
+ * popover relative to it. The TourSession owns the lifetime — anchors are
+ * created on demand and torn down with the session.
+ */
+
+export type Corner = 'top-right' | 'bottom-right';
+
+const ANCHOR_BASE =
+	'position:fixed;width:1px;height:1px;pointer-events:none;opacity:0;z-index:1;';
+
+const ANCHOR_OFFSETS: Record<Corner, string> = {
+	'top-right': 'top:64px;right:24px;',
+	'bottom-right': 'bottom:24px;right:24px;'
+};
+
+const ANCHOR_IDS: Record<Corner, string> = {
+	'top-right': 'tour-anchor-top-right',
+	'bottom-right': 'tour-anchor-bottom-right'
+};
+
+/** Create or return the existing anchor for a corner. The element is added
+ *  to `document.body` and is invisible & non-interactive. */
+export function getCornerAnchor(corner: Corner): Element {
+	const id = ANCHOR_IDS[corner];
+	let el = document.getElementById(id);
+	if (!el) {
+		el = document.createElement('div');
+		el.id = id;
+		el.style.cssText = ANCHOR_BASE + ANCHOR_OFFSETS[corner];
+		document.body.appendChild(el);
+	}
+	return el;
+}
+
+/** Remove all corner anchors from the DOM. Called by TourSession on teardown. */
+export function removeAllAnchors(): void {
+	for (const id of Object.values(ANCHOR_IDS)) {
+		document.getElementById(id)?.remove();
+	}
+}
diff --git a/src/lib/tours/blocks.ts b/src/lib/tours/blocks.ts
new file mode 100644
index 00000000..4e1a4fc7
--- /dev/null
+++ b/src/lib/tours/blocks.ts
@@ -0,0 +1,49 @@
+/**
+ * Demo-block lookup helpers for tour scripts. Tours reference blocks by
+ * stable attributes (name, type) instead of by index in `getAllNodes()` —
+ * if a demo file is edited or save-format migration changes the order,
+ * the tour still finds the right block.
+ */
+
+import { graphStore } from '$lib/stores/graph';
+import { T } from './targets';
+
+export interface BlockLookup {
+	name?: string;
+	type?: string;
+}
+
+/** Find a block in the current graph level. Match precedence:
+ *    1. exact name match
+ *    2. block type match (first one found)
+ *  Returns undefined when nothing matches.
+ */
+export function findBlock(lookup: BlockLookup): { id: string } | undefined {
+	const nodes = graphStore.getAllNodes();
+	if (lookup.name) {
+		const byName = nodes.find((n) => n.name === lookup.name);
+		if (byName) return { id: byName.id };
+	}
+	if (lookup.type) {
+		const byType = nodes.find((n) => n.type === lookup.type);
+		if (byType) return { id: byType.id };
+	}
+	return undefined;
+}
+
+/** Convenience: id of the block matching `lookup`, or undefined. */
+export function findBlockId(lookup: BlockLookup): string | undefined {
+	return findBlock(lookup)?.id;
+}
+
+/** Resolve a block lookup to its DOM element on the canvas. Falls back to
+ *  the canvas pane so a missing block doesn't crash the tour. */
+export function findBlockElement(lookup: BlockLookup): Element {
+	const id = findBlockId(lookup);
+	const el = id ? document.querySelector<HTMLElement>(T.nodeById(id)) : null;
+	return (
+		el ??
+		document.querySelector(T.canvasPane) ??
+		document.body
+	);
+}
diff --git a/src/lib/tours/builder.ts b/src/lib/tours/builder.ts
new file mode 100644
index 00000000..e6ba6c33
--- /dev/null
+++ b/src/lib/tours/builder.ts
@@ -0,0 +1,377 @@
+/**
+ * Step-Builder-DSL.
+ *
+ * Tour scripts describe their content with high-level building blocks —
+ * `intro`, `panelStep`, `dialogStep`, `actionStep`, `blockStep`, `floatingStep` —
+ * each of which expands to one or more driver.js DriveStep records with
+ * the right hooks, anchors, body-mode classes and cleanup behaviour wired in.
+ *
+ * The intent: a tour script reads like a table of contents, not like
+ * driver.js boilerplate.
+ */
+
+import type { DriveStep, DriverHook, Side, Alignment } from 'driver.js';
+import {
+	openPanel,
+	closePanel,
+	openBlockProperties,
+	closeBlockProperties,
+	closeAllDialogs,
+	clickToolbar,
+	openToolboxManager,
+	openSearchDialog
+} from './actions';
+import { getCornerAnchor, type Corner } from './anchors';
+import { getCurrentSession } from './session';
+import { T, type PanelName, type DialogKind, type ToolbarAction } from './targets';
+
+/* --- Common helpers --------------------------------------------------- */
+
+/** Wrap an async opener so it fires when the user clicks Next, then advances
+ *  the driver. Errors in the opener are swallowed — tour Next must not stall. */
+function openOnNext(opener: () => Promise<void>): DriverHook {
+	return (_el, _step, opts) => {
+		opener()
+			.catch(() => {})
+			.finally(() => opts.driver.moveNext());
+	};
+}
+
+const FLOATING_POPOVER = { popoverClass: 'tour-floating' } as const;
+const FLOATING_BR = {
+	side: 'top' as Side,
+	align: 'end' as Alignment
+};
+const FLOATING_TR = {
+	side: 'bottom' as Side,
+	align: 'end' as Alignment
+};
+
+/* --- Floating / intro / outro steps ----------------------------------- */
+
+export interface FloatingStep {
+	title: string;
+	body: string;
+	corner?: Corner; // default: 'top-right'
+	/** Inject a custom button (e.g. "Continue with Modeling") into the popover footer. */
+	onPopoverRender?: DriveStep['popover'] extends infer P
+		? P extends { onPopoverRender?: infer F }
+			? F
+			: never
+		: never;
+}
+
+/** A popover anchored to a corner of the viewport, no canvas highlight.
+ *  Used for tour intros, summaries, "no specific element" steps. */
+export function floatingStep(opts: FloatingStep): DriveStep {
+	const corner: Corner = opts.corner ?? 'top-right';
+	const align = corner === 'top-right' ? FLOATING_TR : FLOATING_BR;
+	return {
+		element: () => getCornerAnchor(corner),
+		popover: {
+			...FLOATING_POPOVER,
+			...align,
+			title: opts.title,
+			description: opts.body,
+			onPopoverRender: opts.onPopoverRender
+		}
+	};
+}
+
+/** Tour intro: top-right floating step. */
+export const intro = (opts: { title: string; body: string }): DriveStep =>
+	floatingStep({ ...opts, corner: 'top-right' });
+
+/* --- Panel steps ------------------------------------------------------ */
+
+export interface PanelStep {
+	name: PanelName;
+	/** Body text shown for the toggle step ("Click Next to open"). */
+	toggleBody: string;
+	/** Body text shown for the content step (panel is open). */
+	contentBody: string;
+	/** Optional shortcut letter, displayed in the toggle step body. */
+	shortcut?: string;
+	/** Where the toggle popover sits relative to the toggle button. Defaults to right/start. */
+	togglePosition?: { side: Side; align: Alignment };
+	/** Where the content popover sits relative to the panel. Defaults to right/center. */
+	contentPosition?: { side: Side; align: Alignment };
+	/** When true (default), the panel closes on deselect of the content step.
+	 *  Set to false when the panel hosts the opener of the next step (e.g. the
+	 *  Block Library hosts the Toolbox-Manager button) — closing it would
+	 *  destroy the next step's target. The session still tracks the panel,
+	 *  so cleanup at tour end will close it. */
+	autoClose?: boolean;
+}
+
+/** Two-step pair: toggle button → content panel. The content step closes
+ *  the panel on deselect (when the user moves to the next step), so panels
+ *  don't accumulate as the tour progresses. */
+export function panelStep(opts: PanelStep): DriveStep[] {
+	const toggle: DriveStep = {
+		element: T.panelToggle(opts.name),
+		popover: {
+			title: panelTitle(opts.name) + ' Toggle',
+			description: opts.toggleBody,
+			side: opts.togglePosition?.side ?? 'right',
+			align: opts.togglePosition?.align ?? 'start',
+			onNextClick: openOnNext(async () => {
+				await openPanel(opts.name);
+				getCurrentSession()?.trackOpenedPanel(opts.name);
+			})
+		}
+	};
+	const autoClose = opts.autoClose !== false;
+	const content: DriveStep = {
+		element: T.panelContent(opts.name),
+		popover: {
+			title: panelTitle(opts.name),
+			description: opts.contentBody,
+			side: opts.contentPosition?.side ?? 'right',
+			align: opts.contentPosition?.align ?? 'center'
+		},
+		onDeselected: autoClose
+			? () => {
+					void closePanel(opts.name);
+					getCurrentSession()?.untrackPanel(opts.name);
+				}
+			: undefined
+	};
+	return [toggle, content];
+}
+
+const PANEL_TITLES: Record<PanelName, string> = {
+	blocks: 'Block Library',
+	subsystems: 'Subsystems',
+	simulation: 'Simulation Settings',
+	editor: 'Code Editor',
+	events: 'Events',
+	results: 'Results / Plots',
+	console: 'Console'
+};
+function panelTitle(name: PanelName): string {
+	return PANEL_TITLES[name] ?? name;
+}
+
+/* --- Dialog steps ----------------------------------------------------- */
+
+export interface DialogStep {
+	/** Which dialog kind (CSS via data-tour). */
+	dialog: DialogKind;
+	/** What the user clicks to *open* the dialog. */
+	opener:
+		| { kind: 'toolbar'; action: ToolbarAction }
+		| { kind: 'toolboxButton' } // icon at the top of the Block Library panel
+		| { kind: 'searchShortcut' } // Ctrl/Cmd+F
+		| { kind: 'custom'; open: () => Promise<void>; selector: string };
+	/** Title for the opener step. */
+	openerTitle: string;
+	/** Body for the opener step. */
+	openerBody: string;
+	/** Title for the content step. */
+	contentTitle: string;
+	/** Body for the content step. */
+	contentBody: string;
+	/** Where the opener popover sits. Defaults to bottom/end (toolbar buttons). */
+	openerPosition?: { side: Side; align: Alignment };
+	/** Where the content popover sits relative to the dialog. */
+	contentPosition?: { side: Side; align: Alignment };
+	/** Inject a footer button on the content step (e.g. "Continue with Modeling"). */
+	onContentPopoverRender?: DriveStep['popover'] extends infer P
+		? P extends { onPopoverRender?: infer F }
+			? F
+			: never
+		: never;
+}
+
+/** Two-step pair: opener button → dialog content. The content step closes
+ *  the dialog on Next via closeAllDialogs(), so users always continue with
+ *  a clean slate. */
+export function dialogStep(opts: DialogStep): DriveStep[] {
+	const opener = makeDialogOpener(opts);
+	const dialogSelector = T.dialog(opts.dialog);
+	const isFloatingOpener = opts.opener.kind === 'searchShortcut';
+
+	const openerStep: DriveStep = {
+		element: opener.selector,
+		popover: {
+			...(isFloatingOpener ? FLOATING_POPOVER : {}),
+			title: opts.openerTitle,
+			description: opts.openerBody,
+			side: opts.openerPosition?.side ?? (isFloatingOpener ? 'top' : 'bottom'),
+			align: opts.openerPosition?.align ?? 'end',
+			onNextClick: openOnNext(opener.open)
+		}
+	};
+	const contentStep: DriveStep = {
+		element: dialogSelector,
+		popover: {
+			title: opts.contentTitle,
+			description: opts.contentBody,
+			side: opts.contentPosition?.side ?? 'left',
+			align: opts.contentPosition?.align ?? 'center',
+			onNextClick: openOnNext(closeAllDialogs),
+			onPopoverRender: opts.onContentPopoverRender
+		}
+	};
+	return [openerStep, contentStep];
+}
+
+function makeDialogOpener(opts: DialogStep): {
+	selector: string | (() => Element);
+	open: () => Promise<void>;
+} {
+	switch (opts.opener.kind) {
+		case 'toolbar': {
+			const action = opts.opener.action;
+			return {
+				selector: T.toolbarButton(action),
+				open: () => clickToolbar(action, opts.dialog)
+			};
+		}
+		case 'toolboxButton':
+			return {
+				selector: T.openToolboxManager,
+				open: openToolboxManager
+			};
+		case 'searchShortcut':
+			// Search opens via Ctrl/Cmd+F only — no real button to highlight,
+			// so the opener step is a floating popover at the bottom-right.
+			return {
+				selector: () => getCornerAnchor('bottom-right'),
+				open: openSearchDialog
+			};
+		case 'custom':
+			return { selector: opts.opener.selector, open: opts.opener.open };
+	}
+}
+
+/* --- Action / customization steps ------------------------------------- */
+
+export interface ActionStep {
+	/** Title for the "locate" step (which element will be acted on). */
+	locateTitle: string;
+	/** Body for the locate step ("Click Next to apply X"). */
+	locateBody: string;
+	/** What the locate step highlights — accepts a static selector or a
+	 *  function returning an Element (for dynamic targets like a block). */
+	locate: string | (() => Element);
+	/** Side/align for the locate popover. */
+	locatePosition?: { side: Side; align: Alignment };
+	/** The mutation: applied when the user clicks Next on the locate step. */
+	apply: () => Promise<void>;
+	/** Title for the result step (after the change is applied). */
+	resultTitle: string;
+	/** Body for the result step. */
+	resultBody: string;
+	/** What the result step highlights — typically the affected canvas block. */
+	result: string | (() => Element);
+	/** Side/align for the result popover. */
+	resultPosition?: { side: Side; align: Alignment };
+	/** Run before the result step is highlighted (e.g. close the dialog
+	 *  that the apply step opened, so the user can see the canvas change). */
+	beforeResult?: () => void;
+	/** Hook to run on the result step after Next is clicked (e.g. re-open the
+	 *  properties dialog so the next locate step finds its field in the DOM). */
+	onResultNext?: DriverHook;
+}
+
+/** Three-act pattern for "show me a thing → apply a change → see the result":
+ *    1. locate step with onNextClick:apply, then advance,
+ *    2. result step on the affected canvas element.
+ *  The result step optionally cleans up a side effect of the apply.
+ */
+export function actionStep(opts: ActionStep): DriveStep[] {
+	return [
+		{
+			element: opts.locate,
+			popover: {
+				title: opts.locateTitle,
+				description: opts.locateBody,
+				side: opts.locatePosition?.side ?? 'left',
+				align: opts.locatePosition?.align ?? 'start',
+				onNextClick: openOnNext(opts.apply)
+			}
+		},
+		{
+			element: opts.result,
+			onHighlightStarted: opts.beforeResult,
+			popover: {
+				title: opts.resultTitle,
+				description: opts.resultBody,
+				side: opts.resultPosition?.side ?? 'right',
+				align: opts.resultPosition?.align ?? 'center',
+				onNextClick: opts.onResultNext
+			}
+		}
+	];
+}
+
+/* --- Single-block steps ----------------------------------------------- */
+
+export interface BlockStep {
+	title: string;
+	body: string;
+	block: string | (() => Element);
+	side?: Side;
+	align?: Alignment;
+	onHighlightStarted?: DriveStep['onHighlightStarted'];
+	onHighlighted?: DriveStep['onHighlighted'];
+	onDeselected?: DriveStep['onDeselected'];
+	onNextClick?: DriverHook;
+}
+
+/** Highlight a single block on the canvas. */
+export function blockStep(opts: BlockStep): DriveStep {
+	return {
+		element: opts.block,
+		onHighlightStarted: opts.onHighlightStarted,
+		onHighlighted: opts.onHighlighted,
+		onDeselected: opts.onDeselected,
+		popover: {
+			title: opts.title,
+			description: opts.body,
+			side: opts.side ?? 'right',
+			align: opts.align ?? 'center',
+			onNextClick: opts.onNextClick
+		}
+	};
+}
+
+/* --- Generic single-element step (raw escape hatch) ------------------- */
+
+export interface RawStep {
+	element: string | (() => Element);
+	title: string;
+	body: string;
+	side?: Side;
+	align?: Alignment;
+	onHighlightStarted?: DriveStep['onHighlightStarted'];
+	onDeselected?: DriveStep['onDeselected'];
+	onNextClick?: DriverHook;
+	popoverClass?: string;
+	onPopoverRender?: DriveStep['popover'] extends infer P
+		? P extends { onPopoverRender?: infer F }
+			? F
+			: never
+		: never;
+}
+
+/** Single DriveStep with sensible defaults. Use when the higher-level
+ *  helpers don't fit (theme toggle, files toolbar group, breadcrumb, …). */
+export function rawStep(opts: RawStep): DriveStep {
+	return {
+		element: opts.element,
+		onHighlightStarted: opts.onHighlightStarted,
+		onDeselected: opts.onDeselected,
+		popover: {
+			title: opts.title,
+			description: opts.body,
+			side: opts.side ?? 'right',
+			align: opts.align ?? 'center',
+			popoverClass: opts.popoverClass,
+			onNextClick: opts.onNextClick,
+			onPopoverRender: opts.onPopoverRender
+		}
+	};
+}
diff --git a/src/lib/tours/index.ts b/src/lib/tours/index.ts
new file mode 100644
index 00000000..683772a4
--- /dev/null
+++ b/src/lib/tours/index.ts
@@ -0,0 +1,92 @@
+/**
+ * Public entry point for guided tours.
+ *
+ *   await startGuidedTour('start' | 'modeling' | 'simulation');
+ *
+ * The flow:
+ *   1. Ask the user whether to load the paired demo model.
+ *   2. Optionally load it (with a fitView grace period).
+ *   3. Build the step list and wrap each step's `onHighlightStarted`
+ *      so the body-mode CSS class is set/cleared as we move.
+ *   4. Start a TourSession and hand it to driver.js.
+ *   5. Run the script's `setup` hook (e.g. snapshot global toggles).
+ *   6. Drive.
+ */
+
+import { driver, type DriveStep, type Config } from 'driver.js';
+import 'driver.js/dist/driver.css';
+import './tour.css';
+
+import { confirmationStore } from '$lib/stores/confirmation';
+import { TourSession } from './session';
+import { loadDemo } from './actions';
+import type { TourId, TourScript } from './types';
+import { startTour } from './scripts/start';
+import { modelingTour } from './scripts/modeling';
+import { simulationTour } from './scripts/simulation';
+
+const TOURS: Record<TourId, TourScript> = {
+	start: startTour,
+	modeling: modelingTour,
+	simulation: simulationTour
+};
+
+/** Wrap each step's `onHighlightStarted` so the body-mode class is set/cleared
+ *  before any per-step hook runs. driver.js's global onHighlightStarted is
+ *  overridden by per-step hooks, so we have to inject step-by-step. */
+function wrapStepsWithBodyMode(steps: DriveStep[]): DriveStep[] {
+	return steps.map((step) => {
+		const popoverClass = step.popover?.popoverClass ?? '';
+		const isFloating = popoverClass.includes('tour-floating');
+		const original = step.onHighlightStarted;
+		return {
+			...step,
+			onHighlightStarted: (el, s, opts) => {
+				document.body.classList.toggle('tour-floating-mode', isFloating);
+				original?.(el, s, opts);
+			}
+		};
+	});
+}
+
+function baseConfig(steps: DriveStep[]): Config {
+	return {
+		showProgress: true,
+		allowClose: true,
+		stagePadding: 6,
+		stageRadius: 8,
+		smoothScroll: true,
+		nextBtnText: 'Next →',
+		prevBtnText: '← Back',
+		doneBtnText: 'Got it',
+		steps: wrapStepsWithBodyMode(steps)
+	};
+}
+
+export async function startGuidedTour(id: TourId): Promise<void> {
+	const script = TOURS[id];
+
+	const wantsLoad = await confirmationStore.show({
+		title: 'Load demo model?',
+		message: `This tour works best with the "${script.demoName}" example model. Loading replaces your current graph — save first if needed.`,
+		confirmText: 'Load demo',
+		cancelText: 'Continue without'
+	});
+
+	if (wantsLoad) {
+		await loadDemo(script.demoFile);
+	}
+
+	const tourDriver = driver(baseConfig(script.build()));
+	const session = TourSession.start(tourDriver);
+	// driver.js skips its own teardown when onDestroyStarted is set —
+	// route everything through the session for atomic cleanup.
+	tourDriver.setConfig({
+		...tourDriver.getConfig(),
+		onDestroyStarted: () => void session.end()
+	});
+	script.setup?.(session);
+	tourDriver.drive();
+}
+
+export type { TourId } from './types';
diff --git a/src/lib/tours/inputMode.ts b/src/lib/tours/inputMode.ts
new file mode 100644
index 00000000..fbba962c
--- /dev/null
+++ b/src/lib/tours/inputMode.ts
@@ -0,0 +1,17 @@
+/**
+ * Global input-mode flag. While a tour is running, pathview's own keyboard
+ * handlers (canvas pan, node nudge, shortcut hotkeys, …) check this flag
+ * and bow out so driver.js's navigation isn't fighting them.
+ *
+ * Cleaner than the previous approach of intercepting arrow keys at capture
+ * phase on `window` and synthetically clicking driver.js's nav buttons.
+ */
+import { writable, get } from 'svelte/store';
+
+export type InputMode = 'normal' | 'tour';
+
+export const inputMode = writable<InputMode>('normal');
+
+/** Synchronous read of the current mode. Use this in keydown handlers
+ *  for an early `return` before any preventDefault. */
+export const isTourActive = (): boolean => get(inputMode) === 'tour';
diff --git a/src/lib/tours/liveDemo.ts b/src/lib/tours/liveDemo.ts
new file mode 100644
index 00000000..b0ae0104
--- /dev/null
+++ b/src/lib/tours/liveDemo.ts
@@ -0,0 +1,50 @@
+/**
+ * Small live-demo helpers for tour steps that animate something on the
+ * canvas (currently just block rotation; future tours might add ports
+ * dance, signal-flow pulse, etc.). Each helper registers its cleanup on
+ * the active TourSession so a tour-end mid-animation cancels cleanly.
+ */
+
+import { graphStore } from '$lib/stores/graph';
+import { triggerFitView } from '$lib/stores/viewActions';
+import { getCurrentSession } from './session';
+import { findBlockId, type BlockLookup } from './blocks';
+
+/** Rotate a block 4× by 90° with a delay between each turn so the
+ *  Transform step demonstrates the shortcut visually. After one full
+ *  revolution the block is back to its original orientation.
+ *
+ *  Auto-cancelled if the tour ends mid-animation. */
+export function startRotationDemo(
+	lookup: BlockLookup,
+	{ stepMs = 450, turns = 4 } = {}
+): void {
+	const session = getCurrentSession();
+	if (!session) return;
+
+	const id = findBlockId(lookup);
+	if (!id) return;
+
+	let n = 0;
+	let timer: ReturnType<typeof setTimeout> | null = null;
+
+	const cancel = () => {
+		if (timer !== null) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+
+	const tick = () => {
+		const node = graphStore.getNode(id);
+		const current = ((node?.params?.['_rotation'] as number) ?? 0) % 4;
+		graphStore.updateNodeParams(id, { _rotation: (current + 1) % 4 });
+		triggerFitView();
+		n++;
+		if (n < turns) timer = setTimeout(tick, stepMs);
+		else timer = null;
+	};
+
+	timer = setTimeout(tick, stepMs);
+	session.registerCleanup(cancel);
+}
diff --git a/src/lib/tours/popoverButtons.ts b/src/lib/tours/popoverButtons.ts
new file mode 100644
index 00000000..710bb992
--- /dev/null
+++ b/src/lib/tours/popoverButtons.ts
@@ -0,0 +1,37 @@
+/**
+ * Helpers that inject custom buttons into the driver.js popover footer.
+ *
+ * Currently just `addNextTourButton`, which adds a "Continue with X →" button
+ * between Back and Done so the user can chain into the next tour without
+ * going back to the welcome banner.
+ */
+
+import type { Driver } from 'driver.js';
+import { getCurrentSession } from './session';
+import type { TourId } from './types';
+
+interface PopoverFooter {
+	footerButtons: HTMLElement;
+	nextButton: HTMLElement;
+}
+
+/** Add a custom "Continue with X →" button to the popover footer. The
+ *  button ends the current tour cleanly and starts the next one after a
+ *  short delay (so cleanup transitions can finish). */
+export function addNextTourButton(nextId: TourId, label: string) {
+	return (popover: PopoverFooter, _opts: { driver: Driver }) => {
+		if (popover.footerButtons.querySelector('.tour-next-btn')) return;
+		const btn = document.createElement('button');
+		btn.type = 'button';
+		btn.classList.add('tour-next-btn');
+		btn.textContent = label;
+		btn.addEventListener('click', async () => {
+			// End current session (cleans up panels, dialogs, anchors, snapshots).
+			await getCurrentSession()?.end();
+			// Dynamic import breaks the popoverButtons → index → scripts cycle.
+			const { startGuidedTour } = await import('./index');
+			setTimeout(() => void startGuidedTour(nextId), 220);
+		});
+		popover.footerButtons.insertBefore(btn, popover.nextButton);
+	};
+}
diff --git a/src/lib/tours/scripts/modeling.ts b/src/lib/tours/scripts/modeling.ts
new file mode 100644
index 00000000..a085e5bb
--- /dev/null
+++ b/src/lib/tours/scripts/modeling.ts
@@ -0,0 +1,373 @@
+/**
+ * Modeling tour — building & customising blocks.
+ *
+ * Pairs with the `squarewave-lpf` demo: a Signal source feeds a Butterworth
+ * lowpass filter. The tour customises the filter (name, LaTeX name, color),
+ * pins a parameter on the source, and toggles the global Icon mode +
+ * Port Labels.
+ */
+
+import type { TourScript } from '../types';
+import {
+	intro,
+	floatingStep,
+	dialogStep,
+	actionStep,
+	blockStep,
+	rawStep
+} from '../builder';
+import {
+	openBlockProperties,
+	closeBlockProperties,
+	setBlockName,
+	setBlockColor,
+	pinFirstParam,
+	applyChange,
+	ANIM
+} from '../actions';
+import { findBlockElement } from '../blocks';
+import { graphStore } from '$lib/stores/graph';
+import { iconModeStore } from '$lib/stores/iconMode';
+import { portLabelsStore } from '$lib/stores/portLabels';
+import { closeNodeDialog } from '$lib/stores/nodeDialog';
+import { triggerFitView } from '$lib/stores/viewActions';
+import { startRotationDemo } from '../liveDemo';
+import { addNextTourButton } from '../popoverButtons';
+import { T } from '../targets';
+
+const SIGNAL = { name: 'Signal' };
+const LPF = { name: 'LPF' };
+
+const DEMO_COLOR = '#e25c5c';
+const DEMO_LATEX_NAME = 'LP $\\frac{1}{1 + (s/\\omega_c)^N}$';
+
+/** Close the properties dialog and re-fit the canvas so a result step
+ *  shows the change without the dialog covering it. */
+function showCanvasChange() {
+	closeNodeDialog();
+	setTimeout(() => triggerFitView(), 200);
+}
+
+export const modelingTour: TourScript = {
+	id: 'modeling',
+	displayName: 'Modeling',
+	demoFile: 'squarewave-lpf.json',
+	demoName: 'Squarewave LPF',
+	next: 'simulation',
+	setup: (session) => {
+		// Snapshot global toggles so the tour leaves them as we found them.
+		session.snapshot(iconModeStore, portLabelsStore);
+	},
+	build: () => [
+		intro({
+			title: 'Modeling Tour',
+			body: `
+				<p>How to build and customise blocks: selection, transform, properties, pinning, naming, colors, icons, port labels and annotations.</p>
+				<p>The demo model is loaded so each step refers to a concrete block.</p>
+			`
+		}),
+
+		blockStep({
+			block: () => findBlockElement(SIGNAL),
+			onHighlightStarted: () => {
+				const id = graphStore.getAllNodes().find((n) => n.name === SIGNAL.name)?.id;
+				if (id) graphStore.selectNode(id);
+			},
+			title: 'Selection',
+			body: `
+				<p>The first block is now selected (notice the highlight on the canvas).</p>
+				<ul>
+					<li>Click a block to select it</li>
+					<li><kbd>Shift</kbd>+click adds to selection</li>
+					<li><kbd>Shift</kbd>+drag draws a marquee box</li>
+				</ul>
+				<table>
+					<tr><td>Select all</td><td><kbd>Ctrl/Cmd+A</kbd></td></tr>
+					<tr><td>Deselect</td><td><kbd>Esc</kbd></td></tr>
+				</table>
+			`
+		}),
+
+		blockStep({
+			block: () => findBlockElement(SIGNAL),
+			onHighlighted: () => startRotationDemo(SIGNAL),
+			title: 'Transform',
+			body: `
+				<p>Once a block (or several) is selected, transform with these shortcuts. Watch the source block rotate through a full revolution:</p>
+				<table>
+					<tr><td>Rotate 90°</td><td><kbd>R</kbd></td></tr>
+					<tr><td>Flip horizontal</td><td><kbd>X</kbd></td></tr>
+					<tr><td>Flip vertical</td><td><kbd>Y</kbd></td></tr>
+					<tr><td>Nudge</td><td>arrow keys</td></tr>
+					<tr><td>Nudge × 10</td><td><kbd>Shift</kbd>+arrow</td></tr>
+				</table>
+			`
+		}),
+
+		floatingStep({
+			title: 'Edit Operations',
+			body: `
+				<table>
+					<tr><td>Undo</td><td><kbd>Ctrl/Cmd+Z</kbd></td></tr>
+					<tr><td>Redo</td><td><kbd>Ctrl/Cmd+Y</kbd></td></tr>
+					<tr><td>Cut</td><td><kbd>Ctrl/Cmd+X</kbd></td></tr>
+					<tr><td>Copy</td><td><kbd>Ctrl/Cmd+C</kbd></td></tr>
+					<tr><td>Paste</td><td><kbd>Ctrl/Cmd+V</kbd></td></tr>
+					<tr><td>Duplicate</td><td><kbd>Ctrl/Cmd+D</kbd></td></tr>
+					<tr><td>Delete</td><td><kbd>Del</kbd></td></tr>
+				</table>
+				<p>Paste lands at the cursor; duplicate offsets slightly from the original.</p>
+			`
+		}),
+
+		rawStep({
+			element: '.svelte-flow__node',
+			title: 'Right-click Context Menu',
+			body: `
+				<p>Right-click on any block, edge or canvas area for context-sensitive actions:</p>
+				<ul>
+					<li>Properties, View Code, Export</li>
+					<li>Duplicate, Copy, Delete</li>
+					<li>Toggle Icon mode and Port Labels per-block</li>
+					<li>Edge: Reset Route to clear manual waypoints</li>
+				</ul>
+			`,
+			side: 'right',
+			align: 'start'
+		}),
+
+		// Open the LPF block's properties — explicit so the next steps
+		// (Names, Color, …) don't silently switch blocks.
+		blockStep({
+			block: () => findBlockElement(LPF),
+			title: 'Open Block Properties',
+			body: `<p>Double-click any block to open its Properties dialog. The next steps customise the <strong>Butterworth filter</strong> block on the right — Click <strong>Next</strong> to open its properties.</p>`,
+			side: 'right',
+			align: 'start',
+			onNextClick: (_el, _s, opts) => {
+				const id = graphStore.getAllNodes().find((n) => n.name === LPF.name)?.id;
+				if (id) {
+					void openBlockProperties(id).then(() => opts.driver.moveNext());
+				} else {
+					opts.driver.moveNext();
+				}
+			}
+		}),
+
+		rawStep({
+			element: T.dialog('properties'),
+			title: 'Block Properties',
+			body: `
+				<p>Every parameter is editable here:</p>
+				<ul>
+					<li>Numeric, string, callable, list parameters</li>
+					<li>Display name (rename for clarity)</li>
+					<li>Color picker for the accent</li>
+					<li>Pin parameters to surface them on the canvas</li>
+				</ul>
+			`,
+			side: 'left',
+			align: 'center'
+			// Dialog stays open — next step highlights the Name field inside it.
+		}),
+
+		...actionStep({
+			locate: T.blockField('name-input'),
+			locateTitle: 'Block Names',
+			locateBody: `
+				<p>The Name field for the filter. The display name is independent of the block's type — you can describe what it does in your model.</p>
+				<p>Click <strong>Next</strong> to rename it to <strong>Lowpass Filter</strong>.</p>
+			`,
+			locatePosition: { side: 'left', align: 'start' },
+			apply: async () => {
+				const id = graphStore.getAllNodes().find((n) => n.name === LPF.name)?.id;
+				if (id) await setBlockName(id, 'Lowpass Filter');
+			},
+			result: () => findBlockElement({ name: 'Lowpass Filter' }),
+			resultTitle: 'Renamed',
+			resultBody: `<p>The filter on the canvas now shows <strong>Lowpass Filter</strong>. Edit names directly in the field in the dialog, or double-click a block to open Properties.</p>`,
+			beforeResult: showCanvasChange,
+			onResultNext: (_el, _s, opts) => {
+				const id = graphStore
+					.getAllNodes()
+					.find((n) => n.name === 'Lowpass Filter')?.id;
+				if (id) {
+					void openBlockProperties(id).then(() => opts.driver.moveNext());
+				} else {
+					opts.driver.moveNext();
+				}
+			}
+		}),
+
+		...actionStep({
+			locate: T.blockField('name-input'),
+			locateTitle: 'LaTeX in Names',
+			locateBody: `
+				<p>Block names support inline math with <code>$…$</code> for KaTeX rendering. The field keeps the source, the canvas shows the rendered math.</p>
+				<p>Click <strong>Next</strong> to set the name to a LaTeX expression.</p>
+			`,
+			locatePosition: { side: 'left', align: 'start' },
+			apply: async () => {
+				const id = graphStore
+					.getAllNodes()
+					.find((n) => n.name === 'Lowpass Filter')?.id;
+				if (id) await setBlockName(id, DEMO_LATEX_NAME, ANIM.keatexRender);
+			},
+			result: () => findBlockElement({ name: DEMO_LATEX_NAME }),
+			resultTitle: 'Math Rendered',
+			resultBody: `<p>The same block on the canvas now shows the rendered transfer function. The block resizes to fit the math glyph.</p>`,
+			beforeResult: showCanvasChange,
+			onResultNext: (_el, _s, opts) => {
+				const id = graphStore
+					.getAllNodes()
+					.find((n) => n.name === DEMO_LATEX_NAME)?.id;
+				if (id) {
+					void openBlockProperties(id).then(() => opts.driver.moveNext());
+				} else {
+					opts.driver.moveNext();
+				}
+			}
+		}),
+
+		...actionStep({
+			locate: T.blockField('color-picker'),
+			locateTitle: 'Block Colors',
+			locateBody: `
+				<p>Each block has its own accent color you can pick here. Useful to group blocks belonging to the same logical signal path or subsystem.</p>
+				<p>Click <strong>Next</strong> to apply a new color.</p>
+			`,
+			locatePosition: { side: 'right', align: 'center' },
+			apply: async () => {
+				const id = graphStore
+					.getAllNodes()
+					.find((n) => n.name === DEMO_LATEX_NAME)?.id;
+				if (id) await setBlockColor(id, DEMO_COLOR);
+			},
+			result: () => findBlockElement({ name: DEMO_LATEX_NAME }),
+			resultTitle: 'Color Applied',
+			resultBody: `<p>The block now has a custom accent color on the canvas. The color also applies to the block's pinned parameters, ports and selection highlight.</p>`,
+			beforeResult: showCanvasChange
+		}),
+
+		blockStep({
+			block: () => findBlockElement(SIGNAL),
+			title: 'Switching Blocks',
+			body: `<p>Now over to the <strong>Signal</strong> source block on the left to demo parameter pinning. Click <strong>Next</strong> to open its properties.</p>`,
+			onNextClick: (_el, _s, opts) => {
+				const id = graphStore
+					.getAllNodes()
+					.find((n) => n.name === SIGNAL.name)?.id;
+				if (id) {
+					void openBlockProperties(id).then(() => opts.driver.moveNext());
+				} else {
+					opts.driver.moveNext();
+				}
+			}
+		}),
+
+		...actionStep({
+			locate: T.blockField('pin-btn'),
+			locateTitle: 'Parameter Pinning',
+			locateBody: `
+				<p>Each parameter has a pin icon. Pinning surfaces the parameter directly on the block, editable inline on the canvas.</p>
+				<p>Click <strong>Next</strong> to pin the first parameter of the source.</p>
+			`,
+			locatePosition: { side: 'left', align: 'start' },
+			apply: pinFirstParam,
+			result: () => findBlockElement(SIGNAL),
+			resultTitle: 'Pinned Parameter',
+			resultBody: `<p>The first parameter is now visible on the source block, editable inline. Useful for tweaking gain, frequency, time constant or initial value without re-opening the dialog every time.</p>`,
+			beforeResult: () => closeBlockProperties()
+		}),
+
+		floatingStep({
+			title: 'Block Icons',
+			corner: 'bottom-right',
+			body: `
+				<p>A global setting that swaps every block's text label for a Simulink-style icon: a programmatic plot, math glyph or schematic symbol.</p>
+				<p>Click <strong>Next</strong> to enable icon mode.</p>
+				<ul>
+					<li>Global toggle: <kbd>I</kbd></li>
+					<li>Per-block override: right-click → "Show as Icon" / "Show as Text"</li>
+				</ul>
+			`
+		}),
+		// Inject the apply on the previous step's Next via a tail-modifier.
+		// (The floatingStep helper doesn't take onNextClick; mutate here.)
+
+		floatingStep({
+			title: 'Icons Active',
+			corner: 'bottom-right',
+			body: `<p>Every block now shows its programmatic icon. Icon mode resets to your previous preference when the tour ends.</p>`
+		}),
+
+		floatingStep({
+			title: 'Port Labels',
+			corner: 'bottom-right',
+			body: `
+				<p>Another global toggle that shows input and output port names on every block. Useful for blocks with many ports (StateSpace, Subsystem, Function).</p>
+				<p>Click <strong>Next</strong> to enable port labels.</p>
+				<ul>
+					<li>Global toggle: <kbd>L</kbd></li>
+					<li>Per-block override: right-click context menu</li>
+				</ul>
+			`
+		}),
+
+		floatingStep({
+			title: 'Port Labels Active',
+			corner: 'bottom-right',
+			body: `<p>Every block now shows its port names. Both icon mode and port labels also have per-block overrides via the right-click menu.</p>`
+		}),
+
+		rawStep({
+			element: () =>
+				document.querySelector('.annotation')?.closest('.svelte-flow__node') ??
+				document.querySelector(T.canvasPane) ??
+				document.body,
+			title: 'Canvas Annotations',
+			body: `
+				<p>The note already on the canvas is a Canvas Annotation that comes with this demo. Right-click on empty canvas → <strong>Add Annotation</strong> to drop your own.</p>
+				<p>Annotations support Markdown and LaTeX, with adjustable font size via the annotation's context menu. Use them for inline documentation, equations or reminders.</p>
+				<p>That's the modeling tour. The Simulation tour shows how to run and inspect the model.</p>
+			`,
+			side: 'right',
+			align: 'center',
+			onPopoverRender: addNextTourButton('simulation', 'Continue with Simulation →')
+		})
+	].map((step, i, all) => {
+		// Wire the icon-mode + port-labels toggles onto the appropriate Next clicks.
+		// Block Icons → enable icon mode on Next; Port Labels → enable port labels on Next.
+		const title =
+			typeof step === 'object' && step !== null && 'popover' in step
+				? step.popover?.title
+				: undefined;
+		if (title === 'Block Icons') {
+			return {
+				...step,
+				popover: {
+					...step.popover,
+					onNextClick: (_el, _s, opts) => {
+						void applyChange(() => iconModeStore.set(true)).then(() =>
+							opts.driver.moveNext()
+						);
+					}
+				}
+			};
+		}
+		if (title === 'Port Labels') {
+			return {
+				...step,
+				popover: {
+					...step.popover,
+					onNextClick: (_el, _s, opts) => {
+						void applyChange(() => portLabelsStore.set(true)).then(() =>
+							opts.driver.moveNext()
+						);
+					}
+				}
+			};
+		}
+		return step;
+	})
+};
diff --git a/src/lib/tours/scripts/simulation.ts b/src/lib/tours/scripts/simulation.ts
new file mode 100644
index 00000000..cbdce098
--- /dev/null
+++ b/src/lib/tours/scripts/simulation.ts
@@ -0,0 +1,194 @@
+/**
+ * Simulation tour — running and inspecting a model.
+ *
+ * Pairs with the `bouncing-ball` demo: an event-driven oscillator with a
+ * recording block, so plots come alive when we run.
+ */
+
+import type { TourScript } from '../types';
+import {
+	intro,
+	floatingStep,
+	panelStep,
+	dialogStep,
+	rawStep
+} from '../builder';
+import {
+	openPanel,
+	runSimulation,
+	applyChange
+} from '../actions';
+import { getCurrentSession } from '../session';
+import { T } from '../targets';
+
+export const simulationTour: TourScript = {
+	id: 'simulation',
+	displayName: 'Simulation',
+	demoFile: 'bouncing-ball.json',
+	demoName: 'Bouncing Ball',
+	build: () => [
+		intro({
+			title: 'Simulation Tour',
+			body: `<p>Set up, run and inspect a simulation. The demo model has a recording block so plots come alive when we run.</p>`
+		}),
+
+		...panelStep({
+			name: 'simulation',
+			toggleBody: `<p>Opens the Simulation settings panel on the right.</p><p>Shortcut: <kbd>S</kbd></p>`,
+			contentBody: `
+				<p>Configure the integrator:</p>
+				<ul>
+					<li><strong>Duration</strong> and <strong>dt</strong> (initial / fixed step)</li>
+					<li><strong>Solver matrix</strong>: pick by Adaptive/Fixed × Explicit/Implicit
+						<ul>
+							<li>Adaptive: <code>RKBS32</code>, <code>RKCK54</code> (explicit), <code>GEAR52A</code>, <code>ESDIRK43</code> (implicit)</li>
+							<li>Fixed: <code>SSPRK22</code>, <code>RK4</code> (explicit), <code>BDF2</code> (implicit)</li>
+						</ul>
+					</li>
+					<li>Tolerances: <code>rtol</code>, <code>atol</code>, <code>ftol</code></li>
+					<li>Step limits: <code>dt_min</code>, <code>dt_max</code></li>
+					<li><strong>Ghost traces</strong> (0–8): keeps the last N runs faded behind the current trace, useful for tuning parameters and comparing runs side-by-side</li>
+				</ul>
+				<p>Run / Continue / Stop live on the toolbar at the top.</p>
+			`,
+			togglePosition: { side: 'left', align: 'center' },
+			contentPosition: { side: 'left', align: 'center' }
+		}),
+
+		...panelStep({
+			name: 'editor',
+			toggleBody: `<p>Opens the Python code editor.</p><p>Shortcut: <kbd>E</kbd></p>`,
+			contentBody: `
+				<p>Shared Python code for the whole graph. Anything defined here is available to blocks that take a callable:</p>
+				<ul>
+					<li><code>Function</code> — algebraic transforms</li>
+					<li><code>Source</code> — time-dependent inputs</li>
+					<li><code>ODE</code>, <code>DynamicalSystem</code> — right-hand sides</li>
+					<li><code>Switch</code>, <code>Wrapper</code>, conditions</li>
+				</ul>
+				<p>Use it for shared constants, helper functions, lookup tables.</p>
+			`
+		}),
+
+		...panelStep({
+			name: 'events',
+			toggleBody: `<p>Opens the Events panel.</p><p>Shortcut: <kbd>N</kbd></p>`,
+			contentBody: `
+				<p>Discrete events that interrupt or modify the integration:</p>
+				<ul>
+					<li><strong>Schedule</strong> — fire at fixed times</li>
+					<li><strong>ZeroCrossing</strong> — trigger when a signal crosses a threshold</li>
+					<li><strong>Condition</strong> — trigger when a Python expression turns true</li>
+				</ul>
+				<p>Each event can modify block parameters or call user code. The bouncing-ball demo uses an event for the floor collision.</p>
+			`
+		}),
+
+		rawStep({
+			element: T.toolbarButton('run'),
+			title: 'Run',
+			body: `
+				<p>Now we've seen everything that goes <em>into</em> a simulation. Click <strong>Next</strong> to actually run it and watch the live results fill in.</p>
+				<p>Shortcut: <kbd>Ctrl/Cmd+Enter</kbd></p>
+			`,
+			side: 'bottom',
+			align: 'center',
+			onNextClick: (_el, _s, opts) => {
+				void runSimulation().then(() => opts.driver.moveNext());
+			}
+		}),
+
+		rawStep({
+			element: T.panelContent('results'),
+			onHighlightStarted: () => {
+				void openPanel('results').then(() =>
+					getCurrentSession()?.trackOpenedPanel('results')
+				);
+			},
+			title: 'Results / Plots',
+			body: `
+				<p>The Results panel opens automatically on the first run. Live plots from <code>Scope</code> and <code>Spectrum</code> blocks update as the simulation progresses:</p>
+				<ul>
+					<li>Tabs per recording block, or single combined view</li>
+					<li>Pan, zoom, hover for values</li>
+					<li>Right-click for plot options and export to CSV</li>
+				</ul>
+				<p>Shortcut to toggle: <kbd>V</kbd></p>
+			`,
+			side: 'top',
+			align: 'center'
+		}),
+
+		rawStep({
+			element: T.panelContent('console'),
+			onHighlightStarted: () => {
+				void openPanel('console').then(() =>
+					getCurrentSession()?.trackOpenedPanel('console')
+				);
+			},
+			title: 'Console',
+			body: `
+				<p>The Console also opens automatically on the first run. It collects stdout, stderr and PathSim diagnostics:</p>
+				<ul>
+					<li>Solver warnings and progress messages</li>
+					<li><code>print()</code> output from your blocks</li>
+					<li>Errors with clickable links to the offending block</li>
+				</ul>
+				<p>Shortcut to toggle: <kbd>C</kbd></p>
+			`,
+			side: 'top',
+			align: 'center'
+		}),
+
+		rawStep({
+			element: T.toolbarButton('pin-previews'),
+			title: 'Pinned Plot Previews',
+			body: `
+				<p>Pin miniature plot previews directly next to recording blocks on the canvas. The trace stays visible without opening the Results panel.</p>
+				<p>Click <strong>Next</strong> to enable pinned previews.</p>
+				<p>Shortcut: <kbd>P</kbd></p>
+			`,
+			side: 'bottom',
+			align: 'end',
+			onNextClick: (_el, _s, opts) => {
+				void applyChange(() => {
+					document
+						.querySelector<HTMLButtonElement>(T.toolbarButton('pin-previews'))
+						?.click();
+				}).then(() => opts.driver.moveNext());
+			}
+		}),
+
+		floatingStep({
+			title: 'Continue & Stop',
+			corner: 'bottom-right',
+			body: `
+				<table>
+					<tr><td>Continue from current state</td><td><kbd>Shift+Enter</kbd></td></tr>
+					<tr><td>Stop</td><td><kbd>Esc</kbd></td></tr>
+				</table>
+				<p>Continue is useful for stepping through long runs interactively without resetting — adds wall-time without re-initialising state.</p>
+			`
+		}),
+
+		...dialogStep({
+			dialog: 'python-export',
+			opener: { kind: 'toolbar', action: 'export-python' },
+			openerTitle: 'Open Python Export',
+			openerBody: `<p>Generate a standalone Python script of the current simulation. Click <strong>Next</strong> to open it.</p>`,
+			openerPosition: { side: 'bottom', align: 'end' },
+			contentTitle: 'Python Export',
+			contentBody: `
+				<p>The exported script is self-contained — copy, save or send to the Codegen tool. Useful for:</p>
+				<ul>
+					<li>Codegen for production deployment</li>
+					<li>Version control of the simulation</li>
+					<li>Running headless outside the browser</li>
+				</ul>
+				<p>Shortcut: <kbd>Ctrl/Cmd+E</kbd></p>
+				<p>That's it — you've seen all three tours. Happy simulating!</p>
+			`,
+			contentPosition: { side: 'left', align: 'center' }
+		})
+	]
+};
diff --git a/src/lib/tours/scripts/start.ts b/src/lib/tours/scripts/start.ts
new file mode 100644
index 00000000..303aec05
--- /dev/null
+++ b/src/lib/tours/scripts/start.ts
@@ -0,0 +1,221 @@
+/**
+ * Start tour — editor walkthrough.
+ *
+ * Covers navigation, panels, view controls, files and help. Pairs with the
+ * `pid-subsystem` demo so the Subsystems step has something to drill into.
+ */
+
+import type { TourScript } from '../types';
+import type { DriverHook } from 'driver.js';
+import {
+	intro,
+	floatingStep,
+	panelStep,
+	dialogStep,
+	rawStep
+} from '../builder';
+import { closePanel, drillIntoFirstSubsystem, navigateToRoot } from '../actions';
+import { getCurrentSession } from '../session';
+import { addNextTourButton } from '../popoverButtons';
+
+export const startTour: TourScript = {
+	id: 'start',
+	displayName: 'Start',
+	demoFile: 'pid-subsystem.json',
+	demoName: 'PID Loop',
+	next: 'modeling',
+	build: () => [
+		intro({
+			title: 'Welcome',
+			body: `
+				<p>A walkthrough of the editor: navigation, panels, view controls, files and help.</p>
+				<p>Building and simulating are covered in the <strong>Modeling</strong> and <strong>Simulation</strong> tours.</p>
+				<p>Dismiss anytime with <kbd>×</kbd> or <kbd>Esc</kbd>.</p>
+			`
+		}),
+
+		rawStep({
+			element: '[data-tour="welcome-banner-logo"]',
+			title: 'Welcome Banner',
+			body: `<p>Click the logo anytime to reopen the welcome banner — restart any tour, browse examples or jump to docs and GitHub.</p>`,
+			side: 'bottom',
+			align: 'start'
+		}),
+
+		...panelStep({
+			name: 'blocks',
+			toggleBody: `<p>Opens the Block Library panel on the left.</p><p>Shortcut: <kbd>B</kbd></p>`,
+			contentBody: `
+				<p>Every available block grouped by category:</p>
+				<ul>
+					<li>Search by name across all categories</li>
+					<li>Drag onto canvas, or click to add at center</li>
+					<li>Hover any block for a preview tooltip</li>
+					<li>Categories collapse for cleaner navigation</li>
+				</ul>
+			`,
+			// The Toolbox-Manager opener button lives inside this panel, so
+			// keep it open across the next step. We close it manually when
+			// the toolbox dialog closes (below).
+			autoClose: false
+		}),
+
+		...dialogStep({
+			dialog: 'toolbox-manager',
+			opener: { kind: 'toolboxButton' },
+			openerTitle: 'Open Toolbox Manager',
+			openerBody: `
+				<p>This icon at the top of the Block Library opens the Toolbox Manager.</p>
+				<p>Click <strong>Next</strong> to open it.</p>
+			`,
+			openerPosition: { side: 'right', align: 'start' },
+			contentTitle: 'Toolbox Manager',
+			contentBody: `
+				<p>Install runtime toolboxes (flight, vehicle, batt, chem, …) on demand:</p>
+				<ul>
+					<li>New blocks appear in the library immediately after install</li>
+					<li>Toolboxes are loaded lazily so the base bundle stays small</li>
+					<li>Drop a toolbox URL or pick from the registry</li>
+				</ul>
+			`,
+			contentPosition: { side: 'right', align: 'center' }
+		}).map((step, i, all) =>
+			i === all.length - 1
+				? {
+						...step,
+						// After the toolbox dialog closes, also close the Blocks
+						// panel that hosted its opener.
+						onDeselected: () => {
+							void closePanel('blocks');
+							getCurrentSession()?.untrackPanel('blocks');
+						}
+					}
+				: step
+		),
+
+		floatingStep({
+			title: 'Canvas',
+			corner: 'bottom-right',
+			body: `
+				<p>The interactive working area:</p>
+				<ul>
+					<li>Drag blocks around — they snap to a grid</li>
+					<li>Drag from an output port to an input port to connect</li>
+					<li>Double-click a block for properties</li>
+					<li>Right-click for the context menu</li>
+					<li>Drag empty canvas to pan, scroll to zoom</li>
+				</ul>
+				<p>Modeling tour covers selection, transform and editing in detail.</p>
+			`
+		}),
+
+		...panelStep({
+			name: 'subsystems',
+			toggleBody: `<p>Opens the Subsystem tree panel. Visible once a Subsystem block exists in the graph.</p><p>Shortcut: <kbd>R</kbd></p>`,
+			contentBody: `
+				<p>Group blocks into Subsystems for hierarchy:</p>
+				<ul>
+					<li>Double-click a Subsystem on the canvas to drill in</li>
+					<li>Breadcrumb at the top tracks your current path</li>
+					<li>Tree gives an outline of all nested levels</li>
+				</ul>
+				<table>
+					<tr><td>Open tree</td><td><kbd>R</kbd></td></tr>
+					<tr><td>Go to root</td><td><kbd>H</kbd></td></tr>
+				</table>
+				<p>Click <strong>Next</strong> to drill into the subsystem.</p>
+			`
+		}).map((step, i, all) =>
+			// last (content) step: drill into subsystem on Next instead of just advancing
+			i === all.length - 1
+				? {
+						...step,
+						popover: {
+							...step.popover,
+							onNextClick: ((_el, _s, opts) => {
+								void drillIntoFirstSubsystem().then(() => opts.driver.moveNext());
+							}) satisfies DriverHook
+						}
+					}
+				: step
+		),
+
+		rawStep({
+			element: '[data-tour="breadcrumb"]',
+			title: 'Breadcrumb',
+			body: `
+				<p>You're now inside the subsystem — the canvas shows its internal blocks.</p>
+				<p>The breadcrumb at the top tracks your current path. Click any segment to jump back to that level, or press <kbd>H</kbd> to go straight to the root.</p>
+				<p>Click <strong>Next</strong> to navigate back to the root.</p>
+			`,
+			side: 'bottom',
+			align: 'start',
+			onNextClick: (_el, _s, opts) => {
+				void navigateToRoot().then(() => opts.driver.moveNext());
+			}
+		}),
+
+		...dialogStep({
+			dialog: 'search',
+			opener: { kind: 'searchShortcut' },
+			openerTitle: 'Find',
+			openerBody: `<p><kbd>Ctrl/Cmd+F</kbd> opens the search dialog. Click <strong>Next</strong> to open it now.</p>`,
+			contentTitle: 'Search Dialog',
+			contentBody: `<p>Type to filter blocks and events by name across the entire graph, including nested subsystems. Selecting a result jumps to the matching block.</p>`,
+			contentPosition: { side: 'bottom', align: 'center' }
+		}),
+
+		rawStep({
+			element: '[data-tour="toolbar-theme"]',
+			title: 'Theme',
+			body: `<p>Toggle between light and dark theme. Your choice is remembered across sessions.</p><p>Shortcut: <kbd>T</kbd></p>`,
+			side: 'bottom',
+			align: 'end'
+		}),
+
+		floatingStep({
+			title: 'View Controls',
+			corner: 'bottom-right',
+			body: `
+				<table>
+					<tr><td>Fit view</td><td><kbd>F</kbd></td></tr>
+					<tr><td>Zoom in</td><td><kbd>+</kbd></td></tr>
+					<tr><td>Zoom out</td><td><kbd>-</kbd></td></tr>
+					<tr><td>Pan</td><td>drag empty canvas</td></tr>
+					<tr><td>Zoom under cursor</td><td>scroll</td></tr>
+				</table>
+			`
+		}),
+
+		rawStep({
+			element: '[data-tour="toolbar-files"]',
+			title: 'Files & Sharing',
+			body: `
+				<p>Save and load <code>.pvm</code> files. Buttons left to right: New, Open, Save, Save As, View Python Code, Send to Codegen.</p>
+				<table>
+					<tr><td>Open</td><td><kbd>Ctrl/Cmd+O</kbd></td></tr>
+					<tr><td>Save</td><td><kbd>Ctrl/Cmd+S</kbd></td></tr>
+					<tr><td>Save as</td><td><kbd>Ctrl/Cmd+Shift+S</kbd></td></tr>
+					<tr><td>View Python</td><td><kbd>Ctrl/Cmd+E</kbd></td></tr>
+				</table>
+			`,
+			side: 'bottom',
+			align: 'center'
+		}),
+
+		...dialogStep({
+			dialog: 'shortcuts',
+			opener: { kind: 'toolbar', action: 'shortcuts' },
+			openerTitle: 'Open Keyboard Shortcuts',
+			openerBody: `<p>The full reference is grouped by category. Click <strong>Next</strong> to open it.</p>`,
+			openerPosition: { side: 'bottom', align: 'end' },
+			contentTitle: 'Keyboard Shortcuts',
+			contentBody: `
+				<p>Reference for every shortcut: file, edit, transform, view, panels and run.</p>
+				<p>Press <kbd>?</kbd> anywhere to open it.</p>
+				<p>That's the editor tour. Modeling shows how to build and customise blocks.</p>
+			`,
+			onContentPopoverRender: addNextTourButton('modeling', 'Continue with Modeling →')
+		})
+	]
+};
diff --git a/src/lib/tours/session.ts b/src/lib/tours/session.ts
new file mode 100644
index 00000000..0678fb58
--- /dev/null
+++ b/src/lib/tours/session.ts
@@ -0,0 +1,129 @@
+/**
+ * TourSession — atomic lifetime + cleanup for one tour run.
+ *
+ * Owns:
+ *   - the active driver.js instance,
+ *   - the set of panels the tour opened (so we can close them on cleanup),
+ *   - snapshots of global toggles (icon mode, port labels, …) so the tour
+ *     leaves the editor exactly as it found it,
+ *   - any cleanup callbacks registered during the run,
+ *   - the body-mode class for tour-specific CSS.
+ *
+ * Replaces the previous module-level globals (activeTour, tourOpenedPanels,
+ * savedIconMode, savedPortLabels, rotationDemoTimer). Hot-reload-safe:
+ * an interrupted session can be `.end()`ed and a fresh one started.
+ */
+
+import type { Driver } from 'driver.js';
+import { closePanel } from './actions';
+import { closeAllDialogs } from './actions';
+import { removeAllAnchors } from './anchors';
+import type { PanelName } from './targets';
+import { inputMode } from './inputMode';
+
+interface Snapshottable<T> {
+	get(): T;
+	set(value: T): void;
+}
+
+export type TourBodyMode = 'floating' | null;
+
+let currentSession: TourSession | null = null;
+
+export function getCurrentSession(): TourSession | null {
+	return currentSession;
+}
+
+export class TourSession {
+	private driver: Driver | null = null;
+	private cleanups: Array<() => void> = [];
+	private openedPanels = new Set<PanelName>();
+	private snapshots: Array<{ store: Snapshottable<unknown>; value: unknown }> = [];
+	private bodyMode: TourBodyMode = null;
+	private ended = false;
+
+	static start(driver: Driver): TourSession {
+		// Defensive: if a previous session leaked (hot-reload, crash), end it.
+		currentSession?.end();
+		const session = new TourSession();
+		session.driver = driver;
+		currentSession = session;
+		inputMode.set('tour');
+		return session;
+	}
+
+	getDriver(): Driver | null {
+		return this.driver;
+	}
+
+	/** Register a callback to run on `.end()`. Use for one-off resources
+	 *  (timers, event listeners, DOM nodes the tour adds). */
+	registerCleanup(fn: () => void): void {
+		this.cleanups.push(fn);
+	}
+
+	/** Track that this session opened a panel; cleanup will close it. */
+	trackOpenedPanel(name: PanelName): void {
+		this.openedPanels.add(name);
+	}
+
+	untrackPanel(name: PanelName): void {
+		this.openedPanels.delete(name);
+	}
+
+	/** Snapshot one or more stores' current values. They are restored on
+	 *  `.end()` so a tour that flips a toggle leaves the user's preference
+	 *  intact afterwards. */
+	snapshot<T>(...stores: Snapshottable<T>[]): void {
+		for (const store of stores) {
+			this.snapshots.push({
+				store: store as Snapshottable<unknown>,
+				value: store.get()
+			});
+		}
+	}
+
+	/** Switch body-mode class (CSS-driven tour behaviour like overlay-hide). */
+	setBodyMode(mode: TourBodyMode): void {
+		document.body.classList.toggle('tour-floating-mode', mode === 'floating');
+		this.bodyMode = mode;
+	}
+
+	/** Tear down everything this session created/changed. Idempotent. */
+	async end(): Promise<void> {
+		if (this.ended) return;
+		this.ended = true;
+
+		// 1. Per-step / ad-hoc resources first (timers, observers, …)
+		for (const fn of this.cleanups.splice(0)) {
+			try {
+				fn();
+			} catch {
+				// Tour cleanup must never throw — keep going.
+			}
+		}
+
+		// 2. UI artefacts: dialogs, panels, anchors, body-mode.
+		await closeAllDialogs();
+		for (const name of [...this.openedPanels]) {
+			await closePanel(name);
+		}
+		this.openedPanels.clear();
+		removeAllAnchors();
+		document.body.classList.remove('tour-floating-mode');
+		this.bodyMode = null;
+
+		// 3. Restore saved store values.
+		for (const { store, value } of this.snapshots) store.set(value);
+		this.snapshots = [];
+
+		// 4. Hand keyboard back to pathview.
+		inputMode.set('normal');
+
+		// 5. Driver itself last — it triggers driver.js onDestroyed.
+		this.driver?.destroy();
+		this.driver = null;
+
+		if (currentSession === this) currentSession = null;
+	}
+}
diff --git a/src/lib/tours/targets.ts b/src/lib/tours/targets.ts
new file mode 100644
index 00000000..3de92216
--- /dev/null
+++ b/src/lib/tours/targets.ts
@@ -0,0 +1,83 @@
+/**
+ * Tour-target selector helpers. Every selector used by a tour goes through
+ * this module — components carry `data-tour="..."` attributes (set in the
+ * Svelte source), and tour scripts call these helpers instead of hand-rolling
+ * CSS selectors. Refactor-safe: rename a panel toggle and only the data-tour
+ * attribute and the helper here change.
+ *
+ * Convention: data-tour values are kebab-case, lowercase, hierarchically
+ * scoped (e.g. `panel-toggle-blocks`, `dialog-properties`, `block-pin-btn`).
+ */
+
+export type PanelName =
+	| 'blocks'
+	| 'subsystems'
+	| 'simulation'
+	| 'editor'
+	| 'events'
+	| 'results'
+	| 'console';
+
+export type ToolbarAction =
+	| 'run'
+	| 'pin-previews'
+	| 'export-python'
+	| 'theme'
+	| 'shortcuts'
+	| 'files';
+
+export type DialogKind =
+	| 'toolbox-manager'
+	| 'search'
+	| 'properties'
+	| 'shortcuts'
+	| 'python-export';
+
+export type BlockField = 'name-input' | 'color-picker' | 'pin-btn';
+
+export const T = {
+	/** Toggle button on the left rail that opens/closes a panel. */
+	panelToggle: (name: PanelName): string => `[data-tour="panel-toggle-${name}"]`,
+
+	/** Content wrapper of an open panel (the ResizablePanel root). */
+	panelContent: (name: PanelName): string => `[data-tour="panel-${name}"]`,
+
+	/** Toolbar button at the top of the editor (Run, Theme, …). */
+	toolbarButton: (action: ToolbarAction): string =>
+		`[data-tour="toolbar-${action}"]`,
+
+	/** Dialog root. */
+	dialog: (kind: DialogKind): string => `[data-tour="dialog-${kind}"]`,
+
+	/** Field inside the open block-properties dialog. */
+	blockField: (field: BlockField): string => `[data-tour="block-${field}"]`,
+
+	/** Welcome banner / logo button (top-left). */
+	welcomeLogo: '[data-tour="welcome-banner-logo"]',
+
+	/** Toolbox-manager opener (icon at the top of the Block Library panel). */
+	openToolboxManager: '[data-tour="open-toolbox-manager"]',
+
+	/** Subsystem-path breadcrumb at the top centre. */
+	breadcrumb: '[data-tour="breadcrumb"]',
+
+	/** SvelteFlow canvas pane. */
+	canvasPane: '.svelte-flow__pane',
+
+	/** SvelteFlow node by graph node id. */
+	nodeById: (id: string): string => `.svelte-flow__node[data-id="${id}"]`,
+
+	/** First (any) annotation node on the canvas. */
+	annotation: '.annotation'
+} as const;
+
+/** Resolve a target selector to an Element, falling back to a sensible
+ *  default so a missing target doesn't crash the tour mid-step. */
+export function resolveTarget(selector: string, fallback?: Element): Element {
+	return (
+		document.querySelector(selector) ??
+		fallback ??
+		document.querySelector(T.canvasPane) ??
+		document.body
+	);
+}
diff --git a/src/lib/tours/tour.css b/src/lib/tours/tour.css
new file mode 100644
index 00000000..0cdbbaad
--- /dev/null
+++ b/src/lib/tours/tour.css
@@ -0,0 +1,238 @@
+/* Pathview-themed driver.js overrides + tour-specific body modes.
+ * Loaded once via the tour entry point (index.ts), so these styles only
+ * land in the bundle when a tour module is imported. */
+
+/* Theme-aware overlay: light scrim on dark, dark scrim on light. driver.js
+ * sets fill via inline attribute on the inner path, so we override with
+ * !important. Vars on :root so toggling theme updates immediately. */
+:root[data-theme='dark'],
+:root:not([data-theme]) {
+	--tour-overlay-color: rgba(255, 255, 255, 0.22);
+}
+
+:root[data-theme='light'] {
+	--tour-overlay-color: rgba(0, 0, 0, 0.55);
+}
+
+.driver-overlay,
+.driver-overlay path {
+	fill: var(--tour-overlay-color) !important;
+}
+
+/* Floating intro/outro steps anchor to an invisible 1×1 div in the corner so
+ * the popover lands top-right or bottom-right. The anchor would otherwise
+ * leave a tiny rectangular cutout in the overlay — hide the overlay entirely
+ * for these steps. The popover stays visible (rendered outside the overlay). */
+body.tour-floating-mode .driver-overlay {
+	display: none !important;
+}
+
+.driver-popover {
+	background-color: var(--surface) !important;
+	color: var(--text) !important;
+	border: 1px solid var(--border) !important;
+	border-radius: var(--radius-lg) !important;
+	box-shadow: var(--shadow-lg) !important;
+	max-width: 420px !important;
+	min-width: 320px !important;
+	padding: 0 !important;
+	overflow: hidden !important;
+}
+
+.driver-popover,
+.driver-popover * {
+	font-family: var(--font-ui) !important;
+}
+
+.driver-popover-title {
+	display: flex !important;
+	align-items: center !important;
+	min-height: var(--header-height) !important;
+	margin: 0 !important;
+	padding: 0 var(--space-md) !important;
+	background: var(--surface-raised) !important;
+	border-bottom: 1px solid var(--border) !important;
+	border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
+	font-size: var(--font-base) !important;
+	font-weight: 500 !important;
+	line-height: 1.3 !important;
+	color: var(--text-muted) !important;
+	text-transform: uppercase !important;
+	letter-spacing: 0.5px !important;
+}
+
+.driver-popover-description {
+	font-size: 12px !important;
+	color: var(--text-muted) !important;
+	line-height: 1.55 !important;
+	margin: 0 !important;
+	padding: 14px 16px 0 !important;
+}
+
+.driver-popover-description p {
+	margin: 0 0 8px !important;
+}
+
+.driver-popover-description p:last-child {
+	margin-bottom: 0 !important;
+}
+
+.driver-popover-description ul {
+	margin: 6px 0 10px !important;
+	padding-left: 18px !important;
+}
+
+.driver-popover-description li {
+	margin: 2px 0 !important;
+}
+
+.driver-popover-description table {
+	width: 100% !important;
+	border-collapse: collapse !important;
+	margin: 6px 0 !important;
+	font-size: 11px !important;
+}
+
+.driver-popover-description table td {
+	padding: 4px 6px !important;
+	border-bottom: 1px solid var(--border) !important;
+	vertical-align: middle !important;
+}
+
+.driver-popover-description table tr:last-child td {
+	border-bottom: none !important;
+}
+
+.driver-popover-description table td:last-child {
+	text-align: right !important;
+	white-space: nowrap !important;
+}
+
+.driver-popover-description kbd {
+	display: inline-block;
+	padding: 2px 5px;
+	font-family: inherit !important;
+	font-size: 10px;
+	background: var(--surface-raised);
+	border: 1px solid var(--border);
+	border-radius: 3px;
+	color: var(--text-muted);
+	min-width: 16px;
+	text-align: center;
+}
+
+.driver-popover-description code {
+	font-family: var(--font-mono) !important;
+	color: var(--accent);
+	background: transparent;
+	padding: 0;
+}
+
+.driver-popover-progress-text {
+	font-size: 10px !important;
+	color: var(--text-disabled) !important;
+}
+
+.driver-popover-footer {
+	margin-top: 0 !important;
+	padding: 12px 16px 14px !important;
+}
+
+/* Footer buttons — match the modal action-button styles (with border). */
+.driver-popover-footer button {
+	display: inline-flex !important;
+	align-items: center !important;
+	justify-content: center !important;
+	gap: var(--space-sm) !important;
+	cursor: pointer !important;
+	border: 1px solid var(--border) !important;
+	background: var(--surface-raised) !important;
+	color: var(--text) !important;
+	padding: var(--space-sm) var(--space-md) !important;
+	border-radius: var(--radius-md) !important;
+	font-size: 11px !important;
+	font-weight: 500 !important;
+	text-shadow: none !important;
+	transition: all var(--transition-fast) !important;
+}
+
+.driver-popover-footer button:hover {
+	background: var(--surface-hover) !important;
+	border-color: var(--border-focus) !important;
+}
+
+.driver-popover-footer button:active {
+	transform: scale(0.98) !important;
+}
+
+.driver-popover-footer button:focus {
+	outline: none !important;
+}
+
+/* Back button as ghost (secondary action). */
+.driver-popover-prev-btn {
+	background: transparent !important;
+	color: var(--text-muted) !important;
+}
+
+.driver-popover-prev-btn:hover {
+	background: var(--surface-hover) !important;
+	color: var(--text) !important;
+	border-color: var(--border-focus) !important;
+}
+
+/* Close button: matches the .icon-btn pattern used in modal headers.
+ * The default "×" character is hidden and replaced by a Lucide X icon
+ * via a pseudo-element mask so theme colours apply on hover. */
+.driver-popover-close-btn {
+	position: absolute !important;
+	top: 6px !important;
+	right: 6px !important;
+	width: 28px !important;
+	height: 28px !important;
+	border: none !important;
+	border-radius: var(--radius-md) !important;
+	background: transparent !important;
+	color: transparent !important;
+	font-size: 0 !important;
+	cursor: pointer !important;
+	text-shadow: none !important;
+	transition: background var(--transition-fast) !important;
+	z-index: 2 !important;
+}
+
+.driver-popover-close-btn::before {
+	content: '' !important;
+	position: absolute !important;
+	inset: 0 !important;
+	background: var(--text-muted) !important;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 16px no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 16px no-repeat;
+	transition: background var(--transition-fast) !important;
+}
+
+.driver-popover-close-btn:hover {
+	background: var(--surface-hover) !important;
+}
+
+.driver-popover-close-btn:hover::before {
+	background: var(--text) !important;
+}
+
+.driver-popover-close-btn:focus {
+	outline: none !important;
+}
+
+/* Arrow tip color matches popover background; only the visible side counts. */
+.driver-popover-arrow-side-left {
+	border-left-color: var(--surface) !important;
+}
+.driver-popover-arrow-side-right {
+	border-right-color: var(--surface) !important;
+}
+.driver-popover-arrow-side-top {
+	border-top-color: var(--surface) !important;
+}
+.driver-popover-arrow-side-bottom {
+	border-bottom-color: var(--surface) !important;
+}
diff --git a/src/lib/tours/types.ts b/src/lib/tours/types.ts
new file mode 100644
index 00000000..47166f6f
--- /dev/null
+++ b/src/lib/tours/types.ts
@@ -0,0 +1,22 @@
+/**
+ * Public types for the tours module.
+ */
+
+export type TourId = 'start' | 'modeling' | 'simulation';
+
+export interface TourScript {
+	id: TourId;
+	/** Human-readable name shown in confirmation dialogs / next-tour buttons. */
+	displayName: string;
+	/** The example model paired with this tour, served from /examples. */
+	demoFile: string;
+	/** Display name of the demo model for the confirmation dialog. */
+	demoName: string;
+	/** Build the driver.js step list. Called fresh on each tour start. */
+	build: () => import('driver.js').DriveStep[];
+	/** Optional setup, called once after the demo loads and before the first
+	 *  step. Use it to snapshot stores so the tour leaves them as-found. */
+	setup?: (session: import('./session').TourSession) => void;
+	/** Optional: tour to launch from the "Continue" button on the last step. */
+	next?: TourId;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4c9a264e..e73399fa 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -58,6 +58,8 @@
 	import { clipboardStore } from '$lib/stores/clipboard';
 	import Tooltip, { tooltip } from '$lib/components/Tooltip.svelte';
 	import { isInputFocused } from '$lib/utils/focus';
+	import { isTourActive } from '$lib/tours/inputMode';
+	import { searchDialogStore } from '$lib/stores/searchDialog';
 
 	// Theme toggle button ref for radial transition origin
 	let themeToggleBtn: HTMLButtonElement;
@@ -416,7 +418,6 @@
 		toolboxManagerEditing = editing;
 		toolboxManagerOpen = true;
 	}
-	let showSearchDialog = $state(false);
 	let showPlotOptionsDialog = $state(false);
 
 	// Context menu state
@@ -656,6 +657,8 @@
 
 	// Keyboard shortcuts
 	function handleKeydown(event: KeyboardEvent) {
+		// While a guided tour runs, driver.js owns the keyboard.
+		if (isTourActive()) return;
 		const inputFocused = isInputFocused(event);
 
 		// Shift+Enter for continue simulation
@@ -688,7 +691,7 @@
 					return;
 				case 'f':
 					event.preventDefault();
-					showSearchDialog = true;
+					searchDialogStore.open();
 					return;
 				case 'd':
 					event.preventDefault();
@@ -1098,7 +1101,7 @@
 
 <div class="app">
 	<!-- Logo overlay in top left -->
-	<button class="logo-overlay" onclick={() => showWelcomeModal = true} use:tooltip={"Welcome"} aria-label="Welcome">
+	<button class="logo-overlay" onclick={() => showWelcomeModal = true} use:tooltip={"Welcome"} aria-label="Welcome" data-tour="welcome-banner-logo">
 		<img src="{base}/pathview_logo.png" alt="PathView" />
 	</button>
 
@@ -1131,6 +1134,7 @@
 						disabled={pyodideLoading}
 						use:tooltip={{ text: pyodideReady ? "Run" : "Initialize & Run", shortcut: "Ctrl+Enter" }}
 						aria-label="Run"
+						data-tour="toolbar-run"
 					>
 						{#if pyodideLoading}
 							<span class="loading-status">{statusText}</span>
@@ -1165,7 +1169,7 @@
 		</div>
 
 		<!-- File operations -->
-		<div class="toolbar-group">
+		<div class="toolbar-group" data-tour="toolbar-files">
 			<button class="toolbar-btn" onclick={handleNew} use:tooltip={"New"} aria-label="New">
 				<Icon name="new-canvas" size={16} />
 			</button>
@@ -1188,7 +1192,7 @@
 			>
 				<Icon name={saveFlash === 'save-as' ? 'check' : 'upload-plus'} size={16} />
 			</button>
-			<button class="toolbar-btn" onclick={() => exportDialogOpen = true} use:tooltip={{ text: "Python Code", shortcut: "Ctrl+E" }} aria-label="View Python Code">
+			<button class="toolbar-btn" onclick={() => exportDialogOpen = true} use:tooltip={{ text: "Python Code", shortcut: "Ctrl+E" }} aria-label="View Python Code" data-tour="toolbar-export-python">
 				<Icon name="braces" size={16} />
 			</button>
 			<button class="toolbar-btn" onclick={handleSendToCodegen} use:tooltip={"Send to Codegen"} aria-label="Send to Codegen">
@@ -1204,6 +1208,7 @@
 				onclick={() => pinnedPreviewsStore.toggle()}
 				use:tooltip={{ text: "Pin Previews", shortcut: "P" }}
 				aria-label="Pin Previews"
+				data-tour="toolbar-pin-previews"
 			>
 				<Icon name={showPinnedPreviews ? "pin-filled" : "pin"} size={16} />
 			</button>
@@ -1213,10 +1218,11 @@
 				onclick={(e) => toggleThemeWithTransition(e)}
 				use:tooltip={{ text: currentTheme === 'dark' ? 'Light mode' : 'Dark mode', shortcut: "T" }}
 				aria-label="Toggle theme"
+				data-tour="toolbar-theme"
 			>
 				<Icon name={currentTheme === 'dark' ? 'sun' : 'moon'} size={16} />
 			</button>
-			<button class="toolbar-btn" onclick={() => showKeyboardShortcuts = true} use:tooltip={{ text: "Shortcuts", shortcut: "?" }} aria-label="Keyboard shortcuts">
+			<button class="toolbar-btn" onclick={() => showKeyboardShortcuts = true} use:tooltip={{ text: "Shortcuts", shortcut: "?" }} aria-label="Keyboard shortcuts" data-tour="toolbar-shortcuts">
 				<Icon name="keyboard" size={16} />
 			</button>
 		</div>
@@ -1234,6 +1240,7 @@
 				onclick={toggleNodeLibrary}
 				use:tooltip={{ text: "Blocks", shortcut: "B", position: "right" }}
 				aria-label="Blocks"
+				data-tour="panel-toggle-blocks"
 			>
 				<Icon name="grid" size={18} />
 			</button>
@@ -1243,6 +1250,7 @@
 				onclick={toggleEventsPanel}
 				use:tooltip={{ text: "Events", shortcut: "N", position: "right" }}
 				aria-label="Events"
+				data-tour="panel-toggle-events"
 			>
 				<Icon name="zap" size={18} />
 			</button>
@@ -1252,6 +1260,7 @@
 				onclick={toggleCodeEditor}
 				use:tooltip={{ text: "Editor", shortcut: "E", position: "right" }}
 				aria-label="Editor"
+				data-tour="panel-toggle-editor"
 			>
 				<Icon name="code" size={18} />
 			</button>
@@ -1266,6 +1275,7 @@
 					onclick={toggleSubsystemTree}
 					use:tooltip={{ text: "Subsystems", shortcut: "R", position: "right" }}
 					aria-label="Subsystems"
+					data-tour="panel-toggle-subsystems"
 				>
 					<Icon name="layers" size={18} />
 				</button>
@@ -1280,6 +1290,7 @@
 				onclick={() => showPlot = !showPlot}
 				use:tooltip={{ text: "Results", shortcut: "V", position: "right" }}
 				aria-label="Results"
+				data-tour="panel-toggle-results"
 			>
 				<Icon name="bar-chart" size={18} />
 			</button>
@@ -1289,6 +1300,7 @@
 				onclick={() => showConsole = !showConsole}
 				use:tooltip={{ text: "Console", shortcut: "C", position: "right" }}
 				aria-label="Console"
+				data-tour="panel-toggle-console"
 			>
 				<Icon name="terminal" size={18} />
 			</button>
@@ -1302,6 +1314,7 @@
 				onclick={toggleProperties}
 				use:tooltip={{ text: "Simulation", shortcut: "S", position: "right" }}
 				aria-label="Simulation"
+				data-tour="panel-toggle-simulation"
 			>
 				<Icon name="settings" size={18} />
 			</button>
@@ -1344,6 +1357,7 @@
 					onclick={() => openToolboxManager()}
 					use:tooltip={'Toolboxes'}
 					aria-label="Toolboxes"
+					data-tour="open-toolbox-manager"
 				>
 					<Icon name="box" size={16} />
 				</button>
@@ -1407,6 +1421,7 @@
 	<!-- Plot Panel (floating bottom) -->
 	{#if showPlot}
 		<ResizablePanel
+			title="Results"
 			position={showConsole ? 'bottom-right' : 'bottom'}
 			initialHeight={280}
 			minHeight={150}
@@ -1470,6 +1485,7 @@
 	<!-- Console Panel (floating bottom-left) -->
 	{#if showConsole}
 		<ResizablePanel
+			title="Console"
 			position={showPlot ? 'bottom-left' : 'bottom'}
 			initialHeight={280}
 			minHeight={150}
@@ -1514,7 +1530,7 @@
 		editing={toolboxManagerEditing}
 		onClose={() => { toolboxManagerOpen = false; toolboxManagerEditing = null; }}
 	/>
-	<SearchDialog open={showSearchDialog} onClose={() => showSearchDialog = false} />
+	<SearchDialog open={$searchDialogStore} onClose={() => searchDialogStore.close()} />
 	<PlotOptionsDialog open={showPlotOptionsDialog} onClose={() => showPlotOptionsDialog = false} traces={resultTraces} />
 
 	<!-- Block Properties Dialog -->
diff --git a/static/examples/bouncing-ball.json b/static/examples/bouncing-ball.json
index 5de35e44..dd546186 100644
--- a/static/examples/bouncing-ball.json
+++ b/static/examples/bouncing-ball.json
@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "metadata": {
-    "created": "2026-01-25T00:40:48.165Z",
-    "modified": "2026-01-25T00:40:48.165Z",
+    "created": "2026-05-05T11:55:55.289Z",
+    "modified": "2026-05-05T11:55:55.289Z",
     "name": "bouncing-ball"
   },
   "graph": {
@@ -99,8 +99,8 @@
         "type": "Constant",
         "name": "gravity",
         "position": {
-          "x": 390,
-          "y": 250
+          "x": 440,
+          "y": 160
         },
         "inputs": [],
         "outputs": [
@@ -115,7 +115,7 @@
         ],
         "params": {
           "value": "-g",
-          "_rotation": 0
+          "_rotation": 1
         },
         "pinnedParams": []
       },
@@ -285,7 +285,7 @@
       "type": "pathsim.events.ZeroCrossing",
       "name": "Bounce",
       "position": {
-        "x": 1320,
+        "x": 1220,
         "y": 200
       },
       "params": {
@@ -298,7 +298,7 @@
       "type": "pathsim.events.Condition",
       "name": "Zeno",
       "position": {
-        "x": 1380,
+        "x": 1280,
         "y": 260
       },
       "params": {
@@ -312,13 +312,13 @@
   },
   "simulationSettings": {
     "duration": "50",
-    "dt": "",
+    "dt": null,
     "solver": "RKBS32",
     "adaptive": true,
-    "atol": "",
-    "rtol": "",
-    "ftol": "",
-    "dt_min": "",
+    "atol": null,
+    "rtol": null,
+    "ftol": null,
+    "dt_min": null,
     "dt_max": "0.05",
     "ghostTraces": 8,
     "plotResults": true
diff --git a/static/examples/feedback-system.json b/static/examples/feedback-system.json
index fc4497dc..3332a47e 100644
--- a/static/examples/feedback-system.json
+++ b/static/examples/feedback-system.json
@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "metadata": {
-    "created": "2026-01-25T00:44:51.546Z",
-    "modified": "2026-01-25T00:44:51.546Z",
+    "created": "2026-05-05T11:54:54.306Z",
+    "modified": "2026-05-05T11:54:54.306Z",
     "name": "feedback-system"
   },
   "graph": {
@@ -53,7 +53,7 @@
         "name": "Feedback",
         "position": {
           "x": 910,
-          "y": 460
+          "y": 480
         },
         "inputs": [
           {
@@ -238,7 +238,7 @@
     "atol": "1e-6",
     "rtol": "1e-4",
     "ftol": "1e-9",
-    "dt_min": "",
+    "dt_min": null,
     "dt_max": "0.1",
     "ghostTraces": 6,
     "plotResults": true
diff --git a/static/examples/pid-subsystem.json b/static/examples/pid-subsystem.json
index 69a64065..04559674 100644
--- a/static/examples/pid-subsystem.json
+++ b/static/examples/pid-subsystem.json
@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "metadata": {
-    "created": "2026-01-25T00:43:37.789Z",
-    "modified": "2026-01-25T00:43:37.789Z",
+    "created": "2026-05-05T11:37:27.297Z",
+    "modified": "2026-05-05T11:37:27.297Z",
     "name": "pid-subsystem"
   },
   "graph": {
@@ -393,7 +393,8 @@
         "sourceNodeId": "pid",
         "sourcePortIndex": 0,
         "targetNodeId": "4674b251-a882-45b9-baf1-01db4d0f7a22",
-        "targetPortIndex": 0
+        "targetPortIndex": 0,
+        "waypoints": []
       },
       {
         "id": "09fb7ca4-d71c-46dd-b4bf-95d7275f74b2",
@@ -412,8 +413,8 @@
           {
             "id": "4d19383a-86fe-4605-82d4-405f83b4cb27",
             "position": {
-              "x": 1060,
-              "y": 350
+              "x": 1070,
+              "y": 360
             },
             "isUserWaypoint": true
           }
@@ -445,8 +446,8 @@
     "atol": "1e-8",
     "rtol": "1e-5",
     "ftol": "1e-9",
-    "dt_min": "",
-    "dt_max": "",
+    "dt_min": null,
+    "dt_max": null,
     "ghostTraces": 6,
     "plotResults": true
   }
diff --git a/static/examples/squarewave-lpf.json b/static/examples/squarewave-lpf.json
index e4097a20..88fae494 100644
--- a/static/examples/squarewave-lpf.json
+++ b/static/examples/squarewave-lpf.json
@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "metadata": {
-    "created": "2026-01-25T00:49:57.129Z",
-    "modified": "2026-01-25T00:49:57.130Z",
+    "created": "2026-05-05T11:33:21.201Z",
+    "modified": "2026-05-05T11:33:21.201Z",
     "name": "squarewave-lpf"
   },
   "graph": {
@@ -12,7 +12,7 @@
         "type": "SquareWaveSource",
         "name": "Signal",
         "position": {
-          "x": 710,
+          "x": 640,
           "y": 260
         },
         "inputs": [],
@@ -36,7 +36,7 @@
         "type": "ButterworthLowpassFilter",
         "name": "LPF",
         "position": {
-          "x": 880,
+          "x": 890,
           "y": 260
         },
         "inputs": [
@@ -70,7 +70,7 @@
         "type": "Scope",
         "name": "Result",
         "position": {
-          "x": 1040,
+          "x": 1100,
           "y": 250
         },
         "inputs": [
@@ -125,8 +125,8 @@
       {
         "id": "34f0e638-760e-421b-9d4a-6fc606387a87",
         "position": {
-          "x": 650,
-          "y": 110
+          "x": 580,
+          "y": 60
         },
         "content": "Filtering the high frequency contents out of a square wave with a low pass filter. \n\nParameters can be pinned, see block property dialog (double click).\n\nHover over **Scope** blocks to see plot preview. Or just pin all previews (P).",
         "width": 440,
@@ -140,15 +140,15 @@
     "code": ""
   },
   "simulationSettings": {
-    "duration": "",
-    "dt": "",
+    "duration": null,
+    "dt": null,
     "solver": "SSPRK22",
     "adaptive": true,
-    "atol": "",
+    "atol": null,
     "rtol": "1e-2",
-    "ftol": "",
-    "dt_min": "",
-    "dt_max": "",
+    "ftol": null,
+    "dt_min": null,
+    "dt_max": null,
     "ghostTraces": 0,
     "plotResults": true
   }
diff --git a/static/examples/vanderpol.json b/static/examples/vanderpol.json
index f6d47ac2..cc007dba 100644
--- a/static/examples/vanderpol.json
+++ b/static/examples/vanderpol.json
@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "metadata": {
-    "created": "2026-01-25T00:35:40.025Z",
-    "modified": "2026-01-25T00:35:40.025Z",
+    "created": "2026-05-05T11:35:51.117Z",
+    "modified": "2026-05-05T11:35:51.117Z",
     "name": "vanderpol"
   },
   "graph": {
@@ -37,8 +37,7 @@
         ],
         "params": {
           "initial_value": "x20"
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "440919f7-c63c-40d7-8f78-67871a0f89f6",
@@ -70,8 +69,7 @@
         ],
         "params": {
           "initial_value": "x10"
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "03d10f15-3f0e-48f4-881b-281485faefd6",
@@ -112,8 +110,7 @@
         "params": {
           "operations": "\"-+\"",
           "_rotation": 2
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "9e7d89cc-bd31-4615-b34b-1b7a11850be3",
@@ -146,8 +143,7 @@
         "params": {
           "exponent": "2",
           "_rotation": 0
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "8db3f239-5418-4068-b92c-18ee1d42c427",
@@ -180,8 +176,7 @@
         "params": {
           "gain": "mu",
           "_rotation": 0
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "3c9f84cd-ee77-4232-9596-aaf057dd0254",
@@ -205,8 +200,7 @@
         "params": {
           "value": "1",
           "_rotation": 2
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "f94de1eb-7d85-42ab-8af5-69e0bd3cbf7d",
@@ -246,8 +240,7 @@
         ],
         "params": {
           "_rotation": 2
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "ee2391d1-5c61-45de-859b-ff98ad13f4a4",
@@ -288,8 +281,7 @@
         "params": {
           "operations": "\"+-\"",
           "_rotation": 0
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "34e172de-4aa4-4f33-9844-f78184aa1a19",
@@ -312,8 +304,7 @@
         "outputs": [],
         "params": {
           "_rotation": 3
-        },
-        "color": "#E57373"
+        }
       },
       {
         "id": "b2b48c31-985f-4917-bef9-6dcecdc2e928",
@@ -336,8 +327,7 @@
         "outputs": [],
         "params": {
           "_rotation": 3
-        },
-        "color": "#E57373"
+        }
       }
     ],
     "connections": [
@@ -436,8 +426,7 @@
         },
         "content": "# Van der Pol\n\nThis is the Van der Pol system \n\n$$ \\ddot{x} - \\mu (1 - x^2) \\dot{x} + x = 0$$\n\nmodeled as discrete components.\n",
         "width": 200,
-        "height": 120,
-        "color": "#E57373"
+        "height": 120
       }
     ]
   },
@@ -447,14 +436,14 @@
   },
   "simulationSettings": {
     "duration": "3*mu",
-    "dt": "",
+    "dt": null,
     "solver": "GEAR52A",
     "adaptive": true,
     "atol": "1e-6",
     "rtol": "1e-4",
     "ftol": "1e-8",
-    "dt_min": "",
-    "dt_max": "",
+    "dt_min": null,
+    "dt_max": null,
     "ghostTraces": 0,
     "plotResults": true
   }