diff --git a/src/facets/connect/atproto/index.html b/src/facets/connect/atproto/index.html
index 73a40a7a..5af1bed6 100644
--- a/src/facets/connect/atproto/index.html
+++ b/src/facets/connect/atproto/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/atproto/index.inline.js"></script>
diff --git a/src/facets/connect/atproto/index.inline.js b/src/facets/connect/atproto/index.inline.js
index a186e820..11c82249 100644
--- a/src/facets/connect/atproto/index.inline.js
+++ b/src/facets/connect/atproto/index.inline.js
@@ -1,6 +1,3 @@
-import "@awesome.me/webawesome/dist/components/callout/callout.js";
-import "@awesome.me/webawesome/dist/components/input/input.js";
-
 import { html, nothing, render as litRender } from "lit-html";
 
 import { NAME as ATPROTO_NAME } from "~/components/output/raw/atproto/element.js";
@@ -13,7 +10,6 @@ import { setup } from "~/facets/connect/common.js";
 foundation.setup({ title: "Connect AT Protocol | Diffuse" });
 
 /**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
  * @import { ATProtoOutputElement } from "~/components/output/raw/atproto/types.d.ts"
  * @import TrackUriPasskeyTransformer from "~/components/transformer/output/refiner/track-uri-passkey/element.js"
  */
@@ -23,22 +19,39 @@ foundation.setup({ title: "Connect AT Protocol | Diffuse" });
 ////////////////////////////////////////////
 
 const outputOrchestrator = await foundation.orchestrator.output();
+
 await customElements.whenDefined(outputOrchestrator.localName);
+await customElements.whenDefined(ATPROTO_NAME);
+
+// The AT Protocol option is added dynamically by the output-bundle facet, which
+// runs in a separate script and appends the element to the output configurator
+// via a signal effect. That effect may not have fired yet when this facet loads,
+// so we observe the configurator for child-list mutations and resolve as soon as
+// the option appears.
+const outputConfigurator = outputOrchestrator.outputConfigurator;
+
+const atprotoOption = await new Promise((resolve) => {
+  const check = async () => {
+    const opt = (await outputOrchestrator.options()).find(
+      (o) => o.label === "AT Protocol",
+    );
+    if (opt) {
+      observer.disconnect();
+      resolve(opt);
+    }
+  };
+
+  const observer = new MutationObserver(check);
+  observer.observe(outputConfigurator, { childList: true });
+  check();
+});
 
-const atprotoOption = (await outputOrchestrator.options()).find(
-  (o) => o.label === "AT Protocol",
-);
+const ATPROTO_OUTPUT_ID = atprotoOption.id;
 
 const atprotoEl = /** @type {ATProtoOutputElement | undefined} */ (
   outputOrchestrator.root().querySelector(ATPROTO_NAME)
 );
 
