@jaamd/jaad 0.0.0-stage → 1.0.0-rc.1

package/dist/jaad.css

@@ -0,0 +1,1331 @@
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-serif: var(--font-merriweather), Georgia, serif;
+    --font-mono: 'SF Mono', SF Mono, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    --color-black: #000;
+    --spacing: 0.25rem;
+    --container-lg: 32rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
+    --radius-sm: 0.25rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --blur-sm: 8px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-background: #faf8f5;
+    --color-surface: #ffffff;
+    --color-foreground: #3a3a3a;
+    --color-foreground-bright: #1a1a1a;
+    --color-primary: #2d2d2d;
+    --color-error: #c45959;
+    --color-warning: #d4a259;
+    --color-info: #5988c4;
+    --color-success: #5a9c7e;
+    --color-background-secondary: color-mix(in srgb, #3a3a3a 2%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-background-secondary: color-mix(in oklab, var(--color-foreground) 2%, var(--color-background));
+    }
+    --color-background-tertiary: color-mix(in srgb, #3a3a3a 6%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-background-tertiary: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
+    }
+    --color-surface-hover: color-mix(in srgb, #3a3a3a 5%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-surface-hover: color-mix(in oklab, var(--color-foreground) 5%, var(--color-background));
+    }
+    --color-border-light: color-mix(in srgb, #3a3a3a 11%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-border-light: color-mix(in oklab, var(--color-foreground) 11%, var(--color-background));
+    }
+    --color-border: color-mix(in srgb, #3a3a3a 17%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-border: color-mix(in oklab, var(--color-foreground) 17%, var(--color-background));
+    }
+    --color-border-dark: color-mix(in srgb, #3a3a3a 25%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-border-dark: color-mix(in oklab, var(--color-foreground) 25%, var(--color-background));
+    }
+    --color-foreground-muted: color-mix(in srgb, #3a3a3a 55%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-foreground-muted: color-mix(in oklab, var(--color-foreground) 55%, var(--color-background));
+    }
+    --color-foreground-secondary: color-mix(in srgb, #3a3a3a 72%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-foreground-secondary: color-mix(in oklab, var(--color-foreground) 72%, var(--color-background));
+    }
+    --color-primary-dark: var(--color-foreground-bright);
+    --color-primary-light: color-mix(in srgb, #2d2d2d 83%, #faf8f5);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-primary-light: color-mix(in oklab, var(--color-primary) 83%, var(--color-background));
+    }
+    --jaad-content-width: 56rem;
+    --jaad-chrome-width: calc(var(--jaad-content-width) + 2 * var(--jaad-sidebar-width) + 6rem);
+    --jaad-sidebar-width: 16rem;
+    --jaad-header-height: 4.25rem;
+    --jaad-page-padding: 2rem;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities;
+@layer components {
+  .jaad-chrome {
+    width: 100%;
+    max-width: var(--jaad-chrome-width);
+    margin-inline: auto;
+  }
+  .jaad-main {
+    flex: 1;
+    margin-block: 4rem;
+    padding-inline: var(--jaad-page-padding);
+  }
+  @media (min-width: 64rem) {
+    .jaad-main {
+      padding-inline: calc(var(--jaad-page-padding) * 2);
+    }
+  }
+  .jaad-main-bare {
+    flex: 1;
+  }
+  .jaad-body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    background-color: var(--color-background);
+    font-size: 14px;
+    --tw-leading: 1.6;
+    line-height: 1.6;
+    color: var(--color-foreground);
+    padding-top: var(--jaad-header-height);
+  }
+  .jaad-icon {
+    height: calc(var(--spacing) * 5);
+    width: calc(var(--spacing) * 5);
+  }
+  .jaad-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .jaad-sidebar {
+    width: var(--jaad-sidebar-width);
+    overflow-y: auto;
+  }
+  .jaad-sidebar::-webkit-scrollbar {
+    width: 6px;
+  }
+  .jaad-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .jaad-sidebar::-webkit-scrollbar-thumb {
+    background: rgb(from var(--color-primary) r g b / 0.2);
+    border-radius: 3px;
+  }
+  .jaad-sidebar::-webkit-scrollbar-thumb:hover {
+    background: rgb(from var(--color-primary) r g b / 0.4);
+  }
+  .jaad-icon-button {
+    display: flex;
+    height: calc(var(--spacing) * 9);
+    width: calc(var(--spacing) * 9);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-lg);
+    color: var(--color-foreground-secondary);
+    text-decoration-line: none;
+    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));
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground-bright);
+      }
+    }
+  }
+  .jaad-menu {
+    position: absolute;
+    top: 100%;
+    right: 0px;
+    z-index: 40;
+    margin-top: calc(var(--spacing) * 2);
+    width: calc(var(--spacing) * 44);
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .jaad-menu-item {
+    display: block;
+    border-radius: var(--radius-lg);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-foreground-secondary);
+    text-decoration-line: none;
+    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));
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #2d2d2d 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+        }
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground-bright);
+      }
+    }
+  }
+  .jaad-header {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 40;
+    height: var(--jaad-header-height);
+    background: var(--color-background);
+  }
+  .jaad-header-inner {
+    height: 100%;
+    max-width: var(--jaad-chrome-width);
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .jaad-header-row {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+  }
+  .jaad-brand {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    color: var(--color-foreground-bright);
+  }
+  .jaad-brand-link {
+    color: var(--color-primary);
+    text-decoration-line: none;
+  }
+  .jaad-logo {
+    height: calc(var(--spacing) * 7);
+  }
+  .jaad-header-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .jaad-footer {
+    margin-top: calc(var(--spacing) * 4);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-border-dark);
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .jaad-footer-credit {
+    margin-bottom: var(--spacing);
+    text-align: center;
+    font-size: 0.95rem;
+    --tw-leading: 1.6;
+    line-height: 1.6;
+    color: var(--color-foreground-muted);
+    font-style: italic;
+  }
+  .jaad-nav {
+    display: none;
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .jaad-nav-list {
+    display: flex;
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .jaad-nav-link {
+    color: var(--color-foreground-secondary);
+    text-decoration-line: none;
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground-bright);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .jaad-nav-mobile {
+    position: relative;
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .jaad-nav-mobile [aria-expanded='true'] [data-icon-open], .jaad-nav-mobile [aria-expanded='false'] [data-icon-close] {
+    display: none;
+  }
+  .jaad-nav-mobile-links {
+    padding: calc(var(--spacing) * 2);
+  }
+  .jaad-nav-mobile-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing);
+  }
+  .jaad-social-icon {
+    display: flex;
+    height: calc(var(--spacing) * 5);
+    width: calc(var(--spacing) * 5);
+    align-items: center;
+    justify-content: center;
+  }
+  .jaad-social-label {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .jaad-theme-icon-to-light {
+    display: none;
+  }
+  html.dark .jaad-theme-icon-to-dark {
+    display: none;
+  }
+  html.dark .jaad-theme-icon-to-light {
+    display: block;
+  }
+  .jaad-locale-switcher {
+    position: relative;
+  }
+  .jaad-locale-trigger {
+    width: auto;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .jaad-locale-code {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+  }
+  .jaad-locale-chevron {
+    height: calc(var(--spacing) * 3);
+    width: calc(var(--spacing) * 3);
+    flex-shrink: 0;
+  }
+  .jaad-locale-menu {
+    padding: var(--spacing);
+  }
+  .jaad-locale-item {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    &[aria-current] {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  .jaad-not-found {
+    margin: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-inline: calc(var(--spacing) * 16);
+    text-align: center;
+  }
+  .jaad-not-found-title {
+    margin-bottom: calc(var(--spacing) * 16);
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .jaad-not-found-text {
+    margin-bottom: calc(var(--spacing) * 32);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .jaad-search-trigger {
+    display: none;
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-foreground-muted);
+    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));
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-hover);
+      }
+    }
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .jaad-search-trigger-icon {
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 4);
+    flex-shrink: 0;
+  }
+  .jaad-search-trigger-label {
+    display: none;
+    @media (width >= 64rem) {
+      display: inline;
+    }
+  }
+  .jaad-search-shortcut {
+    border-radius: 0.25rem;
+    background-color: var(--color-background-secondary);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground-muted);
+  }
+  @media (width >= 48rem) {
+    .jaad-search-trigger-compact {
+      display: none;
+    }
+  }
+  .jaad-search-overlay {
+    position: fixed;
+    inset: 0px;
+    z-index: 50;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-top: 15vh;
+  }
+  .jaad-search-backdrop {
+    position: absolute;
+    inset: 0px;
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+    --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, );
+    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, );
+  }
+  .jaad-search-panel {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    max-width: var(--container-lg);
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .jaad-search-bar {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .jaad-search-bar-icon {
+    height: calc(var(--spacing) * 5);
+    width: calc(var(--spacing) * 5);
+    flex-shrink: 0;
+    color: var(--color-foreground-muted);
+  }
+  .jaad-search-input {
+    min-width: 0px;
+    flex: 1;
+    background-color: transparent;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-foreground);
+    --tw-outline-style: none;
+    outline-style: none;
+    &::placeholder {
+      color: var(--color-foreground-muted);
+    }
+  }
+  .jaad-search-close {
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background-color: var(--color-background-secondary);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-foreground-muted);
+  }
+  .jaad-search-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 1.5);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .jaad-search-filter {
+    cursor: pointer;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-foreground-muted);
+    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));
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground);
+      }
+    }
+  }
+  .jaad-search-filter[aria-pressed='true'] {
+    border-color: color-mix(in srgb, #2d2d2d 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+    background-color: color-mix(in srgb, #2d2d2d 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+    color: var(--color-foreground-bright);
+  }
+  .jaad-search-results {
+    max-height: calc(var(--spacing) * 96);
+    overflow-y: auto;
+    padding: calc(var(--spacing) * 2);
+  }
+  .jaad-search-group {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-top: calc(var(--spacing) * 3);
+    padding-bottom: var(--spacing);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+    color: var(--color-foreground-muted);
+    text-transform: uppercase;
+  }
+  .jaad-search-footer {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-foreground-muted);
+  }
+  .jaad-search-key {
+    border-radius: 0.25rem;
+    background-color: var(--color-background-secondary);
+    padding-inline: var(--spacing);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .jaad-search-result {
+    cursor: pointer;
+    border-radius: var(--radius-lg);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2.5);
+    text-align: left;
+    color: var(--color-foreground);
+    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));
+  }
+  @media (hover: hover) {
+    .jaad-search-result:not([aria-selected='true']):hover {
+      background-color: color-mix(in srgb, #2d2d2d 5%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .jaad-search-result:not([aria-selected='true']):hover {
+        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      }
+    }
+  }
+  .jaad-search-result[aria-selected='true'] {
+    background-color: color-mix(in srgb, #2d2d2d 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+    color: var(--color-foreground-bright);
+  }
+  .jaad-search-result-heading {
+    margin-left: calc(var(--spacing) * 3);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    border-color: var(--color-border);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .jaad-search-result-head {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .jaad-search-result-title {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .jaad-search-result-badge {
+    border-radius: 0.25rem;
+    background-color: var(--color-background-secondary);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    font-size: 0.65rem;
+    color: var(--color-foreground-muted);
+  }
+  .jaad-search-result-snippet {
+    margin-top: var(--spacing);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-foreground-secondary);
+  }
+  .jaad-search-mark {
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, #2d2d2d 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+    padding-inline: calc(var(--spacing) * 0.5);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground-bright);
+    font-style: normal;
+  }
+  .jaad-search-message {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 6);
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-foreground-muted);
+  }
+  .docs-content {
+    width: 100%;
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+    overflow-wrap: break-word;
+  }
+  .docs-updated {
+    margin-top: calc(var(--spacing) * 8);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-foreground-muted);
+  }
+  .docs-sidebar-left nav {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  .docs-sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .docs-sidebar-link {
+    display: block;
+    margin-left: -0.75rem;
+    padding: 0.25rem 0 0.25rem calc(0.75rem - 2px);
+    border-left: 2px solid transparent;
+    color: var(--color-foreground);
+    text-decoration: none;
+  }
+  .docs-sidebar-link:hover {
+    color: var(--color-foreground-bright);
+  }
+  .docs-sidebar-link[aria-current='page'] {
+    border-color: var(--color-foreground-bright);
+    color: var(--color-foreground-bright);
+    font-weight: 500;
+  }
+  .docs-sidebar-chapter {
+    margin-top: 1rem;
+  }
+  .docs-sidebar-chapter + li:not(.docs-sidebar-chapter) {
+    margin-top: 1rem;
+  }
+  .docs-sidebar-chapter-title {
+    margin: 0 0 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-foreground-muted);
+  }
+  .docs-sidebar-section {
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--color-border);
+  }
+  .docs-sidebar-section-title {
+    margin: 0 0 0.25rem;
+    color: var(--color-foreground-bright);
+    font-weight: 600;
+  }
+  .docs-toc-title {
+    margin: 0 0 0.5rem;
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-foreground-muted);
+  }
+  .docs-toc-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .docs-toc-link {
+    display: block;
+    padding: 0.1875rem 0 0.1875rem calc(0.625rem - 2px);
+    border-left: 2px solid transparent;
+    color: var(--color-foreground-muted);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-decoration: none;
+  }
+  .docs-toc-link-nested {
+    padding-left: calc(1.375rem - 2px);
+  }
+  .docs-toc-link:hover {
+    color: var(--color-foreground-bright);
+  }
+  .docs-toc-link[aria-current='location'] {
+    border-color: var(--color-foreground-bright);
+    color: var(--color-foreground-bright);
+  }
+  .docs-mobile-nav {
+    margin-bottom: 1.5rem;
+    border-top: 1px solid var(--color-border);
+    font-size: 0.875rem;
+  }
+  .docs-mobile-menu {
+    border-bottom: 1px solid var(--color-border);
+  }
+  .docs-mobile-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2.75rem;
+    color: var(--color-foreground-muted);
+    cursor: pointer;
+    list-style: none;
+  }
+  .docs-mobile-summary::-webkit-details-marker {
+    display: none;
+  }
+  .docs-mobile-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.25rem;
+  }
+  .docs-mobile-current {
+    color: var(--color-foreground-bright);
+    font-weight: 500;
+  }
+  .docs-mobile-tree {
+    padding: 0.25rem 0 1rem 0.75rem;
+  }
+  @media (min-width: 64rem) {
+    .docs-mobile-nav {
+      display: none;
+    }
+  }
+  .docs-page-nav {
+    margin-top: 3rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--color-border);
+  }
+  .docs-page-nav-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+  .docs-page-nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    max-width: calc(50% - 0.5rem);
+    min-height: 2.75rem;
+    color: var(--color-foreground-bright);
+    font-size: 0.875rem;
+    text-decoration: none;
+  }
+  .docs-page-nav-link:hover {
+    color: var(--color-foreground-muted);
+  }
+  .docs-page-nav-icon {
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+  }
+  .docs-page-nav-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .docs-page-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1.25rem;
+    margin-top: 2rem;
+    font-size: 0.8125rem;
+  }
+  .docs-page-action {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--color-foreground-muted);
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .docs-page-action:hover {
+    color: var(--color-foreground-bright);
+  }
+  .docs-page-action-icon {
+    flex: none;
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  @media (min-width: 64rem) {
+    .docs-page-actions {
+      flex-direction: column;
+      margin-top: 0;
+    }
+    .docs-page-action {
+      min-height: 1.75rem;
+    }
+    .docs-toc ~ .docs-page-actions {
+      margin-top: 1.5rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--color-border);
+    }
+  }
+  .docs-breadcrumbs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8125rem;
+    color: var(--color-foreground-muted);
+  }
+  .docs-breadcrumbs-link {
+    color: inherit;
+    text-decoration: none;
+  }
+  .docs-breadcrumbs-link:hover {
+    color: var(--color-foreground-bright);
+  }
+  @media (width < 64rem) {
+    [data-jaad-default-frame] .docs-breadcrumbs {
+      display: none;
+    }
+  }
+}
+@layer base {
+  html {
+    scroll-padding-top: calc(var(--jaad-header-height) + 1.5rem);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-size: 16px;
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+  }
+  h1, h2, h3 {
+    color: var(--color-foreground-bright);
+    font-family: var(--font-serif);
+  }
+  h2 {
+    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+  h3 {
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+    font-weight: normal;
+  }
+  a {
+    color: var(--color-primary);
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-primary-dark);
+      }
+    }
+  }
+  i {
+    color: var(--color-primary);
+    font-style: italic;
+  }
+}
+@layer utilities {
+  .font-brand {
+    font-family: var(--font-serif);
+    font-weight: 300;
+    font-style: italic;
+    letter-spacing: -0.01em;
+    line-height: 1;
+  }
+}
+html.dark {
+  color-scheme: dark;
+  --color-background: #0d1117;
+  --color-surface: #21262d;
+  --color-foreground: #c9d1d9;
+  --color-foreground-bright: #e6edf3;
+  --color-primary: #c9d1d9;
+  --color-error: #f85149;
+  --color-warning: #d29922;
+  --color-info: #58a6ff;
+  --color-success: #3fb950;
+  --color-background-secondary: color-mix(in srgb, #3a3a3a 7%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-background-secondary: color-mix(in oklab, var(--color-foreground) 7%, var(--color-background));
+  }
+  --color-background-tertiary: color-mix(in srgb, #3a3a3a 10%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-background-tertiary: color-mix(in oklab, var(--color-foreground) 10%, var(--color-background));
+  }
+  --color-surface-hover: color-mix(in srgb, #3a3a3a 22%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-surface-hover: color-mix(in oklab, var(--color-foreground) 22%, var(--color-background));
+  }
+  --color-border-light: color-mix(in srgb, #3a3a3a 13%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-border-light: color-mix(in oklab, var(--color-foreground) 13%, var(--color-background));
+  }
+  --color-border: color-mix(in srgb, #3a3a3a 22%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-border: color-mix(in oklab, var(--color-foreground) 22%, var(--color-background));
+  }
+  --color-border-dark: color-mix(in srgb, #3a3a3a 36%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-border-dark: color-mix(in oklab, var(--color-foreground) 36%, var(--color-background));
+  }
+  --color-foreground-muted: color-mix(in srgb, #3a3a3a 57%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-foreground-muted: color-mix(in oklab, var(--color-foreground) 57%, var(--color-background));
+  }
+  --color-foreground-secondary: color-mix(in srgb, #3a3a3a 71%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-foreground-secondary: color-mix(in oklab, var(--color-foreground) 71%, var(--color-background));
+  }
+  --color-primary-light: color-mix(in srgb, #2d2d2d 71%, #faf8f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-primary-light: color-mix(in oklab, var(--color-primary) 71%, var(--color-background));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-space-x-reverse: 0;
+      --tw-font-weight: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-tracking: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+    }
+  }
+}