styles.css

/* Custom page background */
body {
  min-width: 100%;
  min-height: 100vh;
  background:
        /* For small screens put each gradient at 500px width, this makes them merge nicely when narrow */ radial-gradient(
      ellipse 500px 80% at bottom 15% left -50px,
      #6a3428,
      transparent
    ),
    radial-gradient(ellipse 500px 80% at top 15% right -50px, #6a285c, black);
}

/* For larger screens put each gradient at 40% width, this keeps them prominent */
@media (min-width: 1024px) {
  body {
    background: radial-gradient(
        ellipse 40% 80% at bottom 15% left -50px,
        #6a3428,
        transparent
      ),
      radial-gradient(ellipse 40% 80% at top 15% right -50px, #6a285c, black);
  }
}

/* Clean Monaco cursor: see https://stackoverflow.com/a/68930913/1375972 */
.monaco-editor textarea:focus {
  box-shadow: none !important;
}

/* Custom button background */
.gradient-cta {
  background: linear-gradient(
    263.56deg,
    #f0c06f -0.6%,
    #da4142 49.43%,
    #8447a4 100%
  );
}

.editor-highlight-line {
  background-color: #333;
  z-index: -1;
}

.gradient-border {
  position: relative;
  z-index: 0;
  border-radius: 12px;
}

.gradient-border:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(
    263.56deg,
    #f0c06f -0.6%,
    #da4142 49.43%,
    #8447a4 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  overflow: hidden;
}

.add-icon {
  background-size: 40%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"/></svg>');
  cursor: pointer;
}

.add-icon:hover {
  background-color: #000;
}

.remove-icon {
  background-size: 40%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="white"><rect height="4" width="20" x="2" y="10" /></g></svg>');
  cursor: pointer;
}

.remove-icon:hover {
  background-color: #000;
}

.evaluation-step-view {
  left: -380px;
  top: -8px;
}

.evaluation-step-edit {
  left: -404px;
  top: -8px;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #efbb6c;
}