@layer components {
  .ui-index {
    gap: var(--ui-space-sm);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    display: grid;
  }

  .ui-index > a {
    align-content: start;
    gap: var(--ui-space-2xs);
    padding: var(--ui-space-md) var(--ui-space-md) 1.125rem;
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-sheet);
    color: var(--ui-text-body);
    box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
    transition: box-shadow var(--ui-duration-quick) var(--ui-ease), translate var(--ui-duration-quick) var(--ui-ease);
    text-decoration: none;
    display: grid;
  }

  .ui-index > a:hover {
    box-shadow: var(--ui-elevation-rise-1h);
    translate: 0 -.5px;
  }

  .ui-index>a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-index > a > svg {
    width: 18px;
    height: 18px;
    margin-bottom: var(--ui-space-2xs);
    color: var(--ui-text-strong);
    stroke-width: 1.5px;
  }

  .ui-index > a > b {
    color: var(--ui-text-strong);
    font-size: .9375rem;
    font-weight: var(--ui-weight-medium);
    letter-spacing: -.006em;
    line-height: 1.4;
  }

  .ui-index > a > span {
    color: var(--ui-text-muted);
    font-size: .8125rem;
    line-height: 1.6;
  }

  .ui-index > a > b code {
    font: var(--ui-weight-medium) .875rem/1.45 var(--font-family-mono);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .ui-index[data-density="compact"] {
    gap: var(--ui-space-xs);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  }

  .ui-index[data-density="compact"] > a {
    padding: var(--ui-space-sm) var(--ui-space-md);
    gap: 2px;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-mono:"IBM Plex Mono"}}