:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-feedback: 220ms;
  --motion-arrival: 280ms;
  --motion-celebration: 900ms;
  --motion-reduced-success: 160ms;
  --success-ink: light-dark(#276c57, #91d9bd);
  --success-on-header: light-dark(#91d9bd, #276c57);
}
.photo > .gray-overlay {
  position: absolute;
  inset: 0;
}
.gray-overlay {
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}
.media-frame { position: relative; }
.media-frame > .gray-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media-frame > img:not(.gray-overlay) { filter: saturate(1.6) contrast(1.04); }
.tile-photo > .gray-overlay { object-fit: cover; }
.instruction { position: relative; isolation: isolate; overflow: hidden; }
.instruction-color { position: absolute; inset: 0; z-index: -1; opacity: 0; background: light-dark(#0046ba, #7ce9ff); pointer-events: none; }
.challenge[data-mood="passed"] .gray-overlay { opacity: 0 !important; }
.challenge .challenge-video { filter: grayscale(1); }
.challenge[data-mood="engaged"] .challenge-video,
.challenge[data-mood="passed"] .challenge-video { filter: saturate(1.7) contrast(1.06); }
.challenge[data-mood="engaged"] :is(.answer-options input, input[type="range"]) { accent-color: #e11b76; }
.challenge[data-mood="engaged"] .answer-options label:has(:checked) { background: light-dark(#dff3ff, #133b50); border-color: #2483e8; }
.challenge[data-mood="engaged"] .audio-player,
.challenge[data-mood="passed"] .audio-player { background: light-dark(#e6f3ff, #12324b); }
/* These windows always use a light palette, even on the dark page. Keep native
   checkboxes, shared button surfaces and focus rings in that same scheme. */
.entry-window[data-mood] { color-scheme: light; background: color-mix(in srgb, #e6f3ff calc(var(--entry-intensity) * 100%), var(--card)); color: #172441; border-color: color-mix(in srgb, #1254c6 calc(var(--entry-intensity) * 100%), #303030); }
.entry-window[data-mood] h2 { background: color-mix(in srgb, #1254c6 calc(var(--entry-intensity) * 100%), #303030); color: #fff; line-height: 1.4; }
.entry-window h2[tabindex="-1"]:focus { outline: none; }
.entry-window[data-mood] .entry-followup { background: transparent; min-height: 184px; }
.entry-window[data-mood] .entry-box { accent-color: #cf1266; width: 64px; height: 64px; }
.entry-window[data-mood] .entry-question { color: #172441; }
.entry-window[data-mood] .claim { color: #172441; font-size: 2.25rem; line-height: 1.2; }
.entry-window[data-mood] .text-button { color: #354a6a; }
.entry-window[data-mood] .feedback { color: #354a6a; }
.celebration { position: fixed; inset: 0; z-index: 2147483647; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; pointer-events: none; }
.celebration::backdrop { background: transparent; pointer-events: none; }
.confetti-piece { position: absolute; top: 0; left: 0; opacity: 0; }
.success-seal { position: absolute; transform: translate(-50%, -50%); max-width: calc(100vw - 32px); width: max-content; padding: 16px 24px; border: 2px solid #1254c6; background: #e6f3ff; color: #172441; font: 700 1.5rem/1.25 var(--font-sans); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .entry-window[data-mood] .claim { font-size: 1.875rem; line-height: 1.2; }
  .entry-window[data-mood] .entry-followup { gap: 16px; }
}
.piece {
  left: 5%;
}
.rotate-image {
  transition: transform var(--motion-feedback) var(--motion-ease-out);
}
.rotate-image.gray-overlay {
  transition: transform var(--motion-feedback) var(--motion-ease-out),
              opacity var(--motion-feedback) var(--motion-ease-out);
}
.challenge-progress {
  display: flex;
  gap: 4px;
  margin-top: 16px;
}
.challenge-progress > span {
  position: relative;
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, currentColor 25%, transparent);
}
.challenge-progress > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--success-on-header);
  opacity: 0;
  transition: opacity var(--motion-feedback) var(--motion-ease-out);
}
.challenge-progress > .is-complete::after {
  opacity: 1;
}
.result[data-outcome="passed"] #result-title,
.result[data-outcome="passed"] .big-check {
  color: var(--success-ink);
}
@media (prefers-reduced-motion: reduce) {
  .rotate-image, .rotate-image.gray-overlay, .challenge-progress > span::after {
    transition: none;
  }
}