diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/halloween.css b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/halloween.css
new file mode 100644
index 0000000000..1ad55a7eed
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/halloween.css
@@ -0,0 +1,26 @@
+@font-face {
+	font-family: 'Schlop';
+	src: url('./fonts/shlop.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: url(./halloween.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(2px 2px 10px black);
+	font-family: 'Schlop';
+	background: linear-gradient(
+		to bottom,
+		hsl(0, 100%, 77%) 0%,
+		hsl(0, 60%, 50%) 100%
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/margaritaville.css b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/margaritaville.css
new file mode 100644
index 0000000000..9900185b31
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/margaritaville.css
@@ -0,0 +1,21 @@
+@font-face {
+	font-family: 'Casablanca Antique';
+	src: url('./fonts/casablanca-antique.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: url(./margaritaville.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(1px 1px 4px black) drop-shadow(1px 1px 20px black);
+	font-family: 'Casablanca Antique';
+	font-variant: small-caps;
+	color: rgb(255, 226, 131);
+}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/retrowave.css b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/retrowave.css
new file mode 100644
index 0000000000..b59a7e1124
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/retrowave.css
@@ -0,0 +1,40 @@
+@font-face {
+	font-family: 'Road Rage';
+	src: url('./fonts/road-rage.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	/* https://www.wallpaperflare.com/music-stars-background-80s-neon-80-s-synth-retrowave-wallpaper-bdlfo */
+	background: url(./retrowave.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(2px 2px 10px black);
+	font-family: 'Road Rage';
+	background: linear-gradient(
+		to top,
+		hsl(307, 74%, 63%) 1%, 0%,
+		#0000 8%, 0%,
+		hsl(317, 76%, 63%) 10%, 0%,
+		#0000 16%, 0%,
+		hsl(327, 78%, 63%) 19%, 0%,
+		#0000 24%, 0%,
+		hsl(337, 80%, 63%) 28%, 0%,
+		#0000 32%, 0%,
+		hsl(347, 82%, 63%) 37%, 0%,
+		#0000 40%, 0%,
+		hsl(357, 84%, 65%) 46%, 0%,
+		#0000 48%, 0%,
+		hsl(7, 86%, 65%) 55%, 0%,
+		#0000 56%, 0%,
+		hsl(17, 88%, 65%) 57%,
+		hsl(40, 90%, 65%) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/spaaaaace.css b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/spaaaaace.css
new file mode 100644
index 0000000000..76c52fb39e
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/static/stylesheets/spaaaaace.css
@@ -0,0 +1,21 @@
+@font-face {
+	font-family: 'Edge of the Galaxy';
+	src: url('./fonts/edge-of-the-galaxy.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	/* https://www.wallpaperflare.com/outer-space-illustration-nebula-stars-green-galaxy-tylercreatesworlds-wallpaper-qws */
+	background: url(./spaaaaace.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)) drop-shadow(2px 2px 10px rgb(100, 170, 150)) drop-shadow(2px 2px 30px white);
+	font-family: 'Edge of the Galaxy';
+	color: hsl(165, 100%, 95%);
+}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts b/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts
index 1a86ec5428..e182f8bee5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts
@@ -114,12 +114,11 @@ export async function load_exercise(slug: string): Promise<Exercise> {
 	const b: Record<string, string> = {};
 
 	for (const key in assets.a) {
-		// https://github.com/vitejs/vite/issues/17484 — need to replace `.css.x` with `.css`
-		a[key.replace(/\.css\.x$/, '.css')] = await get(assets.a, key);
+		a[key] = await get(assets.a, key);
 	}
 
 	for (const key in assets.b) {
-		b[key.replace(/\.css\.x$/, '.css')] = await get(assets.b, key);
+		b[key] = await get(assets.b, key);
 	}
 
 	for (const key in common) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts b/apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts
index 2738631f79..4d8905ec30 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts
@@ -5,7 +5,6 @@ export const text_files = new Set([
 	'.js',
 	'.ts',
 	'.css',
-	'.x', // https://github.com/vitejs/vite/issues/17484
 	'.svg',
 	'.html',
 	'.md',