:root {
  color-scheme: dark;
  --cyan: #68eaff;
  --line: rgba(118, 224, 242, 0.42);
}

* { box-sizing: border-box; }

@property --qr-flow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

body {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.universe-home,
.universe-home img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.universe-home img {
  -webkit-user-drag: none;
}

.space-canvas,
.cosmic-effects,
.experience {
  position: fixed;
  inset: 0;
}

.space-canvas { z-index: 0; }
.cosmic-effects { z-index: 1; overflow: hidden; pointer-events: none; }
.experience { z-index: 2; overflow: hidden; touch-action: none; cursor: grab; }
.experience.is-dragging { cursor: grabbing; }

.meteor,
.electric {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.meteor {
  width: var(--size);
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--glow));
  animation: meteor-flight var(--duration) linear var(--delay) infinite;
}

.electric {
  width: var(--size);
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--glow));
  animation: electric-breathe var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes meteor-flight {
  0%, 8% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--angle)) scale(.72); }
  12% { opacity: var(--alpha); }
  44% { opacity: var(--alpha); transform: translate3d(var(--mx), var(--my), 0) rotate(var(--angle)) scale(1); }
  54%, 100% { opacity: 0; transform: translate3d(var(--ex), var(--ey), 0) rotate(var(--angle)) scale(1.05); }
}

@keyframes electric-breathe {
  0%, 30%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.86); }
  38% { opacity: .18; }
  42% { opacity: var(--alpha); transform: translate3d(3px, -2px, 0) scale(1); }
  48% { opacity: .1; }
  53% { opacity: .22; transform: translate3d(-2px, 1px, 0) scale(.97); }
  61% { opacity: 0; }
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 clamp(22px, 3vw, 48px);
  padding-left: clamp(12px, 1.25vw, 18px);
  padding-right: clamp(18px, calc(3vw - 4px), 44px);
  pointer-events: none;
}

.brand-lockup,
.header-actions { pointer-events: auto; }

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
  transform: translateX(5px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transform: translateX(5px);
}

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .68)) drop-shadow(0 0 5px rgba(96, 201, 255, .2));
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 -2px 3px rgba(0, 0, 0, .28);
  pointer-events: none;
}

.brand-lockup img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.brand-lockup h1 {
  margin: 0;
  color: rgba(239, 245, 248, .88);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .82);
}

.brand-lockup h1 span {
  margin: 0 4px;
  color: rgba(177, 193, 200, .46);
  font-weight: 300;
}

.brand-lockup h1 b {
  color: rgba(214, 226, 232, .72);
  font-weight: 300;
}

.download-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(229, 238, 242, .82);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .82);
  text-decoration: none;
  transition: color .2s ease;
}

.download-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.download-menu::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  right: -8px;
  width: 248px;
  height: 12px;
}

.download-card {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  width: 234px;
  padding: 13px 13px 11px;
  border-radius: 10px;
  background: rgba(250, 252, 254, .98);
  color: #25313f;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .1), inset 0 1px 0 #fff;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -7px, 0) scale(.975);
  transform-origin: 50% 0;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
  pointer-events: none;
}

.download-card::before,
.download-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: 11px;
  background: conic-gradient(
    from var(--qr-flow-angle),
    #ff355e 0deg, rgba(255, 53, 94, .54) 52deg, rgba(255, 53, 94, .14) 87deg,
    #ffd84d 90deg, rgba(255, 216, 77, .54) 142deg, rgba(255, 216, 77, .14) 177deg,
    #a855f7 180deg, rgba(168, 85, 247, .52) 232deg, rgba(168, 85, 247, .14) 267deg,
    #ffffff 270deg, rgba(210, 240, 255, .54) 322deg, rgba(210, 240, 255, .15) 357deg,
    #ff355e 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: qr-border-flow 5.6s linear infinite;
  pointer-events: none;
}

.download-card::after {
  inset: -3px;
  z-index: -2;
  padding: 3px;
  opacity: .54;
  filter: blur(2px);
}

