:root{--fd:"Outfit", system-ui, sans-serif;--fb:"Plus Jakarta Sans", system-ui, sans-serif;--blue:#45b0f3;--blue-deep:#2196e3;--blue-light:#4fb6f7;--blue-dark:#1b87cf;--blue-grad:linear-gradient(180deg, #4fb6f7, #2196e3);--blue-grad-x:linear-gradient(90deg, #5fbdf8, #2196e3);--blue-tint:#e9f5fe;--blue-tint-2:#eaf5fd;--blue-pale:#cbe7f9;--blue-icon:#a9cfe8;--blue-ink:#1e96e0;--amber:#f7b44a;--amber-deep:#e79a21;--amber-ink:#8a5a08;--amber-soft:#fdf1de;--mint:#3cbcaf;--mint-light:#5fd0c4;--mint-deep:#25867d;--mint-soft:#e4f7f5;--purple:#7c7fd4;--purple-soft:#efeffb;--rose:#f4677f;--rose-soft:#fdecef;--coral:#f7684a;--ink:#1e2233;--body:#5b6373;--muted:#8a93a6;--faint:#a0aab8;--fainter:#a9b3c2;--slate:#334155;--slate-2:#475569;--surface:#fff;--surface-2:#f1f4f8;--line:#e7ebf1;--line-2:#dde5ee;--line-3:#e3eaf2;--canvas:linear-gradient(180deg, #fff 0%, #fff 14%, #f1f8fe 100%);--r-sm:11px;--r-md:15px;--r-lg:20px;--r-xl:22px;--r-2xl:28px;--r-pill:999px;--sh-soft:0 2px 10px #0f172a0a;--sh-card:0 4px 16px #0f172a0d;--sh-lift:0 12px 32px #0f172a24;--sh-deep:0 24px 60px #0f172a24;--sh-blue:0 12px 26px #2196e35c;--sh-blue-sm:0 6px 14px #45b0f366;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:var(--fb);color:var(--ink);-webkit-font-smoothing:antialiased;padding-top:var(--sat);padding-bottom:var(--sab);background:#edf0f5}@media (display-mode:standalone){body{overscroll-behavior-y:none}}button,input,select,textarea{font-family:inherit}button{color:inherit;background:0 0;border:none}.wrap{text-align:left;width:100%;padding:0;display:block}button{transition:transform .14s var(--ease-spring), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease}button:not(:disabled):active{transform:translateY(2px)scale(.986)}input,select{transition:border-color .2s,background .2s,box-shadow .2s}a{color:var(--blue-ink);text-decoration:none;transition:color .16s}::-webkit-scrollbar{width:0;height:0}body.tw-sora{--fd:"Sora", system-ui, sans-serif;--fb:"Manrope", system-ui, sans-serif}body.tw-warm{--canvas:linear-gradient(180deg, #fff 0%, #fff 14%, #fbf5ec 100%);background:#f2ece2}body.tw-white{--canvas:#fff}:root{--shell:460px}.app-root{max-width:var(--shell);isolation:isolate;background:#fff;min-height:100dvh;margin:0 auto;position:relative;overflow-x:clip;box-shadow:0 0 70px #0f172a14}.app-root:before{content:"";width:100%;max-width:var(--shell);background:var(--canvas);z-index:-1;pointer-events:none;position:fixed;top:0;bottom:0;left:50%;transform:translate(-50%)}.home-header{z-index:12;-webkit-backdrop-filter:blur(16px);margin-top:calc(-1 * var(--sat));padding-top:var(--sat);background:#ffffffdb;position:sticky;top:0}.lesson-actionbar{width:100%;max-width:var(--shell);position:fixed;bottom:0;left:50%;transform:translate(-50%)}@media (width>=760px){:root{--shell:1140px}body{background:#edf0f5}.app-root{box-shadow:none;background:0 0;min-height:0;padding:0 clamp(20px,3vw,40px)}.app-root:before{display:none}.web-main .app-root{max-width:none;padding:0}.lesson-actionbar{left:calc(50% + var(--navw,0px) / 2);max-width:var(--shell);padding:0 clamp(20px,3vw,40px);transform:translate(-50%)}.nav-row:hover{background:#f4f8fc}.carousel.q-cards{scroll-snap-type:none;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));display:grid;overflow:visible}}@media (width>=760px) and (pointer:fine){.web-row{transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out)}.web-row:hover{border-color:#cbe7f9;box-shadow:0 10px 26px #0f172a17}.web-cta{transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out)}.web-cta:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 32px #2196e366}.web-ghost{transition:border-color .2s var(--ease-out), color .2s var(--ease-out)}.web-ghost:hover{color:#0b6ba8;border-color:#9bd3f5}.web-banner{transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out)}.web-banner:hover{transform:translateY(-2px);box-shadow:0 18px 36px #2196e357}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#cfd9e4;border:3px solid #edf0f5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#b4c2d1}}.btn3d{background:var(--blue-grad);color:#fff;border-radius:var(--r-xl);font-family:var(--fd);letter-spacing:.01em;box-shadow:var(--sh-blue);border:none;font-weight:700}.btn3d:not(:disabled):active{transform:translateY(2px)scale(.986);box-shadow:0 6px 16px #2196e34d}.btn3d:disabled{box-shadow:none}.btn3d.btn-light{color:var(--body);box-shadow:var(--sh-card);background:#fff;border:1.5px solid #0f172a1a}.btn3d.btn-accent{background:linear-gradient(180deg, var(--m), var(--d));box-shadow:0 12px 26px color-mix(in srgb, var(--d) 34%, transparent)}body.tw-flat .btn3d{box-shadow:0 2px 10px #0f172a1f!important}body.tw-flat .btn3d:active{transform:none!important}body.tw-flat .node{box-shadow:var(--sh-soft)!important}body.tw-flat .pulse{animation:none!important}.node{background:var(--m);box-shadow:0 8px 18px color-mix(in srgb, var(--m) 34%, transparent)}.node:not(:disabled):active{transform:translateY(2px)scale(.97)}@keyframes upIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes inLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes inRight{0%{opacity:0;transform:translate(22px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}@keyframes starBounce{0%{transform:scale(0)rotate(-30deg)}60%{transform:scale(1.3)rotate(8deg)}to{transform:scale(1)rotate(0)}}@keyframes burst{0%{opacity:0;filter:blur(9px);transform:scale(.4)}55%{opacity:1;filter:blur();transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes barGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes ringFill{0%{stroke-dashoffset:var(--ring-c,477.5)}}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(5px,-8px)}}@keyframes fbIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseRing{0%,to{box-shadow:0 0 #45b0f373}50%{box-shadow:0 0 0 14px #45b0f300}}@keyframes fall{0%{opacity:0;transform:translateY(-50px)rotate(0)}8%{opacity:1}to{opacity:0;transform:translateY(880px)rotate(560deg)}}@keyframes shakeX{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes flameFlicker{0%,to{transform:scaleY(1)scaleX(1)}25%{transform:scaleY(1.08)scaleX(.95)}50%{transform:scaleY(.95)scaleX(1.05)}75%{transform:scaleY(1.05)scaleX(.97)}}@keyframes floatUp{0%{opacity:0;transform:translateY(0)scale(.8)}15%{opacity:1;transform:translateY(-4px)scale(1.1)}to{opacity:0;transform:translateY(-48px)scale(.9)}}@keyframes correctGlow{0%{box-shadow:0 0 #3cbcaf73}60%{box-shadow:0 0 0 13px #3cbcaf00}to{box-shadow:0 0 #3cbcaf00}}@keyframes wrongFlash{0%,to{background-color:#0000}30%{background-color:#f4677f17}}@keyframes heartBreak{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.7)}to{transform:scale(1)}}.a-up{animation:upIn .55s var(--ease-out) both}.a-left{animation:inLeft .45s var(--ease-out) both}.a-right{animation:inRight .45s var(--ease-out) both}.a-fade{animation:.4s both fadeIn}.a-pop{animation:pop .5s var(--ease-spring) both;display:inline-flex}.a-burst{animation:burst .6s var(--ease-spring) both}.a-bar{animation:barGrow .9s var(--ease-out) both;transform-origin:0}.a-float{animation:5.5s ease-in-out infinite floatY}.a-drift{animation:7s ease-in-out infinite drift}.a-fb{animation:fbIn .3s var(--ease-out) both}.a-spin{animation:1.4s linear infinite spin}.a-flame{transform-origin:bottom;animation:.8s ease-in-out infinite flameFlicker}.star-bounce{animation:starBounce .5s var(--ease-spring) both;display:inline-flex}.pulse{animation:2.1s infinite pulseRing}.shake{animation:.32s shakeX}.pop{animation:pop .5s var(--ease-spring) both;display:inline-flex}.slide-up{animation:upIn .4s var(--ease-out) both}.node-enter{animation:inLeft .38s var(--ease-out) both}.feedback-enter{animation:fbIn .28s var(--ease-out) both}.correct-glow{animation:.65s ease-out correctGlow}.wrong-flash{animation:.5s ease-out wrongFlash,.32s shakeX}.level-burst{animation:burst .6s var(--ease-spring) both}.flame-flicker{transform-origin:bottom;animation:.8s ease-in-out infinite flameFlicker}.heart-break{animation:heartBreak .4s var(--ease-spring);display:inline-flex}.a-stagger{animation-delay:calc(var(--i,0) * 60ms)}.confetti{z-index:1;animation:ease-in forwards fall;position:absolute;top:0}.float-xp{pointer-events:none;font-family:var(--fd);z-index:30;font-size:18px;font-weight:800;animation:1s cubic-bezier(.25,.46,.45,.94) forwards floatUp;position:absolute}.bar-shine{background-image:linear-gradient(90deg,#0000 0%,#ffffff80 50%,#0000 100%);background-size:200% 100%;animation:1.2s ease-in-out shimmer}.skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,#eef2f7 25%,#f7fafd 50%,#eef2f7 75%) 0 0/200% 100%;animation:1.4s ease-in-out infinite shimmer}.carousel{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding-bottom:4px;scroll-padding-inline:22px;display:flex;overflow:auto hidden}.carousel>*{scroll-snap-align:start;flex:none}body.tw-reduce .confetti{display:none!important}body.tw-reduce [class*=a-],body.tw-reduce .pulse,body.tw-reduce .pop,body.tw-reduce .shake,body.tw-reduce .slide-up,body.tw-reduce .node-enter,body.tw-reduce .star-bounce,body.tw-reduce .flame-flicker,body.tw-reduce .level-burst,body.tw-reduce .feedback-enter,body.tw-reduce .correct-glow,body.tw-reduce .wrong-flash,body.tw-reduce .float-xp,body.tw-reduce .bar-shine,body.tw-reduce .skeleton{animation:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
