@clarify-labs/renderer 0.10.2 → 0.11.0

package/output/renderer.css

@@ -55,6 +55,7 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
@@ -82,9 +83,6 @@
     --color-amber-600: oklch(66.6% .179 58.318);
     --color-amber-700: oklch(55.5% .163 48.998);
     --color-amber-900: oklch(41.4% .112 45.904);
-    --color-amber-950: oklch(27.9% .077 45.635);
-    --color-yellow-400: oklch(85.2% .199 91.936);
-    --color-green-400: oklch(79.2% .209 151.711);
     --color-emerald-50: oklch(97.9% .021 166.113);
     --color-emerald-100: oklch(95% .052 163.051);
     --color-emerald-200: oklch(90.5% .093 164.15);
@@ -93,9 +91,7 @@
     --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);
     --color-sky-100: oklch(95.1% .026 236.824);
     --color-sky-200: oklch(90.1% .058 230.902);
@@ -105,7 +101,6 @@
     --color-sky-600: oklch(58.8% .158 241.966);
     --color-sky-700: oklch(50% .134 242.749);
     --color-sky-900: oklch(39.1% .09 240.876);
-    --color-sky-950: oklch(29.3% .066 243.157);
     --color-violet-200: oklch(89.4% .057 293.283);
     --color-violet-300: oklch(81.1% .111 293.571);
     --color-violet-400: oklch(70.2% .183 293.541);
@@ -122,7 +117,6 @@
     --color-rose-600: oklch(58.6% .253 17.585);
     --color-rose-700: oklch(51.4% .222 16.935);
     --color-rose-900: oklch(41% .159 10.272);
-    --color-rose-950: oklch(27.1% .105 12.094);
     --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% .001 286.375);
     --color-zinc-200: oklch(92% .004 286.32);
@@ -143,6 +137,7 @@
     --container-3xl: 50rem;
     --container-4xl: 56rem;
     --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
     --text-sm: .875rem;
@@ -156,6 +151,7 @@
     --text-3xl--line-height: 2.25rem;
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -164,6 +160,7 @@
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --tracking-widest: .1em;
+    --radius-sm: .25rem;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
@@ -629,36 +626,9 @@
   }
 
   :root, .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 88%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 86%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1a;
     --clarify-code-text: var(--color-zinc-100);
     --clarify-code-control-text: var(--color-zinc-300);
@@ -687,6 +657,13 @@
   }
 
   :root, .clarify-app {
+    --clarify-code-property: #0369a1;
+    --clarify-code-string: #047857;
+    --clarify-code-number: #a16207;
+    --clarify-code-success: #047857;
+    --clarify-code-danger: #be123c;
+    --clarify-code-danger-border: #fb718547;
+    --clarify-code-danger-background: #fb71851a;
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
@@ -813,7 +790,7 @@
     --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-tight-letter-spacing: 0;
     --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);
@@ -945,37 +922,17 @@
   }
 
   .dark, .dark .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 94%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 90%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1f;
+    --clarify-code-property: #7dd3fc;
+    --clarify-code-string: #6ee7b7;
+    --clarify-code-number: #fcd34d;
+    --clarify-code-success: #6ee7b7;
+    --clarify-code-danger: #fda4af;
+    --clarify-code-danger-border: #fb718559;
+    --clarify-code-danger-background: #fb71851f;
     --clarify-http-method-get-background: #00d2944d;
   }
 
@@ -1044,6 +1001,20 @@
     --clarify-http-method-default-text: var(--color-zinc-100);
   }
 
+  .clarify-api-response {
+    --clarify-code-background: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-surface: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-header-background: var(--clarify-ui-subtle-background);
+    --clarify-code-border: var(--clarify-theme-tokens-colors-border);
+    --clarify-code-text: var(--clarify-ui-text-strong);
+    --clarify-code-control-text: var(--clarify-ui-text);
+    --clarify-code-muted: var(--clarify-ui-text-soft);
+    --clarify-code-faint: var(--clarify-ui-text-faint);
+    --clarify-code-control-background: var(--clarify-ui-subtle-background);
+    --clarify-code-control-background-hover: var(--clarify-ui-hover-background);
+    --clarify-code-control-background-active: var(--clarify-ui-active-background);
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -1192,38 +1163,148 @@
     color: var(--clarify-ui-text-strong);
   }
 
+  .clarify-ui-top-link:hover {
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-ui-top-link-active {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-active-background);
+  }
+
   .clarify-content-tab:hover, .clarify-content-tab:focus-visible {
     background: var(--clarify-ui-tab-hover-background);
   }
 
