@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Nunito:wght@600;700;800;900&display=swap');

/* ============ Little Language Explorers – shared styles ============ */
:root{
  --ink:#23394a; --muted:#66727c; --line:#ece6dc; --card:#fff; --bg:#fffefa; --cream:#fff6e9;
  --accent:#fa8962; --accent-dark:#d86b45; --soft:#fff0e6; --unit:#fa8962;
  --good:#2fa86a; --bad:#e2564b; --radius:22px; --shadow:0 10px 30px #3b2a1a12;
}
body.a35{--accent:#fa8962;--accent-dark:#d86b45;--soft:#fff0e6;--bg:#fffefa}
body.a57{--accent:#7658c6;--accent-dark:#5a40a3;--soft:#f1ecff;--bg:#f8f7ff}
body.a710{--accent:#2868d9;--accent-dark:#1d4fa8;--soft:#e8f0ff;--bg:#f7faff}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,Arial,sans-serif;line-height:1.5}
h1,h2,h3,h4,.logo,.btn,.big-word{font-family:Nunito,'DM Sans',system-ui,sans-serif}
h1{font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.05;letter-spacing:-.04em;margin:14px 0 16px;font-weight:900}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.15;margin:8px 0 10px;font-weight:900}
h3{font-size:1.3rem;margin:8px 0 6px;font-weight:800}
p{color:var(--muted);margin:0 0 12px}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.hidden{display:none!important}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:15px;padding:12px 20px;font-weight:800;font-size:1rem;background:var(--accent);color:#fff;text-decoration:none;box-shadow:0 5px 0 var(--accent-dark);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-dark)}
.btn.ghost{background:#fff;color:var(--accent-dark);box-shadow:none;border:2px solid var(--line)}
.btn.small{padding:8px 13px;font-size:.88rem;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}

/* ---------- header ---------- */
.agebar{background:#fff;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.86rem}
.agebar a{font-weight:700;color:#4f5768;text-decoration:none;padding:7px 13px;border-radius:18px;background:#f6f3ee}
.agebar a.current{background:var(--accent);color:#fff}
.top{background:#fffffff2;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:14px}
.logo{font-weight:900;font-size:1.15rem;text-decoration:none;color:#3a3c57;white-space:nowrap}
.logo small{display:block;font-family:'DM Sans';font-size:.56rem;letter-spacing:.2em;color:#9b98a3;font-weight:700}
.top nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{text-decoration:none;font-weight:700;font-size:.84rem;padding:7px 10px;border-radius:12px;color:#4d5568}
.top nav a:hover{background:var(--soft);color:var(--accent-dark)}
.stars{font-weight:800;background:var(--soft);color:var(--accent-dark);border-radius:20px;padding:6px 12px;white-space:nowrap;font-size:.9rem}

/* ---------- unit hero ---------- */
.hero{background:linear-gradient(120deg,var(--cream),var(--soft));padding:52px 0 46px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center}
.hero p.lead{font-size:1.15rem;max-width:560px}
.pill{display:inline-block;border-radius:40px;padding:7px 14px;background:#fff;font-weight:800;color:var(--accent-dark);font-size:.85rem;margin:0 6px 6px 0}
.hero-art{position:relative;aspect-ratio:1;background:radial-gradient(circle,#fff 0,#fff 52%,transparent 53%);display:grid;place-items:center}
.hero-art .main{font-size:clamp(6rem,14vw,10rem);animation:float 4s ease-in-out infinite}
.hero-art .orbit{position:absolute;font-size:clamp(2rem,4vw,3.2rem);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.steps a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 11px;font-weight:700;font-size:.82rem;text-decoration:none}
.steps a:hover{border-color:var(--accent)}

/* ---------- sections ---------- */
section.block{padding:60px 0;scroll-margin-top:70px}
section.block:nth-of-type(even){background:#ffffffa8}
.head{max-width:760px;margin:0 0 26px}
.head .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);color:#fff;font-weight:900;margin-right:8px;font-family:Nunito}
.panel{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--line)}
.tip{margin-top:20px;background:#fff8dc;border-radius:16px;padding:13px 17px;font-size:.93rem;color:#6a5a2e}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.a35 .cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* picture (emoji or real image) */
.pic{position:relative;display:grid;place-items:center;line-height:1}
.pic .emo{font-size:1em}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.swatch{width:1em;height:1em;border-radius:50%;box-shadow:inset 0 -6px 0 #0002,0 4px 10px #0002;display:inline-block}

/* word cards */
.wcard{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px 12px 14px;text-align:center;transition:.18s;position:relative}
.wcard:hover,.wcard:focus-visible{border-color:var(--accent);transform:translateY(-3px);outline:0}
.wcard .pic{font-size:4.2rem;height:92px}
.a35 .wcard .pic{font-size:5.4rem;height:116px}
.wcard b{display:block;font-family:Nunito;font-size:1.25rem;margin-top:8px}
.wcard small{display:block;color:var(--muted);font-size:.84rem;min-height:1.2em}
.wcard .hint{font-size:.75rem;color:var(--accent-dark);font-weight:700}
.wcard.playing{border-color:var(--accent);box-shadow:0 0 0 5px var(--soft)}
.wcard.flip .back{display:block}.wcard .back{display:none;margin-top:6px;font-size:.88rem;color:#3f4a5a;background:var(--soft);border-radius:12px;padding:6px}

/* listen & repeat */
.lr{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.lr-stage{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:330px}
.lr-stage .pic{font-size:7rem;height:140px;width:100%}
.big-word{font-size:clamp(2rem,4vw,2.8rem);font-weight:900}
.lr-steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lr-steps span{padding:6px 12px;border-radius:20px;background:#f2f0ec;font-weight:700;font-size:.85rem;color:#7a7f88}
.lr-steps span.on{background:var(--accent);color:#fff}
.mic-result{min-height:26px;font-weight:800}
.chant{display:flex;flex-direction:column;gap:8px}
.chant button{text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;display:flex;gap:10px;align-items:center}
.chant button.on{border-color:var(--accent);background:var(--soft)}
.chant button .e{font-size:1.6rem}

/* story */
.book{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:#fff;border-radius:26px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.scene{position:relative;min-height:340px;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:30px 20px 46px;overflow:hidden}
.scene .s-item{font-size:clamp(3rem,7vw,5.4rem);line-height:1;filter:drop-shadow(0 8px 4px #0002);animation:bob 3.5s ease-in-out infinite}
.scene .s-item:nth-child(2n){animation-delay:-1.2s}.scene .s-item:nth-child(3n){animation-delay:-2s}
.scene .s-top{position:absolute;top:18px;right:24px;font-size:3.2rem}
.scene .s-ground{position:absolute;left:0;right:0;bottom:0;height:46px}
.scene img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes bob{50%{transform:translateY(-8px)}}
.bg-sky{background:linear-gradient(#bfe6ff,#e9f7ff)}.bg-sky .s-ground{background:#9edc8b}
.bg-park{background:linear-gradient(#cdeeff,#f0fbff)}.bg-park .s-ground{background:#7fcf73}
.bg-home{background:linear-gradient(#ffe9d2,#fff6ea)}.bg-home .s-ground{background:#d9a77a}
.bg-room{background:linear-gradient(#efe5ff,#fbf8ff)}.bg-room .s-ground{background:#c9b2e6}
.bg-night{background:linear-gradient(#26305e,#4b4f8f)}.bg-night .s-ground{background:#2d3a5a}
.bg-snow{background:linear-gradient(#dfefff,#ffffff)}.bg-snow .s-ground{background:#f4f8ff;border-top:2px solid #dbe6f5}
.bg-rain{background:linear-gradient(#a9b8c9,#dce4ec)}.bg-rain .s-ground{background:#7fae80}
.bg-school{background:linear-gradient(#fff5c9,#fffbe9)}.bg-school .s-ground{background:#c8a476}
.bg-town{background:linear-gradient(#cfe7ff,#f3f9ff)}.bg-town .s-ground{background:#9aa3ad}
.bg-sea{background:linear-gradient(#bdeaff,#e8f9ff)}.bg-sea .s-ground{background:#4fb3e3}
.bg-kitchen{background:linear-gradient(#fff0e0,#fffaf3)}.bg-kitchen .s-ground{background:#e8c8a0}
.bg-autumn{background:linear-gradient(#ffe2bd,#fff4e4)}.bg-autumn .s-ground{background:#d9965a}
.story-text{padding:28px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.story-text .ptext{font-size:1.25rem;line-height:1.6;color:#2c3a4b;font-weight:600}
.a35 .story-text .ptext{font-size:1.55rem;font-family:Nunito;font-weight:800}
.ptext .w{border-radius:6px;transition:background .1s}
.ptext .w.hl{background:#ffe07a}
.story-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dots{display:flex;gap:6px;flex-wrap:wrap}.dots i{width:10px;height:10px;border-radius:50%;background:#e3ded6}.dots i.on{background:var(--accent)}
.talk{margin-top:18px}
.talk li{margin:6px 0}

/* song */
.song{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lyrics{display:flex;flex-direction:column;gap:6px}
.lyrics .line{padding:10px 14px;border-radius:14px;font-weight:700;font-size:1.1rem;display:flex;gap:12px;align-items:center;background:#faf8f5;transition:.2s}
.a35 .lyrics .line{font-size:1.25rem}
.lyrics .line .act{font-size:1.7rem;width:2rem;text-align:center}
.lyrics .line.on{background:var(--accent);color:#fff;transform:scale(1.02)}
.lyrics .line button{margin-left:auto;border:0;background:#fff;border-radius:10px;padding:4px 8px}
.gap-in{display:inline-block;min-width:70px;border-bottom:3px dashed var(--accent);text-align:center;color:var(--accent-dark)}
.note-anim{font-size:4rem;text-align:center}
.note-anim.go{animation:spin 1.2s ease-in-out infinite}
@keyframes spin{50%{transform:rotate(-12deg) scale(1.1)}}

/* games */
.game-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.game-tabs button{border:2px solid var(--line);background:#fff;border-radius:14px;padding:9px 14px;font-weight:800}
.game-tabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.game{min-height:380px}
.gtop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;margin-bottom:14px;color:var(--accent-dark)}
.feedback{min-height:30px;font-weight:800;margin:12px 0;text-align:center;font-size:1.1rem}
.feedback.ok{color:var(--good)}.feedback.no{color:var(--bad)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px}
.choice{background:#fff;border:3px solid var(--line);border-radius:18px;padding:14px;font-weight:800;font-size:1.05rem;transition:.15s;text-align:center}
.choice .pic{font-size:4rem;height:80px}
.choice:hover{border-color:var(--accent)}
.choice.right{border-color:var(--good);background:#e8f8ef;animation:pop .35s}
.choice.wrong{border-color:var(--bad);background:#fdeceb;animation:shake .35s}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bubble-field{position:relative;height:360px;border-radius:20px;background:linear-gradient(#e6f6ff,#fff);overflow:hidden;border:2px solid var(--line)}
.bubble{position:absolute;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffffee,#bfe7ff88 60%,#8fd3ff66);border:2px solid #fff;display:grid;place-items:center;font-size:3rem;animation:rise linear forwards}
.bubble .pic{font-size:3rem;width:70px;height:70px}
.bubble.popped{animation:popout .3s forwards}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-480px)}}
@keyframes popout{to{transform:scale(1.6);opacity:0}}
.memory{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:620px;margin:0 auto}
.mcard{aspect-ratio:1/1;border-radius:16px;border:0;background:var(--accent);color:#fff;font-size:2rem;font-weight:900;position:relative;box-shadow:0 4px 0 var(--accent-dark)}
.mcard .face{display:none;font-size:1.05rem;color:var(--ink)}
.mcard .face .pic{font-size:2.8rem;height:56px}
.mcard.open,.mcard.done{background:#fff;border:3px solid var(--line);box-shadow:none}
.mcard.done{border-color:var(--good)}
.mcard.open .face,.mcard.done .face{display:block}.mcard.open .q,.mcard.done .q{display:none}
.sort-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:70px;padding:12px;border:2px dashed var(--line);border-radius:18px;margin-bottom:14px}
.token{background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:800;display:inline-flex;align-items:center;gap:6px;touch-action:none}
.token .pic{font-size:1.8rem;height:34px;width:34px}
.token.sel{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.bins{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.bin{min-height:150px;border-radius:18px;padding:12px;background:var(--soft);border:3px solid transparent;display:flex;flex-direction:column;gap:8px}
.bin h4{margin:0;font-size:1.05rem;display:flex;gap:8px;align-items:center}
.bin .in{display:flex;flex-wrap:wrap;gap:6px}
.bin.over{border-color:var(--accent)}
.builder .slots{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:12px;border-radius:16px;background:var(--soft);margin:12px 0;align-items:center}
.builder .bank{display:flex;flex-wrap:wrap;gap:8px}
.builder .wtok{background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:800;font-size:1.05rem}
.ws{display:grid;gap:3px;user-select:none;max-width:520px;margin:0 auto;touch-action:none}
.ws span{aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:7px;font-weight:800;font-family:Nunito;font-size:clamp(.8rem,2.4vw,1.15rem);text-transform:uppercase}
.ws span.sel{background:#ffe07a}.ws span.found{background:#bdeccf;color:#155c36}
.ws-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.ws-list span{padding:4px 10px;border-radius:20px;background:#f2f0ec;font-weight:700;font-size:.9rem}
.ws-list span.found{background:#bdeccf;text-decoration:line-through}
.spell{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.spell span{width:46px;height:54px;border-radius:12px;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:1.6rem;background:#fff;text-transform:lowercase}
.spell span.blank{border-style:dashed;border-color:var(--accent)}
.letters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.letters button{width:50px;height:50px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:1.3rem}
.order-list{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto}
.order-list .oi{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-weight:700}
.order-list .oi .e{font-size:1.6rem}
.order-list .oi .mv{margin-left:auto;display:flex;gap:4px}
.order-list .oi .mv button{border:0;background:var(--soft);border-radius:9px;width:34px;height:34px;font-weight:900}
.order-list .oi.ok{border-color:var(--good);background:#eefaf3}
.mission .story-box{background:var(--soft);border-radius:16px;padding:16px;font-size:1.08rem;color:#2c3a4b;font-weight:600}
.mission .progress{height:10px;border-radius:9px;background:#eee;overflow:hidden;margin:6px 0 16px}
.mission .progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
.sceneq{position:relative;height:300px;border-radius:20px;overflow:hidden;border:2px solid var(--line)}
.sceneq .it{position:absolute;font-size:4.2rem;line-height:1;transform:translate(-50%,-100%)}
.sceneq .it.back{font-size:3.2rem;filter:saturate(.8)}
.map{display:grid;gap:4px;max-width:470px;margin:0 auto;background:#7ec77a;padding:8px;border-radius:18px;position:relative}
.map .c{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:clamp(1.3rem,4.5vw,2.1rem);position:relative}
.map .c.road{background:#a4adb6}.map .c.road::after{content:"";position:absolute;inset:46% 18%;background:#fff6;border-radius:4px}
.map .c.place{background:#fff;flex-direction:column;font-size:clamp(1.2rem,4vw,1.9rem)}
.map .c.place small{font-size:.5rem;font-weight:800;line-height:1}
.map .c.grass{background:transparent}
.map .car{position:absolute;font-size:clamp(1.3rem,4vw,2rem);transition:all .35s;display:grid;place-items:center;pointer-events:none;z-index:2}
.cmds{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;padding:8px;border-radius:14px;background:var(--soft);margin:10px 0}
.cmds span{background:#fff;border-radius:10px;padding:5px 9px;font-weight:800;font-size:.85rem}

/* quiz */
.quiz-q{font-family:Nunito;font-size:1.45rem;font-weight:900;margin:6px 0 4px}
.quiz-done{text-align:center;padding:20px}
.quiz-done .big{font-size:4rem}
.review li{margin:4px 0}

/* printables */
.prints{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.print-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:.18s}
.print-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.print-card .ic{font-size:2.2rem}
.print-card b{color:var(--accent-dark);margin-top:auto;font-size:.9rem}

/* teacher */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
details.lesson{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:10px}
details.lesson summary{font-weight:800;cursor:pointer;font-family:Nunito}
details.lesson ol{margin:8px 0 2px;padding-left:20px}details.lesson li{margin:4px 0;color:#3f4a5a}
.outcomes li{margin:6px 0}
.rubric{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.92rem}
.rubric td,.rubric th{padding:8px;text-align:left;vertical-align:middle}
.rubric tr td:first-child{font-weight:700}
.rubric .opts{display:flex;gap:4px}
.rubric .opts button{min-width:38px;height:36px;border-radius:10px;border:2px solid var(--line);background:#fff;font-weight:800}
.rubric .opts button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.9rem;margin-bottom:10px}
.field input,.field textarea{font:inherit;padding:10px;border-radius:12px;border:2px solid var(--line)}

footer{background:#2d3550;color:#fff;padding:34px 0;margin-top:30px}
footer p{color:#d5d9e6}
footer a{color:#fff}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#283653;color:#fff;padding:11px 20px;border-radius:40px;opacity:0;pointer-events:none;transition:.25s;z-index:50;font-weight:700}
#toast.show{opacity:1;transform:translateX(-50%)}
.confetti{position:fixed;top:-20px;font-size:1.6rem;z-index:60;pointer-events:none;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}

/* ---------- home page ---------- */
.home-hero{background:var(--cream);padding:70px 0}
.home-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.home-hero h1 em{color:#ee845f;font-style:normal}
.age-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.age-card{border-radius:24px;padding:24px}
.age-card .ic{font-size:2.6rem}
.age-card.p{background:#ffe9dc}.age-card.m{background:#e3f7ec}.age-card.l{background:#ece6ff}
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.unit-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.unit-card::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--u)}
.unit-card .top-row{display:flex;justify-content:space-between;align-items:flex-start}
.unit-card .ue{font-size:2.8rem;line-height:1}
.unit-card .no{font-weight:900;color:#c9c2b8;font-family:Nunito}
.unit-card h3{margin:4px 0 0}
.unit-card ul{list-style:none;padding:0;margin:0;font-size:.85rem;color:var(--muted)}
.unit-card ul li{margin:3px 0}
.unit-card .ages{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.unit-card .ages a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:.82rem;padding:9px 4px;border-radius:12px}
.unit-card .ages a:nth-child(1){background:#ffe9dc;color:#c35a33}
.unit-card .ages a:nth-child(2){background:#ece6ff;color:#5a40a3}
.unit-card .ages a:nth-child(3){background:#e3edff;color:#1d4fa8}
.unit-card .ages a:hover{filter:brightness(.95)}

@media (max-width:860px){
  .hero .wrap,.home-hero .wrap,.lr,.book,.song,.tgrid,.g2,.g3,.age-cards{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .hero-art{max-width:260px;margin:0 auto}
  .top nav{display:none}
  .scene{min-height:260px}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .memory{grid-template-columns:repeat(3,1fr)}
  .bubble{width:84px;height:84px}
  .g4{grid-template-columns:1fr}
}

/* ---------- print pages ---------- */
body.print{background:#fff}
.sheet{width:210mm;min-height:297mm;padding:14mm;margin:0 auto;page-break-after:always;position:relative}
.sheet h1{font-size:26pt;margin:0 0 4mm}
.sheet h2{font-size:16pt;margin:4mm 0 2mm}
.sheet .sub{color:#6b7280;font-size:10pt;margin-bottom:6mm}
.sheet .namebar{display:flex;gap:10mm;font-size:11pt;margin-bottom:6mm}
.sheet .namebar span{flex:1;border-bottom:1.5px solid #aaa;padding-bottom:2mm}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.fc{border:2px dashed #bbb;border-radius:6mm;height:80mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3mm;text-align:center;padding:4mm}
.fc .pic{font-size:34mm;height:42mm}
.fc b{font-family:Nunito;font-size:24pt}
.fc small{font-size:11pt;color:#444}
.fc-grid.small .fc{height:60mm}.fc-grid.small .fc .pic{font-size:24mm;height:30mm}.fc-grid.small .fc b{font-size:18pt}
.p-row{display:flex;align-items:center;gap:6mm;margin:4mm 0;font-size:13pt}
.p-row .pic{font-size:16mm;height:18mm;width:22mm}
.shadow .emo,.shadow img{filter:brightness(0) opacity(.75)}
.trace{font-family:Nunito;font-size:30pt;font-weight:800;color:transparent;-webkit-text-stroke:1.2px #999;letter-spacing:3mm}
.drawbox{border:2px solid #ccc;border-radius:5mm;height:55mm;display:flex;align-items:flex-end;justify-content:center;padding:3mm;color:#999;font-size:10pt}
.line{border-bottom:1.5px solid #bbb;height:10mm}
.p-ws{display:grid;gap:1mm;margin:4mm auto;width:150mm}
.p-ws span{aspect-ratio:1;border:1px solid #ccc;display:grid;place-items:center;font-weight:800;font-size:13pt;text-transform:uppercase}
.p-table{width:100%;border-collapse:collapse;font-size:10.5pt}
.p-table td,.p-table th{border:1px solid #bbb;padding:2.5mm;text-align:left;vertical-align:top}
.p-table th{background:#f3f1ee}
.boxes{display:inline-flex;gap:2mm}.boxes i{width:6mm;height:6mm;border:1.5px solid #888;border-radius:1.5mm;display:inline-block}
.wordbank{border:2px solid #ddd;border-radius:4mm;padding:3mm 5mm;font-weight:700;margin:3mm 0;display:flex;flex-wrap:wrap;gap:3mm 7mm}
.cut{border:2px dashed #bbb;border-radius:4mm;padding:5mm;margin:3mm 0;font-size:16pt;font-weight:800;font-family:Nunito;display:flex;gap:6mm;flex-wrap:wrap}
.cut span{border-right:1px dashed #ccc;padding-right:6mm}
.print-bar{position:sticky;top:0;background:#2d3550;color:#fff;padding:10px;display:flex;gap:10px;justify-content:center;z-index:9}
@media print{.print-bar{display:none}.sheet{margin:0}@page{size:A4;margin:0}}
.mini{font-size:.86rem;color:var(--muted)}
@media print{
  body.pf *{visibility:hidden}
  body.pf #assess,body.pf #assess *{visibility:visible}
  body.pf #assess{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
  body.pf #assess .btn{display:none}
}
.lr{align-items:start}
.lr-stage{position:sticky;top:84px}
.chant{max-height:480px;overflow:auto;padding-right:4px}
.cards.mini-cards,.a35 .cards.mini-cards{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.cards.mini-cards .wcard{padding:8px}
.a35 .cards.mini-cards .wcard .pic,.cards.mini-cards .wcard .pic{font-size:2.6rem;height:54px}
body.print .swatch{box-shadow:none;border:1.5px solid #0002}