/* The K-2 look (30 Sep 2026, switch kid_design): kid.js puts class "kid" on the body of the home page, the practice round
   and the activity frame for a child in Kindergarten, Year 1 or Year 2. Every rule here starts with body.kid (or
   html.kid-wait), so with the switch off, or for an older child, nothing changes. The logo's navy, gold and sky blue;
   big targets (48 px or more); pictures drawn in SVG and CSS. */
html.kid-wait .wrap{visibility:hidden}
body.kid{--k-navy:#0a2650; --k-sky:#38bdf8; --k-blue:#2563eb; --k-line:#dbe7f5;
  background:radial-gradient(120% 60% at 80% 0%, #bfe6fb 0%, rgba(191,230,251,0) 60%), linear-gradient(180deg,#d4eefc 0%,#eaf6ff 34%,#eafaf3 100%)}
body.kid .wrap{max-width:1080px; padding:14px 18px 40px}

/* ---- the top bar */
body.kid .k-top, body.kid .top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.88); border-radius:24px; padding:8px 10px 8px 14px; margin:0 0 14px; box-shadow:0 6px 20px rgba(10,38,80,.08)}
body.kid .k-brand, body.kid .top a.brand{display:inline-flex; align-items:center; gap:10px; min-height:52px; text-decoration:none; color:var(--k-navy);
  font-weight:800; font-size:23px; letter-spacing:-.01em}
body.kid .k-brand img, body.kid .top a.brand .mark{width:48px; height:48px; border-radius:12px; box-shadow:none; flex:none}
body.kid .k-brand b, body.kid .top a.brand .bt > span:not(.k-m){color:var(--k-navy)}
body.kid .k-brand em, body.kid .top a.brand .k-m{font-style:normal; color:var(--k-blue)}
body.kid .k-nav{display:flex; gap:6px; flex-wrap:wrap}
body.kid .k-nav a{display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 18px; border-radius:18px; text-decoration:none;
  color:var(--k-navy); font-weight:700; font-size:18px}