-  .clarify-api-example-code, .clarify-api-example {
+  .clarify-product-tabs-nav {
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    overscroll-behavior-inline: contain;
+    scroll-padding-inline: 3.5rem;
+  }
+
+  .clarify-product-tabs-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .clarify-product-tabs-frame:before, .clarify-product-tabs-frame:after {
+    content: "";
+    z-index: 1;
+    pointer-events: none;
+    opacity: 1;
+    width: 3.5rem;
+    transition: opacity .15s;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .clarify-product-tabs-frame:before {
+    background: linear-gradient(to right, var(--clarify-theme-tokens-colors-surface) 35%, transparent);
+    left: 0;
+  }
+
+  .clarify-product-tabs-frame:after {
+    background: linear-gradient(to left, var(--clarify-theme-tokens-colors-surface) 35%, transparent);
+    right: 0;
+  }
+
+  .clarify-product-tabs-frame[data-at-start]:before, .clarify-product-tabs-frame[data-at-end]:after {
+    opacity: 0;
+  }
+
+  .clarify-product-tabs-scroll {
+    z-index: 2;
+    border: 1px solid var(--clarify-theme-tokens-colors-border);
+    width: 2rem;
+    height: 2rem;
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-theme-tokens-colors-surface);
+    box-shadow: 0 2px 8px var(--clarify-theme-tokens-colors-foreground);
+    border-radius: 9999px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    top: 50%;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-product-tabs-scroll {
+      box-shadow: 0 2px 8px color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 12%, transparent);
+    }
+  }
+
+  .clarify-product-tabs-scroll {
+    transition: opacity .15s, transform .15s, background .15s;
+    transform: translateY(-50%);
+  }
+
+  .clarify-product-tabs-scroll:hover, .clarify-product-tabs-scroll:focus-visible {
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-product-tabs-scroll:focus-visible {
+    outline: 2px solid var(--clarify-theme-tokens-colors-primary);
+    outline-offset: 2px;
+  }
+
+  .clarify-product-tabs-scroll-start {
+    left: .75rem;
+  }
+
+  .clarify-product-tabs-scroll-end {
+    right: .75rem;
+  }
+
+  .clarify-product-tabs-frame[data-at-start] .clarify-product-tabs-scroll-start, .clarify-product-tabs-frame[data-at-end] .clarify-product-tabs-scroll-end {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .clarify-product-tabs-nav {
+      scroll-behavior: auto;
+    }
+  }
+
+  .clarify-openai-example-code, .clarify-openai-example {
     container-type: inline-size;
   }
 
   @container (max-width: 26rem) {
-    .clarify-api-example-header {
+    .clarify-openai-example-header {
       flex-direction: column;
       align-items: stretch;
       gap: .25rem;
     }
 
-    .clarify-api-example-header > h3 {
+    .clarify-openai-example-header > h3 {
       margin-right: 0;
     }
 
-    .clarify-api-example-header-controls {
+    .clarify-openai-example-header-controls {
       width: 100%;
       margin-left: 0;
     }
 
-    .clarify-api-code-toolbar {
+    .clarify-openai-code-toolbar {
       flex-direction: column;
       align-items: stretch;
     }
 
-    .clarify-api-code-toolbar > button {
+    .clarify-openai-code-toolbar > button {
       align-self: flex-end;
     }
+
+    .clarify-openai-code-toolbar.clarify-openai-code-toolbar-inline {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .clarify-openai-code-toolbar.clarify-openai-code-toolbar-inline > button {
+      align-self: auto;
+    }
   }
 
   .clarify-brand-title, .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright, .clarify-search-button {
@@ -1263,11 +1344,12 @@
   }
 
   .clarify-navigation-group-title {
-    color: var(--clarify-ui-text-strong);
-    font-size: var(--clarify-ui-menu-font-size);
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--clarify-ui-description-font-size);
     line-height: var(--clarify-ui-menu-line-height);
-    letter-spacing: var(--clarify-ui-tight-letter-spacing);
-    font-weight: 600;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+    font-weight: 700;
   }
 
   .clarify-navigation-group-title-icon {
@@ -1282,6 +1364,56 @@
     font-weight: 500;
   }
 
+  .clarify-navigation-link:hover {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-navigation-link[aria-current="page"] {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-subtle-background);
+    font-weight: 600;
+  }
+
+  .clarify-navigation-active-marker {
+    background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .clarify-navigation-item-icon, .clarify-navigation-chevron, .clarify-navigation-branch-count {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  .clarify-navigation-branch-trigger {
+    color: var(--clarify-ui-text-soft);
+    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-branch-trigger:hover {
+    color: var(--clarify-ui-text-strong);
+    background: var(--clarify-ui-hover-background);
+  }
+
+  .clarify-navigation-branch-trigger[data-active="true"] {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .clarify-navigation-branch-trigger[data-active="true"] .clarify-navigation-chevron, .clarify-navigation-branch-trigger[data-active="true"] .clarify-navigation-item-icon {
+    color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .clarify-navigation-branch-count {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+    font-weight: 500;
+  }
+
+  .clarify-navigation-section-highlight {
+    background: var(--clarify-ui-subtle-background);
+  }
+
   .clarify-navigation-anchor-link {
     color: var(--clarify-ui-text-soft);
     font-size: var(--clarify-ui-navigation-section-font-size);
@@ -1289,7 +1421,7 @@
     font-weight: normal;
   }
 
-  .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
+  .clarify-navigation-anchor-link:hover {
     color: var(--clarify-ui-text-strong);
   }
 
@@ -1306,11 +1438,7 @@
     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 {
+  .clarify-tag, .clarify-code-panel-tag, .clarify-openai-example-status, .clarify-page-navigation-label {
     font-size: var(--clarify-ui-description-font-size);
     line-height: var(--clarify-ui-description-line-height);
   }
@@ -1531,6 +1659,10 @@
     visibility: collapse;
   }
 
+  .invisible {
+    visibility: hidden;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -1579,8 +1711,16 @@
     inset-inline: calc(var(--spacing) * 2);
   }
 
-  .inset-y-0 {
-    inset-block: 0;
+  .inset-x-2\.5 {
+    inset-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .inset-x-3 {
+    inset-inline: calc(var(--spacing) * 3);
+  }
+
+  .inset-y-1\.5 {
+    inset-block: calc(var(--spacing) * 1.5);
   }
 
   .top-0 {
@@ -1599,10 +1739,18 @@
     top: calc(var(--spacing) * 3.5);
   }
 
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
 
+  .top-full {
+    top: 100%;
+  }
+
   .top-px {
     top: 1px;
   }
@@ -1623,6 +1771,14 @@
     right: calc(var(--spacing) * 4);
   }
 
+  .right-auto {
+    right: auto;
+  }
+
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
+
   .bottom-0 {
     bottom: 0;
   }
@@ -1631,10 +1787,22 @@
     bottom: calc(var(--spacing) * 2);
   }
 
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
 
+  .bottom-auto {
+    bottom: auto;
+  }
+
+  .-left-3\.5 {
+    left: calc(var(--spacing) * -3.5);
+  }
+
   .left-0 {
     left: 0;
   }
@@ -1643,10 +1811,6 @@
     left: 50%;
   }
 
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -1671,6 +1835,22 @@
     z-index: 50;
   }
 
+  .z-60 {
+    z-index: 60;
+  }
+
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+
   .container {
     width: 100%;
   }
@@ -1709,10 +1889,6 @@
     margin: 0;
   }
 
-  .-mx-2 {
-    margin-inline: calc(var(--spacing) * -2);
-  }
-
   .mx-0 {
     margin-inline: 0;
   }
@@ -1733,10 +1909,18 @@
     margin-block: calc(var(--spacing) * -1);
   }
 
+  .my-1 {
+    margin-block: var(--spacing);
+  }
+
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
 
+  .my-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+
   .my-10 {
     margin-block: calc(var(--spacing) * 10);
   }
@@ -2077,10 +2261,18 @@
     margin-top: var(--spacing);
   }
 
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
+
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
 
+  .mt-2\.5 {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
+
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -2101,8 +2293,12 @@
     margin-top: calc(var(--spacing) * 8);
   }
 
-  .mt-16 {
-    margin-top: calc(var(--spacing) * 16);
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
   }
 
   .-mr-0\.5 {
@@ -2117,6 +2313,10 @@
     margin-right: calc(var(--spacing) * -2);
   }
 
+  .mr-1 {
+    margin-right: var(--spacing);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -2129,8 +2329,8 @@
     margin-bottom: -1px;
   }
 
-  .mb-1 {
-    margin-bottom: var(--spacing);
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
   }
 
   .mb-2 {
@@ -2145,6 +2345,10 @@
     margin-bottom: calc(var(--spacing) * 6);
   }
 
+  .mb-7 {
+    margin-bottom: calc(var(--spacing) * 7);
+  }
+
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -2173,6 +2377,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
+
   .ml-3 {
     margin-left: calc(var(--spacing) * 3);
   }
@@ -2230,9 +2438,9 @@
     height: calc(var(--spacing) * 2);
   }
 
-  .size-3 {
-    width: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 3);
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
   }
 
   .size-3\.5 {
@@ -2245,6 +2453,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -2265,6 +2478,16 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
+
   .size-12 {
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
@@ -2322,10 +2545,22 @@
     height: calc(var(--spacing) * 14);
   }
 
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
+
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
 
+  .h-\[min\(46rem\,calc\(100dvh-1\.5rem\)\)\] {
+    height: min(46rem, 100dvh - 1.5rem);
+  }
+
+  .h-auto {
+    height: auto;
+  }
+
   .h-full {
     height: 100%;
   }
@@ -2350,6 +2585,14 @@
     max-height: calc(var(--spacing) * 128);
   }
 
+  .max-h-\[calc\(100dvh-5rem\)\] {
+    max-height: calc(100dvh - 5rem);
+  }
+
+  .max-h-full {
+    max-height: 100%;
+  }
+
   .min-h-\(--clarify-code-header-min-height\) {
     min-height: var(--clarify-code-header-min-height);
   }
@@ -2362,6 +2605,10 @@
     min-height: 0;
   }
 
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
+
   .min-h-7 {
     min-height: calc(var(--spacing) * 7);
   }
@@ -2374,12 +2621,28 @@
     min-height: calc(var(--spacing) * 9);
   }
 
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
 
-  .min-h-12 {
-    min-height: calc(var(--spacing) * 12);
+  .min-h-44 {
+    min-height: calc(var(--spacing) * 44);
+  }
+
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
+
+  .min-h-72 {
+    min-height: calc(var(--spacing) * 72);
+  }
+
+  .min-h-96 {
+    min-height: calc(var(--spacing) * 96);
   }
 
   .min-h-full {
@@ -2394,10 +2657,6 @@
     width: 100% !important;
   }
 
-  .w-\(--clarify-schema-row-nested-width\) {
-    width: var(--clarify-schema-row-nested-width);
-  }
-
   .w-\(--clarify-theme-editor-width\) {
     width: var(--clarify-theme-editor-width);
   }
@@ -2426,6 +2685,10 @@
     width: 66.6667%;
   }
 
+  .w-2\/5 {
+    width: 40%;
+  }
+
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -2562,6 +2825,10 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
   .max-w-32 {
     max-width: calc(var(--spacing) * 32);
   }
@@ -2570,8 +2837,20 @@
     max-width: calc(var(--spacing) * 48);
   }
 
-  .max-w-\[82\%\] {
-    max-width: 82%;
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
+
+  .max-w-80 {
+    max-width: calc(var(--spacing) * 80);
+  }
+
+  .max-w-\[82\%\] {
+    max-width: 82%;
+  }
+
+  .max-w-\[calc\(100vw-5rem\)\] {
+    max-width: calc(100vw - 5rem);
   }
 
   .max-w-full {
@@ -2602,6 +2881,14 @@
     min-width: calc(var(--spacing) * 28);
   }
 
+  .min-w-96 {
+    min-width: calc(var(--spacing) * 96);
+  }
+
+  .min-w-max {
+    min-width: max-content;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -2614,6 +2901,10 @@
     flex: none;
   }
 
+  .shrink {
+    flex-shrink: 1;
+  }
+
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -2622,6 +2913,14 @@
     flex-grow: 1;
   }
 
+  .table-fixed {
+    table-layout: fixed;
+  }
+
+  .border-collapse {
+    border-collapse: collapse;
+  }
+
   .origin-top {
     transform-origin: top;
   }
@@ -2645,11 +2944,20 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    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);
   }
 
