From ec2540787adcc299a140050ec9bb38aac320c79d Mon Sep 17 00:00:00 2001
From: BabakFP <44144724+babakfp@users.noreply.github.com>
Date: Thu, 22 Apr 2021 09:05:13 -0700
Subject: [PATCH] Changing tutorial/example order from script-style-html to
 script-html-style (#6213)

Also change button style in one tutorial
---
 .../00-introduction/02-styling/App.svelte     |   6 +-
 .../03-nested-components/App.svelte           |   8 +-
 .../04-events/00-dom-events/App.svelte        |  10 +-
 .../04-events/01-inline-handlers/App.svelte   |  10 +-
 .../CustomButton.svelte                       |  10 +-
 .../05-bindings/04-textarea-inputs/App.svelte |  10 +-
 .../05-bindings/06-select-bindings/App.svelte |  10 +-
 .../05-bindings/09-media-elements/App.svelte  |  54 +++----
 .../05-bindings/10-dimensions/App.svelte      |  12 +-
 .../05-bindings/11-bind-this/App.svelte       |  14 +-
 .../12-component-bindings/Keypad.svelte       |  28 ++--
 .../06-lifecycle/00-onmount/App.svelte        |  28 ++--
 .../06-lifecycle/02-update/App.svelte         |  28 ++--
 .../examples/06-lifecycle/03-tick/App.svelte  |   6 +-
 .../examples/08-motion/00-tweened/App.svelte  |  16 +--
 .../examples/08-motion/01-spring/App.svelte   |  12 +-
 .../03-custom-css-transitions/App.svelte      |  24 ++--
 .../10-animations/00-animate/App.svelte       |  78 +++++-----
 .../examples/11-easing/00-easing/App.svelte   |  60 ++++----
 .../11-easing/00-easing/Controls.svelte       | 133 +++++++++---------
 .../examples/11-easing/00-easing/Grid.svelte  |  28 ++--
 .../examples/12-svg/01-clock/App.svelte       |  78 +++++-----
 .../examples/12-svg/02-bar-chart/App.svelte   |  74 +++++-----
 .../examples/12-svg/03-area-chart/App.svelte  |   2 +-
 .../examples/12-svg/04-scatterplot/App.svelte |  20 +--
 .../12-svg/04-scatterplot/Scatterplot.svelte  |   2 +-
 .../12-svg/05-svg-transitions/App.svelte      |  66 ++++-----
 .../examples/13-actions/00-actions/App.svelte |  22 +--
 .../examples/14-classes/00-classes/App.svelte |  24 ++--
 .../14-classes/01-class-shorthand/App.svelte  |  14 +-
 .../15-composition/00-slots/Box.svelte        |  10 +-
 .../01-slot-fallbacks/Box.svelte              |  14 +-
 .../02-named-slots/ContactCard.svelte         |  42 +++---
 .../15-composition/03-slot-props/App.svelte   |  28 ++--
 .../04-conditional-slots/Profile.svelte       |  24 ++--
 .../15-composition/05-modal/Modal.svelte      |   2 +-
 .../16-context/00-context-api/Map.svelte      |  14 +-
 .../00-svelte-self/File.svelte                |   6 +-
 .../00-svelte-self/Folder.svelte              |  34 ++---
 .../01-svelte-component/BlueThing.svelte      |  10 +-
 .../01-svelte-component/GreenThing.svelte     |  10 +-
 .../01-svelte-component/RedThing.svelte       |  10 +-
 .../02-svelte-window/App.svelte               |  24 ++--
 .../03-svelte-window-bindings/App.svelte      |   2 +-
 .../04-svelte-body/App.svelte                 |  26 ++--
 .../01-module-exports/AudioPlayer.svelte      |  16 +--
 .../20-7guis/02-7guis-temperature/App.svelte  |  20 +--
 .../03-7guis-flight-booker/App.svelte         |  16 +--
 .../20-7guis/05-7guis-crud/App.svelte         |  36 ++---
 .../20-7guis/06-7guis-circles/App.svelte      |  52 +++----
 .../01-hacker-news/App.svelte                 |  22 +--
 .../01-hacker-news/Comment.svelte             |  26 ++--
 .../01-hacker-news/Item.svelte                |  32 ++---
 .../01-hacker-news/List.svelte                |  22 +--
 .../01-hacker-news/Summary.svelte             |  14 +-
 .../02-immutable-data/ImmutableTodo.svelte    |  12 +-
 .../02-immutable-data/MutableTodo.svelte      |  14 +-
 .../04-styling/app-a/App.svelte               |   6 +-
 .../04-styling/app-b/App.svelte               |   4 +-
 .../01-introduction/04-styling/text.md        |   6 +-
 .../05-nested-components/app-a/App.svelte     |   4 +-
 .../05-nested-components/app-a/Nested.svelte  |   2 +-
 .../05-nested-components/app-b/App.svelte     |   6 +-
 .../05-nested-components/app-b/Nested.svelte  |   2 +-
 .../05-events/01-dom-events/app-a/App.svelte  |  10 +-
 .../05-events/01-dom-events/app-b/App.svelte  |  10 +-
 .../02-inline-handlers/app-a/App.svelte       |  10 +-
 .../02-inline-handlers/app-b/App.svelte       |  10 +-
 .../06-dom-event-forwarding/app-a/App.svelte  |   2 +-
 .../app-a/CustomButton.svelte                 |  34 ++---
 .../06-dom-event-forwarding/app-b/App.svelte  |   2 +-
 .../app-b/CustomButton.svelte                 |  34 ++---
 .../04-group-inputs/app-a/App.svelte          |   2 +-
 .../04-group-inputs/app-b/App.svelte          |   2 +-
 .../05-textarea-inputs/app-a/App.svelte       |  10 +-
 .../05-textarea-inputs/app-b/App.svelte       |  10 +-
 .../06-select-bindings/app-a/App.svelte       |  14 +-
 .../06-select-bindings/app-b/App.svelte       |  14 +-
 .../09-each-block-bindings/app-a/App.svelte   |  12 +-
 .../09-each-block-bindings/app-b/App.svelte   |  12 +-
 .../10-media-elements/app-a/App.svelte        |  48 +++----
 .../10-media-elements/app-b/App.svelte        |  54 +++----
 .../11-dimensions/app-a/App.svelte            |  14 +-
 .../11-dimensions/app-b/App.svelte            |  14 +-
 .../06-bindings/12-bind-this/app-a/App.svelte |  12 +-
 .../06-bindings/12-bind-this/app-b/App.svelte |  14 +-
 .../13-component-bindings/app-a/Keypad.svelte |  28 ++--
 .../13-component-bindings/app-b/Keypad.svelte |  28 ++--
 .../07-lifecycle/01-onmount/app-a/App.svelte  |  30 ++--
 .../07-lifecycle/01-onmount/app-b/App.svelte  |  30 ++--
 .../09-motion/01-tweened/app-a/App.svelte     |  16 +--
 .../09-motion/01-tweened/app-b/App.svelte     |  16 +--
 .../09-motion/02-spring/app-a/App.svelte      |  18 ++-
 .../09-motion/02-spring/app-b/App.svelte      |  17 ++-
 .../app-a/App.svelte                          |  24 ++--
 .../app-b/App.svelte                          |  24 ++--
 .../07-local-transitions/app-a/App.svelte     |  16 +--
 .../07-local-transitions/app-b/App.svelte     |  16 +--
 .../08-deferred-transitions/app-a/App.svelte  |   2 +-
 .../08-deferred-transitions/app-b/App.svelte  |   2 +-
 .../11-animations/01-animate/app-a/App.svelte |   2 +-
 .../11-animations/01-animate/app-b/App.svelte |   2 +-
 .../13-classes/01-classes/app-a/App.svelte    |  24 ++--
 .../13-classes/01-classes/app-b/App.svelte    |  24 ++--
 .../02-class-shorthand/app-a/App.svelte       |  14 +-
 .../02-class-shorthand/app-b/App.svelte       |  14 +-
 .../14-composition/01-slots/app-a/Box.svelte  |  10 +-
 .../14-composition/01-slots/app-b/Box.svelte  |  10 +-
 .../02-slot-fallbacks/app-a/Box.svelte        |  10 +-
 .../02-slot-fallbacks/app-b/Box.svelte        |  14 +-
 .../03-named-slots/app-a/ContactCard.svelte   |  54 +++----
 .../03-named-slots/app-b/ContactCard.svelte   |  54 +++----
 .../04-optional-slots/app-a/App.svelte        |  52 +++----
 .../04-optional-slots/app-a/Comment.svelte    |  28 ++--
 .../04-optional-slots/app-a/Project.svelte    |  24 ++--
 .../04-optional-slots/app-b/App.svelte        |  52 +++----
 .../04-optional-slots/app-b/Comment.svelte    |  28 ++--
 .../04-optional-slots/app-b/Project.svelte    |  28 ++--
 .../05-slot-props/app-a/App.svelte            |  22 +--
 .../05-slot-props/app-b/App.svelte            |  28 ++--
 .../01-context-api/app-a/Map.svelte           |  14 +-
 .../01-context-api/app-b/Map.svelte           |  14 +-
 .../01-svelte-self/app-a/File.svelte          |   6 +-
 .../01-svelte-self/app-a/Folder.svelte        |  34 ++---
 .../01-svelte-self/app-b/File.svelte          |   6 +-
 .../01-svelte-self/app-b/Folder.svelte        |  34 ++---
 .../app-a/BlueThing.svelte                    |  10 +-
 .../app-a/GreenThing.svelte                   |  10 +-
 .../02-svelte-component/app-a/RedThing.svelte |  10 +-
 .../app-b/BlueThing.svelte                    |  10 +-
 .../app-b/GreenThing.svelte                   |  10 +-
 .../02-svelte-component/app-b/RedThing.svelte |  10 +-
 .../03-svelte-window/app-a/App.svelte         |  32 ++---
 .../03-svelte-window/app-b/App.svelte         |  30 ++--
 .../app-a/App.svelte                          |   2 +-
 .../app-b/App.svelte                          |   2 +-
 .../07-svelte-options/app-a/Todo.svelte       |  14 +-
 .../07-svelte-options/app-b/Todo.svelte       |  14 +-
 .../08-svelte-fragment/app-a/App.svelte       |   2 +-
 .../08-svelte-fragment/app-a/Box.svelte       |  16 +--
 .../08-svelte-fragment/app-b/App.svelte       |   2 +-
 .../08-svelte-fragment/app-b/Box.svelte       |  16 +--
 .../08-svelte-fragment/text.md                |  12 +-
 .../01-sharing-code/app-a/AudioPlayer.svelte  |  24 ++--
 .../01-sharing-code/app-b/AudioPlayer.svelte  |  24 ++--
 .../app-a/AudioPlayer.svelte                  |  24 ++--
 .../app-b/AudioPlayer.svelte                  |  24 ++--
 .../01-congratulations/app-a/App.svelte       |  10 +-
 148 files changed, 1529 insertions(+), 1447 deletions(-)

diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte
index 7148dcf10f..b3ad2fc8e6 100644
--- a/site/content/examples/00-introduction/02-styling/App.svelte
+++ b/site/content/examples/00-introduction/02-styling/App.svelte
@@ -1,9 +1,9 @@
+<p>Styled!</p>
+
 <style>
 	p {
 		color: purple;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
-</style>
-
-<p>Styled!</p>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte
index bb97f50ace..0b200112ab 100644
--- a/site/content/examples/00-introduction/03-nested-components/App.svelte
+++ b/site/content/examples/00-introduction/03-nested-components/App.svelte
@@ -2,13 +2,13 @@
 	import Nested from './Nested.svelte';
 </script>
 
+<p>These styles...</p>
+<Nested/>
+
 <style>
 	p {
 		color: purple;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
-</style>
-
-<p>These styles...</p>
-<Nested/>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte
index f26112f06c..de1f664112 100644
--- a/site/content/examples/04-events/00-dom-events/App.svelte
+++ b/site/content/examples/04-events/00-dom-events/App.svelte
@@ -7,10 +7,10 @@
 	}
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove={handleMousemove}>
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
index f0fd6ff17a..36fed40a4f 100644
--- a/site/content/examples/04-events/01-inline-handlers/App.svelte
+++ b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -2,10 +2,10 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
index f521c1f471..4004ffbf29 100644
--- a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
+++ b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -1,3 +1,7 @@
+<button on:click>
+	Click me
+</button>
+
 <style>
 	button {
 		height: 4rem;
@@ -15,8 +19,4 @@
 		background-position: 0;
 		color: #aaa;
 	}
-</style>
-
-<button on:click>
-	Click me
-</button>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
index 5a9e18f79d..0d02d7ba2e 100644
--- a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -3,10 +3,10 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<style>
-	textarea { width: 100%; height: 200px; }
-</style>
-
 <textarea bind:value={text}></textarea>
 
-{@html marked(text)}
\ No newline at end of file
+{@html marked(text)}
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte
index 3f1e7fa7e1..a3607a6f4f 100644
--- a/site/content/examples/05-bindings/06-select-bindings/App.svelte
+++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -14,10 +14,6 @@
 	}
 </script>
 
-<style>
-	input { display: block; width: 500px; max-width: 100%; }
-</style>
-
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -36,4 +32,8 @@
 	</button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte
index 45345a39ff..5aad9a0fae 100644
--- a/site/content/examples/05-bindings/09-media-elements/App.svelte
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -51,6 +51,32 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+			<track kind="captions"/>
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,30 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused>
-			<track kind="captions"/>
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte
index ca992599c1..c955aeba8e 100644
--- a/site/content/examples/05-bindings/10-dimensions/App.svelte
+++ b/site/content/examples/05-bindings/10-dimensions/App.svelte
@@ -5,11 +5,6 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
@@ -17,4 +12,9 @@
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte
index 439d240670..8612e8f5e3 100644
--- a/site/content/examples/05-bindings/11-bind-this/App.svelte
+++ b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -38,6 +38,12 @@
 	});
 </script>
 
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -46,10 +52,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
index c457a15cb5..631f7964e2 100644
--- a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
+++ b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
index 1b83727627..b6c3100e58 100644
--- a/site/content/examples/06-lifecycle/00-onmount/App.svelte
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -9,6 +9,20 @@
 	});
 </script>
 
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
+
 <style>
 	.photos {
 		width: 100%;
@@ -22,17 +36,3 @@
 		margin: 0;
 	}
 </style>
