From b9150186bcc0f2732a69ab0ebd83a9b2fb2e6552 Mon Sep 17 00:00:00 2001
From: "Nicholas C. Zakas" <nicholas@humanwhocodes.com>
Date: Fri, 3 Jun 2022 14:14:30 -0700
Subject: [PATCH] docs: Update website UI to latest (#15944)

* docs: Update website UI to latest

* Update docs/src/_includes/components/docs-toc.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/_includes/components/nav-version-switcher.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/_includes/components/nav-version-switcher.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/_includes/components/nav-version-switcher.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/_includes/components/navigation.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Fix hidden attribute

* Update docs/src/_includes/components/theme-switcher.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/_includes/components/theme-switcher.html

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/assets/js/focus-visible.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/assets/js/main.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/assets/js/components-index.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/assets/js/main.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/assets/js/main.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
---
 .gitignore                                    |    3 +-
 .../src/_includes/components/alert.macro.html |   33 +-
 docs/src/_includes/components/docs-index.html |   14 +-
 .../components/nav-version-switcher.html      |   16 +-
 docs/src/_includes/components/navigation.html |    3 +-
 docs/src/_includes/components/rule.macro.html |    6 +-
 docs/src/_includes/components/search.html     |   24 +-
 .../_includes/components/theme-switcher.html  |   10 +-
 .../components/version-switcher.html          |    9 +-
 docs/src/_includes/layouts/components.html    |    2 +-
 docs/src/_includes/layouts/doc.html           |   23 +-
 docs/src/assets/css/components/accordion.css  |   70 -
 docs/src/assets/css/components/alert.css      |   90 -
 .../assets/css/components/breadcrumbs-min.css |   24 -
 .../src/assets/css/components/breadcrumbs.css |    0
 docs/src/assets/css/components/buttons.css    |   61 -
 docs/src/assets/css/components/card.css       |   98 -
 docs/src/assets/css/components/docs-index.css |  103 -
 .../assets/css/components/docs-navigation.css |  102 -
 .../assets/css/components/docs-resources.css  |   55 -
 docs/src/assets/css/components/donations.css  |  198 --
 docs/src/assets/css/components/hero.css       |   43 -
 .../assets/css/components/homepage-hero.css   |  174 --
 docs/src/assets/css/components/homepage.css   |  174 --
 docs/src/assets/css/components/index.css      |   74 -
 .../css/components/language-switcher.css      |   18 -
 docs/src/assets/css/components/languages.css  |   38 -
 .../assets/css/components/navigation-min.css  |    5 -
 docs/src/assets/css/components/navigation.css |   84 -
 .../assets/css/components/pagination-min.css  |   23 -
 docs/src/assets/css/components/pagination.css |   57 -
 docs/src/assets/css/components/person.css     |   98 -
 docs/src/assets/css/components/post-share.css |   37 -
 docs/src/assets/css/components/rules.css      |  121 -
 docs/src/assets/css/components/search-ui.css  |   16 -
 docs/src/assets/css/components/search.css     |   23 -
 docs/src/assets/css/components/slider.css     |  146 --
 .../assets/css/components/social-icons.css    |   16 -
 docs/src/assets/css/components/sponsors.css   |   38 -
 docs/src/assets/css/components/swatches.css   |   40 -
 docs/src/assets/css/components/tabs.css       |   45 -
 .../assets/css/components/theme-switcher.css  |   53 -
 docs/src/assets/css/components/toc-min.css    |    6 -
 docs/src/assets/css/components/toc.css        |   76 -
 docs/src/assets/css/components/tweet-min.css  |   14 -
 docs/src/assets/css/components/tweet.css      |   14 -
 .../css/components/version-switcher.css       |    3 -
 docs/src/assets/css/components/versions.css   |   34 -
 docs/src/assets/css/print.css                 |  161 --
 docs/src/assets/css/styles-min.css            |  376 ---
 docs/src/assets/css/styles.css                | 2203 -----------------
 docs/src/assets/css/tokens/spacing.css        |   52 -
 docs/src/assets/css/tokens/themes.css         |  131 -
 docs/src/assets/css/tokens/typography.css     |   64 -
 docs/src/assets/css/tokens/ui.css             |    5 -
 docs/src/assets/js/main.js                    |   38 +-
 docs/src/assets/js/search.js                  |   70 +-
 docs/src/assets/scss/_docs-typography.scss    |   35 -
 docs/src/assets/scss/_typography.scss         |   93 -
 .../{_carbon-ads.scss => carbon-ads.scss}     |    0
 docs/src/assets/scss/components/alert.scss    |   90 +-
 .../assets/scss/components/docs-index.scss    |   21 +-
 .../scss/components/docs-navigation.scss      |    1 +
 .../scss/components/language-switcher.scss    |   15 +-
 .../{docs-resources.scss => resources.scss}   |    0
 docs/src/assets/scss/components/search.scss   |  139 +-
 .../assets/scss/components/social-icons.scss  |    2 +-
 .../scss/components/theme-switcher.scss       |    6 +-
 docs/src/assets/scss/components/toc.scss      |   28 +-
 .../scss/components/version-switcher.scss     |    4 +-
 .../{_docs-footer.scss => docs-footer.scss}   |    2 +
 .../{_docs-header.scss => docs-header.scss}   |    0
 .../src/assets/scss/{_docs.scss => docs.scss} |   62 +-
 ...te-footer.scss => eslint-site-footer.scss} |    0
 .../{_header.scss => eslint-site-header.scss} |    2 +-
 .../assets/scss/{_forms.scss => forms.scss}   |   13 +-
 .../{_foundations.scss => foundations.scss}   |  102 +
 .../scss/{components => }/languages.scss      |    0
 docs/src/assets/scss/styles.scss              |   30 +-
 ...ghlighter.scss => syntax-highlighter.scss} |    0
 docs/src/assets/scss/tokens/spacing.scss      |   30 +-
 docs/src/assets/scss/tokens/themes.scss       |   39 +-
 .../scss/{_utilities.scss => utilities.scss}  |    0
 .../scss/{components => }/versions.scss       |    0
 84 files changed, 547 insertions(+), 5681 deletions(-)
 delete mode 100644 docs/src/assets/css/components/accordion.css
 delete mode 100644 docs/src/assets/css/components/alert.css
 delete mode 100644 docs/src/assets/css/components/breadcrumbs-min.css
 delete mode 100644 docs/src/assets/css/components/breadcrumbs.css
 delete mode 100644 docs/src/assets/css/components/buttons.css
 delete mode 100644 docs/src/assets/css/components/card.css
 delete mode 100644 docs/src/assets/css/components/docs-index.css
 delete mode 100644 docs/src/assets/css/components/docs-navigation.css
 delete mode 100644 docs/src/assets/css/components/docs-resources.css
 delete mode 100644 docs/src/assets/css/components/donations.css
 delete mode 100644 docs/src/assets/css/components/hero.css
 delete mode 100644 docs/src/assets/css/components/homepage-hero.css
 delete mode 100644 docs/src/assets/css/components/homepage.css
 delete mode 100644 docs/src/assets/css/components/index.css
 delete mode 100644 docs/src/assets/css/components/language-switcher.css
 delete mode 100644 docs/src/assets/css/components/languages.css
 delete mode 100644 docs/src/assets/css/components/navigation-min.css
 delete mode 100644 docs/src/assets/css/components/navigation.css
 delete mode 100644 docs/src/assets/css/components/pagination-min.css
 delete mode 100644 docs/src/assets/css/components/pagination.css
 delete mode 100644 docs/src/assets/css/components/person.css
 delete mode 100644 docs/src/assets/css/components/post-share.css
 delete mode 100644 docs/src/assets/css/components/rules.css
 delete mode 100644 docs/src/assets/css/components/search-ui.css
 delete mode 100644 docs/src/assets/css/components/search.css
 delete mode 100644 docs/src/assets/css/components/slider.css
 delete mode 100644 docs/src/assets/css/components/social-icons.css
 delete mode 100644 docs/src/assets/css/components/sponsors.css
 delete mode 100644 docs/src/assets/css/components/swatches.css
 delete mode 100644 docs/src/assets/css/components/tabs.css
 delete mode 100644 docs/src/assets/css/components/theme-switcher.css
 delete mode 100644 docs/src/assets/css/components/toc-min.css
 delete mode 100644 docs/src/assets/css/components/toc.css
 delete mode 100644 docs/src/assets/css/components/tweet-min.css
 delete mode 100644 docs/src/assets/css/components/tweet.css
 delete mode 100644 docs/src/assets/css/components/version-switcher.css
 delete mode 100644 docs/src/assets/css/components/versions.css
 delete mode 100644 docs/src/assets/css/print.css
 delete mode 100644 docs/src/assets/css/styles-min.css
 delete mode 100644 docs/src/assets/css/styles.css
 delete mode 100644 docs/src/assets/css/tokens/spacing.css
 delete mode 100644 docs/src/assets/css/tokens/themes.css
 delete mode 100644 docs/src/assets/css/tokens/typography.css
 delete mode 100644 docs/src/assets/css/tokens/ui.css
 delete mode 100644 docs/src/assets/scss/_docs-typography.scss
 delete mode 100644 docs/src/assets/scss/_typography.scss
 rename docs/src/assets/scss/{_carbon-ads.scss => carbon-ads.scss} (100%)
 rename docs/src/assets/scss/components/{docs-resources.scss => resources.scss} (100%)
 rename docs/src/assets/scss/{_docs-footer.scss => docs-footer.scss} (93%)
 rename docs/src/assets/scss/{_docs-header.scss => docs-header.scss} (100%)
 rename docs/src/assets/scss/{_docs.scss => docs.scss} (73%)
 rename docs/src/assets/scss/{_site-footer.scss => eslint-site-footer.scss} (100%)
 rename docs/src/assets/scss/{_header.scss => eslint-site-header.scss} (100%)
 rename docs/src/assets/scss/{_forms.scss => forms.scss} (87%)
 rename docs/src/assets/scss/{_foundations.scss => foundations.scss} (79%)
 rename docs/src/assets/scss/{components => }/languages.scss (100%)
 rename docs/src/assets/scss/{_prism-syntax-highlighter.scss => syntax-highlighter.scss} (100%)
 rename docs/src/assets/scss/{_utilities.scss => utilities.scss} (100%)
 rename docs/src/assets/scss/{components => }/versions.scss (100%)

diff --git a/.gitignore b/.gitignore
index f1fee6a299c..080af565146 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,5 +28,6 @@ yarn.lock
 package-lock.json
 pnpm-lock.yaml
 
-# Docs site output
+# Docs site
 _site
+/docs/src/assets/css
diff --git a/docs/src/_includes/components/alert.macro.html b/docs/src/_includes/components/alert.macro.html
index f07195a812f..91e3a94a8b8 100644
--- a/docs/src/_includes/components/alert.macro.html
+++ b/docs/src/_includes/components/alert.macro.html
@@ -1,5 +1,5 @@
 {%- macro warning(params) -%}
-<div role="note" class="alert alert--warning">
+<aside role="note" class="alert alert--warning">
     <svg class="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
         <path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
@@ -8,18 +8,11 @@
         <div class="alert__text">{{ params.text }}</div>
         <a href="{{ params.url }}" class="alert__learn-more">Learn more</a>
     </div>
-
-    <!-- <button class="alert__remove-btn" hidden>
-        <span class="visually-hidden">Remove</span>
-        <svg width="13" height="12" viewBox="0 0 13 12" fill="none" aria-hidden="true" focusable="false">
-            <path d="M11.5 1L1.5 11M1.5 1L11.5 11" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </button> -->
-</div>
+</aside>
 {%- endmacro -%}
 
 {%- macro important(params) -%}
-<div role="note" class="alert alert--important">
+<aside role="note" class="alert alert--important">
     <svg class="alert__icon" aria-hidden="true" focusable="false" width="21" height="18" viewBox="0 0 21 18" fill="none">
         <path d="M10.4998 6.66666V9.99999M10.4998 13.3333H10.5081M9.0748 2.38333L2.01647 14.1667C1.87094 14.4187 1.79394 14.7044 1.79313 14.9954C1.79231 15.2864 1.86771 15.5726 2.01183 15.8254C2.15594 16.0783 2.36374 16.2889 2.61456 16.4365C2.86538 16.5841 3.15047 16.6635 3.44147 16.6667H17.5581C17.8491 16.6635 18.1342 16.5841 18.385 16.4365C18.6359 16.2889 18.8437 16.0783 18.9878 15.8254C19.1319 15.5726 19.2073 15.2864 19.2065 14.9954C19.2057 14.7044 19.1287 14.4187 18.9831 14.1667L11.9248 2.38333C11.7762 2.13841 11.5671 1.93593 11.3175 1.7954C11.0679 1.65487 10.7862 1.58104 10.4998 1.58104C10.2134 1.58104 9.93175 1.65487 9.68214 1.7954C9.43254 1.93593 9.22336 2.13841 9.0748 2.38333Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
@@ -28,18 +21,11 @@
         <div class="alert__text">{{ params.text }}</div>
         <a href="{{ params.url }}" class="alert__learn-more">Learn more</a>
     </div>
-
-    <!-- <button class="alert__remove-btn" hidden>
-        <span class="visually-hidden">Remove</span>
-        <svg width="13" height="12" viewBox="0 0 13 12" fill="none" aria-hidden="true" focusable="false">
-            <path d="M11.5 1L1.5 11M1.5 1L11.5 11" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </button> -->
-</div>
+</aside>
 {%- endmacro -%}
 
 {%- macro tip(params) -%}
-<div role="note" class="alert alert--tip">
+<aside role="note" class="alert alert--tip">
     <svg class="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
         <path d="M17.8333 9.23333V10C17.8323 11.797 17.2504 13.5456 16.1744 14.9849C15.0985 16.4241 13.5861 17.4771 11.8628 17.9866C10.1395 18.4961 8.29771 18.4349 6.61205 17.8122C4.92639 17.1894 3.4872 16.0384 2.50912 14.5309C1.53105 13.0234 1.06648 11.2401 1.18472 9.44693C1.30296 7.6538 1.99766 5.94694 3.16522 4.58089C4.33278 3.21485 5.91064 2.26282 7.66348 1.86679C9.41632 1.47076 11.2502 1.65195 12.8917 2.38333M17.8333 3.33333L9.49999 11.675L6.99999 9.175" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
@@ -48,12 +34,5 @@
         <div class="alert__text">{{ params.text }}</div>
         <a href="{{ params.url }}" class="alert__learn-more">Learn more</a>
     </div>
-
-    <!-- <button class="alert__remove-btn" hidden>
-        <span class="visually-hidden">Remove</span>
-        <svg width="13" height="12" viewBox="0 0 13 12" fill="none" aria-hidden="true" focusable="false">
-            <path d="M11.5 1L1.5 11M1.5 1L11.5 11" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </button> -->
-</div>
+</aside>
 {%- endmacro -%}
diff --git a/docs/src/_includes/components/docs-index.html b/docs/src/_includes/components/docs-index.html
index 90425816582..c915def4b62 100644
--- a/docs/src/_includes/components/docs-index.html
+++ b/docs/src/_includes/components/docs-index.html
@@ -11,15 +11,19 @@
 {%- endmacro %}
 
 <nav class="docs-index" id="docs-index">
-    <button class="docs-index-toggle" aria-label="Index" id="js-docs-index-toggle" hidden>
+    <button class="docs-index-toggle" id="js-docs-index-toggle" hidden>
         Index
-        <svg width="20" height="20" viewBox="20 20 60 60">
+        <svg width="20" height="20" viewBox="20 20 60 60" aria-hidden="true" focusable="false">
             <path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
             <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
             <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
         </svg>
     </button>
