<style>
@keyframes hp-node-pulse {
  0%, 100% { stroke-width: 1.5; opacity: 0.75; }
  50% { stroke-width: 2.5; opacity: 1; }
}
@keyframes hp-ai-glow {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.22); }
  50% { box-shadow:0 0 22px 2px rgba(255,255,255,0.45); border-color:rgba(255,255,255,0.5); }
}
@keyframes hp-sec-glow {
  0%, 100% { border-color:rgba(0,130,188,0.32); box-shadow:0 0 0 0 rgba(0,130,188,0); }
  50% { border-color:rgba(0,130,188,0.55); box-shadow:0 0 30px 0 rgba(0,130,188,0.28), inset 0 0 18px 0 rgba(0,130,188,0.06); }
}
@keyframes hp-pulse-int  { 0%,22%,100%{background:rgba(190,60,180,0.05);border-color:rgba(190,60,180,0.25);box-shadow:0 0 0 0 rgba(190,60,180,0);} 5%,18%{background:rgba(190,60,180,0.22);border-color:rgba(190,60,180,0.85);box-shadow:0 0 26px 0 rgba(190,60,180,0.55);} }
@keyframes hp-pulse-data { 0%,22%,100%{background:rgba(120,64,216,0.05);border-color:rgba(120,64,216,0.25);box-shadow:0 0 0 0 rgba(120,64,216,0);} 5%,18%{background:rgba(120,64,216,0.22);border-color:rgba(120,64,216,0.85);box-shadow:0 0 26px 0 rgba(120,64,216,0.55);} }
@keyframes hp-pulse-exec { 0%,22%,100%{background:rgba(60,80,220,0.05);border-color:rgba(60,80,220,0.25);box-shadow:0 0 0 0 rgba(60,80,220,0);} 5%,18%{background:rgba(60,80,220,0.22);border-color:rgba(60,80,220,0.85);box-shadow:0 0 26px 0 rgba(60,80,220,0.55);} }
@keyframes hp-pulse-pres { 0%,22%,100%{background:rgba(0,100,220,0.05);border-color:rgba(0,100,220,0.25);box-shadow:0 0 0 0 rgba(0,100,220,0);} 5%,18%{background:rgba(0,100,220,0.22);border-color:rgba(0,100,220,0.85);box-shadow:0 0 26px 0 rgba(0,100,220,0.55);} }
@keyframes hp-pulse-sec  { 0%,22%,100%{background:rgba(0,130,188,0.05);border-color:rgba(0,130,188,0.25);box-shadow:0 0 0 0 rgba(0,130,188,0);} 5%,18%{background:rgba(0,130,188,0.22);border-color:rgba(0,130,188,0.85);box-shadow:0 0 26px 0 rgba(0,130,188,0.55);} }

#hp-diagram { background:#1a1a2e; padding:80px 24px; font-family:Inter,sans-serif; max-width:100%; }
#hp-diagram .hp-inner { max-width:1100px; margin:0 auto; }
#hp-diagram .hp-heading { text-align:center; margin-bottom:35px; }
#hp-diagram .hp-h-white { font-family:Manrope,sans-serif; font-size:42px; font-weight:800; line-height:1.15; color:#fff; }
#hp-diagram .hp-h-grad { font-family:Manrope,sans-serif; font-size:42px; font-weight:800; line-height:1.15; background:linear-gradient(90deg,#be3cb4 0%,#7840d8 25%,#3c50dc 50%,#0064dc 75%,#0082bc 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

#hp-diagram .hp-grid { display:grid; grid-template-columns:200fr 180fr 340fr 180fr 200fr; }
#hp-diagram .hp-labels { margin-bottom:14px; }
#hp-diagram .hp-label { font-size:11px; font-weight:700; letter-spacing:2.5px; color:rgba(255,255,255,0.45); text-align:center; font-family:Manrope,sans-serif; }
#hp-diagram .hp-label-center { color:rgba(255,255,255,0.65); }

#hp-diagram .hp-canvas { position:relative; height:520px; }
#hp-diagram .hp-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

