*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#182033;font-family:Inter,system-ui,-apple-system,sans-serif}header{background:#111827;color:white;padding:18px 18px 14px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:4}.brand{display:flex;gap:10px;align-items:center}.brand .v{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#19c6d1,#3977ff);display:grid;place-items:center;font-weight:900;font-size:22px}.brand small{display:block;color:#a9b6ce}.xp{background:#253047;padding:8px 11px;border-radius:14px;font-size:13px}.hero{padding:26px 20px 20px;background:linear-gradient(150deg,#111827,#16365c);color:#fff}.hero small{color:#75e4e8}.hero h1{margin:7px 0 2px;font-size:29px}.hero p{margin:0;color:#bdc8da}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.stats div{background:#ffffff10;border:1px solid #ffffff16;padding:11px;border-radius:15px;text-align:center}.stats b,.stats span{display:block}.stats span{font-size:10px;color:#b9c5d8;margin-top:3px}nav{display:grid;grid-template-columns:repeat(4,1fr);background:white;border-bottom:1px solid #e7eaf0;position:sticky;top:70px;z-index:3}nav button{border:0;background:none;padding:11px 2px;color:#8490a4;font-weight:700}nav button span{font-size:10px;font-weight:500}nav button.active{color:#177fc7;border-bottom:3px solid #20b9c7}.tab{display:none;padding:18px;max-width:650px;margin:auto}.tab.active{display:block}h2{font-size:18px;margin:8px 0 12px}.card{background:white;border:1px solid #e8ecf2;border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 5px 18px #1a355b0a}.lesson{background:linear-gradient(135deg,#e7fbfc,#eef4ff)}.badge{display:inline-block;font-size:10px;background:#1f87c8;color:#fff;padding:5px 8px;border-radius:8px}.lesson h3{margin:12px 0 2px}.lesson p{margin:0;color:#667085}.bar{height:8px;background:#dce4ed;border-radius:10px;overflow:hidden;margin-top:15px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#20bdc8,#3479ed)}.words{display:grid;gap:9px}.word{width:100%;border:1px solid #e7ebf1;background:#fff;border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:58px 1fr 20px;align-items:center;text-align:left}.word.done{background:#f0fbf8;border-color:#b9eadd}.han{font-size:25px;font-weight:700}.word b,.word small{display:block}.word small{color:#7b8798;margin-top:3px}.word em{font-style:normal;color:#1ca998;font-size:18px}.answers{display:grid;gap:8px;margin-top:16px}.answers button,.primary,.speak{border:0;border-radius:13px;padding:13px;font-weight:700}.answers button{background:#edf2f8}.primary{background:linear-gradient(90deg,#20b9c7,#3479ed);color:#fff;width:100%;margin-top:10px}.speak{background:#eaf7fb;color:#147b9b;width:100%;margin:8px 0}textarea{width:100%;min-height:130px;border:1px solid #dbe2eb;border-radius:12px;padding:12px;font:inherit}.tip{border-left:4px solid #20b9c7}.bigstat{text-align:center}.bigstat b{font-size:42px;display:block;color:#237fd1}.bigstat span{color:#778399}#modal{position:fixed;inset:0;background:#0d1625aa;display:none;align-items:flex-end;z-index:10}#modal.show{display:flex}.sheet{width:100%;background:#fff;border-radius:28px 28px 0 0;padding:26px 22px 34px;text-align:center;position:relative}.close{position:absolute;right:16px;top:12px;border:0;background:#eef1f5;border-radius:50%;width:34px;height:34px;font-size:20px}.char{font-size:72px;font-weight:800;margin-top:12px}.sheet h2{font-size:25px;margin:2px}.sheet p{color:#6c7889;font-size:18px}@media(min-width:700px){body{max-width:700px;margin:auto;background:#e8edf5;box-shadow:0 0 50px #0002}main,nav,header{max-width:700px}}