@clarify-labs/renderer 0.2.0 → 0.5.0

package/output/renderer.css

@@ -13,15 +13,7 @@
       --tw-space-y-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
@@ -97,6 +89,8 @@
     --color-emerald-400: oklch(76.5% .177 163.223);
     --color-emerald-500: oklch(69.6% .17 162.48);
     --color-emerald-600: oklch(59.6% .145 163.225);
+    --color-emerald-700: oklch(50.8% .118 165.612);
+    --color-emerald-800: oklch(43.2% .095 166.913);
     --color-emerald-900: oklch(37.8% .077 168.94);
     --color-emerald-950: oklch(26.2% .051 172.552);
     --color-sky-50: oklch(97.7% .013 236.62);
@@ -116,6 +110,7 @@
     --color-rose-50: oklch(96.9% .015 12.422);
     --color-rose-100: oklch(94.1% .03 12.58);
     --color-rose-200: oklch(89.2% .058 10.001);
+    --color-rose-300: oklch(81% .117 11.638);
     --color-rose-400: oklch(71.2% .194 13.428);
     --color-rose-500: oklch(64.5% .246 16.439);
     --color-rose-600: oklch(58.6% .253 17.585);
@@ -136,12 +131,10 @@
     --color-white: #fff;
     --spacing: .25rem;
     --container-sm: 24rem;
-    --container-md: 28rem;
     --container-lg: 33rem;
     --container-xl: 36rem;
     --container-2xl: 40rem;
     --container-3xl: 50rem;
-    --container-5xl: 66rem;
     --container-6xl: 72rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
@@ -149,6 +142,9 @@
     --text-sm--line-height: 1.5rem;
     --text-base: 1rem;
     --text-base--line-height: 1.75rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
     --text-3xl: 1.875rem;
     --text-3xl--line-height: 2.25rem;
     --text-5xl: 3rem;
@@ -156,17 +152,20 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-black: 900;
     --tracking-tight: -.025em;
-    --tracking-normal: 0em;
     --tracking-wide: .025em;
+    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
     --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
     --default-transition-duration: .15s;
