/* ============================================================
   PROBELIKA — SMART TASK CINEMATIC V2
   Visual layer only. Existing POST contract remains authoritative.
   ============================================================ */

.smart-task-page {
  --st2-ink: #081628;
  --st2-navy: #07192d;
  --st2-deep: #04101f;

  --st2-cyan: #55def4;
  --st2-cyan-soft: #b9f4ff;
  --st2-blue: #268fe8;

  --st2-lime: #bce95c;
  --st2-coral: #ff7466;
  --st2-orange: #ffac4b;
  --st2-violet: #8d79f6;

  --st2-cloud: #f4f8fc;
  --st2-muted: #697a8f;
  --st2-line: rgba(11, 35, 61, .10);

  position: relative;

  width: min(
    100%,
    1380px
  );

  margin-inline: auto;
}


/* ============================================================
   CINEMATIC HERO
   ============================================================ */

.pb-st2-hero {
  position: relative;

  margin-bottom: 22px;

  overflow: hidden;

  border-radius: 36px;

  background:
    radial-gradient(
      circle at 84% 13%,
      rgba(85,222,244,.25),
      transparent 24rem
    ),
    radial-gradient(
      circle at 12% 90%,
      rgba(255,116,102,.14),
      transparent 25rem
    ),
    linear-gradient(
      140deg,
      #051426,
      #08243f 58%,
      #0b344d
    );

  color: white;

  box-shadow:
    0 30px 76px
    rgba(4,23,43,.21);
}

.pb-st2-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .18;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.35)
      1px,
      transparent 1.5px
    );

  background-size:
    42px 42px;

  mask-image:
    radial-gradient(
      ellipse at 65% 50%,
      black,
      transparent 83%
    );
}

.pb-st2-hero-inner {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(250px,.44fr);

  gap: 30px;

  align-items: center;

  min-height: 305px;

  padding:
    30px 34px;
}

.pb-st2-kicker {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    #a2edff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}

.pb-st2-kicker::before {
  content: "";

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--st2-lime);

  box-shadow:
    0 0 18px
    rgba(188,233,92,.68);
}

.pb-st2-title {
  max-width: 790px;

  margin:
    12px 0 10px;

  font-size:
    clamp(
      35px,
      4.5vw,
      58px
    );

  line-height: .99;

  letter-spacing:
    -.048em;
}

.pb-st2-lead {
  max-width: 660px;

  margin: 0;

  color:
    rgba(255,255,255,.65);

  font-size: 14px;

  line-height: 1.55;
}


/* ============================================================
   META CHIPS
   ============================================================ */

.pb-st2-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 17px;
}

.pb-st2-chip {
  display: inline-flex;

  align-items: center;

  min-height: 31px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 10px;

  background:
    rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.73);

  font-size: 12px;

  font-weight: 800;
}

.pb-st2-chip-mastery {
  color:
    #dafba0;

  border-color:
    rgba(188,233,92,.22);

  background:
    rgba(188,233,92,.09);
}


/* ============================================================
   HERO ACTIONS
   ============================================================ */

.pb-st2-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 17px;
}

.pb-st2-focus-toggle,
.pb-st2-back {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 40px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 12px;

  background:
    rgba(255,255,255,.07);

  color: white;

  font: inherit;

  font-size: 12px;

  font-weight: 850;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease;
}

.pb-st2-focus-toggle:hover,
.pb-st2-back:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.12);
}


/* ============================================================
   3D ORB
   ============================================================ */

.pb-st2-orb-zone {
  position: relative;

  min-height: 245px;
}

.pb-st2-orb-aura {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 245px;
  height: 245px;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(85,222,244,.28),
      transparent 68%
    );
}

.pb-st2-orb {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 172px;
  height: 172px;

  transform:
    translate(-50%,-50%)
    rotate(-4deg);

  border-radius:
    48% 52% 55% 45% /
    44% 48% 52% 56%;

  background:
    radial-gradient(
      circle at 29% 21%,
      rgba(255,255,255,.97),
      transparent 16%
    ),
    radial-gradient(
      circle at 72% 76%,
      rgba(255,172,75,.96),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #74ecff,
      #22bee9 42%,
      #167acb 73%,
      #08385f
    );

  box-shadow:
    inset -21px -25px 37px
      rgba(3,20,43,.32),

    inset 14px 14px 24px
      rgba(255,255,255,.21),

    0 0 74px
      rgba(85,222,244,.22),

    0 30px 54px
      rgba(0,0,0,.30);

  animation:
    pbSt2Float
    4.6s ease-in-out infinite;
}