-    <ul class="docs-index__list" id="js-docs-index-list">
-        {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
-    </ul>
+    <div class="docs__index__panel" id="js-docs-index-panel">
+        {% include 'components/search.html' %}
+
+        <ul class="docs-index__list" id="js-docs-list">
+            {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
+        </ul>
+    </div>
 </nav>
diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html
index 6481d4256d4..67a76edd9bc 100644
--- a/docs/src/_includes/components/nav-version-switcher.html
+++ b/docs/src/_includes/components/nav-version-switcher.html
@@ -1,23 +1,21 @@
+<!-- only displayed in mobile; be sure to update version-switcher.html too -->
 <div class="version-switcher">
     <a href="/versions/" class="switcher-fallback">Versions</a>
 
     <div hidden role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
-        <span id="nav-version-switcher-label" hidden>Language Switcher</span>
+        <span id="nav-version-switcher-label" hidden>Version Switcher</span>
         <div class="infobox visually-hidden" id="nav-version-infobox">
-            Selecting a language will take you to the ESLint Web site in that language.
+            Selecting a version will take you to the chosen version of the ESLint docs.
         </div>
 
         <label class="switcher__label label--block" for="version-select">
-            Version
+            <span class="label__text">Version</span>
         </label>
-        <select name="version selector" id="nav-version-select" aria-describedby="version-infobox" class="c-custom-select switcher__select auto-switcher">
-            <option value="{{ eslintVersion }}" selected>
-                v{{ eslintVersion }}
-            </option>
+        <select name="version selector" id="nav-version-select" aria-describedby="nav-version-infobox" class="c-custom-select switcher__select auto-switcher">
+            <option value="{{ eslintVersion }}" selected>v{{ eslintVersion }}</option>
             {% for version in versions.items %}
             <option value="{{ version.number }}"
-                    data-url="{{ version.url }}"
-                    {% if config.version == version.number %} selected {% endif %}>
+                    data-url="{{ version.url }}">
                 v{{ version.number }}
             </option>
             {% endfor %}
diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
index 2aedb4bf664..975e70c97bd 100644
--- a/docs/src/_includes/components/navigation.html
+++ b/docs/src/_includes/components/navigation.html
@@ -1,6 +1,6 @@
 <nav class="docs-site-nav" aria-label="Main">
     <div class="flexer">
-        <a href="https://eslint.org/donate" class="c-btn c-btn--primary donate-link">Donate</a>
+        <a href="/donate/" class="c-btn c-btn--primary donate-link">Donate</a>
         <button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle" hidden>
             <svg width="20" height="20" viewBox="20 20 60 60">
                 <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
@@ -19,7 +19,6 @@
         </ul>
         <div class="mobile-only">
             {% include 'components/nav-version-switcher.html' %}
-            {% include 'components/nav-search.html' %}
         </div>
     </div>
 </nav>
diff --git a/docs/src/_includes/components/rule.macro.html b/docs/src/_includes/components/rule.macro.html
index aa84e3448c9..bcb5c03a698 100644
--- a/docs/src/_includes/components/rule.macro.html
+++ b/docs/src/_includes/components/rule.macro.html
@@ -7,7 +7,7 @@
             <span class="rule__status">deprecated</span>
         </p>
         {%- if params.replacedBy|length -%}
-        <p class="rule__description">Replaced by <a href="{{ '/rules' | url }}/{{ params.replacedBy }}"><code>{{ params.replacedBy }}</code></a></p>
+        <p class="rule__description">Replaced by <a href="{{ ['/rules/', params.replacedBy] | join | url }}"><code>{{ params.replacedBy }}</code></a></p>
         {%- else -%}<p class="rule__description">{{ params.description }}</p>
         {%- endif -%}
         {%- elseif params.removed == true -%}
@@ -16,11 +16,11 @@
             <span class="rule__status">removed</span>
         </p>
         {%- if params.replacedBy -%}
-        <p class="rule__description">Replaced by <a href="{{ '/rules' | url }}/{{ params.replacedBy }}"><code>{{ params.replacedBy }}</code></a></p>
+        <p class="rule__description">Replaced by <a href="{{ ['/rules/', params.replacedBy] | join | url }}"><code>{{ params.replacedBy }}</code></a></p>
         {%- else -%}<p class="rule__description">{{ params.description }}</p>
         {%- endif -%}
         {%- else -%}
-        <a href="{{ '/rules' | url }}/{{ params.name }}" class="rule__name">{{ params.name }}</a>
+        <a href="{{ ['/rules/', params.name] | join | url }}" class="rule__name">{{ params.name }}</a>
         <p class="rule__description">{{ params.description }}</p>
         {%- endif -%}
     </div>
diff --git a/docs/src/_includes/components/search.html b/docs/src/_includes/components/search.html
index 6f86571b740..336385869b8 100644
--- a/docs/src/_includes/components/search.html
+++ b/docs/src/_includes/components/search.html
@@ -1,12 +1,22 @@
 <div role="region" aria-labelledby="search-label" class="search">
     <label for="search" class="label--block">
         <span class="label__text" id="search-label">Search</span>
-        <div class="search__input-wrapper">
-            <svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
-                <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-            <input type="search" id="search" class="search__input" autocomplete="off">
-        </div>
     </label>
-    <div id="search-results"></div>
+    <div class="search__input-wrapper">
+        <svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
+            <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <p class="visually-hidden" id="search-hint">Results will be shown and updated as you type.</p>
+        <div class="search__inner-input-wrapper">
+            <input type="search" id="search" class="search__input" autocomplete="off" aria-describedby="search-hint" pattern="\S+">
+            <button class="search__clear-btn" id="search__clear-btn" hidden>
+                <span class="visually-hidden">Clear search</span>
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
+                    <path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div id="search-results-announcement" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
+    <div id="search-results" class="search-results"></div>
 </div>
diff --git a/docs/src/_includes/components/theme-switcher.html b/docs/src/_includes/components/theme-switcher.html
index 7604dc5f705..8100136da41 100644
--- a/docs/src/_includes/components/theme-switcher.html
+++ b/docs/src/_includes/components/theme-switcher.html
@@ -1,13 +1,13 @@
 <div role="region" class="theme-switcher" aria-labelledby="theme-switcher-label" id="js-theme-switcher" hidden>
-    <h2 class="theme-switcher-label" id="theme-switcher-label">Theme <span class="visually-hidden">Switcher</span></h2>
+    <h2 class="theme-switcher-label visually-hidden" id="theme-switcher-label">Theme <span class="visually-hidden">Switcher</span></h2>
     <div class="theme-switcher__buttons">
         <button class="theme-switcher__button js-toggle-button" id="light-theme-toggle" data-theme="light">
-            <span class="visually-hidden">Light</span>
-            <svg class="theme-switcher__icon" focusable="false" width="22" height="22" role="img" aria-label="Sun" viewBox="0 0 100 100" aria-hidden="true"><g transform="translate(0,-952.36218)"><path d="m 50,955.36218 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z m 31.125,12.875 c 0.76777,0 1.50798,0.3205 2.09375,0.9062 1.17159,1.1717 1.17157,3.0472 0,4.2188 l -11.3125,11.3125 c -1.17157,1.1716 -3.04714,1.1716 -4.21875,0 -1.17153,-1.1715 -1.17158,-3.0472 0,-4.2187 L 79,969.14338 c 0.58579,-0.5857 1.35723,-0.9062 2.125,-0.9062 z m -62.25,0 c 0.76777,0 1.53921,0.3205 2.125,0.9062 l 11.3125,11.3126 c 1.17158,1.1715 1.17153,3.0472 0,4.2187 -1.17161,1.1716 -3.04718,1.1716 -4.21875,0 l -11.3125,-11.3125 c -1.17157,-1.1716 -1.17159,-3.0471 0,-4.2188 0.58577,-0.5857 1.32598,-0.9062 2.09375,-0.9062 z M 50,983.36218 c 10.45786,0 19,8.5422 19,19.00002 0,10.4579 -8.54214,19 -19,19 -10.45784,0 -19,-8.5421 -19,-19 0,-10.45792 8.54216,-19.00002 19,-19.00002 z m 0,6 c -7.21516,0 -13,5.7848 -13,13.00002 0,7.2152 5.78484,13 13,13 7.21518,0 13,-5.7848 13,-13 0,-7.21522 -5.78482,-13.00002 -13,-13.00002 z m 44,10 c 1.65686,0 2.99999,1.34322 3,3.00002 -1e-5,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -3,-1.3431 -3,-3 0,-1.6568 1.34316,-3.00002 3,-3.00002 l 16,0 z m -72,0 c 1.65684,0 3,1.34322 3,3.00002 0,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -2.99999,-1.3431 -3,-3 1e-5,-1.6568 1.34314,-3.00002 3,-3.00002 l 16,0 z m 47.8125,19.81252 c 0.76777,0 1.50797,0.2892 2.09375,0.875 l 11.3125,11.3125 c 1.17158,1.1716 1.17152,3.0472 0,4.2188 -1.1716,1.1715 -3.04718,1.1715 -4.21875,0 l -11.3125,-11.3126 c -1.17157,-1.1715 -1.1716,-3.0471 0,-4.2187 0.58577,-0.5858 1.35723,-0.875 2.125,-0.875 z m -39.625,0 c 0.76777,0 1.53923,0.2892 2.125,0.875 1.1716,1.1716 1.17157,3.0472 0,4.2187 L 21,1035.581 c -1.17157,1.1715 -3.04715,1.1715 -4.21875,0 -1.17152,-1.1716 -1.17158,-3.0472 0,-4.2188 l 11.3125,-11.3125 c 0.58578,-0.5858 1.32598,-0.875 2.09375,-0.875 z M 50,1027.3622 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z" fill="currentColor" fill-opacity="1" stroke="none"></path></g></svg>
+            <svg class="theme-switcher__icon" focusable="false" width="22" height="22" viewBox="0 0 100 100" aria-hidden="true"><g transform="translate(0,-952.36218)"><path d="m 50,955.36218 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z m 31.125,12.875 c 0.76777,0 1.50798,0.3205 2.09375,0.9062 1.17159,1.1717 1.17157,3.0472 0,4.2188 l -11.3125,11.3125 c -1.17157,1.1716 -3.04714,1.1716 -4.21875,0 -1.17153,-1.1715 -1.17158,-3.0472 0,-4.2187 L 79,969.14338 c 0.58579,-0.5857 1.35723,-0.9062 2.125,-0.9062 z m -62.25,0 c 0.76777,0 1.53921,0.3205 2.125,0.9062 l 11.3125,11.3126 c 1.17158,1.1715 1.17153,3.0472 0,4.2187 -1.17161,1.1716 -3.04718,1.1716 -4.21875,0 l -11.3125,-11.3125 c -1.17157,-1.1716 -1.17159,-3.0471 0,-4.2188 0.58577,-0.5857 1.32598,-0.9062 2.09375,-0.9062 z M 50,983.36218 c 10.45786,0 19,8.5422 19,19.00002 0,10.4579 -8.54214,19 -19,19 -10.45784,0 -19,-8.5421 -19,-19 0,-10.45792 8.54216,-19.00002 19,-19.00002 z m 0,6 c -7.21516,0 -13,5.7848 -13,13.00002 0,7.2152 5.78484,13 13,13 7.21518,0 13,-5.7848 13,-13 0,-7.21522 -5.78482,-13.00002 -13,-13.00002 z m 44,10 c 1.65686,0 2.99999,1.34322 3,3.00002 -1e-5,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -3,-1.3431 -3,-3 0,-1.6568 1.34316,-3.00002 3,-3.00002 l 16,0 z m -72,0 c 1.65684,0 3,1.34322 3,3.00002 0,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -2.99999,-1.3431 -3,-3 1e-5,-1.6568 1.34314,-3.00002 3,-3.00002 l 16,0 z m 47.8125,19.81252 c 0.76777,0 1.50797,0.2892 2.09375,0.875 l 11.3125,11.3125 c 1.17158,1.1716 1.17152,3.0472 0,4.2188 -1.1716,1.1715 -3.04718,1.1715 -4.21875,0 l -11.3125,-11.3126 c -1.17157,-1.1715 -1.1716,-3.0471 0,-4.2187 0.58577,-0.5858 1.35723,-0.875 2.125,-0.875 z m -39.625,0 c 0.76777,0 1.53923,0.2892 2.125,0.875 1.1716,1.1716 1.17157,3.0472 0,4.2187 L 21,1035.581 c -1.17157,1.1715 -3.04715,1.1715 -4.21875,0 -1.17152,-1.1716 -1.17158,-3.0472 0,-4.2188 l 11.3125,-11.3125 c 0.58578,-0.5858 1.32598,-0.875 2.09375,-0.875 z M 50,1027.3622 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z" fill="currentColor" fill-opacity="1" stroke="none"></path></g></svg>
+            <span>Light</span>
         </button>
         <button class="theme-switcher__button js-toggle-button" id="dark-theme-toggle" data-theme="dark">
-            <span class="visually-hidden">Dark</span>
-            <svg class="theme-switcher__icon" focusable="false" width="22" height="22" role="img" aria-label="Moon" viewBox="0 0 100 100" aria-hidden="true"><g transform="translate(0,-952.36218)"><path d="m 35.377874,961.36325 a 3.0003,3.0003 0 0 0 -0.9063,0.1875 c -16.1759,5.9947 -25.4686997,21.7109 -25.4686997,39.59375 0,23.2769 18.9104997,42.2187 42.1873997,42.2187 17.8829,0 33.6304,-9.324 39.625,-25.5 a 3.0003,3.0003 0 0 0 -3.9374,-3.8125 c -4.0936,1.6462 -8.5949,2.5 -13.3438,2.5 -19.5969,0 -37.7188,-18.15315 -37.7188,-37.74995 0,-4.7489 0.8226,-9.2504 2.4688,-13.3437 a 3.0003,3.0003 0 0 0 -2.9062,-4.0938 z m -4.6563,8.7188 c -0.5822,2.8241 -0.9063,5.7363 -0.9063,8.7187 0,23.21085 20.5079,43.74995 43.7188,43.74995 2.9824,0 5.8946,-0.3553 8.7188,-0.9375 -6.2657,10.0487 -17.6431,15.75 -31.0626,15.75 -20.0342,0 -36.1874,-16.1844 -36.1874,-36.2187 0,-13.42105 5.6679,-24.79725 15.7187,-31.06245 z" fill="currentColor" fill-opacity="1" stroke="none"></path></g></svg>
+            <svg class="theme-switcher__icon" focusable="false" width="22" height="22" viewBox="0 0 100 100" aria-hidden="true"><g transform="translate(0,-952.36218)"><path d="m 35.377874,961.36325 a 3.0003,3.0003 0 0 0 -0.9063,0.1875 c -16.1759,5.9947 -25.4686997,21.7109 -25.4686997,39.59375 0,23.2769 18.9104997,42.2187 42.1873997,42.2187 17.8829,0 33.6304,-9.324 39.625,-25.5 a 3.0003,3.0003 0 0 0 -3.9374,-3.8125 c -4.0936,1.6462 -8.5949,2.5 -13.3438,2.5 -19.5969,0 -37.7188,-18.15315 -37.7188,-37.74995 0,-4.7489 0.8226,-9.2504 2.4688,-13.3437 a 3.0003,3.0003 0 0 0 -2.9062,-4.0938 z m -4.6563,8.7188 c -0.5822,2.8241 -0.9063,5.7363 -0.9063,8.7187 0,23.21085 20.5079,43.74995 43.7188,43.74995 2.9824,0 5.8946,-0.3553 8.7188,-0.9375 -6.2657,10.0487 -17.6431,15.75 -31.0626,15.75 -20.0342,0 -36.1874,-16.1844 -36.1874,-36.2187 0,-13.42105 5.6679,-24.79725 15.7187,-31.06245 z" fill="currentColor" fill-opacity="1" stroke="none"></path></g></svg>
+            <span>Dark</span>
         </button>
     </div>
 </div>
diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index 0d28ba7dc3a..e3431fbb932 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,19 +1,18 @@
+<!-- only displayed on desktop; be sure to update nav-version-switcher.html too -->
 <div class="version-switcher">
     <a href="/versions/" class="switcher-fallback">Versions</a>
 
     <div hidden role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
         <div class="infobox visually-hidden" id="version-infobox">
-            Selecting a version will take you to the ESLint Web site for that version.
+            Selecting a version will take you to the chosen version of the ESLint docs.
         </div>
 
         <label class="switcher__label label--block" for="version-select">
-            Version
+            <span class="label__text">Version</span>
         </label>
         <select name="version selector" id="version-select" aria-describedby="version-infobox" class="c-custom-select switcher__select auto-switcher">
-            <option value="{{ eslintVersion }}" selected>
-                v{{ eslintVersion }}
-            </option>
+            <option value="{{ eslintVersion }}" selected>v{{ eslintVersion }}</option>
             {% for version in versions.items %}
             <option value="{{ version.number }}"
                     data-url="{{ version.url }}">
diff --git a/docs/src/_includes/layouts/components.html b/docs/src/_includes/layouts/components.html
index 208186cb07d..07670f8e0dc 100644
--- a/docs/src/_includes/layouts/components.html
+++ b/docs/src/_includes/layouts/components.html
@@ -27,7 +27,7 @@
             <ul class="index__list" id="js-index-list">
                 {% for item in collections.library %}
                 <li class="index__item">
-                    <a href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url,
+                    <a href="{{ item.url | url }}" {{ helpers.getLinkActiveState(item.url,
                     page.url) | safe }}>{{ item.data.title }}</a>
                 </li>
                 {% endfor %}
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index 941a880db5e..608d68cfcfc 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -5,10 +5,9 @@
 {% include "partials/docs-header.html" %}
 
 <div class="docs-wrapper">
-    <div class="docs-left-sidebar">
+    <div class="docs-nav">
         <div class="desktop-only">
             {% include 'components/version-switcher.html' %}
-            {% include 'components/search.html' %}
         </div>
             {% include 'components/docs-index.html' %}
     </div>
@@ -48,20 +47,24 @@ <h2 id="resources">Resources</h2>
 
     <div class="docs-content">
         <main id="main" tabindex="-1" class="docs-main">
-            <h1>{{ title }}</h1>
-            {% include 'components/docs-toc.html' %}
-
-            {{ all_content | safe }}
+            <div class="docs-main__content">
+                <h1>{{ title }}</h1>
+                {% include 'components/docs-toc.html' %}
+                {{ all_content | safe }}
+            </div>
 
             <div class="docs-edit-link">
                 <a href="{{ edit_link }}" class="c-btn c-btn--secondary">Edit this page</a>
             </div>
         </main>
 
-        <div class="docs-right-sidebar">
-            <aside class="docs-ad">
-                {%- include 'partials/carbon-ad.html' -%}
-            </aside>
+        <div class="docs-aside">
+            <div class="docs-aside__content">
+                <aside class="docs-ad">
+                    {%- include 'partials/carbon-ad.html' -%}
+                </aside>
+                {% include 'components/docs-toc.html' %}
+            </div>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
diff --git a/docs/src/assets/css/components/accordion.css b/docs/src/assets/css/components/accordion.css
deleted file mode 100644
index 3b1c0758113..00000000000
--- a/docs/src/assets/css/components/accordion.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.c-accordion__heading {
-  font-size: var(--step-1);
-  font-size: 1.125rem;
-  font-weight: 600;
-  font-family: var(--text-font);
-  color: var(--headings-color); }
-  .accordion-js .c-accordion__heading {
-    margin: 0; }
-  .c-accordion__heading > button {
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    font: inherit;
-    font-size: inherit;
-    font-weight: 500;
-    width: 100%;
-    height: 100%;
-    text-align: left;
-    line-height: 1.5;
-    padding: 0;
-    border-radius: 0;
-    position: relative;
-    border: none;
-    transition: outline 0.1s linear;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-    .c-accordion__heading > button[aria-expanded="true"] {
-      margin-bottom: 0;
-      margin-block-end: 0; }
-    .c-accordion__heading > button svg {
-      flex: none; }
-
-.c-accordion__panel {
-  margin-bottom: 4rem;
-  margin-block-end: 4rem; }
-  .accordion-js .c-accordion__panel {
-    margin-bottom: 0;
-    margin-block-end: 0;
-    padding: .5rem 0;
-    padding-right: 3rem;
-    padding-inline-end: 3rem; }
-    .accordion-js .c-accordion__panel[aria-hidden="true"] {
-      margin-bottom: 0;
-      margin-block-end: 0; }
-    .accordion-js .c-accordion__panel[aria-hidden="false"] {
-      margin-bottom: 2rem;
-      margin-block-end: 2rem; }
-
-/* Styles for the accordion icon */
-.c-accordion .accordion-icon {
-  display: block !important;
-  width: 0.75rem;
-  height: 0.5rem;
-  transform-origin: 50% 50%;
-  margin-left: 3rem;
-  margin-inline-start: 3rem;
-  transition: all 0.1s linear;
-  color: var(--color-neutral-400); }
-
-.c-accordion [aria-expanded="true"] .accordion-icon {
-  -ms-transform: translateY(-50%) rotate(180deg);
-  transform: translateY(-50%) rotate(180deg); }
-
-.c-accordion [aria-hidden="true"] {
-  display: none; }
-
-.c-accordion [aria-hidden="false"] {
-  display: block !important; }
diff --git a/docs/src/assets/css/components/alert.css b/docs/src/assets/css/components/alert.css
deleted file mode 100644
index 0fdff876347..00000000000
--- a/docs/src/assets/css/components/alert.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.alert {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  padding: 1rem;
-  gap: .75rem;
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem;
-  align-items: start;
-  font-size: .875rem;
-  background-color: var(--body-background-color);
-  border-radius: var(--border-radius); }
-  .alert.alert--warning {
-    border: 1px solid var(--color-rose-300); }
-  .alert.alert--important {
-    border: 1px solid var(--color-warning-300); }
-  .alert.alert--tip {
-    border: 1px solid var(--color-success-300); }
-
-[data-theme="dark"] .alert.alert--warning {
-  border: 1px solid var(--color-rose-300); }
-
-[data-theme="dark"] .alert.alert--important {
-  border: 1px solid var(--color-warning-300); }
-
-[data-theme="dark"] .alert.alert--tip {
-  border: 1px solid var(--color-success-300); }
-
-.alert__icon {
-  color: inherit;
-  position: relative;
-  top: 2px;
-  offset-block-start: 2px; }
-
-.alert__type {
-  font-weight: 500;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-
-.alert--warning {
-  color: var(--color-rose-600); }
-
-.alert--important {
-  color: var(--color-warning-600); }
-
-.alert--tip {
-  color: var(--color-success-600); }
-
-[data-theme="dark"] .alert--warning {
-  color: var(--color-rose-400); }
-
-[data-theme="dark"] .alert--important {
-  color: var(--color-warning-400); }
-
-[data-theme="dark"] .alert--tip {
-  color: var(--color-success-400); }
-
-.alert__type {
-  font-weight: 500;
-  margin-bottom: .25rem; }
-  .alert--warning .alert__type {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__type {
-      color: var(--color-rose-300); }
-  .alert--important .alert__type {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__type {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__type {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__type {
-      color: var(--color-success-300); }
-
-.alert__learn-more {
-  display: block;
-  font-weight: 500;
-  margin-top: .75rem;
-  margin-block-start: .75rem; }
-  .alert--warning .alert__learn-more {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__learn-more {
-      color: var(--color-rose-300); }
-  .alert--important .alert__learn-more {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__learn-more {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__learn-more {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__learn-more {
-      color: var(--color-success-300); }
diff --git a/docs/src/assets/css/components/breadcrumbs-min.css b/docs/src/assets/css/components/breadcrumbs-min.css
deleted file mode 100644
index 3cb0a60a70c..00000000000
--- a/docs/src/assets/css/components/breadcrumbs-min.css
+++ /dev/null
@@ -1,24 +0,0 @@
-nav.c-breadcrumbs ol {
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-
-nav.c-breadcrumbs li {
-  display: inline-block;
-  padding: 0.5em 0.25em;
-  position: relative; }
-  nav.c-breadcrumbs li::after {
-    content: "/";
-    color: inherit;
-    display: inline-block;
-    -webkit-margin-start: .5em;
-    margin-inline-start: .5em; }
-  nav.c-breadcrumbs li:last-of-type::after {
-    display: none; }
-  nav.c-breadcrumbs li a {
-    font-weight: bold; }
-    nav.c-breadcrumbs li a[aria-current] {
-      color: inherit;
-      text-decoration: none;
-      background: none;
-      font-weight: normal; }
diff --git a/docs/src/assets/css/components/breadcrumbs.css b/docs/src/assets/css/components/breadcrumbs.css
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/docs/src/assets/css/components/buttons.css b/docs/src/assets/css/components/buttons.css
deleted file mode 100644
index 5292111f095..00000000000
--- a/docs/src/assets/css/components/buttons.css
+++ /dev/null
@@ -1,61 +0,0 @@
-button {
-  border: none;
-  background: none;
-  font: inherit;
-  cursor: pointer;
-  line-height: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center; }
-
-.c-btn {
-  background: none;
-  border: none;
-  font: inherit;
-  font-family: var(--text-font);
-  cursor: pointer;
-  line-height: inherit;
-  font-weight: 500;
-  font-size: var(--step-0);
-  display: inline-flex;
-  padding: .75em 1.125em;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius);
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-btn svg {
-    color: inherit; }
-
-.c-btn--large {
-  font-size: 1.125rem;
-  padding: .88em 1.5em; }
-
-.c-btn--block {
-  display: flex;
-  width: 100%; }
-
-a.c-btn {
-  text-decoration: none;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-  align-items: center; }
-
-.c-btn--primary {
-  background-color: var(--primary-button-background-color);
-  color: var(--primary-button-text-color); }
-  .c-btn--primary:hover {
-    background-color: var(--primary-button-hover-color); }
-
-.c-btn--secondary {
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .c-btn--secondary:hover {
-    background-color: var(--secondary-button-hover-color); }
-
-.c-btn--ghost {
-  color: var(--body-text-color);
-  border: 1px solid var(--border-color); }
-  .c-btn--ghost:hover {
-    border-color: var(--link-color); }
diff --git a/docs/src/assets/css/components/card.css b/docs/src/assets/css/components/card.css
deleted file mode 100644
index 40f0a6503a2..00000000000
--- a/docs/src/assets/css/components/card.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.card {
-  text-align: left;
-  align-self: stretch;
-  display: inline-flex;
-  flex-direction: column;
-  gap: 2rem;
-  flex: none; }
-
-.blog-page .card:first-of-type,
-.card--featured {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap; }
-  @media all and (min-width: 1023px) {
-    .blog-page .card:first-of-type,
-    .card--featured {
-      margin-bottom: var(--space-xl-2xl);
-      margin-block-end: var(--space-xl-2xl); } }
-  .blog-page .card:first-of-type .card__cover,
-  .card--featured .card__cover {
-    flex: 3 1 450px; }
-  .blog-page .card:first-of-type .card__content,
-  .card--featured .card__content {
-    flex: 3 1 225px; }
-
-.card__cover {
-  display: block; }
-  .card__cover img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border-radius);
-    object-fit: cover;
-    aspect-ratio: 7 / 4; }
-
-.card__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column; }
-
-.card .card__title {
-  margin-top: 0;
-  margin-bottom: .5rem;
-  margin-block-start: 0;
-  margin-block-end: .5rem; }
-  .card .card__title a {
-    color: inherit;
-    text-decoration: none; }
-    .card .card__title a:hover {
-      color: var(--link-color); }
-
-.card__teaser {
-  margin-bottom: 2rem;
-  margin-block-end: 2rem;
-  font-size: var(--step-0); }
-
-.card__footer {
-  justify-self: flex-end;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: .75rem; }
-
-.blog-post__author-photo {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%; }
-
-.blog-post__author-name {
-  font-size: var(--step--1);
-  line-height: 1.5;
-  font-weight: 500;
-  color: var(--headings-color); }
-
-.blog-post__publish-date {
-  font-size: var(--step--1);
-  line-height: 1.5; }
-
-.blog-post__category {
-  background-color: var(--body-background-color);
-  border-radius: 1rem; }
-
-.card .badge-group {
-  margin-bottom: 1rem;
-  margin-block-end: 1rem; }
-
-.badge-group {
-  background-color: var(--lightest-background-color);
-  color: var(--link-color);
-  border-radius: 1rem;
-  display: inline-flex;
-  padding: .25rem;
-  font-size: var(--step--1);
-  flex: none;
-  align-self: flex-start; }
-  .badge-group span {
-    display: inline-flex;
-    padding: 0.125rem .5rem; }
diff --git a/docs/src/assets/css/components/docs-index.css b/docs/src/assets/css/components/docs-index.css
deleted file mode 100644
index 58fa7007634..00000000000
--- a/docs/src/assets/css/components/docs-index.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.docs-index a {
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: .5rem .75rem;
-  margin-left: -.75rem;
-  margin-inline-start: -.75rem;
-  color: var(--headings-color); }
-  .docs-index a:hover, .docs-index a[aria-current="true"] {
-    background-color: var(--docs-lightest-background-color);
-    color: var(--link-color); }
-
-.docs-index__item {
-  margin: 0; }
-  .docs-index__item ul ul {
-    padding-left: .75rem; }
-  .docs-index__item[data-has-children] {
-    margin-bottom: .5rem; }
-
-.docs-index > ul > .docs-index__item {
-  margin-top: 1.5rem;
-  margin-block-start: 1.5rem; }
-  .docs-index > ul > .docs-index__item > a {
-    color: var(--icon-color);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: .875rem;
-    font-weight: 500; }
-
-/* Styles for the accordion icon */
-.index-js .index-icon {
-  display: block !important;
-  width: 0.75rem;
-  height: 0.5rem;
-  transform-origin: 50% 50%;
-  transition: all 0.1s linear;
-  color: inherit; }
-
-.index-js [aria-expanded="true"] .index-icon {
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg); }
-
-.index-js [aria-hidden="true"] {
-  display: none; }
-
-.index-js [aria-hidden="false"] {
-  display: block; }
-
-.docs-index__list[data-open="false"] {
-  display: none; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="false"] {
-      display: block; } }
-
-.docs-index__list[data-open="true"] {
-  display: block; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="true"] {
-      display: block; } }
-
-.docs-index-toggle {
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: .5rem;
-  font-weight: 500;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .docs-index-toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .docs-index-toggle {
-      display: none; } }
-  .docs-index-toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-index-toggle #ham-top,
-  .docs-index-toggle #ham-middle,
-  .docs-index-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-index-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-index-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-index-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-index-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-index-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
diff --git a/docs/src/assets/css/components/docs-navigation.css b/docs/src/assets/css/components/docs-navigation.css
deleted file mode 100644
index f32aa044b2f..00000000000
--- a/docs/src/assets/css/components/docs-navigation.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.docs-site-nav {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  grid-column: 1 / -1;
-  grid-row: 1; }
-  .docs-site-nav ul {
-    list-style: none;
-    font-size: var(--step-1);
-    margin-top: 1rem;
-    margin-block-start: 1rem;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-    @media all and (min-width: 1023px) {
-      .docs-site-nav ul {
-        font-size: var(--step-0);
-        margin-top: 0;
-        margin-block-start: 0;
-        margin-bottom: 0;
-        margin-block-end: 0;
-        align-items: center;
-        display: flex; } }
-  .docs-site-nav .flexer {
-    display: flex;
-    justify-self: flex-end;
-    align-self: flex-end; }
-  .docs-site-nav a:not(.c-btn) {
-    text-decoration: none;
-    color: inherit;
-    transition: color .2s linear; }
-    .docs-site-nav a:not(.c-btn):hover {
-      color: var(--link-color); }
-  .docs-site-nav a:not(.c-btn)[aria-current="page"],
-  .docs-site-nav a:not(.c-btn)[aria-current="true"] {
-    color: var(--link-color);
-    text-decoration: none;
-    font-weight: 500; }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel {
-    display: flex;
-    flex-direction: row;
-    justify-content: center; } }
-
-.docs-nav-panel[data-open="false"] {
-  display: none; }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel[data-open="true"] {
-    display: flex;
-    flex-direction: row;
-    justify-content: center; } }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel .mobile-only {
-    display: none; } }
-
-.docs-site-nav-toggle {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  margin-left: .5rem;
-  margin-right: -10px;
-  margin-inline-start: .5rem;
-  margin-inline-end: -10px; }
-  .docs-site-nav-toggle svg {
-    width: 40px;
-    height: 40px;
-    color: var(--headings-color);
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-site-nav-toggle #ham-top,
-  .docs-site-nav-toggle #ham-middle,
-  .docs-site-nav-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-site-nav-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-site-nav-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-@media all and (min-width: 1023px) {
-  .docs-site-nav {
-    flex-direction: row;
-    grid-column: auto;
-    gap: 2rem; }
-    .docs-site-nav ul {
-      display: flex;
-      gap: 2rem;
-      font-size: var(--step-0); }
-      .docs-site-nav ul li {
-        margin-bottom: 0;
-        margin-block-end: 0; }
-    .docs-site-nav .flexer {
-      order: 1; } }
diff --git a/docs/src/assets/css/components/docs-resources.css b/docs/src/assets/css/components/docs-resources.css
deleted file mode 100644
index dd8f8a41c0f..00000000000
--- a/docs/src/assets/css/components/docs-resources.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.resource {
-  display: flex;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  background-color: var(--lightest-background-color);
-  align-items: stretch;
-  overflow: hidden;
-  margin-bottom: .5rem;
-  margin-block-end: .5rem;
-  position: relative;
-  transition: all .2s linear; }
-  .resource:hover {
-    background-color: var(--lighter-background-color); }
-
-.resource__image {
-  flex: 1 0 5.5rem;
-  max-width: 5.5rem;
-  overflow: hidden;
-  padding: .25rem; }
-  .resource__image img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: contain; }
-
-.resource__content {
-  flex: 4;
-  padding: .75rem;
-  align-self: center; }
-
-.resource__title {
-  text-decoration: none;
-  color: var(--headings-color);
-  font-weight: 500;
-  margin-bottom: .125rem; }
-  .resource__title::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    offset-inline-start: 0;
-    top: 0;
-    block-inline-start: 0;
-    width: 100%;
-    height: 100%; }
-
-.resource__domain,
-.resource__domain a {
-  text-decoration: none;
-  color: var(--body-text-color);
-  font-size: .875rem; }
-
-.resource__icon {
-  color: var(--headings-color);
-  margin: 1rem;
-  align-self: center; }
diff --git a/docs/src/assets/css/components/donations.css b/docs/src/assets/css/components/donations.css
deleted file mode 100644
index 6273c1c97c1..00000000000
--- a/docs/src/assets/css/components/donations.css
+++ /dev/null
@@ -1,198 +0,0 @@
-.donations-title {
-  font-size: inherit;
-  color: inherit;
-  font: inherit;
-  text-align: center;
-  margin-top: var(--space-l-2xl);
-  margin-block-start: var(--space-l-2xl); }
-
-ul.donations-list {
-  margin-top: var(--space-l-2xl);
-  display: grid;
-  grid-gap: 0 2rem;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  margin-bottom: 0;
-  margin-block-end: 0;
-  align-items: stretch; }
-  ul.donations-list .donations-item {
-    display: flex;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-
-.donation {
-  width: 100%;
-  height: 100%;
-  font-size: var(--step--1);
-  flex: none;
-  border-radius: var(--border-radius);
-  padding: 1rem;
-  background-color: var(--lightest-background-color);
-  display: grid;
-  grid-gap: 1.5rem 2rem;
-  grid-template-columns: auto 1fr 0;
-  grid-template-rows: auto 1fr 0;
-  align-items: end; }
-  @media all and (min-width: 1023px) {
-    .donation {
-      align-items: center;
-      grid-template-columns: auto 1fr auto; } }
-
-.donation__sponsor-name {
-  color: var(--headings-color);
-  font-weight: 500; }
-
-.donation__content {
-  grid-column: 1 / -1; }
-
-.donation__amount {
-  grid-column: 3 / 4;
-  grid-row: 1;
-  justify-self: end;
-  white-space: nowrap; }
-
-.donation__sponsor-name,
-.donation__date {
-  margin-bottom: 0;
-  margin-block-end: 0; }
-
-.donation__sponsor-logo {
-  width: 2.5rem;
-  height: 2.5rem;
-  object-fit: cover;
-  border-radius: var(--border-radius); }
-
-.donation-plan {
-  border: 1px solid var(--divider-color);
-  border-radius: var(--border-radius);
-  margin-bottom: 2rem;
-  box-shadow: var(--shadow-lg); }
-
-.donation-plan__header {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  grid-gap: 1.5rem;
-  padding: 2rem 2rem 1.5rem; }
-  @media all and (max-width: 640px) {
-    .donation-plan__header img {
-      width: 3rem; } }
-
-ul.donation-plan__features li {
-  margin-bottom: 1rem;
-  margin-block-start: 1rem;
-  display: flex;
-  align-items: start; }
-  ul.donation-plan__features li .c-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-right: .75rem;
-    margin-inline-end: .75rem; }
-
-.donation-plan__platform-name {
-  margin-bottom: .25rem;
-  margin-block-end: .25rem;
-  font-size: var(--step-2); }
-
-.donation-plan__description {
-  margin-bottom: 0;
-  margin-block-end: 0; }
-
-.donation-plan__footer .c-btn {
-  align-items: c; }
-  .donation-plan__footer .c-btn svg {
-    margin-top: -.1rem;
-    margin-block-start: -.1rem; }
-
-ul.donation-plan__features,
-.donation-plan__footer {
-  padding: 2rem; }
-
-.donation-plan__header {
-  padding: 2rem 2rem 1.5rem; }
-
-@media all and (max-width: 640px) {
-  ul.donation-plan__features,
-  .donation-plan__footer {
-    padding: 2rem 1rem; }
-  .donation-plan__header {
-    padding: 2rem 1rem 1.5rem; } }
-
-.donation-tiers {
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: 2rem;
-  margin: 0;
-  padding: 0; }
-
-.donation-tiers__item {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-gap: 2rem;
-  padding: 2rem;
-  margin-bottom: 2rem;
-  margin-block-end: 2rem;
-  box-shadow: var(--shadow-lg);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color); }
-  @media all and (max-width: 640px) {
-    .donation-tiers__item {
-      padding: 2rem 1rem; } }
-  .donation-tiers__item .c-btn {
-    text-align: center;
-    font-size: .875rem; }
-  .donation-tiers__item .c-btn--block:not(:last-of-type) {
-    margin-bottom: 1rem;
-    margin-block-end: 1rem; }
-  .donation-tiers__item.all-others {
-    all: inherit;
-    display: block;
-    grid-column: -1 / 1;
-    text-align: center; }
-
-.donation-tiers__title {
-  margin: 0;
-  color: var(--link-color);
-  font-size: var(--step-0);
-  text-align: center;
-  font-family: var(--text-font);
-  font-weight: normal; }
-  .donation-tiers__title span {
-    display: block;
-    margin-bottom: .5rem;
-    margin-block-end: .5rem; }
-  .all-others .donation-tiers__title {
-    margin-bottom: .5rem;
-    margin-block-end: .5rem; }
-    .all-others .donation-tiers__title span {
-      font-weight: 500;
-      display: inline; }
-
-.donation-tiers__title__value {
-  color: var(--headings-color);
-  font-size: var(--step-3);
-  font-family: var(--display-font); }
-  .all-others .donation-tiers__title__value {
-    all: inherit; }
-
-.donation-tiers__title__freq {
-  color: var(--body-text-color);
-  font-weight: 400; }
-  .all-others .donation-tiers__title__freq {
-    all: inherit; }
-
-.donation-tiers__item__description {
-  justify-self: baseline;
-  margin-bottom: 2rem;
-  margin-block-end: 2rem; }
-
-.donation-tiers--others {
-  text-align: center;
-  margin-top: var(--space-l-2xl);
-  margin-block-start: var(--space-l-2xl); }
-  .donation-tiers--others p {
-    margin-bottom: .5rem;
-    margin-block-end: .5rem; }
-  .donation-tiers--others .c-btn {
-    margin-top: 1rem;
-    margin-block-start: 1rem; }
diff --git a/docs/src/assets/css/components/hero.css b/docs/src/assets/css/components/hero.css
deleted file mode 100644
index ecb27abf059..00000000000
--- a/docs/src/assets/css/components/hero.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@media all and (min-width: 800px) {
-  .hero .grid {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-gap: 2rem;
-    align-items: center; } }
-
-.hero .grid .span-1-7 {
-  grid-column: 1 / 2; }
-
-.hero .grid .span-10-12 {
-  grid-column: 2 / 3;
-  justify-self: end; }
-
-.hero {
-  border-bottom: 1px solid var(--divider-color);
-  border-block-end: 1px solid var(--divider-color);
-  background-color: var(--hero-background-color); }
-  @media all and (min-width: 800px) {
-    .hero {
-      min-height: calc(285px + var(--space-xl-4xl)); } }
-  .hero .content-container {
-    padding: var(--space-xl-4xl) 0;
-    margin: 0; }
-  .hero > .content-container {
-    margin: 0 auto;
-    padding: 0 calc(1rem + 1vw);
-    padding-bottom: 0;
-    align-items: center; }
-
-.hero--homepage .section-title {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-.hero--homepage .section-supporting-text {
-  margin: 0;
-  font-size: var(--step-1);
-  text-align: left; }
-
-.hero--homepage .eslint-actions {
-  font-size: var(--step-1);
-  margin-top: 3rem;
-  margin-block-start: 3rem; }
diff --git a/docs/src/assets/css/components/homepage-hero.css b/docs/src/assets/css/components/homepage-hero.css
deleted file mode 100644
index 815fd9e9f3c..00000000000
--- a/docs/src/assets/css/components/homepage-hero.css
+++ /dev/null
@@ -1,174 +0,0 @@
-.problems {
-  display: inline-block;
-  position: relative; }
-
-.eslint-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  width: 100%;
-  gap: 1rem; }
-  @media all and (min-width: 640px) {
-    .eslint-actions {
-      flex-direction: row; } }
-
-.eslint-install-code-wrapper {
-  position: relative; }
-
-.eslint-install-code {
-  display: inline-flex;
-  align-items: center;
-  gap: 1rem;
-  background-color: var(--lightest-background-color);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  padding: .75rem 1.25rem .75rem 1rem;
-  white-space: nowrap;
-  margin-top: 1.5rem;
-  margin-block-start: 1.5rem;
-  overflow-x: auto;
-  max-width: 100%;
-  color: var(--headings-color); }
-  [data-theme="dark"] .eslint-install-code {
-    background-color: var(--color-neutral-700); }
-  .eslint-install-code code {
-    color: var(--headings-color); }
-  .eslint-install-code input {
-    all: unset;
-    min-width: 30ch;
-    color: inherit;
-    font-family: var(--mono-font); }
-    .eslint-install-code input::selection {
-      background-color: #fff;
-      color: var(--body-text-color); }
-
-.eslint-install-code__btn .c-icon {
-  color: var(--body-text-color); }
-
-.eslint-install-code__btn:hover .c-icon, .eslint-install-code__btn:focus .c-icon, .eslint-install-code__btn:active .c-icon {
-  color: var(--link-color); }
-
-.eslint-install-code__btn[data-copied="true"] .c-icon {
-  color: var(--link-color); }
-
-.eslint-install-code__announcement {
-  font-size: .875rem;
-  padding: .25rem .75rem;
-  font-size: var(--step--1);
-  border-radius: var(--border-radius);
-  display: block;
-  position: absolute;
-  top: calc(100% + .5rem);
-  offset-block-start: calc(100% + .5rem);
-  transition: opacity 1s linear 3s; }
-  .eslint-install-code__announcement[data-fades-out] {
-    opacity: 0; }
-
-.eslint-versions-col {
-  display: flex;
-  flex-direction: column; }
-  @media all and (min-width: 1023px) {
-    .eslint-versions-col {
-      align-items: flex-end; } }
-
-.eslint-versions {
-  margin-top: 3rem;
-  margin-block-start: 3rem;
-  display: inline-flex;
-  flex-direction: column; }
-  .eslint-versions dt {
-    border-bottom: 1px solid var(--divider-color);
-    padding: .25em 0;
-    margin-bottom: .5em;
-    padding-right: 1rem;
-    border-block-end: 1px solid var(--divider-color);
-    padding: .25em 0;
-    margin-block-end: .5em;
-    padding-inline-end: 1rem; }
-  .eslint-versions dd {
-    margin-left: 0;
-    margin-bottom: 1rem;
-    padding-right: 1rem;
-    margin-inline-start: 0;
-    margin-block-end: 1rem;
-    padding-inline-end: 1rem; }
-  .eslint-versions .c-icon {
-    margin-right: .5rem;
-    margin-inline-end: .5rem; }
-
-/* homepage metrics section */
-.metrics {
-  background-color: var(--lightest-background-color);
-  color: var(--link-color);
-  font-size: 1.125rem;
-  border-radius: var(--border-radius);
-  padding: var(--space-l-2xl); }
-  @media all and (min-width: 768px) {
-    .metrics {
-      display: flex; } }
-
-.metrics__item {
-  flex: 1;
-  display: block;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem; }
-
-.metrics__value {
-  display: block;
-  font-size: var(--step-6);
-  line-height: 1;
-  font-family: var(--mono-font);
-  flex: 9999;
-  margin-bottom: .75rem;
-  margin-block-end: .75rem; }
-
-/* Homepage Features Section */
-.features-wrapper.grid {
-  align-items: center; }
-
-.features {
-  border-left: 4px solid var(--lighter-background-color);
-  padding-left: 1.5rem;
-  border-inline-start: 4px solid var(--lighter-background-color);
-  padding-inline-start: 1.5rem; }
-
-.feature {
-  padding: 2rem 0; }
-  .feature:not(:last-of-type) {
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-  .donate-page .feature {
-    border-bottom: none;
-    border-block-end: none; }
-
-.feature__title {
-  font-size: var(--step-1);
-  font-family: var(--text-font);
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-
-.feature__description {
-  margin-bottom: 1.25rem;
-  margin-block-end: 1.25rem; }
-
-.feature__details-link {
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  text-decoration: none; }
-  .feature__details-link:hover {
-    text-decoration: underline; }
-
-.features-image {
-  display: none; }
-  .features-image img {
-    margin: 2rem auto; }
-    .donate-page .features-image img {
-      overflow: hidden;
-      display: block;
-      border-radius: var(--border-radius); }
-  @media all and (min-width: 1023px) {
-    .features-image {
-      display: block; } }
diff --git a/docs/src/assets/css/components/homepage.css b/docs/src/assets/css/components/homepage.css
deleted file mode 100644
index 815fd9e9f3c..00000000000
--- a/docs/src/assets/css/components/homepage.css
+++ /dev/null
@@ -1,174 +0,0 @@
-.problems {
-  display: inline-block;
-  position: relative; }
-
-.eslint-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  width: 100%;
-  gap: 1rem; }
-  @media all and (min-width: 640px) {
-    .eslint-actions {
-      flex-direction: row; } }
-
-.eslint-install-code-wrapper {
-  position: relative; }
-
-.eslint-install-code {
-  display: inline-flex;
-  align-items: center;
-  gap: 1rem;
-  background-color: var(--lightest-background-color);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  padding: .75rem 1.25rem .75rem 1rem;
-  white-space: nowrap;
-  margin-top: 1.5rem;
-  margin-block-start: 1.5rem;
-  overflow-x: auto;
-  max-width: 100%;
-  color: var(--headings-color); }
-  [data-theme="dark"] .eslint-install-code {
-    background-color: var(--color-neutral-700); }
-  .eslint-install-code code {
-    color: var(--headings-color); }
-  .eslint-install-code input {
-    all: unset;
-    min-width: 30ch;
-    color: inherit;
-    font-family: var(--mono-font); }
-    .eslint-install-code input::selection {
-      background-color: #fff;
-      color: var(--body-text-color); }
-
-.eslint-install-code__btn .c-icon {
-  color: var(--body-text-color); }
-
-.eslint-install-code__btn:hover .c-icon, .eslint-install-code__btn:focus .c-icon, .eslint-install-code__btn:active .c-icon {
-  color: var(--link-color); }
-
-.eslint-install-code__btn[data-copied="true"] .c-icon {
-  color: var(--link-color); }
-
-.eslint-install-code__announcement {
-  font-size: .875rem;
-  padding: .25rem .75rem;
-  font-size: var(--step--1);
-  border-radius: var(--border-radius);
-  display: block;
-  position: absolute;
-  top: calc(100% + .5rem);
-  offset-block-start: calc(100% + .5rem);
-  transition: opacity 1s linear 3s; }
-  .eslint-install-code__announcement[data-fades-out] {
-    opacity: 0; }
-
-.eslint-versions-col {
-  display: flex;
-  flex-direction: column; }
-  @media all and (min-width: 1023px) {
-    .eslint-versions-col {
-      align-items: flex-end; } }
-
-.eslint-versions {
-  margin-top: 3rem;
-  margin-block-start: 3rem;
-  display: inline-flex;
-  flex-direction: column; }
-  .eslint-versions dt {
-    border-bottom: 1px solid var(--divider-color);
-    padding: .25em 0;
-    margin-bottom: .5em;
-    padding-right: 1rem;
-    border-block-end: 1px solid var(--divider-color);
-    padding: .25em 0;
-    margin-block-end: .5em;
-    padding-inline-end: 1rem; }
-  .eslint-versions dd {
-    margin-left: 0;
-    margin-bottom: 1rem;
-    padding-right: 1rem;
-    margin-inline-start: 0;
-    margin-block-end: 1rem;
-    padding-inline-end: 1rem; }
-  .eslint-versions .c-icon {
-    margin-right: .5rem;
-    margin-inline-end: .5rem; }
-
-/* homepage metrics section */
-.metrics {
-  background-color: var(--lightest-background-color);
-  color: var(--link-color);
-  font-size: 1.125rem;
-  border-radius: var(--border-radius);
-  padding: var(--space-l-2xl); }
-  @media all and (min-width: 768px) {
-    .metrics {
-      display: flex; } }
-
-.metrics__item {
-  flex: 1;
-  display: block;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem; }
-
-.metrics__value {
-  display: block;
-  font-size: var(--step-6);
-  line-height: 1;
-  font-family: var(--mono-font);
-  flex: 9999;
-  margin-bottom: .75rem;
-  margin-block-end: .75rem; }
-
-/* Homepage Features Section */
-.features-wrapper.grid {
-  align-items: center; }
-
-.features {
-  border-left: 4px solid var(--lighter-background-color);
-  padding-left: 1.5rem;
-  border-inline-start: 4px solid var(--lighter-background-color);
-  padding-inline-start: 1.5rem; }
-
-.feature {
-  padding: 2rem 0; }
-  .feature:not(:last-of-type) {
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-  .donate-page .feature {
-    border-bottom: none;
-    border-block-end: none; }
-
-.feature__title {
-  font-size: var(--step-1);
-  font-family: var(--text-font);
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-
-.feature__description {
-  margin-bottom: 1.25rem;
-  margin-block-end: 1.25rem; }
-
-.feature__details-link {
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  text-decoration: none; }
-  .feature__details-link:hover {
-    text-decoration: underline; }
-
-.features-image {
-  display: none; }
-  .features-image img {
-    margin: 2rem auto; }
-    .donate-page .features-image img {
-      overflow: hidden;
-      display: block;
-      border-radius: var(--border-radius); }
-  @media all and (min-width: 1023px) {
-    .features-image {
-      display: block; } }
diff --git a/docs/src/assets/css/components/index.css b/docs/src/assets/css/components/index.css
deleted file mode 100644
index 6c913882142..00000000000
--- a/docs/src/assets/css/components/index.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.index {
-  margin-bottom: 4rem;
-  margin-block-end: 4rem; }
-
-.index__item {
-  margin: 0; }
-  .index__item a {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-    padding: .625rem .875rem;
-    font-size: var(--step-0);
-    border-radius: var(--border-radius); }
-    .index__item a:hover {
-      color: var(--link-color); }
-  .index__item a[aria-current="page"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color);
-    font-weight: 500; }
-
-.index__toggle {
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: .5rem;
-  font-weight: 500;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .index__toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .index__toggle {
-      display: none; } }
-  .index__toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .index__toggle #ham-top,
-  .index__toggle #ham-middle,
-  .index__toggle #ham-bottom {
-    transition: all .2s linear; }
-  .index__toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .index__toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .index__toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .index__toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .index__toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-.index__list {
-  display: block; }
-  .index__list[data-open="false"] {
-    display: none; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="false"] {
-        display: block; } }
-  .index__list[data-open="true"] {
-    display: block; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="true"] {
-        display: block; } }
diff --git a/docs/src/assets/css/components/language-switcher.css b/docs/src/assets/css/components/language-switcher.css
deleted file mode 100644
index 0edff38e349..00000000000
--- a/docs/src/assets/css/components/language-switcher.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.switcher--language {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: .25rem .5rem;
-  position: relative;
-  min-width: 15rem;
-  padding: 0; }
-
-.switcher--language .label__text {
-  flex: 1 0 10ch; }
-
-.switcher--language .switcher__select {
-  min-width: 15rem;
-  flex: 1 0 15rem; }
-
-.language-switcher {
-  display: inline-flex; }
diff --git a/docs/src/assets/css/components/languages.css b/docs/src/assets/css/components/languages.css
deleted file mode 100644
index 6ab22050a85..00000000000
--- a/docs/src/assets/css/components/languages.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-.languages-list {
-  margin: 0;
-  padding: 0;
-  font-size: var(--step-0); }
-  .languages-list li {
-    margin: 0; }
-    .languages-list li:last-of-type a {
-      border-bottom: 0; }
-  .languages-list a {
-    color: inherit;
-    display: block;
-    width: 100%;
-    padding: .75rem .1rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .languages-list a[aria-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .languages-list a[aria-current="true"]::after {
-        content: "✔️"; }
-    .languages-list a:hover {
-      color: var(--link-color); }
-
-.languages-section .flag {
-  font-size: 2em;
-  margin-right: .5rem;
-  margin-inline-end: .5rem; }
-
-.languages-section .languages-list {
-  font-size: var(--step-1);
-  border-left: 4px solid var(--tab-border-color);
-  padding-left: 1rem;
-  border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
diff --git a/docs/src/assets/css/components/navigation-min.css b/docs/src/assets/css/components/navigation-min.css
deleted file mode 100644
index 98e6312736a..00000000000
--- a/docs/src/assets/css/components/navigation-min.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.site-nav ul {
-  display: -webkit-flex;
-  display: flex;
-  gap: 1em;
-  list-style: none; }
diff --git a/docs/src/assets/css/components/navigation.css b/docs/src/assets/css/components/navigation.css
deleted file mode 100644
index 8d24c73d952..00000000000
--- a/docs/src/assets/css/components/navigation.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.site-nav {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  grid-column: 1 / -1;
-  grid-row: 1; }
-  .site-nav ul {
-    list-style: none;
-    font-size: var(--step-1);
-    margin-top: 1rem;
-    margin-block-start: 1rem; }
-    @media all and (min-width: 680px) {
-      .site-nav ul {
-        font-size: var(--step-0);
-        margin-top: 0;
-        margin-block-start: 0;
-        align-items: center;
-        display: flex; } }
-    .site-nav ul[data-open="false"] {
-      display: none; }
-    @media all and (min-width: 680px) {
-      .site-nav ul[data-open="true"] {
-        display: flex; } }
-  .site-nav .flexer {
-    display: flex;
-    justify-self: flex-end;
-    align-self: flex-end; }
-  .site-nav a:not(.c-btn) {
-    text-decoration: none;
-    color: inherit;
-    transition: color .2s linear; }
-    .site-nav a:not(.c-btn):hover {
-      color: var(--link-color); }
-  .site-nav a:not(.c-btn)[data-current="page"],
-  .site-nav a:not(.c-btn)[data-current="true"] {
-    color: var(--link-color);
-    text-decoration: none;
-    font-weight: 500; }
-
-.site-nav-toggle {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  margin-left: .5rem;
-  margin-right: -10px;
-  margin-inline-start: .5rem;
-  margin-inline-end: -10px; }
-  .site-nav-toggle svg {
-    width: 40px;
-    height: 40px;
-    color: var(--headings-color);
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .site-nav-toggle #ham-top,
-  .site-nav-toggle #ham-middle,
-  .site-nav-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .site-nav-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .site-nav-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .site-nav-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .site-nav-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .site-nav-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-@media all and (min-width: 680px) {
-  .site-nav {
-    flex-direction: row;
-    grid-column: auto;
-    gap: 2rem; }
-    .site-nav ul {
-      display: flex;
-      gap: 2rem;
-      font-size: var(--step-0); }
-      .site-nav ul li {
-        margin-bottom: 0;
-        margin-block-end: 0; }
-    .site-nav .flexer {
-      order: 1; } }
diff --git a/docs/src/assets/css/components/pagination-min.css b/docs/src/assets/css/components/pagination-min.css
deleted file mode 100644
index 7a083d8a54a..00000000000
--- a/docs/src/assets/css/components/pagination-min.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* Pagination within (and between) individual posts */
-.c-post-pagination ul {
-  list-style: none;
-  width: 100%;
-  outline: 1px solid yellow;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: flex-start;
-  align-items: flex-start; }
-
-.c-post-pagination li {
-  -webkit-flex: 1;
-  flex: 1;
-  display: -webkit-flex;
-  display: flex; }
-
-.c-post-pagination a {
-  display: block;
-  padding: .5em; }
-
-/* Pagination on collection pages */
-.c-collection-pagination {
-  outline: 1px solid yellow; }
diff --git a/docs/src/assets/css/components/pagination.css b/docs/src/assets/css/components/pagination.css
deleted file mode 100644
index 981803e3a53..00000000000
--- a/docs/src/assets/css/components/pagination.css
+++ /dev/null
@@ -1,57 +0,0 @@
-nav.c-pagination {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 1rem; }
-  nav.c-pagination svg {
-    color: inherit; }
-  nav.c-pagination a {
-    color: var(--headings-color);
-    text-decoration: none; }
-
-.c-pagination__item {
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  padding: .5rem .875rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  gap: .5rem;
-  transition: all .1s linear; }
-  .c-pagination__item:hover {
-    border-color: var(--link-color); }
-  .c-pagination__item[aria-disabled] {
-    color: var(--body-text-color);
-    border-color: var(--divider-color); }
-    .c-pagination__item[aria-disabled]:hover {
-      border-color: var(--divider-color); }
-
-.c-pagination__prev {
-  order: 1;
-  display: flex;
-  gap: .5rem; }
-
-.c-pagination__next {
-  order: 3;
-  display: flex;
-  gap: .5rem; }
-
-.c-pagination__current {
-  border: none;
-  order: 2;
-  margin: auto; }
-  @media all and (max-width: 480px) {
-    .c-pagination__current {
-      display: none; } }
-
-@media all and (max-width: 640px) {
-  .c-pagination__item__text {
-    /* visually-hide */
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap; } }
diff --git a/docs/src/assets/css/components/person.css b/docs/src/assets/css/components/person.css
deleted file mode 100644
index 4d3dd7247e7..00000000000
--- a/docs/src/assets/css/components/person.css
+++ /dev/null
@@ -1,98 +0,0 @@
-/* PERSON */
-.person {
-  position: relative; }
-
-.person--contributor {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  gap: .75rem; }
-
-.person--author {
-  margin-bottom: 3rem;
-  margin-block-end: 3rem; }
-  @media all and (min-width: 680px) {
-    .person--author {
-      display: grid;
-      grid-template-columns: 1fr 2fr;
-      grid-gap: 3rem; } }
-
-.person--author__details {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  gap: .75rem; }
-
-.person__photo {
-  display: block;
-  border-radius: 50%;
-  object-fit: cover;
-  flex: none;
-  max-width: initial;
-  margin-bottom: .875rem;
-  margin-block-end: .875rem;
-  /* contributor in the post sidebar */ }
-  .person__photo.person__photo--large {
-    width: 5rem;
-    height: 5rem;
-    margin-bottom: 1.25rem;
-    margin-block-end: 1.25rem; }
-  .person__photo.person__photo--medium {
-    width: 3.5rem;
-    height: 3.5rem; }
-  .person__photo.person__photo--small {
-    width: 3rem;
-    height: 3rem; }
-  .post__sidebar-module .person__photo {
-    width: 3rem;
-    height: 3rem; }
-
-.person__bio a:hover {
-  color: var(--link-color); }
-
-.person__name {
-  font-weight: 500;
-  color: var(--headings-color);
-  font-size: 1.125rem; }
-  .post .person__name {
-    font-size: var(--step-0); }
-
-.person__handle {
-  text-decoration: none;
-  color: var(--link-color);
-  display: block;
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-  .post .person__handle {
-    color: inherit; }
-    .post .person__handle:hover {
-      color: var(--link-color); }
-  .post__sidebar-module .person__handle::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    offset-block-start: 0;
-    offset-block-end: 0;
-    offset-inline-start: 0;
-    offset-inline-end: 0; }
-
-.person__title {
-  display: block;
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-
-.person__social-links ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  gap: 1rem; }
-
-/* team page */
-.people-list {
-  display: grid;
-  grid-gap: 3rem 2rem;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
diff --git a/docs/src/assets/css/components/post-share.css b/docs/src/assets/css/components/post-share.css
deleted file mode 100644
index ee40eccea8f..00000000000
--- a/docs/src/assets/css/components/post-share.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.c-share {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .75rem;
-  position: relative; }
-
-.c-share__btn {
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-xs);
-  border: 1px solid var(--border-color);
-  padding: .75rem;
-  display: inline-flex;
-  align-items: center;
-  color: var(--icon-color); }
-  .c-share__btn:hover, .c-share__btn:focus {
-    color: var(--headings-color); }
-  .c-share__btn svg {
-    color: inherit; }
-
-button.c-share__btn {
-  color: var(--dark-icon-color); }
-  button.c-share__btn[data-copied="true"] {
-    color: var(--link-color); }
-
-.ctc-announcement {
-  flex: 1 1 999px;
-  font-size: .875rem;
-  font-size: var(--step--1);
-  padding: .25rem;
-  border-radius: var(--border-radius);
-  display: block;
-  position: absolute;
-  top: 100%;
-  offset-block-start: 100%;
-  transition: opacity 1s linear 3s; }
-  .ctc-announcement[data-fades-out] {
-    opacity: 0; }
diff --git a/docs/src/assets/css/components/rules.css b/docs/src/assets/css/components/rules.css
deleted file mode 100644
index 73b8c3097b7..00000000000
--- a/docs/src/assets/css/components/rules.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.rule-categories {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem 1rem;
-  margin-bottom: 3rem; }
-  .rule-categories .rule-category {
-    margin: 0;
-    padding: 0;
-    background: none;
-    border: none; }
-  .rule-categories .rule-category__description {
-    flex: 1 1 45ch; }
-
-.rule-category {
-  font-size: var(--step--1);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  margin: 1.5rem 0;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  background-color: var(--lightest-background-color); }
-  .rule-category p {
-    margin: 0; }
-  .rule-category .rule-category__description {
-    flex: 1 1 30ch; }
-
-.rule {
-  border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  margin: .5rem 0;
-  position: relative; }
-  .rule p:last-of-type {
-    margin: 0; }
-
-.rule__content {
-  flex: 1 1 35ch; }
-
-.rule__name {
-  font-weight: 500;
-  font-size: .875rem;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-  .rule__name::after {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    offset-block-start: 0;
-    left: 0;
-    offset-inline-start: 0; }
-
-a.rule__name {
-  text-decoration: none; }
-  a.rule__name:hover {
-    text-decoration: underline; }
-
-.rule__description {
-  font-size: var(--step--1); }
-
-.rule__categories {
-  font-size: .875rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  border-radius: var(--border-radius);
-  padding: 2px 4px; }
-  .rule__categories p {
-    display: inline-flex;
-    margin: 0;
-    align-items: center; }
-  [data-theme="dark"] .rule__categories {
-    background: var(--body-background-color); }
-
-.rule__status {
-  color: var(--color-rose-500);
-  background: var(--color-rose-50);
-  border-radius: var(--border-radius);
-  display: inline-block;
-  font-weight: normal;
-  margin-left: .5rem;
-  margin-inline-start: .5rem;
-  font-size: var(--step--1);
-  padding: 0 .5rem; }
-  [data-theme="dark"] .rule__status {
-    background: var(--body-background-color); }
-
-.rule__categories__type[aria-hidden="true"] {
-  opacity: .25; }
-
-/* related rules */
-.related-rules__list {
-  display: flex;
-  gap: .5rem;
-  flex-wrap: wrap;
-  justify-content: start; }
-
-.related-rules__list__item svg {
-  color: inherit; }
-
-.related-rules__list__item a {
-  text-decoration: none;
-  color: var(--headings-color);
-  padding: .625rem;
-  display: inline-flex;
-  gap: .5rem;
-  align-items: center;
-  border: 1px solid var(--divider-color);
-  border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color); }
-  .related-rules__list__item a:hover {
-    color: var(--link-color);
-    background-color: var(--lighter-background-color); }
diff --git a/docs/src/assets/css/components/search-ui.css b/docs/src/assets/css/components/search-ui.css
deleted file mode 100644
index 4b699ee5b70..00000000000
--- a/docs/src/assets/css/components/search-ui.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.search__input-wrapper {
-  position: relative; }
-
-.search__input {
-  padding-left: 2.5rem;
-  padding-inline-start: 2.5rem;
-  outline-offset: 1px; }
-
-.search__icon {
-  color: var(--body-text-color);
-  position: absolute;
-  top: 50%;
-  offset-block-start: 50%;
-  transform: translateY(-50%);
-  left: .75rem;
-  offset-inline-start: .75rem; }
diff --git a/docs/src/assets/css/components/search.css b/docs/src/assets/css/components/search.css
deleted file mode 100644
index 72e52a3a73f..00000000000
--- a/docs/src/assets/css/components/search.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.search {
-  margin-bottom: 1.5rem; }
-
-.search__input-wrapper {
-  position: relative; }
-
-.search__input {
-  padding-left: 2.5rem;
-  padding-inline-start: 2.5rem;
-  outline-offset: 1px;
-  width: 100%; }
-
-.search__icon {
-  color: var(--body-text-color);
-  position: absolute;
-  top: 50%;
-  offset-block-start: 50%;
-  transform: translateY(-50%);
-  left: .75rem;
-  offset-inline-start: .75rem; }
-
-.algolia-docsearch-suggestion--highlight {
-  background-color: var(--color-warning-300); }
diff --git a/docs/src/assets/css/components/slider.css b/docs/src/assets/css/components/slider.css
deleted file mode 100644
index 8c7233eb67d..00000000000
--- a/docs/src/assets/css/components/slider.css
+++ /dev/null
@@ -1,146 +0,0 @@
-.c-slider[data-slider] {
-  position: relative;
-  padding: 0; }
-
-@media all and (min-width: 1023px) {
-  .c-slider__paddleNav {
-    margin-top: -4rem;
-    margin-block-start: -4rem;
-    position: relative;
-    z-index: 2; } }
-
-.c-slider__paddleNav .c-slider__paddleNav__prev,
-.c-slider__paddleNav .c-slider__paddleNav__next {
-  width: 3.5rem;
-  height: 3.5rem;
-  border: 2px solid transparent;
-  border-radius: 50%;
-  border-color: var(--divider-color);
-  line-height: 0;
-  background-color: var(--lighter-background-color); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev svg,
-  .c-slider__paddleNav .c-slider__paddleNav__next svg {
-    display: block;
-    width: 100%;
-    transition: color .1s linear;
-    color: var(--dark-icon-color); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"] svg,
-  .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"] svg {
-    color: var(--color-neutral-400); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev:hover svg,
-  .c-slider__paddleNav .c-slider__paddleNav__next:hover svg {
-    color: var(--link-color); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:hover svg,
-  .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:hover svg {
-    color: var(--color-neutral-400); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:hover:focus,
-  .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:hover:focus {
-    border-color: transparent; }
-  .c-slider__paddleNav .c-slider__paddleNav__prev:focus, .c-slider__paddleNav .c-slider__paddleNav__prev:active,
-  .c-slider__paddleNav .c-slider__paddleNav__next:focus,
-  .c-slider__paddleNav .c-slider__paddleNav__next:active {
-    border-color: var(--link-color); }
-  .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:focus,
-  .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:focus {
-    border-color: transparent; }
-  .c-slider__paddleNav .c-slider__paddleNav__prev:focus:not(:focus-visible),
-  .c-slider__paddleNav .c-slider__paddleNav__next:focus:not(:focus-visible) {
-    border-color: transparent; }
-  .js-focus-visible .c-slider__paddleNav .c-slider__paddleNav__prev:focus:not(.focus-visible), .js-focus-visible
-  .c-slider__paddleNav .c-slider__paddleNav__next:focus:not(.focus-visible) {
-    border-color: transparent; }
-
-.c-slider__slides-container {
-  display: flex; }
-
-@media all and (min-width: 1023px) {
-  .c-slider__slides-wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 2rem; } }
-
-.c-slider__slide {
-  width: 100%;
-  color: var(--headings-color);
-  flex-shrink: 0;
-  margin-bottom: 4rem;
-  margin-block-end: 4rem;
-  transition: opacity 0.5s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 1s cubic-bezier(0.39, 0.03, 0.56, 0.57); }
-  .c-slider__slide[data-hidden="true"] {
-    visibility: hidden;
-    opacity: 0; }
-  .c-slider__slide[data-hidden="false"] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57); }
-
-.c-slider--testimonials .c-slider__testimonial {
-  margin: 0; }
-
-.c-slider--testimonials .c-slider__testimonial__img {
-  display: none; }
-
-.c-slider--testimonials .c-slider__testimonial__content {
-  font-size: var(--step-1);
-  margin: 0 auto; }
-  .c-slider--testimonials .c-slider__testimonial__content p:last-of-type {
-    margin-bottom: 0;
-    margin-block-end: 0; }
-
-.c-slider--testimonials .c-slider__testimonial__footer {
-  margin-top: var(--space-l-xl);
-  margin-bottom: 3rem;
-  margin-block-start: var(--space-l-xl);
-  margin-block-end: 3rem; }
-
-.c-slider--testimonials .c-slider__testimonial__footer cite {
-  font-style: normal;
-  font-size: 1.125rem; }
-
-.c-slider--testimonials .c-slider__testimonial__author {
-  font-weight: 500; }
-
-.c-slider--testimonials .c-slider__testimonial__author-role {
-  color: var(--body-text-color); }
-
-.c-slider--testimonials .c-slider__testimonial__author,
-.c-slider--testimonials .c-slider__testimonial__author-role {
-  display: block;
-  margin-bottom: 0;
-  margin-block-end: 0; }
-
-.js-slider .c-slider__slides-container {
-  overflow: hidden; }
-
-@media all and (min-width: 1023px) {
-  .js-slider .person__photo {
-    display: none; } }
-
-.js-slider .c-slider__slides-wrapper {
-  width: 100%;
-  grid-gap: 0;
-  display: flex;
-  align-items: center;
-  transition: transform 0.4s cubic-bezier(0.39, 0.03, 0.56, 0.57); }
-
-.js-slider .c-slider__slide {
-  margin: 0;
-  flex-shrink: 0;
-  width: 100%; }
-  @media all and (min-width: 1023px) {
-    .js-slider .c-slider__slide {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      grid-gap: 2rem;
-      align-items: center; } }
-
-.js-slider .c-slider__testimonial__img {
-  display: block;
-  border-radius: var(--border-radius);
-  max-height: 550px;
-  overflow: hidden; }
-  @media all and (max-width: 1023px) {
-    .js-slider .c-slider__testimonial__img {
-      display: none; } }
-  .js-slider .c-slider__testimonial__img img {
-    object-fit: cover; }
diff --git a/docs/src/assets/css/components/social-icons.css b/docs/src/assets/css/components/social-icons.css
deleted file mode 100644
index 6003c73e13e..00000000000
--- a/docs/src/assets/css/components/social-icons.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.eslint-social-icons {
-  margin-bottom: -1rem;
-  margin-block-end: -1rem; }
-  .eslint-social-icons ul {
-    margin: 0;
-    padding: 0;
-    margin-left: -1rem;
-    margin-inline-start: -1rem;
-    display: inline-flex; }
-    .eslint-social-icons ul li {
-      margin: 0;
-      display: inline-flex;
-      align-items: center; }
-      .eslint-social-icons ul li a {
-        display: flex;
-        padding: 1rem; }
diff --git a/docs/src/assets/css/components/sponsors.css b/docs/src/assets/css/components/sponsors.css
deleted file mode 100644
index 23d4881898a..00000000000
--- a/docs/src/assets/css/components/sponsors.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* sponsors lists */
-.sponsors.sponsors {
-  text-align: center;
-  margin-bottom: var(--space-m-l);
-  margin-block-end: var(--space-m-l);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center; }
-  @media all and (max-width: 1023px) {
-    .sponsors.sponsors {
-      margin-top: 2.5rem;
-      margin-block-start: 2.5rem; } }
-  .sponsors.sponsors li {
-    display: inline-block;
-    margin: 0 .75rem 1.5rem; }
-    .sponsors.sponsors li a {
-      display: block; }
-  .sponsors.sponsors picture, .sponsors.sponsors img {
-    display: block;
-    height: auto;
-    max-height: 3rem; }
-
-.sponsors.sponsors--backers picture, .sponsors.sponsors--backers img {
-  border-radius: 50%; }
-
-.sponsors.sponsors--platinum picture, .sponsors.sponsors--platinum img {
-  max-height: 8rem; }
-
-.sponsors.sponsors--gold picture, .sponsors.sponsors--gold img {
-  max-height: 6rem; }
-
-.sponsors.sponsors--silver picture, .sponsors.sponsors--silver img {
-  max-height: 8rem; }
-
-.sponsors.sponsors--bronze picture, .sponsors.sponsors--bronze img,
-.sponsors.sponsors--technology picture,
-.sponsors.sponsors--technology img {
-  max-height: 3rem; }
diff --git a/docs/src/assets/css/components/swatches.css b/docs/src/assets/css/components/swatches.css
deleted file mode 100644
index 55731f7235b..00000000000
--- a/docs/src/assets/css/components/swatches.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.swatches {
-  margin: 0;
-  padding: 0;
-  margin-top: var(--space-l-2xl);
-  margin-block-start: var(--space-l-2xl);
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap; }
-  @media all and (min-width: 1023px) {
-    .swatches {
-      display: grid;
-      margin: 0;
-      overflow: initial;
-      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
-      grid-gap: 2rem .5rem; } }
-
-.swatch {
-  min-width: 105px;
-  margin: 0;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-lg);
-  display: inline-flex;
-  flex-direction: column-reverse;
-  margin-right: 1rem;
-  margin-inline-end: 1rem;
-  overflow: hidden; }
-  .swatch svg {
-    display: block;
-    max-width: 100%;
-    width: 124px;
-    height: 80px; }
-  .swatch figcaption {
-    display: block;
-    padding: .75rem; }
-    .swatch figcaption span {
-      display: block; }
-
-.swatch__description {
-  color: var(--headings-color);
-  font-weight: 500; }
diff --git a/docs/src/assets/css/components/tabs.css b/docs/src/assets/css/components/tabs.css
deleted file mode 100644
index 0830a08ce10..00000000000
--- a/docs/src/assets/css/components/tabs.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.c-tabs pre {
-  margin-top: 0;
-  margin-block-start: 0; }
-
-.js-tabs .c-tabs__tablist {
-  display: flex;
-  justify-content: start; }
-
-.c-tabs__tab {
-  background: none;
-  border: none;
-  margin: 0;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  line-height: inherit;
-  font-weight: 500;
-  font-size: var(--step-0);
-  display: inline-flex;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-tabs__tab:hover {
-    color: var(--link-color); }
-  .c-tabs__tab[aria-selected="true"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color); }
-
-.c-tabs__tabpanel {
-  margin-bottom: 2rem;
-  margin-block-end: 2rem;
-  background-color: var(--lightest-background-color);
-  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); }
-  .js-tabs .c-tabs__tabpanel {
-    margin-bottom: 0;
-    margin-block-end: 0; }
-
-.c-tabs__tabpanel__title {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-.js-tabs .c-tabs__tabpanel__title {
-  display: none; }
diff --git a/docs/src/assets/css/components/theme-switcher.css b/docs/src/assets/css/components/theme-switcher.css
deleted file mode 100644
index 5f3fb3ba097..00000000000
--- a/docs/src/assets/css/components/theme-switcher.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.theme-switcher {
-  display: inline-flex;
-  align-items: center;
-  gap: .5rem;
-  position: relative; }
-
-.theme-switcher-label.theme-switcher-label {
-  font-size: inherit;
-  color: inherit;
-  font: inherit;
-  font-family: var(--text-font);
-  margin: 0; }
-
-.theme-switcher__buttons {
-  display: flex;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--body-background-color); }
-
-.theme-switcher__button {
-  flex: 0;
-  box-shadow: var(--shadow-xs);
-  padding: .625rem .875rem;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  width: 40px;
-  height: 40px; }
-  .theme-switcher__button:first-of-type {
-    border-right: 0.5px solid var(--border-color);
-    border-inline-end: 0.5px solid var(--border-color); }
-  .theme-switcher__button:last-of-type {
-    border-left: 0.5px solid var(--border-color);
-    border-inline-start: 0.5px solid var(--border-color); }
-  .theme-switcher__button .theme-switcher__icon {
-    color: var(--icon-color); }
-  .theme-switcher__button:hover .theme-switcher__icon {
-    color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"] .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="false"] .theme-switcher__icon {
-  color: var(--icon-color); }
-
-.theme-switcher__button[aria-pressed="false"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button:hover .theme-switcher__icon {
-  color: var(--link-color); }
diff --git a/docs/src/assets/css/components/toc-min.css b/docs/src/assets/css/components/toc-min.css
deleted file mode 100644
index 2d96bb862d5..00000000000
--- a/docs/src/assets/css/components/toc-min.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.c-toc ol {
-  list-style: decimal-leading-zero; }
-
-.c-toc--main a {
-  font-weight: 500;
-  font-size: 1.5rem; }
diff --git a/docs/src/assets/css/components/toc.css b/docs/src/assets/css/components/toc.css
deleted file mode 100644
index 7c842456d58..00000000000
--- a/docs/src/assets/css/components/toc.css
+++ /dev/null
@@ -1,76 +0,0 @@
-@charset "UTF-8";
-.docs-toc {
-  margin: 2rem 0; }
-
-.c-toc ol {
-  margin: 0; }
-  .c-toc ol li {
-    position: relative;
-    margin-bottom: .25rem;
-    margin-block-end: .25rem;
-    padding-left: 1rem;
-    padding-inline-start: 1rem; }
-    .c-toc ol li > ol {
-      margin-top: .25rem; }
-  .c-toc ol li::before {
-    content: "└";
-    color: var(--icon-color);
-    position: absolute;
-    left: -.4rem;
-    offset-inline-start: -.4rem; }
-
-.c-toc a {
-  text-decoration: none;
-  color: var(--headings-color); }
-  .c-toc a:hover {
-    color: var(--link-color); }
-
-.c-toc__label.c-toc__label {
-  font-size: var(--step-0);
-  color: var(--body-text-color);
-  font-family: var(--text-font);
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-
-.c-toc__label {
-  width: fit-content; }
-  .c-toc__label button {
-    color: var(--link-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font: inherit;
-    font-size: inherit;
-    font-weight: 500;
-    width: 100%;
-    height: 100%;
-    text-align: left;
-    line-height: 1.5;
-    padding: 0;
-    border-radius: 0;
-    position: relative;
-    border: none;
-    transition: outline 0.1s linear; }
-    .c-toc__label button svg {
-      flex: none; }
-
-/* Styles for the accordion icon */
-.toc-trigger-icon {
-  display: block !important;
-  width: 0.75rem;
-  height: 0.5rem;
-  transform-origin: 50% 50%;
-  margin-left: 3rem;
-  margin-inline-start: 3rem;
-  transition: all 0.1s linear;
-  color: var(--color-neutral-400); }
-  [aria-expanded="true"] .toc-trigger-icon {
-    -ms-transform: translateY(-50%) rotate(180deg);
-    transform: translateY(-50%) rotate(180deg); }
-
-.c-toc__panel[data-open="false"] {
-  display: none; }
-
-.c-toc__panel[data-open="true"] {
-  display: block; }
diff --git a/docs/src/assets/css/components/tweet-min.css b/docs/src/assets/css/components/tweet-min.css
deleted file mode 100644
index b9516e2a629..00000000000
--- a/docs/src/assets/css/components/tweet-min.css
+++ /dev/null
@@ -1,14 +0,0 @@
-blockquote.tweet {
-  padding: 1em 1em 1em 4em;
-  margin: 2rem 0;
-  position: relative;
-  font-size: 1.1rem; }
-  blockquote.tweet cite {
-    font-size: 1rem; }
-
-.tweet__icon {
-  width: 2.5em;
-  height: 2.5em;
-  position: absolute;
-  left: .5em;
-  top: .5em; }
diff --git a/docs/src/assets/css/components/tweet.css b/docs/src/assets/css/components/tweet.css
deleted file mode 100644
index b9516e2a629..00000000000
--- a/docs/src/assets/css/components/tweet.css
+++ /dev/null
@@ -1,14 +0,0 @@
-blockquote.tweet {
-  padding: 1em 1em 1em 4em;
-  margin: 2rem 0;
-  position: relative;
-  font-size: 1.1rem; }
-  blockquote.tweet cite {
-    font-size: 1rem; }
-
-.tweet__icon {
-  width: 2.5em;
-  height: 2.5em;
-  position: absolute;
-  left: .5em;
-  top: .5em; }
diff --git a/docs/src/assets/css/components/version-switcher.css b/docs/src/assets/css/components/version-switcher.css
deleted file mode 100644
index a1984328c02..00000000000
--- a/docs/src/assets/css/components/version-switcher.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.version-switcher {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
diff --git a/docs/src/assets/css/components/versions.css b/docs/src/assets/css/components/versions.css
deleted file mode 100644
index 6a9d607b8ac..00000000000
--- a/docs/src/assets/css/components/versions.css
+++ /dev/null
@@ -1,34 +0,0 @@
-@charset "UTF-8";
-.versions-list {
-  margin: 0;
-  padding: 0;
-  font-size: var(--step-1); }
-  .versions-list li {
-    margin: 0; }
-    .versions-list li:last-of-type a {
-      border-bottom: 0;
-      border-block-end: 0; }
-  .versions-list a {
-    color: var(--link-color);
-    display: block;
-    width: 100%;
-    padding: 1rem .5rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .versions-list a[data-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .versions-list a[data-current="true"]::after {
-        content: "✔️"; }
-    .versions-list a:hover {
-      background-color: var(--lightest-background-color); }
-
-.versions-section .versions-list {
-  font-size: var(--step-1);
-  border-left: 4px solid var(--tab-border-color);
-  padding-left: 1rem;
-  border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
diff --git a/docs/src/assets/css/print.css b/docs/src/assets/css/print.css
deleted file mode 100644
index 40e8d3dcc49..00000000000
--- a/docs/src/assets/css/print.css
+++ /dev/null
@@ -1,161 +0,0 @@
-*,
-*:before,
-*:after,
-*:first-letter,
-p:first-line,
-div:first-line,
-blockquote:first-line,
-li:first-line {
-  background: transparent !important;
-  color: #000 !important;
-  box-shadow: none !important;
-  text-shadow: none !important; }
-
-body {
-  width: 100% !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  line-height: 1.45;
-  font-family: Helvetica, sans-serif;
-  color: #000;
-  background: none;
-  font-size: 14pt; }
-
-.grid {
-  display: block; }
-
-main,
-.docs-content,
-.docs-wrapper {
-  display: block;
-  width: 100%;
-  max-width: 75ch;
-  margin: 1cm auto; }
-
-/* Headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  page-break-after: avoid; }
-
-h1 {
-  font-size: 19pt; }
-
-h2 {
-  font-size: 17pt; }
-
-h3 {
-  font-size: 15pt; }
-
-h4,
-h5,
-h6 {
-  font-size: 14pt; }
-
-p,
-h2,
-h3 {
-  orphans: 3;
-  widows: 3; }
-
-code {
-  font: 12pt Courier, monospace; }
-
-blockquote {
-  margin: 1.2em;
-  padding: 1em;
-  font-size: 12pt; }
-
-hr {
-  background-color: #ccc; }
-
-/* Images */
-img {
-  max-width: 100% !important; }
-
-a img {
-  border: none; }
-
-/* Links */
-a:link,
-a:visited {
-  background: transparent;
-  font-weight: 700;
-  text-decoration: underline;
-  color: #333; }
-
-abbr[title]:after {
-  content: " (" attr(title) ")"; }
-
-/* Don't show linked images  */
-a[href^="http://"] {
-  color: #000; }
-
-a[href$=".jpg"]:after,
-a[href$=".jpeg"]:after,
-a[href$=".gif"]:after,
-a[href$=".png"]:after {
-  content: " (" attr(href) ") ";
-  display: none; }
-
-/* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol .. taken from html5boilerplate */
-a[href^="#"]:after,
-a[href^="javascript:"]:after {
-  content: ""; }
-
-/* Table */
-table {
-  margin: 1px;
-  text-align: left; }
-
-th {
-  border-bottom: 1px solid #333;
-  font-weight: bold; }
-
-td {
-  border-bottom: 1px solid #333; }
-
-th,
-td {
-  padding: 4px 10px 4px 0; }
-
-tfoot {
-  font-style: italic; }
-
-caption {
-  background: #fff;
-  margin-bottom: 2em;
-  text-align: left; }
-
-thead {
-  display: table-header-group; }
-
-img,
-tr {
-  page-break-inside: avoid; }
-
-body > *:not(main),
-aside,
-*[class*="sidebar"] {
-  display: none; }
-
-button,
-.c-btn.c-btn--playground,
-.docs-edit-link {
-  display: none; }
-
-a[href^='http']:not([href*='mywebsite.com'])::after {
-  content: " (" attr(href) ")"; }
-
-.resource a::after {
-  display: none; }
-
-ul {
-  page-break-inside: avoid; }
-
-@media print {
-  @page {
-    margin: 1cm; } }
diff --git a/docs/src/assets/css/styles-min.css b/docs/src/assets/css/styles-min.css
deleted file mode 100644
index e9697082773..00000000000
--- a/docs/src/assets/css/styles-min.css
+++ /dev/null
@@ -1,376 +0,0 @@
-html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  height: 100%; }
-
-body {
-  background-color: inherit;
-  margin: 0;
-  line-height: 1.5;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  min-height: 100%; }
-  body.wall {
-    background-image: url(../../assets/images/patterns/ignasi_pattern_s.png); }
-
-main {
-  -webkit-flex: 1;
-  flex: 1;
-  margin: 0 auto;
-  width: 90%;
-  max-width: 70ch; }
-
-.theatre {
-  background-color: #111;
-  color: #eee; }
-
-html {
-  --color-brand: hsl(258, 50%, 57%);
-  --grey: #888;
-  --color-highlight: #F8D204;
-  --color-accent: var(--color-brand);
-  --bg-color: #fff;
-  --text-color: #111;
-  --link-color: var(--color-brand);
-  --font-family: "Atkinson Hyperlegible"; }
-
-/* Visually hide text while keeping it accessible */
-/* Support includes IE9+ */
-.visually-hidden {
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-  /* Why we need this rule: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ }
-
-[hidden] {
-  display: none; }
-
-/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1400,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
-:root {
-  --fluid-min-width: 320;
-  --fluid-max-width: 1400;
-  --fluid-screen: 100vw;
-  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); }
-
-@media screen and (min-width: 1400px) {
-  :root {
-    --fluid-screen: calc(var(--fluid-max-width) * 1px); } }
-
-:root {
-  --f--2-min: 12.64;
-  --f--2-max: 13.89;
-  --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
-  --f--1-min: 14.22;
-  --f--1-max: 16.67;
-  --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
-  --f-0-min: 16.00;
-  --f-0-max: 20.00;
-  --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
-  --f-1-min: 18.00;
-  --f-1-max: 24.00;
-  --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
-  --f-2-min: 20.25;
-  --f-2-max: 28.80;
-  --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
-  --f-3-min: 22.78;
-  --f-3-max: 34.56;
-  --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
-  --f-4-min: 25.63;
-  --f-4-max: 41.47;
-  --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
-  --f-5-min: 28.83;
-  --f-5-max: 49.77;
-  --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
-  --f-6-min: 32.44;
-  --f-6-max: 59.72;
-  --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); }
-
-body {
-  font-size: var(--step-0);
-  line-height: 1.5; }
-
-h5,
-.h5 {
-  font-size: var(--step-1); }
-
-h4,
-.h4 {
-  font-size: var(--step-2); }
-
-h3,
-.h3 {
-  font-size: var(--step-3);
-  line-height: 1.2; }
-
-h2,
-.h2 {
-  font-size: var(--step-4);
-  letter-spacing: -.5px;
-  line-height: 1.2; }
-
-h1,
-.h1 {
-  font-size: var(--step-5);
-  letter-spacing: -.5px;
-  line-height: 1.2; }
-
-.h0 {
-  font-size: var(--step-6);
-  letter-spacing: -.5px;
-  line-height: 1.2; }
-
-small, caption, cite, figcaption {
-  font-size: var(--step--1); }
-
-::marker {
-  color: var(--color-accent); }
-
-::-moz-selection {
-  background-color: var(--color-highlight);
-  color: #000; }
-
-::selection {
-  background-color: var(--color-highlight);
-  color: #000; }
-
-*, *::before, *::after {
-  box-sizing: border-box; }
-
-html {
-  accent-color: var(--color-accent);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
-
-#skip-link {
-  position: fixed;
-  top: -30em;
-  left: 0;
-  right: auto;
-  z-index: 999;
-  background-color: var(--color-highlight);
-  color: #000;
-  padding: 1em 1.5em;
-  font-size: 1em;
-  text-align: center;
-  transition: top .1s linear;
-  text-decoration: none; }
-  #skip-link:focus, #skip-link:focus-visible {
-    outline: 2px solid transparent;
-    top: 2px;
-    color: #000;
-    box-shadow: inset 0 0 0 2px, inset 0 0 0 3px currentColor; }
-
-#back-to-top {
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  color: var(--color-brand);
-  transition: all .2s linear; }
-  #back-to-top:hover, #back-to-top:focus {
-    color: var(--color-accent); }
-  #back-to-top svg {
-    color: inherit; }
-
-a {
-  color: var(--link-color); }
-  :where(.site-header, .site-footer) a {
-    color: inherit;
-    text-decoration: none; }
-
-a[aria-current="true"] {
-  font-weight: bold; }
-
-p {
-  margin: 0 0 1.5em; }
-  :matches(nav, .posts-collection) p {
-    margin-bottom: .75em; }
-
-ul,
-ol {
-  margin-top: 0; }
-  ul li,
-  ol li {
-    margin: 0 0 .75em; }
-
-figure {
-  margin-bottom: 4rem; }
-  figure img {
-    margin-bottom: 1rem; }
-  figure figcaption {
-    color: var(--grey); }
-
-img {
-  display: block;
-  position: relative;
-  max-width: 100%; }
-
-img:after {
-  content: "Broken image:" " " attr(alt);
-  font-size: 1rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  text-align: center;
-  color: #777;
-  position: absolute;
-  left: 0;
-  z-index: 2;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-  visibility: visible;
-  width: 100%;
-  padding: .6em .3em;
-  background-color: #fff;
-  border: 1px dashed currentColor;
-  border-radius: 4px;
-  background-color: #eee; }
-
-nav {
-  /* rarely do we display bullets for lists in navigation */ }
-  nav ol,
-  nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0; }
-  nav.c-toc ul, nav.c-toc ol {
-    padding-left: 2rem; }
-
-ol {
-  list-style: decimal-leading-zero;
-  font-feature-settings: "tnum"; }
-
-.video {
-  width: 90%;
-  max-width: 1400px;
-  margin: 2em auto; }
-  .video iframe {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    height: auto; }
-
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    scroll-behavior: smooth; }
-  *:focus {
-    transition: outline-offset .15s linear;
-    outline-offset: 4px; } }
-
-.chapter .main-wrapper {
-  display: grid;
-  grid-template-columns: 25% 1fr;
-  grid-template-areas: "toc content";
-  grid-gap: 2rem; }
-  .chapter .main-wrapper main {
-    grid-area: content; }
-  .chapter .main-wrapper aside {
-    grid-area: toc; }
-
-.site-header {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  align-items: center;
-  padding: 2em 0; }
-
-.logo-link {
-  display: block;
-  width: 150px; }
-
-.logo {
-  display: block;
-  width: 100%;
-  height: auto; }
-
-.site-nav ul {
-  display: -webkit-flex;
-  display: flex;
-  gap: 1em;
-  list-style: none; }
-
-.site-footer {
-  background-color: #dedfe3; }
-
-.c-toc ol {
-  list-style: decimal-leading-zero; }
-
-.c-toc--main a {
-  font-weight: 500;
-  font-size: 1.5rem; }
-
-nav.c-breadcrumbs ol {
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-
-nav.c-breadcrumbs li {
-  display: inline-block;
-  padding: 0.5em 0.25em;
-  position: relative; }
-  nav.c-breadcrumbs li::after {
-    content: "/";
-    color: inherit;
-    display: inline-block;
-    -webkit-margin-start: .5em;
-    margin-inline-start: .5em; }
-  nav.c-breadcrumbs li:last-of-type::after {
-    display: none; }
-  nav.c-breadcrumbs li a {
-    font-weight: bold; }
-    nav.c-breadcrumbs li a[aria-current] {
-      color: inherit;
-      text-decoration: none;
-      background: none;
-      font-weight: normal; }
-
-/* Pagination within (and between) individual posts */
-.c-post-pagination ul {
-  list-style: none;
-  width: 100%;
-  outline: 1px solid yellow;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: flex-start;
-  align-items: flex-start; }
-
-.c-post-pagination li {
-  -webkit-flex: 1;
-  flex: 1;
-  display: -webkit-flex;
-  display: flex; }
-
-.c-post-pagination a {
-  display: block;
-  padding: .5em; }
-
-/* Pagination on collection pages */
-.c-collection-pagination {
-  outline: 1px solid yellow; }
-
-blockquote.tweet {
-  padding: 1em 1em 1em 4em;
-  margin: 2rem 0;
-  position: relative;
-  font-size: 1.1rem; }
-  blockquote.tweet cite {
-    font-size: 1rem; }
-
-.tweet__icon {
-  width: 2.5em;
-  height: 2.5em;
-  position: absolute;
-  left: .5em;
-  top: .5em; }
-
-input, textarea {
-  font: inherit;
-  line-height: 1.3;
-  padding: .25em .75em;
-  border-radius: 4px;
-  border: 1px solid #777; }
diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css
deleted file mode 100644
index ff3d95c282e..00000000000
--- a/docs/src/assets/css/styles.css
+++ /dev/null
@@ -1,2203 +0,0 @@
-@charset "UTF-8";
-:root {
-  /* Tier 1 variables */
-  --color-neutral-25: #FCFCFD;
-  --color-neutral-50: #F9FAFB;
-  --color-neutral-100: #F2F4F7;
-  --color-neutral-200: #E4E7EC;
-  --color-neutral-300: #D0D5DD;
-  --color-neutral-400: #98A2B3;
-  --color-neutral-500: #667085;
-  --color-neutral-600: #475467;
-  --color-neutral-700: #344054;
-  --color-neutral-800: #1D2939;
-  --color-neutral-900: #101828;
-  --color-primary-25: #FBFBFF;
-  --color-primary-50: #F6F6FE;
-  --color-primary-100: #ECECFD;
-  --color-primary-200: #DEDEFF;
-  --color-primary-300: #CCCCFA;
-  --color-primary-400: #B7B7FF;
-  --color-primary-500: #A0A0F5;
-  --color-primary-600: #8080F2;
-  --color-primary-700: #6358D4;
-  --color-primary-800: #4B32C3;
-  --color-primary-900: #341BAB;
-  --color-warning-25: #FFFCF5;
-  --color-warning-50: #FFFAEB;
-  --color-warning-100: #FEF0C7;
-  --color-warning-200: #FEDF89;
-  --color-warning-300: #FEC84B;
-  --color-warning-400: #FDB022;
-  --color-warning-500: #F79009;
-  --color-warning-600: #DC6803;
-  --color-warning-700: #B54708;
-  --color-warning-800: #93370D;
-  --color-warning-900: #7A2E0E;
-  --color-success-25: #F6FEF9;
-  --color-success-50: #ECFDF3;
-  --color-success-100: #D1FADF;
-  --color-success-200: #A6F4C5;
-  --color-success-300: #6CE9A6;
-  --color-success-400: #32D583;
-  --color-success-500: #12B76A;
-  --color-success-600: #039855;
-  --color-success-700: #027A48;
-  --color-success-800: #05603A;
-  --color-success-900: #054F31;
-  --color-rose-25: #FFF5F6;
-  --color-rose-50: #FFF1F3;
-  --color-rose-100: #FFE4E8;
-  --color-rose-200: #FECDD6;
-  --color-rose-300: #FEA3B4;
-  --color-rose-400: #FD6F8E;
-  --color-rose-500: #F63D68;
-  --color-rose-600: #E31B54;
-  --color-rose-700: #C01048;
-  --color-rose-800: #A11043;
-  --color-rose-900: #89123E;
-  /* Tier 2 variables */
-  --primary-button-background-color: var(--color-primary-800);
-  --primary-button-hover-color: var(--color-primary-900);
-  --primary-button-text-color: #fff;
-  --secondary-button-background-color: var(--color-primary-50);
-  --secondary-button-hover-color: var(--color-primary-100);
-  --secondary-button-text-color: var(--color-brand);
-  --ghost-button-background-color: var(--color-primary-50);
-  --ghost-button-text-color: var(--color-brand);
-  --color-brand: var(--color-primary-800);
-  --body-background-color: #fff;
-  --body-text-color: var(--color-neutral-500);
-  --headings-color: var(--color-neutral-900);
-  --border-color: var(--color-neutral-300);
-  --divider-color: var(--color-neutral-200);
-  --icon-color: var(--color-neutral-400);
-  --dark-icon-color: var(--color-neutral-500);
-  --link-color: var(--color-primary-800);
-  --lighter-background-color: var(--color-neutral-100);
-  --lightest-background-color: var(--color-neutral-50);
-  --docs-lightest-background-color: var(--color-primary-50);
-  --hero-background-color: var(--color-neutral-25);
-  --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
-
-@media (prefers-color-scheme: dark) {
-  --secondary-button-background-color: var(--color-neutral-700);
-  --secondary-button-hover-color: var(--color-neutral-800);
-  --secondary-button-text-color: var(--body-text-color);
-  --body-background-color: var(--color-neutral-900);
-  --body-text-color: var(--color-neutral-300);
-  --headings-color: #fff;
-  --divider-color: var(--color-neutral-600);
-  --border-color: var(--color-neutral-500);
-  --icon-color: var(--body-text-color);
-  --dark-icon-color: #fff;
-  --link-color: var(--color-primary-400);
-  --lighter-background-color: var(--color-neutral-800);
-  --lightest-background-color: var(--color-neutral-800);
-  --hero-background-color: var(--color-neutral-800);
-  --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
-
-html[data-theme="light"] {
-  --body-background-color: #fff;
-  --body-text-color: var(--color-neutral-500);
-  --headings-color: var(--color-neutral-900);
-  --border-color: var(--color-neutral-300);
-  --divider-color: var(--color-neutral-200);
-  --icon-color: var(--color-neutral-400);
-  --dark-icon-color: var(--color-neutral-500);
-  --link-color: var(--color-primary-800);
-  --lighter-background-color: var(--color-neutral-100);
-  --lightest-background-color: var(--color-neutral-50);
-  --docs-lightest-background-color: var(--color-primary-50);
-  --hero-background-color: var(--color-neutral-25);
-  --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
-
-html[data-theme="dark"] {
-  --body-background-color: var(--color-neutral-900);
-  --body-text-color: var(--color-neutral-300);
-  --headings-color: #fff;
-  --divider-color: var(--color-neutral-600);
-  --border-color: var(--color-neutral-500);
-  --icon-color: var(--body-text-color);
-  --dark-icon-color: #fff;
-  --link-color: var(--color-primary-400);
-  --lighter-background-color: var(--color-neutral-800);
-  --lightest-background-color: var(--color-neutral-800);
-  --docs-lightest-background-color: var(--color-neutral-800);
-  --hero-background-color: var(--color-neutral-800);
-  --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
-
-/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */
-:root {
-  --fc-3xs-min: (var(--fc-s-min) * 0.25);
-  --fc-3xs-max: (var(--fc-s-max) * 0.25);
-  --fc-2xs-min: (var(--fc-s-min) * 0.5);
-  --fc-2xs-max: (var(--fc-s-max) * 0.5);
-  --fc-xs-min: (var(--fc-s-min) * 0.75);
-  --fc-xs-max: (var(--fc-s-max) * 0.75);
-  --fc-s-min: (var(--f-0-min));
-  --fc-s-max: (var(--f-0-max));
-  --fc-m-min: (var(--fc-s-min) * 1.5);
-  --fc-m-max: (var(--fc-s-max) * 1.5);
-  --fc-l-min: (var(--fc-s-min) * 2);
-  --fc-l-max: (var(--fc-s-max) * 2);
-  --fc-xl-min: (var(--fc-s-min) * 3);
-  --fc-xl-max: (var(--fc-s-max) * 3);
-  --fc-2xl-min: (var(--fc-s-min) * 4);
-  --fc-2xl-max: (var(--fc-s-max) * 4);
-  --fc-3xl-min: (var(--fc-s-min) * 6);
-  --fc-3xl-max: (var(--fc-s-max) * 6);
-  --fc-4xl-min: (var(--fc-s-min) * 8);
-  --fc-4xl-max: (var(--fc-s-max) * 8);
-  /* T-shirt sizes */
-  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
-  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
-  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
-  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
-  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
-  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
-  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
-  --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp));
-  /* One-up pairs */
-  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
-  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
-  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
-  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
-  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
-  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
-  --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
-  /* Custom pairs */
-  --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --spacer-2x: 2rem;
-  --spacer-3x: 3rem;
-  --spacer-4x: 4rem;
-  --spacer-6x: 6rem;
-  --spacer-8x: 8rem; }
-
-/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
-:root {
-  --fluid-min-width: 320;
-  --fluid-max-width: 1280;
-  --fluid-screen: 100vw;
-  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); }
-
-@media screen and (min-width: 1280px) {
-  :root {
-    --fluid-screen: calc(var(--fluid-max-width) * 1px); } }
-
-:root {
-  --f--2-min: 12.64;
-  --f--2-max: 10.24;
-  --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
-  --f--1-min: 14.22;
-  --f--1-max: 12.80;
-  --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
-  --f-0-min: 16.00;
-  --f-0-max: 16.00;
-  --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
-  --f-1-min: 18.00;
-  --f-1-max: 20.00;
-  --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
-  --f-2-min: 20.25;
-  --f-2-max: 25.00;
-  --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
-  --f-3-min: 22.78;
-  --f-3-max: 31.25;
-  --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
-  --f-4-min: 25.63;
-  --f-4-max: 39.06;
-  --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
-  --f-5-min: 28.83;
-  --f-5-max: 48.83;
-  --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
-  --f-6-min: 32.44;
-  --f-6-max: 61.04;
-  --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); }
-
-:root {
-  --mono-font: "Space Mono", monospace;
-  --text-font: "Inter",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol";
-  --display-font: "Space Grotesk",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol"; }
-
-:root {
-  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
-                 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
-  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  --border-radius: .5rem; }
-
-body {
-  font-size: var(--step-0);
-  line-height: 1.5; }
-
-.eyebrow {
-  color: var(--link-color);
-  font-size: 1rem;
-  font-weight: 500;
-  display: block;
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--display-font);
-  color: var(--headings-color);
-  font-weight: 500;
-  margin-top: 0;
-  margin-block-start: 0; }
-
-.post-main h2,
-.docs-main h2,
-.components-main h2, .post-main
-h3,
-.docs-main
-h3,
-.components-main
-h3, .post-main
-h4,
-.docs-main
-h4,
-.components-main
-h4, .post-main
-h5,
-.docs-main
-h5,
-.components-main
-h5, .post-main
-h6,
-.docs-main
-h6,
-.components-main
-h6 {
-  margin-top: 3rem;
-  margin-bottom: 1.5rem;
-  margin-block-start: 3rem;
-  margin-block-end: 1.5rem; }
-  .post-main h2:first-child,
-  .docs-main h2:first-child,
-  .components-main h2:first-child, .post-main
-  h3:first-child,
-  .docs-main
-  h3:first-child,
-  .components-main
-  h3:first-child, .post-main
-  h4:first-child,
-  .docs-main
-  h4:first-child,
-  .components-main
-  h4:first-child, .post-main
-  h5:first-child,
-  .docs-main
-  h5:first-child,
-  .components-main
-  h5:first-child, .post-main
-  h6:first-child,
-  .docs-main
-  h6:first-child,
-  .components-main
-  h6:first-child {
-    margin-top: 0;
-    margin-block-start: 0; }
-
-h6,
-.h6 {
-  font-size: var(--step-0); }
-
-h5,
-.h5 {
-  font-size: var(--step-1); }
-
-h4,
-.h4 {
-  font-size: var(--step-2); }
-
-h3,
-.h3 {
-  font-size: var(--step-3);
-  line-height: 1.2; }
-
-h2,
-.h2 {
-  font-size: var(--step-4);
-  line-height: 1.2; }
-
-h1,
-.h1 {
-  font-size: var(--step-5);
-  line-height: 1.2; }
-
-.h0 {
-  font-size: var(--step-6);
-  line-height: 1.2; }
-
-small,
-caption,
-cite,
-figcaption {
-  font-size: var(--step--1); }
-
-.docs-main h6,
-.docs-main .h6 {
-  font-size: var(--step-0); }
-
-.docs-main h5,
-.docs-main .h5 {
-  font-size: var(--step-0); }
-
-.docs-main h4,
-.docs-main .h4 {
-  font-size: var(--step-1); }
-
-.docs-main h3,
-.docs-main .h3 {
-  font-size: var(--step-2);
-  line-height: 1.2; }
-
-.docs-main h2,
-.docs-main .h2 {
-  font-size: var(--step-3);
-  line-height: 1.2; }
-
-.docs-main h1,
-.docs-main .h1 {
-  font-size: var(--step-4);
-  line-height: 1.2; }
-
-::selection {
-  background-color: var(--color-brand);
-  color: #fff; }
-
-h1:target,
-h2:target,
-h3:target,
-h4:target,
-h5:target,
-h6:target {
-  background-color: var(--lighter-background-color); }
-
-*:focus {
-  outline: none; }
-
-*:focus-visible {
-  outline: 2px solid var(--outline-color);
-  outline-offset: 3px; }
-
-*.focus-visible {
-  outline: 2px solid var(--outline-color);
-  outline-offset: 3px; }
-
-*:focus:not(:focus-visible) {
-  outline: 1px solid transparent;
-  box-shadow: none; }
-
-.js-focus-visible *:focus:not(.focus-visible) {
-  outline: 1px solid transparent;
-  box-shadow: none; }
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box; }
-
-html {
-  accent-color: var(--link-color);
-  background-color: var(--body-background-color);
-  height: 100%;
-  font-family: var(--text-font);
-  overflow-x: hidden;
-  caret-color: var(--link-color); }
-
-body {
-  position: relative;
-  margin: 0 auto;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  background-color: var(--body-background-color);
-  color: var(--body-text-color); }
-
-#skip-link {
-  position: fixed;
-  top: -30em;
-  left: 0;
-  right: auto;
-  offset-block-start: -30em;
-  offset-inline-start: 0;
-  offset-inline-end: auto;
-  z-index: 999;
-  transition: top .1s linear; }
-  #skip-link:focus {
-    outline: 2px solid transparent;
-    top: 2px;
-    offset-block-start: 2px; }
-  #skip-link:focus-visible {
-    outline: 2px solid transparent;
-    top: 2px;
-    offset-block-start: 2px; }
-
-main {
-  flex: 1; }
-  main:focus {
-    outline: none; }
-  main:target {
-    outline: none; }
-
-hr {
-  border: none;
-  border-top: 1px solid var(--divider-color);
-  border-block-start: 1px solid var(--divider-color);
-  background: none;
-  height: 0;
-  margin: 2rem 0; }
-
-.content-container {
-  width: 100%;
-  margin: 0 auto;
-  padding: var(--space-xl-3xl) calc(1rem + 1vw); }
-
-.section-head .section-supporting-text {
-  text-align: center;
-  max-width: 768px;
-  margin: 0 auto var(--space-l-2xl); }
-
-.section-foot {
-  margin-top: var(--space-l-2xl);
-  margin-block-start: var(--space-l-2xl); }
-  .section-foot .section-supporting-text {
-    text-align: center;
-    font-size: var(--step--1);
-    max-width: 768px;
-    margin: 0 auto; }
-
-.section-title {
-  margin-bottom: 1rem;
-  margin-block-end: 1rem; }
-
-.section-supporting-text {
-  font-size: var(--step-1); }
-
-code,
-pre {
-  font-family: var(--mono-font); }
-
-code {
-  color: var(--link-color); }
-  pre code {
-    color: unset; }
-
-p:empty {
-  display: none;
-  margin: 0; }
-
-.c-icon {
-  color: var(--icon-color);
-  flex: none;
-  transition: all .2s linear; }
-  @media (-ms-high-contrast: active) {
-    .c-icon {
-      color: windowText; } }
-  @media (forced-colors: active) {
-    .c-icon {
-      color: canvasText; } }
-
-table {
-  width: 100%;
-  margin: 2.5rem 0;
-  border-collapse: collapse;
-  border: 1px solid var(--divider-color); }
-  table td {
-    padding: .25rem .5rem;
-    border: 1px solid var(--divider-color); }
-  table th {
-    background-color: var(--lightest-background-color);
-    padding: .25rem .5rem; }
-
-.c-btn .c-icon:hover,
-button .c-icon:hover,
-a .c-icon:hover {
-  color: var(--link-color); }
-
-a {
-  color: var(--link-color);
-  transition: color .1s linear; }
-  .side-header a {
-    color: inherit;
-    text-decoration: none; }
-
-svg {
-  flex: none;
-  transition: color .1s linear; }
-
-p {
-  margin: 0 0 1.5em; }
-  :matches(nav, .posts-collection) p {
-    margin-bottom: .75em;
-    margin-block-end: .75em; }
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word; }
-
-ul,
-ol {
-  margin-top: 0;
-  margin-block-start: 0; }
-  ul li,
-  ol li {
-    margin: 0 0 .75em; }
-  .person__bio ul, .person__bio
-  ol {
-    padding-left: 1.5rem;
-    padding-inline-start: 1.5rem; }
-
-.docs-main ul,
-.post-main ul,
-.docs-main ol,
-.post-main ol {
-  margin: 1rem 0; }
-
-ul[role="list"] {
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-  ul[role="list"] li {
-    margin: 0; }
-
-ol {
-  list-style: decimal; }
-  ol li::marker {
-    color: var(--link-color); }
-
-p:empty {
-  margin: 0;
-  display: none; }
-
-figure {
-  margin-bottom: 4rem;
-  margin-block-end: 4rem; }
-  figure img {
-    margin-bottom: 1rem;
-    margin-block-end: 1rem; }
-  figure figcaption {
-    color: var(--grey); }
-
-img {
-  display: block;
-  position: relative;
-  max-width: 100%;
-  height: auto; }
-
-nav {
-  /* rarely do we display bullets for lists in navigation */ }
-  nav ol,
-  nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0; }
-
-.video {
-  width: 90%;
-  max-width: 1400px;
-  margin: 2em auto; }
-  .video iframe {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    height: auto; }
-
-@media (prefers-reduced-motion: no-preference) {
-  *:focus-visible,
-  *.focus-visible {
-    transition: outline-offset .15s linear;
-    outline-offset: 3px; } }
-
-code[class*="language-"],
-pre[class*="language-"] {
-  font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none; }
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none; } }
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  overflow: auto;
-  background-color: var(--color-neutral-50);
-  border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color);
-  color: var(--color-neutral-900); }
-  [data-theme="dark"] pre[class*="language-"] {
-    color: var(--color-neutral-100); }
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background-color: var(--lightest-background-color); }
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal; }
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #6E7F8E; }
-  [data-theme="dark"] .token.comment, [data-theme="dark"]
-  .token.prolog, [data-theme="dark"]
-  .token.doctype, [data-theme="dark"]
-  .token.cdata {
-    color: #8E9FAE; }
-
-.token.namespace {
-  opacity: .7; }
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: var(--link-color); }
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: var(--link-color); }
-
-.token.important,
-.token.bold {
-  font-weight: bold; }
-
-.token.italic {
-  font-style: italic; }
-
-.token.entity {
-  cursor: help; }
-
-pre {
-  counter-reset: lineNumber; }
-
-code .highlight-line:before {
-  -webkit-user-select: none;
-  color: var(--icon-color);
-  content: counter(lineNumber);
-  counter-increment: lineNumber;
-  display: inline-block;
-  font-variant-numeric: tabular-nums;
-  margin-right: 1.2em;
-  padding-right: 1.2em;
-  margin-inline-end: 1.2em;
-  padding-inline-end: 1.2em;
-  text-align: right;
-  width: 2.4em; }
-
-.site-header {
-  padding: .75rem 0;
-  border-top: 4px solid var(--link-color);
-  border-bottom: 1px solid var(--divider-color);
-  border-block-start: 4px solid var(--link-color);
-  border-block-end: 1px solid var(--divider-color); }
-  .site-header .docs-wrapper {
-    display: grid;
-    align-items: start;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-block-start: 0;
-    padding-block-end: 0; }
-    @media all and (min-width: 1024px) {
-      .site-header .docs-wrapper {
-        justify-content: space-between; } }
-
-.logo-link {
-  display: inline-flex;
-  justify-self: start;
-  flex: none;
-  place-content: center;
-  grid-column: 1 / -1;
-  grid-row: 1;
-  padding: .5rem 0; }
-
-.logo svg {
-  display: inline-block;
-  margin-bottom: -4px;
-  margin-block-end: -4px;
-  width: 100%;
-  max-width: 100px;
-  height: auto; }
-
-.docs-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  justify-content: space-between;
-  align-items: baseline; }
-  @media all and (max-width: 800px) {
-    .docs-footer {
-      padding: 1.5rem 0 4rem; } }
-
-.copyright p {
-  margin: 0; }
-
-.docs-socials-and-legal {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem; }
-  @media all and (max-width: 800px) {
-    .docs-socials-and-legal {
-      text-align: center; } }
-
-.docs-switchers {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem; }
-  .docs-switchers .theme-switcher,
-  .docs-switchers .language-switcher {
-    flex: 1 1 240px; }
-  @media all and (max-width: 800px) {
-    .docs-switchers .theme-switcher {
-      justify-content: center; } }
-  @media all and (max-width: 800px) {
-    .docs-switchers .language-switcher {
-      justify-content: center; } }
-
-.site-footer {
-  text-align: center;
-  background-color: var(--footer-background-color);
-  border-top: 1px solid var(--divider-color);
-  border-block-start: 1px solid var(--divider-color); }
-
-.footer-cta .logo {
-  margin-bottom: 2.5rem;
-  margin-block-end: 2.5rem; }
-
-.footer-cta .section-supporting-text {
-  margin-bottom: 2.5rem;
-  margin-block-end: 2.5rem; }
-
-.footer-cta .eslint-actions {
-  justify-content: center; }
-
-.footer-legal-links ul li {
-  display: inline-block;
-  margin-right: .5rem;
-  margin-inline-end: .5rem; }
-  .footer-legal-links ul li:not(:last-of-type)::after {
-    content: "|";
-    margin-left: .5rem;
-    margin-inline-start: .5rem; }
-
-.footer-legal-section {
-  font-size: var(--step--1);
-  padding: 2rem 1rem; }
-
-.copyright {
-  max-width: 1100px;
-  margin: 0 auto; }
-
-.footer-middle {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  padding-block-start: 2rem;
-  padding-block-end: 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem; }
-  @media all and (min-width: 768px) {
-    .footer-middle {
-      flex-direction: row;
-      justify-content: space-between; } }
-
-.c-custom-select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0px;
-  padding: .625rem .875rem;
-  padding-right: calc(.875rem * 3);
-  padding-inline-end: calc(.875rem * 3);
-  font: inherit;
-  color: var(--body-text-color);
-  color: inherit;
-  line-height: 1.3;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-xs);
-  background-color: var(--body-background-color);
-  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
-  background-repeat: no-repeat, repeat;
-  background-position: right calc(.875rem * 1.5) top 50%, 0 0;
-  background-size: 1em auto, 100%; }
-
-.label__text.label__text {
-  display: block;
-  display: flex;
-  font-size: .875rem;
-  color: inherit;
-  align-items: center;
-  gap: .5rem;
-  font-size: .875rem;
-  font-family: var(--text-font);
-  color: inherit;
-  font-weight: 400;
-  line-height: 1.5;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-
-input {
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  padding: .625rem .875rem;
-  font: inherit;
-  font-size: 1rem;
-  display: block;
-  min-width: 0;
-  max-width: 100%;
-  background-color: var(--body-background-color);
-  color: inherit; }
-
-.docs {
-  max-width: 1700px;
-  margin: 0 auto; }
-
-.docs-ad {
-  flex: 1; }
-
-.docs-wrapper {
-  padding: 0 calc(1rem + 1vw);
-  flex: 1; }
-  @media all and (min-width: 1023px) {
-    .docs-wrapper {
-      display: grid;
-      grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
-      grid-gap: 0rem;
-      align-items: stretch; } }
-
-.docs-left-sidebar {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-  padding: calc(1rem + 1vw) 0;
-  font-size: .875rem;
-  display: grid;
-  grid-auto-rows: max-content;
-  align-items: start; }
-  @media all and (min-width: 1023px) {
-    .docs-left-sidebar {
-      border-right: 1px solid var(--divider-color);
-      border-right: 1px solid var(--divider-color);
-      padding-right: calc(1rem + 1vw);
-      padding-inline-end: calc(1rem + 1vw); } }
-
-.docs-content {
-  grid-column: 2 / 3; }
-  @media all and (min-width: 800px) {
-    .docs-content {
-      display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
-      grid-gap: 2rem; } }
-  @media all and (min-width: 1023px) {
-    .docs-content {
-      padding: calc(2rem + 1vw) 0; } }
-
-.docs-main {
-  flex: 1 1 65ch; }
-  @media all and (min-width: 1023px) {
-    .docs-main {
-      padding: 0 2rem; } }
-
-.docs-right-sidebar {
-  grid-column: 2 / 3;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 200px; }
-
-.docs-toc {
-  flex: 1;
-  align-self: center; }
-
-.docs-edit-link {
-  border-top: 1px solid var(--divider-color);
-  padding-top: 1.5rem;
-  padding-block-start: 1.5rem;
-  margin: 3rem 0; }
-
-div[data-correct-code],
-div[data-incorrect-code] {
-  position: relative; }
-  div[data-correct-code]::after,
-  div[data-incorrect-code]::after {
-    position: absolute;
-    top: -22px;
-    right: -22px;
-    offset-inline-end: -22px;
-    offset-block-start: -22px; }
-
-div[data-correct-code]::after {
-  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); }
-
-div[data-incorrect-code]::after {
-  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); }
-
-pre[class*="language-"] {
-  position: relative; }
-
-.c-btn.c-btn--playground {
-  position: absolute;
-  font-size: var(--step--1);
-  bottom: .5rem;
-  right: .5rem;
-  offset-block-end: .5rem;
-  offset-inline-end: .5rem; }
-  @media all and (max-width: 768px) {
-    .c-btn.c-btn--playground {
-      display: none; } }
-
-button {
-  border: none;
-  background: none;
-  font: inherit;
-  cursor: pointer;
-  line-height: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center; }
-
-.c-btn {
-  background: none;
-  border: none;
-  font: inherit;
-  font-family: var(--text-font);
-  cursor: pointer;
-  line-height: inherit;
-  font-weight: 500;
-  font-size: var(--step-0);
-  display: inline-flex;
-  padding: .75em 1.125em;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius);
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-btn svg {
-    color: inherit; }
-
-.c-btn--large {
-  font-size: 1.125rem;
-  padding: .88em 1.5em; }
-
-.c-btn--block {
-  display: flex;
-  width: 100%; }
-
-a.c-btn {
-  text-decoration: none;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-  align-items: center; }
-
-.c-btn--primary {
-  background-color: var(--primary-button-background-color);
-  color: var(--primary-button-text-color); }
-  .c-btn--primary:hover {
-    background-color: var(--primary-button-hover-color); }
-
-.c-btn--secondary {
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .c-btn--secondary:hover {
-    background-color: var(--secondary-button-hover-color); }
-
-.c-btn--ghost {
-  color: var(--body-text-color);
-  border: 1px solid var(--border-color); }
-  .c-btn--ghost:hover {
-    border-color: var(--link-color); }
-
-.docs-site-nav {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  grid-column: 1 / -1;
-  grid-row: 1; }
-  .docs-site-nav ul {
-    list-style: none;
-    font-size: var(--step-1);
-    margin-top: 1rem;
-    margin-block-start: 1rem;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-    @media all and (min-width: 1023px) {
-      .docs-site-nav ul {
-        font-size: var(--step-0);
-        margin-top: 0;
-        margin-block-start: 0;
-        margin-bottom: 0;
-        margin-block-end: 0;
-        align-items: center;
-        display: flex; } }
-  .docs-site-nav .flexer {
-    display: flex;
-    justify-self: flex-end;
-    align-self: flex-end; }
-  .docs-site-nav a:not(.c-btn) {
-    text-decoration: none;
-    color: inherit;
-    transition: color .2s linear; }
-    .docs-site-nav a:not(.c-btn):hover {
-      color: var(--link-color); }
-  .docs-site-nav a:not(.c-btn)[aria-current="page"],
-  .docs-site-nav a:not(.c-btn)[aria-current="true"] {
-    color: var(--link-color);
-    text-decoration: none;
-    font-weight: 500; }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel {
-    display: flex;
-    flex-direction: row;
-    justify-content: center; } }
-
-.docs-nav-panel[data-open="false"] {
-  display: none; }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel[data-open="true"] {
-    display: flex;
-    flex-direction: row;
-    justify-content: center; } }
-
-@media all and (min-width: 1023px) {
-  .docs-nav-panel .mobile-only {
-    display: none; } }
-
-.docs-site-nav-toggle {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  margin-left: .5rem;
-  margin-right: -10px;
-  margin-inline-start: .5rem;
-  margin-inline-end: -10px; }
-  .docs-site-nav-toggle svg {
-    width: 40px;
-    height: 40px;
-    color: var(--headings-color);
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-site-nav-toggle #ham-top,
-  .docs-site-nav-toggle #ham-middle,
-  .docs-site-nav-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-site-nav-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-site-nav-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-@media all and (min-width: 1023px) {
-  .docs-site-nav {
-    flex-direction: row;
-    grid-column: auto;
-    gap: 2rem; }
-    .docs-site-nav ul {
-      display: flex;
-      gap: 2rem;
-      font-size: var(--step-0); }
-      .docs-site-nav ul li {
-        margin-bottom: 0;
-        margin-block-end: 0; }
-    .docs-site-nav .flexer {
-      order: 1; } }
-
-.docs-toc {
-  margin: 2rem 0; }
-
-.c-toc ol {
-  margin: 0; }
-  .c-toc ol li {
-    position: relative;
-    margin-bottom: .25rem;
-    margin-block-end: .25rem;
-    padding-left: 1rem;
-    padding-inline-start: 1rem; }
-    .c-toc ol li > ol {
-      margin-top: .25rem; }
-  .c-toc ol li::before {
-    content: "└";
-    color: var(--icon-color);
-    position: absolute;
-    left: -.4rem;
-    offset-inline-start: -.4rem; }
-
-.c-toc a {
-  text-decoration: none;
-  color: var(--headings-color); }
-  .c-toc a:hover {
-    color: var(--link-color); }
-
-.c-toc__label.c-toc__label {
-  font-size: var(--step-0);
-  color: var(--body-text-color);
-  font-family: var(--text-font);
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
-
-.c-toc__label {
-  width: fit-content; }
-  .c-toc__label button {
-    color: var(--link-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font: inherit;
-    font-size: inherit;
-    font-weight: 500;
-    width: 100%;
-    height: 100%;
-    text-align: left;
-    line-height: 1.5;
-    padding: 0;
-    border-radius: 0;
-    position: relative;
-    border: none;
-    transition: outline 0.1s linear; }
-    .c-toc__label button svg {
-      flex: none; }
-
-/* Styles for the accordion icon */
-.toc-trigger-icon {
-  display: block !important;
-  width: 0.75rem;
-  height: 0.5rem;
-  transform-origin: 50% 50%;
-  margin-left: 3rem;
-  margin-inline-start: 3rem;
-  transition: all 0.1s linear;
-  color: var(--color-neutral-400); }
-  [aria-expanded="true"] .toc-trigger-icon {
-    -ms-transform: translateY(-50%) rotate(180deg);
-    transform: translateY(-50%) rotate(180deg); }
-
-.c-toc__panel[data-open="false"] {
-  display: none; }
-
-.c-toc__panel[data-open="true"] {
-  display: block; }
-
-.search {
-  margin-bottom: 1.5rem; }
-
-.search__input-wrapper {
-  position: relative; }
-
-.search__input {
-  padding-left: 2.5rem;
-  padding-inline-start: 2.5rem;
-  outline-offset: 1px;
-  width: 100%; }
-
-.search__icon {
-  color: var(--body-text-color);
-  position: absolute;
-  top: 50%;
-  offset-block-start: 50%;
-  transform: translateY(-50%);
-  left: .75rem;
-  offset-inline-start: .75rem; }
-
-.algolia-docsearch-suggestion--highlight {
-  background-color: var(--color-warning-300); }
-
-.alert {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  padding: 1rem;
-  gap: .75rem;
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem;
-  align-items: start;
-  font-size: .875rem;
-  background-color: var(--body-background-color);
-  border-radius: var(--border-radius); }
-  .alert.alert--warning {
-    border: 1px solid var(--color-rose-300); }
-  .alert.alert--important {
-    border: 1px solid var(--color-warning-300); }
-  .alert.alert--tip {
-    border: 1px solid var(--color-success-300); }
-
-[data-theme="dark"] .alert.alert--warning {
-  border: 1px solid var(--color-rose-300); }
-
-[data-theme="dark"] .alert.alert--important {
-  border: 1px solid var(--color-warning-300); }
-
-[data-theme="dark"] .alert.alert--tip {
-  border: 1px solid var(--color-success-300); }
-
-.alert__icon {
-  color: inherit;
-  position: relative;
-  top: 2px;
-  offset-block-start: 2px; }
-
-.alert__type {
-  font-weight: 500;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-
-.alert--warning {
-  color: var(--color-rose-600); }
-
-.alert--important {
-  color: var(--color-warning-600); }
-
-.alert--tip {
-  color: var(--color-success-600); }
-
-[data-theme="dark"] .alert--warning {
-  color: var(--color-rose-400); }
-
-[data-theme="dark"] .alert--important {
-  color: var(--color-warning-400); }
-
-[data-theme="dark"] .alert--tip {
-  color: var(--color-success-400); }
-
-.alert__type {
-  font-weight: 500;
-  margin-bottom: .25rem; }
-  .alert--warning .alert__type {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__type {
-      color: var(--color-rose-300); }
-  .alert--important .alert__type {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__type {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__type {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__type {
-      color: var(--color-success-300); }
-
-.alert__learn-more {
-  display: block;
-  font-weight: 500;
-  margin-top: .75rem;
-  margin-block-start: .75rem; }
-  .alert--warning .alert__learn-more {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__learn-more {
-      color: var(--color-rose-300); }
-  .alert--important .alert__learn-more {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__learn-more {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__learn-more {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__learn-more {
-      color: var(--color-success-300); }
-
-.rule-categories {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem 1rem;
-  margin-bottom: 3rem; }
-  .rule-categories .rule-category {
-    margin: 0;
-    padding: 0;
-    background: none;
-    border: none; }
-  .rule-categories .rule-category__description {
-    flex: 1 1 45ch; }
-
-.rule-category {
-  font-size: var(--step--1);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  margin: 1.5rem 0;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  background-color: var(--lightest-background-color); }
-  .rule-category p {
-    margin: 0; }
-  .rule-category .rule-category__description {
-    flex: 1 1 30ch; }
-
-.rule {
-  border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  margin: .5rem 0;
-  position: relative; }
-  .rule p:last-of-type {
-    margin: 0; }
-
-.rule__content {
-  flex: 1 1 35ch; }
-
-.rule__name {
-  font-weight: 500;
-  font-size: .875rem;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-  .rule__name::after {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    offset-block-start: 0;
-    left: 0;
-    offset-inline-start: 0; }
-
-a.rule__name {
-  text-decoration: none; }
-  a.rule__name:hover {
-    text-decoration: underline; }
-
-.rule__description {
-  font-size: var(--step--1); }
-
-.rule__categories {
-  font-size: .875rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  border-radius: var(--border-radius);
-  padding: 2px 4px; }
-  .rule__categories p {
-    display: inline-flex;
-    margin: 0;
-    align-items: center; }
-  [data-theme="dark"] .rule__categories {
-    background: var(--body-background-color); }
-
-.rule__status {
-  color: var(--color-rose-500);
-  background: var(--color-rose-50);
-  border-radius: var(--border-radius);
-  display: inline-block;
-  font-weight: normal;
-  margin-left: .5rem;
-  margin-inline-start: .5rem;
-  font-size: var(--step--1);
-  padding: 0 .5rem; }
-  [data-theme="dark"] .rule__status {
-    background: var(--body-background-color); }
-
-.rule__categories__type[aria-hidden="true"] {
-  opacity: .25; }
-
-/* related rules */
-.related-rules__list {
-  display: flex;
-  gap: .5rem;
-  flex-wrap: wrap;
-  justify-content: start; }
-
-.related-rules__list__item svg {
-  color: inherit; }
-
-.related-rules__list__item a {
-  text-decoration: none;
-  color: var(--headings-color);
-  padding: .625rem;
-  display: inline-flex;
-  gap: .5rem;
-  align-items: center;
-  border: 1px solid var(--divider-color);
-  border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color); }
-  .related-rules__list__item a:hover {
-    color: var(--link-color);
-    background-color: var(--lighter-background-color); }
-
-.languages-list {
-  margin: 0;
-  padding: 0;
-  font-size: var(--step-0); }
-  .languages-list li {
-    margin: 0; }
-    .languages-list li:last-of-type a {
-      border-bottom: 0; }
-  .languages-list a {
-    color: inherit;
-    display: block;
-    width: 100%;
-    padding: .75rem .1rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .languages-list a[aria-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .languages-list a[aria-current="true"]::after {
-        content: "✔️"; }
-    .languages-list a:hover {
-      color: var(--link-color); }
-
-.languages-section .flag {
-  font-size: 2em;
-  margin-right: .5rem;
-  margin-inline-end: .5rem; }
-
-.languages-section .languages-list {
-  font-size: var(--step-1);
-  border-left: 4px solid var(--tab-border-color);
-  padding-left: 1rem;
-  border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
-
-.versions-list {
-  margin: 0;
-  padding: 0;
-  font-size: var(--step-1); }
-  .versions-list li {
-    margin: 0; }
-    .versions-list li:last-of-type a {
-      border-bottom: 0;
-      border-block-end: 0; }
-  .versions-list a {
-    color: var(--link-color);
-    display: block;
-    width: 100%;
-    padding: 1rem .5rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .versions-list a[data-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .versions-list a[data-current="true"]::after {
-        content: "✔️"; }
-    .versions-list a:hover {
-      background-color: var(--lightest-background-color); }
-
-.versions-section .versions-list {
-  font-size: var(--step-1);
-  border-left: 4px solid var(--tab-border-color);
-  padding-left: 1rem;
-  border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
-
-.eslint-social-icons {
-  margin-bottom: -1rem;
-  margin-block-end: -1rem; }
-  .eslint-social-icons ul {
-    margin: 0;
-    padding: 0;
-    margin-left: -1rem;
-    margin-inline-start: -1rem;
-    display: inline-flex; }
-    .eslint-social-icons ul li {
-      margin: 0;
-      display: inline-flex;
-      align-items: center; }
-      .eslint-social-icons ul li a {
-        display: flex;
-        padding: 1rem; }
-
-@media all and (min-width: 800px) {
-  .hero .grid {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-gap: 2rem;
-    align-items: center; } }
-
-.hero .grid .span-1-7 {
-  grid-column: 1 / 2; }
-
-.hero .grid .span-10-12 {
-  grid-column: 2 / 3;
-  justify-self: end; }
-
-.hero {
-  border-bottom: 1px solid var(--divider-color);
-  border-block-end: 1px solid var(--divider-color);
-  background-color: var(--hero-background-color); }
-  @media all and (min-width: 800px) {
-    .hero {
-      min-height: calc(285px + var(--space-xl-4xl)); } }
-  .hero .content-container {
-    padding: var(--space-xl-4xl) 0;
-    margin: 0; }
-  .hero > .content-container {
-    margin: 0 auto;
-    padding: 0 calc(1rem + 1vw);
-    padding-bottom: 0;
-    align-items: center; }
-
-.hero--homepage .section-title {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-.hero--homepage .section-supporting-text {
-  margin: 0;
-  font-size: var(--step-1);
-  text-align: left; }
-
-.hero--homepage .eslint-actions {
-  font-size: var(--step-1);
-  margin-top: 3rem;
-  margin-block-start: 3rem; }
-
-.theme-switcher {
-  display: inline-flex;
-  align-items: center;
-  gap: .5rem;
-  position: relative; }
-
-.theme-switcher-label.theme-switcher-label {
-  font-size: inherit;
-  color: inherit;
-  font: inherit;
-  font-family: var(--text-font);
-  margin: 0; }
-
-.theme-switcher__buttons {
-  display: flex;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--body-background-color); }
-
-.theme-switcher__button {
-  flex: 0;
-  box-shadow: var(--shadow-xs);
-  padding: .625rem .875rem;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  width: 40px;
-  height: 40px; }
-  .theme-switcher__button:first-of-type {
-    border-right: 0.5px solid var(--border-color);
-    border-inline-end: 0.5px solid var(--border-color); }
-  .theme-switcher__button:last-of-type {
-    border-left: 0.5px solid var(--border-color);
-    border-inline-start: 0.5px solid var(--border-color); }
-  .theme-switcher__button .theme-switcher__icon {
-    color: var(--icon-color); }
-  .theme-switcher__button:hover .theme-switcher__icon {
-    color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"] .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="false"] .theme-switcher__icon {
-  color: var(--icon-color); }
-
-.theme-switcher__button[aria-pressed="false"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.version-switcher {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-.switcher--language {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: .25rem .5rem;
-  position: relative;
-  min-width: 15rem;
-  padding: 0; }
-
-.switcher--language .label__text {
-  flex: 1 0 10ch; }
-
-.switcher--language .switcher__select {
-  min-width: 15rem;
-  flex: 1 0 15rem; }
-
-.language-switcher {
-  display: inline-flex; }
-
-.docs-index a {
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: .5rem .75rem;
-  margin-left: -.75rem;
-  margin-inline-start: -.75rem;
-  color: var(--headings-color); }
-  .docs-index a:hover, .docs-index a[aria-current="true"] {
-    background-color: var(--docs-lightest-background-color);
-    color: var(--link-color); }
-
-.docs-index__item {
-  margin: 0; }
-  .docs-index__item ul ul {
-    padding-left: .75rem; }
-  .docs-index__item[data-has-children] {
-    margin-bottom: .5rem; }
-
-.docs-index > ul > .docs-index__item {
-  margin-top: 1.5rem;
-  margin-block-start: 1.5rem; }
-  .docs-index > ul > .docs-index__item > a {
-    color: var(--icon-color);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: .875rem;
-    font-weight: 500; }
-
-/* Styles for the accordion icon */
-.index-js .index-icon {
-  display: block !important;
-  width: 0.75rem;
-  height: 0.5rem;
-  transform-origin: 50% 50%;
-  transition: all 0.1s linear;
-  color: inherit; }
-
-.index-js [aria-expanded="true"] .index-icon {
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg); }
-
-.index-js [aria-hidden="true"] {
-  display: none; }
-
-.index-js [aria-hidden="false"] {
-  display: block; }
-
-.docs-index__list[data-open="false"] {
-  display: none; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="false"] {
-      display: block; } }
-
-.docs-index__list[data-open="true"] {
-  display: block; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="true"] {
-      display: block; } }
-
-.docs-index-toggle {
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: .5rem;
-  font-weight: 500;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .docs-index-toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .docs-index-toggle {
-      display: none; } }
-  .docs-index-toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-index-toggle #ham-top,
-  .docs-index-toggle #ham-middle,
-  .docs-index-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-index-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-index-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-index-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-index-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-index-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-.c-tabs pre {
-  margin-top: 0;
-  margin-block-start: 0; }
-
-.js-tabs .c-tabs__tablist {
-  display: flex;
-  justify-content: start; }
-
-.c-tabs__tab {
-  background: none;
-  border: none;
-  margin: 0;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  line-height: inherit;
-  font-weight: 500;
-  font-size: var(--step-0);
-  display: inline-flex;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-tabs__tab:hover {
-    color: var(--link-color); }
-  .c-tabs__tab[aria-selected="true"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color); }
-
-.c-tabs__tabpanel {
-  margin-bottom: 2rem;
-  margin-block-end: 2rem;
-  background-color: var(--lightest-background-color);
-  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); }
-  .js-tabs .c-tabs__tabpanel {
-    margin-bottom: 0;
-    margin-block-end: 0; }
-
-.c-tabs__tabpanel__title {
-  margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
-.js-tabs .c-tabs__tabpanel__title {
-  display: none; }
-
-.resource {
-  display: flex;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--divider-color);
-  background-color: var(--lightest-background-color);
-  align-items: stretch;
-  overflow: hidden;
-  margin-bottom: .5rem;
-  margin-block-end: .5rem;
-  position: relative;
-  transition: all .2s linear; }
-  .resource:hover {
-    background-color: var(--lighter-background-color); }
-
-.resource__image {
-  flex: 1 0 5.5rem;
-  max-width: 5.5rem;
-  overflow: hidden;
-  padding: .25rem; }
-  .resource__image img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: contain; }
-
-.resource__content {
-  flex: 4;
-  padding: .75rem;
-  align-self: center; }
-
-.resource__title {
-  text-decoration: none;
-  color: var(--headings-color);
-  font-weight: 500;
-  margin-bottom: .125rem; }
-  .resource__title::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    offset-inline-start: 0;
-    top: 0;
-    block-inline-start: 0;
-    width: 100%;
-    height: 100%; }
-
-.resource__domain,
-.resource__domain a {
-  text-decoration: none;
-  color: var(--body-text-color);
-  font-size: .875rem; }
-
-.resource__icon {
-  color: var(--headings-color);
-  margin: 1rem;
-  align-self: center; }
-
-.index {
-  margin-bottom: 4rem;
-  margin-block-end: 4rem; }
-
-.index__item {
-  margin: 0; }
-  .index__item a {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-    padding: .625rem .875rem;
-    font-size: var(--step-0);
-    border-radius: var(--border-radius); }
-    .index__item a:hover {
-      color: var(--link-color); }
-  .index__item a[aria-current="page"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color);
-    font-weight: 500; }
-
-.index__toggle {
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  padding: .75rem 1.125rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: .5rem;
-  font-weight: 500;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--secondary-button-background-color);
-  color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .index__toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .index__toggle {
-      display: none; } }
-  .index__toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .index__toggle #ham-top,
-  .index__toggle #ham-middle,
-  .index__toggle #ham-bottom {
-    transition: all .2s linear; }
-  .index__toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .index__toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .index__toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .index__toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .index__toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
-
-.index__list {
-  display: block; }
-  .index__list[data-open="false"] {
-    display: none; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="false"] {
-        display: block; } }
-  .index__list[data-open="true"] {
-    display: block; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="true"] {
-        display: block; } }
-
-@media all and (max-width: 800px) {
-  .hero-ad {
-    display: none; } }
-
-#carbonads * {
-  margin: initial;
-  padding: initial; }
-
-#carbonads {
-  display: inline-block;
-  margin: 2rem 0;
-  padding: .6em;
-  font-size: 16px;
-  line-height: 1.35;
-  overflow: hidden;
-  border-radius: 4px;
-  background-color: var(--body-background-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1); }
-  .docs-main #carbonads {
-    margin: 0 0 2rem; }
-  @media all and (max-width: 800px) {
-    #carbonads {
-      display: none !important; } }
-
-.jumbotron #carbonads {
-  border: solid 1px rgba(111, 102, 153, 0.6);
-  background-color: rgba(179, 179, 179, 0.15); }
-
-#carbonads a {
-  font-weight: 500;
-  color: inherit; }
-
-#carbonads a:hover {
-  text-decoration: none;
-  color: inherit; }
-
-.jumbotron #carbonads a {
-  color: #eee; }
-
-.jumbotron #carbonads a:hover {
-  color: #ccc; }
-
-#carbonads span {
-  display: block;
-  position: relative;
-  overflow: hidden; }
-
-#carbonads .carbon-wrap {
-  display: flex;
-  flex-direction: column;
-  max-width: 130px; }
-
-#carbonads .carbon-img img {
-  display: block; }
-
-#carbonads .carbon-text {
-  margin-top: 10px;
-  font-size: 14px;
-  text-align: left; }
-
-#carbonads .carbon-poweredby {
-  display: block;
-  margin-top: 10px;
-  font-size: 10px;
-  line-height: 1;
-  letter-spacing: 1px;
-  text-transform: uppercase; }
-
-@media only screen and (min-width: 320px) and (max-width: 759px) {
-  #carbonads {
-    margin-top: 0;
-    font-size: 12px; }
-  #carbonads .carbon-wrap {
-    display: flex;
-    flex-direction: row;
-    max-width: 330px; }
-  #carbonads .carbon-text {
-    margin: 0 0 14px 10px;
-    font-size: 14px;
-    text-align: left; }
-  #carbonads .carbon-poweredby {
-    position: absolute;
-    bottom: 0;
-    left: 142px;
-    font-size: 8px; } }
-
-@media all and (min-width: 1023px) {
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-gap: 2rem;
-    align-items: start; } }
-
-.visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(100%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap; }
-
-[hidden] {
-  display: none !important; }
-
-@media all and (min-width: 1023px) {
-  .mobile-only {
-    display: none; } }
-
-@media all and (max-width: 1023px) {
-  .desktop-only {
-    display: none; } }
-
-.text.text {
-  font-size: inherit;
-  color: inherit;
-  font: inherit;
-  font-family: var(--text-font);
-  margin: 0; }
-
-.color-brand {
-  color: var(--link-color); }
-
-.font-weight-medium {
-  font-weight: 500; }
-
-.center-text {
-  text-align: center;
-  grid-column: 1 / -1; }
-
-.text-dark {
-  color: var(--headings-color); }
-
-.divider {
-  border-bottom: 1px solid var(--divider-color);
-  border-block-end: 1px solid var(--divider-color); }
-
-.fs-step--1 {
-  font-size: .875rem; }
-
-.fs-step-0 {
-  font-size: var(--step-0); }
-
-.fs-step-1 {
-  font-size: var(--step-1); }
-
-.fs-step-2 {
-  font-size: var(--step-2); }
-
-.fs-step-3 {
-  font-size: var(--step-3); }
-
-.fs-step-4 {
-  font-size: var(--step-4); }
-
-.fs-step-5 {
-  font-size: var(--step-5); }
-
-.fs-step-6 {
-  font-size: var(--step-6); }
-
-.grid--center-items {
-  align-items: center; }
-
-.span-1-3 {
-  grid-column: 1 / 4; }
-
-.span-1-4 {
-  grid-column: 1 / 5; }
-
-.span-1-5 {
-  grid-column: 1 / 6; }
-
-.span-1-6 {
-  grid-column: 1 / 7; }
-
-.span-1-7 {
-  grid-column: 1 / 8; }
-
-.span-1-12 {
-  grid-column: 1 / -1; }
-
-.span-4-12 {
-  grid-column: 4 / 13; }
-
-.span-6-12 {
-  grid-column: 6 / 13; }
-
-.span-7-12 {
-  grid-column: 7 / 13; }
-
-.span-8-12 {
-  grid-column: 8 / 13; }
-
-.span-10-12 {
-  grid-column: 10 / 13; }
-
-.span-11-12 {
-  grid-column: 11 / 13; }
-
-.span-4-9 {
-  grid-column: 4 / 10; }
-
-.span-4-11 {
-  grid-column: 4 / 11; }
-
-.span-5-12 {
-  grid-column: 5 / 12; }
-
-.span-3-10 {
-  grid-column: 3 / 11; }
-
-.span-6-7 {
-  grid-column: 6 / 8; }
-
-.span-5-8 {
-  grid-column: 5 / 9; }
diff --git a/docs/src/assets/css/tokens/spacing.css b/docs/src/assets/css/tokens/spacing.css
deleted file mode 100644
index f15a0705ef6..00000000000
--- a/docs/src/assets/css/tokens/spacing.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */
-:root {
-  --fc-3xs-min: (var(--fc-s-min) * 0.25);
-  --fc-3xs-max: (var(--fc-s-max) * 0.25);
-  --fc-2xs-min: (var(--fc-s-min) * 0.5);
-  --fc-2xs-max: (var(--fc-s-max) * 0.5);
-  --fc-xs-min: (var(--fc-s-min) * 0.75);
-  --fc-xs-max: (var(--fc-s-max) * 0.75);
-  --fc-s-min: (var(--f-0-min));
-  --fc-s-max: (var(--f-0-max));
-  --fc-m-min: (var(--fc-s-min) * 1.5);
-  --fc-m-max: (var(--fc-s-max) * 1.5);
-  --fc-l-min: (var(--fc-s-min) * 2);
-  --fc-l-max: (var(--fc-s-max) * 2);
-  --fc-xl-min: (var(--fc-s-min) * 3);
-  --fc-xl-max: (var(--fc-s-max) * 3);
-  --fc-2xl-min: (var(--fc-s-min) * 4);
-  --fc-2xl-max: (var(--fc-s-max) * 4);
-  --fc-3xl-min: (var(--fc-s-min) * 6);
-  --fc-3xl-max: (var(--fc-s-max) * 6);
-  --fc-4xl-min: (var(--fc-s-min) * 8);
-  --fc-4xl-max: (var(--fc-s-max) * 8);
-  /* T-shirt sizes */
-  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
-  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
-  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
-  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
-  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
-  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
-  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
-  --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp));
-  /* One-up pairs */
-  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
-  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
-  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
-  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
-  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
-  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
-  --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
-  /* Custom pairs */
-  --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
-  --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-  --spacer-2x: 2rem;
-  --spacer-3x: 3rem;
-  --spacer-4x: 4rem;
-  --spacer-6x: 6rem;
-  --spacer-8x: 8rem; }
diff --git a/docs/src/assets/css/tokens/themes.css b/docs/src/assets/css/tokens/themes.css
deleted file mode 100644
index a0967bd75f1..00000000000
--- a/docs/src/assets/css/tokens/themes.css
+++ /dev/null
@@ -1,131 +0,0 @@
-:root {
-  /* Tier 1 variables */
-  --color-neutral-25: #FCFCFD;
-  --color-neutral-50: #F9FAFB;
-  --color-neutral-100: #F2F4F7;
-  --color-neutral-200: #E4E7EC;
-  --color-neutral-300: #D0D5DD;
-  --color-neutral-400: #98A2B3;
-  --color-neutral-500: #667085;
-  --color-neutral-600: #475467;
-  --color-neutral-700: #344054;
-  --color-neutral-800: #1D2939;
-  --color-neutral-900: #101828;
-  --color-primary-25: #FBFBFF;
-  --color-primary-50: #F6F6FE;
-  --color-primary-100: #ECECFD;
-  --color-primary-200: #DEDEFF;
-  --color-primary-300: #CCCCFA;
-  --color-primary-400: #B7B7FF;
-  --color-primary-500: #A0A0F5;
-  --color-primary-600: #8080F2;
-  --color-primary-700: #6358D4;
-  --color-primary-800: #4B32C3;
-  --color-primary-900: #341BAB;
-  --color-warning-25: #FFFCF5;
-  --color-warning-50: #FFFAEB;
-  --color-warning-100: #FEF0C7;
-  --color-warning-200: #FEDF89;
-  --color-warning-300: #FEC84B;
-  --color-warning-400: #FDB022;
-  --color-warning-500: #F79009;
-  --color-warning-600: #DC6803;
-  --color-warning-700: #B54708;
-  --color-warning-800: #93370D;
-  --color-warning-900: #7A2E0E;
-  --color-success-25: #F6FEF9;
-  --color-success-50: #ECFDF3;
-  --color-success-100: #D1FADF;
-  --color-success-200: #A6F4C5;
-  --color-success-300: #6CE9A6;
-  --color-success-400: #32D583;
-  --color-success-500: #12B76A;
-  --color-success-600: #039855;
-  --color-success-700: #027A48;
-  --color-success-800: #05603A;
-  --color-success-900: #054F31;
-  --color-rose-25: #FFF5F6;
-  --color-rose-50: #FFF1F3;
-  --color-rose-100: #FFE4E8;
-  --color-rose-200: #FECDD6;
-  --color-rose-300: #FEA3B4;
-  --color-rose-400: #FD6F8E;
-  --color-rose-500: #F63D68;
-  --color-rose-600: #E31B54;
-  --color-rose-700: #C01048;
-  --color-rose-800: #A11043;
-  --color-rose-900: #89123E;
-  /* Tier 2 variables */
-  --primary-button-background-color: var(--color-primary-800);
-  --primary-button-hover-color: var(--color-primary-900);
-  --primary-button-text-color: #fff;
-  --secondary-button-background-color: var(--color-primary-50);
-  --secondary-button-hover-color: var(--color-primary-100);
-  --secondary-button-text-color: var(--color-brand);
-  --ghost-button-background-color: var(--color-primary-50);
-  --ghost-button-text-color: var(--color-brand);
-  --color-brand: var(--color-primary-800);
-  --body-background-color: #fff;
-  --body-text-color: var(--color-neutral-500);
-  --headings-color: var(--color-neutral-900);
-  --border-color: var(--color-neutral-300);
-  --divider-color: var(--color-neutral-200);
-  --icon-color: var(--color-neutral-400);
-  --dark-icon-color: var(--color-neutral-500);
-  --link-color: var(--color-primary-800);
-  --lighter-background-color: var(--color-neutral-100);
-  --lightest-background-color: var(--color-neutral-50);
-  --docs-lightest-background-color: var(--color-primary-50);
-  --hero-background-color: var(--color-neutral-25);
-  --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
-
-@media (prefers-color-scheme: dark) {
-  --secondary-button-background-color: var(--color-neutral-700);
-  --secondary-button-hover-color: var(--color-neutral-800);
-  --secondary-button-text-color: var(--body-text-color);
-  --body-background-color: var(--color-neutral-900);
-  --body-text-color: var(--color-neutral-300);
-  --headings-color: #fff;
-  --divider-color: var(--color-neutral-600);
-  --border-color: var(--color-neutral-500);
-  --icon-color: var(--body-text-color);
-  --dark-icon-color: #fff;
-  --link-color: var(--color-primary-400);
-  --lighter-background-color: var(--color-neutral-800);
-  --lightest-background-color: var(--color-neutral-800);
-  --hero-background-color: var(--color-neutral-800);
-  --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
-
-html[data-theme="light"] {
-  --body-background-color: #fff;
-  --body-text-color: var(--color-neutral-500);
-  --headings-color: var(--color-neutral-900);
-  --border-color: var(--color-neutral-300);
-  --divider-color: var(--color-neutral-200);
-  --icon-color: var(--color-neutral-400);
-  --dark-icon-color: var(--color-neutral-500);
-  --link-color: var(--color-primary-800);
-  --lighter-background-color: var(--color-neutral-100);
-  --lightest-background-color: var(--color-neutral-50);
-  --docs-lightest-background-color: var(--color-primary-50);
-  --hero-background-color: var(--color-neutral-25);
-  --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
-
-html[data-theme="dark"] {
-  --body-background-color: var(--color-neutral-900);
-  --body-text-color: var(--color-neutral-300);
-  --headings-color: #fff;
-  --divider-color: var(--color-neutral-600);
-  --border-color: var(--color-neutral-500);
-  --icon-color: var(--body-text-color);
-  --dark-icon-color: #fff;
-  --link-color: var(--color-primary-400);
-  --lighter-background-color: var(--color-neutral-800);
-  --lightest-background-color: var(--color-neutral-800);
-  --docs-lightest-background-color: var(--color-neutral-800);
-  --hero-background-color: var(--color-neutral-800);
-  --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
diff --git a/docs/src/assets/css/tokens/typography.css b/docs/src/assets/css/tokens/typography.css
deleted file mode 100644
index 2dcc9f89ccb..00000000000
--- a/docs/src/assets/css/tokens/typography.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
-:root {
-  --fluid-min-width: 320;
-  --fluid-max-width: 1280;
-  --fluid-screen: 100vw;
-  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); }
-
-@media screen and (min-width: 1280px) {
-  :root {
-    --fluid-screen: calc(var(--fluid-max-width) * 1px); } }
-
-:root {
-  --f--2-min: 12.64;
-  --f--2-max: 10.24;
-  --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
-  --f--1-min: 14.22;
-  --f--1-max: 12.80;
-  --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
-  --f-0-min: 16.00;
-  --f-0-max: 16.00;
-  --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
-  --f-1-min: 18.00;
-  --f-1-max: 20.00;
-  --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
-  --f-2-min: 20.25;
-  --f-2-max: 25.00;
-  --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
-  --f-3-min: 22.78;
-  --f-3-max: 31.25;
-  --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
-  --f-4-min: 25.63;
-  --f-4-max: 39.06;
-  --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
-  --f-5-min: 28.83;
-  --f-5-max: 48.83;
-  --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
-  --f-6-min: 32.44;
-  --f-6-max: 61.04;
-  --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); }
-
-:root {
-  --mono-font: "Space Mono", monospace;
-  --text-font: "Inter",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol";
-  --display-font: "Space Grotesk",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol"; }
diff --git a/docs/src/assets/css/tokens/ui.css b/docs/src/assets/css/tokens/ui.css
deleted file mode 100644
index 175480d1cee..00000000000
--- a/docs/src/assets/css/tokens/ui.css
+++ /dev/null
@@ -1,5 +0,0 @@
-:root {
-  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
-                 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
-  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  --border-radius: .5rem; }
diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js
index 0ba46490ca2..059ef92b7f8 100644
--- a/docs/src/assets/js/main.js
+++ b/docs/src/assets/js/main.js
@@ -2,7 +2,7 @@
     var toc_trigger = document.getElementById("js-toc-label"),
         toc = document.getElementById("js-toc-panel"),
         body = document.getElementsByTagName("body")[0],
-        open = true;
+        open = false;
 
     if (toc && matchMedia) {
         const mq = window.matchMedia("(max-width: 1023px)");
@@ -24,7 +24,7 @@
 
             toc.setAttribute("data-open", "false");
             toc_trigger.setAttribute("aria-expanded", "false");
-            headingButton.addEventListener("click", toggleTOC, false);
+            headingButton.addEventListener("click", toggleTOC, true);
         } else {
             toc_trigger.innerHTML = 'Table of Contents';
             toc.setAttribute("data-open", "true");
@@ -87,7 +87,7 @@
 
 (function() {
     var index_trigger = document.getElementById("js-docs-index-toggle"),
-        index = document.getElementById("js-docs-index-list"),
+        index = document.getElementById("js-docs-index-panel"),
         body = document.getElementsByTagName("body")[0],
         open = false;
 
@@ -154,20 +154,20 @@
 })();
 
 // add "Open in Playground" button to code blocks
-(function() {
-    let blocks = document.querySelectorAll('pre[class*="language-"]');
-    if (blocks) {
-        blocks.forEach(function(block) {
-            let button = document.createElement("a");
-            button.classList.add('c-btn--playground');
-            button.classList.add('c-btn');
-            button.classList.add('c-btn--secondary');
-            button.setAttribute("href", "#");
-            button.innerText = "Open in Playground";
-            block.appendChild(button);
-        });
-    }
-})();
+// (function() {
+//     let blocks = document.querySelectorAll('pre[class*="language-"]');
+//     if (blocks) {
+//         blocks.forEach(function(block) {
+//             let button = document.createElement("a");
+//             button.classList.add('c-btn--playground');
+//             button.classList.add('c-btn');
+//             button.classList.add('c-btn--secondary');
+//             button.setAttribute("href", "#");
+//             button.innerText = "Open in Playground";
+//             block.appendChild(button);
+//         });
+//     }
+// })();
 
 
 
@@ -205,8 +205,8 @@ var util = {
     var CollapsibleIndex = function(inst, options) {
         var _options = Object.assign(CollapsibleIndexOptions, options);
         var el = inst;
-        var indexToggles = el.querySelectorAll(".docs-index > ul > .docs-index__item[data-has-children] > a"); // only top-most level
-        var indexPanels = el.querySelectorAll(".docs-index > ul > .docs-index__item>[data-child-list]"); // the list
+        var indexToggles = el.querySelectorAll(".docs-index .docs__index__panel > ul > .docs-index__item[data-has-children] > a"); // only top-most level
+        var indexPanels = el.querySelectorAll(".docs-index .docs__index__panel > ul > .docs-index__item>[data-child-list]"); // the list
         var accID = util.generateID("c-index-");
 
         var init = function() {
diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js
index e9f3a5e58f7..14bf8f7c46e 100644
--- a/docs/src/assets/js/search.js
+++ b/docs/src/assets/js/search.js
@@ -19,7 +19,9 @@ const index = client.initIndex('eslint');
 
 // page
 const resultsElement = document.querySelector('#search-results');
+const resultsLiveRegion = document.querySelector('#search-results-announcement');
 const searchInput = document.querySelector('#search');
+const searchClearBtn = document.querySelector('#search__clear-btn');
 
 //-----------------------------------------------------------------------------
 // Helpers
@@ -27,12 +29,12 @@ const searchInput = document.querySelector('#search');
 
 /**
  * Executes a search against the Algolia index.
- * @param {string} query The search query to execute. 
+ * @param {string} query The search query to execute.
  * @returns {Promise<Array<object>>} The search results.
  */
 function fetchSearchResults(query) {
     return index.search(query, {
-        facetFilters: ["tags:docs"]
+        // facetFilters: ["tags:docs"]
     }).then(({ hits }) => hits);
 }
 
@@ -44,6 +46,8 @@ function clearSearchResults() {
     while (resultsElement.firstChild) {
         resultsElement.removeChild(resultsElement.firstChild);
     }
+    resultsElement.innerHTML = "";
+    searchClearBtn.setAttribute('hidden', '');
 }
 
 /**
@@ -58,18 +62,27 @@ function displaySearchResults(results) {
     if (results.length) {
 
         const list = document.createElement("ul");
+        list.setAttribute('role', 'list');
+        list.classList.add('search-results__list');
         resultsElement.append(list);
-    
+        resultsElement.setAttribute('data-results', 'true');
+
         for (const result of results) {
             const listItem = document.createElement('li');
+            listItem.classList.add('search-results__item');
             listItem.innerHTML = `
-                <a href="${result.url}">${result.hierarchy.lvl0}</a><br>
-                ${result._highlightResult.hierarchy.lvl0.value}
+                <h2 class="search-results__item__title"><a href="${result.url}">${result.hierarchy.lvl0}</a></h2>
+                <p class="search-results__item__context">${result._highlightResult.hierarchy.lvl0.value}</p>
             `.trim();
             list.append(listItem);
         }
+        searchClearBtn.removeAttribute('hidden');
+
     } else {
+        resultsLiveRegion.innerHTML = "No results found.";
         resultsElement.innerHTML = "No results found.";
+        resultsElement.setAttribute('data-results', 'false');
+        searchClearBtn.setAttribute('hidden', '');
     }
 
 }
@@ -78,45 +91,34 @@ function displaySearchResults(results) {
 // Event Handlers
 //-----------------------------------------------------------------------------
 
-
-
-
 // listen for input changes
-searchInput.addEventListener('keyup', function (event) {
+searchInput.addEventListener('keyup', function (e) {
     const query = searchInput.value;
 
+    if(query.length) searchClearBtn.removeAttribute('hidden');
+    else searchClearBtn.setAttribute('hidden', '');
+
     if (query.length > 2) {
         fetchSearchResults(query)
             .then(displaySearchResults)
             .catch(clearSearchResults);
+
+        document.addEventListener('click', function(e) {
+            if(e.target !== resultsElement) clearSearchResults();
+        });
     } else {
         clearSearchResults();
     }
 });
 
-    // add an event listenrer for a click on the search link
-    //   btnHandler('#search-link', function(){
-
-    //     // get the data
-    //     fetch('/search.json').then(function(response) {
-    //       return response.json();
-    //     }).then(function(response) {
-
-    //       searchIndex = response.search;
-
-    //     });
-
-    //     searchUI.toggleAttribute('hidden');
-    //     searchInput.focus();
-
-    //     // listen for input changes
-    //     searchInput.addEventListener('keyup', function(event) {
-    //       const str = searchInput.value;
-    //       if(str.length > 2) {
-    //         find(str);
-    //       } else {
-    //         clearResults();
-    //       }
-    //     });
+resultsElement.addEventListener('keydown', function(e) {
+    if(e.key === "Escape") {
+        clearSearchResults();
+    }
+}, true);
 
-    //   });
+searchClearBtn.addEventListener('click', function(e) {
+    searchInput.value = '';
+    searchInput.focus();
+    clearSearchResults();
+});
diff --git a/docs/src/assets/scss/_docs-typography.scss b/docs/src/assets/scss/_docs-typography.scss
deleted file mode 100644
index d704721c282..00000000000
--- a/docs/src/assets/scss/_docs-typography.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.docs-main {
-
-    h6,
-    .h6 {
-        font-size: var(--step-0);
-    }
-
-    h5,
-    .h5 {
-        font-size: var(--step-0); // 20
-    }
-
-    h4,
-    .h4 {
-        font-size: var(--step-1); // 24
-    }
-
-    h3,
-    .h3 {
-        font-size: var(--step-2);
-        line-height: 1.2;
-    }
-
-    h2,
-    .h2 {
-        font-size: var(--step-3);
-        line-height: 1.2;
-    }
-
-    h1,
-    .h1 {
-        font-size: var(--step-4);
-        line-height: 1.2;
-    }
-}
diff --git a/docs/src/assets/scss/_typography.scss b/docs/src/assets/scss/_typography.scss
deleted file mode 100644
index cd75ed3de3c..00000000000
--- a/docs/src/assets/scss/_typography.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-body {
-    font-size: var(--step-0);
-    line-height: 1.5;
-}
-
-.eyebrow {
-    color: var(--link-color);
-    font-size: 1rem;
-    font-weight: 500;
-    display: block;
-    margin-bottom: 1.5rem;
-    margin-block-end: 1.5rem;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: var(--display-font);
-    color: var(--headings-color);
-    font-weight: 500;
-    margin-top: 0;
-    margin-block-start: 0;
-
-}
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-    .post-main &,
-    .docs-main &,
-    .components-main & {
-        margin-top: 3rem;
-        margin-bottom: 1.5rem;
-        margin-block-start: 3rem;
-        margin-block-end: 1.5rem;
-
-        &:first-child {
-            margin-top: 0;
-            margin-block-start: 0;
-        }
-    }
-}
-
-
-h6,
-.h6 {
-    font-size: var(--step-0);
-}
-
-h5,
-.h5 {
-    font-size: var(--step-1);
-}
-
-h4,
-.h4 {
-    font-size: var(--step-2);
-}
-
-h3,
-.h3 {
-    font-size: var(--step-3);
-    line-height: 1.2;
-}
-
-h2,
-.h2 {
-    font-size: var(--step-4);
-    line-height: 1.2;
-}
-
-h1,
-.h1 {
-    font-size: var(--step-5);
-    line-height: 1.2;
-}
-
-.h0 {
-    font-size: var(--step-6);
-    line-height: 1.2;
-}
-
-small,
-caption,
-cite,
-figcaption {
-    font-size: var(--step--1);
-}
diff --git a/docs/src/assets/scss/_carbon-ads.scss b/docs/src/assets/scss/carbon-ads.scss
similarity index 100%
rename from docs/src/assets/scss/_carbon-ads.scss
rename to docs/src/assets/scss/carbon-ads.scss
diff --git a/docs/src/assets/scss/components/alert.scss b/docs/src/assets/scss/components/alert.scss
index b6ec304b730..e532ab10d09 100644
--- a/docs/src/assets/scss/components/alert.scss
+++ b/docs/src/assets/scss/components/alert.scss
@@ -8,22 +8,41 @@
     margin-block-end: 1.5rem;
     align-items: start;
     font-size: .875rem;
-    background-color: var(--body-background-color);
+    border: 1px solid currentColor;
     border-radius: var(--border-radius);
 
     &.alert--warning {
-        border: 1px solid var(--color-rose-300);
+        background-color: var(--color-rose-25);
+        color: var(--color-rose-600);
+
+        [data-theme="dark"] & {
+            color: var(--color-rose-300);
+            background-color: var(--color-rose-900);
+        }
     }
 
     &.alert--important {
-        border: 1px solid var(--color-warning-300);
+        background-color: var(--color-warning-25);
+        color: var(--color-warning-600);
+
+        [data-theme="dark"] & {
+            color: var(--color-warning-300);
+            background-color: var(--color-warning-900);
+        }
     }
 
     &.alert--tip {
-        border: 1px solid var(--color-success-300);
+        background-color: var(--color-success-25);
+        color: var(--color-success-600);
+
+        [data-theme="dark"] & {
+            color: var(--color-success-300);
+            background-color: var(--color-success-900);
+        }
     }
 }
 
+
 [data-theme="dark"] {
     .alert {
         &.alert--warning {
@@ -47,47 +66,18 @@
     offset-block-start: 2px;
 }
 
-.alert__type {
-    font-weight: 500;
-    margin-bottom: .25rem;
-    margin-block-end: .25rem;
-}
-
-.alert--warning {
-    color: var(--color-rose-600);
-}
-
-.alert--important {
-    color: var(--color-warning-600);
-}
-
-.alert--tip {
-    color: var(--color-success-600);
-}
-
-[data-theme="dark"] {
-    .alert--warning {
-        color: var(--color-rose-400);
-    }
-
-    .alert--important {
-        color: var(--color-warning-400);
-    }
-
-    .alert--tip {
-        color: var(--color-success-400);
-    }
-}
 
 .alert__type {
+    display: block;
     font-weight: 500;
     margin-bottom: .25rem;
+    margin-block-end: .25rem;
 
     .alert--warning & {
         color: var(--color-rose-700);
 
         [data-theme="dark"] & {
-            color: var(--color-rose-300);
+            color: var(--color-rose-200);
         }
     }
 
@@ -95,7 +85,7 @@
         color: var(--color-warning-700);
 
         [data-theme="dark"] & {
-            color: var(--color-warning-300);
+            color: var(--color-warning-200);
         }
     }
 
@@ -103,7 +93,7 @@
         color: var(--color-success-700);
 
         [data-theme="dark"] & {
-            color: var(--color-success-300);
+            color: var(--color-success-200);
         }
     }
 }
@@ -119,7 +109,7 @@
         color: var(--color-rose-700);
 
         [data-theme="dark"] & {
-            color: var(--color-rose-300);
+            color: var(--color-rose-200);
         }
     }
 
@@ -127,7 +117,7 @@
         color: var(--color-warning-700);
 
         [data-theme="dark"] & {
-            color: var(--color-warning-300);
+            color: var(--color-warning-200);
         }
     }
 
@@ -135,25 +125,7 @@
         color: var(--color-success-700);
 
         [data-theme="dark"] & {
-            color: var(--color-success-300);
+            color: var(--color-success-200);
         }
     }
 }
-
-// .alert__remove-btn {
-//     position: absolute;
-//     right: 1rem;
-//     top: 1rem;
-
-//     .alert--warning & svg {
-//         color: var(--color-rose-700);
-//     }
-
-//     .alert--important & svg {
-//         color: var(--color-warning-700);
-//     }
-
-//     .alert--tip & svg {
-//         color: var(--color-success-700);
-//     }
-// }
diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss
index 6f2a85478c7..2e2d3f2c390 100644
--- a/docs/src/assets/scss/components/docs-index.scss
+++ b/docs/src/assets/scss/components/docs-index.scss
@@ -1,4 +1,4 @@
-.docs-index {
+.docs-index .docs-index__list {
     a {
         border-radius: var(--border-radius);
         text-decoration: none;
@@ -15,6 +15,12 @@
             background-color: var(--docs-lightest-background-color);
             color: var(--link-color);
         }
+
+        @media all and (max-width: 1023px) {
+            padding: .5rem 1rem;
+            margin-left: 0;
+            margin-inline-start: 0;
+        }
     }
 }
 
@@ -30,11 +36,11 @@
     }
 }
 
-.docs-index>ul>.docs-index__item {
+.docs-index__list > .docs-index__item {
     margin-top: 1.5rem;
     margin-block-start: 1.5rem;
 
-    >a {
+    > a {
         color: var(--icon-color);
         text-transform: uppercase;
         letter-spacing: 1px;
@@ -58,15 +64,15 @@
     transform: rotate(180deg);
 }
 
-.index-js [aria-hidden="true"] {
+.index-js ul[aria-hidden="true"] {
     display: none;
 }
 
-.index-js [aria-hidden="false"] {
+.index-js ul[aria-hidden="false"] {
     display: block;
 }
 
-.docs-index__list {
+.docs__index__panel {
     &[data-open="false"] {
         display: none;
 
@@ -95,9 +101,6 @@
     font-weight: 500;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    // background-color: var(--lightest-background-color);
-    // color: inherit;
-
     background-color: var(--secondary-button-background-color);
     color: var(--secondary-button-text-color);
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
index 56409288e6c..f42a2ee17c5 100644
--- a/docs/src/assets/scss/components/docs-navigation.scss
+++ b/docs/src/assets/scss/components/docs-navigation.scss
@@ -35,6 +35,7 @@
         text-decoration: none;
         color: inherit;
         transition: color .2s linear;
+        display: block;
 
         &:hover {
             color: var(--link-color);
diff --git a/docs/src/assets/scss/components/language-switcher.scss b/docs/src/assets/scss/components/language-switcher.scss
index f4d79b5fb3b..1aa9b2cea9f 100644
--- a/docs/src/assets/scss/components/language-switcher.scss
+++ b/docs/src/assets/scss/components/language-switcher.scss
@@ -1,11 +1,17 @@
 .switcher--language {
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-wrap: wrap;
     gap: .25rem .5rem;
     position: relative;
-    min-width: 15rem;
+    width: 100%;
     padding: 0;
+    font-size: inherit;
+
+    @media all and (min-width: 800px) {
+        justify-content: flex-start;
+    }
 }
 
 .switcher--language .label__text {
@@ -14,8 +20,11 @@
 
 
 .switcher--language  .switcher__select {
-    min-width: 15rem;
-    flex: 1 0 15rem;
+    flex: 1 0 12rem;
+
+    @media all and (max-width: 800px) {
+        max-width: 250px;
+    }
 }
 
 .language-switcher {
diff --git a/docs/src/assets/scss/components/docs-resources.scss b/docs/src/assets/scss/components/resources.scss
similarity index 100%
rename from docs/src/assets/scss/components/docs-resources.scss
rename to docs/src/assets/scss/components/resources.scss
diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss
index 60e01826315..8038e3a2cd4 100644
--- a/docs/src/assets/scss/components/search.scss
+++ b/docs/src/assets/scss/components/search.scss
@@ -1,11 +1,47 @@
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+[type=search]::-ms-clear,
+[type=search]::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
 .search {
-    margin-bottom: 1.5rem;
+    margin: 1rem 0;
+    position: relative;
 }
 
-.search__input-wrapper {
+.search__input-wrapper,
+.search__inner-input-wrapper {
     position: relative;
 }
 
+.search__clear-btn {
+    color: var(--body-text-color);
+    position: absolute;
+    display: flex;
+    top: 50%;
+    offset-block-start: 50%;
+    transform: translateY(-50%);
+    right: 1.5rem;
+    offset-inline-end: 1.5rem;
+    z-index: 3;
+    padding: 0;
+
+    svg {
+        color: inherit;
+        width: 1rem;
+        height: 1rem;
+        border: 1px solid;
+        border-radius: 50%;
+    }
+}
+
 .search__input {
     padding-left: 2.5rem;
     padding-inline-start: 2.5rem;
@@ -16,13 +52,110 @@
 .search__icon {
     color: var(--body-text-color);
     position: absolute;
+    display: block;
     top: 50%;
     offset-block-start: 50%;
     transform: translateY(-50%);
     left: .75rem;
     offset-inline-start: .75rem;
+    z-index: 3;
+}
+
+/* search results */
+.search .search-results {
+    font-size: .875rem;
+    background-color: var(--body-background-color);
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+    border: 1px solid var(--divider-color);
+    position: rekative;
+    top: .25rem;
+    max-height: 400px;
+    overflow-y: auto;
+
+    @media all and (min-width: 1023px) {
+        box-shadow: var(--shadow-lg);
+        position: absolute;
+        top: calc(100% + .25rem);
+    }
+
+    &[data-results="true"] {
+        padding: 0;
+    }
+    &[data-results="false"] {
+        padding: 1rem;
+    }
+
+    &:empty {
+        display: none;
+    }
+}
+
+.search-results__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.search .search-results__item {
+    margin: 0;
+    padding: .875rem;
+    border-bottom: 1px solid var(--lightest-background-color);
+    border-block-end: 1px solid var(--lightest-background-color);
+    position: relative;
+
+    &:hover {
+        background-color: var(--lightest-background-color);
+    }
+}
+
+.search .search-results__item__title {
+    font-size: var(--step-0);
+    font-size: .875rem;
+    margin-bottom: 0;
+    font-family: var(--text-font);
+
+
+    a {
+        display: block;
+        text-decoration: none;
+        color: var(--link-color);
+        font: inherit;
+        padding: .25rem .75rem;
+
+        &:hover {
+            background-color: inherit;
+            color: var(--link-color);
+        }
+
+        &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            content: "";
+        }
+    }
+}
+
+.search-results__item__context {
+    margin: 0;
+    font-size: .875rem;
+    padding-left: 1rem;
 }
 
 .algolia-docsearch-suggestion--highlight {
-    background-color: var(--color-warning-300);
+    background-color: var(--color-brand);
+    color: #fff;
+    display: inline-block;
+    padding: 0 2px;
+    border-radius: 2px;
+
+    [data-theme="dark"] & {
+        background-color: var(--link-color);
+        color: var(--color-neutral-900);
+    }
 }
diff --git a/docs/src/assets/scss/components/social-icons.scss b/docs/src/assets/scss/components/social-icons.scss
index 207c2b60e58..37902a9f588 100644
--- a/docs/src/assets/scss/components/social-icons.scss
+++ b/docs/src/assets/scss/components/social-icons.scss
@@ -16,7 +16,7 @@
 
             a {
                 display: flex;
-                padding: 1rem;
+                padding: 1rem .75rem;
             }
         }
     }
diff --git a/docs/src/assets/scss/components/theme-switcher.scss b/docs/src/assets/scss/components/theme-switcher.scss
index 47b7cf3ff24..0fa59fe1845 100644
--- a/docs/src/assets/scss/components/theme-switcher.scss
+++ b/docs/src/assets/scss/components/theme-switcher.scss
@@ -27,8 +27,8 @@
     display: inline-flex;
     align-items: center;
     margin: 0;
-    width: 40px;
-    height: 40px;
+    gap: .25rem;
+    color: inherit;
 
     &:first-of-type {
         border-right: .5px solid var(--border-color);
@@ -52,6 +52,8 @@
 }
 
 .theme-switcher__button[aria-pressed="true"] {
+    color: var(--link-color);
+
     .theme-switcher__icon {
         color: var(--link-color);
     }
diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss
index d906cda0604..d1f47a6faeb 100644
--- a/docs/src/assets/scss/components/toc.scss
+++ b/docs/src/assets/scss/components/toc.scss
@@ -2,6 +2,22 @@
     margin: 2rem 0;
 }
 
+.docs-toc {
+    .docs-aside & {
+        display: none;
+    }
+
+    @media all and (min-width: 1400px) {
+        display: none;
+    }
+
+    .docs-aside & {
+        @media all and (min-width: 1400px) {
+            display: block;
+        }
+    }
+}
+
 .c-toc {
     ol {
         margin: 0;
@@ -13,7 +29,7 @@
             padding-left: 1rem;
             padding-inline-start: 1rem;
 
-            > ol {
+            >ol {
                 margin-top: .25rem;
             }
         }
@@ -64,7 +80,6 @@
         padding: 0;
         border-radius: 0;
         position: relative;
-        border: none;
         transition: outline 0.1s linear;
 
         svg {
@@ -79,14 +94,14 @@
     width: 0.75rem;
     height: 0.5rem;
     transform-origin: 50% 50%;
-    margin-left: 3rem;
-    margin-inline-start: 3rem;
+    margin-left: 2rem;
+    margin-inline-start: 2rem;
     transition: all 0.1s linear;
     color: var(--color-neutral-400);
 
     [aria-expanded="true"] & {
-        -ms-transform: translateY(-50%) rotate(180deg);
-        transform: translateY(-50%) rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
     }
 }
 
@@ -96,6 +111,7 @@
     &[data-open="false"] {
         display: none;
     }
+
     &[data-open="true"] {
         display: block;
     }
diff --git a/docs/src/assets/scss/components/version-switcher.scss b/docs/src/assets/scss/components/version-switcher.scss
index dfbf9ac82c4..606b802395c 100644
--- a/docs/src/assets/scss/components/version-switcher.scss
+++ b/docs/src/assets/scss/components/version-switcher.scss
@@ -1,4 +1,4 @@
 .version-switcher {
-    margin-bottom: 1.5rem;
-    margin-block-end: 1.5rem;
+    margin-bottom: .5rem;
+    margin-block-end: .5rem;
 }
diff --git a/docs/src/assets/scss/_docs-footer.scss b/docs/src/assets/scss/docs-footer.scss
similarity index 93%
rename from docs/src/assets/scss/_docs-footer.scss
rename to docs/src/assets/scss/docs-footer.scss
index 950aa51834e..347afd3978e 100644
--- a/docs/src/assets/scss/_docs-footer.scss
+++ b/docs/src/assets/scss/docs-footer.scss
@@ -4,9 +4,11 @@
     gap: 2rem;
     justify-content: space-between;
     align-items: baseline;
+    font-size: .875rem;
 
     @media all and (max-width: 800px) {
         padding: 1.5rem 0 4rem;
+        align-items: center;
     }
 }
 
diff --git a/docs/src/assets/scss/_docs-header.scss b/docs/src/assets/scss/docs-header.scss
similarity index 100%
rename from docs/src/assets/scss/_docs-header.scss
rename to docs/src/assets/scss/docs-header.scss
diff --git a/docs/src/assets/scss/_docs.scss b/docs/src/assets/scss/docs.scss
similarity index 73%
rename from docs/src/assets/scss/_docs.scss
rename to docs/src/assets/scss/docs.scss
index fc48d66e8fc..eef51609b60 100644
--- a/docs/src/assets/scss/_docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -1,75 +1,93 @@
+/* docs layout styles */
+
 .docs {
     max-width: 1700px;
     margin: 0 auto;
 }
 
-.docs-ad {
+.docs-aside__content {
     flex: 1;
 }
 
 .docs-wrapper {
-    padding: 0 calc(1rem + 1vw);
+    padding: 0 var(--space-s-l);
     flex: 1;
+    display: flex;
+    flex-direction: column;
 
     @media all and (min-width: 1023px) {
         display: grid;
         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
-        grid-gap: 0rem;
         align-items: stretch;
     }
 }
 
-.docs-left-sidebar {
+.docs-nav {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
-    padding: calc(1rem + 1vw) 0;
+    padding-top: var(--space-l-xl);
+    padding-block-start: var(--space-l-xl);
     font-size: .875rem;
 
-    @media all and (min-width: 1023px) {
-        border-right: 1px solid var(--divider-color);
-        border-right: 1px solid var(--divider-color);
-        padding-right: calc(1rem + 1vw);
-        padding-inline-end: calc(1rem + 1vw);
-    }
-
-
-
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
+
+    @media all and (min-width: 1023px) {
+        padding: var(--space-l-xl) 0;
+        padding-right: var(--space-s-l);
+        padding-inline-end: var(--space-s-l);
+
+        border-right: 1px solid var(--divider-color);
+        border-inline-end: 1px solid var(--divider-color);
+    }
 }
 
 .docs-content {
     grid-column: 2 / 3;
+    padding: var(--space-l-xl) 0;
+    flex: 1;
 
     @media all and (min-width: 800px) {
         display: grid;
-        grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
-        grid-gap: 2rem;
+        grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr);
+        grid-gap: 1rem;
     }
 
     @media all and (min-width: 1023px) {
-        padding: calc(2rem + 1vw) 0;
+        padding: 0;
     }
 
+    @media all and (min-width: 1300px) {
+        grid-gap: 2rem;
+    }
 }
 
 .docs-main {
-    flex: 1 1 65ch;
+    flex: 1 1 68ch;
+
+    @media all and (min-width: 800px) {
+        padding-right: var(--space-s-l);
+        padding-inline-end: var(--space-s-l);
+
+        border-right: 1px solid var(--divider-color);
+        border-inline-end: 1px solid var(--divider-color);
+    }
 
     @media all and (min-width: 1023px) {
-        padding: 0 2rem;
+        padding: var(--space-l-xl) var(--space-l-2xl);
     }
 }
 
 
-.docs-right-sidebar {
+.docs-aside {
     grid-column: 2 / 3;
-
     display: flex;
     flex-direction: column;
 
-    flex: 1 1 200px;
+    @media all and (min-width: 800px) {
+        padding: var(--space-l-xl) 0;
+    }
 }
 
 .docs-toc {
diff --git a/docs/src/assets/scss/_site-footer.scss b/docs/src/assets/scss/eslint-site-footer.scss
similarity index 100%
rename from docs/src/assets/scss/_site-footer.scss
rename to docs/src/assets/scss/eslint-site-footer.scss
diff --git a/docs/src/assets/scss/_header.scss b/docs/src/assets/scss/eslint-site-header.scss
similarity index 100%
rename from docs/src/assets/scss/_header.scss
rename to docs/src/assets/scss/eslint-site-header.scss
index 199c42bc2a4..d8b88b44aed 100644
--- a/docs/src/assets/scss/_header.scss
+++ b/docs/src/assets/scss/eslint-site-header.scss
@@ -1,8 +1,8 @@
 .site-header {
     padding: .75rem 0;
     border-top: 4px solid var(--link-color);
-    border-bottom: 1px solid var(--divider-color);
     border-block-start: 4px solid var(--link-color);
+    border-bottom: 1px solid var(--divider-color);
     border-block-end: 1px solid var(--divider-color);
 
     .content-container {
diff --git a/docs/src/assets/scss/_forms.scss b/docs/src/assets/scss/forms.scss
similarity index 87%
rename from docs/src/assets/scss/_forms.scss
rename to docs/src/assets/scss/forms.scss
index a6527d08593..e6d830c9897 100644
--- a/docs/src/assets/scss/_forms.scss
+++ b/docs/src/assets/scss/forms.scss
@@ -8,11 +8,10 @@
     max-width: 100%;
     min-width: 0px;
     padding: .625rem .875rem;
-    padding-right: calc(.875rem * 3);
-    padding-inline-end: calc(.875rem * 3);
+    padding-right: calc(.875rem * 2.5);
+    padding-inline-end: calc(.875rem * 2.5);
     font: inherit;
     color: var(--body-text-color);
-    color: inherit;
     line-height: 1.3;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
@@ -20,15 +19,14 @@
     background-color: var(--body-background-color);
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
     background-repeat: no-repeat, repeat;
-    background-position: right calc(.875rem * 1.5) top 50%, 0 0;
+    background-position: right .875rem top 50%,
+    0 0;
     background-size: 1em auto, 100%;
 }
 
 .label__text.label__text {
-    display: block;
     display: flex;
     font-size: .875rem;
-    color: inherit;
     align-items: center;
     gap: .5rem;
     font-size: .875rem;
@@ -47,8 +45,9 @@ input {
     font: inherit;
     font-size: 1rem;
     display: block;
+    line-height: 1.3;
     min-width: 0;
-    // width: 100%;
+    line-height: 1.3;
     max-width: 100%;
     background-color: var(--body-background-color);
     color: inherit;
diff --git a/docs/src/assets/scss/_foundations.scss b/docs/src/assets/scss/foundations.scss
similarity index 79%
rename from docs/src/assets/scss/_foundations.scss
rename to docs/src/assets/scss/foundations.scss
index 4551eea116f..5acab277e24 100644
--- a/docs/src/assets/scss/_foundations.scss
+++ b/docs/src/assets/scss/foundations.scss
@@ -36,6 +36,17 @@ h6:target {
     box-shadow: none;
 }
 
+input:focus-visible {
+    outline: 2px solid var(--link-color);
+    border-color: var(--border-color);
+}
+
+input:focus {
+    outline: 2px solid transparent;
+    box-shadow: 0 0 0 2px var(--link-color);
+}
+
+
 *,
 *::before,
 *::after {
@@ -334,3 +345,94 @@ nav {
         outline-offset: 3px;
     }
 }
+
+
+/* typography */
+body {
+    font-size: var(--step-0);
+    line-height: 1.5;
+}
+
+.eyebrow {
+    color: var(--link-color);
+    font-size: 1rem;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 1.5rem;
+    margin-block-end: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--display-font);
+    color: var(--headings-color);
+    font-weight: 500;
+    margin-top: 0;
+    margin-block-start: 0;
+
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+
+    .docs-main &,
+    .components-main & {
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
+        margin-block-start: 3rem;
+        margin-block-end: 1.5rem;
+
+        &:first-child {
+            margin-top: 0;
+            margin-block-start: 0;
+        }
+    }
+}
+
+
+small,
+caption,
+cite,
+figcaption {
+    font-size: var(--step--1);
+}
+
+h6,
+.h6 {
+    font-size: var(--step-0);
+}
+
+h5,
+.h5 {
+    font-size: var(--step-0); // 20
+}
+
+h4,
+.h4 {
+    font-size: var(--step-1); // 24
+}
+
+h3,
+.h3 {
+    font-size: var(--step-2);
+    line-height: 1.2;
+}
+
+h2,
+.h2 {
+    font-size: var(--step-3);
+    line-height: 1.2;
+}
+
+h1,
+.h1 {
+    font-size: var(--step-4);
+    line-height: 1.2;
+}
diff --git a/docs/src/assets/scss/components/languages.scss b/docs/src/assets/scss/languages.scss
similarity index 100%
rename from docs/src/assets/scss/components/languages.scss
rename to docs/src/assets/scss/languages.scss
diff --git a/docs/src/assets/scss/styles.scss b/docs/src/assets/scss/styles.scss
index 435da5d5c35..e07b280a89d 100644
--- a/docs/src/assets/scss/styles.scss
+++ b/docs/src/assets/scss/styles.scss
@@ -4,15 +4,16 @@
 @import "tokens/typography.scss";
 @import "tokens/ui.scss";
 
-@import "_typography.scss";
-@import "_docs-typography.scss";
-@import "_foundations.scss";
-@import "_prism-syntax-highlighter.scss";
-@import "_docs-header.scss";
-@import "_docs-footer.scss";
-@import "_site-footer.scss";
-@import "_forms.scss";
-@import "_docs.scss";
+@import "foundations.scss";
+@import "syntax-highlighter.scss";
+@import "docs-header.scss";
+@import "docs-footer.scss";
+@import "eslint-site-footer.scss";
+@import "eslint-site-header.scss";
+@import "forms.scss";
+@import "docs.scss";
+@import "versions.scss";
+@import "languages.scss";
 
 @import "components/buttons.scss";
 @import "components/docs-navigation.scss";
@@ -20,18 +21,17 @@
 @import "components/search.scss";
 @import "components/alert.scss";
 @import "components/rules.scss";
-@import "components/languages.scss";
-@import "components/versions.scss";
 @import "components/social-icons.scss";
 @import "components/hero.scss";
 @import "components/theme-switcher.scss";
 @import "components/version-switcher.scss";
 @import "components/language-switcher.scss";
-@import "components/docs-index.scss";
+@import "components/docs-index.scss"; // docs index on the main docs pages
+@import "components/index.scss"; // used in component library
 @import "components/tabs.scss";
-@import "components/docs-resources.scss";
 @import "components/index.scss";
+@import "components/resources.scss";
 
-@import "_carbon-ads.scss";
+@import "carbon-ads.scss";
 
-@import "_utilities.scss";
+@import "utilities.scss";
diff --git a/docs/src/assets/scss/_prism-syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
similarity index 100%
rename from docs/src/assets/scss/_prism-syntax-highlighter.scss
rename to docs/src/assets/scss/syntax-highlighter.scss
diff --git a/docs/src/assets/scss/tokens/spacing.scss b/docs/src/assets/scss/tokens/spacing.scss
index 3525195276b..173401c043a 100644
--- a/docs/src/assets/scss/tokens/spacing.scss
+++ b/docs/src/assets/scss/tokens/spacing.scss
@@ -1,4 +1,18 @@
-/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */
+/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1023,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl|l-3xl|s-l */
+
+:root {
+    --fluid-min-width: 320;
+    --fluid-max-width: 1023;
+
+    --fluid-screen: 100vw;
+    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
+}
+
+@media screen and (min-width: 1023px) {
+    :root {
+        --fluid-screen: calc(var(--fluid-max-width) * 1px);
+    }
+}
 
 :root {
     --fc-3xs-min: (var(--fc-s-min) * 0.25);
@@ -10,8 +24,8 @@
     --fc-xs-min: (var(--fc-s-min) * 0.75);
     --fc-xs-max: (var(--fc-s-max) * 0.75);
 
-    --fc-s-min: (var(--f-0-min));
-    --fc-s-max: (var(--f-0-max));
+    --fc-s-min: (var(--f-0-min, 16));
+    --fc-s-max: (var(--f-0-max, 16));
 
     --fc-m-min: (var(--fc-s-min) * 1.5);
     --fc-m-max: (var(--fc-s-max) * 1.5);
@@ -58,12 +72,6 @@
     --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
     --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
     --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
-
-
-     // spacing
-     --spacer-2x: 2rem; // 32px
-     --spacer-3x: 3rem; // 48px
-     --spacer-4x: 4rem; // 64px
-     --spacer-6x: 6rem; // 96px
-     --spacer-8x: 8rem; // 128px
+    --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp));
+    --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
 }
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index f6c3b05ced3..11ced7f9ee5 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -93,27 +93,24 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    html{
-    --secondary-button-background-color: var(--color-neutral-700);
-    --secondary-button-hover-color: var(--color-neutral-800);
-    --secondary-button-text-color: var(--body-text-color);
-
-    --body-background-color: var(--color-neutral-900);
-    --body-text-color: var(--color-neutral-300);
-    --headings-color: #fff;
-
-    --divider-color: var(--color-neutral-600);
-    --border-color: var(--color-neutral-500);
-
-    --icon-color: var(--body-text-color);
-    --dark-icon-color: #fff;
-    --link-color: var(--color-primary-400);
-
-    --lighter-background-color: var(--color-neutral-800);
-    --lightest-background-color: var(--color-neutral-800);
-    --hero-background-color: var(--color-neutral-800);
-    --footer-background-color: var(--color-neutral-800);
-    --outline-color: #fff;
+    :root {
+        --body-background-color: var(--color-neutral-900);
+        --body-text-color: var(--color-neutral-300);
+        --headings-color: #fff;
+    
+        --divider-color: var(--color-neutral-600);
+        --border-color: var(--color-neutral-500);
+    
+        --icon-color: var(--body-text-color);
+        --dark-icon-color: #fff;
+        --link-color: var(--color-primary-400);
+    
+        --lighter-background-color: var(--color-neutral-800);
+        --lightest-background-color: var(--color-neutral-800);
+        --docs-lightest-background-color: var(--color-neutral-800);
+        --hero-background-color: var(--color-neutral-800);
+        --footer-background-color: var(--color-neutral-800);
+        --outline-color: #fff;
     }
 }
 
diff --git a/docs/src/assets/scss/_utilities.scss b/docs/src/assets/scss/utilities.scss
similarity index 100%
rename from docs/src/assets/scss/_utilities.scss
rename to docs/src/assets/scss/utilities.scss
diff --git a/docs/src/assets/scss/components/versions.scss b/docs/src/assets/scss/versions.scss
similarity index 100%
rename from docs/src/assets/scss/components/versions.scss
rename to docs/src/assets/scss/versions.scss