diff --git a/_config.ts b/_config.ts
index f893c0f7..866df986 100644
--- a/_config.ts
+++ b/_config.ts
@@ -24,7 +24,9 @@ const site = lume({
 
 export default site;
 
+////////////////////////////////////////////
 // JS
+////////////////////////////////////////////
 
 site.use(esbuild({
   extensions: [".js"],
@@ -108,18 +110,22 @@ site.use(esbuild({
 
 site.add([".js"]);
 
+////////////////////////////////////////////
 // CSS
+////////////////////////////////////////////
 
 site.use(postcss());
 // site.use(purgecss());
 site.add([".css"]);
 
 site.remoteFile(
-  "styles/vendor/98.css",
+  "vendor/98.css",
   import.meta.resolve("./node_modules/98.css/dist/98.css"),
 );
 
+////////////////////////////////////////////
 // BINARY ASSETS
+////////////////////////////////////////////
 
 site.add("/favicons", "/");
 site.add("/fonts");
@@ -127,34 +133,36 @@ site.add("/images");
 site.add([".woff2"]);
 
 site.remoteFile(
-  "styles/vendor/ms_sans_serif.woff2",
+  "vendor/98.css/ms_sans_serif.woff2",
   import.meta.resolve(
     "./node_modules/98.css/fonts/converted/ms_sans_serif.woff2",
   ),
 );
 
 site.remoteFile(
-  "styles/vendor/ms_sans_serif_bold.woff2",
+  "vendor/98.css/ms_sans_serif_bold.woff2",
   import.meta.resolve(
     "./node_modules/98.css/fonts/converted/ms_sans_serif_bold.woff2",
   ),
 );
 
 site.remoteFile(
-  "fonts/ms_sans_serif.woff2",
+  "fonts/98.css/ms_sans_serif.woff2",
   import.meta.resolve(
     "./node_modules/98.css/fonts/converted/ms_sans_serif.woff2",
   ),
 );
 
 site.remoteFile(
-  "fonts/ms_sans_serif_bold.woff2",
+  "fonts/98.css/ms_sans_serif_bold.woff2",
   import.meta.resolve(
     "./node_modules/98.css/fonts/converted/ms_sans_serif_bold.woff2",
   ),
 );
 
+////////////////////////////////////////////
 // DEFINITIONS
+////////////////////////////////////////////
 
 site.add("/definitions");
 
@@ -188,15 +196,17 @@ site.filter("themeLoaderURL", (text) => {
   return `themes/l/?${key}=${encodeURIComponent(text)}`;
 });
 
+////////////////////////////////////////////
 // PHOSPHOR ICONS
+////////////////////////////////////////////
 
 function phosphor(path: string) {
   site.remoteFile(
-    `styles/vendor/phosphor/${path}`,
+    `vendor/@phosphor-icons/${path}`,
     import.meta.resolve(`./node_modules/@phosphor-icons/web/src/${path}`),
   );
 
-  site.add(`styles/vendor/phosphor/${path}`);
+  site.add(`vendor/@phosphor-icons/${path}`);
 }
 
 phosphor("fill/style.css");
@@ -210,7 +220,35 @@ phosphor("bold/Phosphor-Bold.ttf");
 phosphor("bold/Phosphor-Bold.woff");
 phosphor("bold/Phosphor-Bold.woff2");
 
+////////////////////////////////////////////
+// WEB AWESOME
+////////////////////////////////////////////
+
+for (
+  const f of walkSync("./node_modules/@awesome.me/webawesome/dist-cdn/", {
+    includeDirs: false,
+  })
+) {
+  const relativePath = f.path.replace(
+    /^node_modules\/@awesome\.me\/webawesome\/dist-cdn\//,
+    "",
+  );
+
+  const destPath = `vendor/@awesome.me/webawesome/${relativePath}`;
+
+  site.remoteFile(
+    destPath,
+    import.meta.resolve(
+      `./node_modules/@awesome.me/webawesome/dist-cdn/${relativePath}`,
+    ),
+  );
+
+  site.copy(destPath);
+}
+
+////////////////////////////////////////////
 // MISC
+////////////////////////////////////////////
 
 site.add([".html"]);
 site.add([".json"]);
@@ -238,7 +276,9 @@ site.addEventListener("afterBuild", () => {
   // site.run("copy-type-defs");
 });
 
+////////////////////////////////////////////
 // MIDDLEWARE
+////////////////////////////////////////////
 
 // Facet HTML files are HTML fragments fetched via JS, not full pages.
 // Serving them as text/plain prevents Lume's dev server from injecting
diff --git a/deno.jsonc b/deno.jsonc
index 0d187653..004ae838 100644
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -11,6 +11,7 @@
     "@atcute/lexicons": "npm:@atcute/lexicons@^1.2.7",
     "@atcute/oauth-browser-client": "npm:@atcute/oauth-browser-client@^3.0.0",
     "@automerge/automerge": "npm:@automerge/automerge@^3.2.3",
+    "@awesome.me/webawesome": "npm:@awesome.me/webawesome@^3.2.1",
     "@bradenmacdonald/s3-lite-client": "jsr:@bradenmacdonald/s3-lite-client@^0.9.5",
     "@char/cbor": "jsr:@char/cbor@^0.1.4",
     "@codemirror/autocomplete": "npm:@codemirror/autocomplete@^6.20.0",
@@ -59,6 +60,7 @@
     "@definitions/": "./src/definitions/",
     "@styles/": "./src/styles/",
     "@themes/": "./src/themes/",
+    "@vendor/": "./src/vendor/",
 
     // Diffuse prefix paths
     "@diffuse/foundation": "./src/common/facets/foundation.js",
@@ -68,6 +70,7 @@
     "@diffuse/definitions/": "./src/definitions/",
     "@diffuse/styles/": "./src/styles/",
     "@diffuse/themes/": "./src/themes/",
+    "@diffuse/vendor/": "./src/vendor/",
 
     // Build
     "@atcute/lex-cli": "npm:@atcute/lex-cli@^2.5.3",
diff --git a/src/_includes/layouts/diffuse.vto b/src/_includes/layouts/diffuse.vto
index fdf63737..45dea2b1 100644
--- a/src/_includes/layouts/diffuse.vto
+++ b/src/_includes/layouts/diffuse.vto
@@ -9,6 +9,8 @@ styles: []
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+
+    <meta name="color-scheme" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>{{title}}</title>
diff --git a/src/_includes/layouts/facet.vto b/src/_includes/layouts/facet.vto
index 9ed20f1d..81e8f92c 100644
--- a/src/_includes/layouts/facet.vto
+++ b/src/_includes/layouts/facet.vto
@@ -7,6 +7,8 @@ base: "./"
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+
+    <meta name="color-scheme" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="media-controllable" />
diff --git a/src/common/webawesome/detect-dark.js b/src/common/webawesome/detect-dark.js
new file mode 100644
index 00000000..8336a6fb
--- /dev/null
+++ b/src/common/webawesome/detect-dark.js
@@ -0,0 +1,13 @@
+const systemDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+/**
+ * @param {MediaQueryListEvent | MediaQueryList} mql
+ */
+function applyDark(mql) {
+  const isDark = mql.matches;
+  document.documentElement.classList.toggle("wa-dark", isDark);
+}
+
+systemDark.addEventListener("change", applyDark);
+
+applyDark(systemDark);
diff --git a/src/facets/index.vto b/src/facets/index.vto
index 5e0aaa60..1d8e88fe 100644
--- a/src/facets/index.vto
+++ b/src/facets/index.vto
@@ -5,8 +5,8 @@ base: ../
 styles:
   - styles/base.css
   - styles/diffuse/page.css
-  - styles/vendor/phosphor/bold/style.css
-  - styles/vendor/phosphor/fill/style.css
+  - vendor/@phosphor-icons/bold/style.css
+  - vendor/@phosphor-icons/fill/style.css
 
 scripts:
   - facets/index.js
diff --git a/src/facets/l/index.vto b/src/facets/l/index.vto
index fea19bf4..20d84750 100644
--- a/src/facets/l/index.vto
+++ b/src/facets/l/index.vto
@@ -3,7 +3,7 @@ layout: layouts/facet.vto
 base: ../../
 
 styles:
-  - styles/vendor/phosphor/fill/style.css
+  - vendor/@phosphor-icons/fill/style.css
   - styles/base.css
   - styles/loader.css
 
@@ -29,8 +29,11 @@ scripts:
       "@diffuse/definitions/": "./definitions/",
       "@diffuse/styles/": "./styles/",
       "@diffuse/themes/": "./themes/",
+      "@diffuse/vendor/": "./vendor/",
 
-      "@atcute/tid": "./vendor/@atcute/tid/index.js"
+      "@atcute/tid": "./vendor/@atcute/tid/index.js",
+      "@awesome.me/webawesome/dist/": "./vendor/@awesome.me/webawesome/",
+      "@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/"
     }
   }
 </script>
diff --git a/src/facets/tools/auto-queue.html b/src/facets/tools/auto-queue.html
index 4be34612..4276b950 100644
--- a/src/facets/tools/auto-queue.html
+++ b/src/facets/tools/auto-queue.html
@@ -28,8 +28,8 @@
 
 <style>
   @import "./styles/base.css";
-  @import "./styles/vendor/phosphor/bold/style.css";
   @import "./styles/wireframe/ui.css";
+  @import "./vendor/@phosphor-icons/bold/style.css";
 
   body {
     display: flex;
diff --git a/src/facets/tools/v3-import.html b/src/facets/tools/v3-import.html
index 133a5e36..b876fa62 100644
--- a/src/facets/tools/v3-import.html
+++ b/src/facets/tools/v3-import.html
@@ -28,9 +28,9 @@
 
 <style>
   @import "./styles/base.css";
-  @import "./styles/vendor/phosphor/bold/style.css";
-  @import "./styles/vendor/phosphor/fill/style.css";
   @import "./styles/wireframe/ui.css";
+  @import "./vendor/@phosphor-icons/bold/style.css";
+  @import "./vendor/@phosphor-icons/fill/style.css";
 
   body {
     display: flex;
diff --git a/src/index.vto b/src/index.vto
index edcbf6cf..3b9d339d 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -4,8 +4,8 @@ layout: layouts/diffuse.vto
 styles:
   - styles/base.css
   - styles/diffuse/page.css
-  - styles/vendor/phosphor/bold/style.css
-  - styles/vendor/phosphor/fill/style.css
+  - vendor/@phosphor-icons/bold/style.css
+  - vendor/@phosphor-icons/fill/style.css
 
 scripts:
   - index.js
diff --git a/src/styles/base.css b/src/styles/base.css
index 47d86401..4c596437 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -5,3 +5,7 @@
 
 @import "./diffuse/colors.css";
 @import "./diffuse/fonts.css";
+
+:root {
+  color-scheme: light dark;
+}
diff --git a/src/themes/blur/artwork-controller/element.js b/src/themes/blur/artwork-controller/element.js
index 140ef9f0..2694d365 100644
--- a/src/themes/blur/artwork-controller/element.js
+++ b/src/themes/blur/artwork-controller/element.js
@@ -424,8 +424,8 @@ class ArtworkController extends DiffuseElement {
     });
 
     return html`
-      <link rel="stylesheet" href="styles/vendor/phosphor/bold/style.css" />
-      <link rel="stylesheet" href="styles/vendor/phosphor/fill/style.css" />
+      <link rel="stylesheet" href="vendor/@phosphor-icons/bold/style.css" />
+      <link rel="stylesheet" href="vendor/@phosphor-icons/fill/style.css" />
       <link rel="stylesheet" href="styles/animations.css" />
       <link rel="stylesheet" href="themes/blur/artwork-controller/element.css" />
 
diff --git a/src/themes/blur/artwork-controller/facet.html b/src/themes/blur/artwork-controller/facet.html
index bab083f6..803913b8 100644
--- a/src/themes/blur/artwork-controller/facet.html
+++ b/src/themes/blur/artwork-controller/facet.html
@@ -1,6 +1,6 @@
 <style>
-  @import "./styles/vendor/phosphor/bold/style.css";
-  @import "./styles/vendor/phosphor/fill/style.css";
+  @import "./vendor/@phosphor-icons/bold/style.css";
+  @import "./vendor/@phosphor-icons/fill/style.css";
   @import "./styles/base.css";
 </style>
 
diff --git a/src/themes/index.vto b/src/themes/index.vto
index 8098699e..9502cd62 100644
--- a/src/themes/index.vto
+++ b/src/themes/index.vto
@@ -5,8 +5,8 @@ base: ../
 styles:
   - styles/base.css
   - styles/diffuse/page.css
-  - styles/vendor/phosphor/bold/style.css
-  - styles/vendor/phosphor/fill/style.css
+  - vendor/@phosphor-icons/bold/style.css
+  - vendor/@phosphor-icons/fill/style.css
 
 scripts:
   - themes/index.js
diff --git a/src/themes/l/index.vto b/src/themes/l/index.vto
index f0e49160..11294ebf 100644
--- a/src/themes/l/index.vto
+++ b/src/themes/l/index.vto
@@ -3,7 +3,7 @@ layout: layouts/diffuse.vto
 base: ../../
 
 styles:
-  - styles/vendor/phosphor/fill/style.css
+  - vendor/@phosphor-icons/fill/style.css
   - styles/base.css
   - styles/loader.css
   - themes/l/index.css
diff --git a/src/themes/webamp/browser/element.js b/src/themes/webamp/browser/element.js
index 8cf66f0b..3740e06e 100644
--- a/src/themes/webamp/browser/element.js
+++ b/src/themes/webamp/browser/element.js
@@ -241,7 +241,7 @@ class Browser extends DiffuseElement {
     const topPad = startIndex * ROW_HEIGHT;
 
     return html`
-      <link rel="stylesheet" href="styles/vendor/98.css" />
+      <link rel="stylesheet" href="vendor/98.css" />
 
       <style>
       @import "./themes/webamp/98-vars.css";
diff --git a/src/themes/webamp/browser/facet.html b/src/themes/webamp/browser/facet.html
index c8958ffd..2412642f 100644
--- a/src/themes/webamp/browser/facet.html
+++ b/src/themes/webamp/browser/facet.html
@@ -14,9 +14,9 @@
 </div>
 
 <style>
-  @import "./styles/vendor/98.css";
   @import "./themes/webamp/fonts.css";
   @import "./themes/webamp/facet.css";
+  @import "./vendor/98.css";
 </style>
 
 <script type="module" src="./facet.inline.js"></script>
diff --git a/src/themes/webamp/configurators/input/element.js b/src/themes/webamp/configurators/input/element.js
index 1434866b..c3300b65 100644
--- a/src/themes/webamp/configurators/input/element.js
+++ b/src/themes/webamp/configurators/input/element.js
@@ -314,7 +314,7 @@ class InputConfig extends DiffuseElement {
    */
   render({ html }) {
     return html`
-      <link rel="stylesheet" href="styles/vendor/98.css" />
+      <link rel="stylesheet" href="vendor/98.css" />
       <link rel="stylesheet" href="themes/webamp/98-extra.css" />
 
       <style>
diff --git a/src/themes/webamp/configurators/input/facet.html b/src/themes/webamp/configurators/input/facet.html
index 31e57c96..406a58cb 100644
--- a/src/themes/webamp/configurators/input/facet.html
+++ b/src/themes/webamp/configurators/input/facet.html
@@ -15,9 +15,9 @@
 
 <style>
   @import "./styles/variables.css";
-  @import "./styles/vendor/98.css";
   @import "./themes/webamp/fonts.css";
   @import "./themes/webamp/facet.css";
+  @import "./vendor/98.css";
 </style>
 
 <script type="module" src="./facet.inline.js"></script>
diff --git a/src/themes/webamp/configurators/output/element.js b/src/themes/webamp/configurators/output/element.js
index 62382fcc..a2d95961 100644
--- a/src/themes/webamp/configurators/output/element.js
+++ b/src/themes/webamp/configurators/output/element.js
@@ -282,7 +282,7 @@ class OutputConfig extends DiffuseElement {
    */
   render({ html }) {
     return html`
-      <link rel="stylesheet" href="styles/vendor/98.css" />
+      <link rel="stylesheet" href="vendor/98.css" />
       <link rel="stylesheet" href="themes/webamp/98-extra.css" />
 
       <style>
diff --git a/src/themes/webamp/configurators/output/facet.html b/src/themes/webamp/configurators/output/facet.html
index be23b2be..b74dd403 100644
--- a/src/themes/webamp/configurators/output/facet.html
+++ b/src/themes/webamp/configurators/output/facet.html
@@ -1,13 +1,9 @@
 <div class="window">
-  <div
-    class="title-bar"
-  >
+  <div class="title-bar">
     <div class="title-bar-icon">
       <img src="images/icons/windows_98/directory_explorer-4.png" height="14" />
     </div>
-    <div class="title-bar-text" draggable="false">
-      Output configurator
-    </div>
+    <div class="title-bar-text" draggable="false">Output configurator</div>
     <div class="title-bar-controls">
       <button aria-label="Close" onclick="window.close()"></button>
     </div>
@@ -19,9 +15,9 @@
 
 <style>
   @import "./styles/variables.css";
-  @import "./styles/vendor/98.css";
   @import "./themes/webamp/fonts.css";
   @import "./themes/webamp/facet.css";
+  @import "./vendor/98.css";
 </style>
 
 <script type="module" src="./facet.inline.js"></script>
diff --git a/src/themes/webamp/window/element.js b/src/themes/webamp/window/element.js
index c8440661..4f978094 100644
--- a/src/themes/webamp/window/element.js
+++ b/src/themes/webamp/window/element.js
@@ -35,7 +35,7 @@ class WindowElement extends DiffuseElement {
    */
   render({ html }) {
     return html`
-      <link rel="stylesheet" href="styles/vendor/98.css" />
+      <link rel="stylesheet" href="vendor/98.css" />
 
       <style>
       dialog {