/* ==========================================================================
   brand-space-event · v6 — 沉浸动态版
   配色取自 www.yuqi-sh.com 线上主题 yuqi-v3（深墨蓝 / 蓝 #2f7cf6 / 青 #35c3d4）
   其余全部重做：全屏影像 + Ken Burns + 视差 + 跑马灯 + 滚动驱动，动效密度拉满。
   ========================================================================== */

[data-bx-root] {
  /* ---- 取自 www.yuqi-sh.com 主题变量 ---- */
  --bg:        #06101d;
  --bg-2:      #0a1727;
  --bg-3:      #071321;
  --card:      #0f1f32;
  --card-2:    #12253b;
  --text:      #f5f7fa;
  --text-2:    #aab6c5;
  --text-3:    #7e8b9b;
  --blue:      #2f7cf6;
  --blue-hi:   #4b8dff;
  --blue-deep: #1764d8;
  --cyan:      #35c3d4;
  --cyan-hi:   #38c7d9;
  --line:      rgba(255, 255, 255, 0.1);
  --line-2:    rgba(255, 255, 255, 0.18);

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --max: 1240px;
  --pad: clamp(20px, 4.5vw, 56px);
  --r: 6px;
  color-scheme: dark;
}

[data-bx-root] *, [data-bx-root] *::before, [data-bx-root] *::after { box-sizing: border-box; }

[data-bx-root] {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[data-bx-root] img { display: block; max-width: 100%; height: auto; }
[data-bx-root] a { color: inherit; text-decoration: none; }
[data-bx-root] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[data-bx-root] h1,[data-bx-root] h2,[data-bx-root] h3,[data-bx-root] h4,
[data-bx-root] p,[data-bx-root] figure,[data-bx-root] ul,[data-bx-root] ol { margin: 0; }
[data-bx-root] ul,[data-bx-root] ol { padding: 0; list-style: none; }

[data-bx-root] .bx-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

[data-bx-root] .bx-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   1 · 动效关键帧
   ========================================================================== */
@keyframes bx-kenburns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.17) translate3d(-1.6%, -1.2%, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}
@keyframes bx-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  33%      { transform: translate3d(5%, -4%, 0) scale(1.12); opacity: .8; }
  66%      { transform: translate3d(-4%, 5%, 0) scale(.94); opacity: .45; }
}
@keyframes bx-grid {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}
@keyframes bx-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes bx-sweep {
  0%   { transform: translate3d(-120%, 0, 0) skewX(-18deg); }
  100% { transform: translate3d(320%, 0, 0) skewX(-18deg); }
}
@keyframes bx-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.5); }
}
@keyframes bx-beam {
  0%   { transform: translate3d(-30%, 0, 0); opacity: 0; }
  25%  { opacity: .7; }
  75%  { opacity: .7; }
  100% { transform: translate3d(130%, 0, 0); opacity: 0; }
}
@keyframes bx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
@keyframes bx-spin { to { transform: rotate(360deg); } }

/* Ken Burns：所有 .bx-kb 容器内的图持续缓慢推拉 */
[data-bx-root] .bx-kb { overflow: hidden; }
[data-bx-root] .bx-kb img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
  animation: bx-kenburns var(--kb-dur, 26s) ease-in-out infinite alternate;
  animation-delay: var(--kb-delay, 0s);
}

/* ==========================================================================
   2 · 顶部滚动进度条
   ========================================================================== */
[data-bx-root] .bx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: rgba(255, 255, 255, .07);
}
[data-bx-root] .bx-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px rgba(53, 195, 212, .6);
}

/* ==========================================================================
   3 · 动态背景（光斑 + 网格）
   ========================================================================== */
[data-bx-root] .bx-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
[data-bx-root] .bx-aura__orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  animation: bx-drift var(--orb-dur, 26s) ease-in-out infinite;
  animation-delay: var(--orb-delay, 0s);
}
[data-bx-root] .bx-aura__grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(53, 195, 212, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 195, 212, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: bx-grid 14s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 72%);
}

/* ==========================================================================
   4 · HERO
   ========================================================================== */
[data-bx-root] .bx-hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: clamp(94px, 11vh, 132px) 0 clamp(38px, 5vh, 62px);
  overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, #0d2340 0%, var(--bg) 58%);
}
[data-bx-root] .bx-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  transform: translate3d(0, var(--px, 0px), 0) scale(1.08);
  will-change: transform;
}
[data-bx-root] .bx-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.3) saturate(.55) contrast(1.1);
  animation: bx-kenburns 34s ease-in-out infinite alternate;
}
[data-bx-root] .bx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,16,29,.96) 6%, rgba(6,16,29,.72) 46%, rgba(6,16,29,.5) 100%),
    radial-gradient(70% 60% at 88% 4%, rgba(47,124,246,.22), transparent 60%);
}
[data-bx-root] .bx-hero .bx-wrap { position: relative; z-index: 2; }

[data-bx-root] .bx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--cyan);
}
[data-bx-root] .bx-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--cyan); flex: none;
  animation: bx-pulse 2.6s ease-in-out infinite;
}

[data-bx-root] .bx-hero__title {
  margin-top: 24px;
  font-size: clamp(38px, 6.4vw, 84px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.02em;
  max-width: 18em;
}
[data-bx-root] .bx-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--blue-hi) 55%, var(--cyan) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bx-shine 7s linear infinite;
}
@keyframes bx-shine { to { background-position: 220% 0; } }

[data-bx-root] .bx-hero__sub {
  margin-top: 26px; max-width: 34em;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.85; color: var(--text-2);
}
[data-bx-root] .bx-hero__tags { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 38em; }
[data-bx-root] .bx-hero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }

[data-bx-root] .bx-chip {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 12.5px; color: var(--text-2);
  background: rgba(255,255,255,.02);
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
[data-bx-root] .bx-chip:hover {
  border-color: var(--cyan); color: var(--text);
  background: rgba(53,195,212,.12); transform: translateY(-2px);
}

[data-bx-root] .bx-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 12px 34px -12px rgba(47,124,246,.7);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
[data-bx-root] .bx-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: bx-sweep 4.5s ease-in-out infinite;
}
[data-bx-root] .bx-btn:hover {
  transform: translateY(-2px); background: var(--blue-hi);
  box-shadow: 0 18px 44px -12px rgba(47,124,246,.9);
}
[data-bx-root] .bx-btn__arrow { transition: transform .3s ease; }
[data-bx-root] .bx-btn:hover .bx-btn__arrow { transform: translateX(4px); }
[data-bx-root] .bx-btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); box-shadow: none;
}
[data-bx-root] .bx-btn--ghost::after { display: none; }
[data-bx-root] .bx-btn--ghost:hover {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(53,195,212,.1); box-shadow: none;
}

