.host {
  display: grid;

  align-items: center;
  justify-content: center;
  justify-items: center;
  --rotation: 135deg;
  --rotation: 225deg;
  --size-step: 10px;
  --odd-color-step: 5;
  --even-color-step: 5;
  --center: 12;

  width: 100%;
  height: 500px;

  contain: strict;
}

input {
  width: 100%;
}

.square {
  --size: calc(40px + var(--index) * var(--size-step));

  display: block;
  width: var(--size);
  height: var(--size);
  transform: rotateZ(calc(var(--rotation) * var(--state) * (var(--center) - var(--index))));
  transition-property: transform, border-color;
  transition-duration: 5s;
  transition-timing-function: ease-in-out;
  grid-area: 1 / 1;
  background: white;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  box-sizing: border-box;
  will-change: transform, border-color;

  contain: strict;
}

.square.odd {
  --luminance: calc(1 - calc(calc(var(--index) * var(--odd-color-step)) / 256));
  background: rgb(
    calc(172 * var(--luminance)),
    calc(127 * var(--luminance)),
    calc(244 * var(--luminance))
  );
}

.pride .square:nth-child(12n + 1) {
  background: #e70000;
}
.pride .square:nth-child(12n + 3) {
  background: #ff8c00;
}
.pride .square:nth-child(12n + 5) {
  background: #ffef00;
}
.pride .square:nth-child(12n + 7) {
  background: #00811f;
}
.pride .square:nth-child(12n + 9) {
  background: #0044ff;
}
.pride .square:nth-child(12n + 11) {
  background: #760089;
}