.quiz{margin:1.8em 0;display:block}.quiz__progress{background:var(--bg-2);border-radius:99px;height:6px;margin-bottom:16px;overflow:hidden}.quiz__progress span{background:var(--brand);width:0;height:100%;transition:width .5s var(--ease-out);display:block}.quiz__list{gap:22px;margin:0;padding:0;list-style:none;display:grid}.quiz__q h3{margin-bottom:10px;font-size:19px}.quiz__q img{border-radius:var(--radius);margin-bottom:10px}.quiz__answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}@media (width<=640px){.quiz__answers{grid-template-columns:repeat(2,minmax(0,1fr))}}.quiz__a{border-radius:var(--radius);background:var(--bg-1);text-align:center;cursor:pointer;transition:all .2s var(--ease-out);border:1.5px solid #0000;padding:12px 14px;font-weight:600}.quiz__a:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}.quiz__a.is-right{border-color:var(--success);background:color-mix(in srgb, var(--success) 12%, transparent);animation:pop .4s var(--ease-spring)}.quiz__a.is-wrong{border-color:var(--live);background:color-mix(in srgb, var(--live) 10%, transparent);animation:.4s shake}.quiz__a:disabled{cursor:default}.quiz__feedback{min-height:1.4em;margin-top:8px;font-size:14px;font-weight:600}.quiz__result{border-radius:var(--radius);background:var(--brand-soft);flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px;padding:18px;display:flex}.quiz__result strong{font:900 30px/1 var(--font-display);color:var(--brand-strong)}.quiz__a.is-picked{border-color:var(--brand);background:var(--brand-soft)}.quiz__persona{border-radius:var(--radius);background:var(--brand-soft);grid-template-columns:160px minmax(0,1fr);align-items:start;gap:18px;margin-top:20px;padding:18px;display:grid}.quiz__persona img{aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:var(--radius);width:100%;margin:0}.quiz__persona strong{font:900 26px/1.15 var(--font-display);color:var(--brand-strong);margin:2px 0 8px;display:block}.quiz__persona p{margin:0 0 12px}.quiz__kicker{text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);font-size:12px;font-weight:700}@media (width<=520px){.quiz__persona{grid-template-columns:minmax(0,1fr)}.quiz__persona img{max-width:220px}}@keyframes pop{50%{transform:scale(1.04)}}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}
