:root{--bg:#f7f7f2;--ink:#1f2933;--muted:#6b7680;--line:#d9dde1;--accent:#2f9e6f;--accent-dark:#237a55;--bad:#d64545;--bad-bg:#fde8e8;--ok-bg:#e3f6ec;--math:#4c6ef5;--math-bg:#edf2ff;--chem:#c2410c;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}#app{flex-direction:column;gap:16px;max-width:640px;min-height:100dvh;margin:0 auto;padding:16px;display:flex}button{font:inherit;color:inherit;cursor:pointer}kbd{font:inherit;color:var(--muted);border:1.5px solid var(--line);border-radius:6px;flex:none;padding:0 6px;font-size:.8rem}@media (hover:none){kbd{display:none}}header{justify-content:space-between;align-items:center;display:flex}header h1{margin:0;font-size:1.4rem}.xp{color:#b7791f;font-weight:700}.tabs{gap:8px;display:flex}.tabs button{border:2px solid var(--line);background:#fff;border-radius:12px;flex:1;padding:10px;font-weight:600}.tabs button small{color:var(--muted);font-weight:400}.tabs button.active{border-color:var(--accent);color:var(--accent-dark)}.path h2{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;margin:20px 0 8px;font-size:1rem;display:flex}.path h2 .count{letter-spacing:0;font-weight:400}.lesson{text-align:left;border:2px solid var(--line);background:#fff;border-bottom-width:4px;border-radius:16px;align-items:center;gap:12px;width:100%;margin-bottom:10px;padding:14px;display:flex}.lesson:focus-visible{border-color:var(--accent);outline:none}@media (hover:hover){.lesson:hover{border-color:var(--accent)}}.lesson.next{border-color:var(--accent)}.lesson .badge{background:var(--line);width:44px;height:44px;color:var(--ink);border-radius:50%;flex:none;place-items:center;font-size:.85rem;font-weight:700;display:grid}.lesson.next .badge{background:var(--accent);color:#fff}.lesson.done .badge{background:var(--accent);color:#fff;font-size:1.1rem}.lesson .body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.lesson small{color:var(--muted)}.lesson .start{background:var(--accent);color:#fff;border-radius:999px;flex:none;align-self:center;padding:4px 12px;font-size:.85rem;font-weight:700}.chips{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:.85rem;display:flex}.chip{border:1.5px dashed var(--math);color:var(--math);background:#fff;border-radius:999px;padding:2px 10px;font-size:.85rem}.chip b{font-weight:700}.lesson .chips{font-size:.8rem}.lesson .chip{padding:1px 8px;font-size:.8rem}@media (width<=520px){.chips.in-lesson .t{display:none}}.chip.done{background:var(--math-bg);border-style:solid}.chip.chem{border-color:var(--chem);color:var(--chem);border-style:solid}.top{align-items:center;gap:12px;min-height:32px;display:flex}.quit{color:var(--muted);background:0 0;border:none;padding:0 4px;font-size:1.3rem}.bar{background:var(--line);border-radius:999px;flex:1;height:14px;overflow:hidden}.bar>div{background:var(--accent);height:100%;transition:width .3s}.question{flex-direction:column;gap:10px;display:flex}.prompt{margin:0;font-size:1.2rem;font-weight:600}.step-no{color:var(--accent-dark);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;font-size:.8rem;font-weight:600;display:block}.problem{border-left:4px solid var(--accent);background:#fff;border-radius:8px;margin:0;padding:12px;font-size:1.05rem}.equation{background:#fff;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;padding:16px;font-size:1.25rem;display:flex}.equation .blank{text-align:center;border-bottom:3px solid var(--line);min-width:2.5em;color:var(--muted)}.equation .blank.now{border-color:var(--accent);color:var(--accent)}.equation .filled{color:var(--accent-dark);font-weight:700}.steps{color:var(--muted);flex-direction:column;gap:4px;margin:0;padding-left:1.4em;display:flex}.steps li span{margin-right:8px}.steps li b{color:var(--accent-dark)}.options{flex-direction:column;gap:10px;display:flex}.option{text-align:left;border:2px solid var(--line);background:#fff;border-bottom-width:4px;border-radius:14px;align-items:center;gap:12px;padding:14px;font-size:1.05rem;display:flex}.option.selected{border-color:var(--math);background:var(--math-bg)}.option.right,.placed.right{border-color:var(--accent);background:var(--ok-bg)}.option.wrong,.placed.wrong{border-color:var(--bad);background:var(--bad-bg)}.option:disabled{cursor:default}.numeric-wrap{flex-direction:column;gap:6px;display:flex}.numeric{border:2px solid var(--line);background:#fff;border-radius:14px;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;font-size:1.25rem;display:flex}.numeric.right{border-color:var(--accent);background:var(--ok-bg)}.numeric.wrong{border-color:var(--bad);background:var(--bad-bg)}.num{font:inherit;border:2px solid var(--line);background:var(--bg);border-radius:10px;width:7em;min-width:0;padding:6px 10px}.num:focus{border-color:var(--math);outline:none}.num.exp{width:3.2em;font-size:.9rem}.numeric.sci .num:not(.exp){width:5em}.numeric sup{vertical-align:.6em}.numeric .sign{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:0 8px;font-size:.9rem}.numeric .unit,.hint{color:var(--muted)}.order{flex-direction:column;gap:14px;display:flex}.plan{counter-reset:plan;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.plan li{counter-increment:plan;align-items:center;gap:10px;display:flex}.plan li:before{content:counter(plan);background:var(--line);border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-size:.85rem;font-weight:700;display:grid}.plan li.slot{color:var(--muted);border:2px dashed var(--line);border-radius:12px;padding:12px}.plan li.slot:before{margin-left:-2px}.placed{text-align:left;border:2px solid var(--math);background:#fff;border-radius:12px;flex:1;padding:12px}.placed:disabled{cursor:default}.bank{flex-direction:column;gap:8px;display:flex}.step-chip{text-align:left;border:2px solid var(--line);background:#fff;border-bottom-width:4px;border-radius:12px;align-items:center;gap:10px;padding:12px;display:flex}.step-chip.used{background:var(--line);border-color:var(--line);color:#0000}.step-chip.used kbd{visibility:hidden}footer{border-radius:16px;flex-direction:column;gap:10px;margin-top:auto;padding:16px;display:flex}footer.ok{background:var(--ok-bg)}footer.bad{background:var(--bad-bg)}footer .feedback p{margin:6px 0 0}footer .feedback .note{font-weight:600}footer .feedback ol{margin:6px 0 0;padding-left:1.4em}footer small{color:var(--muted)}footer .message{color:var(--bad);margin:0}footer .message:empty{display:none}.primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark);border:none;border-radius:14px;padding:14px;font-size:1.05rem;font-weight:700}.primary:disabled{background:var(--line);box-shadow:none;cursor:default}footer.bad .primary{background:var(--bad);box-shadow:0 4px #a83232}.intro{flex-direction:column;gap:8px;display:flex}.intro h2,.intro p{margin:0}.intro .code{color:var(--muted);font-weight:700}.intro .lead{color:var(--muted);margin-top:8px}.math-list{flex-direction:column;gap:8px;margin-top:8px;display:flex}.math-card{text-align:left;border:2px dashed var(--math);background:#fff;border-radius:14px;align-items:center;gap:12px;padding:12px;display:flex}.math-card .code{background:var(--math-bg);width:44px;height:44px;color:var(--math);border-radius:50%;flex:none;place-items:center;font-size:.85rem;font-weight:700;display:grid}.math-card.done{border-style:solid}.math-card .body{flex-direction:column;display:flex}.math-card small{color:var(--muted)}.result{text-align:center;flex-direction:column;gap:8px;margin:auto 0;display:flex}.result h2,.result p{margin:0}.result .xp{font-size:1.6rem}.build{text-align:center;color:var(--muted);margin:8px 0 0;font-size:.75rem}