@clarify-labs/renderer 0.6.4 → 0.6.6

package/output/renderer.css

@@ -131,10 +131,10 @@
     --color-white: #fff;
     --spacing: .25rem;
     --container-sm: 24rem;
-    --container-lg: 33rem;
     --container-xl: 36rem;
     --container-2xl: 40rem;
     --container-3xl: 50rem;
+    --container-4xl: 56rem;
     --container-6xl: 72rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
@@ -168,6 +168,7 @@
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
+    --blur-xl: 24px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
@@ -449,11 +450,6 @@
     color: var(--clarify-theme-tokens-colors-foreground, var(--color-zinc-900));
   }
 
-  .dark body {
-    background: var(--color-zinc-950);
-    color: var(--color-white);
-  }
-
   * {
     scrollbar-width: thin;
     scrollbar-color: var(--color-zinc-300) transparent;
@@ -602,6 +598,53 @@
   :root, .clarify-app {
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
+    --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
+    --clarify-layout-sidebar-grid-wide: 20rem minmax(0, 1fr);
+    --clarify-sidebar-height: calc(100vh - 3.5rem);
+    --clarify-sidebar-height-with-tabs: calc(100vh - 7rem);
+    --clarify-popover-max-width: min(32rem, calc(100vw - 2rem));
+    --clarify-code-header-min-height: calc(3rem + 1px);
+    --clarify-feedback-actions-grid: 1fr 1px 1fr;
+    --clarify-heading-anchor-width: 1.75rem;
+    --clarify-heading-anchor-width-wide: 1.75rem;
+    --clarify-theme-editor-width: min(calc(100vw - 2rem), 24rem);
+    --clarify-theme-editor-panel-max-height: min(42rem, calc(100dvh - 5.75rem));
+    --clarify-error-page-min-height: 34rem;
+    --clarify-error-details-max-height: 20rem;
+    --clarify-error-component-stack-max-height: 12rem;
+    --clarify-error-accent-text: #e11d48;
+    --clarify-skeleton-background: var(--clarify-theme-tokens-colors-muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-skeleton-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 22%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-skeleton-accent-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-skeleton-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-skeleton-radius: 9999px;
+    --clarify-skeleton-title-width: 24rem;
+    --clarify-skeleton-heading-width: 28rem;
+    --clarify-skeleton-heading-short-width: 22rem;
+    --clarify-skeleton-line-width: 18rem;
+    --clarify-skeleton-card-radius: 1.75rem;
+    --clarify-skeleton-block-radius: 1.5rem;
+    --clarify-schema-row-nested-width: calc(100% + 1rem);
+    --clarify-server-url-max-width: min(36%, 16rem);
+    --clarify-openapi-control-grid: minmax(0, 1fr) minmax(0, 1.2fr);
+    --clarify-search-dialog-padding-block-lg: 15vh;
+    --clarify-search-max-width: 36vw;
     --clarify-ui-control-font-size: .875rem;
     --clarify-ui-control-line-height: 1.25rem;
     --clarify-ui-menu-font-size: .875rem;
@@ -620,11 +663,16 @@
   }
 
   .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-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 8%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
     --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
   }
 
@@ -645,13 +693,22 @@
   }
 
   .dark, .dark .clarify-app {
-    --clarify-ui-overlay-background: #0006;
+    --clarify-ui-overlay-background: var(--clarify-theme-tokens-colors-background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-background) 76%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
     --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);
+      --clarify-ui-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 72%, var(--clarify-theme-tokens-colors-foreground));
     }
   }
 
@@ -709,6 +766,47 @@
     background: var(--clarify-ui-hover-background);
   }
 
+  .clarify-collapse-content {
+    transition-property: max-height, opacity, transform;
+  }
+
+  .clarify-code-copy-copied {
+    background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-code-copy-copied {
+      background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 12%, transparent);
+    }
+  }
+
+  .clarify-code-copy-copied {
+    box-shadow: inset 0 0 0 1px var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-code-copy-copied {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 24%, transparent);
+    }
+  }
+
+  .clarify-hero-pattern-mask:is(.dark *) {
+    -webkit-mask-image: linear-gradient(#fff, #0000);
+    mask-image: linear-gradient(#fff, #0000);
+  }
+
+  .clarify-hero-pattern-gradient {
+    background: linear-gradient(to right, var(--clarify-theme-tokens-colors-primary), var(--clarify-theme-tokens-colors-accent));
+    -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
+    mask-image: radial-gradient(farthest-side at top, #fff, #0000);
+  }
+
+  .clarify-hero-pattern-grid {
+    height: 200%;
+    top: -50%;
+    bottom: -50%;
+  }
+
   .clarify-ui-menu {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-menu-font-size);
@@ -1079,14 +1177,14 @@
     inset-block: 0;
   }
 
-  .inset-y-\[-50\%\] {
-    inset-block: -50%;
-  }
-
   .top-0 {
     top: 0;
   }
 
+  .top-1\/2 {
+    top: 50%;
+  }
+
   .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
@@ -1107,6 +1205,10 @@
     right: 0;
   }
 
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1115,6 +1217,10 @@
     bottom: 0;
   }
 
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+
   .left-0 {
     left: 0;
   }
