/* LOAD1 (Hugo 2026-11-02 picked 點陣 and asked for it on every page's loading): one mark, nine 4px squares with a soft
   diagonal wave running through them. Every 載入中 (React and app.js), the search's transcript wait and 問 Munin's thinking
   line use it. A page load fades in after 150 ms, so a page that is already there never flashes it. Linked after app.css on
   every page that has a 載入中 (index, dev, s, components) */
.loading:not(.pl-cv) { display: flex; align-items: center; justify-content: center; gap: 8px; animation: mu-in 200ms var(--ease) 150ms both; }
.mu-grid, .loading:not(.pl-cv)::before, .sr-load[aria-busy]::before { content: ""; flex: none; width: 16px; height: 16px; --mu-lo: color-mix(in srgb, var(--text-3) 40%, transparent);
  --mu-g0: var(--mu-lo); --mu-g1: var(--mu-lo); --mu-g2: var(--mu-lo); --mu-g3: var(--mu-lo); --mu-g4: var(--mu-lo);
  background: linear-gradient(var(--mu-g0), var(--mu-g0)) 0px 0px / 4px 4px,
    linear-gradient(var(--mu-g1), var(--mu-g1)) 6px 0px / 4px 4px,
    linear-gradient(var(--mu-g2), var(--mu-g2)) 12px 0px / 4px 4px,
    linear-gradient(var(--mu-g1), var(--mu-g1)) 0px 6px / 4px 4px,
    linear-gradient(var(--mu-g2), var(--mu-g2)) 6px 6px / 4px 4px,
    linear-gradient(var(--mu-g3), var(--mu-g3)) 12px 6px / 4px 4px,
    linear-gradient(var(--mu-g2), var(--mu-g2)) 0px 12px / 4px 4px,
    linear-gradient(var(--mu-g3), var(--mu-g3)) 6px 12px / 4px 4px,
    linear-gradient(var(--mu-g4), var(--mu-g4)) 12px 12px / 4px 4px;
  background-repeat: no-repeat; animation: mu-g0 1s linear -1000ms infinite, mu-g1 1s linear -800ms infinite, mu-g2 1s linear -600ms infinite, mu-g3 1s linear -400ms infinite, mu-g4 1s linear -200ms infinite; }
/* each diagonal of squares is one color that rises and falls over 0.6 s, a fifth of a second after the one before it, so
   about two are lit at once; five diagonals in one second, so the last hands over to the first and the wave never rests;
   started a second in, so the first frame already has a lit diagonal */
@property --mu-g0 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mu-g1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mu-g2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mu-g3 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mu-g4 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@keyframes mu-g0 { 0%, 60%, 100% { --mu-g0: var(--mu-lo); } 20% { --mu-g0: var(--text-2); } }
@keyframes mu-g1 { 0%, 60%, 100% { --mu-g1: var(--mu-lo); } 20% { --mu-g1: var(--text-2); } }
@keyframes mu-g2 { 0%, 60%, 100% { --mu-g2: var(--mu-lo); } 20% { --mu-g2: var(--text-2); } }
@keyframes mu-g3 { 0%, 60%, 100% { --mu-g3: var(--mu-lo); } 20% { --mu-g3: var(--text-2); } }
@keyframes mu-g4 { 0%, 60%, 100% { --mu-g4: var(--mu-lo); } 20% { --mu-g4: var(--text-2); } }
@keyframes mu-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mu-grid, .loading:not(.pl-cv)::before, .sr-load[aria-busy]::before { animation: none; }
}
.sr-load[aria-busy] { display: flex; align-items: center; gap: 8px; }

/* 思考中: the LOAD1 mark, the line, and the seconds since the question in a fixed slot (REC-JITTER). One 26px line, the
   answer's own line height, so the answer lands where the line was */
.thinking { display: flex; align-items: center; gap: 8px; height: 26px; color: var(--text-2); }
.thinking .secs { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 5ch; }
.msg-a:has(> .ans) { animation: mu-in 200ms var(--ease) both; }