/* FLUX hub: a dark console. Core with rotating rings, curved links, logo tiles, glowing signals. */
.flux-stage { width: 100%; min-width: 0; min-height: 0; }
.fx { position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 55%, transparent 100%); }
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.fx-sweep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(91, 134, 255, 0) 0deg, rgba(91, 134, 255, .16) 50deg, rgba(91, 134, 255, 0) 60deg);
  animation: fx-spin 7s linear infinite; }
.fx-orbit { fill: none; stroke: rgba(157, 180, 255, .14); stroke-width: 1; }
.fx-orbit--dash { stroke-dasharray: 2 7; stroke: rgba(157, 180, 255, .2); }

.fx-link { fill: none; stroke-width: 1.3; stroke-linecap: round; transition: stroke-width .3s ease, filter .3s ease; }
.fx-link.is-active { stroke: #7c9dff !important; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(91, 134, 255, .9)); }
.fx-xarm { stroke: #245bff; stroke-linecap: butt; }
.fx-flu { font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: -.06em; fill: #f2f5f3; }

.fx-signal .head { fill: #b9ccff; }
.fx-signal .t2 { fill: rgba(157, 180, 255, .55); }
.fx-signal .t3 { fill: rgba(157, 180, 255, .25); }
.fx-signal.is-back .head { fill: #7ee2a8; }
.fx-signal.is-back .t2 { fill: rgba(126, 226, 168, .5); }
.fx-signal.is-back .t3 { fill: rgba(126, 226, 168, .22); }

.fx-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #6d93ff, #245bff 55%, #1638c4); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 24px rgba(36, 91, 255, .75), 0 0 70px rgba(36, 91, 255, .35); }
.fx-hub b { position: relative; font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: .14em; }
.fx-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1px solid transparent;
  border-top-color: rgba(157, 180, 255, .9); border-right-color: rgba(157, 180, 255, .25); animation: fx-spin 3.2s linear infinite; }
.fx-ring--b { inset: -17px; border-top-color: transparent; border-bottom-color: rgba(157, 180, 255, .55); border-left-color: rgba(157, 180, 255, .15); animation-duration: 5.5s; animation-direction: reverse; }
@keyframes fx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx-ring { animation-name: fx-ring-spin; }
@keyframes fx-ring-spin { to { transform: rotate(360deg); } }

.fx-tool { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease, transform .3s ease; }
.fx-logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.fx-tool i { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 10.5px/1.2 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: .02em; color: #8c9a92; transition: color .3s ease; }
.fx-tool.is-active .fx-tile { transform: scale(1.08); box-shadow: 0 0 0 2px #5b86ff, 0 0 22px rgba(91, 134, 255, .8), 0 6px 18px rgba(0, 0, 0, .35); }
.fx-tool.is-active i { color: #c9d6ff; }
.fx-tool.is-hit .fx-tile { animation: fx-hit .5s ease; }
@keyframes fx-hit { 40% { box-shadow: 0 0 0 2px rgba(126, 226, 168, .9), 0 0 18px rgba(126, 226, 168, .6), 0 6px 18px rgba(0, 0, 0, .35); } }

.fx.is-compact .fx-tile { width: 34px; height: 34px; border-radius: 9px; }
.fx.is-compact .fx-logo { width: 19px; height: 19px; }
.fx.is-compact .fx-tool i { display: none; }
.fx.is-paused .fx-sweep, .fx.is-paused .fx-ring { animation-play-state: paused; }

.hero-term { margin-top: 14px; }
.hero-term .term-body { height: clamp(112px, 17vh, 168px); font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) {
  .fx-hub { width: 46px; height: 46px; }
  .fx-hub b { font-size: 9.5px; }
  .hero-term .term-body { height: 180px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-sweep, .fx-ring { animation: none; }
  .fx-tool.is-hit .fx-tile { animation: none; }
}