/* Verbatim from Chip.dc.html <style> (fr-chip uses its own fr-chip-flow keyframes). */

@property --fr-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fr-chip-flow { to { --fr-angle: 360deg; } }
.fr-chip {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.4375rem 0.9375rem 0.4375rem 0.6875rem;
  border-radius: var(--radius-pill);
  border: 0.09375rem solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              conic-gradient(from var(--fr-angle), var(--cyan), var(--blue-action), var(--blue), var(--cyan)) border-box;
  animation: fr-chip-flow 3.6s linear infinite;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.8125rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.005em; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.fr-chip .material-symbols-rounded {
  font-size: 1.125rem; line-height: 1;
  font-variation-settings: 'wght' 400, 'opsz' 20;
  background: linear-gradient(135deg, var(--blue-action), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fr-chip-img { width: 1rem; height: 1rem; display: block; object-fit: contain; flex: none; }
@media (prefers-reduced-motion: reduce) { .fr-chip { animation: none; } }