:root {
  --a432-key: 432;
  --a432-hue: 72;
  --a432-1: hsl(72 62% 44%);
  --a432-2: hsl(216 62% 52%);
  --a432-3: hsl(108 62% 60%);
  --a432-4: hsl(54 62% 68%);
  --a432-5: hsl(27 62% 76%);
  --a432-accent: hsl(72 62% 44%);
}
/* every block draws itself from the custom properties its UUID set on its root; nothing here needs a script */
.qpu-block { border-left: 3px solid var(--qpu-accent, var(--a432-accent)); padding-left: var(--pad-sm, 8px); content-visibility: auto; contain-intrinsic-size: auto 240px; background: linear-gradient(90deg, color-mix(in oklab, var(--qpu-accent, var(--a432-accent)) 6%, transparent), transparent 60%); }
.qpu-block::before { content: ''; display: block; height: 3px; margin-bottom: var(--gap-sm, 6px); background: conic-gradient(from calc(var(--qpu-angle, 0) * 1deg) at 50% 120%, var(--qpu-accent, var(--a432-accent)), var(--qpu-tail, var(--a432-2)), var(--qpu-accent, var(--a432-accent))); }
.qpu-block [data-status] { border-left: 2px solid var(--qpu-status, var(--a432-3)); padding-left: 4px; }
.qpu-block [data-status="served"] { --qpu-status: var(--a432-1); } .qpu-block [data-status="partial"] { --qpu-status: var(--a432-2); } .qpu-block [data-status="open"] { --qpu-status: var(--a432-3); } .qpu-block [data-status="blocked"], .qpu-block [data-status="out_of_scope"] { --qpu-status: var(--a432-5); }
@media (prefers-reduced-motion: no-preference) { .qpu-block::before { animation: qpu-vortex var(--qpu-period, 3888ms) linear infinite; } @keyframes qpu-vortex { to { filter: hue-rotate(360deg); } } }
@media (prefers-color-scheme: dark) { .qpu-block { background: linear-gradient(90deg, color-mix(in oklab, var(--qpu-accent, var(--a432-accent)) 12%, transparent), transparent 60%); } }
@media print { .qpu-block::before { animation: none; } }