diff --git a/web/packages/core/src/shadow-template.ts b/web/packages/core/src/shadow-template.ts
index af38e1c5a..bbb076832 100644
--- a/web/packages/core/src/shadow-template.ts
+++ b/web/packages/core/src/shadow-template.ts
@@ -5,9 +5,15 @@
 export const ruffleShadowTemplate = document.createElement("template");
 ruffleShadowTemplate.innerHTML = `
     <style>
+        :root {
+            --ruffle-blue: #37528c;
+            --ruffle-orange: #ffad33;
+        }
+
         :host {
             display: inline-block;
-            /* Default width/height; this will get overridden by user styles/attributes */
+            position: relative;
+            /* Default width/height; this will get overridden by user styles/attributes. */
             width: 550px;
             height: 400px;
             font-family: Arial, sans-serif;
@@ -16,36 +22,39 @@ ruffleShadowTemplate.innerHTML = `
             user-select: none;
             -webkit-user-select: none;
             -webkit-tap-highlight-color: transparent;
-            position: relative;
         }
 
-        /* All of these use the dimensions specified by the embed */
+        /* All of these use the dimensions specified by the embed. */
         #container,
-        #container canvas,
         #play_button,
         #unmute_overlay,
         #unmute_overlay .background,
         #panic,
         #message_overlay {
-            width: inherit;
-            height: inherit;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
         }
 
         #container {
-            position: relative;
             overflow: hidden;
         }
 
+        #container canvas {
+            width: 100%;
+            height: 100%;
+        }
+
         #play_button,
         #unmute_overlay {
-            position: absolute;
             cursor: pointer;
             display: none;
         }
 
         #unmute_overlay .background {
-            position: absolute;
-            background-color: #000;
+            background: black;
             opacity: 0.7;
         }
 
@@ -68,16 +77,15 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #panic {
-            position: absolute;
             font-size: 20px;
             text-align: center;
-            /* Inverted colours from play button! */
+            /* Inverted colors from play button! */
             background: linear-gradient(180deg, rgba(253,58,64,1) 0%, rgba(253,161,56,1) 100%);
-            color: #FFF;
+            color: white;
         }
 
         #panic a {
-            color: #37528C;
+            color: var(--ruffle-blue);
             font-weight: bold;
         }
 
@@ -125,9 +133,9 @@ ruffleShadowTemplate.innerHTML = `
 
         #message_overlay {
             position: absolute;
-            background-color: #37528C;
-            color: #FFAD33;
-            opacity: 1.0;
+            background: var(--ruffle-blue);
+            color: var(--ruffle-orange);
+            opacity: 1;
             z-index: 2;
             display: flex;
             align-items: center;
@@ -155,9 +163,9 @@ ruffleShadowTemplate.innerHTML = `
 
         #message_overlay a, #message_overlay button {
             cursor: pointer;
-            background-color: #37528C;
-            color: #FFAD33;
-            border: 2px solid #FFAD33;
+            background: var(--ruffle-blue);
+            color: var(--ruffle-orange);
+            border: 2px solid var(--ruffle-orange);
             font-weight: bold;
             font-size: 1.25em;
             border-radius: 0.6em;
@@ -167,13 +175,28 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #message_overlay a:hover, #message_overlay button:hover {
-            background-color: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        #continue-btn {
+             cursor: pointer;
+             background: var(--ruffle-blue);
+             color: var(--ruffle-orange);
+             border: 2px solid var(--ruffle-orange);
+             font-weight: bold;
+             font-size: 20px;
+             border-radius: 20px;
+             padding: 10px;
+        }
+
+        #continue-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
         }
 
         #context-menu {
             display: none;
             color: black;
-            background-color: #FAFAFA;
+            background: #fafafa;
             border: 1px solid gray;
             box-shadow: 0px 5px 10px -5px black;
             position: absolute;
@@ -199,7 +222,7 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #context-menu .active:hover {
-            background-color: lightgray;
+            background: lightgray;
         }
 
         #context-menu .menu_separator hr {
diff --git a/web/packages/demo/www/index.css b/web/packages/demo/www/index.css
index 2543b6936..2d36d13da 100644
--- a/web/packages/demo/www/index.css
+++ b/web/packages/demo/www/index.css
@@ -6,24 +6,20 @@
 body {
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
-    margin: 0;
+    right: 0;
     padding: 0;
-    width: 100%;
-    height: 100%;
+    margin: 0;
     font-family: "Lato", sans-serif;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: black;
+    flex-flow: column;
+    background: black;
 }
 
 #main {
     position: relative;
-    width: 100%;
-    height: 100%;
-    align-self: center;
-    max-height: calc(100vh - 70px);
+    flex: 1;
 }
 
 #overlay {
@@ -32,14 +28,14 @@ body {
     bottom: 0;
     left: 0;
     right: 0;
-    box-sizing: border-box;
     z-index: 1;
     pointer-events: none;
     border: 8px dashed var(--ruffle-orange);
-    border-radius: 35px;
+    border-radius: 30px;
     opacity: 0;
-    display: none;
     transition: opacity 0.3s ease-in;
+    display: none;
+    margin: 10px 5px;
 }
 
 #overlay.drag {
@@ -61,26 +57,28 @@ body {
 }
 
 #player {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: auto;
+    margin: 10px;
 }
 
 #nav {
     width: 100%;
     background: var(--ruffle-blue);
-    border: 0;
-    border-color: darkgray;
-    border-bottom: 2px var(--ruffle-blue);
-    border-style: solid;
-    box-shadow: 0 5px 5px var(--ruffle-blue);
+    box-shadow: 0 3px 6px 5px var(--ruffle-blue);
     display: flex;
