[data-quiz-theme="vision"]{
  --vision-ink: #0a2039;
  --vision-navy: #102f55;
  --vision-cyan: #31b9d0;
  --vision-indigo: #5866d9;
  --vision-coral: #e46573;
  --vision-lime: #b7d957;
  --vision-paper: var(--quiz-surface);
  --vision-mist: #eaf3f7;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 14%, rgba(49,185,208,.2), transparent 24%),
    radial-gradient(circle at 8% 72%, rgba(88,102,217,.14), transparent 25%),
    linear-gradient(rgba(16,47,85,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,47,85,.045) 1px, transparent 1px),
    linear-gradient(145deg, #eaf2f7, #cadbe6);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--vision-ink);
}

[data-quiz-theme="vision"]::before,
[data-quiz-theme="vision"]::after{
  position: absolute;
  content: "";
  pointer-events: none;
}

[data-quiz-theme="vision"]::before{
  top: 90px;
  right: -150px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(49,185,208,.19);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 42px rgba(255,255,255,.1),
    inset 0 0 0 88px rgba(88,102,217,.035);
}

[data-quiz-theme="vision"]::after{
  bottom: 130px;
  left: -105px;
  width: 270px;
  height: 130px;
  opacity: .2;
  background: repeating-linear-gradient(90deg, var(--vision-navy) 0 2px, transparent 2px 18px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

[data-quiz-theme="vision"] > *{ position: relative; z-index: 1; }

[data-quiz-theme="vision"] .quiz-engine__landing{
  position: relative;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: clamp(34px, 5.4vw, 64px);
  border: 1px solid rgba(16,47,85,.26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(49,185,208,.11), transparent 25%),
    linear-gradient(90deg, rgba(16,47,85,.035) 1px, transparent 1px),
    linear-gradient(rgba(16,47,85,.035) 1px, transparent 1px),
    linear-gradient(150deg, rgba(255,255,255,.99), rgba(248,251,252,.98));
  background-size: auto, 80px 100%, 100% 80px, auto;
  color: var(--vision-ink);
  box-shadow: 0 30px 78px rgba(10,32,57,.19), inset 0 3px 0 rgba(255,255,255,.92);
}

[data-quiz-theme="vision"] .quiz-engine__landing::before{
  position: absolute;
  inset: 17px;
  content: "";
  border: 1px solid rgba(49,185,208,.17);
  border-radius: 21px;
  pointer-events: none;
}

[data-quiz-theme="vision"] .quiz-engine__landing::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: "";
  background: linear-gradient(90deg,
    var(--vision-cyan) 0 27%,
    var(--vision-indigo) 27% 54%,
    var(--vision-coral) 54% 76%,
    var(--vision-lime) 76% 100%);
}

[data-quiz-theme="vision"] .quiz-engine__landing-copy{
  display: grid;
  width: 100%;
  max-width: 760px;
  justify-items: center;
  margin: 0 auto;
  text-align: center;
}

[data-quiz-theme="vision"] .quiz-engine__landing-badge{
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 2px auto 11px;
  border: 1px solid rgba(49,185,208,.72);
  border-radius: 23px;
  background:
    radial-gradient(circle, rgba(49,185,208,.32), transparent 58%),
    linear-gradient(145deg, #153c64, #071a32);
  box-shadow:
    0 13px 30px rgba(10,32,57,.24),
    inset 0 0 0 6px rgba(255,255,255,.045),
    0 0 0 5px rgba(88,102,217,.08);
}

[data-quiz-theme="vision"] .quiz-engine__landing-badge span{ font-size: 35px; }
[data-quiz-theme="vision"] .quiz-engine__landing .quiz-engine__eyebrow,
[data-quiz-theme="vision"] .quiz-engine__landing .quiz-engine__lede,
[data-quiz-theme="vision"] .quiz-engine__landing .quiz-engine__landing-meta{ display: none; }

[data-quiz-theme="vision"] .quiz-engine__landing h1{
  max-width: 730px;
  margin: 12px auto 22px;
  color: var(--vision-ink);
  font-size: clamp(46px, 5.15vw, 67px);
  font-weight: 920;
  line-height: .97;
  letter-spacing: -.047em;
}

[data-quiz-theme="vision"] .quiz-engine__quick-start{
  max-width: 665px;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  color: #53697d;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.48;
}

[data-quiz-theme="vision"] .quiz-engine__social{
  border: 1px solid rgba(49,185,208,.27);
  background: rgba(239,248,250,.97);
  color: var(--vision-ink);
  box-shadow: 0 8px 22px rgba(10,32,57,.08);
  font-size: 14px;
  text-align: left}

[data-quiz-theme="vision"] .quiz-engine__social-text strong{ color: #1b7897; font-weight: 900; }
[data-quiz-theme="vision"] .quiz-engine__social-text span{ color: var(--vision-ink); font-weight: 750; }
[data-quiz-theme="vision"] .quiz-engine__avatars{ display: flex; flex: 0 0 auto; }
[data-quiz-theme="vision"] .quiz-engine__avatars span{
  width: 30px;
  height: 30px;
  margin-left: -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: 0 4px 10px rgba(10,32,57,.18);
}
[data-quiz-theme="vision"] .quiz-engine__avatars span:first-child{ margin-left: 0; }

[data-quiz-theme="vision"] .quiz-engine__landing .quiz-engine__primary{
  font-size: 19px}

[data-quiz-theme="vision"] .quiz-engine__primary{
  border: 1px solid #06172b;
  background:
    linear-gradient(105deg, rgba(49,185,208,.2), transparent 38%),
    linear-gradient(135deg, #153c64, #081b33);
  color: #fff;
  box-shadow: 0 6px 0 #06172b, 0 15px 28px rgba(10,32,57,.25), inset 0 1px 0 rgba(255,255,255,.12)}

[data-quiz-theme="vision"] .quiz-engine__primary:active{
  background:
    linear-gradient(105deg, rgba(49,185,208,.2), transparent 38%),
    linear-gradient(135deg, #153c64, #081b33);
  color: #fff}

[data-quiz-theme="vision"] .quiz-engine__primary-icon{ display: inline; color: #8de9ef; }
[data-quiz-theme="vision"] .quiz-engine__ad-note{ justify-content: center; color: #667b8d; }
[data-quiz-theme="vision"] .quiz-engine__ad-note span{ border-color: #2288a0; color: #2288a0; }
[data-quiz-theme="vision"] .quiz-engine__landing-art,
[data-quiz-theme="vision"] .quiz-engine__landing-symbol{ display: none !important; }
[data-quiz-theme="vision"] .quiz-engine__progress-head{ color: #50697e; font-weight: 800}
[data-quiz-theme="vision"] .quiz-engine__progress-head strong{ color: var(--vision-navy); }
[data-quiz-theme="vision"] .quiz-engine__progress{
  border: 1px solid rgba(16,47,85,.18);
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 2px 5px rgba(10,32,57,.08)}
[data-quiz-theme="vision"] .quiz-engine__progress i{
  background: linear-gradient(90deg, var(--vision-cyan), var(--vision-indigo) 62%, var(--vision-coral));
  box-shadow: 0 0 14px rgba(49,185,208,.28);
}

[data-quiz-theme="vision"] .quiz-engine__question,
[data-quiz-theme="vision"] .quiz-engine__about{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16,47,85,.25);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 8%, rgba(49,185,208,.075), transparent 27%),
    rgba(255,253,247,.985);
  color: var(--vision-ink);
  box-shadow: 0 25px 62px rgba(10,32,57,.15), inset 0 2px 0 rgba(255,255,255,.9);
}

[data-quiz-theme="vision"] .quiz-engine__checkpoint,
[data-quiz-theme="vision"] .quiz-engine__results{
  border: 1px solid rgba(16,47,85,.25);
  background:
    radial-gradient(circle at 88% 8%, rgba(49,185,208,.075), transparent 27%),
    rgba(255,253,247,.985);
  color: var(--vision-ink);
  box-shadow: 0 25px 62px rgba(10,32,57,.15), inset 0 2px 0 rgba(255,255,255,.9)}

[data-quiz-theme="vision"] .quiz-engine__question::before,
[data-quiz-theme="vision"] .quiz-engine__checkpoint::before,
[data-quiz-theme="vision"] .quiz-engine__results::before,
[data-quiz-theme="vision"] .quiz-engine__about::before{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--vision-cyan) 0 34%, var(--vision-indigo) 34% 66%, var(--vision-coral) 66% 84%, var(--vision-lime) 84%);
}

[data-quiz-theme="vision"] .quiz-engine__question h1{ color: var(--vision-ink); }
[data-quiz-theme="vision"] .quiz-engine__question-context{
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(49,185,208,.22);
  border-radius: 10px;
  background: rgba(234,243,247,.82);
  color: #315f7b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  line-height: 1.5;
  white-space: pre-line;
}

[data-quiz-theme="vision"] .quiz-engine__visual{
  border: 1px solid rgba(49,185,208,.18);
  border-radius: 18px;
  background:
    linear-gradient(rgba(16,47,85,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,47,85,.035) 1px, transparent 1px),
    rgba(239,247,250,.78);
  background-size: 28px 28px;
}

[data-quiz-theme="vision"] .quiz-engine__visual > span > strong{
  border-color: rgba(16,47,85,.22);
  background: rgba(255,255,255,.9);
  color: var(--vision-ink);
  box-shadow: 0 5px 13px rgba(10,32,57,.06);
}

[data-quiz-theme="vision"] .quiz-engine__visual--spatial > span > strong,
[data-quiz-theme="vision"] .quiz-engine__visual--grid > span > strong{
  font-size: clamp(26px, 6vw, 43px);
  letter-spacing: .07em;
}

[data-quiz-theme="vision"] .quiz-engine__visual--code > span > strong{ color: #183f67; }

/* Rotation puzzle: numbered reading order without competing connector arrows. */
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual > span{
  min-width: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual > span > strong{
  position: relative;
  display: grid;
  min-height: 92px;
  place-items: center;
  padding: 22px 14px 14px;
  font-size: 38px;
  line-height: 1;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual > span > strong::before{
  position: absolute;
  top: 9px;
  left: 10px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #dceaf1;
  color: var(--vision-navy);
  content: counter(vision-rotation-step);
  counter-increment: vision-rotation-step;
  font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual{
  counter-reset: vision-rotation-step;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual > span:last-child > strong{
  border: 2px dashed rgba(49,185,208,.58);
  background: rgba(223,245,247,.72);
}

[data-quiz-theme="vision"] .quiz-engine__answer{
  border-color: rgba(16,47,85,.23);
  background: rgba(255,255,255,.91);
  color: var(--vision-ink);
  box-shadow: 0 7px 18px rgba(10,32,57,.07);
}
[data-quiz-theme="vision"] .quiz-engine__answer > span{ background: #dceaf1; color: var(--vision-navy); }
[data-quiz-theme="vision"] .quiz-engine__answer[data-selected]{ border-color: var(--vision-cyan); box-shadow: 0 0 0 3px rgba(49,185,208,.2); }

[data-quiz-theme="vision"] .quiz-engine__study-items strong,
[data-quiz-theme="vision"] .quiz-engine__checkpoint-next,
[data-quiz-theme="vision"] .quiz-engine__ai-panel,
[data-quiz-theme="vision"] .quiz-engine__result-signals div,
[data-quiz-theme="vision"] .quiz-engine__result-summary div,
[data-quiz-theme="vision"] .quiz-engine__checklist li{
  background: #eef6f8;
}

[data-quiz-theme="vision"] .quiz-engine__checkpoint-icon,
[data-quiz-theme="vision"] .quiz-engine__result-icon{
  background: linear-gradient(145deg, var(--vision-indigo), var(--vision-navy));
  box-shadow: 0 10px 25px rgba(10,32,57,.2), 0 0 0 5px rgba(49,185,208,.1);
}

[data-quiz-theme="vision"] .quiz-engine__result-percentage strong{
  color: var(--vision-navy);
  text-shadow: 0 8px 28px rgba(49,185,208,.15);
}
[data-quiz-theme="vision"] .quiz-engine__result-profile{ color: #315fa1; }
[data-quiz-theme="vision"] .quiz-engine__dimension b{ background: linear-gradient(90deg, var(--vision-cyan), var(--vision-indigo)); }

@media (max-width: 700px) {
  [data-quiz-theme="vision"] .quiz-engine__landing{ padding: 26px 18px 28px; border-radius: 22px; }
  [data-quiz-theme="vision"] .quiz-engine__landing::before{ inset: 9px; border-radius: 16px; }
  [data-quiz-theme="vision"] .quiz-engine__landing-badge{ width: 62px; height: 62px; margin-bottom: 8px; border-radius: 20px; }
  [data-quiz-theme="vision"] .quiz-engine__landing-badge span{ font-size: 31px; }
  [data-quiz-theme="vision"] .quiz-engine__landing h1{
    max-width: 350px;
    margin: 10px auto 17px;
    font-size: clamp(39px, 11.6vw, 49px);
    line-height: .98;
    letter-spacing: -.043em;
  }
  [data-quiz-theme="vision"] .quiz-engine__quick-start{ max-width: 335px; margin-bottom: 17px; font-size: 15px; line-height: 1.42; }
  [data-quiz-theme="vision"] .quiz-engine__social{ font-size: 12px}
  [data-quiz-theme="vision"] .quiz-engine__avatars span{ width: 27px; height: 27px; }
  [data-quiz-theme="vision"] .quiz-engine__landing .quiz-engine__primary{ font-size: 18px}
  [data-quiz-theme="vision"] .quiz-engine__visual--spatial > span > strong,
[data-quiz-theme="vision"] .quiz-engine__visual--grid > span > strong{ font-size: clamp(24px, 8vw, 35px); }
  [data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual{
    gap: 9px;
    padding: 10px;
  }
  [data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r4q3"] .quiz-engine__visual > span > strong{
    min-height: 78px;
    padding-top: 20px;
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-quiz-theme="vision"] *,
[data-quiz-theme="vision"] *::before,
[data-quiz-theme="vision"] *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Fixed Vision perception panels. Stable question IDs keep them working in every locale. */
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q1"] .quiz-engine__visual{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q1"] .quiz-engine__visual > span > strong{
  position: relative;
  display: grid;
  min-height: 126px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  place-items: center;
  background: #edf1f3;
  color: transparent;
  font-size: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q1"] .quiz-engine__visual > span:nth-child(2) > strong{ background: #17253a; }
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q1"] .quiz-engine__visual > span > strong::after{
  width: 48px;
  aspect-ratio: 1;
  border-radius: 5px;
  background: #7b8491;
  box-shadow: 0 2px 7px rgba(10,32,57,.12);
  content: "";
}

[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r8q1"] .quiz-engine__visual > span > strong{
  min-height: 55px;
  border: 0;
  background: #346fb0;
  color: transparent;
  font-size: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r8q1"] .quiz-engine__visual > span:nth-child(8) > strong{ background: #258e9b; }

[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r1q1"] .quiz-engine__visual > span > strong{
  min-height: 72px;
  border: 0;
  border-radius: 14px;
  background: #356ead;
  color: transparent;
  font-size: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r1q1"] .quiz-engine__visual > span:nth-child(4) > strong{
  background: #3d69ad;
}

/* Device-stable half-circle comparison: no font glyph geometry. */
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r3q4"] .quiz-engine__visual > span > strong{
  min-height: 76px;
  color: transparent;
  font-size: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r3q4"] .quiz-engine__visual > span > strong::before{
  justify-self: center;
  align-self: center;
  width: 42px;
  aspect-ratio: 1;
  border: 3px solid var(--vision-navy);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--vision-navy) 0 50%, var(--quiz-surface) 50% 100%);
  box-shadow: 0 4px 10px rgba(10,32,57,.1);
  content: "";
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r3q4"] .quiz-engine__visual > span:nth-child(3) > strong::before{
  background: linear-gradient(90deg, var(--quiz-surface) 0 50%, var(--vision-navy) 50% 100%);
}

/* Five precise memory shapes shared by the study cue and answer cards. */
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong{
  min-height: 76px;
  padding: 7px;
  color: transparent;
  font-size: 0;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong::before,
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer-icon::before{
  display: block;
  width: 38px;
  height: 38px;
  margin: auto;
  content: "";
  filter: drop-shadow(0 3px 4px rgba(10,32,57,.14));
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong:nth-child(1)::before,
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer:nth-child(3) .quiz-engine__answer-icon::before{
  border-radius: 50%;
  background: #2e79c7;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong:nth-child(2)::before{
  background: #e0ad31;
  clip-path: polygon(50% 3%, 97% 94%, 3% 94%);
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong:nth-child(3)::before,
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer:nth-child(2) .quiz-engine__answer-icon::before{
  border-radius: 5px;
  background: #dc675d;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong:nth-child(4)::before,
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer:nth-child(4) .quiz-engine__answer-icon::before{
  background: #3f9b6a;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__study-items strong:nth-child(5)::before,
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer:nth-child(1) .quiz-engine__answer-icon::before{
  background: #8056b5;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 94%, 50% 71%, 21% 94%, 32% 56%, 2% 35%, 39% 35%);
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answer-icon{
  display: grid;
  width: 42px;
  height: 42px;
  margin-inline: auto;
  place-items: center;
  border-radius: 0;
  background: transparent !important;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answers--icons .quiz-engine__answer{
  align-content: center;
  justify-items: center;
  text-align: center;
}
[data-quiz-theme="vision"] .quiz-engine__question[data-question-id="vision-r9q5"] .quiz-engine__answers--icons .quiz-engine__answer strong{
  width: 100%;
  text-align: center;
}