/* Pixel loader, "Orbit": a 3×3 grid of ink cells with a comet lapping the perimeter,
   a shimmering label, and an elapsed time that only appears after about three seconds
   (assets/pixel-loader.js). Grid and shimmer are pure CSS, so they show from first paint. */
.px-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; pointer-events: none; text-align: center; }
.px-grid { display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px; gap: 1.5px; }
.px-grid i { display: block; width: 4px; height: 4px; border-radius: 1px; background: var(--ink); opacity: .15; }
.px-grid i:nth-child(5) { opacity: .07; }
/* Orbit order over row-major cells [0,1,2,5,8,7,6,3]: position k waits k × 110 ms. */
.px-grid i:nth-child(1) { --k: 0; } .px-grid i:nth-child(2) { --k: 1; } .px-grid i:nth-child(3) { --k: 2; }
.px-grid i:nth-child(6) { --k: 3; } .px-grid i:nth-child(9) { --k: 4; } .px-grid i:nth-child(8) { --k: 5; }
.px-grid i:nth-child(7) { --k: 6; } .px-grid i:nth-child(4) { --k: 7; }
.px-label { font: 500 13px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; }
/* The time line is always reserved, so the grid and label never move when it appears. */
.px-time { display: block; min-height: 14px; font: 400 12px/14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) {
  .px-grid i:not(:nth-child(5)) { animation: pixel-on 950ms ease-in-out infinite; animation-delay: calc(var(--k) * 110ms); }
  .px-label { color: transparent; background: linear-gradient(90deg, var(--ink-faint) 0%, var(--ink) 50%, var(--ink-faint) 100%) 0 0 / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text; animation: pixel-shimmer 1.4s linear infinite; }
}
/* Rest dim, snap bright, then a slow fade: the cells behind the head read as a tail. */
@keyframes pixel-on { 0%, 8% { opacity: .15; } 24% { opacity: 1; } 58% { opacity: .32; } 100% { opacity: .15; } }
@keyframes pixel-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }