.quick-actions .spark-button {
  grid-template-columns: auto auto;
  column-gap: 3px;
  align-items: center;
}
.spark-button #spark-label { grid-column: 1 / -1; }
.spark-days { font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spark-mark { position: relative; }
.spark-flame { display: block; width: 22px; height: 22px; }
.spark-button[data-spark="ready"] .spark-flame { filter: saturate(.7) opacity(.75); }
.spark-button[data-spark="complete"] .spark-days { color: var(--rust); }
.spark-burst {
  position: absolute;
  inset: 50% auto auto 50%;
  pointer-events: none;
}
.spark-burst::before, .spark-burst i { position: absolute; content: ""; opacity: 0; }
.spark-burst::before { inset: -12px auto auto -12px; width: 24px; height: 24px; border: 2px solid #f7ab42; border-radius: 50%; }
.spark-burst i {
  width: 6px;
  height: 6px;
  background: #ffbb4e;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
.spark-burst i:nth-child(1) { --x: -22px; --y: -25px; }
.spark-burst i:nth-child(2) { --x: 19px; --y: -29px; }
.spark-burst i:nth-child(3) { --x: -24px; --y: 4px; }
.spark-burst i:nth-child(4) { --x: 27px; --y: -5px; }
@media (prefers-reduced-motion: no-preference) {
  .spark-button.is-igniting .spark-flame { animation: spark-ignite 920ms cubic-bezier(.22,.76,.29,1); }
  .spark-button.is-igniting .spark-burst::before { animation: spark-ring 630ms ease-out both; }
  .spark-button.is-igniting .spark-burst i { animation: spark-ember 780ms 75ms ease-out both; }
  .spark-button.is-igniting[data-spark="complete"] .spark-days { animation: spark-count 450ms 200ms ease-out both; }
}
@keyframes spark-ignite {
  0% { transform: scale(.85); }
  31% { transform: translateY(-9px) scale(2) rotate(-8deg); filter: drop-shadow(0 3px 6px #ffa93fa8); }
  64% { transform: translateY(1px) scale(.93) rotate(4deg); }
  100% { transform: none; }
}
@keyframes spark-ring {
  0% { opacity: .75; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.7); }
}
@keyframes spark-ember {
  0% { opacity: 0; transform: scale(.2); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(45deg) scale(1.25); }
}
@keyframes spark-count {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.25); }
}