.download-menu:hover .download-card,
.download-menu:focus-within .download-card {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

.qr-shell {
  position: relative;
  display: block;
  width: 208px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 9px -7px rgba(12, 23, 38, .3), 0 1px 3px rgba(16, 27, 42, .08);
}

.qr-shell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.download-card-caption {
  display: block;
  padding-top: 10px;
  color: #526173;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

.download-card-caption strong {
  color: #314055;
  font-weight: 700;
}

.download-link:hover,
.download-link:focus-visible {
  outline: none;
  color: #fff;
}

.language-option {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(195, 207, 214, .52);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
  transition: color .2s ease;
}

.language-option:hover,
.language-option:focus-visible {
  outline: none;
  color: rgba(241, 247, 250, .94);
}

@keyframes qr-border-flow {
  to { --qr-flow-angle: 360deg; }
}

.universe-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

body.is-child-layer .universe-stage { z-index: auto; }

.interaction-shade {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .36s ease, visibility 0s linear .36s;
  pointer-events: none;
}

.interaction-shade.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.is-child-layer .cosmic-node { isolation: isolate; }

.focus-qr {
  position: fixed;
  left: var(--qr-x, 50%);
  top: var(--qr-y, 50%);
  z-index: 22000;
  width: clamp(164px, 21vmin, 220px);
  aspect-ratio: 1;
  padding: 3px;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.18);
  transform-origin: center;
  transition: opacity .24s ease, transform .42s cubic-bezier(.2, .88, .24, 1.18), visibility 0s linear .42s;
  pointer-events: none;
  filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .48));
}

.focus-qr::before,
.focus-qr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--qr-flow-angle),
    #ff355e 0deg, rgba(255, 53, 94, .5) 52deg, rgba(255, 53, 94, .12) 87deg,
    #ffd84d 90deg, rgba(255, 216, 77, .5) 142deg, rgba(255, 216, 77, .12) 177deg,
    #a855f7 180deg, rgba(168, 85, 247, .5) 232deg, rgba(168, 85, 247, .12) 267deg,
    #fff 270deg, rgba(210, 240, 255, .52) 322deg, rgba(210, 240, 255, .13) 357deg,
    #ff355e 360deg
  );
  animation: qr-border-flow 4.4s linear infinite;
}

.focus-qr::after {
  inset: -2px;
  opacity: .62;
  filter: blur(2px);
}

.focus-qr.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

body.has-focus-qr .focus-qr {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
  pointer-events: auto !important;
}

.focus-qr-frame {
  display: block;
  width: 100%;
  height: 100%;
  padding: 7px;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
}

.focus-qr img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.cosmic-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--node-size);
  height: var(--node-size);
  margin-left: calc(var(--node-size) * -.5);
  margin-top: calc(var(--node-size) * -.5);
  container-type: size;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: pointer;
  contain: layout style;
}

.node-visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  backface-visibility: hidden;
}

.cosmic-node.is-irregular-product::before,
.cosmic-node.is-irregular-product::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  border-radius: 50%;
  padding: clamp(1px, 1.7cqw, 2.2px);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  will-change: transform;
}

.cosmic-node.is-irregular-product::before {
  background: conic-gradient(
    from 0deg,
    var(--flow-color-a) 0deg,
    color-mix(in srgb, var(--flow-color-a) 68%, transparent) 48deg,
    color-mix(in srgb, var(--flow-color-a) 18%, transparent) 176deg,
    var(--flow-color-b) 180deg,
    color-mix(in srgb, var(--flow-color-b) 68%, transparent) 228deg,
    color-mix(in srgb, var(--flow-color-b) 18%, transparent) 356deg,
    var(--flow-color-a) 360deg
  );
  filter: drop-shadow(0 0 2px var(--flow-color-a)) drop-shadow(0 0 4px color-mix(in srgb, var(--flow-color-b) 72%, transparent));
  animation: product-flow-clockwise var(--flow-speed-a, 7s) linear infinite;
  animation-delay: var(--flow-delay-a, 0s);
}

.cosmic-node.is-irregular-product::after {
  display: none;
}

.cosmic-node.is-irregular-product .node-visual {
  z-index: 2;
}

.cosmic-node.is-irregular-product .node-label {
  z-index: 6;
}

@keyframes product-flow-clockwise {
  to { transform: rotate(360deg); }
}

