@alpaca-editor/core 1.0.3896 → 1.0.3898

package/dist/styles.css

@@ -10,13 +10,17 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
     --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-800: oklch(47% 0.157 37.304);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
@@ -27,6 +31,8 @@
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-800: oklch(45% 0.085 224.283);
     --color-sky-200: oklch(90.1% 0.058 230.902);
     --color-sky-400: oklch(74.6% 0.16 232.661);
     --color-sky-500: oklch(68.5% 0.169 237.323);
@@ -40,8 +46,13 @@
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-indigo-950: oklch(25.7% 0.09 281.288);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-pink-400: oklch(71.8% 0.202 349.761);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-gray-50: oklch(98.5% 0.002 247.839);
@@ -56,6 +67,8 @@
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-neutral-100: oklch(97% 0 0);
     --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -86,16 +99,17 @@
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --font-geist-sans: "GeistSans";
-    --color-canvas-red: #e32e52;
-    --color-canvas-pink: #e32e52;
+    --font-inter: "Inter";
     --color-alpaca-blue: #209cfc;
     --color-alpaca-blue-light: #41aafd;
+    --color-theme-secondary: #9650fb;
+    --color-theme-secondary-light: #f6eeff;
+    --color-neutral-350: #b4b4b4;
     --text-2xs: 0.7rem;
-    --animate-sparkle: "sparkle 1.5s ease-in-out infinite";
     --animate-fadeIn: "fadeIn 0.5s ease-in-out";
     --animate-fadeLeft: "fadeLeft 0.8s ease-in-out";
     --animate-fadeRight: "fadeRight 0.8s ease-in-out";
