diff --git a/_widget/old_src/App.vue b/_widget/old_src/App.vue
deleted file mode 100644
index 81c28ec8c..000000000
--- a/_widget/old_src/App.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
-<template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
diff --git a/_widget/old_src/assets/vue.svg b/_widget/old_src/assets/vue.svg
deleted file mode 100644
index 770e9d333..000000000
--- a/_widget/old_src/assets/vue.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/_widget/old_src/components/HelloWorld.vue b/_widget/old_src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc62..000000000
--- a/_widget/old_src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/_widget/old_src/main.js b/_widget/old_src/main.js
deleted file mode 100644
index 2425c0f74..000000000
--- a/_widget/old_src/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')
diff --git a/_widget/old_src/style.css b/_widget/old_src/style.css
deleted file mode 100644
index bb131d6b8..000000000
--- a/_widget/old_src/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue
index ef2c85cd2..0f04b153e 100644
--- a/_widget/src/components/app/component.vue
+++ b/_widget/src/components/app/component.vue
@@ -19,8 +19,8 @@ import Articles from '../articles/component.vue';
 import Prompt from '../prompt/component.vue';
 import Welcome from '../welcome/component.vue';
 
-import "./reset.scss"
 import "./variables.scss"
+import "./reset.scss"
 import "./style.scss"
 
 const ANIMATION_TIMEOUT = 500;
diff --git a/_widget/src/components/app/style.scss b/_widget/src/components/app/style.scss
index 9da4c7bdf..cecea5ae8 100644
--- a/_widget/src/components/app/style.scss
+++ b/_widget/src/components/app/style.scss
@@ -1,42 +1,31 @@
-@import './variables.scss';
-@import './reset.scss';
-
 #dnsimple-support {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 480px;
-  font-size: $rem;
+  font-size: var(--dnsimple-support-widget-rem);
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.6;
   color: #222;
   z-index: 999;
 
-  @media ($desktop-only) {
+  @media (var(--dnsimple-support-widget-desktop-only)) {
     display: none;
   }
 }
 
-
 #dnsimple-support {
-    @import '../article/style.scss';
-    @import '../articles/style.scss';
-    @import '../footer/style.scss';
-    @import '../header/style.scss';
-    @import '../prompt/style.scss';
-    @import '../welcome/style.scss';
-
     .relative {
       position: relative;
-      box-shadow: $box-shadow;
+      box-shadow: var(--dnsimple-support-widget-box-shadow);
     }
 
     .route {
       height: 475px;
-      border-left: 1px solid $line-color;
+      border-left: 1px solid var(--dnsimple-support-widget-line-color);
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      padding: $padding;
-      background: $white;
+      padding: var(--dnsimple-support-widget-padding);
+      background: var(--dnsimple-support-widget-white);
     }
 }
diff --git a/_widget/src/components/app/variables.scss b/_widget/src/components/app/variables.scss
index 578129284..c13e86bf2 100644
--- a/_widget/src/components/app/variables.scss
+++ b/_widget/src/components/app/variables.scss
@@ -1,15 +1,18 @@
-$blue: #1A5EC6;
-$dark-gray: #333;
-$medium-gray: #7e7e7e;
-$light-gray: #eaeaea;
-$yellow: #f8c939;
-$orange: #ff7f2a;
-$green: #43a047;
-$white: #fff;
-$rem: 16px;
-$padding: 15px;
-$line-color: #ddd;
-$desktop-only: "max-width: 640px";
-$font-monospace: Menlo,Monaco,Consolas,"Courier New",monospace;
-$font-size-monospace: 13px;
-$box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+#dnsimple-support {
+  --dnsimple-support-widget-blue: #1A5EC6;
+  --dnsimple-support-widget-dark-gray: #333;
+  --dnsimple-support-widget-medium-gray: #7e7e7e;
+  --dnsimple-support-widget-light-gray: #eaeaea;
+  --dnsimple-support-widget-yellow: #f8c939;
+  --dnsimple-support-widget-orange: #ff7f2a;
+  --dnsimple-support-widget-green: #43a047;
+  --dnsimple-support-widget-white: #fff;
+  --dnsimple-support-widget-rem: 16px;
+  --dnsimple-support-widget-padding: 15px;
+  --dnsimple-support-widget-line-color: #ddd;
+  --dnsimple-support-widget-desktop-only: "max-width: 640px";
+  --dnsimple-support-widget-font-monospace: Menlo,Monaco,Consolas,"Courier New",monospace;
+  --dnsimple-support-widget-font-size-monospace: 13px;
+  --dnsimple-support-widget-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  --dnsimple-support-widget-prompt-padding: 7px;
+}
diff --git a/_widget/src/components/article/component.vue b/_widget/src/components/article/component.vue
index 435193e70..0239a741c 100644
--- a/_widget/src/components/article/component.vue
+++ b/_widget/src/components/article/component.vue
@@ -16,6 +16,11 @@
 import { backIcon } from '../../assets/svgs';
 import Footer from '../footer/component.vue';
 
+import "./style.scss"
+import "./resolving.scss"
+import "./syntax.scss"
+import "./tables.scss"
+
 const NO_TRAILING_SLASH = /\/?$/;
 
 export default {
diff --git a/_widget/src/components/article/resolving.scss b/_widget/src/components/article/resolving.scss
index 373b4e116..a2c1a09b6 100644
--- a/_widget/src/components/article/resolving.scss
+++ b/_widget/src/components/article/resolving.scss
@@ -1,17 +1,21 @@
 // Derived from support.dnsimple.com/content/assets/css/_resolving
 
-.resolving {
-  padding: $padding;
-  margin-bottom: $padding;
-}
+#dnsimple-support {
+  .article {
+    .resolving {
+      padding: var(--dnsimple-support-widget-padding);
+      margin-bottom: var(--dnsimple-support-widget-padding);
+    }
 
-.resolving-light {
-  background: #eee;
-}
+    .resolving-light {
+      background: #eee;
+    }
 
-.resolving-dark {
-  background: #000;
-  a {
-    color: #fff;
+    .resolving-dark {
+      background: #000;
+      a {
+        color: #fff;
+      }
+    }
   }
 }
diff --git a/_widget/src/components/article/style.scss b/_widget/src/components/article/style.scss
index caa2bfe76..cc19de68d 100644
--- a/_widget/src/components/article/style.scss
+++ b/_widget/src/components/article/style.scss
@@ -1,137 +1,135 @@
-.article {
-  @import "./syntax.css";
-  @import "./resolving.css";
-  @import "./tables.css";
+#dnsimple-support {
+  .article {
+    h1, h2, h3, h4, h5, h6, p, ul, ol, .table-wrapper, pre, warning, note, tip, info, .marker {
+      margin-bottom: var(--dnsimple-support-widget-padding);
+    }
 
-  h1, h2, h3, h4, h5, h6, p, ul, ol, .table-wrapper, pre, warning, note, tip, info, .marker {
-    margin-bottom: $padding;
-  }
+    h1 {
+      font-size: 160%;
+      line-height: 1.3;
+      color: var(--dnsimple-support-widget-blue);
+      font-weight: bold;
+      margin-bottom: var(--dnsimple-support-widget-padding);
+    }
 
-  h1 {
-    font-size: 160%;
-    line-height: 1.3;
-    color: $blue;
-    font-weight: bold;
-    margin-bottom: $padding;
-  }
+    h2 {
+      font-size: 140%;
+      color: #222;
+      font-weight: bold;
+    }
 
-  h2 {
-    font-size: 140%;
-    color: #222;
-    font-weight: bold;
-  }
+    h3 {
+      font-size: 130%;
+      color: var(--dnsimple-support-widget-blue);
+      font-weight: bold;
+
+      &#toc {
+        background: var(--dnsimple-support-widget-medium-gray);
+        color: #fff;
+        text-transform: uppercase;
+        font-weight: normal;
+        font-size: 80%;
+        margin-bottom: 0;
+        padding: 5px 5px 5px 26px;
+      }
+    }
 
-  h3 {
-    font-size: 130%;
-    color: $blue;
-    font-weight: bold;
+    h4 {
+      font-size: 120%;
+      color: #555;
+      font-style: oblique;
+    }
 
-    &#toc {
-      background: $medium-gray;
-      color: #fff;
-      text-transform: uppercase;
-      font-weight: normal;
-      font-size: 80%;
-      margin-bottom: 0;
-      padding: 5px 5px 5px 26px;
+    h5 {
+      font-size: 110%;
+      color: #888;
+      font-style: oblique;
     }
-  }
 
-  h4 {
-    font-size: 120%;
-    color: #555;
-    font-style: oblique;
-  }
+    a {
+      color: var(--dnsimple-support-widget-blue);
+      transition: all 0.2s ease;
 
-  h5 {
-    font-size: 110%;
-    color: #888;
-    font-style: oblique;
-  }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
 
-  a {
-    color: $blue;
-    transition: all 0.2s ease;
+    hr {
+      margin: 20px 0;
+      border: 0;
+      border-top: 1px solid var(--dnsimple-support-widget-line-color);
+    }
 
-    &:hover {
-      text-decoration: underline;
+    ul, ol {
+      margin-left: 25px;
     }
-  }
 
-  hr {
-    margin: 20px 0;
-    border: 0;
-    border-top: 1px solid $line-color;
-  }
+    ul {
+      list-style: disc;
+    }
 
-  ul, ol {
-    margin-left: 25px;
-  }
+    ol {
+      list-style: decimal;
+    }
 
-  ul {
-    list-style: disc;
-  }
+    pre {
+      display: block;
+      overflow-x: scroll;
+      padding: 10px;
+      font-family: var(--dnsimple-support-widget-font-monospace);
+      font-size: var(--dnsimple-support-widget-font-size-monospace);
+      background-color: #f5f5f5;
+      border: 1px solid #ccc;
+      word-break: break-all;
+      word-wrap: break-word;
+      border-radius: 4px;
+    }
 
-  ol {
-    list-style: decimal;
-  }
+    warning, note, tip, info, .marker, #markdown-toc {
+      display: block;
+      padding: var(--dnsimple-support-widget-padding);
+      overflow: auto;
+      background: var(--dnsimple-support-widget-light-gray);
+      -webkit-overflow-scrolling: touch;
+      margin-left: 6px;
+
+      *:last-child {
+        margin-bottom: 0;
+      }
+    }
 
-  pre {
-    display: block;
-    overflow-x: scroll;
-    padding: 10px;
-    font-family: $font-monospace;
-    font-size: $font-size-monospace;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    word-break: break-all;
-    word-wrap: break-word;
-    border-radius: 4px;
-  }
+    warning, .marker-warning {
+      box-shadow: -6px 0 0 0 var(--dnsimple-support-widget-orange);
+    }
 
-  warning, note, tip, info, .marker, #markdown-toc {
-    display: block;
-    padding: $padding;
-    overflow: auto;
-    background: $light-gray;
-    -webkit-overflow-scrolling: touch;
-    margin-left: 6px;
+    tip, .marker-tip {
+      box-shadow: -6px 0 0 0 var(--dnsimple-support-widget-green);
+    }
 
-    *:last-child {
-      margin-bottom: 0;
+    note, .marker-note {
+      box-shadow: -6px 0 0 0 var(--dnsimple-support-widget-yellow);
     }
-  }
 
-  warning, .marker-warning {
-    box-shadow: -6px 0 0 0 $orange;
-  }
+    info, .marker-info, #markdown-toc {
+      box-shadow: -6px 0 0 0 var(--dnsimple-support-widget-medium-gray);
+    }
 
-  tip, .marker-tip {
-    box-shadow: -6px 0 0 0 $green;
-  }
+    #markdown-toc {
+      padding-left: 40px;
 
-  note, .marker-note {
-    box-shadow: -6px 0 0 0 $yellow;
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
   }
 
-  info, .marker-info, #markdown-toc {
-    box-shadow: -6px 0 0 0 $medium-gray;
+  b, strong {
+    font-weight: bold;
   }
 
-  #markdown-toc {
-    padding-left: 40px;
-
-    a {
-      color: inherit;
-      text-decoration: underline;
-    }
+  i, em {
+    font-style: oblique;
   }
 }
-
-b, strong {
-  font-weight: bold;
-}
-
-i, em {
-  font-style: oblique;
-}
diff --git a/_widget/src/components/article/syntax.scss b/_widget/src/components/article/syntax.scss
index 583cd831c..a9403a5fe 100644
--- a/_widget/src/components/article/syntax.scss
+++ b/_widget/src/components/article/syntax.scss
@@ -1,62 +1,66 @@
 // Derived from support.dnsimple.com/content/assets/css/_syntax
 
 // code { background: #ffffff; }
-code .c { color: #999988; font-style: italic } /* Comment */
-code .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-code .k { font-weight: bold } /* Keyword */
-code .o { font-weight: bold } /* Operator */
-code .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-code .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-code .c1 { color: #999988; font-style: italic } /* Comment.Single */
-code .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-code .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-code .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-code .ge { font-style: italic } /* Generic.Emph */
-code .gr { color: #aa0000 } /* Generic.Error */
-code .gh { color: #999999 } /* Generic.Heading */
-code .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-code .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-code .go { color: #888888 } /* Generic.Output */
-code .gp { color: #555555 } /* Generic.Prompt */
-code .gs { font-weight: bold } /* Generic.Strong */
-code .gu { color: #aaaaaa } /* Generic.Subheading */
-code .gt { color: #aa0000 } /* Generic.Traceback */
-code .kc { font-weight: bold } /* Keyword.Constant */
-code .kd { font-weight: bold } /* Keyword.Declaration */
-code .kp { font-weight: bold } /* Keyword.Pseudo */
-code .kr { font-weight: bold } /* Keyword.Reserved */
-code .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-code .m { color: #009999 } /* Literal.Number */
-code .s { color: #d14 } /* Literal.String */
-code .na { color: #008080 } /* Name.Attribute */
-code .nb { color: #0086B3 } /* Name.Builtin */
-code .nc { color: #445588; font-weight: bold } /* Name.Class */
-code .no { color: #008080 } /* Name.Constant */
-code .ni { color: #800080 } /* Name.Entity */
-code .ne { color: #990000; font-weight: bold } /* Name.Exception */
-code .nf { color: #990000; font-weight: bold } /* Name.Function */
-code .nn { color: #555555 } /* Name.Namespace */
-code .nt { color: #000080 } /* Name.Tag */
-code .nv { color: #008080 } /* Name.Variable */
-code .ow { font-weight: bold } /* Operator.Word */
-code .w { color: #bbbbbb } /* Text.Whitespace */
-code .mf { color: #009999 } /* Literal.Number.Float */
-code .mh { color: #009999 } /* Literal.Number.Hex */
-code .mi { color: #009999 } /* Literal.Number.Integer */
-code .mo { color: #009999 } /* Literal.Number.Oct */
-code .sb { color: #d14 } /* Literal.String.Backtick */
-code .sc { color: #d14 } /* Literal.String.Char */
-code .sd { color: #d14 } /* Literal.String.Doc */
-code .s2 { color: #d14 } /* Literal.String.Double */
-code .se { color: #d14 } /* Literal.String.Escape */
-code .sh { color: #d14 } /* Literal.String.Heredoc */
-code .si { color: #d14 } /* Literal.String.Interpol */
-code .sx { color: #d14 } /* Literal.String.Other */
-code .sr { color: #009926 } /* Literal.String.Regex */
-code .s1 { color: #d14 } /* Literal.String.Single */
-code .ss { color: #990073 } /* Literal.String.Symbol */
-code .bp { color: #999999 } /* Name.Builtin.Pseudo */
-code .vc { color: #008080 } /* Name.Variable.Class */
-code .vg { color: #008080 } /* Name.Variable.Global */
-code .vi { color: #008080 } /* Name.Variable.Instance */
-code .il { color: #009999 } /* Literal.Number.Integer.Long */
+#dnsimple-support {
+  .article {
+    code .c { color: #999988; font-style: italic } /* Comment */
+    code .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+    code .k { font-weight: bold } /* Keyword */
+    code .o { font-weight: bold } /* Operator */
+    code .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+    code .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+    code .c1 { color: #999988; font-style: italic } /* Comment.Single */
+    code .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+    code .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+    code .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+    code .ge { font-style: italic } /* Generic.Emph */
+    code .gr { color: #aa0000 } /* Generic.Error */
+    code .gh { color: #999999 } /* Generic.Heading */
+    code .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+    code .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+    code .go { color: #888888 } /* Generic.Output */
+    code .gp { color: #555555 } /* Generic.Prompt */
+    code .gs { font-weight: bold } /* Generic.Strong */
+    code .gu { color: #aaaaaa } /* Generic.Subheading */
+    code .gt { color: #aa0000 } /* Generic.Traceback */
+    code .kc { font-weight: bold } /* Keyword.Constant */
+    code .kd { font-weight: bold } /* Keyword.Declaration */
+    code .kp { font-weight: bold } /* Keyword.Pseudo */
+    code .kr { font-weight: bold } /* Keyword.Reserved */
+    code .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+    code .m { color: #009999 } /* Literal.Number */
+    code .s { color: #d14 } /* Literal.String */
+    code .na { color: #008080 } /* Name.Attribute */
+    code .nb { color: #0086B3 } /* Name.Builtin */
+    code .nc { color: #445588; font-weight: bold } /* Name.Class */
+    code .no { color: #008080 } /* Name.Constant */
+    code .ni { color: #800080 } /* Name.Entity */
+    code .ne { color: #990000; font-weight: bold } /* Name.Exception */
+    code .nf { color: #990000; font-weight: bold } /* Name.Function */
+    code .nn { color: #555555 } /* Name.Namespace */
+    code .nt { color: #000080 } /* Name.Tag */
+    code .nv { color: #008080 } /* Name.Variable */
+    code .ow { font-weight: bold } /* Operator.Word */
+    code .w { color: #bbbbbb } /* Text.Whitespace */
+    code .mf { color: #009999 } /* Literal.Number.Float */
+    code .mh { color: #009999 } /* Literal.Number.Hex */
+    code .mi { color: #009999 } /* Literal.Number.Integer */
+    code .mo { color: #009999 } /* Literal.Number.Oct */
+    code .sb { color: #d14 } /* Literal.String.Backtick */
+    code .sc { color: #d14 } /* Literal.String.Char */
+    code .sd { color: #d14 } /* Literal.String.Doc */
+    code .s2 { color: #d14 } /* Literal.String.Double */
+    code .se { color: #d14 } /* Literal.String.Escape */
+    code .sh { color: #d14 } /* Literal.String.Heredoc */
+    code .si { color: #d14 } /* Literal.String.Interpol */
+    code .sx { color: #d14 } /* Literal.String.Other */
+    code .sr { color: #009926 } /* Literal.String.Regex */
+    code .s1 { color: #d14 } /* Literal.String.Single */
+    code .ss { color: #990073 } /* Literal.String.Symbol */
+    code .bp { color: #999999 } /* Name.Builtin.Pseudo */
+    code .vc { color: #008080 } /* Name.Variable.Class */
+    code .vg { color: #008080 } /* Name.Variable.Global */
+    code .vi { color: #008080 } /* Name.Variable.Instance */
+    code .il { color: #009999 } /* Literal.Number.Integer.Long */
+  }
+}
diff --git a/_widget/src/components/article/tables.scss b/_widget/src/components/article/tables.scss
index dad9e34f4..04ceeac23 100644
--- a/_widget/src/components/article/tables.scss
+++ b/_widget/src/components/article/tables.scss
@@ -1,28 +1,32 @@
 // Derived from support.dnsimple.com/content/assets/css/_tables
 
-.table-wrapper {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
-    border-radius: 3px;
+#dnsimple-support {
+    .article {
+        .table-wrapper {
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
+            border-radius: 3px;
 
-    table {
-        background: $white;
-        width: 100%;
-        border-collapse: collapse;
+            table {
+                background: var(--dnsimple-support-widget-white);
+                width: 100%;
+                border-collapse: collapse;
 
-        th, td {
-            padding: 0.6rem 1.2rem;
-        }
+                th, td {
+                    padding: 0.6rem 1.2rem;
+                }
 
-        th {
-            border-bottom: 2px solid $yellow;
-            font-weight: bold;
-            background: $white;
-        }
+                th {
+                    border-bottom: 2px solid var(--dnsimple-support-widget-yellow);
+                    font-weight: bold;
+                    background: var(--dnsimple-support-widget-white);
+                }
 
-        tr:nth-child(2n + 1) {
-            background-color: #f1f1f1;
+                tr:nth-child(2n + 1) {
+                    background-color: #f1f1f1;
+                }
+            }
         }
     }
 }
diff --git a/_widget/src/components/articles/component.vue b/_widget/src/components/articles/component.vue
index 8bae931c0..d0789da67 100644
--- a/_widget/src/components/articles/component.vue
+++ b/_widget/src/components/articles/component.vue
@@ -33,6 +33,8 @@
 import Footer from '../footer/component.vue';
 import { spinnerIcon } from '../../assets/svgs';
 
+import "./style.scss"
+
 export default {
   props: {
     app: Object
diff --git a/_widget/src/components/articles/style.scss b/_widget/src/components/articles/style.scss
index c642e6c66..9d421517b 100644
--- a/_widget/src/components/articles/style.scss
+++ b/_widget/src/components/articles/style.scss
@@ -1,31 +1,33 @@
-.articles {
-  margin-top: -$padding;
+#dnsimple-support {
+  .articles {
+    margin-top: -var(--dnsimple-support-widget-padding);
 
-  h3 {
-    color: $blue;
-    font-weight: bold;
-  }
+    h3 {
+      color: var(--dnsimple-support-widget-blue);
+      font-weight: bold;
+    }
 
-  mark {
-    background: #fff3b6;
-    padding: 2px 0;
-  }
+    mark {
+      background: #fff3b6;
+      padding: 2px 0;
+    }
 
-  li {
-    padding: $padding 0;
-    border-bottom: 1px solid $line-color;
+    li {
+      padding: var(--dnsimple-support-widget-padding) 0;
+      border-bottom: 1px solid var(--dnsimple-support-widget-line-color);
 
-    &:last-child {
-      border-bottom: 0;
+      &:last-child {
+        border-bottom: 0;
+      }
     }
   }
-}
 
-.loading {
-  text-align: center;
-  padding: 25vh 0;
+  .loading {
+    text-align: center;
+    padding: 25vh 0;
 
-  img {
-    width: 8vh;
+    img {
+      width: 8vh;
+    }
   }
 }
diff --git a/_widget/src/components/footer/component.vue b/_widget/src/components/footer/component.vue
index be6712417..1e9acfb0d 100644
--- a/_widget/src/components/footer/component.vue
+++ b/_widget/src/components/footer/component.vue
@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import "./style.scss"
+
 export default {
   props: ['app']
 };
diff --git a/_widget/src/components/footer/style.scss b/_widget/src/components/footer/style.scss
index 51fa21517..5991ef7da 100644
--- a/_widget/src/components/footer/style.scss
+++ b/_widget/src/components/footer/style.scss
@@ -1,18 +1,20 @@
-.footer {
-  margin-top: $padding;
-  padding: $padding * 2 $padding;
-  border: 1px solid $line-color;
-  border-radius: 4px;
-
-  .button {
-    float: right;
-    color: #333;
-    display: inline-block;
-    background: #fff;
+#dnsimple-support {
+  .footer {
+    margin-top: var(--dnsimple-support-widget-padding);
+    padding: calc(var(--dnsimple-support-widget-padding) * 2) var(--dnsimple-support-widget-padding);
+    border: 1px solid var(--dnsimple-support-widget-line-color);
     border-radius: 4px;
-    padding: 5px 10px;
-    margin-top: -6px;
-    margin-bottom: -10px;
-    border: 1px solid $line-color;
+
+    .button {
+      float: right;
+      color: #333;
+      display: inline-block;
+      background: #fff;
+      border-radius: 4px;
+      padding: 5px 10px;
+      margin-top: -6px;
+      margin-bottom: -10px;
+      border: 1px solid var(--dnsimple-support-widget-line-color);
+    }
   }
 }
diff --git a/_widget/src/components/header/component.vue b/_widget/src/components/header/component.vue
index 2daa591c8..43235121c 100644
--- a/_widget/src/components/header/component.vue
+++ b/_widget/src/components/header/component.vue
@@ -17,6 +17,8 @@
 <script>
 import { minimizeIcon } from '../../assets/svgs';
 
+import "./style.scss"
+
 export default {
   props: ['app'],
   data () {
diff --git a/_widget/src/components/header/style.scss b/_widget/src/components/header/style.scss
index 2d0f28f5a..7ba89a4d0 100644
--- a/_widget/src/components/header/style.scss
+++ b/_widget/src/components/header/style.scss
@@ -1,69 +1,67 @@
-@use "sass:math";
+#dnsimple-support {
+  .header {
+    background: var(--dnsimple-support-widget-blue);
+    text-align: center;
+    padding: var(--dnsimple-support-widget-padding);
+    border-top-left-radius: 4px;
 
-@import "../app/variables.scss";
-
-.header {
-  background: $blue;
-  text-align: center;
-  padding: $padding;
-  border-top-left-radius: 4px;
-
-  h1 {
-    color: $white;
-    margin-bottom: $padding;
-  }
+    h1 {
+      color: var(--dnsimple-support-widget-white);
+      margin-bottom: var(--dnsimple-support-widget-padding);
+    }
 
-  .minimize {
-    color: $white;
-    position: absolute;
-    top: 0;
-    right: 0;
-    line-height: 1;
-    padding: $padding * 1.1 math.div($padding, 1.25);
+    .minimize {
+      color: var(--dnsimple-support-widget-white);
+      position: absolute;
+      top: 0;
+      right: 0;
+      line-height: 1;
+      padding: calc(var(--dnsimple-support-widget-padding) * 1.1) calc(var(--dnsimple-support-widget-padding) / 1.25);
 
-    svg {
-      width: $rem * 1.25;
-      height: $rem * 1.25;
-      color: $white;
-      opacity: 0.5;
-    }
+      svg {
+        width: calc(var(--dnsimple-support-widget-rem) * 1.25);
+        height: calc(var(--dnsimple-support-widget-rem) * 1.25);
+        color: var(--dnsimple-support-widget-white);
+        opacity: 0.5;
+      }
 
-    &:hover {
-      img {
-        opacity: 1.0;
+      &:hover {
+        img {
+          opacity: 1.0;
+        }
       }
     }
-  }
 
-  input {
-      outline: none;
-      padding: 10px;
-      width: 100%;
-      border: 0;
-      border-bottom: 1px solid #eee;
-      background: $white;
-      border-radius: 4px;
+    input {
+        outline: none;
+        padding: 10px;
+        width: 100%;
+        border: 0;
+        border-bottom: 1px solid #eee;
+        background: var(--dnsimple-support-widget-white);
+        border-radius: 4px;
+    }
   }
-}
 
-.route {
-  & > .back {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: math.div($padding, 1.25) math.div($padding, 2);
-    line-height: 1;
+  .route {
+    & > .back {
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: calc(var(--dnsimple-support-widget-padding) / 1.25) calc(var(--dnsimple-support-widget-padding) / 2);
+      line-height: 1;
 
-    svg {
-      width: $rem * 1.75;
-      height: $rem * 1.75;
-      color: $white;
-      opacity: 0.5;
-    }
+      svg {
+        width: calc(var(--dnsimple-support-widget-rem) * 1.75);
+        height: calc(var(--dnsimple-support-widget-rem) * 1.75);
+        color: var(--dnsimple-support-widget-white);
+        opacity: 0.5;
+      }
 
-    &:hover {
-      img {
-        opacity: 1.0;
+      &:hover {
+        img {
+          opacity: 1.0;
+        }
       }
     }
   }
diff --git a/_widget/src/components/prompt/animate.scss b/_widget/src/components/prompt/animate.scss
index 3190fc946..6434444ed 100644
--- a/_widget/src/components/prompt/animate.scss
+++ b/_widget/src/components/prompt/animate.scss
@@ -1,55 +1,57 @@
-@-webkit-keyframes fadeInUp {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
+#dnsimple-support {
+  @-webkit-keyframes fadeInUp {
+    from {
+      opacity: 0;
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
 
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
+    to {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
   }
-}
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
 
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
+    to {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
   }
-}
-
-.fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
-}
 
-.animated.faster {
-  -webkit-animation-duration: 500ms;
-  animation-duration: 500ms;
-}
+  .fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
+  }
 
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
+  .animated.faster {
+    -webkit-animation-duration: 500ms;
+    animation-duration: 500ms;
+  }
 
-@media (print), (prefers-reduced-motion: reduce) {
   .animated {
-    -webkit-animation-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    -webkit-transition-duration: 1ms !important;
-    transition-duration: 1ms !important;
-    -webkit-animation-iteration-count: 1 !important;
-    animation-iteration-count: 1 !important;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  @media (print), (prefers-reduced-motion: reduce) {
+    .animated {
+      -webkit-animation-duration: 1ms !important;
+      animation-duration: 1ms !important;
+      -webkit-transition-duration: 1ms !important;
+      transition-duration: 1ms !important;
+      -webkit-animation-iteration-count: 1 !important;
+      animation-iteration-count: 1 !important;
+    }
   }
 }
diff --git a/_widget/src/components/prompt/component.vue b/_widget/src/components/prompt/component.vue
index 61862e4e0..932efac4b 100644
--- a/_widget/src/components/prompt/component.vue
+++ b/_widget/src/components/prompt/component.vue
@@ -10,6 +10,9 @@
 <script>
 import { trustyIcon } from '../../assets/svgs';
 
+import "./style.scss"
+import "./animate.scss"
+
 export default {
   props: ['app'],
   data () {
diff --git a/_widget/src/components/prompt/style.scss b/_widget/src/components/prompt/style.scss
index 8a1a2464a..b6f4d9a18 100644
--- a/_widget/src/components/prompt/style.scss
+++ b/_widget/src/components/prompt/style.scss
@@ -1,32 +1,30 @@
-@use "sass:math";
+#dnsimple-support {
+  .prompt {
+    position: fixed;
+    bottom: var(--dnsimple-support-widget-prompt-padding);
+    right: calc(var(--dnsimple-support-widget-prompt-padding) * 8); // Allow space for the notification bell
+    line-height: 1;
 
-$padding: 7px;
-
-.prompt {
-  position: fixed;
-  bottom: $padding;
-  right: $padding * 8; // Allow space for the notification bell
-  line-height: 1;
-
-  & > a {
-    position: relative;
-    background: $medium-gray;
-    color: $white;
-    display: inline-block;
-    border-radius: $padding * 6;
-    padding: $padding;
-
-    .text {
+    & > a {
+      position: relative;
+      background: var(--dnsimple-support-widget-medium-gray);
+      color: var(--dnsimple-support-widget-white);
       display: inline-block;
-      padding: math.div($padding, 1.25) $padding * 1.2;
-    }
+      border-radius: calc(var(--dnsimple-support-widget-prompt-padding) * 6);
+      padding: var(--dnsimple-support-widget-prompt-padding);
+
+      .text {
+        display: inline-block;
+        padding: calc(var(--dnsimple-support-widget-prompt-padding) / 1.25) calc(var(--dnsimple-support-widget-prompt-padding) * 1.2);
+      }
 
-    .mascot {
-      float: left;
+      .mascot {
+        float: left;
 
-      svg {
-        display: block;
-        width: $padding * 4;
+        svg {
+          display: block;
+          width: calc(var(--dnsimple-support-widget-prompt-padding) * 4);
+        }
       }
     }
   }
diff --git a/_widget/src/components/welcome/component.vue b/_widget/src/components/welcome/component.vue
index b0cf54f50..f1c061aad 100644
--- a/_widget/src/components/welcome/component.vue
+++ b/_widget/src/components/welcome/component.vue
@@ -9,6 +9,8 @@
 <script>
 import { trustyIcon } from '../../assets/svgs';
 
+import "./style.scss"
+
 export default {
   props: ['app'],
   data () {
diff --git a/_widget/src/components/welcome/style.scss b/_widget/src/components/welcome/style.scss
index 0c987c443..fef173df0 100644
--- a/_widget/src/components/welcome/style.scss
+++ b/_widget/src/components/welcome/style.scss
@@ -1,22 +1,24 @@
-.welcome {
-  text-align: center;
-  padding-top: $padding * 7;
+#dnsimple-support {
+  .welcome {
+    text-align: center;
+    padding-top: calc(var(--dnsimple-support-widget-padding) * 7);
 
-  h1 {
-    font-weight: bold;
-    color: $blue;
-    font-size: 160%;
-  }
+    h1 {
+      font-weight: bold;
+      color: var(--dnsimple-support-widget-blue);
+      font-size: 160%;
+    }
 
-  p {
-    max-width: 70%;
-    margin: 0 auto;
-    color: $dark-gray;
-  }
+    p {
+      max-width: 70%;
+      margin: 0 auto;
+      color: var(--dnsimple-support-widget-dark-gray);
+    }
 
-  .mascot {
-    bottom: 0;
-    max-width: 50%;
-    margin: 0 auto $padding * 5;
+    .mascot {
+      bottom: 0;
+      max-width: 50%;
+      margin: 0 auto calc(var(--dnsimple-support-widget-padding) * 5);
+    }
   }
 }
diff --git a/content/assets/css/_typography.scss b/content/assets/css/_typography.scss
index 1df6146e8..4af204bb5 100644
--- a/content/assets/css/_typography.scss
+++ b/content/assets/css/_typography.scss
@@ -7,7 +7,7 @@ $font-family: -apple-system, BlinkMacSystemFont,
                'segoe ui', arial,
                sans-serif;
 
-$font-monospace: Menlo,Consolas,Monaco,"Courier New",monospace;
+var(--dnsimple-support-widget-font-monospace): Menlo,Consolas,Monaco,"Courier New",monospace;
 
 body {
   font-family: $font-family;
@@ -67,7 +67,7 @@ code {
   padding: 2px 4px;
   font-size: 90%;
   border-radius: 4px;
-  font-family: $font-monospace;
+  font-family: var(--dnsimple-support-widget-font-monospace);
 }
 
 pre {
@@ -75,7 +75,7 @@ pre {
   overflow-x: scroll;
   padding: 10px;
   font-size: 100%;
-  font-family: $font-monospace;
+  font-family: var(--dnsimple-support-widget-font-monospace);
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre-wrap;