@@ -446,8 +445,8 @@
   }
 
   body {
-    background: var(--color-white);
-    color: var(--color-zinc-900);
+    background: var(--clarify-theme-tokens-colors-background, var(--color-white));
+    color: var(--clarify-theme-tokens-colors-foreground, var(--color-zinc-900));
   }
 
   .dark body {
@@ -498,6 +497,505 @@
 }
 
 @layer components {
+  :root, .clarify-app {
+    --clarify-ui-text-strong: var(--clarify-theme-tokens-colors-foreground);
+    --clarify-ui-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 88%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-text-soft: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 68%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-text-faint: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 54%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 4%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-overlay-background: var(--clarify-theme-tokens-colors-muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 25%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-primary);
+    --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 9%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 18%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-menu-width: 13rem;
+    --clarify-ui-action-menu-width: 19.5rem;
+    --clarify-ui-control-font-size: .875rem;
+    --clarify-ui-control-line-height: 1.25rem;
+    --clarify-ui-menu-font-size: .875rem;
+    --clarify-ui-menu-line-height: 1.5rem;
+    --clarify-ui-description-font-size: .75rem;
+    --clarify-ui-description-line-height: 1.25rem;
+    --clarify-ui-tight-letter-spacing: -.01em;
+    --clarify-ui-search-field-font-size: .9375rem;
+    --clarify-ui-search-field-line-height: 1.5rem;
+    --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
+    --clarify-ui-navigation-section-line-height: var(--clarify-ui-menu-line-height);
+    --clarify-ui-navigation-section-badge-font-size: var(--clarify-ui-description-font-size);
+    --clarify-ui-navigation-section-badge-line-height: var(--clarify-ui-menu-line-height);
+    --clarify-preview-count-badge-font-size: var(--clarify-ui-description-font-size);
+    --clarify-preview-count-badge-line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-text-strong: var(--color-white);
+    --clarify-ui-text: var(--color-zinc-200);
+    --clarify-ui-text-soft: var(--color-zinc-300);
+    --clarify-ui-text-faint: var(--color-zinc-400);
+    --clarify-ui-hover-background: #ffffff0d;
+    --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-overlay-background: #0006;
+    --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 72%, white);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 16%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 28%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 28%, transparent);
+    }
+  }
+
+  .clarify-ui-control {
+    color: var(--clarify-ui-text);
+    font-size: var(--clarify-ui-control-font-size);
+    line-height: var(--clarify-ui-control-line-height);
+    font-weight: 500;
+  }
+
+  .clarify-ui-control:hover, .clarify-ui-control[aria-expanded="true"] {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-ui-icon-soft {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .clarify-ui-backdrop {
+    background: var(--clarify-ui-overlay-background);
+  }
+
+  .clarify-ui-icon-button:hover {
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-ui-menu {
+    color: var(--clarify-ui-text);
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+  }
+
+  .clarify-ui-menu-item {
+    color: var(--clarify-ui-text);
+    font-weight: 500;
+  }
+
+  .clarify-ui-menu-item:hover, .clarify-ui-menu-item[data-focus], .clarify-ui-menu-item-focus {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-ui-menu-item-active {
+    color: var(--clarify-ui-accent-text);
+    background: var(--clarify-ui-active-background);
+  }
+
+  .clarify-ui-menu-title {
+    color: var(--clarify-ui-text-strong);
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+    font-weight: 600;
+  }
+
+  .clarify-ui-menu-description {
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-ui-menu-code {
+    color: var(--clarify-ui-text-faint);
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-ui-menu-icon {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .clarify-ui-top-link, .clarify-ui-tab {
+    color: var(--clarify-ui-text);
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+    font-weight: 500;
+  }
+
+  .clarify-ui-top-link:hover, .clarify-ui-tab:hover, .clarify-ui-tab-active {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-brand-title, .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright, .clarify-search-button {
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+  }
+
+  .clarify-brand-title {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .clarify-footer-link:hover, .clarify-footer-social:hover {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-built-with {
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-built-with:hover {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-built-with-brand {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-navigation-group-title {
+    color: var(--clarify-ui-text-strong);
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
+    font-weight: 600;
+  }
+
+  .clarify-navigation-group-title-icon {
+    color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .clarify-navigation-link {
+    color: var(--clarify-ui-text);
+    font-size: var(--clarify-ui-menu-font-size);
+    line-height: var(--clarify-ui-menu-line-height);
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
+    font-weight: 500;
+  }
+
+  .clarify-navigation-anchor-link {
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--clarify-ui-navigation-section-font-size);
+    line-height: var(--clarify-ui-navigation-section-line-height);
+    font-weight: 500;
+  }
+
+  .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-navigation-link[data-muted="true"] {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  .clarify-navigation-link[data-muted="true"]:hover {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .clarify-navigation-section-badge {
+    font-size: var(--clarify-ui-navigation-section-badge-font-size);
+    line-height: var(--clarify-ui-navigation-section-badge-line-height);
+  }
+
+  .clarify-navigation-section-highlight {
+    background: var(--clarify-ui-subtle-background);
+  }
+
+  .clarify-tag, .clarify-code-panel-tag, .clarify-api-example-status, .clarify-page-navigation-label {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-page-navigation-title {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+  }
+
+  .clarify-mobile-tabs-select-trigger {
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
+  }
+
+  .clarify-preview-count-badge {
+    font-size: var(--clarify-preview-count-badge-font-size);
+    line-height: var(--clarify-preview-count-badge-line-height);
+  }
+
+  .clarify-preview-shell {
+    min-height: 26rem;
+  }
+
+  @media (min-width: 64rem) {
+    .clarify-preview-shell {
+      grid-template-columns: 14rem minmax(0, 1fr);
+    }
+  }
+
+  .clarify-preview-content-window {
+    max-height: 26rem;
+    -webkit-mask-image: linear-gradient(#000 90%, #0000);
+    mask-image: linear-gradient(#000 90%, #0000);
+  }
+
+  .clarify-preview-body {
+    height: calc(100% - 3rem);
+  }
+
+  .clarify-preview-endpoint-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  @media (min-width: 64rem) {
+    .clarify-preview-endpoint-grid {
+      grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
+    }
+  }
+
+  .clarify-preview-api-frame {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-api-content {
+    width: 100%;
+    max-width: none;
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-api-content-embedded {
+    min-width: 42rem;
+  }
+
+  .clarify-preview-api-content-openapi {
+    min-width: 48rem;
+  }
+
+  .clarify-preview-api-content .not-prose {
+    font-size: var(--clarify-ui-control-font-size);
+    line-height: var(--clarify-ui-control-line-height);
+  }
+
+  .clarify-preview-api-content pre {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-openapi-window {
+    height: 34rem;
+  }
+
+  .clarify-preview-openapi-mask {
+    -webkit-mask-image: linear-gradient(#000 88%, #0000);
+    mask-image: linear-gradient(#000 88%, #0000);
+  }
+
+  .clarify-search-result[aria-selected="true"], .clarify-search-result-active {
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-search-result-title {
+    color: var(--clarify-ui-text-strong);
+    font-size: var(--clarify-ui-control-font-size);
+    line-height: var(--clarify-ui-control-line-height);
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
+    font-weight: 600;
+  }
+
+  .clarify-search-result[aria-selected="true"] .clarify-search-result-title {
+    color: var(--clarify-ui-accent-text);
+  }
+
+  .clarify-search-result-hierarchy {
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-search-result-separator {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  .clarify-search-field {
+    color: var(--clarify-ui-text-strong);
+    font-size: var(--clarify-ui-search-field-font-size);
+    line-height: var(--clarify-ui-search-field-line-height);
+  }
+
+  .clarify-search-field::placeholder {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  @media (min-width: 40rem) {
+    .clarify-search-field {
+      font-size: var(--clarify-ui-control-font-size);
+      line-height: var(--clarify-ui-control-line-height);
+    }
+  }
+
+  .clarify-search-button {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .clarify-search-button:hover {
+    color: var(--clarify-ui-text-strong);
+    box-shadow: inset 0 0 0 1px var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-search-button:hover {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 28%, transparent);
+    }
+  }
+
+  .clarify-search-shortcut {
+    color: var(--clarify-ui-text-faint);
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
   .prose .contains-task-list {
     padding-left: 0;
     list-style: none;
@@ -510,17 +1008,29 @@
   }
 
   .prose .task-list-item > input[type="checkbox"] {
-    accent-color: var(--color-emerald-500);
+    accent-color: var(--clarify-theme-tokens-colors-primary, var(--color-emerald-500));
     flex: none;
     margin-top: .45rem;
   }
 }
 
 @layer utilities {
+  .\@container {
+    container-type: inline-size;
+  }
+
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+
   .pointer-events-none {
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -549,6 +1059,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -585,10 +1099,6 @@
     top: calc(var(--spacing) * 16);
   }
 
-  .top-full {
-    top: 100%;
-  }
-
   .top-px {
     top: 1px;
   }
@@ -621,10 +1131,18 @@
     left: calc(var(--spacing) * 3);
   }
 
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+
   .-z-10 {
     z-index: calc(10 * -1);
   }
 
+  .z-10 {
+    z-index: 10;
+  }
+
   .z-20 {
     z-index: 20;
   }
@@ -675,10 +1193,18 @@
     margin: 0;
   }
 
+  .-mx-2 {
+    margin-inline: calc(var(--spacing) * -2);
+  }
+
   .mx-0 {
     margin-inline: 0;
   }
 
+  .mx-0\.5 {
+    margin-inline: calc(var(--spacing) * .5);
+  }
+
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -696,23 +1222,68 @@
   }
 
   .prose {
-    --tw-prose-body: oklch(37% .013 285.805);
-    --tw-prose-headings: oklch(21% .006 285.885);
-    --tw-prose-links: oklch(69.6% .17 162.48);
-    --tw-prose-links-hover: oklch(59.6% .145 163.225);
-    --tw-prose-links-underline: oklab(69.6% -.162114 .0511766 / .3);
-    --tw-prose-bold: oklch(21% .006 285.885);
-    --tw-prose-counters: oklch(55.2% .016 285.938);
-    --tw-prose-bullets: oklch(87.1% .006 286.286);
-    --tw-prose-hr: oklab(21% .00164225 -.00577088 / .05);
-    --tw-prose-quotes: oklch(21% .006 285.885);
-    --tw-prose-quote-borders: oklch(92% .004 286.32);
-    --tw-prose-captions: oklch(55.2% .016 285.938);
-    --tw-prose-code: oklch(21% .006 285.885);
-    --tw-prose-code-bg: oklch(96.7% .001 286.375);
-    --tw-prose-code-ring: oklch(87.1% .006 286.286);
-    --tw-prose-th-borders: oklch(87.1% .006 286.286);
-    --tw-prose-td-borders: oklch(92% .004 286.32);
+    --tw-prose-body: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-body: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 60%, var(--clarify-theme-tokens-colors-muted));
+    }
+  }
+
+  .prose {
+    --tw-prose-headings: var(--clarify-theme-tokens-colors-foreground);
+    --tw-prose-links: var(--clarify-theme-tokens-colors-primary);
+    --tw-prose-links-hover: var(--clarify-theme-tokens-colors-accent);
+    --tw-prose-links-underline: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-links-underline: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 30%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-bold: var(--clarify-theme-tokens-colors-foreground);
+    --tw-prose-counters: var(--clarify-theme-tokens-colors-muted);
+    --tw-prose-bullets: var(--clarify-theme-tokens-colors-muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-bullets: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 35%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-hr: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-hr: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 65%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-quotes: var(--clarify-theme-tokens-colors-foreground);
+    --tw-prose-quote-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-captions: var(--clarify-theme-tokens-colors-muted);
+    --tw-prose-code: var(--clarify-theme-tokens-colors-foreground);
+    --tw-prose-code-bg: var(--clarify-theme-tokens-colors-code-background);
+    --tw-prose-code-ring: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-th-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-td-borders: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-td-borders: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 80%, transparent);
+    }
+  }
+
+  .prose {
     --tw-prose-invert-body: oklch(70.5% .015 286.067);
     --tw-prose-invert-headings: #fff;
     --tw-prose-invert-links: oklch(76.5% .177 163.223);
@@ -731,7 +1302,7 @@
     --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
     --tw-prose-invert-td-borders: oklch(37% .013 285.805);
     color: var(--tw-prose-body);
-    font-size: .875rem;
+    font-size: 1rem;
     line-height: 1.75rem;
   }
 
@@ -741,7 +1312,7 @@
   }
 
   .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-size: 1rem;
+    font-size: 1.125rem;
     line-height: 1.75rem;
   }
 
@@ -881,9 +1452,11 @@
 
   .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-links);
+    text-decoration: underline;
+    -webkit-text-decoration-color: var(--tw-prose-links-underline);
+    -webkit-text-decoration-color: var(--tw-prose-links-underline);
+    text-decoration-color: var(--tw-prose-links-underline);
     font-weight: 500;
-    -webkit-text-decoration: underline #0000;
-    text-decoration: underline #0000;
     transition-property: color, text-decoration-color;
     transition-duration: .15s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -903,9 +1476,9 @@
 
   .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-code);
+    border-radius: var(--clarify-theme-tokens-radius-lg);
     box-shadow: inset 0 0 0 1px var(--tw-prose-code-ring);
     background-color: var(--tw-prose-code-bg);
-    border-radius: .5rem;
     padding: .25rem .375rem;
     font-size: .75rem;
   }
@@ -926,6 +1499,10 @@
     margin-bottom: 0 !important;
   }
 
+  .mt-0 {
+    margin-top: 0;
+  }
+
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * .5);
   }
@@ -942,6 +1519,14 @@
     margin-top: calc(var(--spacing) * 3);
   }
 
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -954,6 +1539,10 @@
     margin-right: calc(var(--spacing) * -1);
   }
 
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
   .mr-auto {
     margin-right: auto;
   }
@@ -970,6 +1559,10 @@
     margin-bottom: calc(var(--spacing) * 3);
   }
 
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -994,6 +1587,10 @@
     margin-left: calc(var(--spacing) * -152);
   }
 
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -1026,6 +1623,16 @@
     display: table;
   }
 
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
+
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1041,6 +1648,11 @@
     height: calc(var(--spacing) * 6);
   }
 
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
@@ -1087,6 +1699,14 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -1095,6 +1715,14 @@
     height: calc(var(--spacing) * 14);
   }
 
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
+
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
@@ -1107,14 +1735,14 @@
     height: 100%;
   }
 
-  .h-px {
-    height: 1px;
-  }
-
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
 
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
+
   .min-h-\[calc\(--spacing\(12\)\+1px\)\] {
     min-height: calc(calc(var(--spacing) * 12) + 1px);
   }
@@ -1123,8 +1751,12 @@
     min-height: 100vh;
   }
 
-  .w-\(--button-width\) {
-    width: var(--button-width);
+  .w-\(--clarify-ui-action-menu-width\) {
+    width: var(--clarify-ui-action-menu-width);
+  }
+
+  .w-\(--clarify-ui-menu-width\) {
+    width: var(--clarify-ui-menu-width);
   }
 
   .w-\(--width\) {
@@ -1163,12 +1795,12 @@
     width: calc(var(--spacing) * 8);
   }
 
-  .w-44 {
-    width: calc(var(--spacing) * 44);
+  .w-24 {
+    width: calc(var(--spacing) * 24);
   }
 
-  .w-52 {
-    width: calc(var(--spacing) * 52);
+  .w-80 {
+    width: calc(var(--spacing) * 80);
   }
 
   .w-278\.25 {
@@ -1179,14 +1811,26 @@
     width: calc(var(--spacing) * 325);
   }
 
+  .w-\[calc\(100\%\+1rem\)\] {
+    width: calc(100% + 1rem);
+  }
+
   .w-full {
     width: 100%;
   }
 
+  .w-max {
+    width: max-content;
+  }
+
   .w-px {
     width: 1px;
   }
 
+  .max-w-\(--clarify-theme-layout-max-width\) {
+    max-width: var(--clarify-theme-layout-max-width);
+  }
+
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1199,20 +1843,56 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
+
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+
+  .max-w-\[18rem\] {
+    max-width: 18rem;
+  }
+
+  .max-w-\[22rem\] {
+    max-width: 22rem;
+  }
+
+  .max-w-\[24rem\] {
+    max-width: 24rem;
+  }
+
+  .max-w-\[28rem\] {
+    max-width: 28rem;
+  }
+
+  .max-w-\[36vw\] {
+    max-width: 36vw;
+  }
+
+  .max-w-\[min\(32rem\,calc\(100vw-2rem\)\)\] {
+    max-width: min(32rem, 100vw - 2rem);
+  }
+
   .max-w-none {
     max-width: none;
   }
 
+  .min-w-\(--button-width\) {
+    min-width: var(--button-width);
+  }
+
   .min-w-0 {
     min-width: 0;
   }
 
-  .min-w-32 {
-    min-width: calc(var(--spacing) * 32);
+  .min-w-16 {
+    min-width: calc(var(--spacing) * 16);
   }
 
-  .min-w-40 {
-    min-width: calc(var(--spacing) * 40);
+  .min-w-28 {
+    min-width: calc(var(--spacing) * 28);
   }
 
   .flex-1 {
@@ -1231,15 +1911,34 @@
     flex-shrink: 0;
   }
 
+  .origin-top {
+    transform-origin: top;
+  }
+
   .origin-top-right {
     transform-origin: 100% 0;
   }
 
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .-translate-y-1\.5 {
     --tw-translate-y: calc(var(--spacing) * -1.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-y-0 {
+    --tw-translate-y: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-y-1\.5 {
     --tw-translate-y: calc(var(--spacing) * 1.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1262,16 +1961,20 @@
     transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
   .cursor-default {
     cursor: default;
   }
 
-  .resize {
-    resize: both;
+  .cursor-pointer {
+    cursor: pointer;
   }
 
-  .scroll-mt-20 {
-    scroll-margin-top: calc(var(--spacing) * 20);
+  .resize {
+    resize: both;
   }
 
   .scroll-mt-24 {
@@ -1282,10 +1985,6 @@
     scroll-margin-top: calc(var(--spacing) * 32);
   }
 
-  .scrollbar-none {
-    scrollbar-width: none;
-  }
-
   .list-none {
     list-style-type: none;
   }
@@ -1298,6 +1997,10 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .grid-cols-\[1fr_1px_1fr\] {
     grid-template-columns: 1fr 1px 1fr;
   }
@@ -1322,6 +2025,10 @@
     align-items: flex-start;
   }
 
+  .items-stretch {
+    align-items: stretch;
+  }
+
   .justify-between {
     justify-content: space-between;
   }
@@ -1374,8 +2081,16 @@
     gap: calc(var(--spacing) * 8);
   }
 
-  .gap-12 {
-    gap: calc(var(--spacing) * 12);
+  :where(.space-y-4 > :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)));
+  }
+
+  :where(.space-y-5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
   :where(.space-y-6 > :not(:last-child)) {
@@ -1384,10 +2099,14 @@
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  :where(.space-y-16 > :not(:last-child)) {
+  :where(.space-y-8 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
   }
 
   .gap-x-3 {
@@ -1398,8 +2117,12 @@
     column-gap: calc(var(--spacing) * 4);
   }
 
-  .gap-x-16 {
-    column-gap: calc(var(--spacing) * 16);
+  .gap-x-8 {
+    column-gap: calc(var(--spacing) * 8);
+  }
+
+  .gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * .5);
   }
 
   .gap-y-2 {
@@ -1418,6 +2141,16 @@
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
 
+  :where(.divide-zinc-200\/70 > :not(:last-child)) {
+    border-color: #e4e4e7b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.divide-zinc-200\/70 > :not(:last-child)) {
+      border-color: color-mix(in oklab, var(--color-zinc-200) 70%, transparent);
+    }
+  }
+
   :where(.divide-zinc-900\/5 > :not(:last-child)) {
     border-color: #18181b0d;
   }
@@ -1454,14 +2187,42 @@
     overflow-y: auto;
   }
 
-  .scroll-smooth {
-    scroll-behavior: smooth;
+  .rounded {
+    border-radius: .25rem;
+  }
+
+  .rounded-\(--clarify-theme-tokens-radius-lg\) {
+    border-radius: var(--clarify-theme-tokens-radius-lg);
+  }
+
+  .rounded-\(--clarify-theme-tokens-radius-md\) {
+    border-radius: var(--clarify-theme-tokens-radius-md);
+  }
+
+  .rounded-\(--clarify-theme-tokens-radius-sm\) {
+    border-radius: var(--clarify-theme-tokens-radius-sm);
+  }
+
+  .rounded-\(--clarify-theme-tokens-radius-xl\) {
+    border-radius: var(--clarify-theme-tokens-radius-xl);
   }
 
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+
+  .rounded-\[1\.5rem\] {
+    border-radius: 1.5rem;
+  }
+
+  .rounded-\[1\.75rem\] {
+    border-radius: 1.75rem;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -1483,6 +2244,11 @@
     border-width: 1px;
   }
 
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1493,6 +2259,11 @@
     border-top-width: 1px;
   }
 
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1503,6 +2274,18 @@
     border-left-width: 1px;
   }
 
+  .border-\(--clarify-theme-tokens-colors-border\) {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .border-\(--clarify-theme-tokens-colors-primary\) {
+    border-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .border-\(--clarify-ui-accent-border\) {
+    border-color: var(--clarify-ui-accent-border);
+  }
+
   .border-amber-200 {
     border-color: var(--color-amber-200);
   }
@@ -1517,10 +2300,6 @@
     }
   }
 
-  .border-emerald-500 {
-    border-color: var(--color-emerald-500);
-  }
-
   .border-emerald-500\/20 {
     border-color: #00bb7f33;
   }
@@ -1559,16 +2338,6 @@
     border-color: #0000;
   }
 
-  .border-white\/10 {
-    border-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-white\/10 {
-      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
@@ -1611,6 +2380,60 @@
     }
   }
 
+  .bg-\(--clarify-theme-tokens-colors-background\), .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
+    background-color: var(--clarify-theme-tokens-colors-background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-background) var(--bg-opacity-light), transparent);
+    }
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-border\) {
+    background-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-code-background\) {
+    background-color: var(--clarify-theme-tokens-colors-code-background);
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-foreground\) {
+    background-color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-primary\) {
+    background-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
+    background-color: var(--clarify-theme-tokens-colors-surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
+    }
+  }
+
+  .bg-\(--clarify-ui-accent-background\) {
+    background-color: var(--clarify-ui-accent-background);
+  }
+
+  .bg-\(--clarify-ui-subtle-background\) {
+    background-color: var(--clarify-ui-subtle-background);
+  }
+
+  .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
+    background-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
+      background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 12%,transparent);
+    }
+  }
+
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
@@ -1625,6 +2448,10 @@
     }
   }
 
+  .bg-amber-400 {
+    background-color: var(--color-amber-400);
+  }
+
   .bg-amber-400\/10 {
     background-color: #fcbb001a;
   }
@@ -1635,8 +2462,24 @@
     }
   }
 
-  .bg-emerald-50 {
-    background-color: var(--color-emerald-50);
+  .bg-amber-400\/15 {
+    background-color: #fcbb0026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-amber-400\/15 {
+      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
+    }
+  }
+
+  .bg-black\/30 {
+    background-color: #0000004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/30 {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
   }
 
   .bg-emerald-50\/50 {
@@ -1649,6 +2492,14 @@
     }
   }
 
+  .bg-emerald-100 {
+    background-color: var(--color-emerald-100);
+  }
+
+  .bg-emerald-400 {
+    background-color: var(--color-emerald-400);
+  }
+
   .bg-emerald-400\/10 {
     background-color: #00d2941a;
   }
@@ -1659,8 +2510,14 @@
     }
   }
 
