.hero-art {
  position: relative;
  width: 620px;
  max-width: 100%;
  aspect-ratio: 620 / 335;
  container-type: inline-size;
  isolation: isolate;
  flex-shrink: 0;
  color: #10203c;
}
.hero-art .hero-art-stage { position: absolute; inset: 0; }
.hero-art .hero-art-wash {
  position: absolute;
  left: 1%;
  top: -1%;
  width: 107%;
  height: 104%;
  background: radial-gradient(ellipse at 58% 48%, rgba(119, 180, 255, .19), rgba(185, 217, 255, .04) 69%, transparent 78%);
  filter: blur(12px);
  z-index: -3;
}
.hero-art .hero-art-plane { position: absolute; border-radius: 5px; z-index: -2; }
.hero-art .hero-art-plane-one {
  left: 25.4%; top: 5.8%; width: 28.2%; height: 74%;
  transform: rotate(-6deg);
  background: linear-gradient(143deg, #72a7ff 0%, #b8d7ff 62%, #e0edff 100%);
  opacity: .78;
}
.hero-art .hero-art-plane-two {
  left: 35.4%; top: 33.5%; width: 43%; height: 62.5%;
  clip-path: polygon(0 0, 100% 9%, 96% 80%, 1% 100%);
  background: linear-gradient(90deg, rgba(211, 231, 255, .78), rgba(152, 198, 255, .24));
}
.hero-art .hero-art-plane-three {
  left: 59.8%; top: 2.2%; width: 43%; height: 69%;
  transform: skewY(-8deg);
  border: 1px solid rgba(255,255,255,.88);
  background: linear-gradient(120deg, rgba(167, 206, 255, .42), rgba(226, 240, 255, .56));
}
.hero-art .hero-window {
  position: absolute;
  width: 29.3%;
  padding: 1.05%;
  border: 1px solid rgba(255, 255, 255, .97);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.51), rgba(228,241,255,.43));
  box-shadow: 0 11px 24px rgba(48, 113, 204, .09), inset 0 0 0 1px rgba(236, 246, 255, .73);
  box-sizing: border-box;
}
.hero-art .hero-window-acquire { left: 2.9%; top: 13.9%; height: 71.8%; transform: rotate(2deg); }
.hero-art .hero-window-dispatch { left: 35.2%; top: 17.6%; height: 70%; transform: rotate(-3deg); }
.hero-art .hero-window-follow { left: 69.3%; top: 6.2%; height: 72.2%; transform: rotate(-2deg); }
.hero-art .hero-window-bar {
  position: absolute; top: 1.7%; left: 5.2%; right: 5.2%; height: 4.3%;
  display: flex; align-items: center; gap: 2px; color: #a8c9f7;
}
.hero-art .hero-window-bar i { width: 3px; height: 3px; background: #b3d3fc; border-radius: 50%; }
.hero-art .hero-window-bar i:first-child { background: #7aaff5; }
.hero-art .hero-window-bar span { margin-left: auto; font-size: 0.65cqw; letter-spacing: .03em; opacity: .7; }
.hero-art .hero-window-body {
  height: 92%; margin-top: 8.5%; padding: 9% 10% 7%;
  border-radius: 6px;
  box-sizing: border-box;
  background: linear-gradient(140deg, rgba(255,255,255,.99), rgba(248,251,255,.87));
  box-shadow: 0 2px 6px rgba(104, 156, 220, .045);
}
.hero-art .hero-window-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 2.03cqw; line-height: 1.5; font-weight: 750;
  white-space: nowrap; padding-bottom: 9%;
}
.hero-art .hero-window-title > svg { width: 1.9cqw; height: 1.9cqw; color: #a0b8d7; margin-right: -4%; }
.hero-art .hero-window-row {
  display: flex; align-items: center; gap: 8%; min-height: 20%;
  margin-bottom: 5%;
}
.hero-art .hero-window-row > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hero-art .hero-window-row strong { font-size: 1.42cqw; line-height: 1.45; font-weight: 650; white-space: nowrap; color: #3b4c6a; }
.hero-art .hero-window-row small { font-size: 1.18cqw; line-height: 1.5; color: #8291ad; white-space: nowrap; }
.hero-art .hero-platform { width: 3.4cqw; height: 3.4cqw; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0; }
.hero-art .hero-platform svg { width: 86%; height: 86%; }
.hero-art .hero-platform-douyin { background: #080c17; }
.hero-art .hero-platform-wechat { background: #19b84b; }
.hero-art .hero-platform-baidu { color: #155aff; }
.hero-art .hero-window-ellipsis { display: flex; gap: 4px; margin: 10% 2% 0; }
.hero-art .hero-window-ellipsis i { width: 3px; height: 3px; background: #91b3df; border-radius: 50%; }
.hero-art .hero-avatar {
  width: 4.25cqw; height: 4.25cqw; flex-shrink: 0; border-radius: 50%;
  background: #e2edff; border: 1px solid #c3d9ff; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(247,250,255,.65);
}
.hero-art .hero-avatar svg { width: 100%; height: 100%; fill: #6e9ff0; }
.hero-art .hero-window-dispatch .hero-window-row { margin-bottom: 7%; }
.hero-art .hero-window-dispatch .hero-window-title { padding-bottom: 10%; }
.hero-art .hero-status-icon {
  width: 3.65cqw; height: 3.95cqw; flex-shrink: 0; border-radius: 6px;
  display: grid; place-items: center; color: #11b888; background: #ddf7ee;
}
.hero-art .hero-status-icon svg { width: 75%; height: 75%; }
.hero-art .hero-window-follow .hero-window-row { min-height: 22%; margin-bottom: 7%; gap: 9%; }
.hero-art .hero-art-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hero-art .hero-art-caption {
  position: absolute; left: 74%; top: 84%;
  color: #244778; font: italic 1.77cqw / 1.55 KaiTi, STKaiti, 'Microsoft YaHei', serif;
  letter-spacing: .13em; white-space: nowrap; transform: rotate(-7deg);
}
.hero-art .hero-art-caption span {
  position: absolute; left: 10%; right: -7%; bottom: -6%; height: 1px;
  background: #5787eb; transform: rotate(-1.5deg); opacity: .75;
}