@clarify-labs/renderer 0.6.7 → 0.7.1

package/output/renderer.css

@@ -70,6 +70,7 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% .013 17.38);
     --color-red-200: oklch(88.5% .062 18.334);
+    --color-red-400: oklch(70.4% .191 22.216);
     --color-red-500: oklch(63.7% .237 25.331);
     --color-red-700: oklch(50.5% .213 27.518);
     --color-amber-50: oklch(98.7% .022 95.277);
@@ -82,6 +83,8 @@
     --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);
@@ -165,6 +168,7 @@
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
@@ -500,7 +504,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 88%, transparent);
+      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 90%, transparent);
     }
   }
 
@@ -510,7 +514,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 68%, transparent);
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 72%, transparent);
     }
   }
 
@@ -520,7 +524,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 54%, transparent);
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 58%, transparent);
     }
   }
 
@@ -530,7 +534,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
+      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 6%, transparent);
     }
   }
 
@@ -540,7 +544,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
+      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 12%, transparent);
     }
   }
 
@@ -550,7 +554,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 4%, transparent);
+      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
     }
   }
 
@@ -560,7 +564,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 25%, transparent);
+      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 28%, transparent);
     }
   }
 
@@ -571,7 +575,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 9%, transparent);
+      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
     }
   }
 
@@ -581,7 +585,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 22%, transparent);
     }
   }
 
@@ -596,12 +600,50 @@
   }
 
   :root, .clarify-app {
+    --clarify-code-background: #020617;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-background: color-mix(in srgb, #020617 92%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-code-surface: #0f172a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-surface: color-mix(in srgb, #0f172a 88%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-code-header-background: #111827;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-header-background: color-mix(in srgb, #111827 86%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-code-border: #ffffff1a;
+    --clarify-code-text: var(--color-zinc-100);
+    --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-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-banner: calc(100vh - 6.5rem);
     --clarify-sidebar-height-with-tabs: calc(100vh - 7rem);
+    --clarify-sidebar-height-with-tabs-and-banner: calc(100vh - 10rem);
     --clarify-popover-max-width: min(32rem, calc(100vw - 2rem));
     --clarify-code-header-min-height: calc(3rem + 1px);
     --clarify-feedback-actions-grid: 1fr 1px 1fr;
@@ -662,6 +704,36 @@
     --clarify-preview-count-badge-line-height: var(--clarify-ui-description-line-height);
   }
 
+  .dark, .dark .clarify-app {
+    --clarify-ui-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 92%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-text-soft: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 74%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-text-faint: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 60%, transparent);
+    }
+  }
+
   .dark, .dark .clarify-app {
     --clarify-ui-hover-background: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -728,7 +800,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .dark, .dark .clarify-app {
-      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 28%, transparent);
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 30%, transparent);
     }
   }
 
@@ -742,6 +814,40 @@
     }
   }
 
+  .dark, .dark .clarify-app {
+    --clarify-code-background: #020617;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-code-background: color-mix(in srgb, #020617 94%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-code-surface: #0f172a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-code-surface: color-mix(in srgb, #0f172a 92%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-code-header-background: #111827;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-code-header-background: color-mix(in srgb, #111827 90%, var(--clarify-theme-tokens-colors-primary));
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-code-border: #ffffff1f;
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -770,13 +876,23 @@
     transition-property: max-height, opacity, transform;
   }
 
+  .clarify-code-copy-copied {
+    border-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-code-copy-copied {
+      border-color: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 48%, var(--clarify-code-border));
+    }
+  }
+
   .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);
+      background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 28%, var(--clarify-code-control-background));
     }
   }
 
@@ -786,10 +902,28 @@
 
   @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);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 42%, transparent);
     }
   }
 
