/* Career Explorer, Grades 3-7 edition. Apple-inspired: clear, calm, generous touch targets. Light only. */
:root{
 color-scheme:light;
 --bg:#f4f9fc;--surface:#fff;--ink:#14263a;--ink2:#4a5d70;--line:#dfebf2;
 --accent:#0a7ea4;--on-accent:#fff;--sun:#ffd24d;
 --r-lg:26px;--r-md:20px;--r-sm:14px;
 --shadow:0 8px 24px rgba(14,60,90,.08);
 --font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","Nunito",system-ui,sans-serif;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.125rem;line-height:1.55;color:var(--ink);
 background:linear-gradient(180deg,#e0f2f9 0,var(--bg) 340px) no-repeat,var(--bg)}
.wrap{width:100%;margin:0;padding:12px clamp(16px,4vw,64px) 56px}
h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.12;margin:0 0 .35em;font-weight:700;letter-spacing:-.4px}
h2{font-size:1.5rem;line-height:1.2;margin:0 0 .6em;font-weight:700}
h3{font-size:1.125rem;line-height:1.3;margin:.5em 0 .25em;font-weight:600}
p{margin:0 0 .8em}
.lead{font-size:1.2rem;color:var(--ink2)}
.small{font-size:.9rem;color:var(--ink2)}
.center{text-align:center;margin:22px 0}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}

.bar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0 18px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem}
.seg{display:inline-flex;background:#e6f0f6;border-radius:14px;padding:3px;gap:2px}
.seg button{min-height:44px;min-width:56px;padding:0 14px;border:0;background:transparent;border-radius:11px;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer}
.seg button.on{background:#fff;box-shadow:0 1px 4px rgba(14,60,90,.18)}

.hero{text-align:center;max-width:820px;margin:0 auto 8px;padding:10px 0 6px}
.searchbox{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.search{display:block;width:100%;max-width:640px}
.search input{width:100%;height:58px;padding:0 20px 0 54px;border:1.5px solid var(--line);border-radius:999px;font:inherit;font-size:1.05rem;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%234a5d70' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 20px center;box-shadow:var(--shadow)}
.search input::placeholder{color:var(--ink2);opacity:.9}
.search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(10,126,164,.18)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:18px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;text-decoration:none;transition:transform .12s ease}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#e4f1f7;color:var(--accent)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:20px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:1.15rem;text-decoration:none;width:fit-content;max-width:100%;transition:transform .12s ease}
.cta:active{transform:scale(.97)}
.chip{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.lbl{font-weight:600;color:var(--ink2);margin-top:14px;font-size:.95rem}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0 8px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:128px;padding:16px 10px;border:3px solid transparent;border-radius:var(--r-lg);background:hsl(var(--h) 85% 93%);color:var(--ink);font:inherit;font-weight:600;font-size:1.02rem;line-height:1.25;text-align:center;cursor:pointer;transition:transform .12s ease}
.tile .ti{width:62px;height:62px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem}
.tile:active{transform:scale(.97)}
.tile.on{border-color:var(--accent);background:hsl(var(--h) 85% 88%)}

.sh{margin:34px 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:14px}
.card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card:active{transform:scale(.98)}
.cb{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:hsl(var(--h) 85% 92%);font-size:2rem;margin-bottom:6px}
.card h3{margin-top:.4em}
.card p{color:var(--ink2);font-size:1rem;margin:0}

.shelf{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.shelf .card{flex:0 0 min(78vw,260px);scroll-snap-align:start}
.feat{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:hsl(var(--h) 85% 93%);border-radius:30px;padding:24px}
.feat .badge{flex:0 0 auto;width:min(100%,200px);margin:0 auto}
.feat .ft{flex:1 1 260px}
.feat h2{margin-bottom:.2em}
.rh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 10px}
.rh h2{margin:0}
.more{margin:6px 0 10px}
.more summary{cursor:pointer;font-weight:600;color:var(--accent);min-height:44px;display:flex;align-items:center}

a.back{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;color:var(--accent);font-weight:700;font-size:1.1rem;margin-bottom:6px}
.dh{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:6px 0 20px}
.dht{flex:1 1 340px;min-width:0}
.kick{margin:0 0 6px;font-weight:600;color:var(--ink2);font-size:.95rem}
.badge{flex:0 0 auto;width:min(100%,320px);margin:0 auto}
.badge img{display:block;width:100%;height:auto;border-radius:50%}
.cap{margin:10px 0 0;color:var(--ink2);font-size:.95rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:16px 0}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow)}
.sec h3{margin:0 0 6px}
.sec p{margin:0}
.try{background:#fff8dd;border-color:#f3e2a0}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:none}
.tag{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#e9f3f8;font-size:.95rem;font-weight:600}
.note{display:flex;gap:12px;align-items:flex-start;background:#e6f3f9;border-radius:var(--r-md);padding:14px 18px;margin:26px 0 8px}
.note p{margin:0;font-size:.98rem}
.ni{flex:0 0 36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:var(--ink2);font-size:.92rem}
.foot p{margin:0 auto;max-width:720px}
.topbtn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:1.4rem;cursor:pointer;box-shadow:0 6px 16px rgba(10,126,164,.35)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.tile,.btn,.cta{transition:none}.card:hover{transform:none}}

/* ---- livelier look: CuriousLeap ---- */
.brand{display:inline-flex;align-items:center;gap:8px;font-size:1.25rem;font-weight:800;letter-spacing:-.2px}
.logo{display:inline-block;width:34px;height:34px}.logo svg{width:100%;height:100%}
.hero{position:relative;max-width:none;margin:0 0 8px;padding:26px clamp(16px,3vw,40px) 22px;border-radius:34px;background:linear-gradient(135deg,#fff0b0 0%,#ffe8c9 45%,#d3eefb 100%);overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:#ffd24d;opacity:.35;top:-90px;left:-70px}
.hero::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#7cc8ea;opacity:.28;bottom:-140px;right:-80px}
.hero>*{position:relative;z-index:1}
.hero-in{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.hero-txt{flex:1 1 420px;max-width:680px}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.4rem)}
.sparky-wrap{flex:0 0 auto;width:210px;display:flex;flex-direction:column;align-items:center}
.bubble{position:relative;background:#fff;border-radius:22px;padding:12px 16px;font-weight:700;font-size:.98rem;line-height:1.3;box-shadow:var(--shadow);margin-bottom:14px;max-width:210px}
.bubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.sparky{border:0;background:transparent;padding:0;width:150px;height:150px;cursor:pointer;animation:bob 3.2s ease-in-out infinite}
.sparky svg{width:100%;height:100%;display:block}
.sparky:active{transform:scale(.94)}
.strip{display:flex;gap:14px;justify-content:center;padding:22px 4px 14px;overflow-x:auto;scroll-snap-type:x mandatory}
.sp{flex:0 0 auto;width:clamp(86px,12vw,128px);aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 8px 18px rgba(14,60,90,.16);scroll-snap-align:center;transition:transform .15s ease}
.sp:nth-child(even){transform:translateY(12px)}
.sp:hover{transform:translateY(-4px) scale(1.05)}
.sp img{display:block;width:100%;height:100%;border-radius:50%}
.tiles{margin-top:30px;gap:16px}
.tile{min-height:148px;background:hsl(var(--h) 88% 89%);box-shadow:0 5px 0 hsl(var(--h) 65% 76%);transition:transform .12s ease,box-shadow .12s ease}
.tile .ti{width:72px;height:72px;font-size:2.3rem}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 hsl(var(--h) 65% 76%)}
.tile.on{border-color:var(--accent);background:hsl(var(--h) 88% 84%)}
.cp{display:block;width:96px;height:96px;border-radius:50%;margin-bottom:6px;background:hsl(var(--h) 85% 93%)}
.card{animation:pop .4s ease both}
.band{margin:34px calc(-1 * clamp(16px,4vw,64px)) 0;padding:6px clamp(16px,4vw,64px) 18px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .sh{margin-top:22px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.sparky-wrap{width:100%}.sparky{width:120px;height:120px}}
@media(prefers-reduced-motion:reduce){.sparky,.card{animation:none}.sp:nth-child(even){transform:none}}