:root {
  --gx-type-body: clamp(14px, .18vw + 13px, 17px);
  --gx-type-small: clamp(12px, .12vw + 11px, 14px);
  --gx-control-min: 44px;
  --gx-content-wide: 1880px;
  --gx-motion-fast: 150ms;
  --gx-motion-medium: 280ms;
  --gx-motion-slow: 900ms;
  --gx-ease-command: cubic-bezier(.2,.8,.2,1);
}

html[data-gx-motion="reduced"] {
  --gx-motion-fast: 90ms;
  --gx-motion-medium: 140ms;
  --gx-motion-slow: 240ms;
}

body { font-size: var(--gx-type-body); }

.gx-navigation-preview button,
.gx-navigation-preview select,
.gx-navigation-preview .gx-classic-sidebar-link,
.gx-navigation-preview .gx-classic-mobile-center-btn,
.gx-hud-shell button,
.gx-hud-shell select,
.gx-hud-shell .gx-hud-link {
  min-height: var(--gx-control-min);
}

.gx-ambient-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.gx-ambient-layer::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 18% 18%, rgba(0,188,255,.065), transparent 28%),
    radial-gradient(circle at 78% 38%, rgba(139,92,246,.05), transparent 30%);
  animation: gxAmbientDrift 24s ease-in-out infinite alternate;
}

.gx-ambient-layer i {
  position: absolute;
  left: var(--gx-p-x);
  top: var(--gx-p-y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(150,225,255,.55);
  box-shadow: 0 0 8px rgba(0,187,255,.38);
  animation: gxAmbientParticle var(--gx-p-duration) linear var(--gx-p-delay) infinite;
}

@keyframes gxAmbientDrift {
  from { transform: translate3d(-1.5%, -.5%, 0) scale(1); }
  to { transform: translate3d(1.5%, .8%, 0) scale(1.035); }
}

@keyframes gxAmbientParticle {
  0% { opacity: 0; transform: translate3d(0, 18px, 0); }
  18%, 76% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(14px, -28px, 0); }
}

[data-gx-animate] { opacity: 0; transform: translateY(7px); }
[data-gx-animate].is-gx-visible { opacity: 1; transform: none; transition: opacity var(--gx-motion-medium) var(--gx-ease-command), transform var(--gx-motion-medium) var(--gx-ease-command); }

.gx-value-pulse { position: relative; animation: gxValuePulse var(--gx-motion-medium) var(--gx-ease-command); }
.gx-value-pulse.is-positive { --gx-pulse-color: rgba(55,255,170,.48); }
.gx-value-pulse.is-negative { --gx-pulse-color: rgba(255,88,110,.52); }
.gx-value-delta{position:absolute;right:0;bottom:calc(100% + 2px);z-index:8;font:800 .58rem/1 'Orbitron',sans-serif;white-space:nowrap;pointer-events:none;animation:gxValueDelta .9s var(--gx-ease-command) both}
.gx-value-delta.is-positive{color:#42f5ad}.gx-value-delta.is-negative{color:#ff7188}
@keyframes gxValuePulse { 45% { color: #fff; text-shadow: 0 0 14px var(--gx-pulse-color); transform: translateY(-1px); } }
@keyframes gxValueDelta{0%{opacity:0;transform:translateY(3px)}20%,68%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5px)}}

.gx-page-enter body { animation: gxPageEnter var(--gx-motion-medium) var(--gx-ease-command) both; }
@keyframes gxPageEnter { from { opacity: .78; } to { opacity: 1; } }

html[data-gx-motion="reduced"] .gx-ambient-layer i:nth-child(n+7),
html[data-gx-quality="low"] .gx-ambient-layer i:nth-child(n+5) { display: none; }

html[data-gx-motion="reduced"] .gx-ambient-layer::before { animation-duration: 60s; opacity: .62; }

html[data-gx-motion="off"] *,
html[data-gx-motion="off"] *::before,
html[data-gx-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

html[data-gx-motion="off"] .gx-ambient-layer,
html[data-gx-motion="off"] [data-gx-decorative-motion] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-gx-motion="full"]) *,
  html:not([data-gx-motion="full"]) *::before,
  html:not([data-gx-motion="full"]) *::after {
    scroll-behavior: auto !important;
  }
}

@media (min-width: 2100px) {
  .gx-hud-shell,
  .space-shell.gx-navigation-preview,
  .gx-command-center-shell { max-width: var(--gx-content-wide); margin-inline: auto; }
}

@media (max-width: 760px), (pointer: coarse) {
  :root { --gx-control-min: 44px; --gx-type-body: 15px; --gx-type-small: 13px; }
  .gx-ambient-layer::before { opacity: .45; }
  .gx-ambient-layer i:nth-child(n+6) { display: none; }
}