@font-face{font-family:"Baloo 2";src:url(fonts/baloo2.woff) format("woff");font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito.woff) format("woff");font-weight:200 1000;font-display:swap}
:root{--ink:#1f2a44;--paper:#fff7ec;--card:#ffffff;--accent:#ff7a3d;--blue:#2f7de1;--ctl:84px;
 --CHA:#37474f;--PEB:#1f6fb8;--STK:#b85a0c;--WID:#6a1b9a;--TRI:#8a6400;--NAR:#ad1457;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{position:fixed;inset:0 0 calc(var(--ctl) + env(safe-area-inset-bottom)) 0;overflow:hidden;touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.track{transition:none}}
.page{touch-action:pan-y;flex:0 0 100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.pic{margin:0;position:relative;flex:0 0 auto;aspect-ratio:4/3;max-height:58vh;width:100%;background:#f3e6d6;overflow:hidden;border-radius:0 0 28px 28px;box-shadow:0 6px 18px rgba(80,50,20,.12)}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.words{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:.55em;padding:18px 22px 12px;font-size:clamp(27px,7.4vw,46px);font-weight:800;line-height:1.26}
.line{margin:0}
.who{display:inline-block;font:700 max(17px,.6em)/1 "Baloo 2",sans-serif;letter-spacing:.02em;color:#fff;background:var(--c);padding:.38em .7em .3em;border-radius:99px;margin-bottom:.28em}
.say{display:block;color:var(--ink)}
.w{border-radius:.2em;padding:0 .04em;transition:background .12s,color .12s}
.w.now{background:#ffe066;color:#000;box-shadow:0 0 0 .08em #ffe066}
/* cover */
.cover .card{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14px 20px 12px}
.cover .logo{height:auto;width:min(220px,58vw);display:block;margin:0 auto}
.cover .ep{font:700 17px/1.1 "Baloo 2",sans-serif;color:#7a4d1a;text-transform:uppercase;letter-spacing:.08em;margin:2px 0 0}
.cover h1{font:800 clamp(46px,13vw,84px)/1 "Baloo 2",sans-serif;margin:4px 0 4px;background:linear-gradient(90deg,#e8453c,#f28c1c,#e9b300,#3aa63a,#2f7de1,#8a4fd0);-webkit-background-clip:text;background-clip:text;color:transparent;border-radius:12px;padding:0 4px}
.cover h1.now{outline:4px solid #ffe066;outline-offset:2px}
.cover .sub{font-size:18px;font-weight:700;margin:0 0 6px}
.credit{font-size:15px;font-weight:700;line-height:1.35;color:#6b4a2b;margin:6px 0 0}
/* quiz */
.quiz{padding:46px 18px 14px;gap:14px;justify-content:flex-start}
.quiz h2{font:800 clamp(34px,9vw,52px)/1.05 "Baloo 2",sans-serif;margin:4px 0 2px;text-align:center;color:var(--accent)}
.q{background:var(--card);border-radius:22px;padding:14px 14px 12px;box-shadow:0 4px 14px rgba(80,50,20,.1)}
.q p{margin:0 0 10px;font-size:clamp(21px,5.6vw,32px);font-weight:800;line-height:1.25}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{flex:1 1 0;min-width:90px;min-height:64px;border:3px solid #e7d6c2;background:#fffaf3;border-radius:18px;font:800 19px/1.1 "Nunito",sans-serif;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;cursor:pointer}
.opt .e{font-size:30px;line-height:1}
.opt.yes{border-color:#3aa63a;background:#e7f8e3}
.opt.try{animation:wig .4s}
@keyframes wig{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.opt.try{animation:none}}
.fb{min-height:1.3em;margin:8px 2px 0;font-weight:800;font-size:19px}
.fb.ok{color:#2c8a2c}.fb.no{color:#b5651d}
/* end */
.end .pic{aspect-ratio:16/9}
.end .badge{position:absolute;right:12px;top:12px;width:92px;height:92px;border-radius:50%;background:conic-gradient(#e8453c,#f28c1c,#e9b300,#3aa63a,#2f7de1,#8a4fd0,#e8453c);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.end .badge span{width:72px;height:72px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font:800 14px/1.05 "Baloo 2",sans-serif;color:var(--ink)}
.end h2{font:800 clamp(40px,11vw,64px)/1 "Baloo 2",sans-serif;color:var(--accent);margin:0}
.end .words{justify-content:flex-start;padding-top:16px}
.tip{font-size:16px;font-weight:600;line-height:1.4;background:#fff;border-radius:16px;padding:12px 14px;margin:4px 0 0;color:#4a3a2a}
.tip b{color:var(--ink)}
.again{align-self:center;font:800 18px "Nunito",sans-serif;border:0;background:var(--blue);color:#fff;border-radius:99px;padding:12px 22px;min-height:52px;cursor:pointer}
/* controls */
.ctl{position:fixed;left:0;right:0;bottom:0;height:calc(var(--ctl) + env(safe-area-inset-bottom));padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;background:#fff;box-shadow:0 -4px 18px rgba(80,50,20,.12)}
.nav{flex:0 0 64px;height:64px;border-radius:50%;border:0;background:#ffe2cf;color:#8a3b10;font-size:30px;font-weight:900;cursor:pointer;display:grid;place-items:center}
.nav:disabled{opacity:.35;cursor:default}
.read{flex:1 1 auto;height:64px;border:0;border-radius:99px;background:var(--accent);color:#fff;font:800 21px "Nunito",sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.read[aria-pressed=true]{background:#2c8a5a}
.read svg{width:28px;height:28px}
.count{position:fixed;right:12px;top:calc(10px + env(safe-area-inset-top));background:rgba(255,255,255,.88);border-radius:99px;padding:5px 12px;font:800 15px "Nunito",sans-serif;z-index:3}
button:focus-visible{outline:4px solid #1f6feb;outline-offset:3px}
/* wide screens: picture left, words right */
@media (min-width:760px) and (min-aspect-ratio:5/4){
 .page.story{flex-direction:row;align-items:center}
 .page.story .pic,.cover .pic{aspect-ratio:16/9;max-height:none;flex:0 0 62%;border-radius:28px;margin-left:24px}
 .page.story .words{font-size:clamp(28px,3vw,46px);padding:30px 40px}
 .page.cover{flex-direction:row;align-items:center}
 .end .pic{max-height:46vh}
 .quiz{max-width:900px;margin:0 auto}
 .ctl{justify-content:center}.read{flex:0 1 360px}
}
.cover h1.long{font-size:clamp(34px,9.5vw,60px);line-height:1.05}
/* reading levels (set from the book data) */
.lvl-builder .words{font-size:clamp(23px,6vw,40px);line-height:1.3}
.lvl-uni .words{font-size:clamp(19px,4.9vw,30px);font-weight:700;line-height:1.42;gap:.7em}
.lvl-uni .who,.lvl-builder .who{font-size:max(17px,.62em)}
.opts.txt{flex-direction:column}.opts.txt .opt{min-height:52px;font-size:18px;text-align:center}
@media (min-width:760px) and (min-aspect-ratio:5/4){.lvl-builder .page.story .words{font-size:clamp(22px,2.3vw,36px)}.lvl-uni .page.story .words{font-size:clamp(18px,1.75vw,28px)}}

/* added by build.py: site bar, menu, links (CSP: no inline styles) */
:root{--bar:56px}
.sp-PROF{--c:var(--PROF)}.sp-DOT{--c:var(--DOT)}.sp-TIB{--c:var(--TIB)}.sp-PEM{--c:var(--PEM)}.sp-LUL{--c:var(--LUL)}
.stage{top:calc(var(--bar) + env(safe-area-inset-top))}
.count{top:calc(var(--bar) + 8px + env(safe-area-inset-top))}
.bar{position:fixed;left:0;right:0;top:0;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0;display:flex;align-items:center;gap:6px;
  background:#fff;box-shadow:0 3px 12px rgba(80,50,20,.12);z-index:6;font-family:"Nunito",system-ui,sans-serif}
.bar .home{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border-radius:12px}
.bar .home img{height:38px;width:auto;display:block}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:99px;background:#ffe2cf;color:#7a300a;font:800 16px/1 "Nunito",sans-serif;
  text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.menu{margin-left:auto;position:relative}
.menu>summary{list-style:none}.menu>summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:50px;margin:0;list-style:none;padding:8px;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(31,42,68,.25);min-width:240px;max-height:70vh;overflow:auto}
.menu li a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;color:#1f2a44;font-weight:800;text-decoration:none}
.menu li a:hover{background:#fff1e4}
.menu li.sep{border-top:2px dashed #ecd9c4;margin:6px 4px;min-height:0}
a:focus-visible,summary:focus-visible{outline:4px solid #1f6feb;outline-offset:3px}
.again{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;background:#1c5fb8}
.read{background:#c2410c}   /* text contrast 4.5:1+ (was #ff7a3d) */
.again.watch{background:#b5400c}
.again.pdf{background:#1f6b45}
.endlinks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nos{position:fixed;inset:calc(var(--bar) + env(safe-area-inset-top)) 0 0 0;overflow:auto;background:var(--paper);padding:16px 20px 40px;z-index:5;font-size:20px;line-height:1.45}
.nos h1{font:800 40px/1.1 "Baloo 2",sans-serif}
.sp-CHA{--c:var(--CHA)}.sp-NAR{--c:var(--NAR)}.sp-PEB{--c:var(--PEB)}.sp-STK{--c:var(--STK)}.sp-TRI{--c:var(--TRI)}.sp-WID{--c:var(--WID)}