.quiz{padding:28px 4vw 40px;border-bottom:1px solid var(--line);text-align:center;scroll-margin-top:86px}.quiz-heading h1{font-size:clamp(25px,2.6vw,39px);line-height:1.65;margin-bottom:5px}.quiz-heading p{font-size:15px;color:var(--muted)}.quiz-grid{direction:ltr;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:min(1120px,calc((100svh - 420px)*2));margin:22px auto}.quiz-tile{direction:rtl;position:relative;min-width:0}.quiz-painting{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;outline:2px solid transparent;outline-offset:3px}.quiz-painting svg{display:block;width:100%;height:auto;aspect-ratio:1}.quiz-painting[aria-pressed=true]{outline-color:var(--teal)}.quiz-painting:focus-visible,.quiz-zoom:focus-visible,.quiz-actions button:focus-visible,.quiz-actions a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.quiz-selection{position:absolute;bottom:8px;left:8px;padding:3px 9px;font-size:12px;background:var(--teal);color:white;pointer-events:none}.quiz-painting[aria-pressed=false] .quiz-selection{display:none}.quiz-painting .quiz-answer-image{display:none}.quiz.revealed .quiz-question-image{display:none}.quiz.revealed .quiz-answer-image{display:block}.quiz.revealed .quiz-selection{display:none}.quiz.revealed .quiz-painting{cursor:zoom-in;outline-color:transparent}.quiz.revealed .quiz-tile[data-watercolor=true] .quiz-painting{outline-color:var(--teal)}.quiz-zoom{display:block;margin:4px auto 0;padding:0 8px;border:0;background:none;color:var(--muted);font-size:12px;line-height:1.9;cursor:zoom-in}.quiz-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 26px}.quiz-actions button{padding:9px 29px;background:var(--teal);border:1px solid var(--teal);color:var(--paper);cursor:pointer;font-size:16px;border-radius:2px}.quiz-actions a{font-size:14px;text-underline-offset:5px}.quiz-result{max-width:800px;margin:0 auto 20px;scroll-margin-top:105px}.quiz-result h2{font-size:25px;color:var(--teal);line-height:1.8}.quiz-result p{font-size:16px;color:var(--muted);margin-top:7px}.quiz [hidden]{display:none!important}.quiz-dialog{width:min(92vw,700px);max-height:95svh;overflow:auto;background:var(--paper);color:var(--ink);border:0;padding:18px}.quiz-dialog::backdrop{background:#18251fe0}.quiz-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.quiz-dialog-title{font-size:16px}.quiz-dialog-close{border:1px solid var(--line);background:var(--paper);padding:6px 15px;font-size:14px;cursor:pointer}.quiz-dialog-art svg{display:block;max-height:75svh;width:100%;aspect-ratio:1}.quiz-dialog-caption{font-size:15px;text-align:center;margin-top:10px}.quiz-noscript{font-size:16px;color:var(--muted)}
@media(max-width:900px){.quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}.quiz{padding-inline:5vw}}
@media(max-width:640px){.quiz{padding:25px 5vw 35px;scroll-margin-top:70px}.quiz-heading h1{font-size:27px}.quiz-heading p{font-size:14px}.quiz-grid{gap:13px 10px;margin-block:20px}.quiz-actions{gap:15px}.quiz-result h2{font-size:22px}.quiz-result p{font-size:15px}.quiz-dialog{padding:12px}}
/* Give the artwork the remaining screen area; SVG meet preserves every edge. */
@media(min-width:901px){
 .quiz{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:calc(100svh - 86px);min-height:540px;padding:12px 2vw 16px}
 .quiz.revealed{grid-template-rows:auto minmax(0,1fr) auto auto}
 .quiz-heading h1{font-size:clamp(27px,2.2vw,35px);line-height:1.35;margin-bottom:4px}
 .quiz-heading p{font-size:14px;line-height:1.6}
 .quiz-grid{width:100%;max-width:none;min-height:0;height:100%;margin:0;gap:10px 14px;grid-template-rows:repeat(2,minmax(0,1fr))}
 .quiz-tile{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:3px;min-height:0}
 .quiz-painting{height:100%;min-height:0}
 .quiz-painting svg{height:100%;width:100%;aspect-ratio:auto}
 .quiz-zoom{margin:0;line-height:1.5;padding:1px 10px}
 .quiz-actions button{padding:7px 24px;line-height:1.6}
 .quiz-result{max-width:1050px;margin:0 auto}
 .quiz-result h2{font-size:23px;line-height:1.5}
 .quiz-result p{font-size:14px;line-height:1.7;margin-top:3px}
 .quiz:fullscreen{height:100svh;min-height:540px;max-width:none;width:100%;background:var(--paper);padding:16px 2vw}
}
.quiz-actions .quiz-fullscreen{color:var(--teal);background:transparent;border-color:var(--line)}
.quiz-hover-preview{position:fixed;inset:auto;margin:0;padding:10px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 55px #15282040;pointer-events:none;z-index:50;overflow:hidden}
.quiz-hover-preview svg{display:block;width:100%;height:auto;aspect-ratio:1}
.quiz-hover-preview p{margin:6px 0 0;font-size:14px;line-height:1.6;text-align:center}
.quiz-hover-preview::backdrop{background:transparent;pointer-events:none}
.quiz-hover-preview[hidden]{display:none!important}
.quiz-dialog{width:min(96vw,calc(96svh - 110px));max-height:96svh}
.quiz-dialog-art svg{max-height:calc(96svh - 135px);height:auto}
@media(max-width:900px){.quiz-grid{max-width:none}.quiz{padding-inline:2.5vw}.quiz-fullscreen{display:none!important}}
@media(min-width:901px){
 .quiz{height:calc(100svh - 64px);scroll-margin-top:64px;gap:8px;padding:8px 1.5vw 10px}
 .quiz:fullscreen{height:100svh;padding:10px 1.5vw}
 .quiz-grid{gap:8px 10px}
}
.quiz-feedback{margin:3px 0 0;font-size:12px;line-height:1.65;color:var(--ink);padding:5px 7px;border:1px solid var(--line);background:var(--paper)}
.quiz-tile[data-quiz-outcome=correct-choice] .quiz-feedback,.quiz-tile[data-quiz-outcome=correct-skip] .quiz-feedback{border-color:var(--teal)}
.quiz-tile[data-quiz-outcome=incorrect-choice] .quiz-feedback,.quiz-tile[data-quiz-outcome=missed] .quiz-feedback{border-color:#9b4a32;color:#75351f}
.quiz.revealed .quiz-tile[data-quiz-outcome=incorrect-choice] .quiz-painting,.quiz.revealed .quiz-tile[data-quiz-outcome=missed] .quiz-painting{outline-color:#9b4a32}
.quiz.revealed .quiz-tile[data-quiz-outcome=correct-skip] .quiz-painting{outline-color:var(--line)}
@media(min-width:901px){.quiz-tile{grid-template-rows:minmax(0,1fr) auto auto}.quiz-feedback{font-size:12px;padding:3px 5px}}