+  .-rotate-90 {
+    rotate: -90deg;
+  }
+
   .rotate-180 {
     rotate: 180deg;
   }
@@ -2683,14 +2991,30 @@
     cursor: default;
   }
 
+  .cursor-help {
+    cursor: help;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
 
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
   .resize {
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
+  .resize-y {
+    resize: vertical;
+  }
+
   .scroll-mt-24 {
     scroll-margin-top: calc(var(--spacing) * 24);
   }
@@ -2719,20 +3043,52 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .grid-cols-\[1fr_minmax\(0\,2fr\)_1fr\] {
+    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
+  }
+
+  .grid-cols-\[2rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 2rem minmax(0, 1fr);
+  }
+
+  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .grid-cols-\[minmax\(5rem\,auto\)_1fr\] {
+    grid-template-columns: minmax(5rem, auto) 1fr;
+  }
+
+  .grid-rows-\[auto_minmax\(11rem\,1fr\)\] {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
+  .grid-rows-\[minmax\(11rem\,1fr\)\] {
+    grid-template-rows: minmax(11rem, 1fr);
+  }
+
   .flex-col {
     flex-direction: column;
   }
 
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
 
-  .items-center {
-    align-items: center;
+  .place-items-center {
+    place-items: center;
   }
 
-  .items-end {
-    align-items: flex-end;
+  .items-center {
+    align-items: center;
   }
 
   .items-start {
@@ -2763,6 +3119,10 @@
     gap: 0;
   }
 
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
   .gap-1 {
     gap: var(--spacing);
   }
@@ -2783,6 +3143,10 @@
     gap: calc(var(--spacing) * 3);
   }
 
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
+
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -2795,14 +3159,16 @@
     gap: calc(var(--spacing) * 6);
   }
 
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-
   .gap-px {
     gap: 1px;
   }
 
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -2833,6 +3199,10 @@
     margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -2969,13 +3339,17 @@
     border-radius: var(--radius-md);
   }
 
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
 
-  .rounded-t-md {
-    border-top-left-radius: var(--radius-md);
-    border-top-right-radius: var(--radius-md);
+  .rounded-r-\(--clarify-theme-tokens-radius-lg\) {
+    border-top-right-radius: var(--clarify-theme-tokens-radius-lg);
+    border-bottom-right-radius: var(--clarify-theme-tokens-radius-lg);
   }
 
   .border {
@@ -3008,20 +3382,44 @@
     border-right-width: 1px;
   }
 
+  .\!border-b-0 {
+    border-bottom-style: var(--tw-border-style) !important;
+    border-bottom-width: 0 !important;
+  }
+
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
 
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
 
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
+
   .border-\(--clarify-code-border\) {
     border-color: var(--clarify-code-border);
   }
 
+  .border-\(--clarify-code-danger-border\) {
+    border-color: var(--clarify-code-danger-border);
+  }
+
   .border-\(--clarify-error-accent-text\) {
     border-color: var(--clarify-error-accent-text);
   }
@@ -3030,6 +3428,10 @@
     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);
   }
@@ -3048,6 +3450,10 @@
     }
   }
 
+  .border-current {
+    border-color: currentColor;
+  }
+
   .border-emerald-400\/70 {
     border-color: #00d294b3;
   }
@@ -3096,6 +3502,16 @@
     border-color: #0000;
   }
 
+  .border-white\/20 {
+    border-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/20 {
+      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
   .border-zinc-500\/20 {
     border-color: #71717b33;
   }
@@ -3122,6 +3538,14 @@
     background-color: var(--clarify-code-control-background);
   }
 
+  .bg-\(--clarify-code-danger\) {
+    background-color: var(--clarify-code-danger);
+  }
+
+  .bg-\(--clarify-code-danger-background\) {
+    background-color: var(--clarify-code-danger-background);
+  }
+
   .bg-\(--clarify-code-faint\) {
     background-color: var(--clarify-code-faint);
   }
@@ -3130,6 +3554,10 @@
     background-color: var(--clarify-code-header-background);
   }
 
