*{box-sizing:border-box}
:root{--ink:#182230;--muted:#687386;--purple:#5d63df;--purple2:#7b70ee;--bg:#f5f6fb}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 5%,#e9e7ff 0,transparent 28%),radial-gradient(circle at 5% 60%,#e7f5ff 0,transparent 24%)}
.app{position:relative;max-width:940px;margin:auto;padding:18px;min-height:100vh}
.hero{position:relative;overflow:hidden;min-height:290px;border-radius:32px;padding:30px;background:linear-gradient(135deg,#555ddc 0%,#7066e9 58%,#8b7cf2 100%);color:#fff;box-shadow:0 20px 55px #4d50bb35}
.hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-110px;top:-140px;background:#ffffff18}
.hero-content{position:relative;z-index:2;max-width:650px}.brand-row{display:flex;align-items:center;justify-content:space-between}.brand{font-size:13px;font-weight:900;letter-spacing:2px}.icon-btn{border:0;background:#ffffff1c;color:#fff;border-radius:15px;width:48px;height:48px;font-size:21px;cursor:pointer;backdrop-filter:blur(5px)}
.hero h1{font-size:44px;line-height:1.03;letter-spacing:-1.5px;margin:26px 0 10px}.hero h1 span{color:#fff9a8}.hero-sub{margin:0;color:#f1f1ff;font-size:17px}.hero-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.hero-pills span{padding:9px 13px;border-radius:99px;background:#ffffff1c;border:1px solid #ffffff2a;font-size:13px;font-weight:700}
.hero-art{position:absolute;right:70px;bottom:22px;width:190px;height:190px;z-index:1}.book{position:absolute;right:5px;bottom:12px;font-size:110px;transform:rotate(-10deg);filter:drop-shadow(0 12px 10px #3437a755)}.pencil{position:absolute;right:10px;top:15px;font-size:62px;transform:rotate(35deg)}.spark{position:absolute;color:#fff7a3;font-size:30px}.s1{left:10px;top:20px}.s2{right:5px;top:2px}
.screen{display:none;margin-top:24px}.screen.active{display:block}
.section-heading{padding:0 6px 12px}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:900;color:var(--purple)}.section-heading h2{font-size:31px;letter-spacing:-.7px;margin:5px 0 4px}.section-heading p{margin:0;color:var(--muted)}
.subjects{display:grid;grid-template-columns:1fr 1fr;gap:18px}.subject-btn{position:relative;overflow:hidden;text-align:left;border:0;min-height:245px;padding:25px;border-radius:28px;color:var(--ink);cursor:pointer;box-shadow:0 13px 38px #1f2a4412;transition:transform .18s,box-shadow .18s}
.subject-btn:hover{transform:translateY(-4px);box-shadow:0 20px 45px #1f2a4420}.english-card{background:linear-gradient(145deg,#fff 0%,#f0f1ff 100%);border:1px solid #e0e2ff}.bm-card{background:linear-gradient(145deg,#fff 0%,#effaf5 100%);border:1px solid #dcefe6}
.subject-top{display:flex;justify-content:space-between;align-items:center}.flag{font-size:49px;line-height:1}.arrow{width:42px;height:42px;border-radius:13px;background:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 5px 16px #0000000b}.subject-title{font-size:31px;font-weight:850;margin-top:23px;letter-spacing:-.8px}.subject-desc{color:var(--muted);font-size:14px;line-height:1.5;margin-top:6px;max-width:430px}.subject-bottom{display:flex;gap:8px;margin-top:22px}.subject-bottom span{background:#fff;padding:7px 11px;border-radius:99px;font-size:12px;font-weight:800;color:#596274;box-shadow:0 3px 10px #00000009}
.quick-info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}.quick-info div{background:#fff;border-radius:20px;padding:15px 18px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 25px #1f2a4408}.quick-info b{font-size:20px;color:var(--purple)}.quick-info span{font-size:12px;color:var(--muted);font-weight:650}
.back{border:0;background:#e9ecf5;color:#263143;border-radius:13px;padding:10px 14px;cursor:pointer;font-weight:700}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:17px}.grid button{background:#fff;border:1px solid #e5e8ef;padding:20px;border-radius:20px;text-align:left;cursor:pointer;box-shadow:0 8px 25px #1f2a4408}.grid b{display:block;font-size:18px;margin-bottom:6px}.grid small{color:var(--muted)}
.qtop{display:flex;justify-content:space-between;align-items:center}.bar{height:9px;background:#e2e5ee;border-radius:99px;margin:14px 0}.bar i{display:block;height:100%;width:0;background:var(--purple);border-radius:99px}.card{background:#fff;border-radius:25px;padding:24px;box-shadow:0 12px 35px #1f2a4410}.badge{display:inline-block;background:#eef0ff;color:var(--purple);padding:6px 10px;border-radius:99px;font-size:12px;font-weight:800}.card h2{line-height:1.45;font-size:22px}.answer{display:block;width:100%;margin:8px 0;padding:14px;border:2px solid #e4e8ef;border-radius:14px;background:#fff;text-align:left;font-size:16px;cursor:pointer}.answer.correct{border-color:#29a36a;background:#edf9f3}.answer.wrong{border-color:#d45252;background:#fff0f0}.answer:disabled{cursor:default}#feedback{min-height:28px;font-weight:800;margin:8px 0;visibility:hidden}#next{width:100%;border:0;border-radius:14px;padding:14px;background:var(--purple);color:#fff;font-weight:800;cursor:pointer}#next:disabled{opacity:.4}footer{text-align:center;color:#9299a7;font-size:12px;padding:24px}
@media(max-width:700px){.app{padding:12px}.hero{min-height:270px;padding:24px;border-radius:27px}.hero h1{font-size:36px}.hero-art{right:-15px;bottom:-10px;opacity:.45}.subjects{grid-template-columns:1fr}.subject-btn{min-height:220px}.quick-info{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}