:root{--ink:#102147;--blue:#4ba8ef;--soft:#eaf7ff;--green:#59bd43;--purple:#7666dc;--card:#fff;--muted:#60708f}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:linear-gradient(145deg,#dff5ff,#f8fbff);min-height:100vh}.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{padding:24px;background:rgba(255,255,255,.92);box-shadow:8px 0 30px #7eb8de22;display:flex;flex-direction:column;gap:20px}.profile{display:flex;align-items:center;gap:12px}.avatar{font-size:44px;background:#c9efff;border:4px solid white;border-radius:50%;width:72px;height:72px;display:grid;place-items:center;box-shadow:0 5px 14px #75a7c555}.profile h2{margin:0}.xp{margin-top:5px;background:white;border-radius:20px;padding:7px 12px;box-shadow:0 3px 12px #7aa4bd33;font-weight:800}.level{padding:15px;background:white;border-radius:18px;box-shadow:0 5px 15px #8fb7cc33}.bar{height:12px;border-radius:20px;background:#d9edf7;margin-top:10px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#57bf61,#a7d94c)}nav{display:grid;gap:9px}nav button{border:0;background:transparent;text-align:left;padding:14px;border-radius:14px;font-size:16px;font-weight:750;color:var(--ink);cursor:pointer}nav button.active,nav button:hover{background:#eef8ff}.pep{margin-top:auto;background:#dff3ff;border-radius:20px;padding:18px;text-align:center;display:grid;gap:7px}.pep .mascot{font-size:55px}.pep span{color:var(--muted);font-size:14px}main{padding:26px;max-width:1400px;width:100%;margin:auto}.hero{min-height:225px;border-radius:30px;padding:28px 38px;background:linear-gradient(#93d9ff,#ddf4ff);display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;box-shadow:0 12px 35px #72aeca33}.hero:after{content:"";position:absolute;inset:auto -30px -80px;width:65%;height:170px;background:#fff8;border-radius:50%}.hero h1{font-size:52px;margin:12px 0 5px}.hero p{font-size:18px;max-width:650px}.time-pill{display:inline-block;background:#7367dc;color:white;padding:12px 18px;border-radius:18px;font-weight:900}.hero-animals{font-size:90px;z-index:2;white-space:nowrap}.card{background:white;border-radius:28px;margin-top:22px;padding:30px;box-shadow:0 12px 30px #719bb62e}.loading{text-align:center;color:var(--muted)}.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mission{border:1px solid #dceef8;border-radius:22px;padding:22px;background:linear-gradient(#fff,#f8fcff)}.mission .icon{font-size:50px}.mission h3{margin:8px 0}.primary{background:var(--green);color:#fff;border:0;border-radius:15px;padding:14px 22px;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #37962b}.secondary{background:#eef2ff;color:#4d44b7;border:0;border-radius:14px;padding:12px 18px;font-weight:800;cursor:pointer}.question{text-align:center;max-width:760px;margin:auto}.question .mascot{font-size:76px}.progress-dots{display:flex;gap:7px;justify-content:center;margin-bottom:20px}.dot{width:12px;height:12px;border-radius:50%;background:#d6e4eb}.dot.done{background:#5fc456}.choices{display:grid;gap:12px;margin:24px 0}.choice{padding:17px;border:2px solid #dbeaf3;border-radius:16px;background:white;font-weight:800;font-size:17px;cursor:pointer}.choice:hover,.choice.selected{border-color:#7869df;background:#f0efff}.lesson-head{display:flex;justify-content:space-between;align-items:center}.activity{border:1px solid #dcebf4;padding:20px;border-radius:20px;margin:15px 0}.activity label{display:block;font-weight:900;margin-bottom:10px}.activity input{width:100%;padding:13px;border:2px solid #dbe7ee;border-radius:12px;font-size:16px}.result{text-align:center;padding:25px}.big-score{font-size:64px;font-weight:950;color:#5aad42}.skill-row{display:grid;grid-template-columns:180px 1fr 60px;align-items:center;gap:15px;margin:16px 0}.skillbar{height:18px;background:#e7eff4;border-radius:20px;overflow:hidden}.skillbar i{display:block;height:100%;background:linear-gradient(90deg,#62bf58,#b2d74c)}@media(max-width:850px){.shell{grid-template-columns:1fr}.sidebar{position:relative}.sidebar nav{grid-template-columns:repeat(2,1fr)}.pep{display:none}.hero h1{font-size:38px}.hero-animals{font-size:55px}.home-grid{grid-template-columns:1fr}main{padding:14px}.skill-row{grid-template-columns:120px 1fr 45px}}