.novex-cube-animation {
  --novex-scene-scale: 1;
  position: relative;
  width: min(100%, 430px);
  height: 420px;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  perspective: 900px;
}

.novex-cube-animation--home {
  --novex-scene-scale: 1.28;
  width: min(100%, 560px);
  height: 540px;
}

.novex-cube-animation--loader {
  border: 1px solid rgba(120,100,255,.28);
  border-radius: 22px;
  background: #040711;
}

.novex-cube-title,
.novex-cube-status {
  position: absolute;
  top: 13px;
  z-index: 10;
  color: #777d95;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.novex-cube-title { left: 15px; }
.novex-cube-status { right: 15px; }

.novex-cube-grid,
.novex-cube-glow { position: absolute; inset: 0; pointer-events: none; }
.novex-cube-grid {
  opacity: .48;
  background: linear-gradient(rgba(95,120,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(95,120,255,.055) 1px,transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle,#000 20%,transparent 70%);
  mask-image: radial-gradient(circle,#000 20%,transparent 70%);
}
.novex-cube-glow { background: radial-gradient(circle at 50% 48%,rgba(100,65,255,.24),transparent 42%); }
.novex-cube-scene {
  position: absolute;
  width: 340px;
  height: 340px;
  left: 50%;
  top: 51%;
  transform: translate(-50%,-50%) scale(var(--novex-scene-scale));
  transform-style: preserve-3d;
  perspective: 900px;
}

.novex-cube-floor {
  position: absolute;
  width: 280px;
  height: 115px;
  left: 50%;
  top: 68%;
  border: 1px solid rgba(100,220,255,.35);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(80,80,255,.35),inset 0 0 35px rgba(110,70,255,.15);
  animation: novex-cube-floor-spin 7s linear infinite;
}
.novex-cube-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(100,190,255,.32);
  border-radius: 50%;
  transform-style: preserve-3d;
}
.novex-cube-ring--one { width: 265px; height: 265px; animation: novex-cube-ring-one 5s linear infinite; }
.novex-cube-ring--two { width: 225px; height: 225px; border-color: rgba(180,100,255,.28); animation: novex-cube-ring-two 6s linear infinite; }

.novex-big-cube-wrap {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 120px;
  height: 120px;
  transform: translate(-50%,-50%);
  transform-style: preserve-3d;
  perspective: 500px;
}
.novex-big-cube { width: 120px; height: 120px; transform-style: preserve-3d; animation: novex-big-cube-spin 8s linear infinite; }
.novex-big-face {
  position: absolute;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(120,90,255,.58);
  background: rgba(70,50,200,.065);
  box-shadow: inset 0 0 24px rgba(94,74,255,.035);
}
.novex-big-face::before,.novex-big-face::after { content: ""; position: absolute; }
.novex-big-face::before { inset: 8px; border: 1px solid rgba(140,110,255,.25); }
.novex-big-face::after { inset: 20px; border: 1px solid rgba(100,200,255,.15); }
.novex-big-face--front { transform: translateZ(60px); }
.novex-big-face--back { transform: rotateY(180deg) translateZ(60px); }
.novex-big-face--left { transform: rotateY(-90deg) translateZ(60px); }
.novex-big-face--right { transform: rotateY(90deg) translateZ(60px); }
.novex-big-face--top { transform: rotateX(90deg) translateZ(60px); }
.novex-big-face--bottom { transform: rotateX(-90deg) translateZ(60px); }

.novex-corner {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9d65ff;
  box-shadow: 0 0 8px #9d65ff,0 0 18px #7040ff;
}
.novex-corner--tl { top: 4px; left: 4px; }
.novex-corner--tr { top: 4px; right: 4px; }
.novex-corner--bl { bottom: 4px; left: 4px; }
.novex-corner--br { right: 4px; bottom: 4px; }
.novex-edge { position: absolute; }
.novex-edge--top,.novex-edge--bottom { left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg,transparent,rgba(130,100,255,.5),transparent); }
.novex-edge--top { top: 0; }
.novex-edge--bottom { bottom: 0; }
.novex-edge--left,.novex-edge--right { top: 0; bottom: 0; width: 1.5px; background: linear-gradient(transparent,rgba(130,100,255,.5),transparent); }
.novex-edge--left { left: 0; }
.novex-edge--right { right: 0; }
.novex-center-orb {
  width: 22px;
  height: 22px;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle,#c490ff,#7040ff);
  box-shadow: 0 0 18px #9d65ff,0 0 35px rgba(157,101,255,.5);
  animation: novex-cube-orb-pulse 1.6s ease-in-out infinite;
}

.novex-small-cubes { position: absolute; inset: 0; transform-style: preserve-3d; }
.novex-small-cube {
  position: absolute;
  left: var(--cube-x);
  top: var(--cube-y);
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation-duration: var(--cube-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.novex-small-cube--spin-a { animation-name: novex-small-cube-spin-a; }
.novex-small-cube--spin-b { animation-name: novex-small-cube-spin-b; }
.novex-small-cube--spin-c { animation-name: novex-small-cube-spin-c; }
.novex-small-face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  border: 1px solid rgba(120,90,255,.5);
  background: rgba(80,60,200,.07);
}
.novex-small-cube--cyan .novex-small-face { border-color: rgba(60,210,255,.44); background: rgba(40,190,240,.065); }
.novex-small-cube--pink .novex-small-face { border-color: rgba(180,100,255,.48); background: rgba(140,60,200,.075); }
.novex-small-face--front { transform: translateZ(var(--cube-half)); }
.novex-small-face--back { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.novex-small-face--left { transform: rotateY(90deg) translateZ(var(--cube-half)); }
.novex-small-face--right { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.novex-small-face--top { transform: rotateX(90deg) translateZ(var(--cube-half)); }
.novex-small-face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

.novex-candles {
  position: absolute;
  left: 50%;
  bottom: 55px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  transform: translateX(-50%);
  animation: novex-candles-float 3.5s ease-in-out infinite;
}
.novex-candle {
  --candle-color: #1de17e;
  --candle-light: #26f790;
  --candle-dark: #0a4f28;
  --candle-edge: rgba(60,255,140,.7);
  --candle-glow: rgba(30,225,120,.6);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 10px var(--candle-glow));
}
.novex-candle--red { --candle-color: #e13050; --candle-light: #f72858; --candle-dark: #4f0a17; --candle-edge: rgba(255,60,100,.7); --candle-glow: rgba(225,30,70,.6); }
.novex-candle-wick { width: 2px; border-radius: 3px; background: var(--candle-edge); }
.novex-candle-wick--top { height: 13px; }
.novex-candle-wick--bottom { height: 9px; }
.novex-candle-body { position: relative; width: 21px; height: 55px; }
.novex-candle-front { position: absolute; inset: 0; border: 1px solid var(--candle-edge); border-radius: 3px; background: linear-gradient(180deg,var(--candle-light),var(--candle-color) 34%,var(--candle-dark)); }
.novex-candle-front::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px; background: linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.08) 60%,transparent); }
.novex-candle-side { position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; border-radius: 0 2px 2px 0; background: var(--candle-dark); }
.novex-candle-top { position: absolute; top: -3px; left: 0; right: -5px; height: 5px; border: 1px solid var(--candle-edge); border-radius: 2px 2px 0 0; background: var(--candle-color); transform: skewX(-8deg) translateY(1px); }
.novex-candle-bottom { position: absolute; right: -5px; bottom: -3px; left: 0; height: 4px; border-radius: 0 0 2px 2px; background: var(--candle-dark); transform: skewX(-8deg) translateY(-1px); }
.novex-candle-glow { position: absolute; bottom: -8px; left: 50%; width: 36px; height: 7px; border-radius: 50%; background: var(--candle-glow); filter: blur(6px); animation: novex-candle-glow 1.8s ease-in-out infinite; }

.novex-cube-scan {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#9d65ff,#60edff,#9d65ff,transparent);
  box-shadow: 0 0 12px #8c5cff,0 0 25px #5deaff;
  animation: novex-cube-scan 1.7s ease-in-out infinite;
}

.novex-cube-percent {
  position: absolute;
  top: 43px;
  left: 0;
  right: 0;
  z-index: 8;
  color: #aeb2c4;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.novex-cube-progress {
  position: absolute;
  left: 55px;
  right: 55px;
  bottom: 48px;
  z-index: 8;
  height: 3px;
  overflow: hidden;
  border-radius: 5px;
  background: #171a29;
}

.novex-cube-progress > i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,#7652ff,#c76cff,#54e6ff);
  transition: width .15s linear;
}

.novex-cube-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 29px;
  z-index: 8;
  color: #777c91;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.novex-cube-stage span { color: #c179ff; }
.novex-cube-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60eaff;
  box-shadow: 0 0 12px #60eaff;
  animation: novex-cube-particle 2s infinite;
}
.novex-cube-particle--1 { left: 45px; top: 110px; }
.novex-cube-particle--2 { right: 43px; top: 145px; animation-delay: .3s; }
.novex-cube-particle--3 { left: 65px; bottom: 95px; animation-delay: .6s; }
.novex-cube-particle--4 { right: 68px; bottom: 105px; animation-delay: .9s; }
.novex-cube-particle--5 { left: 100px; top: 70px; animation-delay: 1.2s; }
.novex-cube-particle--6 { right: 100px; top: 78px; animation-delay: 1.5s; }