+  .bg-\(--clarify-code-success\) {
+    background-color: var(--clarify-code-success);
+  }
+
   .bg-\(--clarify-code-surface\) {
     background-color: var(--clarify-code-surface);
   }
@@ -3180,6 +3608,16 @@
     }
   }
 
+  .bg-\(--clarify-theme-tokens-colors-background\)\/90 {
+    background-color: var(--clarify-theme-tokens-colors-background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--clarify-theme-tokens-colors-background\)\/90 {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-background) 90%, transparent);
+    }
+  }
+
   .bg-\(--clarify-theme-tokens-colors-border\) {
     background-color: var(--clarify-theme-tokens-colors-border);
   }
@@ -3224,6 +3662,10 @@
     background-color: var(--clarify-ui-active-background);
   }
 
+  .bg-\(--clarify-ui-overlay-background\) {
+    background-color: var(--clarify-ui-overlay-background);
+  }
+
   .bg-\(--clarify-ui-subtle-background\) {
     background-color: var(--clarify-ui-subtle-background);
   }
@@ -3236,16 +3678,20 @@
     background-color: var(--color-amber-50);
   }
 
-  .bg-amber-50\/70 {
-    background-color: #fffbebb3;
+  .bg-amber-50\/40 {
+    background-color: #fffbeb66;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-50\/70 {
-      background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
+    .bg-amber-50\/40 {
+      background-color: color-mix(in oklab, var(--color-amber-50) 40%, transparent);
     }
   }
 
+  .bg-amber-100 {
+    background-color: var(--color-amber-100);
+  }
+
   .bg-amber-400 {
     background-color: var(--color-amber-400);
   }
@@ -3260,17 +3706,47 @@
     }
   }
 
+  .bg-amber-400\/80 {
+    background-color: #fcbb00cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-amber-400\/80 {
+      background-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
+    }
+  }
+
+  .bg-black\/65 {
+    background-color: #000000a6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/65 {
+      background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
+    }
+  }
+
+  .bg-black\/75 {
+    background-color: #000000bf;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/75 {
+      background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
+    }
+  }
+
   .bg-emerald-50 {
     background-color: var(--color-emerald-50);
   }
 
-  .bg-emerald-50\/50 {
-    background-color: #ecfdf580;
+  .bg-emerald-50\/30 {
+    background-color: #ecfdf54d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-emerald-50\/50 {
-      background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);
+    .bg-emerald-50\/30 {
+      background-color: color-mix(in oklab, var(--color-emerald-50) 30%, transparent);
     }
   }
 
@@ -3302,43 +3778,59 @@
     }
   }
 
-  .bg-green-400 {
-    background-color: var(--color-green-400);
+  .bg-emerald-400\/80 {
+    background-color: #00d294cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-emerald-400\/80 {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 80%, transparent);
+    }
   }
 
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
 
-  .bg-red-400 {
-    background-color: var(--color-red-400);
+  .bg-red-400\/80 {
+    background-color: #ff6568cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-400\/80 {
+      background-color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
   }
 
   .bg-rose-50 {
     background-color: var(--color-rose-50);
   }
 
-  .bg-rose-50\/70 {
-    background-color: #fff1f2b3;
+  .bg-rose-50\/40 {
+    background-color: #fff1f266;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-rose-50\/70 {
-      background-color: color-mix(in oklab, var(--color-rose-50) 70%, transparent);
+    .bg-rose-50\/40 {
+      background-color: color-mix(in oklab, var(--color-rose-50) 40%, transparent);
     }
   }
 
+  .bg-rose-100 {
+    background-color: var(--color-rose-100);
+  }
+
   .bg-rose-400 {
     background-color: var(--color-rose-400);
   }
 
-  .bg-sky-50\/50 {
-    background-color: #f0f9ff80;
+  .bg-sky-50\/30 {
+    background-color: #f0f9ff4d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-sky-50\/50 {
-      background-color: color-mix(in oklab, var(--color-sky-50) 50%, transparent);
+    .bg-sky-50\/30 {
+      background-color: color-mix(in oklab, var(--color-sky-50) 30%, transparent);
     }
   }
 
@@ -3364,12 +3856,24 @@
     background-color: var(--color-white);
   }
 
-  .bg-yellow-400 {
-    background-color: var(--color-yellow-400);
+  .bg-zinc-50\/50 {
+    background-color: #fafafa80;
   }
 
-  .bg-zinc-50 {
-    background-color: var(--color-zinc-50);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-zinc-50\/50 {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 50%, transparent);
+    }
+  }
+
+  .bg-zinc-200\/70 {
+    background-color: #e4e4e7b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-zinc-200\/70 {
+      background-color: color-mix(in oklab, var(--color-zinc-200) 70%, transparent);
+    }
   }
 
   .bg-zinc-300 {
@@ -3470,6 +3974,10 @@
     padding: calc(var(--spacing) * 1.5);
   }
 
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
   .p-2\.5 {
     padding: calc(var(--spacing) * 2.5);
   }
@@ -3514,6 +4022,10 @@
     padding-inline: calc(var(--spacing) * 3);
   }
 
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -3526,10 +4038,6 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
-  .py-0 {
-    padding-block: 0;
-  }
-
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -3558,6 +4066,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -3570,6 +4082,10 @@
     padding-block: calc(var(--spacing) * 16);
   }
 
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -3598,6 +4114,10 @@
     padding-top: calc(var(--spacing) * 26);
   }
 
+  .pr-1 {
+    padding-right: var(--spacing);
+  }
+
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -3606,18 +4126,10 @@
     padding-right: calc(var(--spacing) * 4);
   }
 
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
 
-  .pb-0 {
-    padding-bottom: 0;
-  }
-
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -3654,10 +4166,18 @@
     padding-left: calc(var(--spacing) * 2.5);
   }
 
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
 
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
+
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -3670,14 +4190,18 @@
     text-align: left;
   }
 
-  .text-right {
-    text-align: right;
+  .align-baseline {
+    vertical-align: baseline;
   }
 
   .align-middle {
     vertical-align: middle;
   }
 
+  .align-top {
+    vertical-align: top;
+  }
+
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -3706,6 +4230,11 @@
     line-height: calc(var(--spacing) * 4);
   }
 
+  .text-\[13px\]\/6 {
+    font-size: 13px;
+    line-height: calc(var(--spacing) * 6);
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3786,6 +4315,11 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -3819,6 +4353,10 @@
     overflow-wrap: break-word;
   }
 
+  .break-all {
+    word-break: break-all;
+  }
+
   .whitespace-normal {
     white-space: normal;
   }
@@ -3839,6 +4377,10 @@
     color: var(--clarify-code-control-text);
   }
 
+  .text-\(--clarify-code-danger\) {
+    color: var(--clarify-code-danger);
+  }
+
   .text-\(--clarify-code-faint\) {
     color: var(--clarify-code-faint);
   }
@@ -3847,6 +4389,22 @@
     color: var(--clarify-code-muted);
   }
 
+  .text-\(--clarify-code-number\) {
+    color: var(--clarify-code-number);
+  }
+
+  .text-\(--clarify-code-property\) {
+    color: var(--clarify-code-property);
+  }
+
+  .text-\(--clarify-code-string\) {
+    color: var(--clarify-code-string);
+  }
+
+  .text-\(--clarify-code-success\) {
+    color: var(--clarify-code-success);
+  }
+
   .text-\(--clarify-code-text\) {
     color: var(--clarify-code-text);
   }
@@ -3935,10 +4493,6 @@
     color: var(--color-amber-900);
   }
 
-  .text-amber-950 {
-    color: var(--color-amber-950);
-  }
-
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -3955,18 +4509,10 @@
     color: var(--color-emerald-700);
   }
 
-  .text-emerald-800 {
-    color: var(--color-emerald-800);
-  }
-
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
 
-  .text-emerald-950 {
-    color: var(--color-emerald-950);
-  }
-
   .text-fuchsia-500 {
     color: var(--color-fuchsia-500);
   }
@@ -3991,10 +4537,6 @@
     color: var(--color-rose-900);
   }
 
-  .text-rose-950 {
-    color: var(--color-rose-950);
-  }
-
   .text-sky-500 {
     color: var(--color-sky-500);
   }
@@ -4011,10 +4553,6 @@
     color: var(--color-sky-900);
   }
 
-  .text-sky-950 {
-    color: var(--color-sky-950);
-  }
-
   .text-violet-500 {
     color: var(--color-violet-500);
   }
@@ -4063,6 +4601,10 @@
     text-decoration-line: underline;
   }
 
+  .accent-\(--clarify-theme-tokens-colors-primary\) {
+    accent-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -4071,6 +4613,10 @@
     opacity: .35;
   }
 
+  .opacity-45 {
+    opacity: .45;
+  }
+
   .opacity-80 {
     opacity: .8;
   }
@@ -4083,18 +4629,13 @@
     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-\[0_0_0\.5rem_var\(--clarify-ui-accent-glow\)\] {
-    --tw-shadow: 0 0 .5rem var(--tw-shadow-color, var(--clarify-ui-accent-glow));
+  .shadow-\[0_0_0_4px_var\(--clarify-theme-tokens-colors-background\)\] {
+    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--clarify-theme-tokens-colors-background));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -4209,18 +4750,68 @@
     --tw-ring-color: var(--color-amber-300);
   }
 
+  .ring-amber-500\/15 {
+    --tw-ring-color: #f99c0026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-amber-500\/15 {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
+    }
+  }
+
   .ring-emerald-300 {
     --tw-ring-color: var(--color-emerald-300);
   }
 
+  .ring-emerald-500\/15 {
+    --tw-ring-color: #00bb7f26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-emerald-500\/15 {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
+    }
+  }
+
   .ring-rose-200 {
     --tw-ring-color: var(--color-rose-200);
   }
 
+  .ring-rose-500\/15 {
+    --tw-ring-color: #ff235726;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-rose-500\/15 {
+      --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent);
+    }
+  }
+
   .ring-sky-300 {
     --tw-ring-color: var(--color-sky-300);
   }
 
+  .ring-sky-500\/15 {
+    --tw-ring-color: #00a5ef26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-sky-500\/15 {
+      --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
+    }
+  }
+
+  .ring-zinc-500\/15 {
+    --tw-ring-color: #71717b26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-zinc-500\/15 {
+      --tw-ring-color: color-mix(in oklab, var(--color-zinc-500) 15%, transparent);
+    }
+  }
+
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -4248,6 +4839,10 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4300,6 +4895,11 @@
     transition-delay: .15s;
   }
 
+  .duration-150 {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -4325,10 +4925,6 @@
     transition-timing-function: var(--ease-out);
   }
 
-  .will-change-transform {
-    will-change: transform;
-  }
-
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -4352,35 +4948,139 @@
     --anchor-gap: calc(var(--spacing) * 2);
   }
 
-  .\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\] {
-    --tw-prose-links-hover: var(--clarify-ui-accent-text);
+  .\[--clarify-theme-tokens-radius-lg\:6px\] {
+    --clarify-theme-tokens-radius-lg: 6px;
   }
 
-  .\[--tw-prose-links\:var\(--clarify-theme-tokens-colors-foreground\)\] {
-    --tw-prose-links: var(--clarify-theme-tokens-colors-foreground);
+  .\[--clarify-theme-tokens-radius-md\:4px\] {
+    --clarify-theme-tokens-radius-md: 4px;
   }
 
-  .\[--width\:var\(--clarify-heading-anchor-width\)\] {
-    --width: var(--clarify-heading-anchor-width);
+  .\[--clarify-theme-tokens-radius-sm\:2px\] {
+    --clarify-theme-tokens-radius-sm: 2px;
   }
 
-  .\[clarify\:search\] {
-    clarify: search;
+  .\[--clarify-theme-tokens-radius-xl\:8px\] {
+    --clarify-theme-tokens-radius-xl: 8px;
   }
 
-  .ring-inset {
-    --tw-ring-inset: inset;
+  .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+    --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-foreground);
   }
 
-  :is(.\*\:m-0 > *) {
-    margin: 0;
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+      --clarify-ui-accent-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 10%,transparent);
+    }
   }
 
-  @media (hover: hover) {
+  .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+    --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+      --clarify-ui-accent-border: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 22%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-accent-text\:var\(--clarify-theme-tokens-colors-foreground\)\] {
+    --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+    --clarify-ui-active-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+      --clarify-ui-active-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 12%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+    --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+      --clarify-ui-subtle-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
+    }
+  }
+
+  .\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\] {
+    --tw-prose-links-hover: var(--clarify-ui-accent-text);
+  }
+
+  .\[--tw-prose-links\:var\(--clarify-theme-tokens-colors-foreground\)\] {
+    --tw-prose-links: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .\[--width\:var\(--clarify-heading-anchor-width\)\] {
+    --width: var(--clarify-heading-anchor-width);
+  }
+
+  .\[clarify\:search\] {
+    clarify: search;
+  }
+
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
+
+  :is(.\*\:m-0 > *) {
+    margin: 0;
+  }
+
+  .group-open\:rotate-0:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 0deg;
+  }
+
+  .group-open\:border-b:is(:where(.group):is([open], :popover-open, :open) *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .group-open\:border-\(--clarify-theme-tokens-colors-border\):is(:where(.group):is([open], :popover-open, :open) *) {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .group-hover\:-translate-x-0\.5:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * .5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .group-hover\:-translate-y-0\.5:is(:where(.group):hover *) {
+      --tw-translate-y: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .group-hover\:bg-\(--clarify-theme-tokens-colors-primary\):is(:where(.group):hover *) {
+      background-color: var(--clarify-theme-tokens-colors-primary);
+    }
+
     .group-hover\:text-\(--clarify-theme-tokens-colors-primary\):is(:where(.group):hover *) {
       color: var(--clarify-theme-tokens-colors-primary);
     }
 
+    .group-hover\:text-\(--clarify-ui-accent-text\):is(:where(.group):hover *) {
+      color: var(--clarify-ui-accent-text);
+    }
+
+    .group-hover\:text-white:is(:where(.group):hover *) {
+      color: var(--color-white);
+    }
+
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
     }
@@ -4390,11 +5090,15 @@
     }
   }
 
-  .group-focus\:opacity-100:is(:where(.group):focus *) {
+  .group-focus\:opacity-100:is(:where(.group):focus *), .group-aria-current\:opacity-100:is(:where(.group)[aria-current="true"] *) {
     opacity: 1;
   }
 
-  .group-aria-expanded\:rotate-180:is(:where(.group)[aria-expanded="true"] *) {
+  .group-aria-expanded\:rotate-90:is(:where(.group)[aria-expanded="true"] *) {
+    rotate: 90deg;
+  }
+
+  .group-aria-expanded\:rotate-180:is(:where(.group)[aria-expanded="true"] *), .group-data-open\:rotate-180:is(:where(.group)[data-open] *) {
     rotate: 180deg;
   }
 
@@ -4402,10 +5106,19 @@
     opacity: 1;
   }
 
+  .placeholder\:text-\(--clarify-code-faint\)::placeholder {
+    color: var(--clarify-code-faint);
+  }
+
   .placeholder\:text-\(--clarify-ui-text-faint\)::placeholder {
     color: var(--clarify-ui-text-faint);
   }
 
+  .before\:content-\[counter\(list-item\)\]:before {
+    --tw-content: counter(list-item);
+    content: var(--tw-content);
+  }
+
   .first\:pt-0:first-child {
     padding-top: 0;
   }
@@ -4422,15 +5135,53 @@
     margin-bottom: 0;
   }
 
+  .open\:grid:is([open], :popover-open, :open) {
+    display: grid;
+  }
+
+  .open\:min-h-55:is([open], :popover-open, :open) {
+    min-height: calc(var(--spacing) * 55);
+  }
+
+  .open\:shrink:is([open], :popover-open, :open) {
+    flex-shrink: 1;
+  }
+
+  .open\:grow:is([open], :popover-open, :open) {
+    flex-grow: 1;
+  }
+
+  .open\:basis-55:is([open], :popover-open, :open) {
+    flex-basis: calc(var(--spacing) * 55);
+  }
+
+  .open\:grid-rows-\[auto_minmax\(11rem\,1fr\)\]:is([open], :popover-open, :open) {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
   .empty\:hidden:empty {
     display: none;
   }
 
+  .focus-within\:bg-\(--clarify-ui-hover-background\):focus-within {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
 
   @media (hover: hover) {
+    .hover\:-translate-y-0\.5:hover {
+      --tw-translate-y: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .hover\:-translate-y-px:hover {
+      --tw-translate-y: -1px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     .hover\:scale-105:hover {
       --tw-scale-x: 105%;
       --tw-scale-y: 105%;
@@ -4438,22 +5189,20 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
-      border-color: var(--clarify-theme-tokens-colors-primary);
+    .hover\:border-\(--clarify-code-border\):hover {
+      border-color: var(--clarify-code-border);
     }
 
-    .hover\:border-\(--clarify-ui-text-faint\):hover {
-      border-color: var(--clarify-ui-text-faint);
+    .hover\:border-\(--clarify-ui-accent-border\):hover {
+      border-color: var(--clarify-ui-accent-border);
     }
 
-    .hover\:border-white\/20:hover {
-      border-color: #fff3;
+    .hover\:border-\(--clarify-ui-text-faint\):hover {
+      border-color: var(--clarify-ui-text-faint);
     }
 
-    @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\:bg-\(--clarify-code-control-background\):hover {
+      background-color: var(--clarify-code-control-background);
     }
 
     .hover\:bg-\(--clarify-code-control-background-hover\):hover {
@@ -4464,6 +5213,10 @@
       background-color: var(--clarify-theme-tokens-colors-background);
     }
 
+    .hover\:bg-\(--clarify-theme-tokens-colors-foreground\):hover {
+      background-color: var(--clarify-theme-tokens-colors-foreground);
+    }
+
     .hover\:bg-\(--clarify-ui-accent-background\):hover {
       background-color: var(--clarify-ui-accent-background);
     }
@@ -4472,10 +5225,24 @@
       background-color: var(--clarify-ui-hover-background);
     }
 
+    .hover\:bg-black\/80:hover {
+      background-color: #000c;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-black\/80:hover {
+        background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
+      }
+    }
+
     .hover\:text-\(--clarify-code-text\):hover {
       color: var(--clarify-code-text);
     }
 
+    .hover\:text-\(--clarify-theme-tokens-colors-background\):hover {
+      color: var(--clarify-theme-tokens-colors-background);
+    }
+
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
       color: var(--clarify-theme-tokens-colors-foreground);
     }
@@ -4484,10 +5251,6 @@
       color: var(--clarify-ui-text-strong);
     }
 
-    .hover\:text-emerald-700:hover {
-      color: var(--color-emerald-700);
-    }
-
     .hover\:text-inherit:hover {
       color: inherit;
     }
@@ -4496,14 +5259,28 @@
       opacity: .8;
     }
 
+    .hover\:opacity-85:hover {
+      opacity: .85;
+    }
+
     .hover\:opacity-90:hover {
       opacity: .9;
     }
 
-    .hover\:shadow-xs:hover {
-      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    .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);
     }
+
+    .hover\:shadow-zinc-900\/5:hover {
+      --tw-shadow-color: #18181b0d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:shadow-zinc-900\/5:hover {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-zinc-900) 5%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
   }
 
   .focus\:w-full:focus {
@@ -4526,6 +5303,10 @@
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
+  .focus\:bg-\(--clarify-ui-hover-background\):focus {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus\:text-\(--clarify-code-text\):focus {
     color: var(--clarify-code-text);
   }
@@ -4534,11 +5315,20 @@
     opacity: 1;
   }
 
+  .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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\:ring-2:focus {
     --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\:ring-\(--clarify-theme-tokens-colors-primary\):focus {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .focus\:ring-\(--clarify-ui-accent-border\):focus {
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
@@ -4548,15 +5338,35 @@
     outline-style: none;
   }
 
+  .focus\:ring-inset:focus {
+    --tw-ring-inset: inset;
+  }
+
+  .focus-visible\:bg-\(--clarify-ui-hover-background\):focus-visible {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
+  .focus-visible\:opacity-100:focus-visible {
+    opacity: 1;
+  }
+
   .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-foreground\):focus-visible {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
   .focus-visible\:ring-\(--clarify-theme-tokens-colors-primary\):focus-visible {
     --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
 
+  .focus-visible\:ring-white:focus-visible {
+    --tw-ring-color: var(--color-white);
+  }
+
   .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);
@@ -4571,10 +5381,40 @@
     outline-style: none;
   }
 
+  .focus-visible\:ring-inset:focus-visible {
+    --tw-ring-inset: inset;
+  }
+
+  .active\:translate-y-0:active {
+    --tw-translate-y: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .active\:\!cursor-grabbing:active {
     cursor: grabbing !important;
   }
 
+  .active\:shadow-sm:active {
+    --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);
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:cursor-wait:disabled {
+    cursor: wait;
+  }
+
+  .disabled\:opacity-60:disabled {
+    opacity: .6;
+  }
+
+  .aria-invalid\:text-\(--clarify-error-accent-text\)[aria-invalid="true"] {
+    color: var(--clarify-error-accent-text);
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4591,6 +5431,10 @@
     opacity: 0;
   }
 
+  .data-disabled\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
+
   .data-enter\:duration-100[data-enter] {
     --tw-duration: .1s;
     transition-duration: .1s;
@@ -4641,18 +5485,8 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-\(--clarify-ui-accent-border\)[data-open] {
-    border-color: var(--clarify-ui-accent-border);
-  }
-
-  .data-open\:border-white\/20[data-open] {
-    border-color: #fff3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:border-white\/20[data-open] {
-      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-    }
+  .data-open\:border-\(--clarify-code-border\)[data-open] {
+    border-color: var(--clarify-code-border);
   }
 
   .data-open\:bg-\(--clarify-code-control-background-active\)[data-open] {
@@ -4663,6 +5497,10 @@
     background-color: var(--clarify-ui-active-background);
   }
 
+  .data-open\:text-\(--clarify-theme-tokens-colors-foreground\)[data-open] {
+    color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
   .data-open\:ring-2[data-open] {
     --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);
@@ -4701,6 +5539,18 @@
   }
 
   @media (min-width: 40rem) {
+    .sm\:right-3 {
+      right: calc(var(--spacing) * 3);
+    }
+
+    .sm\:col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
+
     .sm\:mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
@@ -4717,14 +5567,26 @@
       display: inline;
     }
 
+    .sm\:h-\[min\(46rem\,calc\(100dvh-3rem\)\)\] {
+      height: min(46rem, 100dvh - 3rem);
+    }
+
     .sm\:w-auto {
       width: auto;
     }
 
+    .sm\:w-fit {
+      width: fit-content;
+    }
+
     .sm\:max-w-\(--clarify-server-url-max-width\) {
       max-width: var(--clarify-server-url-max-width);
     }
 
+    .sm\:max-w-48 {
+      max-width: calc(var(--spacing) * 48);
+    }
+
     .sm\:max-w-xl {
       max-width: var(--container-xl);
     }
@@ -4733,10 +5595,6 @@
       min-width: calc(var(--spacing) * 16);
     }
 
-    .sm\:grid-cols-\(--clarify-openapi-control-grid\) {
-      grid-template-columns: var(--clarify-openapi-control-grid);
-    }
-
     .sm\:grid-cols-\(--clarify-openapi-variable-grid\) {
       grid-template-columns: var(--clarify-openapi-variable-grid);
     }
@@ -4749,14 +5607,30 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-\[2rem_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
 
+    .sm\:items-end {
+      align-items: flex-end;
+    }
+
     .sm\:items-start {
       align-items: flex-start;
     }
 
+    .sm\:items-stretch {
+      align-items: stretch;
+    }
+
     .sm\:justify-between {
       justify-content: space-between;
     }
@@ -4765,24 +5639,37 @@
       justify-content: flex-end;
     }
 
-    .sm\:justify-start {
-      justify-content: flex-start;
+    .sm\:gap-2 {
+      gap: calc(var(--spacing) * 2);
     }
 
     .sm\:gap-4 {
       gap: calc(var(--spacing) * 4);
     }
 
+    .sm\:self-end {
+      align-self: flex-end;
+    }
+
+    .sm\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }
 
-    .sm\:px-1\.5 {
-      padding-inline: calc(var(--spacing) * 1.5);
+    .sm\:p-6 {
+      padding: calc(var(--spacing) * 6);
     }
 
-    .sm\:px-3 {
-      padding-inline: calc(var(--spacing) * 3);
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
+    .sm\:px-1\.5 {
+      padding-inline: calc(var(--spacing) * 1.5);
     }
 
     .sm\:px-4 {
@@ -4801,16 +5688,12 @@
       padding-block: calc(var(--spacing) * 20);
     }
 
-    .sm\:pr-0 {
-      padding-right: 0;
-    }
-
     .sm\:pb-10 {
       padding-bottom: calc(var(--spacing) * 10);
     }
 
-    .sm\:text-left {
-      text-align: left;
+    .sm\:text-center {
+      text-align: center;
     }
 
     .sm\:text-2xl\/8 {
@@ -4838,22 +5721,10 @@
       display: none;
     }
 
-    .md\:h-5 {
-      height: calc(var(--spacing) * 5);
-    }
-
-    .md\:w-px {
-      width: 1px;
-    }
-
     .md\:justify-start {
       justify-content: flex-start;
     }
 
-    .md\:bg-\(--clarify-theme-tokens-colors-border\) {
-      background-color: var(--clarify-theme-tokens-colors-border);
-    }
-
     .md\:px-10 {
       padding-inline: calc(var(--spacing) * 10);
     }
@@ -4897,10 +5768,6 @@
       z-index: 50;
     }
 
-    .lg\:mt-24 {
-      margin-top: calc(var(--spacing) * 24);
-    }
-
     .lg\:block {
       display: block;
     }
@@ -4945,6 +5812,10 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,1\.12fr\)_minmax\(22rem\,0\.88fr\)\] {
+      grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
+    }
+
     .lg\:self-stretch {
       align-self: stretch;
     }
@@ -4953,6 +5824,16 @@
       overflow-y: auto;
     }
 
+    .lg\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .lg\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
     .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
       background-color: var(--clarify-theme-tokens-colors-background);
     }
@@ -5043,6 +5924,24 @@
       justify-content: flex-end;
     }
 
+    .\@3xl\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .\@3xl\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
+    .\@3xl\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+
+    .\@3xl\:pl-8 {
+      padding-left: calc(var(--spacing) * 8);
+    }
+
     .\@3xl\:text-right {
       text-align: right;
     }
@@ -5066,13 +5965,13 @@
     }
   }
 
-  .dark\:border-amber-400\/30:where(.dark, .dark *) {
-    border-color: #fcbb004d;
+  .dark\:border-amber-400\/20:where(.dark, .dark *) {
+    border-color: #fcbb0033;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-amber-400\/30:where(.dark, .dark *) {
-      border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
+    .dark\:border-amber-400\/20:where(.dark, .dark *) {
+      border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
     }
   }
 
@@ -5086,13 +5985,13 @@
     }
   }
 
