RubyGems - iron-cms - Versions diffs - 0.4.5 → 0.5.1 - Mend

iron-cms 0.4.5 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

checksums.yaml +4 -4
data/Rakefile +3 -0
data/app/assets/builds/iron.css +1154 -1395
data/app/assets/tailwind/iron/application.css +3 -1
data/app/assets/tailwind/iron/components/badge.css +97 -0
data/app/assets/tailwind/iron/components/form.css +1 -1
data/app/assets/tailwind/iron/components/input.css +2 -2
data/app/assets/tailwind/iron/lexxy.css +366 -0
data/app/controllers/iron/home_controller.rb +1 -0
data/app/helpers/iron/application_helper.rb +4 -13
data/app/helpers/iron/entries_helper.rb +0 -4
data/app/helpers/iron/icons_helper.rb +7 -5
data/app/helpers/iron/ui_helper.rb +22 -0
data/app/javascript/iron/application.js +5 -3
data/app/views/iron/block_definitions/_block_definition.html.erb +2 -2
data/app/views/iron/content_types/_content_type.html.erb +2 -2
data/app/views/iron/content_types/show.html.erb +1 -1
data/app/views/iron/entries/fields/_rich_text_area.html.erb +1 -3
data/app/views/iron/field_definitions/_field_definition.html.erb +2 -4
data/app/views/iron/home/show.html.erb +48 -2
data/app/views/iron/locales/_locale.html.erb +1 -1
data/app/views/iron/users/_user.html.erb +1 -1
data/app/views/layouts/action_text/contents/_content.html.erb +1 -1
data/app/views/layouts/iron/_sidebar_content.html.erb +30 -6
data/app/views/layouts/iron/_user_menu.html.erb +1 -1
data/app/views/layouts/iron/authentication.html.erb +1 -1
data/config/importmap.rb +2 -2
data/lib/iron/engine.rb +2 -0
data/lib/iron/version.rb +1 -1
data/lib/iron.rb +0 -1
data/lib/puma/plugin/iron_tailwindcss.rb +8 -8
data/lib/tasks/iron_tailwindcss.rake +33 -0
data/vendor/javascript/lexxy.js +10814 -0
metadata +20 -8
data/app/assets/tailwind/iron/actiontext.css +0 -550
data/app/helpers/iron/block_helper.rb +0 -4
data/app/helpers/iron/buttons_helper.rb +0 -14
data/app/helpers/iron/components/badge_helper.rb +0 -70
data/app/javascript/iron/controllers/trix_controller.js +0 -19
data/lib/iron/cva.rb +0 -69
data/vendor/javascript/trix.js +0 -5

data/app/assets/builds/iron.css CHANGED Viewed

@@ -15,55 +15,23 @@
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
-    --color-orange-400: oklch(75% 0.183 55.934);
-    --color-orange-500: oklch(70.5% 0.213 47.604);
-    --color-orange-700: oklch(55.3% 0.195 38.402);
-    --color-amber-400: oklch(82.8% 0.189 84.429);
-    --color-amber-700: oklch(55.5% 0.163 48.998);
-    --color-yellow-300: oklch(90.5% 0.182 98.111);
-    --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-yellow-700: oklch(55.4% 0.135 66.442);
-    --color-lime-300: oklch(89.7% 0.196 126.665);
-    --color-lime-400: oklch(84.1% 0.238 128.85);
-    --color-lime-700: oklch(53.2% 0.157 131.589);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-700: oklch(52.7% 0.154 150.069);
-    --color-emerald-400: oklch(76.5% 0.177 163.223);
-    --color-emerald-500: oklch(69.6% 0.17 162.48);
-    --color-emerald-700: oklch(50.8% 0.118 165.612);
-    --color-teal-300: oklch(85.5% 0.138 181.071);
-    --color-teal-500: oklch(70.4% 0.14 182.503);
-    --color-teal-700: oklch(51.1% 0.096 186.391);
-    --color-cyan-300: oklch(86.5% 0.127 207.078);
-    --color-cyan-400: oklch(78.9% 0.154 211.53);
-    --color-cyan-700: oklch(52% 0.105 223.128);
     --color-sky-100: oklch(95.1% 0.026 236.824);
-    --color-sky-300: oklch(82.8% 0.111 230.318);
     --color-sky-400: oklch(74.6% 0.16 232.661);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-600: oklch(58.8% 0.158 241.966);
-    --color-sky-700: oklch(50% 0.134 242.749);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
-    --color-indigo-700: oklch(45.7% 0.24 277.023);
-    --color-violet-400: oklch(70.2% 0.183 293.541);
-    --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-violet-700: oklch(49.1% 0.27 292.581);
-    --color-purple-400: oklch(71.4% 0.203 305.504);
-    --color-purple-500: oklch(62.7% 0.265 303.9);
-    --color-purple-700: oklch(49.6% 0.265 301.924);
-    --color-fuchsia-400: oklch(74% 0.238 322.16);
-    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
     --color-pink-400: oklch(71.8% 0.202 349.761);
-    --color-pink-700: oklch(52.5% 0.223 3.958);
-    --color-rose-400: oklch(71.2% 0.194 13.428);
-    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-pink-600: oklch(59.2% 0.249 0.584);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-stone-50: oklch(98.5% 0.001 106.423);
@@ -94,6 +62,7 @@
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --text-4xl: 2.25rem;
@@ -103,14 +72,17 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
+    --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --blur-xs: 4px;
     --blur-sm: 8px;
+    --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -741,15 +713,15 @@
     outline-offset: calc(1px * -1);
     outline-color: var(--color-stone-300);
     background-color: var(--color-white);
-    &:focus {
+    &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus {
+    &:focus-visible {
       outline-offset: calc(2px * -1);
     }
-    &:focus {
-      outline-color: var(--color-indigo-600);
+    &:focus-visible {
+      outline-color: var(--color-sky-600);
     }
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -772,8 +744,8 @@
       }
     }
     @media (prefers-color-scheme: dark) {
-      &:focus {
-        outline-color: var(--color-indigo-500);
+      &:focus-visible {
+        outline-color: var(--color-sky-600);
       }
     }
     &:disabled {
@@ -992,6 +964,52 @@
   .left-full {
     left: 100%;
   }
+  .dropdown {
+    position-area: top span-right;
+    position-anchor: var(--popover-anchor);
+    margin: calc(var(--spacing) * 0);
+    min-width: calc(var(--spacing) * 64);
+    padding: calc(var(--spacing) * 0);
+    isolation: isolate;
+    width: max-content;
+    border-radius: var(--radius-xl);
+    padding: calc(var(--spacing) * 1);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: transparent;
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+    overflow-y: auto;
+    background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 75%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-stone-800) 75%, transparent);
+      }
+    }
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
+    @media (prefers-color-scheme: dark) {
+      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      --tw-ring-inset: inset;
+    }
+  }
   .z-40 {
     z-index: 40;
   }