.pb-st2-eye {
  position: absolute;

  top: 45%;

  width: 20px;
  height: 27px;

  border-radius: 50%;

  background:
    #071426;
}

.pb-st2-eye::after {
  content: "";

  position: absolute;

  top: 5px;
  left: 5px;

  width: 7px;
  height: 8px;

  border-radius: 50%;

  background: white;
}

.pb-st2-eye-a {
  left: 46px;
}

.pb-st2-eye-b {
  right: 46px;
}

.pb-st2-smile {
  position: absolute;

  top: 63%;
  left: 50%;

  width: 44px;
  height: 18px;

  transform:
    translateX(-50%);

  border-bottom:
    5px solid
    rgba(7,20,38,.80);

  border-radius:
    0 0 50% 50%;
}

.pb-st2-orb-label {
  position: absolute;

  left: 50%;
  bottom: 12px;

  transform:
    translateX(-50%);

  white-space: nowrap;

  color:
    rgba(255,255,255,.50);

  font-size: 12px;

  font-weight: 800;
}


/* ============================================================
   EXISTING SMART TASK — VISUAL UPGRADE
   ============================================================ */

.smart-task-page .st-card,
.smart-task-page .st-side-card,
.smart-task-page .st-task {
  border:
    1px solid
    var(--st2-line);

  border-radius: 23px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 14px 36px
    rgba(7,27,48,.075);
}


/* Main question becomes visual focus */

.smart-task-page .st-task {
  position: relative;

  overflow: hidden;

  box-shadow:
    0 24px 60px
    rgba(6,27,50,.12);
}

.smart-task-page .st-task::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--st2-cyan),
      var(--st2-blue),
      var(--st2-violet)
    );
}

.smart-task-page .st-task-head {
  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(9,34,59,.07);
}

.smart-task-page .st-task-meta {
  color:
    var(--st2-muted);

  font-weight: 750;
}

.smart-task-page .st-question {
  color:
    var(--st2-ink);

  font-size:
    clamp(
      20px,
      2.1vw,
      29px
    );

  line-height: 1.45;

  letter-spacing:
    -.018em;
}


/* Answer label */

.smart-task-page .st-answer-label {
  margin-top: 22px;

  color:
    #496279;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .07em;

  text-transform: uppercase;
}


/* ============================================================
   CHOICE OPTIONS
   ============================================================ */

.smart-task-page .st-options {
  display: grid;

  gap: 10px;
}

.smart-task-page .st-option {
  position: relative;

  display: grid;

  grid-template-columns:
    42px 1fr;

  gap: 13px;

  align-items: center;

  width: 100%;

  min-height: 66px;

  padding:
    10px 15px;

  border:
    1px solid
    rgba(12,44,71,.10);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fbfd
    );

  color:
    var(--st2-ink);

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 7px 17px
    rgba(8,29,49,.04);

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}

.smart-task-page .st-option:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(38,143,232,.28);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #eefaff
    );

  box-shadow:
    0 13px 26px
    rgba(8,58,92,.10);
}

.smart-task-page .st-option-index {
  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #e8faff,
      #d9f5ff
    );

  color:
    #087caa;

  font-size: 12px;

  font-weight: 950;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.9);
}


/* ============================================================
   NUMBER / TEXT INPUT
   ============================================================ */

.smart-task-page .st-answer-input {
  min-height: 58px;

  padding:
    0 16px;

  border:
    2px solid
    rgba(12,48,76,.11);

  border-radius: 16px;

  background: white;

  color:
    var(--st2-ink);

  font-size: 18px;

  font-weight: 750;

  outline: none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.smart-task-page .st-answer-input:focus {
  border-color:
    rgba(48,185,223,.65);

  box-shadow:
    0 0 0 5px
    rgba(85,222,244,.12);
}

.smart-task-page .st-submit {
  min-height: 54px;

  padding:
    0 19px;

  border: 0;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #51dff5,
      #9af0ff
    );

  color:
    #061426;

  font-weight: 950;

  cursor: pointer;

  box-shadow:
    0 13px 30px
    rgba(38,176,214,.23);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.smart-task-page .st-submit:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 18px 36px
    rgba(38,176,214,.31);
}


