@clarify-labs/renderer 0.10.1 → 0.10.3

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);
@@ -95,7 +93,6 @@
     --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 +102,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 +118,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);
@@ -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;
@@ -557,6 +554,26 @@
     }
   }
 
+  :root, .clarify-app {
+    --clarify-ui-tab-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-tab-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 7%, var(--clarify-theme-tokens-colors-surface));
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-tab-indicator: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-tab-indicator: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 78%, var(--clarify-theme-tokens-colors-foreground));
+    }
+  }
+
   :root, .clarify-app {
     --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -641,10 +658,32 @@
   :root, .clarify-app {
     --clarify-code-border: #ffffff1a;
     --clarify-code-text: var(--color-zinc-100);
+    --clarify-code-control-text: var(--color-zinc-300);
     --clarify-code-muted: var(--color-zinc-400);
     --clarify-code-faint: var(--color-zinc-500);
     --clarify-code-control-background: #ffffff0f;
     --clarify-code-control-background-hover: #ffffff1a;
+    --clarify-code-control-background-active: #ffffff24;
+    --clarify-code-accent-text: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 58%, white);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-code-accent-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 20%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
@@ -832,6 +871,16 @@
     }
   }
 
+  .dark, .dark .clarify-app {
+    --clarify-ui-tab-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-tab-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 10%, var(--clarify-theme-tokens-colors-surface));
+    }
+  }
+
   .dark, .dark .clarify-app {
     --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-primary);
   }
@@ -1140,6 +1189,150 @@
     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-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-openai-example-header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: .25rem;
+    }
+
+    .clarify-openai-example-header > h3 {
+      margin-right: 0;
+    }
+
+    .clarify-openai-example-header-controls {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .clarify-openai-code-toolbar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .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 {
     font-size: var(--clarify-ui-menu-font-size);
     line-height: var(--clarify-ui-menu-line-height);
@@ -1177,11 +1370,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 {
@@ -1196,6 +1390,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);
@@ -1203,7 +1447,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);
   }
 
@@ -1220,11 +1464,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);
   }
@@ -1445,6 +1685,10 @@
     visibility: collapse;
   }
 
+  .invisible {
+    visibility: hidden;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -1489,8 +1733,20 @@
     inset-inline: 0;
   }
 
-  .inset-y-0 {
-    inset-block: 0;
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
+
+  .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 {
@@ -1509,10 +1765,22 @@
     top: calc(var(--spacing) * 3.5);
   }
 
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
 
+  .top-\[calc\(100\%\+0\.5rem\)\] {
+    top: calc(100% + .5rem);
+  }
+
+  .top-full {
+    top: 100%;
+  }
+
   .top-px {
     top: 1px;
   }
@@ -1533,6 +1801,10 @@
     right: calc(var(--spacing) * 4);
   }
 
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
+
   .bottom-0 {
     bottom: 0;
   }
@@ -1541,10 +1813,22 @@
     bottom: calc(var(--spacing) * 2);
   }
 
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
 
+  .bottom-\[calc\(100\%\+0\.5rem\)\] {
+    bottom: calc(100% + .5rem);
+  }
+
+  .-left-3\.5 {
+    left: calc(var(--spacing) * -3.5);
+  }
+
   .left-0 {
     left: 0;
   }
@@ -1553,18 +1837,10 @@
     left: 50%;
   }
 
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
 
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
-
   .-z-10 {
     z-index: calc(10 * -1);
   }
@@ -1585,6 +1861,18 @@
     z-index: 50;
   }
 
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+
   .container {
     width: 100%;
   }
@@ -1647,10 +1935,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);
   }
@@ -1991,10 +2287,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);
   }
@@ -2027,6 +2331,10 @@
     margin-right: calc(var(--spacing) * -1);
   }
 
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -2039,8 +2347,8 @@
     margin-bottom: -1px;
   }
 
-  .mb-1 {
-    margin-bottom: var(--spacing);
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
   }
 
   .mb-2 {
@@ -2055,6 +2363,10 @@
     margin-bottom: calc(var(--spacing) * 6);
   }
 
+  .mb-7 {
+    margin-bottom: calc(var(--spacing) * 7);
+  }
+
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -2083,6 +2395,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);
   }