@@ -1699,6 +1717,58 @@
       }
     }
   }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    column-gap: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    @media (width >= 40rem) {
+      font-size: var(--text-xs);
+      line-height: calc(var(--spacing) * 5);
+    }
+    @media (forced-colors: active) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+    background-color: color-mix(in srgb, oklch(44.4% 0.011 73.639) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-stone-600) 10%, transparent);
+    }
+    color: var(--color-stone-700);
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(44.4% 0.011 73.639) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-stone-600) 20%, transparent);
+        }
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    @media (prefers-color-scheme: dark) {
+      &:is(:where(.group):hover *) {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
   .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
@@ -1708,6 +1778,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -1729,6 +1802,9 @@
   .inline-grid {
     display: inline-grid;
   }
+  .table {
+    display: table;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1836,6 +1912,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1852,6 +1931,9 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-3d {
+    scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -1864,12 +1946,24 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .list-disc {
     list-style-type: disc;
   }
   .appearance-none {
     appearance: none;
   }
+  .columns-2 {
+    columns: 2;
+  }
+  .columns-3 {
+    columns: 3;
+  }
+  .columns-4 {
+    columns: 4;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1891,6 +1985,9 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -2055,108 +2152,80 @@
   .border-stone-800 {
     border-color: var(--color-stone-800);
   }
-  .bg-amber-400\/20 {
-    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
-    }
-  }
-  .bg-blue-500\/15 {
-    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
+  .badge-green {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
+      background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent);
     }
-  }
-  .bg-cyan-400\/20 {
-    background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
+    color: var(--color-green-700);
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 25%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-500) 25%, transparent);
+        }
+      }
     }
-  }
-  .bg-emerald-500\/15 {
-    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+      }
     }
-  }
-  .bg-fuchsia-400\/15 {
-    background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-fuchsia-400) 15%, transparent);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-green-400);
     }
-  }
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
-  .bg-green-500\/15 {
-    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent);
+    @media (prefers-color-scheme: dark) {
+      &:is(:where(.group):hover *) {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
+          }
+        }
+      }
     }
   }
-  .bg-indigo-500\/15 {
-    background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 15%, transparent);
+  .badge-blue {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-indigo-500) 15%, transparent);
+      background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
     }
-  }
-  .bg-lime-400\/20 {
-    background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-lime-400) 20%, transparent);
+    color: var(--color-blue-700);
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
+        }
+      }
     }
-  }
-  .bg-orange-500\/15 {
-    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-orange-500) 15%, transparent);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-blue-400);
     }
-  }
-  .bg-pink-400\/15 {
-    background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-pink-400) 15%, transparent);
+    @media (prefers-color-scheme: dark) {
+      &:is(:where(.group):hover *) {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
+          }
+        }
+      }
     }
   }
-  .bg-purple-500\/15 {
-    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-purple-500) 15%, transparent);
-    }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
   }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
-  .bg-red-500\/15 {
-    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
-    }
-  }
-  .bg-rose-400\/15 {
-    background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
-    }
-  }
-  .bg-sky-500\/15 {
-    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
-    }
-  }
   .bg-stone-50 {
     background-color: var(--color-stone-50);
   }
   .bg-stone-200 {
     background-color: var(--color-stone-200);
   }
-  .bg-stone-600\/10 {
-    background-color: color-mix(in srgb, oklch(44.4% 0.011 73.639) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-stone-600) 10%, transparent);
-    }
-  }
   .bg-stone-700 {
     background-color: var(--color-stone-700);
   }
@@ -2196,27 +2265,9 @@
       background-color: color-mix(in oklab, var(--color-stone-900) 80%, transparent);
     }
   }
-  .bg-teal-500\/15 {
-    background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-teal-500) 15%, transparent);
-    }
-  }
-  .bg-violet-500\/15 {
-    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-yellow-400\/20 {
-    background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
-    }
-  }
   .fill-current {
     fill: currentcolor;
   }
@@ -2253,12 +2304,12 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .p-\[5\%\] {
     padding: 5%;
   }
-  .px-1\.5 {
-    padding-inline: calc(var(--spacing) * 1.5);
-  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -2271,9 +2322,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0\.5 {
-    padding-block: calc(var(--spacing) * 0.5);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -2385,10 +2433,6 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-sm\/5 {
-    font-size: var(--text-sm);
-    line-height: calc(var(--spacing) * 5);
-  }
   .text-sm\/6 {
     font-size: var(--text-sm);
     line-height: calc(var(--spacing) * 6);
@@ -2432,48 +2476,15 @@
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
-  .text-amber-700 {
-    color: var(--color-amber-700);
-  }
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
   .text-current {
     color: currentcolor;
   }
-  .text-cyan-700 {
-    color: var(--color-cyan-700);
-  }
-  .text-emerald-700 {
-    color: var(--color-emerald-700);
-  }
-  .text-fuchsia-700 {
-    color: var(--color-fuchsia-700);
-  }
   .text-gray-600 {
     color: var(--color-gray-600);
   }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
-  .text-indigo-700 {
-    color: var(--color-indigo-700);
-  }
-  .text-lime-700 {
-    color: var(--color-lime-700);
-  }
-  .text-orange-700 {
-    color: var(--color-orange-700);
-  }
-  .text-pink-700 {
-    color: var(--color-pink-700);
-  }
-  .text-purple-700 {
-    color: var(--color-purple-700);
-  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -2489,15 +2500,9 @@
   .text-red-800 {
     color: var(--color-red-800);
   }
-  .text-rose-700 {
-    color: var(--color-rose-700);
-  }
   .text-sky-600 {
     color: var(--color-sky-600);
   }
-  .text-sky-700 {
-    color: var(--color-sky-700);
-  }
   .text-stone-400 {
     color: var(--color-stone-400);
   }
@@ -2516,18 +2521,9 @@
   .text-stone-950 {
     color: var(--color-stone-950);
   }
-  .text-teal-700 {
-    color: var(--color-teal-700);
-  }
-  .text-violet-700 {
-    color: var(--color-violet-700);
-  }
   .text-white {
     color: var(--color-white);
   }
-  .text-yellow-700 {
-    color: var(--color-yellow-700);
-  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -2537,13 +2533,26 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
+  .line-through {
+    text-decoration-line: line-through;
+  }
   .no-underline {
     text-decoration-line: none;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2629,6 +2638,12 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .filter\! {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -2776,194 +2791,14 @@
       rotate: 180deg;
     }
   }
-  .group-hover\:bg-amber-400\/30 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
-        }
-      }
+  .group-focus\/item\:text-sky-600 {
+    &:is(:where(.group\/item):focus *) {
+      color: var(--color-sky-600);
     }
   }
-  .group-hover\:bg-blue-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-cyan-400\/30 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-cyan-400) 30%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-emerald-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-fuchsia-400\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-fuchsia-400) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-green-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-green-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-indigo-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-indigo-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-lime-400\/30 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-lime-400) 30%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-orange-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-orange-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-pink-400\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-pink-400) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-purple-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-purple-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-red-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-red-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-rose-400\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-rose-400) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-sky-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-stone-600\/20 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(44.4% 0.011 73.639) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-stone-600) 20%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-teal-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-teal-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-violet-500\/25 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent);
-        }
-      }
-    }
-  }
-  .group-hover\:bg-yellow-400\/30 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
-        }
-      }
-    }
-  }
-  .group-focus\/item\:text-sky-600 {
-    &:is(:where(.group\/item):focus *) {
-      color: var(--color-sky-600);
-    }
-  }
-  .group-focus\/item\:text-stone-500 {
-    &:is(:where(.group\/item):focus *) {
-      color: var(--color-stone-500);
+  .group-focus\/item\:text-stone-500 {
+    &:is(:where(.group\/item):focus *) {
+      color: var(--color-stone-500);
     }
   }
   .group-focus\/option\:text-white {
@@ -3129,12 +2964,6 @@
       outline-style: none;
     }
   }
-  .focus-visible\:outline {
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-    }
-  }
   .focus-visible\:outline-2 {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -3146,16 +2975,6 @@
       outline-offset: calc(2px * -1);
     }
   }
