.question-card { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: var(--format-top) max(var(--edge), env(safe-area-inset-right)) var(--content-bottom) max(var(--edge), env(safe-area-inset-left)); color: #2b2240; background: radial-gradient(ellipse at 90% 8%, #e2d8f4 0%, transparent 55%), #f1edf8; }
/* Let scrolling continue into the feed when the question has no more text to scroll. */
.question-card__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #b5a3cf transparent; }
.question-card__scroll.is-scrollable { touch-action: pan-y; }
.question-card__body { width: 100%; max-width: 640px; margin-inline: auto; }
.question-card__body { flex: none; margin-block: auto; padding: 6px 0; }
.question-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 22px; }
.question-card__eyebrow { padding: 7px 9px; border: 1px solid #d0c2e7; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .09em; color: #6b4b96; }
.question-card__choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.question-card__question { padding: 0; margin: 0 0 12px; width: 100%; font-size: clamp(25px, 3.5vw, 38px); line-height: 1.17; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
.question-card__instruction { margin: 0 0 20px; color: #7d6c91; font-size: 12px; line-height: 1.5; }
.question-card__option { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px; margin-top: 10px; border: 1px solid #dcd4e8; border-radius: 12px; background: #ffffffb3; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.question-card__radio { position: absolute; left: 15px; top: 50%; width: 24px; height: 24px; margin: 0; transform: translateY(-50%); opacity: 0; }
.question-card__letter { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #dcd4e8; border-radius: 8px; font-size: 12px; font-weight: 650; color: #8c79a5; background: #f4f0f9; }
.question-card__option-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.question-card__option-text { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.question-card__option-result { font-size: 10px; font-weight: 600; }
.question-card.is-answered .question-card__option { padding-block: 10px; }
.question-card__option.is-selected { border-color: #8460b6; background: #e7dcf6; }
.question-card__option.is-selected .question-card__letter { color: #fff; border-color: #7950aa; background: #7950aa; }
.question-card__option.is-correct { color: #285442; border-color: #8fbca4; background: #e6f0e9; }
.question-card__option.is-correct .question-card__letter { color: #fff; background: #3d785d; border-color: #3d785d; }
.question-card__option.is-wrong { color: #884c43; border-color: #d6a89c; background: #f5e8e2; }
.question-card__option.is-wrong .question-card__letter { color: #fff; background: #a76354; border-color: #a76354; }
.question-card__option:has(input:disabled) { cursor: default; }
.question-card__option:has(input:focus-visible), .question-card__action:focus-visible, .question-card__scroll:focus-visible { outline: 2px solid #7950aa; outline-offset: 2px; }
.question-card__feedback { margin-top: 18px; padding: 14px 0 0; border-top: 1px solid #d4c8e3; }
.question-card__feedback-title { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.question-card__feedback[data-correct="true"] .question-card__feedback-title { color: #32664e; }
.question-card__explanation { margin: 0; font-size: 13px; line-height: 1.55; color: #70617f; overflow-wrap: anywhere; }
.question-card.is-success .question-card__feedback { margin-top: 24px; padding: 20px; border: 1px solid #d4c8e3; border-radius: 16px; background: #ffffff80; }
.question-card.is-success .question-card__feedback-title { margin-bottom: 10px; font-size: 20px; }
.question-card.is-success .question-card__explanation { font-size: 15px; line-height: 1.65; }
.question-card__footer { --card-footer-color: #8b7a9f; flex: none; width: 100%; }
.question-card__action { display: block; width: 100%; max-width: 640px; margin-inline: auto; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 12px; background: #69438f; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.question-card__action:disabled { background: #dfd6ec; color: #9481ac; cursor: default; }
@media (min-width: 700px) { .question-card { padding-top: var(--format-top); gap: 22px; } .question-card__option { min-height: 65px; padding: 14px 16px; } .question-card__option-text { font-size: 16px; } }
@media (max-height: 650px) { .question-card { padding-top: var(--format-top); gap: 10px; } .question-card__meta { margin-bottom: 14px; } .question-card__question { font-size: 24px; } .question-card__instruction { margin-bottom: 12px; } .question-card__option { margin-top: 8px; min-height: 54px; padding-block: 10px; } }
@media (prefers-reduced-motion: reduce) { .question-card__option { transition: none; } }