@layer components {
  .ui-segmented {
    border-radius: calc(var(--ui-radius-md) + 3px);
    background: var(--ui-surface-well);
    max-width: 100%;
    box-shadow: var(--ui-elevation-sink);
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    display: inline-flex;
  }

  .ui-segmented > :is(button, a) {
    appearance: none;
    border-radius: var(--ui-radius-md);
    min-width: 3.5rem;
    min-height: 1.875rem;
    color: var(--ui-text-muted);
    font: var(--ui-weight-medium) .78125rem/1 var(--font-family-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0 .75rem;
    text-decoration: none;
    display: inline-flex;
  }

  .ui-segmented > :is(button, a):hover:not(:disabled) {
    color: var(--ui-text-strong);
  }

  .ui-segmented>:is(button,a):is([aria-pressed=true],[aria-selected=true],[aria-checked=true],[aria-current=page]){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)}

  .ui-segmented>:is(button,a):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-segmented > button:disabled {
    color: var(--ui-text-disabled);
    cursor: not-allowed;
  }

  .ui-segmented[data-variant="underline"] {
    gap: 0 var(--ui-space-lg);
    box-shadow: inset 0 -1px 0 var(--ui-line-divider);
    background: none;
    border-radius: 0;
    padding: 0;
    display: flex;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a) {
    min-width: 0;
    min-height: 2.75rem;
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) var(--ui-text-small)/1.4 var(--font-family-sans);
    border-radius: 0;
    padding: 0;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) {
    color: var(--ui-text-strong);
    box-shadow: inset 0 -2px 0 var(--ui-text-strong);
    background: none;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a):focus-visible {
    outline-offset: -2px;
    border-radius: var(--ui-radius-xs);
  }

  .ui-segmented[data-size="lg"] {
    border-radius: calc(var(--ui-radius-md) + 4px);
    padding: 4px;
  }

  .ui-segmented[data-size="lg"] > :is(button, a) {
    border-radius: var(--ui-radius-md);
    min-height: 2.25rem;
    font-size: .8125rem;
  }

  @media (pointer: coarse) {
    .ui-segmented > button {
      min-height: 2.5rem;
    }
  }
}

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