+  .clarify-mdx-page .clarify-page-title-row:first-child {
+    margin-bottom: 1rem;
+  }
+
+  .clarify-mdx-page .clarify-prose > .clarify-page-title-row:first-child .clarify-page-title, .clarify-openapi-header .clarify-page-title {
+    letter-spacing: -.04em;
+    max-width: 48rem;
+    font-size: clamp(2rem, 5vw, 3rem);
+    line-height: 1.05;
+  }
+
+  .clarify-mdx-page .clarify-prose > .clarify-page-title-row:first-child + p, .clarify-openapi-header .lead {
+    max-width: 44rem;
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+
   .clarify-hero-pattern-mask:is(.dark *) {
     -webkit-mask-image: linear-gradient(#fff, #0000);
     mask-image: linear-gradient(#fff, #0000);
@@ -875,6 +1009,10 @@
     color: var(--clarify-ui-text-soft);
   }
 
+  .clarify-content-actions-primary {
+    max-width: min(11rem, 100vw - 7rem);
+  }
+
   .clarify-footer-link:hover, .clarify-footer-social:hover {
     color: var(--clarify-ui-text-strong);
   }
@@ -918,7 +1056,7 @@
     color: var(--clarify-ui-text-soft);
     font-size: var(--clarify-ui-navigation-section-font-size);
     line-height: var(--clarify-ui-navigation-section-line-height);
-    font-weight: 500;
+    font-weight: normal;
   }
 
   .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
@@ -965,18 +1103,40 @@
     min-height: 26rem;
   }
 
+  .clarify-preview-sidebar {
+    display: none;
+  }
+
+  .clarify-preview-mobile-navigation, .clarify-preview-mobile-menu-button {
+    display: block;
+  }
+
   @media (min-width: 64rem) {
     .clarify-preview-shell {
       grid-template-columns: 14rem minmax(0, 1fr);
     }
+
+    .clarify-preview-sidebar {
+      display: block;
+    }
+
+    .clarify-preview-mobile-navigation, .clarify-preview-mobile-menu-button {
+      display: none;
+    }
   }
 
   .clarify-preview-content-window {
-    max-height: 26rem;
+    max-height: 22rem;
     -webkit-mask-image: linear-gradient(#000 90%, #0000);
     mask-image: linear-gradient(#000 90%, #0000);
   }
 
+  @media (min-width: 40rem) {
+    .clarify-preview-content-window {
+      max-height: 26rem;
+    }
+  }
+
   .clarify-preview-body {
     height: calc(100% - 3rem);
   }
@@ -1003,12 +1163,14 @@
     line-height: var(--clarify-ui-description-line-height);
   }
 
-  .clarify-preview-api-content-embedded {
-    min-width: 42rem;
-  }
+  @media (min-width: 40rem) {
+    .clarify-preview-api-content-embedded {
+      min-width: 42rem;
+    }
 
-  .clarify-preview-api-content-openapi {
-    min-width: 48rem;
+    .clarify-preview-api-content-openapi {
+      min-width: 48rem;
+    }
   }
 
   .clarify-preview-api-content .not-prose {
@@ -1022,7 +1184,7 @@
   }
 
   .clarify-preview-openapi-window {
-    height: 34rem;
+    height: 28rem;
   }
 
   .clarify-preview-openapi-mask {
@@ -1030,7 +1192,13 @@
     mask-image: linear-gradient(#000 88%, #0000);
   }
 
-  .clarify-search-result[aria-selected="true"], .clarify-search-result-active {
+  @media (min-width: 40rem) {
+    .clarify-preview-openapi-window {
+      height: 34rem;
+    }
+  }
+
+  .clarify-search-result[aria-selected="true"], .clarify-search-result-active, .clarify-search-result:hover {
     background: var(--clarify-ui-hover-background);
   }
 
@@ -1042,7 +1210,7 @@
     font-weight: 600;
   }
 
-  .clarify-search-result[aria-selected="true"] .clarify-search-result-title {
+  .clarify-search-result[aria-selected="true"] .clarify-search-result-title, .clarify-search-result:hover .clarify-search-result-title {
     color: var(--clarify-ui-accent-text);
   }
 
@@ -1193,10 +1361,6 @@
     top: calc(var(--spacing) * 14);
   }
 
-  .top-16 {
-    top: calc(var(--spacing) * 16);
-  }
-
   .top-px {
     top: 1px;
   }
@@ -1319,6 +1483,10 @@
     margin-inline: auto;
   }
 
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
+
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
@@ -1390,26 +1558,62 @@
   }
 
   .prose {
-    --tw-prose-invert-body: oklch(70.5% .015 286.067);
-    --tw-prose-invert-headings: #fff;
-    --tw-prose-invert-links: oklch(76.5% .177 163.223);
-    --tw-prose-invert-links-hover: oklch(69.6% .17 162.48);
-    --tw-prose-invert-links-underline: oklab(69.6% -.162114 .0511766 / .3);
-    --tw-prose-invert-bold: #fff;
-    --tw-prose-invert-counters: oklch(70.5% .015 286.067);
-    --tw-prose-invert-bullets: oklch(44.2% .017 285.786);
-    --tw-prose-invert-hr: oklab(100% 0 5.96046e-8 / .05);
-    --tw-prose-invert-quotes: oklch(96.7% .001 286.375);
-    --tw-prose-invert-quote-borders: oklch(37% .013 285.805);
-    --tw-prose-invert-captions: oklch(70.5% .015 286.067);
-    --tw-prose-invert-code: #fff;
-    --tw-prose-invert-code-bg: oklab(37% .00354074 -.0125085 / .15);
-    --tw-prose-invert-code-ring: oklab(100% 0 5.96046e-8 / .1);
-    --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
-    --tw-prose-invert-td-borders: oklch(37% .013 285.805);
+    --tw-prose-invert-body: var(--clarify-ui-text-soft);
+    --tw-prose-invert-headings: var(--clarify-ui-text-strong);
+    --tw-prose-invert-links: var(--clarify-ui-accent-text);
+    --tw-prose-invert-links-hover: var(--clarify-theme-tokens-colors-accent);
+    --tw-prose-invert-links-underline: var(--clarify-theme-tokens-colors-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-links-underline: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 35%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-bold: var(--clarify-ui-text-strong);
+    --tw-prose-invert-counters: var(--clarify-ui-text-faint);
+    --tw-prose-invert-bullets: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-bullets: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 28%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-hr: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-hr: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 70%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-quotes: var(--clarify-ui-text);
+    --tw-prose-invert-quote-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-captions: var(--clarify-ui-text-faint);
+    --tw-prose-invert-code: var(--clarify-ui-text-strong);
+    --tw-prose-invert-code-bg: var(--clarify-theme-tokens-colors-code-background);
+    --tw-prose-invert-code-ring: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-th-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-td-borders: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-td-borders: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 78%, transparent);
+    }
+  }
+
+  .prose {
     color: var(--tw-prose-body);
-    font-size: 1rem;
-    line-height: 1.75rem;
+    font-size: .9375rem;
+    line-height: 1.625rem;
   }
 
   .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
@@ -1418,7 +1622,7 @@
   }
 
   .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-size: 1.125rem;