-  .focus-visible\:outline-offset-2 {
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-  }
-  .focus-visible\:outline-blue-500 {
-    &:focus-visible {
-      outline-color: var(--color-blue-500);
-    }
-  }
   .focus-visible\:outline-sky-600 {
     &:focus-visible {
       outline-color: var(--color-sky-600);
@@ -3339,12 +3158,6 @@
       line-height: calc(var(--spacing) * 6);
     }
   }
-  .sm\:text-xs\/5 {
-    @media (width >= 40rem) {
-      font-size: var(--text-xs);
-      line-height: calc(var(--spacing) * 5);
-    }
-  }
   .lg\:fixed {
     @media (width >= 64rem) {
       position: fixed;
@@ -3423,14 +3236,6 @@
       }
     }
   }
-  .dark\:bg-amber-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
-      }
-    }
-  }
   .dark\:bg-black\/10 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, #000 10%, transparent);
@@ -3439,70 +3244,6 @@
       }
     }
   }
-  .dark\:bg-cyan-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-emerald-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-fuchsia-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-fuchsia-400) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-green-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-lime-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-lime-400) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-orange-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-pink-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-pink-400) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-red-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
-      }
-    }
-  }
   .dark\:bg-red-900\/50 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
@@ -3511,22 +3252,6 @@
       }
     }
   }
-  .dark\:bg-rose-400\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-sky-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
-      }
-    }
-  }
   .dark\:bg-stone-800 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-stone-800);
@@ -3545,14 +3270,6 @@
       background-color: var(--color-stone-900);
     }
   }
-  .dark\:bg-teal-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
-      }
-    }
-  }
   .dark\:bg-white\/5 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -3569,189 +3286,96 @@
       }
     }
   }
-  .dark\:bg-yellow-400\/10 {
+  .dark\:text-red-200 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-yellow-400) 10%, transparent);
-      }
+      color: var(--color-red-200);
     }
   }
-  .dark\:text-amber-400 {
+  .dark\:text-sky-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-amber-400);
+      color: var(--color-sky-400);
     }
   }
-  .dark\:text-blue-400 {
+  .dark\:text-stone-100 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-blue-400);
+      color: var(--color-stone-100);
     }
   }
-  .dark\:text-cyan-300 {
+  .dark\:text-stone-300 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-cyan-300);
+      color: var(--color-stone-300);
     }
   }
-  .dark\:text-emerald-400 {
+  .dark\:text-stone-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-emerald-400);
+      color: var(--color-stone-400);
     }
   }
-  .dark\:text-fuchsia-400 {
+  .dark\:text-stone-500 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-fuchsia-400);
+      color: var(--color-stone-500);
     }
   }
-  .dark\:text-green-400 {
+  .dark\:text-white {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-green-400);
+      color: var(--color-white);
     }
   }
-  .dark\:text-indigo-400 {
+  .dark\:shadow-none {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-indigo-400);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .dark\:text-lime-300 {
+  .dark\:ring {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-lime-300);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .dark\:text-orange-400 {
+  .dark\:ring-white\/10 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-orange-400);
+      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
     }
   }
-  .dark\:text-pink-400 {
+  .dark\:inset-ring-white\/5 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-pink-400);
+      --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
     }
   }
-  .dark\:text-purple-400 {
+  .dark\:inset-ring-white\/10 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-purple-400);
+      --tw-inset-ring-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
     }
   }
-  .dark\:text-red-200 {
+  .dark\:-outline-offset-1 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-200);
+      outline-offset: calc(1px * -1);
     }
   }
-  .dark\:text-red-400 {
+  .dark\:outline-sky-500 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-400);
+      outline-color: var(--color-sky-500);
     }
   }
-  .dark\:text-rose-400 {
+  .dark\:outline-white\/\(--ring-opacity\) {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-rose-400);
+      outline-color: #fff;
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--color-white) var(--ring-opacity), transparent);
+      }
     }
   }
