@clarify-labs/renderer 0.4.0 → 0.6.0

package/output/renderer.css

@@ -134,6 +134,7 @@
     --container-lg: 33rem;
     --container-xl: 36rem;
     --container-2xl: 40rem;
+    --container-3xl: 50rem;
     --container-6xl: 72rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
@@ -141,6 +142,9 @@
     --text-sm--line-height: 1.5rem;
     --text-base: 1rem;
     --text-base--line-height: 1.75rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
     --text-3xl: 1.875rem;
     --text-3xl--line-height: 2.25rem;
     --text-5xl: 3rem;
@@ -151,14 +155,17 @@
     --font-weight-black: 900;
     --tracking-tight: -.025em;
     --tracking-wide: .025em;
+    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
     --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
     --default-transition-duration: .15s;
@@ -601,10 +608,15 @@
     --clarify-ui-menu-line-height: 1.5rem;
     --clarify-ui-description-font-size: .75rem;
     --clarify-ui-description-line-height: 1.25rem;
+    --clarify-ui-tight-letter-spacing: -.01em;
+    --clarify-ui-search-field-font-size: .9375rem;
+    --clarify-ui-search-field-line-height: 1.5rem;
     --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
     --clarify-ui-navigation-section-line-height: var(--clarify-ui-menu-line-height);
     --clarify-ui-navigation-section-badge-font-size: var(--clarify-ui-description-font-size);
     --clarify-ui-navigation-section-badge-line-height: var(--clarify-ui-menu-line-height);
+    --clarify-preview-count-badge-font-size: var(--clarify-ui-description-font-size);
+    --clarify-preview-count-badge-line-height: var(--clarify-ui-description-line-height);
   }
 
   .dark, .dark .clarify-app {
@@ -788,7 +800,7 @@
     color: var(--clarify-ui-text-strong);
     font-size: var(--clarify-ui-menu-font-size);
     line-height: var(--clarify-ui-menu-line-height);
-    letter-spacing: -.01em;
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
     font-weight: 600;
   }
 
@@ -800,7 +812,7 @@
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-menu-font-size);
     line-height: var(--clarify-ui-menu-line-height);
-    letter-spacing: -.01em;
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
     font-weight: 500;
   }
 
@@ -815,6 +827,14 @@
     color: var(--clarify-ui-text-strong);
   }
 
+  .clarify-navigation-link[data-muted="true"] {
+    color: var(--clarify-ui-text-faint);
+  }
+
+  .clarify-navigation-link[data-muted="true"]:hover {
+    color: var(--clarify-ui-text-soft);
+  }
+
   .clarify-navigation-section-badge {
     font-size: var(--clarify-ui-navigation-section-badge-font-size);
     line-height: var(--clarify-ui-navigation-section-badge-line-height);
@@ -824,6 +844,94 @@
     background: var(--clarify-ui-subtle-background);
   }
 
