:root{color-scheme:dark;--ink:#e8f8eb;--muted:#b3ccbd;--accent:#c8f36c;--teal:#193e37;--panel:#173c34;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0d2826;color:var(--ink)}body{background:radial-gradient(circle at 85% 8%,#265a47 0,transparent 35%),#102c2a}.shell{min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,4vw,56px);border-bottom:1px solid #ffffff19;background:#0d2624}.brand{display:flex;gap:10px;align-items:center;color:white;text-decoration:none;font-size:1.08rem;font-weight:900;letter-spacing:.13em}.brand small{display:block;font-size:.51rem;letter-spacing:.2em;color:#a3caa3}.brand-leaf{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#d3f77d;color:#163e30;font-size:1.3rem}.top-actions{display:flex;gap:8px}.icon-btn,.back,.hint,.secondary{border:1px solid #ffffff2b;background:#ffffff0c;color:#e7f7e9;border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer;font-weight:700}.icon-btn:hover,.back:hover,.secondary:hover{background:#ffffff1c}button:focus-visible,a:focus-visible{outline:3px solid #f8e786;outline-offset:3px}button:disabled{cursor:not-allowed}main{width:100%;max-width:1440px;margin:auto;flex:1;padding:28px clamp(16px,4vw,56px) 50px}main:focus{outline:none}.hero{position:relative;min-height:390px;overflow:hidden;border:1px solid #8ab77c55;border-radius:26px;background:#235a42;display:flex;align-items:center}.hero-art{position:absolute;inset:0;background:linear-gradient(90deg,#173d31 0%,#1c5441e8 45%,#5d9c65aa 100%),linear-gradient(#9cdbc1,#3c8560);overflow:hidden}.sun{position:absolute;right:15%;top:12%;width:125px;height:125px;border-radius:50%;background:#f2eaa4;box-shadow:0 0 80px #e3eea6}.hill{position:absolute;width:90%;height:55%;border-radius:50%;right:-20%;bottom:-20%;background:#2f7050}.hill-front{right:-35%;bottom:-33%;background:#245d41}.cloud{position:absolute;width:100px;height:22px;border-radius:50px;background:#eaf8da88;right:35%;top:18%;filter:blur(2px)}.cloud-two{right:8%;top:34%;transform:scale(.7)}.hero-tree{position:absolute;right:13%;bottom:10%;font-size:clamp(100px,15vw,220px);filter:drop-shadow(0 12px 6px #173b2d80);animation:sway 4s ease-in-out infinite;transform-origin:bottom}.hero-explorer{position:absolute;right:34%;bottom:7%;font-size:clamp(65px,9vw,130px);filter:drop-shadow(0 8px 6px #163b2e88);animation:bob 3s ease-in-out infinite}.hero-drone{position:absolute;right:36%;top:31%;display:grid;place-items:center;border-radius:50%;width:44px;height:44px;background:#bcecd4;color:#245a4a;box-shadow:0 0 20px #a3ffb5;animation:bob 2.8s ease-in-out infinite}.hero-flowers{position:absolute;right:4%;bottom:3%;font-size:clamp(25px,4vw,55px)}.hero-content{z-index:1;width:min(600px,62%);padding:clamp(26px,4vw,60px)}.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:900;color:#d2f493;text-transform:uppercase}.hero h1,.brief h1,.complete h1{font-size:clamp(2.1rem,4.5vw,4rem);line-height:1.03;letter-spacing:-.045em;margin:14px 0}.hero h1 em{color:#d9f395;font-style:normal}.hero-content>p:not(.eyebrow){font-size:1.05rem;line-height:1.65;color:#d6ead9;max-width:470px}.hero-buttons,.complete-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:24px}.primary,.next{min-height:50px;padding:0 22px;border:0;border-radius:12px;background:#d4f486;color:#183a2e;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #9dbf5b}.primary:hover,.next:hover{background:#e5ffa5}.hero-note{color:#def4d7;font-size:.85rem}.map-section{margin-top:35px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}.section-head h2{font-size:clamp(1.45rem,3vw,2.1rem);margin:4px 0}.section-head p:not(.eyebrow){margin:6px 0;color:var(--muted)}.progress-pill{background:#ffffff0b;border:1px solid #ffffff20;border-radius:50px;white-space:nowrap;padding:10px 14px;color:#d9efc8;font-size:.82rem;font-weight:800}.mission-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.mission-card{position:relative;display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:9px;min-height:210px;padding:17px;border:1px solid #9bc29640;border-radius:18px;color:white;background:linear-gradient(160deg,#376f4d,#193f33);cursor:pointer;font:inherit}.mission-card:hover:not(:disabled){transform:translateY(-3px);border-color:#d4f486}.mission-card:disabled{opacity:.52}.mission-card strong{font-size:1rem}.card-number{position:absolute;right:15px;top:15px;color:#d0e9c3;font-weight:900;font-size:.8rem}.card-icon{font-size:2.5rem;animation:bob 3s ease-in-out infinite}.card-place{color:#c7e6bd;text-transform:uppercase;font-weight:800;font-size:.65rem;letter-spacing:.1em}.card-status{margin-top:auto;color:#e1f2b9;font-size:.75rem;font-weight:700}.greenhouse{background:linear-gradient(150deg,#467b53,#214f3d)}.nursery{background:linear-gradient(150deg,#7d8545,#3a5834)}.wetland{background:linear-gradient(150deg,#3b8080,#254b4b)}.lookout{background:linear-gradient(150deg,#8b7650,#445637)}.learn-note{display:flex;gap:16px;align-items:start;margin-top:25px;border:1px solid #aecb9c33;border-radius:16px;padding:18px 20px;background:#ffffff09}.learn-note>span{font-size:1.6rem}.learn-note p{margin:4px 0;color:var(--muted);line-height:1.5}footer{text-align:center;color:#8eafa0;padding:20px;font-size:.75rem}.mission-shell{max-width:1100px;margin:auto}.back{margin-bottom:20px}.brief{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;border-radius:24px;padding:clamp(22px,5vw,55px);background:linear-gradient(140deg,#2f7253,#173f34);border:1px solid #a8ca9f44}.brief p{line-height:1.6;color:#d8ead9}.brief-art{min-height:300px;display:grid;place-items:center;background:radial-gradient(circle,#d1f39855,transparent 70%);position:relative}.dialogue{display:flex;gap:14px;align-items:center;border-radius:16px;padding:14px;background:#0b2c2777;margin:24px 0}.dialogue span{font-size:2.2rem}.dialogue p{margin:0;font-size:.93rem}.dialogue strong{color:#e1f9aa}.mission-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b9d3bb;font-size:.75rem;font-weight:900;letter-spacing:.1em}.task-layout{display:grid;grid-template-columns:minmax(220px, .7fr) minmax(0,1.5fr);gap:18px}.field-card,.question-card{border:1px solid #ffffff25;border-radius:22px;padding:clamp(22px,4vw,36px);background:#194137}.field-card p:not(.eyebrow){line-height:1.6;color:#d1e5d3;font-size:.94rem}.field-icon{font-size:5rem;display:inline-block;animation:bob 3s ease-in-out infinite}.steps{display:flex;gap:10px;margin-top:26px}.steps span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffff18;color:#c7dcca;font-weight:900}.steps .active,.steps .done{background:#dcf7a4;color:#184333}.question-card{background:#f4f9e9;color:#183d31}.question-top{display:flex;justify-content:space-between;gap:8px;color:#5b8064;font-size:.67rem;font-weight:900;letter-spacing:.08em}.question-card h1{font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.2;margin:20px 0}.specimen{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:#e1efcf;font-size:1.2rem}.specimen span{font-size:2.5rem}.choose-label{font-size:.78rem;font-weight:800;color:#567461}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice{min-height:53px;padding:12px 14px;border:2px solid #bfd4b7;border-radius:12px;background:#fff;color:#244e3d;text-align:left;font:inherit;font-weight:750;cursor:pointer}.choice:hover:not(:disabled){border-color:#488562;background:#edf8dc}.choice:disabled{opacity:.6}.hint{color:#346347;border-color:#bdd2b2;background:transparent;margin-top:16px}.hint-text{color:#35604b;background:#e5f2ce;padding:12px;border-radius:10px;line-height:1.5}.feedback{margin-top:14px;line-height:1.5}.feedback:empty{display:none}.feedback.retry,.feedback.success{padding:14px;border-radius:12px}.feedback.retry{background:#fff0d1;color:#765523}.feedback.success{background:#d8eec3;color:#1c5236}.feedback p{margin:5px 0 12px}.next{box-shadow:none;min-height:44px;background:#225c3d;color:#fff}.next:hover{background:#337c50}.complete{text-align:center;max-width:700px;margin:4vh auto;border:1px solid #ffffff2c;border-radius:24px;background:linear-gradient(145deg,#2e7052,#153b32);padding:clamp(28px,6vw,60px)}.celebrate{font-size:5rem;display:inline-block;animation:bob 2s infinite}.complete p:not(.eyebrow){color:#d0e8d3;line-height:1.7}.reward{display:inline-block;border-radius:30px;background:#d7f3a4;color:#26452d;padding:10px 17px;font-weight:800}.complete-actions{justify-content:center}
@keyframes bob{50%{transform:translateY(-8px)}}@keyframes sway{50%{transform:rotate(3deg)}}@media(max-width:850px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-card:last-child{grid-column:span 2}.hero-content{width:75%}.hero-art{opacity:.8}.hero-explorer{right:12%;opacity:.8}.hero-drone{right:12%}.hero-tree{right:-5%;opacity:.8}.task-layout{grid-template-columns:1fr}.field-card{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:center}.field-icon{grid-row:span 3;font-size:3rem}.field-card h2,.field-card p{margin:3px 0}.field-card p:not(.eyebrow){grid-column:1/-1;margin-top:12px}.steps{grid-column:1/-1;margin-top:12px}.brief-art{min-height:200px}}@media(max-width:560px){.topbar{padding:12px 14px}.brand{font-size:.85rem}.brand small{font-size:.45rem}.icon-btn{padding:0 10px;font-size:.8rem}.icon-btn span{display:none}main{padding:18px 14px 35px}.hero{min-height:420px;align-items:end}.hero-art{background:linear-gradient(0deg,#173d31 0%,#1c5441c9 65%,#5d9c65aa 100%)}.hero-content{width:100%;padding:25px}.hero-content>p:not(.eyebrow){font-size:.94rem}.hero-tree{font-size:120px;bottom:34%;right:-3%}.hero-explorer{font-size:70px;bottom:44%;right:25%}.hero-drone{top:15%;right:23%}.hero-flowers{bottom:35%}.section-head{align-items:start;flex-direction:column}.mission-grid{gap:9px}.mission-card{min-height:190px;padding:13px}.mission-card strong{font-size:.94rem}.brief{grid-template-columns:1fr;gap:0}.brief-art{min-height:140px}.brief h1{font-size:2.2rem}.choices{grid-template-columns:1fr}.question-top{font-size:.6rem}.question-card,.field-card{padding:20px}.question-card h1{font-size:1.4rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.grade-picker{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 25px}.grade-picker>span{font-size:.69rem;font-weight:900;letter-spacing:.12em;color:#b5d7b8;margin-right:8px}.grade-button{border:1px solid #8fbc9970;background:#173e34;color:#e4f4df;border-radius:50px;min-height:44px;padding:0 18px;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer}.grade-button[aria-pressed=true]{color:#193e2c;background:#d4f486;border-color:#d4f486}.sequence-trail{background:#e1efcf;border-radius:12px;padding:16px;color:#285c3d;font-weight:850;line-height:1.6;overflow-wrap:anywhere}.savanna{background:linear-gradient(150deg,#9b844a,#3e633e)}.studio{background:linear-gradient(150deg,#51877c,#23483d)}.grassland{background:linear-gradient(150deg,#8b9b49,#345a3b)}.butterfly{background:linear-gradient(150deg,#8b70a1,#405c58)}.river{background:linear-gradient(150deg,#508e90,#24544c)}

.solar{background:linear-gradient(150deg,#79994d,#28624b)}.nutrition{background:linear-gradient(150deg,#ad8452,#526b43)}.kitchen{background:linear-gradient(150deg,#b08957,#536848)}.fynbos{background:linear-gradient(150deg,#867da0,#365f58)}.web{background:linear-gradient(150deg,#5e8c77,#264e40)}

.planet{background:linear-gradient(150deg,#447b9a,#225c51)}.archive{background:linear-gradient(150deg,#7d719b,#365b57)}.wildlife{background:linear-gradient(150deg,#987c4b,#375d43)}.seedgarden{background:linear-gradient(150deg,#658947,#285c51)}.pollinator{background:linear-gradient(150deg,#a07483,#55683d)}
/* Keep decorative artwork separate from readable copy on small phones. */
@media(max-width:560px){.hero{display:block;min-height:0}.hero-art{position:relative;height:180px;opacity:1;background:linear-gradient(#5d9c65,#235a42)}.hero-content{position:relative;padding:25px}.hero-tree{bottom:0;right:3%;opacity:1}.hero-explorer{bottom:0;right:43%;opacity:1}.hero-drone{top:18%;right:43%}.hero-flowers{bottom:0}.sun{width:75px;height:75px;top:8%;right:15%}}

.g8-garden{background:linear-gradient(150deg,#88a958,#305e43)}.g8-lab{background:linear-gradient(150deg,#569890,#285051)}.g8-wetland{background:linear-gradient(150deg,#568c8b,#284f4b)}.g8-grassland{background:linear-gradient(150deg,#a39752,#49673b)}.g8-river{background:linear-gradient(150deg,#619a94,#30554b)}

.g9-cells{background:linear-gradient(150deg,#577e9b,#244d50)}.g9-systems{background:linear-gradient(150deg,#7d739c,#394f60)}.g9-oxygen{background:linear-gradient(150deg,#497e91,#295454)}.g9-digestion{background:linear-gradient(150deg,#98784f,#4f6140)}.g9-reproduction{background:linear-gradient(150deg,#8b728c,#405e57)}

.g10-molecules{background:linear-gradient(150deg,#487c91,#263f59)}.g10-membranes{background:linear-gradient(150deg,#427d80,#254a53)}.g10-growth{background:linear-gradient(150deg,#7b7199,#3e4c62)}.g10-transport{background:linear-gradient(150deg,#638348,#31513e)}.g10-archive{background:linear-gradient(150deg,#907246,#4c493a)}

/* Illustrated expedition scenes. Decorative assets never sit behind learning text. */
.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:420px;background:#173d31}
.hero-art{position:relative;inset:auto;order:2;width:100%;height:100%;min-height:420px;opacity:1;background:#2e6752}
.hero-content{order:1;width:100%;padding:clamp(26px,4vw,52px)}
.scene{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;background:linear-gradient(145deg,#5b9471,#173d39);border-radius:16px;min-width:0}
.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-2}
.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#092a3b55,transparent 55%);z-index:-1;pointer-events:none}
.home-scene{width:100%;height:100%;min-height:420px;border-radius:0}
.scene-glow{position:absolute;width:12px;height:12px;border-radius:50%;right:12%;top:25%;background:#dafb94;box-shadow:0 0 24px 6px #e8ff9f80;opacity:.6;animation:firefly 7s ease-in-out infinite;pointer-events:none}
.sprite{position:absolute;display:block;bottom:0;pointer-events:none;background-repeat:no-repeat;filter:drop-shadow(0 8px 7px #0e242b55)}
.sprite.nala{height:min(86%,100cqw);width:auto;aspect-ratio:3/4;left:5%;background-image:url('assets/sprites/nala.webp');background-size:400% 100%;animation:nala-frames 3.6s steps(1,end) infinite}
.sprite.pip{height:min(30%,30cqw);width:auto;aspect-ratio:1;right:8%;bottom:45%;background-image:url('assets/sprites/pip.webp');background-size:400% 100%;animation:pip-frames 2.8s steps(1,end) infinite,pip-hover 3.2s ease-in-out infinite}
@keyframes nala-frames{0%,100%{background-position:0 0}25%{background-position:33.3333% 0}50%{background-position:66.6667% 0}75%{background-position:100% 0}}
@keyframes pip-frames{0%,100%{background-position:0 0}25%{background-position:33.3333% 0}50%{background-position:66.6667% 0}75%{background-position:100% 0}}
@keyframes pip-hover{50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes firefly{50%{opacity:.15;transform:translate(-35px,20px)}}
.mission-card{padding:14px;overflow:hidden;min-height:265px;gap:10px;transition:transform .18s,border-color .18s;background:#1b453b}
.mission-card:disabled{opacity:.7}
.card-landscape{display:block;flex-shrink:0;width:calc(100% + 28px);margin:-14px -14px 3px;aspect-ratio:1.6;background:linear-gradient(130deg,#5a9569,#25524a);overflow:hidden}
.card-landscape img{display:block;width:100%;height:100%;object-fit:cover}
.card-number{z-index:1;top:9px;right:9px;border-radius:8px;padding:5px 8px;background:#102c2aed;color:#f2ffda}
.card-place{font-size:.65rem;color:#d0e9c3}
.brief{padding:clamp(18px,3vw,34px);gap:30px;align-items:stretch}
.brief-art{min-height:360px;display:block;align-self:stretch;background:linear-gradient(145deg,#5b9471,#173d39)}
.dialogue-marker{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border:1px solid #d6efab80;border-radius:50%;background:#37614a;color:#edf8c3;font-size:1.15rem!important;font-weight:900}
.field-card{overflow:hidden;padding:24px;display:block}
.field-scene{height:190px;margin:-24px -24px 22px;border-radius:20px 20px 0 0}
.field-scene .sprite.nala{height:min(91%,100cqw);width:auto;left:13%}
.field-scene .sprite.pip{height:min(33%,30cqw);width:auto;right:12%;bottom:42%}
.hint{display:inline-flex;align-items:center;gap:8px;padding:6px 14px}
.pip-hint{width:28px;height:28px;background:url('assets/sprites/pip.webp') no-repeat 0 0 / 400% 100%;flex:none}
.complete{overflow:hidden;padding-top:0}
.complete-scene{height:270px;margin:0 calc(-1 * clamp(28px,6vw,60px)) 30px;border-radius:23px 23px 0 0}
.complete-scene .sprite.nala{width:auto;left:23%;height:min(95%,100cqw)}
.complete-scene .sprite.pip{width:auto;right:22%;height:min(36%,30cqw)}
@media(max-width:850px){
 .hero{grid-template-columns:1fr 1fr}.hero-content{width:100%;padding:28px}.hero-art,.home-scene{min-height:420px}
 .brief{grid-template-columns:1fr 1.1fr;gap:22px}.brief-art{min-height:320px}
 .field-card{display:block}.field-scene{height:190px;margin:-24px -24px 18px}
 .field-scene .sprite.nala{width:auto;left:calc(50% - 125px)}.field-scene .sprite.pip{width:auto;right:calc(50% - 140px)}
}
@media(max-width:560px){
 .hero{display:flex;flex-direction:column;min-height:0}.hero-art{order:0;height:220px;min-height:220px;flex:none}.home-scene{height:220px;min-height:220px}
 .hero-content{order:1;padding:25px}.home-scene .sprite.nala{width:auto;left:14%;height:min(96%,100cqw)}.home-scene .sprite.pip{width:auto;right:17%;height:min(32%,30cqw)}
 .mission-card{padding:12px;min-height:245px}.card-landscape{width:calc(100% + 24px);margin:-12px -12px 1px;aspect-ratio:1.25}
 .mission-card strong{font-size:.95rem;line-height:1.25}.card-place{font-size:.58rem;line-height:1.4}.card-status{font-size:.68rem;line-height:1.45}
 .brief{grid-template-columns:1fr;padding:18px;gap:16px}.brief-art{min-height:240px;height:240px}.brief h1{font-size:2.1rem}
 .field-card{padding:20px}.field-scene{height:160px;margin:-20px -20px 16px}.field-scene .sprite.nala{width:auto;left:calc(50% - 100px)}.field-scene .sprite.pip{width:auto;right:calc(50% - 115px)}
 .complete-scene{height:230px}.complete-scene .sprite.nala{width:auto;left:10%}.complete-scene .sprite.pip{width:auto;right:15%}
}
@media(prefers-reduced-motion:reduce){.sprite,.scene-glow{animation:none!important;transform:none!important}.mission-card{transition:none}}