diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 0000000..fb0d65a
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>
\ No newline at end of file
diff --git a/build.ts b/build.ts
index 7120a57..9215577 100644
--- a/build.ts
+++ b/build.ts
@@ -19,6 +19,7 @@ import { rollup } from 'rollup'
 import uglify from 'rollup-plugin-uglify'
 // @ts-ignore
 import rollupPluginTypescript from 'rollup-plugin-typescript'
+import * as sass from 'node-sass'
 
 async function confirm (question: string, positive: Function, negative: Function): Promise<void> {
 
@@ -169,7 +170,10 @@ async function buildJavaScript (sourceFolder: string, distFolder: string) {
 }
 
 async function buildStyles (sourceFolder: string, distFolder: string) {
-  fs.copySync(`${sourceFolder}/styles.css`, `${distFolder}/styles.css`)
+  const result = sass.renderSync({
+    file: `${sourceFolder}/styles.scss`,
+  })
+  fs.writeFileSync(`${distFolder}/styles.css`, result.css.toString('utf8'))
 }
 
 async function buildAssets (sourceFolder: string, distFolder: string) {
diff --git a/sizes.json b/sizes.json
index 291dcfe..f919970 100644
--- a/sizes.json
+++ b/sizes.json
@@ -15,13 +15,13 @@
     "brotli": 300
   },
   "styles.css": {
-    "raw": 1798,
-    "gzip": 708,
-    "brotli": 569
+    "raw": 1542,
+    "gzip": 651,
+    "brotli": 511
   },
   "total": {
-    "raw": 19705,
-    "gzip": 6810,
-    "brotli": 5504
+    "raw": 19449,
+    "gzip": 6753,
+    "brotli": 5446
   }
 }
\ No newline at end of file
diff --git a/src/_vars.scss b/src/_vars.scss
new file mode 100644
index 0000000..2541573
--- /dev/null
+++ b/src/_vars.scss
@@ -0,0 +1,8 @@
+// Colors
+$dark: #7c203a;
+$accent: #f85959;
+$light: #ff9f68;
+$highlight: #feff89;
+
+// Fonts
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index 25ee185..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Dark: 7c203a
- * Accent: f85959
- * Light: ff9f68
- * Highlighting: feff89
- */
-
-html {
-    font-size: 150%;
-    line-height: 1.5;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    color: rgba(0, 0, 0, .9);
-    background-color: rgba(0, 0, 0, .03);
-    padding-left: 3rem;
-    padding-right: 3rem;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 50rem;
-    padding-bottom: 33vh;
-}
-
-p, pre {
-    font: inherit;
-    margin-bottom: 1.5em;
-    margin-top: 1.5em;
-}
-
-b, strong {
-    color: #7c203a;
-}
-
-p code {
-    font-size: 1.2em;
-}
-
-a {
-    color: #f85959;
-}
-
-a:hover {
-    color: #7c203a;
-}
-
-a:focus {
-    color: #7c203a;
-    outline: 2px solid #f85959;
-}
-
-::selection {
-    background: #feff89;
-    color: #7c203a;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-}
-
-header h1 {
-    font-weight: 300;
-    font-size: 4em;
-}
-
-svg {
-    color: #f85959;
-}
-
-aside {
-    margin-bottom: 6rem;
-}
-
-aside p {
-    font-size: 1.2em;
-}
-
-article > h3 {
-    margin-bottom: 0;
-    margin-top: 4em;
-}
-
-article section {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 1rem;
-}
-
-article section > div > div {
-    position: sticky;
-    top: 1.5em;
-    margin-bottom: 1.5em;
-}
-
-article section > div:nth-child(1) {
-}
-
-article section > div:nth-child(2) {
-
-}
-
-body.js [data-trigger] {
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-    text-decoration-color: #7c203a;
-    cursor: help;
-}
-
-body.js [data-area] {
-    cursor: default;
-}
-
-body.js [data-trigger].active,
-body.js [data-area].active {
-    background-color: #feff89;
-    color: #7c203a;
-}
diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000..2676c78
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,120 @@
+@import 'vars';
+
+html {
+  font-size: 150%;
+  line-height: 1.5;
+}
+
+body {
+  font-family: $font-stack;
+  color: rgba(0, 0, 0, .86);
+  background-color: rgba(0, 0, 0, .02);
+  padding-left: 3rem;
+  padding-right: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 50rem;
+  padding-bottom: 33vh;
+}
+
+p, pre {
+  font: inherit;
+  margin-bottom: 1.5em;
+  margin-top: 1.5em;
+}
+
+b, strong {
+  color: #7c203a;
+}
+
+p {
+
+  code {
+    font-size: 1.2em;
+  }
+}
+
+a {
+  color: #f85959;
+
+  &:hover {
+    color: #7c203a;
+  }
+
+  &:focus {
+    color: #7c203a;
+    outline: 2px solid #f85959;
+  }
+}
+
+::selection {
+  background: #feff89;
+  color: #7c203a;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  h1 {
+    font-weight: 300;
+    font-size: 4em;
+  }
+}
+
+svg {
+  color: #f85959;
+}
+
+aside {
+  margin-bottom: 6rem;
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+article {
+
+  > h3 {
+    margin-bottom: 0;
+    margin-top: 4em;
+  }
+
+  section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
+  }
+
+  > div > div {
+    position: sticky;
+    top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+}
+
+[data-area] {
+  cursor: default;
+}
+
+// We want to show these styles only if we're aware
+// that the browser has successfully executed the script.
+body.js {
+
+  [data-trigger] {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: #7c203a;
+    cursor: help;
+  }
+
+  [data-trigger].active,
+  [data-area].active {
+    background-color: #feff89;
+    color: #7c203a;
+  }
+}