/* CyberBeagles C008: seven short lessons, using only approved character assets.
   Keeps the approved C003 family color scheme and finger-safe responsive controls. */
.lesson-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 30px}
.lesson-tile{min-width:0;min-height:144px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:2px solid #d5e8e8;background:#fff;border-radius:19px;padding:18px;color:#174a60;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,border-color .2s}
.lesson-tile:hover{border-color:#43a6a8;transform:translateY(-2px)}
.lesson-tile:focus-visible{outline:4px solid #ffa75e;outline-offset:3px}
.lesson-tile[data-selected="true"]{border-color:#15a49d;background:#eaf8ef}
.lesson-tile-icon{font-size:27px;line-height:1;width:45px;height:45px;border-radius:13px;display:grid;place-items:center;background:#e5f6f4;color:#0b778b}
.lesson-tile strong{font-family:var(--rounded);font-size:17px;line-height:1.2}
.lesson-tile small{color:#557282;font-size:13px;line-height:1.35}
.lesson-player{background:#fff;border:2px solid #d2e8e6;border-radius:24px;padding:24px;margin:28px 0 38px;box-shadow:var(--shadow);scroll-margin-top:155px}
.lesson-player-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px}
.lesson-player-heading h2{font-family:var(--rounded);font-size:29px;line-height:1.15;margin:5px 0 8px;color:#143d56}
.lesson-player-heading p{color:#577683;margin:0}
.lesson-time-tag{display:block;font-size:12px;font-weight:850;padding:9px 13px;background:#e7f6ee;color:#27746c;border-radius:99px}
.lesson-layout{display:grid;grid-template-columns:minmax(215px,.72fr) minmax(0,1.35fr);gap:24px;align-items:stretch}
.lesson-illustration{min-height:385px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 35% 15%,#d4fcff,#72c9c6 55%,#267e9d);border-radius:20px;display:grid;place-items:center}
.lesson-illustration:after{content:"";position:absolute;z-index:-1;bottom:-80px;width:110%;height:180px;border-radius:50%;background:#c2e8b3}
.lesson-light{position:absolute;inset:12% 8%;border:2px dashed #fff9c088;border-radius:50%;transform:rotate(-15deg)}
.lesson-symbol{position:absolute;z-index:0;top:6%;right:7%;font-size:80px;color:#fff0b8;opacity:.72}
.lesson-illustration img{position:relative;z-index:1;width:92%;height:92%;max-height:390px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 10px #0b516640)}
.lesson-illustration img.lesson-speaking{animation:cbkActorSpeak .45s ease-in-out infinite alternate}
.lesson-body{min-width:0}
.lesson-goal{font-size:15px;color:#225d6e;background:#f1f9f7;border-radius:13px;padding:12px 15px;line-height:1.5;margin:0 0 18px}
.lesson-count-row{display:flex;justify-content:space-between;gap:14px;color:#4a7c87;font-size:13px;font-weight:850}
.lesson-track{height:11px;background:#e1f1ed;border-radius:100px;margin:9px 0 17px;overflow:hidden}
.lesson-track>div{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#3ab5af,#f2c765)}
.lesson-caption{padding:18px 19px;background:#fffaf0;border:2px solid #f5e8c8;border-radius:17px;min-height:174px}
.lesson-caption span{font-size:13px;font-weight:900;color:#087b89;text-transform:uppercase;letter-spacing:.04em}
.lesson-caption p{font-size:19px;color:#193d57;font-weight:750;line-height:1.55;margin:9px 0 17px}
.lesson-voice-track{width:100%;height:7px;background:#e6e8d9;border-radius:80px;overflow:hidden;margin-top:auto}
.lesson-voice-track div{height:100%;width:0;background:linear-gradient(90deg,#6ed0be,#f7c267);border-radius:80px}
.lesson-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.lesson-controls button{white-space:normal;min-width:0;min-height:50px;padding:10px 9px;font-size:13px;cursor:pointer}
.lesson-controls button:disabled{opacity:.45;cursor:not-allowed}
.lesson-safe-note{font-size:13px;color:#567987;line-height:1.5;margin:15px 0 0}
.lesson-complete{text-align:center;background:#f0faef;border:2px solid #d4eddb;border-radius:17px;padding:19px 15px}
.lesson-complete>span{font-size:41px}
.lesson-complete h3{margin:0;font-family:var(--rounded);font-size:23px;color:#276650}
.lesson-complete p{line-height:1.5;color:#487b6d}
.scene-footprints{background:linear-gradient(145deg,#e8f8de,#65bdad 80%,#2d8298)}
.scene-footprints img{height:100%;width:60%;left:19%;bottom:-2%;object-fit:contain}
.scene-footprints .scene-stars{position:absolute;left:8%;top:10%;font-size:54px;transform:rotate(-22deg);opacity:.6}
.scene-kindness{background:linear-gradient(160deg,#90d8e4,#e6f9fc 58%,#c6e8e6)}
.scene-kindness img{height:100%;width:66%;left:18%;bottom:-2%;object-fit:contain}
.scene-kindness .scene-stars{position:absolute;right:7%;top:8%;font-size:85px;color:#f9a8bb;opacity:.8}
/* Six concise top-level routes, including the new mini-lessons section. */
@media(max-width:700px){
 .top-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
 .top-nav a{font-size:11px;padding:7px 1px;min-height:50px}
 .lesson-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .lesson-tile{min-height:130px;padding:13px}
 .lesson-tile strong{font-size:15px}
 .lesson-player{padding:16px;scroll-margin-top:170px}
 .lesson-layout{grid-template-columns:1fr;gap:17px}
 .lesson-illustration{min-height:235px;max-height:310px}
 .lesson-illustration img{max-height:300px;width:85%;height:95%}
 .lesson-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-controls #lesson-play{grid-column:1/-1}
 .lesson-caption{min-height:145px}
 .lesson-caption p{font-size:17px}
 .lesson-player-heading h2{font-size:24px}
}
@media(max-width:380px){.top-nav a{font-size:10px}.lesson-tile{padding:12px;min-height:142px}.lesson-symbol{font-size:65px}}
@media(min-width:701px) and (max-width:1100px){.lesson-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.lesson-illustration img.lesson-speaking{animation:none!important}.lesson-tile{transition:none!important}}