/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer utilities.runtime, utilities.static, utilities.runtime-variants;
@layer theme {
  :root, :host {
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -0.025em;
    --tracking-widest: 0.1em;
    --leading-relaxed: 1.625;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer utilities.runtime {
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl, 0.375rem);
  }
  .rounded-lg {
    border-radius: var(--radius-lg, 0.375rem);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-border {
    border-color: var(--color-border, color-mix(in srgb, #000 8%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--color-border, color-mix(in oklab, var(--color-black) 8%, transparent));
    }
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .bg-background {
    background-color: var(--color-background, var(--color-white));
  }
  .bg-card {
    background-color: var(--color-card, var(--color-white));
  }
  .bg-primary-foreground {
    background-color: var(--color-primary-foreground, var(--color-white));
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }
  .bg-\[linear-gradient\(to_right\,\#FF216F\,\#FF4A22\)\] {
    background-image: linear-gradient(to right,#FF216F,#FF4A22);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-left {
    object-position: left;
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .text-center {
    text-align: center;
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-foreground {
    color: var(--color-foreground, var(--color-neutral-800));
  }
  .text-muted-foreground {
    color: var(--color-muted-foreground, color-mix(in srgb, oklch(55.6% 0 0) 90%, #000));
    @supports (color: color-mix(in lab, red, red)) {
      color: var(--color-muted-foreground, color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black)));
    }
  }
  .text-primary {
    color: var(--color-primary, var(--color-rose-500));
  }
  .text-primary-foreground {
    color: var(--color-primary-foreground, var(--color-white));
  }
  .text-zinc-500 {
    color: var(--color-zinc-500);
  }
  .text-zinc-600 {
    color: var(--color-zinc-600);
  }
  .text-zinc-700 {
    color: var(--color-zinc-700);
  }
  .text-zinc-900 {
    color: var(--color-zinc-900);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .hover\:bg-primary-foreground\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary-foreground, var(--color-white)) 90%, transparent);
        }
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary, var(--color-rose-500));
      }
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
:root {
  --font-sans: 'Inter Variable', sans-serif;
}
html {
  font-family: var(--font-sans);
}
:root {
  --color-primary: var(--color-rose-500);
  --primary: var(--color-rose-500);
  --color-primary-foreground: var(--color-white);
  --primary-foreground: var(--color-white);
  --color-background: var(--color-white);
  --background: var(--color-white);
  --color-foreground: var(--color-neutral-800);
  --foreground: var(--color-neutral-800);
  --color-border: color-mix(in srgb, #000 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-border: color-mix(in oklab, var(--color-black) 8%, transparent);
  }
  --border: color-mix(in srgb, #000 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --border: color-mix(in oklab, var(--color-black) 8%, transparent);
  }
  --color-input: color-mix(in srgb, #000 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-input: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
  --input: color-mix(in srgb, #000 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --input: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
  --color-card: var(--color-white);
  --card: var(--color-white);
  --color-card-foreground: var(--color-neutral-800);
  --card-foreground: var(--color-neutral-800);
  --color-muted: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-muted: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --muted: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --muted: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --color-muted-foreground: color-mix(in srgb, oklch(55.6% 0 0) 90%, #000);
  @supports (color: color-mix(in lab, red, red)) {
    --color-muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
  }
  --muted-foreground: color-mix(in srgb, oklch(55.6% 0 0) 90%, #000);
  @supports (color: color-mix(in lab, red, red)) {
    --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
  }
  --color-accent: var(--color-rose-50);
  --accent: var(--color-rose-50);
  --color-accent-foreground: var(--color-rose-700);
  --accent-foreground: var(--color-rose-700);
  --color-secondary: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-secondary: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --secondary: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --secondary: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --color-secondary-foreground: var(--color-neutral-800);
  --secondary-foreground: var(--color-neutral-800);
  --color-destructive: var(--color-red-500);
  --destructive: var(--color-red-500);
  --color-destructive-foreground: var(--color-red-700);
  --destructive-foreground: var(--color-red-700);
  --color-popover: var(--color-white);
  --popover: var(--color-white);
  --color-popover-foreground: var(--color-neutral-800);
  --popover-foreground: var(--color-neutral-800);
  --color-ring: var(--color-rose-500);
  --ring: var(--color-rose-500);
  --color-info: var(--color-blue-500);
  --info: var(--color-blue-500);
  --color-info-foreground: var(--color-blue-700);
  --info-foreground: var(--color-blue-700);
  --color-success: var(--color-emerald-500);
  --success: var(--color-emerald-500);
  --color-success-foreground: var(--color-emerald-700);
  --success-foreground: var(--color-emerald-700);
  --color-warning: var(--color-orange-500);
  --warning: var(--color-orange-500);
  --color-warning-foreground: var(--color-orange-700);
  --warning-foreground: var(--color-orange-700);
  --color-chart-1: var(--color-rose-500);
  --chart-1: var(--color-rose-500);
  --color-chart-2: var(--color-pink-500);
  --chart-2: var(--color-pink-500);
  --color-chart-3: var(--color-orange-500);
  --chart-3: var(--color-orange-500);
  --color-chart-4: var(--color-orange-600);
  --chart-4: var(--color-orange-600);
  --color-chart-5: var(--color-rose-600);
  --chart-5: var(--color-rose-600);
  --color-code: var(--color-white);
  --code: var(--color-white);
  --color-code-foreground: var(--foreground);
  --code-foreground: var(--foreground);
  --color-code-highlight: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-code-highlight: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --code-highlight: color-mix(in srgb, #000 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --code-highlight: color-mix(in oklab, var(--color-black) 4%, transparent);
  }
  --color-sidebar: var(--color-neutral-50);
  --sidebar: var(--color-neutral-50);
  --color-sidebar-foreground: oklch(26.9% 0 0);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar-foreground: color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar));
  }
  --sidebar-foreground: oklch(26.9% 0 0);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-foreground: color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar));
  }
  --color-sidebar-primary: var(--color-rose-500);
  --sidebar-primary: var(--color-rose-500);
  --color-sidebar-primary-foreground: var(--color-white);
  --sidebar-primary-foreground: var(--color-white);
  --color-sidebar-accent: var(--color-rose-50);
  --sidebar-accent: var(--color-rose-50);
  --color-sidebar-accent-foreground: var(--color-rose-700);
  --sidebar-accent-foreground: var(--color-rose-700);
  --color-sidebar-border: color-mix(in srgb, #000 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar-border: color-mix(in oklab, var(--color-black) 6%, transparent);
  }
  --sidebar-border: color-mix(in srgb, #000 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-border: color-mix(in oklab, var(--color-black) 6%, transparent);
  }
  --color-sidebar-ring: var(--color-rose-500);
  --sidebar-ring: var(--color-rose-500);
  --radius: 0.25rem;
  --radius-xs: 0.125rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: 0.375rem;
  --radius-xl: 0.375rem;
  --radius-2xl: 0.375rem;
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}
.dark {
  --color-primary: var(--color-rose-400);
  --primary: var(--color-rose-400);
  --color-primary-foreground: var(--color-white);
  --primary-foreground: var(--color-white);
  --color-background: color-mix(in srgb, oklch(14.5% 0 0) 95%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --color-background: color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white));
  }
  --background: color-mix(in srgb, oklch(14.5% 0 0) 95%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --background: color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white));
  }
  --color-foreground: var(--color-neutral-100);
  --foreground: var(--color-neutral-100);
  --color-border: color-mix(in srgb, #fff 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-border: color-mix(in oklab, var(--color-white) 6%, transparent);
  }
  --border: color-mix(in srgb, #fff 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --border: color-mix(in oklab, var(--color-white) 6%, transparent);
  }
  --color-input: color-mix(in srgb, #fff 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-input: color-mix(in oklab, var(--color-white) 8%, transparent);
  }
  --input: color-mix(in srgb, #fff 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --input: color-mix(in oklab, var(--color-white) 8%, transparent);
  }
  --color-card: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --color-card: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --card: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --color-card-foreground: var(--color-neutral-100);
  --card-foreground: var(--color-neutral-100);
  --color-muted: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-muted: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --muted: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --muted: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --color-muted-foreground: color-mix(in srgb, oklch(55.6% 0 0) 90%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --color-muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
  }
  --muted-foreground: color-mix(in srgb, oklch(55.6% 0 0) 90%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
  }
  --color-accent: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-accent: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --accent: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --color-accent-foreground: var(--color-neutral-100);
  --accent-foreground: var(--color-neutral-100);
  --color-secondary: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-secondary: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --secondary: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --secondary: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --color-secondary-foreground: var(--color-neutral-100);
  --secondary-foreground: var(--color-neutral-100);
  --color-destructive: color-mix(in srgb, oklch(63.7% 0.237 25.331) 90%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --color-destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
  }
  --destructive: color-mix(in srgb, oklch(63.7% 0.237 25.331) 90%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
  }
  --color-destructive-foreground: var(--color-red-400);
  --destructive-foreground: var(--color-red-400);
  --color-popover: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --color-popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --popover: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --color-popover-foreground: var(--color-neutral-100);
  --popover-foreground: var(--color-neutral-100);
  --color-ring: var(--color-rose-400);
  --ring: var(--color-rose-400);
  --color-info: var(--color-blue-500);
  --info: var(--color-blue-500);
  --color-info-foreground: var(--color-blue-400);
  --info-foreground: var(--color-blue-400);
  --color-success: var(--color-emerald-500);
  --success: var(--color-emerald-500);
  --color-success-foreground: var(--color-emerald-400);
  --success-foreground: var(--color-emerald-400);
  --color-warning: var(--color-amber-500);
  --warning: var(--color-amber-500);
  --color-warning-foreground: var(--color-amber-400);
  --warning-foreground: var(--color-amber-400);
  --color-chart-1: var(--color-blue-700);
  --chart-1: var(--color-blue-700);
  --color-chart-2: var(--color-emerald-500);
  --chart-2: var(--color-emerald-500);
  --color-chart-3: var(--color-amber-500);
  --chart-3: var(--color-amber-500);
  --color-chart-4: var(--color-purple-500);
  --chart-4: var(--color-purple-500);
  --color-chart-5: var(--color-rose-500);
  --chart-5: var(--color-rose-500);
  --color-code: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --color-code: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --code: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --code: color-mix(in srgb, var(--background) 98%, var(--color-white));
  }
  --color-code-foreground: var(--foreground);
  --code-foreground: var(--foreground);
  --color-code-highlight: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-code-highlight: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --code-highlight: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --code-highlight: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --color-sidebar: color-mix(in srgb, oklch(14.5% 0 0) 97%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar: color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white));
  }
  --sidebar: color-mix(in srgb, oklch(14.5% 0 0) 97%, #fff);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar: color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white));
  }
  --color-sidebar-foreground: oklch(97% 0 0);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar-foreground: color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar));
  }
  --sidebar-foreground: oklch(97% 0 0);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-foreground: color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar));
  }
  --color-sidebar-primary: var(--color-rose-400);
  --sidebar-primary: var(--color-rose-400);
  --color-sidebar-primary-foreground: var(--color-white);
  --sidebar-primary-foreground: var(--color-white);
  --color-sidebar-accent: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar-accent: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --sidebar-accent: color-mix(in srgb, #fff 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-accent: color-mix(in oklab, var(--color-white) 4%, transparent);
  }
  --color-sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-accent-foreground: var(--color-neutral-100);
  --color-sidebar-border: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --color-sidebar-border: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
  --sidebar-border: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-border: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
  --color-sidebar-ring: var(--color-rose-400);
  --sidebar-ring: var(--color-rose-400);
}
@layer base {
  :where([data-codelab-component="h4"]) {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  :where([data-codelab-component="h5"]) {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  :where([data-codelab-component="h6"]) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  :where([data-codelab-component="h2"]) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-zinc-900);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  :where([data-codelab-component="h3"]) {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-zinc-900);
  }
  body {
    min-height: 100vh;
    background-color: var(--color-white);
    color: var(--color-zinc-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  :where([data-codelab-component="h1"]) {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--color-zinc-900);
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  :where([data-codelab-component="p"]) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-zinc-600);
  }
  :where([data-codelab-component="header"]) {
    background-color: var(--color-white);
    color: var(--color-zinc-900);
  }
  :where([data-codelab-component="footer"]) {
    background-color: var(--color-white);
    color: var(--color-zinc-900);
  }
  :where([data-codelab-component="CardTitle"]) {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-zinc-900);
  }
  :where([data-codelab-component="CardDescription"]) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-zinc-600);
  }
  :where([data-codelab-component="Card"]) {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  :where([data-codelab-component="a"]) {
    color: var(--color-foreground, var(--color-neutral-800));
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary, var(--color-rose-500));
      }
    }
  }
  :where([data-codelab-component="lucide.icon"]) {
    color: var(--color-primary, var(--color-rose-500));
  }
  :where([data-codelab-component="simple-icons.icon"]) {
    color: var(--color-primary, var(--color-rose-500));
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}

/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer utilities.runtime-variants {
  .hover\:bg-primary-foreground\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary-foreground, var(--color-white)) 90%, transparent);
        }
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary, var(--color-rose-500));
      }
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing, 0.25rem) * 16);
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl, 2.25rem);
      line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl, 3.75rem);
      line-height: var(--tw-leading, var(--text-6xl--line-height, 1));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}