@@ -2140,9 +2456,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 {
@@ -2175,6 +2491,11 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
+
   .size-12 {
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
@@ -2236,6 +2557,10 @@
     height: calc(var(--spacing) * 100);
   }
 
+  .h-auto {
+    height: auto;
+  }
+
   .h-full {
     height: 100%;
   }
@@ -2260,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);
   }
@@ -2272,12 +2605,24 @@
     min-height: 0;
   }
 
-  .min-h-11 {
-    min-height: calc(var(--spacing) * 11);
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
+
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
   }
 
-  .min-h-12 {
-    min-height: calc(var(--spacing) * 12);
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
   }
 
   .min-h-full {
@@ -2468,10 +2813,18 @@
     max-width: calc(var(--spacing) * 48);
   }
 
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
+
   .max-w-\[82\%\] {
     max-width: 82%;
   }
 
+  .max-w-\[calc\(100vw-5rem\)\] {
+    max-width: calc(100vw - 5rem);
+  }
+
   .max-w-full {
     max-width: 100%;
   }
@@ -2500,6 +2853,10 @@
     min-width: calc(var(--spacing) * 28);
   }
 
+  .min-w-max {
+    min-width: max-content;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -2581,10 +2938,18 @@
     cursor: default;
   }
 
+  .cursor-help {
+    cursor: help;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
 
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
   .resize {
     resize: both;
   }
@@ -2617,14 +2982,30 @@
     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-\[auto_minmax\(0\,1fr\)\] {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
   .flex-col {
     flex-direction: column;
   }
 
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
 
+  .place-items-center {
+    place-items: center;
+  }
+
   .items-center {
     align-items: center;
   }
@@ -2657,6 +3038,14 @@
     justify-content: flex-start;
   }
 
+  .gap-0 {
+    gap: 0;
+  }
+
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
   .gap-1 {
     gap: var(--spacing);
   }
@@ -2669,14 +3058,14 @@
     gap: calc(var(--spacing) * 2);
   }
 
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
-
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
 
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
+
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -2689,10 +3078,6 @@
     gap: calc(var(--spacing) * 6);
   }
 
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-
   .gap-px {
     gap: 1px;
   }
@@ -2863,10 +3248,19 @@
     border-radius: var(--radius-md);
   }
 
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
 
+  .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 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2907,6 +3301,16 @@
     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);
   }
@@ -2941,6 +3345,10 @@
     }
   }
 
+  .border-current {
+    border-color: currentColor;
+  }
+
   .border-emerald-400\/70 {
     border-color: #00d294b3;
   }
@@ -2989,6 +3397,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;
   }
@@ -3003,6 +3421,10 @@
     border-top-color: #0000;
   }
 
+  .bg-\(--clarify-code-accent-text\) {
+    background-color: var(--clarify-code-accent-text);
+  }
+
   .bg-\(--clarify-code-background\) {
     background-color: var(--clarify-code-background);
   }
@@ -3069,6 +3491,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);
   }
@@ -3117,20 +3549,28 @@
     background-color: var(--clarify-ui-subtle-background);
   }
 
+  .bg-\(--clarify-ui-tab-indicator\) {
+    background-color: var(--clarify-ui-tab-indicator);
+  }
+
   .bg-amber-50 {
     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);
   }
@@ -3145,17 +3585,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);
     }
   }
 
@@ -3187,43 +3657,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);
     }
   }
 
@@ -3249,12 +3735,24 @@
     background-color: var(--color-white);
   }
 
-  .bg-yellow-400 {
-    background-color: var(--color-yellow-400);
+  .bg-zinc-50\/50 {
+    background-color: #fafafa80;
+  }
+
+  @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;
   }
 
-  .bg-zinc-50 {
-    background-color: var(--color-zinc-50);
+  @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 {
@@ -3355,6 +3853,10 @@
     padding: calc(var(--spacing) * 1.5);
   }
 
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
   .p-2\.5 {
     padding: calc(var(--spacing) * 2.5);
   }
@@ -3455,6 +3957,10 @@
     padding-block: calc(var(--spacing) * 16);
   }
 
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -3491,18 +3997,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);
   }
@@ -3543,6 +4041,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
+
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -3559,6 +4061,10 @@
     text-align: right;
   }
 
