.ecc {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto;
  aspect-ratio: 600 / 560;
  border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #0B2350 0%, #061634 52%, #04102a 100%);
  border: 1px solid rgba(120,160,230,.16);
  box-shadow: 0 40px 100px rgba(4,12,34,.45), inset 0 1px 0 rgba(255,255,255,.05);
  direction: ltr;
}
.ecc-canvas, .ecc-svg, .ecc-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.ecc-canvas { z-index: 0; }
.ecc-svg { z-index: 1; }
.ecc-layer { z-index: 2; pointer-events: none; }
.ecc-parallax { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.22,1,.36,1); will-change: transform; }

.ecc-core-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; pointer-events: none;
}
.ecc-core-label .t { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; color: rgba(173,200,255,.75); text-transform: uppercase; }
.ecc-core-label .n { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em; }

.ecc-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: auto; cursor: default;
}
.ecc-node-chip {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--c, #2196F3);
  color: var(--c, #2196F3); font-size: 24px; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s;
  backdrop-filter: blur(4px);
}
.ecc-node-chip::after {
  content: ""; position: absolute; inset: -1px; border-radius: 14px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent);
  opacity: .35; transition: opacity .25s;
}
.ecc-node-label { font-size: 11.5px; font-weight: 500; color: rgba(220,232,255,.82); white-space: nowrap; letter-spacing: .01em; }
.ecc-node.idle .ecc-node-chip { animation: eccNodeIdle 6s ease-in-out infinite; }
.ecc-node:nth-child(2n) .ecc-node-chip { animation-delay: -2s; }
.ecc-node:nth-child(3n) .ecc-node-chip { animation-delay: -4s; }
.ecc-node:hover .ecc-node-chip, .ecc-node.on .ecc-node-chip {
  transform: translateY(-2px) scale(1.08); background: color-mix(in srgb, var(--c) 18%, rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px var(--c), 0 12px 30px color-mix(in srgb, var(--c) 30%, transparent);
}
.ecc-node:hover .ecc-node-chip::after, .ecc-node.on .ecc-node-chip::after { opacity: .9; }
@keyframes eccNodeIdle { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

.ecc-tip {
  position: absolute; z-index: 5; width: 220px; transform: translate(-50%, 0);
  background: rgba(10,24,52,.92); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(140,175,240,.22); border-radius: 13px; padding: 13px 15px;
  box-shadow: 0 20px 48px rgba(0,4,18,.55); pointer-events: none;
  opacity: 0; animation: eccTip .22s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes eccTip { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ecc-tip .h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ecc-tip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #2196F3); box-shadow: 0 0 10px var(--c); flex: none; }
.ecc-tip .h b { font-size: 13px; font-weight: 600; color: #fff; }
.ecc-tip p { margin: 0; font-size: 11.5px; line-height: 1.7; color: rgba(204,220,250,.75); }

.ecc-badge {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: rgba(214,228,255,.8); white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid rgba(150,180,240,.16); border-radius: 100px;
  padding: 5px 11px; backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.3);
  animation: eccBadgeFloat 7s ease-in-out infinite;
}
.ecc-badge i { font-size: 12px; color: #8BC34A; }
@keyframes eccBadgeFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }

.ecc-enter .ecc-node { opacity: 0; animation: eccNodeIn .6s cubic-bezier(.22,1,.36,1) forwards; }
.ecc-enter .ecc-badge { opacity: 0; animation: eccBadgeIn .7s cubic-bezier(.22,1,.36,1) forwards, eccBadgeFloat 7s ease-in-out infinite; }
@keyframes eccNodeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes eccBadgeIn { from { opacity: 0; } to { opacity: 1; } }

.ecc-conn { stroke-dasharray: 520; stroke-dashoffset: 520; animation: eccDraw 1.1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes eccDraw { to { stroke-dashoffset: 0; } }
.ecc-conn.hot { stroke-opacity: .9 !important; stroke-width: 2.2 !important; }

.ecc-core { transform-origin: 300px 280px; animation: eccBreathe 5.5s ease-in-out infinite; }
@keyframes eccBreathe { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }
.ecc-ring-rot { transform-origin: 300px 280px; animation: eccSpin 60s linear infinite; }
.ecc-ring-rot.rev { animation-duration: 90s; animation-direction: reverse; }
@keyframes eccSpin { to { transform: rotate(360deg); } }

.ecc-enter .ecc-core-grp { animation: eccCoreIn .8s cubic-bezier(.22,1,.36,1); }
@keyframes eccCoreIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.ecc-enter .ecc-core-label { opacity: 0; animation: eccBadgeIn .6s ease .35s forwards; }

@media (max-width: 760px){
  .ecc { max-width: 440px; }
  .ecc-node-chip { width: 42px; height: 42px; font-size: 20px; }
  .ecc-node-label { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce){
  .ecc-core, .ecc-ring-rot, .ecc-node.idle .ecc-node-chip, .ecc-badge, .ecc-parallax { animation: none !important; transition: none !important; }
  .ecc-conn { stroke-dashoffset: 0 !important; animation: none !important; }
  .ecc-enter .ecc-node, .ecc-enter .ecc-badge, .ecc-enter .ecc-core-label { opacity: 1 !important; animation: none !important; }
}