@layer components {
  .ui-table {
    border: 1px solid var(--ui-line-contour);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-sheet);
    scrollbar-width: thin;
    min-width: 0;
    overflow: auto;
  }

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

  .ui-table table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: var(--ui-text-small);
    line-height: 1.5;
  }

  .ui-table thead th{position:sticky;top:0;z-index:1;padding:.625rem var(--ui-space-md);background:var(--ui-surface-sheet-lo);color:var(--ui-text-muted);font:var(--ui-weight-regular) var(--ui-text-label)/1.5 var(--font-family-sans);letter-spacing:var(--ui-tracking-label);text-transform:none;text-align:start;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--ui-line-divider)}

  .ui-table :is(td, tbody th) {
    padding: .6875rem var(--ui-space-md);
    color: var(--ui-text-body);
    font-weight: var(--ui-weight-regular);
    text-align: start;
    vertical-align: top;
    border-top: 1px solid var(--ui-line-hair);
  }

  .ui-table tr:first-child > :is(td, th) {
    border-top: 0;
  }

  .ui-table tbody tr {
    transition: background-color var(--ui-duration-quick);
  }

  .ui-table tbody tr:hover {
    background: light-dark(oklch(22% .002 265 / .022), oklch(100% 0 none / .025));
  }

  .ui-table tbody tr > :first-child {
    color: var(--ui-text-strong);
  }

  .ui-table :is(td, th)[data-align="end"] {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-table thead th code {
    color: inherit;
    box-shadow: none;
    font: inherit;
    font-family: var(--font-family-mono);
    letter-spacing: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: .75rem;
  }

  .ui-table :is(td, tbody th) code {
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface-chip);
    color: var(--ui-text-strong);
    box-shadow: none;
    font: var(--ui-weight-regular) .8125rem/1.6 var(--font-family-mono);
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .125em .375em;
  }

  .ui-table :is(td:first-child, tbody th) code {
    white-space: normal;
    overflow-wrap: normal;
  }

  .ui-table :is(td, tbody th) .ui-preview {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--ui-space-xs);
    border-radius: var(--ui-radius-sm);
    vertical-align: -.3em;
    box-shadow: inset 0 0 0 1px var(--ui-line-contour);
    display: inline-block;
  }

  .ui-table[data-density="compact"] :is(th, td) {
    padding-block: .4375rem;
  }

  .ui-table[data-variant="lookup"] tbody th {
    white-space: nowrap;
    width: 1%;
  }

  .ui-table[data-variant="lookup"] td code {
    white-space: normal;
    line-height: 1.5;
  }

  .ui-table :is(td, tbody th) ul {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .ui-table :is(td, tbody th) .ui-disclosure > summary {
    min-height: 2.25rem;
  }

  .ui-table-caption {
    justify-content: space-between;
    gap: var(--ui-space-md);
    padding: var(--ui-space-sm) var(--ui-space-md);
    color: var(--ui-text-muted);
    box-shadow: inset 0 1px 0 var(--ui-line-hair);
    font-size: .75rem;
    display: flex;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--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-sans:"Geist", "Noto Sans TC";--font-mono:"IBM Plex Mono"}}