*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f6f8ff;color:#27324a;line-height:1.55}header{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 3px 15px #26323818;display:flex;justify-content:space-between;align-items:center;padding:10px max(16px,4vw)}header a{color:#4e3ab5;text-decoration:none;font-weight:800}.brand{color:#5b45c8;font-size:20px}.brand small{display:block;font-size:11px;color:#7c859a;margin-left:34px}.hero,.controls,.status,main,.result,.guide{max-width:1100px;margin:14px auto}.hero{padding:25px;border-radius:28px;background:linear-gradient(135deg,#e9e2ff,#dff7ff);display:flex;gap:25px;align-items:center}.art{font-size:50px;min-width:220px}em{font-weight:900;color:#ff6b5e;letter-spacing:2px}.hero h1{font-size:clamp(34px,6vw,58px);margin:2px 0;color:#4f39b6}.hero h2{margin:0 0 10px}.controls,.guide,.result,.status{background:#fff;padding:18px;border-radius:22px;box-shadow:0 5px 20px #26323812}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid label{font-weight:800;font-size:13px}.grid select{display:block;width:100%;margin-top:5px;padding:12px;border:2px solid #e0e4f0;border-radius:12px;background:#fff;font-size:15px}.buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.buttons button,.check,.show{border:0;border-radius:12px;padding:12px 15px;font-weight:900;cursor:pointer;background:#edf0fa;color:#3e4770}.buttons button:first-child,.check{background:#6248d8;color:#fff}.status{display:grid;grid-template-columns:auto auto 1fr auto;gap:15px;align-items:center;position:sticky;top:61px;z-index:5}.progress{height:12px;background:#e9edf7;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6c5ce7,#00b8d9);transition:.3s}main{display:grid;gap:14px}.card{background:#fff;border-radius:20px;padding:18px;box-shadow:0 5px 18px #26323810;border:2px solid transparent}.card.correct{border-color:#48c774;animation:good .4s}.card.wrong{border-color:#ff6674;animation:bad .4s}.qhead{display:flex;justify-content:space-between}.badge{font-size:11px;background:#eeeaff;color:#5b45c8;border-radius:99px;padding:5px 9px;font-weight:900}.prompt{font-size:19px;font-weight:800;margin:10px 0}.answer{width:100%;min-height:48px;border:2px solid #dfe4f0;border-radius:13px;padding:11px;font-size:17px}.answer.ok{background:#e9fff0;border-color:#2bb85a}.answer.no{background:#fff0f1;border-color:#f34c5b}.show{margin-left:6px}.feedback{font-weight:800;margin-top:8px}.hidden{display:none}.guide h2,.guide h3{color:#4f39b6}footer{text-align:center;padding:30px;color:#6f778b}@keyframes good{50%{transform:scale(1.015)}}@keyframes bad{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@media(max-width:760px){header{padding:9px 12px}.hero{margin:12px;padding:20px;display:block}.art{min-width:0;font-size:38px}.grid{grid-template-columns:1fr 1fr}.status{grid-template-columns:1fr;top:55px}.buttons button{flex:1 1 45%}.guide{margin:12px;padding:18px}}@media(max-width:430px){.grid{grid-template-columns:1fr}.buttons button{flex:1 1 100%}}@media print{header,.controls,.status,.guide,footer,.check,.show{display:none!important}.card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}}