@layer components {
  .ui-compare {
    gap: var(--ui-inset);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    display: grid;
  }

  .ui-compare > figure {
    grid-template-rows: auto 1fr;
    gap: 0;
    min-width: 0;
    margin: 0;
    display: grid;
  }

  .ui-compare>figure>figcaption{padding:var(--ui-space-xs) var(--ui-space-sm);color:var(--ui-text-muted);font:var(--ui-weight-regular) var(--ui-text-label)/1.5 var(--font-family-sans);letter-spacing:var(--ui-tracking-label);text-transform:none}

  .ui-compare .ui-stage {
    min-height: 11rem;
    padding: var(--ui-space-xl) var(--ui-space-lg);
  }
}

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