.method .system-plane {
  --local-x: 0;
  --local-y: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  display: grid !important;
  grid-template-rows: auto auto minmax(58px, 1fr) 44px;
  align-content: stretch;
  overflow: hidden;
}

.method .system-plane strong {
  grid-row: 1;
  align-self: start;
}

.method .system-plane small {
  grid-row: 2;
  align-self: start;
}

.method .system-plane p {
  grid-row: 3;
  align-self: start;
  min-height: 0;
  margin: 17px 0 0;
}

.method .system-lines,
.method .system-code,
.method .system-bars,
.method .system-plane-api em {
  grid-row: 4;
  align-self: end;
  margin: 0 !important;
}

.method .system-lines {
  display: grid;
  align-content: end;
  gap: 8px;
  width: 100%;
  height: 44px;
}

.method .system-lines i {
  display: block;
  width: 72%;
  height: 4px;
  margin: 0 !important;
  border-radius: 99px;
  background: rgba(100, 125, 220, .50);
}

.method .system-lines i:nth-child(2) {
  width: 48%;
}

.method .system-lines i:nth-child(3) {
  width: 86%;
  background: rgba(205, 48, 61, .52);
}


html body .method .system-plane::before {
  background:
    radial-gradient(circle 190px at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .105), transparent 64%),
    linear-gradient(118deg, rgba(255, 255, 255, .08), transparent 31% 76%, rgba(126, 151, 232, .035));
  opacity: .68;
  transform: none;
  transition: opacity .28s ease;
}

html body .method .system-plane::after {
  inset: 0;
  padding: 1px;
  border: 0 !important;
  border-radius: inherit;
  background:
    radial-gradient(circle 170px at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .92), rgba(140, 164, 242, .30) 34%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(111, 137, 224, .08) 48%, rgba(255, 255, 255, .12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .78;
  transition: opacity .28s ease;
}


html.js .method .system-plane.is-scroll-card {
  --card-entry-x: -42px;
  --card-entry-y: 42px;
  --card-entry-ry: 7deg;
  --card-entry-delay: 0ms;
  opacity: .001 !important;
  transform:
    perspective(1050px)
    translate3d(var(--card-entry-x), var(--card-entry-y), -110px)
    rotateX(8deg)
    rotateY(var(--card-entry-ry))
    scale(.94) !important;
  transform-origin: 50% 64%;
  transition:
    opacity .50s ease var(--card-entry-delay),
    transform .84s cubic-bezier(.16, 1, .3, 1) var(--card-entry-delay),
    border-color .28s ease,
    box-shadow .34s ease !important;
}

html.js .method .system-plane-logic.is-scroll-card,
html.js .method .system-plane-api.is-scroll-card {
  --card-entry-x: 42px;
  --card-entry-ry: -7deg;
}

html.js .method .system-plane-logic.is-scroll-card { --card-entry-delay: 70ms; }
html.js .method .system-plane-data.is-scroll-card { --card-entry-delay: 120ms; }
html.js .method .system-plane-api.is-scroll-card { --card-entry-delay: 180ms; }

html.js .method .system-plane.is-scroll-card.is-card-visible {
  opacity: 1 !important;
  transform: perspective(1050px) translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(1) !important;
}

html.js .method .system-plane.is-card-settled {
  transition:
    transform .38s cubic-bezier(.16, 1, .3, 1),
    border-color .26s ease,
    box-shadow .32s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.js body .method .system-plane.is-card-settled:hover {
    z-index: 4;
    border-color: rgba(226, 236, 253, .40) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .16),
      0 10px 0 -6px #060c14,
      0 31px 58px rgba(0, 0, 0, .48),
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 0 0 1px rgba(3, 8, 15, .40) !important;
    transform: translate3d(0, -6px, 0) !important;
  }

  html body .method .system-plane.is-card-settled:hover::before,
  html body .method .system-plane.is-card-settled:hover::after {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 620px) {
  .method .system-plane {
    grid-template-rows: auto auto minmax(50px, 1fr) 40px;
  }

  html.js .method .system-plane.is-scroll-card,
  html.js .method .system-plane-logic.is-scroll-card,
  html.js .method .system-plane-data.is-scroll-card,
  html.js .method .system-plane-api.is-scroll-card {
    --card-entry-x: 0px;
    --card-entry-y: 34px;
    --card-entry-ry: 0deg;
    --card-entry-delay: 0ms;
    transform:
      perspective(900px)
      translate3d(0, var(--card-entry-y), -72px)
      rotateX(7deg)
      scale(.955) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .method .system-plane.is-scroll-card,
  html.js .method .system-plane.is-scroll-card.is-card-visible,
  html.js .method .system-plane.is-card-settled:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}