/* Challenge block: approved green palette, actual media and one continuous feedback. */
body:has([data-screen=quiz]:not(.hidden)){--green:#53fca3;--bg:#001510;--muted:#b0c8bd;--line:#2a493e;background:#001510;color:#f4f7f5;font-family:Arial,sans-serif}
body:has([data-screen=quiz]:not(.hidden)) .ambient{background:radial-gradient(ellipse at 100% 24%,#07573735,transparent 40%),#001510}
body:has([data-screen=quiz]:not(.hidden)) .ambient:before,body:has([data-screen=quiz]:not(.hidden)) .ambient:after{display:none}
body:has([data-screen=quiz]:not(.hidden)) .mast{height:108px;width:min(85.2%,1060px);border-color:#648d7d55}
body:has([data-screen=quiz]:not(.hidden)) .brand{font:800 39px/1 Arial,sans-serif;letter-spacing:-.025em;gap:13px}
body:has([data-screen=quiz]:not(.hidden)) .brand b{font:400 22px/1.2 Arial,sans-serif;letter-spacing:0;color:#f4f7f5}
body:has([data-screen=quiz]:not(.hidden)) .mast-d{font:500 18px/1 Arial,sans-serif;letter-spacing:-.025em;padding:12px 18px;border:1px solid #69ffad;color:#b6ffcf;background:#00191066;gap:11px}
body:has([data-screen=quiz]:not(.hidden)) .mast-d svg{order:-1;width:34px;height:26px}
body:has([data-screen=quiz]:not(.hidden)) .mast-label-default{display:none}
body:has([data-screen=quiz]:not(.hidden)) .mast-label-hero{display:inline}
body:has([data-screen=quiz]:not(.hidden)) #photoToggle{display:none}
body:has([data-screen=quiz]:not(.hidden)) .foot{border-color:#2a493e;color:#89a798;width:min(85.2%,1060px)}
[data-screen=quiz]{width:min(85.2%,1060px)}
[data-screen=quiz] .narrow{max-width:680px;padding:30px 0 40px}
[data-screen=quiz] .journey{margin-bottom:30px}
[data-screen=quiz] .progress{background:repeating-linear-gradient(to right,#2e4b3c 0,#2e4b3c calc(20% - 5px),transparent calc(20% - 5px),transparent 20%)}
[data-screen=quiz] .progress span{background:linear-gradient(90deg,#3ce895,#92ffbb)}
[data-screen=quiz] .progress:after{background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 5px),#001510 calc(20% - 5px),#001510 20%)}
[data-screen=quiz] .count{color:#f1f8f3}[data-screen=quiz] .count span{color:#a6c2b2}
[data-screen=quiz] .stage{font:600 11px/1.5 Arial,sans-serif;color:#7bf584;letter-spacing:.13em}
[data-screen=quiz] #qH{font:700 43px/1.08 Georgia,serif;color:#fafbf9;letter-spacing:-.035em;text-wrap:initial;margin:17px 0 15px}
[data-screen=quiz] .instr{color:#b9cec1;font-size:16px;line-height:1.6;margin-bottom:25px}
[data-screen=quiz] .audio{--audio-progress:0;border-color:#4f735c;background:linear-gradient(125deg,#0f3325e6,#071e17);border-radius:16px;min-height:132px;box-shadow:inset 0 1px 0 #b5ffd215,0 10px 25px #0002}
[data-screen=quiz] .audio:hover{border-color:#81f4ad}
[data-screen=quiz] .audio-cover{border-radius:15px;flex-basis:33%;width:33%;max-width:190px;background:#163426}
[data-screen=quiz] .audio-cover img{object-position:50% 0%;transform:scale(1.65);transform-origin:60% 0%}
[data-screen=quiz] .audio-cover:after{background:linear-gradient(transparent 60%,#00150a22)}
[data-screen=quiz] .a-ic{background:#061e1799;border-color:#f2fff0b0;box-shadow:none;color:white;font-size:17px}
[data-screen=quiz] .audio-info{position:relative;padding:19px 23px;gap:15px}
[data-screen=quiz] .audio-info:before{content:"";position:absolute;bottom:10px;left:23px;right:23px;height:2px;background:#335841;border-radius:2px}
[data-screen=quiz] .audio-info:after{content:"";position:absolute;bottom:10px;left:23px;width:calc((100% - 46px)*var(--audio-progress));height:2px;background:#63ffab;border-radius:2px}
[data-screen=quiz] .a-cp strong{font-size:21px;color:#f4fbf6}
[data-screen=quiz] .a-cp small{font-size:13px;color:#b6ccbf;margin-top:4px}
[data-screen=quiz] .wave i{background:#3b604a}
[data-screen=quiz] .wave i:nth-child(-n+14){background:#56ee9b;box-shadow:none}
[data-screen=quiz] .audio.playing .wave i{background:#56ee9b}
[data-screen=quiz] #audioDuration{font-size:11px;color:#cde7d6;min-width:65px;text-align:right}
[data-screen=quiz] .answers{margin-top:26px}
[data-screen=quiz] .a-prompt{font:600 10px/1.5 Arial,sans-serif;letter-spacing:.14em;color:#b6cfc0;margin-bottom:14px}
[data-screen=quiz] .opts button{font:400 16px/1.45 Arial,sans-serif;border-color:#45644f;background:linear-gradient(125deg,#0d2b20c7,#071d17);color:#f2f7f4;box-shadow:inset 0 1px 0 #b5ffd209;min-height:76px;gap:14px}
[data-screen=quiz] .opts button:hover{border-color:#78d99d;background:#0e3425}
[data-screen=quiz] .option-letter{font-size:17px;background:#294e3a;color:#f3f9f4}
[data-screen=quiz] .option-radio{border-color:#a7c5b1}
[data-screen=quiz] .opts button.selected{border-color:#53fca3;background:linear-gradient(125deg,#154a31,#082b1f);box-shadow:0 0 15px #28ff8f08}
[data-screen=quiz] .selected .option-letter{background:#28633d}
[data-screen=quiz] .selected .option-radio{border-color:#53fca3;background:radial-gradient(circle,#53fca3 0 36%,transparent 41%)}
[data-screen=quiz] .opts button:disabled{cursor:default}
[data-screen=quiz] .opts button.ok{border:2px solid #53fca3;background:linear-gradient(120deg,#144c30,#082e20);padding:15px 17px;color:#effff3}
[data-screen=quiz] .opts button.ok .option-radio{border-color:#53fca3;background:radial-gradient(circle,#53fca3 0 36%,transparent 41%)}
[data-screen=quiz] .opts button.x{border:1px solid #c69673;background:#352d1e;color:#f9e8d9}
[data-screen=quiz] .opts button.x .option-radio{border-color:#deb58f;background:radial-gradient(circle,#deb58f 0 36%,transparent 41%)}
[data-screen=quiz] .opts button.off{opacity:.65}
[data-screen=quiz] .btn{display:flex;justify-content:center;gap:25px;min-height:60px;width:100%;border:0;border-radius:999px;padding:17px 25px;font:700 18px/1.25 Arial,sans-serif;letter-spacing:-.025em;background:linear-gradient(180deg,#80ffbc,#45f6a6 44%,#1eeda0);color:#00160e;box-shadow:inset 0 1px 1px #d6ffe6aa,0 6px 30px #09ff9c0a}
[data-screen=quiz] .btn:disabled{border:1px solid #355245;background:#173426;color:#91aa9b;box-shadow:none;transform:none}
[data-screen=quiz] .btn:enabled:hover{filter:brightness(1.05);transform:translateY(-1px)}
[data-screen=quiz] .vinheta{border-color:#44664f;border-left-color:#6cf8a0;background:linear-gradient(125deg,#0c3221,#071f17);color:#ecf7ef;font-size:20px;line-height:1.6}
/* Keep the original question and choices visible after confirming. */
[data-screen=quiz].has-feedback .stage,[data-screen=quiz].has-feedback #qH,[data-screen=quiz].has-feedback #qInstr,[data-screen=quiz].has-feedback #qVin,[data-screen=quiz].has-feedback #qAns{display:block}
[data-screen=quiz].has-feedback #qAudio{display:flex}
[data-screen=quiz].has-feedback #confirmAnswer{display:none}
[data-screen=quiz] .reveal{margin:30px 0 0;padding:25px 0 0;border-top:1px solid #365a43;scroll-margin-top:18px}
[data-screen=quiz] .feedback-phase{display:block}
[data-screen=quiz] .response-phase{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;padding:0;text-align:left}
[data-screen=quiz] .result-symbol{width:54px;height:54px;margin:0;border-radius:50%;background:#123d28;filter:none;box-shadow:0 0 24px #1bff8b0a}
[data-screen=quiz] .result-symbol svg{width:44px;height:44px;stroke-width:3;stroke:#86ffb3}
[data-screen=quiz] .result-symbol.incorrect{background:#423622}.result-symbol.incorrect svg{stroke:#e6bd92}
[data-screen=quiz] #answerTitle{font:700 26px/1.2 Arial,sans-serif;letter-spacing:-.04em;margin:0;color:#6affaa}
[data-screen=quiz] .result-symbol.incorrect+.feedback-heading #answerTitle{color:#f3d4ae}
[data-screen=quiz] .response-phase .status{font:400 14px/1.55 Arial,sans-serif;color:#bed4c5;margin:6px 0 0;max-width:none}
[data-screen=quiz] .answer-recap{grid-column:1/-1;padding:17px;margin:4px 0 0;border:1px solid #41664e;border-radius:12px;background:#09291c}
[data-screen=quiz] .answer-recap>span{font-size:9px;color:#b0d0bc;letter-spacing:.12em}
[data-screen=quiz] .answer-recap p{font-size:15px;line-height:1.6}
[data-screen=quiz] .explanation-phase,[data-screen=quiz] .learning-phase{padding-top:32px}
[data-screen=quiz] .feedback-phase>.eyebrow{font:600 10px/1.4 Arial,sans-serif;letter-spacing:.14em;color:#7bf584;margin:0 0 11px}
[data-screen=quiz] .feedback-phase>h2{font:700 30px/1.15 Georgia,serif;color:#f6faf7;letter-spacing:-.03em;margin:0 0 19px}
[data-screen=quiz] .rv-video{margin:0 0 23px}
[data-screen=quiz] .lesson-media{aspect-ratio:3/4;max-width:400px;max-height:75svh;margin-inline:auto;border:1px solid #4d6a50;border-radius:15px;background:#061b13;box-shadow:none}
[data-screen=quiz] .lesson-media video{background:#061b13;object-fit:cover;object-position:50% 60%}
[data-screen=quiz] .lesson-media.watching video{object-fit:contain}
[data-screen=quiz] .video-credit{font-size:11px;line-height:1.5;color:#b9d6c4;text-align:center;margin-top:10px}
[data-screen=quiz] .video-credit span{color:#8cb89e}
[data-screen=quiz] .said{margin:24px 0 11px}
[data-screen=quiz] .said>span{font:600 10px/1.5 Arial,sans-serif;color:#b8d4c3;letter-spacing:.13em;margin:0 0 11px}
[data-screen=quiz] .said strong{font:400 18px/1.65 Arial,sans-serif;letter-spacing:0;padding:18px 20px;border:1px solid #3e694b;background:linear-gradient(125deg,#123c27,#082b1c);color:#f5faf6;border-radius:12px}
[data-screen=quiz] .said mark{background:#67f6a0;color:#002e19;box-shadow:none}
[data-screen=quiz] .link{display:block;color:#7affb0;font-size:14px;min-height:44px;padding:8px 0;line-height:1.4}
[data-screen=quiz] .expl{font:400 15px/1.75 Arial,sans-serif;color:#c1d5c7;margin-top:17px}
[data-screen=quiz] .media-message{font:400 13px/1.6 Arial,sans-serif;color:#f0ce9c;background:#382d1c;border:1px solid #816339;border-radius:9px;padding:12px 14px;margin:12px 0}
[data-screen=quiz] .learning-phase{margin-top:29px;border-top:1px solid #2e513d}
[data-screen=quiz] .learning-phase .tf{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:23px 0 27px}
[data-screen=quiz] .tf>div{background:linear-gradient(125deg,#0e2d20,#071f17);border-color:#3b6047;border-radius:12px;padding:18px 16px;align-items:flex-start}
[data-screen=quiz] .tf i{background:#224c32;color:#c3e8cf}
[data-screen=quiz] .tf .real-expression i{background:linear-gradient(#9affb3,#24c67a);color:#073518;box-shadow:none}
[data-screen=quiz] .tf span{color:#a3c7b0;font-size:9px;line-height:1.5}
[data-screen=quiz] .tf strong{font:400 16px/1.5 Arial,sans-serif;color:#edf8f0}
[data-screen=quiz] .known legend{font:400 15px/1.5 Arial,sans-serif;color:#e4f2e9;margin-bottom:14px}
[data-screen=quiz] .known button{border-color:#42674d;border-radius:10px;color:#e4f3e9;background:#0b281d;font:400 14px/1.4 Arial,sans-serif;min-height:48px}
[data-screen=quiz] .known button.on{border-color:#53fca3;background:#16482e;box-shadow:none}
[data-screen=quiz] .learning-phase>#rvNext{margin-top:28px}
[data-screen=quiz] .q-foot{color:#a5c3b0;font-size:12px;line-height:1.5;margin-top:25px}
@media(max-width:900px){
 body:has([data-screen=quiz]:not(.hidden)) .mast{width:85.2%;height:18vw;min-height:64px;max-height:115px;gap:8px}
 body:has([data-screen=quiz]:not(.hidden)) .brand{font-size:6.1vw;gap:1.5vw;letter-spacing:-.025em}
 body:has([data-screen=quiz]:not(.hidden)) .brand b{font:400 3.2vw/1.2 Arial,sans-serif;letter-spacing:0}
 body:has([data-screen=quiz]:not(.hidden)) .mast-d{padding:1.8vw 2.5vw;gap:1.6vw;font-size:3.15vw}
 body:has([data-screen=quiz]:not(.hidden)) .mast-d svg{width:6vw;height:4.5vw}
 [data-screen=quiz] .narrow{padding:23px 0 30px}
 [data-screen=quiz] .journey{margin-bottom:27px}
 [data-screen=quiz] .stage{font-size:10px;letter-spacing:.11em;line-height:1.6}
 [data-screen=quiz] #qH{font-size:33px;line-height:1.08;margin:16px 0 14px}
 [data-screen=quiz] .instr{font-size:14px;line-height:1.6;margin-bottom:22px}
 [data-screen=quiz] .audio{min-height:112px;border-radius:14px}
 [data-screen=quiz] .audio-cover{border-radius:13px;width:34%;flex-basis:34%}
 [data-screen=quiz] .audio-cover img{object-position:50% 0%;transform:scale(1.65);transform-origin:60% 0%}
 [data-screen=quiz] .a-ic{width:35px;height:35px;left:10px;bottom:10px;font-size:15px}
 [data-screen=quiz] .audio-info{padding:14px 14px 18px;gap:13px}
 [data-screen=quiz] .audio-info:before{left:14px;right:14px;bottom:9px}
 [data-screen=quiz] .audio-info:after{left:14px;bottom:9px;width:calc((100% - 28px)*var(--audio-progress))}
 [data-screen=quiz] .a-cp strong{font-size:17px;line-height:1.25}
 [data-screen=quiz] .a-cp small{font-size:12px}
 [data-screen=quiz] .audio-bottom{gap:6px}
 [data-screen=quiz] #audioDuration{font-size:10px;min-width:60px}
 [data-screen=quiz] .wave{height:22px;gap:2px}
 [data-screen=quiz] .answers{margin-top:24px}
 [data-screen=quiz] .opts button{font-size:14px;line-height:1.5;gap:11px;min-height:75px;padding:14px}
 [data-screen=quiz] .opts button.selected,[data-screen=quiz] .opts button.ok{padding:13px}
 [data-screen=quiz] .option-letter{font-size:16px}
 [data-screen=quiz] .btn{font-size:16px;min-height:56px;padding:16px 20px;gap:22px}
 [data-screen=quiz] .vinheta{font-size:18px;line-height:1.6;padding:17px 18px}
 [data-screen=quiz] .reveal{margin-top:28px;padding-top:23px}
 [data-screen=quiz] .response-phase{grid-template-columns:45px 1fr;gap:12px}
 [data-screen=quiz] .result-symbol{width:45px;height:45px}
 [data-screen=quiz] .result-symbol svg{width:37px;height:37px}
 [data-screen=quiz] #answerTitle{font-size:24px}
 [data-screen=quiz] .response-phase .status{font-size:13px;line-height:1.6;margin-top:4px}
 [data-screen=quiz] .answer-recap{padding:16px;margin-top:6px}
 [data-screen=quiz] .answer-recap p{font-size:14px}
 [data-screen=quiz] .explanation-phase,[data-screen=quiz] .learning-phase{padding-top:27px}
 [data-screen=quiz] .feedback-phase>h2{font-size:28px;line-height:1.15;margin-bottom:18px}
 [data-screen=quiz] .rv-video{margin-bottom:21px}
 [data-screen=quiz] .lesson-media{max-width:none;border-radius:13px;aspect-ratio:3/4;max-height:75svh}
 [data-screen=quiz] .video-credit{font-size:10px;line-height:1.5;margin-top:9px}
 [data-screen=quiz] .said strong{font-size:16px;line-height:1.65;padding:16px}
 [data-screen=quiz] .link{font-size:13px}
 [data-screen=quiz] .expl{font-size:14px;line-height:1.75}
 [data-screen=quiz] .learning-phase .tf{grid-template-columns:1fr;gap:10px;margin-top:21px}
 [data-screen=quiz] .tf>div{padding:16px 15px}
 [data-screen=quiz] .tf strong{font-size:15px;line-height:1.5}
 [data-screen=quiz] .known legend{font-size:14px;line-height:1.6}
 [data-screen=quiz] .known button{font-size:13px;min-height:46px}
 [data-screen=quiz] .q-foot{font-size:10px;line-height:1.6;gap:6px}
}
@media(max-width:360px){[data-screen=quiz] #qH{font-size:30px}[data-screen=quiz] .stage{font-size:9px}[data-screen=quiz] .opts button{font-size:13px;padding:13px 11px;gap:9px}[data-screen=quiz] .opts button.selected,[data-screen=quiz] .opts button.ok{padding:12px 10px}[data-screen=quiz] .a-cp strong{font-size:16px}[data-screen=quiz] .audio-info{padding-left:12px;padding-right:12px}[data-screen=quiz] #audioDuration{font-size:9px;min-width:52px}}
[data-screen=quiz] .symbol-wrong,[data-screen=quiz] .incorrect .symbol-correct{display:none}
[data-screen=quiz] .incorrect .symbol-wrong{display:block}

[data-screen=quiz] .context-photo{margin:23px 0 26px;border:1px solid #45644f;border-radius:14px;overflow:hidden;background:#0a271b}
[data-screen=quiz] .context-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
[data-screen=quiz] .context-photo figcaption{padding:9px 13px;font:400 10px/1.5 Arial,sans-serif;color:#a9c6b4}
[data-screen=quiz] .context-photo a{text-decoration:underline;text-underline-offset:2px;color:#bfe3ca}

/* Keep the task and confirmation in view instead of repeating the masthead. */
body:has([data-screen=quiz]:not(.hidden)) .mast,body:has(.setup-screen:not(.hidden)) .mast{display:none}
[data-screen=quiz] .stage{display:none!important}
@media(max-width:900px){
 [data-screen=quiz]:not(.has-feedback) .narrow{padding-bottom:110px}
 [data-screen=quiz] .confirm{position:fixed;left:7.4vw;right:7.4vw;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;margin:0;z-index:10;box-shadow:0 0 0 9px #001510,0 -12px 28px #001510d9,0 8px 18px #001510cc}
}