/*! tailwindcss v4.1.2 | MIT License | https://tailwindcss.com */
@layer theme, utilities;
@layer theme {
  :root, :host {
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .aspect-\[9\/20\] {
    aspect-ratio: 9/20;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .w-screen {
    width: 100vw;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-8 {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .bg-rose-400 {
    background-color: var(--color-rose-400);
  }
  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }
  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }
  .bg-slate-500 {
    background-color: var(--color-slate-500);
  }
}
body * {
  box-sizing: border-box;
}