@@ -1456,7 +1562,7 @@
     -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;
+    font-weight: normal;
     transition-property: color, text-decoration-color;
     transition-duration: .15s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -1531,8 +1637,8 @@
     margin-top: calc(var(--spacing) * 6);
   }
 
-  .mt-16 {
-    margin-top: calc(var(--spacing) * 16);
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
   }
 
   .-mr-1 {
@@ -1555,6 +1661,10 @@
     margin-bottom: var(--spacing);
   }
 
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -1591,6 +1701,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -1633,6 +1747,11 @@
     height: calc(var(--spacing) * 2);
   }
 
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1715,42 +1834,62 @@
     height: calc(var(--spacing) * 14);
   }
 
-  .h-32 {
-    height: calc(var(--spacing) * 32);
+  .h-100 {
+    height: calc(var(--spacing) * 100);
   }
 
-  .h-52 {
-    height: calc(var(--spacing) * 52);
+  .h-full {
+    height: 100%;
   }
 
-  .h-100 {
-    height: calc(var(--spacing) * 100);
+  .max-h-\(--clarify-error-component-stack-max-height\) {
+    max-height: var(--clarify-error-component-stack-max-height);
   }
 
-  .h-\[200\%\] {
-    height: 200%;
+  .max-h-\(--clarify-error-details-max-height\) {
+    max-height: var(--clarify-error-details-max-height);
   }
 
-  .h-full {
-    height: 100%;
+  .max-h-\(--clarify-theme-editor-panel-max-height\) {
+    max-height: var(--clarify-theme-editor-panel-max-height);
   }
 
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
 
-  .min-h-11 {
-    min-height: calc(var(--spacing) * 11);
+  .max-h-128 {
+    max-height: calc(var(--spacing) * 128);
+  }
+
+  .min-h-\(--clarify-code-header-min-height\) {
+    min-height: var(--clarify-code-header-min-height);
+  }
+
+  .min-h-\(--clarify-error-page-min-height\) {
+    min-height: var(--clarify-error-page-min-height);
+  }
+
+  .min-h-0 {
+    min-height: 0;
   }
 
-  .min-h-\[calc\(--spacing\(12\)\+1px\)\] {
-    min-height: calc(calc(var(--spacing) * 12) + 1px);
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
   }
 
   .min-h-screen {
     min-height: 100vh;
   }
 
+  .w-\(--clarify-schema-row-nested-width\) {
+    width: var(--clarify-schema-row-nested-width);
+  }
+
+  .w-\(--clarify-theme-editor-width\) {
+    width: var(--clarify-theme-editor-width);
+  }
+
   .w-\(--clarify-ui-action-menu-width\) {
     width: var(--clarify-ui-action-menu-width);
   }
@@ -1767,8 +1906,12 @@
     width: calc(var(--spacing) * .5);
   }
 
-  .w-2\.5 {
-    width: calc(var(--spacing) * 2.5);
+  .w-1\/2 {
+    width: 50%;
+  }
+
+  .w-2\/3 {
+    width: 66.6667%;
   }
 
   .w-3 {
@@ -1779,14 +1922,26 @@
     width: calc(var(--spacing) * 3.5);
   }
 
+  .w-3\/4 {
+    width: 75%;
+  }
+
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
 
+  .w-4\/5 {
+    width: 80%;
+  }
+
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
 
+  .w-5\/6 {
+    width: 83.3333%;
+  }
+
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -1795,10 +1950,22 @@
     width: calc(var(--spacing) * 8);
   }
 
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-11\/12 {
+    width: 91.6667%;
+  }
+
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
 
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -1811,10 +1978,6 @@
     width: calc(var(--spacing) * 325);
   }
 
-  .w-\[calc\(100\%\+1rem\)\] {
-    width: calc(100% + 1rem);
-  }
-
   .w-full {
     width: 100%;
   }
@@ -1827,58 +1990,66 @@
     width: 1px;
   }
 
-  .max-w-\(--clarify-theme-layout-max-width\) {
-    max-width: var(--clarify-theme-layout-max-width);
+  .max-w-\(--clarify-popover-max-width\) {
+    max-width: var(--clarify-popover-max-width);
   }
 
-  .max-w-2xl {
-    max-width: var(--container-2xl);
+  .max-w-\(--clarify-search-max-width\) {
+    max-width: var(--clarify-search-max-width);
   }
 
-  .max-w-3xl {
-    max-width: var(--container-3xl);
+  .max-w-\(--clarify-skeleton-heading-short-width\) {
+    max-width: var(--clarify-skeleton-heading-short-width);
   }
 
-  .max-w-6xl {
-    max-width: var(--container-6xl);
+  .max-w-\(--clarify-skeleton-heading-width\) {
+    max-width: var(--clarify-skeleton-heading-width);
   }
 
-  .max-w-32 {
-    max-width: calc(var(--spacing) * 32);
+  .max-w-\(--clarify-skeleton-line-width\) {
+    max-width: var(--clarify-skeleton-line-width);
   }
 
-  .max-w-48 {
-    max-width: calc(var(--spacing) * 48);
+  .max-w-\(--clarify-skeleton-title-width\) {
+    max-width: var(--clarify-skeleton-title-width);
+  }
+
+  .max-w-\(--clarify-theme-layout-max-width\) {
+    max-width: var(--clarify-theme-layout-max-width);
   }
 
-  .max-w-\[18rem\] {
-    max-width: 18rem;
+  .max-w-2xl {
+    max-width: var(--container-2xl);
   }
 
-  .max-w-\[22rem\] {
-    max-width: 22rem;
+  .max-w-3xl {
+    max-width: var(--container-3xl);
   }
 
-  .max-w-\[24rem\] {
-    max-width: 24rem;
+  .max-w-4xl {
+    max-width: var(--container-4xl);
   }
 
-  .max-w-\[28rem\] {
-    max-width: 28rem;
+  .max-w-6xl {
+    max-width: var(--container-6xl);
   }
 
-  .max-w-\[36vw\] {
-    max-width: 36vw;
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
   }
 
-  .max-w-\[min\(32rem\,calc\(100vw-2rem\)\)\] {
-    max-width: min(32rem, 100vw - 2rem);
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
   }
 
   .max-w-none {
     max-width: none;
   }
 
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+
   .min-w-\(--button-width\) {
     min-width: var(--button-width);
   }
@@ -1934,6 +2105,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    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);
@@ -1993,16 +2169,20 @@
     appearance: none;
   }
 
+  .grid-cols-\(--clarify-feedback-actions-grid\) {
+    grid-template-columns: var(--clarify-feedback-actions-grid);
+  }
+
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-\[1fr_1px_1fr\] {
-    grid-template-columns: 1fr 1px 1fr;
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .flex-col {
@@ -2081,6 +2261,16 @@
     gap: calc(var(--spacing) * 8);
   }
 
+  .gap-px {
+    gap: 1px;
+  }
+
+  :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));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :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));
@@ -2105,6 +2295,12 @@
     margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-10 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -2141,6 +2337,10 @@
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
 
+  :where(.divide-\(--clarify-theme-tokens-colors-border\) > :not(:last-child)) {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
   :where(.divide-zinc-200\/70 > :not(:last-child)) {
     border-color: #e4e4e7b3;
   }
@@ -2151,16 +2351,6 @@
     }
   }
 
-  :where(.divide-zinc-900\/5 > :not(:last-child)) {
-    border-color: #18181b0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.divide-zinc-900\/5 > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-zinc-900) 5%, transparent);
-    }
-  }
-
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2187,10 +2377,26 @@
     overflow-y: auto;
   }
 
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+
   .rounded {
     border-radius: .25rem;
   }
 
+  .rounded-\(--clarify-skeleton-block-radius\) {
+    border-radius: var(--clarify-skeleton-block-radius);
+  }
+
+  .rounded-\(--clarify-skeleton-card-radius\) {
+    border-radius: var(--clarify-skeleton-card-radius);
+  }
+
+  .rounded-\(--clarify-skeleton-radius\) {
+    border-radius: var(--clarify-skeleton-radius);
+  }
+
   .rounded-\(--clarify-theme-tokens-radius-lg\) {
     border-radius: var(--clarify-theme-tokens-radius-lg);
   }
@@ -2215,14 +2421,6 @@
     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;
   }
@@ -2259,6 +2457,11 @@
     border-top-width: 1px;
   }
 
+  .border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
+
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -2274,6 +2477,10 @@
     border-left-width: 1px;
   }
 
+  .border-\(--clarify-error-accent-text\) {
+    border-color: var(--clarify-error-accent-text);
+  }
+
   .border-\(--clarify-theme-tokens-colors-border\) {
     border-color: var(--clarify-theme-tokens-colors-border);
   }
@@ -2338,10 +2545,6 @@
     border-color: #0000;
   }
 
-  .border-zinc-200 {
-    border-color: var(--color-zinc-200);
-  }
-
   .border-zinc-500\/20 {
     border-color: #71717b33;
   }
@@ -2356,16 +2559,6 @@
     border-color: var(--color-zinc-700);
   }
 
