:root{--green:#58cc02;--green-dark:#58a700;--green-light:#d7ffb8;--blue:#1cb0f6;--blue-dark:#1899d6;--red:#ff4b4b;--red-dark:#ea2b2b;--red-light:#ffdfe0;--yellow:#ffc800;--yellow-dark:#e6b400;--purple:#ce82ff;--purple-dark:#a568cc;--gray-050:#fff;--gray-100:#f7f7f7;--gray-200:#e5e5e5;--gray-300:#d6d6d6;--gray-400:#afafaf;--gray-500:#777;--gray-700:#4b4b4b;--dark:#3c3c3c;--font-display:"Baloo 2", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, -apple-system, sans-serif;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--shadow-btn:0 4px 0 0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--gray-100);color:var(--dark);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);margin:0}p{margin:0}button{font-family:var(--font-body);cursor:pointer;background:0 0;border:none}button:disabled{cursor:not-allowed}ul{margin:0;padding:0;list-style:none}img{max-width:100%;display:block}::selection{background:var(--green-light)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:10px}@keyframes pop-in{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.95)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes heart-break{0%{transform:scale(1)rotate(0)}30%{transform:scale(1.3)rotate(-10deg)}60%{transform:scale(.7)rotate(10deg)}to{opacity:0;transform:scale(0)rotate(0)}}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}.badge{font-family:var(--font-display);color:var(--dark);border:2px solid var(--gray-200);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:1.05rem;font-weight:700;display:inline-flex}.badge-icon{font-size:1.15rem}.badge-streak-active .badge-value{color:#ff9600}.badge-xp .badge-value{color:var(--yellow-dark)}.level-node-wrapper{transform:translateX(calc(var(--offset,0) * 40px));align-items:center;gap:18px;animation:.5s fade-in;display:flex}.level-node{border-bottom:6px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:76px;min-width:76px;height:76px;font-size:2rem;transition:transform 80ms;display:flex;position:relative}.level-node:active:not(:disabled){border-bottom-width:2px;transform:translateY(4px)}.level-node-locked{background:var(--gray-200);border-bottom-color:var(--gray-300);color:var(--gray-400)}.level-node-completed.level-node-green,.level-node-current.level-node-green{background:var(--green);border-bottom-color:var(--green-dark)}.level-node-completed.level-node-blue,.level-node-current.level-node-blue{background:var(--blue);border-bottom-color:var(--blue-dark)}.level-node-completed.level-node-yellow,.level-node-current.level-node-yellow{background:var(--yellow);border-bottom-color:var(--yellow-dark)}.level-node-completed.level-node-purple,.level-node-current.level-node-purple{background:var(--purple);border-bottom-color:var(--purple-dark)}.level-node-pulse{opacity:.5;color:var(--green);border:3px solid;border-radius:50%;animation:1.6s ease-in-out infinite pulse;position:absolute;inset:-8px}.level-node-label{flex-direction:column;gap:2px;display:flex}.level-node-label strong{font-family:var(--font-display);color:var(--dark);font-size:1.05rem}.level-node-label span{color:var(--gray-500);font-size:.85rem}.level-node-stars{letter-spacing:1px;color:var(--yellow-dark);font-size:.9rem}.level-path{flex-direction:column;gap:36px;max-width:420px;margin:0 auto;padding:24px 16px 40px;display:flex}.home-screen{min-height:100%;padding-bottom:90px}.home-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:640px;margin:0 auto;padding:20px 20px 8px;display:flex}.home-header-title{align-items:center;gap:10px;display:flex}.home-logo{font-size:2rem}.home-header-title h1{color:var(--green-dark);font-size:1.6rem}.home-header-badges{gap:10px;display:flex}.hearts{align-items:center;gap:4px;display:flex}.heart{font-size:1.4rem;transition:transform .2s;display:inline-block}.heart-empty{opacity:.5;animation:.4s heart-break}.progressbar-track{background:var(--gray-200);border-radius:999px;width:100%;height:16px;overflow:hidden}.progressbar-fill{border-radius:999px;height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.progressbar-green{background:var(--green)}.progressbar-blue{background:var(--blue)}.progressbar-yellow{background:var(--yellow)}.progressbar-purple{background:var(--purple)}.lesson-topbar{align-items:center;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px;display:flex}.lesson-close{color:var(--gray-400);flex-shrink:0;padding:4px;font-size:1.4rem;line-height:1;transition:color .15s,transform .15s}.lesson-close:hover{color:var(--gray-700);transform:scale(1.1)}.mc-list{flex-direction:column;gap:12px;display:flex}.mc-option{text-align:left;border-radius:var(--radius-md);border:2px solid var(--gray-200);color:var(--dark);background:#fff;border-bottom-width:4px;padding:16px 20px;font-size:1.05rem;font-weight:600;transition:border-color .12s,background .12s,transform 50ms}.mc-option:hover:not(:disabled){border-color:var(--gray-300);background:var(--gray-100)}.mc-option:active:not(:disabled){transform:translateY(2px)}.mc-selected{border-color:var(--blue);color:var(--blue-dark);background:#e5f7ff}.mc-correct{border-color:var(--green);background:var(--green-light);color:var(--green-dark);animation:.3s pop-in}.mc-incorrect{border-color:var(--red);background:var(--red-light);color:var(--red-dark);animation:.4s shake}.mc-option:disabled{opacity:.85}.fb-wrapper{flex-direction:column;gap:32px;display:flex}.fb-sentence{color:var(--dark);border:2px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;padding:24px;font-size:1.3rem;font-weight:700;line-height:1.6}.fb-blank{text-align:center;border-bottom:3px solid var(--gray-400);min-width:110px;color:var(--blue-dark);font-family:var(--font-display);padding:0 6px;display:inline-block}.fb-blank-filled{border-bottom-color:var(--blue)}.fb-blank-correct{border-bottom-color:var(--green);color:var(--green-dark);animation:.3s pop-in}.fb-blank-incorrect{border-bottom-color:var(--red);color:var(--red-dark);animation:.4s shake}.fb-options{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.fb-chip{border-radius:var(--radius-sm);border:2px solid var(--gray-200);color:var(--dark);background:#fff;border-bottom-width:4px;padding:12px 22px;font-size:1rem;font-weight:700;transition:transform 50ms,border-color .12s}.fb-chip:hover:not(:disabled){border-color:var(--gray-300);background:var(--gray-100)}.fb-chip:active:not(:disabled){transform:translateY(2px)}.fb-chip-selected{border-color:var(--blue);color:var(--blue-dark);background:#e5f7ff}.fb-chip-correct{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}.fb-chip-incorrect{border-color:var(--red);background:var(--red-light);color:var(--red-dark)}.fb-chip:disabled{opacity:.85}.match-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.match-col{flex-direction:column;gap:12px;display:flex}.match-chip{border-radius:var(--radius-md);border:2px solid var(--gray-200);color:var(--dark);text-align:center;background:#fff;border-bottom-width:4px;justify-content:center;align-items:center;min-height:64px;padding:16px 12px;font-size:.92rem;font-weight:700;transition:transform 50ms,border-color .12s,opacity .2s;display:flex}.match-chip-right{font-weight:600}.match-chip:hover:not(:disabled){border-color:var(--gray-300);background:var(--gray-100)}.match-chip:active:not(:disabled){transform:translateY(2px)}.match-selected{border-color:var(--blue);color:var(--blue-dark);background:#e5f7ff}.match-matched{border-color:var(--green);background:var(--green-light);color:var(--green-dark);opacity:.75;animation:.3s pop-in}.match-wrong{border-color:var(--red);background:var(--red-light);color:var(--red-dark);animation:.4s shake}.qcard{max-width:640px;margin:0 auto;padding:8px 20px 140px;animation:.25s fade-in}.qcard-eyebrow{text-transform:uppercase;letter-spacing:.6px;color:var(--gray-500);margin-bottom:10px;font-size:.85rem;font-weight:800}.qcard-title{color:var(--dark);margin-bottom:28px;font-size:1.5rem;line-height:1.35}.pbtn{font-family:var(--font-display);letter-spacing:.4px;text-transform:uppercase;border-radius:var(--radius-md);border-bottom:4px solid #0000;padding:16px 24px;font-size:1rem;font-weight:700;transition:transform 50ms,filter .15s,opacity .15s}.pbtn-full{width:100%;display:block}.pbtn:active:not(:disabled){border-bottom-width:1px;transform:translateY(3px)}.pbtn:disabled{opacity:.55}.btn-green{background:var(--green);color:#fff;border-bottom-color:var(--green-dark)}.btn-green:hover:not(:disabled){filter:brightness(1.04)}.btn-blue{background:var(--blue);color:#fff;border-bottom-color:var(--blue-dark)}.btn-blue:hover:not(:disabled){filter:brightness(1.04)}.btn-red{background:var(--red);color:#fff;border-bottom-color:var(--red-dark)}.btn-red:hover:not(:disabled){filter:brightness(1.04)}.btn-yellow{background:var(--yellow);color:var(--dark);border-bottom-color:var(--yellow-dark)}.btn-ghost{color:var(--gray-500);text-transform:uppercase;background:0 0;border-bottom:none}.btn-ghost:hover:not(:disabled){color:var(--dark)}.btn-outline{color:var(--blue);border:2px solid var(--gray-200);border-bottom:4px solid var(--gray-200);background:#fff;padding:14px 24px}.btn-outline:hover:not(:disabled){background:var(--gray-100)}.btn-outline:active:not(:disabled){border-bottom-width:2px}.feedback-banner{padding:20px max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));z-index:50;border-top:2px solid #0000;flex-direction:column;gap:16px;animation:.28s cubic-bezier(.22,1,.36,1) slide-up;display:flex;position:fixed;bottom:0;left:0;right:0}.feedback-correct{background:var(--green-light);border-top-color:#b6f279}.feedback-incorrect{background:var(--red-light);border-top-color:#ffc2c4}.feedback-content{align-items:flex-start;gap:14px;width:100%;max-width:640px;margin:0 auto;display:flex}.feedback-icon{flex-shrink:0;font-size:2rem;animation:.4s bounce-in}.feedback-text h3{margin:0 0 4px;font-size:1.3rem}.feedback-correct .feedback-text h3{color:var(--green-dark)}.feedback-incorrect .feedback-text h3{color:var(--red-dark)}.feedback-text p{color:var(--gray-700);margin:2px 0;font-size:.95rem}.feedback-explanation{color:var(--gray-500);font-style:italic}.feedback-banner .pbtn{width:100%;max-width:640px;margin:0 auto}.lesson-screen{flex-direction:column;min-height:100%;padding-top:8px;display:flex}.lesson-footer{padding:20px max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));background:linear-gradient(#0000,#fff 40%);position:fixed;bottom:0;left:0;right:0}.lesson-footer .pbtn{max-width:640px;margin:0 auto}.result-screen{min-height:100%;padding:24px 20px max(20px, env(safe-area-inset-bottom));flex-direction:column;justify-content:space-between;animation:.35s fade-in;display:flex}.result-content{text-align:center;flex-direction:column;align-items:center;gap:8px;max-width:480px;margin:40px auto 0;display:flex}.result-mascot{margin-bottom:8px;font-size:5rem;animation:.6s cubic-bezier(.34,1.56,.64,1) bounce-in}.result-success h1{color:var(--green-dark)}.result-fail h1{color:var(--blue-dark)}.result-content h1{font-size:1.8rem}.result-subtitle{color:var(--gray-500);margin-bottom:20px;font-size:1rem}.result-stats{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.result-stat{border:2px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;flex-direction:column;align-items:center;gap:4px;padding:16px;animation:.4s pop-in;display:flex}.result-stat-icon{font-size:1.6rem}.result-stat-value{font-family:var(--font-display);color:var(--dark);font-size:1.3rem;font-weight:800}.result-stat-label{color:var(--gray-500);text-transform:uppercase;letter-spacing:.3px;font-size:.78rem}.result-streak{color:#ad6800;background:#fff4e5;border:2px solid #ffe1b3;border-radius:999px;margin-top:24px;padding:10px 18px;font-size:.95rem;font-weight:600}.result-actions{flex-direction:column;gap:12px;width:100%;max-width:480px;margin:24px auto 0;display:flex}.progress-screen{max-width:640px;min-height:100%;margin:0 auto;padding:20px 20px 100px;animation:.3s fade-in}.progress-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.progress-header h1{color:var(--dark);font-size:1.6rem}.progress-header-badges{gap:10px;display:flex}.progress-summary{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;display:grid}.progress-summary-card{border:2px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;display:flex}.progress-summary-value{font-family:var(--font-display);color:var(--green-dark);font-size:1.4rem;font-weight:800}.progress-summary-label{color:var(--gray-500);text-align:center;font-size:.75rem}.progress-overall{margin-bottom:28px}.progress-overall-header{color:var(--gray-700);justify-content:space-between;margin-bottom:8px;font-size:.9rem;font-weight:700;display:flex}.progress-levels{flex-direction:column;gap:10px;display:flex}.progress-level-row{border:2px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;align-items:center;gap:14px;padding:14px 16px;display:flex}.progress-level-locked{opacity:.6}.progress-level-icon{font-size:1.6rem}.progress-level-info{flex-direction:column;flex:1;display:flex}.progress-level-info strong{font-family:var(--font-display);color:var(--dark);font-size:1rem}.progress-level-info span{color:var(--gray-500);font-size:.82rem}.progress-level-stars{color:var(--yellow-dark);letter-spacing:1px;font-size:.95rem}.progress-level-pending{color:var(--gray-400);text-transform:uppercase;font-size:.78rem;font-weight:700}.bottom-nav{border-top:2px solid var(--gray-200);padding:6px max(0px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));z-index:40;background:#fff;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--gray-400);text-transform:uppercase;letter-spacing:.3px;border-radius:var(--radius-sm);flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;font-size:.72rem;font-weight:700;transition:color .15s,background .15s;display:flex}.bottom-nav-icon{font-size:1.5rem}.bottom-nav-item:hover{background:var(--gray-100)}.bottom-nav-active{color:var(--green-dark)}.app-shell{background:var(--gray-100);flex-direction:column;min-height:100vh;display:flex}.app-main{flex:1;min-height:100vh}