/* Luminous actions: ambient aurora at rest, light and particles on interaction. */
.button.primary {
  min-width: min(300px, 100%);
  max-width: 100%;
}
.button.primary, #run-button.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  min-height: 56px;
  padding-inline: 30px;
  border: 1px solid #d8ffc58c;
  border-radius: 12px;
  color: #10271d;
  background: linear-gradient(115deg, #dcff8d, #a3f96c 28%, #55edbc 56%, #9ce7f4 78%, #dcff8d);
  background-size: 250% 180%;
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -3px 8px #1eae722b,
    0 5px 18px #69efb12b, 0 0 28px #a2ff7626;
  text-shadow: 0 1px #ffffff40;
  animation: action-aurora 7s ease-in-out infinite alternate;
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.button.primary::before, #run-button.primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80% -50%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #ffffff15 43%, #ffffffa3 49%, #ffffff20 55%, transparent 63%);
  transform: translateX(-65%);
  opacity: 0;
}
.button.primary::after, #run-button.primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--particle-x, 50%);
  top: var(--particle-y, 50%);
  width: 160px;
  height: 90px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, #ffffff78, #ecffda24 40%, transparent 70%);
  opacity: .4;
  transition: opacity .3s ease, left .16s ease-out, top .16s ease-out;
}
.button.primary:is(:hover, :focus-visible), #run-button.primary:enabled:is(:hover, :focus-visible) {
  background-image: linear-gradient(115deg, #dcff8d, #a3f96c 28%, #55edbc 56%, #9ce7f4 78%, #dcff8d);
  transform: translateY(-3px);
  border-color: #e5ffcd;
  box-shadow: inset 0 1px 1px #fff, inset 0 -3px 8px #1eae722b,
    0 10px 28px #69efb154, 0 0 45px #a2ff7638;
}
.button.primary:is(:hover, :focus-visible)::before, #run-button.primary:enabled:is(:hover, :focus-visible)::before {
  animation: action-light 1.8s ease-in-out infinite;
}
.button.primary:is(:hover, :focus-visible)::after, #run-button.primary:enabled:is(:hover, :focus-visible)::after {
  opacity: .95;
}
.button.primary:active, #run-button.primary:enabled:active { transform: translateY(0) scale(.985); }
#run-button.primary:disabled { animation: none; box-shadow: none; transform: none; }
@keyframes action-aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes action-light {
  0% { transform: translateX(-65%); opacity: 0; }
  20% { opacity: .8; }
  65%, 100% { transform: translateX(65%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button.primary, #run-button.primary,
  .button.primary::before, #run-button.primary::before,
  .button.primary::after, #run-button.primary::after { animation: none !important; transition: none; }
}

.action-particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}