/* 数据条 */
[data-bx-root] .bx-facts {
  margin-top: clamp(36px, 4.4vw, 58px);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--line);
}
[data-bx-root] .bx-fact { padding: 20px 18px 22px; border-right: 1px solid var(--line); position: relative; overflow: hidden; }
[data-bx-root] .bx-fact:last-child { border-right: 0; }
[data-bx-root] .bx-fact::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform: translate3d(-100%,0,0);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
[data-bx-root] .bx-fact.in::before { transform: translate3d(0,0,0); }
[data-bx-root] .bx-fact__k {
  font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-bx-root] .bx-fact__k sup {
  margin-left: 4px; font-size: .3em; font-weight: 600; color: var(--cyan);
  -webkit-text-fill-color: var(--cyan);
}
[data-bx-root] .bx-fact__v { margin-top: 10px; font-size: 13px; color: var(--text-3); }

/* ==========================================================================
   5 · 跑马灯
   ========================================================================== */
[data-bx-root] .bx-ticker {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(47,124,246,.06), rgba(53,195,212,.06));
  padding: 14px 0;
}
[data-bx-root] .bx-ticker__track {
  display: flex; width: max-content;
  animation: bx-marquee var(--ticker-dur, 30s) linear infinite;
}
[data-bx-root] .bx-ticker:hover .bx-ticker__track { animation-play-state: paused; }
[data-bx-root] .bx-ticker__group { display: flex; flex: none; }
[data-bx-root] .bx-ticker__item {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 26px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-2);
}
[data-bx-root] .bx-ticker__item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}

/* ==========================================================================
   6 · 区块通用
   ========================================================================== */
[data-bx-root] .bx-sec { position: relative; padding: clamp(46px, 6vw, 84px) 0; overflow: hidden; }
[data-bx-root] .bx-sec__in { position: relative; z-index: 2; }

[data-bx-root] .bx-mast {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
[data-bx-root] .bx-mast__no {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--cyan);
  padding: 4px 10px; border: 1px solid rgba(53,195,212,.35); border-radius: 3px;
}
[data-bx-root] .bx-mast__name { font-size: 20px; font-weight: 600; letter-spacing: .01em; }
[data-bx-root] .bx-mast__rule { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
[data-bx-root] .bx-mast__rule::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: bx-beam 5s ease-in-out infinite;
}
[data-bx-root] .bx-mast__meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-3);
}

[data-bx-root] .bx-h2 {
  margin-top: clamp(28px, 3.4vw, 44px);
  font-size: clamp(28px, 4vw, 52px); font-weight: 700;
  line-height: 1.18; letter-spacing: -.015em; max-width: 22em;
}
[data-bx-root] .bx-h2 em {
  font-style: normal; position: relative; color: var(--cyan);
  white-space: nowrap;
}
[data-bx-root] .bx-h2 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s;
}
[data-bx-root] [data-rv].in .bx-h2 em::after,
[data-bx-root] .bx-h2 em.seen::after { transform: scaleX(1); }

[data-bx-root] .bx-lede {
  margin-top: 20px; max-width: 40em;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.85; color: var(--text-2);
}

/* ==========================================================================
   7 · 01 三条主线（全幅影像 + Ken Burns）
   ========================================================================== */
[data-bx-root] .bx-feat {
  margin-top: clamp(44px, 5vw, 68px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px, 3vw, 48px); align-items: stretch;
  position: relative;
}
[data-bx-root] .bx-feat--flip .bx-feat__media { order: -1; }

[data-bx-root] .bx-feat__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 2.4vw, 36px) 0;
}
[data-bx-root] .bx-feat__no {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 16px;
}
[data-bx-root] .bx-feat__no::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(53,195,212,.18);
  animation: bx-pulse 2.4s ease-in-out infinite;
}
[data-bx-root] .bx-feat__title {
  font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; line-height: 1.25;
}
[data-bx-root] .bx-feat__claim { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: var(--text-2); }
[data-bx-root] .bx-feat__tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }

[data-bx-root] .bx-feat__media {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}
[data-bx-root] .bx-feat__media img { filter: brightness(.86) saturate(.95) contrast(1.05); }
[data-bx-root] .bx-feat__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,29,.1) 0%, rgba(6,16,29,.62) 100%);
  pointer-events: none;
}
[data-bx-root] .bx-feat__cap {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-2);
}
[data-bx-root] .bx-feat__cap b { color: var(--cyan); font-weight: 500; }

/* ==========================================================================
   8 · 02 一体化交付
   ========================================================================== */
[data-bx-root] .bx-cmp {
  margin-top: clamp(40px, 4.5vw, 60px);
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--card);
}
[data-bx-root] .bx-cmp__col { padding: clamp(24px, 3vw, 38px); }
[data-bx-root] .bx-cmp__col + .bx-cmp__col { border-left: 1px solid var(--line); }
[data-bx-root] .bx-cmp__col--in {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(47,124,246,.18), transparent 62%),
    linear-gradient(180deg, rgba(53,195,212,.06), transparent 60%);
}
[data-bx-root] .bx-cmp__head { font-size: 19px; font-weight: 700; }
[data-bx-root] .bx-cmp__sub {
  margin-top: 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
}
[data-bx-root] .bx-cmp__col--in .bx-cmp__sub { color: var(--cyan); }
[data-bx-root] .bx-cmp__list { margin-top: 22px; }
[data-bx-root] .bx-cmp__list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--text-2);
  transition: color .3s ease, padding-left .3s ease;
}
[data-bx-root] .bx-cmp__col--in .bx-cmp__list li { color: var(--text); }
[data-bx-root] .bx-cmp__list li:hover { padding-left: 8px; color: var(--cyan); }
[data-bx-root] .bx-cmp__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  background: rgba(255,255,255,.06); font-family: var(--mono); font-size: 12px; color: var(--text-3);
}
[data-bx-root] .bx-cmp__col--in .bx-cmp__mark { background: var(--cyan); color: #05222a; }
[data-bx-root] .bx-cmp__note {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.8; color: var(--text-3);
}

[data-bx-root] .bx-rail { margin-top: clamp(52px, 6vw, 76px); position: relative; padding-top: 34px; }
[data-bx-root] .bx-rail__line { position: absolute; top: 50px; left: 0; right: 0; height: 2px; background: var(--line); overflow: hidden; }
[data-bx-root] .bx-rail__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 14px rgba(53,195,212,.6);
  transition: width .5s linear;
}
[data-bx-root] .bx-rail__row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
[data-bx-root] .bx-node { position: relative; padding-top: 30px; }
[data-bx-root] .bx-node::before {
  content: ""; position: absolute; top: 45px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .4s ease;
}
[data-bx-root] .bx-node.in::before {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(53,195,212,.18); transform: scale(1.15);
}
[data-bx-root] .bx-node__k { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--cyan); }
[data-bx-root] .bx-node__t { margin-top: 8px; font-size: 16px; font-weight: 600; }
[data-bx-root] .bx-node__d { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--text-3); }

/* ==========================================================================
   9 · 03 系统能力
   ========================================================================== */
