:root{
  --bg:#FFF8F0; --paper:#FFFFFF; --ink:#2E2A47; --muted:#6E6A86; --line:#EFE6DC;
  --coral:#FF8A7A; --coral-soft:#FFE3DE; --teal:#3FB8A8; --teal-soft:#D9F3EF;
  --lavender:#9C8CF5; --lavender-soft:#ECE8FF; --sun:#FFC94D; --sun-soft:#FFF1CC;
  --good:#2FB67C; --good-soft:#DDF6EA; --oops:#F2789A; --oops-soft:#FFE4EC;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow:0 10px 30px rgba(46,42,71,.10), 0 2px 6px rgba(46,42,71,.06);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Nunito",ui-rounded,system-ui,sans-serif;font-size:18px;line-height:1.5;
  background-image:radial-gradient(circle at 10% 10%,#FFEDE3 0,transparent 35%),radial-gradient(circle at 90% 80%,#EAF7F4 0,transparent 35%);
  min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Fredoka","Nunito",ui-rounded,sans-serif;font-weight:600;letter-spacing:.2px;margin:0}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
.wrap{max-width:880px;margin:0 auto;padding:0 18px 120px}

/* top bar */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(255,248,240,.82);border-bottom:1px solid var(--line)}
.top .in{max-width:880px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Fredoka";font-weight:600;font-size:22px}
.logo .dot{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--coral),var(--sun));display:grid;place-items:center;color:#fff;font-size:18px}
.spacer{flex:1}
.stars{background:var(--sun-soft);padding:6px 14px;border-radius:99px;font-weight:800;display:flex;gap:6px;align-items:center}
.stars.bump{animation:bump .5s var(--spring)}
.link-btn{padding:8px 14px;border-radius:99px;font-weight:700;color:var(--muted)}
.link-btn:hover{background:#fff}

/* generic */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:99px;font-weight:800;font-size:18px;
  background:var(--ink);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18);transition:transform .15s var(--spring),box-shadow .15s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.coral{background:var(--coral)} .btn.teal{background:var(--teal)} .btn.lavender{background:var(--lavender)} .btn.sun{background:var(--sun);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line)}
.panel{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px}
.fade-in{animation:rise .5s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}70%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* home */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin-top:34px}
.hero h1{font-size:clamp(40px,7vw,64px);line-height:1.02}
.hero h1 span{color:var(--coral)}
.hero p{font-size:20px;color:var(--muted);margin:14px 0 24px}
.pip{width:100%;max-width:300px;justify-self:center;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 18px 20px rgba(255,138,122,.25))}
@media(max-width:700px){.hero{grid-template-columns:1fr;text-align:center}.pip{max-width:200px;order:-1}}

/* module map */
.map{display:grid;gap:18px;margin-top:28px}
.mod{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);text-align:left;
  transition:transform .25s var(--spring)}
.mod:hover{transform:translateY(-3px) rotate(-.3deg)}
.mod .ic{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:34px;flex:none}
.mod.coral .ic{background:var(--coral-soft)} .mod.teal .ic{background:var(--teal-soft)} .mod.lavender .ic{background:var(--lavender-soft)}
.mod h3{font-size:22px} .mod p{margin:2px 0 0;color:var(--muted)}
.mod .state{margin-left:auto;font-weight:800;font-size:15px;padding:6px 12px;border-radius:99px;background:var(--bg);white-space:nowrap}
.mod.done .state{background:var(--good-soft);color:var(--good)}
.mod.locked{opacity:.55}
.num{font-family:Fredoka;font-weight:600;color:var(--muted);font-size:14px;letter-spacing:1px;text-transform:uppercase}

