@layer components{.quiz{--pad:min(1.25em, var(--gutter) - .25rem);--shift:1.5rem;--hold:.15s;interpolate-size:allow-keywords;margin-inline:calc(-1 * var(--pad));padding:calc(var(--pad) * 1.2) var(--pad) var(--pad);border-radius:var(--card-radius);background:var(--color-paper-raised);box-shadow:var(--card-shadow);gap:1em;display:grid;overflow-x:clip;container-type:inline-size}.quiz-stage{padding-block-end:.4em;display:grid;overflow:visible clip}.quiz-question{border:0;min-inline-size:0;margin:0;padding:0;& legend{inline-size:100%;padding:0}}.quiz-count{color:var(--color-ink-soft);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;display:block}.quiz-prompt{text-wrap:balance;margin-block-start:.2em;font-size:1.125em;font-weight:600;line-height:1.25;display:block}.quiz-detail{color:var(--color-ink-soft);margin-block-start:.4em}.quiz-answers{--columns:2;grid-template-columns:repeat(var(--columns), 1fr);gap:.75em;margin-block-start:1.1em;display:grid;&[data-count="3"]{--columns:3}}@container (width<28rem){.quiz-answers[data-count="3"]{--columns:1}}.quiz-answer{border:1px solid var(--color-rule);background:var(--color-paper);min-block-size:3em;box-shadow:0 .2em 0 var(--color-rule);cursor:pointer;font-family:var(--font-display);text-align:center;transition:translate var(--duration-quick) var(--ease-snap), box-shadow var(--duration-quick) var(--ease-move), border-color var(--duration-quick) var(--ease-move), background-color var(--duration-quick) var(--ease-move);border-radius:3px;place-items:center;padding:.5em 1.5em;font-weight:600;line-height:1.2;display:grid;position:relative;&:hover{border-color:var(--accent-a);box-shadow:0 .3em 0 var(--accent-a);translate:0 -.1em}&:active,&:has(:checked){border-color:var(--accent-a);box-shadow:0 0 0 var(--accent-a);transition-duration:60ms;translate:0 .2em}&:has(:checked){background:color-mix(in oklab, var(--color-paper), var(--accent-a) 22%)}&:has(:focus-visible){outline:2px solid var(--brand-key);outline-offset:2px}&>svg{color:var(--accent-a);transition:scale var(--duration-quick) var(--ease-snap), rotate var(--duration-quick) var(--ease-snap);position:absolute;inset-block-start:.4em;inset-inline-end:.4em;rotate:-30deg;scale:0}&:has(:checked)>svg{rotate:0deg;scale:1}}.quiz-results{&>*+*{margin-block-start:1em}&:focus{outline:none}}.quiz-controls{justify-items:end;margin-block-start:-.25em;display:grid}.quiz-skip,.quiz-again{color:var(--color-ink-soft);cursor:pointer;font-family:var(--font-display);text-underline-offset:.2em;transition:color var(--duration-quick) var(--ease-move), text-decoration-color var(--duration-quick) var(--ease-move), opacity var(--duration-quick) var(--ease-move), visibility var(--duration-quick);background:0 0;border:0;border-radius:2px;grid-area:1/1;padding:.15em .3em;font-size:.7em;font-weight:600;text-decoration:underline .1em #0000;position:relative;&:hover{color:var(--color-ink);text-decoration-color:var(--accent-a)}&:is(:focus-visible,:has(:focus-visible)){outline:2px solid var(--brand-key);outline-offset:2px}}.quiz-question,.quiz-results{max-block-size:max-content;transition:max-block-size var(--duration-quick) var(--ease-move), opacity var(--duration-move) var(--ease-move) var(--duration-quick), translate var(--duration-move) var(--ease-move) var(--duration-quick), visibility 0s var(--duration-quick);grid-area:1/1}.quiz-question:not(:has(:checked))~.quiz-question,.quiz-results,.quiz-again{visibility:hidden;opacity:0;translate:var(--shift) 0}.quiz-question:not(:has(:checked))~.quiz-question,.quiz-results{max-block-size:0}.quiz-question:has(:checked),.quiz:has(.quiz-skip :checked) .quiz-question{visibility:hidden;opacity:0;max-block-size:0;translate:calc(-1 * var(--shift)) 0;transition:max-block-size var(--duration-quick) var(--ease-move) calc(var(--hold) + var(--duration-quick)), opacity var(--duration-quick) var(--ease-move) var(--hold), translate var(--duration-quick) var(--ease-move) var(--hold), visibility var(--duration-quick) var(--hold)}.quiz:has(.quiz-skip :checked){--hold:0s}.quiz:has(.quiz-skip :checked,.quiz-question:last-of-type :checked){& .quiz-results,& .quiz-again{visibility:visible;opacity:1;translate:0}& .quiz-results{max-block-size:max-content}& .quiz-again{transition-delay:var(--duration-move)}& .quiz-skip{visibility:hidden;opacity:0}}@media (prefers-reduced-motion:reduce){.quiz{--shift:0px;interpolate-size:numeric-only}.quiz-answer:is(:hover,:active,:has(:checked)){translate:none}}.quiz-tally{font-family:var(--font-display);font-size:var(--text-sm);grid-template-columns:max-content 1fr 2ch;gap:.4em .75em;font-weight:600;display:grid;&>div{grid-column:1/-1;grid-template-columns:subgrid;align-items:center;display:grid;&:before,&:after{content:"";border-radius:1px;grid-area:1/2;block-size:.6em}&:before{background:color-mix(in oklab, var(--color-rule) 50%, transparent)}&:after{inline-size:calc(var(--share) * 100%);background:var(--accent-a);transform-origin:0;transition:scale var(--duration-move) var(--ease-move) calc(var(--duration-move) * 1.25)}}& dd{text-align:end;font-variant-numeric:tabular-nums;grid-column:3;margin:0}}.quiz:not(:has(.quiz-skip :checked,.quiz-question:last-of-type :checked)) .quiz-tally>div:after{scale:0 1}@media (prefers-reduced-motion:reduce){.quiz-tally>div:after{transition:none}}.quiz-reveal{text-align:center;text-wrap:balance;&>*+*{margin-block-start:1em}}.quiz-reveal .figure{width:min(100%, calc(10em * var(--aspect)));margin-block:0}}