-  .dark\:text-sky-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-sky-300);
-    }
-  }
-  .dark\:text-sky-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-sky-400);
-    }
-  }
-  .dark\:text-stone-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-100);
-    }
-  }
-  .dark\:text-stone-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-300);
-    }
-  }
-  .dark\:text-stone-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-400);
-    }
-  }
-  .dark\:text-stone-500 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-500);
-    }
-  }
-  .dark\:text-teal-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-teal-300);
-    }
-  }
-  .dark\:text-violet-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-violet-400);
-    }
-  }
-  .dark\:text-white {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-white);
-    }
-  }
-  .dark\:text-yellow-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-yellow-300);
-    }
-  }
-  .dark\:shadow-none {
-    @media (prefers-color-scheme: dark) {
-      --tw-shadow: 0 0 #0000;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .dark\:ring {
-    @media (prefers-color-scheme: dark) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .dark\:ring-white\/10 {
-    @media (prefers-color-scheme: dark) {
-      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      }
-    }
-  }
-  .dark\:inset-ring-white\/5 {
-    @media (prefers-color-scheme: dark) {
-      --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-  }
-  .dark\:inset-ring-white\/10 {
-    @media (prefers-color-scheme: dark) {
-      --tw-inset-ring-color: color-mix(in srgb, #fff 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      }
-    }
-  }
-  .dark\:-outline-offset-1 {
-    @media (prefers-color-scheme: dark) {
-      outline-offset: calc(1px * -1);
-    }
-  }
-  .dark\:outline-sky-500 {
-    @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-sky-500);
-    }
-  }
-  .dark\:outline-white\/\(--ring-opacity\) {
-    @media (prefers-color-scheme: dark) {
-      outline-color: #fff;
-      @supports (color: color-mix(in lab, red, red)) {
-        outline-color: color-mix(in oklab, var(--color-white) var(--ring-opacity), transparent);
-      }
-    }
-  }
-  .dark\:outline-white\/10 {
+  .dark\:outline-white\/10 {
     @media (prefers-color-scheme: dark) {
       outline-color: color-mix(in srgb, #fff 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
@@ -3781,407 +3405,191 @@
       --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
     }
   }
-  .dark\:group-hover\:bg-amber-400\/15 {
+  .dark\:group-focus\/item\:text-sky-400 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
-          }
-        }
+      &:is(:where(.group\/item):focus *) {
+        color: var(--color-sky-400);
       }
     }
   }
-  .dark\:group-hover\:bg-blue-500\/25 {
+  .dark\:group-focus\/item\:text-white {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
-          }
-        }
+      &:is(:where(.group\/item):focus *) {
+        color: var(--color-white);
       }
     }
   }
-  .dark\:group-hover\:bg-cyan-400\/15 {
+  .dark\:before\:pointer-events-none {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 15%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-cyan-400) 15%, transparent);
-          }
-        }
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
       }
     }
   }
-  .dark\:group-hover\:bg-emerald-500\/20 {
+  .dark\:before\:absolute {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
-          }
-        }
+      &::before {
+        content: var(--tw-content);
+        position: absolute;
       }
     }
   }
-  .dark\:group-hover\:bg-fuchsia-400\/20 {
+  .dark\:before\:inset-0 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-fuchsia-400) 20%, transparent);
-          }
-        }
+      &::before {
+        content: var(--tw-content);
+        inset: calc(var(--spacing) * 0);
       }
     }
   }
-  .dark\:group-hover\:bg-green-500\/20 {
+  .dark\:before\:bg-black\/10 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
-          }
+      &::before {
+        content: var(--tw-content);
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
         }
       }
     }
   }
-  .dark\:group-hover\:bg-indigo-500\/20 {
+  .dark\:after\:pointer-events-none {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
-          }
-        }
+      &::after {
+        content: var(--tw-content);
+        pointer-events: none;
       }
     }
   }
-  .dark\:group-hover\:bg-lime-400\/15 {
+  .dark\:after\:absolute {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 15%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-lime-400) 15%, transparent);
-          }
-        }
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
       }
     }
   }
-  .dark\:group-hover\:bg-orange-500\/20 {
+  .dark\:after\:inset-0 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
-          }
-        }
+      &::after {
+        content: var(--tw-content);
+        inset: calc(var(--spacing) * 0);
       }
     }
   }
-  .dark\:group-hover\:bg-pink-400\/20 {
+  .dark\:after\:border-b {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-pink-400) 20%, transparent);
-          }
+      &::after {
+        content: var(--tw-content);
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+  .dark\:after\:border-white\/10 {
+    @media (prefers-color-scheme: dark) {
+      &::after {
+        content: var(--tw-content);
+        border-color: color-mix(in srgb, #fff 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
         }
       }
     }
   }
-  .dark\:group-hover\:bg-purple-500\/20 {
+  .dark\:after\:bg-black\/10 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
-          }
+      &::after {
+        content: var(--tw-content);
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
         }
       }
     }
   }
-  .dark\:group-hover\:bg-red-500\/20 {
+  .dark\:hover\:bg-stone-700 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
-          }
+          background-color: var(--color-stone-700);
         }
       }
     }
   }
-  .dark\:group-hover\:bg-rose-400\/20 {
+  .dark\:hover\:bg-stone-700\/50 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);
+          background-color: color-mix(in srgb, oklch(37.4% 0.01 67.558) 50%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
+            background-color: color-mix(in oklab, var(--color-stone-700) 50%, transparent);
           }
         }
       }
     }
   }
-  .dark\:group-hover\:bg-sky-500\/20 {
+  .dark\:hover\:bg-stone-800\/50 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
+          background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 50%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
+            background-color: color-mix(in oklab, var(--color-stone-800) 50%, transparent);
           }
         }
       }
     }
   }
-  .dark\:group-hover\:bg-teal-500\/20 {
+  .dark\:hover\:bg-white\/5 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
+          background-color: color-mix(in srgb, #fff 5%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
+            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
           }
         }
       }
     }
   }
-  .dark\:group-hover\:bg-violet-500\/20 {
+  .dark\:hover\:bg-white\/20 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
+          background-color: color-mix(in srgb, #fff 20%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
+            background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
           }
         }
       }
     }
   }
-  .dark\:group-hover\:bg-white\/10 {
+  .dark\:hover\:text-stone-200 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 10%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-          }
+          color: var(--color-stone-200);
         }
       }
     }
   }
-  .dark\:group-hover\:bg-yellow-400\/15 {
+  .dark\:hover\:text-stone-300 {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group):hover *) {
+      &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 15%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-yellow-400) 15%, transparent);
-          }
+          color: var(--color-stone-300);
         }
       }
     }
   }
