:root{--bg:#EFF6F1;--surface:#FFFFFF;--primary:#0F8A6D;--primary-deep:#0B6B55;--primary-soft:#DDF0E8;--ink:#16332B;--ink-soft:#4E685F;--mango:#FFAA33;--mango-deep:#8A5200;--mango-soft:#FFF3DF;--coral:#C43A22;--coral-soft:#FCE8E3;--sky:#1F6483;--sky-soft:#E3F0F7;--radius:20px;--shadow:0 4px 14px rgba(18,51,43,.08);--shadow-lift:0 10px 26px rgba(18,51,43,.14);--tap:44px}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html,body{height:100%}body{font-family:Nunito Sans,system-ui,sans-serif;background:radial-gradient(1200px 500px at 50% -200px,#DFF0E6 0%,var(--bg) 60%);color:var(--ink);display:flex;justify-content:center;height:100dvh;overflow:hidden}h1,h2,h3,.display{font-family:"Baloo 2",cursive;line-height:1.15}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--mango);outline-offset:2px;border-radius:12px}h1[tabindex="-1"],h2[tabindex="-1"]{outline:none}.muted{color:var(--ink-soft)}.small{font-size:.85rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:13px 20px;min-height:var(--tap);font-weight:800;font-size:.95rem;transition:transform .12s,box-shadow .12s}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-deep)}.btn-primary:active{box-shadow:0 1px 0 var(--primary-deep)}.btn-mango{background:var(--mango);color:#5c3700;box-shadow:0 4px #d98a16}.btn-ghost{background:var(--primary-soft);color:var(--primary-deep)}.btn-danger{background:var(--coral-soft);color:var(--coral)}.btn-block{width:100%}.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--primary);margin-bottom:4px}.pill{display:flex;align-items:center;gap:5px;background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.85rem;box-shadow:var(--shadow)}.pill.xp{color:var(--primary-deep)}.pill.streak{color:#a35e00}.progressbar{flex:1;height:14px;background:var(--primary-soft);border-radius:999px;overflow:hidden}.progressbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#2FB08D);border-radius:999px;transition:width .35s ease}.path{position:relative;padding:4px 0 8px}.path:before{content:"";position:absolute;left:31px;top:10px;bottom:10px;width:6px;background:var(--primary-soft);border-radius:3px}.node{position:relative;display:flex;gap:14px;align-items:stretch;padding:9px 0;width:100%;text-align:left}.node .dot{flex:0 0 62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--surface);border:5px solid var(--primary-soft);z-index:1;box-shadow:var(--shadow);transition:transform .12s;align-self:center}.node.done .dot{background:var(--primary);border-color:var(--primary);color:#fff}.node.next .dot{border-color:var(--mango);animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #ffaa3373}50%{box-shadow:0 0 0 12px #fa30}}.node .info{flex:1;background:var(--surface);border-radius:16px;padding:11px 14px;box-shadow:var(--shadow)}.node .info h3{font-size:.95rem;font-weight:700;color:var(--ink)}.node .info p{font-size:.78rem;color:var(--ink-soft);margin-top:2px}.node .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.tag{font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 9px}.tag.ok{background:var(--primary-soft);color:var(--primary-deep)}.tag.gold{background:var(--mango-soft);color:var(--mango-deep)}.tag.prev{background:var(--sky-soft);color:var(--sky)}.tag.lockt{background:#edefea;color:var(--ink-soft)}.node.locked .dot{filter:grayscale(1);opacity:.6}.node.locked .info h3{color:var(--ink-soft)}button.node:hover .dot{transform:scale(1.06)}button.node[disabled]{cursor:not-allowed}.quiz-q{font-size:1.08rem;font-weight:700;font-family:"Baloo 2",cursive;margin-bottom:14px;line-height:1.35}.opt{width:100%;text-align:left;background:var(--surface);border:2.5px solid var(--primary-soft);border-radius:16px;padding:13px 15px;min-height:var(--tap);font-size:.93rem;font-weight:600;margin-bottom:10px;transition:border-color .12s,background .12s}.opt:hover{border-color:var(--primary)}.opt.correct{border-color:var(--primary);background:var(--primary-soft)}.opt.wrong{border-color:var(--coral);background:var(--coral-soft)}.opt[disabled]{cursor:default}.feedback{border-radius:16px;padding:13px 15px;margin:6px 0 12px;display:flex;gap:11px;align-items:flex-start}.feedback.ok{background:var(--primary-soft)}.feedback.no{background:var(--coral-soft)}.feedback .fm{flex:0 0 46px}.feedback h4{font-family:"Baloo 2",cursive;font-size:1rem;margin-bottom:2px}.feedback.ok h4{color:var(--primary-deep)}.feedback.no h4{color:var(--coral)}.feedback p{font-size:.87rem;line-height:1.45}.concept h2{font-size:1.25rem;color:var(--primary-deep);margin-bottom:10px}.concept p{font-size:.95rem;line-height:1.55;margin-bottom:10px}.concept ul{margin:0 0 10px 20px}.concept li{font-size:.93rem;line-height:1.5;margin-bottom:6px}.concept .term{display:inline-block;background:var(--sky-soft);color:var(--sky);font-weight:800;font-size:.85em;border-radius:8px;padding:1px 7px;white-space:nowrap}.concept .keybox{background:var(--mango-soft);border-left:5px solid var(--mango);border-radius:12px;padding:11px 13px;font-size:.9rem;margin:12px 0 4px}.concept .keybox b{color:var(--mango-deep)}.cardnav{display:flex;gap:10px}.cardnav .btn{flex:1}.flash{display:block;width:100%;text-align:left;perspective:900px;margin-bottom:12px;padding:0;border-radius:16px}.flash .inner{display:grid;transform-style:preserve-3d;transition:transform .45s}.flash .face{grid-area:1/1;backface-visibility:hidden;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;min-height:96px}.flash .front{background:var(--surface)}.flash .front .en{font-family:"Baloo 2",cursive;font-weight:700;font-size:1.1rem;color:var(--sky)}.flash .front .hint{font-size:.75rem;color:var(--ink-soft);font-weight:700;margin-top:4px}.flash .back{background:var(--primary);color:#fff;transform:rotateY(180deg)}.flash .back .es{font-family:"Baloo 2",cursive;font-weight:700;font-size:1.05rem}.flash .back p{font-size:.82rem;line-height:1.45;margin-top:4px;opacity:.95}.flash[aria-pressed=true] .inner{transform:rotateY(180deg)}@media(prefers-reduced-motion:reduce){.flash .inner{transition:none}.flash .face{backface-visibility:visible}.flash .front{display:flex}.flash[aria-pressed=true] .front{display:none}.flash .back{transform:none;display:none}.flash[aria-pressed=true] .back{display:flex}}.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}.badge{background:var(--surface);border-radius:16px;padding:12px 8px;text-align:center;box-shadow:var(--shadow)}.badge .bic{font-size:1.7rem}.badge p{font-size:.72rem;font-weight:800;margin-top:5px;line-height:1.25}.badge.off{opacity:.4;filter:grayscale(1)}.statrow{display:flex;gap:10px;margin-bottom:14px}.statcard{flex:1;background:var(--surface);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow)}.statcard .n{font-family:"Baloo 2",cursive;font-weight:800;font-size:1.5rem;color:var(--primary-deep)}.statcard .l{font-size:.72rem;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px}.chip{display:flex;align-items:center;gap:12px;background:var(--mango-soft);border-radius:16px;padding:13px 15px;margin-bottom:14px;border:2px dashed var(--mango);width:100%;text-align:left;min-height:var(--tap)}.chip b{color:var(--mango-deep)}.chip.blue{background:var(--sky-soft);border-color:var(--sky)}.chip.blue b{color:var(--sky)}#toasts{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}.toast{background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;font-weight:700;font-size:.88rem;box-shadow:var(--shadow-lift);display:flex;gap:10px;align-items:center;animation:fadeUp .25s ease both}.toast .tic{font-size:1.3rem}#modal-backdrop{position:fixed;inset:0;background:#12332b73;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}#modal-backdrop[hidden]{display:none}.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:20px;max-width:380px;width:100%}.modal h2{color:var(--primary-deep);font-size:1.15rem;margin-bottom:8px}.modal p{font-size:.9rem;line-height:1.5;margin-bottom:16px}.modal .row{display:flex;gap:10px}.modal .row .btn{flex:1}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:90}@keyframes fxShake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}30%{transform:translate(6px)}45%{transform:translate(-5px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}}.fx-shake{animation:fxShake .45s cubic-bezier(.36,.07,.19,.97) both}@keyframes fxPop{0%{transform:scale(1)}40%{transform:scale(1.06)}70%{transform:scale(.98)}to{transform:scale(1)}}.fx-pop{animation:fxPop .45s ease-out both}@keyframes fxFlame{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(-6deg)}50%{transform:scale(1.2) rotate(5deg)}75%{transform:scale(1.28) rotate(-3deg)}to{transform:scale(1)}}.fx-flame{animation:fxFlame .85s ease-in-out both;display:inline-block}@keyframes fxRise{0%{opacity:0;transform:translateY(6px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(-26px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(.95)}}.fx-float{position:fixed;z-index:95;pointer-events:none;font-family:"Baloo 2",cursive;font-weight:800;font-size:1.15rem;color:var(--mango-deep);background:var(--mango-soft);border-radius:999px;padding:5px 14px;box-shadow:var(--shadow-lift);animation:fxRise 1.5s ease-out both}@keyframes fxBadgeIn{0%{opacity:0;transform:scale(.5) rotate(-12deg)}55%{opacity:1;transform:scale(1.12) rotate(4deg)}to{opacity:1;transform:scale(1) rotate(0)}}.toast.badge-toast{background:linear-gradient(135deg,var(--primary),var(--primary-deep));animation:fxBadgeIn .55s cubic-bezier(.34,1.56,.64,1) both}.toast.badge-toast .tic{animation:fxFlame 1s ease-in-out .3s both}@keyframes fxGlow{0%{box-shadow:0 0 #0f8a6d80}to{box-shadow:0 0 0 14px #0f8a6d00}}.opt.correct.fx-pop{animation:fxPop .45s ease-out both,fxGlow .7s ease-out both}.goal{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 17px;margin-bottom:14px}.goal .ring{flex:0 0 62px;position:relative;width:62px;height:62px}.goal .ring svg{transform:rotate(-90deg)}.goal .ring .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Baloo 2",cursive;font-weight:800;font-size:.95rem;color:var(--primary-deep)}.goal .ring circle{fill:none;stroke-width:7;stroke-linecap:round}.goal .ring .bg{stroke:var(--primary-soft)}.goal .ring .fg{stroke:var(--primary);transition:stroke-dashoffset .8s cubic-bezier(.34,1.2,.64,1)}.goal.done .ring .fg{stroke:var(--mango)}.goal h3{font-size:1rem;font-weight:800;font-family:"Baloo 2",cursive;color:var(--ink)}.goal p{font-size:.82rem;color:var(--ink-soft);margin-top:2px;line-height:1.4}.iconbtn{display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:999px;width:38px;height:38px;box-shadow:var(--shadow);font-size:1rem;position:relative}.iconbtn:after{content:"";position:absolute;inset:-4px}.risk{display:flex;align-items:center;gap:12px;background:var(--coral-soft);border:2px solid var(--coral);border-radius:16px;padding:12px 15px;margin-bottom:14px}.risk b{color:var(--coral)}.nextbadge{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:12px;border-top:1px dashed #D8E5DE}.nextbadge .bic{font-size:1.6rem;filter:grayscale(1);opacity:.5}.nextbadge .txt{flex:1}.nextbadge .bar{height:8px;background:var(--primary-soft);border-radius:999px;overflow:hidden;margin-top:5px}.nextbadge .bar i{display:block;height:100%;background:var(--mango);border-radius:999px;transition:width .6s ease}dialog.modal-dialog{border:none;padding:0;background:transparent;max-width:100%;max-height:100%}dialog.modal-dialog::backdrop{background:#12332b73}dialog.modal-dialog .modal{margin:0}.iconbtn{width:44px;height:44px}.iconbtn:after{content:none}.toast-action{margin-left:auto;background:var(--mango);color:#5c3700;border-radius:10px;padding:7px 13px;font-weight:800;font-size:.82rem;min-height:36px;white-space:nowrap}.install-card{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border-radius:var(--radius);padding:17px;margin-bottom:14px;box-shadow:var(--shadow-lift)}.install-card h3{font-family:"Baloo 2",cursive;font-size:1.05rem;margin-bottom:4px}.install-card p{font-size:.86rem;opacity:.94;line-height:1.45;margin-bottom:12px}.install-card .btn{background:#fff;color:var(--primary-deep);box-shadow:none}.install-steps{list-style:none;margin:0;padding:0}.install-steps li{font-size:.86rem;line-height:1.5;margin-bottom:5px;display:flex;gap:8px}.install-steps li b{flex:0 0 auto}#shell{width:100%;max-width:480px;height:100dvh;display:flex;flex-direction:column;position:relative}#topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px;flex:0 0 auto}.brand .logo-txt{font-family:"Baloo 2",cursive;font-weight:800;font-size:1.45rem;color:var(--primary-deep);letter-spacing:.2px}.brand .logo-txt span{color:var(--mango)}.brand small{display:block;font-size:.64rem;font-weight:700;color:var(--ink-soft);letter-spacing:.6px;text-transform:uppercase;margin-top:-3px}.statpills{display:flex;gap:8px}#app{flex:1 1 auto;min-height:0;padding:10px 18px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}.screen{animation:fadeUp .28s ease both}.hero{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff;border-radius:26px;padding:20px 18px;margin:8px 0 16px;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:#ffffff14}.hero h1{font-size:1.35rem;font-weight:700;margin-bottom:4px}.hero p{font-size:.88rem;opacity:.94}.hero .mascot{flex:0 0 86px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}.ruta-head{display:flex;align-items:baseline;justify-content:space-between;margin:18px 2px 10px;gap:10px}.ruta-head h2{font-size:1.12rem;color:var(--primary-deep)}.ruta-head .prog{font-size:.78rem;font-weight:800;color:var(--ink-soft);white-space:nowrap}.lesson-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.lesson-top .close{font-size:1.4rem;color:var(--ink-soft);min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center}.finish{text-align:center;padding:22px 6px}.finish .mascot{width:130px;height:auto;margin:6px auto 10px;animation:hop 1s ease infinite alternate}@keyframes hop{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.finish h2{font-size:1.5rem;color:var(--primary-deep)}.finish .bigscore{font-family:"Baloo 2",cursive;font-size:2.6rem;font-weight:800;color:#d98a16;margin:6px 0}.finish .xpgain{display:inline-block;background:var(--mango-soft);color:var(--mango-deep);font-weight:800;border-radius:999px;padding:6px 16px;margin-bottom:14px}.failed-list{text-align:left;margin:10px 0 14px}.failed-list li{font-size:.85rem;line-height:1.4;margin:0 0 6px 18px}.searchbox{width:100%;border:2.5px solid var(--primary-soft);border-radius:16px;padding:12px 15px;min-height:var(--tap);font-size:.95rem;font-family:inherit;margin-bottom:14px;background:var(--surface)}.searchbox:focus{outline:none;border-color:var(--primary)}#nav{flex:0 0 auto;background:var(--surface);border-top:1.5px solid #E3EDE7;display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}#nav[hidden]{display:none}#nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;font-weight:800;color:var(--ink-soft);padding:6px 14px;min-width:var(--tap);min-height:var(--tap);border-radius:14px;text-decoration:none}#nav a svg{width:24px;height:24px}#nav a[aria-current=page]{color:var(--primary-deep);background:var(--primary-soft)}