-  .bg-emerald-500 {
-    background-color: var(--color-emerald-500);
+  .bg-emerald-400\/15 {
+    background-color: #00d29426;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-emerald-400\/15 {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
+    }
   }
 
   .bg-red-50 {
@@ -1681,6 +2538,20 @@
     }
   }
 
+  .bg-rose-400 {
+    background-color: var(--color-rose-400);
+  }
+
+  .bg-rose-400\/15 {
+    background-color: #ff667f26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-rose-400\/15 {
+      background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
+    }
+  }
+
   .bg-sky-50\/50 {
     background-color: #f0f9ff80;
   }
@@ -1701,22 +2572,22 @@
     }
   }
 
-  .bg-transparent {
-    background-color: #0000;
+  .bg-sky-400\/15 {
+    background-color: #00bcfe26;
   }
 
-  .bg-white {
-    background-color: var(--color-white);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-sky-400\/15 {
+      background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
+    }
   }
 
-  .bg-white\/\(--bg-opacity-light\) {
-    background-color: #fff;
+  .bg-transparent {
+    background-color: #0000;
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-white\/\(--bg-opacity-light\) {
-      background-color: color-mix(in oklab, var(--color-white) var(--bg-opacity-light), transparent);
-    }
+  .bg-white {
+    background-color: var(--color-white);
   }
 
   .bg-white\/5 {
@@ -1729,55 +2600,45 @@
     }
   }
 
-  .bg-white\/10 {
-    background-color: #ffffff1a;
+  .bg-zinc-50 {
+    background-color: var(--color-zinc-50);
+  }
+
+  .bg-zinc-100\/50 {
+    background-color: #f4f4f580;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-white\/10 {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    .bg-zinc-100\/50 {
+      background-color: color-mix(in oklab, var(--color-zinc-100) 50%, transparent);
     }
   }
 
-  .bg-white\/85 {
-    background-color: #ffffffd9;
+  .bg-zinc-100\/70 {
+    background-color: #f4f4f5b3;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-white\/85 {
-      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
+    .bg-zinc-100\/70 {
+      background-color: color-mix(in oklab, var(--color-zinc-100) 70%, transparent);
     }
   }
 
-  .bg-zinc-50 {
-    background-color: var(--color-zinc-50);
-  }
-
-  .bg-zinc-100 {
-    background-color: var(--color-zinc-100);
+  .bg-zinc-200 {
+    background-color: var(--color-zinc-200);
   }
 
   .bg-zinc-300 {
     background-color: var(--color-zinc-300);
   }
 
-  .bg-zinc-400\/20 {
-    background-color: #9f9fa933;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-400\/20 {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
-    }
-  }
-
-  .bg-zinc-400\/25 {
-    background-color: #9f9fa940;
+  .bg-zinc-400\/15 {
+    background-color: #9f9fa926;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-400\/25 {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 25%, transparent);
+    .bg-zinc-400\/15 {
+      background-color: color-mix(in oklab, var(--color-zinc-400) 15%, transparent);
     }
   }
 
@@ -1789,30 +2650,10 @@
     background-color: var(--color-zinc-800);
   }
 
-  .bg-zinc-800\/2\.5 {
-    background-color: #27272a06;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-800\/2\.5 {
-      background-color: color-mix(in oklab, var(--color-zinc-800) 2.5%, transparent);
-    }
-  }
-
   .bg-zinc-900 {
     background-color: var(--color-zinc-900);
   }
 
-  .bg-zinc-900\/7\.5 {
-    background-color: #18181b13;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-900\/7\.5 {
-      background-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
-    }
-  }
-
   .bg-zinc-900\/10 {
     background-color: #18181b1a;
   }
@@ -1823,28 +2664,22 @@
     }
   }
 
