:root{--fd:"Outfit", sans-serif;--fb:"Plus Jakarta Sans", sans-serif;--canvas:#f4f4f8;--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:#1e2233;-webkit-font-smoothing:antialiased;padding-top:var(--sat);padding-bottom:var(--sab);background:#e8e9ef}@media (display-mode:standalone){body{overscroll-behavior-y:none}}body.tw-sora{--fd:"Sora", sans-serif;--fb:"Manrope", sans-serif}body.tw-warm{--canvas:#f6f2ea;background:#ece6dc}body.tw-white{--canvas:#fff}body.tw-flat .btn3d{box-shadow:0 2px 10px #0f172a1f!important}body.tw-flat .btn3d:active{transform:none!important;box-shadow:0 1px 5px #0f172a1f!important}body.tw-flat .node{box-shadow:0 2px 9px #0f172a1a!important}body.tw-flat .node:active{transform:none!important;box-shadow:0 1px 5px #0f172a1a!important}body.tw-flat .pulse{animation:none!important}body.tw-reduce .confetti{display:none!important}body.tw-reduce .pulse,body.tw-reduce .pop,body.tw-reduce .spin{animation:none!important}button,input{font-family:inherit}.app-root{background:var(--canvas);max-width:460px;min-height:100dvh;margin:0 auto;position:relative;overflow-x:hidden;box-shadow:0 0 70px #0f172a14}.home-header{z-index:12;background:color-mix(in srgb, var(--canvas) 85%, transparent);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #0f172a0d;position:sticky;top:0}.lesson-actionbar{width:100%;max-width:460px;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.btn3d{background:var(--m);box-shadow:0 5px 0 var(--d);color:var(--t);font-family:var(--fd);letter-spacing:.01em;border:none;border-radius:18px;font-weight:700;transition:transform 70ms,box-shadow 70ms}.btn3d:not(:disabled):active{box-shadow:0 1px 0 var(--d);transform:translateY(4px)}.node{background:var(--m);box-shadow:0 5px 0 var(--d);transition:transform 80ms,box-shadow 80ms}.node:not(:disabled):active{box-shadow:0 2px 0 var(--d);transform:translateY(3px)}@keyframes pulseRing{0%,to{box-shadow:0 5px 0 var(--d), 0 0 0 0 #10b98159}50%{box-shadow:0 5px 0 var(--d), 0 0 0 11px #10b98100}}.pulse{animation:1.9s infinite pulseRing}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.18)}to{transform:scale(1)}}.pop{animation:.5s cubic-bezier(.34,1.56,.64,1) both pop;display:inline-flex}@keyframes shakeX{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.shake{animation:.32s shakeX}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:1.5s linear infinite spin}@keyframes fall{0%{opacity:1;transform:translateY(-15vh)rotate(0)}to{opacity:0;transform:translateY(115vh)rotate(560deg)}}.confetti{z-index:1;animation:ease-in forwards fall;position:absolute;top:0}@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)}}.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}@keyframes correctGlow{0%{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 12px #10b98100}to{box-shadow:0 0 #10b98100}}.correct-glow{animation:.6s ease-out correctGlow}@keyframes wrongFlash{0%,to{background-color:#0000}30%{background-color:#f43f5e14}}.wrong-flash{animation:.5s ease-out wrongFlash,.32s shakeX}@keyframes heartBreak{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.7)}to{transform:scale(1)}}.heart-break{animation:.4s cubic-bezier(.34,1.56,.64,1) heartBreak}@keyframes barShine{0%{background-position:-200%}to{background-position:200%}}.bar-shine{background-image:linear-gradient(90deg,#0000 0%,#ffffff73 50%,#0000 100%);background-size:200% 100%;animation:1.2s ease-in-out barShine}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:.35s cubic-bezier(.25,.46,.45,.94) both slideUp}@keyframes nodeEnter{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}.node-enter{animation:.3s cubic-bezier(.25,.46,.45,.94) both nodeEnter}@keyframes starBounce{0%{transform:scale(0)rotate(-30deg)}60%{transform:scale(1.3)rotate(8deg)}to{transform:scale(1)rotate(0)}}.star-bounce{animation:.5s cubic-bezier(.34,1.56,.64,1) both starBounce;display:inline-flex}@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)}}.flame-flicker{transform-origin:bottom;animation:.8s ease-in-out infinite flameFlicker}@keyframes levelBurst{0%{opacity:0;filter:blur(8px);transform:scale(.3)}50%{opacity:1;filter:blur();transform:scale(1.15)}to{opacity:1;filter:blur();transform:scale(1)}}.level-burst{animation:.6s cubic-bezier(.34,1.56,.64,1) both levelBurst}@keyframes actionSlide{0%{transform:translate(-50%)translateY(100%)}to{transform:translate(-50%)translateY(0)}}@keyframes feedbackFlash{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.feedback-enter{animation:.25s ease-out both feedbackFlash}body.tw-reduce .float-xp,body.tw-reduce .correct-glow,body.tw-reduce .wrong-flash,body.tw-reduce .heart-break,body.tw-reduce .bar-shine,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{animation:none!important}::-webkit-scrollbar{width:0}