.am-quiz { padding-block: clamp(3rem,6vw,5.5rem) .5rem; scroll-margin-top: 8rem; }
.am-quiz-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; }
.am-quiz-heading h2 { font-size: clamp(4rem,8vw,6rem); line-height: .9; text-transform: uppercase; }
.am-quiz-heading p { margin: 0 .5rem .2rem 0; font-size: 1.1rem; line-height: 1.5; max-width: 32ch; }
.am-quiz-board { display: grid; grid-template-columns: 1.25fr .75fr; background: #e5e8df; }
.am-quiz-play { padding: clamp(1.4rem,3.6vw,3.3rem); min-width: 0; }
.am-quiz-progress { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; color: #485b5d; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.am-quiz-question + .am-quiz-question { margin-top: 2rem; }
.am-quiz.is-ready .am-quiz-question { margin: 0; }
.am-quiz-question h3, .am-quiz-finish h3 { margin: 0 0 1.4rem; font-size: clamp(1.5rem,2.5vw,2.15rem); line-height: 1.2; color: #173e43; text-wrap: balance; }
.am-quiz-options { display: grid; gap: .65rem; }
.am-quiz-options button { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3.5rem; border: 1px solid #a4b5a8; background: #f9f7f0; color: #173e43; padding: .65rem .8rem; text-align: left; cursor: pointer; font-size: 1rem; font-weight: 700; transition: background 180ms,border-color 180ms; }
.am-answer-letter { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; color: #485b5d; border: 1px solid #b8c6bb; font-size: .8rem; }
.am-quiz-options button:hover:not([aria-disabled="true"]) { background: #fff; border-color: #173e43; }
.am-quiz-options button.is-correct { background: #173e43; border-color: #173e43; color: #fff; }
.am-quiz-options button.is-correct .am-answer-letter { color: #fff; border-color: #6b8c89; }
.am-quiz-options button.is-selected:not(.is-correct) { border: 2px solid #173e43; padding: calc(.65rem - 1px) calc(.8rem - 1px); }
.am-quiz-options button[aria-disabled="true"] { cursor: default; }
.am-answer-mark { margin-left: auto; }
.am-answer-mark svg { width: 20px; height: 20px; }
.am-quiz-feedback { min-height: 1.5rem; margin: 1rem 0 .4rem; font-weight: 800; line-height: 1.5; }
.am-quiz-feedback:empty { margin: 0; min-height: 0; }
.am-quiz-explanation { margin-top: 1rem; }
.am-quiz-explanation summary { min-height: 44px; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.am-quiz-explanation > div { font-size: .95rem; line-height: 1.6; }
.am-quiz-explanation a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .83rem; color: #00586c; }
.am-quiz-explanation a svg { width: 17px; height: 17px; transform: rotate(-45deg); }
.am-quiz.is-ready .am-quiz-explanation summary { display: none; }
.am-quiz-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.am-quiz-reveal { background: transparent; border: 0; padding: .6rem 0; min-height: 44px; color: #173e43; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 700; }
.am-quiz-next, .am-quiz-restart { display: inline-flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; min-height: 48px; padding: .75rem 1rem; background: #f9b000; color: #101e22; cursor: pointer; font-weight: 800; }
.am-quiz-next:hover, .am-quiz-restart:hover { background: #ffcd48; }
.am-quiz-next:disabled { color: #53605b; background: #d3d9d0; cursor: not-allowed; }
.am-quiz-photo { position: relative; margin: 0; min-height: 32rem; overflow: hidden; background: #173e43; }
.am-quiz-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 35%; }
.am-quiz-photo figcaption { position: absolute; inset: auto 0 0; padding: 4rem 1.4rem 1.5rem; background: linear-gradient(transparent,rgba(6,20,23,.9)); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.5; }
.am-quiz-photo figcaption a { color: #fff; }
.am-quiz-question h3 { scroll-margin-top: 11rem; }
.am-quiz-finish p { margin: 0 0 1.4rem; line-height: 1.65; }
.am-quiz.is-ready { --quiz-ease: cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: no-preference) { .am-quiz.is-ready .am-quiz-question:not([hidden]) { animation: am-quiz-enter 350ms var(--quiz-ease) both; } @keyframes am-quiz-enter { from { opacity: .75; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
@media (max-width:900px) { .am-quiz { scroll-margin-top: 11rem; } .am-quiz-board { grid-template-columns: 1.4fr .6fr; } }
@media (max-width:650px) { .am-quiz-heading { align-items: start; flex-direction: column; gap: 1rem; } .am-quiz-heading h2 { font-size: 4.7rem; } .am-quiz-heading h2 br { display: none; } .am-quiz-heading p { font-size: 1rem; } .am-quiz-board { grid-template-columns: 1fr; } .am-quiz-photo { display: none; } .am-quiz-play { padding: 1.5rem 1rem; } .am-quiz-question h3 { font-size: 1.5rem; } .am-quiz-options button { min-height: 3.7rem; font-size: .95rem; } }
@media (prefers-reduced-motion:reduce) { .am-quiz * { animation: none !important; transition: none !important; } }