/* node_modules/@openai/apps-sdk-ui/dist/es/styles/base.css */
@layer base {
  html, :host {
    font-synthesis-weight: none;
  }

  textarea {
    resize: none;
  }

  img, svg {
    flex-grow: 0;
    flex-shrink: 0;
  }

  input, textarea, select, optgroup {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    filter: none;
    outline-offset: 0;
    outline-width: 2px;
  }

  a, button, input, label, select, textarea, :where([aria-role="button"]) {
    touch-action: manipulation;
  }

  button {
    text-transform: none;
    vertical-align: middle;
  }

  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  pre {
    white-space: pre-wrap;
  }

  table {
    border-spacing: 0;
  }

  blockquote, q {
    quotes: none;
  }

  blockquote:before, blockquote:after, q:before, q:after {
    content: none;
  }
}

@custom-variant hover {
  @media (hover: hover) and (pointer: fine) {& :hover { @slot; } }
}

@custom-variant dark (& :where([data-theme= dark], [data-theme= dark] * ));

@custom-variant light (& :where([data-theme= light], [data-theme= light] * ));

/* node_modules/@openai/apps-sdk-ui/dist/es/styles/variables-primitive.css */
@layer theme {
  :root, :where([data-theme]) {
    --gray-500: #5d5d5d;
    --alpha-0: color-mix(in oklab, var(--alpha-base) 0%, transparent);
    --alpha-02: color-mix(in oklab, var(--alpha-base) 2%, transparent);
    --alpha-04: color-mix(in oklab, var(--alpha-base) 4%, transparent);
    --alpha-05: color-mix(in oklab, var(--alpha-base) 5%, transparent);
    --alpha-06: color-mix(in oklab, var(--alpha-base) 6%, transparent);
    --alpha-08: color-mix(in oklab, var(--alpha-base) 8%, transparent);
    --alpha-10: color-mix(in oklab, var(--alpha-base) 10%, transparent);
    --alpha-12: color-mix(in oklab, var(--alpha-base) 12%, transparent);
    --alpha-15: color-mix(in oklab, var(--alpha-base) 15%, transparent);
    --alpha-16: color-mix(in oklab, var(--alpha-base) 16%, transparent);
    --alpha-20: color-mix(in oklab, var(--alpha-base) 20%, transparent);
    --alpha-25: color-mix(in oklab, var(--alpha-base) 25%, transparent);
    --alpha-30: color-mix(in oklab, var(--alpha-base) 30%, transparent);
    --alpha-35: color-mix(in oklab, var(--alpha-base) 35%, transparent);
    --alpha-40: color-mix(in oklab, var(--alpha-base) 40%, transparent);
    --alpha-50: color-mix(in oklab, var(--alpha-base) 50%, transparent);
    --alpha-60: color-mix(in oklab, var(--alpha-base) 60%, transparent);
    --alpha-70: color-mix(in oklab, var(--alpha-base) 70%, transparent);
    --white: #fff;
    --black: #000;
    --green-25: #edfaf2;
    --green-50: #d9f4e4;
    --green-75: #b8ebcc;
    --green-100: #8cdfad;
    --green-200: #66d492;
    --green-300: #40c977;
    --green-400: #04b84c;
    --green-500: #00a240;
    --green-600: #008635;
    --green-700: #00692a;
    --green-800: #004f1f;
    --green-900: #003716;
    --green-950: #011c0b;
    --green-1000: #001207;
    --green-a25: color-mix(in oklab, var(--green-400) 8%, transparent);
    --green-a50: color-mix(in oklab, var(--green-400) 15%, transparent);
    --green-a75: color-mix(in oklab, var(--green-400) 29%, transparent);
    --green-a100: color-mix(in oklab, var(--green-400) 45%, transparent);
    --green-a200: color-mix(in oklab, var(--green-400) 60%, transparent);
    --green-a300: color-mix(in oklab, var(--green-400) 75%, transparent);
    --red-25: #fff0f0;
    --red-50: #ffd9d9;
    --red-75: #ffc6c5;
    --red-100: #ffa4a2;
    --red-200: #ff8583;
    --red-300: #ff6764;
    --red-400: #fa423e;
    --red-500: #e02e2a;
    --red-600: #ba2623;
    --red-700: #911e1b;
    --red-800: #6e1615;
    --red-900: #4d100e;
    --red-950: #280b0a;
    --red-1000: #1f0909;
    --red-a25: color-mix(in oklab, var(--red-400) 8%, transparent);
    --red-a50: color-mix(in oklab, var(--red-400) 16%, transparent);
    --red-a75: color-mix(in oklab, var(--red-400) 30%, transparent);
    --red-a100: color-mix(in oklab, var(--red-400) 48%, transparent);
    --red-a200: color-mix(in oklab, var(--red-400) 64%, transparent);
    --red-a300: color-mix(in oklab, var(--red-400) 79%, transparent);
    --pink-25: #fff4f9;
    --pink-50: #ffe8f3;
    --pink-75: #ffd4e8;
    --pink-100: #ffbada;
    --pink-200: #ffa3ce;
    --pink-300: #ff8cc1;
    --pink-400: #ff66ad;
    --pink-500: #e04c91;
    --pink-600: #ba437a;
    --pink-700: #963c67;
    --pink-800: #6e2c4a;
    --pink-900: #4d1f34;
    --pink-950: #29101c;
    --pink-1000: #1a0a11;
    --pink-a25: color-mix(in oklab, var(--pink-400) 8%, transparent);
    --pink-a50: color-mix(in oklab, var(--pink-400) 16%, transparent);
    --pink-a75: color-mix(in oklab, var(--pink-400) 28%, transparent);
    --pink-a100: color-mix(in oklab, var(--pink-400) 45%, transparent);
    --pink-a200: color-mix(in oklab, var(--pink-400) 60%, transparent);
    --pink-a300: color-mix(in oklab, var(--pink-400) 76%, transparent);
    --orange-25: #fff5f0;
    --orange-50: #ffe7d9;
    --orange-75: #ffcfb4;
    --orange-100: #ffb790;
    --orange-200: #ff9e6c;
    --orange-300: #ff8549;
    --orange-400: #fb6a22;
    --orange-500: #e25507;
    --orange-600: #b9480d;
    --orange-700: #923b0f;
    --orange-800: #6d2e0f;
    --orange-900: #4a2206;
    --orange-950: #281105;
    --orange-1000: #211107;
    --orange-a25: color-mix(in oklab, var(--orange-400) 7%, transparent);
    --orange-a50: color-mix(in oklab, var(--orange-400) 16%, transparent);
    --orange-a75: color-mix(in oklab, var(--orange-400) 33%, transparent);
    --orange-a100: color-mix(in oklab, var(--orange-400) 48%, transparent);
    --orange-a200: color-mix(in oklab, var(--orange-400) 65%, transparent);
    --orange-a300: color-mix(in oklab, var(--orange-400) 81%, transparent);
    --yellow-25: #fffbed;
    --yellow-50: #fff6d9;
    --yellow-75: #ffeeb8;
    --yellow-100: #ffe48c;
    --yellow-200: #ffdb66;
    --yellow-300: #ffd240;
    --yellow-400: #ffc300;
    --yellow-500: #e0ac00;
    --yellow-600: #ba8e00;
    --yellow-700: #916f00;
    --yellow-800: #6e5400;
    --yellow-900: #4d3b00;
    --yellow-950: #261d00;
    --yellow-1000: #1a1400;
    --yellow-a25: color-mix(in oklab, var(--yellow-400) 8%, transparent);
    --yellow-a50: color-mix(in oklab, var(--yellow-400) 15%, transparent);
    --yellow-a75: color-mix(in oklab, var(--yellow-400) 27%, transparent);
    --yellow-a100: color-mix(in oklab, var(--yellow-400) 45%, transparent);
    --yellow-a200: color-mix(in oklab, var(--yellow-400) 59%, transparent);
    --yellow-a300: color-mix(in oklab, var(--yellow-400) 74%, transparent);
    --purple-25: #f9f5fe;
    --purple-50: #efe5fe;
    --purple-75: #e0cefd;
    --purple-100: #ceb0fb;
    --purple-200: #be95fa;
    --purple-300: #ad7bf9;
    --purple-400: #924ff7;
    --purple-500: #8046d9;
    --purple-600: #6b3ab4;
    --purple-700: #532d8d;
    --purple-800: #3f226a;
    --purple-900: #2c184a;
    --purple-950: #160c25;
    --purple-1000: #100a19;
    --purple-a25: color-mix(in oklab, var(--purple-400) 6%, transparent);
    --purple-a50: color-mix(in oklab, var(--purple-400) 15%, transparent);
    --purple-a75: color-mix(in oklab, var(--purple-400) 28%, transparent);
    --purple-a100: color-mix(in oklab, var(--purple-400) 45%, transparent);
    --purple-a200: color-mix(in oklab, var(--purple-400) 60%, transparent);
    --purple-a300: color-mix(in oklab, var(--purple-400) 75%, transparent);
    --blue-25: #f5faff;
    --blue-50: #e5f3ff;
    --blue-75: #cce6ff;
    --blue-100: #99ceff;
    --blue-200: #66b5ff;
    --blue-300: #339cff;
    --blue-400: #0285ff;
    --blue-500: #0169cc;
    --blue-600: #004f99;
    --blue-700: #003f7a;
    --blue-800: #013566;
    --blue-900: #00284d;
    --blue-950: #000e1a;
    --blue-1000: #000d19;
    --blue-a25: color-mix(in oklab, var(--blue-400) 4%, transparent);
    --blue-a50: color-mix(in oklab, var(--blue-400) 13%, transparent);
    --blue-a75: color-mix(in oklab, var(--blue-400) 25%, transparent);
    --blue-a100: color-mix(in oklab, var(--blue-400) 40%, transparent);
    --blue-a200: color-mix(in oklab, var(--blue-400) 60%, transparent);
    --blue-a300: color-mix(in oklab, var(--blue-400) 80%, transparent);
    --hairline: 1px;
  }

  :where(:root), :where([data-theme="light"]) {
    --gray-0: #fff;
    --gray-25: #fcfcfc;
    --gray-50: #f9f9f9;
    --gray-75: #f3f3f3;
    --gray-100: #ededed;
    --gray-150: #dfdfdf;
    --gray-200: #cdcdcd;
    --gray-250: #b9b9b9;
    --gray-300: #afafaf;
    --gray-350: #9f9f9f;
    --gray-400: #8f8f8f;
    --gray-450: #767676;
    --gray-550: #4f4f4f;
    --gray-600: #414141;
    --gray-650: #393939;
    --gray-700: #303030;
    --gray-750: #282828;
    --gray-800: #212121;
    --gray-850: #1c1c1c;
    --gray-900: #181818;
    --gray-925: #161616;
    --gray-950: #131313;
    --gray-975: #101010;
    --gray-1000: #0d0d0d;
    --alpha-base: #0d0d0d;
  }

  :where([data-theme="dark"]) {
    --gray-0: #0d0d0d;
    --gray-25: #101010;
    --gray-50: #131313;
    --gray-75: #161616;
    --gray-100: #181818;
    --gray-150: #1c1c1c;
    --gray-200: #212121;
    --gray-250: #282828;
    --gray-300: #303030;
    --gray-350: #393939;
    --gray-400: #414141;
    --gray-450: #4f4f4f;
    --gray-550: #767676;
    --gray-600: #8f8f8f;
    --gray-650: #9f9f9f;
    --gray-700: #afafaf;
    --gray-750: #b9b9b9;
    --gray-800: #cdcdcd;
    --gray-850: #dcdcdc;
    --gray-900: #ededed;
    --gray-925: #f3f3f3;
    --gray-950: #f3f3f3;
    --gray-975: #f9f9f9;
    --gray-1000: #fff;
    --alpha-base: #fff;
  }

  @media (min-resolution: 150dpi), (min-resolution: 1.5dppx) {
    :root, :where([data-theme]) {
      --hairline: .5px;
    }
  }

  :root, :where([data-theme]) {
    --shadow-color: 0 0 0;
    --elevation-100-geo: 0 1px 2px -1px;
    --elevation-200-geo: 0 2px 4px -1px;
    --elevation-300-geo: 0 4px 8px -2px;
    --elevation-400-geo: 0 8px 16px -4px;
  }

  :where(:root), :where([data-theme="light"]) {
    --shadow-alpha-100: .08;
    --shadow-alpha-200: .08;
    --shadow-alpha-300: .1;
    --shadow-alpha-400: .12;
    --shadow-hairline-width: 1px;
    --shadow-hairline-color: #00000014;
  }

  @media (min-resolution: 150dpi), (min-resolution: 1.5dppx) {
    :where(:root), :where([data-theme="light"]) {
      --shadow-hairline-width: .5px;
      --shadow-hairline-color: #0000001a;
    }
  }

  :where([data-theme="dark"]) {
    --shadow-alpha-100: .2;
    --shadow-alpha-200: .2;
    --shadow-alpha-300: .36;
    --shadow-alpha-400: .3;
    --shadow-hairline-width: 1px;
    --shadow-hairline-color: #ffffff1a;
  }

  @media (min-resolution: 150dpi), (min-resolution: 1.5dppx) {
    :where([data-theme="dark"]) {
      --shadow-hairline-width: .5px;
      --shadow-hairline-color: #ffffff1f;
    }
  }

  :where([data-theme="dark"]) [data-surface="elevated"] {
    --shadow-hairline: 0 0 #0000;
  }
}