[data-bx-root] .bx-sys {
  margin-top: clamp(40px, 4.5vw, 60px);
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(24px, 3vw, 48px); align-items: start;
}
[data-bx-root] .bx-sys__media {
  position: relative; margin: 0; aspect-ratio: 4/3;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
[data-bx-root] .bx-sys__media img { filter: brightness(.72) saturate(.8) contrast(1.08); }
[data-bx-root] .bx-sys__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(47,124,246,.16), transparent 55%),
              linear-gradient(0deg, rgba(6,16,29,.6), transparent 60%);
}
[data-bx-root] .bx-layers { display: grid; }
[data-bx-root] .bx-layer {
  padding: 20px 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 3em 1fr; gap: 14px; align-items: baseline;
  transition: padding-left .35s ease, border-color .35s ease;
}
[data-bx-root] .bx-layer:last-child { border-bottom: 1px solid var(--line); }
[data-bx-root] .bx-layer:hover { padding-left: 10px; border-color: rgba(53,195,212,.4); }
[data-bx-root] .bx-layer__k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--cyan); }
[data-bx-root] .bx-layer__t { font-size: 18px; font-weight: 600; }
[data-bx-root] .bx-layer__d { grid-column: 2; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }

/* ==========================================================================
   10 · 04 施工团队
   ========================================================================== */
[data-bx-root] .bx-crew {
  margin-top: clamp(40px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 22px);
}
[data-bx-root] .bx-shot { margin: 0; }
[data-bx-root] .bx-shot__photo {
  position: relative;
  margin: 0; aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
[data-bx-root] .bx-shot__photo img { filter: brightness(.84) saturate(.9) contrast(1.05); }
[data-bx-root] .bx-shot__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,16,29,.75), transparent 55%);
}
[data-bx-root] .bx-shot { position: relative; }
[data-bx-root] .bx-shot__no {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  padding: 4px 9px; border-radius: 3px;
  background: rgba(6,16,29,.66); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--cyan);
}
[data-bx-root] .bx-shot__cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; }
[data-bx-root] .bx-shot__t { font-size: 16px; font-weight: 600; }
[data-bx-root] .bx-shot__d { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }

/* ==========================================================================
   11 · 05 交付清单
   ========================================================================== */
[data-bx-root] .bx-bom { margin-top: clamp(36px, 4vw, 52px); }
[data-bx-root] .bx-bom table { width: 100%; border-collapse: collapse; }
[data-bx-root] .bx-bom thead th {
  padding: 13px 15px; border-bottom: 1.5px solid var(--line-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); text-align: left;
}
[data-bx-root] .bx-bom tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
[data-bx-root] .bx-bom tbody tr:hover { background: rgba(53,195,212,.05); }
[data-bx-root] .bx-bom td { padding: 14px 15px; font-size: 14.5px; color: var(--text-2); vertical-align: top; }
[data-bx-root] .bx-bom__no { font-family: var(--mono); font-size: 12.5px; color: var(--cyan); width: 4em; }
[data-bx-root] .bx-bom__item { font-weight: 600; color: var(--text); width: 14em; }
[data-bx-root] .bx-bom__phase { width: 8em; }
[data-bx-root] .bx-bom__phase span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
[data-bx-root] .bx-bom__phase span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px rgba(53,195,212,.8);
}
[data-bx-root] .bx-bom__chk { width: 4em; text-align: center; color: var(--line-2); }

/* ==========================================================================
   12 · 06 场景
   ========================================================================== */
[data-bx-root] .bx-scenes {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 24px);
}
[data-bx-root] .bx-scene {
  position: relative; display: block;
  aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
[data-bx-root] .bx-scene:hover {
  transform: translateY(-6px);
  border-color: rgba(53,195,212,.5);
  box-shadow: 0 22px 46px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(53,195,212,.2);
}
[data-bx-root] .bx-scene img { filter: brightness(.62) saturate(.85) contrast(1.06); transition: filter .4s ease; }
[data-bx-root] .bx-scene:hover img { filter: brightness(.82) saturate(1) contrast(1.08); }
[data-bx-root] .bx-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,29,.28) 0%, rgba(6,16,29,.82) 100%);
}
[data-bx-root] .bx-scene__no, [data-bx-root] .bx-scene__t { display: block; position: relative; z-index: 2; }
[data-bx-root] .bx-scene__no {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--cyan);
}
[data-bx-root] .bx-scene__t {
  position: absolute; left: 14px; right: 14px; bottom: 34px;
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 600;
}
[data-bx-root] .bx-scene__bar {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 16px;
  height: 2px; background: rgba(255,255,255,.14); overflow: hidden; border-radius: 2px;
}
[data-bx-root] .bx-scene__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .55s cubic-bezier(.2,.7,.2,1);
}
[data-bx-root] .bx-scene:hover .bx-scene__bar i { width: 100%; }

/* ==========================================================================
   13 · 07 流程
   ========================================================================== */
[data-bx-root] .bx-steps {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(20px, 3vw, 40px);
}
[data-bx-root] .bx-step {
  position: relative; padding: 24px 0 26px; border-top: 1px solid var(--line);
  transition: border-color .35s ease;
}
[data-bx-root] .bx-step:hover { border-color: rgba(53,195,212,.45); }
[data-bx-root] .bx-step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .7s cubic-bezier(.2,.7,.2,1);
}
[data-bx-root] .bx-step.in::before { width: 100%; }
[data-bx-root] .bx-step__k { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--cyan); }
[data-bx-root] .bx-step__t { margin-top: 10px; font-size: 18px; font-weight: 600; }
[data-bx-root] .bx-step__d { margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: var(--text-3); }

/* ==========================================================================
   14 · 08 FAQ
   ========================================================================== */
[data-bx-root] .bx-faq { margin-top: clamp(32px, 3.6vw, 48px); border-top: 1px solid var(--line); }
[data-bx-root] .bx-faq__item { border-bottom: 1px solid var(--line); }
[data-bx-root] .bx-faq__q {
  width: 100%; display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 0; text-align: left;
  transition: color .3s ease, padding-left .3s ease;
}
[data-bx-root] .bx-faq__q:hover { color: var(--cyan); padding-left: 6px; }
[data-bx-root] .bx-faq__n { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; color: var(--cyan); flex: none; padding-top: 3px; }
[data-bx-root] .bx-faq__qt { flex: 1; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; line-height: 1.5; }
[data-bx-root] .bx-faq__sign { position: relative; width: 15px; height: 15px; flex: none; margin-top: 8px; }
[data-bx-root] .bx-faq__sign::before, [data-bx-root] .bx-faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--text-3);
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
[data-bx-root] .bx-faq__sign::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
[data-bx-root] .bx-faq__sign::after { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }
[data-bx-root] .bx-faq__item.open .bx-faq__sign::before { background: var(--cyan); }
[data-bx-root] .bx-faq__item.open .bx-faq__sign::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
[data-bx-root] .bx-faq__a { overflow: hidden; transition: height .35s cubic-bezier(.2,.7,.2,1); }
[data-bx-root] .bx-faq__a-in { padding: 0 0 26px 44px; font-size: 15px; line-height: 1.9; color: var(--text-2); max-width: 62em; }
[data-bx-root] .bx-faq__a-in b { font-weight: 600; color: var(--text); }

/* ==========================================================================
   15 · CTA
   ========================================================================== */
[data-bx-root] .bx-cta {
  position: relative; overflow: hidden;
  padding: clamp(52px, 6.5vw, 92px) 0;
}
[data-bx-root] .bx-cta__bg { position: absolute; inset: 0; z-index: 0; }
[data-bx-root] .bx-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.28) saturate(.5) contrast(1.1);
  animation: bx-kenburns 40s ease-in-out infinite alternate;
}
[data-bx-root] .bx-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(6,16,29,.95) 0%, rgba(6,16,29,.7) 52%, rgba(6,16,29,.5) 100%),
              radial-gradient(60% 60% at 92% 0%, rgba(53,195,212,.2), transparent 60%);
}
[data-bx-root] .bx-cta .bx-wrap { position: relative; z-index: 2; }
[data-bx-root] .bx-cta__title {
  margin-top: 20px; font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 700; line-height: 1.18; max-width: 22em;
}
[data-bx-root] .bx-cta__sub { margin-top: 20px; max-width: 34em; font-size: clamp(15px,1.3vw,18px); line-height: 1.85; color: var(--text-2); }
[data-bx-root] .bx-cta__row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   16 · Reveal / 视差
   ========================================================================== */
[data-bx-root].bx-js [data-rv] {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-bx-root].bx-js [data-rv="1"] { transition-delay: .07s; }
[data-bx-root].bx-js [data-rv="2"] { transition-delay: .14s; }
[data-bx-root].bx-js [data-rv="3"] { transition-delay: .21s; }
[data-bx-root].bx-js [data-rv="4"] { transition-delay: .28s; }
[data-bx-root].bx-js [data-rv].in { opacity: 1; transform: none; }

[data-bx-root] [data-bx-parallax] { will-change: transform; }

/* ==========================================================================
   17 · Shell
   ========================================================================== */
.bx-shell {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 16, 29, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bx-shell__in { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 32px; }
.bx-shell__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: var(--text); }
.bx-shell__brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.bx-shell__nav { display: flex; gap: 28px; margin-left: auto; }
.bx-shell__nav a { font-size: 13.5px; color: var(--text-2); transition: color .25s ease; }
.bx-shell__nav a:hover { color: var(--cyan); }
.bx-shell__cta {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 600;
  transition: background .25s ease, transform .25s ease;
}
.bx-shell__cta:hover { background: var(--blue-hi); transform: translateY(-1px); }
.bx-shell-foot { border-top: 1px solid var(--line); background: var(--bg-2); padding: 28px 0; }
.bx-shell-foot__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}

/* ==========================================================================
   18 · Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  [data-bx-root] .bx-feat { grid-template-columns: 1fr; }
  [data-bx-root] .bx-feat--flip .bx-feat__media { order: 0; }
  [data-bx-root] .bx-sys { grid-template-columns: 1fr; }
  [data-bx-root] .bx-cmp { grid-template-columns: 1fr; }
  [data-bx-root] .bx-cmp__col + .bx-cmp__col { border-left: 0; border-top: 1px solid var(--line); }
  [data-bx-root] .bx-rail__row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  [data-bx-root] .bx-rail__line { display: none; }
  [data-bx-root] .bx-node { padding-top: 0; }
  [data-bx-root] .bx-node::before { display: none; }
  [data-bx-root] .bx-crew { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-bx-root] .bx-scenes { grid-template-columns: repeat(3, minmax(0,1fr)); }
  [data-bx-root] .bx-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-bx-root] .bx-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-bx-root] .bx-fact:nth-child(2) { border-right: 0; }
  [data-bx-root] .bx-fact:nth-child(1), [data-bx-root] .bx-fact:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  [data-bx-root] .bx-hero { min-height: auto; }
  [data-bx-root] .bx-facts { grid-template-columns: 1fr; }
  [data-bx-root] .bx-fact { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
  [data-bx-root] .bx-fact:last-child { border-bottom: 0; }
  [data-bx-root] .bx-crew { grid-template-columns: 1fr; }
  [data-bx-root] .bx-shot__photo { aspect-ratio: 16/10; }
  [data-bx-root] .bx-scenes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-bx-root] .bx-steps { grid-template-columns: 1fr; }
  [data-bx-root] .bx-rail__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-bx-root] .bx-bom { overflow-x: auto; }
  [data-bx-root] .bx-bom table { min-width: 660px; }
  [data-bx-root] .bx-mast { flex-wrap: wrap; gap: 10px 14px; }
  [data-bx-root] .bx-mast__meta { display: none; }
  .bx-shell__nav { display: none; }
}
@media (max-width: 460px) {
  [data-bx-root] .bx-scenes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18b · 动图模块：扫描光带 / 主控舱 / 拓扑 / 分层栈 / 流程流水线
   ========================================================================== */

/* ------------------------------------------------ 全局：图片扫描光带 */
@keyframes bx-scan {
  0%   { transform: translateX(-110%); }
  48%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
[data-bx-root] .bx-kb { position: relative; }
[data-bx-root] .bx-kb::before {
  content: ""; position: absolute; inset: -25% 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 45%,
    rgba(255, 255, 255, .05) 48.5%,
    rgba(53, 195, 212, .11) 51%,
    rgba(255, 255, 255, .05) 53.5%,
    transparent 57%);
  animation: bx-scan var(--scan-dur, 7.5s) ease-in-out infinite;
  animation-delay: var(--scan-delay, 0s);
}

/* ------------------------------------------------ 主控舱 OPS */
[data-bx-root] .bx-ops {
  position: relative; overflow: hidden;
  margin-top: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(165deg, #0b1c30 0%, #071321 62%, #06101d 100%);
}
[data-bx-root] .bx-ops::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from 0deg, transparent 0 68%, var(--cyan) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bx-spin 7s linear infinite;
  opacity: .85;
}
[data-bx-root] .bx-ops__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--text-3); text-transform: uppercase;
}
[data-bx-root] .bx-ops__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan); animation: bx-pulse 1.8s ease-in-out infinite;
}
[data-bx-root] .bx-ops__id { margin-left: auto; color: var(--cyan); }
[data-bx-root] .bx-ops__grid {
  display: grid; grid-template-columns: 1.25fr 1fr .8fr .95fr;
}
[data-bx-root] .bx-ops__cell {
  padding: 16px; border-right: 1px solid var(--line); min-width: 0;
}
[data-bx-root] .bx-ops__cell:last-child { border-right: 0; }
[data-bx-root] .bx-ops__lb {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; color: var(--text-3); text-transform: uppercase;
  margin-bottom: 12px;
}

/* LED 点阵 */
[data-bx-root] .bx-leds { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
[data-bx-root] .bx-leds span {
  aspect-ratio: 1; border-radius: 1px; background: rgba(53, 195, 212, .09);
  animation: bx-led 2.9s ease-in-out infinite;
}
@keyframes bx-led {
  0%, 100% { background: rgba(53, 195, 212, .08); }
  50%      { background: rgba(53, 195, 212, .8); box-shadow: 0 0 7px rgba(53, 195, 212, .55); }
}
[data-bx-root] .bx-leds span:nth-child(7n+1) { animation-delay: 0s; }
[data-bx-root] .bx-leds span:nth-child(7n+2) { animation-delay: .42s; }
[data-bx-root] .bx-leds span:nth-child(7n+3) { animation-delay: .84s; }
[data-bx-root] .bx-leds span:nth-child(7n+4) { animation-delay: 1.26s; }
[data-bx-root] .bx-leds span:nth-child(7n+5) { animation-delay: 1.68s; }
[data-bx-root] .bx-leds span:nth-child(7n+6) { animation-delay: 2.1s; }
[data-bx-root] .bx-leds span:nth-child(7n+7) { animation-delay: 2.52s; }

/* 音频波形 */
[data-bx-root] .bx-wave { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
[data-bx-root] .bx-wave span {
  flex: 1 1 0; min-width: 0; height: var(--h, 50%); border-radius: 1px;
  transform-origin: bottom center;
  background: linear-gradient(to top, var(--blue-deep), var(--cyan));
  animation: bx-wav 1.1s ease-in-out infinite alternate;
}
@keyframes bx-wav { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
[data-bx-root] .bx-wave span:nth-child(6n+1) { animation-delay: 0s; }
[data-bx-root] .bx-wave span:nth-child(6n+2) { animation-delay: .19s; }
[data-bx-root] .bx-wave span:nth-child(6n+3) { animation-delay: .38s; }
[data-bx-root] .bx-wave span:nth-child(6n+4) { animation-delay: .57s; }
[data-bx-root] .bx-wave span:nth-child(6n+5) { animation-delay: .76s; }
[data-bx-root] .bx-wave span:nth-child(6n+6) { animation-delay: .95s; }

/* 雷达 */
[data-bx-root] .bx-radar {
  position: relative; width: 100%; max-width: 132px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(53, 195, 212, .28);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(53, 195, 212, .10) 22px 23px),
    radial-gradient(circle at 50% 50%, rgba(47, 124, 246, .16), transparent 72%);
}
[data-bx-root] .bx-radar::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 49.6%, rgba(53, 195, 212, .22) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(to right, transparent 49.6%, rgba(53, 195, 212, .22) 49.6% 50.4%, transparent 50.4%);
}
[data-bx-root] .bx-radar::after {
  content: ""; position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, rgba(53, 195, 212, .42), rgba(53, 195, 212, .06) 46deg, transparent 62deg);
  animation: bx-spin 3.2s linear infinite;
}
[data-bx-root] .bx-radar__blip {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: bx-blip 3.2s ease-out infinite;
}
[data-bx-root] .bx-radar__blip.b1 { top: 30%; left: 62%; }
[data-bx-root] .bx-radar__blip.b2 { top: 64%; left: 38%; animation-delay: 1.4s; }
[data-bx-root] .bx-radar__blip.b3 { top: 48%; left: 24%; animation-delay: 2.3s; }
@keyframes bx-blip {
  0%, 70% { opacity: 0; transform: scale(.5); }
  78%     { opacity: 1; transform: scale(1.4); }
  100%    { opacity: 0; transform: scale(1); }
}

/* 读数 */
[data-bx-root] .bx-read { margin: 0; display: grid; gap: 9px; }
[data-bx-root] .bx-read > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 7px; border-bottom: 1px dashed rgba(255, 255, 255, .09);
}
[data-bx-root] .bx-read > div:last-child { border-bottom: 0; padding-bottom: 0; }
[data-bx-root] .bx-read dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--text-3); text-transform: uppercase;
}
[data-bx-root] .bx-read dd {
  margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
[data-bx-root] .bx-read dd small { font-size: 10px; color: var(--text-3); margin-left: 3px; }

/* 日志 */
[data-bx-root] .bx-ops__log {
  height: 84px; overflow: hidden; position: relative;
  border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
[data-bx-root] .bx-ops__log ul { margin: 0; padding: 0; list-style: none; animation: bx-logup 22s linear infinite; }
@keyframes bx-logup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
[data-bx-root] .bx-ops__log li {
  display: flex; gap: 10px; padding: 5px 16px;
  font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap;
}
[data-bx-root] .bx-ops__log li b { color: var(--cyan); font-weight: 500; }
[data-bx-root] .bx-ops__log li em { font-style: normal; color: var(--text-2); }

/* ------------------------------------------------ 拓扑对照 TOPO */
[data-bx-root] .bx-topo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--card);
}
[data-bx-root] .bx-topo__col { padding: 20px 20px 8px; min-width: 0; }
[data-bx-root] .bx-topo__col + .bx-topo__col { border-left: 1px solid var(--line); }
[data-bx-root] .bx-topo__hd {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}
[data-bx-root] .bx-topo__hd b {
  display: block; margin-top: 6px; font-family: var(--sans);
  font-size: 19px; font-weight: 700; letter-spacing: 0; color: var(--text);
}
[data-bx-root] .bx-topo__col--in .bx-topo__hd b { color: var(--cyan); }
[data-bx-root] .bx-topo svg { display: block; width: 100%; height: auto; margin-top: 6px; }
[data-bx-root] .bx-topo__note {
  margin: 2px 0 0; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--text-3);
}
[data-bx-root] .bx-topo__col--in .bx-topo__note { color: var(--cyan); }

/* ------------------------------------------------ 通栏图带 BAND */
[data-bx-root] .bx-band { position: relative; }
[data-bx-root] .bx-band__media {
  position: relative; overflow: hidden;
  height: clamp(240px, 38vw, 480px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
[data-bx-root] .bx-band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.5) saturate(.8) contrast(1.08);
}

/* ------------------------------------------------ 图片条 STRIP */
[data-bx-root] .bx-strip {
  display: grid; gap: 14px; margin-top: clamp(22px, 2.6vw, 34px);
}
[data-bx-root] .bx-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-bx-root] .bx-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-bx-root] .bx-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-bx-root] .bx-strip figure { margin: 0; }
[data-bx-root] .bx-strip__ph {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 4/3; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
}
[data-bx-root] .bx-strip__ph img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.78) saturate(.9) contrast(1.05);
}
[data-bx-root] .bx-strip figcaption {
  margin-top: 9px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--text-3); text-transform: uppercase;
}
@media (max-width: 720px) {
  [data-bx-root] .bx-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-bx-root] .bx-strip--2 { grid-template-columns: 1fr; }
}

