/* Alternate the handwriting, grading, and engine sections with the blue features. */
.section.section--red {
  --blue: #ff727c;
  --purple: #ed5c72;
  --red: #ff8b91;
  --line: rgba(255, 114, 124, .25);
  --glow: 0 18px 50px rgba(40, 6, 16, .3), 0 0 28px rgba(255, 90, 110, .1);
}
.section.section--red .section-title::before {
  background: linear-gradient(90deg, #ff727c, #ed5c72);
  box-shadow: 0 0 16px #ff727c55;
}
.section.section--red :is(.platform-showcase, .processing-flow, .engine-panel) {
  border-color: var(--line);
  background: radial-gradient(ellipse at 15% 12%, rgba(255,114,124,.14), transparent 50%), linear-gradient(180deg, #241019e0, #130b13f0);
  box-shadow: var(--glow);
}
.section.section--red :is(.processing-card, .engine-stage, .engine-gauge-card) {
  border-color: var(--line);
  background: radial-gradient(ellipse at 50% 0%, #ff727c14, transparent 65%), #160d17c7;
}
.section.section--red :is(.platform-showcase__title, .processing-card__title, .engine-header-copy h3) { color: #ffd1d5; }
.section.section--red :is(.platform-showcase__eyebrow, .processing-card__step, .engine-stage__step, .engine-metric-number, .engine-word-glow) { color: #ffabb1; }
.section.section--red :is(.engine-gradient-word, .engine-word-glow) {
  background-image: linear-gradient(120deg, #ffd1d5, #ff727c, #ed5c72);
  text-shadow: 0 0 18px #ff727c55;
}
.section.section--red :is(.capture-scene__phone, .processing-scene__phone, .feedback-scene__phone, .response-carousel__question-phone) { --device-accent: #ff727c; }
.section.section--red .processing-card::before { background: radial-gradient(circle, #ff727c2e, transparent 68%); }
.section.section--red .engine-infographic::before { background: linear-gradient(90deg, #ff727c33, #ed5c7270, #ff8b9133); box-shadow: 0 0 18px #ff727c29; }
.section.section--red :is(#engineBlueGrad, #enginePurpleGrad, #capture-arrow-gradient) stop { stop-color: #ff727c; }
.section.section--red :is(#engineBlueGrad, #enginePurpleGrad, #capture-arrow-gradient) stop:last-child { stop-color: #ffd1d5; }
html[data-theme="light"] .section.section--red :is(.platform-showcase, .processing-flow, .engine-panel) { background: radial-gradient(ellipse at 15% 12%, #ff727c1f, transparent 50%), #fff6f8ed; }
html[data-theme="light"] .section.section--red :is(.processing-card, .engine-stage, .engine-gauge-card) { background: #fffafb; }
html[data-theme="light"] .section.section--red :is(.platform-showcase__title, .processing-card__title, .engine-header-copy h3, .platform-showcase__eyebrow, .processing-card__step, .engine-stage__step, .engine-metric-number, .engine-word-glow) { color: #a52e46; }

.section.section--handwriting {
  --handwriting-accent: #a47bff;
  --blue: var(--handwriting-accent);
  --purple: var(--handwriting-accent);
  --line: color-mix(in srgb, var(--handwriting-accent) 30%, transparent);
}
.section--handwriting .section-title::before {
  background: var(--handwriting-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--handwriting-accent) 35%, transparent);
}
.section.section--handwriting .platform-showcase {
  border-color: var(--line);
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--handwriting-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--handwriting-accent) 13%, #10101b), #090b14);
  box-shadow: 0 18px 50px #0406104d, 0 0 32px color-mix(in srgb, var(--handwriting-accent) 14%, transparent);
}
.section.section--handwriting .platform-showcase::before {
  background: radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--handwriting-accent) 12%, transparent), transparent 60%);
}
.section.section--handwriting .platform-showcase__title {
  color: color-mix(in srgb, var(--handwriting-accent) 35%, white);
}
html[data-theme="light"] .section.section--handwriting .platform-showcase {
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--handwriting-accent) 18%, transparent), transparent 60%), #fcfcff;
}
html[data-theme="light"] .section.section--handwriting .platform-showcase__title {
  color: color-mix(in srgb, var(--handwriting-accent) 50%, #151526);
}
@media (prefers-reduced-motion: reduce) {
  .section.section--handwriting { transition: none; }
}

.section.section--problem-solver {
  --problem-accent: #a47bff;
  --blue: var(--problem-accent);
  --purple: var(--problem-accent);
  --line: color-mix(in srgb, var(--problem-accent) 30%, transparent);
}
.section.section--problem-solver .problem-solver {
  border-color: var(--line);
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--problem-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--problem-accent) 13%, #10101b), #090b14);
  box-shadow: 0 18px 50px #0406104d, 0 0 32px color-mix(in srgb, var(--problem-accent) 14%, transparent);
}
.section.section--problem-solver .problem-solver__headline {
  color: color-mix(in srgb, var(--problem-accent) 35%, white);
}
.section.section--problem-solver .section-title::before {
  background: var(--problem-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--problem-accent) 35%, transparent);
}
html[data-theme="light"] .section.section--problem-solver .problem-solver {
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--problem-accent) 18%, transparent), transparent 60%), #fcfcff;
}
html[data-theme="light"] .section.section--problem-solver .problem-solver__headline {
  color: color-mix(in srgb, var(--problem-accent) 50%, #151526);
}

/* Extend the existing live preview colors across the whole Constellations card. */
#constellations .active-step-info {
  --constellation-accent: color-mix(in srgb, var(--ambi-accent) 70%, var(--ambi-base));
  --blue: var(--constellation-accent);
  --purple: var(--constellation-accent);
  --line: color-mix(in srgb, var(--constellation-accent) 30%, transparent);
  border-color: var(--line);
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--constellation-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--constellation-accent) 13%, #10101b), #090b14);
}
#constellations .active-step-title {
  color: color-mix(in srgb, var(--constellation-accent) 35%, white);
}
#constellations :is(.active-step-badge, .step-number) {
  color: color-mix(in srgb, var(--constellation-accent) 65%, white);
}
#constellations :is(.slideshow-menu, .world-select-trigger) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--constellation-accent) 9%, #10101b);
}
#constellations .slideshow-menu__selection {
  background: color-mix(in srgb, var(--constellation-accent) 22%, #10101b);
  border-color: color-mix(in srgb, var(--constellation-accent) 50%, transparent);
}
html[data-theme="light"] #constellations .active-step-info {
  background: radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--constellation-accent) 18%, transparent), transparent 60%), #fcfcff;
}
html[data-theme="light"] #constellations :is(.active-step-title, .active-step-badge, .step-number) {
  color: color-mix(in srgb, var(--constellation-accent) 45%, #151526);
}
html[data-theme="light"] #constellations :is(.slideshow-menu, .world-select-trigger) {
  background: color-mix(in srgb, var(--constellation-accent) 10%, white);
}
html[data-theme="light"] #constellations .slideshow-menu__selection {
  background: color-mix(in srgb, var(--constellation-accent) 24%, white);
}

#constellations {
  --constellation-accent: #64a8ff;
  --blue: var(--constellation-accent);
  --purple: var(--constellation-accent);
}
#constellations > .section-title::before {
  background: var(--constellation-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--constellation-accent) 40%, transparent);
}
#constellations :is(.active-step-badge, .step-number, .world-select-item.is-active) {
  background: color-mix(in srgb, var(--constellation-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--constellation-accent) 30%, transparent);
}
#constellations :is(.world-count, .world-select-chevron, .world-select-item__check, .world-select-item.is-active) {
  color: color-mix(in srgb, var(--constellation-accent) 65%, white);
}
#constellations .world-count {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
html[data-theme="light"] #constellations :is(.world-count, .world-select-chevron, .world-select-item__check, .world-select-item.is-active) {
  color: color-mix(in srgb, var(--constellation-accent) 45%, #151526);
}

#constellations .constellation-overview-icon {
  display: block;
  flex-shrink: 0;
  color: var(--blue);
}
@media (max-width: 760px) {
  #problem-solver .card-corner-luna {
    position: relative;
    display: block;
    top: auto;
    right: auto;
    width: 70px;
    margin: 0 auto 16px;
    transform: none;
  }
}

#constellations .world-count {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1.1em;
}