-  .dark\:group-focus\/item\:text-sky-400 {
+  .dark\:hover\:text-white {
     @media (prefers-color-scheme: dark) {
-      &:is(:where(.group\/item):focus *) {
-        color: var(--color-sky-400);
-      }
-    }
-  }
-  .dark\:group-focus\/item\:text-white {
-    @media (prefers-color-scheme: dark) {
-      &:is(:where(.group\/item):focus *) {
-        color: var(--color-white);
-      }
-    }
-  }
-  .dark\:before\:pointer-events-none {
-    @media (prefers-color-scheme: dark) {
-      &::before {
-        content: var(--tw-content);
-        pointer-events: none;
-      }
-    }
-  }
-  .dark\:before\:absolute {
-    @media (prefers-color-scheme: dark) {
-      &::before {
-        content: var(--tw-content);
-        position: absolute;
-      }
-    }
-  }
-  .dark\:before\:inset-0 {
-    @media (prefers-color-scheme: dark) {
-      &::before {
-        content: var(--tw-content);
-        inset: calc(var(--spacing) * 0);
-      }
-    }
-  }
-  .dark\:before\:bg-black\/10 {
-    @media (prefers-color-scheme: dark) {
-      &::before {
-        content: var(--tw-content);
-        background-color: color-mix(in srgb, #000 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-        }
-      }
-    }
-  }
-  .dark\:after\:pointer-events-none {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        pointer-events: none;
-      }
-    }
-  }
-  .dark\:after\:absolute {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        position: absolute;
-      }
-    }
-  }
-  .dark\:after\:inset-0 {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        inset: calc(var(--spacing) * 0);
-      }
-    }
-  }
-  .dark\:after\:border-b {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        border-bottom-style: var(--tw-border-style);
-        border-bottom-width: 1px;
-      }
-    }
-  }
-  .dark\:after\:border-white\/10 {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        border-color: color-mix(in srgb, #fff 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-        }
-      }
-    }
-  }
-  .dark\:after\:bg-black\/10 {
-    @media (prefers-color-scheme: dark) {
-      &::after {
-        content: var(--tw-content);
-        background-color: color-mix(in srgb, #000 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-stone-700 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-stone-700);
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-stone-700\/50 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(37.4% 0.01 67.558) 50%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-stone-700) 50%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-stone-800\/50 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 50%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-stone-800) 50%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-white\/5 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 5%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-white\/20 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:text-stone-200 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-stone-200);
-        }
-      }
-    }
-  }
-  .dark\:hover\:text-stone-300 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-stone-300);
-        }
-      }
-    }
-  }
-  .dark\:hover\:text-white {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-white);
-        }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-white);
+        }
       }
     }
   }
@@ -4233,12 +3641,6 @@
       }
     }
   }
-  .forced-colors\:outline {
-    @media (forced-colors: active) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-    }
-  }
 }
 @layer base {
   form {
@@ -4355,7 +3757,7 @@
         }
       }
     }
-    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
+    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
       position: relative;
       display: block;
       width: 100%;
@@ -4378,15 +3780,15 @@
       outline-offset: calc(1px * -1);
       outline-color: var(--color-stone-300);
       background-color: var(--color-white);
-      &:focus {
+      &:focus-visible {
         outline-style: var(--tw-outline-style);
         outline-width: 2px;
       }
-      &:focus {
+      &:focus-visible {
         outline-offset: calc(2px * -1);
       }
-      &:focus {
-        outline-color: var(--color-indigo-600);
+      &:focus-visible {
+        outline-color: var(--color-sky-600);
       }
       @media (prefers-color-scheme: dark) {
         background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -4409,8 +3811,8 @@
         }
       }
       @media (prefers-color-scheme: dark) {
-        &:focus {
-          outline-color: var(--color-indigo-500);
+        &:focus-visible {
+          outline-color: var(--color-sky-600);
         }
       }
       &:disabled {
@@ -4588,478 +3990,835 @@
   }
 }
 @layer components {
-  trix-editor {
-    border: 1px solid #bbb;
-    border-radius: 3px;
-    margin: 0;
-    padding: 0.4em 0.6em;
-    min-height: 5em;
-    outline: none;
-  }
-  trix-toolbar * {
-    box-sizing: border-box;
-  }
-  trix-toolbar .trix-button-row {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    overflow-x: auto;
-  }
-  trix-toolbar .trix-button-group {
-    display: flex;
-    margin-bottom: 10px;
-    border: 1px solid #bbb;
-    border-top-color: #ccc;
-    border-bottom-color: #888;
-    border-radius: 3px;
-  }
-  trix-toolbar .trix-button-group:not(:first-child) {
-    margin-left: 1.5vw;
-  }
-  @media (max-width: 768px) {
-    trix-toolbar .trix-button-group:not(:first-child) {
-      margin-left: 0;
+  lexxy-editor {
+    display: block;
+    width: 100%;
+    border-radius: var(--radius-md);
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
     }
-  }
-  trix-toolbar .trix-button-group-spacer {
-    flex-grow: 1;
-  }
-  @media (max-width: 768px) {
-    trix-toolbar .trix-button-group-spacer {
-      display: none;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
     }
-  }
-  trix-toolbar .trix-button {
-    position: relative;
-    float: left;
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 0.75em;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.5em;
-    margin: 0;
-    outline: none;
-    border: none;
-    border-bottom: 1px solid #ddd;
-    border-radius: 0;
-    background: transparent;
-  }
-  trix-toolbar .trix-button:not(:first-child) {
-    border-left: 1px solid #ccc;
-  }
-  trix-toolbar .trix-button.trix-active {
-    background: #cbeefa;
-    color: black;
-  }
-  trix-toolbar .trix-button:not(:disabled) {
-    cursor: pointer;
-  }
-  trix-toolbar .trix-button:disabled {
-    color: rgba(0, 0, 0, 0.125);
-  }
-  @media (max-width: 768px) {
-    trix-toolbar .trix-button {
-      letter-spacing: -0.01em;
-      padding: 0 0.3em;
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
     }
-  }
-  trix-toolbar .trix-button--icon {
-    font-size: inherit;
-    width: 2.6em;
-    height: 1.6em;
-    max-width: calc(0.8em + 4vw);
-    text-indent: -9999px;
-  }
-  @media (max-width: 768px) {
-    trix-toolbar .trix-button--icon {
-      height: 2em;
-      max-width: calc(0.8em + 3.5vw);
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
     }
-  }
-  trix-toolbar .trix-button--icon::before {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0.6;
-    content: "";
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-  @media (max-width: 768px) {
-    trix-toolbar .trix-button--icon::before {
-      right: 6%;
-      left: 6%;
+    &:focus-visible {
+      outline-color: var(--color-sky-600);
+    }
+    @media (prefers-color-scheme: dark) {
+      &:focus-visible {
+        outline-color: var(--color-sky-500);
+      }
     }
   }
-  trix-toolbar .trix-button--icon.trix-active::before {
-    opacity: 1;
-  }
-  trix-toolbar .trix-button--icon:disabled::before {
-    opacity: 0.125;
-  }
-  trix-toolbar .trix-button--icon-attach::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
-    top: 8%;
-    bottom: 4%;
-  }
-  trix-toolbar .trix-button--icon-bold::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
-  }
-  trix-toolbar .trix-button--icon-italic::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
-  }
-  trix-toolbar .trix-button--icon-link::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
-  }
-  trix-toolbar .trix-button--icon-strike::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 2);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
+    }
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    background-color: var(--color-stone-50);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
   }
-  trix-toolbar .trix-button--icon-quote::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar [data-toolbar-group] {
+    display: flex;
+    align-items: center;
   }
