.crs-cube-stage {
  margin-top: 15px;
  --crs-cube-edge: 230px;

  display: grid;
  place-items: center;
  min-height: 393px;
  perspective: calc(var(--crs-cube-edge) * 11.3);
  perspective-origin: 50% 50%;
  position: relative;
  z-index: 1;
}

.crs-cube {
  position: relative;
  width: var(--crs-cube-edge);
  height: var(--crs-cube-edge);
  transform-style: preserve-3d;

  transform: rotateX(-35.264deg) rotateY(-45deg);
  will-change: transform;
}

.crs-cube__face {
  position: absolute;
  inset: 0;

  overflow: visible;

  backface-visibility: hidden;
}

.crs-cube__face svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crs-cube__face--front {
  transform: translateZ(calc(var(--crs-cube-edge) / 2));
}
.crs-cube__face--right {
  transform: rotateY(90deg) translateZ(calc(var(--crs-cube-edge) / 2));
}
.crs-cube__face--top {
  transform: rotateX(90deg) translateZ(calc(var(--crs-cube-edge) / 2));
}

@media (max-width: 1199px) {
  .crs-cube-stage {
    --crs-cube-edge: 190px;
    min-height: 327px;
  }
}

@media (max-width: 991px) {
  .crs-cube-stage {
    --crs-cube-edge: 150px;
    min-height: 255px;
  }
}

@media (max-width: 575px) {
  .crs-cube-stage {
    --crs-cube-edge: 130px;
    min-height: 221px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crs-cube {
    will-change: auto;
  }
}

.crs-cube-stage--glass {
  --crs-explode: 0px;
  --crs-explode-open: calc(var(--crs-cube-edge) * 0.14);


  --crs-glass-out: calc(var(--crs-cube-edge) / 2 + var(--crs-explode));
  --crs-glass-far: calc(var(--crs-cube-edge) / 2 - 0.75px + var(--crs-explode));
}

.crs-cube-stage--glass .crs-cube__face {
  backface-visibility: visible;
  background-image: linear-gradient(
    135deg,
    rgba(14, 103, 161, 0.14),
    rgba(14, 103, 161, 0.09) 55%,
    rgba(14, 103, 161, 0.06)
  );
  box-shadow:
    inset 0 0 0 1px rgba(43, 138, 208, 0.55),
    0 0 12px rgba(43, 138, 208, 0.25);
}

.crs-cube-stage--glass .crs-cube__face--back,
.crs-cube-stage--glass .crs-cube__face--left,
.crs-cube-stage--glass .crs-cube__face--bottom {
  background-image: linear-gradient(
    135deg,
    rgba(14, 103, 161, 0.09),
    rgba(14, 103, 161, 0.06) 55%,
    rgba(14, 103, 161, 0.04)
  );
  box-shadow: inset 0 0 0 1px rgba(43, 138, 208, 0.26);
}

.crs-cube-stage--glass .crs-cube__face--front {
  transform: translateZ(var(--crs-glass-out));
}
.crs-cube-stage--glass .crs-cube__face--right {
  transform: rotateY(90deg) translateZ(var(--crs-glass-out));
}
.crs-cube-stage--glass .crs-cube__face--top {
  transform: rotateX(90deg) translateZ(var(--crs-glass-out));
}
.crs-cube-stage--glass .crs-cube__face--back {
  transform: rotateY(180deg) translateZ(var(--crs-glass-far));
}
.crs-cube-stage--glass .crs-cube__face--left {
  transform: rotateY(-90deg) translateZ(var(--crs-glass-far));
}
.crs-cube-stage--glass .crs-cube__face--bottom {
  transform: rotateX(-90deg) translateZ(var(--crs-glass-far));
}

.crs-cube-stage--glass .crs-cube__face--front::after,
.crs-cube-stage--glass .crs-cube__face--top::after {
  --crs-glass-tick: rgba(143, 195, 234, 0.38);

  content: '';
  position: absolute;
  inset: 5.5%;

  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick)),
    linear-gradient(var(--crs-glass-tick), var(--crs-glass-tick));
  background-repeat: no-repeat;
  background-size:
    14% 1px,
    1px 14%,
    14% 1px,
    1px 14%,
    14% 1px,
    1px 14%,
    14% 1px,
    1px 14%;
  background-position:
    0 0,
    0 0,
    100% 0,
    100% 0,
    0 100%,
    0 100%,
    100% 100%,
    100% 100%;
}

