.qsrc,
.qsrc * {
  box-sizing: border-box;
}

.qsrc {
  --qsrc-accent: #6619ff;
  --qsrc-accent-soft: #9467ff;
  --qsrc-track: #eee8ff;
  --qsrc-text: #16131f;
  --qsrc-muted: #716a80;
  --qsrc-result-soft: #f0eaff;

  width: 100%;
  min-width: 0;
  color: var(--qsrc-text);
  font-family: inherit;
}

.qsrc__controls {
  display: grid;
  gap: 36.8px;
}

.qsrc__control {
  min-width: 0;
}

.qsrc__control-heading,
.qsrc__scale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.qsrc__control-heading {
  margin-bottom: 22.4px;
}

.qsrc__label,
.qsrc__current {
  margin: 0;
  font-size: 14.4px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: 0;
}

.qsrc__current {
  flex: 0 0 auto;
  color: var(--qsrc-accent);
}

.qsrc__range {
  --qsrc-progress: 0%;

  appearance: none;
  display: block;
  width: 100%;
  height: 17.6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(
    90deg,
    var(--qsrc-accent) 0%,
    var(--qsrc-accent-soft) var(--qsrc-progress),
    var(--qsrc-track) var(--qsrc-progress),
    var(--qsrc-track) 100%
  );
  cursor: pointer;
}

.qsrc__range::-webkit-slider-runnable-track {
  width: 100%;
  height: 22.4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.qsrc__range::-webkit-slider-thumb {
  appearance: none;
  width: 30.4px;
  height: 30.4px;
  margin-top: -4px;
  border: 0.8px solid #e1dce9;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1.6px 5.6px rgb(20 17 31 / 16%);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.qsrc__range::-moz-range-track {
  width: 100%;
  height: 22.4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.qsrc__range::-moz-range-progress {
  height: 22.4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--qsrc-accent),
    var(--qsrc-accent-soft)
  );
}

.qsrc__range::-moz-range-thumb {
  width: 30.4px;
  height: 30.4px;
  border: 0.8px solid #e1dce9;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1.6px 5.6px rgb(20 17 31 / 16%);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.qsrc__range:hover::-webkit-slider-thumb {
  box-shadow: 0 2.4px 9.6px rgb(102 25 255 / 24%);
  transform: scale(1.04);
}

.qsrc__range:hover::-moz-range-thumb {
  box-shadow: 0 2.4px 9.6px rgb(102 25 255 / 24%);
  transform: scale(1.04);
}

.qsrc__range:focus-visible::-webkit-slider-thumb {
  outline: 2.4px solid rgb(102 25 255 / 24%);
  outline-offset: 2.4px;
}

.qsrc__range:focus-visible::-moz-range-thumb {
  outline: 2.4px solid rgb(102 25 255 / 24%);
  outline-offset: 2.4px;
}

.qsrc__scale {
  margin-top: 11.2px;
  color: var(--qsrc-muted);
  font-size: 11.2px;
  font-weight: 400;
  line-height: 16px;
}

.qsrc__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25.6px;
  margin-top: 48px;
}

.qsrc__result {
  display: flex;
  min-width: 0;
  min-height: 105.6px;
  padding: 19.2px;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 19.2px;
}

.qsrc__result--profit {
  background: var(--qsrc-result-soft);
}

.qsrc__result--payback {
  background: var(--qsrc-accent);
  color: #ffffff;
}

.qsrc__result-label {
  margin: 0;
  color: var(--qsrc-accent);
  font-size: 11.2px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.92px;
}

.qsrc__result--payback .qsrc__result-label {
  color: #ffffff99;
}

.qsrc__result-value {
  display: block;
  margin: 12.8px 0 0;
  overflow-wrap: anywhere;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  letter-spacing: 0;
}

.qsrc__note {
  margin: 40px 0 0;
  color: #6f687f;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.qsrc__note span {
  color: #6619ff;
  font-weight: 600;
}

.qsrc-admin-notice {
  padding: 9.6px 12.8px;
  border-left: 3.2px solid #d63638;
  background: #fff1f1;
  color: #3c434a;
  font: 11.2px/1.5 sans-serif;
}

@media (max-width: 767px) {
  .qsrc__controls {
    gap: 19.2px;
  }

  .qsrc__control-heading {
    margin-bottom: 16px;
  }

  .qsrc__label,
  .qsrc__current {
    font-size: 11.2px;
    line-height: 16px;
  }

  .qsrc__range {
    height: 16px;
  }

  .qsrc__range::-webkit-slider-runnable-track {
    height: 16px;
  }

  .qsrc__range::-moz-range-track,
  .qsrc__range::-moz-range-progress {
    height: 16px;
  }

  .qsrc__range::-webkit-slider-thumb {
    width: 25.6px;
    height: 25.6px;
    margin-top: -4.8px;
  }

  .qsrc__range::-moz-range-thumb {
    width: 25.6px;
    height: 25.6px;
  }

  .qsrc__scale {
    margin-top: 9.6px;
    font-size: 11.2px;
  }

  .qsrc__results {
    gap: 12.8px;
    margin-top: 24px;
  }

  .qsrc__result {
    min-height: 105.6px;
    padding: 17.6px;
    border-radius: 16px;
  }

  .qsrc__result-label {
    font-size: 10.4px;
    letter-spacing: 1.6px;
  }

  .qsrc__result-value {
    margin-top: 9.6px;
    font-size: 22.4px;
    line-height: 25.6px;
  }
}

@media (max-width: 520px) {
  .qsrc__results {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qsrc__range::-webkit-slider-thumb {
    transition: none;
  }

  .qsrc__range::-moz-range-thumb {
    transition: none;
  }
}