*{box-sizing:border-box}body{margin:0;background:#f5f8ff;color:#172033;font-family:system-ui,-apple-system,Segoe UI,Arial;line-height:1.5}.top{position:sticky;top:0;z-index:5;background:white;border-bottom:1px solid #dbe4f3;display:flex;justify-content:space-between;align-items:center;padding:9px 4%;box-shadow:0 2px 12px #0001}.brand{font-size:20px;font-weight:900;color:#173b8f;text-decoration:none;display:flex;gap:9px;align-items:center}.brand span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#2563eb;color:#fff}.top nav{font-weight:800;font-size:13px}.top nav a{color:#173b8f;text-decoration:none}.hero{text-align:center;padding:40px 5%;background:linear-gradient(135deg,#eaf2ff,#fff)}.hero small{font-weight:900;color:#2563eb;letter-spacing:1px}.hero h1{font-size:clamp(30px,6vw,54px);line-height:1.08;margin:8px auto;max-width:900px}.hero p{color:#53627b}.bubbles{font-size:25px;color:#2563eb55;margin-bottom:12px}main{max-width:1200px;margin:auto}.panel{background:#fff;border:1px solid #dbe4f3;border-radius:18px;box-shadow:0 10px 30px #173b8f0c}.controls,.stats,.guide{margin:22px 4%;padding:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.grid label{font-weight:800;font-size:13px}.grid input,.grid select{width:100%;margin-top:5px;padding:11px;border:1px solid #cbd6e8;border-radius:11px;font:inherit}.sound{padding-top:29px}.sound input{width:auto}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.actions button{border:0;border-radius:11px;padding:11px 14px;font-weight:900;cursor:pointer;background:#eaf0fb;color:#173b8f}.actions .primary{background:#2563eb;color:#fff}.actions button:disabled{opacity:.45;cursor:not-allowed}.status{margin-top:13px;padding:11px;border-radius:11px;background:#eef5ff;color:#244b91;font-weight:700}.stats{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:18px;align-items:center}.bar{height:9px;background:#e5ebf5;border-radius:99px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;width:0;background:#2563eb;transition:.3s}.stats strong{display:block;font-size:24px;color:#2563eb}.questions{margin:0 4% 28px;display:grid;gap:14px}.empty{text-align:center;padding:40px}.qcard{padding:17px;background:#fff;border:1px solid #dbe4f3;border-radius:17px}.qhead{display:flex;justify-content:space-between;gap:10px}.qnum{font-weight:900;color:#2563eb}.tag{font-size:11px;background:#eef3ff;padding:4px 8px;border-radius:99px;font-weight:900}.prompt{font-size:17px;font-weight:800;margin:10px 0}.hint{background:#fff8db;border-left:4px solid #eab308;padding:8px 10px;border-radius:7px;font-weight:800}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.option{padding:10px;text-align:left;border:1px solid #cbd6e8;background:#fbfdff;border-radius:10px;font-weight:750}.option.selected{border:2px solid #2563eb;background:#eef5ff}.answer{width:100%;padding:11px;border:2px solid #cbd6e8;border-radius:10px;font:inherit;margin-top:10px}.answer.good{border-color:#16a34a;background:#ecfdf3}.answer.bad{border-color:#dc2626;background:#fef2f2}.qactions{display:flex;gap:8px;margin-top:9px}.qactions button{border:0;border-radius:9px;padding:9px 12px;font-weight:900}.check{background:#2563eb;color:#fff}.feedback{margin-top:8px;font-weight:900}.goodtxt{color:#15803d}.badtxt{color:#b91c1c}.showanswer{display:none;margin-top:8px;padding:9px;background:#f4f7fb;border-radius:9px}.qcard.correct{animation:ok .4s}.qcard.wrong{animation:no .4s}@keyframes ok{50%{transform:scale(1.01);box-shadow:0 0 0 5px #16a34a22}}@keyframes no{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}.guide h3{color:#173b8f;margin-top:25px}.formula{background:#fff8db;border:1px solid #f3d36a;border-radius:9px;padding:10px;font-weight:900;color:#5b4300}footer{text-align:center;background:#13264d;color:#fff;padding:24px}@media(max-width:760px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stats>div:first-child{grid-column:1/-1}.controls,.stats,.questions,.guide{margin-left:3%;margin-right:3%}.options{grid-template-columns:1fr}.actions button{flex:1 1 45%}.top nav{font-size:11px}.brand{font-size:17px}.brand span{width:35px;height:35px}}@media print{.top,.controls,.stats,.guide,footer,.qactions{display:none!important}.questions{margin:0}.qcard{break-inside:avoid;box-shadow:none}.showanswer{display:block!important}}