@layer components {
  .ui-search-trigger {
    appearance: none;
    width: 100%;
    height: 2.5rem;
    color: var(--ui-text-muted);
    box-shadow: inset 0 -1px 0 var(--ui-line-hair);
    font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans);
    cursor: pointer;
    transition: color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
    background: none;
    border: 0;
    border-radius: 0;
    align-items: center;
    gap: .625rem;
    padding: 0;
    display: flex;
  }

  .ui-search-trigger:hover {
    color: var(--ui-text-strong);
    box-shadow: inset 0 -1px 0 var(--ui-line-strong);
  }

  .ui-search-trigger > .ui-kbd {
    box-shadow: none;
  }

  .ui-search-trigger:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-sm)}

  .ui-search-trigger > svg {
    flex: none;
    width: 15px;
    height: 15px;
  }

  .ui-search-trigger > .ui-kbd {
    margin-left: auto;
  }
}

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

@layer components {
  .ui-field {
    gap: var(--ui-space-xs);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-medium);
    display: grid;
  }

  .ui-field-hint {
    color: var(--ui-text-muted);
    font-size: .75rem;
    font-weight: var(--ui-weight-regular);
  }

  .ui-input, .ui-select {
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-well);
    width: 100%;
    min-height: 2.5rem;
    color: var(--ui-text-strong);
    box-shadow: var(--ui-elevation-sink);
    font: var(--ui-weight-regular) var(--ui-text-small)/1.45 var(--font-family-sans);
    resize: vertical;
    transition: box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick);
    border: 0;
    padding: .5625rem .75rem;
  }

  .ui-input::placeholder {
    color: var(--ui-text-muted);
  }

  .ui-input:hover:not(:focus, :disabled), .ui-select:hover:not(:focus, :disabled) {
    background: var(--ui-surface-well-hover);
  }

  .ui-input:focus, .ui-select:focus-visible {
    background: var(--ui-surface-sheet);
    box-shadow: inset 0 0 0 1px var(--ui-line-mark), 0 0 0 3px light-dark(oklch(22% .002 265 / .1), oklch(100% 0 none / .12));
    outline: none;
  }

  .ui-input:disabled, .ui-select:disabled {
    color: var(--ui-text-disabled);
    cursor: not-allowed;
  }

  .ui-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-position: right .625rem center;
    background-repeat: no-repeat;
    background-size: 14px;
    padding-right: 2rem;
  }

  .ui-select[data-variant="raised"] {
    background-color: #0000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));
    box-shadow: var(--ui-elevation-rise-1);
    font-weight: var(--ui-weight-medium);
    background-position: right .625rem center, 0 0;
    background-size: 14px, auto;
  }

  .ui-select[data-variant="overlay"] {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  :has(>.ui-select[data-variant=overlay]:focus-visible){outline:2px solid var(--ui-focus);outline-offset:2px}

  @media (pointer: coarse) {
    .ui-input, .ui-select {
      min-height: 2.75rem;
    }
  }
}

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