.surface {
  border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
  background:
    linear-gradient(
      109deg,
      var(--color-background-section, #f9fafb) 0%,
      var(--color-background-section-burn, #f2f4f7) 100%
    ),
    var(--color-components-panel-bg, #fff);
}

.heroOverlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 54px 54px;
  background-position: 31px -23px;
  background-repeat: repeat;
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
}

.icon {
  border: 0.5px solid transparent;
  background:
    linear-gradient(
      180deg,
      var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%,
      var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%
    ),
    var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
}

.highlight {
  background: linear-gradient(
    97deg,
    var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%,
    var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
