:root{--brand:#6c4dff;--brand-deep:#3b1ea3;--brand-soft:#ede8ff;--brand-mid:#beb3ff;--ink:#18103c;--ink-2:#49406f;--ink-3:#8e87a8;--surface:#fff;--bg:#f5f2ff;--line:#6c4dff1a;--ok:#16a34a;--ok-soft:#dcfce7;--ok-line:#16a34a38;--miss:#dc2626;--miss-soft:#fff1f2;--miss-line:#dc26262e;--cta:#ff7b35;--cta-deep:#c44e0e;--cta-glow:#ff7b353d;--gold:#f59e0b;--r-card:28px;--r-btn:16px;--r-sm:12px;--screen-pad-x:clamp(14px, 5vw, 22px);--screen-pad-y:clamp(16px, 4vh, 28px);--app-height:100vh;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Nunito,Plus Jakarta Sans,ui-rounded,system-ui,sans-serif}@supports (height:100dvh){:root{--app-height:100dvh}}html{height:100%;overflow:hidden}*,:before,:after{box-sizing:border-box}body{min-width:320px;height:var(--app-height);background:var(--bg);color:var(--ink);margin:0;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;cursor:pointer;background:0 0;border:none;padding:0}h1,h2,p{margin-top:0}.shell{height:var(--app-height);background:radial-gradient(ellipse 60% 40% at 10% 0%, #6c4dff21 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 92% 6%, #22c55e1a 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 50% 100%, #6c4dff12 0%, transparent 60%), var(--bg);justify-content:center;align-items:flex-start;display:flex;overflow:hidden}.shell--start{align-items:center}.lesson-wrap{width:100%;max-width:430px;height:var(--app-height);padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;display:flex}.start-wrap{width:100%;max-width:420px;height:var(--app-height);padding:max(var(--screen-pad-y), env(safe-area-inset-top)) var(--screen-pad-x) max(var(--screen-pad-y), env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:0;display:flex}.brand-chip{background:var(--brand);color:#fff;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;align-self:flex-start;padding:6px 14px;font-size:.68rem;font-weight:800}.start-hero{flex:1;justify-content:center;align-items:center;min-height:0;padding:clamp(10px,2.5vh,24px) 0;display:flex}.hero-ring{background:#6c4dff12;border-radius:50%;flex-shrink:0;place-items:center;width:min(190px,45vw,30vh);height:min(190px,45vw,30vh);animation:3.2s ease-in-out infinite pulseRing;display:grid;box-shadow:0 0 0 24px #6c4dff0d,0 0 0 48px #6c4dff08}.hero-core{background:#6c4dff1a;border-radius:50%;place-items:center;width:68%;height:68%;display:grid}.start-copy{text-align:center;flex-shrink:0;margin-bottom:clamp(8px,1.8vh,14px)}.start-copy h1{letter-spacing:-.045em;color:var(--ink);margin-bottom:10px;font-size:clamp(1.9rem,7.8vw,2.65rem);font-weight:900;line-height:1.02}.start-copy p{color:var(--ink-2);margin:0;font-size:1rem;font-weight:600}.lesson-meta{color:var(--ink-3);flex-shrink:0;align-items:center;gap:10px;margin-bottom:clamp(14px,2.8vh,20px);font-size:.82rem;font-weight:700;display:flex}.meta-sep{background:var(--ink-3);border-radius:50%;flex-shrink:0;width:3px;height:3px}.btn{border-radius:var(--r-btn);letter-spacing:-.01em;justify-content:center;align-items:center;gap:7px;font-weight:800;transition:transform .13s,box-shadow .13s,opacity .13s;display:inline-flex}.btn--primary{background:var(--cta);color:#fff;width:100%;height:52px;box-shadow:0 5px 0 var(--cta-deep), 0 10px 28px var(--cta-glow);padding:0 24px;font-size:1rem}.btn--primary:hover:not(:disabled){box-shadow:0 7px 0 var(--cta-deep), 0 14px 32px var(--cta-glow);transform:translateY(-2px)}.btn--primary:active:not(:disabled){box-shadow:0 1px 0 var(--cta-deep), 0 4px 12px var(--cta-glow);transform:translateY(4px)}.btn--primary:disabled{opacity:.42;cursor:not-allowed}.btn--compact{width:auto;height:42px;padding:0 18px;font-size:.88rem}.btn--outline-ok{background:var(--surface);color:var(--ok);border:1.5px solid var(--ok-line);box-shadow:0 4px 0 var(--ok-line);width:auto;height:42px;padding:0 18px;font-size:.88rem}.btn--outline-ok:active{box-shadow:0 1px 0 var(--ok-line);transform:translateY(3px)}.btn--ghost{color:var(--ink-3);border-radius:var(--r-sm);padding:10px;font-size:.86rem;font-weight:700}.btn--ghost:hover{color:var(--ink-2)}.btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}.lesson-bar{flex-direction:column;flex-shrink:0;gap:8px;margin-bottom:clamp(10px,2vh,16px);display:flex}.bar-meta{justify-content:space-between;align-items:center;display:flex}.bar-label{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;font-weight:800}.bar-row{align-items:center;gap:12px;display:flex}.bar-track{background:#6c4dff1c;border-radius:999px;flex:1;height:11px;overflow:hidden}.bar-fill{border-radius:inherit;background:linear-gradient(90deg,#7b5cff 0%,#a48bff 100%);height:100%;transition:width .52s cubic-bezier(.22,1,.36,1)}.combo-badge{color:var(--brand);white-space:nowrap;align-items:center;gap:3px;font-size:.72rem;font-weight:800;animation:.38s cubic-bezier(.18,1.3,.32,1) both comboPop;display:flex}.combo-badge--hot{color:var(--cta)}.exercise-card{background:var(--surface);border-radius:var(--r-card);flex-direction:column;flex:1;gap:clamp(14px,2.8vh,20px);min-height:0;padding:clamp(18px,4.6vw,22px);transition:background .28s,box-shadow .28s;animation:.4s cubic-bezier(.22,1,.36,1) both cardSlideIn;display:flex;overflow:hidden;box-shadow:0 2px 8px #18103c0f,0 16px 48px #18103c1c}.exercise-card--correct{background:linear-gradient(175deg,#fff 0%,#f0fff5 100%);box-shadow:0 2px 8px #16a34a14,0 16px 48px #16a34a24}.exercise-card--incorrect{background:linear-gradient(175deg,#fff 0%,#fff5f5 100%);box-shadow:0 2px 8px #dc262612,0 16px 48px #dc26261c}.card-type{background:var(--brand-soft);color:var(--brand-deep);letter-spacing:.01em;border-radius:999px;align-self:flex-start;align-items:center;gap:5px;padding:5px 11px;font-size:.72rem;font-weight:800;display:inline-flex}.card-body{flex-direction:column;gap:0;display:flex}.card-eyebrow{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin:0 0 7px;font-size:.68rem;font-weight:800}.exercise-card h2{letter-spacing:-.035em;color:var(--ink);margin:0 0 10px;font-size:clamp(1.42rem,5.8vw,1.9rem);font-weight:800;line-height:1.08}.card-prompt{color:var(--ink-2);margin:0;font-size:.93rem;font-weight:500;line-height:1.48}.options-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.opt-btn{background:var(--bg);height:64px;color:var(--ink);border:1.5px solid #6c4dff21;border-radius:16px;font-size:1rem;font-weight:700;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s,color .12s;box-shadow:0 4px #6c4dff1a}.opt-btn:hover:not(:disabled){border-color:#6c4dff42;transform:translateY(-1px)}.opt-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #6c4dff17}.opt-btn--selected{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-deep), 0 8px 24px #6c4dff42}.opt-btn--selected:hover:not(:disabled){box-shadow:0 5px 0 var(--brand-deep), 0 10px 28px #6c4dff47;transform:translateY(-1px)}.readiness{background:var(--brand-soft);border-radius:20px;flex-direction:column;gap:10px;padding:15px 16px;display:flex}.readiness-header{color:var(--brand-deep);justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;display:flex}.readiness-dots{gap:8px;display:flex}.rdot{background:#6c4dff2e;border-radius:999px;flex:1;height:7px;transition:background .14s,transform .14s}.rdot:active:not(:disabled){transform:scaleY(1.5)}.rdot--on{background:var(--brand)}.readiness-cue{color:var(--brand-deep);opacity:.65;margin:0;font-size:.78rem;font-weight:600}.card-footer{margin-top:auto}.action-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.feedback-row{border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 14px;animation:.3s cubic-bezier(.22,1,.36,1) both feedbackIn;display:grid}.feedback-row--ok{background:var(--ok-soft);border:1.5px solid var(--ok-line)}.feedback-row--miss{background:var(--miss-soft);border:1.5px solid var(--miss-line)}.feedback-icon{border-radius:11px;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.feedback-row--ok .feedback-icon{background:var(--ok);color:#fff}.feedback-row--miss .feedback-icon{background:var(--miss);color:#fff}.feedback-text{flex-direction:column;gap:2px;min-width:0;display:flex}.feedback-text strong{color:var(--ink);font-size:.83rem;font-weight:800}.feedback-text span{color:var(--ink-2);font-size:.77rem;font-weight:500;line-height:1.4}.complete{text-align:center;flex-direction:column;flex:1;align-items:center;gap:clamp(8px,1.65vh,14px);min-height:0;padding:clamp(24px,4vh,36px) 0 clamp(8px,1.8vh,20px);display:flex;position:relative;overflow:hidden}.complete-mascot{z-index:1;animation:.68s cubic-bezier(.18,1.4,.32,1) both rewardPop;position:relative}.complete-copy{z-index:1;position:relative}.complete-label{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;font-size:.68rem;font-weight:800}.complete .complete-copy h2{letter-spacing:-.04em;color:var(--ink);margin:0 0 8px;font-size:clamp(1.45rem,5.9vw,2.05rem);font-weight:900}.complete .complete-copy p{color:var(--ink-2);max-width:32ch;margin:0 auto;font-size:clamp(.78rem,2.8vw,.88rem);font-weight:500;line-height:1.55}.perfect-badge{z-index:1;color:#92400e;background:linear-gradient(135deg,#fef9c3,#fde68a);border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:800;display:inline-flex;position:relative;box-shadow:0 2px 12px #f59e0b38}.stats-row{z-index:1;background:var(--surface);border-radius:22px;align-items:stretch;width:100%;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 14px #18103c12}.stat-cell{flex-direction:column;flex:1;align-items:center;gap:4px;padding:clamp(10px,2vh,16px) 10px;display:flex}.stat-cell strong{color:var(--ink);letter-spacing:-.04em;align-items:center;gap:3px;font-size:clamp(1.25rem,5vw,1.55rem);font-weight:900;line-height:1;display:flex}.stat-cell--streak strong{color:var(--cta)}.stat-cell span{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:.67rem;font-weight:800}.stat-cell--sep{background:var(--line);flex:0 0 1px;padding:0}.next-up{z-index:1;background:var(--ink);text-align:left;color:#fff;border-radius:20px;width:100%;padding:clamp(12px,2.2vh,16px) 18px;position:relative}.next-up span{letter-spacing:.12em;text-transform:uppercase;opacity:.45;margin-bottom:5px;font-size:.66rem;font-weight:800;display:block}.next-up strong{font-size:.92rem;font-weight:700;line-height:1.3}.complete .btn--primary{z-index:1;position:relative}.mascot{background:linear-gradient(150deg, #9c84ff 0%, var(--brand) 100%);border-radius:52% 48% 50% 50%/58% 54% 46% 42%;animation:3.4s ease-in-out infinite mascotFloat;display:block;position:relative}.mascot--md{width:64px;height:60px}.mascot--lg{width:96px;height:88px}.mascot--xl{width:112px;height:104px}.m-ear{background:#7b5cff;border-radius:999px;position:absolute}.mascot--md .m-ear{width:16px;height:24px;top:-8px}.mascot--lg .m-ear{width:22px;height:34px;top:-11px}.mascot--xl .m-ear{width:26px;height:40px;top:-13px}.m-ear--l{transform:rotate(-20deg)}.m-ear--r{transform:rotate(20deg)}.mascot--md .m-ear--l{left:13px}.mascot--md .m-ear--r{right:13px}.mascot--lg .m-ear--l{left:19px}.mascot--lg .m-ear--r{right:19px}.mascot--xl .m-ear--l{left:23px}.mascot--xl .m-ear--r{right:23px}.m-eye{background:var(--ink);border-radius:50%;position:absolute}.mascot--md .m-eye{width:7px;height:8px;top:22px}.mascot--lg .m-eye{width:10px;height:11px;top:33px}.mascot--xl .m-eye{width:11px;height:13px;top:38px}.mascot--md .m-eye--l{left:17px}.mascot--md .m-eye--r{right:17px}.mascot--lg .m-eye--l{left:25px}.mascot--lg .m-eye--r{right:25px}.mascot--xl .m-eye--l{left:29px}.mascot--xl .m-eye--r{right:29px}.m-mouth{border:2.5px solid var(--ink);border-top:0;border-radius:0 0 999px 999px;position:absolute}.mascot--md .m-mouth{width:20px;height:12px;top:33px;left:22px}.mascot--lg .m-mouth{width:28px;height:17px;top:49px;left:34px}.mascot--xl .m-mouth{width:32px;height:19px;top:56px;left:40px}.m-glow{background:#ffffff73;border-radius:50%;position:absolute}.mascot--md .m-glow{width:14px;height:14px;top:7px;left:9px}.mascot--lg .m-glow{width:22px;height:22px;top:9px;left:13px}.mascot--xl .m-glow{width:26px;height:26px;top:10px;left:16px}.mascot--celebrate{animation:.7s cubic-bezier(.18,1.4,.32,1) both mascotCelebrate}.confetti{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.confetti-piece{animation:linear forwards confettiFall;position:absolute;top:-14px}@keyframes cardSlideIn{0%{opacity:0;transform:translate(64px)scale(.97)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes feedbackIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes rewardPop{0%{opacity:0;transform:scale(.5)rotate(-14deg)}55%{transform:scale(1.12)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes mascotFloat{0%,to{transform:translateY(0)rotate(-1.5deg)}50%{transform:translateY(-7px)rotate(1.5deg)}}@keyframes mascotCelebrate{0%{opacity:0;transform:translateY(16px)scale(.65)rotate(-10deg)}60%{transform:translateY(-5px)scale(1.12)rotate(5deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}80%{opacity:1}to{transform:translateY(560px) rotate(var(--rot-end,540deg));opacity:0}}@keyframes comboPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes pulseRing{0%,to{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@media (width<=480px){.lesson-wrap{padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom))}.start-wrap{padding:max(18px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom))}.exercise-card{gap:16px;padding:18px}.opt-btn{height:58px}.options-grid{gap:10px}}@media (height<=680px){.hero-ring{width:min(150px,40vw,27vh);height:min(150px,40vw,27vh);box-shadow:0 0 0 18px #6c4dff0d,0 0 0 34px #6c4dff08}.start-copy h1{font-size:1.8rem}.start-wrap{padding:20px 18px 24px}.lesson-meta{margin-bottom:14px;font-size:.76rem}.btn--primary{height:48px}.exercise-card h2{font-size:1.35rem}.card-prompt{font-size:.86rem}.readiness{padding:12px 14px}.feedback-row{padding:10px 12px}.complete-copy p{line-height:1.4}.stats-row{border-radius:18px}.stat-cell span{font-size:.6rem}.next-up span{margin-bottom:3px}.complete{padding-top:20px}}@media (height<=590px){.start-wrap{padding-top:max(14px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom))}.brand-chip{padding:5px 12px;font-size:.62rem}.start-hero{padding:6px 0}.hero-ring{width:min(118px,34vw,23vh);height:min(118px,34vw,23vh);box-shadow:0 0 0 14px #6c4dff0d,0 0 0 26px #6c4dff08}.mascot--lg{width:78px;height:72px}.start-copy h1{margin-bottom:6px;font-size:1.55rem}.start-copy p{font-size:.88rem}.lesson-meta{gap:7px;margin-bottom:10px}.lesson-wrap{padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}.lesson-bar{gap:6px;margin-bottom:8px}.exercise-card{border-radius:22px;gap:10px;padding:14px}.card-type{padding:4px 9px;font-size:.66rem}.exercise-card h2{margin-bottom:7px;font-size:1.18rem}.card-prompt{font-size:.8rem;line-height:1.38}.opt-btn{height:50px;font-size:.9rem}.readiness{gap:8px;padding:10px 12px}.readiness-cue{font-size:.72rem}.feedback-icon{width:32px;height:32px}.feedback-text span{font-size:.7rem}.btn--compact{height:38px;padding:0 14px;font-size:.82rem}.complete{gap:6px;padding-top:18px;padding-bottom:8px}.complete .complete-copy h2{margin-bottom:5px;font-size:1.28rem}.complete .complete-copy p{font-size:.74rem}.perfect-badge{padding:4px 10px;font-size:.7rem}.stat-cell{padding:8px}.next-up{padding:10px 14px}.complete .btn--primary{height:46px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}