#puzzle.gruyere > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

#puzzle.gruyere {
  display: flex;
  flex-direction: row;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 1000ms;
  --tw-bg-opacity: 1;
  background-color: rgba(253, 230, 138, var(--tw-bg-opacity));
}

#puzzle.gruyere > li {
  --tw-bg-opacity: 1;
  background-color: rgba(253, 230, 138, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, var(--tw-text-opacity));
  flex: 1 1 0%;
}

#puzzle.gruyere > li > svg {
  fill: currentColor;
}

#puzzle.hint1, #puzzle.hint2 {
  -webkit-animation: hint-split-letter 10s 1;
          animation: hint-split-letter 10s 1;
}

#puzzle.hint2 > li > svg {
  -webkit-animation: hint-invert-colors 10s 1;
          animation: hint-invert-colors 10s 1;
}

@-webkit-keyframes hint-invert-colors {
  10% {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
  }
}

@keyframes hint-invert-colors {
  10% {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
  }
}

@-webkit-keyframes hint-split-letter {
  10% {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  }
}

@keyframes hint-split-letter {
  10% {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  }
}

button.withTimer {
  position: relative;
}

button.withTimer:before {
  --tw-bg-opacity: 1;
  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
  height: 0.5rem;
  width: 100%;
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-animation: timer 10s 1 linear;
          animation: timer 10s 1 linear;
}

@-webkit-keyframes timer {
  100% {
    width: 0
  }
}

@keyframes timer {
  100% {
    width: 0
  }
}