-
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte
index 419e763c57..ee3bca32df 100644
--- a/site/content/examples/06-lifecycle/02-update/App.svelte
+++ b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -51,6 +51,20 @@
 	}
 </script>
 
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
+
 <style>
 	.chat {
 		display: flex;
@@ -90,17 +104,3 @@
 		border-radius: 1em 1em 0 1em;
 	}
 </style>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown}>
-</div>
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
index 477b5ffb79..e678020d3d 100644
--- a/site/content/examples/06-lifecycle/03-tick/App.svelte
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -27,11 +27,11 @@
 	}
 </script>
 
+<textarea value={text} on:keydown={handleKeydown}></textarea>
+
 <style>
 	textarea {
 		width: 100%;
 		height: 200px;
 	}
-</style>
-
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte
index 83f3b50a04..ee3c7a1b5d 100644
--- a/site/content/examples/08-motion/00-tweened/App.svelte
+++ b/site/content/examples/08-motion/00-tweened/App.svelte
@@ -8,13 +8,6 @@
 	});
 </script>
 
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
-
 <progress value={$progress}></progress>
 
 <button on:click="{() => progress.set(0)}">
@@ -35,4 +28,11 @@
 
 <button on:click="{() => progress.set(1)}">
 	100%
-</button>
\ No newline at end of file
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
index 9918cf40e8..251bf640ee 100644
--- a/site/content/examples/08-motion/01-spring/App.svelte
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -9,11 +9,6 @@
 	let size = spring(10);
 </script>
 
-<style>
-	svg { width: 100%; height: 100%; margin: -8px }
-	circle { fill: #ff3e00 }
-</style>
-
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
@@ -32,4 +27,9 @@
 	on:mouseup="{() => size.set(10)}"
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
\ No newline at end of file
+</svg>
+
+<style>
+	svg { width: 100%; height: 100%; margin: -8px }
+	circle { fill: #ff3e00 }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
index 6e8dfcaf08..a98f38272a 100644
--- a/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -22,6 +22,17 @@
 	}
 </script>
 
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
 <style>
 	.centered {
 		position: absolute;
@@ -35,15 +46,4 @@
 		transform: translate(-50%,-50%);
 		font-size: 4em;
 	}
-</style>
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
index a90d0ecfb5..d1842671da 100644
--- a/site/content/examples/10-animations/00-animate/App.svelte
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -46,6 +46,44 @@
 	}
 </script>
 
