:root{--ink:#17302a;--ink2:#41564f;--paper:#fffaf0;--paper2:#fff3d6;--leaf:#1f6f46;--leaf2:#2c9a62;--sun:#ffc83d;--sky:#cfeaff;--board:#1f4d3a;--board2:#173b2c;--line:#e8dcb8;--sh:0 10px 30px rgba(31,77,58,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
html,body{margin:0}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.brand,.btn,.nb,.tab,.fact b,.flow b{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance;line-height:1.08;margin:0 0 .5em}
p{margin:0 0 .8em}
.wrap{width:min(1180px,100%);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.eyebrow{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin:0 0 .5em}
.prog{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,#3f6a92,#00aeef,#ffc345,#cc4b37,#e8707a,#3bb54a);z-index:60}
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;gap:12px;padding:10px clamp(16px,3vw,28px);font-size:.82rem;font-weight:700;color:var(--ink);background:linear-gradient(rgba(255,250,240,.92),rgba(255,250,240,0));pointer-events:none}
.brand{color:var(--leaf);font-size:1.05rem}.bar-r{color:var(--ink2);text-align:right}
@media(max-width:560px){.bar-r{display:none}}
/* prologue */
.pro{position:relative;height:620vh;background:var(--sky)}
.stick{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:linear-gradient(#a9dcff 0%,#e4f4ff 55%,#fff3d6 100%)}
#cw{position:absolute;inset:0;width:100%;height:100%;display:block}
.pcards{position:absolute;inset:0;pointer-events:none}
.pcard{position:absolute;left:clamp(16px,5vw,64px);top:50%;width:min(430px,calc(100% - 32px));transform:translateY(-46%);background:rgba(255,250,240,.94);border:3px solid var(--ink);border-radius:26px;padding:22px 24px;box-shadow:8px 8px 0 rgba(23,48,42,.9);opacity:0;visibility:hidden;transition:opacity .5s,transform .5s,visibility .5s}
.pcard.on{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto}
.pcard h1{font-size:clamp(2.2rem,5.2vw,3.5rem);color:var(--leaf)}
.pcard h2{font-size:clamp(1.6rem,3.2vw,2.1rem)}
.pcard .lead{font-size:1.08rem}
.scrollhint{font-weight:800;color:var(--leaf);margin:0}.scrollhint span{display:inline-block;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.say{background:var(--paper2);border-radius:16px;padding:10px 14px;border:2px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}.chips span{background:var(--leaf);color:#fff;border-radius:99px;padding:3px 12px;font-weight:700;font-size:.82rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px}.ticks li{position:relative;padding-left:28px;font-size:.98rem}.ticks li:before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--leaf2);box-shadow:inset 0 0 0 4px var(--paper)}
.seclist{list-style:none;padding:0;margin:.4em 0 1em;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seclist li{display:flex;gap:8px;align-items:center;font-weight:800;font-size:.86rem;line-height:1.15}.seclist i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-style:normal;font-family:'Baloo 2',sans-serif}
.btn{display:inline-block;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:99px;padding:6px 20px;text-decoration:none;font-size:1.02rem;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}.btn:hover{transform:translate(-1px,-1px)}
.dots-p{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.dots-p i{width:11px;height:11px;border-radius:50%;background:rgba(23,48,42,.25);transition:.3s}.dots-p i.on{background:var(--leaf);transform:scale(1.5)}
@media(max-width:760px){
 .pcard{left:16px;right:16px;top:auto;bottom:16px;width:auto;transform:translateY(20px);padding:16px 18px;max-height:56dvh;overflow:auto;box-shadow:5px 5px 0 rgba(23,48,42,.9)}
 .pcard.on{transform:none}.dots-p{display:none}
 .pcard h1{font-size:2rem}.pcard h2{font-size:1.4rem}.pcard p,.ticks li{font-size:.92rem}
}
/* framework */
.frame{background:var(--board);color:#f3f7ee;padding:clamp(56px,9vw,110px) 0;position:relative}
.frame:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.06),transparent 40%),repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.025) 38px 39px);pointer-events:none}
.eyebrow.chalk{color:#ffe08a}.chalk-h{font-size:clamp(1.8rem,4.4vw,3rem);max-width:20ch;color:#fff}.chalk-h2{color:#ffe08a;font-size:1.5rem;margin:2.2em 0 .7em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:1.6em 0 2em}
.fact{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.35);border-radius:20px;padding:16px;text-align:center}.fact b{display:block;font-size:clamp(2.2rem,5vw,3.4rem);color:#ffe08a;line-height:1}.fact span{font-size:.92rem;opacity:.9}
.secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sec{background:#fffaf0;color:var(--ink);border-radius:20px;padding:16px 18px 18px;border-top:10px solid var(--c);position:relative}
.sec .k{position:absolute;right:14px;top:6px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:2.6rem;color:var(--c);opacity:.25;line-height:1}
.sec h3{font-size:1.25rem;margin:0 0 .15em}.sec .m{font-weight:800;font-size:.8rem;color:var(--ink2)}.sec p{font-size:.92rem;margin:.5em 0 0}
.flow{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:0}
.flow li{counter-increment:s;background:rgba(255,255,255,.08);border-radius:18px;padding:16px;position:relative}
.flow li:before{content:counter(s);position:absolute;right:12px;top:6px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:2.3rem;color:rgba(255,224,138,.4)}
.flow b{display:block;font-size:1.3rem;color:#ffe08a}.flow span{font-size:.92rem}
.note.chalk{margin-top:1.4em;color:#d3e6d0;font-size:.95rem}
@media(max-width:900px){.facts{grid-template-columns:1fr 1fr}.secgrid{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.secgrid,.flow{grid-template-columns:1fr}}
/* mission */
.mission{padding:clamp(56px,8vw,100px) 0;background:linear-gradient(#fffaf0,#e7f5ff 60%,#fffaf0)}
.mission h2,.close h2{font-size:clamp(1.9rem,4.6vw,3.1rem);max-width:22ch}.sub{max-width:62ch;color:var(--ink2)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:1.2em 0 1.2em}
.tab{border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:99px;padding:4px 16px;font-size:.98rem;cursor:pointer;display:flex;gap:8px;align-items:center;transition:transform .15s;box-shadow:3px 3px 0 var(--ink)}
.tab i{width:22px;height:22px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;font-style:normal;font-size:.8rem}
.tab.on{background:var(--c);color:#fff;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.tab.on i{background:#fff;color:var(--c)}
.tab.y.on{color:var(--ink)}
.player{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.stagebox{position:sticky;top:14px;background:linear-gradient(#bfe6ff,#fff3d6);border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 rgba(23,48,42,.9)}
#cm{display:block;width:100%;height:min(66vh,560px);min-height:340px;cursor:grab;touch-action:pan-y}#cm:active{cursor:grabbing}
.stagebar{display:flex;gap:8px;justify-content:space-between;padding:10px 12px;background:rgba(255,250,240,.96);border-top:3px solid var(--ink)}
.nb{border:3px solid var(--ink);background:var(--sun);color:var(--ink);border-radius:99px;padding:3px 16px;cursor:pointer;font-size:1rem;box-shadow:2px 2px 0 var(--ink)}.nb:active{transform:translate(2px,2px);box-shadow:none}
.nb.tour{background:#fff}.nb.tour[aria-pressed=true]{background:var(--leaf);color:#fff}
.track{display:flex;flex-wrap:wrap;gap:3px 10px;padding:8px 12px 12px;background:rgba(255,250,240,.96)}
.track .g{display:flex;gap:3px;align-items:center}
.track button{width:13px;height:13px;border-radius:50%;border:0;background:var(--c);opacity:.35;cursor:pointer;padding:0;transition:.2s}.track button.on{opacity:1;transform:scale(1.6);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}.track button:hover{opacity:.8}
.acard{background:#fffdf6;border:3px solid var(--ink);border-radius:26px;padding:20px 22px 22px;box-shadow:8px 8px 0 rgba(23,48,42,.9);min-width:0}
.acard.swap>*{animation:rise .5s both}.acard.swap>*:nth-child(2){animation-delay:.05s}.acard.swap>*:nth-child(3){animation-delay:.1s}.acard.swap>*:nth-child(4){animation-delay:.15s}.acard.swap>*:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.atop{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:.5em;flex-wrap:wrap}
.abadge{display:inline-flex;gap:8px;align-items:center;background:var(--c);color:#fff;border-radius:99px;padding:2px 14px 2px 4px;font-weight:800;font-size:.86rem}.abadge.y{color:var(--ink)}.abadge b{background:#fff;color:var(--c);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'Baloo 2',sans-serif}
.acount{font-weight:800;color:var(--ink2);font-size:.86rem}
.acard h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.achips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1em}.achips span{border:2px solid var(--ink);border-radius:99px;padding:0 11px;font-weight:800;font-size:.8rem;background:#fff}.achips .pt{background:var(--sun)}.achips .st{background:#d8f2dc}
.dlg{display:grid;gap:10px;margin-bottom:1em}
.bub{display:flex;gap:10px;align-items:flex-start}.bub p{margin:0;padding:9px 13px;border-radius:6px 18px 18px 18px;font-size:.96rem;line-height:1.5;min-width:0;background:#e3f5e8;border:2px solid #b7dfc3}
.bub.s p{background:#fff1c9;border-color:#f0d78a}
.av{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-style:normal;font-family:'Baloo 2',sans-serif;font-weight:800;color:#fff;background:#8a5a2b}
.av.w{background:linear-gradient(135deg,#2c9a62,#1f6f46);position:relative}.av.w:after{content:"";width:14px;height:18px;border-radius:70% 0 70% 0;background:#ffc83d;transform:rotate(25deg)}
.file{margin:0;display:grid;gap:8px;border-top:2px dashed var(--line);padding-top:12px}.file div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px}.file dt{font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf);padding-top:2px}.file dd{margin:0;font-size:.93rem}
@media(max-width:920px){.player{grid-template-columns:1fr}.stagebox{position:relative;top:0}#cm{height:56vw;min-height:300px}.file div{grid-template-columns:1fr;gap:0}}
/* close */
.close{padding:clamp(56px,8vw,100px) 0;background:var(--paper2)}
.bars{display:grid;gap:12px;margin:1.6em 0 .8em;max-width:820px}
.brow{display:grid;grid-template-columns:150px minmax(0,1fr) 70px;gap:12px;align-items:center}.brow b{font-family:'Baloo 2',sans-serif;font-size:1rem;line-height:1.1}
.bt{height:26px;border-radius:99px;background:#fff;border:2px solid var(--ink);overflow:hidden;position:relative}.bt i{position:absolute;left:0;top:0;bottom:0;border-radius:99px 0 0 99px;background:var(--c);opacity:.35;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}.bt u{position:absolute;left:0;top:0;bottom:0;background:var(--c);width:0;transition:width 1.4s .2s cubic-bezier(.2,.8,.2,1);text-decoration:none}
.brow span{font-weight:800;font-size:.86rem;text-align:right}
.legend{font-size:.82rem;color:var(--ink2)}.legend i{display:inline-block;width:14px;height:14px;border-radius:5px;background:#3f6a92;margin:0 6px -2px 14px}.legend i:first-child{margin-left:0}.legend .l1{opacity:.35}
@media(max-width:620px){.brow{grid-template-columns:1fr 60px;gap:4px 10px}.brow .bt{grid-column:1/3;order:3}}
.pledge{margin-top:2em;background:var(--board);color:#f3f7ee;border-radius:26px;padding:26px 28px;max-width:820px;box-shadow:8px 8px 0 rgba(23,48,42,.9);border:3px solid var(--ink)}.pledge h3{color:#ffe08a;font-size:1.5rem}.pledge p{font-size:1.04rem}.pledge .small{font-size:.86rem;opacity:.85;margin:0}
.foot{background:var(--board2);color:#cfe3cd;padding:26px clamp(16px,4vw,32px);text-align:center;font-size:.92rem}.foot p{margin:0 auto .4em;max-width:80ch}.foot .src{font-size:.78rem;opacity:.75}
.nogl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-weight:800}
/* fade-in */
.js .fx{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}.js .fx.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .fx{opacity:1;transform:none;transition:none}.pcard,.acard.swap>*{transition:none;animation:none}}

.side{display:grid;gap:16px;min-width:0}
.alist{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.alist button{display:flex;gap:8px;align-items:center;text-align:left;border:3px solid var(--ink);background:#fff;border-radius:16px;padding:6px 10px;cursor:pointer;font:700 .84rem/1.2 'Nunito',sans-serif;color:var(--ink);box-shadow:2px 2px 0 var(--ink);min-width:0}
.alist button b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:.85rem}
.alist button.y b{color:var(--ink)}
.alist button span{min-width:0}
.alist button.on{background:var(--c);color:#fff;transform:translate(2px,2px);box-shadow:none}.alist button.on.y{color:var(--ink)}.alist button.on b{background:#fff;color:var(--c)}

.easy{padding:clamp(56px,8vw,100px) 0;background:linear-gradient(#fffaf0,#fff3d6)}.easy h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.easybox{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:22px;align-items:start;margin-top:1.4em}
.estage{position:sticky;top:14px;border:3px solid var(--ink);border-radius:26px;overflow:hidden;background:linear-gradient(#bfe6ff,#fff3d6);box-shadow:8px 8px 0 rgba(23,48,42,.9)}
#ce{display:block;width:100%;height:min(60vh,480px);min-height:300px}
.elist{display:grid;gap:14px;min-width:0}.egrp h3{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin:0 0 6px}.egrp h3 i{width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-style:normal;font-size:.8rem}.egrp h3 span{margin-left:auto;font-size:.8rem;color:var(--ink2)}
.egrp div{display:flex;flex-wrap:wrap;gap:6px}
.egrp button{border:3px solid var(--ink);background:#fff;border-radius:99px;padding:3px 12px;font:700 .84rem/1.25 'Nunito',sans-serif;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);text-align:left}
.egrp button:hover{background:var(--c);color:#fff}.egrp.y button:hover{color:var(--ink)}.egrp button b{color:var(--leaf);margin-left:4px}.egrp button:hover b{color:inherit}
@media(max-width:920px){.easybox{grid-template-columns:1fr}.estage{position:relative;top:0}#ce{height:62vw}}

.stars{padding:clamp(56px,8vw,100px) 0;background:linear-gradient(#e9f6ff,#cfe9f7)}.stars h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.starbox{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.4em}
.sstage{border:3px solid var(--ink);border-radius:26px;overflow:hidden;background:#bfe6ff;box-shadow:8px 8px 0 rgba(23,48,42,.9);position:sticky;top:14px}
#cs{display:block;width:100%;height:min(62vh,500px);min-height:300px}
.sbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:#fff;border-top:3px solid var(--ink)}
.sbar button{border:3px solid var(--ink);background:#fff;border-radius:99px;padding:5px 14px;font:800 .85rem 'Nunito',sans-serif;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}.sbar button.on{background:#ffc345}
.slist{min-width:0;display:grid;gap:14px}.sbtns{display:grid;gap:8px}
.sbtns button{display:flex;align-items:center;gap:10px;text-align:left;border:3px solid var(--ink);background:#fff;border-radius:16px;padding:8px 12px;font:700 .95rem 'Nunito',sans-serif;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.sbtns button .st{color:#e0a000;letter-spacing:1px;white-space:nowrap;font-size:1.05rem}.sbtns button .st u{text-decoration:none;color:#c9d3d6}
.sbtns button span{flex:1;min-width:0}.sbtns button em{font-style:normal;font-size:.8rem;color:var(--ink2);white-space:nowrap}
.sbtns button.on{background:#ffe7a0}
.scard{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:16px;box-shadow:5px 5px 0 rgba(23,48,42,.9)}
.scard h3{margin:0 0 4px;font-size:1.3rem}.scard .tag{font-weight:800;color:var(--leaf);margin:0 0 8px}.scard p{margin:.4em 0}
.sband{position:relative;height:16px;border:3px solid var(--ink);border-radius:99px;background:#eef3f0;margin:12px 0 4px;overflow:hidden}.sband i{position:absolute;top:0;bottom:0;background:#ffc345}
.sscale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink2)}
.ssrc{margin-top:18px}
@media(max-width:920px){.starbox{grid-template-columns:1fr}.sstage{position:relative;top:0}#cs{height:70vw}}
.tc{margin-top:6px;font-weight:800;color:var(--ink)}

/* Earth Notes integration (2026-10-07): the top bar's link back to the stories index. */
.bar a.bar-back{pointer-events:auto;text-decoration:none;white-space:nowrap}
.bar a.bar-back:hover{text-decoration:underline;text-underline-offset:3px}
.bar a.bar-back:focus-visible{outline:2px solid currentColor;outline-offset:3px}