-  .border-zinc-900\/10 {
-    border-color: #18181b1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-zinc-900\/10 {
-      border-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
-    }
-  }
-
   .border-t-transparent {
     border-top-color: #0000;
   }
@@ -2380,6 +2573,14 @@
     }
   }
 
+  .bg-\(--clarify-skeleton-accent-background\) {
+    background-color: var(--clarify-skeleton-accent-background);
+  }
+
+  .bg-\(--clarify-skeleton-background\) {
+    background-color: var(--clarify-skeleton-background);
+  }
+
   .bg-\(--clarify-theme-tokens-colors-background\), .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
     background-color: var(--clarify-theme-tokens-colors-background);
   }
@@ -2416,22 +2617,26 @@
     }
   }
 
-  .bg-\(--clarify-ui-accent-background\) {
-    background-color: var(--clarify-ui-accent-background);
+  .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
+    background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
-  .bg-\(--clarify-ui-subtle-background\) {
-    background-color: var(--clarify-ui-subtle-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 95%, transparent);
+    }
   }
 
-  .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
-    background-color: var(--clarify-theme-tokens-colors-primary);
+  .bg-\(--clarify-ui-accent-background\) {
+    background-color: var(--clarify-ui-accent-background);
   }
 
-  @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-\(--clarify-ui-active-background\) {
+    background-color: var(--clarify-ui-active-background);
+  }
+
+  .bg-\(--clarify-ui-subtle-background\) {
+    background-color: var(--clarify-ui-subtle-background);
   }
 
   .bg-amber-50 {
@@ -2586,10 +2791,6 @@
     background-color: #0000;
   }
 