+    font-size: 1rem;
     line-height: 1.75rem;
   }
 
@@ -1463,7 +1667,7 @@
     border-color: var(--tw-prose-hr);
     border-top-width: 1px;
     max-width: none;
-    margin: 4rem -1rem;
+    margin: 2rem -1rem;
   }
 
   .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
@@ -1488,7 +1692,8 @@
 
   .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-headings);
-    margin-bottom: .5rem;
+    letter-spacing: -.025em;
+    margin-bottom: .75rem;
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 2rem;
@@ -1498,18 +1703,18 @@
     color: var(--tw-prose-headings);
     margin-top: 4rem;
     margin-bottom: .5rem;
-    font-size: 1.125rem;
+    font-size: 1.0625rem;
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: 1.625rem;
   }
 
   .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-headings);
     margin-top: 2.5rem;
     margin-bottom: .5rem;
-    font-size: 1rem;
+    font-size: .875rem;
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: 1.5rem;
   }
 
   .prose :where(img, video, figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
@@ -1597,6 +1802,12 @@
     margin-top: 0;
   }
 
+  .prose :where(.prose > h1:first-child + p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--clarify-ui-text-soft);
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+
   .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0 !important;
   }
@@ -1641,6 +1852,14 @@
     margin-top: calc(var(--spacing) * 8);
   }
 
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
+
+  .-mr-0\.5 {
+    margin-right: calc(var(--spacing) * -.5);
+  }
+
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
@@ -1685,8 +1904,8 @@
     margin-left: calc(var(--width) * -1);
   }
 
