diff --git a/package.json b/package.json
index 4d3bc7fdc..ca5c1cca4 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
 		"@lezer/javascript": "^1.4.1",
 		"@lezer/lr": "^1.3.3",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@rich_harris/svelte-split-pane": "^1.0.1",
+		"@rich_harris/svelte-split-pane": "^1.0.2",
 		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b5b7c8b2..32c554354 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,7 +17,7 @@ specifiers:
   '@lezer/lr': ^1.3.3
   '@playwright/test': ^1.31.2
   '@replit/codemirror-lang-svelte': ^6.0.0
-  '@rich_harris/svelte-split-pane': ^1.0.1
+  '@rich_harris/svelte-split-pane': ^1.0.2
   '@sveltejs/adapter-vercel': 2.3.1
   '@sveltejs/kit': ^1.11.0
   '@sveltejs/site-kit': ^3.2.2
@@ -61,7 +61,7 @@ dependencies:
   '@lezer/javascript': 1.4.1
   '@lezer/lr': 1.3.3
   '@replit/codemirror-lang-svelte': 6.0.0_ybny7xhlf2ysg4majw54z4nkly
-  '@rich_harris/svelte-split-pane': 1.0.1_svelte@3.56.0
+  '@rich_harris/svelte-split-pane': 1.0.2_svelte@3.56.0
   '@webcontainer/api': 1.0.2
   adm-zip: 0.5.10
   ansi-to-html: 0.7.2
@@ -730,8 +730,8 @@ packages:
       '@lezer/lr': 1.3.3
     dev: false
 
-  /@rich_harris/svelte-split-pane/1.0.1_svelte@3.56.0:
-    resolution: {integrity: sha512-/11fp3792qh4pXxO3XtVmIQf6SCDFKcQyyQvVOAKr8U5tG0Z4QaLEXsyOKOpeAkngqWT1dbBfjVynUXa7kb1EA==}
+  /@rich_harris/svelte-split-pane/1.0.2_svelte@3.56.0:
+    resolution: {integrity: sha512-8Qhno4kshsBFWC3MnM0++TIbyAvbiuCWXxiCA38VhCr/ZFKQcS8k9mjzWt9eynQjgkyZHejXN0j0V7ws7LV1KA==}
     peerDependencies:
       svelte: ^3.54.0
     dependencies:
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 6bb3bee4e..600a097bf 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -1,12 +1,10 @@
 <script>
 	import Output from './Output.svelte';
-	import { browser } from '$app/environment';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import Icon from '@sveltejs/site-kit/components/Icon.svelte';
-	import { writable } from 'svelte/store';
 	import Editor from './Editor.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
@@ -23,20 +21,28 @@
 
 	export let data;
 
-	let width = browser ? window.innerWidth : 1000;
-	let selected_view = 0;
-
 	let path = data.exercise.path;
+	let show_editor = false;
+	let show_filetree = false;
 	let paused = false;
+	let w = 1000;
 
 	/** @type {import('$lib/types').Stub[]} */
 	let previous_files = [];
 
+	$: mobile = w < 800; // for the things we can't do with media queries
+	$: completed = is_completed($files, data.exercise.b);
+	$: files.set(Object.values(data.exercise.a));
+	$: solution.set(data.exercise.b);
+	$: selected_name.set(data.exercise.focus);
+
 	beforeNavigate(() => {
 		previous_files = $files;
 	});
 
 	afterNavigate(async () => {
+		w = window.innerWidth;
+
 		const will_delete = previous_files.some((file) => !(file.name in data.exercise.a));
 
 		if (data.exercise.path !== path || will_delete) paused = true;
@@ -46,15 +52,6 @@
 		paused = false;
 	});
 
