* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f9f9f9;
  color: #151c29;
  font-family: Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

main > section {
  padding: 80px 16px;
}

[class~="max-w-container-max"],
[class~="max-w-container"],
[class~="max-w-[1200px]"] {
  width: min(1200px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

[class~="max-w-5xl"] { max-width: 1024px; }
[class~="max-w-4xl"] { max-width: 896px; }
[class~="max-w-3xl"] { max-width: 768px; }
[class~="max-w-2xl"] { max-width: 672px; }
[class~="max-w-xl"] { max-width: 576px; }
[class~="max-w-lg"] { max-width: 512px; }
[class~="max-w-md"] { max-width: 448px; }

[class~="mx-auto"] {
  margin-left: auto;
  margin-right: auto;
}

[class~="grid"] { display: grid; }
[class~="flex"] { display: flex; }
[class~="inline-flex"] { display: inline-flex; }
[class~="inline-block"] { display: inline-block; }
[class~="block"] { display: block; }
[class~="hidden"] { display: none; }
[class~="relative"] { position: relative; }
[class~="absolute"] { position: absolute; }
[class~="overflow-hidden"] { overflow: hidden; }
[class~="overflow-x-hidden"] { overflow-x: hidden; }

[class~="grid-cols-1"] { grid-template-columns: 1fr; }
[class~="grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[class~="grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[class~="grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

[class~="flex-col"] { flex-direction: column; }
[class~="flex-wrap"] { flex-wrap: wrap; }
[class~="items-center"] { align-items: center; }
[class~="items-start"] { align-items: flex-start; }
[class~="items-end"] { align-items: flex-end; }
[class~="justify-center"] { justify-content: center; }
[class~="justify-between"] { justify-content: space-between; }
[class~="justify-end"] { justify-content: flex-end; }
[class~="place-items-center"] { place-items: center; }
[class~="text-center"] { text-align: center; }
[class~="text-left"] { text-align: left; }
[class~="text-right"] { text-align: right; }

[class~="gap-1"] { gap: 4px; }
[class~="gap-2"] { gap: 8px; }
[class~="gap-3"] { gap: 12px; }
[class~="gap-4"],
[class~="gap-md"],
[class~="gap-stack-md"] { gap: 16px; }
[class~="gap-5"] { gap: 20px; }
[class~="gap-6"],
[class~="gap-gutter"] { gap: 24px; }
[class~="gap-8"],
[class~="gap-lg"],
[class~="gap-stack-lg"] { gap: 32px; }
[class~="gap-10"] { gap: 40px; }
[class~="gap-12"] { gap: 48px; }
[class~="gap-16"] { gap: 64px; }

[class~="p-2"] { padding: 8px; }
[class~="p-3"] { padding: 12px; }
[class~="p-4"] { padding: 16px; }
[class~="p-5"] { padding: 20px; }
[class~="p-6"] { padding: 24px; }
[class~="p-8"],
[class~="p-lg"],
[class~="p-stack-lg"] { padding: 32px; }
[class~="p-10"] { padding: 40px; }
[class~="p-12"] { padding: 48px; }

[class~="px-3"] { padding-left: 12px; padding-right: 12px; }
[class~="px-4"],
[class~="px-margin-mobile"] { padding-left: 16px; padding-right: 16px; }
[class~="px-5"] { padding-left: 20px; padding-right: 20px; }
[class~="px-6"] { padding-left: 24px; padding-right: 24px; }
[class~="px-8"] { padding-left: 32px; padding-right: 32px; }
[class~="px-10"] { padding-left: 40px; padding-right: 40px; }
[class~="px-12"] { padding-left: 48px; padding-right: 48px; }

[class~="py-1"] { padding-top: 4px; padding-bottom: 4px; }
[class~="py-2"] { padding-top: 8px; padding-bottom: 8px; }
[class~="py-3"] { padding-top: 12px; padding-bottom: 12px; }
[class~="py-4"] { padding-top: 16px; padding-bottom: 16px; }
[class~="py-5"] { padding-top: 20px; padding-bottom: 20px; }
[class~="py-6"] { padding-top: 24px; padding-bottom: 24px; }
[class~="py-8"] { padding-top: 32px; padding-bottom: 32px; }
[class~="py-10"] { padding-top: 40px; padding-bottom: 40px; }
[class~="py-12"] { padding-top: 48px; padding-bottom: 48px; }
[class~="py-16"] { padding-top: 64px; padding-bottom: 64px; }
[class~="py-20"],
[class~="py-section-padding"],
[class~="py-section-padding-vertical"] { padding-top: 80px; padding-bottom: 80px; }

[class~="pt-12"] { padding-top: 48px; }
[class~="pt-16"] { padding-top: 64px; }
[class~="pt-20"] { padding-top: 80px; }
[class~="pt-24"] { padding-top: 96px; }
[class~="pb-10"] { padding-bottom: 40px; }
[class~="pb-20"] { padding-bottom: 80px; }
[class~="pb-24"] { padding-bottom: 96px; }

[class~="mb-2"] { margin-bottom: 8px; }
[class~="mb-3"] { margin-bottom: 12px; }
[class~="mb-4"] { margin-bottom: 16px; }
[class~="mb-6"] { margin-bottom: 24px; }
[class~="mb-8"] { margin-bottom: 32px; }
[class~="mb-10"] { margin-bottom: 40px; }
[class~="mb-12"] { margin-bottom: 48px; }
[class~="mb-16"] { margin-bottom: 64px; }
[class~="mt-2"] { margin-top: 8px; }
[class~="mt-3"] { margin-top: 12px; }
[class~="mt-4"] { margin-top: 16px; }
[class~="mt-5"] { margin-top: 20px; }
[class~="mt-6"] { margin-top: 24px; }
[class~="mt-8"] { margin-top: 32px; }

[class~="space-y-2"] > * + * { margin-top: 8px; }
[class~="space-y-3"] > * + * { margin-top: 12px; }
[class~="space-y-4"] > * + * { margin-top: 16px; }
[class~="space-y-6"] > * + * { margin-top: 24px; }
[class~="space-y-8"] > * + * { margin-top: 32px; }
[class~="space-y-10"] > * + * { margin-top: 40px; }
[class~="space-y-12"] > * + * { margin-top: 48px; }

[class~="font-bold"] { font-weight: 700; }
[class~="font-semibold"] { font-weight: 600; }
[class~="font-medium"] { font-weight: 500; }
[class~="font-extrabold"],
[class~="font-black"] { font-weight: 800; }

[class~="uppercase"] { text-transform: uppercase; }
[class~="tracking-wide"] { letter-spacing: 0.025em; }
[class~="tracking-wider"] { letter-spacing: 0.05em; }
[class~="tracking-widest"] { letter-spacing: 0.08em; }
[class~="leading-tight"] { line-height: 1.08; }
[class~="leading-snug"] { line-height: 1.25; }
[class~="leading-relaxed"] { line-height: 1.65; }

[class~="text-xs"] { font-size: 12px; line-height: 1.4; }
[class~="text-sm"] { font-size: 14px; line-height: 1.45; }
[class~="text-lg"],
[class~="text-body-lg"] { font-size: 18px; line-height: 1.6; }
[class~="text-xl"] { font-size: 20px; line-height: 1.35; }
[class~="text-2xl"],
[class~="text-headline-md"] { font-size: 24px; line-height: 1.2; }
[class~="text-3xl"] { font-size: 30px; line-height: 1.15; }
[class~="text-4xl"],
[class~="text-headline-lg"] { font-size: 36px; line-height: 1.15; }
[class~="text-5xl"],
[class~="text-display"] { font-size: clamp(42px, 6vw, 64px); line-height: 1.04; }
[class~="text-6xl"],
[class~="text-headline-xl"] { font-size: clamp(48px, 7vw, 80px); line-height: 1; }

[class~="text-on-surface"],
[class~="text-on-background"],
[class~="text-text-main"],
[class~="text-deep-navy"],
[class~="text-primary"],
[class~="text-charcoal"] { color: #151c29; }
[class~="text-on-surface-variant"],
[class~="text-soft-charcoal"],
[class~="text-text-muted"],
[class~="text-deep-navy/70"] { color: #444656; }
[class~="text-secondary"],
[class~="text-on-secondary-container"] { color: #265f2c; }
[class~="text-white"],
[class~="text-on-primary"],
[class~="text-surface-bright"] { color: #fff; }

[class~="bg-background"],
[class~="bg-surface"],
[class~="bg-surface-bright"] { background: #f9f9ff; }
[class~="bg-surface-container-low"],
[class~="bg-surface-container"],
[class~="bg-surface-subtle"] { background: #f1f3ff; }
[class~="bg-surface-container-lowest"],
[class~="bg-white"],
[class~="bg-surface-white"] { background: #fff; }
[class~="bg-primary"],
[class~="bg-primary-container"],
[class~="bg-charcoal"],
[class~="bg-deep-navy"] { background: #172821; }
[class~="bg-secondary-container"],
[class~="bg-secondary-fixed"],
[class~="bg-success-green"] { background: #b9edb3; }
[class~="bg-tertiary-container"],
[class~="bg-tertiary-fixed"] { background: #e8defb; }
[class~="bg-[#FBE492]"] { background: #fbe492; }
[class~="bg-[#dff7da]"] { background: #dff7da; }
[class~="bg-[#e0f2fe]"] { background: #e0f2fe; }
[class~="bg-[#fde2e4]"] { background: #fde2e4; }
[class~="bg-[#F8FAFF]"] { background: #f8faff; }
[class~="bg-[#FFF2CF]"] { background: #fff2cf; }
[class~="bg-[#E8F8F1]"] { background: #e8f8f1; }
[class~="bg-[#F4F0FF]"] { background: #f4f0ff; }

[class~="rounded"],
[class~="rounded-md"] { border-radius: 8px; }
[class~="rounded-lg"] { border-radius: 12px; }
[class~="rounded-xl"] { border-radius: 16px; }
[class~="rounded-2xl"] { border-radius: 20px; }
[class~="rounded-3xl"],
[class~="rounded-[32px]"],
[class~="rounded-[2rem]"],
[class~="rounded-[2.5rem]"] { border-radius: 32px; }
[class~="rounded-full"] { border-radius: 999px; }

[class~="border"] { border: 1px solid #d9deef; }
[class~="border-2"] { border: 2px solid #d9deef; }
[class~="border-4"] { border: 4px solid #fff; }
[class~="border-b"] { border-bottom: 1px solid #d9deef; }
[class~="border-t"] { border-top: 1px solid #d9deef; }
[class~="shadow-sm"] { box-shadow: 0 4px 14px rgba(18, 25, 38, 0.06); }
[class~="shadow-md"],
[class~="shadow-lg"],
[class~="shadow-xl"],
[class~="shadow-2xl"],
[class~="shadow-soft"] { box-shadow: 0 18px 48px rgba(18, 25, 38, 0.12); }

[class~="w-full"] { width: 100%; }
[class~="h-full"] { height: 100%; }
[class~="w-fit"] { width: fit-content; }
[class~="w-6"] { width: 24px; }
[class~="h-6"] { height: 24px; }
[class~="w-8"] { width: 32px; }
[class~="h-8"] { height: 32px; }
[class~="w-10"] { width: 40px; }
[class~="h-10"] { height: 40px; }
[class~="w-12"] { width: 48px; }
[class~="h-12"] { height: 48px; }
[class~="w-16"] { width: 64px; }
[class~="h-16"] { height: 64px; }
[class~="h-20"] { height: 80px; }
[class~="h-24"] { height: 96px; }
[class~="h-40"] { height: 160px; }
[class~="h-48"] { height: 192px; }
[class~="h-64"] { height: 256px; }
[class~="min-h-[400px]"] { min-height: 400px; }
[class~="object-cover"] { object-fit: cover; }
[class~="aspect-video"] { aspect-ratio: 16 / 9; }
[class~="aspect-[1.5]"] { aspect-ratio: 1.5; }

[class~="transition-all"],
[class~="transition-colors"],
[class~="transition-transform"] {
  transition: all 180ms ease;
}

[class~="hover:opacity-90"]:hover { opacity: 0.9; }
[class~="hover:scale-105"]:hover,
[class~="hover:scale-[1.02]"]:hover { transform: scale(1.02); }
[class~="hover:underline"]:hover { text-decoration: underline; }

button[class*="rounded-full"],
a[class*="rounded-full"] {
  text-decoration: none;
}

.bento-card,
.mockup-card,
.ui-panel,
.creator-card {
  border: 1px solid #d9deef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(18, 25, 38, 0.08);
}

@media (min-width: 768px) {
  [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="md:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [class~="md:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [class~="md:flex"] { display: flex; }
  [class~="md:flex-row"] { flex-direction: row; }
  [class~="md:items-center"] { align-items: center; }
  [class~="md:justify-between"] { justify-content: space-between; }
  [class~="md:text-headline-lg"],
  [class~="md:text-display-lg"] { font-size: clamp(44px, 6vw, 72px); }
}

@media (min-width: 1024px) {
  [class~="lg:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="lg:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [class~="lg:grid-cols-5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  [class~="lg:grid-cols-6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [class~="lg:flex-row"] { flex-direction: row; }
  [class~="lg:block"] { display: block; }
}

@media (max-width: 767px) {
  main > section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  [class~="grid-cols-2"],
  [class~="grid-cols-3"],
  [class~="grid-cols-4"] {
    grid-template-columns: 1fr;
  }
}