-  .-ml-1 {
-    margin-left: calc(var(--spacing) * -1);
+  .-ml-0\.5 {
+    margin-left: calc(var(--spacing) * -.5);
   }
 
   .-ml-76 {
@@ -1709,6 +1928,13 @@
     margin-left: auto;
   }
 
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .block {
     display: block;
   }
@@ -1747,6 +1973,11 @@
     height: calc(var(--spacing) * 2);
   }
 
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -1767,6 +1998,11 @@
     height: calc(var(--spacing) * 6);
   }
 
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
+
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1878,6 +2114,14 @@
     min-height: calc(var(--spacing) * 11);
   }
 
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
+
+  .min-h-full {
+    min-height: 100%;
+  }
+
   .min-h-screen {
     min-height: 100vh;
   }
@@ -1966,6 +2210,10 @@
     width: calc(var(--spacing) * 32);
   }
 
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -1978,6 +2226,14 @@
     width: calc(var(--spacing) * 325);
   }
 
+  .w-auto {
+    width: auto;
+  }
+
+  .w-fit {
+    width: fit-content;
+  }
+
   .w-full {
     width: 100%;
   }
@@ -2042,6 +2298,14 @@
     max-width: calc(var(--spacing) * 48);
   }
 
+  .max-w-\[82\%\] {
+    max-width: 82%;
+  }
+
+  .max-w-full {
+    max-width: 100%;
+  }
+
   .max-w-none {
     max-width: none;
   }
@@ -2100,11 +2364,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .-translate-y-1\.5 {
-    --tw-translate-y: calc(var(--spacing) * -1.5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2115,11 +2374,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .translate-y-1\.5 {
-    --tw-translate-y: calc(var(--spacing) * 1.5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .rotate-180 {
     rotate: 180deg;
   }
@@ -2141,6 +2395,10 @@
     animation: var(--animate-pulse);
   }
 
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+
   .cursor-default {
     cursor: default;
   }
@@ -2181,10 +2439,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .flex-col {
     flex-direction: column;
   }
@@ -2221,8 +2475,8 @@
     justify-content: flex-end;
   }
 
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * .5);
+  .justify-start {
+    justify-content: flex-start;
   }
 
   .gap-1 {
@@ -2351,6 +2605,10 @@
     }
   }
 
+  .self-end {
+    align-self: flex-end;
+  }
+
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2373,6 +2631,10 @@
     overflow-x: auto;
   }
 
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -2477,6 +2739,10 @@
     border-left-width: 1px;
   }
 
+  .border-\(--clarify-code-border\) {
+    border-color: var(--clarify-code-border);
+  }
+
   .border-\(--clarify-error-accent-text\) {
     border-color: var(--clarify-error-accent-text);
   }
@@ -2555,22 +2821,28 @@
     }
   }
 
-  .border-zinc-700 {
-    border-color: var(--color-zinc-700);
-  }
-
   .border-t-transparent {
     border-top-color: #0000;
   }
 
-  .border-b-white\/7\.5 {
-    border-bottom-color: #ffffff13;
+  .bg-\(--clarify-code-background\) {
+    background-color: var(--clarify-code-background);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-b-white\/7\.5 {
-      border-bottom-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
-    }
+  .bg-\(--clarify-code-control-background\) {
+    background-color: var(--clarify-code-control-background);
+  }
+
+  .bg-\(--clarify-code-faint\) {
+    background-color: var(--clarify-code-faint);
+  }
+
+  .bg-\(--clarify-code-header-background\) {
+    background-color: var(--clarify-code-header-background);
+  }
+
+  .bg-\(--clarify-code-surface\) {
+    background-color: var(--clarify-code-surface);
   }
 
   .bg-\(--clarify-skeleton-accent-background\) {
@@ -2607,17 +2879,7 @@
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
-    background-color: var(--clarify-theme-tokens-colors-surface);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
-      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
-    }
-  }
-
-  .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
+  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
@@ -2677,16 +2939,6 @@
     }
   }
 
