/* The whole question shows the result, with a separate palette for each theme. */
:root {
 --answer-ok-bg:#dff2e9; --answer-ok-border:#559b82; --answer-ok-text:#193b31;
 --answer-bad-bg:#fbe1dd; --answer-bad-border:#c97068; --answer-bad-text:#542822;
}
html[data-theme="dark"] {
 --answer-ok-bg:#244c40; --answer-ok-border:#8bd5b6; --answer-ok-text:#edf8f2;
 --answer-bad-bg:#592f34; --answer-bad-border:#f1a39b; --answer-bad-text:#fff0ed;
}
body .exercise-question:has([data-exercise-feedback].is-correct:not([hidden])),
body .cafe-question-card:has(.cafe-answer-feedback.is-correct),
body .arena-dialog--question:has(#arena-answers .is-correct):not(:has(#arena-answers .is-wrong)),
body .adventure-feedback.is-correct,
body .exercise-match-card.is-correct {
 --answer-state-bg:var(--answer-ok-bg); --answer-state-border:var(--answer-ok-border); --answer-state-text:var(--answer-ok-text);
}
body .exercise-question:has([data-exercise-feedback].is-wrong:not([hidden])),
body .cafe-question-card:has(.cafe-answer-feedback.is-wrong),
body .arena-dialog--question:has(#arena-answers .is-wrong),
body .adventure-feedback.is-wrong,
body .exercise-match-card.is-wrong {
 --answer-state-bg:var(--answer-bad-bg); --answer-state-border:var(--answer-bad-border); --answer-state-text:var(--answer-bad-text);
}
body .exercise-question:has([data-exercise-feedback]:not([hidden])),
body .exercise-question:has([data-exercise-feedback]:not([hidden])) .exercise-sentence__line,
body .cafe-question-card.is-answered,
body .arena-dialog--question:has(#arena-answers .is-correct),
body .adventure-feedback:is(.is-correct,.is-wrong),
body .exercise-match-card:is(.is-correct,.is-wrong) {
 background-color:var(--answer-state-bg) !important;
 border-color:var(--answer-state-border) !important;
 color:var(--answer-state-text) !important;
 --text:var(--answer-state-text); --muted:var(--answer-state-text);
 box-shadow:inset 0 0 0 2px var(--answer-state-border);
}
body .cafe-question-card.is-answered #cafe-question-title,
body .arena-dialog--question:has(#arena-answers .is-correct) :is(#arena-question-text,#arena-question-feedback),
body .adventure-feedback:is(.is-correct,.is-wrong) :is(h2,p,div,strong,span) {
 color:var(--answer-state-text) !important;
}
body .arena-dialog--question:has(#arena-answers .is-correct) #arena-question-text {
 background-color:var(--answer-state-bg) !important; border-color:var(--answer-state-border) !important;
}