From 35cb124035ee733579a90e73dcc4fbb7e1d87d53 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 28 Sep 2025 09:50:28 -0700
Subject: [PATCH] Scope docs CSS to custom layer

---
 site/src/components/shortcodes/JsDocs.astro   |   4 +-
 site/src/components/shortcodes/ScssDocs.astro |   4 +-
 site/src/scss/_ads.scss                       | 100 +++---
 site/src/scss/_anchor.scss                    |  38 ++-
 site/src/scss/_brand.scss                     | 100 +++---
 site/src/scss/_buttons.scss                   |  98 +++---
 site/src/scss/_callouts.scss                  |  78 ++---
 site/src/scss/_clipboard-js.scss              |  62 ++--
 site/src/scss/_component-examples.scss        |   2 +-
 site/src/scss/_content.scss                   | 321 +++++++++---------
 site/src/scss/_footer.scss                    |  18 +-
 site/src/scss/_layout.scss                    | 108 +++---
 site/src/scss/_masthead.scss                  | 210 ++++++------
 site/src/scss/_navbar.scss                    | 214 ++++++------
 site/src/scss/_placeholder-img.scss           |  16 +-
 site/src/scss/_scrolling.scss                 |  26 +-
 site/src/scss/_search.scss                    | 244 ++++++-------
 site/src/scss/_sidebar.scss                   | 122 +++----
 site/src/scss/_skippy.scss                    |  10 +-
 site/src/scss/_syntax.scss                    | 216 ++++++------
 site/src/scss/_toc.scss                       | 146 ++++----
 21 files changed, 1081 insertions(+), 1056 deletions(-)

diff --git a/site/src/components/shortcodes/JsDocs.astro b/site/src/components/shortcodes/JsDocs.astro
index 4430f21f88..3fdae5f050 100644
--- a/site/src/components/shortcodes/JsDocs.astro
+++ b/site/src/components/shortcodes/JsDocs.astro
@@ -55,8 +55,10 @@ try {
 <Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>
diff --git a/site/src/components/shortcodes/ScssDocs.astro b/site/src/components/shortcodes/ScssDocs.astro
index 4eaa8ca01f..04bea40a50 100644
--- a/site/src/components/shortcodes/ScssDocs.astro
+++ b/site/src/components/shortcodes/ScssDocs.astro
@@ -57,8 +57,10 @@ try {
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index df88fb3381..6b804e49f2 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -8,59 +8,61 @@
 // Carbon ads
 //
 
-#carbonads {
-  position: static;
-  max-width: 400px;
-  padding: 15px 15px 15px 160px;
-  margin: 1rem 0;
-  overflow: hidden;
-  @include font-size(.8125rem);
-  line-height: 1.4;
-  text-align: left;
-  background-color: var(--bs-bg-1);
-
-  a {
-    color: var(--bs-body-color);
-    text-decoration: none;
-  }
-
-  @include media-breakpoint-up(sm) {
-    @include border-radius(.5rem);
-  }
-}
-
-.carbon-img {
-  float: left;
-  margin-left: -145px;
-}
-
-@container (max-width: 240px) {
+@layer custom {
   #carbonads {
-    padding-left: 15px;
+    position: static;
+    max-width: 400px;
+    padding: 15px 15px 15px 160px;
+    margin: 1rem 0;
+    overflow: hidden;
+    @include font-size(.8125rem);
+    line-height: 1.4;
+    text-align: left;
+    background-color: var(--bs-bg-1);
+
+    a {
+      color: var(--bs-body-color);
+      text-decoration: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+      @include border-radius(.5rem);
+    }
   }
 
   .carbon-img {
+    float: left;
+    margin-left: -145px;
+  }
+
+  @container (max-width: 240px) {
+    #carbonads {
+      padding-left: 15px;
+    }
+
+    .carbon-img {
+      display: block;
+      float: none;
+      margin-left: 0;
+    }
+
+    .carbon-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .carbon-img > img {
+      width: 100%;
+      max-width: 100% !important;
+      height: auto;
+      @include border-radius(var(--bs-border-radius-sm));
+    }
+  }
+
+  .carbon-poweredby {
     display: block;
-    float: none;
-    margin-left: 0;
-  }
-
-  .carbon-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-  }
-
-  .carbon-img > img {
-    width: 100%;
-    max-width: 100% !important;
-    height: auto;
-    @include border-radius(var(--bs-border-radius-sm));
+    margin-top: .75rem;
+    color: var(--bs-fg-3) !important;
   }
 }
-
-.carbon-poweredby {
-  display: block;
-  margin-top: .75rem;
-  color: var(--bs-fg-3) !important;
-}
diff --git a/site/src/scss/_anchor.scss b/site/src/scss/_anchor.scss
index e44fc91de1..1f24e70e70 100644
--- a/site/src/scss/_anchor.scss
+++ b/site/src/scss/_anchor.scss
@@ -1,24 +1,26 @@
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/transition" as *;
 