-	$: mobile = writable(false);
-	$: $mobile = width < 768;
-
-	$: completed = is_completed($files, data.exercise.b);
-
-	$: files.set(Object.values(data.exercise.a));
-	$: solution.set(data.exercise.b);
-	$: selected_name.set(data.exercise.focus);
-
 	/**
 	 * @param {import('$lib/types').Stub[]} files
 	 * @param {Record<string, import('$lib/types').Stub> | null} solution
@@ -103,74 +100,132 @@
 	<meta property="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 </svelte:head>
 
+<svelte:window
+	bind:innerWidth={w}
+	on:popstate={(e) => {
+		const q = new URLSearchParams(location.search);
+		show_editor = q.get('view') === 'editor';
+	}}
+/>
+
 <ContextMenu />
 
-<div class="container" style="--toggle-height: {$mobile ? '4.6rem' : '0px'}">
-	<SplitPane
-		type="horizontal"
-		min={$mobile ? '0px' : '360px'}
-		max={$mobile ? '100%' : '50%'}
-		pos={$mobile ? (selected_view === 0 ? '100%' : '0%') : '33%'}
-	>
-		<section slot="a" class="content">
-			<Sidebar
-				index={data.index}
-				exercise={data.exercise}
-				on:select={(e) => {
-					select_file(e.detail.file);
-				}}
-			/>
-		</section>
-
-		<section slot="b" class:hidden={$mobile && selected_view === 0}>
-			<SplitPane
-				type="vertical"
-				min={$mobile ? '0px' : '100px'}
-				max={$mobile ? '100%' : '50%'}
-				pos={$mobile ? (selected_view === 1 ? '100%' : '0%') : '50%'}
-			>
-				<section slot="a">
-					<SplitPane type="horizontal" min="120px" max="300px" pos="200px">
-						<section class="navigator" slot="a">
-							<Filetree readonly={mobile} exercise={data.exercise} />
-
-							<button
-								class:completed
-								disabled={!data.exercise.has_solution}
-								on:click={() => {
-									reset_files(Object.values(completed ? data.exercise.a : data.exercise.b));
-								}}
-							>
-								{#if completed && data.exercise.has_solution}
-									reset
+<div class="container" class:mobile>
+	<div class="top" class:offset={show_editor}>
+		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
+			<section slot="a" class="content">
+				<Sidebar
+					index={data.index}
+					exercise={data.exercise}
+					on:select={(e) => {
+						select_file(e.detail.file);
+					}}
+				/>
+			</section>
+
+			<section slot="b">
+				<SplitPane type="vertical" min="100px" max="50%" pos="50%">
+					<section slot="a">
+						<SplitPane
+							id="editor"
+							type={mobile ? 'vertical' : 'horizontal'}
+							min="120px"
+							max="300px"
+							pos="200px"
+						>
+							<section class="navigator" slot="a">
+								{#if mobile}
+									<button class="file" on:click={() => (show_filetree = !show_filetree)}>
+										{$selected_file?.name.replace(
+											data.exercise.scope.prefix,
+											data.exercise.scope.name + '/'
+										) ?? 'Files'}
+									</button>
 								{:else}
-									solve <Icon name="arrow-right" />
+									<Filetree exercise={data.exercise} />
 								{/if}
-							</button>
-						</section>
-
-						<section class="editor-container" slot="b">
-							<Editor />
-							<ImageViewer selected={$selected_file} />
-						</section>
-					</SplitPane>
-				</section>
-
-				<section slot="b" class="preview">
-					<Output exercise={data.exercise} {paused} />
-				</section>
-			</SplitPane>
-		</section>
-	</SplitPane>
-	{#if $mobile}
-		<ScreenToggle labels={['Tutorial', 'Input', 'Output']} bind:selected={selected_view} />
-	{/if}
+
+								<button
+									class="solve"
+									class:completed
+									disabled={!data.exercise.has_solution}
+									on:click={() => {
+										reset_files(Object.values(completed ? data.exercise.a : data.exercise.b));
+									}}
+								>
+									{#if completed && data.exercise.has_solution}
+										reset
+									{:else}
+										solve <Icon name="arrow-right" />
+									{/if}
+								</button>
+							</section>
+
+							<section class="editor-container" slot="b">
+								<Editor />
+								<ImageViewer selected={$selected_file} />
+
+								{#if mobile && show_filetree}
+									<div class="mobile-filetree">
+										<Filetree
+											mobile
+											exercise={data.exercise}
+											on:select={() => (show_filetree = false)}
+										/>
+									</div>
+								{/if}
+							</section>
+						</SplitPane>
+					</section>
+
+					<section slot="b" class="preview">
+						<Output exercise={data.exercise} {paused} />
+					</section>
+				</SplitPane>
+			</section>
+		</SplitPane>
+	</div>
+
+	<div class="screen-toggle">
+		<ScreenToggle
+			on:change={(e) => {
+				show_editor = e.detail.pressed;
+
+				const view = show_editor ? 'editor' : 'tutorial';
+				history.pushState({}, '', `?view=${view}`);
+			}}
+			pressed={show_editor}
+		/>
+	</div>
 </div>
 
 <style>
 	.container {
-		height: calc(100% - var(--toggle-height));
-		max-height: 100%;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		/** necessary for innerWidth to be correct, so we can determine `mobile` */
+		width: 100vw;
+		overflow: hidden;
+	}
+
+	.top {
+		width: 200vw;
+		margin-left: -100vw;
+		height: 0;
+		flex: 1;
+		transition: transform 0.2s;
+		/* we transform the default state, rather than the editor state, because otherwise
+		   the positioning of tooltips is wrong (doesn't take into account transforms) */
+		transform: translate(50%, 0);
+	}
+
+	.top.offset {
+		transform: none;
+	}
+
+	.screen-toggle {
+		height: 4.6rem;
 	}
 
 	.content {
@@ -191,7 +246,7 @@
 		flex-direction: column;
 	}
 