+  .clarify-tag, .clarify-code-panel-tag, .clarify-api-example-status, .clarify-page-navigation-label {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-page-navigation-title {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+  }
+
+  .clarify-mobile-tabs-select-trigger {
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
+  }
+
+  .clarify-preview-count-badge {
+    font-size: var(--clarify-preview-count-badge-font-size);
+    line-height: var(--clarify-preview-count-badge-line-height);
+  }
+
+  .clarify-preview-shell {
+    min-height: 26rem;
+  }
+
+  @media (min-width: 64rem) {
+    .clarify-preview-shell {
+      grid-template-columns: 14rem minmax(0, 1fr);
+    }
+  }
+
+  .clarify-preview-content-window {
+    max-height: 26rem;
+    -webkit-mask-image: linear-gradient(#000 90%, #0000);
+    mask-image: linear-gradient(#000 90%, #0000);
+  }
+
+  .clarify-preview-body {
+    height: calc(100% - 3rem);
+  }
+
+  .clarify-preview-endpoint-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  @media (min-width: 64rem) {
+    .clarify-preview-endpoint-grid {
+      grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
+    }
+  }
+
+  .clarify-preview-api-frame {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-api-content {
+    width: 100%;
+    max-width: none;
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-api-content-embedded {
+    min-width: 42rem;
+  }
+
+  .clarify-preview-api-content-openapi {
+    min-width: 48rem;
+  }
+
+  .clarify-preview-api-content .not-prose {
+    font-size: var(--clarify-ui-control-font-size);
+    line-height: var(--clarify-ui-control-line-height);
+  }
+
+  .clarify-preview-api-content pre {
+    font-size: var(--clarify-ui-description-font-size);
+    line-height: var(--clarify-ui-description-line-height);
+  }
+
+  .clarify-preview-openapi-window {
+    height: 34rem;
+  }
+
+  .clarify-preview-openapi-mask {
+    -webkit-mask-image: linear-gradient(#000 88%, #0000);
+    mask-image: linear-gradient(#000 88%, #0000);
+  }
+
   .clarify-search-result[aria-selected="true"], .clarify-search-result-active {
     background: var(--clarify-ui-hover-background);
   }
@@ -832,7 +940,7 @@
     color: var(--clarify-ui-text-strong);
     font-size: var(--clarify-ui-control-font-size);
     line-height: var(--clarify-ui-control-line-height);
-    letter-spacing: -.01em;
+    letter-spacing: var(--clarify-ui-tight-letter-spacing);
     font-weight: 600;
   }
 
@@ -852,8 +960,8 @@
 
   .clarify-search-field {
     color: var(--clarify-ui-text-strong);
-    font-size: .9375rem;
-    line-height: 1.5rem;
+    font-size: var(--clarify-ui-search-field-font-size);
+    line-height: var(--clarify-ui-search-field-line-height);
   }
 
   .clarify-search-field::placeholder {
@@ -951,6 +1059,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -1340,9 +1452,11 @@
 
   .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-links);
+    text-decoration: underline;
+    -webkit-text-decoration-color: var(--tw-prose-links-underline);
+    -webkit-text-decoration-color: var(--tw-prose-links-underline);
+    text-decoration-color: var(--tw-prose-links-underline);
     font-weight: 500;
-    -webkit-text-decoration: underline #0000;
-    text-decoration: underline #0000;
     transition-property: color, text-decoration-color;
     transition-duration: .15s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -1409,6 +1523,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -1505,6 +1623,16 @@
     display: table;
   }
 
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
+
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1575,6 +1703,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -1583,6 +1715,14 @@
     height: calc(var(--spacing) * 14);
   }
 
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
+
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
@@ -1695,6 +1835,10 @@
     max-width: var(--container-2xl);
   }
 
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
@@ -1707,6 +1851,22 @@
     max-width: calc(var(--spacing) * 48);
   }
 
+  .max-w-\[18rem\] {
+    max-width: 18rem;
+  }
+
+  .max-w-\[22rem\] {
+    max-width: 22rem;
+  }
+
+  .max-w-\[24rem\] {
+    max-width: 24rem;
+  }
+
+  .max-w-\[28rem\] {
+    max-width: 28rem;
+  }
+
   .max-w-\[36vw\] {
     max-width: 36vw;
   }
@@ -1751,6 +1911,10 @@
     flex-shrink: 0;
   }
 
+  .origin-top {
+    transform-origin: top;
+  }
+
   .origin-top-right {
     transform-origin: 100% 0;
   }
@@ -1760,11 +1924,21 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .-translate-y-1\.5 {
     --tw-translate-y: calc(var(--spacing) * -1.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-y-0 {
+    --tw-translate-y: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-y-1\.5 {
     --tw-translate-y: calc(var(--spacing) * 1.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1787,6 +1961,10 @@
     transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
   .cursor-default {
     cursor: default;
   }
@@ -1799,10 +1977,6 @@
     resize: both;
   }
 
-  .scroll-mt-20 {
-    scroll-margin-top: calc(var(--spacing) * 20);
-  }
-
   .scroll-mt-24 {
     scroll-margin-top: calc(var(--spacing) * 24);
   }
@@ -1823,6 +1997,10 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .grid-cols-\[1fr_1px_1fr\] {
     grid-template-columns: 1fr 1px 1fr;
   }
@@ -1903,12 +2081,30 @@
     gap: calc(var(--spacing) * 8);
   }
 
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-6 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-8 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -2015,12 +2211,16 @@
     border-radius: var(--radius-2xl);
   }
 
-  .rounded-\[var\(--clarify-theme-tokens-radius-lg\)\] {
-    border-radius: var(--clarify-theme-tokens-radius-lg);
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
   }
 
-  .rounded-\[var\(--clarify-theme-tokens-radius-xl\)\] {
-    border-radius: var(--clarify-theme-tokens-radius-xl);
+  .rounded-\[1\.5rem\] {
+    border-radius: 1.5rem;
+  }
+
+  .rounded-\[1\.75rem\] {
+    border-radius: 1.75rem;
   }
 
   .rounded-full {
@@ -2059,6 +2259,11 @@
     border-top-width: 1px;
   }
 
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -2073,16 +2278,12 @@
     border-color: var(--clarify-theme-tokens-colors-border);
   }
 
-  .border-\(--clarify-ui-accent-border\) {
-    border-color: var(--clarify-ui-accent-border);
-  }
-
-  .border-\[color\:var\(--clarify-theme-tokens-colors-border\)\] {
-    border-color: var(--clarify-theme-tokens-colors-border);
+  .border-\(--clarify-theme-tokens-colors-primary\) {
+    border-color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .border-\[var\(--clarify-theme-tokens-colors-primary\)\] {
-    border-color: var(--clarify-theme-tokens-colors-primary);
+  .border-\(--clarify-ui-accent-border\) {
+    border-color: var(--clarify-ui-accent-border);
   }
 
   .border-amber-200 {
@@ -2219,6 +2420,10 @@
     background-color: var(--clarify-ui-accent-background);
   }
 
+  .bg-\(--clarify-ui-subtle-background\) {
+    background-color: var(--clarify-ui-subtle-background);
+  }
+
   .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -2229,10 +2434,6 @@
     }
   }
 
-  .bg-\[var\(--clarify-theme-tokens-colors-surface\)\] {
-    background-color: var(--clarify-theme-tokens-colors-surface);
-  }
-
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
@@ -2247,6 +2448,10 @@
     }
   }
 
+  .bg-amber-400 {
+    background-color: var(--color-amber-400);
+  }
+
   .bg-amber-400\/10 {
     background-color: #fcbb001a;
   }
@@ -2291,6 +2496,10 @@
     background-color: var(--color-emerald-100);
   }
 
+  .bg-emerald-400 {
+    background-color: var(--color-emerald-400);
+  }
+
   .bg-emerald-400\/10 {
     background-color: #00d2941a;
   }
@@ -2329,6 +2538,10 @@
     }
   }
 
