/* MegaTitan v2 — interface standalone */ :root { --mt-bg: #f7f8fc; --mt-surface: #ffffff; --mt-ink: #161a2b; --mt-muted: #70778d; --mt-line: #e7eaf2; --mt-purple: #7c5cfc; --mt-purple-dark: #5f42df; --mt-green: #58cc02; --mt-green-dark: #45a900; --mt-blue: #1cb0f6; --mt-blue-dark: #0b93d3; --mt-yellow: #ffc800; --mt-red: #ff4b4b; --mt-cyan: #24e1ff; --mt-sidebar: 236px; --mt-shadow: 0 18px 55px rgba(42, 49, 78, .08); --mt-shadow-strong: 0 24px 70px rgba(42, 49, 78, .13); } html { background: var(--mt-bg); } body.acr-standalone-page, body.acr-standalone-page #page, body.acr-standalone-page .site, body.acr-standalone-page .site-content, body.acr-standalone-page .content-area, body.acr-standalone-page main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } body.acr-standalone-page { overflow-x: hidden; background: var(--mt-bg) !important; color: var(--mt-ink); } body.acr-standalone-page > header, body.acr-standalone-page > footer, body.acr-standalone-page .site-header, body.acr-standalone-page .site-footer { display:none !important; } #acr-app, #acr-app * { box-sizing: border-box; } #acr-app { min-height: 100vh; min-height: 100dvh; color: var(--mt-ink); font-family: ui-rounded, "SF Pro Rounded", "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } #acr-app button, #acr-app input, #acr-app select, #acr-app textarea { font: inherit; } #acr-app button { color: inherit; } #acr-app svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; } #acr-app h1, #acr-app h2, #acr-app h3, #acr-app p { margin-top:0; } #acr-app button:focus-visible, #acr-app input:focus-visible, #acr-app textarea:focus-visible, #acr-app select:focus-visible, #acr-app summary:focus-visible { outline: 3px solid rgba(28,176,246,.32); outline-offset: 3px; } .acr-boot, .mt-fatal { min-height: 100vh; min-height: 100dvh; display:grid; place-items:center; text-align:center; background: linear-gradient(135deg,#111425,#191f3a); color:#fff; } .acr-boot__planet { font-size: 68px; animation: mtPulse 1.3s ease-in-out infinite; } .acr-noscript { padding:30px; font-family:system-ui; } /* ---------- Mascote original MegaTitan ---------- */ .mt-mascot { --s: 1; position:relative; width: calc(172px * var(--s)); height: calc(224px * var(--s)); flex:0 0 auto; filter: drop-shadow(0 calc(20px * var(--s)) calc(18px * var(--s)) rgba(24,30,62,.18)); transform-origin: 50% 100%; animation: mtFloat 3.7s ease-in-out infinite; } .mt-mascot--xl { --s: 1.5; } .mt-mascot--lg { --s: 1.17; } .mt-mascot--md { --s: .88; } .mt-mascot--sm { --s: .68; } .mt-mascot--xs { --s: .38; } .mt-mascot__shadow { position:absolute; left:19%; right:19%; bottom:0; height:7%; border-radius:50%; background:rgba(18,22,43,.15); filter:blur(calc(5px * var(--s))); } .mt-mascot__head { position:absolute; z-index:4; left:17%; top:15%; width:66%; height:37%; border: calc(4px * var(--s)) solid #1b2140; border-radius: 26% 26% 30% 30%; background: linear-gradient(145deg,#f8fbff 0 52%,#dce5fb 53% 100%); box-shadow: inset 0 calc(-8px * var(--s)) 0 rgba(110,133,196,.13), inset 0 calc(5px * var(--s)) 0 rgba(255,255,255,.9); } .mt-mascot__head::before, .mt-mascot__head::after { content:""; position:absolute; top:13%; width:8%; height:8%; border-radius:50%; background:#cad6f3; } .mt-mascot__head::before { left:9%; } .mt-mascot__head::after { right:9%; } .mt-mascot__visor { position:absolute; left:12%; right:12%; top:28%; height:34%; border-radius:16px; background: linear-gradient(90deg,#11172b,#202b52); border: calc(3px * var(--s)) solid #11172b; overflow:hidden; box-shadow: inset 0 0 calc(14px * var(--s)) rgba(36,225,255,.2); } .mt-mascot__visor::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 45%,transparent 66%); transform:translateX(-120%); animation: mtScan 4.3s ease-in-out infinite; } .mt-mascot__visor span, .mt-mascot__visor b { position:absolute; top:31%; width:19%; height:26%; border-radius:99px; background:var(--mt-cyan); box-shadow:0 0 calc(12px * var(--s)) var(--mt-cyan); animation: mtBlink 4.4s infinite; } .mt-mascot__visor span { left:22%; } .mt-mascot__visor b { right:22%; } .mt-mascot__mouth { position:absolute; left:38%; right:38%; bottom:12%; height:5%; border-radius:0 0 20px 20px; background:#7c5cfc; } .mt-mascot__antenna { position:absolute; z-index:3; left:48%; top:1%; width:4%; height:17%; background:#1b2140; border-radius:99px; } .mt-mascot__antenna i { position:absolute; left:50%; top:-15%; width:calc(15px * var(--s)); height:calc(15px * var(--s)); transform:translateX(-50%); border:calc(3px * var(--s)) solid #1b2140; border-radius:50%; background:var(--mt-cyan); box-shadow:0 0 calc(15px * var(--s)) rgba(36,225,255,.8); } .mt-mascot__ear { position:absolute; z-index:2; top:25%; width:16%; height:20%; border:calc(4px * var(--s)) solid #1b2140; background:#7c5cfc; } .mt-mascot__ear--l { left:7%; border-radius:42% 12% 12% 42%; } .mt-mascot__ear--r { right:7%; border-radius:12% 42% 42% 12%; } .mt-mascot__neck { position:absolute; z-index:2; left:40%; top:49%; width:20%; height:11%; border-radius:20%; background:#1b2140; } .mt-mascot__body { position:absolute; z-index:3; left:23%; top:53%; width:54%; height:34%; border:calc(4px * var(--s)) solid #1b2140; border-radius:26% 26% 32% 32%; background: linear-gradient(145deg,#7c5cfc,#5b3bdd); box-shadow:inset 0 calc(-10px * var(--s)) 0 rgba(24,20,88,.18); } .mt-mascot__body > span { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); width:39%; aspect-ratio:1; display:grid; place-items:center; border-radius:28%; background:#101629; color:#fff; font-weight:1000; font-size:calc(24px * var(--s)); box-shadow:inset 0 0 calc(12px * var(--s)) rgba(36,225,255,.25); } .mt-mascot__body > i { position:absolute; left:32%; right:32%; bottom:16%; height:8%; border-radius:99px; background:var(--mt-cyan); box-shadow:0 0 calc(10px * var(--s)) rgba(36,225,255,.55); } .mt-mascot__arm { position:absolute; z-index:2; top:58%; width:18%; height:29%; border:calc(4px * var(--s)) solid #1b2140; border-radius:40%; background:#e3ebfb; transform-origin:50% 10%; } .mt-mascot__arm i { position:absolute; left:18%; right:18%; bottom:-8%; height:29%; border:calc(3px * var(--s)) solid #1b2140; border-radius:45%; background:#7c5cfc; } .mt-mascot__arm--l { left:12%; transform:rotate(14deg); } .mt-mascot__arm--r { right:12%; transform:rotate(-14deg); } .mt-mascot--wave .mt-mascot__arm--r { animation: mtWave 1.6s ease-in-out infinite; } .mt-mascot--fight .mt-mascot__arm--l { transform:rotate(52deg); } .mt-mascot--fight .mt-mascot__arm--r { transform:rotate(-52deg); } .mt-mascot--scan .mt-mascot__visor span, .mt-mascot--scan .mt-mascot__visor b { background:#ffc800; box-shadow:0 0 calc(14px * var(--s)) rgba(255,200,0,.8); } .mt-mascot--coach { animation-duration:5s; } @keyframes mtFloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(.6deg)} } @keyframes mtWave { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(-74deg)} } @keyframes mtBlink { 0%,44%,49%,100%{transform:scaleY(1)} 46%,47%{transform:scaleY(.12)} } @keyframes mtScan { 0%,55%{transform:translateX(-120%)} 78%,100%{transform:translateX(120%)} } @keyframes mtPulse { 50%{transform:scale(1.08); opacity:.78} } /* ---------- Onboarding ---------- */ .mt-onboarding { min-height:100vh; min-height:100dvh; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(300px,480px) minmax(420px,650px); gap:clamp(20px,5vw,90px); place-content:center; align-items:center; padding:clamp(28px,5vw,80px); background: radial-gradient(circle at 12% 12%,rgba(36,225,255,.13),transparent 28%), radial-gradient(circle at 87% 82%,rgba(124,92,252,.22),transparent 34%), linear-gradient(135deg,#0f1222 0%,#171c34 52%,#0d1020 100%); color:#fff; } .mt-onboarding::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.28; background-image:radial-gradient(circle,#fff 1px,transparent 1.5px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 85%); } .mt-onboarding__glow { position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%; filter:blur(90px); opacity:.22; } .mt-onboarding__glow--a { left:-190px; top:-140px; background:#24e1ff; } .mt-onboarding__glow--b { right:-180px; bottom:-180px; background:#7c5cfc; } .mt-onboarding__mascot { display:grid; place-items:center; min-height:520px; } .mt-onboarding__panel { max-width:650px; } .mt-brand-kicker { display:inline-flex; align-items:center; gap:9px; color:#8ef1ff; font-size:12px; font-weight:950; letter-spacing:.14em; margin-bottom:18px; } .mt-brand-kicker span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(36,225,255,.12); } .mt-speech { position:relative; padding:clamp(26px,4vw,42px); border:1px solid rgba(255,255,255,.12); border-radius:28px; background:rgba(255,255,255,.075); backdrop-filter:blur(24px); box-shadow:0 25px 70px rgba(0,0,0,.22); } .mt-speech::before { content:""; position:absolute; left:-16px; top:58px; width:30px; height:30px; background:rgba(255,255,255,.075); border-left:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); transform:rotate(45deg); } .mt-speech p { margin-bottom:12px; color:#cdd5ed; font-size:clamp(16px,2vw,21px); line-height:1.6; } .mt-speech p strong { color:#fff; } .mt-speech__big { margin:22px 0 0 !important; color:#fff !important; font-weight:900; font-size:clamp(25px,3vw,36px) !important; letter-spacing:-.03em; } .mt-name-form { margin-top:22px; } .mt-name-form label { display:block; margin:0 0 9px 3px; color:#99a4c4; font-size:11px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; } .mt-name-form > div { display:flex; gap:10px; } .mt-name-form input { width:100%; min-width:0; height:60px; padding:0 20px; border:2px solid rgba(255,255,255,.12); border-radius:18px; background:#fff; color:#15192a; font-size:18px; font-weight:850; outline:none; } .mt-name-form input:focus { border-color:#24e1ff; box-shadow:0 0 0 4px rgba(36,225,255,.11); } .mt-name-form button { min-width:245px; height:60px; padding:0 21px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-bottom:5px solid #3e9800; border-radius:18px; background:var(--mt-green); color:#fff; font-size:12px; font-weight:950; letter-spacing:.05em; cursor:pointer; transition:.18s ease; } .mt-name-form button:hover { transform:translateY(-2px); filter:brightness(1.03); } .mt-name-form button:active { transform:translateY(2px); border-bottom-width:2px; } .mt-onboarding__note { margin:14px 0 0 3px; color:#7f8aaa; font-size:11px; } /* ---------- App shell ---------- */ .mt-app-shell { min-height:100vh; min-height:100dvh; background:var(--mt-bg); } .mt-sidebar { position:fixed; z-index:80; left:0; top:0; bottom:0; width:var(--mt-sidebar); padding:24px 18px 20px; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--mt-line); } .mt-logo { display:flex; align-items:center; gap:10px; width:100%; padding:0 8px 22px; border:0; background:none; cursor:pointer; text-align:left; } .mt-logo__mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#7c5cfc,#5435d5); color:#fff; font-size:20px; font-weight:1000; box-shadow:0 8px 18px rgba(124,92,252,.26); } .mt-logo > span:last-child { display:grid; line-height:.92; letter-spacing:-.03em; } .mt-logo strong { color:#1a1e30; font-size:18px; font-weight:1000; } .mt-logo b { color:#7c5cfc; font-size:18px; font-weight:1000; } .mt-sidebar nav { display:grid; gap:7px; } .mt-sidebar nav button, .mt-sidebar__bottom > button { position:relative; width:100%; min-height:51px; padding:0 13px; display:flex; align-items:center; gap:13px; border:2px solid transparent; border-radius:15px; background:none; color:#697187; font-size:13px; font-weight:850; cursor:pointer; text-align:left; } .mt-sidebar nav button:hover, .mt-sidebar__bottom > button:hover { background:#f7f8fd; color:#33394c; } .mt-sidebar nav button.is-active { border-color:#dcd5ff; background:#f2efff; color:#6b4ee5; } .mt-sidebar nav button.is-active svg { stroke-width:2.55; } .mt-sidebar__bottom { margin-top:auto; display:grid; gap:11px; } .mt-bell i { margin-left:auto; min-width:21px; height:21px; padding:0 5px; display:grid; place-items:center; border-radius:99px; background:#ff4b4b; color:#fff; font-size:9px; font-style:normal; } .mt-mini-user { padding:12px; display:flex; align-items:center; gap:10px; border-radius:17px; background:#f7f8fb; } .mt-mini-user > span { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:#171b2d; color:#fff; font-weight:900; } .mt-mini-user strong,.mt-mini-user small { display:block; } .mt-mini-user strong{font-size:12px}.mt-mini-user small{color:var(--mt-muted);font-size:9px;margin-top:2px} .mt-main-wrap { margin-left:var(--mt-sidebar); min-height:100vh; } .mt-top-status { height:78px; padding:0 clamp(24px,4vw,52px); display:flex; justify-content:flex-end; align-items:center; gap:10px; border-bottom:1px solid var(--mt-line); background:rgba(247,248,252,.86); backdrop-filter:blur(16px); position:sticky; top:0; z-index:50; } .mt-status-pill { min-height:40px; padding:0 12px; display:flex; align-items:center; gap:6px; border-radius:13px; background:#fff; border:1px solid var(--mt-line); font-size:11px; } .mt-status-pill strong { font-size:13px; } .mt-status-pill span { color:var(--mt-muted); font-size:9px; font-weight:800; } .mt-status-pill--streak { color:#f28c18; }.mt-status-pill--xp{color:#7054ee}.mt-status-pill svg{width:18px!important;height:18px!important} .mt-status-avatar { width:40px; height:40px; border:0; border-radius:13px; background:#191d30; color:#fff!important; font-weight:950; cursor:pointer; } .mt-main { width:min(1480px,100%); margin:0 auto; padding:clamp(26px,4vw,52px); display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; } .mt-main:not(.mt-main--with-rail) { grid-template-columns:minmax(0,1fr); max-width:1160px; } .mt-content { min-width:0; } .mt-right-rail { display:flex; flex-direction:column; gap:14px; } .mt-rail-card { padding:18px; border:1px solid var(--mt-line); border-radius:20px; background:#fff; box-shadow:0 8px 30px rgba(40,47,75,.04); } .mt-rail-title { display:flex; align-items:center; justify-content:space-between; gap:10px; } .mt-rail-title span { font-size:12px; font-weight:900; }.mt-rail-title b{color:#777f94;font-size:10px} .mt-daily-card p { margin:13px 0 0; color:var(--mt-muted); font-size:10px; line-height:1.55; } .mt-goal-ring { --goal:0; width:118px; height:118px; margin:17px auto 6px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--mt-green) calc(var(--goal)*1%),#edf0f5 0); position:relative; } .mt-goal-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:#fff; } .mt-goal-ring > div { position:relative; z-index:1; text-align:center; }.mt-goal-ring strong{display:block;font-size:22px;line-height:1}.mt-goal-ring span{font-size:9px;color:var(--mt-muted)} .mt-line-progress { width:100%; height:9px; border-radius:99px; background:#eaedf4; overflow:hidden; box-shadow:inset 0 1px 1px rgba(20,25,45,.05); } .mt-line-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7c5cfc,#9b83ff); transition:width .35s ease; } .mt-rail-card > .mt-line-progress { margin:12px 0 7px; }.mt-rail-card>small{color:var(--mt-muted);font-size:9px} .mt-streak-card { display:flex; align-items:center; gap:12px; }.mt-big-emoji{font-size:30px}.mt-streak-card strong,.mt-streak-card small{display:block}.mt-streak-card strong{font-size:14px}.mt-streak-card small{font-size:9px;color:var(--mt-muted);margin-top:2px} .mt-last-badge { display:flex; gap:11px; align-items:center; margin-top:14px; }.mt-last-badge>b{font-size:28px}.mt-last-badge strong,.mt-last-badge small{display:block}.mt-last-badge strong{font-size:11px}.mt-last-badge small{font-size:9px;color:var(--mt-muted);margin-top:3px;line-height:1.4} .mt-mobile-nav { display:none; } /* ---------- Common ---------- */ .mt-kicker { display:block; margin-bottom:8px; color:#7c5cfc; font-size:10px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; } .mt-section { margin-top:34px; } .mt-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:16px; } .mt-section-head h2 { margin:0; font-size:clamp(23px,2.5vw,31px); line-height:1.1; letter-spacing:-.035em; } .mt-section-head > b { color:var(--mt-muted); font-size:11px; } .mt-text-btn { display:inline-flex; align-items:center; gap:5px; border:0; background:none; color:#6b4ee5!important; font-size:10px; font-weight:900; cursor:pointer; }.mt-text-btn svg{width:15px!important;height:15px!important} .mt-btn { min-height:49px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; font-size:11px; font-weight:1000; letter-spacing:.035em; cursor:pointer; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; } .mt-btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.02); }.mt-btn:active:not(:disabled){transform:translateY(1px)}.mt-btn:disabled{opacity:.4;cursor:not-allowed} .mt-btn svg{width:17px!important;height:17px!important} .mt-btn--green { background:var(--mt-green); color:#fff!important; border-bottom:4px solid #3e9f00; box-shadow:0 8px 18px rgba(88,204,2,.14); } .mt-btn--blue { background:var(--mt-blue); color:#fff!important; border-bottom:4px solid #0c8fc8; } .mt-btn--dark { background:#181c2f; color:#fff!important; border-bottom:4px solid #060815; } .mt-btn--ghost { background:#fff; border:2px solid #e2e6ef; border-bottom:4px solid #d4d9e4; color:#3c4356!important; } .mt-btn--small { min-height:38px; padding:0 13px; font-size:9px; } .mt-empty,.mt-empty-small { padding:28px; border:1px dashed #d9dde7; border-radius:20px; background:#fff; color:var(--mt-muted); text-align:center; } .mt-empty-small{padding:20px;font-size:11px} /* ---------- Home ---------- */ .mt-home-hero { min-height:310px; padding:clamp(28px,4vw,46px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(270px,.9fr); align-items:center; gap:30px; border-radius:30px; overflow:hidden; position:relative; background:linear-gradient(135deg,#1a1f39,#252c50); color:#fff; box-shadow:var(--mt-shadow-strong); } .mt-home-hero::after { content:""; position:absolute; width:460px; height:460px; right:-220px; top:-190px; border-radius:50%; background:rgba(36,225,255,.09); } .mt-home-copy { position:relative; z-index:2; } .mt-home-copy .mt-kicker { color:#87efff; }.mt-home-copy h1{margin:0 0 12px;font-size:clamp(36px,4.8vw,58px);line-height:.98;letter-spacing:-.055em}.mt-home-copy>p{max-width:650px;margin-bottom:20px;color:#bfc7df;font-size:14px;line-height:1.65} .mt-home-actions { display:flex; flex-wrap:wrap; gap:10px; } .mt-home-mascot { align-self:end; justify-self:end; position:relative; z-index:2; min-width:300px; display:flex; justify-content:center; } .mt-mascot-bubble { position:absolute; z-index:4; right:58%; top:5%; width:180px; padding:12px 14px; border-radius:17px 17px 4px 17px; background:#fff; color:#3c4356; box-shadow:0 12px 30px rgba(0,0,0,.14); font-size:10px; font-weight:750; line-height:1.5; } .mt-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .mt-mode-card { min-height:250px; padding:25px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border:2px solid transparent; border-bottom-width:5px; border-radius:25px; cursor:pointer; transition:.2s ease; } .mt-mode-card:hover { transform:translateY(-4px); box-shadow:var(--mt-shadow); } .mt-mode-card--learn { background:#f0fae8; border-color:#cdecb8; color:#274019; }.mt-mode-card--review{background:#edf8ff;border-color:#cbeafa;color:#17394c} .mt-mode-card__icon { width:56px; height:56px; display:grid; place-items:center; border-radius:17px; background:#fff; font-size:29px; box-shadow:0 9px 24px rgba(20,30,50,.07); } .mt-mode-card>span { margin-top:19px; font-size:9px; font-weight:1000; letter-spacing:.12em; opacity:.65; }.mt-mode-card h3{margin:5px 0 8px;font-size:30px;letter-spacing:-.035em}.mt-mode-card p{margin-bottom:18px;max-width:480px;font-size:11px;line-height:1.6;opacity:.75}.mt-mode-card__bottom{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between}.mt-mode-card__bottom b{font-size:10px}.mt-mode-card__bottom svg{width:18px!important;height:18px!important} .mt-course-feature { display:grid; grid-template-columns:36% 64%; min-height:295px; border:1px solid var(--mt-line); border-radius:27px; overflow:hidden; background:#fff; box-shadow:0 12px 40px rgba(40,46,73,.05); } .mt-course-feature__planet { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at center,#f2efff 0,#ece8ff 50%,#e4e9ff 100%); } .mt-course-feature__planet::before,.mt-course-feature__planet::after{content:"";position:absolute;border:1px dashed rgba(93,71,206,.23);border-radius:50%;transform:rotate(-13deg) scaleY(.55)}.mt-course-feature__planet::before{width:76%;height:76%}.mt-course-feature__planet::after{width:115%;height:115%} .mt-course-feature__planet>span{font-size:74px;filter:drop-shadow(0 12px 16px rgba(255,166,0,.14));}.mt-course-feature__planet b,.mt-course-feature__planet em{position:absolute;font-style:normal}.mt-course-feature__planet b{right:25%;top:27%;font-size:34px}.mt-course-feature__planet em{left:17%;bottom:22%;font-size:43px} .mt-course-feature__body{padding:clamp(25px,4vw,42px);display:flex;flex-direction:column;justify-content:center}.mt-chip{align-self:flex-start;padding:7px 10px;border-radius:99px;background:#f3f0ff;color:#6b4ee5;font-size:9px;font-weight:900}.mt-course-feature h3{margin:12px 0 9px;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}.mt-course-feature p{color:var(--mt-muted);font-size:11px;line-height:1.6;max-width:650px}.mt-course-feature__progress{margin:4px 0 18px}.mt-course-feature__progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px;font-size:9px;font-weight:850;color:#697187}.mt-course-feature .mt-btn{align-self:flex-start} .mt-last-performance,.mt-first-performance{padding:20px;display:flex;align-items:center;gap:18px;border:1px solid var(--mt-line);border-radius:22px;background:#fff}.mt-score-orb{width:72px;height:72px;display:grid;place-items:center;align-content:center;border-radius:20px;background:#171b2d;color:#fff;flex:0 0 auto}.mt-score-orb strong{font-size:20px;line-height:1}.mt-score-orb span{font-size:8px;color:#9fa8c2;margin-top:3px}.mt-last-performance>div:nth-child(2),.mt-first-performance>div{min-width:0;flex:1}.mt-last-performance>div:nth-child(2)>span{color:#7c5cfc;font-size:9px;font-weight:900}.mt-last-performance h3,.mt-first-performance h3{margin:3px 0 3px;font-size:17px}.mt-last-performance p,.mt-first-performance p{margin:0;color:var(--mt-muted);font-size:10px}.mt-first-performance>span{font-size:34px} /* ---------- Page headers ---------- */ .mt-page-head { min-height:210px; padding:25px 30px; display:grid; grid-template-columns:1fr 210px; align-items:center; gap:24px; border:1px solid var(--mt-line); border-radius:27px; background:#fff; overflow:hidden; } .mt-page-head--learn{background:linear-gradient(135deg,#f1ffea,#fff)}.mt-page-head--review{background:linear-gradient(135deg,#edf9ff,#fff)} .mt-page-head h1{margin:0 0 10px;font-size:clamp(34px,4vw,51px);line-height:1;letter-spacing:-.05em}.mt-page-head p{max-width:720px;margin:0;color:var(--mt-muted);font-size:12px;line-height:1.65}.mt-head-mascot{height:160px;display:grid;place-items:center;align-self:end} /* ---------- Learning path ---------- */ .mt-learning-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 8px; } .mt-learning-summary>div{padding:17px;display:flex;align-items:center;gap:11px;border:1px solid var(--mt-line);border-radius:18px;background:#fff}.mt-learning-summary span{font-size:26px}.mt-learning-summary strong{font-size:18px;margin-left:auto}.mt-learning-summary small{max-width:85px;color:var(--mt-muted);font-size:8px;line-height:1.3} .mt-path { position:relative; min-height:900px; margin-top:18px; padding:40px clamp(20px,7vw,90px) 70px; border-radius:30px; overflow:hidden; background:linear-gradient(180deg,#19213a,#11172a); color:#fff; } .mt-path::before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle,#fff 1px,transparent 1.3px);background-size:52px 52px}.mt-path-sky i{position:absolute;border-radius:50%;filter:blur(30px);opacity:.17}.mt-path-sky i:nth-child(1){width:320px;height:320px;background:#7c5cfc;right:-100px;top:-80px}.mt-path-sky i:nth-child(2){width:280px;height:280px;background:#1cb0f6;left:-130px;top:360px}.mt-path-sky i:nth-child(3){width:300px;height:300px;background:#58cc02;right:-150px;bottom:-100px} .mt-path-step { position:relative; z-index:2; width:100%; min-height:172px; } .mt-path-node-wrap { display:flex; align-items:center; gap:22px; width:62%; }.mt-path-step--right .mt-path-node-wrap{margin-left:auto;flex-direction:row-reverse;text-align:right}.mt-path-node{--unit-color:#7c5cfc;position:relative;flex:0 0 auto;width:88px;height:88px;border:0;border-bottom:8px solid color-mix(in srgb,var(--unit-color),#000 24%);border-radius:30px;background:var(--unit-color);font-size:36px;cursor:pointer;box-shadow:0 13px 28px rgba(0,0,0,.22);transition:.18s ease}.mt-path-node:hover:not(:disabled){transform:translateY(-4px) scale(1.03)}.mt-path-node i{position:absolute;right:-7px;top:-7px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#2e3453;font-size:12px;font-style:normal;font-weight:1000}.mt-path-step--locked .mt-path-node{filter:grayscale(1);opacity:.38;cursor:not-allowed}.mt-path-card{padding:15px 18px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);max-width:360px}.mt-path-card>span{color:#9fabcb;font-size:8px;font-weight:950;letter-spacing:.12em}.mt-path-card h3{margin:4px 0 4px;font-size:18px}.mt-path-card p{margin:0;color:#9fabcb;font-size:9px;line-height:1.45}.mt-path-card b{display:block;margin-top:7px;color:#fff;font-size:9px}.mt-path-line{position:absolute;left:calc(31% + 43px);top:90px;width:40%;height:88px;border-bottom:3px dashed rgba(255,255,255,.16);border-right:3px dashed rgba(255,255,255,.16);border-radius:0 0 70px 0}.mt-path-step--right .mt-path-line{left:auto;right:calc(31% + 43px);border-right:0;border-left:3px dashed rgba(255,255,255,.16);border-radius:0 0 0 70px} /* ---------- Lesson ---------- */ .mt-lesson-shell { min-height:100vh; min-height:100dvh; display:grid; grid-template-rows:76px 1fr 88px; background:linear-gradient(180deg,#fafbff,#f4f6fb); } .mt-lesson-top{padding:0 clamp(18px,4vw,50px);display:grid;grid-template-columns:50px 1fr 100px;align-items:center;gap:18px;border-bottom:1px solid var(--mt-line);background:#fff}.mt-lesson-top>button{width:40px;height:40px;border:0;border-radius:12px;background:#f2f4f8;cursor:pointer}.mt-lesson-progress{display:flex;justify-content:center;gap:7px}.mt-lesson-progress i{width:42px;height:8px;border-radius:99px;background:#e7eaf0}.mt-lesson-progress i.is-active{background:var(--unit-color)}.mt-energy-mini{justify-self:end;color:#6b4ee5;font-size:11px;font-weight:900} .mt-lesson-stage{width:min(980px,calc(100% - 36px));margin:auto;display:grid;grid-template-columns:310px 1fr;align-items:center;gap:42px;padding:40px 0}.mt-lesson-visual{min-height:360px;position:relative;display:grid;place-items:center;border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--unit-color),#fff 82%),#fff);overflow:hidden}.mt-lesson-visual::before{content:"";position:absolute;width:280px;height:280px;border:1px dashed color-mix(in srgb,var(--unit-color),transparent 55%);border-radius:50%;animation:mtSpin 16s linear infinite}.mt-lesson-icon{font-size:104px;position:relative;z-index:1;filter:drop-shadow(0 18px 20px rgba(25,30,55,.13))}.mt-lesson-visual .mt-mascot{position:absolute;right:-8px;bottom:-18px;z-index:2} .mt-lesson-card>span{color:var(--unit-color);font-size:10px;font-weight:1000;letter-spacing:.14em}.mt-lesson-card h1{margin:8px 0 15px;font-size:clamp(38px,5vw,61px);line-height:.98;letter-spacing:-.055em}.mt-lesson-card>p{max-width:620px;color:#626a80;font-size:16px;line-height:1.75}.mt-titan-comment{margin-top:22px;padding:15px 17px;border-left:4px solid var(--unit-color);border-radius:0 15px 15px 0;background:#fff;color:#485065;font-size:11px;font-weight:750;box-shadow:0 9px 30px rgba(30,38,70,.05)} .mt-lesson-footer{padding:0 clamp(18px,4vw,50px);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--mt-line);background:#fff}.mt-lesson-footer>div strong,.mt-lesson-footer>div span{display:block}.mt-lesson-footer strong{font-size:14px}.mt-lesson-footer span{font-size:9px;color:var(--mt-muted)} @keyframes mtSpin{to{transform:rotate(360deg)}} /* ---------- Review hub ---------- */ .mt-recommend{margin:18px 0;display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid #dcd6ff;border-radius:19px;background:#f5f2ff}.mt-recommend>span{font-size:32px}.mt-recommend b,.mt-recommend strong{display:block}.mt-recommend b{color:#765ae7;font-size:8px;letter-spacing:.1em}.mt-recommend strong{margin:2px 0;font-size:15px}.mt-recommend p{margin:0;color:#72798d;font-size:10px} .mt-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.mt-review-card{min-height:310px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:2px solid transparent;border-bottom-width:5px;border-radius:25px;cursor:pointer;transition:.18s ease}.mt-review-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:var(--mt-shadow)}.mt-review-card--quick{background:#f0fae8;border-color:#cdecb8}.mt-review-card--mistakes{background:#fff8e5;border-color:#f3df9c}.mt-review-card--boss{background:#fff0f0;border-color:#f5c9c9}.mt-review-card.is-disabled{filter:grayscale(.5);opacity:.55}.mt-review-card__icon{font-size:40px}.mt-review-card>b{margin-top:17px;font-size:8px;letter-spacing:.12em;color:#747b8f}.mt-review-card h2{margin:5px 0 9px;font-size:25px;letter-spacing:-.035em}.mt-review-card p{color:#6e7589;font-size:10px;line-height:1.6}.mt-review-card>div:last-child{margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:10px}.mt-review-card>div:last-child svg{width:18px!important;height:18px!important} .mt-memory-map{margin-top:18px;padding:21px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--mt-line);border-radius:20px;background:#fff}.mt-memory-map h2{margin:0 0 5px;font-size:21px}.mt-memory-map p{margin:0;color:var(--mt-muted);font-size:10px} /* ---------- Memory ---------- */ .mt-memory-head{max-width:780px;padding:10px 0 20px}.mt-back-link{margin-bottom:22px;padding:0;display:flex;align-items:center;gap:5px;border:0;background:none;color:#6f778b!important;font-size:10px;font-weight:850;cursor:pointer}.mt-back-link svg{width:16px!important;height:16px!important}.mt-memory-head h1{margin:0 0 12px;font-size:clamp(36px,5vw,60px);letter-spacing:-.05em;line-height:1}.mt-memory-head p{color:var(--mt-muted)} .mt-orbit-map{padding:24px;border-radius:28px;background:linear-gradient(145deg,#171d36,#222b4d);color:#fff;overflow:hidden}.mt-sun-core{font-size:66px;text-align:center;margin:5px 0 19px}.mt-planets-row{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.mt-planet{min-width:0;padding:10px 4px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.05);color:#dfe6ff!important;cursor:pointer}.mt-planet:hover,.mt-planet.is-active{background:rgba(124,92,252,.3);border-color:#8d74f6}.mt-planet span,.mt-planet b{display:block}.mt-planet span{font-size:27px}.mt-planet b{margin-top:3px;font-size:8px}.mt-planet-fact{margin-top:14px;padding:15px;display:flex;align-items:center;gap:12px;border-radius:17px;background:rgba(255,255,255,.07)}.mt-planet-fact>span{font-size:33px}.mt-planet-fact strong{font-size:12px}.mt-planet-fact p{margin:2px 0 0;color:#aeb9d8;font-size:9px} .mt-flash-zone{margin-top:18px;padding:24px;border:1px solid var(--mt-line);border-radius:28px;background:#fff}.mt-flash-card{position:relative;width:min(650px,100%);height:300px;margin:0 auto;border:0;background:none;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1);cursor:pointer}.mt-flash-card.is-flipped{transform:rotateY(180deg)}.mt-flash-front,.mt-flash-back{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.mt-flash-front{background:linear-gradient(145deg,#f2efff,#fbfaff);border:2px solid #e2dcff}.mt-flash-back{background:#171c30;color:#fff;transform:rotateY(180deg)}.mt-flash-card b{font-size:52px}.mt-flash-card strong{margin-top:10px;font-size:30px}.mt-flash-card p{max-width:520px;margin:13px auto 0;color:#bec6dc;font-size:12px;line-height:1.7;text-align:center}.mt-flash-card small{margin-top:20px;color:#8f97aa;font-size:8px;font-weight:900;letter-spacing:.12em}.mt-flash-nav{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:15px}.mt-flash-nav button{width:38px;height:38px;border:1px solid var(--mt-line);border-radius:12px;background:#fff;cursor:pointer}.mt-flash-dots{display:flex;gap:5px}.mt-flash-dots i{width:7px;height:7px;border-radius:99px;background:#d9dde7}.mt-flash-dots i.is-active{width:20px;background:#7c5cfc}.mt-memory-cta,.mt-next-box{margin-top:18px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:20px;background:#ecfbe1;border:1px solid #ccecb6}.mt-memory-cta>div,.mt-next-box>div{display:flex;align-items:center;gap:13px}.mt-memory-cta strong,.mt-memory-cta small,.mt-next-box strong,.mt-next-box small{display:block}.mt-memory-cta strong,.mt-next-box strong{font-size:12px}.mt-memory-cta small,.mt-next-box small{font-size:9px;color:#68745e;margin-top:2px} /* ---------- Quiz ---------- */ .mt-quiz-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:76px 1fr 92px;background:#f8f9fc}.mt-quiz-top{padding:0 clamp(18px,4vw,55px);display:grid;grid-template-columns:48px 1fr 130px;align-items:center;gap:22px;border-bottom:1px solid var(--mt-line);background:#fff}.mt-quiz-close{width:40px;height:40px;border:0;border-radius:12px;background:#f1f3f7;color:#71788c!important;cursor:pointer}.mt-quiz-progress{height:13px;border-radius:99px;background:#e7eaf0;overflow:hidden}.mt-quiz-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#58cc02,#75df2c);transition:width .3s ease}.mt-quiz-energy{display:flex;justify-content:flex-end;gap:3px}.mt-quiz-energy i{font-style:normal;color:#d8dce6;font-size:17px;transition:.2s}.mt-quiz-energy i.is-live{color:#ff4b4b;filter:drop-shadow(0 3px 5px rgba(255,75,75,.18))} .mt-quiz-stage{width:min(1040px,calc(100% - 38px));margin:auto;padding:40px 0;display:grid;grid-template-columns:190px minmax(0,1fr);gap:25px;align-items:start}.mt-quiz-coach{position:sticky;top:112px;text-align:center}.mt-coach-bubble{position:relative;margin:0 auto 11px;padding:12px 13px;border:1px solid #e0e4ed;border-radius:17px 17px 17px 4px;background:#fff;color:#596176;font-size:9px;font-weight:750;line-height:1.45;box-shadow:0 10px 30px rgba(34,42,70,.06)}.mt-coach-bubble::after{content:"";position:absolute;left:19px;bottom:-7px;width:13px;height:13px;background:#fff;border-right:1px solid #e0e4ed;border-bottom:1px solid #e0e4ed;transform:rotate(45deg)}.mt-quiz-coach .mt-mascot{margin:0 auto}.mt-combo-box{margin:2px auto 0;width:88px;padding:8px;border-radius:13px;background:#171c30;color:#fff}.mt-combo-box span,.mt-combo-box strong{display:block}.mt-combo-box span{font-size:7px;color:#929bb4;letter-spacing:.1em}.mt-combo-box strong{font-size:17px} .mt-question-card{padding:clamp(25px,4vw,43px);border:2px solid #e3e6ed;border-bottom-width:5px;border-radius:28px;background:#fff;box-shadow:0 12px 45px rgba(36,43,69,.05)}.mt-question-card.is-correct{border-color:#bce6a0}.mt-question-card.is-wrong{border-color:#f2c5c5}.mt-question-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.mt-question-meta span{color:#7c5cfc;font-size:9px;font-weight:1000;letter-spacing:.12em}.mt-question-meta b{color:#9299aa;font-size:10px}.mt-question-card h1{max-width:850px;margin:0 0 24px;font-size:clamp(27px,3.4vw,39px);line-height:1.16;letter-spacing:-.035em}.mt-hint{margin:-8px 0 19px;padding:13px 15px;display:flex;gap:9px;border-radius:15px;background:#fff8db;color:#635d43}.mt-hint span{font-size:20px}.mt-hint p{margin:0;font-size:10px;line-height:1.55} .mt-options{display:grid;gap:10px}.mt-option{position:relative;min-height:66px;padding:10px 15px;display:grid;grid-template-columns:43px 1fr 28px;align-items:center;gap:12px;text-align:left;border:2px solid #e2e5ec;border-bottom-width:4px;border-radius:17px;background:#fff;cursor:pointer;transition:.15s ease}.mt-option:hover:not(:disabled){border-color:#cfd4df;background:#fafbfe;transform:translateY(-1px)}.mt-option>span{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#f1f3f7;color:#6d7487;font-size:11px;font-weight:950}.mt-option strong{font-size:12px;line-height:1.45}.mt-option i{font-style:normal}.mt-option i svg{width:21px!important;height:21px!important}.mt-option.is-selected{border-color:#7c5cfc;background:#f4f1ff}.mt-option.is-selected>span{background:#7c5cfc;color:#fff}.mt-option.is-answer{border-color:#58cc02;background:#f1fbe9}.mt-option.is-answer>span{background:#58cc02;color:#fff}.mt-option.is-wrong{border-color:#ff4b4b;background:#fff1f1}.mt-option.is-wrong>span{background:#ff4b4b;color:#fff} .mt-tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mt-tf button{min-height:120px;display:flex;align-items:center;justify-content:center;gap:13px;border:2px solid #e2e5ec;border-bottom-width:5px;border-radius:20px;background:#fff;cursor:pointer}.mt-tf button span{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:#f0f3f7;font-size:24px;font-weight:900}.mt-tf button strong{font-size:14px}.mt-tf button.is-selected{border-color:#7c5cfc;background:#f4f1ff}.mt-tf button.is-selected span{background:#7c5cfc;color:#fff}.mt-tf button.is-answer{border-color:#58cc02;background:#f0fbe8} .mt-order>p{color:var(--mt-muted);font-size:10px}.mt-order-item{min-height:58px;margin-bottom:8px;padding:7px 10px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;border:2px solid #e4e7ee;border-radius:15px;background:#fff}.mt-order-item>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1f3f7;color:#72798d;font-size:10px;font-weight:900}.mt-order-item strong{font-size:11px}.mt-order-item>div{display:flex;gap:5px}.mt-order-item button{width:34px;height:34px;border:1px solid #dfe3eb;border-radius:9px;background:#fff;cursor:pointer}.mt-order-item button:disabled{opacity:.25}.mt-order-item svg{width:16px!important;height:16px!important}.mt-order-item.is-correct{border-color:#58cc02;background:#f2fbe9}.mt-order-item.is-wrong{border-color:#ffb9b9;background:#fff5f5} .mt-sequence{padding:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;border-radius:18px;background:#f7f8fb;color:#3d4559;font-size:13px;font-weight:750;line-height:2}.mt-sequence select{height:42px;padding:0 32px 0 12px;border:2px solid #dce1e9;border-radius:11px;background:#fff;color:#171b2d;font-weight:900} .mt-text-answer textarea{width:100%;min-height:155px;padding:16px;border:2px solid #dfe3eb;border-radius:18px;background:#fbfcfe;color:#202538;font-size:13px;line-height:1.65;resize:vertical;outline:none}.mt-text-answer textarea:focus{border-color:#7c5cfc;box-shadow:0 0 0 4px rgba(124,92,252,.08)}.mt-text-answer>div{margin-top:7px;display:flex;justify-content:space-between;color:#9097a8;font-size:9px} .mt-feedback{margin-top:20px;padding:16px;display:flex;gap:13px;border-radius:18px}.mt-feedback.is-correct{background:#edfbe4;color:#2c6417}.mt-feedback.is-wrong{background:#fff0f0;color:#763838}.mt-feedback-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;background:#fff;font-size:20px;font-weight:1000}.mt-feedback strong{display:block;margin-bottom:4px;font-size:12px}.mt-feedback p{margin:0;font-size:10px;line-height:1.6}.mt-reference{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.6)}.mt-reference span{font-size:7px;font-weight:1000;letter-spacing:.1em}.mt-reference p{margin-top:2px!important}.mt-xp-gain{display:inline-block;margin-top:9px;padding:4px 8px;border-radius:99px;background:#fff;font-size:8px} .mt-quiz-footer{padding:0 clamp(18px,4vw,55px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--mt-line);background:#fff}.mt-help-btn,.mt-skip-btn{border:0;background:none;color:#777f92!important;font-size:9px;font-weight:950;letter-spacing:.05em;cursor:pointer}.mt-help-btn{display:flex;align-items:center;gap:6px}.mt-help-btn svg{width:17px!important;height:17px!important}.mt-quiz-footer__right{display:flex;align-items:center;gap:12px}.mt-quiz-footer .mt-btn{min-width:180px} /* ---------- Result ---------- */ .mt-result-hero{padding:clamp(28px,5vw,54px);text-align:center;border:1px solid var(--mt-line);border-radius:30px;background:linear-gradient(180deg,#fff,#fafbfe);box-shadow:var(--mt-shadow)}.mt-result-celebration{height:205px;position:relative;display:grid;place-items:center;margin-bottom:5px}.mt-result-celebration .mt-result-icon{position:absolute;right:calc(50% - 115px);top:18px;width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#fff;font-size:30px;box-shadow:0 10px 28px rgba(30,40,70,.12);transform:rotate(7deg)}.mt-result-hero h1{margin:4px auto 9px;max-width:780px;font-size:clamp(35px,5vw,58px);line-height:1;letter-spacing:-.05em}.mt-result-hero>p{max-width:680px;margin:0 auto 24px;color:var(--mt-muted);font-size:12px;line-height:1.65}.mt-result-score{max-width:760px;margin:0 auto;display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center}.mt-score-circle{--score:0;width:175px;height:175px;margin:auto;position:relative;display:grid;place-items:center;align-content:center;border-radius:50%;background:conic-gradient(#58cc02 calc(var(--score)*1%),#e8ecf2 0)}.mt-score-circle::before{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff}.mt-score-circle strong,.mt-score-circle span{position:relative;z-index:1}.mt-score-circle strong{font-size:39px;line-height:1}.mt-score-circle span{margin-top:5px;color:#8991a3;font-size:9px}.mt-result-numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mt-result-numbers>div{padding:15px;border-radius:16px;background:#f5f7fa;text-align:left}.mt-result-numbers strong,.mt-result-numbers span{display:block}.mt-result-numbers strong{font-size:19px}.mt-result-numbers span{color:var(--mt-muted);font-size:8px}.mt-result-actions{margin-top:25px;display:flex;justify-content:center;gap:10px} .mt-result-review{margin-top:20px;padding:25px;border:1px solid var(--mt-line);border-radius:26px;background:#fff}.mt-result-errors{display:grid;gap:8px}.mt-error-item{border:1px solid #e5e8ef;border-radius:16px;overflow:hidden;background:#fff}.mt-error-item summary{min-height:58px;padding:10px 14px;display:grid;grid-template-columns:35px 1fr 24px;align-items:center;gap:10px;cursor:pointer;list-style:none}.mt-error-item summary::-webkit-details-marker{display:none}.mt-error-item summary>span{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#fff0f0;color:#c94646;font-size:9px;font-weight:950}.mt-error-item summary strong{font-size:10px}.mt-error-item summary svg{width:16px!important;height:16px!important}.mt-error-item[open] summary svg{transform:rotate(180deg)}.mt-error-item>div{padding:0 17px 16px 59px;color:#686f82}.mt-error-item p{font-size:9px;line-height:1.6}.mt-perfect-box{margin-top:18px;padding:20px;display:flex;align-items:center;gap:15px;border-radius:20px;background:#effae8;border:1px solid #cdebb8}.mt-perfect-box>span{font-size:34px}.mt-perfect-box strong{font-size:13px}.mt-perfect-box p{margin:3px 0 0;color:#68745e;font-size:9px}.mt-next-box{background:#eef1ff;border-color:#d7dcff}.mt-next-box small{color:#737b99} /* ---------- Progress ---------- */ .mt-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.mt-stat-card{padding:18px;border:1px solid var(--mt-line);border-radius:19px;background:#fff}.mt-stat-card span,.mt-stat-card strong,.mt-stat-card small{display:block}.mt-stat-card>span{font-size:25px}.mt-stat-card strong{margin-top:7px;font-size:24px}.mt-stat-card small{color:var(--mt-muted);font-size:9px} .mt-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.mt-progress-card{padding:22px;border:1px solid var(--mt-line);border-radius:24px;background:#fff}.mt-week-chart{height:220px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:8px;padding-top:20px}.mt-day-bar{text-align:center}.mt-day-bar>div{height:150px;padding:0 9%;display:flex;align-items:flex-end}.mt-day-bar>div span{display:block;width:100%;min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(#7c5cfc,#a28cff)}.mt-day-bar b,.mt-day-bar small{display:block}.mt-day-bar b{margin-top:7px;font-size:9px}.mt-day-bar small{color:var(--mt-muted);font-size:7px} .mt-skills{display:grid;gap:10px}.mt-skill-row{display:grid;grid-template-columns:43px 1fr 44px;align-items:center;gap:10px}.mt-skill-row>span{width:41px;height:41px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--skill),#fff 84%);font-size:21px}.mt-skill-row>div{min-width:0}.mt-skill-row strong,.mt-skill-row small{display:block}.mt-skill-row strong{font-size:10px}.mt-skill-row small{margin:2px 0 6px;color:var(--mt-muted);font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mt-skill-row .mt-line-progress{height:5px}.mt-skill-row>b{text-align:right;font-size:10px} .mt-history-list,.mt-badges{display:grid;gap:9px}.mt-history-row{padding:10px 0;display:grid;grid-template-columns:34px 1fr 48px 55px;align-items:center;gap:8px;border-bottom:1px solid #eef0f5}.mt-history-row:last-child{border-bottom:0}.mt-history-row>span{font-size:22px}.mt-history-row strong,.mt-history-row small{display:block}.mt-history-row strong{font-size:9px}.mt-history-row small{margin-top:2px;color:var(--mt-muted);font-size:7px}.mt-history-row>b{font-size:11px}.mt-history-row>em{font-style:normal;color:#6d54dd;font-size:8px;font-weight:900}.mt-badge-card{padding:11px;display:flex;align-items:center;gap:10px;border-radius:15px;background:#f7f8fb}.mt-badge-card>span{font-size:27px}.mt-badge-card strong,.mt-badge-card small{display:block}.mt-badge-card strong{font-size:9px}.mt-badge-card small{margin-top:2px;color:var(--mt-muted);font-size:7px;line-height:1.4} /* ---------- Profile ---------- */ .mt-profile-head{min-height:190px;padding:25px;display:grid;grid-template-columns:85px 1fr 150px;align-items:center;gap:18px;border-radius:26px;background:linear-gradient(135deg,#191f39,#252c50);color:#fff}.mt-profile-avatar{width:78px;height:78px;display:grid;place-items:center;border-radius:25px;background:#7c5cfc;border:4px solid rgba(255,255,255,.13);font-size:31px;font-weight:1000}.mt-profile-head h1{margin:2px 0 4px;font-size:34px}.mt-profile-head p{margin:0;color:#bfc7df;font-size:10px}.mt-profile-head .mt-mascot{justify-self:end}.mt-settings-card{margin-top:13px;padding:19px;border:1px solid var(--mt-line);border-radius:20px;background:#fff}.mt-settings-title,.mt-settings-title>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:13px}.mt-settings-title>div:first-child{justify-content:flex-start}.mt-settings-title>div:first-child>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f4f5f9;font-size:19px}.mt-settings-title strong,.mt-settings-title small{display:block}.mt-settings-title strong{font-size:11px}.mt-settings-title small{margin-top:2px;color:var(--mt-muted);font-size:8px}.mt-profile-name{display:flex;gap:8px;margin-top:15px}.mt-profile-name input{flex:1;min-width:0;height:48px;padding:0 14px;border:2px solid #e0e4ec;border-radius:13px;background:#fafbfc;font-weight:850;outline:none}.mt-profile-name input:focus{border-color:#7c5cfc}.mt-toggle{width:47px;height:27px;padding:3px;border:0;border-radius:99px;background:#d9dde6;cursor:pointer;transition:.2s}.mt-toggle i{display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(20,25,45,.2);transition:.2s}.mt-toggle.is-on{background:#58cc02}.mt-toggle.is-on i{transform:translateX(20px)}.mt-privacy-card{margin-top:13px;padding:17px;display:flex;gap:12px;border-radius:18px;background:#eef8ff;border:1px solid #d4ebfa}.mt-privacy-card>span{font-size:25px}.mt-privacy-card strong{font-size:10px}.mt-privacy-card p{margin:3px 0 0;color:#637381;font-size:8px;line-height:1.5}.mt-danger-link{margin-top:18px;padding:0;border:0;background:none;color:#b24d4d!important;font-size:9px;text-decoration:underline;cursor:pointer} /* ---------- Notifications ---------- */ .mt-notification-list{display:grid;gap:10px;margin-top:18px}.mt-notification-card{padding:17px;display:grid;grid-template-columns:50px 1fr 25px;align-items:center;gap:12px;text-align:left;border:1px solid var(--mt-line);border-bottom-width:3px;border-radius:19px;background:#fff;cursor:pointer;transition:.16s}.mt-notification-card:hover{transform:translateY(-2px);box-shadow:var(--mt-shadow)}.mt-notification-card>span{width:47px;height:47px;display:grid;place-items:center;border-radius:14px;background:#f4f5fa;font-size:24px}.mt-notification-card b,.mt-notification-card strong{display:block}.mt-notification-card b{color:#7c5cfc;font-size:7px;letter-spacing:.1em}.mt-notification-card strong{margin:2px 0;font-size:11px}.mt-notification-card p{margin:0;color:var(--mt-muted);font-size:8px}.mt-notification-card>svg{width:17px!important;height:17px!important;color:#9aa1b1} /* ---------- Toast & Confetti ---------- */ .mt-toast-layer{position:fixed;z-index:99999;right:22px;top:22px;display:grid;gap:8px;pointer-events:none}.mt-toast{max-width:360px;padding:13px 16px;border-radius:14px;background:#171c30;color:#fff;font-size:10px;font-weight:800;box-shadow:0 18px 45px rgba(15,20,40,.22);transform:translateY(-10px);opacity:0;transition:.2s ease}.mt-toast.is-visible{transform:translateY(0);opacity:1}.mt-toast--achievement,.mt-toast--level{background:#6d51e3}.mt-confetti{position:fixed;z-index:99998;inset:0;overflow:hidden;pointer-events:none}.mt-confetti i{position:absolute;top:-30px;color:#7c5cfc;font-style:normal;animation:mtFall 2.4s linear forwards}.mt-confetti i:nth-child(3n){color:#58cc02}.mt-confetti i:nth-child(4n){color:#ffc800}.mt-confetti i:nth-child(5n){color:#1cb0f6}@keyframes mtFall{to{transform:translateY(110vh) rotate(700deg);opacity:.15}} .mt-no-motion *, .mt-no-motion *::before, .mt-no-motion *::after { animation:none!important; transition:none!important; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { :root{--mt-sidebar:205px} .mt-main{grid-template-columns:minmax(0,1fr) 270px;gap:22px;padding:30px} .mt-home-hero{grid-template-columns:1fr 280px}.mt-home-mascot{min-width:260px}.mt-mascot-bubble{right:53%;width:155px} .mt-review-grid{grid-template-columns:1fr 1fr}.mt-review-card--boss{grid-column:1/-1;min-height:220px} } @media (max-width: 960px) { :root{--mt-sidebar:0px} .mt-sidebar{display:none}.mt-main-wrap{margin-left:0;padding-bottom:84px}.mt-mobile-nav{position:fixed;z-index:90;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));height:66px;padding:6px;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #e1e5ed;border-radius:20px;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(30,38,65,.16)}.mt-mobile-nav button{display:grid;place-items:center;align-content:center;gap:1px;border:0;border-radius:14px;background:none;color:#858b9b!important;cursor:pointer}.mt-mobile-nav button.is-active{background:#f1eeff;color:#6d51e3!important}.mt-mobile-nav svg{width:20px!important;height:20px!important}.mt-mobile-nav span{font-size:7px;font-weight:900} .mt-top-status{height:64px;padding:0 16px}.mt-main{grid-template-columns:1fr;padding:20px 16px}.mt-right-rail{display:none} .mt-page-head{grid-template-columns:1fr 170px}.mt-mode-grid{grid-template-columns:1fr 1fr} .mt-lesson-stage{grid-template-columns:250px 1fr;gap:28px}.mt-lesson-visual{min-height:320px} .mt-progress-grid{grid-template-columns:1fr}.mt-stat-grid{grid-template-columns:1fr 1fr} .mt-quiz-stage{grid-template-columns:150px minmax(0,1fr)} } @media (max-width: 760px) { .mt-onboarding{grid-template-columns:1fr;padding:24px 18px 38px;align-content:center}.mt-onboarding__mascot{min-height:275px}.mt-onboarding__mascot .mt-mascot{--s:.92}.mt-onboarding__panel{max-width:none}.mt-speech::before{left:58px;top:-15px;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);border-bottom:0}.mt-name-form>div{display:grid}.mt-name-form button{min-width:0;width:100%} .mt-home-hero{grid-template-columns:1fr;padding:27px 22px}.mt-home-mascot{min-width:0;height:190px;justify-self:center}.mt-home-mascot .mt-mascot{--s:.78}.mt-mascot-bubble{right:55%;top:5%;width:145px}.mt-home-copy h1{font-size:39px}.mt-home-actions .mt-btn{flex:1 1 180px} .mt-mode-grid,.mt-review-grid{grid-template-columns:1fr}.mt-review-card--boss{grid-column:auto}.mt-course-feature{grid-template-columns:1fr}.mt-course-feature__planet{min-height:180px}.mt-course-feature__body{padding:23px}.mt-last-performance,.mt-first-performance{align-items:flex-start;flex-wrap:wrap}.mt-last-performance .mt-btn,.mt-first-performance .mt-btn{width:100%} .mt-page-head{grid-template-columns:1fr;padding:23px}.mt-head-mascot{display:none}.mt-learning-summary{grid-template-columns:1fr}.mt-learning-summary>div strong{margin-left:0}.mt-learning-summary>div small{margin-left:auto} .mt-path{padding:30px 16px 55px}.mt-path-node-wrap,.mt-path-step--right .mt-path-node-wrap{width:100%;flex-direction:row;text-align:left;margin:0}.mt-path-node{width:72px;height:72px;border-radius:24px;font-size:30px}.mt-path-line,.mt-path-step--right .mt-path-line{left:35px;right:auto;top:72px;width:0;height:100px;border:0;border-left:3px dashed rgba(255,255,255,.16);border-radius:0}.mt-path-step{min-height:145px}.mt-path-card{max-width:none;flex:1} .mt-lesson-shell{grid-template-rows:66px 1fr auto}.mt-lesson-top{grid-template-columns:42px 1fr 65px;padding:0 12px;gap:8px}.mt-lesson-progress i{width:24px}.mt-lesson-stage{grid-template-columns:1fr;width:calc(100% - 28px);padding:23px 0}.mt-lesson-visual{min-height:220px}.mt-lesson-icon{font-size:76px}.mt-lesson-visual .mt-mascot{--s:.45}.mt-lesson-card h1{font-size:39px}.mt-lesson-card>p{font-size:13px}.mt-lesson-footer{padding:14px;gap:12px}.mt-lesson-footer .mt-btn{flex:1} .mt-memory-map{align-items:flex-start;flex-direction:column}.mt-memory-map .mt-btn{width:100%}.mt-planets-row{grid-template-columns:repeat(4,1fr)}.mt-flash-card{height:285px}.mt-memory-cta,.mt-next-box{align-items:flex-start;flex-direction:column}.mt-memory-cta .mt-btn,.mt-next-box .mt-btn{width:100%} .mt-quiz-shell{grid-template-rows:66px 1fr auto}.mt-quiz-top{padding:0 12px;grid-template-columns:42px 1fr 82px;gap:9px}.mt-quiz-energy i{font-size:13px}.mt-quiz-stage{grid-template-columns:1fr;width:calc(100% - 24px);padding:20px 0}.mt-quiz-coach{position:static;display:grid;grid-template-columns:1fr 78px 62px;align-items:end;gap:8px;text-align:left}.mt-quiz-coach .mt-mascot{--s:.38;margin:0}.mt-coach-bubble{margin:0 0 7px;padding:10px;border-radius:13px}.mt-coach-bubble::after{left:auto;right:-6px;bottom:14px}.mt-combo-box{width:62px;margin:0 0 7px;padding:7px;text-align:center}.mt-question-card{padding:21px 17px;border-radius:22px}.mt-question-card h1{font-size:26px}.mt-option{grid-template-columns:38px 1fr 22px;padding:9px;gap:8px}.mt-option>span{width:34px;height:34px}.mt-tf{grid-template-columns:1fr}.mt-tf button{min-height:82px}.mt-sequence{font-size:11px;line-height:2.5}.mt-quiz-footer{padding:12px;align-items:center;gap:7px}.mt-quiz-footer__right{flex:1;justify-content:flex-end;gap:7px}.mt-quiz-footer .mt-btn{min-width:0;flex:1}.mt-skip-btn{padding:0 8px}.mt-help-btn{font-size:8px} .mt-result-score{grid-template-columns:1fr}.mt-result-numbers{grid-template-columns:1fr 1fr}.mt-result-actions{display:grid}.mt-result-actions .mt-btn{width:100%}.mt-error-item>div{padding-left:17px} .mt-profile-head{grid-template-columns:70px 1fr}.mt-profile-head>.mt-mascot{display:none}.mt-profile-avatar{width:64px;height:64px}.mt-profile-name{display:grid}.mt-stat-grid{grid-template-columns:1fr 1fr}.mt-progress-card{padding:17px} .mt-toast-layer{left:12px;right:12px;top:12px}.mt-toast{max-width:none} } @media (max-width: 480px) { .mt-top-status{justify-content:space-between}.mt-status-pill--xp{margin-left:auto}.mt-status-pill span{display:none}.mt-status-pill{padding:0 9px}.mt-home-copy h1{font-size:35px}.mt-home-mascot{height:160px}.mt-mascot-bubble{right:52%;width:130px;font-size:8px}.mt-mode-card{min-height:230px}.mt-section-head{align-items:flex-start}.mt-section-head .mt-text-btn{display:none}.mt-course-feature__planet{min-height:160px}.mt-review-card{min-height:260px}.mt-stat-grid{grid-template-columns:1fr 1fr}.mt-history-row{grid-template-columns:30px 1fr 40px}.mt-history-row>em{display:none}.mt-profile-head{padding:18px}.mt-settings-title{align-items:flex-start}.mt-settings-title>div:first-child>span{display:none}.mt-notification-card{grid-template-columns:42px 1fr 18px;padding:13px}.mt-notification-card>span{width:40px;height:40px;font-size:20px}.mt-flash-card{height:250px}.mt-flash-card strong{font-size:25px}.mt-flash-card b{font-size:42px}.mt-quiz-coach{grid-template-columns:1fr 68px 54px}.mt-quiz-coach .mt-mascot{--s:.34}.mt-question-card h1{font-size:23px}.mt-question-meta{margin-bottom:11px}.mt-result-hero{padding:26px 17px}.mt-result-celebration{height:175px}.mt-result-celebration .mt-mascot{--s:.8}.mt-result-numbers>div{padding:11px}.mt-result-numbers strong{font-size:16px} } @media (prefers-reduced-motion: reduce) { #acr-app *,#acr-app *::before,#acr-app *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* Biblioteca dinâmica de matérias */ .mt-subject-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .mt-subject-card { --subject:#7C5CFC; min-height:92px; padding:14px; display:grid; grid-template-columns:50px 1fr 22px; align-items:center; gap:12px; text-align:left; border:1px solid var(--mt-line); border-bottom:4px solid color-mix(in srgb,var(--subject),#000 12%); border-radius:19px; background:#fff; cursor:pointer; transition:.18s ease; } .mt-subject-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--subject),#fff 45%); box-shadow:var(--mt-shadow); } .mt-subject-card>span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--subject),#fff 86%); font-size:25px; } .mt-subject-card b,.mt-subject-card strong,.mt-subject-card small { display:block; } .mt-subject-card b { color:var(--subject); font-size:7px; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; } .mt-subject-card strong { margin:2px 0; font-size:12px; } .mt-subject-card small { color:var(--mt-muted); font-size:8px; } .mt-subject-card>svg { width:16px!important; height:16px!important; color:#9aa1b1; } @media (max-width:760px){.mt-subject-grid{grid-template-columns:1fr}} /* ======================================================================== MegaTitan v3 — Engineering Dark System ======================================================================== */ :root { --mt-bg: #070a10; --mt-surface: #0d121c; --mt-surface-2: #121925; --mt-surface-3: #182131; --mt-ink: #f4f7fb; --mt-muted: #8e9aab; --mt-line: rgba(255,255,255,.085); --mt-line-strong: rgba(255,255,255,.14); --mt-purple: #8b6cff; --mt-purple-dark: #6c4ce8; --mt-green: #6ee64a; --mt-green-dark: #42b92b; --mt-blue: #38c9ff; --mt-blue-dark: #159bd2; --mt-yellow: #ffd85a; --mt-red: #ff6878; --mt-cyan: #44e8ff; --mt-shadow: 0 22px 55px rgba(0,0,0,.28); --mt-shadow-strong: 0 34px 90px rgba(0,0,0,.42); } html, body.acr-standalone-page, .mt-app-shell, .mt-main-wrap { background:#070a10 !important; color:var(--mt-ink); } body.acr-standalone-page { color-scheme:dark; } #acr-app { background: radial-gradient(circle at 74% -10%, rgba(88,66,180,.13), transparent 31%), radial-gradient(circle at 5% 25%, rgba(24,143,181,.08), transparent 24%), #070a10; } #acr-app ::selection { background:rgba(68,232,255,.22); color:#fff; } #acr-app button, #acr-app input, #acr-app textarea, #acr-app select { -webkit-tap-highlight-color:transparent; } #acr-app button:focus-visible, #acr-app input:focus-visible, #acr-app textarea:focus-visible, #acr-app select:focus-visible, #acr-app [tabindex]:focus-visible { outline:2px solid #44e8ff !important; outline-offset:3px; box-shadow:0 0 0 5px rgba(68,232,255,.12); } /* Mascote: metal escuro e leitura forte do visor */ .mt-mascot { filter:drop-shadow(0 calc(24px * var(--s)) calc(28px * var(--s)) rgba(0,0,0,.45)); } .mt-mascot__head { border-color:#05070d; background:linear-gradient(145deg,#263247 0 48%,#151c29 49% 100%); box-shadow:inset 0 calc(-8px * var(--s)) 0 rgba(0,0,0,.18), inset 0 calc(3px * var(--s)) 0 rgba(255,255,255,.06); } .mt-mascot__visor { border-color:#05070d; background:linear-gradient(90deg,#05080f,#0d1c2e); box-shadow:inset 0 0 calc(18px * var(--s)) rgba(68,232,255,.28), 0 0 calc(12px * var(--s)) rgba(68,232,255,.08); } .mt-mascot__body { border-color:#05070d; background:linear-gradient(145deg,#765cff,#4935bd); box-shadow:inset 0 calc(-10px * var(--s)) 0 rgba(20,11,74,.3), 0 0 calc(22px * var(--s)) rgba(139,108,255,.12); } .mt-mascot__arm { border-color:#05070d; background:#202b3e; } .mt-mascot__arm i, .mt-mascot__ear { border-color:#05070d; } .mt-mascot__antenna, .mt-mascot__neck { background:#05070d; } .mt-mascot__antenna i { border-color:#05070d; } .mt-mascot__shadow { background:rgba(0,0,0,.5); } /* Shell e navegação */ .mt-sidebar { background:rgba(8,12,18,.96); border-right:1px solid var(--mt-line); box-shadow:18px 0 60px rgba(0,0,0,.2); } .mt-logo__mark { background:linear-gradient(145deg,#8b6cff,#5436cb); box-shadow:0 12px 30px rgba(102,75,224,.25); } .mt-logo strong { color:#fff; } .mt-logo b { color:#9a84ff; } .mt-sidebar nav button, .mt-sidebar__bottom > button { color:#8491a3; border:1px solid transparent; } .mt-sidebar nav button:hover, .mt-sidebar__bottom > button:hover { background:#111823; color:#e9eef6; border-color:rgba(255,255,255,.06); } .mt-sidebar nav button.is-active { border-color:rgba(139,108,255,.34); background:linear-gradient(135deg,rgba(139,108,255,.17),rgba(68,232,255,.04)); color:#b7a7ff; box-shadow:inset 3px 0 0 #8b6cff; } .mt-mini-user { background:#101722; border:1px solid var(--mt-line); } .mt-mini-user > span { background:#1c2534; border:1px solid var(--mt-line); } .mt-top-status { background:rgba(7,10,16,.84); border-bottom:1px solid var(--mt-line); box-shadow:0 14px 45px rgba(0,0,0,.18); } .mt-status-pill { background:#0e141e; border:1px solid var(--mt-line); box-shadow:inset 0 1px rgba(255,255,255,.025); } .mt-status-pill span { color:#78869a; } .mt-status-avatar { background:#151d2a; border:1px solid var(--mt-line-strong); } .mt-main { max-width:1460px; } .mt-rail-card, .mt-progress-card, .mt-settings-card, .mt-memory-map, .mt-flash-zone, .mt-notification-card, .mt-subject-card { background:#0d131d; border-color:var(--mt-line); box-shadow:0 14px 38px rgba(0,0,0,.16); } .mt-rail-card:hover, .mt-progress-card:hover { border-color:rgba(255,255,255,.12); } .mt-goal-ring { background:conic-gradient(var(--mt-green) calc(var(--goal)*1%),#1b2431 0); } .mt-goal-ring::before { background:#0d131d; } .mt-line-progress { background:#1a2230; box-shadow:inset 0 1px 2px rgba(0,0,0,.34); } .mt-line-progress > span { background:linear-gradient(90deg,#7b5cff,#4fdcf8); } /* Botões: sistema único e sempre legível */ .mt-btn { min-height:52px; padding:0 20px; border:1px solid rgba(255,255,255,.08); border-radius:15px; font-size:11px; letter-spacing:.055em; box-shadow:0 11px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08); transform:translateZ(0); } .mt-btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 16px 34px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.1); } .mt-btn:active:not(:disabled) { transform:translateY(1px) scale(.992); } .mt-btn:disabled { opacity:.32; filter:saturate(.5); } .mt-btn--green { color:#071007 !important; background:linear-gradient(180deg,#7bef56,#5ed63e); border-color:#8af56a; border-bottom:3px solid #2e8e22; box-shadow:0 12px 30px rgba(89,220,64,.17), inset 0 1px rgba(255,255,255,.35); } .mt-btn--blue { color:#041119 !important; background:linear-gradient(180deg,#56dbff,#31bdea); border-color:#6de1ff; border-bottom:3px solid #157da7; } .mt-btn--dark { color:#f8fbff !important; background:linear-gradient(180deg,#1c2634,#111824); border-color:#2b3748; border-bottom:3px solid #05080d; } .mt-btn--ghost { color:#dce4ef !important; background:#111821; border:1px solid #283343; border-bottom:3px solid #070b11; } .mt-btn--ghost:hover:not(:disabled) { background:#17202d; border-color:#3a485c; } .mt-text-btn, .mt-back-link { color:#a995ff !important; } /* Home */ .mt-home-hero { background: linear-gradient(130deg,rgba(139,108,255,.17),transparent 43%), radial-gradient(circle at 83% 45%,rgba(68,232,255,.12),transparent 28%), #0d131e; border:1px solid rgba(255,255,255,.09); box-shadow:var(--mt-shadow-strong), inset 0 1px rgba(255,255,255,.035); } .mt-home-hero::after { background:rgba(68,232,255,.045); } .mt-mode-card, .mt-review-card { color:#eef3f8; border:1px solid var(--mt-line-strong); border-bottom:3px solid rgba(255,255,255,.07); background:#0e151f; box-shadow:0 14px 38px rgba(0,0,0,.16); } .mt-mode-card:hover, .mt-review-card:hover:not(:disabled) { transform:translateY(-3px); border-color:rgba(255,255,255,.18); box-shadow:0 22px 48px rgba(0,0,0,.27); } .mt-mode-card--learn { background:linear-gradient(145deg,rgba(110,230,74,.095),rgba(13,21,31,.96) 48%); border-color:rgba(110,230,74,.2); } .mt-mode-card--review { background:linear-gradient(145deg,rgba(56,201,255,.10),rgba(13,21,31,.96) 48%); border-color:rgba(56,201,255,.2); } .mt-mode-card__icon { background:#151e2b; box-shadow:none; border:1px solid var(--mt-line); } .mt-mode-card p, .mt-review-card p { color:#929fb0; opacity:1; } .mt-review-card--quick { background:linear-gradient(145deg,rgba(110,230,74,.09),#0e151f 48%); border-color:rgba(110,230,74,.18); } .mt-review-card--mistakes { background:linear-gradient(145deg,rgba(255,216,90,.08),#0e151f 48%); border-color:rgba(255,216,90,.18); } .mt-review-card--boss { background:linear-gradient(145deg,rgba(255,104,120,.08),#0e151f 48%); border-color:rgba(255,104,120,.18); } /* Cabeçalhos e trilhas */ .mt-page-head { background:linear-gradient(140deg,#101722,#0b1018); border-color:var(--mt-line); box-shadow:0 18px 42px rgba(0,0,0,.18); } .mt-page-head--learn { background:linear-gradient(140deg,rgba(110,230,74,.08),#0d131d 45%,#090e15); } .mt-page-head--review { background:linear-gradient(140deg,rgba(56,201,255,.08),#0d131d 45%,#090e15); } .mt-page-head p { color:#919daf; } .mt-path { background:linear-gradient(180deg,#0d1420,#080c13); border:1px solid var(--mt-line); box-shadow:inset 0 1px rgba(255,255,255,.025); } .mt-path-card { background:rgba(16,24,36,.8); border-color:rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(0,0,0,.16); } .mt-path-card p, .mt-path-card > span { color:#8997aa; } .mt-path-node { box-shadow:0 18px 36px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.14); } /* Lições e memória */ .mt-lesson-shell { background:#070a10; } .mt-lesson-top, .mt-lesson-footer { background:#0b1018; border-color:var(--mt-line); } .mt-lesson-top > button { background:#121a26; color:#dce5ef; border:1px solid var(--mt-line); } .mt-lesson-progress i { background:#1b2431; } .mt-lesson-card > p { color:#96a2b3; } .mt-titan-comment { background:#101722; color:#b8c2d0; box-shadow:none; } .mt-memory-map p, .mt-memory-head p { color:#8e9aab; } .mt-planet { background:#111925 !important; border-color:var(--mt-line) !important; color:#dce5ef !important; } .mt-planet:hover, .mt-planet.is-active { border-color:#4bcfe9 !important; background:#172331 !important; } .mt-planet-fact { background:#0d151f !important; border-color:var(--mt-line) !important; } .mt-flash-front { background:linear-gradient(145deg,#131b28,#0d131d); border-color:#293548; } .mt-flash-back { background:linear-gradient(145deg,#17142b,#0c1018); border:2px solid rgba(139,108,255,.28); } .mt-flash-nav button { background:#111821; border-color:#273242; color:#dce4ef; } .mt-flash-dots i { background:#263143; } .mt-memory-cta, .mt-next-box { background:rgba(110,230,74,.06); border-color:rgba(110,230,74,.16); } .mt-memory-cta small, .mt-next-box small { color:#8fa184; } /* Quiz: foco máximo no conteúdo */ .mt-quiz-shell { background:#070a10; } .mt-quiz-top { background:rgba(7,10,16,.95); border-bottom:1px solid var(--mt-line); box-shadow:0 12px 36px rgba(0,0,0,.22); } .mt-quiz-close { background:#101722; border:1px solid var(--mt-line); color:#a7b2c1 !important; } .mt-quiz-close:hover { background:#18212e; color:#fff !important; } .mt-quiz-progress { background:#171f2b; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); } .mt-quiz-progress span { background:linear-gradient(90deg,#67e648,#39d7ff); box-shadow:0 0 16px rgba(68,232,255,.15); } .mt-quiz-energy i { color:#2d3542; } .mt-quiz-energy i.is-live { color:#ff6d7b; filter:drop-shadow(0 0 6px rgba(255,104,120,.28)); } .mt-quiz-stage { width:min(1100px,calc(100% - 40px)); gap:34px; } .mt-coach-bubble { background:#0f1620; border-color:var(--mt-line); color:#a9b4c3; box-shadow:0 18px 38px rgba(0,0,0,.18); } .mt-coach-bubble::after { background:#0f1620; border-color:var(--mt-line); } .mt-combo-box { background:#0e151f; border:1px solid rgba(139,108,255,.25); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.2); } .mt-question-card { padding:clamp(28px,4vw,48px); background:linear-gradient(180deg,#101722,#0c121b); border:1px solid rgba(255,255,255,.1); border-bottom:3px solid rgba(255,255,255,.055); border-radius:25px; box-shadow:0 28px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025); } .mt-question-card.is-correct { border-color:rgba(110,230,74,.38); box-shadow:0 25px 65px rgba(0,0,0,.28),0 0 0 1px rgba(110,230,74,.06); } .mt-question-card.is-wrong { border-color:rgba(255,104,120,.34); } .mt-question-meta span { color:#a995ff; } .mt-question-meta b { color:#6f7b8d; } .mt-question-card h1 { color:#f7f9fc; font-weight:900; } .mt-answer-zone { margin-top:6px; } .mt-hint { background:rgba(255,216,90,.07); border:1px solid rgba(255,216,90,.16); color:#d8ca91; } .mt-option, .mt-tf button { background:#121a25; border:1px solid #273242; border-bottom:3px solid #080c12; color:#e9eef5; box-shadow:inset 0 1px rgba(255,255,255,.025); } .mt-option:hover:not(:disabled), .mt-tf button:hover:not(:disabled) { background:#172230; border-color:#3a485b; transform:translateY(-1px); } .mt-option > span, .mt-tf button span { background:#1c2634; color:#a6b1c0; } .mt-option.is-selected, .mt-tf button.is-selected { border-color:#8b6cff; background:rgba(139,108,255,.12); box-shadow:0 0 0 1px rgba(139,108,255,.13), inset 0 1px rgba(255,255,255,.03); } .mt-option.is-selected > span, .mt-tf button.is-selected span { background:#8b6cff; color:#fff; } .mt-option.is-answer, .mt-tf button.is-answer { border-color:#55d33d; background:rgba(110,230,74,.08); } .mt-option.is-wrong { border-color:#ff6878; background:rgba(255,104,120,.07); } /* Ordenação — Pointer Events, sem setas primitivas */ .mt-order { user-select:none; } .mt-order-guide { margin-bottom:14px; padding:13px 14px; display:flex; align-items:center; gap:11px; border:1px solid rgba(68,232,255,.14); border-radius:15px; background:rgba(68,232,255,.045); } .mt-order-guide > span { width:37px; height:37px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:#142331; color:#56d9f3; } .mt-order-guide svg { width:19px !important; height:19px !important; } .mt-order-guide strong, .mt-order-guide small { display:block; } .mt-order-guide strong { color:#c9f5ff; font-size:8px; letter-spacing:.12em; } .mt-order-guide small { margin-top:3px; color:#7f91a4; font-size:9px; line-height:1.45; } .mt-order-stack { display:grid; gap:9px; } .mt-order-item { min-height:66px; margin:0; padding:8px 9px 8px 11px; grid-template-columns:42px 1fr 48px; gap:12px; background:#121a25; border:1px solid #283445; border-bottom:3px solid #080c12; border-radius:17px; color:#edf2f7; box-shadow:0 8px 22px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025); transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease; } .mt-order-item.is-sortable { cursor:default; } .mt-order-item.is-sortable:hover { background:#162130; border-color:#3a495d; } .mt-order-item.is-pressed { border-color:#4b667d; } .mt-order-item.is-dragging { z-index:20; transform:scale(1.018); border-color:#44e8ff; background:#172535; box-shadow:0 20px 46px rgba(0,0,0,.38),0 0 0 1px rgba(68,232,255,.16); } .mt-order-stack.is-sorting .mt-order-item:not(.is-dragging) { opacity:.68; } .mt-order-item.is-key-moved { border-color:#8b6cff; box-shadow:0 0 0 2px rgba(139,108,255,.12); } .mt-order-rank { width:38px !important; height:38px !important; border-radius:11px !important; background:#1d2735 !important; color:#8c9aae !important; } .mt-order-item strong { font-size:13px; } .mt-order-grip { width:44px !important; height:44px !important; display:grid; place-items:center; border:1px solid #314052 !important; border-radius:12px !important; background:#192432 !important; color:#95a5b8 !important; cursor:grab !important; touch-action:none; user-select:none; } .mt-order-grip:hover { color:#d9f9ff !important; border-color:#4d687e !important; background:#1e2d3c !important; } .mt-order-grip:active { cursor:grabbing !important; } .mt-order-grip svg { width:20px !important; height:20px !important; } .mt-order-result { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; } .mt-order-item.is-correct { background:rgba(110,230,74,.07); border-color:rgba(110,230,74,.42); } .mt-order-item.is-correct .mt-order-result { color:#76ed5a; background:rgba(110,230,74,.11); } .mt-order-item.is-wrong { background:rgba(255,104,120,.055); border-color:rgba(255,104,120,.34); } .mt-order-item.is-wrong .mt-order-result { color:#ff7584; background:rgba(255,104,120,.1); } .mt-sequence { color:#aeb9c7; } .mt-sequence select { background:#121a25 !important; color:#f1f5f9 !important; border:1px solid #334154 !important; box-shadow:none !important; } .mt-text-answer textarea { background:#101721 !important; border:1px solid #2a3545 !important; color:#f3f6fa !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.26); } .mt-text-answer textarea::placeholder { color:#647184; } .mt-text-answer textarea:focus { border-color:#44cfe8 !important; box-shadow:0 0 0 4px rgba(68,232,255,.07) !important; } .mt-text-answer > div { color:#6f7d90 !important; } .mt-feedback { border:1px solid var(--mt-line) !important; box-shadow:none !important; } .mt-feedback.is-correct { background:rgba(110,230,74,.06) !important; border-color:rgba(110,230,74,.18) !important; } .mt-feedback.is-wrong { background:rgba(255,104,120,.055) !important; border-color:rgba(255,104,120,.17) !important; } .mt-feedback p { color:#a7b2bf !important; } .mt-reference { background:#0b1119 !important; border-color:var(--mt-line) !important; color:#aeb8c5 !important; } .mt-xp-gain { color:#7aee5b !important; } .mt-quiz-footer { background:rgba(8,12,18,.97); border-top:1px solid var(--mt-line); box-shadow:0 -14px 40px rgba(0,0,0,.18); } .mt-help-btn, .mt-skip-btn { color:#8794a6 !important; } .mt-help-btn:hover, .mt-skip-btn:hover { color:#e5ebf2 !important; } /* Resultados, progresso e perfil */ .mt-result-hero { background:linear-gradient(145deg,#0f1722,#0a0f17) !important; border:1px solid var(--mt-line) !important; box-shadow:var(--mt-shadow) !important; } .mt-score-circle { background:conic-gradient(#69e64c calc(var(--score)*1%),#1b2431 0); } .mt-score-circle::before { background:#0f1620; } .mt-result-numbers > div { background:#121a25; border:1px solid var(--mt-line); } .mt-result-review, .mt-result-errors, .mt-perfect-box { background:#0e151f !important; border-color:var(--mt-line) !important; color:#e8edf5 !important; } .mt-error-item { background:#101721 !important; border-color:var(--mt-line) !important; } .mt-error-item summary { color:#e8edf5 !important; } .mt-error-item > div { color:#9aa6b6 !important; } .mt-stat-card { background:#0e151f !important; border-color:var(--mt-line) !important; } .mt-week-chart { border-color:var(--mt-line); } .mt-day-bar > div span { background:linear-gradient(#8b6cff,#43d6f0); } .mt-history-row { border-color:var(--mt-line) !important; background:#0f1620 !important; } .mt-profile-head { background:linear-gradient(135deg,#111a27,#0a0f17); border:1px solid var(--mt-line); box-shadow:var(--mt-shadow); } .mt-settings-title > div:first-child > span { background:#17202c; } .mt-profile-name input { background:#101721; border-color:#293547; color:#f0f4f8; } .mt-profile-name input:focus { border-color:#8b6cff; } .mt-toggle { background:#283343; } .mt-toggle i { background:#dce4ef; } .mt-toggle.is-on { background:#4fcf36; } .mt-privacy-card { background:rgba(56,201,255,.05); border-color:rgba(56,201,255,.15); } .mt-privacy-card p { color:#8ea0b2; } .mt-notification-card:hover { border-color:rgba(255,255,255,.14); box-shadow:0 18px 42px rgba(0,0,0,.2); } .mt-notification-card > span { background:#17202d; } /* Onboarding permanece cinematográfico, agora coerente com o app */ .mt-onboarding { background:radial-gradient(circle at 22% 20%,rgba(68,232,255,.09),transparent 30%),radial-gradient(circle at 88% 78%,rgba(139,108,255,.12),transparent 33%),#070a10; } .mt-speech { background:rgba(14,20,30,.74); border-color:rgba(255,255,255,.1); box-shadow:0 30px 80px rgba(0,0,0,.35); } .mt-speech::before { background:#0e141e; border-color:rgba(255,255,255,.1); } .mt-name-form input { background:#0f1620; color:#f6f8fb; border-color:#2b3748; } .mt-name-form input:focus { border-color:#44e8ff; box-shadow:0 0 0 4px rgba(68,232,255,.08); } .mt-name-form button { color:#061006; background:linear-gradient(180deg,#7bef56,#5ed63e); border-bottom-color:#2f8c22; } /* Mobile dark navigation */ @media (max-width:960px) { .mt-mobile-nav { background:rgba(10,14,21,.94); border-color:var(--mt-line); box-shadow:0 18px 50px rgba(0,0,0,.38); } .mt-mobile-nav button { color:#738095 !important; } .mt-mobile-nav button.is-active { background:rgba(139,108,255,.13); color:#b4a3ff !important; } } @media (max-width:760px) { .mt-quiz-stage { width:calc(100% - 20px); padding:16px 0 20px; } .mt-question-card { padding:20px 15px 22px; border-radius:19px; } .mt-question-card h1 { font-size:25px; line-height:1.22; } .mt-quiz-coach { grid-template-columns:1fr 62px 58px; } .mt-coach-bubble { font-size:9px; } .mt-option { min-height:62px; border-radius:15px; } .mt-order-item { min-height:62px; grid-template-columns:38px 1fr 46px; gap:9px; } .mt-order-rank { width:34px !important; height:34px !important; } .mt-order-guide { align-items:flex-start; } .mt-order-guide small { font-size:8px; } .mt-quiz-footer { position:sticky; bottom:0; z-index:30; } } @media (max-width:480px) { .mt-question-card h1 { font-size:22px; } .mt-question-meta span { font-size:8px; } .mt-order-item strong { font-size:12px; } .mt-order-grip { width:42px !important; height:42px !important; } .mt-btn { min-height:49px; } } /* v3.0.0 — dark coverage pass */ .mt-empty, .mt-empty-small, .mt-course-feature, .mt-last-performance, .mt-first-performance, .mt-learning-summary > div { background:#0d131d; border-color:var(--mt-line); color:#eaf0f6; } .mt-empty, .mt-empty-small { border-style:dashed; } .mt-course-feature { box-shadow:0 18px 48px rgba(0,0,0,.2); } .mt-course-feature__planet { background:radial-gradient(circle at center,rgba(139,108,255,.14) 0,#111827 50%,#0c121b 100%); border-right:1px solid var(--mt-line); } .mt-course-feature__planet::before, .mt-course-feature__planet::after { border-color:rgba(139,108,255,.22); } .mt-chip { background:rgba(139,108,255,.12); color:#b7a7ff; border:1px solid rgba(139,108,255,.16); } .mt-course-feature p, .mt-course-feature__progress > div:first-child { color:#8e9aab; } .mt-last-performance, .mt-first-performance { box-shadow:0 14px 36px rgba(0,0,0,.14); } .mt-score-orb { background:#121a25; border:1px solid #283445; } .mt-learning-summary > div { box-shadow:inset 0 1px rgba(255,255,255,.02); } .mt-subject-card > span { background:color-mix(in srgb,var(--subject),#0d131d 83%); } .mt-mascot-bubble { background:#101722; color:#dbe4ee; border:1px solid var(--mt-line); box-shadow:0 14px 36px rgba(0,0,0,.28); } .mt-result-celebration .mt-result-icon { background:#131b27; border:1px solid var(--mt-line); box-shadow:0 10px 28px rgba(0,0,0,.24); } .mt-feedback-icon { background:#101722; border:1px solid var(--mt-line); } .mt-xp-gain { background:#101722; } /* v3.0.0 — remaining surface normalization */ .mt-recommend { background:linear-gradient(135deg,rgba(139,108,255,.08),#0e151f 55%); border-color:rgba(139,108,255,.18); color:#eaf0f6; } .mt-recommend b { color:#a995ff; } .mt-recommend p { color:#8f9bac; } .mt-badge-card { background:#111925; border:1px solid var(--mt-line); } .mt-skill-row > span { background:color-mix(in srgb,var(--skill),#0d131d 82%); } /* ======================================================================== MegaTitan v4 — Product UI / Learning Engine Rebuild de escala, hierarquia, interação e acessibilidade visual. ======================================================================== */ :root { --mt-bg: #070a0f; --mt-bg-elevated: #0a0f17; --mt-surface: #0f1620; --mt-surface-2: #131c28; --mt-surface-3: #182331; --mt-surface-4: #1d2a3a; --mt-ink: #f7f9fc; --mt-ink-soft: #dbe3ee; --mt-muted: #97a5b7; --mt-muted-2: #718095; --mt-line: rgba(255,255,255,.09); --mt-line-strong: rgba(255,255,255,.15); --mt-purple: #8b74ff; --mt-purple-dark: #6e52ec; --mt-green: #72e657; --mt-green-dark: #3cae2b; --mt-blue: #49cfff; --mt-blue-dark: #168fbd; --mt-yellow: #ffd65c; --mt-red: #ff6f7e; --mt-cyan: #62e7ff; --mt-sidebar: 264px; --mt-radius-sm: 14px; --mt-radius-md: 20px; --mt-radius-lg: 28px; --mt-radius-xl: 34px; --mt-shadow: 0 18px 50px rgba(0,0,0,.26); --mt-shadow-strong: 0 30px 90px rgba(0,0,0,.42); --mt-ease: cubic-bezier(.2,.75,.25,1); } html, body.acr-standalone-page { background: var(--mt-bg) !important; color-scheme: dark; overscroll-behavior-y: none; } /* Remove qualquer highlight/tap rosa do navegador sem matar acessibilidade. */ #acr-app, #acr-app * { -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important; accent-color: var(--mt-green); } #acr-app ::selection { background: rgba(98,231,255,.20) !important; color: #fff !important; } #acr-app button, #acr-app [role="button"], #acr-app .mt-option, #acr-app .mt-tf button, #acr-app .mt-order-item, #acr-app summary { -webkit-user-select: none; user-select: none; touch-action: manipulation; } #acr-app input, #acr-app textarea { -webkit-user-select: text; user-select: text; caret-color: var(--mt-cyan); } #acr-app input:-webkit-autofill, #acr-app input:-webkit-autofill:hover, #acr-app input:-webkit-autofill:focus { -webkit-text-fill-color: #f7f9fc !important; -webkit-box-shadow: 0 0 0 1000px #101824 inset !important; transition: background-color 9999s ease-in-out 0s; } #acr-app { min-height: 100dvh; font-family: ui-rounded, "SF Pro Rounded", "Nunito Sans", "Avenir Next Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.55; letter-spacing: -.006em; background: radial-gradient(900px 520px at 72% -14%, rgba(121,95,255,.12), transparent 62%), radial-gradient(760px 520px at -10% 36%, rgba(57,194,255,.07), transparent 62%), linear-gradient(180deg,#070a0f,#080c12 56%,#070a0f); } #acr-app h1, #acr-app h2, #acr-app h3, #acr-app strong, #acr-app button { font-variation-settings: "wght" 760; } #acr-app p { color: var(--mt-muted); } #acr-app button, #acr-app input, #acr-app textarea, #acr-app select { font-size: inherit; } #acr-app button:focus, #acr-app input:focus, #acr-app textarea:focus, #acr-app select:focus { outline: none; } #acr-app button:focus-visible, #acr-app input:focus-visible, #acr-app textarea:focus-visible, #acr-app select:focus-visible, #acr-app [tabindex]:focus-visible, #acr-app summary:focus-visible { outline: 3px solid rgba(98,231,255,.95) !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(98,231,255,.10) !important; } /* ---------------- Core shell ---------------- */ .mt-sidebar { width: var(--mt-sidebar); padding: 28px 20px 22px; background: rgba(7,11,17,.96); border-right: 1px solid var(--mt-line); box-shadow: 22px 0 70px rgba(0,0,0,.18); backdrop-filter: blur(18px); } .mt-logo { padding: 0 8px 30px; gap: 13px; } .mt-logo__mark { width: 48px; height: 48px; border-radius: 16px; font-size: 22px; background: linear-gradient(145deg,#9b86ff,#6846ed); box-shadow: 0 14px 34px rgba(107,75,236,.28), inset 0 1px rgba(255,255,255,.18); } .mt-logo strong, .mt-logo b { font-size: 20px; line-height: .94; } .mt-sidebar nav { gap: 8px; } .mt-sidebar nav button, .mt-sidebar__bottom > button { min-height: 58px; padding: 0 15px; gap: 14px; border-radius: 18px; color: #8f9cad; font-size: 14px; font-weight: 820; letter-spacing: -.01em; transition: background .18s var(--mt-ease), color .18s var(--mt-ease), transform .18s var(--mt-ease), border-color .18s var(--mt-ease); } .mt-sidebar nav button svg, .mt-sidebar__bottom > button svg { width: 22px !important; height: 22px !important; } .mt-sidebar nav button:hover, .mt-sidebar__bottom > button:hover { transform: translateX(2px); } .mt-sidebar nav button.is-active { background: linear-gradient(135deg,rgba(139,116,255,.18),rgba(98,231,255,.04)); border-color: rgba(139,116,255,.32); box-shadow: inset 3px 0 0 #9a86ff, 0 10px 30px rgba(0,0,0,.12); } .mt-mini-user { padding: 14px; border-radius: 20px; } .mt-mini-user > span { width: 40px; height: 40px; border-radius: 13px; } .mt-mini-user strong { font-size: 13px; } .mt-mini-user small { font-size: 11px; } .mt-main-wrap { margin-left: var(--mt-sidebar); } .mt-top-status { height: 84px; padding: 0 clamp(28px,4vw,60px); gap: 12px; background: rgba(7,10,15,.79); backdrop-filter: blur(22px) saturate(135%); } .mt-status-pill { min-height: 44px; padding: 0 14px; border-radius: 15px; font-size: 12px; } .mt-status-pill strong { font-size: 14px; } .mt-status-pill span { font-size: 11px; } .mt-status-avatar { width: 44px; height: 44px; border-radius: 15px; } .mt-main { width: min(1500px,100%); padding: clamp(34px,4.5vw,68px); gap: 38px; } .mt-main:not(.mt-main--with-rail) { max-width: 1220px; } /* ---------------- Buttons ---------------- */ .mt-btn { min-height: 60px; padding: 0 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); font-size: 14px; font-weight: 900; letter-spacing: .035em; line-height: 1; box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10); transition: transform .17s var(--mt-ease), filter .17s var(--mt-ease), box-shadow .17s var(--mt-ease), border-color .17s var(--mt-ease); } .mt-btn svg { width: 19px !important; height: 19px !important; } .mt-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.055); box-shadow: 0 18px 38px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.13); } .mt-btn:active:not(:disabled) { transform: translateY(2px) scale(.995); } .mt-btn:disabled { opacity: 1; color: #687588 !important; background: #151d28 !important; border-color: #222d3b !important; border-bottom-color: #0b1017 !important; box-shadow: none !important; cursor: not-allowed; } .mt-btn--green { color: #081007 !important; background: linear-gradient(180deg,#82ef67 0%,#6be14f 58%,#5ed443 100%); border-color: #8cf476; border-bottom: 4px solid #329525; box-shadow: 0 14px 34px rgba(91,226,67,.19), inset 0 1px rgba(255,255,255,.38); } .mt-btn--blue { color: #061016 !important; background: linear-gradient(180deg,#6bddff,#4acbfa 60%,#3abbec 100%); border-color: #72e3ff; border-bottom: 4px solid #157ea7; } .mt-btn--dark, .mt-btn--ghost { color: #e4eaf2 !important; background: linear-gradient(180deg,#182230,#121923); border-color: #2c394a; border-bottom: 3px solid #080c12; } .mt-btn--small { min-height: 46px; padding: 0 17px; font-size: 12px; border-radius: 15px; } .mt-text-btn, .mt-back-link { font-size: 13px; font-weight: 850; } /* ---------------- Cards / dashboard ---------------- */ .mt-rail-card, .mt-progress-card, .mt-settings-card, .mt-memory-map, .mt-flash-zone, .mt-notification-card, .mt-subject-card, .mt-course-feature, .mt-last-performance, .mt-first-performance, .mt-stat-card { border-radius: 24px; background: linear-gradient(180deg,#101722,#0d131c); border: 1px solid var(--mt-line); box-shadow: 0 18px 46px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.025); } .mt-rail-card { padding: 22px; } .mt-rail-title span { font-size: 14px; } .mt-rail-title b { font-size: 12px; } .mt-home-hero { min-height: 390px; padding: clamp(34px,5vw,64px); border-radius: 34px; background: linear-gradient(120deg,rgba(142,114,255,.20),rgba(13,19,29,.34) 48%), radial-gradient(circle at 84% 44%,rgba(87,226,255,.15),transparent 32%), #0f1621; overflow: hidden; } .mt-home-copy h1 { font-size: clamp(46px,5.6vw,76px); line-height: .98; letter-spacing: -.055em; } .mt-home-copy p { max-width: 650px; font-size: 18px; line-height: 1.62; } .mt-home-actions { gap: 12px; margin-top: 28px; } .mt-mascot-bubble { font-size: 12px; line-height: 1.5; padding: 13px 15px; } .mt-section { margin-top: 42px; } .mt-section-head { margin-bottom: 18px; } .mt-section-head h2 { font-size: 26px; letter-spacing: -.03em; } .mt-section-head p { font-size: 14px; } .mt-mode-grid, .mt-review-grid { gap: 18px; } .mt-mode-card, .mt-review-card { min-height: 300px; padding: 30px; border-radius: 28px; border-bottom-width: 3px; } .mt-mode-card h2, .mt-review-card h2 { font-size: 29px; line-height: 1.08; } .mt-mode-card p, .mt-review-card p { font-size: 15px; line-height: 1.6; } .mt-mode-card__icon { width: 62px; height: 62px; border-radius: 20px; font-size: 29px; } .mt-review-card__icon { font-size: 48px; } .mt-review-card > b { font-size: 11px; } .mt-review-card > div:last-child { font-size: 12px; } .mt-page-head { padding: clamp(30px,4vw,52px); border-radius: 30px; } .mt-page-head h1 { font-size: clamp(38px,4.8vw,62px); line-height: 1; letter-spacing: -.05em; } .mt-page-head p { max-width: 760px; font-size: 17px; line-height: 1.65; } .mt-recommend { padding: 22px 24px; border-radius: 22px; gap: 17px; } .mt-recommend > span { font-size: 38px; } .mt-recommend b { font-size: 10px; } .mt-recommend strong { font-size: 18px; } .mt-recommend p { font-size: 14px; } .mt-course-feature { border-radius: 30px; overflow: hidden; } .mt-course-feature__body { padding: clamp(30px,4vw,50px); } .mt-course-feature h3 { font-size: clamp(34px,4vw,50px); } .mt-course-feature p { font-size: 16px; line-height: 1.65; } .mt-chip { padding: 9px 12px; font-size: 11px; } /* ---------------- Learning path ---------------- */ .mt-path { padding: clamp(30px,4vw,48px); border-radius: 30px; } .mt-path-card { padding: 19px 21px; border-radius: 21px; } .mt-path-card h3 { font-size: 18px; } .mt-path-card p { font-size: 13px; line-height: 1.5; } .mt-path-card > span { font-size: 11px; } .mt-path-node { width: 76px; height: 76px; border-radius: 24px; } /* ---------------- Lesson ---------------- */ .mt-lesson-shell { grid-template-rows: 82px 1fr 108px; } .mt-lesson-top { padding: 0 clamp(20px,4vw,56px); } .mt-lesson-top > button { width: 46px; height: 46px; border-radius: 15px; } .mt-lesson-progress i { width: 52px; height: 10px; } .mt-energy-mini { font-size: 13px; } .mt-lesson-stage { width: min(1120px,calc(100% - 48px)); grid-template-columns: 360px minmax(0,1fr); gap: 56px; padding: 56px 0; } .mt-lesson-visual { min-height: 400px; border-radius: 34px; } .mt-lesson-card > span { font-size: 12px; } .mt-lesson-card h1 { font-size: clamp(44px,5vw,68px); line-height: .98; } .mt-lesson-card > p { font-size: 19px; line-height: 1.72; } .mt-titan-comment { margin-top: 26px; padding: 18px 20px; font-size: 15px; line-height: 1.55; border-radius: 0 18px 18px 0; } .mt-lesson-footer { min-height: 108px; } .mt-lesson-footer strong { font-size: 16px; } .mt-lesson-footer span { font-size: 12px; } /* ---------------- Memory ---------------- */ .mt-memory-head { max-width: 900px; } .mt-memory-head h1 { font-size: clamp(42px,5vw,64px); } .mt-memory-head p { font-size: 17px; line-height: 1.65; } .mt-orbit-map { padding: 32px; border-radius: 30px; } .mt-planet { min-height: 82px; padding: 12px 7px; border-radius: 18px; } .mt-planet span { font-size: 31px; } .mt-planet b { font-size: 11px; } .mt-planet-fact { padding: 20px; border-radius: 20px; } .mt-planet-fact strong { font-size: 15px; } .mt-planet-fact p { font-size: 13px; } .mt-flash-zone { padding: 30px; border-radius: 30px; } .mt-flash-card { height: 350px; } .mt-flash-front, .mt-flash-back { padding: 42px; border-radius: 28px; } .mt-flash-card strong { font-size: 36px; } .mt-flash-card p { font-size: 16px; line-height: 1.65; } .mt-flash-card small { font-size: 10px; } .mt-memory-cta, .mt-next-box { padding: 22px 24px; border-radius: 22px; } .mt-memory-cta strong, .mt-next-box strong { font-size: 15px; } .mt-memory-cta small, .mt-next-box small { font-size: 12px; } /* ======================================================================== Quiz / Mission — principal reconstrução de UX ======================================================================== */ .mt-quiz-shell { grid-template-rows: 82px minmax(0,1fr) 108px; min-height: 100dvh; background: radial-gradient(700px 440px at 50% 2%,rgba(105,82,230,.09),transparent 65%), #070a0f; } .mt-quiz-top { padding: 0 clamp(18px,4vw,60px); grid-template-columns: 50px minmax(200px,1fr) 150px; gap: 24px; background: rgba(7,10,15,.90); backdrop-filter: blur(22px) saturate(135%); } .mt-quiz-close { width: 46px; height: 46px; border-radius: 15px; background: #111925; border: 1px solid #253142; } .mt-quiz-close:hover { background:#182331; transform:translateY(-1px); } .mt-quiz-progress { height: 14px; background: #19222e; border: 1px solid rgba(255,255,255,.035); box-shadow: inset 0 2px 4px rgba(0,0,0,.36); } .mt-quiz-progress span { background: linear-gradient(90deg,#73e756,#93f078); box-shadow: 0 0 18px rgba(114,230,87,.20); } .mt-quiz-energy { gap: 5px; } .mt-quiz-energy i { font-size: 20px; } .mt-quiz-stage { width: min(920px,calc(100% - 46px)); margin: 0 auto; padding: clamp(34px,5vh,58px) 0 clamp(40px,6vh,72px); display: flex; flex-direction: column; gap: 20px; align-items: stretch; } /* Coach horizontal: acompanha sem roubar a questão. */ .mt-quiz-coach { position: static; top: auto; display: grid; grid-template-columns: 88px minmax(0,1fr) auto; align-items: center; gap: 16px; text-align: left; padding: 0 8px; } .mt-quiz-coach .mt-mascot { order: 1; --s: .39; margin: 0; justify-self: center; } .mt-coach-bubble { order: 2; margin: 0; min-height: 64px; padding: 15px 18px; display: flex; align-items: center; border: 1px solid #273447; border-radius: 20px 20px 20px 8px; background: linear-gradient(180deg,#121b27,#0e151f); color: #c9d4e2; font-size: 15px; font-weight: 760; line-height: 1.5; box-shadow: 0 13px 32px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.025); } .mt-coach-bubble::after { left: -7px; bottom: 17px; width: 13px; height: 13px; background: #111a25; border: 0; border-left: 1px solid #273447; border-bottom: 1px solid #273447; transform: rotate(45deg); } .mt-combo-box { order: 3; width: auto; min-width: 88px; margin: 0; padding: 11px 14px; border-radius: 17px; background: #111925; border: 1px solid #273447; text-align: center; } .mt-combo-box span { font-size: 9px; color: #7f8da0; } .mt-combo-box strong { margin-top: 2px; font-size: 20px; color: #fff; } .mt-question-card { padding: clamp(30px,4.5vw,48px); border: 1px solid #222d3c; border-bottom: 1px solid #222d3c; border-radius: 30px; background: linear-gradient(180deg,rgba(255,255,255,.018),transparent 24%), #0f1620; box-shadow: 0 28px 70px rgba(0,0,0,.31), inset 0 1px rgba(255,255,255,.025); } .mt-question-card.is-correct { border-color: rgba(114,230,87,.34); box-shadow: 0 28px 70px rgba(0,0,0,.31), 0 0 0 1px rgba(114,230,87,.055), inset 0 1px rgba(255,255,255,.025); } .mt-question-card.is-wrong { border-color: rgba(255,111,126,.31); box-shadow: 0 28px 70px rgba(0,0,0,.31), 0 0 0 1px rgba(255,111,126,.045), inset 0 1px rgba(255,255,255,.025); } .mt-question-meta { margin-bottom: 20px; gap: 16px; } .mt-question-meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 10px; background: rgba(139,116,255,.10); border: 1px solid rgba(139,116,255,.18); color: #b8aaff; font-size: 11px; letter-spacing: .11em; } .mt-question-meta b { color: #7e8c9f; font-size: 13px; font-weight: 800; } .mt-question-card h1 { max-width: 860px; margin: 0 0 30px; color: #f8fafc; font-size: clamp(34px,4.2vw,48px); font-weight: 900; line-height: 1.12; letter-spacing: -.042em; text-wrap: balance; } .mt-answer-zone { margin-top: 4px; } .mt-hint { margin: -4px 0 24px; padding: 18px 20px; gap: 13px; border: 1px solid rgba(255,214,92,.19); border-radius: 20px; background: rgba(255,214,92,.055); color: #dbcfaa; } .mt-hint span { font-size: 25px; } .mt-hint p { margin: 0; color:#c7bd98; font-size: 15px; line-height: 1.6; } /* Alternativas: grandes, legíveis e com estados claros. */ .mt-options { gap: 13px; } .mt-option { min-height: 82px; padding: 14px 18px; grid-template-columns: 48px minmax(0,1fr) 32px; gap: 16px; border: 1px solid #2a3545; border-bottom: 3px solid #0a0f16; border-radius: 20px; background: linear-gradient(180deg,#141d29,#111823); color: #edf2f8; box-shadow: 0 8px 20px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025); transition: transform .16s var(--mt-ease), border-color .16s var(--mt-ease), background .16s var(--mt-ease), box-shadow .16s var(--mt-ease); } .mt-option:hover:not(:disabled) { transform: translateY(-2px); border-color: #46566c; background: linear-gradient(180deg,#182433,#131c28); box-shadow: 0 13px 28px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.035); } .mt-option:active:not(:disabled) { transform: translateY(1px); } .mt-option > span { width: 46px; height: 46px; border-radius: 14px; background: #1e2937; color: #aab6c5; border: 1px solid #2d3a4b; font-size: 14px; font-weight: 900; } .mt-option strong { color: #f1f5f9; font-size: 18px; font-weight: 780; line-height: 1.45; letter-spacing: -.012em; } .mt-option i { display:grid; place-items:center; } .mt-option.is-selected { border-color: #8c75ff; background: linear-gradient(180deg,rgba(139,116,255,.16),rgba(139,116,255,.07)); box-shadow: 0 0 0 1px rgba(139,116,255,.12), 0 15px 32px rgba(0,0,0,.18); } .mt-option.is-selected > span { background: #8b74ff; border-color: #a795ff; color: #fff; box-shadow: 0 7px 18px rgba(123,91,245,.24); } .mt-option.is-answer { border-color: rgba(114,230,87,.64); background: linear-gradient(180deg,rgba(114,230,87,.13),rgba(114,230,87,.055)); } .mt-option.is-answer > span { background: #6fde54; border-color: #87ed70; color: #071207; } .mt-option.is-wrong { border-color: rgba(255,111,126,.62); background: linear-gradient(180deg,rgba(255,111,126,.12),rgba(255,111,126,.05)); } .mt-option.is-wrong > span { background: #ff6f7e; border-color: #ff8f9b; color: #21070b; } .mt-option:disabled { opacity: 1; cursor: default; } /* Verdadeiro/Falso */ .mt-tf { gap: 14px; } .mt-tf button { min-height: 112px; border: 1px solid #2a3545; border-bottom: 3px solid #0a0f16; border-radius: 22px; background: linear-gradient(180deg,#141d29,#111823); color: #eef3f8; box-shadow: 0 8px 20px rgba(0,0,0,.12); } .mt-tf button span { font-size: 30px; } .mt-tf button strong { font-size: 18px; } .mt-tf button:hover:not(:disabled) { transform: translateY(-2px); border-color:#46566c; } .mt-tf button.is-selected { border-color:#8b74ff; background:rgba(139,116,255,.12); } .mt-tf button.is-answer { border-color:rgba(114,230,87,.60); background:rgba(114,230,87,.10); } .mt-tf button:disabled { opacity:1; } /* Ordenação */ .mt-order { gap: 16px; } .mt-order-guide { padding: 16px 18px; border-radius: 18px; } .mt-order-guide > span { width: 44px; height: 44px; border-radius: 14px; } .mt-order-guide strong { font-size: 11px; } .mt-order-guide small { margin-top: 4px; color:#9aabba; font-size: 13px; line-height:1.5; } .mt-order-stack { gap: 11px; } .mt-order-item { min-height: 78px; padding: 10px 11px 10px 14px; grid-template-columns: 46px minmax(0,1fr) 52px; gap: 15px; border-radius: 20px; background: linear-gradient(180deg,#151f2c,#111924); border-color: #2c394b; box-shadow: 0 8px 22px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.025); } .mt-order-item strong { font-size: 18px; } .mt-order-rank { width: 42px !important; height: 42px !important; border-radius: 13px !important; font-size: 14px; } .mt-order-grip { width: 48px !important; height: 48px !important; border-radius: 14px !important; } .mt-order-item.is-dragging { transform: scale(1.025); box-shadow:0 24px 56px rgba(0,0,0,.42),0 0 0 2px rgba(98,231,255,.18); } /* Sequência e respostas abertas */ .mt-sequence { gap: 10px; color: #d0d8e2; font-size: 18px; line-height: 2.2; } .mt-sequence select { min-height: 54px; padding: 0 44px 0 16px; border-radius: 15px !important; font-size: 16px; font-weight: 800; appearance: none; -webkit-appearance: none; background-color: #131c28 !important; background-image: linear-gradient(45deg,transparent 50%,#91a0b2 50%),linear-gradient(135deg,#91a0b2 50%,transparent 50%) !important; background-position: calc(100% - 18px) 23px,calc(100% - 13px) 23px !important; background-size: 5px 5px,5px 5px !important; background-repeat: no-repeat !important; } .mt-text-answer textarea { min-height: 180px; padding: 20px; border-radius: 20px; font-size: 17px; line-height: 1.65; resize: vertical; } .mt-text-answer > div { margin-top: 10px; font-size: 12px; } /* Feedback: agora é conteúdo principal, não legenda minúscula. */ .mt-feedback { margin-top: 26px; padding: 22px 23px; gap: 17px; align-items: flex-start; border-radius: 22px; position: relative; overflow: hidden; } .mt-feedback::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .mt-feedback.is-correct { background: linear-gradient(90deg,rgba(114,230,87,.10),rgba(114,230,87,.035)) !important; border-color: rgba(114,230,87,.25) !important; } .mt-feedback.is-correct::before { background:#72e657; box-shadow:0 0 20px rgba(114,230,87,.35); } .mt-feedback.is-wrong { background: linear-gradient(90deg,rgba(255,111,126,.095),rgba(255,111,126,.03)) !important; border-color: rgba(255,111,126,.23) !important; } .mt-feedback.is-wrong::before { background:#ff6f7e; box-shadow:0 0 20px rgba(255,111,126,.28); } .mt-feedback-icon { width: 50px; height: 50px; border-radius: 16px; flex: 0 0 auto; font-size: 23px; } .mt-feedback > div:last-child { min-width:0; flex:1; } .mt-feedback strong { display: block; margin: 1px 0 7px; color: #f5f8fb; font-size: 21px; font-weight: 900; line-height: 1.28; letter-spacing: -.025em; } .mt-feedback p { margin: 0; color: #b6c1ce !important; font-size: 16px; line-height: 1.62; } .mt-reference { margin-top: 15px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px; background: rgba(0,0,0,.17) !important; } .mt-reference span { font-size: 10px; letter-spacing: .10em; color:#8c9aab; } .mt-reference p { margin-top: 4px !important; font-size: 15px !important; color:#d5dde7 !important; } .mt-xp-gain { margin-top: 13px; padding: 7px 10px; border-radius: 10px; background: rgba(114,230,87,.10) !important; border: 1px solid rgba(114,230,87,.18); color: #8bec73 !important; font-size: 12px; letter-spacing: .03em; } .mt-quiz-footer { min-height: 108px; padding: 16px max(24px,calc((100vw - 920px)/2)); gap: 24px; background: rgba(7,10,15,.94); backdrop-filter: blur(22px) saturate(130%); border-top: 1px solid #1c2531; } .mt-quiz-footer > div:first-child { min-width: 170px; } .mt-quiz-footer__right { gap: 13px; } .mt-quiz-footer .mt-btn { min-width: 210px; } .mt-help-btn, .mt-skip-btn { min-height: 48px; padding: 0 13px; border-radius: 14px; font-size: 12px; font-weight: 900; letter-spacing: .045em; transition: background .16s ease,color .16s ease; } .mt-help-btn:hover, .mt-skip-btn:hover { background:#111925; } /* ---------------- Results / progress / profile ---------------- */ .mt-result-hero { padding: clamp(34px,5vw,58px); border-radius: 32px; } .mt-result-hero h1 { font-size: clamp(40px,5vw,64px); } .mt-result-hero p { font-size: 17px; } .mt-result-numbers { gap: 14px; } .mt-result-numbers > div { padding: 18px; border-radius: 18px; } .mt-result-numbers strong { font-size: 22px; } .mt-result-numbers span { font-size: 12px; } .mt-result-review, .mt-result-errors, .mt-perfect-box { padding: 25px; border-radius: 24px; } .mt-error-item summary { min-height: 58px; font-size: 15px; } .mt-error-item > div { font-size: 14px; line-height: 1.6; } .mt-stat-grid { gap: 16px; } .mt-stat-card { padding: 24px; } .mt-stat-card strong { font-size: 25px; } .mt-stat-card span { font-size: 12px; } .mt-history-row { min-height: 62px; padding: 12px 15px; border-radius: 16px; } .mt-profile-head { padding: 30px; border-radius: 30px; } .mt-profile-name input { height: 58px; padding: 0 17px; border-radius: 16px; font-size: 17px; } .mt-settings-card { padding: 24px; } .mt-settings-title strong { font-size: 17px; } .mt-settings-title span { font-size: 13px; } .mt-notification-card { padding: 18px; border-radius: 20px; } .mt-notification-card strong { font-size: 15px; } .mt-notification-card p { font-size: 13px; } /* ---------------- Onboarding ---------------- */ .mt-onboarding { grid-template-columns: minmax(300px,460px) minmax(460px,720px); gap: clamp(34px,6vw,100px); padding: clamp(34px,5vw,84px); } .mt-onboarding__mascot { min-height: 560px; } .mt-speech { padding: clamp(32px,4vw,48px); border-radius: 32px; } .mt-speech p { font-size: clamp(18px,2vw,22px); line-height: 1.65; } .mt-speech__big { font-size: clamp(30px,3.3vw,42px) !important; } .mt-name-form label { font-size: 12px; } .mt-name-form input, .mt-name-form button { height: 64px; border-radius: 19px; } .mt-name-form input { font-size: 19px; } .mt-name-form button { min-width: 260px; font-size: 13px; } .mt-onboarding__note { font-size: 12px; } /* ---------------- Motion polish ---------------- */ @media (prefers-reduced-motion:no-preference) { .mt-question-card { animation: mtV4Enter .34s var(--mt-ease) both; } .mt-option { animation: mtV4Option .28s var(--mt-ease) both; } .mt-option:nth-child(2){animation-delay:.025s}.mt-option:nth-child(3){animation-delay:.05s}.mt-option:nth-child(4){animation-delay:.075s} .mt-feedback { animation: mtV4Feedback .28s var(--mt-ease) both; } } @keyframes mtV4Enter { from{opacity:0;transform:translateY(10px) scale(.995)} to{opacity:1;transform:none} } @keyframes mtV4Option { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} } @keyframes mtV4Feedback { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } /* ======================================================================== Responsive — pensado primeiro para toque. ======================================================================== */ @media (max-width: 1180px) { :root { --mt-sidebar: 236px; } .mt-main { grid-template-columns:minmax(0,1fr) 270px; gap:28px; padding:36px; } } @media (max-width: 960px) { .mt-sidebar { display:none; } .mt-main-wrap { margin-left:0; padding-bottom:92px; } .mt-top-status { height:70px; padding:0 18px; } .mt-main, .mt-main.mt-main--with-rail { grid-template-columns:1fr; padding:26px 18px 34px; } .mt-right-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .mt-mobile-nav { left:14px; right:14px; bottom:max(12px,env(safe-area-inset-bottom)); min-height:68px; padding:7px; border-radius:22px; background:rgba(12,17,25,.95); backdrop-filter:blur(22px) saturate(130%); } .mt-mobile-nav button { min-height:52px; border-radius:16px; font-size:10px; } .mt-home-hero { min-height:350px; } .mt-home-copy h1 { font-size:clamp(44px,8vw,66px); } .mt-lesson-stage { grid-template-columns:1fr; width:min(760px,calc(100% - 36px)); gap:30px; } .mt-lesson-visual { min-height:300px; } } @media (max-width: 760px) { #acr-app { font-size:16px; } .mt-top-status { gap:7px; } .mt-status-pill { min-height:40px; padding:0 10px; } .mt-status-pill span { display:none; } .mt-main { padding:22px 14px 32px; } .mt-right-rail { grid-template-columns:1fr; } .mt-home-hero { padding:28px 22px; border-radius:27px; } .mt-home-copy h1 { font-size:43px; } .mt-home-copy p { font-size:16px; } .mt-home-actions { display:grid; } .mt-home-actions .mt-btn { width:100%; } .mt-mode-grid, .mt-review-grid { grid-template-columns:1fr; } .mt-mode-card, .mt-review-card { min-height:auto; padding:25px; border-radius:24px; } .mt-mode-card h2, .mt-review-card h2 { font-size:27px; } .mt-mode-card p, .mt-review-card p { font-size:15px; } .mt-page-head { padding:27px 22px; border-radius:25px; } .mt-page-head h1 { font-size:39px; } .mt-page-head p { font-size:15px; } .mt-quiz-shell { grid-template-rows:70px minmax(0,1fr) auto; } .mt-quiz-top { padding:0 13px; grid-template-columns:44px 1fr 92px; gap:11px; } .mt-quiz-close { width:42px; height:42px; border-radius:14px; } .mt-quiz-progress { height:11px; } .mt-quiz-energy i { font-size:16px; } .mt-quiz-stage { width:calc(100% - 22px); padding:22px 0 28px; gap:15px; } .mt-quiz-coach { grid-template-columns:64px minmax(0,1fr) auto; gap:10px; padding:0 3px; } .mt-quiz-coach .mt-mascot { --s:.29; } .mt-coach-bubble { min-height:54px; padding:11px 13px; border-radius:16px 16px 16px 7px; font-size:13px; line-height:1.42; } .mt-combo-box { min-width:62px; padding:8px 9px; border-radius:14px; } .mt-combo-box span { font-size:7px; } .mt-combo-box strong { font-size:17px; } .mt-question-card { padding:26px 18px 27px; border-radius:24px; } .mt-question-meta { margin-bottom:16px; } .mt-question-meta span { min-height:27px; font-size:9px; } .mt-question-meta b { font-size:11px; } .mt-question-card h1 { margin-bottom:24px; font-size:30px; line-height:1.16; } .mt-hint { padding:15px 16px; border-radius:17px; } .mt-hint p { font-size:14px; } .mt-options { gap:10px; } .mt-option { min-height:74px; padding:11px 13px; grid-template-columns:43px minmax(0,1fr) 27px; gap:12px; border-radius:18px; } .mt-option > span { width:41px; height:41px; border-radius:13px; font-size:13px; } .mt-option strong { font-size:16px; line-height:1.4; } .mt-tf { grid-template-columns:1fr 1fr; gap:10px; } .mt-tf button { min-height:92px; border-radius:18px; } .mt-tf button strong { font-size:16px; } .mt-order-guide { padding:13px 14px; } .mt-order-guide > span { width:40px; height:40px; } .mt-order-guide small { font-size:12px; } .mt-order-item { min-height:70px; grid-template-columns:41px 1fr 48px; gap:11px; padding:9px 9px 9px 11px; } .mt-order-item strong { font-size:16px; } .mt-order-rank { width:38px !important; height:38px !important; } .mt-order-grip { width:44px !important; height:44px !important; } .mt-sequence { font-size:16px; line-height:2.35; } .mt-feedback { margin-top:22px; padding:18px; gap:13px; border-radius:19px; } .mt-feedback-icon { width:44px; height:44px; border-radius:14px; font-size:20px; } .mt-feedback strong { font-size:18px; } .mt-feedback p { font-size:15px; } .mt-reference p { font-size:14px !important; } .mt-quiz-footer { position:sticky; bottom:0; z-index:40; min-height:auto; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); gap:8px; } .mt-quiz-footer > div:first-child { min-width:0; } .mt-quiz-footer__right { flex:1; } .mt-quiz-footer .mt-btn { min-width:0; flex:1; min-height:56px; font-size:13px; } .mt-help-btn, .mt-skip-btn { min-height:44px; padding:0 8px; font-size:10px; } .mt-lesson-shell { grid-template-rows:70px 1fr auto; } .mt-lesson-stage { width:calc(100% - 24px); padding:28px 0; } .mt-lesson-card h1 { font-size:42px; } .mt-lesson-card > p { font-size:17px; } .mt-titan-comment { font-size:14px; } .mt-lesson-footer { min-height:auto; padding:13px; } .mt-flash-card { height:300px; } .mt-flash-card strong { font-size:30px; } .mt-flash-card p { font-size:15px; } } @media (max-width: 520px) { .mt-status-pill--xp { margin-left:auto; } .mt-home-copy h1 { font-size:38px; } .mt-home-mascot { height:175px; } .mt-section-head h2 { font-size:23px; } .mt-question-card { padding:23px 15px 24px; } .mt-question-card h1 { font-size:27px; } .mt-quiz-coach { grid-template-columns:56px minmax(0,1fr); } .mt-quiz-coach .mt-mascot { --s:.255; } .mt-combo-box { display:none; } .mt-coach-bubble { font-size:12px; } .mt-option { min-height:72px; grid-template-columns:40px minmax(0,1fr) 24px; } .mt-option > span { width:38px; height:38px; } .mt-option strong { font-size:15.5px; } .mt-tf { grid-template-columns:1fr; } .mt-tf button { min-height:78px; } .mt-order-item { min-height:68px; } .mt-order-item strong { font-size:15.5px; } .mt-feedback { padding:17px 15px; } .mt-feedback strong { font-size:17px; } .mt-feedback p { font-size:14.5px; } .mt-quiz-footer { display:grid; grid-template-columns:auto minmax(0,1fr); } .mt-help-btn { padding:0 6px; } .mt-skip-btn { display:none; } .mt-quiz-footer .mt-btn { width:100%; } } /* v4 readability pass — elimina microtipografia herdada da v2/v3 */ .mt-kicker { font-size:11px; } .mt-daily-card p { font-size:13px; line-height:1.55; } .mt-goal-ring span, .mt-rail-card > small, .mt-streak-card small, .mt-last-badge small { font-size:11px; } .mt-last-badge strong { font-size:13px; } .mt-mode-card > span { font-size:11px; } .mt-mode-card__bottom b { font-size:12px; } .mt-course-feature__progress > div:first-child { font-size:12px; } .mt-score-orb span { font-size:10px; } .mt-last-performance > div:nth-child(2) > span { font-size:11px; } .mt-last-performance h3, .mt-first-performance h3 { font-size:19px; } .mt-last-performance p, .mt-first-performance p { font-size:13px; } .mt-learning-summary small { max-width:110px; font-size:11px; line-height:1.4; } .mt-path-card > span { font-size:10px; } .mt-path-card p { font-size:12px; line-height:1.5; } .mt-path-card b { font-size:11px; } .mt-subject-card strong { font-size:15px; } .mt-subject-card small { font-size:11px; } .mt-result-hero > p { font-size:16px; } .mt-score-circle span { font-size:11px; } .mt-result-numbers span { font-size:11px; } .mt-error-item summary > span { font-size:11px; } .mt-error-item summary strong { font-size:14px; } .mt-error-item p { font-size:13px; } .mt-perfect-box strong { font-size:15px; } .mt-perfect-box p { font-size:13px; } .mt-stat-card small { font-size:11px; } .mt-day-bar b { font-size:11px; } .mt-day-bar small { font-size:10px; } .mt-skill-row strong { font-size:13px; } .mt-skill-row small { font-size:11px; } .mt-skill-row > b { font-size:12px; } .mt-history-row strong { font-size:13px; } .mt-history-row small { font-size:11px; } .mt-history-row > b { font-size:13px; } .mt-history-row > em { font-size:11px; } .mt-badge-card strong { font-size:13px; } .mt-badge-card small { font-size:11px; } .mt-profile-head p { font-size:13px; } .mt-settings-title strong { font-size:15px; } .mt-settings-title small { font-size:12px; } .mt-privacy-card strong { font-size:14px; } .mt-privacy-card p { font-size:12px; } .mt-danger-link { font-size:12px; } .mt-notification-card b { font-size:10px; } .mt-notification-card strong { font-size:14px; } .mt-notification-card p { font-size:12px; } .mt-toast { max-width:420px; padding:15px 18px; border-radius:16px; font-size:13px; line-height:1.45; } @media (max-width:760px) { .mt-mobile-nav button { font-size:11px; } .mt-history-row strong { font-size:12px; } .mt-history-row small { font-size:10px; } } /* ===================================================================== MegaTitan v5 — Curriculum / Mastery / Adaptive Learning UI ===================================================================== */ #acr-app { --mt-v5-panel: #0e151f; --mt-v5-panel-2: #121c29; --mt-v5-panel-3: #182434; --mt-v5-line: rgba(255,255,255,.085); --mt-v5-soft: rgba(255,255,255,.055); --mt-v5-text: #f6f8fb; --mt-v5-muted: #98a7ba; } #acr-app button, #acr-app [role="button"] { -webkit-tap-highlight-color: transparent !important; } #acr-app ::selection { background: rgba(36,225,255,.22) !important; color:#fff !important; } .mt-home-hero--v5 .mt-mascot-bubble { display:grid; gap:7px; max-width:330px; } .mt-home-hero--v5 .mt-mascot-bubble b { color:#fff; font-size:15px; line-height:1.25; } .mt-home-hero--v5 .mt-mascot-bubble span { color:#b6c3d4; font-size:13px; line-height:1.55; } .mt-daily-command { width:100%; margin:0 0 34px; padding:21px 22px; display:flex; align-items:center; justify-content:space-between; gap:22px; border:1px solid rgba(36,225,255,.15); border-radius:24px; background: radial-gradient(circle at 6% 50%,rgba(36,225,255,.11),transparent 31%), linear-gradient(135deg,#0f1924,#111a25 55%,#0c131c); box-shadow:0 20px 55px rgba(0,0,0,.18); } .mt-daily-command > div { display:flex; align-items:center; gap:15px; min-width:0; } .mt-daily-command > div > span { width:54px; height:54px; flex:0 0 auto; display:grid; place-items:center; border-radius:17px; background:rgba(36,225,255,.09); font-size:25px; } .mt-daily-command > div > div { display:grid; gap:2px; } .mt-daily-command b { color:#5cecff; font-size:10px; letter-spacing:.12em; } .mt-daily-command strong { color:#fff; font-size:18px; line-height:1.25; } .mt-daily-command small { color:#91a3b8; font-size:12px; line-height:1.45; } .mt-subject-grid--v5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .mt-subject-card--world { min-height:120px; position:relative; grid-template-columns:62px minmax(0,1fr) auto 24px !important; gap:16px !important; padding:18px !important; border:1px solid var(--mt-v5-line) !important; border-radius:22px !important; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 34px rgba(0,0,0,.12); overflow:hidden; } .mt-subject-card--world::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--subject); opacity:.92; } .mt-subject-card--world:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--subject) 46%,transparent) !important; } .mt-world-icon { width:58px !important; height:58px !important; display:grid !important; place-items:center !important; border-radius:18px !important; background:color-mix(in srgb,var(--subject) 13%,#101821) !important; font-size:27px !important; } .mt-subject-card--world > div { min-width:0; display:grid; gap:4px; } .mt-subject-card--world > div > b { color:color-mix(in srgb,var(--subject) 72%,#fff); font-size:10px; letter-spacing:.1em; } .mt-subject-card--world > div > b em { margin-left:7px; padding:3px 6px; border-radius:7px; background:rgba(255,255,255,.07); color:#bfc9d7; font-style:normal; font-size:8px; } .mt-subject-card--world > div > strong { color:#fff; font-size:17px; line-height:1.25; } .mt-subject-card--world > div > small { color:#8ea0b7; font-size:11px; } .mt-subject-card--world .mt-line-progress { margin-top:5px; height:6px; background:#0b1119; } .mt-subject-card--world .mt-line-progress span { background:var(--subject); } .mt-world-score { color:#eaf0f7; font-size:14px; font-weight:900; white-space:nowrap; } .mt-bonus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .mt-bonus-card { min-height:115px; width:100%; display:grid; grid-template-columns:58px minmax(0,1fr) 24px; align-items:center; gap:15px; padding:18px; text-align:left; border:1px solid rgba(167,139,250,.17); border-radius:22px; background:linear-gradient(135deg,rgba(124,92,252,.10),rgba(255,255,255,.025)); cursor:pointer; } .mt-bonus-card > span { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:rgba(124,92,252,.12); font-size:27px; } .mt-bonus-card > div { display:grid; gap:3px; } .mt-bonus-card b { color:#c7b8ff; font-size:9px; letter-spacing:.12em; } .mt-bonus-card strong { color:#fff; font-size:17px; } .mt-bonus-card small { color:#99a7ba; font-size:11.5px; line-height:1.45; } .mt-bonus-card:hover { transform:translateY(-2px); border-color:rgba(167,139,250,.34); } .mt-mastery-overview { display:grid; grid-template-columns:minmax(230px,.7fr) 1.3fr; gap:16px; margin-bottom:15px; padding:20px; border:1px solid var(--mt-v5-line); border-radius:22px; background:var(--mt-v5-panel); } .mt-mastery-overview > div:first-child { display:grid; align-content:center; gap:2px; padding-right:18px; border-right:1px solid var(--mt-v5-line); } .mt-mastery-overview > div:first-child strong { color:#fff; font-size:38px; letter-spacing:-.05em; } .mt-mastery-overview > div:first-child span { color:#8fa0b4; font-size:12px; line-height:1.45; } .mt-mastery-states { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-content:center; } .mt-mastery-states > span { min-width:0; display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; padding:10px 9px; border-radius:13px; background:rgba(255,255,255,.035); color:#aeb9c8; font-size:10px; } .mt-mastery-states i { width:7px; height:7px; border-radius:50%; background:#536174; } .mt-mastery-states i.is-practice { background:#38bdf8; } .mt-mastery-states i.is-almost { background:#fbbf24; } .mt-mastery-states i.is-master { background:#4ade80; } .mt-mastery-states i.is-review { background:#f87171; } .mt-mastery-states b { color:#fff; font-size:11px; } .mt-bonus-note { display:inline-flex; margin-top:12px; padding:8px 11px; border-radius:11px; background:rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.16); color:#cabfff; font-size:11px; font-weight:700; } .mt-unit-mastery { margin-top:11px; display:grid; gap:6px; } .mt-unit-mastery > div:first-child { display:flex; justify-content:space-between; gap:10px; color:#8798ad; font-size:10px; } .mt-unit-mastery b { color:#e9eef6 !important; } .mt-unit-mastery small { color:#718299 !important; font-size:10px !important; } .mt-domain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .mt-domain-card { padding:17px; border:1px solid var(--mt-v5-line); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); } .mt-domain-card header { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; } .mt-domain-card header > span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--domain) 14%,#121b26); font-size:22px; } .mt-domain-card header > div { display:grid; gap:2px; } .mt-domain-card header strong { color:#fff; font-size:14px; } .mt-domain-card header small { color:#8495aa; font-size:10px; } .mt-domain-card header > b { color:#fff; font-size:15px; } .mt-domain-card .mt-line-progress { margin:13px 0 10px; height:6px; background:#090f16; } .mt-domain-card .mt-line-progress span { background:var(--domain); } .mt-domain-states { display:flex; flex-wrap:wrap; gap:6px; } .mt-domain-states span { padding:6px 8px; border-radius:9px; background:rgba(255,255,255,.04); color:#8999ad; font-size:9px; } .mt-domain-states span b { color:#dfe6ee; } .mt-domain-states .is-due { background:rgba(248,113,113,.08); color:#fda4af; } .mt-skill-detail-list { display:grid; gap:9px; } .mt-skill-detail { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.055); } .mt-skill-detail:last-child { border-bottom:0; } .mt-skill-dot { width:9px; height:9px; border-radius:50%; background:#5b6878; box-shadow:0 0 0 5px rgba(255,255,255,.02); } .mt-skill-dot--descobrindo { background:#60a5fa; } .mt-skill-dot--praticando { background:#38bdf8; } .mt-skill-dot--quase-dominado { background:#fbbf24; } .mt-skill-dot--dominado { background:#4ade80; } .mt-skill-dot--revisar { background:#fb7185; } .mt-skill-detail > div { min-width:0; display:grid; gap:4px; } .mt-skill-detail strong { color:#f3f6fa; font-size:12.5px; line-height:1.3; } .mt-skill-detail small { color:#7f90a5; font-size:10px; line-height:1.4; } .mt-skill-detail .mt-line-progress { height:5px; background:#0a1017; } .mt-skill-detail .mt-line-progress span { background:linear-gradient(90deg,#24e1ff,#7c5cfc); } .mt-skill-detail > b { color:#edf3f8; font-size:12px; } /* New exercise engines */ .mt-numeric-answer { display:grid; justify-items:center; gap:10px; padding:12px 0; } .mt-numeric-answer label { min-width:min(100%,420px); min-height:90px; padding:13px 18px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; border:2px solid rgba(255,255,255,.10); border-radius:22px; background:#0c141e; } .mt-numeric-answer label:focus-within { border-color:#24e1ff; box-shadow:0 0 0 5px rgba(36,225,255,.08); } .mt-numeric-answer input { width:100%; border:0 !important; outline:0 !important; background:transparent !important; color:#fff !important; text-align:center; font-size:clamp(31px,5vw,48px) !important; font-weight:950 !important; letter-spacing:-.04em; box-shadow:none !important; } .mt-numeric-answer label > span,.mt-numeric-answer label > b { color:#9cacc0; font-size:17px; } .mt-numeric-answer > small { color:#788ba2; font-size:11px; } .mt-match { display:grid; gap:12px; } .mt-match-help { color:#7f91a8; font-size:11px; } .mt-match-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mt-match-col { display:grid; gap:9px; align-content:start; } .mt-match-left,.mt-match-right { min-height:76px; width:100%; padding:13px 15px; display:grid; align-content:center; gap:3px; border:1.5px solid rgba(255,255,255,.09); border-radius:18px; background:#101925; color:#edf4fb; text-align:left; cursor:pointer; } .mt-match-left strong,.mt-match-right strong { font-size:15px; line-height:1.3; } .mt-match-left small { color:#71859d; font-size:10px; } .mt-match-left.is-active { border-color:#24e1ff; background:rgba(36,225,255,.08); box-shadow:0 0 0 4px rgba(36,225,255,.06); } .mt-match-left.is-paired { border-color:rgba(74,222,128,.28); } .mt-match-left.is-paired small { color:#86efac; } .mt-match-right.is-used { opacity:.48; border-style:dashed; } .mt-match-right:hover:not(:disabled),.mt-match-left:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(36,225,255,.26); } .mt-categorize { display:grid; gap:10px; } .mt-cat-card { min-height:84px; padding:15px; display:grid; grid-template-columns:minmax(120px,1fr) minmax(280px,1.6fr) auto; align-items:center; gap:14px; border:1px solid rgba(255,255,255,.085); border-radius:18px; background:#101925; } .mt-cat-card > strong { color:#f6f8fb; font-size:15px; } .mt-cat-card > div { display:flex; flex-wrap:wrap; gap:7px; } .mt-cat-card button { min-height:39px; padding:0 12px; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:#151f2c; color:#9cadc0; font-size:10px; font-weight:850; cursor:pointer; } .mt-cat-card button.is-selected { border-color:#24e1ff; background:rgba(36,225,255,.09); color:#dffbff; } .mt-cat-card > small { min-width:72px; color:#8ea0b6; font-size:10px; text-align:right; } .mt-cat-card > small.is-good { color:#86efac; } .mt-cat-card > small.is-bad { color:#fda4af; } .mt-sentence { display:grid; gap:15px; } .mt-sentence-build { min-height:104px; padding:16px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; border:1.5px dashed rgba(36,225,255,.20); border-radius:20px; background:rgba(36,225,255,.025); } .mt-sentence-build > span { align-self:center; margin:auto; color:#65798f; font-size:13px; } .mt-sentence-build button,.mt-token-bank button { min-height:45px; padding:0 14px; border-radius:12px; font-size:14px; font-weight:800; cursor:pointer; } .mt-sentence-build button { border:1px solid rgba(36,225,255,.26); background:rgba(36,225,255,.09); color:#e6fcff; } .mt-token-bank { display:flex; flex-wrap:wrap; gap:8px; } .mt-token-bank button { border:1px solid rgba(255,255,255,.09); background:#151f2c; color:#dae3ed; } .mt-token-bank button:hover { transform:translateY(-1px); border-color:rgba(124,92,252,.40); } .mt-physical { display:grid; gap:17px; } .mt-physical-steps { padding:17px; display:grid; grid-template-columns:50px minmax(0,1fr); gap:14px; border:1px solid rgba(249,115,22,.15); border-radius:20px; background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(255,255,255,.02)); } .mt-physical-steps > span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:rgba(249,115,22,.10); font-size:24px; } .mt-physical-steps > div { display:grid; gap:7px; } .mt-physical-steps strong { color:#fff; font-size:14px; } .mt-physical-steps p { margin:0 !important; display:grid; grid-template-columns:26px 1fr; align-items:center; gap:8px; color:#9faec0; font-size:12px; } .mt-physical-steps p b { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.055); color:#fdba74; font-size:10px; } .mt-feedback-meta { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .mt-mastery-pill { display:inline-flex; align-items:center; min-height:29px; padding:0 9px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.04); color:#b9c5d3; font-size:10px; font-weight:850; } .mt-mastery-pill--praticando,.mt-mastery-pill--descobrindo { border-color:rgba(56,189,248,.20); color:#7dd3fc; background:rgba(56,189,248,.06); } .mt-mastery-pill--quase-dominado { border-color:rgba(251,191,36,.20); color:#fde68a; background:rgba(251,191,36,.06); } .mt-mastery-pill--dominado { border-color:rgba(74,222,128,.20); color:#86efac; background:rgba(74,222,128,.06); } .mt-mastery-pill--revisar { border-color:rgba(251,113,133,.20); color:#fda4af; background:rgba(251,113,133,.06); } .mt-recomposition { margin-top:12px; padding:12px 13px; display:grid; gap:3px; border-radius:13px; border:1px solid rgba(251,191,36,.16); background:rgba(251,191,36,.055); } .mt-recomposition b { color:#fde68a !important; font-size:11px !important; } .mt-recomposition span { color:#c1ad7d; font-size:11px; line-height:1.45; } @media (max-width:980px) { .mt-subject-grid--v5,.mt-bonus-grid,.mt-domain-grid { grid-template-columns:1fr; } .mt-mastery-overview { grid-template-columns:1fr; } .mt-mastery-overview > div:first-child { padding-right:0; padding-bottom:13px; border-right:0; border-bottom:1px solid var(--mt-v5-line); } } @media (max-width:760px) { .mt-daily-command { align-items:stretch; flex-direction:column; padding:17px; border-radius:20px; } .mt-daily-command .mt-btn { width:100%; } .mt-subject-card--world { min-height:108px; grid-template-columns:52px minmax(0,1fr) auto !important; gap:12px !important; } .mt-subject-card--world > svg { display:none; } .mt-world-icon { width:50px !important; height:50px !important; font-size:24px !important; } .mt-world-score { align-self:start; } .mt-mastery-states { grid-template-columns:repeat(2,minmax(0,1fr)); } .mt-match-grid { grid-template-columns:1fr; } .mt-match-col:last-child { padding-top:10px; border-top:1px solid rgba(255,255,255,.06); } .mt-cat-card { grid-template-columns:1fr; gap:9px; } .mt-cat-card > small { text-align:left; } .mt-numeric-answer label { min-height:78px; } .mt-numeric-answer input { font-size:34px !important; } } /* ============================================================ MegaTitan Standalone v2 — Product polish Mantém a UI gamificada completa e refina escala/ritmo/contraste. ============================================================ */ html,body{margin:0;min-height:100%;background:#070a10} body.acr-standalone-page{min-height:100vh;min-height:100dvh} .acr-page-shell{min-height:100vh;min-height:100dvh} #acr-app{font-size:16px;letter-spacing:-.005em} .mt-main{padding-top:38px;padding-bottom:72px} .mt-home-hero--v5{border-radius:30px;padding:clamp(28px,4vw,52px);min-height:410px} .mt-home-copy h1{font-size:clamp(40px,5.2vw,74px);line-height:.98;letter-spacing:-.058em;max-width:850px} .mt-home-copy p{font-size:18px;line-height:1.62;max-width:720px;color:#b5c0ce} .mt-home-actions .mt-btn{min-height:58px;padding:0 22px} .mt-btn{font-size:14px;letter-spacing:.025em} .mt-section{margin-top:48px} .mt-section-head h2{font-size:clamp(27px,3vw,38px);letter-spacing:-.045em} .mt-section-head p{font-size:16px;line-height:1.6} .mt-subject-card--world{min-height:124px;border-radius:22px;padding:20px 22px} .mt-subject-card--world strong{font-size:19px} .mt-daily-command{border-radius:24px;padding:20px 22px} .mt-daily-command strong{font-size:18px} .mt-speech--intro p{font-size:18px;line-height:1.62} .mt-speech--intro .mt-speech__big{font-size:clamp(28px,4vw,42px);line-height:1.12} .mt-name-form label{font-size:14px} .mt-name-form input{font-size:20px;min-height:62px} .mt-question-title,.mt-question-card h1{font-size:clamp(30px,4vw,46px);line-height:1.14} .mt-answer,.mt-option,.mt-tf-option{font-size:17px;line-height:1.45;min-height:72px} .mt-feedback-title,.mt-feedback strong{font-size:21px} .mt-feedback p{font-size:16px;line-height:1.62} .mt-order-item{font-size:17px;min-height:68px} .mt-path-card{border-radius:24px} .mt-page-head h1{font-size:clamp(35px,4.5vw,58px)} .mt-domain-card,.mt-progress-card,.mt-settings-card,.mt-notification-card{border-radius:22px} @media(max-width:760px){ .mt-main{padding-top:24px;padding-bottom:104px} .mt-home-hero--v5{min-height:unset;padding:26px 21px} .mt-home-copy h1{font-size:37px} .mt-home-copy p{font-size:16px} .mt-section{margin-top:34px} .mt-subject-card--world{min-height:112px} .mt-question-title,.mt-question-card h1{font-size:29px} .mt-answer,.mt-option,.mt-tf-option{font-size:16px;min-height:68px} } /* ============================================================ MegaTitan v2.1 — spacing and copy polish ============================================================ */ #acr-app .mt-app-shell{background:linear-gradient(180deg,#070b11,#06090f)} #acr-app .mt-main{width:min(1580px,100%);padding:clamp(32px,3.5vw,58px);gap:32px} #acr-app .mt-main--with-rail{align-items:start} #acr-app .mt-content{display:grid;gap:26px} #acr-app .mt-right-rail{width:min(100%,312px);display:grid;gap:14px;position:sticky;top:108px} #acr-app .mt-rail-card{padding:24px 22px;border-radius:26px} #acr-app .mt-rail-title{margin-bottom:14px} #acr-app .mt-goal-ring{margin:6px auto 14px} #acr-app .mt-sidebar{padding:22px 16px 18px} #acr-app .mt-logo{padding:4px 10px 26px;align-items:center} #acr-app .mt-logo__mark{display:grid;place-items:center;padding:0;background:linear-gradient(145deg,#9b86ff,#6846ed)} #acr-app .mt-logo__mark svg{width:30px;height:30px;display:block} #acr-app .mt-sidebar nav button,#acr-app .mt-sidebar__bottom>button{min-height:60px;padding:0 16px;border-radius:19px} #acr-app .mt-mini-user{padding:14px;border-radius:20px} #acr-app .mt-top-status{height:86px;padding:0 clamp(24px,3vw,46px)} #acr-app .mt-home-hero--v5{min-height:430px;padding:clamp(34px,4vw,60px);grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:40px} #acr-app .mt-home-copy{display:grid;gap:14px;align-content:center} #acr-app .mt-home-copy .mt-kicker{margin-bottom:0} #acr-app .mt-home-copy h1{margin:0;font-size:clamp(44px,5vw,76px);max-width:820px} #acr-app .mt-home-copy p{margin:0;max-width:760px;font-size:19px;line-height:1.68;color:#b8c5d6} #acr-app .mt-home-actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:14px} #acr-app .mt-home-actions .mt-btn{min-width:220px} #acr-app .mt-home-mascot{justify-self:end;align-self:end;padding-right:14px} #acr-app .mt-home-hero--v5 .mt-mascot-bubble{right:57%;top:16%;width:240px;padding:14px 16px;border-radius:20px} #acr-app .mt-home-hero--v5 .mt-mascot-bubble b{display:block;margin-bottom:7px;font-size:14px;line-height:1.45} #acr-app .mt-home-hero--v5 .mt-mascot-bubble span{font-size:13px;line-height:1.58;color:#b8c5d6} #acr-app .mt-daily-command{padding:22px 24px;border-radius:26px;display:flex;justify-content:space-between;gap:18px;align-items:center} #acr-app .mt-daily-command>div{gap:16px} #acr-app .mt-daily-command>div>span{width:54px;height:54px;font-size:26px;border-radius:18px} #acr-app .mt-daily-command>div>div{gap:4px} #acr-app .mt-daily-command b{font-size:11px;letter-spacing:.13em} #acr-app .mt-daily-command strong{font-size:22px;line-height:1.22} #acr-app .mt-daily-command small{font-size:13px;line-height:1.6;max-width:740px} #acr-app .mt-section{margin-top:8px} #acr-app .mt-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:16px} #acr-app .mt-section-head>div{display:grid;gap:8px} #acr-app .mt-section-head p{margin:0;max-width:820px;font-size:15px;line-height:1.65;color:#9caabd} #acr-app .mt-subject-grid--v5{gap:16px 18px} #acr-app .mt-subject-card--world{min-height:136px;padding:22px 24px;grid-template-columns:60px minmax(0,1fr) 64px 22px!important;gap:16px!important;border-radius:24px} #acr-app .mt-world-icon{width:60px;height:60px;border-radius:18px;font-size:29px} #acr-app .mt-subject-card--world>div{gap:5px} #acr-app .mt-subject-card--world>div>strong{font-size:21px;line-height:1.24} #acr-app .mt-subject-card--world>div>small{font-size:12.5px;line-height:1.5} #acr-app .mt-world-score{width:56px;height:56px;border-radius:18px;font-size:22px} #acr-app .mt-bonus-grid{gap:16px} #acr-app .mt-bonus-card{padding:22px;border-radius:24px;min-height:126px} #acr-app .mt-mastery-overview{padding:22px 24px;border-radius:24px} #acr-app .mt-mastery-overview>div:first-child strong{font-size:30px} #acr-app .mt-last-performance{padding:22px 24px;grid-template-columns:88px minmax(0,1fr) auto;gap:18px} #acr-app .mt-last-performance h3{margin:2px 0 6px;font-size:22px;line-height:1.2} #acr-app .mt-last-performance p{margin:0;color:#96a5b8;line-height:1.6} #acr-app .mt-score-orb{width:84px;height:84px} #acr-app .mt-score-orb strong{font-size:23px} #acr-app .mt-option,#acr-app .mt-answer,#acr-app .mt-tf-option{min-height:76px} #acr-app .mt-option strong{font-size:17px;line-height:1.5} #acr-app .mt-question-card{padding:28px 26px 24px} #acr-app .mt-question-card h1{font-size:clamp(31px,3vw,45px);line-height:1.17;margin-bottom:18px} #acr-app .mt-feedback{padding:18px 18px 16px} #acr-app .mt-feedback p{font-size:15px;line-height:1.65} #acr-app .mt-mascot__body>span{display:grid;place-items:center;padding:0;overflow:hidden} #acr-app .mt-mascot__body>span svg{width:78%;height:78%;display:block} #acr-app .mt-titan-glyph{filter:drop-shadow(0 0 10px rgba(85,231,255,.14))} @media (min-width:1260px){#acr-app .mt-main--with-rail{grid-template-columns:minmax(0,1fr) 312px}} @media (max-width:1259px){#acr-app .mt-main{padding:28px 22px}#acr-app .mt-right-rail{width:100%;position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch}#acr-app .mt-right-rail .mt-rail-card:last-child{grid-column:1/-1}#acr-app .mt-home-hero--v5{grid-template-columns:minmax(0,1fr) 280px;gap:26px}} @media (max-width:940px){#acr-app .mt-right-rail{grid-template-columns:1fr}#acr-app .mt-home-hero--v5{grid-template-columns:1fr;padding:30px 24px;min-height:unset}#acr-app .mt-home-mascot{justify-self:center;padding-right:0;margin-top:10px}#acr-app .mt-home-hero--v5 .mt-mascot-bubble{right:56%;top:8%;width:205px}#acr-app .mt-daily-command{flex-direction:column;align-items:stretch}#acr-app .mt-last-performance{grid-template-columns:72px minmax(0,1fr)}#acr-app .mt-last-performance .mt-btn{grid-column:1/-1}} @media (max-width:760px){#acr-app .mt-top-status{padding:0 16px;height:76px}#acr-app .mt-main{padding:18px 14px 96px;gap:20px}#acr-app .mt-content{gap:20px}#acr-app .mt-home-copy h1{font-size:38px}#acr-app .mt-home-copy p{font-size:16px;line-height:1.62}#acr-app .mt-home-actions .mt-btn{min-width:0;flex:1 1 100%}#acr-app .mt-home-hero--v5 .mt-mascot-bubble{position:static;width:100%;margin-bottom:12px}#acr-app .mt-daily-command{padding:18px}#acr-app .mt-daily-command strong{font-size:19px}#acr-app .mt-daily-command small{font-size:12.5px}#acr-app .mt-section-head{align-items:flex-start}#acr-app .mt-subject-card--world{grid-template-columns:52px minmax(0,1fr) 52px!important;padding:18px 18px 18px 16px}#acr-app .mt-subject-card--world>svg{display:none}#acr-app .mt-subject-card--world>div>strong{font-size:18px}#acr-app .mt-world-score{width:48px;height:48px;font-size:18px}#acr-app .mt-question-card{padding:22px 18px 18px}} /* ============================================================ MegaTitan 2.1 — Lobby / Home engineering pass ============================================================ */ #acr-app{ --mt-lobby-gap: clamp(28px,2.2vw,38px); } #acr-app .mt-main{ width:min(1600px,100%); padding:clamp(34px,3.2vw,56px) clamp(30px,3.1vw,52px) 84px; column-gap:34px; } #acr-app .mt-main.mt-main--with-rail{ grid-template-columns:minmax(0,1fr) 304px; } #acr-app .mt-content{ display:flex; flex-direction:column; gap:var(--mt-lobby-gap); } #acr-app .mt-right-rail{ width:304px; gap:18px; top:112px; } #acr-app .mt-rail-card{ padding:24px; border-radius:26px; } #acr-app .mt-rail-title{ margin-bottom:16px; } #acr-app .mt-rail-title span{ font-size:15px; letter-spacing:-.02em; } #acr-app .mt-rail-title b{ font-size:12px; } #acr-app .mt-daily-card p{ margin-top:16px; font-size:13px; line-height:1.62; } #acr-app .mt-rail-card small{ font-size:12px; line-height:1.55; } #acr-app .mt-streak-card{ min-height:104px; padding:20px 22px; } #acr-app .mt-streak-card strong{ font-size:15px; } #acr-app .mt-last-badge strong{ font-size:14px; } #acr-app .mt-last-badge small{ font-size:11.5px; line-height:1.48; } /* Brand mark: Titan SVG instead of letter M */ #acr-app .mt-logo__mark{ width:52px; height:52px; border-radius:17px; color:#fff; background: radial-gradient(circle at 50% 20%,rgba(85,231,255,.18),transparent 45%), linear-gradient(145deg,#1a2130,#101620); border:1px solid rgba(165,140,255,.34); box-shadow:0 14px 34px rgba(55,35,145,.24), inset 0 1px rgba(255,255,255,.07); } #acr-app .mt-logo__mark svg{ width:43px; height:43px; } #acr-app .mt-logo:hover .mt-logo__mark{ border-color:rgba(85,231,255,.42); box-shadow:0 16px 38px rgba(55,35,145,.30),0 0 0 5px rgba(85,231,255,.035); } #acr-app .mt-logo strong, #acr-app .mt-logo b{ font-size:20px; letter-spacing:-.045em; } /* Hero = a real lobby, not a banner */ #acr-app .mt-home-hero--v5{ min-height:452px; padding:clamp(40px,4vw,64px); grid-template-columns:minmax(0,1fr) minmax(390px,460px); gap:42px; border-radius:34px; background: radial-gradient(520px 300px at 91% 18%,rgba(85,231,255,.10),transparent 68%), radial-gradient(600px 420px at 2% 100%,rgba(139,108,255,.13),transparent 70%), linear-gradient(125deg,#151931 0%,#0f1722 46%,#0c1820 100%); border:1px solid rgba(125,145,173,.18); box-shadow:0 30px 85px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025); } #acr-app .mt-home-copy{ gap:16px; max-width:800px; } #acr-app .mt-home-copy .mt-kicker{ width:max-content; padding:8px 11px; border-radius:999px; background:rgba(85,231,255,.07); border:1px solid rgba(85,231,255,.10); font-size:11px; } #acr-app .mt-home-copy h1{ font-size:clamp(48px,5.25vw,78px); line-height:.97; letter-spacing:-.062em; text-wrap:balance; } #acr-app .mt-home-copy p{ max-width:760px; font-size:19px; line-height:1.72; color:#b8c5d5; } #acr-app .mt-home-actions{ margin-top:12px; gap:14px; } #acr-app .mt-home-actions .mt-btn{ min-height:62px; min-width:224px; } #acr-app .mt-home-mascot{ min-width:0; width:100%; display:grid; grid-template-columns:minmax(180px,220px) minmax(190px,220px); align-items:center; justify-content:end; gap:8px; padding-right:0; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble{ position:static; width:auto; min-height:150px; padding:20px; border-radius:22px 22px 8px 22px; align-content:center; background:linear-gradient(180deg,rgba(18,25,36,.98),rgba(13,19,28,.98)); border:1px solid rgba(111,134,161,.23); box-shadow:0 22px 50px rgba(0,0,0,.28); } #acr-app .mt-home-hero--v5 .mt-mascot-bubble b{ font-size:15px; line-height:1.4; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble span{ font-size:13.5px; line-height:1.62; } /* Next quest card */ #acr-app .mt-daily-command{ margin:0; padding:26px 28px; min-height:112px; border-radius:28px; gap:28px; } #acr-app .mt-daily-command>div{ gap:18px; } #acr-app .mt-daily-command>div>span{ width:62px; height:62px; border-radius:20px; font-size:29px; } #acr-app .mt-daily-command>div>div{ gap:5px; } #acr-app .mt-daily-command b{ font-size:11px; } #acr-app .mt-daily-command strong{ font-size:23px; letter-spacing:-.025em; } #acr-app .mt-daily-command small{ max-width:760px; font-size:13.5px; line-height:1.62; } #acr-app .mt-daily-command .mt-btn{ min-width:190px; } /* Curriculum world map */ #acr-app .mt-section{ margin-top:18px; } #acr-app .mt-section-head{ margin-bottom:22px; } #acr-app .mt-section-head>div{ gap:9px; } #acr-app .mt-section-head h2{ font-size:clamp(31px,3vw,42px); line-height:1.04; text-wrap:balance; } #acr-app .mt-section-head p{ max-width:850px; font-size:15.5px; line-height:1.66; } #acr-app .mt-subject-grid--v5{ gap:18px; } #acr-app .mt-subject-card--world{ min-height:148px; padding:24px 25px; grid-template-columns:66px minmax(0,1fr) 68px 22px!important; gap:18px!important; border-radius:26px; } #acr-app .mt-world-icon{ width:64px!important; height:64px!important; border-radius:20px!important; font-size:30px!important; } #acr-app .mt-subject-card--world>div{ gap:6px; } #acr-app .mt-subject-card--world>div>b{ font-size:10.5px; } #acr-app .mt-subject-card--world>div>strong{ font-size:22px; letter-spacing:-.025em; } #acr-app .mt-subject-card--world>div>small{ font-size:12.5px; } #acr-app .mt-world-score{ width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.05); font-size:21px; } #acr-app .mt-bonus-grid{ gap:18px; } #acr-app .mt-bonus-card{ min-height:142px; padding:24px; border-radius:26px; } #acr-app .mt-bonus-card strong{ font-size:20px; } #acr-app .mt-bonus-card small{ font-size:12.5px; line-height:1.55; } /* Titan chest icon */ #acr-app .mt-mascot__body>span{ background:#0b111a; border:1px solid rgba(85,231,255,.16); } #acr-app .mt-mascot__body>span svg{ width:94%; height:94%; } /* Mobile keeps hierarchy without turning into a compressed desktop */ @media(max-width:1250px){ #acr-app .mt-main.mt-main--with-rail{ grid-template-columns:minmax(0,1fr); } #acr-app .mt-right-rail{ position:static; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); } #acr-app .mt-right-rail .mt-rail-card:last-child{ grid-column:auto; } } @media(max-width:980px){ #acr-app .mt-home-hero--v5{ grid-template-columns:1fr; min-height:unset; } #acr-app .mt-home-mascot{ grid-template-columns:minmax(0,1fr) 190px; max-width:620px; justify-self:center; } #acr-app .mt-right-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:760px){ #acr-app .mt-main{ padding:20px 14px 104px; } #acr-app .mt-content{ gap:24px; } #acr-app .mt-home-hero--v5{ padding:28px 22px; border-radius:28px; } #acr-app .mt-home-copy h1{ font-size:40px; } #acr-app .mt-home-copy p{ font-size:16px; line-height:1.65; } #acr-app .mt-home-mascot{ grid-template-columns:1fr; gap:12px; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble{ min-height:0; border-radius:20px; } #acr-app .mt-home-mascot .mt-mascot{ justify-self:center; } #acr-app .mt-daily-command{ padding:20px; } #acr-app .mt-section{ margin-top:8px; } #acr-app .mt-section-head h2{ font-size:31px; } #acr-app .mt-subject-card--world{ min-height:128px; grid-template-columns:54px minmax(0,1fr) 52px!important; padding:20px 18px!important; } #acr-app .mt-subject-card--world>svg{ display:none; } #acr-app .mt-world-icon{ width:54px!important; height:54px!important; } #acr-app .mt-subject-card--world>div>strong{ font-size:18px; } #acr-app .mt-world-score{ width:50px; height:50px; font-size:18px; } #acr-app .mt-right-rail{ grid-template-columns:1fr; } } /* ============================================================ MegaTitan 2.2 — Responsive lobby + player avatars + PWA ============================================================ */ /* Rhythm: each block gets one spacing rule; no stacked margins */ #acr-app .mt-content{ gap:0!important; } #acr-app .mt-home-hero--v5{ margin:0; } #acr-app .mt-home-hero--v5 + .mt-daily-command{ margin-top:24px!important; margin-bottom:0!important; } #acr-app .mt-daily-command + .mt-section{ margin-top:54px!important; } #acr-app .mt-home-hero--v5 ~ .mt-section{ margin-bottom:0!important; } #acr-app .mt-home-hero--v5 ~ .mt-section + .mt-section{ margin-top:56px!important; } /* Main desktop canvas */ #acr-app .mt-main{ max-width:1580px; margin-inline:auto; padding:34px 32px 78px; gap:32px; } #acr-app .mt-main.mt-main--with-rail{ grid-template-columns:minmax(0,1fr) 292px; } #acr-app .mt-right-rail{ width:292px; gap:16px; top:108px; } /* Hero: less empty vertical space, stronger layout */ #acr-app .mt-home-hero--v5{ min-height:404px; padding:48px 50px; grid-template-columns:minmax(0,1fr) minmax(360px,410px); gap:34px; } #acr-app .mt-home-copy{ align-self:center; } #acr-app .mt-home-copy h1{ max-width:760px; margin-top:18px; margin-bottom:16px; font-size:clamp(46px,4.8vw,72px); } #acr-app .mt-home-copy p{ max-width:720px; margin:0; font-size:18px; } #acr-app .mt-home-actions{ margin-top:26px; } #acr-app .mt-home-mascot{ grid-template-columns:minmax(170px,205px) minmax(165px,190px); align-content:center; gap:12px; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble{ min-height:132px; padding:18px; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble b{ font-size:14px; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble span{ font-size:12.5px; } /* Next quest */ #acr-app .mt-daily-command{ min-height:102px; padding:21px 24px; border-radius:24px; } #acr-app .mt-daily-command>div>span{ width:56px; height:56px; border-radius:17px; } #acr-app .mt-daily-command strong{ font-size:20px; } #acr-app .mt-daily-command small{ font-size:12.5px; } /* World section */ #acr-app .mt-section-head{ margin-bottom:20px; } #acr-app .mt-section-head h2{ margin-top:7px; font-size:clamp(29px,2.6vw,38px); } #acr-app .mt-section-head p{ margin-top:7px; font-size:14.5px; max-width:880px; } #acr-app .mt-subject-grid--v5{ gap:16px; } #acr-app .mt-subject-card--world{ min-height:132px; padding:21px 22px; grid-template-columns:58px minmax(0,1fr) 58px 20px!important; gap:15px!important; } #acr-app .mt-world-icon{ width:56px!important; height:56px!important; border-radius:18px!important; } #acr-app .mt-subject-card--world>div>strong{ font-size:19px; } #acr-app .mt-world-score{ width:52px; height:52px; border-radius:16px; font-size:18px; } /* Right rail: compact but readable */ #acr-app .mt-rail-card{ padding:20px; border-radius:22px; } #acr-app .mt-daily-ring{ margin-block:8px 10px; } #acr-app .mt-streak-card{ min-height:92px; } #acr-app .mt-last-badge{ gap:10px; } /* Player avatar primitives */ #acr-app .mt-player-avatar{ display:grid; place-items:center; overflow:hidden; flex:0 0 auto; background: radial-gradient(circle at 50% 18%,rgba(99,216,255,.10),transparent 48%), linear-gradient(145deg,#172131,#0d131c); border:1px solid rgba(135,157,184,.22); } #acr-app .mt-player-avatar__svg{ width:88%; height:88%; display:block; } #acr-app .mt-player-avatar--mini{ width:42px; height:42px; border-radius:14px; } #acr-app .mt-player-avatar--top{ width:100%; height:100%; border-radius:inherit; } #acr-app .mt-player-avatar--profile{ width:100%; height:100%; border-radius:inherit; } #acr-app .mt-mini-user > .mt-player-avatar{ width:42px!important; height:42px!important; } #acr-app .mt-status-avatar{ padding:3px; overflow:hidden; } #acr-app .mt-profile-avatar{ padding:4px; background:#0d1420; border-color:rgba(99,216,255,.19); } /* Avatar picker */ #acr-app .mt-avatar-picker{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin-top:18px; } #acr-app .mt-avatar-choice{ min-width:0; min-height:128px; padding:12px 8px 11px; display:grid; grid-template-rows:70px auto auto; place-items:center; gap:5px; border:1px solid #263445; border-bottom-width:3px; border-radius:18px; background:#0c131c; color:#dce6f0!important; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; } #acr-app .mt-avatar-choice:hover{ transform:translateY(-2px); background:#101a25; border-color:#40566f; } #acr-app .mt-avatar-choice.is-selected{ border-color:#63d8ff; background:linear-gradient(180deg,rgba(99,216,255,.10),rgba(139,108,255,.08)); box-shadow:0 0 0 3px rgba(99,216,255,.07); } #acr-app .mt-avatar-choice>span{ width:66px; height:66px; display:grid; place-items:center; border-radius:17px; background:#111a25; } #acr-app .mt-avatar-choice__svg{ width:58px; height:58px; } #acr-app .mt-avatar-choice strong{ font-size:13px; line-height:1.2; } #acr-app .mt-avatar-choice small{ color:#8294a8; font-size:10px; } /* Onboarding: avatar selection is part of identity setup */ #acr-app .mt-onboarding__panel{ max-width:720px; } #acr-app .mt-onboarding-avatar{ margin-top:22px; padding:18px; border:1px solid rgba(116,139,166,.16); border-radius:22px; background:rgba(9,14,21,.62); } #acr-app .mt-onboarding-avatar>div:first-child{ display:flex; align-items:center; justify-content:space-between; gap:16px; } #acr-app .mt-onboarding-avatar p{ margin:0; color:#91a0b2; font-size:12px; } #acr-app .mt-onboarding-avatar .mt-avatar-picker{ margin-top:14px; } #acr-app .mt-onboarding-avatar .mt-avatar-choice{ min-height:112px; grid-template-rows:58px auto auto; } #acr-app .mt-onboarding-avatar .mt-avatar-choice>span{ width:56px; height:56px; } #acr-app .mt-onboarding-avatar .mt-avatar-choice__svg{ width:50px; height:50px; } /* Profile */ #acr-app .mt-profile-head{ min-height:180px; grid-template-columns:94px minmax(0,1fr) 150px; } #acr-app .mt-profile-avatar{ width:88px; height:88px; } #acr-app .mt-settings-card{ margin-top:16px; } #acr-app .mt-avatar-settings{ padding-bottom:26px; } #acr-app .mt-settings-title strong{ font-size:14px; } #acr-app .mt-settings-title small{ font-size:11.5px; line-height:1.45; } /* PWA install */ #acr-app .mt-installed-badge{ display:inline-flex; align-items:center; min-height:34px; padding:0 11px; border-radius:999px; background:rgba(111,231,183,.10); border:1px solid rgba(111,231,183,.22); color:#84efc2; font-size:10px; font-weight:900; letter-spacing:.08em; } #acr-app .mt-install-help{ margin-top:15px; padding:14px 16px; border-radius:14px; background:#0a1119; border:1px solid #273648; color:#aebccc; font-size:12.5px; line-height:1.58; } #acr-app .mt-install-help strong{ color:#fff; } /* PWA standalone safe areas */ @media(display-mode:standalone){ body{ padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } #acr-app .mt-mobile-nav{ bottom:max(10px,env(safe-area-inset-bottom)); } #acr-app .mt-top-status{ padding-top:max(0px,env(safe-area-inset-top)); } } /* ---- RESPONSIVE ENGINEERING ---- */ @media(max-width:1480px){ #acr-app .mt-main{ padding-inline:26px; gap:26px; } #acr-app .mt-main.mt-main--with-rail{ grid-template-columns:minmax(0,1fr) 272px; } #acr-app .mt-right-rail{ width:272px; } #acr-app .mt-home-hero--v5{ grid-template-columns:minmax(0,1fr) 350px; padding:42px; } #acr-app .mt-home-mascot{ grid-template-columns:170px 165px; } } @media(max-width:1240px){ #acr-app .mt-main.mt-main--with-rail{ grid-template-columns:1fr; } #acr-app .mt-right-rail{ position:static; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } #acr-app .mt-right-rail .mt-rail-card{ min-height:142px; } #acr-app .mt-streak-card{ align-content:center; } } @media(max-width:1020px){ #acr-app .mt-home-hero--v5{ grid-template-columns:1fr; min-height:unset; } #acr-app .mt-home-mascot{ width:min(620px,100%); grid-template-columns:minmax(0,1fr) 190px; justify-self:center; } #acr-app .mt-home-copy h1{ max-width:900px; } #acr-app .mt-subject-grid--v5{ grid-template-columns:1fr!important; } #acr-app .mt-right-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); } #acr-app .mt-avatar-picker{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:760px){ #acr-app .mt-main{ padding:18px 14px 104px; } #acr-app .mt-home-hero--v5{ padding:27px 21px; border-radius:25px; } #acr-app .mt-home-copy h1{ margin-top:14px; font-size:clamp(36px,10vw,44px); line-height:1.01; } #acr-app .mt-home-copy p{ font-size:16px; line-height:1.62; } #acr-app .mt-home-actions{ display:grid; grid-template-columns:1fr; width:100%; } #acr-app .mt-home-actions .mt-btn{ width:100%; min-width:0; } #acr-app .mt-home-mascot{ grid-template-columns:1fr; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble{ order:2; min-height:0; } #acr-app .mt-home-mascot .mt-mascot{ order:1; justify-self:center; } #acr-app .mt-home-hero--v5 + .mt-daily-command{ margin-top:16px!important; } #acr-app .mt-daily-command + .mt-section{ margin-top:38px!important; } #acr-app .mt-home-hero--v5 ~ .mt-section + .mt-section{ margin-top:40px!important; } #acr-app .mt-daily-command{ padding:18px; gap:16px; } #acr-app .mt-daily-command>div{ align-items:flex-start; } #acr-app .mt-daily-command strong{ font-size:18px; } #acr-app .mt-section-head{ margin-bottom:16px; } #acr-app .mt-section-head h2{ font-size:29px; } #acr-app .mt-subject-card--world{ min-height:118px; grid-template-columns:52px minmax(0,1fr) 48px!important; padding:18px!important; } #acr-app .mt-world-icon{ width:50px!important; height:50px!important; } #acr-app .mt-subject-card--world>div>strong{ font-size:17px; } #acr-app .mt-world-score{ width:46px; height:46px; font-size:16px; } #acr-app .mt-right-rail{ grid-template-columns:1fr; } #acr-app .mt-right-rail .mt-rail-card{ min-height:0; } #acr-app .mt-avatar-picker{ grid-template-columns:repeat(2,minmax(0,1fr)); } #acr-app .mt-profile-head{ grid-template-columns:74px minmax(0,1fr); min-height:150px; padding:21px; } #acr-app .mt-profile-head>.mt-mascot{ display:none; } #acr-app .mt-profile-avatar{ width:68px; height:68px; } #acr-app .mt-settings-card{ padding:19px; } #acr-app .mt-settings-title{ gap:12px; } #acr-app .mt-install-card .mt-settings-title{ align-items:flex-start; flex-wrap:wrap; } #acr-app .mt-install-card .mt-btn{ width:100%; margin-top:6px; } } @media(max-width:480px){ #acr-app .mt-home-hero--v5{ padding:24px 18px; } #acr-app .mt-home-copy h1{ font-size:35px; } #acr-app .mt-home-copy .mt-kicker{ font-size:9.5px; } #acr-app .mt-daily-command>div>span{ width:48px; height:48px; } #acr-app .mt-section-head h2{ font-size:27px; } #acr-app .mt-subject-card--world{ grid-template-columns:46px minmax(0,1fr) 44px!important; gap:11px!important; padding:16px!important; } #acr-app .mt-world-icon{ width:44px!important; height:44px!important; border-radius:14px!important; } #acr-app .mt-subject-card--world>div>b{ font-size:9px; } #acr-app .mt-subject-card--world>div>strong{ font-size:16px; } #acr-app .mt-subject-card--world>div>small{ font-size:10.5px; } #acr-app .mt-avatar-choice{ min-height:116px; } #acr-app .mt-onboarding-avatar{ padding:14px; } #acr-app .mt-onboarding-avatar>div:first-child{ display:block; } #acr-app .mt-onboarding-avatar p{ margin-top:5px; } } /* ============================================================ MegaTitan 2.2.1 — Home vertical rhythm fix Estrutural: wrappers com gap real, não margens entre siblings. ============================================================ */ #acr-app .mt-content{ display:block!important; } #acr-app .mt-home-lobby{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:32px; } #acr-app .mt-home-lobby > .mt-home-hero--v5, #acr-app .mt-home-lobby > .mt-daily-command{ margin:0!important; } #acr-app .mt-home-flow{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:76px; margin-top:74px; padding-bottom:24px; } #acr-app .mt-home-flow > .mt-section{ margin:0!important; padding:0!important; } #acr-app .mt-home-flow > .mt-section + .mt-section{ margin-top:0!important; } /* O cabeçalho pertence visualmente à seção, não ao bloco anterior. */ #acr-app .mt-home-flow .mt-section-head{ margin:0 0 26px!important; } #acr-app .mt-home-flow .mt-section-head > div{ display:grid; gap:8px; } #acr-app .mt-home-flow .mt-section-head .mt-kicker{ margin:0; } #acr-app .mt-home-flow .mt-section-head h2{ margin:0; } #acr-app .mt-home-flow .mt-section-head p{ margin:0; } /* Mais ar dentro do card de próxima quest para ele não parecer uma extensão do hero. */ #acr-app .mt-home-lobby .mt-daily-command{ min-height:110px; padding:23px 26px; } /* Desktop ultrawide: respiro maior, sem exagerar altura do hero. */ @media(min-width:1500px){ #acr-app .mt-home-lobby{ row-gap:36px; } #acr-app .mt-home-flow{ margin-top:84px; row-gap:84px; } #acr-app .mt-home-flow .mt-section-head{ margin-bottom:30px!important; } } /* Notebook/tablet */ @media(max-width:1240px){ #acr-app .mt-home-lobby{ row-gap:26px; } #acr-app .mt-home-flow{ margin-top:58px; row-gap:64px; } } /* Mobile: menos espaço absoluto, mas ainda existe separação inequívoca. */ @media(max-width:760px){ #acr-app .mt-home-lobby{ row-gap:18px; } #acr-app .mt-home-flow{ margin-top:42px; row-gap:48px; padding-bottom:12px; } #acr-app .mt-home-flow .mt-section-head{ margin-bottom:18px!important; } #acr-app .mt-home-lobby .mt-daily-command{ min-height:0; padding:18px; } } @media(max-width:480px){ #acr-app .mt-home-flow{ margin-top:36px; row-gap:42px; } } /* ============================================================ MegaTitan 2.2.2 — Premium spacing pass Valores deliberadamente amplos para blocos de grande escala. ============================================================ */ #acr-app .mt-home-lobby{ row-gap:42px!important; } #acr-app .mt-home-flow{ margin-top:92px!important; row-gap:92px!important; } #acr-app .mt-home-flow .mt-section-head{ margin-bottom:32px!important; } #acr-app .mt-subject-grid--v5, #acr-app .mt-bonus-grid{ gap:22px!important; } #acr-app .mt-right-rail{ gap:22px!important; } #acr-app .mt-rail-card{ padding-block:23px!important; } @media(min-width:1500px){ #acr-app .mt-home-lobby{ row-gap:46px!important; } #acr-app .mt-home-flow{ margin-top:104px!important; row-gap:100px!important; } } @media(max-width:1240px){ #acr-app .mt-home-lobby{ row-gap:32px!important; } #acr-app .mt-home-flow{ margin-top:68px!important; row-gap:72px!important; } #acr-app .mt-right-rail{ gap:18px!important; } } @media(max-width:760px){ #acr-app .mt-home-lobby{ row-gap:24px!important; } #acr-app .mt-home-flow{ margin-top:52px!important; row-gap:58px!important; } #acr-app .mt-home-flow .mt-section-head{ margin-bottom:22px!important; } #acr-app .mt-subject-grid--v5, #acr-app .mt-bonus-grid{ gap:16px!important; } } @media(max-width:480px){ #acr-app .mt-home-lobby{ row-gap:20px!important; } #acr-app .mt-home-flow{ margin-top:46px!important; row-gap:52px!important; } } /* ============================================================ MEGATITAN 2.3 — SCREEN LAYOUT ENGINE One page canvas. One stack. No touching panels. ============================================================ */ #acr-app{ --mt-screen-x: clamp(28px, 2.4vw, 46px); --mt-screen-top: clamp(30px, 2.25vw, 42px); --mt-screen-bottom: clamp(72px, 6vw, 104px); --mt-panel-gap: clamp(28px, 2.1vw, 38px); --mt-section-gap: clamp(58px, 4.4vw, 82px); --mt-card-gap: clamp(16px, 1.35vw, 22px); } /* The main canvas itself owns breathing room from topbar and sidebar. */ #acr-app .mt-main, #acr-app .mt-main:not(.mt-main--with-rail), #acr-app .mt-main.mt-main--with-rail{ box-sizing:border-box!important; padding: var(--mt-screen-top) var(--mt-screen-x) var(--mt-screen-bottom)!important; } /* Every screen is now a layout context. */ #acr-app .mt-content{ min-width:0; width:100%; margin:0!important; } /* Non-home pages receive their own structural vertical stack. */ #acr-app .mt-content--learn, #acr-app .mt-content--review, #acr-app .mt-content--progress, #acr-app .mt-content--profile, #acr-app .mt-content--notifications{ display:grid!important; grid-template-columns:minmax(0,1fr); align-content:start; row-gap:var(--mt-panel-gap)!important; } /* Learn has one explicit stack so all three major blocks are guaranteed apart. */ #acr-app .mt-screen-stack{ display:grid; grid-template-columns:minmax(0,1fr); align-content:start; row-gap:var(--mt-panel-gap); min-width:0; } #acr-app .mt-screen-stack > *{ margin-block:0!important; } /* HERO / PAGE HEADER */ #acr-app .mt-page-head{ margin:0!important; min-height:238px; padding:clamp(34px,3.1vw,50px) clamp(36px,3.3vw,54px)!important; border-radius:30px!important; } #acr-app .mt-page-head h1{ margin:10px 0 12px!important; } #acr-app .mt-page-head p{ margin:0!important; max-width:780px; } /* SUMMARY = distinct panel row, not glued to header/path */ #acr-app .mt-learning-summary{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--mt-card-gap)!important; margin:0!important; } #acr-app .mt-learning-summary>div{ min-height:84px; padding:20px 22px!important; border-radius:20px!important; } #acr-app .mt-learning-summary span{ font-size:26px; } #acr-app .mt-learning-summary strong{ font-size:19px; } #acr-app .mt-learning-summary small{ max-width:none!important; font-size:11px!important; line-height:1.45!important; margin-left:0; } /* MISSION MAP = independent panel with clear perimeter */ #acr-app .mt-path{ margin:0!important; min-height:760px; padding:clamp(42px,4vw,62px) clamp(30px,5vw,78px) clamp(64px,5vw,86px)!important; border-radius:30px!important; } #acr-app .mt-path-step{ min-height:194px!important; } #acr-app .mt-path-node-wrap{ gap:26px!important; } #acr-app .mt-path-card{ padding:20px 22px!important; border-radius:22px!important; } #acr-app .mt-path-card>span{ font-size:10px!important; } #acr-app .mt-path-card h3{ margin:7px 0 7px!important; font-size:19px!important; } #acr-app .mt-path-card p{ font-size:12px!important; line-height:1.55!important; } #acr-app .mt-path-card b, #acr-app .mt-path-card small{ font-size:11px!important; } #acr-app .mt-unit-mastery{ margin-top:14px; } /* General major panels on other screens must never collapse together. */ #acr-app .mt-content--review > *, #acr-app .mt-content--progress > *, #acr-app .mt-content--profile > *, #acr-app .mt-content--notifications > *{ margin-block:0!important; } #acr-app .mt-content--review .mt-page-head, #acr-app .mt-content--progress .mt-page-head, #acr-app .mt-content--profile .mt-profile-head{ margin-bottom:0!important; } /* Cards/grids have their own internal rhythm. */ #acr-app .mt-mode-grid, #acr-app .mt-review-grid, #acr-app .mt-stat-grid, #acr-app .mt-domain-grid, #acr-app .mt-progress-grid, #acr-app .mt-settings-grid{ gap:var(--mt-card-gap)!important; } /* Sidebar / topbar separation remains visual, while canvas starts after padding. */ #acr-app .mt-main-wrap{ overflow-x:hidden; } #acr-app .mt-top-status{ position:sticky; top:0; } /* Home keeps its custom wrappers but now gets guaranteed outer canvas padding. */ #acr-app .mt-content--home{ width:100%; } /* Large desktop: make the separation unmistakable. */ @media(min-width:1500px){ #acr-app{ --mt-screen-x:44px; --mt-screen-top:38px; --mt-panel-gap:34px; --mt-section-gap:84px; } #acr-app .mt-screen-stack--learn{ row-gap:34px; } } /* Tablet / small desktop */ @media(max-width:1100px){ #acr-app{ --mt-screen-x:22px; --mt-screen-top:24px; --mt-panel-gap:24px; } #acr-app .mt-page-head{ min-height:210px; padding:32px 28px!important; } #acr-app .mt-learning-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); } #acr-app .mt-path{ padding:38px 24px 58px!important; } } /* Phone / narrow tablet */ @media(max-width:760px){ #acr-app{ --mt-screen-x:14px; --mt-screen-top:18px; --mt-screen-bottom:106px; --mt-panel-gap:18px; --mt-card-gap:12px; } #acr-app .mt-main, #acr-app .mt-main:not(.mt-main--with-rail), #acr-app .mt-main.mt-main--with-rail{ padding: var(--mt-screen-top) var(--mt-screen-x) var(--mt-screen-bottom)!important; } #acr-app .mt-page-head{ min-height:0; padding:26px 20px!important; border-radius:24px!important; } #acr-app .mt-page-head h1{ margin:8px 0 11px!important; } #acr-app .mt-learning-summary{ grid-template-columns:1fr!important; gap:10px!important; } #acr-app .mt-learning-summary>div{ min-height:70px; padding:16px 17px!important; } #acr-app .mt-learning-summary>div strong{ margin-left:auto!important; } #acr-app .mt-learning-summary>div small{ margin-left:8px!important; } #acr-app .mt-path{ min-height:0; padding:28px 16px 48px!important; border-radius:24px!important; } #acr-app .mt-path-step{ min-height:158px!important; } #acr-app .mt-path-node-wrap, #acr-app .mt-path-step--right .mt-path-node-wrap{ gap:14px!important; } #acr-app .mt-path-card{ padding:17px!important; } } @media(max-width:460px){ #acr-app{ --mt-screen-x:12px; --mt-panel-gap:16px; } #acr-app .mt-page-head{ padding:23px 17px!important; } } /* ============================================================ MegaTitan 2.4 — Interactive personality / touch reactions ============================================================ */ #acr-app .mt-mascot[data-mt-mascot]{ cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; outline:none; will-change:transform,filter,opacity; } #acr-app .mt-mascot[data-mt-mascot]:focus-visible{ border-radius:30%; outline:3px solid rgba(85,231,255,.34); outline-offset:8px; } /* The idle float is replaced while a reaction state owns transform. */ #acr-app .mt-mascot--poke, #acr-app .mt-mascot--annoyed, #acr-app .mt-mascot--angry, #acr-app .mt-mascot--dodge, #acr-app .mt-mascot--rage, #acr-app .mt-mascot--leaving, #acr-app .mt-mascot--returning{ animation:none!important; } /* 1 — startled */ #acr-app .mt-mascot--poke{ animation:mtMascotPoke .42s cubic-bezier(.2,.9,.3,1.25)!important; } #acr-app .mt-mascot--poke .mt-mascot__visor span, #acr-app .mt-mascot--poke .mt-mascot__visor b{ animation:none!important; transform:scale(1.22,1.35); } #acr-app .mt-mascot--poke .mt-mascot__antenna{ animation:mtAntennaShock .38s ease!important; } /* 2 — annoyed / half-lidded */ #acr-app .mt-mascot--annoyed{ transform:rotate(-1.5deg); } #acr-app .mt-mascot--annoyed .mt-mascot__visor span, #acr-app .mt-mascot--annoyed .mt-mascot__visor b{ animation:none!important; height:13%!important; top:39%!important; background:#69dbea!important; box-shadow:0 0 calc(8px * var(--s)) rgba(85,231,255,.48)!important; } #acr-app .mt-mascot--annoyed .mt-mascot__mouth{ left:40%!important; right:40%!important; bottom:12%!important; height:3%!important; border-radius:99px!important; background:#9a83ff!important; } /* 3 — angry face */ #acr-app .mt-mascot--angry{ animation:mtMascotAngryShake .34s ease-in-out 2!important; } #acr-app .mt-mascot--angry .mt-mascot__visor span, #acr-app .mt-mascot--angry .mt-mascot__visor b, #acr-app .mt-mascot--rage .mt-mascot__visor span, #acr-app .mt-mascot--rage .mt-mascot__visor b{ animation:none!important; top:38%!important; height:14%!important; width:22%!important; background:#ff6a73!important; box-shadow:0 0 calc(13px * var(--s)) rgba(255,77,91,.78)!important; } #acr-app .mt-mascot--angry .mt-mascot__visor span, #acr-app .mt-mascot--rage .mt-mascot__visor span{ transform:rotate(12deg); } #acr-app .mt-mascot--angry .mt-mascot__visor b, #acr-app .mt-mascot--rage .mt-mascot__visor b{ transform:rotate(-12deg); } #acr-app .mt-mascot--angry .mt-mascot__mouth, #acr-app .mt-mascot--rage .mt-mascot__mouth{ left:39%!important; right:39%!important; bottom:10%!important; height:6%!important; border-radius:20px 20px 0 0!important; background:#ff6a73!important; } #acr-app .mt-mascot--angry .mt-mascot__antenna i, #acr-app .mt-mascot--rage .mt-mascot__antenna i{ background:#ff6a73!important; box-shadow:0 0 calc(18px * var(--s)) rgba(255,77,91,.85)!important; } /* 4 — dodge away from pointer */ #acr-app .mt-mascot--dodge{ transform:translate(var(--mt-dodge-x,70px),var(--mt-dodge-y,0)) rotate(calc(var(--mt-dodge-x,70px) * .025deg)); transition:transform .24s cubic-bezier(.18,.86,.34,1.28)!important; } /* 5 — rage */ #acr-app .mt-mascot--rage{ animation:mtMascotRage .48s ease-in-out 2!important; filter:drop-shadow(0 calc(22px * var(--s)) calc(24px * var(--s)) rgba(0,0,0,.56)) drop-shadow(0 0 calc(11px * var(--s)) rgba(255,77,91,.18))!important; } #acr-app .mt-mascot--rage .mt-mascot__arm--l{ transform:rotate(42deg)!important; } #acr-app .mt-mascot--rage .mt-mascot__arm--r{ transform:rotate(-42deg)!important; } /* 6 — leaves the scene */ #acr-app .mt-mascot--leaving{ animation:mtMascotLeave .64s cubic-bezier(.55,.02,.9,.3) forwards!important; pointer-events:none; } #acr-app .mt-mascot--gone{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } #acr-app .mt-mascot--returning{ visibility:visible!important; opacity:1!important; animation:mtMascotReturn .78s cubic-bezier(.18,.86,.34,1.15) both!important; } /* Fixed speech bubble survives parents with overflow:hidden. */ #acr-app .mt-mascot-reaction{ position:fixed; z-index:9998; left:var(--mt-reaction-left,20px); top:var(--mt-reaction-top,20px); width:var(--mt-reaction-width,270px); max-width:calc(100vw - 24px); padding:14px 16px; border:1px solid #2b3b4e; border-radius:16px; background:rgba(10,16,24,.97); color:#e9f1f8; box-shadow:0 18px 55px rgba(0,0,0,.48); backdrop-filter:blur(14px); pointer-events:none; opacity:0; transform:translateY(7px) scale(.97); transition:opacity .18s ease,transform .18s ease; font-size:13px; font-weight:820; line-height:1.48; } #acr-app .mt-mascot-reaction.is-visible{ opacity:1; transform:translateY(0) scale(1); } #acr-app .mt-mascot-reaction--surprised{ border-color:rgba(85,231,255,.28); } #acr-app .mt-mascot-reaction--annoyed{ border-color:rgba(255,215,106,.26); } #acr-app .mt-mascot-reaction--angry, #acr-app .mt-mascot-reaction--rage{ border-color:rgba(255,106,115,.38); background:linear-gradient(180deg,rgba(31,13,18,.98),rgba(12,15,21,.98)); } #acr-app .mt-mascot-reaction--cold{ border-color:rgba(165,140,255,.32); color:#c9c1ff; } /* Head-only viewport peek. */ .mt-mascot-peek{ --s: .88; position:fixed; z-index:10000; top:clamp(110px,28vh,300px); width:174px; height:126px; pointer-events:none; opacity:0; transition:transform .34s cubic-bezier(.18,.86,.34,1.2),opacity .24s ease; filter:drop-shadow(0 20px 26px rgba(0,0,0,.55)); } .mt-mascot-peek--right{ right:0; transform:translateX(112%); } .mt-mascot-peek--left{ left:0; transform:translateX(-112%); } .mt-mascot-peek--right.is-visible{ opacity:1; transform:translateX(36%); } .mt-mascot-peek--left.is-visible{ opacity:1; transform:translateX(-36%); } .mt-mascot-peek__bot{ --s:.88; position:absolute; width:172px; height:118px; } .mt-mascot-peek__bot .mt-mascot__antenna{ position:absolute; z-index:3; left:48%; top:1%; width:4%; height:28%; background:#05070d; border-radius:99px; } .mt-mascot-peek__bot .mt-mascot__antenna i{ position:absolute; left:50%; top:-15%; width:13px; height:13px; transform:translateX(-50%); border:3px solid #05070d; border-radius:50%; background:#ff6a73; box-shadow:0 0 15px rgba(255,77,91,.85); } .mt-mascot-peek__bot .mt-mascot__ear{ position:absolute; z-index:2; top:31%; width:16%; height:28%; border:4px solid #05070d; background:#7c5cfc; } .mt-mascot-peek__bot .mt-mascot__ear--l{left:7%;border-radius:42% 12% 12% 42%} .mt-mascot-peek__bot .mt-mascot__ear--r{right:7%;border-radius:12% 42% 42% 12%} .mt-mascot-peek__bot .mt-mascot__head{ position:absolute; z-index:4; left:17%; top:20%; width:66%; height:58%; border:4px solid #05070d; border-radius:26% 26% 30% 30%; background:linear-gradient(145deg,#263247 0 48%,#151c29 49% 100%); } .mt-mascot-peek__bot .mt-mascot__visor{ position:absolute; left:12%; right:12%; top:28%; height:34%; border-radius:16px; overflow:hidden; border:3px solid #05070d; background:#08111b; } .mt-mascot-peek__bot .mt-mascot__visor span, .mt-mascot-peek__bot .mt-mascot__visor b{ position:absolute; top:39%; width:22%; height:12%; border-radius:99px; background:#ff6a73; box-shadow:0 0 11px rgba(255,77,91,.8); } .mt-mascot-peek__bot .mt-mascot__visor span{left:22%;transform:rotate(10deg)} .mt-mascot-peek__bot .mt-mascot__visor b{right:22%;transform:rotate(-10deg)} .mt-mascot-peek__bot .mt-mascot__mouth{ position:absolute; left:39%; right:39%; bottom:10%; height:5%; border-radius:20px 20px 0 0; background:#ff6a73; } .mt-mascot-peek__bot .mt-mascot__head::before, .mt-mascot-peek__bot .mt-mascot__head::after{ content:""; position:absolute; top:13%; width:8%; height:8%; border-radius:50%; background:#cad6f3; } .mt-mascot-peek__bot .mt-mascot__head::before{left:9%} .mt-mascot-peek__bot .mt-mascot__head::after{right:9%} .mt-mascot-peek__line{ position:absolute; top:90px; min-width:120px; max-width:190px; padding:9px 11px; border:1px solid rgba(255,106,115,.26); border-radius:12px; background:#111720; color:#e8eef5; box-shadow:0 12px 35px rgba(0,0,0,.42); font-size:11px; font-weight:850; line-height:1.35; white-space:nowrap; } .mt-mascot-peek--right .mt-mascot-peek__line{ right:105px; } .mt-mascot-peek--left .mt-mascot-peek__line{ left:105px; } /* Animation vocabulary */ @keyframes mtMascotPoke{ 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-9px) scale(1.045,.96)} 68%{transform:translateY(3px) scale(.985,1.02)} 100%{transform:translateY(0) scale(1)} } @keyframes mtAntennaShock{ 0%,100%{transform:rotate(0)} 35%{transform:rotate(10deg)} 65%{transform:rotate(-12deg)} } @keyframes mtMascotAngryShake{ 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-5px) rotate(-1.5deg)} 75%{transform:translateX(5px) rotate(1.5deg)} } @keyframes mtMascotRage{ 0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-5px,-2px) rotate(-2deg)} 40%{transform:translate(5px,1px) rotate(2deg)} 60%{transform:translate(-4px,2px) rotate(-1deg)} 80%{transform:translate(4px,-1px) rotate(1deg)} } @keyframes mtMascotLeave{ 0%{transform:translateX(0) rotate(0);opacity:1} 20%{transform:translateX(-18px) rotate(-6deg);opacity:1} 100%{transform:translateX(125vw) rotate(19deg);opacity:0} } @keyframes mtMascotReturn{ 0%{transform:translateX(110vw) rotate(10deg);opacity:0} 72%{transform:translateX(-8px) rotate(-2deg);opacity:1} 100%{transform:translateX(0) rotate(0);opacity:1} } @media(max-width:760px){ #acr-app .mt-mascot-reaction{ font-size:12px; padding:12px 14px; } .mt-mascot-peek{ top:auto; bottom:96px; transform-origin:bottom center; } .mt-mascot-peek--right.is-visible{transform:translateX(44%) scale(.86)} .mt-mascot-peek--left.is-visible{transform:translateX(-44%) scale(.86)} } @media(prefers-reduced-motion:reduce){ #acr-app .mt-mascot--poke, #acr-app .mt-mascot--angry, #acr-app .mt-mascot--rage, #acr-app .mt-mascot--leaving, #acr-app .mt-mascot--returning{ animation:none!important; transition:none!important; } #acr-app .mt-mascot--dodge{ transform:none!important; } .mt-mascot-peek{ transition:opacity .12s linear!important; } } /* ============================================================ MegaTitan 2.4.1 — Mobile-first viewport & responsive repair ============================================================ */ html,body{ width:100%; max-width:100%; min-height:100%; overflow-x:hidden; } body.acr-standalone-page, .acr-page-shell, #acr-app{ width:100%; max-width:100%; min-width:0; } /* ---------- ONBOARDING: must scroll, never crop ---------- */ #acr-app .mt-onboarding{ box-sizing:border-box; width:100%; min-width:0; min-height:100dvh; height:auto; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; } #acr-app .mt-onboarding__panel, #acr-app .mt-onboarding__mascot, #acr-app .mt-speech, #acr-app .mt-name-form, #acr-app .mt-onboarding-avatar{ min-width:0; max-width:100%; box-sizing:border-box; } #acr-app .mt-name-form{ display:grid; gap:18px; margin-top:20px; } #acr-app .mt-name-field{ display:grid; gap:8px; } #acr-app .mt-name-form .mt-name-field input{ width:100%; min-width:0; } #acr-app .mt-onboarding-enter{ width:100%; min-width:0!important; } /* ---------- APP SHELL: no horizontal crop ---------- */ #acr-app .mt-app-shell, #acr-app .mt-main-wrap{ width:100%; max-width:100%; min-width:0; min-height:100dvh; height:auto; overflow-x:clip; } #acr-app .mt-top-status, #acr-app .mt-main, #acr-app .mt-content, #acr-app .mt-screen-stack, #acr-app .mt-home-lobby, #acr-app .mt-home-flow{ box-sizing:border-box; min-width:0; max-width:100%; } #acr-app .mt-content > *, #acr-app .mt-screen-stack > *{ min-width:0; max-width:100%; } @media(max-width:760px){ html{ scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom)); } body{ min-height:var(--mt-visual-height,100dvh); } /* Onboarding becomes a true vertical mobile page. */ #acr-app .mt-onboarding{ display:flex!important; flex-direction:column; justify-content:flex-start!important; align-items:stretch!important; gap:14px!important; place-content:initial!important; min-height:var(--mt-visual-height,100dvh)!important; padding: max(16px,env(safe-area-inset-top)) 14px max(30px,env(safe-area-inset-bottom))!important; } #acr-app .mt-onboarding__glow{ width:260px; height:260px; filter:blur(70px); } #acr-app .mt-onboarding__mascot{ order:1; flex:0 0 auto; min-height:0!important; height:154px!important; margin:0 auto -4px; overflow:visible; } #acr-app .mt-onboarding__mascot .mt-mascot{ --s:.56!important; transform-origin:center center; } #acr-app .mt-onboarding__panel{ order:2; width:100%; margin:0 auto; } #acr-app .mt-brand-kicker{ margin:0 0 10px; font-size:10px; } #acr-app .mt-speech{ padding:19px 17px!important; border-radius:21px!important; backdrop-filter:blur(16px); } #acr-app .mt-speech::before{ display:none!important; } #acr-app .mt-speech p{ margin:0 0 8px; font-size:15px!important; line-height:1.52!important; } #acr-app .mt-speech__big{ margin:14px 0 0!important; font-size:24px!important; line-height:1.08!important; } #acr-app .mt-name-form{ gap:14px; margin-top:16px; } #acr-app .mt-name-form label{ margin:0; font-size:10px; } #acr-app .mt-name-form .mt-name-field input{ height:56px!important; padding:0 15px!important; border-radius:15px!important; font-size:16px!important; /* prevents iOS input zoom */ } #acr-app .mt-onboarding-avatar{ margin:0!important; padding:14px!important; border-radius:19px!important; } #acr-app .mt-onboarding-avatar>div:first-child{ display:block!important; } #acr-app .mt-onboarding-avatar p{ margin-top:5px!important; font-size:11px!important; line-height:1.45; } #acr-app .mt-onboarding-avatar .mt-avatar-picker{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; margin-top:12px!important; } #acr-app .mt-onboarding-avatar .mt-avatar-choice{ min-height:94px!important; padding:8px 5px!important; grid-template-rows:48px auto auto!important; border-radius:14px!important; } #acr-app .mt-onboarding-avatar .mt-avatar-choice>span{ width:46px!important; height:46px!important; border-radius:13px!important; } #acr-app .mt-onboarding-avatar .mt-avatar-choice__svg{ width:42px!important; height:42px!important; } #acr-app .mt-onboarding-avatar .mt-avatar-choice strong{ font-size:11px!important; } #acr-app .mt-onboarding-avatar .mt-avatar-choice small{ font-size:8px!important; } #acr-app .mt-onboarding-enter{ min-height:58px!important; height:auto!important; padding:14px 16px!important; border-radius:16px!important; font-size:11px!important; } #acr-app .mt-onboarding__note{ margin:12px 3px 0!important; padding-bottom:8px; font-size:10px!important; line-height:1.45; } /* Main app canvas and header */ #acr-app .mt-main-wrap{ padding-bottom:0!important; } #acr-app .mt-top-status{ width:100%; height:64px!important; min-height:64px; padding: max(7px,env(safe-area-inset-top)) 12px 7px!important; gap:6px!important; } #acr-app .mt-status-pill{ min-width:0!important; height:38px!important; min-height:38px!important; padding:0 8px!important; } #acr-app .mt-status-avatar{ width:40px!important; height:40px!important; min-width:40px; } #acr-app .mt-main, #acr-app .mt-main:not(.mt-main--with-rail), #acr-app .mt-main.mt-main--with-rail{ width:100%!important; max-width:100%!important; min-width:0!important; display:block!important; padding:18px 12px calc(104px + env(safe-area-inset-bottom))!important; overflow:visible!important; } #acr-app .mt-content{ width:100%!important; min-width:0!important; } #acr-app .mt-right-rail{ width:100%!important; min-width:0!important; position:static!important; display:grid!important; grid-template-columns:1fr!important; gap:12px!important; margin-top:22px!important; } /* All page headers fit the viewport. */ #acr-app .mt-page-head, #acr-app .mt-profile-head{ width:100%!important; max-width:100%!important; min-width:0!important; overflow:hidden!important; } #acr-app .mt-page-head{ display:block!important; min-height:0!important; padding:24px 18px!important; border-radius:22px!important; } #acr-app .mt-page-head h1, #acr-app .mt-profile-head h1{ max-width:100%; overflow-wrap:anywhere; word-break:normal; } #acr-app .mt-page-head h1{ font-size:clamp(30px,10vw,39px)!important; line-height:1.02!important; } #acr-app .mt-page-head p{ font-size:14px!important; line-height:1.58!important; } #acr-app .mt-head-mascot{ display:none!important; } /* Learning summary + path become a single-column vertical route. */ #acr-app .mt-learning-summary{ width:100%!important; grid-template-columns:1fr!important; gap:10px!important; } #acr-app .mt-learning-summary>div{ width:100%; min-width:0; min-height:66px!important; padding:14px 15px!important; } #acr-app .mt-path{ width:100%!important; min-width:0!important; min-height:0!important; padding:22px 12px 32px!important; overflow:hidden!important; border-radius:22px!important; } #acr-app .mt-path-step{ width:100%!important; min-height:0!important; padding:12px 0!important; } #acr-app .mt-path-node-wrap, #acr-app .mt-path-step--right .mt-path-node-wrap{ width:100%!important; max-width:100%!important; margin:0!important; display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; align-items:start!important; gap:12px!important; flex-direction:initial!important; text-align:left!important; } #acr-app .mt-path-node{ width:56px!important; height:56px!important; border-bottom-width:5px!important; border-radius:18px!important; font-size:23px!important; } #acr-app .mt-path-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:15px!important; border-radius:17px!important; } #acr-app .mt-path-card h3{ font-size:17px!important; } #acr-app .mt-path-card p{ font-size:12px!important; } #acr-app .mt-path-line{ display:none!important; } /* Home / hubs / cards must not carry desktop minimum widths. */ #acr-app .mt-home-hero, #acr-app .mt-home-hero--v5, #acr-app .mt-daily-command, #acr-app .mt-mode-card, #acr-app .mt-review-card, #acr-app .mt-course-feature, #acr-app .mt-memory-map, #acr-app .mt-settings-card, #acr-app .mt-notification-card, #acr-app .mt-progress-card, #acr-app .mt-domain-card{ width:100%!important; max-width:100%!important; min-width:0!important; } #acr-app .mt-home-hero--v5{ display:block!important; min-height:0!important; padding:25px 18px!important; } #acr-app .mt-home-mascot{ width:100%!important; min-width:0!important; margin-top:20px; } #acr-app .mt-daily-command{ display:grid!important; grid-template-columns:1fr!important; } #acr-app .mt-daily-command .mt-btn{ width:100%!important; } #acr-app .mt-mode-grid, #acr-app .mt-review-grid, #acr-app .mt-stat-grid, #acr-app .mt-domain-grid, #acr-app .mt-progress-grid{ grid-template-columns:1fr!important; } #acr-app .mt-course-feature{ display:grid!important; grid-template-columns:1fr!important; } #acr-app .mt-course-feature__planet{ min-height:150px!important; } /* Lesson: natural page flow; keyboard/nav cannot cut content. */ #acr-app .mt-lesson-shell{ width:100%; min-height:100dvh!important; height:auto!important; display:flex!important; flex-direction:column!important; overflow-x:hidden!important; overflow-y:visible!important; } #acr-app .mt-lesson-top{ position:sticky!important; top:0; z-index:30; flex:0 0 auto; min-height:64px!important; padding:8px 12px!important; grid-template-columns:42px minmax(0,1fr) 70px!important; gap:8px!important; } #acr-app .mt-lesson-progress{ min-width:0; gap:4px!important; } #acr-app .mt-lesson-progress i{ width:auto!important; flex:1 1 0; min-width:8px; } #acr-app .mt-lesson-stage{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:18px 12px 28px!important; display:grid!important; grid-template-columns:1fr!important; gap:20px!important; } #acr-app .mt-lesson-visual{ width:100%; min-height:210px!important; border-radius:22px!important; } #acr-app .mt-lesson-icon{ font-size:76px!important; } #acr-app .mt-lesson-card{ min-width:0; } #acr-app .mt-lesson-card h1{ font-size:clamp(32px,10vw,44px)!important; overflow-wrap:anywhere; } #acr-app .mt-lesson-card>p{ font-size:16px!important; line-height:1.65!important; } #acr-app .mt-lesson-footer{ position:sticky!important; bottom:0; z-index:32; min-height:0!important; padding:12px 12px max(12px,env(safe-area-inset-bottom))!important; gap:10px; flex-wrap:wrap; } #acr-app .mt-lesson-footer .mt-btn{ flex:1 1 150px; } /* Quiz: flexible height and scroll. */ #acr-app .mt-quiz-shell{ width:100%; min-height:100dvh!important; height:auto!important; display:flex!important; flex-direction:column!important; overflow-x:hidden!important; overflow-y:visible!important; } #acr-app .mt-quiz-top{ position:sticky!important; top:0; z-index:40; flex:0 0 auto; min-height:66px; padding:8px 10px!important; grid-template-columns:42px minmax(0,1fr) 82px!important; gap:8px!important; } #acr-app .mt-quiz-stage{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:16px 11px 24px!important; overflow:visible!important; } #acr-app .mt-question-card{ width:100%!important; min-width:0!important; padding:20px 15px!important; border-radius:20px!important; } #acr-app .mt-question-card h1{ font-size:clamp(25px,8vw,32px)!important; overflow-wrap:anywhere; } #acr-app .mt-option, #acr-app .mt-order-item, #acr-app .mt-pair-row, #acr-app .mt-category-card{ width:100%!important; min-width:0!important; max-width:100%!important; } #acr-app .mt-quiz-footer{ position:sticky!important; bottom:0; z-index:42; min-height:0!important; padding:10px 10px max(10px,env(safe-area-inset-bottom))!important; flex-wrap:wrap; gap:8px!important; } #acr-app .mt-quiz-footer__right{ min-width:0; flex:1 1 180px; } #acr-app .mt-quiz-footer .mt-btn{ min-width:0!important; } /* Memory/system solar also fits narrow screens. */ #acr-app .mt-orbit-map, #acr-app .mt-flash-zone{ width:100%; max-width:100%; min-width:0; padding:16px!important; } #acr-app .mt-planets-row{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:6px!important; } #acr-app .mt-planet{ min-height:64px!important; } #acr-app .mt-flash-card{ width:100%!important; height:280px!important; } #acr-app .mt-flash-front, #acr-app .mt-flash-back{ padding:22px 16px!important; } /* Profile/settings */ #acr-app .mt-profile-head{ grid-template-columns:68px minmax(0,1fr)!important; padding:20px 16px!important; } #acr-app .mt-profile-avatar{ width:64px!important; height:64px!important; } #acr-app .mt-avatar-picker{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } #acr-app .mt-profile-name{ display:grid!important; grid-template-columns:1fr!important; } #acr-app .mt-profile-name input{ width:100%!important; min-width:0!important; font-size:16px!important; } /* Mobile nav never covers the last content. */ #acr-app .mt-mobile-nav{ left:8px!important; right:8px!important; bottom:max(8px,env(safe-area-inset-bottom))!important; width:auto!important; height:64px!important; min-height:64px!important; padding:5px!important; } #acr-app .mt-mobile-nav button{ min-width:0!important; overflow:hidden; } } @media(max-width:390px){ #acr-app .mt-onboarding-avatar .mt-avatar-picker{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } #acr-app .mt-onboarding__mascot{ height:136px!important; } #acr-app .mt-onboarding__mascot .mt-mascot{ --s:.50!important; } #acr-app .mt-home-copy h1{ font-size:34px!important; } #acr-app .mt-status-pill--xp{ display:none!important; } #acr-app .mt-planets-row{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* 2.4.1 onboarding CTA is outside the name form by design. */ #acr-app .mt-onboarding-enter{ width:100%; min-width:0; min-height:64px; padding:0 22px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-bottom:5px solid #3e9800; border-radius:19px; background:var(--mt-green); color:#fff!important; font-size:13px; font-weight:950; letter-spacing:.05em; cursor:pointer; transition:transform .18s ease,filter .18s ease,border-width .18s ease; } #acr-app .mt-onboarding-enter:hover{transform:translateY(-2px);filter:brightness(1.04)} #acr-app .mt-onboarding-enter:active{transform:translateY(2px);border-bottom-width:2px} #acr-app .mt-name-form>.mt-name-field{display:grid!important;width:100%;gap:8px!important} #acr-app .mt-name-form>.mt-name-field input{width:100%;min-width:0} @media(max-width:760px){ #acr-app .mt-onboarding-enter{ min-height:58px!important; padding:14px 16px!important; border-radius:16px!important; font-size:11px!important; } } /* ============================================================ MegaTitan 2.5 — TITAN LINK / virtual study companion ============================================================ */ .mt-titan-menu-btn{ width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px!important; border:1px solid rgba(92,224,255,.18)!important;border-radius:17px!important; background:linear-gradient(135deg,rgba(68,51,145,.19),rgba(12,32,42,.45))!important; color:#eef5ff!important;text-align:left;position:relative;overflow:hidden; } .mt-titan-menu-btn__bot{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#121b2b} .mt-titan-menu-btn__bot svg{width:31px;height:31px} .mt-titan-menu-btn>span:nth-child(2){display:grid;gap:1px;min-width:0} .mt-titan-menu-btn strong{font-size:12px}.mt-titan-menu-btn small{font-size:9px;color:#7e93a8} .mt-titan-menu-btn>i,.mt-titan-fab>i{position:absolute;width:7px;height:7px;border-radius:50%;background:#59f2a2;box-shadow:0 0 12px #59f2a2} .mt-titan-menu-btn>i{right:12px;top:12px} .mt-titan-fab{display:none} body.mt-chat-open{overflow:hidden} .mt-titan-chat{position:fixed;inset:0;z-index:20000;pointer-events:none} .mt-titan-chat.is-open{pointer-events:auto} .mt-titan-chat__backdrop{position:absolute;inset:0;border:0;background:rgba(2,6,12,.68);backdrop-filter:blur(8px);opacity:0;transition:.2s} .mt-titan-chat.is-open .mt-titan-chat__backdrop{opacity:1} .mt-titan-chat__panel{ position:absolute;right:22px;top:22px;bottom:22px;width:min(440px,calc(100vw - 44px)); display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto; overflow:hidden;border:1px solid #263447;border-radius:27px;background:#0b111a; box-shadow:0 30px 100px rgba(0,0,0,.62);transform:translateX(30px) scale(.98);opacity:0; transition:.25s cubic-bezier(.2,.8,.2,1) } .mt-titan-chat.is-open .mt-titan-chat__panel{transform:none;opacity:1} .mt-titan-chat__head{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid #1d2938;background:#0e1622} .mt-titan-chat__identity{display:flex;align-items:center;gap:11px} .mt-titan-chat__identity>svg{width:43px;height:43px} .mt-titan-chat__identity>div{display:grid}.mt-titan-chat__identity strong{font-size:14px} .mt-titan-chat__identity span{font-size:10px;color:#8fa3b8;display:flex;align-items:center;gap:6px} .mt-titan-chat__identity span i{width:6px;height:6px;border-radius:50%;background:#59f2a2;box-shadow:0 0 9px #59f2a2} .mt-titan-chat__close{width:38px;height:38px;border:1px solid #253244;border-radius:12px;background:#121a26;color:#aab8c7;font-size:24px} .mt-titan-chat__context{display:flex;gap:10px;padding:12px 16px;background:linear-gradient(90deg,rgba(117,89,255,.12),rgba(54,220,255,.06));border-bottom:1px solid #1c2937} .mt-titan-chat__context p{margin:0;font-size:10px;line-height:1.5;color:#91a3b7} .mt-titan-chat__messages{overflow:auto;padding:18px 15px 12px;scrollbar-width:thin;overscroll-behavior:contain} .mt-chat-row{display:flex;gap:8px;margin:0 0 14px;align-items:flex-end} .mt-chat-row--user{justify-content:flex-end} .mt-chat-avatar{flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#141e2d;display:grid;place-items:center} .mt-chat-avatar svg{width:24px;height:24px} .mt-chat-bubble{max-width:82%;padding:11px 13px;border-radius:16px 16px 16px 5px;background:#131d2a;border:1px solid #202e40} .mt-chat-row--user .mt-chat-bubble{border-radius:16px 16px 5px 16px;background:linear-gradient(135deg,#694ff0,#4d3ac1);border-color:#7663ee} .mt-chat-bubble p{margin:0;font-size:12px;line-height:1.55;color:#e8eef6}.mt-chat-bubble strong{color:#fff} .mt-chat-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .mt-chat-actions button{border:1px solid #33465e;border-radius:10px;background:#0e1723;color:#bfefff;padding:8px 10px;font-size:10px;font-weight:800} .mt-chat-typing{display:flex;gap:4px;padding:13px 15px} .mt-chat-typing i{width:5px;height:5px;border-radius:50%;background:#78dff2;animation:mtChatDot 1s infinite ease-in-out} .mt-chat-typing i:nth-child(2){animation-delay:.14s}.mt-chat-typing i:nth-child(3){animation-delay:.28s} @keyframes mtChatDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}} .mt-titan-chat__suggestions{display:flex;gap:7px;padding:9px 14px;overflow-x:auto;border-top:1px solid #182433;scrollbar-width:none} .mt-titan-chat__suggestions button{flex:0 0 auto;border:1px solid #28384c;border-radius:99px;background:#101925;color:#9fb1c4;padding:8px 10px;font-size:9px;font-weight:750} .mt-titan-chat__composer{display:flex;align-items:flex-end;gap:8px;padding:11px 13px calc(11px + env(safe-area-inset-bottom));background:#0d151f;border-top:1px solid #1d2a39} .mt-titan-chat__composer textarea{flex:1;resize:none;min-height:43px;max-height:120px;padding:12px 13px;border:1px solid #28384b;border-radius:14px;background:#121c29;color:#eef5fb;font:inherit;font-size:12px;line-height:1.45;outline:none} .mt-titan-chat__composer textarea:focus{border-color:#6e5cf3;box-shadow:0 0 0 3px rgba(110,92,243,.1)} .mt-titan-chat__composer button{flex:0 0 43px;width:43px;height:43px;border:0;border-radius:13px;background:#65e660;color:#061208;display:grid;place-items:center} .mt-titan-chat__composer button svg{width:17px} @media(max-width:760px){ .mt-titan-menu-btn{display:none!important} .mt-titan-fab{ display:grid;place-items:center;position:fixed;z-index:9000;right:14px; bottom:calc(76px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:18px; border:1px solid rgba(96,225,255,.26);background:linear-gradient(145deg,#18253a,#101722); box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 24px rgba(93,83,255,.16);color:#fff } .mt-titan-fab svg{width:45px;height:45px}.mt-titan-fab>span{display:none}.mt-titan-fab>i{right:4px;top:4px} .mt-titan-chat__panel{ inset:auto 0 0 0;width:100%;height:min(92dvh,var(--mt-visual-height,92dvh)); max-height:calc(var(--mt-visual-height,100dvh) - 8px);border-radius:24px 24px 0 0; border-left:0;border-right:0;border-bottom:0;transform:translateY(30px) } .mt-titan-chat.is-open .mt-titan-chat__panel{transform:none} .mt-titan-chat__head{padding:13px 14px} .mt-titan-chat__identity>svg{width:39px;height:39px} .mt-titan-chat__context{padding:10px 14px} .mt-titan-chat__messages{padding:14px 12px 8px} .mt-chat-bubble{max-width:87%;padding:10px 12px} .mt-chat-bubble p{font-size:12px} .mt-titan-chat__suggestions{padding:8px 11px} .mt-titan-chat__composer{padding:9px 10px calc(9px + env(safe-area-inset-bottom))} } /* ============================================================ MegaTitan Family Edition 3.0 — Consolidated product layer ============================================================ */ #acr-app{ --mt-v3-panel:#0d141e; --mt-v3-panel-hi:#121c28; --mt-v3-line:#223143; --mt-v3-soft:#8799ad; --mt-v3-green:#66e760; --mt-v3-cyan:#63d8ff; --mt-v3-purple:#9278ff; } /* Family / player switcher */ #acr-app .mt-family-hub, #acr-app .mt-cloud-card{ overflow:hidden; } #acr-app .mt-family-players{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; } #acr-app .mt-family-player{ position:relative; min-height:76px; padding:12px 14px; display:grid; grid-template-columns:48px minmax(0,1fr) 22px; align-items:center; gap:11px; border:1px solid #253548; border-bottom-width:3px; border-radius:17px; background:#0b121b; color:#e9eff6!important; text-align:left; cursor:pointer; transition:.18s ease; } #acr-app .mt-family-player:hover{ transform:translateY(-2px); border-color:#39506a; background:#101923; } #acr-app .mt-family-player.is-active{ border-color:rgba(99,216,255,.55); background:linear-gradient(145deg,rgba(99,216,255,.08),rgba(146,120,255,.09)); box-shadow:0 0 0 3px rgba(99,216,255,.045); } #acr-app .mt-family-player>span{ width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#121d2a; } #acr-app .mt-family-player>span svg{width:42px;height:42px} #acr-app .mt-family-player>div{display:grid;gap:2px;min-width:0} #acr-app .mt-family-player strong{font-size:13px} #acr-app .mt-family-player small{font-size:9px;color:#7f92a8} #acr-app .mt-family-player>b{color:#66e7b2;font-size:16px} #acr-app .mt-family-player--new{ border-style:dashed; border-bottom-width:1px; } #acr-app .mt-family-player--new>span{ color:#7fe5f6;font-size:25px;font-weight:400; } /* Server backup state */ #acr-app .mt-sync-badge{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:0 10px; border-radius:999px; border:1px solid #314257; background:#101824; color:#8fa1b5; font-size:9px; font-weight:950; letter-spacing:.09em; } #acr-app .mt-sync-badge--synced{ color:#78eebc;border-color:rgba(102,231,96,.24);background:rgba(102,231,96,.07); } #acr-app .mt-sync-badge--syncing{ color:#7ce9f8;border-color:rgba(99,216,255,.25);background:rgba(99,216,255,.07); } #acr-app .mt-sync-badge--offline{ color:#ffd887;border-color:rgba(255,202,92,.25);background:rgba(255,202,92,.07); } #acr-app .mt-cloud-actions{ display:flex;gap:8px;flex-wrap:wrap;margin-top:16px; } /* Product-grade focus states */ #acr-app button:focus-visible, #acr-app input:focus-visible, #acr-app textarea:focus-visible, #acr-app [tabindex]:focus-visible{ outline:3px solid rgba(99,216,255,.28)!important; outline-offset:3px!important; } /* Prevent accidental page width growth in rich exercises */ #acr-app .mt-content, #acr-app .mt-question-card, #acr-app .mt-path, #acr-app .mt-settings-card, #acr-app .mt-page-head{ min-width:0; max-width:100%; } #acr-app img, #acr-app svg{ max-width:100%; } /* Tablet/mobile family controls */ @media(max-width:760px){ #acr-app .mt-family-players{grid-template-columns:1fr} #acr-app .mt-family-player{min-height:70px} #acr-app .mt-cloud-actions{display:grid;grid-template-columns:1fr} #acr-app .mt-cloud-actions .mt-btn{width:100%} } /* Extra-small viewport hard stop */ @media(max-width:380px){ #acr-app .mt-family-player{grid-template-columns:42px minmax(0,1fr) 18px;padding:10px} #acr-app .mt-family-player>span{width:40px;height:40px} #acr-app .mt-family-player>span svg{width:36px;height:36px} } /* Installed PWA polish */ @media(display-mode:standalone){ #acr-app .mt-main-wrap{ min-height:calc(100dvh - env(safe-area-inset-top)); } } /* ======================================================================== MEGATITAN FAMILY 3.0.1 — RESPONSIVE LAYOUT FOUNDATION Final authority layer. Prevents sidebar + 100vw overflow and changes architecture before content becomes cramped. ======================================================================== */ /* --------- Hard width contract --------- */ html, body{ width:100%; max-width:100%; overflow-x:hidden; } #acr-app, #acr-app .mt-app-shell{ width:100%; max-width:100vw; min-width:0; overflow-x:clip; } #acr-app .mt-main-wrap{ box-sizing:border-box!important; min-width:0!important; max-width:none!important; } /* Desktop with fixed sidebar: the content area is viewport MINUS sidebar. This is the critical correction for the clipping shown in v3.0.0. */ @media (min-width:1121px){ #acr-app .mt-main-wrap{ width:calc(100% - var(--mt-sidebar))!important; margin-left:var(--mt-sidebar)!important; } } /* Every descendant in the primary grid must be shrinkable. */ #acr-app .mt-main, #acr-app .mt-main > *, #acr-app .mt-content, #acr-app .mt-right-rail, #acr-app .mt-home-lobby, #acr-app .mt-home-flow, #acr-app .mt-home-hero, #acr-app .mt-home-hero--v5, #acr-app .mt-page-head, #acr-app .mt-screen-stack, #acr-app .mt-path, #acr-app .mt-settings-card{ min-width:0!important; max-width:100%; box-sizing:border-box!important; } /* Primary canvas never exceeds the actual content box. */ #acr-app .mt-main, #acr-app .mt-main:not(.mt-main--with-rail), #acr-app .mt-main.mt-main--with-rail{ width:100%!important; max-width:1600px!important; margin-inline:auto!important; } /* Large desktop: right rail remains a real column. */ @media (min-width:1441px){ #acr-app .mt-main.mt-main--with-rail{ display:grid!important; grid-template-columns:minmax(0,1fr) clamp(270px,18vw,292px)!important; column-gap:clamp(22px,2vw,32px)!important; align-items:start!important; } #acr-app .mt-right-rail{ width:auto!important; max-width:none!important; min-width:0!important; position:sticky!important; top:108px!important; } } /* Notebook: rail moves BELOW before the central content becomes cramped. */ @media (min-width:1121px) and (max-width:1440px){ #acr-app .mt-main.mt-main--with-rail{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; row-gap:32px!important; } #acr-app .mt-right-rail{ width:100%!important; max-width:none!important; position:static!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin:0!important; } #acr-app .mt-right-rail .mt-rail-card{ min-height:150px; } #acr-app .mt-home-hero--v5{ grid-template-columns:minmax(0,1fr) minmax(330px,390px)!important; } } /* Tablet / compact notebook: sidebar becomes bottom navigation. */ @media (max-width:1120px){ :root{ --mt-sidebar:0px!important; } #acr-app .mt-sidebar{ display:none!important; } #acr-app .mt-main-wrap{ width:100%!important; max-width:100%!important; margin-left:0!important; } #acr-app .mt-mobile-nav{ display:grid!important; position:fixed!important; z-index:9000!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; bottom:max(12px,env(safe-area-inset-bottom))!important; width:min(680px,calc(100% - 28px))!important; min-height:68px!important; padding:7px!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; border:1px solid rgba(120,142,170,.22)!important; border-radius:22px!important; background:rgba(10,15,23,.94)!important; backdrop-filter:blur(22px) saturate(130%)!important; box-shadow:0 18px 55px rgba(0,0,0,.42)!important; } #acr-app .mt-mobile-nav button{ min-width:0!important; min-height:52px!important; } #acr-app .mt-top-status{ width:100%!important; } #acr-app .mt-main, #acr-app .mt-main.mt-main--with-rail, #acr-app .mt-main:not(.mt-main--with-rail){ width:100%!important; max-width:100%!important; grid-template-columns:minmax(0,1fr)!important; padding-left:clamp(18px,3vw,30px)!important; padding-right:clamp(18px,3vw,30px)!important; padding-bottom:110px!important; } #acr-app .mt-right-rail{ width:100%!important; max-width:none!important; position:static!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; margin-top:8px!important; } #acr-app .mt-home-hero--v5{ grid-template-columns:minmax(0,1fr) minmax(270px,330px)!important; gap:24px!important; } #acr-app .mt-subject-grid--v5{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* Tablet portrait: major compositions become one column. */ @media (max-width:820px){ #acr-app .mt-main, #acr-app .mt-main.mt-main--with-rail, #acr-app .mt-main:not(.mt-main--with-rail){ padding-left:16px!important; padding-right:16px!important; } #acr-app .mt-home-hero--v5{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; min-height:0!important; } #acr-app .mt-home-mascot{ width:min(520px,100%)!important; justify-self:center!important; } #acr-app .mt-right-rail{ grid-template-columns:1fr 1fr!important; } #acr-app .mt-subject-grid--v5, #acr-app .mt-bonus-grid, #acr-app .mt-mode-grid, #acr-app .mt-review-grid, #acr-app .mt-domain-grid, #acr-app .mt-progress-grid{ grid-template-columns:1fr!important; } #acr-app .mt-learning-summary{ grid-template-columns:1fr!important; } #acr-app .mt-profile-head{ grid-template-columns:80px minmax(0,1fr)!important; } #acr-app .mt-profile-head > .mt-mascot{ display:none!important; } } /* Phone: deliberately separate architecture, no desktop minimums. */ @media (max-width:640px){ #acr-app{ --mt-screen-x:12px!important; --mt-screen-top:14px!important; --mt-screen-bottom:112px!important; } #acr-app .mt-top-status{ min-height:60px!important; height:auto!important; padding:max(7px,env(safe-area-inset-top)) 10px 7px!important; gap:6px!important; } #acr-app .mt-status-pill{ min-width:0!important; height:38px!important; padding:0 8px!important; } #acr-app .mt-status-pill span{ display:none!important; } #acr-app .mt-status-avatar{ width:39px!important; height:39px!important; min-width:39px!important; } #acr-app .mt-main, #acr-app .mt-main.mt-main--with-rail, #acr-app .mt-main:not(.mt-main--with-rail){ display:block!important; padding:14px 12px calc(112px + env(safe-area-inset-bottom))!important; } #acr-app .mt-home-lobby{ row-gap:18px!important; } #acr-app .mt-home-flow{ margin-top:42px!important; row-gap:52px!important; } #acr-app .mt-home-hero--v5{ display:block!important; width:100%!important; padding:24px 18px!important; border-radius:24px!important; } #acr-app .mt-home-copy h1{ font-size:clamp(34px,10.4vw,43px)!important; line-height:1.01!important; letter-spacing:-.055em!important; } #acr-app .mt-home-copy p{ font-size:15px!important; line-height:1.6!important; } #acr-app .mt-home-actions{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } #acr-app .mt-home-actions .mt-btn{ width:100%!important; min-width:0!important; } #acr-app .mt-home-mascot{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; max-width:100%!important; margin-top:18px!important; } #acr-app .mt-home-hero--v5 .mt-mascot-bubble{ position:static!important; width:100%!important; min-height:0!important; order:2!important; } #acr-app .mt-home-mascot .mt-mascot{ order:1!important; justify-self:center!important; } #acr-app .mt-daily-command{ display:grid!important; grid-template-columns:1fr!important; gap:16px!important; padding:18px!important; } #acr-app .mt-daily-command > div{ min-width:0!important; } #acr-app .mt-daily-command .mt-btn{ width:100%!important; } #acr-app .mt-right-rail{ grid-template-columns:1fr!important; gap:12px!important; margin-top:20px!important; } #acr-app .mt-section-head{ display:block!important; } #acr-app .mt-section-head .mt-text-btn{ margin-top:12px!important; } #acr-app .mt-section-head h2{ font-size:clamp(27px,8.8vw,34px)!important; } #acr-app .mt-subject-card--world{ width:100%!important; grid-template-columns:48px minmax(0,1fr) 46px!important; gap:11px!important; padding:16px!important; } #acr-app .mt-subject-card--world > svg{ display:none!important; } #acr-app .mt-world-icon{ width:46px!important; height:46px!important; } #acr-app .mt-world-score{ width:44px!important; height:44px!important; } /* Learn screen */ #acr-app .mt-page-head{ padding:24px 18px!important; border-radius:22px!important; min-height:0!important; } #acr-app .mt-page-head h1{ font-size:clamp(30px,9.6vw,39px)!important; } #acr-app .mt-path{ padding:22px 12px 34px!important; border-radius:22px!important; min-height:0!important; } #acr-app .mt-path-step, #acr-app .mt-path-step--right{ width:100%!important; min-height:0!important; padding:12px 0!important; } #acr-app .mt-path-node-wrap, #acr-app .mt-path-step--right .mt-path-node-wrap{ width:100%!important; max-width:100%!important; display:grid!important; grid-template-columns:56px minmax(0,1fr)!important; align-items:start!important; gap:12px!important; margin:0!important; text-align:left!important; } #acr-app .mt-path-line{ display:none!important; } #acr-app .mt-path-card{ width:100%!important; max-width:none!important; min-width:0!important; } /* Profile/settings */ #acr-app .mt-family-players, #acr-app .mt-avatar-picker{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } #acr-app .mt-settings-card{ padding:18px!important; } /* Titan Link */ #acr-app .mt-titan-fab{ right:12px!important; bottom:calc(82px + env(safe-area-inset-bottom))!important; } } /* Very narrow phone. */ @media (max-width:390px){ #acr-app .mt-status-pill--xp{ display:none!important; } #acr-app .mt-mobile-nav{ width:calc(100% - 16px)!important; min-height:64px!important; bottom:max(8px,env(safe-area-inset-bottom))!important; } #acr-app .mt-mobile-nav button{ min-height:48px!important; } #acr-app .mt-home-copy h1{ font-size:34px!important; } #acr-app .mt-family-players, #acr-app .mt-avatar-picker{ grid-template-columns:1fr 1fr!important; } } /* No horizontal scrolling is acceptable in application screens. */ #acr-app .mt-main-wrap, #acr-app .mt-main, #acr-app .mt-content{ overflow-x:clip!important; } /* Runtime safety net: if the real rendered canvas still overflows, collapse rail. */ #acr-app .mt-app-shell.mt-layout-overflow .mt-main.mt-main--with-rail{ grid-template-columns:minmax(0,1fr)!important; } #acr-app .mt-app-shell.mt-layout-overflow .mt-right-rail{ width:100%!important; max-width:none!important; min-width:0!important; position:static!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; margin-top:10px!important; } @media(max-width:700px){ #acr-app .mt-app-shell.mt-layout-overflow .mt-right-rail{ grid-template-columns:1fr!important; } } /* ======================================================================== MEGATITAN FAMILY 3.0.2 — SCROLL RELIABILITY FOUNDATION The document is the single page-scroll owner. ======================================================================== */ html{ height:auto!important; min-height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior-y:auto!important; scrollbar-gutter:stable; } body.acr-standalone-page{ position:static!important; width:100%!important; height:auto!important; min-height:100vh!important; min-height:100dvh!important; overflow-x:hidden!important; overflow-y:visible!important; overscroll-behavior-y:auto!important; touch-action:pan-y pinch-zoom!important; } /* App wrappers participate in document flow; none becomes a competing full-page vertical scroll container. */ body.acr-standalone-page .acr-page-shell, #acr-app, #acr-app .mt-app-shell, #acr-app .mt-main-wrap, #acr-app .mt-main, #acr-app .mt-content{ height:auto!important; min-height:0; overflow-y:visible!important; overscroll-behavior-y:auto!important; } /* Preserve minimum viewport coverage without fixing the scroll viewport. */ body.acr-standalone-page .acr-page-shell, #acr-app, #acr-app .mt-app-shell, #acr-app .mt-main-wrap{ min-height:100vh!important; min-height:100dvh!important; } /* Onboarding used to be its own scroll container. It now grows naturally and lets the document perform wheel/touch/trackpad scrolling. */ #acr-app .mt-onboarding{ height:auto!important; min-height:100vh!important; min-height:100dvh!important; overflow-x:hidden!important; overflow-y:visible!important; overscroll-behavior-y:auto!important; touch-action:pan-y pinch-zoom!important; } /* Mouse wheel must never be captured by large decorative/game surfaces. */ #acr-app .mt-home-hero, #acr-app .mt-home-hero--v5, #acr-app .mt-path, #acr-app .mt-page-head, #acr-app .mt-right-rail, #acr-app .mt-rail-card, #acr-app .mt-section, #acr-app .mt-subject-grid--v5{ overscroll-behavior:auto!important; } /* Explicit nested scroll areas keep their own scrolling only when it is actually required. */ #acr-app .mt-titan-chat__messages{ overflow-y:auto!important; overscroll-behavior:contain!important; touch-action:pan-y!important; } /* Titan Link is intentionally modal and is the ONLY global page lock. */ body.acr-standalone-page.mt-chat-open{ overflow:hidden!important; overscroll-behavior:none!important; touch-action:none!important; } /* Interactive controls may keep manipulation semantics, but large wrappers always permit vertical panning. */ #acr-app .mt-main-wrap, #acr-app .mt-main, #acr-app .mt-content, #acr-app .mt-screen-stack, #acr-app .mt-home-lobby, #acr-app .mt-home-flow, #acr-app .mt-section{ touch-action:pan-y pinch-zoom!important; } /* Avoid browser scroll anchoring fighting large dynamic panels. */ #acr-app .mt-main{ overflow-anchor:auto; } /* Installed PWA uses the same document-scroll model. */ @media(display-mode:standalone){ html{ overflow-y:auto!important; } body.acr-standalone-page{ overflow-y:visible!important; } } /* ======================================================================== MEGATITAN FAMILY 3.0.3 — NATIVE SCROLL + INTERNAL PAGE RHYTHM Final authority. No synthetic wheel scrolling and no compressed screens. ======================================================================== */ /* ---------- Native scrolling only ---------- */ html{ scroll-behavior:auto!important; overscroll-behavior:auto!important; overflow-x:hidden!important; overflow-y:auto!important; } body.acr-standalone-page{ scroll-behavior:auto!important; overscroll-behavior:auto!important; overflow-x:hidden!important; overflow-y:visible!important; } /* Prevent compositor flashing caused by blurred sticky chrome while scrolling. */ #acr-app .mt-quiz-top, #acr-app .mt-quiz-footer, #acr-app .mt-lesson-top, #acr-app .mt-lesson-footer{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* Only Titan Link may lock document scrolling. */ body.acr-standalone-page:not(.mt-chat-open){ touch-action:auto!important; } /* ======================================================================== QUIZ — desktop/tablet architecture ======================================================================== */ #acr-app .mt-quiz-shell{ display:flex!important; flex-direction:column!important; width:100%!important; min-height:100vh!important; min-height:100dvh!important; height:auto!important; overflow:visible!important; background:#070a0f!important; } #acr-app .mt-quiz-top{ position:relative!important; top:auto!important; flex:0 0 auto!important; min-height:82px!important; padding:0 clamp(24px,3.6vw,58px)!important; background:#080d14!important; border-bottom:1px solid #1e2937!important; z-index:20!important; } #acr-app .mt-quiz-stage{ flex:1 0 auto!important; width:min(1180px,calc(100% - 72px))!important; max-width:1180px!important; min-width:0!important; margin:0 auto!important; padding:clamp(38px,4vw,58px) 0 clamp(48px,5vw,72px)!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:start!important; gap:32px!important; overflow:visible!important; } #acr-app .mt-quiz-coach{ width:100%!important; min-width:0!important; min-height:78px!important; margin:0!important; padding:0 4px!important; display:grid!important; grid-template-columns:76px minmax(0,1fr) 92px!important; align-items:center!important; gap:20px!important; } #acr-app .mt-quiz-coach .mt-mascot{ --s:.34!important; } #acr-app .mt-coach-bubble{ width:100%!important; min-width:0!important; min-height:68px!important; margin:0!important; padding:16px 19px!important; font-size:14px!important; line-height:1.55!important; border-radius:19px!important; } #acr-app .mt-question-card{ width:100%!important; min-width:0!important; margin:0!important; padding:clamp(34px,3.5vw,48px)!important; border-radius:30px!important; } #acr-app .mt-question-meta{ margin:0 0 24px!important; gap:18px!important; } #acr-app .mt-question-card h1{ max-width:900px!important; margin:0 0 36px!important; font-size:clamp(32px,3.5vw,46px)!important; line-height:1.15!important; } #acr-app .mt-answer-zone{ margin-top:0!important; } #acr-app .mt-options{ display:grid!important; gap:17px!important; } #acr-app .mt-option{ min-height:78px!important; padding:15px 18px!important; gap:16px!important; border-radius:19px!important; } #acr-app .mt-hint{ margin:-8px 0 28px!important; } #acr-app .mt-feedback{ margin-top:30px!important; } #acr-app .mt-quiz-footer{ position:relative!important; bottom:auto!important; flex:0 0 auto!important; min-height:100px!important; margin:0!important; padding:18px max(28px,calc((100vw - 1180px)/2))!important; background:#080d14!important; border-top:1px solid #1e2937!important; z-index:20!important; } /* Clear visual separation inside the footer. */ #acr-app .mt-quiz-footer__right{ gap:14px!important; } /* ======================================================================== LESSON — same internal rhythm ======================================================================== */ #acr-app .mt-lesson-shell{ display:flex!important; flex-direction:column!important; width:100%!important; min-height:100vh!important; min-height:100dvh!important; height:auto!important; overflow:visible!important; } #acr-app .mt-lesson-top{ position:relative!important; top:auto!important; min-height:82px!important; flex:0 0 auto!important; background:#080d14!important; } #acr-app .mt-lesson-stage{ flex:1 0 auto!important; width:min(1180px,calc(100% - 72px))!important; max-width:1180px!important; margin:0 auto!important; padding:clamp(42px,5vw,70px) 0!important; gap:clamp(36px,4vw,58px)!important; } #acr-app .mt-lesson-card h1{ margin:10px 0 22px!important; } #acr-app .mt-lesson-card>p{ margin:0!important; } #acr-app .mt-titan-comment{ margin-top:30px!important; } #acr-app .mt-lesson-footer{ position:relative!important; bottom:auto!important; min-height:104px!important; flex:0 0 auto!important; background:#080d14!important; } /* ======================================================================== INTERNAL SHELL PAGES — Learn / Review / Progress / Profile / Result ======================================================================== */ #acr-app .mt-content--learn, #acr-app .mt-content--review, #acr-app .mt-content--progress, #acr-app .mt-content--profile, #acr-app .mt-content--notifications{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:start!important; row-gap:42px!important; } #acr-app .mt-screen-stack{ row-gap:36px!important; } #acr-app .mt-page-head, #acr-app .mt-profile-head{ margin:0!important; } #acr-app .mt-learning-summary{ margin:0!important; gap:18px!important; } #acr-app .mt-path{ margin:0!important; } /* Result screen: hero, review and next recommendation are intentionally separate. */ #acr-app .mt-result-hero, #acr-app .mt-result-review, #acr-app .mt-perfect-box, #acr-app .mt-next-box{ margin:0!important; } #acr-app .mt-result-hero + .mt-result-review, #acr-app .mt-result-hero + .mt-perfect-box, #acr-app .mt-result-review + .mt-next-box, #acr-app .mt-perfect-box + .mt-next-box{ margin-top:0!important; } #acr-app .mt-result-review{ padding:30px!important; } #acr-app .mt-result-errors{ gap:14px!important; } #acr-app .mt-next-box{ padding:24px 26px!important; } /* General card groups inside internal pages. */ #acr-app .mt-mode-grid, #acr-app .mt-review-grid, #acr-app .mt-stat-grid, #acr-app .mt-domain-grid, #acr-app .mt-progress-grid, #acr-app .mt-settings-grid{ gap:20px!important; } /* ======================================================================== MOBILE — no sticky quiz/lesson chrome fighting page scroll. ======================================================================== */ @media(max-width:760px){ #acr-app .mt-quiz-top, #acr-app .mt-lesson-top{ position:relative!important; top:auto!important; } #acr-app .mt-quiz-stage{ width:calc(100% - 24px)!important; max-width:none!important; padding:24px 0 34px!important; gap:20px!important; } #acr-app .mt-quiz-coach{ min-height:0!important; grid-template-columns:56px minmax(0,1fr)!important; gap:12px!important; } #acr-app .mt-quiz-coach .mt-mascot{ --s:.255!important; } #acr-app .mt-combo-box{ display:none!important; } #acr-app .mt-coach-bubble{ min-height:54px!important; padding:12px 14px!important; font-size:12px!important; } #acr-app .mt-question-card{ padding:24px 18px 26px!important; border-radius:22px!important; } #acr-app .mt-question-meta{ margin-bottom:18px!important; } #acr-app .mt-question-card h1{ margin-bottom:28px!important; font-size:clamp(26px,8.2vw,33px)!important; line-height:1.18!important; } #acr-app .mt-options{ gap:13px!important; } #acr-app .mt-option{ min-height:68px!important; padding:12px 13px!important; } #acr-app .mt-feedback{ margin-top:24px!important; } #acr-app .mt-quiz-footer{ position:relative!important; bottom:auto!important; min-height:0!important; padding:14px 12px max(16px,env(safe-area-inset-bottom))!important; display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } #acr-app .mt-quiz-footer>div:first-child{ min-width:0!important; } #acr-app .mt-quiz-footer__right{ width:100%!important; display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; gap:8px!important; } #acr-app .mt-quiz-footer .mt-btn{ width:100%!important; min-width:0!important; } #acr-app .mt-lesson-stage{ width:calc(100% - 24px)!important; max-width:none!important; padding:28px 0 38px!important; gap:28px!important; } #acr-app .mt-lesson-footer{ position:relative!important; bottom:auto!important; min-height:0!important; padding:14px 12px max(16px,env(safe-area-inset-bottom))!important; } #acr-app .mt-content--learn, #acr-app .mt-content--review, #acr-app .mt-content--progress, #acr-app .mt-content--profile, #acr-app .mt-content--notifications{ row-gap:26px!important; } #acr-app .mt-screen-stack{ row-gap:24px!important; } } @media(max-width:390px){ #acr-app .mt-quiz-stage{ width:calc(100% - 18px)!important; } #acr-app .mt-question-card{ padding:21px 15px 23px!important; } #acr-app .mt-question-card h1{ font-size:25px!important; margin-bottom:24px!important; } } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto!important; } }