/* The comic theme for every page where people are learning (coding, interactive courses, practice, paths, maths notes, cube lessons): thick ink outlines, hard shadows,
   halftone paper, sticker labels and big Bangers titles. The game pages have their own copy of this look in /play/comic.css. Added by layout() in server/site.js to the
   pages listed in COMIC_PAGES, so the rest of the site (parents, guides, prices) stays calm. Everything is scoped to body.comic. */
@font-face{font-family:"Bangers";src:url(/play/fonts/bangers.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/play/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
body.comic{--cm-ink:#1b1340;--cm-yellow:#ffd23f;--cm-pink:#ff5d8f;--cm-sky:#3ec1ff;--cm-mint:#38d9a9;--cm-violet:#6c4de6;--cm-display:"Bangers",Impact,"Arial Black",system-ui,sans-serif;--cm-ui:"Fredoka","Jakarta",system-ui,sans-serif;--cm-pop:cubic-bezier(.34,1.56,.64,1);--cm-shadow:6px 6px 0 var(--cm-ink);--cm-shadow-sm:3px 3px 0 var(--cm-ink)}
body.comic main{background:radial-gradient(circle,rgba(27,19,64,.06) 1.2px,transparent 1.7px) 0 0/18px 18px,var(--paper)}

/* ---------- page headers ---------- */
body.comic .w-pagehead{position:relative;overflow:hidden;border-bottom:3px solid var(--cm-ink);background:linear-gradient(180deg,var(--c-soft,#fff3bf),var(--paper) 92%)}
body.comic .w-pagehead::before{content:"";position:absolute;right:max(-30px,calc(50% - 640px));top:-26px;width:170px;height:170px;background:var(--cm-yellow);opacity:.9;clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 33%);animation:cm-spin 26s linear infinite;pointer-events:none}
body.comic .w-pagehead::after{content:"";position:absolute;right:max(110px,calc(50% - 480px));bottom:-30px;width:90px;height:90px;background:var(--cm-pink);opacity:.85;clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 33%);animation:cm-spin 34s linear infinite reverse;pointer-events:none}
body.comic .w-pagehead>.wrap{position:relative;z-index:1}
@keyframes cm-spin{to{rotate:360deg}}
body.comic .w-h1{font:400 clamp(36px,5.6vw,68px)/1.02 var(--cm-display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:none;font-variation-settings:normal;filter:drop-shadow(3px 3px 0 var(--cm-ink)) drop-shadow(6px 6px 0 var(--c,var(--cm-pink)));transform:rotate(-.8deg);transform-origin:left center;max-width:20ch}
body.comic .w-h1 *{text-shadow:none!important}
body.comic .w-h1 em{font-style:normal;font-weight:400;color:var(--cm-yellow);display:inline-block;transform:rotate(1.2deg)}
body.comic .w-pagehead .lede{font:500 clamp(17px,1.5vw,20px)/1.55 var(--cm-ui);color:var(--cm-ink)}
body.comic .crumbs,body.comic .crumbs a{font-family:var(--cm-ui);font-weight:500}
body.comic .eyebrow{display:inline-block;margin-bottom:8px;padding:6px 12px;border:3px solid var(--cm-ink);border-radius:10px;background:var(--cm-yellow);color:var(--cm-ink);font:700 12.5px/1 var(--cm-ui);letter-spacing:.07em;text-transform:uppercase;box-shadow:var(--cm-shadow-sm);transform:rotate(-1.6deg)}
body.comic .w-pagehead .eyebrow{color:var(--cm-ink)}
body.comic .section-head h2{font:400 clamp(30px,4vw,46px)/1.05 var(--cm-display);letter-spacing:.02em;color:var(--cm-ink);text-shadow:3px 3px 0 var(--c,var(--cm-yellow));font-variation-settings:normal}
body.comic .section-head h2 em{font-style:normal;color:var(--c-ink,var(--cm-violet))}
body.comic .section-head p{font:500 17px/1.55 var(--cm-ui);color:var(--ink-2)}
body.comic .section-head .link,body.comic .link{font-family:var(--cm-ui);font-weight:700}

/* ---------- cards and panels ---------- */
body.comic .w-card{position:relative;padding:22px 22px 20px;border:3px solid var(--cm-ink);border-radius:22px;background:linear-gradient(var(--c,var(--cm-violet)) 0 9px,#fff 9px);box-shadow:var(--cm-shadow);transition:transform .22s var(--cm-pop),box-shadow .2s}
body.comic .w-card[data-c]{border-top:3px solid var(--cm-ink)}
body.comic .w-card:hover,body.comic .w-card:focus-visible{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:10px 10px 0 var(--c,var(--cm-ink))}
body.comic .w-card h3{font:700 22px/1.15 var(--cm-ui);letter-spacing:-.005em;color:var(--cm-ink)}
body.comic .w-card p{font:500 15.5px/1.5 var(--cm-ui);color:var(--ink-2)}
body.comic .w-card .link{font-family:var(--cm-ui);font-weight:700;color:var(--c-ink,var(--cm-violet))}
body.comic .home2-card-icon{display:inline-grid;place-items:center;width:46px;height:46px;border:3px solid var(--cm-ink);border-radius:14px;background:var(--c-soft,#fff3bf);font-size:24px;box-shadow:var(--cm-shadow-sm);transform:rotate(-4deg)}
body.comic .w-callout{border:3px solid var(--cm-ink);border-radius:22px;background:var(--c-soft,#fff3bf);box-shadow:var(--cm-shadow)}
body.comic .w-callout h2{font:400 clamp(26px,3vw,36px)/1.08 var(--cm-display);letter-spacing:.02em;font-variation-settings:normal}
body.comic .w-callout p{font:500 16.5px/1.5 var(--cm-ui)}
body.comic .w-prose h2{font:400 clamp(28px,3.4vw,38px)/1.1 var(--cm-display);letter-spacing:.02em;text-shadow:2px 2px 0 var(--cm-yellow);font-variation-settings:normal}
body.comic .w-prose h3{font:700 21px/1.2 var(--cm-ui)}
body.comic .w-prose,body.comic .w-prose li{font-family:var(--cm-ui);font-weight:400}
body.comic .w-tbl-wrap{border:3px solid var(--cm-ink);border-radius:16px;box-shadow:var(--cm-shadow-sm);overflow:auto}
body.comic .w-faq details{margin-bottom:10px;border:3px solid var(--cm-ink);border-radius:16px;background:#fff;box-shadow:var(--cm-shadow-sm);transition:transform .15s}
body.comic .w-faq details[open]{background:#fff8dc}
body.comic .w-faq summary{padding:14px 18px;font:600 17px/1.35 var(--cm-ui);cursor:pointer}
body.comic .w-faq details p{padding:0 18px 16px;font:500 16px/1.6 var(--cm-ui)}

/* ---------- buttons inside the page (the header keeps its own) ---------- */
body.comic main .btn{border:3px solid var(--cm-ink);border-radius:16px;box-shadow:0 4px 0 var(--cm-ink);font:700 16px/1 var(--cm-ui);letter-spacing:0;transition:transform .2s var(--cm-pop),box-shadow .15s,background-color .15s}
body.comic main .btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 var(--cm-ink)}
body.comic main .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cm-ink)}
body.comic main .btn-primary{--bg:var(--cm-yellow);--fg:var(--cm-ink);--bd:var(--cm-ink);background:var(--cm-yellow);color:var(--cm-ink)}
body.comic main .btn-primary:hover{background:#ffe066;color:var(--cm-ink)}
body.comic main .btn-ghost{background:#fff;color:var(--cm-ink)}
body.comic main .btn-lg{padding:15px 24px;font-size:18px}

/* ---------- the lesson workbench: text on the left, a coloured editor on the right ---------- */
body.comic .wc-text{font-family:var(--cm-ui);font-size:17.5px;line-height:1.65}
body.comic .wc-text p,body.comic .wc-text li{font-family:var(--cm-ui);font-weight:400}
body.comic .wc-text h2{margin:22px 0 8px;font:400 clamp(26px,3vw,34px)/1.08 var(--cm-display);letter-spacing:.02em;color:var(--cm-ink);text-shadow:2px 2px 0 var(--cm-yellow);font-variation-settings:normal}
body.comic .wc-text h2:first-child{margin-top:0}
body.comic .wc-task{position:relative;padding:14px 18px;border:3px solid var(--cm-ink);border-radius:18px;background:var(--cm-yellow);color:var(--cm-ink);font:600 18px/1.45 var(--cm-ui);box-shadow:var(--cm-shadow-sm)}
body.comic .wc-task::after{content:"";position:absolute;left:34px;bottom:-14px;width:20px;height:20px;background:var(--cm-yellow);border-right:3px solid var(--cm-ink);border-bottom:3px solid var(--cm-ink);transform:rotate(45deg) skew(8deg,8deg)}
body.comic .wc-points li::marker{color:var(--cm-pink);font-weight:700}
body.comic .wc-note{border-left:5px solid var(--cm-ink);background:#fff8dc;font-family:var(--cm-ui)}
body.comic .wc-goal{padding:10px 14px;margin:8px 0;border:3px solid var(--cm-ink);border-radius:16px;box-shadow:var(--cm-shadow-sm);font:600 16px/1.4 var(--cm-ui)}
body.comic .wc-goal.ok{background:#c9f7e6}body.comic .wc-goal.no{background:#ffe0e5}
body.comic .wc-msg{font:700 18px/1.4 var(--cm-ui)}
body.comic .wc-nav a{font:700 16px var(--cm-ui)}
body.comic .wc-stretch{border:3px dashed var(--cm-ink);border-radius:14px;background:#fff}body.comic .wc-stretch summary{font:700 16px var(--cm-ui)}
body.comic .wc-bar{border:3px solid var(--cm-ink);border-bottom:0;background:linear-gradient(90deg,var(--cm-violet),var(--cm-pink))}
body.comic .wc-bar b{font:400 24px/1 var(--cm-display);letter-spacing:.04em;color:#fff;-webkit-text-stroke:1.5px var(--cm-ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--cm-ink)}
body.comic .wc-bar .btn{box-shadow:0 3px 0 var(--cm-ink);padding:9px 12px;font-size:14px;border-width:2.5px}
body.comic .wc-bar .btn:not(.btn-primary){background:#fff;color:var(--cm-ink)}
body.comic .wc-editor{border:3px solid var(--cm-ink);border-radius:0 0 18px 18px;box-shadow:var(--cm-shadow)}
body.comic .wc-preview{border:3px solid var(--cm-ink);border-radius:0 0 18px 18px;background:#fff;box-shadow:var(--cm-shadow)}
body.comic .wc-out{border:3px solid var(--cm-ink);border-radius:0 0 18px 18px;box-shadow:var(--cm-shadow)}
body.comic .wc-editor+.wc-out,body.comic .wc-editor+.wc-preview{margin-top:14px;border-radius:18px}
body.comic .wc-canvas{border:3px solid var(--cm-ink);border-radius:18px;box-shadow:var(--cm-shadow)}
body.comic .wc-block{border:3px solid var(--cm-ink);box-shadow:var(--cm-shadow)}
body.comic .wc-example figcaption{display:inline-block;padding:5px 10px;border:3px solid var(--cm-ink);border-radius:9px;background:var(--cm-yellow);color:var(--cm-ink);font:700 12px/1 var(--cm-ui);letter-spacing:.08em;box-shadow:var(--cm-shadow-sm);transform:rotate(-1.4deg)}
body.comic .wc-example-note{font:500 16px/1.55 var(--cm-ui)}
body.comic .wc-card .wc-num{display:inline-grid;place-items:center;width:42px;height:42px;border:3px solid var(--cm-ink);border-radius:50%;background:var(--cm-yellow);color:var(--cm-ink);font:400 22px/1 var(--cm-display);box-shadow:var(--cm-shadow-sm);transform:rotate(-6deg)}
body.comic .wc-card.done{background:linear-gradient(var(--cm-mint) 0 9px,#e8fff6 9px)}
body.comic .wc-module{display:inline-block;margin:26px 0 12px;padding:6px 14px;border:3px solid var(--cm-ink);border-radius:12px;background:var(--cm-ink);color:#fff;font:400 24px/1.1 var(--cm-display);letter-spacing:.05em;transform:rotate(-1deg)}
body.comic .wc-prem{border:2px solid var(--cm-ink);box-shadow:2px 2px 0 var(--cm-ink)}
body.comic .wc-cert{border-color:var(--cm-ink)}

/* ---------- cards coming into view ---------- */
body.comic .w-cards>*,body.comic .w-faq details{animation:cm-in .5s var(--cm-pop) backwards}
body.comic .w-cards>*:nth-child(2){animation-delay:.05s}body.comic .w-cards>*:nth-child(3){animation-delay:.1s}body.comic .w-cards>*:nth-child(4){animation-delay:.15s}body.comic .w-cards>*:nth-child(5){animation-delay:.2s}body.comic .w-cards>*:nth-child(6){animation-delay:.25s}
@keyframes cm-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:560px){body.comic{--cm-shadow:4px 4px 0 var(--cm-ink)}body.comic .w-pagehead::before{width:110px;height:110px;right:-24px}body.comic .w-pagehead::after{display:none}body.comic .w-h1{filter:drop-shadow(2px 2px 0 var(--cm-ink)) drop-shadow(4px 4px 0 var(--c,var(--cm-pink)))}}
@media(prefers-reduced-motion:reduce){body.comic .w-pagehead::before,body.comic .w-pagehead::after,body.comic .w-cards>*,body.comic .w-faq details{animation:none}body.comic .w-card:hover,body.comic main .btn:hover{transform:none}}