@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;700&display=swap');
:root{--green:#2e9e4f;--leaf:#7ed957;--sun:#ffd23f;--orange:#ff8c1a;--sky:#4fb3ff;--berry:#e8457a;--ink:#24324a;--cream:#fffaf0}
*{box-sizing:border-box}body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55}
h1,h2,h3{font-family:'Baloo 2',cursive;line-height:1.1;margin:.2em 0}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header{background:var(--green);position:sticky;top:0;z-index:5;box-shadow:0 3px 0 #1f7a3a}
nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 0}
.logo{font-family:'Baloo 2';font-weight:800;font-size:1.6rem;color:var(--sun);text-decoration:none;text-shadow:2px 2px 0 #1f7a3a}
nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
nav ul a{color:#fff;text-decoration:none;font-weight:700;padding:6px 12px;border-radius:99px}
nav ul a:hover,nav ul a.on{background:var(--sun);color:var(--ink)}
.hero{background:linear-gradient(180deg,#bff0a8,#fff6c9);padding:50px 0 30px;text-align:center}
.hero h1{font-size:clamp(2.4rem,7vw,4.4rem);color:var(--green);text-shadow:3px 3px 0 var(--sun)}
.hero p{font-size:1.2rem;max-width:640px;margin:10px auto 20px}
.hero img{margin:24px auto 0;border-radius:24px;border:6px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.btn{display:inline-block;font-family:'Baloo 2';font-weight:700;font-size:1.15rem;padding:12px 26px;border-radius:99px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.2);margin:4px}
.btn:active{transform:translateY(2px)}
.b-orange{background:var(--orange);color:#fff}.b-sky{background:var(--sky);color:#fff}.b-berry{background:var(--berry);color:#fff}.b-sun{background:var(--sun);color:var(--ink)}
section{padding:50px 0}section h2{font-size:2.4rem;text-align:center;color:var(--orange)}
.sub{text-align:center;max-width:620px;margin:0 auto 26px}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border-radius:22px;padding:16px;box-shadow:0 6px 0 rgba(0,0,0,.07);border:3px solid #f1e6c8}
.card img{border-radius:14px}.card h3{font-size:1.6rem;margin-top:10px}
.tag{display:inline-block;background:var(--sun);border-radius:99px;padding:2px 10px;font-weight:700;font-size:.85rem}
.book{background:#e6f7ff}.book .inner{display:grid;gap:30px;grid-template-columns:1fr 1.2fr;align-items:center}
.cover{background:linear-gradient(160deg,var(--leaf),var(--green));border-radius:16px;padding:22px;color:#fff;text-align:center;box-shadow:8px 8px 0 var(--ink);transform:rotate(-2deg)}
.cover h3{font-size:2rem;color:var(--sun);text-shadow:2px 2px 0 #1f7a3a}.cover img{border-radius:10px;margin-top:10px}
.price{font-family:'Baloo 2';font-size:1.3rem}ul.ticks{padding-left:1.2em}ul.ticks li::marker{content:"🌴 "}
.todo{display:block;font-size:.8rem;color:#b03030;font-weight:700;margin-top:6px}
.soon{background:#fff0f5}.soon .card{text-align:center}.soon .emoji{font-size:3.4rem}
.cta{background:var(--sun);text-align:center}
form{display:grid;gap:12px;max-width:440px;margin:0 auto}
input{font:inherit;padding:12px 16px;border-radius:14px;border:3px solid #d9cfae;width:100%}
.pack{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pack .card{text-align:center}.num{font-family:'Baloo 2';font-size:2.2rem;color:var(--sky)}
footer{background:var(--ink);color:#dde;padding:30px 0;text-align:center;font-size:.95rem}
footer a{color:var(--sun)}
@media(max-width:760px){.book .inner{grid-template-columns:1fr}.cover{transform:none}section{padding:36px 0}}
.cover{padding:10px;background:#fff}.cover img{margin:0;border-radius:10px}
.hero-banner-slot{margin:24px auto 0;max-width:900px;aspect-ratio:16/5;display:flex;align-items:center;justify-content:center;border:4px dashed var(--orange);border-radius:24px;background:repeating-linear-gradient(45deg,#fff8e0,#fff8e0 14px,#ffeec2 14px,#ffeec2 28px);font-weight:700;padding:10px}
.prod{display:flex;flex-direction:column}.prod img{aspect-ratio:3/4;object-fit:cover}.prod .btn{text-align:center}
.goal{background:#fff;border-radius:99px;height:30px;border:3px solid var(--ink);overflow:hidden;max-width:600px;margin:14px auto}.goal div{height:100%;background:linear-gradient(90deg,var(--sky),var(--leaf))}
/* ===== 2026-10 revamp ===== */
body{font-size:1.08rem}
.btn{font-size:1.25rem;padding:14px 30px;min-height:52px}
nav ul a.act{background:var(--berry)}
.books{background:linear-gradient(180deg,#e6f7ff,#fff0f5)}
.bookgrid{display:grid;gap:26px;grid-template-columns:1.6fr 1fr 1fr;align-items:stretch}
.bk{background:#fff;border-radius:26px;padding:20px;border:4px solid var(--sun);box-shadow:0 8px 0 rgba(0,0,0,.08);text-align:center}
.bk.main{border-color:var(--orange);background:#fffaf0}
.bk.main img{max-width:260px;margin:0 auto 10px;border-radius:12px;box-shadow:6px 6px 0 var(--ink)}
.bk ul{text-align:left;font-size:1rem}
.mystery{width:100%;max-width:220px;margin:0 auto 10px;display:block;aspect-ratio:3/4;border-radius:14px;box-shadow:6px 6px 0 var(--ink);object-fit:cover}
.bk .ages{font-family:'Baloo 2';font-weight:800;font-size:1.3rem;color:var(--sky)}
form.notify{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
form.notify input{flex:1 1 160px;padding:10px 14px}form.notify .btn{font-size:1rem;padding:10px 18px;min-height:0}
.ok{color:var(--green);font-weight:700}
.act-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0}
.act-nav a{background:var(--sky);color:#fff;font-family:'Baloo 2';font-weight:700;padding:12px 20px;border-radius:18px;text-decoration:none;font-size:1.2rem;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.act-nav a:nth-child(2){background:var(--berry)}.act-nav a:nth-child(3){background:var(--orange)}.act-nav a:nth-child(4){background:var(--green)}.act-nav a:nth-child(5){background:#8a5cf6}
.pr .card{text-align:center}.pr img{border:2px solid #eee;max-height:320px;margin:0 auto;object-fit:contain}
.palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.palette button{width:46px;height:46px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #ccc;cursor:pointer}
.palette button.sel{box-shadow:0 0 0 4px var(--ink)}
#colorCanvas{width:100%;max-width:1000px;margin:0 auto;display:block;border:4px solid var(--sun);border-radius:16px;background:#fff;cursor:crosshair;touch-action:manipulation}
.ccard{text-align:center}.ccard img{height:200px;object-fit:contain;margin:0 auto;background:#f3fbff}.ccard .rank{font-family:'Baloo 2';font-weight:800;color:var(--orange)}
.den{text-align:center;max-width:640px;margin:0 auto}.den .spot{font-size:5rem;margin:10px}
.den .msg{font-family:'Baloo 2';font-size:2rem;min-height:2.6rem;color:var(--berry)}
.den .choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.den .choices button{font-size:3rem;background:#fff;border:4px solid var(--sun);border-radius:20px;width:110px;height:110px;cursor:pointer}
.mem{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);max-width:560px;margin:0 auto}
.mem button{aspect-ratio:1;border-radius:16px;border:4px solid var(--green);background:var(--leaf);cursor:pointer;padding:4px;font-size:2rem;color:#fff}
.mem button img{width:100%;height:100%;object-fit:contain;display:none}
.mem button.up{background:#fff}.mem button.up img{display:block}.mem button.done{border-color:var(--sun)}
@media(max-width:900px){.bookgrid{grid-template-columns:1fr}}
@media print{header,footer,.noprint{display:none}}