/* =============================================================
   MIRAI — Homepage base + utilities (replaces the Tailwind CDN script)
   The CDN build is a ~300 KB render-blocking script meant for
   development only. This file holds what the homepage actually used
   from it: Tailwind v3's base reset ("preflight") and the utility
   classes in Home.html. Load it LAST in <head> — the CDN injected its
   styles after every other stylesheet, so the same rules win here.
   Adding a Tailwind class to Home.html? Add its rule here too.
   ============================================================= */

/* ===== BLOCK: Base reset (Tailwind v3 preflight) ===== */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body { margin: 0; line-height: inherit; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

a { color: inherit; text-decoration: inherit; }

b, strong { font-weight: bolder; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select { text-transform: none; }

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

button, [role="button"] { cursor: pointer; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }

ol, ul, menu { list-style: none; margin: 0; padding: 0; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }

img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

/* ===== BLOCK: Utilities used in Home.html ===== */
.relative       { position: relative; }
.absolute       { position: absolute; }
.inset-0        { inset: 0; }
.left-0         { left: 0; }
.bottom-10      { bottom: 2.5rem; }
.z-20           { z-index: 20; }
.flex           { display: flex; }
.hidden         { display: none; }
.justify-center { justify-content: center; }
.flex-shrink-0  { flex-shrink: 0; }
.gap-4          { gap: 1rem; }
.ml-4           { margin-left: 1rem; }
.w-full         { width: 100%; }
.h-full         { height: 100%; }
.w-screen       { width: 100vw; }
.h-screen       { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.object-cover   { object-fit: cover; }
.text-white     { color: #fff; }

@media (min-width: 768px) {
  .md\:gap-6  { gap: 1.5rem; }
  .md\:ml-0   { margin-left: 0; }
  .md\:block  { display: block; }
}