.quiz{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.quiz::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.35;mix-blend-mode:overlay;pointer-events:none}
.quiz .container{position:relative;z-index:2}
.quiz .sec-title{color:#fff}
.quiz-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.quiz-timer{font:600 13px var(--fm);letter-spacing:.12em;color:#FFB27A;border:1px solid rgba(255,107,0,.45);border-radius:8px;padding:11px 16px;display:inline-flex;gap:9px;align-items:center}
.quiz-box{background:#333333;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:clamp(20px,4vw,40px);box-shadow:0 44px 90px -34px rgba(0,0,0,.6)}
.qbar{height:6px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.qbar i{display:block;height:100%;width:20%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#FF9A4D);transition:width .5s cubic-bezier(.4,0,.2,1)}
.qmeta{display:flex;justify-content:space-between;font:500 12.5px var(--fm);color:rgba(255,255,255,.55);margin-top:9px;letter-spacing:.06em}
.qstep{display:none}
.qstep.active{display:block;animation:fadeUp .4s ease both}
.qstep h3{color:#fff;font-size:clamp(19px,2.4vw,24px);margin:30px 0 6px;font-weight:700}
.qhint{color:rgba(255,255,255,.55);font-size:14px;margin-bottom:22px}
.qgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.qtile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 40px 16px 16px;background:#3B3B3B;border:1.5px solid rgba(255,255,255,.09);border-radius:10px;cursor:pointer;min-height:98px;transition:border-color .25s,background .25s,transform .25s}
.qtile input{position:absolute;opacity:0;pointer-events:none}
.qtile .ic{width:26px;height:26px;color:#FFB27A}
.qtile span{font:600 13.5px/1.35 var(--fd);color:#fff}
.qtile:hover{border-color:rgba(255,107,0,.65);transform:translateY(-2px)}
.qchk{position:absolute;top:11px;right:11px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:.2s;color:#fff}
.qchk .ic{width:12px;height:12px;opacity:0;stroke-width:2.6}
.qtile.sel{border-color:var(--accent);background:rgba(255,107,0,.15)}
.qtile.sel .qchk{background:var(--accent);border-color:var(--accent)}
.qtile.sel .qchk .ic{opacity:1}
.qduo{display:grid;gap:14px;grid-template-columns:1fr}
.qtile--big{flex-direction:row;align-items:center;gap:18px;min-height:110px;padding:20px 48px 20px 22px}
.qtile--big .ic{width:38px;height:38px}
.qtile--big b{font:700 18px var(--fd);color:#fff;display:block}
.qtile--big small{font-size:13px;color:rgba(255,255,255,.55)}
.qselect{position:relative;max-width:520px}
.qselect select{width:100%;appearance:none;-webkit-appearance:none;background:#3B3B3B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23FF6B00' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center;border:1.5px solid rgba(255,255,255,.14);border-radius:10px;color:#fff;font:400 16px var(--fb);padding:15px 48px 15px 16px;cursor:pointer;transition:border-color .2s}
.qselect select:focus{outline:none;border-color:var(--accent)}
.qselect option{background:#2C2C2C}
.qform{display:grid;gap:0 16px;max-width:640px}
.qform .btn{grid-column:1/-1;margin-top:6px}
.qagree{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.45);margin-top:10px}
.qagree button{background:none;border:0;color:#FFB27A;font:inherit;text-decoration:underline;padding:0}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}
.qdone{display:none;text-align:center;padding:34px 0 20px}
.qdone.show{display:block;animation:fadeUp .45s ease both}
.qdone__ic{width:86px;height:86px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 22px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
.qdone__ic .ic{width:40px;height:40px;stroke-width:2.4}
.qdone h3{margin-bottom:8px}
.qdone p{color:rgba(255,255,255,.6);max-width:420px;margin:0 auto 22px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media(min-width:760px){.qduo{grid-template-columns:1fr 1fr}.qform{grid-template-columns:1fr 1fr}.qgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.qgrid--8{grid-template-columns:repeat(4,1fr)}}