:root {
  --background: rgb(249, 249, 251);
  --foreground: #050505;
}

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--background);
}

body {
  overflow: hidden;
}

/*
 * Tailwind's Play CDN (cdn.tailwindcss.com) generates its utility CSS
 * asynchronously at runtime, after scanning the DOM. boutique-grid.js's
 * layout effect measures the grid container synchronously on mount —
 * which can run before Tailwind has injected `.absolute`, `.w-full`,
 * `.h-screen`, etc. When that happens every tile briefly renders in normal
 * document flow instead of being absolutely positioned, so the container's
 * measured height reflects ~100 stacked tiles instead of the viewport,
 * corrupting the one-time column/row calculation for the rest of the
 * session. Hand-writing the handful of layout-critical utility classes
 * here (a synchronous, render-blocking stylesheet) guarantees they're
 * already active before boutique-grid.js's first measurement, regardless
 * of when Tailwind's CDN script finishes. Values match Tailwind's own
 * output exactly, so this is inert once Tailwind's copies load too.
 */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.object-contain { object-fit: contain; }