/* Child-first welcome. Learning diagrams remain live, readable SVG. */
body[data-view="home"]{background:#f3f7ff}
body[data-view="home"] .header{background:#fff;border-bottom:1px solid #dae5f5;box-shadow:none}
body[data-view="home"] .brand,body[data-view="home"] .brand small{color:#20396c}
body[data-view="home"] .header nav button{color:#526486}
body[data-view="home"] .header nav button.active{color:#214cbe;background:#eaf1ff;box-shadow:none}
body[data-view="home"] .more-menu summary{color:#415579}
body[data-view="home"] .sound{display:none}
body[data-view="home"] .header nav [data-view="explain"]{display:none}
body[data-view="home"] main{max-width:1280px;padding:28px 28px 40px}
.landing{color:#20365e}
.landing-hero{position:relative;display:grid;grid-template-columns:.95fr 1.15fr;align-items:center;min-height:555px;border-radius:36px;overflow:hidden;background:radial-gradient(ellipse at 83% 20%,#4587fa 0,transparent 55%),linear-gradient(120deg,#183da3,#2361da);box-shadow:0 18px 40px #2447811a;color:white}
.landing-copy{padding:45px 0 45px 52px;position:relative;z-index:2}
.landing-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;color:#537098;margin-bottom:9px}
.landing-copy .landing-eyebrow{color:#dceaff;font-size:16px}
.landing-copy h1{font-size:clamp(44px,4.9vw,64px);line-height:1.25;letter-spacing:-2.3px;font-weight:800;margin:18px 0 22px}
.landing-copy h1 em{font-style:normal;color:#ffdc61}
.landing-copy p{color:#e6eeff;font-size:21px;line-height:1.75;margin:0 0 26px;word-break:keep-all}
.landing-start{display:flex;gap:30px;justify-content:space-between;align-items:center;min-height:68px;padding:14px 26px;border:0;border-radius:20px;background:#ffda58;color:#183b79;font-size:24px;box-shadow:0 6px 0 #d5a924;max-width:360px;width:100%}
.landing-start:hover:not(:disabled){background:#ffe785;transform:translateY(-2px)}
.landing-start span{font-size:18px}
.landing-note{display:block;font-size:14px;color:#dfebff;margin-top:21px;line-height:1.6}
.landing-scene{height:520px;position:relative;min-width:0;isolation:isolate}
.scene-orbit{position:absolute;inset:35px 25px 38px -10px;border:1px solid #a9d7ff4f;border-radius:50%;transform:rotate(-18deg)}
.scene-orbit:after{content:"";position:absolute;inset:35px -20px;border:1px solid #a9d7ff30;border-radius:50%;transform:rotate(40deg)}
.scene-dot{position:absolute;display:block;background:#ffda58;box-shadow:0 3px 10px #163d9740;border-radius:50%}
.dot-one{width:20px;height:20px;left:17%;top:6%}.dot-two{width:11px;height:11px;right:15%;bottom:23%;background:#bfeaff}
.landing-clock-card{position:absolute;left:0;top:105px;width:61%;max-width:345px;z-index:2;text-align:center}
.landing-clock-card .clock{max-width:none;filter:drop-shadow(0 16px 12px #132d7166);overflow:visible}
.landing-clock-card output{display:inline-block;position:relative;margin-top:8px;padding:9px 24px;background:white;color:#274a8d;border-radius:18px;font-size:27px;line-height:1.4;font-weight:800;box-shadow:0 5px 16px #0d2b691f}
.landing-buddy{position:absolute;right:-1%;top:15px;width:46%;height:390px;object-fit:contain;z-index:1;filter:drop-shadow(0 15px 15px #16356533);pointer-events:none}
.landing-preview-control{position:absolute;left:0;right:0;bottom:25px;display:flex;align-items:center;flex-direction:column;gap:6px;z-index:3}
.landing-preview-control button{min-height:44px;background:#ffffff19;color:white;border:1px solid #afccff77;border-radius:24px;padding:8px 20px;font-size:16px}
.landing-preview-control button:hover:not(:disabled){background:#ffffff30}
.landing-preview-control>span{font-size:14px;color:#dae8ff;min-height:22px}
.landing-basics{padding:42px 0 30px}
.landing-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.landing h2{font-size:28px;letter-spacing:-.8px;line-height:1.4;margin:0}
.landing-section-head p,.landing-more p{font-size:16px;color:#627795;margin:5px 0 0}
.landing-lessons{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.landing-lesson{position:relative;display:flex;align-items:center;gap:20px;padding:20px 25px;background:#fff;border:1px solid #dce6f7;border-radius:25px;box-shadow:0 5px 0 #e2eafa;text-align:left;overflow:hidden}
.landing-lesson:hover:not(:disabled){background:#fff;border-color:#6e9feb;transform:translateY(-2px)}
.lesson-illustration{width:100px;flex-shrink:0;background:#eaf1ff;border-radius:50%}
.lesson-illustration .clock{width:100%;filter:none}
.landing-lesson-copy{display:flex;flex-direction:column;gap:6px;z-index:1}
.landing-lesson-copy small{color:#3463b0;font-size:14px}
.landing-lesson-copy strong{font-size:23px;line-height:1.4;color:#20365e}
.landing-lesson-copy>span{font-size:15px;color:#627795;font-weight:400}
.lesson-number{position:absolute;right:14px;top:6px;font-size:56px;color:#edf2fb;line-height:1;font-weight:800}
.landing-more{display:grid;grid-template-columns:.75fr 1.5fr;gap:30px;padding:30px 0 38px;border-bottom:1px solid #dce6f5}
.landing-challenges{display:grid;grid-template-columns:1fr;gap:10px}
.landing-challenges button{display:flex;gap:16px;align-items:center;text-align:left;padding:13px 18px;border:1px solid #dce6f5;background:white;border-radius:18px}
.landing-challenges strong{font-size:18px;display:block;color:#233f72}.landing-challenges small{font-size:14px;font-weight:400;color:#607698;display:block;margin-top:4px}
.challenge-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#e6efff;color:#3262c5;font-size:27px;flex-shrink:0}.challenge-mark.warm{background:#fff0ba;color:#765316}.challenge-mark.mint{background:#dff4ee;color:#267967}
.landing-adult{margin-top:18px;border-radius:20px;background:#e9f0fc;color:#385276}
.landing-adult>summary{padding:20px 24px;min-height:64px;font-size:17px;font-weight:700;cursor:pointer;line-height:1.5}.landing-adult>summary span{font-size:14px;font-weight:400;margin-left:12px;color:#5e7494}
.landing-adult-body{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:0 25px 26px}.landing-adult h3{font-size:18px;line-height:1.6;margin:8px 0}.landing-adult p{font-size:15px;line-height:1.85;margin:8px 0}.landing-adult-body button{margin:8px 7px 0 0;font-size:14px;background:#fff}
/* Bring the welcoming illustration into the existing simple lesson. */
body[data-view="easy"] .easy-clock-zone{background:radial-gradient(circle at 50% 35%,#5f8fd7,#234986)}
body[data-view="easy"] .easy-guide img{height:120px;width:88px;object-fit:contain}
@media(max-width:1050px){.landing-hero{min-height:500px;grid-template-columns:1fr 1fr}.landing-copy{padding:36px 0 36px 32px}.landing-copy h1{font-size:49px}.landing-copy p{font-size:19px}.landing-scene{height:475px}.landing-clock-card{top:100px;width:68%}.landing-buddy{width:43%;right:0;top:40px;height:315px}.landing-preview-control{bottom:35px}.landing-start{font-size:22px;max-width:300px}.landing-lesson{padding:20px 18px;gap:12px}.landing-lesson-copy strong{font-size:21px}.lesson-illustration{width:78px}}
@media(max-width:740px){body[data-view="home"] main{padding:15px 14px 25px}.landing-hero{display:flex;flex-direction:column;border-radius:28px;min-height:0}.landing-copy{padding:28px 26px 8px;width:100%}.landing-copy h1{font-size:43px;line-height:1.2;margin:12px 0 15px}.landing-copy h1 br{display:none}.landing-copy h1 em{display:block}.landing-copy .landing-eyebrow{font-size:14px}.landing-copy p{font-size:17px;line-height:1.65;margin:0 0 18px}.landing-copy p br{display:none}.landing-start{max-width:none;font-size:22px;min-height:60px;padding:12px 20px}.landing-note{font-size:13px;margin-top:16px}.landing-scene{height:340px;width:100%;max-width:470px}.landing-clock-card{left:7%;top:20px;width:57%;max-width:255px}.landing-buddy{right:1%;top:-10px;width:39%;height:245px}.landing-clock-card output{font-size:22px;padding:7px 20px;margin-top:0}.landing-preview-control{bottom:11px;gap:3px}.landing-preview-control button{font-size:15px}.landing-preview-control>span{font-size:13px}.scene-orbit{inset:15px 25px 45px}.dot-one{width:12px;height:12px;left:13%;top:1%}.landing-basics{padding:30px 0 20px}.landing-section-head{display:block;margin-bottom:18px}.landing h2{font-size:25px}.landing-section-head p{font-size:15px;margin-top:10px}.landing-lessons{grid-template-columns:1fr;gap:14px}.landing-lesson{padding:17px 20px}.lesson-illustration{width:82px}.landing-lesson-copy strong{font-size:21px}.landing-more{display:block;padding:22px 0 28px}.landing-challenges{margin-top:20px}.landing-adult>summary{padding:18px;font-size:16px}.landing-adult>summary span{display:block;margin:7px 0 0 17px}.landing-adult-body{grid-template-columns:1fr;gap:12px;padding:0 20px 20px}body[data-view="easy"] .easy-guide img{width:65px;height:90px}}
@media(max-width:360px){.landing-copy{padding:25px 21px 8px}.landing-copy h1{font-size:38px}.landing-copy p{font-size:16px}.landing-start{font-size:20px;gap:12px}.landing-scene{height:305px}.landing-clock-card{left:5%;top:16px;width:58%}.landing-buddy{height:205px;top:0}.landing-preview-control{bottom:9px}.landing-lesson{padding:16px 12px}.landing-lesson-copy strong{font-size:19px}.landing-lesson-copy>span{font-size:14px}.lesson-illustration{width:70px}}
@media(prefers-reduced-motion:reduce){.landing *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}