:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#0c1118;color:#e7edf4}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{border:1px solid #344050;border-radius:8px;background:#151e2a;color:inherit;padding:10px 13px}button{cursor:pointer}button:hover,button:focus-visible{border-color:#72d6b4;outline-color:#72d6b4}a{color:inherit;text-decoration:none}a:hover{color:#79dfbc}[hidden]{display:none!important}header{display:flex;gap:28px;align-items:center;border-bottom:1px solid #26303c;padding:20px 32px}.brand{font-size:23px;font-weight:750}.brand span,h1 span{color:#7ce0b9}nav{display:flex;gap:24px;flex:1;font-size:13px}nav span{color:#79dfbc}#identity{font-size:12px;color:#a1afbf}main{padding:24px 32px}.eyebrow{color:#82acaa;letter-spacing:2px;font-size:11px;font-weight:700}h1{font-size:36px;letter-spacing:-1.3px;margin:8px 0}p{color:#9facbc;line-height:1.6}.heading{display:flex;align-items:center;justify-content:space-between}.heading p{margin:8px 0 18px}.filters{display:flex;gap:24px;align-items:center;margin:16px 0 24px;font-size:12px}.filters label{display:flex;gap:10px;align-items:center}#refreshed{margin-left:auto;color:#95a8ba}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}.canvas-shell,aside{border:1px solid #283341;border-radius:12px;overflow:hidden;background:#101722}.canvas-toolbar{padding:12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid #26303c;font-size:11px;color:#9eacbb}.canvas-toolbar span{flex:1}.canvas-toolbar button{padding:5px 10px}#viewport{height:570px;overflow:hidden;position:relative;touch-action:none;background-image:radial-gradient(#354252 1px,transparent 1px);background-size:20px 20px;cursor:grab}#viewport:active{cursor:grabbing}#graph{position:absolute;transform-origin:0 0;width:1600px;min-height:1200px}.node{position:absolute;width:228px;min-height:128px;text-align:left;padding:16px;background:#172130;border:1px solid #364659;box-shadow:0 8px 20px #0003;border-radius:12px;display:flex;flex-direction:column;gap:9px}.node:before,.node:after{content:'';position:absolute;top:55px;width:9px;height:9px;background:#73879d;border:3px solid #172130;border-radius:50%}.node:before{left:-5px}.node:after{right:-5px}.node strong{font-size:14px}.node small{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#8cabb8}.node .state{font-size:12px;color:#80dcbc}.node.stale .state,.node.unavailable .state{color:#e3bb7b}.node.pending .state{color:#9eb2c7}.node.reported .state{color:#b8adf1}.node time{font-size:10px;color:#8195a9}.node.selected{border-color:#79dfbc}.wire{position:absolute;height:1px;background:#52677f;pointer-events:none;transform-origin:left center}aside{padding:22px;overflow-wrap:anywhere}aside h2{font-size:22px}aside dt{font-size:10px;color:#7ba69e;letter-spacing:1px;text-transform:uppercase;margin-top:18px}aside dd{margin:6px 0;color:#bac8d6;font-size:13px;white-space:pre-wrap}.legend{padding:14px;font-size:10px;color:#99afbc;border-top:1px solid #26303c}.legend span{display:block;margin-top:7px;color:#73879b}.footnote{font-size:11px}#login{max-width:460px;margin:9vh auto}#login label{display:block;margin:18px 0}#login input{display:block;width:100%;margin-top:8px}#page-status:empty{display:none}#page-status{font-size:12px}@media(max-width:900px){header{flex-wrap:wrap;padding:16px}header nav{order:3;flex-basis:100%}main{padding:16px}.layout{grid-template-columns:1fr}.filters{flex-wrap:wrap}#refreshed{margin-left:0}h1{font-size:29px}#viewport{height:440px}}

/* Workflow colors: independent of source kind (observed versus reported). */
.node{--signal:#facc15}.node.highlight-active{--signal:#22c55e}.node.highlight-previous{--signal:#fb923c}.node.highlight-next{--signal:#a855f7}.node.highlight-idle{--signal:#facc15}.node.highlight-offline{--signal:#ef4444}.node.highlight-complete{--signal:#94a3b8}
.node{border:2px solid var(--signal);box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 12%,transparent),0 8px 20px #0003;background:linear-gradient(115deg,color-mix(in srgb,var(--signal) 10%,#172130),#172130)}
.node .state,.node.stale .state,.node.unavailable .state,.node.pending .state,.node.reported .state{color:var(--signal)}.node:before,.node:after{background:var(--signal)}.node.selected{outline:2px solid #e7edf4;outline-offset:3px;border-color:var(--signal)}
.legend .key{display:inline-flex;align-items:center;gap:6px;margin:0 14px 0 0;color:#c8d2df}.legend .key:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--key)}

.wire{height:2px;opacity:.65;overflow:visible}.wire:after{content:'';position:absolute;right:-2px;top:-4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}.wire.flow{opacity:1}.wire.flow:before{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;animation:workflow-travel 1.8s linear infinite}@keyframes workflow-travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}@media(prefers-reduced-motion:reduce){.wire.flow:before{animation:none;left:50%}}