/* -- JVDS Site Nav -- */

:root{
  --beige:#F0EAD6;--rose:#BC4749;--teal:#70A3A7;--charcoal:#403B33;
  --c1:#FF6B6B;--c2:#FFD93D;--c3:#6BCB77;--c4:#4D96FF;--c5:#C77DFF;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Fredoka',cursive;background:var(--charcoal);color:var(--beige);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:'Fredoka',cursive;cursor:pointer;}
img{display:block;max-width:100%;}

/* --- HERO --- */
.hero{padding:60px 20px 88px;text-align:center;background:linear-gradient(160deg,#fff8ee 0%,#ffeee0 50%,#fff0f8 100%);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,107,107,.12) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(107,203,119,.12) 0%,transparent 40%);pointer-events:none;}
.hero-characters{display:flex;justify-content:center;gap:20px;margin-bottom:20px;position:relative;}
.hero-char{font-size:4rem;animation:hero-bounce 2s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15));}
.hero-char-1{animation-delay:0s;}
.hero-char-2{animation-delay:.3s;}
.hero-char-3{animation-delay:.6s;}
@keyframes hero-bounce{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-15px) scale(1.1);}}
.hero h1{font-size:clamp(2.8rem,8vw,4.5rem);font-weight:700;color:var(--charcoal);line-height:1.1;margin-bottom:12px;}
.hero h1 span{color:var(--rose);display:inline-block;animation:pulse-glow 3s ease-in-out infinite;}
@keyframes pulse-glow{0%,100%{text-shadow:0 0 0 rgba(188,71,73,0);}50%{text-shadow:0 0 20px rgba(188,71,73,.3);}}
.hero-sub{font-size:1.15rem;color:rgba(64,59,51,.7);max-width:520px;margin:0 auto 28px;line-height:1.65;font-family:'Inter',sans-serif;font-weight:500;}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.hero-cta{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:20px;font-family:'Fredoka',cursive;font-size:1.2rem;font-weight:700;color:#fff;background:var(--rose);box-shadow:0 6px 0 #9b3a3c,0 8px 20px rgba(188,71,73,.3);transition:all .2s;cursor:pointer;text-decoration:none;}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 9px 0 #9b3a3c,0 12px 24px rgba(188,71,73,.35);}
.hero-cta:active{transform:translateY(2px);box-shadow:0 3px 0 #9b3a3c,0 4px 12px rgba(188,71,73,.25);}
.hero-cta-alt{background:var(--teal);box-shadow:0 6px 0 #5a8a8e,0 8px 20px rgba(112,163,167,.3);}
.hero-cta-alt:hover{box-shadow:0 9px 0 #5a8a8e,0 12px 24px rgba(112,163,167,.35);}
.hero-cta-alt:active{box-shadow:0 3px 0 #5a8a8e,0 4px 12px rgba(112,163,167,.25);}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.hero-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 20px;font-size:.9rem;font-weight:700;}

/* --- DRAWING STUDIO SECTION --- */
.draw-section{box-sizing:border-box;padding:44px 20px 20px;max-width:1000px;margin:0 auto;width:100%;}
.section-head{text-align:center;margin-bottom:28px;}
.section-head h2{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:700;color:var(--charcoal);margin-bottom:8px;}
.section-head p{font-size:1rem;color:rgba(64,59,51,.55);font-family:'Inter',sans-serif;}
.sh-tag{display:inline-block;background:var(--rose);color:#fff;border-radius:999px;padding:4px 16px;font-size:.82rem;font-weight:700;margin-bottom:12px;}

.draw-studio{background:#fff;border-radius:28px;box-shadow:0 8px 0 rgba(64,59,51,.1),0 12px 40px rgba(0,0,0,.08);overflow:hidden;}
.draw-toolbar{display:flex;align-items:center;gap:10px;padding:16px 18px;background:#faf6ec;border-bottom:2px solid rgba(64,59,51,.08);flex-wrap:wrap;}
.draw-tool-group{display:flex;align-items:center;gap:8px;}
.draw-sep{width:2px;height:34px;background:rgba(64,59,51,.12);margin:0 6px;flex-shrink:0;border-radius:1px;}
.tool-btn{width:48px;height:48px;border-radius:14px;border:2px solid transparent;background:rgba(64,59,51,.06);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.tool-btn:hover{background:rgba(64,59,51,.13);transform:translateY(-2px);}
.tool-btn.active{background:#fff;border-color:var(--rose);box-shadow:0 3px 0 rgba(188,71,73,.2);}
.brush-btn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(64,59,51,.15);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.brush-btn:hover{transform:scale(1.1);}
.brush-btn.active{border-color:var(--rose);box-shadow:0 0 0 3px rgba(188,71,73,.25);}
.brush-dot{border-radius:50%;background:var(--charcoal);}
.color-palette{display:flex;gap:6px;flex-wrap:wrap;}
.color-swatch-btn{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;flex-shrink:0;}
.color-swatch-btn:hover{transform:scale(1.2);}
.color-swatch-btn.active{border-color:var(--charcoal);transform:scale(1.2);box-shadow:0 0 0 3px rgba(255,255,255,.8) inset;}
.draw-action-btn{padding:10px 18px;border-radius:12px;border:none;font-family:'Fredoka',cursive;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;}
.draw-action-btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
.btn-undo{background:rgba(64,59,51,.08);color:var(--charcoal);}
.btn-clear{background:#ffe0e0;color:#c0392b;}
.btn-save{background:#d4f8d4;color:#2d7a34;}
.stamp-tray{display:flex;gap:6px;flex-wrap:wrap;}
.stamp-btn{width:44px;height:44px;border-radius:12px;border:2px solid transparent;background:rgba(64,59,51,.05);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.stamp-btn:hover{background:rgba(64,59,51,.13);transform:scale(1.1);}
.stamp-btn.active{background:#fff;border-color:var(--c4);box-shadow:0 3px 0 rgba(77,150,255,.2);}
.draw-canvas-wrap{position:relative;background:#fff;line-height:0;}
#drawCanvas{display:block;width:100%;cursor:crosshair;touch-action:none;}
.draw-hint{text-align:center;font-size:.88rem;color:rgba(64,59,51,.45);padding:10px;font-family:'Inter',sans-serif;}

/* --- ACTIVITY GRID --- */
.activities-section{padding:30px 20px 70px;max-width:1000px;margin:0 auto;}
/* These three sections sit directly on the dark page chrome (no white card behind
   their heading), unlike every other section on this page, so their heading text
   needs to be light, not the dark charcoal used everywhere else. */
.draw-section .section-head h2, .activities-section .section-head h2{color:var(--beige);}
.draw-section .section-head p, .activities-section .section-head p{color:rgba(240,234,214,.55);}
.activities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}

.act-card{background:#fff;border-radius:28px;overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;box-shadow:0 6px 0 rgba(64,59,51,.1);position:relative;}
.act-card:hover,.act-card:focus{transform:translateY(-8px) scale(1.02);box-shadow:0 14px 0 rgba(64,59,51,.1),0 20px 40px rgba(0,0,0,.1);}
.act-card:active{transform:translateY(-2px) scale(0.98);box-shadow:0 3px 0 rgba(64,59,51,.1);}
.act-card-top{padding:32px 24px 18px;text-align:center;}
.act-emoji{font-size:4rem;margin-bottom:12px;display:block;transition:transform .3s;}
.act-card:hover .act-emoji{transform:scale(1.15) rotate(-5deg);}
.act-char{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;color:var(--charcoal);opacity:.6;}
.act-title{font-size:1.5rem;font-weight:700;margin-bottom:8px;color:var(--charcoal);}
.act-desc{font-size:.9rem;color:rgba(64,59,51,.55);font-family:'Inter',sans-serif;line-height:1.55;}
.act-footer{padding:16px 24px 22px;display:flex;align-items:center;justify-content:space-between;}
.act-age{font-size:.78rem;font-weight:700;color:rgba(64,59,51,.4);font-family:'Inter',sans-serif;}
.act-btn{padding:12px 28px;border:none;border-radius:14px;font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:700;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.2);transition:all .2s;cursor:pointer;}
.act-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.2);}
.act-btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.2);}
.act-stars-row{display:flex;gap:6px;padding:0 24px 16px;}
.star-pip{font-size:1.3rem;opacity:.2;transition:opacity .2s;}
.star-pip.lit{opacity:1;animation:star-pop .3s ease;}
@keyframes star-pop{0%{transform:scale(0);}50%{transform:scale(1.3);}100%{transform:scale(1);}}

/* --- FULL-SCREEN MODAL --- */
.act-modal{position:fixed;inset:0;z-index:500;display:none;flex-direction:column;overflow:hidden;background:var(--beige);}
.act-modal.open{display:flex;animation:modal-slide-in .3s ease;}
@keyframes modal-slide-in{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes modal-slide-out{from{transform:translateY(0);opacity:1;}to{transform:translateY(100%);opacity:0;}}
.act-modal-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:3px solid rgba(0,0,0,.06);flex-shrink:0;background:#fff;}
.am-back{background:rgba(64,59,51,.1);border:none;border-radius:14px;padding:12px 22px;font-size:1.1rem;font-weight:700;color:var(--charcoal);transition:all .15s;font-family:'Fredoka',cursive;cursor:pointer;}
.am-back:hover{background:rgba(64,59,51,.18);transform:translateX(-3px);}
.am-title{font-size:1.25rem;font-weight:700;flex:1;color:var(--charcoal);}
.am-score{font-size:1rem;font-weight:700;color:var(--rose);background:rgba(188,71,73,.1);padding:6px 14px;border-radius:10px;}
.act-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;}

/* --- ACTIVITY CHROME --- */
.ac{max-width:640px;margin:0 auto;padding:20px 16px 40px;}

/* --- CONFETTI --- */
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:9999;}

/* --- BIG TAP BUTTONS --- */
.tap-grid{display:grid;gap:16px;margin:18px 0;}
.tap-grid-2{grid-template-columns:1fr 1fr;}
.tap-grid-3{grid-template-columns:1fr 1fr 1fr;}
.tap-btn{padding:24px 14px;border:4px solid transparent;border-radius:24px;font-family:'Fredoka',cursive;font-size:1.4rem;font-weight:700;background:#f5f0e8;color:var(--charcoal);transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 0 rgba(0,0,0,.1);min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
.tap-btn:hover:not(:disabled){transform:translateY(-5px) scale(1.03);box-shadow:0 11px 0 rgba(0,0,0,.1);}
.tap-btn:active:not(:disabled){transform:translateY(2px) scale(0.97);box-shadow:0 2px 0 rgba(0,0,0,.1);}
.tap-btn .btn-icon{font-size:2.6rem;line-height:1;}
.tap-btn .btn-label{font-size:1.1rem;}
.tap-btn.correct{background:#d4f8d4;border-color:#6BCB77;box-shadow:0 6px 0 #4a9b55;animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.tap-btn.wrong{background:#ffe0e0;border-color:#FF6B6B;animation:shake .4s ease;}
.tap-btn:disabled{cursor:default;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* --- QUESTION BANNER --- */
.q-banner{background:#fff;border-radius:22px;padding:24px 26px;margin-bottom:18px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.06);border:3px solid rgba(64,59,51,.05);}
.q-char{font-size:3.5rem;margin-bottom:10px;display:block;animation:bounce-in .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes bounce-in{0%{transform:scale(0.3) translateY(30px);opacity:0;}60%{transform:scale(1.15) translateY(-5px);}100%{transform:scale(1) translateY(0);opacity:1;}}
.q-text{font-size:1.5rem;font-weight:700;color:var(--charcoal);line-height:1.3;}
.q-sub{font-size:.95rem;color:rgba(64,59,51,.5);font-family:'Inter',sans-serif;margin-top:6px;}

/* --- DECORATIVE SCENE PANEL (atmospheric, never reveals the answer) --- */
.tiny-scene{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 24px;padding:28px 18px;background:#fff;border-radius:24px;margin-bottom:18px;box-shadow:0 4px 0 rgba(0,0,0,.08);}
.tiny-scene span{font-size:4rem;line-height:1;display:inline-block;animation:scene-float 2.5s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));}
.tiny-scene span:nth-child(2){animation-delay:.3s;}
.tiny-scene span:nth-child(3){animation-delay:.6s;}
.tiny-scene span:nth-child(4){animation-delay:.9s;}
@keyframes scene-float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-12px) scale(1.08);}}
@media(max-width:420px){.tiny-scene span{font-size:3.2rem;}}

/* --- PROGRESS DOTS --- */
.prog-dots{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap;}
.prog-dot{width:18px;height:18px;border-radius:50%;background:rgba(64,59,51,.12);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.prog-dot.ok{background:#6BCB77;transform:scale(1.15);box-shadow:0 2px 0 #4a9b55;}
.prog-dot.bad{background:#FF6B6B;box-shadow:0 2px 0 #c0392b;}
.prog-dot.cur{background:var(--c2);box-shadow:0 0 0 4px rgba(255,217,61,.35);animation:pulse-dot 1s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

/* --- FEEDBACK LINE --- */
.fb-line{border-radius:16px;padding:16px 20px;font-size:1.15rem;font-weight:700;text-align:center;display:none;margin-top:12px;animation:fb-slide-in .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes fb-slide-in{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.fb-line.show{display:block;}
.fb-line.ok{background:#d4f8d4;color:#2d7a34;border:2px solid #6BCB77;}
.fb-line.bad{background:#ffe0e0;color:#c0392b;border:2px solid #FF6B6B;}

/* --- COUNTING --- */
.count-objects{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:20px;background:#fff;border-radius:22px;margin-bottom:18px;min-height:120px;box-shadow:0 4px 0 rgba(0,0,0,.06);}
.count-obj{font-size:2.8rem;line-height:1;cursor:pointer;transition:all .2s;user-select:none;}
.count-obj:hover{transform:scale(1.25);}
.count-obj.tapped{transform:scale(1.35);filter:drop-shadow(0 0 8px gold);animation:count-tap .3s ease;}
@keyframes count-tap{0%{transform:scale(1);}50%{transform:scale(1.4);}100%{transform:scale(1.35);}}
.count-num-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.count-num-btn{width:70px;height:70px;border-radius:18px;border:4px solid transparent;font-family:'Fredoka',cursive;font-size:1.8rem;font-weight:700;background:#f5f0e8;color:var(--charcoal);box-shadow:0 6px 0 rgba(0,0,0,.1);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.count-num-btn:hover:not(:disabled){transform:translateY(-5px);box-shadow:0 11px 0 rgba(0,0,0,.1);}
.count-num-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.1);}
.count-num-btn.correct{background:#d4f8d4;border-color:#6BCB77;box-shadow:0 6px 0 #4a9b55;}
.count-num-btn.wrong{background:#ffe0e0;border-color:#FF6B6B;animation:shake .4s ease;}

/* --- COLOUR SWATCHES --- */
.colour-swatch{width:100%;aspect-ratio:1.2;border-radius:22px;border:4px solid transparent;transition:all .2s;box-shadow:0 6px 0 rgba(0,0,0,.08);cursor:pointer;}
.colour-swatch:hover:not(:disabled){transform:scale(1.08) translateY(-5px);}
.colour-swatch:active:not(:disabled){transform:scale(0.95);}
.colour-swatch.correct{border-color:#fff;box-shadow:0 0 0 5px #6BCB77,0 6px 0 rgba(0,0,0,.08);animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.colour-swatch.wrong{animation:shake .4s ease;}

/* --- SHAPE CARDS --- */
.shape-card{padding:18px;background:#f5f0e8;border-radius:22px;border:4px solid transparent;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.08);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);}
.shape-card:hover:not(:disabled){transform:translateY(-6px) scale(1.03);}
.shape-card:active:not(:disabled){transform:translateY(2px) scale(0.97);}
.shape-card.correct{background:#d4f8d4;border-color:#6BCB77;animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.shape-card.wrong{background:#ffe0e0;border-color:#FF6B6B;animation:shake .4s ease;}
.shape-svg{width:80px;height:80px;display:block;margin:0 auto 8px;}

/* --- PHONICS --- */
.phon-letter{font-size:7rem;font-weight:700;text-align:center;padding:20px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);line-height:1;animation:letter-pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes letter-pop{from{transform:scale(0.5) rotate(-10deg);opacity:0;}to{transform:scale(1) rotate(0deg);opacity:1;}}
.phon-say{font-size:.9rem;color:rgba(64,59,51,.45);font-family:'Inter',sans-serif;text-align:center;margin-bottom:16px;}

/* --- ADDITION --- */
.add-scene{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:20px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);}
.add-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:160px;}
.add-group .add-obj{font-size:2.2rem;animation:add-bounce .3s ease;}
@keyframes add-bounce{from{transform:scale(0);}to{transform:scale(1);}}
.add-op{font-size:2.8rem;font-weight:700;color:var(--charcoal);}

/* --- PATTERN --- */
.pattern-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:22px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);min-height:90px;align-items:center;}
.pat-item{font-size:2.6rem;line-height:1;animation:pat-appear .3s ease;}
@keyframes pat-appear{from{transform:scale(0);}to{transform:scale(1);}}
.pat-blank{width:58px;height:58px;background:rgba(64,59,51,.08);border:3px dashed rgba(64,59,51,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:rgba(64,59,51,.3);animation:pulse-dot 1s ease-in-out infinite;}

/* --- SIZE COMPARE --- */
.size-scene{display:flex;gap:24px;justify-content:center;align-items:flex-end;padding:24px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);}
.size-item{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;border:4px solid transparent;border-radius:20px;padding:16px;transition:all .2s cubic-bezier(.34,1.56,.64,1);background:rgba(64,59,51,.03);}
.size-item:hover:not(.done){background:rgba(64,59,51,.08);transform:translateY(-5px);}
.size-item.correct{background:#d4f8d4;border-color:#6BCB77;animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.size-item.wrong{background:#ffe0e0;border-color:#FF6B6B;animation:shake .4s ease;}
.size-label{font-size:.9rem;font-weight:700;color:rgba(64,59,51,.6);}

/* --- ODD ONE OUT --- */
.odd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.odd-card{background:#f5f0e8;border-radius:22px;border:4px solid transparent;padding:20px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.08);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);}
.odd-card:hover:not(:disabled){transform:translateY(-6px) scale(1.03);box-shadow:0 12px 0 rgba(0,0,0,.08);}
.odd-card:active:not(:disabled){transform:translateY(2px) scale(0.97);}
.odd-card.correct{background:#d4f8d4;border-color:#6BCB77;animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.odd-card.wrong{background:#ffe0e0;border-color:#FF6B6B;animation:shake .4s ease;}
.odd-card-icon{font-size:3.2rem;margin-bottom:8px;}
.odd-card-name{font-size:1rem;font-weight:700;color:rgba(64,59,51,.65);}

/* --- RHYME --- */
.rhyme-word{font-size:3.2rem;font-weight:700;text-align:center;padding:22px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);animation:letter-pop .4s cubic-bezier(.34,1.56,.64,1);}
.rhyme-sub{font-size:.92rem;color:rgba(64,59,51,.45);text-align:center;margin-bottom:16px;font-family:'Inter',sans-serif;}

/* --- SEQUENCE --- */
.seq-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.seq-card{background:#fff;border-radius:18px;padding:16px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.08);cursor:pointer;border:4px solid transparent;transition:all .2s cubic-bezier(.34,1.56,.64,1);min-width:90px;}
.seq-card:hover:not(.placed){transform:translateY(-6px) scale(1.03);}
.seq-card:active:not(.placed){transform:translateY(2px) scale(0.97);}
.seq-card.placed{opacity:.4;cursor:default;}
.seq-card.correct{border-color:#6BCB77;animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.seq-card.wrong{border-color:#FF6B6B;animation:shake .4s ease;}
.seq-card-icon{font-size:2.5rem;margin-bottom:6px;}
.seq-card-label{font-size:.85rem;font-weight:700;color:rgba(64,59,51,.6);}
.seq-slots{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:16px;background:#fff;border-radius:22px;margin-bottom:16px;box-shadow:0 4px 0 rgba(0,0,0,.06);}
.seq-slot{width:90px;min-height:100px;border:3px dashed rgba(64,59,51,.18);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.2rem;padding:10px;transition:all .2s;}
.seq-slot.filled{border-color:rgba(64,59,51,.3);border-style:solid;background:rgba(107,203,119,.1);}
.seq-slot-num{font-size:.8rem;font-weight:700;color:rgba(64,59,51,.35);margin-bottom:6px;}

/* --- DONE SCREEN --- */
.done-screen{text-align:center;padding:40px 24px;}
.done-emoji{font-size:6rem;margin-bottom:16px;display:block;animation:done-dance 1s ease-in-out infinite;}
@keyframes done-dance{0%,100%{transform:translateY(0) rotate(0deg);}25%{transform:translateY(-10px) rotate(-5deg);}75%{transform:translateY(-10px) rotate(5deg);}}
.done-title{font-size:2.5rem;font-weight:700;color:var(--charcoal);margin-bottom:8px;}
.done-sub{font-size:1.1rem;color:rgba(64,59,51,.55);font-family:'Inter',sans-serif;margin-bottom:24px;line-height:1.6;}
.done-score{font-size:1.8rem;font-weight:700;margin-bottom:24px;}
.learn-box{background:#fff;border-radius:22px;padding:24px;margin-bottom:24px;text-align:left;box-shadow:0 4px 0 rgba(0,0,0,.06);border:3px solid rgba(64,59,51,.05);}
.learn-box-title{font-size:1.2rem;font-weight:700;margin-bottom:10px;}
.learn-box p{font-size:.95rem;color:rgba(64,59,51,.65);font-family:'Inter',sans-serif;line-height:1.65;}
.btn-play-again{padding:18px 40px;border:none;border-radius:18px;font-family:'Fredoka',cursive;font-size:1.3rem;font-weight:700;color:#fff;background:var(--rose);box-shadow:0 6px 0 #9b3a3c,0 8px 20px rgba(188,71,73,.3);cursor:pointer;transition:all .2s;}
.btn-play-again:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 9px 0 #9b3a3c,0 12px 24px rgba(188,71,73,.35);}
.btn-play-again:active{transform:translateY(2px);box-shadow:0 3px 0 #9b3a3c,0 4px 12px rgba(188,71,73,.25);}

/* --- TINY PROGRESS --- */
.tiny-progress-section{padding:0 20px 30px;max-width:900px;margin:-60px auto 0;position:relative;z-index:2;}
.tiny-progress-inner{background:#fff;border-radius:28px;padding:28px 28px 24px;box-shadow:0 8px 0 rgba(64,59,51,.1),0 12px 40px rgba(0,0,0,.08);}
.tp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:10px;}
.tp-level-badge{background:linear-gradient(135deg,var(--rose),#e05555);color:#fff;border-radius:999px;padding:8px 20px;font-weight:700;font-size:1.1rem;box-shadow:0 4px 0 #9b3a3c;}
.tp-xp-text{font-size:1rem;font-weight:700;color:var(--rose);font-family:'Inter',sans-serif;background:rgba(188,71,73,.1);padding:6px 14px;border-radius:10px;}
.tp-bar-track{height:18px;border-radius:999px;background:rgba(64,59,51,.08);overflow:hidden;margin-bottom:8px;}
.tp-bar-fill{height:100%;background:linear-gradient(90deg,var(--c2),var(--rose),var(--c5));border-radius:999px;transition:width .5s cubic-bezier(.34,1.56,.64,1);position:relative;}
.tp-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,transparent 50%);border-radius:999px;}
.tp-bar-sub{font-size:.82rem;color:rgba(64,59,51,.45);font-family:'Inter',sans-serif;margin-bottom:20px;}
.tp-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:12px;}
.tp-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;background:rgba(64,59,51,.04);text-align:center;transition:all .2s;}
.tp-badge.earned{background:#fffbe6;box-shadow:0 0 0 3px var(--c2) inset,0 4px 0 rgba(255,217,61,.3);}
.tp-badge.earned:hover{transform:translateY(-4px) scale(1.05);}
.tp-badge-icon{font-size:2rem;filter:grayscale(1) opacity(.3);transition:all .3s;}
.tp-badge.earned .tp-badge-icon{filter:none;opacity:1;animation:badge-pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes badge-pop{0%{transform:scale(0) rotate(-180deg);}100%{transform:scale(1) rotate(0deg);}}
.tp-badge-name{font-size:.7rem;font-weight:700;color:rgba(64,59,51,.5);line-height:1.3;}
.tp-badge.earned .tp-badge-name{color:var(--charcoal);}

/* --- FOR PARENTS SECTION --- */
.parents-section{padding:48px 20px;background:white;border-top:3px solid rgba(64,59,51,.08);}
.parents-inner{max-width:960px;margin:0 auto;}
.parents-tag{display:inline-block;background:var(--teal);color:#fff;border-radius:999px;padding:5px 18px;font-size:.8rem;font-weight:700;margin-bottom:14px;}
.parents-title{font-size:clamp(1.5rem,4vw,2rem);font-weight:700;color:var(--charcoal);margin-bottom:10px;}
.parents-sub{font-size:.92rem;color:rgba(64,59,51,.55);font-family:'Inter',sans-serif;line-height:1.65;max-width:580px;margin-bottom:30px;}
.parents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.parent-card{background:var(--beige);border-radius:18px;padding:20px 18px;display:flex;flex-direction:column;gap:8px;transition:transform .2s;}
.parent-card:hover{transform:translateY(-3px);}
.parent-card-icon{font-size:2rem;}
.parent-card-title{font-size:1rem;font-weight:700;color:var(--charcoal);}
.parent-card-desc{font-size:.82rem;color:rgba(64,59,51,.58);font-family:'Inter',sans-serif;line-height:1.5;}
.parent-card-tag{font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:6px;background:rgba(64,59,51,.08);color:rgba(64,59,51,.5);width:fit-content;}
.parents-perks{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.parents-perk{display:flex;align-items:center;gap:8px;background:rgba(188,71,73,.06);border-radius:999px;padding:10px 18px;font-size:.85rem;font-weight:700;color:var(--rose);}

/* --- ACCESSIBILITY MODE --- */
body.access-lg { font-size: 115%; }
body.access-lg .act-title { font-size: 1.7rem; }
body.access-lg .q-text { font-size: 1.7rem; }
body.access-lg .tap-btn { min-height: 110px; font-size: 1.5rem; }
body.access-lg .tap-btn .btn-icon { font-size: 3rem; }
body.access-lg .count-num-btn { width: 80px; height: 80px; font-size: 2.2rem; }
body.high-contrast { filter: contrast(1.3); }
.access-bar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(64,59,51,.06); border-bottom: 1px solid rgba(64,59,51,.08); flex-wrap: wrap; }
.access-bar span { font-size: .78rem; font-weight: 700; color: rgba(240,234,214,.6); font-family: 'Inter', sans-serif; margin-right: 6px; }
.access-btn { padding: 6px 16px; border-radius: 10px; border: 2px solid rgba(64,59,51,.18); background: #fff; font-size: .82rem; font-weight: 700; color: var(--charcoal); cursor: pointer; font-family: 'Fredoka', cursive; transition: all .2s; }
.access-btn:hover { background: var(--beige); transform: translateY(-2px); }
.access-btn.on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* --- STICKER BOOK --- */
.sticker-section { padding: 44px 20px; background: linear-gradient(160deg, #fff8f0 0%, #f8f0ff 100%); }
.sticker-inner { max-width: 920px; margin: 0 auto; }
.sticker-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.sticker-head h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--charcoal); }
.sticker-head p { font-size: .9rem; color: rgba(64,59,51,.55); font-family: 'Inter', sans-serif; }
.sticker-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.sticker-slot { width: 90px; height: 90px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 3rem; border: 3px dashed rgba(64,59,51,.18); background: rgba(64,59,51,.03); transition: all .25s cubic-bezier(.34,1.56,.64,1); position: relative; cursor: default; }
.sticker-slot.earned { border-style: solid; border-color: var(--c2); background: #fffbe6; box-shadow: 0 4px 0 rgba(255,217,61,.3); animation: sticker-earn .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes sticker-earn{0%{transform:scale(0) rotate(-20deg);}50%{transform:scale(1.2) rotate(10deg);}100%{transform:scale(1) rotate(0deg);}}
.sticker-slot.earned:hover { transform: scale(1.15) rotate(5deg); }
.sticker-slot .sticker-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: .65rem; font-weight: 700; color: rgba(64,59,51,.5); white-space: nowrap; font-family: 'Inter', sans-serif; }
.sticker-count { font-size: .9rem; font-weight: 700; color: rgba(64,59,51,.5); font-family: 'Inter', sans-serif; margin-top: 28px; text-align: center; }

/* --- SEASONAL SECTION --- */
.seasonal-section { padding: 44px 20px; background: white; }
.seasonal-inner { max-width: 920px; margin: 0 auto; }
.seasonal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.seasonal-card { border-radius: 22px; padding: 24px 18px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; cursor: pointer; transition: all .25s cubic-bezier(.34,1.56,.64,1); }
.seasonal-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 32px rgba(64,59,51,.15); }
.seasonal-card:active { transform: translateY(2px) scale(0.97); }
.seasonal-emoji { font-size: 2.8rem; }
.seasonal-name { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); }
.seasonal-desc { font-size: .82rem; color: rgba(64,59,51,.55); font-family: 'Inter', sans-serif; line-height: 1.5; }
.seasonal-badge { font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; color: #fff; }

/* --- SPEECH TOGGLE --- */
.speech-toggle { background: rgba(64,59,51,.08); border: none; border-radius: 10px; padding: 8px 14px; font-size: 1rem; cursor: pointer; transition: background .12s; margin-left: auto; font-family: 'Fredoka', cursive; font-weight: 700; }
.speech-toggle:hover { background: rgba(64,59,51,.16); }
.speech-toggle.on { background: var(--c4); color: #fff; }

/* --- REPORT CARD --- */
.report-section { padding: 44px 20px; background: var(--beige); }
.report-inner { max-width: 680px; margin: 0 auto; }
.report-card { background: #fff; border-radius: 24px; box-shadow: 0 6px 0 rgba(64,59,51,.1); padding: 32px 32px 28px; }
.report-header { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--beige); }
.report-logo { font-size: 1.5rem; font-weight: 700; color: var(--rose); margin-bottom: 6px; }
.report-title { font-size: 1.2rem; font-weight: 700; color: var(--charcoal); }
.report-date { font-size: .8rem; color: rgba(64,59,51,.45); font-family: 'Inter', sans-serif; }
.report-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--beige); }
.report-row:last-child { border-bottom: none; }
.report-emoji { font-size: 1.8rem; flex-shrink: 0; }
.report-name { font-size: .95rem; font-weight: 700; color: var(--charcoal); flex: 1; }
.report-stars { font-size: .95rem; color: var(--charcoal); }
.report-plays { font-size: .75rem; color: rgba(64,59,51,.45); font-family: 'Inter', sans-serif; }
.report-print-btn { display: block; width: 100%; margin-top: 24px; padding: 16px; background: var(--rose); color: #fff; border: none; border-radius: 16px; font-family: 'Fredoka', cursive; font-size: 1.15rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 #9b3a3c; transition: all .2s; }
.report-print-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
@media print { body > *:not(.report-section) { display: none !important; } .report-section { padding: 0; } .report-print-btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-stars span, .tiny-scene span, .done-emoji, .hero-char { animation: none !important; }
  .onboard-char { animation: none !important; }
}

/* --- COMING SOON SECTION --- */
.coming-section{padding:40px 20px 60px;max-width:1000px;margin:0 auto;}
.coming-head{margin-bottom:24px;}
.coming-head h2{font-size:clamp(1.4rem,4vw,1.8rem);font-weight:700;color:var(--beige);margin-bottom:6px;}
.coming-head p{font-size:.9rem;color:rgba(240,234,214,.55);font-family:'Inter',sans-serif;}
.coming-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.coming-card{background:rgba(240,234,214,.06);border:2px dashed rgba(240,234,214,.18);border-radius:20px;padding:22px 16px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;transition:all .2s;}
.coming-emoji{font-size:2.4rem;opacity:.5;}
.coming-name{font-size:1rem;font-weight:700;color:rgba(240,234,214,.5);}
.coming-badge{font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--teal);color:#fff;padding:4px 12px;border-radius:999px;}

/* --- ONBOARDING OVERLAY --- */
.onboard-overlay{position:fixed;inset:0;z-index:1000;background:rgba(64,59,51,.85);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade-in .3s ease;}
.onboard-overlay.hidden{display:none;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
.onboard-card{background:#fff;border-radius:32px;padding:40px 32px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:card-bounce .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes card-bounce{from{transform:scale(0.8) translateY(30px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.onboard-char{font-size:5rem;margin-bottom:16px;animation:char-wave 1s ease-in-out infinite;}
@keyframes char-wave{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-10deg);}75%{transform:rotate(10deg);}}
.onboard-title{font-size:1.8rem;font-weight:700;color:var(--charcoal);margin-bottom:8px;}
.onboard-text{font-size:1rem;color:rgba(64,59,51,.6);font-family:'Inter',sans-serif;margin-bottom:24px;line-height:1.5;}
.onboard-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;}
.onboard-step{display:flex;align-items:center;gap:14px;background:var(--beige);border-radius:16px;padding:14px 18px;text-align:left;}
.onboard-step-icon{font-size:1.8rem;flex-shrink:0;}
.onboard-step-text{font-size:.95rem;font-weight:600;color:var(--charcoal);font-family:'Inter',sans-serif;}
.onboard-btn{padding:16px 40px;border:none;border-radius:18px;font-family:'Fredoka',cursive;font-size:1.3rem;font-weight:700;color:#fff;background:var(--rose);box-shadow:0 6px 0 #9b3a3c,0 8px 20px rgba(188,71,73,.3);cursor:pointer;transition:all .2s;width:100%;}
.onboard-btn:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 9px 0 #9b3a3c,0 12px 24px rgba(188,71,73,.35);}
.onboard-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #9b3a3c,0 4px 12px rgba(188,71,73,.25);}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
/* style-shared.css loads last and overrides body to the site-wide dark theme,
   but this page is its own light/cream theme, restore it after the shared sheet. */
body{background:var(--charcoal);color:var(--beige);}

/* -- Touch targets, ages 4 to 6 --
   Measured on a 390px phone, most controls here were 28 to 41px, with the
   colour swatches at 30px. Small children have markedly less precise aim than
   adults, so the page that needs the biggest targets on the site had the
   smallest. 44px is the floor; the primary activity buttons get more. */
@media (pointer: coarse), (max-width: 900px) {
  .tl-scope .act-btn { min-height: 58px; }
  .tl-scope .tool-btn,
  .tl-scope .brush-btn { min-width: 52px; min-height: 52px; }
  .tl-scope .color-swatch-btn { min-width: 48px; min-height: 48px; }
  .tl-scope .draw-action-btn { min-height: 48px; }
  .tl-scope .access-btn { min-height: 48px; padding-left: 16px; padding-right: 16px; }
  .tl-scope .tap-btn { min-height: 110px; }
  .tl-scope .count-num-btn { min-width: 74px; min-height: 74px; }
  .tl-scope .odd-card { min-height: 120px; }
  .tl-scope .shape-card { min-height: 120px; }
  .tl-scope .seq-card { min-width: 95px; min-height: 100px; }
}
.reveal{opacity:1!important;transform:none!important}
/* Learning journey refresh */
.tl-scope{display:flex;flex-direction:column;background:var(--charcoal);}.tl-scope .site-header{order:0;}.tl-scope #main-content{order:1;}.tl-scope .mascot-hero{order:1;}.tl-scope .tiny-progress-section{order:2;}.tl-scope .access-bar{order:3;}.tl-scope .activities-section{order:4;}.tl-scope .draw-section{order:5;}.tl-scope .sticker-section{order:6;}.tl-scope .seasonal-section{order:7;}.tl-scope .coming-section{order:8;}.tl-scope .parents-section{order:9;}.tl-scope .report-section{order:10;}
.tl-scope .hero{padding:clamp(48px,8vw,82px) 20px clamp(46px,7vw,76px);}.tl-scope .hero h1{font-size:clamp(3.2rem,10vw,5.6rem);letter-spacing:-.04em;}.tl-scope .hero-sub{max-width:570px;font-size:clamp(1rem,2.4vw,1.18rem);}.tl-scope .hero-actions{margin-top:30px;}.tl-scope .hero-cta{border-radius:15px;padding:16px 26px;}.tl-scope .tiny-progress-section{padding:18px 20px;background:#302b27;}.tl-scope .tiny-progress-inner{max-width:900px;}.tl-scope .access-bar{background:#f7efe3;border-bottom:1px solid rgba(64,59,51,.12);padding:10px 20px;}.tl-scope .activities-section{max-width:1100px;padding-top:58px;}.tl-scope .activities-section .section-head{max-width:620px;margin-left:auto;margin-right:auto;}.tl-scope .activities-grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px;}.tl-scope .act-card{border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,.12);}.tl-scope .act-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.2);}.tl-scope .draw-section{max-width:1100px;padding-top:56px;}.tl-scope .draw-studio{border-radius:24px;overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.18);}.tl-scope .sticker-section{background:linear-gradient(135deg,#fff8ee,#f3efff);}.tl-scope .parents-section{padding-top:60px;padding-bottom:60px;}.tl-scope .parents-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}.tl-scope .report-section{background:#f5ecdf;}
@media(max-width:700px){.tl-scope .hero-actions{flex-direction:column;max-width:330px;margin-left:auto;margin-right:auto;}.tl-scope .hero-cta{justify-content:center;width:100%;box-sizing:border-box;}.tl-scope .hero-pills{gap:7px;}.tl-scope .hero-pill{padding:7px 12px;font-size:.78rem;}.tl-scope .access-bar{justify-content:flex-start;overflow-x:hidden;flex-wrap:wrap;}.tl-scope .access-bar>span{flex:1 1 100%;}.tl-scope .access-btn{flex:1 1 160px;min-width:0;white-space:normal;}}

/* Guided states and adult tools */
.parent-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:920px;margin:0 auto;padding:15px 20px;border:1px solid rgba(64,59,51,.14);border-radius:14px;background:#fff;color:var(--charcoal);font:700 .88rem 'Inter',sans-serif;cursor:pointer;}.parent-toggle span{font-size:1.4rem;color:var(--rose);line-height:1;}.parents-section{display:none;}.parents-section.is-open{display:block;}
.tl-scope .parent-toggle{order:9;}.tl-scope .parents-section{order:10;}.tl-scope #reportSection{order:11;}
.card-status{display:inline-flex;align-items:center;width:max-content;margin-bottom:8px;padding:4px 9px;border-radius:999px;background:rgba(64,59,51,.08);color:rgba(64,59,51,.62);font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}.act-card:focus-visible,.parent-toggle:focus-visible,.access-btn:focus-visible,.hero-cta:focus-visible{outline:3px solid var(--rose);outline-offset:4px;}
.activity-guide{max-width:680px;margin:-10px auto 24px;padding:12px 16px;border-left:4px solid var(--teal);border-radius:10px;background:rgba(112,163,167,.1);color:rgba(240,234,214,.78);font:600 .84rem/1.5 'Inter',sans-serif;}
/* Onboarding stays welcoming without taking over the page */
.onboard-card{max-width:460px;padding:30px 28px;border-radius:24px;}.onboard-char{font-size:4rem;margin-bottom:10px;}.onboard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;}.onboard-step{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px;text-align:center;}.onboard-step-icon{font-size:1.5rem;}.onboard-step-text{font-size:.78rem;line-height:1.35;}.onboard-btn{padding:14px 30px;font-size:1.15rem;}
@media(max-width:560px){.onboard-steps{grid-template-columns:1fr;}.onboard-step{flex-direction:row;text-align:left;padding:10px 14px;}.onboard-step-text{font-size:.88rem;}}
/* Final polish pass */
html{scroll-behavior:smooth;}.tl-scope section,.ll-scope section{scroll-margin-top:18px;}.tl-scope .section-head{margin-bottom:32px;}.tl-scope .act-card,.tl-scope .draw-studio{transition:transform .2s ease,box-shadow .2s ease;}.tl-scope .act-btn{min-height:52px;}