-  .bg-white {
-    background-color: var(--color-white);
-  }
-
   .bg-white\/5 {
     background-color: #ffffff0d;
   }
@@ -2604,30 +2805,6 @@
     background-color: var(--color-zinc-50);
   }
 
-  .bg-zinc-100\/50 {
-    background-color: #f4f4f580;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-100\/50 {
-      background-color: color-mix(in oklab, var(--color-zinc-100) 50%, transparent);
-    }
-  }
-
-  .bg-zinc-100\/70 {
-    background-color: #f4f4f5b3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-100\/70 {
-      background-color: color-mix(in oklab, var(--color-zinc-100) 70%, transparent);
-    }
-  }
-
-  .bg-zinc-200 {
-    background-color: var(--color-zinc-200);
-  }
-
   .bg-zinc-300 {
     background-color: var(--color-zinc-300);
   }
@@ -2654,39 +2831,10 @@
     background-color: var(--color-zinc-900);
   }
 
-  .bg-zinc-900\/10 {
-    background-color: #18181b1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-900\/10 {
-      background-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
-    }
-  }
-
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
 
-  .bg-zinc-950\/2\.5 {
-    background-color: #09090b06;
-  }
-
-  @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);
-    }
-  }
-
-  .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\)\] {
-    -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
-    mask-image: radial-gradient(farthest-side at top, #fff, #0000);
-  }
-
   .fill-\(--clarify-theme-tokens-colors-foreground\) {
     fill: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -2695,10 +2843,6 @@
     fill: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .fill-\(--clarify-ui-accent-text\) {
-    fill: var(--clarify-ui-accent-text);
-  }
-
   .fill-black\/40 {
     fill: #0006;
   }
@@ -2713,26 +2857,16 @@
     fill: var(--color-white);
   }
 
-  .fill-zinc-500\/20 {
-    fill: #71717b33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .fill-zinc-500\/20 {
-      fill: color-mix(in oklab, var(--color-zinc-500) 20%, transparent);
-    }
-  }
-
-  .stroke-\(--clarify-theme-tokens-colors-foreground\) {
-    stroke: var(--clarify-theme-tokens-colors-foreground);
+  .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-\(--clarify-ui-accent-text\) {
+    stroke: var(--clarify-ui-accent-text);
   }
 
   .stroke-black\/50 {
@@ -2757,6 +2891,10 @@
     stroke: var(--color-zinc-500);
   }
 
+  .stroke-2 {
+    stroke-width: 2px;
+  }
+
   .p-0 {
     padding: 0;
   }
@@ -2881,6 +3019,10 @@
     padding-top: calc(var(--spacing) * 6);
   }
 
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+
   .pt-14 {
     padding-top: calc(var(--spacing) * 14);
   }
