/* WhyForKids shared kids-book theme — derived from dinosaurs/ */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
:root{
  --cream:#FFF6E5; --cream-2:#FCEBC8; --ink:#2B2118; --ink-2:#6B5A48;
  --green:#2F7D4F; --green-2:#4FB477; --leaf:#DDF2D2;
  --orange:#FF8A3D; --orange-2:#FFD3A8; --sun:#FFC83D;
  --blue:#3A9BC9; --blue-2:#D3EEFA; --purple:#2A1E3F; --pink:#F06C9B;
  --r:28px; --shadow:0 6px 0 rgba(43,33,24,.9);
  --font-d:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-b:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font-b);color:var(--ink);background:var(--cream);font-size:18px;line-height:1.7;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:12px}

.topbar{position:fixed;inset:12px 12px auto;z-index:50;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;background:rgba(255,246,229,.92);backdrop-filter:blur(10px);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.topbar .back,.topbar .brand{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:20px;white-space:nowrap}
.lang-toggle{margin-left:auto;display:flex;gap:4px;padding:3px;border:3px solid var(--ink);border-radius:999px;background:#fff}
.lang-toggle button{font-family:var(--font-d);font-size:15px;padding:4px 12px;border-radius:999px}
.lang-toggle button.on{background:var(--sun)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:20px;padding:10px 22px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-big{font-size:26px;padding:14px 32px;background:var(--orange);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-sun{background:var(--sun)}

.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center}
.hero-copy{position:relative;z-index:5;text-align:center;padding:120px 20px 28vh;max-width:820px}
.hero-kicker{display:inline-block;font-family:var(--font-d);font-size:22px;color:var(--green);background:rgba(255,246,229,.92);border:3px solid var(--ink);border-radius:999px;padding:2px 18px;margin-bottom:14px}
.title-3d{font-family:var(--font-d);font-weight:400;font-size:clamp(52px,11vw,120px);line-height:1.05;color:var(--sun);letter-spacing:.04em;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  text-shadow:0 2px 0 #E89A1C,0 4px 0 #E89A1C,0 6px 0 #D9850F,0 8px 0 #C9760A,0 10px 0 var(--ink),0 18px 24px rgba(0,0,0,.25)}
.hero-sub{font-size:20px;margin:16px auto 22px;max-width:30em;font-weight:600;text-shadow:0 1px 0 #fff}

.sec{position:relative;padding:clamp(64px,9vw,110px) clamp(16px,4vw,48px)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 36px}
.sec-head h2{font-family:var(--font-d);font-weight:400;font-size:clamp(36px,5.5vw,56px);line-height:1.15;margin:12px 0 10px}
.chip{display:inline-block;font-family:var(--font-d);font-size:17px;padding:4px 16px;border-radius:999px;background:var(--green-2);color:#fff;border:3px solid var(--ink)}
.card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--ink);padding:24px}
.panel{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--ink);overflow:hidden}

html.lang-en .zh{display:none!important}
html.lang-zh .en,html:not(.lang-en) .en{display:none!important}
html.lang-en .en{display:revert!important}
html.lang-zh .zh,html:not(.lang-en) .zh{display:revert!important}