*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  margin: 0;
  padding: 24px;
  background: #e9edf7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
 * Every dimension below is in container units (cqi), so the button keeps the
 * same proportions and the same tile count at any width.
 */
.mosaic {
  --grout: #2231c9;
  --tile: #3350e8;
  --tile-lit: #93b7f9;
  --max-tilt: 16deg;

  container-type: inline-size;
  inline-size: min(100%, 480px);
  aspect-ratio: 3 / 1;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/*
 * The surface tilts, not the button itself: the button's hit area stays put,
 * so the pointer can't fall off an edge that is rotating away from it.
 */
.mosaic__surface {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: 7cqi;
  background: var(--grout);
  box-shadow:
    0 1cqi 2cqi rgb(34 49 201 / 0.2),
    0 4cqi 8cqi -2cqi rgb(34 49 201 / 0.45);
  /* --lean-x / --lean-y run from -1 to 1 and are set by mosaic-button.js. */
  transform: perspective(150cqi)
    rotateX(calc(var(--lean-y, 0) * -1 * var(--max-tilt)))
    rotateY(calc(var(--lean-x, 0) * var(--max-tilt)))
    scale(var(--press, 1));
  /* Overshoots its target a little, so the surface wobbles as it settles. */
  transition: transform 450ms cubic-bezier(0.2, 1.7, 0.4, 1);
}

.mosaic:active .mosaic__surface {
  --press: 0.97;
}

.mosaic:focus-visible {
  outline: none;
}

.mosaic:focus-visible .mosaic__surface {
  outline: 3px solid var(--tile);
  outline-offset: 4px;
}

.mosaic__tiles {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.mosaic__label {
  position: relative;
  font-size: 7.2cqi;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 0.2cqi 0.6cqi rgb(13 23 122 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .mosaic__surface {
    transform: none;
    transition: none;
  }
}