-  .bg-linear-to-r {
-    --tw-gradient-position: to right;
-  }
-
-  @supports (background-image: linear-gradient(in lab, red, red)) {
-    .bg-linear-to-r {
-      --tw-gradient-position: to right in oklab;
-    }
+  .bg-zinc-950 {
+    background-color: var(--color-zinc-950);
   }
 
-  .bg-linear-to-r {
-    background-image: linear-gradient(var(--tw-gradient-stops));
+  .bg-zinc-950\/2\.5 {
+    background-color: #09090b06;
   }
 
-  .from-\[\#36b49f\] {
-    --tw-gradient-from: #36b49f;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-zinc-950\/2\.5 {
+      background-color: color-mix(in oklab, var(--color-zinc-950) 2.5%, transparent);
+    }
   }
 
-  .to-\[\#DBFF75\] {
-    --tw-gradient-to: #dbff75;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  .bg-\[linear-gradient\(to_right\,var\(--clarify-theme-tokens-colors-primary\)\,var\(--clarify-theme-tokens-colors-accent\)\)\] {
+    background-image: linear-gradient(to right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent));
   }
 
   .mask-\[radial-gradient\(farthest-side_at_top\,white\,transparent\)\] {
@@ -1852,6 +2687,18 @@
     mask-image: radial-gradient(farthest-side at top, #fff, #0000);
   }
 
+  .fill-\(--clarify-theme-tokens-colors-foreground\) {
+    fill: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .fill-\(--clarify-theme-tokens-colors-primary\) {
+    fill: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .fill-\(--clarify-ui-accent-text\) {
+    fill: var(--clarify-ui-accent-text);
+  }
+
   .fill-black\/40 {
     fill: #0006;
   }
@@ -1862,14 +2709,6 @@
     }
   }
 
-  .fill-emerald-400 {
-    fill: var(--color-emerald-400);
-  }
-
-  .fill-emerald-500 {
-    fill: var(--color-emerald-500);
-  }
-
   .fill-white {
     fill: var(--color-white);
   }
@@ -1884,8 +2723,16 @@
     }
   }
 
-  .fill-zinc-900 {
-    fill: var(--color-zinc-900);
+  .stroke-\(--clarify-theme-tokens-colors-foreground\) {
+    stroke: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .stroke-\(--clarify-theme-tokens-colors-muted\) {
+    stroke: var(--clarify-theme-tokens-colors-muted);
+  }
+
+  .stroke-\(--clarify-theme-tokens-colors-surface\) {
+    stroke: var(--clarify-theme-tokens-colors-surface);
   }
 
   .stroke-black\/50 {
@@ -1910,10 +2757,6 @@
     stroke: var(--color-zinc-500);
   }
 
-  .stroke-zinc-900 {
-    stroke: var(--color-zinc-900);
-  }
-
   .p-0 {
     padding: 0;
   }
@@ -1922,6 +2765,18 @@
     padding: var(--spacing);
   }
 
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1938,6 +2793,10 @@
     padding-inline: 0;
   }
 
+  .px-1 {
+    padding-inline: var(--spacing);
+  }
+
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1958,10 +2817,18 @@
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
 
+  .py-0 {
+    padding-block: 0;
+  }
+
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -1978,6 +2845,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -1986,20 +2857,28 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
 
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
 
-  .pt-6 {
-    padding-top: calc(var(--spacing) * 6);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
 
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
   }
 
   .pt-14 {
@@ -2034,6 +2913,10 @@
     padding-left: calc(var(--spacing) * 2);
   }
 
+  .pl-2\.5 {
+    padding-left: calc(var(--spacing) * 2.5);
+  }
+
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2066,6 +2949,11 @@
     font-family: var(--font-sans);
   }
 
+  .text-2xl\/8 {
+    font-size: var(--text-2xl);
+    line-height: calc(var(--spacing) * 8);
+  }
+
   .text-2xs {
     font-size: var(--text-2xs);
     line-height: var(--tw-leading, var(--text-2xs--line-height));
@@ -2076,24 +2964,19 @@
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
 
-  .text-\[0\.625rem\]\/4 {
-    font-size: .625rem;
-    line-height: calc(var(--spacing) * 4);
-  }
-
-  .text-\[0\.625rem\]\/5 {
-    font-size: .625rem;
-    line-height: calc(var(--spacing) * 5);
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
   }
 
-  .text-\[0\.625rem\]\/6 {
-    font-size: .625rem;
+  .text-base\/6 {
+    font-size: var(--text-base);
     line-height: calc(var(--spacing) * 6);
   }
 
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+  .text-lg\/7 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 7);
   }
 
   .text-sm {
@@ -2111,16 +2994,46 @@
     line-height: calc(var(--spacing) * 6);
   }
 
