@layer components {
  .ui-dialog {
    border-radius: var(--ui-radius-2xl);
    background: var(--ui-surface-float);
    width: min(40rem, 100vw - 2rem);
    max-height: min(36rem, 100dvh - 4rem);
    color: var(--ui-text-body);
    box-shadow: var(--ui-elevation-overlay);
    border: 0;
    padding: 0;
    overflow: hidden;
  }

  .ui-dialog::backdrop {
    background: var(--ui-surface-scrim);
    backdrop-filter: blur(6px);
  }

  .ui-dialog-search {
    align-items: center;
    gap: var(--ui-space-sm);
    min-height: 3.5rem;
    padding: 0 var(--ui-space-md);
    box-shadow: inset 0 -1px 0 var(--ui-line-hair);
    flex-wrap: wrap;
    display: flex;
  }

  .ui-dialog-search input {
    min-width: 0;
    color: var(--ui-text-strong);
    font: var(--ui-weight-regular) 1rem/1 var(--font-family-sans);
    background: none;
    border: 0;
    flex: 8rem;
  }

  .ui-dialog-search input:focus {
    outline: none;
  }

  @media (forced-colors: active) {
    .ui-dialog-search input:focus-visible {
      outline-offset: 2px;
      outline: 2px solid highlight;
    }
  }

  .ui-results {
    padding: var(--ui-inset);
    gap: 2px;
    margin: 0;
    list-style: none;
    display: grid;
  }

  .ui-results > li > a {
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-body);
    gap: 2px;
    padding: .625rem .75rem;
    text-decoration: none;
    display: grid;
  }

  .ui-results > li > a small {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .75rem/1.4 var(--font-family-sans);
  }

  .ui-results > li > a b {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-medium);
    font-size: var(--ui-text-small);
  }

  .ui-results > li > a[aria-selected="true"], .ui-results > li > a:hover {
    background: var(--ui-surface-chip);
    box-shadow: inset 0 0 0 1px var(--ui-line-hair);
  }

  .ui-dialog-foot {
    gap: var(--ui-space-md);
    padding: var(--ui-space-sm) var(--ui-space-md);
    box-shadow: inset 0 1px 0 var(--ui-line-hair);
    color: var(--ui-text-muted);
    flex-wrap: wrap;
    font-size: .71875rem;
    display: flex;
  }

  .ui-dialog-foot span {
    align-items: center;
    gap: 6px;
    display: inline-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"}: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"}}