chore: Rewrite motion to animejs, b=no-bug, c=common, compact-mode, glance, media, split-view, vendor, welcome, workspaces

2025-12-24 07:08:52 +00:00 · 2025-06-24 18:43:12 +02:00
80 changed files with 631 additions and 730 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+patreon: zen_browser
+ko_fi: zen_browser
--- a/README.md
+++ b/README.md
@@ -29,8 +29,8 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne

 ### Firefox Versions

- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `140.0.2`! 🚀
- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 140.0.2`!
+- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `139.0.4`! 🚀
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 140.0`!

 ### Contributing

--- a/build/firefox-cache/l10n-last-commit-hash
+++ b/build/firefox-cache/l10n-last-commit-hash
@@ -1 +1 @@
-d5e5ed08dac5a263dbc7784dff272198b17bbc4f
+667950575bde54b8d83db2a25ccf468522d4e0c9
--- a/docs/contribute.md
+++ b/docs/contribute.md
@@ -17,10 +17,6 @@ The `dev` branch is the main branch of the repository, and it is the default bra

 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.

-# Local Development Setup
-
-Before you set up your local development environment, **read our [Building Guidelines](https://docs.zen-browser.app/guides/building)**. Skipping them can lead to avoidable build errors.
-
 # Code Of Conduct

 Please read our [Code of Conduct](../CODE_OF_CONDUCT.md) before contributing.
--- a/src/browser/app/profile/ai.inc
+++ b/src/browser/app/profile/ai.inc
@@ -1,6 +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/.
+// 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/.

 pref("browser.ml.chat.enabled", false);
 pref("browser.ml.chat.shortcuts", false);
--- a/src/browser/app/profile/browser.inc
+++ b/src/browser/app/profile/browser.inc
@@ -1,13 +1,14 @@

-# 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/.
+// 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/.

 // Restore session on startup
 pref("browser.startup.page", 3);
 pref("browser.sessionstore.restore_pinned_tabs_on_demand", true);

 // Toolbars
+pref("browser.tabs.closeWindowWithLastTab", false);
 pref("browser.tabs.loadBookmarksInTabs", false);
 pref("browser.tabs.hoverPreview.enabled", false);
 pref("browser.tabs.dragdrop.moveOverThresholdPercent", 50);
--- a/src/browser/app/profile/disablemozilla.inc
+++ b/src/browser/app/profile/disablemozilla.inc
@@ -1,6 +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/.
+// 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/.

 // Common UI changes
 pref("browser.privatebrowsing.vpnpromourl", "", locked);
--- a/src/browser/app/profile/extensions.inc
+++ b/src/browser/app/profile/extensions.inc
@@ -1,6 +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/.
+// 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/.

 // security: They must enable this themselves, to avoid people downloading malware
 pref('xpinstall.signatures.required', true);
--- a/src/browser/app/profile/features.inc
+++ b/src/browser/app/profile/features.inc
@@ -1,6 +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/.
+// 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/.

 #ifdef MOZILLA_OFFICIAL
  pref('zen.welcome-screen.seen', false, sticky);
--- a/src/browser/app/profile/features/compact-mode.inc
+++ b/src/browser/app/profile/features/compact-mode.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
--- a/src/browser/app/profile/features/downloads.inc
+++ b/src/browser/app/profile/features/downloads.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.downloads.download-animation', true);
 pref('zen.downloads.download-animation-duration', 1000); // ms
--- a/src/browser/app/profile/features/glance.inc
+++ b/src/browser/app/profile/features/glance.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.glance.enabled', true);
 pref('zen.glance.enable-contextmenu-search', true);
--- a/src/browser/app/profile/features/kbs.inc
+++ b/src/browser/app/profile/features/kbs.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.keyboard.shortcuts.enabled', true);
 pref('zen.keyboard.shortcuts.version', 0); // Empty string means default shortcuts
--- a/src/browser/app/profile/features/mods.inc
+++ b/src/browser/app/profile/features/mods.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.mods.updated-value-observer', false);

--- a/src/browser/app/profile/features/split-view.inc
+++ b/src/browser/app/profile/features/split-view.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.splitView.enable-tab-drop', true);
 pref('zen.splitView.min-resize-width', 7);
--- a/src/browser/app/profile/features/theme.inc
+++ b/src/browser/app/profile/features/theme.inc
@@ -1,12 +1,13 @@
-# 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/.
+// 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/.

 pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 8); // In pixels
 pref('zen.theme.gradient', true);
 pref('zen.theme.gradient.show-custom-colors', false);
 pref('zen.theme.essentials-favicon-bg', true);
+pref('zen.theme.window.scheme', 'auto'); // auto, light, dark

 #ifdef XP_MACOSX
  pref('zen.theme.border-radius', 10); // In pixels
@@ -20,5 +21,3 @@ pref('zen.theme.essentials-favicon-bg', true);
  pref('zen.theme.acrylic-elements', false);
 #endif

-# Light weight themes
-pref('zen.theme.disable-lightweight', true);
--- a/src/browser/app/profile/features/urlbar.inc
+++ b/src/browser/app/profile/features/urlbar.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.urlbar.replace-newtab', true);
 pref('zen.urlbar.show-protections-icon', false);
--- a/src/browser/app/profile/features/view.inc
+++ b/src/browser/app/profile/features/view.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.view.sidebar-height-throttle', 0); // in ms
 pref('zen.view.sidebar-expanded.max-width', 500);
@@ -15,15 +15,14 @@ pref('zen.view.sidebar-expanded', true);
 pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 pref('zen.view.experimental-force-window-controls-left', false);

+#ifdef XP_MACOSX
+  pref('zen.view.grey-out-inactive-windows', false);
+#else
+  pref('zen.view.grey-out-inactive-windows', true);
+#endif
+
 pref('zen.view.hide-window-controls', true);
 pref('zen.view.experimental-no-window-controls', false);

-pref('zen.view.grey-out-inactive-windows', true);
-
 pref('zen.view.show-newtab-button-border-top', false);
 pref('zen.view.show-newtab-button-top', true);