+  .text-sm\/7 {
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 7);
+  }
+
+  .text-xl\/7 {
+    font-size: var(--text-xl);
+    line-height: calc(var(--spacing) * 7);
+  }
+
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
+  .text-xs\/5 {
+    font-size: var(--text-xs);
+    line-height: calc(var(--spacing) * 5);
+  }
+
   .text-xs\/6 {
     font-size: var(--text-xs);
     line-height: calc(var(--spacing) * 6);
   }
 
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+
+  .font-black {
+    --tw-font-weight: var(--font-weight-black);
+    font-weight: var(--font-weight-black);
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2136,11 +3049,6 @@
     font-weight: var(--font-weight-semibold);
   }
 
-  .tracking-normal {
-    --tw-tracking: var(--tracking-normal);
-    letter-spacing: var(--tracking-normal);
-  }
-
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2151,19 +3059,64 @@
     letter-spacing: var(--tracking-wide);
   }
 
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
   }
 
-  .wrap-break-word {
-    overflow-wrap: break-word;
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
+
+  .whitespace-normal {
+    white-space: normal;
   }
 
   .whitespace-nowrap {
     white-space: nowrap;
   }
 
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .text-\(--clarify-theme-tokens-colors-foreground\) {
+    color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .text-\(--clarify-theme-tokens-colors-muted\) {
+    color: var(--clarify-theme-tokens-colors-muted);
+  }
+
+  .text-\(--clarify-theme-tokens-colors-primary\) {
+    color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .text-\(--clarify-ui-accent-text\) {
+    color: var(--clarify-ui-accent-text);
+  }
+
+  .text-\(--clarify-ui-text\) {
+    color: var(--clarify-ui-text);
+  }
+
+  .text-\(--clarify-ui-text-faint\) {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  .text-\(--clarify-ui-text-soft\) {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .text-\(--clarify-ui-text-strong\) {
+    color: var(--clarify-ui-text-strong);
+  }
+
   .text-amber-500 {
     color: var(--color-amber-500);
   }
@@ -2184,6 +3137,10 @@
     color: var(--color-amber-950);
   }
 
+  .text-emerald-300 {
+    color: var(--color-emerald-300);
+  }
+
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -2196,6 +3153,14 @@
     color: var(--color-emerald-600);
   }
 
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
+
+  .text-emerald-800 {
+    color: var(--color-emerald-800);
+  }
+
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
@@ -2288,6 +3253,10 @@
     color: var(--color-zinc-900);
   }
 
+  .text-zinc-950 {
+    color: var(--color-zinc-950);
+  }
+
   .capitalize {
     text-transform: capitalize;
   }
@@ -2312,14 +3281,28 @@
     opacity: 0;
   }
 
-  .opacity-40 {
-    opacity: .4;
+  .opacity-35 {
+    opacity: .35;
+  }
+
+  .opacity-100 {
+    opacity: 1;
   }
 
   .mix-blend-overlay {
     mix-blend-mode: overlay;
   }
 
+  .shadow-\(--clarify-ui-accent-glow\) {
+    --tw-shadow: var(--clarify-ui-accent-glow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+    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, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2330,6 +3313,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-none {
+    --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);
+  }
+
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2340,11 +3328,26 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .ring-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);
   }
 
+  .shadow-black\/10 {
+    --tw-shadow-color: #0000001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-black\/10 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .shadow-black\/20 {
     --tw-shadow-color: #0003;
   }
@@ -2375,42 +3378,30 @@
     }
   }
 