-  .bg-black\/30 {
-    background-color: #0000004d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-black\/30 {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
-
   .bg-emerald-50\/50 {
     background-color: #ecfdf580;
   }
@@ -2725,10 +2977,18 @@
     }
   }
 
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
 
+  .bg-red-400 {
+    background-color: var(--color-red-400);
+  }
+
   .bg-rose-50 {
     background-color: var(--color-rose-50);
   }
@@ -2791,14 +3051,12 @@
     background-color: #0000;
   }
 
-  .bg-white\/5 {
-    background-color: #ffffff0d;
+  .bg-white {
+    background-color: var(--color-white);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-white\/5 {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
+  .bg-yellow-400 {
+    background-color: var(--color-yellow-400);
   }
 
   .bg-zinc-50 {
@@ -2819,20 +3077,18 @@
     }
   }
 
-  .bg-zinc-500 {
-    background-color: var(--color-zinc-500);
-  }
-
-  .bg-zinc-800 {
-    background-color: var(--color-zinc-800);
+  .bg-zinc-950 {
+    background-color: var(--color-zinc-950);
   }
 
-  .bg-zinc-900 {
-    background-color: var(--color-zinc-900);
+  .bg-zinc-950\/20 {
+    background-color: #09090b33;
   }
 
-  .bg-zinc-950 {
-    background-color: var(--color-zinc-950);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-zinc-950\/20 {
+      background-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
+    }
   }
 
   .fill-\(--clarify-theme-tokens-colors-foreground\) {
@@ -2857,6 +3113,10 @@
     fill: var(--color-white);
   }
 
+  .stroke-\(--clarify-code-muted\) {
+    stroke: var(--clarify-code-muted);
+  }
+
   .stroke-\(--clarify-theme-tokens-colors-foreground\) {
     stroke: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -2865,6 +3125,10 @@
     stroke: var(--clarify-theme-tokens-colors-muted);
   }
 
+  .stroke-\(--clarify-theme-tokens-colors-primary\) {
+    stroke: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .stroke-\(--clarify-ui-accent-text\) {
     stroke: var(--clarify-ui-accent-text);
   }
@@ -2887,14 +3151,14 @@
     stroke: var(--color-white);
   }
 
-  .stroke-zinc-500 {
-    stroke: var(--color-zinc-500);
-  }
-
   .stroke-2 {
     stroke-width: 2px;
   }
 
+  .object-contain {
+    object-fit: contain;
+  }
+
   .p-0 {
     padding: 0;
   }
@@ -3031,6 +3295,10 @@
     padding-top: calc(var(--spacing) * 16);
   }
 
+  .pt-\[6\.5rem\] {
+    padding-top: 6.5rem;
+  }
+
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -3039,6 +3307,10 @@
     padding-right: calc(var(--spacing) * 4);
   }
 
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
@@ -3047,6 +3319,14 @@
     padding-bottom: calc(var(--spacing) * 4);
   }
 
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -3071,10 +3351,6 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-7 {
-    padding-left: calc(var(--spacing) * 7);
-  }
-
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -3091,6 +3367,10 @@
     text-align: right;
   }
 
+  .align-middle {
+    vertical-align: middle;
+  }
+
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -3099,11 +3379,6 @@
     font-family: var(--font-sans);
   }
 
-  .text-2xl\/8 {
-    font-size: var(--text-2xl);
-    line-height: calc(var(--spacing) * 8);
-  }
-
   .text-2xs {
     font-size: var(--text-2xs);
     line-height: var(--tw-leading, var(--text-2xs--line-height));
@@ -3119,6 +3394,11 @@
     line-height: calc(var(--spacing) * 9);
   }
 