@@ -231,6 +245,9 @@
   .z-1000 {
     z-index: 1000;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -300,6 +317,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-\[-20px\] {
+    margin-top: -20px;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -312,8 +332,8 @@
   .mr-4 {
     margin-right: calc(var(--spacing) * 4);
   }
-  .mr-20 {
-    margin-right: calc(var(--spacing) * 20);
+  .mr-\[-3px\] {
+    margin-right: -3px;
   }
   .mr-auto {
     margin-right: auto;
@@ -333,6 +353,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
   .mb-20 {
     margin-bottom: calc(var(--spacing) * 20);
   }
@@ -351,11 +374,8 @@
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
-  .ml-5 {
-    margin-left: calc(var(--spacing) * 5);
-  }
-  .ml-20 {
-    margin-left: calc(var(--spacing) * 20);
+  .ml-\[-3px\] {
+    margin-left: -3px;
   }
   .ml-\[1px\] {
     margin-left: 1px;
@@ -390,6 +410,9 @@
   .inline-grid {
     display: inline-grid;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -416,6 +439,9 @@
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -452,9 +478,6 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-28 {
-    height: calc(var(--spacing) * 28);
-  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -488,6 +511,9 @@
   .max-h-\(--radix-context-menu-content-available-height\) {
     max-height: var(--radix-context-menu-content-available-height);
   }
+  .max-h-0 {
+    max-height: calc(var(--spacing) * 0);
+  }
   .max-h-28 {
     max-height: calc(var(--spacing) * 28);
   }
@@ -503,6 +529,9 @@
   .max-h-\[400px\] {
     max-height: 400px;
   }
+  .max-h-\[1000px\] {
+    max-height: 1000px;
+  }
   .max-h-full {
     max-height: 100%;
   }
@@ -518,9 +547,6 @@
   .min-h-12 {
     min-height: calc(var(--spacing) * 12);
   }
-  .min-h-20 {
-    min-height: calc(var(--spacing) * 20);
-  }
   .min-h-\[100px\] {
     min-height: 100px;
   }
@@ -551,9 +577,6 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -569,9 +592,6 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
-  .w-28 {
-    width: calc(var(--spacing) * 28);
-  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -581,6 +601,9 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
@@ -641,6 +664,9 @@
   .min-w-full {
     min-width: 100%;
   }
+  .min-w-max {
+    min-width: max-content;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -678,12 +704,18 @@
   .-rotate-45 {
     rotate: calc(45deg * -1);
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-0 {
     rotate: 0deg;
   }
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -702,8 +734,8 @@
   .animate-ping {
     animation: var(--animate-ping);
   }
-  .animate-sparkle {
-    animation: var(--animate-sparkle);
+  .animate-pulse {
+    animation: var(--animate-pulse);
   }
   .animate-spin {
     animation: var(--animate-spin);
@@ -750,6 +782,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .grid-cols-\[min-content_1fr\] {
     grid-template-columns: min-content 1fr;
   }
@@ -795,9 +830,6 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .justify-stretch {
-    justify-content: stretch;
-  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -819,12 +851,44 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-5 {
-    gap: calc(var(--spacing) * 5);
-  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -862,6 +926,11 @@
   .self-stretch {
     align-self: stretch;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -932,6 +1001,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-1 {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -989,12 +1062,6 @@
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
-  .border-canvas-pink {
-    border-color: var(--color-canvas-pink);
-  }
-  .border-canvas-red {
-    border-color: var(--color-canvas-red);
-  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1019,6 +1086,9 @@
   .border-purple-400 {
     border-color: var(--color-purple-400);
   }
+  .border-purple-500 {
+    border-color: var(--color-purple-500);
+  }
   .border-red-300 {
     border-color: var(--color-red-300);
   }
@@ -1037,6 +1107,9 @@
   .border-teal-400 {
     border-color: var(--color-teal-400);
   }
+  .border-theme-secondary {
+    border-color: var(--color-theme-secondary);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1073,14 +1146,17 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-500\/20 {
+    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
   .bg-border {
     background-color: var(--border);
   }
-  .bg-canvas-pink {
-    background-color: var(--color-canvas-pink);
+  .bg-cyan-100 {
+    background-color: var(--color-cyan-100);
   }
   .bg-destructive {
     background-color: var(--destructive);
@@ -1136,21 +1212,36 @@
   .bg-neutral-100 {
     background-color: var(--color-neutral-100);
   }
+  .bg-neutral-200 {
+    background-color: var(--color-neutral-200);
+  }
+  .bg-neutral-350 {
+    background-color: var(--color-neutral-350);
+  }
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
   .bg-orange-400 {
     background-color: var(--color-orange-400);
   }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
   .bg-pink-400 {
     background-color: var(--color-pink-400);
   }
   .bg-popover {
     background-color: var(--popover);
   }
-  .bg-primary {
-    background-color: var(--primary);
+  .bg-purple-100 {
+    background-color: var(--color-purple-100);
   }
   .bg-purple-400 {
     background-color: var(--color-purple-400);
   }
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
@@ -1184,6 +1275,12 @@
   .bg-teal-400 {
     background-color: var(--color-teal-400);
   }
+  .bg-theme-secondary {
+    background-color: var(--color-theme-secondary);
+  }
+  .bg-theme-secondary-light {
+    background-color: var(--color-theme-secondary-light);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1193,6 +1290,9 @@
   .bg-yellow-200 {
     background-color: var(--color-yellow-200);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1214,6 +1314,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .object-scale-down {
     object-fit: scale-down;
   }
@@ -1241,9 +1344,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -1280,6 +1380,12 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1298,6 +1404,12 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-\[5px\] {
     padding-block: 5px;
   }
@@ -1343,9 +1455,6 @@
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1376,9 +1485,6 @@
   .text-right {
     text-align: right;
   }
-  .font-geist-sans {
-    font-family: var(--font-geist-sans);
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1447,6 +1553,9 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .break-all {
     word-break: break-all;
   }
@@ -1474,11 +1583,8 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
-  .text-canvas-pink {
-    color: var(--color-canvas-pink);
-  }
-  .text-canvas-red {
-    color: var(--color-canvas-red);
+  .text-cyan-800 {
+    color: var(--color-cyan-800);
   }
   .text-foreground {
     color: var(--foreground);
@@ -1525,14 +1631,23 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
+  .text-indigo-800 {
+    color: var(--color-indigo-800);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-neutral-500 {
+    color: var(--color-neutral-500);
+  }
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
+  }
   .text-orange-600 {
     color: var(--color-orange-600);
   }
-  .text-pink-400 {
-    color: var(--color-pink-400);
+  .text-orange-800 {
+    color: var(--color-orange-800);
   }
   .text-popover-foreground {
     color: var(--popover-foreground);
@@ -1543,6 +1658,9 @@
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
+  .text-purple-800 {
+    color: var(--color-purple-800);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -1558,6 +1676,9 @@
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
+  .text-theme-secondary {
+    color: var(--color-theme-secondary);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -1567,6 +1688,9 @@
   .text-yellow-600 {
     color: var(--color-yellow-600);
   }
+  .text-yellow-800 {
+    color: var(--color-yellow-800);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1634,14 +1758,18 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-2 {
+    --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);
+  }
   .shadow-black {
     --tw-shadow-color: var(--color-black);
   }
   .shadow-blue-500\/50 {
     --tw-shadow-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
   }
-  .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
+  .ring-purple-200 {
+    --tw-ring-color: var(--color-purple-200);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -1696,11 +1824,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .delay-500 {
-    transition-delay: 500ms;
-  }
-  .delay-700 {
-    transition-delay: 700ms;
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
   .duration-100 {
     --tw-duration: 100ms;
@@ -1710,14 +1837,14 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .duration-500 {
-    --tw-duration: 500ms;
-    transition-duration: 500ms;
-  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1815,13 +1942,6 @@
       }
     }
   }
-  .hover\:border-canvas-pink {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-canvas-pink);
-      }
-    }
-  }
   .hover\:border-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1920,24 +2040,24 @@
       }
     }
   }
-  .hover\:bg-primary\/90 {
+  .hover\:bg-red-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        background-color: var(--color-red-600);
       }
     }
   }
-  .hover\:bg-red-600 {
+  .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-600);
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
       }
     }
   }
-  .hover\:bg-secondary\/80 {
+  .hover\:bg-theme-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        background-color: color-mix(in oklab, var(--color-theme-secondary) 80%, transparent);
       }
     }
   }
@@ -1962,13 +2082,6 @@
       }
     }
   }
-  .hover\:text-canvas-pink {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-canvas-pink);
-      }
-    }
-  }
   .hover\:text-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -2098,12 +2211,6 @@
       border-color: var(--ring);
     }
   }
-  .focus-visible\:ring-2 {
-    &:focus-visible {
-      --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);
-    }
-  }
   .focus-visible\:ring-\[3px\] {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
@@ -2115,28 +2222,11 @@
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
-  .focus-visible\:ring-ring {
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
-    }
-  }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
-  .focus-visible\:ring-offset-2 {
-    &:focus-visible {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus-visible\:outline-none {
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2231,14 +2321,24 @@
       }
     }
   }
-  .lg\:pr-20 {
-    @media (width >= 64rem) {
-      padding-right: calc(var(--spacing) * 20);
+  .md\:w-10 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 10);
     }
   }
-  .xl\:pr-32 {
-    @media (width >= 80rem) {
-      padding-right: calc(var(--spacing) * 32);
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .md\:gap-3 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 3);
+    }
+  }
+  .md\:pr-8 {
+    @media (width >= 48rem) {
+      padding-right: calc(var(--spacing) * 8);
     }
   }
   .dark\:border-input {
@@ -2354,6 +2454,12 @@
   }
 }
 @layer alpaca-editor {
+  * {
+    font-family: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  }
+  html, body {
+    font-family: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  }
   :root {
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
@@ -2388,6 +2494,7 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
+    --neutral-350: #b4b4b4;
   }
   .dark {
     --background: oklch(0.145 0 0);
@@ -2440,12 +2547,16 @@
       background-position: right;
       background-repeat: no-repeat;
     }
+    .bg-wizard {
+      background-image: url("./images/wizard-bg.png");
+      background-position: right;
+      background-size: cover;
+      background-repeat: no-repeat;
+      opacity: 0.2;
+    }
     .p-tree {
       background-color: unset;
     }
-    body, button, input, select, textarea {
-      font-family: GeistSans;
-    }
     .alpaceditor-tabs {
       display: flex;
       flex-direction: column;
@@ -3047,6 +3158,11 @@
     opacity: 0;
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);