/* ============================================================
   HELP / TUTOR
   ============================================================ */

.smart-task-page .st-help-form {
  margin: 0;
}

.smart-task-page .st-help-btn {
  min-height: 52px;

  border:
    1px solid
    rgba(15,49,77,.09);

  border-radius: 15px;

  background:
    #f7fafc;

  color:
    #27465f;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.smart-task-page .st-help-btn:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(38,143,232,.22);

  background:
    #eef9fd;
}


/* ============================================================
   EXPLANATION / ERROR INTELLIGENCE
   ============================================================ */

.smart-task-page .st-explanation {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f1fbff,
      #ffffff
    );
}

.smart-task-page .st-explanation::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    linear-gradient(
      to bottom,
      var(--st2-cyan),
      var(--st2-blue)
    );
}

.smart-task-page .st-error-intel {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #fff4f1,
      #ffffff
    );
}

.smart-task-page .st-error-intel::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    linear-gradient(
      to bottom,
      var(--st2-coral),
      var(--st2-orange)
    );
}

.smart-task-page .st-explanation-body {
  color:
    #30475d;

  font-size: 15px;

  line-height: 1.7;
}


/* ============================================================
   MASTERY
   ============================================================ */

.smart-task-page .st-mastery-row {
  align-items: center;
}

.smart-task-page .st-mastery-number {
  color:
    #087ba3;

  font-size:
    clamp(
      31px,
      4vw,
      45px
    );

  font-weight: 950;

  letter-spacing:
    -.045em;
}

.smart-task-page .st-mastery-caption {
  color:
    var(--st2-muted);
}

.smart-task-page .st-master-track {
  overflow: hidden;

  height: 11px;

  border-radius: 999px;

  background:
    #e7eef4;
}

.smart-task-page .st-master-track > span,
.smart-task-page .st-master-track > div {
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--st2-cyan),
      var(--st2-lime)
    );
}


/* ============================================================
   SIDE CARDS
   ============================================================ */