-  .ring-amber-300 {
-    --tw-ring-color: var(--color-amber-300);
-  }
-
-  .ring-emerald-300 {
-    --tw-ring-color: var(--color-emerald-300);
-  }
-
-  .ring-emerald-400\/20 {
-    --tw-ring-color: #00d29433;
+  .ring-\(--clarify-theme-tokens-colors-border\) {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-border);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .ring-emerald-400\/20 {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
-    }
+  .ring-\(--clarify-ui-accent-border\) {
+    --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
-  .ring-emerald-500\/10 {
-    --tw-ring-color: #00bb7f1a;
+  .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .ring-emerald-500\/10 {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+    .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
+      --tw-ring-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 24%,transparent);
     }
   }
 
-  .ring-emerald-500\/20 {
-    --tw-ring-color: #00bb7f33;
+  .ring-amber-300 {
+    --tw-ring-color: var(--color-amber-300);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .ring-emerald-500\/20 {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
-    }
+  .ring-emerald-300 {
+    --tw-ring-color: var(--color-emerald-300);
   }
 
   .ring-rose-200 {
@@ -2421,31 +3412,27 @@
     --tw-ring-color: var(--color-sky-300);
   }
 
-  .ring-zinc-200 {
-    --tw-ring-color: var(--color-zinc-200);
-  }
-
-  .ring-zinc-300 {
-    --tw-ring-color: var(--color-zinc-300);
-  }
-
-  .ring-zinc-900\/7\.5 {
-    --tw-ring-color: #18181b13;
+  .ring-white\/10 {
+    --tw-ring-color: #ffffff1a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .ring-zinc-900\/7\.5 {
-      --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
+    .ring-white\/10 {
+      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
 
-  .ring-zinc-900\/10 {
-    --tw-ring-color: #18181b1a;
+  .ring-zinc-300 {
+    --tw-ring-color: var(--color-zinc-300);
+  }
+
+  .ring-zinc-950\/10 {
+    --tw-ring-color: #09090b1a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .ring-zinc-900\/10 {
-      --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
+    .ring-zinc-950\/10 {
+      --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
     }
   }
 
@@ -2500,16 +3487,39 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[max-height\,opacity\,transform\] {
+    transition-property: max-height, opacity, transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-colors {
     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));
   }
 
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .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));
+  }
+
   .delay-150 {
     transition-delay: .15s;
   }
 
+  .duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
   .duration-300 {
     --tw-duration: .3s;
     transition-duration: .3s;
@@ -2525,6 +3535,11 @@
     transition-timing-function: var(--ease-in-out);
   }
 
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
   .will-change-transform {
     will-change: transform;
   }
@@ -2555,6 +3570,10 @@
   }
 
   @media (hover: hover) {
+    .group-hover\:text-\(--clarify-theme-tokens-colors-primary\):is(:where(.group):hover *) {
+      color: var(--clarify-theme-tokens-colors-primary);
+    }
+
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
     }
@@ -2568,8 +3587,8 @@
     opacity: 1;
   }
 
-  .group-aria-selected\:text-emerald-500:is(:where(.group)[aria-selected="true"] *) {
-    color: var(--color-emerald-500);
+  .group-aria-expanded\:rotate-180:is(:where(.group)[aria-expanded="true"] *) {
+    rotate: 180deg;
   }
 
   .group-data-selected\:opacity-100:is(:where(.group)[data-selected] *) {
@@ -2601,60 +3620,76 @@
   }
 
   @media (hover: hover) {
-    .hover\:border-emerald-300:hover {
-      border-color: var(--color-emerald-300);
+    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
+      border-color: var(--clarify-theme-tokens-colors-primary);
     }
 
-    .hover\:border-white\/20:hover {
-      border-color: #fff3;
+    .hover\:border-\(--clarify-ui-accent-border\):hover {
+      border-color: var(--clarify-ui-accent-border);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-white\/20:hover {
-        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
+    .hover\:border-zinc-300:hover {
+      border-color: var(--color-zinc-300);
     }
 
-    .hover\:bg-white\/5:hover {
-      background-color: #ffffff0d;
+    .hover\:bg-\(--clarify-theme-tokens-colors-background\):hover {
+      background-color: var(--clarify-theme-tokens-colors-background);
+    }
+
+    .hover\:bg-\(--clarify-theme-tokens-colors-surface\):hover {
+      background-color: var(--clarify-theme-tokens-colors-surface);
+    }
+
+    .hover\:bg-\(--clarify-ui-hover-background\):hover {
+      background-color: var(--clarify-ui-hover-background);
+    }
+
+    .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
+      background-color: var(--clarify-theme-tokens-colors-foreground);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/5:hover {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
+        background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 2.5%,transparent);
       }
     }
 
-    .hover\:bg-white\/7\.5:hover {
-      background-color: #ffffff13;
+    .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
+      background-color: var(--clarify-theme-tokens-colors-foreground);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/7\.5:hover {
-        background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
+      .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
+        background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
       }
     }
 
-    .hover\:bg-white\/10:hover {
-      background-color: #ffffff1a;
+    .hover\:bg-black\/50:hover {
+      background-color: #00000080;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/10:hover {
-        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      .hover\:bg-black\/50:hover {
+        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
       }
     }
 
-    .hover\:bg-zinc-100:hover {
-      background-color: var(--color-zinc-100);
+    .hover\:bg-white\/7\.5:hover {
+      background-color: #ffffff13;
     }
 
-    .hover\:bg-zinc-200:hover {
-      background-color: var(--color-zinc-200);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/7\.5:hover {
+        background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
+      }
     }
 
-    .hover\:bg-zinc-700:hover {
-      background-color: var(--color-zinc-700);
+    .hover\:bg-zinc-50:hover {
+      background-color: var(--color-zinc-50);
+    }
+
+    .hover\:bg-zinc-100:hover {
+      background-color: var(--color-zinc-100);
     }
 
     .hover\:bg-zinc-900\/2\.5:hover {
@@ -2667,18 +3702,12 @@
       }
     }
 
-    .hover\:bg-zinc-900\/5:hover {
-      background-color: #18181b0d;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-zinc-900\/5:hover {
-        background-color: color-mix(in oklab, var(--color-zinc-900) 5%, transparent);
-      }
+    .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
+      color: var(--clarify-theme-tokens-colors-foreground);
     }
 
-    .hover\:text-emerald-600:hover {
-      color: var(--color-emerald-600);
+    .hover\:text-emerald-700:hover {
+      color: var(--color-emerald-700);
     }
 
     .hover\:text-inherit:hover {
@@ -2701,6 +3730,10 @@
       color: var(--color-zinc-950);
     }
 
+    .hover\:opacity-80:hover {
+      opacity: .8;
+    }
+
     .hover\:shadow-md:hover {
       --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2709,16 +3742,6 @@
     .hover\:ring-zinc-500:hover {
       --tw-ring-color: var(--color-zinc-500);
     }
-
-    .hover\:ring-zinc-900\/20:hover {
-      --tw-ring-color: #18181b33;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:ring-zinc-900\/20:hover {
-        --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 20%, transparent);
-      }
-    }
   }
 
   .focus\:w-full:focus {
@@ -2729,8 +3752,26 @@
     flex: none;
   }
 
-  .focus\:border-emerald-400:focus {
-    border-color: var(--color-emerald-400);
+  .focus\:border-zinc-400:focus {
+    border-color: var(--color-zinc-400);
+  }
+
+  .focus\:bg-black\/50:focus {
+    background-color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:bg-black\/50:focus {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  .focus\:bg-white:focus {
+    background-color: var(--color-white);
+  }
+
+  .focus\:text-zinc-200:focus {
+    color: var(--color-zinc-200);
   }
 
   .focus\:opacity-100:focus {
@@ -2742,13 +3783,13 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .focus\:ring-emerald-400\/20:focus {
-    --tw-ring-color: #00d29433;
+  .focus\:ring-emerald-400\/25:focus {
+    --tw-ring-color: #00d29440;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .focus\:ring-emerald-400\/20:focus {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
+    .focus\:ring-emerald-400\/25:focus {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
     }
   }
 
@@ -2757,8 +3798,27 @@
     outline-style: none;
   }
 
-  .aria-selected\:bg-zinc-50[aria-selected="true"] {
-    background-color: var(--color-zinc-50);
+  .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-\(--clarify-theme-tokens-colors-primary\):focus-visible {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .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\:ring-offset-\(--clarify-theme-tokens-colors-background\):focus-visible {
+    --tw-ring-offset-color: var(--clarify-theme-tokens-colors-background);
+  }
+
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
   }
 
   .data-closed\:-translate-x-full[data-closed] {
@@ -2810,10 +3870,6 @@
     color: var(--color-white);
   }
 
-  .data-focus\:text-zinc-950[data-focus] {
-    color: var(--color-zinc-950);
-  }
-
   .data-leave\:pointer-events-none[data-leave] {
     pointer-events: none;
   }
@@ -2833,8 +3889,22 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-emerald-400[data-open] {
-    border-color: var(--color-emerald-400);
+  .data-open\:border-zinc-300[data-open] {
+    border-color: var(--color-zinc-300);
+  }
+
+  .data-open\:bg-white\/10[data-open] {
+    background-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-open\:bg-white\/10[data-open] {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .data-open\:bg-zinc-50[data-open] {
+    background-color: var(--color-zinc-50);
   }
 
   .data-open\:ring-2[data-open] {
@@ -2842,13 +3912,13 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .data-open\:ring-emerald-400\/20[data-open] {
-    --tw-ring-color: #00d29433;
+  .data-open\:ring-emerald-400\/25[data-open] {
+    --tw-ring-color: #00d29440;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:ring-emerald-400\/20[data-open] {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
+    .data-open\:ring-emerald-400\/25[data-open] {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
     }
   }
 
@@ -2856,6 +3926,10 @@
     color: var(--color-emerald-300);
   }
 
+  .data-selected\:text-emerald-700[data-selected] {
+    color: var(--color-emerald-700);
+  }
+
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
     --tw-outline-style: none;
     outline-style: none;
@@ -2875,18 +3949,42 @@
   }
 
   @media (min-width: 40rem) {
+    .sm\:flex {
+      display: flex;
+    }
+
+    .sm\:hidden {
+      display: none;
+    }
+
     .sm\:inline {
       display: inline;
     }
 
+    .sm\:w-auto {
+      width: auto;
+    }
+
+    .sm\:max-w-\[min\(36\%\,16rem\)\] {
+      max-width: min(36%, 16rem);
+    }
+
     .sm\:max-w-xl {
       max-width: var(--container-xl);
     }
 
+    .sm\:min-w-16 {
+      min-width: calc(var(--spacing) * 16);
+    }
+
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -2903,6 +4001,10 @@
       justify-content: flex-start;
     }
 
+    .sm\:px-1\.5 {
+      padding-inline: calc(var(--spacing) * 1.5);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -2918,18 +4020,9 @@
     .sm\:text-left {
       text-align: left;
     }
-
-    .sm\:text-sm {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
   }
 
   @media (min-width: 48rem) {
-    .md\:mt-0 {
-      margin-top: 0;
-    }
-
     .md\:block {
       display: block;
     }
@@ -2950,14 +4043,8 @@
       justify-content: flex-start;
     }
 
-    .md\:bg-zinc-900\/10 {
-      background-color: #18181b1a;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .md\:bg-zinc-900\/10 {
-        background-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
-      }
+    .md\:bg-\(--clarify-theme-tokens-colors-border\) {
+      background-color: var(--clarify-theme-tokens-colors-border);
     }
 
     .md\:px-10 {
@@ -2975,44 +4062,32 @@
   }
 
   @media (min-width: 64rem) {
-    .lg\:pointer-events-auto {
-      pointer-events: auto;
-    }
-
-    .lg\:pointer-events-none {
-      pointer-events: none;
+    .lg\:sticky {
+      position: sticky;
     }
 
-    .lg\:fixed {
-      position: fixed;
+    .lg\:top-14 {
+      top: calc(var(--spacing) * 14);
     }
 
-    .lg\:inset-0 {
-      inset: 0;
+    .lg\:top-28 {
+      top: calc(var(--spacing) * 28);
     }
 
-    .lg\:left-72 {
-      left: calc(var(--spacing) * 72);
+    .lg\:top-30 {
+      top: calc(var(--spacing) * 30);
     }
 
     .lg\:z-30 {
       z-index: 30;
     }
 
-    .lg\:z-40 {
-      z-index: 40;
-    }
-
     .lg\:z-50 {
       z-index: 50;
     }
 
-    .lg\:mt-10 {
-      margin-top: calc(var(--spacing) * 10);
-    }
-
-    .lg\:ml-72 {
-      margin-left: calc(var(--spacing) * 72);
+    .lg\:mt-24 {
+      margin-top: calc(var(--spacing) * 24);
     }
 
     .lg\:block {
@@ -3027,16 +4102,16 @@
       display: none;
     }
 
-    .lg\:w-72 {
-      width: calc(var(--spacing) * 72);
+    .lg\:h-\[calc\(100vh-3\.5rem\)\] {
+      height: calc(100vh - 3.5rem);
     }
 
-    .lg\:max-w-md {
-      max-width: var(--container-md);
+    .lg\:h-\[calc\(100vh-7rem\)\] {
+      height: calc(100vh - 7rem);
     }
 
-    .lg\:flex-auto {
-      flex: auto;
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
     .lg\:grid-cols-3 {
@@ -3047,31 +4122,24 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .lg\:overflow-y-auto {
-      overflow-y: auto;
-    }
-
-    .lg\:border-r {
-      border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
+    .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 18rem minmax(0, 1fr);
     }
 
-    .lg\:border-zinc-900\/10 {
-      border-color: #18181b1a;
+    .lg\:self-start {
+      align-self: flex-start;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .lg\:border-zinc-900\/10 {
-        border-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
-      }
+    .lg\:overflow-y-auto {
+      overflow-y: auto;
     }
 
-    .lg\:bg-white {
-      background-color: var(--color-white);
+    .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
+      background-color: var(--clarify-theme-tokens-colors-background);
     }
 
-    .lg\:px-6 {
-      padding-inline: calc(var(--spacing) * 6);
+    .lg\:px-5 {
+      padding-inline: calc(var(--spacing) * 5);
     }
 
     .lg\:px-8 {
@@ -3082,8 +4150,12 @@
       padding-block: 15vh;
     }
 
-    .lg\:pt-4 {
-      padding-top: calc(var(--spacing) * 4);
+    .lg\:pt-6 {
+      padding-top: calc(var(--spacing) * 6);
+    }
+
+    .lg\:pt-28 {
+      padding-top: calc(var(--spacing) * 28);
     }
 
     .lg\:pb-8 {
@@ -3100,41 +4172,59 @@
       top: calc(var(--spacing) * 24);
     }
 
-    .xl\:left-80 {
-      left: calc(var(--spacing) * 80);
+    .xl\:max-w-none {
+      max-width: none;
     }
 
-    .xl\:ml-80 {
-      margin-left: calc(var(--spacing) * 80);
+    .xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    .xl\:w-80 {
-      width: calc(var(--spacing) * 80);
+    .xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .xl\:max-w-\[56rem\] {
-      max-width: 56rem;
+    .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 20rem minmax(0, 1fr);
     }
 
-    .xl\:max-w-none {
-      max-width: none;
+    .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     }
 
-    .xl\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    .xl\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
     }
-  }
 
-  @media (min-width: 96rem) {
-    .\32 xl\:max-w-\[64rem\] {
-      max-width: 64rem;
+    .xl\:px-10 {
+      padding-inline: calc(var(--spacing) * 10);
     }
+  }
 
+  @media (min-width: 96rem) {
     .\32 xl\:\[--width\:--spacing\(10\)\] {
       --width: calc(var(--spacing) * 10);
     }
   }
 
+  @container (min-width: 50rem) {
+    .\@3xl\:block {
+      display: block;
+    }
+
+    .\@3xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .\@3xl\:justify-end {
+      justify-content: flex-end;
+    }
+
+    .\@3xl\:text-right {
+      text-align: right;
+    }
+  }
+
   .dark\:block:where(.dark, .dark *) {
     display: block;
   }
@@ -3153,6 +4243,16 @@
     }
   }
 
+  :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
+    border-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   .dark\:border-amber-400\/30:where(.dark, .dark *) {
     border-color: #fcbb004d;
   }
@@ -3183,16 +4283,6 @@
     }
   }
 
-  .dark\:border-emerald-500\/30:where(.dark, .dark *) {
-    border-color: #00bb7f4d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-emerald-500\/30:where(.dark, .dark *) {
-      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
-    }
-  }
-
   .dark\:border-red-500\/30:where(.dark, .dark *) {
     border-color: #fb2c364d;
   }
@@ -3257,6 +4347,16 @@
     }
   }
 
+  .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
+    background-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
+    }
+  }
+
   .dark\:bg-amber-400\/5:where(.dark, .dark *) {
     background-color: #fcbb000d;
   }
@@ -3267,23 +4367,23 @@
     }
   }
 
-  .dark\:bg-amber-500\/10:where(.dark, .dark *) {
-    background-color: #f99c001a;
+  .dark\:bg-amber-400\/20:where(.dark, .dark *) {
+    background-color: #fcbb0033;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-amber-500\/10:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
+    .dark\:bg-amber-400\/20:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
     }
   }
 
-  .dark\:bg-black\/40:where(.dark, .dark *) {
-    background-color: #0006;
+  .dark\:bg-amber-500\/10:where(.dark, .dark *) {
+    background-color: #f99c001a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-black\/40:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    .dark\:bg-amber-500\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
 
@@ -3297,27 +4397,23 @@
     }
   }
 
-  .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
-    background-color: #00d2941a;
+  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
+    background-color: #00d29426;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
+    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
     }
   }
 
-  .dark\:bg-emerald-500:where(.dark, .dark *) {
-    background-color: var(--color-emerald-500);
-  }
-
-  .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
-    background-color: #00bb7f0d;
+  .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
+    background-color: #00d29433;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
+    .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
     }
   }
 
@@ -3351,6 +4447,16 @@
     }
   }
 
+  .dark\:bg-rose-400\/20:where(.dark, .dark *) {
+    background-color: #ff667f33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-rose-400\/20:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
+    }
+  }
+
   .dark\:bg-sky-400\/5:where(.dark, .dark *) {
     background-color: #00bcfe0d;
   }
@@ -3361,10 +4467,24 @@
     }
   }
 
+  .dark\:bg-sky-400\/20:where(.dark, .dark *) {
+    background-color: #00bcfe33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-sky-400\/20:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
+    }
+  }
+
   .dark\:bg-transparent:where(.dark, .dark *) {
     background-color: #0000;
   }
 
+  .dark\:bg-white:where(.dark, .dark *) {
+    background-color: var(--color-white);
+  }
+
   .dark\:bg-white\/1:where(.dark, .dark *) {
     background-color: #ffffff03;
   }
@@ -3385,23 +4505,23 @@
     }
   }
 
-  .dark\:bg-white\/5:where(.dark, .dark *) {
-    background-color: #ffffff0d;
+  .dark\:bg-white\/4:where(.dark, .dark *) {
+    background-color: #ffffff0a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/5:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    .dark\:bg-white\/4:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
     }
   }
 
-  .dark\:bg-white\/7\.5:where(.dark, .dark *) {
-    background-color: #ffffff13;
+  .dark\:bg-white\/5:where(.dark, .dark *) {
+    background-color: #ffffff0d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/7\.5:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
+    .dark\:bg-white\/5:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
     }
   }
 
@@ -3415,6 +4535,16 @@
     }
   }
 
+  .dark\:bg-white\/12:where(.dark, .dark *) {
+    background-color: #ffffff1f;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/12:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
+    }
+  }
+
   .dark\:bg-zinc-400\/10:where(.dark, .dark *) {
     background-color: #9f9fa91a;
   }
@@ -3425,6 +4555,16 @@
     }
   }
 
+  .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
+    background-color: #9f9fa933;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
+    }
+  }
+
   .dark\:bg-zinc-600:where(.dark, .dark *) {
     background-color: var(--color-zinc-600);
   }
