@layer components {
  .ui-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-xs);min-height:2.375rem;padding:0 var(--ui-space-md);border:0;border-radius:var(--ui-radius-md);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));color:var(--ui-text-strong);box-shadow:var(--ui-elevation-rise-1);font:var(--ui-weight-medium) .84375rem/1 var(--font-family-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;transition:box-shadow var(--ui-duration-quick) var(--ui-ease), background var(--ui-duration-quick) var(--ui-ease), translate var(--ui-duration-quick) var(--ui-ease), color var(--ui-duration-quick)}

  .ui-button:not([data-shape="icon"]) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 100%;
    line-height: 1.2;
  }

  .ui-button > svg {
    flex: none;
    width: 1rem;
    height: 1rem;
  }

  .ui-button:where(:hover, [data-state="hover"]):not(:disabled) {
    box-shadow: var(--ui-elevation-rise-1h);
    translate: 0 -.5px;
  }

  .ui-button:where(:active, [data-state="pressed"]):not(:disabled) {
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-sink);
    transition-duration: var(--ui-duration-press);
    translate: 0 .5px;
  }

  .ui-button:where(:focus-visible,[data-state=focus]){outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-button:disabled {
    color: var(--ui-text-disabled);
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-flat);
    cursor: not-allowed;
  }

  .ui-button[data-size="sm"] {
    min-height: 2rem;
    padding-inline: var(--ui-space-sm);
    border-radius: 5px;
    font-size: .78125rem;
  }

  .ui-button[data-size="lg"] {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: .9375rem;
  }

  .ui-button[data-variant="primary"] {
    color: var(--ui-text-inverse);
    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .17), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3);
    background: linear-gradient(light-dark(oklch(32% .0026 265), oklch(98.8% 0 none)), light-dark(oklch(19.5% .003 265), oklch(91.6% .0032 265)));
  }

  .ui-button[data-variant="primary"]:where(:hover, [data-state="hover"]):not(:disabled) {
    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .19), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 10px 10px -5px var(--ui-shade-4);
    background: linear-gradient(light-dark(oklch(36% .0028 265), oklch(100% 0 none)), light-dark(oklch(22% .0034 265), oklch(94% .003 265)));
  }

  .ui-button[data-variant="primary"]:where(:active, [data-state="pressed"]):not(:disabled) {
    background: light-dark(oklch(18% .003 265), oklch(87.5% .0035 265));
    box-shadow: inset 0 1px 3px light-dark(oklch(0% 0 none / .55), oklch(0% 0 none / .3)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6));
  }

  .ui-button[data-variant="quiet"] {
    color: var(--ui-text-muted);
    box-shadow: none;
    background: none;
  }

  .ui-button[data-variant=quiet]:where(:hover,[data-state=hover]):not(:disabled){color:var(--ui-text-strong);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));box-shadow:var(--ui-elevation-rise-1);translate:none}

  .ui-button[data-variant="quiet"][aria-pressed="true"] {
    color: var(--ui-text-strong);
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-sink);
  }

  .ui-button[data-variant="gold"] {
    color: var(--ui-gold-ink);
    background: var(--ui-gold-face);
    text-shadow: 0 1px oklch(100% 0 none / .35);
    box-shadow: inset 0 1px 0 oklch(100% 0 none / .65), inset 0 -1px 0 oklch(52% .12 58 / .28), 0 0 0 1px light-dark(oklch(58% .12 66 / .7), oklch(82% .14 82 / .55)),
      0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 10px 18px -8px light-dark(oklch(72% .16 72 / .42), oklch(82% .16 80 / .3));
  }

  .ui-button[data-shape="icon"] {
    width: 2.375rem;
    padding: 0;
  }

  .ui-button[data-shape="icon"][data-size="sm"] {
    width: 2rem;
  }
}
@layer components {
  @media (pointer: coarse) {
    .ui-button {
      min-height: 2.75rem;
    }
  }

  .ui-button[data-result] > svg:first-of-type, .ui-button:not([data-result]) > .ui-result-icon {
    display: none;
  }

  .ui-button[data-result="success"] {
    color: var(--ui-status-success);
  }

  .ui-button[data-result="error"] {
    color: var(--ui-status-danger);
  }

  .ui-button[data-result="error"] > svg:first-of-type {
    display: block;
  }

  .ui-button[data-result="error"] > .ui-result-icon {
    display: none;
  }
}
@layer components {
  .ui-kbd {
    border-radius: var(--ui-radius-xs);
    min-width: 1.375rem;
    height: 1.375rem;
    color: var(--ui-text-muted);
    box-shadow: inset 0 0 0 1px var(--ui-line-contour);
    font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono);
    background: none;
    place-items: center;
    padding: 0 .3125rem;
    display: inline-grid;
  }
}
@layer components {
  .ui-tooltip {
    z-index: 60;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-ink);
    color: var(--ui-text-inverse);
    box-shadow: 0 1px 2px var(--ui-shade-1), 0 4px 10px -4px var(--ui-shade-2);
    font: var(--ui-weight-regular) .71875rem/1.2 var(--font-family-sans);
    white-space: nowrap;
    pointer-events: none;
    padding: .3125rem .5rem;
    position: absolute;
  }

  .ui-tooltip[data-side="bottom"]:before {
    content: "";
    border: 4px solid #0000;
    border-bottom-color: var(--ui-surface-ink);
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50%;
  }

  .ui-tooltip > .ui-kbd {
    background: color-mix(in oklab, var(--ui-text-inverse) 14%, transparent);
    min-width: 1.125rem;
    height: 1.125rem;
    color: var(--ui-text-inverse);
    box-shadow: none;
    margin-left: 6px;
  }
}

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