/* Cocoon Kids shell — shared by every /kids page. Classes are k- prefixed on purpose:
   the site chrome carries global .hero/.card/.btn rules that would otherwise collide. */
:root{--k-sky:#dff4ff;--k-sun:#fff3c4;--k-leaf:#e7fbe9;--k-ink:#0a0a0a;--k-violet:#7c5cff;--k-pink:#ff5f8d;--k-orange:#ff8f4d;--k-head:'Fredoka','Space Grotesk',sans-serif;}
main.k-main{padding-top:74px;min-height:70vh;background:var(--white);}
.k-wrap{max-width:1040px;margin:0 auto;padding:24px 16px 64px;}
.k-h1{font-family:var(--k-head);font-weight:700;font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-0.01em;line-height:1.1;}
.k-h2{font-family:var(--k-head);font-weight:600;font-size:clamp(1.3rem,3vw,1.8rem);margin:0 0 10px;}
.k-p{font-size:1.05rem;line-height:1.55;color:#222;}
.k-muted{color:var(--grey-mid);}
/* level strip under the nav */
.k-strip{position:sticky;top:64px;z-index:90;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--k-leaf);border-bottom:2px solid var(--green);}
.k-strip a{font-weight:700;}
.k-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--white);border:calc(2px * var(--k-bwm)) solid var(--k-line);font-weight:700;font-size:.85rem;white-space:nowrap;}
.k-chip.k-free{border-color:var(--green);background:var(--green);color:var(--k-ink);}
.k-strip .k-grow{flex:1;}
.k-lang{display:inline-flex;border:calc(2px * var(--k-bwm)) solid var(--k-line);border-radius:999px;overflow:hidden;background:var(--white);}
.k-lang button{border:0;background:transparent;padding:6px 10px;font:700 .82rem var(--body-font);cursor:pointer;min-width:44px;min-height:34px;}
.k-lang button[aria-pressed="true"]{background:var(--k-ink);color:var(--white);}
.k-coins{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--k-sun);border:2px solid var(--amber);font-weight:800;font-size:.85rem;cursor:pointer;}
.k-coins .k-bar{width:70px;height:8px;background:#fff;border-radius:4px;overflow:hidden;border:1px solid var(--amber);}
.k-coins .k-bar i{display:block;height:100%;background:var(--amber);width:100%;transition:width .4s;}
/* learn strip */
.k-learn{display:flex;gap:12px;align-items:center;background:var(--k-sky);border:calc(2px * var(--k-bwm)) solid var(--k-line);border-radius:16px;padding:12px 16px;margin:18px 0 24px;font-weight:600;}
.k-learn b{font-family:var(--k-head);font-size:1.05rem;}
/* buttons */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:14px;border:calc(3px * var(--k-bwm)) solid var(--k-line);background:var(--green);color:var(--k-ink);font:700 1rem var(--body-font);cursor:pointer;box-shadow:var(--k-sh);transition:transform .08s,box-shadow .08s;text-decoration:none;}
.k-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--k-sh);}
.k-btn:active{transform:translate(2px,2px);box-shadow:var(--k-sh);}
.k-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--k-sh);}
.k-btn.k-alt{background:var(--white);}
.k-btn.k-violet{background:var(--k-violet);color:#fff;}
.k-btn.k-sun{background:var(--k-sun);}
.k-btn.k-pink{background:var(--k-pink);color:#fff;}
.k-btn.k-big{font-size:1.2rem;min-height:60px;padding:16px 30px;border-radius:18px;}
.k-btn.k-sm{min-height:38px;padding:6px 14px;font-size:.9rem;box-shadow:var(--k-sh);}
/* cards */
.k-card{background:var(--white);border:calc(3px * var(--k-bwm)) solid var(--k-line);border-radius:20px;padding:20px;box-shadow:var(--k-sh);}
.k-card.k-soft{box-shadow:none;border-width:2px;}
.k-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.k-in,.k-ta{width:100%;font:500 1.05rem var(--body-font);padding:12px 14px;border:calc(3px * var(--k-bwm)) solid var(--k-line);border-radius:14px;background:var(--white);min-height:48px;}
.k-ta{min-height:110px;resize:vertical;line-height:1.5;}
.k-in:focus,.k-ta:focus{outline:3px solid var(--green);outline-offset:2px;}
.k-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--k-leaf);border:2px solid var(--green);font-size:.78rem;font-weight:800;}
.k-tag.k-v{background:#efeaff;border-color:var(--k-violet);}
.k-tag.k-a{background:var(--k-sun);border-color:var(--amber);}
.k-tag.k-r{background:#ffe6e7;border-color:var(--red);}
/* look inside */
.k-inside{margin-top:16px;border:3px dashed var(--k-violet);border-radius:16px;background:#f7f4ff;overflow:hidden;}
.k-inside > summary,.k-inside-btn{list-style:none;cursor:pointer;padding:12px 16px;font:700 .95rem var(--body-font);color:var(--k-violet);display:flex;align-items:center;gap:8px;}
.k-inside > summary::-webkit-details-marker{display:none;}
.k-inside-body{padding:0 16px 16px;font-size:.92rem;line-height:1.5;}
.k-inside pre,.k-code{background:#1a1530;color:#e9e4ff;padding:12px;border-radius:10px;overflow:auto;font:500 .82rem ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;}
/* oops moment */
.k-oops{background:var(--k-sun);border:3px solid var(--amber);border-radius:16px;padding:14px 16px;margin-top:14px;}
.k-oops b{font-family:var(--k-head);}
/* Coco mascot */
.k-coco-dock{position:fixed;left:16px;bottom:16px;z-index:400;display:flex;align-items:flex-end;gap:8px;pointer-events:none;}
.k-coco{width:68px;height:86px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 5px 6px rgba(0,0,0,.22));animation:k-bob 3s ease-in-out infinite;}
.k-coco svg{width:100%;height:100%;display:block;}
.k-coco-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
@keyframes k-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.k-bubble{pointer-events:auto;max-width:min(320px,70vw);background:var(--white);border:calc(3px * var(--k-bwm)) solid var(--k-line);border-radius:16px;border-bottom-left-radius:4px;padding:10px 14px;font-weight:600;font-size:.95rem;line-height:1.4;box-shadow:var(--k-sh);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;margin-bottom:10px;}
.k-bubble.k-on{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.k-coco{animation:none}}
/* gate veil */
.k-veil{position:fixed;inset:0;z-index:950;background:rgba(10,10,10,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;}
.k-veil .k-card{max-width:460px;width:100%;background:var(--white);}
.k-veil h3{font-family:var(--k-head);font-size:1.5rem;margin-bottom:6px;}
.k-veil p{font-size:.95rem;line-height:1.5;margin-bottom:12px;}
.k-veil .k-row-g{display:flex;flex-direction:column;gap:10px;}
.k-veil .k-row-g[hidden]{display:none;}
.k-veil .k-err{color:var(--red);font-weight:700;font-size:.9rem;min-height:1.2em;}
.k-veil small{display:block;color:var(--grey-mid);font-size:.78rem;line-height:1.4;margin-top:10px;}
/* done card */
.k-done{position:fixed;inset:0;z-index:960;background:rgba(29,218,99,.92);display:flex;align-items:center;justify-content:center;padding:16px;}
.k-done .k-card{max-width:480px;width:100%;text-align:center;}
.k-done .k-badge{font-size:4rem;line-height:1;margin:6px 0 10px;}
.k-done h3{font-family:var(--k-head);font-size:1.8rem;}
.k-confetti{position:fixed;top:-10px;width:10px;height:16px;z-index:961;pointer-events:none;animation:k-fall linear forwards;}
@keyframes k-fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}
/* toast */
.k-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--k-ink);color:#fff;font-weight:700;padding:12px 22px;border-radius:100px;transition:transform .3s;z-index:500;font-size:.9rem;}
.k-toast.k-on{transform:translateX(-50%) translateY(0);}
/* level map (hub) */
.k-map{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.k-lvl{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;}
.k-lvl .k-num{position:absolute;top:-12px;left:-12px;width:40px;height:40px;border-radius:50%;background:var(--k-ink);color:#fff;font:800 1rem var(--k-head);display:flex;align-items:center;justify-content:center;border:3px solid var(--white);}
.k-lvl .k-emo{font-size:2.4rem;line-height:1;}
.k-lvl h3{font-family:var(--k-head);font-size:1.25rem;margin:0;}
.k-lvl p{font-size:.9rem;line-height:1.45;color:#333;margin:0;}
.k-lvl .k-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.k-lvl.k-doneL{border-color:var(--green);background:var(--k-leaf);}
.k-lvl.k-doneL::after{content:'✓';position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;background:var(--green);border:3px solid var(--white);font-weight:900;display:flex;align-items:center;justify-content:center;}
.k-stage{margin:34px 0 14px;display:flex;align-items:center;gap:12px;}
.k-stage h2{font-family:var(--k-head);font-size:1.5rem;margin:0;}
.k-stage span{font-size:1.6rem;}
@media (max-width:700px){.k-strip{top:60px;padding:8px 12px;gap:6px}.k-coins .k-bar{width:44px}.k-coco{width:54px;height:68px}.k-bubble{font-size:.85rem}main.k-main{padding-top:66px}}
@media print{.k-strip,.k-coco-dock,.k-bubble,.k-toast,.k-veil,.k-done{display:none!important}}
/* the attribute must beat every k- flex/grid class, or a "hidden" row renders anyway (found in testing) */
main.k-main [hidden],.k-veil [hidden],.k-done [hidden]{display:none!important;}
/* Kids pages: Coco owns the bottom-left, so the accessibility launcher and its panel sit
   bottom-right here. The widget's own bottom-right option never sets `right`, hence the override. */
#cocoon-a11y-btn{left:auto!important;right:20px!important;}
#cocoon-a11y-panel{left:auto!important;right:20px!important;}
@media (max-width:500px){#cocoon-a11y-btn{right:14px!important}#cocoon-a11y-panel{left:10px!important;right:10px!important}}
/* ── Hatch List lock: the section is blurred to 70% behind the waitlist until an access key opens it ── */
html.k-locked main.k-main,html.k-locked .k-strip,html.k-locked footer{filter:blur(7px) opacity(.7);pointer-events:none;user-select:none;}
html.k-locked .k-coco-dock{display:none;}
.k-wait{position:fixed;left:0;right:0;bottom:0;top:64px;z-index:940;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px 40px;background:rgba(223,244,255,.35);}
.k-wait-card{max-width:520px;width:100%;margin:auto 0;text-align:center;position:relative;}
.k-wait-top{position:relative;height:130px;margin:-4px 0 6px;}
.k-wait-coco{width:110px;height:130px;margin:0 auto;animation:k-bob 2.4s ease-in-out infinite;}
.k-wait-coco svg,.k-wait-coco img{width:100%;height:100%;object-fit:contain;}
.k-wait-pod,.k-wait-fly{position:absolute;top:18px;font-size:2rem;}
.k-wait-pod{left:14%;animation:k-bob 3s ease-in-out infinite reverse;}
.k-wait-fly{right:14%;animation:k-flap 1.6s ease-in-out infinite;}
@keyframes k-flap{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(8deg)}}
.k-kicker-s{display:inline-block;padding:4px 12px;border-radius:999px;border:calc(2px * var(--k-bwm)) solid var(--k-line);font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;background:var(--k-leaf);}
.k-wait h3{font-family:var(--k-head);font-size:clamp(1.5rem,4.5vw,2rem);line-height:1.15;margin:10px 0 8px;}
.k-wait-p{font-size:.98rem;line-height:1.5;margin:0 0 16px;color:#222;}
.k-wait-form{text-align:left;display:flex;flex-direction:column;gap:10px;}
.k-wait-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.k-wait-grid .k-wide{grid-column:1/-1;}
.k-wait-lbl{font:700 1rem var(--k-head);margin-top:6px;}
.k-kids{display:flex;flex-direction:column;gap:8px;}
.k-kid{display:grid;grid-template-columns:1fr 84px 40px;gap:8px;align-items:center;animation:k-pop .25s ease-out;}
@keyframes k-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.k-kid-x{width:40px;height:40px;border-radius:50%;border:calc(2px * var(--k-bwm)) solid var(--k-line);background:#fff;font-weight:900;cursor:pointer;}
.k-kid-add{align-self:center;display:inline-flex;align-items:center;gap:8px;border:3px dashed var(--k-violet);background:#f7f4ff;color:var(--k-violet);border-radius:999px;padding:8px 18px;font:800 .95rem var(--body-font);cursor:pointer;min-height:44px;}
.k-kid-add span{font-size:1.4rem;line-height:1;}
.k-wait .k-err{color:var(--red);font-weight:700;font-size:.9rem;min-height:1.2em;text-align:center;}
.k-wait-go{width:100%;}
.k-wait small{display:block;color:var(--grey-mid);font-size:.78rem;line-height:1.4;text-align:center;}
.k-wait-key{margin-top:14px;text-align:left;font-size:.9rem;}
.k-wait-key summary{cursor:pointer;font-weight:700;text-align:center;}
.k-wait-done{padding:10px 0;}
.k-wait-done h4{font-family:var(--k-head);font-size:1.5rem;margin:6px 0;}
.k-wait-done p{line-height:1.5;}
@media (max-width:520px){.k-wait-grid{grid-template-columns:1fr}.k-kid{grid-template-columns:1fr 70px 40px}.k-wait{top:60px;padding-top:16px}}
.k-lang button.k-lang-locked{opacity:.45;cursor:not-allowed;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.05) 6px 12px);}
.k-lang button.k-lang-locked span{font-size:.7rem;}

/* ═══════════ Stage themes ═══════════
   The look grows up with the child: Caterpillar (levels 1-4) is the illustrated,
   pastel, mockup look; Cocoon (5-8) is calmer; Butterfly (9-12) is minimal, closer
   to a real tool. Borders and hard shadows in every tool read these variables. */
:root{--k-bwm:.55;--k-line:#d6e6dc;--k-sh:0 6px 20px rgba(20,70,40,.09);--k-rad:22px;--k-soft1:#fff8e6;--k-soft2:#eaf4ff;--k-soft3:#ecfbf1;--k-soft4:#f3efff;--k-btn:#1c9d4b;--k-btn-ink:#fff;--k-head-ink:#0f2340;}
main.k-main[data-stage="2"]{--k-bwm:.45;--k-line:#dfe5ec;--k-sh:0 4px 14px rgba(20,40,70,.07);--k-rad:18px;--k-soft1:#fbfaf7;--k-soft2:#f5f8fc;--k-soft3:#f6faf7;--k-soft4:#f8f6fd;--k-btn:#1f7a45;}
main.k-main[data-stage="3"]{--k-bwm:.34;--k-line:#e6e8ec;--k-sh:none;--k-rad:12px;--k-soft1:#fff;--k-soft2:#fff;--k-soft3:#fff;--k-soft4:#fff;--k-btn:#111;--k-head-ink:#111;}
main.k-main{background:#fbfdfc;}
main.k-main[data-stage="3"]{background:#fff;}
/* cards: pastel mission blocks in stage 1, cycling colours like the mockup */
main.k-main .k-card{border-radius:var(--k-rad);box-shadow:var(--k-sh);}
main.k-main[data-stage="1"] .k-wrap > .k-card:nth-of-type(4n+1){background:var(--k-soft1)}
main.k-main[data-stage="1"] .k-wrap > .k-card:nth-of-type(4n+2){background:var(--k-soft2)}
main.k-main[data-stage="1"] .k-wrap > .k-card:nth-of-type(4n+3){background:var(--k-soft3)}
main.k-main[data-stage="1"] .k-wrap > .k-card:nth-of-type(4n+4){background:var(--k-soft4)}
main.k-main .k-h2{color:var(--k-head-ink);}
main.k-main[data-stage="3"] .k-h2,main.k-main[data-stage="3"] .k-h1{font-family:var(--body-font);letter-spacing:-.02em;font-weight:700;}
/* buttons */
main.k-main .k-btn{background:var(--k-btn);color:var(--k-btn-ink);border-radius:999px;box-shadow:0 6px 16px rgba(28,157,75,.22);}
main.k-main .k-btn:hover{box-shadow:0 8px 22px rgba(28,157,75,.3);}
main.k-main .k-btn.k-alt,main.k-main .k-btn.k-sun{background:#fff;color:var(--k-ink);box-shadow:0 2px 8px rgba(0,0,0,.06);}
main.k-main .k-btn.k-violet{background:var(--k-violet);color:#fff}
main.k-main .k-btn.k-pink{background:var(--k-pink);color:#fff}
main.k-main[data-stage="3"] .k-btn{border-radius:10px;box-shadow:none;font-weight:600;}
main.k-main[data-stage="3"] .k-btn:hover{box-shadow:none;background:#333;}
main.k-main[data-stage="3"] .k-btn.k-alt,main.k-main[data-stage="3"] .k-btn.k-sun{border-color:#d9dce1;}
main.k-main[data-stage="3"] .k-btn.k-alt:hover{background:#f5f6f8;}
main.k-main .k-in,main.k-main .k-ta{border-radius:14px;}
main.k-main[data-stage="3"] .k-in,main.k-main[data-stage="3"] .k-ta{border-radius:10px;}
/* learn strip, oops, look inside */
main.k-main .k-learn{border-radius:18px;background:linear-gradient(90deg,#eef7ff,#f4fbf6);}
main.k-main[data-stage="3"] .k-learn{background:#fafafa;border-radius:10px;}
main.k-main .k-oops{border-radius:16px;}
main.k-main .k-inside{border-radius:16px;}
main.k-main[data-stage="3"] .k-inside{border-style:solid;border-color:#e6e8ec;background:#fafafa;}
main.k-main[data-stage="3"] .k-inside>summary{color:#111;}
main.k-main[data-stage="3"] .k-tag{background:#f4f5f7;border-color:#e3e5e8;color:#333;}
/* the tool's own old title is replaced by the hero */
.k-strip{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--k-line);}
.k-strip .k-chip{border-width:1.5px;border-color:var(--k-line);}
.k-strip .k-chip.k-free{border-color:var(--green);}
.k-strip .k-lang{border-width:1.5px;}
.k-coins{border-width:1.5px;}

/* ═══════════ Tool hero ═══════════ */
.k-hero{position:relative;overflow:hidden;max-width:1040px;margin:18px auto 6px;border-radius:30px;color:var(--k-head-ink);}
.k-hero-in{position:relative;z-index:2;max-width:560px;}
.k-hero-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px 6px 8px;font:800 .74rem var(--body-font);letter-spacing:.06em;text-transform:uppercase;color:#1c6f3d;box-shadow:0 2px 10px rgba(16,80,40,.08);}
.k-hero-chip i{font-style:normal;width:28px;height:28px;border-radius:50%;background:#e9f7ee;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.k-hero-h{font-family:var(--k-head);font-weight:700;font-size:clamp(2.3rem,5.6vw,3.9rem);line-height:1;margin:14px 0 12px;letter-spacing:-.01em;}
.k-hero-h span{color:#1c9d4b;}
.k-hero-p{font-size:1.08rem;line-height:1.55;color:#2c3d4d;max-width:500px;}
.k-hero-pills{margin-top:16px;display:inline-flex;flex-wrap:wrap;gap:4px;background:#fff;border-radius:999px;padding:5px;box-shadow:0 2px 10px rgba(16,60,90,.08);}
.k-hero-pills span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.84rem;}
.k-hero-note{position:absolute;z-index:2;font-family:'Caveat',cursive;font-weight:700;font-size:1.8rem;line-height:1.05;color:#1d2b3a;transform:rotate(-10deg);text-align:center;}
.k-hero-lv{position:absolute;z-index:3;right:22px;bottom:22px;background:#1f5a3d;color:#fff;border-radius:18px;padding:12px 16px;min-width:210px;box-shadow:0 10px 26px rgba(10,50,30,.3);}
.k-hero-lv .k-row{justify-content:space-between;gap:10px;font-weight:700;}
.k-hero-lv .k-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.2);margin-top:8px;overflow:hidden;}
.k-hero-lv .k-bar i{display:block;height:100%;background:#7ef0a6;border-radius:5px;width:0;transition:width .6s;}
.k-hero-lv small{display:block;margin-top:6px;font-size:.74rem;opacity:.8;}
/* stage 1: the painted scene with Coco */
.k-hero.k-s1{padding:40px 44px 44px;min-height:420px;display:flex;align-items:center;background:#cfeafb;}
.k-hero.k-s1 .k-hero-scene{position:absolute;inset:0;background:url(/kids/img/hero-scene.webp) 72% 100%/cover no-repeat;}
.k-hero.k-s1 .k-hero-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,247,255,.94) 0%,rgba(236,247,255,.75) 38%,rgba(236,247,255,0) 60%);}
.k-hero.k-s1 .k-hero-note{right:4%;top:12%;}
/* stage 2: calmer pastel card, a smaller Coco */
.k-hero.k-s2{padding:34px 40px;min-height:0;background:linear-gradient(120deg,#eef4ff 0%,#f3efff 55%,#eefaf3 100%);border:1px solid #e1e7f2;}
.k-hero.k-s2 .k-hero-coco{position:absolute;right:210px;bottom:-6px;width:130px;height:163px;background:url(/kids/img/coco-sm.webp) center bottom/contain no-repeat;opacity:.95;}
.k-hero.k-s2 .k-hero-note{right:36px;top:22px;font-size:1.4rem;color:#4a4f73;}
.k-hero.k-s2 .k-hero-lv{background:#2d3a63;}
.k-hero.k-s2 .k-hero-h{font-size:clamp(2rem,4.6vw,3rem);}
/* stage 3: minimal header, no art */
.k-hero.k-s3{padding:30px 4px 22px;border-radius:0;border-bottom:1px solid #e6e8ec;margin-bottom:10px;}
.k-hero.k-s3 .k-hero-chip{background:none;box-shadow:none;padding:0;color:#6b7280;letter-spacing:.12em;}
.k-hero.k-s3 .k-hero-chip i{display:none;}
.k-hero.k-s3 .k-hero-h{font-family:var(--body-font);font-weight:700;letter-spacing:-.03em;font-size:clamp(2rem,4.4vw,2.9rem);color:#111;}
.k-hero.k-s3 .k-hero-h span{color:#111;}
.k-hero.k-s3 .k-hero-p{color:#555;}
.k-hero.k-s3 .k-hero-pills{box-shadow:none;border:1px solid #e6e8ec;border-radius:10px;}
.k-hero.k-s3 .k-hero-pills span{font-weight:600;color:#444;}
.k-hero.k-s3 .k-hero-lv{position:static;margin-top:16px;display:inline-block;background:#fff;color:#111;border:1px solid #e6e8ec;box-shadow:none;border-radius:10px;min-width:260px;}
.k-hero.k-s3 .k-hero-lv .k-bar{background:#eef0f3}.k-hero.k-s3 .k-hero-lv .k-bar i{background:#111}
main.k-main .k-wrap{padding-top:12px;}

/* ═══════════ Tool footer: what you discovered + next challenge ═══════════ */
.k-end{max-width:1040px;margin:10px auto 40px;padding:0 16px;display:grid;grid-template-columns:1.5fr 1fr;gap:16px;}
.k-disc{background:#fff9ea;border:1px solid #f4e3b3;border-radius:24px;padding:18px 20px;}
.k-disc h3{font-family:var(--k-head);font-size:1.25rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.k-disc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.k-disc-row div{text-align:center;font-size:.86rem;line-height:1.35;font-weight:600;color:#3a4a41;}
.k-disc-row i{font-style:normal;display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto 6px;border-radius:50%;background:#fff;border:1.5px solid #eadfbf;font-size:1.5rem;}
.k-next{position:relative;overflow:hidden;background:#1f7a45;color:#fff;border-radius:24px;padding:20px 22px 20px 128px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:150px;text-decoration:none;}
.k-next::before{content:'';position:absolute;left:10px;bottom:-4px;width:110px;height:138px;background:url(/kids/img/coco-sm.webp) center bottom/contain no-repeat;}
.k-next b{font-family:var(--k-head);font-size:1.35rem;line-height:1.15;}
.k-next span{align-self:flex-start;background:#fff;color:#1f7a45;font-weight:800;border-radius:999px;padding:9px 18px;}
main.k-main[data-stage="2"] ~ .k-end .k-disc{background:#f7f8fc;border-color:#e3e7f0;}
main.k-main[data-stage="2"] ~ .k-end .k-next{background:#2d3a63;}
main.k-main[data-stage="3"] ~ .k-end .k-disc{background:#fff;border-color:#e6e8ec;border-radius:12px;}
main.k-main[data-stage="3"] ~ .k-end .k-disc h3{font-family:var(--body-font);}
main.k-main[data-stage="3"] ~ .k-end .k-disc-row i{border-radius:10px;border-color:#e6e8ec;background:#fafafa;}
main.k-main[data-stage="3"] ~ .k-end .k-next{background:#111;border-radius:12px;padding-left:22px;}
main.k-main[data-stage="3"] ~ .k-end .k-next::before{display:none;}
main.k-main[data-stage="3"] ~ .k-end .k-next b{font-family:var(--body-font);}
main.k-main[data-stage="3"] ~ .k-end .k-next span{color:#111;border-radius:8px;}
@media (max-width:860px){
  .k-hero{margin:12px 12px 6px;}
  .k-hero.k-s1{display:block;padding:0 20px 24px;min-height:0;background:linear-gradient(180deg,#bfe5fb,#e6f5ff);}
  .k-hero.k-s1 .k-hero-scene{position:relative;inset:auto;height:210px;margin:0 -20px 16px;background-image:url(/kids/img/hero-scene-sm.webp);background-position:88% 100%;}
  .k-hero.k-s1 .k-hero-scene::after{background:linear-gradient(180deg,rgba(236,247,255,0) 70%,rgba(230,245,255,1) 100%);}
  .k-hero.k-s1 .k-hero-note{top:16px;left:16px;right:auto;font-size:1.25rem;}
  .k-hero.k-s2{padding:24px 20px 24px;}.k-hero.k-s2 .k-hero-coco{right:10px;width:80px;height:100px;opacity:.5;}.k-hero.k-s2 .k-hero-note{display:none;}
  .k-hero-lv{position:static;margin-top:16px;display:block;}
  .k-end{grid-template-columns:1fr;}
}
@media (max-width:520px){.k-disc-row{grid-template-columns:1fr}.k-disc-row div{display:flex;align-items:center;gap:10px;text-align:left}.k-disc-row i{margin:0}.k-hero-h{font-size:2.1rem}}

/* mission badges (added by coco.js) */
.k-mission{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.k-mission i{font-style:normal;width:46px;height:46px;border-radius:50%;background:#1c7a45;color:#fff;display:flex;align-items:center;justify-content:center;font:700 1.35rem var(--k-head);box-shadow:0 4px 10px rgba(28,122,69,.25);}
.k-mission span{font:800 .72rem var(--body-font);letter-spacing:.08em;text-transform:uppercase;color:#1c7a45;background:#e3f6ea;border-radius:999px;padding:3px 10px;}
main.k-main[data-stage="1"] .k-card.k-tint1{background:#fff8e6;border-color:#f3e3b8}
main.k-main[data-stage="1"] .k-card.k-tint2{background:#edf5ff;border-color:#d3e3f8}
main.k-main[data-stage="1"] .k-card.k-tint3{background:#eefbf2;border-color:#cdeed8}
main.k-main[data-stage="1"] .k-card.k-tint4{background:#f4f0ff;border-color:#ddd4f7}
main.k-main[data-stage="1"] .k-card.k-tint2 .k-mission i{background:#2f6fe0;box-shadow:0 4px 10px rgba(47,111,224,.25)}
main.k-main[data-stage="1"] .k-card.k-tint2 .k-mission span{background:#dfeaff;color:#2f6fe0}
main.k-main[data-stage="1"] .k-card.k-tint4 .k-mission i{background:#7c5cff;box-shadow:0 4px 10px rgba(124,92,255,.25)}
main.k-main[data-stage="1"] .k-card.k-tint4 .k-mission span{background:#ebe5ff;color:#6a4be0}
main.k-main[data-stage="1"] .k-card.k-tint1 .k-mission i{background:#d98a00;box-shadow:0 4px 10px rgba(217,138,0,.25)}
main.k-main[data-stage="1"] .k-card.k-tint1 .k-mission span{background:#fdebc4;color:#a86a00}
main.k-main[data-stage="2"] .k-mission i{width:34px;height:34px;font-size:1rem;background:#2d3a63;box-shadow:none}
main.k-main[data-stage="2"] .k-mission span{background:#eef1f8;color:#2d3a63}
main.k-main[data-stage="3"] .k-mission{gap:8px;margin-bottom:2px}
main.k-main[data-stage="3"] .k-mission i{width:auto;height:auto;background:none;color:#9aa0a8;box-shadow:none;font:600 .85rem ui-monospace,Menlo,monospace;border-radius:0}
main.k-main[data-stage="3"] .k-mission span{background:none;padding:0;color:#9aa0a8;letter-spacing:.14em}
main.k-main[data-stage="1"] .k-card{padding:24px}

/* ═══════════ Coco, animated (the vector in coco.js) ═══════════ */
.kc{display:block;width:100%;height:100%;overflow:visible;}
.kc *{transform-box:view-box;}
.kc .kc-all{transform-origin:66px 141px;animation:kc-breathe 3.4s ease-in-out infinite;}
@keyframes kc-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.kc .kc-head{transform-origin:93px 96px;animation:kc-tilt 7s ease-in-out infinite;}
@keyframes kc-tilt{0%,66%,100%{transform:rotate(0)}74%{transform:rotate(-6deg)}84%{transform:rotate(4deg)}92%{transform:rotate(-1deg)}}
.kc .kc-ant1{transform-origin:82px 30px;animation:kc-sway 2.6s ease-in-out infinite;}
.kc .kc-ant2{transform-origin:102px 29px;animation:kc-sway 2.6s ease-in-out -1.3s infinite;}
@keyframes kc-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.kc .kc-eyes{transform-origin:93px 60px;animation:kc-blink 5.2s infinite;}
@keyframes kc-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
.kc .kc-pup{transform:translate(var(--kc-lx,0px),var(--kc-ly,0px));transition:transform .25s ease-out;}
.kc .kc-seg{animation:kc-crawl 2.2s ease-in-out infinite;}
.kc .kc-s2{animation-delay:-.35s}.kc .kc-s3{animation-delay:-.7s}
@keyframes kc-crawl{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.kc .kc-hap{opacity:0;transition:opacity .15s;}
.k-happy .kc .kc-eyes{opacity:0}.k-happy .kc .kc-hap{opacity:1}
.kc .kc-mouth{transform-origin:93px 79px;}
.k-talk .kc .kc-mouth{animation:kc-talk .26s ease-in-out infinite alternate;}
@keyframes kc-talk{from{transform:scaleY(.45)}to{transform:scaleY(1.12)}}
.k-talk .kc .kc-all{animation:kc-chatter .5s ease-in-out infinite alternate;}
@keyframes kc-chatter{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.k-hop .kc .kc-all{animation:kc-hop .75s cubic-bezier(.3,.7,.4,1);}
@keyframes kc-hop{0%{transform:none}20%{transform:scale(1.08,.88)}50%{transform:translateY(-18px) scale(.95,1.06)}78%{transform:scale(1.06,.93)}100%{transform:none}}
/* the dock: sized for the vector, no photo shadow */
.k-coco{width:78px;height:84px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.12));animation:none;}
.k-coco:hover .kc .kc-all{animation:kc-hop .75s cubic-bezier(.3,.7,.4,1);}
.k-wait-coco{width:118px;height:126px;}
.k-prof-coco{width:92px;height:100px;margin:0 auto 4px;}
.kc-face{width:100%;height:100%;}
@media (max-width:700px){.k-coco{width:62px;height:68px}}
@media (prefers-reduced-motion:reduce){.kc *,.kc .kc-all{animation:none!important;transition:none!important}}
.k-scr{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:#ff9a1f;color:#fff;font-weight:800;font-size:.88rem;border-radius:999px;padding:8px 16px;text-decoration:none;}
.k-scr:hover{background:#855cd6;}