.crs-cube-stage--glass .crs-cube__face {
  background-image: linear-gradient(
    135deg,
    rgba(14, 103, 161, 0.16),
    rgba(14, 103, 161, 0.1) 55%,
    rgba(14, 103, 161, 0.06)
  );
  box-shadow:
    inset 0 0 0 1px rgba(43, 138, 208, 0.55),
    0 0 12px rgba(14, 103, 161, 0.22);
}
.crs-cube-stage--glass .crs-cube__face--back,
.crs-cube-stage--glass .crs-cube__face--left,
.crs-cube-stage--glass .crs-cube__face--bottom {
  background-image: linear-gradient(
    135deg,
    rgba(14, 103, 161, 0.1),
    rgba(14, 103, 161, 0.06) 55%,
    rgba(14, 103, 161, 0.04)
  );
  box-shadow: inset 0 0 0 1px rgba(43, 138, 208, 0.26);
}

.crs-cube-stage--glass .crs-cube__face--top .crs-cube__glyph-top {
  fill: var(--crs-hero-blue, #0e67a1);
}
.crs-cube-stage--glass .crs-cube__face--top .crs-cube__glyph-side {
  fill: var(--crs-hero-blue-deep, #004e80);
}
.crs-cube-stage--glass .crs-cube__face--front::after,
.crs-cube-stage--glass .crs-cube__face--top::after {
  --crs-glass-tick: rgba(170, 190, 210, 0.38);
}

.crs-cube-stage--glass .crs-cube__face {
  --crs-scan-line: linear-gradient(
    to bottom,
    transparent,
    rgba(143, 195, 234, 0.05) 22%,
    rgba(143, 195, 234, 0.3) 50%,
    rgba(143, 195, 234, 0.05) 78%,
    transparent
  );
}

.crs-cube-stage--glass .crs-cube__face--front::before,
.crs-cube-stage--glass .crs-cube__face--right::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: inset(0);
  background-image: var(--crs-scan-line);
  background-repeat: no-repeat;

  background-size: 100% 8%;
  background-position: 0 -14%;
}

.crs-cube-stage--glass .crs-cube__face svg {
  position: relative;
  z-index: 2;
  width: 82%;
  height: 82%;
  margin: 9%;

  overflow: visible;
}

.crs-cube-stage--glass .crs-cube__face--top svg {
  width: 84%;
  height: 84%;
  margin: 6%;

}

.crs-cube-stage--glass .crs-cube__face svg defs path {
  fill: inherit;
}

.crs-cube-stage--glass .crs-cube__face--front .crs-cube__glyph-top,
.crs-cube-stage--glass .crs-cube__face--right .crs-cube__glyph-top {




        fill: rgba(216, 216, 216, 0.2);

  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.crs-cube-stage--glass .crs-cube__face--front .crs-cube__glyph-side,
.crs-cube-stage--glass .crs-cube__face--right .crs-cube__glyph-side {

  fill: none;

  stroke: rgba(74, 74, 74, 0.2);

  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.crs-cube__glint {
  display: none;
}
.crs-cube-stage--glass .crs-cube__glint {
  display: block;
  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;
  -webkit-mask: var(--crs-glint-mask) no-repeat 50% 50% / 82% 82%;
  mask: var(--crs-glint-mask) no-repeat 50% 50% / 82% 82%;

  background-image: var(--crs-scan-line);
  background-repeat: no-repeat;
  background-size: 100% 8%;
  background-position: 0 -14%;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes crs-glass-scan {
    0% {
      background-position: 0 -14%;
    }
    100% {
      background-position: 0 114%;
    }
  }

  .crs-cube-stage--glass .crs-cube__face--front::before,
  .crs-cube-stage--glass .crs-cube__face--right::before,
  .crs-cube-stage--glass .crs-cube__glint {
    animation: crs-glass-scan 5.2s linear infinite;
  }


  .crs-cube-stage--glass .crs-cube__face {
    transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .crs-cube-stage--glass.is-hover {
    --crs-explode: var(--crs-explode-open);
  }
}

@media (max-width: 1199px) {
  .crs-cube-stage--glass {
    --crs-explode-open: calc(var(--crs-cube-edge) * 0.1);
  }
}