/* node_modules/@openai/apps-sdk-ui/dist/es/styles/variables-semantic.css */
@theme static {
   --breakpoint-xs: 380px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px;  --font-serif: initial; --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;  --font-weight- * : initial; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;  --radius- * : initial; --radius-2xs: .125rem;  --radius-xs: .25rem;  --radius-sm: .375rem;  --radius-md: .5rem;  --radius-lg: .625rem;  --radius-xl: .75rem;  --radius-2xl: 1rem;  --radius-3xl: 1.25rem;  --radius-4xl: 1.5rem;  --radius-full: 9999px;  --spacing: .25rem; 
}

@layer theme {
  :root, :where([data-theme]) {
    --color-text: var(--gray-1000);
    --color-text-inverse: var(--gray-0);
    --color-text-primary: var(--color-text);
    --color-text-primary-soft: var(--color-text);
    --color-background-primary-soft-alt: var(--alpha-02);
    --color-border-primary-soft-alt: var(--alpha-06);
    --color-text-primary-soft-alt: var(--color-text);
    --color-text-primary-surface: var(--color-text);
    --color-text-primary-solid: var(--color-text-inverse);
    --color-text-primary-outline: var(--color-text);
    --color-text-primary-outline-hover: var(--color-text);
    --color-text-primary-ghost: var(--color-text);
    --color-text-primary-ghost-hover: var(--color-text);
    --color-ring-primary: var(--color-ring);
    --color-ring-primary-soft: var(--color-ring-primary);
    --color-ring-primary-solid: var(--color-ring-primary);
    --color-ring-primary-outline: var(--color-ring-primary);
    --color-ring-primary-ghost: var(--color-ring-primary);
    --color-text-secondary-soft: var(--color-text);
    --color-background-secondary-soft-alt: var(--alpha-02);
    --color-border-secondary-soft-alt: var(--alpha-06);
    --color-text-secondary-soft-alt: var(--color-text);
    --color-text-secondary-solid: var(--white);
    --color-text-secondary-outline: var(--color-text-secondary);
    --color-text-secondary-outline-hover: var(--color-text);
    --color-text-secondary-ghost: var(--color-text-secondary);
    --color-text-secondary-ghost-hover: var(--color-text);
    --color-ring-secondary: var(--color-ring);
    --color-ring-secondary-soft: var(--color-ring-secondary);
    --color-ring-secondary-solid: var(--color-ring-secondary);
    --color-ring-secondary-outline: var(--color-ring-secondary);
    --color-ring-secondary-ghost: var(--color-ring-secondary);
    --color-background-info-soft: var(--blue-50);
    --color-background-info-soft-hover: var(--blue-75);
    --color-background-info-soft-active: var(--blue-75);
    --color-background-info-soft-alpha: var(--blue-a50);
    --color-background-info-soft-alpha-hover: var(--blue-a75);
    --color-background-info-soft-alpha-active: var(--blue-a75);
    --color-background-info-solid: var(--blue-400);
    --color-background-info-solid-hover: var(--blue-500);
    --color-background-info-solid-active: var(--blue-500);
    --color-text-info-solid: var(--white);
    --color-background-info-outline-hover: var(--blue-a25);
    --color-background-info-outline-active: var(--blue-a25);
    --color-border-info-outline: var(--blue-500);
    --color-border-info-outline-hover: var(--blue-500);
    --color-text-info-outline: var(--blue-500);
    --color-text-info-outline-hover: var(--blue-500);
    --color-background-info-ghost-hover: var(--blue-a50);
    --color-background-info-ghost-active: var(--blue-a50);
    --color-ring-info: var(--color-ring);
    --color-ring-info-soft: var(--color-ring-info);
    --color-ring-info-solid: var(--color-ring-info);
    --color-ring-info-outline: var(--color-ring-info);
    --color-ring-info-ghost: var(--color-ring-info);
    --color-background-warning-soft: var(--orange-50);
    --color-background-warning-soft-hover: var(--orange-75);
    --color-background-warning-soft-active: var(--orange-75);
    --color-background-warning-soft-alpha: var(--orange-a50);
    --color-background-warning-soft-alpha-hover: var(--orange-a75);
    --color-background-warning-soft-alpha-active: var(--orange-a75);
    --color-background-warning-solid: var(--orange-500);
    --color-background-warning-solid-hover: var(--orange-600);
    --color-background-warning-solid-active: var(--orange-600);
    --color-text-warning-solid: var(--white);
    --color-background-warning-outline-hover: var(--orange-a25);
    --color-background-warning-outline-active: var(--orange-a25);
    --color-border-warning-outline: var(--orange-500);
    --color-border-warning-outline-hover: var(--orange-500);
    --color-text-warning-outline: var(--orange-500);
    --color-text-warning-outline-hover: var(--orange-500);
    --color-background-warning-ghost-hover: var(--orange-a50);
    --color-background-warning-ghost-active: var(--orange-a50);
    --color-text-warning-ghost: var(--orange-500);
    --color-text-warning-ghost-hover: var(--orange-500);
    --color-ring-warning: var(--color-ring);
    --color-ring-warning-soft: var(--color-ring-warning);
    --color-ring-warning-solid: var(--color-ring-warning);
    --color-ring-warning-outline: var(--color-ring-warning);
    --color-ring-warning-ghost: var(--color-ring-warning);
    --color-text-caution-hover: var(--yellow-800);
    --color-background-caution-soft: var(--yellow-50);
    --color-background-caution-soft-hover: var(--yellow-75);
    --color-background-caution-soft-active: var(--yellow-75);
    --color-background-caution-soft-alpha: var(--yellow-a50);
    --color-background-caution-soft-alpha-hover: var(--yellow-a75);
    --color-background-caution-soft-alpha-active: var(--yellow-a75);
    --color-background-caution-solid: var(--yellow-600);
    --color-background-caution-solid-hover: var(--yellow-700);
    --color-background-caution-solid-active: var(--yellow-700);
    --color-text-caution-solid: var(--white);
    --color-background-caution-outline-hover: var(--yellow-a25);
    --color-background-caution-outline-active: var(--yellow-a25);
    --color-border-caution-outline: var(--yellow-700);
    --color-border-caution-outline-hover: var(--yellow-700);
    --color-text-caution-outline: var(--yellow-700);
    --color-text-caution-outline-hover: var(--yellow-700);
    --color-background-caution-ghost-hover: var(--yellow-a50);
    --color-background-caution-ghost-active: var(--yellow-a50);
    --color-text-caution-ghost: var(--yellow-700);
    --color-text-caution-ghost-hover: var(--yellow-700);
    --color-ring-caution: var(--color-ring);
    --color-ring-caution-soft: var(--color-ring-caution);
    --color-ring-caution-solid: var(--color-ring-caution);
    --color-ring-caution-outline: var(--color-ring-caution);
    --color-ring-caution-ghost: var(--color-ring-caution);
    --color-background-danger-soft: var(--red-50);
    --color-background-danger-soft-hover: var(--red-75);
    --color-background-danger-soft-active: var(--red-75);
    --color-background-danger-soft-alpha: var(--red-a50);
    --color-background-danger-soft-alpha-hover: var(--red-a75);
    --color-background-danger-soft-alpha-active: var(--red-a75);
    --color-background-danger-solid: var(--red-500);
    --color-background-danger-solid-hover: var(--red-600);
    --color-background-danger-solid-active: var(--red-600);
    --color-text-danger-solid: var(--white);
    --color-background-danger-outline-hover: var(--red-a25);
    --color-background-danger-outline-active: var(--red-a25);
    --color-border-danger-outline: var(--red-500);
    --color-border-danger-outline-hover: var(--red-500);
    --color-text-danger-outline: var(--red-500);
    --color-text-danger-outline-hover: var(--red-500);
    --color-background-danger-ghost-hover: var(--red-a50);
    --color-background-danger-ghost-active: var(--red-a50);
    --color-text-danger-ghost: var(--red-500);
    --color-text-danger-ghost-hover: var(--red-500);
    --color-ring-danger: var(--red-200);
    --color-ring-danger-soft: var(--color-ring-danger);
    --color-ring-danger-solid: var(--color-ring-danger);
    --color-ring-danger-outline: var(--color-ring-danger);
    --color-ring-danger-ghost: var(--color-ring-danger);
    --color-background-success-soft: var(--green-50);
    --color-background-success-soft-hover: var(--green-75);
    --color-background-success-soft-active: var(--green-75);
    --color-background-success-soft-alpha: var(--green-a50);
    --color-background-success-soft-alpha-hover: var(--green-a75);
    --color-background-success-soft-alpha-active: var(--green-a75);
    --color-text-success-solid: var(--white);
    --color-background-success-outline-hover: var(--green-a25);
    --color-background-success-outline-active: var(--green-a25);
    --color-text-success-outline: var(--green-500);
    --color-text-success-outline-hover: var(--green-500);
    --color-background-success-ghost-hover: var(--green-a50);
    --color-background-success-ghost-active: var(--green-a50);
    --color-text-success-ghost: var(--green-500);
    --color-text-success-ghost-hover: var(--green-500);
    --color-ring-success: var(--color-ring);
    --color-ring-success-soft: var(--color-ring-info);
    --color-ring-success-solid: var(--color-ring-info);
    --color-ring-success-outline: var(--color-ring-info);
    --color-ring-success-ghost: var(--color-ring-info);
    --color-background-discovery-soft: var(--purple-50);
    --color-background-discovery-soft-hover: var(--purple-75);
    --color-background-discovery-soft-active: var(--purple-75);
    --color-background-discovery-soft-alpha: var(--purple-a50);
    --color-background-discovery-soft-alpha-hover: var(--purple-a75);
    --color-background-discovery-soft-alpha-active: var(--purple-a75);
    --color-background-discovery-solid: var(--purple-400);
    --color-background-discovery-solid-hover: var(--purple-500);
    --color-background-discovery-solid-active: var(--purple-500);
    --color-text-discovery-solid: var(--white);
    --color-background-discovery-outline-hover: var(--purple-a25);
    --color-background-discovery-outline-active: var(--purple-a25);
    --color-border-discovery-outline: var(--purple-500);
    --color-border-discovery-outline-hover: var(--purple-500);
    --color-background-discovery-ghost-hover: var(--purple-a50);
    --color-background-discovery-ghost-active: var(--purple-a50);
    --color-text-discovery-ghost: var(--purple-500);
    --color-text-discovery-ghost-hover: var(--purple-500);
    --color-ring-discovery: var(--color-ring);
    --color-ring-discovery-soft: var(--color-ring);
    --color-ring-discovery-solid: var(--color-ring);
    --color-ring-discovery-outline: var(--color-ring);
    --color-ring-discovery-ghost: var(--color-ring);
    --color-background-disabled: var(--alpha-05);
    --color-border-disabled: var(--alpha-06);
    --font-tracking-wide: 0em;
    --font-tracking-normal: 0em;
    --font-tracking-tight: 0em;
    --font-heading-5xl-size: 4.5rem;
    --font-heading-5xl-line-height: 4.5rem;
    --font-heading-5xl-weight: var(--font-weight-semibold);
    --font-heading-5xl-tracking: var(--tracking-tight);
    --font-heading-4xl-size: 3.75rem;
    --font-heading-4xl-line-height: 3.75rem;
    --font-heading-4xl-weight: var(--font-weight-semibold);
    --font-heading-4xl-tracking: var(--tracking-tight);
    --font-heading-3xl-size: 3rem;
    --font-heading-3xl-line-height: 3rem;
    --font-heading-3xl-weight: var(--font-weight-semibold);
    --font-heading-3xl-tracking: var(--tracking-tight);
    --font-heading-2xl-size: 2.25rem;
    --font-heading-2xl-line-height: 2.625rem;
    --font-heading-2xl-weight: var(--font-weight-semibold);
    --font-heading-2xl-tracking: var(--tracking-tight);
    --font-heading-xl-size: 2rem;
    --font-heading-xl-line-height: 2.375rem;
    --font-heading-xl-weight: var(--font-weight-semibold);
    --font-heading-xl-tracking: var(--tracking-tight);
    --font-heading-lg-size: 1.5rem;
    --font-heading-lg-line-height: 1.75rem;
    --font-heading-lg-weight: var(--font-weight-semibold);
    --font-heading-lg-tracking: var(--tracking-normal);
    --font-heading-md-size: 1.25rem;
    --font-heading-md-line-height: 1.625rem;
    --font-heading-md-weight: var(--font-weight-semibold);
    --font-heading-md-tracking: var(--tracking-normal);
    --font-heading-sm-size: 1.125rem;
    --font-heading-sm-line-height: 1.625rem;
    --font-heading-sm-weight: var(--font-weight-semibold);
    --font-heading-sm-tracking: var(--tracking-normal);
    --font-heading-xs-size: 1rem;
    --font-heading-xs-line-height: 1.5rem;
    --font-heading-xs-weight: var(--font-weight-semibold);
    --font-heading-xs-tracking: var(--tracking-normal);
    --font-text-lg-size: 1.125rem;
    --font-text-lg-line-height: 1.8125rem;
    --font-text-lg-weight: var(--font-weight-normal);
    --font-text-lg-tracking: var(--tracking-normal);
    --font-text-md-size: 1rem;
    --font-text-md-line-height: 1.5rem;
    --font-text-md-weight: var(--font-weight-normal);
    --font-text-md-tracking: var(--tracking-normal);
    --font-text-sm-size: .875rem;
    --font-text-sm-line-height: 1.25rem;
    --font-text-sm-weight: var(--font-weight-normal);
    --font-text-sm-tracking: var(--tracking-normal);
    --font-text-xs-size: .75rem;
    --font-text-xs-line-height: 1.125rem;
    --font-text-xs-weight: var(--font-weight-normal);
    --font-text-xs-tracking: var(--tracking-wide);
    --font-text-2xs-size: .625rem;
    --font-text-2xs-line-height: .875rem;
    --font-text-2xs-weight: var(--font-weight-normal);
    --font-text-2xs-tracking: var(--tracking-wide);
    --font-text-3xs-size: .5rem;
    --font-text-3xs-line-height: .75rem;
    --font-text-3xs-weight: var(--font-weight-normal);
    --font-text-3xs-tracking: var(--tracking-wide);
    --control-size-3xs: 1.375rem;
    --control-size-2xs: 1.5rem;
    --control-size-xs: 1.625rem;
    --control-size-sm: 1.75rem;
    --control-size-md: 2rem;
    --control-size-lg: 2.25rem;
    --control-size-xl: 2.5rem;
    --control-size-2xl: 2.75rem;
    --control-size-3xl: 3rem;
    --control-gutter-2xs: .375rem;
    --control-gutter-xs: .5rem;
    --control-gutter-sm: .625rem;
    --control-gutter-md: .75rem;
    --control-gutter-lg: .875rem;
    --control-gutter-xl: 1rem;
    --control-gutter-pill-scaling: 1.33;
    --control-radius-sm: var(--radius-sm);
    --control-radius-md: var(--radius-md);
    --control-radius-lg: var(--radius-lg);
    --control-radius-xl: var(--radius-xl);
    --control-font-size-sm: var(--font-text-xs-size);
    --control-font-size-md: var(--font-text-sm-size);
    --control-font-size-lg: var(--font-text-md-size);
    --control-icon-size-xs: .875rem;
    --control-icon-size-sm: 1rem;
    --control-icon-size-md: 1.125rem;
    --control-icon-size-lg: 1.25rem;
    --control-icon-size-xl: 1.375rem;
    --control-icon-size-2xl: 1.5rem;
    --cubic-enter: cubic-bezier(.19, 1, .22, 1);
    --cubic-exit: cubic-bezier(.8, 0, .4, 1);
    --cubic-exit-snappy: cubic-bezier(.65, 0, .4, 1);
    --cubic-move: cubic-bezier(.65, 0, .35, 1);
    --transition-duration-basic: .15s;
    --transition-ease-basic: ease;
    --scrollbar-color: var(--alpha-30);
    --shadow-hairline: 0 0 0 var(--shadow-hairline-width) var(--shadow-hairline-color);
    --shadow-100: var(--elevation-100-geo) rgb(var(--shadow-color) / var(--shadow-alpha-100));
    --shadow-100-strong: var(--elevation-100-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.25));
    --shadow-100-stronger: var(--elevation-100-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.6));
    --shadow-200: var(--elevation-200-geo) rgb(var(--shadow-color) / var(--shadow-alpha-200));
    --shadow-200-strong: var(--elevation-200-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.25));
    --shadow-200-stronger: var(--elevation-200-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.6));
    --shadow-300: var(--elevation-300-geo) rgb(var(--shadow-color) / var(--shadow-alpha-300));
    --shadow-300-strong: var(--elevation-300-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.25));
    --shadow-300-stronger: var(--elevation-300-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.6));
    --shadow-400: var(--elevation-400-geo) rgb(var(--shadow-color) / var(--shadow-alpha-400));
    --shadow-400-strong: var(--elevation-400-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.25));
    --shadow-400-stronger: var(--elevation-400-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.6));
  }

  :where(:root), :where([data-theme="light"]) {
    --color-text-secondary: var(--gray-500);
    --color-text-tertiary: var(--gray-400);
    --color-ring: var(--blue-500);
    --color-background-primary-soft: var(--gray-100);
    --color-background-primary-soft-hover: var(--gray-150);
    --color-background-primary-soft-active: var(--gray-200);
    --color-background-primary-soft-alpha: var(--alpha-08);
    --color-background-primary-soft-alpha-hover: var(--alpha-12);
    --color-background-primary-soft-alpha-active: var(--alpha-16);
    --color-background-primary-surface: var(--alpha-05);
    --color-border-primary-surface: var(--alpha-05);
    --color-background-primary-solid: var(--gray-900);
    --color-background-primary-solid-hover: var(--gray-700);
    --color-background-primary-solid-active: var(--gray-600);
    --color-background-primary-outline-hover: var(--alpha-02);
    --color-background-primary-outline-active: var(--alpha-04);
    --color-border-primary-outline: var(--alpha-16);
    --color-border-primary-outline-hover: var(--alpha-20);
    --color-background-primary-ghost-hover: var(--alpha-08);
    --color-background-primary-ghost-active: var(--alpha-12);
    --color-background-secondary-soft: var(--gray-100);
    --color-background-secondary-soft-hover: var(--gray-150);
    --color-background-secondary-soft-active: var(--gray-200);
    --color-background-secondary-soft-alpha: var(--alpha-08);
    --color-background-secondary-soft-alpha-hover: var(--alpha-12);
    --color-background-secondary-soft-alpha-active: var(--alpha-16);
    --color-background-secondary-solid: var(--gray-500);
    --color-background-secondary-solid-hover: var(--gray-600);
    --color-background-secondary-solid-active: var(--gray-700);
    --color-background-secondary-outline-hover: var(--alpha-02);
    --color-background-secondary-outline-active: var(--alpha-04);
    --color-border-secondary-outline: var(--alpha-16);
    --color-border-secondary-outline-hover: var(--alpha-20);
    --color-background-secondary-ghost-hover: var(--alpha-08);
    --color-background-secondary-ghost-active: var(--alpha-12);
    --color-text-info: var(--blue-500);
    --color-text-info-soft: var(--blue-600);
    --color-background-info-surface: var(--blue-a25);
    --color-border-info-surface: var(--blue-a25);
    --color-text-info-surface: var(--blue-600);
    --color-text-info-ghost: var(--blue-500);
    --color-text-info-ghost-hover: var(--blue-500);
    --color-text-warning: var(--orange-700);
    --color-text-warning-soft: var(--orange-700);
    --color-background-warning-surface: var(--orange-a25);
    --color-border-warning-surface: var(--orange-a25);
    --color-text-warning-surface: var(--orange-700);
    --color-text-caution: var(--yellow-700);
    --color-text-caution-soft: var(--yellow-800);
    --color-background-caution-surface: var(--yellow-a25);
    --color-border-caution-surface: var(--yellow-a25);
    --color-text-caution-surface: var(--yellow-800);
    --color-text-danger: var(--red-700);
    --color-text-danger-soft: var(--red-600);
    --color-background-danger-surface: var(--red-a25);
    --color-border-danger-surface: var(--red-a25);
    --color-text-danger-surface: var(--red-600);
    --color-text-success: var(--green-700);
    --color-text-success-soft: var(--green-600);
    --color-background-success-surface: var(--green-a25);
    --color-border-success-surface: var(--green-a25);
    --color-text-success-surface: var(--green-600);
    --color-background-success-solid: var(--green-500);
    --color-background-success-solid-hover: var(--green-500);
    --color-background-success-solid-active: var(--green-500);
    --color-border-success-outline: var(--green-500);
    --color-border-success-outline-hover: var(--green-500);
    --color-text-discovery: var(--purple-700);
    --color-text-discovery-soft: var(--purple-600);
    --color-background-discovery-surface: var(--purple-a25);
    --color-border-discovery-surface: var(--purple-a25);
    --color-text-discovery-surface: var(--purple-600);
    --color-text-discovery-outline: var(--purple-500);
    --color-text-discovery-outline-hover: var(--purple-500);
    --color-text-disabled: var(--gray-400);
    --color-border-subtle: var(--alpha-05);
    --color-border: var(--alpha-10);
    --color-border-strong: var(--alpha-15);
    --shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --color-surface: var(--gray-0);
    --color-surface-secondary: var(--gray-50);
    --color-surface-tertiary: var(--gray-75);
    --color-surface-elevated: var(--gray-0);
    --color-surface-elevated-secondary: var(--gray-50);
  }

  :where([data-theme="dark"]) {
    --color-text-secondary: var(--gray-700);
    --color-text-tertiary: var(--gray-600);
    --color-ring: var(--blue-400);
    --color-background-primary-soft: var(--gray-300);
    --color-background-primary-soft-hover: var(--gray-350);
    --color-background-primary-soft-active: var(--gray-400);
    --color-background-primary-soft-alpha: var(--alpha-12);
    --color-background-primary-soft-alpha-hover: var(--alpha-16);
    --color-background-primary-soft-alpha-active: var(--alpha-20);
    --color-background-primary-surface: var(--alpha-08);
    --color-border-primary-surface: var(--alpha-08);
    --color-background-primary-solid: var(--gray-950);
    --color-background-primary-solid-hover: var(--gray-900);
    --color-background-primary-solid-active: var(--gray-850);
    --color-background-primary-outline-hover: var(--alpha-04);
    --color-background-primary-outline-active: var(--alpha-06);
    --color-border-primary-outline: var(--alpha-25);
    --color-border-primary-outline-hover: var(--alpha-30);
    --color-background-primary-ghost-hover: var(--alpha-12);
    --color-background-primary-ghost-active: var(--alpha-16);
    --color-background-secondary-soft: var(--gray-300);
    --color-background-secondary-soft-hover: var(--gray-350);
    --color-background-secondary-soft-active: var(--gray-400);
    --color-background-secondary-soft-alpha: var(--alpha-12);
    --color-background-secondary-soft-alpha-hover: var(--alpha-16);
    --color-background-secondary-soft-alpha-active: var(--alpha-20);
    --color-background-secondary-solid: var(--gray-400);
    --color-background-secondary-solid-hover: var(--gray-450);
    --color-background-secondary-solid-active: var(--gray-500);
    --color-background-secondary-outline-hover: var(--alpha-04);
    --color-background-secondary-outline-active: var(--alpha-06);
    --color-border-secondary-outline: var(--alpha-25);
    --color-border-secondary-outline-hover: var(--alpha-30);
    --color-background-secondary-ghost-hover: var(--alpha-12);
    --color-background-secondary-ghost-active: var(--alpha-16);
    --color-text-info: var(--blue-200);
    --color-text-info-soft: var(--blue-300);
    --color-background-info-surface: var(--blue-a50);
    --color-border-info-surface: var(--blue-a50);
    --color-text-info-surface: var(--blue-300);
    --color-text-info-ghost: var(--blue-200);
    --color-text-info-ghost-hover: var(--blue-200);
    --color-text-warning: var(--orange-500);
    --color-text-warning-soft: var(--orange-400);
    --color-background-warning-surface: var(--orange-a50);
    --color-border-warning-surface: var(--orange-a50);
    --color-text-warning-surface: var(--orange-400);
    --color-text-caution: var(--yellow-500);
    --color-text-caution-soft: var(--yellow-400);
    --color-background-caution-surface: var(--yellow-a50);
    --color-border-caution-surface: var(--yellow-a50);
    --color-text-caution-surface: var(--yellow-400);
    --color-text-danger: var(--red-500);
    --color-text-danger-soft: var(--red-400);
    --color-background-danger-surface: var(--red-a50);
    --color-border-danger-surface: var(--red-a50);
    --color-text-danger-surface: var(--red-400);
    --color-text-success: var(--green-400);
    --color-text-success-soft: var(--green-400);
    --color-background-success-surface: var(--green-a50);
    --color-border-success-surface: var(--green-a50);
    --color-text-success-surface: var(--green-400);
    --color-background-success-solid: var(--green-600);
    --color-background-success-solid-hover: var(--green-600);
    --color-background-success-solid-active: var(--green-600);
    --color-border-success-outline: var(--green-600);
    --color-border-success-outline-hover: var(--green-600);
    --color-text-discovery: var(--purple-500);
    --color-text-discovery-soft: var(--purple-200);
    --color-background-discovery-surface: var(--purple-a50);
    --color-border-discovery-surface: var(--purple-a50);
    --color-text-discovery-surface: var(--purple-200);
    --color-text-discovery-outline: var(--purple-400);
    --color-text-discovery-outline-hover: var(--purple-400);
    --color-text-disabled: var(--gray-500);
    --color-border-subtle: var(--alpha-06);
    --color-border: var(--alpha-12);
    --color-border-strong: var(--alpha-20);
    --shadow: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;
    --color-surface: var(--gray-200);
    --color-surface-secondary: var(--gray-100);
    --color-surface-tertiary: var(--gray-50);
    --color-surface-elevated: var(--gray-300);
    --color-surface-elevated-secondary: var(--gray-400);
  }
}

