:root{
  --primary:#6c5ce7;--secondary:#00b894;--accent:#fdcb6e;--pink:#fd79a8;
  --ink:#273044;--muted:#687386;--paper:#fff;--bg:#f4f7ff;
  --green:#d9f8e8;--greenText:#087443;--red:#ffe0e0;--redText:#b42318;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 5%;background:#fff;box-shadow:0 2px 14px #24324b18}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900}
.brand-name{font-weight:900}.brand-sub{font-size:11px;color:var(--muted)}
nav{font-weight:800;font-size:14px}nav a{color:var(--ink);text-decoration:none;margin:0 5px}nav a:hover{color:var(--primary)}
main{max-width:1180px;margin:auto;padding:20px}
.hero{position:relative;overflow:hidden;min-height:245px;border-radius:28px;padding:42px 7%;display:flex;align-items:center;background:linear-gradient(135deg,#6c5ce7,#8e7cff);color:#fff;box-shadow:0 18px 45px #4d3fc52e}
.hero-copy{position:relative;z-index:2;max-width:760px}.hero h1{font-size:clamp(30px,5vw,54px);line-height:1.05;margin:12px 0}.hero p{font-size:18px;max-width:700px;opacity:.96}
.pill{display:inline-block;padding:6px 12px;border-radius:99px;background:#fff;color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.7px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px}.hero-badges span{background:#ffffff1f;border:1px solid #ffffff40;padding:7px 10px;border-radius:99px;font-size:12px;font-weight:700}
.hero-art{position:absolute;inset:0;pointer-events:none}.cloud,.star,.pencil{position:absolute}.cloud{font-size:50px;opacity:.25}.c1{right:6%;top:20px}.c2{right:23%;bottom:18px;font-size:38px}.pencil{right:9%;bottom:25px;font-size:100px;transform:rotate(-20deg);filter:drop-shadow(0 10px 8px #2222)}.s1{right:35%;top:28px}.s2{right:15%;top:80px}
.control-card,.status-card,.progress-box,.result-card,.seo-content{background:var(--paper);border-radius:22px;box-shadow:0 10px 30px #26334b10}
.control-card{margin:20px 0;padding:20px}.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.control-grid label{font-size:12px;font-weight:900;color:var(--muted)}
select{display:block;width:100%;margin-top:6px;border:2px solid #e8eaf2;border-radius:13px;padding:12px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;outline:none}
select:focus{border-color:var(--primary)}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.btn{border:0;border-radius:13px;padding:12px 16px;background:#eef0fa;color:var(--ink);font-weight:900;cursor:pointer;transition:.18s transform,.18s box-shadow}.btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px #26334b18}.btn.primary{background:var(--primary);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.notice{margin:12px 0 0;color:var(--muted);font-size:13px}
.status-card{display:flex;justify-content:space-around;gap:12px;padding:15px;flex-wrap:wrap}.status-card div{font-size:14px}.progress-box{margin:12px 0;padding:13px}.progress-label{display:flex;justify-content:space-between;font-size:12px;font-weight:900;margin-bottom:6px}.progress{height:13px;border-radius:99px;background:#e8eaf4;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--secondary),var(--primary));transition:width .35s}
.questions{display:grid;gap:14px}.empty-state{text-align:center;background:#fff;border-radius:22px;padding:55px 20px;color:var(--muted)}.big-icon{font-size:62px}
.question-card{position:relative;background:#fff;border-radius:20px;padding:18px;border:2px solid #e8eaf2;box-shadow:0 7px 20px #26334b09;overflow:hidden}.q-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.q-num{display:inline-grid;place-items:center;min-width:38px;height:38px;border-radius:12px;background:#f0edff;color:var(--primary);font-weight:900}.q-type{font-size:11px;font-weight:900;color:var(--primary);background:#f0edff;padding:5px 8px;border-radius:99px}.difficulty{font-size:10px;font-weight:900;color:var(--muted);margin-top:4px;text-transform:uppercase}.question-text{font-size:18px;font-weight:800;margin:12px 0}.hint{font-size:13px;color:var(--muted);margin:0 0 10px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:10px 0}.choice{border:2px solid #e6e8f0;background:#fff;padding:12px;border-radius:12px;font-weight:800;cursor:pointer;text-align:left}.choice.selected{border-color:var(--primary);background:#f0edff}.answer-row{display:flex;gap:8px;align-items:center}.answer{flex:1;min-width:0;border:2px solid #dfe3ef;border-radius:13px;padding:13px 14px;font-size:16px;outline:none}.answer:focus{border-color:var(--primary)}.check{white-space:nowrap}.feedback{min-height:24px;margin-top:10px;font-size:13px;font-weight:900}.answer.correct{background:var(--green);border-color:#59c98f;color:var(--greenText)}.answer.wrong{background:var(--red);border-color:#ff8585;color:var(--redText)}.feedback.correct{color:var(--greenText)}.feedback.wrong{color:var(--redText)}.show-answer{display:none;margin-top:7px;border:0;background:#fff4cc;color:#7a5800;border-radius:10px;padding:8px 10px;font-weight:900;cursor:pointer}.show-answer.visible{display:inline-block}.solution{display:none;margin-top:8px;padding:10px 12px;background:#fff8dc;border-radius:11px;color:#624d08;font-weight:800}.solution.visible{display:block}
.question-card.correct-pop{animation:good .5s ease}.question-card.wrong-shake{animation:shake .4s ease}@keyframes good{0%{transform:scale(1)}50%{transform:scale(1.015)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.result-card{text-align:center;padding:28px;margin:18px 0}.result-icon{font-size:60px}.result-stats{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:20px 0}.result-stats div{min-width:110px;background:#f6f7fc;border-radius:15px;padding:13px}.result-stats b{display:block;font-size:26px;color:var(--primary)}.result-stats span{font-size:11px;color:var(--muted);font-weight:800}.hidden{display:none}
.seo-content{margin-top:20px;padding:28px}.seo-content h2{font-size:30px}.seo-content h3{font-size:21px;margin-top:28px;color:#4f43b9}.seo-content p{color:#485367}.seo-content .pill{background:#f0edff}
footer{margin-top:30px;background:#20283a;color:#fff;text-align:center;padding:26px 20px;font-size:13px}
@media(max-width:800px){.control-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:34px 6%;min-height:280px}.pencil{opacity:.3;right:-10px}.topbar{padding:10px 4%}}
@media(max-width:520px){main{padding:12px}.topbar nav{font-size:11px}.brand-sub{display:none}.brand-mark{width:36px;height:36px}.hero{border-radius:22px;padding:28px 20px}.hero h1{font-size:34px}.hero p{font-size:15px}.control-card,.seo-content{padding:16px;border-radius:18px}.control-grid{grid-template-columns:1fr}.button-row .btn{width:100%}.status-card{justify-content:space-between}.answer-row{flex-direction:column;align-items:stretch}.check{width:100%}.choice-grid{grid-template-columns:1fr}.question-text{font-size:16px}.seo-content h2{font-size:25px}}
@media print{.topbar,.hero,.control-card,.status-card,.progress-box,.result-card,footer,.seo-content{display:none!important}.question-card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}.questions{display:block}.question-card{margin-bottom:12px}.show-answer,.solution{display:none!important}}