<style>
@keyframes mcp-node-pulse {
  0%,100%{stroke-width:1.5;opacity:0.75;}
  50%{stroke-width:2.5;opacity:1;}
}
@keyframes mcp-sec-glow {
  0%,100%{box-shadow:0 0 8px rgba(0,188,212,0.15);}
  50%{box-shadow:0 0 22px rgba(0,188,212,0.35);}
}
@keyframes mcp-exec-pulse {
  0%,100%{border-color:rgba(60,80,220,0.45);box-shadow:0 0 5px rgba(60,80,220,0.15);background:rgba(60,80,220,0.08);}
  50%{border-color:rgba(60,80,220,0.9);box-shadow:0 0 16px rgba(60,80,220,0.4);background:rgba(60,80,220,0.2);}
}
@keyframes mcp-server-glow {
  0%,100%{box-shadow:0 0 16px rgba(60,80,220,0.4),0 0 32px rgba(60,80,220,0.12);}
  50%{box-shadow:0 0 30px rgba(60,80,220,0.65),0 0 55px rgba(60,80,220,0.22);}
}
#mcp-diag{background:none !important;padding:0 !important;margin:0 !important;font-family:Inter,sans-serif;max-width:100%;box-sizing:border-box;}
#mcp-diag .mcp-inner{max-width:900px;margin:0 auto;}
#mcp-diag .mcp-lbl-row{display:grid;grid-template-columns:200fr 110fr 280fr 110fr 200fr;margin-bottom:10px;}
#mcp-diag .mcp-lbl{font-size:11px;font-weight:700;letter-spacing:2.5px;color:rgba(255,255,255,0.4);text-align:center;font-family:Manrope,sans-serif;}
#mcp-diag .mcp-lbl-c{color:rgba(255,255,255,0.65);}
#mcp-diag .mcp-canvas{position:relative;height:380px;}
#mcp-diag .mcp-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
#mcp-diag .mcp-svg .mcp-track{stroke-dasharray:3 4;stroke-width:1.6;stroke-linecap:round;opacity:0.65;fill:none;}
#mcp-diag .mcp-svg .mcp-dot-fwd,
#mcp-diag .mcp-svg .mcp-dot-rev{stroke:rgba(255,255,255,0.9);stroke-width:1.6;stroke-dasharray:1.5 20;stroke-linecap:round;opacity:1;fill:none;}
#mcp-diag .mcp-svg .mcp-node{animation:mcp-node-pulse 2.5s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
#mcp-diag .mcp-grid{display:grid;grid-template-columns:200fr 110fr 280fr 110fr 200fr;height:100%;}
#mcp-diag .mcp-side{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;min-width:0;}
#mcp-diag .mcp-side-r{gap:28px;}
#mcp-diag .mcp-box{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;border-left-width:3px;box-sizing:border-box;min-width:0;}
#mcp-diag .mcp-ai{height:76px;padding:14px 14px;}
#mcp-diag .mcp-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.65);}
#mcp-diag .mcp-txt{color:rgba(255,255,255,0.85);font-size:12px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#mcp-diag .mcp-ai-body{display:flex;flex-direction:column;gap:4px;flex:1;}
#mcp-diag .mcp-ai-name{color:rgba(255,255,255,0.9);font-size:15px;font-weight:600;font-family:Manrope,sans-serif;}
#mcp-diag .mcp-ai-by{color:rgba(255,255,255,0.4);font-size:11px;font-weight:500;}
#mcp-diag .mcp-hub-col{display:flex;align-items:center;justify-content:center;height:100%;}
#mcp-diag .mcp-perimeter{border:1.5px solid rgba(0,188,212,0.5);border-radius:12px;padding:18px 14px;position:relative;background:rgba(0,188,212,0.025);animation:mcp-sec-glow 3s ease-in-out infinite;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;}
#mcp-diag .mcp-perimeter-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:transparent !important;padding:2px 10px;border:1px solid rgba(0,188,212,0.5);border-radius:3px;font-family:Manrope,sans-serif;font-size:7.5px;color:#00bcd4;letter-spacing:1.5px;white-space:nowrap;text-transform:uppercase;}
#mcp-diag .mcp-layers{display:flex;flex-direction:column;gap:3px;}
#mcp-diag .mcp-layer{padding:4px 8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:4px;text-align:center;font-size:8px;color:rgba(255,255,255,0.3);letter-spacing:0.7px;font-family:Manrope,sans-serif;}
#mcp-diag .mcp-layer-exec{animation:mcp-exec-pulse 2.5s ease-in-out infinite;color:#8a9ef5;font-weight:700;}
#mcp-diag .mcp-server-box{background:linear-gradient(145deg,#253abd,#3c50dc);border:1.5px solid rgba(120,140,255,0.4);border-radius:10px;padding:16px 12px;text-align:center;animation:mcp-server-glow 2.5s ease-in-out infinite;margin:2px 0;}
#mcp-diag .mcp-server-title{font-family:Manrope,sans-serif;font-size:15px;font-weight:800;color:#fff;letter-spacing:1.5px;margin-bottom:4px;}
#mcp-diag .mcp-server-sub{font-size:8.5px;color:rgba(255,255,255,0.5);letter-spacing:0.8px;}
#mcp-diag .mcp-feats{display:flex;align-items:center;gap:5px;justify-content:center;}
#mcp-diag .mcp-feat{color:rgba(255,255,255,0.4);font-size:9px;font-weight:600;letter-spacing:1.5px;font-family:Manrope,sans-serif;}
#mcp-diag .mcp-sep{color:rgba(255,255,255,0.2);font-size:10px;}
@media(max-width:700px){
  #mcp-diag .mcp-canvas{height:auto;}
  #mcp-diag .mcp-svg{display:none;}
  #mcp-diag .mcp-grid{grid-template-columns:1fr;gap:20px;}
  #mcp-diag .mcp-lbl-row{display:none;}
  #mcp-diag .mcp-side{height:auto;}
  #mcp-diag{padding:0 !important;}
}
</style>

