@font-face{font-family:Nunito;src:url(nunito.woff2);font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f5f9fc;color:#18384a;font:18px/1.85 Nunito,system-ui,sans-serif}header,main,footer{max-width:1150px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.brand{font-weight:950;font-size:27px;text-decoration:none}.brand span{font-size:14px;display:block;color:#537586}nav,.actions{display:flex;gap:12px;flex-wrap:wrap}nav a{padding:8px 12px;text-decoration:none;color:#2b5b70;font-weight:800}a{color:#176381}.hero{background:linear-gradient(125deg,#dff4ec,#e2f1ff 65%,#fff0d7);padding:clamp(24px,5vw,48px);border:1px solid #c1dcd9;border-radius:28px}.hero h1{font-size:clamp(30px,5vw,53px);line-height:1.2;margin:14px 0 20px}.hero p{max-width:78ch}.eyebrow{font-size:12px;color:#307871;font-weight:900;letter-spacing:.07em}.button,button{font:inherit;display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:11px 18px;border:1px solid #9bbbc6;border-radius:13px;background:white;color:#215367;cursor:pointer;text-decoration:none}.primary{background:#19756f;color:white;border-color:#19756f}.summary{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}.summary span{flex:1 1 190px;background:white;border:1px solid #d1e0e8;border-radius:16px;padding:18px}.summary b{font-size:25px;margin-right:8px;color:#187970}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}.card{background:white;border:1px solid #cbdde4;border-radius:22px;padding:25px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 25px #235f6a08}.card:hover{border-color:#328d88}.card h2{font-size:23px;line-height:1.4;margin:0}.number{background:#e1f4ed;color:#1d7770;border-radius:12px;padding:8px 12px;align-self:flex-start;font-weight:900}.panel{margin:26px 0;padding:clamp(18px,3vw,30px);background:white;border:1px solid #cbdde4;border-radius:23px}h2,h3{line-height:1.4}figure{margin:18px 0}figure img{display:block;width:100%;height:auto;border-radius:18px;background:#edf6f4}figcaption{font-size:14px;color:#536e80;margin-top:12px}.steps{padding-left:25px}.steps li{padding:8px}.sign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;margin:24px 0}.sign{border:1px solid #cbdde4;border-radius:18px;padding:20px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.sign img{max-width:180px;width:100%;height:156px}.sign p{font-size:14px}.question{padding:20px 0;border-top:1px solid #d9e4eb}.options{display:grid;gap:10px}.options button{text-align:left;width:100%;justify-content:flex-start}.options button span{display:grid;place-items:center;border-radius:8px;background:#eaf2f6;min-width:30px;height:30px;font-weight:850}.options .wrong{border-color:#bb5d40;background:#fff2eb}.options .right{border-color:#26815f;background:#e5f5ec}.feedback{padding:16px;background:#edf5fa;border-radius:13px;overflow-wrap:anywhere}.note,.source{padding:20px;border-left:4px solid #daac48;background:#fff4dc;border-radius:12px;margin:24px 0}.source{font-size:15px;background:#edf4fa;border-color:#71a1bd}.stop-line{display:flex;flex-wrap:wrap;gap:18px;padding:24px;background:#526475;color:white;border-radius:15px}.stop-line b{border-left:8px solid white;padding-left:14px}.actions{margin:24px 0}.card:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #8559be;outline-offset:4px}button:disabled{cursor:default}footer{font-size:14px;color:#536e80}body{overflow-wrap:anywhere}img{max-width:100%}@media(max-width:500px){header,main,footer{padding:16px}.hero{border-radius:22px}.options button{padding:12px;font-size:16px}.sign-grid{grid-template-columns:1fr}.card{padding:20px}}
/* Illustrated learning stories, one clear situation per picture. */
.picture-story{margin:28px 0;padding:clamp(18px,3vw,30px);border:1px solid #c8dbe4;border-radius:26px;background:linear-gradient(135deg,#eaf6f0,#edf3ff)}.story-heading h2{margin:8px 0 12px}.story-heading p{font-size:16px;color:#4e6c7b;max-width:75ch}.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}.story-card{position:relative;margin:0;background:white;border:1px solid #c5d9e4;border-radius:21px;overflow:hidden;box-shadow:0 10px 24px #28556b0a}.story-card>img{width:100%;height:auto;display:block;border-radius:0;background:#e8f4f4}.story-card figcaption{padding:20px;margin:0;font-size:16px;color:#496777}.story-card figcaption strong{display:block;color:#194655;font-size:20px;line-height:1.4}.story-card figcaption p{margin:10px 0 0}.story-step{position:absolute;top:10px;left:10px;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#1c7168;font-weight:900;box-shadow:0 3px 12px #29485825}.lesson-cover{width:calc(100% + 50px);max-width:none;height:175px;object-fit:cover;margin:-25px -25px 6px;border-radius:21px 21px 0 0}.card{overflow:hidden}.welcome-map{display:block;float:right;width:37%;height:auto;margin:0 0 24px 28px;border-radius:22px;border:4px solid #ffffffa8;box-shadow:0 12px 28px #2a667320}.has-map:after{content:'';display:block;clear:both}.hero.has-map h1{font-size:clamp(30px,4.5vw,48px)}.sign{box-shadow:0 10px 24px #28556b08}.panel>figure{border:1px solid #d2e1e6;border-radius:20px;padding:12px;background:#f8fbfd}.panel>figure figcaption{padding:4px 8px}nav a:hover{background:#e3f1f0;border-radius:10px}@media(max-width:700px){.welcome-map{float:none;width:100%;max-width:420px;margin:0 auto 24px}.hero.has-map{padding:22px}.story-grid{grid-template-columns:1fr}}@media(max-width:500px){.lesson-cover{width:calc(100% + 40px);margin:-20px -20px 6px}.story-card figcaption{padding:16px}}