/* relay-ink-flip: a status marker goes live. Its mono key jumps from dim straight to white, holds white for the
   first half of a .14 s steps(1) animation (70 ms), then lands on the accent and stays; its chip and ring ease into
   the accent over .5 s. Taking .is-live off snaps everything back at once.
   Trigger: add .is-live to .rif (by hand, from your app's state, or with band-trigger when it reaches mid-screen). */
.rif {
  --rif-accent: #ff3700;
  --rif-accent-rgb: 255, 55, 0;
  --rif-dim: rgba(255, 255, 255, .46);       /* the key at rest */
  --rif-strike: #fff;                         /* the 70 ms strike */
  --rif-dur: .14s;                            /* whole strike: white for the first half, accent from 50% */
  --rif-ease-dur: .5s;                        /* chip + ring tint */
  --rif-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  position: relative;
}
.rif-key {
  font: 400 9.5px/12px var(--rif-mono); text-transform: uppercase; letter-spacing: .02em;
  color: var(--rif-dim);
}
.rif.is-live .rif-key { color: var(--rif-accent); animation: rif-ink var(--rif-dur) steps(1) forwards; }
@keyframes rif-ink {
  0%, 49% { color: var(--rif-strike); }
  50%, 100% { color: var(--rif-accent); }
}
.rif-chip {
  display: inline-block; font: 400 9px/12px var(--rif-mono); font-style: normal; text-transform: uppercase;
  padding: 2px 5px; border-radius: 3px;
  color: rgba(255, 230, 224, .93); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .3);
  transition: color var(--rif-ease-dur), background var(--rif-ease-dur), box-shadow var(--rif-ease-dur);
}
.rif.is-live .rif-chip {
  color: var(--rif-accent); background: rgba(var(--rif-accent-rgb), .14); box-shadow: inset 0 0 0 .75px rgba(var(--rif-accent-rgb), .6);
}
.rif-ring {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, .42); background: transparent;
  transition: border-color var(--rif-ease-dur);
}
.rif.is-live .rif-ring { border-color: var(--rif-accent); }
@media (prefers-reduced-motion: reduce) {
  .rif.is-live .rif-key { animation: none; }
}