: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;
}

.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 {
  /* Both streams share one orbit; only their colors and timing differ. */
  inset: -4%;
  padding: clamp(1px, 1.7cqw, 2.2px);
  background: conic-gradient(
    from 180deg,
    var(--flow-color-b) 0deg,
    color-mix(in srgb, var(--flow-color-b) 66%, transparent) 64deg,
    color-mix(in srgb, var(--flow-color-b) 14%, transparent) 176deg,
    var(--flow-color-a) 180deg,
    color-mix(in srgb, var(--flow-color-a) 66%, transparent) 244deg,
    color-mix(in srgb, var(--flow-color-a) 14%, transparent) 356deg,
    var(--flow-color-b) 360deg
  );
  filter: drop-shadow(0 0 2px var(--flow-color-b)) drop-shadow(0 0 4px color-mix(in srgb, var(--flow-color-a) 70%, transparent));
  opacity: .9;
  animation: product-flow-counterclockwise var(--flow-speed-b, 8s) linear infinite;
  animation-delay: var(--flow-delay-b, 0s);
}

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

/* Wide/tall transparent artwork stays proportional inside a spherical visual
   carrier, so it reads as one ball without cutting off the original subject. */
.cosmic-node.is-aspect-outlier {
  isolation: isolate;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .19), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(32, 70, 104, .1) 0 48%, rgba(5, 10, 22, .25) 74%, rgba(0, 0, 0, .38) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(211, 244, 255, .15),
    inset -8px -11px 18px rgba(0, 0, 0, .2),
    0 0 9px color-mix(in srgb, var(--accent) 24%, transparent);
}

.cosmic-node.is-aspect-outlier .node-visual {
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center;
}

/* The new tall character already contains intentional canvas spacing. Keep it
   close to its authored footprint so the figure and circular carrier stay in
   balance instead of applying the generic 86% inset twice. */
.cosmic-node.is-new-character .node-visual {
  inset: 2%;
  width: 96%;
  height: 96%;
}

/* Keep both flow streams in the node's own stacking context. Without this,
   the negative-z rings can fall behind the entire stage on the homepage. */
.cosmic-node.is-irregular-product {
  isolation: isolate;
}

.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-core {
  z-index: 12;
}

.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: var(--orbit-planet-size, 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;
}

/* Five nested galaxy systems use the same thin white orbital language, but
   remain readable when they are opened as a compact five-ball constellation. */
body.is-child-layer .is-galaxy-orbit .galaxy-orbit-ring {
  border-color: rgba(255, 255, 255, .78);
  box-shadow: 0 0 3px rgba(218, 244, 255, .25);
}

body.is-child-layer .is-galaxy-orbit .galaxy-orbit-planet {
  filter: drop-shadow(0 0 4px rgba(190, 228, 255, .2));
}

.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: 70%;
  bottom: auto;
  width: 76%;
  min-width: 0;
  max-width: 76%;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px);
  border-top: var(--label-border-px, 0px) solid color-mix(in srgb, var(--accent) 78%, white 22%);
  border-bottom: var(--label-border-px, 0px) 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: var(--label-font-px, 0px);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing-px, 0px);
  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 var(--label-pad-x, 0px);
  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: 76%;
  min-width: 0;
}

/* Keep the label proportions identical to the three original effects. */
body[data-active-effect="six"] .node-label {
  top: 70%;
  bottom: auto;
  width: 76%;
  max-width: 76%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px);
  transform: translate(-50%, -50%);
  font-size: var(--label-font-px, 0px);
  line-height: 1.05;
}

body[data-active-effect="sphere"] .node-label {
  top: 70%;
  bottom: auto;
  width: 76%;
  max-width: 76%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px);
  transform: translate(-50%, -50%);
  font-size: var(--label-font-px, 0px);
  line-height: 1.05;
}

body[data-active-effect="starfield"] .node-label {
  top: 70%;
  bottom: auto;
  width: 76%;
  max-width: 76%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px);
  transform: translate(-50%, -50%);
  font-size: var(--label-font-px, 0px);
  line-height: 1.05;
}

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

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

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

@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: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  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-record-link {
  color: rgba(190, 208, 213, .52);
  white-space: nowrap;
}

.footer-record-link::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);
}

.mobile-version-return {
  display: none;
}