@@ -2897,6 +3039,10 @@
     padding-right: calc(var(--spacing) * 4);
   }
 
+  .pr-9 {
+    padding-right: calc(var(--spacing) * 9);
+  }
+
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2905,6 +3051,10 @@
     padding-bottom: calc(var(--spacing) * 10);
   }
 
+  .pb-12 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
+
   .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -2964,6 +3114,11 @@
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
 
+  .text-3xl\/9 {
+    font-size: var(--text-3xl);
+    line-height: calc(var(--spacing) * 9);
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3069,6 +3224,10 @@
     letter-spacing: var(--tracking-widest);
   }
 
+  .break-words {
+    overflow-wrap: break-word;
+  }
+
   .wrap-anywhere {
     overflow-wrap: anywhere;
   }
@@ -3085,6 +3244,14 @@
     white-space: pre-wrap;
   }
 
+  .text-\(--clarify-error-accent-text\) {
+    color: var(--clarify-error-accent-text);
+  }
+
+  .text-\(--clarify-theme-tokens-colors-background\) {
+    color: var(--clarify-theme-tokens-colors-background);
+  }
+
   .text-\(--clarify-theme-tokens-colors-foreground\) {
     color: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -3237,26 +3404,14 @@
     color: var(--color-zinc-500);
   }
 
-  .text-zinc-600 {
-    color: var(--color-zinc-600);
-  }
-
   .text-zinc-700 {
     color: var(--color-zinc-700);
   }
 
-  .text-zinc-800 {
-    color: var(--color-zinc-800);
-  }
-
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
 
-  .text-zinc-950 {
-    color: var(--color-zinc-950);
-  }
-
   .capitalize {
     text-transform: capitalize;
   }
@@ -3285,6 +3440,10 @@
     opacity: .35;
   }
 
+  .opacity-80 {
+    opacity: .8;
+  }
+
   .opacity-100 {
     opacity: 1;
   }
@@ -3378,22 +3537,22 @@
     }
   }
 
-  .ring-\(--clarify-theme-tokens-colors-border\) {
-    --tw-ring-color: var(--clarify-theme-tokens-colors-border);
+  .shadow-zinc-900\/15 {
+    --tw-shadow-color: #18181b26;
   }
 
-  .ring-\(--clarify-ui-accent-border\) {
-    --tw-ring-color: var(--clarify-ui-accent-border);
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-zinc-900\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-zinc-900) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    }
   }
 
-  .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
-    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  .ring-\(--clarify-theme-tokens-colors-border\) {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-border);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .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-\(--clarify-ui-accent-border\) {
+    --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
   .ring-amber-300 {
@@ -3422,20 +3581,6 @@
     }
   }
 
-  .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-950\/10 {
-      --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
-    }
-  }
-
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -3453,8 +3598,8 @@
     outline-width: 1px;
   }
 
-  .blur-\[26px\] {
-    --tw-blur: blur(26px);
+  .blur-xl {
+    --tw-blur: blur(var(--blur-xl));
     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, );
   }
 
@@ -3487,12 +3632,6 @@
     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));
@@ -3544,6 +3683,11 @@
     will-change: transform;
   }
 
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -3557,8 +3701,16 @@
     --anchor-gap: calc(var(--spacing) * 2);
   }
 
-  .\[--width\:calc\(2\.625rem\+0\.5px\+50\%-min\(50\%\,calc\(var\(--container-lg\)\+\(--spacing\(8\)\)\)\)\)\] {
-    --width: calc(2.625rem + .5px + 50% - min(50%, calc(var(--container-lg) + (calc(var(--spacing) * 8)))));
+  .\[--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);
   }
 
   .ring-inset {
@@ -3595,8 +3747,8 @@
     opacity: 1;
   }
 
-  .placeholder\:text-zinc-500::placeholder {
-    color: var(--color-zinc-500);
+  .placeholder\:text-\(--clarify-ui-text-faint\)::placeholder {
+    color: var(--clarify-ui-text-faint);
   }
 
   .first\:pt-0:first-child {
@@ -3620,50 +3772,33 @@
   }
 
   @media (hover: hover) {
-    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
-      border-color: var(--clarify-theme-tokens-colors-primary);
+    .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .hover\:border-\(--clarify-ui-accent-border\):hover {
-      border-color: var(--clarify-ui-accent-border);
+    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
+      border-color: var(--clarify-theme-tokens-colors-primary);
     }
 
-    .hover\:border-zinc-300:hover {
-      border-color: var(--color-zinc-300);
+    .hover\:border-\(--clarify-ui-text-faint\):hover {
+      border-color: var(--clarify-ui-text-faint);
     }
 
     .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-accent-background\):hover {
+      background-color: var(--clarify-ui-accent-background);
     }
 
     .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-\[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-\[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-\[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-black\/50:hover {
       background-color: #00000080;
     }
@@ -3684,28 +3819,14 @@
       }
     }
 
-    .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 {
-      background-color: #18181b06;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-zinc-900\/2\.5:hover {
-        background-color: color-mix(in oklab, var(--color-zinc-900) 2.5%, transparent);
-      }
-    }
-
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
       color: var(--clarify-theme-tokens-colors-foreground);
     }
 
+    .hover\:text-\(--clarify-ui-text-strong\):hover {
+      color: var(--clarify-ui-text-strong);
+    }
+
     .hover\:text-emerald-700:hover {
       color: var(--color-emerald-700);
     }
@@ -3722,25 +3843,17 @@
       color: var(--color-zinc-300);
     }
 
-    .hover\:text-zinc-900:hover {
-      color: var(--color-zinc-900);
-    }
-
-    .hover\:text-zinc-950:hover {
-      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);
+    .hover\:opacity-90:hover {
+      opacity: .9;
     }
 
-    .hover\:ring-zinc-500:hover {
-      --tw-ring-color: var(--color-zinc-500);
+    .hover\:shadow-xs:hover {
+      --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);
     }
   }
 
@@ -3752,8 +3865,12 @@
     flex: none;
   }
 
-  .focus\:border-zinc-400:focus {
-    border-color: var(--color-zinc-400);
+  .focus\:border-\(--clarify-theme-tokens-colors-primary\):focus {
+    border-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .focus\:bg-\(--clarify-theme-tokens-colors-surface\):focus {
+    background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
   .focus\:bg-black\/50:focus {
@@ -3766,10 +3883,6 @@
     }
   }
 
-  .focus\:bg-white:focus {
-    background-color: var(--color-white);
-  }
-
   .focus\:text-zinc-200:focus {
     color: var(--color-zinc-200);
   }
@@ -3783,6 +3896,10 @@
     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-ui-accent-border\):focus {
+    --tw-ring-color: var(--clarify-ui-accent-border);
+  }
+
   .focus\:ring-emerald-400\/25:focus {
     --tw-ring-color: #00d29440;
   }
@@ -3852,6 +3969,10 @@
     transition-timing-function: var(--ease-out);
   }
 
+  .data-focus\:bg-\(--clarify-ui-hover-background\)[data-focus] {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .data-focus\:bg-white\/10[data-focus] {
     background-color: #ffffff1a;
   }
@@ -3862,10 +3983,6 @@
     }
   }
 
-  .data-focus\:bg-zinc-100[data-focus] {
-    background-color: var(--color-zinc-100);
-  }
-
   .data-focus\:text-white[data-focus] {
     color: var(--color-white);
   }
@@ -3889,8 +4006,12 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-zinc-300[data-open] {
-    border-color: var(--color-zinc-300);
+  .data-open\:border-\(--clarify-ui-text-faint\)[data-open] {
+    border-color: var(--clarify-ui-text-faint);
+  }
+
+  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
+    background-color: var(--clarify-ui-hover-background);
   }
 
   .data-open\:bg-white\/10[data-open] {
@@ -3903,10 +4024,6 @@
     }
   }
 
-  .data-open\:bg-zinc-50[data-open] {
-    background-color: var(--color-zinc-50);
-  }
-
   .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);
@@ -3922,12 +4039,12 @@
     }
   }
 