-  trix-toolbar .trix-button--icon-heading-1::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar [data-toolbar-group]:not(:last-child)::after {
+    content: "";
+    margin-inline: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 5);
+    width: 1px;
+    background-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
+    }
   }
-  trix-toolbar .trix-button--icon-code::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 8);
+    width: calc(var(--spacing) * 8);
+    border-radius: var(--radius-md);
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-200);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stone-200);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-stone-600);
+    }
+    &:disabled {
+      pointer-events: none;
+    }
+    &:disabled {
+      opacity: 40%;
+    }
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  trix-toolbar .trix-button--icon-bullet-list::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar button[aria-pressed="true"], lexxy-toolbar button.active {
+    background-color: var(--color-stone-200);
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
   }
-  trix-toolbar .trix-button--icon-number-list::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-toolbar button svg {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    color: inherit;
+    fill: currentColor;
   }
-  trix-toolbar .trix-button--icon-undo::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-editor [contenteditable] {
+    display: block;
+    min-height: calc(var(--spacing) * 48);
+    width: 100%;
+    padding: calc(var(--spacing) * 4);
+    font-size: var(--text-base);
+    line-height: calc(var(--spacing) * 6);
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: calc(var(--spacing) * 6);
+    }
   }
-  trix-toolbar .trix-button--icon-redo::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-editor [contenteditable]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--color-stone-400);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-500);
+    }
+    pointer-events: none;
   }
-  trix-toolbar .trix-button--icon-decrease-nesting-level::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-editor [data-lexxy-link-editor] {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 2);
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-800);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    border-radius: var(--radius-lg);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
   }
-  trix-toolbar .trix-button--icon-increase-nesting-level::before {
-    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
+  lexxy-editor [data-lexxy-link-editor] input {
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    &::placeholder {
+      color: var(--color-stone-400);
+    }
+    @media (prefers-color-scheme: dark) {
+      &::placeholder {
+        color: var(--color-stone-500);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
+    @media (prefers-color-scheme: dark) {
+      &:focus-visible {
+        outline-color: var(--color-indigo-500);
+      }
+    }
   }
-  trix-toolbar .trix-dialogs {
-    position: relative;
+  lexxy-editor [data-lexxy-link-editor] button {
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    background-color: var(--color-indigo-600);
+    color: var(--color-white);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-500);
+      }
+    }
   }
-  trix-toolbar .trix-dialog {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    font-size: 0.75em;
-    padding: 15px 10px;
-    background: #fff;
-    box-shadow: 0 0.3em 1em #ccc;
-    border-top: 2px solid #888;
-    border-radius: 5px;
-    z-index: 5;
-  }
-  trix-toolbar .trix-input--dialog {
-    font-size: inherit;
-    font-weight: normal;
-    padding: 0.5em 0.8em;
-    margin: 0 10px 0 0;
-    border-radius: 3px;
-    border: 1px solid #bbb;
-    background-color: #fff;
-    box-shadow: none;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+  lexxy-link-dialog dialog {
+    margin: calc(var(--spacing) * 0);
+    padding: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    background-color: var(--color-white);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-800);
+    }
+    min-width: 18rem;
   }
-  trix-toolbar .trix-input--dialog.validate:invalid {
-    box-shadow: #f00 0px 0px 1.5px 1px;
+  lexxy-link-dialog form {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
   }
-  trix-toolbar .trix-button--dialog {
-    font-size: inherit;
-    padding: 0.5em;
-    border-bottom: none;
+  lexxy-link-dialog button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    height: auto;
+    min-width: calc(var(--spacing) * 0);
   }
-  trix-toolbar .trix-dialog--link {
-    max-width: 600px;
+  lexxy-link-dialog input[type="url"] {
+    width: 100%;
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-300);
+    background-color: var(--color-white);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-900);
+    &::placeholder {
+      color: var(--color-stone-400);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-900);
+    }
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    @media (prefers-color-scheme: dark) {
+      &::placeholder {
+        color: var(--color-stone-500);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:focus-visible {
+        outline-color: var(--color-indigo-500);
+      }
+    }
   }
-  trix-toolbar .trix-dialog__link-fields {
+  lexxy-link-dialog .lexxy-dialog-actions {
     display: flex;
-    align-items: baseline;
-  }
-  trix-toolbar .trix-dialog__link-fields .trix-input {
-    flex: 1;
-  }
-  trix-toolbar .trix-dialog__link-fields .trix-button-group {
-    flex: 0 0 content;
-    margin: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--spacing) * 2);
   }
-  trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  lexxy-link-dialog .lexxy-dialog-actions button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    background-color: var(--color-indigo-600);
+    color: var(--color-white);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-500);
+      }
+    }
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-indigo-500);
+    }
   }
-  trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
-    background: none;
+  lexxy-link-dialog .lexxy-dialog-actions button[value="unlink"] {
+    background-color: var(--color-stone-100);
+    color: var(--color-stone-800);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stone-200);
+      }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 15%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+          }
+        }
+      }
+    }
   }
-  trix-editor [data-trix-mutable]::selection, trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
-    background: none;
+  lexxy-editor .attachment__progress {
+    position: absolute;
+    z-index: 10;
+    top: calc(1/2 * 100%);
+    left: 5%;
+    height: calc(var(--spacing) * 1);
+    width: 90%;
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    overflow: hidden;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-700);
+    }
   }
-  trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
-    background: highlight;
+  lexxy-editor .attachment__progress::-webkit-progress-bar {
+    background-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-700);
+    }
   }
-  trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
-    background: highlight;
+  lexxy-editor .attachment__progress::-webkit-progress-value {
+    background-color: var(--color-indigo-600);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
   }