[data-bx-root] .tp-hub { fill: rgba(53, 195, 212, .16); stroke: var(--cyan); stroke-width: 1.2; }
[data-bx-root] .tp-hub-core { fill: var(--cyan); animation: bx-pulse 2.4s ease-in-out infinite; }
[data-bx-root] .tp-node { fill: var(--card-2); stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
[data-bx-root] .tp-node-lit { fill: rgba(53, 195, 212, .2); stroke: var(--cyan); stroke-width: 1.4; }
[data-bx-root] .tp-link {
  fill: none; stroke: var(--cyan); stroke-width: 1.4;
  stroke-dasharray: 5 9; opacity: .85;
  animation: bx-flow 1.1s linear infinite;
}
@keyframes bx-flow { to { stroke-dashoffset: -14; } }
[data-bx-root] .tp-dead {
  fill: none; stroke: rgba(232, 122, 122, .45); stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
[data-bx-root] .tp-x {
  stroke: #e87a7a; stroke-width: 1.8; stroke-linecap: round;
  animation: bx-xflick 2.6s ease-in-out infinite;
}
@keyframes bx-xflick { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
[data-bx-root] .tp-void {
  fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1;
  stroke-dasharray: 3 7;
}
[data-bx-root] .tp-lb {
  font-family: var(--mono); font-size: 10.5px; fill: var(--text-3); letter-spacing: .06em;
}
[data-bx-root] .tp-lb-lit { fill: var(--cyan); }

/* 图例 */
[data-bx-root] .bx-topo__legend {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px;
}
[data-bx-root] .bx-topo__legend span {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 12px; color: var(--text-2);
}

/* ------------------------------------------------ 分层栈 STACK */
[data-bx-root] .bx-stack {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px;
  margin-top: clamp(28px, 3.4vw, 46px);
}
[data-bx-root] .bx-stack__item {
  position: relative; padding: 20px 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); overflow: hidden;
}
[data-bx-root] .bx-stack__item::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0); transform-origin: left;
}
[data-bx-root] .bx-stack__item.in::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
[data-bx-root] .bx-stack__item:not(:last-child)::before {
  content: ""; position: absolute; top: 50%; right: -22px;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 9px rgba(53, 195, 212, .85);
  animation: bx-rundot 2.6s linear infinite;
}
@keyframes bx-rundot {
  0%   { transform: translateX(0); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(38px); opacity: 0; }
}
[data-bx-root] .bx-stack__rail {
  position: absolute; top: 50%; right: -34px; width: 34px; height: 1px;
  background: var(--line-2);
}
[data-bx-root] .bx-stack__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--cyan);
}
[data-bx-root] .bx-stack__ico {
  display: block; margin: 12px 0 14px;
  fill: none; stroke: var(--cyan); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-bx-root] .bx-stack__t { font-size: 16px; font-weight: 600; }
[data-bx-root] .bx-stack__d { margin-top: 7px; font-size: 12.5px; line-height: 1.65; color: var(--text-3); }

/* 数据流带 */
[data-bx-root] .bx-flux {
  position: relative; height: 40px; margin-top: 26px; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
[data-bx-root] .bx-flux i {
  position: absolute; top: 50%; left: -1%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(53, 195, 212, .8);
  animation: bx-fluxmove 3.4s linear infinite;
}
@keyframes bx-fluxmove {
  0%   { left: -1%; opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ------------------------------------------------ 流程流水线 PIPE */
@keyframes bx-comet {
  0%    { transform: translateX(0); opacity: 0; }
  3%    { opacity: 1; }
  88.9% { transform: translateX(1040px); opacity: 1; }
  95%   { opacity: 0; }
  100%  { transform: translateX(1040px); opacity: 0; }
}
@keyframes bx-halo {
  0%   { transform: scale(.7); opacity: .95; }
  12%  { transform: scale(1.95); opacity: 0; }
  100% { transform: scale(1.95); opacity: 0; }
}
@keyframes bx-numlit {
  0%   { fill: var(--cyan); }
  13%  { fill: var(--text-2); }
  100% { fill: var(--text-2); }
}
@keyframes bx-st0 { 0%, 32% { opacity: 1; } 36%, 100% { opacity: .13; } }
@keyframes bx-st1 { 0%, 32% { opacity: .13; } 34%, 54% { opacity: 1; } 58%, 100% { opacity: .13; } }
@keyframes bx-st2 { 0%, 54% { opacity: .13; } 56%, 76% { opacity: 1; } 80%, 100% { opacity: .13; } }
@keyframes bx-st3 { 0%, 76% { opacity: .13; } 78%, 87% { opacity: 1; } 90%, 100% { opacity: .13; } }
@keyframes bx-st4 { 0%, 87% { opacity: .13; } 89%, 99% { opacity: 1; } 100% { opacity: .13; } }

[data-bx-root] .bx-pipe {
  margin-top: clamp(28px, 3.4vw, 46px);
  padding: clamp(16px, 2vw, 26px) clamp(12px, 2vw, 24px);
  border: 1px solid var(--line); border-radius: var(--r);
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(47, 124, 246, .10), transparent 60%),
    var(--card);
}
[data-bx-root] .bx-pipe svg { display: block; width: 100%; height: auto; overflow: visible; }

[data-bx-root] .pp-track { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 1; }
[data-bx-root] .pp-flow {
  fill: none; stroke: var(--cyan); stroke-width: 1.6;
  stroke-dasharray: 5 9; animation: bx-flow .95s linear infinite;
}
[data-bx-root] .pp-node {
  fill: var(--card-2); stroke: rgba(255, 255, 255, .2); stroke-width: 1.2;
  transition: stroke .3s ease;
}
[data-bx-root] .pp-halo {
  fill: rgba(53, 195, 212, .16); stroke: var(--cyan); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: bx-halo 9s linear infinite;
  animation-delay: calc(var(--i) * 1s);
}
[data-bx-root] .pp-num {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  text-anchor: middle; fill: var(--text-2);
  animation: bx-numlit 9s linear infinite;
  animation-delay: calc(var(--i) * 1s);
}
[data-bx-root] .pp-lb {
  font-size: 12px; text-anchor: middle; fill: var(--text-3);
}
[data-bx-root] .pp-comet { animation: bx-comet 9s linear infinite; }
[data-bx-root] .pp-comet circle { fill: var(--cyan); }
[data-bx-root] .pp-comet circle:first-child { fill: rgba(53, 195, 212, .28); }
[data-bx-root] .pp-stbase { fill: rgba(255, 255, 255, .05); }
[data-bx-root] .pp-stlit { fill: rgba(53, 195, 212, .9); animation: bx-st0 9s linear infinite; }
[data-bx-root] .pp-stlit.s1 { animation-name: bx-st1; }
[data-bx-root] .pp-stlit.s2 { animation-name: bx-st2; }
[data-bx-root] .pp-stlit.s3 { animation-name: bx-st3; }
[data-bx-root] .pp-stlit.s4 { animation-name: bx-st4; }
[data-bx-root] .pp-sttx {
  font-family: var(--mono); font-size: 11px; text-anchor: middle;
  fill: var(--text); letter-spacing: .1em;
}
[data-bx-root] .bx-pipe__legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3);
}
[data-bx-root] .bx-pipe__legend b { color: var(--text-2); font-weight: 600; }

