/* 浠呯敤浜庣嫭绔嬮瑙堥〉锛涘祵鍏ョ幇鏈夌綉绔欐椂涓嶉渶瑕佽繖娈?body 鏍峰紡銆?*/
    body.bpm-demo-page {
      margin: 0;
      background: #040c15;
      color: #dceefc;
      font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    }

    /* ============================================================
       鍙祵鍏ョ粍浠讹細浠ヤ笅鎵€鏈夋牱寮忛兘闄愬畾鍦?.bpm-section 鍐呫€?       绫诲悕缁熶竴 bpm- 鍓嶇紑锛屼笉姹℃煋缃戠珯鍘熸湁鏍峰紡銆?       ============================================================ */
    .bpm-section {
      --bpm-bg: #06121f;
      --bpm-ink: #e9f7ff;
      --bpm-muted: #7aa4be;
      --bpm-dim: #3f657d;
      --bpm-line: rgba(91, 174, 222, .18);
      --bpm-glass: rgba(4, 17, 29, .84);
      --bpm-font: "Bahnschrift", "DIN Alternate", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
      --bpm-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
      position: relative;
      display: block;
      width: 100%;
      max-width: none;
      height: 100vh;
      height: 100svh;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
      isolation: isolate;
      color: var(--bpm-ink);
      font-family: var(--bpm-font);
      background:
        radial-gradient(ellipse 58% 50% at 50% 48%, rgba(22, 96, 155, .38) 0%, rgba(10, 45, 75, .18) 48%, transparent 72%),
        radial-gradient(ellipse 36% 38% at 88% 12%, rgba(0, 137, 220, .12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 36% at 8% 90%, rgba(15, 86, 132, .15) 0%, transparent 70%),
        linear-gradient(170deg, #071725 0%, #06121f 48%, #030b13 100%);
      -webkit-font-smoothing: antialiased;
    }
    .bpm-section,
    .bpm-section *,
    .bpm-section *::before,
    .bpm-section *::after { box-sizing: border-box; }

    .bpm-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(68, 145, 190, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 145, 190, .04) 1px, transparent 1px);
      background-size: 58px 58px;
      -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 52%, #000 8%, transparent 80%);
      mask-image: radial-gradient(ellipse 74% 78% at 50% 52%, #000 8%, transparent 80%);
    }
    .bpm-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
      background:
        radial-gradient(ellipse 82% 80% at 50% 48%, transparent 52%, rgba(1, 6, 12, .48) 100%),
        repeating-linear-gradient(0deg, rgba(108, 197, 255, .02) 0 1px, transparent 1px 4px);
    }

    .bpm-canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      cursor: grab;
      touch-action: pan-y;
      outline: none;
      filter: drop-shadow(0 0 5px rgba(77, 176, 255, .38)) drop-shadow(0 0 14px rgba(22, 86, 170, .18));
    }
    .bpm-section.bpm-dragging .bpm-canvas { cursor: grabbing; }
    .bpm-compact .bpm-canvas {
      filter: drop-shadow(0 0 3px rgba(77, 176, 255, .32));
    }

    .bpm-leaders {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    .bpm-leader {
      fill: none;
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-opacity .2s ease, stroke-width .2s ease, filter .2s ease;
    }
    .bpm-leader.bpm-hot {
      stroke-width: 1.8;
      filter: drop-shadow(0 0 4px var(--bpm-c));
    }
    .bpm-labels {
      position: absolute;
      inset: 0;
      z-index: 4;
      overflow: hidden;
      pointer-events: none;
    }

    .bpm-topbar {
      position: absolute;
      z-index: 9;
      inset: 0 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 22px 30px;
      pointer-events: none;
    }
    .bpm-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: #dff4ff;
      pointer-events: auto;
    }
    .bpm-brand-mark {
      position: relative;
      width: 31px;
      height: 31px;
      flex: 0 0 auto;
      transform: rotate(45deg);
      border: 1px solid rgba(96, 190, 241, .62);
      box-shadow: inset 0 0 14px rgba(61, 169, 252, .14), 0 0 18px rgba(61, 169, 252, .08);
    }
    .bpm-brand-mark::before,
    .bpm-brand-mark::after {
      content: "";
      position: absolute;
      background: #7dd3ff;
      box-shadow: 0 0 8px rgba(61, 169, 252, .7);
    }
    .bpm-brand-mark::before { left: 5px; top: 5px; width: 6px; height: 6px; }
    .bpm-brand-mark::after { right: 8px; bottom: 4px; width: 1px; height: 17px; opacity: .7; }
    .bpm-brand-word {
      display: block;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .24em;
    }
    .bpm-brand-sub {
      display: block;
      margin-top: 6px;
      color: #78a2bd;
      font-size: 8px;
      line-height: 1;
      letter-spacing: .2em;
    }
    .bpm-route {
      position: absolute;
      left: 50%;
      top: 27px;
      transform: translateX(-50%);
      color: #5c8aa6;
      font-size: 9px;
      letter-spacing: .34em;
      white-space: nowrap;
    }
    .bpm-route b { color: #9edcff; font-weight: 500; }
    .bpm-status {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border: 1px solid rgba(92, 163, 202, .2);
      background: rgba(4, 16, 28, .32);
      color: #78a6c1;
      font-family: var(--bpm-mono);
      font-size: 8px;
      letter-spacing: .1em;
      pointer-events: none;
    }
    .bpm-status-pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #32e0b2;
      box-shadow: 0 0 10px #32e0b2;
      animation: bpm-pulse 2.4s ease-in-out infinite;
    }
    .bpm-status em { color: #d8f4ff; font-style: normal; }
    .bpm-status i { width: 1px; height: 11px; background: rgba(110, 175, 212, .24); }

    .bpm-hero {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 62px;
      width: min(620px, 78%);
      transform: translateX(-50%);
      text-align: center;
      pointer-events: none;
      animation: bpm-rise .8s cubic-bezier(.2, .8, .2, 1) both;
    }
    .bpm-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: #67add5;
      font-size: 8px;
      letter-spacing: .38em;
      white-space: nowrap;
    }
    .bpm-eyebrow::before,
    .bpm-eyebrow::after {
      content: "";
      width: 24px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(96, 188, 238, .68));
    }
    .bpm-eyebrow::after { transform: scaleX(-1); }
    /* 标题样式与全站 .intit（如首页「博沃产品」）保持一致 */
    .bpm-title {
      width: 100%;
      margin: 11px 0 6px;
      padding: 0;
      text-align: center;
      color: #fff;
      font-family: "思源黑体", Arial, Helvetica, sans-serif;
      font-size: 40px;
      font-weight: bold;
      line-height: 58px;
      letter-spacing: normal;
      text-indent: 0;
      text-shadow: none;
      -webkit-font-smoothing: auto;
    }
    .bpm-title span { color: inherit; }
    /* 移动端沿用 .intit 的移动端字号 */
    @media (max-width: 999px) {
      .bpm-title {
        font-size: 1.2rem;
        line-height: 2.0rem;
      }
    }
    .bpm-subtitle {
      margin: 0;
      color: #507992;
      font-family: var(--bpm-mono);
      font-size: 8px;
      letter-spacing: .26em;
    }

    .bpm-label {
      --bpm-c: #3da9fc;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 29px;
      padding: 6px 11px 6px 9px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(111, 174, 214, .22);
      border-left: 2px solid var(--bpm-c);
      border-radius: 2px 9px 9px 2px;
      background: linear-gradient(90deg, rgba(3, 12, 22, .97), rgba(4, 17, 30, .93));
      box-shadow: 0 6px 22px rgba(0, 5, 10, .34), inset 0 0 22px rgba(61, 169, 252, .035);
      color: #fff;
      font-family: var(--bpm-font);
      font-size: 13px;
      line-height: 1;
      letter-spacing: .015em;
      white-space: nowrap;
      text-decoration: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
      pointer-events: auto;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      will-change: left, top, opacity;
    }
    .bpm-section.bpm-ready .bpm-label { opacity: 1; visibility: visible; }
    .bpm-label::before {
      content: "";
      flex: 0 0 auto;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--bpm-c);
      box-shadow: 0 0 9px var(--bpm-c);
    }
    .bpm-label .bpm-label-idx {
      color: var(--bpm-c);
      font-family: var(--bpm-mono);
      font-size: 8px;
      opacity: .82;
    }
    .bpm-label:hover {
      z-index: 20;
      border-color: var(--bpm-c);
      background: linear-gradient(90deg, rgba(8, 31, 53, .98), rgba(7, 28, 47, .84));
      box-shadow: 0 7px 26px rgba(0, 6, 12, .4), 0 0 22px rgba(61, 169, 252, .1);
    }
    .bpm-label.bpm-far { opacity: .38; }
    .bpm-label.bpm-far:hover { opacity: 1; }
    .bpm-label.bpm-hiding { opacity: 0 !important; pointer-events: none; }
    .bpm-label.bpm-filtered {
      opacity: 0 !important;
      visibility: hidden;
      pointer-events: none;
      transition: none !important;
    }
    .bpm-label.bpm-cat-active {
      border-color: var(--bpm-c);
      box-shadow: 0 7px 26px rgba(0, 6, 12, .38), 0 0 22px rgba(61, 169, 252, .14);
    }

    .bpm-legend {
      position: absolute;
      z-index: 10;
      left: 30px;
      bottom: 26px;
      width: 246px;
      padding-top: 10px;
      border-top: 1px solid rgba(95, 166, 208, .22);
      pointer-events: none;
    }
    .bpm-legend-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #75a3be;
      font-size: 8px;
      letter-spacing: .24em;
    }
    .bpm-legend-head span:last-child { color: #3b657d; font-family: var(--bpm-mono); letter-spacing: .06em; }
    .bpm-legend-list { display: flex; flex-direction: column; gap: 4px; }
    .bpm-legend-btn {
      --bpm-c: #3da9fc;
      display: grid;
      grid-template-columns: 23px 1fr 22px;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: 39px;
      padding: 6px 8px;
      border: 1px solid rgba(112, 169, 204, .1);
      border-left: 1px solid transparent;
      background: linear-gradient(90deg, rgba(6, 22, 38, .6), rgba(6, 22, 38, .06));
      color: inherit;
      font-family: var(--bpm-font);
      text-align: left;
      cursor: pointer;
      pointer-events: auto;
      -webkit-appearance: none;
      appearance: none;
      transition: opacity .22s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .bpm-legend-btn:hover {
      border-color: rgba(124, 190, 230, .3);
      background: rgba(8, 30, 50, .7);
      transform: translateX(2px);
    }
    .bpm-legend-swatch {
      position: relative;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(122, 185, 222, .4);
      transform: rotate(45deg);
    }
    .bpm-legend-swatch::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 5px;
      width: 6px;
      height: 6px;
      background: var(--bpm-c);
      box-shadow: 0 0 9px var(--bpm-c);
    }
    .bpm-legend-swatch::after {
      content: "";
      position: absolute;
      inset: -4px;
      border: 1px solid var(--bpm-c);
      opacity: 0;
      transition: opacity .2s ease;
    }
    .bpm-legend-name {
      display: block;
      color: #d4eafa;
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: .04em;
    }
    .bpm-legend-en {
      display: block;
      margin-top: 3px;
      color: #4b748d;
      font-family: var(--bpm-mono);
      font-size: 7px;
      line-height: 1;
      letter-spacing: .08em;
    }
    .bpm-legend-short { display: none; }
    .bpm-legend-count {
      color: var(--bpm-c);
      font-family: var(--bpm-mono);
      font-size: 8px;
      text-align: right;
      opacity: .65;
    }
    .bpm-legend-btn.bpm-active {
      border-color: var(--bpm-c);
      border-left-color: var(--bpm-c);
      background: linear-gradient(90deg, rgba(26, 107, 161, .24), rgba(6, 22, 38, .14));
      transform: translateX(3px);
    }
    .bpm-legend-btn.bpm-active .bpm-legend-swatch { border-color: var(--bpm-c); }
    .bpm-legend-btn.bpm-active .bpm-legend-swatch::after { opacity: 1; }
    .bpm-legend-btn.bpm-active .bpm-legend-name { color: #fff; }
    .bpm-legend-btn.bpm-active .bpm-legend-count { opacity: 1; }
    .bpm-legend.bpm-has-filter .bpm-legend-btn:not(.bpm-active) { opacity: .4; }
    .bpm-legend-note {
      margin: 8px 0 0;
      color: #3d667f;
      font-size: 8px;
      line-height: 1.45;
      letter-spacing: .06em;
    }
    .bpm-legend-note b { color: #74a7c5; font-weight: 400; }

    .bpm-section.bpm-short .bpm-legend-note { display: none; }
    .bpm-section.bpm-short .bpm-legend-en { display: none; }
    .bpm-section.bpm-short .bpm-legend-btn { min-height: 34px; padding: 5px 8px; }
    .bpm-section.bpm-short .bpm-legend { bottom: 20px; }

    .bpm-zoom {
      position: absolute;
      z-index: 10;
      right: 28px;
      bottom: 54px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 6px;
      border: 1px solid rgba(100, 172, 214, .22);
      background: rgba(4, 17, 29, .66);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    .bpm-zoom-caption {
      padding: 0 5px;
      color: #47718a;
      font-family: var(--bpm-mono);
      font-size: 7px;
      letter-spacing: .12em;
    }
    .bpm-zoom-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(104, 177, 219, .22);
      background: rgba(7, 27, 45, .7);
      color: #bde9ff;
      font-family: var(--bpm-mono);
      font-size: 18px;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
      transition: background .2s ease, border-color .2s ease, opacity .2s ease;
    }
    .bpm-zoom-btn:hover {
      border-color: rgba(125, 220, 255, .7);
      background: rgba(11, 47, 75, .9);
    }
    .bpm-zoom-btn:active { transform: translateY(1px); }
    .bpm-zoom-btn:focus-visible { outline: 1px solid #7ddcff; outline-offset: 2px; }
    .bpm-zoom-btn:disabled { opacity: .28; cursor: default; background: rgba(7, 27, 45, .3); }

    .bpm-hint {
      position: absolute;
      z-index: 6;
      right: 28px;
      bottom: 24px;
      color: #436b83;
      font-family: var(--bpm-mono);
      font-size: 7px;
      letter-spacing: .12em;
      pointer-events: none;
    }
    .bpm-hint b { color: #7fc9ea; font-weight: 400; }
    .bpm-corner-mark {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      color: #2b5067;
      font-family: var(--bpm-mono);
      font-size: 7px;
      letter-spacing: .26em;
      pointer-events: none;
      white-space: nowrap;
    }

    .bpm-loader {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: #06121f;
      transition: opacity .55s ease, visibility .55s ease;
    }
    .bpm-loader.bpm-done { opacity: 0; visibility: hidden; }
    .bpm-loader-ring {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(91, 183, 235, .18);
      border-top-color: #3da9fc;
      border-right-color: rgba(61, 169, 252, .45);
      border-radius: 50%;
      animation: bpm-spin 1.2s linear infinite;
      box-shadow: 0 0 22px rgba(61, 169, 252, .1);
    }
    .bpm-loader p {
      margin: 0;
      color: #6c9bb8;
      font-family: var(--bpm-mono);
      font-size: 8px;
      letter-spacing: .18em;
    }
    .bpm-loader-code { color: #31576f; font-size: 7px; letter-spacing: .11em; }
    .bpm-loader.bpm-error .bpm-loader-ring { animation: none; border-color: rgba(255, 90, 60, .5); }
    .bpm-loader.bpm-error p { color: #ffb29f; }

    @keyframes bpm-spin { to { transform: rotate(360deg); } }
    @keyframes bpm-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
    @keyframes bpm-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

    /* 缁勪欢瀹藉害 < 768 鏃跺惎鐢ㄧ揣鍑戝竷灞€锛岀敱 JS 娣诲姞 bpm-compact 绫伙紝涓嶄緷璧栭〉闈㈠搴?*/
    .bpm-compact .bpm-topbar { padding: 14px 14px; }
    .bpm-compact .bpm-brand { gap: 8px; }
    .bpm-compact .bpm-brand-mark { width: 25px; height: 25px; }
    .bpm-compact .bpm-brand-mark::before { left: 4px; top: 4px; width: 5px; height: 5px; }
    .bpm-compact .bpm-brand-mark::after { right: 6px; bottom: 3px; height: 14px; }
    .bpm-compact .bpm-brand-word { font-size: 12px; }
    .bpm-compact .bpm-brand-sub { display: none; }
    .bpm-compact .bpm-route { display: none; }
    .bpm-compact .bpm-status { gap: 6px; padding: 6px 7px; font-size: 7px; letter-spacing: .04em; }
    .bpm-compact .bpm-status-label,
    .bpm-compact .bpm-status i { display: none; }
    .bpm-compact .bpm-status em { font-size: 9px; }
    .bpm-compact .bpm-hero { top: 60px; width: 92%; }
    .bpm-compact .bpm-eyebrow { gap: 6px; font-size: 6.5px; letter-spacing: .22em; }
    .bpm-compact .bpm-eyebrow::before,
    .bpm-compact .bpm-eyebrow::after { width: 14px; }
    .bpm-compact .bpm-title { margin: 9px 0 6px; font-size: 1.2rem; line-height: 2.0rem; }
    .bpm-compact .bpm-subtitle { font-size: 6px; letter-spacing: .16em; }
    .bpm-compact .bpm-label {
      min-height: 25px;
      gap: 5px;
      padding: 5px 7px 5px 6px;
      border-radius: 2px 7px 7px 2px;
      font-size: 12px;
    }
    .bpm-compact .bpm-label .bpm-label-idx { font-size: 7px; }
    .bpm-compact .bpm-label::before { width: 4px; height: 4px; }
    .bpm-compact .bpm-legend {
      left: 8px;
      right: 8px;
      bottom: max(7px, env(safe-area-inset-bottom));
      width: auto;
      padding: 6px;
      border: 1px solid rgba(95, 166, 208, .2);
      border-top-color: rgba(95, 166, 208, .3);
      background: rgba(4, 17, 29, .8);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .bpm-compact .bpm-legend-head,
    .bpm-compact .bpm-legend-note { display: none; }
    .bpm-compact .bpm-legend-list { flex-direction: row; gap: 3px; }
    .bpm-compact .bpm-legend-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-height: 0;
      padding: 5px 2px 4px;
      border-left-color: transparent;
      border-top: 1px solid transparent;
      background: rgba(7, 24, 40, .42);
      text-align: center;
    }
    .bpm-compact .bpm-legend-btn:hover { transform: none; }
    .bpm-compact .bpm-legend-btn.bpm-active { transform: none; border-top-color: var(--bpm-c); border-left-color: transparent; }
    .bpm-compact .bpm-legend-swatch { width: 9px; height: 9px; }
    .bpm-compact .bpm-legend-swatch::before { left: 2px; top: 2px; width: 3px; height: 3px; }
    .bpm-compact .bpm-legend-swatch::after { display: none; }
    .bpm-compact .bpm-legend-name { font-size: 9.5px; }
    .bpm-compact .bpm-legend-full { display: none; }
    .bpm-compact .bpm-legend-short { display: block; }
    .bpm-compact .bpm-legend-en,
    .bpm-compact .bpm-legend-count { display: none; }
    .bpm-compact .bpm-zoom { right: 10px; bottom: 67px; padding: 4px 5px; }
    .bpm-compact .bpm-zoom-caption { display: none; }
    .bpm-compact .bpm-zoom-btn { width: 30px; height: 30px; font-size: 17px; }
    .bpm-compact .bpm-hint,
    .bpm-compact .bpm-corner-mark { display: none; }

    @media (max-width: 360px) {
      .bpm-compact .bpm-label { padding: 4px 5px 4px 4px; gap: 4px; }
      .bpm-compact .bpm-label .bpm-label-idx { font-size: 6px; }
      .bpm-compact .bpm-legend-name { font-size: 8.5px; }
    }

    .bpm-section.bpm-narrow .bpm-label { padding: 4px 5px 4px 4px; gap: 4px; }
    .bpm-section.bpm-narrow .bpm-label .bpm-label-idx { font-size: 6px; }
    .bpm-section.bpm-narrow .bpm-legend-name { font-size: 8.5px; }

    @media (prefers-reduced-motion: reduce) {
      .bpm-section *,
      .bpm-section *::before,
      .bpm-section *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
      }
      .bpm-label,
      .bpm-loader { transition-duration: .01ms !important; }
    }