:root .sig--br-hub { container-type: inline-size; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); }
:root .sig--br-hub svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--br-hub .brhb { width: 100%; max-width: 720px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
:root .sig--br-hub .brhb__orb { position: relative; aspect-ratio: 1; width: 100%; max-width: 380px; justify-self: center; }
:root .sig--br-hub .brhb__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root .sig--br-hub .brhb__lines circle { stroke: rgba(227, 184, 255, .2); stroke-width: .35; stroke-dasharray: .8 1.6; animation: brhbTurn 60s linear infinite; transform-origin: 50px 50px; }
:root .sig--br-hub .brhb__lines .brhb__in { stroke: rgba(227, 184, 255, .12); stroke-dasharray: none; animation: none; }
@keyframes brhbTurn{ to { transform: rotate(360deg); } }
:root .sig--br-hub .brhb__lines line { stroke: #e3b8ff; stroke-width: .5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--ease-out), opacity .4s; filter: drop-shadow(0 0 1.5px #a100ff); }
:root .sig--br-hub .brhb__lines line.on { stroke-dashoffset: 0; opacity: 1; }
:root .sig--br-hub .brhb__core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 30%, #3a2350, #1f1a25 70%); border: 1px solid rgba(227, 184, 255, .25); box-shadow: none; }
:root .sig--br-hub .brhb__core b { font: 600 clamp(11px, 2.4cqw, 14px)/1.15 var(--f-display); color: #fff; letter-spacing: -.01em; }
:root .sig--br-hub .brhb__tools { position: absolute; inset: -14%; animation: brhbTurn 24s linear infinite; }
:root .sig--br-hub .brhb__tools i { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; margin: -13%; border-radius: 50%; display: grid; place-items: center; background: #2a2231; border: 1px solid rgba(227, 184, 255, .2); color: #e3b8ff; transform: rotate(calc(var(--i) * 90deg)) translateY(-205%) rotate(calc(var(--i) * -90deg)); }
:root .sig--br-hub .brhb__tools i svg { width: 58%; height: 58%; animation: brhbTurn 24s linear infinite reverse; }
:root .sig--br-hub .brhb__node { position: absolute; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: #24202a; border: 1px solid rgba(227, 184, 255, .22); color: #cdb6dd; transition: background .6s var(--ease-out), color .5s, transform .7s var(--ease-back), box-shadow .6s, border-color .6s; }
:root .sig--br-hub .brhb__node svg { width: 48%; height: 48%; }
:root .sig--br-hub .brhb__node.on { background: #a100ff; border-color: #c56bff; color: #fff; transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 0 0 8px rgba(161, 0, 255, .16), 0 14px 30px -10px rgba(161, 0, 255, .9); }
:root .sig--br-hub .brhb__card { padding: clamp(18px, 2.6vw, 28px); border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(227, 184, 255, .18); backdrop-filter: blur(8px); }
:root .sig--br-hub .brhb__card small { display: block; font: 500 12.5px/1 var(--f-display); color: #d4bfe4; }
:root .sig--br-hub .brhb__name { display: block; margin: 10px 0 14px; min-height: 2.3em; font: 600 clamp(19px, 2.6vw, 26px)/1.15 var(--f-display); letter-spacing: -.03em; color: #fff; }
:root .sig--br-hub .brhb__tags { display: flex; flex-wrap: wrap; gap: 7px; }
:root .sig--br-hub .brhb__tags li { padding: 7px 12px; border-radius: 999px; background: rgba(161, 0, 255, .2); color: #f0e2fb; font: 500 13px/1 var(--f-display); }
:root .sig--br-hub .brhb__name, :root .sig--br-hub .brhb__tags li { transition: opacity .3s, transform .5s var(--ease-out), filter .3s; }
:root .sig--br-hub .brhb__card.swap .brhb__name, :root .sig--br-hub .brhb__card.swap .brhb__tags li { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
:root .sig--br-hub .brhb__bar { display: block; height: 2px; margin-top: 18px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
:root .sig--br-hub .brhb__bar i { display: block; height: 100%; background: #e3b8ff; transform: scaleX(0); transform-origin: left; }
:root .sig--br-hub .brhb__bar i.go { animation: brhbBar 2.6s linear forwards; }
@keyframes brhbBar{ to { transform: scaleX(1); } }
@container (max-width: 560px){:root .sig--br-hub .brhb { grid-template-columns: 1fr; }
:root .sig--br-hub .brhb__orb { max-width: 300px; }
:root .sig--br-hub .brhb__name { min-height: 0; }

}
@media (prefers-reduced-motion: reduce){:root .sig--br-hub .brhb__lines circle, :root .sig--br-hub .brhb__tools, :root .sig--br-hub .brhb__tools i svg { animation: none; }
 }