@layer components {
  .ui-logos {
    gap: var(--ui-space-2xs) var(--ui-space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    display: grid;
  }

  .ui-logos > a {
    align-items: center;
    gap: var(--ui-space-sm);
    min-width: 0;
    min-height: 2.75rem;
    padding: .5rem var(--ui-space-xs);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-body);
    transition: background var(--ui-duration-quick) var(--ui-ease), color var(--ui-duration-quick) var(--ui-ease);
    font-size: .8125rem;
    line-height: 1.5;
    text-decoration: none;
    display: flex;
  }

  .ui-logos > a:hover {
    color: var(--ui-text-strong);
    background: var(--ui-surface-chip);
  }

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

  .ui-logos > a > svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
  }

  .ui-logos > a > span {
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}: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))}}