:root {
  --background: oklch(0.977 0.006 106);
  --ink: oklch(1 0 0);

  --mosaik-1: oklch(0.86 0.15 350);
  --mosaik-2: oklch(0.72 0.28 330);
  --mosaik-3: oklch(0.92 0.16 100);
  --mosaik-4: oklch(0.68 0.21 25);
  --mosaik-5: oklch(0.7 0.19 255);
  --mosaik-6: oklch(0.82 0.11 265);
  --mosaik-7: oklch(0.75 0.18 145);
  --mosaik-8: oklch(0.9 0.07 340);
  --mosaik-9: oklch(0.55 0.22 265);
  --mosaik-10: oklch(0.88 0.1 200);
  --mosaik-11: oklch(0.78 0.16 60);
  --mosaik-12: oklch(0.94 0.05 150);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--background);
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.mosaic {
  position: absolute;
  inset: 0;
}

.tile {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.title {
  margin: 0;
  font-size: 26vw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.85;
}

@media (min-width: 768px) {
  .title {
    font-size: 22vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile {
    transition: none !important;
  }
}