.operation-network {
  --on-deep: #032d27;
  --on-panel: #073b33;
  --on-input: #68c9ed;
  --on-core: #72dfb7;
  --on-action: #d5ed55;
  --on-outcome: #ff9d87;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.2rem, 7.5vw, 8rem) clamp(.8rem, 3vw, 3.5rem);
  color: #f5fffb;
  background:
    radial-gradient(circle at 8% 10%, rgba(104,201,237,.12), transparent 23rem),
    radial-gradient(circle at 92% 88%, rgba(213,237,85,.12), transparent 25rem),
    linear-gradient(145deg, #062f29 0%, #021f1c 100%);
}

.on-wrap { width: min(1600px, 100%); margin: 0 auto; }

.on-head {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(290px,.7fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: clamp(1.7rem, 3vw, 2.8rem);
}

.on-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  color: var(--on-core);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.on-eyebrow span { color: #fff; }
.on-eyebrow i { width: 2.8rem; height: 1px; background: rgba(114,223,183,.55); }
.on-head h2 { max-width: 15ch; margin: 0; color: #fff; font: 650 clamp(2.8rem,4.6vw,5rem)/1 Manrope,sans-serif; letter-spacing: -.058em; }
.on-head h2 em { color: var(--on-core); font-style: normal; }
.on-head > p { max-width: 37rem; margin: 0 0 .35rem; color: rgba(235,252,246,.69); font-size: clamp(.98rem,1.15vw,1.15rem); line-height: 1.7; }

.on-stage {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(1.4rem,2.5vw,2.5rem);
  background: rgba(3,35,30,.78);
  box-shadow: 0 40px 100px rgba(0,0,0,.28);
}

.on-stagebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}

.on-live,.on-legend { display: flex; align-items: center; gap: .7rem; }
.on-live > i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--on-core); box-shadow: 0 0 0 .32rem rgba(114,223,183,.12); animation: onPulse 1.8s ease-in-out infinite; }
.on-live strong { font-size: .75rem; }
.on-live span { color: rgba(255,255,255,.43); font-size: .68rem; }
.on-legend { flex-wrap: wrap; justify-content: flex-end; }
.on-legend span { display: inline-flex; align-items: center; gap: .42rem; color: rgba(255,255,255,.62); font-size: .65rem; font-weight: 700; }
.on-legend span::before { content:''; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.on-legend .input { color: var(--on-input); }.on-legend .core { color: var(--on-core); }.on-legend .action { color: var(--on-action); }.on-legend .outcome { color: var(--on-outcome); }

.on-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 720;
  min-height: 560px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 25% 50%, rgba(114,223,183,.07), transparent 25%);
  background-size: 36px 36px,36px 36px,auto;
}

.on-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.on-wire { fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-dasharray:7 9; animation:onWire 3.4s linear infinite; animation-delay:var(--delay,0s); transition:stroke .25s ease,opacity .25s ease,stroke-width .25s ease; }
.on-wire--input { stroke:rgba(104,201,237,.4); }.on-wire--core { stroke:rgba(114,223,183,.35); }.on-wire--action { stroke:rgba(213,237,85,.35); }.on-wire--outcome { stroke:rgba(255,157,135,.37); }
.on-wire--return-spoke { stroke:rgba(255,157,135,.16); stroke-dasharray:none; animation:none; }
.on-wire--loop { stroke:rgba(213,237,85,.55); stroke-width:2; stroke-dasharray:10 11; filter:url(#onGlow); }
.on-wire--hub { stroke:rgba(114,223,183,.55); }
.operation-network .on-wire[data-row]:not(.is-active) { opacity:.3; }
.operation-network .on-wire.is-active { opacity:1; stroke-width:2.6; filter:url(#onGlow); }

.on-column { position:absolute; top:1.2%; z-index:2; color:rgba(255,255,255,.38); font-size:clamp(8px,.56vw,10px); font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.on-column--input { left:1.35%; }.on-column--core { left:36.7%; }.on-column--action { left:59.7%; }.on-column--outcome { left:82.35%; }

.on-node {
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  z-index:3;
  display:grid;
  grid-template-columns:clamp(27px,2.2vw,37px) minmax(0,1fr);
  gap:clamp(7px,.65vw,11px);
  align-items:center;
  padding:clamp(7px,.65vw,11px);
  border:1px solid rgba(255,255,255,.13);
  border-radius:clamp(9px,.8vw,14px);
  color:#eefcf7;
  background:rgba(7,56,48,.92);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  outline:none;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease;
}

.on-node:hover,.on-node:focus-visible,.on-node.is-active { transform:translateY(-2px); border-color:var(--node-color); background:#0b493e; box-shadow:0 0 0 1px color-mix(in srgb,var(--node-color) 30%,transparent),0 16px 34px rgba(0,0,0,.25); }
.on-node[data-row]:not(.is-active) { opacity:.7; }
.on-node--input { --node-color:var(--on-input); }.on-node--core { --node-color:var(--on-core); }.on-node--action { --node-color:var(--on-action); }.on-node--outcome { --node-color:var(--on-outcome); }
.on-code { display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:9px; color:#052e27; background:var(--node-color); font-size:clamp(8px,.58vw,10px); font-weight:900; letter-spacing:-.03em; }
.on-node small { display:block; overflow:hidden; margin-bottom:2px; color:var(--node-color); font-size:clamp(8px,.58vw,10px); font-weight:800; line-height:1.15; letter-spacing:.07em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.on-node strong { display:block; overflow:hidden; color:#fff; font:750 clamp(11px,.79vw,14px)/1.18 Manrope,sans-serif; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.on-node p { display:block; overflow:hidden; margin:3px 0 0; color:rgba(238,252,247,.5); font-size:clamp(8.5px,.62vw,11px)!important; line-height:1.22!important; text-overflow:ellipsis; white-space:nowrap; }

.on-node--hub {
  --node-color:var(--on-core);
  grid-template-columns:1fr;
  align-content:center;
  padding:clamp(14px,1.5vw,24px);
  text-align:center;
  border-color:rgba(114,223,183,.45);
  background:linear-gradient(145deg,#126c5a,#07473c);
  box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 60px rgba(114,223,183,.08);
}
.on-hub-mark { display:grid; width:clamp(34px,3vw,48px); aspect-ratio:1; place-items:center; margin:0 auto .55rem; border-radius:13px; color:#07372f; background:var(--on-core); font-size:clamp(11px,.85vw,15px); font-weight:900; }
.on-node--hub small { color:rgba(255,255,255,.56); font-size:clamp(8px,.6vw,10px); letter-spacing:.11em; }
.on-node--hub strong { font-size:clamp(18px,1.55vw,26px); }
.on-node--hub p { max-width:17rem; margin:.42rem auto .65rem; color:rgba(255,255,255,.65); white-space:normal; }
.on-node--hub b { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; color:rgba(255,255,255,.68); font-size:clamp(8px,.6vw,10px); font-weight:700; }
.on-node--hub b i { width:.42rem; height:.42rem; border-radius:50%; background:var(--on-core); }

.on-loop-label { position:absolute; left:26%; bottom:1.7%; z-index:4; display:flex; align-items:center; gap:.8rem; max-width:58%; padding:.55rem .75rem; border:1px solid rgba(213,237,85,.25); border-radius:999px; background:#062f29; box-shadow:0 12px 28px rgba(0,0,0,.25); }
.on-loop-label span { padding:.35rem .5rem; border-radius:999px; color:#183006; background:var(--on-action); font-size:clamp(8px,.55vw,10px); font-weight:900; }
.on-loop-label strong { color:#fff; font-size:clamp(9px,.7vw,12px); white-space:nowrap; }
.on-loop-label p { overflow:hidden; margin:0; color:rgba(255,255,255,.46); font-size:clamp(8px,.56vw,10px)!important; line-height:1.3!important; text-overflow:ellipsis; white-space:nowrap; }

.on-footer { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:1rem; align-items:center; padding:1.15rem 1.35rem; border-top:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); }
.on-footer > i { width:2.2rem; height:1px; background:linear-gradient(90deg,var(--on-core),var(--on-action)); }
.on-footer div { display:grid; grid-template-columns:auto 1fr; column-gap:.65rem; align-items:center; }
.on-footer span { grid-row:1/3; display:grid; width:2rem; aspect-ratio:1; place-items:center; border-radius:50%; color:#07362f; background:var(--on-core); font-size:.65rem; font-weight:900; }
.on-footer div:nth-of-type(2) span { background:var(--on-action); }.on-footer div:nth-of-type(3) span { background:var(--on-outcome); }
.on-footer strong { font-size:.75rem; }.on-footer p { margin:.15rem 0 0; color:rgba(255,255,255,.45); font-size:.66rem!important; line-height:1.35!important; }

@keyframes onWire { to { stroke-dashoffset:-32; } }
@keyframes onPulse { 50% { opacity:.45; transform:scale(.82); } }

@media (min-width:1100px) and (max-height:800px) {
  .operation-network { padding-block:3.5rem; }
  .on-head { margin-bottom:1.6rem; }
  .on-head h2 { font-size:clamp(2.7rem,4vw,4.25rem); }
  .on-canvas { min-height:540px; }
}

@media (max-width:1099px) {
  .on-head { grid-template-columns:1fr; gap:1.25rem; }
  .on-head h2 { max-width:17ch; }
  .on-stagebar { align-items:flex-start; flex-direction:column; }
  .on-legend { justify-content:flex-start; }
  .on-canvas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; min-height:0; aspect-ratio:auto; padding:1rem; }
  .on-wires,.on-column,.on-loop-label { display:none; }
  .on-node { position:relative; left:auto; top:auto; width:auto; height:auto; min-height:92px; opacity:1!important; }
  .on-node--hub { grid-column:1/-1; min-height:180px; }
  .on-footer { grid-template-columns:1fr; }
  .on-footer > i { width:1px; height:1.4rem; margin:0 auto; }
}

@media (max-width:620px) {
  .operation-network { padding-inline:.7rem; }
  .on-head h2 { font-size:clamp(2.4rem,12vw,3.35rem); }
  .on-canvas { grid-template-columns:1fr; }
  .on-node--hub { grid-column:auto; }
  .on-stagebar,.on-footer { padding:1rem; }
  .on-live span { display:none; }
  .on-node { min-height:96px; padding:1rem; }
  .on-node p { white-space:normal; }
}

@media (prefers-reduced-motion:reduce) {
  .on-wire,.on-live > i { animation:none; }
  .on-node { transition:none; }
}