-
-# 0: Dark
-# 1: Light
-# 2: Auto (system color scheme unless overridden by browser theme)
-pref('zen.view.window.scheme', 2); // auto, light, dark
--- a/src/browser/app/profile/features/workspaces.inc
+++ b/src/browser/app/profile/features/workspaces.inc
@@ -1,6 +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/.
+// 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/.

 pref('zen.workspaces.continue-where-left-off', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
@@ -11,7 +11,7 @@ pref('zen.workspaces.wrap-around-navigation', true);
 pref('zen.workspaces.natural-scroll', false);
 pref('zen.workspaces.scroll-modifier-key','ctrl'); // can be ctrl, alt, shift, or a meta key
 pref('services.sync.engine.workspaces', false);
-pref('zen.workspaces.separate-essentials', true);
+pref('zen.workspaces.container-specific-essentials-enabled', false);

 #ifdef MOZILLA_OFFICIAL
  pref('zen.workspaces.debug', false);
@@ -19,7 +19,7 @@ pref('zen.workspaces.separate-essentials', true);
  pref('zen.workspaces.debug', true);
 #endif

-# Section: Pinned tabs management
+// Section: Pinned tabs management
 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');
--- a/src/browser/app/profile/fullscreen.inc
+++ b/src/browser/app/profile/fullscreen.inc
@@ -1,6 +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/.
+// 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/.

 pref("full-screen-api.transition-duration.enter", "0 0");
 pref("full-screen-api.transition-duration.leave", "0 0");
--- a/src/browser/app/profile/linux.inc
+++ b/src/browser/app/profile/linux.inc
@@ -1,6 +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/.
+// 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/.

 pref("widget.gtk.rounded-bottom-corners.enabled", true);

--- a/src/browser/app/profile/macos.inc
+++ b/src/browser/app/profile/macos.inc
@@ -1,14 +1,14 @@
-# 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/.
+// 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/.

-# Enable transparent background for macos
+// Enable transparent background for macos
 pref('widget.macos.sidebar-blend-mode.behind-window', true);
-# 1. hudWindow
-# 2. fullScreenUI
-# 3. popover
-# 4. menu
-# 5. toolTip
-# 6. headerView
-# 7. underlay
+// 1. hudWindow
+// 2. fullScreenUI
+// 3. popover
+// 4. menu
+// 5. toolTip
+// 6. headerView
+// 7. underlay
 pref('zen.widget.macos.window-material', 1);
--- a/src/browser/app/profile/media.inc
+++ b/src/browser/app/profile/media.inc
@@ -1,6 +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/.
+// 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/.

 pref('image.jxl.enabled', true, locked);
 pref("svg.context-properties.content.enabled", true);
--- a/src/browser/app/profile/newtab.inc
+++ b/src/browser/app/profile/newtab.inc
@@ -1,6 +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/.
+// 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/.

 pref('browser.newtabpage.activity-stream.feeds.topsites', false);
 pref('browser.newtabpage.activity-stream.feeds.section.topstories', false);
--- a/src/browser/app/profile/pdf.inc
+++ b/src/browser/app/profile/pdf.inc
@@ -1,6 +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/.
+// 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/.

 pref('pdfjs.enableHighlightEditor', true);
 pref('pdfjs.enableHighlightFloatingButton', true);
--- a/src/browser/app/profile/performance.inc
+++ b/src/browser/app/profile/performance.inc
@@ -1,17 +1,17 @@
-# 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/.
+// 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/.

 #ifdef XP_MACOSX
-# Pref to control the reponse taken on macOS when the OS is under memory
-# pressure. Changes to the pref take effect immediately. Browser restart not
-# required. The pref value is a bitmask:
-# 0x0: No response (other than recording for telemetry, crash reporting)
-# 0x1: Use the tab unloading feature to reduce memory use. Requires that
-#      the above "browser.tabs.unloadOnLowMemory" pref be set to true for tab
-#      unloading to occur.
-# 0x2: Issue the internal "memory-pressure" notification to reduce memory use
-# 0x3: Both 0x1 and 0x2.
+  // Pref to control the reponse taken on macOS when the OS is under memory
+  // pressure. Changes to the pref take effect immediately. Browser restart not
+  // required. The pref value is a bitmask:
+  // 0x0: No response (other than recording for telemetry, crash reporting)
+  // 0x1: Use the tab unloading feature to reduce memory use. Requires that
+  //      the above "browser.tabs.unloadOnLowMemory" pref be set to true for tab
+  //      unloading to occur.
+  // 0x2: Issue the internal "memory-pressure" notification to reduce memory use
+  // 0x3: Both 0x1 and 0x2.
  pref("browser.lowMemoryResponseMask", 3);
 #endif

--- a/src/browser/app/profile/pip.inc
+++ b/src/browser/app/profile/pip.inc
@@ -1,7 +1,7 @@
-# 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/.
+// 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/.

 pref("media.videocontrols.picture-in-picture.video-toggle.enabled", true);
-# TODO: Enable once we have a proper settings page
+// TODO: Enable once we have a proper settings page
 pref("media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled", false);
--- a/src/browser/app/profile/privacy.inc
+++ b/src/browser/app/profile/privacy.inc
@@ -1,6 +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/.
+// 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/.

 pref("datareporting.policy.dataSubmissionEnabled", false, locked);
 pref("datareporting.healthreport.uploadEnabled", false, locked);
@@ -25,23 +25,23 @@ pref("app.shield.optoutstudies.enabled", false, locked);
 pref("app.normandy.enabled", false);
 pref("app.normandy.api_url", "", locked);

-# Crash reports
+// Crash reports
 pref("breakpad.reportURL", "");
 pref("browser.tabs.crashReporting.sendReport", false);
 pref("browser.crashReports.unsubmittedCheck.autoSubmit2", false);

-# Other privacy
+// Other privacy
 pref("extensions.getAddons.cache.enabled", false);

-# Disable cache for private browsing
+// Disable cache for private browsing
 pref("browser.privatebrowsing.forceMediaMemoryCache", true);

-# Tracking protection
+// Tracking protection
 pref("browser.helperApps.deleteTempFileOnExit", true);
 pref("browser.uitour.enabled", false);

 pref("privacy.globalprivacycontrol.enabled", true);

-# Contextual identity
+// Contextual identity
 pref('privacy.userContext.enabled', true);
 pref('privacy.userContext.ui.enabled', true);
--- a/src/browser/app/profile/smoothscroll.inc
+++ b/src/browser/app/profile/smoothscroll.inc
@@ -1,6 +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/.
+// 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/.

 pref("general.smoothScroll.msdPhysics.enabled", true);
 pref("general.smoothScroll.currentVelocityWeighting", "0.15");
--- a/src/browser/app/profile/urlbar.inc
+++ b/src/browser/app/profile/urlbar.inc
@@ -1,6 +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/.
+// 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/.

 pref('browser.urlbar.unitConversion.enabled', true);
 pref('browser.urlbar.trending.featureGate', false);
@@ -12,10 +12,10 @@ pref('browser.urlbar.suggest.calculator', true);
 pref("browser.urlbar.trimHttps", true);
 pref("browser.urlbar.untrimOnUserInteraction.featureGate", true);

-# Keep in sync with browser/components/topsites/constants.mjs
+// Keep in sync with browser/components/topsites/constants.mjs
 pref("browser.urlbar.maxRichResults", 7);

-# Enable private suggestions
+// Enable private suggestions
 pref('browser.search.suggest.enabled', false);
 pref('browser.search.suggest.enabled.private', false);

--- a/src/browser/app/profile/windows.inc
+++ b/src/browser/app/profile/windows.inc
@@ -1,8 +1,8 @@
-# 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/.
+// 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/.

-# Mica
+// Mica
 pref("widget.windows.mica", true);
 pref("widget.windows.mica.popups", true);
 pref("widget.windows.mica.toplevel-backdrop", 2);
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -1,6 +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/.
+// 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/.

 #ifdef XP_UNIX
  #ifndef XP_MACOSX
@@ -8,7 +8,7 @@
  #endif
 #endif

-# Dont download the multilingual dictionary
+// Dont download the multilingual dictionary
 pref("intl.multilingual.downloadEnabled", false);

 #ifdef XP_WIN
--- a/src/browser/base/content/aboutDialog-xhtml.patch
+++ b/src/browser/base/content/aboutDialog-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/aboutDialog.xhtml b/browser/base/content/aboutDialog.xhtml
-index c64980810570fcea84e33fdc2d66ac42a79f4e46..aa629ebb38a9aa74048fe3fc759f716fad57d6f3 100644
+index c64980810570fcea84e33fdc2d66ac42a79f4e46..11fe00e84dbac781b3da90abb1251c70bd3b094a 100644
 --- a/browser/base/content/aboutDialog.xhtml
 +++ b/browser/base/content/aboutDialog.xhtml
@@ -102,10 +102,6 @@
@@ -13,13 +13,7 @@ index c64980810570fcea84e33fdc2d66ac42a79f4e46..aa629ebb38a9aa74048fe3fc759f716f
             </vbox>
 #endif
           </hbox>
-@@ -120,26 +116,22 @@
-           <vbox id="experimental" hidden="true">
-             <description class="text-blurb" id="warningDesc" data-l10n-id="warningDesc-version"></description>
-             <description class="text-blurb" id="communityExperimentalDesc" data-l10n-id="community-exp">
-              <label is="text-link" href="https://www.mozilla.org/?utm_source=firefox-browser&#38;utm_medium=firefox-desktop&#38;utm_campaign=about-dialog" data-l10n-name="community-exp-mozillaLink"/>
-+              <label is="text-link" href="https://zen-browser.app/about" data-l10n-name="community-exp-mozillaLink"/>
-               <label is="text-link" useoriginprincipal="true" href="about:credits" data-l10n-name="community-exp-creditsLink"/>
+@@ -125,21 +121,17 @@
             </description>
           </vbox>
           <description class="text-blurb" id="communityDesc" data-l10n-id="community-2">
--- 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 b0b2383453ef771af3eb9260618f1e2e3022eb4e..7c5844582d9adb55c55fb1627a9980cf0e5c110b 100644
+index 352de44dda36e3f6672eb353f42978ede0cd2681..0fde717eaf755526ec65b676c43bd34c6a675934 100644
 --- a/browser/base/content/browser-commands.js
 +++ b/browser/base/content/browser-commands.js
@@ -318,6 +318,10 @@ var BrowserCommands = {
@@ -13,21 +13,18 @@ index b0b2383453ef771af3eb9260618f1e2e3022eb4e..7c5844582d9adb55c55fb1627a9980cf
     // 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
-@@ -402,6 +406,13 @@ var BrowserCommands = {
+@@ -400,6 +404,10 @@ var BrowserCommands = {
       return;
     }
 
 +    if (gBrowser.selectedTab.hasAttribute("zen-empty-tab")) {
-+      if (gZenWorkspaces.shouldCloseWindow()) {
-+        closeWindow(true);
-+      }
 +      return;
 +    }
 +
     // Keyboard shortcuts that would close a tab that is pinned select the first
     // unpinned tab instead.
     if (
-@@ -409,8 +420,8 @@ var BrowserCommands = {
+@@ -407,8 +415,8 @@ var BrowserCommands = {
       (event.ctrlKey || event.metaKey || event.altKey) &&
       gBrowser.selectedTab.pinned
     ) {
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -92,7 +92,7 @@

        # JS Vendor
        content/browser/zen-vendor/tsparticles.confetti.bundle.min.js           (../../zen/vendor/tsparticles.confetti.bundle.min.js)
-        content/browser/zen-vendor/motion.min.mjs                               (../../zen/vendor/motion.min.mjs)
+        content/browser/zen-vendor/animejs.min.mjs                               (../../zen/vendor/animejs.min.mjs)

        # FavIcons for startup
        content/browser/zen-images/favicons/calendar.ico                        (../../zen/images/favicons/calendar.ico)
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -23,60 +23,24 @@
        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-left" class="toolbarbutton-1" disabled="true" />
        <hbox id="PanelUI-zen-gradient-generator-color-pages">
          <hbox>
-            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="240,240" style="background: #f4efdf;"></box>
-            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="233,157" style="background: #f0b8cd;"></box>
-            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="236,111" style="background: #e9c3e3;"></box>
-            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="234,173" style="background: #da7682;"></box>
-            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="220,187" style="background: #eb8570;"></box>
-            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="225,237" style="background: #dcce7f;"></box>
-            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="147,195" style="background: #5becad;"></box>
-            <box data-lightness="50" data-algo="float" data-num-dots="1" data-position="81,84" style="background: #919bb5;"></box>
+            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
+            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
+            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
+            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
+            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
+            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
+            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
+            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
          </hbox>
          <hbox>
-            <box data-lightness="90" data-algo="analogous" data-num-dots="3" data-position="240,240"
-                style="--c1: rgb(245, 237, 214); --c2: rgb(221, 243, 216); --c3: rgb(243, 216, 225);" />
-            <box data-lightness="85" data-algo="analogous" data-num-dots="3" data-position="233,157"
-                style="--c1: rgb(243, 190, 222); --c2: rgb(247, 222, 186); --c3: rgb(223, 195, 238);" />
-            <box data-lightness="80" data-algo="analogous" data-num-dots="3" data-position="236,111"
-                style="--c1: rgb(229, 179, 228); --c2: rgb(236, 172, 178); --c3: rgb(197, 185, 223);" />
-            <box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="234,173"
-                style="--c1: rgb(235, 122, 159); --c2: rgb(239, 239, 118); --c3: rgb(210, 133, 224);" />
-            <box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="220,187"
-                style="--c1: rgb(242, 115, 123); --c2: rgb(175, 242, 115); --c3: rgb(230, 125, 232);" />
-            <box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="225,237"
-                style="--c1: rgb(221, 205, 85); --c2: rgb(97, 212, 94); --c3: rgb(215, 91, 124);" />
-            <box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="147,195"
-                style="--c1: rgb(75, 231, 210); --c2: rgb(84, 175, 222); --c3: rgb(62, 244, 112);" />
-            <box data-lightness="55" data-algo="analogous" data-num-dots="3" data-position="81,84"
-                style="--c1: rgb(122, 132, 158); --c2: rgb(137, 117, 164); --c3: rgb(116, 162, 164);" />
-          </hbox>
-          <hbox>
-            <box data-lightness="10" data-algo="float" data-num-dots="1" data-position="171,72" style="background:rgb(93, 86, 106);"></box>
-            <box data-lightness="40" data-algo="float" data-num-dots="1" data-position="265,79" style="background: #997096;"></box>
-            <box data-lightness="35" data-algo="float" data-num-dots="1" data-position="301,176" style="background: #956066;"></box>
-            <box data-lightness="30" data-algo="float" data-num-dots="1" data-position="237,210" style="background: #9c6645;"></box>
-            <box data-lightness="30" data-algo="float" data-num-dots="1" data-position="91,228" style="background: #517b6c;"></box>
-            <box data-lightness="25" data-algo="float" data-num-dots="1" data-position="67,159" style="background: #576e75;"></box>
-            <box data-lightness="20" data-algo="float" data-num-dots="1" data-position="314,235" style="background:rgb(131, 109, 95);"></box>
-            <box data-lightness="20" data-algo="float" data-num-dots="1" data-position="118,215" style="background: #447464;"></box>
-          </hbox>
-          <hbox>
-            <box data-lightness="10" data-algo="analogous" data-num-dots="3" data-position="171,72"
-                style="--c1: rgb(23, 17, 34); --c2: rgb(37, 14, 35); --c3: rgb(18, 22, 33);" />
-            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="265,79"
-                style="--c1: rgb(128, 76, 124); --c2: rgb(141, 63, 66); --c3: rgb(97, 88, 116);" />
-            <box data-lightness="35" data-algo="analogous" data-num-dots="3" data-position="301,176"
-                style="--c1: rgb(122, 56, 64); --c2: rgb(126, 121, 52); --c3: rgb(111, 68, 110);" />
-            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="237,210"
-                style="--c1: rgb(131, 65, 22); --c2: rgb(64, 128, 25); --c3: rgb(122, 31, 91);" />
-            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="91,228"
-                style="--c1: rgb(45, 108, 85); --c2: rgb(52, 85, 101); --c3: rgb(52, 118, 35);" />
-            <box data-lightness="25" data-algo="analogous" data-num-dots="3" data-position="67,159"
-                style="--c1: rgb(45, 74, 83); --c2: rgb(46, 50, 81); --c3: rgb(38, 90, 65);" />
-            <box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="314,235"
-                style="--c1: rgb(64, 47, 38); --c2: rgb(55, 64, 38); --c3: rgb(59, 43, 52);" />
-            <box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215"
-                style="--c1: rgb(22, 80, 61); --c2: rgb(26, 60, 76); --c3: rgb(27, 87, 15);" />
+            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: red;"></box>
+            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
+            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
+            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
+            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
+            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
+            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
+            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
          </hbox>
        </hbox>
        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
@@ -100,7 +64,7 @@
                </defs>
              </svg>
            </box>
-            <html:input type="range" min="0.3" max="0.8" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity" />
+            <html:input type="range" min="0.15" max="0.85" value="0.5" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
          </vbox>
          <vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
          </vbox>
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -742,13 +742,19 @@ var gZenWorkspacesSettings = {
    };
    Services.prefs.addObserver('zen.tab-unloader.enabled', tabsUnloaderPrefListener);
    Services.prefs.addObserver('zen.glance.enabled', tabsUnloaderPrefListener); // We can use the same listener for both prefs
-    Services.prefs.addObserver('zen.workspaces.separate-essentials', tabsUnloaderPrefListener);
+    Services.prefs.addObserver(
+      'zen.workspaces.container-specific-essentials-enabled',
+      tabsUnloaderPrefListener
+    );
    Services.prefs.addObserver('zen.glance.activation-method', tabsUnloaderPrefListener);
    window.addEventListener('unload', () => {
      Services.prefs.removeObserver('zen.tab-unloader.enabled', tabsUnloaderPrefListener);
      Services.prefs.removeObserver('zen.glance.enabled', tabsUnloaderPrefListener);
      Services.prefs.removeObserver('zen.glance.activation-method', tabsUnloaderPrefListener);
-      Services.prefs.removeObserver('zen.workspaces.separate-essentials', tabsUnloaderPrefListener);
+      Services.prefs.removeObserver(
+        'zen.workspaces.container-specific-essentials-enabled',
+        tabsUnloaderPrefListener
+      );
    });
  },
 };
@@ -981,7 +987,7 @@ var gZenCKSSettings = {
    let input = document.querySelector(
      `.${ZEN_CKS_INPUT_FIELD_CLASS}[${KEYBIND_ATTRIBUTE_KEY}="${this._currentActionID}"]`
    );
-    const modifiers = new nsKeyShortcutModifiers(
+    const modifiers = new KeyShortcutModifiers(
      event.ctrlKey,
      event.altKey,
      event.shiftKey,
@@ -1147,7 +1153,7 @@ Preferences.addAll([
    default: true,
  },
  {
-    id: 'zen.workspaces.separate-essentials',
+    id: 'zen.workspaces.container-specific-essentials-enabled',
    type: 'bool',
    default: false,
  },
--- a/src/browser/components/preferences/zenTabsManagement.inc.xhtml
+++ b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
@@ -47,7 +47,7 @@
                preference="zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url"/>
      <checkbox id="zenPinnedTabContainerSpecificEssentials"
                data-l10n-id="zen-pinned-tab-manager-container-specific-essentials-enabled"
-                preference="zen.workspaces.separate-essentials"/>
+                preference="zen.workspaces.container-specific-essentials-enabled"/>

      <hbox align="center">
            <label id="zenPinnedTabCloseShortcutBehaviorLabel" data-l10n-id="zen-pinned-tab-manager-close-shortcut-behavior-label"/>
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -591,9 +591,7 @@ groupbox h2 {
 #dataCollectionCategory,
 #dataCollectionGroup,
 #websiteAdvertisingCategory,
-#websiteAdvertisingGroup,
-#webAppearanceGroup,
-#helpButton {
+#websiteAdvertisingGroup {
  display: none !important;
 }

--- a/src/browser/themes/shared/tabbrowser/tabs-css.patch
+++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615e8353936 100644
+index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272ede59857 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -19,7 +19,7 @@
@@ -11,19 +11,16 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin));
   --tab-inner-inline-margin: var(--space-medium);
   --tab-inline-padding: 8px;
-@@ -33,9 +33,9 @@
+@@ -33,7 +33,7 @@
   --tab-block-margin: 4px;
   --tab-icon-end-margin: 5.5px;
   --tab-label-line-height: 1.7;
 -  --tab-loading-fill: #0A84FF;
 +  --tab-loading-fill: var(--zen-primary-color);
   --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
-  --tab-selected-textcolor: var(--toolbar-color);
-+  --tab-selected-textcolor: currentColor;
+   --tab-selected-textcolor: var(--toolbar-color);
   --tab-selected-bgcolor: var(--toolbar-bgcolor);
-   --tab-selected-color-scheme: var(--toolbar-color-scheme);
-   &[lwt-tab-selected="light"] {
-@@ -216,8 +216,7 @@
+@@ -211,8 +211,7 @@
   }
 
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] {
@@ -33,7 +30,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   }
 
   #tabbrowser-tabs[movingtab] &:is(:active, [multiselected]) {
-@@ -263,7 +262,6 @@
+@@ -258,7 +257,6 @@
   }
 
   :root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] {
@@ -41,7 +38,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   }
 
   &:is([selected], [multiselected]) {
-@@ -277,6 +275,7 @@
+@@ -272,6 +270,7 @@
     border-radius: inherit;
     position: relative;
     overflow: hidden;
@@ -49,7 +46,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
 
     &::before {
       position: absolute;
-@@ -464,14 +463,11 @@
+@@ -459,14 +458,11 @@
 .tab-icon-image {
   -moz-context-properties: fill, stroke;
   fill: currentColor;
@@ -65,7 +62,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
       opacity: 0.5;
       /* Fade the favicon out */
       transition-property: filter, opacity;
-@@ -488,10 +484,6 @@
+@@ -483,10 +479,6 @@
   /* stylelint-disable-next-line media-query-no-invalid */
   @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") {
     &[pending][discarded] {
@@ -76,7 +73,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
       opacity: 0.5;
       /* Fade the favicon out */
       transition-property: filter, opacity;
-@@ -564,7 +556,7 @@
+@@ -559,7 +551,7 @@
   z-index: 1; /* Overlay tab title */
 
   #tabbrowser-tabs[orient=vertical] & {
@@ -85,7 +82,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   }
 
   &[crashed] {
-@@ -572,7 +564,7 @@
+@@ -567,7 +559,7 @@
   }
 
   #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
@@ -94,7 +91,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
     &[soundplaying] {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
     }
-@@ -602,7 +594,7 @@
+@@ -597,7 +589,7 @@
       background-image: linear-gradient(var(--audio-overlay-extra-background)),
                         linear-gradient(var(--toolbox-bgcolor));
       -moz-context-properties: fill;
@@ -103,7 +100,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
       color-scheme: var(--tab-selected-color-scheme);
       border-radius: var(--border-radius-circle);
 
-@@ -1373,7 +1365,7 @@ tab-group {
+@@ -1365,7 +1357,7 @@ tab-group {
   }
 }
 
@@ -112,7 +109,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
 #vertical-tabs-newtab-button {
   appearance: none;
   min-height: var(--tab-min-height);
-@@ -1384,7 +1376,7 @@ tab-group {
+@@ -1376,7 +1368,7 @@ tab-group {
   margin-inline: var(--tab-inner-inline-margin);
 
   #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
@@ -121,7 +118,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   }
 
   &:hover {
-@@ -1408,7 +1400,7 @@ tab-group {
+@@ -1400,7 +1392,7 @@ tab-group {
  * flex container. #tabs-newtab-button is a child of the arrowscrollbox where
  * we don't want a gap (between tabs), so we have to add some margin.
  */
@@ -130,7 +127,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   margin-block: var(--tab-block-margin);
 }
 
-@@ -1486,8 +1478,6 @@ tab-group {
+@@ -1474,8 +1466,6 @@ tab-group {
   }
 
   :root:not([sidebar-expand-on-hover]) & {
@@ -139,7 +136,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
     /* stylelint-disable-next-line media-query-no-invalid */
     @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
       /* We need these rules to apply at all times when the sidebar.visibility
-@@ -1605,7 +1595,6 @@ tab-group {
+@@ -1585,7 +1575,6 @@ tab-group {
 
   &:not([expanded]) {
     .tabbrowser-tab[pinned] {
@@ -147,7 +144,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
     }
 
     .tab-background {
-@@ -1736,7 +1725,7 @@ tab-group {
+@@ -1716,7 +1705,7 @@ tab-group {
   toolbarbutton:not(#firefox-view-button),
   toolbarpaletteitem:not(#wrapper-firefox-view-button)
 ) ~ #tabbrowser-tabs {
@@ -156,7 +153,7 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
   padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
   margin-inline-start: 2px;
 }
-@@ -1770,7 +1759,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+@@ -1750,7 +1739,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
   list-style-image: url(chrome://global/skin/icons/plus.svg);
 }
 
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -165,7 +165,6 @@

 #add-ons-button,
 #appMenu-extensions-themes-button,
-#appMenu-unified-extensions-button,
 #unified-extensions-button {
  list-style-image: url('extension.svg') !important;
 }
@@ -760,7 +759,7 @@
  border-radius: var(--tab-border-radius);

  &:hover {
-    background: var(--toolbarbutton-hover-background);
+    background: var(--toolbarbutton-active-background);
  }

  & image {
@@ -772,7 +771,7 @@
  list-style-image: url('sparkles.svg');
 }

-@media -moz-pref('zen.view.window.scheme', 2) {
+@media -moz-pref('zen.theme.window.scheme', 'auto') {
  #PanelUI-zen-gradient-generator-scheme-auto {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
@@ -782,7 +781,7 @@
  list-style-image: url('moon-stars.svg');
 }

-@media -moz-pref('zen.view.window.scheme', 0) {
+@media -moz-pref('zen.theme.window.scheme', 'dark') {
  #PanelUI-zen-gradient-generator-scheme-dark {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
@@ -792,7 +791,7 @@
  list-style-image: url('face-sun.svg');
 }

-@media -moz-pref('zen.view.window.scheme', 1) {
+@media -moz-pref('zen.theme.window.scheme', 'light') {
  #PanelUI-zen-gradient-generator-scheme-light {
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  }
--- a/src/modules/libpref/init/zen-static-prefs.inc
+++ b/src/modules/libpref/init/zen-static-prefs.inc
@@ -16,8 +16,3 @@
  type: bool
  value: true
  mirror: always
-
- name: zen.swipe.is-fast-swipe
-  type: bool
-  value: true
-  mirror: always
--- a/src/toolkit/modules/LightweightThemeConsumer-sys-mjs.patch
+++ b/src/toolkit/modules/LightweightThemeConsumer-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
-index fe01b25c520d1be71224b136b1ce46e9577e11a1..e5501590f3695ed4c2e19be5c104958b497c886e 100644
+index d8c79cbae4de3ebfc5dc62f3597c7be4965a5429..4398108bd6d74aa8b6689baaf5334d8ba9a26c4e 100644
 --- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
 +++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
@@ -31,7 +31,7 @@ const toolkitVariableMap = [
@@ -11,12 +11,3 @@ index fe01b25c520d1be71224b136b1ce46e9577e11a1..e5501590f3695ed4c2e19be5c104958b
         }
         // Remove the alpha channel
         const { r, g, b } = rgbaChannels;
-@@ -317,7 +317,7 @@ LightweightThemeConsumer.prototype = {
-     }
- 
-     let theme = useDarkTheme ? themeData.darkTheme : themeData.theme;
-    if (!theme) {
-+    if (!theme || Services.prefs.getBoolPref("zen.theme.disable-lightweight")) {
-       theme = { id: DEFAULT_THEME_ID };
-     }
-     let hasTheme = theme.id != DEFAULT_THEME_ID || useDarkTheme;
--- a/src/widget/SwipeTracker-cpp.patch
+++ b/src/widget/SwipeTracker-cpp.patch
@@ -1,21 +0,0 @@
-diff --git a/widget/SwipeTracker.cpp b/widget/SwipeTracker.cpp
-index b09252fd60beb10d5865d226c39ee0c8a9c22d87..91f68161209c6ca3f3bac22997d4e2066f1fafec 100644
--- a/widget/SwipeTracker.cpp
-+++ b/widget/SwipeTracker.cpp
-@@ -5,6 +5,7 @@
-  * You can obtain one at http://mozilla.org/MPL/2.0/. */
- 
- #include "SwipeTracker.h"
-+#include "mozilla/StaticPrefs_zen.h"
- 
- #include "InputData.h"
- #include "mozilla/FlushType.h"
-@@ -90,7 +91,7 @@ bool SwipeTracker::ComputeSwipeSuccess() const {
- 
-   return (mGestureAmount * targetValue +
-           mCurrentVelocity * targetValue *
-              StaticPrefs::widget_swipe_success_velocity_contribution()) >=
-+              (StaticPrefs::zen_swipe_is_fast_swipe() ? 0.5 : StaticPrefs::widget_swipe_success_velocity_contribution())) >=
-          kSwipeSuccessThreshold;
- }
- 
--- a/src/widget/cocoa/nsCocoaWindow-mm.patch
+++ b/src/widget/cocoa/nsCocoaWindow-mm.patch
@@ -1,5 +1,5 @@
 diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
-index c4627621344d35081f11a7b0e03d02eca2097609..c9e35156b484f1afdecdd7f93b6bf02e25fae09b 100644
+index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598ba6904fde 100644
 --- a/widget/cocoa/nsCocoaWindow.mm
 +++ b/widget/cocoa/nsCocoaWindow.mm
@@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
@@ -7,7 +7,7 @@ index c4627621344d35081f11a7b0e03d02eca2097609..c9e35156b484f1afdecdd7f93b6bf02e
 // Returns an autoreleased NSImage.
 static NSImage* GetMenuMaskImage() {
 -  const CGFloat radius = 6.0f;
-+  const CGFloat radius = 10.0f;
+  const CGFloat radius = 11.0f;
   const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
   NSImage* maskImage = [NSImage imageWithSize:maskSize
                                       flipped:FALSE
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -117,7 +117,7 @@ export var ZenCustomizableUI = new (class {
        window.setTimeout(() => {
          button.removeAttribute('open');
        }, 500);
-        window.gZenUIManager.motion.animate(
+        window.gZenUIManager.anime.animate(
          image,
          { transform: ['rotate(45deg)', 'rotate(0deg)'] },
          { duration: 0.2 }
@@ -125,7 +125,7 @@ export var ZenCustomizableUI = new (class {
      };
      popup.addEventListener('popuphidden', handlePopupHidden, { once: true });
      popup.openPopup(button, 'after_start');
-      window.gZenUIManager.motion.animate(
+      window.gZenUIManager.anime.animate(
        image,
        { transform: ['rotate(0deg)', 'rotate(45deg)'] },
        { duration: 0.2 }
--- a/src/zen/common/ZenStartup.mjs
+++ b/src/zen/common/ZenStartup.mjs
@@ -107,7 +107,7 @@
      document.documentElement.removeAttribute('zen-before-loaded');
      if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
        let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', ');
-        gZenUIManager.motion
+        gZenUIManager.anime
          .animate(
            '#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *',
            {
@@ -115,7 +115,6 @@
            },
            {
              delay: 0.6,
-              easing: 'ease-in-out',
            }
          )
          .then(() => {
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -36,10 +36,51 @@ var gZenUIManager = {

    document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);

-    ChromeUtils.defineLazyGetter(this, 'motion', () => {
-      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', {
-        global: 'current',
-      });
+    ChromeUtils.defineLazyGetter(this, 'anime', () => {
+      // Polyphill in case we need to change library animations again
+      const module = ChromeUtils.importESModule(
+        'chrome://browser/content/zen-vendor/animejs.min.mjs',
+        {
+          global: 'current',
+        }
+      );
+      return {
+        animate: (element, keyframes, options) => {
+          if (options.duration) {
+            options.duration *= 1000; // convert seconds to milliseconds
+          }
+          if (options.delay) {
+            options.delay *= 1000; // convert seconds to milliseconds
+          }
+          delete options.bounce; // anime.js does not support bounce
+          delete options.type; // anime.js does not support type
+          return module.animate(element, {
+            ...keyframes,
+            ...options,
+          });
+        },
+        waapi: (element, keyframes, options) => {
+          if (options.duration) {
+            options.duration *= 1000; // convert seconds to milliseconds
+          }
+          if (options.delay) {
+            options.delay *= 1000; // convert seconds to milliseconds
+          }
+          return module.waapi.animate(element, {
+            ...keyframes,
+            ...options,
+          });
+        },
+        stagger: (delay, {
+          startDelay = 0,
+        } = {}) => {
+          delay *= 1000; // convert seconds to milliseconds
+          startDelay *= 1000; // convert seconds to milliseconds
+          return module.stagger(delay,{
+            start: startDelay,
+          });
+        },
+      };
    });

    ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
@@ -479,7 +520,7 @@ var gZenUIManager = {
    this._toastContainer.removeAttribute('hidden');
    this._toastContainer.appendChild(toast);
    const timeoutFunction = () => {
-      this.motion
+      this.anime
        .animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 })
        .then(() => {
          toast.remove();
@@ -489,7 +530,7 @@ var gZenUIManager = {
        });
    };
    if (reused) {
-      await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
+      await this.anime.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
    } else {
      toast.addEventListener('mouseover', () => {
        if (this._toastTimeouts[messageId]) {
@@ -506,7 +547,7 @@ var gZenUIManager = {
    if (!toast.style.hasOwnProperty('transform')) {
      toast.style.transform = 'scale(0)';
    }
-    await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
+    await this.anime.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
    if (this._toastTimeouts[messageId]) {
      clearTimeout(this._toastTimeouts[messageId]);
    }
@@ -601,7 +642,7 @@ var gZenVerticalTabsManager = {
  },

  animateTab(aTab) {
-    if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
+    if (!gZenUIManager.anime || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
      return;
    }
    // get next visible tab
@@ -613,7 +654,7 @@ var gZenVerticalTabsManager = {
    try {
      const tabSize = aTab.getBoundingClientRect().height;
      const transform = `-${tabSize}px`;
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          aTab,
          {
@@ -635,7 +676,7 @@ var gZenVerticalTabsManager = {
          aTab.style.removeProperty('transform');
          aTab.style.removeProperty('opacity');
        });
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          aTab.querySelector('.tab-content'),
          {
@@ -1060,7 +1101,7 @@ var gZenVerticalTabsManager = {
        }

        // Maybe add some confetti here?!?
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this._tabEdited,
          {
            scale: [1, 0.98, 1],
--- a/src/zen/common/ZenUIMigration.mjs
+++ b/src/zen/common/ZenUIMigration.mjs
@@ -51,12 +51,6 @@ class nsZenUIMigration {
    if (userChromeFile.exists() || userContentFile.exists()) {
      Services.prefs.setBoolPref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
    }
-    Services.prefs.setBoolPref(
-      'zen.workspaces.separate-essentials',
-      Services.prefs.getBoolPref('zen.workspaces.container-specific-essentials-enabled', false)
-    );
-    const theme = Services.prefs.getIntPref('layout.css.prefers-color-scheme.content-override', 0);
-    Services.prefs.setIntPref('zen.view.window.scheme', theme);
  }
 }

--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -11,7 +11,7 @@
 #navigator-toolbox {
  /* see issue #426 */
  background: var(--zen-navigator-toolbox-background, transparent) !important;
-  --inactive-titlebar-opacity: 0.8;
+  --inactive-titlebar-opacity: 1;
 }

 #nav-bar,
@@ -65,12 +65,6 @@
      transition: 0s;
    }

-    @media (-moz-pref('zen.view.grey-out-inactive-windows')) {
-      &:-moz-window-inactive {
-        background: InactiveCaption;
-      }
-    }
-
    &::before {
      background: var(--zen-main-browser-background-old);
      opacity: calc(1 - var(--zen-background-opacity));
@@ -99,9 +93,7 @@
    z-index: 1;
    opacity: var(--zen-grainy-background-opacity, 0);
    mix-blend-mode: overlay;
-    :root:not([swipe-gesture='true']) & {
-      transition: opacity 0.3s ease-in-out;
-    }
+    transition: opacity 0.3s ease-in-out;
  }
 }

@@ -140,6 +132,14 @@
    background: ActiveCaption;
    color: CaptionText;
  }
+
+  @media -moz-pref('zen.view.grey-out-inactive-windows') {
+    transition: background-color var(--inactive-window-transition);
+    &:-moz-window-inactive {
+      background-color: InactiveCaption;
+      color: InactiveCaptionText;
+    }
+  }
 }

 #zen-appcontent-wrapper {
@@ -190,7 +190,6 @@

  @media -moz-pref('zen.widget.mac.mono-window-controls') {
    .titlebar-buttonbox-container {
-      color: var(--toolbox-textcolor);
      /* Draw 3 dots as background to represent the window controls,
        all with the same cololr as the titlebar */
      background-image: radial-gradient(
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -369,6 +369,7 @@ menuseparator {
      var(--zen-primary-color) -40%,
      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
    );
+    color: var(--button-primary-color);
    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    display: flex;
@@ -400,6 +401,7 @@ menuseparator {
      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
      background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
      border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important;
+      color: var(--toolbar-color);

      :root[zen-right-side='true'] & {
        order: -1;
--- a/src/zen/common/styles/zen-single-components.css
+++ b/src/zen/common/styles/zen-single-components.css
@@ -98,27 +98,3 @@ body > #confetti {
    }
  }
 }
-
-.toolbarbutton-1 {
-  :root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true']))
-    #zen-sidebar-top-buttons-customization-target
-    &,
-  #zen-sidebar-foot-buttons & {
-    --tab-border-radius: 4px;
-    --toolbarbutton-border-radius: var(--tab-border-radius);
-    --toolbarbutton-inner-padding: 7px;
-
-    &,
-    & stack {
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  transition:
-    background-color 0.1s,
-    scale 0.2s;
-  &:active {
-    transform: scale(0.98);
-  }
-}
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -44,7 +44,7 @@
    var(--zen-colors-tertiary) 99%
  );

-  --zen-dialog-background: light-dark(var(--zen-colors-tertiary), var(--zen-branding-bg));
+  --zen-dialog-background: var(--zen-colors-tertiary);
  --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%);

  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);
@@ -84,7 +84,7 @@
  --button-bgcolor: var(--in-content-button-background) !important;
  --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
  --button-hover-color: var(--in-content-button-text-color-hover) !important;
-  --focus-outline-color: var(--color-accent-primary) !important;
+  --focus-outline-color: var(--button-bgcolor) !important;

  --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
  --toolbarbutton-icon-fill: currentColor !important;
@@ -117,29 +117,20 @@
  --zen-button-padding: 0.6rem 1.2rem;

  --zen-toolbar-element-bg: light-dark(
-    color-mix(in oklch, var(--toolbox-textcolor) 9%, transparent),
-    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
-  );
+    color-mix(in srgb, currentColor 5%, transparent 5%),
+    color-mix(in srgb, currentColor 10%, transparent 90%)
+  ) !important;

  /* Toolbar */
-  --tab-selected-color-scheme: inherit;
-
  --zen-toolbar-height: 38px;
  --zen-toolbar-button-inner-padding: 6px;
  --toolbarbutton-outer-padding: 4px;

-  --toolbarbutton-inner-padding: 5px !important;
-
-  --toolbarbutton-hover-background: var(--zen-toolbar-element-bg) !important;
-
-  --toolbarbutton-active-background: color-mix(
+  --toolbarbutton-hover-background: color-mix(
    in srgb,
-    var(--zen-branding-bg-reverse) 7%,
-    transparent 93%
-  ) !important;
-
-  --toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important;
-  --toolbox-textcolor-inactive: var(--toolbox-textcolor) !important;
+    var(--zen-branding-bg-reverse) 10%,
+    transparent 90%
+  );

  /* Other colors */
  --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
@@ -162,8 +153,11 @@
  --urlbar-margin-inline: 1px !important;

  --tab-icon-overlay-stroke: light-dark(white, black) !important;
+
  --tab-close-button-padding: 5px !important;

+  --toolbarbutton-active-background: var(--zen-toolbar-element-bg);
+
  --input-bgcolor: var(--zen-colors-tertiary) !important;
  --input-border-color: var(--zen-input-border-color) !important;
  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
@@ -180,7 +174,6 @@
    );
    --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
    --zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important;
-    --toolbox-textcolor: currentColor !important;
  }

  --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
@@ -192,7 +185,11 @@
  --zen-active-tab-scale: 0.98;

  /* Define tab hover background color */
-  --tab-hover-background-color: var(--toolbarbutton-hover-background);
+  --tab-hover-background-color: color-mix(
+    in srgb,
+    var(--toolbarbutton-hover-background) 50%,
+    transparent 50%
+  );

  /* Nativity */
  --zen-native-content-radius: var(--zen-border-radius);
@@ -225,37 +222,46 @@
 #main-window:not([chromehidden~='toolbar']) {
  min-height: 495px !important;

-  @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency')) {
+  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
-    @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
-      --zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
+    &[zen-should-be-dark-mode] {
+      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
+    }
+  }
+
+  @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
+    background: transparent;
+    --zen-themed-toolbar-bg-transparent: transparent;
+    &[zen-should-be-dark-mode] {
+      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
    }
  }

  &[zen-should-be-dark-mode='true'] #browser {
    color-scheme: dark;
+    --tab-selected-color-scheme: dark;
  }

  &[zen-should-be-dark-mode='false'] #browser {
    color-scheme: light;
+    --tab-selected-color-scheme: light;
  }

  &,
+  & #tabbrowser-tabpanels,
  & panel,
  & menupopup,
-  & #zen-browser-background,
-  & #urlbar[breakout-extend='true'],
-  & #tabbrowser-tabpanels browser[type='content'] {
-    @media -moz-pref('zen.view.window.scheme', 0) {
+  & #zen-browser-background {
+    @media -moz-pref('zen.theme.window.scheme', 'dark') {
      color-scheme: dark;
    }

-    @media -moz-pref('zen.view.window.scheme', 1) {
+    @media -moz-pref('zen.theme.window.scheme', 'light') {
      color-scheme: light;
    }

-    @media -moz-pref('zen.view.window.scheme', 2) {
+    @media -moz-pref('zen.theme.window.scheme', 'auto') {
      color-scheme: light;
      @media (-moz-system-dark-theme) {
        color-scheme: dark;
@@ -268,33 +274,34 @@
  :host(:is(.anonymous-content-host, notification-message)),
  :root {
    --zen-in-content-dialog-background: var(--zen-branding-bg);
+    --zen-dark-color-mix-base: var(--zen-branding-bg);
    --zen-colors-primary: color-mix(
      in srgb,
      var(--zen-primary-color) 20%,
-      var(--zen-branding-bg) 80%
+      var(--zen-dark-color-mix-base) 80%
    );
    --zen-colors-secondary: color-mix(
      in srgb,
      var(--zen-primary-color) 30%,
-      var(--zen-branding-bg) 70%
+      var(--zen-dark-color-mix-base) 70%
    );
    --zen-colors-tertiary: color-mix(
      in srgb,
      var(--zen-primary-color) 1%,
-      var(--zen-branding-bg) 99%
+      var(--zen-dark-color-mix-base) 99%
    );

    --zen-colors-hover-bg: color-mix(
      in srgb,
      var(--zen-primary-color) 90%,
-      var(--zen-branding-bg) 10%
+      var(--zen-dark-color-mix-base) 10%
    );
    --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);

    --zen-colors-input-bg: color-mix(
      in srgb,
      var(--zen-primary-color) 1%,
-      var(--zen-branding-bg) 99%
+      var(--zen-dark-color-mix-base) 99%
    );
    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
    --zen-colors-border-contrast: color-mix(
@@ -303,12 +310,13 @@
      rgba(255, 255, 255, 0.11) 90%
    );

+    --zen-dialog-background: var(--zen-dark-color-mix-base);
    --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);

    --zen-browser-gradient-base: color-mix(
      in srgb,
      var(--zen-primary-color) 30%,
-      var(--zen-branding-bg) 70%
+      var(--zen-dark-color-mix-base) 70%
    );
  }
 }
--- a/src/zen/common/styles/zen-urlbar.css
+++ b/src/zen/common/styles/zen-urlbar.css
@@ -17,7 +17,7 @@
 }

 #urlbar {
-  --urlbarView-separator-color: light-dark(hsl(0, 0%, 74.9%), hsl(0, 0%, 20%));
+  --urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
  --urlbarView-hover-background: var(--toolbarbutton-hover-background);
  --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
  border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
@@ -66,7 +66,7 @@
  }

  &:hover #urlbar-background {
-    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
+    background-color: light-dark(rgba(89, 89, 89, 0.15), rgba(255, 255, 255, 0.2)) !important;
  }
 }

@@ -162,10 +162,9 @@
  }

  & #urlbar-background {
-    --zen-urlbar-background-base: color-mix(
-      in srgb,
-      light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 5%)) 80%,
-      var(--zen-colors-primary) 20%
+    --zen-urlbar-background-base: light-dark(
+      hsl(0, 0%, 100%),
+      color-mix(in srgb, hsl(0, 0%, 5%) 80%, var(--zen-colors-primary) 20%)
    );
    @media -moz-pref('zen.theme.acrylic-elements') {
      --zen-urlbar-background-transparent: color-mix(
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -209,7 +209,7 @@ var gZenCompactModeManager = {
  // the caller is from the ResizeObserver
  getAndApplySidebarWidth(event = undefined) {
    if (this._ignoreNextResize) {
-      delete this._ignoreNextResize;
+      this._ignoreNextResize = false;
      return;
    }
    let sidebarWidth = this.sidebar.getBoundingClientRect().width;
@@ -245,9 +245,9 @@ var gZenCompactModeManager = {
  },

  animateCompactMode() {
-    // Get the splitter width before hiding it (we need to hide it before animating on right)
-    document.documentElement.setAttribute('zen-compact-animating', 'true');
    return new Promise((resolve) => {
+      // Get the splitter width before hiding it (we need to hide it before animating on right)
+      document.documentElement.setAttribute('zen-compact-animating', 'true');
      // We need to set the splitter width before hiding it
      let splitterWidth = document
        .getElementById('zen-sidebar-splitter')
@@ -268,7 +268,6 @@ var gZenCompactModeManager = {
      this.sidebar.style.removeProperty('margin-left');
      this.sidebar.style.removeProperty('transform');
      window.requestAnimationFrame(() => {
-        delete this._ignoreNextResize;
        let sidebarWidth = this.getAndApplySidebarWidth();
        const elementSeparation = ZenThemeModifier.elementSeparation;
        if (!canAnimate) {
@@ -280,7 +279,7 @@ var gZenCompactModeManager = {

          // TODO: Work on this a bit more, needs polishing
          if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) {
-            gZenUIManager.motion
+            gZenUIManager.anime
              .animate(
                [
                  this.sidebar,
@@ -300,7 +299,7 @@ var gZenCompactModeManager = {
                  ],
                },
                {
-                  ease: 'easeIn',
+                  ease: 'in',
                  type: 'spring',
                  bounce: 0,
                  duration: 0.2,
@@ -325,20 +324,16 @@ var gZenCompactModeManager = {
          } else {
            sidebarWidth -= elementSeparation;
          }
-          this.sidebar.style.marginRight = '0px';
-          this.sidebar.style.marginLeft = '0px';
-          gZenUIManager.motion
-            .animate(
+          gZenUIManager.anime
+            .waapi(
              this.sidebar,
              {
                marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
                marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
              },
              {
-                ease: 'easeIn',
-                type: 'spring',
-                bounce: 0,
-                duration: 0.15,
+                ease: 'out',
+                duration: 0.1,
              }
            )
            .then(() => {
@@ -376,8 +371,8 @@ var gZenCompactModeManager = {
          } else {
            this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
          }
-          gZenUIManager.motion
-            .animate(
+          gZenUIManager.anime
+            .waapi(
              this.sidebar,
              this.sidebarIsOnRight
                ? {
@@ -386,10 +381,8 @@ var gZenCompactModeManager = {
                  }
                : { marginLeft: 0 },
              {
-                ease: 'easeOut',
-                type: 'spring',
-                bounce: 0,
-                duration: 0.15,
+                ease: 'in',
+                duration: 0.1,
              }
            )
            .then(() => {
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -185,7 +185,15 @@
      #navigator-toolbox:has(.tabbrowser-tab:active),
      &[zen-renaming-tab='true'] #navigator-toolbox,
      #navigator-toolbox:has(
-          *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
+          *:is(
+            [panelopen='true'], 
+            [open='true'], 
+            #urlbar:focus-within, 
+            [breakout-extend='true']
+          )
+          :not(#urlbar[zen-floating-urlbar='true'])
+          :not(tab)
+          :not(.zen-compact-mode-ignore)
        ) {
        &:not([animate='true']) {
          --zen-compact-mode-func: linear(
--- a/src/zen/downloads/ZenDownloadAnimation.mjs
+++ b/src/zen/downloads/ZenDownloadAnimation.mjs
@@ -221,7 +221,7 @@
          this.#startBoxAnimation(areTabsPositionedRight);
        }

-        await gZenUIManager.motion.animate(arcAnimationElement, sequence, {
+        await gZenUIManager.anime.animate(arcAnimationElement, sequence, {
          duration: Services.prefs.getIntPref('zen.downloads.download-animation-duration') / 1000,
          easing: 'cubic-bezier(0.37, 0, 0.63, 1)',
          fill: 'forwards',
@@ -353,7 +353,7 @@

        wrapper.appendChild(this.#boxAnimationElement);

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '34px',
@@ -366,7 +366,7 @@
          }
        ).finished;

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '24px',
@@ -411,7 +411,7 @@
      try {
        const sideProp = areTabsPositionedRight ? 'right' : 'left';

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            transform: 'scale(0.9)',
@@ -422,7 +422,7 @@
          }
        ).finished;

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '-50px',
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -131,10 +131,10 @@

        const startX = isRightSide ? -50 : 50;

-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.sidebarButtons.querySelectorAll('toolbarbutton'),
          { x: [startX, 0], opacity: [0, 1] },
-          { delay: gZenUIManager.motion.stagger(0.1) }
+          { delay: gZenUIManager.anime.stagger(0.1) }
        );
      }
      this.sidebarButtons.removeAttribute('hidden');
@@ -180,7 +180,7 @@
          this.quickOpenGlance({ dontOpenButtons: true });
          this.showSidebarButtons(true);

-          gZenUIManager.motion.animate(
+          gZenUIManager.anime.animate(
            this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
            {
              scale: [1, 0.98],
@@ -211,7 +211,7 @@
          };
          this.browserWrapper.style.transform = 'translate(-50%, -50%)';
          this.overlay.style.overflow = 'visible';
-          gZenUIManager.motion
+          gZenUIManager.anime
            .animate(
              this.browserWrapper,
              {
@@ -311,7 +311,7 @@
      this.overlay.style.pointerEvents = 'none';
      this.quickCloseGlance({ justAnimateParent: true, clearID: false });
      const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
          {
@@ -332,7 +332,7 @@
        });
      this.browserWrapper.style.opacity = 1;
      return new Promise((resolve) => {
-        gZenUIManager.motion
+        gZenUIManager.anime
          .animate(
            this.browserWrapper,
            {
@@ -653,7 +653,7 @@
        this.finishOpeningGlance();
        return;
      }
-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        this.browserWrapper,
        {
          width: ['85%', '100%'],
--- a/src/zen/media/ZenMediaController.mjs
+++ b/src/zen/media/ZenMediaController.mjs
@@ -219,7 +219,7 @@
    hideMediaControls() {
      if (this.mediaControlBar.hasAttribute('hidden')) return;

-      return gZenUIManager.motion
+      return gZenUIManager.anime
        .animate(
          this.mediaControlBar,
          {
@@ -259,7 +259,7 @@
          this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
        this.mediaControlBar.style.opacity = 0;
        gZenUIManager.updateTabsToolbar();
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.mediaControlBar,
          {
            opacity: [0, 1],
--- a/src/zen/media/zen-media-controls.css
+++ b/src/zen/media/zen-media-controls.css
@@ -16,6 +16,7 @@

  .toolbarbutton-1 {
    border-radius: 5px;
+    color: white;
  }

  #zen-media-buttons-hbox {
@@ -76,19 +77,19 @@
    transition: height 0.15s ease-out;

    &::-moz-range-track {
-      background: var(--zen-toolbar-element-bg);
+      background: var(--zen-colors-border);
      border-radius: 999px;
      height: var(--progress-height);
    }

    &::-moz-range-progress {
-      background: color-mix(in srgb, var(--zen-primary-color) 70%, light-dark(black, white) 30%);
+      background: var(--zen-primary-color);
      border-radius: 999px;
      height: var(--progress-height);
    }

    &::-moz-range-thumb {
-      background: color-mix(in srgb, var(--zen-primary-color) 70%, light-dark(black, white) 30%);
+      background: var(--zen-primary-color);
      border: none;
      width: calc(var(--progress-height) * 2);
      height: calc(var(--progress-height) * 2);
@@ -284,21 +285,6 @@
  justify-content: space-between;
  max-width: 100%;
  --toolbarbutton-outer-padding: 0;
-  container: media-controls / inline-size;
-  gap: 0.7rem;
-}
-
-#zen-media-playback-buttons {
-  justify-content: space-between;
-  max-width: 7em;
-  width: 100%;
-}
-
-/* Hide #zen-media-focus-button if it doesn't fit in the toolbar */
-@container media-controls (max-width: 150px) {
-  #zen-media-focus-button {
-    display: none;
-  }
 }

 #zen-media-info-container {
--- a/src/zen/media/zen-media-controls.inc.xhtml
+++ b/src/zen/media/zen-media-controls.inc.xhtml
@@ -29,14 +29,12 @@
      <hbox id="zen-media-controls-hbox">
        <toolbarbutton id="zen-media-focus-button"
          class="toolbarbutton-1" />
-        <hbox id="zen-media-playback-buttons">
-          <toolbarbutton id="zen-media-previoustrack-button"
-            class="toolbarbutton-1" />
-          <toolbarbutton id="zen-media-playpause-button"
-            class="toolbarbutton-1" />
-          <toolbarbutton id="zen-media-nexttrack-button"
-            class="toolbarbutton-1" />
-        </hbox>
+        <toolbarbutton id="zen-media-previoustrack-button"
+          class="toolbarbutton-1" />
+        <toolbarbutton id="zen-media-playpause-button"
+          class="toolbarbutton-1" />
+        <toolbarbutton id="zen-media-nexttrack-button"
+          class="toolbarbutton-1" />
        <toolbarbutton id="zen-media-mute-button"
          class="toolbarbutton-1" />
        <hbox id="media-device-buttons">
--- a/src/zen/split-view/ZenViewSplitter.mjs
+++ b/src/zen/split-view/ZenViewSplitter.mjs
@@ -322,7 +322,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
      draggedTab._visuallySelected = true;
      this.fakeBrowser.setAttribute('side', side);
      this._finishAllAnimatingPromise = Promise.all([
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          gBrowser.tabbox,
          side === 'left'
            ? {
@@ -338,7 +338,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
            easing: 'ease-out',
          }
        ),
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.fakeBrowser,
          {
            width: [0, `${halfWidth - padding}px`],
@@ -400,9 +400,8 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
    this._lastOpenedTab = gBrowser.selectedTab;
    this._draggingTab = null;
    try {
-      this._canDrop = false;
      Promise.all([
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          gBrowser.tabbox,
          side === 'left'
            ? {
@@ -416,7 +415,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
            easing: 'ease-out',
          }
        ),
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.fakeBrowser,
          {
            width: [`${halfWidth - padding * 2}px`, 0],
@@ -432,6 +431,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
          }
        ),
      ]).then(() => {
+        this._canDrop = false;
        this._maybeRemoveFakeBrowser();
      });
    } catch (e) {
@@ -1763,7 +1763,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
  }

  animateBrowserDrop(browserContainer, callback = () => {}) {
-    gZenUIManager.motion
+    gZenUIManager.anime
      .animate(
        browserContainer,
        {
--- a/src/zen/split-view/zen-decks.css
+++ b/src/zen/split-view/zen-decks.css
@@ -35,9 +35,9 @@
  position: absolute !important;
  overflow: hidden;

-  & .dialogStack {
+  &.deck-selected:has(.dialogStack:not([hidden='true'])) {
    /* Fix for issue https://github.com/zen-browser/desktop/issues/7564 */
-    position: absolute;
+    z-index: 1;
  }
 }

--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -541,7 +541,7 @@
        case 'unload-switch':
        case 'reset-switch':
        case 'switch':
-          if (behavior.includes('unload') && !selectedTab.hasAttribute('zen-essential')) {
+          if (behavior.includes('unload')) {
            if (selectedTab.hasAttribute('glance-id')) {
              break;
            }
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -42,6 +42,11 @@
    }
  }

+  /* Adjust padding for top sidebar buttons */
+  & #zen-sidebar-top-buttons .toolbarbutton-1 > .toolbarbutton-icon {
+    padding: 4px;
+  }
+
  /* Make the separator take full width */
  & #zen-sidebar-top-buttons-separator {
    width: 100%;
@@ -136,6 +141,9 @@
  }

  & #nav-bar {
+    /* Add bottom margin */
+    margin-bottom: var(--zen-toolbox-padding);
+
    /* Hide flexible spaces */
    & toolbarspring {
      display: none;
@@ -420,6 +428,7 @@
  gap: 5px;
  align-items: center;
  padding-top: var(--zen-element-separation);
+  --toolbarbutton-inner-padding: 5px;

  & > toolbarbutton:not(#zen-workspaces-button) {
    padding: 0 !important;
@@ -626,8 +635,8 @@
    --tab-inline-padding: 8px; /* Define padding for tab content */

    & .tabbrowser-tab {
+      /* Show tab label */
      & .tab-label-container {
-        opacity: 1;
        display: flex;
      }

@@ -773,23 +782,19 @@
  }

  #zen-sidebar-foot-buttons {
-    & > .toolbarbutton-1,
-    & .toolbarbutton-badge-stack {
+    & > .toolbarbutton-1 {
      min-height: var(--tab-min-height);
      line-height: var(--tab-label-line-height);
      border-radius: var(--border-radius-medium);
      padding: 0 calc(var(--tab-inline-padding) - var(--tab-inner-inline-margin));
+      width: var(--tab-collapsed-background-width);
+      margin-inline: var(--tab-inner-inline-margin);

-      &.toolbarbutton-badge-stack {
+      & .toolbarbutton-badge-stack {
        justify-content: center;
        padding: 8px;
        width: var(--tab-collapsed-background-width);
      }
-
-      &.toolbarbutton-1 {
-        width: var(--tab-collapsed-background-width);
-        margin-inline: var(--tab-inner-inline-margin);
-      }
    }
  }

@@ -1169,6 +1174,14 @@
      padding-inline-end: var(--zen-toolbox-padding); /* Add end padding for right sidebar */
    }

+    /* Standardize height and padding for toolbar buttons (excluding titlebar buttons) */
+    & toolbarbutton:not(.titlebar-button) {
+      height: calc(
+        2 * var(--toolbarbutton-inner-padding) + 16px
+      ); /* Calculate height based on padding + icon */
+      padding: 0 var(--toolbarbutton-outer-padding) !important; /* Apply outer padding */
+    }
+
    /* Hide flexible space when collapsed */
    :root:not([zen-sidebar-expanded='true']) & toolbarspring {
      display: none;
@@ -1191,7 +1204,7 @@
 /* Hide the button wrapper by default */
 #tabs-newtab-button {
  display: none;
-  font-weight: 500;
+  opacity: 0.5; /* Dimmed by default */
  -moz-user-focus: ignore !important; /* Prevent focus */
 }

@@ -1216,6 +1229,7 @@
    /* Style when placed "in urlbar" (likely a state/attribute) */
    &[in-urlbar] {
      background: var(--tab-selected-bgcolor) !important;
+      opacity: 1 !important; /* Full opacity */
      box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */
    }
  }
@@ -1275,6 +1289,7 @@
 .zen-essentials-container {
  will-change: transform;

+  padding-bottom: var(--zen-toolbox-padding);
  overflow: hidden;
  gap: 4px;
  transition:
@@ -1302,10 +1317,6 @@

  position: absolute;

-  &:not(:empty) {
-    padding-top: 6px;
-  }
-
  &[hidden='true'] {
    --hidden-essentials-width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
    max-width: var(
@@ -1360,7 +1371,7 @@
  }

  &:hover .tab-background {
-    background: light-dark(rgba(0, 0, 0, 0.1), var(--tab-selected-bgcolor));
+    background: light-dark(rgba(89, 89, 89, 0.15), var(--tab-selected-bgcolor));
  }

  /* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */
--- a/src/zen/tests/container_essentials/browser.toml
+++ b/src/zen/tests/container_essentials/browser.toml
@@ -1,5 +1,5 @@
 [DEFAULT]
-prefs = ["zen.workspaces.separate-essentials=true"]
+prefs = ["zen.workspaces.container-specific-essentials-enabled=true"]

 ["browser_container_auto_switch.js"]
 ["browser_container_specific_essentials.js"]
--- a/src/zen/tests/pinned/browser.toml
+++ b/src/zen/tests/pinned/browser.toml
@@ -1,5 +1,3 @@
-[DEFAULT]
-prefs = ["zen.workspaces.separate-essentials=false"]

 ["browser_pinned_unload_changed.js"]
 ["browser_pinned_unload_noreset.js"]
--- a/src/zen/tests/workspaces/browser.toml
+++ b/src/zen/tests/workspaces/browser.toml
@@ -1,5 +1,4 @@
 [DEFAULT]
-prefs = ["zen.workspaces.separate-essentials=false"]
 support-files = [
  "head.js",
 ]
--- a/src/zen/vendor/animejs.dep
+++ b/src/zen/vendor/animejs.dep
@@ -0,0 +1 @@
+https://cdn.jsdelivr.net/npm/animejs/+esm: v4.0.2
--- a/src/zen/vendor/animejs.min.mjs
+++ b/src/zen/vendor/animejs.min.mjs
--- a/src/zen/vendor/motion.dep
+++ b/src/zen/vendor/motion.dep
@@ -1 +0,0 @@
-https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0
--- a/src/zen/vendor/motion.min.mjs
+++ b/src/zen/vendor/motion.min.mjs
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/src/zen/welcome/ZenWelcome.mjs
@@ -18,7 +18,7 @@
  }

  function getMotion() {
-    return gZenUIManager.motion;
+    return gZenUIManager.anime;
  }

  async function animate(...args) {
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -40,9 +40,6 @@
    return points;
  }

-  const MAX_OPACITY = 0.8;
-  const MIN_OPACITY = 0.3;
-
  class nsZenThemePicker extends ZenMultiWindowFeature {
    static MAX_DOTS = 3;

@@ -59,7 +56,6 @@
    #sinePoints = parseSinePath(this.#sinePath);

    #colorPage = 0;
-    #gradientsCache = new Map();

    constructor() {
      super();
@@ -116,8 +112,8 @@
      XPCOMUtils.defineLazyPreferenceGetter(
        this,
        'windowSchemeType',
-        'zen.view.window.scheme',
-        2,
+        'zen.theme.window.scheme',
+        true,
        darkModeChange
      );
    }
@@ -128,9 +124,9 @@

    get isDarkMode() {
      switch (this.windowSchemeType) {
-        case 0:
+        case 'dark':
          return true;
-        case 1:
+        case 'light':
          return false;
        default:
      }
@@ -179,7 +175,12 @@
          const algo = target.getAttribute('data-algo');
          const lightness = target.getAttribute('data-lightness');
          const numDots = parseInt(target.getAttribute('data-num-dots'));
-          if (numDots < this.dots.length) {
+          if (algo == 'float') {
+            for (const dot of this.dots) {
+              dot.element.remove();
+            }
+            this.dots = [];
+          } else if (numDots < this.dots.length) {
            for (let i = numDots; i < this.dots.length; i++) {
              this.dots[i].element.remove();
            }
@@ -191,7 +192,6 @@
            {
              ID: 0,
              position: { x, y },
-              isPrimary: true,
            },
          ];
          for (let i = 1; i < numDots; i++) {
@@ -203,6 +203,12 @@
          this.useAlgo = algo;
          this.#currentLightness = lightness;
          dots = this.calculateCompliments(dots, 'update', this.useAlgo);
+          if (algo == 'float') {
+            for (const dot of dots) {
+              this.spawnDot(dot.position);
+            }
+            this.dots[0].element.classList.add('primary');
+          }
          this.handleColorPositions(dots);
          this.updateCurrentWorkspace();
        });
@@ -252,15 +258,11 @@
        if (!scheme) {
          return;
        }
-        const themeInt = {
-          auto: 2,
-          light: 1,
-          dark: 0,
-        }[scheme];
-        if (themeInt === undefined) {
+        if (this.currentScheme === scheme) {
          return;
        }
-        Services.prefs.setIntPref('zen.view.window.scheme', themeInt);
+        this.currentScheme = scheme;
+        Services.prefs.setStringPref('zen.theme.window.scheme', scheme);
      });
    }

@@ -417,8 +419,8 @@
      // important: If any sort of sizing is changed, make sure changes are reflected here
      const padding = 20;
      const rect = {
-        width: 338,
-        height: 338,
+        width: 318,
+        height: 318,
      };
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
@@ -703,6 +705,36 @@

    handleColorPositions(colorPositions) {
      colorPositions.sort((a, b) => a.ID - b.ID);
+      if (this.useAlgo === 'floating') {
+        const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
+        const rect = dotPad.getBoundingClientRect();
+        this.dots.forEach((dot) => {
+          dot.element.style.zIndex = 999;
+
+          let pixelX, pixelY;
+          if (dot.position.x === null) {
+            const leftPercentage = parseFloat(dot.element.style.left) / 100;
+            const topPercentage = parseFloat(dot.element.style.top) / 100;
+
+            pixelX = leftPercentage * rect.width;
+            pixelY = topPercentage * rect.height;
+          } else {
+            pixelX = dot.position.x;
+            pixelY = dot.position.y;
+          }
+
+          const colorFromPos = this.getColorFromPosition(pixelX, pixelY);
+
+          dot.element.style.setProperty(
+            '--zen-theme-picker-dot-color',
+            `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
+          );
+
+          dot.element.setAttribute('data-position', this.getJSONPos(pixelX, pixelY));
+        });
+
+        return;
+      }
      const existingPrimaryDot = this.dots.find((d) => d.ID === 0);

      if (existingPrimaryDot) {
@@ -740,7 +772,7 @@
          );

          if (!this.dragging) {
-            gZenUIManager.motion.animate(
+            gZenUIManager.anime.animate(
              existingDot.element,
              {
                left: `${dotPosition.position.x}px`,
@@ -857,7 +889,7 @@
        this.handleColorPositions(colorPositions);
        this.updateCurrentWorkspace(true);

-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          existingPrimaryDot.element,
          {
            left: `${existingPrimaryDot.position.x}px`,
@@ -977,15 +1009,10 @@
    }

    themedColors(colors) {
-      const colorToBlend = this.isDarkMode ? [255, 255, 255] : [0, 0, 0]; // Default to white for dark mode, black otherwise
-      const opacity = this.currentOpacity;
-      // Convert opacity into a percentage where the lowest is 60% and the highest is 100%
-      // The more transparent, the more white the color will be blended with. In order words,
-      // make the transparency relative to these 2 ends.
-      // e.g. 0% opacity becomes 60% blend, 100% opacity becomes 100% blend
-      const blendPercentage = Math.max(30, 30 + opacity * 70);
      return colors.map((color) => ({
-        c: color.isCustom ? color.c : this.blendColors(color.c, colorToBlend, blendPercentage),
+        c: color.isCustom
+          ? color.c
+          : [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
        isCustom: color.isCustom,
        algorithm: color.algorithm,
        lightness: color.lightness,
@@ -995,10 +1022,9 @@

    onOpacityChange(event) {
      this.currentOpacity = parseFloat(event.target.value);
-      // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback.
-      if (Math.round(this.currentOpacity * 10) !== this._lastHapticFeedback) {
+      // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback
+      if ((this.currentOpacity * 10) % 1 === 0) {
        Services.zen.playHapticFeedback();
-        this._lastHapticFeedback = Math.round(this.currentOpacity * 10);
      }
      this.updateCurrentWorkspace();
    }
@@ -1023,22 +1049,20 @@
      if (color.isCustom) {
        return color.c;
      }
-      let opacity = this.currentOpacity;
+      const opacity = this.currentOpacity;
      if (forToolbar) {
-        color = this.blendColors(
-          color.c,
-          this.getToolbarModifiedBaseRaw().slice(0, 3),
-          opacity * 100
-        );
-        opacity = 1; // Toolbar colors should always be fully opaque
-      } else {
-        color = color.c;
+        const toolbarBg = this.getToolbarModifiedBase();
+        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${opacity * 100}%, ${toolbarBg} ${(1 - opacity) * 100}%)`;
      }
-      return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`;
+      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`;
    }

    luminance([r, g, b]) {
-      return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+      const a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+      });
+      return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
    }

    contrastRatio(rgb1, rgb2) {
@@ -1049,7 +1073,7 @@
      return (brightest + 0.05) / (darkest + 0.05);
    }

-    blendColors(rgb1, rgb2, percentage) {
+    blendColorsRaw(rgb1, rgb2, percentage) {
      const p = percentage / 100;
      return [
        Math.round(rgb1[0] * p + rgb2[0] * (1 - p)),
@@ -1065,7 +1089,7 @@

      for (let i = 0; i < 10; i++) {
        const mid = (low + high) / 2;
-        const blended = this.blendColors(dominantColor, blendTarget, mid);
+        const blended = this.blendColorsRaw(dominantColor, blendTarget, mid);
        const contrast = this.contrastRatio(blended, blendTarget);

        if (contrast >= minContrast) {
@@ -1076,7 +1100,7 @@
        }
      }

-      return bestMatch || this.blendColors(dominantColor, blendTarget, 10); // fallback
+      return bestMatch || this.blendColorsRaw(dominantColor, blendTarget, 10); // fallback
    }

    getGradient(colors, forToolbar = false) {
@@ -1089,57 +1113,43 @@
        return forToolbar ? this.getToolbarModifiedBase() : 'transparent';
      } else if (themedColors.length === 1) {
        return this.getSingleRGBColor(themedColors[0], forToolbar);
+      } else if (themedColors.length === 2) {
+        return [
+          `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`,
+          `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`,
+        ].join(', ');
+      } else if (themedColors.length === 3) {
+        let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
+        let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
+        let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
+        if (!forToolbar) {
+          return [
+            `radial-gradient(circle at -30% -30%, ${color1}, transparent 100%)`,
+            `radial-gradient(circle at 130% -30%, ${color2}, transparent 100%)`,
+            `linear-gradient(to top, ${color3} -30%, transparent 60%)`,
+          ].join(', ');
+        }
+        return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
      } else {
-        // If there are custom colors, we just return a linear gradient with all colors
-        if (themedColors.find((color) => color.isCustom)) {
-          // Just return a linear gradient with all colors
-          const gradientColors = themedColors.map((color) =>
-            this.getSingleRGBColor(color, forToolbar)
-          );
-          // Divide all colors evenly in the gradient
-          const colorStops = gradientColors
-            .map((color, index) => {
-              const position = (index / (gradientColors.length - 1)) * 100;
-              return `${color} ${position}%`;
-            })
-            .join(', ');
-          return `linear-gradient(${rotation}deg, ${colorStops})`;
-        }
-        if (themedColors.length === 2) {
-          if (!forToolbar) {
-            return [
-              `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
-              `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
-            ].join(', ');
-          }
-          return `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 100%)`;
-        } else if (themedColors.length === 3) {
-          let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
-          let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
-          let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
-          if (!forToolbar) {
-            return [
-              `radial-gradient(circle at 0% 0%, ${color2}, transparent 100%)`,
-              `radial-gradient(circle at 100% 0%, ${color3}, transparent 100%)`,
-              `linear-gradient(to top, ${color1} 0%, transparent 60%)`,
-            ].join(', ');
-          }
-          // TODO(m): Stop doing this once we have support for bluring the sidebar
-          return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
-        }
+        // Just return a linear gradient with all colors
+        const gradientColors = themedColors.map((color) =>
+          this.getSingleRGBColor(color, forToolbar)
+        );
+        return `linear-gradient(${rotation}deg, ${gradientColors.join(', ')})`;
      }
    }

    shouldBeDarkMode(accentColor) {
-      let minimalLum = 0.5;
+      let minimalLum = this.isDarkMode ? 0.6 : 0.5;
      if (!this.canBeTransparent) {
        // Blend the color with the toolbar background
        const toolbarBg = this.getToolbarModifiedBaseRaw();
-        accentColor = this.blendColors(
+        accentColor = this.blendColorsRaw(
          toolbarBg.slice(0, 3),
          accentColor,
          (1 - this.currentOpacity) * 100
        );
+        minimalLum = this.isDarkMode ? 0.3 : 0.18;
      }
      const lum = this.luminance(accentColor);
      // Return true if background is dark enough that white text is preferred
@@ -1269,13 +1279,26 @@
    };

    getMostDominantColor(allColors) {
-      const color = this.getPrimaryColor(allColors);
-      if (typeof color === 'string') {
-        return this.hexToRgb(color);
+      const dominantColor = this.getPrimaryColor(allColors);
+      if (!dominantColor) {
+        return this.hexToRgb(this.getNativeAccentColor());
+      }
+      const result = this.pSBC(
+        this.isDarkMode ? 0.2 : -0.5,
+        `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
+      );
+      const color = result?.match(/\d+/g)?.map(Number);
+      if (!color || color.length !== 3) {
+        return this.hexToRgb(this.getNativeAccentColor());
      }
      return color;
    }

+    blendColors(rgb1, rgb2, percentage) {
+      const blended = this.blendColorsRaw(rgb1, rgb2, percentage);
+      return `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
+    }
+
    async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
      const uuid = workspace.uuid;
      // Use theme from workspace object or passed theme
@@ -1290,10 +1313,6 @@
          return;
        }

-        if (theme === null) {
-          browser.gZenThemePicker.invalidateGradientCache();
-        }
-
        // Do not rebuild if the workspace is not the same as the current one
        const windowWorkspace = await browser.gZenWorkspaces.getActiveWorkspace();
        if (windowWorkspace.uuid !== uuid && theme !== null) {
@@ -1311,6 +1330,18 @@
          }
        }

+        if (this.isDarkMode) {
+          browser.document.documentElement.style.setProperty(
+            '--zen-themed-browser-overlay-bg',
+            'rgba(255, 255, 255, 0.3)'
+          );
+        } else {
+          browser.document.documentElement.style.setProperty(
+            '--zen-themed-browser-overlay-bg',
+            'rgba(0, 0, 0, 0.2)'
+          );
+        }
+
        if (!skipUpdate) {
          browser.document.documentElement.style.setProperty(
            '--zen-main-browser-background-old',
@@ -1327,15 +1358,32 @@
        }

        browser.gZenThemePicker.resetCustomColorList();
+        if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
+          const gradient = browser.gZenThemePicker.getGradient([]);
+          const gradientToolbar = browser.gZenThemePicker.getGradient([], true);
+          browser.document.documentElement.style.setProperty(
+            '--zen-main-browser-background',
+            gradient
+          );
+          browser.document.documentElement.style.setProperty(
+            '--zen-main-browser-background-toolbar',
+            gradientToolbar
+          );
+          browser.gZenThemePicker.updateNoise(0);
+          browser.document.documentElement.style.setProperty(
+            '--zen-primary-color',
+            this.getNativeAccentColor()
+          );
+          browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
+          return;
+        }

        browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
        browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;

-        let dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
-        const isDefaultTheme = !dominantColor;
-        if (isDefaultTheme) {
-          dominantColor = this.hexToRgb(this.getNativeAccentColor());
-        }
+        const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
+        const isDefaultTheme =
+          dominantColor?.toString() === this.hexToRgb(this.getNativeAccentColor()).toString();

        const opacitySlider = browser.document.getElementById(
          'PanelUI-zen-gradient-generator-opacity'
@@ -1347,13 +1395,14 @@
          const [_, secondStop, thirdStop] = document.querySelectorAll(
            '#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
          );
-          // Opacity can only be between MIN_OPACITY to MAX_OPACITY. Make opacity relative to that range
-          if (opacity < MIN_OPACITY) {
+          // Opacity can only be between 0.15 to 0.85. Make opacity relative to that range
+          // So 0.15 becomes 0, and 0.85 becomes 1.
+          if (opacity < 0.15) {
            opacity = 0;
-          } else if (opacity > MAX_OPACITY) {
+          } else if (opacity > 0.85) {
            opacity = 1;
          } else {
-            opacity = (opacity - MIN_OPACITY) / (MAX_OPACITY - MIN_OPACITY);
+            opacity = (opacity - 0.15) / (0.85 - 0.15);
          }
          if (isDefaultTheme) {
            opacity = 1; // If it's the default theme, we want the wave to be
@@ -1366,8 +1415,8 @@
          thirdStop.setAttribute('offset', `${opacity * 100}%`);
          const interpolatedPath = this.#interpolateWavePath(opacity);
          svg.setAttribute('d', interpolatedPath);
-          opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 15}px`);
-          opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 15}px`);
+          opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 12}px`);
+          opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 10}px`);
          svg.style.stroke =
            interpolatedPath === this.#linePath
              ? thirdStop.getAttribute('stop-color')
@@ -1445,10 +1494,9 @@
        if (dominantColor) {
          browser.document.documentElement.style.setProperty(
            '--zen-primary-color',
-            this.pSBC(
-              this.isDarkMode ? 0.2 : -0.5,
-              `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
-            )
+            typeof dominantColor === 'string'
+              ? dominantColor
+              : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
          );
          let isDarkMode = this.isDarkMode;
          if (!isDefaultTheme) {
@@ -1458,9 +1506,16 @@
            browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
          }
          // Set `--toolbox-textcolor` to have a contrast with the primary color
-          document.documentElement.style.setProperty(
-            '--toolbox-textcolor',
-            isDarkMode ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)'
+          const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0];
+          const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target
+          await gZenUIManager.anime.animate(
+            browser.document.documentElement,
+            {
+              '--toolbox-textcolor': blendedColor,
+            },
+            {
+              duration: 0.05,
+            }
          );
        }

@@ -1604,26 +1659,6 @@
      });
      return newPathData.trim();
    }
-
-    invalidateGradientCache() {
-      this.#gradientsCache = {};
-    }
-
-    async getGradientForWorkspace(workspace) {
-      const uuid = workspace.uuid;
-      if (this.#gradientsCache[uuid]) {
-        return this.#gradientsCache[uuid];
-      }
-      const previousOpacity = this.currentOpacity;
-      const previousLightness = this.#currentLightness;
-      this.currentOpacity = workspace.theme.opacity ?? 0.5;
-      this.#currentLightness = workspace.theme.lightness ?? 70;
-      const gradient = this.getGradient(workspace.theme.gradientColors);
-      this.currentOpacity = previousOpacity;
-      this.#currentLightness = previousLightness;
-      this.#gradientsCache[uuid] = [gradient, workspace.theme.texture ?? 0];
-      return this.#gradientsCache[uuid];
-    }
  }

  window.nsZenThemePicker = nsZenThemePicker;
--- a/src/zen/workspaces/ZenWorkspaceCreation.mjs
+++ b/src/zen/workspaces/ZenWorkspaceCreation.mjs
@@ -152,7 +152,7 @@

      document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';

-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          [gBrowser.tabContainer, gURLBar.textbox],
          {
@@ -172,7 +172,7 @@
          this.style.visibility = 'visible';
          gZenCompactModeManager.getAndApplySidebarWidth();
          this.resolveInitialized();
-          gZenUIManager.motion
+          gZenUIManager.anime
            .animate(
              this.elementsToAnimate,
              {
@@ -184,7 +184,7 @@
                duration: 0.6,
                type: 'spring',
                bounce: 0,
-                delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
+                delay: gZenUIManager.anime.stagger(0.05, { startDelay: 0.2 }),
              }
            )
            .then(() => {
@@ -265,7 +265,7 @@
    }

    async #cleanup() {
-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        this.elementsToAnimate.reverse(),
        {
          y: [0, 20],
@@ -276,7 +276,7 @@
          duration: 0.4,
          type: 'spring',
          bounce: 0,
-          delay: gZenUIManager.motion.stagger(0.05),
+          delay: gZenUIManager.anime.stagger(0.05),
        }
      );

@@ -311,7 +311,7 @@
      await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
      await gZenWorkspaces.updateTabsContainers();

-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        [gBrowser.tabContainer, gURLBar.textbox],
        {
          opacity: [0, 1],
--- a/src/zen/workspaces/ZenWorkspaceIcons.mjs
+++ b/src/zen/workspaces/ZenWorkspaceIcons.mjs
@@ -54,7 +54,6 @@
                mouse > rect[isVertical ? 'top' : 'left'] &&
                mouse < rect[isVertical ? 'bottom' : 'right']
              ) {
-                const nextSibling = draggedTab.nextSibling;
                if (
                  mouse <
                  rect[isVertical ? 'top' : 'left'] + rect[isVertical ? 'height' : 'width'] / 2
@@ -63,9 +62,6 @@
                } else {
                  this.insertBefore(draggedTab, tab.nextSibling);
                }
-                if (nextSibling !== draggedTab.nextSibling) {
-                  Services.zen.playHapticFeedback();
-                }
              }
            }
          }
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -100,7 +100,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      false
    );
    this.containerSpecificEssentials = Services.prefs.getBoolPref(
-      'zen.workspaces.separate-essentials',
+      'zen.workspaces.container-specific-essentials-enabled',
      false
    );
    ChromeUtils.defineLazyGetter(this, 'tabContainer', () =>
@@ -646,12 +646,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {

    element.addEventListener(
      'MozSwipeGestureEnd',
-      () => {
-        Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', false);
+      (event) => {
        document.documentElement.removeAttribute('swipe-gesture');
        gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
-        document.documentElement.style.setProperty('--zen-background-opacity', '1');
-        delete this._hasAnimatedBackgrounds;
        this.updateTabsContainers();
        document.removeEventListener('popupshown', this.popupOpenHandler, { once: true });
      },
@@ -696,7 +693,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      lastDelta: 0,
      direction: null,
    };
-    Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', true);
  }

  _handleSwipeUpdate(event) {
@@ -706,9 +702,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    event.stopPropagation();

    const delta = event.delta * 300;
-    const stripWidth =
-      document.getElementById('navigator-toolbox').getBoundingClientRect().width +
-      document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width * 2;
+    const stripWidth = document.getElementById('tabbrowser-tabs').getBoundingClientRect().width;
    let translateX = this._swipeState.lastDelta + delta;
    // Add a force multiplier as we are translating the strip depending on how close to the edge we are
    let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer
@@ -719,7 +713,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      translateX = this._swipeState.lastDelta;
    }

-    if (Math.abs(delta) > 0.8) {
+    if (Math.abs(delta) > 1) {
      this._swipeState.direction = delta > 0 ? 'left' : 'right';
    }

@@ -1599,8 +1593,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    ) {
      delete this._alwaysAnimatePaddingTop;
      const essentialsHeight = essentialContainer.getBoundingClientRect().height;
-      if (!forAnimation && animateContainer && gZenUIManager.motion) {
-        gZenUIManager.motion.animate(
+      if (!forAnimation && animateContainer && gZenUIManager.anime) {
+        gZenUIManager.anime.animate(
          workspaceElement,
          {
            paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'],
@@ -1668,41 +1662,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
        }
      }
    }
-    if (offsetPixels) {
-      // Find the next workspace we are scrolling to
-      const nextWorkspace = workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)];
-      if (nextWorkspace) {
-        const [nextGradient, nextGrain] =
-          await gZenThemePicker.getGradientForWorkspace(nextWorkspace);
-        const [_, existingGrain] = await gZenThemePicker.getGradientForWorkspace(workspace);
-        const percentage = Math.abs(offsetPixels) / 200;
-        await new Promise((resolve) => {
-          requestAnimationFrame(() => {
-            document.documentElement.style.setProperty('--zen-background-opacity', 1 - percentage);
-            if (!this._hasAnimatedBackgrounds) {
-              this._hasAnimatedBackgrounds = true;
-              document.documentElement.style.setProperty(
-                '--zen-main-browser-background-old',
-                nextGradient
-              );
-            }
-            resolve();
-          });
-        });
-        // Fit the offsetPixels into the grain limits. Both ends may be nextGrain and existingGrain,
-        // so we need to use the min and max of both. For example, existing may be 0.2 and next may be 0.5,
-        // meaning we should convert the offset to a percentage between 0.2 and 0.5. BUT if existingGrain
-        // is 0.5 and nextGrain is 0.2, we should still convert the offset to a percentage between 0.2 and 0.5.
-        const minGrain = Math.min(existingGrain, nextGrain);
-        const maxGrain = Math.max(existingGrain, nextGrain);
-        const grainValue =
-          minGrain +
-          (maxGrain - minGrain) * (existingGrain > nextGrain ? 1 - percentage : percentage);
-        gZenThemePicker.updateNoise(grainValue);
-      }
-    } else {
-      delete this._hasAnimatedBackgrounds;
-    }
    delete this._organizingWorkspaceStrip;
  }

@@ -1779,19 +1738,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      }
      if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) {
        previousBackgroundOpacity = 0;
-      } else {
-        previousBackgroundOpacity = 1 - previousBackgroundOpacity;
      }
-      previousBackgroundOpacity = previousBackgroundOpacity;
      gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
      await new Promise((resolve) => {
        requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(
-            '--zen-background-opacity',
-            previousBackgroundOpacity
-          );
          animations.push(
-            gZenUIManager.motion.animate(
+            gZenUIManager.anime.animate(
              document.documentElement,
              {
                '--zen-background-opacity': [previousBackgroundOpacity, 1],
@@ -1821,7 +1773,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      if (shouldAnimate) {
        const existingPaddingTop = element.style.paddingTop;
        animations.push(
-          gZenUIManager.motion.animate(
+          gZenUIManager.anime.animate(
            element,
            {
              transform: existingTransform ? [existingTransform, newTransform] : newTransform,
@@ -1849,24 +1801,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      const newWorkspaceEssentialsContainer = clonedEssentials.find((cloned) =>
        cloned.workspaces.some((w) => w.uuid === newWorkspace.uuid)
      );
-      // Get a list of essentials containers that are in between the first and last workspace
-      const essentialsContainersInBetween = clonedEssentials.filter((cloned) => {
-        const essentialsWorkspaces = cloned.workspaces;
-        const firstIndex = workspaces.workspaces.findIndex(
-          (w) => w.uuid === essentialsWorkspaces[0].uuid
-        );
-        const lastIndex = workspaces.workspaces.findIndex(
-          (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
-        );
-
-        const [start, end] = [
-          Math.min(previousWorkspaceIndex, newWorkspaceIndex),
-          Math.max(previousWorkspaceIndex, newWorkspaceIndex),
-        ];
-
-        // Check if any part of the container overlaps with the movement range
-        return firstIndex <= end && lastIndex >= start;
-      });
      for (const cloned of clonedEssentials) {
        const container = cloned.container;
        const essentialsWorkspaces = cloned.workspaces;
@@ -1893,18 +1827,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
        cloned.originalContainer.style.removeProperty('transform');
        // Check if the container is even going to appear on the screen, to save on animation
        if (
-          // We also need to check if the container is even going to appear on the screen.
-          // In order to do this, we need to check if the container is between the first and last workspace.
-          // Note that essential containers can have multiple workspaces,
-          // so we need to check if any of the workspaces in the container are between the
-          // first and last workspace.
-          !essentialsContainersInBetween.find(
-            (clonedEssentials) =>
-              clonedEssentials.workspaces.some((w) => w.uuid === essentialsWorkspaces[0].uuid) &&
-              clonedEssentials.workspaces.some(
-                (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
-              )
-          )
+          (isGoingLeft && newWorkspaceIndex > lastWorkspaceIndex) ||
+          (!isGoingLeft && newWorkspaceIndex < firstWorkspaceIndex)
        ) {
          continue;
        }
@@ -1988,7 +1912,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
        if (shouldAnimate) {
          container.style.transform = existingTransform;
          animations.push(
-            gZenUIManager.motion.animate(
+            gZenUIManager.anime.animate(
              container,
              {
                transform: [
@@ -2028,7 +1952,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
  }

  _shouldChangeToTab(aTab) {
-    return !(aTab?.pinned && aTab?.hasAttribute('pending'));
+    return !(
+      aTab?.hasAttribute('zen-essential') ||
+      (aTab?.pinned && aTab?.hasAttribute('pending'))
+    );
  }

  async #shouldShowTabInCurrentWorkspace(tab) {
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -5,7 +5,7 @@
 */

 #PanelUI-zen-gradient-generator {
-  --panel-width: 360px;
+  --panel-width: 340px;
  --panel-padding: 10px;
  min-width: var(--panel-width);
 }
@@ -47,6 +47,9 @@
 }

 #PanelUI-zen-gradient-generator-color-custom-add {
+  position: absolute;
+  right: 0px;
+  top: 0px;
  cursor: pointer;
 }

@@ -91,25 +94,29 @@
  overflow: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
-  mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);

  & > hbox {
    justify-content: space-around;
    min-width: 100%;

    & > box {
-      width: 22px;
-      height: 22px;
+      width: 18px;
+      height: 18px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: transform 0.1s;
-
-      &[data-num-dots='3'] {
-        background:
-          radial-gradient(circle at 0% 0%, var(--c1), transparent 100%),
-          radial-gradient(circle at 100% 0%, var(--c2), transparent 100%),
-          linear-gradient(to top, var(--c3) 0%, transparent 60%);
+      &::after {
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        top: 0;
+        left: 0;
+        outline: 2px solid var(--zen-toolbar-element-bg);
+        border-radius: 50%;
+        pointer-events: none;
+        transition: transform 0.1s;
      }

      &:hover {
@@ -188,20 +195,20 @@
  &::before {
    content: '';
    position: absolute;
-    width: calc(100% - 8px);
+    width: 100%;
    height: 16px;
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
    top: 50%;
-    left: 8px;
+    left: 4px;
    transform: translateY(-50%);
  }

  & svg {
    overflow: visible;
-    min-width: calc(100% * 1.1);
+    min-width: calc(100% + 2rem);
    scale: 1.2;
    margin-left: 4px;
  }
@@ -211,7 +218,6 @@
  margin: 0 !important;
  background: transparent;
  z-index: 2;
-  padding: 0 5px;

  &::-moz-range-thumb {
    background: light-dark(black, white);
@@ -235,16 +241,19 @@
 .zen-theme-picker-gradient {
  position: relative;
  overflow: hidden;
-  border-radius: calc(var(--zen-native-content-radius) - 4px);
+  border-radius: var(--zen-border-radius);

  min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
-  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
+  background: light-dark(
+    var(--zen-toolbar-element-bg),
+    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%)
+  );
  background-image: radial-gradient(
    light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
    transparent 0
  );
-  background-position: -20px -20px;
-  background-size: 6px 6px;
+  background-position: -19px -19px;
+  background-size: 5px 5px;

  & .zen-theme-picker-dot {
    position: absolute;
@@ -260,19 +269,16 @@
    border: 3px solid #ffffff;
    animation: zen-theme-picker-dot-animation 0.5s;
    transform: translate(-50%, -50%);
-    pointer-events: none;

    &:first-of-type {
      width: 36px;
      height: 36px;
      border-width: 4px;
      z-index: 2;
-      pointer-events: all;
      transition: transform 0.2s;
      &:hover {
        transform: scale(1.05) translate(-50%, -50%);
      }
-      transform-origin: center center;
    }

    &[dragging='true'] {
@@ -354,13 +360,13 @@
 }

 #PanelUI-zen-gradient-generator-texture-wrapper {
-  width: 5rem;
-  height: 5rem;
+  width: 4rem;
+  height: 4rem;
  position: relative;

  @media (-moz-platform: macos) {
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
  }

  &::after {
@@ -441,6 +447,6 @@
  }

  #PanelUI-zen-gradient-slider-wave svg path {
-    stroke: light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5)) !important;
+    stroke: dimgray !important;
  }
 }
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -34,8 +34,8 @@

  & toolbarbutton {
    margin: 0;
-    width: 30px;
-    height: 30px;
+    width: 28px;
+    height: 28px;
    display: flex;
    justify-content: center;
    padding: 0 !important;
@@ -72,8 +72,9 @@
      background-color: var(--zen-toolbar-element-bg);
    }

-    & label {
-      margin: 0 !important;
+    &[dragged='true'] {
+      outline: 1px solid var(--zen-colors-primary);
+      outline-offset: -1px;
    }
  }

@@ -142,7 +143,7 @@
 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
  padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
-  font-weight: 500;
+  font-weight: 600;
  position: relative;
  max-height: var(--zen-workspace-indicator-height);
  min-height: var(--zen-workspace-indicator-height);
@@ -164,7 +165,7 @@
    position: absolute;
    top: var(--zen-toolbox-padding);
    left: calc(var(--zen-toolbox-padding) + 2px);
-    width: calc(100% - var(--zen-toolbox-padding) * 3);
+    width: calc(100% - var(--zen-toolbox-padding) * 2 - 4px);
    height: calc(100% - var(--zen-toolbox-padding) * 2);
  }

@@ -198,6 +199,7 @@
  }

  .zen-current-workspace-indicator-name {
+    opacity: 0.5;
    display: block;
    white-space: nowrap;
    overflow: hidden;
@@ -206,13 +208,12 @@
  }

  .zen-workspaces-actions {
+    --toolbarbutton-inner-padding: 4px;
    margin-left: auto !important;
    opacity: 0;
    visibility: collapse;
    transition: opacity 0.1s;
    order: 5;
-    --toolbarbutton-inner-padding: 6px;
-    --tab-border-radius: 8px;

    :root[zen-renaming-tab='true'] & {
      display: none;
--- a/surfer.json
+++ b/surfer.json
@@ -5,8 +5,8 @@
  "binaryName": "zen",
  "version": {
    "product": "firefox",
-    "version": "140.0.2",
-    "candidate": "140.0.2"
+    "version": "139.0.4",
+    "candidate": "140.0"
  },
  "buildOptions": {
    "generateBranding": true
@@ -19,7 +19,7 @@
      "brandShortName": "Zen",
      "brandFullName": "Zen Browser",
      "release": {
-        "displayVersion": "1.14b",
+        "displayVersion": "1.13.2b",
        "github": {
          "repo": "zen-browser/desktop"
        },
@@ -39,7 +39,7 @@
      "brandShortName": "Twilight",
      "brandFullName": "Zen Twilight",
      "release": {
-        "displayVersion": "1.15t",
+        "displayVersion": "1.14t",
        "github": {
          "repo": "zen-browser/desktop"
        }
				`@@ -0,0 +1 @@`
				`https://cdn.jsdelivr.net/npm/animejs/+esm: v4.0.2`
				`@@ -1 +0,0 @@`
				`https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0`