:root{
  --paper:#F3F6FF; --card:#FFFFFF; --ink:#1B1F3B; --soft:#555C80;
  --blue:#2B3A8C; --blue-on:#FFFFFF; --marker:#FFD23F; --marker-ink:#1B1F3B;
  --leaf:#1F8A5B; --warn:#B4401F; --line:#CCD3EE; --hint:#EAF6EF; --page:#FFFBEA;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12152B; --card:#1C2040; --ink:#EEF0FF; --soft:#A9B0D6;
    --blue:#8FA2FF; --blue-on:#12152B; --leaf:#5FD3A0; --warn:#FF9A7A; --line:#343A66; --hint:#1B2E33; --page:#23284D;
  }
}
:root[data-theme="dark"]{
  --paper:#12152B; --card:#1C2040; --ink:#EEF0FF; --soft:#A9B0D6;
  --blue:#8FA2FF; --blue-on:#12152B; --leaf:#5FD3A0; --warn:#FF9A7A; --line:#343A66; --hint:#1B2E33; --page:#23284D;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.55}
main{max-width:46rem;margin:0 auto;padding:1.5rem 1rem 3rem}
h1,h2,h3,legend,summary{font-family:"Baloo 2","Trebuchet MS",Verdana,sans-serif;line-height:1.15;margin:0}
h1{font-size:clamp(1.9rem,6.5vw,3rem);font-weight:800;color:var(--blue)}
h2{font-size:1.45rem;color:var(--blue)}
.sub{color:var(--soft);margin:.5rem 0 0;max-width:36rem}
.soft{font-size:.92rem;color:var(--soft);margin:.15rem 0 .5rem}
details{background:var(--card);border:.0625rem solid var(--line);border-radius:.6rem;margin-top:.8rem;padding:.2rem .9rem}
summary{cursor:pointer;font-size:1.3rem;font-weight:600;color:var(--blue);padding:.6rem 0}
summary small{font-family:"Atkinson Hyperlegible",Verdana,sans-serif;font-size:.92rem;font-weight:400;color:var(--soft);display:block}
.topic{display:block;width:100%;box-sizing:border-box;text-align:left;margin:0 0 .6rem;border-color:var(--line);color:var(--ink);font-weight:400}
.topic b{color:var(--blue);font-family:"Baloo 2","Trebuchet MS",sans-serif;font-size:1.1rem}
.topic .tag{display:inline-block;margin-top:.2rem;font-size:.88rem;color:var(--soft)}
.topic.ready{border-color:var(--blue);border-left:.4rem solid var(--marker)}
.topic.ready .tag{color:var(--leaf);font-weight:700}

.poster{position:relative;overflow:hidden;border-radius:1.1rem;background:#0b2a6b;background-image:radial-gradient(circle at 70% 20%,#123c94 0,#0b2a6b 55%,#08204f 100%);color:#fff;padding:1.4rem 1.1rem 0}
.poster .strokes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ptitle{position:relative;text-align:center;font-family:"Knewave","Marker Felt","Comic Sans MS",cursive;line-height:.95;margin-bottom:.4rem}
.ptitle span{display:block;paint-order:stroke fill;-webkit-text-stroke:.5rem #06163d;text-shadow:.18rem .22rem 0 #06163d}
.ptitle .hw{font-size:clamp(2.6rem,11vw,5rem);color:#fff;transform:rotate(-3deg)}
.ptitle .rx{font-size:clamp(3.2rem,14vw,6.2rem);transform:rotate(-5deg);margin-top:-.2rem}
.ptitle .rx i{font-style:normal}
.ptitle .rx i:nth-child(1){color:#ff7a1a}.ptitle .rx i:nth-child(2){color:#ffd23f}.ptitle .rx i:nth-child(3){color:#6fe04a}.ptitle .rx i:nth-child(4){color:#1ea7ff}.ptitle .rx i:nth-child(5){color:#8a3ffc}
.swoosh{display:block;width:min(70%,20rem);margin:.2rem auto 0;transform:rotate(-4deg)}
.note{position:absolute;font-size:2.6rem;line-height:1}
.note.n1{top:5.5rem;right:1.2rem;color:#ff7a1a;transform:rotate(12deg)}.note.n2{top:12rem;left:1rem;color:#ffb21a;transform:rotate(-14deg)}.note.n3{top:9rem;left:14%;color:#35d6e6;font-size:2.1rem}
.pgrid{position:relative;display:grid;grid-template-columns:1fr;gap:1rem;align-items:end}
.art{order:2}.art svg{display:block;width:100%;max-width:24rem;margin:0 auto}
.doodle{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.35rem;line-height:1.1;margin:0}
.doodle.d1{color:#6fd3ff;transform:rotate(-8deg);max-width:9rem;margin:0 0 -1.2rem .4rem;position:relative}
.doodle.d2{color:#fff;text-align:right;transform:rotate(4deg);margin:1rem .6rem 0 0}
.poster2{position:relative;container-type:inline-size;border-radius:1.1rem;overflow:hidden;background:#0b2a6b}
.poster2 img{display:block;width:100%;height:auto}
.poster2 .form{position:absolute;inset:0}
.poster2 .f{position:absolute;left:61.9%;width:31.9%;height:6.1%;font-size:3.1cqw;border:0;border-radius:.5em;background:#fefefe;color:#1b1f3b;padding:0 .4em}
.poster2 .f.u{top:47.95%}.poster2 .f.p{top:56.5%}
.poster2 .lg{position:absolute;left:63%;top:65.2%;width:25.3%;height:7.1%;background:transparent;border:0;color:transparent;border-radius:1.2cqw;padding:0}
.msg2{min-height:1.5rem;margin:.6rem 0 0;font-weight:700;color:var(--warn);text-align:center}
@media (max-width:36rem){
  .poster2 .form{position:static;display:grid;gap:.6rem;padding:1rem}
  .poster2 .f,.poster2 .lg{position:static;width:100%;height:auto;font-size:1.1rem;padding:.7rem .8rem}
  .poster2 .lg{background:#0a5cff;color:#fff;font-family:"Baloo 2","Trebuchet MS",sans-serif;font-weight:800;font-size:1.4rem;border-radius:.8rem}
}
.pcard{background:#f7f9ff;color:#1b1f3b;border:.25rem solid #35d6e6;border-radius:1.1rem;padding:1.1rem 1rem 1.2rem;box-shadow:0 0 0 .2rem #0a5cff inset}
.pcard label{display:block;font-family:"Baloo 2","Trebuchet MS",sans-serif;font-weight:600;font-size:1.2rem;margin-bottom:.4rem;color:#1b1f3b}
.pcard input[type=text]{width:100%;font-size:1.15rem;padding:.7rem .8rem;border:.125rem solid #9aa6d6;border-radius:.6rem;background:#fff;color:#1b1f3b}
.pcard button{display:block;width:100%;margin-top:.8rem;background:#0a5cff;border-color:#0a5cff;color:#fff;font-family:"Baloo 2","Trebuchet MS",sans-serif;font-size:1.5rem;font-weight:800;padding:.5rem;border-radius:.8rem}
.poster.who{padding-bottom:1.4rem}
.poster.who .pcard{position:relative;max-width:26rem;margin:0 auto}
.pcard .msg{min-height:1.4rem;margin:.5rem 0 0;font-weight:700;color:#b4401f}
.books{display:flex;flex-direction:column;align-items:flex-end;margin:1rem -1.1rem 0 0}
.books span{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.3rem;color:#12152b;padding:.15rem 1.6rem .15rem 1rem;border-radius:.3rem 0 0 .3rem;min-width:9.5rem}
.books span:nth-child(1){background:#ff7a1a;min-width:8.5rem}.books span:nth-child(2){background:#1ea7ff}.books span:nth-child(3){background:#36c46a;min-width:10.5rem}
@media (min-width:40rem){.pgrid{grid-template-columns:1.05fr 1fr}.art{order:0}.poster{padding:1.8rem 1.6rem 0}.books{margin-right:-1.6rem}}
fieldset{border:0;padding:0;margin:1.4rem 0 0}
legend{font-size:1.2rem;font-weight:600;padding:0}
legend .n{display:inline-block;min-width:1.7rem;color:var(--blue)}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}
input[type=text]{font:inherit;border:.0625rem solid var(--line);border-radius:.5rem;background:var(--card);color:var(--ink);padding:.4rem .6rem}
input.own{width:13rem;max-width:100%}
input.own:not(:placeholder-shown),input.name{background:var(--marker);color:var(--marker-ink);font-weight:700}
input.name{border:0;border-bottom:.25rem solid var(--blue);border-radius:.4rem .4rem 0 0;width:14rem;max-width:100%}
button{font:inherit;cursor:pointer;border-radius:.6rem;border:.125rem solid var(--blue);
  background:var(--card);color:var(--blue);padding:.45rem .9rem;font-weight:700}
button.go{background:var(--blue);color:var(--blue-on);font-size:1.15rem;padding:.6rem 1.2rem}
button.chip{border-color:var(--line);color:var(--ink);font-weight:400;border-radius:2rem;padding:.3rem .8rem}
button.chip[aria-pressed=true]{background:var(--marker);color:var(--marker-ink);border-color:var(--blue);font-weight:700}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:.2rem solid var(--marker);outline-offset:.15rem}
textarea{font:inherit;width:100%;min-height:7rem;border:.0625rem solid var(--line);border-radius:.5rem;background:var(--paper);color:var(--ink);padding:.5rem .6rem;resize:vertical}
details.adder{border:.125rem dashed var(--blue);margin-top:1.2rem;padding-bottom:.8rem}
#status{margin-top:.9rem;min-height:1.5rem;font-weight:700;color:var(--warn)}
.lesson{margin-top:2rem}
.prob{background:var(--card);border:.0625rem solid var(--line);border-left:.4rem solid var(--marker);
  border-radius:.5rem;padding:1rem 1rem .9rem;margin-top:.8rem}
.prob p{margin:0 0 .6rem}
mark{background:var(--marker);color:var(--marker-ink);padding:0 .2rem;border-radius:.2rem;font-weight:700}
.word{font-weight:700;border-bottom:.2rem solid var(--blue)}
.layout{display:block}
#progress{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;background:var(--paper);padding:.5rem 0;margin-top:.8rem;border-bottom:.125rem solid var(--line)}
#progress b{font-family:"Baloo 2","Trebuchet MS",sans-serif;font-size:1.15rem;color:var(--blue)}
.stars{font-size:1.5rem;line-height:1;letter-spacing:.1rem;color:var(--line)}
.stars .on{color:var(--marker);text-shadow:0 0 0 var(--blue),.06rem .06rem 0 var(--blue),-.06rem -.06rem 0 var(--blue),.06rem -.06rem 0 var(--blue),-.06rem .06rem 0 var(--blue)}
#cheer{position:fixed;left:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:.6rem;max-width:min(24rem,calc(100vw - 7rem));
  background:var(--card);color:var(--ink);border:.2rem solid var(--marker);border-radius:1rem;padding:.5rem .9rem .5rem .5rem;font-weight:700;box-shadow:0 .3rem 1rem rgba(10,15,50,.3);animation:pop .3s ease-out}
#cheer.big{border-color:var(--leaf);font-size:1.15rem}
#cheer .pic svg{width:3.2rem;height:3.2rem;display:block}
#cheer .bit{position:absolute;left:2rem;top:1rem;width:.55rem;height:.55rem;border-radius:.15rem;animation:fly 1s ease-out forwards;pointer-events:none}
@keyframes pop{from{transform:translateY(1.5rem) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
#party{position:fixed;inset:0;z-index:50;overflow-y:auto;background:#0b2a6b;background-image:radial-gradient(circle at 50% 15%,#1746a8 0,#0b2a6b 55%,#08204f 100%);color:#fff;padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
.pcardy:focus{outline:none}
.pcardy{position:relative;max-width:34rem;margin:0 auto;text-align:center}
#party .ptitle .rx{font-size:clamp(3rem,13vw,5.4rem)}
#party .ptitle .rx i:nth-child(6n+1){color:#ff7a1a}#party .ptitle .rx i:nth-child(6n+2){color:#ffd23f}#party .ptitle .rx i:nth-child(6n+3){color:#6fe04a}#party .ptitle .rx i:nth-child(6n+4){color:#1ea7ff}#party .ptitle .rx i:nth-child(6n+5){color:#b98cff}#party .ptitle .rx i:nth-child(6n){color:#ff6fb5}
#party .hog img{width:min(78%,21rem);height:auto;display:block;margin:.2rem auto 0;animation:bob 1.2s ease-in-out infinite alternate;filter:drop-shadow(0 .5rem 1rem rgba(0,0,0,.35))}
.fall.dot{border-radius:50%;width:.8rem;height:.8rem}
.bigstars{font-size:2rem;letter-spacing:.2rem;color:#ffd23f;margin:.4rem 0 0}
#party .line{font-size:1.15rem;margin:.5rem 0 0}
.chipw{display:inline-block;background:#ffd23f;color:#1b1f3b;font-weight:700;border-radius:2rem;padding:.1rem .7rem;margin:.2rem .2rem 0}
#party .last{background:#f7f9ff;color:#1b1f3b;border-radius:1rem;border:.25rem solid #35d6e6;text-align:left;padding:.9rem 1rem;margin:1rem 0 .4rem}
#party .last h2{font-size:1.2rem;color:#2b3a8c}
#party .last ol{margin:.4rem 0 0;padding-left:1.4rem}
#party .row{justify-content:center}
#party button{background:#fff;color:#0b2a6b;border-color:#fff}#party button.go{background:#ffd23f;border-color:#ffd23f;color:#1b1f3b}
.fall{position:fixed;top:-1rem;width:.6rem;height:1rem;border-radius:.15rem;opacity:.95;animation:fall linear infinite;pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes bob{to{transform:translateY(-.5rem) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.fall{display:none}#party .hog img{animation:none}}
#break{position:fixed;inset:0;z-index:40;background:rgba(8,20,60,.75);display:flex;align-items:center;justify-content:center;padding:1rem}
.bcard{background:var(--card);color:var(--ink);border-radius:1.1rem;border:.25rem solid var(--marker);padding:1.4rem 1.3rem;max-width:24rem;width:100%;text-align:center}
.bcard .sub{margin:.5rem auto 0;font-size:1.2rem;color:var(--ink)}
.bcard .count{font-family:"Baloo 2","Trebuchet MS",sans-serif;font-weight:800;font-size:3.4rem;line-height:1.2;color:var(--blue);min-height:4rem}
.fillbar{height:.7rem;background:var(--line);border-radius:1rem;overflow:hidden;margin:.2rem 0 1rem}
.fillbar div{height:100%;width:100%;background:var(--leaf);transition:width 1s linear}
@media (prefers-reduced-motion:reduce){#cheer{animation:none}#cheer .bit{display:none}.fillbar div{transition:none}}
/* The side books (Glossary, For parents): drawers that slide in from the right at every screen width, opened from the floating dock */
.book{background:var(--blue);padding:.6rem .6rem .6rem 1.2rem;position:fixed;top:0;right:0;bottom:0;width:min(22rem,90vw);overflow-y:auto;z-index:20;padding-bottom:11rem;
  border-radius:1rem 0 0 1rem;transform:translateX(105%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:-.4rem 0 1.2rem rgba(10,15,50,.35)}
.book.open{transform:none;visibility:visible;transition:transform .2s,visibility 0s}
.book::before{content:"";position:absolute;left:.55rem;top:.8rem;bottom:.8rem;border-left:.125rem dashed rgba(255,255,255,.6)}
.bpage{background:var(--page);color:var(--ink);border-radius:.25rem .7rem .7rem .25rem;padding:1.1rem .9rem 1.3rem;position:relative;min-height:calc(100% - 3rem)}
.bpage h2{font-size:1.5rem}
.ribbon{position:absolute;top:0;right:1.1rem;width:1.1rem;height:2.4rem;background:var(--marker);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.letter{font-family:"Baloo 2","Trebuchet MS",sans-serif;font-weight:800;font-size:1.15rem;color:var(--blue);border-bottom:.125rem solid var(--line);margin:.9rem 0 .35rem}
.entry{margin:0 0 .6rem;font-size:.95rem;line-height:1.4}
.entry b{color:var(--blue)}.entry .ex{color:var(--soft)}
.bclose{display:block;margin:0 0 .5rem auto;background:var(--page);border-color:var(--page);color:var(--ink);padding:.25rem .8rem}
/* The dock sits above an open book, so the other book can be opened directly; the book page leaves room for it at the bottom. */
.bookdock{position:fixed;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom,0px));z-index:25;display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
main.docked{padding-bottom:12rem}
.bookbtn{display:flex;flex-direction:column;align-items:center;
  background:var(--blue);border-color:var(--blue);color:var(--blue-on);border-radius:.9rem;padding:.45rem .7rem .3rem;font-size:.85rem;line-height:1.2;box-shadow:0 .25rem .8rem rgba(10,15,50,.35)}
.bookbtn svg{width:2.6rem;height:3rem;display:block}
.bookbtn.parents,.book.parents{background:var(--leaf);border-color:var(--leaf)}
.book.parents .bpage p{margin:.3rem 0 .5rem;font-size:.95rem;line-height:1.4}
.book.parents .bpage ul{margin:.2rem 0 .6rem;padding-left:1.2rem;font-size:.95rem;line-height:1.4}
@media (max-width:40rem){.bookbtn{font-size:.78rem;padding:.35rem .5rem .25rem}.bookbtn svg{width:2rem;height:2.3rem}}
@media (prefers-reduced-motion:reduce){.book,.book.open{transition:none}}
.vocab{border-bottom:.15rem dotted var(--blue);cursor:help}
.vocab:focus-visible{outline:.2rem solid var(--marker);outline-offset:.1rem}
.defbox{background:var(--paper);border:.0625rem solid var(--blue);border-radius:.5rem;padding:.5rem .8rem;margin:.3rem 0 .6rem}
.defbox b{color:var(--blue)}.defbox .ex{color:var(--soft)}
.hintbox{background:var(--hint);border-radius:.5rem;padding:.6rem .8rem;margin-top:.5rem}
.hintbox b{color:var(--leaf)}
.ans{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.7rem}
.ans input{width:9rem}
.ans input.wide{width:17rem;max-width:100%}
.part{border-top:.0625rem dashed var(--line);margin-top:.7rem;padding-top:.4rem}
.part>p{margin:0}
.pline{display:block}
.pages{display:grid;gap:.8rem;margin:.6rem 0}
.pagebtn{display:block;width:100%;padding:0;border:.0625rem solid var(--line);border-radius:.4rem;background:#fff;overflow:hidden;cursor:zoom-in}
.pagebtn img{display:block;width:100%;height:auto}
details.fullpages{margin-top:.8rem}
.lessonpages label{display:block;font-family:"Baloo 2","Trebuchet MS",sans-serif;font-weight:600;font-size:1.2rem;color:var(--blue);margin:.8rem 0 .3rem}
.lessonpages textarea{background:var(--card)}
#zoom{position:fixed;inset:0;z-index:60;overflow:auto;background:rgba(8,20,60,.94);padding:calc(3.6rem + env(safe-area-inset-top,0px)) .5rem 1rem}
#zoom img{display:block;width:100%;max-width:1400px;height:auto;margin:0 auto;background:#fff;border-radius:.3rem}
#zoom .zclose{position:fixed;top:calc(.6rem + env(safe-area-inset-top,0px));right:.8rem;z-index:61}
.figure{display:inline-grid;border-top:.125rem solid var(--ink);border-left:.125rem solid var(--ink);margin:.2rem 0 .8rem;max-width:100%}
.figure span{width:1.8rem;height:1.8rem;border-right:.125rem solid var(--ink);border-bottom:.125rem solid var(--ink);background:var(--hint)}
table.chart th{text-align:center;min-width:2.2rem}
table.chart td{padding:.15rem}
table.chart td input[type=text]{width:2.6rem;text-align:center;padding:.3rem .2rem}
table.chart td.ok input[type=text]{background:var(--hint);border-color:var(--leaf);color:var(--leaf);font-weight:700}
@media (max-width:40rem){table.chart th{min-width:0;padding:.2rem .3rem}table.chart td{padding:.1rem}table.chart td input[type=text]{width:2rem;padding:.25rem 0;font-size:1rem}}
.fb{font-weight:700}.fb.ok{color:var(--leaf)}.fb.no{color:var(--warn)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;margin:.25rem 0 .5rem}
th,td{border:.0625rem solid var(--line);padding:.3rem .5rem;text-align:left}
th{background:var(--paper);font-family:"Baloo 2","Trebuchet MS",sans-serif}
td input[type=text]{width:6rem}
#copy{margin-top:2.5rem;background:var(--card);border:.125rem solid var(--blue);border-radius:.6rem;padding:1rem}
#copy ol{margin:.5rem 0 0;padding-left:1.4rem}
.empty{color:var(--soft)}
footer{margin-top:3rem;padding-top:1rem;border-top:.0625rem solid var(--line);font-size:.85rem;color:var(--soft)}
footer a{color:var(--blue)}
@media print{
  button,.ans,#status,#copy,.pick,.defbox,.side,.bookdock,.bookbtn,#zoom,#progress,#cheer,#break,#party{display:none !important}
  .vocab{border-bottom:0}
  body{background:#fff;color:#000;font-size:11pt}
  .prob{break-inside:avoid;border-left-color:#000;padding-bottom:5rem}
}