/* Transitions.dev Matrix dot loader: selected free recipe with the user's dark palette. */
.reason-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #b8b8bf; font-size: 11px; line-height: 16px; }
.t-matrix {
  --matrix-cycle: 1200ms;
  --matrix-base: #3a3a3e;
  --matrix-active: #b8b8c2;
  --matrix-ease: ease-in-out;
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(4, 2px);
  grid-auto-rows: 2px;
  gap: 2px;
}
.t-matrix:not([data-matrix-ready]) { display: none; }
.t-matrix i {
  display: block;
  background: var(--matrix-base);
  animation: t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1ms);
  animation-play-state: paused;
}
.t-matrix[data-matrix-state="playing"] i { animation-play-state: running; }
.t-matrix i.is-gap { visibility: hidden; animation: none; }
@keyframes t-matrix-pulse {
  0%, 45%, 100% { background-color: var(--matrix-base); }
  15% { background-color: var(--matrix-active); }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  .t-matrix i { animation: none !important; }
}
@media (forced-colors: active) {
  .t-matrix i { background: CanvasText; }
}
@media print {
  .reason-status { color: #000; }
  .t-matrix i { background: #555; }
}