@layer components {
  .ui-tree img {
    flex: none;
    align-self: center;
    width: 14px;
    height: 14px;
  }

  .ui-tree {
    overflow-wrap: anywhere;
    padding: var(--ui-space-sm) 0;
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-code);
    box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
    margin: 0;
    overflow-x: auto;
  }

  .ui-tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-tree ul ul {
    box-shadow: inset 1px 0 0 var(--ui-line-hair);
    margin-left: 1.375rem;
  }

  .ui-tree li > div > * {
    min-width: 0;
  }

  .ui-tree li > div {
    align-items: baseline;
    gap: 2px var(--ui-space-sm);
    padding: .3125rem var(--ui-space-md);
    flex-wrap: wrap;
    display: flex;
  }

  .ui-tree ul ul li > div {
    padding-left: var(--ui-space-sm);
  }

  .ui-tree svg {
    width: 14px;
    height: 14px;
    color: var(--ui-text-muted);
    flex: none;
    align-self: center;
  }

  .ui-tree b {
    color: var(--ui-text-strong);
    font: var(--ui-weight-regular) var(--ui-text-code)/1.5 var(--font-family-mono);
  }

  .ui-tree span {
    color: var(--ui-text-muted);
    font-size: .78125rem;
  }

  .ui-tree [data-mark="added"] > div {
    background: var(--ui-code-added);
  }

  .ui-tree [data-mark="added"] > div > b:after {
    content: " +";
    color: var(--ui-status-success);
  }
}

@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"}}