/* The illustration uses the available space after the answer grid. */
.app-shell{max-width:960px}
.card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-left:clamp(16px,4vw,36px);padding-right:clamp(16px,4vw,36px)}
.world{min-height:0;max-height:none;container-type:size;display:grid;place-items:center}
/* Keep the oval still while pictures and videos move inside it. */
.picture-clip{position:relative;width:min(100cqw,100cqh,480px);aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;z-index:2;pointer-events:none}
.picture-clip .hero-sprite{width:100%;max-width:none}
.comparison{width:min(72cqw,72cqh,315px)}
.response-zone{min-width:0}
.quick-choices{font:700 14px ui-rounded,'Trebuchet MS',sans-serif;color:#635746;background:#fff9;border:1px solid #fff;border-radius:22px;min-height:42px;padding:8px 12px;cursor:pointer;touch-action:manipulation}
.quick-choices:focus-visible{outline:3px solid #5d74b5;outline-offset:3px}
.card-nav{padding-bottom:max(12px,env(safe-area-inset-bottom))}
.options.choice-count-5[data-columns="2"] .answer:last-child{grid-column:1/-1}
#donateGate{max-width:480px}#donateGate form{padding:10px}
#gateQuestion{display:block;font-size:24px;font-weight:800;margin:20px 0 10px}
#gateAnswer{font:inherit;font-size:24px;max-width:100%;width:160px;padding:10px;border:2px solid #b9c5ab;border-radius:12px}
.gate-actions{display:flex;gap:10px;flex-wrap:wrap}
#gateMessage{min-height:24px;color:#a54444}
.options{grid-template-columns:repeat(var(--answer-columns,3),minmax(0,1fr));gap:10px}
.options .answer{font-size:var(--answer-font-size,26px);height:clamp(56px,9dvh,84px);min-width:0;padding:8px 12px;white-space:nowrap;letter-spacing:-.6px}
.options.choice-count-5[data-columns="2"] .answer{font-size:var(--answer-label-font-size,26px);padding:2px 8px;white-space:normal;line-height:1.05}
.options .answer.word-travel{animation-name:swap-word-grid}
.switch-row select{font:inherit;font-size:16px;min-height:44px;padding:8px 12px;border:1px solid #bdcbb5;border-radius:12px;background:#fff;color:#52694c}
@keyframes swap-word-grid{0%{transform:translate(var(--swap-x),var(--swap-y)) scale(1)}50%{transform:translate(var(--swap-half-x),var(--swap-half-y)) scale(.93)}100%{transform:translate(0,0) scale(1)}}
@media(min-width:700px){.app-shell{max-height:1100px}.card-title h1{font-size:35px}}
@media(max-height:730px){.options .answer{height:60px}.bottom-hint{height:28px;margin-top:6px}.response-message{height:24px;line-height:24px;margin-bottom:6px}}
@media(max-height:600px){.options .answer{height:52px}.options{gap:8px}.response-message{height:20px;line-height:20px}.bottom-hint{height:24px;margin-top:4px}}
@media(orientation:landscape) and (min-width:600px) and (max-height:650px){
 .app-shell{height:100dvh;max-height:none;border-radius:0}
 .app-header{height:48px;min-height:48px;padding:6px 20px}
 .card{grid-template-columns:minmax(0,1fr) minmax(280px,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:22px;padding:0 20px}
 .card-title{grid-column:1/-1}.card-title .eyebrow{display:none}.card-title h1{font-size:24px;margin:0 0 4px}
 .world{grid-column:1;grid-row:2;margin:0}
 .response-zone{grid-column:2;grid-row:2;align-self:center;padding:0}
 .options .answer{height:52px}.bottom-hint{display:none}
 .card-nav{min-height:52px;padding-top:4px;padding-bottom:4px}
 .nav-arrow{height:42px}.next-card{width:128px}
 .record-strip{height:18px;min-height:18px}
}
@media(prefers-reduced-motion:reduce){.answer.word-travel{animation:none!important}}