body.kid .k-nav a svg{width:24px; height:24px}
body.kid .k-nav a.on{background:#dbeafe; color:var(--k-blue); font-weight:800}

/* ---- hello: one small row (owner, 30 Sep 2026: "the massive banner above is just saying hi. It needs to be smaller") */
body.kid .k-hello{display:flex; align-items:center; gap:12px; min-height:56px; max-height:72px; padding:4px 8px; margin:0 0 10px}
body.kid .k-avbox{flex:none; width:48px; height:48px; border-radius:50%; background:#fff; padding:3px; box-shadow:0 3px 10px rgba(10,38,80,.12)}
body.kid .k-avatar{width:100%; height:100%; display:block}
body.kid .k-hello h1{flex:0 1 auto; min-width:0; margin:0; font-size:30px; line-height:1.1; color:var(--k-navy); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.kid .k-starcount{flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:#fff; font-weight:800; font-size:20px;
  color:var(--k-navy); box-shadow:0 3px 0 #fde68a}
body.kid .k-starcount i{font-style:normal; color:#f59e0b; font-size:22px}
body.kid .k-hellodino{flex:none; width:60px; height:60px; margin-left:auto}
@media (prefers-reduced-motion:reduce){ body.kid .k-mascot{animation:none} }

/* ---- sections */
body.kid .k-sec{display:block; background:rgba(255,255,255,.94); border-radius:28px; padding:18px 18px 20px; margin:0 0 14px; box-shadow:0 8px 26px rgba(10,38,80,.07)}
body.kid .k-head{display:flex; align-items:center; gap:14px; margin:0 0 14px}
body.kid .k-head > div{flex:1; min-width:0}
body.kid .k-head h2{margin:0; font-size:30px; color:var(--k-navy); letter-spacing:-.01em}
body.kid .k-head h2 small{font-size:18px; color:#64748b}
body.kid .k-head p{margin:2px 0 0; font-size:17px; color:#475569; font-weight:600}
body.kid .k-ic{flex:none; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#e0f2fe; color:var(--k-blue); font-size:28px}
body.kid .k-ic svg{width:30px; height:30px}
body.kid .k-star{color:#f59e0b; font-size:36px; line-height:1}
body.kid .k-all{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:50px; padding:0 18px; border-radius:16px; border:2px solid #bfdbfe;
  background:#fff; color:var(--k-blue); font-weight:800; font-size:17px; text-decoration:none}
body.kid .k-all span{font-size:24px; line-height:1}
body.kid .k-h1{font-size:40px; margin:6px 4px 14px; color:var(--k-navy)}
body.kid .k-note{margin:12px 2px 0; font-size:17px; color:#475569; font-weight:600}

/* ---- Today: one numbered list, one Start (owner, 30 Sep 2026: "should the first thing they see be the work they are required to do today?") */
body.kid .k-todo{list-style:none; margin:0; padding:0; display:grid; gap:8px}
body.kid .k-todo-i{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-height:60px; padding:8px 12px; border-radius:18px; background:#f8fbff; border:2px solid var(--k-line)}
body.kid .k-n{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#e0ecff; color:var(--k-blue); font-weight:800; font-size:20px}
body.kid .k-what{flex:1 1 200px; min-width:0; display:flex; flex-direction:column}
body.kid .k-what b{font-size:20px; color:var(--k-navy); line-height:1.2}
body.kid .k-what small{font-size:15px; color:#475569; font-weight:700}
body.kid .k-mins{flex:none; font-size:15px; color:#475569; font-weight:700}
body.kid .k-tick{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:3px solid #cbd5e1; background:#fff; color:#fff}
body.kid .k-tick svg{width:24px; height:24px}
body.kid .k-todo-i.done{background:#f0fdf4; border-color:#bbf7d0}
body.kid .k-todo-i.done .k-tick{background:#16a34a; border-color:#16a34a}
body.kid .k-todo-i.done .k-what b{color:#166534}
body.kid .k-todo-i.lock{background:#f8fafc; opacity:.8}
body.kid .k-todo-i.lock .k-tick{border-color:#e2e8f0; color:#64748b; background:#f1f5f9}
body.kid .k-todo-i.paper .k-tick{border-style:dashed}
body.kid .k-todo-i.next{background:#fff; border:3px solid #86efac; box-shadow:0 6px 18px rgba(22,163,74,.14); padding:12px}
body.kid .k-todo-i.next .k-n{background:#16a34a; color:#fff}
body.kid .k-start{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; min-width:170px; padding:0 26px; border-radius:20px;
  background:linear-gradient(180deg,#22c55e,#16a34a); color:#fff; font-weight:800; font-size:26px; text-decoration:none; box-shadow:0 5px 0 #15803d}
body.kid .k-start:active{transform:translateY(3px); box-shadow:0 2px 0 #15803d}
body.kid .k-start svg{width:34px; height:34px}
body.kid .k-alldone{display:flex; align-items:center; gap:14px; margin:12px 0 0; padding:12px 16px; border-radius:20px; background:#fefce8; border:2px solid #fde68a}
body.kid .k-alldone b{font-size:24px; color:var(--k-navy)} body.kid .k-alldone p{margin:2px 0 0; font-size:16px; color:#475569; font-weight:600}
/* soft_check_lock (5 Oct 2026): the box before Show what you know while the week's lesson is not finished */
body.kid .k-warn{max-width:min(460px, calc(100vw - 32px)); padding:22px 24px; border:2px solid #fde68a; border-radius:24px; background:#fffbeb; color:var(--k-navy)}
body.kid .k-warn::backdrop{background:rgba(15,23,42,.45)}
body.kid .k-warn p{margin:0 0 10px; font-size:22px; font-weight:700; line-height:1.35}
body.kid .k-warn p + p{margin-bottom:18px; font-size:19px; font-weight:600}
body.kid .k-warn button.k-start{border:0; font-family:inherit; cursor:pointer}
body.kid .k-warnbtns{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px}
body.kid .k-warnbtns .k-start{order:0}                 /* the phone rule puts a Start last: here it stays first */
body.kid .k-warnany{display:inline-flex; align-items:center; min-height:48px; padding:0 10px; font-size:19px; font-weight:700; color:#475569}
body.kid .k-party{font-size:44px; line-height:1; animation:k-pop .6s ease-out}
body.kid .k-cheer{width:76px; height:76px; flex:none; animation:k-pop .6s ease-out}
@keyframes k-pop{0%{transform:scale(.4); opacity:0} 70%{transform:scale(1.1); opacity:1} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ body.kid .k-party, body.kid .k-cheer{animation:none} }
body.kid .k-chips{display:inline-flex; gap:5px; align-items:center}
body.kid .k-chips i{font-style:normal; font-weight:800; font-size:24px; color:var(--k-navy); min-width:34px; height:40px; padding:0 6px; display:grid; place-items:center;
  background:#fff; border-radius:10px; box-shadow:0 2px 0 #cbd5e1}
body.kid .k-chips.big i{font-size:38px; min-width:52px; height:62px; border-radius:14px; box-shadow:0 4px 0 #bfdbfe}
body.kid .k-chips.big i:nth-child(odd){transform:rotate(-5deg)} body.kid .k-chips.big i:nth-child(3){transform:rotate(5deg)}
body.kid #k-warm > div:empty{display:none}
body.kid #k-warm .panel{margin:0 0 14px; border-radius:28px}
body.kid #k-warm .btn{min-height:52px; font-size:19px; padding:0 22px}

/* ---- tiles: practice sets, lessons, locked work */
body.kid .k-row{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
body.kid .k-tile{position:relative; display:flex; flex-direction:column; gap:8px; min-height:132px; padding:14px 64px 14px 16px; border-radius:22px; text-decoration:none; color:inherit;
  background:#fff; border:2px solid var(--k-line)}
body.kid .k-tile.k-act{background:color-mix(in srgb, var(--c) 9%, white); border-color:color-mix(in srgb, var(--c) 18%, white)}
body.kid .k-tile .k-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
body.kid .k-tile small{font-size:13.5px; font-weight:800; color:color-mix(in srgb, var(--c, #64748b) 70%, #334155)}
body.kid .k-tile b{font-size:20px; color:var(--k-navy); line-height:1.2}
body.kid .k-tile em{font-style:normal; font-size:14.5px; color:#475569; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
body.kid .k-tile .k-emo{font-size:40px; line-height:1}
body.kid .k-tile.k-act .k-emo{position:absolute; right:16px; top:14px; font-size:34px}
body.kid .k-tile .k-pic .k-chips i{background:#eff6ff; box-shadow:none}
body.kid .k-tile .k-dfoot{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
body.kid .k-tile .k-dfoot small{color:#64748b}
body.kid .k-stars{display:inline-flex; gap:2px; font-size:26px; line-height:1; color:#cbd5e1}
body.kid .k-stars i{font-style:normal} body.kid .k-stars i.on{color:#fbbf24; text-shadow:0 2px 0 #f59e0b}
body.kid .k-go{position:absolute; right:12px; bottom:12px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#e0ecff; color:var(--k-blue)}
body.kid .k-go svg{width:24px; height:24px}
body.kid .k-tile.k-lockd{background:#f8fafc; opacity:.75; padding-right:16px}
body.kid .k-tile.k-lockd .k-emo{position:absolute; right:14px; top:12px; font-size:26px}
body.kid .k-more{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin:14px 0 0; padding:14px 16px; border-radius:22px; background:#fffbeb; border:2px solid #fde68a}
body.kid .k-more .k-emo{font-size:34px}
body.kid .k-more .tx{flex:1 1 220px; min-width:0} body.kid .k-more b{font-size:20px; color:var(--k-navy)} body.kid .k-more p{margin:2px 0 0; color:#475569; font-size:15px}
body.kid .k-more .btn{min-height:52px; font-size:19px; padding:0 22px}
body.kid .k-more .msg{flex:1 1 100%; font-weight:800; font-size:17px; color:#92400e; margin:0} body.kid .k-more .msg:empty{display:none}
body.kid details.k-locked > summary{list-style:none; cursor:pointer; position:relative; min-height:60px}
body.kid details.k-locked > summary::-webkit-details-marker{display:none}
body.kid details.k-locked > summary .k-head{margin:0; padding-right:60px}
body.kid details.k-locked > summary .k-ic{background:#e2e8f0; color:#334155}
body.kid details.k-locked > summary .k-go{top:50%; bottom:auto; transform:translateY(-50%); transition:transform .15s}
body.kid details.k-locked[open] > summary .k-go{transform:translateY(-50%) rotate(90deg)}
body.kid details.k-locked[open] > .k-row{margin-top:14px}
body.kid .k-bottom{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:16px; color:#475569; font-weight:600; margin:12px 4px 0}

/* ---- the practice round and the activity frame */
body.kid .top a.brand{padding-right:10px}
body.kid .k-starrow{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 12px; min-height:56px}
body.kid .k-starrow .stars{gap:10px}
body.kid .k-starrow .star{width:46px; height:46px; background:none; box-shadow:none; font-size:44px; color:#d6dee9; line-height:1}
body.kid .k-starrow .star.on{background:none; color:#fbbf24; text-shadow:0 3px 0 #f59e0b; box-shadow:none}
body.kid .k-mascot.k-mini{width:56px; height:56px; flex:none}
body.kid #panel{border-radius:32px; padding:22px 22px 24px; box-shadow:0 10px 30px rgba(10,38,80,.09)}
body.kid #panel .q{font-size:clamp(52px,9vw,88px); background:#fff; border:3px solid #dbeafe; border-radius:26px; padding:10px 14px; margin:10px auto 8px;
  max-width:640px; color:var(--k-navy); box-shadow:0 6px 0 #e0ecff; flex-wrap:wrap}
body.kid #panel .q .box{min-width:110px; height:92px; font-size:56px}
body.kid #panel .opts{gap:12px}
body.kid #panel button.opt{min-height:80px; font-size:40px; border-radius:22px; background:#dbeafe; border-color:#bfdbfe; color:var(--k-navy); box-shadow:0 6px 0 #93c5fd}
body.kid #panel button.opt.right{background:#dcfce7; border-color:#86efac; color:#15803d; box-shadow:0 6px 0 #4ade80}
body.kid #panel button.opt.wrong{background:#ffe4e6; border-color:#fda4af; color:#be123c; box-shadow:0 6px 0 #fb7185}
body.kid #panel button.key{min-height:72px; font-size:36px}
body.kid #panel .say{font-size:24px; min-height:36px}
body.kid #panel .btn{min-height:52px; font-size:18px}
body.kid #panel a.round{min-height:60px; font-size:18px; border-radius:18px}
body.kid #panel h1{font-size:34px}
@media (orientation:portrait){
  body.kid #panel .opts{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto}
  body.kid #panel button.opt{min-height:66px; font-size:36px}
}

/* ---- phone */
@media (max-width:700px){
  body.kid .wrap{padding:10px 12px 32px}
  body.kid .k-top{border-radius:20px; padding:6px 8px}
  body.kid .k-brand{font-size:19px} body.kid .k-brand img{width:44px; height:44px}
  body.kid .k-nav{width:100%; justify-content:space-between}
  body.kid .k-nav a{flex:1; justify-content:center; padding:0 8px; font-size:16px; gap:6px}
  body.kid .k-sec{padding:14px 12px 16px; border-radius:24px}
  body.kid .k-head{flex-wrap:wrap; gap:10px}
  body.kid .k-head h2{font-size:25px}
  body.kid .k-ic{width:50px; height:50px}
  body.kid .k-all{order:3; flex:1 1 100%; justify-content:center}
  body.kid .k-row{grid-template-columns:1fr}
  body.kid .top a.brand{font-size:19px}
  body.kid .k-starrow .star{width:40px; height:40px; font-size:38px}
  body.kid .k-starrow .stars{gap:4px}
  body.kid .k-mascot.k-mini{width:44px; height:44px}
  body.kid #panel{padding:16px 12px 18px}
}

/* ---- below Today: smaller (My island, My practice, Lessons, Locked work) */
body.kid .k-sec.k-small{padding:12px 14px 14px; border-radius:22px}
body.kid .k-small .k-head{margin:0 0 10px; gap:10px}
body.kid .k-small .k-head h2{font-size:22px}
body.kid .k-small .k-head p{font-size:15px}
body.kid .k-small .k-ic{width:44px; height:44px; font-size:22px}
body.kid .k-small .k-ic svg{width:24px; height:24px}
body.kid .k-small .k-tile{min-height:104px; padding:10px 60px 10px 14px}
body.kid .k-small .k-tile b{font-size:18px}
body.kid .k-small .k-tile .k-pic{display:none}
body.kid .k-small details.k-locked > summary, body.kid details.k-locked.k-small > summary{min-height:52px}

/* ---- My island: a path of stones (real passes only) */
body.kid .k-trail + .k-trail{margin-top:8px}
body.kid .k-trail h3{margin:0 0 2px; font-size:17px; color:var(--k-navy)}
body.kid .k-path{position:relative; height:calc(var(--rows) * 124px)}
body.kid .k-path svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
body.kid .k-path path{fill:none; stroke:#d6b77c; stroke-width:10; stroke-linecap:round; stroke-dasharray:2 16}
body.kid .k-stop{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; min-width:56px; min-height:56px;
  text-decoration:none; color:var(--k-navy)}
body.kid .k-stone{width:56px; height:56px; display:block}
body.kid .k-stop .k-lbl{font-size:14px; font-weight:800; white-space:nowrap; background:rgba(255,255,255,.9); border-radius:8px; padding:0 6px; margin-top:-4px}
body.kid .k-stop.shut{opacity:.55}
body.kid .k-stop.done .k-lbl{color:#166534}
body.kid .k-here{position:absolute; bottom:calc(100% - 6px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center;
  font-size:12px; font-weight:800; color:#b91c1c; white-space:nowrap; line-height:1.1}
body.kid .k-pin{width:34px; height:34px; order:2}
body.kid .k-sec.k-big .k-path{height:calc(var(--rows) * 150px)}
body.kid .k-sec.k-big .k-stone{width:72px; height:72px}
body.kid .k-sec.k-big .k-trail h3{font-size:22px}
body.kid .k-sec.k-big .k-lbl{font-size:16px}

/* ---- My dinos */
body.kid .k-dinos{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
body.kid .k-dcard{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 8px 12px; border-radius:20px; background:#fff; border:2px solid var(--k-line)}
body.kid .k-dcard.hatched{background:#f0fdf4; border-color:#bbf7d0}
body.kid .k-dimg{width:110px; height:110px}
body.kid .k-dcard.egg .k-dimg{width:80px; height:100px; margin:5px 0}
body.kid .k-dcard b{font-size:18px; color:var(--k-navy)} body.kid .k-dcard small{font-size:14px; color:#475569; font-weight:600}

/* ---- the set test's finish screen: the new dino, once */
body.kid .k-hatch{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin:0 auto 14px; max-width:640px;
  padding:12px 16px; border-radius:24px; background:#fefce8; border:3px solid #fde68a}
body.kid .k-hatch h3{margin:0; font-size:28px; color:var(--k-navy)} body.kid .k-hatch p{margin:4px 0 10px; font-size:17px; font-weight:600; color:#334155}
body.kid .k-hatchpic{position:relative; width:150px; height:150px; flex:none}
body.kid .k-eggc{position:absolute; left:25px; bottom:0; width:100px; height:125px; opacity:.9; animation:k-wob .5s ease-in-out}
body.kid .k-baby{position:absolute; left:5px; top:0; width:140px; height:140px; animation:k-pop .8s ease-out}
@keyframes k-wob{25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){ body.kid .k-eggc, body.kid .k-baby{animation:none} }
body.kid .k-btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:18px; color:#fff; font-weight:800; font-size:19px; text-decoration:none}

/* ---- Dino Island (switch dino_theme): the jungle round the edges, a plain light centre, parchment for the work */
body.kid.dino{background:#f1f8e6}
body.kid.dino::before{content:""; position:fixed; inset:0; z-index:-1; background:#f1f8e6 var(--dino-bg, none) center/cover no-repeat}
body.kid.dino .k-top, body.kid.dino .top{background:rgba(255,252,240,.94); border:2px solid #e9d8a6}
body.kid.dino .k-sec{background:rgba(255,252,242,.96); border:2px solid #ecdcb0}
body.kid.dino .k-todo-i{background:#fffdf6; border-color:#efe2bd}
body.kid.dino .k-todo-i.done{background:#f0fdf4; border-color:#bbf7d0}
body.kid.dino .k-todo-i.next{background:#fff; border-color:#86efac}
body.kid.dino .k-n{background:#fdf0c8; color:#8a5a14}
body.kid.dino .k-todo-i.next .k-n{background:#16a34a; color:#fff}
body.kid.dino .k-ic{background:#e8f5d8; color:#3f7a1e}
body.kid.dino .k-tile, body.kid.dino .k-dcard{border-color:#efe2bd}
body.kid.dino #panel{background:rgba(255,252,242,.97); border:2px solid #ecdcb0}
body.kid.dino #panel .q{background:#fdf3d7; border:4px solid #d9b77a; box-shadow:0 6px 0 #c9a45f; color:#1f2937}
body.kid.dino #panel .q .box{background:#fff; border-color:#c9a45f}
body.kid.dino #panel button.opt{background:#fff6dc; border:3px solid #d9b77a; box-shadow:0 6px 0 #c9a45f; color:#1f2937}
body.kid.dino #panel button.opt.right{background:#dcfce7; border-color:#86efac; color:#15803d; box-shadow:0 6px 0 #4ade80}
body.kid.dino #panel button.opt.wrong{background:#ffe4e6; border-color:#fda4af; color:#be123c; box-shadow:0 6px 0 #fb7185}
body.kid .btn.k-green, body.kid .k-btn.k-green{background:linear-gradient(180deg,#22c55e,#16a34a); color:#fff; border:0; box-shadow:0 5px 0 #15803d}
body.kid .btn.k-blue, body.kid .k-btn.k-blue{background:linear-gradient(180deg,#38bdf8,#0284c7); color:#fff; border:0; box-shadow:0 5px 0 #0369a1}
body.kid .btn.k-orange{background:linear-gradient(180deg,#fb923c,#ea580c); color:#fff; border:0; box-shadow:0 5px 0 #c2410c}
body.kid .btn.k-green, body.kid .btn.k-blue, body.kid .btn.k-orange{min-height:56px; border-radius:18px; font-size:20px; font-weight:800}
/* the helper dino: at the edge of the round, beside the stars; short kind words, never on the question */
body.kid .k-helper{position:relative; display:flex; align-items:center; gap:8px}
body.kid .k-helper .k-dino{width:64px; height:64px; flex:none}
body.kid .k-bubble{position:relative; background:#fff; border:2px solid #d9b77a; border-radius:16px; padding:6px 12px; font-weight:800; font-size:17px; color:var(--k-navy);
  max-width:230px; visibility:hidden; opacity:0; transition:opacity .2s}
body.kid .k-bubble.on{visibility:visible; opacity:1}
body.kid .k-bubble::before{content:""; position:absolute; left:-9px; top:50%; margin-top:-7px; border:7px solid transparent; border-right-color:#d9b77a; border-left:0}
@media (prefers-reduced-motion:reduce){ body.kid .k-bubble{transition:none} }

body.kid .k-nav.five a{padding:0 12px}
@media (min-width:701px) and (max-width:1000px){
  body.kid .k-brand{font-size:20px}
  body.kid .k-nav.five a{flex-direction:column; gap:0; padding:0 10px; font-size:14px; line-height:1.1}
  body.kid .k-nav.five a svg{width:22px; height:22px}
}
@media (max-width:700px){
  body.kid .k-hello h1{font-size:24px}
  body.kid .k-starcount{font-size:17px; padding:4px 10px}
  body.kid .k-hellodino{width:48px; height:48px}
  body.kid .k-todo-i{padding:8px 10px}
  body.kid .k-mins{order:3; flex:1 1 auto; padding-left:52px}
  body.kid .k-start{order:4; flex:1 1 100%}
  body.kid .k-nav.five a{flex-direction:column; gap:0; font-size:12.5px; padding:2px 2px; min-height:52px; line-height:1.1}
  body.kid .k-nav.five a svg{width:22px; height:22px}
  body.kid .k-path{height:calc(var(--rows) * 104px)}
  body.kid .k-stone{width:48px; height:48px}
  body.kid .k-stop .k-lbl{font-size:12px}
  body.kid .k-sec.k-big .k-stone{width:52px; height:52px}
  body.kid .k-sec.k-big .k-lbl{font-size:13px}
  body.kid .k-sec.k-big .k-path{height:calc(var(--rows) * 120px)}
  body.kid .k-dinos{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.kid .k-helper .k-dino{width:48px; height:48px}
  body.kid .k-bubble{font-size:14px; max-width:150px; padding:4px 8px}
}

/* ================================================================ Gameful learning (1 Oct 2026, features.json _gameful).
   Each part only through its own switch: a body class kid.js adds (k-calm, k-wash, k-parch) or an element it makes. */
/* ---- calm_background (the owner: "all we see are the busy sides ... it detracts from the boxes of the work"): on a work page
   a strong cream wash, the picture only a strip at the bottom; home, island and dinos a lighter wash */
body.kid.dino.k-calm::before{background:linear-gradient(180deg,rgba(255,251,240,.93) 0%,rgba(255,251,240,.93) 82%,rgba(255,251,240,.4) 100%),
  var(--dino-bg, none) center bottom/cover no-repeat, #f1f8e6}
body.kid.dino.k-wash::before{background:linear-gradient(rgba(255,251,240,.5),rgba(255,251,240,.5)), var(--dino-bg, none) center/cover no-repeat, #f1f8e6}
body.kid.dino.k-calm .top, body.kid.dino.k-calm #panel{box-shadow:0 10px 30px rgba(90,62,20,.12)}

/* ---- parchment_tiles (the owner's mock-ups, in CSS only): the question card, a tile for each number, parchment buttons with a
   darker bottom edge, plain green / blue / purple / gold frames round the home sections */
body.kid.dino.k-parch #panel .q{background:radial-gradient(130% 150% at 50% 0%,#fffaeb 0%,#f6e6c1 100%); border:4px solid #c9a46a; border-radius:28px;
  box-shadow:inset 0 0 0 4px #fbf1d9, 0 7px 0 #b08950; gap:clamp(6px,1.4vw,14px); padding:16px 14px; font-size:clamp(40px,8vw,76px)}
body.kid.dino.k-parch #panel .q > span:not(.box){min-width:1.25em; padding:2px .2em 0; text-align:center; border-radius:18px; line-height:1.18;
  background:linear-gradient(180deg,#fffcf3 0%,#f3e2ba 100%); border:3px solid #d4b077; box-shadow:0 5px 0 #b08950}
body.kid.dino.k-parch #panel .q .box{background:#fffdf7; border:4px dashed #c9a46a; border-radius:18px; box-shadow:none}
body.kid.dino.k-parch #panel .q .box.right{border-style:solid; border-color:#86efac; background:#f0fdf4}
body.kid.dino.k-parch #panel button.opt, body.kid.dino.k-parch #panel button.key:not(.ok){background:linear-gradient(180deg,#fffcf3 0%,#f3e2ba 100%);
  border:3px solid #d4b077; box-shadow:0 7px 0 #a98247; color:#3b2a14; border-radius:22px}
body.kid.dino.k-parch #panel button.opt:active, body.kid.dino.k-parch #panel button.key:not(.ok):active{transform:translateY(4px); box-shadow:0 3px 0 #a98247}
body.kid.dino.k-parch #panel button.opt.right{background:#dcfce7; border-color:#86efac; color:#15803d; box-shadow:0 7px 0 #4ade80}
body.kid.dino.k-parch #panel button.opt.wrong{background:#ffe4e6; border-color:#fda4af; color:#be123c; box-shadow:0 7px 0 #fb7185}
body.kid.dino.k-parch #panel button.key.ok{border-radius:22px; box-shadow:0 7px 0 #15803d; background:linear-gradient(180deg,#22c55e,#16a34a); border-color:#16a34a}
body.kid.dino.k-parch #panel input.pen{background:#fffdf7; border-color:#c9a46a}
body.kid.dino.k-parch .k-sec{background:#fffdf5}
body.kid.dino.k-parch #k-today{border:4px solid #6aa84f; box-shadow:0 6px 0 rgba(74,124,47,.25)}
body.kid.dino.k-parch #k-island{border:4px solid #3b8fd0; box-shadow:0 6px 0 rgba(35,99,150,.22)}
body.kid.dino.k-parch #k-practice, body.kid.dino.k-parch #k-allsets{border:4px solid #9466c9; box-shadow:0 6px 0 rgba(104,64,150,.22)}
body.kid.dino.k-parch #k-learn, body.kid.dino.k-parch #k-alllearn{border:4px solid #d9a02b; box-shadow:0 6px 0 rgba(160,110,20,.25)}

/* ---- fixup_round: "Let's fix these" */
body.kid #panel .pill.fixing{background:#fde68a; color:#7c4a03; font-size:18px; padding:6px 14px; margin-left:0}
body.kid #panel button.opt.show{border-color:#22c55e; box-shadow:0 0 0 5px #bbf7d0, 0 7px 0 #4ade80}
body.kid #panel .q .box.wrong{border-color:#fda4af; background:#fff1f2; color:#be123c}

/* ---- stars_info: how many are done, never how many are right */
body.kid .k-prog{display:block; width:min(360px,48vw); height:20px; border-radius:999px; background:#efe3c4; overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(60,40,10,.18)}
body.kid .k-prog i{display:block; height:100%; border-radius:999px; background:linear-gradient(180deg,#8bd46f,#4caf50); transition:width .3s}
body.kid #panel .done .lead.k-info{font-size:24px; font-weight:800; color:var(--k-navy)}
body.kid .k-prog.fixing i{background:linear-gradient(180deg,#fcd34d,#f59e0b)}
@media (prefers-reduced-motion:reduce){ body.kid .k-prog i{transition:none} }

/* ---- egg_growth: still, wobble, small crack, bigger crack (CSS over the egg picture) */
body.kid .k-eggbox{position:relative; display:inline-block; line-height:0; transform-origin:50% 88%}
body.kid .k-crack{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
body.kid .k-crack path{fill:none; stroke:#4a2f12; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
body.kid .k-dcard.egg .k-eggbox{margin:5px 0} body.kid .k-dcard.egg .k-eggbox .k-dimg{margin:0}
body.kid .k-st1 .k-eggbox, body.kid .k-st2 .k-eggbox{animation:k-wobble 3s ease-in-out infinite}
body.kid .k-st3 .k-eggbox{animation:k-wobble 1.8s ease-in-out infinite}
@keyframes k-wobble{0%,64%,100%{transform:rotate(0)} 72%{transform:rotate(-7deg)} 82%{transform:rotate(6deg)} 91%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){ body.kid .k-st1 .k-eggbox, body.kid .k-st2 .k-eggbox, body.kid .k-st3 .k-eggbox{animation:none; transform:rotate(-5deg)} }
body.kid .k-egg{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; text-align:left; margin:0 auto 14px; max-width:640px;
  padding:10px 16px; border-radius:24px; background:#f7fee7; border:3px solid #bef264}
body.kid .k-egg .k-dimg{width:96px; height:96px}
body.kid .k-egg h3{margin:0; font-size:24px; color:var(--k-navy)} body.kid .k-egg p{margin:2px 0 0; font-size:17px; font-weight:600; color:#334155}

/* ---- mastery_labels: Mastered (gold), Nearly there, Learning; a test not passed is never called a loss */
body.kid .k-mlabel{display:inline-block; font-size:12.5px; font-weight:800; line-height:1.5; border-radius:999px; padding:0 8px; white-space:nowrap}
body.kid .k-mlabel.mastered{background:#fde68a; color:#78350f}
body.kid .k-mlabel.nearly{background:#dcfce7; color:#166534}
body.kid .k-mlabel.learning{background:#e0f2fe; color:#075985}
body.kid .k-stop .k-mlabel{margin-top:2px}
body.kid .k-trail.k-labelled + .k-trail{margin-top:22px}
body.kid .k-trail.k-labelled h3{margin-bottom:12px}
body.kid .k-stop.k-mastered .k-stone{filter:drop-shadow(0 0 7px rgba(251,191,36,.95))}
body.kid .k-mastery{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 12px; max-width:640px; margin:0 auto 14px;
  padding:12px 16px; border-radius:22px; background:#f0f9ff; border:3px solid #bae6fd; text-align:center}
body.kid .k-mastery b{font-size:22px; color:var(--k-navy)} body.kid .k-mastery span{font-size:17px; font-weight:700; color:#334155}
body.kid .k-mastery .k-mlabel{font-size:15px; padding:2px 12px}
body.kid .k-mastery.gold{background:#fffbeb; border-color:#fbbf24}

/* ---- place_choice: Where shall we go today? */
body.kid .k-places{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 0; padding:10px 12px; border-radius:18px;
  background:#fffdf6; border:2px dashed #e2cd98}
body.kid .k-places > b{font-size:17px; color:var(--k-navy)}
body.kid .k-placebtns{display:flex; flex-wrap:wrap; gap:8px}
body.kid .k-place{display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:3px 12px 3px 3px; border-radius:16px; border:3px solid #e2cd98;
  background:#fff; font:inherit; font-weight:800; font-size:16px; color:var(--k-navy); cursor:pointer}
body.kid .k-place .k-thumb{flex:none; width:58px; height:40px; border-radius:11px; background:#e5e7eb center/cover no-repeat}
body.kid .k-place.on{border-color:#16a34a; box-shadow:0 0 0 3px #bbf7d0; background:#f0fdf4}
@media (max-width:700px){
  body.kid .k-placebtns{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%}
  body.kid .k-prog{width:min(220px,46vw)}
  body.kid.dino.k-parch #panel .q{padding:12px 6px; gap:5px; font-size:32px}
  body.kid.dino.k-parch #panel .q .box{min-width:60px; height:56px; font-size:30px}
  body.kid .k-egg{text-align:center}
}

/* ================================================================ More of the mock-up look (1 Oct 2026, the owner: "integrate these more -
   especially the cards and the light brown boxes with the brick borders"; "the background needs to be lighter"; "our logo seems out of
   place"). Each part through its own switch: k-stone (stone_frames), k-logo (themed_logo), the topic tiles (topic_tiles, made by kid.js);
   the wash numbers from features.json dino_wash (not set = the numbers before). */
/* ---- dino_wash: how much cream lies over the picture (0 = the picture, 1 = plain cream) */
body.kid.dino.k-calm::before{background:linear-gradient(180deg,rgba(255,251,240,var(--k-wash-work,.93)) 0%,rgba(255,251,240,var(--k-wash-work,.93)) 82%,
  rgba(255,251,240,calc(var(--k-wash-work,.93) - .53)) 100%), var(--dino-bg, none) center bottom/cover no-repeat, #f1f8e6}
body.kid.dino.k-wash::before{background:linear-gradient(rgba(255,251,240,var(--k-wash-home,.5)),rgba(255,251,240,var(--k-wash-home,.5))),
  var(--dino-bg, none) center/cover no-repeat, #f1f8e6}

/* ---- stone_frames (the owner's card mock-ups, 1 Oct 2026): curved frames with rounded corners, a different look for each box, and the
   stones, leaves or quartz INSIDE each corner (img/dino/box-<name>.svg, tools/draw-frames.py): Today leafy green, My island blue with
   stones, practice purple with quartz, lessons gold with rocks, locked grey, the work natural stone on the brownish-orange board.
   The cards take their topic's frame. The top bar is a green banner, as in the mock-up's home page. */
body.kid.dino.k-stone{--frame:url(img/dino/box-stone.svg); --k-in:radial-gradient(120% 130% at 50% 30%, #f6e0b0 0%, #ecc78c 58%, #d9a35e 100%)}
body.kid.dino.k-stone :is(.k-sec, #panel, #k-today, #k-island, #k-practice, #k-allsets, #k-learn, #k-alllearn){
  border:38px solid transparent; border-image:var(--frame) 84 / 50px stretch; border-radius:44px; padding:0;
  box-shadow:0 8px 18px rgba(70,45,15,.16); background:var(--k-in) border-box}
body.kid.dino.k-stone #k-today{--frame:url(img/dino/box-leaf.svg); --k-in:linear-gradient(180deg,#fbf3d2,#f1e2a8)}
body.kid.dino.k-stone :is(#k-island, #k-islandv .k-sec){--frame:url(img/dino/box-blue.svg); --k-in:linear-gradient(180deg,#ecf8f8,#d3ecee)}
body.kid.dino.k-stone :is(#k-practice, #k-allsets){--frame:url(img/dino/box-purple.svg); --k-in:linear-gradient(180deg,#f8f0fd,#ebdef5)}
body.kid.dino.k-stone :is(#k-learn, #k-alllearn){--frame:url(img/dino/box-gold.svg); --k-in:linear-gradient(180deg,#fff6dc,#fbe6b0)}
body.kid.dino.k-stone .k-locked{--frame:url(img/dino/box-grey.svg); --k-in:#f4f1ec}
body.kid.dino.k-stone #k-dinosv .k-sec{--frame:url(img/dino/box-leaf.svg); --k-in:linear-gradient(180deg,#fbf3d2,#f1e2a8)}
body.kid.dino.k-stone :is(.k-head h2, .k-trail h3){color:#3b2410}
body.kid.dino.k-stone :is(.k-head p, .k-note){color:#5a3b17}
body.kid.dino.k-stone .k-stop.shut{opacity:.85}
body.kid.dino.k-stone .k-stop.shut .k-lbl{color:#5a3b17; background:rgba(255,250,238,.9)}
/* the cards: the frame of their topic (topic_tiles) or sand, light inside in the topic's colour */
body.kid.dino.k-stone :is(.k-tile, .k-dcard){--frame:url(img/dino/box-sand.svg); border:26px solid transparent; border-image:var(--frame) 84 / 34px stretch;
  border-radius:30px; box-shadow:0 4px 8px rgba(70,45,15,.14); background:color-mix(in srgb, var(--c, #d6b57e) 10%, #fffaf0) border-box}
body.kid.dino.k-stone .k-tile{padding:0 44px 0 0; min-height:112px}
body.kid.dino.k-stone .k-tile.k-lockd{--frame:url(img/dino/box-grey.svg); background:#f4f1ec border-box}
body.kid.dino.k-stone .k-tile .k-go{right:-6px; bottom:-6px}
body.kid.dino.k-stone .k-tile .k-tt-card{right:-6px; top:-6px}
/* the light parchment boxes inside a box: the Today rows, More practice, Where shall we go today? */
body.kid.dino.k-stone .k-todo-i{background:linear-gradient(180deg,#fffaee 0%,#f7e6c4 100%); border:2px solid #c9a46a; box-shadow:0 4px 0 rgba(140,100,50,.4)}
body.kid.dino.k-stone .k-todo-i.next{background:linear-gradient(180deg,#fffef8 0%,#eef8df 100%); border-color:#6fb04d; box-shadow:0 4px 0 rgba(74,140,47,.5)}
body.kid.dino.k-stone .k-todo-i.done{background:linear-gradient(180deg,#f7fdf2 0%,#e3f4d6 100%); border-color:#8fcb72}
body.kid.dino.k-stone :is(.k-more, .k-places){background:linear-gradient(180deg,#fffaee 0%,#f7e6c4 100%); border:2px solid #c9a46a; box-shadow:0 4px 0 rgba(140,100,50,.4)}
/* chunky buttons, as in the mock-up: View all and the others in orange, Show me in blue */
body.kid.dino.k-stone .k-all{background:linear-gradient(180deg,#ffb04a 0%,#f08a1c 100%); border:2px solid #b85f0c; box-shadow:0 4px 0 #a5520a; color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.25)}
body.kid.dino.k-stone .k-all:active{transform:translateY(3px); box-shadow:0 1px 0 #a5520a}
body.kid.dino.k-stone .k-ic{background:linear-gradient(180deg,#fffcf3,#f1e0b6); color:#7a4f1d; box-shadow:inset 0 0 0 2px #d9bd85}
@media (max-width:700px){
  body.kid.dino.k-stone :is(.k-sec, #panel, #k-today, #k-island, #k-practice, #k-allsets, #k-learn, #k-alllearn){border-width:28px; border-image-width:38px; border-radius:34px}
  body.kid.dino.k-stone :is(.k-tile, .k-dcard){border-width:20px; border-image-width:28px}
  body.kid.dino.k-stone :is(.k-top, .top){border-radius:20px}
}

/* ---- topic_tiles: the coloured tile of a set's or a lesson's topic (curriculum/topic-tiles.json) */
body.kid .k-ttile{flex:none; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; box-sizing:border-box;
  background:linear-gradient(180deg, color-mix(in srgb, var(--t) 62%, #fff) 0%, var(--t) 58%); border:2px solid color-mix(in srgb, var(--t) 70%, #000);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 color-mix(in srgb, var(--t) 60%, #000)}
body.kid .k-ttile svg{width:64%; height:64%; filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.35))}
body.kid .k-ttile b{color:#fff; font-weight:900; font-size:24px; line-height:1; text-shadow:0 2px 0 rgba(0,0,0,.32), 0 0 2px rgba(0,0,0,.35)}
body.kid .k-ttile b.k-ttw{font-size:15px; letter-spacing:-.02em}
body.kid .k-tile .k-tt-card{position:absolute; right:12px; top:12px; width:50px; height:50px; border-radius:14px}
body.kid .k-tile .k-tt-card b{font-size:28px} body.kid .k-tile .k-tt-card b.k-ttw{font-size:17px}
body.kid .k-todo-i.done .k-tt-row, body.kid .k-todo-i.lock .k-tt-row{opacity:.6}
@media (max-width:700px){ body.kid .k-tt-row{width:34px; height:34px; border-radius:10px} body.kid .k-tt-row b{font-size:19px} body.kid .k-tt-row b.k-ttw{font-size:12px} }

/* ---- themed_logo: the logo stays as it is, on a round parchment plaque; the name and the menu in the theme's colours */
body.kid.dino.k-logo :is(.k-brand img, .top a.brand .mark){width:54px; height:54px; padding:5px; box-sizing:border-box; border-radius:50%; object-fit:contain;
  background:radial-gradient(circle at 50% 35%, #fffdf5 0%, #f1dfb5 100%); border:3px solid #b08950; box-shadow:0 3px 0 #8a6a3a, inset 0 0 0 2px #fff6dd}
body.kid.dino.k-logo :is(.k-brand, .top a.brand), body.kid.dino.k-logo :is(.k-brand b, .top a.brand .bt > span:not(.k-m)){color:#5a3b17}
body.kid.dino.k-logo :is(.k-brand span, .top a.brand .bt){text-shadow:0 1px 0 #fffaeb}
body.kid.dino.k-logo :is(.k-brand em, .top a.brand .k-m){color:#3f8f2a}
body.kid.dino.k-logo .k-nav a{color:#5a3b17}
body.kid.dino.k-logo .k-nav a.on{background:linear-gradient(180deg,#eef8df,#d9efc4); color:#2f6b1d; box-shadow:inset 0 0 0 2px #a7d98c}

/* ---- island_art (the owner, 1 Oct 2026: "with the map I want more colours and more of an island feel"): the path on an island
   (img/dino/map-island.svg, tools/draw-island.py; or the owner's own picture "map-island" in img/dino/assets.json), a sandy trail,
   stones in colours, a wooden sign for each path's name */
body.kid.dino.k-isle .k-path{background:var(--map-bg, url(img/dino/map-island.svg)) center/cover no-repeat; border-radius:24px; border:3px solid #e2c27a;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), 0 4px 10px rgba(30,80,110,.18); margin:4px 0 6px}
body.kid.dino.k-isle .k-path path{stroke:#fbe7b0; stroke-width:9; stroke-dasharray:none; stroke-linecap:round}
body.kid.dino.k-isle .k-path path.k-edge{stroke:#a5773c; stroke-width:15}
body.kid.dino.k-isle .k-trail h3{display:inline-block; margin:0 0 6px; padding:3px 14px; border-radius:12px; color:#fff8e6; font-size:16px;
  background:linear-gradient(180deg,#c58a4a,#985f2c); border:2px solid #6b4626; box-shadow:0 3px 0 #6b4626; text-shadow:0 1px 0 rgba(0,0,0,.3)}
body.kid.dino.k-isle .k-stop .k-stone{filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
body.kid.dino.k-isle .k-stop:not(.shut):not(.done):nth-of-type(4n+1) .k-stone{filter:sepia(.8) saturate(3) hue-rotate(160deg) drop-shadow(0 3px 2px rgba(0,0,0,.35))}
body.kid.dino.k-isle .k-stop:not(.shut):not(.done):nth-of-type(4n+2) .k-stone{filter:sepia(.8) saturate(3) hue-rotate(230deg) drop-shadow(0 3px 2px rgba(0,0,0,.35))}
body.kid.dino.k-isle .k-stop:not(.shut):not(.done):nth-of-type(4n+3) .k-stone{filter:sepia(.8) saturate(3) hue-rotate(300deg) drop-shadow(0 3px 2px rgba(0,0,0,.35))}
body.kid.dino.k-isle .k-stop:not(.shut):not(.done):nth-of-type(4n) .k-stone{filter:sepia(.8) saturate(3) hue-rotate(60deg) drop-shadow(0 3px 2px rgba(0,0,0,.35))}
body.kid.dino.k-isle .k-stop.here .k-stone{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 4px #22c55e)}
body.kid.dino.k-isle .k-stop.shut{opacity:1}
body.kid.dino.k-isle .k-stop.shut .k-stone{filter:grayscale(.4) drop-shadow(0 3px 2px rgba(0,0,0,.3))}
body.kid.dino.k-isle .k-stop .k-lbl{background:#fff; border:2px solid #2f6b26; color:#2f5a17; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,.18)}
body.kid.dino.k-isle .k-stop.shut .k-lbl{background:#fffaf0; border-color:#b8ab96; color:#5f5850}
body.kid.dino.k-isle .k-stop.done .k-lbl{background:#fde68a; border-color:#b45309; color:#78350f}
body.kid.dino.k-isle .k-here{color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* stone_frames: the top bar, a green banner with a light edge; the logo on its plaque; the name and the menu in cream (after themed_logo's
   brown, so these win) */
body.kid.dino.k-stone :is(.k-top, .top){border:3px solid #1f4a18; border-radius:26px; padding:4px 10px;
  background:linear-gradient(180deg,#4f9a3a 0%,#2f6b26 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(30,60,20,.25)}
body.kid.dino.k-stone :is(.k-brand, .top a.brand), body.kid.dino.k-stone :is(.k-brand b, .top a.brand .bt > span:not(.k-m)){color:#fff8e6}
body.kid.dino.k-stone :is(.k-brand span, .top a.brand .bt){text-shadow:0 2px 0 rgba(0,0,0,.25)}
body.kid.dino.k-stone :is(.k-brand em, .top a.brand .k-m){color:#ffd970}
body.kid.dino.k-stone .k-nav a{color:#fff8e6}
body.kid.dino.k-stone .k-nav a.on{background:linear-gradient(180deg,#fffaee,#f1e2b8); color:#2f5a17; box-shadow:0 3px 0 #1f4a18}
body.kid.dino.k-stone #panel a.btn.ghost[href*="show-me"]{background:linear-gradient(180deg,#5cb8f0 0%,#2b8bd6 100%); border:2px solid #1c6aa8; color:#fff;
  box-shadow:0 4px 0 #17588c; text-shadow:0 1px 0 rgba(0,0,0,.25)}
/* island_art: more room between the rows, and "You are here" in red with a white outline */
body.kid.dino.k-isle .k-path{height:calc(var(--rows) * 146px)}
body.kid.dino.k-isle .k-sec.k-big .k-path{height:calc(var(--rows) * 164px)}
body.kid.dino.k-isle .k-here{color:#b91c1c; font-size:13px; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 2px #fff}
@media (max-width:700px){ body.kid.dino.k-isle .k-path{height:calc(var(--rows) * 122px)} body.kid.dino.k-isle .k-sec.k-big .k-path{height:calc(var(--rows) * 132px)} }

/* ================================================================ calm_layout (1 Oct 2026, the owner: "is our design currently too busy and takes away
   the focus of learning"): calm where the child thinks, colourful where the child chooses. The main switch calm_layout and one switch
   for each part; each part off = exactly as before. */
/* calm_work_strip: a work page (a round, an activity, the week check) on plain cream, without the jungle strip at the bottom */
body.kid.dino.k-calm.k-nostrip::before{background:#fbf6e9}
/* calm_work_board: the question board without the stones in its corners */
body.kid.dino.k-stone.k-plainboard #panel{--frame:url(img/dino/box-stone-plain.svg)}
/* calm_home_island: on the home page a small My island button; the map is on the My island page */
body.kid .k-islandbtn{position:relative; display:flex; align-items:center; gap:14px; min-height:72px; margin:0 0 14px; padding:10px 64px 10px 12px;
  border-radius:24px; text-decoration:none; color:inherit; background:linear-gradient(180deg,#ecf8f8,#d3ecee); border:3px solid #4a9cc6; box-shadow:0 4px 0 #1f5a7a}
body.kid .k-islandbtn .k-isthumb{flex:none; width:84px; height:54px; border-radius:14px; border:2px solid #e2c27a; background:var(--map-bg, url(img/dino/map-island.svg)) center/cover no-repeat}
body.kid .k-islandbtn b{font-size:22px; color:#3b2410} body.kid .k-islandbtn small{display:block; font-size:15px; font-weight:700; color:#1f5a7a}
body.kid .k-islandbtn .k-go{position:absolute; right:14px; top:50%; margin-top:-24px}
/* calm_home_small: My practice and Lessons smaller on the home page (the full cards stay under My work) */
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-tile{min-height:0}
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-tile :is(em, .k-dfoot){display:none}
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-tile b{font-size:17px}
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-head h2{font-size:24px}
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-ic{width:46px; height:46px; font-size:22px}
body.kid.k-homesmall #k-home #k-practice .k-more{padding:6px 12px}
body.kid.k-homesmall #k-home #k-practice .k-more p{display:none}
body.kid.k-homesmall #k-home :is(#k-practice, #k-learn) .k-tile .k-go{display:none}                   /* the whole card is the link */

/* ---- place_sky (1 Oct 2026, the owner: "another option for those who find the background too distracting"): the plain sky, as it is on
   every page (no wash, no jungle strip) */
body.kid.dino.k-sky::before, body.kid.dino.k-sky.k-wash::before, body.kid.dino.k-sky.k-calm::before, body.kid.dino.k-sky.k-calm.k-nostrip::before{
  background:var(--dino-bg, none) center/cover no-repeat, #dff2fd}

/* ================================================================ quiet_look (2 Oct 2026, the owner: "too busy and colourful ... distracting to the
   learner"; "make sure the tan colour is a light tan"). Quiet where the child works (k-qwork) and on the home and My work views (k-qhome);
   My island and My dinos as they are. Colours: --q-page, --q-card (the light tan), --q-line, --q-btn (features.json quiet_colours).
   Every rule needs one of the quiet classes, so with the switches off nothing here applies. */
body.kid.dino{--q-page:#ffffff; --q-card:#fbf6ec; --q-line:#ece1cb; --q-btn:#0a2650;
  --q-bar-from:#cfe4fb; --q-bar-to:#ffffff; --q-bar-text:#0a2650; --q-bar-line:#d6e4f5; --q-greet:#ffffff; --q-greet-line:var(--q-line)}
/* the page: plain, no picture */
body.kid.dino:is(.k-qwork, .k-qhome){background:var(--q-page)}
body.kid.dino:is(.k-qwork, .k-qhome)::before{background:var(--q-page) !important}     /* over calm_background, calm_work_strip and the sky */
/* the top bar: white, a thin line, the name and the menu in navy */
body.kid.dino.k-qwork .top, body.kid.dino.k-qhome .k-top{background:#fff; border:1px solid var(--q-line); border-radius:20px; box-shadow:none; padding:4px 10px}
body.kid.dino:is(.k-qwork, .k-qhome) :is(.k-brand, .top a.brand), body.kid.dino:is(.k-qwork, .k-qhome) :is(.k-brand b, .top a.brand .bt > span:not(.k-m)){color:var(--k-navy)}
body.kid.dino:is(.k-qwork, .k-qhome) :is(.k-brand span, .top a.brand .bt){text-shadow:none}
body.kid.dino:is(.k-qwork, .k-qhome) :is(.k-brand em, .top a.brand .k-m){color:#2563eb}
body.kid.dino:is(.k-qwork, .k-qhome) :is(.k-brand img, .top a.brand .mark){background:none; border:0; box-shadow:none; padding:0}
body.kid.dino.k-qhome .k-nav a{color:var(--k-navy)}
body.kid.dino.k-qhome .k-nav a.on{background:var(--q-card); color:var(--k-navy); box-shadow:inset 0 0 0 1px var(--q-line)}

/* ---- quiet_work: the round, the lesson, the week check */
body.kid.dino.k-qwork #panel{border:1px solid var(--q-line); border-image:none; border-radius:24px; padding:20px 22px 22px; background:var(--q-card); box-shadow:none}
body.kid.dino.k-qwork #panel .q{background:#fff; border:2px solid var(--q-line); border-radius:22px; box-shadow:none; color:var(--k-navy)}
body.kid.dino.k-qwork #panel .q > span:not(.box){background:none; border:0; box-shadow:none; padding:0; min-width:0}
body.kid.dino.k-qwork #panel .q .box{background:#fff; border:3px dashed #cdb88f; border-radius:16px; box-shadow:none}
body.kid.dino.k-qwork #panel .q .box.right{border:3px solid #86efac; background:#f0fdf4}
body.kid.dino.k-qwork #panel .q .box.wrong{border:3px solid #fda4af; background:#fff1f2}
body.kid.dino.k-qwork #panel :is(button.opt, button.key:not(.ok)){background:#fff; border:2px solid var(--q-line); box-shadow:none; color:var(--k-navy)}
body.kid.dino.k-qwork #panel :is(button.opt, button.key:not(.ok)):active{transform:none; background:var(--q-card)}
body.kid.dino.k-qwork #panel button.opt.right{background:#dcfce7; border-color:#4ade80; color:#15803d; box-shadow:none}
body.kid.dino.k-qwork #panel button.opt.wrong{background:#ffe4e6; border-color:#fb7185; color:#be123c; box-shadow:none}
body.kid.dino.k-qwork #panel button.opt.show{border-color:#22c55e; box-shadow:0 0 0 4px #bbf7d0}
body.kid.dino.k-qwork #panel button.key.ok{background:var(--q-btn); border:0; box-shadow:none; color:#fff}
body.kid.dino.k-qwork #panel .btn:is(.k-green, .k-blue, .k-orange), body.kid.dino.k-qwork #panel .btn.go{background:var(--q-btn); border:0; box-shadow:none; color:#fff; text-shadow:none}
body.kid.dino.k-qwork #panel :is(.btn.ghost, .btn2, a.btn.ghost[href*="show-me"]){background:#fff; border:2px solid var(--q-line); box-shadow:none; color:var(--k-navy); text-shadow:none}
body.kid.dino.k-qwork #panel .pill{background:#fff; color:#6b5a3a; box-shadow:inset 0 0 0 1px var(--q-line)}
body.kid.dino.k-qwork #panel .watchnote{background:#fff; border:1px solid var(--q-line); color:#334155}
body.kid.dino.k-qwork .k-prog{background:#efe6d3}
body.kid.dino.k-qwork .k-prog i{background:#4caf50}
/* quiet_helper: the dino only while it says something (after an answer, at the end); never while the child thinks */
body.kid.dino.k-qhelp .k-helper:not(:has(.k-bubble.on)) .k-dino{visibility:hidden}
body.kid.dino.k-qhelp .k-bubble{border-color:var(--q-line)}
body.kid.dino.k-qhelp .k-bubble::before{border-right-color:var(--q-line)}

/* ---- quiet_home: Today alone on the home page, on the light tan card; My work in the same style */
body.kid.dino.k-qhome #k-home :is(#k-practice, #k-learn){display:none}
body.kid.dino.k-qhome :is(.k-hellodino, .k-starcount){display:none}
body.kid.dino.k-qhome :is(#k-today, #k-home .k-sec, #k-work .k-sec){border:1px solid var(--q-line); border-image:none; border-radius:24px; padding:18px 18px 20px;
  background:var(--q-card); box-shadow:none}
body.kid.dino.k-qhome :is(.k-head h2, .k-h1){color:var(--k-navy)}
body.kid.dino.k-qhome :is(.k-head p, .k-note){color:#475569}
body.kid.dino.k-qhome .k-ic{background:#fff; color:#b7791f; box-shadow:inset 0 0 0 1px var(--q-line)}
body.kid.dino.k-qhome .k-todo-i{background:#fff; border:1px solid var(--q-line); box-shadow:none}
body.kid.dino.k-qhome .k-todo-i.next{background:#fff; border:2px solid var(--q-btn); box-shadow:none}
body.kid.dino.k-qhome .k-todo-i.done{background:#f0fdf4; border:1px solid #bbf7d0}
body.kid.dino.k-qhome .k-n{background:var(--q-card); color:#6b5a3a}
body.kid.dino.k-qhome .k-todo-i.next .k-n{background:var(--q-btn); color:#fff}
body.kid.dino.k-qhome .k-start{background:var(--q-btn); box-shadow:none; color:#fff}
body.kid.dino.k-qhome .k-start:active{transform:none; box-shadow:none}
body.kid.dino.k-qhome .k-ttile{background:var(--t); border:0; box-shadow:none}
body.kid.dino.k-qhome .k-ttile svg, body.kid.dino.k-qhome .k-ttile b{filter:none; text-shadow:none}
body.kid.dino.k-qhome .k-all{background:#fff; border:2px solid var(--q-line); box-shadow:none; color:var(--k-navy); text-shadow:none}
body.kid.dino.k-qhome .k-all:active{transform:none}
body.kid.dino.k-qhome .k-islandbtn{background:#fff; border:1px solid var(--q-line); box-shadow:none}
body.kid.dino.k-qhome .k-islandbtn b{color:var(--k-navy)} body.kid.dino.k-qhome .k-islandbtn small{color:#475569}
body.kid.dino.k-qhome .k-go{background:var(--q-card); color:var(--k-navy)}
body.kid.dino.k-qhome .k-locked .k-ic{background:#fff}
body.kid.dino.k-qhome .k-tile.k-lockd{background:#f8f5ee}
/* My work: plain cards, the topic as a small icon */
body.kid.dino.k-qhome .k-tile{border:1px solid var(--q-line); border-image:none; border-radius:18px; padding:14px 64px 14px 16px; min-height:112px;
  background:#fff; box-shadow:none}
body.kid.dino.k-qhome .k-tile .k-go{right:12px; bottom:12px}
body.kid.dino.k-qhome .k-tile .k-tt-card{right:12px; top:12px}
body.kid.dino.k-qhome :is(.k-more, .k-places){background:#fff; border:1px solid var(--q-line); box-shadow:none}
body.kid.dino.k-qhome #k-work .k-more{margin:0 0 14px}
body.kid.dino.k-qhome :is(.k-more, #k-work) .btn.go{background:var(--q-btn); border:0; box-shadow:none}
@media (max-width:700px){
  body.kid.dino.k-qwork #panel, body.kid.dino.k-qhome :is(#k-today, #k-home .k-sec, #k-work .k-sec){border-width:1px; border-radius:20px; padding:14px}
  body.kid.dino.k-qhome .k-tile{border-width:1px}
}

/* the lesson's bead mat: lighter, with a thin line (quiet_work) */
body.kid.dino.k-qwork #panel .mat{background:#fffdf9; border:2px solid #e8dcc3}
body.kid.dino.k-qwork #panel .tray{background:#fff; border:2px dashed #dfd3bb}

/* ---- quiet_bar (2 Oct 2026, the owner: "I dont like the green box where selective coach is ... could we have a gradient colour that
   fades"): on every child page (the island and the dinos too) the top bar fades from --q-bar-from (left) to --q-bar-to (right) */
body.kid.dino.k-qbar :is(.k-top, .top){background:linear-gradient(90deg, var(--q-bar-from) 0%, var(--q-bar-to) 78%); border:1px solid var(--q-bar-line);
  border-radius:20px; box-shadow:none; padding:4px 10px}
body.kid.dino.k-qbar :is(.k-brand, .top a.brand), body.kid.dino.k-qbar :is(.k-brand b, .top a.brand .bt > span:not(.k-m)){color:var(--q-bar-text)}
body.kid.dino.k-qbar :is(.k-brand span, .top a.brand .bt){text-shadow:none}
body.kid.dino.k-qbar :is(.k-brand em, .top a.brand .k-m){color:#d4880f}
body.kid.dino.k-qbar :is(.k-brand img, .top a.brand .mark){background:none; border:0; box-shadow:none; padding:0}
body.kid.dino.k-qbar .k-nav a{color:var(--q-bar-text)}
body.kid.dino.k-qbar .k-nav a.on{background:color-mix(in srgb, var(--q-bar-text) 10%, transparent); color:var(--q-bar-text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--q-bar-text) 30%, transparent)}
body.kid.dino.k-qbar .top a.brand{color:var(--q-bar-text)}

/* ---- quiet_greeting: on the home page the dino says what today's work is */
body.kid.dino.k-qgreet .k-hello{max-height:none}
body.kid.dino.k-qgreet .k-greet{position:relative; flex:0 1 auto; max-width:520px; margin-left:10px; padding:8px 14px; border-radius:16px; background:#fff;
  border:2px solid var(--q-line); font-weight:800; font-size:18px; line-height:1.3; color:var(--k-navy)}
body.kid.dino.k-qgreet .k-greet::before{content:""; position:absolute; left:-9px; top:50%; margin-top:-7px; border:7px solid transparent; border-right-color:var(--q-line); border-left:0}
@media (max-width:700px){
  body.kid.dino.k-qgreet .k-hello{flex-wrap:wrap}
  body.kid.dino.k-qgreet .k-greet{font-size:16px; max-width:calc(100% - 80px)}
}
/* 2 Oct, round 3 (the owner: "Move the dinosaur and what it is saying over to the left. Get rid of the avatar and have the greeting to
   the child inside the dinosaur speech box"): the dino on the left, "Hi Ava!" and today's work in its speech box; not on My island or My dinos */
body.kid.dino.k-qgreet .k-dinohello{justify-content:flex-start; gap:4px; padding:4px 0}
body.kid.dino.k-qgreet .k-dinohello .k-hellodino{display:block; width:84px; height:84px; margin:0}
body.kid.dino.k-qgreet .k-dinohello .k-greet{flex:1 1 auto; max-width:none; margin-left:12px; padding:12px 18px; font-size:20px; font-weight:700}   /* to the right edge of the boxes below (owner, 3 Oct) */
body.kid.dino.k-qgreet .k-dinohello h1{display:block; margin:0 0 2px; font-size:26px; white-space:normal; overflow:visible}
body.kid.dino.k-qgreet .k-dinohello .k-greet{background:var(--q-greet); border-color:var(--q-greet-line)}   /* quiet_colours greet, greet_line */
body.kid.dino.k-qgreet .k-dinohello .k-greet::before{border-right-color:var(--q-greet-line)}
/* dino_notes and weekly_praise (2 Oct 2026): the teacher's note and last week's praise, each on its own line in the speech box */
body.kid.dino.k-qgreet .k-dinohello .k-gline{display:block; margin:6px 0}
body.kid.dino.k-qgreet .k-dinohello .k-gnote{padding:6px 12px; border-radius:12px; background:#fff; border:1px solid var(--q-greet-line); color:#5b21b6}
body.kid.dino.k-qgreet .k-dinohello .k-gpraise{color:#9a5b00}
body.kid.dino.k-qgreet .k-dinohello .k-gpraise::before{content:"\2605  "; color:#f59e0b}
body.kid.dino.k-qgreet:is([data-kview="island"], [data-kview="dinos"]) .k-dinohello{display:none}
@media (max-width:700px){
  body.kid.dino.k-qgreet .k-dinohello{flex-wrap:nowrap}
  body.kid.dino.k-qgreet .k-dinohello .k-hellodino{width:60px; height:60px}
  body.kid.dino.k-qgreet .k-dinohello .k-greet{font-size:17px; padding:10px 14px}
  body.kid.dino.k-qgreet .k-dinohello h1{font-size:22px}
}

/* ---- quiet_today_cards (2 Oct 2026, the owner: "a list looks quite busy and confusing and overwhelming"): the next thing big with the
   one Start; the day's things as small numbered boxes in one row; no topic tiles */
body.kid.dino .k-now{display:flex; align-items:center; gap:16px; margin:0 0 14px; padding:18px 20px; border-radius:22px; background:#fff; border:2px solid var(--q-btn)}
body.kid.dino .k-nowtx{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
body.kid.dino .k-nowtx small{font-size:16px; font-weight:800; color:#6b5a3a}
body.kid.dino .k-nowtx b{font-size:32px; line-height:1.15; color:var(--k-navy)}
body.kid.dino .k-nowtx span{font-size:18px; font-weight:600; color:#475569}
body.kid.dino .k-steps{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:10px}
body.kid.dino .k-step{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:108px; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--q-line)}
body.kid.dino .k-step .k-n{width:34px; height:34px; font-size:17px; background:var(--q-card); color:#6b5a3a}
body.kid.dino .k-step .k-n svg{width:20px; height:20px}
body.kid.dino .k-step b{font-size:17px; line-height:1.2; color:var(--k-navy)}
body.kid.dino .k-step small{margin-top:auto; font-size:14px; font-weight:700; color:#64748b}
body.kid.dino .k-step .k-topic{font-style:normal; font-size:14px; font-weight:600; line-height:1.25; color:#334155}     /* card_topics */
body.kid.dino .k-step.next{border:2px solid var(--q-btn)}
body.kid.dino .k-step.next .k-n{background:var(--q-btn); color:#fff}
body.kid.dino .k-step.done{background:#f0fdf4; border-color:#bbf7d0}
body.kid.dino .k-step.done .k-n{background:#16a34a; color:#fff}
body.kid.dino .k-step.done small{color:#15803d}
body.kid.dino .k-step.lock{background:#faf8f3}
body.kid.dino .k-step.lock .k-n{background:#eef0f3; color:#64748b}
body.kid.dino .k-step.paper{border-style:dashed; border-color:#cdb88f}
/* week_plan (4 Oct 2026): on This week every box opens its own thing; the link covers the box (the box is the touch target) */
body.kid.dino .k-step.k-tap{position:relative; cursor:pointer}
body.kid.dino .k-step.k-tap .k-stepgo{position:absolute; inset:0; border-radius:inherit}
body.kid.dino .k-step.k-tap .k-stepgo:focus-visible{outline:3px solid var(--q-btn); outline-offset:2px}
body.kid.dino .k-today .k-alldone{margin:0 0 14px}
@media (max-width:900px){
  body.kid.dino .k-steps{grid-auto-flow:row; grid-template-columns:repeat(3, minmax(0, 1fr))}
}
/* week_rows (6 Oct 2026, the owner: "all squished with the cards in one row"): on a wide screen at most 4 boxes in a row (8 = two rows) */
@media (min-width:901px){
  body.kid.dino.k-rows4 .k-steps{grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:700px){
  body.kid.dino .k-now{flex-wrap:wrap; padding:14px}
  body.kid.dino .k-now .k-start{width:100%}
  body.kid.dino .k-nowtx b{font-size:26px}
  body.kid.dino .k-step{min-height:92px; padding:10px}
  body.kid.dino .k-step b{font-size:15px}
}

/* ---- term_week_label: this term and week, beside Today */
body.kid .k-wk{flex:none; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--q-line, #e2e8f0); font-weight:800; font-size:18px; color:var(--k-navy)}
body.kid .k-wkrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 14px}   /* the term and week label, and the week's topics */
body.kid .k-topics{display:flex; flex-direction:column; gap:4px; min-width:0; font-size:16px; font-weight:700; color:var(--k-navy); line-height:1.3}
body.kid .k-tt{display:inline-block; margin-right:8px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:1px}
body.kid .k-tt-idea{background:#dbeafe; color:#1e3a8a}
body.kid .k-tt-other{background:#ffedd5; color:#9a3412}

/* ---- work_by_term (2 Oct 2026): My work week by week for this term; each other term in its own closed box */
body.kid .k-week{margin:0 0 14px}
body.kid .k-week h3{margin:4px 4px 8px; font-size:20px; color:var(--k-navy)}
body.kid details.k-term{margin:0 0 10px; padding:0 14px; border-radius:18px; background:#fff; border:1px solid var(--q-line, #e2e8f0)}
body.kid details.k-term > summary{position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding-right:60px; list-style:none; cursor:pointer}
body.kid details.k-term > summary::-webkit-details-marker{display:none}
body.kid details.k-term > summary b{font-size:22px; color:var(--k-navy)}
body.kid details.k-term > summary small{font-size:15px; font-weight:700; color:#64748b}
body.kid details.k-term > summary .k-go{right:0; top:50%; bottom:auto; transform:translateY(-50%); transition:transform .15s}
body.kid details.k-term[open] > summary .k-go{transform:translateY(-50%) rotate(90deg)}
body.kid details.k-term[open]{padding-bottom:6px}

/* ---- island_after_work (2 Oct 2026, the owner: "they can only open my dino and my island after they have completed their work for that
   day"): a small lock in the menu and on the My island button; My island and My dinos say what to do first */
body.kid .k-nav a .k-navlock{display:inline-grid; place-items:center; font-style:normal; color:#94a3b8}
body.kid .k-nav a .k-navlock svg{width:16px; height:16px}
body.kid .k-islandbtn.k-shut .k-isthumb{filter:grayscale(.7); opacity:.7}
body.kid .k-islandbtn.k-shut .k-go svg{width:22px; height:22px}
body.kid .k-gate{display:flex; align-items:center; gap:22px; padding:24px}
/* the owner, 2 Oct: "still have it locked but change it to the colourful theme we had previously with the nice background": the locked
   page has the island's picture behind it and the island's own frame (My dinos: the leaf frame), as My island and My dinos have */
body.kid.dino.k-stone #k-gatev[data-for="island"] .k-sec{--frame:url(img/dino/box-blue.svg); --k-in:linear-gradient(180deg,#ecf8f8,#d3ecee)}
body.kid.dino.k-stone #k-gatev[data-for="dinos"] .k-sec{--frame:url(img/dino/box-leaf.svg); --k-in:linear-gradient(180deg,#fbf3d2,#f1e2a8)}
body.kid .k-gatedino{flex:none; width:140px; height:140px; object-fit:contain}
body.kid .k-gatetx h2{margin:0 0 8px; font-size:30px; color:var(--k-navy)}
body.kid .k-gatetx p{margin:0 0 10px; font-size:19px; font-weight:600; color:#334155}
body.kid .k-gatetx .k-start{margin-top:6px}
@media (max-width:700px){
  body.kid .k-gate{flex-direction:column; text-align:center; padding:18px}
  body.kid .k-gatedino{width:110px; height:110px}
  body.kid .k-nav a .k-navlock{display:none}
}

/* ---- today_tile_colour (2 Oct 2026, the owner: "Add some light colour to the tiles"): each kind of work a light wash of its own colour,
   the same every day (features.json today_tile_colours); the Now box keeps its navy line, a done box its green tick, a locked box grey */
body.kid.dino.k-qtint{--t-recall:#0d9488; --t-facts:#16a34a; --t-lesson:#2563eb; --t-other:#ea580c; --t-check:#ca8a04; --t-paper:#a16207; --t-book:#7c3aed}
body.kid.dino.k-qtint .k-step{--k:#64748b; background:color-mix(in srgb, var(--k) 9%, #fff); border-color:color-mix(in srgb, var(--k) 30%, #fff)}
body.kid.dino.k-qtint .k-step[data-kind="recall"]{--k:var(--t-recall)}
body.kid.dino.k-qtint .k-step:is([data-kind="round"], [data-kind="own"]){--k:var(--t-facts)}
body.kid.dino.k-qtint .k-step[data-kind="lesson"]{--k:var(--t-lesson)}
body.kid.dino.k-qtint .k-step[data-kind="other"]{--k:var(--t-other)}
body.kid.dino.k-qtint .k-step[data-kind="check"]{--k:var(--t-check)}
body.kid.dino.k-qtint .k-step[data-kind="paper"]{--k:var(--t-paper)}
body.kid.dino.k-qtint .k-step[data-kind="book"]{--k:var(--t-book)}          /* today_book (4 Oct 2026): a workbook page */
body.kid.dino.k-qtint .k-step .k-n{background:color-mix(in srgb, var(--k) 22%, #fff); color:color-mix(in srgb, var(--k) 70%, #000)}
body.kid.dino.k-qtint .k-step small{color:#475569}
body.kid.dino.k-qtint .k-step.next{border:2px solid var(--q-btn)}
body.kid.dino.k-qtint .k-step.next .k-n{background:var(--q-btn); color:#fff}
body.kid.dino.k-qtint .k-step.done .k-n{background:#16a34a; color:#fff}
body.kid.dino.k-qtint .k-step.done small{color:#15803d}
body.kid.dino.k-qtint .k-step.lock{background:#f5f5f4; border-color:#e7e5e4}
body.kid.dino.k-qtint .k-step.lock .k-n{background:#e7e5e4; color:#57534e}
body.kid.dino.k-qtint .k-step.paper{border-style:dashed; border-color:color-mix(in srgb, var(--k) 45%, #fff)}

/* ---- work_today_box (2 Oct 2026): My work says what it is for; while today's work is not finished, the next thing and its Start at
   the top; the dino says "Today's work is on Home" there (the Home sentence on Home, the My work sentence on My work) */
body.kid .k-workwhy{max-width:780px; margin:-4px 4px 14px; font-size:18px; line-height:1.4; font-weight:600; color:#475569}
body.kid .k-worktoday{display:flex; align-items:center; gap:16px; margin:0 0 14px; padding:14px 18px; border-radius:20px; background:#fff; border:2px solid var(--q-btn, #0a2650)}
body.kid .k-worktoday > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
body.kid .k-worktoday b{font-size:22px; color:var(--k-navy)}
body.kid .k-worktoday > div span{font-size:17px; font-weight:600; color:#475569}
body.kid.dino.k-qgreet[data-kview="work"] .k-dinohello .k-g-home{display:none}
body.kid.dino.k-qgreet:not([data-kview="work"]) .k-dinohello .k-g-work{display:none}
@media (max-width:700px){
  body.kid .k-worktoday{flex-wrap:wrap}
  body.kid .k-worktoday .k-start{width:100%}
}

/* ---- island_thin_frame (3 Oct 2026, the owner: "i find the thick border in my dinos and island too thick - get rid of it"): My island,
   My dinos and their locked pages keep their light colour and the picture behind them, with a thin line in place of the stone frame */
body.kid.dino.k-thinframe :is(#k-islandv, #k-dinosv, #k-gatev) .k-sec{border:2px solid #a8d5e0; border-image:none; border-radius:24px; padding:18px 18px 20px;
  background:var(--k-in, #fff) border-box; box-shadow:0 6px 18px rgba(10,60,110,.10)}
body.kid.dino.k-thinframe :is(#k-dinosv, #k-gatev[data-for="dinos"]) .k-sec{border-color:#cfe0a6}
body.kid.dino.k-thinframe #k-dinosv .k-dcard{border:2px solid #e2cf9b; border-image:none; border-radius:20px; padding:12px 10px 14px; background:#fffdf6;
  box-shadow:0 3px 10px rgba(70,45,15,.10)}
body.kid.dino.k-thinframe #k-dinosv .k-dcard.hatched{background:#f0fdf4; border-color:#a7e3b9}
@media (max-width:700px){
  body.kid.dino.k-thinframe :is(#k-islandv, #k-dinosv, #k-gatev) .k-sec{border-width:2px; border-radius:20px; padding:14px}
}

/* ---- done_more (3 Oct 2026): all done, and more if they want: a button to My work; My island and My dinos from the speech box */
body.kid .k-domore{margin:8px 0 10px; font-size:17px; font-weight:700; color:var(--k-navy)}
body.kid .k-alldone .k-domore-go{min-height:56px; min-width:0; padding:0 20px; font-size:20px}
body.kid .k-alldone .k-domore-go svg{width:26px; height:26px}
body.kid.dino.k-qgreet .k-dinohello .k-glinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
body.kid .k-gbtn{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border-radius:16px; background:#ecfdf5; border:2px solid #86efac;
  color:#166534; font-weight:800; font-size:17px; text-decoration:none}
body.kid .k-gbtn svg{width:22px; height:22px}

/* ---- dino_moves (owner, 4 Oct 2026): the helper says hi once a day (pops up, then tilts left and right like a wave); the cheering dino
   jumps up and down once when the island opens; a hatched dino jumps after it pops out. About a second each; still with Reduce Motion */
@keyframes k-hi{0%{transform:translateY(26px) scale(.6); opacity:0} 30%{transform:translateY(-10px) scale(1.06); opacity:1} 42%{transform:none}
  56%{transform:rotate(-12deg)} 70%{transform:rotate(12deg)} 84%{transform:rotate(-7deg)} 100%{transform:none}}
@keyframes k-jump{0%,30%,60%,90%,100%{transform:translateY(0)} 15%{transform:translateY(-24px)} 45%{transform:translateY(-16px)} 75%{transform:translateY(-8px)}}
body.kid .k-hi-anim{animation:k-hi 1.3s ease-out; transform-origin:50% 90%}
body.kid .k-cheer.k-jump-anim{animation:k-pop .6s ease-out, k-jump 1.1s ease-in-out .6s; transform-origin:50% 100%}
body.kid.k-moves .k-baby{animation:k-pop .8s ease-out, k-jump 1.1s ease-in-out .8s; transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){ body.kid .k-hi-anim, body.kid .k-cheer.k-jump-anim, body.kid.k-moves .k-baby{animation:none} }

/* ---- dino_buddy (owner, 5 Oct 2026): choose a hatched dino on My dinos (open after the week's work); it says hi on the home page */
body.kid .k-buddybtn{margin-top:6px; min-height:48px; padding:0 14px; border-radius:999px; border:2px solid #16a34a; background:#fff; color:#166534;
  font:inherit; font-weight:800; cursor:pointer}
body.kid .k-buddybtn:disabled{opacity:.6}
body.kid .k-buddyon{margin-top:6px; min-height:48px; display:inline-flex; align-items:center; padding:0 14px; border-radius:999px; background:#16a34a; color:#fff; font-weight:800}
body.kid .k-dcard.k-isbuddy{border-color:#16a34a; box-shadow:0 0 0 3px #bbf7d0}
body.kid .k-buddynote{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
body.kid .k-buddyoff{margin-top:0; border-color:#94a3b8; color:#334155}
body.kid .k-hellodino.k-buddypic{object-fit:contain}
/* step_colours (6 Oct 2026): the child's steps as colours on the Workbook card */
.k-stepc{display:flex; flex-wrap:wrap; gap:4px 10px; font-style:normal; font-size:14px; font-weight:800; color:#334155; margin:2px 0}
.k-stepc span{display:inline-flex; align-items:center} .k-cdot{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; box-shadow:0 0 0 1px rgba(15,23,42,.25)}

/* bright_now (9 Oct 2026): the big next box on the home page light sky blue, its Start a strong sky blue */
body.kid.dino.k-bright .k-now{background:#e0f2fe; border-color:#38bdf8}
body.kid.dino.k-bright .k-now .k-start{background:#0284c7; color:#fff; box-shadow:0 4px 0 #075985}

/* mission_home (9 Oct 2026, the owner approved the picture): a greeting with the date, This week's mission with its picture, the
   jobs as rows with a bar each, and the week's ring, the next egg and the teacher's note. Baby blue page (owner, 9 Oct: "make the
   background baby blue rather than green"). Made for every iPad: the menu is the bar at the top; the side cards beside the jobs
   from 1100 px; under that, one column with the side cards in a row (owner: "the layout doesnt look
   right ... Make sure it is responsive to ipad"). */
body.kid.k-mission{--m-ink:#0a2650; --m-soft:#5b6b82; --m-page:#fff; background:var(--m-page)}   /* white (owner, 10 Oct 2026, after the mock-up: "yes make this live"); was baby blue #e4f1fb */
body.kid.dino.k-mission.k-qhome, body.kid.k-mission.k-qhome::before{background:var(--m-page) !important}
body.kid.k-mission .wrap{max-width:1320px}
body.kid.k-mission .wrap > .k-top .k-brand img{border-radius:50% !important; background:#fff !important; padding:4px !important; box-shadow:0 0 0 3px #60a5fa !important; box-sizing:border-box; object-fit:contain}   /* the owner: "place a circle around the logo" */
body.kid.k-mission .wrap > .k-top{background:#fff !important; border:0 !important; box-shadow:0 1px 3px rgba(10,38,80,.07)}
body.kid.k-mission .wrap > .k-top .k-nav a{color:var(--m-ink)}
body.kid.k-mission .wrap > .k-top .k-nav a.on{background:#dbeafe; box-shadow:none}
body.kid.k-mission .k-mgrid{display:grid; grid-template-columns:1fr; gap:20px; align-items:start}
body.kid.k-mission .k-mside{display:grid; grid-template-columns:1fr 1fr; gap:16px}
body.kid.k-mission .k-mside > :last-child:nth-child(odd){grid-column:1 / -1}     /* an odd card out: the full width */
body.kid.k-mission .k-mdate{margin:6px 0 0; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--m-soft)}
body.kid.k-mission .k-mhi{margin:2px 0 14px; font-size:clamp(26px,3vw,32px); color:var(--m-ink)}
/* the mission box (owner, 9 Oct 2026: the yellow box and the greens "doesnt go well with the blue"): a soft violet over the baby blue page,
   white words, a warm peach for the job's name and a coral Start; violet and coral are a calm pair that children's apps use often */
body.kid.k-mission .k-mcard{display:flex; align-items:center; gap:20px; background:linear-gradient(180deg,#7262f2 0%,#9a8bfa 50%,#cfc5ff 100%); border-radius:28px; padding:22px 26px;
  box-shadow:0 8px 20px rgba(109,92,232,.25)}
body.kid.k-mission .k-mtx{flex:1; min-width:0}
body.kid.k-mission .k-mtx small{display:block; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#e4dfff}
body.kid.k-mission .k-mtx h2{margin:8px 0 6px; font-size:clamp(28px,3.2vw,36px); line-height:1.15; color:#fff}
body.kid.k-mission :is(.k-mtx, .k-worktoday) :is(h1, h2, p, small, b, span){text-shadow:0 1px 2px rgba(60,40,160,.35)}   /* the lighter violet (owner, 10 Oct: "too dark ... go a little lighter"): the white words stay clear */
body.kid.k-mission .k-mtx h2 em{font-style:normal; color:#ffd2b8}
body.kid.k-mission .k-mtx p{margin:0 0 16px; font-size:18px; color:#fff}
body.kid.k-mission .k-mstart{display:inline-flex; align-items:center; min-height:60px; padding:0 30px; border-radius:18px; background:#f97316; color:#fff;
  font-size:24px; font-weight:800; text-decoration:none; box-shadow:0 5px 0 #c2410c}
body.kid.k-mission .k-mstart:active{transform:translateY(3px); box-shadow:0 2px 0 #c2410c}
body.kid.k-mission .k-hero{flex:none; width:clamp(150px,19vw,210px); aspect-ratio:1; border-radius:50%; border:4px dashed #fff; overflow:hidden; background:#dbf2fe}
body.kid.k-mission .k-hero img{width:100%; height:100%; object-fit:cover; display:block}
body.kid.k-mission .k-mkick{margin:22px 0 10px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0369a1}
body.kid.k-mission .k-jobs{list-style:none; margin:0; padding:0; display:grid; gap:12px}
body.kid.k-mission .k-job{display:flex; align-items:center; gap:16px; background:#fff; border-radius:22px; padding:14px 16px; box-shadow:0 1px 3px rgba(10,38,80,.07)}
body.kid.k-mission .k-jic{flex:none; width:56px; height:56px; border-radius:16px; background:var(--jb); display:grid; place-items:center; font-size:28px}
body.kid.k-mission .k-jtx{flex:1; min-width:0; display:flex; flex-direction:column}
body.kid.k-mission .k-jtx small{font-size:14px; font-weight:800; color:var(--jc)}
body.kid.k-mission .k-jtx b{font-size:21px; color:var(--m-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.kid.k-mission .k-jtx em{font-style:normal; font-size:15px; color:var(--m-soft)}
body.kid.k-mission .k-jpl{list-style:none; margin:2px 0 4px; padding:0; font-size:16px; color:var(--m-ink)}   /* day_one_book: each page of the day's Workbook row */
body.kid.k-mission .k-jtopd{margin:2px 0 4px} body.kid.k-mission .k-jtopd > summary{display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;   /* runs_always: the Topics box */
  font-size:14px; font-weight:800; color:#6d28d9; background:#fff; border:2px solid #ddd6fe; border-radius:10px; padding:4px 10px}
body.kid.k-mission .k-jtopd > summary::-webkit-details-marker{display:none} body.kid.k-mission .k-jtopd > summary::after{content:"▸"} body.kid.k-mission .k-jtopd[open] > summary::after{content:"▾"}
body.kid.k-mission .k-jpl li{margin:3px 0} body.kid.k-mission .k-jpl li > i{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px}
body.kid.k-mission .k-jpl li.ok{color:#15803d} body.kid.k-mission .k-jpl li.ok::after{content:" ✓"; font-weight:800}
body.kid.k-mission .k-jbar{display:block; height:8px; max-width:260px; border-radius:6px; background:#e2e8f0; margin-top:6px; overflow:hidden}
body.kid.k-mission .k-jbar > i{display:block; height:100%; background:var(--jc); border-radius:6px}
/* bar_full (owner, 10 Oct 2026: "the status bar is very short and it says done but because the bar only spans half of the box it feels like it
   isnt done"): the bar runs the whole width of the row's words, up to the time and the button */
body.kid.k-mission.k-barfull .k-jbar{max-width:none; width:100%}
body.kid.k-mission .k-jmin{flex:none; font-size:15px; font-weight:800; color:var(--m-soft)}
body.kid.k-mission .k-jgo{flex:none; width:60px; height:60px; border-radius:16px; background:var(--jc); color:#fff; display:grid; place-items:center; font-size:24px; text-decoration:none}
body.kid.k-mission .k-job.lock{opacity:.65}
body.kid.k-mission .k-mside-card{display:block; background:#fff; border-radius:24px; padding:18px; box-shadow:0 1px 3px rgba(10,38,80,.07); text-decoration:none; color:var(--m-ink)}
body.kid.k-mission .k-mring{display:flex; align-items:center; gap:14px}
body.kid.k-mission .k-mringpic{position:relative; flex:none; width:110px; height:110px}
body.kid.k-mission .k-mring svg{width:100%; height:100%}
body.kid.k-mission .k-mpct{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
body.kid.k-mission .k-mpct b{font-size:28px; line-height:1} body.kid.k-mission .k-mpct small{font-size:12px; color:var(--m-soft)}
body.kid.k-mission .k-mring h3{margin:0 0 2px; font-size:20px} body.kid.k-mission .k-mring p{margin:0; color:var(--m-soft); font-size:15px}
body.kid.k-mission .k-megg{display:flex; align-items:center; gap:14px}
body.kid.k-mission .k-meggpic{flex:none; width:72px; height:72px} body.kid.k-mission .k-meggpic img{width:100%; height:100%; object-fit:contain}
body.kid.k-mission .k-megg b{display:block; font-size:18px} body.kid.k-mission .k-megg small{display:block; font-size:14px; color:var(--m-soft)}
body.kid.k-mission .k-mnote b{display:block; font-size:17px; color:#be123c} body.kid.k-mission .k-mnote p{margin:8px 0 0; font-size:17px; overflow-wrap:anywhere}
body.kid.k-mission .k-mparents{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 20px;
  background:#fff; border-radius:18px; box-shadow:0 1px 3px rgba(10,38,80,.07); color:var(--m-ink); font-size:17px; font-weight:800; text-decoration:none}
body.kid.k-mission .k-mparents span{font-size:24px; color:#7565ee}
body.kid.k-mission .k-mside > .k-mnote{grid-column:1 / -1}
/* wide: the side cards in a column beside the jobs, the ring big */
@media (min-width:1100px){
  body.kid.k-mission .k-mgrid{grid-template-columns:minmax(0,1fr) 300px}
  body.kid.k-mission .k-mside{grid-template-columns:1fr}
  body.kid.k-mission .k-mring{flex-direction:column; text-align:center; gap:8px}
  body.kid.k-mission .k-mringpic{width:150px; height:150px}
  body.kid.k-mission .k-mpct b{font-size:36px}
  body.kid.k-mission .k-mring h3{font-size:22px}
}
/* the menu icons stay plain (owner, 9 Oct 2026: coloured tiles tried, then "remove the colours in the icon as it seems distracting now") */
/* My work in the home page's look (owner, 9 Oct 2026: "redesign the my work page to have the same look and feel as the home page"):
   the baby blue page, white rounded cards with a soft shadow, a coloured icon tile on each card, a violet arrow; no cream boxes */
body.kid.k-mission #k-work .k-wcard{margin:8px 0 16px; min-height:0; padding:18px 24px}
body.kid.k-mission #k-work .k-wcard .k-hero{width:clamp(120px,14vw,150px)}
body.kid.k-mission #k-work .k-wkick{margin:0; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#e4dfff}
body.kid.k-mission #k-work .k-wbar{flex:1; min-width:90px; max-width:200px; margin-top:0; --jc:#16a34a}
body.kid.k-mission #k-work .k-wdone{align-self:flex-start; margin-top:4px; padding:2px 10px; border-radius:10px; background:#dcfce7; color:#15803d; font-size:14px; font-weight:800}
body.kid.k-mission #k-work .k-workwhy{margin:0 0 14px; font-size:17px; color:var(--m-soft)}
body.kid.k-mission #k-work .k-worktoday{background:linear-gradient(180deg,#7262f2 0%,#9a8bfa 55%,#cfc5ff 100%) !important; border:0 !important; border-radius:24px;
  color:#fff; padding:16px 20px; box-shadow:0 8px 20px rgba(109,92,232,.25)}
body.kid.k-mission #k-work .k-worktoday :is(b, span){color:#fff}
body.kid.k-mission #k-work .k-worktoday .k-start{background:#f97316 !important; box-shadow:0 5px 0 #c2410c !important; color:#fff}
body.kid.k-mission #k-home #k-newpages{margin-top:22px !important}      /* Extra practice on Home: the home page's look and a gap above (owner, 10 Oct) */
body.kid.k-mission :is(#k-work, #k-newpages).k-sec{background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important}
body.kid.k-mission #k-work .k-wrow{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 18px}
body.kid.k-mission #k-work .k-wrow{align-items:stretch}
body.kid.k-mission #k-work .k-wrow > *{margin:0 !important; min-height:150px; height:100%; box-sizing:border-box; align-self:stretch}
body.kid.k-mission #k-work .k-wrow .k-worktoday{background:#fff !important; box-shadow:0 1px 3px rgba(10,38,80,.07) !important; border-radius:22px; padding:14px 16px}
body.kid.k-mission #k-work .k-wrow .k-worktoday :is(b, span){color:var(--m-ink) !important; text-shadow:none !important}
body.kid.k-mission #k-work .k-wrow .k-worktoday > div span{color:var(--m-soft) !important; font-size:15px}
body.kid.k-mission #k-work .k-wrow .k-worktoday b{font-size:20px}
body.kid.k-mission #k-work .k-wrow .k-worktoday .k-start span{color:#fff !important}
body.kid.k-mission #k-work .k-wrow .k-worktoday .k-start{min-height:52px; padding:0 22px; font-size:19px; border-radius:16px; width:auto}
body.kid.k-mission #k-work .k-wrow .k-worktoday .k-start svg{width:26px; height:26px}
body.kid.k-mission #k-work .k-wrow .k-worktoday{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px}
body.kid.k-mission #k-work .k-wrow .k-worktoday > div{display:flex; flex-direction:column; gap:4px}
body.kid.k-mission #k-work .k-wrow .k-more{display:grid; grid-template-columns:56px 1fr; align-content:space-between; gap:12px 14px}
body.kid.k-mission #k-work .k-wrow .k-more > :is(#more-go-wrap, .msg){grid-column:1 / -1}
body.kid.k-mission #k-work .k-wrow .k-more .msg:empty{display:none}
@media (max-width:640px){ body.kid.k-mission #k-work .k-wrow{grid-template-columns:1fr} }
body.kid.k-mission #k-work .k-more{background:#fff !important; border:0 !important; border-radius:22px; box-shadow:0 1px 3px rgba(10,38,80,.07); margin:0 0 18px !important}
body.kid.k-mission #k-work .k-more .k-emo{width:56px; height:56px; border-radius:16px; background:#fef3c7; display:grid; place-items:center; font-size:28px}
body.kid.k-mission #k-work .k-more #more-go{background:#f97316 !important; border:0; box-shadow:0 4px 0 #c2410c; color:#fff; border-radius:16px; min-height:52px; padding:0 26px; font-size:19px}
body.kid.k-mission :is(#k-work, #k-newpages) .k-sec{background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:22px 0 0 !important; --frame:none}
body.kid.k-mission :is(#k-work, #k-newpages) .k-sec::before, body.kid.k-mission :is(#k-work, #k-newpages) .k-sec::after{display:none !important}
body.kid.k-mission :is(#k-work, #k-newpages) .k-head{margin:0 0 12px}
body.kid.k-mission :is(#k-work, #k-newpages) .k-head h2{font-size:24px; color:var(--m-ink)}
body.kid.k-mission :is(#k-work, #k-newpages) .k-head p{font-size:15px; color:var(--m-soft)}
body.kid.k-mission :is(#k-work, #k-newpages) .k-head .k-ic{width:48px; height:48px; border-radius:14px; background:#fff !important; border:0 !important; box-shadow:0 1px 3px rgba(10,38,80,.08)}
body.kid.k-mission #k-work .k-week h3{font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0369a1; margin:14px 0 8px}
body.kid.k-mission :is(#k-work, #k-newpages) .k-tile{background:#fff !important; border:0 !important; border-image:none !important; border-radius:22px !important; box-shadow:0 1px 3px rgba(10,38,80,.07) !important}
body.kid.k-mission :is(#k-work, #k-newpages) .k-tile::before, body.kid.k-mission :is(#k-work, #k-newpages) .k-tile::after{display:none !important}
body.kid.k-mission :is(#k-work, #k-newpages) .k-tile .k-tx small{color:#7565ee}
body.kid.k-mission :is(#k-work, #k-newpages) .k-tile .k-go{background:#7565ee !important; color:#fff !important; border:0 !important; box-shadow:0 3px 0 #5b4ae3}
body.kid.k-mission #k-work details.k-locked, body.kid.k-mission #k-work details.k-term{background:#fff !important; border:0 !important; border-radius:22px; box-shadow:0 1px 3px rgba(10,38,80,.07) !important; padding:14px 16px !important}
body.kid.k-mission #k-work details.k-term > summary .k-go{background:#ece9ff; color:#5b4ae3}
body.kid.k-mission #k-work details.k-locked > summary .k-go{background:#ece9ff !important; color:#5b4ae3 !important}
/* the menu: always the bar at the top (owner, 9 Oct 2026: "should we move all these icons to the top like before?") */
@media (max-width:640px){
  body.kid.k-mission .k-mside{grid-template-columns:1fr}
  body.kid.k-mission .k-mcard{flex-direction:column-reverse; align-items:flex-start}
  body.kid.k-mission .k-jmin{display:none}
}

/* subject_choice: Maths | English under the greeting (kid.js) */
body.kid.k-mission .k-hirow{display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin:2px 0 14px}
body.kid.k-mission .k-hirow .k-mhi{margin:0}
@media (min-width:1100px){ body.kid.k-mission .k-hirow{margin-right:320px} }   /* the choice's right edge on the mission box's right edge (owner, 10 Oct) */
body.kid.k-mission .k-subj{display:inline-flex; background:#fff3e6; border:2px solid #fed7aa; border-radius:14px; padding:3px; gap:2px; flex:none}   /* light orange, as the Show what you know box (owner, 10 Oct) */
body.kid.k-mission .k-subj button{font:inherit; font-size:15px; font-weight:800; border:0; background:none; color:#475569; padding:6px 14px; border-radius:11px;
  display:flex; gap:6px; align-items:center; min-height:40px; cursor:pointer}
body.kid.k-mission .k-subj button{color:#9a3412}
body.kid.k-mission .k-subj button.on{background:#ea580c; color:#fff; box-shadow:0 2px 0 #c2410c}   /* the colours of Show what you know (owner, 10 Oct) */
body.kid.k-mission .k-subj button i{font-style:normal; font-size:16px}
body.kid.k-mission .k-soon{background:#f3efff; border-radius:22px; padding:22px; font-size:18px; color:#475569}
body.kid.k-mission #k-eng .k-mcard{margin-bottom:0}
/* dino_hop: the mission picture and the egg jump twice when Home or My work opens (kid.js kHop) */
@keyframes k-hop{0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-16px) rotate(-4deg)} 50%{transform:translateY(0) rotate(0)} 70%{transform:translateY(-6px) rotate(3deg)}}
body.kid.k-mission .k-hop{animation:k-hop .8s ease-in-out 2}
@media (prefers-reduced-motion:reduce){ body.kid.k-mission .k-hop{animation:none} }

/* the white page with light cards (owner, 10 Oct 2026: "the background is white, all the cards are in some light colour", the violet
   mission box kept; "yes make this live"): each card its own light colour, from its button's colour; no shadows; My work the same */
body.kid.k-mission .wrap > .k-top{box-shadow:none !important; border:1px solid #e8edf5 !important}
body.kid.k-mission .k-job{box-shadow:none}
body.kid.k-mission .k-job[data-kind="round"], body.kid.k-mission .k-job[data-kind="own"]{background:#ecfdf3}
body.kid.k-mission .k-job[data-kind="book"]{background:#f3efff}
body.kid.k-mission .k-job[data-kind="check"]{background:#fff3e6}
body.kid.k-mission .k-job:is([data-kind="lesson"], [data-kind="other"], [data-kind="review"], [data-kind="paper"]){background:#eef6ff}
body.kid.k-mission .k-job .k-jic{background:#fff}
body.kid.k-mission .k-jbar{background:#fff}
body.kid.k-mission .k-mside-card{box-shadow:none}
body.kid.k-mission .k-mring{background:#eaf3ff} body.kid.k-mission .k-mring circle:first-child{stroke:#fff}
body.kid.k-mission .k-megg{background:#eafaf0}
body.kid.k-mission .k-mnote{background:#fff0f3}
body.kid.k-mission .k-mparents{background:#f4f6fa; box-shadow:none}
body.kid.k-mission :is(#k-work, #k-newpages) .k-tile{background:#eef6ff !important; box-shadow:none !important}
body.kid.k-mission #k-work .k-tile.k-set{background:#ecfdf3 !important}
body.kid.k-mission :is(#k-work, #k-newpages) .k-head .k-ic{background:#eef6ff !important; box-shadow:none !important}
body.kid.k-mission #k-work .k-wrow .k-worktoday{background:#f3efff !important; box-shadow:none !important}
body.kid.k-mission #k-work .k-more{background:#fffbeb !important; box-shadow:none !important}
body.kid.k-mission #k-work .k-more .k-emo{background:#fff}
body.kid.k-mission #k-work :is(details.k-locked, details.k-term){background:#f4f6fa !important; box-shadow:none !important}
body.kid.k-mission #k-work details.k-locked .k-ic{background:#fff !important}

/* teacher_card: the teacher's picture and name on the note, Listen, and Welcome back (kid.js) */
body.kid.k-mission .k-tav{flex:none; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 2px #fbcfe8; background:#fde68a}
body.kid.k-mission .k-tavl{display:grid; place-items:center; font-weight:800; color:#92400e; font-size:22px}
body.kid.k-mission .k-tnote{display:flex; gap:12px; align-items:flex-start}
body.kid.k-mission .k-listen{margin-top:8px; font:800 15px/1 "Quicksand",Ubuntu,Arial,sans-serif; color:#fff; background:#db2777; border:0; border-radius:12px;
  padding:9px 14px; min-height:40px; cursor:pointer}
body.kid.k-mission .k-welcome{display:flex; gap:12px; align-items:center; background:#fff7ed; border:2px solid #fdba74; border-radius:18px; padding:10px 14px; margin:0 0 14px}
body.kid.k-mission .k-welcome p{margin:0; flex:1; font-size:17px; color:var(--m-ink)} body.kid.k-mission .k-welcome .k-listen{margin:0}

/* day_plan (owner, 11 Oct 2026): the week as days from the class's lesson day; each day a tile to open; catch-up and "Do Tuesday's work" */
body.kid.k-mission .k-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:14px 0 4px}
body.kid.k-mission .k-day{border-radius:16px; padding:9px 4px 7px; text-align:center; font:inherit; font-weight:800; font-size:16px; background:#f0fdf4; color:#15803d;
  border:2px solid #86efac; cursor:pointer; min-height:56px}     /* green (owner, 11 Oct 2026: "Make the days buttons green rather than violet") */
body.kid.k-mission .k-day small{display:block; font-size:12px; font-weight:700; opacity:.85; margin-top:2px}
body.kid.k-mission .k-day.class{background:#0a2650; border-color:#0a2650; color:#fff}
body.kid.k-mission .k-day.done{background:#16a34a; border-color:#15803d; color:#fff}
body.kid.k-mission .k-day.today{border:3px solid #f97316; box-shadow:0 4px 0 #fed7aa}
body.kid.k-mission .k-day.today:not(.done):not(.class){background:#fff; color:#c2410c}
body.kid.k-mission .k-day.sel{outline:3px solid #0a2650; outline-offset:2px}
/* catch_fold: a day left not done is amber; the jobs left from earlier days in one folded box */
body.kid.k-mission .k-job.done{text-align:left}   /* not style.css's .done (centred) */
body.kid.k-mission .k-day.missed:not(.today){background:#fffbeb; border-color:#fcd34d; color:#b45309}
body.kid.k-mission .k-catchbox{margin:12px 0 0; border-radius:20px; background:#fffbeb; border:2px solid #fde68a; padding:0 14px}
body.kid.k-mission .k-catchbox > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 4px; font-size:18px; color:#92400e}
body.kid.k-mission .k-catchbox > summary::-webkit-details-marker{display:none}
body.kid.k-mission .k-catchbox > summary::after{content:"▸"; margin-left:auto; font-size:20px; transition:transform .15s}
body.kid.k-mission .k-catchbox[open] > summary::after{transform:rotate(90deg)}
body.kid.k-mission .k-catchbox > summary span{font-weight:700; font-size:16px; color:#b45309}
body.kid.k-mission .k-catchbox .k-jobs{margin:0 0 12px}
/* week_egg: this week's egg at the end of the path; it hatches on the finished-week screen */
body.kid.k-mission .k-pegg{display:block; height:34px} body.kid.k-mission .k-pegg img{height:34px; width:auto; display:block}
body.kid.k-mission .k-weekegg .k-meggpic img{animation:k-wewob 2.4s ease-in-out infinite}
@keyframes k-wewob{0%,80%,100%{transform:rotate(0)} 85%{transform:rotate(-7deg)} 90%{transform:rotate(6deg)} 95%{transform:rotate(-4deg)}}
.k-hatchpop{animation:k-hatch .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes k-hatch{from{transform:scale(.2); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){body.kid.k-mission .k-weekegg .k-meggpic img, .k-hatchpop{animation:none}}
/* last_week_note: one quiet line for the week before */
body.kid.k-mission .k-lastwk{display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:10px 14px; border-radius:16px; background:#eff6ff; border:2px solid #bfdbfe; color:var(--k-navy)}
body.kid.k-mission .k-lastwk > span{font-size:24px} body.kid.k-mission .k-lastwk p{margin:0; flex:1; font-size:16px}
body.kid.k-mission .k-lastgo{font-weight:800; color:#1d4ed8; text-decoration:none; white-space:nowrap; padding:8px 12px; border-radius:12px; background:#fff; border:2px solid #bfdbfe}
/* day_path: the days as stones on the way to Dino Island; a dino footprint on each done day */
body.kid.k-mission .k-wpath{position:relative; display:flex; align-items:center; gap:10px; margin:16px 0 0; padding:0 10px; height:46px;
  background:url(img/dino/map-island.svg) center/cover no-repeat; border:3px solid #e2c27a; border-radius:24px}   /* the island map (owner, 11 Oct 2026: "these nice map") */
body.kid.k-mission .k-ptrack{position:relative; flex:1; height:10px; border-radius:6px; background:repeating-linear-gradient(90deg,#f8fafc 0 14px,transparent 14px 22px)}
body.kid.k-mission .k-ptrack > i{position:absolute; inset:0 auto 0 0; border-radius:6px; background:#16a34a}
body.kid.k-mission .k-pdino{position:absolute; top:-6px; margin-left:10px; font-size:34px; line-height:1; transform:scaleX(-1); transition:left .6s}
body.kid.k-mission .k-pisle{display:flex; flex-direction:column; align-items:center; line-height:1}
body.kid.k-mission .k-pisle b{font-size:26px} body.kid.k-mission .k-pisle small{font-size:11px; font-weight:800; color:#0a2650}
body.kid.k-mission .k-dfoot{width:18px; height:18px; fill:currentColor; display:block; margin:0 auto 1px}
body.kid.k-mission .k-day.done .k-dfoot{fill:#fff}
body.kid.k-mission .k-daydone{display:flex; gap:14px; align-items:center; margin:12px 0 0; padding:14px 16px; border-radius:20px; background:#f0fdf4; border:2px solid #86efac; color:#14532d}
body.kid.k-mission .k-daydone > .k-dfoot{width:40px; height:40px; fill:#16a34a; margin:0; flex:none}
body.kid.k-mission .k-daydone b{font-size:20px} body.kid.k-mission .k-daydone p{margin:2px 0 0; font-size:16px}
body.kid.k-mission .k-mdays{display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 0; color:#15803d}
body.kid.k-mission .k-mdays .k-dfoot{width:18px; height:18px; fill:#16a34a; margin:0}
body.kid.k-mission .k-more{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:10px 0 4px; padding:12px 16px; border-radius:18px;
  background:#fff7ed; border:2px dashed #fdba74; font-weight:700; color:#9a3412}
body.kid.k-mission .k-more .k-moreb{background:#fff; color:#ea580c; border:2px solid #f97316; border-radius:14px; padding:9px 16px; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #fed7aa}
body.kid.k-mission button.k-mstart.k-moreb{border:0; cursor:pointer; font:inherit; font-weight:800}
body.kid.k-mission .k-job.k-catch small{color:#c2410c}
@media (max-width:700px){ body.kid.k-mission .k-days{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* week_done (owner, 11 Oct 2026): the finished-week screen over the whole page: confetti, the dino, the island and the dino cards, the check-in */
.k-wd{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; background:radial-gradient(circle at 50% 30%, rgba(167,139,250,.92), rgba(76,29,149,.9));
  overflow:auto; animation:kwdIn .35s ease-out}
@keyframes kwdIn{from{opacity:0} to{opacity:1}}
.k-wdconf{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.k-wdbox{position:relative; z-index:1; width:min(860px, 100%); background:#fff; border-radius:28px; padding:22px 26px 24px; box-shadow:0 24px 60px rgba(30,10,80,.45);
  color:#0a2650; animation:kwdPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes kwdPop{from{transform:scale(.85)} to{transform:scale(1)}}
.k-wdx{position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:2px solid #e2e8f0; background:#fff; font-size:20px; font-weight:800; color:#475569; cursor:pointer}
.k-wdtop{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.k-wdhero{width:190px; height:190px; flex:none; border-radius:50%; background:radial-gradient(circle,#fef9c3,#fde68a); display:grid; place-items:center; overflow:hidden;
  box-shadow:0 0 0 6px #fde68a, 0 0 40px #facc15; animation:kwdBob 1.6s ease-in-out infinite}
.k-wdhero img{width:92%; height:92%; object-fit:contain}
@keyframes kwdBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.k-wdkick{margin:0; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7c3aed; font-size:14px}
.k-wdtop h1{margin:4px 0 2px; font-size:40px; line-height:1.1; background:linear-gradient(90deg,#7c3aed,#ea580c); -webkit-background-clip:text; background-clip:text; color:transparent}
.k-wdlead{margin:0 0 10px; font-size:19px; color:#334155}
.k-wdsound{border:2px solid #7c3aed; color:#7c3aed; background:#f5f3ff; border-radius:14px; padding:9px 16px; font:inherit; font-weight:800; font-size:16px; cursor:pointer}
.k-wdprize{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 6px}
.k-wdp{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:12px; align-items:center; text-decoration:none; color:#0a2650;
  border-radius:20px; padding:14px 16px; background:linear-gradient(180deg,#ecfdf5,#d1fae5); border:2px solid #86efac; box-shadow:0 5px 0 #86efac}
.k-wdp + .k-wdp{background:linear-gradient(180deg,#eff6ff,#dbeafe); border-color:#93c5fd; box-shadow:0 5px 0 #93c5fd}
.k-wdpic{grid-row:1 / span 3; width:74px; height:74px; display:grid; place-items:center; font-size:48px}
.k-wdpic img, .k-wdpic .k-eggbox{max-width:74px; max-height:74px}
.k-wdp b{font-size:20px} .k-wdp small{font-size:14px; color:#475569}
.k-wdbtn{justify-self:start; margin-top:6px; background:#16a34a; color:#fff; font-weight:800; border-radius:12px; padding:7px 14px}
.k-wdp + .k-wdp .k-wdbtn{background:#2563eb}
.k-wdask{margin-top:18px; padding-top:14px; border-top:2px dashed #e2e8f0}
.k-wdask h2{margin:0 0 10px; font-size:22px}
.k-wdhow{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.k-wdhow button{border:2px solid #e2e8f0; background:#fff; border-radius:16px; padding:10px 6px; font:inherit; font-weight:800; font-size:17px; color:#0a2650; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px}
.k-wdhow button span{font-size:30px}
.k-wdhow button.on{border-color:#f97316; background:#fff7ed; box-shadow:0 4px 0 #fed7aa}
.k-wdthanks{margin:10px 0 0; min-height:1.3em; font-weight:700; color:#15803d}
.k-wdnote{margin-top:14px; font-size:14px; color:#64748b}
.k-wdnote summary{cursor:pointer; font-weight:600}
.k-wdnote textarea{width:100%; box-sizing:border-box; margin-top:8px; border:1px solid #cbd5e1; border-radius:10px; padding:8px 10px; font:inherit; font-size:15px; resize:vertical}
.k-wdsendrow{margin-top:6px}
.k-wdsend{border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:10px; padding:6px 12px; font:inherit; font-weight:700; font-size:14px; cursor:pointer}
.k-wdopen{border:0; cursor:pointer; font:inherit; font-weight:800; margin-left:10px}
@media (max-width:700px){ .k-wdprize{grid-template-columns:1fr} .k-wdtop h1{font-size:30px} .k-wdhero{width:140px; height:140px} }
/* class_calendar (12 Oct 2026): the week and the next class, under the hello */
.k-classline{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; background:#fff; border:2px solid #bfdbfe; border-radius:16px; padding:10px 16px; margin:0 0 14px;
  font-size:17px; color:#1e3a8a}
.k-cl-now{font-weight:800}
/* english_rows (12 Oct 2026): the English parts as rows, coloured like the maths rows */
body.kid.k-mission .k-job[data-kind="eng-read"]{background:#eef6ff}
body.kid.k-mission .k-job[data-kind="eng-check"]{background:#fff3e6}
body.kid.k-mission .k-job[data-kind="eng-write"]{background:#f3efff}
body.kid.k-mission .k-job[data-kind="eng-practice"]{background:#ecfdf3}
body.kid.k-mission .k-job[data-kind="eng-sounds"]{background:#ecfdf3}
/* owner, 12 Oct 2026: "give this dino a different colour as he is fading into the background": orange, with a white edge and a shadow */
body.kid.k-mission .k-pdino{filter:hue-rotate(-95deg) saturate(1.7) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
/* kid_calendar (12 Oct 2026): the term's class days */
.k-cl-open{margin-left:auto; font:inherit; font-weight:800; font-size:15px; color:#1e3a8a; background:#eff6ff; border:2px solid #bfdbfe; border-radius:12px; padding:6px 12px; cursor:pointer}
.k-calbox{background:#fff; border:2px solid #bfdbfe; border-radius:16px; padding:12px 16px; margin:-6px 0 14px}
.k-calhead{margin:0 0 8px; color:#1e3a8a; font-size:16px}
.k-calms{display:flex; flex-wrap:wrap; gap:18px}
.k-calm > b{display:block; color:#0a2650; margin:0 0 4px; font-size:16px}
.k-calg{display:grid; grid-template-columns:repeat(7, 34px); grid-auto-rows:30px; align-content:start; gap:3px; text-align:center; font-size:14px}
.k-calm{align-self:flex-start}
.k-calg span{font-size:11px; font-weight:800; color:#64748b}
.k-calg i, .k-calkey i{font-style:normal; display:grid; place-items:center; height:30px; border-radius:50%; color:#334155}
.k-calg i.les, .k-calkey i.les{background:#3b82f6; color:#fff; font-weight:800}
.k-calg i.gone, .k-calkey i.gone{background:#16a34a; color:#fff}
.k-calg i.today, .k-calkey i.today{box-shadow:0 0 0 3px #f59e0b inset}
.k-calkey{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:10px 0 0; font-size:14px; color:#475569}
.k-calkey i{display:inline-grid; width:28px; height:28px; margin-right:4px}
/* reward_both (12 Oct 2026): the week's two subjects */
.k-bothleft{margin:10px 0 6px; font-size:16px; color:#fff}
.k-bothcard{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; background:#fff; border:2px solid #fde68a; border-radius:16px; padding:10px 16px; margin:0 0 14px; font-size:17px; color:#0a2650}
.k-bothcard span{font-weight:700} .k-bothcard span.ok{color:#15803d} .k-bothcard small{color:#64748b; font-size:14px}
/* the class line, its calendar and This week in the right column (12 Oct 2026) */
body.kid .k-mside .k-classline.k-mside-card{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0 0 14px; border-radius:22px; padding:14px 18px}
.k-mside .k-classline .k-cl-open{margin-left:0}
.k-mside .k-calbox{margin:-8px 0 14px; padding:10px} .k-mside .k-calms{flex-direction:column; gap:10px}
body.kid .k-mside .k-bothcard.k-mside-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0 0 14px; border-radius:22px; padding:14px 18px}
.k-bothcard > summary{cursor:pointer; list-style:none; font-size:17px} .k-bothcard > summary::-webkit-details-marker{display:none}
.k-bothcard > summary::after{content:" ▸"; color:#64748b} .k-bothcard[open] > summary::after{content:" ▾"}
.k-bothcard[open] > summary{margin-bottom:4px}

/* novel_reader: a chapter read too fast */
body.kid .k-jtx em.k-skim, body.kid.k-mission .k-jtx em.k-skim{display:block; color:#c2410c; font-weight:700; font-style:normal}

/* ---- the sign-in page (owner, 15 Oct 2026: "the same theme as the actual home page"): app.js signinCard puts class "signin" on the body.
   The beach picture under a light sky wash, the white top bar of the home page, the helper dino and three eggs. The colour (owner, 15 Oct 2026,
   "let's do D1"): a box from jungle green to sea blue, the dino on sunny yellow, the form in its own white box. */
body.signin{min-height:100vh; background:linear-gradient(rgba(220,243,253,.80), rgba(220,243,253,.92)), var(--si-bg, none) center bottom / cover, #dcf3fd}
body.signin .wrap{max-width:1000px; padding:14px 18px 40px}
body.signin .top{background:#fff; border:1px solid #dbe7f5; border-radius:22px; padding:8px 14px; margin:0 0 18px; box-shadow:0 6px 20px rgba(10,38,80,.06)}
body.signin .top a.brand .mark{width:46px; height:46px}
body.signin #title{font-size:38px; color:#0a2650; margin:6px 4px 16px; letter-spacing:-.01em}
body.signin .cards{display:block}
body.signin .si-card{display:grid; grid-template-columns:minmax(220px, 1fr) minmax(300px, 1.25fr); gap:18px; align-items:center;
  background:linear-gradient(135deg, #6fd27a 0%, #3fb2a0 45%, #2f8ff0 100%); border-radius:30px; padding:22px; box-shadow:0 12px 34px rgba(10,38,80,.14)}
body.signin .si-art{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:330px;
  background:linear-gradient(#fff8d6, #ffe9a8); border-radius:24px; padding:16px 10px 12px; overflow:hidden}
body.signin .si-bubble{position:relative; background:#fff; color:#0a2650; font-weight:800; font-size:21px; line-height:1.25; text-align:center;
  padding:12px 16px; border-radius:20px; box-shadow:0 4px 14px rgba(10,38,80,.10); margin:0 6px 8px}
body.signin .si-bubble::after{content:""; position:absolute; left:50%; bottom:-10px; margin-left:-10px; border:10px solid transparent; border-bottom:0; border-top-color:#fff}
body.signin .si-dino{width:200px; max-width:70%; height:auto; display:block; animation:si-bob 3.2s ease-in-out infinite}
body.signin .si-card > *{min-width:0}
body.signin .si-eggs{display:flex; gap:6px; justify-content:center; margin-top:-6px}
body.signin .si-eggs img{width:64px; height:64px}
body.signin .si-card .panel.csign{margin:0; background:#fff; padding:18px 22px; border-radius:22px; box-shadow:0 6px 18px rgba(10,38,80,.12)}
body.signin .csign h2{font-size:30px; color:#0a2650}
body.signin .csign input{background:#fff}
body.signin .csign input:focus{outline:none; border-color:#2563eb !important; box-shadow:0 0 0 4px #dbeafe}
body.signin .csign .btn.go{font-size:20px; min-height:56px; padding:0 34px; border-radius:18px}
body.signin .wrap > p.lead{background:rgba(255,255,255,.9); display:inline-block; padding:8px 16px; border-radius:16px; margin:14px 8px 0 0}
@keyframes si-bob{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ body.signin .si-dino{animation:none} }
@media (max-width:700px){
  body.signin #title{font-size:28px}
  body.signin .si-card{grid-template-columns:1fr; padding:14px; gap:8px}
  body.signin .si-art{min-height:0; flex-direction:row; align-items:flex-end; padding:10px}
  body.signin .si-bubble{font-size:17px; order:2; margin:0 0 30px 12px}
  body.signin .si-bubble::after{left:-10px; bottom:auto; top:50%; margin:-10px 0 0; border:10px solid transparent; border-left:0; border-right-color:#fff}
  body.signin .si-dino{width:110px; max-width:40%}
  body.signin .si-eggs{display:none}
  body.signin .si-card .panel.csign{padding:14px 16px}
}