:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  background: #020617;
  color: #f8fbff;
  --wall-width: 14880px;
  --wall-height: 3510px;
  --tile-render-width: 100vw;
  --tile-render-height: 100vh;
  --scale: 1;
  --offset-x: 0px;
  --offset-y: 0px;
}

* {
  box-sizing: border-box;
}

[v-cloak] {
  display: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: #020617;
}

.viewport {
  position: relative;
  width: var(--tile-render-width);
  height: var(--tile-render-height);
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: #020617;
}

.wall {
  position: absolute;
  left: var(--offset-x);
  top: var(--offset-y);
  width: var(--wall-width);
  height: var(--wall-height);
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(var(--scale));
  background:
    radial-gradient(circle at 14% 16%, rgba(14, 165, 233, 0.22), transparent 23%),
    radial-gradient(circle at 78% 28%, rgba(20, 184, 166, 0.18), transparent 26%),
    linear-gradient(135deg, #020b1f 0%, #06172d 46%, #020617 100%);
}

.motion-canvas,
.grid-layer,
.scan-layer {
  position: absolute;
  inset: 0;
}

.grid-layer {
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.045) 2px, transparent 2px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.045) 2px, transparent 2px);
  background-size: 240px 240px;
  opacity: 0.86;
}

.scan-layer {
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(56, 189, 248, 0.16) 50%, transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 120px, rgba(125, 211, 252, 0.035) 124px 128px);
  background-size: 2400px 100%, 100% 100%;
  animation: scan 10s linear infinite;
}

.screen-header {
  position: absolute;
  z-index: 5;
  left: 340px;
  right: 340px;
  top: 160px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 160px;
}

h1,
h2,
p {
  margin: 0;
  letter-spacing: 0;
}

.eyebrow {
  margin-bottom: 34px;
  color: #67e8f9;
  font-size: 54px;
  line-height: 1;
  text-transform: uppercase;
}

h1 {
  color: #f8fbff;
  font-size: 172px;
  line-height: 1;
  font-weight: 860;
  text-shadow: 0 0 44px rgba(56, 189, 248, 0.5);
}

.header-metrics {
  display: grid;
  justify-items: end;
  gap: 24px;
  color: #dbeafe;
}

.header-metrics strong {
  font-size: 108px;
  line-height: 1;
}

.header-metrics span,
.header-metrics em {
  font-size: 48px;
  font-style: normal;
  color: #93c5fd;
}

.scene {
  position: absolute;
  z-index: 4;
  inset: 580px 340px 230px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(70px);
  transition: opacity 260ms linear, transform 260ms linear;
}

.scene.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero-copy {
  max-width: 6400px;
}

.hero-copy span {
  display: inline-block;
  margin-bottom: 34px;
  color: #38bdf8;
  font-size: 56px;
  font-weight: 760;
}

.hero-copy h2 {
  font-size: 156px;
  line-height: 1.05;
  font-weight: 860;
}

.hero-copy p {
  margin-top: 42px;
  max-width: 5800px;
  color: #dbeafe;
  font-size: 64px;
  line-height: 1.32;
}

.metric-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 760px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 58px;
}

.metric-card,
.stage-node,
.event-card {
  border: 4px solid rgba(125, 211, 252, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(8, 47, 73, 0.62)),
    rgba(15, 23, 42, 0.8);
  box-shadow:
    inset 0 0 76px rgba(14, 165, 233, 0.13),
    0 0 54px rgba(14, 165, 233, 0.16);
}

.metric-card {
  min-height: 430px;
  padding: 62px;
}

.metric-card span,
.event-card span {
  display: block;
  color: #7dd3fc;
  font-size: 48px;
}

.metric-card strong {
  display: block;
  margin-top: 36px;
  color: #ffffff;
  font-size: 122px;
  line-height: 1;
}

.metric-card small {
  display: block;
  margin-top: 28px;
  color: #a7f3d0;
  font-size: 44px;
}

.visual-stage {
  position: absolute;
  left: 0;
  top: 1360px;
  width: 11200px;
  height: 1320px;
}

.route-field {
  position: absolute;
  inset: 0;
}

.route-line {
  position: absolute;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, #38bdf8, #2dd4bf, transparent);
  box-shadow: 0 0 80px rgba(56, 189, 248, 0.46);
  transform-origin: left center;
  animation: routePulse 3.8s ease-in-out infinite;
}

.line-a { left: 620px; top: 210px; width: 6000px; transform: rotate(8deg); }
.line-b { left: 980px; top: 680px; width: 7600px; transform: rotate(-7deg); }
.line-c { left: 2600px; top: 1020px; width: 6400px; transform: rotate(5deg); }
.line-d { left: 1400px; top: 420px; width: 8800px; transform: rotate(0deg); }
.line-e { left: 2200px; top: 840px; width: 6600px; transform: rotate(-12deg); }
.line-f { left: 540px; top: 1060px; width: 9200px; transform: rotate(10deg); }

.stage-node {
  position: absolute;
  width: 1120px;
  min-height: 390px;
  padding: 60px;
  display: grid;
  align-content: center;
  gap: 26px;
}

.stage-node span {
  color: #bfdbfe;
  font-size: 58px;
}

.stage-node strong {
  color: #ffffff;
  font-size: 84px;
  line-height: 1;
}

.stage-node.cyan {
  border-color: rgba(34, 211, 238, 0.48);
}

.stage-node.blue {
  border-color: rgba(96, 165, 250, 0.48);
}

.stage-node.orange {
  border-color: rgba(251, 146, 60, 0.56);
}

.event-rail {
  position: absolute;
  right: 0;
  top: 1340px;
  width: 3600px;
  display: grid;
  gap: 34px;
}

.event-card {
  padding: 46px 56px;
  border-left: 18px solid #38bdf8;
}

.event-card strong {
  display: block;
  margin-top: 18px;
  color: #ffffff;
  font-size: 60px;
}

.event-card small {
  display: block;
  margin-top: 18px;
  color: #cbd5e1;
  font-size: 42px;
}

.motion-pulse .route-line {
  animation-duration: 1.8s;
}

.motion-orbit .stage-node {
  animation: nodeFloat 4.6s ease-in-out infinite;
}

.focus-edge .stage-node.orange,
.focus-core .stage-node.cyan {
  box-shadow:
    inset 0 0 96px rgba(125, 211, 252, 0.22),
    0 0 120px rgba(56, 189, 248, 0.38);
}

.theme-energy .event-card { border-left-color: #2dd4bf; }
.theme-security .event-card { border-left-color: #fb923c; }
.theme-command .event-card { border-left-color: #60a5fa; }
.theme-transport .event-card { border-left-color: #38bdf8; }
.theme-dataflow .event-card { border-left-color: #22d3ee; }

.hud {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  max-width: min(1120px, calc(100vw - 24px));
  padding: 9px 11px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  pointer-events: none;
}

.pulse {
  animation: flash 560ms ease;
}

@keyframes scan {
  from { background-position: -2400px 0, 0 0; }
  to { background-position: 2400px 0, 0 0; }
}

@keyframes routePulse {
  0%, 100% { opacity: 0.36; filter: brightness(0.9); }
  50% { opacity: 1; filter: brightness(1.35); }
}

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-26px); }
}

@keyframes flash {
  0% { outline: 18px solid rgba(56, 189, 248, 0.55); }
  100% { outline: 0 solid rgba(56, 189, 248, 0); }
}