-  trix-editor [data-trix-mutable].attachment.attachment--file {
-    box-shadow: 0 0 0 2px highlight;
-    border-color: transparent;
+  lexxy-editor .attachment__progress::-moz-progress-bar {
+    background-color: var(--color-indigo-600);
   }
-  trix-editor [data-trix-mutable].attachment img {
-    box-shadow: 0 0 0 2px highlight;
+  lexxy-editor .attachment__progress[value="100"] {
+    opacity: 0%;
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
   }
-  trix-editor .attachment {
+  lexxy-editor .attachment {
     position: relative;
+    display: inline-block;
+    max-width: 100%;
   }
-  trix-editor .attachment:hover {
-    cursor: default;
-  }
-  trix-editor .attachment--preview .attachment__caption:hover {
-    cursor: text;
+  lexxy-editor .attachment--preview {
+    width: 100%;
+    text-align: center;
   }
-  trix-editor .attachment__progress {
-    position: absolute;
-    z-index: 1;
-    height: 20px;
-    top: calc(50% - 10px);
-    left: 5%;
-    width: 90%;
-    opacity: 0.9;
-    transition: opacity 200ms ease-in;
+  lexxy-editor .attachment--preview img {
+    max-width: 100%;
+    border-radius: 0.25rem;
   }
-  trix-editor .attachment__progress[value="100"] {
-    opacity: 0;
+  lexxy-editor .attachment--file {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    margin-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    border-radius: var(--radius-lg);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-300);
+    }
   }
-  trix-editor .attachment__caption-editor {
-    display: inline-block;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    color: inherit;
+  lexxy-editor .attachment__caption {
     text-align: center;
-    vertical-align: top;
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-500);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    margin-top: calc(var(--spacing) * 1);
   }
-  trix-editor .attachment__toolbar {
+  lexxy-editor .attachment__toolbar {
     position: absolute;
-    z-index: 1;
-    top: -0.9em;
-    left: 0;
-    width: 100%;
-    text-align: center;
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
   }
-  trix-editor .trix-button-group {
-    display: inline-flex;
+  lexxy-editor .attachment__toolbar button {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    border-radius: calc(infinity * 1px);
+    background-color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-stone-800) 90%, transparent);
+      }
+    }
+    color: var(--color-stone-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-white);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-stone-800);
+        }
+      }
+    }
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  trix-editor .trix-button {
-    position: relative;
-    float: left;
-    color: #666;
-    white-space: nowrap;
-    font-size: 80%;
-    padding: 0 0.8em;
-    margin: 0;
-    outline: none;
-    border: none;
-    border-radius: 0;
-    background: transparent;
+  lexxy-editor [data-trix-mutable] img, lexxy-editor .attachment.selected img {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-indigo-500);
   }
-  trix-editor .trix-button:not(:first-child) {
-    border-left: 1px solid #ccc;
+}
+@layer components {
+  .lexxy-content {
+    font-size: var(--text-base);
+    line-height: calc(var(--spacing) * 7);
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-100);
+    }
+    overflow-wrap: break-word;
   }
-  trix-editor .trix-button.trix-active {
-    background: #cbeefa;
+  .lexxy-content > * + * {
+    margin-top: calc(var(--spacing) * 4);
   }
-  trix-editor .trix-button:not(:disabled) {
-    cursor: pointer;
+  .lexxy-content p {
+    margin-block: calc(var(--spacing) * 0);
   }
-  trix-editor .trix-button--remove {
-    text-indent: -9999px;
-    display: inline-block;
-    padding: 0;
-    outline: none;
-    width: 1.8em;
-    height: 1.8em;
-    line-height: 1.8em;
-    border-radius: 50%;
-    background-color: #fff;
-    border: 2px solid highlight;
-    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
-  }
-  trix-editor .trix-button--remove::before {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0.7;
-    content: "";
-    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 90%;
+  .lexxy-content p + p {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .lexxy-content strong {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
   }
-  trix-editor .trix-button--remove:hover {
-    border-color: #333;
+  .lexxy-content em {
+    font-style: italic;
   }
-  trix-editor .trix-button--remove:hover::before {
-    opacity: 1;
+  .lexxy-content a {
+    color: var(--color-indigo-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-indigo-400);
+    }
+    text-decoration-line: underline;
+    text-underline-offset: 2px;
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-indigo-500);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-indigo-300);
+        }
+      }
+    }
   }
-  trix-editor .attachment__metadata-container {
-    position: relative;
+  .lexxy-content h1 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    margin-top: calc(var(--spacing) * 8);
+    margin-bottom: calc(var(--spacing) * 4);
   }
-  trix-editor .attachment__metadata {
-    position: absolute;
-    left: 50%;
-    top: 2em;
-    transform: translate(-50%, 0);
-    max-width: 90%;
-    padding: 0.1em 0.6em;
-    font-size: 0.8em;
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 3px;
-  }
-  trix-editor .attachment__metadata .attachment__name {
-    display: inline-block;
-    max-width: 100%;
-    vertical-align: bottom;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .lexxy-content h2 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    margin-top: calc(var(--spacing) * 6);
+    margin-bottom: calc(var(--spacing) * 3);
   }
-  trix-editor .attachment__metadata .attachment__size {
-    margin-left: 0.2em;
-    white-space: nowrap;
+  .lexxy-content h3 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    margin-top: calc(var(--spacing) * 5);
+    margin-bottom: calc(var(--spacing) * 2);
   }
-  .trix-content {
-    line-height: 1.5;
-    overflow-wrap: break-word;
-    word-break: break-word;
+  .lexxy-content blockquote {
+    margin-block: calc(var(--spacing) * 4);
+    padding-left: calc(var(--spacing) * 4);
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+    border-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-stone-600);
+    }
+    color: var(--color-stone-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    font-style: italic;
   }
-  .trix-content * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  .lexxy-content ul {
+    margin-block: calc(var(--spacing) * 4);
+    list-style-position: inside;
+    list-style-type: disc;
   }
-  .trix-content h1 {
-    font-size: 1.2em;
-    line-height: 1.2;
+  .lexxy-content ol {
+    margin-block: calc(var(--spacing) * 4);
+    list-style-position: inside;
+    list-style-type: decimal;
   }
-  .trix-content blockquote {
-    border: 0 solid #ccc;
-    border-left-width: 0.3em;
-    margin-left: 0.3em;
-    padding-left: 0.6em;
+  .lexxy-content li {
+    margin-block: calc(var(--spacing) * 1);
   }
-  .trix-content [dir="rtl"] blockquote, .trix-content blockquote[dir="rtl"] {
-    border-width: 0;
-    border-right-width: 0.3em;
-    margin-right: 0.3em;
-    padding-right: 0.6em;
+  .lexxy-content li > ul, .lexxy-content li > ol {
+    margin-block: calc(var(--spacing) * 1);
+    margin-left: calc(var(--spacing) * 4);
   }
-  .trix-content li {
-    margin-left: 1em;
+  .lexxy-content code {
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-pink-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-pink-400);
+    }
   }
-  .trix-content [dir="rtl"] li {
-    margin-right: 1em;
+  .lexxy-content pre {
+    margin-block: calc(var(--spacing) * 4);
+    overflow-x: auto;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 4);
+    background-color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-950);
+    }
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
   }