/* node_modules/@openai/apps-sdk-ui/dist/es/styles/variables-components.css */
@layer theme {
  :root, :where([data-theme]) {
    --alert-border-radius: var(--radius-xl);
    --alert-gap: calc(var(--spacing) * 3);
    --alert-gutter: calc(var(--spacing) * 4);
    --alert-font-size: var(--font-text-sm-size);
    --alert-line-height: var(--font-text-sm-line-height);
    --alert-title-font-weight: var(--font-weight-semibold);
    --avatar-radius: var(--radius-full);
    --avatar-size: 28px;
    --avatar-font-size-scaling: .5;
    --avatar-overflow-font-size-scaling-one: .45;
    --avatar-overflow-font-size-scaling-two: .37;
    --avatar-overflow-font-size-scaling-three: .3;
    --avatar-group-cutout-width: 3px;
    --avatar-group-cutout-color: var(--color-surface);
    --avatar-group-spacing: -8px;
    --badge-gutter-sm: calc(var(--control-gutter-2xs)  - 1px);
    --badge-gutter-md: var(--control-gutter-2xs);
    --badge-gutter-lg: var(--control-gutter-xs);
    --badge-size-sm: calc(var(--control-size-3xs)  - 2px);
    --badge-size-md: var(--control-size-3xs);
    --badge-size-lg: var(--control-size-2xs);
    --badge-radius-sm: var(--radius-xs);
    --badge-radius-md: var(--radius-xs);
    --badge-radius-lg: var(--radius-sm);
    --badge-font-size-sm: var(--font-text-xs-size);
    --badge-font-size-md: var(--font-text-sm-size);
    --badge-font-size-lg: var(--font-text-sm-size);
    --badge-tracking-sm: var(--tracking-wide);
    --badge-tracking-md: var(--tracking-normal);
    --badge-tracking-lg: var(--tracking-normal);
    --badge-font-weight-sm: var(--font-weight-semibold);
    --badge-font-weight-md: var(--font-weight-semibold);
    --badge-font-weight-lg: var(--font-weight-semibold);
    --badge-icon-font-size-sm: var(--font-text-xs-size);
    --badge-icon-font-size-md: var(--font-text-md-size);
    --badge-icon-font-size-lg: var(--font-text-md-size);
    --badge-indicator-size-sm: var(--font-text-xs-size);
    --badge-indicator-size-md: var(--font-text-xs-size);
    --badge-indicator-size-lg: var(--font-text-sm-size);
    --button-gap-sm: 3px;
    --button-gap-md: 4px;
    --button-gap-lg: 6px;
    --button-font-weight: var(--font-weight-medium);
    --input-gap-xs: 4px;
    --input-gap-sm: 6px;
    --input-gap-md: 8px;
    --input-gap-lg: 10px;
    --input-text-color: var(--color-text);
    --input-placeholder-text-color: var(--color-text-tertiary);
    --input-outline-border-color: var(--color-border-primary-outline);
    --input-outline-border-color-focus: var(--alpha-50);
    --input-soft-background-color: var(--color-background-primary-soft-alpha);
    --input-soft-border-color-focus: var(--alpha-20);
    --link-font-weight: inherit;
    --link-gap: calc(var(--spacing) * .5);
    --link-radius: var(--radius-sm);
    --link-underline-decoration-offset: .1em;
    --chat-max-width: 800px;
    --chat-gutter: calc(var(--spacing) * 5);
    --chat-background-color: var(--color-surface);
    --thread-gutter: calc(var(--spacing) * 4);
    --composer-gutter: calc(var(--spacing) * 3);
    --composer-compact-gutter: calc(var(--spacing) * 2);
    --composer-radius: var(--radius-4xl);
    --composer-background-color: var(--color-surface-elevated);
    --smoothing-background-color: var(--color-surface);
    --user-message-text-color: var(--color-text);
    --source-list-gutter: var(--thread-gutter);
    --codeblock-background-color: var(--gray-25);
    --codeblock-syntax-4: var(--pink-500);
    --dialog-min-width: 250px;
    --dialog-max-width: 450px;
    --dialog-container-inner-padding: calc(var(--spacing) * 5);
    --dialog-backdrop-fade-background: color-mix(in oklab, var(--color-surface-elevated) 60%, transparent);
    --menu-gutter: calc(var(--spacing) * 1.5);
    --menu-radius: var(--radius-xl);
    --menu-font-size: var(--font-text-sm-size);
    --menu-line-height: var(--font-text-sm-line-height);
    --menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    --menu-item-gap: calc(var(--spacing) * 1.5);
    --menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
    --menu-separator-background-color: var(--color-border);
    --menu-radio-indicator-size: var(--font-text-lg-size);
    --menu-radio-indicator-hole-size: var(--font-text-3xs-size);
    --menu-checkbox-indicator-size: var(--font-text-lg-size);
    --modal-container-inner-padding: calc(var(--spacing) * 5);
    --popover-radius: var(--radius-xl);
    --radio-group-col-gap: calc(var(--spacing) * 2.5);
    --radio-group-row-gap: calc(var(--spacing) * 5);
    --radio-group-item-gap: calc(var(--spacing) * 1.5);
    --radio-group-item-font-size: var(--font-text-sm-size);
    --radio-group-item-line-height: var(--font-text-sm-line-height);
    --radio-group-indicator-size: var(--font-text-md-size);
    --radio-group-indicator-border-color: var(--color-border-primary-outline);
    --radio-group-indicator-border-color-hover: var(--alpha-25);
    --radio-group-indicator-background-color: var(--color-background-primary-solid);
    --radio-group-indicator-hole-size: .375rem;
    --radio-group-indicator-hole-background-color: var(--color-text-primary-solid);
    --segmented-control-gap: 2px;
    --segmented-control-gutter: 2px;
    --segmented-control-font-weight: var(--font-weight-semibold);
    --segmented-control-thumb-shadow: 0 1px 4px -1px #0003;
    --segmented-control-option-highlight-gutter: 1px;
    --select-control-font-weight: var(--font-weight-medium);
    --switch-track-width: 32px;
    --switch-track-height: 19px;
    --switch-thumb-offset: 3px;
    --switch-thumb-size: calc(var(--switch-track-height)  - 2 * var(--switch-thumb-offset));
    --switch-thumb-shadow: 0 1px 2px #0003;
    --switch-label-gap: calc(var(--spacing) * 2);
  }

  :where(:root), :where([data-theme="light"]) {
    --avatar-image-border-color: var(--alpha-04);
    --input-outline-border-color-hover: var(--alpha-25);
    --input-border-color-invalid: var(--red-500);
    --link-primary-text-color: var(--blue-500);
    --link-primary-text-color-hover: var(--blue-800);
    --user-message-background-color: var(--alpha-05);
    --codeblock-syntax-1: #c0660d;
    --codeblock-syntax-2: var(--blue-500);
    --codeblock-syntax-3: var(--green-600);
    --codeblock-syntax-5: var(--purple-500);
    --dialog-backdrop-dim-background: #0000004d;
    --menu-item-background-color: var(--alpha-08);
    --modal-backdrop-background: #0000004d;
    --segmented-control-background: var(--gray-100);
    --segmented-control-thumb-background: var(--gray-0);
    --segmented-control-option-highlight-background-color: var(--gray-200);
    --slider-track-color: var(--gray-150);
    --slider-range-color: var(--gray-450);
    --switch-track-color: var(--gray-150);
    --switch-track-color-hover: var(--gray-200);
    --switch-track-color-checked: var(--gray-900);
    --switch-track-color-checked-disabled: var(--gray-300);
    --switch-track-color-disabled: var(--gray-100);
    --switch-thumb-color: var(--gray-0);
    --switch-thumb-color-disabled: var(--gray-0);
  }

  :where([data-theme="dark"]) {
    --avatar-image-border-color: var(--alpha-15);
    --input-outline-border-color-hover: var(--alpha-30);
    --input-border-color-invalid: var(--red-600);
    --link-primary-text-color: var(--blue-300);
    --link-primary-text-color-hover: var(--blue-400);
    --user-message-background-color: var(--alpha-08);
    --codeblock-syntax-1: var(--yellow-100);
    --codeblock-syntax-2: var(--blue-200);
    --codeblock-syntax-3: var(--green-300);
    --codeblock-syntax-5: var(--purple-300);
    --dialog-backdrop-dim-background: #00000080;
    --menu-item-background-color: var(--alpha-10);
    --modal-backdrop-background: #00000080;
    --segmented-control-background: var(--gray-0);
    --segmented-control-thumb-background: var(--gray-300);
    --segmented-control-option-highlight-background-color: var(--gray-300);
    --slider-track-color: var(--gray-400);
    --slider-range-color: var(--gray-600);
    --switch-track-color: var(--gray-400);
    --switch-track-color-hover: var(--gray-450);
    --switch-track-color-checked: var(--blue-400);
    --switch-track-color-checked-disabled: var(--blue-700);
    --switch-track-color-disabled: var(--gray-300);
    --switch-thumb-color: var(--gray-1000);
    --switch-thumb-color-disabled: var(--gray-800);
  }
}