<div id="mcp-diag">
  <div class="mcp-inner">
    <div class="mcp-lbl-row">
      <div class="mcp-lbl">DATA SOURCES</div><div></div>
      <div class="mcp-lbl mcp-lbl-c">RAYVEN MCP SERVER</div><div></div>
      <div class="mcp-lbl">AI ASSISTANTS</div>
    </div>
    <div class="mcp-canvas">
      <svg class="mcp-svg" viewBox="0 0 900 380" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path class="mcp-track" d="M 200 45 C 245 45 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 200 103 C 245 103 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 200 161 C 245 161 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 200 219 C 245 219 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 200 277 C 245 277 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 200 335 C 245 335 245 190 285 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 285 190 L 310 190" stroke="#3c50dc"/>
        <path class="mcp-dot-fwd" d="M 200 40 C 245 40 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 200 98 C 245 98 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 200 156 C 245 156 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 200 214 C 245 214 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 200 272 C 245 272 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 200 330 C 245 330 245 185 285 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 50 C 245 50 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 108 C 245 108 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 166 C 245 166 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 224 C 245 224 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 282 C 245 282 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 200 340 C 245 340 245 195 285 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-track" d="M 590 190 L 615 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 615 190 C 655 190 655 90 700 90" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 615 190 C 655 190 655 190 700 190" stroke="#3c50dc"/>
        <path class="mcp-track" d="M 615 190 C 655 190 655 290 700 290" stroke="#3c50dc"/>
        <path class="mcp-dot-fwd" d="M 615 185 C 655 185 655 85 700 85"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 615 185 C 655 185 655 185 700 185"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-fwd" d="M 615 185 C 655 185 655 285 700 285"><animate attributeName="stroke-dashoffset" values="0;-21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 615 195 C 655 195 655 95 700 95"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 615 195 C 655 195 655 195 700 195"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <path class="mcp-dot-rev" d="M 615 195 C 655 195 655 295 700 295"><animate attributeName="stroke-dashoffset" values="0;21.5" dur="0.7s" repeatCount="indefinite"/></path>
        <circle class="mcp-node" cx="285" cy="190" r="7" fill="rgba(60,80,220,0.2)" stroke="rgba(60,80,220,0.85)" stroke-width="1.6"/>
        <circle cx="285" cy="190" r="3" fill="rgba(255,255,255,0.9)"/>
        <circle class="mcp-node" cx="615" cy="190" r="7" fill="rgba(60,80,220,0.2)" stroke="rgba(60,80,220,0.85)" stroke-width="1.6"/>
        <circle cx="615" cy="190" r="3" fill="rgba(255,255,255,0.9)"/>
      </svg>

      <div class="mcp-grid">
        <div class="mcp-side">
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/></svg></div><div class="mcp-txt">SAP / Oracle ERP</div></div>
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div><div class="mcp-txt">IoT / SCADA</div></div>
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div><div class="mcp-txt">CRM / HubSpot</div></div>
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="1" y="3" width="15" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M16 8h4l3 3v5h-7V8z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="5.5" cy="18.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><circle cx="18.5" cy="18.5" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg></div><div class="mcp-txt">WMS / TMS</div></div>
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="5" rx="9" ry="3" stroke="currentColor" stroke-width="1.5"/><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" stroke="currentColor" stroke-width="1.5"/><path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3" stroke="currentColor" stroke-width="1.5"/></svg></div><div class="mcp-txt">Databases</div></div>
          <div class="mcp-box" style="border-left-color:#3c50dc;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.5"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.5"/><path d="M8 13h8M8 17h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div><div class="mcp-txt">Spreadsheets / APIs</div></div>
        </div>

        <div></div>

        <div class="mcp-hub-col">
          <div class="mcp-perimeter">
            <div class="mcp-perimeter-tag">SECURED PERIMETER</div>
            <div class="mcp-layers">
              <div class="mcp-layer">01 · DATA</div>
              <div class="mcp-layer">02 · INTEGRATION</div>
              <div class="mcp-layer mcp-layer-exec">03 · EXECUTION</div>
              <div class="mcp-layer">04 · ANALYTICS</div>
              <div class="mcp-layer">05 · APPLICATIONS</div>
            </div>
            <div class="mcp-server-box">
              <div class="mcp-server-title">MCP SERVER</div>
              <div class="mcp-server-sub">Model Context Protocol</div>
            </div>
            <div class="mcp-feats">
              <span class="mcp-feat">GOVERNED</span><span class="mcp-sep">·</span>
              <span class="mcp-feat">REAL-TIME</span><span class="mcp-sep">·</span>
              <span class="mcp-feat">AUDITED</span>
            </div>
          </div>
        </div>

        <div></div>

        <div class="mcp-side mcp-side-r">
          <div class="mcp-box mcp-ai" style="border-left-color:#da7756;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="10" r="0.8" fill="currentColor"/><circle cx="12" cy="10" r="0.8" fill="currentColor"/><circle cx="15" cy="10" r="0.8" fill="currentColor"/></svg></div><div class="mcp-ai-body"><div class="mcp-ai-name">Claude</div><div class="mcp-ai-by">Anthropic</div></div></div>
          <div class="mcp-box mcp-ai" style="border-left-color:#10a37f;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="10" r="0.8" fill="currentColor"/><circle cx="12" cy="10" r="0.8" fill="currentColor"/><circle cx="15" cy="10" r="0.8" fill="currentColor"/></svg></div><div class="mcp-ai-body"><div class="mcp-ai-name">ChatGPT</div><div class="mcp-ai-by">OpenAI</div></div></div>
          <div class="mcp-box mcp-ai" style="border-left-color:#4285f4;"><div class="mcp-ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="10" r="0.8" fill="currentColor"/><circle cx="12" cy="10" r="0.8" fill="currentColor"/><circle cx="15" cy="10" r="0.8" fill="currentColor"/></svg></div><div class="mcp-ai-body"><div class="mcp-ai-name">Gemini</div><div class="mcp-ai-by">Google</div></div></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  function init(){
    var svg=document.querySelector('#mcp-diag .mcp-svg');
    if(!svg){setTimeout(init,100);return;}
    var fwd=svg.querySelectorAll('.mcp-dot-fwd');
    var rev=svg.querySelectorAll('.mcp-dot-rev');
    if(!fwd.length||!rev.length){setTimeout(init,100);return;}
    var pos=0,cycle=21.5,speed=30,prev=0;
    function frame(t){
      if(!prev)prev=t;
      var dt=(t-prev)/1000;
      prev=t;
      pos=(pos+speed*dt)%cycle;
      var f=String(-pos),r=String(pos);
      for(var i=0;i<fwd.length;i++)fwd[i].style.setProperty('stroke-dashoffset',f);
      for(var j=0;j<rev.length;j++)rev[j].style.setProperty('stroke-dashoffset',r);
      requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
  }
  if(document.readyState!=='loading')init();
  else document.addEventListener('DOMContentLoaded',init);
})();
</script>