@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"}}@layer components {
  .ref-table table {
    table-layout: fixed;
  }

  .ref-table tbody :is(th, td) {
    vertical-align: baseline;
  }

  .ref-table tbody th a {
    text-decoration: none;
  }

  .ref-table :is(thead th, tbody th):first-child {
    width: calc(var(--ref-key-width, 9.75rem) + .75rem);
  }

  @media (width < 40rem) {
    .ref-table:not([data-modes]) table {
      min-width: 18rem;
    }

    .ref-table thead th {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .ref-table:not([data-modes]) :is(thead th, tbody th):first-child {
      width: calc(min(var(--ref-key-width, 9.25rem), 10rem, 38vw) + .75rem);
    }

    .ref-table tbody th {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .ref-table :is(.ref-property, .ref-declaration-value) {
      white-space: normal;
    }

    .ref-table .ref-declaration-value {
      overflow-wrap: anywhere;
    }

    .ref-table.ui-table tbody th code {
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  .ref-table var {
    color: var(--ui-text-muted);
    font-style: italic;
  }

  .ref-table.ui-table :is(td, tbody th) code {
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: .8125rem;
    line-height: 1.6;
  }

  .ref-table.ui-table tbody th code {
    color: var(--ui-text-strong);
    white-space: nowrap;
  }

  .ref-table.ui-table td code {
    color: var(--ui-text-body);
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .75rem;
  }

  .ref-table tbody th a:hover code {
    text-decoration: underline;
    text-decoration-color: var(--ui-line-mark);
    text-underline-offset: .2em;
  }

  .ref-table tbody th a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-xs)}

  .ref-declarations {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .75rem/1.75 var(--font-family-mono);
    display: grid;
  }

  .ref-property, .ref-declaration-value {
    white-space: nowrap;
  }

  .ref-property {
    color: var(--ui-text-body);
  }

  .ref-value-table tbody th {
    white-space: nowrap;
  }

  .ref-value-table[data-modes] table {
    min-width: 36rem;
  }

  .ref-table[data-columns="4"] table {
    min-width: 34rem;
  }

  .ref-value-table[data-modes] td code {
    white-space: nowrap;
  }

  .ref-value-note {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .75rem/1.6 var(--font-family-mono);
    white-space: nowrap;
    margin-inline-start: .75rem;
  }

  .ref-long-value {
    min-width: 0;
    margin: 0;
  }

  .ref-long-value summary {
    cursor: pointer;
    align-items: baseline;
    gap: .375rem;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .ref-long-value summary::-webkit-details-marker {
    display: none;
  }

  .ref-long-value summary:before {
    content: "";
    background: var(--ui-text-muted);
    flex: none;
    align-self: center;
    width: 12px;
    height: 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .ref-table .ref-long-value summary code {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
    overflow: hidden;
  }

  .ref-long-value summary:hover code {
    color: var(--ui-text-strong);
  }

  .ref-long-value summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-xs)}

  .ref-table :is(.ref-long-value[open] > summary, .ref-long-value:not([open]) > code) {
    display: none;
  }

  .ref-table .ref-long-value > code {
    white-space: pre-wrap;
    display: block;
  }

  .ref-value-table tr:target > * {
    background: light-dark(oklch(22% .002 265 / .05), oklch(100% 0 none / .06));
  }

  .ref-example-scene {
    width: min(100%, 32rem);
  }

  .ui-stage.ref-surface-scale {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
    gap: 2rem;
    padding: 2rem;
    display: grid;
  }

  .ref-surface-specimen {
    align-content: start;
    justify-items: center;
    gap: 1rem;
    min-width: 0;
    display: grid;
  }

  .ref-surface-specimen > code {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: .75rem;
  }

  .ref-surface-sample {
    aspect-ratio: 1;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-sheet);
    width: 5rem;
    max-width: 100%;
  }

  .ref-surface-scale[data-kind="radius"] .ref-surface-sample {
    outline: 1px solid var(--ui-line-mark);
  }

  .ref-surface-scale[data-kind="shadow"] {
    gap: 6rem 3rem;
    padding-block-end: 7rem;
  }

  .ui-stage.ref-type-scale {
    text-align: start;
    justify-items: stretch;
    gap: 1.75rem;
    padding: 1.5rem;
    display: grid;
    overflow-x: auto;
  }

  .ref-type-scale:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-3px}

  .ref-type-specimen {
    gap: .5rem;
    min-width: 0;
    display: grid;
  }

  .ref-type-specimen > code {
    font-size: .75rem;
  }

  .ref-type-sample {
    width: max-content;
    color: var(--ui-text-strong);
    letter-spacing: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }

  .ref-type-sample > span {
    display: block;
  }

  .ref-links {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-small);
  }

  .ref-note {
    box-shadow: inset 2px 0 0 var(--ui-line-divider);
    font-size: var(--ui-text-small);
    padding-inline-start: var(--ui-space-md);
  }

  :is(.ref-links, .ref-note) code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

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