+  .text-\[11px\]\/4 {
+    font-size: 11px;
+    line-height: calc(var(--spacing) * 4);
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3244,6 +3524,18 @@
     white-space: pre-wrap;
   }
 
+  .text-\(--clarify-code-faint\) {
+    color: var(--clarify-code-faint);
+  }
+
+  .text-\(--clarify-code-muted\) {
+    color: var(--clarify-code-muted);
+  }
+
+  .text-\(--clarify-code-text\) {
+    color: var(--clarify-code-text);
+  }
+
   .text-\(--clarify-error-accent-text\) {
     color: var(--clarify-error-accent-text);
   }
@@ -3276,6 +3568,10 @@
     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);
   }
@@ -3304,10 +3600,6 @@
     color: var(--color-amber-950);
   }
 
-  .text-emerald-300 {
-    color: var(--color-emerald-300);
-  }
-
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -3388,10 +3680,6 @@
     color: var(--color-white);
   }
 
-  .text-zinc-100 {
-    color: var(--color-zinc-100);
-  }
-
   .text-zinc-300 {
     color: var(--color-zinc-300);
   }
@@ -3412,6 +3700,10 @@
     color: var(--color-zinc-900);
   }
 
+  .text-zinc-950 {
+    color: var(--color-zinc-950);
+  }
+
   .capitalize {
     text-transform: capitalize;
   }
@@ -3547,6 +3839,20 @@
     }
   }
 
+  .shadow-zinc-900\/20 {
+    --tw-shadow-color: #18181b33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-zinc-900\/20 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-zinc-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .ring-\(--clarify-code-border\) {
+    --tw-ring-color: var(--clarify-code-border);
+  }
+
   .ring-\(--clarify-theme-tokens-colors-border\) {
     --tw-ring-color: var(--clarify-theme-tokens-colors-border);
   }
@@ -3571,16 +3877,6 @@
     --tw-ring-color: var(--color-sky-300);
   }
 
-  .ring-white\/10 {
-    --tw-ring-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .ring-white\/10 {
-      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -3614,6 +3910,12 @@
     backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
+  .backdrop-blur-\[1px\] {
+    --tw-backdrop-blur: blur(1px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -3713,6 +4015,10 @@
     --width: var(--clarify-heading-anchor-width);
   }
 
+  .\[clarify\:search\] {
+    clarify: search;
+  }
+
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -3730,8 +4036,8 @@
       opacity: 1;
     }
 
-    .group-hover\/button\:stroke-zinc-400:is(:where(.group\/button):hover *) {
-      stroke: var(--color-zinc-400);
+    .group-hover\/button\:stroke-\(--clarify-code-text\):is(:where(.group\/button):hover *) {
+      stroke: var(--clarify-code-text);
     }
   }
 
@@ -3787,6 +4093,10 @@
       border-color: var(--clarify-ui-text-faint);
     }
 
+    .hover\:bg-\(--clarify-code-control-background-hover\):hover {
+      background-color: var(--clarify-code-control-background-hover);
+    }
+
     .hover\:bg-\(--clarify-theme-tokens-colors-background\):hover {
       background-color: var(--clarify-theme-tokens-colors-background);
     }
@@ -3799,24 +4109,8 @@
       background-color: var(--clarify-ui-hover-background);
     }
 
-    .hover\:bg-black\/50:hover {
-      background-color: #00000080;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-black\/50:hover {
-        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-      }
-    }
-
-    .hover\:bg-white\/7\.5:hover {
-      background-color: #ffffff13;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/7\.5:hover {
-        background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
-      }
+    .hover\:text-\(--clarify-code-text\):hover {
+      color: var(--clarify-code-text);
     }
 
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
@@ -3835,14 +4129,6 @@
       color: inherit;
     }
 
-    .hover\:text-zinc-200:hover {
-      color: var(--color-zinc-200);
-    }
-
-    .hover\:text-zinc-300:hover {
-      color: var(--color-zinc-300);
-    }
-
     .hover\:opacity-80:hover {
       opacity: .8;
     }
