*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#30215f,transparent 38%),#0a1026;color:#f3f6ff;font:16px/1.55 system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}header{display:flex;align-items:center;gap:18px;padding:14px clamp(12px,4vw,44px);position:sticky;top:0;background:#0a1026ed;border-bottom:1px solid #2b3a68;z-index:2}.brand{display:flex;align-items:center;gap:9px;color:white;text-decoration:none;min-width:175px}.brand b,.brand small{display:block}.brand small{font-size:10px;color:#aeb9d9}nav{display:flex;justify-content:center;gap:5px;flex:1}button{border:0;border-radius:11px;padding:10px 13px;background:#1b2850;color:white}nav button{background:transparent;color:#aeb9d9}nav button.active,nav button:hover{background:#202b54;color:white}#menu{display:none}.wrap{width:min(1100px,calc(100% - 28px));margin:auto;padding:28px 0 42px}.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:20px;padding:clamp(24px,5vw,52px);border:1px solid #3b4a80;border-radius:26px;background:linear-gradient(120deg,#101c43,#261c59 68%,#124457)}.eyebrow{color:#7dd3fc;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px}.hero h1{font-size:clamp(35px,5vw,57px);line-height:1.08;margin:12px 0}.grad{background:linear-gradient(90deg,#67e8f9,#a78bfa,#f0abfc);background-clip:text;color:transparent}.muted,.hero p{color:#aeb9d9}.orb{display:grid;place-items:center;width:175px;height:175px;border:1px solid #7dd3fc77;border-radius:50%;margin:auto;box-shadow:0 0 50px #8b5cf622}.orb span{display:grid;place-items:center;width:115px;height:115px;border-radius:30px;background:linear-gradient(135deg,#2563eb,#7c3aed,#0891b2);font-size:52px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.primary{background:linear-gradient(110deg,#3b82f6,#8b5cf6)}.secondary{background:#18264e;border:1px solid #40517f}.ghost{background:transparent;border:1px solid #2b3a68}.section{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:32px 0 14px}.section h2{margin:0}.section p{margin:4px 0;color:#aeb9d9}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stream,.card,.subject,.lesson,.stat,.feature{border:1px solid #2b3a68;border-radius:19px;background:linear-gradient(145deg,#142044,#101832);padding:19px}.natural{background:linear-gradient(135deg,#064e3b,#0b3443);border-color:#087f7a}.social{background:linear-gradient(135deg,#4c1d95,#20204e);border-color:#7444c7}.stream h3{font-size:21px;margin:7px 0}.pills{display:flex;flex-wrap:wrap;gap:6px}.pill{padding:4px 9px;border-radius:99px;background:#ffffff13;border:1px solid #ffffff22;font-size:12px}.subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.subject{text-align:left;transition:.15s}.subject:hover,.lesson:hover{border-color:#22d3ee;transform:translateY(-2px)}.subject .emoji{font-size:25px}.subject h3{font-size:15px;margin:7px 0 3px}.subject p,.feature p{font-size:12px;color:#aeb9d9;margin:0}.tblue{background:linear-gradient(145deg,#13264b,#111b38)}.tgreen{background:linear-gradient(145deg,#073e3a,#111b38)}.tpurple{background:linear-gradient(145deg,#35205f,#111b38)}.torange{background:linear-gradient(145deg,#512d1d,#111b38)}.tpink{background:linear-gradient(145deg,#54213c,#111b38)}.list{display:grid;gap:10px}.lesson{display:flex;align-items:center;gap:13px;width:100%;text-align:left}.lessonicon{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#23345e;font-size:22px;flex-shrink:0}.lessonmain{flex:1}.lessonmain strong,.lessonmain small{display:block}.lessonmain small{color:#aeb9d9}.title{font-size:clamp(28px,4vw,40px);margin:0 0 5px}.intro{color:#aeb9d9;margin:0 0 22px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.toolbar input,.toolbar select{background:#0c1530;border:1px solid #33436e;border-radius:11px;padding:11px;color:white}.toolbar input{flex:1;min-width:160px}.lessonlayout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:15px}.lessonbody{background:#f0f7ff;color:#15213b;border-radius:20px;padding:clamp(18px,4vw,32px)}.lessonbody h2{color:#15264c}.lessonbody p{color:#30405f}.callout{padding:13px;background:#dff5ff;border-left:4px solid #0ea5e9;border-radius:8px}.aside{border:1px solid #2b3a68;border-radius:18px;padding:18px;background:#10203f;height:max-content}.progress{height:8px;border-radius:99px;background:#29385e;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#a78bfa)}.question{font-size:20px;font-weight:800}.answers{display:grid;gap:9px}.answer{padding:12px;text-align:left;background:#101a37;border:1px solid #34446f}.answer.selected{border-color:#22d3ee}.answer.correct{background:#064e3b;border-color:#34d399}.answer.wrong{background:#5b1d37;border-color:#fb7185}.feedback{padding:16px;border-radius:15px;background:#102a36;border:1px solid #267a72;margin-top:16px}.bad{background:#401b31;border-color:#9f365a}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat strong{display:block;font-size:27px}.barrow{display:grid;grid-template-columns:105px 1fr 38px;align-items:center;gap:10px;margin:14px 0;font-size:13px}.empty{text-align:center;padding:30px;border:1px dashed #40517e;border-radius:17px;color:#aeb9d9}.setting{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid #2b3a68}.setting p{margin:3px 0;color:#aeb9d9;font-size:13px}footer{padding:22px;text-align:center;border-top:1px solid #2b3a68;color:#aeb9d9}body.light{background:#eff6ff;color:#14213d}body.light header{background:#f8fbffed}body.light .card,body.light .subject,body.light .lesson,body.light .stat,body.light .feature{background:white;color:#17213b}body.light .brand{color:#17213b}body.large{font-size:18px}@media(max-width:850px){header{flex-wrap:wrap;gap:7px}.brand{flex:1}#menu{display:block}nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch}nav.open{display:flex}nav button{text-align:left}.hero{grid-template-columns:1fr}.orb{width:135px;height:135px}.orb span{width:90px;height:90px}.subjects{grid-template-columns:repeat(2,minmax(0,1fr))}.lessonlayout{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}@media(max-width:520px){.wrap{width:calc(100% - 22px);padding-top:15px}.hero{padding:22px 17px}.hero h1{font-size:37px}.grid{grid-template-columns:1fr}.subject{padding:13px}.section{align-items:start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.qblock{padding:18px 0;border-bottom:1px solid #2b3a68}.qblock:last-of-type{border-bottom:0}.qblock .feedback{margin:12px 0 0}.lessonbody ul{padding-left:22px}.lessonbody li{margin:8px 0}.callout{padding:15px;border-radius:14px;background:#172746;border:1px solid #38538a;margin:16px 0}.light .callout{background:#e7efff;color:#17213b}

/* Five-section fixed bottom navigation */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;gap:4px;padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));background:#0b1228f5;border-top:1px solid #2b3a68;backdrop-filter:blur(14px)}.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;background:transparent;color:#aeb9d9;font-size:22px;border-radius:12px}.bottom-nav button span{font-size:11px}.bottom-nav button.active{background:#202b54;color:#7dd3fc}.wrap{padding-bottom:105px}footer{padding-bottom:100px}#menu{display:block;margin-left:auto}@media(max-width:850px){.bottom-nav{display:flex}header{position:sticky;top:0}#nav.open{display:flex;flex-direction:row}.bottom-nav.open{display:flex}}