@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#173342;--muted:#65757b;--paper:#f5f6f2;--orange:#e9a049;--teal:#177b70;--line:#dce2df}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.55}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #d47d21;outline-offset:4px}button:disabled{cursor:default}header{max-width:1050px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:25px;font-weight:800;letter-spacing:-1px}.brand span{color:var(--teal)}.brand small{display:block;letter-spacing:2.2px;font-size:9px;margin-top:0}.badge,.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.7px}.badge{padding:8px 12px;border:1px solid var(--line);border-radius:50px}main{max-width:990px;margin:28px auto;padding:0 22px 110px}h1,h2,h3{font-family:Manrope,system-ui,sans-serif;line-height:1.18;letter-spacing:-.7px}h1{font-size:42px;margin:14px 0}h2{font-size:27px;margin:10px 0 20px}h3{font-size:19px;margin:8px 0}.muted{color:var(--muted)}.hero{background:#122f3f;border-radius:24px;padding:38px;color:white;display:grid;grid-template-columns:1.6fr 1fr;gap:20px;overflow:hidden;position:relative}.hero p{color:#c7d5d9;max-width:410px}.hero .eyebrow{color:#a9d4ca}.hero h1{max-width:470px}.primary,.secondary{padding:14px 22px;border-radius:12px;border:0;font-weight:700;min-height:48px}.primary{background:var(--orange);color:#203441}.secondary{background:white;border:1px solid var(--line)}.primary:hover{background:#f4b56b}.secondary:hover{background:#edf3f1}.row{display:flex;align-items:center;justify-content:space-between;gap:16px}.actions{display:flex;gap:10px;flex-wrap:wrap}.road{position:relative;min-height:230px;display:grid;place-items:center}.road:before{content:'';width:95px;height:360px;position:absolute;background:#254653;transform:rotate(28deg);border-left:2px solid #58717c;border-right:2px solid #58717c}.road:after{content:'';position:absolute;height:350px;transform:rotate(28deg);border-left:4px dashed #c3b98d}.sign-wrap{z-index:1;transform:rotate(-8deg);background:#f8b449;width:133px;height:133px;border-radius:18px;display:grid;place-items:center;box-shadow:0 14px 40px #061a28}.sign-wrap span{font-size:72px;font-weight:800;color:#173342}.hero-caption{position:absolute;bottom:1px;right:0;border-radius:40px;background:#e5f1e9;color:#246655;font-size:11px;padding:8px 16px;z-index:2}.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0;border:1px solid var(--line);border-radius:16px;background:#fff}.stat{padding:18px 22px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat b{font-size:24px;display:block;line-height:1.3}.stat span{font-size:12px;color:var(--muted)}.section-title{margin:30px 0 16px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:white;border:1px solid var(--line);padding:23px;border-radius:18px;text-align:left;display:block;width:100%}.card:hover{border-color:#6a9c90}.card p{font-size:14px;color:var(--muted);margin:12px 0}.icon{width:40px;height:40px;border-radius:12px;background:#eaf2ed;display:grid;place-items:center;color:var(--teal);font-weight:800}.card-footer{color:var(--teal);font-weight:700;font-size:13px}.note{font-size:12px;color:var(--muted);margin:23px 0;line-height:1.7}a{color:var(--teal)}nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 16px;box-shadow:0 6px 35px #17334218;z-index:5}nav button{border:0;background:transparent;min-width:80px;padding:6px 10px;font-size:21px;color:#77848a}nav span{display:block;font-size:11px;font-weight:600}nav button.active{color:var(--teal)}.panel{max-width:720px;margin:auto;background:white;border:1px solid var(--line);border-radius:22px;padding:30px}.back{border:0;background:none;padding:8px 0;color:var(--teal);font-size:14px}.progressbar{height:6px;background:#e9eeeb;border-radius:8px;margin:18px 0 28px;overflow:hidden}.progressbar div{height:100%;background:var(--teal)}.question{font-size:25px;margin:20px 0;line-height:1.4}.option{display:flex;gap:14px;align-items:center;width:100%;padding:17px;margin:10px 0;border:1px solid #d6dfdb;border-radius:12px;background:white;text-align:left;font-size:16px}.option i{font-style:normal;font-size:13px;border:1px solid var(--line);border-radius:7px;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}.option.selected{border-color:var(--teal);background:#edf6f1}.option.correct{border-color:#25805d;background:#edf8f1}.option.wrong{border-color:#b65a4d;background:#fff1ed}.feedback{margin:20px 0;padding:18px;border-radius:12px;background:#eff5f1}.feedback p{margin:6px 0}.feedback a{font-size:12px}.smallbtn{border:1px solid var(--line);border-radius:10px;background:white;padding:9px 13px;font-size:13px;min-height:44px}.toggle{font-size:13px;display:flex;gap:8px;align-items:center}.toggle input{width:18px;height:18px;accent-color:var(--teal)}.wordgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wordgrid p{margin:8px 0;font-size:14px}.result-number{font-size:64px;letter-spacing:-3px;color:var(--teal);font-weight:800}.review{margin:18px 0;border-top:1px solid var(--line);padding-top:18px}.review p{margin:7px 0}.pill{padding:5px 10px;background:#e9f0ea;border-radius:30px;font-size:12px}.topicline{padding:17px 0;border-bottom:1px solid var(--line)}#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:12px;padding:12px 20px;z-index:10;display:none;max-width:90vw}.sign{margin:15px auto;width:90px;height:90px;display:grid;place-items:center;font-size:23px;font-weight:800;color:white;background:#b62c2d;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}.sign.yield{clip-path:polygon(0 0,100% 0,50% 100%);padding-bottom:28px;font-size:18px}.empty{padding:30px;text-align:center}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}footer{font-size:11px;color:var(--muted);padding-top:20px}@media(max-width:650px){header{padding:18px 20px}.badge{font-size:9px;padding:6px 9px}main{padding:0 17px 115px;margin:20px auto}.hero{padding:26px;grid-template-columns:1fr}.hero h1{font-size:35px}.road{display:none}.hero p{font-size:15px}.cards{grid-template-columns:1fr}.card{padding:20px}.stats{margin:16px 0}.stat{padding:14px 10px}.stat b{font-size:22px}.stat span{font-size:11px}.panel{padding:22px 18px}.question{font-size:22px}.wordgrid{grid-template-columns:1fr}h1{font-size:31px}nav{bottom:10px;width:calc(100% - 34px);justify-content:space-around;padding:4px}nav button{min-width:65px}.row{gap:10px;flex-wrap:wrap}.hero .primary{width:100%}.actions .primary{flex-grow:1}h2{font-size:24px}}
.visual-figure{margin:0 0 18px;background:#f0f4ef;border:1px solid #e1e8e2;border-radius:14px;overflow:hidden}.visual-figure svg{display:block;width:100%;height:190px;max-width:100%;margin:auto}.visual-figure figcaption{padding:8px 12px 12px;font-size:12px;color:#54686d;line-height:1.4}.art-expand{display:block;width:100%;border:0;padding:0;background:transparent;text-align:center}.art-expand span{display:block;padding:5px;font-size:11px;color:#54776e}.visual-tabs{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0}.art-dialog{border:0;border-radius:20px;padding:22px;max-width:640px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 15px 70px #0004}.art-dialog::backdrop{background:#102b3dd1}.art-dialog svg{width:100%;display:block;max-height:65vh}.art-dialog p{font-size:14px}.art-dialog .close-art{display:block;margin-left:auto}.lesson-visuals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}.lesson-visuals svg{height:115px}.lesson-visuals .visual-figure{margin:0}.lesson-visuals figcaption{text-transform:capitalize}.panel>.visual-figure{max-width:400px;margin:12px auto 22px}.visual-figure button:hover{background:#e5eee6}@media(max-width:650px){.lesson-visuals{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-figure svg{height:180px}.visual-tabs .primary{width:100%}.art-dialog{padding:15px}.lesson-visuals svg{height:110px}}
body.welcome-screen{background:#122f3f;color:#fff}body.welcome-screen>header,body.welcome-screen>nav{display:none}body.welcome-screen main{margin:0 auto;padding:30px 24px;min-height:100svh;display:grid;place-items:center}.welcome{text-align:center;max-width:760px}.welcome h1{font-size:clamp(32px,6vw,62px);line-height:1.2;letter-spacing:-1.8px;text-wrap:balance;margin:0 0 42px}.welcome-enter{height:68px;width:68px;display:inline-grid;place-items:center;border:0;border-radius:50%;background:var(--orange);color:var(--ink);box-shadow:0 8px 26px #0002}.welcome-enter svg{width:32px;height:32px}.welcome-enter:hover{background:#f4b56b;transform:translateY(-2px)}