/* ------------------------------------------------ 动图模块响应式 */
@media (max-width: 1080px) {
  [data-bx-root] .bx-ops__grid { grid-template-columns: 1fr 1fr; }
  [data-bx-root] .bx-ops__cell:nth-child(2) { border-right: 0; }
  [data-bx-root] .bx-ops__cell:nth-child(1),
  [data-bx-root] .bx-ops__cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  [data-bx-root] .bx-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; }
  [data-bx-root] .bx-stack__item:nth-child(2)::before,
  [data-bx-root] .bx-stack__item:nth-child(2) .bx-stack__rail { display: none; }
}
@media (max-width: 860px) {
  [data-bx-root] .bx-topo { grid-template-columns: 1fr; }
  [data-bx-root] .bx-topo__col + .bx-topo__col { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  [data-bx-root] .bx-ops__grid { grid-template-columns: 1fr; }
  [data-bx-root] .bx-ops__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  [data-bx-root] .bx-stack { grid-template-columns: 1fr; gap: 18px; }
  [data-bx-root] .bx-stack__item::before,
  [data-bx-root] .bx-stack__rail { display: none; }
  [data-bx-root] .bx-pipe { padding: 14px 8px; }
  [data-bx-root] .bx-pipe__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-bx-root] .bx-pipe__scroll svg { min-width: 940px; }
}

/* ==========================================================================
   18c · 离屏暂停：不在视口内的模块整体冻结动画，省 CPU / 省电
   （208 个并发动画如果全部常驻，移动端会明显发热掉帧）
   ========================================================================== */
[data-bx-root] .is-idle,
[data-bx-root] .is-idle *,
[data-bx-root] .is-idle::before,
[data-bx-root] .is-idle::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   19 · 降低动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-bx-root] *, [data-bx-root] *::before, [data-bx-root] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-bx-root].bx-js [data-rv], [data-bx-root].bx-js [data-rv].in {
    opacity: 1 !important; transform: none !important;
  }
}

