From 0febcacb938f36946f80e34aadde0b391d67ea00 Mon Sep 17 00:00:00 2001
From: Frederic Hemberger <mail@frederic-hemberger.de>
Date: Sat, 3 Aug 2024 13:30:22 +0200
Subject: [PATCH 01/11] fix(shortcuts-settings): `settingsJSON` must be defined
 if note doesn't exist

---
 src/components/shortcuts-settings.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index ad8aca576..de31c3348 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -1055,16 +1055,16 @@ function ImportExport({ shortcuts, onClose }) {
                       const { note = '' } = relationship;
                       // const newNote = `${note}\n\n\n$<phanpy-shortcuts-settings>{shortcutsStr}</phanpy-shortcuts-settings>`;
                       let newNote = '';
+                      const settingsJSON = JSON.stringify({
+                        v: '1', // version
+                        dt: Date.now(), // datetime stamp
+                        data: shortcutsStr, // shortcuts settings string
+                      });
                       if (
                         /<phanpy-shortcuts-settings>(.*)<\/phanpy-shortcuts-settings>/.test(
                           note,
                         )
                       ) {
-                        const settingsJSON = JSON.stringify({
-                          v: '1', // version
-                          dt: Date.now(), // datetime stamp
-                          data: shortcutsStr, // shortcuts settings string
-                        });
                         newNote = note.replace(
                           /<phanpy-shortcuts-settings>(.*)<\/phanpy-shortcuts-settings>/,
                           `<phanpy-shortcuts-settings>${settingsJSON}</phanpy-shortcuts-settings>`,

From cf2461add52f7ff0f8f955291c154673499551a7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 2 Aug 2024 13:42:43 +0800
Subject: [PATCH 02/11] Better checks

---
 src/utils/group-notifications.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx
index f67d9d577..1aeb0fafe 100644
--- a/src/utils/group-notifications.jsx
+++ b/src/utils/group-notifications.jsx
@@ -29,8 +29,12 @@ export function fixNotifications(notifications) {
 }
 
 export function massageNotifications2(notifications) {
-  if (notifications?.accounts) {
-    const { accounts, notificationGroups, statuses } = notifications;
+  if (notifications?.notificationGroups) {
+    const {
+      accounts = [],
+      notificationGroups = [],
+      statuses = [],
+    } = notifications;
     return notificationGroups.map((group) => {
       const { sampleAccountIds, statusId } = group;
       const sampleAccounts =

From 4ebfb544aa1aa476e660dd742ec8fe7aac3b7d67 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 3 Aug 2024 19:14:04 +0800
Subject: [PATCH 03/11] This caching seems still buggy

Revert to SWR with 1-min expiry
---
 public/sw.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index b1a95073e..715037296 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -101,11 +101,11 @@ const apiIntermediateRoute = new RegExpRoute(
   // - trends/*
   // - timelines/link
   /^https?:\/\/[^\/]+\/api\/v\d+\/(trends|timelines\/link)/,
-  new CacheFirst({
+  new StaleWhileRevalidate({
     cacheName: 'api-intermediate',
     plugins: [
       new ExpirationPlugin({
-        maxAgeSeconds: 10 * 60, // 10 minutes
+        maxAgeSeconds: 1 * 60, // 1min
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],

From 99ee6c3979e15cd3660c637780f96bd9f0b6d331 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 10:06:55 +0800
Subject: [PATCH 04/11] Don't reuse var for both timeout and interval

---
 src/components/background-service.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index 15647fe1b..bcadd2a44 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -46,6 +46,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
 
   useEffect(() => {
     let sub;
+    let streamTimeout;
     let pollNotifications;
     if (isLoggedIn && visible) {
       const { masto, streaming, instance } = api();
@@ -56,7 +57,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
         let hasStreaming = false;
         // 2. Start streaming
         if (streaming) {
-          pollNotifications = setTimeout(() => {
+          streamTimeout = setTimeout(() => {
             (async () => {
               try {
                 hasStreaming = true;
@@ -94,7 +95,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
     return () => {
       sub?.unsubscribe?.();
       sub = null;
-      clearTimeout(pollNotifications);
+      clearTimeout(streamTimeout);
       clearInterval(pollNotifications);
     };
   }, [visible, isLoggedIn]);

From 2aff1dc1fd98f40a5ce3efe6de1b3a13960d5aad Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 10:09:33 +0800
Subject: [PATCH 05/11] Try switch to 20s interval

---
 src/components/background-service.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx
index bcadd2a44..46b9c4cc6 100644
--- a/src/components/background-service.jsx
+++ b/src/components/background-service.jsx
@@ -9,7 +9,7 @@ import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
 const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
-const POLL_INTERVAL = 15_000; // 15 seconds
+const POLL_INTERVAL = 20_000; // 20 seconds
 
 export default memo(function BackgroundService({ isLoggedIn }) {
   // Notifications service

From f05e3012e390ba23486f4cf916a884055ff5dfef Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 13:32:30 +0800
Subject: [PATCH 06/11] Preliminary step for RTL

---
 src/app.css                           | 321 +++++++++++++-------------
 src/app.jsx                           |   2 +
 src/components/ICONS.jsx              | 117 +++++++---
 src/components/account-block.css      |   2 +
 src/components/account-block.jsx      |   2 +-
 src/components/account-info.css       |  32 ++-
 src/components/account-info.jsx       |  11 +-
 src/components/compose.css            |  28 +--
 src/components/compose.jsx            |  10 +-
 src/components/drafts.css             |   2 +-
 src/components/generic-accounts.css   |   6 +-
 src/components/icon.jsx               |  10 +-
 src/components/links-bar.css          |  13 +-
 src/components/media-modal.jsx        |  20 +-
 src/components/media-post.css         |   2 +-
 src/components/menu2.jsx              |  14 +-
 src/components/modal.css              |  19 +-
 src/components/name-text.jsx          |   6 +-
 src/components/nav-menu.css           |  12 +-
 src/components/poll.jsx               |   3 -
 src/components/report-modal.css       |   4 +-
 src/components/search-form.jsx        |   1 +
 src/components/shortcuts-settings.css |  18 +-
 src/components/shortcuts-settings.jsx |   5 +
 src/components/shortcuts.css          |  10 +-
 src/components/status.css             | 172 ++++++++------
 src/components/status.jsx             |  20 +-
 src/components/timeline.jsx           |  11 +-
 src/components/translation-block.css  |   7 +-
 src/index.css                         |  16 ++
 src/pages/accounts.css                |   4 +-
 src/pages/catchup.css                 |  44 ++--
 src/pages/filters.jsx                 |   1 +
 src/pages/hashtag.jsx                 |   5 +-
 src/pages/login.css                   |   5 +-
 src/pages/login.jsx                   |   1 +
 src/pages/notifications.css           |  15 +-
 src/pages/search.css                  |  15 +-
 src/pages/settings.css                |  10 +-
 src/pages/status.css                  |   4 +-
 src/pages/status.jsx                  |   2 +
 src/pages/trending.jsx                |   2 +-
 src/pages/welcome.css                 |   7 +-
 src/utils/is-rtl.js                   |  26 +++
 44 files changed, 654 insertions(+), 383 deletions(-)
 create mode 100644 src/utils/is-rtl.js

diff --git a/src/app.css b/src/app.css
index e675c4d14..52245283c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -162,7 +162,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   white-space: nowrap;
 }
 .deck > header .header-grid > .header-side:last-of-type {
-  text-align: right;
+  text-align: end;
   grid-column: 3;
 }
 .deck > header .header-grid :is(button, .button).plain {
@@ -181,8 +181,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   grid-template-columns: 1fr max-content;
 }
 .deck > header .header-grid-2 h1 {
-  text-align: left;
-  padding-left: 8px;
+  text-align: start;
+  padding-inline-start: 8px;
 }
 .deck > header .header-grid h1:has(.ancestors-indicator) {
   display: flex;
@@ -217,6 +217,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     opacity: 0.25;
   }
 }
+@keyframes indeterminate-bar-rtl {
+  0% {
+    transform: translateX(50%);
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0.25;
+  }
+}
 .deck > header.loading:after {
   pointer-events: none;
   content: '';
@@ -232,6 +245,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transparent
   );
   animation: indeterminate-bar 1s ease-in-out infinite alternate;
+  &:dir(rtl) {
+    animation-name: indeterminate-bar-rtl;
+  }
 }
 @media (min-width: 40em) {
   .deck > header.loading:after {
@@ -268,6 +284,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
           width: 95vw;
           max-width: calc(320px * 3.3);
           transform: translateX(calc(-50% + var(--main-width) / 2));
+          &:dir(rtl) {
+            transform: translateX(calc(50% - var(--main-width) / 2));
+          }
         }
       }
 
@@ -346,6 +365,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   margin: 0;
   padding: 0;
   border-bottom: var(--hairline-width) solid var(--divider-color);
+  --line-dir: var(--to-forward);
 }
 .timeline.flat > li {
   border-bottom: none;
@@ -362,10 +382,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   --avatar-size: 50px;
   --avatar-margin-start: 16px;
   --avatar-margin-end: 12px;
+  --line-curve: 45deg;
+  :dir(rtl) & {
+    --line-curve: -45deg;
+  }
 }
 .timeline.contextual > li {
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -394,7 +418,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus) {
-  padding-left: 40px;
+  padding-inline-start: 40px;
 }
 .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
   background-color: var(--bg-color);
@@ -408,7 +432,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline.contextual .replies[data-comments-level='4']:has(.replies) {
   overflow-x: auto;
-  mask-image: linear-gradient(to left, transparent, black 32px);
+  mask-image: linear-gradient(var(--to-backward), transparent, black 32px);
 }
 .timeline.contextual
   .replies[data-comments-level='4']:has(.replies)
@@ -426,145 +450,61 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > :is(.status-link, .status-focus)
   + .replies
   .replies-summary {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-/* .timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant.thread
   > :is(.status-link, .status-focus)
   + .replies
   :is(.status-link, .status-focus) {
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
       (var(--line-margin-end) * (var(--comments-level) - 1))
   );
 }
-/* .timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .status-link {
-  padding-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant.thread
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  .status-link {
-  padding-left: calc(
-    var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
-      (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus)
   + .replies
   .replies-summary {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--thread-start) + var(--line-margin-end) * var(--comments-level)
   );
 }
-/* .timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
-  );
-}
-.timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  > .replies-summary {
-  margin-left: calc(
-    var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
-  );
-} */
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus)
   + .replies
   :is(.status-link, .status-focus) {
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--thread-start) + var(--line-margin-end) * var(--comments-level)
   );
 }
-/* .timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .status-link {
-  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2));
-}
-.timeline.contextual
-  > li.descendant:not(.thread)
-  > .status-link
-  + .replies
-  .replies
-  .replies
-  .status-link {
-  padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
-} */
 .timeline.contextual > li.descendant:not(.thread):before {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 .timeline.contextual > li .replies-link {
   color: var(--text-insignificant-color);
-  margin-left: 16px;
+  margin-inline-start: 16px;
   margin-top: -12px;
   padding-bottom: 12px;
   font-size: 90%;
 }
 .timeline.contextual > li.ancestor .replies-link {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
   );
 }
@@ -572,7 +512,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > li.thread
   > :is(.status-link, .status-focus)
   .replies-link {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
   );
 }
@@ -603,7 +543,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   list-style: none;
   gap: 8px;
   align-items: center;
-  margin-right: calc(44px + 8px);
+  margin-inline-end: calc(44px + 8px);
 
   b {
     font-weight: 500;
@@ -618,7 +558,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       transition: transform 0.3s ease;
 
       &:not(:first-child) {
-        margin: 0 0 0 -4px;
+        transform: rotate(0deg);
+        margin: 0;
+        margin-inline-start: -4px;
       }
     }
   }
@@ -637,7 +579,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 
   .replies-parent-link {
     position: absolute;
-    right: 4px;
+    inset-inline-end: 4px;
     height: 100%;
     z-index: 2;
     font-size: 16px;
@@ -648,8 +590,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     align-items: center;
     padding: var(--summary-padding) calc(var(--summary-padding) * 2);
     transform: translateX(100%);
-    margin: calc(-1 * var(--summary-padding)) calc(-1 * var(--summary-padding))
-      calc(-1 * var(--summary-padding)) 0;
+    &:dir(rtl) {
+      transform: translateX(-100%);
+    }
+    margin: calc(-1 * var(--summary-padding)) 0;
+    margin-inline-end: calc(-1 * var(--summary-padding));
     border-radius: 8px;
     background-color: var(--link-bg-color);
 
@@ -681,7 +626,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   color: var(--text-color);
   background-color: var(--comment-line-color);
   background-image: linear-gradient(
-    to top right,
+    to top var(--forward),
     var(--comment-line-color),
     var(--bg-faded-color)
   );
@@ -697,7 +642,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   }
 }
 .timeline.contextual > li .replies[open] > .replies-summary {
-  border-bottom-left-radius: 0;
+  border-end-start-radius: 0;
 
   .avatars {
     opacity: 0.5;
@@ -727,7 +672,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   );
   --line-end: calc(var(--line-start) + var(--line-width));
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -768,14 +713,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 /* .timeline.contextual > li .replies .replies li:before {
   --line-start: calc(
@@ -814,8 +759,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   > ul > li:only-child {
     > .replies {
       > ul > li:only-child {
-        margin-left: calc(-1 * var(--line-margin-end));
-        background-position: calc(16px) 0;
+        margin-inline-start: calc(-1 * var(--line-margin-end));
+        background-position: 16px 0;
+        &:dir(rtl) {
+          background-position: -16px 0;
+        }
         background-size: 100% calc(20px + 8px);
 
         &:before {
@@ -856,7 +804,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   --line-width: 3px;
   --line-end: calc(var(--line-start) + var(--line-width));
   background-image: linear-gradient(
-    to right,
+    var(--line-dir),
     transparent,
     transparent var(--line-start),
     var(--comment-line-color) var(--line-start),
@@ -868,8 +816,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline:not(.flat) > li.timeline-item-container-start {
   margin-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   border-bottom: 0;
   background-position: 0 calc(16px + var(--avatar-size));
 }
@@ -882,8 +830,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline:not(.flat) > li.timeline-item-container-end {
   margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
   background-size: 100% 16px;
 
@@ -909,8 +857,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 
 .timeline .show-more {
-  padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
-  text-align: left;
+  padding-inline-start: calc(
+    var(--line-end) + var(--line-margin-end)
+  ) !important;
+  text-align: start;
   background-color: transparent !important;
   backdrop-filter: none !important;
   position: relative;
@@ -918,7 +868,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   padding-block: 16px !important;
 
   .avatars-bunch > .avatar:not(:first-child) {
-    margin-left: -4px;
+    margin-inline-start: -4px;
   }
 }
 .timeline .show-more:hover {
@@ -930,14 +880,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   position: absolute;
   top: 10px;
-  left: var(--line-start);
+  inset-inline-start: var(--line-start);
   width: var(--line-diameter);
   height: var(--line-diameter);
   border-radius: var(--line-radius);
   border-style: solid;
   border-width: var(--line-width);
   border-color: transparent transparent var(--comment-line-color) transparent;
-  transform: rotate(45deg);
+  transform: rotate(var(--line-curve));
 }
 
 .status-loading {
@@ -988,7 +938,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel {
   --carousel-faded-color: var(--bg-faded-color);
   background: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--carousel-faded-color),
     transparent
   );
@@ -1058,12 +1008,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   display: none;
 }
 .status-carousel .status-carousel-beacon {
-  margin-right: calc(-1 * var(--carousel-gap));
+  margin-inline-end: calc(-1 * var(--carousel-gap));
   pointer-events: none;
   opacity: 0;
 
   ~ .status-carousel-beacon {
-    margin-left: calc(-1 * var(--carousel-gap));
+    margin-inline-start: calc(-1 * var(--carousel-gap));
   }
 }
 /*
@@ -1107,7 +1057,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel.boosts-carousel > ul > li:before {
   content: counter(index);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   font-size: 10px;
   color: var(--text-insignificant-color);
   padding: 6px;
@@ -1147,11 +1097,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   box-shadow: 0 1px var(--bg-color);
 
   &:has(.status-badge:not(:empty)) {
-    border-top-right-radius: 8px;
+    border-start-end-radius: 8px;
   }
 
-  .status-carousel.boosts-carousel & {
-    border-top-left-radius: 8px;
+  .status-carousel.boosts-carousel &:not(.timeline-item-carousel-group &) {
+    border-start-start-radius: 8px;
   }
 }
 .status-carousel-link::focus {
@@ -1189,14 +1139,29 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transform: translate3d(0, 0, 0);
   }
 }
+@keyframes slide-in-rtl {
+  0% {
+    transform: translate3d(-100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
 .deck-backdrop .deck {
   width: var(--main-width);
   max-width: 100vw;
   background-color: var(--bg-color);
   box-shadow: -1px 0 var(--bg-color);
+  &:dir(rtl) {
+    box-shadow: 1px 0 var(--bg-color);
+  }
 }
 .deck-backdrop .deck.slide-in:not(.deck-view-full) {
   animation: slide-in 0.5s var(--timing-function);
+
+  &:dir(rtl) {
+    animation-name: slide-in-rtl;
+  }
 }
 .deck-backdrop .deck .status {
   max-width: var(--main-width);
@@ -1240,7 +1205,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   content: '';
   display: inline-block;
   position: absolute;
-  right: 10px;
+  inset-inline-end: 10px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
@@ -1519,7 +1484,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 .media-modal-container + .status-deck {
   /* display: none; */
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   z-index: -1;
   pointer-events: none;
   user-select: none;
@@ -1547,8 +1512,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     )
     #modal-container
     > div {
-    left: 0;
-    right: 350px;
+    inset-inline-start: 0;
+    inset-inline-end: 350px;
     width: auto;
   }
   /* ✨ New */
@@ -1579,8 +1544,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   position: fixed;
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
-  right: 16px;
-  right: max(16px, env(safe-area-inset-right));
+  inset-inline-end: 16px;
+  inset-inline-end: max(16px, env(safe-area-inset-right));
   padding: 16px;
   background-color: var(--button-bg-blur-color);
   /* backdrop-filter: blur(16px); */
@@ -1629,7 +1594,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
       display: block;
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline-end: 0;
       width: 14px;
       height: 14px;
       border-radius: 50%;
@@ -1696,6 +1661,10 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   border-radius: 0;
   padding: 0;
   right: env(safe-area-inset-right);
+  &:dir(rtl) {
+    right: auto;
+    left: env(safe-area-inset-left);
+  }
   width: 44px;
   height: 44px;
   display: inline-flex;
@@ -1737,6 +1706,11 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 }
 .sheet .sheet-close:not(.outer) + header {
   padding-right: max(44px, env(safe-area-inset-right));
+
+  &:dir(rtl) {
+    padding-right: max(16px, env(safe-area-inset-right));
+    padding-left: max(44px, env(safe-area-inset-left));
+  }
 }
 .sheet header :is(h1, h2, h3) {
   margin: 0;
@@ -1774,6 +1748,10 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     width: 100%;
     height: 100%;
   }
+
+  :dir(rtl) &.rtl-flip {
+    transform: scaleX(-1);
+  }
 }
 
 /* TAG */
@@ -1839,7 +1817,7 @@ body > .szh-menu-container {
   border: 1px solid var(--outline-color);
   border-radius: 8px;
   box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
-  text-align: left;
+  text-align: start;
   /* animation: appear-smooth 0.15s ease-in-out; */
   width: 16em;
   max-width: 90vw;
@@ -1975,7 +1953,7 @@ body > .szh-menu-container {
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child,
 .szh-menu .menu-horizontal > *:not(:only-child):first-child .szh-menu__item {
-  padding-right: 4px !important;
+  padding-inline-end: 4px !important;
 }
 .szh-menu
   .menu-horizontal
@@ -1984,12 +1962,12 @@ body > .szh-menu-container {
   .menu-horizontal
   > *:not(:only-child):not(:first-child):not(:last-child)
   .szh-menu__item {
-  padding-left: 8px !important;
-  padding-right: 4px !important;
+  padding-inline-start: 8px !important;
+  padding-inline-end: 4px !important;
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):last-child,
 .szh-menu .menu-horizontal > *:not(:only-child):last-child .szh-menu__item {
-  padding-left: 8px !important;
+  padding-inline-start: 8px !important;
 }
 .szh-menu .szh-menu__item .menu-shortcut {
   opacity: 0.5;
@@ -2053,7 +2031,11 @@ body > .szh-menu-container {
           text-align: center;
           opacity: 0.5;
           text-overflow: clip;
-          mask-image: linear-gradient(to left, transparent, black 16px);
+          mask-image: linear-gradient(
+            var(--to-backward),
+            transparent,
+            black 16px
+          );
         }
       }
     }
@@ -2069,10 +2051,10 @@ body > .szh-menu-container {
     }
 
     > [class^='szh-menu']:first-child {
-      border-top-left-radius: 8px;
+      border-start-start-radius: 8px;
     }
     > [class^='szh-menu']:last-child {
-      border-top-right-radius: 8px;
+      border-start-end-radius: 8px;
     }
   }
 }
@@ -2153,6 +2135,9 @@ body > .szh-menu-container {
     background-image: var(--middle-circle),
       conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
     transform: scale(0.7);
+    &:dir(rtl) {
+      transform: scale(-0.7, 0.7);
+    }
     transition: transform 0.2s ease-in-out;
 
     &::-webkit-meter-inner-element,
@@ -2362,12 +2347,12 @@ ul.link-list li a {
   }
 }
 ul.link-list li:first-child a {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
+  border-start-start-radius: var(--radius);
+  border-start-end-radius: var(--radius);
 }
 ul.link-list li:last-child a {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
+  border-end-start-radius: var(--radius);
+  border-end-end-radius: var(--radius);
 }
 ul.link-list li a:is(:hover, :focus) {
   color: var(--text-color);
@@ -2404,8 +2389,8 @@ ul.link-list li a .icon {
 }
 .nav-menu-button.with-avatar .icon {
   position: absolute;
-  bottom: 4px;
-  right: 8px;
+  inset-block-end: 4px;
+  inset-inline-end: 8px;
   background-color: var(--bg-color);
   border-radius: 2px;
 }
@@ -2433,13 +2418,17 @@ ul.link-list li a .icon {
 } */
 #columns > * {
   overscroll-behavior: auto;
-  scroll-snap-align: left;
+  scroll-snap-align: start;
   scroll-snap-stop: always;
   overscroll-behavior: auto;
   flex-basis: min(100vw, 360px);
   flex-shrink: 0;
   box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);
+  &:dir(rtl) {
+    box-shadow: 1px 0 var(--bg-color), 2px 0 var(--drop-shadow-color),
+      3px 0 var(--bg-color);
+  }
 }
 #columns:has(> :nth-child(3)) > *:nth-child(even),
 #columns:has(> :nth-child(3))
@@ -2572,7 +2561,7 @@ ul.link-list li a .icon {
   gap: 8px;
   overflow-x: auto;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px,
     black calc(100% - 16px),
@@ -2586,6 +2575,9 @@ ul.link-list li a .icon {
       width: 95vw;
       max-width: calc(320px * 3.3);
       transform: translateX(calc(-50% + var(--main-width) / 2));
+      &:dir(rtl) {
+        transform: translateX(calc(50% - var(--main-width) / 2));
+      }
     }
   }
 
@@ -2704,7 +2696,8 @@ ul.link-list li a .icon {
   min-width: 16px;
   min-height: 16px;
   padding: 4px;
-  margin: -4px -8px -4px 0;
+  margin: -4px 0;
+  margin-inline-end: -8px;
   background-color: var(--bg-faded-color);
   border-radius: 999px;
 }
@@ -2734,11 +2727,14 @@ ul.link-list li a .icon {
   .deck-container:has(~ .deck-backdrop .deck) {
     transition: transform 0.4s ease-out;
     transform: translate3d(-5vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(5vw, 0, 0);
+    }
   }
   .deck-backdrop .deck {
     /* width: 50%;
     min-width: var(--main-width); */
-    border-left: 1px solid var(--divider-color);
+    border-inline-start: 1px solid var(--divider-color);
   }
   .timeline-deck {
     border: 0;
@@ -2799,16 +2795,19 @@ ul.link-list li a .icon {
     > li:not(.timeline-item-container-end, .timeline-item-container-middle):has(
       .status-badge:not(:empty)
     ) {
-    border-top-right-radius: 8px;
+    border-start-end-radius: 8px;
   }
   .timeline:not(.flat) > li:has(.status-link.is-active) {
     transition: var(--back-transition);
     transform: translate3d(-2.5vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(2.5vw, 0, 0);
+    }
   }
   .timeline:not(.flat)
     > li.timeline-item-container:has(.status-link.is-active) {
-    border-top-left-radius: var(--item-radius);
-    border-bottom-left-radius: var(--item-radius);
+    border-start-start-radius: var(--item-radius);
+    border-end-start-radius: var(--item-radius);
   }
   .timeline:not(.flat)
     > li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
@@ -2817,19 +2816,22 @@ ul.link-list li a .icon {
     + li {
     transition: var(--back-transition);
     transform: translate3d(-1.25vw, 0, 0);
+    &:dir(rtl) {
+      transform: translate3d(1.25vw, 0, 0);
+    }
   }
   .timeline:not(.flat)
     > li.timeline-item-container:not(:has(.status-carousel)):has(
       + li .status-link.is-active
     ) {
-    border-top-left-radius: var(--item-radius);
+    border-start-start-radius: var(--item-radius);
   }
   .timeline:not(.flat)
     > li.timeline-item-container:not(:has(.status-carousel)):has(
       .status-link.is-active
     )
     + li.timeline-item-container {
-    border-bottom-left-radius: var(--item-radius);
+    border-end-start-radius: var(--item-radius);
   }
   .box {
     padding: 32px;
@@ -2841,5 +2843,8 @@ ul.link-list li a .icon {
     width: 95vw;
     max-width: calc(320px * 3.3);
     transform: translateX(calc(-50% + var(--main-width) / 2));
+    &:dir(rtl) {
+      transform: translateX(calc(50% - var(--main-width) / 2));
+    }
   }
 }
diff --git a/src/app.jsx b/src/app.jsx
index d2d044c23..fd3ef5ed7 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -132,6 +132,8 @@ setTimeout(() => {
     setTimeout(() => {
       if (Array.isArray(ICONS[icon])) {
         ICONS[icon][0]?.();
+      } else if (typeof ICONS[icon] === 'object') {
+        ICONS[icon].module?.();
       } else {
         ICONS[icon]?.();
       }
diff --git a/src/components/ICONS.jsx b/src/components/ICONS.jsx
index 0fa7880f0..cac8190bf 100644
--- a/src/components/ICONS.jsx
+++ b/src/components/ICONS.jsx
@@ -6,8 +6,14 @@ export const ICONS = {
   'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
   transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
   rocket: () => import('@iconify-icons/mingcute/rocket-line'),
-  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
-  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
+  'arrow-left': {
+    module: () => import('@iconify-icons/mingcute/arrow-left-line'),
+    rtl: true,
+  },
+  'arrow-right': {
+    module: () => import('@iconify-icons/mingcute/arrow-right-line'),
+    rtl: true,
+  },
   'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
   'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
   earth: () => import('@iconify-icons/mingcute/earth-line'),
@@ -16,8 +22,14 @@ export const ICONS = {
   'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
   'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
   message: () => import('@iconify-icons/mingcute/mail-line'),
-  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
-  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
+  comment: {
+    module: () => import('@iconify-icons/mingcute/chat-3-line'),
+    rtl: true,
+  },
+  comment2: {
+    module: () => import('@iconify-icons/mingcute/comment-2-line'),
+    rtl: true,
+  },
   home: () => import('@iconify-icons/mingcute/home-3-line'),
   notification: () => import('@iconify-icons/mingcute/notification-line'),
   follow: () => import('@iconify-icons/mingcute/user-follow-line'),
@@ -31,23 +43,46 @@ export const ICONS = {
   gear: () => import('@iconify-icons/mingcute/settings-3-line'),
   more: () => import('@iconify-icons/mingcute/more-3-line'),
   more2: () => import('@iconify-icons/mingcute/more-1-fill'),
-  external: () => import('@iconify-icons/mingcute/external-link-line'),
-  popout: () => import('@iconify-icons/mingcute/external-link-line'),
-  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
+  external: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popout: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popin: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rotate: '180deg',
+    rtl: true,
+  },
   plus: () => import('@iconify-icons/mingcute/add-circle-line'),
-  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
-  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
+  'chevron-left': {
+    module: () => import('@iconify-icons/mingcute/left-line'),
+    rtl: true,
+  },
+  'chevron-right': {
+    module: () => import('@iconify-icons/mingcute/right-line'),
+    rtl: true,
+  },
   'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
-  reply: [
-    () => import('@iconify-icons/mingcute/share-forward-line'),
-    '180deg',
-    'horizontal',
-  ],
+  reply: {
+    module: () => import('@iconify-icons/mingcute/share-forward-line'),
+    rotate: '180deg',
+    flip: 'horizontal',
+    rtl: true,
+  },
   thread: () => import('@iconify-icons/mingcute/route-line'),
-  group: () => import('@iconify-icons/mingcute/group-line'),
+  group: {
+    module: () => import('@iconify-icons/mingcute/group-line'),
+    rtl: true,
+  },
   bot: () => import('@iconify-icons/mingcute/android-2-line'),
   menu: () => import('@iconify-icons/mingcute/rows-4-line'),
-  list: () => import('@iconify-icons/mingcute/list-check-line'),
+  list: {
+    module: () => import('@iconify-icons/mingcute/list-check-line'),
+    rtl: true,
+  },
   search: () => import('@iconify-icons/mingcute/search-2-line'),
   hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
   info: () => import('@iconify-icons/mingcute/information-line'),
@@ -62,12 +97,21 @@ export const ICONS = {
   share: () => import('@iconify-icons/mingcute/share-2-line'),
   sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
   sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
-  exit: () => import('@iconify-icons/mingcute/exit-line'),
+  exit: {
+    module: () => import('@iconify-icons/mingcute/exit-line'),
+    rtl: true,
+  },
   translate: () => import('@iconify-icons/mingcute/translate-line'),
   play: () => import('@iconify-icons/mingcute/play-fill'),
   trash: () => import('@iconify-icons/mingcute/delete-2-line'),
-  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
-  unmute: () => import('@iconify-icons/mingcute/volume-line'),
+  mute: {
+    module: () => import('@iconify-icons/mingcute/volume-mute-line'),
+    rtl: true,
+  },
+  unmute: {
+    module: () => import('@iconify-icons/mingcute/volume-line'),
+    rtl: true,
+  },
   block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
   unblock: [
     () => import('@iconify-icons/mingcute/forbid-circle-line'),
@@ -81,30 +125,51 @@ export const ICONS = {
   filters: () => import('@iconify-icons/mingcute/filter-line'),
   chart: () => import('@iconify-icons/mingcute/chart-line-line'),
   react: () => import('@iconify-icons/mingcute/react-line'),
-  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
+  layout4: {
+    module: () => import('@iconify-icons/mingcute/layout-4-line'),
+    rtl: true,
+  },
   layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
-  announce: () => import('@iconify-icons/mingcute/announcement-line'),
+  announce: {
+    module: () => import('@iconify-icons/mingcute/announcement-line'),
+    rtl: true,
+  },
   alert: () => import('@iconify-icons/mingcute/alert-line'),
   round: () => import('@iconify-icons/mingcute/round-fill'),
   'arrow-up-circle': () =>
     import('@iconify-icons/mingcute/arrow-up-circle-line'),
   'arrow-down-circle': () =>
     import('@iconify-icons/mingcute/arrow-down-circle-line'),
-  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
+  clipboard: {
+    module: () => import('@iconify-icons/mingcute/clipboard-line'),
+    rtl: true,
+  },
   'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   cloud: () => import('@iconify-icons/mingcute/cloud-line'),
-  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
+  month: {
+    module: () => import('@iconify-icons/mingcute/calendar-month-line'),
+    rtl: true,
+  },
   media: () => import('@iconify-icons/mingcute/photo-album-line'),
   speak: () => import('@iconify-icons/mingcute/radar-line'),
   building: () => import('@iconify-icons/mingcute/building-5-line'),
-  history2: () => import('@iconify-icons/mingcute/history-2-line'),
+  history2: {
+    module: () => import('@iconify-icons/mingcute/history-2-line'),
+    rtl: true,
+  },
   document: () => import('@iconify-icons/mingcute/document-line'),
-  'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
+  'arrows-right': {
+    module: () => import('@iconify-icons/mingcute/arrows-right-line'),
+    rtl: true,
+  },
   code: () => import('@iconify-icons/mingcute/code-line'),
   copy: () => import('@iconify-icons/mingcute/copy-2-line'),
-  quote: () => import('@iconify-icons/mingcute/quote-left-line'),
+  quote: {
+    module: () => import('@iconify-icons/mingcute/quote-left-line'),
+    rtl: true,
+  },
   settings: () => import('@iconify-icons/mingcute/settings-6-line'),
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
   'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
diff --git a/src/components/account-block.css b/src/components/account-block.css
index 14309fb93..890e4968b 100644
--- a/src/components/account-block.css
+++ b/src/components/account-block.css
@@ -29,6 +29,8 @@
     line-clamp: 1;
     text-overflow: ellipsis;
     overflow: hidden;
+    unicode-bidi: isolate;
+    direction: initial;
   }
 
   a {
diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
index 326f415c8..47b4e711d 100644
--- a/src/components/account-block.jsx
+++ b/src/components/account-block.jsx
@@ -120,7 +120,7 @@ function AccountBlock({
             )}
           </>
         )}{' '}
-        <span class="account-block-acct">
+        <span class="account-block-acct bidi-isolate">
           {acct2 ? '' : '@'}
           {acct1}
           <wbr />
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 688d95870..a1a26b594 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -57,7 +57,7 @@
     background-repeat: no-repeat;
     animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
     background-image: linear-gradient(
-      to right,
+      var(--to-forward),
       var(--original-color) 0%,
       var(--original-color) calc(var(--originals-percentage) - var(--gap)),
       var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
@@ -181,8 +181,8 @@
   opacity: 1;
 }
 .sheet .account-container .header-banner {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
 }
 .account-container .header-banner.header-is-avatar {
   mask-image: linear-gradient(
@@ -288,10 +288,17 @@
   align-self: center !important;
   /* clip a dog ear on top right */
   clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+  &:dir(rtl) {
+    /* top left */
+    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
+  }
   /* 4x4px square on top right */
   background-size: 4px 4px;
   background-repeat: no-repeat;
   background-position: top right;
+  &:dir(rtl) {
+    background-position: top left;
+  }
   background-image: linear-gradient(
     to bottom,
     var(--private-note-border-color),
@@ -311,7 +318,7 @@
     box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:hover:not(:active) {
@@ -370,7 +377,8 @@
     animation: appear 1s both ease-in-out;
 
     > *:not(:first-child) {
-      margin: 0 0 0 -4px;
+      margin: 0;
+      margin-inline-start: -4px;
     }
   }
 }
@@ -422,15 +430,15 @@
   }
 
   &:has(+ .account-metadata-box) {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-end-start-radius: 4px;
+    border-end-end-radius: 4px;
   }
 
   + .account-metadata-box {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-left-radius: 16px;
-    border-bottom-right-radius: 16px;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
   }
 }
 
@@ -805,7 +813,7 @@
     width: 100%;
 
     th {
-      text-align: left;
+      text-align: start;
       color: var(--text-insignificant-color);
       font-weight: normal;
       font-size: 0.8em;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 0e2fea35b..bf4c2c234 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -568,7 +568,9 @@ function AccountInfo({
                   </div>
                   <MenuItem
                     onClick={() => {
-                      const handleWithInstance = acct.includes('@') ? `@${acct}` : `@${acct}@${instance}`;
+                      const handleWithInstance = acct.includes('@')
+                        ? `@${acct}`
+                        : `@${acct}@${instance}`;
                       try {
                         navigator.clipboard.writeText(handleWithInstance);
                         showToast('Handle copied');
@@ -1221,7 +1223,7 @@ function RelatedActions({
               <small>
                 Copy handle
                 <br />
-                <span class="more-insignificant">
+                <span class="more-insignificant bidi-isolate">
                   @{currentInfo?.acct || acctWithInstance}
                 </span>
               </small>
@@ -1895,6 +1897,7 @@ function PrivateNoteSheet({
             ref={textareaRef}
             name="note"
             disabled={uiState === 'loading'}
+            dir="auto"
           >
             {initialNote}
           </textarea>
@@ -2017,6 +2020,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   defaultValue={displayName}
                   maxLength={30}
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2029,6 +2033,7 @@ function EditProfileSheet({ onClose = () => {} }) {
                   maxLength={500}
                   rows="5"
                   disabled={uiState === 'loading'}
+                  dir="auto"
                 />
               </label>
             </p>
@@ -2092,6 +2097,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           required={hasValue}
+          dir="auto"
         />
       </td>
       <td>
@@ -2102,6 +2108,7 @@ function FieldsAttributesRow({ name, value, disabled, index: i }) {
           disabled={disabled}
           maxLength={255}
           onChange={(e) => setHasValue(!!e.currentTarget.value)}
+          dir="auto"
         />
       </td>
     </tr>
diff --git a/src/components/compose.css b/src/components/compose.css
index bc7b1d1ff..fc0253704 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -16,7 +16,6 @@
 }
 
 #compose-container .compose-top {
-  text-align: right;
   display: flex;
   justify-content: space-between;
   gap: 8px;
@@ -62,7 +61,7 @@
   box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
 }
 #compose-container .status-preview:has(.status-badge:not(:empty)) {
-  border-top-right-radius: 8px;
+  border-start-end-radius: 8px;
 }
 #compose-container .status-preview :is(.content-container, .time) {
   pointer-events: none;
@@ -216,8 +215,8 @@
   line-height: 1em;
 }
 #compose-container .toolbar-button:not(.show-field) select {
-  right: 0;
-  left: auto !important;
+  inset-inline-end: 0;
+  inset-inline-start: auto !important;
 }
 #compose-container
   .toolbar-button:not(:disabled):is(
@@ -303,6 +302,9 @@
 }
 #compose-container .text-expander-menu li[aria-selected] {
   box-shadow: inset 4px 0 0 0 var(--button-bg-color);
+  :dir(rtl) & {
+    box-shadow: inset -4px 0 0 0 var(--button-bg-color);
+  }
 }
 #compose-container .text-expander-menu li[data-more] {
   &:not(:hover, :focus, [aria-selected]) {
@@ -494,14 +496,14 @@
   display: flex;
   gap: 4px;
   align-items: center;
-  border-left: 1px solid var(--outline-color);
-  padding-left: 8px;
+  border-inline-start: 1px solid var(--outline-color);
+  padding-inline-start: 8px;
 }
 
 #compose-container .expires-in {
   flex-grow: 1;
-  border-left: 1px solid var(--outline-color);
-  padding-left: 8px;
+  border-inline-start: 1px solid var(--outline-color);
+  padding-inline-start: 8px;
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
@@ -646,7 +648,7 @@
 
       &:hover {
         background-image: linear-gradient(
-          to right,
+          var(--to-forward),
           transparent 75%,
           var(--link-bg-color)
         );
@@ -654,7 +656,7 @@
 
       &.selected {
         background-image: linear-gradient(
-          to right,
+          var(--to-forward),
           var(--bg-faded-color) 75%,
           var(--link-bg-color)
         );
@@ -666,8 +668,8 @@
         border-top: var(--hairline-width) solid var(--divider-color);
         position: absolute;
         bottom: 0;
-        left: 58px;
-        right: 0;
+        inset-inline-start: 58px;
+        inset-inline-end: 0;
       }
 
       &:has(+ li:is(.selected, :hover)):before,
@@ -951,7 +953,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     mask-image: linear-gradient(
-      to right,
+      var(--to-forward),
       transparent 2px,
       black 16px,
       black calc(100% - 16px),
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 545765c84..ac01fe42d 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -27,6 +27,7 @@ import urlRegex from '../data/url-regex';
 import { api } from '../utils/api';
 import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
+import isRTL from '../utils/is-rtl';
 import localeMatch from '../utils/locale-match';
 import localeCode2Text from '../utils/localeCode2Text';
 import openCompose from '../utils/open-compose';
@@ -103,7 +104,8 @@ const observer = new IntersectionObserver((entries) => {
       const { left, width } = entry.boundingClientRect;
       const { innerWidth } = window;
       if (left + width > innerWidth) {
-        menu.style.left = innerWidth - width - windowMargin + 'px';
+        const insetInlineStart = isRTL() ? 'right' : 'left';
+        menu.style[insetInlineStart] = innerWidth - width - windowMargin + 'px';
       }
     }
   });
@@ -1127,6 +1129,7 @@ function Compose({
                   setVisibility(e.target.value);
                 }}
                 disabled={uiState === 'loading' || !!editStatus}
+                dir="auto"
               >
                 <option value="public">
                   Public <Icon icon="earth" />
@@ -1383,6 +1386,7 @@ function Compose({
                   store.session.set('currentLanguage', value || DEFAULT_LANG);
                 }}
                 disabled={uiState === 'loading'}
+                dir="auto"
               >
                 {topSupportedLanguages.map(([code, common, native]) => (
                   <option value={code} key={code}>
@@ -1716,7 +1720,9 @@ const Textarea = forwardRef((props, ref) => {
                       </span>
                       <span>
                         <b>${displayNameWithEmoji || username}</b>
-                        <br>@${encodeHTML(acct)}
+                        <br><span class="bidi-isolate">@${encodeHTML(
+                          acct,
+                        )}</span>
                       </span>
                     </li>
                   `;
diff --git a/src/components/drafts.css b/src/components/drafts.css
index 2b093b8c3..198dd46c0 100644
--- a/src/components/drafts.css
+++ b/src/components/drafts.css
@@ -27,7 +27,7 @@ button.draft-item {
   background-color: var(--bg-color);
   color: var(--text-color);
   border: 1px solid var(--link-faded-color);
-  text-align: left;
+  text-align: start;
   padding: 0;
 }
 button.draft-item:is(:hover, :focus) {
diff --git a/src/components/generic-accounts.css b/src/components/generic-accounts.css
index 7ef1443bc..d328ae409 100644
--- a/src/components/generic-accounts.css
+++ b/src/components/generic-accounts.css
@@ -62,13 +62,13 @@
         border-top: var(--hairline-width) solid var(--divider-color);
         position: absolute;
         bottom: calc(-1 * var(--list-gap) / 2);
-        left: 40px;
-        right: 0;
+        inset-inline-start: 40px;
+        inset-inline-end: 0;
       }
 
       &:has(.reactions-block):before {
         /* avatar + reactions + gap */
-        left: calc(40px + 16px + 8px);
+        inset-inline-start: calc(40px + 16px + 8px);
       }
     }
 
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 16fb7c226..b76334374 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -53,9 +53,14 @@ function Icon({
     return null;
   }
 
-  let rotate, flip;
+  let rotate,
+    flip,
+    rtl = false;
   if (Array.isArray(iconBlock)) {
     [iconBlock, rotate, flip] = iconBlock;
+  } else if (typeof iconBlock === 'object') {
+    ({ rotate, flip, rtl } = iconBlock);
+    iconBlock = iconBlock.module;
   }
 
   const [iconData, setIconData] = useState(ICONDATA[icon]);
@@ -72,13 +77,14 @@ function Icon({
 
   return (
     <span
-      class={`icon ${className}`}
+      class={`icon ${className} ${rtl ? 'rtl-flip' : ''}`}
       title={title || alt}
       style={{
         width: `${iconSize}px`,
         height: `${iconSize}px`,
         ...style,
       }}
+      data-icon={icon}
     >
       {iconData && (
         // <svg
diff --git a/src/components/links-bar.css b/src/components/links-bar.css
index d2b5b66ab..bf109fae0 100644
--- a/src/components/links-bar.css
+++ b/src/components/links-bar.css
@@ -6,7 +6,7 @@
   overflow-x: auto;
   background-color: var(--bg-faded-color);
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px,
     black calc(100% - 16px),
@@ -20,6 +20,9 @@
       width: 95vw;
       max-width: calc(320px * 3.3);
       transform: translateX(calc(-50% + var(--main-width) / 2));
+      &:dir(rtl) {
+        transform: translateX(calc(50% - var(--main-width) / 2));
+      }
     }
   }
 
@@ -38,12 +41,16 @@
       color: var(--text-insignificant-color);
       position: absolute;
       top: 8px;
-      left: 0;
+      inset-inline-start: 0;
       transform-origin: top left;
       transform: rotate(-90deg) translateX(-100%);
+      &:dir(rtl) {
+        transform-origin: top right;
+        transform: rotate(90deg) translateX(100%);
+      }
       user-select: none;
       background-image: linear-gradient(
-        to left,
+        var(--to-backward),
         var(--text-color),
         var(--link-color)
       );
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 9f8049383..8a9084a02 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -10,6 +10,7 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
+import isRTL from '../utils/is-rtl';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 
@@ -54,7 +55,7 @@ function MediaModal({
     const differentStatusID = prevStatusID.current !== statusID;
     if (differentStatusID) prevStatusID.current = statusID;
     carouselRef.current.scrollTo({
-      left: scrollLeft,
+      left: scrollLeft * (isRTL() ? -1 : 1),
       behavior: differentStatusID ? 'auto' : 'smooth',
     });
     carouselRef.current.focus();
@@ -91,7 +92,7 @@ function MediaModal({
   useEffect(() => {
     let handleScroll = () => {
       const { clientWidth, scrollLeft } = carouselRef.current;
-      const index = Math.round(scrollLeft / clientWidth);
+      const index = Math.round(Math.abs(scrollLeft) / clientWidth);
       setCurrentIndex(index);
     };
     if (carouselRef.current) {
@@ -178,7 +179,7 @@ function MediaModal({
             ? {
                 backgroundAttachment: 'local',
                 backgroundImage: `linear-gradient(
-            to right, ${mediaAccentGradient})`,
+            to ${isRTL() ? 'left' : 'right'}, ${mediaAccentGradient})`,
               }
             : {}
         }
@@ -257,7 +258,8 @@ function MediaModal({
                   e.preventDefault();
                   e.stopPropagation();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * i,
+                    left:
+                      carouselRef.current.clientWidth * i * (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                   carouselRef.current.focus();
@@ -368,7 +370,10 @@ function MediaModal({
               e.stopPropagation();
               carouselRef.current.focus();
               carouselRef.current.scrollTo({
-                left: carouselRef.current.clientWidth * (currentIndex - 1),
+                left:
+                  carouselRef.current.clientWidth *
+                  (currentIndex - 1) *
+                  (isRTL() ? -1 : 1),
                 behavior: 'smooth',
               });
             }}
@@ -384,7 +389,10 @@ function MediaModal({
               e.stopPropagation();
               carouselRef.current.focus();
               carouselRef.current.scrollTo({
-                left: carouselRef.current.clientWidth * (currentIndex + 1),
+                left:
+                  carouselRef.current.clientWidth *
+                  (currentIndex + 1) *
+                  (isRTL() ? -1 : 1),
                 behavior: 'smooth',
               });
             }}
diff --git a/src/components/media-post.css b/src/components/media-post.css
index 2a52a11a1..306e5a279 100644
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@@ -23,7 +23,7 @@
     pointer-events: none;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     background-color: var(--bg-blur-color);
     margin: 8px;
diff --git a/src/components/menu2.jsx b/src/components/menu2.jsx
index 3d83a72de..fe79318c1 100644
--- a/src/components/menu2.jsx
+++ b/src/components/menu2.jsx
@@ -1,21 +1,33 @@
 import { Menu } from '@szhsin/react-menu';
 import { useRef } from 'preact/hooks';
 
+import isRTL from '../utils/is-rtl';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import useWindowSize from '../utils/useWindowSize';
 
 // It's like Menu but with sensible defaults, bug fixes and improvements.
 function Menu2(props) {
-  const { containerProps, instanceRef: _instanceRef } = props;
+  const { containerProps, instanceRef: _instanceRef, align } = props;
   const size = useWindowSize();
   const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
 
+  // Values: start, end, center
+  // Note: don't mess with 'center'
+  const rtlAlign = isRTL()
+    ? align === 'end'
+      ? 'start'
+      : align === 'start'
+      ? 'end'
+      : align
+    : align;
+
   return (
     <Menu
       boundingBoxPadding={safeBoundingBoxPadding()}
       repositionFlag={`${size.width}x${size.height}`}
       unmountOnClose
       {...props}
+      align={rtlAlign}
       instanceRef={instanceRef}
       containerProps={{
         onClick: (e) => {
diff --git a/src/components/modal.css b/src/components/modal.css
index 62d6c8b6d..80b9ccad9 100644
--- a/src/components/modal.css
+++ b/src/components/modal.css
@@ -1,7 +1,7 @@
 #modal-container > div {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   height: 100%;
   width: 100%;
   z-index: 1000;
@@ -26,21 +26,30 @@
     user-select: none;
     overflow: hidden;
     transform: scale(0);
-    --right: max(
+    --end: max(
       var(--compose-button-dimension-margin),
       env(safe-area-inset-right)
     );
+    :dir(rtl) & {
+      --end: max(
+        var(--compose-button-dimension-margin),
+        env(safe-area-inset-left)
+      );
+    }
     --bottom: max(
       var(--compose-button-dimension-margin),
       env(safe-area-inset-bottom)
     );
-    --origin-right: calc(
-      100% - var(--compose-button-dimension-half) - var(--right)
+    --origin-end: calc(
+      100% - var(--compose-button-dimension-half) - var(--end)
     );
+    :dir(rtl) & {
+      --origin-end: calc(var(--compose-button-dimension-half) + var(--end));
+    }
     --origin-bottom: calc(
       100% - var(--compose-button-dimension-half) - var(--bottom)
     );
-    transform-origin: var(--origin-right) var(--origin-bottom);
+    transform-origin: var(--origin-end) var(--origin-bottom);
   }
 
   .sheet {
diff --git a/src/components/name-text.jsx b/src/components/name-text.jsx
index ad329e938..8906ee799 100644
--- a/src/components/name-text.jsx
+++ b/src/components/name-text.jsx
@@ -88,13 +88,13 @@ function NameText({
       )}
       {displayName && !short ? (
         <>
-          <b>
+          <b dir="auto">
             <EmojiText text={displayName} emojis={emojis} />
           </b>
           {!showAcct && !hideUsername && (
             <>
               {' '}
-              <i>@{username}</i>
+              <i class="bidi-isolate">@{username}</i>
             </>
           )}
         </>
@@ -106,7 +106,7 @@ function NameText({
       {showAcct && (
         <>
           <br />
-          <i>
+          <i class="bidi-isolate">
             {acct2 ? '' : '@'}
             {acct1}
             {!!acct2 && <span class="ib">{acct2}</span>}
diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
index 24bc13499..70efdd461 100644
--- a/src/components/nav-menu.css
+++ b/src/components/nav-menu.css
@@ -35,11 +35,15 @@
   }
   .nav-menu section:last-child {
     background-image: linear-gradient(
-        to right,
+        var(--to-forward),
         var(--divider-color) 1px,
         transparent 1px
       ),
-      linear-gradient(to bottom left, var(--bg-blur-color), transparent),
+      linear-gradient(
+        to bottom var(--backward),
+        var(--bg-blur-color),
+        transparent
+      ),
       url(../assets/phanpy-bg.svg);
     background-repeat: no-repeat;
     /* background-size: auto, auto, 200%; */
@@ -49,8 +53,8 @@
     position: sticky;
     top: 0;
     animation: phanpying 0.2s ease-in-out both;
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
     margin-bottom: 0;
     display: flex;
     flex-direction: column;
diff --git a/src/components/poll.jsx b/src/components/poll.jsx
index 1095a5dc7..b8a893d23 100644
--- a/src/components/poll.jsx
+++ b/src/components/poll.jsx
@@ -187,9 +187,6 @@ export default function Poll({
             type="button"
             class="plain small"
             disabled={uiState === 'loading'}
-            style={{
-              marginLeft: -8,
-            }}
             onClick={(e) => {
               e.preventDefault();
               setUIState('loading');
diff --git a/src/components/report-modal.css b/src/components/report-modal.css
index 831c5d22b..b99db1598 100644
--- a/src/components/report-modal.css
+++ b/src/components/report-modal.css
@@ -92,7 +92,7 @@
     pointer-events: none;
     user-select: none;
     position: absolute;
-    right: 32px;
+    inset-inline-end: 32px;
     margin-top: -48px;
     animation: rubber-stamp 0.3s ease-in both;
     position: absolute;
@@ -148,7 +148,7 @@
     }
 
     .report-rules {
-      margin-left: 1.75em;
+      margin-inline-start: 1.75em;
     }
   }
 
diff --git a/src/components/search-form.jsx b/src/components/search-form.jsx
index 2df8d0ae1..94f9ae086 100644
--- a/src/components/search-form.jsx
+++ b/src/components/search-form.jsx
@@ -273,6 +273,7 @@ const SearchForm = forwardRef((props, ref) => {
                 class={`search-popover-item ${i === 0 ? 'focus' : ''}`}
                 // hidden={hidden}
                 onClick={(e) => {
+                  console.log('onClick', e);
                   props?.onSubmit?.(e);
                 }}
               >
diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 86cc6f701..1ef5bac98 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -18,8 +18,8 @@
   counter-increment: index;
   display: inline-block;
   width: 1.2em;
-  text-align: right;
-  margin-right: 8px;
+  text-align: end;
+  margin-inline-end: 8px;
   color: var(--text-insignificant-color);
   font-size: 90%;
   flex-shrink: 0;
@@ -55,12 +55,12 @@
   justify-content: center;
 }
 #shortcuts-settings-container .shortcuts-view-mode label:first-child {
-  border-top-left-radius: 16px;
-  border-bottom-left-radius: 16px;
+  border-start-start-radius: 16px;
+  border-end-start-radius: 16px;
 }
 #shortcuts-settings-container .shortcuts-view-mode label:last-child {
-  border-top-right-radius: 16px;
-  border-bottom-right-radius: 16px;
+  border-start-end-radius: 16px;
+  border-end-end-radius: 16px;
 }
 #shortcuts-settings-container .shortcuts-view-mode label img {
   max-height: 64px;
@@ -114,7 +114,7 @@
 }
 #shortcut-settings-form label > span:first-child {
   flex-basis: 5em;
-  text-align: right;
+  text-align: end;
 }
 #shortcut-settings-form :is(input[type='text'], select) {
   flex-grow: 1;
@@ -185,8 +185,8 @@
   counter-increment: index;
   display: inline-block;
   width: 1.2em;
-  text-align: right;
-  margin-right: 8px;
+  text-align: end;
+  margin-inline-end: 8px;
   color: var(--text-insignificant-color);
   font-size: 90%;
   flex-shrink: 0;
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index de31c3348..2f294b356 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -612,6 +612,7 @@ function ShortcutForm({
                 }}
                 defaultValue={editMode ? shortcut.type : undefined}
                 name="type"
+                dir="auto"
               >
                 <option></option>
                 {TYPES.map((type) => (
@@ -632,6 +633,7 @@ function ShortcutForm({
                         required={!notRequired}
                         disabled={disabled || uiState === 'loading'}
                         defaultValue={editMode ? shortcut.id : undefined}
+                        dir="auto"
                       >
                         <option value=""></option>
                         {lists.map((list) => (
@@ -663,6 +665,7 @@ function ShortcutForm({
                       autocapitalize="off"
                       spellCheck={false}
                       pattern={pattern}
+                      dir="auto"
                     />
                     {currentType === 'hashtag' &&
                       followedHashtags.length > 0 && (
@@ -780,6 +783,7 @@ function ImportExport({ shortcuts, onClose }) {
               onInput={(e) => {
                 setImportShortcutStr(e.target.value);
               }}
+              dir="auto"
             />
             {states.settings.shortcutSettingsCloudImportExport && (
               <button
@@ -996,6 +1000,7 @@ function ImportExport({ shortcuts, onClose }) {
                   showToast('Unable to copy shortcuts');
                 }
               }}
+              dir="auto"
             />
           </p>
           <p>
diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index 69e680bed..99ddf153b 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -2,8 +2,8 @@
   position: fixed;
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
-  left: 16px;
-  left: max(16px, env(safe-area-inset-left));
+  inset-inline-start: 16px;
+  inset-inline-start: max(16px, env(safe-area-inset-left));
   padding: 16px;
   background-color: var(--bg-faded-blur-color);
   z-index: 101;
@@ -34,9 +34,9 @@
 
 @media (min-width: calc(40em + 56px + 8px)) {
   #shortcuts-button {
-    right: 16px;
-    right: max(16px, env(safe-area-inset-right));
-    left: auto;
+    inset-inline-end: 16px;
+    inset-inline-end: max(16px, env(safe-area-inset-right));
+    inset-inline-start: auto;
     top: 16px;
     top: max(16px, env(safe-area-inset-top));
     bottom: auto;
diff --git a/src/components/status.css b/src/components/status.css
index 3698c5d6e..4b13762b6 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1,22 +1,31 @@
 /* REBLOG + REPLY-TO */
 
+:root {
+  --post-gradient-angle: 160deg;
+  --post-gradient-chip-angle: -20deg;
+  &:dir(rtl) {
+    --post-gradient-angle: -160deg;
+    --post-gradient-chip-angle: 20deg;
+  }
+}
+
 .status-reblog {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--reblog-faded-color),
     transparent min(160px, 50%)
   );
 }
 .status-group {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--group-faded-color),
     transparent min(160px, 50%)
   );
 }
 .status-followed-tags {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--hashtag-faded-color),
     transparent min(160px, 50%)
   );
@@ -33,14 +42,14 @@
 }
 .status-reply-to {
   background: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     var(--reply-to-faded-color),
     transparent min(160px, 50%)
   );
 }
 :is(.status-reblog, .status-group, .status-followed-tags) .status-reply-to {
   background: linear-gradient(
-    -20deg,
+    var(--post-gradient-chip-angle),
     var(--reply-to-faded-color),
     transparent min(160px, 50%)
   );
@@ -72,12 +81,12 @@
 }
 .status-reblog .status-pre-meta .icon {
   color: var(--reblog-color);
-  margin-right: 4px;
+  margin-inline-end: 4px;
   vertical-align: text-bottom;
 }
 .status-group .status-pre-meta .icon {
   color: var(--group-color);
-  margin-right: 4px;
+  margin-inline-end: 4px;
   vertical-align: text-bottom;
 }
 .status-followed-tags {
@@ -91,7 +100,7 @@
 
     .icon {
       color: var(--hashtag-color);
-      margin-right: 4px;
+      margin-inline-end: 4px;
       vertical-align: text-bottom;
     }
     a {
@@ -208,7 +217,7 @@
   /* filter: drop-shadow(0 2px 4px var(--bg-faded-color)); */
 }
 .status-card:has(.status-badge:not(:empty)) {
-  border-top-right-radius: 8px;
+  border-start-end-radius: 8px;
 }
 .status-card > * {
   pointer-events: none;
@@ -276,7 +285,8 @@
   align-items: center;
 
   .status-carousel & {
-    padding: 16px 16px 16px 24px;
+    padding: 16px;
+    padding-inline-start: 24px;
   }
 }
 .status.filtered .status-filtered-info {
@@ -286,7 +296,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  mask-image: linear-gradient(to right, black 90%, transparent);
+  mask-image: linear-gradient(var(--to-forward), black 90%, transparent);
   position: relative;
 }
 .status.filtered .avatar {
@@ -312,7 +322,7 @@
   opacity: 0;
   transform: translateX(8px);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
 }
 .status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
   opacity: 0.75;
@@ -353,7 +363,7 @@
   padding-bottom: 0;
   margin-bottom: calc(-1 * var(--top-padding) / 2);
   background-image: linear-gradient(
-    160deg,
+    var(--post-gradient-angle),
     transparent 2.5%,
     var(--reply-to-faded-color) 10%,
     transparent
@@ -381,7 +391,7 @@
     content: '';
     position: absolute;
     top: calc(var(--top-padding) + var(--avatar-size));
-    left: var(--line-start);
+    inset-inline-start: var(--line-start);
     width: var(--line-width);
     height: calc(
       100% - var(--top-padding) - var(--avatar-size) + (var(--top-padding) / 2)
@@ -392,7 +402,7 @@
   }
 
   .avatar {
-    margin-left: calc((50px - var(--avatar-size)) / 2);
+    margin-inline-start: calc((50px - var(--avatar-size)) / 2);
     justify-self: center;
     z-index: 1;
   }
@@ -433,7 +443,7 @@
   min-width: 0;
 }
 .status:not(.small) > .container {
-  padding-left: 12px;
+  padding-inline-start: 12px;
 }
 
 .status > .container > .meta {
@@ -451,7 +461,7 @@
   /* text-overflow: ellipsis; */
 }
 .status > .container > .meta .meta-name {
-  mask-image: linear-gradient(to left, transparent, black 16px);
+  mask-image: linear-gradient(var(--to-backward), transparent, black 16px);
   flex-grow: 1;
 
   .name-text b {
@@ -470,7 +480,7 @@
   text-align: end;
   text-decoration: none;
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   white-space: nowrap;
 }
 .status > .container > .meta a.time {
@@ -482,7 +492,7 @@
   font-size: 90%;
 
   .more {
-    margin-left: 4px;
+    margin-inline-start: 4px;
     transition: transform 0.2s ease-out;
   }
 }
@@ -509,7 +519,8 @@
 
 .status-reply-badge {
   display: inline-flex;
-  margin: 2px 0 2px 4px;
+  margin: 2px 0;
+  margin-inline-start: 4px;
   gap: 4px;
   align-items: center;
   vertical-align: middle;
@@ -609,7 +620,7 @@
   position: absolute;
   width: 100%;
   top: calc(100% + 2px);
-  left: 0;
+  inset-inline-start: 0;
   text-align: center;
 }
 .status-filtered-badge.horizontal.badge-meta > span + span {
@@ -618,7 +629,7 @@
 }
 
 .status.large > .container > .content-container {
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -1005,13 +1016,13 @@
     .media-gt2
   ) {
   /* 50px = avatar size */
-  margin-left: calc(-1 * ((50px / 2)));
+  margin-inline-start: calc(-1 * ((50px / 2)));
   /*
     outer padding = 16px
     gap = 12px
     so... 16 - 12 = 4
   */
-  margin-right: -4px;
+  margin-inline-end: -4px;
 }
 .status.large :is(.media-container, .media-container.media-gt2) {
   height: auto;
@@ -1121,40 +1132,46 @@
 }
 /* Special media borders */
 .status .media-container.media-eq2 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq2 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:nth-of-type(2) {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq3 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:first-of-type {
-  border-radius: var(--media-radius) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:nth-of-type(2) {
-  border-radius: var(--media-radius-inner) var(--media-radius)
-    var(--media-radius-inner) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:nth-of-type(3) {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius-inner) var(--media-radius);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-end-radius: var(--media-radius-inner);
 }
 .status .media-container.media-eq4 .media:last-of-type {
-  border-radius: var(--media-radius-inner) var(--media-radius-inner)
-    var(--media-radius) var(--media-radius-inner);
+  border-start-start-radius: var(--media-radius-inner);
+  border-start-end-radius: var(--media-radius-inner);
+  border-end-start-radius: var(--media-radius-inner);
 }
 .status .media:only-child {
   grid-area: span 2 / span 2;
@@ -1207,7 +1224,7 @@
     .alt-badge {
       position: absolute;
       bottom: 8px;
-      left: 8px;
+      inset-inline-start: 8px;
 
       &:before {
         content: '';
@@ -1266,7 +1283,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   content: attr(data-formatted-duration);
   position: absolute;
   bottom: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   color: var(--media-fg-color);
   background-color: var(--media-bg-color);
   border: var(--hairline-width) solid var(--media-outline-color);
@@ -1283,7 +1300,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   content: attr(data-label);
   position: absolute;
   bottom: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   color: var(--media-fg-color);
   background-color: var(--media-bg-color);
   border: var(--hairline-width) solid var(--media-outline-color);
@@ -1456,7 +1473,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
       z-index: 1;
       position: absolute;
       top: 8px;
-      right: 8px;
+      inset-inline-end: 8px;
       color: var(--media-fg-color);
       background-color: var(--media-bg-color);
       padding: 2px 8px;
@@ -1484,8 +1501,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
       }
 
       + .carousel-button {
-        left: auto;
-        right: 8px;
+        inset-inline-start: auto;
+        inset-inline-end: 8px;
       }
     }
 
@@ -1655,7 +1672,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
     display: none;
 
     + * {
-      margin-left: 1ex;
+      margin-inline-start: 1ex;
     }
   }
 }
@@ -1746,9 +1763,9 @@ body:has(#modal-container .carousel) .status .media img:hover {
   --bottom: 16px;
   bottom: var(--bottom);
   bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
-  left: 16px;
-  left: calc(16px + env(safe-area-inset-left));
-  text-align: left;
+  inset-inline-start: 16px;
+  inset-inline-start: calc(16px + env(safe-area-inset-left));
+  text-align: start;
   border-radius: 8px;
   color: var(--text-color);
   padding: 4px 8px;
@@ -2023,8 +2040,8 @@ a.card:is(:hover, :focus):visited {
   z-index: 0;
 }
 .poll-option:first-child:after {
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  border-start-start-radius: 12px;
+  border-start-end-radius: 12px;
 }
 .poll-option:hover:after {
   opacity: 1;
@@ -2057,7 +2074,9 @@ a.card:is(:hover, :focus):visited {
   opacity: 1;
 }
 .poll-vote-button {
-  margin: 8px 8px 0 12px;
+  margin: 8px 0 0;
+  margin-inline-start: 12px;
+  margin-inline-end: 8px;
   /* padding-inline: 24px; */
   min-width: 160px;
 }
@@ -2066,6 +2085,10 @@ a.card:is(:hover, :focus):visited {
   margin: 8px 16px;
   font-size: 90%;
   user-select: none;
+
+  > button:first-child {
+    margin-inline-start: -8px;
+  }
 }
 .poll-option-title {
   text-shadow: 0 1px var(--bg-color);
@@ -2101,14 +2124,14 @@ a.card:is(:hover, :focus):visited {
 }
 .status.large .extra-meta {
   padding-top: 0;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
 }
 
 /* EMOJI REACTIONS */
 
 .status.large .emoji-reactions {
   cursor: default;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
 }
 
 /* ACTIONS */
@@ -2120,7 +2143,7 @@ a.card:is(:hover, :focus):visited {
 .status.large .actions {
   padding-top: 4px;
   padding-bottom: 16px;
-  margin-left: calc(-50px - 16px);
+  margin-inline-start: calc(-50px - 16px);
   color: var(--text-insignificant-color);
   border-top: var(--hairline-width) solid var(--outline-color);
   margin-top: 8px;
@@ -2279,7 +2302,7 @@ a.card:is(:hover, :focus):visited {
   width: 100%;
   border: 1px solid var(--outline-color);
   background: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--bg-faded-color),
     transparent 160px
   );
@@ -2297,7 +2320,7 @@ a.card:is(:hover, :focus):visited {
   display: flex;
   position: absolute;
   top: -6px;
-  right: 8px;
+  inset-inline-end: 8px;
   background-color: var(--bg-color);
   border-radius: 8px;
   z-index: 1;
@@ -2307,7 +2330,7 @@ a.card:is(:hover, :focus):visited {
   opacity: 0;
   pointer-events: none;
   transform: translate3d(0, 6px, 0);
-  transform-origin: right center;
+  transform-origin: var(--forward) center;
   transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
 
   .timeline.contextual .replies[data-comments-level='4'] & {
@@ -2386,8 +2409,13 @@ a.card:is(:hover, :focus):visited {
   }
 }
 .timeline.contextual .descendant .status {
+  --bg-gradient-rotation: -140deg;
+  :dir(rtl) & {
+    --bg-gradient-rotation: 140deg;
+  }
+
   --bg-gradient: linear-gradient(
-    -140deg,
+    var(--bg-gradient-rotation),
     var(--bg-faded-color),
     transparent 75%
   );
@@ -2414,7 +2442,7 @@ a.card:is(:hover, :focus):visited {
 .status-badge {
   position: absolute;
   top: 4px;
-  right: 4px;
+  inset-inline-end: 4px;
   line-height: 0;
   pointer-events: none;
   opacity: 0.75;
@@ -2441,8 +2469,21 @@ a.card:is(:hover, :focus):visited {
     transform: translateX(0);
   }
 }
+@keyframes swoosh-from-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-300%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 .status-badge > * {
   animation: swoosh-from-right 1s cubic-bezier(0.51, 0.28, 0.16, 1.26) both;
+  :dir(rtl) & {
+    animation-name: swoosh-from-left;
+  }
 }
 .status-badge > *:nth-child(2) {
   animation-delay: 0.1s;
@@ -2457,7 +2498,8 @@ a.card:is(:hover, :focus):visited {
 /* MISC */
 
 .status-aside {
-  padding: 0 16px 16px 80px;
+  padding: 0 16px 16px;
+  padding-inline-start: 80px;
   color: var(--text-insignificant-color);
 }
 
@@ -2740,7 +2782,7 @@ a.card:is(:hover, :focus):visited {
     vertical-align: super;
     font-weight: normal;
     line-height: 0;
-    padding-left: 2px;
+    padding-inline-start: 2px;
   }
 
   &.clickable {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index ab5928ffd..c42e374c5 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -46,6 +46,7 @@ import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import getHTMLText from '../utils/getHTMLText';
 import handleContentLinks from '../utils/handle-content-links';
 import htmlContentLength from '../utils/html-content-length';
+import isRTL from '../utils/is-rtl';
 import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
 import localeMatch from '../utils/locale-match';
 import mem from '../utils/mem';
@@ -2363,7 +2364,7 @@ function MediaFirstContainer(props) {
   useEffect(() => {
     let handleScroll = () => {
       const { clientWidth, scrollLeft } = carouselRef.current;
-      const index = Math.round(scrollLeft / clientWidth);
+      const index = Math.round(Math.abs(scrollLeft) / clientWidth);
       setCurrentIndex(index);
     };
     if (carouselRef.current) {
@@ -2407,7 +2408,10 @@ function MediaFirstContainer(props) {
                   e.stopPropagation();
                   carouselRef.current.focus();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * (currentIndex - 1),
+                    left:
+                      carouselRef.current.clientWidth *
+                      (currentIndex - 1) *
+                      (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                 }}
@@ -2425,7 +2429,10 @@ function MediaFirstContainer(props) {
                   e.stopPropagation();
                   carouselRef.current.focus();
                   carouselRef.current.scrollTo({
-                    left: carouselRef.current.clientWidth * (currentIndex + 1),
+                    left:
+                      carouselRef.current.clientWidth *
+                      (currentIndex + 1) *
+                      (isRTL() ? -1 : 1),
                     behavior: 'smooth',
                   });
                 }}
@@ -2580,8 +2587,6 @@ function Card({ card, selfReferential, instance }) {
         class={`card link ${isPost ? 'card-post' : ''} ${
           blurhashImage ? '' : size
         }`}
-        lang={language}
-        dir="auto"
         style={{
           '--average-color':
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -2608,7 +2613,7 @@ function Card({ card, selfReferential, instance }) {
             }}
           />
         </div>
-        <div class="meta-container">
+        <div class="meta-container" lang={language}>
           <p class="meta domain">
             <span class="domain">{domain}</span>{' '}
             {!!publishedAt && <>&middot; </>}
@@ -2685,6 +2690,7 @@ function Card({ card, selfReferential, instance }) {
           rel="nofollow noopener noreferrer"
           class={`card link ${isPost ? 'card-post' : ''} no-image`}
           lang={language}
+          dir="auto"
           onClick={handleClick}
         >
           <div class="meta-container">
@@ -2987,6 +2993,7 @@ function EmbedModal({ post, instance, onClose }) {
           onClick={(e) => {
             e.target.select();
           }}
+          dir="auto"
         >
           {htmlCode}
         </textarea>
@@ -3133,6 +3140,7 @@ function EmbedModal({ post, instance, onClose }) {
         <output
           class="embed-preview"
           dangerouslySetInnerHTML={{ __html: htmlCode }}
+          dir="auto"
         />
         <p>
           <small>Note: This preview is lightly styled.</small>
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 9113f6505..7a330a54c 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -13,6 +13,7 @@ import { useSnapshot } from 'valtio';
 
 import FilterContext from '../utils/filter-context';
 import { filteredItems, isFiltered } from '../utils/filters';
+import isRTL from '../utils/is-rtl';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import { isMediaFirstInstance } from '../utils/store-utils';
@@ -864,8 +865,11 @@ function StatusCarousel({ title, class: className, children }) {
             class="small plain2"
             // disabled={reachStart}
             onClick={() => {
+              const left =
+                Math.min(320, carouselRef.current?.offsetWidth) *
+                (isRTL() ? 1 : -1);
               carouselRef.current?.scrollBy({
-                left: -Math.min(320, carouselRef.current?.offsetWidth),
+                left,
                 behavior: 'smooth',
               });
             }}
@@ -878,8 +882,11 @@ function StatusCarousel({ title, class: className, children }) {
             class="small plain2"
             // disabled={reachEnd}
             onClick={() => {
+              const left =
+                Math.min(320, carouselRef.current?.offsetWidth) *
+                (isRTL() ? -1 : 1);
               carouselRef.current?.scrollBy({
-                left: Math.min(320, carouselRef.current?.offsetWidth),
+                left,
                 behavior: 'smooth',
               });
             }}
diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index a1c83b9c9..cbed2b8be 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -35,7 +35,7 @@
   border-bottom: 0;
   margin-bottom: -1px;
   background-image: linear-gradient(
-    to top left,
+    to top var(--backward),
     var(--bg-color) 50%,
     var(--bg-faded-blur-color)
   );
@@ -44,12 +44,13 @@
 .status-translation-block .translated-block {
   border: 1px solid var(--outline-color);
   line-height: 1.3;
-  border-radius: 0 8px 8px 8px;
+  border-radius: 8px;
+  border-start-start-radius: 0;
   margin: 0;
   padding: 8px;
   background-color: var(--bg-color);
   background-image: linear-gradient(
-    to bottom right,
+    to bottom var(--forward),
     var(--bg-color),
     var(--bg-faded-blur-color)
   );
diff --git a/src/index.css b/src/index.css
index b40c06df4..a9bcf28d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -110,6 +110,17 @@
   --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
   --min-dimension: 88px;
+
+  --forward: right;
+  --backward: left;
+  --to-forward: to right;
+  --to-backward: to left;
+  &:dir(rtl) {
+    --forward: left;
+    --backward: right;
+    --to-forward: to left;
+    --to-backward: to right;
+  }
 }
 
 @media (min-resolution: 2dppx) {
@@ -442,6 +453,11 @@ kbd {
   display: initial;
 }
 
+.bidi-isolate {
+  direction: initial;
+  unicode-bidi: isolate;
+}
+
 /* KEYFRAMES */
 
 @keyframes appear {
diff --git a/src/pages/accounts.css b/src/pages/accounts.css
index 0848f1be1..d29e3ac2b 100644
--- a/src/pages/accounts.css
+++ b/src/pages/accounts.css
@@ -28,7 +28,7 @@
 }
 
 #accounts-container section > ul > li .current {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   color: var(--green-color);
   opacity: 0.1;
 }
@@ -47,7 +47,7 @@
 }
 
 #accounts-container .avatar {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 #accounts-container .accounts-list li div {
diff --git a/src/pages/catchup.css b/src/pages/catchup.css
index fd79a8fbe..3ca0b07d8 100644
--- a/src/pages/catchup.css
+++ b/src/pages/catchup.css
@@ -111,7 +111,7 @@
       margin-bottom: 8px;
       align-items: center;
       gap: 8px;
-      text-align: left;
+      text-align: start;
       justify-content: space-between;
 
       a {
@@ -146,6 +146,9 @@
   input[type='range'] {
     accent-color: var(--link-color);
     direction: rtl;
+    &:dir(rtl) {
+      direction: ltr;
+    }
   }
 }
 
@@ -251,7 +254,7 @@
   overflow-y: hidden;
   max-width: 100%;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 16px calc(100% - 16px),
     transparent
@@ -315,7 +318,7 @@
 
       .count {
         font-size: 70%;
-        margin-left: 4px;
+        margin-inline-start: 4px;
         background-color: var(--bg-color);
         padding: 4px 6px;
         border-radius: 12px;
@@ -386,7 +389,7 @@
 
       .count {
         position: absolute;
-        right: -4px;
+        inset-inline-end: -4px;
         top: -4px;
         font-size: 10px;
         background-color: var(--bg-color);
@@ -406,7 +409,7 @@
         overflow: hidden;
         text-align: center;
         mask-image: linear-gradient(
-          to right,
+          var(--to-forward),
           black calc(100% - 0.5em),
           transparent 100%
         );
@@ -478,13 +481,13 @@
 
     > li {
       &:first-child > a {
-        border-top-left-radius: var(--corner-radius);
-        border-top-right-radius: var(--corner-radius);
+        border-start-start-radius: var(--corner-radius);
+        border-start-end-radius: var(--corner-radius);
       }
 
       &:last-child > a {
-        border-bottom-left-radius: var(--corner-radius);
-        border-bottom-right-radius: var(--corner-radius);
+        border-end-start-radius: var(--corner-radius);
+        border-end-end-radius: var(--corner-radius);
       }
     }
   }
@@ -502,13 +505,13 @@
 
     @media (min-width: 40em) {
       &.separator + li a {
-        border-top-left-radius: var(--corner-radius);
-        border-top-right-radius: var(--corner-radius);
+        border-start-start-radius: var(--corner-radius);
+        border-start-end-radius: var(--corner-radius);
       }
 
       &:has(+ .separator) a {
-        border-bottom-left-radius: var(--corner-radius);
-        border-bottom-right-radius: var(--corner-radius);
+        border-end-start-radius: var(--corner-radius);
+        border-end-end-radius: var(--corner-radius);
       }
     }
 
@@ -572,8 +575,12 @@
       'author meta'
       'content content';
     /* align-items: center; */
+    --bg-gradient-angle: 140deg;
+    &:dir(rtl) {
+      --bg-gradient-angle: -140deg;
+    }
     background-image: linear-gradient(
-      140deg,
+      var(--bg-gradient-angle),
       var(--post-bg-color),
       transparent min(160px, 50%)
     );
@@ -636,7 +643,7 @@
       }
 
       > .avatar ~ .avatar {
-        margin-left: -8px;
+        margin-inline-start: -8px;
       }
 
       > .icon {
@@ -655,7 +662,7 @@
       white-space: nowrap;
       overflow: hidden;
       mask-image: linear-gradient(
-        to right,
+        var(--to-forward),
         black calc(100% - 1em),
         transparent 100%
       );
@@ -887,12 +894,15 @@
         &:has(.post-peek-media),
         .post-peek-media:first-child img {
           transform-origin: left center;
+          :dir(rtl) & {
+            transform-origin: right center;
+          }
         }
       }
 
       @media (max-width: 480px) {
         .post-peek-media:not(:last-child) {
-          margin-right: -24px;
+          margin-inline-end: -24px;
           box-shadow: 0 0 0 2px var(--bg-blur-color);
         }
         /* Max 10, I'm not going to code more than this */
diff --git a/src/pages/filters.jsx b/src/pages/filters.jsx
index 0d83d27ed..4abc9e4b6 100644
--- a/src/pages/filters.jsx
+++ b/src/pages/filters.jsx
@@ -365,6 +365,7 @@ function FiltersAddEdit({ filter, onClose }) {
                         defaultValue={keyword}
                         disabled={uiState === 'loading'}
                         required
+                        dir="auto"
                       />
                       <div class="filter-keyword-actions">
                         <label>
diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx
index f7b26cb00..5301db820 100644
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@@ -166,7 +166,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       titleComponent={
         !!instance && (
           <h1 class="header-double-lines">
-            <b>{hashtagTitle}</b>
+            <b dir="auto">{hashtagTitle}</b>
             <div>{instance}</div>
           </h1>
         )
@@ -379,6 +379,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                   // no spaces, no hashtags
                   pattern="[^#][^\s#]+[^#]"
                   disabled={reachLimit}
+                  dir="auto"
                 />
               </form>
             )}
@@ -402,7 +403,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                 }}
               >
                 <Icon icon="x" alt="Remove hashtag" class="danger-icon" />
-                <span>
+                <span class="bidi-isolate">
                   <span class="more-insignificant">#</span>
                   {t}
                 </span>
diff --git a/src/pages/login.css b/src/pages/login.css
index d142f67a7..7c9273d82 100644
--- a/src/pages/login.css
+++ b/src/pages/login.css
@@ -30,14 +30,15 @@
 
 #instances-suggestions {
   margin: 0.2em 0 0;
-  padding: 0 0 0 1.2em;
+  padding: 0;
+  padding-inline-start: 1.2em;
   list-style: none;
   width: 90vw;
   max-width: 40em;
   overflow: auto;
   white-space: nowrap;
   mask-image: linear-gradient(
-    to right,
+    var(--to-forward),
     transparent,
     black 1.2em,
     black calc(100% - 5em),
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 5a98ad38f..66bcbafc2 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -158,6 +158,7 @@ function Login() {
             onInput={(e) => {
               setInstanceText(e.target.value);
             }}
+            dir="auto"
           />
           {instancesSuggestions?.length > 0 ? (
             <ul id="instances-suggestions">
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 47273aca0..e20752cda 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -185,7 +185,7 @@
 .notification-group-statuses > li:before {
   content: counter(index);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   font-size: 10px;
   padding: 8px;
   font-weight: bold;
@@ -194,16 +194,19 @@
   margin-top: -1px;
 }
 .notification-group-statuses > li:not(:last-child) .status-link {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 .notification-group-statuses > li:not(:first-child) .status-link {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }
 
 #mentions-option {
   float: right;
+  &:dir(rtl) {
+    float: left;
+  }
   margin-top: 0.5em;
 }
 #mentions-option label {
@@ -388,7 +391,7 @@
   width: calc(100% - 16px);
 }
 .announcements > ul > li:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 .announcements .announcement-block {
   padding: 16px;
diff --git a/src/pages/search.css b/src/pages/search.css
index 8127cffb0..1c939c8ee 100644
--- a/src/pages/search.css
+++ b/src/pages/search.css
@@ -48,10 +48,10 @@
   a {
     .icon {
       vertical-align: middle;
-      transition: transform 0.2s;
+      transition: margin 0.2s;
     }
     &:hover .icon {
-      transform: translateX(4px);
+      margin-inline-start: 4px;
     }
   }
 }
@@ -101,9 +101,8 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover {
   position: absolute;
-  left: 8px;
+  inset-inline-start: 8px;
   max-width: calc(100% - 16px);
-  /* right: 8px; */
   background-color: var(--bg-color);
   border: 1px solid var(--outline-color);
   box-shadow: 0 4px 24px var(--drop-shadow-color);
@@ -118,7 +117,8 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover-item {
   text-decoration: none;
-  padding: 8px 16px 8px 8px;
+  padding: 8px;
+  padding-inline-end: 16px;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -132,10 +132,15 @@ ul.link-list.hashtag-list li a {
 }
 .search-popover-item:is(:focus, .focus) {
   box-shadow: inset 4px 0 0 0 var(--button-bg-color);
+  :dir(rtl) & {
+    box-shadow: inset -4px 0 0 0 var(--button-bg-color);
+  }
 }
 .search-popover-item :is(mark, q) {
   color: var(--text-color);
   background-color: var(--link-bg-color);
+  unicode-bidi: isolate;
+  direction: initial;
 }
 .search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
   background-color: var(--link-bg-color);
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 1c1481d57..b7c932853 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -36,12 +36,12 @@
   border-bottom: var(--hairline-width) solid var(--outline-color);
 }
 #settings-container section > ul > li > div:last-child {
-  text-align: right;
+  text-align: end;
 }
 #settings-container section > ul > li .sub-section {
-  text-align: left !important;
+  text-align: start !important;
   margin-top: 8px;
-  margin-left: 24px;
+  margin-inline-start: 24px;
 }
 #settings-container section > ul > li .sub-section p {
   margin-block: 0.5em;
@@ -121,11 +121,11 @@
     grid-template-rows: 1fr 1fr;
 
     > span:first-child {
-      text-align: left;
+      text-align: start;
     }
 
     > span:last-child {
-      text-align: right;
+      text-align: end;
     }
   }
 }
diff --git a/src/pages/status.css b/src/pages/status.css
index 35b26764f..8380ca96d 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -11,7 +11,7 @@
     align-self: stretch;
   }
   header h1 .deck-back {
-    margin-left: -16px;
+    margin-inline-start: -16px;
   }
 
   .button-refresh .icon {
@@ -39,7 +39,7 @@
   font-size: 70% !important;
 
   & > .avatar ~ .avatar {
-    margin-left: -4px;
+    margin-inline-start: -4px;
   }
 }
 .ancestors-indicator:not([hidden]) {
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index df2361006..c4873905e 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1370,6 +1370,8 @@ function SubComments({
   const detailsRef = useRef();
   useLayoutEffect(() => {
     function handleScroll(e) {
+      // NOTE: this scrollLeft works for RTL too
+      // Browsers do the magic for us
       e.target.dataset.scrollLeft = e.target.scrollLeft;
     }
     detailsRef.current?.addEventListener('scroll', handleScroll, {
diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx
index 80a735508..230c79957 100644
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@@ -209,7 +209,7 @@ function Trending({ columnMode, ...props }) {
               const total = history.reduce((acc, cur) => acc + +cur.uses, 0);
               return (
                 <Link to={`/${instance}/t/${name}`} key={name}>
-                  <span>
+                  <span dir="auto">
                     <span class="more-insignificant">#</span>
                     {name}
                   </span>
diff --git a/src/pages/welcome.css b/src/pages/welcome.css
index c79a2c71f..d020170b2 100644
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@@ -140,7 +140,7 @@
       height: auto;
       max-height: none;
       position: fixed;
-      left: 0;
+      inset-inline-start: 0;
       top: 0;
       bottom: 0;
       width: 50%;
@@ -153,8 +153,9 @@
     }
 
     #why-container {
-      padding: 32px 32px 32px 8px;
-      margin-left: 50%;
+      padding: 32px;
+      padding-inline-start: 8px;
+      margin-inline-start: 50%;
 
       /* overflow: auto;
       mask-image: linear-gradient(to top, transparent 16px, black 64px); */
diff --git a/src/utils/is-rtl.js b/src/utils/is-rtl.js
new file mode 100644
index 000000000..0a868f48d
--- /dev/null
+++ b/src/utils/is-rtl.js
@@ -0,0 +1,26 @@
+let IS_RTL = false;
+
+// Use MutationObserver to detect RTL
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'attributes') {
+      const { value } = mutation.target;
+      if (value === 'rtl') {
+        IS_RTL = true;
+      } else {
+        IS_RTL = false;
+      }
+      // Fire custom event 'dirchange' on document
+      // document.dispatchEvent(new Event('dirchange'));
+    }
+  });
+});
+observer.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['dir'],
+});
+
+export default function isRTL() {
+  return IS_RTL;
+  // return document.documentElement.dir === 'rtl';
+}

From ad7193d0674f8d518d0e24cba0db1e3852352867 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 13:53:06 +0800
Subject: [PATCH 07/11] Fix notifications popover not close-able on iPad

---
 src/pages/home.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index f10f633eb..d823f95e8 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -152,8 +152,11 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
     if (state === 'open') loadNotifications();
   }, [state]);
 
+  const menuRef = useRef();
+
   return (
     <ControlledMenu
+      ref={menuRef}
       menuClassName="notifications-menu"
       state={state}
       anchorRef={anchorRef}
@@ -161,6 +164,11 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
       portal={{
         target: document.body,
       }}
+      containerProps={{
+        onClick: () => {
+          menuRef.current?.closeMenu?.();
+        },
+      }}
       overflow="auto"
       viewScroll="close"
       position="anchor"

From b3681a93eefec7f79d62281dd9433b78ab382d37 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 18:05:03 +0800
Subject: [PATCH 08/11] Workbox expiration plugin not working as expected

---
 public/sw.js | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index 715037296..738d95b49 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -96,24 +96,27 @@ const apiExtendedRoute = new RegExpRoute(
 );
 registerRoute(apiExtendedRoute);
 
-const apiIntermediateRoute = new RegExpRoute(
-  // Matches:
-  // - trends/*
-  // - timelines/link
-  /^https?:\/\/[^\/]+\/api\/v\d+\/(trends|timelines\/link)/,
-  new StaleWhileRevalidate({
-    cacheName: 'api-intermediate',
-    plugins: [
-      new ExpirationPlugin({
-        maxAgeSeconds: 1 * 60, // 1min
-      }),
-      new CacheableResponsePlugin({
-        statuses: [0, 200],
-      }),
-    ],
-  }),
-);
-registerRoute(apiIntermediateRoute);
+// Note: expiration is not working as expected
+// https://github.com/GoogleChrome/workbox/issues/3316
+//
+// const apiIntermediateRoute = new RegExpRoute(
+//   // Matches:
+//   // - trends/*
+//   // - timelines/link
+//   /^https?:\/\/[^\/]+\/api\/v\d+\/(trends|timelines\/link)/,
+//   new StaleWhileRevalidate({
+//     cacheName: 'api-intermediate',
+//     plugins: [
+//       new ExpirationPlugin({
+//         maxAgeSeconds: 1 * 60, // 1min
+//       }),
+//       new CacheableResponsePlugin({
+//         statuses: [0, 200],
+//       }),
+//     ],
+//   }),
+// );
+// registerRoute(apiIntermediateRoute);
 
 const apiRoute = new RegExpRoute(
   // Matches:

From 89e8bdf77b1054ad1019f03d606ff19612bba751 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 18:06:26 +0800
Subject: [PATCH 09/11] Use pinned instead of _pinned

---
 src/components/status.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index c42e374c5..555f86b76 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -283,6 +283,7 @@ function Status({
     url,
     emojis,
     tags,
+    pinned,
     // Non-API props
     _deleted,
     _pinned,
@@ -1122,22 +1123,20 @@ function Status({
             try {
               const newStatus = await masto.v1.statuses
                 .$select(id)
-                [_pinned ? 'unpin' : 'pin']();
-              // saveStatus(newStatus, instance);
+                [pinned ? 'unpin' : 'pin']();
+              saveStatus(newStatus, instance);
               showToast(
-                _pinned
+                pinned
                   ? 'Post unpinned from profile'
                   : 'Post pinned to profile',
               );
             } catch (e) {
               console.error(e);
-              showToast(
-                _pinned ? 'Unable to unpin post' : 'Unable to pin post',
-              );
+              showToast(pinned ? 'Unable to unpin post' : 'Unable to pin post');
             }
           }}
         >
-          {_pinned ? (
+          {pinned ? (
             <>
               <Icon icon="unpin" />
               <span>Unpin from profile</span>

From a1c419b675e4769328d69c4d4f4b674d05cf8397 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 19:01:21 +0800
Subject: [PATCH 10/11] Try fix select field bug on Windows again

Previously: https://github.com/cheeaun/phanpy/commit/b47c043699dd3b1c036bca3b5e9080a181a83ec2
---
 src/components/compose.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index fc0253704..af95d5f55 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -207,7 +207,7 @@
   left: -100vw !important;
 }
 #compose-container .toolbar-button select {
-  background-color: transparent;
+  background-color: inherit;
   border: 0;
   padding: 0 0 0 8px;
   margin: 0;

From 60289cdb2925995e0d6dc76287d8575f30de2492 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 4 Aug 2024 19:09:46 +0800
Subject: [PATCH 11/11] Upgrade dependencies

---
 package-lock.json | 869 +++++++++++++++++++++++-----------------------
 package.json      |   6 +-
 2 files changed, 437 insertions(+), 438 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 06cde12b5..e17b9ec87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,11 @@
         "@github/text-expander-element": "~2.7.1",
         "@iconify-icons/mingcute": "~1.2.9",
         "@justinribeiro/lite-youtube": "~1.5.0",
-        "@szhsin/react-menu": "~4.2.0",
+        "@szhsin/react-menu": "~4.2.1",
         "compare-versions": "~6.1.1",
         "dayjs": "~1.11.12",
         "dayjs-twitter": "~0.5.0",
-        "fast-blurhash": "~1.1.2",
+        "fast-blurhash": "~1.1.4",
         "fast-equals": "~5.0.1",
         "fuse.js": "~7.0.0",
         "html-prettify": "~1.0.7",
@@ -50,7 +50,7 @@
         "@preact/preset-vite": "~2.9.0",
         "postcss": "~8.4.40",
         "postcss-dark-theme-class": "~1.3.0",
-        "postcss-preset-env": "~9.6.0",
+        "postcss-preset-env": "~10.0.0",
         "twitter-text": "~3.1.0",
         "vite": "~5.3.5",
         "vite-plugin-generate-file": "~0.2.0",
@@ -1858,9 +1858,9 @@
       }
     },
     "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.13.tgz",
-      "integrity": "sha512-MX0yLTwtZzr82sQ0zOjqimpZbzjMaK/h2pmlrLK7DCzlmiZLYFpoO94WmN1akRVo6ll/TdpHb53vihHLUMyvng==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.0.tgz",
+      "integrity": "sha512-9GEQIvTMrjXfYaVnw1+FteDX5yF65CZq4ttYP75O3CANQevaCJ9jVVTiZt9YTpjYIk8C1mmf52y2S4Hr/CaE/g==",
       "dev": true,
       "funding": [
         {
@@ -1873,11 +1873,11 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       }
     },
     "node_modules/@csstools/color-helpers": {
@@ -1900,9 +1900,9 @@
       }
     },
     "node_modules/@csstools/css-calc": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.2.4.tgz",
-      "integrity": "sha512-tfOuvUQeo7Hz+FcuOd3LfXVp+342pnWUJ7D2y8NUpu1Ww6xnTbHLpz018/y6rtbHifJ3iIEf9ttxXd8KG7nL0Q==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.0.0.tgz",
+      "integrity": "sha512-fxPxNrEVGeej4F35Xt69Q7gPMKa7oEGNxeP1DpA01sWpTF3Yhgux/0slVX3jLHd7dhlszeQlNAUhpAorVxoHdQ==",
       "dev": true,
       "funding": [
         {
@@ -1915,17 +1915,17 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       }
     },
     "node_modules/@csstools/css-color-parser": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-2.0.4.tgz",
-      "integrity": "sha512-yUb0mk/k2yVNcQvRmd9uikpu6D0aamFJGgU++5d0lng6ucaJkhKyhDCQCj9rVuQYntvFQKqyU6UfTPQWU2UkXQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.0.tgz",
+      "integrity": "sha512-F/A1Z3ZXH4fU6+29Up4QAZtewLmWLI4hVz6hyODMFvorx4AEC/03tu+gFq0nMZSDafC0lmapNOj9f4ctHMNaqQ==",
       "dev": true,
       "funding": [
         {
@@ -1939,20 +1939,20 @@
       ],
       "dependencies": {
         "@csstools/color-helpers": "^4.2.1",
-        "@csstools/css-calc": "^1.2.4"
+        "@csstools/css-calc": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz",
-      "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.0.tgz",
+      "integrity": "sha512-20hEErXV9GEx15qRbsJVzB91ryayx1F2duHPBrfZXQAHz/dJG0u/611URpr28+sFjm3EI7U17Pj9SVA9NSAGJA==",
       "dev": true,
       "funding": [
         {
@@ -1965,16 +1965,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-tokenizer": "^3.0.0"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz",
-      "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.0.tgz",
+      "integrity": "sha512-efZvfJyYrqH9hPCKtOBywlTsCXnEzAI9sLHFzUsDpBb+1bQ+bxJnwL9V2bRKv9w4cpIp75yxGeZRaVKoMQnsEg==",
       "dev": true,
       "funding": [
         {
@@ -1987,13 +1987,13 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.1.13",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz",
-      "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.0.tgz",
+      "integrity": "sha512-W0JlkUFwXjo703wt06AcaWuUcS+6x6IEDyxV6W65Sw+vLCYp+uPsrps+PXTiIfN0V1Pqj5snPzN7EYLmbz1zjg==",
       "dev": true,
       "funding": [
         {
@@ -2006,17 +2006,17 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       }
     },
     "node_modules/@csstools/postcss-cascade-layers": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.6.tgz",
-      "integrity": "sha512-Xt00qGAQyqAODFiFEJNkTpSUz5VfYqnDLECdlA/Vv17nl/OIV5QfTRHGAXrBGG5YcJyHpJ+GF9gF/RZvOQz4oA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-5.0.0.tgz",
+      "integrity": "sha512-h+VunB3KXaoWTWEPBcdVk8Kz1eZ/CtDD+HXgKw5JLdbsViLEQdKUtFYH73VIQigdodng8s5DCrrwNQY7pnuWBA==",
       "dev": true,
       "funding": [
         {
@@ -2029,20 +2029,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/selector-specificity": "^3.1.1",
-        "postcss-selector-parser": "^6.0.13"
+        "@csstools/selector-specificity": "^4.0.0",
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-color-function": {
-      "version": "3.0.19",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.19.tgz",
-      "integrity": "sha512-d1OHEXyYGe21G3q88LezWWx31ImEDdmINNDy0LyLNN9ChgN2bPxoubUPiHf9KmwypBMaHmNcMuA/WZOKdZk/Lg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-4.0.0.tgz",
+      "integrity": "sha512-e0RohXUxMsSzIS5s4xh218NiOYXAfby17L8KYe/6ITI8i4BiSFLpywMvpA/d6xPUGUfT20O+7JLBDHF3heYZRA==",
       "dev": true,
       "funding": [
         {
@@ -2055,23 +2055,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-color-mix-function": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.19.tgz",
-      "integrity": "sha512-mLvQlMX+keRYr16AuvuV8WYKUwF+D0DiCqlBdvhQ0KYEtcQl9/is9Ssg7RcIys8x0jIn2h1zstS4izckdZj9wg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.0.tgz",
+      "integrity": "sha512-MWuSfaLKe1By/hSnjH/Hj7ZOIRZaLMNshCTkVuuqtZ0nfp+QRGUwf9nb2uPVKySYjKqNERANdA9Q0citA9hK1Q==",
       "dev": true,
       "funding": [
         {
@@ -2084,23 +2084,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-content-alt-text": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-1.0.0.tgz",
-      "integrity": "sha512-SkHdj7EMM/57GVvSxSELpUg7zb5eAndBeuvGwFzYtU06/QXJ/h9fuK7wO5suteJzGhm3GDF/EWPCdWV2h1IGHQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.0.tgz",
+      "integrity": "sha512-1pPjMaSUftwn/4N7RtJif91cB6BBEo0LQX2vryrDMF5uKDqt4RMpIi9ZFTsKtcXBFZexNGEWXZzPABnooJGkzQ==",
       "dev": true,
       "funding": [
         {
@@ -2113,22 +2113,22 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-exponential-functions": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-1.0.9.tgz",
-      "integrity": "sha512-x1Avr15mMeuX7Z5RJUl7DmjhUtg+Amn5DZRD0fQ2TlTFTcJS8U1oxXQ9e5mA62S2RJgUU6db20CRoJyDvae2EQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-2.0.0.tgz",
+      "integrity": "sha512-sH7MBlsn6yft6xQ8uQ9MCWFHbZCUL3HIN3IntUabv75syl0dPldECTqLJix5q5ilSQxDQ1L+LajeZk84S6GG9w==",
       "dev": true,
       "funding": [
         {
@@ -2141,21 +2141,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-calc": "^1.2.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-calc": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-font-format-keywords": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-3.0.2.tgz",
-      "integrity": "sha512-E0xz2sjm4AMCkXLCFvI/lyl4XO6aN1NCSMMVEOngFDJ+k2rDwfr6NDjWljk1li42jiLNChVX+YFnmfGCigZKXw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-4.0.0.tgz",
+      "integrity": "sha512-usBzw9aCRDvchpok6C+4TXC57btc4bJtmKQWOHQxOVKen1ZfVqBUuCZ/wuqdX5GHsD0NRSr9XTP+5ID1ZZQBXw==",
       "dev": true,
       "funding": [
         {
@@ -2168,20 +2168,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-gamut-mapping": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.11.tgz",
-      "integrity": "sha512-KrHGsUPXRYxboXmJ9wiU/RzDM7y/5uIefLWKFSc36Pok7fxiPyvkSHO51kh+RLZS1W5hbqw9qaa6+tKpTSxa5g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-2.0.0.tgz",
+      "integrity": "sha512-JftxHVGt6PFfV/vWTDVKrrO0XyUA8OtuVykXhhMxue9qCzCCTSWqMHjZOvaOCCbxG1v2tGKV2FxBLQhzsZZPJg==",
       "dev": true,
       "funding": [
         {
@@ -2194,21 +2194,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-gradients-interpolation-method": {
-      "version": "4.0.20",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.20.tgz",
-      "integrity": "sha512-ZFl2JBHano6R20KB5ZrB8KdPM2pVK0u+/3cGQ2T8VubJq982I2LSOvQ4/VtxkAXjkPkk1rXt4AD1ni7UjTZ1Og==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.0.tgz",
+      "integrity": "sha512-jmgh7C6ANVRPdFNMNIp426UFNuy01XXYwxbbyYV2fZBbmZleVLp6imxjw2XoaeHMdSiYoq8vOeX+GVzCyC7oOQ==",
       "dev": true,
       "funding": [
         {
@@ -2221,23 +2221,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-hwb-function": {
-      "version": "3.0.18",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.18.tgz",
-      "integrity": "sha512-3ifnLltR5C7zrJ+g18caxkvSRnu9jBBXCYgnBznRjxm6gQJGnnCO9H6toHfywNdNr/qkiVf2dymERPQLDnjLRQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.0.tgz",
+      "integrity": "sha512-Swb2CK/wKnsXEgT5GNlIO2C2h3lePn0Nmbsy48Z6yAht1XwQiDcxDAhqojg9LfonJVics+pzLM+IEQjPdgICNg==",
       "dev": true,
       "funding": [
         {
@@ -2250,23 +2250,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-ic-unit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.7.tgz",
-      "integrity": "sha512-YoaNHH2wNZD+c+rHV02l4xQuDpfR8MaL7hD45iJyr+USwvr0LOheeytJ6rq8FN6hXBmEeoJBeXXgGmM8fkhH4g==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.0.tgz",
+      "integrity": "sha512-9QT5TDGgx7wD3EEMN3BSUG6ckb6Eh5gSPT5kZoVtUuAonfPmLDJyPhqR4ntPpMYhUKAMVKAg3I/AgzqHMSeLhA==",
       "dev": true,
       "funding": [
         {
@@ -2279,21 +2279,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-initial": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-initial/-/postcss-initial-1.0.1.tgz",
-      "integrity": "sha512-wtb+IbUIrIf8CrN6MLQuFR7nlU5C7PwuebfeEXfjthUha1+XZj2RVi+5k/lukToA24sZkYAiSJfHM8uG/UZIdg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-initial/-/postcss-initial-2.0.0.tgz",
+      "integrity": "sha512-dv2lNUKR+JV+OOhZm9paWzYBXOCi+rJPqJ2cJuhh9xd8USVrd0cBEPczla81HNOyThMQWeCcdln3gZkQV2kYxA==",
       "dev": true,
       "funding": [
         {
@@ -2306,16 +2306,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-is-pseudo-class": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.8.tgz",
-      "integrity": "sha512-0aj591yGlq5Qac+plaWCbn5cpjs5Sh0daovYUKJUOMjIp70prGH/XPLp7QjxtbFXz3CTvb0H9a35dpEuIuUi3Q==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-E/CjrT03BL06WmrjupnrT0VUBTvxJdoW1hRVeXFa9qatWtvcLLw0j8hP372G4A9PpSGEMXi3/AoHzPf7DNryCQ==",
       "dev": true,
       "funding": [
         {
@@ -2328,20 +2328,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/selector-specificity": "^3.1.1",
-        "postcss-selector-parser": "^6.0.13"
+        "@csstools/selector-specificity": "^4.0.0",
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-light-dark-function": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-1.0.8.tgz",
-      "integrity": "sha512-x0UtpCyVnERsplUeoaY6nEtp1HxTf4lJjoK/ULEm40DraqFfUdUSt76yoOyX5rGY6eeOUOkurHyYlFHVKv/pew==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.0.tgz",
+      "integrity": "sha512-1CHfwwckSJ4xYZYOgJD5u1NNlP85/6VqsQPL1geagvfpwm47hcGRDW+O3CD7KdexWGL45E5qKmL1bC2siqjmkg==",
       "dev": true,
       "funding": [
         {
@@ -2354,22 +2354,22 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-logical-float-and-clear": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-2.0.1.tgz",
-      "integrity": "sha512-SsrWUNaXKr+e/Uo4R/uIsqJYt3DaggIh/jyZdhy/q8fECoJSKsSMr7nObSLdvoULB69Zb6Bs+sefEIoMG/YfOA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-3.0.0.tgz",
+      "integrity": "sha512-SEmaHMszwakI2rqKRJgE+8rpotFfne1ZS6bZqBoQIicFyV+xT1UF42eORPxJkVJVrH9C0ctUgwMSn3BLOIZldQ==",
       "dev": true,
       "funding": [
         {
@@ -2382,16 +2382,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-logical-overflow": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.1.tgz",
-      "integrity": "sha512-Kl4lAbMg0iyztEzDhZuQw8Sj9r2uqFDcU1IPl+AAt2nue8K/f1i7ElvKtXkjhIAmKiy5h2EY8Gt/Cqg0pYFDCw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-2.0.0.tgz",
+      "integrity": "sha512-spzR1MInxPuXKEX2csMamshR4LRaSZ3UXVaRGjeQxl70ySxOhMpP2252RAFsg8QyyBXBzuVOOdx1+bVO5bPIzA==",
       "dev": true,
       "funding": [
         {
@@ -2404,16 +2404,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-logical-overscroll-behavior": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.1.tgz",
-      "integrity": "sha512-+kHamNxAnX8ojPCtV8WPcUP3XcqMFBSDuBuvT6MHgq7oX4IQxLIXKx64t7g9LiuJzE7vd06Q9qUYR6bh4YnGpQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-2.0.0.tgz",
+      "integrity": "sha512-e/webMjoGOSYfqLunyzByZj5KKe5oyVg/YSbie99VEaSDE2kimFm0q1f6t/6Jo+VVCQ/jbe2Xy+uX+C4xzWs4w==",
       "dev": true,
       "funding": [
         {
@@ -2426,16 +2426,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-logical-resize": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.1.tgz",
-      "integrity": "sha512-W5Gtwz7oIuFcKa5SmBjQ2uxr8ZoL7M2bkoIf0T1WeNqljMkBrfw1DDA8/J83k57NQ1kcweJEjkJ04pUkmyee3A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-3.0.0.tgz",
+      "integrity": "sha512-DFbHQOFW/+I+MY4Ycd/QN6Dg4Hcbb50elIJCfnwkRTCX05G11SwViI5BbBlg9iHRl4ytB7pmY5ieAFk3ws7yyg==",
       "dev": true,
       "funding": [
         {
@@ -2451,16 +2451,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-logical-viewport-units": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-2.0.11.tgz",
-      "integrity": "sha512-ElITMOGcjQtvouxjd90WmJRIw1J7KMP+M+O87HaVtlgOOlDt1uEPeTeii8qKGe2AiedEp0XOGIo9lidbiU2Ogg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-3.0.0.tgz",
+      "integrity": "sha512-7a0d7TLfHP3k7n+XGj5NJopgyKgl/VKyAPapYIo97aujB7+8M4dBE1Og0OmWng+H/drQWXoSlCI3pov5XwVtxQ==",
       "dev": true,
       "funding": [
         {
@@ -2473,20 +2473,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-media-minmax": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.1.8.tgz",
-      "integrity": "sha512-KYQCal2i7XPNtHAUxCECdrC7tuxIWQCW+s8eMYs5r5PaAiVTeKwlrkRS096PFgojdNCmHeG0Cb7njtuNswNf+w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-2.0.0.tgz",
+      "integrity": "sha512-21Cmy5QWbexbpKAAJntGomjn644BWWs7gXkx/Vid1SjqxIRmPUB/dcJ4xBWwjpFuhrPKzT8a3Pr+IJv9R9v9Yg==",
       "dev": true,
       "funding": [
         {
@@ -2499,22 +2499,22 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-calc": "^1.2.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/media-query-list-parser": "^2.1.13"
+        "@csstools/css-calc": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/media-query-list-parser": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.11.tgz",
-      "integrity": "sha512-YD6jrib20GRGQcnOu49VJjoAnQ/4249liuz7vTpy/JfgqQ1Dlc5eD4HPUMNLOw9CWey9E6Etxwf/xc/ZF8fECA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-3.0.0.tgz",
+      "integrity": "sha512-TV8Q7ec0zbCxlmTmUF8CvAWWbK3q9ops3+sGCc6rHAGrfkoA+HyMGwJBZudddZQOV9MZS949mhtYIV4AgIRizw==",
       "dev": true,
       "funding": [
         {
@@ -2527,21 +2527,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/media-query-list-parser": "^2.1.13"
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/media-query-list-parser": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-nested-calc": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-3.0.2.tgz",
-      "integrity": "sha512-ySUmPyawiHSmBW/VI44+IObcKH0v88LqFe0d09Sb3w4B1qjkaROc6d5IA3ll9kjD46IIX/dbO5bwFN/swyoyZA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-4.0.0.tgz",
+      "integrity": "sha512-jMYDdqrQQxE7k9+KjstC3NbsmC063n1FTPLCgCRS2/qHUbHM0mNy9pIn4QIiQGs9I/Bg98vMqw7mJXBxa0N88A==",
       "dev": true,
       "funding": [
         {
@@ -2554,20 +2554,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-normalize-display-values": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-3.0.2.tgz",
-      "integrity": "sha512-fCapyyT/dUdyPtrelQSIV+d5HqtTgnNP/BEG9IuhgXHt93Wc4CfC1bQ55GzKAjWrZbgakMQ7MLfCXEf3rlZJOw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.0.tgz",
+      "integrity": "sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q==",
       "dev": true,
       "funding": [
         {
@@ -2583,16 +2583,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-oklab-function": {
-      "version": "3.0.19",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.19.tgz",
-      "integrity": "sha512-e3JxXmxjU3jpU7TzZrsNqSX4OHByRC3XjItV3Ieo/JEQmLg5rdOL4lkv/1vp27gXemzfNt44F42k/pn0FpE21Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.0.tgz",
+      "integrity": "sha512-4dwot1KLiFRFbYZV2XeeNoXQETK/3MaNCi4BpDlJ5J4XHF+VRwcppfCcqCC+TRucWanPFFlbt+X53nIuK7JVNg==",
       "dev": true,
       "funding": [
         {
@@ -2605,23 +2605,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-progressive-custom-properties": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.3.0.tgz",
-      "integrity": "sha512-W2oV01phnILaRGYPmGFlL2MT/OgYjQDrL9sFlbdikMFi6oQkFki9B86XqEWR7HCsTZFVq7dbzr/o71B75TKkGg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.0.0.tgz",
+      "integrity": "sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q==",
       "dev": true,
       "funding": [
         {
@@ -2637,16 +2637,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-relative-color-syntax": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.19.tgz",
-      "integrity": "sha512-MxUMSNvio1WwuS6WRLlQuv6nNPXwIWUFzBBAvL/tBdWfiKjiJnAa6eSSN5gtaacSqUkQ/Ce5Z1OzLRfeaWhADA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.0.tgz",
+      "integrity": "sha512-iE/mgtuUeFMpMJhhrze9pu5xSEaueCTijs7lTnJ6MoTL50H9fquQp3bFVd2haAb/fDhO/nXTu67tzsm+zXsFzA==",
       "dev": true,
       "funding": [
         {
@@ -2659,23 +2659,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-scope-pseudo-class": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-3.0.1.tgz",
-      "integrity": "sha512-3ZFonK2gfgqg29gUJ2w7xVw2wFJ1eNWVDONjbzGkm73gJHVCYK5fnCqlLr+N+KbEfv2XbWAO0AaOJCFB6Fer6A==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-4.0.0.tgz",
+      "integrity": "sha512-+ZUOBtVMDcmHZcZqsP/jcNRriEILfWQflTI3tCTA+/RheXAg57VkFGyPDAilpQSqlCpxWLWG8VUFKFtZJPwuOg==",
       "dev": true,
       "funding": [
         {
@@ -2688,19 +2688,19 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-stepped-value-functions": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-3.0.10.tgz",
-      "integrity": "sha512-MZwo0D0TYrQhT5FQzMqfy/nGZ28D1iFtpN7Su1ck5BPHS95+/Y5O9S4kEvo76f2YOsqwYcT8ZGehSI1TnzuX2g==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-4.0.0.tgz",
+      "integrity": "sha512-sJUW1axQuxRyD59zr9hMJ6MoM/99UkxNc7fxJ1kFdTl1B5dS3TxvVzY1fRq1C/JsgBw6uNzfy/i52SrVNtbbXw==",
       "dev": true,
       "funding": [
         {
@@ -2713,21 +2713,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-calc": "^1.2.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-calc": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-text-decoration-shorthand": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.7.tgz",
-      "integrity": "sha512-+cptcsM5r45jntU6VjotnkC9GteFR7BQBfZ5oW7inLCxj7AfLGAzMbZ60hKTP13AULVZBdxky0P8um0IBfLHVA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-4.0.0.tgz",
+      "integrity": "sha512-vyJpbr2emWy8AOmBT+41LcAaaS8Q3jOMiMZRzrdV8uZgKI1I0NiB+UM7vJuwkFPhC3oXl7XPIPtajsyEAvI3kw==",
       "dev": true,
       "funding": [
         {
@@ -2744,16 +2744,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-trigonometric-functions": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-3.0.10.tgz",
-      "integrity": "sha512-G9G8moTc2wiad61nY5HfvxLiM/myX0aYK4s1x8MQlPH29WDPxHQM7ghGgvv2qf2xH+rrXhztOmjGHJj4jsEqXw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-4.0.0.tgz",
+      "integrity": "sha512-M7CivX++ZOQvnF+eZ8FHg2X8GYOfSUFH6GRtr7mGeIgd38WmT1WCBogqBvz/Y5x9VUeor9EuJX2K06bP7p4BuA==",
       "dev": true,
       "funding": [
         {
@@ -2766,21 +2766,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-calc": "^1.2.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1"
+        "@csstools/css-calc": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/postcss-unset-value": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-3.0.1.tgz",
-      "integrity": "sha512-dbDnZ2ja2U8mbPP0Hvmt2RMEGBiF1H7oY6HYSpjteXJGihYwgxgTr6KRbbJ/V6c+4wd51M+9980qG4gKVn5ttg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-4.0.0.tgz",
+      "integrity": "sha512-cBz3tOCI5Fw6NIFEwU3RiwK6mn3nKegjpJuzCndoGq3BZPkUjnsq7uQmIeMNeMbMk7YD2MfKcgCpZwX5jyXqCA==",
       "dev": true,
       "funding": [
         {
@@ -2793,16 +2793,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/@csstools/selector-resolve-nested": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
-      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-2.0.0.tgz",
+      "integrity": "sha512-oklSrRvOxNeeOW1yARd4WNCs/D09cQjunGZUgSq6vM8GpzFswN+8rBZyJA29YFZhOTQ6GFzxgLDNtVbt9wPZMA==",
       "dev": true,
       "funding": [
         {
@@ -2815,16 +2815,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       }
     },
     "node_modules/@csstools/selector-specificity": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
-      "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz",
+      "integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==",
       "dev": true,
       "funding": [
         {
@@ -2837,16 +2837,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       }
     },
     "node_modules/@csstools/utilities": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
-      "integrity": "sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-2.0.0.tgz",
+      "integrity": "sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==",
       "dev": true,
       "funding": [
         {
@@ -2859,7 +2859,7 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -3801,9 +3801,9 @@
       }
     },
     "node_modules/@szhsin/react-menu": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-4.2.0.tgz",
-      "integrity": "sha512-cheovcsqOZonTi5aM5ApQjWRwXdReAHFITLyzyk0pAjMy+BiWk8bfl8PZT8VKC8Jacq9Shs3YArYtFMGW/sA4A==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-4.2.1.tgz",
+      "integrity": "sha512-rxTZ6hh1P+C5orCyWSzefoXXsC70quFxp3X1HJjIOsQUc4ESDXl8/Qv7AzUk1k7c1xd44AD6Mx6Ce79ajNHihw==",
       "dependencies": {
         "prop-types": "^15.7.2",
         "react-transition-state": "^2.1.0"
@@ -4408,9 +4408,9 @@
       }
     },
     "node_modules/css-blank-pseudo": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.2.tgz",
-      "integrity": "sha512-J/6m+lsqpKPqWHOifAFtKFeGLOzw3jR92rxQcwRUfA/eTuZzKfKlxOmYDx2+tqOPQAueNvBiY8WhAeHu5qNmTg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-7.0.0.tgz",
+      "integrity": "sha512-v9xXYGdm6LIn4iHEfu3egk/PM1g/yJr8uwTIj6E44kurv5dE/4y3QW7WdVmZ0PVnqfTuK+C0ClZcEEiaKWBL9Q==",
       "dev": true,
       "funding": [
         {
@@ -4423,19 +4423,19 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/css-has-pseudo": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.5.tgz",
-      "integrity": "sha512-ZTv6RlvJJZKp32jPYnAJVhowDCrRrHUTAxsYSuUPBEDJjzws6neMnzkRblxtgmv1RgcV5dhH2gn7E3wA9Wt6lw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-7.0.0.tgz",
+      "integrity": "sha512-vO6k9bBt4/eEZ2PeHmS2VXjJga5SBy6O1ESyaOkse5/lvp6piFqg8Sh5KTU7X33M7Uh/oqo+M3EeMktQrZoTCQ==",
       "dev": true,
       "funding": [
         {
@@ -4448,21 +4448,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/selector-specificity": "^3.1.1",
-        "postcss-selector-parser": "^6.0.13",
+        "@csstools/selector-specificity": "^4.0.0",
+        "postcss-selector-parser": "^6.1.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/css-prefers-color-scheme": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.1.tgz",
-      "integrity": "sha512-iFit06ochwCKPRiWagbTa1OAWCvWWVdEnIFd8BaRrgO8YrrNh4RAWUQTFcYX5tdFZgFl1DJ3iiULchZyEbnF4g==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-10.0.0.tgz",
+      "integrity": "sha512-VCtXZAWivRglTZditUfB4StnsWr6YVZ2PRtuxQLKTNRdtAf8tpzaVPE9zXIF3VaSc7O70iK/j1+NXxyQCqdPjQ==",
       "dev": true,
       "funding": [
         {
@@ -4475,7 +4475,7 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -4987,10 +4987,9 @@
       "license": "MIT"
     },
     "node_modules/fast-blurhash": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-blurhash/-/fast-blurhash-1.1.2.tgz",
-      "integrity": "sha512-lJVOgYSlahqkRhrKumNx/SGB2F/qS0D1z7xjGYjb5EZJRtlzySGMniZjkQ9h9Rv8sPmM/V9orEgRiMwazDNH6A==",
-      "license": "ISC"
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-blurhash/-/fast-blurhash-1.1.4.tgz",
+      "integrity": "sha512-xeH121M027hgWHHhHWYYjUmMKl8vCH3PPkXk439ixsP8Bvb/r3UFqg12oMSToD/aSAw8EE6XiTdfZ6M5jaLfzg=="
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -6302,9 +6301,9 @@
       }
     },
     "node_modules/postcss-attribute-case-insensitive": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.3.tgz",
-      "integrity": "sha512-KHkmCILThWBRtg+Jn1owTnHPnFit4OkqS+eKiGEOPIGke54DCeYGJ6r0Fx/HjfE9M9kznApCLcU0DvnPchazMQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-7.0.0.tgz",
+      "integrity": "sha512-ETMUHIw67Kyv9Q81nden/NuJbRh+4/S963giXpfSLd5eaKK8kd1UdAHMVRV/NG/w/N6Cq8B0qZIZbZZWU/67+A==",
       "dev": true,
       "funding": [
         {
@@ -6317,10 +6316,10 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6343,9 +6342,9 @@
       }
     },
     "node_modules/postcss-color-functional-notation": {
-      "version": "6.0.14",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.14.tgz",
-      "integrity": "sha512-dNUX+UH4dAozZ8uMHZ3CtCNYw8fyFAmqqdcyxMr7PEdM9jLXV19YscoYO0F25KqZYhmtWKQ+4tKrIZQrwzwg7A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.0.tgz",
+      "integrity": "sha512-WjOCE1FJb2xIeFvF40CISn9yUMtzwkgjdbjXmWjbrC1wAgQiB763h7bsip9piGtAkbeM5Pi9hVIDSmtbWrlqLw==",
       "dev": true,
       "funding": [
         {
@@ -6358,23 +6357,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-color-hex-alpha": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.4.tgz",
-      "integrity": "sha512-XQZm4q4fNFqVCYMGPiBjcqDhuG7Ey2xrl99AnDJMyr5eDASsAGalndVgHZF8i97VFNy1GQeZc4q2ydagGmhelQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-10.0.0.tgz",
+      "integrity": "sha512-1kervM2cnlgPs2a8Vt/Qbe5cQ++N7rkYo/2rz2BkqJZIHQwaVuJgQH38REHrAi4uM0b1fqxMkWYmese94iMp3w==",
       "dev": true,
       "funding": [
         {
@@ -6387,20 +6386,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-color-rebeccapurple": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-9.0.3.tgz",
-      "integrity": "sha512-ruBqzEFDYHrcVq3FnW3XHgwRqVMrtEPLBtD7K2YmsLKVc2jbkxzzNEctJKsPCpDZ+LeMHLKRDoSShVefGc+CkQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-10.0.0.tgz",
+      "integrity": "sha512-JFta737jSP+hdAIEhk1Vs0q0YF5P8fFcj+09pweS8ktuGuZ8pPlykHsk6mPxZ8awDl4TrcxUqJo9l1IhVr/OjQ==",
       "dev": true,
       "funding": [
         {
@@ -6413,20 +6412,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-custom-media": {
-      "version": "10.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.8.tgz",
-      "integrity": "sha512-V1KgPcmvlGdxTel4/CyQtBJEFhMVpEmRGFrnVtgfGIHj5PJX9vO36eFBxKBeJn+aCDTed70cc+98Mz3J/uVdGQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-11.0.0.tgz",
+      "integrity": "sha512-tZ4qTYSOqH7YFi8psEQB2v2zBRbbJex9FgPef2Qss8DlWxnYpBNHquvMmVBR8uIt6hW0+prDsg7UJDp6XLIf8w==",
       "dev": true,
       "funding": [
         {
@@ -6439,22 +6438,22 @@
         }
       ],
       "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.13",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/media-query-list-parser": "^2.1.13"
+        "@csstools/cascade-layer-name-parser": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/media-query-list-parser": "^3.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-custom-properties": {
-      "version": "13.3.12",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.12.tgz",
-      "integrity": "sha512-oPn/OVqONB2ZLNqN185LDyaVByELAA/u3l2CS2TS16x2j2XsmV4kd8U49+TMxmUsEU9d8fB/I10E6U7kB0L1BA==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.0.tgz",
+      "integrity": "sha512-GD/suWYQAplXJujsyOswYP+oX9xs29eBNwGloPj4Ub+3/Rq1Set+ZeGmHJfN2Y2+x9vUxAX4eeNJFmtk6VBv4A==",
       "dev": true,
       "funding": [
         {
@@ -6467,23 +6466,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.13",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/cascade-layer-name-parser": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-custom-selectors": {
-      "version": "7.1.12",
-      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.12.tgz",
-      "integrity": "sha512-ctIoprBMJwByYMGjXG0F7IT2iMF2hnamQ+aWZETyBM0aAlyaYdVZTeUkk8RB+9h9wP+NdN3f01lfvKl2ZSqC0g==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-8.0.0.tgz",
+      "integrity": "sha512-nW6RWjH+jaWvXEgm/AzMhtVjMXcKmrTWsM/eJn/ujnJI5uEOPTxvl3eCFFCFKC2DiZcOP5HLH5EeX0DIemFzBQ==",
       "dev": true,
       "funding": [
         {
@@ -6496,13 +6495,13 @@
         }
       ],
       "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.13",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
+        "@csstools/cascade-layer-name-parser": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
         "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6534,9 +6533,9 @@
       }
     },
     "node_modules/postcss-dir-pseudo-class": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-8.0.1.tgz",
-      "integrity": "sha512-uULohfWBBVoFiZXgsQA24JV6FdKIidQ+ZqxOouhWwdE+qJlALbkS5ScB43ZTjPK+xUZZhlaO/NjfCt5h4IKUfw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-9.0.0.tgz",
+      "integrity": "sha512-T59BG9lURiXmhcJMyKbyjNAK3KCyEQYEhaz9GAETHXfIy9XbGQeyz+H0zIwRJlrP4KKRPJolNYe3QjQPemMjBA==",
       "dev": true,
       "funding": [
         {
@@ -6549,19 +6548,19 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-double-position-gradients": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.7.tgz",
-      "integrity": "sha512-1xEhjV9u1s4l3iP5lRt1zvMjI/ya8492o9l/ivcxHhkO3nOz16moC4JpMxDUGrOs4R3hX+KWT7gKoV842cwRgg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.0.tgz",
+      "integrity": "sha512-JkIGah3RVbdSEIrcobqj4Gzq0h53GG4uqDPsho88SgY84WnpkTpI0k50MFK/sX7XqVisZ6OqUfFnoUO6m1WWdg==",
       "dev": true,
       "funding": [
         {
@@ -6574,21 +6573,21 @@
         }
       ],
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-focus-visible": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-9.0.1.tgz",
-      "integrity": "sha512-N2VQ5uPz3Z9ZcqI5tmeholn4d+1H14fKXszpjogZIrFbhaq0zNAtq8sAnw6VLiqGbL8YBzsnu7K9bBkTqaRimQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-10.0.0.tgz",
+      "integrity": "sha512-GJjzvTj7JY+zN7wVBQ4osdKX53QLUdr6r2rSEkBUqrEMDKu3fHMHKOY9rirdirbHCx3IETnK25EtpPARR2KWNw==",
       "dev": true,
       "funding": [
         {
@@ -6601,19 +6600,19 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-focus-within": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-8.0.1.tgz",
-      "integrity": "sha512-NFU3xcY/xwNaapVb+1uJ4n23XImoC86JNwkY/uduytSl2s9Ekc2EpzmRR63+ExitnW3Mab3Fba/wRPCT5oDILA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-9.0.0.tgz",
+      "integrity": "sha512-QwflAWUToNZvQLGbc4qJhrQO8yZ5617L6hSNzNWDoqRX4FoIh9fbJbEjy0nvFPciaaOoCaeqcxBwYPbFU0HvBw==",
       "dev": true,
       "funding": [
         {
@@ -6626,10 +6625,10 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6646,9 +6645,9 @@
       }
     },
     "node_modules/postcss-gap-properties": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-5.0.1.tgz",
-      "integrity": "sha512-k2z9Cnngc24c0KF4MtMuDdToROYqGMMUQGcE6V0odwjHyOHtaDBlLeRBV70y9/vF7KIbShrTRZ70JjsI1BZyWw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-6.0.0.tgz",
+      "integrity": "sha512-Om0WPjEwiM9Ru+VhfEDPZJAKWUd0mV1HmNXqp2C29z80aQ2uP9UVhLc7e3aYMIor/S5cVhoPgYQ7RtfeZpYTRw==",
       "dev": true,
       "funding": [
         {
@@ -6661,16 +6660,16 @@
         }
       ],
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-image-set-function": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-6.0.3.tgz",
-      "integrity": "sha512-i2bXrBYzfbRzFnm+pVuxVePSTCRiNmlfssGI4H0tJQvDue+yywXwUxe68VyzXs7cGtMaH6MCLY6IbCShrSroCw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-7.0.0.tgz",
+      "integrity": "sha512-QL7W7QNlZuzOwBTeXEmbVckNt1FSmhQtbMRvGGqqU4Nf4xk6KUEQhAoWuMzwbSv5jxiRiSZ5Tv7eiDB9U87znA==",
       "dev": true,
       "funding": [
         {
@@ -6683,20 +6682,20 @@
         }
       ],
       "dependencies": {
-        "@csstools/utilities": "^1.0.0",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-lab-function": {
-      "version": "6.0.19",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.19.tgz",
-      "integrity": "sha512-vwln/mgvFrotJuGV8GFhpAOu9iGf3pvTBr6dLPDmUcqVD5OsQpEFyQMAFTxSxWXGEzBj6ld4pZ/9GDfEpXvo0g==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.0.tgz",
+      "integrity": "sha512-Qyrlog4fAJcbwiWHiwkpDLlSRnvk2dFYqygQ29sMbhCoq6B/Jtj89u89VFNaAatW8KkDDAeNzVvabK9NBD9hJA==",
       "dev": true,
       "funding": [
         {
@@ -6709,23 +6708,23 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^2.0.4",
-        "@csstools/css-parser-algorithms": "^2.7.1",
-        "@csstools/css-tokenizer": "^2.4.1",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/utilities": "^1.0.0"
+        "@csstools/css-color-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/utilities": "^2.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-logical": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-7.0.1.tgz",
-      "integrity": "sha512-8GwUQZE0ri0K0HJHkDv87XOLC8DE0msc+HoWLeKdtjDZEwpZ5xuK3QdV6FhmHSQW40LPkg43QzvATRAI3LsRkg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-8.0.0.tgz",
+      "integrity": "sha512-HpIdsdieClTjXLOyYdUPAX/XQASNIwdKt5hoZW08ZOAiI+tbV0ta1oclkpVkW5ANU+xJvk3KkA0FejkjGLXUkg==",
       "dev": true,
       "funding": [
         {
@@ -6741,16 +6740,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-nesting": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz",
-      "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.0.tgz",
+      "integrity": "sha512-TCGQOizyqvEkdeTPM+t6NYwJ3EJszYE/8t8ILxw/YoeUvz2rz7aM8XTAmBWh9/DJjfaaabL88fWrsVHSPF2zgA==",
       "dev": true,
       "funding": [
         {
@@ -6763,12 +6762,12 @@
         }
       ],
       "dependencies": {
-        "@csstools/selector-resolve-nested": "^1.1.0",
-        "@csstools/selector-specificity": "^3.1.1",
+        "@csstools/selector-resolve-nested": "^2.0.0",
+        "@csstools/selector-specificity": "^4.0.0",
         "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6798,9 +6797,9 @@
       }
     },
     "node_modules/postcss-overflow-shorthand": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-5.0.1.tgz",
-      "integrity": "sha512-XzjBYKLd1t6vHsaokMV9URBt2EwC9a7nDhpQpjoPk2HRTSQfokPfyAS/Q7AOrzUu6q+vp/GnrDBGuj/FCaRqrQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-6.0.0.tgz",
+      "integrity": "sha512-BdDl/AbVkDjoTofzDQnwDdm/Ym6oS9KgmO7Gr+LHYjNWJ6ExORe4+3pcLQsLA9gIROMkiGVjjwZNoL/mpXHd5Q==",
       "dev": true,
       "funding": [
         {
@@ -6816,7 +6815,7 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6833,9 +6832,9 @@
       }
     },
     "node_modules/postcss-place": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-9.0.1.tgz",
-      "integrity": "sha512-JfL+paQOgRQRMoYFc2f73pGuG/Aw3tt4vYMR6UA3cWVMxivviPTnMFnFTczUJOA4K2Zga6xgQVE+PcLs64WC8Q==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-10.0.0.tgz",
+      "integrity": "sha512-5EBrMzat2pPAxQNWYavwAfoKfYcTADJ8AXGVPcUZ2UkNloUTWzJQExgrzrDkh3EKzmAx1evfTAzF9I8NGcc+qw==",
       "dev": true,
       "funding": [
         {
@@ -6851,16 +6850,16 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-preset-env": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.6.0.tgz",
-      "integrity": "sha512-Lxfk4RYjUdwPCYkc321QMdgtdCP34AeI94z+/8kVmqnTIlD4bMRQeGcMZgwz8BxHrzQiFXYIR5d7k/9JMs2MEA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-10.0.0.tgz",
+      "integrity": "sha512-zoLkIGK30hkLhHVD6jNqcO6gDVDzyo10s42XG++Gsy9z6gk1X/UpI2Zn28ylGD9VnQSSdQMzuk535rRq2JmWkg==",
       "dev": true,
       "funding": [
         {
@@ -6873,79 +6872,79 @@
         }
       ],
       "dependencies": {
-        "@csstools/postcss-cascade-layers": "^4.0.6",
-        "@csstools/postcss-color-function": "^3.0.19",
-        "@csstools/postcss-color-mix-function": "^2.0.19",
-        "@csstools/postcss-content-alt-text": "^1.0.0",
-        "@csstools/postcss-exponential-functions": "^1.0.9",
-        "@csstools/postcss-font-format-keywords": "^3.0.2",
-        "@csstools/postcss-gamut-mapping": "^1.0.11",
-        "@csstools/postcss-gradients-interpolation-method": "^4.0.20",
-        "@csstools/postcss-hwb-function": "^3.0.18",
-        "@csstools/postcss-ic-unit": "^3.0.7",
-        "@csstools/postcss-initial": "^1.0.1",
-        "@csstools/postcss-is-pseudo-class": "^4.0.8",
-        "@csstools/postcss-light-dark-function": "^1.0.8",
-        "@csstools/postcss-logical-float-and-clear": "^2.0.1",
-        "@csstools/postcss-logical-overflow": "^1.0.1",
-        "@csstools/postcss-logical-overscroll-behavior": "^1.0.1",
-        "@csstools/postcss-logical-resize": "^2.0.1",
-        "@csstools/postcss-logical-viewport-units": "^2.0.11",
-        "@csstools/postcss-media-minmax": "^1.1.8",
-        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^2.0.11",
-        "@csstools/postcss-nested-calc": "^3.0.2",
-        "@csstools/postcss-normalize-display-values": "^3.0.2",
-        "@csstools/postcss-oklab-function": "^3.0.19",
-        "@csstools/postcss-progressive-custom-properties": "^3.3.0",
-        "@csstools/postcss-relative-color-syntax": "^2.0.19",
-        "@csstools/postcss-scope-pseudo-class": "^3.0.1",
-        "@csstools/postcss-stepped-value-functions": "^3.0.10",
-        "@csstools/postcss-text-decoration-shorthand": "^3.0.7",
-        "@csstools/postcss-trigonometric-functions": "^3.0.10",
-        "@csstools/postcss-unset-value": "^3.0.1",
+        "@csstools/postcss-cascade-layers": "^5.0.0",
+        "@csstools/postcss-color-function": "^4.0.0",
+        "@csstools/postcss-color-mix-function": "^3.0.0",
+        "@csstools/postcss-content-alt-text": "^2.0.0",
+        "@csstools/postcss-exponential-functions": "^2.0.0",
+        "@csstools/postcss-font-format-keywords": "^4.0.0",
+        "@csstools/postcss-gamut-mapping": "^2.0.0",
+        "@csstools/postcss-gradients-interpolation-method": "^5.0.0",
+        "@csstools/postcss-hwb-function": "^4.0.0",
+        "@csstools/postcss-ic-unit": "^4.0.0",
+        "@csstools/postcss-initial": "^2.0.0",
+        "@csstools/postcss-is-pseudo-class": "^5.0.0",
+        "@csstools/postcss-light-dark-function": "^2.0.0",
+        "@csstools/postcss-logical-float-and-clear": "^3.0.0",
+        "@csstools/postcss-logical-overflow": "^2.0.0",
+        "@csstools/postcss-logical-overscroll-behavior": "^2.0.0",
+        "@csstools/postcss-logical-resize": "^3.0.0",
+        "@csstools/postcss-logical-viewport-units": "^3.0.0",
+        "@csstools/postcss-media-minmax": "^2.0.0",
+        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^3.0.0",
+        "@csstools/postcss-nested-calc": "^4.0.0",
+        "@csstools/postcss-normalize-display-values": "^4.0.0",
+        "@csstools/postcss-oklab-function": "^4.0.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.0.0",
+        "@csstools/postcss-relative-color-syntax": "^3.0.0",
+        "@csstools/postcss-scope-pseudo-class": "^4.0.0",
+        "@csstools/postcss-stepped-value-functions": "^4.0.0",
+        "@csstools/postcss-text-decoration-shorthand": "^4.0.0",
+        "@csstools/postcss-trigonometric-functions": "^4.0.0",
+        "@csstools/postcss-unset-value": "^4.0.0",
         "autoprefixer": "^10.4.19",
         "browserslist": "^4.23.1",
-        "css-blank-pseudo": "^6.0.2",
-        "css-has-pseudo": "^6.0.5",
-        "css-prefers-color-scheme": "^9.0.1",
+        "css-blank-pseudo": "^7.0.0",
+        "css-has-pseudo": "^7.0.0",
+        "css-prefers-color-scheme": "^10.0.0",
         "cssdb": "^8.1.0",
-        "postcss-attribute-case-insensitive": "^6.0.3",
+        "postcss-attribute-case-insensitive": "^7.0.0",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^6.0.14",
-        "postcss-color-hex-alpha": "^9.0.4",
-        "postcss-color-rebeccapurple": "^9.0.3",
-        "postcss-custom-media": "^10.0.8",
-        "postcss-custom-properties": "^13.3.12",
-        "postcss-custom-selectors": "^7.1.12",
-        "postcss-dir-pseudo-class": "^8.0.1",
-        "postcss-double-position-gradients": "^5.0.7",
-        "postcss-focus-visible": "^9.0.1",
-        "postcss-focus-within": "^8.0.1",
+        "postcss-color-functional-notation": "^7.0.0",
+        "postcss-color-hex-alpha": "^10.0.0",
+        "postcss-color-rebeccapurple": "^10.0.0",
+        "postcss-custom-media": "^11.0.0",
+        "postcss-custom-properties": "^14.0.0",
+        "postcss-custom-selectors": "^8.0.0",
+        "postcss-dir-pseudo-class": "^9.0.0",
+        "postcss-double-position-gradients": "^6.0.0",
+        "postcss-focus-visible": "^10.0.0",
+        "postcss-focus-within": "^9.0.0",
         "postcss-font-variant": "^5.0.0",
-        "postcss-gap-properties": "^5.0.1",
-        "postcss-image-set-function": "^6.0.3",
-        "postcss-lab-function": "^6.0.19",
-        "postcss-logical": "^7.0.1",
-        "postcss-nesting": "^12.1.5",
+        "postcss-gap-properties": "^6.0.0",
+        "postcss-image-set-function": "^7.0.0",
+        "postcss-lab-function": "^7.0.0",
+        "postcss-logical": "^8.0.0",
+        "postcss-nesting": "^13.0.0",
         "postcss-opacity-percentage": "^2.0.0",
-        "postcss-overflow-shorthand": "^5.0.1",
+        "postcss-overflow-shorthand": "^6.0.0",
         "postcss-page-break": "^3.0.4",
-        "postcss-place": "^9.0.1",
-        "postcss-pseudo-class-any-link": "^9.0.2",
+        "postcss-place": "^10.0.0",
+        "postcss-pseudo-class-any-link": "^10.0.0",
         "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^7.0.2"
+        "postcss-selector-not": "^8.0.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-pseudo-class-any-link": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-9.0.2.tgz",
-      "integrity": "sha512-HFSsxIqQ9nA27ahyfH37cRWGk3SYyQLpk0LiWw/UGMV4VKT5YG2ONee4Pz/oFesnK0dn2AjcyequDbIjKJgB0g==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-10.0.0.tgz",
+      "integrity": "sha512-bde8VE08Gq3ekKDq2BQ0ESOjNX54lrFDK3U9zABPINaqHblbZL/4Wfo5Y2vk6U64yVd/sjDwTzuiisFBpGNNIQ==",
       "dev": true,
       "funding": [
         {
@@ -6958,10 +6957,10 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
@@ -6978,9 +6977,9 @@
       }
     },
     "node_modules/postcss-selector-not": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.2.tgz",
-      "integrity": "sha512-/SSxf/90Obye49VZIfc0ls4H0P6i6V1iHv0pzZH8SdgvZOPFkF37ef1r5cyWcMflJSFJ5bfuoluTnFnBBFiuSA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-8.0.0.tgz",
+      "integrity": "sha512-g/juh7A83GWc3+kWL8BiS3YUIJb3XNqIVKz1kGvgN3OhoGCsPncy1qo/+q61tjy5r87OxBhSY1+hcH3yOhEW+g==",
       "dev": true,
       "funding": [
         {
@@ -6993,19 +6992,19 @@
         }
       ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
+      "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
diff --git a/package.json b/package.json
index c21c07e10..9029b3b1b 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,11 @@
     "@github/text-expander-element": "~2.7.1",
     "@iconify-icons/mingcute": "~1.2.9",
     "@justinribeiro/lite-youtube": "~1.5.0",
-    "@szhsin/react-menu": "~4.2.0",
+    "@szhsin/react-menu": "~4.2.1",
     "compare-versions": "~6.1.1",
     "dayjs": "~1.11.12",
     "dayjs-twitter": "~0.5.0",
-    "fast-blurhash": "~1.1.2",
+    "fast-blurhash": "~1.1.4",
     "fast-equals": "~5.0.1",
     "fuse.js": "~7.0.0",
     "html-prettify": "~1.0.7",
@@ -53,7 +53,7 @@
     "@preact/preset-vite": "~2.9.0",
     "postcss": "~8.4.40",
     "postcss-dark-theme-class": "~1.3.0",
-    "postcss-preset-env": "~9.6.0",
+    "postcss-preset-env": "~10.0.0",
     "twitter-text": "~3.1.0",
     "vite": "~5.3.5",
     "vite-plugin-generate-file": "~0.2.0",