-	.navigator button {
+	.navigator .solve {
 		position: relative;
 		background: var(--sk-theme-2);
 		padding: 0.5rem;
@@ -202,15 +257,15 @@
 		opacity: 1;
 	}
 
-	.navigator button:disabled {
+	.navigator .solve:disabled {
 		opacity: 0.5;
 	}
 
-	.navigator button:not(:disabled) {
+	.navigator .solve:not(:disabled) {
 		background: var(--sk-theme-1);
 	}
 
-	.navigator button.completed {
+	.navigator .solve.completed {
 		background: var(--sk-theme-2);
 	}
 
@@ -224,7 +279,58 @@
 		background-color: var(--sk-back-3);
 	}
 
-	.hidden {
-		display: none;
+	.mobile .navigator {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 1rem;
+	}
+
+	.mobile .navigator .file {
+		flex: 1;
+		text-align: left;
+	}
+
+	.mobile .navigator .solve {
+		width: 9rem;
+		height: auto;
+		padding: 0.2rem;
+		border-radius: 4rem;
+		border: none;
+	}
+
+	.mobile-filetree {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		overflow-y: auto;
+	}
+
+	/* on mobile, override the <SplitPane> controls */
+	@media (max-width: 799px) {
+		:global([data-pane='main']) {
+			--pos: 50% !important;
+		}
+
+		:global([data-pane='editor']) {
+			--pos: 5.4rem !important;
+		}
+
+		:global([data-pane]) :global(.divider) {
+			cursor: default;
+		}
+	}
+
+	@media (min-width: 800px) {
+		.top {
+			width: 100vw;
+			margin: 0;
+			transform: none;
+		}
+
+		.screen-toggle {
+			display: none;
+		}
 	}
 </style>
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index b4ce4390e..fecc78caa 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -202,7 +202,10 @@
 		editor_states.clear();
 		reset($files);
 
-		select_state($selected_name);
+		if (editor_view) {
+			// could be false if onMount returned early
+			select_state($selected_name);
+		}
 
 		// clear warnings
 		warnings.set({});
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index a84a295fe..f5913adab 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -72,10 +72,12 @@
 
 	/** @param {string} src */
 	function set_iframe_src(src) {
+		if (!iframe) return; // HMR
+
 		// removing the iframe from the document allows us to
 		// change the src without adding a history entry, which
 		// would make back/forward traversal very annoying
-		const parentNode = /** @type {HTMLElement} */ (iframe?.parentNode);
+		const parentNode = /** @type {HTMLElement} */ (iframe.parentNode);
 		parentNode?.removeChild(iframe);
 		iframe.src = src;
 		parentNode?.appendChild(iframe);
@@ -148,7 +150,7 @@
 		font-family: var(--font-mono);
 		font-size: var(--sk-text-xs);
 		padding: 1rem;
-		background: white;
+		background: var(--sk-back-1);
 		border-top: 1px solid var(--sk-back-3);
 		transform: translate(0, 100%);
 		transition: transform 0.3s;
diff --git a/src/routes/tutorial/[slug]/ScreenToggle.svelte b/src/routes/tutorial/[slug]/ScreenToggle.svelte
index a40972d78..76355d308 100644
--- a/src/routes/tutorial/[slug]/ScreenToggle.svelte
+++ b/src/routes/tutorial/[slug]/ScreenToggle.svelte
@@ -1,42 +1,54 @@
 <script>
-	/** @type {string[]} */
-	export let labels;
-	export let selected = 0;
+	import { createEventDispatcher } from 'svelte';
+	import ToggleButton from './ToggleButton.svelte';
+
+	/** @type {boolean} */
+	export let pressed = false;
+
+	const dispatch = createEventDispatcher();
 </script>
 
-<div class="toggle">
-	{#each labels as label, index}
-		<button class:selected={selected === index} on:click={() => (selected = index)}>
-			{label}
-		</button>
-	{/each}
+<div class="input-output-toggle">
+	<button
+		aria-hidden="true"
+		on:click={() => {
+			if (pressed) {
+				pressed = false;
+				dispatch('change', { pressed });
+			}
+		}}>Tutorial</button
+	>
+	<ToggleButton label="Show editor" {pressed} on:change />
+	<button
+		aria-hidden="true"
+		on:click={() => {
+			if (!pressed) {
+				pressed = true;
+				dispatch('change', { pressed });
+			}
+		}}>Editor</button
+	>
 </div>
 
 <style>
-	.toggle {
-		position: fixed;
-		bottom: 0;
-		width: 100%;
-		height: var(--toggle-height);
+	.input-output-toggle {
+		position: relative;
 		display: flex;
-		justify-content: center;
+		gap: 0.5em;
+		user-select: none;
 		align-items: center;
-		border-top: 1px solid var(--sk-text-2);
-		background-color: var(--sk-back-1);
-	}
-	button {
-		margin: 0 0.15em;
-		width: 4em;
-		height: 1em;
-		padding: 0.3em 0.4em;
-		border-radius: var(--sk-border-radius);
-		line-height: 1em;
-		box-sizing: content-box;
-		color: var(--sk-text-2);
-		border: 1px solid var(--sk-back-3);
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		z-index: 2;
+		margin: 0 auto;
 	}
-	.selected {
-		background-color: var(--sk-theme-1);
-		color: white;
+
+	@media (min-width: 832px) {
+		.input-output-toggle {
+			padding-left: 3.2rem;
+			width: var(--sidebar-menu-width);
+			margin: 0 0 0 auto;
+		}
 	}
 </style>
diff --git a/src/routes/tutorial/[slug]/ToggleButton.svelte b/src/routes/tutorial/[slug]/ToggleButton.svelte
new file mode 100644
index 000000000..f16e49a69
--- /dev/null
+++ b/src/routes/tutorial/[slug]/ToggleButton.svelte
@@ -0,0 +1,83 @@
+<!-- TODO this is copied from kit.svelte.dev — probably belongs in site-kit -->
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	/** @type {string} */
+	export let label;
+
+	export let pressed = false;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button
+	aria-pressed={pressed ? 'true' : 'false'}
+	on:click={() => {
+		pressed = !pressed;
+		dispatch('change', { pressed });
+	}}
+>
+	<span class="visually-hidden">{label}</span>
+</button>
+
+<style>
+	button {
+		--size: 1em;
+		--bg: var(--sk-theme-2);
+		--fg: white;
+		--bg-active: var(--bg);
+		--fg-active: var(--fg);
+		position: relative;
+		height: var(--size);
+		width: calc(100% - 0.6em);
+		max-width: calc(2 * var(--size));
+		top: -2px;
+		border-radius: 0.5em;
+		-webkit-appearance: none;
+		appearance: none;
+		outline-offset: 2px;
+		border: transparent;
+	}
+
+	button:focus-visible {
+		outline: 2px solid var(--sk-theme-3);
+	}
+
+	button::before {
+		content: '';
+		position: absolute;
+		display: block;
+		height: 100%;
+		width: 100%;
+		padding: 2px;
+		border-radius: var(--size);
+		top: 0;
+		left: 0;
+		background: var(--bg);
+		box-sizing: border-box;
+	}
+
+	button[aria-pressed='true']::before {
+		background: var(--bg-active);
+	}
+
+	button::after {
+		content: '';
+		position: absolute;
+		display: block;
+		width: calc(var(--size) - 4px);
+		height: calc(var(--size) - 4px);
+		aspect-ratio: 1;
+		top: 2px;
+		left: 2px;
+		border-radius: 50%;
+		background: var(--fg);
+		box-shadow: 0 0px 1px rgba(0, 0, 0, 0.4), 0 4px 2px rgba(0, 0, 0, 0.1);
+		transition: background 0.2s ease-out, left 0.2s ease-out;
+	}
+
+	button[aria-pressed='true']::after {
+		background: var(--fg-active);
+		left: calc(100% - var(--size) + 2px);
+	}
+</style>
diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte
index e762a51cb..6b65bf25b 100644
--- a/src/routes/tutorial/[slug]/filetree/File.svelte
+++ b/src/routes/tutorial/[slug]/filetree/File.svelte
@@ -2,7 +2,7 @@
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected_name, select_file, solution } from '../state.js';
+	import { selected_name, solution } from '../state.js';
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
@@ -10,11 +10,11 @@
 	/** @type {number} */
 	export let depth;
 
-	const { rename, remove, readonly } = context.get();
+	const { rename, remove, select } = context.get();
 
 	let renaming = false;
 
-	$: can_remove = !$readonly && !$solution[file.name];
+	$: can_remove = !$solution[file.name];
 
 	/** @type {import('./ContextMenu.svelte').MenuItems} */
 	$: actions = can_remove
@@ -45,7 +45,7 @@
 	icon={file_icon}
 	selected={file.name === $selected_name}
 	{actions}
-	on:click={() => select_file(file.name)}
+	on:click={() => select(file.name)}
 	on:edit={() => {
 		renaming = true;
 	}}
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 64252c98f..e23abd1a1 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
@@ -6,16 +7,17 @@
 	import { files, solution, reset_files, select_file } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
-	/** @type {import('svelte/store').Writable<boolean>} */
-	export let readonly;
-
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
 
-	let modal_text = '';
+	export let mobile = false;
+
+	const dispatch = createEventDispatcher();
 
 	const hidden = new Set(['__client.js', 'node_modules']);
 
+	let modal_text = '';
+
 	/** @type {import('svelte/store').Writable<Record<string, boolean>>}*/
 	const collapsed = writable({});
 
@@ -26,8 +28,6 @@
 	context.set({
 		collapsed,
 
-		readonly,
-
 		add: async (name, type) => {
 			if (!$solution[name] && !exercise.editing_constraints.create.has(name)) {
 				modal_text =
@@ -116,6 +116,11 @@
 					return true;
 				})
 			);
+		},
+
+		select: (name) => {
+			dispatch('select');
+			select_file(name);
 		}
 	});
 
@@ -157,6 +162,7 @@
 
 <ul
 	class="filetree"
+	class:mobile
 	on:keydown={(e) => {
 		if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
 			e.preventDefault();
@@ -203,7 +209,11 @@
 		list-style: none;
 	}
 
-	.filetree::before {
+	.filetree.mobile {
+		height: 100%;
+	}
+
+	.filetree:not(.mobile)::before {
 		content: '';
 		position: absolute;
 		width: 0;
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 60bca73f5..22a0377cd 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -22,7 +22,7 @@
 	/** @type {'idle' | 'add_file' | 'add_directory' | 'renaming'} */
 	let mode = 'idle';
 
-	const { collapsed, rename, add, remove, readonly } = context.get();
+	const { collapsed, rename, add, remove } = context.get();
 
 	$: segments = get_depth(prefix);
 
@@ -44,35 +44,33 @@
 		can_create.file = false;
 		can_create.directory = false;
 
-		if (!$readonly) {
-			const child_prefixes = [];
-
-			for (const file of $files) {
-				if (
-					file.type === 'directory' &&
-					file.name.startsWith(prefix) &&
-					get_depth(file.name) === depth + 1
-				) {
-					child_prefixes.push(file.name + '/');
-				}
+		const child_prefixes = [];
+
+		for (const file of $files) {
+			if (
+				file.type === 'directory' &&
+				file.name.startsWith(prefix) &&
+				get_depth(file.name) === depth + 1
+			) {
+				child_prefixes.push(file.name + '/');
 			}
+		}
 
-			for (const file of Object.values($solution)) {
-				if (!file.name.startsWith(prefix)) continue;
+		for (const file of Object.values($solution)) {
+			if (!file.name.startsWith(prefix)) continue;
 
-				// if already exists in $files, bail
-				if ($files.find((f) => f.name === file.name)) continue;
+			// if already exists in $files, bail
+			if ($files.find((f) => f.name === file.name)) continue;
 
-				// if intermediate directory exists, bail
-				if (child_prefixes.some((prefix) => file.name.startsWith(prefix))) continue;
+			// if intermediate directory exists, bail
+			if (child_prefixes.some((prefix) => file.name.startsWith(prefix))) continue;
 
-				can_create[file.type] = true;
-			}
+			can_create[file.type] = true;
 		}
 	}
 
 	// fake root directory has no name
-	$: can_remove = !$readonly && directory.name ? !$solution[directory.name] : false;
+	$: can_remove = directory.name ? !$solution[directory.name] : false;
 
 	/** @type {import('./ContextMenu.svelte').MenuItem[]} */
 	$: actions = [
diff --git a/src/routes/tutorial/[slug]/filetree/Item.svelte b/src/routes/tutorial/[slug]/filetree/Item.svelte
index fed862a77..81c8b8008 100644
--- a/src/routes/tutorial/[slug]/filetree/Item.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -204,7 +204,8 @@
 		z-index: 2;
 	}
 
-	[aria-current='true']:has(:focus-visible)::after {
+	[aria-current='true']:has(:focus-visible)::after,
+	:global(.mobile-filetree) [aria-current='true']::after {
 		display: none;
 	}
 </style>
diff --git a/src/routes/tutorial/[slug]/filetree/context.js b/src/routes/tutorial/[slug]/filetree/context.js
index 3e1760547..29ec16ec1 100644
--- a/src/routes/tutorial/[slug]/filetree/context.js
+++ b/src/routes/tutorial/[slug]/filetree/context.js
@@ -2,11 +2,11 @@ import { setContext, getContext } from 'svelte';
 
 /**
  * @typedef {{
- *   readonly: import('svelte/store').Writable<boolean>;
  *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
  *   rename: (stub: import('$lib/types').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/types').Stub) => Promise<void>;
+ *   select: (name: string) => void;
  * }} FileTreeContext
  */