.live-loading-state.has-cube-animation::before,.chart-loading-card.has-cube-animation::before { display: none !important; }
.live-loading-state.has-cube-animation,.chart-loading-card.has-cube-animation { padding: 0 !important; }

@keyframes novex-cube-floor-spin { from { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); } }
@keyframes novex-cube-ring-one { from { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(360deg); } }
@keyframes novex-cube-ring-two { from { transform: translate(-50%,-50%) rotateY(65deg); } to { transform: translate(-50%,-50%) rotateY(425deg); } }
@keyframes novex-big-cube-spin { from { transform: rotateX(20deg) rotateY(0) rotateZ(8deg); } to { transform: rotateX(20deg) rotateY(360deg) rotateZ(8deg); } }
@keyframes novex-cube-orb-pulse { 0%,100% { opacity: .7; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes novex-small-cube-spin-a { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes novex-small-cube-spin-b { to { transform: rotateX(-360deg) rotateY(180deg) rotateZ(360deg); } }
@keyframes novex-small-cube-spin-c { from { transform: rotateX(30deg) rotateY(0); } to { transform: rotateX(30deg) rotateY(-360deg); } }
@keyframes novex-candles-float { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 8px; } }
@keyframes novex-candle-glow { 0%,100% { opacity: .5; transform: translateX(-50%) scaleX(.8); } 50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); } }
@keyframes novex-cube-scan { 0%,100% { opacity: 0; transform: translateY(-155px); } 20%,80% { opacity: 1; } 50% { transform: translateY(155px); } }
@keyframes novex-cube-particle { 0%,100% { opacity: .15; transform: translateY(8px); } 50% { opacity: 1; transform: translateY(-15px); } }

@media (max-width: 680px) {
  .novex-cube-animation--home { --novex-scene-scale: .98; height: 420px; }
}
@media (max-width: 620px) {
  .novex-cube-animation--loader { height: 390px; }

  .live-result-card > .live-loading-state.has-cube-animation {
    width: calc(100% + 34px);
    max-width: none;
    margin: -17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .novex-cube-animation *,.novex-cube-animation *::before,.novex-cube-animation *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}