/* node_modules/@openai/apps-sdk-ui/dist/es/styles/globals.css */
@layer base {
  html, :host {
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: var(--tracking-normal);
  }

  [data-theme="light"] {
    color-scheme: light;
  }

  [data-theme="dark"] {
    color-scheme: dark;
  }

  * {
    scrollbar-color: var(--scrollbar-color) transparent;
    scrollbar-width: thin;
  }

  [data-exiting] {
    pointer-events: none;
  }

  ::-moz-placeholder {
    color: var(--color-text-tertiary);
  }

  ::placeholder {
    color: var(--color-text-tertiary);
  }

  b, strong {
    font-weight: var(--font-weight-semibold);
  }
}

/* main.css */
:root {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --buncss-light: ;
    --buncss-dark: initial;
  }
}

body {
  background: var(--surface, #0f172a);
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  margin: 0;
}

.page {
  display: flex;
  color: var(--text-primary, #e2e8f0);
  background: radial-gradient(circle at 20% 20%, #3b82f633, #0000 32%), radial-gradient(circle at 80% 10%, #ec489940, #0000 30%), #0b1220;
  flex-direction: column;
  justify-content: flex-start;
  align-items:  center;
  padding: 24px;
}

.clock-card {
  color: var(--text-primary, #e2e8f0);
  background: #0f172acc;
  border: 1px solid #94a3b84d;
  border-radius: 24px;
  width: min(1100px, 100%);
  padding: 24px;
  box-shadow: 0 30px 70px #00000059;
}

@media (min-width: 768px) {
  .clock-card {
    padding: 32px;
  }
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.title {
  margin: 4px 0 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
}

.meta {
  color: var(--text-secondary, #cbd5e1);
  margin: 0;
  font-size: 14px;
}

.meta.subtle {
  color: #e2e8f0b3;
  margin-top: 4px;
}

.content-grid {
  display: grid;
  align-items:  center;
  gap: 24px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .content-grid {
    grid-template-columns: auto 1fr;
  }
}

.clock-wrap {
  display: flex;
  justify-content: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-block {
  background: #0f172ae6;
  border: 1px solid #94a3b840;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 18px 40px #00000040;
}

.body {
  color: var(--text-primary, #e2e8f0);
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.body.subtle {
  color: #e2e8f0c2;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat {
  background: #0f172ae6;
  border: 1px solid #94a3b840;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px #0003;
}

.label {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8e6;
  margin: 0;
  font-size: 12px;
}

.value {
  color: var(--text-primary, #e2e8f0);
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 650;
}

.clock-shell {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, #ffffff14, #0000 40%), radial-gradient(circle at 70% 70%, #3b82f62e, #0000 45%), linear-gradient(145deg, #94a3b840, #0f172acc);
  border: 1px solid #94a3b840;
  border-radius: 9999px;
  width: min(72vw, 320px);
  box-shadow: 0 20px 50px #00000059, inset 0 0 0 1px #94a3b859, inset 0 0 25px #ffffff0a;
}

.clock-center {
  position: absolute;
  background: linear-gradient(145deg, #e2e8f0, #94a3b8);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  inset: 50%;
  box-shadow: 0 0 12px #fff6;
}

.hand {
  position: absolute;
  transform-origin: bottom center;
  border-radius: 999px;
  bottom: 50%;
  left: 50%;
  box-shadow: 0 4px 10px #00000059;
}

.hand.hour {
  background: linear-gradient(#cbd5e1, #64748b);
  width: 6px;
  height: 65px;
}

.hand.minute {
  background: linear-gradient(#93c5fd, #2563eb);
  width: 4px;
  height: 96px;
}

.hand.second {
  background: #f97316;
  width: 2px;
  height: 110px;
  box-shadow: 0 0 10px #f9731699;
}

.tick {
  position: absolute;
  transform-origin: center 148px;
  opacity: .6;
  background: #e2e8f0b3;
  border-radius: 999px;
  width: 2px;
  height: 12px;
  top: 12px;
  left: 50%;
}

.tick.major {
  opacity: .95;
  background: #e2e8f0;
  width: 3px;
  height: 16px;
}

.glow-ring {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle, #3b82f61a 0%, #0000 55%);
  border-radius: 9999px;
  inset: 10px;
}

.blur-backdrop {
  backdrop-filter: blur(14px) saturate(140%);
  background: #0f172ab3;
}

/* node_modules/@openai/apps-sdk-ui/dist/es/components/Badge/Badge.module.css */
@layer components {
  .Badge_LundOw {
    --indicator-size: var(--badge-indicator-size);
    display: inline-flex;
    align-items:  center;
    gap: calc(var(--spacing) * 1);
    height: var(--badge-size);
    padding: 0 var(--badge-gutter);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    letter-spacing: var(--badge-tracking);
    white-space: nowrap;
  }

  .Badge_LundOw svg {
    font-size: var(--badge-icon-font-size);
  }

  :where(.Badge_LundOw svg:first-child:not(:only-child)) {
    margin-left: var(--badge-icon-offset, -1px);
  }

  :where(.Badge_LundOw svg:last-child:not(:only-child)) {
    margin-right: var(--badge-icon-offset, -1px);
  }

  .Badge_LundOw[data-variant="soft"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="secondary"]) {
    --badge-background-color: var(--color-background-secondary-soft-alpha);
    --badge-text-color: var(--color-text-secondary-soft);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="success"]) {
    --badge-background-color: var(--color-background-success-soft-alpha);
    --badge-text-color: var(--color-text-success-soft);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="warning"]) {
    --badge-background-color: var(--color-background-warning-soft-alpha);
    --badge-text-color: var(--color-text-warning-soft);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="danger"]) {
    --badge-background-color: var(--color-background-danger-soft-alpha);
    --badge-text-color: var(--color-text-danger-soft);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="info"]) {
    --badge-background-color: var(--color-background-info-soft-alpha);
    --badge-text-color: var(--color-text-info-soft);
  }

  .Badge_LundOw[data-variant="soft"]:where([data-color="discovery"]) {
    --badge-background-color: var(--color-background-discovery-soft-alpha);
    --badge-text-color: var(--color-text-discovery-soft);
  }

  .Badge_LundOw[data-variant="solid"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="secondary"]) {
    --badge-background-color: var(--color-background-secondary-solid);
    --badge-text-color: var(--color-text-secondary-solid);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="success"]) {
    --badge-background-color: var(--color-background-success-solid);
    --badge-text-color: var(--color-text-success-solid);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="warning"]) {
    --badge-background-color: var(--color-background-warning-solid);
    --badge-text-color: var(--color-text-warning-solid);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="danger"]) {
    --badge-background-color: var(--color-background-danger-solid);
    --badge-text-color: var(--color-text-danger-solid);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="info"]) {
    --badge-background-color: var(--color-background-info-solid);
    --badge-text-color: var(--color-text-info-solid);
  }

  .Badge_LundOw[data-variant="solid"]:where([data-color="discovery"]) {
    --badge-background-color: var(--color-background-discovery-solid);
    --badge-text-color: var(--color-text-discovery-solid);
  }

  .Badge_LundOw[data-variant="outline"] {
    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
    color: var(--badge-text-color);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="secondary"]) {
    --badge-border-color: var(--color-border-secondary-outline);
    --badge-text-color: var(--color-text-secondary-outline);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="success"]) {
    --badge-border-color: var(--color-border-success-outline);
    --badge-text-color: var(--color-text-success-outline);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="warning"]) {
    --badge-border-color: var(--color-border-warning-outline);
    --badge-text-color: var(--color-text-warning-outline);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="danger"]) {
    --badge-border-color: var(--color-border-danger-outline);
    --badge-text-color: var(--color-text-danger-outline);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="info"]) {
    --badge-border-color: var(--color-border-info-outline);
    --badge-text-color: var(--color-text-info-outline);
  }

  .Badge_LundOw[data-variant="outline"]:where([data-color="discovery"]) {
    --badge-border-color: var(--color-border-discovery-outline);
    --badge-text-color: var(--color-text-discovery-outline);
  }

  .Badge_LundOw:where([data-size="sm"]) {
    --badge-size: var(--badge-size-sm);
    --badge-gutter: var(--badge-gutter-sm);
    --badge-font-size: var(--badge-font-size-sm);
    --badge-font-weight: var(--badge-font-weight-sm);
    --badge-tracking: var(--badge-tracking-sm);
    --badge-radius: var(--badge-radius-sm);
    --badge-icon-font-size: var(--badge-icon-font-size-sm);
    --badge-indicator-size: var(--badge-indicator-size-sm);
  }

  .Badge_LundOw:where([data-size="md"]) {
    --badge-size: var(--badge-size-md);
    --badge-gutter: var(--badge-gutter-md);
    --badge-font-size: var(--badge-font-size-md);
    --badge-font-weight: var(--badge-font-weight-md);
    --badge-tracking: var(--badge-tracking-md);
    --badge-radius: var(--badge-radius-md);
    --badge-icon-font-size: var(--badge-icon-font-size-md);
    --badge-indicator-size: var(--badge-indicator-size-md);
  }

  .Badge_LundOw:where([data-size="lg"]) {
    --badge-size: var(--badge-size-lg);
    --badge-gutter: var(--badge-gutter-lg);
    --badge-font-size: var(--badge-font-size-lg);
    --badge-font-weight: var(--badge-font-weight-lg);
    --badge-tracking: var(--badge-tracking-lg);
    --badge-radius: var(--badge-radius-lg);
    --badge-icon-font-size: var(--badge-icon-font-size-lg);
    --badge-indicator-size: var(--badge-indicator-size-lg);
  }

  .Badge_LundOw:where([data-pill]) {
    --badge-radius: var(--radius-full);
    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
  }
}