*,:before,:after{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;font-size:1.125rem;line-height:1.5;overflow-x:hidden}p{margin:0 0 1em}.container{max-width:800px;margin:0 auto;padding:16px}button{--accent:#5858de;background:linear-gradient(to bottom, oklch(from var(--accent) calc(l + .05) c h), oklch(from var(--accent) calc(l - .05) c h));color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:4px;width:100%;margin:24px 0 0;padding:10px 16px;font-weight:500;transition:opacity .3s ease-out}button.success{--accent:#2b9a2b;color:#fff}button:focus{outline:none}button:active{opacity:.6;transition:none}button:disabled{color:#666;cursor:default;box-shadow:none;background:#ddd}h1,h2{font-size:1.2em;font-weight:500}.result-grid{grid-template-columns:1fr max-content;align-items:center;gap:1em;font-size:.85em;display:grid}.progress-bar{border:1px solid #aaa;border-radius:4px;height:2em;display:grid;overflow:clip}.progress-bar>*,.progress-bar:after{grid-area:1/1}.progress-bar:after{content:"";background:#000;width:.125em;margin-inline-start:75%}.progress-bar>.filled{background:#ccc;border-right:1px solid #aaa}.progress-bar>span{text-align:center;align-self:center;font-weight:700}.progress-bar.pass,.progress-bar.pass>.filled{border-color:oklch(41.9752% .176858 142.495)}.progress-bar.pass>.filled{background:green}.progress-bar.pass>span{color:#fff}input[type=radio],input[type=checkbox]{vertical-align:middle;width:1.25em;height:1.25em;margin:0;margin-block-start:calc(1ex - 1cap);margin-inline-end:.5em}.answer{margin-block-start:1em}
