:root {
  color-scheme: light;
  --kq-ink: #101018;
  --kq-ink-soft: #24233a;
  --kq-paper: #fbf8ef;
  --kq-white: #ffffff;
  --kq-blue: #4038b8;
  --kq-blue-deep: #2f2990;
  --kq-pink: #e31868;
  --kq-aqua: #67dfd1;
  --kq-yellow: #ffdd36;
  --kq-green: #18a56f;
  --kq-red: #ed345d;
  --kq-line-light: rgba(255, 255, 255, 0.34);
  --kq-line-dark: rgba(16, 16, 24, 0.18);
  --kq-muted-light: rgba(255, 255, 255, 0.72);
  --kq-muted-dark: rgba(16, 16, 24, 0.62);
  --kq-font-display: "Avenir Next", "Arial Rounded MT Bold", "Helvetica Rounded", "Helvetica Neue", Arial, sans-serif;
  --kq-font-ui: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --kq-font-data: "SF Mono", "IBM Plex Mono", ui-monospace, monospace;
  --kq-radius-sm: 16px;
  --kq-radius-md: 24px;
  --kq-radius-lg: 32px;
}

.kq-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kq-white);
  color: var(--kq-blue);
  font-family: var(--kq-font-display);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
}

.kq-impact-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kq-impact-field::before,
.kq-impact-field::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.kq-impact-field::before {
  width: 46%;
  min-width: 260px;
  height: 32%;
  right: -12%;
  top: 7%;
  border-radius: 92px 0 0 210px;
  background: var(--kq-pink);
}

.kq-impact-field::after {
  width: 42%;
  min-width: 250px;
  height: 35%;
  right: -13%;
  bottom: 0;
  border-radius: 220px 0 0 80px;
  background: var(--kq-aqua);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}