.devX {
  --editor-duration: 5s;

  .selectedText {
    background: linear-gradient(
      94deg,
      #5ccae2 5.39%,
      #0ca6f2 54.67%,
      #4374c4 100%
    );
    background-clip: text;
  }

  .editor {
    :global(#editor-l-2) {
      opacity: 0;
      animation: editor-l-2 var(--editor-duration) ease-in-out infinite;
    }

    :global(#editor-l-3-0) {
      opacity: 0;
      animation: editor-l-3-0 var(--editor-duration) ease-in-out infinite;
    }

    :global(#editor-l-3-1) {
      opacity: 0;
      animation: editor-l-3-1 var(--editor-duration) ease-in-out infinite;
    }

    :global(#editor-l-3-2),
    :global(#editor-l-4),
    :global(#editor-l-5),
    :global(#editor-l-6) {
      opacity: 0;
      animation: editor-l-3-2 var(--editor-duration) ease-in-out infinite;
    }
  }

  .editorRun {
    :global(#editor-run-btn) {
      opacity: 0.8;
      animation: editor-run-btn-blink var(--editor-duration) ease-in-out
        infinite;
    }
    :global(#editor-run-btn-hand) {
      opacity: 0;
      animation: editor-run-btn-hand var(--editor-duration) ease-in-out infinite;
    }
  }

  .editorResult {
    :global(#editor-result-content) {
      opacity: 0;
      animation: editor-result-content var(--editor-duration) ease-in-out
        infinite;
    }
  }
}

@keyframes editor-l-2 {
  5% {
    opacity: 0;
  }
  10%,
  100% {
    opacity: 1;
  }
}

@keyframes editor-l-3-0 {
  10% {
    opacity: 0;
  }
  15%,
  100% {
    opacity: 1;
  }
}

@keyframes editor-l-3-1 {
  15% {
    opacity: 0;
  }
  20%,
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}

@keyframes editor-l-3-2 {
  35% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}

@keyframes editor-run-btn-blink {
  55% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0.4;
  }
}

@keyframes editor-run-btn-hand {
  55% {
    opacity: 0;
  }
  56%,
  100% {
    opacity: 1;
  }
}

@keyframes editor-result-content {
  60% {
    opacity: 0;
  }
  65%,
  100% {
    opacity: 1;
  }
}