-  .data-selected\:text-emerald-300[data-selected] {
-    color: var(--color-emerald-300);
+  .data-selected\:text-\(--clarify-theme-tokens-colors-primary\)[data-selected] {
+    color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .data-selected\:text-emerald-700[data-selected] {
-    color: var(--color-emerald-700);
+  .data-selected\:text-emerald-300[data-selected] {
+    color: var(--color-emerald-300);
   }
 
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
@@ -3942,12 +4059,6 @@
     }
   }
 
-  @media (min-width: 416px) {
-    .min-\[416px\]\:max-w-sm {
-      max-width: var(--container-sm);
-    }
-  }
-
   @media (min-width: 40rem) {
     .sm\:flex {
       display: flex;
@@ -3965,8 +4076,8 @@
       width: auto;
     }
 
-    .sm\:max-w-\[min\(36\%\,16rem\)\] {
-      max-width: min(36%, 16rem);
+    .sm\:max-w-\(--clarify-server-url-max-width\) {
+      max-width: var(--clarify-server-url-max-width);
     }
 
     .sm\:max-w-xl {
@@ -3977,12 +4088,16 @@
       min-width: calc(var(--spacing) * 16);
     }
 
+    .sm\:grid-cols-\(--clarify-openapi-control-grid\) {
+      grid-template-columns: var(--clarify-openapi-control-grid);
+    }
+
     .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\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
     .sm\:flex-row {
@@ -3993,6 +4108,10 @@
       align-items: center;
     }
 
+    .sm\:items-start {
+      align-items: flex-start;
+    }
+
     .sm\:justify-between {
       justify-content: space-between;
     }
@@ -4102,12 +4221,16 @@
       display: none;
     }
 
-    .lg\:h-\[calc\(100vh-3\.5rem\)\] {
-      height: calc(100vh - 3.5rem);
+    .lg\:h-\(--clarify-sidebar-height\) {
+      height: var(--clarify-sidebar-height);
     }
 
-    .lg\:h-\[calc\(100vh-7rem\)\] {
-      height: calc(100vh - 7rem);
+    .lg\:h-\(--clarify-sidebar-height-with-tabs\) {
+      height: var(--clarify-sidebar-height-with-tabs);
+    }
+
+    .lg\:grid-cols-\(--clarify-layout-sidebar-grid\) {
+      grid-template-columns: var(--clarify-layout-sidebar-grid);
     }
 
     .lg\:grid-cols-2 {
@@ -4122,10 +4245,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
-      grid-template-columns: 18rem minmax(0, 1fr);
-    }
-
     .lg\:self-start {
       align-self: flex-start;
     }
@@ -4146,8 +4265,8 @@
       padding-inline: calc(var(--spacing) * 8);
     }
 
-    .lg\:py-\[15vh\] {
-      padding-block: 15vh;
+    .lg\:py-\(--clarify-search-dialog-padding-block-lg\) {
+      padding-block: var(--clarify-search-dialog-padding-block-lg);
     }
 
     .lg\:pt-6 {
@@ -4176,6 +4295,10 @@
       max-width: none;
     }
 
+    .xl\:grid-cols-\(--clarify-layout-sidebar-grid-wide\) {
+      grid-template-columns: var(--clarify-layout-sidebar-grid-wide);
+    }
+
     .xl\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4184,14 +4307,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
-      grid-template-columns: 20rem minmax(0, 1fr);
-    }
-
-    .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
-
     .xl\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4202,8 +4317,8 @@
   }
 
   @media (min-width: 96rem) {
-    .\32 xl\:\[--width\:--spacing\(10\)\] {
-      --width: calc(var(--spacing) * 10);
+    .\32 xl\:\[--width\:var\(--clarify-heading-anchor-width-wide\)\] {
+      --width: var(--clarify-heading-anchor-width-wide);
     }
   }
 
@@ -4233,16 +4348,6 @@
     display: none;
   }
 
-  :where(.dark\:divide-white\/5:where(.dark, .dark *) > :not(:last-child)) {
-    border-color: #ffffff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.dark\:divide-white\/5:where(.dark, .dark *) > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-  }
-
   :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
     border-color: #ffffff1a;
   }
@@ -4505,16 +4610,6 @@
     }
   }
 
-  .dark\:bg-white\/4:where(.dark, .dark *) {
-    background-color: #ffffff0a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/4:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
-    }
-  }
-
   .dark\:bg-white\/5:where(.dark, .dark *) {
     background-color: #ffffff0d;
   }
@@ -4525,36 +4620,6 @@
     }
   }
 
-  .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-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;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-zinc-400\/10:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 10%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
     background-color: #9f9fa933;
   }
@@ -4569,20 +4634,6 @@
     background-color: var(--color-zinc-600);
   }
 
-  .dark\:bg-zinc-800:where(.dark, .dark *) {
-    background-color: var(--color-zinc-800);
-  }
-
-  .dark\:bg-zinc-800\/40:where(.dark, .dark *) {
-    background-color: #27272a66;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-zinc-800\/40:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-zinc-800) 40%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-900:where(.dark, .dark *) {
     background-color: var(--color-zinc-900);
   }
