.ep-mobile-answer-viewer[hidden] {
display: none !important;
}
.ep-mobile-answer-viewer {
display: none;
}
@media (max-width: 782px) {
html.ep-mobile-answer-viewer-open,
body.ep-mobile-answer-viewer-open {
overflow: hidden !important;
overscroll-behavior: none;
}
.ep-mobile-answer-viewer {
position: fixed;
inset: 0;
z-index: 2147483000;
display: block;
width: 100vw;
height: 100vh;
height: 100dvh;
background: #f5f8ff;
color: #111827;
font-family: inherit;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.ep-mobile-answer-viewer.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.ep-mobile-answer-viewer__shell {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
background:
radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.1), transparent 34%),
radial-gradient(circle at 100% 0, rgba(124, 58, 237, 0.09), transparent 38%),
#f8faff;
}
.ep-mobile-answer-viewer__header {
position: relative;
z-index: 3;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 62px;
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.ep-mobile-answer-viewer__heading {
min-width: 0;
}
.ep-mobile-answer-viewer__eyebrow {
display: block;
margin-bottom: 2px;
color: #2563eb;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2;
}
.ep-mobile-answer-viewer__title {
margin: 0 !important;
color: #111827 !important;
font-size: clamp(18px, 5vw, 22px) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-mobile-answer-viewer__close {
display: inline-flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 1px solid #d6deed;
border-radius: 14px;
background: #fff;
color: #0f4c81;
font: 400 34px/1 Arial, sans-serif;
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ep-mobile-answer-viewer__close:focus-visible,
.ep-mobile-answer-viewer__action:focus-visible,
.ep-mobile-answer-reopen:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.35);
outline-offset: 2px;
}
.ep-mobile-answer-viewer__question {
flex: 0 0 auto;
margin: 10px 12px 0;
padding: 10px 12px;
border: 1px solid #dbe5f5;
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
}
.ep-mobile-answer-viewer__question-label {
display: block;
margin-bottom: 3px;
color: #2563eb;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ep-mobile-answer-viewer__question-text {
display: -webkit-box;
margin: 0 !important;
overflow: hidden;
color: #334155 !important;
font-size: 13px !important;
font-weight: 600;
line-height: 1.4 !important;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ep-mobile-answer-viewer__content {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
padding: 12px 12px 18px;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ep-mobile-answer-viewer__content > .ep-mobile-answer-source--fullscreen,
.ep-mobile-answer-viewer__content > .ai-study-output-pane,
.ep-mobile-answer-viewer__content > [data-ai-study-tool-output],
.ep-mobile-answer-viewer__content > [data-ai-study-answer-output],
.ep-mobile-answer-viewer__content > [data-ep-math-output] {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 14px !important;
overflow: visible !important;
resize: none !important;
border: 1px solid #dfe7f4 !important;
border-radius: 18px !important;
background: #fff !important;
color: #172033 !important;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08) !important;
line-height: 1.68 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.ep-mobile-answer-viewer__content .ai-study-output-block,
.ep-mobile-answer-viewer__content .ai-study-learn-block,
.ep-mobile-answer-viewer__content .ai-study-advanced-output,
.ep-mobile-answer-viewer__content .ai-study-answer-card,
.ep-mobile-answer-viewer__content .ai-study-speaking-correction,
.ep-mobile-answer-viewer__content .ai-study-speaking-practice-pack {
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.ep-mobile-answer-viewer__content h1,
.ep-mobile-answer-viewer__content h2,
.ep-mobile-answer-viewer__content h3,
.ep-mobile-answer-viewer__content h4 {
max-width: 100%;
color: #111827 !important;
overflow-wrap: anywhere;
}
.ep-mobile-answer-viewer__content h1,
.ep-mobile-answer-viewer__content h2 {
font-size: clamp(24px, 8vw, 34px) !important;
line-height: 1.18 !important;
}
.ep-mobile-answer-viewer__content h3 {
font-size: clamp(20px, 6vw, 27px) !important;
line-height: 1.24 !important;
}
.ep-mobile-answer-viewer__content h4 {
font-size: clamp(17px, 5vw, 21px) !important;
}
.ep-mobile-answer-viewer__content p,
.ep-mobile-answer-viewer__content li,
.ep-mobile-answer-viewer__content td,
.ep-mobile-answer-viewer__content th {
color: #263247 !important;
font-size: 16px !important;
line-height: 1.68 !important;
}
.ep-mobile-answer-viewer__content img,
.ep-mobile-answer-viewer__content video,
.ep-mobile-answer-viewer__content canvas,
.ep-mobile-answer-viewer__content svg {
max-width: 100% !important;
height: auto;
}
.ep-mobile-answer-viewer__content table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
-webkit-overflow-scrolling: touch;
}
.ep-mobile-answer-viewer__content pre,
.ep-mobile-answer-viewer__content code {
max-width: 100%;
white-space: pre-wrap;
word-break: break-word;
}
.ep-mobile-answer-viewer__status {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
.ep-mobile-answer-viewer__actions {
position: relative;
z-index: 3;
display: grid;
flex: 0 0 auto;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.97);
border-top: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.ep-mobile-answer-viewer__action {
display: inline-flex;
min-width: 0;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
padding: 8px 6px;
border: 1px solid #d8e1ef;
border-radius: 13px;
background: #fff;
color: #174ea6;
font-family: inherit;
font-size: 12px;
font-weight: 800;
line-height: 1.15;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ep-mobile-answer-viewer__action:hover,
.ep-mobile-answer-viewer__action:active,
.ep-mobile-answer-viewer__action.is-active {
border-color: transparent;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
}
.ep-mobile-answer-viewer__action[hidden] {
display: none !important;
}
.ep-mobile-answer-viewer__action:disabled {
opacity: 0.55;
cursor: wait;
}
.ep-mobile-answer-viewer__action-icon {
flex: 0 0 auto;
font-size: 15px;
font-weight: 900;
line-height: 1;
}
.ep-mobile-answer-viewer__action-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-mobile-answer-source-placeholder {
display: none !important;
}
.ep-mobile-answer-source--minimized {
position: relative !important;
box-sizing: border-box !important;
min-height: 110px !important;
max-height: 150px !important;
overflow: hidden !important;
resize: none !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%) !important;
mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%) !important;
}
.ep-mobile-answer-compact-bar {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 100%;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: -1px 0 14px;
padding: 9px 10px;
border: 1px solid #d8e3f3;
border-top: 0;
border-radius: 0 0 14px 14px;
background: #f8fbff;
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
}
.ep-mobile-answer-compact-bar__text {
min-width: 0;
color: #475569;
font-size: 11px;
font-weight: 700;
line-height: 1.25;
}
.ep-mobile-answer-reopen {
flex: 0 0 auto;
min-height: 38px;
margin: 0;
padding: 8px 12px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
font-family: inherit;
font-size: 11px;
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(79, 70, 229, 0.22);
cursor: pointer;
} .ep-mobile-answer-viewer__content {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: 8px 6px 14px;
}
.ep-mobile-answer-viewer__content > .ep-mobile-answer-source--fullscreen,
.ep-mobile-answer-viewer__content > .ai-study-output-pane,
.ep-mobile-answer-viewer__content > [data-ai-study-tool-output],
.ep-mobile-answer-viewer__content > [data-ai-study-answer-output],
.ep-mobile-answer-viewer__content > [data-ep-math-output],
.ep-mobile-answer-viewer__content > [data-ai-study-usa-output],
.ep-mobile-answer-viewer__content > [data-ai-study-english-tool-output],
.ep-mobile-answer-viewer__content > [data-ai-study-grammar-tool-output] {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.ep-mobile-answer-viewer__content .ai-study-advanced-output,
.ep-mobile-answer-viewer__content .ai-study-advanced-output__body,
.ep-mobile-answer-viewer__content .ai-study-answer-output,
.ep-mobile-answer-viewer__content .ai-study-output-pane,
.ep-mobile-answer-viewer__content .ai-study-result-box,
.ep-mobile-answer-viewer__content .ai-study-result-box--horizontal,
.ep-mobile-answer-viewer__content .ai-study-tool-output,
.ep-mobile-answer-viewer__content .ai-study-output-window,
.ep-mobile-answer-viewer__content .ai-study-output-window__body,
.ep-mobile-answer-viewer__content .ai-study-speaking-correction,
.ep-mobile-answer-viewer__content .ai-study-speaking-practice-pack {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.ep-mobile-answer-viewer__content .ai-study-advanced-output__body {
display: block !important;
}
.ep-mobile-answer-viewer__content .ai-study-learn-block,
.ep-mobile-answer-viewer__content .ai-study-output-block,
.ep-mobile-answer-viewer__content .ai-study-answer-card,
.ep-mobile-answer-viewer__content .ep-answer-section,
.ep-mobile-answer-viewer__content .ep-math-answer-card {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 16px 14px !important;
border: 1px solid #dfe7f3 !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045) !important;
}
.ep-mobile-answer-viewer__content .ai-study-learn-block:last-child,
.ep-mobile-answer-viewer__content .ai-study-output-block:last-child,
.ep-mobile-answer-viewer__content .ai-study-answer-card:last-child {
margin-bottom: 0 !important;
}
.ep-mobile-answer-viewer__content .ai-study-advanced-toolbar,
.ep-mobile-answer-viewer__content .ai-study-output-window__head,
.ep-mobile-answer-viewer__content .ai-study-result-actions {
margin: 10px 0 0 !important;
padding: 10px 0 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.ep-mobile-answer-viewer__content .ai-study-formula-box {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
}
.ep-mobile-answer-viewer__content .ai-study-learn-block h4,
.ep-mobile-answer-viewer__content .ai-study-output-block h4 {
margin-top: 0 !important;
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__shell {
background: #090f1d;
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__header,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__actions {
background: rgba(12, 18, 32, 0.97);
border-color: rgba(100, 116, 139, 0.45);
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__title,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content h1,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content h2,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content h3,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content h4 {
color: #f8fafc !important;
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__question,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content .ai-study-learn-block,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content .ai-study-output-block,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content .ai-study-answer-card,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__action {
border-color: #334155 !important;
background: #111827 !important;
color: #e2e8f0 !important;
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__question-text,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content p,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content li,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content td,
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__content th {
color: #dbeafe !important;
}
.ep-mobile-answer-viewer.is-dark .ep-mobile-answer-viewer__close {
border-color: #334155;
background: #111827;
color: #93c5fd;
}
}
@media (max-width: 360px) {
.ep-mobile-answer-viewer__header {
min-height: 56px;
padding-right: 10px;
padding-left: 10px;
}
.ep-mobile-answer-viewer__question {
margin-right: 8px;
margin-left: 8px;
}
.ep-mobile-answer-viewer__content {
padding-right: 8px;
padding-left: 8px;
}
.ep-mobile-answer-viewer__status {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
.ep-mobile-answer-viewer__actions {
gap: 6px;
padding-right: 7px;
padding-left: 7px;
}
.ep-mobile-answer-viewer__action {
min-height: 45px;
padding-right: 4px;
padding-left: 4px;
font-size: 10.5px;
}
.ep-mobile-answer-viewer__action-icon {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.ep-mobile-answer-viewer,
.ep-mobile-answer-viewer *,
.ep-mobile-answer-reopen {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}.ep-continue-question-launchbar[hidden]{display:none!important}
.ep-continue-question-launchbar{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
padding:9px 10px;border-top:1px solid #dbe7ff;border-bottom:1px solid #dbe7ff;
background:linear-gradient(135deg,#f5fbff,#eff5ff);color:#17233a;
}
.ep-continue-question-launchbar__copy{display:flex;align-items:center;gap:9px;min-width:0}
.ep-continue-question-launchbar__icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid #d7e4ff;box-shadow:0 7px 16px rgba(15,23,42,.08);flex:0 0 34px}
.ep-continue-question-launchbar__copy div{display:grid;min-width:0;line-height:1.18}
.ep-continue-question-launchbar__copy strong{font-size:13px;color:#17233a}
.ep-continue-question-launchbar__copy small{font-size:10px;color:#5b6b82;white-space:normal}
.ep-continue-question-launchbar button{min-height:40px;border:0;border-radius:999px;padding:9px 15px;background:linear-gradient(135deg,#2563eb,#7042ee);color:#fff;font-weight:900;font-size:12px;box-shadow:0 8px 20px rgba(69,78,230,.24);cursor:pointer}
.ep-continue-question-launchbar button:disabled{cursor:wait;opacity:.72;box-shadow:none}
.ep-continue-question-launchbar[data-state="preparing"] button{cursor:pointer;opacity:1;box-shadow:0 8px 20px rgba(69,78,230,.24)}
.ep-continue-question-launchbar[data-state="ready"]{background:linear-gradient(135deg,#f2fff8,#eef8ff)}
.ep-continue-question-launchbar[data-state="error"] button{background:linear-gradient(135deg,#ef4444,#f97316)} .ep-mobile-answer-viewer .ai-study-live-agent-sync-bar,
.ep-mobile-answer-viewer .ep-answer-avatar-launchbar{display:none!important}
.ep-continue-question-overlay{position:fixed;inset:0;z-index:2147483640;background:#eef4ff;color:#111827;overflow:hidden}
.ep-continue-question-overlay[hidden]{display:none!important}
.ep-continue-question-shell{height:100dvh;max-height:100dvh;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;background:linear-gradient(180deg,#f8faff 0,#eef4ff 100%)}
.ep-continue-question-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid #d7e3f8;background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
.ep-continue-question-heading{min-width:0;display:grid;gap:2px}
.ep-continue-question-eyebrow{font-size:9px;letter-spacing:.12em;color:#2563eb;font-weight:950}
.ep-continue-question-header h2{margin:0;color:#111827;font-size:20px;line-height:1.08}
.ep-continue-question-heading>span:last-child{display:block;max-width:68vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#52637c;font-size:11px;font-weight:800}
.ep-continue-question-header-actions{display:flex;gap:7px;flex:0 0 auto}
.ep-continue-question-header-actions button{width:42px;height:42px;border-radius:14px;border:1px solid #d7e4f8;background:#fff;color:#0b64ad;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 18px rgba(15,23,42,.08);cursor:pointer}
.ep-continue-question-context{margin:8px 9px 0;border:1px solid #d8e4f7;border-radius:15px;background:#fff;overflow:hidden}
.ep-continue-question-context summary{padding:9px 11px;cursor:pointer;color:#1d4ed8;font-size:11px;font-weight:900;list-style-position:inside}
.ep-continue-question-context-grid{display:grid;gap:8px;padding:0 10px 10px}
.ep-continue-question-context-grid>div{padding:9px 10px;border:1px solid #e3eaf5;border-radius:12px;background:#f9fbff}
.ep-continue-question-context strong{display:block;margin-bottom:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#2563eb}
.ep-continue-question-context p{margin:0;color:#26364b;font-size:12px;line-height:1.42;max-height:72px;overflow:auto}
.ep-continue-question-notice{min-height:25px;padding:5px 12px;color:#31536d;font-size:11px;font-weight:800;text-align:center}
.ep-continue-question-messages{min-height:0;overflow:auto;padding:8px 9px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scroll-behavior:smooth}
.ep-continue-question-message{max-width:92%;padding:10px 11px;border-radius:16px;border:1px solid #dce5f2;background:#fff;box-shadow:0 7px 18px rgba(15,23,42,.06)}
.ep-continue-question-message.is-user{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#6d43ed);border-color:transparent;color:#fff;border-bottom-right-radius:5px}
.ep-continue-question-message.is-assistant{align-self:flex-start;border-bottom-left-radius:5px}
.ep-continue-question-message__name{display:block;margin-bottom:5px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#2563eb}
.ep-continue-question-message.is-user .ep-continue-question-message__name{color:#dbeafe}
.ep-continue-question-message__body{font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.ep-continue-question-message__body>*:first-child{margin-top:0}
.ep-continue-question-message__body>*:last-child{margin-bottom:0}
.ep-continue-question-message__body h2,.ep-continue-question-message__body h3,.ep-continue-question-message__body h4{font-size:17px;line-height:1.25;margin:12px 0 6px}
.ep-continue-question-message__body p{margin:0 0 8px}
.ep-continue-question-message__body ul,.ep-continue-question-message__body ol{padding-left:21px;margin:7px 0}
.ep-continue-question-message__body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.ep-continue-question-message__body th,.ep-continue-question-message__body td{border:1px solid #d8e2f1;padding:6px}
.ep-continue-question-thinking{display:flex;align-items:center;gap:8px}
.ep-continue-question-thinking span{width:18px;height:18px;border:2px solid #d8e5ff;border-top-color:#2563eb;border-radius:50%;animation:epContinueSpin .8s linear infinite}
@keyframes epContinueSpin{to{transform:rotate(360deg)}}
.ep-continue-question-suggestions{display:flex;gap:7px;overflow-x:auto;padding:7px 9px;border-top:1px solid #d8e5f8;background:#f7faff;scrollbar-width:none}
.ep-continue-question-suggestions::-webkit-scrollbar{display:none}
.ep-continue-question-suggestions button{flex:0 0 auto;min-height:36px;border:1px solid #cfe0ff;border-radius:999px;background:#fff;color:#1d4ed8;padding:7px 12px;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap}
.ep-continue-question-attachment{display:flex;align-items:center;gap:8px;margin:0 9px 7px;padding:7px;border:1px solid #cfe0ff;border-radius:12px;background:#fff}
.ep-continue-question-attachment[hidden]{display:none!important}
.ep-continue-question-attachment img{width:44px;height:44px;object-fit:cover;border-radius:9px;border:1px solid #dbe5f3}
.ep-continue-question-attachment span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800;color:#334155}
.ep-continue-question-attachment button{width:34px;height:34px;border:1px solid #fecaca;border-radius:10px;background:#fff7f7;color:#b91c1c;font-size:20px;cursor:pointer}
.ep-continue-question-composer{padding:8px 9px max(8px,env(safe-area-inset-bottom));border-top:1px solid #d6e2f6;background:rgba(255,255,255,.98);box-shadow:0 -10px 26px rgba(15,23,42,.08)}
.ep-continue-question-composer textarea{display:block;width:100%;min-height:68px;max-height:132px;resize:vertical;border:1px solid #cfdcf0;border-radius:15px;background:#fff;color:#111827;padding:11px 12px;font:inherit;font-size:14px;line-height:1.4;box-sizing:border-box;outline:none}
.ep-continue-question-composer textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.ep-continue-question-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}
.ep-continue-question-controls button{min-height:42px;border:1px solid #d9e3f3;border-radius:13px;background:#fff;color:#24354d;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;cursor:pointer}
.ep-continue-question-controls button.is-primary{background:linear-gradient(135deg,#2563eb,#7042ee);color:#fff;border:0}
.ep-continue-question-controls button.is-danger{color:#b91c1c;border-color:#fecaca;background:#fff7f7}
.ep-continue-question-controls button.is-listening{background:#fff1f2;color:#be123c;border-color:#fda4af;animation:epContinuePulse 1s ease-in-out infinite alternate}
@keyframes epContinuePulse{to{box-shadow:0 0 0 5px rgba(244,63,94,.12)}}
.ep-continue-question-minibar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:2147483635;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;padding:7px;border:1px solid #d5e1f4;border-radius:17px;background:rgba(255,255,255,.98);box-shadow:0 14px 36px rgba(15,23,42,.2);backdrop-filter:blur(14px)}
.ep-continue-question-minibar[hidden]{display:none!important}
.ep-continue-question-minibar>button:first-child{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;border:0;background:transparent;color:#17233a;padding:4px;cursor:pointer}
.ep-continue-question-minibar>button:first-child>span{grid-row:1/3;font-size:23px}
.ep-continue-question-minibar strong{font-size:12px}
.ep-continue-question-minibar small{font-size:10px;color:#64748b}
.ep-continue-question-minibar>button:last-child{width:42px;height:42px;border:1px solid #dbe5f3;border-radius:12px;background:#fff;color:#0b64ad;font-size:22px;cursor:pointer}
html.ep-continue-question-open,body.ep-continue-question-open{overflow:hidden!important;overscroll-behavior:none}
.ep-continue-question-overlay.is-dark,.ep-mobile-answer-viewer.is-dark~.ep-continue-question-overlay{background:#07111f;color:#e5edf9}
.ep-continue-question-overlay.is-dark .ep-continue-question-shell{background:linear-gradient(180deg,#0b1625,#07111f)}
.ep-continue-question-overlay.is-dark .ep-continue-question-header,
.ep-continue-question-overlay.is-dark .ep-continue-question-composer,
.ep-continue-question-overlay.is-dark .ep-continue-question-suggestions{background:#101b2a;border-color:#26364c;color:#e5edf9}
.ep-continue-question-overlay.is-dark .ep-continue-question-header h2{color:#fff}
.ep-continue-question-overlay.is-dark .ep-continue-question-heading>span:last-child{color:#bac7da}
.ep-continue-question-overlay.is-dark .ep-continue-question-context,
.ep-continue-question-overlay.is-dark .ep-continue-question-context-grid>div,
.ep-continue-question-overlay.is-dark .ep-continue-question-message.is-assistant,
.ep-continue-question-overlay.is-dark .ep-continue-question-attachment,
.ep-continue-question-overlay.is-dark .ep-continue-question-composer textarea,
.ep-continue-question-overlay.is-dark .ep-continue-question-suggestions button,
.ep-continue-question-overlay.is-dark .ep-continue-question-controls button{background:#172436;color:#e5edf9;border-color:#30425b}
.ep-continue-question-overlay.is-dark .ep-continue-question-context p{color:#d7e1ef}
.ep-continue-question-overlay.is-dark .ep-continue-question-composer textarea{color:#fff}
@media (max-width:420px){
.ep-continue-question-launchbar{grid-template-columns:1fr;padding:8px}
.ep-continue-question-launchbar button{width:100%}
.ep-continue-question-context{margin-left:6px;margin-right:6px}
.ep-continue-question-messages{padding-left:6px;padding-right:6px}
.ep-continue-question-message{max-width:96%}
.ep-continue-question-controls{gap:5px}
.ep-continue-question-controls button{font-size:9px;min-height:41px}
}
@media (min-width:783px){
.ep-continue-question-launchbar,.ep-continue-question-overlay,.ep-continue-question-minibar{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.ep-continue-question-overlay *,.ep-continue-question-launchbar button{scroll-behavior:auto!important;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-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;
}
}