+  .align-baseline {
+    vertical-align: baseline;
+  }
+
   .align-middle {
     vertical-align: middle;
   }
@@ -3591,6 +4097,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));
@@ -3671,6 +4182,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);
@@ -3716,6 +4232,14 @@
     white-space: pre-wrap;
   }
 
+  .text-\(--clarify-code-accent-text\) {
+    color: var(--clarify-code-accent-text);
+  }
+
+  .text-\(--clarify-code-control-text\) {
+    color: var(--clarify-code-control-text);
+  }
+
   .text-\(--clarify-code-faint\) {
     color: var(--clarify-code-faint);
   }
@@ -3788,10 +4312,6 @@
     color: var(--clarify-ui-text-faint);
   }
 
-  .text-\(--clarify-ui-text-foreground\) {
-    color: var(--clarify-ui-text-foreground);
-  }
-
   .text-\(--clarify-ui-text-soft\) {
     color: var(--clarify-ui-text-soft);
   }
@@ -3816,10 +4336,6 @@
     color: var(--color-amber-900);
   }
 
-  .text-amber-950 {
-    color: var(--color-amber-950);
-  }
-
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -3844,10 +4360,6 @@
     color: var(--color-emerald-900);
   }
 
-  .text-emerald-950 {
-    color: var(--color-emerald-950);
-  }
-
   .text-fuchsia-500 {
     color: var(--color-fuchsia-500);
   }
@@ -3872,10 +4384,6 @@
     color: var(--color-rose-900);
   }
 
-  .text-rose-950 {
-    color: var(--color-rose-950);
-  }
-
   .text-sky-500 {
     color: var(--color-sky-500);
   }
@@ -3892,10 +4400,6 @@
     color: var(--color-sky-900);
   }
 
-  .text-sky-950 {
-    color: var(--color-sky-950);
-  }
-
   .text-violet-500 {
     color: var(--color-violet-500);
   }
@@ -3964,13 +4468,13 @@
     mix-blend-mode: overlay;
   }
 
-  .shadow-\(--clarify-ui-accent-glow\) {
-    --tw-shadow: var(--clarify-ui-accent-glow);
+  .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-2xl {
-    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+  .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);
   }
 
@@ -4085,18 +4589,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;
@@ -4176,6 +4730,11 @@
     transition-delay: .15s;
   }
 
+  .duration-150 {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -4201,10 +4760,6 @@
     transition-timing-function: var(--ease-out);
   }
 
-  .will-change-transform {
-    will-change: transform;
-  }
-
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -4252,11 +4807,37 @@
     margin: 0;
   }
 
+  .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-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;
     }
@@ -4266,11 +4847,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;
   }
 
@@ -4282,6 +4867,11 @@
     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;
   }
@@ -4307,6 +4897,16 @@
   }
 
   @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%;
@@ -4318,10 +4918,24 @@
       border-color: var(--clarify-theme-tokens-colors-primary);
     }
 
+    .hover\:border-\(--clarify-ui-accent-border\):hover {
+      border-color: var(--clarify-ui-accent-border);
+    }
+
     .hover\:border-\(--clarify-ui-text-faint\):hover {
       border-color: var(--clarify-ui-text-faint);
     }
 
+    .hover\:border-white\/20:hover {
+      border-color: #fff3;
+    }
+
+    @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\):hover {
       background-color: var(--clarify-code-control-background-hover);
     }
@@ -4338,6 +4952,16 @@
       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);
     }
@@ -4366,10 +4990,20 @@
       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 {
@@ -4423,6 +5057,10 @@
     --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);
@@ -4437,10 +5075,24 @@
     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);
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4484,6 +5136,10 @@
     color: var(--clarify-code-text);
   }
 
+  .data-focus\:text-\(--clarify-ui-text-strong\)[data-focus] {
+    color: var(--clarify-ui-text-strong);
+  }
+
   .data-leave\:pointer-events-none[data-leave] {
     pointer-events: none;
   }
