/* Climate Internship Journey (owner 2026-10-20), from docs/climate-internship-journey-laravel.zip. */
html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
.bar a.brand{color:inherit;text-decoration:none}
/* Layout: Earth Notes story series — scroll-driven map prologue on a deep forest stage, then paper chapters with ink-bordered cards.
   Single deliberate light look (paper + forest stages), colors set explicitly. */
:root{
  color-scheme:light;
  --ink:#16302a; --ink2:#465b54; --paper:#fffaf0; --paper2:#fff1cf; --line:#e6d9b3;
  --leaf:#1f6f46; --leaf2:#2c9a62; --forest:#0c4632; --forest2:#072f22; --lime:#9bd04a; --sun:#ffc83d; --rose:#e8707a; --sky:#d6eefc;
  --display:'Baloo 2','Nunito',system-ui,sans-serif; --body:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sh:6px 6px 0 rgba(22,48,42,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.brand,.num,.btn,.wk b{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance;line-height:1.08;margin:0 0 .45em}
p{margin:0 0 .8em}
.wrap{width:min(1160px,100%);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-weight:800;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--leaf);margin:0 0 .5em}
.sub{max-width:62ch;color:var(--ink2)}
a{color:var(--leaf);font-weight:800}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums}

/* top bar */
.prog{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--lime),var(--sun));z-index:60}
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) clamp(16px,3vw,28px) 10px;font-size:.8rem;font-weight:700;color:#e9f5e1;pointer-events:none;transition:color .3s,background .3s}
.bar.light{color:var(--ink);background:linear-gradient(rgba(255,250,240,.94),rgba(255,250,240,0))}
.brand{font-size:1.05rem;color:var(--lime)}.bar.light .brand{color:var(--leaf)}
@media(max-width:560px){.bar-r{display:none}}

