:root{--bg:#f4f8ff;--card:#fff;--ink:#1d2a44;--muted:#5d6b85;--primary:#2f6fed;--primary-ink:#fff;--accent:#ff9f1c;--ok:#1f9d55;--err:#d64545;--info:#2f6fed;--line:#dfe6f3}@media (prefers-color-scheme:dark){:root{--bg:#0f1522;--card:#172033;--ink:#e8eefb;--muted:#9aa8c3;--primary:#5b8cff;--line:#26324a}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font:17px/1.6 system-ui,Segoe UI,Tahoma,sans-serif}.top{align-items:baseline;gap:12px;max-width:560px;margin:0 auto;padding:14px 16px;display:flex}.logo{color:var(--primary);font-size:28px;font-weight:800;text-decoration:none}.slogan{color:var(--accent);font-weight:700}#lang{margin-inline-start:auto}main{max-width:560px;margin:0 auto;padding:0 16px 40px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;gap:12px;margin-bottom:14px;padding:18px;display:grid}h1{margin:0;font-size:24px}h2{margin:0;font-size:20px}p{margin:0}.muted{color:var(--muted);font-size:15px}.field{gap:4px;font-weight:600;display:grid}input,select{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;width:100%;padding:12px}.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-align:center;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .1s;display:inline-block}.btn:active{transform:scale(.97)}.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.btn:disabled{opacity:.6;cursor:wait}.link{color:var(--primary);font:inherit;cursor:pointer;background:0 0;border:0}a{color:var(--primary)}.msg{border-radius:10px;padding:10px 12px;font-weight:600}.msg.error{background:color-mix(in srgb, var(--err) 12%, transparent);color:var(--err)}.msg.ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}.msg.info{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--info)}.actions{gap:8px;display:flex}.code{letter-spacing:3px;text-align:center;color:var(--accent);font-size:30px;font-weight:800}.hint{color:var(--muted);font-size:14px;font-weight:400}.pw{position:relative}.pw input{padding-inline-end:48px}.eye{inset-inline-end:6px;cursor:pointer;background:0 0;border:0;padding:6px;font-size:20px;position:absolute;top:50%;transform:translateY(-50%)}.grid{gap:12px;display:grid}details summary{cursor:pointer;font-weight:700}.check{grid-template-columns:auto 1fr;align-items:center;gap:2px 8px;display:grid}.check input{width:20px;height:20px}.check .hint{grid-column:2}.captcha:empty{display:none}.captcha{min-height:65px}.row-line{border-top:1px solid var(--line);justify-content:space-between;gap:8px;padding-top:8px;display:flex}input[type=file]{padding:10px}h3{margin:8px 0 4px;font-size:17px}ul{margin:0;padding-inline-start:22px}.question{border:1px solid var(--line);border-radius:12px;gap:8px;margin:0;padding:12px;display:grid}.question legend{padding:0 4px;font-weight:700}.choice{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:6px;display:flex}.choice:hover{background:var(--bg)}.choice input{flex:none;width:20px;height:20px}.result.right{border-color:color-mix(in srgb, var(--ok) 50%, var(--line))}.result.wrong{border-color:color-mix(in srgb, var(--err) 50%, var(--line))}.top-line{border-top:0;align-items:center;padding-top:0}.actions input{flex:1}.row-line .actions{align-items:center}.row-line .btn{white-space:nowrap}.stats{gap:16px;font-weight:700;display:flex}.fire{color:var(--accent);font-weight:800}.btn.big{width:100%;padding:14px;font-size:18px}.gamebar{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:grid}.gamebar .hearts{letter-spacing:2px}.gamebar .xp{color:var(--accent);font-weight:800}.progress{background:var(--line);border-radius:99px;grid-column:1/-1;height:12px;overflow:hidden}.progress .bar{background:var(--ok);border-radius:99px;height:100%;transition:width .5s}.path{justify-items:center;gap:14px;padding:8px 0;display:grid}.path .node{justify-items:center;gap:4px;font-weight:700;display:grid}.path .node:nth-child(odd){transform:translate(-40px)}.path .node:nth-child(2n){transform:translate(40px)}.path .dot{background:var(--card);border:4px solid var(--line);width:64px;height:64px;box-shadow:0 6px 0 var(--line);border-radius:50%;place-items:center;font-size:26px;display:grid}.path .done .dot{background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 6px 0 color-mix(in srgb, var(--ok) 70%, #000)}.path .now .dot{border-color:var(--primary);box-shadow:0 6px 0 var(--primary);animation:1.2s infinite bounce}.path .locked{opacity:.45}.stage-label{font-weight:800}.options{gap:10px;display:grid}.option{font:inherit;text-align:start;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--line);border-radius:14px;padding:14px;transition:transform .1s}.option:active{box-shadow:0 2px 0 var(--line);transform:translateY(2px)}.option.picked{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, var(--card));box-shadow:0 4px 0 var(--primary)}.margin textarea{font:inherit;border:2px dashed var(--line);background:repeating-linear-gradient(var(--card), var(--card) 27px, var(--line) 28px);width:100%;color:var(--ink);border-radius:12px;padding:10px;line-height:28px}.feedback.right{border:2px solid var(--ok);background:color-mix(in srgb, var(--ok) 10%, var(--card))}.feedback.wrong{border:2px solid var(--err);background:color-mix(in srgb, var(--err) 8%, var(--card))}.pop{animation:.35s pop}.shake{animation:.4s shake}.celebrate{text-align:center;justify-items:center;position:relative;overflow:hidden}.big-emoji{margin:0;font-size:64px;animation:.5s pop}.confetti{pointer-events:none;border-radius:2px;width:9px;height:14px;animation:1.8s ease-in forwards fall;position:absolute;top:-12px}@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes bounce{0%,to{translate:0}50%{translate:0 -6px}}@keyframes fall{to{opacity:.2;top:110%}}@media (prefers-reduced-motion:reduce){.pop,.shake,.big-emoji,.path .now .dot,.confetti{animation:none}}.sound{padding:0 4px;font-size:20px}.slide-in{animation:.35s slidein}.feedback{position:relative}.fly-xp{inset-inline-start:16px;color:var(--accent);font-size:22px;font-weight:900;animation:1.1s forwards fly;position:absolute;top:-8px}.heart-break{animation:.8s forwards heartbreak;display:inline-block}.over .big-emoji{animation:.5s 2 shake}body.flash-right{animation:.6s flashok}body.flash-wrong{animation:.6s flasherr}@keyframes slidein{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes fly{0%{opacity:0;transform:translateY(10px)scale(.8)}30%{opacity:1;transform:translateY(-6px)scale(1.2)}to{opacity:0;transform:translateY(-50px)}}@keyframes heartbreak{0%{transform:scale(1.4)}60%{transform:scale(1)rotate(-12deg)}to{opacity:.6;transform:scale(.9)}}@keyframes flashok{0%{box-shadow:inset 0 0 #0000}30%{box-shadow:inset 0 0 0 8px var(--ok)}to{box-shadow:inset 0 0 #0000}}@keyframes flasherr{0%{box-shadow:inset 0 0 #0000}30%{box-shadow:inset 0 0 0 8px var(--err)}to{box-shadow:inset 0 0 #0000}}@media (prefers-reduced-motion:reduce){.slide-in,.fly-xp,.heart-break,body.flash-right,body.flash-wrong{animation:none}}.diagram{gap:8px;margin:0 0 18px;display:grid;position:relative;overflow:hidden}.diagram .stage{border:3px solid var(--accent);box-shadow:0 5px 0 var(--line);background:#fff;border-radius:16px;overflow:hidden}.diagram .stage img{border:0;border-radius:0;display:block}.diagram .say{background:color-mix(in srgb, var(--accent) 14%, var(--card));border-radius:14px;min-height:1.6em;margin:0;padding:10px 12px;font-weight:700}.diagram .say:empty{display:none}.diagram .dots{justify-content:center;gap:6px;display:flex}.diagram .dots span{background:var(--line);border-radius:50%;width:10px;height:10px;transition:background .3s,transform .3s}.diagram .dots span.on{background:var(--accent);transform:scale(1.2)}.mini-check{border:2px dashed var(--primary);border-radius:14px;gap:8px;padding:12px;animation:.4s slidein;display:grid}.mini-check .q{margin:0;font-weight:800}.option.right{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 14%, var(--card));box-shadow:0 4px 0 var(--ok)}.option.wrong{border-color:var(--err);opacity:.7}.diagram img{border:1px solid var(--line);background:#fff;border-radius:12px;width:100%;height:auto;animation:.5s slidein}.example{border:1px solid var(--line);border-radius:14px;gap:8px;padding:12px;display:grid}.example .problem{background:var(--bg);border-radius:10px;padding:10px;font-weight:700}.steps{gap:6px;margin:0;padding-inline-start:24px;display:grid}.step-in{animation:.4s slidein}.example .answer{font-size:18px}.btn.listen{background:color-mix(in srgb, var(--accent) 14%, var(--card));border-color:var(--accent)}.narrator{inset-inline-start:12px;z-index:50;pointer-events:none;align-items:flex-end;gap:8px;max-width:min(420px,100vw - 24px);transition:transform .35s;display:flex;position:fixed;bottom:12px;transform:translateY(160%)}.narrator.show{pointer-events:auto;transform:none}.narrator .face svg{filter:drop-shadow(0 4px 6px #0003);flex:none;width:88px;height:88px;animation:2.4s ease-in-out infinite bob;display:block}.narrator .bubble{background:var(--card);color:var(--ink);border:2px solid var(--accent);border-radius:16px;max-height:40vh;margin:0 0 40px;padding:10px 12px;font-weight:600;overflow:auto;box-shadow:0 6px 16px #0000001f}.narrator-close{top:-10px;background:var(--ink);width:26px;height:26px;color:var(--card);cursor:pointer;border:0;border-radius:50%;position:absolute;inset-inline-start:68px}.narrator .mouth,.buddy .mouth{transform-box:fill-box;transform-origin:top}.narrator.talking .mouth{animation:.22s ease-in-out infinite alternate talk}.narrator .eyes,.buddy .eyes{transform-box:fill-box;transform-origin:50%;animation:4s infinite blink}.narrator .prop{animation:1.2s ease-in-out infinite kick}@keyframes kick{0%,to{translate:0}50%{translate:0 -6px}}.buddy-pick{gap:6px;display:grid}.buddy-pick p{margin:0}.buddies{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.buddy{font:inherit;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--line);border-radius:16px;justify-items:center;gap:2px;padding:8px 4px;font-weight:800;transition:transform .15s;display:grid}.buddy:active{transform:translateY(2px)}.buddy.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--card));box-shadow:0 4px 0 var(--accent)}.buddy.on .buddy-face svg{animation:1.6s ease-in-out infinite bob}.buddy-face svg{width:64px;height:64px;display:block}@keyframes talk{0%{transform:scaleY(1)}to{transform:scaleY(1.6)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes bob{0%,to{translate:0}50%{translate:0 -4px}}@media (prefers-reduced-motion:reduce){.narrator .face svg,.narrator .eyes,.narrator.talking .mouth,.narrator .prop,.buddy .eyes,.buddy.on .buddy-face svg{animation:none}}.lang-switch{justify-content:flex-end;align-items:center;gap:4px;display:flex}.lang-switch button{font:inherit;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;border-radius:999px;padding:6px 14px;font-weight:800}.lang-switch button.on{border-color:var(--primary);background:var(--primary);color:#fff}[hidden]{display:none!important}