/* Shared crayon artwork. Homepage arcade composition is scoped below. */
body { background-image:url('/assets/brand/paper.svg'); }
:root { --wrong-text:#AD3523; --correct:#91BB48; --wrong:#F08B6B; --mint:#ACCA94; --purple:#B6A1C4; --bubblegum:#EB9C85; }
.home .hero,.home .play-story,.home .worlds,.home footer { background-image:url('/assets/brand/paper.svg'); }
header,header.site { backdrop-filter:none; }
.btn,.btn:hover,.btn:active,.final-cta .btn,.final-cta .btn:hover { box-shadow:none; border-width:1.5px; border-radius:23px 18px 24px 17px / 17px 24px 18px 23px; }
.btn-sunshine,.hello-sticker,.daily-sticker,.worlds .section-title > span,.chart-fill { background-image:url('/assets/brand/wax.svg'); }
.btn:focus-visible { outline-color:#426B38; }
.hero-showcase::before { background:#E6DECE url('/assets/brand/paper.svg'); border:1.5px solid #69655C; border-radius:45% 44% 23px 26px; transform:rotate(-3deg); }
.phone { background:var(--ink); border:1px solid var(--ink); box-shadow:8px 12px 0 #34332F16; }
.phone::after { display:none; }
.hello-sticker { font-family:PatrickHand,sans-serif; font-weight:400; letter-spacing:-.03em; border-width:1.5px; background-color:var(--sunshine); }
.daily-sticker { border-width:1.5px; background-color:#E8EDD9; }
.word-ribbon { background:var(--navy) url('/assets/brand/paper.svg'); }
.home .worlds { background-color:#ECEEDC; }
.world-cover,.world-slide:nth-child(n) .world-cover { border:1.5px solid var(--ink-soft); border-radius:18px 23px 17px 21px; box-shadow:none; background-image:url('/assets/brand/paper.svg'); }
.world-controls button { border:1.5px solid var(--ink); box-shadow:none; }
.gameplay-stage::before { background:var(--sunshine) url('/assets/brand/wax.svg'); }
.gameplay-stage video { box-shadow:3px 5px 0 #34332F20; border-width:2px; }
.play-comic-number { text-shadow:none; -webkit-text-stroke-width:2px; }
.home #science { background:var(--navy) url('/assets/brand/paper.svg'); }
.paper-card,.stat-chart { border:1px solid var(--line); border-radius:22px 17px 23px 18px; box-shadow:none; }
.paper-card { background:var(--card) url('/assets/brand/paper.svg'); }
.home .final-cta { background:#F3E8BD url('/assets/brand/paper.svg'); }
.final-cta .btn { background:var(--navy) url('/assets/brand/wax.svg'); }
.final-cta .btn:hover { background-color:#426B38; }
.final-cta h2 span { color:var(--card); }
/* Keep the existing closing cat slot, now drawn as the canonical crayon cat. */
.final-cta .cat-mini { background:url('/assets/brand/cat-mark.svg') center/contain no-repeat; }
.final-cta .cat-mini > g { opacity:0; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.hello-sticker { direction:ltr; unicode-bidi:isolate; }
#milacat .sprite { background-image:url('/assets/brand/cat-motion.webp?v=20260912-blink'); background-size:768px 1536px; image-rendering:auto; }

.world-island { background-size:contain; background-position:center; }
.world-slide:nth-child(1) .world-island { background-image:url(/assets/brand/worlds/home_base.webp); }
.world-slide:nth-child(2) .world-island { background-image:url(/assets/brand/worlds/home_base_2.webp); }
.world-slide:nth-child(3) .world-island { background-image:url(/assets/brand/worlds/food_market.webp); }
.world-slide:nth-child(4) .world-island { background-image:url(/assets/brand/worlds/animal_forest.webp); }
.world-slide:nth-child(5) .world-island { background-image:url(/assets/brand/worlds/body_island.webp); }
.world-slide:nth-child(6) .world-island { background-image:url(/assets/brand/worlds/family_village.webp); }
.world-slide:nth-child(7) .world-island { background-image:url(/assets/brand/worlds/school_city.webp); }
.world-slide:nth-child(8) .world-island { background-image:url(/assets/brand/worlds/number_valley.webp); }
.world-slide:nth-child(9) .world-island { background-image:url(/assets/brand/worlds/shop_street.webp); }
.world-slide:nth-child(10) .world-island { background-image:url(/assets/brand/worlds/big_city.webp); }
.world-slide:nth-child(11) .world-island { background-image:url(/assets/brand/worlds/transport_station.webp); }
.world-slide:nth-child(12) .world-island { background-image:url(/assets/brand/worlds/feelings_lake.webp); }
.world-slide:nth-child(13) .world-island { background-image:url(/assets/brand/worlds/star_stage.webp); }
.world-slide:nth-child(14) .world-island { background-image:url(/assets/brand/worlds/invention_lab.webp); }
.world-slide:nth-child(15) .world-island { background-image:url(/assets/brand/worlds/weather_mountain.webp); }
.world-slide:nth-child(16) .world-island { background-image:url(/assets/brand/worlds/story_village.webp); }
.world-slide:nth-child(17) .world-island { background-image:url(/assets/brand/worlds/verb_workshop.webp); }
.world-slide:nth-child(18) .world-island { background-image:url(/assets/brand/worlds/describe_garden.webp); }
.world-slide:nth-child(19) .world-island { background-image:url(/assets/brand/worlds/idea_observatory.webp); }
.world-slide:nth-child(20) .world-island { background-image:url(/assets/brand/worlds/time_harbor.webp); }

/* Homepage: cobalt, yellow and ink. The app's own art supplies the other colours. */
.home {
  --paper:#FFFEF9;
  --card:#FFFEF9;
  --paper-deep:#EDEFFB;
  --ink:#191D2B;
  --ink-soft:#525666;
  --navy:#3547EB;
  --sky:#3547EB;
  --sunshine:#FFE447;
  --star-gold:#FFE447;
  --sunshine-dark:#303BC4;
  --correct:#FFE447;
  --correct-dark:#303BC4;
  --plum:#303BC4;
  --line:#D3D4DC;
  --wrong-text:#AC2940;
  background-image:none;
}
.home header {
  background:var(--navy);
  border-color:#FFFFFF38;
}
.home .logo,.home .logo-name,.home .logo-name small,.home header nav a { color:white; }
.home .logo img { background:white; border-radius:16px; padding:4px; }
.home header nav a:hover,.home header nav a[aria-current="page"] { background:var(--sunshine); color:var(--ink); }
.home .nav-button { color:var(--ink); border-color:#FFFFFF80; }
.home .hero {
  background:var(--navy);
  padding-block:56px 70px;
  color:white;
}
.home .hero-grid {
  grid-template-areas:"copy showcase" "details showcase";
  grid-template-rows:auto 1fr;
  gap:26px 54px;
  min-height:620px;
  align-items:start;
}
.home .hero-copy { grid-area:copy; padding:0; }
.home .hero-details { grid-area:details; min-width:0; }
.home .eyebrow { color:white; margin-bottom:24px; }
.home .eyebrow > span:first-child { color:var(--sunshine); font-size:1.2rem; }
.home .beta-label { color:var(--ink); background:var(--sunshine); border:0; border-radius:6px; font-weight:700; }
.home .hero h1 { font:800 clamp(1.9rem,3.1vw,2.8rem)/1.15 Rubik,Arial,sans-serif; letter-spacing:-.045em; color:white; }
.home .hero h1 .crayon {
  margin-top:12px;
  min-height:2.05em;
  color:var(--sunshine);
  font-size:clamp(4rem,6.7vw,6.1rem);
  line-height:.99;
  letter-spacing:-.055em;
}
.home .hero-rotator-text { display:inline-block; max-width:4.2em; background:none; padding:0; }
.home .hero-rotator[data-phrase="1"] .hero-rotator-text,
.home .hero-rotator[data-phrase="2"] .hero-rotator-text { font-size:.72em; max-width:7em; line-height:1.14; }
.home .hero p.lead { margin-top:0; max-width:27em; font-size:1.08rem; color:white; }
.home .hero p.lead strong { color:white; }
.home .hero-ctas { margin-top:24px; }
.home .btn {
  font-weight:800;
  border:2px solid var(--ink);
  border-radius:14px;
  box-shadow:0 6px 0 var(--ink);
  min-height:58px;
  padding:16px 28px;
  background-image:none;
}
.home .btn:hover { box-shadow:0 9px 0 var(--ink); }
.home .btn:active { box-shadow:0 2px 0 var(--ink); }
.home .hero-note,.home .hero-note a { color:white; }
.home .trust-badges { gap:8px 18px; margin-top:22px; }
.home .trust-badge { color:white; padding:0; border:0; background:none; font-size:.8rem; }
.home .hero-showcase { grid-area:showcase; align-self:center; min-height:620px; }
.home .hero-showcase::before {
  inset:68px -18px 28px 60px;
  border:2px solid #FFFFFF40;
  background:none;
  border-radius:44px;
  transform:rotate(-12deg);
}
.home .phone {
  position:absolute;
  width:280px;
  top:16px;
  right:-2px;
  margin:0;
  padding:7px;
  border:3px solid var(--ink);
  background:white;
  border-radius:34px;
  box-shadow:10px 12px 0 var(--ink);
  transform:rotate(7deg);
  z-index:2;
}
.home .phone video { border-radius:24px; }
.home .phone::before { display:none; }
.home .reel-sound,.home .reel-playback { background:var(--ink); }
.arcade-map {
  position:absolute;
  width:212px;
  top:115px;
  left:8px;
  padding:6px;
  border:3px solid var(--ink);
  border-radius:26px;
  background:white;
  box-shadow:8px 10px 0 var(--ink);
  transform:rotate(-10deg);
}
.arcade-map img { display:block; width:100%; height:auto; border-radius:18px; }
.arcade-cat {
  position:absolute;
  width:148px;
  height:148px;
  object-fit:contain;
  bottom:8px;
  left:90px;
  padding:9px;
  background:var(--sunshine);
  border:3px solid var(--ink);
  border-radius:50%;
  transform:rotate(-9deg);
  z-index:3;
}
.arcade-star { position:absolute; color:var(--sunshine); font:100px/1 Arial,sans-serif; left:-22px; bottom:18px; transform:rotate(12deg); }
.home .hello-sticker {
  font:400 2.9rem/1 PatrickHand,sans-serif;
  background:var(--sunshine);
  color:var(--ink);
  top:16px;
  left:-12px;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:9px 16px 13px;
  box-shadow:4px 5px 0 var(--ink);
  transform:rotate(-9deg);
}
.home .daily-sticker {
  left:auto;
  right:-27px;
  bottom:58px;
  width:100px;
  height:100px;
  background:var(--sunshine);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:4px 5px 0 var(--ink);
  border-radius:20px;
  transform:rotate(9deg);
}
.home .daily-sticker strong { font-size:2.9rem; }
.home .showcase-caption { color:white; bottom:-20px; font-size:.8rem; }
.home .word-ribbon { background:var(--sunshine); color:var(--ink); padding:20px 0; border-block:2px solid var(--ink); }
.home .word-ribbon > div { font-family:Rubik,Arial,sans-serif; gap:64px; letter-spacing:-.04em; }
.home .word-ribbon i { color:var(--navy); }
.home .play-story { background:var(--paper); padding-block:96px; }
.home .play-scribbles,.home .scribble-heroes,.home .scribble-games { color:var(--navy); }
.home .play-comic,.home .play-skills { color:var(--ink); }
.home .play-comic-number { color:var(--navy); -webkit-text-stroke:0; text-shadow:3px 3px 0 var(--sunshine); }
.home .play-comic-line + .play-comic-line .play-comic-number { color:var(--navy); }
.home .play-skills { text-decoration-color:var(--sunshine); }
.home .gameplay-stage { max-width:300px; }
.home .gameplay-stage::before { inset:0 -45px 25px; background:var(--navy); border-radius:32px; transform:rotate(7deg); }
.home .gameplay-stage video { border:3px solid var(--ink); box-shadow:8px 10px 0 var(--ink); transform:rotate(-3deg); }
.home .gameplay-label { background:var(--sunshine); color:var(--ink); border:2px solid var(--ink); border-radius:8px; padding:6px 14px; transform:rotate(3deg); }
.home .gameplay-scribble { color:var(--ink); background:var(--sunshine); padding:0 8px; border-radius:8px; z-index:2; }
.home .gameplay-stage figcaption { color:var(--ink-soft); background:var(--paper); padding-top:12px; }
.home .worlds { background:var(--navy); color:white; padding-block:80px 68px; }
.home .worlds .section-title > span { color:var(--ink); background:var(--sunshine); border-radius:10px; padding:.08em .3em .18em; transform:rotate(-2deg); }
.home .world-cover,.home .world-slide:nth-child(n) .world-cover {
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 8px 0 var(--ink);
  color:var(--ink);
}
.home .is-enhanced .world-slide:not(.is-current) .world-cover { filter:none; }
.home .world-index { background:var(--sunshine); padding:6px 14px; border-radius:6px; }
.home .world-island { mix-blend-mode:normal; }
.home .world-caption h3,.home .world-caption p { color:white; }
.home .world-controls button { background:var(--sunshine); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 4px 0 var(--ink); }
.home .world-controls button:hover { background:white; }
.home #science { background:var(--ink); color:white; }
.home #science .section-title { color:var(--sunshine); }
.home #science .research-details > .section-sub,.home #science .research-details > .section-sub a,
.home #science .science-kicker,.home #science .science-kicker strong,.home #science .science-disclaimer { color:white; }
.home .stat-chart,.home .paper-card { border:0; border-radius:20px; background:var(--card); }
.home .chart-bar.is-hero .chart-fill { background:var(--navy); }
.home .chart-bar.is-hero .chart-value { color:var(--navy); }
.home .feature-icon { color:var(--ink); }
.home .paper-link { background:var(--paper-deep); color:var(--navy); border-color:var(--line); }
.home #faq { background:var(--paper); }
.home .faq-list summary::after { color:var(--ink); background:var(--sunshine); border:2px solid var(--ink); border-radius:12px; width:40px; height:40px; display:grid; place-items:center; flex-shrink:0; }
.home .final-cta { background:var(--sunshine); overflow:clip; }
.home .final-cta h2 { font-family:Rubik,Arial,sans-serif; color:var(--ink); }
.home .final-cta h2 span { color:var(--navy); -webkit-text-stroke:0; }
.home .final-cta p { color:var(--ink); }
.home .final-cta .btn { background:var(--navy); color:white; }
.home .final-cta .btn:hover { background:#2838C9; }
.home .final-cta .cat-mini { width:145px; height:145px; background-image:url('/favicon-crayon.webp?v=20261002'); transform:rotate(-8deg); }
.home footer { background:var(--navy); color:white; }
.home .footer-wordmark,.home .footer-inner a,.home .footer-notice { color:white; }
.home .footer-inner { border-color:#FFFFFF50; color:white; }
.home .footer-wordmark > span { color:var(--sunshine); }
.home :focus-visible,.home .btn:focus-visible { outline-color:var(--navy); }
.home header :focus-visible,.home .hero :focus-visible,.home .worlds :focus-visible,
.home #science .research-details > .section-sub a:focus-visible,.home footer :focus-visible { outline-color:var(--sunshine); }
@media(prefers-reduced-motion:no-preference) {
  .home .hero-showcase { animation:arcade-arrive 550ms cubic-bezier(.22,.68,0,1); }
}
@keyframes arcade-arrive {
  from { opacity:0; transform:translateY(18px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media(max-width:1100px) and (min-width:781px) {
  .home .hero-grid { column-gap:40px; }
  .home .phone { width:250px; right:-12px; top:42px; }
  .arcade-map { width:190px; left:-5px; top:132px; }
  .arcade-cat { left:30px; bottom:26px; width:130px; height:130px; }
  .home .hello-sticker { font-size:2.4rem; top:40px; }
  .home .daily-sticker { right:-15px; }
}
@media(max-width:960px) {
  .home header .nav-menu > nav { background:var(--card); border-color:var(--ink); }
  .home header .nav-menu > nav a { color:var(--ink); }
}
@media(max-width:780px) {
  .home .hero { padding-block:34px 48px; }
  .home .hero-grid { grid-template-areas:"copy" "showcase" "details"; grid-template-rows:auto; gap:32px; }
  .home .hero h1 { font-size:clamp(1.8rem,5vw,2.4rem); }
  .home .hero h1 .crayon { font-size:clamp(4rem,12vw,5.8rem); min-height:2.05em; }
  .home .eyebrow { margin-bottom:20px; }
  .home .hero p.lead { font-size:1rem; }
  .home .hero-showcase { width:100%; max-width:480px; min-height:590px; margin-bottom:12px; }
  .home .phone { width:260px; right:8px; top:18px; }
  .arcade-map { width:200px; left:0; top:112px; }
  .arcade-cat { left:50px; bottom:10px; width:132px; height:132px; }
  .home .hello-sticker { left:0; top:22px; font-size:2.4rem; }
  .home .daily-sticker { right:0; bottom:52px; width:88px; height:88px; }
  .home .daily-sticker strong { font-size:2.5rem; }
  .arcade-star { left:-12px; bottom:15px; font-size:70px; }
  .home .word-ribbon > div { justify-content:center; gap:24px; padding-inline:16px; }
  .home .play-story { padding-block:64px; }
  .home .gameplay-stage { max-width:270px; }
  .home .gameplay-stage::before { inset-inline:-25px; }
  .home .worlds { padding-block:60px 48px; }
  .home .world-cover { border-radius:18px; }
}
@media(max-width:400px) {
  .home .hero h1 .crayon { font-size:clamp(3.5rem,16vw,4rem); }
  .home .hero h1 { font-size:1.8rem; }
  .home .trust-badges { gap:8px 12px; }
  .home .trust-badge { font-size:.75rem; }
  .home .hero-showcase { min-height:500px; }
  .home .phone { width:218px; right:0; top:18px; border-radius:28px; }
  .home .phone video { border-radius:19px; }
  .arcade-map { width:164px; left:-7px; top:103px; border-radius:22px; }
  .arcade-map img { border-radius:13px; }
  .arcade-cat { width:108px; height:108px; left:15px; bottom:9px; }
  .home .hello-sticker { top:13px; left:-6px; font-size:2rem; padding:8px 10px 11px; }
  .home .daily-sticker { width:78px; height:82px; right:-6px; bottom:34px; font-size:.7rem; }
  .home .daily-sticker strong { font-size:2.2rem; }
  .arcade-star { display:none; }
  .home .hero-showcase::before { inset:42px 0 18px 10px; }
  .home .word-ribbon > div { gap:18px; font-size:1.4rem; }
  .home .gameplay-stage { max-width:240px; }
}

/* Inner pages: the homepage's cobalt, yellow and ink, applied to reading layouts. */
body.content-page,body.page-invite {
  --paper:#FFFEF9;
  --card:#FFFEF9;
  --paper-deep:#EDEFFB;
  --ink:#191D2B;
  --ink-soft:#525666;
  --navy:#3547EB;
  --sky:#3547EB;
  --sunshine:#FFE447;
  --star-gold:#FFE447;
  --plum:#303BC4;
  --line:#D3D4DC;
  --wrong-text:#AC2940;
  --page-tint:var(--paper-deep);
  background:var(--paper);
  background-image:none;
  color:var(--ink);
}
body.content-page a { color:var(--navy); }
body.content-page header.site { background:var(--navy); border-color:#FFFFFF38; }
body.content-page .logo,body.content-page .logo-name,body.content-page .logo-name small,body.content-page header.site nav a { color:white; }
body.content-page .logo img { background:white; border-radius:16px; padding:4px; }
body.content-page header.site nav a:hover,body.content-page header.site nav a[aria-current] { background:var(--sunshine); color:var(--ink); }
body.content-page header nav a[data-section] { background:transparent; }
body.content-page .nav-button { color:white; border-color:#FFFFFF80; }
body.content-page .crumbs,body.content-page .crumbs a { color:var(--ink-soft); }

body.content-page .page-hero,
.page-science .page-hero,
.page-topic .page-hero {
  background:var(--navy);
  background-image:none;
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow:8px 10px 0 var(--ink);
  color:white;
}
body.content-page .page-hero :is(h1,h1 a) { color:white; }
body.content-page .page-hero .eyebrow { color:var(--sunshine); }
body.content-page .page-hero :is(.lead,.page-meta,.meta,p) { color:white; }
body.content-page .page-hero a { color:var(--sunshine); }
body.content-page h2,body.content-page h3 { color:var(--ink); }

body.content-page .btn,body.content-page .button,.page-invite a {
  font-weight:800;
  color:var(--ink);
  background:var(--sunshine);
  background-image:none;
  border:2px solid var(--ink);
  border-radius:14px;
  box-shadow:0 6px 0 var(--ink);
  text-decoration:none;
}
body.content-page .btn:hover,body.content-page .button:hover { box-shadow:0 9px 0 var(--ink); background:var(--sunshine); }
body.content-page .btn:active,body.content-page .button:active { box-shadow:0 2px 0 var(--ink); }

body.content-page :is(.page-toc,.note,details,.game-list li,.topic-cards a,.cards a,.word,.table-scroll,.comparison-scroll) {
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:20px;
  box-shadow:4px 5px 0 var(--ink);
}
body.content-page .page-toc a { color:var(--ink-soft); }
body.content-page .page-toc a:hover { color:var(--navy); }
body.content-page .page-toc li + li,body.content-page details[open] summary { border-color:var(--line); }
body.content-page .topic-cards .topic-label,body.content-page .topic-cards li:nth-child(n) .topic-label { background:var(--sunshine); color:var(--ink); border-radius:10px; }
body.content-page .word-anchor { color:var(--navy); }
body.content-page .lesson-nav a { background:var(--card); border:2px solid var(--ink); color:var(--ink); }
body.content-page .lesson-nav a:hover { background:var(--sunshine); }

body.content-page .steps-overview li,body.content-page .steps-overview li:nth-child(n) { background:var(--card); border:2px solid var(--ink); box-shadow:4px 5px 0 var(--ink); }
body.content-page .steps-overview li:nth-child(2) { background:var(--sunshine); }
body.content-page .steps-overview li:nth-child(3) { background:var(--paper-deep); }
body.content-page .steps-overview li::before { color:var(--navy); }
body.content-page .game-preview { background:var(--paper-deep); border:2px solid var(--ink); }
body.content-page .caveat { background:var(--paper-deep); border-inline-start-color:var(--navy); }
body.content-page .refs { background:var(--paper-deep); }
body.content-page .about-photo img { border:3px solid var(--ink); box-shadow:8px 10px 0 var(--sunshine); }

body.content-page .next-step {
  background:var(--sunshine);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:8px 10px 0 var(--ink);
}
body.content-page .next-step :is(h2,p) { color:var(--ink); }
body.content-page .next-step .btn { background:var(--navy); color:white; }
body.content-page .next-step .btn:hover { background:#2838C9; }

body.content-page footer.site { background:var(--navy); color:white; }
body.content-page footer.site :is(a,p,.footer-brand) { color:white; }
body.content-page footer.site .footer-links { border-color:#FFFFFF50; }
body.content-page :focus-visible { outline-color:var(--navy); }
body.content-page :is(header,footer,.page-hero) :focus-visible { outline-color:var(--sunshine); }
@media(max-width:960px) {
  body.content-page header .nav-menu > nav { background:var(--card); border-color:var(--ink); }
  body.content-page header .nav-menu > nav a { color:var(--ink); }
}
@media(max-width:760px) {
  body.content-page .page-hero { box-shadow:5px 6px 0 var(--ink); }
}

body.page-invite main { border:3px solid var(--ink); box-shadow:8px 10px 0 var(--ink); }
body.page-invite a.secondary { background:var(--paper-deep); }