-    flex-direction: row;
     justify-content: space-around;
     align-items: center;
     align-self: flex-start;
     color: white;
     min-height: 45px;
-    margin-bottom: 15px;
+    padding-top: 5px;
+    margin-bottom: 5px;
 }
 
 #title {
@@ -93,18 +91,14 @@ body {
 }
 
 #title img {
-    display: inline-block;
     height: 32px;
     margin-top: 5px;
 }
 
-#file-picker {
-    margin-top: 7px;
-}
-
 #file-picker select,
-#file-picker input {
-    margin: 0 5px;
+#file-picker input,
+#author {
+    margin-left: 5px;
 }
 
 #local-file-container {
@@ -119,12 +113,10 @@ body {
 
 #author-container {
     display: none;
-    font-size: 13px;
-    text-align: left;
+    font-size: small;
 }
 
 #author {
-    padding-left: 5px;
     color: var(--ruffle-orange);
 }
 
@@ -137,10 +129,6 @@ body {
     #nav {
         min-height: 65px;
     }
-
-    #player {
-        height: calc(100vh - 90px) !important;
-    }
 }
 
 @media only screen and (max-width: 600px) {
@@ -159,7 +147,6 @@ body {
 
     #nav {
         min-height: 85px;
-        flex-direction: column;
-        padding-bottom: 2px;
+        flex-flow: column;
     }
 }
diff --git a/web/packages/demo/www/index.js b/web/packages/demo/www/index.js
index 4640f2471..9ce2fc11b 100644
--- a/web/packages/demo/www/index.js
+++ b/web/packages/demo/www/index.js
@@ -11,7 +11,7 @@ window.RufflePlayer = PublicAPI.negotiate(
 let ruffle;
 let player;
 
-const container = document.getElementById("main");
+const main = document.getElementById("main");
 const overlay = document.getElementById("overlay");
 const authorContainer = document.getElementById("author-container");
 const author = document.getElementById("author");
@@ -29,11 +29,72 @@ const config = {
     logLevel: "warn",
 };
 
-window.addEventListener("DOMContentLoaded", async () => {
-    ruffle = window.RufflePlayer.newest();
+function ensurePlayer() {
+    if (player) {
+        player.remove();
+    }
     player = ruffle.createPlayer();
     player.id = "player";
-    container.append(player);
+    main.append(player);
+
+    sampleFileInput.selectedIndex = 0;
+    authorContainer.style.display = "none";
+    author.textContent = "";
+    author.href = "";
+}
+
+async function loadFile(file) {
+    if (!file) {
+        return;
+    }
+    ensurePlayer();
+    const data = await new Response(file).arrayBuffer();
+    player.load({ data, ...config });
+}
+
+function sampleFileSelected() {
+    const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
+    if (swfData) {
+        authorContainer.style.display = "block";
+        author.textContent = swfData.author;
+        author.href = swfData.authorLink;
+        localFileInput.value = null;
+        player.load({ url: swfData.location, ...config });
+    } else {
+        ensurePlayer();
+    }
+}
+
+localFileInput.addEventListener("change", (event) => {
+    loadFile(event.target.files[0]);
+});
+
+sampleFileInput.addEventListener("change", sampleFileSelected);
+
+main.addEventListener("dragenter", () => {
+    overlay.classList.add("drag");
+});
+main.addEventListener("dragleave", () => {
+    overlay.classList.remove("drag");
+});
+main.addEventListener("dragover", (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+});
+main.addEventListener("drop", (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    overlay.classList.remove("drag");
+    loadFile(event.dataTransfer.files[0]);
+});
+
+window.addEventListener("load", () => {
+    overlay.style.display = "initial";
+});
+
+window.addEventListener("DOMContentLoaded", async () => {
+    ruffle = window.RufflePlayer.newest();
+    ensurePlayer();
 
     const response = await fetch("swfs.json");
     if (!response.ok) {
@@ -65,70 +126,6 @@ window.addEventListener("DOMContentLoaded", async () => {
             options.findIndex((swfData) => swfData.value.endsWith(initialFile)),
             0
         );
-    } else {
-        // Load a random file.
-        sampleFileInput.selectedIndex =
-            Math.floor(Math.random() * data.swfs.length) + 1;
+        sampleFileSelected();
     }
-    sampleFileSelected();
 });
-
-window.addEventListener("load", () => {
-    overlay.style.display = "block";
-});
-
-sampleFileInput.addEventListener("change", sampleFileSelected);
-localFileInput.addEventListener("change", (event) => {
-    loadFile(event.target.files[0]);
-});
-container.addEventListener("dragenter", () => {
-    overlay.classList.add("drag");
-});
-container.addEventListener("dragleave", () => {
-    overlay.classList.remove("drag");
-});
-container.addEventListener("dragover", (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-});
-container.addEventListener("drop", (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    overlay.classList.remove("drag");
-    loadFile(event.dataTransfer.files[0]);
-});
-
-function sampleFileSelected() {
-    const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
-    if (swfData) {
-        authorContainer.style.display = "block";
-        author.textContent = swfData.author;
-        author.href = swfData.authorLink;
-        localFileInput.value = null;
-        player.load({ url: swfData.location, ...config });
-    } else {
-        if (player) {
-            player.remove();
-        }
-        player = ruffle.createPlayer();
-        player.id = "player";
-        container.append(player);
-        authorContainer.style.display = "none";
-        author.textContent = "";
-        author.href = "";
-    }
-}
-
-async function loadFile(file) {
-    if (!file) {
-        return;
-    }
-
-    sampleFileInput.selectedIndex = 0;
-    authorContainer.style.display = "none";
-    author.textContent = "";
-    author.href = "";
-
-    const data = await new Response(file).arrayBuffer();
-    player.load({ data, ...config });
-}