Add CSS Houdini squircle support and polyfill for enhanced styling

2025-11-03 09:14:39 +00:00 · 2025-02-05 22:39:58 +01:00
688 changed files with 5149 additions and 8492 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -482,7 +482,6 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Download object files
-        if: ${{ inputs.update_branch == 'release' }}
        run: |
          git clone https://github.com/zen-browser/windows-binaries.git .github/workflows/object

@@ -516,64 +515,60 @@ jobs:
        # If we are on Twilight, we want to just update the Twilight tag's release
      - name: Update Twilight tag
        if: ${{ inputs.update_branch == 'twilight' }}
-        uses: softprops/action-gh-release@v2
+        uses: marvinpinto/action-automatic-releases@master
        with:
          files: |
-            ./zen.source.tar.zst/*
-            ./zen.linux-x86_64.tar.xz/*
-            ./zen.linux-aarch64.tar.xz/*
-            ./zen-x86_64.AppImage/*
-            ./zen-x86_64.AppImage.zsync/*
-            ./zen-aarch64.AppImage/*
-            ./zen-aarch64.AppImage.zsync/*
-            ./zen.win-x86_64.zip/*
-            ./zen.win-arm64.zip/*
-            ./linux.mar/*
-            ./linux-aarch64.mar/*
-            ./windows.mar/*
-            ./windows-arm64.mar/*
-            ./macos.mar/*
-            ./zen.installer.exe/*
-            ./zen.installer-arm64.exe/*
-            ./zen.macos-universal.dmg/*
-          tag_name: 'twilight'
-          name: 'Twilight build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }} at ${{ needs.build-data.outputs.build_time }})'
+            zen.source.tar.zst
+            zen.linux-x86_64.tar.xz
+            zen.linux-aarch64.tar.xz
+            zen-x86_64.AppImage
+            zen-x86_64.AppImage.zsync
+            zen-aarch64.AppImage
+            zen-aarch64.AppImage.zsync
+            zen.win-x86_64.zip
+            zen.win-arm64.zip
+            linux.mar
+            linux-aarch64.mar
+            windows.mar
+            windows-arm64.mar
+            macos.mar
+            zen.installer.exe
+            zen.installer-arm64.exe
+            zen.macos-universal.dmg
+          automatic_release_tag: 'twilight'
+          title: 'Twilight build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }} at ${{ needs.build-data.outputs.build_time }})'
          draft: false
-          generate_release_notes: false
          prerelease: true
-          token: ${{ secrets.DEPLOY_KEY }}
-          fail_on_unmatched_files: false
+          repo_token: ${{ secrets.DEPLOY_KEY }}
        env:
          GITHUB_REPOSITORY: ${{ github.repository }}

      - name: Release
-        uses: softprops/action-gh-release@v2
+        uses: marvinpinto/action-automatic-releases@master
        if: ${{ inputs.update_branch == 'release' }}
        with:
-          token: ${{ secrets.DEPLOY_KEY }}
-          tag_name: ${{ needs.build-data.outputs.version }}
+          repo_token: '${{ secrets.DEPLOY_KEY }}'
+          automatic_release_tag: ${{ needs.build-data.outputs.version }}
          prerelease: false
-          fail_on_unmatched_files: false
-          generate_release_notes: false
-          name: 'Release build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }})'
+          title: 'Release build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }})'
          files: |
-            ./zen.source.tar.zst/*
-            ./zen.linux-x86_64.tar.xz/*
-            ./zen.linux-aarch64.tar.xz/*
-            ./zen-x86_64.AppImage/*
-            ./zen-x86_64.AppImage.zsync/*
-            ./zen-aarch64.AppImage/*
-            ./zen-aarch64.AppImage.zsync/*
-            ./.github/workflows/object/windows-x64-signed-x86_64/zen.win-x86_64.zip
-            ./.github/workflows/object/windows-x64-signed-arm64/zen.win-arm64.zip
-            ./linux.mar/*
-            ./linux-aarch64.mar/*
-            ./.github/workflows/object/windows-x64-signed-x86_64/windows.mar
-            ./.github/workflows/object/windows-x64-signed-arm64/windows-arm64.mar
-            ./macos.mar/*
-            ./.github/workflows/object/windows-x64-signed-x86_64/zen.installer.exe
-            ./.github/workflows/object/windows-x64-signed-arm64/zen.installer-arm64.exe
-            ./zen.macos-universal.dmg/*
+            zen.source.tar.zst
+            zen.linux-x86_64.tar.xz
+            zen.linux-aarch64.tar.xz
+            zen-x86_64.AppImage
+            zen-x86_64.AppImage.zsync
+            zen-aarch64.AppImage
+            zen-aarch64.AppImage.zsync
+            .github/workflows/object/windows-x64-signed-x86_64/zen.win-x86_64.zip
+            .github/workflows/object/windows-x64-signed-arm64/zen.win-arm64.zip
+            linux.mar
+            linux-aarch64.mar
+            .github/workflows/object/windows-x64-signed-x86_64/windows.mar
+            .github/workflows/object/windows-x64-signed-arm64/windows-arm64.mar
+            macos.mar
+            .github/workflows/object/windows-x64-signed-x86_64/zen.installer.exe
+            .github/workflows/object/windows-x64-signed-arm64/zen.installer-arm64.exe
+            zen.macos-universal.dmg

  prepare-flatpak:
    if: ${{ inputs.create_release && inputs.update_branch == 'release' }}
--- a/.github/workflows/macos-universal-release-build.yml
+++ b/.github/workflows/macos-universal-release-build.yml
@@ -132,7 +132,7 @@ jobs:
      - name: Find first .app folder name
        run: |
          cd engine/obj-x86_64-apple-darwin/dist
-          export APP_NAME=${{ inputs.release-branch == 'twilight' && 'Twilight' || 'Zen' }}
+          export APP_NAME=$(basename "$(find . -maxdepth 1 -name "Zen *.app" -type d | head -n 1)" .app)
          echo "APP_NAME=$APP_NAME" >> $GITHUB_ENV
          echo "APP_NAME=$APP_NAME"

--- a/.github/workflows/staler.yml
+++ b/.github/workflows/staler.yml
@@ -0,0 +1,15 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+  workflow_dispatch:
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          days-before-stale: 65
+          days-before-close: 10
--- a/.github/workflows/update-submodules.yml
+++ b/.github/workflows/update-submodules.yml
@@ -0,0 +1,31 @@
+name: Update Components Submodules
+
+on:
+  push:
+    branches:
+      - dev
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  update-submodules:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.DEPLOY_KEY }}
+
+      - name: Update submodules
+        run: |
+          git submodule update --remote --merge
+
+      - name: Commit
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: '[skip ci] 📦 Update submodules'
+          commit_user_name: Zen Browser Robot
+          commit_user_email: zen-browser-auto@users.noreply.github.com
--- a/.github/workflows/windows-release-build.yml
+++ b/.github/workflows/windows-release-build.yml
@@ -164,14 +164,14 @@ jobs:
        if: ${{ !(inputs.generate-gpo && matrix.arch == 'aarch64') }}
        run: |
          cd engine/
-          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain 1.80
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain 1.79
          source $HOME/.cargo/env
          if test "${{ matrix.arch }}" = "aarch64"; then
            rustup target add aarch64-pc-windows-msvc
          else
            rustup target add x86_64-pc-windows-msvc
          fi
-          cargo install cargo-download --locked
+          cargo install cargo-download
          cargo download -x windows=0.58.0
          export CARGO_INCREMENTAL=0
          echo "" >> ../configs/common/mozconfig
--- a/README.md
+++ b/README.md
@@ -28,9 +28,9 @@

 ## 🖥️ Compatibility

-Zen is currently built using firefox version `135.0.1`! 🚀
+Zen is currently built using firefox version `135.0`! 🚀

- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using firefox version `RC 135.0.1`!
+- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using firefox version `RC 135.0`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
 - Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!

--- a/configs/common/mozconfig
+++ b/configs/common/mozconfig
@@ -9,6 +9,7 @@ ac_add_options --with-l10n-base="${topsrcdir}/browser/locales"
 export MOZ_USER_DIR="${name}"
 export MOZ_APP_BASENAME=Zen
 export MOZ_APP_PROFILE=${binName}
+export MOZ_APP_DISPLAYNAME="${name}"
 export MOZ_BRANDING_DIRECTORY=${brandingDir}
 export MOZ_OFFICIAL_BRANDING_DIRECTORY=${brandingDir}

--- a/configs/windows/mozconfig
+++ b/configs/windows/mozconfig
@@ -30,7 +30,7 @@ ac_add_options --disable-clang-plugin
 if test "$SURFER_COMPAT" = "x86_64"; then

  ac_add_options --target=x86_64-pc-windows-msvc
-  ac_add_options --enable-eme=widevine,wmfcdm
+  ac_add_options --enable-eme=widevine

  ac_add_options --enable-optimize="-O3 -w -ftree-vectorize -Qvec -mfpmath=sse -mprfchw -msse3 -mcx16 -msahf"

--- a/docs/contribute.md
+++ b/docs/contribute.md
@@ -13,7 +13,7 @@ dev (main branch)
 \-<- (features branches)
 ```

-The `dev` branch is the main branch of the repository, and it is the default branch for the repository. The `twilight` branch is the feature branch, and it is branched off from the `dev` branch. The `stable` branch is the release branch, and it is branched off from the `dev` branch.
+The `central` branch is the main branch of the repository, and it is the default branch for the repository. The `twilight` branch is the feature branch, and it is branched off from the `central` branch. The `stable` branch is the release branch, and it is branched off from the `central` branch.

 The `stable` branch may have hotfixes directly from the `stable` branch, and the `twilight` branch may have feature branches branched off from the `twilight` branch. This is done so that we can apply hotfixes like security patches directly to the `stable` branch without having to merge the changes from the `twilight` branch.

--- a/firefox-cache/l10n-last-commit-hash
+++ b/firefox-cache/l10n-last-commit-hash
@@ -1 +1 @@
-8d18d852fbaeaa05c6ec3ebd9b35312f2c58021f
+7d861618502fc97ac8da8a1a78ec09b226c55dd5
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
-        "@zen-browser/surfer": "^1.9.19"
+        "@zen-browser/surfer": "^1.9.14"
      },
      "devDependencies": {
        "husky": "^9.1.7",
@@ -270,9 +270,9 @@
      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
    },
    "node_modules/@zen-browser/surfer": {
-      "version": "1.9.19",
-      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.9.19.tgz",
-      "integrity": "sha512-EFZC1ZgU/vFU5AUFxjGxkXbekSbqFS5r1jV8s55QJa+ieU2ZdgFr7OO8wTQ/jyN0we+QK1ILdFCEpdGLBOpRmw==",
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.9.15.tgz",
+      "integrity": "sha512-mG/nTFduaXpYmGNYh5+d5ZzRX6XOkF6VEgia1nSZUoiPAXbwKblmwKro/b6uYAELTvpMCEneRl86CIU8HK++Tg==",
      "dependencies": {
        "@resvg/resvg-js": "^1.4.0",
        "async-icns": "^1.0.2",
@@ -2810,9 +2810,9 @@
      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
    },
    "@zen-browser/surfer": {
-      "version": "1.9.19",
-      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.9.19.tgz",
-      "integrity": "sha512-EFZC1ZgU/vFU5AUFxjGxkXbekSbqFS5r1jV8s55QJa+ieU2ZdgFr7OO8wTQ/jyN0we+QK1ILdFCEpdGLBOpRmw==",
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.9.15.tgz",
+      "integrity": "sha512-mG/nTFduaXpYmGNYh5+d5ZzRX6XOkF6VEgia1nSZUoiPAXbwKblmwKro/b6uYAELTvpMCEneRl86CIU8HK++Tg==",
      "requires": {
        "@resvg/resvg-js": "^1.4.0",
        "async-icns": "^1.0.2",
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
  },
  "homepage": "https://github.com/zen-browser/core#readme",
  "dependencies": {
-    "@zen-browser/surfer": "^1.9.19"
+    "@zen-browser/surfer": "^1.9.16"
  },
  "devDependencies": {
    "husky": "^9.1.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -75,15 +75,15 @@ pref("app.update.checkInstallTime.days", 6);

 // CUSTOM ZEN PREFS

-pref('zen.welcome-screen.seen', false, sticky);
+pref('zen.welcome-screen.enabled', true, sticky);
+pref('zen.welcome-screen.seen', false);

 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
-pref('zen.tabs.rename-tabs', true);
 pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
+pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
-pref('zen.theme.gradient.show-custom-colors', false);
 pref('zen.theme.essentials-favicon-bg', true);

 pref('zen.tabs.show-newtab-vertical', true);
@@ -102,10 +102,16 @@ pref('zen.rice.share.notice.accepted', false);
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else
+#ifdef XP_WIN
+pref('zen.theme.border-radius', 12); // In pixels
+#else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
+#endif

 pref('zen.theme.color-prefs.use-workspace-colors', true);
+pref('zen.theme.color-prefs.amoled', false);
+pref('zen.theme.color-prefs.colorful', false);

 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
@@ -115,11 +121,9 @@ pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 pref('zen.view.compact.color-toolbar', true);
 pref('zen.view.compact.color-sidebar', true);
 pref('zen.view.compact.animate-sidebar', true);
-pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);

 pref('zen.urlbar.replace-newtab', true);
 pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
-pref('zen.urlbar.wait-to-clear', 45000); // in ms (default 45s)

 #ifdef XP_MACOSX
 // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
@@ -128,10 +132,6 @@ pref('zen.view.experimental-rounded-view', false);
 pref('zen.view.experimental-rounded-view', true);
 #endif

-#ifdef XP_WIN
-pref('zen.widget.windows.acrylic', true);
-#endif
-
 // Glance
 pref('zen.glance.enabled', true);
 pref('zen.glance.hold-duration', 300); // in ms
@@ -143,8 +143,8 @@ pref('zen.view.sidebar-expanded.max-width', 500);

 #ifdef XP_MACOSX
 pref('zen.view.mac.show-three-dot-menu', false);
-pref('zen.widget.mac.mono-window-controls', true);
 #endif
+pref('zen.view.show-bottom-border', false);
 pref('zen.view.use-single-toolbar', true);
 pref('zen.view.sidebar-expanded', true);
 pref('zen.view.sidebar-collapsed.hide-mute-button', true);
@@ -160,6 +160,7 @@ pref('zen.view.hide-window-controls', true);
 pref('zen.view.experimental-no-window-controls', false);

 pref('zen.tabs.dim-pending', true);
+pref('zen.tabs.newtab-on-middle-click', true);

 pref('zen.keyboard.shortcuts.enabled', true);
 pref('zen.keyboard.shortcuts.version', 0); // Empty string means default shortcuts
@@ -173,7 +174,7 @@ pref('zen.tab-unloader.excluded-urls', "example.com,example.org");

 pref('zen.pinned-tab-manager.debug', false);
 pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false);
-pref('zen.pinned-tab-manager.close-shortcut-behavior', 'reset-unload-switch');
+pref('zen.pinned-tab-manager.close-shortcut-behavior', 'switch');

 // TODO: Check this out!
 pref("browser.profiles.enabled", false);
@@ -185,6 +186,7 @@ pref('zen.sidebar.close-on-blur', true);
 pref('zen.sidebar.max-webpanels', 8);

 // Zen Split View
+pref('zen.splitView.working', false);
 pref('zen.splitView.min-resize-width', 7);
 pref('zen.splitView.change-on-hover', false);
 pref('zen.splitView.rearrange-hover-size', 24);
@@ -382,7 +384,6 @@ pref("browser.urlbar.quicksuggest.enabled", false);
 pref("browser.urlbar.suggest.quicksuggest.sponsored", false);
 pref("browser.urlbar.suggest.quicksuggest.nonsponsored", false);
 pref("browser.urlbar.groupLabels.enabled", false);
-pref("browser.urlbar.keepPanelOpenDuringImeComposition", true); // IMPORTANT: Fixes closing the urlbar when on some languages
 pref("browser.formfill.enable", false);
 pref("security.insecure_connection_text.enabled", true);
 pref("security.insecure_connection_text.pbmode.enabled", true);
@@ -430,7 +431,7 @@ pref("browser.aboutwelcome.enabled", false);

 // ---- Experimental settings to try make zen faster
 pref("gfx.canvas.accelerated.cache-items", 32768);
-pref("gfx.canvas.accelerated.cache-size", 256);
+pref("gfx.canvas.accelerated.cache-size", 4096);
 pref("gfx.content.skia-font-cache-size", 80);

 pref("media.memory_cache_max_size", 1048576);
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -18,7 +18,7 @@ export var ZenCustomizableUI = new (class {
      true
    );
    CustomizableUIInternal.registerArea(
-      'zen-sidebar-bottom-buttons',
+      'zen-sidebar-icons-wrapper',
      {
        type: this.TYPE_TOOLBAR,
        defaultPlacements: this.defaultSidebarIcons,
@@ -108,7 +108,7 @@ export var ZenCustomizableUI = new (class {
  }

  _hideToolbarButtons(window) {
-    const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
+    const wrapper = window.document.getElementById('zen-sidebar-icons-wrapper');
    const elementsToHide = ['alltabs-button', 'new-tab-button'];
    for (let id of elementsToHide) {
      const elem = window.document.getElementById(id);
@@ -124,7 +124,7 @@ export var ZenCustomizableUI = new (class {

  registerToolbarNodes(window) {
    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
-    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-bottom-buttons'));
+    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
    window.addEventListener(
      'DOMContentLoaded',
      () => {
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -1,10 +1,13 @@
 {
+  const lazy = {};
  var ZenStartup = {
    init() {
      this.openWatermark();
-      this._changeSidebarLocation();
-      this._zenInitBrowserLayout();
-      this._initSearchBar();
+      window.SessionStore.promiseInitialized.then(() => {
+        this._changeSidebarLocation();
+        this._zenInitBrowserLayout();
+        this._initSearchBar();
+      });
    },

    _zenInitBrowserLayout() {
@@ -30,12 +33,14 @@

        this._initSidebarScrolling();

+        gZenUIMigration.init();
+
        gZenCompactModeManager.init();
        ZenWorkspaces.init();
        gZenVerticalTabsManager.init();
        gZenUIManager.init();

-        this._checkForWelcomePage();
+        this._initSquircles();

        document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
      } catch (e) {
@@ -48,30 +53,18 @@
      if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
        return;
      }
-      for (let elem of document.querySelectorAll('#browser > *, #urlbar')) {
-        elem.style.opacity = 0;
-      }
+      const watermark = window.MozXULElement.parseXULToFragment(`
+        <html:div id="zen-watermark">
+          <image src="chrome://branding/content/about-logo.png" />
+        </html:div>
+      `);
+      document.body.appendChild(watermark);
    },

    closeWatermark() {
-      document.documentElement.removeAttribute('zen-before-loaded');
-      if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
-        gZenUIManager.motion
-          .animate(
-            '#browser > *, #urlbar, #tabbrowser-tabbox > *',
-            {
-              opacity: [0, 1],
-            },
-            {
-              delay: 0.6,
-              easing: 'ease-in-out',
-            }
-          )
-          .then(() => {
-            for (let elem of document.querySelectorAll('#browser > *, #urlbar, #tabbrowser-tabbox > *')) {
-              elem.style.removeProperty('opacity');
-            }
-          });
+      const watermark = document.getElementById('zen-watermark');
+      if (watermark) {
+        watermark.setAttribute('hidden', 'true');
      }
    },

@@ -96,7 +89,8 @@
    _initSidebarScrolling() {
      // Disable smooth scroll
      const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
-      const tabsWrapper = document.getElementById('zen-tabs-wrapper');
+      const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
+      const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
      gBrowser.tabContainer.addEventListener('wheel', (event) => {
        if (canSmoothScroll) return;
        event.preventDefault(); // Prevent the smooth scroll behavior
@@ -105,14 +99,13 @@
      // Detect overflow and underflow
      const observer = new ResizeObserver((_) => {
        const tabContainer = gBrowser.tabContainer;
-        // const isVertical = tabContainer.getAttribute('orient') === 'vertical';
-        // let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
+        const isVertical = tabContainer.getAttribute('orient') === 'vertical';
+        let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
        // NOTE: This should be contentSize > scrollClientSize, but due
        // to how Gecko internally rounds in those cases, we allow for some
        // minor differences (the internal Gecko layout size is 1/60th of a
        // pixel, so 0.02 should cover it).
-        //let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
-        let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
+        let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;

        window.requestAnimationFrame(() => {
          tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
@@ -131,12 +124,11 @@
      gURLBar._initStripOnShare();
    },

-    _checkForWelcomePage() {
-      if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) {
-        Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
-        Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window);
-      }
-    },
+    _initSquircles() {
+      CSS.paintWorklet.addModule(
+        `chrome://browser/content/zen-vendor/css-houdini-squircle.min.mjs`
+      );
+    }
  };

  ZenStartup.init();
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -8,19 +8,14 @@ var gZenUIManager = {
    document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
    XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
    XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
-    XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
-
-    gURLBar._zenTrimURL = this.urlbarTrim.bind(this);

    ChromeUtils.defineLazyGetter(this, 'motion', () => {
      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
    });

-    ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
-      return document.getElementById('zen-toast-container');
-    });
-
-    new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));
+    new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
+      document.getElementById('TabsToolbar')
+    );

    new ResizeObserver(
      gZenCommonActions.throttle(
@@ -31,16 +26,14 @@ var gZenUIManager = {

    SessionStore.promiseAllWindowsRestored.then(() => {
      this._hasLoadedDOM = true;
-      this.updateTabsToolbar();
    });

    window.addEventListener('TabClose', this.onTabClose.bind(this));
-    this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
  },

  updateTabsToolbar() {
    // Set tabs max-height to the "toolbar-items" height
-    const tabs = this.tabsWrapper;
+    const tabs = document.getElementById('zen-browser-tabs-wrapper');
    // Remove tabs so we can accurately calculate the height
    // without them affecting the height of the toolbar
    for (const tab of gBrowser.tabs) {
@@ -67,7 +60,7 @@ var gZenUIManager = {
    if (this._tabsWrapper) {
      return this._tabsWrapper;
    }
-    this._tabsWrapper = document.getElementById('zen-tabs-wrapper');
+    this._tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
    return this._tabsWrapper;
  },

@@ -75,13 +68,10 @@ var gZenUIManager = {
    this._scrollbarState = this.tabsWrapper.scrollTop;
  },

-  restoreScrollbarState() {
-    this.tabsWrapper.scrollTop = this._scrollbarState;
-  },
-
  onTabClose(event) {
    this.updateTabsToolbar();
-    this.restoreScrollbarState();
+    this.tabsWrapper.scrollTop = this._scrollbarState;
+    this._scrollbarState = 0;
  },

  openAndChangeToTab(url, options) {
@@ -153,31 +143,16 @@ var gZenUIManager = {
    this.__currentPopupTrackElement = null;
  },

-  // Section: URL bar
-
-  get newtabButtons() {
-    return document.querySelectorAll('#tabs-newtab-button');
-  },
-
  _prevUrlbarLabel: null,
  _lastSearch: '',
-  _clearTimeout: null,
-  _lastTab: null,

  handleNewTab(werePassedURL, searchClipboard, where) {
-    const shouldOpenURLBar = gZenVerticalTabsManager._canReplaceNewTab && !werePassedURL && !searchClipboard && where === 'tab';
+    const shouldOpenURLBar =
+      Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
    if (shouldOpenURLBar) {
-      if (this._clearTimeout) {
-        clearTimeout(this._clearTimeout);
-      }
-      this._lastTab = gBrowser.selectedTab;
-      this._lastTab._visuallySelected = false;
      this._prevUrlbarLabel = gURLBar._untrimmedValue;
      gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
      gURLBar.setAttribute('zen-newtab', true);
-      for (const button of this.newtabButtons) {
-        button.setAttribute('in-urlbar', true);
-      }
      document.getElementById('Browser:OpenLocation').doCommand();
      gURLBar.search(this._lastSearch);
      return true;
@@ -185,28 +160,16 @@ var gZenUIManager = {
    return false;
  },

-  clearUrlbarData() {
-    this._prevUrlbarLabel = null;
-    this._lastSearch = '';
-  },
-
  handleUrlbarClose(onSwitch) {
    gURLBar._zenHandleUrlbarClose = null;
    gURLBar.removeAttribute('zen-newtab');
-    this._lastTab._visuallySelected = true;
-    this._lastTab = null;
-    for (const button of this.newtabButtons) {
-      button.removeAttribute('in-urlbar');
-    }
    if (onSwitch) {
-      this.clearUrlbarData();
+      this._prevUrlbarLabel = null;
+      this._lastSearch = '';
    } else {
      this._lastSearch = gURLBar._untrimmedValue;
-      this._clearTimeout = setTimeout(() => {
-        this.clearUrlbarData();
-      }, this.urlbarWaitToClear);
    }
-    gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
+    gURLBar.setURI(this._prevUrlbarLabel, false, false, false, true);
    gURLBar.handleRevert();
    if (gURLBar.focused) {
      gURLBar.view.close({ elementPicked: onSwitch });
@@ -216,46 +179,6 @@ var gZenUIManager = {
      }
    }
  },
-
-  urlbarTrim(aURL) {
-    if (gZenVerticalTabsManager._hasSetSingleToolbar) {
-      let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
-      return url.startsWith('http://') || url.startsWith('https://') ? url.split('/')[2] : url;
-    }
-    return BrowserUIUtils.trimURL(aURL);
-  },
-
-  // Section: Notification messages
-  _createToastElement(messageId, options) {
-    const element = document.createXULElement('vbox');
-    const label = document.createXULElement('label');
-    document.l10n.setAttributes(label, messageId, options);
-    element.appendChild(label);
-    if (options.descriptionId) {
-      const description = document.createXULElement('label');
-      description.classList.add('description');
-      document.l10n.setAttributes(description, options.descriptionId, options);
-      element.appendChild(description);
-    }
-    element.classList.add('zen-toast');
-    return element;
-  },
-
-  async showToast(messageId, options = {}) {
-    const toast = this._createToastElement(messageId, options);
-    this._toastContainer.removeAttribute('hidden');
-    this._toastContainer.appendChild(toast);
-    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
-    await new Promise((resolve) => setTimeout(resolve, 3000));
-    await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
-    const toastHeight = toast.getBoundingClientRect().height;
-    // 5 for the separation between toasts
-    await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
-    toast.remove();
-    if (!this._toastContainer.hasChildNodes()) {
-      this._toastContainer.setAttribute('hidden', 'true');
-    }
-  },
 };

 var gZenVerticalTabsManager = {
@@ -278,7 +201,6 @@ var gZenVerticalTabsManager = {
      );
    });

-    XPCOMUtils.defineLazyPreferenceGetter(this, '_canReplaceNewTab', 'zen.urlbar.replace-newtab', true);
    var updateEvent = this._updateEvent.bind(this);
    var onPrefChange = this._onPrefChange.bind(this);

@@ -291,14 +213,27 @@ var gZenVerticalTabsManager = {
    window.addEventListener('customizationstarting', this._preCustomize.bind(this));
    window.addEventListener('aftercustomization', this._postCustomize.bind(this));

-    this._updateEvent();
+    window.addEventListener('DOMContentLoaded', updateEvent, { once: true });
+
+    const tabs = document.getElementById('tabbrowser-tabs');
+
+    XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);

    if (!this.isWindowsStyledButtons) {
      document.documentElement.setAttribute('zen-window-buttons-reversed', true);
    }

-    this._renameTabHalt = this.renameTabHalt.bind(this);
-    gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
+    if (tabs) {
+      tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
+    }
+  },
+
+  openNewTabOnTabsMiddleClick(event) {
+    if (event.button === 1 && event.target.id === 'tabbrowser-tabs' && this.canOpenTabOnMiddleClick) {
+      document.getElementById('cmd_newNavigatorTabNoEvent').doCommand();
+      event.stopPropagation();
+      event.preventDefault();
+    }
  },

  toggleExpand() {
@@ -465,11 +400,6 @@ var gZenVerticalTabsManager = {

      gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
      gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
-      // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
-      gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
-        'orient',
-        isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
-      );

      const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
      if (isRightSide) {
@@ -623,7 +553,6 @@ var gZenVerticalTabsManager = {
    } catch (e) {
      console.error(e);
    }
-    gZenUIManager.updateTabsToolbar();
    this._isUpdating = false;
  },

@@ -664,93 +593,4 @@ var gZenVerticalTabsManager = {
    }
    target.appendChild(child);
  },
-
-  async renameTabKeydown(event) {
-    if (event.key === 'Enter') {
-      let label = this._tabEdited.querySelector('.tab-label-container-editing');
-      let input = this._tabEdited.querySelector('#tab-label-input');
-      let newName = input.value.trim();
-
-      // Check if name is blank, reset if so
-      // Always remove, so we can always rename and if it's empty,
-      // it will reset to the original name anyway
-      this._tabEdited.removeAttribute('zen-has-static-label');
-      if (newName) {
-        gBrowser._setTabLabel(this._tabEdited, newName);
-        this._tabEdited.setAttribute('zen-has-static-label', 'true');
-        gZenUIManager.showToast('zen-tabs-renamed');
-      } else {
-        gBrowser.setTabTitle(this._tabEdited);
-      }
-      if (this._tabEdited.getAttribute('zen-pin-id')) {
-        // Update pin title in storage
-        await gZenPinnedTabManager.updatePinTitle(this._tabEdited, this._tabEdited.label, !!newName);
-      }
-      document.documentElement.removeAttribute('zen-renaming-tab');
-
-      // Maybe add some confetti here?!?
-      gZenUIManager.motion.animate(
-        this._tabEdited,
-        {
-          scale: [1, 0.98, 1],
-        },
-        {
-          duration: 0.25,
-        }
-      );
-
-      this._tabEdited.querySelector('.tab-editor-container').remove();
-      label.classList.remove('tab-label-container-editing');
-
-      this._tabEdited = null;
-    } else if (event.key === 'Escape') {
-      event.target.blur();
-    }
-  },
-
-  renameTabStart(event) {
-    if (
-      this._tabEdited ||
-      !Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
-      Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
-      !gZenVerticalTabsManager._prefsSidebarExpanded
-    )
-      return;
-    this._tabEdited = event.target.closest('.tabbrowser-tab');
-    if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
-      this._tabEdited = null;
-      return;
-    }
-    document.documentElement.setAttribute('zen-renaming-tab', 'true');
-    const label = this._tabEdited.querySelector('.tab-label-container');
-    label.classList.add('tab-label-container-editing');
-
-    const container = window.MozXULElement.parseXULToFragment(`
-      <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
-    `);
-    label.after(container);
-    const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
-    const input = document.createElement('input');
-    input.id = 'tab-label-input';
-    input.value = this._tabEdited.label;
-    input.addEventListener('keydown', this.renameTabKeydown.bind(this));
-
-    containerHtml.appendChild(input);
-    input.focus();
-    input.select();
-
-    input.addEventListener('blur', this._renameTabHalt);
-  },
-
-  renameTabHalt(event) {
-    if (document.activeElement === event.target || !this._tabEdited) {
-      return;
-    }
-    document.documentElement.removeAttribute('zen-renaming-tab');
-    this._tabEdited.querySelector('.tab-editor-container').remove();
-    const label = this._tabEdited.querySelector('.tab-label-container-editing');
-    label.classList.remove('tab-label-container-editing');
-
-    this._tabEdited = null;
-  },
 };
--- a/src/browser/base/content/browser-commands-js.patch
+++ b/src/browser/base/content/browser-commands-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-commands.js b/browser/base/content/browser-commands.js
-index 352de44dda36e3f6672eb353f42978ede0cd2681..0fde717eaf755526ec65b676c43bd34c6a675934 100644
+index 352de44dda36e3f6672eb353f42978ede0cd2681..66d1616da17df3430cec0994a346f0f446944f1a 100644
 --- a/browser/base/content/browser-commands.js
 +++ b/browser/base/content/browser-commands.js
@@ -318,6 +318,10 @@ var BrowserCommands = {
@@ -13,18 +13,7 @@ index 352de44dda36e3f6672eb353f42978ede0cd2681..0fde717eaf755526ec65b676c43bd34c
     // A notification intended to be useful for modular peformance tracking
     // starting as close as is reasonably possible to the time when the user
     // expressed the intent to open a new tab.  Since there are a lot of
-@@ -400,6 +404,10 @@ var BrowserCommands = {
-       return;
-     }
- 
-+    if (gBrowser.selectedTab.hasAttribute("zen-empty-tab")) {
-+      return;
-+    }
-+
-     // Keyboard shortcuts that would close a tab that is pinned select the first
-     // unpinned tab instead.
-     if (
-@@ -407,8 +415,8 @@ var BrowserCommands = {
+@@ -407,8 +411,8 @@ var BrowserCommands = {
       (event.ctrlKey || event.metaKey || event.altKey) &&
       gBrowser.selectedTab.pinned
     ) {
--- a/src/browser/base/content/browser-init-js.patch
+++ b/src/browser/base/content/browser-init-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..398d685b142a47a85619dfc55772ea98ccfad445 100644
+index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..eb7ed966628a595847b850f981418d425b78f14b 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
@@ -162,13 +162,15 @@ var gBrowserInit = {
@@ -19,22 +19,15 @@ index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..398d685b142a47a85619dfc55772ea98
     if (isVerticalTabs) {
       // Show the vertical tabs toolbar
       setToolbarVisibility(
-@@ -287,6 +289,10 @@ var gBrowserInit = {
+@@ -287,6 +289,11 @@ var gBrowserInit = {
     gPrivateBrowsingUI.init();
     BrowserSearch.init();
     BrowserPageActions.init();
 +
+Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenUIMigration.mjs", window);
 +Services.scriptloader.loadSubScript("chrome://browser/content/ZenStartup.mjs", window);
 +Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", window);
 +
     if (gToolbarKeyNavEnabled) {
       ToolbarKeyboardNavigator.init();
     }
-@@ -365,6 +371,7 @@ var gBrowserInit = {
-     TelemetryTimestamps.add("delayedStartupStarted");
- 
-     this._cancelDelayedStartup();
-+    ZenWorkspaces.afterLoadInit();
- 
-     gBrowser.addEventListener(
-       "PermissionStateChange",
--- a/src/browser/base/content/browser-js.patch
+++ b/src/browser/base/content/browser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..89045fd46888d2a15ccee1b35ed83692faaad364 100644
+index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36f4089dd6 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,19 +10,34 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..89045fd46888d2a15ccee1b35ed83692
   DevToolsSocketStatus:
     "resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
   DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
-@@ -3440,6 +3441,11 @@ var XULBrowserWindow = {
+@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
+   false
+ );
+ 
+const ZEN_WELCOME_PATH = "zen-welcome";
+const ZEN_WELCOME_ELEMENT_ATTR = "zen-dialog-welcome-element";
+XPCOMUtils.defineLazyServiceGetter(
+  this,
+  "ProfileService",
+  "@mozilla.org/toolkit/profile-service;1",
+  "nsIToolkitProfileService"
+);
+
+ customElements.setElementCreationCallback("screenshots-buttons", () => {
+   Services.scriptloader.loadSubScript(
+     "chrome://browser/content/screenshots/screenshots-buttons.js",
+@@ -3440,6 +3450,10 @@ var XULBrowserWindow = {
     AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
     TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
 
 +    gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
 +    ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
 +    gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
-+    gZenPinnedTabManager.onLocationChange(gBrowser.selectedBrowser);
 +
     PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
 
     if (!gMultiProcessBrowser) {
-@@ -4435,7 +4441,7 @@ nsBrowserAccess.prototype = {
+@@ -4435,7 +4449,7 @@ nsBrowserAccess.prototype = {
     // Passing a null-URI to only create the content window,
     // and pass true for aSkipLoad to prevent loading of
     // about:blank
@@ -31,7 +46,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..89045fd46888d2a15ccee1b35ed83692
       null,
       aParams,
       aWhere,
-@@ -4443,6 +4449,10 @@ nsBrowserAccess.prototype = {
+@@ -4443,6 +4457,10 @@ nsBrowserAccess.prototype = {
       aName,
       true
     );
@@ -42,22 +57,16 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..89045fd46888d2a15ccee1b35ed83692
   },
 
   openURIInFrame: function browser_openURIInFrame(
-@@ -6351,7 +6361,7 @@ function switchToTabHavingURI(
-       ignoreQueryString || replaceQueryString,
-       ignoreFragmentWhenComparing
-     );
-    let browsers = aWindow.gBrowser.browsers;
-+    let browsers = aWindow.ZenWorkspaces.allUsedBrowsers;
-     for (let i = 0; i < browsers.length; i++) {
-       let browser = browsers[i];
-       let browserCompare = cleanURL(
-@@ -6392,7 +6402,9 @@ function switchToTabHavingURI(
-         }
+@@ -7285,6 +7303,12 @@ var gDialogBox = {
+     parentElement.showModal();
+     this._didOpenHTMLDialog = true;
 
-         if (!doAdopt) {
-+          aWindow.ZenWorkspaces.switchIfNeeded(browser).then(() => {
-           aWindow.gBrowser.tabContainer.selectedIndex = i;
-+          });
-         }
+    if (uri.includes(ZEN_WELCOME_PATH)) {
+      parentElement.setAttribute(ZEN_WELCOME_ELEMENT_ATTR, true);
+    } else if (parentElement.hasAttribute(ZEN_WELCOME_ELEMENT_ATTR)) {
+      parentElement.removeAttribute(ZEN_WELCOME_ELEMENT_ATTR);
+    }
+
+     // Disable menus and shortcuts.
+     this._updateMenuAndCommandState(false /* to disable */);
 
-         return true;
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -1,16 +1,8 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 891c067d6ad718061c410c04743bed25744504b5..135c8515bbcb534c3f900e7ba1ee4d3b9fe17436 100644
+index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b09d63ac5 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -25,6 +25,7 @@
-         sizemode="normal"
-         retargetdocumentfocus="urlbar-input"
-         scrolling="false"
-+        zen-before-loaded="true"
-         persist="screenX screenY width height sizemode"
-         data-l10n-sync="true">
- <head>
-@@ -99,6 +100,8 @@
+@@ -99,6 +99,8 @@
 
   <title data-l10n-id="browser-main-window-default-title"></title>
 
@@ -19,7 +11,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..135c8515bbcb534c3f900e7ba1ee4d3b
 # All JS files which are needed by browser.xhtml and other top level windows to
 # support MacOS specific features *must* go into the global-scripts.inc file so
 # that they can be shared with macWindow.inc.xhtml.
-@@ -143,6 +146,7 @@
+@@ -143,6 +145,7 @@
   window.addEventListener("DOMContentLoaded",
     gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
 </script>
@@ -27,7 +19,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..135c8515bbcb534c3f900e7ba1ee4d3b
 </head>
 <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -164,9 +168,13 @@
+@@ -164,9 +167,12 @@
     </vbox>
   </html:template>
 
@@ -35,7 +27,6 @@ index 891c067d6ad718061c410c04743bed25744504b5..135c8515bbcb534c3f900e7ba1ee4d3b
 -
 -#include browser-box.inc.xhtml
 +  <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
-+    <vbox id="zen-toast-container"></vbox>
 +    #include navigator-toolbox.inc.xhtml
 +    <html:span id="zen-sidebar-box-container">
 +    </html:span>
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1c0d9968c 100644
+index 00391af141d9015fe5839534e5e6b22a91ba65d9..b68767d0fef6cea2756376bbcfe00603d5d1a655 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -11,20 +11,16 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1
   <script src="chrome://browser/content/navigator-toolbox.js" />
 
   <!-- Menu -->
-@@ -17,9 +17,11 @@
- #include browser-menubar.inc
-     </toolbaritem>
+@@ -19,7 +19,7 @@
     <spacer flex="1" skipintoolbarset="true" style="order: 1000;"/>
-+#if 0
 #include titlebar-items.inc.xhtml
-+#endif
   </toolbar>
 -
 +<hbox id="titlebar">
   <toolbar id="TabsToolbar"
            class="browser-toolbar browser-titlebar"
            fullscreentoolbar="true"
-@@ -32,7 +34,7 @@
+@@ -32,7 +32,7 @@
 
     <hbox class="titlebar-spacer" type="pre-tabs"/>
 
@@ -33,7 +29,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1
       <toolbartabstop/>
       <hbox id="TabsToolbar-customization-target" flex="1">
         <toolbarbutton id="firefox-view-button"
-@@ -40,9 +42,9 @@
+@@ -40,9 +40,9 @@
                        data-l10n-id="toolbar-button-firefox-view-2"
                        role="button"
                        aria-pressed="false"
@@ -44,14 +40,16 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1
         <tabs id="tabbrowser-tabs"
               is="tabbrowser-tabs"
               aria-multiselectable="true"
-@@ -50,6 +52,10 @@
+@@ -50,6 +50,12 @@
               tooltip="tabbrowser-tab-tooltip"
               orient="horizontal"
               stopwatchid="FX_TAB_CLICK_MS">
 +<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
-+<hbox id="zen-current-workspace-indicator-container"></hbox>
-+<html:div id="zen-tabs-wrapper">
-+<html:div id="zen-browser-tabs-container">
+<hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
+  <hbox id="zen-current-workspace-indicator-icon"></hbox>
+  <hbox id="zen-current-workspace-indicator-name"></hbox>
+</hbox>
+<html:div id="zen-browser-tabs-wrapper">
           <hbox class="tab-drop-indicator" hidden="true"/>
 # If the name (tabbrowser-arrowscrollbox) or structure of this changes
 # significantly, there is an optimization in
@@ -64,21 +62,20 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1
             <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
             <hbox id="tabbrowser-arrowscrollbox-periphery">
               <toolbartabstop/>
-@@ -75,6 +81,8 @@
+@@ -75,6 +81,7 @@
                               tooltip="dynamic-shortcut-tooltip"
                               data-l10n-id="tabs-toolbar-new-tab"/>
           <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
-+</html:div>
 +</html:div>
         </tabs>
 
         <toolbarbutton id="new-tab-button"
-@@ -100,11 +108,12 @@
+@@ -100,11 +107,12 @@
 #include private-browsing-indicator.inc.xhtml
     <toolbarbutton id="content-analysis-indicator"
                    class="toolbarbutton-1 content-analysis-indicator-icon"/>
 -
-+#if 0
+                   #if 0
 #include titlebar-items.inc.xhtml
 -
 +#endif
@@ -89,7 +86,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1
   <toolbar id="nav-bar"
            class="browser-toolbar chromeclass-location"
            data-l10n-id="navbar-accessible"
-@@ -490,10 +499,12 @@
+@@ -487,10 +495,12 @@
                      consumeanchor="PanelUI-button"
                      data-l10n-id="appmenu-menu-button-closed2"/>
     </toolbaritem>
--- a/src/browser/base/content/navigator-toolbox-js.patch
+++ b/src/browser/base/content/navigator-toolbox-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
-index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..9e1e888554279b6e1df3bc1cb907afd2ccb330ca 100644
+index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..69009d53d7242c26f777ac2e0bb1897ff27ad916 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -11,19 +11,3 @@ index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..9e1e888554279b6e1df3bc1cb907afd2
     const widgetOverflow = document.getElementById("widget-overflow");
 
     function onPopupShowing(event) {
-@@ -187,6 +187,7 @@ document.addEventListener(
-         #reload-button ,
-         #urlbar-go-button,
-         #reader-mode-button,
-+        #zen-tabs-wrapper,
-         #picture-in-picture-button,
-         #shopping-sidebar-button,
-         #urlbar-zoom-button,
-@@ -208,6 +209,7 @@ document.addEventListener(
-         case "vertical-tabs-newtab-button":
-         case "tabs-newtab-button":
-         case "new-tab-button":
-+        case "zen-tabs-wrapper":
-           gBrowser.handleNewTabMiddleClick(element, event);
-           break;
- 
--- a/src/browser/base/content/zen-assets.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -18,13 +18,12 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />

 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
-<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-branding.css" />
-<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-welcome.css" />
 </linkset>

 # Scripts used all over the browser
@@ -39,7 +38,9 @@
 <script src="chrome://browser/content/zen-components/ZenPinnedTabManager.mjs" />
 <script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
 <script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
+<script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />
 <script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
+<script src="chrome://browser/content/zen-vendor/css-paint-polyfill.min.mjs" />

 # Unimportant scripts
 <script src="chrome://browser/content/zen-components/ZenRices.mjs" />
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -12,6 +12,7 @@
        content/browser/zen-components/ZenWorkspacesStorage.mjs (zen-components/ZenWorkspacesStorage.mjs)
        content/browser/zen-components/ZenWorkspacesSync.mjs    (zen-components/ZenWorkspacesSync.mjs)
        content/browser/zen-components/ZenSidebarManager.mjs    (zen-components/ZenSidebarManager.mjs)
+        content/browser/zen-components/ZenProfileDialogUI.mjs   (zen-components/ZenProfileDialogUI.mjs)
        content/browser/zen-components/ZenKeyboardShortcuts.mjs (zen-components/ZenKeyboardShortcuts.mjs)
        content/browser/zen-components/ZenThemesImporter.mjs    (zen-components/ZenThemesImporter.mjs)
        content/browser/zen-components/ZenTabUnloader.mjs       (zen-components/ZenTabUnloader.mjs)
@@ -23,7 +24,6 @@
        content/browser/zen-components/ZenActorsManager.mjs     (zen-components/ZenActorsManager.mjs)
        content/browser/zen-components/ZenRices.mjs             (zen-components/ZenRices.mjs)
        content/browser/zen-components/ZenEmojies.mjs           (zen-components/ZenEmojies.mjs)
-        content/browser/zen-components/ZenWelcome.mjs           (zen-components/ZenWelcome.mjs)

        content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
        content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -40,28 +40,28 @@
        content/browser/zen-styles/zen-glance.css               (content/zen-styles/zen-glance.css)
        content/browser/zen-styles/zen-browser-container.css    (content/zen-styles/zen-browser-container.css)
        content/browser/zen-styles/zen-workspaces.css           (content/zen-styles/zen-workspaces.css)
+        content/browser/zen-styles/zen-profile-dialog.css       (content/zen-styles/zen-profile-dialog.css)
        content/browser/zen-styles/zen-urlbar.css               (content/zen-styles/zen-urlbar.css)
        content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
        content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
        content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
        content/browser/zen-styles/zen-rices.css                (content/zen-styles/zen-rices.css)
        content/browser/zen-styles/zen-branding.css             (content/zen-styles/zen-branding.css)
-        content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)

        content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
        content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
        content/browser/zen-styles/zen-panels/print.css         (content/zen-styles/zen-panels/print.css)
-        content/browser/zen-styles/zen-panels/dialog.css        (content/zen-styles/zen-panels/dialog.css)
+        content/browser/zen-styles/zen-panels/welcome.css       (content/zen-styles/zen-panels/welcome.css)

 *       content/browser/zen-styles/zen-compact-mode.css         (content/zen-styles/zen-compact-mode.css)

        # Images
        content/browser/zen-images/gradient.png                 (content/zen-images/gradient.png)
+        content/browser/zen-images/gradient-display.png         (content/zen-images/gradient-display.png)
        content/browser/zen-images/brand-header.svg             (content/zen-images/brand-header.svg)
        content/browser/zen-images/layouts/collapsed.png        (content/zen-images/layouts/collapsed.png)
        content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
        content/browser/zen-images/layouts/single-toolbar.png   (content/zen-images/layouts/single-toolbar.png)
-        content/browser/zen-images/grain-bg.png                 (content/zen-images/grain-bg.png)

        # Actors
        content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
@@ -75,4 +75,6 @@

        # JS Vendor
        content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
-        content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
+        content/browser/zen-vendor/motion.min.mjs                     (content/zen-vendor/motion.min.mjs)
+        content/browser/zen-vendor/css-houdini-squircle.min.mjs       (content/zen-vendor/css-houdini-squircle.min.mjs)
+        content/browser/zen-vendor/css-paint-polyfill.min.mjs         (content/zen-vendor/css-paint-polyfill.min.mjs)
--- a/src/browser/base/content/zen-avatars/.gitignore
+++ b/src/browser/base/content/zen-avatars/.gitignore
@@ -0,0 +1,2 @@
+# TODO: should they be included in the repo?
+# *.svg
--- a/src/browser/base/content/zen-avatars/README.md
+++ b/src/browser/base/content/zen-avatars/README.md
@@ -0,0 +1,15 @@
+# Zen's Avatars
+
+All avatars are fetched from [boring avatars](https://boringavatars.com/). Thanks a lot! <3
+
+# Downloading avatars
+
+Go directly to the `content/zen-avatars` folder (where this README is located) and execute the following script:
+
+```
+python3 fetch-all-avatars.py
+```
+
+# Notes
+
+100 (0-99) avatars will be created and that's what the browser will handle. If you want to add more avatars, you can modify the `fetch-all-avatars.py` script and the browser's code to handle more avatars.
--- a/src/browser/base/content/zen-avatars/avatar-0-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-0-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="10" fill="#232226" transform="translate(6 -6) rotate(236 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 -12) rotate(112 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-0-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-0-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="10" fill="#DCD7C2" transform="translate(6 -6) rotate(236 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 -12) rotate(112 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-1-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-1-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#5E9188"></rect><rect x="10" y="30" width="80" height="80" fill="#3E5954" transform="translate(-8 -8) rotate(222 40 40)"></rect><circle cx="40" cy="40" fill="#253342" r="16" transform="translate(9 -9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#232226" transform="translate(-4 4) rotate(84 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-1-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-1-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFC1B2"></rect><rect x="10" y="30" width="80" height="80" fill="#FFDBC8" transform="translate(-8 -8) rotate(222 40 40)"></rect><circle cx="40" cy="40" fill="#FFF6C7" r="16" transform="translate(9 -9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DCD7C2" transform="translate(-4 4) rotate(84 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-10-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-10-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="80" fill="#253342" transform="translate(16 -16) rotate(214 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 8) rotate(68 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-10-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-10-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="80" fill="#FFF6C7" transform="translate(16 -16) rotate(214 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 8) rotate(68 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-11-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-11-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="80" fill="#232226" transform="translate(20 20) rotate(276 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 12) rotate(192 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-11-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-11-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="80" fill="#DCD7C2" transform="translate(20 20) rotate(276 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 12) rotate(192 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-12-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-12-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(0 0) rotate(88 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(18 -18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(176 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-12-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-12-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(0 0) rotate(88 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(18 -18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(176 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-13-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-13-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="10" fill="#253342" transform="translate(-10 10) rotate(64 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 -8) rotate(128 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-13-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-13-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="10" fill="#FFF6C7" transform="translate(-10 10) rotate(64 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 -8) rotate(128 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-14-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-14-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="80" fill="#232226" transform="translate(-20 20) rotate(106 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(9 -9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 12) rotate(212 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-14-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-14-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="80" fill="#DCD7C2" transform="translate(-20 20) rotate(106 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(9 -9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 12) rotate(212 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-15-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-15-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(0 0) rotate(28 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 16) rotate(56 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-15-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-15-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(0 0) rotate(28 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 16) rotate(56 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-16-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-16-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="10" fill="#253342" transform="translate(-20 20) rotate(184 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(18 18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 -8) rotate(8 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-16-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-16-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="10" fill="#FFF6C7" transform="translate(-20 20) rotate(184 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(18 18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 -8) rotate(8 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-17-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-17-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="10" fill="#DDDDDD" transform="translate(-14 -14) rotate(68 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-9 9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(136 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-17-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-17-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="10" fill="#9D9382" transform="translate(-14 -14) rotate(68 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-9 9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(136 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-18-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-18-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="10" fill="#253342" transform="translate(14 -14) rotate(14 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 8) rotate(28 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-18-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-18-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="10" fill="#FFF6C7" transform="translate(14 -14) rotate(14 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 8) rotate(28 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-19-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-19-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="10" fill="#DDDDDD" transform="translate(14 14) rotate(218 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 16) rotate(76 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-19-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-19-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="10" fill="#9D9382" transform="translate(14 14) rotate(218 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 16) rotate(76 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-2-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-2-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(-14 14) rotate(228 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(96 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-2-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-2-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(-14 14) rotate(228 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(96 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-20-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-20-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="80" fill="#5E9188" transform="translate(0 0) rotate(20 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(12 -12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(40 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-20-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-20-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="80" fill="#FFC1B2" transform="translate(0 0) rotate(20 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(12 -12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(40 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-21-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-21-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="10" fill="#DDDDDD" transform="translate(16 16) rotate(158 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 16) rotate(316 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-21-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-21-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="10" fill="#9D9382" transform="translate(16 16) rotate(158 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 16) rotate(316 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-22-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-22-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="10" fill="#5E9188" transform="translate(16 -16) rotate(70 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(-3 3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(140 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-22-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-22-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="10" fill="#FFC1B2" transform="translate(16 -16) rotate(70 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(-3 3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(140 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-23-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-23-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="10" fill="#5E9188" transform="translate(4 -4) rotate(90 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(180 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-23-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-23-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="10" fill="#FFC1B2" transform="translate(4 -4) rotate(90 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(180 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-24-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-24-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="10" fill="#5E9188" transform="translate(-6 6) rotate(340 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(320 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-24-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-24-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="10" fill="#FFC1B2" transform="translate(-6 6) rotate(340 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(320 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-25-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-25-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="80" fill="#5E9188" transform="translate(-2 2) rotate(140 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(280 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-25-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-25-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="80" fill="#FFC1B2" transform="translate(-2 2) rotate(140 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(280 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-26-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-26-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#5E9188"></rect><rect x="10" y="30" width="80" height="10" fill="#3E5954" transform="translate(0 0) rotate(232 40 40)"></rect><circle cx="40" cy="40" fill="#253342" r="16" transform="translate(-15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#232226" transform="translate(-4 4) rotate(104 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-26-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-26-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFC1B2"></rect><rect x="10" y="30" width="80" height="10" fill="#FFDBC8" transform="translate(0 0) rotate(232 40 40)"></rect><circle cx="40" cy="40" fill="#FFF6C7" r="16" transform="translate(-15 15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DCD7C2" transform="translate(-4 4) rotate(104 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-27-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-27-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#5E9188"></rect><rect x="10" y="30" width="80" height="80" fill="#3E5954" transform="translate(-12 12) rotate(142 40 40)"></rect><circle cx="40" cy="40" fill="#253342" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#232226" transform="translate(-4 -4) rotate(284 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-27-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-27-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFC1B2"></rect><rect x="10" y="30" width="80" height="80" fill="#FFDBC8" transform="translate(-12 12) rotate(142 40 40)"></rect><circle cx="40" cy="40" fill="#FFF6C7" r="16" transform="translate(0 0)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DCD7C2" transform="translate(-4 -4) rotate(284 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-28-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-28-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="80" fill="#253342" transform="translate(0 0) rotate(354 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(3 3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 -8) rotate(348 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-28-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-28-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="80" fill="#FFF6C7" transform="translate(0 0) rotate(354 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(3 3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 -8) rotate(348 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-29-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-29-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="10" fill="#DDDDDD" transform="translate(2 2) rotate(58 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-9 9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(116 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-29-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-29-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="10" fill="#9D9382" transform="translate(2 2) rotate(58 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-9 9)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(116 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-3-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-3-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DDDDDD"></rect><rect x="10" y="30" width="80" height="80" fill="#5E9188" transform="translate(-20 -20) rotate(60 40 40)"></rect><circle cx="40" cy="40" fill="#3E5954" r="16" transform="translate(18 -18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#253342" transform="translate(0 0) rotate(120 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-3-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-3-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#9D9382"></rect><rect x="10" y="30" width="80" height="80" fill="#FFC1B2" transform="translate(-20 -20) rotate(60 40 40)"></rect><circle cx="40" cy="40" fill="#FFDBC8" r="16" transform="translate(18 -18)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFF6C7" transform="translate(0 0) rotate(120 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-30-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-30-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="10" fill="#232226" transform="translate(-16 16) rotate(146 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 12) rotate(292 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-30-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-30-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="10" fill="#DCD7C2" transform="translate(-16 16) rotate(146 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 12) rotate(292 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-31-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-31-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(-14 -14) rotate(248 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(136 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-31-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-31-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(-14 -14) rotate(248 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(136 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-32-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-32-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(0 0) rotate(98 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 16) rotate(196 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-32-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-32-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(0 0) rotate(98 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-15 -15)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 16) rotate(196 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-33-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-33-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#5E9188"></rect><rect x="10" y="30" width="80" height="10" fill="#3E5954" transform="translate(0 0) rotate(122 40 40)"></rect><circle cx="40" cy="40" fill="#253342" r="16" transform="translate(-6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#232226" transform="translate(-4 4) rotate(244 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-33-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-33-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFC1B2"></rect><rect x="10" y="30" width="80" height="10" fill="#FFDBC8" transform="translate(0 0) rotate(122 40 40)"></rect><circle cx="40" cy="40" fill="#FFF6C7" r="16" transform="translate(-6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DCD7C2" transform="translate(-4 4) rotate(244 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-34-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-34-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="80" fill="#253342" transform="translate(2 2) rotate(114 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 8) rotate(228 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-34-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-34-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="80" fill="#FFF6C7" transform="translate(2 2) rotate(114 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 8) rotate(228 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-35-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-35-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="10" fill="#DDDDDD" transform="translate(-4 4) rotate(188 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(-12 -12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 -16) rotate(16 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-35-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-35-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="10" fill="#9D9382" transform="translate(-4 4) rotate(188 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(-12 -12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 -16) rotate(16 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-36-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-36-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="10" fill="#232226" transform="translate(10 -10) rotate(196 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 12) rotate(32 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-36-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-36-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="10" fill="#DCD7C2" transform="translate(10 -10) rotate(196 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 12) rotate(32 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-37-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-37-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="80" fill="#253342" transform="translate(8 -8) rotate(194 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 8) rotate(28 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-37-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-37-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="80" fill="#FFF6C7" transform="translate(8 -8) rotate(194 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 8) rotate(28 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-38-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-38-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#5E9188"></rect><rect x="10" y="30" width="80" height="80" fill="#3E5954" transform="translate(20 -20) rotate(352 40 40)"></rect><circle cx="40" cy="40" fill="#253342" r="16" transform="translate(-3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#232226" transform="translate(-4 -4) rotate(344 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-38-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-38-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFC1B2"></rect><rect x="10" y="30" width="80" height="80" fill="#FFDBC8" transform="translate(20 -20) rotate(352 40 40)"></rect><circle cx="40" cy="40" fill="#FFF6C7" r="16" transform="translate(-3 -3)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DCD7C2" transform="translate(-4 -4) rotate(344 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-39-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-39-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#3E5954"></rect><rect x="10" y="30" width="80" height="10" fill="#253342" transform="translate(-6 -6) rotate(244 40 40)"></rect><circle cx="40" cy="40" fill="#232226" r="16" transform="translate(-6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#DDDDDD" transform="translate(-8 -8) rotate(128 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-39-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-39-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFDBC8"></rect><rect x="10" y="30" width="80" height="10" fill="#FFF6C7" transform="translate(-6 -6) rotate(244 40 40)"></rect><circle cx="40" cy="40" fill="#DCD7C2" r="16" transform="translate(-6 6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#9D9382" transform="translate(-8 -8) rotate(128 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-4-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-4-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#232226"></rect><rect x="10" y="30" width="80" height="80" fill="#DDDDDD" transform="translate(-18 18) rotate(8 40 40)"></rect><circle cx="40" cy="40" fill="#5E9188" r="16" transform="translate(6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#3E5954" transform="translate(16 16) rotate(16 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-4-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-4-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#DCD7C2"></rect><rect x="10" y="30" width="80" height="80" fill="#9D9382" transform="translate(-18 18) rotate(8 40 40)"></rect><circle cx="40" cy="40" fill="#FFC1B2" r="16" transform="translate(6 -6)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFDBC8" transform="translate(16 16) rotate(16 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-40-dark.svg
+++ b/src/browser/base/content/zen-avatars/avatar-40-dark.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#253342"></rect><rect x="10" y="30" width="80" height="10" fill="#232226" transform="translate(0 0) rotate(336 40 40)"></rect><circle cx="40" cy="40" fill="#DDDDDD" r="16" transform="translate(-12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#5E9188" transform="translate(12 -12) rotate(312 40 40)"></line></g></svg>
--- a/src/browser/base/content/zen-avatars/avatar-40-light.svg
+++ b/src/browser/base/content/zen-avatars/avatar-40-light.svg
@@ -0,0 +1,6 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg viewBox="0 0 80 80" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80"><rect width="80" height="80" rx="160" fill="#FFFFFF"></rect></mask><g mask="url(#mask__bauhaus)"><rect width="80" height="80" fill="#FFF6C7"></rect><rect x="10" y="30" width="80" height="10" fill="#DCD7C2" transform="translate(0 0) rotate(336 40 40)"></rect><circle cx="40" cy="40" fill="#9D9382" r="16" transform="translate(-12 12)"></circle><line x1="0" y1="40" x2="80" y2="40" stroke-width="2" stroke="#FFC1B2" transform="translate(12 -12) rotate(312 40 40)"></line></g></svg>
--- a/Show More
+++ b/Show More