@font-face{font-family:"Fredoka";src:url(fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Fredoka","Baloo 2","Comic Sans MS",system-ui,sans-serif;color:#3b2a1a;min-height:100vh;
 background:#FFF4D6 radial-gradient(circle at 10% 0,#FFE08A 0,transparent 40%),radial-gradient(circle at 100% 30%,#BDE8FF 0,transparent 40%);background-attachment:fixed}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:#FFB938;box-shadow:0 4px 0 #E89A12}
.bar h1{flex:1;margin:0;font-size:clamp(1.4rem,4.5vw,2.4rem);font-weight:700;color:#fff;text-shadow:0 3px 0 #D9820B;text-align:center;line-height:1.1}
.home,.sound{flex:none;width:58px;height:58px;border-radius:50%;border:0;background:#fff;font-size:30px;display:grid;place-items:center;text-decoration:none;box-shadow:0 4px 0 #E0A040;cursor:pointer}
.home:active,.sound:active{transform:translateY(3px);box-shadow:0 1px 0 #E0A040}
.sound[aria-pressed=false]{opacity:.55}
a:focus-visible,button:focus-visible{outline:5px solid #2F7DE1;outline-offset:3px}
main{max-width:1400px;margin:0 auto;padding:18px max(14px,env(safe-area-inset-left)) 40px}
main:focus{outline:none}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
@media (max-width:620px){.grid{grid-template-columns:1fr 1fr;gap:12px}.tile{border-width:4px;border-radius:20px}.tile span{font-size:1.05rem;min-height:3.4em;padding:6px}}
.tile{display:block;height:100%;text-decoration:none;color:inherit;background:#fff;border-radius:26px;overflow:hidden;border:5px solid var(--c);box-shadow:0 7px 0 var(--c);transition:transform .15s}
.tile:hover{transform:translateY(-4px) rotate(-.6deg)}
.tile:active{transform:scale(.97)}
.tile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#ffe9b8}
.tile span{display:flex;align-items:center;justify-content:center;min-height:3.2em;padding:8px 10px;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;text-align:center;line-height:1.15;background:var(--c);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.topic h2{margin:2px 0 14px;text-align:center;font-size:clamp(1.7rem,5vw,3rem);color:var(--c);text-shadow:0 3px 0 #fff}
.player{max-width:960px;margin:0 auto 18px;border-radius:24px;overflow:hidden;border:6px solid var(--c);background:#000;box-shadow:0 7px 0 var(--c)}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.cover{max-width:720px;margin:0 auto 18px;border-radius:24px;overflow:hidden;border:6px solid var(--c);box-shadow:0 7px 0 var(--c)}
.cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.buttons{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:12px 8px;border-radius:26px;text-decoration:none;color:#fff;font-size:1.35rem;font-weight:600;border:0;width:100%;cursor:pointer;font-family:inherit;text-shadow:0 2px 0 rgba(0,0,0,.2);transition:transform .12s}
.btn b{font-size:3.4rem;line-height:1;text-shadow:none}
.btn:active{transform:translateY(4px)}
.watch{background:#F2545B;box-shadow:0 7px 0 #B8323A}
.play{background:#3FB56A;box-shadow:0 7px 0 #24834A}
.worksheet{background:#3D8BE0;box-shadow:0 7px 0 #2363A8}
.coloring{background:#F08A24;box-shadow:0 7px 0 #B8620F}
.flashcards{background:#9A63D8;box-shadow:0 7px 0 #6C3DA6}
.back{display:block;width:max-content;margin:26px auto 0;padding:12px 26px;border-radius:40px;background:#fff;color:#3b2a1a;text-decoration:none;font-size:1.3rem;font-weight:600;box-shadow:0 5px 0 #E0A040}
.foot{text-align:center;color:#8a6b4a;font-size:1rem;margin-top:28px}
.nojs{text-align:center;font-size:1.4rem;padding:30px}
@media (orientation:landscape) and (max-height:500px){
 .bar{padding-top:6px;padding-bottom:6px}.home,.sound{width:48px;height:48px;font-size:24px}
 .topic-body{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
 .player,.cover{margin:0}.buttons{grid-template-columns:1fr 1fr;gap:12px}.btn{min-height:84px;font-size:1.1rem}.btn b{font-size:2.3rem}
 .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (min-width:1600px){main{max-width:1700px}.tile span{font-size:1.8rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}