@keyframes product-flow-counterclockwise {
  to { transform: rotate(-360deg); }
}

.galaxy-orbit-system {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.galaxy-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ring-width);
  height: var(--ring-height);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--ring-angle));
}

.galaxy-orbit-planet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  backface-visibility: hidden;
}

.galaxy-orbit-planet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.is-galaxy-orbit .node-label {
  top: 84% !important;
  bottom: auto;
  z-index: 180;
}

.cosmic-node:hover .node-visual,
.cosmic-node:focus-visible .node-visual {
  filter: drop-shadow(0 0 11px color-mix(in srgb, var(--accent) 72%, transparent));
}

.cosmic-node.is-pulsing .node-visual {
  animation: node-pulse .52s cubic-bezier(.2, .78, .2, 1);
}

.cosmic-node:focus-visible { outline: none; }

.node-label {
  position: absolute;
  left: 50%;
  top: 75%;
  bottom: auto;
  width: 88%;
  min-width: 0;
  max-width: 88%;
  min-height: clamp(15px, 24cqw, 30px);
  height: auto;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2px, 3cqw, 5px) clamp(3px, 4cqw, 8px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 78%, white 22%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .94) 10% 90%, transparent);
  box-shadow: inset 0 7px 12px -11px color-mix(in srgb, var(--accent) 92%, transparent);
  color: transparent;
  font-size: clamp(8px, var(--label-font, 16cqw), 22px);
  font-weight: 600;
  letter-spacing: .8px;
  white-space: nowrap;
  text-shadow: none;
  overflow: hidden;
  pointer-events: none;
}

.node-label-char {
  --char-gradient: linear-gradient(90deg, #fff, #a8efff, #76bfd2, #d9f8ff, #fff);
  --char-glow: rgba(118, 191, 210, .52);
  position: relative;
  z-index: 1;
  display: inline-block;
  color: transparent;
  background: var(--char-gradient);
  background-size: 260% 100%;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: brightness(1.02) drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px var(--char-glow));
  animation: node-label-character-breath 9.6s ease-in-out infinite;
  animation-delay: calc(var(--label-delay) + var(--char-delay));
}

.node-label-char:nth-child(4n + 1) {
  --char-gradient: linear-gradient(90deg, #fff, #a8efff, #76bfd2, #d9f8ff, #fff);
  --char-glow: rgba(118, 191, 210, .52);
}

.node-label-char:nth-child(4n + 2) {
  --char-gradient: linear-gradient(90deg, #fff, #f0c4df, #c79bd7, #e9d7f5, #fff);
  --char-glow: rgba(199, 155, 215, .5);
}

.node-label-char:nth-child(4n + 3) {
  --char-gradient: linear-gradient(90deg, #fff, #fff0b8, #ddbd70, #ffe4a0, #fff);
  --char-glow: rgba(221, 189, 112, .5);
}

.node-label-char:nth-child(4n) {
  --char-gradient: linear-gradient(90deg, #fff, #d7f2df, #91c6aa, #c8ead8, #fff);
  --char-glow: rgba(145, 198, 170, .5);
}

.node-label::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -34%;
  top: -18%;
  width: 28%;
  height: 136%;
  opacity: 0;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(183, 238, 255, .18), rgba(255, 255, 255, .72), rgba(183, 238, 255, .2), transparent);
  filter: blur(.7px);
  mix-blend-mode: screen;
  animation: node-label-scan-beam 6.4s ease-in-out infinite;
  animation-delay: var(--label-delay);
}

.node-label::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: transparent;
  font-weight: 800;
  background: linear-gradient(100deg, transparent 0 39%, rgba(215, 247, 255, .52) 45%, #fff 50%, rgba(255, 237, 181, .86) 54%, transparent 61%);
  background-size: 300% 100%;
  background-position: 135% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 4px rgba(210, 246, 255, .72));
  animation: node-label-text-scan 6.4s ease-in-out infinite;
  animation-delay: var(--label-delay);
}

.cosmic-node.is-main .node-label {
  width: 88%;
  min-width: 0;
}

/* Keep the label proportions identical to the three original effects. */
body[data-active-effect="six"] .node-label {
  top: 75%;
  bottom: auto;
  width: 88%;
  max-width: 88%;
  min-width: 0;
  height: auto;
  min-height: clamp(12px, 20cqw, 19px);
  padding: clamp(1px, 2cqw, 3px) clamp(2px, 3cqw, 5px);
  transform: translate(-50%, -50%);
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
  line-height: 1;
}

body[data-active-effect="sphere"] .node-label {
  top: 75%;
  bottom: auto;
  width: 88%;
  max-width: 88%;
  min-width: 0;
  height: auto;
  min-height: clamp(12px, 20cqw, 19px);
  padding: clamp(1px, 2cqw, 3px) clamp(2px, 3cqw, 5px);
  transform: translate(-50%, -50%);
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
  line-height: 1;
}

body[data-active-effect="starfield"] .node-label {
  top: 75%;
  bottom: auto;
  width: 88%;
  max-width: 88%;
  min-width: 0;
  height: auto;
  min-height: clamp(12px, 20cqw, 19px);
  padding: clamp(1px, 2cqw, 3px) clamp(2px, 3cqw, 5px);
  transform: translate(-50%, -50%);
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
  line-height: 1;
}

body[data-active-effect="six"] .cosmic-node.is-main .node-label {
  min-width: 0;
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
}

body[data-active-effect="sphere"] .cosmic-node.is-main .node-label {
  min-width: 0;
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
}

body[data-active-effect="starfield"] .cosmic-node.is-main .node-label {
  min-width: 0;
  font-size: clamp(7px, var(--label-font, 16cqw), 13px);
}

@keyframes node-label-character-breath {
  0%, 100% {
    background-position: 100% 50%;
    filter: brightness(1.02) drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px var(--char-glow));
  }
  50% {
    background-position: 32% 50%;
    filter: brightness(1.12) drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px var(--char-glow));
  }
}

