@clasing/ui 2.0.4 → 2.0.5

package/dist/ui.css

@@ -1,688 +1,692 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-
-@source "./**/*.{js,jsx,ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-@custom-variant fixed (&:is(.layout-fixed *));
-
-@theme inline {
-  --text-*: initial;
-  --text-2xs: 10px;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-  --text-2xl: 24px;
-  --text-3xl: 28px;
-  --text-4xl: 32px;
-  --text-5xl: 36px;
-  --text-6xl: 40px;
-  --text-7xl: 44px;
-  --text-8xl: 48px;
-  --text-9xl: 52px;
-
-  --leading-*: initial;
-  --leading-xs: 16px;
-  --leading-sm: 18px;
-  --leading-md: 20px;
-  --leading-lg: 24px;
-  --leading-xl: 28px;
-  --leading-2xl: 32px;
-  --leading-3xl: 36px;
-  --leading-4xl: 40px;
-  --leading-5xl: 44px;
-  --leading-6xl: 48px;
-  --leading-7xl: 56px;
-
-  --tracking-*: initial;
-  --tracking-tighter: -4px;
-  --tracking-tight: -2px;
-  --tracking-normal: 0;
-  --tracking-wide: 2px;
-  --tracking-wider: 5px;
-  --tracking-widest: 10px;
-
-  --font-*: initial;
-  --font-display: Open Sans, sans-serif;
-  --font-title: Open Sans, sans-serif;
-  --font-text: Open Sans, sans-serif;
-  --font-label: Open Sans, sans-serif;
-  --font-overline: Open Sans, sans-serif;
-
-  --font-weight-*: initial;
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --color-*: initial;
-  --color-black: oklch(0.2 0.0102 248.34);
-  --color-white: oklch(1 0 0);
-
-  --color-primary-050: oklch(0.97 0.0129 17.38);
-  --color-primary-100: oklch(0.94 0.0252 17.61);
-  --color-primary-200: oklch(0.9 0.0462 16.39);
-  --color-primary-300: oklch(0.81 0.0886 17.43);
-  --color-primary-400: oklch(0.72 0.1426 18.07);
-  --color-primary-500: oklch(0.63 0.1885 19.94);
-  --color-primary-600: oklch(0.57 0.1984 19.87);
-  --color-primary-700: oklch(0.5 0.1792 19.3);
-  --color-primary-800: oklch(0.44 0.1532 16.66);
-  --color-primary-900: oklch(0.4 0.1332 13.25);
-  --color-primary-950: oklch(0.26 0.0879 15.52);
-
-  --color-blue-050: oklch(0.97 0.0137 247.97);
-  --color-blue-100: oklch(0.95 0.0276 248.12);
-  --color-blue-200: oklch(0.89 0.0607 240.99);
-  --color-blue-300: oklch(0.8 0.1116 240.95);
-  --color-blue-400: oklch(0.71 0.1604 244.29);
-  --color-blue-500: oklch(0.64 0.1771 249.33);
-  --color-blue-600: oklch(0.55 0.1681 252.8);
-  --color-blue-700: oklch(0.47 0.1433 252.81);
-  --color-blue-800: oklch(0.4 0.1167 251.1);
-  --color-blue-900: oklch(0.37 0.1013 251.39);
-  --color-blue-950: oklch(0.28 0.0757 251.93);
-
-  --color-violet-050: oklch(0.95 0.007 268.55);
-  --color-violet-100: oklch(0.97 0.0096 273.36);
-  --color-violet-200: oklch(0.94 0.0191 276.34);
-  --color-violet-300: oklch(0.89 0.0361 277);
-  --color-violet-400: oklch(0.81 0.0581 278.49);
-  --color-violet-500: oklch(0.73 0.0884 281.04);
-  --color-violet-600: oklch(0.64 0.1155 283.25);
-  --color-violet-700: oklch(0.57 0.1311 285.66);
-  --color-violet-800: oklch(0.5 0.124 286.15);
-  --color-violet-900: oklch(0.45 0.1011 285.88);
-  --color-violet-950: oklch(0.4 0.0748 285.53);
-
-  --color-yellow-050: oklch(0.99 0.0158 102.82);
-  --color-yellow-100: oklch(0.99 0.0249 101.95);
-  --color-yellow-200: oklch(0.97 0.0658 101.01);
-  --color-yellow-300: oklch(0.95 0.1313 102.51);
-  --color-yellow-400: oklch(0.92 0.1692 99.19);
-  --color-yellow-500: oklch(0.88 0.176 93.13);
-  --color-yellow-600: oklch(0.82 0.1693 79.17);
-  --color-yellow-700: oklch(0.71 0.1583 65.12);
-  --color-yellow-800: oklch(0.58 0.145 54.45);
-  --color-yellow-900: oklch(0.5 0.1252 51.36);
-  --color-yellow-950: oklch(0.4 0.0955 51.15);
-
-  --color-neutral-000: oklch(0.97 0.0042 236.5);
-  --color-neutral-050: oklch(0.95 0.0046 258.32);
-  --color-neutral-100: oklch(0.93 0.0046 258.33);
-  --color-neutral-200: oklch(0.91 0.0035 247.86);
-  --color-neutral-300: oklch(0.9 0.0035 247.86);
-  --color-neutral-400: oklch(0.88 0.0035 247.86);
-  --color-neutral-500: oklch(0.87 0.0035 247.86);
-  --color-neutral-600: oklch(0.84 0.0036 247.87);
-  --color-neutral-700: oklch(0.79 0.0036 247.87);
-  --color-neutral-800: oklch(0.63 0.0032 264.54);
-  --color-neutral-900: oklch(0.45 0.0021 247.87);
-  --color-neutral-1000: oklch(0.2 0.0102 248.34);
-
-  --color-error-light: oklch(0.93 0.0394 52.37);
-  --color-error-main: oklch(0.64 0.2475 31.2);
-
-  --color-warning-light: oklch(0.98 0.0348 94.54);
-  --color-warning-main: oklch(0.82 0.17046 77.4296);
-
-  --color-info-light: oklch(0.97 0.0137 247.97);
-  --color-info-main: oklch(0.55 0.1681 252.8);
-
-  --color-success-light: oklch(0.97 0.0511 146.04);
-  --color-success-main: oklch(0.62 0.1446 144.41);
-
-  --color-ring-default: var(--color-blue-800);
-
-  --color-accent: var(--color-neutral-000);
-  --color-accent-foreground: var(--color-neutral-1000);
-
-  --breakpoint-3xl: 1600px;
-  --breakpoint-4xl: 2000px;
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-surface: var(--surface);
-  --color-surface-foreground: var(--surface-foreground);
-  --color-code: var(--code);
-  --color-code-foreground: var(--code-foreground);
-  --color-code-highlight: var(--code-highlight);
-  --color-code-number: var(--code-number);
-  --color-selection: var(--selection);
-  --color-selection-foreground: var(--selection-foreground);
-
-  --shadow-*: initial;
-  --shadow-none: none;
-  --shadow-xs:
-    0px 2px 4px 0px rgba(25, 25, 25, 0.08),
-    0px 0px 2px 0px rgba(25, 25, 25, 0.08);
-  --shadow-sm:
-    0px 4px 8px 0px rgba(25, 25, 25, 0.1), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
-  --shadow-md:
-    0px 8px 16px 0px rgba(25, 25, 25, 0.1),
-    0px 0px 6px 0px rgba(25, 25, 25, 0.08);
-  --shadow-lg:
-    0px 10px 20px 0px rgba(0, 0, 0, 0.19),
-    0px 0px 8px 0px rgba(25, 25, 25, 0.08);
-  --shadow-xl:
-    0px 12px 24px 0px rgba(25, 25, 25, 0.1),
-    0px 0px 10px 0px rgba(25, 25, 25, 0.08);
-  --shadow-2xl:
-    0px 16px 32px 0px rgba(25, 25, 25, 0.1),
-    0px 0px 12px 0px rgba(25, 25, 25, 0.08);
-
-  --animate-fade-in-scale-up: fadeInScaleUp 0.15s ease-out;
-  --animate-fade-out-scale-up: fadeOutScaleUp 0.15s ease-out;
-  --animate-fade-in-scale-down: fadeInScaleDown 0.15s ease-out;
-  --animate-fade-out-scale-down: fadeOutScaleDown 0.15s ease-out;
-
-  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
-  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-  @keyframes fadeInScaleUp {
-    0% {
-      opacity: 0;
-      transform: scale(0.9) translateY(50px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  @keyframes fadeOutScaleUp {
-    0% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9) translateY(50px);
-    }
-  }
-  @keyframes fadeInScaleDown {
-    0% {
-      opacity: 0;
-      transform: scale(0.9) translateY(-50px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  @keyframes fadeOutScaleDown {
-    0% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9) translateY(-50px);
-    }
-  }
-}
-
-:root {
-  --radius: 1rem;
-  --background: var(--color-white);
-  --foreground: var(--color-neutral-1000);
-  --card: var(--color-white);
-  --card-foreground: var(--color-neutral-1000);
-  --popover: var(--color-white);
-  --popover-foreground: var(--color-neutral-1000);
-  --primary: var(--color-primary-600);
-  --primary-foreground: var(--color-white);
-  --secondary: var(--color-blue-800);
-  --secondary-foreground: var(--color-white);
-  --muted: var(--color-neutral-000);
-  --muted-foreground: var(--color-neutral-900);
-  --accent: var(--color-neutral-000);
-  --accent-foreground: var(--color-neutral-1000);
-  --destructive: var(--color-error-main);
-  --warning: var(--color-warning-main);
-  --info: var(--color-info-main);
-  --success: var(--color-success-main);
-  --border: var(--color-neutral-050);
-  --input: var(--color-neutral-050);
-  --ring: var(--color-blue-800);
-  --chart-1: var(--color-blue-300);
-  --chart-2: var(--color-blue-500);
-  --chart-3: var(--color-blue-600);
-  --chart-4: var(--color-blue-700);
-  --chart-5: var(--color-blue-800);
-  --sidebar: var(--color-white);
-  --sidebar-foreground: var(--color-neutral-1000);
-  --sidebar-primary: var(--color-primary-600);
-  --sidebar-primary-foreground: var(--color-white);
-  --sidebar-accent: var(--color-neutral-200);
-  --sidebar-accent-foreground: var(--color-neutral-1000);
-  --sidebar-border: var(--color-neutral-050);
-  --sidebar-ring: var(--color-blue-800);
-  --surface: var(--color-white);
-  --surface-foreground: var(--color-neutral-1000);
-  --code: var(--surface);
-  --code-foreground: var(--surface-foreground);
-  --code-highlight: var(--color-blue-800);
-  --code-number: var(--color-blue-800);
-  --selection: var(--color-blue-050);
-  --selection-foreground: var(--color-blue-600);
-}
-
-.dark {
-  --background: var(--color-neutral-1000);
-  --foreground: var(--color-white);
-  --card: var(--color-neutral-1000);
-  --card-foreground: var(--color-white);
-  --popover: var(--color-neutral-1000);
-  --popover-foreground: var(--color-white);
-  --primary: var(--color-primary-600);
-  --primary-foreground: var(--color-white);
-  --secondary: var(--color-blue-800);
-  --secondary-foreground: var(--color-white);
-  --muted: var(--color-neutral-700);
-  --muted-foreground: var(--color-neutral-200);
-  --accent: var(--color-neutral-900);
-  --accent-foreground: var(--color-white);
-  --destructive: var(--color-error-main);
-  --border: var(--color-neutral-900);
-  --input: var(--color-neutral-900);
-  --ring: var(--color-blue-800);
-  --chart-1: var(--color-blue-300);
-  --chart-2: var(--color-blue-500);
-  --chart-3: var(--color-blue-600);
-  --chart-4: var(--color-blue-700);
-  --chart-5: var(--color-blue-800);
-  --sidebar: var(--color-neutral-1000);
-  --sidebar-foreground: var(--color-white);
-  --sidebar-primary: var(--color-primary-600);
-  --sidebar-primary-foreground: var(--color-white);
-  --sidebar-accent: var(--color-neutral-1000);
-  --sidebar-accent-foreground: var(--color-white);
-  --sidebar-border: var(--color-neutral-900);
-  --sidebar-ring: var(--color-blue-800);
-  --surface: var(--color-neutral-1000);
-  --surface-foreground: var(--color-white);
-  --code: var(--surface);
-  --code-foreground: var(--surface-foreground);
-  --code-highlight: var(--color-blue-800);
-  --code-number: var(--color-blue-800);
-  --selection: var(--color-blue-800);
-  --selection-foreground: var(--color-white);
-}
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-neutral-050, currentcolor);
-  }
-
-  * {
-    @apply border-border outline-ring/50;
-  }
-  ::selection {
-    @apply bg-selection text-selection-foreground;
-  }
-  html {
-    @apply scroll-smooth;
-  }
-  body {
-    font-synthesis-weight: none;
-    text-rendering: optimizeLegibility;
-  }
-
-  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
-    [data-wrapper] {
-      @apply min-[1800px]:border-t;
-    }
-  }
-
-  a:active,
-  button:active {
-    @apply opacity-60 md:opacity-100;
-  }
-}
-
-@utility border-grid {
-  @apply border-border/50 dark:border-border;
-}
-
-@utility section-soft {
-  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
-}
-
-@utility theme-container {
-  @apply font-sans;
-}
-
-@utility container-wrapper {
-  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-2;
-}
-
-@utility container {
-  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1200px] px-4 lg:px-8;
-}
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility border-ghost {
-  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
-}
-
-@utility step {
-  counter-increment: step;
-  @apply relative;
-
-  &:before {
-    @apply text-muted-foreground right-0 mr-2 hidden size-7 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-semibold md:absolute;
-    content: counter(step);
-  }
-}
-
-@utility extend-touch-target {
-  @media (pointer: coarse) {
-    @apply relative touch-manipulation after:absolute after:-inset-2;
-  }
-}
-
-@utility text-display-sm {
-  @apply leading-6xl text-7xl tracking-tight;
-}
-
-@utility text-display-lg {
-  @apply leading-7xl text-9xl tracking-tight;
-}
-
-@utility text-title-xs {
-  @apply leading-2xl text-2xl tracking-tight;
-}
-
-@utility text-title-sm {
-  @apply leading-3xl text-3xl tracking-tight;
-}
-
-@utility text-title-md {
-  @apply leading-4xl text-4xl tracking-tight;
-}
-
-@utility text-title-lg {
-  @apply leading-5xl text-5xl tracking-tight;
-}
-
-@utility text-title-xl {
-  @apply leading-6xl text-6xl tracking-tight;
-}
-
-@utility text-label-xs {
-  @apply text-2xs leading-xs tracking-normal;
-}
-
-@utility text-label-sm {
-  @apply leading-sm text-xs tracking-normal;
-}
-
-@utility text-label-md {
-  @apply leading-md text-sm tracking-normal;
-}
-
-@utility text-label-lg {
-  @apply leading-lg text-base tracking-normal;
-}
-
-@utility text-label-xl {
-  @apply leading-lg text-lg tracking-normal;
-}
-
-@utility text-label-2xl {
-  @apply leading-xl text-xl tracking-normal;
-}
-
-@utility text-label-3xl {
-  @apply leading-2xl text-2xl tracking-normal;
-}
-
-@utility text-paragraph-xs {
-  @apply leading-md text-xs tracking-normal;
-}
-
-@utility text-paragraph-sm {
-  @apply leading-md text-sm tracking-normal;
-}
-
-@utility text-paragraph-md {
-  @apply leading-lg text-base tracking-normal;
-}
-
-@utility text-paragraph-lg {
-  @apply leading-xl text-lg tracking-normal;
-}
-
-@utility text-overline-sm {
-  @apply leading-md text-xs tracking-widest;
-}
-
-@utility text-overline-lg {
-  @apply leading-md text-sm tracking-widest;
-}
-
-@layer components {
-  .steps {
-    &:first-child {
-      @apply !mt-0;
-    }
-
-    &:first-child > h3:first-child {
-      @apply !mt-0;
-    }
-
-    > h3 {
-      @apply !mt-16;
-    }
-
-    > h3 + p {
-      @apply !mt-2;
-    }
-  }
-
-  [data-rehype-pretty-code-figure] {
-    background-color: var(--color-code);
-    color: var(--color-code-foreground);
-    border-radius: var(--radius-lg);
-    border-width: 0px;
-    border-color: var(--border);
-    margin-top: calc(var(--spacing) * 6);
-    overflow: hidden;
-    font-size: var(--text-sm);
-    outline: none;
-    position: relative;
-    @apply md:-mx-1;
-
-    &:has([data-rehype-pretty-code-title]) [data-slot='copy-button'] {
-      top: calc(var(--spacing) * 1.5) !important;
-    }
-  }
-
-  [data-rehype-pretty-code-title] {
-    border-bottom: color-mix(in oklab, var(--border) 30%, transparent);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    padding-block: calc(var(--spacing) * 2.5);
-    padding-inline: calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
-    font-family: var(--font-mono);
-    color: var(--color-code-foreground);
-  }
-
-  [data-line-numbers] {
-    display: grid;
-    min-width: 100%;
-    white-space: pre;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    counter-reset: line;
-    box-decoration-break: clone;
-  }
-
-  [data-line-numbers] [data-line]::before {
-    font-size: var(--text-sm);
-    counter-increment: line;
-    content: counter(line);
-    display: inline-block;
-    width: calc(var(--spacing) * 16);
-    padding-right: calc(var(--spacing) * 6);
-    text-align: right;
-    color: var(--color-code-number);
-    background-color: var(--color-code);
-    position: sticky;
-    left: 0;
-  }
-
-  [data-line-numbers] [data-highlighted-line][data-line]::before {
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-line] {
-    padding-top: calc(var(--spacing) * 0.5);
-    padding-bottom: calc(var(--spacing) * 0.5);
-    min-height: calc(var(--spacing) * 1);
-    width: 100%;
-    display: inline-block;
-  }
-
-  [data-line] span {
-    color: var(--shiki-light);
-
-    @variant dark {
-      color: var(--shiki-dark) !important;
-    }
-  }
-
-  [data-highlighted-line],
-  [data-highlighted-chars] {
-    position: relative;
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-highlighted-line] {
-    &:after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      content: '';
-      background-color: color-mix(
-        in oklab,
-        var(--muted-foreground) 50%,
-        transparent
-      );
-    }
-  }
-
-  [data-highlighted-chars] {
-    border-radius: var(--radius-sm);
-    padding-inline: 0.3rem;
-    padding-block: 0.1rem;
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-  }
-}
-
-* {
-  -webkit-font-smoothing: antialiased;
-  font-synthesis: none !important;
-}
-body {
-  font-family:
-    'Open Sans',
-    sans-serif,
-    system-ui,
-    -apple-system;
-  color: var(--color-neutral-1000);
-}
-
-input[type='color'] {
-  -webkit-appearance: none;
-  border: none;
-}
-input[type='color']::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-input[type='color']::-webkit-color-swatch {
-  border: none;
-}
-
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 9px;
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--color-neutral-000);
-  border-radius: 30px;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--color-neutral-100);
-  border-radius: 14px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-neutral-200);
-}
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "./**/*.{js,jsx,ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@custom-variant fixed (&:is(.layout-fixed *));
+
+@theme inline {
+  --text-*: initial;
+  --text-2xs: 10px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 28px;
+  --text-4xl: 32px;
+  --text-5xl: 36px;
+  --text-6xl: 40px;
+  --text-7xl: 44px;
+  --text-8xl: 48px;
+  --text-9xl: 52px;
+
+  --leading-*: initial;
+  --leading-xs: 16px;
+  --leading-sm: 18px;
+  --leading-md: 20px;
+  --leading-lg: 24px;
+  --leading-xl: 28px;
+  --leading-2xl: 32px;
+  --leading-3xl: 36px;
+  --leading-4xl: 40px;
+  --leading-5xl: 44px;
+  --leading-6xl: 48px;
+  --leading-7xl: 56px;
+
+  --tracking-*: initial;
+  --tracking-tighter: -4px;
+  --tracking-tight: -2px;
+  --tracking-normal: 0;
+  --tracking-wide: 2px;
+  --tracking-wider: 5px;
+  --tracking-widest: 10px;
+
+  --font-*: initial;
+  --font-display: Open Sans, sans-serif;
+  --font-title: Open Sans, sans-serif;
+  --font-text: Open Sans, sans-serif;
+  --font-label: Open Sans, sans-serif;
+  --font-overline: Open Sans, sans-serif;
+
+  --font-weight-*: initial;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --color-*: initial;
+  --color-black: oklch(0.2 0.0102 248.34);
+  --color-white: oklch(1 0 0);
+
+  --color-primary-050: oklch(0.97 0.0129 17.38);
+  --color-primary-100: oklch(0.94 0.0252 17.61);
+  --color-primary-200: oklch(0.9 0.0462 16.39);
+  --color-primary-300: oklch(0.81 0.0886 17.43);
+  --color-primary-400: oklch(0.72 0.1426 18.07);
+  --color-primary-500: oklch(0.63 0.1885 19.94);
+  --color-primary-600: oklch(0.57 0.1984 19.87);
+  --color-primary-700: oklch(0.5 0.1792 19.3);
+  --color-primary-800: oklch(0.44 0.1532 16.66);
+  --color-primary-900: oklch(0.4 0.1332 13.25);
+  --color-primary-950: oklch(0.26 0.0879 15.52);
+
+  --color-blue-050: oklch(0.97 0.0137 247.97);
+  --color-blue-100: oklch(0.95 0.0276 248.12);
+  --color-blue-200: oklch(0.89 0.0607 240.99);
+  --color-blue-300: oklch(0.8 0.1116 240.95);
+  --color-blue-400: oklch(0.71 0.1604 244.29);
+  --color-blue-500: oklch(0.64 0.1771 249.33);
+  --color-blue-600: oklch(0.55 0.1681 252.8);
+  --color-blue-700: oklch(0.47 0.1433 252.81);
+  --color-blue-800: oklch(0.4 0.1167 251.1);
+  --color-blue-900: oklch(0.37 0.1013 251.39);
+  --color-blue-950: oklch(0.28 0.0757 251.93);
+
+  --color-violet-050: oklch(0.95 0.007 268.55);
+  --color-violet-100: oklch(0.97 0.0096 273.36);
+  --color-violet-200: oklch(0.94 0.0191 276.34);
+  --color-violet-300: oklch(0.89 0.0361 277);
+  --color-violet-400: oklch(0.81 0.0581 278.49);
+  --color-violet-500: oklch(0.73 0.0884 281.04);
+  --color-violet-600: oklch(0.64 0.1155 283.25);
+  --color-violet-700: oklch(0.57 0.1311 285.66);
+  --color-violet-800: oklch(0.5 0.124 286.15);
+  --color-violet-900: oklch(0.45 0.1011 285.88);
+  --color-violet-950: oklch(0.4 0.0748 285.53);
+
+  --color-yellow-050: oklch(0.99 0.0158 102.82);
+  --color-yellow-100: oklch(0.99 0.0249 101.95);
+  --color-yellow-200: oklch(0.97 0.0658 101.01);
+  --color-yellow-300: oklch(0.95 0.1313 102.51);
+  --color-yellow-400: oklch(0.92 0.1692 99.19);
+  --color-yellow-500: oklch(0.88 0.176 93.13);
+  --color-yellow-600: oklch(0.82 0.1693 79.17);
+  --color-yellow-700: oklch(0.71 0.1583 65.12);
+  --color-yellow-800: oklch(0.58 0.145 54.45);
+  --color-yellow-900: oklch(0.5 0.1252 51.36);
+  --color-yellow-950: oklch(0.4 0.0955 51.15);
+
+  --color-neutral-000: oklch(0.97 0.0042 236.5);
+  --color-neutral-050: oklch(0.95 0.0046 258.32);
+  --color-neutral-100: oklch(0.93 0.0046 258.33);
+  --color-neutral-200: oklch(0.91 0.0035 247.86);
+  --color-neutral-300: oklch(0.9 0.0035 247.86);
+  --color-neutral-400: oklch(0.88 0.0035 247.86);
+  --color-neutral-500: oklch(0.87 0.0035 247.86);
+  --color-neutral-600: oklch(0.84 0.0036 247.87);
+  --color-neutral-700: oklch(0.79 0.0036 247.87);
+  --color-neutral-800: oklch(0.63 0.0032 264.54);
+  --color-neutral-900: oklch(0.45 0.0021 247.87);
+  --color-neutral-1000: oklch(0.2 0.0102 248.34);
+
+  --color-error-light: oklch(0.93 0.0394 52.37);
+  --color-error-main: oklch(0.64 0.2475 31.2);
+
+  --color-warning-light: oklch(0.98 0.0348 94.54);
+  --color-warning-main: oklch(0.82 0.17046 77.4296);
+
+  --color-info-light: oklch(0.97 0.0137 247.97);
+  --color-info-main: oklch(0.55 0.1681 252.8);
+
+  --color-success-light: oklch(0.97 0.0511 146.04);
+  --color-success-main: oklch(0.62 0.1446 144.41);
+
+  --color-ring-default: var(--color-blue-800);
+
+  --color-accent: var(--color-neutral-000);
+  --color-accent-foreground: var(--color-neutral-1000);
+
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+
+  --shadow-*: initial;
+  --shadow-none: none;
+  --shadow-xs:
+    0px 2px 4px 0px rgba(25, 25, 25, 0.08),
+    0px 0px 2px 0px rgba(25, 25, 25, 0.08);
+  --shadow-sm:
+    0px 4px 8px 0px rgba(25, 25, 25, 0.1), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+  --shadow-md:
+    0px 8px 16px 0px rgba(25, 25, 25, 0.1),
+    0px 0px 6px 0px rgba(25, 25, 25, 0.08);
+  --shadow-lg:
+    0px 10px 20px 0px rgba(0, 0, 0, 0.19),
+    0px 0px 8px 0px rgba(25, 25, 25, 0.08);
+  --shadow-xl:
+    0px 12px 24px 0px rgba(25, 25, 25, 0.1),
+    0px 0px 10px 0px rgba(25, 25, 25, 0.08);
+  --shadow-2xl:
+    0px 16px 32px 0px rgba(25, 25, 25, 0.1),
+    0px 0px 12px 0px rgba(25, 25, 25, 0.08);
+
+  --animate-fade-in-scale-up: fadeInScaleUp 0.15s ease-out;
+  --animate-fade-out-scale-up: fadeOutScaleUp 0.15s ease-out;
+  --animate-fade-in-scale-down: fadeInScaleDown 0.15s ease-out;
+  --animate-fade-out-scale-down: fadeOutScaleDown 0.15s ease-out;
+
+  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  @keyframes fadeInScaleUp {
+    0% {
+      opacity: 0;
+      transform: scale(0.9) translateY(50px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+  @keyframes fadeOutScaleUp {
+    0% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9) translateY(50px);
+    }
+  }
+  @keyframes fadeInScaleDown {
+    0% {
+      opacity: 0;
+      transform: scale(0.9) translateY(-50px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+  @keyframes fadeOutScaleDown {
+    0% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9) translateY(-50px);
+    }
+  }
+}
+
+:root {
+  --radius: 1rem;
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-1000);
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-1000);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-1000);
+  --primary: var(--color-primary-600);
+  --primary-foreground: var(--color-white);
+  --secondary: var(--color-blue-800);
+  --secondary-foreground: var(--color-white);
+  --muted: var(--color-neutral-000);
+  --muted-foreground: var(--color-neutral-900);
+  --accent: var(--color-neutral-000);
+  --accent-foreground: var(--color-neutral-1000);
+  --destructive: var(--color-error-main);
+  --warning: var(--color-warning-main);
+  --info: var(--color-info-main);
+  --success: var(--color-success-main);
+  --border: var(--color-neutral-050);
+  --input: var(--color-neutral-050);
+  --ring: var(--color-blue-800);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: var(--color-white);
+  --sidebar-foreground: var(--color-neutral-1000);
+  --sidebar-primary: var(--color-primary-600);
+  --sidebar-primary-foreground: var(--color-white);
+  --sidebar-accent: var(--color-neutral-200);
+  --sidebar-accent-foreground: var(--color-neutral-1000);
+  --sidebar-border: var(--color-neutral-050);
+  --sidebar-ring: var(--color-blue-800);
+  --surface: var(--color-white);
+  --surface-foreground: var(--color-neutral-1000);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: var(--color-blue-800);
+  --code-number: var(--color-blue-800);
+  --selection: var(--color-blue-050);
+  --selection-foreground: var(--color-blue-600);
+}
+
+.dark {
+  --background: var(--color-neutral-1000);
+  --foreground: var(--color-white);
+  --card: var(--color-neutral-1000);
+  --card-foreground: var(--color-white);
+  --popover: var(--color-neutral-1000);
+  --popover-foreground: var(--color-white);
+  --primary: var(--color-primary-600);
+  --primary-foreground: var(--color-white);
+  --secondary: var(--color-blue-800);
+  --secondary-foreground: var(--color-white);
+  --muted: var(--color-neutral-700);
+  --muted-foreground: var(--color-neutral-200);
+  --accent: var(--color-neutral-900);
+  --accent-foreground: var(--color-white);
+  --destructive: var(--color-error-main);
+  --border: var(--color-neutral-900);
+  --input: var(--color-neutral-900);
+  --ring: var(--color-blue-800);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: var(--color-neutral-1000);
+  --sidebar-foreground: var(--color-white);
+  --sidebar-primary: var(--color-primary-600);
+  --sidebar-primary-foreground: var(--color-white);
+  --sidebar-accent: var(--color-neutral-1000);
+  --sidebar-accent-foreground: var(--color-white);
+  --sidebar-border: var(--color-neutral-900);
+  --sidebar-ring: var(--color-blue-800);
+  --surface: var(--color-neutral-1000);
+  --surface-foreground: var(--color-white);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: var(--color-blue-800);
+  --code-number: var(--color-blue-800);
+  --selection: var(--color-blue-800);
+  --selection-foreground: var(--color-white);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-neutral-050, currentcolor);
+  }
+
+  * {
+    @apply border-border outline-ring/50;
+  }
+  ::selection {
+    @apply bg-selection text-selection-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+}
+
+@utility border-grid {
+  @apply border-border/50 dark:border-border;
+}
+
+@utility section-soft {
+  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
+}
+
+@utility theme-container {
+  @apply font-sans;
+}
+
+@utility container-wrapper {
+  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-2;
+}
+
+@utility container {
+  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1200px] px-4 lg:px-8;
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility border-ghost {
+  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
+}
+
+@utility step {
+  counter-increment: step;
+  @apply relative;
+
+  &:before {
+    @apply text-muted-foreground right-0 mr-2 hidden size-7 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-semibold md:absolute;
+    content: counter(step);
+  }
+}
+
+@utility extend-touch-target {
+  @media (pointer: coarse) {
+    @apply relative touch-manipulation after:absolute after:-inset-2;
+  }
+}
+
+@utility display-xs {
+  @apply leading-lg text-lg tracking-tight;
+}
+
+@utility display-sm {
+  @apply leading-xl text-xl tracking-tight;
+}
+
+@utility display-lg {
+  @apply leading-3xl text-3xl tracking-tight;
+}
+
+@utility title-xs {
+  @apply leading-2xl text-2xl tracking-tight;
+}
+
+@utility title-sm {
+  @apply leading-3xl text-3xl tracking-tight;
+}
+
+@utility title-md {
+  @apply leading-4xl text-4xl tracking-tight;
+}
+
+@utility title-lg {
+  @apply leading-5xl text-5xl tracking-tight;
+}
+
+@utility title-xl {
+  @apply leading-6xl text-6xl tracking-tight;
+}
+
+@utility label-xs {
+  @apply text-2xs leading-xs tracking-normal;
+}
+
+@utility label-sm {
+  @apply leading-sm text-xs tracking-normal;
+}
+
+@utility label-md {
+  @apply leading-md text-sm tracking-normal;
+}
+
+@utility label-lg {
+  @apply leading-lg text-base tracking-normal;
+}
+
+@utility label-xl {
+  @apply leading-lg text-lg tracking-normal;
+}
+
+@utility label-2xl {
+  @apply leading-xl text-xl tracking-normal;
+}
+
+@utility label-3xl {
+  @apply leading-2xl text-2xl tracking-normal;
+}
+
+@utility paragraph-xs {
+  @apply leading-md text-xs tracking-normal;
+}
+
+@utility paragraph-sm {
+  @apply leading-md text-sm tracking-normal;
+}
+
+@utility paragraph-md {
+  @apply leading-lg text-base tracking-normal;
+}
+
+@utility paragraph-lg {
+  @apply leading-xl text-lg tracking-normal;
+}
+
+@utility overline-sm {
+  @apply leading-md text-xs tracking-widest;
+}
+
+@utility overline-lg {
+  @apply leading-md text-sm tracking-widest;
+}
+
+@layer components {
+  .steps {
+    &:first-child {
+      @apply !mt-0;
+    }
+
+    &:first-child > h3:first-child {
+      @apply !mt-0;
+    }
+
+    > h3 {
+      @apply !mt-16;
+    }
+
+    > h3 + p {
+      @apply !mt-2;
+    }
+  }
+
+  [data-rehype-pretty-code-figure] {
+    background-color: var(--color-code);
+    color: var(--color-code-foreground);
+    border-radius: var(--radius-lg);
+    border-width: 0px;
+    border-color: var(--border);
+    margin-top: calc(var(--spacing) * 6);
+    overflow: hidden;
+    font-size: var(--text-sm);
+    outline: none;
+    position: relative;
+    @apply md:-mx-1;
+
+    &:has([data-rehype-pretty-code-title]) [data-slot='copy-button'] {
+      top: calc(var(--spacing) * 1.5) !important;
+    }
+  }
+
+  [data-rehype-pretty-code-title] {
+    border-bottom: color-mix(in oklab, var(--border) 30%, transparent);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-block: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    font-family: var(--font-mono);
+    color: var(--color-code-foreground);
+  }
+
+  [data-line-numbers] {
+    display: grid;
+    min-width: 100%;
+    white-space: pre;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+
+  [data-line-numbers] [data-line]::before {
+    font-size: var(--text-sm);
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: calc(var(--spacing) * 16);
+    padding-right: calc(var(--spacing) * 6);
+    text-align: right;
+    color: var(--color-code-number);
+    background-color: var(--color-code);
+    position: sticky;
+    left: 0;
+  }
+
+  [data-line-numbers] [data-highlighted-line][data-line]::before {
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-line] {
+    padding-top: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 0.5);
+    min-height: calc(var(--spacing) * 1);
+    width: 100%;
+    display: inline-block;
+  }
+
+  [data-line] span {
+    color: var(--shiki-light);
+
+    @variant dark {
+      color: var(--shiki-dark) !important;
+    }
+  }
+
+  [data-highlighted-line],
+  [data-highlighted-chars] {
+    position: relative;
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-highlighted-line] {
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      content: '';
+      background-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 50%,
+        transparent
+      );
+    }
+  }
+
+  [data-highlighted-chars] {
+    border-radius: var(--radius-sm);
+    padding-inline: 0.3rem;
+    padding-block: 0.1rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+  }
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  font-synthesis: none !important;
+}
+body {
+  font-family:
+    'Open Sans',
+    sans-serif,
+    system-ui,
+    -apple-system;
+  color: var(--color-neutral-1000);
+}
+
+input[type='color'] {
+  -webkit-appearance: none;
+  border: none;
+}
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+input[type='color']::-webkit-color-swatch {
+  border: none;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 9px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-neutral-000);
+  border-radius: 30px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-100);
+  border-radius: 14px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-neutral-200);
+}