diff --git a/app/app.css b/app/app.css
new file mode 100644
index 00000000000..21543ec6ee7
--- /dev/null
+++ b/app/app.css
@@ -0,0 +1,198 @@
+@import "./css/shared/a11y.css";
+@import "./css/shared/buttons.css";
+@import "./css/shared/forms.css";
+@import "./css/shared/sort-by.css";
+@import "./css/shared/typography.css";
+
+/*
+ * The `normalize.css` file does not use CSS layers, so we need to vendor it
+ * with a layer to ensure it is applied before our global styles.
+ */
+@import "./css/normalize.css";
+
+@layer global {
+    :root, [data-theme="classic"] {
+        --violet800: hsl(252, 44%, 24%);
+        --grey900: hsl(200, 15%, 19%);
+        --grey700: hsl(200, 11%, 43%);
+        --grey600: hsl(200, 13%, 60%);
+        --grey200: hsl(200, 17%, 96%);
+        --green800: hsl(115, 31%, 31%);
+        --green900: hsl(115, 31%, 21%);
+
+        --orange-50: #fff7ed;
+        --orange-100: #ffedd5;
+        --orange-200: #fed7aa;
+        --orange-300: #fdba74;
+        --orange-400: #fb923c;
+        --orange-500: #f97316;
+        --orange-600: #ea580c;
+        --orange-700: #c2410c;
+        --orange-800: #9a3412;
+        --orange-900: #7c2d12;
+
+        --yellow100: hsl(44, 100%, 90%);
+        --yellow500: hsl(44, 100%, 60%);
+        --yellow700: hsl(44, 67%, 50%);
+        --yellow800: hsl(44, 67%, 20%);
+
+        --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
+
+        --transition-x-slow: 1000ms;
+        --transition-slow: 500ms;
+        --transition-medium: 250ms;
+        --transition-fast: 150ms;
+        --transition-x-fast: 50ms;
+        --transition-instant: 0ms;
+
+        --font-heading: "Fira Sans", sans-serif;
+        --font-body: var(--font-heading);
+        --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+
+        --main-color: light-dark(#383838, #f9f7ec);
+        --main-color-light: light-dark(#858585, #a6a6a6);
+        --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
+        --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
+        --main-bg-dark: light-dark(#edebdd, #141413);
+        --gray-border: light-dark(#d5d3cb, #666561);
+        --link-color: rgb(0, 172, 91);
+        --link-hover-color: #007940;
+
+        --placeholder-bg: hsl(212, 7%, 57%);
+        --placeholder-bg2: hsl(213, 16%, 75%);
+
+        /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
+
+        --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
+        --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
+        --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
+        --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
+        --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
+        --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
+        --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
+        --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
+        --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
+        --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
+
+        /* One-up pairs */
+        --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
+        --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
+        --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
+        --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
+        --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
+        --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
+        --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
+        --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
+        --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
+
+        /* Custom pairs */
+        --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
+
+        color-scheme: light dark;
+    }
+
+    [data-color-scheme="light"] {
+        color-scheme: light;
+    }
+
+    [data-color-scheme="dark"] {
+        color-scheme: dark;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    html, body {
+        margin: 0;
+        scroll-behavior: smooth;
+    }
+
+    body {
+        background-color: var(--header-bg-color);
+        font-family: var(--font-body);
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    h1, h2, h3, h4 {
+        font-family: var(--font-heading);
+    }
+
+    h1 {
+        @media only screen and (max-width: 400px) {
+            font-size: 1.5em;
+        }
+    }
+
+    a, .link, .text--link {
+        color: var(--link-color);
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: var(--link-hover-color);
+        }
+    }
+
+    /* Using `:not(...)` here for specificity reasons */
+    a:not([href]) {
+        color: unset;
+        cursor: initial;
+    }
+
+    pre.terminal {
+        background: var(--main-color);
+        color: white;
+        padding: var(--space-s);
+        font-family: var(--font-monospace);
+    }
+
+    abbr[title] {
+        text-decoration: none;
+        border-bottom: 1px dotted;
+    }
+
+    noscript {
+        display: grid;
+        justify-items: center;
+        padding: var(--space-m);
+        color: white;
+    }
+
+    /* see https://github.com/twbs/bootstrap/pull/30269 */
+    ::-webkit-datetime-edit,
+    ::-webkit-datetime-edit-fields-wrapper,
+    ::-webkit-datetime-edit-text,
+    ::-webkit-datetime-edit-minute,
+    ::-webkit-datetime-edit-hour-field,
+    ::-webkit-datetime-edit-day-field,
+    ::-webkit-datetime-edit-month-field,
+    ::-webkit-datetime-edit-year-field {
+        padding: 0;
+    }
+
+    ::-webkit-calendar-picker-indicator {
+        font-size: 0.9em
+    }
+
+    .c-notification__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .c-notification__content {
+        line-height: 1.5;
+    }
+
+    .width-limit {
+        width: 960px;
+        @media only screen and (max-width: 960px) {
+            width: 100%;
+        }
+    }
+}
diff --git a/app/app.js b/app/app.js
index f38b750bc48..0680f1c7778 100644
--- a/app/app.js
+++ b/app/app.js
@@ -6,6 +6,8 @@ import Resolver from 'ember-resolver';
 import config from './config/environment';
 import * as Sentry from './sentry';
 
+import './app.css';
+
 // eslint-disable-next-line unicorn/prefer-add-event-listener
 window.onerror = undefined;
 Sentry.init();
diff --git a/app/components/color-scheme-menu.module.css b/app/components/color-scheme-menu.css
similarity index 100%
rename from app/components/color-scheme-menu.module.css
rename to app/components/color-scheme-menu.css
diff --git a/app/components/color-scheme-menu.hbs b/app/components/color-scheme-menu.hbs
index f9446338273..4f6843ec22f 100644
--- a/app/components/color-scheme-menu.hbs
+++ b/app/components/color-scheme-menu.hbs
@@ -1,19 +1,18 @@
-<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
-  <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
-    {{svg-jar this.icon local-class="icon"}}
+<Dropdown data-test-dark-mode-menu ...attributes class="dropdown" as |dd|>
+  <dd.Trigger @hideArrow={{true}} class="trigger" data-test-dark-mode-toggle>
+    {{svg-jar this.icon class=(scoped-class "icon")}}
     <span class="sr-only">Change color scheme</span>
   </dd.Trigger>
 
-  <dd.Menu local-class="menu" as |menu|>
+  <dd.Menu class="menu" as |menu|>
     {{#each this.colorSchemes as |colorScheme|}}
       <menu.Item>
         <button
-          local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
-          class="button-reset"
+          class="menu-button button-reset {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
           type="button"
           {{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
         >
-          {{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
+          {{svg-jar colorScheme.svg class=(scoped-class "icon")}} {{colorScheme.mode}}
         </button>
       </menu.Item>
     {{/each}}
diff --git a/app/components/crate-downloads-list.module.css b/app/components/crate-downloads-list.css
similarity index 100%
rename from app/components/crate-downloads-list.module.css
rename to app/components/crate-downloads-list.css
diff --git a/app/components/crate-downloads-list.hbs b/app/components/crate-downloads-list.hbs
index 058585e31b8..a526b42c274 100644
--- a/app/components/crate-downloads-list.hbs
+++ b/app/components/crate-downloads-list.hbs
@@ -1,9 +1,9 @@
-<ul local-class="list">
+<ul class="list">
   {{#each @crates as |crate|}}
     <li>
-      <LinkTo @route="crate" @model={{crate.id}} local-class="link">
+      <LinkTo @route="crate" @model={{crate.id}} class="link">
         {{ crate.name }} ({{ crate.max_version }})
-        {{svg-jar "download-arrow" local-class="download-icon"}}
+        {{svg-jar "download-arrow" class=(scoped-class "download-icon")}}
         {{ format-num crate.downloads }}
       </LinkTo>
     </li>
diff --git a/app/components/crate-header.module.css b/app/components/crate-header.css
similarity index 98%
rename from app/components/crate-header.module.css
rename to app/components/crate-header.css
index ed31269b47d..ac7220ec040 100644
--- a/app/components/crate-header.module.css
+++ b/app/components/crate-header.css
@@ -25,7 +25,7 @@
     white-space: nowrap;
     cursor: default;
 
-    svg {
+    :global(svg) {
         width: 1em;
         height: 1em;
         flex-shrink: 0;
diff --git a/app/components/crate-header.hbs b/app/components/crate-header.hbs
index 4e0ab00d868..4b010ad3661 100644
--- a/app/components/crate-header.hbs
+++ b/app/components/crate-header.hbs
@@ -1,11 +1,11 @@
-<PageHeader local-class="header" data-test-heading>
-  <h1 local-class="heading">
+<PageHeader class="header" data-test-heading>
+  <h1 class="heading">
     <span data-test-crate-name>{{@crate.name}}</span>
     {{#if @version}}
       <small data-test-crate-version>v{{@version.num}}</small>
 
       {{#if @version.yanked}}
-        <span local-class="yanked-badge" data-test-yanked>
+        <span class="yanked-badge" data-test-yanked>
           {{svg-jar "trash"}}
           Yanked
 
@@ -19,17 +19,17 @@
   </h1>
 
   {{#if @crate.description}}
-    <div local-class="description">
+    <div class="description">
       {{@crate.description}}
     </div>
   {{/if}}
 
   {{#if this.keywords}}
-    <ul local-class="keywords">
+    <ul class="keywords">
       {{#each this.keywords as |keyword|}}
         <li>
           <LinkTo @route="keyword" @model={{keyword.id}} data-test-keyword={{keyword.id}}>
-            <span local-class="hash">#</span>{{keyword.id}}
+            <span class="hash">#</span>{{keyword.id}}
           </LinkTo>
         </li>
       {{/each}}
@@ -37,11 +37,11 @@
   {{/if}}
 
   {{#if this.session.currentUser}}
-    <FollowButton @crate={{@crate}} local-class="follow-button"/>
+    <FollowButton @crate={{@crate}} class="follow-button"/>
   {{/if}}
 </PageHeader>
 
-<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
+<NavTabs aria-label="{{@crate.name}} crate subpages" class="nav" as |nav|>
   <nav.Tab
     @link={{if
       @versionNum
diff --git a/app/components/crate-list.module.css b/app/components/crate-list.css
similarity index 100%
rename from app/components/crate-list.module.css
rename to app/components/crate-list.css
diff --git a/app/components/crate-list.hbs b/app/components/crate-list.hbs
index c7810f9766d..a060264f8ce 100644
--- a/app/components/crate-list.hbs
+++ b/app/components/crate-list.hbs
@@ -1,6 +1,6 @@
 <div ...attributes>
   {{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
-  <ol local-class="list">
+  <ol class="list">
     {{#each @crates as |crate index|}}
       <li>
         <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
diff --git a/app/components/crate-row.module.css b/app/components/crate-row.css
similarity index 97%
rename from app/components/crate-row.module.css
rename to app/components/crate-row.css
index df9e9a6b914..26d3c0e0138 100644
--- a/app/components/crate-row.module.css
+++ b/app/components/crate-row.css
@@ -44,7 +44,7 @@
         }
     }
 
-    svg {
+    :global(svg) {
         vertical-align: top;
         height: 1rem;
         width: 1rem;
@@ -59,7 +59,7 @@
     & > * {
         margin-bottom: calc(var(--space-xs) / 2);
     }
-    & > :not(last-child) {
+    & > :not(:last-child) {
         margin-right: var(--space-2xs);
     }
 }
@@ -77,7 +77,7 @@
         margin-top: var(--space-xs);
     }
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: 1em;
         margin-right: var(--space-xs);
diff --git a/app/components/crate-row.hbs b/app/components/crate-row.hbs
index 6ce0ad12bd8..15693fef103 100644
--- a/app/components/crate-row.hbs
+++ b/app/components/crate-row.hbs
@@ -1,31 +1,30 @@
-<div local-class="crate-row" data-test-crate-row ...attributes>
-  <div local-class="description-box">
-    <div local-class="crate-spec">
+<div data-test-crate-row ...attributes class="crate-row">
+  <div class="description-box">
+    <div class="crate-spec">
       {{#let (link "crate" @crate.id) as |l|}}
-        <a href={{l.url}} local-class="name" data-test-crate-link {{on "click" l.transitionTo}}>
+        <a href={{l.url}} class="name" data-test-crate-link {{on "click" l.transitionTo}}>
           {{@crate.name}}
         </a>
       {{/let}}
       {{#if (and @crate.default_version (not @crate.yanked))}}
-        <span local-class="version" data-test-version>v{{@crate.default_version}}</span>
+        <span class="version" data-test-version>v{{@crate.default_version}}</span>
         <CopyButton
           @copyText='{{@crate.name}} = "{{@crate.default_version}}"'
           title="Copy Cargo.toml snippet to clipboard"
-          local-class="copy-button"
-          class="button-reset"
+          class="copy-button button-reset"
           data-test-copy-toml-button
         >
           {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
         </CopyButton>
       {{/if}}
     </div>
-    <div local-class="description" class="text--small" data-test-description>
+    <div class="description text--small" data-test-description>
       {{ truncate-text @crate.description }}
     </div>
   </div>
-  <div local-class='stats'>
-    <div local-class='downloads' data-test-downloads>
-      {{svg-jar "download" local-class="download-icon"}}
+  <div class='stats'>
+    <div class='downloads' data-test-downloads>
+      {{svg-jar "download" class=(scoped-class "download-icon")}}
       <span>
         <span>
           All-Time:
@@ -34,8 +33,8 @@
         {{ format-num @crate.downloads }}
       </span>
     </div>
-    <div local-class="recent-downloads" data-test-recent-downloads>
-      {{svg-jar "download" local-class="download-icon"}}
+    <div class="recent-downloads" data-test-recent-downloads>
+      {{svg-jar "download" class=(scoped-class "download-icon")}}
       <span>
         <span>
           Recent:
@@ -44,7 +43,7 @@
         {{ format-num @crate.recent_downloads }}
       </span>
     </div>
-    <div local-class="updated-at">
+    <div class="updated-at">
       {{svg-jar "latest-updates" height="32" width="32"}}
       <span>
         <span>
@@ -58,7 +57,7 @@
       </span>
     </div>
   </div>
-  <ul local-class="quick-links">
+  <ul class="quick-links">
     {{#if @crate.homepage}}
       <li><a href="{{@crate.homepage}}">Homepage</a></li>
     {{/if}}
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.css
similarity index 97%
rename from app/components/crate-sidebar.module.css
rename to app/components/crate-sidebar.css
index 7c8224eff52..fed5290a268 100644
--- a/app/components/crate-sidebar.module.css
+++ b/app/components/crate-sidebar.css
@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
 
-    svg {
+    :global(svg) {
         flex-shrink: 0;
         margin-right: var(--space-2xs);
         height: 1em;
@@ -44,7 +44,7 @@
 }
 
 .license {
-    a {
+    :global(a) {
         color: var(--main-color);
     }
 }
@@ -102,7 +102,7 @@
         border-radius: var(--space-3xs);
     }
 
-    svg {
+    :global(svg) {
         margin: 0;
     }
 }
diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
index aef44513106..16f67154c08 100644
--- a/app/components/crate-sidebar.hbs
+++ b/app/components/crate-sidebar.hbs
@@ -1,26 +1,25 @@
 <section
-  local-class='sidebar'
   aria-label="Crate metadata"
   ...attributes
+  class='sidebar'
 >
-  <div local-class="metadata">
-    <h2 local-class="heading">Metadata</h2>
+  <div class="metadata">
+    <h2 class="heading">Metadata</h2>
 
-    <div local-class="purl" data-test-purl>
+    <div class="purl" data-test-purl>
       {{svg-jar "link"}}
       <CopyButton
         @copyText={{@version.purl}}
-        class="button-reset"
-        local-class="purl-copy-button"
+        class="button-reset purl-copy-button"
       >
-        <span local-class="purl-text">{{@version.purl}}</span>
-        <Tooltip local-class="purl-tooltip"><strong>Package URL:</strong> {{@version.purl}} <small>(click to copy)</small></Tooltip>
+        <span class="purl-text">{{@version.purl}}</span>
+        <Tooltip class="purl-tooltip"><strong>Package URL:</strong> {{@version.purl}} <small>(click to copy)</small></Tooltip>
       </CopyButton>
       <a
         href="https://github.com/package-url/purl-spec"
         target="_blank"
         rel="noopener noreferrer"
-        local-class="purl-help-link"
+        class="purl-help-link"
         aria-label="Learn more"
       >
         {{svg-jar "circle-question"}}
@@ -30,7 +29,7 @@
 
     <time
       datetime={{date-format-iso @version.created_at}}
-      local-class="date"
+      class="date"
     >
       {{svg-jar "calendar"}}
       <span>
@@ -40,19 +39,19 @@
     </time>
 
     {{#if @version.rust_version}}
-      <div local-class="msrv" data-test-msrv>
+      <div class="msrv" data-test-msrv>
         {{svg-jar "rust"}}
         <Msrv @version={{@version}} />
       </div>
     {{else if @version.edition}}
-      <div local-class="edition" data-test-edition>
+      <div class="edition" data-test-edition>
         {{svg-jar "rust"}}
         <Edition @version={{@version}} />
       </div>
     {{/if}}
 
     {{#if @version.license}}
-      <div local-class="license" data-test-license>
+      <div class="license" data-test-license>
         {{svg-jar "license"}}
         <span>
           <LicenseExpression @license={{@version.license}} />
@@ -61,7 +60,7 @@
     {{/if}}
 
     {{#if @version.crate_size}}
-      <div local-class="bytes">
+      <div class="bytes">
         {{svg-jar "weight"}}
         {{pretty-bytes @version.crate_size}}
       </div>
@@ -70,7 +69,7 @@
 
   {{#unless @version.yanked}}
     <div data-test-install>
-      <h2 local-class="heading">Install</h2>
+      <h2 class="heading">Install</h2>
 
       <CrateSidebar::InstallInstructions
         @crate={{@crate.name}}
@@ -83,7 +82,7 @@
   {{/unless}}
 
   {{#if (or this.showHomepage @version.documentationLink @crate.repository)}}
-    <div local-class="links">
+    <div class="links">
       {{#if this.showHomepage}}
         <CrateSidebar::Link
           @title="Homepage"
@@ -111,15 +110,15 @@
   {{/if}}
 
   <div>
-    <h2 local-class="heading">Owners</h2>
+    <h2 class="heading">Owners</h2>
     <OwnersList @owners={{@crate.owners}} />
   </div>
 
   {{#unless @crate.categories.isPending}}
     {{#if @crate.categories.length}}
       <div>
-        <h2 local-class="heading">Categories</h2>
-        <ul local-class="categories">
+        <h2 class="heading">Categories</h2>
+        <ul class="categories">
           {{#each @crate.categories as |category|}}
             <li>
               <LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo>
@@ -136,8 +135,7 @@
         href={{this.playgroundLink}}
         target="_blank"
         rel="noopener noreferrer"
-        local-class="playground-button"
-        class="button button--small"
+        class="playground-button button button--small"
         data-test-playground-button
       >
         Try on Rust Playground
@@ -148,7 +146,7 @@
         {{/if}}
       </a>
       {{#unless this.canHover}}
-        <p local-class="playground-help" class="text--small" data-test-playground-help>
+        <p class="playground-help text--small" data-test-playground-help>
           The top 100 crates are available on the Rust Playground for you to
           try out directly in your browser.
         </p>
@@ -159,8 +157,7 @@
       @route="support"
       @query={{hash inquire="crate-violation" crate=@crate.name}}
       data-test-id="link-crate-report"
-      local-class="report-button"
-      class="button button--red button--small"
+      class="report-button button button--red button--small"
     >
       Report crate
     </LinkTo>
diff --git a/app/components/crate-sidebar/install-instructions.module.css b/app/components/crate-sidebar/install-instructions.css
similarity index 100%
rename from app/components/crate-sidebar/install-instructions.module.css
rename to app/components/crate-sidebar/install-instructions.css
diff --git a/app/components/crate-sidebar/install-instructions.hbs b/app/components/crate-sidebar/install-instructions.hbs
index f665f3d50db..4bb63a8c06e 100644
--- a/app/components/crate-sidebar/install-instructions.hbs
+++ b/app/components/crate-sidebar/install-instructions.hbs
@@ -3,37 +3,37 @@
     <CopyButton
       @copyText={{this.cargoInstallCommand}}
       title="Copy command to clipboard"
-      local-class="copy-button"
+      class="copy-button"
     >
-      <span local-class="selectable">{{this.cargoInstallCommand}}</span>
-      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+      <span class="selectable">{{this.cargoInstallCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" class=(scoped-class "copy-icon")}}
     </CopyButton>
   {{else}}
-    <code local-class="copy-fallback">
+    <code class="copy-fallback">
       {{this.cargoInstallCommand}}
     </code>
   {{/if}}
 
-  <p local-class="copy-help">
+  <p class="copy-help">
     {{#if (eq @binNames.length 1)}}
       Running the above command will globally install the
-      <span local-class="bin-name">{{get @binNames 0}}</span>
+      <span class="bin-name">{{get @binNames 0}}</span>
       binary.
     {{else if (eq @binNames.length 2)}}
       Running the above command will globally install the
-      <span local-class="bin-name">{{get @binNames 0}}</span>
+      <span class="bin-name">{{get @binNames 0}}</span>
       and
-      <span local-class="bin-name">{{get @binNames 1}}</span>
+      <span class="bin-name">{{get @binNames 1}}</span>
       binaries.
     {{else}}
       Running the above command will globally install these binaries:
       {{#each @binNames as |binName index|~}}
         {{~#if (eq index 0)~}}
-          <span local-class="bin-name">{{binName}}</span>
+          <span class="bin-name">{{binName}}</span>
         {{~else if (eq index (sum @binNames.length -1))}}
-          and <span local-class="bin-name">{{binName}}</span>
+          and <span class="bin-name">{{binName}}</span>
         {{~else~}}
-          , <span local-class="bin-name">{{binName}}</span>
+          , <span class="bin-name">{{binName}}</span>
         {{~/if}}
       {{~/each}}
     {{/if}}
@@ -46,36 +46,36 @@
 {{/if}}
 
 {{#if @hasLib}}
-  <p local-class="copy-help">Run the following Cargo command in your project directory:</p>
+  <p class="copy-help">Run the following Cargo command in your project directory:</p>
 
   {{#if (is-clipboard-supported)}}
     <CopyButton
       @copyText={{this.cargoAddCommand}}
       title="Copy command to clipboard"
-      local-class="copy-button"
+      class="copy-button"
     >
-      <span local-class="selectable">{{this.cargoAddCommand}}</span>
-      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+      <span class="selectable">{{this.cargoAddCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" class=(scoped-class "copy-icon")}}
     </CopyButton>
   {{else}}
-    <code local-class="copy-fallback">
+    <code class="copy-fallback">
       {{this.cargoAddCommand}}
     </code>
   {{/if}}
 
-  <p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
+  <p class="copy-help">Or add the following line to your Cargo.toml:</p>
 
   {{#if (is-clipboard-supported)}}
     <CopyButton
       @copyText={{this.tomlSnippet}}
       title="Copy Cargo.toml snippet to clipboard"
-      local-class="copy-button"
+      class="copy-button"
     >
-      <span local-class="selectable">{{this.tomlSnippet}}</span>
-      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+      <span class="selectable">{{this.tomlSnippet}}</span>
+      {{svg-jar "copy" aria-hidden="true" class=(scoped-class "copy-icon")}}
     </CopyButton>
   {{else}}
-    <code local-class="copy-fallback">
+    <code class="copy-fallback">
       {{this.tomlSnippet}}
     </code>
   {{/if}}
diff --git a/app/components/crate-sidebar/link.module.css b/app/components/crate-sidebar/link.css
similarity index 100%
rename from app/components/crate-sidebar/link.module.css
rename to app/components/crate-sidebar/link.css
diff --git a/app/components/crate-sidebar/link.hbs b/app/components/crate-sidebar/link.hbs
index 70e668bd1d3..69c15822c5e 100644
--- a/app/components/crate-sidebar/link.hbs
+++ b/app/components/crate-sidebar/link.hbs
@@ -1,15 +1,15 @@
 <div ...attributes>
-  <h2 local-class="title" data-test-title>{{@title}}</h2>
-  <div local-class="content">
+  <h2 class="title" data-test-title>{{@title}}</h2>
+  <div class="content">
     {{#if this.isDocsRs}}
-      {{svg-jar "docs-rs" local-class="icon" data-test-icon="docs-rs"}}
+      {{svg-jar "docs-rs" class=(scoped-class "icon") data-test-icon="docs-rs"}}
     {{else if this.isGitHub}}
-      {{svg-jar "github" local-class="icon" data-test-icon="github"}}
+      {{svg-jar "github" class=(scoped-class "icon") data-test-icon="github"}}
     {{else}}
-      {{svg-jar "link" local-class="icon" data-test-icon="link"}}
+      {{svg-jar "link" class=(scoped-class "icon") data-test-icon="link"}}
     {{/if}}
 
-    <a href={{@url}} local-class="link" data-test-link>
+    <a href={{@url}} class="link" data-test-link>
       {{this.text}}
     </a>
   </div>
diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.css
similarity index 98%
rename from app/components/dependency-list/row.module.css
rename to app/components/dependency-list/row.css
index 0000a668982..49b0a2cf5c0 100644
--- a/app/components/dependency-list/row.module.css
+++ b/app/components/dependency-list/row.css
@@ -96,7 +96,7 @@
     font-size: 13px;
     margin-right: var(--space-s);
 
-    a {
+    :global(a) {
         position: relative;
         color: var(--grey600);
 
@@ -105,7 +105,7 @@
         }
     }
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: auto;
         margin-right: var(--space-4xs);
@@ -128,7 +128,7 @@
     margin: var(--space-2xs) var(--space-3xs);
     list-style: none;
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: auto;
         margin-right: 2px;
diff --git a/app/components/dependency-list/row.hbs b/app/components/dependency-list/row.hbs
index bf115196a0c..5189dc3a131 100644
--- a/app/components/dependency-list/row.hbs
+++ b/app/components/dependency-list/row.hbs
@@ -1,26 +1,26 @@
 <div
-  local-class="
+  data-test-dependency={{@dependency.crate_id}}
+  ...attributes
+  class="
     row
     {{if @dependency.optional "optional"}}
     {{if this.focused "focused"}}
   "
-  data-test-dependency={{@dependency.crate_id}}
-  ...attributes
 >
-  <span local-class="range-lg" data-test-range>
+  <span class="range-lg" data-test-range>
     {{format-req @dependency.req}}
   </span>
 
-  <div local-class="right">
-    <div local-class="name-and-metadata">
-      <span local-class="range-sm">
+  <div class="right">
+    <div class="name-and-metadata">
+      <span class="range-sm">
         {{format-req @dependency.req}}
       </span>
 
       <LinkTo
         @route="crate.range"
         @models={{array @dependency.crate_id @dependency.req}}
-        local-class="link"
+        class="link"
         {{on "focusin" (fn this.setFocused true)}}
         {{on "focusout" (fn this.setFocused false)}}
         data-test-crate-name
@@ -29,17 +29,17 @@
       </LinkTo>
 
       {{#if @dependency.optional}}
-        <span local-class="optional-label" data-test-optional>
+        <span class="optional-label" data-test-optional>
           optional
         </span>
       {{/if}}
 
       {{#if this.featuresDescription}}
-        <span local-class="features-label" data-test-features>
+        <span class="features-label" data-test-features>
           {{this.featuresDescription}}
 
-          <Tooltip local-class="tooltip">
-            <ul local-class="feature-list">
+          <Tooltip class="tooltip">
+            <ul class="feature-list">
               <li>
                 {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
               </li>
@@ -55,9 +55,9 @@
     </div>
 
     {{#if (or this.description this.loadCrateTask.isRunning)}}
-      <div local-class="description" data-test-description>
+      <div class="description" data-test-description>
         {{#if this.loadCrateTask.isRunning}}
-          <Placeholder local-class="description-placeholder" data-test-placeholder />
+          <Placeholder class="description-placeholder" data-test-placeholder />
         {{else}}
           {{this.description}}
         {{/if}}
diff --git a/app/components/download-graph.module.css b/app/components/download-graph.css
similarity index 100%
rename from app/components/download-graph.module.css
rename to app/components/download-graph.css
diff --git a/app/components/download-graph.hbs b/app/components/download-graph.hbs
index 5e876b77c84..31dc60fadb7 100644
--- a/app/components/download-graph.hbs
+++ b/app/components/download-graph.hbs
@@ -1,12 +1,12 @@
 {{!-- template-lint-disable no-at-ember-render-modifiers --}}
 <div
-  local-class="wrapper"
   data-test-download-graph
   ...attributes
+  class="wrapper"
   {{did-insert this.loadChartJs}}
 >
   {{#if this.chartjs.loadTask.isRunning}}
-    <LoadingSpinner local-class="spinner" data-test-spinner />
+    <LoadingSpinner class="spinner" data-test-spinner />
   {{else if this.chartjs.loadTask.lastSuccessful.value}}
     <canvas
       {{did-insert this.createChart}}
@@ -16,7 +16,7 @@
       {{will-destroy this.destroyChart}}
     />
   {{else}}
-    <div local-class="error" data-test-error>
+    <div class="error" data-test-error>
       <p>Sorry, there was a problem loading the graphing code.</p>
       <button
         type="button"
diff --git a/app/components/dropdown.module.css b/app/components/dropdown.css
similarity index 100%
rename from app/components/dropdown.module.css
rename to app/components/dropdown.css
diff --git a/app/components/dropdown.hbs b/app/components/dropdown.hbs
index 4273220dfc3..be7676065dc 100644
--- a/app/components/dropdown.hbs
+++ b/app/components/dropdown.hbs
@@ -1,6 +1,6 @@
 <div
-  local-class="container"
   ...attributes
+  class="container"
   {{on-click-outside (fn (mut this.dropdownExpanded) false)}}
   {{on-key 'Escape' (fn (mut this.dropdownExpanded) false)}}
 >
diff --git a/app/components/dropdown/content.module.css b/app/components/dropdown/content.css
similarity index 100%
rename from app/components/dropdown/content.module.css
rename to app/components/dropdown/content.css
diff --git a/app/components/dropdown/content.hbs b/app/components/dropdown/content.hbs
index 11019a6fd53..c7c87da0137 100644
--- a/app/components/dropdown/content.hbs
+++ b/app/components/dropdown/content.hbs
@@ -1 +1 @@
-<div local-class="dropdown {{if @isExpanded "open"}}" ...attributes>{{yield}}</div>
\ No newline at end of file
+<div ...attributes class="dropdown {{if @isExpanded "open"}}">{{yield}}</div>
\ No newline at end of file
diff --git a/app/components/dropdown/menu-item.module.css b/app/components/dropdown/menu-item.css
similarity index 90%
rename from app/components/dropdown/menu-item.module.css
rename to app/components/dropdown/menu-item.css
index 034058eca55..bf02838652d 100644
--- a/app/components/dropdown/menu-item.module.css
+++ b/app/components/dropdown/menu-item.css
@@ -1,5 +1,5 @@
 .item {
-    > a, button {
+    > :global(a), :global(button) {
         font-size: 90%;
         width: 100%;
         display: inline-flex;
diff --git a/app/components/dropdown/menu-item.hbs b/app/components/dropdown/menu-item.hbs
index 46beadc907a..bc005561414 100644
--- a/app/components/dropdown/menu-item.hbs
+++ b/app/components/dropdown/menu-item.hbs
@@ -1 +1 @@
-<li local-class="item" ...attributes>{{yield}}</li>
\ No newline at end of file
+<li class="item" ...attributes>{{yield}}</li>
\ No newline at end of file
diff --git a/app/components/dropdown/menu.module.css b/app/components/dropdown/menu.css
similarity index 100%
rename from app/components/dropdown/menu.module.css
rename to app/components/dropdown/menu.css
diff --git a/app/components/dropdown/menu.hbs b/app/components/dropdown/menu.hbs
index 56fda0a38cd..a3a5cb95b35 100644
--- a/app/components/dropdown/menu.hbs
+++ b/app/components/dropdown/menu.hbs
@@ -1,5 +1,5 @@
 <@Content ...attributes>
-  <ul local-class="list">
+  <ul class="list">
     {{yield (hash Item=(component "dropdown/menu-item"))}}
   </ul>
 </@Content>
\ No newline at end of file
diff --git a/app/components/dropdown/trigger.module.css b/app/components/dropdown/trigger.css
similarity index 100%
rename from app/components/dropdown/trigger.module.css
rename to app/components/dropdown/trigger.css
diff --git a/app/components/dropdown/trigger.hbs b/app/components/dropdown/trigger.hbs
index 7ef3ae43ea7..9446793054e 100644
--- a/app/components/dropdown/trigger.hbs
+++ b/app/components/dropdown/trigger.hbs
@@ -1,6 +1,6 @@
-<button type="button" local-class="button" {{on "click" @toggle}} ...attributes>
+<button type="button" {{on "click" @toggle}} ...attributes class="button">
   {{yield}}
   {{#unless @hideArrow}}
-    <span local-class="arrow"></span>
+    <span class="arrow"></span>
   {{/unless}}
 </button>
\ No newline at end of file
diff --git a/app/components/edition.module.css b/app/components/edition.css
similarity index 100%
rename from app/components/edition.module.css
rename to app/components/edition.css
diff --git a/app/components/edition.hbs b/app/components/edition.hbs
index 2ecd5c76d30..839bbac3bd3 100644
--- a/app/components/edition.hbs
+++ b/app/components/edition.hbs
@@ -5,7 +5,7 @@
     This crate version does not declare a Minimum Supported Rust Version, but
     does require the {{@version.edition}} Rust Edition.
 
-    <div local-class="edition-msrv">
+    <div class="edition-msrv">
       {{@version.editionMsrv}} was the first version of Rust in this edition,
       but this crate may require features that were added in later versions of
       Rust.
diff --git a/app/components/email-input.module.css b/app/components/email-input.css
similarity index 100%
rename from app/components/email-input.module.css
rename to app/components/email-input.css
diff --git a/app/components/email-input.hbs b/app/components/email-input.hbs
index d212ffdf4b0..8f73dbd13bb 100644
--- a/app/components/email-input.hbs
+++ b/app/components/email-input.hbs
@@ -1,6 +1,6 @@
 <div ...attributes>
   {{#unless @user.email}}
-    <div local-class="friendly-message" data-test-no-email>
+    <div class="friendly-message" data-test-no-email>
       <p>
         Please add your email address. We will only use
         it to contact you about your account. We promise we'll never share it!
@@ -9,25 +9,24 @@
   {{/unless}}
 
   {{#if this.isEditing }}
-    <div local-class="row">
-      <div local-class="label">
+    <div class="row">
+      <div class="label">
         <label for="email-input">Email</label>
       </div>
-      <form local-class="email-form" {{on "submit" (prevent-default (perform this.saveEmailTask))}}>
+      <form class="email-form" {{on "submit" (prevent-default (perform this.saveEmailTask))}}>
         <Input
           @type="email"
           @value={{this.value}}
           id="email-input"
           placeholder="Email"
-          local-class="input"
+          class="input"
           data-test-input
         />
 
-        <div local-class="actions">
+        <div class="actions">
           <button
             type='submit'
-            local-class="save-button"
-            class="button button--small"
+            class="save-button button button--small"
             disabled={{not this.value}}
             data-test-save-button
           >
@@ -46,19 +45,19 @@
       </form>
     </div>
   {{else}}
-    <div local-class="row">
-      <div local-class="label">
+    <div class="row">
+      <div class="label">
         <dt>Email</dt>
       </div>
-      <div local-class="email-column" data-test-email-address>
+      <div class="email-column" data-test-email-address>
         <dd>
           {{ @user.email }}
           {{#if @user.email_verified}}
-            <span local-class="verified" data-test-verified>Verified!</span>
+            <span class="verified" data-test-verified>Verified!</span>
           {{/if}}
         </dd>
       </div>
-      <div local-class="actions">
+      <div class="actions">
         <button
           type="button"
           class="button button--small"
@@ -70,14 +69,14 @@
       </div>
     </div>
     {{#if (and @user.email (not @user.email_verified))}}
-      <div local-class="row">
-        <div local-class="label">
+      <div class="row">
+        <div class="label">
           {{#if @user.email_verification_sent}}
             <p data-test-verification-sent>We have sent a verification email to your address.</p>
           {{/if}}
           <p data-test-not-verified>Your email has not yet been verified.</p>
         </div>
-        <div local-class="actions">
+        <div class="actions">
           <button
             type="button"
             class="button button--small"
diff --git a/app/components/follow-button.module.css b/app/components/follow-button.css
similarity index 79%
rename from app/components/follow-button.module.css
rename to app/components/follow-button.css
index 5b260bdfc39..1c034e83af1 100644
--- a/app/components/follow-button.module.css
+++ b/app/components/follow-button.css
@@ -1,4 +1,4 @@
-.button {
+.follow-button {
     height: 48px;
     width: 150px;
     justify-content: center;
diff --git a/app/components/follow-button.hbs b/app/components/follow-button.hbs
index 2785de602ba..9a94fe98bb2 100644
--- a/app/components/follow-button.hbs
+++ b/app/components/follow-button.hbs
@@ -5,10 +5,9 @@
     this.followStateTask.last.error
     this.toggleFollowTask.isRunning
   }}
-  local-class="button"
-  class="button button--tan"
   data-test-follow-button
   ...attributes
+  class="follow-button button button--tan"
   {{on "click" (perform this.toggleFollowTask)}}
 >
   {{#if (or this.followStateTask.isRunning this.toggleFollowTask.isRunning)}}
diff --git a/app/components/footer.module.css b/app/components/footer.css
similarity index 94%
rename from app/components/footer.module.css
rename to app/components/footer.css
index 64ada72585b..2cea8e36b94 100644
--- a/app/components/footer.module.css
+++ b/app/components/footer.css
@@ -28,7 +28,7 @@
         grid-template-columns: repeat(4, 1fr);
     }
 
-    h1 {
+    :global(h1) {
         margin: 0 0 var(--space-s);
         font-size: 20px;
         font-weight: 500;
@@ -36,7 +36,7 @@
         text-shadow: 1px 1px 1px var(--footer-header-shadow-color);
     }
 
-    ul {
+    :global(ul) {
         list-style: none;
         margin: 0;
         padding: 0;
@@ -46,11 +46,11 @@
         }
     }
 
-    li {
+    :global(li) {
         height: 1rem;
     }
 
-    a {
+    :global(a) {
         display: inline-flex;
         /* slightly increased click targets */
         margin: calc(var(--space-2xs) * -1);
@@ -67,13 +67,13 @@
             /* apply color fade only on mouse-out */
             transition: var(--transition-instant);
 
-            svg {
+            :global(svg) {
                 filter: drop-shadow(1px 1px 1px var(--footer-link-hover-shadow-color));
             }
         }
     }
 
-    svg {
+    :global(svg) {
         height: 1.25em;
         width: 1.25em;
         margin: -.125em var(--space-xs) -.125em 0;
diff --git a/app/components/footer.hbs b/app/components/footer.hbs
index b97c6d12e1d..d2fcb080ef3 100644
--- a/app/components/footer.hbs
+++ b/app/components/footer.hbs
@@ -1,5 +1,5 @@
-<footer local-class="footer">
-  <div local-class="content" class="width-limit">
+<footer class="footer">
+  <div class="content width-limit">
     <div>
       <h1>Rust</h1>
       <ul role="list">
diff --git a/app/components/front-page-list/item.module.css b/app/components/front-page-list/item.css
similarity index 98%
rename from app/components/front-page-list/item.module.css
rename to app/components/front-page-list/item.css
index 9deb5ba5f9b..20c801f6465 100644
--- a/app/components/front-page-list/item.module.css
+++ b/app/components/front-page-list/item.css
@@ -1,4 +1,4 @@
-:global(.box-link) {
+.box {
     --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
 
     display: flex;
diff --git a/app/components/front-page-list/item.hbs b/app/components/front-page-list/item.hbs
index 60d7944c534..f8b437c3a7a 100644
--- a/app/components/front-page-list/item.hbs
+++ b/app/components/front-page-list/item.hbs
@@ -1,7 +1,7 @@
-<a href={{@link.url}} class="box-link" ...attributes {{on "click" @link.transitionTo}}>
-  <div local-class="left">
-    <div local-class="title">{{@title}}</div>
-    {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
+<a href={{@link.url}} ...attributes class="box" {{on "click" @link.transitionTo}}>
+  <div class="left">
+    <div class="title">{{@title}}</div>
+    {{#if @subtitle}}<div class="subtitle">{{@subtitle}}</div>{{/if}}
   </div>
-  {{svg-jar "chevron-right" local-class="right"}}
+  {{svg-jar "chevron-right" class=(scoped-class "right")}}
 </a>
\ No newline at end of file
diff --git a/app/components/front-page-list/item/placeholder.module.css b/app/components/front-page-list/item/placeholder.css
similarity index 100%
rename from app/components/front-page-list/item/placeholder.module.css
rename to app/components/front-page-list/item/placeholder.css
diff --git a/app/components/front-page-list/item/placeholder.hbs b/app/components/front-page-list/item/placeholder.hbs
index 3a7d3cba6af..5d134acfbd5 100644
--- a/app/components/front-page-list/item/placeholder.hbs
+++ b/app/components/front-page-list/item/placeholder.hbs
@@ -1,7 +1,7 @@
-<div local-class="link" ...attributes>
-  <div local-class="left">
-    <Placeholder local-class="title" />
-    {{#if @withSubtitle}}<Placeholder local-class="subtitle" />{{/if}}
+<div ...attributes class="link">
+  <div class="left">
+    <Placeholder class="title" />
+    {{#if @withSubtitle}}<Placeholder class="subtitle" />{{/if}}
   </div>
-  {{svg-jar "chevron-right" local-class="right"}}
+  {{svg-jar "chevron-right" class=(scoped-class "right")}}
 </div>
\ No newline at end of file
diff --git a/app/components/header.module.css b/app/components/header.css
similarity index 98%
rename from app/components/header.module.css
rename to app/components/header.css
index 22b410f2b79..13c74c6357a 100644
--- a/app/components/header.module.css
+++ b/app/components/header.css
@@ -13,7 +13,7 @@
     padding: var(--space-xs) var(--space-m);
     color: white;
 
-    a {
+    :global(a) {
         color: white; text-decoration: none;
         &:hover { color: white; }
     }
@@ -51,7 +51,7 @@
     display: flex;
     align-items: center;
 
-    h1 {
+    :global(h1) {
         margin: 0;
         font-size: var(--space-m);
     }
@@ -171,7 +171,7 @@
     border: 0;
     padding: 0;
 
-    img {
+    :global(img) {
         /* 22px is the hard coded size of a UserAvatar when @size="small" */
         margin-top: calc((22px - 1em) * -0.5);
     }
diff --git a/app/components/header.hbs b/app/components/header.hbs
index 15a91cc062a..abf847d1069 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -1,64 +1,63 @@
-<header local-class="header {{if @hero "hero"}}">
-  <div local-class="header-inner" class="width-limit">
-    <LinkTo @route="index" local-class="index-link">
-      <img src="/assets/cargo.png" role="none" alt="" local-class="logo">
+<header class="header {{if @hero "hero"}}">
+  <div class="header-inner width-limit">
+    <LinkTo @route="index" class="index-link">
+      <img src="/assets/cargo.png" role="none" alt="" class="logo">
       <h1>crates.io</h1>
     </LinkTo>
 
-    <div local-class="search-form">
-      <h1 local-class="hero-title">
+    <div class="search-form">
+      <h1 class="hero-title">
         The Rust community&rsquo;s crate registry
       </h1>
 
       <SearchForm @size={{if @hero "big"}} @autofocus={{@hero}} />
     </div>
 
-    <nav local-class='nav'>
-      <ColorSchemeMenu local-class="color-scheme-menu" />
+    <nav class='nav'>
+      <ColorSchemeMenu class="color-scheme-menu" />
 
       <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
         Browse All Crates
       </LinkTo>
-      <span local-class="sep">|</span>
+      <span class="sep">|</span>
       {{#if this.session.currentUser}}
         <Dropdown data-test-user-menu as |dd|>
-          <dd.Trigger local-class="dropdown-button" data-test-toggle>
+          <dd.Trigger class="dropdown-button" data-test-toggle>
             {{#if this.session.isSudoEnabled}}
-              <div data-test-wizard-hat local-class="wizard-hat">🧙</div>
+              <div data-test-wizard-hat class="wizard-hat">🧙</div>
             {{/if}}
-            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
+            <UserAvatar @user={{this.session.currentUser}} @size="small" class="avatar" data-test-avatar />
             {{ this.session.currentUser.name }}
           </dd.Trigger>
 
-          <dd.Menu local-class='current-user-links' as |menu|>
+          <dd.Menu class='current-user-links' as |menu|>
             <menu.Item><LinkTo @route='dashboard'>Dashboard</LinkTo></menu.Item>
             <menu.Item><LinkTo @route='settings' data-test-settings>Account Settings</LinkTo></menu.Item>
             <menu.Item><LinkTo @route='me.pending-invites'>Owner Invites</LinkTo></menu.Item>
             {{#if this.session.isAdmin}}
-              <menu.Item local-class='sudo'>
+              <menu.Item class='sudo'>
                 {{#if this.session.isSudoEnabled}}
-                  <button data-test-disable-admin-actions local-class='sudo-menu-item' class="button-reset" type='button' {{on 'click' this.disableSudo}}>
+                  <button data-test-disable-admin-actions class='sudo-menu-item button-reset' type='button' {{on 'click' this.disableSudo}}>
                     Disable admin actions
-                    <div local-class='expires-in'>expires at {{date-format this.session.sudoEnabledUntil 'HH:mm'}}</div>
+                    <div class='expires-in'>expires at {{date-format this.session.sudoEnabledUntil 'HH:mm'}}</div>
                   </button>
                 {{else}}
-                  <button data-test-enable-admin-actions local-class='sudo-menu-item' class="button-reset" type='button' {{on 'click' this.enableSudo}}>
+                  <button data-test-enable-admin-actions class='sudo-menu-item button-reset' type='button' {{on 'click' this.enableSudo}}>
                     Enable admin actions
                   </button>
                 {{/if}}
               </menu.Item>
             {{/if}}
-            <menu.Item local-class='menu-item-with-separator'>
+            <menu.Item class='menu-item-with-separator'>
               <button
                 type="button"
                 disabled={{this.session.logoutTask.isRunning}}
-                local-class="logout-menu-item"
-                class="button-reset"
+                class="logout-menu-item button-reset"
                 data-test-logout-button
                 {{on "click" (perform this.session.logoutTask)}}
               >
                 {{#if this.session.logoutTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
+                  <LoadingSpinner class="spinner"/>
                 {{/if}}
                 Sign Out
               </button>
@@ -69,44 +68,42 @@
         <button
           type="button"
           disabled={{this.session.loginTask.isRunning}}
-          local-class="login-button"
-          class="button-reset"
+          class="login-button button-reset"
           data-test-login-button
           {{on "click" (perform this.session.loginTask)}}
         >
           {{#if this.session.loginTask.isRunning}}
-            <LoadingSpinner local-class="spinner"/>
+            <LoadingSpinner class="spinner"/>
           {{else}}
-            {{svg-jar "lock" local-class="login-icon"}}
+            {{svg-jar "lock" class=(scoped-class "login-icon")}}
           {{/if}}
           Log in with GitHub
         </button>
       {{/if}}
     </nav>
 
-    <div local-class='menu'>
-      <ColorSchemeMenu local-class="color-scheme-menu" />
+    <div class='menu'>
+      <ColorSchemeMenu class="color-scheme-menu" />
 
       <Dropdown as |dd|>
-        <dd.Trigger local-class="dropdown-button">
+        <dd.Trigger class="dropdown-button">
           Menu
         </dd.Trigger>
-        <dd.Menu local-class="current-user-links" as |menu|>
+        <dd.Menu class="current-user-links" as |menu|>
           <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
           {{#if this.session.currentUser}}
             <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
             <menu.Item><LinkTo @route="settings" data-test-me-link>Account Settings</LinkTo></menu.Item>
             <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-            <menu.Item local-class="menu-item-with-separator">
+            <menu.Item class="menu-item-with-separator">
               <button
                 type="button"
                 disabled={{this.session.logoutTask.isRunning}}
-                local-class="logout-menu-item"
-                class="button-reset"
+                class="logout-menu-item button-reset"
                 {{on "click" (perform this.session.logoutTask)}}
               >
                 {{#if this.session.logoutTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
+                  <LoadingSpinner class="spinner"/>
                 {{/if}}
                 Sign Out
               </button>
@@ -116,12 +113,11 @@
               <button
                 type="button"
                 disabled={{this.session.loginTask.isRunning}}
-                local-class="login-menu-item"
-                class="button-reset"
+                class="login-menu-item button-reset"
                 {{on "click" (perform this.session.loginTask)}}
               >
                 {{#if this.session.loginTask.isRunning}}
-                  <LoadingSpinner local-class="spinner"/>
+                  <LoadingSpinner class="spinner"/>
                 {{/if}}
                 Log in with GitHub
               </button>
diff --git a/app/components/loading-spinner.module.css b/app/components/loading-spinner.css
similarity index 100%
rename from app/components/loading-spinner.module.css
rename to app/components/loading-spinner.css
diff --git a/app/components/loading-spinner.hbs b/app/components/loading-spinner.hbs
index e7441f72d9e..324a54586d7 100644
--- a/app/components/loading-spinner.hbs
+++ b/app/components/loading-spinner.hbs
@@ -1,6 +1,6 @@
 <div
-  local-class="spinner {{if (eq @theme 'light') 'light'}}"
   ...attributes
+  class="spinner {{if (eq @theme 'light') 'light'}}"
 >
   <span class="sr-only">Loading…</span>
 </div>
\ No newline at end of file
diff --git a/app/components/msrv.module.css b/app/components/msrv.css
similarity index 100%
rename from app/components/msrv.module.css
rename to app/components/msrv.css
diff --git a/app/components/msrv.hbs b/app/components/msrv.hbs
index 682db60198d..fd14d11491f 100644
--- a/app/components/msrv.hbs
+++ b/app/components/msrv.hbs
@@ -4,7 +4,7 @@
   <Tooltip>
     &quot;Minimum Supported Rust Version&quot;
     {{#if @version.edition}}
-      <div local-class="edition">requires Rust Edition {{@version.edition}}</div>
+      <div class="edition">requires Rust Edition {{@version.edition}}</div>
     {{/if}}
   </Tooltip>
 </span>
\ No newline at end of file
diff --git a/app/components/nav-tabs.module.css b/app/components/nav-tabs.css
similarity index 100%
rename from app/components/nav-tabs.module.css
rename to app/components/nav-tabs.css
diff --git a/app/components/nav-tabs.hbs b/app/components/nav-tabs.hbs
index 980bccf398e..bae81817d69 100644
--- a/app/components/nav-tabs.hbs
+++ b/app/components/nav-tabs.hbs
@@ -1,5 +1,5 @@
 <nav ...attributes>
-  <ul local-class="list">
+  <ul class="list">
     {{yield (hash Tab=(component "nav-tabs/tab"))}}
   </ul>
 </nav>
\ No newline at end of file
diff --git a/app/components/nav-tabs/tab.module.css b/app/components/nav-tabs/tab.css
similarity index 100%
rename from app/components/nav-tabs/tab.module.css
rename to app/components/nav-tabs/tab.css
diff --git a/app/components/nav-tabs/tab.hbs b/app/components/nav-tabs/tab.hbs
index e55b7da02ae..06ff03a555f 100644
--- a/app/components/nav-tabs/tab.hbs
+++ b/app/components/nav-tabs/tab.hbs
@@ -1,7 +1,7 @@
 <li ...attributes>
   <a
     href={{@link.url}}
-    local-class="link {{if @link.isActive "active"}}"
+    class="link {{if @link.isActive "active"}}"
     data-test-active={{@link.isActive}}
     {{on "click" @link.transitionTo}}
   >
diff --git a/app/components/owned-crate-row.module.css b/app/components/owned-crate-row.css
similarity index 100%
rename from app/components/owned-crate-row.module.css
rename to app/components/owned-crate-row.css
diff --git a/app/components/owned-crate-row.hbs b/app/components/owned-crate-row.hbs
index ee4d8f22476..e0e8677336b 100644
--- a/app/components/owned-crate-row.hbs
+++ b/app/components/owned-crate-row.hbs
@@ -1,13 +1,13 @@
 <label
-  local-class="label {{if @ownedCrate.email_notifications "checked"}}"
   data-test-owned-crate={{@ownedCrate.name}}
   ...attributes
+  class="label {{if @ownedCrate.email_notifications "checked"}}"
 >
-  <span local-class="name">
+  <span class="name">
     {{@ownedCrate.name}}
   </span>
 
-  <div aria-hidden="true" local-class="checkbox">
+  <div aria-hidden="true" class="checkbox">
     {{#if @ownedCrate.email_notifications}}
       {{svg-jar "check-mark"}}
     {{/if}}
diff --git a/app/components/owners-list.module.css b/app/components/owners-list.css
similarity index 100%
rename from app/components/owners-list.module.css
rename to app/components/owners-list.css
diff --git a/app/components/owners-list.hbs b/app/components/owners-list.hbs
index efdf920dd1a..27fc0b14824 100644
--- a/app/components/owners-list.hbs
+++ b/app/components/owners-list.hbs
@@ -1,18 +1,18 @@
 <ul
   role="list"
-  local-class="list {{if this.showDetailedList "detailed"}}"
+  class="list {{if this.showDetailedList "detailed"}}"
   data-test-owners="{{if this.showDetailedList "detailed" "basic"}}"
 >
   {{#each @owners as |owner|}}
-    <li local-class="{{if (eq owner.kind "team") "team"}}">
+    <li class="{{if (eq owner.kind "team") "team"}}">
       <LinkTo
         @route={{owner.kind}}
         @model={{owner.login}}
-        local-class="link"
+        class="link"
         data-test-owner-link={{owner.login}}
       >
-        <UserAvatar @user={{owner}} @size="medium-small" local-class="avatar" aria-hidden="true" />
-        <span local-class="name" class="{{unless this.showDetailedList "sr-only"}}">{{or owner.display_name owner.name owner.login}}</span>
+        <UserAvatar @user={{owner}} @size="medium-small" class="avatar" aria-hidden="true" />
+        <span class="name {{unless this.showDetailedList "sr-only"}}">{{or owner.display_name owner.name owner.login}}</span>
       </LinkTo>
     </li>
   {{/each}}
diff --git a/app/components/page-header.module.css b/app/components/page-header.css
similarity index 100%
rename from app/components/page-header.module.css
rename to app/components/page-header.css
diff --git a/app/components/page-header.hbs b/app/components/page-header.hbs
index 0551f63b641..d615a9b7727 100644
--- a/app/components/page-header.hbs
+++ b/app/components/page-header.hbs
@@ -1,14 +1,14 @@
-<div local-class="header" data-test-page-header ...attributes>
+<div data-test-page-header ...attributes class="header">
   {{#if (has-block)}}
     {{yield}}
   {{else}}
-    <h1 local-class="heading">
+    <h1 class="heading">
       {{@title}}
       {{#if @suffix}}
-        <small local-class="suffix">{{@suffix}}</small>
+        <small class="suffix">{{@suffix}}</small>
       {{/if}}
       {{#if @showSpinner}}
-        <LoadingSpinner local-class="loading-spinner" data-test-spinner />
+        <LoadingSpinner class="loading-spinner" data-test-spinner />
       {{/if}}
     </h1>
   {{/if}}
diff --git a/app/components/pagination.module.css b/app/components/pagination.css
similarity index 66%
rename from app/components/pagination.module.css
rename to app/components/pagination.css
index f71a1f1f4f8..dbab4cad8db 100644
--- a/app/components/pagination.module.css
+++ b/app/components/pagination.css
@@ -5,36 +5,35 @@
     font-size: 90%;
     margin-bottom: var(--space-xs);
 
-    ol {
+    :global(ol) {
         list-style: none;
         padding: 0;
         margin: 0;
     }
-    ol, li { display: inline-block; }
+    :global(ol), :global(li) { display: inline-block; }
 
-    a {
+    :global(a) {
         color: var(--main-color-light);
         text-decoration: none;
         padding: var(--space-3xs) var(--space-2xs);
         border-radius: var(--space-3xs);
     }
-    a:hover { background-color: var(--main-bg-dark); }
-    a:global(.active) { background-color: var(--main-bg-dark); }
-
-    img, svg { vertical-align: middle; }
+    :global(a):hover { background-color: var(--main-bg-dark); }
+    :global(a.active) { background-color: var(--main-bg-dark); }
 
+    :global(img), :global(svg) { vertical-align: middle; }
 
     .prev, .next {
-        circle {
+        :global(circle) {
             fill: none;
         }
 
-        path {
+        :global(path) {
             fill: currentColor;
         }
 
         &:hover {
-            circle {
+            :global(circle) {
                 fill: var(--main-bg-dark);
             }
         }
diff --git a/app/components/pagination.hbs b/app/components/pagination.hbs
index 954e6fb4722..33c707b636d 100644
--- a/app/components/pagination.hbs
+++ b/app/components/pagination.hbs
@@ -1,5 +1,5 @@
-<nav local-class='pagination' aria-label="Pagination navigation">
-  <LinkTo @query={{hash page=@pagination.prevPage}} local-class="prev" rel="prev" title="previous page" data-test-pagination-prev>
+<nav class='pagination' aria-label="Pagination navigation">
+  <LinkTo @query={{hash page=@pagination.prevPage}} class="prev" rel="prev" title="previous page" data-test-pagination-prev>
     {{svg-jar "left-pag"}}
   </LinkTo>
   <ol>
@@ -11,7 +11,7 @@
       </li>
     {{/each}}
   </ol>
-  <LinkTo @query={{hash page=@pagination.nextPage}} local-class="next" rel="next" title="next page" data-test-pagination-next>
+  <LinkTo @query={{hash page=@pagination.nextPage}} class="next" rel="next" title="next page" data-test-pagination-next>
     {{svg-jar "right-pag"}}
   </LinkTo>
 </nav>
\ No newline at end of file
diff --git a/app/components/pending-owner-invite-row.module.css b/app/components/pending-owner-invite-row.css
similarity index 100%
rename from app/components/pending-owner-invite-row.module.css
rename to app/components/pending-owner-invite-row.css
diff --git a/app/components/pending-owner-invite-row.hbs b/app/components/pending-owner-invite-row.hbs
index 254417cb0b2..43482ae7270 100644
--- a/app/components/pending-owner-invite-row.hbs
+++ b/app/components/pending-owner-invite-row.hbs
@@ -9,8 +9,8 @@
     <LinkTo @route="crate" @model={{@invite.crate_name}}>{{@invite.crate_name}}</LinkTo>.
   </p>
 {{else}}
-  <div local-class="row" ...attributes>
-    <div local-class="crate-column">
+  <div ...attributes class="row">
+    <div class="crate-column">
       <h3>
         <LinkTo @route="crate" @model={{@invite.crate_name}} data-test-crate-link>
           {{@invite.crate_name}}
diff --git a/app/components/placeholder.module.css b/app/components/placeholder.css
similarity index 100%
rename from app/components/placeholder.module.css
rename to app/components/placeholder.css
diff --git a/app/components/placeholder.hbs b/app/components/placeholder.hbs
index 1c922fb2f20..041d8b1f3b6 100644
--- a/app/components/placeholder.hbs
+++ b/app/components/placeholder.hbs
@@ -1 +1 @@
-<div local-class="placeholder" ...attributes></div>
\ No newline at end of file
+<div ...attributes class="placeholder"></div>
\ No newline at end of file
diff --git a/app/components/privileged-action.module.css b/app/components/privileged-action.css
similarity index 100%
rename from app/components/privileged-action.module.css
rename to app/components/privileged-action.css
diff --git a/app/components/privileged-action.hbs b/app/components/privileged-action.hbs
index 8a419e43141..8dc0c98b0d2 100644
--- a/app/components/privileged-action.hbs
+++ b/app/components/privileged-action.hbs
@@ -8,7 +8,7 @@
       {{yield to='placeholder'}}
     </div>
   {{else}}
-    <div local-class='placeholder' ...attributes>
+    <div ...attributes class='placeholder'>
       <fieldset data-test-placeholder-fieldset disabled="disabled">
         {{yield}}
       </fieldset>
diff --git a/app/components/progress-bar.module.css b/app/components/progress-bar.css
similarity index 100%
rename from app/components/progress-bar.module.css
rename to app/components/progress-bar.css
diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs
index 838ee06d454..306159404fa 100644
--- a/app/components/progress-bar.hbs
+++ b/app/components/progress-bar.hbs
@@ -1 +1 @@
-<div local-class="progress-bar" style={{this.progress.style}}></div>
\ No newline at end of file
+<div class="progress-bar" style={{this.progress.style}}></div>
\ No newline at end of file
diff --git a/app/components/results-count.module.css b/app/components/results-count.css
similarity index 100%
rename from app/components/results-count.module.css
rename to app/components/results-count.css
diff --git a/app/components/results-count.hbs b/app/components/results-count.hbs
index 62dea6cdfe9..f1387bf8dd6 100644
--- a/app/components/results-count.hbs
+++ b/app/components/results-count.hbs
@@ -1,5 +1,5 @@
-<span class="text--small" ...attributes>
+<span ...attributes class="text--small">
     Displaying
-    <span local-class="highlight" data-test-current-rows>{{@start}}-{{@end}}</span>
-    of <span local-class="highlight" data-test-total-rows>{{@total}}</span> {{if @name @name "total results"}}
+    <span class="highlight" data-test-current-rows>{{@start}}-{{@end}}</span>
+    of <span class="highlight" data-test-total-rows>{{@total}}</span> {{if @name @name "total results"}}
 </span>
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.css
similarity index 100%
rename from app/components/rev-dep-row.module.css
rename to app/components/rev-dep-row.css
diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index 16ffc7a57a3..157b9c92ab6 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -1,30 +1,30 @@
-<div local-class="row {{if this.focused "focused"}}" ...attributes>
-  <div local-class="top">
-    <div local-class="left">
+<div ...attributes class="row {{if this.focused "focused"}}">
+  <div class="top">
+    <div class="left">
       <LinkTo
         @route="crate"
         @model={{@dependency.version.crateName}}
-        local-class="link"
+        class="link"
         data-test-crate-name
         {{on "focusin" (fn this.setFocused true)}}
         {{on "focusout" (fn this.setFocused false)}}
       >
         {{@dependency.version.crateName}}
       </LinkTo>
-      <span local-class="range">
+      <span class="range">
         depends on {{@dependency.req}}
       </span>
     </div>
-    <div local-class="downloads">
-      {{svg-jar "download-arrow" local-class="download-icon"}}
+    <div class="downloads">
+      {{svg-jar "download-arrow" class=(scoped-class "download-icon")}}
       {{format-num @dependency.downloads}}
     </div>
   </div>
 
   {{#if (or this.description this.loadCrateTask.isRunning)}}
-    <div local-class="description" data-test-description>
+    <div class="description" data-test-description>
       {{#if this.loadCrateTask.isRunning}}
-        <Placeholder local-class="description-placeholder" data-test-placeholder />
+        <Placeholder class="description-placeholder" data-test-placeholder />
       {{else}}
         {{this.description}}
       {{/if}}
diff --git a/app/components/search-form.module.css b/app/components/search-form.css
similarity index 100%
rename from app/components/search-form.module.css
rename to app/components/search-form.css
diff --git a/app/components/search-form.hbs b/app/components/search-form.hbs
index 0601141774f..d8dd2253837 100644
--- a/app/components/search-form.hbs
+++ b/app/components/search-form.hbs
@@ -1,5 +1,4 @@
 <form
-  local-class="form {{if (eq @size "big") "size-big"}}"
   action="/search"
   role="search"
   autocapitalize="off"
@@ -8,6 +7,7 @@
   spellcheck="false"
   data-test-search-form
   ...attributes
+  class="form {{if (eq @size "big") "size-big"}}"
   {{on "submit" (prevent-default this.search)}}
 >
   {{! template-lint-disable require-input-label}}
@@ -20,7 +20,7 @@
   <input
     type="text"
     inputmode="search"
-    local-class="input-lg"
+    class="input-lg"
     name="q"
     id="cargo-desktop-search"
     placeholder="Type 'S' or '/' to search"
@@ -36,7 +36,7 @@
   <input
     type="text"
     inputmode="search"
-    local-class="input-sm"
+    class="input-sm"
     name="q"
     placeholder="Search"
     value={{this.header.searchValue}}
@@ -45,9 +45,9 @@
     aria-label="Search"
   >
 
-  <button type="submit" local-class="submit-button" class="button-reset">
+  <button type="submit" class="submit-button button-reset">
     <span class="sr-only">Submit</span>
-    {{svg-jar "search" local-class="submit-icon"}}
+    {{svg-jar "search" class=(scoped-class "submit-icon")}}
   </button>
 
   {{on-key 's' (focus '#cargo-desktop-search')}}
diff --git a/app/components/settings-page.module.css b/app/components/settings-page.css
similarity index 88%
rename from app/components/settings-page.module.css
rename to app/components/settings-page.css
index fcdf3ed2b48..ab3bc8bcdcf 100644
--- a/app/components/settings-page.module.css
+++ b/app/components/settings-page.css
@@ -10,7 +10,7 @@
 }
 
 .content {
-    h2:first-child {
+    :global(h2):first-child {
         margin-top: var(--space-3xs);
     }
 }
diff --git a/app/components/settings-page.hbs b/app/components/settings-page.hbs
index c678a43ffde..00fdcfcaabf 100644
--- a/app/components/settings-page.hbs
+++ b/app/components/settings-page.hbs
@@ -1,10 +1,10 @@
-<div local-class="page" ...attributes>
+<div ...attributes class="page" >
   <SideMenu data-test-settings-menu as |menu|>
     <menu.Item @link={{link "settings.profile"}}>Profile</menu.Item>
     <menu.Item @link={{link "settings.tokens"}} data-test-tokens>API Tokens</menu.Item>
   </SideMenu>
 
-  <div local-class="content">
+  <div class="content">
     {{yield}}
   </div>
 </div>
\ No newline at end of file
diff --git a/app/components/settings/api-tokens.module.css b/app/components/settings/api-tokens.css
similarity index 100%
rename from app/components/settings/api-tokens.module.css
rename to app/components/settings/api-tokens.css
diff --git a/app/components/settings/api-tokens.hbs b/app/components/settings/api-tokens.hbs
index 413733b867f..00e67ea503e 100644
--- a/app/components/settings/api-tokens.hbs
+++ b/app/components/settings/api-tokens.hbs
@@ -1,6 +1,6 @@
-<div local-class="me-subheading">
+<div class="me-subheading">
   <h2>API Tokens</h2>
-  <div local-class="right">
+  <div class="right">
     <LinkTo
       @route="settings.tokens.new"
       class="button"
@@ -11,19 +11,19 @@
   </div>
 </div>
 
-<p local-class="explainer">
+<p class="explainer">
   You can use the API tokens generated on this page to run <a href="https://doc.rust-lang.org/cargo/">cargo</a>
   commands that need write access to crates.io. If you want to publish your own
   crates then this is required.
 </p>
 
-<p local-class="explainer">
+<p class="explainer">
   To prevent keys being silently leaked they are stored on crates.io in hashed form. This means you
   can only download keys when you first create them. If you have old unused keys you can safely delete
   them and create a new one.
 </p>
 
-<p local-class="explainer">
+<p class="explainer">
   To use an API token, run <a href="https://doc.rust-lang.org/cargo/commands/cargo-login.html"><code>cargo login</code></a>
   on the command line and paste the key when prompted. This will save it to a
   <a href="https://doc.rust-lang.org/cargo/reference/config.html#credentials">local credentials file</a>.
@@ -33,17 +33,17 @@
 </p>
 
 {{#if this.sortedTokens}}
-  <ul role="list" local-class="token-list">
+  <ul role="list" class="token-list">
     {{#each this.sortedTokens as |token|}}
-      <li local-class="row {{if token.isExpired "expired"}}" data-test-api-token={{or token.id true}}>
-        <h3 local-class="name" data-test-name>
+      <li class="row {{if token.isExpired "expired"}}" data-test-api-token={{or token.id true}}>
+        <h3 class="name" data-test-name>
           {{token.name}}
         </h3>
 
         {{#if (or token.endpoint_scopes token.crate_scopes)}}
-          <div local-class="scopes" class="text--small">
+          <div class="scopes text--small">
             {{#if token.endpoint_scopes}}
-              <div local-class="endpoint-scopes" data-test-endpoint-scopes>
+              <div class="endpoint-scopes" data-test-endpoint-scopes>
                 Scopes:
 
                 {{#each (this.listToParts token.endpoint_scopes) as |part|~}}
@@ -57,7 +57,7 @@
             {{/if}}
 
             {{#if token.crate_scopes}}
-              <div local-class="crate-scopes" data-test-crate-scopes>
+              <div class="crate-scopes" data-test-crate-scopes>
                 Crates:
 
                 {{#each (this.listToParts token.crate_scopes) as |part|~}}
@@ -72,8 +72,8 @@
           </div>
         {{/if}}
 
-        <div local-class="metadata" class="text--small">
-          <div title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
+        <div class="metadata text--small">
+          <div title={{token.last_used_at}} class="last-used-at" data-test-last-used-at>
             {{#if token.last_used_at}}
               Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
             {{else}}
@@ -81,42 +81,41 @@
             {{/if}}
           </div>
 
-          <div title={{token.created_at}} local-class="created-at" data-test-created-at>
+          <div title={{token.created_at}} class="created-at" data-test-created-at>
             Created {{date-format-distance-to-now token.created_at addSuffix=true}}
           </div>
 
           {{#if token.expired_at}}
-            <div title={{token.expired_at}} local-class="expired-at" data-test-expired-at>
+            <div title={{token.expired_at}} class="expired-at" data-test-expired-at>
               {{if token.isExpired "Expired" "Expires"}} {{date-format-distance-to-now token.expired_at addSuffix=true}}
             </div>
           {{/if}}
         </div>
 
         {{#if token.token}}
-          <div local-class="new-token">
-            <div local-class="new-token-explainer">
+          <div class="new-token">
+            <div class="new-token-explainer">
               Make sure to copy your API token now. You won’t be able to see it again!
             </div>
 
-            <div local-class="token-display">
-              <span local-class="token-value" data-test-token>{{token.token}}</span>
+            <div class="token-display">
+              <span class="token-value" data-test-token>{{token.token}}</span>
 
               {{#if (is-clipboard-supported)}}
-                <CopyButton @copyText={{token.token}} local-class="copy-button" class="button-reset">
+                <CopyButton @copyText={{token.token}} class="copy-button button-reset">
                   <span class="sr-only">Copy</span>
-                  {{svg-jar "copy" aria-hidden="true" local-class="copy-button-icon"}}
+                  {{svg-jar "copy" aria-hidden="true" class=(scoped-class "copy-button-icon")}}
                 </CopyButton>
               {{/if}}
             </div>
           </div>
         {{/if}}
 
-        <div local-class="actions">
+        <div class="actions">
           <LinkTo
             @route="settings.tokens.new"
             @query={{hash from=token.id}}
-            local-class="regenerate-button"
-            class="button button--small"
+            class="regenerate-button button button--small"
             data-test-regenerate-token-button
           >
             Regenerate
@@ -124,8 +123,7 @@
           {{#unless token.isExpired}}
             <button
               type="button"
-              local-class="revoke-button"
-              class="button button--tan button--small"
+              class="revoke-button button button--tan button--small"
               disabled={{token.isSaving}}
               data-test-revoke-token-button
               {{on "click" (perform this.revokeTokenTask token)}}
@@ -133,7 +131,7 @@
               Revoke
             </button>
             {{#if token.isSaving}}
-              <LoadingSpinner local-class="spinner" data-test-saving-spinner />
+              <LoadingSpinner class="spinner" data-test-saving-spinner />
             {{/if}}
           {{/unless}}
         </div>
@@ -141,15 +139,14 @@
     {{/each}}
   </ul>
 {{else}}
-  <div local-class="empty-state">
-    <div local-class="empty-state-label">
+  <div class="empty-state">
+    <div class="empty-state-label">
       You have not generated any API tokens yet.
     </div>
 
     <LinkTo
       @route="settings.tokens.new"
-      local-class="empty-state-button"
-      class="button button--small"
+      class="empty-state-button button button--small"
       data-test-empty-state-button
     >
       New Token
diff --git a/app/components/side-menu.module.css b/app/components/side-menu.css
similarity index 100%
rename from app/components/side-menu.module.css
rename to app/components/side-menu.css
diff --git a/app/components/side-menu.hbs b/app/components/side-menu.hbs
index 1e232c59800..e82c9fa141c 100644
--- a/app/components/side-menu.hbs
+++ b/app/components/side-menu.hbs
@@ -1,3 +1,3 @@
-<ul role="list" local-class="list" ...attributes>
+<ul role="list" ...attributes class="list">
   {{yield (hash Item=(component "side-menu/item"))}}
 </ul>
\ No newline at end of file
diff --git a/app/components/side-menu/item.module.css b/app/components/side-menu/item.css
similarity index 100%
rename from app/components/side-menu/item.module.css
rename to app/components/side-menu/item.css
diff --git a/app/components/side-menu/item.hbs b/app/components/side-menu/item.hbs
index 9190eac58aa..ed05714cdbb 100644
--- a/app/components/side-menu/item.hbs
+++ b/app/components/side-menu/item.hbs
@@ -1,3 +1,3 @@
 <li ...attributes>
-  <a href={{@link.url}} local-class="link {{if @link.isActive "active"}}" {{on "click" @link.transitionTo}}>{{yield}}</a>
+  <a href={{@link.url}} class="link {{if @link.isActive "active"}}" {{on "click" @link.transitionTo}}>{{yield}}</a>
 </li>
\ No newline at end of file
diff --git a/app/components/sort-dropdown.module.css b/app/components/sort-dropdown.css
similarity index 100%
rename from app/components/sort-dropdown.module.css
rename to app/components/sort-dropdown.css
diff --git a/app/components/sort-dropdown.hbs b/app/components/sort-dropdown.hbs
index 2d9ffb65eb5..dd6c157233b 100644
--- a/app/components/sort-dropdown.hbs
+++ b/app/components/sort-dropdown.hbs
@@ -1,6 +1,6 @@
 <Dropdown as |dd|>
-  <dd.Trigger local-class="trigger" data-test-current-order>
-    {{svg-jar "sort" local-class="icon"}}
+  <dd.Trigger class="trigger" data-test-current-order>
+    {{svg-jar "sort" class=(scoped-class "icon")}}
     {{@current}}
   </dd.Trigger>
 
diff --git a/app/components/stats-value.module.css b/app/components/stats-value.css
similarity index 100%
rename from app/components/stats-value.module.css
rename to app/components/stats-value.css
diff --git a/app/components/stats-value.hbs b/app/components/stats-value.hbs
index 69c94dacdb1..7d0cc254bb6 100644
--- a/app/components/stats-value.hbs
+++ b/app/components/stats-value.hbs
@@ -1,5 +1,5 @@
-<div local-class="stats-value" ...attributes>
-  <span local-class="value" data-test-value>{{@value}}</span>
-  <span local-class="label">{{@label}}</span>
-  {{svg-jar @icon role="img" aria-hidden="true" local-class="icon"}}
+<div ...attributes class="stats-value">
+  <span class="value" data-test-value>{{@value}}</span>
+  <span class="label">{{@label}}</span>
+  {{svg-jar @icon role="img" aria-hidden="true" class=(scoped-class "icon")}}
 </div>
\ No newline at end of file
diff --git a/app/components/support/crate-report-form.module.css b/app/components/support/crate-report-form.css
similarity index 61%
rename from app/components/support/crate-report-form.module.css
rename to app/components/support/crate-report-form.css
index 1c239868490..c004d204d5e 100644
--- a/app/components/support/crate-report-form.module.css
+++ b/app/components/support/crate-report-form.css
@@ -19,12 +19,33 @@
 }
 
 .reasons-list {
-  label {
-    flex-wrap: nowrap;
-  }
-  input {
-    align-self: center;
-  }
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background-color: light-dark(white, #141413);
+    border: 1px solid var(--gray-border);
+    border-radius: var(--space-3xs);
+
+    input {
+        align-self: center;
+    }
+
+    &:global(.invalid) {
+        background: light-dark(#fff2f2, #170808);
+        border-color: red;
+    }
+
+    > * + * {
+        border-top: inherit;
+    }
+
+    label {
+        padding: var(--space-xs) var(--space-s);
+        display: flex;
+        flex-wrap: nowrap;
+        gap: var(--space-xs);
+        font-size: 0.9em;
+    }
 }
 
 .detail {
diff --git a/app/components/support/crate-report-form.hbs b/app/components/support/crate-report-form.hbs
index 7786da18e75..83dc3495b31 100644
--- a/app/components/support/crate-report-form.hbs
+++ b/app/components/support/crate-report-form.hbs
@@ -1,12 +1,12 @@
 <form
-  local-class="report-form"
   data-testid="crate-report-form"
   ...attributes
+  class="report-form"
   {{on "submit" (prevent-default this.submit)}}
 >
   <h2>Report A Crate</h2>
 
-  <fieldset local-class="form-group" data-test-id="fieldset-crate">
+  <fieldset class="form-group" data-test-id="fieldset-crate">
     {{#let (unique-id) as |id|}}
       <label for={{id}} class="form-group-name">
         Crate
@@ -18,8 +18,7 @@
         autocomplete="off"
         aria-required="true"
         aria-invalid={{if this.crateInvalid "true" "false"}}
-        local-class="crate-input"
-        class="base-input"
+        class="crate-input base-input"
         data-test-id="crate-input"
         {{auto-focus}}
         {{on "input" this.resetCrateValidation}}
@@ -32,9 +31,9 @@
     {{/let}}
   </fieldset>
 
-  <fieldset local-class="form-group" data-test-id="fieldset-reasons">
+  <fieldset class="form-group" data-test-id="fieldset-reasons">
     <div class="form-group-name">Reasons</div>
-    <ul role="list" local-class="reasons-list" class="scopes-list {{if this.reasonsInvalid "invalid"}}">
+    <ul role="list" class="reasons-list scopes-list {{if this.reasonsInvalid "invalid"}}">
       {{#each this.reasons as |option|}}
         <li>
           <label>
@@ -57,13 +56,13 @@
     {{/if}}
   </fieldset>
 
-  <fieldset local-class="form-group" data-test-id="fieldset-detail">
+  <fieldset class="form-group" data-test-id="fieldset-detail">
     {{#let (unique-id) as |id|}}
       <label for={{id}} class="form-group-name">Detail</label>
       <Textarea
         id={{id}}
         @value={{this.detail}}
-        local-class="detail {{if this.detailInvalid "invalid"}}"
+        class="detail {{if this.detailInvalid "invalid"}}"
         aria-required={{if this.detailInvalid "true" "false" }}
         aria-invalid={{if this.detailInvalid "true" "false"}}
         rows="5"
@@ -78,11 +77,10 @@
     {{/let}}
   </fieldset>
 
-  <div local-class="buttons">
+  <div class="buttons">
     <button
       type="submit"
-      local-class="report-button"
-      class="button button--small"
+      class="report-button button button--small"
       data-test-id="report-button"
     >
       Report to <strong>help@crates.io</strong>
diff --git a/app/components/text-content.module.css b/app/components/text-content.css
similarity index 95%
rename from app/components/text-content.module.css
rename to app/components/text-content.css
index 7c23ac6e3e5..3b408b99c76 100644
--- a/app/components/text-content.module.css
+++ b/app/components/text-content.css
@@ -17,11 +17,11 @@
         margin-bottom: 0;
     }
 
-    img {
+    :global(img) {
         max-width: 100%;
     }
 
-    pre {
+    :global(pre) {
         display: block;
         overflow-x: auto;
         padding: var(--space-xs);
@@ -30,8 +30,8 @@
         border-radius: var(--space-3xs);
     }
 
-    p, li {
-        code {
+    :global(p, li) {
+        :global(code) {
             background-color: light-dark(#f6f8fa, #383836);
             border-radius: var(--space-3xs);
             font-size: 85%;
@@ -40,12 +40,12 @@
         }
     }
 
-    code {
+    :global(code) {
         font-family: var(--font-monospace);
         tab-size: 4;
     }
 
-    kbd {
+    :global(kbd) {
         font-family: var(--font-monospace);
         font-size: 11px;
 
@@ -60,12 +60,12 @@
         box-shadow: inset 0 -2px 0 var(--grey600);
     }
 
-    table {
+    :global(table) {
         border-collapse: collapse;
         display: block;
         overflow-x: auto;
 
-        th, td {
+        :global(th, td) {
             border: 1px solid #dfe2e5;
             padding: var(--space-2xs) var(--space-s);
         }
@@ -76,7 +76,7 @@
         font-size: 80%;
         border-top: 1px solid var(--gray-border);
 
-        a {
+        :global(a) {
             color: var(--main-color-light);
 
             &:hover {
diff --git a/app/components/text-content.hbs b/app/components/text-content.hbs
index 9d2b16e96f6..b49d626af61 100644
--- a/app/components/text-content.hbs
+++ b/app/components/text-content.hbs
@@ -1,3 +1,3 @@
-<div local-class="wrapper {{if @boxed "boxed"}}" ...attributes>
+<div ...attributes class="wrapper {{if @boxed "boxed"}}">
   {{yield}}
 </div>
\ No newline at end of file
diff --git a/app/components/tooltip.module.css b/app/components/tooltip.css
similarity index 100%
rename from app/components/tooltip.module.css
rename to app/components/tooltip.css
diff --git a/app/components/tooltip.hbs b/app/components/tooltip.hbs
index ff4632072f5..4948c379fec 100644
--- a/app/components/tooltip.hbs
+++ b/app/components/tooltip.hbs
@@ -1,8 +1,8 @@
-<span local-class="anchor" {{this.onInsertAnchor this}} />
+<span class="anchor" {{this.onInsertAnchor this}} />
 
 {{#if this.visible}}
   {{#in-element this.containerElement}}
-    <div ...attributes local-class="tooltip" {{this.attachTooltip this side=@side}}>
+    <div class="tooltip" ...attributes {{this.attachTooltip this side=@side}}>
       {{#if (has-block)}}
         {{yield}}
       {{else}}
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.css
similarity index 98%
rename from app/components/version-list/row.module.css
rename to app/components/version-list/row.css
index feccb01d3a6..71319014494 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.css
@@ -78,7 +78,7 @@
     border-radius: 50%;
     transition: all var(--transition-fast);
 
-    > svg {
+    > :global(svg) {
         height: 1em;
         width: auto;
     }
@@ -140,7 +140,7 @@
     letter-spacing: .7px;
     font-size: 13px;
 
-    a {
+    :global(a) {
         position: relative;
         color: inherit;
 
@@ -154,7 +154,7 @@
         }
     }
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: auto;
         margin-right: var(--space-4xs);
@@ -206,7 +206,7 @@
 }
 
 .msrv, .edition {
-    svg {
+    :global(svg) {
         /* this makes the text look a little more aligned with the icon... 🤷 */
         margin-bottom: -0.15em;
     }
@@ -222,7 +222,7 @@
     margin: var(--space-2xs) var(--space-3xs);
     list-style: none;
 
-    svg {
+    :global(svg) {
         height: 1em;
         width: auto;
         margin-right: var(--space-4xs);
diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 11ce1dcc151..f9604045f87 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -1,15 +1,15 @@
 <div
-  local-class="
+  ...attributes
+  class="
     row
     {{if @version.isHighestOfReleaseTrack "latest"}}
     {{if @version.yanked "yanked"}}
     {{if @version.isPrerelease "prerelease"}}
     {{if this.focused "focused"}}
   "
-  ...attributes
 >
-  <div local-class="version">
-    <div local-class="release-track" data-test-release-track>
+  <div class="version">
+    <div class="release-track" data-test-release-track>
       {{#if @version.yanked}}
         {{svg-jar "trash"}}
       {{else if @version.invalidSemver}}
@@ -18,7 +18,7 @@
         {{@version.releaseTrack}}
       {{/if}}
 
-      <Tooltip @side="right" local-class="rt-tooltip" data-test-release-track-title>
+      <Tooltip @side="right" class="rt-tooltip" data-test-release-track-title>
         {{this.releaseTrackTitle}}
       </Tooltip>
     </div>
@@ -26,7 +26,7 @@
     <LinkTo
       @route="crate.version"
       @model={{@version.num}}
-      local-class="num-link"
+      class="num-link"
       {{on "focusin" (fn this.setFocused true)}}
       {{on "focusout" (fn this.setFocused false)}}
       data-test-release-track-link
@@ -35,13 +35,13 @@
     </LinkTo>
   </div>
 
-  <div local-class="metadata">
-    <div local-class="metadata-row">
+  <div class="metadata">
+    <div class="metadata-row">
       {{#if @version.published_by}}
-        <span local-class="publisher">
+        <span class="publisher">
           by
           <LinkTo @route="user" @model={{@version.published_by.login}}>
-            <UserAvatar @user={{@version.published_by}} local-class="avatar" />
+            <UserAvatar @user={{@version.published_by}} class="avatar" />
             {{or @version.published_by.name @version.published_by.login}}
           </LinkTo>
         </span>
@@ -49,55 +49,55 @@
 
       <time
         datetime={{date-format-iso @version.created_at}}
-        local-class="date {{if @version.isNew "new"}}"
+        class="date {{if @version.isNew "new"}}"
       >
         {{svg-jar "calendar"}}
         {{date-format-distance-to-now @version.created_at addSuffix=true}}
 
-        <Tooltip local-class="tooltip">
+        <Tooltip class="tooltip">
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
-            (<span local-class="new">new</span>)
+            (<span class="new">new</span>)
           {{/if}}
         </Tooltip>
       </time>
     </div>
 
     {{#if (or @version.crate_size @version.license @version.featureList)}}
-      <div local-class="metadata-row">
+      <div class="metadata-row">
         {{#if @version.rust_version}}
-          <span local-class="msrv">
+          <span class="msrv">
             {{svg-jar "rust"}}
             <Msrv @version={{@version}} />
           </span>
         {{else if @version.edition}}
-          <span local-class="edition">
+          <span class="edition">
             {{svg-jar "rust"}}
             <Edition @version={{@version}} />
           </span>
         {{/if}}
 
         {{#if @version.crate_size}}
-          <span local-class="bytes">
+          <span class="bytes">
             {{svg-jar "weight"}}
             {{pretty-bytes @version.crate_size}}
           </span>
         {{/if}}
 
         {{#if @version.license}}
-          <span local-class="license">
+          <span class="license">
             {{svg-jar "license"}}
             <LicenseExpression @license={{@version.license}} />
           </span>
         {{/if}}
 
         {{#if @version.featureList}}
-          <span local-class="num-features" data-test-feature-list>
+          <span class="num-features" data-test-feature-list>
             {{svg-jar "checkbox"}}
             {{@version.featureList.length}} {{if (eq @version.featureList.length 1) "Feature" "Features"}}
 
-            <Tooltip local-class="tooltip">
-              <ul local-class="feature-list">
+            <Tooltip class="tooltip">
+              <ul class="feature-list">
                 {{#each this.features.list as |feature|}}
                   <li>
                     {{svg-jar (if feature.isDefault "checkbox" "checkbox-empty")}}
@@ -105,7 +105,7 @@
                   </li>
                 {{/each}}
                 {{#if this.features.more}}
-                  <li local-class="other-features">
+                  <li class="other-features">
                     and {{this.features.more}} other features
                   </li>
                 {{/if}}
@@ -117,21 +117,20 @@
     {{/if}}
   </div>
 
-  <PrivilegedAction @userAuthorised={{this.isOwner}} local-class="actions">
-    <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
-      <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
-        {{svg-jar "ellipsis-circle" local-class="icon"}}
+  <PrivilegedAction @userAuthorised={{this.isOwner}} class="actions">
+    <Dropdown class="dropdown" data-test-actions-menu as |dd|>
+      <dd.Trigger @hideArrow={{true}} class="trigger" data-test-actions-toggle>
+        {{svg-jar "ellipsis-circle" class=(scoped-class "icon")}}
         <span class="sr-only">Actions</span>
       </dd.Trigger>
 
-      <dd.Menu local-class="menu" as |menu|>
+      <dd.Menu class="menu" as |menu|>
         <menu.Item>
-          <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
+          <YankButton @version={{@version}} class="button-reset menu-button" />
         </menu.Item>
         <menu.Item>
           <button
-            class="button-reset"
-            local-class="menu-button"
+            class="button-reset menu-button"
             type="button"
             disabled={{@version.rebuildDocsTask.isRunning}}
             data-test-id="btn-rebuild-docs"
diff --git a/app/components/version-list/row.js b/app/components/version-list/row.js
index 15deed1253a..bc9c2334dcc 100644
--- a/app/components/version-list/row.js
+++ b/app/components/version-list/row.js
@@ -6,7 +6,7 @@ import { tracked } from '@glimmer/tracking';
 
 import { keepLatestTask } from 'ember-concurrency';
 
-import styles from './row.module.css';
+import styles from './row.css';
 
 export default class VersionRow extends Component {
   @service notifications;
diff --git a/app/css/normalize.css b/app/css/normalize.css
new file mode 100644
index 00000000000..32e1e74a208
--- /dev/null
+++ b/app/css/normalize.css
@@ -0,0 +1,351 @@
+@layer global.normalize {
+    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+    /* Document
+       ========================================================================== */
+
+    /**
+     * 1. Correct the line height in all browsers.
+     * 2. Prevent adjustments of font size after orientation changes in iOS.
+     */
+
+    html {
+      line-height: 1.15; /* 1 */
+      -webkit-text-size-adjust: 100%; /* 2 */
+    }
+
+    /* Sections
+       ========================================================================== */
+
+    /**
+     * Remove the margin in all browsers.
+     */
+
+    body {
+      margin: 0;
+    }
+
+    /**
+     * Render the `main` element consistently in IE.
+     */
+
+    main {
+      display: block;
+    }
+
+    /**
+     * Correct the font size and margin on `h1` elements within `section` and
+     * `article` contexts in Chrome, Firefox, and Safari.
+     */
+
+    h1 {
+      font-size: 2em;
+      margin: 0.67em 0;
+    }
+
+    /* Grouping content
+       ========================================================================== */
+
+    /**
+     * 1. Add the correct box sizing in Firefox.
+     * 2. Show the overflow in Edge and IE.
+     */
+
+    hr {
+      box-sizing: content-box; /* 1 */
+      height: 0; /* 1 */
+      overflow: visible; /* 2 */
+    }
+
+    /**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+    pre {
+      font-family: monospace, monospace; /* 1 */
+      font-size: 1em; /* 2 */
+    }
+
+    /* Text-level semantics
+       ========================================================================== */
+
+    /**
+     * Remove the gray background on active links in IE 10.
+     */
+
+    a {
+      background-color: transparent;
+    }
+
+    /**
+     * 1. Remove the bottom border in Chrome 57-
+     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+     */
+
+    abbr[title] {
+      border-bottom: none; /* 1 */
+      text-decoration: underline; /* 2 */
+      text-decoration: underline dotted; /* 2 */
+    }
+
+    /**
+     * Add the correct font weight in Chrome, Edge, and Safari.
+     */
+
+    b,
+    strong {
+      font-weight: bolder;
+    }
+
+    /**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+    code,
+    kbd,
+    samp {
+      font-family: monospace, monospace; /* 1 */
+      font-size: 1em; /* 2 */
+    }
+
+    /**
+     * Add the correct font size in all browsers.
+     */
+
+    small {
+      font-size: 80%;
+    }
+
+    /**
+     * Prevent `sub` and `sup` elements from affecting the line height in
+     * all browsers.
+     */
+
+    sub,
+    sup {
+      font-size: 75%;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+
+    sub {
+      bottom: -0.25em;
+    }
+
+    sup {
+      top: -0.5em;
+    }
+
+    /* Embedded content
+       ========================================================================== */
+
+    /**
+     * Remove the border on images inside links in IE 10.
+     */
+
+    img {
+      border-style: none;
+    }
+
+    /* Forms
+       ========================================================================== */
+
+    /**
+     * 1. Change the font styles in all browsers.
+     * 2. Remove the margin in Firefox and Safari.
+     */
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font-family: inherit; /* 1 */
+      font-size: 100%; /* 1 */
+      line-height: 1.15; /* 1 */
+      margin: 0; /* 2 */
+    }
+
+    /**
+     * Show the overflow in IE.
+     * 1. Show the overflow in Edge.
+     */
+
+    button,
+    input { /* 1 */
+      overflow: visible;
+    }
+
+    /**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+
+    button,
+    select { /* 1 */
+      text-transform: none;
+    }
+
+    /**
+     * Correct the inability to style clickable types in iOS and Safari.
+     */
+
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+      -webkit-appearance: button;
+    }
+
+    /**
+     * Remove the inner border and padding in Firefox.
+     */
+
+    button::-moz-focus-inner,
+    [type="button"]::-moz-focus-inner,
+    [type="reset"]::-moz-focus-inner,
+    [type="submit"]::-moz-focus-inner {
+      border-style: none;
+      padding: 0;
+    }
+
+    /**
+     * Restore the focus styles unset by the previous rule.
+     */
+
+    button:-moz-focusring,
+    [type="button"]:-moz-focusring,
+    [type="reset"]:-moz-focusring,
+    [type="submit"]:-moz-focusring {
+      outline: 1px dotted ButtonText;
+    }
+
+    /**
+     * Correct the padding in Firefox.
+     */
+
+    fieldset {
+      padding: 0.35em 0.75em 0.625em;
+    }
+
+    /**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+
+    legend {
+      box-sizing: border-box; /* 1 */
+      color: inherit; /* 2 */
+      display: table; /* 1 */
+      max-width: 100%; /* 1 */
+      padding: 0; /* 3 */
+      white-space: normal; /* 1 */
+    }
+
+    /**
+     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+     */
+
+    progress {
+      vertical-align: baseline;
+    }
+
+    /**
+     * Remove the default vertical scrollbar in IE 10+.
+     */
+
+    textarea {
+      overflow: auto;
+    }
+
+    /**
+     * 1. Add the correct box sizing in IE 10.
+     * 2. Remove the padding in IE 10.
+     */
+
+    [type="checkbox"],
+    [type="radio"] {
+      box-sizing: border-box; /* 1 */
+      padding: 0; /* 2 */
+    }
+
+    /**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+      height: auto;
+    }
+
+    /**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+
+    [type="search"] {
+      -webkit-appearance: textfield; /* 1 */
+      outline-offset: -2px; /* 2 */
+    }
+
+    /**
+     * Remove the inner padding in Chrome and Safari on macOS.
+     */
+
+    [type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    /**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+
+    ::-webkit-file-upload-button {
+      -webkit-appearance: button; /* 1 */
+      font: inherit; /* 2 */
+    }
+
+    /* Interactive
+       ========================================================================== */
+
+    /*
+     * Add the correct display in Edge, IE 10+, and Firefox.
+     */
+
+    details {
+      display: block;
+    }
+
+    /*
+     * Add the correct display in all browsers.
+     */
+
+    summary {
+      display: list-item;
+    }
+
+    /* Misc
+       ========================================================================== */
+
+    /**
+     * Add the correct display in IE 10+.
+     */
+
+    template {
+      display: none;
+    }
+
+    /**
+     * Add the correct display in IE 10.
+     */
+
+    [hidden] {
+      display: none;
+    }
+}
diff --git a/app/css/shared/a11y.css b/app/css/shared/a11y.css
new file mode 100644
index 00000000000..a901715dcf9
--- /dev/null
+++ b/app/css/shared/a11y.css
@@ -0,0 +1,12 @@
+@layer global {
+    .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+}
diff --git a/app/css/shared/buttons.css b/app/css/shared/buttons.css
new file mode 100644
index 00000000000..befdc2b601d
--- /dev/null
+++ b/app/css/shared/buttons.css
@@ -0,0 +1,103 @@
+@layer global {
+    .button-reset {
+        padding: 0;
+        border: none;
+        outline: none;
+        font: inherit;
+        color: inherit;
+        background: none;
+    }
+
+    .button {
+        --text-color: #383838;
+        --disabled-text-color: #858585;
+
+        --bg-color-top: #fede9e;
+        --bg-color-bottom: #fdc452;
+
+        --bg-color-top-light: #fee7b7;
+        --bg-color-bottom-light: #fdcd6b;
+
+        --bg-color-top-dark: #fed585;
+        --bg-color-bottom-dark: #fdbb39;
+
+        padding: var(--space-xs) var(--space-m-l);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-color);
+        text-decoration: none;
+        font-weight: bold;
+        border: none;
+        outline: 0;
+        border-radius: 5000px;
+        background: linear-gradient(to bottom, var(--bg-color-top) 0%, var(--bg-color-bottom) 100%);
+        cursor: pointer;
+
+        &:hover, &:active, &:visited {
+            /*
+             * This is using `important` to override the `a:hover` declaration which
+             * appears to have higher specificity than the `button:hover` declaration.
+             */
+            color: var(--text-color) !important;
+        }
+
+        img, svg {
+            float: left;
+            display: inline-block;
+            margin-right: var(--space-2xs);
+        }
+
+        &:hover, &:focus, &.active {
+            background: linear-gradient(to bottom, var(--bg-color-top-dark) 0%, var(--bg-color-bottom-dark) 100%);
+            outline: 0;
+        }
+
+        &[disabled] {
+            background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
+            color: var(--disabled-text-color) !important;
+            cursor: not-allowed;
+        }
+    }
+
+    .button--tan {
+        --bg-color-top: #e8e3c7;
+        --bg-color-bottom: #d6cd99;
+
+        --bg-color-top-light: #efecd9;
+        --bg-color-bottom-light: #ddd6ab;
+
+        --bg-color-top-dark: #e1dab5;
+        --bg-color-bottom-dark: #cfc487;
+    }
+
+    .button--red {
+        --bg-color-top: #ffb8b8;
+        --bg-color-bottom: #f78888;
+
+        --bg-color-top-light: #ffcccc;
+        --bg-color-bottom-light: #f7adad;
+
+        --bg-color-top-dark: #fab4b4;
+        --bg-color-bottom-dark: #ed6b6b;
+    }
+
+    .button--small {
+        padding: var(--space-2xs) var(--space-s);
+    }
+
+    .load-more-button {
+        display: block;
+        text-align: center;
+        width: 100%;
+        padding: var(--space-2xs);
+        outline: 0;
+        border: 0;
+        background-color: light-dark(#dbd9cf, #202023);
+        color: light-dark(#525252, #f9f7ec);
+
+        &:hover, &:focus {
+            background-color: light-dark(#c5c2b2, #26262b);
+        }
+    }
+}
diff --git a/app/css/shared/forms.css b/app/css/shared/forms.css
new file mode 100644
index 00000000000..ce7b71b044e
--- /dev/null
+++ b/app/css/shared/forms.css
@@ -0,0 +1,27 @@
+@layer global {
+    .form-group-name {
+        display: flex;
+        gap: var(--space-2xs);
+        margin-bottom: var(--space-2xs);
+        font-weight: 600;
+    }
+
+    .form-group-error {
+        display: block;
+        color: red;
+        font-size: 0.9em;
+        margin-top: var(--space-2xs);
+    }
+
+    .base-input {
+        padding: var(--space-2xs);
+        background-color: light-dark(white, #141413);
+        border: 1px solid var(--gray-border);
+        border-radius: var(--space-3xs);
+
+        &[aria-invalid="true"] {
+            background: light-dark(#fff2f2, #170808);
+            border-color: red;
+        }
+    }
+}
diff --git a/app/css/shared/sort-by.css b/app/css/shared/sort-by.css
new file mode 100644
index 00000000000..6695d04680c
--- /dev/null
+++ b/app/css/shared/sort-by.css
@@ -0,0 +1,9 @@
+@layer global {
+    .sort-by-v-center {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        gap: 5px;
+    }
+}
diff --git a/app/css/shared/typography.css b/app/css/shared/typography.css
new file mode 100644
index 00000000000..a3ce3919068
--- /dev/null
+++ b/app/css/shared/typography.css
@@ -0,0 +1,20 @@
+@layer global {
+    .small, .text--small {
+        color: var(--main-color-light);
+        font-size: 80%;
+
+        strong {
+            color: var(--main-color);
+        }
+    }
+
+    .small a, .text--small a, a.small, a.text--small {
+        color: var(--main-color-light);
+        text-decoration: underline;
+        font-weight: normal;
+
+        &:hover {
+            color: #6b6b6b;
+        }
+    }
+}
diff --git a/app/index.html b/app/index.html
index 043b9e96873..d87a0a03689 100644
--- a/app/index.html
+++ b/app/index.html
@@ -27,6 +27,8 @@
     <meta name="twitter:card" content="summary_large_image">
 
     <meta name="theme-color" content="var(--header-bg-color)">
+
+    <style>@layer global, components;</style>
   </head>
   <body>
     <noscript>
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
deleted file mode 100644
index 6c187584f5a..00000000000
--- a/app/styles/application.module.css
+++ /dev/null
@@ -1,203 +0,0 @@
-:root, [data-theme="classic"] {
-    --violet800: hsl(252, 44%, 24%);
-    --grey900: hsl(200, 15%, 19%);
-    --grey700: hsl(200, 11%, 43%);
-    --grey600: hsl(200, 13%, 60%);
-    --grey200: hsl(200, 17%, 96%);
-    --green800: hsl(115, 31%, 31%);
-    --green900: hsl(115, 31%, 21%);
-
-    --orange-50: #fff7ed;
-    --orange-100: #ffedd5;
-    --orange-200: #fed7aa;
-    --orange-300: #fdba74;
-    --orange-400: #fb923c;
-    --orange-500: #f97316;
-    --orange-600: #ea580c;
-    --orange-700: #c2410c;
-    --orange-800: #9a3412;
-    --orange-900: #7c2d12;
-
-    --yellow100: hsl(44, 100%, 90%);
-    --yellow500: hsl(44, 100%, 60%);
-    --yellow700: hsl(44, 67%, 50%);
-    --yellow800: hsl(44, 67%, 20%);
-
-    --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
-
-    --transition-x-slow: 1000ms;
-    --transition-slow: 500ms;
-    --transition-medium: 250ms;
-    --transition-fast: 150ms;
-    --transition-x-fast: 50ms;
-    --transition-instant: 0ms;
-
-    --font-heading: "Fira Sans", sans-serif;
-    --font-body: var(--font-heading);
-    --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-        "Courier New", monospace;
-
-    --main-color: light-dark(#383838, #f9f7ec);
-    --main-color-light: light-dark(#858585, #a6a6a6);
-    --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
-    --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
-    --main-bg-dark: light-dark(#edebdd, #141413);
-    --gray-border: light-dark(#d5d3cb, #666561);
-    --link-color: rgb(0, 172, 91);
-    --link-hover-color: #007940;
-
-    --placeholder-bg: hsl(212, 7%, 57%);
-    --placeholder-bg2: hsl(213, 16%, 75%);
-
-    /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
-
-    --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
-    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
-    --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
-    --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
-    --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
-    --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
-    --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
-    --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
-    --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
-    --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
-
-    /* One-up pairs */
-    --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
-    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
-    --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
-    --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
-    --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
-    --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
-    --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
-    --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
-    --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
-
-    /* Custom pairs */
-    --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
-
-    color-scheme: light dark;
-}
-
-[data-color-scheme="light"] {
-     color-scheme: light;
-}
-
-[data-color-scheme="dark"] {
-     color-scheme: dark;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html, body {
-    margin: 0;
-    scroll-behavior: smooth;
-}
-
-body {
-    background-color: var(--header-bg-color);
-    font-family: var(--font-body);
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-h1, h2, h3, h4 {
-    font-family: var(--font-heading);
-}
-
-h1 {
-    @media only screen and (max-width: 400px) {
-        font-size: 1.5em;
-    }
-}
-
-a, .link, :global(.text--link) {
-    color: var(--link-color);
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-        color: var(--link-hover-color);
-    }
-}
-
-/* Using `:not(...)` here for specificity reasons */
-a:not([href]) {
-    color: unset;
-    cursor: initial;
-}
-
-pre:global(.terminal) {
-    background: var(--main-color);
-    color: white;
-    padding: var(--space-s);
-    font-family: var(--font-monospace);
-}
-
-abbr[title] {
-    text-decoration: none;
-    border-bottom: 1px dotted;
-}
-
-noscript {
-    display: grid;
-    justify-items: center;
-    padding: var(--space-m);
-    color: white;
-}
-
-/* see https://github.com/twbs/bootstrap/pull/30269 */
-::-webkit-datetime-edit,
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-    padding: 0;
-}
-
-::-webkit-calendar-picker-indicator {
-    font-size: 0.9em
-}
-
-:global(.c-notification__icon) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-:global(.c-notification__content) {
-    line-height: 1.5;
-}
-
-:global(.width-limit) {
-    width: 960px;
-    @media only screen and (max-width: 960px) {
-        width: 100%;
-    }
-}
-
-.main {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    position: relative;
-    background-color: var(--main-bg);
-    color: var(--main-color);
-    box-shadow: 0 0 6px 0 var(--main-shadow-color);
-}
-
-.inner-main {
-    --main-layout-padding: var(--space-s);
-
-    display: flex;
-    flex-direction: column;
-    padding: var(--main-layout-padding);
-}
diff --git a/app/styles/settings/appearance.module.css b/app/styles/settings/appearance.module.css
deleted file mode 100644
index 13c6304ec47..00000000000
--- a/app/styles/settings/appearance.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.themes-form {
-    display: flex;
-    gap: var(--space-xs);
-    flex-wrap: wrap;
-}
-
-.theme-label {
-    display: inline-block;
-    padding: var(--space-s);
-    background: light-dark(white, #141413);
-    border-radius: var(--space-3xs);
-    box-shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
-}
-
-.theme-preview {
-    width: 200px;
-    height: 160px;
-    margin-bottom: var(--space-s);
-}
diff --git a/app/styles/shared/a11y.module.css b/app/styles/shared/a11y.module.css
deleted file mode 100644
index 55b1a5f1d60..00000000000
--- a/app/styles/shared/a11y.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-:global(.sr-only) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
diff --git a/app/styles/shared/buttons.module.css b/app/styles/shared/buttons.module.css
deleted file mode 100644
index cee8a2aeebf..00000000000
--- a/app/styles/shared/buttons.module.css
+++ /dev/null
@@ -1,101 +0,0 @@
-:global(.button-reset) {
-    padding: 0;
-    border: none;
-    outline: none;
-    font: inherit;
-    color: inherit;
-    background: none;
-}
-
-:global(.button) {
-    --text-color: #383838;
-    --disabled-text-color: #858585;
-
-    --bg-color-top: #fede9e;
-    --bg-color-bottom: #fdc452;
-
-    --bg-color-top-light: #fee7b7;
-    --bg-color-bottom-light: #fdcd6b;
-
-    --bg-color-top-dark: #fed585;
-    --bg-color-bottom-dark: #fdbb39;
-
-    padding: var(--space-xs) var(--space-m-l);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-color);
-    text-decoration: none;
-    font-weight: bold;
-    border: none;
-    outline: 0;
-    border-radius: 5000px;
-    background: linear-gradient(to bottom, var(--bg-color-top) 0%, var(--bg-color-bottom) 100%);
-    cursor: pointer;
-
-    &:hover, &:active, &:visited {
-        /*
-         * This is using `important` to override the `a:hover` declaration which
-         * appears to have higher specificity than the `button:hover` declaration.
-         */
-        color: var(--text-color) !important;
-    }
-
-    img, svg {
-        float: left;
-        display: inline-block;
-        margin-right: var(--space-2xs);
-    }
-
-    &:hover, &:focus, &.active {
-        background: linear-gradient(to bottom, var(--bg-color-top-dark) 0%, var(--bg-color-bottom-dark) 100%);
-        outline: 0;
-    }
-
-    &[disabled] {
-        background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
-        color: var(--disabled-text-color) !important;
-        cursor: not-allowed;
-    }
-}
-
-:global(.button--tan) {
-    --bg-color-top: #e8e3c7;
-    --bg-color-bottom: #d6cd99;
-
-    --bg-color-top-light: #efecd9;
-    --bg-color-bottom-light: #ddd6ab;
-
-    --bg-color-top-dark: #e1dab5;
-    --bg-color-bottom-dark: #cfc487;
-}
-
-:global(.button--red) {
-    --bg-color-top: #ffb8b8;
-    --bg-color-bottom: #f78888;
-
-    --bg-color-top-light: #ffcccc;
-    --bg-color-bottom-light: #f7adad;
-
-    --bg-color-top-dark: #fab4b4;
-    --bg-color-bottom-dark: #ed6b6b;
-}
-
-:global(.button--small) {
-    padding: var(--space-2xs) var(--space-s);
-}
-
-:global(.load-more-button) {
-    display: block;
-    text-align: center;
-    width: 100%;
-    padding: var(--space-2xs);
-    outline: 0;
-    border: 0;
-    background-color: light-dark(#dbd9cf, #202023);
-    color: light-dark(#525252, #f9f7ec);
-
-    &:hover, &:focus {
-        background-color: light-dark(#c5c2b2, #26262b);
-    }
-}
diff --git a/app/styles/shared/forms.module.css b/app/styles/shared/forms.module.css
deleted file mode 100644
index cf278a78039..00000000000
--- a/app/styles/shared/forms.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-:global(.form-group-name) {
-    display: flex;
-    gap: var(--space-2xs);
-    margin-bottom: var(--space-2xs);
-    font-weight: 600;
-}
-
-:global(.form-group-error) {
-    display: block;
-    color: red;
-    font-size: 0.9em;
-    margin-top: var(--space-2xs);
-}
-
-:global(.base-input) {
-    padding: var(--space-2xs);
-    background-color: light-dark(white, #141413);
-    border: 1px solid var(--gray-border);
-    border-radius: var(--space-3xs);
-
-    &[aria-invalid="true"] {
-        background: light-dark(#fff2f2, #170808);
-        border-color: red;
-    }
-}
diff --git a/app/styles/shared/sort-by.module.css b/app/styles/shared/sort-by.module.css
deleted file mode 100644
index 1183345807e..00000000000
--- a/app/styles/shared/sort-by.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-:global(.sort-by-v-center) {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 5px;
-}
diff --git a/app/styles/shared/typography.module.css b/app/styles/shared/typography.module.css
deleted file mode 100644
index 8fc5bd38055..00000000000
--- a/app/styles/shared/typography.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.small, :global(.text--small) {
-    color: var(--main-color-light);
-    font-size: 80%;
-
-    strong {
-        color: var(--main-color);
-    }
-}
-
-.small a, :global(.text--small) a, a.small, a:global(.text--small) {
-    color: var(--main-color-light);
-    text-decoration: underline;
-    font-weight: normal;
-
-    &:hover {
-        color: #6b6b6b;
-    }
-}
diff --git a/app/styles/support.module.css b/app/styles/support.module.css
deleted file mode 100644
index a055ab9d638..00000000000
--- a/app/styles/support.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.inquire-list {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-s);
-  list-style: none;
-  padding: 0;
-}
-
-.link {
-  justify-content: center;
-  padding: var(--space-xs) var(--space-s);
-  height: inherit;
-  min-height: var(--space-2xl);
-
-  strong {
-    margin-left: var(--space-3xs);
-    font-weight: 500;
-  }
-}
diff --git a/app/templates/application.css b/app/templates/application.css
new file mode 100644
index 00000000000..4fa4571bd00
--- /dev/null
+++ b/app/templates/application.css
@@ -0,0 +1,18 @@
+.main {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+    background-color: var(--main-bg);
+    color: var(--main-color);
+    box-shadow: 0 0 6px 0 var(--main-shadow-color);
+}
+
+.inner-main {
+    --main-layout-padding: var(--space-s);
+
+    display: flex;
+    flex-direction: column;
+    padding: var(--main-layout-padding);
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index e79e44183da..28d513cacbe 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -9,9 +9,9 @@
 
 <Header @hero={{this.isIndex}} />
 
-<main local-class="main" {{remember-document-scroll key=this.router.currentURL}}>
-  <div local-class="inner-main" class="width-limit">
-    {{outlet}}
+<main class="main" {{remember-document-scroll key=this.router.currentURL}}>
+  <div class="inner-main width-limit">
+  {{outlet}}
   </div>
 </main>
 
diff --git a/app/styles/catch-all.module.css b/app/templates/catch-all.css
similarity index 100%
rename from app/styles/catch-all.module.css
rename to app/templates/catch-all.css
diff --git a/app/templates/catch-all.hbs b/app/templates/catch-all.hbs
index b8b202fec12..c33c7e0ec8f 100644
--- a/app/templates/catch-all.hbs
+++ b/app/templates/catch-all.hbs
@@ -1,28 +1,27 @@
-<div local-class="wrapper" data-test-404-page>
-  <div local-class="content">
-    {{svg-jar "cuddlyferris" local-class="logo"}}
+<div class="wrapper" data-test-404-page>
+  <div class="content">
+    {{svg-jar "cuddlyferris" class=(scoped-class "logo")}}
 
-    <h1 local-class="title" data-test-title>{{or @model.title "Page not found"}}</h1>
+    <h1 class="title" data-test-title>{{or @model.title "Page not found"}}</h1>
 
     {{#if @model.details}}
-      <p local-class="details" data-test-details>{{@model.details}}</p>
+      <p class="details" data-test-details>{{@model.details}}</p>
     {{/if}}
 
     {{#if @model.loginNeeded}}
       <button
         type="button"
         disabled={{this.session.loginTask.isRunning}}
-        local-class="link"
-        class="button-reset text--link"
+        class="link button-reset text--link"
         data-test-login
         {{on "click" (perform this.session.loginTask)}}
       >
         Log in with GitHub
       </button>
     {{else if @model.tryAgain}}
-      <button type="button" local-class="link" class="button-reset text--link" data-test-try-again {{on "click" this.reload}}>Try Again</button>
+      <button type="button" class="link button-reset text--link" data-test-try-again {{on "click" this.reload}}>Try Again</button>
     {{else}}
-      <button type="button" local-class="link" class="button-reset text--link" data-test-go-back {{on "click" this.back}}>Go Back</button>
+      <button type="button" class="link button-reset text--link" data-test-go-back {{on "click" this.back}}>Go Back</button>
     {{/if}}
   </div>
 </div>
\ No newline at end of file
diff --git a/app/styles/categories.module.css b/app/templates/categories.css
similarity index 100%
rename from app/styles/categories.module.css
rename to app/templates/categories.css
diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs
index c49fdc5ff66..75a7ad07be4 100644
--- a/app/templates/categories.hbs
+++ b/app/templates/categories.hbs
@@ -2,7 +2,7 @@
 
 <PageHeader @title="All Categories"/>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -19,18 +19,18 @@
   </div>
 </div>
 
-<div local-class="list">
+<div class="list">
   {{#each this.model as |category|}}
-    <div local-class='row' data-test-category={{category.slug}}>
+    <div class='row' data-test-category={{category.slug}}>
       <div>
-        <LinkTo @route="category" @model={{category.slug}} local-class="category-link">
+        <LinkTo @route="category" @model={{category.slug}} class="category-link">
           {{~category.category~}}
         </LinkTo>
         <span class="text--small" data-test-crate-count>
           {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}}
         </span>
       </div>
-      <div local-class="description" class="text--small">
+      <div class="description text--small">
         {{ category.description }}
       </div>
     </div>
@@ -39,7 +39,7 @@
 
 <Pagination @pagination={{this.pagination}} />
 
-<div local-class='categories-footer'>
+<div class='categories-footer'>
   Want to categorize your crate?
   <a href='https://doc.rust-lang.org/cargo/reference/manifest.html#package-metadata'>Add metadata!</a>
 </div>
diff --git a/app/styles/category-slugs.module.css b/app/templates/category-slugs.css
similarity index 100%
rename from app/styles/category-slugs.module.css
rename to app/templates/category-slugs.css
diff --git a/app/templates/category-slugs.hbs b/app/templates/category-slugs.hbs
index 168b98ec852..ff5d7c3ddb6 100644
--- a/app/templates/category-slugs.hbs
+++ b/app/templates/category-slugs.hbs
@@ -2,7 +2,7 @@
 
 <PageHeader @title="All Valid Category Slugs"/>
 
-<dl local-class="list">
+<dl class="list">
   {{#each this.model as |category|}}
     <dt data-test-category-slug={{category.slug}}>{{category.slug}}</dt>
     <dd data-test-category-description={{category.slug}}>{{category.description}}</dd>
diff --git a/app/styles/category/index.module.css b/app/templates/category/index.css
similarity index 100%
rename from app/styles/category/index.module.css
rename to app/templates/category/index.css
diff --git a/app/templates/category/index.hbs b/app/templates/category/index.hbs
index d76aade8a31..6bb05fe7b34 100644
--- a/app/templates/category/index.hbs
+++ b/app/templates/category/index.hbs
@@ -1,6 +1,6 @@
 {{page-title this.category.category ' - Categories'}}
 
-<PageHeader local-class="header">
+<PageHeader class="header">
   <h1>
     {{#each this.category.parent_categories as |parent|}}<LinkTo @route="category" @model={{parent.slug}}>{{parent.category}}</LinkTo>::{{/each}}
     {{~ this.category.category }}
@@ -14,16 +14,16 @@
 {{#if this.category.subcategories }}
   <div>
     <h2>Subcategories</h2>
-    <div local-class="subcategories">
+    <div class="subcategories">
       {{#each this.category.subcategories as |subcategory| }}
-        <div local-class="subcategory">
+        <div class="subcategory">
           <div>
             <LinkTo @route="category" @model={{subcategory.slug}}>{{subcategory.category}}</LinkTo>
             <span class="text--small">
               {{format-num subcategory.crates_cnt}} {{if (eq subcategory.crates_cnt 1) "crate" "crates"}}
             </span>
           </div>
-          <div local-class="category-description" class="text--small">
+          <div class="category-description text--small">
             {{ subcategory.description }}
           </div>
         </div>
@@ -33,7 +33,7 @@
 {{/if}}
 
 <h2>Crates</h2>
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -53,6 +53,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model}} local-class="list" />
+<CrateList @crates={{this.model}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/styles/crate/delete.module.css b/app/templates/crate/delete.css
similarity index 94%
rename from app/styles/crate/delete.module.css
rename to app/templates/crate/delete.css
index cdbae7a9f72..0c3329d433e 100644
--- a/app/styles/crate/delete.module.css
+++ b/app/templates/crate/delete.css
@@ -27,21 +27,21 @@
 .warning {
     display: flex;
 
-    svg {
+    :global(svg) {
         flex-shrink: 0;
         width: 1em;
         height: 1em;
         color: var(--yellow500);
     }
 
-    p {
+    :global(p) {
         margin: 0 0 0 var(--space-xs);
         text-wrap: pretty;
     }
 }
 
 .impact, .requirements {
-    li {
+    :global(li) {
         margin-bottom: var(--space-2xs);
     }
 }
@@ -68,7 +68,7 @@
         margin-top: 0.5em;
     }
 
-    ol ol {
+    :global(ol ol) {
         list-style-type: sub;
         padding-left: 1.5em;
     }
@@ -85,7 +85,7 @@
 .confirmation {
     display: block;
 
-    input {
+    :global(input) {
         margin-right: var(--space-3xs);
     }
 }
diff --git a/app/templates/crate/delete.hbs b/app/templates/crate/delete.hbs
index 788ff6c84b5..64119e3c280 100644
--- a/app/templates/crate/delete.hbs
+++ b/app/templates/crate/delete.hbs
@@ -1,15 +1,15 @@
-<div local-class="wrapper">
-  <form local-class="content" {{on "submit" (prevent-default (perform this.deleteTask))}}>
-    <h1 local-class="title" data-test-title>Delete the {{@model.name}} crate?</h1>
+<div class="wrapper">
+  <form class="content" {{on "submit" (prevent-default (perform this.deleteTask))}}>
+    <h1 class="title" data-test-title>Delete the {{@model.name}} crate?</h1>
 
     <p>Are you sure you want to delete the crate "{{@model.name}}"?</p>
 
-    <div local-class="warning">
+    <div class="warning">
       {{svg-jar "triangle-exclamation"}}
       <p><strong>Important:</strong> This action will permanently delete the crate and its associated versions. Deleting a crate cannot be reversed!</p>
     </div>
 
-    <div local-class="impact">
+    <div class="impact">
       <h3>Potential Impact:</h3>
       <ul>
         <li>Users will no longer be able to download this crate.</li>
@@ -18,17 +18,17 @@
       </ul>
     </div>
 
-    <div local-class="requirements">
+    <div class="requirements">
       <h3>Requirements:</h3>
       <p>
         A crate can only be deleted if it is not depended upon by any other crate on crates.io.
       </p>
       <p>Additionally, a crate can only be deleted if either:</p>
-      <ol local-class='first'>
+      <ol class='first'>
         <li>the crate has been published for less than 72 hours</li>
       </ol>
-      <div local-class='or'>or</div>
-      <ol start="2" local-class='second'>
+      <div class='or'>or</div>
+      <ol start="2" class='second'>
         <li>
           <ol>
             <li>the crate only has a single owner, <em>and</em></li>
@@ -38,7 +38,7 @@
       </ol>
     </div>
 
-    <div local-class="reason">
+    <div class="reason">
       <h3>Reason:</h3>
         <label>
           <p>Please tell us why you are deleting this crate:</p>
@@ -46,14 +46,13 @@
             @type="text"
             @value={{this.reason}}
             required={{true}}
-            local-class="reason-input"
-            class="base-input"
+            class="reason-input base-input"
             data-test-reason
           />
         </label>
     </div>
 
-    <label local-class="confirmation">
+    <label class="confirmation">
       <Input
         @type="checkbox"
         @checked={{this.isConfirmed}}
@@ -64,7 +63,7 @@
       I understand that deleting this crate is permanent and cannot be undone.
     </label>
 
-    <div local-class="actions">
+    <div class="actions">
       <button
         type="submit"
         disabled={{or (not this.isConfirmed) this.deleteTask.isRunning}}
@@ -74,8 +73,8 @@
         Delete this crate
       </button>
       {{#if this.deleteTask.isRunning}}
-        <div local-class="spinner-wrapper">
-          <LoadingSpinner local-class="spinner" data-test-spinner />
+        <div class="spinner-wrapper">
+          <LoadingSpinner class="spinner" data-test-spinner />
         </div>
       {{/if}}
     </div>
diff --git a/app/styles/crate/reverse-dependencies.module.css b/app/templates/crate/reverse-dependencies.css
similarity index 100%
rename from app/styles/crate/reverse-dependencies.module.css
rename to app/templates/crate/reverse-dependencies.css
diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs
index 81d81bb16be..11d79edfc7a 100644
--- a/app/templates/crate/reverse-dependencies.hbs
+++ b/app/templates/crate/reverse-dependencies.hbs
@@ -1,7 +1,7 @@
 <CrateHeader @crate={{this.crate}} />
 
 {{#if this.model}}
-  <div local-class="results-meta">
+  <div class="results-meta">
     <ResultsCount
       @start={{this.pagination.currentPageStart}}
       @end={{this.pagination.currentPageEnd}}
@@ -10,9 +10,9 @@
     />
   </div>
 
-  <ul local-class="list" data-test-list>
+  <ul class="list" data-test-list>
     {{#each this.model as |dependency index|}}
-      <li local-class="row">
+      <li class="row">
         <RevDepRow @dependency={{dependency}} data-test-row={{index}} />
       </li>
     {{/each}}
@@ -20,7 +20,7 @@
 
   <Pagination @pagination={{this.pagination}} />
 {{else}}
-  <div local-class="no-results">
+  <div class="no-results">
     This crate is not used as a dependency in any other crate on crates.io.
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/styles/crate/settings/index.module.css b/app/templates/crate/settings/index.css
similarity index 95%
rename from app/styles/crate/settings/index.module.css
rename to app/templates/crate/settings/index.css
index 67132621c49..0fabcdbd612 100644
--- a/app/styles/crate/settings/index.module.css
+++ b/app/templates/crate/settings/index.css
@@ -55,11 +55,11 @@
     border-radius: var(--space-3xs);
     box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
-    tbody > tr > td {
+    :global(tbody) > :global(tr) > :global(td) {
         border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #232321);
     }
 
-    th, td {
+    :global(th), :global(td) {
         text-align: left;
         padding: var(--space-s) var(--space-m);
     }
diff --git a/app/templates/crate/settings/index.hbs b/app/templates/crate/settings/index.hbs
index 1e797bfa3fc..2a1878b78a4 100644
--- a/app/templates/crate/settings/index.hbs
+++ b/app/templates/crate/settings/index.hbs
@@ -2,7 +2,7 @@
 
 <CrateHeader @crate={{this.crate}} />
 
-<div local-class="header">
+<div class="header">
   <h2>Owners</h2>
   {{#unless this.addOwnerVisible}}
     <button type="button" class="button button--small" data-test-add-owner-button {{on "click" this.showAddOwnerForm}}>Add Owner</button>
@@ -10,32 +10,32 @@
 </div>
 
 {{#if this.addOwnerVisible}}
-  <form local-class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
-    <label local-class="email-input-label" for='new-owner-username'>
+  <form class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
+    <label class="email-input-label" for='new-owner-username'>
       Username
     </label>
-    <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" local-class="email-input" name="username" />
+    <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" class="email-input" name="username" />
     <button type="submit" disabled={{not this.username}} class="button button--small" data-test-save-button>Add</button>
   </form>
 {{/if}}
 
-<div local-class='list' data-test-owners>
+<div class='list' data-test-owners>
   {{#each this.crate.owner_team as |team|}}
-    <div local-class='row' data-test-owner-team={{team.login}}>
+    <div class='row' data-test-owner-team={{team.login}}>
       <LinkTo @route={{team.kind}} @model={{team.login}}>
         <UserAvatar @user={{team}} @size="medium-small" />
       </LinkTo>
       <LinkTo @route={{team.kind}} @model={{team.login}}>
         {{team.display_name}}
       </LinkTo>
-      <div local-class="email-column">
+      <div class="email-column">
         {{team.email}}
       </div>
       <button type="button" class="button button--small" data-test-remove-owner-button {{on "click" (perform this.removeOwnerTask team)}}>Remove</button>
     </div>
   {{/each}}
   {{#each this.crate.owner_user as |user|}}
-    <div local-class='row' data-test-owner-user={{user.login}}>
+    <div class='row' data-test-owner-user={{user.login}}>
       <LinkTo @route={{user.kind}} @model={{user.login}}>
         <UserAvatar @user={{user}} @size="medium-small" />
       </LinkTo>
@@ -46,7 +46,7 @@
           {{user.login}}
         {{/if}}
       </LinkTo>
-      <div local-class="email-column">
+      <div class="email-column">
         {{user.email}}
       </div>
       <button type="button" class="button button--small" data-test-remove-owner-button {{on "click" (perform this.removeOwnerTask user)}}>Remove</button>
@@ -56,7 +56,7 @@
 
 {{! The "Trusted Publishing" section is hidden for now until we make this feature publicly available. }}
 {{#if this.githubConfigs}}
-  <div local-class="header">
+  <div class="header">
     <h2>Trusted Publishing</h2>
     <div>
       <LinkTo @route="docs.trusted-publishing" class="button button--tan button--small" data-test-trusted-publishing-docs-button>
@@ -68,7 +68,7 @@
     </div>
   </div>
 
-  <table local-class="trustpub" data-test-trusted-publishing>
+  <table class="trustpub" data-test-trusted-publishing>
     <thead>
     <tr>
       <th>Publisher</th>
@@ -80,14 +80,14 @@
     {{#each this.githubConfigs as |config|}}
       <tr data-test-github-config={{config.id}}>
         <td>GitHub</td>
-        <td local-class="details">
+        <td class="details">
           <strong>Repository:</strong> {{config.repository_owner}}/{{config.repository_name}}<br>
           <strong>Workflow:</strong> {{config.workflow_filename}}<br>
           {{#if config.environment}}
             <strong>Environment:</strong> {{config.environment}}
           {{/if}}
         </td>
-        <td local-class="actions">
+        <td class="actions">
           <button type="button" class="button button--small" data-test-remove-config-button {{on "click" (perform this.removeConfigTask config)}}>Remove</button>
         </td>
       </tr>
@@ -100,7 +100,7 @@
   </table>
 {{/if}}
 
-<h2 local-class="header">Danger Zone</h2>
+<h2 class="header">Danger Zone</h2>
 
 <div>
   <LinkTo @route="crate.delete" class="button button--red" data-test-delete-button>
diff --git a/app/styles/crate/settings/new-trusted-publisher.module.css b/app/templates/crate/settings/new-trusted-publisher.css
similarity index 100%
rename from app/styles/crate/settings/new-trusted-publisher.module.css
rename to app/templates/crate/settings/new-trusted-publisher.css
diff --git a/app/templates/crate/settings/new-trusted-publisher.hbs b/app/templates/crate/settings/new-trusted-publisher.hbs
index d6c993cc9d5..8f6c01193f5 100644
--- a/app/templates/crate/settings/new-trusted-publisher.hbs
+++ b/app/templates/crate/settings/new-trusted-publisher.hbs
@@ -1,15 +1,14 @@
-<form local-class="form" {{on "submit" (prevent-default (perform this.saveConfigTask))}}>
+<form class="form" {{on "submit" (prevent-default (perform this.saveConfigTask))}}>
   <h2>Add a new Trusted Publisher</h2>
 
-  <div local-class="form-group">
+  <div class="form-group">
     {{#let (unique-id) as |id|}}
       <label for={{id}} class="form-group-name">Publisher</label>
 
       <select
         id={{id}}
         disabled={{this.saveConfigTask.isRunning}}
-        local-class="publisher-select"
-        class="base-input"
+        class="publisher-select base-input"
         data-test-publisher
       >
         {{#each this.publishers as |publisher|}}
@@ -18,13 +17,13 @@
       </select>
     {{/let}}
 
-    <div local-class="note">
+    <div class="note">
       crates.io currently only supports GitHub, but we are planning to support other platforms in the future.
     </div>
   </div>
 
   {{#if (eq this.publisher "GitHub")}}
-    <div local-class="form-group" data-test-repository-owner-group>
+    <div class="form-group" data-test-repository-owner-group>
       {{#let (unique-id) as |id|}}
         <label for={{id}} class="form-group-name">Repository owner</label>
 
@@ -35,8 +34,7 @@
           disabled={{this.saveConfigTask.isRunning}}
           aria-required="true"
           aria-invalid={{if this.repositoryOwnerInvalid "true" "false"}}
-          local-class="input"
-          class="base-input"
+          class="input base-input"
           data-test-repository-owner
           {{auto-focus}}
           {{on "input" this.resetRepositoryOwnerValidation}}
@@ -47,14 +45,14 @@
             Please enter a repository owner.
           </div>
         {{else}}
-          <div local-class="note">
+          <div class="note">
             The GitHub organization name or GitHub username that owns the repository.
           </div>
         {{/if}}
       {{/let}}
     </div>
 
-    <div local-class="form-group" data-test-repository-name-group>
+    <div class="form-group" data-test-repository-name-group>
       {{#let (unique-id) as |id|}}
         <label for={{id}} class="form-group-name">Repository name</label>
 
@@ -65,8 +63,7 @@
           disabled={{this.saveConfigTask.isRunning}}
           aria-required="true"
           aria-invalid={{if this.repositoryNameInvalid "true" "false"}}
-          local-class="input"
-          class="base-input"
+          class="input base-input"
           data-test-repository-name
           {{on "input" this.resetRepositoryNameValidation}}
         />
@@ -76,14 +73,14 @@
             Please enter a repository name.
           </div>
         {{else}}
-          <div local-class="note">
+          <div class="note">
             The name of the GitHub repository that contains the publishing workflow.
           </div>
         {{/if}}
       {{/let}}
     </div>
 
-    <div local-class="form-group" data-test-workflow-filename-group>
+    <div class="form-group" data-test-workflow-filename-group>
       {{#let (unique-id) as |id|}}
         <label for={{id}} class="form-group-name">Workflow filename</label>
 
@@ -94,8 +91,7 @@
           disabled={{this.saveConfigTask.isRunning}}
           aria-required="true"
           aria-invalid={{if this.workflowFilenameInvalid "true" "false"}}
-          local-class="input"
-          class="base-input"
+          class="input base-input"
           data-test-workflow-filename
           {{on "input" this.resetWorkflowFilenameValidation}}
         />
@@ -105,14 +101,14 @@
             Please enter a workflow filename.
           </div>
         {{else}}
-          <div local-class="note">
+          <div class="note">
             The filename of the publishing workflow. This file should be present in the <code>.github/workflows/</code> directory of the repository configured above. For example: <code>release.yml</code> or <code>publish.yml</code>.
           </div>
         {{/if}}
       {{/let}}
     </div>
 
-    <div local-class="form-group" data-test-environment-group>
+    <div class="form-group" data-test-environment-group>
       {{#let (unique-id) as |id|}}
         <label for={{id}} class="form-group-name">Environment name (optional)</label>
 
@@ -121,37 +117,34 @@
           @type="text"
           @value={{this.environment}}
           disabled={{this.saveConfigTask.isRunning}}
-          local-class="input"
-          class="base-input"
+          class="input base-input"
           data-test-environment
         />
 
-        <div local-class="note">
+        <div class="note">
           The name of the <a href="https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment">GitHub Actions environment</a> that the above workflow uses for publishing. This should be configured in the repository settings. A dedicated publishing environment is not required, but is <strong>strongly recommended</strong>, especially if your repository has maintainers with commit access who should not have crates.io publishing access.
         </div>
       {{/let}}
     </div>
   {{/if}}
 
-  <div local-class="buttons">
+  <div class="buttons">
     <button
       type="submit"
-      local-class="add-button"
-      class="button button--small"
+      class="add-button button button--small"
       disabled={{this.saveConfigTask.isRunning}}
       data-test-add
     >
       Add
 
       {{#if this.saveConfigTask.isRunning}}
-        <LoadingSpinner @theme="light" local-class="spinner" data-test-spinner />
+        <LoadingSpinner @theme="light" class="spinner" data-test-spinner />
       {{/if}}
     </button>
 
     <LinkTo
       @route="crate.settings.index"
-      local-class="cancel-button"
-      class="button button--tan button--small"
+      class="cancel-button button button--tan button--small"
       data-test-cancel
     >
       Cancel
diff --git a/app/styles/crate/version-dependencies.module.css b/app/templates/crate/version-dependencies.css
similarity index 100%
rename from app/styles/crate/version-dependencies.module.css
rename to app/templates/crate/version-dependencies.css
diff --git a/app/templates/crate/version-dependencies.hbs b/app/templates/crate/version-dependencies.hbs
index 4c42106816a..77e81885752 100644
--- a/app/templates/crate/version-dependencies.hbs
+++ b/app/templates/crate/version-dependencies.hbs
@@ -6,22 +6,22 @@
   @versionNum={{this.version.num}}
 />
 
-<h2 local-class="heading">Dependencies</h2>
+<h2 class="heading">Dependencies</h2>
 {{#if this.version.normalDependencies}}
-  <ul local-class="list" data-test-dependencies>
+  <ul class="list" data-test-dependencies>
     {{#each this.version.normalDependencies as |dependency|}}
       <li><DependencyList::Row @dependency={{dependency}} /></li>
     {{/each}}
   </ul>
 {{else}}
-  <div local-class="no-deps" data-test-no-dependencies>
+  <div class="no-deps" data-test-no-dependencies>
     This version of the "{{this.crate.name}}" crate has no dependencies
   </div>
 {{/if}}
 
 {{#if this.version.buildDependencies}}
-  <h2 local-class="heading">Build-Dependencies</h2>
-  <ul local-class="list" data-test-build-dependencies>
+  <h2 class="heading">Build-Dependencies</h2>
+  <ul class="list" data-test-build-dependencies>
     {{#each this.version.buildDependencies as |dependency|}}
       <li><DependencyList::Row @dependency={{dependency}} /></li>
     {{/each}}
@@ -29,8 +29,8 @@
 {{/if}}
 
 {{#if this.version.devDependencies}}
-  <h2 local-class="heading">Dev-Dependencies</h2>
-  <ul local-class="list" data-test-dev-dependencies>
+  <h2 class="heading">Dev-Dependencies</h2>
+  <ul class="list" data-test-dev-dependencies>
     {{#each this.version.devDependencies as |dependency|}}
       <li><DependencyList::Row @dependency={{dependency}} /></li>
     {{/each}}
diff --git a/app/styles/crate/version.module.css b/app/templates/crate/version.css
similarity index 100%
rename from app/styles/crate/version.module.css
rename to app/templates/crate/version.css
diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs
index 6aaaac17ddf..501cb4a8126 100644
--- a/app/templates/crate/version.hbs
+++ b/app/templates/crate/version.hbs
@@ -6,33 +6,32 @@
   @versionNum={{this.requestedVersion}}
 />
 
-<div local-class='crate-info'>
-  <div local-class="docs" data-test-docs>
+<div class='crate-info'>
+  <div class="docs" data-test-docs>
     {{#if this.loadReadmeTask.isRunning}}
-      <div local-class="readme-spinner">
-        <Placeholder local-class="placeholder-title" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-subtitle" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
-        <Placeholder local-class="placeholder-text" />
+      <div class="readme-spinner">
+        <Placeholder class="placeholder-title" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-subtitle" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
+        <Placeholder class="placeholder-text" />
       </div>
     {{else if this.readme}}
       <article aria-label="Readme" data-test-readme>
-        <RenderedHtml @html={{this.readme}} local-class="readme" />
+        <RenderedHtml @html={{this.readme}} class="readme" />
       </article>
     {{else if this.loadReadmeTask.last.error}}
-      <div local-class="readme-error" data-test-readme-error>
+      <div class="readme-error" data-test-readme-error>
         Failed to load <code>README</code> file for {{this.crate.name}} v{{this.currentVersion.num}}
 
         <button
           type="button"
-          local-class="retry-button"
-          class="button"
+          class="retry-button button"
           data-test-retry-button
           {{on "click" (perform this.loadReadmeTask)}}
         >
@@ -40,7 +39,7 @@
         </button>
       </div>
     {{else}}
-      <div local-class="no-readme" data-test-no-readme>
+      <div class="no-readme" data-test-no-readme>
         {{this.crate.name}} v{{this.currentVersion.num}} appears to have no <code>README.md</code> file
       </div>
     {{/if}}
@@ -50,12 +49,12 @@
     @crate={{this.crate}}
     @version={{this.currentVersion}}
     @requestedVersion={{this.requestedVersion}}
-    local-class="sidebar"
+    class="sidebar"
   />
 </div>
 
-<div local-class='crate-downloads'>
-  <div local-class='stats'>
+<div class='crate-downloads'>
+  <div class='stats'>
     {{#if this.downloadsContext.num}}
       <h3 data-test-crate-stats-label>
         Stats Overview for {{this.downloadsContext.num}}
@@ -65,28 +64,28 @@
     {{else}}
       <h3 data-test-crate-stats-label>Stats Overview</h3>
     {{/if}}
-    <div local-class='stat'>
-      <span local-class='num'>
+    <div class='stat'>
+      <span class='num'>
         {{svg-jar "download"}}
-        <span local-class="num__align">{{ format-num this.downloadsContext.downloads }}</span>
+        <span class="num__align">{{ format-num this.downloadsContext.downloads }}</span>
       </span>
       <span class="text--small">Downloads all time</span>
     </div>
-    <div local-class='stat'>
-      <span local-class="num">
+    <div class='stat'>
+      <span class="num">
         {{svg-jar "crate"}}
-        <span local-class="num__align">{{ this.crate.num_versions }}</span>
+        <span class="num__align">{{ this.crate.num_versions }}</span>
       </span>
       <span class="text--small">Versions published</span>
     </div>
   </div>
-  <div local-class='graph'>
+  <div class='graph'>
     <h4>Downloads over the last 90 days</h4>
-    <div local-class="toggle-stacked">
-      <span local-class="toggle-stacked-label">Display as </span>
+    <div class="toggle-stacked">
+      <span class="toggle-stacked-label">Display as </span>
       <Dropdown as |dd|>
-        <dd.Trigger local-class="trigger">
-          <span local-class="trigger-label">
+        <dd.Trigger class="trigger">
+          <span class="trigger-label">
             {{#if this.stackedGraph}}
               Stacked
             {{else}}
@@ -98,7 +97,7 @@
           <menu.Item>
             <button
               type="button"
-              local-class="dropdown-button"
+              class="dropdown-button"
               {{on "click" this.setStackedGraph}}
             >
               Stacked
@@ -107,7 +106,7 @@
           <menu.Item>
             <button
               type="button"
-              local-class="dropdown-button"
+              class="dropdown-button"
               {{on "click" this.setUnstackedGraph}}
             >
               Unstacked
@@ -116,6 +115,6 @@
         </dd.Menu>
       </Dropdown>
     </div>
-    <DownloadGraph @data={{this.downloads}} @stacked={{this.stackedGraph}} local-class="graph-data" />
+    <DownloadGraph @data={{this.downloads}} @stacked={{this.stackedGraph}} class="graph-data" />
   </div>
 </div>
\ No newline at end of file
diff --git a/app/styles/crate/versions.module.css b/app/templates/crate/versions.css
similarity index 100%
rename from app/styles/crate/versions.module.css
rename to app/templates/crate/versions.css
diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
index f009e582111..e744922a0e0 100644
--- a/app/templates/crate/versions.hbs
+++ b/app/templates/crate/versions.hbs
@@ -1,8 +1,7 @@
 <CrateHeader @crate={{this.crate}} />
 
-<div local-class="results-meta">
-  <span local-class="page-description"
-    class="text--small {{if (and this.loadMoreTask.isRunning (not this.sortedVersions)) 'is-empty'}}"
+<div class="results-meta">
+  <span class="page-description text--small {{if (and this.loadMoreTask.isRunning (not this.sortedVersions)) 'is-empty'}}"
     data-test-page-description
   >
     <strong>{{ this.sortedVersions.length }}</strong> of <strong>{{ this.crate.num_versions }}</strong>
@@ -11,7 +10,7 @@
   </span>
 
   <div data-test-search-sort>
-    <span local-class="sort-by-label">Sort by </span>
+    <span class="sort-by-label">Sort by </span>
     <SortDropdown @current={{this.currentSortBy}} as |sd|>
       <sd.Option @query={{hash sort="date"}} data-test-date-sort>Date</sd.Option>
       <sd.Option @query={{hash sort="semver"}} data-test-semver-sort>SemVer</sd.Option>
@@ -20,16 +19,16 @@
 </div>
 
 {{#if this.sortedVersions}}
-  <ul local-class="list">
+  <ul class="list">
     {{#each this.sortedVersions as |version|}}
       <li>
-        <VersionList::Row @version={{version}} local-class="row" data-test-version={{version.num}} />
+        <VersionList::Row @version={{version}} class="row" data-test-version={{version.num}} />
       </li>
     {{/each}}
   </ul>
 
   {{#if (or this.loadMoreTask.isRunning this.next_page)}}
-    <div local-class="load-more">
+    <div class="load-more">
       <button
         type="button"
         class="load-more-button"
@@ -38,7 +37,7 @@
         {{on "click" (perform this.loadMoreTask)}}
       >
         {{#if this.loadMoreTask.isRunning}}
-          Loading...<LoadingSpinner local-class="loading-spinner" />
+          Loading...<LoadingSpinner class="loading-spinner" />
         {{else}}
           Load More
         {{/if}}
@@ -46,7 +45,7 @@
     </div>
   {{/if}}
 {{else if this.loadMoreTask.isRunning}}
-  <div local-class="loading">
-    <LoadingSpinner local-class="loading-spinner" />
+  <div class="loading">
+    <LoadingSpinner class="loading-spinner" />
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/styles/crates.module.css b/app/templates/crates.css
similarity index 100%
rename from app/styles/crates.module.css
rename to app/templates/crates.css
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
index 9d349723e8f..aa2c80b3cc3 100644
--- a/app/templates/crates.hbs
+++ b/app/templates/crates.hbs
@@ -2,7 +2,7 @@
 
 <PageHeader @title="All Crates" @suffix={{if this.letter (concat "starting with '" this.letter "'")}}/>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -22,6 +22,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model}} local-class="list" />
+<CrateList @crates={{this.model}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/styles/dashboard.module.css b/app/templates/dashboard.css
similarity index 98%
rename from app/styles/dashboard.module.css
rename to app/templates/dashboard.css
index 3be47f68338..5f0094aa683 100644
--- a/app/styles/dashboard.module.css
+++ b/app/templates/dashboard.css
@@ -31,7 +31,7 @@
     display: flex;
     gap: var(--space-s);
 
-    h2 {
+    :global(h2) {
         display: flex;
         align-items: center;
         gap: var(--space-3xs);
@@ -58,7 +58,7 @@
         align-items: center;
     }
 
-    > ul {
+    > :global(ul) {
         margin: var(--space-s) 0;
     }
 
diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
index 96e97d8e79a..c28ed4d8987 100644
--- a/app/templates/dashboard.hbs
+++ b/app/templates/dashboard.hbs
@@ -1,58 +1,58 @@
 {{page-title 'Dashboard'}}
 
-<PageHeader local-class="header">
+<PageHeader class="header">
   <h1>My Dashboard</h1>
-  <div local-class="stats">
-    <div local-class='downloads'>
-      {{svg-jar "download" local-class="header-icon"}}
-      <span local-class='num'>{{format-num this.myStats.total_downloads}}</span>
-      <span local-class="stats-label" class="text--small">Total Downloads</span>
+  <div class="stats">
+    <div class='downloads'>
+      {{svg-jar "download" class=(scoped-class "header-icon")}}
+      <span class='num'>{{format-num this.myStats.total_downloads}}</span>
+      <span class="stats-label text--small">Total Downloads</span>
     </div>
   </div>
 </PageHeader>
 
-<div local-class="my-info">
-  <div local-class="my-crate-lists">
-    <div local-class="header">
+<div class="my-info">
+  <div class="my-crate-lists">
+    <div class="header">
       <h2>
         {{svg-jar "my-packages"}}
         My Crates
       </h2>
 
       {{#if this.hasMoreCrates}}
-        <LinkTo @route="me.crates" local-class="my-crates-link">Show all</LinkTo>
+        <LinkTo @route="me.crates" class="my-crates-link">Show all</LinkTo>
       {{/if}}
     </div>
     <CrateDownloadsList @crates={{this.visibleCrates}} />
 
-    <div local-class='header'>
+    <div class='header'>
       <h2>
         {{svg-jar "following"}}
         Following
       </h2>
 
       {{#if this.hasMoreFollowing}}
-        <LinkTo @route="me.following" local-class="followed-crates-link">Show all</LinkTo>
+        <LinkTo @route="me.following" class="followed-crates-link">Show all</LinkTo>
       {{/if}}
     </div>
     <CrateDownloadsList @crates={{this.visibleFollowing}} />
   </div>
 
-  <div local-class="my-feed">
+  <div class="my-feed">
     <h2>
       {{svg-jar "latest-updates"}}
       Latest Updates
     </h2>
 
-    <div local-class="feed">
-      <ul local-class="feed-list" data-test-feed-list>
+    <div class="feed">
+      <ul class="feed-list" data-test-feed-list>
         {{#each this.myFeed as |version|}}
-          <li local-class="feed-row">
+          <li class="feed-row">
             <LinkTo @route="crate.version" @models={{array version.crateName version.num}}>
               {{ version.crateName }}
               <span class="text--small">{{ version.num }}</span>
             </LinkTo>
-            <span local-class="feed-date" class="text--small">
+            <span class="feed-date text--small">
               {{date-format-distance-to-now version.created_at addSuffix=true}}
             </span>
           </li>
@@ -60,7 +60,7 @@
       </ul>
 
       {{#if this.hasMore}}
-        <div local-class="load-more">
+        <div class="load-more">
           <button type="button" class="load-more-button" disabled={{this.loadMoreTask.isRunning}} {{on "click" (perform this.loadMoreTask)}}>
             Load More
             {{#if this.loadMoreTask.isRunning}}
diff --git a/app/styles/index.module.css b/app/templates/index.css
similarity index 97%
rename from app/styles/index.module.css
rename to app/templates/index.css
index 5234e308397..03b169a6132 100644
--- a/app/styles/index.module.css
+++ b/app/templates/index.css
@@ -57,7 +57,7 @@
     h2 {
         font-size: 1.05rem;
 
-        a:not(:hover) {
+        :global(a:not(:hover)) {
             color: var(--main-color);
         }
     }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 27b360d0324..fe6cd9a7bc8 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,42 +1,42 @@
-<div local-class="hero-buttons">
-  <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" local-class="hero-button" class="button" data-test-install-cargo-link>
-    {{svg-jar "download-arrow" local-class="icon"}}
+<div class="hero-buttons">
+  <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" class="hero-button button" data-test-install-cargo-link>
+    {{svg-jar "download-arrow" class=(scoped-class "icon")}}
     Install Cargo
   </a>
 
-  <a href='https://doc.rust-lang.org/cargo/guide/' local-class="hero-button" class="button">
-    {{svg-jar "flag" local-class="icon"}}
+  <a href='https://doc.rust-lang.org/cargo/guide/' class="hero-button button">
+    {{svg-jar "flag" class=(scoped-class "icon")}}
     Getting Started
   </a>
 </div>
 
-<div local-class='blurb'>
-  <div local-class='intro'>
+<div class='blurb'>
+  <div class='intro'>
     Instantly publish your crates and install them. Use the API to
     interact and find out more information about available crates. Become
     a contributor and enhance the site with your work.
   </div>
 
-  <div local-class='stats'>
+  <div class='stats'>
     <StatsValue
       @label="Downloads"
       @value={{if this.hasData (format-num this.model.num_downloads) "---,---,---"}}
       @icon="file-archive"
-      local-class="downloads"
+      class="downloads"
       data-test-total-downloads
     />
     <StatsValue
       @label="Crates in stock"
       @value={{if this.hasData (format-num this.model.num_crates) "---,---"}}
       @icon="box"
-      local-class="crates"
+      class="crates"
       data-test-total-crates
     />
   </div>
 </div>
 
 {{#if this.dataTask.lastComplete.error}}
-  <p local-class="error-message" data-test-error-message>
+  <p class="error-message" data-test-error-message>
     Unfortunately something went wrong while loading the crates.io summary data.
     Feel free to try again, or let the <a href="mailto:help@crates.io">crates.io
     team</a> know if the problem persists.
@@ -45,21 +45,20 @@
   <button
     type="button"
     disabled={{this.dataTask.isRunning}}
-    local-class="try-again-button"
-    class="button"
+    class="try-again-button button"
     data-test-try-again-button
     {{on "click" this.fetchData}}
   >
     Try Again
     {{#if this.dataTask.isRunning}}
-      <LoadingSpinner @theme="light" local-class="spinner" data-test-spinner />
+      <LoadingSpinner @theme="light" class="spinner" data-test-spinner />
     {{/if}}
   </button>
 {{else}}
-  <div local-class='lists' data-test-lists>
+  <div class='lists' data-test-lists>
     <section data-test-new-crates >
       <h2><LinkTo @route="crates" @query={{hash sort="new"}}>New Crates</LinkTo></h2>
-      <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ol class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
@@ -83,7 +82,7 @@
 
     <section data-test-most-downloaded>
       <h2><LinkTo @route="crates" @query={{hash sort="downloads"}}>Most Downloaded</LinkTo></h2>
-      <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ol class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
@@ -106,7 +105,7 @@
 
     <section data-test-just-updated>
       <h2><LinkTo @route="crates" @query={{hash sort="recent-updates"}}>Just Updated</LinkTo></h2>
-      <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ol class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
@@ -130,7 +129,7 @@
 
     <section data-test-most-recently-downloaded>
       <h2><LinkTo @route="crates" @query={{hash sort="recent-downloads"}}>Most Recent Downloads</LinkTo></h2>
-      <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ol class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
@@ -153,7 +152,7 @@
 
     <section data-test-keywords>
       <h2><LinkTo @route="keywords">Popular Keywords</LinkTo></h2>
-      <ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ul class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
@@ -176,7 +175,7 @@
 
     <section data-test-categories>
       <h2><LinkTo @route="categories">Popular Categories</LinkTo></h2>
-      <ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      <ul class="list" aria-busy="{{this.dataTask.isRunning}}">
         {{#if this.dataTask.isRunning}}
           {{#each (placeholders 10)}}
             <li>
diff --git a/app/styles/keyword/index.module.css b/app/templates/keyword.css
similarity index 100%
rename from app/styles/keyword/index.module.css
rename to app/templates/keyword.css
diff --git a/app/templates/keyword.hbs b/app/templates/keyword.hbs
index b8ec6092841..d2606bbb4b2 100644
--- a/app/templates/keyword.hbs
+++ b/app/templates/keyword.hbs
@@ -2,7 +2,7 @@
 
 <PageHeader @title="All Crates" @suffix="for keyword '{{@model.keyword}}'"/>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -22,6 +22,6 @@
   </div>
 </div>
 
-<CrateList @crates={{@model.crates}} local-class="list" />
+<CrateList @crates={{@model.crates}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/styles/keywords.module.css b/app/templates/keywords.css
similarity index 100%
rename from app/styles/keywords.module.css
rename to app/templates/keywords.css
diff --git a/app/templates/keywords.hbs b/app/templates/keywords.hbs
index 186d59602f4..1af514ce550 100644
--- a/app/templates/keywords.hbs
+++ b/app/templates/keywords.hbs
@@ -2,7 +2,7 @@
 
 <PageHeader @title="All Keywords"/>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -19,9 +19,9 @@
   </div>
 </div>
 
-<div local-class="list">
+<div class="list">
   {{#each this.model as |keyword|}}
-    <div local-class="row" data-test-keyword={{keyword.id}}>
+    <div class="row" data-test-keyword={{keyword.id}}>
       <LinkTo @route="keyword" @model={{keyword.id}}>{{keyword.id}}</LinkTo>
       <span class="text--small" data-test-count>
         {{format-num keyword.crates_cnt}} {{if (eq keyword.crates_cnt 1) "crate" "crates"}}
diff --git a/app/styles/me/crates.module.css b/app/templates/me/crates.css
similarity index 100%
rename from app/styles/me/crates.module.css
rename to app/templates/me/crates.css
diff --git a/app/templates/me/crates.hbs b/app/templates/me/crates.hbs
index 449f040fc48..9e6a1d44ec7 100644
--- a/app/templates/me/crates.hbs
+++ b/app/templates/me/crates.hbs
@@ -4,7 +4,7 @@
 
 {{! TODO: reduce duplication with templates/crates.hbs }}
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -23,6 +23,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model}} local-class="list" />
+<CrateList @crates={{this.model}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/styles/me/following.module.css b/app/templates/me/following.css
similarity index 100%
rename from app/styles/me/following.module.css
rename to app/templates/me/following.css
diff --git a/app/templates/me/following.hbs b/app/templates/me/following.hbs
index ad7c37159f3..0c506afab2c 100644
--- a/app/templates/me/following.hbs
+++ b/app/templates/me/following.hbs
@@ -2,7 +2,7 @@
 
 {{! TODO: reduce duplication with templates/me/crates.hbs }}
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -18,6 +18,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model}} local-class="list" />
+<CrateList @crates={{this.model}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file
diff --git a/app/styles/me/pending-invites.module.css b/app/templates/me/pending-invites.css
similarity index 100%
rename from app/styles/me/pending-invites.module.css
rename to app/templates/me/pending-invites.css
diff --git a/app/templates/me/pending-invites.hbs b/app/templates/me/pending-invites.hbs
index 7fcd2d84d50..e9e1324bda2 100644
--- a/app/templates/me/pending-invites.hbs
+++ b/app/templates/me/pending-invites.hbs
@@ -2,10 +2,10 @@
 
 <PageHeader @title="Pending Owner Invites" />
 
-<div local-class="list">
+<div class="list">
   {{#each this.model as |invite|}}
-    <PendingOwnerInviteRow @invite={{invite}} local-class="row" data-test-invite={{invite.crate_name}} />
+    <PendingOwnerInviteRow @invite={{invite}} class="row" data-test-invite={{invite.crate_name}} />
   {{else}}
-    <p local-class="row" data-test-empty-state>You don't seem to have any pending invitations.</p>
+    <p class="row" data-test-empty-state>You don't seem to have any pending invitations.</p>
   {{/each}}
 </div>
diff --git a/app/styles/search.module.css b/app/templates/search.css
similarity index 100%
rename from app/styles/search.module.css
rename to app/templates/search.css
diff --git a/app/templates/search.hbs b/app/templates/search.hbs
index 60605201a5d..034fd2bf6a9 100644
--- a/app/templates/search.hbs
+++ b/app/templates/search.hbs
@@ -8,7 +8,7 @@
 />
 
 {{#if this.hasMultiCategoryFilter}}
-  <div local-class="warning">
+  <div class="warning">
     Support for using multiple <code>category:</code> filters is not yet implemented.
   </div>
 {{/if}}
@@ -25,15 +25,14 @@
   <button
     type="button"
     disabled={{this.dataTask.isRunning}}
-    local-class="try-again-button"
-    class="button"
+    class="try-again-button button"
     data-test-try-again-button
     {{on "click" this.fetchData}}
   >
     Try Again
   </button>
 {{else if this.hasItems}}
-  <div local-class="results-meta">
+  <div class="results-meta">
     <ResultsCount
       @start={{this.pagination.currentPageStart}}
       @end={{this.pagination.currentPageEnd}}
@@ -53,7 +52,7 @@
     </div>
   </div>
 
-  <CrateList @crates={{this.model}} local-class="list" />
+  <CrateList @crates={{this.model}} class="list" />
 
   <Pagination @pagination={{this.pagination}} />
 {{else}}
diff --git a/app/styles/settings/email-notifications.module.css b/app/templates/settings/email-notifications.css
similarity index 100%
rename from app/styles/settings/email-notifications.module.css
rename to app/templates/settings/email-notifications.css
diff --git a/app/templates/settings/email-notifications.hbs b/app/templates/settings/email-notifications.hbs
index e0c78191e29..ea17092b3b9 100644
--- a/app/templates/settings/email-notifications.hbs
+++ b/app/templates/settings/email-notifications.hbs
@@ -3,7 +3,7 @@
 <PageHeader @title="Account Settings" />
 
 <SettingsPage>
-  <form local-class="me-email-notifications" {{on "submit" (prevent-default this.saveEmailNotifications)}} >
+  <form class="me-email-notifications" {{on "submit" (prevent-default this.saveEmailNotifications)}} >
     <h2>Email Notification Preferences</h2>
 
     {{#if this.hasEmailNotificationFeature}}
@@ -13,12 +13,12 @@
         emails off for any of your crates listed below.
       </p>
 
-      <div local-class="notifications-row">
+      <div class="notifications-row">
         <button type='button' class="button button--small" {{on "click" this.emailNotificationsSelectAll}}>Select All</button>
         <button type='button' class="button button--small" {{on "click" this.emailNotificationsSelectNone}}>Deselect All</button>
       </div>
 
-      <ul local-class="notifications-list">
+      <ul class="notifications-list">
         {{#each this.ownedCrates as |ownedCrate|}}
           <li>
             <OwnedCrateRow @ownedCrate={{ownedCrate}} />
@@ -26,18 +26,18 @@
         {{/each}}
       </ul>
 
-      <div local-class="notifications-row">
+      <div class="notifications-row">
         {{#if this.emailNotificationsError}}
-          <div local-class="notifications-error">
+          <div class="notifications-error">
             An error occurred while saving your email preferences.
           </div>
         {{/if}}
         {{#if this.emailNotificationsSuccess}}
-          <div local-class="notifications-success">
+          <div class="notifications-success">
             Your email notification preferences have been updated!
           </div>
         {{/if}}
-        <div local-class="right">
+        <div class="right">
           <button type='submit' class="button">Update</button>
         </div>
       </div>
diff --git a/app/styles/settings/profile.module.css b/app/templates/settings/profile.css
similarity index 100%
rename from app/styles/settings/profile.module.css
rename to app/templates/settings/profile.css
diff --git a/app/templates/settings/profile.hbs b/app/templates/settings/profile.hbs
index cc33b80ec67..da7f0105422 100644
--- a/app/templates/settings/profile.hbs
+++ b/app/templates/settings/profile.hbs
@@ -3,10 +3,10 @@
 <PageHeader @title="Account Settings" />
 
 <SettingsPage>
-  <div local-class='me-profile'>
+  <div class='me-profile'>
     <h2>Profile Information</h2>
 
-    <div local-class='info'>
+    <div class='info'>
       <UserLink @user={{this.model.user}}> <UserAvatar @user={{this.model.user}} @size="medium" /> </UserLink>
 
       <dl>
@@ -24,7 +24,7 @@
     </p>
   </div>
 
-  <div local-class="me-email">
+  <div class="me-email">
     <h2>User Email</h2>
     <EmailInput
       @user={{this.model.user}}
@@ -32,25 +32,25 @@
     />
   </div>
 
-  <div local-class="notifications" data-test-notifications>
+  <div class="notifications" data-test-notifications>
     <h2>Notification Settings</h2>
 
-    <label local-class="checkbox-input">
+    <label class="checkbox-input">
       <Input
         @type="checkbox"
         @checked={{this.publishNotifications}}
         disabled={{this.updateNotificationSettings.isRunning}}
         {{on "change" this.handleNotificationsChange}}
       />
-      <span local-class="label">Publish Notifications</span>
-      <span local-class="note">
+      <span class="label">Publish Notifications</span>
+      <span class="note">
         Publish notifications are sent to your email address whenever new
         versions of a crate that you own are published. These can be useful to
         quickly detect compromised accounts or API tokens.
       </span>
     </label>
 
-    <div local-class="buttons">
+    <div class="buttons">
       <button
         type="button"
         class="button button--small"
@@ -60,7 +60,7 @@
         Update preferences
       </button>
       {{#if this.updateNotificationSettings.isRunning}}
-        <LoadingSpinner local-class="spinner" data-test-spinner />
+        <LoadingSpinner class="spinner" data-test-spinner />
       {{/if}}
     </div>
   </div>
diff --git a/app/styles/settings/tokens/new.module.css b/app/templates/settings/tokens/new.css
similarity index 94%
rename from app/styles/settings/tokens/new.module.css
rename to app/templates/settings/tokens/new.css
index 8cc2accd023..0b560cb8202 100644
--- a/app/styles/settings/tokens/new.module.css
+++ b/app/templates/settings/tokens/new.css
@@ -19,7 +19,7 @@
         color: light-dark(var(--grey700), var(--grey600));
     }
 
-    svg {
+    :global(svg) {
         width: 1em;
         height: 1em;
     }
@@ -71,7 +71,7 @@
         border-top: inherit;
     }
 
-    label {
+    :global(label) {
         padding: var(--space-xs) var(--space-s);
         display: flex;
         flex-wrap: wrap;
@@ -112,7 +112,7 @@
 .crates-scope {
     display: flex;
 
-    > div {
+    > :global(div) {
         padding: var(--space-xs) var(--space-s);
         display: flex;
         flex-wrap: wrap;
@@ -121,19 +121,19 @@
         flex-grow: 1;
     }
 
-    input {
+    :global(input) {
         margin: calc(-1 * var(--space-4xs)) 0;
         padding: var(--space-3xs) var(--space-2xs);
         border: 1px solid var(--gray-border);
         border-radius: var(--space-3xs);
     }
 
-    &.invalid input {
+    &.invalid :global(input) {
         background: light-dark(#fff2f2, #170808);
         border-color: red;
     }
 
-    > button {
+    > :global(button) {
         margin: 0;
         padding: 0 var(--space-xs);
         border: none;
@@ -149,7 +149,7 @@
             color: light-dark(var(--grey900), white);
         }
 
-        svg {
+        :global(svg) {
             height: 1.1em;
             width: 1.1em;
         }
@@ -168,12 +168,12 @@
         color: red;
     }
 
-    > span {
+    > :global(span) {
         font-weight: bold;
     }
 }
 
-.crates-pattern-button button {
+.crates-pattern-button :global(button) {
     padding: var(--space-xs) var(--space-s);
     font-size: 0.9em;
     width: 100%;
diff --git a/app/templates/settings/tokens/new.hbs b/app/templates/settings/tokens/new.hbs
index f85a78d480d..b7b937ddc80 100644
--- a/app/templates/settings/tokens/new.hbs
+++ b/app/templates/settings/tokens/new.hbs
@@ -1,7 +1,7 @@
 <h2>New API Token</h2>
 
-<form local-class="form" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
-  <div local-class="form-group" data-test-name-group>
+<form class="form" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
+  <div class="form-group" data-test-name-group>
     {{#let (unique-id) as |id|}}
       <label for={{id}} class="form-group-name">Name</label>
 
@@ -13,8 +13,7 @@
         autocomplete="off"
         aria-required="true"
         aria-invalid={{if this.nameInvalid "true" "false"}}
-        local-class="name-input"
-        class="base-input"
+        class="name-input base-input"
         data-test-name
         {{auto-focus}}
         {{on "input" this.resetNameValidation}}
@@ -28,18 +27,17 @@
     {{/let}}
   </div>
 
-  <div local-class="form-group" data-test-expiry-group>
+  <div class="form-group" data-test-expiry-group>
     {{#let (unique-id) as |id|}}
       <label for={{id}} class="form-group-name">Expiration</label>
     {{/let}}
 
-    <div local-class="select-group">
+    <div class="select-group">
       {{#let (unique-id) as |id|}}
         <select
           id={{id}}
           disabled={{this.saveTokenTask.isRunning}}
-          local-class="expiry-select"
-          class="base-input"
+          class="expiry-select base-input"
           data-test-expiry
           {{on "change" this.updateExpirySelection}}
         >
@@ -61,20 +59,19 @@
           disabled={{this.saveTokenTask.isRunning}}
           aria-invalid={{if this.expiryDateInvalid "true" "false"}}
           aria-label="Custom expiration date"
-          local-class="expiry-date-input"
-          class="base-input"
+          class="expiry-date-input base-input"
           data-test-expiry-date
           {{on "input" this.resetExpiryDateValidation}}
         />
       {{else}}
-        <span local-class="expiry-description" data-test-expiry-description>
+        <span class="expiry-description" data-test-expiry-description>
           {{this.expiryDescription}}
         </span>
       {{/if}}
     </div>
   </div>
 
-  <div local-class="form-group" data-test-scopes-group>
+  <div class="form-group" data-test-scopes-group>
     <div class="form-group-name">
       Scopes
 
@@ -82,7 +79,7 @@
         href="https://rust-lang.github.io/rfcs/2947-crates-io-token-scopes.html"
         target="_blank"
         rel="noopener noreferrer"
-        local-class="help-link"
+        class="help-link"
       >
         <span class="sr-only">Help</span>
         {{svg-jar "circle-question"}}
@@ -100,8 +97,8 @@
               {{on "change" (fn this.toggleScope scope)}}
             />
 
-            <span local-class="scope-id">{{scope}}</span>
-            <span local-class="scope-description">{{this.scopeDescription scope}}</span>
+            <span class="scope-id">{{scope}}</span>
+            <span class="scope-description">{{this.scopeDescription scope}}</span>
           </label>
         </li>
       {{/each}}
@@ -114,7 +111,7 @@
     {{/if}}
   </div>
 
-  <div local-class="form-group" data-test-scopes-group>
+  <div class="form-group" data-test-scopes-group>
     <div class="form-group-name">
       Crates
 
@@ -122,17 +119,17 @@
         href="https://rust-lang.github.io/rfcs/2947-crates-io-token-scopes.html"
         target="_blank"
         rel="noopener noreferrer"
-        local-class="help-link"
+        class="help-link"
       >
         <span class="sr-only">Help</span>
         {{svg-jar "circle-question"}}
       </a>
     </div>
 
-    <ul role="list" local-class="crates-list">
+    <ul role="list" class="crates-list">
       {{#each this.crateScopes as |pattern index|}}
         <li
-          local-class="crates-scope {{if pattern.showAsInvalid "invalid"}}"
+          class="crates-scope {{if pattern.showAsInvalid "invalid"}}"
           data-test-crate-pattern={{index}}
         >
           <div>
@@ -143,7 +140,7 @@
               {{on "blur" pattern.validate}}
             />
 
-            <span local-class="pattern-description" data-test-description>
+            <span class="pattern-description" data-test-description>
               {{pattern.description}}
             </span>
           </div>
@@ -158,12 +155,12 @@
           </button>
         </li>
       {{else}}
-        <li local-class="crates-unrestricted" data-test-crates-unrestricted>
+        <li class="crates-unrestricted" data-test-crates-unrestricted>
           <strong>Unrestricted</strong> – This token can be used for all of your crates.
         </li>
       {{/each}}
 
-      <li local-class="crates-pattern-button">
+      <li class="crates-pattern-button">
         <button
           type="button"
           data-test-add-crate-pattern
@@ -175,25 +172,23 @@
     </ul>
   </div>
 
-  <div local-class="buttons">
+  <div class="buttons">
     <button
       type="submit"
-      local-class="generate-button"
-      class="button button--small"
+      class="generate-button button button--small"
       disabled={{this.saveTokenTask.isRunning}}
       data-test-generate
     >
       Generate Token
 
       {{#if this.saveTokenTask.isRunning}}
-        <LoadingSpinner @theme="light" local-class="spinner" data-test-spinner />
+        <LoadingSpinner @theme="light" class="spinner" data-test-spinner />
       {{/if}}
     </button>
 
     <LinkTo
       @route="settings.tokens.index"
-      local-class="cancel-button"
-      class="button button--tan button--small"
+      class="cancel-button button button--tan button--small"
       data-test-cancel
     >
       Cancel
diff --git a/app/templates/support.css b/app/templates/support.css
new file mode 100644
index 00000000000..f95975ab223
--- /dev/null
+++ b/app/templates/support.css
@@ -0,0 +1,46 @@
+.inquire-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-s);
+    list-style: none;
+    padding: 0;
+}
+
+.link {
+    --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: inherit;
+    min-height: var(--space-2xl);
+    padding: var(--space-xs) var(--space-s);
+    background-color: light-dark(white, #141413);
+    color: light-dark(#525252, #f9f7ec);
+    text-decoration: none;
+    border-radius: var(--space-3xs);
+    box-shadow: var(--shadow);
+    transition: background-color var(--transition-slow);
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
+    }
+
+    &:hover, &:focus-visible {
+        color: light-dark(#525252, #f9f7ec);
+        background-color: light-dark(hsl(58deg 72% 97%), hsl(204, 3%, 11%));
+        transition: background-color var(--transition-instant);
+    }
+
+    &:active {
+        transform: translateY(2px);
+        --shadow: inset 0 0 0 1px hsla(51, 50%, 44%, .15);
+    }
+
+    :global(strong) {
+        margin-left: var(--space-3xs);
+        font-weight: 500;
+    }
+}
diff --git a/app/templates/support.hbs b/app/templates/support.hbs
index e51d15909e2..e6a961f2c1d 100644
--- a/app/templates/support.hbs
+++ b/app/templates/support.hbs
@@ -10,15 +10,14 @@
   {{else}}
     <section data-test-id="inquire-list-section">
       <h2>Choose one of the these categories to continue.</h2>
-      <ul local-class="inquire-list" data-test-id="inquire-list">
+      <ul class="inquire-list" data-test-id="inquire-list">
         {{#each this.supports as |support|}}
           <li>
             <LinkTo
               @route="support"
               @query={{hash inquire=support.inquire}}
               data-test-id="link-{{support.inquire}}"
-              local-class="link"
-              class="box-link"
+              class="link box-link"
             >
             {{support.label}}
             </LinkTo>
@@ -28,8 +27,7 @@
           <a
             href="mailto:help@crates.io"
             data-test-id="link-email-support"
-            local-class="link"
-            class="box-link"
+            class="link box-link"
           >
             For all other cases: <strong>help@crates.io</strong>
           </a>
diff --git a/app/styles/team.module.css b/app/templates/team.css
similarity index 97%
rename from app/styles/team.module.css
rename to app/templates/team.css
index 4469a49f602..503ee836b4a 100644
--- a/app/styles/team.module.css
+++ b/app/templates/team.css
@@ -29,7 +29,7 @@
         color: var(--main-color);
     }
 
-    svg {
+    :global(svg) {
         width: 32px;
         height: 32px;
     }
diff --git a/app/templates/team.hbs b/app/templates/team.hbs
index bc2984e5415..fa28dddcc53 100644
--- a/app/templates/team.hbs
+++ b/app/templates/team.hbs
@@ -1,11 +1,11 @@
-<PageHeader local-class="header" data-test-heading>
-  <UserAvatar @user={{this.model.team}} @size="medium" local-class="avatar" data-test-avatar />
+<PageHeader class="header" data-test-heading>
+  <UserAvatar @user={{this.model.team}} @size="medium" class="avatar" data-test-avatar />
   <div>
-    <div local-class="header-row">
+    <div class="header-row">
       <h1 data-test-org-name>
         {{ this.model.team.org_name }}
       </h1>
-      <UserLink @user={{this.model.team}} local-class="github-link" data-test-github-link>
+      <UserLink @user={{this.model.team}} class="github-link" data-test-github-link>
         {{svg-jar "github" alt="GitHub profile"}}
       </UserLink>
     </div>
@@ -15,7 +15,7 @@
   </div>
 </PageHeader>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -34,6 +34,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model.crates}} local-class="list" />
+<CrateList @crates={{this.model.crates}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file
diff --git a/app/styles/user.module.css b/app/templates/user.css
similarity index 95%
rename from app/styles/user.module.css
rename to app/templates/user.css
index 2e9e78bd66d..13e03313ff2 100644
--- a/app/styles/user.module.css
+++ b/app/templates/user.css
@@ -9,7 +9,7 @@
         color: var(--main-color);
     }
 
-    svg {
+    :global(svg) {
         width: 32px;
         height: 32px;
     }
diff --git a/app/templates/user.hbs b/app/templates/user.hbs
index 812e4113a33..d3bbcab3839 100644
--- a/app/templates/user.hbs
+++ b/app/templates/user.hbs
@@ -1,14 +1,14 @@
-<PageHeader local-class="header" data-test-heading>
+<PageHeader class="header" data-test-heading>
   <UserAvatar @user={{this.model.user}} @size="medium" data-test-avatar />
   <h1 data-test-username>
     {{ this.model.user.login }}
   </h1>
-  <UserLink @user={{this.model.user}} local-class="github-link" data-test-user-link>
+  <UserLink @user={{this.model.user}} class="github-link" data-test-user-link>
     {{svg-jar "github" alt="GitHub profile"}}
   </UserLink>
 </PageHeader>
 
-<div local-class="results-meta">
+<div class="results-meta">
   <ResultsCount
     @start={{this.pagination.currentPageStart}}
     @end={{this.pagination.currentPageEnd}}
@@ -27,6 +27,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model.crates}} local-class="list" />
+<CrateList @crates={{this.model.crates}} class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file
diff --git a/config/targets.js b/config/targets.js
deleted file mode 100644
index a78585e5bf5..00000000000
--- a/config/targets.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
-  browsers: [
-    // These are the browsers we actually are attempting to support:
-    'last 2 Chrome versions',
-    'last 1 Firefox version',
-    'Firefox ESR',
-    'last 1 Safari version',
-    'last 1 iOS version',
-    'last 1 Edge version',
-    'last 1 UCAndroid version',
-    'last 1 years',
-  ],
-};
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 740385df74b..a231bd84d37 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -17,8 +17,6 @@ module.exports = function (defaults) {
     extraPublicTrees.push(funnel(mswParentPath, { include: ['mockServiceWorker.js'] }));
   }
 
-  let browsers = require('./config/targets').browsers;
-
   let app = new EmberApp(defaults, {
     '@embroider/macros': {
       setConfig: {
@@ -49,34 +47,6 @@ module.exports = function (defaults) {
       throwUnlessParallelizable: true,
     },
 
-    cssModules: {
-      extension: 'module.css',
-      // see https://github.com/salsify/ember-css-modules/blob/v2.0.1/docs/ORDERING.md
-      headerModules: [
-        'crates-io/styles/shared/a11y',
-        'crates-io/styles/shared/buttons',
-        'crates-io/styles/shared/forms',
-        'crates-io/styles/shared/sort-by',
-        'crates-io/styles/shared/typography',
-        'crates-io/styles/application',
-        // for the `.scopes-list` class
-        'crates-io/styles/settings/tokens/new',
-        // for the `.box-link` class
-        'crates-io/components/front-page-list/item',
-      ],
-      plugins: {
-        postprocess: [
-          require('postcss-preset-env')({
-            browsers,
-            preserve: false,
-            features: {
-              'nesting-rules': true,
-            },
-          }),
-        ],
-      },
-    },
-
     emberData: {
       deprecations: {
         DEPRECATE_STORE_EXTENDS_EMBER_OBJECT: false,
@@ -93,7 +63,7 @@ module.exports = function (defaults) {
     },
   });
 
-  app.import('node_modules/normalize.css/normalize.css', { prepend: true });
+  // app.import('node_modules/normalize.css/normalize.css');
   app.import('vendor/qunit.css', { type: 'test' });
 
   const { Webpack } = require('@embroider/webpack');
@@ -117,6 +87,29 @@ module.exports = function (defaults) {
           }
           callback();
         },
+        module: {
+          rules: [
+            // CSS loaders for scoped CSS
+            {
+              test: /\.css$/,
+              use: [
+                { loader: require.resolve('ember-scoped-css/build/app-css-loader') },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      plugins: [['postcss-preset-env', { features: { 'nesting-rules': true } }]],
+                    },
+                  },
+                },
+              ],
+            },
+            {
+              test: /\.svg$/,
+              type: 'asset',
+            },
+          ],
+        },
         resolve: {
           fallback: {
             // disables `crypto` import warning in `axe-core`
diff --git a/package.json b/package.json
index 136b3c9af9f..8572f053f47 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,6 @@
     "ember-cli-notifications": "9.1.0",
     "ember-click-outside": "6.1.1",
     "ember-concurrency": "4.0.4",
-    "ember-css-modules": "2.1.1",
     "ember-data": "5.6.0",
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-error-route": "0.2.0",
@@ -109,6 +108,8 @@
     "ember-page-title": "9.0.2",
     "ember-qunit": "9.0.3",
     "ember-resolver": "13.1.1",
+    "ember-scoped-css": "0.23.4",
+    "ember-scoped-css-compat": "10.2.2",
     "ember-source": "6.5.0",
     "ember-svg-jar": "2.6.3",
     "ember-template-lint": "7.9.1",
@@ -131,9 +132,10 @@
     "match-json": "1.3.7",
     "memory-scroll": "2.0.1",
     "msw": "2.10.3",
-    "normalize.css": "8.0.1",
     "nyc": "17.1.0",
     "playwright-msw": "3.0.1",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "10.2.4",
     "prettier": "3.6.2",
     "qunit": "2.24.1",
@@ -169,6 +171,16 @@
       "core-js"
     ]
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 1 Firefox version",
+    "Firefox ESR",
+    "last 1 Safari version",
+    "last 1 iOS version",
+    "last 1 Edge version",
+    "last 1 UCAndroid version",
+    "last 1 years"
+  ],
   "engines": {
     "node": "22.17.0",
     "pnpm": "10.12.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a168254d930..c8a1bfbf5c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,7 +54,7 @@ importers:
         version: 7.28.0(supports-color@8.1.1)
       '@babel/eslint-parser':
         specifier: 7.28.0
-        version: 7.28.0(@babel/core@7.28.0)(eslint@9.30.1)
+        version: 7.28.0(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7))
       '@babel/plugin-proposal-decorators':
         specifier: 7.28.0
         version: 7.28.0(@babel/core@7.28.0)
@@ -172,9 +172,6 @@ importers:
       ember-concurrency:
         specifier: 4.0.4
         version: 4.0.4(@babel/core@7.28.0)
-      ember-css-modules:
-        specifier: 2.1.1
-        version: 2.1.1
       ember-data:
         specifier: 5.6.0
         version: 5.6.0(@ember/test-helpers@5.2.2(@babel/core@7.28.0))(@ember/test-waiters@4.1.0)(ember-inflector@6.0.0(@babel/core@7.28.0))(qunit@2.24.1)
@@ -214,6 +211,12 @@ importers:
       ember-resolver:
         specifier: 13.1.1
         version: 13.1.1
+      ember-scoped-css:
+        specifier: 0.23.4
+        version: 0.23.4(@babel/core@7.28.0)(ember-template-lint@7.9.1)(webpack@5.99.9)
+      ember-scoped-css-compat:
+        specifier: 10.2.2
+        version: 10.2.2(@babel/core@7.28.0)(ember-scoped-css@0.23.4(@babel/core@7.28.0)(ember-template-lint@7.9.1)(webpack@5.99.9))
       ember-source:
         specifier: 6.5.0
         version: 6.5.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
@@ -237,31 +240,31 @@ importers:
         version: 1.0.2
       eslint:
         specifier: 9.30.1
-        version: 9.30.1
+        version: 9.30.1(jiti@1.21.7)
       eslint-config-prettier:
         specifier: 10.1.5
-        version: 10.1.5(eslint@9.30.1)
+        version: 10.1.5(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-ember:
         specifier: 12.5.0
-        version: 12.5.0(@babel/core@7.28.0)(eslint@9.30.1)
+        version: 12.5.0(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-ember-concurrency:
         specifier: 0.5.1
-        version: 0.5.1(eslint@9.30.1)
+        version: 0.5.1(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-import-helpers:
         specifier: 2.0.1
-        version: 2.0.1(eslint@9.30.1)
+        version: 2.0.1(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-prettier:
         specifier: 5.5.1
-        version: 5.5.1(@types/eslint@9.6.1)(eslint-config-prettier@10.1.5(eslint@9.30.1))(eslint@9.30.1)(prettier@3.6.2)
+        version: 5.5.1(@types/eslint@9.6.1)(eslint-config-prettier@10.1.5(eslint@9.30.1(jiti@1.21.7)))(eslint@9.30.1(jiti@1.21.7))(prettier@3.6.2)
       eslint-plugin-qunit:
         specifier: 8.1.2
-        version: 8.1.2(eslint@9.30.1)
+        version: 8.1.2(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-qunit-dom:
         specifier: 0.2.0
-        version: 0.2.0(eslint@9.30.1)
+        version: 0.2.0(eslint@9.30.1(jiti@1.21.7))
       eslint-plugin-unicorn:
         specifier: 59.0.1
-        version: 59.0.1(eslint@9.30.1)
+        version: 59.0.1(eslint@9.30.1(jiti@1.21.7))
       globals:
         specifier: 16.3.0
         version: 16.3.0
@@ -280,15 +283,18 @@ importers:
       msw:
         specifier: 2.10.3
         version: 2.10.3(@types/node@22.16.0)(typescript@5.8.3)
-      normalize.css:
-        specifier: 8.0.1
-        version: 8.0.1
       nyc:
         specifier: 17.1.0
         version: 17.1.0
       playwright-msw:
         specifier: 3.0.1
         version: 3.0.1(@playwright/test@1.53.2)(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
+      postcss-loader:
+        specifier: ^8.1.1
+        version: 8.1.1(postcss@8.5.6)(typescript@5.8.3)(webpack@5.99.9)
       postcss-preset-env:
         specifier: 10.2.4
         version: 10.2.4(postcss@8.5.6)
@@ -331,7 +337,7 @@ importers:
         version: 18.0.1
       vitest:
         specifier: 3.2.4
-        version: 3.2.4(@types/node@22.16.0)(happy-dom@18.0.1)(jsdom@25.0.1)(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(terser@5.43.1)(yaml@2.8.0)
+        version: 3.2.4(@types/node@22.16.0)(happy-dom@18.0.1)(jiti@1.21.7)(jsdom@25.0.1)(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(terser@5.43.1)(yaml@2.8.0)
 
 packages:
 
@@ -1603,6 +1609,9 @@ packages:
   '@glimmer/env@0.1.7':
     resolution: {integrity: sha512-JKF/a9I9jw6fGoz8kA7LEQslrwJ5jms5CXhu/aqkBWk+PmZ6pTl8mlb/eJ/5ujBGTiQzBhy5AIWF712iA+4/mw==}
 
+  '@glimmer/global-context@0.84.3':
+    resolution: {integrity: sha512-8Oy9Wg5IZxMEeAnVmzD2NkObf89BeHoFSzJgJROE/deutd3rxg83mvlOez4zBBGYwnTb+VGU2LYRpet92egJjA==}
+
   '@glimmer/global-context@0.93.4':
     resolution: {integrity: sha512-Yw9xkDReAcC5oS/hY3PjGrFKRygYFA4pdO7tvuxReoVOyUtjoBOAwHJUileiElERDdMWIMfoLema8Td1mqkjhA==}
 
@@ -1630,6 +1639,9 @@ packages:
   '@glimmer/program@0.94.9':
     resolution: {integrity: sha512-KA3TXYL2iDdR92pPnB/sw1tgIC7B40l2P60iD1sqkYbyxAbrUPHSToA1ycmK4DwmxDOT3Hz9dvpceoCMbh0xjA==}
 
+  '@glimmer/reference@0.84.3':
+    resolution: {integrity: sha512-lV+p/aWPVC8vUjmlvYVU7WQJsLh319SdXuAWoX/SE3pq340BJlAJiEcAc6q52y9JNhT57gMwtjMX96W5Xcx/qw==}
+
   '@glimmer/reference@0.94.8':
     resolution: {integrity: sha512-FPoXBRMXJupO9nAq/Vw3EY/FCY3xbd+VALqZupyu6ds9vjNiKAkD9+ujIjYa1f+d/ez2ONhy8QjEFoBsyW2flA==}
 
@@ -1660,6 +1672,9 @@ packages:
   '@glimmer/validator@0.44.0':
     resolution: {integrity: sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==}
 
+  '@glimmer/validator@0.84.3':
+    resolution: {integrity: sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==}
+
   '@glimmer/validator@0.94.8':
     resolution: {integrity: sha512-vTP6hAcrxE5/0dG2w+tHSteXxgWmkBwMzu5ZTxMg+EkqthWl8B5r5skLiviQ6SdKAOBJGhzf6tF4ltHo5y83hQ==}
 
@@ -2637,6 +2652,10 @@ packages:
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
   array-unique@0.3.2:
     resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
     engines: {node: '>=0.10.0'}
@@ -2668,6 +2687,10 @@ packages:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   async-disk-cache@1.3.5:
     resolution: {integrity: sha512-VZpqfR0R7CEOJZ/0FOTgWq70lCrZyS1rkI8PXugDUkTKyyAUgZ2zQ09gLhMkEn+wN8LYeUTPxZdXtlX/kmbXKQ==}
 
@@ -2859,6 +2882,9 @@ packages:
   bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
+  blueimp-md5@2.19.0:
+    resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==}
+
   body-parser@1.20.3:
     resolution: {integrity: sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -2899,10 +2925,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.17.9
 
-  broccoli-bridge@1.0.0:
-    resolution: {integrity: sha512-WvU6T6AJrtpFSScgyCVEFAajPAJTOYYIIpGvs/PbkSq9OUBvI3/IEUHg+Ipx376M/clGFwa7K9crEtpauqC66A==}
-    engines: {node: '>= 6.0'}
-
   broccoli-caching-writer@3.0.3:
     resolution: {integrity: sha512-g644Kb5uBPsy+6e2DvO3sOc+/cXZQQNgQt64QQzjA9TSdP0dl5qvetpoNIx4sy/XIjrPYG1smEidq9Z9r61INw==}
 
@@ -2916,12 +2938,6 @@ packages:
   broccoli-config-replace@1.1.2:
     resolution: {integrity: sha512-qLlEY3V7p3ZWJNRPdPgwIM77iau1qR03S9BupMMFngjzBr7S6RSzcg96HbCYXmW9gfTbjRm9FC4CQT81SBusZg==}
 
-  broccoli-css-modules@0.8.0:
-    resolution: {integrity: sha512-ThOk7RZtD1nIn/TPnyA7pXaR7V62/oI9WPL2Ub6so/Ms7IGU4iGcftMPcF+XWWlgf8I43id+Or8IHHhQRBRw2g==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: ^8.1.0
-
   broccoli-debug@0.6.5:
     resolution: {integrity: sha512-RIVjHvNar9EMCLDW/FggxFRXqpjhncM/3qq87bn/y+/zR9tqEkHvTqbyOc4QnB97NO2m6342w4wGkemkaeOuWg==}
 
@@ -2991,10 +3007,6 @@ packages:
     resolution: {integrity: sha512-a4zUsWtA1uns1K7p9rExYVYG99rdKeGRymW0qOCNkvDPHQxVi3yVyJHhQbM3EZwdt2E0mnhr5e0c/bPpJ7p3Wg==}
     engines: {node: 10.* || >= 12.*}
 
-  broccoli-postcss@6.1.0:
-    resolution: {integrity: sha512-I8+DHq5xcCBHU0PpCtDMayAmSUVx07CqAquUpdlNUHckXeD//cUFf4aFQllnZBhF8Z86YLhuA+j7qvCYYgBXRg==}
-    engines: {node: '>= 10'}
-
   broccoli-slow-trees@3.1.0:
     resolution: {integrity: sha512-FRI7mRTk2wjIDrdNJd6znS7Kmmne4VkAkl8Ix1R/VoePFMD0g0tEl671xswzFqaRjpT9Qu+CC4hdXDLDJBuzMw==}
 
@@ -3267,6 +3279,10 @@ packages:
     resolution: {integrity: sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==}
     engines: {node: '>=0.1.90'}
 
+  colors@1.4.0:
+    resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==}
+    engines: {node: '>=0.1.90'}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -3574,6 +3590,15 @@ packages:
       typescript:
         optional: true
 
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   cross-spawn@6.0.6:
     resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
     engines: {node: '>=4.8'}
@@ -3996,6 +4021,10 @@ packages:
     resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
     engines: {node: '>=0.3.1'}
 
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
   dom-element-descriptors@0.5.1:
     resolution: {integrity: sha512-DLayMRQ+yJaziF4JJX1FMjwjdr7wdTr1y9XvZ+NfHELfOMcYDnCHneAYXAS4FT1gLILh4V0juMZohhH1N5FsoQ==}
 
@@ -4224,10 +4253,6 @@ packages:
       '@glint/template':
         optional: true
 
-  ember-css-modules@2.1.1:
-    resolution: {integrity: sha512-9MbaaGC49s4wGoTXnG1OCcHyLs3gOBd3Ptxy2mhY53tIen72S7KRYJD13CRvGXX55Si0RIfDo0lrER+9CO5zyw==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-data@5.6.0:
     resolution: {integrity: sha512-nFFHhAD06C6DM2iD/UQFe+XKPEh27ALudZVZ6CipCAn598i8gfnm5k09ZZiW/YYpU0+4DAqtf91LwZN2e+O3vw==}
     peerDependencies:
@@ -4335,6 +4360,25 @@ packages:
     resolution: {integrity: sha512-89oVHVJwmLDvGvAUWgS87KpBoRhy3aZ6U0Ql6HOmU4TrPkyaa8pM0W81wj9cIwjYprcQtN9EwzZMHnq46+oUyw==}
     engines: {node: 8.* || 10.* || >= 12}
 
+  ember-scoped-css-compat@10.2.2:
+    resolution: {integrity: sha512-ffHNqbS2KldR2/cWvHORcMu74B71/4wPjhCrdUPIAkjonpKE73ylY5D734P0SexRDm2w7/N0AgUuXNdeaCTiAw==}
+    engines: {node: 14.* || 16.* || >= 18}
+    peerDependencies:
+      ember-scoped-css: '>=0.18.0'
+
+  ember-scoped-css@0.23.4:
+    resolution: {integrity: sha512-mDjeKfsinkEeJo5iU0DZtXFGdG/ISRBJnjWT32mdHENyCnAcJhUD05duK6EexvFOyjO7pQF/N6oJ8Cnwgx6pZw==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      ember-template-lint: '>= 5.7.2'
+      ember-teplate-lint: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      ember-teplate-lint:
+        optional: true
+      webpack:
+        optional: true
+
   ember-source@6.5.0:
     resolution: {integrity: sha512-se8UFNu9n017VmKry124jc+Mh1ybZ8sAf9IthYYGpdPYH4PRLxBbxa+YEUdtu1vWoKZG2lVthtOUbCmIAjNrpQ==}
     engines: {node: '>= 18.*'}
@@ -4350,6 +4394,11 @@ packages:
     engines: {node: ^18.18.0 || >= 20.9.0}
     hasBin: true
 
+  ember-template-recast@6.1.5:
+    resolution: {integrity: sha512-VnRN8FzEHQnw/5rCv6Wnq8MVYXbGQbFY+rEufvWV+FO/IsxMahGEud4MYWtTA2q8iG+qJFrDQefNvQ//7MI7Qw==}
+    engines: {node: 12.* || 14.* || >= 16.*}
+    hasBin: true
+
   ember-test-selectors@7.1.0:
     resolution: {integrity: sha512-mIgjzv5PE+z64p1+o8eYkLHqkJY1g4BD93vgfE+ZTAvarIsJxGO8WmmZ7xCkmCM0xB4Idf0duR7IhLRsTg/81w==}
     engines: {node: 18.* || 20.* || >= 22.*}
@@ -4417,6 +4466,10 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
   errlop@2.2.0:
     resolution: {integrity: sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==}
     engines: {node: '>=0.8'}
@@ -5126,6 +5179,10 @@ packages:
   globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
 
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
   globby@14.1.0:
     resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
     engines: {node: '>=18'}
@@ -5219,9 +5276,6 @@ packages:
   hash-for-dep@1.5.1:
     resolution: {integrity: sha512-/dQ/A2cl7FBPI2pO0CANkvuuVi/IFS5oTyJ0PsOb6jW6WbVW1js5qJXMJTNbWHXBIPdFTWFbabjB+mE0d+gelw==}
 
-  hash-string@1.0.0:
-    resolution: {integrity: sha512-dtNNyxXobzHavayZwOwRWhBTqS9GX4jDjIMsGc0fDyaN2A+4zMn5Ua9ODDCggN6w3Spma6mAHL3ImmW3BkWDmQ==}
-
   hasha@5.2.2:
     resolution: {integrity: sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==}
     engines: {node: '>=8'}
@@ -5333,9 +5387,6 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  icss-replace-symbols@1.1.0:
-    resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
-
   icss-utils@5.1.0:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -5730,6 +5781,10 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
   js-string-escape@1.0.1:
     resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
     engines: {node: '>= 0.8'}
@@ -6328,9 +6383,6 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
-  normalize.css@8.0.1:
-    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
-
   npm-package-arg@12.0.2:
     resolution: {integrity: sha512-f1NpFjNI9O4VbKMOlA5QoBq/vSQPORHcTZ2feJpFkTHJ9eQkdlmZEKSjcAhxTGInC7RlEyScT9ui67NaOsjFWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -6832,6 +6884,19 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  postcss-loader@8.1.1:
+    resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
   postcss-logical@8.1.0:
     resolution: {integrity: sha512-pL1hXFQ2fEXNKiNiAgtfA005T9FBxky5zkX6s4GZM2D8RkVgRqz3f4g1JUoq925zXv495qk8UNldDwh8uGEDoA==}
     engines: {node: '>=18'}
@@ -6914,6 +6979,10 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@7.1.0:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
@@ -7067,6 +7136,10 @@ packages:
     resolution: {integrity: sha512-XNvYvkfdAN9QewbrxeTOjgINkdY/odTgTS56ZNEWL9Ml0weT4T3sFtvnTuF+Gxyu46ANcRm1ntrF6F5LAJPAaQ==}
     engines: {node: '>= 4'}
 
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
   redeyed@1.0.1:
     resolution: {integrity: sha512-8eEWsNCkV2rvwKLS1Cvp5agNjMhwRe2um+y32B2+3LqOzg4C9BBPs6vzAfV16Ivb8B9HPNKIqd8OrdBws8kNlQ==}
 
@@ -7811,6 +7884,9 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tiny-lr@2.0.0:
     resolution: {integrity: sha512-f6nh0VMRvhGx4KCeK1lQ/jaL0Zdb5WdR+Jk8q9OSUQnaSDxAEGH1fgqLZ+cMl5EW3F2MGnCsalBO1IsnnogW1Q==}
 
@@ -7858,6 +7934,10 @@ packages:
     resolution: {integrity: sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==}
     engines: {node: '>=6'}
 
+  tmp@0.2.3:
+    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
+    engines: {node: '>=14.14'}
+
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
@@ -7881,9 +7961,6 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  toposort@2.0.2:
-    resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
-
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -8043,6 +8120,10 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin@2.3.5:
+    resolution: {integrity: sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==}
+    engines: {node: '>=18.12.0'}
+
   unquote@1.1.1:
     resolution: {integrity: sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==}
 
@@ -8259,6 +8340,9 @@ packages:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   webpack@5.99.9:
     resolution: {integrity: sha512-brOPwM3JnmOa+7kd3NsmOUOwbDAj8FT9xDsG3IW0MgbN9yZV7Oi/s/+MNQ/EcSMqw7qfoRyXPoeEWT8zLVdVGg==}
     engines: {node: '>=10.13.0'}
@@ -8540,11 +8624,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/eslint-parser@7.28.0(@babel/core@7.28.0)(eslint@9.30.1)':
+  '@babel/eslint-parser@7.28.0(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7))':
     dependencies:
       '@babel/core': 7.28.0(supports-color@8.1.1)
       '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
       eslint-visitor-keys: 2.1.0
       semver: 6.3.1
 
@@ -10046,9 +10130,9 @@ snapshots:
   '@esbuild/win32-x64@0.25.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.30.1)':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.30.1(jiti@1.21.7))':
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -10140,6 +10224,10 @@ snapshots:
 
   '@glimmer/env@0.1.7': {}
 
+  '@glimmer/global-context@0.84.3':
+    dependencies:
+      '@glimmer/env': 0.1.7
+
   '@glimmer/global-context@0.93.4': {}
 
   '@glimmer/interfaces@0.84.3':
@@ -10192,6 +10280,14 @@ snapshots:
       '@glimmer/vm': 0.94.8
       '@glimmer/wire-format': 0.94.8
 
+  '@glimmer/reference@0.84.3':
+    dependencies:
+      '@glimmer/env': 0.1.7
+      '@glimmer/global-context': 0.84.3
+      '@glimmer/interfaces': 0.84.3
+      '@glimmer/util': 0.84.3
+      '@glimmer/validator': 0.84.3
+
   '@glimmer/reference@0.94.8':
     dependencies:
       '@glimmer/global-context': 0.93.4
@@ -10257,6 +10353,11 @@ snapshots:
 
   '@glimmer/validator@0.44.0': {}
 
+  '@glimmer/validator@0.84.3':
+    dependencies:
+      '@glimmer/env': 0.1.7
+      '@glimmer/global-context': 0.84.3
+
   '@glimmer/validator@0.94.8':
     dependencies:
       '@glimmer/global-context': 0.93.4
@@ -11077,14 +11178,14 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(vite@7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0))':
+  '@vitest/mocker@3.2.4(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(vite@7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       msw: 2.10.3(@types/node@22.16.0)(typescript@5.8.3)
-      vite: 7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0)
+      vite: 7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -11420,6 +11521,8 @@ snapshots:
 
   array-flatten@1.1.1: {}
 
+  array-union@2.1.0: {}
+
   array-unique@0.3.2: {}
 
   array.prototype.reduce@1.0.8:
@@ -11455,6 +11558,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   async-disk-cache@1.3.5:
     dependencies:
       debug: 2.6.9
@@ -11685,6 +11792,8 @@ snapshots:
 
   bluebird@3.7.2: {}
 
+  blueimp-md5@2.19.0: {}
+
   body-parser@1.20.3:
     dependencies:
       bytes: 3.1.2
@@ -11787,12 +11896,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  broccoli-bridge@1.0.0:
-    dependencies:
-      broccoli-plugin: 1.3.1
-      fs-extra: 7.0.1
-      symlink-or-copy: 1.3.1
-
   broccoli-caching-writer@3.0.3:
     dependencies:
       broccoli-kitchen-sink-helpers: 0.3.1
@@ -11835,22 +11938,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  broccoli-css-modules@0.8.0(postcss@8.5.6):
-    dependencies:
-      broccoli-caching-writer: 3.0.3
-      ensure-posix-path: 1.1.1
-      icss-replace-symbols: 1.1.0
-      mkdirp: 0.5.6
-      postcss: 8.5.6
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
-      postcss-modules-scope: 3.2.1(postcss@8.5.6)
-      postcss-modules-values: 4.0.0(postcss@8.5.6)
-      rsvp: 4.8.5
-      symlink-or-copy: 1.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   broccoli-debug@0.6.5:
     dependencies:
       broccoli-plugin: 1.3.1
@@ -12030,16 +12117,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  broccoli-postcss@6.1.0:
-    dependencies:
-      broccoli-funnel: 3.0.8
-      broccoli-persistent-filter: 3.1.3
-      minimist: 1.2.8
-      object-assign: 4.1.1
-      postcss: 8.5.6
-    transitivePeerDependencies:
-      - supports-color
-
   broccoli-slow-trees@3.1.0:
     dependencies:
       heimdalljs: 0.2.6
@@ -12372,6 +12449,8 @@ snapshots:
 
   colors@1.0.3: {}
 
+  colors@1.4.0: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -12514,6 +12593,15 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  cosmiconfig@9.0.0(typescript@5.8.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.8.3
+
   cross-spawn@6.0.6:
     dependencies:
       nice-try: 1.0.5
@@ -12956,6 +13044,10 @@ snapshots:
 
   diff@7.0.0: {}
 
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
   dom-element-descriptors@0.5.1: {}
 
   dom-serializer@0.2.2:
@@ -13551,25 +13643,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  ember-css-modules@2.1.1:
-    dependencies:
-      broccoli-bridge: 1.0.0
-      broccoli-concat: 4.2.5
-      broccoli-css-modules: 0.8.0(postcss@8.5.6)
-      broccoli-funnel: 3.0.8
-      broccoli-merge-trees: 4.2.0
-      broccoli-postcss: 6.1.0
-      debug: 4.4.1(supports-color@8.1.1)
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 6.3.0
-      ensure-posix-path: 1.1.1
-      hash-string: 1.0.0
-      lodash.merge: 4.6.2
-      postcss: 8.5.6
-      toposort: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   ember-data@5.6.0(@ember/test-helpers@5.2.2(@babel/core@7.28.0))(@ember/test-waiters@4.1.0)(ember-inflector@6.0.0(@babel/core@7.28.0))(qunit@2.24.1):
     dependencies:
       '@ember-data/adapter': 5.6.0
@@ -13618,10 +13691,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-eslint-parser@0.5.9(@babel/core@7.28.0)(eslint@9.30.1):
+  ember-eslint-parser@0.5.9(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
       '@babel/core': 7.28.0(supports-color@8.1.1)
-      '@babel/eslint-parser': 7.28.0(@babel/core@7.28.0)(eslint@9.30.1)
+      '@babel/eslint-parser': 7.28.0(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7))
       '@glimmer/syntax': 0.92.3
       content-tag: 2.0.3
       eslint-scope: 7.2.2
@@ -13766,6 +13839,43 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ember-scoped-css-compat@10.2.2(@babel/core@7.28.0)(ember-scoped-css@0.23.4(@babel/core@7.28.0)(ember-template-lint@7.9.1)(webpack@5.99.9)):
+    dependencies:
+      ember-cli-babel: 8.2.0(@babel/core@7.28.0)
+      ember-cli-htmlbars: 6.3.0
+      ember-scoped-css: 0.23.4(@babel/core@7.28.0)(ember-template-lint@7.9.1)(webpack@5.99.9)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
+  ember-scoped-css@0.23.4(@babel/core@7.28.0)(ember-template-lint@7.9.1)(webpack@5.99.9):
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@embroider/addon-shim': 1.10.0
+      acorn: 8.15.0
+      babel-import-util: 3.0.1
+      blueimp-md5: 2.19.0
+      broccoli-concat: 4.2.5
+      broccoli-funnel: 3.0.8
+      broccoli-merge-trees: 4.2.0
+      broccoli-persistent-filter: 3.1.3
+      broccoli-stew: 3.0.0
+      content-tag: 3.1.3
+      ember-cli-babel: 8.2.0(@babel/core@7.28.0)
+      ember-template-lint: 7.9.1
+      ember-template-recast: 6.1.5
+      glob: 8.1.0
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+      recast: 0.23.11
+      rollup: 4.44.1
+      unplugin: 2.3.5
+    optionalDependencies:
+      webpack: 5.99.9
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-source@6.5.0(@glimmer/component@2.0.0)(rsvp@4.8.5):
     dependencies:
       '@babel/core': 7.28.0(supports-color@8.1.1)
@@ -13839,6 +13949,22 @@ snapshots:
       '@lint-todo/utils': 13.1.1
       content-tag: 3.1.3
 
+  ember-template-recast@6.1.5:
+    dependencies:
+      '@glimmer/reference': 0.84.3
+      '@glimmer/syntax': 0.84.3
+      '@glimmer/validator': 0.84.3
+      async-promise-queue: 1.0.5
+      colors: 1.4.0
+      commander: 8.3.0
+      globby: 11.1.0
+      ora: 5.4.1
+      slash: 3.0.0
+      tmp: 0.2.3
+      workerpool: 6.5.1
+    transitivePeerDependencies:
+      - supports-color
+
   ember-test-selectors@7.1.0:
     dependencies:
       calculate-cache-key-for-tree: 2.0.0
@@ -13931,6 +14057,8 @@ snapshots:
 
   entities@6.0.1: {}
 
+  env-paths@2.2.1: {}
+
   errlop@2.2.0: {}
 
   error-ex@1.3.2:
@@ -14074,22 +14202,22 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-prettier@10.1.5(eslint@9.30.1):
+  eslint-config-prettier@10.1.5(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
 
-  eslint-plugin-ember-concurrency@0.5.1(eslint@9.30.1):
+  eslint-plugin-ember-concurrency@0.5.1(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
 
-  eslint-plugin-ember@12.5.0(@babel/core@7.28.0)(eslint@9.30.1):
+  eslint-plugin-ember@12.5.0(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
       '@ember-data/rfc395-data': 0.0.4
       css-tree: 3.1.0
-      ember-eslint-parser: 0.5.9(@babel/core@7.28.0)(eslint@9.30.1)
+      ember-eslint-parser: 0.5.9(@babel/core@7.28.0)(eslint@9.30.1(jiti@1.21.7))
       ember-rfc176-data: 0.3.18
-      eslint: 9.30.1
-      eslint-utils: 3.0.0(eslint@9.30.1)
+      eslint: 9.30.1(jiti@1.21.7)
+      eslint-utils: 3.0.0(eslint@9.30.1(jiti@1.21.7))
       estraverse: 5.3.0
       lodash.camelcase: 4.3.0
       lodash.kebabcase: 4.1.1
@@ -14098,40 +14226,40 @@ snapshots:
     transitivePeerDependencies:
       - '@babel/core'
 
-  eslint-plugin-import-helpers@2.0.1(eslint@9.30.1):
+  eslint-plugin-import-helpers@2.0.1(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
 
-  eslint-plugin-prettier@5.5.1(@types/eslint@9.6.1)(eslint-config-prettier@10.1.5(eslint@9.30.1))(eslint@9.30.1)(prettier@3.6.2):
+  eslint-plugin-prettier@5.5.1(@types/eslint@9.6.1)(eslint-config-prettier@10.1.5(eslint@9.30.1(jiti@1.21.7)))(eslint@9.30.1(jiti@1.21.7))(prettier@3.6.2):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
       prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.8
     optionalDependencies:
       '@types/eslint': 9.6.1
-      eslint-config-prettier: 10.1.5(eslint@9.30.1)
+      eslint-config-prettier: 10.1.5(eslint@9.30.1(jiti@1.21.7))
 
-  eslint-plugin-qunit-dom@0.2.0(eslint@9.30.1):
+  eslint-plugin-qunit-dom@0.2.0(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
 
-  eslint-plugin-qunit@8.1.2(eslint@9.30.1):
+  eslint-plugin-qunit@8.1.2(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint-utils: 3.0.0(eslint@9.30.1)
+      eslint-utils: 3.0.0(eslint@9.30.1(jiti@1.21.7))
       requireindex: 1.2.0
     transitivePeerDependencies:
       - eslint
 
-  eslint-plugin-unicorn@59.0.1(eslint@9.30.1):
+  eslint-plugin-unicorn@59.0.1(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@1.21.7))
       '@eslint/plugin-kit': 0.2.8
       ci-info: 4.2.0
       clean-regexp: 1.0.0
       core-js-compat: 3.43.0
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
       esquery: 1.6.0
       find-up-simple: 1.0.1
       globals: 16.3.0
@@ -14159,9 +14287,9 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-utils@3.0.0(eslint@9.30.1):
+  eslint-utils@3.0.0(eslint@9.30.1(jiti@1.21.7)):
     dependencies:
-      eslint: 9.30.1
+      eslint: 9.30.1(jiti@1.21.7)
       eslint-visitor-keys: 2.1.0
 
   eslint-visitor-keys@2.1.0: {}
@@ -14170,9 +14298,9 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.30.1:
+  eslint@9.30.1(jiti@1.21.7):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@1.21.7))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.21.0
       '@eslint/config-helpers': 0.3.0
@@ -14207,6 +14335,8 @@ snapshots:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
+    optionalDependencies:
+      jiti: 1.21.7
     transitivePeerDependencies:
       - supports-color
 
@@ -14937,6 +15067,15 @@ snapshots:
 
   globalyzer@0.1.0: {}
 
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
   globby@14.1.0:
     dependencies:
       '@sindresorhus/merge-streams': 2.3.0
@@ -15035,8 +15174,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  hash-string@1.0.0: {}
-
   hasha@5.2.2:
     dependencies:
       is-stream: 2.0.1
@@ -15177,8 +15314,6 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-replace-symbols@1.1.0: {}
-
   icss-utils@5.1.0(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -15589,6 +15724,8 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
+  jiti@1.21.7: {}
+
   js-string-escape@1.0.1: {}
 
   js-tokens@4.0.0: {}
@@ -16256,8 +16393,6 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
-  normalize.css@8.0.1: {}
-
   npm-package-arg@12.0.2:
     dependencies:
       hosted-git-info: 8.1.0
@@ -16790,6 +16925,17 @@ snapshots:
       '@csstools/utilities': 2.0.0(postcss@8.5.6)
       postcss: 8.5.6
 
+  postcss-loader@8.1.1(postcss@8.5.6)(typescript@5.8.3)(webpack@5.99.9):
+    dependencies:
+      cosmiconfig: 9.0.0(typescript@5.8.3)
+      jiti: 1.21.7
+      postcss: 8.5.6
+      semver: 7.7.2
+    optionalDependencies:
+      webpack: 5.99.9
+    transitivePeerDependencies:
+      - typescript
+
   postcss-logical@8.1.0(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -16923,6 +17069,11 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.0
 
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -17072,6 +17223,14 @@ snapshots:
       private: 0.1.8
       source-map: 0.6.1
 
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   redeyed@1.0.1:
     dependencies:
       esprima: 3.0.0
@@ -18020,6 +18179,8 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tiny-invariant@1.3.3: {}
+
   tiny-lr@2.0.0:
     dependencies:
       body: 5.1.0
@@ -18066,6 +18227,8 @@ snapshots:
     dependencies:
       rimraf: 2.7.1
 
+  tmp@0.2.3: {}
+
   tmpl@1.0.5: {}
 
   to-object-path@0.3.0:
@@ -18090,8 +18253,6 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
-  toposort@2.0.2: {}
-
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.15.0
@@ -18261,6 +18422,12 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin@2.3.5:
+    dependencies:
+      acorn: 8.15.0
+      picomatch: 4.0.2
+      webpack-virtual-modules: 0.6.2
+
   unquote@1.1.1: {}
 
   unset-value@1.0.0:
@@ -18315,13 +18482,13 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vite-node@3.2.4(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0):
+  vite-node@3.2.4(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1(supports-color@8.1.1)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0)
+      vite: 7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -18336,7 +18503,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0):
+  vite@7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.5
       fdir: 6.4.6(picomatch@4.0.2)
@@ -18347,14 +18514,15 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.16.0
       fsevents: 2.3.3
+      jiti: 1.21.7
       terser: 5.43.1
       yaml: 2.8.0
 
-  vitest@3.2.4(@types/node@22.16.0)(happy-dom@18.0.1)(jsdom@25.0.1)(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(terser@5.43.1)(yaml@2.8.0):
+  vitest@3.2.4(@types/node@22.16.0)(happy-dom@18.0.1)(jiti@1.21.7)(jsdom@25.0.1)(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(terser@5.43.1)(yaml@2.8.0):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(vite@7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0))
+      '@vitest/mocker': 3.2.4(msw@2.10.3(@types/node@22.16.0)(typescript@5.8.3))(vite@7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -18372,8 +18540,8 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.0.0(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0)
-      vite-node: 3.2.4(@types/node@22.16.0)(terser@5.43.1)(yaml@2.8.0)
+      vite: 7.0.0(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0)
+      vite-node: 3.2.4(@types/node@22.16.0)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.16.0
@@ -18480,6 +18648,8 @@ snapshots:
 
   webpack-sources@3.3.3: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   webpack@5.99.9:
     dependencies:
       '@types/eslint-scope': 3.7.7