diff --git a/ui/atproto/feed.css b/ui/atproto/feed.css
index 6c85258..4af028d 100644
--- a/ui/atproto/feed.css
+++ b/ui/atproto/feed.css
@@ -97,7 +97,7 @@ h1 {
   /* Rise + fade in on first paint and as pages append (transform/opacity only);
      a brief per-group stagger (--enter-delay, set in feed.js) gives the feed an
      organic, alive entrance. */
-  animation: feed-group-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+  animation: feed-group-enter 0.45s var(--ease-out) backwards;
   animation-delay: var(--enter-delay, 0ms);
 }
 
diff --git a/ui/keyboard/index.css b/ui/keyboard/index.css
index d154577..33f7619 100644
--- a/ui/keyboard/index.css
+++ b/ui/keyboard/index.css
@@ -93,7 +93,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.05s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: background-color 0.05s var(--ease-out);
   user-select: none;
   box-shadow:
     0 1px 0 var(--kb-border),
@@ -156,7 +156,7 @@ body {
 .key.layout-label {
   font-size: var(--font-size-base);
   color: transparent;
-  animation: layout-label 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: layout-label 1s var(--ease-out) forwards;
 }
 
 /* Hidden state */
@@ -237,7 +237,7 @@ body {
   justify-content: center;
   padding: 0;
   opacity: 0.5;
-  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: opacity 0.15s var(--ease-out);
 }
 
 .emoji-tab.active {
@@ -247,7 +247,7 @@ body {
 
 .emoji-tab.abc,
 .emoji-tab.backspace {
-  transition: background-color 0.05s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: background-color 0.05s var(--ease-out);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
 }
diff --git a/ui/settings/index.css b/ui/settings/index.css
index e4e985b..8eaba43 100644
--- a/ui/settings/index.css
+++ b/ui/settings/index.css
@@ -918,11 +918,11 @@ wifi-signal span.on {
 }
 
 .wifi-active {
-  animation: wifi-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: wifi-rise 0.35s var(--ease-out);
 }
 
 .wifi-connect-form {
-  animation: wifi-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: wifi-rise 0.22s var(--ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/ui/system/content_blocker_panel.js b/ui/system/content_blocker_panel.js
index 3180285..4c4e8aa 100644
--- a/ui/system/content_blocker_panel.js
+++ b/ui/system/content_blocker_panel.js
@@ -47,7 +47,7 @@ class ContentBlockerPanel extends LitElement {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
-      animation: panel-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      animation: panel-in 0.18s var(--ease-out);
     }
 
     @keyframes panel-in {
diff --git a/ui/system/desktop/index.css b/ui/system/desktop/index.css
index 20a7917..5c0eb22 100644
--- a/ui/system/desktop/index.css
+++ b/ui/system/desktop/index.css
@@ -8,7 +8,7 @@
 
    Visual language unified with the Pebble: asymmetric border-radii on
    dock + palette card; warm oklch(35% 0.03 105 / …) shadow stack;
-   theme-color halo via filter; cubic-bezier(0.16, 1, 0.3, 1) easing; a
+   theme-color halo via filter; var(--ease-out) easing; a
    slow "breath" on the dock idle state. */
 
 @import url(beaver://system/desktop/tokens.css);
diff --git a/ui/system/desktop/notification_panel.css b/ui/system/desktop/notification_panel.css
index b316b65..447062e 100644
--- a/ui/system/desktop/notification_panel.css
+++ b/ui/system/desktop/notification_panel.css
@@ -32,7 +32,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  animation: notif-panel-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: notif-panel-in 0.18s var(--ease-out);
 }
 
 @keyframes notif-panel-in {
diff --git a/ui/system/desktop/peers_popover.css b/ui/system/desktop/peers_popover.css
index e33dd7a..90fae56 100644
--- a/ui/system/desktop/peers_popover.css
+++ b/ui/system/desktop/peers_popover.css
@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  animation: peers-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: peers-popover-in 0.18s var(--ease-out);
   /* Always grows toward the dock (upward). */
   transform-origin: bottom center;
 }
diff --git a/ui/system/desktop/repos_popover.css b/ui/system/desktop/repos_popover.css
index 17e4228..f062a04 100644
--- a/ui/system/desktop/repos_popover.css
+++ b/ui/system/desktop/repos_popover.css
@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  animation: repos-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: repos-popover-in 0.18s var(--ease-out);
   transform-origin: bottom center;
 }
 
diff --git a/ui/system/desktop/tokens.css b/ui/system/desktop/tokens.css
index ccfe8e4..2732db8 100644
--- a/ui/system/desktop/tokens.css
+++ b/ui/system/desktop/tokens.css
@@ -8,7 +8,7 @@
 */
 
 :root {
-  --workshop-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --workshop-easing: var(--ease-out);
   --workshop-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --workshop-morph-duration: 0.42s;
   --workshop-shadow:
diff --git a/ui/system/desktop/topbar.css b/ui/system/desktop/topbar.css
index f046873..ffb2ad9 100644
--- a/ui/system/desktop/topbar.css
+++ b/ui/system/desktop/topbar.css
@@ -312,7 +312,7 @@ body[data-focus="page"] .topbar-page {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  animation: topbar-menu-in 0.14s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: topbar-menu-in 0.14s var(--ease-out);
   transform-origin: top right;
 }
 
@@ -377,7 +377,7 @@ body[data-focus="page"] .topbar-page {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  animation: topbar-menu-in 0.14s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: topbar-menu-in 0.14s var(--ease-out);
   transform-origin: top left;
 }
 
diff --git a/ui/system/desktop/url_records_popover.js b/ui/system/desktop/url_records_popover.js
index 929d78c..cbafd67 100644
--- a/ui/system/desktop/url_records_popover.js
+++ b/ui/system/desktop/url_records_popover.js
@@ -63,7 +63,7 @@ class UrlRecordsPopover extends LitElement {
       flex-direction: column;
       box-shadow: 0 4px 16px var(--color-shadow-menu);
       font-family: var(--font-family-base);
-      animation: panel-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      animation: panel-in 0.18s var(--ease-out);
     }
     @keyframes panel-in {
       from {
diff --git a/ui/system/mediacenter/index.css b/ui/system/mediacenter/index.css
index 76beddc..e84f064 100644
--- a/ui/system/mediacenter/index.css
+++ b/ui/system/mediacenter/index.css
@@ -38,7 +38,7 @@
   --mc-danger-bg: oklch(30% 0.08 35 / 0.7);
 
   /* Transitions */
-  --mc-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --mc-ease: var(--ease-out);
   --mc-transition-fast: 0.18s var(--mc-ease);
   --mc-transition-medium: 0.3s var(--mc-ease);
   --mc-transition-slow: 0.5s var(--mc-ease);
diff --git a/ui/system/mediacenter/notification_panel.js b/ui/system/mediacenter/notification_panel.js
index ab556ae..9c8d483 100644
--- a/ui/system/mediacenter/notification_panel.js
+++ b/ui/system/mediacenter/notification_panel.js
@@ -97,7 +97,7 @@ class NotificationPanelMC extends LitElement {
       border-radius: var(--radius-md);
       color: var(--mc-text-secondary);
       cursor: pointer;
-      transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      transition: background 0.18s var(--ease-out);
     }
 
     .action-item.focused {
diff --git a/ui/system/mediacenter/open_in_dialog.js b/ui/system/mediacenter/open_in_dialog.js
index 6d4759b..49bb117 100644
--- a/ui/system/mediacenter/open_in_dialog.js
+++ b/ui/system/mediacenter/open_in_dialog.js
@@ -68,7 +68,7 @@ class OpenInDialog extends LitElement {
       border-radius: var(--radius-md);
       color: var(--mc-text-secondary);
       cursor: pointer;
-      transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      transition: background 0.18s var(--ease-out);
     }
 
     .choice-item.focused {
diff --git a/ui/system/mediacenter/system_menu.js b/ui/system/mediacenter/system_menu.js
index e803801..9bf0f03 100644
--- a/ui/system/mediacenter/system_menu.js
+++ b/ui/system/mediacenter/system_menu.js
@@ -58,7 +58,7 @@ class SystemMenu extends LitElement {
       border-radius: var(--radius-md);
       color: var(--mc-text-secondary);
       cursor: pointer;
-      transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      transition: background 0.18s var(--ease-out);
     }
 
     .menu-item.focused {
diff --git a/ui/system/menu_shared.css b/ui/system/menu_shared.css
index 244512f..3f2dcec 100644
--- a/ui/system/menu_shared.css
+++ b/ui/system/menu_shared.css
@@ -12,7 +12,7 @@ menu {
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
   padding-left: 0;
-  animation: menu-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: menu-in 0.15s var(--ease-out);
   transform-origin: top left;
 }
 
diff --git a/ui/system/mobile/index.css b/ui/system/mobile/index.css
index fb76529..7f4382a 100644
--- a/ui/system/mobile/index.css
+++ b/ui/system/mobile/index.css
@@ -27,9 +27,9 @@ body.mobile-mode .mobile-webview-container {
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    opacity 0.3s var(--ease-out),
+    visibility 0.3s var(--ease-out),
+    bottom 0.3s var(--ease-out);
   z-index: var(--z-base);
 }
 
@@ -75,7 +75,7 @@ body.mobile-mode #footer {
   align-items: center;
   justify-content: center;
   opacity: 1;
-  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: opacity 0.4s var(--ease-out);
 }
 
 body.mobile-mode .mobile-splash.active {
diff --git a/ui/system/mobile/pebble.css b/ui/system/mobile/pebble.css
index 16b5c42..3a59cc1 100644
--- a/ui/system/mobile/pebble.css
+++ b/ui/system/mobile/pebble.css
@@ -11,7 +11,7 @@
   --pebble-shadow:
     0 1px 2px oklch(35% 0.03 105 / 0.18), 0 6px 18px oklch(35% 0.03 105 / 0.18),
     0 18px 48px oklch(35% 0.03 105 / 0.12);
-  --pebble-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --pebble-easing: var(--ease-out);
   --pebble-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --pebble-morph-duration: 0.42s;
   --pebble-side-margin: 12px;
diff --git a/ui/system/new_view.css b/ui/system/new_view.css
index 972a0cb..a047e85 100644
--- a/ui/system/new_view.css
+++ b/ui/system/new_view.css
@@ -89,7 +89,7 @@ body {
   max-height: 0;
   overflow-y: auto;
   margin-top: var(--spacing-md);
-  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: max-height 0.3s var(--ease-out);
 }
 
 .container.has-results .results-container {
diff --git a/ui/system/remote/index.css b/ui/system/remote/index.css
index 18e599a..a829141 100644
--- a/ui/system/remote/index.css
+++ b/ui/system/remote/index.css
@@ -96,8 +96,8 @@ body {
   margin-bottom: 0.5em;
   cursor: pointer;
   transition:
-    background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.18s var(--ease-out),
+    transform 0.12s var(--ease-out);
   border: 1px solid var(--color-border);
 }
 
@@ -146,8 +146,8 @@ body {
   margin-bottom: 0.5em;
   cursor: pointer;
   transition:
-    background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.18s var(--ease-out),
+    transform 0.12s var(--ease-out);
   border: 1px dashed var(--color-border);
 }
 
@@ -184,7 +184,7 @@ body {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-bold);
   caret-color: var(--color-primary);
-  transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: border-color 0.18s var(--ease-out);
 }
 
 .pin-input:focus {
@@ -214,8 +214,8 @@ body {
   font-size: 1em;
   cursor: pointer;
   transition:
-    background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.18s var(--ease-out),
+    transform 0.1s var(--ease-out);
 }
 
 .pin-btn:active {
@@ -268,7 +268,7 @@ body {
   padding: 0.5em;
   cursor: pointer;
   border-radius: 50%;
-  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: background 0.18s var(--ease-out);
 }
 
 .disconnect-btn:active {
@@ -321,8 +321,8 @@ body {
   color: var(--color-text);
   cursor: pointer;
   transition:
-    background 0.05s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.05s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.05s var(--ease-out),
+    transform 0.05s var(--ease-out);
 }
 
 .transport-btn:active {
@@ -386,9 +386,9 @@ body {
     0 2px 0 var(--color-border),
     0 2px 4px var(--color-shadow);
   transition:
-    background 0.05s cubic-bezier(0.16, 1, 0.3, 1),
-    box-shadow 0.05s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.05s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.05s var(--ease-out),
+    box-shadow 0.05s var(--ease-out),
+    transform 0.05s var(--ease-out);
 }
 
 .dpad-btn:active {
@@ -471,9 +471,9 @@ body {
     0 2px 0 var(--color-border),
     0 2px 4px var(--color-shadow);
   transition:
-    background 0.05s cubic-bezier(0.16, 1, 0.3, 1),
-    box-shadow 0.05s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.05s cubic-bezier(0.16, 1, 0.3, 1);
+    background 0.05s var(--ease-out),
+    box-shadow 0.05s var(--ease-out),
+    transform 0.05s var(--ease-out);
 }
 
 .utility-btn:active {
diff --git a/ui/system/search.css b/ui/system/search.css
index 098e894..6179793 100644
--- a/ui/system/search.css
+++ b/ui/system/search.css
@@ -90,8 +90,8 @@ h1 {
   margin-top: 0;
   padding: 0 var(--spacing-sm);
   transition:
-    max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    max-height 0.3s var(--ease-out),
+    margin-top 0.3s var(--ease-out);
 }
 
 .container.has-results .results-container {
diff --git a/ui/system/services/channels.js b/ui/system/services/channels.js
index ac8430e..e756bdd 100644
--- a/ui/system/services/channels.js
+++ b/ui/system/services/channels.js
@@ -207,7 +207,7 @@ function ensureP2pDialogStyles() {
         --workshop-shadow,
         0 12px 32px oklch(20% 0.04 70 / 0.28)
       );
-      animation: p2p-open-dialog-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      animation: p2p-open-dialog-in 0.18s var(--ease-out);
     }
     .p2p-open-dialog::backdrop {
       background: oklch(20% 0.04 70 / 0.36);
diff --git a/ui/system/toasts.css b/ui/system/toasts.css
index 7f77984..b499301 100644
--- a/ui/system/toasts.css
+++ b/ui/system/toasts.css
@@ -28,8 +28,8 @@
   transform: translateY(-8px);
   opacity: 0;
   transition:
-    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    transform 0.25s var(--ease-out),
+    opacity 0.25s var(--ease-out);
 }
 
 .toast.visible {
diff --git a/ui/system/web_view.css b/ui/system/web_view.css
index 14bfac5..81cf681 100644
--- a/ui/system/web_view.css
+++ b/ui/system/web_view.css
@@ -280,8 +280,8 @@
   height: 2px;
   background: var(--color-primary);
   transition:
-    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    width 0.3s var(--ease-out),
+    opacity 0.3s var(--ease-out);
   opacity: 0;
   width: 0;
   z-index: var(--z-base);
@@ -304,8 +304,8 @@
   opacity: 0;
   animation: none;
   transition:
-    width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
+    width 0.2s var(--ease-out),
+    opacity 0.4s var(--ease-out) 0.2s;
 }
 
 @keyframes load-travel {
diff --git a/ui/themes/default/index.css b/ui/themes/default/index.css
index ab9cd1b..2cc1a10 100644
--- a/ui/themes/default/index.css
+++ b/ui/themes/default/index.css
@@ -79,7 +79,8 @@
   --size-notification-icon: 2em;
 
   /* ===== Transitions ===== */
-  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --transition-fast: 0.18s var(--ease-out);
 
   /* ===== Opacity ===== */
   --opacity-muted: 0.6;
diff --git a/ui/themes/lcars/index.css b/ui/themes/lcars/index.css
index 6f35614..f2c1617 100644
--- a/ui/themes/lcars/index.css
+++ b/ui/themes/lcars/index.css
@@ -75,6 +75,7 @@
   --size-notification-icon: 2em;
 
   /* ===== Transitions ===== */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.1s ease;
 
   /* ===== Opacity ===== */
diff --git a/ui/themes/meadow/index.css b/ui/themes/meadow/index.css
index 4afa11e..d017980 100644
--- a/ui/themes/meadow/index.css
+++ b/ui/themes/meadow/index.css
@@ -77,6 +77,7 @@
   --size-notification-icon: 2em;
 
   /* ===== Transitions ===== */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.2s ease-out;
 
   /* ===== Opacity ===== */
diff --git a/ui/themes/ocean/index.css b/ui/themes/ocean/index.css
index 1f30bd2..eb62467 100644
--- a/ui/themes/ocean/index.css
+++ b/ui/themes/ocean/index.css
@@ -91,7 +91,8 @@
 
   /* ===== Transitions ===== */
   /* A slow tidal drift. */
-  --transition-fast: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --transition-fast: 0.22s var(--ease-out);
 
   /* ===== Opacity ===== */
   --opacity-muted: 0.62;
diff --git a/ui/themes/winamp/index.css b/ui/themes/winamp/index.css
index a0bfc9b..f51297e 100644
--- a/ui/themes/winamp/index.css
+++ b/ui/themes/winamp/index.css
@@ -75,6 +75,7 @@
   --size-notification-icon: 2em;
 
   /* ===== Transitions ===== */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.1s ease;
 
   /* ===== Opacity ===== */