.method .architecture-scene {
  background:
    radial-gradient(ellipse at 76% 20%, rgba(78,108,220,.09), transparent 34rem),
    radial-gradient(ellipse at 22% 82%, rgba(222,39,55,.07), transparent 31rem),
    linear-gradient(145deg, #111a27, #080e16 76%);
}

.method .architecture-copy {
  max-width: 500px;
}

.method .architecture-label {
  color: #ff666d;
}

.method .architecture-copy > p:not(.architecture-label) {
  max-width: 46ch;
  color: rgba(237,242,250,.76);
}

.method .architecture-legend span {
  color: rgba(244,247,252,.79);
  background: rgba(12,19,29,.88);
}

.method .system-stage {
  transform: none !important;
  transform-style: flat;
  perspective: none;
  will-change: auto !important;
}

.method .system-grid-plane,
.method .system-coordinates,
.method .system-ruler {
  display: none !important;
}

.method .system-signature span {
  color: rgba(235,241,251,.56);
}

.method .system-signature b {
  color: rgba(255,255,255,.82);
}

.method .system-plane {
  --entry-x: 0px;
  --entry-y: 24px;
  --entry-r: 0deg;
  --rest-r: 0deg;
  --card-delay: 0ms;
  opacity: .001 !important;
  transform: translate3d(var(--entry-x), var(--entry-y), 0) rotate(var(--entry-r)) scale(.965) !important;
  transition:
    opacity .46s ease var(--card-delay),
    transform .76s cubic-bezier(.16,1,.3,1) var(--card-delay),
    border-color .28s ease,
    box-shadow .28s ease !important;
  will-change: transform, opacity;
}

.method .system-plane-ui {
  --entry-x: -46px;
  --entry-y: 28px;
  --entry-r: -4.8deg;
  --rest-r: -1.1deg;
  --card-delay: 0ms;
}

.method .system-plane-logic {
  --entry-x: 48px;
  --entry-y: 20px;
  --entry-r: 4.6deg;
  --rest-r: 1.1deg;
  --card-delay: 95ms;
}

.method .system-plane-data {
  --entry-x: -40px;
  --entry-y: -22px;
  --entry-r: 3.6deg;
  --rest-r: .8deg;
  --card-delay: 180ms;
}

.method .system-plane-api {
  --entry-x: 43px;
  --entry-y: -24px;
  --entry-r: -3.8deg;
  --rest-r: -.8deg;
  --card-delay: 265ms;
}

.method .is-system-active .system-plane {
  opacity: 1 !important;
  transform: translate3d(0,0,0) rotate(var(--rest-r)) scale(1) !important;
}

.method .system-stage.is-system-settled .system-plane {
  transition-delay: 0ms !important;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .method .system-stage.is-system-settled .system-plane:hover {
    z-index: 5;
    border-color: rgba(239,246,255,.42);
    box-shadow:
      0 24px 54px rgba(0,0,0,.46),
      0 0 0 1px rgba(255,255,255,.04),
      inset 0 1px 0 rgba(255,255,255,.12);
    transform: translate3d(0,-5px,0) rotate(var(--rest-r)) scale(1.012) !important;
  }
}

@media (max-width: 900px) {
  .method .system-plane {
    --entry-y: 20px;
    --card-delay: 0ms;
  }

  .method .system-plane-ui { --entry-x: -24px; --card-delay: 0ms; }
  .method .system-plane-logic { --entry-x: 24px; --card-delay: 80ms; }
  .method .system-plane-data { --entry-x: -24px; --entry-y: 20px; --card-delay: 160ms; }
  .method .system-plane-api { --entry-x: 24px; --entry-y: 20px; --card-delay: 240ms; }
}

@media (max-width: 720px) {
  .method .architecture-copy {
    max-width: none;
  }

  .method .system-plane,
  .method .system-plane-ui,
  .method .system-plane-logic,
  .method .system-plane-data,
  .method .system-plane-api {
    --entry-r: 0deg;
    --rest-r: 0deg;
    --entry-x: 0px;
    --entry-y: 18px;
  }

  .method .system-plane strong {
    font-size: 1.05rem;
  }

  .method .system-signature {
    position: relative;
    right: auto;
    bottom: auto;
    justify-content: space-between;
    margin: 2px 6px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method .system-plane {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}