.modern-subpage .reaction-stage,
.modern-subpage .reaction-stage:hover,
.modern-subpage .reaction-stage:focus,
.modern-subpage .reaction-stage:active {
  background: #172033 !important;
  color: #fff !important;
}

.modern-subpage .reaction-stage:hover {
  transform: translateY(-1px);
}

.modern-subpage .reaction-stage[data-state="waiting"],
.modern-subpage .reaction-stage[data-state="waiting"]:hover,
.modern-subpage .reaction-stage[data-state="waiting"]:focus,
.modern-subpage .reaction-stage[data-state="waiting"]:active {
  background: #b42318 !important;
}

.modern-subpage .reaction-stage[data-state="ready"],
.modern-subpage .reaction-stage[data-state="ready"]:hover,
.modern-subpage .reaction-stage[data-state="ready"]:focus,
.modern-subpage .reaction-stage[data-state="ready"]:active {
  background: #16803f !important;
}

.modern-subpage .reaction-stage[data-state="early"],
.modern-subpage .reaction-stage[data-state="early"]:hover,
.modern-subpage .reaction-stage[data-state="early"]:focus,
.modern-subpage .reaction-stage[data-state="early"]:active {
  background: #9a3412 !important;
}

.modern-subpage .reaction-stage:focus-visible {
  outline: 4px solid rgba(22, 128, 63, .24);
  outline-offset: 4px;
}

.modern-subpage .reaction-stage[data-state="ready"] small {
  color: #dcfce7;
}

.modern-subpage .reaction-stage[data-state="waiting"] small,
.modern-subpage .reaction-stage[data-state="early"] small {
  color: #fee2e2;
}

@media (prefers-reduced-motion: reduce) {
  .modern-subpage .reaction-stage {
    transition: none;
  }
}