:root{--ink:#14213d;--ink-2:#1f2d52;--paper:#fbf7ef;--paper-2:#fffdf8;--line:#e7ddca;--coral:#ff5a3c;--coral-dk:#e3431f;--gold:#ffb703;--teal:#18a999;--teal-dk:#0f7d72;--rose:#ef476f;--violet:#6c5ce7;--muted:#6b7280;--muted-2:#9aa3b2;--shadow:0 2px 0 rgba(20,33,61,.12),0 10px 30px rgba(20,33,61,.08);--shadow-press:0 1px 0 rgba(20,33,61,.18);--radius:18px;--radius-sm:12px;--font-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;--font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:var(--font-body);background:radial-gradient(1200px 600px at 80% -10%,#fff6e8 0,transparent 60%),var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit}button{font-family:inherit;cursor:pointer}.hud{position:-webkit-sticky;position:sticky;top:0;z-index:40;gap:14px;padding:12px 18px;background:hsla(40,60%,96%,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand,.hud{display:flex;align-items:center}.brand{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;gap:9px;margin-right:auto}.brand .logo{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:17px;transform:rotate(-6deg)}.stat{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;padding:6px 11px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}.stat.streak{color:var(--coral-dk)}.stat.xp{color:#9a6a00}.stat.hearts{color:var(--rose)}.stat svg{width:17px;height:17px}.btn{border:none;border-radius:12px;font-weight:800;font-size:15px;padding:11px 18px;background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-dk);transition:transform .05s,box-shadow .05s}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--coral-dk)}.btn.ghost{background:var(--paper-2);color:var(--ink);box-shadow:0 3px 0 var(--line);border:1px solid var(--line)}.btn.ink{background:var(--ink);box-shadow:0 4px 0 #0b1730}.btn.teal{background:var(--teal);box-shadow:0 4px 0 var(--teal-dk)}.btn:disabled{opacity:.5;box-shadow:none;transform:none;cursor:not-allowed}.btn.sm{padding:8px 13px;font-size:14px;border-radius:10px}.wrap{max-width:820px;margin:0 auto;padding:22px 18px 120px}.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:center;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:hsla(40,60%,96%,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}.tabbar button{flex:1 1;max-width:130px;background:transparent;border:none;display:grid;place-items:center;grid-gap:3px;gap:3px;padding:7px 4px;font-size:11px;font-weight:800;color:var(--muted-2);border-radius:12px}.tabbar button.active{color:var(--coral);background:#fff1ec}.tabbar svg{width:22px;height:22px}.unit-head{margin:26px 0 6px;padding:16px 18px;border-radius:var(--radius);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.unit-head h2{margin:0;font-family:var(--font-display);font-size:21px;letter-spacing:-.01em}.unit-head p{margin:4px 0 0;font-size:13.5px;opacity:.9}.unit-head .uidx{position:absolute;right:14px;top:10px;font-weight:900;font-size:46px;opacity:.18;font-family:var(--font-display)}.unit-head .lock-note{font-size:12.5px;font-weight:700;margin-top:8px;display:inline-flex;gap:6px;align-items:center;background:rgba(0,0,0,.18);padding:5px 10px;border-radius:999px}.path{padding:8px 0 4px}.node-row,.path{position:relative}.node-row{display:flex;justify-content:center;padding:11px 0}.node-row[data-off=l]{transform:translateX(-78px)}.node-row[data-off=r]{transform:translateX(78px)}.node-row[data-off=cl]{transform:translateX(-40px)}.node-row[data-off=cr]{transform:translateX(40px)}.node{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--paper-2);border:2px solid var(--line);box-shadow:0 6px 0 var(--line);transition:transform .06s,box-shadow .06s;font-weight:900;font-size:24px;color:var(--ink)}.node:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}.node.done{color:#fff}.node.current{animation:bob 2.2s ease-in-out infinite}.node.locked{filter:grayscale(.5) opacity(.55);cursor:not-allowed}.node .ring{position:absolute;inset:-8px;border-radius:50%;border:3px dashed;opacity:.55}.node .check{font-size:30px}.node-label{position:absolute;top:50%;transform:translateY(-50%);font-weight:800;font-size:13px;white-space:nowrap;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:5px 11px;border-radius:999px;box-shadow:var(--shadow)}.node-row[data-off=cr] .node-label,.node-row[data-off=r] .node-label{right:calc(100% + 14px)}.node-row:not([data-off]) .node-label,.node-row[data-off=cl] .node-label,.node-row[data-off=l] .node-label{left:calc(100% + 14px)}.start-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px;letter-spacing:.03em;box-shadow:0 3px 0 var(--coral-dk)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card h3{margin:0 0 8px;font-family:var(--font-display);letter-spacing:-.01em}.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff1ec;color:var(--coral-dk)}.lesson{max-width:660px;margin:0 auto;padding:16px 18px 150px}.progress-top{display:flex;align-items:center;gap:12px;padding:10px 0 18px}.xbar{flex:1 1;height:14px;border-radius:999px;background:#efe7d6;overflow:hidden;border:1px solid var(--line)}.xbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#36c2b2);transition:width .3s}.close-x{background:none;border:none;font-size:26px;color:var(--muted-2);line-height:1;padding:0 4px}.heart-mini{display:flex;gap:3px}.heart-mini svg{width:20px;height:20px}.q-stem{font-family:var(--font-display);font-size:23px;line-height:1.3;letter-spacing:-.01em;margin:8px 0 20px}.q-type-tag{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper-2);border:2px solid var(--line);border-radius:14px;padding:15px 16px;margin-bottom:11px;font-size:16px;font-weight:600;color:var(--ink);box-shadow:0 3px 0 var(--line);transition:transform .05s,box-shadow .05s,border-color .1s}.opt:active{transform:translateY(3px);box-shadow:none}.opt .key{width:26px;height:26px;flex:none;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--muted)}.opt.sel{box-shadow:0 3px 0 var(--ink)}.opt.sel,.opt.sel .key{border-color:var(--ink)}.opt.sel .key{color:var(--ink)}.opt.correct{border-color:var(--teal);background:#e9faf6;box-shadow:0 3px 0 var(--teal)}.opt.wrong{border-color:var(--rose);background:#fdeef2;box-shadow:0 3px 0 var(--rose)}.opt.disabled{pointer-events:none}.fill-in{width:100%;padding:15px 16px;font-size:17px;font-weight:700;border-radius:14px;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);background:var(--paper-2);outline:none}.fill-in:focus{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}textarea.recall{width:100%;min-height:120px;resize:vertical;padding:14px 16px;font-size:16px;font-family:var(--font-body);border-radius:14px;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);background:var(--paper-2);outline:none}textarea.recall:focus{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}.match-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.match-col{display:flex;flex-direction:column;gap:9px}.chip{text-align:left;border:2px solid var(--line);background:var(--paper-2);border-radius:12px;padding:12px 13px;font-weight:700;font-size:14.5px;box-shadow:0 3px 0 var(--line);color:var(--ink)}.chip.sel{border-color:var(--violet);box-shadow:0 3px 0 var(--violet)}.chip.matched{border-color:var(--teal);background:#e9faf6;box-shadow:none;opacity:.85}.chip.badmatch{border-color:var(--rose);background:#fdeef2}.chip .tag{font-size:11px;font-weight:900;color:var(--violet);margin-right:6px}.order-list{display:flex;flex-direction:column;gap:9px}.order-item{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:2px solid var(--line);border-radius:12px;padding:13px 14px;font-weight:700;box-shadow:0 3px 0 var(--line)}.order-item .num{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}.order-item .arrows{margin-left:auto;display:flex;gap:4px}.order-item .arrows button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-weight:900}.order-item.correct{border-color:var(--teal);background:#e9faf6}.order-item.wrong{border-color:var(--rose);background:#fdeef2}.feedback{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:18px 18px calc(20px + env(safe-area-inset-bottom));border-top:2px solid;box-shadow:0 -8px 24px rgba(20,33,61,.06);animation:slideUp .22s ease}.feedback.good{background:#e9faf6;border-color:var(--teal)}.feedback.bad{background:#fdeef2;border-color:var(--rose)}.feedback .ftitle{font-family:var(--font-display);font-weight:800;font-size:18px;display:flex;align-items:center;gap:9px}.feedback.good .ftitle{color:var(--teal-dk)}.feedback.bad .ftitle{color:var(--rose)}.feedback .why{font-size:14.5px;color:var(--ink);margin:7px 0 14px;line-height:1.45}.feedback .row{display:flex;gap:10px;align-items:center}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.result{text-align:center;padding:40px 20px;max-width:460px;margin:0 auto}.result .big{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.02em}.result .grid3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px;margin:22px 0}.result .tile{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}.result .tile .n{font-family:var(--font-display);font-size:24px;font-weight:800}.result .tile .l{font-size:11.5px;font-weight:800;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}.center-screen{min-height:70vh;display:grid;place-items:center;padding:24px}.auth-card{max-width:400px;width:100%;text-align:center}.auth-card h2{font-family:var(--font-display);font-size:26px;margin:0 0 6px;letter-spacing:-.02em}.auth-card p{color:var(--muted);margin:0 0 20px;font-size:15px}.input{width:100%;padding:13px 15px;border-radius:12px;border:2px solid var(--line);font-size:15px;outline:none;margin-bottom:11px;box-shadow:0 3px 0 var(--line)}.input:focus{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}.divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:12.5px;font-weight:700;margin:14px 0}.divider:after,.divider:before{content:"";flex:1 1;height:1px;background:var(--line)}.note-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);box-shadow:var(--shadow);margin-bottom:12px}.note-item h4{margin:0 0 3px;font-size:15.5px}.note-item p{margin:0;font-size:13.5px;color:var(--muted);white-space:pre-wrap}.note-meta{font-size:11.5px;color:var(--muted-2);font-weight:700;margin-top:6px}.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;z-index:60;box-shadow:var(--shadow)}.empty{text-align:center;color:var(--muted);padding:40px 20px}.empty .big-emoji{font-size:42px}.kbd-hint{font-size:12px;color:var(--muted-2);margin-top:8px}.skel{background:linear-gradient(90deg,#eee2cf,#f3ecdd,#eee2cf);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:10px}@keyframes shimmer{to{background-position:-200% 0}}@media (max-width:520px){.node-row[data-off=l],.node-row[data-off=r]{transform:translateX(0)}.node-row[data-off=cl]{transform:translateX(-28px)}.node-row[data-off=cr]{transform:translateX(28px)}.q-stem{font-size:20px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}:focus-visible{outline:3px solid var(--violet);outline-offset:2px}:root{--spring:cubic-bezier(.34,1.56,.64,1)}.btn{transition:transform .12s var(--spring),box-shadow .12s var(--spring),filter .12s}.btn:hover:not(:disabled){filter:brightness(1.04)}.btn:active:not(:disabled){transform:translateY(4px) scale(.99)}.opt{transition:transform .14s var(--spring),box-shadow .14s var(--spring),border-color .12s,background .12s}.opt:hover:not(.disabled){transform:translateY(-2px)}.opt.sel{transform:translateY(-1px) scale(1.005)}.opt.correct{animation:pop-correct .45s var(--spring)}.opt.wrong{animation:shake-wrong .42s ease}@keyframes pop-correct{0%{transform:scale(1)}40%{transform:scale(1.04) translateY(-3px)}to{transform:scale(1)}}@keyframes shake-wrong{0%,to{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}.chip.matched,.order-item.correct{animation:pop-correct .4s var(--spring)}.chip.badmatch,.order-item.wrong{animation:shake-wrong .4s ease}.q-stem{animation:rise-in .35s var(--spring)}.q-type-tag{animation:rise-in .3s var(--spring)}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chip,.fill-in,.opt,.order-item,.recall{animation:rise-in .3s var(--spring) backwards}.opt:first-child{animation-delay:.02s}.opt:nth-child(2){animation-delay:.06s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.14s}.xbar>i{transition:width .5s var(--spring);position:relative;overflow:hidden}.xbar>i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent);transform:translateX(-100%);animation:shine 2.2s ease-in-out infinite}@keyframes shine{to{transform:translateX(200%)}}.stat{transition:transform .2s var(--spring)}.stat.bump{animation:bump .4s var(--spring)}@keyframes bump{0%,to{transform:scale(1)}40%{transform:scale(1.18)}}.stat.streak svg{animation:flicker 1.6s ease-in-out infinite;transform-origin:bottom center}@keyframes flicker{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(-3deg)}}.mascot{display:block}.mascot-idle{animation:float 3s ease-in-out infinite}.mascot-happy{animation:nod .6s var(--spring)}.mascot-sad{animation:tilt .6s ease}.mascot-celebrate{animation:jump .7s var(--spring)}.mascot .pupil{animation:look 4s ease-in-out infinite}.mascot .sparkles circle{animation:sparkle 1s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes nod{0%{transform:translateY(0)}30%{transform:translateY(-8px) rotate(-3deg)}60%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes tilt{0%,to{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}@keyframes jump{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-16px) scale(1.05)}55%{transform:translateY(0) scale(.96)}75%{transform:translateY(-6px)}to{transform:translateY(0) scale(1)}}@keyframes look{0%,to{transform:translate(0)}25%{transform:translate(2px,1px)}75%{transform:translate(-2px,1px)}}@keyframes sparkle{0%,to{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}.q-with-mascot{display:flex;gap:12px;align-items:flex-start;margin-bottom:4px}.q-with-mascot .mascot{flex:none;margin-top:-6px}.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}.confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(2turn);opacity:.9}}.result .big{animation:pop-correct .6s var(--spring)}.result .tile{animation:rise-in .5s var(--spring) backwards}.result .tile:first-child{animation-delay:.05s}.result .tile:nth-child(2){animation-delay:.15s}.result .tile:nth-child(3){animation-delay:.25s}.result-emoji{font-size:72px;animation:jump .8s var(--spring)}.feedback{display:flex;gap:14px;align-items:flex-start}.feedback .fbody{flex:1 1}.feedback .mascot{flex:none}.node{transition:transform .14s var(--spring),box-shadow .14s var(--spring)}.node:hover:not(.locked){transform:translateY(-3px)}.node.current{animation:bob 2.2s ease-in-out infinite,glow 2s ease-in-out infinite}@keyframes glow{0%,to{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 10px rgba(255,90,60,.4))}}.unit-head{animation:rise-in .4s var(--spring)}.unit-head:after{content:"";position:absolute;inset:0;opacity:.08;background-image:radial-gradient(circle at 20% 30%,#fff 2px,transparent 0);background-size:22px 22px;pointer-events:none}.countup{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tabbar button.active svg{animation:nod .5s var(--spring)}@media (prefers-reduced-motion:reduce){.confetti i,.mascot,.mascot *,.stat.streak svg,.xbar>i:after{animation:none!important}}.smart-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(20,33,61,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:24px;animation:rise-in .2s ease}.smart-card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:28px 24px;text-align:center;max-width:340px;box-shadow:var(--shadow)}.spark-spin{display:inline-grid;place-items:center;animation:spark-pulse 1.1s ease-in-out infinite}@keyframes spark-pulse{0%,to{transform:scale(1) rotate(0);opacity:.8}50%{transform:scale(1.25) rotate(20deg);opacity:1}}