/* Flexible layouts for narrow phones, touch tablets, zoom and wide monitors. */
html{scroll-padding-top:20px}body{overflow-wrap:break-word}main{width:100%;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}img,svg{max-width:100%}header,footer{flex-wrap:wrap}header>* ,main :is(.two,.grid,.path-grid,.activity-grid,.skill-catalog,.home-hero,.try-math,.family-note,.classroom-banner,.stats)>*{min-width:0}header nav{flex-wrap:wrap;align-items:center}header nav a{display:inline-flex;align-items:center;min-height:44px}.head-actions{flex-wrap:wrap}.head-actions select{font-size:16px;min-height:44px}.head-actions #profile{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.head-actions button{font-size:13px;min-height:44px}input,select,textarea{font-size:max(16px,1em);min-width:0}.toolbar button,.apples button{min-height:44px;min-width:44px}.practice-head,.answer-row,.room .section-head{flex-wrap:wrap;gap:12px}.answer-row label{min-width:100px}.badge{white-space:normal;overflow-wrap:anywhere}.scroll{max-width:100%;overscroll-behavior-x:contain}.report{min-width:540px}.check-grid{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}.check-grid label{min-height:44px}.catalog-card p,.catalog-card small,.skill-state,.path-tag,.hero-benefits,.activity-card p,.world-label small{font-size:12px}.catalog-card button{font-size:14px}.skill-catalog{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.room{width:100%}dialog{max-height:90dvh;overflow:auto;padding-top:55px}.close{min-width:44px;min-height:44px}#toast{bottom:max(20px,env(safe-area-inset-bottom));overflow-wrap:anywhere}.home-hero h1 span{white-space:normal}.classroom-banner .button-link{min-height:44px}.text-link,.library-extras a{display:inline-flex;align-items:center;min-height:44px}.empty{padding:clamp(20px,4vw,40px)}
@media(min-width:1101px){main{padding-left:35px;padding-right:35px}.head-actions{flex:0 1 auto}header nav{margin-left:auto}}
@media(min-width:1600px){main{max-width:1500px}.home-hero h1{font-size:clamp(59px,3.5vw,68px)}.hero-copy>p{font-size:19px;max-width:550px}.path-card p{max-width:none;font-size:15px}}
@media(max-width:900px){.activity-grid{grid-template-columns:1fr}.activity-card{padding:20px;gap:18px}.activity-card h3{font-size:18px}.path-grid{grid-template-columns:1fr}.path-card p{min-height:0;max-width:none}.home-hero{grid-template-columns:1fr}.hero-copy>p{max-width:600px}.hero-world{max-width:640px;margin:auto}.home-hero h1{max-width:650px}.learning-welcome{flex-wrap:wrap}.try-math,.classroom-banner,.family-note{gap:25px;padding:28px}.two{grid-template-columns:1fr}}
@media(max-width:480px){header{padding:14px max(16px,env(safe-area-inset-left));gap:10px}header nav{width:100%;margin:0;justify-content:space-between;gap:8px!important;font-size:14px}.head-actions{display:grid;grid-template-columns:minmax(100px,1.2fr) 44px minmax(0,1fr);gap:8px;width:100%}.head-actions select{max-width:100%;width:100%}.head-actions #profile{max-width:100%;font-size:13px}.head-actions #grownup{grid-column:1/-1;font-size:14px}.home-hero h1{font-size:clamp(31px,9vw,39px)}.home-hero .actions{align-items:stretch;flex-direction:column}.primary-cta{justify-content:space-between}.skill-catalog{grid-template-columns:1fr}.catalog-top{flex-direction:row;align-items:center}.catalog-card h3,.catalog-card p{min-height:0}.catalog-card{padding:20px}.stats{grid-template-columns:1fr}.stats .card{font-size:14px;padding:18px}.tables{grid-template-columns:repeat(4,minmax(0,1fr))}.subject-tabs button{font-size:13px;padding:10px 6px}.sample-array{gap:6px}.sample-array>span{padding:9px}.try-math,.classroom-banner{padding:24px 16px}.welcome-stats{flex-wrap:wrap;gap:14px}.welcome-stats span{font-size:12px}.question{font-size:clamp(28px,8vw,38px);overflow-wrap:anywhere}.card{padding:18px}.videos{grid-template-columns:repeat(2,minmax(0,1fr))}.room{padding:12px}.room .toolbar{gap:6px}.room .toolbar button{flex:1 1 auto}.banner{padding:22px}.form{width:100%}}
@media(max-height:500px) and (orientation:landscape){dialog{max-height:95dvh}.hero-world img{min-height:0}canvas{height:220px}}
@media print{.report{min-width:0}main{max-width:none}}

.toolbar button[aria-pressed=true]{background:var(--app-purple);color:white;box-shadow:inset 0 0 0 2px #fff5}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid #b66b00;outline-offset:3px}

.math-garden{position:relative;background:#dcecff;border:6px solid var(--app-sky);border-radius:32px;overflow:hidden;box-shadow:0 18px 38px #22304b12;padding-bottom:48px}.math-garden>svg{display:block;width:100%;height:auto}.math-garden text{font-family:ui-rounded,'Avenir Next',system-ui,sans-serif}.motion-control{position:absolute;bottom:8px;right:12px;min-height:40px;background:white;color:#25457b;font-size:12px;padding:8px 14px;border:1px solid #bdd3ec;border-radius:99px}.hero-world:has(.math-garden){padding-bottom:45px}.hero-world:has(.math-garden) .world-label{bottom:0;left:15px}.counting-dot{transform-box:fill-box;transform-origin:center;animation:counting-pop 5s ease-in-out infinite;animation-delay:var(--delay)}.garden-bloom{transform-box:fill-box;transform-origin:bottom center;animation:bloom-sway 6s ease-in-out infinite;animation-delay:var(--delay)}.garden-spark{animation:spark-glow 4s ease-in-out infinite}.math-garden.paused *{animation-play-state:paused!important}@keyframes counting-pop{0%,65%,100%{transform:scale(1)}20%,35%{transform:scale(.65)}48%{transform:scale(1.08)}}@keyframes bloom-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes spark-glow{0%,100%{opacity:.45}50%{opacity:1}}.flowerbed{background:linear-gradient(#f2f7ff,#cff5d9)}
@media(prefers-reduced-motion:reduce){.math-garden *{animation:none!important}}@media(max-width:480px){.math-garden{border-width:4px;border-radius:24px}.world-label{max-width:calc(100% - 25px)}.world-label small{font-size:10px}}

/* Scroll-triggered chart fills and restrained entrances. Content stays readable. */
.scroll-graphic{transition:transform .75s cubic-bezier(.2,.75,.2,1);transform:translateY(14px)}
.scroll-graphic.motion-visible{transform:translateY(0)}
.parent-preview.scroll-graphic i:after,.skill-meter.scroll-graphic i{transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.parent-preview.motion-visible i:after,.skill-meter.motion-visible i{transform:scaleX(1)}
.parent-preview div:nth-child(3) i:after{transition-delay:.18s}
.parent-preview div:nth-child(4) i:after{transition-delay:.36s}
.sample-array.scroll-graphic i{transform:scale(.4);transition:transform .65s cubic-bezier(.2,1.4,.4,1)}
.sample-array.motion-visible i{transform:scale(1)}

.classroom-art.scroll-graphic .mini-board path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.4s ease .2s}
.classroom-art.motion-visible .mini-board path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.scroll-graphic,.scroll-graphic *,.scroll-graphic :after{transition:none!important;transform:none!important}.classroom-art .mini-board path{stroke-dashoffset:0!important}}
@media print{.scroll-graphic,.scroll-graphic *,.scroll-graphic :after{transform:none!important;transition:none!important}}

/* Fluid desktop canvas: fill the viewport rather than a fixed 1500px column. */
@media(min-width:901px){
  :root{--page-gutter:clamp(28px,3.2vw,180px)}
  main{max-width:none;width:100%;padding:clamp(32px,2.4vw,100px) var(--page-gutter) clamp(60px,5vw,160px)}
  header,footer{max-width:none;width:100%;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,160px);padding-bottom:clamp(45px,4vw,130px)}
  .hero-world{width:100%;max-width:none;margin:0}
  .home-hero h1{font-size:clamp(44px,3.65vw,156px);max-width:none;line-height:1.12}
  .hero-copy>p{font-size:clamp(17px,1.05vw,32px);max-width:52ch}
  .path-grid,.activity-grid{gap:clamp(20px,1.5vw,60px)}
  .path-card{padding:clamp(26px,2vw,72px)}
  .path-card h3,.activity-card h3{font-size:clamp(22px,1.35vw,44px)}
  .path-card p,.activity-card p{font-size:clamp(15px,.95vw,26px)}
  .learning-welcome{padding:clamp(24px,1.8vw,64px)}
  .learning-welcome h2,.section-head h2,.family-note h2,.classroom-banner h2,.try-math h2{font-size:clamp(28px,2vw,72px)}
  .welcome-stats b{font-size:clamp(30px,2vw,66px)}
  .family-note,.try-math,.classroom-banner{gap:clamp(28px,4vw,140px)}
  .parent-preview{padding:clamp(30px,2.4vw,80px)}
  .parent-preview div{margin:clamp(22px,1.8vw,50px) 0;font-size:clamp(14px,.9vw,24px)}
  .parent-preview b{width:clamp(80px,6vw,170px)}
  .parent-preview i{height:clamp(10px,.65vw,20px)}
}
@media(min-width:1800px){
  header{min-height:110px;gap:clamp(24px,1.5vw,60px)}
  header .brand{font-size:clamp(26px,1.3vw,44px)}
  header .brand img{width:clamp(45px,2.4vw,76px);height:auto}
  header nav,.head-actions select{font-size:clamp(16px,.85vw,25px)}
  .head-actions button{font-size:clamp(14px,.75vw,22px)}
  .hero-benefits,.text-link,.primary-cta,.path-bottom{font-size:clamp(14px,.8vw,24px)}
  .hero-copy .eyebrow{font-size:clamp(10px,.55vw,18px)}
}

.scroll-graphic.motion-reset,.scroll-graphic.motion-reset *,.scroll-graphic.motion-reset :after{transition:none!important}

/* Count the dots in sequence; replay on section hover, dot tap and scroll return. */
.sample-array.scroll-graphic i{opacity:.15;transform:translateY(12px) scale(.15);transition:transform .55s cubic-bezier(.2,1.5,.4,1),opacity .3s;transition-delay:var(--dot-delay,0ms)}
.sample-array.scroll-graphic.motion-visible i{opacity:1;transform:translateY(0) scale(1)}
.sample-array[role=button]{cursor:pointer;border-radius:16px}
.sample-array[role=button]:focus-visible{outline:3px solid #1f54cc;outline-offset:6px}
@media(prefers-reduced-motion:reduce),print{.sample-array.scroll-graphic i{opacity:1;transform:none;transition:none}}

.footer-links,.info-links{display:flex;flex-wrap:wrap;gap:12px 24px}.footer-links a,.info-links a{display:inline-flex;align-items:center;min-height:44px}.info-page{max-width:1280px;margin:0 auto;padding-block:30px 60px}.info-heading{display:block;background:none;padding:32px 0 12px;border:0;position:static}.info-heading h1{font-size:clamp(32px,4vw,64px);max-width:20ch;margin:16px 0;line-height:1.1}.info-intro{font-size:clamp(18px,1.3vw,24px);max-width:65ch;line-height:1.7}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}.info-page .card{margin-block:16px;min-width:0}.info-grid .card{margin:0}.info-page p{line-height:1.75;overflow-wrap:anywhere}.info-page h2{font-size:24px}.info-page a:not(.button-link){text-decoration:underline;text-underline-offset:4px}.info-page .button-link{display:inline-flex;min-height:44px;align-items:center}.info-note{font-size:14px}.info-faq details{margin:12px 0;background:white;border-radius:18px;padding:20px;border:1px solid #d6e8fc}.info-faq summary{font-weight:700;cursor:pointer;min-height:44px;align-content:center}.info-links{border-top:1px solid #c8d8ee;margin-top:36px;padding-top:24px}.info-links [aria-current=page]{font-weight:800}footer{flex-wrap:wrap;gap:20px}.info-page a:focus-visible,.info-page summary:focus-visible{outline:3px solid #1f54cc;outline-offset:4px}@media(max-width:640px){.info-grid{grid-template-columns:1fr}.info-page{padding-top:16px}.info-heading{padding-top:24px}.footer-links{gap:8px 20px}}

.head-actions{flex-wrap:wrap}#register[hidden]{display:none}@media(max-width:480px){.head-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.head-actions #sound{justify-self:end}.head-actions #profile{max-width:100%}.head-actions #grownup{grid-column:auto}.head-actions button{white-space:normal;min-height:44px}}