/* v6 inline declarations moved out of markup for CSP-safe delivery. */
[data-bx-root] [data-bx-inline="bx-inline-04d526ac6e"] {--kb-dur:25s;--scan-dur:7.5s}
[data-bx-root] [data-bx-inline="bx-inline-057c01bc80"] {animation-delay:2.38s}
[data-bx-root] [data-bx-inline="bx-inline-0804674144"] {--kb-dur:24s}
[data-bx-root] [data-bx-inline="bx-inline-0a03c8d923"] {--h:82%}
[data-bx-root] [data-bx-inline="bx-inline-0ed86367b3"] {--kb-dur:28s;--kb-delay:-9s}
[data-bx-root] [data-bx-inline="bx-inline-105be3622f"] {animation-delay:1.02s}
[data-bx-root] [data-bx-inline="bx-inline-10e6c10adc"] {--h:44%}
[data-bx-root] [data-bx-inline="bx-inline-11c6460fb4"] {--i:0}
[data-bx-root] [data-bx-inline="bx-inline-125fcd22d6"] {--kb-dur:25s;--kb-delay:-18s}
[data-bx-root] [data-bx-inline="bx-inline-13af0533b2"] {--h:50%}
[data-bx-root] [data-bx-inline="bx-inline-16464751ae"] {--i:6}
[data-bx-root] [data-bx-inline="bx-inline-1740323d79"] {--h:90%}
[data-bx-root] [data-bx-inline="bx-inline-1927119f09"] {animation-delay:1.2s}
[data-bx-root] [data-bx-inline="bx-inline-1e3f7c4786"] {--h:56%}
[data-bx-root] [data-bx-inline="bx-inline-21efe555cb"] {animation-delay:2.72s}
[data-bx-root] [data-bx-inline="bx-inline-2702b876c9"] {--kb-dur:29s;--kb-delay:-21s}
[data-bx-root] [data-bx-inline="bx-inline-2b36a67a9a"] {--i:5}
[data-bx-root] [data-bx-inline="bx-inline-2b52cb7047"] {--kb-dur:25s;--kb-delay:-8s}
[data-bx-root] [data-bx-inline="bx-inline-2d46a1c247"] {--h:96%}
[data-bx-root] [data-bx-inline="bx-inline-2d506ec7ac"] {animation-delay:1.36s}
[data-bx-root] [data-bx-inline="bx-inline-301cc004e0"] {animation-delay:3.06s}
[data-bx-root] [data-bx-inline="bx-inline-3502b8e50e"] {--kb-dur:26s;--kb-delay:-9s}
[data-bx-root] [data-bx-inline="bx-inline-3b89ff79e2"] {--kb-dur:31s;--kb-delay:-15s;--scan-dur:9.5s;--scan-delay:3s}
[data-bx-root] [data-bx-inline="bx-inline-3d612c25b0"] {animation-delay:0s}
[data-bx-root] [data-bx-inline="bx-inline-3d69f2706d"] {--h:60%}
[data-bx-root] [data-bx-inline="bx-inline-4016582455"] {background:var(--bg-2)}
[data-bx-root] [data-bx-inline="bx-inline-471e3120c9"] {animation-delay:2s}
[data-bx-root] [data-bx-inline="bx-inline-49037486f8"] {width:380px;height:380px;top:6%;left:-6%;background:rgba(53,195,212,.16);--orb-dur:28s}
[data-bx-root] [data-bx-inline="bx-inline-4c187eeb3b"] {--i:7}
[data-bx-root] [data-bx-inline="bx-inline-5102d50f96"] {--kb-dur:29s;--kb-delay:-12s;--scan-dur:9s;--scan-delay:2.4s}
[data-bx-root] [data-bx-inline="bx-inline-55eb36a92f"] {width:320px;height:320px;bottom:4%;left:-4%;background:rgba(53,195,212,.22);--orb-dur:30s;--orb-delay:-6s}
[data-bx-root] [data-bx-inline="bx-inline-5f103400dd"] {--h:72%}
[data-bx-root] [data-bx-inline="bx-inline-613a064b28"] {--kb-dur:29s;--kb-delay:-12s}
[data-bx-root] [data-bx-inline="bx-inline-6505876988"] {--i:8}
[data-bx-root] [data-bx-inline="bx-inline-65d1567175"] {--kb-dur:24s;--kb-delay:-6s}
[data-bx-root] [data-bx-inline="bx-inline-66f7b1eef3"] {--ticker-dur:34s}
[data-bx-root] [data-bx-inline="bx-inline-6edc4880b2"] {--h:34%}
[data-bx-root] [data-bx-inline="bx-inline-7186f351ef"] {--h:92%}
[data-bx-root] [data-bx-inline="bx-inline-7686bddf3d"] {animation-delay:.4s}
[data-bx-root] [data-bx-inline="bx-inline-78ceed64ac"] {--kb-dur:27s;--kb-delay:-15s}
[data-bx-root] [data-bx-inline="bx-inline-797f14cb91"] {animation-delay:.34s}
[data-bx-root] [data-bx-inline="bx-inline-7a30f66d27"] {--kb-dur:27s;--kb-delay:-4s}
[data-bx-root] [data-bx-inline="bx-inline-7e401b53b6"] {--h:80%}
[data-bx-root] [data-bx-inline="bx-inline-7f4ef95f25"] {--h:42%}
[data-bx-root] [data-bx-inline="bx-inline-7f5667e162"] {animation-delay:.18s}
[data-bx-root] [data-bx-inline="bx-inline-8e390cd397"] {--i:2}
[data-bx-root] [data-bx-inline="bx-inline-8ec0425e50"] {--h:74%}
[data-bx-root] [data-bx-inline="bx-inline-953511acba"] {animation-delay:1.6s}
[data-bx-root] [data-bx-inline="bx-inline-969ac3bec2"] {--h:68%}
[data-bx-root] [data-bx-inline="bx-inline-9918e7e483"] {--i:1}
[data-bx-root] [data-bx-inline="bx-inline-9a5f9a6f5b"] {animation-delay:.68s}
[data-bx-root] [data-bx-inline="bx-inline-9f39031440"] {--kb-dur:26s;--kb-delay:-3s}
[data-bx-root] [data-bx-inline="bx-inline-a451dc554e"] {--kb-dur:26s;--kb-delay:-10s}
[data-bx-root] [data-bx-inline="bx-inline-a5f8ecb7b9"] {--h:38%}
[data-bx-root] [data-bx-inline="bx-inline-a97a071e73"] {--kb-dur:22s}
[data-bx-root] [data-bx-inline="bx-inline-aaf26f9ba8"] {animation-delay:.8s}
[data-bx-root] [data-bx-inline="bx-inline-af69a61299"] {--kb-dur:24s;--kb-delay:-13s}
[data-bx-root] [data-bx-inline="bx-inline-aff001acc8"] {--kb-dur:24s;--kb-delay:-6s;--scan-dur:7s;--scan-delay:1.2s}
[data-bx-root] [data-bx-inline="bx-inline-b17ba99e57"] {--h:52%}
[data-bx-root] [data-bx-inline="bx-inline-b36ea956b0"] {--kb-dur:26s;--scan-dur:8.5s}
[data-bx-root] [data-bx-inline="bx-inline-b4f5d4a9a2"] {--h:58%}
[data-bx-root] [data-bx-inline="bx-inline-b6bcfa4791"] {--h:40%}
[data-bx-root] [data-bx-inline="bx-inline-bdc0e1c72f"] {--h:62%}
[data-bx-root] [data-bx-inline="bx-inline-be66959f5d"] {--kb-dur:21s;--kb-delay:-4s}
[data-bx-root] [data-bx-inline="bx-inline-c3e3bf9ad3"] {--kb-dur:28s;--kb-delay:-5s;--scan-dur:8.5s;--scan-delay:1s}
[data-bx-root] [data-bx-inline="bx-inline-cadba21ab8"] {--h:78%}
[data-bx-root] [data-bx-inline="bx-inline-ceeed0fa72"] {--kb-dur:32s;--scan-dur:9s}
[data-bx-root] [data-bx-inline="bx-inline-cf66ca12e8"] {--ticker-dur:40s}
[data-bx-root] [data-bx-inline="bx-inline-cfa8234305"] {animation-delay:.54s}
[data-bx-root] [data-bx-inline="bx-inline-d09643c13e"] {--i:4}
[data-bx-root] [data-bx-inline="bx-inline-d46e51c284"] {animation-delay:.9s}
[data-bx-root] [data-bx-inline="bx-inline-d6f80e9d8e"] {--kb-dur:23s;--kb-delay:-10s;--scan-dur:6.8s;--scan-delay:2s}
[data-bx-root] [data-bx-inline="bx-inline-d7bb197cb2"] {--kb-dur:30s;--kb-delay:-5s}
[data-bx-root] [data-bx-inline="bx-inline-d8ba5db7b1"] {animation-delay:.36s}
[data-bx-root] [data-bx-inline="bx-inline-d90158ab7a"] {--h:46%}
[data-bx-root] [data-bx-inline="bx-inline-d970689407"] {--kb-dur:30s;--kb-delay:-7s}
[data-bx-root] [data-bx-inline="bx-inline-dab0d2285d"] {animation-delay:1.7s}
[data-bx-root] [data-bx-inline="bx-inline-daf26748ca"] {animation-delay:2.04s}
[data-bx-root] [data-bx-inline="bx-inline-dcd28d9071"] {--h:48%}
[data-bx-root] [data-bx-inline="bx-inline-dec05ee8c0"] {--h:36%}
[data-bx-root] [data-bx-inline="bx-inline-e24b55985b"] {--h:98%}
[data-bx-root] [data-bx-inline="bx-inline-e3426d857d"] {--kb-dur:23s}
[data-bx-root] [data-bx-inline="bx-inline-e4664e593c"] {--kb-dur:23s;--kb-delay:-12s}
[data-bx-root] [data-bx-inline="bx-inline-e5e78e1fec"] {width:460px;height:460px;top:10%;right:-8%;background:rgba(47,124,246,.20);--orb-dur:26s}
[data-bx-root] [data-bx-inline="bx-inline-e95e73d292"] {--kb-dur:34s;--kb-delay:-7s;--scan-dur:10s;--scan-delay:1.5s}
[data-bx-root] [data-bx-inline="bx-inline-ed6888a717"] {--h:66%}
[data-bx-root] [data-bx-inline="bx-inline-f0305cccec"] {width:420px;height:420px;top:-8%;right:2%;background:rgba(47,124,246,.30);--orb-dur:22s}
[data-bx-root] [data-bx-inline="bx-inline-f285acbe47"] {--h:86%}
[data-bx-root] [data-bx-inline="bx-inline-f409011c45"] {animation-delay:.72s}
[data-bx-root] [data-bx-inline="bx-inline-f61af31b78"] {--i:3}
[data-bx-root] [data-bx-inline="bx-inline-fa4527eb0b"] {--h:88%}

[data-bx-root] .bx-demo-note {
  display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px;
  line-height: 1.65; letter-spacing: .04em; color: var(--cyan);
}
[data-bx-root] .bx-ops__id { white-space: nowrap; }
@media (max-width: 560px) {
  [data-bx-root] .bx-ops__id { font-size: 9px; letter-spacing: .08em; }
  [data-bx-root] .bx-demo-note { font-size: 10px; }
}