.ep-math-intelligence{margin:18px 0 4px;border:1px solid #cfe0fb;border-radius:18px;background:linear-gradient(145deg,#fff,#f5f8ff);box-shadow:0 10px 26px rgba(29,78,216,.08);overflow:hidden;color:#102a4c}
.ep-math-intelligence__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:linear-gradient(90deg,#eef5ff,#f8f2ff)}
.ep-math-intelligence__head>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ep-math-intelligence__head span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#395a93}
.ep-math-intelligence__head strong{font-size:16px;line-height:1.35;color:#112f5c}
.ep-math-intelligence button,.ep-math-intelligence__head button{appearance:none;border:1px solid #c7d8f5;border-radius:12px;background:#fff;color:#103567;font-weight:750;line-height:1.2;padding:10px 14px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;background-color .16s ease;white-space:normal}
.ep-math-intelligence button:hover,.ep-math-intelligence button:focus-visible{transform:translateY(-1px);border-color:#6d8eff;box-shadow:0 7px 16px rgba(55,92,190,.13);outline:none}
.ep-math-intelligence button.is-primary,.ep-math-intelligence__head button{border-color:transparent;background:linear-gradient(100deg,#3198ff,#744cff);color:#fff}
.ep-math-intelligence__body{padding:16px 18px 18px;border-top:1px solid #dbe7fa}
.ep-math-intelligence__body[hidden],.ep-math-intel-panel[hidden]{display:none!important}
.ep-math-intelligence__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ep-math-intelligence__actions button{min-height:48px;text-align:center}
.ep-math-intel-panel{padding:16px;border:1px solid #d7e3f7;border-radius:15px;background:#fff;margin-top:12px}
.ep-math-intel-panel__title{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.ep-math-intel-panel__title strong{font-size:16px;color:#103464}
.ep-math-intel-panel__title span{font-size:13px;color:#5d6f89;line-height:1.45}
.ep-math-intel-panel textarea{display:block;width:100%;min-height:124px;resize:vertical;border:1px solid #cddcf2;border-radius:12px;padding:12px 13px;background:#fbfdff;color:#132f53;font:inherit;box-sizing:border-box}
.ep-math-intel-panel textarea:focus{border-color:#6688ff;box-shadow:0 0 0 3px rgba(102,136,255,.12);outline:none}
.ep-math-intel-upload{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:11px 13px;border:1px dashed #8eabe0;border-radius:12px;background:#f7faff;color:#264c7b;font-weight:700;cursor:pointer}
.ep-math-intel-upload input{max-width:48%}
.ep-math-intel-panel [data-ep-intel-work-preview]{display:block;max-width:100%;max-height:360px;object-fit:contain;margin:10px auto;border:1px solid #d5e1f3;border-radius:12px;background:#f3f6fb}
.ep-math-intel-panel [data-ep-intel-work-preview][hidden]{display:none!important}
.ep-math-intel-inline-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.ep-math-intel-result{margin-top:10px}
.ep-intel-loading,.ep-intel-error,.ep-intel-empty{padding:13px 14px;border-radius:12px;font-weight:650;line-height:1.45}
.ep-intel-loading{background:#eef6ff;color:#20528b}
.ep-intel-error{background:#fff0f0;color:#a12828;border:1px solid #ffd0d0}
.ep-intel-empty{background:#f7f8fb;color:#65748a;border:1px dashed #c9d4e5}
.ep-mistake-report{border:1px solid #d6e3f5;border-left:5px solid #f2a400;border-radius:14px;background:#fbfdff;overflow:hidden}
.ep-mistake-report.is-correct{border-left-color:#22aa67}
.ep-mistake-report.is-wrong{border-left-color:#df4752}
.ep-mistake-report.is-partial{border-left-color:#f2a400}
.ep-mistake-report header{display:flex;flex-direction:column;gap:5px;padding:14px 15px;background:#f4f8ff;border-bottom:1px solid #dbe6f5}
.ep-mistake-report header span{font-size:11px;font-weight:850;letter-spacing:.06em;color:#526d95;text-transform:uppercase}
.ep-mistake-report header strong{font-size:15px;color:#173962}
.ep-mistake-report>div{padding:12px 15px;border-bottom:1px solid #edf1f8}
.ep-mistake-report>div:last-of-type{border-bottom:0}
.ep-mistake-report b{display:block;margin-bottom:4px;color:#14385f}
.ep-mistake-report p{margin:0;color:#425b77;line-height:1.55}
.ep-mistake-report pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;padding:11px;border-radius:10px;background:#f1f5fb;color:#17324f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.ep-mistake-report code{display:inline-block;padding:6px 9px;border-radius:8px;background:#edf3ff;color:#234e8a;overflow-wrap:anywhere}
.ep-mistake-report>button{margin:12px 15px}
.ep-concept-refresher{background:#fff9e8!important;border:1px solid #f6df9f!important;border-radius:10px;margin:10px 12px}
.ep-adaptive-card,.ep-formula-card,.ep-progress-report{padding:15px;border:1px solid #d5e2f5;border-radius:14px;background:linear-gradient(145deg,#fff,#f8fbff)}
.ep-adaptive-card>span,.ep-formula-card>span{display:inline-block;margin-bottom:5px;font-size:11px;font-weight:850;color:#577099;text-transform:uppercase;letter-spacing:.05em}
.ep-adaptive-card h4,.ep-formula-card h4,.ep-progress-report h4{margin:4px 0 9px;color:#143966;font-size:17px;line-height:1.42}
.ep-adaptive-card p,.ep-adaptive-card small{display:block;color:#536981;line-height:1.5}
.ep-adaptive-card button{margin-top:12px}
.ep-formula-card pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#eef4fc;border-radius:10px;padding:10px}
.ep-formula-ratings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.ep-progress-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ep-progress-stats>div{padding:13px 10px;text-align:center;border:1px solid #d9e5f6;border-radius:12px;background:#fff}
.ep-progress-stats b{display:block;font-size:22px;color:#164c8c;overflow-wrap:anywhere}
.ep-progress-stats span{display:block;margin-top:3px;font-size:11px;color:#6b7f98}
.ep-progress-report ul,.ep-progress-report ol{padding-left:21px;color:#3d5673;line-height:1.55}
.ep-progress-report>button{margin-top:8px}
.ep-math-visual-host{margin:13px 0;padding:14px;border:1px solid #d4e2f5;border-radius:14px;background:#fbfdff;overflow:hidden}
.ep-math-visual-host[hidden]{display:none!important}
.ep-math-visual-host>strong{display:block;margin-bottom:9px;color:#173c6b}
.ep-math-visual-host svg{display:block;width:100%;height:auto;max-height:420px;border:1px solid #e0e9f6;border-radius:10px;background:#fff}
.ep-math-visual-host svg .axis{stroke:#476384;stroke-width:2}
.ep-math-visual-host svg .grid{stroke:#dfe7f2;stroke-width:1}
.ep-math-visual-host svg .plot{stroke:#315fe9;stroke-width:4;fill:none}
.ep-math-visual-host svg .shape{fill:rgba(79,111,255,.12);stroke:#4168db;stroke-width:4}
.ep-math-visual-host svg .label{fill:#183a63;font-size:18px;font-weight:700}
.ep-math-visual-host svg .right-angle{fill:none;stroke:#ef7c28;stroke-width:4}
.ep-exam-pattern-map{margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid #f0d79d;background:#fff9e8;color:#5a4516}
.ep-exam-pattern-map strong{display:block;margin-bottom:4px;color:#684e0e} .ep-math-teacher-workspace .ep-math-controls{grid-template-columns:repeat(4,minmax(0,1fr))!important} .ep-math-camera-box{position:relative;min-height:280px;background:#101827;border-radius:16px;overflow:hidden}
.ep-math-camera-box video,.ep-math-camera-box img{display:block;width:100%;height:100%;min-height:280px;max-height:520px;object-fit:cover;background:#101827}
.ep-math-camera-box video[hidden],.ep-math-camera-box img[hidden]{display:none!important}
.ep-math-camera-box video.is-camera-loading{opacity:.35}
.ep-math-camera-box video.is-camera-loading:after{content:""}
.ep-math-camera-box video.is-camera-ready{opacity:1}
@media (max-width:900px){
.ep-math-intelligence__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.ep-math-teacher-workspace .ep-math-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:600px){
.ep-math-intelligence{border-radius:14px}
.ep-math-intelligence__head{align-items:stretch;flex-direction:column;padding:14px}
.ep-math-intelligence__head button{width:100%}
.ep-math-intelligence__body{padding:12px}
.ep-math-intelligence__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ep-math-intelligence__actions button{font-size:12px;padding:10px 7px;min-height:54px}
.ep-math-intel-panel{padding:12px}
.ep-math-intel-upload{align-items:flex-start;flex-direction:column}
.ep-math-intel-upload input{max-width:100%;width:100%}
.ep-math-intel-inline-actions{display:grid;grid-template-columns:1fr}
.ep-formula-ratings{grid-template-columns:repeat(2,minmax(0,1fr))}
.ep-progress-stats{grid-template-columns:1fr}
.ep-math-teacher-workspace .ep-math-controls{grid-template-columns:1fr!important}
.ep-math-camera-box,.ep-math-camera-box video,.ep-math-camera-box img{min-height:240px}
}
.ep-math-exam-map{margin:12px 0;padding:12px 14px;border:1px solid #f0d79d;border-radius:12px;background:#fff9e8;color:#5a4516;line-height:1.45}
.ep-math-exam-map strong{margin-right:5px;color:#684e0e}
.ep-math-exam-map span,.ep-math-exam-map small{display:block;margin-top:4px;color:#6b572a}
.ep-math-visual-host svg .point{fill:#744cff;stroke:#fff;stroke-width:2}
.ep-math-visual-host svg .measure{stroke:#ef7c28;stroke-width:3} .ep-handwriting-check-preview{position:relative;display:block;width:100%;margin-top:12px;border-radius:14px;overflow:hidden;background:#eef3fa}
.ep-handwriting-check-preview>[data-ep-intel-work-preview]{display:block;width:100%;max-height:540px;object-fit:contain;margin:0!important;border-radius:14px}
.ep-handwriting-red-pen{position:absolute;inset:0;pointer-events:none;z-index:3}
.ep-handwriting-red-pen[hidden]{display:none!important}
.ep-handwriting-red-pen span{position:absolute;left:5%;right:5%;top:var(--ep-wrong-line-top,50%);height:10%;min-height:36px;transform:translateY(-50%);border:3px solid #e62938;border-radius:12px;background:rgba(230,41,56,.08);box-shadow:0 0 0 4px rgba(255,255,255,.7),0 8px 22px rgba(160,20,30,.18)}
.ep-handwriting-red-pen span:after{content:"";position:absolute;left:7%;right:7%;bottom:-8px;height:4px;background:#e62938;border-radius:999px;transform:rotate(-1deg)}
.ep-handwriting-red-pen strong{position:absolute;left:7%;top:calc(var(--ep-wrong-line-top,50%) + 6%);max-width:86%;padding:7px 10px;border-radius:9px;background:#d91f30;color:#fff;font-size:12px;line-height:1.35;box-shadow:0 5px 15px rgba(120,10,20,.22)}
.ep-handwriting-red-pen i{position:absolute;right:5%;top:calc(var(--ep-wrong-line-top,50%) - 8%);font-size:30px;color:#d91f30;filter:drop-shadow(0 2px 1px #fff);transform:rotate(-18deg)}
.ep-handwriting-red-pen.is-marked span{animation:epRedPenMark .5s ease both}
@keyframes epRedPenMark{from{opacity:0;transform:translateY(-50%) scaleX(.2);transform-origin:left}to{opacity:1;transform:translateY(-50%) scaleX(1)}}
.ep-math-board-auto-visual{position:relative;border:2px solid #d4e0ff!important;background:linear-gradient(145deg,#fff,#f5f8ff)!important}
.ep-auto-diagram-badge{display:inline-flex;align-items:center;margin:0 8px 8px 0;padding:4px 8px;border-radius:999px;background:#5b54ec;color:#fff;font-size:10px;font-weight:900;letter-spacing:.06em}
@media(max-width:600px){.ep-handwriting-red-pen strong{font-size:10px;left:4%;max-width:92%}.ep-handwriting-red-pen i{font-size:24px}.ep-handwriting-red-pen span{left:3%;right:3%}}.ep-learning-insight-card,.ep-parent-weekly-ai,.ep-speaking-confidence,.ep-translator-practice,.ep-ncert-math-context,.ai-prep-writing-coach{box-sizing:border-box}
.ep-learning-insight-card{margin:18px 0;padding:18px;border:1px solid #cbdcf6;border-radius:18px;background:linear-gradient(145deg,#fff,#f4f8ff);box-shadow:0 12px 30px rgba(31,72,132,.08)}
.ep-learning-insight-card__head{display:flex;align-items:center;justify-content:space-between;gap:15px}.ep-learning-insight-card__head span,.ep-parent-weekly-ai__head span,.ep-speaking-confidence__head span,.ep-translator-practice>div>span,.ep-ncert-math-context>span{display:block;color:#5452d8;font-size:10px;font-weight:900;letter-spacing:.08em}.ep-learning-insight-card__head h4{margin:4px 0;color:#13355f}.ep-learning-insight-card__head>strong{padding:10px 13px;border-radius:12px;background:#fff;color:#3852c7;border:1px solid #d7e1fb}
.ep-learning-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}.ep-learning-insight-grid article{padding:13px;border:1px solid #d9e4f5;border-radius:13px;background:#fff}.ep-learning-insight-grid span,.ep-learning-insight-grid small{display:block;color:#697d96;font-size:11px}.ep-learning-insight-grid strong{display:block;margin:5px 0;color:#163b67;overflow-wrap:anywhere}.ep-learning-insight-note{margin:12px 0 0;color:#516982;font-size:12px}
.ai-prep-writing-coach{margin:18px 0!important;padding:18px!important;border:1px solid #cfdcf2!important;border-radius:18px!important;background:linear-gradient(145deg,#fff,#f6f9ff)!important}.ep-writing-coach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:13px 0}.ep-writing-coach-grid label{font-size:12px;font-weight:800;color:#294c78}.ep-writing-coach-grid select,.ai-prep-writing-coach textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #cbd9ec;border-radius:11px;background:#fff}.ai-prep-writing-coach textarea{min-height:210px;resize:vertical}.ep-writing-coach-output{margin-top:14px}.ep-writing-review{padding:16px;border:1px solid #d4e0f2;border-radius:15px;background:#fff}.ep-writing-review__scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ep-writing-review__scores span{padding:10px;text-align:center;border-radius:10px;background:#f2f6fd;color:#5b6f8a;font-size:10px}.ep-writing-review__scores b{display:block;margin-top:4px;color:#234e86;font-size:18px}.ep-writing-review ul{padding-left:20px;line-height:1.55}.ep-writing-review table{width:100%;border-collapse:collapse}.ep-writing-review td,.ep-writing-review th{padding:8px;border:1px solid #e0e7f1;text-align:left;vertical-align:top}
.ep-translator-practice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px;margin-top:15px;padding:15px;border:1px solid #cabffd;border-radius:15px;background:linear-gradient(135deg,#f7f5ff,#eef8ff)}.ep-translator-practice strong{display:block;margin:4px 0;color:#263b70}.ep-translator-practice p{margin:0;color:#60728b;font-size:12px}.ep-translator-practice [data-ep-translator-practice-result]{grid-column:1/-1}.ep-practice-listening,.ep-practice-live{display:flex;align-items:center;gap:10px;padding:11px;border-radius:11px;background:#fff}.ep-practice-listening i{width:12px;height:12px;border-radius:50%;background:#e13b67;box-shadow:0 0 0 0 rgba(225,59,103,.5);animation:epListeningPulse 1.2s infinite}@keyframes epListeningPulse{70%{box-shadow:0 0 0 12px rgba(225,59,103,0)}}.ep-practice-live{align-items:flex-start;flex-direction:column}.ep-practice-live span{font-size:10px;color:#71809a}.ep-pronunciation-result{padding:14px;border-radius:13px;background:#fff;border:1px solid #d7e2f2}.ep-pronunciation-result>div{display:flex;align-items:baseline;gap:8px}.ep-pronunciation-result>div strong{font-size:26px}.ep-pronunciation-result.is-good>div strong{color:#16815a}.ep-pronunciation-result.is-medium>div strong{color:#b07406}.ep-pronunciation-result.is-practice>div strong{color:#c43b50}.ep-pronunciation-result button{padding:8px 12px;border:0;border-radius:9px;background:#5b54e8;color:#fff;font-weight:800}
.ep-speaking-confidence{margin:14px 0;padding:15px;border:1px solid #cfdcf2;border-radius:16px;background:linear-gradient(145deg,#fff,#f4f8ff)}.ep-speaking-confidence__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.ep-speaking-confidence__head strong{display:block;margin-top:3px;color:#143c6f}.ep-speaking-confidence__head>b{font-size:25px;color:#4d50da}.ep-speaking-confidence__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.ep-speaking-confidence__grid article{padding:9px;text-align:center;border-radius:10px;background:#fff;border:1px solid #dde6f4}.ep-speaking-confidence__grid strong{display:block;color:#1f4d84}.ep-speaking-confidence__grid span{display:block;margin-top:3px;font-size:9px;color:#71809a}.ep-speaking-confidence>p{margin:10px 0 0;color:#5d718a;font-size:12px}
.ep-parent-weekly-ai{margin:18px 0!important;padding:18px!important;background:linear-gradient(145deg,#fff,#f5f8ff)!important;border:1px solid #cadbf4!important}.ep-parent-weekly-ai__head{display:flex;justify-content:space-between;align-items:center;gap:12px}.ep-parent-weekly-ai__head h3{margin:4px 0}.ep-parent-weekly-ai__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.ep-parent-weekly-ai__stats article{padding:13px;text-align:center;border-radius:12px;background:#fff;border:1px solid #dce5f3}.ep-parent-weekly-ai__stats strong{display:block;font-size:22px;color:#244f87}.ep-parent-weekly-ai__stats span{display:block;font-size:10px;color:#6d8099}.ep-parent-weekly-ai__body{padding:12px 14px;border-radius:12px;background:#fff}.ep-parent-weekly-ai__body ul{padding-left:20px}
.ep-teacher-heatmap__scroll{overflow:auto;border:1px solid #d7e1ef;border-radius:14px}.ep-teacher-heatmap table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}.ep-teacher-heatmap th,.ep-teacher-heatmap td{padding:11px;border-bottom:1px solid #e6ebf3;text-align:left}.ep-teacher-heatmap thead th{position:sticky;top:0;background:#eef4fd;z-index:1}.ep-teacher-heatmap td span{display:inline-flex;min-width:54px;justify-content:center;padding:6px 8px;border-radius:8px;font-weight:900}.ep-teacher-heatmap .is-danger{background:#ffe3e6;color:#a11f31}.ep-teacher-heatmap .is-warning{background:#fff2cf;color:#8b5a00}.ep-teacher-heatmap .is-good{background:#dcf7e9;color:#16704e}.ep-teacher-heatmap .is-empty{background:#eef1f6;color:#738097}.ep-teacher-heatmap td small{display:block;color:#74839a;margin-top:4px}
.ep-ncert-math-context{position:relative;margin:0 0 16px;padding:14px 100px 14px 15px;border:1px solid #c9d6ff;border-radius:15px;background:linear-gradient(135deg,#f5f3ff,#eff8ff)}.ep-ncert-math-context strong{display:block;margin:4px 0;color:#263d76}.ep-ncert-math-context p{margin:0;color:#63758d;font-size:12px}.ep-ncert-math-context button{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:7px 10px;border:1px solid #cdd8ec;border-radius:9px;background:#fff;color:#475a76}.ai-study-ncert-live-math{background:linear-gradient(135deg,#348ef5,#7651ec)!important;color:#fff!important;border-color:transparent!important}
.ep-credit-smart-nudge{position:fixed;right:20px;bottom:20px;z-index:999999;width:min(360px,calc(100vw - 28px));padding:18px;border:1px solid #cbd7f5;border-radius:18px;background:#fff;box-shadow:0 22px 65px rgba(24,46,91,.24);opacity:0;transform:translateY(18px);transition:.25s}.ep-credit-smart-nudge.is-visible{opacity:1;transform:none}.ep-credit-smart-nudge>span{display:block;color:#6352d7;font-size:10px;font-weight:900;letter-spacing:.07em}.ep-credit-smart-nudge>strong{display:block;margin:5px 28px 4px 0;color:#173b6b;font-size:18px}.ep-credit-smart-nudge p{color:#586d86;line-height:1.45}.ep-credit-smart-nudge>div{display:flex;gap:8px}.ep-credit-smart-nudge>div button{flex:1;padding:10px;border:0;border-radius:10px;background:#5c54e7;color:#fff;font-weight:850}.ep-credit-smart-nudge>div button+button{background:#eef2f9;color:#354b69}.ep-credit-smart-nudge__close{position:absolute;right:10px;top:9px;width:30px;height:30px;border:0;border-radius:50%;background:#f0f3f8;color:#4c5b70;font-size:20px}
.ep-learning-loading,.ep-learning-error{padding:12px;border-radius:11px}.ep-learning-loading{background:#eef5ff;color:#375c88}.ep-learning-error{background:#fff0f1;color:#a52c3a;border:1px solid #f2c7cc}
@media(max-width:760px){.ep-learning-insight-grid,.ep-writing-coach-grid{grid-template-columns:1fr}.ep-writing-review__scores{grid-template-columns:repeat(2,minmax(0,1fr))}.ep-translator-practice{grid-template-columns:1fr}.ep-translator-practice button{width:100%}.ep-speaking-confidence__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ep-parent-weekly-ai__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ep-ncert-math-context{padding-right:15px}.ep-ncert-math-context button{position:static;transform:none;margin-top:10px}.ep-credit-smart-nudge{right:14px;bottom:14px}.ep-parent-weekly-ai__head{align-items:flex-start;flex-direction:column}}
.ep-pronunciation-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.ep-pronunciation-actions button+button{background:#eef2fa;color:#354d72}.ep-aiva-card,
.ep-aiva-card * { box-sizing: border-box; }
.ep-aiva-card {
width: min(100%, 980px);
margin: 14px auto 18px;
padding: 16px;
border: 1px solid rgba(31, 96, 255, .18);
border-radius: 18px;
background: linear-gradient(135deg, rgba(245,249,255,.98), rgba(245,255,250,.98));
box-shadow: 0 12px 34px rgba(18, 57, 112, .09);
color: #14213d;
position: relative;
z-index: 1;
overflow: hidden;
}
.ep-aiva-card::before {
content: "";
position: absolute;
inset: -80px auto auto -70px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(66, 133, 244, .08);
pointer-events: none;
}
.ep-aiva-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; position:relative; }
.ep-aiva-title-wrap { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.ep-aiva-orb { width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#2867e8,#11a36a); box-shadow:0 7px 18px rgba(40,103,232,.25); }
.ep-aiva-card.is-live .ep-aiva-orb { animation:epAivaPulse 1.65s ease-in-out infinite; }
.ep-aiva-title { margin:0 0 4px; font-size:18px; line-height:1.25; color:#10264d; }
.ep-aiva-description { margin:0; font-size:13px; line-height:1.55; color:#516079; }
.ep-aiva-status { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:6px 10px; border-radius:999px; background:#edf2fb; color:#365072; font-size:12px; font-weight:700; white-space:nowrap; }
.ep-aiva-status-dot { width:8px; height:8px; border-radius:50%; background:#7f8da2; }
.ep-aiva-card.is-connecting .ep-aiva-status-dot { background:#f5a623; animation:epAivaBlink 1s infinite; }
.ep-aiva-card.is-live .ep-aiva-status-dot { background:#0aaf68; box-shadow:0 0 0 4px rgba(10,175,104,.13); }
.ep-aiva-card.is-speaking .ep-aiva-status-dot { background:#2867e8; box-shadow:0 0 0 4px rgba(40,103,232,.13); }
.ep-aiva-card.has-error .ep-aiva-status-dot { background:#d63638; }
.ep-aiva-controls { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; position:relative; }
.ep-aiva-button { appearance:none; border:0; border-radius:12px; min-height:42px; padding:10px 16px; font:inherit; font-size:14px; font-weight:750; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.ep-aiva-button:hover:not(:disabled) { transform:translateY(-1px); }
.ep-aiva-button:focus-visible { outline:3px solid rgba(40,103,232,.22); outline-offset:2px; }
.ep-aiva-button:disabled { cursor:not-allowed; opacity:.55; }
.ep-aiva-start { color:#fff; background:linear-gradient(135deg,#2867e8,#1d55c5); box-shadow:0 8px 20px rgba(40,103,232,.24); }
.ep-aiva-stop { color:#fff; background:#c92a2a; box-shadow:0 8px 20px rgba(201,42,42,.18); }
.ep-aiva-mute { color:#1f3c67; background:#e8eef9; }
.ep-aiva-mode { margin-left:auto; font-size:12px; color:#5d6b80; font-weight:650; }
.ep-aiva-message { display:none; margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45; background:#fff4e5; color:#7a4900; border:1px solid #ffd596; }
.ep-aiva-message.is-visible { display:block; }
.ep-aiva-transcript { display:none; margin-top:13px; max-height:190px; overflow:auto; padding:10px; border-radius:12px; background:rgba(255,255,255,.78); border:1px solid rgba(31,96,255,.12); }
.ep-aiva-card.has-transcript .ep-aiva-transcript { display:block; }
.ep-aiva-line { display:flex; gap:8px; padding:6px 5px; font-size:13px; line-height:1.45; border-bottom:1px solid rgba(20,33,61,.06); }
.ep-aiva-line:last-child { border-bottom:0; }
.ep-aiva-speaker { flex:0 0 auto; font-weight:800; color:#245fcf; }
.ep-aiva-line.is-aiva .ep-aiva-speaker { color:#07814e; }
.ep-aiva-text { min-width:0; overflow-wrap:anywhere; color:#34445d; }
.ep-aiva-privacy { display:flex; align-items:flex-start; gap:7px; margin:10px 0 0; font-size:11px; line-height:1.45; color:#66758b; }
.ep-aiva-privacy::before { content:"🔒"; flex:0 0 auto; }
.ep-aiva-wave { display:none; height:18px; align-items:center; gap:3px; }
.ep-aiva-card.is-live .ep-aiva-wave { display:flex; }
.ep-aiva-wave i { display:block; width:3px; height:7px; border-radius:2px; background:#0aaf68; animation:epAivaWave .8s ease-in-out infinite alternate; }
.ep-aiva-wave i:nth-child(2){animation-delay:.12s}.ep-aiva-wave i:nth-child(3){animation-delay:.24s}.ep-aiva-wave i:nth-child(4){animation-delay:.36s}
@keyframes epAivaPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes epAivaBlink { 50%{opacity:.35} }
@keyframes epAivaWave { from{height:5px} to{height:17px} }
@media (max-width:640px) {
.ep-aiva-card { margin:10px 0 14px; padding:13px; border-radius:15px; }
.ep-aiva-head { flex-direction:column; }
.ep-aiva-status { align-self:flex-start; }
.ep-aiva-controls { align-items:stretch; }
.ep-aiva-button { width:100%; }
.ep-aiva-mode { margin-left:0; width:100%; text-align:center; }
.ep-aiva-title { font-size:16px; }
.ep-aiva-description { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
.ep-aiva-card *, .ep-aiva-card *::before, .ep-aiva-card *::after { animation:none !important; transition:none !important; }
}:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ai-live-avatar-shell,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) {
max-width: 100%;
min-width: 0;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer,
.ep-magic-modal,
.ep-kids-player,
.ep-kids-modal,
.ai-fs-scanner
),
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer,
.ep-magic-modal,
.ep-kids-player,
.ep-kids-modal,
.ai-fs-scanner
) * {
box-sizing: border-box;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) :where(img, svg) {
max-width: 100%;
height: auto;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) :where(input, select, textarea) {
max-width: 100%;
min-width: 0;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) :where(h1, h2, h3, h4, p, li, label, legend, summary, strong, small, a, button) {
overflow-wrap: anywhere;
} @media (max-width: 1024px) {
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) > * {
max-width: 100%;
min-width: 0;
}
.ai-study-dashboard :where(.ai-study-main, .ai-study-panel, .ai-study-card),
.ai-study-teacher-dashboard :where(.ai-study-main, .ai-study-panel, .ai-study-card),
.ep-course-app :where(.ep-course-card, .ep-course-lesson, .ep-course-content-block),
.ep-course-directory :where(.ep-course-card, .ep-course-grid),
.ep-course-showcase :where(.ep-showcase-card, .ep-showcase-course-grid),
.ep-parent-portal :where(.ep-parent-card, .ep-parent-panel),
.ep-math-teacher :where(.ep-math-teacher-layout, .ep-math-teacher-workspace),
.ai-live-avatar-tutor :where(.ai-live-avatar-main, .ai-live-avatar-control-panel) {
max-width: 100%;
min-width: 0;
}
} @media (max-width: 782px) {
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) * {
min-width: 0;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-auth-shell,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-study-ncert-library,
.ai-prep-panel,
.ai-live-avatar-tutor,
.ep-seo-feature-page,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-home-course-showcase,
.ep-quiz-player,
.ep-parent-access,
.ep-parent-portal,
.ep-kids-world,
.ep-touch-learn,
.ep-avatar-app,
.ep-math-teacher,
.ep-sp-wrap,
.ep-smart-filter-shell,
.ep-mobile-answer-viewer
) :where(input, select, textarea) {
width: 100%;
font-size: 16px;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-prep-panel,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-parent-portal,
.ep-math-teacher
) :where(
.ai-study-grid,
.ai-study-advanced-grid,
.ai-study-answer-layout,
.ai-study-camera-grid,
.ai-study-form-grid,
.ai-study-voice-conv-grid,
.ep-course-grid,
.ep-course-filters,
.ep-showcase-course-grid,
.ep-parent-access__grid,
.ep-parent-dashboard__grid,
.ep-math-teacher-layout
) {
grid-template-columns: minmax(0, 1fr) !important;
}
:where(
.ai-study-app,
.ai-study-dashboard,
.ai-study-teacher-dashboard,
.ai-study-voice-pro,
.ai-prep-panel,
.ep-course-app,
.ep-course-directory,
.ep-course-experience,
.ep-course-showcase,
.ep-parent-portal,
.ep-math-teacher
) :where(.ai-study-table-wrap, .ai-study-history-table, .ep-course-table, .ep-parent-table) {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ai-study-teacher-dashboard .ai-study-shell {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "teacher-sidebar" "teacher-main" !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-nav,
.ai-study-dashboard :where(.ai-study-tabs, .ai-study-chip-row, .ai-study-toolbar),
.ai-study-voice-pro :where(.ai-study-voice-pro__btn-row, .ai-study-voice-pro__mode-tabs),
.ep-course-app :where(.ep-course-nav, .ep-course-actions),
.ep-course-showcase :where(.ep-showcase-actions, .ep-showcase-chip-grid) {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
} @media (max-width: 820px) {
.ep-kids-world {
padding-inline: clamp(7px, 2.5vw, 14px) !important;
overflow-x: clip;
}
.ep-kids-world :where(
.ep-kids-hero,
.ep-kids-profile-strip,
.ep-kids-mood,
.ep-kids-highlight-grid,
.ep-kids-games,
.ep-kids-explore,
.ep-kids-create,
.ep-kids-rewards,
.ep-kids-family,
.ep-kids-story-grid,
.ep-kids-gallery,
.ep-kids-reward-grid,
.ep-kids-parent-controls,
.ep-kids-game-picker,
.ep-kids-game-stage
) {
width: 100%;
max-width: 100%;
min-width: 0;
}
.ep-kids-highlight-grid,
.ep-kids-gallery,
.ep-kids-reward-grid,
.ep-kids-game-picker {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
.ep-kids-feature-card,
.ep-kids-gallery article,
.ep-kids-reward-grid article {
min-width: 0;
min-height: 0;
padding: 14px !important;
}
.ep-kids-feature-card {
grid-template-columns: minmax(0, 1fr) !important;
align-content: start;
gap: 8px !important;
}
.ep-kids-feature-icon {
width: 44px !important;
height: 44px !important;
border-radius: 13px !important;
font-size: 23px !important;
}
.ep-kids-feature-card h2,
.ep-kids-feature-card p {
min-height: 0 !important;
}
.ep-kids-feature-card h2 {
font-size: clamp(15px, 4.2vw, 19px) !important;
}
.ep-kids-feature-card p {
display: -webkit-box;
overflow: hidden;
margin: 7px 0 10px !important;
font-size: 12px !important;
line-height: 1.45 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.ep-kids-feature-card .ep-kids-btn {
width: 100%;
min-height: 38px;
padding: 7px 8px;
font-size: 11px;
}
.ep-kids-feature-card--weekly {
grid-column: auto !important;
}
.ep-kids-highlight-grid > :last-child:nth-child(odd) {
grid-column: 1 / -1 !important;
}
.ep-kids-story-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
.ep-kids-story-card {
grid-template-columns: minmax(0, 1fr) !important;
align-content: start;
gap: 8px !important;
min-height: 0 !important;
padding: 11px !important;
}
.ep-kids-story-card__icon,
.ep-kids-story-card__picture {
width: 100% !important;
height: 92px !important;
max-width: none !important;
border-radius: 15px !important;
font-size: 42px !important;
letter-spacing: 4px !important;
}
.ep-kids-story-card__body {
min-width: 0;
}
.ep-kids-story-card h3 {
font-size: clamp(14px, 4vw, 17px) !important;
}
.ep-kids-story-card p {
display: -webkit-box;
overflow: hidden;
font-size: 12px !important;
line-height: 1.45 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.ep-kids-section-nav {
position: sticky;
width: 100%;
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
overflow-x: hidden !important;
}
.ep-kids-filter-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ep-kids-filter-row :where(select, button) {
width: 100% !important;
min-width: 0 !important;
}
.ep-kids-game-picker > button {
min-width: 0;
padding: 11px 6px !important;
}
.ep-kids-letter-bank,
.ep-kids-picture-options,
.ep-kids-memory-grid {
width: 100%;
max-width: 100%;
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)) !important;
gap: 7px !important;
}
.ep-kids-player,
.ep-kids-player__shell {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.ep-kids-player__shell {
height: 100vh;
height: 100svh;
height: 100dvh;
min-height: 0;
overflow: hidden;
}
.ep-kids-player__header {
min-height: 58px !important;
padding:
max(7px, env(safe-area-inset-top))
max(8px, env(safe-area-inset-right))
7px
max(9px, env(safe-area-inset-left)) !important;
}
.ep-kids-player__header h2 {
max-width: 100%;
font-size: 17px !important;
}
.ep-kids-player__header-actions {
flex: 0 0 auto;
gap: 5px !important;
}
.ep-kids-player__progress {
grid-template-columns: auto minmax(0, 1fr) !important;
padding: 6px 10px !important;
}
.ep-kids-player__body {
min-height: 0;
padding: 8px !important;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.ep-kids-story-stage,
.ep-kids-scene,
.ep-kids-ending {
width: 100%;
max-width: 100%;
min-width: 0;
}
.ep-kids-scene,
.ep-kids-ending {
padding: 13px !important;
}
.ep-kids-scene__visual {
width: 100% !important;
max-width: 100% !important;
min-height: 150px !important;
padding: 12px !important;
}
.ep-kids-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.ep-kids-choice,
.ep-kids-choice:last-child:nth-child(odd) {
width: 100% !important;
min-width: 0 !important;
min-height: 116px !important;
grid-column: auto !important;
padding: 9px 6px !important;
}
.ep-kids-choice__picture {
width: 58px !important;
height: 58px !important;
font-size: 31px !important;
}
.ep-kids-choice strong {
font-size: 12px !important;
}
.ep-kids-player__tools {
width: 100%;
max-width: 100%;
padding:
6px
max(7px, env(safe-area-inset-right))
max(6px, env(safe-area-inset-bottom))
max(7px, env(safe-area-inset-left)) !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.ep-kids-player__tools > button,
.ep-kids-player__more {
flex: 0 0 auto;
}
.ep-kids-player__status {
padding:
5px
max(8px, env(safe-area-inset-right))
max(5px, env(safe-area-inset-bottom))
max(8px, env(safe-area-inset-left)) !important;
}
.ep-kids-modal {
padding: 0 !important;
}
.ep-kids-modal__dialog {
width: 100% !important;
max-width: 100% !important;
max-height: 100vh !important;
max-height: 100dvh !important;
padding:
max(12px, env(safe-area-inset-top))
max(12px, env(safe-area-inset-right))
max(12px, env(safe-area-inset-bottom))
max(12px, env(safe-area-inset-left)) !important;
border-radius: 0 !important;
}
} @media (max-width: 640px) {
.ep-touch-learn {
padding-inline: 7px !important;
overflow-x: clip;
}
.ep-touch-learn :where(
.ep-touch-hero,
.ep-touch-tabs,
.ep-touch-toolbar,
.ep-touch-mode-row,
.ep-touch-main,
.ep-touch-preview,
.ep-touch-board-wrap,
.ep-touch-grid,
.ep-touch-footer,
.ep-touch-parent-report,
.ep-touch-progress-sync
) {
width: 100%;
max-width: 100%;
min-width: 0;
}
.ep-touch-preview {
grid-template-columns: 78px minmax(0, 1fr) !important;
gap: 9px !important;
}
.ep-touch-preview-visual {
min-height: 78px !important;
font-size: 48px !important;
}
.ep-touch-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.ep-touch-card {
min-width: 0 !important;
padding-inline: 3px !important;
}
.ep-touch-modal {
padding: 0 !important;
}
.ep-touch-modal-card {
width: 100% !important;
max-width: 100% !important;
max-height: 100vh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
}
} @media (max-width: 900px) {
.ep-magic-modal {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
.ep-magic-modal__dialog {
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100vh !important;
height: 100svh !important;
height: 100dvh !important;
min-height: 0 !important;
padding:
max(6px, env(safe-area-inset-top))
max(7px, env(safe-area-inset-right))
max(6px, env(safe-area-inset-bottom))
max(7px, env(safe-area-inset-left)) !important;
gap: 6px !important;
}
.ep-magic-modal__head {
width: 100%;
min-height: 38px;
gap: 7px !important;
}
.ep-magic-modal__head > div {
flex: 1 1 auto;
min-width: 0;
}
.ep-magic-modal__head strong {
font-size: 16px !important;
}
.ep-magic-modal__head small {
overflow: hidden;
font-size: 10px !important;
line-height: 1.25 !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-magic-modal__close,
.ep-magic-modal__head > button.ep-magic-modal__close {
flex-basis: 38px !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
}
.ep-magic-modal__close span {
width: 34px !important;
height: 34px !important;
font-size: 24px !important;
line-height: 32px !important;
}
.ep-board-live-teacher {
width: 100%;
max-width: 100%;
grid-template-columns: 12px minmax(0, 1fr) !important;
gap: 6px !important;
padding: 6px !important;
}
.ep-board-live-teacher small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-board-live-teacher__actions {
grid-column: 1 / -1 !important;
display: flex !important;
width: 100% !important;
max-width: 100% !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 4px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-bottom: 2px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ep-board-live-teacher__actions button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 72px !important;
min-height: 30px !important;
padding: 5px 7px !important;
font-size: 9px !important;
white-space: nowrap !important;
}
.ep-whiteboard-tools {
width: 100% !important;
max-width: 100% !important;
min-height: 36px !important;
gap: 5px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 2px 0 4px !important;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ep-whiteboard-tools button {
flex: 0 0 auto !important;
min-height: 30px !important;
padding: 5px 8px !important;
font-size: 10px !important;
white-space: nowrap !important;
}
.ep-whiteboard-workspace {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
}
.ep-traditional-maths-board,
.ep-drawing-board {
max-width: 100% !important;
min-width: 0 !important;
}
.ep-board-history-head {
width: 100%;
max-width: 100%;
gap: 5px !important;
}
.ep-board-history-head > div {
min-width: 0;
gap: 4px !important;
}
.ep-board-history-head button {
min-width: 0 !important;
padding: 5px 7px !important;
font-size: 9px !important;
}
.ep-board-turn,
.ep-board-turn details,
.ep-board-turn summary,
.ep-board-turn__answer {
max-width: 100%;
min-width: 0;
}
.ep-board-turn summary {
padding: 7px !important;
}
.ep-board-turn__answer {
padding: 7px 8px 9px !important;
}
.ep-homework-dialog,
.ep-highlights-dialog {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
} .ep-magic-modal[data-board-subject="english"] .ep-board-mobile-panel {
flex: 0 0 auto;
min-width: 0;
}
.ep-magic-modal[data-board-subject="english"] .ep-whiteboard-workspace {
display: block !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
padding-bottom: 0 !important;
}
.ep-magic-modal[data-board-subject="english"] .ep-traditional-maths-board {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 8px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
.ep-magic-modal[data-board-subject="english"] .ep-board-history-head {
flex-direction: row !important;
align-items: center !important;
margin-bottom: 6px !important;
}
.ep-magic-modal[data-board-subject="english"] .ep-board-history-head > div {
display: flex !important;
width: auto !important;
flex: 0 1 auto;
overflow-x: auto;
}
.ep-magic-modal[data-board-subject="english"] .ep-traditional-maths-board ol {
padding-left: 0 !important;
font-size: clamp(14px, 4.1vw, 17px) !important;
line-height: 1.5 !important;
} .ep-magic-modal[data-board-subject="maths"] .ep-board-maths-input {
width: 100%;
max-width: 100%;
padding: 7px !important;
}
.ep-magic-modal[data-board-subject="maths"] .ep-board-maths-input > div {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
}
.ep-magic-modal[data-board-subject="maths"] .ep-board-maths-input input {
grid-column: 1 / -1 !important;
}
.ep-magic-modal[data-board-subject="maths"] .ep-board-maths-input button {
min-width: 0;
min-height: 36px;
padding: 6px 5px;
font-size: 10px;
}
} @media (max-width: 359px) {
.ep-kids-highlight-grid,
.ep-kids-story-grid,
.ep-kids-gallery,
.ep-kids-reward-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.ep-kids-hero {
grid-template-columns: 48px minmax(0, 1fr) !important;
padding: 10px !important;
}
.ep-kids-guide {
width: 46px !important;
height: 46px !important;
}
.ep-kids-section-nav button,
.ep-kids-game-picker > button {
font-size: 10px !important;
}
.ep-touch-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ep-magic-modal__dialog {
padding-inline: 5px !important;
}
.ep-board-live-teacher__actions button {
min-width: 66px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ep-kids-world *,
.ep-touch-learn *,
.ep-magic-modal * {
scroll-behavior: auto !important;
}
} .ep-glass-close,.ep-magic-modal__close,[data-ep-whiteboard-close],[data-ep-homework-close],[data-ep-highlights-close],.ep-kids-modal__close,[data-ep-kids-profile-close],.ep-touch-modal-close,[data-ai-study-modal-close],[data-ai-fs-close][aria-label],[data-ep-continue-action="close"],[data-ep-continue-action="close-mini"]{
width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;min-height:34px!important;max-height:34px!important;padding:0!important;margin:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.56)!important;background:linear-gradient(145deg,rgba(255,80,92,.94),rgba(176,17,43,.9))!important;color:#fff!important;box-shadow:0 8px 18px rgba(167,20,43,.25),inset 0 1px 0 rgba(255,255,255,.5)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;font:900 22px/1 Arial,sans-serif!important;display:grid!important;place-items:center!important;cursor:pointer!important
}
.ep-magic-modal__close span{width:auto!important;height:auto!important;font:900 22px/1 Arial,sans-serif!important}
.ep-mobile-answer-viewer__close,[data-ep-full-answer-close],[data-ep-kids-player-close][aria-label]{width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;min-height:34px!important;max-height:34px!important;padding:0!important;margin:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.56)!important;background:linear-gradient(145deg,rgba(255,80,92,.94),rgba(176,17,43,.9))!important;color:#fff!important;box-shadow:0 8px 18px rgba(167,20,43,.25),inset 0 1px 0 rgba(255,255,255,.5)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;font:900 22px/1 Arial,sans-serif!important;display:grid!important;place-items:center!important;cursor:pointer!important}.ep-magic-page-nav {
position: sticky;
top: 0;
z-index: 14;
display: grid;
grid-template-columns: 34px auto 34px minmax(130px, 1fr) auto;
align-items: center;
gap: 6px;
margin: 0 0 9px;
padding: 6px;
border: 1px solid #c9dcf4;
border-radius: 12px;
background: rgba(248, 252, 255, .97);
box-shadow: 0 5px 14px rgba(26, 72, 122, .07);
font-family: Inter, system-ui, sans-serif;
}
.ep-magic-page-nav[hidden] {
display: none !important;
}
.ep-magic-page-nav button,
.ep-magic-page-nav select {
min-width: 0;
min-height: 32px;
border: 1px solid #b9d1ee;
border-radius: 9px;
background: #fff;
color: #174675;
font: 800 10px/1.2 Inter, system-ui, sans-serif;
}
.ep-magic-page-nav button {
padding: 5px 8px;
cursor: pointer;
}
.ep-magic-page-nav button:disabled {
opacity: .42;
cursor: not-allowed;
}
.ep-magic-page-nav select {
width: 100%;
padding: 5px 27px 5px 8px;
}
.ep-magic-page-nav > span {
color: #173c69;
font: 900 10px/1.2 Inter, system-ui, sans-serif;
white-space: nowrap;
}
.ep-magic-teacher-dock {
position: relative;
display: grid;
min-width: 158px;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 7px;
margin-left: auto;
padding: 5px 9px 5px 5px;
border: 1px solid #c3dcf7;
border-radius: 999px;
background: linear-gradient(135deg, #fff, #eef7ff);
overflow: hidden;
font-family: Inter, system-ui, sans-serif;
}
.ep-magic-teacher-avatar {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, #2ba7f3, #7851f2);
font-size: 19px;
box-shadow: 0 5px 12px rgba(42, 100, 200, .22);
}
.ep-magic-teacher-dock strong,
.ep-magic-teacher-dock small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-magic-teacher-dock strong {
color: #173c69;
font-size: 10px;
}
.ep-magic-teacher-dock small {
margin-top: 2px;
color: #58728f;
font-size: 8px;
}
.ep-magic-teacher-beam {
position: absolute;
right: -38px;
bottom: 7px;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgba(33, 108, 221, 0), #216cdd);
opacity: 0;
transform: rotate(8deg);
transform-origin: right center;
}
.ep-magic-teacher-dock.is-speaking {
border-color: #8058f1;
box-shadow: 0 0 0 3px rgba(119, 80, 240, .1);
}
.ep-magic-teacher-dock.is-speaking .ep-magic-teacher-avatar {
animation: epMagicTeacherTalk .52s ease-in-out infinite alternate;
}
.ep-magic-teacher-dock.is-speaking .ep-magic-teacher-beam {
opacity: 1;
animation: epMagicBeam 1s ease-in-out infinite alternate;
}
.ep-magic-teacher-dock.is-listening {
border-color: #27a66c;
background: #effff7;
}
@keyframes epMagicTeacherTalk {
to { transform: translateY(-2px) rotate(2deg); }
}
@keyframes epMagicBeam {
to { transform: rotate(-7deg); }
}
.ep-magic-board-pointer {
position: absolute;
z-index: 18;
display: block;
width: 46px;
height: 24px;
opacity: 0;
pointer-events: none;
transition: top .22s ease, left .22s ease, opacity .15s ease;
}
.ep-magic-board-pointer.is-active {
opacity: 1;
}
.ep-magic-board-pointer i {
position: absolute;
right: 0;
bottom: 5px;
width: 36px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #195db7 0 72%, #f4c34e 72% 92%, #28374b 92%);
box-shadow: 0 2px 3px rgba(17, 45, 78, .22);
transform: rotate(-25deg);
}
.ep-magic-board-pointer b {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 15px;
border-radius: 55% 48% 50% 60%;
background: linear-gradient(145deg, #f5c6a2, #dc966d);
transform: rotate(12deg);
}
.ep-board-spoken-word {
display: inline;
border-radius: 4px;
transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ep-board-spoken-word.is-current-word,
.ep-board-step-arrive.is-writing {
background: linear-gradient(transparent 62%, rgba(255, 221, 79, .7) 62%);
color: #0d57ad;
}
.ep-magic-live-subtitle {
position: sticky;
top: 48px;
z-index: 12;
margin: 0 0 8px;
padding: 7px 10px;
border: 1px solid #c9def7;
border-radius: 10px;
background: rgba(239, 247, 255, .97);
color: #173f70;
font: 800 10px/1.4 Inter, system-ui, sans-serif;
} .ep-magic-modal[data-board-subject="maths"] .ep-whiteboard-workspace,
.ep-magic-modal[data-board-subject="english"] .ep-whiteboard-workspace {
grid-template-columns: minmax(0, 1fr) !important;
}
.ep-magic-modal[data-board-subject="maths"] .ep-traditional-maths-board {
width: 100% !important;
min-height: 0 !important;
max-height: none !important;
height: 100% !important;
}
.ep-board-scratch {
min-width: 0;
border: 1px solid #cbdcf2;
border-radius: 14px;
background: #f8fbff;
overflow: hidden;
}
.ep-magic-modal__dialog {
position: relative;
}
.ep-board-scratch:not([open]) {
display: none !important;
}
.ep-board-scratch[open] {
position: absolute;
z-index: 60;
inset: 82px 18px 54px;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: 0 22px 65px rgba(14, 35, 67, .3);
}
.ep-board-scratch > summary {
flex: 0 0 auto;
min-height: 40px;
padding: 9px 12px;
color: #174675;
font: 900 11px/1.35 Inter, system-ui, sans-serif;
cursor: pointer;
}
.ep-board-scratch .ep-whiteboard-tools {
padding: 7px 8px;
border-top: 1px solid #dce8f6;
background: #fff;
}
.ep-board-scratch .ep-drawing-board {
flex: 1 1 auto;
min-height: 46vh !important;
border: 0 !important;
border-top: 1px solid #dce8f6 !important;
border-radius: 0 !important;
}
.ep-board-scratch .ep-drawing-board canvas {
min-height: 46vh !important;
}
.ep-magic-modal[data-board-subject="english"] .ep-board-scratch {
display: none !important;
}
.ep-magic-tools-drawer {
flex: 0 0 auto;
min-width: 0;
border: 1px solid #cbdcf2;
border-radius: 13px;
background: #f7fbff;
font-family: Inter, system-ui, sans-serif;
}
.ep-magic-tools-drawer > summary {
min-height: 38px;
padding: 9px 12px;
color: #174675;
font-size: 11px;
font-weight: 900;
cursor: pointer;
}
.ep-magic-tools-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
padding: 0 9px 9px;
}
.ep-magic-shared-controls {
display: flex;
gap: 6px;
padding: 0 9px 7px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.ep-magic-shared-controls button {
flex: 0 0 auto;
min-height: 32px;
border: 1px solid #bad2ee;
border-radius: 10px;
background: #fff;
color: #174675;
padding: 5px 9px;
font: 800 10px/1.2 Inter, system-ui, sans-serif;
cursor: pointer;
}
.ep-magic-shared-controls button.is-active {
border-color: #276de1;
background: #e8f2ff;
color: #1557ad;
}
.ep-magic-tools-grid button,
.ep-magic-tool-output button {
min-width: 0;
min-height: 34px;
border: 1px solid #bad2ee;
border-radius: 10px;
background: #fff;
color: #174675;
padding: 6px 8px;
font: 800 10px/1.25 Inter, system-ui, sans-serif;
cursor: pointer;
overflow-wrap: anywhere;
}
.ep-magic-modal[data-board-subject="english"] .ep-magic-tools-grid--maths,
.ep-magic-modal[data-board-subject="maths"] .ep-magic-tools-grid--english {
display: none !important;
}
.ep-magic-tool-output {
margin: 0 9px 9px;
padding: 11px;
border: 1px solid #d5e4f6;
border-radius: 12px;
background: #fff;
color: #173c69;
font: 12px/1.55 Inter, system-ui, sans-serif;
}
.ep-magic-tool-output:empty {
display: none;
}
.ep-magic-tool-output h4 {
margin: 0 0 8px;
color: #123d72;
font-size: 14px;
}
.ep-magic-tool-output p {
margin: 7px 0;
}
.ep-magic-bottom-bar {
display: grid;
flex: 0 0 auto;
grid-template-columns: .7fr .7fr 1.35fr;
gap: 7px;
}
.ep-magic-bottom-bar button {
min-width: 0;
min-height: 38px;
border: 1px solid #bad2ee;
border-radius: 11px;
background: #fff;
color: #174675;
padding: 7px 9px;
font: 900 10px/1.25 Inter, system-ui, sans-serif;
cursor: pointer;
}
.ep-magic-bottom-bar button:first-child {
border-color: #276de1;
background: linear-gradient(135deg, #279fea, #704ef3);
color: #fff;
}
.ep-magic-practice-host {
margin-top: 9px;
font-family: Inter, system-ui, sans-serif;
}
.ep-magic-practice {
position: relative;
padding: 10px;
border: 1px solid #c7ddf5;
border-radius: 12px;
background: linear-gradient(135deg, #f5fbff, #fffaf0);
overflow: hidden;
}
.ep-magic-practice > div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ep-magic-practice span {
color: #6c49d9;
font-size: 10px;
font-weight: 900;
}
.ep-magic-practice strong {
color: #173c69;
font-size: 11px;
}
.ep-magic-practice p {
margin: 7px 0;
color: #415c78;
font-size: 11px;
}
.ep-magic-practice > div:nth-of-type(2) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.ep-magic-practice input {
min-width: 0;
width: 100%;
min-height: 36px;
border: 1px solid #bad2ee;
border-radius: 9px;
background: #fff;
color: #173c69;
padding: 7px 9px;
}
.ep-magic-practice button {
min-height: 36px;
border: 0;
border-radius: 9px;
background: #1768dc;
color: #fff;
padding: 6px 12px;
font-weight: 900;
cursor: pointer;
}
.ep-magic-practice small {
display: block;
min-height: 18px;
margin-top: 6px;
color: #5d7188;
font-weight: 800;
}
.ep-magic-practice small.is-correct {
color: #12834c;
}
.ep-magic-practice small.is-hint {
color: #9a5b00;
}
.ep-magic-practice-host.is-rewarding::after {
content: "★  ✨  ★";
position: absolute;
z-index: 5;
left: 50%;
top: 50%;
color: #f4b400;
font-size: 25px;
pointer-events: none;
animation: epMagicReward 1.35s ease-out both;
}
@keyframes epMagicReward {
from { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
35% { opacity: 1; }
to { opacity: 0; transform: translate(-50%, -42px) scale(1.2); }
}
.ep-magic-auto-visual {
margin: 9px 0 2px;
padding: 9px;
border: 1px dashed #bfd5ef;
border-radius: 11px;
background: rgba(245, 250, 255, .86);
font-family: Inter, system-ui, sans-serif !important;
}
.ep-magic-auto-visual h4 {
margin: 0 0 6px;
color: #174675;
font-size: 12px;
}
.ep-grammar-colour-line {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
padding: 9px;
border-radius: 10px;
background: #f8fbff;
font-size: 14px;
font-weight: 900;
}
.ep-grammar-colour-line span {
padding: 3px 6px;
border-radius: 6px;
}
.ep-grammar-colour-line .is-subject {
background: #dceaff;
color: #125bb4;
}
.ep-grammar-colour-line .is-verb {
background: #dcf8e9;
color: #087343;
}
.ep-grammar-colour-line .is-object {
background: #eee4ff;
color: #6330a5;
}
.ep-grammar-colour-line .is-punctuation {
padding-inline: 1px;
background: transparent;
color: #42556c;
}
.ep-grammar-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.ep-grammar-legend span {
color: #506983;
font-size: 9px;
font-weight: 800;
}
.ep-grammar-legend span::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 50%;
background: #3b82d5;
}
.ep-grammar-legend span:nth-child(2)::before { background: #16a064; }
.ep-grammar-legend span:nth-child(3)::before { background: #8754c2; }
.ep-live-correction {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.ep-live-correction del {
border-radius: 7px;
background: #ffe4e4;
color: #b3222b;
padding: 5px 8px;
text-decoration-thickness: 2px;
}
.ep-live-correction ins {
border-radius: 7px;
background: #e1f9e9;
color: #087343;
padding: 5px 8px;
text-decoration: none;
animation: epCorrectWord .65s ease both;
}
@keyframes epCorrectWord {
from { opacity: 0; transform: translateX(-12px); }
}
.ep-pronunciation-word {
color: #4b34aa;
font-size: clamp(20px, 4vw, 30px);
font-weight: 900;
letter-spacing: .06em;
}
.ep-sentence-built {
display: flex;
min-height: 46px;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px;
padding: 7px;
border: 1px dashed #9bbfe9;
border-radius: 9px;
background: #f7fbff;
}
.ep-sentence-pieces,
.ep-picture-words {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 7px 0;
}
.ep-picture-meaning {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 6px 10px;
margin-top: 8px;
padding: 9px;
border-radius: 10px;
background: #f4f9ff;
}
.ep-picture-meaning span {
grid-row: 1 / 3;
font-size: 38px;
}
.ep-picture-meaning p {
margin: 0;
}
.ep-magic-tool-output textarea {
display: block;
width: 100%;
min-height: 62px;
margin: 7px 0;
border: 1px solid #bad2ee;
border-radius: 9px;
padding: 8px;
}
.ep-conversation-subtitles {
max-height: 180px;
overflow: auto;
}
.ep-conversation-subtitles p {
width: fit-content;
max-width: 90%;
padding: 6px 9px;
border-radius: 9px;
}
.ep-conversation-subtitles .is-student {
margin-left: auto;
background: #e5f1ff;
}
.ep-conversation-subtitles .is-teacher {
background: #f0eaff;
}
.ep-magic-column-math {
display: grid;
width: min(190px, 100%);
grid-template-columns: 1fr;
margin: 8px auto;
color: #173c69;
font: 800 22px/1.35 "Cambria Math", serif;
text-align: right;
}
.ep-magic-column-math small {
color: #d97706;
font: 800 10px/1.2 Inter, system-ui, sans-serif;
}
.ep-magic-column-math i {
height: 2px;
background: #173c69;
}
.ep-magic-column-math strong {
color: #087343;
}
.ep-magic-long-division {
position: relative;
width: min(260px, 100%);
min-height: 110px;
margin: 12px auto;
color: #173c69;
font: 800 26px/1.2 "Cambria Math", serif;
}
.ep-magic-long-division span {
position: absolute;
left: 15px;
top: 45px;
}
.ep-magic-long-division b {
position: absolute;
left: 65px;
top: 42px;
padding: 5px 20px 5px 10px;
border-top: 3px solid #173c69;
border-left: 3px solid #173c69;
border-radius: 14px 0 0;
}
.ep-magic-long-division strong {
position: absolute;
left: 82px;
top: 3px;
color: #6f42c1;
}
.ep-magic-long-division i {
position: absolute;
left: 65px;
bottom: 0;
color: #60758d;
font: 800 11px/1.2 Inter, system-ui, sans-serif;
}
.ep-magic-factor-ladder {
display: grid;
width: min(210px, 100%);
margin: 8px auto;
}
.ep-magic-factor-ladder span {
display: grid;
grid-template-columns: 55px 1fr;
}
.ep-magic-factor-ladder b,
.ep-magic-factor-ladder i {
padding: 5px 9px;
color: #173c69;
font-style: normal;
text-align: right;
}
.ep-magic-factor-ladder b {
border-right: 2px solid #173c69;
}
.ep-magic-factor-ladder i {
text-align: left;
}
.ep-magic-fraction-pizza {
display: grid;
width: 82px;
height: 82px;
margin: 8px auto;
place-items: center;
border: 4px solid #d27c23;
border-radius: 50%;
background: conic-gradient(#f6a73b var(--ep-fill), #fff1d5 0);
}
.ep-magic-fraction-pizza span {
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14));
font-size: 46px;
}
.ep-magic-number-line {
position: relative;
display: grid;
grid-template-columns: repeat(11, 1fr);
margin: 38px 8px 30px;
border-top: 3px solid #173c69;
}
.ep-magic-number-line span {
position: relative;
}
.ep-magic-number-line i {
position: absolute;
left: 50%;
top: -8px;
width: 2px;
height: 15px;
background: #173c69;
}
.ep-magic-number-line b {
position: absolute;
left: 50%;
top: 11px;
color: #173c69;
font-size: 9px;
transform: translateX(-50%);
}
.ep-magic-number-line em {
position: absolute;
top: -26px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ee5c4d;
box-shadow: 0 0 0 5px rgba(238, 92, 77, .13);
transform: translateX(-50%);
animation: epNumberPoint .8s ease both;
}
@keyframes epNumberPoint {
from { left: 50%; opacity: .2; }
}
.ep-magic-geometry,
.ep-magic-graph {
display: block;
width: min(420px, 100%);
max-height: 190px;
margin: 6px auto;
border-radius: 10px;
background: #fff;
}
.ep-magic-geometry line,
.ep-magic-geometry path,
.ep-magic-graph path {
fill: none;
stroke: #6f42c1;
stroke-width: 4;
}
.ep-magic-geometry path {
stroke-width: 3;
}
.ep-magic-geometry text,
.ep-magic-graph text {
fill: #5a328f;
font: 800 14px Inter, system-ui, sans-serif;
}
.ep-magic-graph path:first-child {
stroke: #8ca2bb;
stroke-width: 2;
}
.ep-magic-graph .plot {
stroke: #1768dc;
}
.ep-magic-graph circle {
fill: #ee5c4d;
}
.ep-magic-mistake-line {
border-left: 4px solid #ef9e24;
background: #fff7df;
padding: 8px 10px;
animation: epMistakeGlow .85s ease-in-out 2 alternate;
}
@keyframes epMistakeGlow {
to { box-shadow: 0 0 0 5px rgba(239, 158, 36, .13); }
}
.is-magic-replaying .ep-board-step-arrive,
.is-magic-replaying .ep-board-question,
.is-magic-replaying .ep-math-step {
animation: epMagicReplay 1s ease both;
}
@keyframes epMagicReplay {
from { opacity: .2; clip-path: inset(0 100% 0 0); }
to { opacity: 1; clip-path: inset(0 0 0 0); }
} .ep-math-whiteboard--classroom {
position: relative !important;
}
.ep-math-whiteboard--classroom > .ep-magic-page-nav {
top: 0;
}
.ep-math-classroom-board > .ep-magic-tools-drawer {
margin-top: 8px;
}
.ep-math-writing-pen {
position: absolute !important;
z-index: 20 !important;
left: 14px !important;
right: auto !important;
width: 48px !important;
height: 28px !important;
opacity: 0;
font-size: 0 !important;
pointer-events: none;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
transition: top .28s ease !important;
}
.ep-math-writing-pen::before {
content: "";
position: absolute;
left: 2px;
top: 15px;
width: 43px;
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #195db7 0 72%, #e5edf7 72% 88%, #26374b 88%);
transform: rotate(-24deg);
transform-origin: right center;
}
.ep-math-writing-pen::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 25px;
height: 18px;
border-radius: 55% 45% 58% 42%;
background: linear-gradient(145deg, #f5c6a2, #dc966d);
box-shadow: inset -3px -2px 0 rgba(119, 68, 40, .11);
transform: rotate(18deg);
}
.ep-math-writing-pen.is-writing {
opacity: 1 !important;
animation: epHumanWritingTravel var(--ep-pen-duration, 900ms) linear 1 !important;
}
@keyframes epHumanWritingTravel {
0% { transform: translateX(0) translateY(0); }
20% { transform: translateX(var(--ep-pen-travel-20, 48px)) translateY(2px) rotate(1deg); }
45% { transform: translateX(var(--ep-pen-travel-45, 108px)) translateY(-1px) rotate(-1deg); }
70% { transform: translateX(var(--ep-pen-travel-70, 168px)) translateY(2px) rotate(1deg); }
100% { transform: translateX(var(--ep-pen-travel, 240px)) translateY(0); }
} @media (max-width: 760px) {
.ep-kids-player__shell {
overflow: visible !important;
}
.ep-kids-player__tools {
position: relative !important;
z-index: 30 !important;
display: grid !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 5px !important;
padding: 6px max(7px, env(safe-area-inset-right)) 6px max(7px, env(safe-area-inset-left)) !important;
overflow: visible !important;
}
.ep-kids-player__tools > button,
.ep-kids-player__more {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 42px !important;
margin: 0 !important;
}
.ep-kids-player__tools > button {
display: grid !important;
place-items: center !important;
padding: 5px 3px !important;
font-size: 9px !important;
line-height: 1.15 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.ep-kids-player__more {
position: static !important;
border-radius: 11px !important;
background: #f8faff !important;
}
.ep-kids-player__more > summary {
display: grid !important;
min-height: 42px !important;
place-items: center !important;
padding: 5px 3px !important;
color: #17386f !important;
font-size: 9px !important;
line-height: 1.15 !important;
text-align: center !important;
overflow-wrap: anywhere !important;
list-style: none !important;
}
.ep-kids-player__more > summary::-webkit-details-marker {
display: none;
}
.ep-kids-player__more > div {
position: absolute !important;
z-index: 100 !important;
left: max(7px, env(safe-area-inset-left)) !important;
right: max(7px, env(safe-area-inset-right)) !important;
bottom: calc(100% + 7px) !important;
display: grid !important;
max-height: min(48vh, 340px) !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
padding: 10px !important;
border: 1px solid #cbdcf4 !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, .98) !important;
box-shadow: 0 18px 50px rgba(24, 49, 89, .25) !important;
overflow: auto !important;
}
.ep-kids-player__more:not([open]) > div {
display: none !important;
}
.ep-kids-player__more > div button {
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
padding: 6px !important;
font-size: 10px !important;
line-height: 1.2 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
}
@media (max-width: 900px) {
.ep-magic-modal__dialog {
gap: 6px !important;
}
.ep-magic-modal[data-board-subject="maths"] .ep-board-mobile-panel--question:not([open]),
.ep-magic-modal[data-board-subject="maths"] .ep-board-mobile-panel--teacher:not([open]) {
flex: 0 0 auto !important;
}
.ep-magic-modal .ep-whiteboard-workspace {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
.ep-magic-modal .ep-traditional-maths-board {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 7px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.ep-magic-modal[data-board-subject="maths"] .ep-board-scratch {
position: absolute;
z-index: 50;
inset: 62px 7px 50px;
max-height: none;
box-shadow: 0 18px 48px rgba(14, 35, 67, .25);
overflow: auto;
}
.ep-magic-tools-drawer {
position: relative;
z-index: 35;
}
.ep-magic-tools-drawer > summary {
min-height: 35px;
padding: 7px 10px;
}
.ep-magic-tools-grid {
display: flex;
gap: 6px;
padding: 0 7px 7px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.ep-magic-tools-grid button {
flex: 0 0 122px;
}
.ep-magic-tool-output {
max-height: 37vh;
margin: 0 7px 7px;
overflow: auto;
}
.ep-magic-bottom-bar {
position: sticky;
z-index: 34;
bottom: 0;
}
.ep-magic-page-nav {
grid-template-columns: 32px auto 32px minmax(0, 1fr);
gap: 4px;
padding: 4px;
}
.ep-magic-page-nav [data-ep-magic-download] {
grid-column: 1 / -1;
min-height: 28px;
}
.ep-magic-teacher-dock {
min-width: 0;
grid-template-columns: 29px minmax(0, 1fr);
padding: 3px 7px 3px 3px;
}
.ep-magic-teacher-avatar {
width: 29px;
height: 29px;
font-size: 16px;
}
.ep-board-live-teacher .ep-magic-teacher-dock {
grid-column: 1 / -1;
width: 100%;
margin-top: 4px;
}
.ep-math-classroom-board__head .ep-magic-teacher-dock {
width: auto;
max-width: 170px;
}
.ep-math-whiteboard--classroom {
min-height: 60vh !important;
max-height: 70vh !important;
}
.ep-math-board-toolbar,
.ep-math-board-footer {
width: 100%;
max-width: 100%;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ep-math-board-toolbar button,
.ep-math-board-footer button {
flex: 0 0 auto !important;
min-height: 34px !important;
padding: 6px 9px !important;
font-size: 9px !important;
}
}
@media (max-width: 480px) {
.ep-magic-page-nav {
top: -1px;
}
.ep-magic-page-nav select,
.ep-magic-page-nav button,
.ep-magic-page-nav > span {
font-size: 9px;
}
.ep-magic-bottom-bar button {
min-height: 36px;
padding: 5px;
font-size: 9px;
}
.ep-magic-practice > div:first-child {
align-items: flex-start;
flex-direction: column;
}
.ep-magic-practice > div:nth-of-type(2) {
grid-template-columns: minmax(0, 1fr) 65px;
}
.ep-math-classroom-board {
padding: 6px !important;
}
.ep-math-whiteboard--classroom {
min-height: 62vh !important;
max-height: 72vh !important;
padding: 9px 7px 58px !important;
}
.ep-kids-player__tools > button,
.ep-kids-player__more > summary {
font-size: 8px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ep-magic-board-pointer,
.ep-math-writing-pen,
.ep-magic-teacher-avatar,
.ep-magic-teacher-beam,
.ep-magic-auto-visual * {
animation: none !important;
transition: none !important;
}
} .ep-magic-modal .ep-smart-focus-target{
outline:3px solid rgba(35,111,219,.28)!important;
outline-offset:3px!important;
border-radius:10px!important;
} .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{
min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-intake{
display:flex;
flex:1 1 auto;
min-width:0;
min-height:0;
flex-direction:column;
justify-content:center;
gap:14px;
width:min(860px,100%);
margin:auto;
padding:clamp(16px,3vw,34px);
border:1px solid #d6e4f5;
border-radius:22px;
background:#fff;
box-shadow:0 14px 36px rgba(20,53,91,.10);
overflow:auto;
}
.ep-magic-modal[data-board-stage="lesson"] .ep-board-intake{
display:none!important;
}
.ep-magic-modal[data-board-stage="intake"] .ep-board-lesson-shell{
display:none!important;
}
.ep-magic-modal[data-board-stage="lesson"] .ep-board-lesson-shell{
display:flex!important;
}
.ep-board-intake__hero{
display:flex;
align-items:center;
gap:14px;
}
.ep-board-intake__icon{
display:grid;
flex:0 0 58px;
width:58px;
height:58px;
place-items:center;
border-radius:18px;
background:#edf5ff;
font-size:28px;
}
.ep-board-intake__hero strong{
display:block;
color:#142f53;
font-size:clamp(20px,3vw,30px);
line-height:1.2;
}
.ep-board-intake__hero p{
margin:5px 0 0;
color:#5c728c;
font-size:14px;
line-height:1.5;
}
.ep-board-intake__label{
color:#244d78;
font-size:13px;
font-weight:900;
}
.ep-board-intake textarea[data-ep-board-question]{
display:block!important;
width:100%!important;
min-width:0!important;
min-height:150px!important;
resize:vertical!important;
padding:16px!important;
border:2px solid #bfd3ee!important;
border-radius:16px!important;
background:#fbfdff!important;
color:#142f53!important;
font:700 17px/1.55 Inter,system-ui,sans-serif!important;
box-shadow:none!important;
outline:none!important;
}
.ep-board-intake textarea[data-ep-board-question]:focus{
border-color:#2b73df!important;
box-shadow:0 0 0 4px rgba(43,115,223,.12)!important;
}
.ep-board-intake textarea[data-ep-board-question].is-input-needed{
border-color:#dc3e50!important;
box-shadow:0 0 0 4px rgba(220,62,80,.12)!important;
}
.ep-board-intake__actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
}
.ep-board-intake__actions button{
min-width:0!important;
min-height:48px!important;
padding:10px 8px!important;
border:1px solid #bdd2ed!important;
border-radius:13px!important;
background:#fff!important;
color:#174675!important;
font-size:13px!important;
font-weight:900!important;
cursor:pointer;
}
.ep-board-intake__actions button.is-primary{
border-color:#276fe0!important;
background:linear-gradient(135deg,#279fea,#704ef3)!important;
color:#fff!important;
}
.ep-board-intake__note{
color:#62778e;
font-size:12px;
line-height:1.45;
text-align:center;
}
.ep-board-lesson-shell{
flex:1 1 auto;
min-width:0;
min-height:0;
flex-direction:column;
gap:8px;
overflow:hidden;
}
.ep-board-lesson-toolbar{
display:flex!important;
flex:0 0 auto;
align-items:center;
justify-content:space-between;
gap:10px;
min-width:0;
padding:7px 9px;
border:1px solid #d2e1f3;
border-radius:14px;
background:#fff;
}
.ep-board-lesson-status{
display:grid;
min-width:180px;
grid-template-columns:12px minmax(0,1fr);
align-items:center;
gap:7px;
}
.ep-board-lesson-status strong,.ep-board-lesson-status small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ep-board-lesson-status strong{color:#183f68;font-size:12px}
.ep-board-lesson-status small{margin-top:2px;color:#657a91;font-size:10px}
.ep-board-lesson-actions{
display:flex;
min-width:0;
gap:6px;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:thin;
-webkit-overflow-scrolling:touch;
}
.ep-board-lesson-actions button{
flex:0 0 auto!important;
min-height:34px!important;
padding:6px 10px!important;
border:1px solid #c5d7ed!important;
border-radius:10px!important;
background:#fff!important;
color:#174675!important;
font-size:10px!important;
font-weight:900!important;
white-space:nowrap!important;
cursor:pointer;
}
.ep-board-lesson-actions button.is-primary{
border-color:#286fdc!important;
background:#1768dc!important;
color:#fff!important;
}
.ep-board-lesson-actions .ep-board-end-session{
border-color:#f0c5ca!important;
color:#a62a3a!important;
background:#fff8f9!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-whiteboard-workspace{
position:relative!important;
display:block!important;
flex:1 1 auto!important;
min-width:0!important;
min-height:0!important;
overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-traditional-maths-board{
width:100%!important;
height:100%!important;
min-width:0!important;
min-height:0!important;
max-height:none!important;
padding:14px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-scratch{
position:absolute!important;
z-index:70!important;
inset:8px!important;
display:none!important;
margin:0!important;
max-height:none!important;
overflow:auto!important;
background:#fff!important;
box-shadow:0 18px 48px rgba(14,35,67,.25)!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-scratch[open]{
display:block!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-live-subtitle{
position:relative!important;
top:auto!important;
z-index:2!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav{
margin:0 0 10px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] [data-ep-whiteboard-steps]{
position:relative!important;
z-index:1!important;
margin-top:0!important;
padding-bottom:30px!important;
overflow:visible!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__answer{
position:relative!important;
max-width:100%!important;
min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__steps{
padding-left:24px!important;
font-size:clamp(16px,2.1vw,20px)!important;
line-height:1.58!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-tools-drawer,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar{
flex:0 0 auto!important;
}
@media(max-width:900px){
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{
height:100dvh!important;
max-height:none!important;
gap:6px!important;
overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-intake{
width:100%!important;
justify-content:flex-start!important;
margin:0!important;
padding:16px 12px!important;
border-radius:16px!important;
overflow-y:auto!important;
}
.ep-board-intake__hero{
align-items:flex-start;
gap:10px;
}
.ep-board-intake__icon{
flex-basis:46px;
width:46px;
height:46px;
border-radius:14px;
font-size:23px;
}
.ep-board-intake__hero strong{font-size:20px}
.ep-board-intake__hero p{font-size:12px}
.ep-board-intake textarea[data-ep-board-question]{
min-height:30vh!important;
max-height:42vh!important;
font-size:16px!important;
}
.ep-board-intake__actions{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.ep-board-intake__actions button{
min-height:50px!important;
font-size:12px!important;
}
.ep-board-lesson-toolbar{
display:block!important;
padding:6px!important;
border-radius:12px!important;
}
.ep-board-lesson-status{
width:100%;
min-width:0;
margin-bottom:5px;
}
.ep-board-lesson-actions{
width:100%;
gap:5px;
}
.ep-board-lesson-actions button{
min-height:32px!important;
padding:5px 8px!important;
font-size:9px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-whiteboard-workspace{
flex:1 1 auto!important;
min-height:0!important;
overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-traditional-maths-board{
height:100%!important;
min-height:0!important;
max-height:none!important;
padding:8px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head{
margin-bottom:6px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head h3{
font-size:14px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav{
position:relative!important;
top:auto!important;
grid-template-columns:30px auto 30px minmax(0,1fr)!important;
margin-bottom:8px!important;
padding:4px!important;
box-shadow:none!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-live-subtitle{
position:relative!important;
top:auto!important;
margin-bottom:6px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__steps{
padding-left:20px!important;
font-size:clamp(15px,4.3vw,18px)!important;
line-height:1.52!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-tools-drawer>summary{
min-height:34px!important;
padding:6px 9px!important;
font-size:11px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
padding-top:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar button{
min-width:0!important;
min-height:38px!important;
padding:6px 4px!important;
font-size:9px!important;
white-space:normal!important;
}
}
@media(max-width:420px){
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__head small{
display:none!important;
}
.ep-board-intake textarea[data-ep-board-question]{
min-height:27vh!important;
}
.ep-board-lesson-status small{
max-width:78vw;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav [data-ep-magic-download]{
grid-column:1/-1!important;
}
} .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__dialog{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__head,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-toolbar,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-tools-drawer,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-bottom-bar{
flex:0 0 auto!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-shell{
display:flex!important;
flex:1 1 0!important;
width:100%!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-whiteboard-workspace{
position:relative!important;
display:block!important;
flex:1 1 0!important;
width:100%!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-traditional-maths-board{
position:absolute!important;
inset:0!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:100%!important;
max-width:none!important;
max-height:none!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
}
.ep-magic-modal [data-ep-view-full-answer][hidden],
.ep-math-teacher [data-ep-view-full-answer][hidden]{
display:none!important;
}
.ep-full-answer-viewer{
position:fixed;
inset:0;
z-index:1000005;
display:grid;
place-items:center;
padding:12px;
background:rgba(4,14,30,.84);
}
.ep-full-answer-viewer[hidden]{display:none!important}
.ep-full-answer-viewer__dialog{
display:flex;
width:min(1180px,100%);
height:min(94dvh,940px);
min-width:0;
min-height:0;
flex-direction:column;
overflow:hidden;
border:1px solid #d3e1f1;
border-radius:22px;
background:#f8fbff;
box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.ep-full-answer-viewer__head{
display:flex;
flex:0 0 auto;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:12px 14px;
border-bottom:1px solid #dbe7f5;
background:#fff;
}
.ep-full-answer-viewer__head>div{min-width:0}
.ep-full-answer-viewer__head strong{
display:block;
overflow:hidden;
color:#153b66;
font:900 18px/1.3 Inter,system-ui,sans-serif;
text-overflow:ellipsis;
white-space:nowrap;
}
.ep-full-answer-viewer__head small{
display:block;
margin-top:3px;
color:#637990;
font:600 11px/1.4 Inter,system-ui,sans-serif;
}
.ep-full-answer-viewer__head button{
display:grid;
flex:0 0 44px;
width:44px;
height:44px;
place-items:center;
padding:0;
border:0;
border-radius:50%;
background:#102033;
color:#fff;
font:700 28px/1 Arial,sans-serif;
cursor:pointer;
}
.ep-full-answer-viewer__content{
flex:1 1 auto;
min-width:0;
min-height:0;
padding:clamp(16px,3vw,34px);
overflow:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
background:#fff;
}
.ep-full-answer-viewer__answer{
width:min(920px,100%);
margin:0 auto;
color:#142f53;
font-size:clamp(16px,2.2vw,21px)!important;
line-height:1.65!important;
}
.ep-full-answer-viewer[data-subject="maths"] .ep-full-answer-viewer__answer{
background-image:linear-gradient(#e6eef8 1px,transparent 1px);
background-size:100% 38px;
font-family:Arial,"Noto Sans Devanagari",sans-serif!important;
}
.ep-full-answer-viewer__answer :is(p,li,div,span,code){
max-width:100%!important;
overflow-wrap:anywhere!important;
}
.ep-full-answer-viewer__answer code{
white-space:pre-wrap!important;
font-size:1.02em!important;
}
.ep-full-answer-viewer__answer button,
.ep-full-answer-viewer__answer input,
.ep-full-answer-viewer__answer textarea,
.ep-full-answer-viewer__answer select{display:none!important}
body.ep-full-answer-open{overflow:hidden!important}
@media(max-width:900px){
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__dialog{
height:100dvh!important;
max-height:none!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-shell{
min-height:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-whiteboard-workspace{
min-height:0!important;
height:auto!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-traditional-maths-board,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"][data-board-subject="maths"] .ep-traditional-maths-board,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"][data-board-subject="english"] .ep-traditional-maths-board{
inset:0!important;
width:auto!important;
height:auto!important;
min-height:100%!important;
max-height:none!important;
padding:10px 9px 34px!important;
}
.ep-full-answer-viewer{padding:0;background:#f8fbff}
.ep-full-answer-viewer__dialog{
width:100vw;
height:100dvh;
max-height:none;
border:0;
border-radius:0;
}
.ep-full-answer-viewer__head{padding:calc(9px + env(safe-area-inset-top)) 10px 9px}
.ep-full-answer-viewer__head strong{font-size:15px}
.ep-full-answer-viewer__head small{font-size:10px}
.ep-full-answer-viewer__content{padding:16px 12px calc(24px + env(safe-area-inset-bottom))}
.ep-full-answer-viewer__answer{font-size:17px!important;line-height:1.6!important}
}
@media(max-width:420px){
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-actions button{
min-height:34px!important;
}
.ep-full-answer-viewer__head small{display:none}
} .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary{
display:grid!important;
grid-template-columns:16px minmax(0,1fr) max-content!important;
grid-template-areas:
"arrow badge toggle"
"arrow question toggle"!important;
column-gap:7px!important;
row-gap:4px!important;
align-items:center!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary::before{
grid-area:arrow!important;
align-self:center!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>span{
grid-area:badge!important;
justify-self:start!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>strong{
grid-area:question!important;
min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>small{
grid-area:toggle!important;
display:inline-flex!important;
width:max-content!important;
max-width:68px!important;
min-height:24px!important;
align-items:center!important;
justify-content:center!important;
align-self:center!important;
padding:3px 7px!important;
border:1px solid #c9dbee!important;
border-radius:999px!important;
background:#fff!important;
color:#55718e!important;
font:800 8px/1 Inter,system-ui,sans-serif!important;
white-space:nowrap!important;
writing-mode:horizontal-tb!important;
text-orientation:mixed!important;
overflow:hidden!important;
}
@media(max-width:520px){
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary{
grid-template-columns:14px minmax(0,1fr) 42px!important;
padding:8px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>small{
width:42px!important;
max-width:42px!important;
padding:3px 4px!important;
font-size:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details[open]>summary>small::after{
content:"Hide";
font:800 8px/1 Inter,system-ui,sans-serif;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details:not([open])>summary>small::after{
content:"Open";
font:800 8px/1 Inter,system-ui,sans-serif;
}
}.ep-magic-board-pointer{width:40px!important;height:18px!important}
.ep-magic-board-pointer b{display:none!important;content:none!important}
.ep-magic-board-pointer i{display:block!important;right:1px!important;bottom:5px!important;width:34px!important;height:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#195db7 0 72%,#f4c34e 72% 90%,#28374b 90%)!important;box-shadow:0 2px 3px rgba(17,45,78,.22)!important;transform:rotate(-25deg)!important}
.ep-math-writing-pen{width:40px!important;height:18px!important;font-size:0!important;color:transparent!important;background:none!important}
.ep-math-writing-pen::after,.ep-math-writing-pen i,.ep-math-writing-pen i::before,.ep-math-writing-pen i::after{display:none!important;content:none!important}
.ep-math-writing-pen::before,.ep-math-writing-pen b{display:block!important;content:""!important;position:absolute!important;left:1px!important;top:7px!important;width:34px!important;height:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#195db7 0 72%,#f4c34e 72% 90%,#28374b 90%)!important;transform:rotate(-25deg)!important;transform-origin:right center!important;box-shadow:0 2px 3px rgba(17,45,78,.22)!important}