+  .bg-rose-400 {
+    background-color: var(--color-rose-400);
+  }
+
   .bg-rose-400\/15 {
     background-color: #ff667f26;
   }
@@ -2451,12 +2664,16 @@
     }
   }
 
-  .bg-zinc-950\/\[0\.025\] {
+  .bg-zinc-950 {
+    background-color: var(--color-zinc-950);
+  }
+
+  .bg-zinc-950\/2\.5 {
     background-color: #09090b06;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-950\/\[0\.025\] {
+    .bg-zinc-950\/2\.5 {
       background-color: color-mix(in oklab, var(--color-zinc-950) 2.5%, transparent);
     }
   }
@@ -2552,6 +2769,10 @@
     padding: calc(var(--spacing) * 1.5);
   }
 
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -2652,6 +2873,10 @@
     padding-top: calc(var(--spacing) * 3);
   }
 
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -2724,6 +2949,11 @@
     font-family: var(--font-sans);
   }
 
+  .text-2xl\/8 {
+    font-size: var(--text-2xl);
+    line-height: calc(var(--spacing) * 8);
+  }
+
   .text-2xs {
     font-size: var(--text-2xs);
     line-height: var(--tw-leading, var(--text-2xs--line-height));
@@ -2734,16 +2964,21 @@
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
 
-  .text-\[0\.625rem\]\/6 {
-    font-size: .625rem;
-    line-height: calc(var(--spacing) * 6);
-  }
-
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
 
+  .text-base\/6 {
+    font-size: var(--text-base);
+    line-height: calc(var(--spacing) * 6);
+  }
+
+  .text-lg\/7 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 7);
+  }
+
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2759,22 +2994,29 @@
     line-height: calc(var(--spacing) * 6);
   }
 
+  .text-sm\/7 {
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 7);
+  }
+
+  .text-xl\/7 {
+    font-size: var(--text-xl);
+    line-height: calc(var(--spacing) * 7);
+  }
+
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
-  .text-xs\/6 {
+  .text-xs\/5 {
     font-size: var(--text-xs);
-    line-height: calc(var(--spacing) * 6);
-  }
-
-  .text-\[0\.6875rem\] {
-    font-size: .6875rem;
+    line-height: calc(var(--spacing) * 5);
   }
 
-  .text-\[0\.8125rem\] {
-    font-size: .8125rem;
+  .text-xs\/6 {
+    font-size: var(--text-xs);
+    line-height: calc(var(--spacing) * 6);
   }
 
   .leading-5 {
@@ -2807,11 +3049,6 @@
     font-weight: var(--font-weight-semibold);
   }
 
-  .tracking-\[-0\.01em\] {
-    --tw-tracking: -.01em;
-    letter-spacing: -.01em;
-  }
-
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2822,6 +3059,11 @@
     letter-spacing: var(--tracking-wide);
   }
 
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2839,6 +3081,10 @@
     white-space: nowrap;
   }
 
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
   .text-\(--clarify-theme-tokens-colors-foreground\) {
     color: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -2855,16 +3101,20 @@
     color: var(--clarify-ui-accent-text);
   }
 