@@ -4597,26 +4648,6 @@
     }
   }
 
-  .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);
   }
@@ -4631,25 +4662,6 @@
     }
   }
 
-  .dark\:bg-zinc-950\/95:where(.dark, .dark *) {
-    background-color: #09090bf2;
-  }
-
-  @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 *) {
-    -webkit-mask-image: linear-gradient(#fff, #0000);
-    mask-image: linear-gradient(#fff, #0000);
-  }
-
-  .dark\:fill-\(--clarify-ui-accent-background\):where(.dark, .dark *) {
-    fill: var(--clarify-ui-accent-background);
-  }
-
   .dark\:fill-white:where(.dark, .dark *) {
     fill: var(--color-white);
   }
@@ -4664,10 +4676,6 @@
     }
   }
 
-  .dark\:stroke-\(--clarify-ui-accent-text\):where(.dark, .dark *) {
-    stroke: var(--clarify-ui-accent-text);
-  }
-
   .dark\:stroke-white:where(.dark, .dark *) {
     stroke: var(--color-white);
   }
@@ -4682,10 +4690,6 @@
     }
   }
 
-  .dark\:stroke-zinc-400:where(.dark, .dark *) {
-    stroke: var(--color-zinc-400);
-  }
-
   .dark\:stroke-zinc-600:where(.dark, .dark *) {
     stroke: var(--color-zinc-600);
   }
@@ -4766,26 +4770,14 @@
     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);
   }
 
-  .dark\:text-zinc-300:where(.dark, .dark *) {
-    color: var(--color-zinc-300);
-  }
-
   .dark\:text-zinc-400:where(.dark, .dark *) {
     color: var(--color-zinc-400);
   }
 
-  .dark\:text-zinc-500:where(.dark, .dark *) {
-    color: var(--color-zinc-500);
-  }
-
   .dark\:opacity-55:where(.dark, .dark *) {
     opacity: .55;
   }
@@ -4860,20 +4852,6 @@
     }
   }
 
-  .dark\:ring-zinc-500\/20:where(.dark, .dark *) {
-    --tw-ring-color: #71717b33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:ring-zinc-500\/20:where(.dark, .dark *) {
-      --tw-ring-color: color-mix(in oklab, var(--color-zinc-500) 20%, transparent);
-    }
-  }
-
-  .dark\:ring-zinc-700:where(.dark, .dark *) {
-    --tw-ring-color: var(--color-zinc-700);
-  }
-
   .dark\:ring-zinc-800:where(.dark, .dark *) {
     --tw-ring-color: var(--color-zinc-800);
   }
@@ -4904,53 +4882,11 @@
     --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
   }
 
-  .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 *) {
-    --tw-prose-links: var(--color-white);
-  }
-
   .dark\:ring-inset:where(.dark, .dark *) {
     --tw-ring-inset: inset;
   }
 
   @media (hover: hover) {
-    .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);
-  }
-
-  @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-white\/15:where(.dark, .dark *):hover {
-        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
-      }
-    }
-
-    .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 {
       background-color: #ffffff0d;
     }
@@ -4971,83 +4907,13 @@
       }
     }
 
-    .dark\:hover\:bg-zinc-700:where(.dark, .dark *):hover {
-      background-color: var(--color-zinc-700);
-    }
-
-    .dark\:hover\:bg-zinc-800:where(.dark, .dark *):hover {
-      background-color: var(--color-zinc-800);
-    }
-
-    .dark\:hover\:bg-zinc-900:where(.dark, .dark *):hover {
-      background-color: var(--color-zinc-900);
-    }
-
     .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
       color: var(--color-emerald-200);
     }
 
-    .dark\:hover\:text-white:where(.dark, .dark *):hover {
-      color: var(--color-white);
-    }
-
-    .dark\:hover\:text-zinc-300:where(.dark, .dark *):hover {
-      color: var(--color-zinc-300);
-    }
-
     .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
       opacity: .8;
     }
-
-    .dark\:hover\:ring-zinc-600:where(.dark, .dark *):hover {
-      --tw-ring-color: var(--color-zinc-600);
-    }
-  }
-
-  .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
-    border-color: #fff3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .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;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:data-focus\:bg-white\/10:where(.dark, .dark *)[data-focus] {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
-  .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) {
@@ -5062,12 +4928,6 @@
     }
   }
 
-  @media (min-width: 64rem) {
-    .lg\:dark\:bg-zinc-950:where(.dark, .dark *) {
-      background-color: var(--color-zinc-950);
-    }
-  }
-
   @media (pointer: fine) {
     .pointer-fine\:hidden {
       display: none;