:root{--bg:#fafafa;--bg-glow-1:transparent;--bg-glow-2:transparent;--surface:#fff;--surface-2:#f4f4f5;--ink:#141414;--ink-2:#3a3a3a;--muted:#6b6b6b;--line:#e6e6e6;--line-strong:#d4d4d4;--brand:#3f8a2a;--brand-deep:#2d6b1c;--brand-soft:#eef6e9;--accent-line:color-mix(in srgb, var(--brand) 38%, var(--line));--pink:#d9a066;--latte:#94652a;--grad:linear-gradient(135deg, #3c7a20 0%, #4f8f2b 50%, #6f9f38 100%);--grad-soft:linear-gradient(135deg, #f7f7f7, #f2f2f2);--good:#18b96b;--good-deep:#0e9152;--good-soft:#e3f9ee;--bad:#ff4d6a;--bad-deep:#d6304d;--bad-soft:#ffeef1;--gold:#ffb020;--gold-deep:#e08a00;--gold-soft:#fff5de;--flame:#ff7a1a;--sky:#2aa8ff;--radius:22px;--shadow:0 1px 2px #0000000d, 0 8px 24px #0000000f;--shadow-lg:0 2px 6px #0000000f, 0 20px 50px #0000001a;--display:"Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;--body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a0a0a;--bg-glow-1:transparent;--bg-glow-2:transparent;--surface:#141414;--surface-2:#1c1c1c;--ink:#f4f4f4;--ink-2:#d4d4d4;--muted:#a1a1a1;--line:#262626;--line-strong:#363636;--brand:#7fc35a;--brand-soft:#16230f;--latte:#e2b47e;--grad-soft:linear-gradient(135deg, #181818, #141414);--good-soft:#10352a;--bad-soft:#3d1626;--gold-soft:#3a2c10;--shadow:0 1px 2px #0000004d, 0 10px 30px #0000004d;--shadow-lg:0 2px 6px #0006, 0 24px 60px #00000073;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0a0a0a;--bg-glow-1:transparent;--bg-glow-2:transparent;--surface:#141414;--surface-2:#1c1c1c;--ink:#f4f4f4;--ink-2:#d4d4d4;--muted:#a1a1a1;--line:#262626;--line-strong:#363636;--brand:#7fc35a;--brand-soft:#16230f;--latte:#e2b47e;--grad-soft:linear-gradient(135deg, #181818, #141414);--good-soft:#10352a;--bad-soft:#3d1626;--gold-soft:#3a2c10;--shadow:0 1px 2px #0000004d, 0 10px 30px #0000004d;--shadow-lg:0 2px 6px #0006, 0 24px 60px #00000073;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--body);color:var(--ink);background:var(--bg);min-height:100vh;margin:0;font-size:15.5px;line-height:1.55}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(900px 600px at 8% -10%, var(--bg-glow-1), transparent 60%), radial-gradient(800px 500px at 100% 0%, var(--bg-glow-2), transparent 60%), var(--bg);position:fixed;inset:0}h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0;line-height:1.15}a{color:var(--brand)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.fx{vertical-align:middle;color:var(--fx);flex:none;place-items:center;line-height:0;display:inline-grid}.fx.tile{width:var(--fx-size);height:var(--fx-size);color:#fff;background:linear-gradient(150deg, color-mix(in srgb, var(--fx) 62%, #fff), var(--fx) 70%);box-shadow:0 3px 0 color-mix(in srgb, var(--fx) 70%, #000), inset 0 2px 0 #ffffff59;border:0;border-radius:30%;padding:0;animation:none}.node-face .fx,.lesson-hero .fx,.unit-head .fx,.lc-cover .fx:not(.lc-crown),.never-white .fx{color:#fff;filter:drop-shadow(0 2px 2px #0000002e)}code{background:var(--brand-soft);border-radius:6px;padding:.1em .4em;font-size:.9em}:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 60%, transparent);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.error{color:var(--bad);font-weight:600}.good{color:var(--good);font-weight:700}.row{align-items:center;display:flex}.gap{gap:.6rem}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.stack-lg{grid-template-columns:minmax(0,1fr);gap:1.4rem;display:grid}.narrow{max-width:640px;margin-inline:auto}.clamp2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.page-title{font-size:2rem;font-weight:800}.page-head p{margin:.2rem 0 0}.credit{color:var(--muted);margin:0;font-size:.72rem;line-height:1.4}.bob{animation:2.4s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-6px)rotate(-3deg)}}.card{background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.15rem 1.25rem}.card-title{align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:1.25rem;display:flex}.btn{--b:var(--surface);--b-edge:var(--line-strong);--b-ink:var(--ink);letter-spacing:.02em;color:var(--b-ink);background:var(--b);box-shadow:0 4px 0 var(--b-edge);-webkit-user-select:none;user-select:none;border:0;border-radius:16px;justify-content:center;align-items:center;gap:.45rem;padding:.8rem 1.3rem;font-size:.95rem;font-weight:800;text-decoration:none;transition:transform 80ms,box-shadow 80ms,filter .15s;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.05)}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--b-edge);transform:translateY(3px)}.btn:disabled{--b:var(--line);--b-edge:var(--line-strong);--b-ink:var(--muted);background:var(--b);cursor:not-allowed}.btn.primary{--b:var(--grad);--b-edge:var(--brand-deep);--b-ink:#fff}.btn.good{--b:var(--good);--b-edge:var(--good-deep);--b-ink:#fff}.btn.danger{--b:var(--bad);--b-edge:var(--bad-deep);--b-ink:#fff}.btn.gold{--b:linear-gradient(135deg, #ffd25e, #ffb020);--b-edge:var(--gold-deep);--b-ink:#3d2600}.btn.ghost{--b:var(--surface);--b-edge:var(--line-strong);border:2px solid var(--line-strong)}.btn.danger-text{color:var(--bad)}.btn.small{box-shadow:0 3px 0 var(--b-edge);border-radius:12px;padding:.45rem .85rem;font-size:.85rem}.btn.big{padding:1rem 1.6rem;font-size:1.05rem}.btn.full{width:100%}.btn.wide{min-width:min(100%,220px)}.icon-btn{width:40px;height:40px;color:var(--muted);background:0 0;border:0;border-radius:12px;place-items:center;text-decoration:none;display:inline-grid}.icon-btn:hover{background:var(--brand-soft);color:var(--brand)}.lvl{font-family:var(--display);background:var(--brand-soft);color:var(--brand);border-radius:999px;align-items:center;padding:.05rem .55rem;font-size:.8rem;font-weight:800;display:inline-flex}.lvl.light,.chip-light{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff47}.chip-light{border-radius:999px;padding:.1rem .6rem;font-size:.8rem;font-weight:700}.chips{flex-wrap:wrap;gap:.45rem;display:flex}.chip{border:2px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;font-weight:700}.chip.glass{color:#fff;background:#ffffff29;border-color:#ffffff59}.chip.glass:hover{background:#ffffff47}.seg{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;gap:.25rem;padding:.25rem;display:inline-flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:10px;align-items:center;gap:.3rem;padding:.38rem .75rem;font-size:.85rem;font-weight:700;display:inline-flex}.seg button.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}.seg.light{background:#ffffff29;border-color:#ffffff40}.seg.light button{color:#ffffffd9}.seg.light button.on{color:var(--brand-deep);background:#fff}.select{border:2px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:.42rem .7rem;font-size:.88rem;font-weight:600}.meter{background:var(--line);border-radius:999px;height:12px;overflow:hidden}.meter span{border-radius:inherit;background:var(--grad);height:100%;transition:width .5s cubic-bezier(.3,1.4,.5,1);display:block;box-shadow:inset 0 3px #ffffff4d}.meter.gold span{background:linear-gradient(90deg,#ffcf4a,#ff9f1a)}.meter.good span{background:linear-gradient(90deg, #45dd8e, var(--good))}.avatar{background:var(--grad);color:#fff;width:38px;height:38px;font-family:var(--display);border-radius:50%;flex:none;place-items:center;font-weight:800;display:inline-grid}.avatar.xl{border:4px solid #fff9;width:84px;height:84px;font-size:2.4rem}.score{color:#fff;border-radius:10px;flex:none;place-items:center;min-width:44px;height:32px;padding:0 .5rem;font-weight:800;display:inline-grid}.score.good{background:var(--good)}.score.mid{background:var(--gold)}.score.low{background:var(--bad)}.boot,.loading{min-height:50vh;color:var(--muted);place-content:center;justify-items:center;gap:.6rem;font-weight:700;display:grid}.boot{min-height:100vh}.empty{text-align:center;justify-items:center;gap:.6rem;padding:2rem 1rem;display:grid}.back{color:var(--muted);justify-self:start;align-items:center;gap:.35rem;font-weight:700;text-decoration:none;display:inline-flex}.back:hover{color:var(--brand)}.app{grid-template-columns:250px minmax(0,1fr) 340px;min-height:100vh;display:grid}.sidenav{border-right:1px solid var(--line);background:color-mix(in srgb, var(--surface) 70%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex-direction:column;gap:1.4rem;height:100vh;padding:1.4rem 1rem;display:flex;position:sticky;top:0}.sidenav nav{gap:.3rem;display:grid}.logo{color:var(--ink);font-family:var(--display);align-items:center;gap:.55rem;padding-left:.4rem;font-size:1.45rem;font-weight:700;text-decoration:none;display:flex}.logo b{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800}.logo-mark{object-fit:cover;width:44px;height:44px;box-shadow:0 4px 0 var(--brand-deep);border-radius:14px;display:block}.navlink{color:var(--ink-2);border:2px solid #0000;border-radius:14px;align-items:center;gap:.9rem;padding:.7rem .9rem;font-weight:700;text-decoration:none;transition:background .15s;display:flex}.navlink:hover{background:var(--brand-soft)}.navlink.on{color:var(--brand);background:var(--brand-soft);border-color:color-mix(in srgb, var(--brand) 35%, transparent)}.page{min-width:0}.topbar{display:none}.content{max-width:760px;margin:0 auto;padding:2rem 1.5rem 4rem}.rightcol{align-content:start;gap:1rem;height:100vh;padding:1.4rem 1.2rem;display:grid;position:sticky;top:0;overflow-y:auto}.pills{justify-content:space-between;gap:.5rem;display:flex}.pill{font-family:var(--display);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:.3rem;padding:.3rem .7rem .3rem .45rem;font-size:1.05rem;font-weight:800;display:inline-flex}.pill.streak{color:var(--muted)}.pill.streak:not(.lit) .fx{color:var(--muted);opacity:.6}.pill.streak.lit{color:var(--flame)}.pill.xp{color:var(--gold-deep)}.pill.goal{color:var(--bad)}.quests header,.quota header{justify-content:space-between;align-items:baseline;margin-bottom:.6rem;display:flex}.quests h3,.quota h3{font-size:1.15rem}.quest{align-items:center;gap:.7rem;padding:.55rem 0;display:flex}.quest+.quest{border-top:1px dashed var(--line)}.quest b{font-size:.92rem}.quest-bar{align-items:center;gap:.5rem;margin-top:.25rem;display:flex}.quest-bar .meter{flex:1}.quest-bar>span{color:var(--muted);text-align:right;min-width:2.6rem;font-size:.78rem;font-weight:700}.quest.done b{color:var(--good)}.quest-win{background:var(--gold-soft);border-radius:12px;align-items:center;gap:.5rem;margin:.5rem 0 0;padding:.6rem;font-size:.88rem;font-weight:700;display:flex}.bridge{align-items:center;gap:.7rem;display:flex}.bridge div{display:grid}.bridge.ok{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:var(--good-soft)}.bridge.off{border-color:color-mix(in srgb, var(--gold) 45%, transparent);background:var(--gold-soft)}.quota{gap:.4rem;display:grid}.mascot-card{background:var(--grad-soft);padding:.5rem}.side-mascot{height:330px}.tabbar{display:none}.mascot{width:100%;min-width:0;position:relative}.mascot canvas{display:block;width:100%!important;height:100%!important}.mascot-fallback{place-items:center;height:100%;font-size:4rem;display:grid}.mascot .bubble{text-align:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:.55rem .8rem;font-size:.9rem;font-weight:600;position:absolute;top:.4rem;left:.5rem;right:.5rem}.overlay{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#08160a8c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.dialog{background:var(--surface);width:min(440px,100%);box-shadow:var(--shadow-lg);text-align:center;border-radius:28px;gap:.7rem;padding:1.4rem;animation:.25s cubic-bezier(.3,1.5,.5,1) pop;display:grid}.dialog p{margin:0}.dialog-mascot{height:200px}@keyframes pop{0%{opacity:0;transform:scale(.9)}}.learn{gap:2.2rem;display:grid}.hero{background:var(--surface);color:var(--ink);border:1.5px solid var(--accent-line);box-shadow:var(--shadow);isolation:isolate;border-radius:30px;grid-template-columns:minmax(0,1fr) 210px;align-items:end;padding:1.6rem 0 0 1.7rem;display:grid;position:relative;overflow:hidden}.hero-text{justify-items:start;gap:.7rem;padding-bottom:1.6rem;display:grid}.hero-kicker{background:var(--brand-soft);color:var(--brand);border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .7rem;font-size:.82rem;font-weight:700;display:inline-flex}.hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800}.hero p{color:var(--muted);max-width:34rem;margin:0}.hero-steps{gap:.4rem;display:flex}.hero-steps span{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;place-items:center;width:38px;height:38px;display:grid}.hero-steps span .fx{color:var(--muted);opacity:.8}.hero-steps span.on{background:var(--brand-soft);border-color:var(--accent-line)}.hero-steps span.on .fx{color:var(--fx);opacity:1}.hero-steps span.now .fx{opacity:1}.hero-steps span.now{background:var(--surface);outline:2px solid var(--brand);animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.08)}}.hero-mascot{height:300px;margin-bottom:-6px}.hero-bubble{background:var(--surface-2);border:1px solid var(--line);max-width:190px;color:var(--ink);box-shadow:var(--shadow);border-radius:14px 14px 4px;padding:.45rem .7rem;font-size:.82rem;font-weight:700;position:absolute;top:1.1rem;right:1rem}.unit{gap:1.2rem;display:grid}.unit-head{text-shadow:0 1px 3px #0000002e;color:#fff;background:var(--u,var(--grad));border-radius:24px;align-items:center;gap:1rem;padding:1rem 1.2rem;display:flex;box-shadow:0 5px #00000024}.unit-head small{opacity:.9;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:700}.unit-head h2{font-size:1.6rem}.unit-head p{opacity:.9;margin:.1rem 0 0;font-size:.88rem}.unit-count{font-family:var(--display);background:#fff3;border-radius:14px;padding:.3rem .7rem;font-size:1.1rem;font-weight:700}.unit-count b{font-size:1.5rem}.lvl-A1{--u:linear-gradient(135deg, #3ccf8e, #12a46b)}.lvl-A2{--u:linear-gradient(135deg, #3bb8ff, #2a6cf0)}.lvl-B1{--u:linear-gradient(135deg, #3cc6b4, #12917f)}.lvl-B2{--u:linear-gradient(135deg, #ff8fb5, #e8457d)}.lvl-C1{--u:linear-gradient(135deg, #ffb547, #f2711c)}.lvl-own{--u:linear-gradient(135deg, #9aa892, #66765f)}.trail{justify-items:center;gap:1.1rem;padding:.5rem 0 1rem;display:grid}.node-wrap{transform:translateX(var(--x));justify-items:center;gap:.35rem;width:150px;display:grid;position:relative}.node-wrap.open{z-index:20}.node{background:0 0;border:0;border-radius:50%;width:104px;height:104px;padding:0;transition:transform .12s;position:relative}.node:hover{transform:scale(1.05)}.node:active{transform:translateY(3px)}.node-ring{position:absolute;inset:0;transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--line);stroke-width:7px}.ring-fill{fill:none;stroke:var(--gold);stroke-width:7px;stroke-linecap:round;transition:stroke-dashoffset .6s}.node-face{background:var(--c,var(--grad));box-shadow:0 6px 0 var(--c-edge,var(--brand-deep)), inset 0 4px 0 #ffffff4d;border-radius:50%;place-items:center;display:grid;position:absolute;inset:13px}.node-face .fx{filter:drop-shadow(0 3px 2px #0000002e)}.node.fresh:not(.current) .node-face{filter:saturate(.55)brightness(1.04);opacity:.85}.node.current .node-face{animation:1.8s ease-in-out infinite nodeGlow}@keyframes nodeGlow{50%{box-shadow:0 6px 0 var(--c-edge,var(--brand-deep)), 0 0 0 10px color-mix(in srgb, var(--brand) 18%, transparent)}}.node.complete .ring-fill{stroke:var(--good)}.node-crown{position:absolute;top:-8px;right:-2px;rotate:18deg}.node-title{text-align:center;max-width:150px;color:var(--ink-2);font-size:.85rem;font-weight:700;line-height:1.25}.start-tip{z-index:2;background:var(--surface);color:var(--brand);font-family:var(--display);border:2px solid var(--line-strong);white-space:nowrap;border-radius:12px;padding:.25rem .75rem;font-size:.85rem;font-weight:800;animation:1.4s ease-in-out infinite tip;position:absolute;top:-34px}.start-tip:after{content:"";background:inherit;border:inherit;border-top:0;border-left:0;width:10px;height:10px;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)rotate(45deg)}@keyframes tip{50%{transform:translateY(-5px)}}.node-pop{z-index:10;background:var(--surface);border:1px solid var(--line);width:300px;box-shadow:var(--shadow-lg);text-align:left;border-radius:20px;gap:.6rem;padding:1rem;animation:.2s cubic-bezier(.3,1.5,.5,1) pop;display:grid;position:absolute;top:112px}.node-pop h3{font-size:1.25rem}.node-pop p{color:var(--muted);margin:0}.pop-steps{grid-template-columns:repeat(6,1fr);gap:.3rem;display:grid}.pop-steps a{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;place-items:center;display:grid;position:relative}.pop-steps a:not(.on) .fx{filter:grayscale(.7);opacity:.7}.pop-steps a.on{background:var(--good-soft);border-color:color-mix(in srgb, var(--good) 40%, transparent)}.pop-steps i{background:var(--good);color:#fff;border-radius:6px;padding:0 .25rem;font-size:.62rem;font-style:normal;font-weight:800;position:absolute;bottom:-6px}.pop-link{justify-self:center;align-items:center;gap:.25rem;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex}.more-card{background:var(--surface);border:2px dashed var(--line-strong);color:var(--ink);border-radius:22px;align-items:center;gap:1rem;padding:1.1rem 1.3rem;text-decoration:none;display:flex}.more-card div{display:grid}.more-card span{color:var(--muted);font-size:.9rem}.more-card:hover{border-color:var(--brand)}.cat-daily{--c:linear-gradient(145deg, #ffd36b, #ff9c3b);--c-edge:#d97a1c}.cat-food{--c:linear-gradient(145deg, #ffa58f, #ff5f7e);--c-edge:#d43d5b}.cat-travel{--c:linear-gradient(145deg, #7cc9ff, #4a78f5);--c-edge:#3155c4}.cat-work{--c:linear-gradient(145deg, #7fd3c9, #2a9d8f);--c-edge:#1f7a6f}.cat-study{--c:linear-gradient(145deg, #6fe3c0, #13b38a);--c-edge:#0d8d6b}.cat-tech{--c:linear-gradient(145deg, #74dcf0, #2283db);--c-edge:#1765ad}.cat-health{--c:linear-gradient(145deg, #ffaaa8, #f2455a);--c-edge:#c42c40}.cat-fun{--c:linear-gradient(145deg, #ffb3d9, #e0418d);--c-edge:#b42a6f}.cat-nature{--c:linear-gradient(145deg, #a8eda0, #34a853);--c-edge:#23833d}.cat-people{--c:linear-gradient(145deg, #ffe27a, #f6a609);--c-edge:#c98300}.cat-community{--c:var(--grad);--c-edge:var(--brand-deep)}.lesson-hero{background:var(--c);color:#fff;box-shadow:0 6px 0 var(--c-edge);text-shadow:0 1px 3px #00000038;border-radius:28px;align-items:center;gap:1.2rem;padding:1.5rem;display:flex;position:relative;overflow:hidden}.lesson-hero h1{margin:.4rem 0 .2rem;font-size:clamp(1.6rem,3.2vw,2.2rem)}.lesson-hero p{opacity:.95;margin:0 0 .4rem}.lesson-hero-fx{filter:drop-shadow(0 6px 6px #0003)}.hero-meta{opacity:.85}.step-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;display:grid}.step-card{text-align:center;background:var(--surface);border:2px solid var(--line);box-shadow:0 5px 0 var(--line-strong);color:var(--ink);border-radius:22px;justify-items:center;gap:.25rem;padding:1.1rem .8rem 1rem;text-decoration:none;transition:transform .1s,border-color .15s;display:grid;position:relative}.step-card:hover{border-color:var(--t,var(--brand));transform:translateY(-3px)}.step-card b{font-family:var(--display);font-size:1.1rem}.step-card.next{border-color:var(--t,var(--brand));box-shadow:0 5px 0 var(--t,var(--brand))}.best{background:var(--good-soft);color:var(--good);border-radius:8px;padding:.05rem .45rem;font-size:.75rem;font-weight:800;position:absolute;top:.55rem;right:.55rem}.best.new{background:var(--t,var(--brand));color:#fff}.tone-violet{--t:#4c8a2a}.tone-sky{--t:#2aa8ff}.tone-mint{--t:#18b98a}.tone-pink{--t:#ff5fb8}.tone-amber{--t:#f59e0b}.tone-coral{--t:#ff6a4d}.vocab-list{gap:.35rem;display:grid}.vocab-row{text-align:left;background:var(--surface-2);color:var(--ink);border:0;border-radius:12px;align-items:center;gap:.6rem;padding:.55rem .8rem;display:flex}.vocab-row:hover{background:var(--brand-soft)}.vocab-row svg{color:var(--brand);flex:none}.create{color:var(--ink);background:var(--surface);border:1.5px solid var(--accent-line);box-shadow:var(--shadow);border-radius:28px;gap:1rem;padding:1.4rem;display:grid}.create-head{align-items:center;gap:1rem;display:flex}.create-head h2{font-size:1.55rem}.create-head p{color:var(--muted);margin:.2rem 0 0}.create-form{gap:.75rem;display:grid}.create .topic{border:2px solid var(--line-strong);background:var(--surface-2);width:100%;color:var(--ink);border-radius:16px;padding:.95rem 1.1rem;font-size:1.05rem}.create .topic:focus{border-color:var(--brand);background:var(--surface);outline:none}.create-opts{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.similar{background:var(--surface-2);border-radius:16px;gap:.35rem;padding:.8rem;display:grid}.similar-item{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:12px;align-items:center;gap:.5rem;padding:.45rem .7rem;font-weight:600;text-decoration:none;display:flex}.create .error{color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:.4rem .7rem}.cat-scroll{scrollbar-width:thin;gap:.6rem;padding:.2rem .1rem .6rem;display:flex;overflow-x:auto}.cat-tile{border:2px solid var(--line);background:var(--surface);min-width:88px;box-shadow:0 4px 0 var(--line-strong);color:var(--ink-2);border-radius:18px;flex:none;justify-items:center;gap:.2rem;padding:.7rem .6rem .55rem;font-size:.82rem;font-weight:700;display:grid}.cat-tile.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);box-shadow:0 4px 0 var(--brand)}.filters{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.search{border:2px solid var(--line-strong);background:var(--surface);color:var(--muted);border-radius:14px;flex:240px;align-items:center;gap:.5rem;padding:0 .8rem;display:flex}.search:focus-within{border-color:var(--brand)}.search input{background:0 0;border:0;outline:none;flex:1;min-width:0;padding:.65rem 0}.lib-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.lesson-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);border-radius:22px;grid-template-rows:auto 1fr;text-decoration:none;transition:transform .15s,box-shadow .15s;display:grid;overflow:hidden}.lesson-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.lc-cover{background:var(--c);place-items:center;height:108px;display:grid;position:relative;overflow:hidden}.lc-cover:after{content:"";background:#ffffff2e;border-radius:50%;width:160px;height:160px;position:absolute;top:-60px;right:-40px}.lc-cover .lvl{position:absolute;top:.6rem;left:.7rem}.lc-fx{z-index:1;filter:drop-shadow(0 6px 5px #0003);transition:transform .25s;position:relative}.lesson-card:hover .lc-fx{transform:scale(1.12)rotate(-6deg)}.lc-crown{z-index:2;position:absolute;top:.5rem;right:.6rem}.lc-body{align-content:start;gap:.35rem;padding:.85rem 1rem 1rem;display:grid}.lc-cat{text-transform:uppercase;letter-spacing:.07em;color:var(--brand);font-size:.72rem;font-weight:800}.lc-body h3{font-size:1.15rem}.lc-body p{margin:0}.lc-foot{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.lc-foot span{align-items:center;gap:.25rem;display:inline-flex}.lc-foot .by{margin-left:auto}.rank-hero{text-align:center;justify-items:center;gap:.3rem;display:grid}.rank-hero p{margin:0}.podium{grid-template-columns:repeat(3,1fr);align-items:end;gap:.6rem;display:grid}.podium-col{text-align:center;justify-items:center;gap:.2rem;min-width:0;display:grid}.podium-col b{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.podium-block{border-radius:16px 16px 6px 6px;width:100%;margin-top:.3rem}.p0 .podium-block{background:linear-gradient(#d8dde8,#b4bccb);height:70px}.p1 .podium-block{background:linear-gradient(#ffd25e,#ffae1a);height:110px}.p2 .podium-block{background:linear-gradient(#f3b98a,#d98a4e);height:50px}.podium-col.me b{color:var(--brand)}.rank-list{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.rank-list li{background:var(--surface);border:1px solid var(--line);border-radius:16px;align-items:center;gap:.8rem;padding:.7rem 1rem;display:flex}.rank-list li.me{border-color:var(--brand);background:var(--brand-soft)}.rank{width:1.6rem;font-family:var(--display);color:var(--muted);text-align:center;font-weight:800}.profile-head{background:var(--surface);color:var(--ink);border:1.5px solid var(--accent-line);box-shadow:var(--shadow);border-radius:28px;align-items:center;gap:1.1rem;padding:1.4rem;display:flex}.profile-head h1{font-size:2rem}.role-chip{background:var(--brand-soft);color:var(--brand);border-radius:999px;margin-top:.3rem;padding:.15rem .65rem;font-size:.82rem;font-weight:700;display:inline-block}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.stat{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;align-items:center;gap:.8rem;padding:.9rem 1rem;display:flex}.stat div{display:grid}.stat b{font-family:var(--display);font-size:1.5rem;line-height:1.1}.bars{grid-template-columns:repeat(14,1fr);align-items:end;gap:.35rem;height:150px;display:grid}.bar-col{grid-template-rows:1fr auto;place-items:end center;gap:.2rem;height:100%;display:grid}.bar-v{background:var(--grad);border-radius:8px 8px 4px 4px;width:100%;min-height:3px}.bar-col span{color:var(--muted);font-size:.68rem}.settings{grid-template-columns:minmax(0,1fr);gap:.9rem;display:grid}.setting{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;font-weight:700;display:flex}.voice-pick{flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%;display:flex}.voice-pick .select{text-overflow:ellipsis;flex:160px;min-width:0;max-width:260px}.voice-hint{flex-basis:100%;font-weight:500}.switch{appearance:none;background:var(--line-strong);cursor:pointer;border-radius:999px;width:50px;height:30px;margin:0;transition:background .2s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.switch:checked{background:var(--good)}.switch:checked:after{transform:translate(20px)}.recent{gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.recent li{align-items:flex-start;gap:.8rem;display:flex}.table-wrap{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:.9rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;padding:.55rem .5rem}.table .actions{gap:.35rem;display:flex}.role{background:var(--brand-soft);color:var(--brand);border-radius:8px;padding:.1rem .5rem;font-size:.78rem;font-weight:800}.role.blocked{background:var(--bad-soft);color:var(--bad)}.role.member{background:var(--good-soft);color:var(--good)}.ex{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.ex-top{align-items:center;gap:.8rem;width:100%;max-width:1000px;margin:0 auto;padding:1.2rem 1.2rem .4rem;display:flex}.ex-progress{background:var(--line);border-radius:999px;height:18px;overflow:hidden}.ex-progress span{border-radius:inherit;background:linear-gradient(90deg,#45dd8e,#18b96b);height:100%;transition:width .45s cubic-bezier(.3,1.4,.5,1);display:block;box-shadow:inset 0 5px #ffffff4d}.combo{font-family:var(--display);color:var(--flame);align-items:center;gap:.15rem;font-weight:800;animation:.3s cubic-bezier(.3,1.8,.5,1) pop;display:inline-flex}.ex-body{align-content:start;gap:1.3rem;width:100%;max-width:680px;margin:0 auto;padding:1.2rem 1.2rem 2rem;display:grid}.ex-title{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:800}.ex-prompt{align-items:flex-end;gap:.9rem;display:flex}.ex-mascot-frame{background:var(--grad-soft);border:1px solid var(--line);border-radius:24px 24px 50% 50%/24px 24px 30% 30%;flex:none;width:140px;height:160px;overflow:hidden}.ex-mascot{height:160px}.ex-speech{flex:1;gap:.7rem;min-width:0;padding-bottom:.5rem;display:grid}.speech{background:var(--surface);border:2px solid var(--line-strong);border-radius:20px;padding:.85rem 1.05rem;font-size:1.05rem;font-weight:600;position:relative}.speech:before{content:"";background:var(--surface);border-left:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);width:16px;height:16px;position:absolute;bottom:18px;left:-10px;transform:rotate(45deg)}.play-row{align-items:center;gap:.6rem;display:flex}.play{background:var(--sky);color:#fff;border:0;border-radius:14px;flex:none;place-items:center;width:44px;height:44px;display:inline-grid;box-shadow:0 4px #1b7fcf}.play:active{transform:translateY(3px);box-shadow:0 1px #1b7fcf}.play.slow{background:var(--surface);border:2px solid var(--line-strong);box-shadow:0 4px 0 var(--line-strong)}.play-row.big .play{border-radius:24px;width:84px;height:84px}.play-row.big .play.slow{border-radius:18px;width:58px;height:58px}.ex-foot{border-top:2px solid var(--line);background:var(--surface);position:sticky;bottom:0}.ex-foot.correct{background:var(--good-soft);border-color:#0000}.ex-foot.wrong{background:var(--bad-soft);border-color:#0000}.ex-foot-inner{max-width:1000px;padding:1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom,0px));flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;display:flex}.verdict{flex:1;align-items:center;gap:.8rem;min-width:0;display:flex}.verdict b{font-family:var(--display);font-size:1.4rem}.correct .verdict{color:var(--good-deep)}.wrong .verdict{color:var(--bad-deep)}.verdict-icon{background:var(--surface);border-radius:50%;flex:none;place-items:center;width:58px;height:58px;animation:.3s cubic-bezier(.3,1.8,.5,1) pop;display:grid}.verdict-detail{color:var(--ink-2);font-size:.92rem}.flash-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;display:grid}.flash{perspective:800px;background:0 0;border:0;height:140px;padding:0}.flash-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.3,.5,1);display:block;position:relative}.flash.flipped .flash-inner{transform:rotateY(180deg)}.flash-front,.flash-back{backface-visibility:hidden;text-align:center;border-radius:18px;place-content:center;justify-items:center;gap:.15rem;padding:.6rem;display:grid;position:absolute;inset:0}.flash-front{background:var(--surface);border:2px solid var(--line-strong);box-shadow:0 5px 0 var(--line-strong)}.flash-front b{font-family:var(--display);font-size:1.2rem}.flash-back{background:var(--grad);color:#fff;box-shadow:0 5px 0 var(--brand-deep);transform:rotateY(180deg)}.flash-back i{opacity:.9;font-size:.76rem}.ipa{color:var(--muted);font-size:.85rem}.pos{text-transform:uppercase;letter-spacing:.06em;color:var(--brand);font-size:.7rem;font-weight:800}.match{grid-template-columns:1fr 1fr;gap:.8rem;display:grid}.match-col{gap:.6rem;display:grid}.pair{border:2px solid var(--line-strong);background:var(--surface);min-height:56px;box-shadow:0 4px 0 var(--line-strong);border-radius:16px;padding:.5rem .7rem;font-weight:700;transition:transform .1s,opacity .3s}.pair.sel{border-color:var(--sky);background:color-mix(in srgb, var(--sky) 12%, var(--surface));box-shadow:0 4px 0 var(--sky);color:var(--sky)}.pair.matched{border-color:var(--good);background:var(--good-soft);color:var(--good);box-shadow:none;opacity:.55;transform:scale(.97)}.pair.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad);animation:.35s shake}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.gap-sentence{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin:0;padding:1rem 1.2rem;font-size:1.35rem;font-weight:600;line-height:2}.blank{border-bottom:3px solid var(--brand);text-align:center;min-width:5.5rem;color:var(--brand);white-space:pre;margin:0 .15rem;padding:0 .5rem;display:inline-block}.blank.correct{color:var(--good);border-color:var(--good)}.blank.wrong{color:var(--bad);border-color:var(--bad)}.options{gap:.7rem;display:grid}.options.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.option{text-align:left;border:2px solid var(--line-strong);background:var(--surface);min-height:58px;box-shadow:0 4px 0 var(--line-strong);border-radius:16px;align-items:center;gap:.8rem;padding:.7rem 1rem;font-size:1.02rem;font-weight:600;display:flex}.option:hover:not(:disabled){background:var(--surface-2)}.option.sel{border-color:var(--sky);box-shadow:0 4px 0 var(--sky);background:color-mix(in srgb, var(--sky) 10%, var(--surface))}.option.right{border-color:var(--good);box-shadow:0 4px 0 var(--good);background:var(--good-soft)}.option.wrong{border-color:var(--bad);box-shadow:0 4px 0 var(--bad);background:var(--bad-soft)}.opt-key{border:2px solid var(--line-strong);width:30px;height:30px;color:var(--muted);border-radius:9px;flex:none;place-items:center;font-size:.85rem;font-weight:800;display:inline-grid}.answer-line{border-bottom:2px solid var(--line-strong);background:repeating-linear-gradient(transparent 0 58px, var(--line) 58px 60px);flex-wrap:wrap;align-content:flex-start;gap:.5rem;min-height:64px;padding:.6rem 0 .7rem;display:flex}.bank{flex-wrap:wrap;justify-content:center;gap:.55rem;display:flex}.tile{border:2px solid var(--line-strong);background:var(--surface);box-shadow:0 4px 0 var(--line-strong);border-radius:14px;padding:.5rem .85rem;font-size:1.02rem;font-weight:600;animation:.18s pop}.tile.used{color:#0000;background:var(--line);box-shadow:none;border-color:var(--line)}.dict-input{border:2px solid var(--line-strong);background:var(--surface);resize:vertical;border-radius:18px;width:100%;min-height:140px;padding:1rem;font-size:1.1rem}.dict-input:focus{border-color:var(--brand);outline:none}.diff .w-ok{color:var(--good-deep)}.diff .w-miss{color:var(--bad-deep);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.speak-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;align-items:center;gap:1rem;padding:1.1rem 1.2rem;display:flex}.speak-text{flex:1;font-size:1.4rem;font-weight:600;line-height:1.5}.sw.ok{color:var(--good)}.sw.unclear{color:var(--gold-deep);cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.sw.missing{color:var(--bad);cursor:help;text-decoration:line-through}.mic-zone{grid-template-columns:1fr auto 1fr;place-items:center;display:grid}.mic-side{width:1px}.mic{color:#fff;background:var(--grad);width:112px;height:112px;box-shadow:0 7px 0 var(--brand-deep), 0 0 0 10px color-mix(in srgb, var(--brand) 14%, transparent);border:0;border-radius:50%;place-items:center;transition:transform .1s;display:grid}.mic:active:not(:disabled){transform:translateY(4px)}.mic.rec{box-shadow:0 7px 0 var(--bad-deep);background:linear-gradient(135deg,#ff6a7f,#ff3d5e);animation:1.2s ease-in-out infinite recPulse}@keyframes recPulse{50%{box-shadow:0 7px 0 var(--bad-deep), 0 0 0 18px color-mix(in srgb, var(--bad) 18%, transparent)}}.mic.grading{opacity:.8}.dots:before{content:"•••";letter-spacing:.1em;font-size:2rem;animation:1s infinite blink}@keyframes blink{50%{opacity:.35}}.wave{justify-content:center;align-items:center;gap:4px;height:40px;display:flex}.wave i{background:var(--grad);border-radius:4px;width:5px;height:100%;animation:.7s ease-in-out infinite alternate wave}@keyframes wave{0%{transform:scaleY(.2)}}.ring .ring-bg{fill:none;stroke:var(--line);stroke-width:8px}.ring .ring-fg{fill:none;stroke-width:8px;stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .8s cubic-bezier(.3,1.2,.5,1);transform:rotate(-90deg)}.ring text{font-family:var(--display);fill:var(--ink);font-size:22px;font-weight:800}.ring.good .ring-fg{stroke:var(--good)}.ring.mid .ring-fg{stroke:var(--gold)}.ring.low .ring-fg{stroke:var(--bad)}.speak-detail{gap:.6rem;display:grid}.speak-detail p{margin:0}.tips{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.tips li{background:var(--gold-soft);border-left:4px solid var(--gold);border-radius:14px;gap:.1rem;padding:.6rem .8rem;display:grid}.next-tip{background:var(--brand-soft);border-radius:14px;align-items:flex-start;gap:.5rem;padding:.7rem .9rem;font-weight:600;display:flex}.next-tip svg{color:var(--gold);flex:none}.note{color:var(--muted);font-size:.82rem}.read-tools{gap:.5rem;display:flex}.reading{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:1.2rem 1.4rem;font-size:1.2rem;line-height:2}.rs.on{background:var(--gold-soft);border-radius:6px}.rw{cursor:pointer;border-radius:5px}.rw:hover{background:var(--brand-soft);color:var(--brand)}.q{vertical-align:2px;background:var(--brand-soft);width:22px;height:22px;color:var(--brand);border:0;border-radius:7px;place-items:center;margin-left:.15rem;padding:0;display:inline-grid}.explain{gap:.4rem;display:grid}.explain p{margin:0}.word-pop{z-index:40;background:var(--surface);border:1px solid var(--line);width:min(440px,100% - 2rem);box-shadow:var(--shadow-lg);border-radius:22px;padding:1rem 1.1rem;position:fixed;bottom:110px;left:50%;transform:translate(-50%)}.word-pop ul{margin:.4rem 0 0;padding-left:1.1rem}.big-word{font-family:var(--display);font-size:1.5rem}.wp-mean{color:var(--brand);margin:.4rem 0 0;font-weight:700}.complete{text-align:center;align-content:center;justify-items:center;gap:.8rem;min-height:100vh;padding:1.5rem;display:grid;position:relative;overflow:hidden}.complete h1{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2.6rem;font-weight:800}.complete p{margin:0}.complete-stage{width:min(320px,80vw);position:relative}.complete-mascot{height:300px}.complete-fx{animation:2s ease-in-out infinite bob;position:absolute;bottom:20px;right:-10px}.complete-stats{flex-wrap:wrap;justify-content:center;gap:.7rem;display:flex}.cstat{border:2px solid var(--s);background:var(--surface);border-radius:18px;min-width:110px;overflow:hidden}.cstat small{background:var(--s);color:#fff;letter-spacing:.06em;padding:.25rem;font-weight:800;display:block}.cstat b{font-family:var(--display);color:var(--s);justify-content:center;align-items:center;gap:.3rem;padding:.55rem;font-size:1.5rem;display:flex}.cstat.xp{--s:var(--gold)}.cstat.acc{--s:var(--good)}.cstat.streak{--s:var(--flame)}.complete-actions{gap:.7rem;width:min(360px,100%);margin-top:.6rem;display:grid}.confetti{pointer-events:none;z-index:5;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:9px;height:15px;animation:linear forwards fall;position:absolute;top:-20px}.confetti i.round{border-radius:50%;width:10px;height:10px}@keyframes fall{to{opacity:.7;transform:translateY(110vh)rotate(720deg)}}.login-page{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:2rem;max-width:1040px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;display:grid}.login-hero{justify-items:center;gap:.6rem;min-width:0;display:grid}.login-mascot{max-width:440px;height:400px}.login-bubble{text-align:center;background:var(--surface);border:1px solid var(--line);max-width:320px;box-shadow:var(--shadow);border-radius:18px;margin:0;padding:.7rem 1rem;font-size:.95rem;font-weight:600;position:relative}@media (width>=701px){.login-bubble{margin-top:-5rem}}.login-bubble:before{content:"";background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);width:14px;height:14px;position:absolute;top:-8px;left:50%;transform:translate(-50%)rotate(45deg)}.login-card{text-align:center;background:var(--surface);border:1.5px solid var(--accent-line);box-shadow:var(--shadow-lg);border-radius:30px;justify-items:center;gap:1rem;min-width:0;padding:2rem 1.6rem;display:grid}.login-title{color:var(--brand);justify-content:center;align-items:center;gap:.6rem;font-size:2.6rem;font-weight:800;display:flex}.login-title img{width:56px;height:56px;box-shadow:0 4px 0 var(--brand-deep);border-radius:16px}.login-tagline{font-family:var(--display);color:var(--latte);margin:-.7rem 0 0;font-size:1.1rem;font-weight:700}.login-card .lead{color:var(--muted);margin:0}.login-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem .5rem;width:100%;margin:0;padding:0;list-style:none;display:grid}.login-feats li{color:var(--muted);text-align:center;flex-direction:column;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;line-height:1.2;display:flex}.login-tabs{width:100%;display:flex}.login-tabs .tab{color:var(--muted);background:0 0;border:0;border-radius:10px;flex:1;justify-content:center;padding:.5rem;font-size:.95rem;font-weight:800}.login-tabs .tab.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}.login-form{text-align:left;gap:.8rem;width:100%;display:grid}.login-form p{margin:0}.field{gap:.3rem;font-size:.9rem;font-weight:700;display:grid}.field input{border:2px solid var(--line-strong);background:var(--surface-2);border-radius:14px;padding:.75rem .9rem;font-size:1rem;font-weight:500}.field input:focus{border-color:var(--brand);background:var(--surface);outline:none}@media (width<=1180px){.app{grid-template-columns:92px minmax(0,1fr)}.rightcol{display:none}.sidenav{align-items:center;padding:1.2rem .7rem}.sidenav .logo>span:not(.logo-mark),.navlink span{display:none}.navlink{justify-content:center;padding:.75rem}.topbar{justify-content:flex-end;max-width:760px;margin:0 auto;padding:1rem 1.5rem 0;display:flex}.topbar .logo{display:none}}@media (width<=700px){body{font-size:15px}.app{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));display:block}.sidenav{display:none}.topbar{z-index:20;padding:calc(.6rem + env(safe-area-inset-top,0px)) 1rem .6rem;background:color-mix(in srgb, var(--bg) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.topbar .logo{padding:0;display:flex}.topbar .logo-mark{width:38px;height:38px}.topbar .pill{box-shadow:none;padding:.2rem .55rem .2rem .35rem;font-size:.95rem}.topbar .pill .fx svg{width:20px;height:20px}.content{padding:1.2rem 1rem 2rem}.tabbar{z-index:30;padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar a{color:var(--muted);border-radius:14px;justify-items:center;gap:.05rem;padding:.3rem .6rem;font-weight:700;text-decoration:none;display:grid}.tabbar a small{font-size:.68rem}.tabbar a.on{color:var(--brand);background:var(--brand-soft)}.page-title{font-size:1.7rem}.hero{border-radius:26px;grid-template-columns:minmax(0,1fr) 120px;padding:1.2rem 0 0 1.2rem}.hero-mascot{height:220px}.hero-bubble{display:none}.hero-steps span{width:32px;height:32px}.hero-steps .fx svg{width:18px;height:18px}.hero .btn.big{padding:.85rem 1.1rem;font-size:.95rem}.unit-head{gap:.7rem;padding:.9rem 1rem}.unit-head .fx svg{width:48px;height:48px}.unit-head h2{font-size:1.35rem}.unit-head p{display:none}.node-wrap{transform:translateX(calc(var(--x) * .65))}.node-pop{width:min(290px,100vw - 2rem)}.step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-hero{flex-direction:column;align-items:flex-start;padding:1.2rem}.lesson-hero-fx{width:64px;height:64px;position:absolute;top:.8rem;right:.8rem}.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.lc-cover{height:88px}.lc-fx{width:52px;height:52px}.lc-body{padding:.7rem .75rem .8rem}.lc-body h3{font-size:1rem}.lc-foot .by{display:none}.create{border-radius:24px;padding:1.1rem}.create-head .fx svg{width:48px;height:48px}.create-head h2{font-size:1.3rem}.ex-top{padding:.8rem .8rem .2rem}.ex-body{gap:1rem;padding:.8rem 1rem 1.5rem}.ex-mascot-frame{width:96px;height:116px}.ex-mascot{height:116px}.speech{font-size:.95rem}.play-row.big .play{width:68px;height:68px}.ex-foot-inner .btn.wide{flex:1}.options.grid2{grid-template-columns:1fr}.flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.speak-text{font-size:1.2rem}.gap-sentence{font-size:1.15rem}.verdict b{font-size:1.2rem}.verdict-icon{width:46px;height:46px}.login-page{padding:calc(.8rem + env(safe-area-inset-top,0px)) .9rem calc(1.2rem + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr);align-items:start;gap:.9rem}.login-mascot{max-width:220px;height:190px}.login-hero{gap:.3rem}.login-bubble{padding:.55rem .85rem;font-size:.88rem}.login-card{border-radius:26px;gap:.85rem;padding:1.3rem 1rem 1.4rem}.login-title{font-size:2.1rem}.login-title img{border-radius:13px;width:44px;height:44px}.login-tagline{margin-top:-.6rem;font-size:1rem}.login-card .lead{font-size:.92rem}.stat b{font-size:1.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.slow-label{font-family:var(--display);color:var(--ink-2);font-size:.95rem;font-weight:800}.play-row.big .slow-label{font-size:1.1rem}.pop-steps a.on .fx{color:var(--fx)}.lc-crown{color:#fff}.node-crown{color:var(--gold)}.onboard{background:var(--surface);border:2px solid color-mix(in srgb, var(--brand) 35%, transparent);box-shadow:var(--shadow-lg);border-radius:28px;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:.5rem;padding:.6rem 1.4rem .6rem .4rem;display:grid}.onboard-mascot{height:190px}.onboard-text{justify-items:start;gap:.55rem;padding:.8rem 0;display:grid}.onboard-text h2{font-size:1.6rem}.onboard-text p{color:var(--muted);margin:0}.hero-kicker.dark{background:var(--brand-soft);color:var(--brand)}.here-chip{vertical-align:.2em;font-family:var(--body);color:var(--brand-deep);text-shadow:none;background:#fff;border-radius:999px;margin-left:.5rem;padding:.15rem .55rem;font-size:.72rem;font-weight:800;display:inline-block}.placement .ex-body.center{text-align:center;justify-items:center}.place-mascot{width:min(320px,80vw);height:230px}.place-intro p,.place-result p{max-width:34rem;margin:0}.level-ladder{align-items:flex-end;gap:.6rem;display:flex}.level-ladder span{font-family:var(--display);justify-items:center;gap:.2rem;display:grid}.level-ladder span:nth-child(2){transform:translateY(-8px)}.level-ladder span:nth-child(3){transform:translateY(-16px)}.level-ladder span:nth-child(4){transform:translateY(-24px)}.level-ladder span:nth-child(5){transform:translateY(-32px)}.kind-chip{text-transform:uppercase;letter-spacing:.07em;background:var(--brand-soft);color:var(--brand);border-radius:999px;justify-self:start;padding:.2rem .65rem;font-size:.75rem;font-weight:800}.place-text{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:20px;margin:0;padding:1rem 1.2rem;font-size:1.15rem;line-height:1.7}.place-q{font-size:1.35rem}.level-badge{background:var(--u);color:#fff;text-shadow:0 1px 3px #0003;border-radius:24px;align-items:center;gap:.6rem;padding:.7rem 1.4rem;display:inline-flex;box-shadow:0 5px #00000026}.level-badge .fx{color:#fff}.level-badge b{font-family:var(--display);font-size:2.6rem;line-height:1}.level-badge span{font-size:1.1rem;font-weight:800}.level-card p{margin:0 0 .8rem}.companion-row{grid-template-columns:180px minmax(0,1fr);align-items:center;gap:1rem;display:grid}.companion-preview{background:var(--grad-soft);border-radius:20px;height:200px}.companion-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;display:grid}.companion{border:2px solid var(--line-strong);background:var(--surface);box-shadow:0 4px 0 var(--line-strong);border-radius:18px;justify-items:center;gap:.1rem;padding:.7rem .5rem;display:grid}.companion small{color:var(--muted);font-size:.75rem}.companion.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 4px 0 var(--brand)}.companion-emoji{font-size:1.8rem;line-height:1.2}@media (width<=700px){.onboard{grid-template-columns:1fr;padding:.4rem 1rem 1rem}.onboard-mascot{height:150px}.onboard-text{padding:0}.onboard-text .btn{flex:auto}.onboard-text h2{font-size:1.3rem}.companion-row{grid-template-columns:1fr}.place-mascot{height:180px}}.dialog-fx{justify-self:center}.crash{place-items:center;min-height:100vh;padding:1rem;display:grid}.crash .card{gap:.7rem;max-width:440px;display:grid}.crash p{margin:0}.vi{color:var(--ink-2);margin-top:.2rem;font-style:italic;display:block}.vi:before{content:"🇻🇳 ";font-style:normal}.speak-vi{color:var(--muted);margin:.35rem 0 0;font-size:.95rem;font-style:italic}.rs-vi{color:var(--muted);margin:.1rem 0 .6rem;font-size:.95rem;font-style:italic;line-height:1.5;display:block}.reading.with-vi .rs{display:block}.flash-back em{opacity:.85;font-size:.72rem}.landing{min-height:100vh}.lp-nav{z-index:20;max-width:1120px;padding:calc(.8rem + env(safe-area-inset-top,0px)) 1.25rem .8rem;background:color-mix(in srgb, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-items:center;gap:1rem;margin:0 auto;display:flex;position:sticky;top:0}.lp-brand{color:var(--ink);font-family:var(--display);align-items:center;gap:.55rem;font-size:1.5rem;font-weight:800;text-decoration:none;display:flex}.lp-brand img{box-shadow:0 3px 0 var(--brand-deep);border-radius:12px}.lp-links{gap:1.4rem;margin-left:1.5rem;display:flex}.lp-links a{color:var(--ink-2);font-weight:600;text-decoration:none}.lp-links a:hover{color:var(--brand)}.lp-nav-cta{gap:.5rem;margin-left:auto;display:flex}.landing main{max-width:1120px;margin:0 auto;padding:0 1.25rem}.lp-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2rem;padding:3rem 0 2.5rem;display:grid}.lp-hero-text{justify-items:start;gap:1.1rem;display:grid}.lp-kicker{border:1px solid var(--accent-line);background:var(--brand-soft);color:var(--brand);border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .8rem;font-size:.85rem;font-weight:700;display:inline-flex}.lp-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.05}.lp-accent{color:var(--brand)}.lp-sub{color:var(--muted);max-width:34rem;margin:0;font-size:1.12rem}.lp-sub b{color:var(--ink)}.lp-cta{flex-wrap:wrap;gap:.7rem;display:flex}.lp-trust{color:var(--muted);flex-wrap:wrap;gap:.4rem 1.1rem;margin:0;padding:0;font-size:.92rem;font-weight:600;list-style:none;display:flex}.lp-trust li{align-items:center;gap:.35rem;display:inline-flex}.lp-hero-art{aspect-ratio:1;border:1.5px solid var(--accent-line);background:var(--surface);box-shadow:var(--shadow-lg);border-radius:36px;place-items:center;display:grid;position:relative}.lp-hero-art img{width:82%;height:auto}.lp-float{background:var(--surface);border:1px solid var(--accent-line);box-shadow:var(--shadow);border-radius:16px;align-items:center;gap:.55rem;padding:.6rem .8rem;font-size:.9rem;display:flex;position:absolute}.lp-float small{color:var(--muted);font-size:.78rem;display:block}.lp-float-score{max-width:260px;bottom:12%;left:-1.2rem}.lp-float-streak{top:10%;right:-.8rem}.lp-section{border-top:1px solid var(--line);padding:3rem 0}.lp-section>h2,.lp-split h2{text-align:center;font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800}.lp-split h2{text-align:left;margin-top:.8rem}.lp-lead{text-align:center;max-width:40rem;color:var(--muted);margin:.6rem auto 0;font-size:1.05rem}.lp-split .lp-lead{text-align:left;margin-left:0}.lp-grid{gap:1rem;margin:2rem 0 0;padding:0;list-style:none;display:grid}.lp-steps,.lp-how{grid-template-columns:repeat(3,minmax(0,1fr))}.lp-card{background:var(--surface);border:1px solid var(--accent-line);box-shadow:var(--shadow);border-radius:22px;padding:1.3rem}.lp-card h3{margin:.8rem 0 .3rem;font-size:1.2rem}.lp-card p{color:var(--muted);margin:0}.lp-num{background:var(--brand-soft);border:1px solid var(--accent-line);width:40px;height:40px;color:var(--brand);font-family:var(--display);border-radius:12px;place-items:center;font-size:1.3rem;font-weight:800;display:inline-grid}.lp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2.5rem;display:grid}.lp-demo{background:var(--surface);border:1.5px solid var(--accent-line);box-shadow:var(--shadow-lg);border-radius:24px;gap:.9rem;padding:1.4rem;display:grid}.lp-demo-head{align-items:center;gap:.7rem;display:flex}.lp-demo-words{flex-wrap:wrap;gap:.35rem;margin:0;font-size:1.25rem;font-weight:600;display:flex}.dw{border-radius:8px;padding:.1rem .45rem}.dw.ok{color:var(--good-deep)}.dw.unclear{background:var(--gold-soft);color:var(--gold-deep)}.dw.missing{background:var(--bad-soft);color:var(--bad-deep);text-decoration:line-through}.lp-demo-tips{color:var(--ink-2);margin:0;padding-left:1.2rem}.lp-levels{grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;margin-top:2rem;display:grid}.lp-level{background:var(--surface);border:1px solid var(--accent-line);box-shadow:var(--shadow);border-radius:20px;justify-items:start;gap:.2rem;padding:1.15rem 1rem 1rem;display:grid;position:relative;overflow:hidden}.lp-level:before{content:"";background:var(--u);height:5px;position:absolute;inset:0 0 auto}.lp-level b{font-family:var(--display);font-size:1.5rem}.lp-level span{font-weight:700}.lp-level small{color:var(--muted);line-height:1.4}.lp-topics{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}.lp-topics span{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .8rem;font-size:.9rem;font-weight:600;display:inline-flex}.lp-companions{margin-inline:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;max-width:820px;margin-top:2rem;display:grid}.lp-companion{background:var(--surface);border:1px solid var(--accent-line);text-align:center;border-radius:20px;justify-items:center;gap:.2rem;padding:1.1rem .6rem;display:grid}.lp-companion span{font-size:2.4rem;line-height:1.1}.lp-companion small{color:var(--muted)}.lp-faq{gap:.7rem;max-width:760px;margin:2rem auto 0;display:grid}.lp-faq summary{cursor:pointer;font-size:1.05rem;font-weight:700}.lp-faq summary::marker{color:var(--brand)}.lp-faq p{margin-top:.6rem}.lp-final{text-align:center;border:1.5px solid var(--accent-line);background:var(--surface);box-shadow:var(--shadow);border-radius:32px;justify-items:center;gap:.7rem;margin:1rem 0 3rem;padding:2.5rem 1.25rem;display:grid}.lp-final h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}.lp-final p{color:var(--muted);margin:0}.lp-footer{max-width:1120px;padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;gap:.5rem 1.2rem;margin:0 auto;font-size:.9rem;display:flex}.lp-footer a{color:var(--brand)}.lp-footer .credit{flex-basis:100%;margin:0}.login-page{position:relative}.login-back{top:calc(1rem + env(safe-area-inset-top,0px));color:var(--muted);font-weight:700;text-decoration:none;position:absolute;left:1.25rem}.login-back:hover{color:var(--brand)}@media (width<=900px){.lp-links{display:none}.lp-hero,.lp-split{grid-template-columns:minmax(0,1fr)}.lp-hero-art{justify-self:center;width:100%;max-width:420px}.lp-steps,.lp-levels,.lp-companions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.lp-nav{padding-inline:1rem}.lp-brand{font-size:1.3rem}.landing main{padding:0 1rem}.lp-hero{gap:1.6rem;padding:1.5rem 0 2rem}.lp-cta .btn{flex:100%}.lp-float-score{bottom:.6rem;left:.6rem}.lp-float-streak{top:.6rem;right:.6rem}.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.lp-steps .lp-card{padding:1rem .9rem}.lp-steps .lp-card h3{margin-top:.6rem;font-size:1.02rem}.lp-steps .lp-card p{font-size:.86rem;line-height:1.45}.lp-how{grid-template-columns:minmax(0,1fr);gap:.7rem}.lp-how .lp-card{grid-template-columns:40px minmax(0,1fr);column-gap:.85rem;padding:1rem;display:grid}.lp-how .lp-num{grid-row:span 2}.lp-how .lp-card h3{margin:0 0 .15rem;font-size:1.05rem}.lp-section{padding:2.2rem 0}.lp-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.lp-level{padding:1rem .85rem .85rem}.lp-level small{font-size:.8rem}.lp-companions{grid-template-columns:repeat(2,minmax(0,1fr))}.login-back{justify-self:start;position:static}}@media (width<=400px){.lp-hide-xs{display:none}}.fox-svg{cursor:pointer;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.fox-svg.bust{overflow:hidden}.fox-svg *{transform-box:view-box}.fox-shadow{fill:#0000001f}.fox-body{transform-origin:100px 256px;animation:3.4s ease-in-out infinite fox-breathe}.fox-head{transform-origin:104px 124px;animation:6.5s ease-in-out infinite fox-look}.fox-tail{transform-origin:104px 236px;animation:3s ease-in-out infinite fox-sway}.fox-ear-r{transform-origin:127px 88px;animation:5.2s ease-in-out infinite fox-twitch}.fox-ear-l{transform-origin:82px 86px;animation:7.3s ease-in-out 1.2s infinite fox-twitch}.fox-eyes{transform-origin:105px 94px;animation:4.6s infinite fox-blink}.fox-svg.mood-happy .fox-head,.fox-svg.mood-cheer .fox-head{animation:.9s ease-in-out 2 fox-nod;rotate:-5deg}.fox-svg.mood-happy .fox-tail,.fox-svg.mood-cheer .fox-tail{animation:.45s ease-in-out infinite fox-wag}.fox-svg.mood-happy,.fox-svg.mood-cheer,.fox-svg.hop{animation:.55s ease-out 2 fox-hop}.fox-svg.mood-sad .fox-head,.fox-svg.mood-oops .fox-head{animation:none;translate:0 3px;rotate:9deg}.fox-svg.mood-sad .fox-tail,.fox-svg.mood-oops .fox-tail{animation:6s ease-in-out infinite fox-sway;rotate:8deg}.fox-svg.mood-sad .fox-ear-l,.fox-svg.mood-sad .fox-ear-r,.fox-svg.mood-oops .fox-ear-l,.fox-svg.mood-oops .fox-ear-r{animation:none}.fox-svg.mood-sad .fox-ear-l,.fox-svg.mood-oops .fox-ear-l{rotate:-7deg}.fox-svg.mood-sad .fox-ear-r,.fox-svg.mood-oops .fox-ear-r{rotate:7deg}.fox-svg.mood-think .fox-head{transition:rotate .4s;animation:none;rotate:-9deg}.fox-svg.mood-surprised .fox-head{animation:.5s ease-out fox-startle}.fox-svg.mood-surprised .fox-ear-l,.fox-svg.mood-surprised .fox-ear-r{animation:none;scale:1.06}@keyframes fox-breathe{50%{transform:scale(1.008,.988)}}@keyframes fox-look{0%,to{transform:rotate(0)}30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}@keyframes fox-sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(7deg)}}@keyframes fox-wag{0%,to{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}@keyframes fox-twitch{0%,88%,to{transform:rotate(0)}91%{transform:rotate(-9deg)}94%{transform:rotate(4deg)}}@keyframes fox-blink{0%,93%,to{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}@keyframes fox-nod{50%{transform:rotate(-6deg)}}@keyframes fox-hop{40%{transform:translateY(-7%)}}@keyframes fox-startle{30%{transform:translateY(-3px)rotate(-3deg)}}