-if (!atprotoOption) {
-  throw new Error("AT Protocol output was not enabled!");
-}
-
-const ATPROTO_OUTPUT_ID = atprotoOption.id;
-
 const atprotoPasskeyEl = /** @type {TrackUriPasskeyTransformer | null} */ (
   outputOrchestrator.root().querySelector(
     `${PASSKEY_NAME}[namespace="atproto"]`,
@@ -64,19 +77,13 @@ const { setItems } = setup({
     <p>
       Connect to your AT Protocol identity to use it as user-data storage.
     </p>
-    <p class="wa-caption-xs">
+    <p class="caption">
       Your data is stored as lexicon records in your personal data server (PDS).
     </p>
   `,
 
   formFields: html`
-    <wa-input
-      id="atproto-handle"
-      label="Handle"
-      placeholder="you.bsky.social"
-      required
-    ></wa-input>
-    <p class="wa-caption-xs">* Required fields</p>
+    <label>Handle <input id="atproto-handle" placeholder="you.bsky.social" required></label>
   `,
 
   onSubmit: (_mode) => connect(),
@@ -87,7 +94,7 @@ const { setItems } = setup({
 });
 
 const handleInput =
-  /** @type {WaInput} */ (document.querySelector("#atproto-handle"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#atproto-handle"));
 
 ////////////////////////////////////////////
 // REACTIVE LIST
@@ -120,8 +127,7 @@ effect(() => {
 
 if (atprotoPasskeyEl) {
   const passkeyRoot = document.createElement("div");
-  passkeyRoot.classList.add("wa-stack");
-  document.querySelector("main .card-body")?.appendChild(passkeyRoot);
+  document.querySelector("main .facet__right")?.appendChild(passkeyRoot);
 
   effect(() => {
     const passkeyActive = atprotoPasskeyEl.passkeyActive() ?? false;
@@ -131,7 +137,7 @@ if (atprotoPasskeyEl) {
 
     litRender(
       html`
-        <wa-divider style="margin: var(--spacing) 0"></wa-divider>
+        <hr>
 
         <div>
           <strong>Passkey encryption (optional)</strong>
@@ -142,61 +148,44 @@ if (atprotoPasskeyEl) {
             <p>Passkey active — Track URIs are encrypted.</p>
 
             ${passkeyError
-              ? html`
-                <wa-callout variant="danger">${passkeyError}</wa-callout>
-              `
+              ? html`<div class="callout callout--danger">${passkeyError}</div>`
               : nothing}
 
             <div class="button-row">
-              <wa-button
-                variant="neutral"
-                appearance="outlined"
-                @click="${handlePasskeyRemove}"
-              >Remove passkey</wa-button>
+              <button @click="${handlePasskeyRemove}">Remove passkey</button>
             </div>
 
-            <p class="wa-caption-xs">
+            <p class="caption">
               Removing the passkey will expose all the sensitive information that was
               previously encrypted.
             </p>
           `
           : html`
-            <p class="wa-caption-xs">
+            <p class="caption">
               Track URIs can optionally be encrypted so that passwords and other sensitive
               authentication details are kept private. Note that, with this enabled, other
               people cannot play audio listed on your account.
             </p>
 
             ${passkeyError
-              ? html`
-                <wa-callout variant="danger">${passkeyError}</wa-callout>
-              `
+              ? html`<div class="callout callout--danger">${passkeyError}</div>`
               : nothing}
 
             <div class="button-row">
-              <wa-button
-                variant="neutral"
-                appearance="outlined"
-                ?disabled="${passkeyWorking}"
-                @click="${handlePasskeySetup}"
-              >${passkeyWorking
-                ? "Setting up …"
-                : "Set up passkey encryption"}</wa-button>
-              <wa-button
-                variant="neutral"
-                appearance="outlined"
-                ?disabled="${passkeyWorking}"
-                @click="${handlePasskeyAdopt}"
-              >${passkeyWorking
-                ? "Authenticating …"
-                : "Use existing passkey"}</wa-button>
+              <button ?disabled="${passkeyWorking}" @click="${handlePasskeySetup}">
+                ${passkeyWorking ? "Setting up …" : "Set up passkey encryption"}
+              </button>
+              <button ?disabled="${passkeyWorking}" @click="${handlePasskeyAdopt}">
+                ${passkeyWorking ? "Authenticating …" : "Use existing passkey"}
+              </button>
             </div>
-          `} ${lockedTracksCount > 0
+          `}
+        ${lockedTracksCount > 0
           ? html`
-            <wa-callout variant="warning">
+            <div class="callout callout--warning">
               ${lockedTracksCount} encrypted track(s) cannot be played until you unlock them with
               your passkey.
-            </wa-callout>
+            </div>
           `
           : nothing}
       `,
diff --git a/src/facets/connect/common.css b/src/facets/connect/common.css
index 54a52250..1c7ca20a 100644
--- a/src/facets/connect/common.css
+++ b/src/facets/connect/common.css
@@ -1,116 +1,70 @@
-main {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-  padding: var(--wa-space-m);
-}
-
-wa-card {
-  width: min(400px, calc(100vw - 2rem));
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+@import "../../styles/diffuse/facet.css";
 
-.card-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wa-space-m);
-}
-
-.button-row {
-  display: flex;
-  gap: var(--wa-space-s);
-  flex-wrap: wrap;
-}
-
-.dialog-body {
+.connect-list {
   display: flex;
   flex-direction: column;
-  gap: var(--wa-space-m);
-}
-
-.dialog-footer {
-  display: flex;
-  gap: var(--wa-space-s);
-}
-
-.connect-list {
+  gap: var(--space-xs);
   list-style: none;
-  padding: 0;
   margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--wa-space-s);
+  padding: 0;
 }
 
 .connect-item {
-  display: flex;
   align-items: center;
-  gap: var(--wa-space-s);
+  display: flex;
+  gap: var(--space-xs);
   margin-left: 0;
 }
 
 .connect-item__info {
   display: flex;
   flex-direction: column;
-  gap: var(--wa-space-2xs);
   flex: 1;
+  gap: var(--space-3xs);
   min-width: 0;
 }
 
 .connect-item__name {
-  font-weight: var(--wa-font-weight-semibold);
-  white-space: nowrap;
+  font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .connect-item__detail {
-  font-size: var(--wa-font-size-xs);
-  color: var(--wa-color-text-quiet);
-  white-space: nowrap;
+  color: oklch(from var(--text-color) l c h / 0.55);
+  font-size: var(--fs-xs);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .connect-item__tags {
   display: flex;
-  gap: var(--wa-space-2xs);
   flex-shrink: 0;
+  gap: var(--space-3xs);
 }
 
 .dropzone {
   align-items: center;
-  border: 2px dashed var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-m);
-  color: var(--wa-color-text-quiet);
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  color: oklch(from var(--text-color) l c h / 0.55);
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  gap: var(--wa-space-xs);
-  font-size: var(--wa-font-size-s);
+  font-size: var(--fs-sm);
+  gap: var(--space-2xs);
   justify-content: center;
-  padding: var(--wa-space-l);
+  padding: var(--space-md);
   transition:
     background-color 150ms,
     border-color 150ms,
     color 150ms;
 
   &.dropzone--active {
-    background-color: var(--wa-color-surface-sunken);
-    border-color: var(--wa-color-brand-500);
-    color: var(--wa-color-text-normal);
+    background-color: var(--form-color);
+    border-color: var(--accent);
+    color: var(--text-color);
   }
 }
-
-[hidden] {
-  display: none !important;
-}
-
-p {
-  margin: 0;
-}
diff --git a/src/facets/connect/common.js b/src/facets/connect/common.js
index 12ee180a..c986d3c8 100644
--- a/src/facets/connect/common.js
+++ b/src/facets/connect/common.js
@@ -1,19 +1,6 @@
-import "@awesome.me/webawesome/dist/components/badge/badge.js";
-import "@awesome.me/webawesome/dist/components/button/button.js";
-import "@awesome.me/webawesome/dist/components/callout/callout.js";
-import "@awesome.me/webawesome/dist/components/card/card.js";
-import "@awesome.me/webawesome/dist/components/dialog/dialog.js";
-import "@awesome.me/webawesome/dist/components/divider/divider.js";
-import "@awesome.me/webawesome/dist/components/icon/icon.js";
-
-import "~/common/webawesome/detect-dark.js";
-import "~/common/webawesome/phosphor/bold.js";
-import "~/common/webawesome/phosphor/fill.js";
-
 import { html, nothing, render as litRender } from "lit-html";
 
 /**
- * @import { default as WaDialog } from "@awesome.me/webawesome/dist/components/dialog/dialog.js"
  * @import { TemplateResult } from "lit-html"
  */
 
@@ -28,7 +15,8 @@ import { html, nothing, render as litRender } from "lit-html";
  *
  * @param {Object} config
  * @param {string} config.title - Card header title
- * @param {TemplateResult | string} config.description - Content above the buttons
+ * @param {TemplateResult | string} config.description - Content shown on the left side
+ * @param {TemplateResult} [config.rightContent] - Extra content shown at the top of the right side
  * @param {TemplateResult} config.formFields - Form body content (inputs, footnotes, etc.)
  * @param {(mode: 'input' | 'output') => Promise<void>} config.onSubmit
  * @param {boolean} [config.hasInput] - Whether to show the "Add audio input" button (default: true)
@@ -41,6 +29,7 @@ export function setup(
   {
     title,
     description,
+    rightContent = nothing,
     formFields,
     onSubmit,
     hasInput = true,
@@ -53,64 +42,67 @@ export function setup(
 
   litRender(
     html`
-      <wa-card>
-        <div slot="header" class="card-header">
-          <strong>${title}</strong>
+      <div class="facet__left">
+        <div>
+          <a href="./dashboard/" class="diffuse-logo-container">
+            <svg viewBox="0 0 902 134" width="160">
+              <title>Diffuse</title>
+              <use
+                xlink:href="images/diffuse-current.svg#diffuse"
+                href="images/diffuse-current.svg#diffuse"
+              ></use>
+            </svg>
+          </a>
         </div>
-        <div class="card-body">
-          ${description}
-          <div class="button-row">
-            ${hasInput
-              ? html`
-                <wa-button id="connect-add-input-btn" variant="neutral" appearance="filled">
-                  <wa-icon slot="start" library="phosphor/fill" name="music-notes"></wa-icon>
-                  Add audio input
-                </wa-button>
-              `
-              : nothing}
-            ${hasOutput
-              ? html`
-                <wa-button
-                  id="connect-add-output-btn"
-                  variant="brand"
-                  appearance="filled"
-                >
-                  <wa-icon slot="start" library="phosphor/fill" name="person"></wa-icon>
-                  Use as userdata storage
-                </wa-button>
-              `
-              : nothing}
-          </div>
-          <wa-callout id="connect-card-error" variant="danger" hidden></wa-callout>
-          <wa-divider id="connect-divider" hidden></wa-divider>
-          <ul id="connect-list" class="connect-list" hidden></ul>
+        <h1>${title}</h1>
+        ${description}
+      </div>
+      <div class="facet__right">
+        ${rightContent}
+        <div class="button-row">
+          ${hasInput
+            ? html`
+              <button id="connect-add-input-btn">
+                <i class="ph-fill ph-music-notes"></i>
+                Add audio input
+              </button>
+            `
+            : nothing}
+          ${hasOutput
+            ? html`
+              <button id="connect-add-output-btn" class="button--brand">
+                <i class="ph-fill ph-person"></i>
+                Use as userdata storage
+              </button>
+            `
+            : nothing}
+        </div>
+        <div id="connect-card-error" class="callout callout--danger" hidden></div>
+        <hr id="connect-divider" hidden>
+        <ul id="connect-list" class="connect-list" hidden></ul>
+      </div>
+
+      <dialog id="connect-dialog">
+        <div class="dialog-header">
+          <strong id="connect-dialog-title"></strong>
         </div>
-      </wa-card>
-
-      <wa-dialog id="connect-dialog" label="">
         <form id="connect-form" class="dialog-body">
           ${formFields}
-          <wa-callout id="connect-error" variant="danger" hidden></wa-callout>
+          <div id="connect-error" class="callout callout--danger" hidden></div>
         </form>
-        <div slot="footer" class="dialog-footer">
-          <wa-button
-            id="connect-submit-btn"
-            type="submit"
-            form="connect-form"
-            variant="brand"
-            appearance="filled"
-          >Add</wa-button>
-          <wa-button id="connect-cancel-btn" variant="neutral" appearance="outlined">
-            Cancel
-          </wa-button>
+        <div class="dialog-footer">
+          <button id="connect-submit-btn" type="submit" form="connect-form" class="button--brand">Add</button>
+          <button id="connect-cancel-btn" type="button">Cancel</button>
         </div>
-      </wa-dialog>
+      </dialog>
     `,
     main,
   );
 
   const dialog =
-    /** @type {WaDialog} */ (main.querySelector("#connect-dialog"));
+    /** @type {HTMLDialogElement} */ (main.querySelector("#connect-dialog"));
+  const dialogTitleEl =
+    /** @type {HTMLElement} */ (main.querySelector("#connect-dialog-title"));
   const form =
     /** @type {HTMLFormElement} */ (main.querySelector("#connect-form"));
   const dialogErrorEl =
@@ -144,12 +136,12 @@ export function setup(
   /** @param {'input' | 'output'} m */
   const openDialog = (m) => {
     mode = m;
-    dialog.label = m === "input"
+    dialogTitleEl.textContent = m === "input"
       ? "Add audio input"
       : "Use as userdata storage";
     form.reset();
     setDialogError(null);
-    dialog.open = true;
+    dialog.showModal();
   };
 
   if (hasInput) {
@@ -170,7 +162,7 @@ export function setup(
 
   main.querySelector("#connect-cancel-btn")?.addEventListener("click", () => {
     setDialogError(null);
-    dialog.open = false;
+    dialog.close();
   });
 
   const submitBtn =
@@ -183,7 +175,7 @@ export function setup(
     submitBtn.textContent = "Loading …";
     try {
       await onSubmit(mode);
-      dialog.open = false;
+      dialog.close();
     } catch (err) {
       setDialogError(
         err instanceof Error ? err.message : "Something went wrong",
@@ -220,25 +212,19 @@ export function setup(
                   </div>
                   <div class="connect-item__tags">
                     ${isInput
-                      ? html`
-                        <wa-badge appearance="outlined" variant="neutral">Input</wa-badge>
-                      `
-                      : nothing} ${isOutput
-                      ? html`
-                        <wa-badge appearance="outlined" variant="${isSelectedOutput
-                          ? "brand"
-                          : "warning"}">Output</wa-badge>
-                      `
+                      ? html`<span class="badge">Input</span>`
+                      : nothing}
+                    ${isOutput
+                      ? html`<span class="badge ${isSelectedOutput ? "badge--brand" : "badge--warning"}">Output</span>`
                       : nothing}
                   </div>
-                  <wa-button
-                    appearance="plain"
-                    size="small"
+                  <button
+                    class="button--plain button--small"
                     aria-label="Remove"
                     @click="${onRemove}"
                   >
-                    <wa-icon library="phosphor/bold" name="x"></wa-icon>
-                  </wa-button>
+                    <i class="ph-bold ph-x"></i>
+                  </button>
                 </li>
               `,
           )}
diff --git a/src/facets/connect/https/index.html b/src/facets/connect/https/index.html
index 560cd9e1..9bb4b724 100644
--- a/src/facets/connect/https/index.html
+++ b/src/facets/connect/https/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/https/index.inline.js"></script>
diff --git a/src/facets/connect/https/index.inline.js b/src/facets/connect/https/index.inline.js
index 8515619e..1f778aad 100644
--- a/src/facets/connect/https/index.inline.js
+++ b/src/facets/connect/https/index.inline.js
@@ -1,5 +1,3 @@
-import "@awesome.me/webawesome/dist/components/input/input.js";
-
 import * as TID from "@atcute/tid";
 import { html } from "lit-html";
 
@@ -11,10 +9,6 @@ import foundation from "~/common/foundation.js";
 
 import { setup } from "~/facets/connect/common.js";
 
-/**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- */
-
 foundation.setup({ title: "Connect HTTPS | Diffuse" });
 
 ////////////////////////////////////////////
@@ -47,19 +41,13 @@ const { setItems, setError } = setup({
   `,
 
   formFields: html`
-    <wa-input
-      id="https-url"
-      label="URL"
-      type="url"
-      placeholder="https://example.com/audio.mp3"
-      required
-    ></wa-input>
+    <label>URL <input id="https-url" type="url" placeholder="https://example.com/audio.mp3" required></label>
   `,
 
   onSubmit: () => addUrl(),
 });
 
-const urlInput = /** @type {WaInput} */ (document.querySelector("#https-url"));
+const urlInput = /** @type {HTMLInputElement} */ (document.querySelector("#https-url"));
 
 ////////////////////////////////////////////
 // REACTIVE LIST
diff --git a/src/facets/connect/icecast/index.html b/src/facets/connect/icecast/index.html
index 6d78971d..cae96406 100644
--- a/src/facets/connect/icecast/index.html
+++ b/src/facets/connect/icecast/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/icecast/index.inline.js"></script>
diff --git a/src/facets/connect/icecast/index.inline.js b/src/facets/connect/icecast/index.inline.js
index b92b688b..cda31002 100644
--- a/src/facets/connect/icecast/index.inline.js
+++ b/src/facets/connect/icecast/index.inline.js
@@ -1,5 +1,3 @@
-import "@awesome.me/webawesome/dist/components/input/input.js";
-
 import * as TID from "@atcute/tid";
 import { html } from "lit-html";
 
@@ -11,10 +9,6 @@ import foundation from "~/common/foundation.js";
 
 import { setup } from "~/facets/connect/common.js";
 
-/**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- */
-
 foundation.setup({ title: "Connect Icecast | Diffuse" });
 
 ////////////////////////////////////////////
@@ -47,20 +41,14 @@ const { setItems, setError } = setup({
   `,
 
   formFields: html`
-    <wa-input
-      id="icecast-url"
-      label="Stream URL"
-      type="url"
-      placeholder="https://example.com/stream"
-      required
-    ></wa-input>
+    <label>Stream URL <input id="icecast-url" type="url" placeholder="https://example.com/stream" required></label>
   `,
 
   onSubmit: () => addStream(),
 });
 
 const urlInput =
-  /** @type {WaInput} */ (document.querySelector("#icecast-url"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#icecast-url"));
 
 ////////////////////////////////////////////
 // REACTIVE LIST
diff --git a/src/facets/connect/index.inline.js b/src/facets/connect/index.inline.js
index 2bd91e6d..27fa7a1f 100644
--- a/src/facets/connect/index.inline.js
+++ b/src/facets/connect/index.inline.js
@@ -37,16 +37,18 @@ if (!main) throw new Error("No <main> element");
 litRender(
   html`
     <div class="connect-index__left">
-      <a href="./dashboard/" class="diffuse-logo-container">
-        <svg viewBox="0 0 902 134" width="160">
-          <title>Diffuse</title>
-          <use
-            xlink:href="images/diffuse-current.svg#diffuse"
-            href="images/diffuse-current.svg#diffuse"
-          >
-          </use>
-        </svg>
-      </a>
+      <div>
+        <a href="./dashboard/" class="diffuse-logo-container">
+          <svg viewBox="0 0 902 134" width="160">
+            <title>Diffuse</title>
+            <use
+              xlink:href="images/diffuse-current.svg#diffuse"
+              href="images/diffuse-current.svg#diffuse"
+            >
+            </use>
+          </svg>
+        </a>
+      </div>
       <h1>Connect</h1>
       <p>
         These are some of the options available to add as an audio source, or to use
diff --git a/src/facets/connect/local/index.html b/src/facets/connect/local/index.html
index 81ffbc2e..ffe23f7b 100644
--- a/src/facets/connect/local/index.html
+++ b/src/facets/connect/local/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/local/index.inline.js"></script>
diff --git a/src/facets/connect/local/index.inline.js b/src/facets/connect/local/index.inline.js
index 831a7acc..b70b0657 100644
--- a/src/facets/connect/local/index.inline.js
+++ b/src/facets/connect/local/index.inline.js
@@ -49,48 +49,46 @@ const { setItems, setError } = setup({
 
   description: html`
     <p>Add local directories or files as audio input.</p>
+  `,
 
+  rightContent: html`
     <label class="dropzone" id="local-dropzone">
-      <input id="local-dropzone-input" type="file" multiple hidden />
-      <wa-icon library="phosphor/bold" name="upload-simple"></wa-icon>
+      <input id="local-dropzone-input" type="file" accept="audio/*" multiple hidden />
+      <i class="ph-bold ph-upload-simple"></i>
       <span>Drop or click to select files</span>
     </label>
 
-    <wa-divider id="local-ephemeral-divider" hidden></wa-divider>
+    <hr id="local-ephemeral-divider" hidden>
     <div id="local-ephemeral-row" class="button-row" hidden>
-      <wa-button
+      <button
         id="local-clear-ephemeral-btn"
-        variant="danger"
-        appearance="outlined"
-        size="small"
+        class="button--danger button--small"
         style="width: 100%"
       >
-        <wa-icon slot="start" library="phosphor/bold" name="trash"></wa-icon>
+        <i class="ph-bold ph-trash"></i>
         Clear files
-      </wa-button>
+      </button>
     </div>
 
     ${supported
       ? html`
-        <wa-divider></wa-divider>
+        <hr>
 
         <div class="button-row">
-          <wa-button id="local-add-dir-btn" variant="neutral" appearance="filled">
-            <wa-icon slot="start" library="phosphor/fill" name="folder-open"></wa-icon>
+          <button id="local-add-dir-btn">
+            <i class="ph-fill ph-folder-open"></i>
             Add directory
-          </wa-button>
-          <wa-button id="local-add-files-btn" variant="neutral" appearance="filled">
-            <wa-icon slot="start" library="phosphor/fill" name="music-notes"></wa-icon>
+          </button>
+          <button id="local-add-files-btn">
+            <i class="ph-fill ph-music-notes"></i>
             Add files
-          </wa-button>
+          </button>
         </div>
       `
       : nothing}
   `,
 
-  formFields: html`
-
-  `,
+  formFields: html``,
   onSubmit: async () => {},
 });
 
@@ -113,7 +111,9 @@ const dropzoneInput =
   ));
 
 dropzoneInput?.addEventListener("change", async () => {
-  const files = Array.from(dropzoneInput.files ?? []);
+  const files = Array.from(dropzoneInput.files ?? []).filter((f) =>
+    f.type.startsWith("audio/")
+  );
   dropzoneInput.value = "";
   if (files.length === 0) return;
   await cacheFiles(files);
@@ -323,7 +323,7 @@ async function collectFiles(items) {
         files.push(...dirFiles);
       } else {
         const file = item.getAsFile();
-        if (file) files.push(file);
+        if (file?.type.startsWith("audio/")) files.push(file);
       }
     }),
   );
@@ -362,7 +362,7 @@ async function readDirectoryEntry(dir) {
                 (res, rej) =>
                   /** @type {FileSystemFileEntry} */ (entry).file(res, rej),
               );
-              files.push(file);
+              if (file.type.startsWith("audio/")) files.push(file);
             }
           }),
         );
diff --git a/src/facets/connect/opensubsonic/index.html b/src/facets/connect/opensubsonic/index.html
index d7a6f669..ea092430 100644
--- a/src/facets/connect/opensubsonic/index.html
+++ b/src/facets/connect/opensubsonic/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/opensubsonic/index.inline.js"></script>
diff --git a/src/facets/connect/opensubsonic/index.inline.js b/src/facets/connect/opensubsonic/index.inline.js
index daa51a9c..b6113258 100644
--- a/src/facets/connect/opensubsonic/index.inline.js
+++ b/src/facets/connect/opensubsonic/index.inline.js
@@ -1,7 +1,3 @@
-import "@awesome.me/webawesome/dist/components/input/input.js";
-import "@awesome.me/webawesome/dist/components/select/select.js";
-import "@awesome.me/webawesome/dist/components/option/option.js";
-
 import * as TID from "@atcute/tid";
 import { html } from "lit-html";
 
@@ -18,8 +14,6 @@ import foundation from "~/common/foundation.js";
 import { setup } from "~/facets/connect/common.js";
 
 /**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- * @import { default as WaSelect } from "@awesome.me/webawesome/dist/components/select/select.js"
  * @import { Server } from "~/components/input/opensubsonic/types.d.ts"
  */
 
@@ -54,40 +48,37 @@ const { setItems, setError } = setup({
     <p>
       Connect to an OpenSubsonic server to use it as audio input.
     </p>
-    <p class="wa-caption-xs">
+    <p class="caption">
       Supports authentication via username + password or an API key.
     </p>
   `,
 
   formFields: html`
-    <wa-input
-      id="oss-host"
-      label="Host"
-      placeholder="music.example.com"
-      required
-    ></wa-input>
-    <wa-select id="oss-tls" label="Use HTTPS / TLS?" value="true">
-      <wa-option value="true">Yes</wa-option>
-      <wa-option value="false">No</wa-option>
-    </wa-select>
-    <wa-input id="oss-username" label="Username"></wa-input>
-    <wa-input id="oss-password" label="Password" type="password"></wa-input>
-    <p class="wa-caption-xs">Or use an API key instead of username + password:</p>
-    <wa-input id="oss-apikey" label="API key" type="password"></wa-input>
-    <p class="wa-caption-xs">* Host is required</p>
+    <label>Host <input id="oss-host" placeholder="music.example.com" required></label>
+    <label>Use HTTPS / TLS?
+      <select id="oss-tls">
+        <option value="true" selected>Yes</option>
+        <option value="false">No</option>
+      </select>
+    </label>
+    <label>Username <input id="oss-username"></label>
+    <label>Password <input id="oss-password" type="password"></label>
+    <p class="caption">Or use an API key instead of username + password:</p>
+    <label>API key <input id="oss-apikey" type="password"></label>
+    <p class="caption">* Host is required</p>
   `,
 
   onSubmit: () => addServer(),
 });
 
-const hostInput = /** @type {WaInput} */ (document.querySelector("#oss-host"));
-const tlsSelect = /** @type {WaSelect} */ (document.querySelector("#oss-tls"));
+const hostInput = /** @type {HTMLInputElement} */ (document.querySelector("#oss-host"));
+const tlsSelect = /** @type {HTMLSelectElement} */ (document.querySelector("#oss-tls"));
 const usernameInput =
-  /** @type {WaInput} */ (document.querySelector("#oss-username"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#oss-username"));
 const passwordInput =
-  /** @type {WaInput} */ (document.querySelector("#oss-password"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#oss-password"));
 const apikeyInput =
-  /** @type {WaInput} */ (document.querySelector("#oss-apikey"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#oss-apikey"));
 
 ////////////////////////////////////////////
 // REACTIVE LIST
diff --git a/src/facets/connect/s3/index.html b/src/facets/connect/s3/index.html
index 936da497..5a3f9230 100644
--- a/src/facets/connect/s3/index.html
+++ b/src/facets/connect/s3/index.html
@@ -1,10 +1,12 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
-  @import "./facets/connect/common.css" layer(connect);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+  @import "./facets/connect/common.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 </style>
 
-<main class="wa-theme-default"></main>
+<main></main>
 
 <script type="module" src="facets/connect/s3/index.inline.js"></script>
diff --git a/src/facets/connect/s3/index.inline.js b/src/facets/connect/s3/index.inline.js
index d395533d..4124a4f1 100644
--- a/src/facets/connect/s3/index.inline.js
+++ b/src/facets/connect/s3/index.inline.js
@@ -1,5 +1,3 @@
-import "@awesome.me/webawesome/dist/components/input/input.js";
-
 import * as TID from "@atcute/tid";
 import { html } from "lit-html";
 
@@ -15,7 +13,6 @@ import { setup } from "~/facets/connect/common.js";
 foundation.setup({ title: "Connect S3 | Diffuse" });
 
 /**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
  * @import { Bucket } from "~/components/input/s3/types.d.ts"
  * @import { S3OutputElement } from "~/components/output/bytes/s3/types.d.ts"
  */
@@ -63,30 +60,20 @@ const { setItems, setError } = setup({
       Connect to an S3-compatible storage to use it as audio input or user-data
       storage.
     </p>
-    <p class="wa-caption-xs">
+    <p class="caption">
       A custom syncing strategy is used for the user-data storage, tracking what was
       added and removed so conflicts can be resolved.
     </p>
   `,
 
   formFields: html`
-    <wa-input id="s3-access-key" label="Access key" required></wa-input>
-    <wa-input
-      id="s3-secret-key"
-      label="Secret key"
-      type="password"
-      required
-    ></wa-input>
-    <wa-input
-      id="s3-bucket-name"
-      label="Bucket name"
-      placeholder="my-bucket"
-      required
-    ></wa-input>
-    <wa-input id="s3-host" label="Host" placeholder="s3.amazonaws.com"></wa-input>
-    <wa-input id="s3-region" label="Region" placeholder="us-east-1"></wa-input>
-    <wa-input id="s3-path" label="Path" placeholder="/"></wa-input>
-    <p class="wa-caption-xs">* Required fields</p>
+    <label>Access key <input id="s3-access-key" required></label>
+    <label>Secret key <input id="s3-secret-key" type="password" required></label>
+    <label>Bucket name <input id="s3-bucket-name" placeholder="my-bucket" required></label>
+    <label>Host <input id="s3-host" placeholder="s3.amazonaws.com"></label>
+    <label>Region <input id="s3-region" placeholder="us-east-1"></label>
+    <label>Path <input id="s3-path" placeholder="/"></label>
+    <p class="caption">* Required fields</p>
   `,
 
   onSubmit: (mode) => addBucket(mode),
@@ -97,15 +84,15 @@ const { setItems, setError } = setup({
 });
 
 const accessKeyInput =
-  /** @type {WaInput} */ (document.querySelector("#s3-access-key"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#s3-access-key"));
 const secretKeyInput =
-  /** @type {WaInput} */ (document.querySelector("#s3-secret-key"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#s3-secret-key"));
 const bucketNameInput =
-  /** @type {WaInput} */ (document.querySelector("#s3-bucket-name"));
-const hostInput = /** @type {WaInput} */ (document.querySelector("#s3-host"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#s3-bucket-name"));
+const hostInput = /** @type {HTMLInputElement} */ (document.querySelector("#s3-host"));
 const regionInput =
-  /** @type {WaInput} */ (document.querySelector("#s3-region"));
-const pathInput = /** @type {WaInput} */ (document.querySelector("#s3-path"));
+  /** @type {HTMLInputElement} */ (document.querySelector("#s3-region"));
+const pathInput = /** @type {HTMLInputElement} */ (document.querySelector("#s3-path"));
 
 ////////////////////////////////////////////
 // REACTIVE LIST
diff --git a/src/facets/misc/scrobble/last.fm/index.html b/src/facets/misc/scrobble/last.fm/index.html
index 2d7c2900..60a56d50 100644
--- a/src/facets/misc/scrobble/last.fm/index.html
+++ b/src/facets/misc/scrobble/last.fm/index.html
@@ -1,96 +1,69 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./styles/diffuse/facet.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 
-  #container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100dvh;
-    margin: 0;
-  }
-
-
-  wa-card {
-    width: min(360px, calc(100vw - 2rem));
-  }
-
-  .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .card-body {
+  .facet__right {
     display: flex;
     flex-direction: column;
-    gap: var(--wa-space-m);
-  }
-
-  .drawer-body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--wa-space-m);
-  }
-
-  .drawer-footer {
-    display: flex;
-    gap: var(--wa-space-s);
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  p {
-    margin: 0;
+    gap: var(--space-sm);
+    width: 24rem;
   }
 </style>
 
-<main class="wa-theme-default">
-  <wa-card>
-    <div slot="header" class="card-header">
-      <strong>Last.fm</strong>
-      <!--<wa-button id="settings-btn" appearance="plain" size="small" aria-label="API credentials">
-        <wa-icon name="gear"></wa-icon>
-      </wa-button>-->
+<main>
+  <div class="facet__left">
+    <div>
+      <a href="./dashboard/" class="diffuse-logo-container">
+        <svg viewBox="0 0 902 134" width="160">
+          <title>Diffuse</title>
+          <use
+            xlink:href="images/diffuse-current.svg#diffuse"
+            href="images/diffuse-current.svg#diffuse"
+          ></use>
+        </svg>
+      </a>
     </div>
+    <h1>Last.fm</h1>
+    <p>Connect your Last.fm account to scrobble tracks.</p>
+  </div>
 
-    <div id="state-connect" class="card-body">
-      <p>Connect your Last.fm account to start scrobbling.</p>
-      <wa-button id="sign-in-btn" variant="brand" appearance="filled">
-        <wa-icon slot="start" library="phosphor/bold" name="plugs"></wa-icon>
-        Connect
-      </wa-button>
+  <div class="facet__right">
+    <div id="state-connect">
+      <div class="button-row">
+        <button id="sign-in-btn" class="button--brand">
+          <i class="ph-bold ph-plugs"></i>
+          Connect
+        </button>
+      </div>
     </div>
 
-    <div id="state-connected" class="card-body" hidden>
+    <div id="state-connected" hidden>
       <p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
-      <wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
-        <wa-icon slot="start" library="phosphor/bold" name="plugs-connecte"></wa-icon>
-        Disconnect
-      </wa-button>
+      <div class="button-row">
+        <button id="sign-out-btn" hidden>
+          <i class="ph-bold ph-plugs-connected"></i>
+          Disconnect
+        </button>
+      </div>
     </div>
-  </wa-card>
+  </div>
 
-  <wa-drawer id="credentials-drawer" label="API Credentials" placement="end">
-    <div class="drawer-body">
-      <wa-input id="api-key-input" label="API Key" placeholder="Default"></wa-input>
-      <wa-input
-        id="api-secret-input"
-        label="API Secret"
-        type="password"
-        placeholder="Default"
-      ></wa-input>
+  <dialog id="credentials-dialog">
+    <div class="dialog-header">
+      <strong>API Credentials</strong>
+    </div>
+    <div class="dialog-body">
+      <label>API Key <input id="api-key-input" placeholder="Default"></label>
+      <label>API Secret <input id="api-secret-input" type="password" placeholder="Default"></label>
     </div>
-    <div slot="footer" class="drawer-footer">
-      <wa-button id="save-creds-btn" variant="brand" appearance="filled">Save</wa-button>
-      <wa-button id="reset-creds-btn" variant="neutral" appearance="outlined"
-        >Reset to defaults</wa-button
-      >
+    <div class="dialog-footer">
+      <button id="save-creds-btn" class="button--brand">Save</button>
+      <button id="reset-creds-btn">Reset to defaults</button>
     </div>
-  </wa-drawer>
+  </dialog>
 </main>
 
 <script type="module" src="facets/misc/scrobble/last.fm/index.inline.js"></script>
diff --git a/src/facets/misc/scrobble/last.fm/index.inline.js b/src/facets/misc/scrobble/last.fm/index.inline.js
index 38e7c9a1..75572b49 100644
--- a/src/facets/misc/scrobble/last.fm/index.inline.js
+++ b/src/facets/misc/scrobble/last.fm/index.inline.js
@@ -1,23 +1,9 @@
-import "@awesome.me/webawesome/dist/components/card/card.js";
-import "@awesome.me/webawesome/dist/components/button/button.js";
-import "@awesome.me/webawesome/dist/components/drawer/drawer.js";
-import "@awesome.me/webawesome/dist/components/input/input.js";
-import "@awesome.me/webawesome/dist/components/icon/icon.js";
-
-import "~/common/webawesome/detect-dark.js";
-import "~/common/webawesome/phosphor/bold.js";
-
 import foundation from "~/common/foundation.js";
 import { effect } from "~/common/signal.js";
 
 // Set doc title
 foundation.setup({ title: "Last.fm | Scrobble | Diffuse" });
 
-/**
- * @import { default as WaDrawer } from "@awesome.me/webawesome/dist/components/drawer/drawer.js"
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- */
-
 ////////////////////////////////////////////
 // SETUP
 ////////////////////////////////////////////
@@ -47,12 +33,6 @@ if (!lastFm) {
   configurator.append(lastFm);
 }
 
-// const creds = loadCredentials();
-// if (creds) {
-//   lastFm.setAttribute("api-key", creds.apiKey);
-//   lastFm.setAttribute("api-secret", creds.apiSecret);
-// }
-
 await customElements.whenDefined(lastFm.localName);
 
 ////////////////////////////////////////////
@@ -87,15 +67,15 @@ const signOutBtn = /** @type {HTMLElement} */ (
   document.querySelector("#sign-out-btn")
 );
 
-const credentialsDrawer = /** @type {WaDrawer} */ (
-  document.querySelector("#credentials-drawer")
+const credentialsDialog = /** @type {HTMLDialogElement} */ (
+  document.querySelector("#credentials-dialog")
 );
 
-const apiKeyInput = /** @type {WaInput} */ (
+const apiKeyInput = /** @type {HTMLInputElement} */ (
   document.querySelector("#api-key-input")
 );
 
-const apiSecretInput = /** @type {WaInput} */ (
+const apiSecretInput = /** @type {HTMLInputElement} */ (
   document.querySelector("#api-secret-input")
 );
 
@@ -107,7 +87,7 @@ const resetCredsBtn = /** @type {HTMLElement} */ (
   document.querySelector("#reset-creds-btn")
 );
 
-// Pre-fill drawer inputs with stored credentials
+// Pre-fill dialog inputs with stored credentials
 const existingCreds = loadCredentials();
 if (existingCreds) {
   apiKeyInput.value = existingCreds.apiKey;
@@ -140,7 +120,7 @@ effect(() => {
 
 settingsBtn?.addEventListener("click", (e) => {
   e.stopPropagation();
-  credentialsDrawer.open = true;
+  credentialsDialog.showModal();
 });
 
 signInBtn.onclick = () => lastFm.signIn();
diff --git a/src/facets/misc/scrobble/listenbrainz/index.html b/src/facets/misc/scrobble/listenbrainz/index.html
index 29cd9f7b..82156f94 100644
--- a/src/facets/misc/scrobble/listenbrainz/index.html
+++ b/src/facets/misc/scrobble/listenbrainz/index.html
@@ -1,69 +1,60 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./styles/diffuse/facet.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 
-  #container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100dvh;
-    margin: 0;
-  }
-
-  wa-card {
-    width: min(360px, calc(100vw - 2rem));
-  }
-
-  .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .card-body {
+  .facet__right {
     display: flex;
     flex-direction: column;
-    gap: var(--wa-space-m);
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  p {
-    margin: 0;
+    gap: var(--space-sm);
+    width: 24rem;
   }
 </style>
 
-<main class="wa-theme-default">
-  <wa-card>
-    <div slot="header" class="card-header">
-      <strong>ListenBrainz</strong>
+<main>
+  <div class="facet__left">
+    <div>
+      <a href="./dashboard/" class="diffuse-logo-container">
+        <svg viewBox="0 0 902 134" width="160">
+          <title>Diffuse</title>
+          <use
+            xlink:href="images/diffuse-current.svg#diffuse"
+            href="images/diffuse-current.svg#diffuse"
+          ></use>
+        </svg>
+      </a>
     </div>
-
-    <div id="state-connect" class="card-body">
-      <p>Enter your ListenBrainz user token to start scrobbling.</p>
-      <wa-input
-        id="token-input"
-        label="User token"
-        type="password"
-        help-text="Find your token at listenbrainz.org/settings/"
-      ></wa-input>
-      <wa-button id="sign-in-btn" variant="brand" appearance="filled">
-        <wa-icon slot="start" library="phosphor/bold" name="plugs"></wa-icon>
-        Connect
-      </wa-button>
+    <h1>ListenBrainz</h1>
+    <p>Connect your ListenBrainz account to scrobble tracks.</p>
+  </div>
+
+  <div class="facet__right">
+    <div id="state-connect">
+      <label>
+        User token
+        <input id="token-input" type="password" placeholder="Your user token" />
+        <span class="caption">Find your token at listenbrainz.org/settings/</span>
+      </label>
+      <div class="button-row">
+        <button id="sign-in-btn" class="button--brand">
+          <i class="ph-bold ph-plugs"></i>
+          Connect
+        </button>
+      </div>
     </div>
 
-    <div id="state-connected" class="card-body" hidden>
+    <div id="state-connected" hidden>
       <p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
-      <wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
-        <wa-icon slot="start" library="phosphor/bold" name="plugs-connected"></wa-icon>
-        Disconnect
-      </wa-button>
+      <div class="button-row">
+        <button id="sign-out-btn" hidden>
+          <i class="ph-bold ph-plugs-connected"></i>
+          Disconnect
+        </button>
+      </div>
     </div>
-  </wa-card>
+  </div>
 </main>
 
 <script type="module" src="facets/misc/scrobble/listenbrainz/index.inline.js"></script>
diff --git a/src/facets/misc/scrobble/listenbrainz/index.inline.js b/src/facets/misc/scrobble/listenbrainz/index.inline.js
index fed08ef6..6a78794c 100644
--- a/src/facets/misc/scrobble/listenbrainz/index.inline.js
+++ b/src/facets/misc/scrobble/listenbrainz/index.inline.js
@@ -1,18 +1,6 @@
-import "@awesome.me/webawesome/dist/components/card/card.js";
-import "@awesome.me/webawesome/dist/components/button/button.js";
-import "@awesome.me/webawesome/dist/components/input/input.js";
-import "@awesome.me/webawesome/dist/components/icon/icon.js";
-
-import "~/common/webawesome/detect-dark.js";
-import "~/common/webawesome/phosphor/bold.js";
-
 import foundation from "~/common/foundation.js";
 import { effect } from "~/common/signal.js";
 
-/**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- */
-
 ////////////////////////////////////////////
 // SETUP
 ////////////////////////////////////////////
@@ -55,7 +43,7 @@ const handleText = /** @type {HTMLElement} */ (
   document.querySelector("#handle-text")
 );
 
-const tokenInput = /** @type {WaInput} */ (
+const tokenInput = /** @type {HTMLInputElement} */ (
   document.querySelector("#token-input")
 );
 
@@ -85,7 +73,6 @@ effect(() => {
 
   // @ts-ignore
   signInBtn.disabled = isAuthenticating;
-  // @ts-ignore
   tokenInput.disabled = isAuthenticating;
 });
 
diff --git a/src/facets/misc/scrobble/rocksky/index.html b/src/facets/misc/scrobble/rocksky/index.html
index 8991d95b..b635e424 100644
--- a/src/facets/misc/scrobble/rocksky/index.html
+++ b/src/facets/misc/scrobble/rocksky/index.html
@@ -1,74 +1,69 @@
 <style>
-  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
+  @import "./styles/base.css";
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./styles/diffuse/facet.css";
 
-  @layer base, diffuse, wa;
+  @layer base, diffuse;
 
-  #container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100dvh;
-    margin: 0;
-  }
-
-  wa-card {
-    width: min(360px, calc(100vw - 2rem));
-  }
-
-  .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .card-body {
+  .facet__right {
     display: flex;
     flex-direction: column;
-    gap: var(--wa-space-m);
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  p {
-    margin: 0;
+    gap: var(--space-sm);
+    width: 24rem;
   }
 </style>
 
-<main class="wa-theme-default">
-  <wa-card>
-    <div slot="header" class="card-header">
-      <strong>Rocksky</strong>
+<main>
+  <div class="facet__left">
+    <div>
+      <a href="./dashboard/" class="diffuse-logo-container">
+        <svg viewBox="0 0 902 134" width="160">
+          <title>Diffuse</title>
+          <use
+            xlink:href="images/diffuse-current.svg#diffuse"
+            href="images/diffuse-current.svg#diffuse"
+          ></use>
+        </svg>
+      </a>
     </div>
+    <h1>Rocksky</h1>
+    <p>Scrobble tracks to Rocksky using your AT Protocol identity.</p>
+  </div>
 
-    <div id="state-connect" class="card-body">
-      <div id="state-no-atproto" class="card-body">
+  <div class="facet__right">
+    <div id="state-connect">
+      <div id="state-no-atproto">
         <p>Sign in with your AT Protocol identity first, then connect to Rocksky.</p>
-        <wa-input id="handle-input" label="Handle" placeholder="you.bsky.social"></wa-input>
-        <wa-button id="atproto-sign-in-btn" variant="neutral" appearance="outlined">
-          <wa-icon slot="start" library="phosphor/bold" name="at"></wa-icon>
-          Sign in with AT Protocol
-        </wa-button>
+        <label>Handle <input id="handle-input" placeholder="you.bsky.social" /></label>
+        <p class="button-row">
+          <button id="atproto-sign-in-btn">
+            <i class="ph-bold ph-at"></i>
+            Sign in with AT Protocol
+          </button>
+        </p>
       </div>
 
-      <div id="state-has-atproto" class="card-body" hidden>
+      <div id="state-has-atproto" hidden>
         <p>Connect your Rocksky account using your AT Protocol identity.</p>
-        <wa-button id="sign-in-btn" variant="brand" appearance="filled">
-          <wa-icon slot="start" library="phosphor/bold" name="plugs"></wa-icon>
-          Connect
-        </wa-button>
+        <div class="button-row">
+          <button id="sign-in-btn" class="button--brand">
+            <i class="ph-bold ph-plugs"></i>
+            Connect
+          </button>
+        </div>
       </div>
     </div>
 
-    <div id="state-connected" class="card-body" hidden>
+    <div id="state-connected" hidden>
       <p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
-      <wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
-        <wa-icon slot="start" library="phosphor/bold" name="plugs-connecte"></wa-icon>
-        Disconnect
-      </wa-button>
+      <div class="button-row">
+        <button id="sign-out-btn" hidden>
+          <i class="ph-bold ph-plugs-connected"></i>
+          Disconnect
+        </button>
+      </div>
     </div>
-  </wa-card>
+  </div>
 </main>
 
 <script type="module" src="facets/misc/scrobble/rocksky/index.inline.js"></script>
diff --git a/src/facets/misc/scrobble/rocksky/index.inline.js b/src/facets/misc/scrobble/rocksky/index.inline.js
index d9374bb5..3c1f8333 100644
--- a/src/facets/misc/scrobble/rocksky/index.inline.js
+++ b/src/facets/misc/scrobble/rocksky/index.inline.js
@@ -1,21 +1,9 @@
-import "@awesome.me/webawesome/dist/components/card/card.js";
-import "@awesome.me/webawesome/dist/components/button/button.js";
-import "@awesome.me/webawesome/dist/components/input/input.js";
-import "@awesome.me/webawesome/dist/components/icon/icon.js";
-
-import "~/common/webawesome/detect-dark.js";
-import "~/common/webawesome/phosphor/bold.js";
-
 import { login } from "~/components/output/raw/atproto/oauth.js";
 import { finalizeAuthorization } from "@atcute/oauth-browser-client";
 
 import foundation from "~/common/foundation.js";
 import { effect, signal } from "~/common/signal.js";
 
-/**
- * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
- */
-
 ////////////////////////////////////////////
 // SETUP
 ////////////////////////////////////////////
@@ -92,7 +80,7 @@ const handleText = /** @type {HTMLElement} */ (
   document.querySelector("#handle-text")
 );
 
-const handleInput = /** @type {WaInput} */ (
+const handleInput = /** @type {HTMLInputElement} */ (
   document.querySelector("#handle-input")
 );
 
diff --git a/src/styles/diffuse/facet.css b/src/styles/diffuse/facet.css
new file mode 100644
index 00000000..665a6974
--- /dev/null
+++ b/src/styles/diffuse/facet.css
@@ -0,0 +1,255 @@
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+main {
+  padding: var(--space-2xl) var(--space-xl);
+
+  @media (min-width: 48rem) {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-2xl);
+    justify-content: center;
+    min-height: 100dvh;
+  }
+}
+
+.facet__left {
+  container-type: inline-size;
+  flex: 1;
+  margin-bottom: var(--space-lg);
+  max-width: 24rem;
+
+  @media (min-width: 48rem) {
+    margin-bottom: 0;
+  }
+}
+
+.facet__right {
+  max-width: 24rem;
+}
+
+.diffuse-logo-container {
+  display: inline-block;
+  margin-bottom: var(--space-lg);
+
+  svg {
+    display: block;
+    fill: oklch(from var(--bg-color) calc(l - 0.5) c h);
+    opacity: 0.2;
+    width: 5em;
+
+    @media (prefers-color-scheme: dark) {
+      fill: var(--text-color);
+      opacity: 0.25;
+    }
+  }
+}
+
+h1 {
+  font-size: var(--fs-2xl);
+  font-size: min(14cqi, var(--fs-2xl));
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 var(--space-sm);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.facet__left p {
+  color: oklch(from var(--text-color) l c h / 0.55);
+  font-size: var(--fs-sm);
+  line-height: var(--leading-relaxed);
+  max-width: 22rem;
+}
+
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs);
+}
+
+.callout {
+  border-radius: var(--radius-md);
+  font-size: var(--fs-sm);
+  padding: var(--space-2xs) var(--space-xs);
+}
+
+.callout--danger {
+  background: oklch(from var(--accent-twist-4) l c h / 0.12);
+  border: 1px solid oklch(from var(--accent-twist-4) l c h / 0.3);
+  color: var(--accent-twist-4);
+}
+
+.callout--warning {
+  background: oklch(from var(--accent-twist-1) l c h / 0.12);
+  border: 1px solid oklch(from var(--accent-twist-1) l c h / 0.3);
+  color: var(--accent-twist-1);
+}
+
+.badge {
+  border: 1px solid currentColor;
+  border-radius: var(--radius-xs);
+  font-size: var(--fs-3xs);
+  letter-spacing: var(--tracking-wider);
+  line-height: 0.75;
+  opacity: 0.6;
+  padding: 0.1em 0.35em;
+  text-box: trim-both cap alphabetic;
+  text-transform: uppercase;
+}
+
+.badge--brand {
+  color: var(--accent);
+  opacity: 1;
+}
+
+.badge--warning {
+  color: var(--accent-twist-1);
+  opacity: 1;
+}
+
+button {
+  align-items: center;
+  background: var(--form-color);
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  color: var(--text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  gap: var(--space-2xs);
+  padding: var(--space-2xs) var(--space-sm);
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.button--brand {
+    background: var(--accent);
+    border-color: transparent;
+    color: var(--bg-color);
+  }
+
+  &.button--outlined {
+    background: transparent;
+  }
+
+  &.button--danger {
+    border-color: var(--accent-twist-4);
+    color: var(--accent-twist-4);
+  }
+
+  &.button--plain {
+    background: transparent;
+    border-color: transparent;
+    padding: var(--space-3xs);
+  }
+
+  &.button--small {
+    font-size: var(--fs-xs);
+    padding: var(--space-3xs) var(--space-2xs);
+  }
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--fs-sm);
+  gap: var(--space-3xs);
+}
+
+input,
+select {
+  background: var(--form-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  padding: var(--space-2xs) var(--space-xs);
+  width: 100%;
+}
+
+dialog {
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  color: var(--text-color);
+  left: 50%;
+  max-height: 85dvh;
+  max-width: min(400px, calc(100vw - 2rem));
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &::backdrop {
+    background: oklch(0 0 0 / 0.5);
+  }
+}
+
+.dialog-header {
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: var(--space-xs) var(--space-sm);
+}
+
+.dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  overflow-y: auto;
+  padding: var(--space-sm);
+}
+
+.dialog-footer {
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-2xs);
+  padding: var(--space-xs) var(--space-sm);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: var(--space-md) 0;
+}
+
+.caption {
+  color: oklch(from var(--text-color) l c h / 0.55);
+  font-size: var(--fs-xs);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+p,
+.callout {
+  margin: var(--space-sm) 0;
+}
+
+.facet__right p:first-child {
+  margin-top: 0;
+}