.quiz { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 0; padding: clamp(22px, 4vw, 40px); background: #ffffff; color: #0b0b0c; border-top: 4px solid #B50088; font: 400 16px/1.5 "Urbanist", system-ui, sans-serif; }
.quiz::backdrop { background: rgba(12,10,16,.62); }
.quiz h2 { margin: 6px 0 6px; font: 800 clamp(26px, 4vw, 40px)/1 "Urbanist", system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: #0b0b0c; }
.quiz__k { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #55555b; }
.quiz fieldset { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; } .quiz legend { padding: 0; margin-bottom: 12px; font: 600 clamp(19px, 2.4vw, 24px)/1.25 "Urbanist", system-ui, sans-serif; }
.quiz__opts { display: grid; gap: 8px; }
.quiz__opts label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid #c9c9cf; cursor: pointer; }
.quiz__opts input { width: 20px; height: 20px; accent-color: #8C6239; flex: none; margin: 0; }
.quiz__opts label:has(input:checked) { border-color: #0b0b0c; box-shadow: inset 0 0 0 1px #0b0b0c; }
.quiz__opts label:has(input:focus-visible) { outline: 3px solid #0b0b0c; outline-offset: 2px; }
.quiz__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.quiz__b { min-height: 46px; padding: 0 18px; border: 1px solid #0b0b0c; background: #ffffff; color: #0b0b0c; font: 600 14px/1 "Urbanist", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.quiz__b--go { background: #0b0b0c; color: #ffffff; } .quiz__b[disabled] { opacity: .4; cursor: default; }
.quiz :focus-visible { outline: 3px solid #0b0b0c; outline-offset: 2px; box-shadow: none; }
.quiz__res { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .quiz__res li { border: 1px solid #d8d8dc; padding: 14px 16px; }
.quiz__res b { display: block; font: 800 22px/1.1 "Urbanist", system-ui, sans-serif; letter-spacing: -.01em; } .quiz__res p { margin: 6px 0 0; color: #3c3c42; font-size: 15px; }
.quiz__res .quiz__st { display: inline-block; margin-top: 8px; padding: 4px 8px; border: 1px dashed #8C6239; color: #6d4b2a; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.quiz__res .quiz__why { color: #55555b; font-size: 14px; } .quiz__see { margin-top: 10px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer; font: 600 14px/1 "Urbanist", system-ui, sans-serif; color: #0b0b0c; text-decoration: underline; text-decoration-color: #8C6239; text-underline-offset: 5px; }
.quiz__note { margin: 16px 0 0; font-size: 13.5px; color: #55555b; }