-  .dark\:border-emerald-400\/30:where(.dark, .dark *) {
-    border-color: #00d2944d;
+  .dark\:border-emerald-400\/20:where(.dark, .dark *) {
+    border-color: #00d29433;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-emerald-400\/30:where(.dark, .dark *) {
-      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
+    .dark\:border-emerald-400\/20:where(.dark, .dark *) {
+      border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
     }
   }
 
@@ -5106,23 +6005,23 @@
     }
   }
 
-  .dark\:border-rose-400\/30:where(.dark, .dark *) {
-    border-color: #ff667f4d;
+  .dark\:border-rose-400\/20:where(.dark, .dark *) {
+    border-color: #ff667f33;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-rose-400\/30:where(.dark, .dark *) {
-      border-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
+    .dark\:border-rose-400\/20:where(.dark, .dark *) {
+      border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
     }
   }
 
-  .dark\:border-sky-400\/30:where(.dark, .dark *) {
-    border-color: #00bcfe4d;
+  .dark\:border-sky-400\/20:where(.dark, .dark *) {
+    border-color: #00bcfe33;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-sky-400\/30:where(.dark, .dark *) {
-      border-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
+    .dark\:border-sky-400\/20:where(.dark, .dark *) {
+      border-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
     }
   }
 
@@ -5146,16 +6045,10 @@
     }
   }
 
-  .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
+  .dark\:bg-\(--clarify-theme-tokens-colors-primary\):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;
   }
@@ -5166,6 +6059,16 @@
     }
   }
 
+  .dark\:bg-amber-400\/10:where(.dark, .dark *) {
+    background-color: #fcbb001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-amber-400\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
+    }
+  }
+
   .dark\:bg-amber-500\/10:where(.dark, .dark *) {
     background-color: #f99c001a;
   }
@@ -5206,16 +6109,6 @@
     }
   }
 
-  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-    background-color: #00d29426;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
-    }
-  }
-
   .dark\:bg-red-500\/10:where(.dark, .dark *) {
     background-color: #fb2c361a;
   }
@@ -5256,6 +6149,16 @@
     }
   }
 
+  .dark\:bg-sky-400\/10:where(.dark, .dark *) {
+    background-color: #00bcfe1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-sky-400\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
+    }
+  }
+
   .dark\:bg-sky-400\/15:where(.dark, .dark *) {
     background-color: #00bcfe26;
   }
@@ -5266,10 +6169,6 @@
     }
   }
 
-  .dark\:bg-white:where(.dark, .dark *) {
-    background-color: var(--color-white);
-  }
-
   .dark\:bg-white\/2\.5:where(.dark, .dark *) {
     background-color: #ffffff06;
   }
@@ -5290,6 +6189,16 @@
     }
   }
 
+  .dark\:bg-white\/10:where(.dark, .dark *) {
+    background-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   .dark\:bg-zinc-600:where(.dark, .dark *) {
     background-color: var(--color-zinc-600);
   }
@@ -5426,14 +6335,14 @@
     color: var(--color-white);
   }
 
-  .dark\:text-zinc-200:where(.dark, .dark *) {
-    color: var(--color-zinc-200);
-  }
-
   .dark\:text-zinc-400:where(.dark, .dark *) {
     color: var(--color-zinc-400);
   }
 
+  .dark\:text-zinc-950:where(.dark, .dark *) {
+    color: var(--color-zinc-950);
+  }
+
   .dark\:opacity-55:where(.dark, .dark *) {
     opacity: .55;
   }
@@ -5443,11 +6352,6 @@
     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 *) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .dark\:shadow-black\/40:where(.dark, .dark *) {
     --tw-shadow-color: #0006;
   }
@@ -5458,13 +6362,13 @@
     }
   }
 
-  .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
-    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  .dark\:ring-amber-400\/20:where(.dark, .dark *) {
+    --tw-ring-color: #fcbb0033;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .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-amber-400\/20:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
     }
   }
 
@@ -5478,6 +6382,16 @@
     }
   }
 
+  .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
+    --tw-ring-color: #00d29433;
+  }
+
+  @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-emerald-400\/30:where(.dark, .dark *) {
     --tw-ring-color: #00d2944d;
   }
@@ -5488,6 +6402,16 @@
     }
   }
 
+  .dark\:ring-rose-400\/20:where(.dark, .dark *) {
+    --tw-ring-color: #ff667f33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-rose-400\/20:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
+    }
+  }
+
   .dark\:ring-rose-500\/20:where(.dark, .dark *) {
     --tw-ring-color: #ff235733;
   }
@@ -5498,6 +6422,16 @@
     }
   }
 
+  .dark\:ring-sky-400\/20:where(.dark, .dark *) {
+    --tw-ring-color: #00bcfe33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-sky-400\/20:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
+    }
+  }
+
   .dark\:ring-sky-400\/30:where(.dark, .dark *) {
     --tw-ring-color: #00bcfe4d;
   }
@@ -5553,6 +6487,10 @@
   }
 
   @media (hover: hover) {
+    .dark\:group-hover\:text-zinc-950:where(.dark, .dark *):is(:where(.group):hover *) {
+      color: var(--color-zinc-950);
+    }
+
     .dark\:hover\:bg-white\/10:where(.dark, .dark *):hover {
       background-color: #ffffff1a;
     }
@@ -5563,13 +6501,14 @@
       }
     }
 
-    .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
-      color: var(--color-emerald-200);
-    }
-
     .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
       opacity: .8;
     }
+
+    .dark\:hover\:shadow-none:where(.dark, .dark *):hover {
+      --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);
+    }
   }
 
   @media (min-width: 48rem) {
@@ -5590,6 +6529,19 @@
     }
   }
 
+  .\[\&_\.clarify-collapse\]\:my-0 .clarify-collapse {
+    margin-block: 0;
+  }
+
+  .\[\&_\.clarify-collapse\]\:rounded-none .clarify-collapse {
+    border-radius: 0;
+  }
+
+  .\[\&_\.clarify-collapse\]\:border-0 .clarify-collapse {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .\[\&_svg\]\:h-auto svg {
     height: auto;
   }
@@ -5614,6 +6566,40 @@
     display: none;
   }
 
+  .\[\&\>\[role\=tooltip\]\]\:w-80 > [role="tooltip"] {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] > [role="tooltip"] {
+    max-width: min(20rem, 100vw - 2rem);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:border > [role="tooltip"] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:border-\(--clarify-theme-tokens-colors-border\) > [role="tooltip"] {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:bg-\(--clarify-theme-tokens-colors-surface\) > [role="tooltip"] {
+    background-color: var(--clarify-theme-tokens-colors-surface);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:p-3 > [role="tooltip"] {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:text-\(--clarify-ui-text\) > [role="tooltip"] {
+    color: var(--clarify-ui-text);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:shadow-xl > [role="tooltip"] {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px 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);
+  }
+
   html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
     width: 100%;
   }
@@ -5909,6 +6895,12 @@
   inherits: false
 }
 
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;