@@ -3443,16 +4583,6 @@
     }
   }
 
-  .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
-    background-color: #27272a80;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-900:where(.dark, .dark *) {
     background-color: var(--color-zinc-900);
   }
@@ -3467,6 +4597,26 @@
     }
   }
 
+  .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
+    background-color: #18181b99;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
+    }
+  }
+
+  .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
+    background-color: #18181bcc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
+    }
+  }
+
   .dark\:bg-zinc-950:where(.dark, .dark *) {
     background-color: var(--color-zinc-950);
   }
@@ -3481,14 +4631,14 @@
     }
   }
 
-  .dark\:from-\[\#36b49f\]\/30:where(.dark, .dark *) {
-    --tw-gradient-from: oklab(69.6777% -.112486 .00150466 / .3);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  .dark\:bg-zinc-950\/95:where(.dark, .dark *) {
+    background-color: #09090bf2;
   }
 
-  .dark\:to-\[\#DBFF75\]\/30:where(.dark, .dark *) {
-    --tw-gradient-to: oklab(94.6982% -.0890822 .143295 / .3);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-zinc-950\/95:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-zinc-950) 95%, transparent);
+    }
   }
 
   .dark\:mask-\[linear-gradient\(white\,transparent\)\]:where(.dark, .dark *) {
@@ -3496,14 +4646,8 @@
     mask-image: linear-gradient(#fff, #0000);
   }
 
-  .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
-    fill: #a4f4cf33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
-      fill: color-mix(in oklab, var(--color-emerald-200) 20%, transparent);
-    }
+  .dark\:fill-\(--clarify-ui-accent-background\):where(.dark, .dark *) {
+    fill: var(--clarify-ui-accent-background);
   }
 
   .dark\:fill-white:where(.dark, .dark *) {
@@ -3520,8 +4664,8 @@
     }
   }
 
-  .dark\:stroke-emerald-200:where(.dark, .dark *) {
-    stroke: var(--color-emerald-200);
+  .dark\:stroke-\(--clarify-ui-accent-text\):where(.dark, .dark *) {
+    stroke: var(--clarify-ui-accent-text);
   }
 
   .dark\:stroke-white:where(.dark, .dark *) {
@@ -3546,6 +4690,10 @@
     stroke: var(--color-zinc-600);
   }
 
+  .dark\:text-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *) {
+    color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .dark\:text-amber-100:where(.dark, .dark *) {
     color: var(--color-amber-100);
   }
@@ -3554,6 +4702,10 @@
     color: var(--color-amber-200);
   }
 