@@ -3869,22 +4155,16 @@
     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 {
-    background-color: #00000080;
+  .focus\:bg-\(--clarify-code-control-background-hover\):focus {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus\:bg-black\/50:focus {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
+  .focus\:bg-\(--clarify-theme-tokens-colors-surface\):focus {
+    background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
-  .focus\:text-zinc-200:focus {
-    color: var(--color-zinc-200);
+  .focus\:text-\(--clarify-code-text\):focus {
+    color: var(--clarify-code-text);
   }
 
   .focus\:opacity-100:focus {
@@ -3900,16 +4180,6 @@
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
-  .focus\:ring-emerald-400\/25:focus {
-    --tw-ring-color: #00d29440;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus\:ring-emerald-400\/25:focus {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
-    }
-  }
-
   .focus\:outline-none:focus {
     --tw-outline-style: none;
     outline-style: none;
@@ -3969,22 +4239,16 @@
     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;
+  .data-focus\:bg-\(--clarify-code-control-background-hover\)[data-focus] {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-focus\:bg-white\/10[data-focus] {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
+  .data-focus\:bg-\(--clarify-ui-hover-background\)[data-focus] {
+    background-color: var(--clarify-ui-hover-background);
   }
 
-  .data-focus\:text-white[data-focus] {
-    color: var(--color-white);
+  .data-focus\:text-\(--clarify-code-text\)[data-focus] {
+    color: var(--clarify-code-text);
   }
 
   .data-leave\:pointer-events-none[data-leave] {
@@ -4010,18 +4274,12 @@
     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-\(--clarify-code-control-background-hover\)[data-open] {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  .data-open\:bg-white\/10[data-open] {
-    background-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:bg-white\/10[data-open] {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
+  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
+    background-color: var(--clarify-ui-hover-background);
   }
 
   .data-open\:ring-2[data-open] {
@@ -4029,24 +4287,14 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .data-open\:ring-emerald-400\/25[data-open] {
-    --tw-ring-color: #00d29440;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:ring-emerald-400\/25[data-open] {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
-    }
+  .data-open\:ring-\(--clarify-ui-accent-border\)[data-open] {
+    --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\:text-emerald-300[data-selected] {
-    color: var(--color-emerald-300);
-  }
-
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
     --tw-outline-style: none;
     outline-style: none;
@@ -4060,6 +4308,10 @@
   }
 
   @media (min-width: 40rem) {
+    .sm\:mt-5 {
+      margin-top: calc(var(--spacing) * 5);
+    }
+
     .sm\:flex {
       display: flex;
     }
@@ -4104,10 +4356,6 @@
       flex-direction: row;
     }
 
-    .sm\:items-center {
-      align-items: center;
-    }
-
     .sm\:items-start {
       align-items: flex-start;
     }
@@ -4116,22 +4364,50 @@
       justify-content: space-between;
     }
 
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+
     .sm\:justify-start {
       justify-content: flex-start;
     }
 
+    .sm\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+
+    .sm\:p-5 {
+      padding: calc(var(--spacing) * 5);
+    }
+
     .sm\:px-1\.5 {
       padding-inline: calc(var(--spacing) * 1.5);
     }
 
+    .sm\:px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+
+    .sm\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
 
+    .sm\:py-4 {
+      padding-block: calc(var(--spacing) * 4);
+    }
+
     .sm\:py-20 {
       padding-block: calc(var(--spacing) * 20);
     }
 
+    .sm\:pr-0 {
+      padding-right: 0;
+    }
+
     .sm\:pb-10 {
       padding-bottom: calc(var(--spacing) * 10);
     }
@@ -4139,6 +4415,21 @@
     .sm\:text-left {
       text-align: left;
     }
+
+    .sm\:text-2xl\/8 {
+      font-size: var(--text-2xl);
+      line-height: calc(var(--spacing) * 8);
+    }
+
+    .sm\:opacity-0 {
+      opacity: 0;
+    }
+
+    @media (hover: hover) {
+      .sm\:group-hover\:opacity-100:is(:where(.group):hover *) {
+        opacity: 1;
+      }
+    }
   }
 
   @media (min-width: 48rem) {
@@ -4193,8 +4484,12 @@
       top: calc(var(--spacing) * 28);
     }
 
-    .lg\:top-30 {
-      top: calc(var(--spacing) * 30);
+    .lg\:top-40 {
+      top: calc(var(--spacing) * 40);
+    }
+
+    .lg\:top-\[6\.5rem\] {
+      top: 6.5rem;
     }
 
     .lg\:z-30 {
@@ -4225,10 +4520,18 @@
       height: var(--clarify-sidebar-height);
     }
 
+    .lg\:h-\(--clarify-sidebar-height-with-banner\) {
+      height: var(--clarify-sidebar-height-with-banner);
+    }
+
     .lg\:h-\(--clarify-sidebar-height-with-tabs\) {
       height: var(--clarify-sidebar-height-with-tabs);
     }
 
+    .lg\:h-\(--clarify-sidebar-height-with-tabs-and-banner\) {
+      height: var(--clarify-sidebar-height-with-tabs-and-banner);
+    }
+
     .lg\:grid-cols-\(--clarify-layout-sidebar-grid\) {
       grid-template-columns: var(--clarify-layout-sidebar-grid);
     }
@@ -4245,8 +4548,8 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .lg\:self-start {
-      align-self: flex-start;
+    .lg\:self-stretch {
+      align-self: stretch;
     }
 
     .lg\:overflow-y-auto {
@@ -4269,14 +4572,18 @@
       padding-block: var(--clarify-search-dialog-padding-block-lg);
     }
 
-    .lg\:pt-6 {
-      padding-top: calc(var(--spacing) * 6);
+    .lg\:pt-10 {
+      padding-top: calc(var(--spacing) * 10);
     }
 
     .lg\:pt-28 {
       padding-top: calc(var(--spacing) * 28);
     }
 
+    .lg\:pt-40 {
+      padding-top: calc(var(--spacing) * 40);
+    }
+
     .lg\:pb-8 {
       padding-bottom: calc(var(--spacing) * 8);
     }
@@ -4438,20 +4745,6 @@
     }
   }
 
-  .dark\:border-zinc-800:where(.dark, .dark *) {
-    border-color: var(--color-zinc-800);
-  }
-
-  .dark\:border-b-white\/5:where(.dark, .dark *) {
-    border-bottom-color: #ffffff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-b-white\/5:where(.dark, .dark *) {
-      border-bottom-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-  }
-
   .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -4492,6 +4785,16 @@
     }
   }
 
+  .dark\:bg-black\/30:where(.dark, .dark *) {
+    background-color: #0000004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-black\/30:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
+
   .dark\:bg-emerald-400\/5:where(.dark, .dark *) {
     background-color: #00d2940d;
   }
@@ -4582,24 +4885,10 @@
     }
   }
 
-  .dark\:bg-transparent:where(.dark, .dark *) {
-    background-color: #0000;
-  }
-
   .dark\:bg-white:where(.dark, .dark *) {
     background-color: var(--color-white);
   }
 
-  .dark\:bg-white\/1:where(.dark, .dark *) {
-    background-color: #ffffff03;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/1:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
-    }
-  }
-
   .dark\:bg-white\/2\.5:where(.dark, .dark *) {
     background-color: #ffffff06;
   }
@@ -4792,6 +5081,16 @@
     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;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:shadow-black\/40:where(.dark, .dark *) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
     --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -4887,16 +5186,6 @@
   }
 
   @media (hover: hover) {
-    .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
-      background-color: #ffffff0d;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-
     .dark\:hover\:bg-white\/10:where(.dark, .dark *):hover {
       background-color: #ffffff1a;
     }
@@ -5263,6 +5552,12 @@
   initial-value: 1;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes pulse {
   50% {
     opacity: .5;