+<div class='board'>
+	<input
+		class="new-todo"
+		placeholder="what needs to be done?"
+		on:keydown="{event => event.key === 'Enter' && add(event.target)}"
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
 <style>
 	.new-todo {
 		font-size: 1.4em;
@@ -106,42 +144,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
-
-<div class='board'>
-	<input
-		class="new-todo"
-		placeholder="what needs to be done?"
-		on:keydown="{event => event.key === 'Enter' && add(event.target)}"
-	>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte
index c33e73518e..7e79edf2af 100644
--- a/site/content/examples/11-easing/00-easing/App.svelte
+++ b/site/content/examples/11-easing/00-easing/App.svelte
@@ -37,35 +37,6 @@
 	$: current && runAnimations();
 </script>
 
-<style>
-	.easing-vis {
-		display: flex;
-		max-height: 95%;
-		max-width: 800px;
-		margin: auto;
-		padding: 10px;
-		border: 1px solid #333;
-		border-radius: 2px;
-		padding: 20px;
-	}
-
-	svg {
-		width: 100%;
-		margin: 0 20px 0 0;
-	}
-
-	.graph {
-		transform: translate(200px,400px)
-	}
-
-	@media (max-width:600px) {
-		.easing-vis {
-			flex-direction: column;
-			max-height: calc(100% - 3rem);
-		}
-	}
-</style>
-
 <div bind:offsetWidth={width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
@@ -103,4 +74,33 @@
 		bind:current_type
 		on:play={runAnimations}
 	/>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.easing-vis {
+		display: flex;
+		max-height: 95%;
+		max-width: 800px;
+		margin: auto;
+		padding: 10px;
+		border: 1px solid #333;
+		border-radius: 2px;
+		padding: 20px;
+	}
+
+	svg {
+		width: 100%;
+		margin: 0 20px 0 0;
+	}
+
+	.graph {
+		transform: translate(200px,400px)
+	}
+
+	@media (max-width:600px) {
+		.easing-vis {
+			flex-direction: column;
+			max-height: calc(100% - 3rem);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte
index 66a297323f..3123b8a25b 100644
--- a/site/content/examples/11-easing/00-easing/Controls.svelte
+++ b/site/content/examples/11-easing/00-easing/Controls.svelte
@@ -14,6 +14,72 @@
 	$: mobile = width && width < 600;
 </script>
 
+<div class="easing-sidebar">
+		<div class="easing-types">
+			<h3>Ease</h3>
+			{#if mobile}
+				<select bind:value={current_ease}>
+					{#each [...eases] as [name]}
+						<option
+							value={name}
+							class:selected={name === current_ease}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each [...eases] as [name]}
+						<li
+							class:selected={name === current_ease}
+							on:click={() => current_ease = name}
+						>
+							{name}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+			<h3>Type</h3>
+			{#if mobile }
+				<select bind:value={current_type}>
+					{#each types as [name, type]}
+						<option
+							value={type}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each types as [name, type]}
+						<li
+							class:selected={type === current_type}
+							on:click={() => current_type = type}
+						>
+							{name}
+					</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+		<h4>
+			Duration
+		</h4>
+		<div class="duration">
+			<span>
+				<input type="number" bind:value={duration} min="0" step="100"/>
+				<button class="number" on:click={() => duration -= 100}>-</button>
+				<button class="number" on:click={() => duration += 100}>+</button>
+			</span>
+			<button class="play" on:click={() => dispatch('play')}>
+				{playing ? 'Restart' : 'Play'}
+			</button>
+		</div>
+	</div>
+
+	
 <style>
 	.easing-sidebar {
 		width: 11em;
@@ -118,69 +184,4 @@
 			margin-right: 10px;
 		}
 	}
-</style>
-
-<div class="easing-sidebar">
-		<div class="easing-types">
-			<h3>Ease</h3>
-			{#if mobile}
-				<select bind:value={current_ease}>
-					{#each [...eases] as [name]}
-						<option
-							value={name}
-							class:selected={name === current_ease}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each [...eases] as [name]}
-						<li
-							class:selected={name === current_ease}
-							on:click={() => current_ease = name}
-						>
-							{name}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-			<h3>Type</h3>
-			{#if mobile }
-				<select bind:value={current_type}>
-					{#each types as [name, type]}
-						<option
-							value={type}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each types as [name, type]}
-						<li
-							class:selected={type === current_type}
-							on:click={() => current_type = type}
-						>
-							{name}
-					</li>
-					{/each}
-				</ul>
-			{/if}
-		</div>
-		<h4>
-			Duration
-		</h4>
-		<div class="duration">
-			<span>
-				<input type="number" bind:value={duration} min="0" step="100"/>
-				<button class="number" on:click={() => duration -= 100}>-</button>
-				<button class="number" on:click={() => duration += 100}>+</button>
-			</span>
-			<button class="play" on:click={() => dispatch('play')}>
-				{playing ? 'Restart' : 'Play'}
-			</button>
-		</div>
-	</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte
index e704f46cf7..c0c9d47913 100644
--- a/site/content/examples/11-easing/00-easing/Grid.svelte
+++ b/site/content/examples/11-easing/00-easing/Grid.svelte
@@ -2,19 +2,6 @@
 	export let x, y;
 </script>
 
-<style>
-	.grid-line {
-		stroke:#ccc;
-		opacity: 0.5;
-		stroke-width: 2;
-	}
-
-	.grid-line-xy {
-		stroke: tomato;
-		stroke-width: 2;
-	}
-</style>
-
 <svelte:options namespace="svg" />
 
 <rect
@@ -59,4 +46,17 @@
 	stroke=#999
 	fill=none
 	stroke-width=2
-/>
\ No newline at end of file
+/>
+
+<style>
+	.grid-line {
+		stroke:#ccc;
+		opacity: 0.5;
+		stroke-width: 2;
+	}
+
+	.grid-line-xy {
+		stroke: tomato;
+		stroke-width: 2;
+	}
+</style>
diff --git a/site/content/examples/12-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte
index 49d3a7f809..44f7e484a1 100644
--- a/site/content/examples/12-svg/01-clock/App.svelte
+++ b/site/content/examples/12-svg/01-clock/App.svelte
@@ -20,44 +20,6 @@
 	});
 </script>
 
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-
-	.clock-face {
-		stroke: #333;
-		fill: white;
-	}
-
-	.minor {
-		stroke: #999;
-		stroke-width: 0.5;
-	}
-
-	.major {
-		stroke: #333;
-		stroke-width: 1;
-	}
-
-	.hour {
-		stroke: #333;
-	}
-
-	.minute {
-		stroke: #666;
-	}
-
-	.second, .second-counterweight {
-		stroke: rgb(180,0,0);
-	}
-
-	.second-counterweight {
-		stroke-width: 3;
-	}
-</style>
-
 <svg viewBox='-50 -50 100 100'>
 	<circle class='clock-face' r='48'/>
 
@@ -101,4 +63,42 @@
 		<line class='second' y1='10' y2='-38'/>
 		<line class='second-counterweight' y1='10' y2='2'/>
 	</g>
-</svg>
\ No newline at end of file
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.clock-face {
+		stroke: #333;
+		fill: white;
+	}
+
+	.minor {
+		stroke: #999;
+		stroke-width: 0.5;
+	}
+
+	.major {
+		stroke: #333;
+		stroke-width: 1;
+	}
+
+	.hour {
+		stroke: #333;
+	}
+
+	.minute {
+		stroke: #666;
+	}
+
+	.second, .second-counterweight {
+		stroke: rgb(180,0,0);
+	}
+
+	.second-counterweight {
+		stroke-width: 3;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte
index 30c374b67e..d44c0e67cf 100644
--- a/site/content/examples/12-svg/02-bar-chart/App.svelte
+++ b/site/content/examples/12-svg/02-bar-chart/App.svelte
@@ -33,6 +33,42 @@
 	$: barWidth = innerWidth / xTicks.length;
 </script>
 
+<h2>US birthrate by year</h2>
+
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+	<svg>
+		<!-- y axis -->
+		<g class="axis y-axis" transform="translate(0,{padding.top})">
+			{#each yTicks as tick}
+				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
+					<line x2="100%"></line>
+					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
+				</g>
+			{/each}
+		</g>
+
+		<!-- x axis -->
+		<g class="axis x-axis">
+			{#each points as point, i}
+				<g class="tick" transform="translate({xScale(i)},{height})">
+					<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
+				</g>
+			{/each}
+		</g>
+
+		<g class='bars'>
+			{#each points as point, i}
+				<rect
+					x="{xScale(i) + 2}"
+					y="{yScale(point.birthrate)}"
+					width="{barWidth - 4}"
+					height="{height - padding.bottom - yScale(point.birthrate)}"
+				></rect>
+			{/each}
+		</g>
+	</svg>
+</div>
+
 <style>
 	h2 {
 		text-align: center;
@@ -79,40 +115,4 @@
 		stroke: none;
 		opacity: 0.65;
 	}
-</style>
-
-<h2>US birthrate by year</h2>
-
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
-	<svg>
-		<!-- y axis -->
-		<g class="axis y-axis" transform="translate(0,{padding.top})">
-			{#each yTicks as tick}
-				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
-					<line x2="100%"></line>
-					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
-				</g>
-			{/each}
-		</g>
-
-		<!-- x axis -->
-		<g class="axis x-axis">
-			{#each points as point, i}
-				<g class="tick" transform="translate({xScale(i)},{height})">
-					<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
-				</g>
-			{/each}
-		</g>
-
-		<g class='bars'>
-			{#each points as point, i}
-				<rect
-					x="{xScale(i) + 2}"
-					y="{yScale(point.birthrate)}"
-					width="{barWidth - 4}"
-					height="{height - padding.bottom - yScale(point.birthrate)}"
-				></rect>
-			{/each}
-		</g>
-	</svg>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte
index 98ff070411..2fe39280e4 100644
--- a/site/content/examples/12-svg/03-area-chart/App.svelte
+++ b/site/content/examples/12-svg/03-area-chart/App.svelte
@@ -108,4 +108,4 @@
 	.path-area {
 		fill: rgba(0,100,100,0.2);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte
index 42a0660b87..1ceb1d221c 100644
--- a/site/content/examples/12-svg/04-scatterplot/App.svelte
+++ b/site/content/examples/12-svg/04-scatterplot/App.svelte
@@ -3,6 +3,15 @@
 	import data from './data.js';
 </script>
 
+<div class="chart">
+	<h2>Anscombe's quartet</h2>
+
+	<Scatterplot points={data.a}/>
+	<Scatterplot points={data.b}/>
+	<Scatterplot points={data.c}/>
+	<Scatterplot points={data.d}/>
+</div>
+
 <style>
 	.chart {
 		width: 100%;
@@ -12,13 +21,4 @@
 		max-height: 480px;
 		margin: 0 auto;
 	}
-</style>
-
-<div class="chart">
-	<h2>Anscombe's quartet</h2>
-
-	<Scatterplot points={data.a}/>
-	<Scatterplot points={data.b}/>
-	<Scatterplot points={data.c}/>
-	<Scatterplot points={data.d}/>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
index f7a46899fa..7ae113ab06 100644
--- a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -92,4 +92,4 @@
 	.y-axis text {
 		text-anchor: end;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte
index 6e1e636b20..7f3a774a2c 100644
--- a/site/content/examples/12-svg/05-svg-transitions/App.svelte
+++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte
@@ -7,6 +7,38 @@
 	let visible = true;
 </script>
 
+{#if visible}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+		<g out:fade="{{duration: 200}}" opacity=0.2>
+			<path
+				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
+				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
+				d={outer}
+			/>
+			<path
+				in:draw="{{duration: 1000}}"
+				style="stroke:#ff3e00; stroke-width: 1.5"
+				d={inner}
+			/>
+		</g>
+	</svg>
+
+	<div class="centered" out:fly="{{y: -20, duration: 800}}">
+		{#each 'SVELTE' as char, i}
+			<span
+				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
+			>{char}</span>
+		{/each}
+	</div>
+{/if}
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	toggle me
+</label>
+
+<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
+
 <style>
 	svg {
 		width: 100%;
@@ -39,36 +71,4 @@
 	.centered span {
 		will-change: filter;
 	}
-</style>
-
-{#if visible}
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-		<g out:fade="{{duration: 200}}" opacity=0.2>
-			<path
-				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
-				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
-				d={outer}
-			/>
-			<path
-				in:draw="{{duration: 1000}}"
-				style="stroke:#ff3e00; stroke-width: 1.5"
-				d={inner}
-			/>
-		</g>
-	</svg>
-
-	<div class="centered" out:fly="{{y: -20, duration: 800}}">
-		{#each 'SVELTE' as char, i}
-			<span
-				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
-			>{char}</span>
-		{/each}
-	</div>
-{/if}
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	toggle me
-</label>
-
-<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
+</style>
\ No newline at end of file
diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
index 171f82762c..4548a5cbb6 100644
--- a/site/content/examples/13-actions/00-actions/App.svelte
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -25,6 +25,16 @@
 	}
 </script>
 
+<div class="box"
+	use:pannable
+	on:panstart={handlePanStart}
+	on:panmove={handlePanMove}
+	on:panend={handlePanEnd}
+	style="transform:
+		translate({$coords.x}px,{$coords.y}px)
+		rotate({$coords.x * 0.2}deg)"
+></div>
+
 <style>
 	.box {
 		--width: 100px;
@@ -38,14 +48,4 @@
 		background-color: #ff3e00;
 		cursor: move;
 	}
-</style>
-
-<div class="box"
-	use:pannable
-	on:panstart={handlePanStart}
-	on:panmove={handlePanMove}
-	on:panend={handlePanEnd}
-	style="transform:
-		translate({$coords.x}px,{$coords.y}px)
-		rotate({$coords.x * 0.2}deg)"
-></div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/14-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte
index 4da386991d..1073242bcf 100644
--- a/site/content/examples/14-classes/00-classes/App.svelte
+++ b/site/content/examples/14-classes/00-classes/App.svelte
@@ -2,17 +2,6 @@
 	let current = 'foo';
 </script>
 
-<style>
-	button {
-		display: block;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <button
 	class:active="{current === 'foo'}"
 	on:click="{() => current = 'foo'}"
@@ -26,4 +15,15 @@
 <button
 	class:active="{current === 'baz'}"
 	on:click="{() => current = 'baz'}"
->baz</button>
\ No newline at end of file
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/14-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte
index 0f4e0d9f24..c91385e4e5 100644
--- a/site/content/examples/14-classes/01-class-shorthand/App.svelte
+++ b/site/content/examples/14-classes/01-class-shorthand/App.svelte
@@ -2,12 +2,6 @@
 	let big = false;
 </script>
 
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
-
 <label>
 	<input type=checkbox bind:checked={big}>
 	big
@@ -15,4 +9,10 @@
 
 <div class:big>
 	some {big ? 'big' : 'small'} text
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/00-slots/Box.svelte b/site/content/examples/15-composition/00-slots/Box.svelte
index 7ed13f386f..b17fdbe60d 100644
--- a/site/content/examples/15-composition/00-slots/Box.svelte
+++ b/site/content/examples/15-composition/00-slots/Box.svelte
@@ -1,3 +1,7 @@
+<div class="box">
+	<slot></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot></slot>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
index 66c580632c..bdaf61b874 100644
--- a/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
+++ b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
@@ -1,3 +1,9 @@
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,10 +13,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
index 1acf290943..87bd392afa 100644
--- a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -1,3 +1,23 @@
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
 <style>
 	.contact-card {
 		width: 300px;
@@ -24,24 +44,4 @@
 	.address { background-image: url(tutorial/icons/map-marker.svg) }
 	.email   { background-image: url(tutorial/icons/email.svg) }
 	.missing { color: #999 }
-</style>
-
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte
index 36772a5077..299cd336a6 100644
--- a/site/content/examples/15-composition/03-slot-props/App.svelte
+++ b/site/content/examples/15-composition/03-slot-props/App.svelte
@@ -2,19 +2,6 @@
 	import Hoverable from './Hoverable.svelte';
 </script>
 
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
@@ -43,4 +30,17 @@
 			<p>Hover over me!</p>
 		{/if}
 	</div>
-</Hoverable>
\ No newline at end of file
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/04-conditional-slots/Profile.svelte b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
index 09026cd6d6..834c23dc14 100644
--- a/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
+++ b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -1,15 +1,3 @@
-<style>
-	section {
-		width: 200px;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		padding: 16px;
-		box-shadow: 2px 2px 4px #dedede;
-		border: 1px solid #888;
-		margin-bottom: 16px;
-	}
-</style>
-
 <section>
 	<div>Name</div>
 	<slot name="name" />
@@ -22,3 +10,15 @@
 		<slot name="phone" />
 	{/if}
 </section>
+
+<style>
+	section {
+		width: 200px;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		padding: 16px;
+		box-shadow: 2px 2px 4px #dedede;
+		border: 1px solid #888;
+		margin-bottom: 16px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/05-modal/Modal.svelte b/site/content/examples/15-composition/05-modal/Modal.svelte
index 4a5329b05b..baa57824bc 100644
--- a/site/content/examples/15-composition/05-modal/Modal.svelte
+++ b/site/content/examples/15-composition/05-modal/Modal.svelte
@@ -78,4 +78,4 @@
 	button {
 		display: block;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/16-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte
index 0282cbc311..059fcca45b 100644
--- a/site/content/examples/16-context/00-context-api/Map.svelte
+++ b/site/content/examples/16-context/00-context-api/Map.svelte
@@ -36,15 +36,15 @@
 	});
 </script>
 
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
+
 <style>
 	div {
 		width: 100%;
 		height: 100%;
 	}
-</style>
-
-<div bind:this={container}>
-	{#if map}
-		<slot></slot>
-	{/if}
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
index e34686101a..8a0048dd68 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/File.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
@@ -3,12 +3,12 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
-
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
index c25bb2a93d..f5f0a7b194 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -10,6 +10,22 @@
 	}
 </script>
 
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
@@ -33,20 +49,4 @@
 	li {
 		padding: 0.2em 0;
 	}
-</style>
-
-<span class:expanded on:click={toggle}>{name}</span>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<svelte:self {...file}/>
-				{:else}
-					<File {...file}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
index f9130d9d65..eb7ba64163 100644
--- a/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
+++ b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: blue; }
-</style>
+<strong>Blue thing</strong>
 
-<strong>blue thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
index 9cbee235d3..ed2aa49f27 100644
--- a/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
+++ b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: green; }
-</style>
+<strong>Green thing</strong>
 
-<strong>green thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
index 42f5e4c672..365f226492 100644
--- a/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
+++ b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: red; }
-</style>
+<strong>Red thing</strong>
 
-<strong>red thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/02-svelte-window/App.svelte b/site/content/examples/17-special-elements/02-svelte-window/App.svelte
index 845d666dff..8452f160b0 100644
--- a/site/content/examples/17-special-elements/02-svelte-window/App.svelte
+++ b/site/content/examples/17-special-elements/02-svelte-window/App.svelte
@@ -8,6 +8,17 @@
 	}
 </script>
 
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
 <style>
 	div {
 		display: flex;
@@ -28,15 +39,4 @@
 		border-bottom: 5px solid rgba(0,0,0,0.2);
 		color: #555;
 	}
-</style>
-
-<svelte:window on:keydown={handleKeydown}/>
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
index 3dbfd43f21..28831a6d31 100644
--- a/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
+++ b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/04-svelte-body/App.svelte b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
index ac946962eb..d3245ab447 100644
--- a/site/content/examples/17-special-elements/04-svelte-body/App.svelte
+++ b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
@@ -5,6 +5,18 @@
 	const handleMouseleave = () => hereKitty = false;
 </script>
 
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="tutorial/kitten.png"
+>
+
 <style>
 	img {
 		position: absolute;
@@ -22,16 +34,4 @@
 	:global(body) {
 		overflow: hidden;
 	}
-</style>
-
-<svelte:body
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave}
-/>
-
-<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
-<img
-	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
->
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index 4e3d191dbf..561c7094a4 100644
--- a/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -31,13 +31,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -49,4 +42,11 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</article>
+
+<style>
+	article { margin: 0 0 1em 0; max-width: 800px }
+	h2, p { margin: 0 0 0.3em 0; }
+	audio { width: 100%; margin: 0.5em 0 1em 0; }
+	.playing { color: #ff3e00; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
index 503fb080ea..fce279ed76 100644
--- a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
+++ b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
@@ -1,13 +1,3 @@
-<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
-<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
-<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
-
-<style>
-	input {
-		width: 5em;
-	}
-</style>
-
 <script>
 	let c = 0;
 	let f = 32;
@@ -22,3 +12,13 @@
 		c =+(5 / 9 * (f - 32)).toFixed(1);
 	}
 </script>
+
+<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
+<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
+<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
+
+<style>
+	input {
+		width: 5em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 82b23596b7..f9484aa360 100644
--- a/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -37,14 +37,6 @@
 	}
 </script>
 
-<style>
-	select, input, button {
-		display: block;
-		margin: 0.5em 0;
-		font-size: inherit;
-	}
-</style>
-
 <select bind:value={isReturn}>
 	<option value={false}>one-way flight</option>
 	<option value={true}>return flight</option>
@@ -57,3 +49,11 @@
 	on:click={bookFlight}
 	disabled="{isReturn && (startDate >= endDate)}"
 >book</button>
+
+<style>
+	select, input, button {
+		display: block;
+		margin: 0.5em 0;
+		font-size: inherit;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index aec623d2a4..5097eebe26 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -50,6 +50,23 @@
 	}
 </script>
 
+<input placeholder="filter prefix" bind:value={prefix}>
+
+<select bind:value={i} size={5}>
+	{#each filteredPeople as person, i}
+		<option value={i}>{person.last}, {person.first}</option>
+	{/each}
+</select>
+
+<label><input bind:value={first} placeholder="first"></label>
+<label><input bind:value={last} placeholder="last"></label>
+
+<div class='buttons'>
+	<button on:click={create} disabled="{!first || !last}">create</button>
+	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
+	<button on:click={remove} disabled="{!selected}">delete</button>
+</div>
+
 <style>
 	* {
 		font-family: inherit;
@@ -70,21 +87,4 @@
 	.buttons {
 		clear: both;
 	}
-</style>
-
-<input placeholder="filter prefix" bind:value={prefix}>
-
-<select bind:value={i} size={5}>
-	{#each filteredPeople as person, i}
-		<option value={i}>{person.last}, {person.first}</option>
-	{/each}
-</select>
-
-<label><input bind:value={first} placeholder="first"></label>
-<label><input bind:value={last} placeholder="last"></label>
-
-<div class='buttons'>
-	<button on:click={create} disabled="{!first || !last}">create</button>
-	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
-	<button on:click={remove} disabled="{!selected}">delete</button>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/06-7guis-circles/App.svelte b/site/content/examples/20-7guis/06-7guis-circles/App.svelte
index 471623aa80..2c42250f8e 100644
--- a/site/content/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/site/content/examples/20-7guis/06-7guis-circles/App.svelte
@@ -65,6 +65,31 @@ radius of the selected circle.
 	}
 </script>
 
+<div class="controls">
+	<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
+	<button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
+</div>
+
+<svg on:click={handleClick} >
+	{#each circles as circle}
+		<circle cx={circle.cx} cy={circle.cy} r={circle.r}
+			on:click="{event => select(circle, event)}"
+			on:contextmenu|stopPropagation|preventDefault="{() => {
+				adjusting = !adjusting;
+				if (adjusting) selected = circle;
+			}}"
+			fill="{circle === selected ? '#ccc': 'white'}"
+		/>
+	{/each}
+</svg>
+
+{#if adjusting}
+	<div class="adjuster">
+		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
+		<input type="range" value={selected.r} on:input={adjust}>
+	</div>
+{/if}
+
 <style>
 	.controls {
 		position: absolute;
@@ -97,29 +122,4 @@ radius of the selected circle.
 	input[type='range'] {
 		width: 100%;
 	}
-</style>
-
-<div class="controls">
-	<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
-	<button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
-</div>
-
-<svg on:click={handleClick} >
-	{#each circles as circle}
-		<circle cx={circle.cx} cy={circle.cy} r={circle.r}
-			on:click="{event => select(circle, event)}"
-			on:contextmenu|stopPropagation|preventDefault="{() => {
-				adjusting = !adjusting;
-				if (adjusting) selected = circle;
-			}}"
-			fill="{circle === selected ? '#ccc': 'white'}"
-		/>
-	{/each}
-</svg>
-
-{#if adjusting}
-	<div class="adjuster">
-		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
-		<input type="range" value={selected.r} on:input={adjust}>
-	</div>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
index 2213914430..f8a2e9066a 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
@@ -26,6 +26,16 @@
 	onMount(hashchange);
 </script>
 
+<svelte:window on:hashchange={hashchange}/>
+
+<main>
+	{#if item}
+		<Item {item} returnTo="#/top/{page}"/>
+	{:else if page}
+		<List {page}/>
+	{/if}
+</main>
+
 <style>
 	main {
 		position: relative;
@@ -44,14 +54,4 @@
 	main :global(a) {
 		color: rgb(0,0,150);
 	}
-</style>
-
-<svelte:window on:hashchange={hashchange}/>
-
-<main>
-	{#if item}
-		<Item {item} returnTo="#/top/{page}"/>
-	{:else if page}
-		<List {page}/>
-	{/if}
-</main>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
index 7916f4befb..3faa345746 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
@@ -2,6 +2,18 @@
 	export let comment;
 </script>
 
+<article>
+	<p class="meta">{comment.user} {comment.time_ago}</p>
+
+	{@html comment.content}
+
+	<div class="replies">
+		{#each comment.comments as child}
+			<svelte:self comment={child}/>
+		{/each}
+	</div>
+</article>
+
 <style>
 	article {
 		border-top: 1px solid #eee;
@@ -17,16 +29,4 @@
 	.replies {
 		padding: 0 0 0 1em;
 	}
-</style>
-
-<article>
-	<p class="meta">{comment.user} {comment.time_ago}</p>
-
-	{@html comment.content}
-
-	<div class="replies">
-		{#each comment.comments as child}
-			<svelte:self comment={child}/>
-		{/each}
-	</div>
-</article>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
index 608d04e497..190d8fe20c 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -7,22 +7,6 @@
 	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
-<style>
-	article {
-		margin: 0 0 1em 0;
-	}
-
-	a {
-		display: block;
-		margin: 0 0 1em 0;
-	}
-
-	h1 {
-		font-size: 1.4em;
-		margin: 0;
-	}
-</style>
-
 <a href={returnTo}>&laquo; back</a>
 
 <article>
@@ -41,3 +25,19 @@
 		<Comment {comment}/>
 	{/each}
 </div>
+
+<style>
+	article {
+		margin: 0 0 1em 0;
+	}
+
+	a {
+		display: block;
+		margin: 0 0 1em 0;
+	}
+
+	h1 {
+		font-size: 1.4em;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
index a20d6c5504..46b934a2e7 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
@@ -18,6 +18,16 @@
 		});
 </script>
 
+{#if items}
+	{#each items as item, i}
+		<Summary {item} {i} {offset}/>
+	{/each}
+
+	<a href="#/top/{page + 1}">page {page + 1}</a>
+{:else}
+	<p class="loading">loading...</p>
+{/if}
+
 <style>
 	a {
 		padding: 2em;
@@ -33,14 +43,4 @@
 		from { opacity: 0; }
 		to { opacity: 1; }
 	}
-</style>
-
-{#if items}
-	{#each items as item, i}
-		<Summary {item} {i} {offset}/>
-	{/each}
-
-	<a href="#/top/{page + 1}">page {page + 1}</a>
-{:else}
-	<p class="loading">loading...</p>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index 311d01c24e..08d515f3c2 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -11,6 +11,12 @@
 	$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
+<article>
+	<span>{i + offset + 1}</span>
+	<h2><a target="_blank" href={url}>{item.title}</a></h2>
+	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
+</article>
+
 <style>
 	article {
 		position: relative;
@@ -31,10 +37,4 @@
 	a {
 		color: #333;
 	}
-</style>
-
-<article>
-	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" href={url}>{item.title}</a></h2>
-	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
-</article>
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index fdf1ca7ce0..a2be0eab0b 100644
--- a/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -14,15 +14,15 @@
 	});
 </script>
 
+<!-- the text will flash red whenever
+		the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
 <style>
 	div {
 		cursor: pointer;
 		line-height: 1.5;
 	}
 </style>
-
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<div bind:this={div} on:click>
-	{todo.done ? '👍': ''} {todo.text}
-</div>
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index 801a6dcbd3..d656914f04 100644
--- a/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -12,15 +12,15 @@
 	});
 </script>
 
-<style>
-	div {
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
-
 <!-- the text will flash red whenever
 		the `todo` object changes -->
 <div bind:this={div} on:click>
 	{todo.done ? '👍': ''} {todo.text}
 </div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
index f945ada7d0..672b0e96c7 100644
--- a/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
+++ b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
@@ -1,5 +1,5 @@
+<p>This is a paragraph.</p>
+
 <style>
-	/* styles go here */
+	/* Write your CSS here */
 </style>
-
-<p>This is a paragraph.</p>
diff --git a/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
index 5feb02e701..a6451a008a 100644
--- a/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
+++ b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
@@ -1,3 +1,5 @@
+<p>This is a paragraph.</p>
+
 <style>
 	p {
 		color: purple;
@@ -5,5 +7,3 @@
 		font-size: 2em;
 	}
 </style>
-
-<p>This is a paragraph.</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/04-styling/text.md b/site/content/tutorial/01-introduction/04-styling/text.md
index 71d031dcab..d3500a5ac2 100644
--- a/site/content/tutorial/01-introduction/04-styling/text.md
+++ b/site/content/tutorial/01-introduction/04-styling/text.md
@@ -5,6 +5,8 @@ title: Styling
 Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
 
 ```html
+<p>This is a paragraph.</p>
+
 <style>
 	p {
 		color: purple;
@@ -12,8 +14,6 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 		font-size: 2em;
 	}
 </style>
-
-<p>This is a paragraph.</p>
 ```
 
-Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
\ No newline at end of file
+Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
index 5feb02e701..a6451a008a 100644
--- a/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
@@ -1,3 +1,5 @@
+<p>This is a paragraph.</p>
+
 <style>
 	p {
 		color: purple;
@@ -5,5 +7,3 @@
 		font-size: 2em;
 	}
 </style>
-
-<p>This is a paragraph.</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
index 5297ab1044..83fe98d1d9 100644
--- a/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
@@ -1 +1 @@
-<p>This is another paragraph.</p>
\ No newline at end of file
+<p>This is another paragraph.</p>
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
index f553eed355..b6cac46d2a 100644
--- a/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
@@ -2,6 +2,9 @@
 	import Nested from './Nested.svelte';
 </script>
 
+<p>This is a paragraph.</p>
+<Nested/>
+
 <style>
 	p {
 		color: purple;
@@ -9,6 +12,3 @@
 		font-size: 2em;
 	}
 </style>
-
-<p>This is a paragraph.</p>
-<Nested/>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
index 5297ab1044..83fe98d1d9 100644
--- a/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
@@ -1 +1 @@
-<p>This is another paragraph.</p>
\ No newline at end of file
+<p>This is another paragraph.</p>
diff --git a/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
index dce67f6368..0ba620308e 100644
--- a/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
+++ b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
@@ -7,10 +7,10 @@
 	}
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div>
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
index f26112f06c..de1f664112 100644
--- a/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
+++ b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
@@ -7,10 +7,10 @@
 	}
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove={handleMousemove}>
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
index f26112f06c..de1f664112 100644
--- a/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
+++ b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
@@ -7,10 +7,10 @@
 	}
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove={handleMousemove}>
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
index f0fd6ff17a..36fed40a4f 100644
--- a/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
+++ b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
@@ -2,10 +2,10 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
 	The mouse position is {m.x} x {m.y}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
index e75c78106a..32c4e2a33c 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
@@ -2,7 +2,7 @@
 	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
-		alert('clicked');
+		alert('Button Clicked');
 	}
 </script>
 
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
index e68b9d46d9..d7292a3717 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -1,22 +1,22 @@
+<button>
+	Click me
+</button>
+
 <style>
 	button {
-		height: 4rem;
-		width: 8rem;
-		background-color: #ddd;
-		border-color: #ff3e00;
-		color: #ff3e00;
-		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
-		background-position: 100%;
-		background-size: 400%;
-		transition: background 300ms ease-in-out;
+		background: #E2E8F0;
+		color: #64748B;
+		border: unset;
+		border-radius: 6px;
+		padding: .75rem 1.5rem;
+		cursor: pointer;
 	}
 	button:hover {
-		background-position: 0;
-		color: #ddd;
+		background: #CBD5E1;
+		color: #475569;
 	}
-</style>
-
-<button>
-	Click me
-</button>
\ No newline at end of file
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
index e75c78106a..32c4e2a33c 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
@@ -2,7 +2,7 @@
 	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
-		alert('clicked');
+		alert('Button Clicked');
 	}
 </script>
 
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
index 3ae3172c9d..141ea14980 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@@ -1,22 +1,22 @@
+<button on:click>
+	Click me
+</button>
+
 <style>
 	button {
-		height: 4rem;
-		width: 8rem;
-		background-color: #ddd;
-		border-color: #ff3e00;
-		color: #ff3e00;
-		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
-		background-position: 100%;
-		background-size: 400%;
-		transition: background 300ms ease-in-out;
+		background: #E2E8F0;
+		color: #64748B;
+		border: unset;
+		border-radius: 6px;
+		padding: .75rem 1.5rem;
+		cursor: pointer;
 	}
 	button:hover {
-		background-position: 0;
-		color: #ddd;
+		background: #CBD5E1;
+		color: #475569;
 	}
-</style>
-
-<button on:click>
-	Click me
-</button>
\ No newline at end of file
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
index 5ea04f4e95..038790bc51 100644
--- a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -51,4 +51,4 @@
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
 	</p>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index a46c61c7e7..b12704b87d 100644
--- a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -49,4 +49,4 @@
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
 	</p>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
index a5919d9799..12ac68880c 100644
--- a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
@@ -3,10 +3,10 @@
 	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
-<style>
-	textarea { width: 100%; height: 200px; }
-</style>
-
 <textarea value={value}></textarea>
 
-{@html marked(value)}
\ No newline at end of file
+{@html marked(value)}
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
index be338bf47f..7775ab6319 100644
--- a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
@@ -3,10 +3,10 @@
 	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
-<style>
-	textarea { width: 100%; height: 200px; }
-</style>
-
 <textarea bind:value></textarea>
 
-{@html marked(value)}
\ No newline at end of file
+{@html marked(value)}
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index b6f50b935e..a70b928809 100644
--- a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -14,10 +14,6 @@
 	}
 </script>
 
-<style>
-	input { display: block; width: 500px; max-width: 100%; }
-</style>
-
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -36,4 +32,12 @@
 	</button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input {
+		display: block;
+		width: 500px;
+		max-width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index 3f1e7fa7e1..c584c95b0e 100644
--- a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -14,10 +14,6 @@
 	}
 </script>
 
-<style>
-	input { display: block; width: 500px; max-width: 100%; }
-</style>
-
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -36,4 +32,12 @@
 	</button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input {
+		display: block;
+		width: 500px;
+		max-width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
index 4a2eae9147..b0323eb00a 100644
--- a/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
@@ -16,12 +16,6 @@
 	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
-<style>
-	.done {
-		opacity: 0.4;
-	}
-</style>
-
 <h1>Todos</h1>
 
 {#each todos as todo}
@@ -47,3 +41,9 @@
 <button on:click={clear}>
 	Clear completed
 </button>
+
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
index ff91612ec5..b42cbe3b0a 100644
--- a/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -16,12 +16,6 @@
 	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
-<style>
-	.done {
-		opacity: 0.4;
-	}
-</style>
-
 <h1>Todos</h1>
 
 {#each todos as todo}
@@ -47,3 +41,9 @@
 <button on:click={clear}>
 	Clear completed
 </button>
+
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
index 122b2cf9e9..005652ff21 100644
--- a/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
@@ -51,6 +51,29 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,27 +125,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}>
-		<track kind="captions">
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index 6135105d6a..63e6cd7e21 100644
--- a/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -51,6 +51,32 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,30 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused>
-		<track kind="captions">
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
index 62e92cd536..67bb5db8af 100644
--- a/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -5,12 +5,6 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-	span { word-break: break-all; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
@@ -18,4 +12,10 @@
 
 <div>
 	<span style="font-size: {size}px">{text}</span>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+	span { word-break: break-all; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
index 920c74d276..fbed44dadc 100644
--- a/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -5,12 +5,6 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-	span { word-break: break-all; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
@@ -18,4 +12,10 @@
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+	span { word-break: break-all; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
index f8f93edc2b..ed9cfa6112 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
@@ -36,6 +36,11 @@
 	});
 </script>
 
+<canvas
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -44,9 +49,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	width={32}
-	height={32}
-></canvas>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index 17005e273a..4e537bd90a 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -36,6 +36,12 @@
 	});
 </script>
 
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -44,10 +50,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
index c457a15cb5..631f7964e2 100644
--- a/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
index c457a15cb5..631f7964e2 100644
--- a/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
index e8306d1957..f76c377ad3 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
@@ -2,20 +2,6 @@
 	let photos = [];
 </script>
 
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure, img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
-
 <h1>Photo album</h1>
 
 <div class="photos">
@@ -28,4 +14,18 @@
 		<!-- this block renders when photos.length === 0 -->
 		<p>loading...</p>
 	{/each}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
index 1b83727627..831914fa6a 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
@@ -9,20 +9,6 @@
 	});
 </script>
 
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure, img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
-
 <h1>Photo album</h1>
 
 <div class="photos">
@@ -35,4 +21,18 @@
 		<!-- this block renders when photos.length === 0 -->
 		<p>loading...</p>
 	{/each}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte b/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
index 75c814add2..a4f828264c 100644
--- a/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
+++ b/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
@@ -4,13 +4,6 @@
 	const progress = writable(0);
 </script>
 
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
-
 <progress value={$progress}></progress>
 
 <button on:click="{() => progress.set(0)}">
@@ -31,4 +24,11 @@
 
 <button on:click="{() => progress.set(1)}">
 	100%
-</button>
\ No newline at end of file
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte b/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
index 83f3b50a04..ee3c7a1b5d 100644
--- a/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
+++ b/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
@@ -8,13 +8,6 @@
 	});
 </script>
 
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
-
 <progress value={$progress}></progress>
 
 <button on:click="{() => progress.set(0)}">
@@ -35,4 +28,11 @@
 
 <button on:click="{() => progress.set(1)}">
 	100%
-</button>
\ No newline at end of file
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/02-spring/app-a/App.svelte b/site/content/tutorial/09-motion/02-spring/app-a/App.svelte
index 813c6366b1..aa8a406c2b 100644
--- a/site/content/tutorial/09-motion/02-spring/app-a/App.svelte
+++ b/site/content/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -5,11 +5,6 @@
 	let size = writable(10);
 </script>
 
-<style>
-	svg { width: 100%; height: 100%; margin: -8px; }
-	circle { fill: #ff3e00 }
-</style>
-
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
@@ -28,4 +23,15 @@
 	on:mouseup="{() => size.set(10)}"
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
\ No newline at end of file
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+		margin: -8px;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
index 2cb0fd1eb7..d8a0287c2c 100644
--- a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -9,11 +9,6 @@
 	let size = spring(10);
 </script>
 
-<style>
-	svg { width: 100%; height: 100% }
-	circle { fill: #ff3e00 }
-</style>
-
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
@@ -32,4 +27,14 @@
 	on:mouseup="{() => size.set(10)}"
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
\ No newline at end of file
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
index d1f044360d..872c2e4aa3 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -11,6 +11,17 @@
 	}
 </script>
 
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
 <style>
 	.centered {
 		position: absolute;
@@ -24,15 +35,4 @@
 		transform: translate(-50%,-50%);
 		font-size: 4em;
 	}
-</style>
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index 6e8dfcaf08..a98f38272a 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -22,6 +22,17 @@
 	}
 </script>
 
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
 <style>
 	.centered {
 		position: absolute;
@@ -35,15 +46,4 @@
 		transform: translate(-50%,-50%);
 		font-size: 4em;
 	}
-</style>
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
index ed93815c0d..2e01048cc0 100644
--- a/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
@@ -6,13 +6,6 @@
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
-
 <label>
 	<input type="checkbox" bind:checked={showItems}>
 	show list
@@ -29,4 +22,11 @@
 			{item}
 		</div>
 	{/each}
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
index 3d569cfcbb..46603a8b53 100644
--- a/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
@@ -6,13 +6,6 @@
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
-
 <label>
 	<input type="checkbox" bind:checked={showItems}>
 	show list
@@ -29,4 +22,11 @@
 			{item}
 		</div>
 	{/each}
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
index f05c581390..3b6c6776a6 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
@@ -145,4 +145,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
index b7447ca7de..f3a26915a3 100644
--- a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-a/App.svelte b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
index b7447ca7de..f3a26915a3 100644
--- a/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
+++ b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-b/App.svelte b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
index 0d232bf02b..5c5e76331d 100644
--- a/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
+++ b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
@@ -155,4 +155,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
index baa2543562..f0db8b3214 100644
--- a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
+++ b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
@@ -2,17 +2,6 @@
 	let current = 'foo';
 </script>
 
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <button
 	class="{current === 'foo' ? 'selected' : ''}"
 	on:click="{() => current = 'foo'}"
@@ -26,4 +15,15 @@
 <button
 	class="{current === 'baz' ? 'selected' : ''}"
 	on:click="{() => current = 'baz'}"
->baz</button>
\ No newline at end of file
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
index a8861ad537..00851567ef 100644
--- a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
+++ b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
@@ -2,17 +2,6 @@
 	let current = 'foo';
 </script>
 
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <button
 	class:selected="{current === 'foo'}"
 	on:click="{() => current = 'foo'}"
@@ -26,4 +15,15 @@
 <button
 	class:selected="{current === 'baz'}"
 	on:click="{() => current = 'baz'}"
->baz</button>
\ No newline at end of file
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte b/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
index 5ff6497230..d944a63313 100644
--- a/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
+++ b/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
@@ -2,12 +2,6 @@
 	let big = false;
 </script>
 
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
-
 <label>
 	<input type=checkbox bind:checked={big}>
 	big
@@ -15,4 +9,10 @@
 
 <div class:big={big}>
 	some {big ? 'big' : 'small'} text
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte b/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
index 0f4e0d9f24..c91385e4e5 100644
--- a/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
+++ b/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
@@ -2,12 +2,6 @@
 	let big = false;
 </script>
 
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
-
 <label>
 	<input type=checkbox bind:checked={big}>
 	big
@@ -15,4 +9,10 @@
 
 <div class:big>
 	some {big ? 'big' : 'small'} text
-</div>
\ No newline at end of file
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
index 62f0b92dc0..e199b8ce81 100644
--- a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
+++ b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
@@ -1,3 +1,7 @@
+<div class="box">
+	<!-- content should be injected here -->
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<!-- content should be injected here -->
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
index 7ed13f386f..b17fdbe60d 100644
--- a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
+++ b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
@@ -1,3 +1,7 @@
+<div class="box">
+	<slot></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot></slot>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
index 7ed13f386f..b17fdbe60d 100644
--- a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
@@ -1,3 +1,7 @@
+<div class="box">
+	<slot></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot></slot>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
index 66c580632c..bdaf61b874 100644
--- a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
@@ -1,3 +1,9 @@
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,10 +13,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
index c09404a282..4d8ba30e75 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -1,3 +1,23 @@
+<article class="contact-card">
+	<h2>
+		<slot>
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot>
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot>
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
 <style>
 	.contact-card {
 		width: 300px;
@@ -21,27 +41,13 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
-	.missing { color: #999 }
-</style>
-
-<article class="contact-card">
-	<h2>
-		<slot>
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot>
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot>
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
\ No newline at end of file
+	.address {
+		background-image: url(tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
index 1acf290943..0348b70c55 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -1,3 +1,23 @@
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
 <style>
 	.contact-card {
 		width: 300px;
@@ -21,27 +41,13 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
-	.missing { color: #999 }
-</style>
-
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
\ No newline at end of file
+	.address {
+		background-image: url(tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
index 80a4df59f8..19537cb4b3 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -3,32 +3,6 @@
 	import Comment from './Comment.svelte'
 </script>
 
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
-
 <h1>
 	Projects
 </h1>
@@ -55,3 +29,29 @@
 		/>
 	</li>
 </ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
index 8d15ffa882..b3c10febf5 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
@@ -5,6 +5,19 @@
 	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
 </script>
 
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		background-color: #fff;
@@ -40,17 +53,4 @@
 	.body :global(p) {
 		margin: 0;
 	}
-</style>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32">
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot></slot>
-	</div>
-</article>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
index 38d19fc638..2d98458966 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
@@ -4,6 +4,17 @@
 	export let totalTasks = 0;
 </script>
 
+<article class:has-discussion={true}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	<div class="discussion">
+		<h3>Comments</h3>
+		<slot name="comments"></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		border: 1px #ccc solid;
@@ -48,15 +59,4 @@
 		background-color: #eee;
 		border-top: 1px #ccc solid;
 	}
-</style>
-
-<article class:has-discussion={true}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	<div class="discussion">
-		<h3>Comments</h3>
-		<slot name="comments"></slot>
-	</div>
-</article>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
index 80a4df59f8..19537cb4b3 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
@@ -3,32 +3,6 @@
 	import Comment from './Comment.svelte'
 </script>
 
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
-
 <h1>
 	Projects
 </h1>
@@ -55,3 +29,29 @@
 		/>
 	</li>
 </ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
index 8d15ffa882..b3c10febf5 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
@@ -5,6 +5,19 @@
 	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
 </script>
 
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		background-color: #fff;
@@ -40,17 +53,4 @@
 	.body :global(p) {
 		margin: 0;
 	}
-</style>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32">
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot></slot>
-	</div>
-</article>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
index 87a1d0c3ac..39f55abd18 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
@@ -4,6 +4,19 @@
 	export let totalTasks = 0;
 </script>
 
+<article class:has-discussion={$$slots.comments}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	{#if $$slots.comments}
+		<div class="discussion">
+			<h3>Comments</h3>
+			<slot name="comments"></slot>
+		</div>
+	{/if}
+</article>
+
 <style>
 	article {
 		border: 1px #ccc solid;
@@ -48,17 +61,4 @@
 		background-color: #eee;
 		border-top: 1px #ccc solid;
 	}
-</style>
-
-<article class:has-discussion={$$slots.comments}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	{#if $$slots.comments}
-		<div class="discussion">
-			<h3>Comments</h3>
-			<slot name="comments"></slot>
-		</div>
-	{/if}
-</article>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
index 65f714f2c5..e95b4cbe93 100644
--- a/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
+++ b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
@@ -2,6 +2,16 @@
 	import Hoverable from './Hoverable.svelte';
 </script>
 
+<Hoverable>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
 <style>
 	div {
 		padding: 1em;
@@ -13,14 +23,4 @@
 		background-color: #ff3e00;
 		color: white;
 	}
-</style>
-
-<Hoverable>
-	<div class:active={hovering}>
-		{#if hovering}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
index 36772a5077..299cd336a6 100644
--- a/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
+++ b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
@@ -2,19 +2,6 @@
 	import Hoverable from './Hoverable.svelte';
 </script>
 
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
@@ -43,4 +30,17 @@
 			<p>Hover over me!</p>
 		{/if}
 	</div>
-</Hoverable>
\ No newline at end of file
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
index 888f42da39..c6a660a49f 100644
--- a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -34,15 +34,15 @@
 	});
 </script>
 
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
+
 <style>
 	div {
 		width: 100%;
 		height: 100%;
 	}
-</style>
-
-<div bind:this={container}>
-	{#if map}
-		<slot></slot>
-	{/if}
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
index 0282cbc311..059fcca45b 100644
--- a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
@@ -36,15 +36,15 @@
 	});
 </script>
 
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
+
 <style>
 	div {
 		width: 100%;
 		height: 100%;
 	}
-</style>
-
-<div bind:this={container}>
-	{#if map}
-		<slot></slot>
-	{/if}
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
index e34686101a..8a0048dd68 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
@@ -3,12 +3,12 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
-
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
index add7fb96d3..20096e805e 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -10,6 +10,22 @@
 	}
 </script>
 
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<!-- show folder -->
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
@@ -33,20 +49,4 @@
 	li {
 		padding: 0.2em 0;
 	}
-</style>
-
-<span class:expanded on:click={toggle}>{name}</span>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<!-- show folder -->
-				{:else}
-					<File {...file}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
index e34686101a..8a0048dd68 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
@@ -3,12 +3,12 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
-
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
index c25bb2a93d..f5f0a7b194 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -10,6 +10,22 @@
 	}
 </script>
 
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
@@ -33,20 +49,4 @@
 	li {
 		padding: 0.2em 0;
 	}
-</style>
-
-<span class:expanded on:click={toggle}>{name}</span>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<svelte:self {...file}/>
-				{:else}
-					<File {...file}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
index f9130d9d65..eb7ba64163 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: blue; }
-</style>
+<strong>Blue thing</strong>
 
-<strong>blue thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
index 9cbee235d3..ed2aa49f27 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: green; }
-</style>
+<strong>Green thing</strong>
 
-<strong>green thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
index 42f5e4c672..365f226492 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: red; }
-</style>
+<strong>Red thing</strong>
 
-<strong>red thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
index f9130d9d65..eb7ba64163 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: blue; }
-</style>
+<strong>Blue thing</strong>
 
-<strong>blue thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
index 9cbee235d3..ed2aa49f27 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: green; }
-</style>
+<strong>Green thing</strong>
 
-<strong>green thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
index 42f5e4c672..365f226492 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: red; }
-</style>
+<strong>Red thing</strong>
 
-<strong>red thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
index 9fe2bf526c..24c9a6368a 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
@@ -8,6 +8,17 @@
 	}
 </script>
 
+<svelte:window/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
 <style>
 	div {
 		display: flex;
@@ -22,21 +33,10 @@
 		border-radius: 4px;
 		font-size: 6em;
 		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255,255,255,0.5);
-		border-left: 5px solid rgba(255,255,255,0.5);
-		border-right: 5px solid rgba(0,0,0,0.2);
-		border-bottom: 5px solid rgba(0,0,0,0.2);
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		color: #555;
 	}
-</style>
-
-<svelte:window/>
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
index 845d666dff..026dfa94f7 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
@@ -8,6 +8,17 @@
 	}
 </script>
 
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
 <style>
 	div {
 		display: flex;
@@ -22,21 +33,10 @@
 		border-radius: 4px;
 		font-size: 6em;
 		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255,255,255,0.5);
-		border-left: 5px solid rgba(255,255,255,0.5);
-		border-right: 5px solid rgba(0,0,0,0.2);
-		border-bottom: 5px solid rgba(0,0,0,0.2);
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		color: #555;
 	}
 </style>
-
-<svelte:window on:keydown={handleKeydown}/>
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
index 04b4de5cf2..ba51140ff4 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
index 15c2aa0ebc..2fc076b991 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
index 5e0dbca300..57d4dcc79a 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
@@ -11,15 +11,15 @@
 	});
 </script>
 
-<style>
-	div {
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
-
 <!-- the text will flash red whenever
      the `todo` object changes -->
 <div bind:this={div} on:click>
 	{todo.done ? '👍': ''} {todo.text}
 </div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
index e7ddcedc47..fa81d35989 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
@@ -13,15 +13,15 @@
 	});
 </script>
 
-<style>
-	div {
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
-
 <!-- the text will flash red whenever
      the `todo` object changes -->
 <div bind:this={div} on:click>
 	{todo.done ? '👍': ''} {todo.text}
 </div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
index 35f2586857..442ff07d26 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
@@ -7,4 +7,4 @@
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</div>
-</Box>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
index 16c17f90ef..ed389182a7 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
@@ -1,9 +1,15 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 		
@@ -11,10 +17,4 @@
 		flex-direction: column;
 		gap: 1em;
 	}
-</style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
index 6f55903ece..e66b026d90 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
@@ -7,4 +7,4 @@
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</svelte:fragment>
-</Box>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
index 16c17f90ef..ed389182a7 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
@@ -1,9 +1,15 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 		
@@ -11,10 +17,4 @@
 		flex-direction: column;
 		gap: 1em;
 	}
-</style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
index fca7aeb844..2103404799 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
@@ -8,6 +8,12 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 
 ```sv
 <!-- Box.svelte -->
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {		
 		display: flex;
@@ -15,12 +21,6 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 		gap: 1em;
 	}
 </style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>
 ```
 
 However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
index 12d3a78c41..179bdacffe 100644
--- a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -12,13 +12,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -30,4 +23,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 609f9f1af0..3352074a2c 100644
--- a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -17,13 +17,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -35,4 +28,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 27dbe1993b..90f3c67551 100644
--- a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -25,13 +25,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -43,4 +36,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index 4e3d191dbf..f28e8b0c7f 100644
--- a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
@@ -31,13 +31,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -49,4 +42,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte b/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
index 2e72fafe23..b1bd64dea0 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
+++ b/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
@@ -33,6 +33,10 @@
 	});
 </script>
 
+{#each confetti as c}
+	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
+{/each}
+
 <style>
 	:global(body) {
 		overflow: hidden;
@@ -42,8 +46,4 @@
 		position: absolute;
 		font-size: 5vw;
 	}
-</style>
-
-{#each confetti as c}
-	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
-{/each}
\ No newline at end of file
+</style>
\ No newline at end of file