/* prologue map */
.pro{position:relative;height:2900vh;background:var(--forest2)}
.stick{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(120% 90% at 70% 40%,#13563e 0%,var(--forest) 45%,var(--forest2) 100%)}
.mapbox{position:absolute;top:0;bottom:0;right:clamp(0px,3vw,48px);width:min(62vw,calc((100dvh - 40px) * .83));display:grid;place-items:center}
#map{width:100%;height:auto;max-height:calc(100dvh - 40px);display:block;overflow:visible}
#map .d{fill:#0f5a3f;stroke:#2f7a5b;stroke-width:1.3;transition:fill .5s}
#map .d.on{fill:#1c7a52}
#map .d.cur{fill:#3a9b5f}
#map .outline{fill:none;stroke:var(--lime);stroke-width:3;opacity:.55}
#map .seg,#map .node{display:none}
#map .seg{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#map .node circle{fill:var(--forest2);stroke:var(--sun);stroke-width:2.5}
#map .node text{fill:#fff8e0;font:800 16px var(--body);text-anchor:middle;dominant-baseline:central}
#map .node{opacity:0;transition:opacity .35s}
#map .node.on{opacity:1}
#map .node.cur circle{fill:var(--sun);stroke:#fff}
#map .node.cur text{fill:var(--ink)}
#map .tag{opacity:0;transition:opacity .3s}
#map .tag.on{opacity:1}
#map .tag rect{fill:#fff8e0;stroke:var(--ink);stroke-width:2}
#map .tag text{fill:var(--ink);font:800 19px var(--display)}
.mapbox.is3d{width:min(66vw,980px);right:0}
#map3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.m3tag{z-index:3;position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));background:#fff8e0;color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:2px 12px 0;font:800 1.05rem/1.4 var(--display);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:3px 3px 0 rgba(4,22,15,.8)}
.m3tag.on{opacity:1}
.m3tag b{padding:0 5px;display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:8px;border-radius:99px;background:var(--sun);border:2px solid var(--ink);font-size:.85rem}
@media(max-width:820px){.mapbox.is3d{width:auto;padding:0}}
.pcard{position:absolute;left:clamp(16px,5vw,64px);top:50%;width:min(420px,calc(100% - 32px));transform:translateY(-44%);background:rgba(255,250,240,.96);border:3px solid var(--ink);border-radius:24px;padding:22px 24px;box-shadow:8px 8px 0 rgba(4,22,15,.85);opacity:0;visibility:hidden;transition:opacity .45s,transform .45s,visibility .45s;z-index:2}
.pcard.on{opacity:1;visibility:visible;transform:translateY(-50%)}
.pcard .btn{display:inline-block;text-decoration:none;margin-top:4px}
#pc6 h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.wdots{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.wdots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.wdots i[data-k=o]{background:#d6e5f7}.wdots i[data-k=f]{background:#dcf0c2}.wdots i[data-k=c]{background:#ffe08f}.wdots i[data-k=e]{background:#f8c9d0}.wdots i.on{background:var(--ink);transform:scale(1.35)}
.pcard h1{font-size:clamp(2.3rem,5vw,3.5rem);color:var(--leaf)}
.pcard h2{font-size:clamp(1.5rem,3vw,2rem)}
.counter{display:flex;align-items:baseline;gap:10px;margin:.2em 0 .1em}
.counter .num{font-size:clamp(3.4rem,8vw,5rem);line-height:.9;color:var(--leaf)}
.counter span{font-weight:800;color:var(--ink2)}
.dname{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);min-height:1.3em}
.hint{font-weight:800;color:var(--leaf);margin:0}.hint i{display:inline-block;font-style:normal;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{background:var(--leaf);color:#fff;border-radius:99px;padding:2px 12px;font-weight:800;font-size:.82rem}
.say{display:flex;gap:10px;align-items:flex-start;margin:.2em 0 .9em}
.say p{margin:0;padding:9px 13px;border-radius:6px 18px 18px 18px;background:#e3f5e8;border:2px solid #b7dfc3;font-size:.95rem;line-height:1.5;min-width:0}
.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:var(--display);font-weight:800;color:#fff;background:#8a5a2b}
.av.w{background:#58c3b0 url(./climate-warrior-face.webp) center/cover;position:relative}
.av.m{background:#2f4f7f}
.roll{display:flex;flex-wrap:wrap;gap:5px;margin:.6em 0 0;max-height:4.6em;overflow:hidden}
.roll span{border:2px solid var(--ink);border-radius:99px;padding:0 9px;font-weight:800;font-size:.76rem;background:#dcf0c2}
.roll span:last-child{background:var(--sun)}
.joinf{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:.2em 0 .8em}
.joinf label{display:grid;gap:3px;font-weight:800;font-size:.76rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;min-width:0}
.joinf input,.joinf select{font:700 .95rem var(--body);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:6px 10px;background:#fff;min-width:0;width:100%}
.joinf .btn{grid-column:1/-1;justify-self:start;cursor:pointer;font:800 1rem var(--display);padding:5px 18px}
.youpost{background:#fff1c9;border:2px solid var(--ink);border-radius:14px;padding:8px 12px;font-weight:800}
.tapnote{font-size:.8rem;font-weight:700;color:var(--leaf);margin:-.2em 0 .4em}
.m3tag.you{background:#ff9f43}.m3tag.hov{background:#fff;font-size:.9rem}
.wdots button{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:#fff;padding:0;cursor:pointer}
.wdots button[data-k=o]{background:#d6e5f7}.wdots button[data-k=f]{background:#dcf0c2}.wdots button[data-k=c]{background:#ffe08f}.wdots button[data-k=e]{background:#f8c9d0}.wdots button.on{background:var(--ink);transform:scale(1.35)}
.wdots button:hover{transform:scale(1.3)}
@media(max-width:820px){.joinf{grid-template-columns:1fr}#pc0{max-height:64dvh}}
.byline{font-size:.84rem;color:var(--ink2);margin:-.2em 0 .8em;padding-bottom:.6em;border-bottom:2px dashed var(--line)}.byline b{color:var(--leaf)}
.mini{font-size:.86rem;color:var(--ink2);margin:.6em 0 0}
@media(max-width:820px){
  .mapbox{left:0;right:0;width:auto;top:56px;bottom:auto;height:calc(100dvh - 56px - 38dvh);padding:0 16px}
  #map{max-height:100%;width:auto;height:100%}
  .pcard{left:16px;right:16px;top:auto;bottom:16px;width:auto;transform:translateY(16px);padding:14px 16px;max-height:40dvh;overflow:auto;box-shadow:5px 5px 0 rgba(4,22,15,.85)}
  .pcard.on{transform:none}
  .pcard h1{font-size:2rem}.counter .num{font-size:3rem}.dname{font-size:1.2rem}
}

/* sections */
section.ch{padding-block:clamp(56px,8vw,100px)}
.ch h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.forest{background:var(--forest);color:#eef6e8;position:relative}
.forest .eyebrow{color:var(--lime)}.forest h2{color:#fff}.forest .sub{color:#c9dfcf}
.forest:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.03) 38px 39px);pointer-events:none}
.forest>*{position:relative}

/* numbers */
.totals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:1.6em 0 2.2em}
.tot{background:rgba(255,255,255,.07);border:2px solid rgba(155,208,74,.35);border-radius:18px;padding:16px 12px;text-align:center;min-width:0}
.tot b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.tot span{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.batches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bcard{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px 20px 20px;border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(4,22,15,.8);min-width:0}
.bhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:.6em;flex-wrap:wrap}
.bhead h3{font-size:1.6rem;margin:0}
.pill{border:2px solid var(--ink);border-radius:99px;padding:0 10px;font-weight:800;font-size:.76rem;background:#d8f2dc}
.pill.wait{background:var(--paper2)}
.brow{display:grid;grid-template-columns:96px minmax(0,1fr) 70px;gap:8px;align-items:center;font-size:.86rem;margin:6px 0}
.brow em{font-style:normal;font-weight:800;color:var(--ink2)}
.brow strong{text-align:right;font-variant-numeric:tabular-nums}
.track{height:14px;border-radius:99px;background:#efe6cc;overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:var(--c,var(--leaf));width:var(--w,0%);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.gender{display:flex;height:22px;border-radius:99px;overflow:hidden;border:2px solid var(--ink);margin:.8em 0 .3em}
.gender i{display:block;height:100%}
.gender .f{background:var(--rose)}.gender .m{background:#3f6a92}
.glegend{display:flex;justify-content:space-between;font-size:.8rem;font-weight:800;color:var(--ink2)}
.warriors{margin-top:.9em;padding-top:.8em;border-top:2px dashed var(--line);display:flex;align-items:baseline;gap:8px}
.warriors b{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--leaf)}
.warriors span{font-weight:700;font-size:.9rem;color:var(--ink2)}
.srcnote{font-size:.82rem;color:#b9d2c0;margin-top:1.4em}
@media(max-width:980px){.totals{grid-template-columns:repeat(3,minmax(0,1fr))}.batches{grid-template-columns:1fr}}
@media(max-width:520px){.totals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* categories */
.cats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:1.6em}
.cat{border:3px solid var(--ink);border-radius:24px;padding:20px 22px;background:#fff;box-shadow:var(--sh);min-width:0}
.cat .tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;padding:6px 14px 2px;border-radius:14px;border:3px solid var(--ink);margin-bottom:.4em}
.cat.olc .tag{background:var(--sun)}.cat.flc .tag{background:var(--lime)}
.cat h3{font-size:1.35rem}
.cat ul{margin:.4em 0 0;padding-left:1.1em}.cat li{margin:.25em 0}
.same{margin-top:20px;background:var(--paper2);border:2px dashed var(--ink);border-radius:20px;padding:14px 18px;font-weight:700}
@media(max-width:760px){.cats{grid-template-columns:1fr}}

/* weeks */
.weeks{background:linear-gradient(var(--paper),#eaf6ee 50%,var(--paper))}
.wkstrip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin:1.6em 0 1em}
.wk{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:8px 4px 6px;cursor:pointer;text-align:center;font:inherit;color:var(--ink);box-shadow:3px 3px 0 var(--ink);min-width:0;transition:transform .15s}
.wk b{display:block;font-size:1.3rem;line-height:1}
.wk span{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk[data-k=o]{background:#d6e5f7}.wk[data-k=f]{background:#dcf0c2}.wk[data-k=c]{background:#ffe08f}.wk[data-k=e]{background:#f8c9d0}
.wk.on{transform:translate(3px,3px);box-shadow:none;background:var(--ink);color:#fff}.wk.on span{color:var(--lime)}
.legendk{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;font-weight:700;color:var(--ink2)}
.legendk i{display:inline-block;width:14px;height:14px;border-radius:5px;border:2px solid var(--ink);margin-right:6px;vertical-align:-2px}
.wpanel{margin-top:16px;border:3px solid var(--ink);border-radius:26px;background:#fff;box-shadow:8px 8px 0 rgba(22,48,42,.9);padding:22px 24px;min-width:0}
.wtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:.6em}
.wtop h3{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.wtop .when{font-weight:800;color:var(--leaf);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase}
.target{background:var(--sun);border:3px solid var(--ink);border-radius:16px;padding:6px 14px;font-weight:800;text-align:center;line-height:1.2}
.target small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.lanes{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:.6em}
.lane{border-radius:18px;padding:14px 16px;min-width:0}
.lane h4{margin:0 0 .4em;font-family:var(--display);font-weight:800;font-size:1.1rem;display:flex;gap:8px;align-items:center}
.lane h4 i{font-style:normal;font-size:.8rem;border:2px solid var(--ink);border-radius:8px;padding:0 7px}
.lane.f{background:#eef8e1}.lane.f h4 i{background:var(--lime)}
.lane.o{background:#fff6dd}.lane.o h4 i{background:var(--sun)}
.lane.all{background:#eef3f8;grid-column:1/-1}.lane.all h4 i{background:#cfe0f2}
.lane ul{margin:0;padding-left:1.1em}.lane li{margin:.2em 0;font-size:.95rem}
.lane .rep{margin:.6em 0 0;font-weight:800;font-size:.88rem;color:var(--leaf)}
.wnav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.btn{border:3px solid var(--ink);background:var(--sun);color:var(--ink);border-radius:99px;padding:3px 18px;cursor:pointer;font-size:1rem;box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:none}.btn[disabled]{opacity:.4;cursor:default}
@media(max-width:820px){.wkstrip{grid-template-columns:repeat(6,minmax(0,1fr))}.lanes{grid-template-columns:1fr}}


/* week player */
.player{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:16px}
.stagebox{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));background:#fff;border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 rgba(22,48,42,.9);min-width:0}
.stagebox{position:sticky}
#wcv{display:block;width:100%;height:min(62vh,540px);min-height:320px;cursor:grab;touch-action:pan-y;background:linear-gradient(#bfe6ff,#fff3d6)}#wcv:active{cursor:grabbing}
.olcin{position:absolute;left:12px;top:12px;max-width:min(260px,60%);background:#fff6dd;border:3px solid var(--ink);border-radius:14px;padding:6px 10px;font-size:.82rem;line-height:1.35;box-shadow:3px 3px 0 var(--ink)}
.olcin b{display:block;font-family:var(--display);font-size:.9rem}
#wstage[hidden]{display:none!important}
#wstage{display:block;width:100%;height:auto;aspect-ratio:800/560}
#wstage .scn{opacity:0;transition:opacity .6s;pointer-events:none}
#wstage .scn.on{opacity:1}
#wstage .scn.on .hero{animation:hop 2.4s ease-in-out infinite;transform-box:fill-box}
@keyframes hop{50%{translate:0 -5px}}
#wstage .puff{animation:puff 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes puff{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translateY(-70px) scale(1.5)}}
#wstage .conf{animation:fall 3s linear infinite}
@keyframes fall{to{translate:0 60px;opacity:.2}}
.stagebar{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--paper);border-top:3px solid var(--ink);flex-wrap:wrap}
.wcount{font-weight:800;font-size:.86rem;color:var(--ink2)}
.nb{border:3px solid var(--ink);background:var(--sun);color:var(--ink);border-radius:99px;padding:2px 14px;cursor:pointer;font:800 .95rem var(--display);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}
.wtrack{display:flex;gap:8px;justify-content:center;padding:6px 12px 12px;background:var(--paper)}
.wtrack button{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);padding:0;cursor:pointer;background:#fff;transition:transform .2s}
.wtrack button[data-k=o]{background:#d6e5f7}.wtrack button[data-k=f]{background:#dcf0c2}.wtrack button[data-k=c]{background:#ffe08f}.wtrack button[data-k=e]{background:#f8c9d0}
.wtrack button.on{transform:scale(1.5);background:var(--ink)}
.acard{background:#fffdf6;border:3px solid var(--ink);border-radius:26px;padding:20px 22px 22px;box-shadow:8px 8px 0 rgba(22,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}
@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;border:2px solid var(--ink);border-radius:99px;padding:2px 14px 2px 4px;font-weight:800;font-size:.86rem}
.abadge b{background:var(--ink);color:#fff;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--display)}
.abadge[data-k=o]{background:#d6e5f7}.abadge[data-k=f]{background:#dcf0c2}.abadge[data-k=c]{background:#ffe08f}.abadge[data-k=e]{background:#f8c9d0}
.acard h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.acard .target{font-size:.95rem}
.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:.95rem;line-height:1.5;min-width:0;background:#e3f5e8;border:2px solid #b7dfc3}
.bub.s p{background:#fff1c9;border-color:#f0d78a}
.bub.m p{background:#e4ecf7;border-color:#b9cbe6}
.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:var(--display);font-weight:800;color:#fff;background:#8a5a2b}
.av.w{background:#58c3b0 url(./climate-warrior-face.webp) center/cover;position:relative}
.file{margin:0;display:grid;gap:10px;border-top:2px dashed var(--line);padding-top:12px}
.file div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.file dt{font-weight:800;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf);padding-top:3px}
.file dd{margin:0;font-size:.93rem}.file dd ul{margin:0;padding-left:1.1em}.file dd li{margin:.15em 0}
.ft{display:inline-block;font-style:normal;border:2px solid var(--ink);border-radius:7px;padding:0 6px;margin-right:6px;color:var(--ink);letter-spacing:0}
.ft.f{background:var(--lime)}.ft.o{background:var(--sun)}.ft.a{background:#cfe0f2}
@media(max-width:920px){.player{grid-template-columns:1fr}.stagebox{position:relative;top:0}.file div{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){#wstage .scn.on .hero,#wstage .puff,#wstage .conf,.acard.swap>*{animation:none}#wstage .puff{opacity:.7}}
/* chapter 2 */
.catbox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.4em}
#catcv,#podcv{display:block;width:100%;height:min(56vh,460px);min-height:280px;cursor:grab;touch-action:pan-y;background:linear-gradient(#bfe6ff,#fff3d6)}
.catbox .stagebox{position:relative;top:0}.catbox .cats{grid-template-columns:1fr;margin-top:0}
.cat{transition:transform .25s,opacity .25s;opacity:.55}.cat.on{opacity:1;transform:translateX(-4px)}
.nb.ctab{background:#fff}.nb.ctab.on{background:var(--sun)}
@media(max-width:860px){.catbox{grid-template-columns:1fr}}
/* tracker */
.trk{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:26px;padding:20px 22px;box-shadow:8px 8px 0 rgba(4,22,15,.85);margin-top:1.6em}
.trtop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}.trtop h3{margin:0;font-size:1.5rem}.trtop p{margin:.2em 0 0;color:var(--ink2);font-size:.92rem}
.trall{min-width:220px}.trall b{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--leaf)}.trall span{display:block;font-size:.8rem;font-weight:800;color:var(--ink2)}
.trbar{height:14px;border:2px solid var(--ink);border-radius:99px;background:#efe6cc;overflow:hidden;margin-top:6px}.trbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--leaf2),var(--lime));transition:width .5s}
.trgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ti{border:3px solid var(--ink);border-radius:20px;padding:12px 14px;background:#fff;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.ti.done{background:#e3f5e8}
.ring{width:76px;height:76px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:9}.ring .bg{stroke:#efe6cc}.ring .fg{stroke:var(--leaf2);stroke-linecap:round;transition:stroke-dashoffset .5s}
.ti.done .ring .fg{stroke:var(--sun)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.ti h4{margin:0;font-family:var(--display);font-size:1.05rem;line-height:1.15}.ti p{margin:.15em 0 .45em;font-size:.82rem;color:var(--ink2);line-height:1.35}
.tib{display:flex;gap:6px}.tib button{border:3px solid var(--ink);background:var(--sun);border-radius:12px;width:38px;height:32px;font:800 1.1rem var(--display);cursor:pointer;box-shadow:2px 2px 0 var(--ink);color:var(--ink)}
.tib button.m{background:#fff}.tib button:active{transform:translate(2px,2px);box-shadow:none}
.trfoot{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}.trfoot .nb{background:#fff}#trmsg{font-weight:800;color:var(--leaf)}
.ti.pop{animation:pop .5s}@keyframes pop{40%{transform:scale(1.05)}}
@media(max-width:900px){.trgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.trgrid{grid-template-columns:1fr}}
/* quiz */
.quizs{background:linear-gradient(#fffaf0,#fff3d6)}
.quiz{margin-top:1.2em;border:3px solid var(--ink);border-radius:26px;background:#fff;box-shadow:8px 8px 0 rgba(22,48,42,.9);padding:22px 24px;max-width:780px}
.qtop{display:flex;justify-content:space-between;font-weight:800;font-size:.85rem;color:var(--ink2);margin-bottom:.4em}
.quiz h3{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.qopts{display:grid;gap:10px;margin:.8em 0}
.qopts button{text-align:left;border:3px solid var(--ink);background:#fffaf0;border-radius:16px;padding:10px 14px;font:700 1rem var(--body);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.qopts button:hover{background:#fff1c9}.qopts button.ok{background:#bfe8c8}.qopts button.no{background:#f8c9d0}.qopts button[disabled]{cursor:default}
.qfb{border-radius:14px;padding:10px 14px;font-weight:700;background:#e4ecf7;border:2px solid #b9cbe6;margin:.4em 0}
.qend{text-align:center}.qend b{font-family:var(--display);font-size:3rem;color:var(--leaf);display:block;line-height:1}
/* certificate */
.certs{background:linear-gradient(#e3f3e6,#fffaf0);position:relative;overflow:hidden}
.certbox{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center;margin-top:1.4em}
.cert{position:relative;background:#fffdf6;border:3px solid var(--ink);border-radius:18px;padding:28px 26px 124px;text-align:center;box-shadow:8px 8px 0 rgba(22,48,42,.9);outline:6px double #c9a24a;outline-offset:-14px;min-width:0}
.ce1{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin:0 0 .6em}
.ce2{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);margin:0}
.ce3{color:var(--ink2);margin:.6em 0 0}.ce4{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:var(--leaf);margin:.05em 0;line-height:1.1;overflow-wrap:anywhere}
.ce5{max-width:48ch;margin:.2em auto 0;color:var(--ink2);font-size:.95rem}
.stamp{position:absolute;left:50%;margin-left:-55px;bottom:12px;width:110px;height:110px;border-radius:50%;border:5px solid #d9576a;color:#d9576a;display:grid;place-content:center;text-align:center;font-family:var(--display);transform:rotate(-14deg) scale(2.4);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.6,1),opacity .3s}
.stamp b{font-size:1.4rem;line-height:1}.stamp span{font-size:.9rem;font-weight:800}
.cert.done .stamp{opacity:.9;transform:rotate(-14deg) scale(1)}
.pledge2{border:3px solid var(--ink);border-radius:22px;background:#fff;padding:18px 20px;box-shadow:6px 6px 0 rgba(22,48,42,.9);min-width:0}
.pledge2 h3{font-size:1.4rem;margin:0 0 .3em}.pledge2 ol{padding-left:1.2em;margin:0 0 1em}.pledge2 li{margin:.25em 0;font-weight:700}
.btn.big{font-size:1.15rem;padding:8px 22px;cursor:pointer}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
@media(max-width:860px){.certbox{grid-template-columns:1fr}}
/* QR */
.qrrow{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:28px}
.say.big{max-width:520px;margin:0}.say.big p{font-size:1.05rem;background:#e4ecf7;border-color:#b9cbe6}
.qr{display:grid;justify-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:12px 12px 10px;box-shadow:6px 6px 0 rgba(22,48,42,.9);text-decoration:none;color:var(--ink);transition:transform .15s}
.qr:hover{transform:translate(-2px,-2px) rotate(-1deg)}.qr:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.qr img{width:180px;height:180px;image-rendering:pixelated;display:block}.qr span{font:800 .95rem var(--display);background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:0 12px}
/* auto scroll */
.autobar{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;gap:6px;align-items:center;background:rgba(255,250,240,.92);border:3px solid var(--ink);border-radius:99px;padding:5px;box-shadow:4px 4px 0 rgba(4,22,15,.85)}
.autobar .nb{font-size:.92rem;padding:3px 14px;cursor:pointer}
.autobar .abtn[aria-pressed=true]{background:var(--leaf);color:#fff}
.autobar .aspd{background:#fff;min-width:44px;padding:3px 8px}
@media(max-width:820px){.autobar{bottom:auto;top:calc(40px + env(safe-area-inset-top,0px));right:10px;padding:4px}.autobar .nb{font-size:.82rem;padding:2px 10px}}
/* always on */
.alw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.6em}
.al{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.35);border-radius:20px;padding:16px 18px;min-width:0}
.al .big{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--sun)}
.al h3{font-size:1.2rem;margin:.2em 0 .3em;color:#fff}
.al p{font-size:.93rem;margin:0;color:#d7e8da}
.al ul{margin:.5em 0 0;padding-left:1.1em;font-size:.88rem;color:#d7e8da}.al li{margin:.15em 0}
.al.wide{grid-column:span 3}
.al.wide ul{columns:2;column-gap:28px}
@media(max-width:900px){.alw{grid-template-columns:1fr 1fr}.al.wide{grid-column:span 2}}
@media(max-width:560px){.alw{grid-template-columns:1fr}.al.wide{grid-column:auto}.al.wide ul{columns:1}}

/* green school */
.gs{background:linear-gradient(#fffaf0,#e3f3e6)}
.gsgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:1.6em;align-items:start}
.gsinfo .boards{margin-top:.4em}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bd{margin:0;text-align:center}
.bdimg{position:relative;max-width:100%;aspect-ratio:640/587;filter:drop-shadow(5px 6px 0 rgba(22,48,42,.85))}
.bdimg img{width:100%;height:100%;display:block}
.glow{position:absolute;width:20%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);border-radius:50%;background:radial-gradient(circle,rgba(255,236,140,.95) 0%,rgba(255,200,61,.75) 30%,rgba(255,200,61,0) 70%);opacity:0;transition:opacity .8s,transform .8s;pointer-events:none;mix-blend-mode:screen}
.lit .glow.s1,.l1 .glow.s1,.l2 .glow.s1,.l2 .glow.s2,.l3 .glow.s1,.l3 .glow.s2,.l3 .glow.s3,.l4 .glow:not(.s5),.l5 .glow{opacity:1;transform:translate(-50%,-50%) scale(1)}
.starbox{border:3px solid var(--ink);border-radius:24px;background:var(--forest);color:#eef6e8;padding:20px 22px;box-shadow:var(--sh);min-width:0}
.starbox h3{color:#fff}.starbox .mini{color:#c9dfcf}
.bdimg.big{width:min(100%,420px);margin:0 auto;filter:drop-shadow(6px 7px 0 rgba(0,0,0,.45))}
.sbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 12px}
.sbtns button{border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:99px;padding:3px 14px;font:800 1rem var(--display);cursor:pointer;box-shadow:3px 3px 0 #04160f}
.sbtns button.on{background:var(--sun);transform:translate(3px,3px);box-shadow:none}
.scard{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:14px 16px}
.scard h4{margin:0;font-family:var(--display);font-weight:800;font-size:1.3rem;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.scard h4 span{color:var(--sun);-webkit-text-stroke:1px var(--ink);letter-spacing:2px}
.scard .tg{font-weight:800;color:var(--leaf);margin:0 0 .4em}
.scard p{margin:.3em 0;font-size:.95rem}
.sband{position:relative;height:16px;border:3px solid var(--ink);border-radius:99px;background:#eef3f0;margin:10px 0 4px;overflow:hidden}.sband i{position:absolute;top:0;bottom:0;background:var(--sun)}
.sscale{display:flex;justify-content:space-between;font-size:.72rem;font-weight:800;color:var(--ink2)}
.snote{font-size:.78rem;color:#b9d2c0;margin:.9em 0 0}
.bd figcaption{margin-top:10px;font-family:var(--display);font-weight:800;font-size:1.15rem}
.bd figcaption span{display:block;font-family:var(--body);font-weight:700;font-size:.82rem;color:var(--ink2)}
.gsinfo{border:3px solid var(--ink);border-radius:24px;background:#fff;padding:20px 22px;box-shadow:var(--sh);min-width:0}
.meter{margin:1em 0 .4em}
.meter .mt{position:relative;height:30px;border:3px solid var(--ink);border-radius:99px;background:#f2ecd8;overflow:hidden}
.meter .mt i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--leaf2),var(--lime));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.meter .mt u{position:absolute;top:-3px;bottom:-3px;left:33%;border-left:3px dashed var(--ink)}
.meter .ml{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--ink2);margin-top:4px}
.gsinfo ol{padding-left:1.2em;margin:.6em 0}.gsinfo li{margin:.3em 0}
.gsbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
@media(max-width:860px){.gsgrid{grid-template-columns:1fr}}

.gs3d{border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:linear-gradient(#bfe6ff,#fff3d6)}
#gs3d{display:block;width:100%;height:clamp(280px,46vw,440px);touch-action:pan-y}
.gsbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--paper);border-top:3px solid var(--ink)}
.gsbar .nb.tour[aria-pressed=true]{background:var(--sun);color:var(--ink)}
.bdimg.sq{aspect-ratio:1/1}
/* top 15 */
.top15{background:var(--paper2)}
.podium{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:1.6em}
.stairs{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:230px}
.step{width:30%;max-width:120px;border:3px solid var(--ink);border-radius:14px 14px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;font-family:var(--display);font-weight:800;box-shadow:4px 0 0 var(--ink)}
.step b{font-size:2rem;line-height:1}.step span{font-size:.8rem}
.step.p1{height:100%;background:var(--sun)}.step.p2{height:74%;background:#e8eef2}.step.p3{height:56%;background:#f2c79a}
.fifteen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:440px}
.dot{aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.1rem;background:#fff;max-width:100%}
.dot.prize{background:var(--sun)}
.flow15{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.flow15 span{border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-weight:800;font-size:.86rem;background:#fff}
@media(max-width:760px){.podium{grid-template-columns:1fr}}

/* close */
.close{background:radial-gradient(90% 80% at 25% 60%,#145c40 0%,var(--forest2) 70%);color:#eef6e8;text-align:center;padding-block:clamp(56px,8vw,100px);overflow:hidden}
.closegrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,4vw,48px);align-items:end}
.cmfig{position:relative;margin:0;justify-self:center;max-width:380px;width:100%}
.cmfig img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));animation:cmrise 1.2s cubic-bezier(.2,.8,.2,1) both}
.cmglow{position:absolute;left:8%;right:8%;top:6%;bottom:12%;border-radius:50%;background:radial-gradient(circle,rgba(155,208,74,.45),rgba(155,208,74,0) 68%);filter:blur(6px)}
.cmfig figcaption{position:relative;margin-top:-34px;display:inline-block;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:4px 14px;font-family:var(--display);font-weight:800;font-size:1.05rem;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.cmfig figcaption span{display:block;font-family:var(--body);font-weight:700;font-size:.78rem;color:var(--ink2)}
.closetxt{align-self:center}
@keyframes cmrise{from{opacity:0;transform:translateY(30px)}}
@media(max-width:820px){.closegrid{grid-template-columns:1fr}.cmfig{max-width:260px}}
@media(prefers-reduced-motion:reduce){.cmfig img{animation:none}}
.plaque{display:inline-flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,56px);background:#fff;border:3px solid var(--ink);border-radius:28px;padding:clamp(16px,3vw,28px) clamp(20px,5vw,48px);box-shadow:8px 8px 0 rgba(0,0,0,.45);max-width:100%}
.plaque img{height:clamp(110px,22vw,200px);width:auto;display:block;max-width:none}
.plaque .cm{height:clamp(130px,26vw,236px)}
.thanks{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,12vw,8rem);line-height:1;color:var(--lime);margin:.35em 0 .1em}
.close .lead{max-width:58ch;margin:0 auto;color:#d3e6d0;font-size:1.05rem}
.foot{background:#05241a;color:#b9d2c0;padding:22px clamp(16px,4vw,32px);text-align:center;font-size:.84rem}
.foot p{margin:0 auto .4em;max-width:90ch}
.foot a{color:var(--lime)}

/* reveal */
.js .fx{opacity:0;transform:translateY(14px);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,#map .node,#map .d,.track i,.meter .mt i,.glow{transition:none}.hint i{animation:none}html{scroll-behavior:auto}}