/* Domo feedback loop styles */
[data-loop]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:1000px){[data-loop]{grid-template-columns:1fr}}
.loop-stage{position:relative;aspect-ratio:920/780;max-width:860px;width:100%;margin:0 auto}
.loop-stage svg{width:100%;height:100%;overflow:visible}

.lp-ring{fill:none;stroke:rgba(243,242,237,.16);stroke-width:1}
.lp-ring-faint{fill:none;stroke:rgba(243,242,237,.05);stroke-width:1}
.lp-ring-dash{fill:none;stroke:rgba(243,242,237,.12);stroke-width:1;stroke-dasharray:2 10}
.lp-tick{stroke:rgba(243,242,237,.14);stroke-width:1}
.lp-tick.major{stroke:rgba(239,71,45,.6)}
.lp-dial{transform-origin:380px 380px;animation:lp-spin 180s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-coreglow{animation:lp-breathe 6s ease-in-out infinite;transform-origin:380px 380px}
@keyframes lp-breathe{0%,100%{transform:scale(.96);opacity:.8}50%{transform:scale(1.04);opacity:1}}

.lp-arc{fill:none;stroke:rgba(243,242,237,.28);stroke-width:1.2;transition:stroke .5s,stroke-width .5s}
.lp-head{fill:none;stroke:rgba(243,242,237,.5);stroke-width:1.2;transition:stroke .5s}
.lp-pkt{fill:#f3f2ed;opacity:.9;transition:r .4s,fill .4s}
.lp-chord{fill:none;stroke:rgba(239,71,45,.22);stroke-width:1;stroke-dasharray:3 5;transition:stroke .5s}
.lp-dpkt{fill:#ef472d;opacity:.8;transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}

/* active state: the selected division's outgoing arc lights up */
[data-active="design"] .lp-arc[data-from="design"],[data-active="mfg"] .lp-arc[data-from="mfg"],[data-active="con"] .lp-arc[data-from="con"],[data-active="ops"] .lp-arc[data-from="ops"]{stroke:#f3f2ed;stroke-width:1.8}
[data-active="design"] .lp-head[data-from="design"],[data-active="mfg"] .lp-head[data-from="mfg"],[data-active="con"] .lp-head[data-from="con"],[data-active="ops"] .lp-head[data-from="ops"]{stroke:#fff}
[data-active="design"] .lp-pkt[data-from="design"],[data-active="mfg"] .lp-pkt[data-from="mfg"],[data-active="con"] .lp-pkt[data-from="con"],[data-active="ops"] .lp-pkt[data-from="ops"]{r:3.6;fill:#fff;filter:url(#lp-glow)}
[data-active="mfg"] .lp-chord[data-from="mfg"],[data-active="con"] .lp-chord[data-from="con"],[data-active="ops"] .lp-chord[data-from="ops"]{stroke:rgba(239,71,45,.75)}
[data-active="design"] .lp-chord{stroke:rgba(239,71,45,.55)}
[data-active="design"] .lp-dpkt{filter:url(#lp-glow)}

/* nodes */
.lp-node{cursor:pointer;outline:none}
.lp-node-halo{fill:rgba(239,71,45,0);stroke:rgba(239,71,45,0);stroke-width:1;transition:fill .5s,stroke .5s,r .5s}
.lp-node-bg{fill:#000}
.lp-node-stroke{fill:none;stroke:rgba(243,242,237,.35);stroke-width:1;transition:stroke .4s,stroke-width .4s}
.lp-node:hover .lp-node-stroke,.lp-node:focus-visible .lp-node-stroke,.lp-node.on .lp-node-stroke{stroke:#f3f2ed;stroke-width:1.4}
.lp-node.on .lp-node-halo{fill:rgba(239,71,45,.08);stroke:rgba(239,71,45,.5);r:56}
.lp-node:focus-visible .lp-node-halo{stroke:#ef472d}
.lp-iso{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lp-node.on .lp-iso{transform:scale(1.12)}
.lp-box{stroke:rgba(243,242,237,.85);stroke-width:1;stroke-linejoin:round}
.lp-box.f0{fill:#1d1d20}.lp-box.f1{fill:#0a0a0b}.lp-box.f2{fill:#131315}
.lp-box.ghost{stroke:rgba(243,242,237,.3);stroke-dasharray:2 2}
.lp-box.ghost.f0,.lp-box.ghost.f1,.lp-box.ghost.f2{fill:transparent}
.lp-box.hot{stroke:#ef472d}
.lp-box.hot.f0{fill:#4a1a12}.lp-box.hot.f1{fill:#2b100b}.lp-box.hot.f2{fill:#3a140e}
.lp-pulse{fill:#ef472d;animation:lp-pulse 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lp-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
.lp-ix{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;fill:#ef472d}
.lp-name{font-family:var(--sans);font-size:15px;font-weight:400;fill:#f3f2ed;letter-spacing:-.1px}
.lp-node .lp-label{opacity:.78;transition:opacity .4s}
.lp-node.on .lp-label,.lp-node:hover .lp-label{opacity:1}

.lp-c-k{font-family:var(--mono);font-size:10px;letter-spacing:2px;fill:#9a9c97}
.lp-c-v{font-family:var(--sans);font-size:24px;font-weight:300;fill:#f3f2ed;letter-spacing:-.4px;transition:opacity .4s}
.lp-c-v.fade{opacity:0}
.lp-c-s{font-family:var(--sans);font-size:12px;fill:rgba(243,242,237,.5)}

/* panel */
.loop-panel{position:relative;border-top:1px solid var(--line);padding-top:24px;min-height:420px}
.loop-panel.swap .lp-p-title,.loop-panel.swap .lp-p-body,.loop-panel.swap .lp-p-cols,.loop-panel.swap .lp-p-metric{animation:lp-in .6s cubic-bezier(.2,.7,.2,1) both}
.loop-panel.swap .lp-p-body{animation-delay:.06s}.loop-panel.swap .lp-p-cols{animation-delay:.12s}.loop-panel.swap .lp-p-metric{animation-delay:.18s}
@keyframes lp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lp-p-ix{color:var(--red)!important}
.lp-p-title{margin-top:10px;font-size:clamp(26px,2.4vw,34px);font-weight:300;letter-spacing:-.02em}
.lp-p-body{margin-top:12px;color:rgba(243,242,237,.74);font-size:15px;max-width:52ch}
.lp-p-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
@media (max-width:540px){.lp-p-cols{grid-template-columns:1fr}}
.lp-p-k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.lp-p-k::before{content:"";width:14px;border-top:1px solid #f3f2ed}
.lp-p-k.back::before{border-color:var(--red);border-top-style:dashed}
.lp-p-cols li{font-size:13.5px;color:rgba(243,242,237,.82);padding:9px 0;border-bottom:1px solid var(--line-2);line-height:1.35}
.lp-p-metric{margin-top:22px;display:flex;align-items:center;gap:12px;font-size:14px;color:#fff}
.lp-p-nav{display:flex;gap:2px;margin-top:28px;border:1px solid var(--line)}
.lp-p-nav button{flex:1;padding:10px 8px;font-size:12px;font-weight:400;color:var(--steel);display:flex;gap:8px;align-items:center;justify-content:center;border-right:1px solid var(--line);transition:background .25s,color .25s}
.lp-p-nav button:last-child{border-right:0}
.lp-p-nav button span{font-family:var(--mono);font-size:10px;color:var(--red)}
.lp-p-nav button.on,.lp-p-nav button:hover{background:var(--paper);color:var(--ink)}
.lp-p-nav button.on span{color:var(--red)}

@media (prefers-reduced-motion:reduce){
  .lp-dial,.lp-coreglow,.lp-pulse{animation:none}
  .loop-panel.swap *{animation:none!important}
}

/* Domo Brain hub */
.lp-brain-halo{fill:rgba(239,71,45,.04);stroke:rgba(239,71,45,.25);stroke-width:1;stroke-dasharray:2 6;transform-box:fill-box;transform-origin:center;animation:lp-spin 60s linear infinite reverse;transition:fill .5s,stroke .5s}
.lp-brain-ring{fill:none;stroke:rgba(243,242,237,.14);stroke-width:1}
.lp-brain-ring.r1{stroke-dasharray:1 5;transform-box:fill-box;transform-origin:center;animation:lp-spin 40s linear infinite}
.lp-brain-ring.r2{stroke:rgba(239,71,45,.35)}
.lp-brain-bg{fill:#000}
.lp-brain-tick{stroke:rgba(239,71,45,.45);stroke-width:1}
.lp-brain-core{fill:#ef472d}
.lp-brain-core.ping{fill:none;stroke:#ef472d;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:lp-ping 2.4s ease-out infinite}
@keyframes lp-ping{0%{transform:scale(1);opacity:1}100%{transform:scale(9);opacity:0}}
.lp-brain .lp-node-stroke{stroke:rgba(239,71,45,.6)}
.lp-brain.on .lp-brain-halo,.lp-brain:hover .lp-brain-halo{fill:rgba(239,71,45,.1);stroke:rgba(239,71,45,.7)}
.lp-brain.on .lp-node-stroke,.lp-brain:hover .lp-node-stroke{stroke:#ef472d;stroke-width:1.6}
.lp-brain .lp-c-k{fill:#f3f2ed;font-size:11px;letter-spacing:2.4px}
.lp-brain .lp-c-s{fill:#ef472d;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase}
.lp-chord.out{stroke:rgba(243,242,237,.3);stroke-dasharray:2 4}
.lp-dpkt.out{fill:#f3f2ed}
[data-active="brain"] .lp-chord{stroke:rgba(239,71,45,.8)}
[data-active="brain"] .lp-chord.out{stroke:rgba(243,242,237,.8)}
[data-active="brain"] .lp-dpkt{filter:url(#lp-glow)}
[data-active="design"] .lp-chord.out{stroke:rgba(243,242,237,.7)}
.lp-p-note{margin-top:14px;font-size:13px;color:rgba(243,242,237,.7);border-left:2px solid var(--red);padding:6px 0 6px 12px}
.lp-p-note[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.lp-brain-halo,.lp-brain-ring.r1,.lp-brain-core.ping{animation:none}}