.smart-task-page .st-side-card {
  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

.smart-task-page .st-side-card:hover {
  transform:
    translateY(-3px);
}


/* ============================================================
   FOCUS MODE
   ============================================================ */

.smart-task-page.pb-st2-focus
.st-side-card {
  opacity: .28;

  filter:
    saturate(.35);
}

.smart-task-page.pb-st2-focus
.st-side-card:hover {
  opacity: 1;

  filter: none;
}

.smart-task-page.pb-st2-focus
.st-task {
  box-shadow:
    0 31px 74px
    rgba(6,27,50,.18);
}

.smart-task-page.pb-st2-focus
.pb-st2-focus-toggle {
  border-color:
    rgba(188,233,92,.34);

  background:
    rgba(188,233,92,.14);

  color:
    #dcffa0;
}


/* ============================================================
   CLOCK
   ============================================================ */

.smart-task-page .st-task-clock {
  display: inline-flex;

  align-items: center;

  min-height: 29px;

  padding:
    0 9px;

  border-radius: 9px;

  background:
    #edf7fb;

  color:
    #27718b;

  font-size: 12px;

  font-weight: 850;
}


/* ============================================================
   ANIMATION
   ============================================================ */

.pb-st2-reveal {
  opacity: 0;

  transform:
    translateY(12px);

  transition:
    opacity .42s ease,
    transform .42s ease;
}

.pb-st2-reveal.pb-st2-visible {
  opacity: 1;

  transform: none;
}


@keyframes pbSt2Float {

  0%,
  100% {
    transform:
      translate(-50%,-50%)
      translateY(0)
      rotate(-4deg);
  }

  50% {
    transform:
      translate(-50%,-50%)
      translateY(-10px)
      rotate(3deg);
  }

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
  max-width: 900px
) {

  .pb-st2-hero-inner {
    grid-template-columns: 1fr;
  }

  .pb-st2-orb-zone {
    min-height: 205px;
  }

}


@media (
  max-width: 600px
) {

  .pb-st2-hero {
    border-radius: 26px;
  }

  .pb-st2-hero-inner {
    padding:
      24px 17px;
  }

  .pb-st2-title {
    font-size: 38px;
  }

  .smart-task-page
  .st-option {
    grid-template-columns:
      38px 1fr;

    min-height: 62px;

    padding:
      9px 11px;
  }

  .pb-st2-actions {
    display: grid;
  }

  .pb-st2-focus-toggle,
  .pb-st2-back {
    width: 100%;
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .pb-st2-orb {
    animation: none;
  }

  .pb-st2-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .smart-task-page
  .st-option,
  .smart-task-page
  .st-help-btn,
  .smart-task-page
  .st-submit {
    transition: none;
  }

}


/* ============================================================
   012E2 — ANSWER FEEDBACK + ERROR INTELLIGENCE V2
   ============================================================ */


/* ------------------------------------------------------------
   Primary answer signal
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-feedback {
  position: relative;

  display: grid;

  grid-template-columns:
    58px minmax(0,1fr);

  gap: 16px;

  align-items: center;

  margin:
    15px 0 19px;

  padding:
    18px 20px;

  overflow: hidden;

  border-radius: 20px;

  border:
    1px solid
    rgba(10,42,67,.09);

  box-shadow:
    0 16px 38px
    rgba(5,26,49,.095);

  isolation: isolate;
}


.smart-task-page
.pb-st2-feedback::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: -65px;
  right: -55px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  opacity: .14;
}


.smart-task-page
.pb-st2-feedback
> span:first-child {
  display: grid;

  place-items: center;

  width: 52px;
  height: 52px;

  border-radius: 17px;

  font-size: 24px;

  font-weight: 950;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.85),
    0 10px 22px
    rgba(5,28,48,.10);
}


.smart-task-page
.pb-st2-feedback b,
.smart-task-page
.pb-st2-feedback strong {
  color:
    var(--st2-ink);

  font-size: 16px;
}


.smart-task-page
.pb-st2-feedback p {
  margin:
    5px 0 0;

  color:
    #607286;

  line-height: 1.48;
}


/* ------------------------------------------------------------
   Correct
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-feedback-good {
  border-color:
    rgba(126,185,42,.21);

  background:
    linear-gradient(
      145deg,
      #f4ffe4,
      #ffffff 72%
    );
}


.smart-task-page
.pb-st2-feedback-good::before {
  background:
    var(--st2-lime);
}


.smart-task-page
.pb-st2-feedback-good
> span:first-child {
  background:
    linear-gradient(
      145deg,
      #d9fb96,
      #afe248
    );

  color:
    #355f09;
}


/* ------------------------------------------------------------
   Useful mistake
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-feedback-bad {
  border-color:
    rgba(255,116,102,.21);

  background:
    linear-gradient(
      145deg,
      #fff0ed,
      #ffffff 72%
    );
}


.smart-task-page
.pb-st2-feedback-bad::before {
  background:
    var(--st2-coral);
}


.smart-task-page
.pb-st2-feedback-bad
> span:first-child {
  background:
    linear-gradient(
      145deg,
      #ffaea5,
      #ff7669
    );

  color:
    #691d15;
}


/* ------------------------------------------------------------
   Input / validation warning
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-feedback-warn {
  border-color:
    rgba(255,172,75,.25);

  background:
    linear-gradient(
      145deg,
      #fff7e9,
      #ffffff 72%
    );
}


.smart-task-page
.pb-st2-feedback-warn::before {
  background:
    var(--st2-orange);
}


.smart-task-page
.pb-st2-feedback-warn
> span:first-child {
  background:
    linear-gradient(
      145deg,
      #ffd38d,
      #ffad4d
    );

  color:
    #6d4000;
}


/* ------------------------------------------------------------
   Root-cause / misconception intelligence
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-root-cause {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(255,116,102,.17);

  background:
    radial-gradient(
      circle at 95% 8%,
      rgba(255,116,102,.12),
      transparent 13rem
    ),
    linear-gradient(
      145deg,
      #fff8f6,
      #ffffff
    );

  box-shadow:
    0 18px 44px
    rgba(92,35,27,.075);
}


.smart-task-page
.pb-st2-root-cause::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background:
    linear-gradient(
      to bottom,
      var(--st2-coral),
      var(--st2-orange)
    );
}


.smart-task-page
.pb-st2-root-cause
.st-error-label {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    5px 8px;

  border-radius: 8px;

  background:
    rgba(255,116,102,.09);

  color:
    #a6493e;

  font-weight: 900;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .055em;
}


/* ------------------------------------------------------------
   Explanation intelligence
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-explain-card {
  border:
    1px solid
    rgba(50,180,218,.17);

  background:
    radial-gradient(
      circle at 96% 8%,
      rgba(85,222,244,.12),
      transparent 14rem
    ),
    linear-gradient(
      145deg,
      #f1fbff,
      #ffffff
    );

  box-shadow:
    0 18px 44px
    rgba(20,82,110,.075);
}


/* ------------------------------------------------------------
   Tutor actions become a learning ladder
   ------------------------------------------------------------ */

.smart-task-page
.st-help-btn {
  position: relative;

  overflow: hidden;
}


.smart-task-page
.st-help-btn::after {
  content: "";

  position: absolute;

  inset:
    auto 12px 7px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(39,143,232,.30),
      transparent
    );

  transform:
    scaleX(0);

  transition:
    transform .2s ease;
}


.smart-task-page
.st-help-btn:hover::after {
  transform:
    scaleX(1);
}


/* ------------------------------------------------------------
   Orb reacts to real result state
   ------------------------------------------------------------ */

.smart-task-page
.pb-st2-orb {
  transition:
    filter .35s ease,
    box-shadow .35s ease;
}


.smart-task-page.pb-st2-state-good
.pb-st2-orb {
  filter:
    saturate(1.08)
    brightness(1.04);

  box-shadow:
    inset -21px -25px 37px
      rgba(3,20,43,.30),

    inset 14px 14px 24px
      rgba(255,255,255,.23),

    0 0 88px
      rgba(188,233,92,.30),

    0 30px 54px
      rgba(0,0,0,.28);
}


.smart-task-page.pb-st2-state-bad
.pb-st2-orb {
  box-shadow:
    inset -21px -25px 37px
      rgba(3,20,43,.32),

    inset 14px 14px 24px
      rgba(255,255,255,.20),

    0 0 78px
      rgba(255,116,102,.25),

    0 30px 54px
      rgba(0,0,0,.30);
}


.smart-task-page.pb-st2-state-warn
.pb-st2-orb {
  box-shadow:
    inset -21px -25px 37px
      rgba(3,20,43,.32),

    inset 14px 14px 24px
      rgba(255,255,255,.20),

    0 0 78px
      rgba(255,172,75,.25),

    0 30px 54px
      rgba(0,0,0,.30);
}


/* ------------------------------------------------------------
   Feedback entrance
   ------------------------------------------------------------ */

@keyframes pbSt2FeedbackIn {

  from {
    opacity: 0;

    transform:
      translateY(-8px)
      scale(.985);
  }

  to {
    opacity: 1;

    transform:
      none;
  }

}


.smart-task-page
.pb-st2-feedback {
  animation:
    pbSt2FeedbackIn
    .34s
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (
  max-width: 600px
) {

  .smart-task-page
  .pb-st2-feedback {
    grid-template-columns:
      45px 1fr;

    gap: 11px;

    padding:
      15px 14px;
  }


  .smart-task-page
  .pb-st2-feedback
  > span:first-child {
    width: 43px;
    height: 43px;

    border-radius: 14px;

    font-size: 20px;
  }

}


/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

@media (
  prefers-reduced-motion: reduce
) {

  .smart-task-page
  .pb-st2-feedback {
    animation: none;
  }

  .smart-task-page
  .pb-st2-orb {
    transition: none;
  }

  .smart-task-page
  .st-help-btn::after {
    transition: none;
  }

}