-  .trix-content pre {
-    display: inline-block;
-    width: 100%;
-    vertical-align: top;
-    font-family: monospace;
-    font-size: 0.9em;
-    padding: 0.5em;
+  .lexxy-content pre code {
+    border-radius: 0;
+    background-color: transparent;
+    padding: calc(var(--spacing) * 0);
+    color: var(--color-stone-100);
+    display: block;
     white-space: pre;
-    background-color: #eee;
-    overflow-x: auto;
   }
-  .trix-content img {
-    max-width: 100%;
+  .lexxy-content hr {
+    margin-block: calc(var(--spacing) * 8);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-stone-700);
+    }
+  }
+  .lexxy-content img {
     height: auto;
+    max-width: 100%;
+    border-radius: var(--radius-lg);
+    margin-block: calc(var(--spacing) * 4);
   }
-  .trix-content .attachment {
+  .lexxy-content .attachment {
+    margin-block: calc(var(--spacing) * 4);
     display: inline-block;
-    position: relative;
     max-width: 100%;
   }
-  .trix-content .attachment a {
-    color: inherit;
-    text-decoration: none;
-  }
-  .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
-    color: inherit;
-  }
-  .trix-content .attachment__caption {
+  .lexxy-content .attachment--preview {
+    width: 100%;
     text-align: center;
   }
-  .trix-content .attachment__caption .attachment__name + .attachment__size::before {
-    content: " \2022 ";
+  .lexxy-content .attachment--file {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    border-radius: var(--radius-lg);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-300);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stone-200);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 15%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+          }
+        }
+      }
+    }
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .trix-content .attachment--preview {
-    width: 100%;
+  .lexxy-content .attachment__caption {
     text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-500);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .lexxy-content .attachment__name {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .trix-content .attachment--preview .attachment__caption {
-    color: #666;
-    font-size: 0.9em;
-    line-height: 1.2;
+  .lexxy-content .attachment__size {
+    color: var(--color-stone-500);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
   }
-  .trix-content .attachment--file {
-    color: #333;
-    line-height: 1;
-    margin: 0 2px 2px 2px;
-    padding: 0.4em 1em;
-    border: 1px solid #bbb;
-    border-radius: 5px;
+  .lexxy-content .attachment__name + .attachment__size::before {
+    content: " · ";
   }
-  .trix-content .attachment-gallery {
+  .lexxy-content .attachment-gallery {
+    margin-block: calc(var(--spacing) * 4);
     display: flex;
     flex-wrap: wrap;
-    position: relative;
-  }
-  .trix-content .attachment-gallery .attachment {
-    flex: 1 0 33%;
-    padding: 0 0.5em;
-    max-width: 33%;
-  }
-  .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
-    flex-basis: 50%;
-    max-width: 50%;
+    gap: calc(var(--spacing) * 2);
   }
-  .trix-content .attachment-gallery > action-text-attachment, .trix-content .attachment-gallery > .attachment {
-    flex: 1 0 33%;
-    padding: 0 0.5em;
-    max-width: 33%;
+  .lexxy-content .attachment-gallery .attachment, .lexxy-content .attachment-gallery > action-text-attachment {
+    max-width: calc(33.333% - 0.5rem);
+    min-width: calc(33.333% - 0.5rem);
+    flex: 1;
+    margin-block: calc(var(--spacing) * 0);
   }
-  .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment, .trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment, .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
-    flex-basis: 50%;
-    max-width: 50%;
+  .lexxy-content .attachment-gallery.attachment-gallery--2 .attachment, .lexxy-content .attachment-gallery.attachment-gallery--2 > action-text-attachment, .lexxy-content .attachment-gallery.attachment-gallery--4 .attachment, .lexxy-content .attachment-gallery.attachment-gallery--4 > action-text-attachment {
+    max-width: calc(50% - 0.25rem);
+    min-width: calc(50% - 0.25rem);
   }
-  .trix-content action-text-attachment .attachment {
-    padding: 0 !important;
-    max-width: 100% !important;
+  .lexxy-content action-text-attachment .attachment {
+    margin-block: calc(var(--spacing) * 0);
+    max-width: 100%;
+    padding: calc(var(--spacing) * 0);
   }
 }
 @layer base {
@@ -5220,122 +4979,122 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-translate-x {
+@property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-translate-y {
+@property --tw-backdrop-brightness {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-translate-z {
+@property --tw-backdrop-contrast {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-rotate-x {
+@property --tw-backdrop-grayscale {
   syntax: "*";
   inherits: false;
 }
-@property --tw-rotate-y {
+@property --tw-backdrop-hue-rotate {
   syntax: "*";
   inherits: false;
 }
-@property --tw-rotate-z {
+@property --tw-backdrop-invert {
   syntax: "*";
   inherits: false;
 }
-@property --tw-skew-x {
+@property --tw-backdrop-opacity {
   syntax: "*";
   inherits: false;
 }
-@property --tw-skew-y {
+@property --tw-backdrop-saturate {
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
+@property --tw-backdrop-sepia {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-space-x-reverse {
+@property --tw-translate-x {
   syntax: "*";
   inherits: false;
   initial-value: 0;
 }
-@property --tw-divide-y-reverse {
+@property --tw-translate-y {
   syntax: "*";
   inherits: false;
   initial-value: 0;
 }
-@property --tw-leading {
+@property --tw-translate-z {
   syntax: "*";
   inherits: false;
+  initial-value: 0;
 }
-@property --tw-tracking {
+@property --tw-scale-x {
   syntax: "*";
   inherits: false;
+  initial-value: 1;
 }
-@property --tw-backdrop-blur {
+@property --tw-scale-y {
   syntax: "*";
   inherits: false;
+  initial-value: 1;
 }
-@property --tw-backdrop-brightness {
+@property --tw-scale-z {
   syntax: "*";
   inherits: false;
+  initial-value: 1;
 }
-@property --tw-backdrop-contrast {
+@property --tw-rotate-x {
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-grayscale {
+@property --tw-rotate-y {
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-hue-rotate {
+@property --tw-rotate-z {
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-invert {
+@property --tw-skew-x {
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-opacity {
+@property --tw-skew-y {
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-saturate {
+@property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
+  initial-value: 0;
 }
-@property --tw-backdrop-sepia {
+@property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
+  initial-value: 0;
 }
-@property --tw-duration {
+@property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
+  initial-value: 0;
 }
-@property --tw-ease {
+@property --tw-leading {
   syntax: "*";
   inherits: false;
 }
-@property --tw-scale-x {
+@property --tw-tracking {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
 }
-@property --tw-scale-y {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
 }
-@property --tw-scale-z {
+@property --tw-ease {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
 }
 @property --tw-content {
   syntax: "*";
@@ -5385,9 +5144,21 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-border-style: solid;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -5398,20 +5169,8 @@
       --tw-divide-y-reverse: 0;
       --tw-leading: initial;
       --tw-tracking: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
       --tw-content: "";
     }
   }