@keyframes node-label-scan-beam {
  0%, 16% { left: -34%; opacity: 0; }
  22% { opacity: .72; }
  54% { left: 106%; opacity: .86; }
  61%, 100% { left: 106%; opacity: 0; }
}

@keyframes node-label-text-scan {
  0%, 16% { background-position: 135% 50%; opacity: 0; }
  22% { opacity: .88; }
  54% { background-position: -35% 50%; opacity: 1; }
  61%, 100% { background-position: -35% 50%; opacity: 0; }
}

@keyframes node-pulse {
  0%, 100% { transform: scale(1); }
  44% { transform: scale(1.07); }
}

.site-footer {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 9px;
  width: min(94vw, 980px);
  display: grid;
  gap: 3px;
  transform: translateX(-50%);
  color: rgba(220, 233, 236, .52);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
  pointer-events: auto;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.footer-primary {
  color: rgba(233, 241, 244, .62);
}

.company-name {
  color: rgba(242, 247, 249, .72);
}

.footer-item,
.company-name {
  white-space: nowrap;
}

.footer-item::before {
  content: "·";
  display: inline-block;
  margin: 0 8px;
  color: rgba(145, 177, 184, .42);
}

.footer-records {
  font-size: 9px;
  color: rgba(190, 208, 213, .43);
}

.footer-records .footer-item:first-child::before {
  content: none;
}

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: rgba(255, 255, 255, .82); }

.site-footer .is-placeholder {
  color: rgba(177, 194, 199, .36);
}

@media (max-width: 720px) {
  .site-header { min-height: 52px; padding: 0 12px; }
  .brand-lockup h1 { font-size: 13px; }
  .brand-mark, .brand-lockup img { width: 32px; height: 32px; }
  .brand-mark { flex-basis: 32px; }
  .download-link { min-height: 34px; padding: 0; font-size: 13px; }
  .header-actions { gap: 13px; }
  .language-option { min-height: 34px; font-size: 13px; }
  .download-card { left: 50%; right: auto; transform-origin: 50% 0; }
  .site-footer { bottom: 6px; width: 96vw; font-size: 9px; }
  .footer-records { font-size: 8px; }
  .footer-item::before { margin: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .meteor,
  .electric,
  .node-label-char,
  .node-label::before,
  .node-label::after { animation-duration: 20s; }
}