@@ -4503,16 +5159,30 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-\(--clarify-ui-text-faint\)[data-open] {
-    border-color: var(--clarify-ui-text-faint);
+  .data-open\:border-\(--clarify-ui-accent-border\)[data-open] {
+    border-color: var(--clarify-ui-accent-border);
   }
 
-  .data-open\:bg-\(--clarify-code-control-background-hover\)[data-open] {
-    background-color: var(--clarify-code-control-background-hover);
+  .data-open\:border-white\/20[data-open] {
+    border-color: #fff3;
   }
 
-  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
-    background-color: var(--clarify-ui-hover-background);
+  @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\:bg-\(--clarify-code-control-background-active\)[data-open] {
+    background-color: var(--clarify-code-control-background-active);
+  }
+
+  .data-open\:bg-\(--clarify-ui-active-background\)[data-open] {
+    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] {
@@ -4524,8 +5194,20 @@
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
-  .data-selected\:text-\(--clarify-theme-tokens-colors-primary\)[data-selected] {
-    color: var(--clarify-theme-tokens-colors-primary);
+  .data-selected\:bg-\(--clarify-code-accent-background\)[data-selected] {
+    background-color: var(--clarify-code-accent-background);
+  }
+
+  .data-selected\:bg-\(--clarify-ui-active-background\)[data-selected] {
+    background-color: var(--clarify-ui-active-background);
+  }
+
+  .data-selected\:text-\(--clarify-code-accent-text\)[data-selected] {
+    color: var(--clarify-code-accent-text);
+  }
+
+  .data-selected\:text-\(--clarify-ui-accent-text\)[data-selected] {
+    color: var(--clarify-ui-accent-text);
   }
 
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
@@ -4541,6 +5223,10 @@
   }
 
   @media (min-width: 40rem) {
+    .sm\:right-3 {
+      right: calc(var(--spacing) * 3);
+    }
+
     .sm\:mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
@@ -4561,6 +5247,10 @@
       width: auto;
     }
 
+    .sm\:w-fit {
+      width: fit-content;
+    }
+
     .sm\:max-w-\(--clarify-server-url-max-width\) {
       max-width: var(--clarify-server-url-max-width);
     }
@@ -4609,6 +5299,10 @@
       justify-content: flex-start;
     }
 
+    .sm\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+
     .sm\:gap-4 {
       gap: calc(var(--spacing) * 4);
     }
@@ -4617,12 +5311,12 @@
       padding: calc(var(--spacing) * 5);
     }
 
-    .sm\:px-1\.5 {
-      padding-inline: calc(var(--spacing) * 1.5);
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
     }
 
-    .sm\:px-3 {
-      padding-inline: calc(var(--spacing) * 3);
+    .sm\:px-1\.5 {
+      padding-inline: calc(var(--spacing) * 1.5);
     }
 
     .sm\:px-4 {
@@ -4641,14 +5335,14 @@
       padding-block: calc(var(--spacing) * 20);
     }
 
-    .sm\:pr-0 {
-      padding-right: 0;
-    }
-
     .sm\:pb-10 {
       padding-bottom: calc(var(--spacing) * 10);
     }
 
+    .sm\:text-center {
+      text-align: center;
+    }
+
     .sm\:text-left {
       text-align: left;
     }
@@ -4678,22 +5372,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);
     }
@@ -4906,13 +5588,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);
     }
   }
 
@@ -4926,13 +5608,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);
     }
   }
 
@@ -4946,23 +5628,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);
     }
   }
 
@@ -4986,16 +5668,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;
   }
@@ -5006,6 +5682,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;
   }
@@ -5096,6 +5782,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;
   }
@@ -5106,10 +5802,6 @@
     }
   }
 
-  .dark\:bg-white:where(.dark, .dark *) {
-    background-color: var(--color-white);
-  }
-
   .dark\:bg-white\/2\.5:where(.dark, .dark *) {
     background-color: #ffffff06;
   }
@@ -5130,6 +5822,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);
   }
@@ -5266,14 +5968,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;
   }
@@ -5283,11 +5985,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;
   }
@@ -5298,13 +5995,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);
     }
   }
 
@@ -5318,6 +6015,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;
   }
@@ -5328,6 +6035,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;
   }
@@ -5338,6 +6055,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;
   }
@@ -5393,6 +6120,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;
     }
@@ -5410,6 +6141,11 @@
     .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) {
@@ -5430,6 +6166,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;
   }
@@ -5749,6 +6498,12 @@
   inherits: false
 }
 
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;