+  .dark\:text-amber-300:where(.dark, .dark *) {
+    color: var(--color-amber-300);
+  }
+
   .dark\:text-amber-400:where(.dark, .dark *) {
     color: var(--color-amber-400);
   }
@@ -3562,8 +4714,8 @@
     color: var(--color-emerald-100);
   }
 
-  .dark\:text-emerald-200:where(.dark, .dark *) {
-    color: var(--color-emerald-200);
+  .dark\:text-emerald-300:where(.dark, .dark *) {
+    color: var(--color-emerald-300);
   }
 
   .dark\:text-emerald-400:where(.dark, .dark *) {
@@ -3582,6 +4734,10 @@
     color: var(--color-rose-100);
   }
 
+  .dark\:text-rose-300:where(.dark, .dark *) {
+    color: var(--color-rose-300);
+  }
+
   .dark\:text-rose-400:where(.dark, .dark *) {
     color: var(--color-rose-400);
   }
@@ -3594,6 +4750,10 @@
     color: var(--color-sky-100);
   }
 
+  .dark\:text-sky-300:where(.dark, .dark *) {
+    color: var(--color-sky-300);
+  }
+
   .dark\:text-sky-400:where(.dark, .dark *) {
     color: var(--color-sky-400);
   }
@@ -3606,6 +4766,10 @@
     color: var(--color-white);
   }
 
+  .dark\:text-zinc-100:where(.dark, .dark *) {
+    color: var(--color-zinc-100);
+  }
+
   .dark\:text-zinc-200:where(.dark, .dark *) {
     color: var(--color-zinc-200);
   }
@@ -3622,12 +4786,13 @@
     color: var(--color-zinc-500);
   }
 
-  .dark\:text-zinc-700:where(.dark, .dark *) {
-    color: var(--color-zinc-700);
+  .dark\:opacity-55:where(.dark, .dark *) {
+    opacity: .55;
   }
 
-  .dark\:opacity-100:where(.dark, .dark *) {
-    opacity: 1;
+  .dark\:shadow-none:where(.dark, .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-1:where(.dark, .dark *) {
@@ -3635,23 +4800,23 @@
     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-amber-400\/30:where(.dark, .dark *) {
-    --tw-ring-color: #fcbb004d;
+  .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:ring-amber-400\/30:where(.dark, .dark *) {
-      --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
+    .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 20%, transparent);
     }
   }
 
-  .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
-    --tw-ring-color: #00d29433;
+  .dark\:ring-amber-400\/30:where(.dark, .dark *) {
+    --tw-ring-color: #fcbb004d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
+    .dark\:ring-amber-400\/30:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
     }
   }
 
@@ -3665,16 +4830,6 @@
     }
   }
 
-  .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
-    --tw-ring-color: #00bb7f4d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
-    }
-  }
-
   .dark\:ring-rose-500\/20:where(.dark, .dark *) {
     --tw-ring-color: #ff235733;
   }
@@ -3749,8 +4904,8 @@
     --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
   }
 
-  .dark\:\[--tw-prose-links-hover\:var\(--color-emerald-300\)\]:where(.dark, .dark *) {
-    --tw-prose-links-hover: var(--color-emerald-300);
+  .dark\:\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\]:where(.dark, .dark *) {
+    --tw-prose-links-hover: var(--clarify-ui-accent-text);
   }
 
   .dark\:\[--tw-prose-links\:var\(--color-white\)\]:where(.dark, .dark *) {
@@ -3765,19 +4920,35 @@
     .dark\:group-hover\/anchor\:stroke-white:where(.dark, .dark *):is(:where(.group\/anchor):hover *) {
       stroke: var(--color-white);
     }
+  }
+
+  .dark\:placeholder\:text-zinc-500:where(.dark, .dark *)::placeholder {
+    color: var(--color-zinc-500);
+  }
 
-    .dark\:hover\:border-emerald-400\/40:where(.dark, .dark *):hover {
-      border-color: #00d29466;
+  @media (hover: hover) {
+    .dark\:hover\:border-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *):hover {
+      border-color: var(--clarify-theme-tokens-colors-primary);
+    }
+
+    .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
+      border-color: #ffffff26;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:border-emerald-400\/40:where(.dark, .dark *):hover {
-        border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
+      .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
+        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
       }
     }
 
-    .dark\:hover\:bg-emerald-400:where(.dark, .dark *):hover {
-      background-color: var(--color-emerald-400);
+    .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
+      background-color: #ffffff06;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
+        background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent);
+      }
     }
 
     .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
@@ -3808,12 +4979,12 @@
       background-color: var(--color-zinc-800);
     }
 
-    .dark\:hover\:text-emerald-300:where(.dark, .dark *):hover {
-      color: var(--color-emerald-300);
+    .dark\:hover\:bg-zinc-900:where(.dark, .dark *):hover {
+      background-color: var(--color-zinc-900);
     }
 
-    .dark\:hover\:text-emerald-500:where(.dark, .dark *):hover {
-      color: var(--color-emerald-500);
+    .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
+      color: var(--color-emerald-200);
     }
 
     .dark\:hover\:text-white:where(.dark, .dark *):hover {
@@ -3824,18 +4995,8 @@
       color: var(--color-zinc-300);
     }
 
-    .dark\:hover\:ring-emerald-300:where(.dark, .dark *):hover {
-      --tw-ring-color: var(--color-emerald-300);
-    }
-
-    .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
-      --tw-ring-color: #fff3;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
-        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
+    .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
+      opacity: .8;
     }
 
     .dark\:hover\:ring-zinc-600:where(.dark, .dark *):hover {
@@ -3843,16 +5004,24 @@
     }
   }
 
-  .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
-    background-color: #27272a80;
+  .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
+    border-color: #fff3;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
-      background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
+    .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
+      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
 
+  .dark\:focus\:bg-zinc-950:where(.dark, .dark *):focus {
+    background-color: var(--color-zinc-950);
+  }
+
+  .dark\:focus-visible\:ring-offset-zinc-950:where(.dark, .dark *):focus-visible {
+    --tw-ring-offset-color: var(--color-zinc-950);
+  }
+
   .dark\:data-focus\:bg-white\/10:where(.dark, .dark *)[data-focus] {
     background-color: #ffffff1a;
   }
@@ -3863,8 +5032,22 @@
     }
   }
 
-  .dark\:data-focus\:text-white:where(.dark, .dark *)[data-focus] {
-    color: var(--color-white);
+  .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
+    border-color: #ffffff26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
+      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
+  .dark\:data-open\:bg-zinc-900:where(.dark, .dark *)[data-open] {
+    background-color: var(--color-zinc-900);
+  }
+
+  .dark\:data-selected\:text-emerald-300:where(.dark, .dark *)[data-selected] {
+    color: var(--color-emerald-300);
   }
 
   @media (min-width: 48rem) {
@@ -3880,16 +5063,6 @@
   }
 
   @media (min-width: 64rem) {
-    .lg\:dark\:border-white\/10:where(.dark, .dark *) {
-      border-color: #ffffff1a;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .lg\:dark\:border-white\/10:where(.dark, .dark *) {
-        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      }
-    }
-
     .lg\:dark\:bg-zinc-950:where(.dark, .dark *) {
       background-color: var(--color-zinc-950);
     }
@@ -3917,38 +5090,16 @@
     display: none;
   }
 
-  html :where(.\[html_\:where\(\&\>\*\)\]\:mx-auto > *) {
-    margin-inline: auto;
-  }
-
   html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
     width: 100%;
   }
 
-  html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-3xl > *) {
-    max-width: var(--container-3xl);
-  }
-
-  @media (min-width: 80rem) {
-    html :where(.xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[56rem\] > *) {
-      max-width: 56rem;
-    }
-  }
-
-  @media (min-width: 96rem) {
-    html :where(.\32 xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[64rem\] > *) {
-      max-width: 64rem;
-    }
-  }
-
-  html :where(.\[html_\:where\(\&\>\.not-prose\)\]\:max-w-5xl > .not-prose) {
-    max-width: var(--container-5xl);
+  html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-full > *) {
+    max-width: 100%;
   }
 
-  @media (min-width: 96rem) {
-    html :where(.\32 xl\:\[html_\:where\(\&\>\.not-prose\)\]\:max-w-\[76rem\] > .not-prose) {
-      max-width: 76rem;
-    }
+  html :where(.\[html_\:where\(\&\>\*\)\]\:min-w-0 > *) {
+    min-width: 0;
   }
 }
 
@@ -4013,57 +5164,11 @@
   initial-value: solid;
 }
 
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-gradient-via-stops {
+@property --tw-leading {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
@@ -4297,4 +5402,10 @@
   inherits: false;
   initial-value: 1;
 }
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
 /*$vite$:1*/