diff --git a/pages/public/style.css b/pages/assets/style.css
similarity index 55%
rename from pages/public/style.css
rename to pages/assets/style.css
index 7fb8d44..be2872b 100644
--- a/pages/public/style.css
+++ b/pages/assets/style.css
@@ -1,133 +1,7 @@
----
----
-
-@property --subtext-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --subtext-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-2 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-2 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --base {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --mantle {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --crust {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --rosewater {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --flamingo {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --pink {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --mauve {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --red {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --maroon {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --peach {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --yellow {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --green {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --teal {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --sky {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --sapphire {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --blue {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --lavender {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-:where(:not(html, head *, svg *)) {
+a,
+button,
+svg,
+input {
   all: unset;
 }
 
@@ -154,9 +28,16 @@ th-theme-button {
 }
 
 input[type="range"] {
-  &::-moz-range-thumb,
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.375rem;
+  border-radius: calc(0.375rem / 2);
+  background-color: var(--surface-0);
+  border: 1px solid var(--surface-1);
+
   &::-webkit-slider-thumb {
-    all: unset;
+    -webkit-appearance: none;
     width: 1.25rem;
     height: 1.25rem;
     border-radius: 50%;
@@ -164,26 +45,31 @@ input[type="range"] {
     box-shadow: 0rem 0.125rem 0.25rem (#d20f3950);
   }
 
-  &::-webkit-slider-runnable-track,
-  &::-moz-range-track {
-    box-sizing: border-box;
-    width: 100%;
-    height: 0.375rem;
-    border-radius: calc(0.375rem / 2);
-    background-color: var(--surface-0);
-    border: 1px solid var(--surface-1);
+  /* For some reason, combining these identical rules doesn't work for Chrome */
+  &::-moz-range-thumb {
+    all: unset;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: linear-gradient(var(--rosewater), var(--flamingo));
+    box-shadow: 0rem 0.125rem 0.25rem (#d20f3950);
   }
 }
 
 input[type="color"] {
+  all: unset;
   width: 100%;
+  height: 100%;
   border-radius: 0.25rem;
 
   &::-webkit-color-swatch-wrapper {
-    all: unset;
+    padding: 0rem;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
   }
 
-  &::-webkit-color-swatch,
   &::-moz-color-swatch {
     border: none;
   }
@@ -201,64 +87,6 @@ input[type="color"] {
   border-width: 0;
 }
 
-.theme-latte {
-  --text: #4c4f69;
-  --subtext-1: #5c5f77;
-  --subtext-0: #6c6f85;
-  --overlay-2: #7c7f93;
-  --overlay-1: #8c8fa1;
-  --overlay-0: #9ca0b0;
-  --surface-2: #acb0be;
-  --surface-1: #bcc0cc;
-  --surface-0: #ccd0da;
-  --base: #eff1f5;
-  --mantle: #e6e9ef;
-  --crust: #dce0e8;
-  --rosewater: #dc8a78;
-  --flamingo: #dd7878;
-  --pink: #ea76cb;
-  --mauve: #8839ef;
-  --red: #d20f39;
-  --maroon: #e64553;
-  --peach: #fe640b;
-  --yellow: #df8e1d;
-  --green: #40a02b;
-  --teal: #179299;
-  --sky: #04a5e5;
-  --sapphire: #209fb5;
-  --blue: #1e66f5;
-  --lavender: #7287fd;
-}
-
-.theme-frappe {
-  --text: #c6d0f5;
-  --subtext-1: #b5bfe2;
-  --subtext-0: #a5adce;
-  --overlay-2: #949cbb;
-  --overlay-1: #838ba7;
-  --overlay-0: #737994;
-  --surface-2: #626880;
-  --surface-1: #51576d;
-  --surface-0: #414559;
-  --base: #303446;
-  --mantle: #292c3c;
-  --crust: #232634;
-  --rosewater: #f2d5cf;
-  --flamingo: #eebebe;
-  --pink: #f4b8e4;
-  --mauve: #ca9ee6;
-  --red: #e78284;
-  --maroon: #ea999c;
-  --peach: #ef9f76;
-  --yellow: #e5c890;
-  --green: #a6d189;
-  --teal: #81c8be;
-  --sky: #99d1db;
-  --sapphire: #85c1dc;
-  --blue: #8caaee;
-  --lavender: #babbf1;
-}
-
 body {
   display: grid;
   grid-template-rows: max-content 1fr;
diff --git a/pages/assets/theme.css b/pages/assets/theme.css
new file mode 100644
index 0000000..c3cba1b
--- /dev/null
+++ b/pages/assets/theme.css
@@ -0,0 +1,183 @@
+.theme-latte {
+  --text: #4c4f69;
+  --subtext-1: #5c5f77;
+  --subtext-0: #6c6f85;
+  --overlay-2: #7c7f93;
+  --overlay-1: #8c8fa1;
+  --overlay-0: #9ca0b0;
+  --surface-2: #acb0be;
+  --surface-1: #bcc0cc;
+  --surface-0: #ccd0da;
+  --base: #eff1f5;
+  --mantle: #e6e9ef;
+  --crust: #dce0e8;
+  --rosewater: #dc8a78;
+  --flamingo: #dd7878;
+  --pink: #ea76cb;
+  --mauve: #8839ef;
+  --red: #d20f39;
+  --maroon: #e64553;
+  --peach: #fe640b;
+  --yellow: #df8e1d;
+  --green: #40a02b;
+  --teal: #179299;
+  --sky: #04a5e5;
+  --sapphire: #209fb5;
+  --blue: #1e66f5;
+  --lavender: #7287fd;
+}
+
+.theme-frappe {
+  --text: #c6d0f5;
+  --subtext-1: #b5bfe2;
+  --subtext-0: #a5adce;
+  --overlay-2: #949cbb;
+  --overlay-1: #838ba7;
+  --overlay-0: #737994;
+  --surface-2: #626880;
+  --surface-1: #51576d;
+  --surface-0: #414559;
+  --base: #303446;
+  --mantle: #292c3c;
+  --crust: #232634;
+  --rosewater: #f2d5cf;
+  --flamingo: #eebebe;
+  --pink: #f4b8e4;
+  --mauve: #ca9ee6;
+  --red: #e78284;
+  --maroon: #ea999c;
+  --peach: #ef9f76;
+  --yellow: #e5c890;
+  --green: #a6d189;
+  --teal: #81c8be;
+  --sky: #99d1db;
+  --sapphire: #85c1dc;
+  --blue: #8caaee;
+  --lavender: #babbf1;
+}
+
+@property --subtext-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --subtext-0 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --overlay-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --overlay-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --overlay-0 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --surface-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --surface-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --surface-0 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --base {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --mantle {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --crust {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --rosewater {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --flamingo {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --pink {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --mauve {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --red {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --maroon {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --peach {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --yellow {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --green {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --teal {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --sky {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --sapphire {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --blue {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --lavender {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
diff --git a/pages/index.html b/pages/index.html
index 0149152..68dd330 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -7,7 +7,8 @@
 
     <script type="module" src="./src/main.js" async></script>
 
-    <link href="/style.css" rel="stylesheet" />
+    <link href="./assets/style.css" rel="stylesheet" />
+    <link href="./assets/theme.css" rel="stylesheet" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link