#chain .cn-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
#chain .cn-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; }
#chain .cn-cv { position: absolute; inset: -110px 0 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#chain .cn-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
#chain .cn-orb { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; color: rgba(214,226,238,.55);
  background: radial-gradient(circle at 50% 35%, #12294a, #071324 70%); border: 1px solid var(--line); box-shadow: 0 0 0 10px rgba(5,12,23,.9), 0 20px 50px -20px #000;
  transition: color .5s, border-color .5s, box-shadow .5s, transform .3s var(--ease); font: inherit; }
#chain button.cn-orb:hover { transform: scale(1.05); }
#chain button.cn-orb:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
#chain .cn-orb > svg { width: 52px; height: 52px; grid-area: 1 / 1; transition: transform .6s var(--ease), opacity .4s; }
#chain .cn-node.lit .cn-orb { color: var(--cyan); border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 10px rgba(5,12,23,.9), 0 0 44px rgba(34,211,238,.28); }
#chain .cn-node.ping .cn-orb { box-shadow: 0 0 0 10px rgba(5,12,23,.9), 0 0 64px rgba(34,211,238,.6); }
#chain .cn-hx .cn-orb { cursor: default; outline: 1px solid rgba(255,197,0,.35); outline-offset: 16px; }
#chain .cn-hx.lit .cn-orb, .hx-static #chain .cn-hx .cn-orb { box-shadow: 0 0 0 10px rgba(5,12,23,.9), 0 0 60px rgba(34,211,238,.42); }
#chain .cn-hx.lit .cn-orb { background: radial-gradient(circle at 50% 35%, #0f3a5c, #071324 72%); }
#chain svg.cn-b, #chain p.cn-b, #chain em.cn-b { display: none; }
#chain .swapped svg.cn-a { display: none; } #chain .swapped svg.cn-b { display: block; animation: cnFlip .6s var(--ease); }
#chain .swapped p.cn-a, #chain .swapped em.cn-a { display: none; } #chain .swapped p.cn-b, #chain .swapped em.cn-b { display: block; animation: cnFade .5s; }
#chain .cn-node:not(.swapped) svg.cn-a.flip { animation: cnFlip .6s var(--ease); }
@keyframes cnFlip { from { transform: rotateY(90deg) scale(.7); opacity: 0; } }
@keyframes cnFade { from { opacity: 0; transform: translateY(6px); } }
#chain .cn-sw { position: absolute; right: 2px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0b1a2e; border: 1px solid rgba(34,211,238,.45); color: var(--cyan); }
#chain .cn-sw svg { width: 13px; height: 13px; }
#chain .cn-orb:hover .cn-sw svg { animation: cnSpin .7s var(--ease); }
@keyframes cnSpin { to { transform: rotate(360deg); } }
#chain .cn-dedup { position: absolute; top: -12px; left: 50%; transform: translate(-50%, 4px); font: 700 11px/1 var(--body); letter-spacing: .08em; color: #04111f; background: var(--cyan); padding: 5px 8px; border-radius: 999px; opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; }
#chain .cn-node.merge .cn-dedup, .hx-static #chain .cn-dedup { opacity: 1; transform: translate(-50%, 0); }
#chain .cn-txt { margin-top: 26px; max-width: 250px; }
#chain .cn-step { font: 700 12px/1 var(--body); letter-spacing: .24em; color: var(--muted); }
#chain .cn-txt .h3 { margin: 10px 0 8px; }
#chain .cn-txt .h3 b { color: var(--gold); }
#chain .cn-txt .h3 .hx-d { margin: 0 .01em; }
#chain .cn-txt p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
#chain .cn-tag { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(34,211,238,.55); color: var(--cyan); font: 600 13px/1 var(--body); }
#chain .cn-tag em { font-style: normal; }
#chain .cn-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 30px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; }
#chain .cn-hint { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); }
#chain .cn-hint svg { width: 16px; height: 16px; }
#chain .cn-meta { color: var(--muted); }
@media (max-width: 800px) {
  #chain .cn-head { text-align: left; align-items: flex-start; }
  #chain .cn-track { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; padding-left: 30px; }
  #chain .cn-hx .cn-orb { outline-offset: 9px; }
  #chain .cn-node { flex-direction: row; align-items: center; text-align: left; gap: 22px; }
  #chain .cn-orb, #chain .cn-hx .cn-orb { width: 84px; height: 84px; flex: 0 0 84px; margin: 0; box-shadow: 0 0 0 8px rgba(5,12,23,.9); }
  #chain .cn-orb > svg { width: 40px; height: 40px; }
  #chain .cn-txt { margin-top: 0; max-width: none; }
  #chain .cn-txt .h3 { margin: 6px 0 4px; font-size: 20px; }
  #chain .cn-foot { margin-top: 40px; flex-direction: column; }
}
.hx-static #chain .cn-orb { color: var(--cyan); border-color: rgba(34,211,238,.6); }
@media (max-width: 800px) { #chain .cn-node.lit .cn-orb { box-shadow: 0 0 0 8px rgba(5,12,23,.9), 0 0 34px rgba(34,211,238,.3); } }
@media (prefers-reduced-motion: reduce) { #chain .cn-orb { color: var(--cyan); border-color: rgba(34,211,238,.6); } }