/* lesson */
.lesson-head{display:flex;align-items:center;gap:14px;margin:22px 0 14px}
.back{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--line);display:grid;place-items:center;font-size:20px}
.bar{flex:1;height:16px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .5s var(--spring)}
.coral .bar i{background:linear-gradient(90deg,var(--coral),#FFB199)} .teal .bar i{background:linear-gradient(90deg,var(--teal),#7FD8CB)} .lavender .bar i{background:linear-gradient(90deg,var(--lavender),#C3B8FF)}

.card{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px 30px 26px;min-height:380px;display:flex;flex-direction:column;align-items:center;text-align:center}
.card .art{width:130px;height:130px;border-radius:40px;display:grid;place-items:center;font-size:68px;margin-bottom:22px;animation:pop .6s var(--spring) both}
.coral .card .art{background:var(--coral-soft)} .teal .card .art{background:var(--teal-soft)} .lavender .card .art{background:var(--lavender-soft)}
.card .txt{font-size:clamp(20px,3.2vw,25px);font-weight:700;line-height:1.45;max-width:620px}
.card .tools{display:flex;gap:10px;margin-top:auto;padding-top:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.listen{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--sun-soft);font-weight:800}
.listen.playing{background:var(--sun);animation:bump .6s var(--spring)}
.src{font-size:13px;color:var(--muted);border-radius:99px;padding:8px 12px;background:var(--bg);font-weight:700}
.src-pop{margin-top:14px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px 18px;font-size:14px;line-height:1.45;color:#46425F;animation:rise .3s var(--spring)}
.src-h{display:flex;justify-content:space-between;align-items:center;font-family:Fredoka;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px}
.src-x{width:30px;height:30px;border-radius:10px;background:var(--bg);font-size:18px}
.src-pop a{color:var(--teal);font-weight:800;text-decoration:none}
.src-pop div+div{margin-top:6px}

.nav{display:flex;justify-content:flex-end;margin-top:18px}

/* activities */
.act-q{font-size:clamp(20px,3vw,24px);font-weight:800;margin:0 0 18px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px;min-height:52px}
.chip{padding:12px 18px;border-radius:99px;background:#fff;box-shadow:0 4px 0 var(--line),0 0 0 2px var(--line) inset;font-weight:800;transition:transform .2s var(--spring)}
.chip.sel{background:var(--sun);box-shadow:0 4px 0 #E0A92C;transform:translateY(-3px) scale(1.05)}
.chip.shake{animation:shake .4s}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bin{border-radius:var(--r-md);padding:18px;min-height:150px;border:3px dashed var(--line);background:var(--bg);transition:transform .2s var(--spring),border-color .2s}
.bin.ready{border-color:var(--sun);transform:scale(1.02)}
.bin h4{margin:0 0 10px;font-family:Fredoka;font-weight:600;font-size:18px;display:flex;gap:8px;align-items:center;justify-content:center}
.bin .in{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bin .in span{padding:6px 12px;border-radius:99px;background:var(--good-soft);color:#157a52;font-weight:800;font-size:15px;animation:pop .45s var(--spring)}
.hint{margin-top:14px;text-align:center;color:var(--oops);font-weight:800;min-height:24px}

.opts{display:grid;gap:12px;max-width:560px;margin:0 auto}
.opt{padding:16px 20px;border-radius:var(--r-md);background:#fff;box-shadow:0 4px 0 var(--line),0 0 0 2px var(--line) inset;font-weight:800;text-align:left;font-size:18px;transition:transform .15s var(--spring),background .2s}
.opt:hover{transform:translateY(-2px)}
.opt.right{background:var(--good-soft);box-shadow:0 4px 0 #9FDDBF,0 0 0 2px #9FDDBF inset}
.opt.wrong{background:var(--oops-soft);box-shadow:0 4px 0 #F7B5C7,0 0 0 2px #F7B5C7 inset;animation:shake .4s}
.fb{margin:16px auto 0;max-width:560px;border-radius:var(--r-md);padding:14px 18px;font-weight:800;animation:rise .35s var(--spring)}
.fb.good{background:var(--good-soft);color:#157a52} .fb.bad{background:var(--oops-soft);color:#a8325a}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.tile{perspective:900px;height:150px}
.tile .f{position:relative;width:100%;height:100%;transition:transform .6s var(--spring);transform-style:preserve-3d}
.tile.on .f{transform:rotateY(180deg)}
.tile .a,.tile .b{position:absolute;inset:0;border-radius:var(--r-md);display:grid;place-items:center;backface-visibility:hidden;padding:12px;text-align:center}
.tile .a{background:var(--teal);color:#fff;font-family:Fredoka;font-size:64px;font-weight:600;box-shadow:0 6px 0 #2E9588}
.tile .b{background:#fff;transform:rotateY(180deg);font-weight:800;box-shadow:inset 0 0 0 3px var(--teal-soft)}
.lavender .tile .a{background:var(--lavender);box-shadow:0 6px 0 #7B6AD8;font-size:52px}
.lavender .tile .b{box-shadow:inset 0 0 0 3px var(--lavender-soft)}
.after{margin-top:18px;text-align:center;font-family:Fredoka;font-size:24px;font-weight:600;color:var(--lavender);animation:rise .5s var(--spring)}

.hand{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center}
.hand svg{width:100%}
.hand .fingers{display:grid;gap:10px}
.hand input{width:100%;font:inherit;font-weight:700;padding:12px 16px;border-radius:var(--r-sm);border:2px solid var(--line);background:var(--bg);outline:none;transition:border-color .2s}
.hand input:focus{border-color:var(--lavender);background:#fff}
@media(max-width:640px){.hand{grid-template-columns:1fr}.hand svg{max-width:200px;margin:0 auto}.bins{grid-template-columns:1fr}}

/* badge + cert */
.badge-screen{text-align:center;padding:40px 20px}
.medal{width:170px;height:170px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:80px;animation:pop .8s var(--spring) both;
  background:radial-gradient(circle at 35% 30%,#FFF4CC,var(--sun));box-shadow:0 0 0 10px #fff,0 0 0 14px var(--sun-soft),var(--shadow)}
.badge-screen h2{font-size:38px}
.badge-screen p{color:var(--muted);font-size:20px}
.cert{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px;text-align:center;border:10px solid var(--sun-soft);position:relative}
.cert h2{font-size:34px;color:var(--coral)}
.cert .who{font-family:Fredoka;font-size:40px;border-bottom:3px dotted var(--line);display:inline-block;padding:4px 20px;margin:10px 0}
.cert .medals{display:flex;gap:16px;justify-content:center;margin:18px 0;flex-wrap:wrap}
.cert .medals div{background:var(--bg);border-radius:var(--r-md);padding:12px 16px;font-weight:800}
.cert .safe{margin-top:10px;color:var(--muted)}
.name-in{font:inherit;font-weight:800;font-size:22px;padding:12px 18px;border-radius:99px;border:2px solid var(--line);text-align:center;outline:none}

/* grown-ups */
.gu h2{font-size:30px;margin:30px 0 10px}
.gu h3{font-size:21px;margin:26px 0 8px}
.gu p,.gu li{color:#46425F}
.gu .note{background:var(--sun-soft);border-radius:var(--r-md);padding:18px 20px}
.refs{list-style:none;padding:0;margin:0;counter-reset:r}
.refs li{counter-increment:r;padding:10px 0 10px 40px;position:relative;border-bottom:1px solid var(--line);font-size:16px}
.refs li::before{content:counter(r);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted)}
.refs a{color:var(--teal);font-weight:700;text-decoration:none}
.refs a:hover{text-decoration:underline}
.refs .org{font-weight:800;color:var(--ink)}

/* chat */
.chat-fab-unused{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:10px;padding:12px 20px 12px 12px;border-radius:99px;background:var(--ink);color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(46,42,71,.3);transition:transform .25s var(--spring)}
.chat-fab:hover{transform:translateY(-3px) scale(1.03)}
.chat-fab .mini{width:38px;height:38px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font-size:20px}
.chat{position:fixed;right:22px;bottom:22px;z-index:50;width:min(400px,calc(100vw - 28px));height:min(600px,calc(100vh - 40px));background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(46,42,71,.28);display:flex;flex-direction:column;overflow:hidden;animation:rise .4s var(--spring)}
.chat header{padding:16px 18px;background:linear-gradient(135deg,var(--coral),#FFAA8C);color:#fff;display:flex;align-items:center;gap:12px}
.chat header .face{width:44px;height:44px;border-radius:50%;background:#fff;padding:3px}
.chat header b{font-family:Fredoka;font-size:20px;font-weight:600} .chat header small{display:block;opacity:.9;font-weight:700}
.chat header button{margin-left:auto;color:#fff;font-size:26px;width:36px;height:36px;border-radius:12px}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.m{max-width:86%;padding:11px 15px;border-radius:20px;font-weight:600;font-size:16px;line-height:1.45;animation:rise .3s var(--spring);white-space:pre-wrap}
.m.bot{background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 6px rgba(46,42,71,.06)}
.m.me{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:6px}
.typing{display:flex;gap:5px;padding:14px 16px;align-items:center}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:bob 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.sugs{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0}
.sugs button{padding:8px 12px;border-radius:99px;background:var(--lavender-soft);color:#5646B8;font-weight:800;font-size:14px}
.chat form{display:flex;gap:8px;padding:12px 14px 14px}
.chat input{flex:1;font:inherit;font-weight:700;padding:12px 16px;border-radius:99px;border:2px solid var(--line);outline:none}
.chat input:focus{border-color:var(--coral)}
.chat form button{width:48px;height:48px;border-radius:50%;background:var(--coral);color:#fff;font-size:20px}
.chat .disc{font-size:12px;color:var(--muted);text-align:center;padding:0 14px 10px;font-weight:700}

footer.foot{text-align:center;color:var(--muted);font-size:14px;margin-top:50px}
@media print{.top,.chat-fab,.chat,.no-print{display:none!important}body{background:#fff}.cert{box-shadow:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.peek{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.peek-c{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.peek-c .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:12px}
.peek-c.coral .ic{background:var(--coral-soft)} .peek-c.teal .ic{background:var(--teal-soft)} .peek-c.lavender .ic{background:var(--lavender-soft)}
.peek-c h3{font-size:21px;margin-top:2px} .peek-c p{margin:4px 0 0;color:var(--muted)}
@media(max-width:700px){.peek{grid-template-columns:1fr}}

.ask-btn{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--ink);color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(46,42,71,.18);transition:transform .2s var(--spring)}
.ask-btn:hover{transform:translateY(-1px) scale(1.03)}
.ask-btn .mini{width:30px;height:30px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font-size:15px}
.link-btn .short{display:none}
@media(max-width:560px){
  .top .in{gap:8px;padding:10px 12px}
  .logo{font-size:18px;white-space:nowrap}.logo .dot{width:30px;height:30px;font-size:15px}
  .stars{padding:5px 10px;font-size:15px;white-space:nowrap}
  .ask-btn{padding:4px}.ask-btn .lbl{display:none}
  .link-btn{padding:6px 8px;font-size:15px;white-space:nowrap}.link-btn .full{display:none}.link-btn .short{display:inline}
  .chat{right:0;left:0;bottom:0;top:0;width:100%;height:100%;border-radius:0}
  .mod{flex-wrap:wrap}.mod .state{margin-left:88px}
  .card{padding:26px 18px 20px;min-height:0}
}
.btn:disabled{background:#E7E1DA!important;color:#8A8499!important;box-shadow:0 4px 0 #D6CFC6!important;opacity:1}
.tiles.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.tiles.six{grid-template-columns:repeat(2,1fr)}}
.cert .who.empty{color:#C9C2D6}
.m.bot{display:flex;gap:8px;align-items:flex-start}
.chat .think{font-size:13px;color:var(--muted);font-weight:700;padding:0 4px}
.chat .help{font-size:12.5px;text-align:center;padding:8px 14px 0;color:var(--muted);font-weight:700}
.chat .help a{color:var(--coral);text-decoration:none;font-weight:800}
.say{margin-left:auto;font-size:13px;background:var(--sun-soft);border-radius:99px;padding:3px 8px;flex:none;align-self:flex-end}