/* LearnFun Comics. Everything inside a page is sized in em from .cb-sheet, and that is set from the page's own width, so a page scales like a printed one. */
.cb-page{--ink:#1b1340;container-type:inline-size;width:min(100%,560px);margin:0 auto 22px;aspect-ratio:1/1.42;background:#fffdf5;color:var(--ink);box-shadow:0 10px 26px rgba(27,19,64,.22)}
.cb-sheet{position:relative;display:grid;gap:.5em;width:100%;height:100%;padding:.7em;box-sizing:border-box;font:500 4.05cqw/1.26 "Fredoka",system-ui,sans-serif;overflow:hidden;background:radial-gradient(circle,rgba(27,19,64,.07) .09em,transparent .12em) 0 0/.7em .7em,#fffdf5}
.cb-sheet p{margin:0;font:inherit;color:inherit;max-width:none}
.cb-sheet .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cb-layout-one{grid-template-rows:1fr}
.cb-layout-two{grid-template-rows:1fr 1fr}
.cb-layout-top{grid-template:1.15fr 1fr/1fr 1fr}.cb-layout-top>:first-child{grid-column:1/3}
.cb-layout-bottom{grid-template:1fr 1fr/1fr 1fr}.cb-layout-bottom>:nth-child(3){grid-column:1/3}
.cb-layout-one>.cb-p,.cb-layout-two>.cb-p{padding-bottom:1.1em}
.cb-num{position:absolute;right:.75em;bottom:.08em;font:400 .72em "Bangers",Impact,sans-serif;color:#6a6288}

/* Panels */
.cb-p{position:relative;display:flex;flex-direction:column;gap:.45em;min-width:0;min-height:0;padding:.55em;border:.17em solid var(--ink);background:#fff;overflow:hidden;box-shadow:.14em .14em 0 var(--ink)}
.cb-bg-sky{background:radial-gradient(circle,rgba(255,255,255,.55) .16em,transparent .2em) 0 0/.8em .8em,#9fdfff}
.cb-bg-pink{background:radial-gradient(circle,rgba(255,255,255,.5) .16em,transparent .2em) 0 0/.8em .8em,#ffb3cc}
.cb-bg-yellow{background:radial-gradient(circle,rgba(255,255,255,.55) .16em,transparent .2em) 0 0/.8em .8em,#ffe066}
.cb-bg-mint{background:radial-gradient(circle,rgba(255,255,255,.5) .16em,transparent .2em) 0 0/.8em .8em,#8fe8cb}
.cb-bg-violet{background:radial-gradient(circle,rgba(255,255,255,.12) .16em,transparent .2em) 0 0/.8em .8em,#6c4de6}
.cb-bg-night{background:radial-gradient(circle,rgba(255,255,255,.1) .16em,transparent .2em) 0 0/.8em .8em,#241a57}
.cb-bg-burst{background:repeating-conic-gradient(from 0deg at 72% 72%,#ffd23f 0 12deg,#ffbf1f 12deg 24deg)}
.cb-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cb-p>:not(.cb-art){position:relative;z-index:1}
.has-art{justify-content:flex-end}
.has-momo{padding-bottom:3.4em}
.cb-layout-two .has-momo,.cb-layout-one .has-momo{padding-bottom:4.4em}
.cb-cap{align-self:flex-start;max-width:96%;padding:.16em .5em;border:.11em solid var(--ink);background:#ffd23f;font-weight:600!important;font-size:.92em!important;box-shadow:.09em .09em 0 var(--ink)}
.has-art .cb-cap{position:absolute!important;top:.45em;left:.45em}
.cb-say{align-self:flex-start;max-width:100%;padding:.42em .7em;border:.12em solid var(--ink);border-radius:1em;background:#fff;box-shadow:.09em .09em 0 var(--ink)}
.cb-say b,.cb-q b,.cb-why b{font-weight:700;color:#c21c56}
.cb-say::after{content:"";position:absolute;left:1.2em;bottom:-.48em;width:.72em;height:.72em;background:#fff;border-right:.12em solid var(--ink);border-bottom:.12em solid var(--ink);transform:skewX(26deg) rotate(45deg)}
.cb-say.momo{margin-right:.2em}.cb-say.momo::after{left:auto;right:1.6em;transform:skewX(-26deg) rotate(45deg)}
.has-art .cb-say::after{bottom:auto;top:-.48em;transform:skewX(26deg) rotate(225deg)}
.cb-momo{position:absolute!important;right:.25em;bottom:.1em;width:3.6em;height:3.6em}
.cb-layout-two .cb-momo,.cb-layout-one .cb-momo{width:4.8em;height:4.8em}
.cb-sfx{position:absolute!important;top:.25em;right:.35em;font:400 1.9em/1 "Bangers",Impact,sans-serif;letter-spacing:.03em;color:#ffd23f;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--ink);transform:rotate(7deg)}
.cb-board{display:grid;gap:.2em;margin:auto 0;padding:.5em .7em;border:.14em solid var(--ink);border-radius:.4em;background:#fffdf5;box-shadow:.1em .1em 0 var(--ink);font-weight:600;font-size:1.04em}
.cb-bg-violet .cb-board{background:#241a57;color:#fff}
.cb-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.1em;width:min(100%,11.5em);aspect-ratio:1;margin:auto;padding:.2em;border:.12em solid var(--ink);background:#fff}
.cb-grid i{background:#ffe9a6;border-radius:50%}.cb-grid i.on{background:#ff5d8f;border-radius:.1em}
.cb-code{min-width:0;border:.12em solid #000;border-radius:.4em;overflow:hidden;background:#15102f;font-size:.88em}
.cb-code pre{margin:0;padding:.4em .6em;background:none;border:0;color:#f2efff;font:500 1em/1.35 "Cascadia Code",Consolas,Menlo,monospace;white-space:pre;overflow:hidden}
.cb-code code{font:inherit;background:none;color:inherit;padding:0}
.cb-code .k{color:#ffd23f}.cb-code .s{color:#8fe8cb}.cb-code .n{color:#ff9db8}
.cb-out{border-top:.1em dashed #6a6288!important;color:#b9f5dd!important}
.cb-bg-night,.cb-bg-yellow:has(.cb-code){justify-content:center}

/* Questions */
.cb-q{display:flex;flex-direction:column;justify-content:center;gap:.5em;flex:1;min-height:0}
.cb-q-text{padding:.4em .6em;border:.12em solid var(--ink);border-radius:.5em;background:#fff;font-weight:600!important;font-size:1.08em!important}
.cb-choices{display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.cb-choice{min-width:0;min-height:44px;padding:.42em .4em;border:.13em solid var(--ink);border-radius:.55em;background:#fff;box-shadow:.11em .11em 0 var(--ink);color:var(--ink);font:600 1em/1.15 "Fredoka",system-ui,sans-serif;cursor:pointer;transition:transform .16s cubic-bezier(.25,.46,.45,.94)}
.cb-choice:hover:not(:disabled){background:#ffd23f;transform:translate(-.03em,-.03em)}
.cb-choice:focus-visible,.cb-tool:focus-visible,.cb-btn:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px #6c4de6}
.cb-choice.right{background:#38d9a9}.cb-choice.wrong{background:#ff9db8}.cb-choice:disabled{cursor:default}
.cb-why{padding:.35em .55em;border-radius:.5em;background:#fffdf5;border:.1em solid var(--ink)}
.cb-q-pop{position:absolute;left:50%;top:50%;z-index:5;padding:.1em .45em;border:.13em solid var(--ink);background:#ffd23f;font:400 2.6em/1.1 "Bangers",Impact,sans-serif;pointer-events:none;animation:cb-pop .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cb-pop{0%{transform:translate(-50%,-50%) scale(.3) rotate(-14deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(5deg);opacity:1}75%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}100%{transform:translate(-50%,-70%) scale(.92);opacity:0}}

/* Cover and last page */
.cb-cover{grid-template-rows:auto 1fr auto auto auto;gap:.35em;background:#ffd23f}
[data-c=coding].cb-cover{background:#8fe8cb}[data-c=english].cb-cover{background:#ffb3cc}
.cb-masthead{display:flex;justify-content:space-between;align-items:center;padding:.1em .5em;background:var(--ink);color:#fff;font:400 1.35em/1.3 "Bangers",Impact,sans-serif;letter-spacing:.05em}
.cb-masthead b{font-weight:400}.cb-masthead span{color:#ffd23f}
.cb-cover-art{position:relative;min-height:0;border:.18em solid var(--ink);background:#fff;overflow:hidden;box-shadow:.16em .16em 0 var(--ink)}
.cb-cover-art img{display:block;width:100%;height:100%;object-fit:cover}
.cb-star{position:absolute;right:.25em;top:.25em;padding:.28em .55em;border:.14em solid var(--ink);border-radius:2em;background:#ff5d8f;color:#fff;font:400 1.3em/1 "Bangers",Impact,sans-serif;letter-spacing:.04em;transform:rotate(6deg)}
.cb-cover-title{font:400 3.05em/.98 "Bangers",Impact,sans-serif!important;letter-spacing:.025em;color:#fff!important;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.055em .055em 0 var(--ink);text-wrap:balance}
.cb-cover-tag{font-weight:600!important;font-size:.98em!important;line-height:1.2!important}
.cb-cover-foot{display:flex;align-items:center;gap:.5em;font-size:.86em;line-height:1.2}.cb-cover-foot b{font-weight:700}
.cb-cover-foot .cb-momo{position:static!important;width:3em;height:3em;flex:none}
.cb-end{align-content:start;gap:.6em;padding:1em;background:#fff8dc}
.cb-end-title{font:400 3em/1 "Bangers",Impact,sans-serif!important;letter-spacing:.03em;color:#ffd23f!important;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--ink)}
.cb-score{font-weight:700!important;color:#c21c56!important}
.cb-score[hidden]{display:none}
.cb-remember{padding:.55em .7em;border:.14em solid var(--ink);background:#fff;box-shadow:.12em .12em 0 var(--ink)}
.cb-remember-head,.cb-more-head{font:400 1.25em/1.1 "Bangers",Impact,sans-serif!important;letter-spacing:.04em}
.cb-remember ul{margin:.25em 0 0;padding-left:1.1em;font-size:.96em}.cb-remember li{margin:.15em 0}
.cb-next{display:grid;gap:.4em}
.cb-btn{display:block;padding:.45em .7em;border:.13em solid var(--ink);border-radius:.6em;background:#ffd23f;box-shadow:.11em .11em 0 var(--ink);color:var(--ink);font-weight:700;text-align:center;text-decoration:none}
.cb-btn:hover{background:#fff}
.cb-more{display:grid;gap:.2em;font-size:.94em}.cb-more a{color:#4b32c3;font-weight:600}

/* The book. comicbook.js adds .on, and until then the pages simply stack. */
body.comic .cb-head{padding:8px 0 6px}body.comic .cb-head .w-h1{margin:2px 0 0;font-size:clamp(22px,3vw,32px);-webkit-text-stroke-width:1px}
body.comic .cb-head+.block{padding-top:12px;margin-top:0}
/* Big panels get a big Momo and big lettering, so a page reads at a glance */
.cb-layout-two .cb-momo,.cb-layout-one .cb-momo,.cb-layout-top>:first-child .cb-momo{width:6.6em;height:6.6em;right:.3em}
.cb-layout-two .has-momo,.cb-layout-top>:first-child.has-momo{padding-bottom:.55em;padding-right:6.6em}
.cb-layout-two .has-momo .cb-say,.cb-layout-top>:first-child .cb-say{font-size:1.14em;margin-top:.3em}
.cb-layout-top>:first-child.has-momo .cb-cap{margin-right:-5em;max-width:none}
.cb-layout-two .cb-board,.cb-layout-one .cb-board{font-size:1.32em;padding:.6em .8em}
.cb-layout-two .has-momo .cb-board{font-size:1.1em}
.cb-layout-top>:first-child .cb-board,.cb-layout-bottom>:nth-child(3) .cb-board{font-size:1.2em}
.cb-layout-two .cb-code,.cb-layout-top>:first-child .cb-code{font-size:1.1em;margin:auto 0}
.cb-layout-one .cb-q,.cb-layout-one .cb-q-text{font-size:1.1em}
.cb-layout-one .cb-choice{min-height:3.2em;font-size:1.12em}
.cb-coins{position:absolute!important;left:.5em;bottom:.45em;display:flex;flex-wrap:wrap-reverse;gap:.08em;width:8.6em}
.cb-coins i{width:1.15em;height:1.15em;border:.1em solid var(--ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc61a 60%,#e8a200)}
.cb-layout-two .has-momo:has(.cb-board){padding-right:.55em}
.cb-layout-two .has-momo:has(.cb-board) .cb-momo{width:4.6em;height:4.6em}
.cb-layout-two .has-momo:has(.cb-board) .cb-board{margin:auto 3.8em auto 0}
.cb-blurb{max-width:640px;margin:18px auto 0;text-align:center;font-family:"Fredoka",system-ui,sans-serif}
.cb.on{--pw:400px;--ph:568px;position:relative;display:grid;justify-items:center;gap:10px}
.cb.on .cb-page{width:100%;height:100%;margin:0;aspect-ratio:auto;box-shadow:none}
.cb-stage{position:relative;width:calc(var(--pw)*2);height:var(--ph);perspective:2600px;touch-action:pan-y;user-select:none;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cb.single .cb-stage{width:var(--pw);perspective:1800px}
.cb-stage.closed-front{transform:translateX(calc(var(--pw)*-.5))}
.cb-stage.closed-back{transform:translateX(calc(var(--pw)*.5))}
.cb-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.1,.25,1);will-change:transform}
.cb.single .cb-leaf{left:0;width:100%;transition-duration:.55s}
.cb-leaf.turned{transform:rotateY(-180deg)}
.cb.single .cb-leaf.turned{transform:rotateY(-130deg);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.3,.1,.25,1),opacity .2s .35s}
.cb-leaf.drag{transition:none}
.cb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fffdf5;box-shadow:0 8px 22px rgba(27,19,64,.25);overflow:hidden}
.cb-face.back{transform:rotateY(180deg)}
.cb-face::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,rgba(27,19,64,.2),rgba(27,19,64,.04) 5%,transparent 11%)}
.cb-face.back::after{background:linear-gradient(270deg,rgba(27,19,64,.2),rgba(27,19,64,.04) 5%,transparent 11%)}
.cb.single .cb-face::after{background:linear-gradient(90deg,rgba(27,19,64,.1),transparent 5%)}
.cb-leaf.drag .cb-face::after,.cb-leaf.turning .cb-face::after{background:linear-gradient(90deg,rgba(27,19,64,.34),rgba(27,19,64,.08) 40%,rgba(255,255,255,.15))}
.cb-face.live .cb-sfx{animation:cb-sfx .5s cubic-bezier(.22,1,.36,1) .25s backwards}
@keyframes cb-sfx{from{transform:scale(.2) rotate(-20deg);opacity:0}70%{transform:scale(1.2) rotate(10deg);opacity:1}}
.cb-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%}
.cb-tool{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:4px 12px;border:3px solid #1b1340;border-radius:14px;background:#fff;box-shadow:3px 3px 0 #1b1340;color:#1b1340;font:700 15px "Fredoka",system-ui,sans-serif;cursor:pointer;transition:transform .16s cubic-bezier(.25,.46,.45,.94)}
.cb-tool:hover:not(:disabled){background:#ffd23f;transform:translate(-1px,-1px)}
.cb-tool:disabled{opacity:.4;cursor:default}
.cb-tool.go{padding:4px 22px;background:#ffd23f;font:400 22px "Bangers",Impact,sans-serif;letter-spacing:.04em}
.cb-where{min-width:92px;text-align:center;font:600 15px "Fredoka",system-ui,sans-serif;color:#1b1340}
.cb:fullscreen{display:grid;align-content:center;background:#241a57}
.cb:fullscreen .cb-where{color:#fff}
@media (max-width:560px){.cb-tool.opt{min-width:44px;padding:4px 6px}.cb-where{min-width:56px}.cb-tool.go{padding:4px 14px}}
@media (prefers-reduced-motion:reduce){.cb-leaf,.cb-stage,.cb-choice{transition:none!important}.cb-face.live .cb-sfx,.cb-q-pop{animation:none}.cb-q-pop{display:none}}

/* The shelf */
.cb-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;margin:0;padding:0;list-style:none}
.cb-shelf li{min-width:0}
.cb-shelf-card{display:block;color:inherit;text-decoration:none;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.cb-shelf-card:hover,.cb-shelf-card:focus-visible{transform:translateY(-6px) rotate(-1.2deg)}
.cb-shelf .cb-page{width:100%;margin:0;border:3px solid #1b1340;box-sizing:border-box;box-shadow:7px 7px 0 #1b1340}
.cb-read{display:inline-block;margin-top:12px;padding:3px 10px;border:3px solid #1b1340;border-radius:20px;background:#38d9a9;font:700 14px "Fredoka",system-ui,sans-serif}

/* The villain on a question page */
.cb-foe{display:flex;align-items:center;gap:.6em;padding:.35em .6em .35em .35em;border:.14em solid var(--ink);border-radius:.8em;background:#fff;box-shadow:.11em .11em 0 var(--ink);margin-top:.1em}
.cb-foe img{flex:none;width:6.4em;height:6.4em;object-fit:cover;border:.13em solid var(--ink);border-radius:.6em}
.cb-foe b{display:block;font:400 1.5em/1.1 "Bangers",Impact,sans-serif;letter-spacing:.03em}
.cb-hp{display:block;margin-top:.05em;color:#d6204f;font-size:1.7em;line-height:1;letter-spacing:.06em}
.has-foe{gap:.5em}

/* Coming back */
.cb-won{display:flex;align-items:center;gap:.5em;padding:.3em .5em;border:.13em solid var(--ink);background:#ffd23f;font-size:.92em}.cb-won[hidden]{display:none}
.cb-won img{flex:none;width:3em;height:3em;object-fit:cover;border:.1em solid var(--ink)}
.cb-cliff{padding:.4em .6em;background:#241a57;color:#fff!important;font-weight:600!important;font-size:.94em!important;font-style:italic;line-height:1.22!important}
.cb-btn.plain{background:#fff}.cb-btn[hidden]{display:none}
.cb-end{gap:.42em;padding:.8em}.cb-end .cb-end-title{font-size:2.5em}
.cb-next{gap:.32em}.cb-next .cb-btn{padding:.3em .6em}
[data-comeback]:not([hidden]){margin:0 0 22px}
.cb-nextmove{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:14px 18px;border:4px solid #1b1340;border-radius:18px;background:#fff8dc;box-shadow:6px 6px 0 #1b1340;font-family:"Fredoka",system-ui,sans-serif;color:#1b1340}
.cb-nextmove p{margin:0}.cb-nextmove>div{flex:1 1 240px;min-width:0}
.cb-nextmove img{width:84px;height:84px;object-fit:cover;border:3px solid #1b1340;border-radius:12px}
.cb-nextmove-tag{font:400 15px "Bangers",Impact,sans-serif;letter-spacing:.06em;color:#6c4de6}
.cb-nextmove-title{font:400 26px/1.1 "Bangers",Impact,sans-serif;letter-spacing:.03em}
.cb-nextmove .cb-btn{padding:10px 20px;border-width:3px;border-radius:12px;box-shadow:3px 3px 0 #1b1340;font-size:17px;--ink:#1b1340}
[data-cards]:not([hidden]){margin:0 0 26px}
.cb-cards-head{margin:0 0 10px;font:400 26px "Bangers",Impact,sans-serif;letter-spacing:.03em}
.cb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.cb-card{display:grid;justify-items:center;gap:4px;padding:8px;border:3px solid #1b1340;border-radius:12px;background:#ece8ff;font-family:"Fredoka",system-ui,sans-serif;text-align:center;font-size:14px}
.cb-card.won{background:#fff;box-shadow:3px 3px 0 #1b1340}.cb-card.gold{background:linear-gradient(135deg,#fff3b0,#ffd23f 55%,#ffb300)}
.cb-card img{width:84px;height:84px;object-fit:cover;border:2px solid #1b1340;border-radius:8px}.cb-card b{font-weight:700;line-height:1.1}.cb-card small{font-size:12px;line-height:1.15}
.cb-card-q{display:grid;place-items:center;width:84px;height:84px;font:400 48px "Bangers",Impact,sans-serif;color:#6c4de6}
.cb-review{--ink:#1b1340;container-type:inline-size;max-width:560px;margin:0 auto;color:var(--ink)}
.cb-sheet.cb-solo{display:grid;gap:.6em;height:auto;font-size:18px;padding:18px;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);--ink:#1b1340;align-content:start}
.cb-solo .cb-btn{--ink:#1b1340}
.cb-video{max-width:860px;margin:28px auto 0}.cb-video h2{margin:0 0 10px;font:400 30px "Bangers",Impact,sans-serif;letter-spacing:.03em}
.cb-video video{display:block;width:100%;height:auto;border:4px solid #1b1340;border-radius:14px;background:#000}