:root{--flow-bg: #0a0e1a;--flow-surface: #111a2e;--flow-ink: #c9d4e8;--flow-muted: #6b7a99;--flow-thread: #2a3550;--flow-ring: #ffd9a0;--flow-accent: #fff3dd;--flow-ok: #7fb4c9;--flow-findings: #e0885f;--flow-failed: #e0644a;--flow-font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--flow-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--void: var(--flow-bg);--void-lift: var(--flow-surface);--fiber: var(--flow-thread);--signal: var(--flow-ring);--signal-core: var(--flow-accent);--set: var(--flow-ok);--ember: var(--flow-findings);--text: var(--flow-ink);--text-dim: var(--flow-muted);--text-faint: color-mix(in srgb, var(--flow-muted) 62%, var(--flow-bg))}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:var(--void);color:var(--text);font-family:var(--flow-font);overflow:hidden;display:flex;flex-direction:column}#stage{position:relative;flex:1;background:radial-gradient(1100px 700px at 28% 42%,var(--void-lift) 0%,transparent 62%),var(--void)}#wires{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#edges path{fill:none;stroke:var(--fiber);stroke-width:1.4;opacity:0;stroke-linecap:round}.pulse{fill:var(--signal-core)}#nodes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.node{position:absolute}.ring{position:absolute;width:14px;height:14px;border-radius:50%;border:1.6px solid var(--signal);background:transparent;transform:translate(-50%,-50%);box-shadow:0 0 12px color-mix(in srgb,var(--flow-ring) 35%,transparent);opacity:0}.node.root .ring{width:18px;height:18px}.label-wrap{position:absolute;left:16px;top:-8px;width:176px;opacity:0}.node.root .label-wrap{left:26px}.phase{text-shadow:0 0 4px var(--void),0 0 8px var(--void),0 0 12px var(--void),0 1px 2px var(--void);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:1px;max-width:176px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label{text-shadow:0 0 4px var(--void),0 0 8px var(--void),0 0 12px var(--void),0 1px 2px var(--void);font-size:13px;line-height:1.25;font-weight:500;letter-spacing:.01em;color:var(--text);max-width:176px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.caption-stack{position:relative;height:30px;margin-top:3px}.caption{text-shadow:0 0 4px var(--void),0 0 8px var(--void),0 0 12px var(--void),0 1px 2px var(--void);position:absolute;inset:0 0 auto 0;max-width:176px;font-size:11px;line-height:1.3;color:var(--text-dim);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;opacity:0}.caption.verdict-line{color:var(--set)}.caption.verdict-line.findings{color:var(--ember)}.caption.verdict-line.failed{color:var(--flow-failed)}#mast{position:absolute;top:28px;left:32px;-webkit-user-select:none;user-select:none}#mast .eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}#mast h1{font-size:20px;font-weight:600;letter-spacing:.01em;margin-top:6px}#mast .sub{font-size:11px;color:var(--text-dim);margin-top:4px}#legend{position:absolute;bottom:14px;left:32px;font-size:10.5px;color:var(--text-faint);-webkit-user-select:none;user-select:none}#transport{display:flex;align-items:center;gap:14px;height:54px;padding:0 20px;border-top:1px solid color-mix(in srgb,var(--flow-ink) 8%,transparent);background:color-mix(in srgb,var(--flow-bg) 90%,transparent)}#transport button{background:none;border:1px solid var(--fiber);color:var(--text);font-family:var(--flow-font-mono);font-size:12px;border-radius:4px;min-width:42px;height:30px;cursor:pointer;transition:border-color .15s}#transport button:hover{border-color:var(--set)}#transport button:focus-visible{outline:2px solid var(--set);outline-offset:2px}#track{position:relative;flex:1;height:30px;cursor:pointer}#track:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--fiber);border-radius:1px}#ticks{position:absolute;top:0;right:0;bottom:0;left:0}.tick{position:absolute;top:50%;width:2px;height:8px;transform:translate(-50%,-50%);background:var(--text-faint);border-radius:1px}.tick.done-tick{background:var(--set);opacity:.55}#cursor{position:absolute;top:50%;width:3px;height:16px;transform:translate(-50%,-50%);background:var(--signal);border-radius:2px;box-shadow:0 0 8px color-mix(in srgb,var(--flow-ring) 50%,transparent)}#clock{font-family:var(--flow-font-mono);font-size:12px;color:var(--text);min-width:110px;text-align:right}#clock span{color:var(--text-faint)}@media (prefers-reduced-motion: reduce){.pulse{display:none}}