-.anchor-link {
-  padding: 0 .175rem;
-  font-weight: 400;
-  color: rgba($link-color, .5);
-  text-decoration: none;
-  opacity: 0;
-  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
-
-  &::after {
-    content: "#";
-  }
-
-  &:focus,
-  &:hover,
-  :hover > &,
-  :target > & {
-    color: $link-color;
+@layer custom {
+  .anchor-link {
+    padding: 0 .175rem;
+    font-weight: 400;
+    color: rgba($link-color, .5);
     text-decoration: none;
-    opacity: 1;
+    opacity: 0;
+    @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+    &::after {
+      content: "#";
+    }
+
+    &:focus,
+    &:hover,
+    :hover > &,
+    :target > & {
+      color: $link-color;
+      text-decoration: none;
+      opacity: 1;
+    }
   }
 }
diff --git a/site/src/scss/_brand.scss b/site/src/scss/_brand.scss
index 447602965f..62844c21c7 100644
--- a/site/src/scss/_brand.scss
+++ b/site/src/scss/_brand.scss
@@ -7,59 +7,61 @@
 // Brand guidelines
 //
 
-// Logo series wrapper
-.bd-brand-logos {
-  color: $bd-violet;
+@layer custom {
+  // Logo series wrapper
+  .bd-brand-logos {
+    color: $bd-violet;
 
-  .inverse {
-    color: $white;
-    background-color: $bd-violet;
-  }
-}
-
-// Individual items
-.bd-brand-item {
-  + .bd-brand-item {
-    border-top: 1px solid var(--bs-border-color);
+    .inverse {
+      color: $white;
+      background-color: $bd-violet;
+    }
   }
 
-  @include media-breakpoint-up(md) {
+  // Individual items
+  .bd-brand-item {
     + .bd-brand-item {
-      border-top: 0;
-      border-left: 1px solid var(--bs-border-color);
+      border-top: 1px solid var(--bs-border-color);
+    }
+
+    @include media-breakpoint-up(md) {
+      + .bd-brand-item {
+        border-top: 0;
+        border-left: 1px solid var(--bs-border-color);
+      }
+    }
+  }
+
+
+  //
+  // Color swatches
+  //
+
+  .color-swatches {
+    margin: 0 -5px;
+
+    // Docs colors
+    .bd-purple {
+      background-color: $bd-purple;
+    }
+    .bd-purple-light {
+      background-color: $bd-purple-light;
+    }
+    .bd-purple-lighter {
+      background-color: #e5e1ea;
+    }
+    .bd-gray {
+      background-color: #f9f9f9;
+    }
+  }
+
+  .color-swatch {
+    width: 4rem;
+    height: 4rem;
+
+    @include media-breakpoint-up(md) {
+      width: 6rem;
+      height: 6rem;
     }
   }
 }
-
-
-//
-// Color swatches
-//
-
-.color-swatches {
-  margin: 0 -5px;
-
-  // Docs colors
-  .bd-purple {
-    background-color: $bd-purple;
-  }
-  .bd-purple-light {
-    background-color: $bd-purple-light;
-  }
-  .bd-purple-lighter {
-    background-color: #e5e1ea;
-  }
-  .bd-gray {
-    background-color: #f9f9f9;
-  }
-}
-
-.color-swatch {
-  width: 4rem;
-  height: 4rem;
-
-  @include media-breakpoint-up(md) {
-    width: 6rem;
-    height: 6rem;
-  }
-}
diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
index 2708811848..042c23301f 100644
--- a/site/src/scss/_buttons.scss
+++ b/site/src/scss/_buttons.scss
@@ -3,55 +3,53 @@
 @use "../../../scss/colors" as *;
 @use "variables" as *;
 
-// Buttons
-//
-// Custom buttons for the docs.
+@layer custom {
+  // scss-docs-start btn-css-vars-example
+  .btn-bd-primary {
+    --bs-btn-font-weight: 600;
+    --bs-btn-color: var(--bs-white);
+    --bs-btn-bg: var(--bd-violet-bg);
+    --bs-btn-border-color: var(--bd-violet-bg);
+    --bs-btn-hover-color: var(--bs-white);
+    --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+    --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+    --bs-btn-active-color: var(--bs-btn-hover-color);
+    --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+    --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
+  }
+  // scss-docs-end btn-css-vars-example
 
-// scss-docs-start btn-css-vars-example
-.btn-bd-primary {
-  --bs-btn-font-weight: 600;
-  --bs-btn-color: var(--bs-white);
-  --bs-btn-bg: var(--bd-violet-bg);
-  --bs-btn-border-color: var(--bd-violet-bg);
-  --bs-btn-hover-color: var(--bs-white);
-  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
-  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
-  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-  --bs-btn-active-color: var(--bs-btn-hover-color);
-  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
-  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
-}
-// scss-docs-end btn-css-vars-example
-
-.btn-bd-accent {
-  --bs-btn-font-weight: 600;
-  --bs-btn-color: var(--bd-accent);
-  --bs-btn-border-color: var(--bd-accent);
-  --bs-btn-hover-color: var(--bd-dark);
-  --bs-btn-hover-bg: var(--bd-accent);
-  --bs-btn-hover-border-color: var(--bd-accent);
-  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
-  --bs-btn-active-color: var(--bs-btn-hover-color);
-  --bs-btn-active-bg: var(--bs-btn-hover-bg);
-  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-}
-
-.btn-bd-light {
-  --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
-
-  --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-border-color);
-  --bs-btn-hover-color: var(--btn-custom-color);
-  --bs-btn-hover-border-color: var(--btn-custom-color);
-  --bs-btn-active-color: var(--btn-custom-color);
-  --bs-btn-active-bg: var(--bs-white);
-  --bs-btn-active-border-color: var(--btn-custom-color);
-  --bs-btn-focus-border-color: var(--btn-custom-color);
-  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-}
-
-.bd-btn-lg {
-  --bs-btn-border-radius: .5rem;
-
-  padding: .8125rem 2rem;
+  .btn-bd-accent {
+    --bs-btn-font-weight: 600;
+    --bs-btn-color: var(--bd-accent);
+    --bs-btn-border-color: var(--bd-accent);
+    --bs-btn-hover-color: var(--bd-dark);
+    --bs-btn-hover-bg: var(--bd-accent);
+    --bs-btn-hover-border-color: var(--bd-accent);
+    --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+    --bs-btn-active-color: var(--bs-btn-hover-color);
+    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+  }
+
+  .btn-bd-light {
+    --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
+
+    --bs-btn-color: var(--bs-gray-600);
+    --bs-btn-border-color: var(--bs-border-color);
+    --bs-btn-hover-color: var(--btn-custom-color);
+    --bs-btn-hover-border-color: var(--btn-custom-color);
+    --bs-btn-active-color: var(--btn-custom-color);
+    --bs-btn-active-bg: var(--bs-white);
+    --bs-btn-active-border-color: var(--btn-custom-color);
+    --bs-btn-focus-border-color: var(--btn-custom-color);
+    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  }
+
+  .bd-btn-lg {
+    --bs-btn-border-radius: .5rem;
+
+    padding: .8125rem 2rem;
+  }
 }
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index b2b8436283..25c2f68d9a 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -7,47 +7,49 @@
 // Callouts
 //
 
-.bd-callout {
-  --#{$prefix}link-color: var(--bd-callout-color);
-  --#{$prefix}link-hover-color: var(--bd-callout-color);
-  --#{$prefix}code-color: var(--bd-callout-code-color);
+@layer custom {
+  .bd-callout {
+    --#{$prefix}link-color: var(--bd-callout-color);
+    --#{$prefix}link-hover-color: var(--bd-callout-color);
+    --#{$prefix}code-color: var(--bd-callout-code-color);
 
-  padding: 1.25rem;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  font-size: .875rem;
-  line-height: 1.5;
-  // color: var(--bd-callout-color, inherit);
-  background-color: var(--bd-callout-bg, var(--bs-gray-100));
-  border: 1px solid var(--bd-callout-border, var(--bs-border-color));
-  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
-  @include border-radius(var(--bs-border-radius));
-  // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
+    padding: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    // color: var(--bd-callout-color, inherit);
+    background-color: var(--bd-callout-bg, var(--bs-gray-100));
+    border: 1px solid var(--bd-callout-border, var(--bs-border-color));
+    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+    @include border-radius(var(--bs-border-radius));
+    // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
 
-  h4 {
-    margin-bottom: .25rem;
+    h4 {
+      margin-bottom: .25rem;
+    }
+
+    a { font-weight: 500; }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    + .bd-callout {
+      margin-top: -.25rem;
+    }
+
+    .highlight {
+      background-color: rgba($black, .05);
+    }
   }
 
-  a { font-weight: 500; }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  + .bd-callout {
-    margin-top: -.25rem;
-  }
-
-  .highlight {
-    background-color: rgba($black, .05);
-  }
-}
-
-// Variations
-@each $variant in $bd-callout-variants {
-  .bd-callout-#{$variant} {
-    // --bd-callout-color: var(--bs-#{$variant}-text);
-    --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
-    --bd-callout-border: var(--bs-#{$variant}-border);
+  // Variations
+  @each $variant in $bd-callout-variants {
+    .bd-callout-#{$variant} {
+      // --bd-callout-color: var(--bs-#{$variant}-text);
+      --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
+      --bd-callout-border: var(--bs-#{$variant}-border);
+    }
   }
 }
diff --git a/site/src/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss
index a4c71c8ccf..968b91d892 100644
--- a/site/src/scss/_clipboard-js.scss
+++ b/site/src/scss/_clipboard-js.scss
@@ -5,43 +5,45 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard,
-.bd-edit {
-  position: relative;
-  display: none;
-  float: right;
+@layer custom {
+  .bd-clipboard,
+  .bd-edit {
+    position: relative;
+    display: none;
+    float: right;
 
-  + .highlight {
-    margin-top: 0;
+    + .highlight {
+      margin-top: 0;
+    }
+
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
   }
 
-  @include media-breakpoint-up(md) {
+  .btn-clipboard,
+  .btn-edit {
     display: block;
-  }
-}
+    padding: .5em;
+    line-height: 1;
+    color: var(--bs-body-color);
+    background-color: var(--bd-pre-bg);
+    border: 0;
+    @include border-radius(.25rem);
 
-.btn-clipboard,
-.btn-edit {
-  display: block;
-  padding: .5em;
-  line-height: 1;
-  color: var(--bs-body-color);
-  background-color: var(--bd-pre-bg);
-  border: 0;
-  @include border-radius(.25rem);
+    &:hover {
+      color: var(--bs-link-hover-color);
+    }
 
-  &:hover {
-    color: var(--bs-link-hover-color);
+    &:focus {
+      z-index: 3;
+    }
   }
 
-  &:focus {
-    z-index: 3;
+  .btn-clipboard {
+    position: relative;
+    z-index: 2;
+    margin-top: .5rem;
+    margin-right: .5rem;
   }
 }
-
-.btn-clipboard {
-  position: relative;
-  z-index: 2;
-  margin-top: 1.25rem;
-  margin-right: .75rem;
-}
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 18175fc5b5..6f023647a1 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -346,7 +346,7 @@
   .highlight {
     position: relative;
     padding: .75rem ($bd-gutter-x * .5);
-    background-color: var(--bs-bg-1);
+    background-color: var(--bd-pre-bg);
 
     @include media-breakpoint-up(md) {
       padding: 1rem;
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index cf8c22227b..ac8655e793 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -8,188 +8,175 @@
 // Bootstrap docs content theming
 //
 
-.bd-content {
-  > h2,
-  > h3,
-  > h4 {
-    --bs-heading-color: var(--bs-emphasis-color);
-  }
-
-  // Offset content from fixed navbar when jumping to headings
-  > h2:not(:first-child) {
-    margin-top: 3rem;
-  }
-
-  > h3 {
-    margin-top: 2rem;
-  }
-
-  > ul li,
-  > ol li {
-    margin-bottom: .25rem;
-
-    // stylelint-disable selector-max-type, selector-max-compound-selectors
-    > p ~ ul {
-      margin-top: -.5rem;
-      margin-bottom: 1rem;
-    }
-    // stylelint-enable selector-max-type, selector-max-compound-selectors
-  }
-
-  .bd-reference-table {
-    max-height: 420px;
-    overflow-y: auto;
-    font-size: .75rem;
-
-    thead th {
-      border-bottom-color: currentcolor;
+@layer custom {
+  .bd-content {
+    > h2,
+    > h3,
+    > h4 {
+      --bs-heading-color: var(--bs-emphasis-color);
     }
 
-    th,
-    td {
-      padding-inline: 0;
+    // Offset content from fixed navbar when jumping to headings
+    > h2:not(:first-child) {
+      margin-top: 3rem;
     }
 
-    td {
-      font-family: var(--bs-font-monospace);
+    > h3 {
+      margin-top: 2rem;
+    }
 
-      &:first-child {
-        padding-inline-end: 1.5rem;
+    > ul li,
+    > ol li {
+      margin-bottom: .25rem;
+
+      // stylelint-disable selector-max-type, selector-max-compound-selectors
+      > p ~ ul {
+        margin-top: -.5rem;
+        margin-bottom: 1rem;
+      }
+      // stylelint-enable selector-max-type, selector-max-compound-selectors
+    }
+
+    .bd-reference-table {
+      max-height: 420px;
+      overflow-y: auto;
+      font-size: .75rem;
+
+      thead th {
+        border-bottom-color: currentcolor;
+      }
+
+      th,
+      td {
+        padding-inline: 0;
+      }
+
+      td {
+        font-family: var(--bs-font-monospace);
+
+        &:first-child {
+          padding-inline-end: 1.5rem;
+          white-space: nowrap;
+        }
+
+        &:last-child {
+          color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+        }
+      }
+
+    }
+
+    // Override Bootstrap defaults
+    > .table,
+    > .table-responsive .table {
+      --bs-table-border-color: var(--bs-border-color);
+
+      max-width: 100%;
+      margin-bottom: 1.5rem;
+      @include font-size(.875rem);
+
+      @include media-breakpoint-down(lg) {
+        &.table-bordered {
+          border: 0;
+        }
+      }
+
+      th,
+      td {
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:not(:last-child) {
+          padding-right: 1.5rem;
+        }
+      }
+
+      th {
+        color: var(--bs-emphasis-color);
+        border-bottom-color: currentcolor;
+      }
+
+      &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
+        color: var(--bs-emphasis-color);
+      }
+
+      // Prevent breaking of code
+      th,
+      td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
         white-space: nowrap;
       }
-
-      &:last-child {
-        color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
-      }
-    }
-
-  }
-
-  // Override Bootstrap defaults
-  > .table,
-  > .table-responsive .table {
-    --bs-table-border-color: var(--bs-border-color);
-
-    max-width: 100%;
-    margin-bottom: 1.5rem;
-    @include font-size(.875rem);
-
-    @include media-breakpoint-down(lg) {
-      &.table-bordered {
-        border: 0;
-      }
-    }
-
-    th,
-    td {
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:not(:last-child) {
-        padding-right: 1.5rem;
-      }
-    }
-
-    th {
-      color: var(--bs-emphasis-color);
-      border-bottom-color: currentcolor;
-    }
-
-    &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
-      color: var(--bs-emphasis-color);
-    }
-
-    // Prevent breaking of code
-    th,
-    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
-      white-space: nowrap;
     }
   }
-}
 
-.table-options {
-  td:nth-child(2) {
-    min-width: 160px;
-  }
-}
-
-.table-options td:last-child,
-.table-utilities td:last-child {
-  min-width: 280px;
-}
-
-.table-swatches {
-  th {
-    color: var(--bs-emphasis-color);
+  .table-options {
+    td:nth-child(2) {
+      min-width: 160px;
+    }
   }
 
-  td code {
-    white-space: nowrap;
+  .table-options td:last-child,
+  .table-utilities td:last-child {
+    min-width: 280px;
   }
 
-  // Astro HTML parser adds extra <p> tags to the content
-  td p {
-    margin: 0;
-  }
-}
-
-.bd-title {
-  --bs-heading-color: var(--bs-emphasis-color);
-  @include font-size(3rem);
-}
-
-.bd-subtitle {
-  font-weight: 300;
-  @include font-size(1.5rem);
-}
-
-.bi {
-  width: 1em;
-  height: 1em;
-  vertical-align: -.125em;
-  fill: currentcolor;
-}
-
-.border-lg-start {
-  @include media-breakpoint-up(lg) {
-    border-left: var(--bs-border-width) solid var(--bs-border-color);
-  }
-}
-
-// stylelint-disable selector-no-qualifying-type
-.bd-summary-link {
-  color: var(--bs-link-color);
-
-  &:hover,
-  details[open] > & {
-    color: var(--bs-link-hover-color);
-  }
-}
-// stylelint-enable selector-no-qualifying-type
-
-// scss-docs-start custom-color-mode
-[data-bs-theme="blue"] {
-  --bs-body-color: var(--bs-white);
-  --bs-body-color-rgb: #{to-rgb($white)};
-  --bs-body-bg: var(--bs-blue);
-  --bs-body-bg-rgb: #{to-rgb($blue)};
-  --bs-tertiary-bg: #{$blue-600};
-
-  .dropdown-menu {
-    --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
-    --bs-dropdown-link-active-bg: #{$blue-700};
+  .bd-title {
+    --bs-heading-color: var(--bs-emphasis-color);
+    @include font-size(3rem);
   }
 
-  .btn-secondary {
-    --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
-    --bs-btn-border-color: #{rgba($white, .25)};
-    --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
-    --bs-btn-hover-border-color: #{rgba($white, .25)};
-    --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
-    --bs-btn-active-border-color: #{rgba($white, .5)};
-    --bs-btn-focus-border-color: #{rgba($white, .5)};
-    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  .bd-subtitle {
+    font-weight: 300;
+    @include font-size(1.5rem);
   }
+
+  .bi {
+    width: 1em;
+    height: 1em;
+    vertical-align: -.125em;
+    fill: currentcolor;
+  }
+
+  .border-lg-start {
+    @include media-breakpoint-up(lg) {
+      border-left: var(--bs-border-width) solid var(--bs-border-color);
+    }
+  }
+
+  // stylelint-disable selector-no-qualifying-type
+  .bd-summary-link {
+    color: var(--bs-link-color);
+
+    &:hover,
+    details[open] > & {
+      color: var(--bs-link-hover-color);
+    }
+  }
+  // stylelint-enable selector-no-qualifying-type
+
+  // scss-docs-start custom-color-mode
+  [data-bs-theme="blue"] {
+    --bs-body-color: var(--bs-white);
+    --bs-body-color-rgb: #{to-rgb($white)};
+    --bs-body-bg: var(--bs-blue);
+    --bs-body-bg-rgb: #{to-rgb($blue)};
+    --bs-tertiary-bg: #{$blue-600};
+
+    .dropdown-menu {
+      --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
+      --bs-dropdown-link-active-bg: #{$blue-700};
+    }
+
+    .btn-secondary {
+      --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
+      --bs-btn-border-color: #{rgba($white, .25)};
+      --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
+      --bs-btn-hover-border-color: #{rgba($white, .25)};
+      --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
+      --bs-btn-active-border-color: #{rgba($white, .5)};
+      --bs-btn-focus-border-color: #{rgba($white, .5)};
+      --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+    }
+  }
+  // scss-docs-end custom-color-mode
 }
-// scss-docs-end custom-color-mode
diff --git a/site/src/scss/_footer.scss b/site/src/scss/_footer.scss
index 42e1ca051a..df9fba98de 100644
--- a/site/src/scss/_footer.scss
+++ b/site/src/scss/_footer.scss
@@ -2,15 +2,17 @@
 // Footer
 //
 
-.bd-footer {
-  a {
-    color: var(--bs-body-color);
-    text-decoration: none;
+@layer custom {
+  .bd-footer {
+    a {
+      color: var(--bs-body-color);
+      text-decoration: none;
 
-    &:hover,
-    &:focus {
-      color: var(--bs-link-hover-color);
-      text-decoration: underline;
+      &:hover,
+      &:focus {
+        color: var(--bs-link-hover-color);
+        text-decoration: underline;
+      }
     }
   }
 }
diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index 4bbbfbe0c0..04305e68f8 100644
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -2,60 +2,66 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "variables" as *;
 
-.bd-gutter {
-  --bs-gutter-x: #{$bd-gutter-x};
-}
-
-.bd-layout {
-
-  @include media-breakpoint-up(lg) {
-    display: grid;
-    grid-template-areas: "sidebar main";
-    grid-template-columns: 1fr 5fr;
-    gap: $grid-gutter-width;
-  }
-}
-
-.bd-sidebar {
-  grid-area: sidebar;
-}
-
-.bd-main {
-  grid-area: main;
-
-  @include media-breakpoint-down(lg) {
-    max-width: 760px;
-    margin-inline: auto;
+@layer custom {
+  .bd-gutter {
+    --bs-gutter-x: #{$bd-gutter-x};
   }
 
-  @include media-breakpoint-up(md) {
-    display: grid;
-    grid-template-areas:
-      "intro"
-      "toc"
-      "content";
-    grid-template-rows: auto auto 1fr;
-    gap: inherit;
+  .bd-layout {
+
+    @include media-breakpoint-up(lg) {
+      display: grid;
+      grid-template-areas: "sidebar main";
+      grid-template-columns: 1fr 5fr;
+      gap: $grid-gutter-width;
+    }
+
+    @include media-breakpoint-up(xl) {
+      gap: 2rem;
+    }
   }
 
-  @include media-breakpoint-up(lg) {
-    grid-template-areas:
-      "intro   toc"
-      "content toc";
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 4fr 1fr;
+  .bd-sidebar {
+    grid-area: sidebar;
+  }
+
+  .bd-main {
+    grid-area: main;
+
+    @include media-breakpoint-down(lg) {
+      max-width: 760px;
+      margin-inline: auto;
+    }
+
+    @include media-breakpoint-up(md) {
+      display: grid;
+      grid-template-areas:
+        "intro"
+        "toc"
+        "content";
+      grid-template-rows: auto auto 1fr;
+      gap: inherit;
+    }
+
+    @include media-breakpoint-up(lg) {
+      grid-template-areas:
+        "intro   toc"
+        "content toc";
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 4fr 1fr;
+    }
+  }
+
+  .bd-intro {
+    grid-area: intro;
+  }
+
+  .bd-toc {
+    grid-area: toc;
+  }
+
+  .bd-content {
+    grid-area: content;
+    min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
   }
 }
-
-.bd-intro {
-  grid-area: intro;
-}
-
-.bd-toc {
-  grid-area: toc;
-}
-
-.bd-content {
-  grid-area: content;
-  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
-}
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index 0ad312f77d..a25a199f54 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -7,128 +7,130 @@
 @use "../../../scss/mixins/transition" as *;
 @use "../../../scss/mixins/color-mode" as *;
 
-.bd-masthead {
-  --bd-pink-rgb: #{to-rgb($pink)};
-  padding: 3rem 0;
-  // stylelint-disable
-  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
-                    radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
-  // stylelint-enable
+@layer custom {
+  .bd-masthead {
+    --bd-pink-rgb: #{to-rgb($pink)};
+    padding: 3rem 0;
+    // stylelint-disable
+    background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
+                      radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
+                      radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
+                      radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
+                      radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
+    // stylelint-enable
 
-  h1 {
-    --bs-heading-color: var(--bs-emphasis-color);
-    @include font-size(4rem);
-  }
-
-  .lead {
-    @include font-size(1rem);
-    font-weight: 400;
-    color: var(--bs-secondary-color);
-  }
-
-  .bd-code-snippet {
-    margin: 0;
-    border-color: var(--bs-border-color-translucent);
-    border-width: 1px;
-    @include border-radius(.5rem);
-  }
-
-  .highlight {
-    width: 100%;
-    padding: .5rem 1rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: rgba(var(--bs-body-color-rgb), .075);
-    @include border-radius(calc(.5rem - 1px));
-
-    @include media-breakpoint-up(lg) {
-      padding-right: 4rem;
+    h1 {
+      --bs-heading-color: var(--bs-emphasis-color);
+      @include font-size(4rem);
     }
 
-    pre {
-      padding: 0;
-      margin: .625rem 0;
+    .lead {
+      @include font-size(1rem);
+      font-weight: 400;
+      color: var(--bs-secondary-color);
+    }
+
+    .bd-code-snippet {
+      margin: 0;
+      border-color: var(--bs-border-color-translucent);
+      border-width: 1px;
+      @include border-radius(.5rem);
+    }
+
+    .highlight {
+      width: 100%;
+      padding: .5rem 1rem;
       overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: rgba(var(--bs-body-color-rgb), .075);
+      @include border-radius(calc(.5rem - 1px));
+
+      @include media-breakpoint-up(lg) {
+        padding-right: 4rem;
+      }
+
+      pre {
+        padding: 0;
+        margin: .625rem 0;
+        overflow: hidden;
+      }
+    }
+    .btn-clipboard {
+      position: absolute;
+      top: -.625rem;
+      right: 0;
+      background-color: transparent;
+    }
+
+    #carbonads { // stylelint-disable-line selector-max-id
+      max-width: 400px;
+      margin-block: 2rem;
+      margin-inline: auto;
+    }
+
+    @include media-breakpoint-up(md) {
+      .lead {
+        @include font-size(1.5rem);
+      }
     }
   }
-  .btn-clipboard {
-    position: absolute;
-    top: -.625rem;
-    right: 0;
-    background-color: transparent;
-  }
 
-  #carbonads { // stylelint-disable-line selector-max-id
-    max-width: 400px;
-    margin-block: 2rem;
-    margin-inline: auto;
-  }
+  .masthead-followup {
+    h2,
+    h3,
+    h4 {
+      --bs-heading-color: var(--bs-emphasis-color);
+    }
 
-  @include media-breakpoint-up(md) {
     .lead {
-      @include font-size(1.5rem);
+      @include font-size(1rem);
+    }
+
+    @include media-breakpoint-up(md) {
+      .lead {
+        @include font-size(1.25rem);
+      }
     }
   }
-}
 
-.masthead-followup {
-  h2,
-  h3,
-  h4 {
-    --bs-heading-color: var(--bs-emphasis-color);
-  }
+  .masthead-followup-icon {
+    padding: 1rem;
+    color: rgba(var(--bg-rgb), 1);
+    background-color: rgba(var(--bg-rgb), .1);
+    background-blend-mode: multiply;
+    @include border-radius(1rem);
+    mix-blend-mode: darken;
 
-  .lead {
-    @include font-size(1rem);
-  }
-
-  @include media-breakpoint-up(md) {
-    .lead {
-      @include font-size(1.25rem);
+    svg {
+      filter: drop-shadow(0 1px 1px var(--bs-body-bg));
     }
   }
-}
 
-.masthead-followup-icon {
-  padding: 1rem;
-  color: rgba(var(--bg-rgb), 1);
-  background-color: rgba(var(--bg-rgb), .1);
-  background-blend-mode: multiply;
-  @include border-radius(1rem);
-  mix-blend-mode: darken;
-
-  svg {
-    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
-  }
-}
-
-.masthead-notice {
-  background-color: var(--bd-accent);
-  box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
-}
-
-.animate-img {
-  > img {
-    @include transition(transform .2s ease-in-out);
+  .masthead-notice {
+    background-color: var(--bd-accent);
+    box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
   }
 
-  &:hover > img {
-    transform: scale(1.1);
+  .animate-img {
+    > img {
+      @include transition(transform .2s ease-in-out);
+    }
+
+    &:hover > img {
+      transform: scale(1.1);
+    }
+
+    &:active > img {
+      transform: scale(1);
+    }
   }
 
-  &:active > img {
-    transform: scale(1);
-  }
+  // @if $enable-dark-mode {
+  //   [data-bs-theme="dark"] {
+  //     .masthead-followup-icon {
+  //       mix-blend-mode: lighten;
+  //     }
+  //   }
+  // }
 }
-
-// @if $enable-dark-mode {
-//   [data-bs-theme="dark"] {
-//     .masthead-followup-icon {
-//       mix-blend-mode: lighten;
-//     }
-//   }
-// }
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index 44478c3044..dc108993bc 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -6,137 +6,139 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/vendor/rfs" as *;
 
-.bd-navbar {
-  padding: .75rem 0;
-  background-color: transparent;
-  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+@layer custom {
+  .bd-navbar {
+    padding: .75rem 0;
+    background-color: transparent;
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 
-  @media (forced-colors) {
-    background-color: Canvas;
-  }
-
-  &::after {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    display: block;
-    content: "";
-    background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
-    // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
-  }
-
-  .bd-navbar-toggle {
-    @include media-breakpoint-down(lg) {
-      width: 4.25rem;
-    }
-  }
-
-  .navbar-toggler {
-    padding: 0;
-    margin-right: -.5rem;
-    border: 0;
-
-    &:first-child {
-      margin-left: -.5rem;
+    @media (forced-colors) {
+      background-color: Canvas;
     }
 
-    .bi {
-      width: 1.5rem;
-      height: 1.5rem;
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      display: block;
+      content: "";
+      background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
+      // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
     }
 
-    &:focus {
-      box-shadow: none;
+    .bd-navbar-toggle {
+      @include media-breakpoint-down(lg) {
+        width: 4.25rem;
+      }
     }
-  }
 
-  .navbar-brand {
-    color: $white;
-    @include transition(transform .2s ease-in-out);
+    .navbar-toggler {
+      padding: 0;
+      margin-right: -.5rem;
+      border: 0;
 
-    &:hover {
-      transform: rotate(-5deg) scale(1.1);
+      &:first-child {
+        margin-left: -.5rem;
+      }
+
+      .bi {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
     }
-  }
 
-  .navbar-toggler,
-  .nav-link {
-    padding-right: $spacer * .25;
-    padding-left: $spacer * .25;
-    color: rgba($white, .85);
-
-    &:hover,
-    &:focus {
+    .navbar-brand {
       color: $white;
+      @include transition(transform .2s ease-in-out);
+
+      &:hover {
+        transform: rotate(-5deg) scale(1.1);
+      }
     }
 
-    &.active {
-      font-weight: 600;
-      color: $white;
-    }
-  }
+    .navbar-toggler,
+    .nav-link {
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
+      color: rgba($white, .85);
 
-  .navbar-nav-svg {
-    display: inline-block;
-    vertical-align: -.125rem;
-  }
+      &:hover,
+      &:focus {
+        color: $white;
+      }
 
-  .offcanvas-lg {
-    background-color: var(--bd-violet-bg);
-    border-left: 0;
-
-    @include media-breakpoint-down(lg) {
-      box-shadow: var(--#{$prefix}box-shadow-lg);
-    }
-  }
-
-  .dropdown-toggle {
-    &:focus:not(:focus-visible) {
-      outline: 0;
-    }
-  }
-
-  .dropdown-menu {
-    --bs-dropdown-min-width: 12rem;
-    --bs-dropdown-padding-x: .25rem;
-    --bs-dropdown-padding-y: .25rem;
-    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
-    --bs-dropdown-link-active-bg: var(--bd-violet);
-    @include rfs(.875rem, --bs-dropdown-font-size);
-    @include font-size(.875rem);
-    @include border-radius(.5rem);
-    box-shadow: var(--#{$prefix}dropdown-box-shadow);
-
-    li + li {
-      margin-top: .125rem;
+      &.active {
+        font-weight: 600;
+        color: $white;
+      }
     }
 
-    .dropdown-item {
-      @include border-radius(.25rem);
+    .navbar-nav-svg {
+      display: inline-block;
+      vertical-align: -.125rem;
+    }
+
+    .offcanvas-lg {
+      background-color: var(--bd-violet-bg);
+      border-left: 0;
+
+      @include media-breakpoint-down(lg) {
+        box-shadow: var(--#{$prefix}box-shadow-lg);
+      }
+    }
+
+    .dropdown-toggle {
+      &:focus:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+
+    .dropdown-menu {
+      --bs-dropdown-min-width: 12rem;
+      --bs-dropdown-padding-x: .25rem;
+      --bs-dropdown-padding-y: .25rem;
+      --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+      --bs-dropdown-link-active-bg: var(--bd-violet);
+      @include rfs(.875rem, --bs-dropdown-font-size);
+      @include font-size(.875rem);
+      @include border-radius(.5rem);
+      box-shadow: var(--#{$prefix}dropdown-box-shadow);
+
+      li + li {
+        margin-top: .125rem;
+      }
+
+      .dropdown-item {
+        @include border-radius(.25rem);
+
+        &:active {
+          .bi {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+      }
+
+      .active {
+        font-weight: 600;
 
-      &:active {
         .bi {
-          color: inherit !important; // stylelint-disable-line declaration-no-important
+          display: block !important; // stylelint-disable-line declaration-no-important
         }
       }
     }
 
-    .active {
-      font-weight: 600;
-
-      .bi {
-        display: block !important; // stylelint-disable-line declaration-no-important
-      }
+    .dropdown-menu-end {
+      --bs-dropdown-min-width: 8rem;
     }
   }
 
-  .dropdown-menu-end {
-    --bs-dropdown-min-width: 8rem;
-  }
-}
-
-@include color-mode(dark) {
-  .bd-navbar {
-    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+  @include color-mode(dark) {
+    .bd-navbar {
+      box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+    }
   }
 }
diff --git a/site/src/scss/_placeholder-img.scss b/site/src/scss/_placeholder-img.scss
index e9489e88ef..a132eb462b 100644
--- a/site/src/scss/_placeholder-img.scss
+++ b/site/src/scss/_placeholder-img.scss
@@ -6,12 +6,14 @@
 
 // Remember to update `site/_layouts/examples.html` too if this changes!
 
-.bd-placeholder-img {
-  @include font-size(1.125rem);
-  user-select: none;
-  text-anchor: middle;
-}
+@layer custom {
+  .bd-placeholder-img {
+    @include font-size(1.125rem);
+    user-select: none;
+    text-anchor: middle;
+  }
 
-.bd-placeholder-img-lg {
-  @include font-size(3.5rem);
+  .bd-placeholder-img-lg {
+    @include font-size(3.5rem);
+  }
 }
diff --git a/site/src/scss/_scrolling.scss b/site/src/scss/_scrolling.scss
index 0aaf7444ec..a0435ca7d6 100644
--- a/site/src/scss/_scrolling.scss
+++ b/site/src/scss/_scrolling.scss
@@ -1,16 +1,18 @@
 // When navigating with the keyboard, prevent focus from landing behind the sticky header
 
-main {
-  a,
-  button,
-  input,
-  select,
-  textarea,
-  h2,
-  h3,
-  h4,
-  [tabindex="0"] {
-    scroll-margin-top: 80px;
-    scroll-margin-bottom: 100px;
+@layer custom {
+  main {
+    a,
+    button,
+    input,
+    select,
+    textarea,
+    h2,
+    h3,
+    h4,
+    [tabindex="0"] {
+      scroll-margin-top: 80px;
+      scroll-margin-bottom: 100px;
+    }
   }
 }
diff --git a/site/src/scss/_search.scss b/site/src/scss/_search.scss
index 0e4769ed9e..d82787e266 100644
--- a/site/src/scss/_search.scss
+++ b/site/src/scss/_search.scss
@@ -31,149 +31,151 @@
   --docsearch-muted-color: #7f8497;
 }
 
-.bd-search {
-  position: relative;
+@layer custom {
+  .bd-search {
+    position: relative;
+
+    @include media-breakpoint-up(lg) {
+      position: absolute;
+      top: .875rem;
+      left: 50%;
+      width: 200px;
+      margin-left: -100px;
+    }
+
+    @include media-breakpoint-up(xl) {
+      width: 280px;
+      margin-left: -140px;
+    }
 
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: .875rem;
-    left: 50%;
-    width: 200px;
-    margin-left: -100px;
   }
 
-  @include media-breakpoint-up(xl) {
-    width: 280px;
-    margin-left: -140px;
+  .DocSearch-Container {
+    --docsearch-muted-color: var(--bs-secondary-color);
+    --docsearch-hit-shadow: none;
+
+    position: fixed;
+    z-index: 2000; // Make sure to be over all components showcased in the documentation
+    cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 4rem;
+    }
   }
 
-}
+  .DocSearch-Button {
+    --docsearch-searchbox-background: #{rgba($black, .1)};
+    --docsearch-searchbox-color: #{$white};
+    --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+    --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+    --docsearch-text-color: #{$white};
+    --docsearch-muted-color: #{rgba($white, .65)};
 
-.DocSearch-Container {
-  --docsearch-muted-color: var(--bs-secondary-color);
-  --docsearch-hit-shadow: none;
-
-  position: fixed;
-  z-index: 2000; // Make sure to be over all components showcased in the documentation
-  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
-
-  @include media-breakpoint-up(lg) {
-    padding-top: 4rem;
-  }
-}
-
-.DocSearch-Button {
-  --docsearch-searchbox-background: #{rgba($black, .1)};
-  --docsearch-searchbox-color: #{$white};
-  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-  --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-  --docsearch-text-color: #{$white};
-  --docsearch-muted-color: #{rgba($white, .65)};
-
-  width: 100%;
-  height: 38px; // Match Bootstrap inputs
-  margin: 0;
-  border: 1px solid rgba($white, .4);
-  @include border-radius(.375rem);
-
-  .DocSearch-Search-Icon {
-    opacity: .65;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    border-color: rgba($bd-accent, 1);
+    width: 100%;
+    height: 38px; // Match Bootstrap inputs
+    margin: 0;
+    border: 1px solid rgba($white, .4);
+    @include border-radius(.375rem);
 
     .DocSearch-Search-Icon {
-      opacity: 1;
+      opacity: .65;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: rgba($bd-accent, 1);
+
+      .DocSearch-Search-Icon {
+        opacity: 1;
+      }
+    }
+
+    @include media-breakpoint-down(lg) {
+      &,
+      &:hover,
+      &:focus {
+        background: transparent;
+        border: 0;
+        box-shadow: none;
+      }
+      &:focus {
+        box-shadow: var(--docsearch-searchbox-shadow);
+      }
     }
   }
 
-  @include media-breakpoint-down(lg) {
-    &,
-    &:hover,
-    &:focus {
-      background: transparent;
-      border: 0;
-      box-shadow: none;
-    }
-    &:focus {
-      box-shadow: var(--docsearch-searchbox-shadow);
+  .DocSearch-Button-Keys,
+  .DocSearch-Button-Placeholder {
+    @include media-breakpoint-down(lg) {
+      display: none;
     }
   }
-}
 
-.DocSearch-Button-Keys,
-.DocSearch-Button-Placeholder {
-  @include media-breakpoint-down(lg) {
-    display: none;
+  .DocSearch-Button-Keys {
+    min-width: 0;
+    padding: .125rem .25rem;
+    background: rgba($black, .25);
+    @include border-radius(.25rem);
   }
-}
 
-.DocSearch-Button-Keys {
-  min-width: 0;
-  padding: .125rem .25rem;
-  background: rgba($black, .25);
-  @include border-radius(.25rem);
-}
-
-.DocSearch-Button-Key {
-  top: 0;
-  width: auto;
-  height: 1.25rem;
-  padding-right: .125rem;
-  padding-left: .125rem;
-  margin-right: 0;
-  font-size: .875rem;
-  background: none;
-  box-shadow: none;
-}
-
-.DocSearch-Commands-Key {
-  padding-left: 1px;
-  font-size: .875rem;
-  background-color: rgba($black, .1);
-  background-image: none;
-  box-shadow: none;
-}
-
-.DocSearch-Form {
-  @include border-radius(var(--bs-border-radius));
-}
-
-.DocSearch-Hits {
-  mark {
-    padding: 0;
+  .DocSearch-Button-Key {
+    top: 0;
+    width: auto;
+    height: 1.25rem;
+    padding-right: .125rem;
+    padding-left: .125rem;
+    margin-right: 0;
+    font-size: .875rem;
+    background: none;
+    box-shadow: none;
   }
-}
 
-.DocSearch-Hit {
-  padding-bottom: 0;
-  @include border-radius(0);
+  .DocSearch-Commands-Key {
+    padding-left: 1px;
+    font-size: .875rem;
+    background-color: rgba($black, .1);
+    background-image: none;
+    box-shadow: none;
+  }
 
-  a {
+  .DocSearch-Form {
+    @include border-radius(var(--bs-border-radius));
+  }
+
+  .DocSearch-Hits {
+    mark {
+      padding: 0;
+    }
+  }
+
+  .DocSearch-Hit {
+    padding-bottom: 0;
     @include border-radius(0);
-    border: solid var(--bs-border-color);
-    border-width: 0 1px 1px;
+
+    a {
+      @include border-radius(0);
+      border: solid var(--bs-border-color);
+      border-width: 0 1px 1px;
+    }
+
+    &:first-child a {
+      @include border-top-radius(var(--bs-border-radius));
+      border-top-width: 1px;
+    }
+    &:last-child a {
+      @include border-bottom-radius(var(--bs-border-radius));
+    }
   }
 
-  &:first-child a {
-    @include border-top-radius(var(--bs-border-radius));
-    border-top-width: 1px;
+  .DocSearch-Hit-icon {
+    display: flex;
+    align-items: center;
   }
-  &:last-child a {
-    @include border-bottom-radius(var(--bs-border-radius));
+
+  // Fix --docsearch-logo-color that doesn't do anything
+  .DocSearch-Logo svg .cls-1,
+  .DocSearch-Logo svg .cls-2 {
+    fill: var(--docsearch-logo-color);
   }
 }
-
-.DocSearch-Hit-icon {
-  display: flex;
-  align-items: center;
-}
-
-// Fix --docsearch-logo-color that doesn't do anything
-.DocSearch-Logo svg .cls-1,
-.DocSearch-Logo svg .cls-2 {
-  fill: var(--docsearch-logo-color);
-}
diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index edf7db77e8..5ed699f88f 100644
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -2,73 +2,75 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/border-radius" as *;
 
-.bd-sidebar {
-  @include media-breakpoint-up(lg) {
-    position: sticky;
-    top: 5rem;
-    // Override collapse behaviors
-    // stylelint-disable-next-line declaration-no-important
-    display: block !important;
-    height: calc(100vh - 6rem);
-    // Prevent focus styles to be cut off:
-    padding-left: .25rem;
-    margin-left: -.25rem;
-    overflow-y: auto;
-  }
-
-  @include media-breakpoint-down(lg) {
-    .offcanvas-lg {
-      border-right-color: var(--bs-border-color);
-      box-shadow: var(--bs-box-shadow-lg);
-    }
-  }
-}
-
-.bd-links-heading {
-  color: var(--bs-emphasis-color);
-}
-
-.bd-links-subgroup {
-  margin-left: 1.625rem;
-  color: var(--bs-emphasis-color);
-}
-
-.bd-links-nav {
-  // @include media-breakpoint-down(lg) {
-  //   font-size: .875rem;
-  // }
-
-  @include media-breakpoint-between(xs, lg) {
-    column-count: 2;
-    column-gap: 1.5rem;
-
-    .bd-links-group {
-      break-inside: avoid;
+@layer custom {
+  .bd-sidebar {
+    @include media-breakpoint-up(lg) {
+      position: sticky;
+      top: 5rem;
+      // Override collapse behaviors
+      // stylelint-disable-next-line declaration-no-important
+      display: block !important;
+      height: calc(100vh - 6rem);
+      // Prevent focus styles to be cut off:
+      padding-left: .25rem;
+      margin-left: -.25rem;
+      overflow-y: auto;
     }
 
-    .bd-links-span-all {
-      column-span: all;
+    @include media-breakpoint-down(lg) {
+      .offcanvas-lg {
+        border-right-color: var(--bs-border-color);
+        box-shadow: var(--bs-box-shadow-lg);
+      }
     }
   }
-}
 
-.bd-links-link {
-  padding: .1875rem .5rem;
-  margin-top: .125rem;
-  margin-left: 1.125rem;
-  font-size: .875rem;
-  color: var(--bs-body-color);
-  text-decoration: if($link-decoration == none, null, none);
-
-  &:hover,
-  &:focus,
-  &.active {
+  .bd-links-heading {
     color: var(--bs-emphasis-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--bd-sidebar-link-bg);
   }
 
-  &.active {
-    font-weight: 600;
+  .bd-links-subgroup {
+    margin-left: 1.625rem;
+    color: var(--bs-emphasis-color);
+  }
+
+  .bd-links-nav {
+    // @include media-breakpoint-down(lg) {
+    //   font-size: .875rem;
+    // }
+
+    @include media-breakpoint-between(xs, lg) {
+      column-count: 2;
+      column-gap: 1.5rem;
+
+      .bd-links-group {
+        break-inside: avoid;
+      }
+
+      .bd-links-span-all {
+        column-span: all;
+      }
+    }
+  }
+
+  .bd-links-link {
+    padding: .1875rem .5rem;
+    margin-top: .125rem;
+    margin-left: 1.125rem;
+    font-size: .875rem;
+    color: var(--bs-body-color);
+    text-decoration: if($link-decoration == none, null, none);
+
+    &:hover,
+    &:focus,
+    &.active {
+      color: var(--bs-emphasis-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      background-color: var(--bd-sidebar-link-bg);
+    }
+
+    &.active {
+      font-weight: 600;
+    }
   }
 }
diff --git a/site/src/scss/_skippy.scss b/site/src/scss/_skippy.scss
index de5cc5e7f3..ee55bb3be1 100644
--- a/site/src/scss/_skippy.scss
+++ b/site/src/scss/_skippy.scss
@@ -1,10 +1,12 @@
 @use "../../../scss/colors" as *;
 @use "variables" as *;
 
-.skippy {
-  background-color: $bd-purple;
+@layer custom {
+  .skippy {
+    background-color: $bd-purple;
 
-  a {
-    color: $white;
+    a {
+      color: $white;
+    }
   }
 }
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 8a3476f46a..24bfb46075 100644
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -43,121 +43,123 @@
 }
 
 // Shell prompts
-.language-bash .line::before,
-.language-sh .line::before {
-  display: inline-block;
-  color: var(--base03);
-  content: "$ ";
-  user-select: none;
-}
-
-.language-powershell .line::before {
-  display: inline-block;
-  color: var(--base0C);
-  content: "PM> ";
-  user-select: none;
-}
-
-// Token styles
-.token {
-  &.comment,
-  &.prolog,
-  &.doctype,
-  &.cdata {
+@layer custom {
+  .language-bash .line::before,
+  .language-sh .line::before {
+    display: inline-block;
     color: var(--base03);
+    content: "$ ";
+    user-select: none;
   }
 
-  &.punctuation {
-    color: var(--base05);
-  }
-
-  &.property {
-    color: var(--base0A);
-  }
-
-  &.tag {
-    color: var(--base08);
-  }
-
-  &.boolean,
-  &.number {
-    color: var(--base09);
-  }
-
-  &.constant,
-  &.symbol,
-  &.deleted {
-    color: var(--base08);
-  }
-
-  &.attr-name,
-  &.string,
-  &.char,
-  &.builtin,
-  &.inserted {
+  .language-powershell .line::before {
+    display: inline-block;
     color: var(--base0C);
+    content: "PM> ";
+    user-select: none;
   }
 
-  &.operator,
-  &.entity,
-  &.url {
-    color: var(--base05);
-  }
-
-  &.atrule,
-  &.attr-value,
-  &.keyword {
-    color: var(--base0E);
-  }
-
-  &.function {
-    color: var(--base0B);
-  }
-
-  &.selector,
-  &.class-name {
-    color: var(--base07);
-  }
-
-  &.regex,
-  &.important {
-    color: var(--base0A);
-  }
-
-  &.variable {
-    color: var(--base08);
-  }
-
-  &.important,
-  &.bold {
-    font-weight: $font-weight-bold;
-  }
-
-  &.italic {
-    font-style: italic;
-  }
-
-  &.entity {
-    cursor: help;
-  }
-}
-
-.language-diff {
+  // Token styles
   .token {
-    &.deleted {
-      color: $red-400;
-      background-color: transparent;
+    &.comment,
+    &.prolog,
+    &.doctype,
+    &.cdata {
+      color: var(--base03);
     }
-    &.inserted {
-      color: $green-400;
-      background-color: transparent;
-    }
-  }
-}
 
-.language-bash,
-.language-sh {
-  .token.comment {
-    color: var(--base03);
+    &.punctuation {
+      color: var(--base05);
+    }
+
+    &.property {
+      color: var(--base0A);
+    }
+
+    &.tag {
+      color: var(--base08);
+    }
+
+    &.boolean,
+    &.number {
+      color: var(--base09);
+    }
+
+    &.constant,
+    &.symbol,
+    &.deleted {
+      color: var(--base08);
+    }
+
+    &.attr-name,
+    &.string,
+    &.char,
+    &.builtin,
+    &.inserted {
+      color: var(--base0C);
+    }
+
+    &.operator,
+    &.entity,
+    &.url {
+      color: var(--base05);
+    }
+
+    &.atrule,
+    &.attr-value,
+    &.keyword {
+      color: var(--base0E);
+    }
+
+    &.function {
+      color: var(--base0B);
+    }
+
+    &.selector,
+    &.class-name {
+      color: var(--base07);
+    }
+
+    &.regex,
+    &.important {
+      color: var(--base0A);
+    }
+
+    &.variable {
+      color: var(--base08);
+    }
+
+    &.important,
+    &.bold {
+      font-weight: $font-weight-bold;
+    }
+
+    &.italic {
+      font-style: italic;
+    }
+
+    &.entity {
+      cursor: help;
+    }
+  }
+
+  .language-diff {
+    .token {
+      &.deleted {
+        color: $red-400;
+        background-color: transparent;
+      }
+      &.inserted {
+        color: $green-400;
+        background-color: transparent;
+      }
+    }
+  }
+
+  .language-bash,
+  .language-sh {
+    .token.comment {
+      color: var(--base03);
+    }
   }
 }
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 1ddc51e997..27764e686f 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -4,97 +4,99 @@
 
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
-.bd-toc {
-  container-type: inline-size;
+@layer custom {
+  .bd-toc {
+    container-type: inline-size;
 
-  @include media-breakpoint-up(lg) {
-    position: sticky;
-    top: 5rem;
-    right: 0;
-    z-index: 2;
-    height: calc(100vh - 7rem);
-    overflow-y: auto;
-  }
+    @include media-breakpoint-up(lg) {
+      position: sticky;
+      top: 5rem;
+      right: 0;
+      z-index: 2;
+      height: calc(100vh - 7rem);
+      overflow-y: auto;
+    }
 
-  nav {
-    font-size: .875rem;
-    // @include font-size(.875rem);
-
-    ul {
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
+    nav {
+      font-size: .875rem;
+      // @include font-size(.875rem);
 
       ul {
-        padding-left: 1rem;
-      }
-    }
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
 
-    a {
-      display: block;
-      padding: .125rem 0 .125rem .75rem;
-      color: inherit;
-      text-decoration: none;
-      border-left: .125rem solid transparent;
-
-      &:hover,
-      &.active {
-        color: var(--bd-toc-color);
-        border-left-color: var(--bd-toc-color);
+        ul {
+          padding-left: 1rem;
+        }
       }
 
-      &.active {
-        font-weight: 500;
-      }
+      a {
+        display: block;
+        padding: .125rem 0 .125rem .75rem;
+        color: inherit;
+        text-decoration: none;
+        border-left: .125rem solid transparent;
 
-      code {
-        font: inherit;
+        &:hover,
+        &.active {
+          color: var(--bd-toc-color);
+          border-left-color: var(--bd-toc-color);
+        }
+
+        &.active {
+          font-weight: 500;
+        }
+
+        code {
+          font: inherit;
+        }
       }
     }
   }
-}
 
-.bd-toc-toggle {
-  display: flex;
-  align-items: center;
+  .bd-toc-toggle {
+    display: flex;
+    align-items: center;
 
-  @include media-breakpoint-down(sm) {
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  @include media-breakpoint-down(md) {
-    color: var(--bs-body-color);
-    border: 1px solid var(--bs-border-color);
-    @include border-radius(var(--bs-border-radius));
-
-    &:hover,
-    &:focus,
-    &:active,
-    &[aria-expanded="true"] {
-      color: var(--bd-violet);
-      background-color: var(--bs-body-bg);
-      border-color: var(--bd-violet);
+    @include media-breakpoint-down(sm) {
+      justify-content: space-between;
+      width: 100%;
     }
 
-    &:focus,
-    &[aria-expanded="true"] {
-      box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
-    }
-  }
-}
-
-.bd-toc-collapse {
-  @include media-breakpoint-down(md) {
-    nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
-      background-color: var(--bs-tertiary-bg);
+    @include media-breakpoint-down(md) {
+      color: var(--bs-body-color);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));
+
+      &:hover,
+      &:focus,
+      &:active,
+      &[aria-expanded="true"] {
+        color: var(--bd-violet);
+        background-color: var(--bs-body-bg);
+        border-color: var(--bd-violet);
+      }
+
+      &:focus,
+      &[aria-expanded="true"] {
+        box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+      }
     }
   }
 
-  @include media-breakpoint-up(md) {
-    display: block !important; // stylelint-disable-line declaration-no-important
+  .bd-toc-collapse {
+    @include media-breakpoint-down(md) {
+      nav {
+        padding: 1.25rem 1.25rem 1.25rem 1rem;
+        background-color: var(--bs-tertiary-bg);
+        border: 1px solid var(--bs-border-color);
+        @include border-radius(var(--bs-border-radius));
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      display: block !important; // stylelint-disable-line declaration-no-important
+    }
   }
 }