function RootLoading() {
  return (
    <div className="min-h-full flex flex-col items-center justify-center gap-6 bg-base text-fg">
      <div className="relative inline-flex">
        <span className="absolute inset-0 rounded-base bg-accent/25 animate-ping" />
        <FluxMark size={40} />
      </div>
      <div className="flex items-center gap-1.5" role="status" aria-label="Loading">
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="w-1.5 h-1.5 rounded-full bg-accent"
            style={{ animation: `flux-typing 1.2s ${i * 0.15}s infinite` }}
          />
        ))}
      </div>
    </div>
  );
}

window.RootLoading = RootLoading;