/* Abstract signal constellation. Nodes are controls, paths encode direction. */
.system-visual{--signal:#d4f57a;--signal-soft:#d4f57332;--return:#ed9b8f;background:radial-gradient(ellipse at 50% 44%,#2631215c,transparent 58%),#080b0b;border:1px solid #2c3530;overflow:hidden}.visual-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;position:relative;z-index:2}.flow-modes{display:flex;gap:5px;flex-wrap:wrap;background:#141917;border:1px solid #303b32;border-radius:30px;padding:5px}.system-visual button{font-family:inherit;font-size:14px;color:#b1bcb3;cursor:pointer;line-height:1.5}.flow-modes button{background:none;border:0;border-radius:24px;padding:10px 20px}.flow-modes button[aria-pressed=true]{background:#d4f57a;color:#172111}.system-visual[data-mode=alert] .flow-modes button[aria-pressed=true]{background:#ed9b8f;color:#2c1714}.motion-control{background:transparent;border:1px solid #354039;padding:10px 15px;border-radius:5px}.motion-control[aria-pressed=true]{color:#eff4ed;border-color:#adbc9f}.system-visual button:focus-visible{outline:2px solid #f2f6ec;outline-offset:6px}.constellation{height:540px;position:relative;margin:0 24px}.signal-paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.orbit-guide{position:absolute;left:25%;top:17%;width:50%;height:57%;border:1px solid #98b18c12;border-radius:50%;transform:rotate(-12deg);pointer-events:none}.orbit-guide:after{content:"";position:absolute;inset:18px -16px;border:1px solid #98b18c0c;border-radius:50%;transform:rotate(25deg)}.orbit-center{position:absolute;left:30%;top:38%;width:40%;text-align:center;pointer-events:none}.orbit-center>span{display:block;font-size:clamp(18px,2.2vw,29px);font-weight:400;letter-spacing:.06em;color:#d3dfd1;line-height:1.5}.orbit-center p{font-size:12px;line-height:1.7;letter-spacing:.06em;color:#80927f;margin:14px 0}.orbit-node{position:absolute;width:23%;max-width:235px;transform:translate(-50%,-50%);background:none;border:0;padding:8px 6px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:15px;z-index:1}.node-0{left:15%;top:24%}.node-1{left:50%;top:12%}.node-2{left:85%;top:24%}.node-3{left:85%;top:67%}.node-4{left:50%;top:80%}.node-5{left:15%;top:67%}.node-orb{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#384b37,#17221a 48%,#0b130e 78%);border:1px solid #829a6659;box-shadow:0 0 0 7px #9bc97405,0 14px 28px #0007,inset 0 1px 5px #d3ffbe24;position:relative;transition:box-shadow .35s,border-color .35s}.node-orb span{font-size:18px;letter-spacing:.08em;font-family:monospace;color:#bacbaa}.node-title{font-size:16px;font-weight:400;line-height:1.5;color:#a7b3a8;overflow-wrap:anywhere;max-width:100%}.orbit-node[aria-pressed=true] .node-orb{border-color:#d4f57a;box-shadow:0 0 0 8px #b8dc7110,0 0 48px #a4d65b28,inset 0 0 20px #b1dc4933}.orbit-node[aria-pressed=true] .node-orb span{color:#eaffc3}.orbit-node[aria-pressed=true] .node-title{color:#eff6e8}.orbit-node:hover .node-orb{border-color:#c2d1b8}.system-visual[data-mode=alert] .node-orb{border-color:#af716459;background:radial-gradient(circle at 35% 25%,#50342e,#281b17 48%,#140d0b 78%)}.system-visual[data-mode=alert] .orbit-node[aria-pressed=true] .node-orb{border-color:#ed9b8f;box-shadow:0 0 0 8px #ed9b8f10,0 0 48px #ed9b8f25,inset 0 0 20px #ed9b8f22}.system-visual[data-mode=alert] .node-orb span{color:#e2b8a5}.signal-base{fill:none;stroke:#6b836533;stroke-width:1.25;vector-effect:non-scaling-stroke}.signal-line{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:1.2 14;filter:drop-shadow(0 0 4px var(--signal));animation:signal-forward 5s linear infinite;stroke-linecap:round;vector-effect:non-scaling-stroke}.signal-arrow{fill:var(--signal);opacity:.75}.system-visual[data-mode=alert]{--signal:#ed9b8f;--signal-soft:#ed9b8f32}.system-visual[data-mode=alert] .signal-line{animation-name:signal-return}.system-visual[data-mode=alert] .signal-line[data-edge="4"]{opacity:.1;animation:none}.system-visual[data-mode=alert] .signal-arrow[data-edge="4"]{opacity:.1}.signal-line.selected-edge{stroke-width:3}.visual-foot{padding:0 30px 23px;display:flex;gap:20px;justify-content:space-between;align-items:center}.visual-foot p{font-size:14px;line-height:1.7;color:#b1c09f;margin:0;max-width:65%}.visual-foot>span{font-size:12px;color:#819080;line-height:1.7}.system-visual[data-mode=alert] .visual-foot p{color:#d3aaa2}.node-details{border-top:1px solid #2b372c;padding:25px 30px;background:#111712;min-height:135px}.node-details>div:not([hidden]){display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start}.node-details h3{font-size:22px;font-weight:400;color:#d7e7c6;margin:0;line-height:1.5}.node-details p{font-size:16px;color:#a8b5a4;line-height:1.8;margin:0}.system-visual[data-mode=alert] .node-details{background:#1a1412}.system-visual.is-paused .signal-line,.system-visual.is-offscreen .signal-line{animation-play-state:paused}@keyframes signal-forward{to{stroke-dashoffset:-76}}@keyframes signal-return{to{stroke-dashoffset:76}}
@media(max-width:680px){.visual-toolbar{padding:18px 16px;gap:13px;flex-wrap:wrap}.flow-modes{border-radius:10px;max-width:100%}.flow-modes button{font-size:13px;padding:9px 12px;border-radius:5px}.motion-control{font-size:13px!important;min-height:44px}.constellation{height:650px;margin:0 10px}.orbit-center{left:21%;top:42%;width:58%}.orbit-center>span{font-size:19px;letter-spacing:.02em}.orbit-center p{font-size:12px}.orbit-node{width:42%;max-width:none;gap:14px}.node-0{left:25%;top:15%}.node-1{left:75%;top:15%}.node-2{left:75%;top:36%}.node-3{left:75%;top:68%}.node-4{left:25%;top:83%}.node-5{left:25%;top:62%}.node-orb{width:57px;height:57px}.node-title{font-size:14px}.orbit-guide{left:21%;top:17%;width:58%;height:63%;transform:none}.visual-foot{padding:0 20px 23px;flex-direction:column;align-items:start;gap:10px}.visual-foot p{max-width:100%;font-size:14px}.node-details{padding:23px 20px;min-height:190px}.node-details>div:not([hidden]){grid-template-columns:1fr;gap:12px}.node-details h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.signal-line{animation:none!important}.node-orb{transition:none}.motion-control{display:none}}
@media(max-width:680px){.orbit-center{left:5%;top:35%;width:42%}.orbit-center>span{font-size:17px}.orbit-center p{font-size:12px;letter-spacing:0}}

/* Role-specific pictograms replace numbered medallions. */
.node-icon{width:78px;height:78px;display:grid;place-items:center;position:relative;background:#090e0c;border-radius:14px;isolation:isolate}
.node-icon:before{content:"";position:absolute;inset:-12px;background:radial-gradient(ellipse,#91bb5620,transparent 68%);z-index:-1;opacity:.4;transition:opacity .3s}
.role-icon{display:block;width:54px;height:54px;background:linear-gradient(145deg,#e4eddb,#94aa86 65%,#637653);mask:var(--role-icon) center/contain no-repeat;-webkit-mask:var(--role-icon) center/contain no-repeat;filter:drop-shadow(0 2px 5px #a3d66b40);transition:background .3s,transform .3s}
.orbit-node[aria-pressed=true] .role-icon{background:linear-gradient(145deg,#f5ffd9,#d4f57a 70%,#86ac40);transform:translateY(-2px)}
.orbit-node[aria-pressed=true] .node-icon:before{opacity:1;background:radial-gradient(ellipse,#c7f87040,transparent 70%)}
.orbit-node:hover .role-icon{transform:translateY(-3px)}
.system-visual[data-mode=alert] .node-icon{background:#110e0c}
.system-visual[data-mode=alert] .role-icon{background:linear-gradient(145deg,#f0ded3,#b68d7c)}
.system-visual[data-mode=alert] .orbit-node[aria-pressed=true] .role-icon{background:linear-gradient(145deg,#fff1e2,#ed9b8f)}
.system-visual[data-mode=alert] .orbit-node[aria-pressed=true] .node-icon:before{background:radial-gradient(ellipse,#ed9b8f40,transparent 70%)}
@media(max-width:680px){.node-icon{width:62px;height:62px}.role-icon{width:45px;height:45px}}
@media(prefers-reduced-motion:reduce){.role-icon,.node-icon:before{transition:none}}
.icon-square-activity{--role-icon:url("assets/icons/square-activity.svg")}
.icon-router{--role-icon:url("assets/icons/router.svg")}
.icon-smartphone{--role-icon:url("assets/icons/smartphone.svg")}
.icon-cloud-cog{--role-icon:url("assets/icons/cloud-cog.svg")}
.icon-brain-circuit{--role-icon:url("assets/icons/brain-circuit.svg")}
.icon-panels-top-left{--role-icon:url("assets/icons/panels-top-left.svg")}