#hp-diagram .hp-svg .hp-track {
  stroke-dasharray: 3 4;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
  fill: none;
}
#hp-diagram .hp-svg .hp-dot-fwd,
#hp-diagram .hp-svg .hp-dot-rev {
  stroke: rgba(255,255,255,0.95);
  stroke-width: 1.6;
  stroke-dasharray: 1.5 20;
  stroke-linecap: round;
  opacity: 1;
  fill: none;
}
#hp-diagram .hp-svg .hp-node { animation:hp-node-pulse 2.5s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }

#hp-diagram .hp-side { display:flex; flex-direction:column; justify-content:center; gap:7px; height:100%; min-width:0; }
#hp-diagram .hp-side-r { gap:6px; }
#hp-diagram .hp-box { display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; border-left-width:3px; height:50px; box-sizing:border-box; }
#hp-diagram .hp-side-r .hp-box { height:46px; padding:8px 12px; }
#hp-diagram .hp-ico { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); }
#hp-diagram .hp-text { color:rgba(255,255,255,0.85); font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
#hp-diagram .hp-ai-chip { display:inline-block; padding:1px 5px; background:linear-gradient(90deg,#be3cb4,#0082bc); color:#fff; font-size:8px; font-weight:700; letter-spacing:1px; border-radius:3px; flex-shrink:0; font-family:Manrope,sans-serif; }

#hp-diagram .hp-center { display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 6px; }
#hp-diagram .hp-outer-box { border:1.5px solid rgba(0,130,188,0.32); border-radius:18px; padding:14px; background:rgba(0,130,188,0.04); animation:hp-sec-glow 4s ease-in-out infinite; position:relative; }
#hp-diagram .hp-outer-tag { position:absolute; top:-8px; left:50%; transform:translateX(-50%); background:#1a1a2e; padding:0 10px; color:rgba(0,130,188,0.75); font-size:9px; font-weight:700; letter-spacing:2.2px; font-family:Manrope,sans-serif; }
#hp-diagram .hp-ai-banner { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; margin-bottom:10px; background:linear-gradient(90deg,rgba(190,60,180,0.2),rgba(120,64,216,0.2),rgba(60,80,220,0.2),rgba(0,100,220,0.2),rgba(0,130,188,0.2)); border:1px solid rgba(255,255,255,0.25); border-radius:8px; text-decoration:none; cursor:pointer; animation:hp-ai-glow 3s ease-in-out infinite; transition:transform 0.2s ease; }
#hp-diagram .hp-ai-banner:hover { transform:translateY(-1px); }
#hp-diagram .hp-ai-banner-text { color:#fff; font-size:11px; font-weight:700; letter-spacing:2.2px; font-family:Manrope,sans-serif; }
#hp-diagram .hp-ai-dot { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,0.85); }
#hp-diagram .hp-layers { display:flex; flex-direction:column; gap:6px; }
#hp-diagram .hp-layer { display:flex; align-items:center; gap:11px; padding:9px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; text-decoration:none; cursor:pointer; transition:transform 0.2s ease; }
#hp-diagram .hp-layer:hover { transform:translateX(3px); }
#hp-diagram .hp-layer-bar { width:4px; height:30px; border-radius:2px; flex-shrink:0; }
#hp-diagram .hp-layer-body { flex:1; min-width:0; }
#hp-diagram .hp-layer-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#hp-diagram .hp-layer-num { color:rgba(255,255,255,0.4); font-size:10px; font-weight:700; letter-spacing:1.2px; font-family:'Courier New',monospace; }
#hp-diagram .hp-layer-name { color:rgba(255,255,255,0.95); font-size:12px; font-weight:700; letter-spacing:1px; font-family:Manrope,sans-serif; }
#hp-diagram .hp-layer-aichip { display:inline-block; padding:1px 5px; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.9); font-size:8px; font-weight:700; letter-spacing:1px; border-radius:3px; font-family:Manrope,sans-serif; }
#hp-diagram .hp-layer-desc { color:rgba(255,255,255,0.55); font-size:10.5px; margin-top:1px; }

@media (max-width:960px) {
  #hp-diagram .hp-canvas { height:auto; }
  #hp-diagram .hp-svg { display:none; }
  #hp-diagram .hp-grid { grid-template-columns:1fr; gap:20px; }
  #hp-diagram .hp-labels { display:none; }
  #hp-diagram .hp-side { height:auto; }
  #hp-diagram .hp-h-white, #hp-diagram .hp-h-grad { font-size:28px; }
  #hp-diagram { padding:60px 20px; }
}
</style>