:root { --ink:#123d77; --blue:#2284dc; --mint:#36c894; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; background:#d9f5f1; color:var(--ink); font-family:Nunito,sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.page-shell { position:relative; width:min(100% - 32px,1400px); min-height:calc(100vh - 32px); margin:16px auto; overflow:hidden; border:7px solid #15384a; border-radius:28px; background:#fffdf6; box-shadow:0 10px 0 rgba(18,57,75,.17); }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,76px); border-bottom:2px solid rgba(18,61,119,.08); }.brand { display:inline-flex; gap:9px; align-items:center; font:800 clamp(20px,2vw,26px)/1 "Baloo 2",sans-serif; letter-spacing:.2px; text-transform:uppercase; }.brand-mark { color:#20a6cf; font-size:25px; transform:rotate(18deg); }.desktop-nav { display:flex; gap:clamp(22px,3vw,45px); font-weight:900; }.desktop-nav a { position:relative; padding:10px 0; }.desktop-nav a::after { content:""; position:absolute; height:3px; left:50%; right:50%; bottom:2px; border-radius:4px; background:var(--mint); transition:.2s; }.desktop-nav a:hover::after { left:0; right:0; }.menu-button { display:none; width:42px; height:42px; padding:9px; border:0; background:transparent; cursor:pointer; }.menu-button span { display:block; height:3px; margin:4px 0; border-radius:4px; background:var(--ink); }.mobile-menu { display:none; }
.hero { position:relative; display:grid; grid-template-columns:minmax(410px,.83fr) minmax(570px,1.17fr); align-items:center; min-height:620px; padding:58px clamp(22px,6vw,92px) 54px; }
.hero-copy { position:relative; z-index:2; }.eyebrow { margin:0 0 12px; color:#2274b8; font-size:12px; font-weight:900; letter-spacing:1.25px; }.eyebrow span { color:#25a7c8; font-size:18px; vertical-align:-2px; } h1,h2 { margin:0; font-family:"Baloo 2",cursive; font-weight:800; letter-spacing:-.6px; } h1 { max-width:680px; font-size:clamp(48px,5.4vw,83px); line-height:.89; color:#113e79; } h1 em { color:#1e5da7; font-style:normal; display:inline-block; transform:rotate(-2deg); }.intro { max-width:455px; margin:24px 0 27px; font-size:clamp(17px,1.6vw,21px); font-weight:800; line-height:1.25; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }.button { min-height:60px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:18px; padding:0 22px; font-size:18px; font-weight:900; cursor:pointer; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translateY(-3px); }.primary { color:#fff; background:var(--mint); box-shadow:0 5px 0 #1a9c75,0 11px 22px rgba(28,147,110,.22); }.secondary { color:#fff; background:#db0b8f; box-shadow:0 5px 0 #106aaa,0 11px 22px rgba(21,111,184,.17); }.play { font-size:21px; }.hand { font-size:26px; line-height:1; }.fun-fact { max-width:455px; display:flex; align-items:center; gap:10px; margin-top:30px; padding:12px 16px; border:2px dashed #badfd3; border-radius:16px; color:#376384; background:#fbfffc; font-size:14px; line-height:1.2; }.fun-fact p { margin:0; transition:opacity .14s; }.fun-fact strong { color:var(--ink); }.fact-spark { font-size:22px; color:#f3ad2e; }
.character-stage { position:relative; z-index:1; height:510px; }.hero-illustration { position:absolute; z-index:2; width:min(108%,680px); max-height:570px; height:auto; right:-3%; bottom:-22px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 11px 8px rgba(15,70,96,.14)); transform-origin:bottom center; transition:filter .25s,transform .25s; }.character-stage.is-active .hero-illustration { filter:drop-shadow(0 0 0 #ffd54a) drop-shadow(0 0 23px rgba(255,188,38,.75)); transform:scale(1.025); }.speech-bubble { position:absolute; z-index:4; top:58px; left:7%; padding:14px 19px; transform:rotate(-5deg); border:3px solid #48a9df; border-radius:45% 44% 42% 42%; background:#fff; color:var(--ink); box-shadow:0 5px 0 rgba(67,146,197,.12); font-size:16px; font-weight:900; line-height:1.05; text-align:center; }.speech-bubble::after { content:""; position:absolute; width:18px; height:18px; bottom:-11px; left:35px; transform:rotate(34deg); border-right:3px solid #48a9df; border-bottom:3px solid #48a9df; background:#fff; }.skeleton-hotspot { position:absolute; z-index:5; right:11%; top:50%; display:flex; align-items:center; gap:8px; padding:8px 11px; border:0; border-radius:999px; background:rgba(255,255,255,.93); color:var(--ink); box-shadow:0 4px 13px rgba(18,72,104,.18); font-size:12px; font-weight:900; cursor:pointer; }.hotspot-label { white-space:nowrap; }.pulse { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#ffbd34; box-shadow:0 0 0 3px #ffbd34; animation:pulse 1.8s infinite; }.ground-shadow { position:absolute; z-index:1; width:78%; height:23px; left:14%; bottom:-7px; border-radius:100%; background:rgba(35,137,103,.12); filter:blur(5px); }
.explore-section { padding:54px clamp(22px,6vw,92px) 70px; border-top:2px solid #dcf0ea; background:#f4fffc; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:23px; } h2 {  font-size:clamp(34px,4vw,52px); line-height:.98; }.lesson-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.lesson-card { min-height:132px; display:flex; align-items:center; gap:15px; padding:18px; border-radius:23px; color:var(--ink); box-shadow:0 14px 0 rgba(22,91,125,.08); transition:transform .2s; }.lesson-card:hover { transform:translateY(-5px); }.lesson-card.blue { background:#dff4ff; }.lesson-card.green { background:#dcfae9; }.lesson-card.yellow { background:#fff0bd; }.lesson-icon { display:grid; flex:0 0 54px; width:54px; height:54px; place-items:center; border-radius:17px; background:rgba(255,255,255,.7); font-size:29px; }.lesson-card span:nth-child(2) { display:grid; gap:2px; }.lesson-card strong { font-size:20px; }.lesson-card small { font-size:13px; font-weight:700; line-height:1.1; }.lesson-card b { margin-left:auto; font-size:26px; } footer { min-height:72px; display:flex; align-items:center; justify-content:center; gap:25px; color:#21568e; font:800 16px "Baloo 2",cursive; letter-spacing:.7px; text-transform:uppercase; } footer i { color:#49b980; font-style:normal; }



@keyframes pulse { 0%,100% { box-shadow:0 0 0 3px #ffbd34,0 0 0 0 rgba(255,191,66,.4); } 50% { box-shadow:0 0 0 3px #ffbd34,0 0 0 14px rgba(255,191,66,0); } }
@media (max-width:900px) { .hero { grid-template-columns:minmax(370px,.78fr) minmax(420px,1.22fr); padding-inline:35px; }.hero-illustration { width:125%; right:-14%; }.skeleton-hotspot { right:2%; }.speech-bubble { left:0; }.desktop-nav { gap:20px; } }
@media (max-width:730px) { 
    .page-shell { width:min(100% - 16px,650px); min-height:calc(100vh - 16px); margin:8px auto; border-width:5px; border-radius:22px; }
    .topbar { height:68px; padding:0 18px; }
    .desktop-nav { display:none; }
    .menu-button { display:block; }
    .mobile-menu { padding:11px 20px 17px; grid-template-columns:repeat(3,1fr); gap:9px; border-bottom:2px solid rgba(18,61,119,.08); background:#fffdf6; font-size:13px; font-weight:900; text-align:center; }.mobile-menu:not([hidden]) { display:grid; }.hero { display:flex; flex-direction:column; min-height:0; padding:37px 20px 34px; text-align:center; }.hero-copy { display:contents; }.eyebrow { order:1; font-size:10px; }.hero h1 { order:2; margin-top:4px; font-size:clamp(47px,13.4vw,70px); }.intro { order:3; margin:17px 0 13px; font-size:16px; }.desktop-break { display:none; }.character-stage { order:4; width:100%; max-width:500px; height:365px; margin-top:7px; }.hero-illustration { width:128%; max-height:none; right:-14%; bottom:-18px; }.skeleton-hotspot { top:70%; right:12%; padding:7px 9px; }.hotspot-label { display:none; }.actions { order:5; width:100%; justify-content:center; margin-top:13px; }.button { width:min(100%,350px); min-height:54px; padding:0 16px; border-radius:16px; font-size:17px; }.secondary { min-height:48px; font-size:16px; }.fun-fact { order:6; margin:20px auto 0; text-align:left; font-size:13px; }.leaf-one { top:23%; left:-4%; transform:scale(.7) rotate(-25deg); }.leaf-two { right:-4%; bottom:32%; transform:scale(.58) rotate(145deg); }.star-one { top:11%; right:7%; font-size:21px; }.star-two { bottom:15%; left:5%; }.explore-section { padding:40px 18px 47px; }.section-heading { display:block; margin-bottom:22px; text-align:center; }.section-heading .eyebrow { margin-bottom:7px; } h2 { font-size:37px; }.lesson-grid { grid-template-columns:1fr; gap:12px; }.lesson-card { min-height:88px; border-radius:18px; }.lesson-icon { flex-basis:48px; width:48px; height:48px; font-size:24px; }.lesson-card strong { font-size:18px; } footer { min-height:58px; gap:14px; font-size:13px; } }
@media (max-width:380px) { .brand { font-size:18px; }.character-stage { height:250px !important;right: 10% !important; }.hero h1 { font-size:46px; }.button { font-size:16px; } }