html[data-mobile-desktop-view="1"] .mobile-version-return {
  position: fixed;
  z-index: 2000;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(74px + env(safe-area-inset-bottom));
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(103, 232, 255, .58);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(237, 252, 255, .94);
  background: linear-gradient(135deg, rgba(6, 30, 45, .9), rgba(18, 9, 37, .9));
  box-shadow: 0 0 18px rgba(58, 214, 255, .2), inset 0 0 14px rgba(76, 216, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}

.mobile-version-return span {
  color: #6ee8ff;
  font-size: 15px;
}

.mobile-version-return b {
  font-weight: 600;
}

.mobile-version-return:active {
  transform: scale(.97);
}

.mobile-version-return:focus-visible {
  outline: 2px solid rgba(126, 237, 255, .92);
  outline-offset: 3px;
}

@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-item::before { margin: 0 5px; }
  .footer-record-link::before { margin: 0 5px; }
}

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

/* 同步 08121400 - 副本 (2)：品牌悬浮信息与二维码统一视觉。 */
.brand-menu { position: relative; transform: translateX(5px); pointer-events: auto; }
.brand-menu .brand-lockup { transform: none; }
.brand-profile {
  position: absolute; z-index: 40; top: calc(100% + 12px); left: 0;
  width: min(520px, calc(100vw - 28px)); min-height: 236px; display: grid;
  grid-template-columns: 154px 1fr; overflow: hidden; border: 1px solid rgba(85, 234, 255, .24);
  border-radius: 18px; color: #eaf3f8; background-color: rgba(5, 7, 15, .97);
  background-image: linear-gradient(rgba(72, 229, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 229, 255, .035) 1px, transparent 1px), linear-gradient(145deg, rgba(18, 22, 42, .98), rgba(5, 7, 15, .98));
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(198, 80, 255, .07), 0 0 26px rgba(75, 232, 255, .08);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0) scale(.985);
  transform-origin: 28px 0; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s; pointer-events: none;
}
.brand-profile::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.brand-menu:hover .brand-profile, .brand-menu:focus-within .brand-profile { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; pointer-events: auto; }
.brand-profile-corners, .qr-effect-corners { position: absolute; inset: 11px; z-index: 8; pointer-events: none; }
.brand-profile-corners i, .qr-effect-corners i { position: absolute; width: 30px; height: 30px; border-color: #52edff; border-style: solid; filter: drop-shadow(0 0 5px rgba(76, 234, 255, .68)); }
.brand-profile-corners i:nth-child(1), .qr-effect-corners i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.brand-profile-corners i:nth-child(2), .qr-effect-corners i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-color: #bd55ff; filter: drop-shadow(0 0 5px rgba(189, 85, 255, .7)); }
.brand-profile-corners i:nth-child(3), .qr-effect-corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-color: #bd55ff; filter: drop-shadow(0 0 5px rgba(189, 85, 255, .7)); }
.brand-profile-corners i:nth-child(4), .qr-effect-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.brand-profile-scan, .qr-effect-scan { position: absolute; z-index: 9; left: 8%; right: 8%; top: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(121, 239, 255, .85), transparent); box-shadow: 0 0 7px rgba(81, 234, 255, .68); opacity: .52; animation: cyber-panel-scan 4.6s ease-in-out infinite; pointer-events: none; }
.brand-profile-scan { animation-name: brand-profile-scan; }
.brand-profile-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; border-right: 1px solid rgba(85, 234, 255, .12); background: radial-gradient(circle at 50% 43%, rgba(81, 234, 255, .16), transparent 43%), linear-gradient(160deg, rgba(33, 30, 78, .28), rgba(4, 8, 15, .2)); }
.brand-profile-visual::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(82, 237, 255, .13); border-radius: 11px; pointer-events: none; }
.brand-profile-kicker { color: rgba(178, 224, 255, .65); font-size: 9px; letter-spacing: .12em; }
.brand-profile-visual img { width: 112px; height: 112px; display: block; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .5)) drop-shadow(0 0 13px rgba(82, 195, 255, .28)); }
.brand-profile-visual strong { color: rgba(239, 247, 251, .9); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-indent: .18em; }
.brand-profile-content { display: flex; flex-direction: column; padding: 27px 28px 23px; }
.brand-profile-content h2 { margin: 0 0 14px; color: #f5fbff; font-size: 20px; font-weight: 500; letter-spacing: .12em; }
.brand-profile-content p { margin: 0; color: rgba(214, 226, 234, .8); font-size: 13px; line-height: 1.9; text-align: justify; }
.brand-profile-company { margin-top: auto; padding-top: 17px; color: rgba(129, 225, 245, .82); font-size: 12px; letter-spacing: .04em; }

.download-card::before, .download-card::after, .focus-qr::before, .focus-qr::after { display: none; }
.download-card { width: 272px; padding: 10px 10px 12px; border: 1px solid rgba(85, 234, 255, .24); border-radius: 17px; background: linear-gradient(145deg, rgba(18, 22, 42, .98), rgba(5, 7, 15, .98)); color: #eaf7fb; box-shadow: 0 18px 42px rgba(0, 0, 0, .66), inset 0 0 0 1px rgba(198, 80, 255, .07), 0 0 24px rgba(75, 232, 255, .08); }
.qr-effect-shell, .focus-qr { display: grid; place-items: center; overflow: hidden; isolation: isolate; border: 0; border-radius: 20px; background: linear-gradient(145deg, #12162a, #080a12); box-shadow: inset 0 0 0 1px rgba(136, 237, 255, .086), 0 18px 40px rgba(0, 0, 0, .53); }
.qr-effect-shell { position: relative; width: 250px; aspect-ratio: 1; margin: 0 auto; --qr-scan-travel: 184px; }
.focus-qr { --qr-scan-travel: calc(clamp(194px, 25vmin, 260px) * .736); padding: 0; background-color: #080a12; background-image: linear-gradient(145deg, #12162a, #080a12); background-size: auto; }
.qr-effect-shell .qr-effect-corners, .focus-qr > .qr-effect-corners { inset: 4%; border: 1px solid rgba(85, 234, 255, .15); border-radius: 16px; background-image: linear-gradient(rgba(72, 229, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 229, 255, .035) 1px, transparent 1px); background-size: 18px 18px; }
.qr-effect-shell .qr-effect-scan, .focus-qr > .qr-effect-scan { left: 10%; right: 10%; top: 13%; background: linear-gradient(90deg, transparent, #79efff, transparent); box-shadow: 0 0 7px #51eaff; opacity: .58; animation: qr-02-cyber-scan 4s ease-in-out infinite; }
.qr-shell, .focus-qr-frame { position: relative; z-index: 4; display: block; width: 75%; height: auto; aspect-ratio: 1; padding: 7px; overflow: visible; isolation: isolate; border-radius: 11px; background: #fff; box-shadow: 0 16px 38px rgba(0, 0, 0, .73), 0 0 24px rgba(75, 232, 255, .18); }
.qr-shell::before, .qr-shell::after, .focus-qr-frame::before, .focus-qr-frame::after { content: ""; position: absolute; inset: -2px; z-index: -1; padding: 1.5px; border-radius: 11px; background: conic-gradient(from var(--qr-flow-angle), rgba(255, 53, 94, .14) 0deg, rgba(255, 53, 94, .54) 38deg, #ff355e 87deg, rgba(255, 216, 77, .14) 90deg, rgba(255, 216, 77, .54) 128deg, #ffd84d 177deg, rgba(168, 85, 247, .14) 180deg, rgba(168, 85, 247, .52) 218deg, #a855f7 267deg, rgba(210, 240, 255, .15) 270deg, rgba(210, 240, 255, .54) 308deg, #fff 357deg, rgba(255, 53, 94, .14) 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; }
.qr-shell::after, .focus-qr-frame::after { inset: -4px; padding: 3px; opacity: .54; filter: blur(2px); }
.qr-shell img, .focus-qr img { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: cover; }
.download-card-caption { padding-top: 10px; color: rgba(199, 224, 234, .74); font-size: 13px; font-weight: 500; text-shadow: none; }
.download-card-caption strong { color: inherit; }

.cosmic-node.is-universe-user .node-visual { object-fit: contain; object-position: center center; transform: translateY(20%) scale(1.35); transform-origin: 50% 50%; }
.cosmic-node.no-circle-flow::before, .cosmic-node.no-circle-flow::after { display: none; }

@keyframes brand-profile-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 20% { opacity: .44; } 78% { opacity: .44; } 88%, 100% { transform: translateY(188px); opacity: 0; } }
@keyframes cyber-panel-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 20% { opacity: .52; } 78% { opacity: .52; } 88%, 100% { transform: translateY(184px); opacity: 0; } }
@keyframes qr-02-cyber-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 20% { opacity: .58; } 78% { opacity: .58; } 88%, 100% { transform: translateY(var(--qr-scan-travel)); opacity: 0; } }

@media (max-width: 720px) {
  .brand-profile { width: min(460px, calc(100vw - 24px)); grid-template-columns: 112px 1fr; min-height: 218px; }
  .brand-profile-visual { padding: 20px 10px; }
  .brand-profile-visual img { width: 82px; height: 82px; }
  .brand-profile-kicker { font-size: 7px; }
  .brand-profile-content { padding: 21px 20px 18px; }
  .brand-profile-content h2 { margin-bottom: 10px; font-size: 17px; }
  .brand-profile-content p { font-size: 11px; line-height: 1.75; }
  .brand-profile-company { padding-top: 12px; font-size: 10px; }
}