/* Fraktalicious computing loader — on-brand with dial.css: a hairline tick
   ring where one lit position chases around it, plus a dial-style `ping` at
   centre. Not a spinner, not dots. Inherits --live, literal fallback (dial.css
   convention). Box fixed by --fxl-size only; animations move opacity/SVG r,
   never box metrics. */

.fxl { --fxl-rule-dim: var(--rule-dim, rgba(237,234,228,.06)); --fxl-ink3: var(--ink-3, #7c7871);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; }
.fxl-ring { width: var(--fxl-size, 56px); height: var(--fxl-size, 56px); display: block; overflow: visible; }
.fxl-bezel { fill: none; stroke: var(--fxl-rule-dim); stroke-width: 1; }

/* loader.js sets each tick's delay + resting opacity inline; flat var(--live). */
.fxl-tick { stroke: var(--live, #22d3ee); stroke-width: 2.4; stroke-linecap: round;
  animation: fxl-chase 1.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes fxl-chase { 0% { opacity: .14; } 8% { opacity: 1; } 22% { opacity: .14; } 100% { opacity: .14; } }

.fxl-ping { fill: none; stroke: var(--live, #22d3ee); stroke-width: 1.4; opacity: 0;
  animation: fxl-ping 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes fxl-ping { 0% { r: 3; opacity: .55; } 100% { r: 26; opacity: 0; } }

/* Flat fill FIRST (load-bearing, see the 2026-08-27 masked color-mix bug) —
   glow is a supplementary filter, never the only paint. */
.fxl-core { fill: var(--live, #22d3ee);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--live, #22d3ee) 55%, transparent)); }

.fxl-label { font-family: var(--mono, 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; color: var(--fxl-ink3);
  text-transform: uppercase; white-space: nowrap; }

/* Animations off; per-element base/inline opacity takes over as a frozen
   comet-tail fade — still reads as mid-reading, not done or broken. */
@media (prefers-reduced-motion: reduce) {
  .fxl-tick, .fxl-ping { animation: none; }
  .fxl-ping { opacity: 0; }
}