-  .text-\[var\(--clarify-theme-tokens-colors-foreground\)\] {
-    color: var(--clarify-theme-tokens-colors-foreground);
+  .text-\(--clarify-ui-text\) {
+    color: var(--clarify-ui-text);
   }
 
-  .text-\[var\(--clarify-theme-tokens-colors-muted\)\] {
-    color: var(--clarify-theme-tokens-colors-muted);
+  .text-\(--clarify-ui-text-faint\) {
+    color: var(--clarify-ui-text-faint);
   }
 
-  .text-\[var\(--clarify-theme-tokens-colors-primary\)\] {
-    color: var(--clarify-theme-tokens-colors-primary);
+  .text-\(--clarify-ui-text-soft\) {
+    color: var(--clarify-ui-text-soft);
+  }
+
+  .text-\(--clarify-ui-text-strong\) {
+    color: var(--clarify-ui-text-strong);
   }
 
   .text-amber-500 {
@@ -2903,6 +3153,10 @@
     color: var(--color-emerald-600);
   }
 
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
+
   .text-emerald-800 {
     color: var(--color-emerald-800);
   }
@@ -3044,6 +3298,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3228,12 +3487,24 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[max-height\,opacity\,transform\] {
+    transition-property: max-height, opacity, transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3244,6 +3515,11 @@
     transition-delay: .15s;
   }
 
+  .duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
   .duration-300 {
     --tw-duration: .3s;
     transition-duration: .3s;
@@ -3259,6 +3535,11 @@
     transition-timing-function: var(--ease-in-out);
   }
 
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
   .will-change-transform {
     will-change: transform;
   }
@@ -3359,6 +3640,10 @@
       background-color: var(--clarify-theme-tokens-colors-surface);
     }
 
+    .hover\:bg-\(--clarify-ui-hover-background\):hover {
+      background-color: var(--clarify-ui-hover-background);
+    }
+
     .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
       background-color: var(--clarify-theme-tokens-colors-foreground);
     }
@@ -3513,6 +3798,29 @@
     outline-style: none;
   }
 
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-\(--clarify-theme-tokens-colors-primary\):focus-visible {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  .focus-visible\:ring-offset-2:focus-visible {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus-visible\:ring-offset-\(--clarify-theme-tokens-colors-background\):focus-visible {
+    --tw-ring-offset-color: var(--clarify-theme-tokens-colors-background);
+  }
+
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3802,6 +4110,10 @@
       height: calc(100vh - 7rem);
     }
 
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -3868,10 +4180,18 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
     .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 20rem minmax(0, 1fr);
     }
 
+    .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
     .xl\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4185,6 +4505,16 @@
     }
   }
 
+  .dark\:bg-white\/4:where(.dark, .dark *) {
+    background-color: #ffffff0a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/4:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+    }
+  }
+
   .dark\:bg-white\/5:where(.dark, .dark *) {
     background-color: #ffffff0d;
   }
@@ -4215,16 +4545,6 @@
     }
   }
 
-  .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
-    background-color: #ffffff0a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-400\/10:where(.dark, .dark *) {
     background-color: #9f9fa91a;
   }
@@ -4311,6 +4631,16 @@
     }
   }
 
+  .dark\:bg-zinc-950\/95:where(.dark, .dark *) {
+    background-color: #09090bf2;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-zinc-950\/95:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-zinc-950) 95%, transparent);
+    }
+  }
+
   .dark\:mask-\[linear-gradient\(white\,transparent\)\]:where(.dark, .dark *) {
     -webkit-mask-image: linear-gradient(#fff, #0000);
     mask-image: linear-gradient(#fff, #0000);
@@ -4688,6 +5018,10 @@
     background-color: var(--color-zinc-950);
   }
 
+  .dark\:focus-visible\:ring-offset-zinc-950:where(.dark, .dark *):focus-visible {
+    --tw-ring-offset-color: var(--color-zinc-950);
+  }
+
   .dark\:data-focus\:bg-white\/10:where(.dark, .dark *)[data-focus] {
     background-color: #ffffff1a;
   }
@@ -5068,4 +5402,10 @@
   inherits: false;
   initial-value: 1;
 }
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
 /*$vite$:1*/