:root { --math-ink:#193147; --math-green:#0c8075; --math-coral:#ff725f; --math-yellow:#ffd86f; --math-blue:#dff4ff; }
.maths-lab-page { color:var(--math-ink); background:linear-gradient(180deg,#fffaf0,#f4fcff 52%,#fff9f2); overflow-x:hidden; }
.maths-hero { width:min(1180px,calc(100% - 32px)); margin:28px auto; padding:clamp(24px,5vw,64px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.7fr); gap:28px; align-items:center; border:1px solid rgba(25,49,71,.08); border-radius:38px; background:radial-gradient(circle at 8% 10%,rgba(255,216,111,.48),transparent 32%),radial-gradient(circle at 92% 20%,rgba(39,185,167,.25),transparent 34%),#fff; box-shadow:0 24px 70px rgba(25,49,71,.1); }
.maths-hero h1 { max-width:760px; margin:8px 0 16px; font:800 clamp(2.7rem,6.3vw,5.8rem)/.92 "Baloo 2",sans-serif; letter-spacing:-.04em; }
.maths-hero p:not(.eyebrow) { max-width:700px; color:#5c7083; font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.65; }
.maths-hero-play { min-height:330px; padding:30px; display:grid; place-content:center; gap:22px; text-align:center; border-radius:32px; background:linear-gradient(145deg,#e9fbf5,#fff5cf); box-shadow:inset 0 0 0 1px rgba(12,128,117,.12),0 18px 46px rgba(25,49,71,.1); }
.maths-hero-play>span { font-weight:950; text-transform:uppercase; color:var(--math-green); }
.maths-hero-play>div { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; }
.maths-hero-play b { padding:16px; border-radius:20px; background:#fff; font-size:1.8rem; box-shadow:0 10px 24px rgba(25,49,71,.08); }
.maths-hero-play i { font-style:normal; font-size:2rem; font-weight:950; }
.maths-hero-play strong { font:800 2.2rem "Baloo 2"; }.maths-hero-play em { color:var(--math-coral); font-style:normal; }.maths-hero-play small { font-weight:850; color:#65768a; }
.maths-curriculum { width:min(1180px,calc(100% - 32px)); margin:0 auto 70px; padding:clamp(18px,3vw,34px); border-radius:34px; background:rgba(255,255,255,.88); box-shadow:0 24px 70px rgba(25,49,71,.1); }
.maths-curriculum-head { display:flex; justify-content:space-between; align-items:end; gap:20px; }.maths-curriculum-head h2 { margin:4px 0 0; font:800 clamp(2rem,4vw,3.4rem)/1 "Baloo 2"; }
.maths-grade-select { display:grid; gap:7px; min-width:220px; color:#607286; font-size:.8rem; font-weight:950; text-transform:uppercase; }.maths-grade-select select { min-height:54px; padding:0 16px; border:1px solid rgba(25,49,71,.12); border-radius:17px; background:#fff; color:var(--math-ink); font:900 1rem "Nunito"; }
.maths-progress-strip { margin:22px 0 30px; padding:17px; display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:18px; align-items:center; border:1px solid rgba(12,128,117,.14); border-radius:22px; background:linear-gradient(135deg,#e7fbf2,#fff5ca); }.maths-progress-strip div { display:grid; }.maths-progress-strip span { color:#597085; font-size:.8rem; font-weight:850; }.maths-progress-strip strong { color:#14574f; }.maths-progress-strip progress { width:100%; height:12px; accent-color:var(--math-green); }
.maths-topic-section,.maths-concept-section,.maths-lesson { scroll-margin-top:100px; }.maths-section-title { margin:28px 0 16px; display:flex; gap:12px; align-items:center; }.maths-section-title>span { width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--math-yellow);font-weight:950; }.maths-section-title h3,.maths-section-title p { margin:0; }.maths-section-title h3 { font:800 1.8rem "Baloo 2"; }
.maths-topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.maths-topic-grid button { min-height:180px; padding:20px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto; gap:5px 12px; text-align:left; border:1px solid rgba(25,49,71,.09); border-radius:25px; background:linear-gradient(145deg,#fff,#eefaff); color:var(--math-ink); box-shadow:0 14px 32px rgba(25,49,71,.07); cursor:pointer; transition:.2s ease; }.maths-topic-grid button:nth-child(2n) { background:linear-gradient(145deg,#fff,#fff5d9); }.maths-topic-grid button:hover,.maths-topic-grid button.is-active { transform:translateY(-4px); border-color:rgba(12,128,117,.35); box-shadow:0 20px 40px rgba(25,49,71,.13); }.maths-topic-grid button>span { grid-row:1/4;width:50px;height:50px;display:grid;place-items:center;border-radius:17px;background:#fff;font-size:1.65rem;box-shadow:0 8px 18px rgba(25,49,71,.08); }.maths-topic-grid strong { font:800 1.3rem "Baloo 2"; }.maths-topic-grid small { color:#617488;font-weight:750;line-height:1.35; }.maths-topic-grid em { color:var(--math-green);font-style:normal;font-weight:950; }
.maths-concept-list { display:flex; gap:12px; padding:4px 2px 12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }.maths-concept-list button { flex:0 0 min(310px,82vw); min-height:110px; padding:16px; display:grid; grid-template-columns:40px 1fr; gap:4px 10px; text-align:left; scroll-snap-align:start; border:1px solid rgba(25,49,71,.1); border-radius:21px; color:var(--math-ink); background:#fff; cursor:pointer; }.maths-concept-list button>span { grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--math-yellow),#d9f7e8);font-weight:950; }.maths-concept-list strong { font:800 1.08rem "Baloo 2"; }.maths-concept-list small { color:#63758a;font-weight:750;line-height:1.3; }.maths-concept-list button.is-active { border-color:var(--math-green);background:#ecfbf6; }
.maths-lesson { margin-top:26px; padding:clamp(16px,3vw,30px); border:1px solid rgba(25,49,71,.09); border-radius:30px; background:linear-gradient(145deg,#fffdf8,#f2fbff); }.maths-lesson-head { display:flex;justify-content:space-between;gap:18px;align-items:start; }.maths-lesson-head span { color:var(--math-green);font-size:.8rem;font-weight:950;text-transform:uppercase; }.maths-lesson-head h2 { margin:5px 0 2px;font:800 clamp(2rem,4.2vw,3.4rem)/1 "Baloo 2"; }.maths-lesson-head p { margin:0;color:#607287;font-weight:750; }.maths-listen-button { min-width:105px;padding:11px 14px;border:1px solid rgba(12,128,117,.2);border-radius:16px;background:#e5fbf2;color:#096f66;font-weight:950;cursor:pointer; }.maths-listen-button.is-speaking { background:var(--math-coral);color:#fff; }
.maths-audio-choices { min-width:270px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid rgba(12,128,117,.15);border-radius:20px;background:linear-gradient(135deg,#effcf7,#fff8dd); }.maths-audio-choices>span,.maths-audio-choices>small { grid-column:1/-1;text-align:center; }.maths-audio-choices>span { color:#14574f;font-size:.78rem;font-weight:950;text-transform:uppercase; }.maths-audio-choices>small { color:#68798a;font-size:.72rem;font-weight:800; }.maths-listen-button.is-hindi { color:#7a4c00;background:#fff3c8;border-color:rgba(184,122,0,.2); }.maths-listen-button.is-hindi.is-speaking { color:#fff;background:linear-gradient(135deg,#ff8a5c,#e45858); }
.maths-lesson-grid { margin-top:22px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.75fr); gap:16px; }.maths-understand-card,.maths-example-card,.maths-check-card { padding:clamp(18px,3vw,26px);border:1px solid rgba(25,49,71,.09);border-radius:26px;background:#fff;box-shadow:0 16px 38px rgba(25,49,71,.07); }.maths-step-label { width:fit-content;padding:7px 11px;border-radius:999px;background:linear-gradient(135deg,#d9f7e8,var(--math-yellow));color:#164f48;font-size:.75rem;font-weight:950;text-transform:uppercase; }.maths-visual { min-height:250px;margin:18px 0;padding:20px;display:grid;place-content:center;gap:16px;text-align:center;border-radius:24px;background:linear-gradient(135deg,#fff8df,#eafbf6);overflow:hidden; }.maths-visual>strong { font:800 1.8rem "Baloo 2"; }.maths-explanation h3,.maths-example-card h3,.maths-check-card h3 { margin:14px 0 7px;font:800 1.55rem/1.1 "Baloo 2"; }.maths-explanation p,.maths-check-intro p { margin:0;color:#5d7084;line-height:1.55;font-weight:700; }.maths-other-way { margin-top:16px;padding:10px 13px;border:1px solid rgba(12,128,117,.2);border-radius:15px;background:#effbf7;color:#096f66;font-weight:950;cursor:pointer; }
.maths-example-steps { min-height:175px;margin:15px 0;display:grid;align-content:start;gap:8px; }.maths-example-steps p { margin:0;padding:11px;display:flex;gap:9px;align-items:center;border-radius:14px;background:#f4f9fd;color:#435c71;font-weight:800; }.maths-example-steps p span { width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--math-yellow);color:#183145; }
.maths-check-card { margin-top:16px;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1fr);gap:20px;align-items:center;background:linear-gradient(145deg,#fff,#f5efff); }.maths-answer-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.maths-answer-options button { min-height:70px;padding:12px;border:2px solid rgba(25,49,71,.09);border-radius:18px;background:#fff;color:var(--math-ink);font:900 1rem "Nunito";cursor:pointer; }.maths-answer-options button:hover { border-color:var(--math-green); }.maths-answer-options button.is-correct { color:#075f3a;border-color:#23a86a;background:#e1fbed; }.maths-answer-options button.is-wrong { color:#8d3126;border-color:#eb7768;background:#fff0ed; }.maths-feedback { grid-column:1/-1;padding:15px;display:flex;gap:12px;align-items:center;border-radius:18px; }.maths-feedback[hidden] { display:none; }.maths-feedback>span { font-size:1.7rem; }.maths-feedback strong { font-size:1.05rem; }.maths-feedback p { margin:2px 0;color:#536a7c;font-weight:750; }.maths-feedback.is-success { background:#def8e9;border:1px solid #8dd8ae; }.maths-feedback.is-retry { background:#fff2d6;border:1px solid #f0cf83; }.maths-feedback button { padding:7px 10px;border:0;border-radius:10px;background:#fff;color:#75530a;font-weight:900;cursor:pointer; }
.maths-lesson-navigation { margin-top:16px;display:flex;justify-content:space-between;gap:10px; }.maths-lesson-navigation button:disabled { opacity:.45;cursor:not-allowed; }
.visual-groups,.visual-takeaway,.visual-compare,.visual-pattern,.visual-sort,.visual-days,.visual-coins,.visual-big-compare,.visual-grid,.visual-story,.visual-capacity { display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap; }.visual-groups>div,.visual-compare>div { padding:12px;border-radius:16px;background:#fff;font-size:1.35rem; }.visual-takeaway { font-size:1.8rem; }.is-removed { opacity:.24;text-decoration:line-through;filter:grayscale(1); }.ten-frame { width:210px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px; }.ten-frame i { aspect-ratio:1;border:2px solid #b5c9d2;border-radius:50%;background:#fff; }.ten-frame i.is-filled { background:var(--math-coral);border-color:var(--math-coral); }.extra-counters { font-size:1.4rem; }.visual-numberline { min-width:280px;display:flex;justify-content:space-between;position:relative; }.visual-numberline::before { content:"";position:absolute;left:4%;right:4%;top:50%;height:4px;background:#86aeb5;z-index:0; }.visual-numberline span { width:42px;height:42px;display:grid;place-items:center;position:relative;z-index:1;border-radius:50%;background:#fff;border:2px solid #86aeb5;font-weight:950; }.visual-numberline span.is-active { background:var(--math-yellow);transform:scale(1.15); }.visual-match b,.visual-big-compare b { font:800 4rem "Baloo 2"; }.visual-match span { display:block;color:#62768a;font-weight:900; }.visual-big-compare span { font-size:3rem;color:var(--math-coral);font-weight:950; }.place-value { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.place-value>div { min-width:120px;padding:12px;display:flex;gap:4px;flex-wrap:wrap;justify-content:center;border-radius:17px;background:#fff; }.place-value span { width:100%;font-weight:950;color:var(--math-green); }.place-value i { width:14px;height:75px;border-radius:5px;background:#62cbbd; }.place-value>div:last-child:not(:first-child) { font-size:1.6rem; }.visual-shapes { display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap; }.visual-shapes i { display:block;width:62px;height:62px;background:#5bc7b8; }.shape-circle { border-radius:50%; }.shape-triangle { clip-path:polygon(50% 0,100% 100%,0 100%); }.shape-rectangle { width:95px!important; }.visual-words { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }.visual-words>* { padding:12px;border-radius:14px;background:#fff;font-weight:900;text-transform:capitalize; }.visual-pattern span,.visual-sort span,.visual-days span { padding:10px;border-radius:13px;background:#fff;font-size:1.4rem; }.visual-position { position:relative;font-size:5rem; }.visual-position b { position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:1.6rem; }.visual-position small { display:block;font-size:.9rem;font-weight:950;color:var(--math-green); }.visual-measure { display:grid;gap:18px;justify-items:start; }.visual-measure i { display:block;height:20px;border-radius:999px;background:linear-gradient(90deg,var(--math-coral),var(--math-yellow)); }.visual-balance { display:flex;gap:25px;align-items:center;font-size:3rem; }.visual-balance i { width:120px;height:8px;transform:rotate(-10deg);background:#425b6f;position:relative; }.visual-coins span { width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffe083,#dcae33);border:4px double #fff1ad;font-weight:950; }.visual-parts { width:230px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px; }.visual-parts strong { grid-column:1/-1;padding:14px;border-radius:16px;background:var(--math-yellow); }.visual-parts span { padding:14px;border-radius:16px;background:#fff;font-weight:950; }.visual-column { width:120px;margin:auto;display:grid;text-align:right;font:800 1.8rem "Baloo 2"; }.visual-column i { border-top:3px solid; }.visual-grid { font-size:2.7rem; }.shape-house { position:relative;width:170px;height:170px;margin:auto; }.shape-house i { position:absolute;left:20px;bottom:0;width:130px;height:100px;background:#74ccbf; }.shape-house b { position:absolute;left:5px;top:5px;width:160px;height:80px;background:var(--math-coral);clip-path:polygon(50% 0,100% 100%,0 100%); }.shape-house span { position:absolute;left:68px;bottom:0;width:36px;height:65px;background:#fff1c4; }.visual-units { display:flex;align-items:end;justify-content:center; }.visual-units i { width:200px;height:16px;border-radius:9px;background:var(--math-coral);position:absolute;transform:translateY(-26px); }.visual-units span { width:34px;height:34px;display:grid;place-items:center;border:1px solid #88b6bd;background:#fff;font-weight:900; }.visual-clock { width:190px;height:190px;margin:auto;position:relative;border:8px solid #fff;border-radius:50%;background:#fff6d8;box-shadow:0 8px 22px rgba(25,49,71,.12); }.visual-clock i,.visual-clock b { position:absolute;left:50%;bottom:50%;width:5px;transform-origin:bottom;border-radius:9px;background:#183145; }.visual-clock i { height:55px;transform:translateX(-50%) rotate(var(--hour)); }.visual-clock b { height:75px;transform:translateX(-50%); }.visual-clock>span { position:absolute;left:50%;top:5px;transform:translateX(-50%);font-weight:950; }.visual-clock small { position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-weight:950; }.visual-growing { display:flex;gap:12px;align-items:end;justify-content:center; }.visual-growing span { display:grid;color:#39a99b;letter-spacing:2px;writing-mode:vertical-lr; }.visual-chart { display:grid;gap:8px;min-width:270px; }.visual-chart div { display:grid;grid-template-columns:70px 1fr 25px;gap:8px;align-items:center;text-align:left; }.visual-chart i { width:var(--bar);height:18px;border-radius:9px;background:linear-gradient(90deg,var(--math-coral),var(--math-yellow)); }
@media (max-width:850px) { .maths-hero,.maths-lesson-grid { grid-template-columns:1fr; }.maths-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.maths-check-card { grid-template-columns:1fr; }.maths-progress-strip { grid-template-columns:1fr;gap:8px; }.maths-curriculum-head { align-items:stretch;flex-direction:column; }.maths-grade-select { min-width:0; }.maths-hero-play { min-height:260px; } }
@media (max-width:560px) { .maths-hero,.maths-curriculum { width:calc(100% - 16px);border-radius:24px; }.maths-hero { margin-top:12px;padding:23px 17px; }.maths-hero h1 { font-size:2.65rem; }.maths-hero-play { padding:18px;min-height:220px; }.maths-topic-grid { display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px; }.maths-topic-grid button { flex:0 0 82vw;min-height:160px;scroll-snap-align:start; }.maths-lesson { padding:12px;border-radius:23px; }.maths-lesson-head { display:grid; }.maths-audio-choices { min-width:0;width:100%; }.maths-listen-button { width:100%;min-width:0; }.maths-understand-card,.maths-example-card,.maths-check-card { padding:16px;border-radius:21px; }.maths-visual { min-height:210px;padding:12px; }.maths-answer-options { grid-template-columns:1fr; }.maths-answer-options button { min-height:55px; }.maths-lesson-navigation { display:grid;grid-template-columns:1fr 1fr; }.maths-lesson-navigation button { padding-inline:8px;font-size:.78rem; }.visual-numberline { min-width:245px; }.maths-progress-strip { margin-top:15px; }.whatsapp-float { bottom:88px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }