*{box-sizing:border-box}
:root{--ink:#2c2440;--muted:#756d80;--paper:#fffaf7;--card:#fff;--line:#eadfe9;--purple:#7257d8;--red:#ef3340;--red-dark:#c82431;--red-soft:#fff0f1;--green:#2fb65f;--shadow:0 12px 34px rgba(73,50,95,.11)}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 8% 8%,rgba(255,222,230,.55),transparent 24rem),radial-gradient(circle at 92% 14%,rgba(225,235,255,.55),transparent 24rem),var(--paper)}
a{text-decoration:none;color:inherit}button{font:inherit}img{max-width:100%}
.site-header{min-height:76px;padding:13px clamp(16px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(114,87,216,.08);position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px}.brand-dot{width:46px;height:46px;border-radius:15px;background:var(--red);box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(239,51,64,.17)}
.brand strong,.brand small{display:block}.brand strong{font-size:1rem}.brand small{font-size:.78rem;color:var(--muted);margin-top:2px}
.page-shell,.activity-shell{width:min(1160px,calc(100% - 28px));margin:0 auto;padding:32px 0 70px}.activity-shell{max-width:1040px}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:1000;color:var(--purple)}
.primary-button,.small-button,.listen-button{border:0;border-radius:16px;padding:13px 19px;font-weight:1000;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.primary-button{background:var(--red);color:#fff;box-shadow:0 7px 0 var(--red-dark)}.primary-button:active{transform:translateY(3px);box-shadow:0 4px 0 var(--red-dark)}.primary-button:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
.small-button{background:#f2eef9;color:#5741a6}.listen-button{background:#fff;border:2px solid #ffabb2;color:var(--red-dark)}
.footer-actions{display:flex;gap:12px;align-items:center}.activity-footer{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:24px}
.hero,.course-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:34px;padding:clamp(26px,5vw,54px);margin-bottom:38px;background:linear-gradient(135deg,#fff,#fff4f5);border:1px solid #f1e5e8;box-shadow:var(--shadow)}
.hero h1,.course-hero h1,.activity-intro h1{font-size:clamp(2.15rem,6vw,4.6rem);line-height:.98;margin:.3rem 0 1rem;letter-spacing:-.04em}
.hero p,.course-hero p,.activity-intro p{color:var(--muted);font-size:clamp(1rem,2vw,1.18rem);line-height:1.6;max-width:650px}.target-word{color:var(--red)}
.live-art-collage{display:grid;grid-template-columns:repeat(2,110px);gap:12px}.art-tile{width:110px;height:110px;border-radius:25px;background:#fff;padding:7px;display:grid;place-items:center;box-shadow:0 9px 24px rgba(100,40,50,.10);overflow:hidden}.art-tile img{width:100%;height:100%;object-fit:contain}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:22px 0 17px}.section-heading h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:.25rem 0 0}.progress-pill{padding:9px 14px;border-radius:99px;background:var(--red-soft);color:var(--red-dark);font-weight:900}
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}.content-card{min-height:235px;background:#fff;border:1px solid var(--line);border-radius:25px;padding:20px;position:relative;box-shadow:0 7px 19px rgba(72,50,94,.06)}.content-card.ready{border:2px solid #ffb8be}.content-card.ready:hover{transform:translateY(-4px)}
.number-badge{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#f5f0f8;display:grid;place-items:center;font-weight:1000}.card-art{height:112px;margin:3px 0 12px;display:grid;place-items:center}.card-art img{width:112px;height:112px;object-fit:contain}
.content-card h3{margin:0 0 7px}.content-card p{margin:0;color:var(--muted);line-height:1.45;font-size:.92rem}.status{display:inline-block;margin-top:14px;border-radius:99px;background:#f4f1f6;color:#807687;padding:6px 10px;font-size:.72rem;font-weight:1000}.ready-status{background:#e5f7ea;color:#297541}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:15px}.game-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:16px;display:flex;gap:14px;align-items:center}.game-art{width:80px;height:80px;flex:0 0 80px;border-radius:19px;background:#fff8f9;padding:6px;display:grid;place-items:center}.game-art img{width:100%;height:100%;object-fit:contain}.game-card h3,.game-card p{margin:.1rem 0}.game-card p{color:var(--muted);font-size:.88rem}
.activity-intro{text-align:center;padding:24px 0 12px}.big-color-card{margin:24px 0 34px;border-radius:32px;background:#fff;box-shadow:var(--shadow);padding:26px;display:flex;align-items:center;justify-content:center;gap:clamp(24px,7vw,65px);text-align:center}.big-swatch{width:min(250px,38vw);aspect-ratio:1;border-radius:50%;background:var(--red);box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(239,51,64,.20)}.say-it{color:var(--muted);font-weight:900;margin:0}.giant-word{font-size:clamp(3.2rem,10vw,6.8rem);font-weight:1000;color:var(--red);letter-spacing:.05em}
.panel{background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(20px,4vw,34px);box-shadow:0 9px 26px rgba(73,50,95,.07);margin-bottom:24px}
.object-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.object-card{border:2px solid #f0e7f0;border-radius:23px;background:#fffafb;min-height:205px;padding:13px;cursor:pointer}.object-card img{width:100%;height:150px;object-fit:contain}.object-card strong{display:block;margin-top:7px}.tap-tip{text-align:center;color:var(--muted);font-size:.88rem;margin:17px 0 0}
.choice-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:24px 0 12px}.color-choice{width:102px;height:102px;border-radius:50%;border:7px solid white;box-shadow:0 0 0 3px #e7deed,0 9px 19px rgba(70,40,90,.12);cursor:pointer}.choice-blue{background:#3d8df5}.choice-red{background:#ef3340}.choice-yellow{background:#ffd642}
.feedback-box,.activity-feedback{min-height:58px;border-radius:18px;background:#f5f1f8;display:grid;place-items:center;font-weight:1000;text-align:center;padding:13px 17px}.good{background:#e5f8ea!important;color:#23713c!important}.try{background:#fff5d8!important;color:#876416!important}
.find-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}.find-top h2{margin:.2rem 0 0}.counter-pill{background:var(--red-soft);color:var(--red-dark);padding:9px 14px;border-radius:99px;font-weight:1000}
.find-grid,.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.find-item,.scene-choice{position:relative;min-height:220px;border:2px solid #eee4ef;border-radius:25px;background:#fffafb;padding:12px;cursor:pointer}.find-item img,.scene-choice img{width:100%;height:165px;object-fit:contain}.find-label,.scene-choice strong{display:block;font-weight:1000;margin-top:6px}
.find-check,.scene-check{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:1000;opacity:0;transform:scale(.5)}.find-item.found,.scene-choice.correct{border-color:#72cf8e;background:#effcf3}.find-item.found .find-check,.scene-choice.correct .scene-check{opacity:1;transform:scale(1)}.scene-choice.quiet{opacity:.58}
.wrong-bounce{animation:wrongBounce .35s ease}@keyframes wrongBounce{30%{transform:translateX(-8px)}60%{transform:translateX(8px)}}
.celebration{display:grid;grid-template-columns:95px 1fr 95px;gap:17px;align-items:center;background:linear-gradient(135deg,#fff8d9,#fff0f1);border:2px solid #ffe082;border-radius:28px;padding:20px 23px;margin:22px 0}.celebration[hidden]{display:none}.celebration img{width:100%;aspect-ratio:1;object-fit:contain}.celebration h2,.celebration p{margin:.15rem 0}.celebration p{color:var(--muted)}
.trace-stage{max-width:690px;margin:0 auto}.trace-tabs{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}.trace-tab{width:64px;height:64px;border-radius:20px;border:2px solid #e8dfea;background:#f7f3f9;color:#766d7e;display:grid;place-items:center;font-size:1.55rem;font-weight:1000}.trace-tab.active{border-color:#ff9ca6;background:#fff0f1;color:var(--red-dark)}.trace-tab.done{border-color:#71cc8d;background:#e8f8ed;color:#26723e}.trace-canvas-frame{border:3px dashed #efcbd0;border-radius:28px;padding:12px;background:#fffafb;touch-action:none}.trace-canvas-frame.complete{border-color:#6fcb8c}#trace-canvas{display:block;width:100%;height:auto;aspect-ratio:540/440;touch-action:none;cursor:crosshair}.trace-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:16px 0}.trace-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff99a2,var(--red))}.trace-controls{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px}
.scene-progress,.level-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.scene-dots,.level-dots{display:flex;gap:9px}.scene-dots span,.level-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}.scene-dots span.active,.level-dots span.active{background:var(--red);border-color:var(--red);transform:scale(1.15)}.scene-dots span.done,.level-dots span.done{background:#58bf77;border-color:#58bf77}
.scene-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}.scene-place{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:1000;color:var(--red-dark)}.scene-head h2{margin:.15rem 0 .3rem}.scene-head p{margin:0;color:var(--muted)}
.shade-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px}.shade-strip-item{min-height:135px;border:1px solid #eee4ef;border-radius:22px;background:#fff;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.shade-strip-item img{height:88px;object-fit:contain}.shade-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}
.shade-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.shade-choice{position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;background:#fffafb;padding:17px;cursor:pointer}.shade-choice img{width:100%;height:245px;object-fit:contain}.shade-choice strong{display:block;margin-top:7px;font-size:1.08rem}.shade-choice.correct{border-color:#72cf8e;background:#effcf3}.shade-choice.quiet{opacity:.6}.shade-check{position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:1000;opacity:0;transform:scale(.5)}.shade-choice.correct .shade-check{opacity:1;transform:scale(1)}.shade-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
@media(max-width:820px){.hero,.course-hero,.big-color-card{flex-direction:column;text-align:center}.live-art-collage{grid-template-columns:repeat(4,72px)}.art-tile{width:72px;height:72px}.object-grid,.find-grid,.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-head,.find-top{align-items:flex-start;flex-direction:column}.shade-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.content-grid{grid-template-columns:1fr 1fr}.content-card{min-height:220px;padding:15px}.card-art{height:88px}.card-art img{width:88px;height:88px}.activity-footer{flex-direction:column-reverse}.activity-footer>*{width:100%}.footer-actions{width:100%;flex-direction:column}.footer-actions>*{width:100%}.object-card{min-height:175px}.object-card img{height:120px}.find-item,.scene-choice{min-height:185px}.find-item img,.scene-choice img{height:125px}.trace-controls{grid-template-columns:1fr}.shade-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.shade-choice-row{grid-template-columns:1fr}.shade-choice{min-height:270px}.shade-choice img{height:195px}.shade-controls{flex-direction:column}.shade-controls>*{width:100%}.celebration{grid-template-columns:72px 1fr}.celebration img:last-child{display:none}}


/* Main all-colors dashboard */
.dashboard-brand-bubbles{display:flex;align-items:flex-end;gap:3px;width:48px;height:46px}
.dashboard-brand-bubbles i{display:block;width:14px;border-radius:99px}
.dashboard-brand-bubbles i:nth-child(1){height:35px;background:#ef3340}
.dashboard-brand-bubbles i:nth-child(2){height:43px;background:#ffd642}
.dashboard-brand-bubbles i:nth-child(3){height:31px;background:#3d8df5}

.colors-dashboard-hero{
  border-radius:36px;
  padding:clamp(28px,5vw,56px);
  background:linear-gradient(135deg,#fff,#fff8ef 45%,#f4f5ff);
  border:1px solid #eee3ee;
  box-shadow:var(--shadow);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:36px;
}
.colors-dashboard-hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:.98;margin:.3rem 0 1rem}
.colors-dashboard-hero p{max-width:700px;color:var(--muted);font-size:1.08rem;line-height:1.6}
.dashboard-rainbow{display:flex;gap:8px;align-items:flex-end;height:155px;flex:0 0 auto}
.dashboard-rainbow span{display:block;width:32px;border-radius:99px 99px 18px 18px}
.dashboard-rainbow span:nth-child(1){height:150px;background:#ef3340}
.dashboard-rainbow span:nth-child(2){height:136px;background:#ff9238}
.dashboard-rainbow span:nth-child(3){height:122px;background:#ffd642}
.dashboard-rainbow span:nth-child(4){height:108px;background:#51b85f}
.dashboard-rainbow span:nth-child(5){height:94px;background:#3d8df5}
.dashboard-rainbow span:nth-child(6){height:80px;background:#8b59d4}

.color-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:17px}
.color-course-card{
  position:relative;
  min-height:255px;
  border-radius:28px;
  padding:18px;
  background:#fff;
  border:2px solid #eee5ef;
  box-shadow:0 8px 22px rgba(75,50,95,.07);
  text-align:center;
  overflow:hidden;
}
.color-course-card.available{cursor:pointer;transition:.18s transform,.18s box-shadow}
.color-course-card.available:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(75,50,95,.12)}
.color-course-status{
  position:absolute;right:12px;top:12px;border-radius:99px;background:#f3eff5;color:#7c7284;
  padding:6px 9px;font-size:.66rem;font-weight:1000
}
.color-course-card.available .color-course-status{background:#e6f8eb;color:#287540}
.color-course-art{height:145px;display:grid;place-items:center;margin:12px auto 7px}
.color-course-art img{width:100%;height:100%;object-fit:contain}
.color-course-card h3{font-size:1.35rem;margin:5px 0 3px}
.color-course-card p{color:var(--muted);margin:0;font-size:.88rem}
.color-dot{display:inline-block;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4px #e8dfe9;vertical-align:middle}
.color-red .color-dot{background:#ef3340}.color-red{border-color:#ffadb5}
.color-orange .color-dot{background:#ff8b2b}
.color-yellow .color-dot{background:#ffd642}
.color-green .color-dot{background:#51b85f}
.color-blue .color-dot{background:#3d8df5}
.color-purple .color-dot{background:#8555cc}
.color-pink .color-dot{background:#f37fb1}
.color-brown .color-dot{background:#9a633f}
.color-gray .color-dot{background:#9aa1a8}
.color-black .color-dot{background:#27272b}
.color-white .color-dot{background:#fff;border:2px solid #d8d8de}
.color-rainbow .color-dot{background:conic-gradient(#ef3340,#ff8b2b,#ffd642,#51b85f,#3d8df5,#8555cc,#f37fb1,#ef3340)}

/* Activity 6 — Mix With Red */
.mix-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.mix-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.mix-level-dots{display:flex;gap:10px}
.mix-level-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.mix-level-dots span.active{background:var(--red);border-color:var(--red);transform:scale(1.16)}
.mix-level-dots span.done{background:#58bf77;border-color:#58bf77}

.mix-lab-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.mix-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.mix-level-name{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--red-dark);font-weight:1000}
.mix-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.mix-heading p{margin:0;color:var(--muted)}

.mix-paint-stage{
  display:grid;
  grid-template-columns:1fr 56px 1fr 56px 1fr;
  gap:12px;
  align-items:center;
  max-width:850px;
  margin:0 auto 24px;
}
.paint-cup,.paint-result{
  min-height:190px;border-radius:28px;background:#fffafb;border:2px solid #eee4ef;padding:15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center
}
.paint-blob,.paint-result-blob{
  width:115px;height:115px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),0 8px 18px rgba(40,30,60,.10);
  display:grid;place-items:center;font-size:2.2rem;font-weight:1000
}
.paint-red{background:#ef3340}.paint-yellow{background:#ffd642}.paint-blue{background:#3d8df5}
.paint-white{background:#fff;border:3px solid #dddde2;box-shadow:inset 0 -8px 0 rgba(0,0,0,.03),0 8px 18px rgba(40,30,60,.08)}
.paint-mystery{background:repeating-linear-gradient(45deg,#f2edf5 0 12px,#fff 12px 24px)}
.mix-plus,.mix-equals{text-align:center;font-size:2.5rem;font-weight:1000;color:#8b7c93}
.paint-result.mystery .paint-result-blob{background:#f2edf5;color:#8c8193}
.paint-result.result-known.result-orange .paint-result-blob{background:#ff8b2b}
.paint-result.result-known.result-purple .paint-result-blob{background:#8555cc}
.paint-result.result-known.result-pink .paint-result-blob{background:#f37fb1}
.paint-result.mixing .paint-result-blob{animation:mixPop .5s ease}
@keyframes mixPop{0%{transform:scale(.6) rotate(-10deg)}65%{transform:scale(1.12) rotate(5deg)}100%{transform:scale(1)}}

.mix-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto}
.mix-choice{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:105px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s opacity
}
.mix-choice:hover,.mix-choice:focus-visible{transform:translateY(-3px);border-color:#ff9ca6;outline:none}
.mix-choice-swatch{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 5px #e8dfe9}
.mix-choice-orange .mix-choice-swatch{background:#ff8b2b}.mix-choice-purple .mix-choice-swatch{background:#8555cc}
.mix-choice-pink .mix-choice-swatch{background:#f37fb1}.mix-choice-yellow .mix-choice-swatch{background:#ffd642}
.mix-choice-blue .mix-choice-swatch{background:#3d8df5}.mix-choice-white .mix-choice-swatch{background:#fff;border:2px solid #d7d7df}
.mix-choice.correct{border-color:#6dcc8a;background:#effcf3}.mix-choice.quiet{opacity:.55}
.mix-choice.wrong{animation:wrongBounce .35s ease}

.mix-result-example{
  display:grid;grid-template-columns:115px 1fr;gap:18px;align-items:center;
  max-width:760px;margin:20px auto 0;background:#fff8ef;border:2px solid #ffe0ad;border-radius:26px;padding:16px 20px
}
.mix-result-example[hidden]{display:none}
.mix-result-example img{width:115px;height:115px;object-fit:contain}
.mix-result-example h3,.mix-result-example p{margin:.15rem 0}.mix-result-example p{color:var(--muted)}
.mix-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}

@media(max-width:820px){
  .colors-dashboard-hero{flex-direction:column;text-align:center}
  .dashboard-rainbow{height:90px}.dashboard-rainbow span{width:23px}
  .dashboard-rainbow span:nth-child(1){height:88px}.dashboard-rainbow span:nth-child(2){height:80px}.dashboard-rainbow span:nth-child(3){height:72px}.dashboard-rainbow span:nth-child(4){height:64px}.dashboard-rainbow span:nth-child(5){height:56px}.dashboard-rainbow span:nth-child(6){height:48px}
  .mix-heading{align-items:flex-start;flex-direction:column}
  .mix-paint-stage{grid-template-columns:1fr 38px 1fr;max-width:620px}
  .mix-paint-stage .mix-equals{grid-column:1/-1}
  .paint-result{grid-column:1/-1;min-height:160px}
}
@media(max-width:560px){
  .color-course-grid{grid-template-columns:1fr 1fr}.color-course-card{min-height:220px;padding:14px}.color-course-art{height:115px}
  .mix-level-bar{align-items:flex-start;flex-direction:column}
  .mix-paint-stage{grid-template-columns:1fr 34px 1fr}
  .paint-cup{min-height:150px}.paint-blob,.paint-result-blob{width:88px;height:88px}
  .mix-choice-grid{grid-template-columns:1fr}
  .mix-result-example{grid-template-columns:80px 1fr}.mix-result-example img{width:80px;height:80px}
  .mix-controls{flex-direction:column}.mix-controls>*{width:100%}
}


/* Activity 7 — Odd One Out */
.odd-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.odd-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.odd-level-dots{display:flex;gap:10px}
.odd-level-dots span{
  width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4
}
.odd-level-dots span.active{background:var(--red);border-color:var(--red);transform:scale(1.16)}
.odd-level-dots span.done{background:#58bf77;border-color:#58bf77}

.odd-game-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.odd-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}
.odd-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--red-dark);font-weight:1000
}
.odd-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.odd-heading p{margin:0;color:var(--muted)}

.odd-red-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff5f6;border:1px solid #ffd9dd;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.odd-red-clue span:last-child{color:var(--muted);font-size:.88rem}
.odd-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px #fff,0 0 0 5px #f3cdd1
}

.odd-choice-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px
}
.odd-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffafb);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.odd-choice:hover,.odd-choice:focus-visible{
  transform:translateY(-4px);border-color:#ffabb2;box-shadow:0 12px 25px rgba(239,51,64,.09);outline:none
}
.odd-choice-image{height:170px;display:grid;place-items:center}
.odd-choice-image img{width:100%;height:100%;object-fit:contain}
.odd-choice strong{display:block;font-size:1rem;margin-top:7px}
.odd-choice-mark{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.odd-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.odd-choice.correct .odd-choice-mark{opacity:1;transform:scale(1)}
.odd-choice.correct img{animation:oddCorrect .4s ease}
.odd-choice.quiet{opacity:.55}
.odd-choice.red-clue:not(.correct){
  border-color:#ffadb4;
  box-shadow:0 0 0 5px rgba(239,51,64,.09)
}
.odd-choice.wrong{animation:wrongBounce .35s ease}
.odd-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
@keyframes oddCorrect{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .odd-heading{align-items:flex-start;flex-direction:column}
  .odd-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .odd-level-bar{align-items:flex-start;flex-direction:column}
  .odd-choice{min-height:190px}.odd-choice-image{height:125px}
  .odd-controls{flex-direction:column}.odd-controls>*{width:100%}
}


/* Activity 8 — Red Story / Read-Along */
.story8-shell{max-width:1000px}
.story8-intro-buttons{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px
}
.story8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.story8-book-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px
}
.story8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.story8-page-pill{
  white-space:nowrap;background:var(--red-soft);color:var(--red-dark);
  border-radius:99px;padding:10px 15px;font-weight:900
}
.story8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffafb,#fff);
  border:2px solid #f1e7ef;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.story8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e8ef
}
.story8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.story8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.story8-copy p{margin:.4rem 0 18px}
.story8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f4f0f7;
  color:#6e6476;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.story8-red-word{
  color:var(--red);background:#fff0f1;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(239,51,64,.08)
}
.story8-progress{
  height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px
}
.story8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ff9ca5,var(--red));
  border-radius:inherit;transition:width .22s ease
}
.story8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.story8-mini-pages{display:flex;justify-content:center;gap:8px}
.story8-mini-pages span{
  width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2
}
.story8-mini-pages span.active{background:var(--red);border-color:var(--red);transform:scale(1.17)}
.story8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.story8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.story8-questions[hidden]{display:none}
.story8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffafb
}
.story8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.story8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.story8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.story8-answer-grid button:hover,.story8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#ffabb2;outline:none
}
.story8-answer-grid img{width:100%;height:135px;object-fit:contain}
.story8-answer-grid strong{display:block;margin-top:7px}
.story8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.story8-answer-grid button.quiet{opacity:.52}
.story8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.story8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}

@media(max-width:760px){
  .story8-book-top{align-items:flex-start;flex-direction:column}
  .story8-page{grid-template-columns:1fr;min-height:auto}
  .story8-art-wrap{height:265px}
  .story8-copy{text-align:center}
  .story8-nav{grid-template-columns:1fr 1fr}
  .story8-mini-pages{grid-column:1/-1;grid-row:1}
  .story8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .story8-art-wrap{height:220px}
  .story8-nav{grid-template-columns:1fr}
  .story8-mini-pages{grid-column:auto;grid-row:auto}
  .story8-nav>*{width:100%}
}


/* Activity 9 — Coloring Time */
.coloring9-shell{max-width:1040px}
.coloring9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.coloring9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.coloring9-dots{display:flex;gap:10px}
.coloring9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.coloring9-dots span.active{background:var(--red);border-color:var(--red);transform:scale(1.16)}
.coloring9-dots span.done{background:#58bf77;border-color:#58bf77}

.coloring9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.coloring9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.coloring9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--red-dark);font-weight:1000
}
.coloring9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.coloring9-heading p{margin:0;color:var(--muted);max-width:650px}
.coloring9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#fff6f7;border:1px solid #ffdce0;
  border-radius:22px;padding:9px
}
.coloring9-reference span{display:block;font-size:.68rem;font-weight:1000;color:var(--red-dark);margin-bottom:5px}
.coloring9-reference img{width:90px;height:90px;object-fit:contain}

.coloring9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.coloring9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #e2d8e5;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffafb;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.coloring9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#coloring9-paint-canvas,#coloring9-lineart{
  position:absolute;inset:0;width:100%;height:100%
}
#coloring9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#coloring9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.coloring9-tools{display:grid;gap:12px}
.coloring9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.coloring9-tool.active{border-color:#ff9fa8;background:#fff2f3;box-shadow:0 7px 18px rgba(239,51,64,.10)}
.coloring9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.coloring9-tool-swatch.red{background:var(--red)}
.coloring9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.coloring9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.coloring9-tool strong{font-size:.82rem}

.coloring9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.coloring9-progress-row strong{color:var(--red-dark)}
.coloring9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.coloring9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#ff99a2,var(--red));
  border-radius:inherit;transition:width .12s ease
}
.coloring9-card>.activity-feedback{max-width:850px;margin:0 auto}
.coloring9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}

@media(max-width:760px){
  .coloring9-heading{align-items:flex-start;flex-direction:column}
  .coloring9-reference{align-self:flex-end}
  .coloring9-workspace{grid-template-columns:1fr}
  .coloring9-tools{grid-template-columns:repeat(3,1fr)}
  .coloring9-tool{min-height:88px}
}
@media(max-width:520px){
  .coloring9-level-bar{align-items:flex-start;flex-direction:column}
  .coloring9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .coloring9-tool{padding:9px 5px;min-height:80px}
  .coloring9-tool-swatch,.coloring9-tool-icon{width:38px;height:38px}
  .coloring9-controls{flex-direction:column}.coloring9-controls>*{width:100%}
}


/* Activity 10 — Sticker Page / Red Course Reward */
.sticker10-shell{max-width:1120px}
.sticker10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.sticker10-progress-card h2{margin:.15rem 0 13px}
.sticker10-progress-track{
  height:15px;background:#eee6f0;border-radius:99px;overflow:hidden
}
.sticker10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#ff9ca5,var(--red));
  border-radius:inherit;transition:width .22s ease
}

.sticker10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.sticker10-tray-card,.sticker10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.sticker10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.sticker10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffafb;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.sticker10-sticker:hover,.sticker10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#ffabb2;outline:none
}
.sticker10-sticker img{width:100%;height:95px;object-fit:contain}
.sticker10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.sticker10-sticker.selected{
  border-color:var(--red);background:#fff0f1;box-shadow:0 0 0 5px rgba(239,51,64,.09)
}
.sticker10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.sticker10-tray-controls{
  display:flex;justify-content:space-between;gap:10px;margin-top:14px
}
.sticker10-tray-card>.activity-feedback{margin-top:15px}

.sticker10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.sticker10-board-heading h2{margin:.2rem 0 0}
.sticker10-selected-pill{
  border-radius:99px;background:var(--red-soft);color:var(--red-dark);padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.sticker10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.sticker10-slot{
  aspect-ratio:1;border:3px dashed #e2d7e5;border-radius:28px;background:#fffafb;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.sticker10-slot:hover,.sticker10-slot:focus-visible{
  transform:scale(1.02);border-color:#ffabb2;outline:none;background:#fff5f6
}
.sticker10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f0eaf3;color:#8b7e94;display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.sticker10-slot img{
  width:100%;height:100%;object-fit:contain;animation:stickerPop .38s ease
}
.sticker10-slot.filled{
  border-style:solid;border-color:#ffb8be;background:#fff6f7;cursor:default
}
@keyframes stickerPop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.sticker10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.sticker10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff0f1);
  border:4px solid #f4c84c;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.sticker10-certificate[hidden]{display:none}
.sticker10-certificate:before,.sticker10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(239,51,64,.06)
}
.sticker10-certificate:before{left:-45px;top:-45px}
.sticker10-certificate:after{right:-45px;bottom:-45px}
.sticker10-ribbon{
  display:inline-block;background:var(--red);color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 var(--red-dark);margin-bottom:20px
}
.sticker10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.sticker10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.sticker10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:var(--red-dark)
}
.sticker10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.sticker10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .sticker10-layout{grid-template-columns:1fr}
  .sticker10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .sticker10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticker10-tray-controls{flex-direction:column}.sticker10-tray-controls>*{width:100%}
  .sticker10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticker10-board-heading{align-items:flex-start;flex-direction:column}
  .sticker10-selected-pill{align-self:stretch}
  .sticker10-certificate-art img{width:70px;height:70px}
}

@media print{
  body *{visibility:hidden!important}
  #sticker10-certificate,#sticker10-certificate *{visibility:visible!important}
  #sticker10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .sticker10-certificate-actions{display:none!important}
}


/* Orange course theme */
.theme-orange{
  --orange:#ff8626;
  --orange-dark:#d76510;
  --orange-soft:#fff1e5;
}
.theme-orange .eyebrow{color:#cf6416}
.orange-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#ff8626;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(255,134,38,.19)
}
.orange-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.orange-target-word{color:#ff8626}
.orange-primary{
  background:#ff8626;
  box-shadow:0 7px 0 #d76510
}
.orange-primary:active{box-shadow:0 4px 0 #d76510}
.orange-progress-pill{background:#fff0e2;color:#bd5912}
.orange-ready{border-color:#ffc08b!important}
.orange-swatch{
  background:#ff8626;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(255,134,38,.20)
}
.orange-giant-word{color:#ff8626;font-size:clamp(2.6rem,9vw,6rem)}
.orange-listen{border-color:#ffc08b;color:#bd5912}
.orange-object-card:hover,.orange-object-card:focus-visible{border-color:#ffb06f}
.orange-check-red{background:#ef3340}
.orange-check-orange{background:#ff8626}
.orange-check-blue{background:#3d8df5}


/* Orange Activity 2 — Find Orange */
.orange-counter-pill{background:#fff0e2;color:#bd5912}
.orange-find-item:hover,.orange-find-item:focus-visible{border-color:#ffb06f}
.orange-find-item.found{
  border-color:#ff9b50;
  background:#fff4e9;
  box-shadow:0 8px 20px rgba(255,134,38,.10)
}
.orange-find-item.found .find-check{
  background:#ff8626
}


/* Orange Activity 3 — Trace Orange */
.orange-trace-shell{max-width:1040px}
.orange-trace-stage{max-width:720px}
.orange-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.orange-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.orange-trace-tab.active{
  border-color:#ffb06f;
  background:#fff2e7;
  color:#bd5912
}
.orange-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.orange-trace-frame{
  border-color:#ffd1ad;
  background:#fffaf5
}
.orange-trace-frame.complete{border-color:#6fcb8c}
.orange-trace-progress span{
  background:linear-gradient(90deg,#ffc38f,#ff8626)
}
.orange-trace-celebration{
  background:linear-gradient(135deg,#fff5dc,#fff3e6);
  border-color:#ffd083
}
@media(max-width:560px){
  .orange-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .orange-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .orange-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Orange Activity 4 — Orange Around Us */
.orange4-shell{max-width:1040px}
.orange4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.orange4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.orange4-strip-item img{width:100%;height:98px;object-fit:contain}
.orange4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.orange4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.orange4-dots{display:flex;gap:10px}
.orange4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.orange4-dots span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.16)}
.orange4-dots span.done{background:#58bf77;border-color:#58bf77}

.orange4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.orange4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.orange4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#bd5912;font-weight:1000
}
.orange4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.orange4-scene-head p{margin:0;color:var(--muted)}

.orange4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.orange4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffaf6);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.orange4-choice:hover,.orange4-choice:focus-visible{
  transform:translateY(-4px);border-color:#ffb06f;box-shadow:0 12px 25px rgba(255,134,38,.10);outline:none
}
.orange4-image{height:170px;display:grid;place-items:center}
.orange4-image img{width:100%;height:100%;object-fit:contain}
.orange4-choice strong{display:block;margin-top:7px}
.orange4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#ff8626;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.orange4-choice.correct{
  border-color:#ff9b50;background:#fff4e9;box-shadow:0 10px 24px rgba(255,134,38,.12)
}
.orange4-choice.correct .orange4-check{opacity:1;transform:scale(1)}
.orange4-choice.correct img{animation:orange4Pop .4s ease}
.orange4-choice.quiet{opacity:.55}
.orange4-choice.wrong{animation:wrongBounce .35s ease}
.orange4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.orange4-celebration{
  background:linear-gradient(135deg,#fff5dc,#fff3e6);
  border-color:#ffd083
}
@keyframes orange4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .orange4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orange4-scene-head{align-items:flex-start;flex-direction:column}
  .orange4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .orange4-progress-card{align-items:flex-start;flex-direction:column}
  .orange4-choice{min-height:185px}
  .orange4-image{height:125px}
  .orange4-next-wrap .primary-button{width:100%}
}


/* Orange Activity 5 — Light & Dark Orange */
.orange5-shell{max-width:1040px}
.orange5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.orange5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.orange5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.orange5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.orange5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.orange5-dots{display:flex;gap:9px}
.orange5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.orange5-dots span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.15)}
.orange5-dots span.done{background:#58bf77;border-color:#58bf77}

.orange5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.orange5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.orange5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#bd5912
}
.orange5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.orange5-heading p{margin:0;color:var(--muted)}

.orange5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.orange5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffaf6;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.orange5-choice:hover,.orange5-choice:focus-visible{
  transform:translateY(-4px);border-color:#ffb06f;box-shadow:0 12px 26px rgba(255,134,38,.10);outline:none
}
.orange5-choice img{width:100%;height:245px;object-fit:contain}
.orange5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.orange5-choice.correct{
  border-color:#ff9b50;background:#fff4e9;box-shadow:0 10px 24px rgba(255,134,38,.12)
}
.orange5-choice.quiet{opacity:.58}
.orange5-choice.wrong{animation:wrongBounce .35s ease}
.orange5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#ff8626;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.orange5-choice.correct .orange5-check{opacity:1;transform:scale(1)}
.orange5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.orange5-celebration{
  background:linear-gradient(135deg,#fff5dc,#fff3e6);
  border-color:#ffd083
}

@media(max-width:820px){
  .orange5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .orange5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .orange5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orange5-level-bar{align-items:flex-start;flex-direction:column}
  .orange5-choice-row{grid-template-columns:1fr}
  .orange5-choice{min-height:270px}
  .orange5-choice img{height:195px}
  .orange5-controls{flex-direction:column}
  .orange5-controls>*{width:100%}
}


/* Orange Activity 6 — Mix Orange */
.orange6-shell{max-width:1040px}
.orange6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #ffd2ad;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.orange6-rule-card strong{width:100%;text-align:center;color:#bd5912;font-size:1.15rem}
.orange6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.orange6-rule-paint.red{background:#ef3340}
.orange6-rule-paint.yellow{background:#ffd642}
.orange6-rule-paint.orange{background:#ff8626}
.orange6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.orange6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.orange6-dots{display:flex;gap:9px}
.orange6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.orange6-dots span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.16)}
.orange6-dots span.done{background:#58bf77;border-color:#58bf77}

.orange6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.orange6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.orange6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#bd5912;font-weight:1000
}
.orange6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.orange6-heading p{margin:0;color:var(--muted)}

.orange6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.orange6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffaf6;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.orange6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.orange6-paint-blob,.orange6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.orange6-paint-blob.red,.orange6-paint-choice-swatch.red,.orange6-pair-swatches .red{background:#ef3340}
.orange6-paint-blob.yellow,.orange6-paint-choice-swatch.yellow,.orange6-pair-swatches .yellow{background:#ffd642}
.orange6-paint-blob.orange,.orange6-paint-choice-swatch.orange{background:#ff8626}
.orange6-paint-choice-swatch.green{background:#51b85f}
.orange6-paint-choice-swatch.purple{background:#8555cc}
.orange6-paint-choice-swatch.blue,.orange6-pair-swatches .blue{background:#3d8df5}
.orange6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.orange6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.orange6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.orange6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.orange6-choice-grid button,.orange6-pair-grid button,.orange6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.orange6-choice-grid button:hover,.orange6-pair-grid button:hover,.orange6-mixer-paints button:hover,
.orange6-choice-grid button:focus-visible,.orange6-pair-grid button:focus-visible,.orange6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#ffb06f;outline:none
}
.orange6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.orange6-choice-grid button.correct,.orange6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.orange6-choice-grid button.wrong,.orange6-pair-grid button.wrong,.orange6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.orange6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.orange6-pair-grid button{flex-direction:column;min-height:175px}
.orange6-pair-swatches{display:flex;gap:8px}
.orange6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.orange6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.orange6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.orange6-mixer-paints button{flex-direction:column;min-height:145px}
.orange6-mixer-paints button.selected{border-color:#ff9b50;background:#fff4e9}
.orange6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.orange6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.orange6-mixer-bowl span.red{height:45%;background:#ef3340}
.orange6-mixer-bowl span.yellow{height:45%;background:#ffd642}
.orange6-mixer-bowl span.mixed-orange{height:65%;background:#ff8626}
.orange6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.orange6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.orange6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffaf6;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.orange6-object-grid button:hover,.orange6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#ffb06f;outline:none}
.orange6-object-grid img{width:100%;height:175px;object-fit:contain}
.orange6-object-grid strong{display:block;margin-top:6px}
.orange6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.orange6-object-grid button.wrong{animation:wrongBounce .35s ease}

.orange6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.orange6-celebration{background:linear-gradient(135deg,#fff5dc,#fff3e6);border-color:#ffd083}

@media(max-width:820px){
  .orange6-heading{align-items:flex-start;flex-direction:column}
  .orange6-mix-display{grid-template-columns:1fr 38px 1fr}
  .orange6-mix-display .orange6-symbol:nth-of-type(2){grid-column:1/-1}
  .orange6-mix-display .orange6-paint-cup:last-child{grid-column:1/-1}
  .orange6-pair-grid{grid-template-columns:1fr}
  .orange6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .orange6-level-bar{align-items:flex-start;flex-direction:column}
  .orange6-choice-grid{grid-template-columns:1fr}
  .orange6-object-grid{grid-template-columns:1fr}
  .orange6-mixer-paints{grid-template-columns:1fr}
  .orange6-controls{flex-direction:column}.orange6-controls>*{width:100%}
}


/* Orange Activity 7 — Odd One Out */
.orange7-shell{max-width:1040px}
.orange7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.orange7-dots{display:flex;gap:9px}
.orange7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.orange7-dots span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.16)}
.orange7-dots span.done{background:#58bf77;border-color:#58bf77}

.orange7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.orange7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.orange7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#bd5912;font-weight:1000
}
.orange7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.orange7-heading p{margin:0;color:var(--muted)}

.orange7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #ffd4b2;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.orange7-clue span:last-child{color:var(--muted);font-size:.88rem}
.orange7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#ff8626;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.orange7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.orange7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffaf6);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.orange7-choice:hover,.orange7-choice:focus-visible{
  transform:translateY(-4px);border-color:#ffb06f;box-shadow:0 12px 25px rgba(255,134,38,.10);outline:none
}
.orange7-image{height:170px;display:grid;place-items:center}
.orange7-image img{width:100%;height:100%;object-fit:contain}
.orange7-choice strong{display:block;font-size:1rem;margin-top:7px}
.orange7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.orange7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.orange7-choice.correct .orange7-check{opacity:1;transform:scale(1)}
.orange7-choice.correct img{animation:orange7Correct .4s ease}
.orange7-choice.quiet{opacity:.55}
.orange7-choice.orange-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(255,134,38,.10)
}
.orange7-choice.wrong{animation:wrongBounce .35s ease}
.orange7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.orange7-celebration{background:linear-gradient(135deg,#fff5dc,#fff3e6);border-color:#ffd083}
@keyframes orange7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .orange7-heading{align-items:flex-start;flex-direction:column}
  .orange7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .orange7-level-bar{align-items:flex-start;flex-direction:column}
  .orange7-choice{min-height:190px}
  .orange7-image{height:125px}
  .orange7-controls{flex-direction:column}
  .orange7-controls>*{width:100%}
}


/* Orange Activity 8 — Story / Read-Along */
.orange8-shell{max-width:1000px}
.orange8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.orange8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.orange8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.orange8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.orange8-page-pill{
  white-space:nowrap;background:#fff0e2;color:#bd5912;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.orange8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffaf5,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.orange8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.orange8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.orange8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.orange8-copy p{margin:.4rem 0 18px}
.orange8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#fff0e2;
  color:#bd5912;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.orange8-orange-word{
  color:#d76510;background:#fff0e2;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(255,134,38,.08)
}
.orange8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.orange8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#ff8626);
  border-radius:inherit;transition:width .22s ease
}
.orange8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.orange8-mini-pages{display:flex;justify-content:center;gap:8px}
.orange8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.orange8-mini-pages span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.17)}
.orange8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.orange8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.orange8-questions[hidden]{display:none}
.orange8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffaf6
}
.orange8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.orange8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.orange8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.orange8-answer-grid button:hover,.orange8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#ffb06f;outline:none
}
.orange8-answer-grid img{width:100%;height:135px;object-fit:contain}
.orange8-answer-grid strong{display:block;margin-top:7px}
.orange8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.orange8-answer-grid button.quiet{opacity:.52}
.orange8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.orange8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.orange8-question-feedback.good{background:#effcf3;color:#26723e}
.orange8-question-feedback.try{background:#fff2e7;color:#9b4b12}
.orange8-celebration{background:linear-gradient(135deg,#fff5dc,#fff3e6);border-color:#ffd083}

@media(max-width:760px){
  .orange8-book-top{align-items:flex-start;flex-direction:column}
  .orange8-page{grid-template-columns:1fr;min-height:auto}
  .orange8-art-wrap{height:265px}
  .orange8-copy{text-align:center}
  .orange8-nav{grid-template-columns:1fr 1fr}
  .orange8-mini-pages{grid-column:1/-1;grid-row:1}
  .orange8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .orange8-art-wrap{height:220px}
  .orange8-nav{grid-template-columns:1fr}
  .orange8-mini-pages{grid-column:auto;grid-row:auto}
  .orange8-nav>*{width:100%}
}


/* Orange Activity 9 — Coloring Time */
.orange9-shell{max-width:1040px}
.orange9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.orange9-dots{display:flex;gap:10px}
.orange9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.orange9-dots span.active{background:#ff8626;border-color:#ff8626;transform:scale(1.16)}
.orange9-dots span.done{background:#58bf77;border-color:#58bf77}

.orange9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.orange9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.orange9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#bd5912;font-weight:1000
}
.orange9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.orange9-heading p{margin:0;color:var(--muted);max-width:650px}
.orange9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#fff5ea;border:1px solid #ffd4b2;
  border-radius:22px;padding:9px
}
.orange9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#bd5912;margin-bottom:5px}
.orange9-reference img{width:90px;height:90px;object-fit:contain}

.orange9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.orange9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffaf6;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.orange9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#orange9-paint-canvas,#orange9-lineart{position:absolute;inset:0;width:100%;height:100%}
#orange9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#orange9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.orange9-tools{display:grid;gap:12px}
.orange9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.orange9-tool.active{border-color:#ffb06f;background:#fff2e7;box-shadow:0 7px 18px rgba(255,134,38,.10)}
.orange9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.orange9-tool-swatch.orange{background:#ff8626}
.orange9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.orange9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.orange9-tool strong{font-size:.82rem}

.orange9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.orange9-progress-row strong{color:#bd5912}
.orange9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.orange9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#ffc38f,#ff8626);
  border-radius:inherit;transition:width .12s ease
}
.orange9-card>.activity-feedback{max-width:850px;margin:0 auto}
.orange9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.orange9-celebration{background:linear-gradient(135deg,#fff5dc,#fff3e6);border-color:#ffd083}

@media(max-width:760px){
  .orange9-heading{align-items:flex-start;flex-direction:column}
  .orange9-reference{align-self:flex-end}
  .orange9-workspace{grid-template-columns:1fr}
  .orange9-tools{grid-template-columns:repeat(3,1fr)}
  .orange9-tool{min-height:88px}
}
@media(max-width:520px){
  .orange9-level-bar{align-items:flex-start;flex-direction:column}
  .orange9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .orange9-tool{padding:9px 5px;min-height:80px}
  .orange9-tool-swatch,.orange9-tool-icon{width:38px;height:38px}
  .orange9-controls{flex-direction:column}.orange9-controls>*{width:100%}
}


/* Orange Activity 10 — Sticker Page / Course Reward */
.orange10-shell{max-width:1120px}
.orange10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.orange10-progress-card h2{margin:.15rem 0 13px}
.orange10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.orange10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#ffc38f,#ff8626);
  border-radius:inherit;transition:width .22s ease
}

.orange10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.orange10-tray-card,.orange10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.orange10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.orange10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffaf6;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.orange10-sticker:hover,.orange10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#ffb06f;outline:none
}
.orange10-sticker img{width:100%;height:95px;object-fit:contain}
.orange10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.orange10-sticker.selected{
  border-color:#ff8626;background:#fff2e7;box-shadow:0 0 0 5px rgba(255,134,38,.10)
}
.orange10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.orange10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.orange10-tray-card>.activity-feedback{margin-top:15px}

.orange10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.orange10-board-heading h2{margin:.2rem 0 0}
.orange10-selected-pill{
  border-radius:99px;background:#fff0e2;color:#bd5912;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.orange10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.orange10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffaf6;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.orange10-slot:hover,.orange10-slot:focus-visible{
  transform:scale(1.02);border-color:#ffb06f;outline:none;background:#fff4e9
}
.orange10-slot span{
  width:52px;height:52px;border-radius:50%;background:#fff0e2;color:#bd5912;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.orange10-slot img{width:100%;height:100%;object-fit:contain;animation:orange10Pop .38s ease}
.orange10-slot.filled{
  border-style:solid;border-color:#ffc08b;background:#fff4e9;cursor:default
}
@keyframes orange10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.orange10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.orange10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.orange10-certificate[hidden]{display:none}
.orange10-certificate:before,.orange10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(255,134,38,.08)
}
.orange10-certificate:before{left:-45px;top:-45px}
.orange10-certificate:after{right:-45px;bottom:-45px}
.orange10-ribbon{
  display:inline-block;background:#ff8626;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #d76510;margin-bottom:20px
}
.orange10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.orange10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.orange10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#bd5912
}
.orange10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.orange10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .orange10-layout{grid-template-columns:1fr}
  .orange10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .orange10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orange10-tray-controls{flex-direction:column}.orange10-tray-controls>*{width:100%}
  .orange10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orange10-board-heading{align-items:flex-start;flex-direction:column}
  .orange10-selected-pill{align-self:stretch}
  .orange10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-orange *{visibility:hidden!important}
  #orange10-certificate,#orange10-certificate *{visibility:visible!important}
  #orange10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .orange10-certificate-actions{display:none!important}
}


/* Yellow course theme */
.theme-yellow{
  --yellow:#ffd642;
  --yellow-dark:#9b7000;
  --yellow-soft:#fff1e5;
}
.theme-yellow .eyebrow{color:#8b6800}
.yellow-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#ffd642;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(245,196,0,.19)
}
.yellow-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.yellow-target-word{color:#ffd642}
.yellow-primary{
  background:#ffd642;
  box-shadow:0 7px 0 #9b7000
}
.yellow-primary:active{box-shadow:0 4px 0 #9b7000}
.yellow-progress-pill{background:#fff6c7;color:#7d5e00}
.yellow-ready{border-color:#ead15a!important}
.yellow-swatch{
  background:#ffd642;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(245,196,0,.20)
}
.yellow-giant-word{color:#ffd642;font-size:clamp(2.6rem,9vw,6rem)}
.yellow-listen{border-color:#ead15a;color:#7d5e00}
.yellow-object-card:hover,.yellow-object-card:focus-visible{border-color:#e6c62f}
.yellow-check-red{background:#ef3340}
.yellow-check-yellow{background:#ffd642}
.yellow-check-blue{background:#3d8df5}


/* Yellow Activity 2 — Find Yellow */
.yellow-counter-pill{background:#fff6c7;color:#7d5e00}
.yellow-find-item:hover,.yellow-find-item:focus-visible{border-color:#e6c62f}
.yellow-find-item.found{
  border-color:#d5aa00;
  background:#fffbea;
  box-shadow:0 8px 20px rgba(245,196,0,.10)
}
.yellow-find-item.found .find-check{
  background:#ffd642
}


/* Yellow Activity 3 — Trace Yellow */
.yellow-trace-shell{max-width:1040px}
.yellow-trace-stage{max-width:720px}
.yellow-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.yellow-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.yellow-trace-tab.active{
  border-color:#e6c62f;
  background:#fff9d9;
  color:#7d5e00
}
.yellow-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.yellow-trace-frame{
  border-color:#f0dd78;
  background:#fffdf4
}
.yellow-trace-frame.complete{border-color:#6fcb8c}
.yellow-trace-progress span{
  background:linear-gradient(90deg,#fff0a0,#ffd642)
}
.yellow-trace-celebration{
  background:linear-gradient(135deg,#fffce4,#fff7bd);
  border-color:#ead15a
}
@media(max-width:560px){
  .yellow-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .yellow-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .yellow-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Yellow Activity 4 — Yellow Around Us */
.yellow4-shell{max-width:1040px}
.yellow4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.yellow4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.yellow4-strip-item img{width:100%;height:98px;object-fit:contain}
.yellow4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.yellow4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.yellow4-dots{display:flex;gap:10px}
.yellow4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.yellow4-dots span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.16)}
.yellow4-dots span.done{background:#58bf77;border-color:#58bf77}

.yellow4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.yellow4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.yellow4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#7d5e00;font-weight:1000
}
.yellow4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.yellow4-scene-head p{margin:0;color:var(--muted)}

.yellow4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.yellow4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.yellow4-choice:hover,.yellow4-choice:focus-visible{
  transform:translateY(-4px);border-color:#e6c62f;box-shadow:0 12px 25px rgba(245,196,0,.10);outline:none
}
.yellow4-image{height:170px;display:grid;place-items:center}
.yellow4-image img{width:100%;height:100%;object-fit:contain}
.yellow4-choice strong{display:block;margin-top:7px}
.yellow4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#ffd642;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.yellow4-choice.correct{
  border-color:#d5aa00;background:#fffbea;box-shadow:0 10px 24px rgba(245,196,0,.12)
}
.yellow4-choice.correct .yellow4-check{opacity:1;transform:scale(1)}
.yellow4-choice.correct img{animation:yellow4Pop .4s ease}
.yellow4-choice.quiet{opacity:.55}
.yellow4-choice.wrong{animation:wrongBounce .35s ease}
.yellow4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.yellow4-celebration{
  background:linear-gradient(135deg,#fffce4,#fff7bd);
  border-color:#ead15a
}
@keyframes yellow4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .yellow4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yellow4-scene-head{align-items:flex-start;flex-direction:column}
  .yellow4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .yellow4-progress-card{align-items:flex-start;flex-direction:column}
  .yellow4-choice{min-height:185px}
  .yellow4-image{height:125px}
  .yellow4-next-wrap .primary-button{width:100%}
}


/* Yellow Activity 5 — Light & Dark Yellow */
.yellow5-shell{max-width:1040px}
.yellow5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.yellow5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.yellow5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.yellow5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.yellow5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.yellow5-dots{display:flex;gap:9px}
.yellow5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.yellow5-dots span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.15)}
.yellow5-dots span.done{background:#58bf77;border-color:#58bf77}

.yellow5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.yellow5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.yellow5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#7d5e00
}
.yellow5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.yellow5-heading p{margin:0;color:var(--muted)}

.yellow5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.yellow5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.yellow5-choice:hover,.yellow5-choice:focus-visible{
  transform:translateY(-4px);border-color:#e6c62f;box-shadow:0 12px 26px rgba(245,196,0,.10);outline:none
}
.yellow5-choice img{width:100%;height:245px;object-fit:contain}
.yellow5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.yellow5-choice.correct{
  border-color:#d5aa00;background:#fffbea;box-shadow:0 10px 24px rgba(245,196,0,.12)
}
.yellow5-choice.quiet{opacity:.58}
.yellow5-choice.wrong{animation:wrongBounce .35s ease}
.yellow5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#ffd642;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.yellow5-choice.correct .yellow5-check{opacity:1;transform:scale(1)}
.yellow5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.yellow5-celebration{
  background:linear-gradient(135deg,#fffce4,#fff7bd);
  border-color:#ead15a
}

@media(max-width:820px){
  .yellow5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yellow5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .yellow5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yellow5-level-bar{align-items:flex-start;flex-direction:column}
  .yellow5-choice-row{grid-template-columns:1fr}
  .yellow5-choice{min-height:270px}
  .yellow5-choice img{height:195px}
  .yellow5-controls{flex-direction:column}
  .yellow5-controls>*{width:100%}
}


/* Yellow Activity 6 — Mix Yellow */
.yellow6-shell{max-width:1040px}
.yellow6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #f0dd78;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.yellow6-rule-card strong{width:100%;text-align:center;color:#7d5e00;font-size:1.15rem}
.yellow6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.yellow6-rule-paint.red{background:#ef3340}
.yellow6-rule-paint.yellow{background:#ffd642}
.yellow6-rule-paint.yellow{background:#ffd642}
.yellow6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.yellow6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.yellow6-dots{display:flex;gap:9px}
.yellow6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.yellow6-dots span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.16)}
.yellow6-dots span.done{background:#58bf77;border-color:#58bf77}

.yellow6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.yellow6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.yellow6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#7d5e00;font-weight:1000
}
.yellow6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.yellow6-heading p{margin:0;color:var(--muted)}

.yellow6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.yellow6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.yellow6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.yellow6-paint-blob,.yellow6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.yellow6-paint-blob.red,.yellow6-paint-choice-swatch.red,.yellow6-pair-swatches .red{background:#ef3340}
.yellow6-paint-blob.yellow,.yellow6-paint-choice-swatch.yellow,.yellow6-pair-swatches .yellow{background:#ffd642}
.yellow6-paint-blob.yellow,.yellow6-paint-choice-swatch.yellow{background:#ffd642}
.yellow6-paint-choice-swatch.green{background:#51b85f}
.yellow6-paint-choice-swatch.purple{background:#8555cc}
.yellow6-paint-choice-swatch.blue,.yellow6-pair-swatches .blue{background:#3d8df5}
.yellow6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.yellow6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.yellow6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.yellow6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.yellow6-choice-grid button,.yellow6-pair-grid button,.yellow6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.yellow6-choice-grid button:hover,.yellow6-pair-grid button:hover,.yellow6-mixer-paints button:hover,
.yellow6-choice-grid button:focus-visible,.yellow6-pair-grid button:focus-visible,.yellow6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#e6c62f;outline:none
}
.yellow6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.yellow6-choice-grid button.correct,.yellow6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.yellow6-choice-grid button.wrong,.yellow6-pair-grid button.wrong,.yellow6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.yellow6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.yellow6-pair-grid button{flex-direction:column;min-height:175px}
.yellow6-pair-swatches{display:flex;gap:8px}
.yellow6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.yellow6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.yellow6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.yellow6-mixer-paints button{flex-direction:column;min-height:145px}
.yellow6-mixer-paints button.selected{border-color:#d5aa00;background:#fffbea}
.yellow6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.yellow6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.yellow6-mixer-bowl span.red{height:45%;background:#ef3340}
.yellow6-mixer-bowl span.yellow{height:45%;background:#ffd642}
.yellow6-mixer-bowl span.mixed-yellow{height:65%;background:#ffd642}
.yellow6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.yellow6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.yellow6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.yellow6-object-grid button:hover,.yellow6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#e6c62f;outline:none}
.yellow6-object-grid img{width:100%;height:175px;object-fit:contain}
.yellow6-object-grid strong{display:block;margin-top:6px}
.yellow6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.yellow6-object-grid button.wrong{animation:wrongBounce .35s ease}

.yellow6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.yellow6-celebration{background:linear-gradient(135deg,#fffce4,#fff7bd);border-color:#ead15a}

@media(max-width:820px){
  .yellow6-heading{align-items:flex-start;flex-direction:column}
  .yellow6-mix-display{grid-template-columns:1fr 38px 1fr}
  .yellow6-mix-display .yellow6-symbol:nth-of-type(2){grid-column:1/-1}
  .yellow6-mix-display .yellow6-paint-cup:last-child{grid-column:1/-1}
  .yellow6-pair-grid{grid-template-columns:1fr}
  .yellow6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .yellow6-level-bar{align-items:flex-start;flex-direction:column}
  .yellow6-choice-grid{grid-template-columns:1fr}
  .yellow6-object-grid{grid-template-columns:1fr}
  .yellow6-mixer-paints{grid-template-columns:1fr}
  .yellow6-controls{flex-direction:column}.yellow6-controls>*{width:100%}
}


/* Yellow Activity 7 — Odd One Out */
.yellow7-shell{max-width:1040px}
.yellow7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.yellow7-dots{display:flex;gap:9px}
.yellow7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.yellow7-dots span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.16)}
.yellow7-dots span.done{background:#58bf77;border-color:#58bf77}

.yellow7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.yellow7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.yellow7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#7d5e00;font-weight:1000
}
.yellow7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.yellow7-heading p{margin:0;color:var(--muted)}

.yellow7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #ead15a;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.yellow7-clue span:last-child{color:var(--muted);font-size:.88rem}
.yellow7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#ffd642;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.yellow7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.yellow7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.yellow7-choice:hover,.yellow7-choice:focus-visible{
  transform:translateY(-4px);border-color:#e6c62f;box-shadow:0 12px 25px rgba(245,196,0,.10);outline:none
}
.yellow7-image{height:170px;display:grid;place-items:center}
.yellow7-image img{width:100%;height:100%;object-fit:contain}
.yellow7-choice strong{display:block;font-size:1rem;margin-top:7px}
.yellow7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.yellow7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.yellow7-choice.correct .yellow7-check{opacity:1;transform:scale(1)}
.yellow7-choice.correct img{animation:yellow7Correct .4s ease}
.yellow7-choice.quiet{opacity:.55}
.yellow7-choice.yellow-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(245,196,0,.10)
}
.yellow7-choice.wrong{animation:wrongBounce .35s ease}
.yellow7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.yellow7-celebration{background:linear-gradient(135deg,#fffce4,#fff7bd);border-color:#ead15a}
@keyframes yellow7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .yellow7-heading{align-items:flex-start;flex-direction:column}
  .yellow7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .yellow7-level-bar{align-items:flex-start;flex-direction:column}
  .yellow7-choice{min-height:190px}
  .yellow7-image{height:125px}
  .yellow7-controls{flex-direction:column}
  .yellow7-controls>*{width:100%}
}


/* Yellow Activity 8 — Story / Read-Along */
.yellow8-shell{max-width:1000px}
.yellow8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.yellow8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.yellow8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.yellow8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.yellow8-page-pill{
  white-space:nowrap;background:#fff6c7;color:#7d5e00;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.yellow8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.yellow8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.yellow8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.yellow8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.yellow8-copy p{margin:.4rem 0 18px}
.yellow8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#fff6c7;
  color:#7d5e00;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.yellow8-yellow-word{
  color:#9b7000;background:#fff6c7;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(245,196,0,.08)
}
.yellow8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.yellow8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#ffd642);
  border-radius:inherit;transition:width .22s ease
}
.yellow8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.yellow8-mini-pages{display:flex;justify-content:center;gap:8px}
.yellow8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.yellow8-mini-pages span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.17)}
.yellow8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.yellow8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.yellow8-questions[hidden]{display:none}
.yellow8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.yellow8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.yellow8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.yellow8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.yellow8-answer-grid button:hover,.yellow8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#e6c62f;outline:none
}
.yellow8-answer-grid img{width:100%;height:135px;object-fit:contain}
.yellow8-answer-grid strong{display:block;margin-top:7px}
.yellow8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.yellow8-answer-grid button.quiet{opacity:.52}
.yellow8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.yellow8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.yellow8-question-feedback.good{background:#effcf3;color:#26723e}
.yellow8-question-feedback.try{background:#fff9d9;color:#9b4b12}
.yellow8-celebration{background:linear-gradient(135deg,#fffce4,#fff7bd);border-color:#ead15a}

@media(max-width:760px){
  .yellow8-book-top{align-items:flex-start;flex-direction:column}
  .yellow8-page{grid-template-columns:1fr;min-height:auto}
  .yellow8-art-wrap{height:265px}
  .yellow8-copy{text-align:center}
  .yellow8-nav{grid-template-columns:1fr 1fr}
  .yellow8-mini-pages{grid-column:1/-1;grid-row:1}
  .yellow8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .yellow8-art-wrap{height:220px}
  .yellow8-nav{grid-template-columns:1fr}
  .yellow8-mini-pages{grid-column:auto;grid-row:auto}
  .yellow8-nav>*{width:100%}
}


/* Yellow Activity 9 — Coloring Time */
.yellow9-shell{max-width:1040px}
.yellow9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.yellow9-dots{display:flex;gap:10px}
.yellow9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.yellow9-dots span.active{background:#ffd642;border-color:#ffd642;transform:scale(1.16)}
.yellow9-dots span.done{background:#58bf77;border-color:#58bf77}

.yellow9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.yellow9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.yellow9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#7d5e00;font-weight:1000
}
.yellow9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.yellow9-heading p{margin:0;color:var(--muted);max-width:650px}
.yellow9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#fffbea;border:1px solid #ead15a;
  border-radius:22px;padding:9px
}
.yellow9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#7d5e00;margin-bottom:5px}
.yellow9-reference img{width:90px;height:90px;object-fit:contain}

.yellow9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.yellow9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.yellow9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#yellow9-paint-canvas,#yellow9-lineart{position:absolute;inset:0;width:100%;height:100%}
#yellow9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#yellow9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.yellow9-tools{display:grid;gap:12px}
.yellow9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.yellow9-tool.active{border-color:#e6c62f;background:#fff9d9;box-shadow:0 7px 18px rgba(245,196,0,.10)}
.yellow9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.yellow9-tool-swatch.yellow{background:#ffd642}
.yellow9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.yellow9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.yellow9-tool strong{font-size:.82rem}

.yellow9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.yellow9-progress-row strong{color:#7d5e00}
.yellow9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.yellow9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#fff0a0,#ffd642);
  border-radius:inherit;transition:width .12s ease
}
.yellow9-card>.activity-feedback{max-width:850px;margin:0 auto}
.yellow9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.yellow9-celebration{background:linear-gradient(135deg,#fffce4,#fff7bd);border-color:#ead15a}

@media(max-width:760px){
  .yellow9-heading{align-items:flex-start;flex-direction:column}
  .yellow9-reference{align-self:flex-end}
  .yellow9-workspace{grid-template-columns:1fr}
  .yellow9-tools{grid-template-columns:repeat(3,1fr)}
  .yellow9-tool{min-height:88px}
}
@media(max-width:520px){
  .yellow9-level-bar{align-items:flex-start;flex-direction:column}
  .yellow9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .yellow9-tool{padding:9px 5px;min-height:80px}
  .yellow9-tool-swatch,.yellow9-tool-icon{width:38px;height:38px}
  .yellow9-controls{flex-direction:column}.yellow9-controls>*{width:100%}
}


/* Yellow Activity 10 — Sticker Page / Course Reward */
.yellow10-shell{max-width:1120px}
.yellow10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.yellow10-progress-card h2{margin:.15rem 0 13px}
.yellow10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.yellow10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#fff0a0,#ffd642);
  border-radius:inherit;transition:width .22s ease
}

.yellow10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.yellow10-tray-card,.yellow10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.yellow10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.yellow10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.yellow10-sticker:hover,.yellow10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#e6c62f;outline:none
}
.yellow10-sticker img{width:100%;height:95px;object-fit:contain}
.yellow10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.yellow10-sticker.selected{
  border-color:#ffd642;background:#fff9d9;box-shadow:0 0 0 5px rgba(245,196,0,.10)
}
.yellow10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.yellow10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.yellow10-tray-card>.activity-feedback{margin-top:15px}

.yellow10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.yellow10-board-heading h2{margin:.2rem 0 0}
.yellow10-selected-pill{
  border-radius:99px;background:#fff6c7;color:#7d5e00;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.yellow10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.yellow10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.yellow10-slot:hover,.yellow10-slot:focus-visible{
  transform:scale(1.02);border-color:#e6c62f;outline:none;background:#fffbea
}
.yellow10-slot span{
  width:52px;height:52px;border-radius:50%;background:#fff6c7;color:#7d5e00;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.yellow10-slot img{width:100%;height:100%;object-fit:contain;animation:yellow10Pop .38s ease}
.yellow10-slot.filled{
  border-style:solid;border-color:#ead15a;background:#fffbea;cursor:default
}
@keyframes yellow10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.yellow10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.yellow10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.yellow10-certificate[hidden]{display:none}
.yellow10-certificate:before,.yellow10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(245,196,0,.08)
}
.yellow10-certificate:before{left:-45px;top:-45px}
.yellow10-certificate:after{right:-45px;bottom:-45px}
.yellow10-ribbon{
  display:inline-block;background:#ffd642;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #9b7000;margin-bottom:20px
}
.yellow10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.yellow10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.yellow10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#7d5e00
}
.yellow10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.yellow10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .yellow10-layout{grid-template-columns:1fr}
  .yellow10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .yellow10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yellow10-tray-controls{flex-direction:column}.yellow10-tray-controls>*{width:100%}
  .yellow10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yellow10-board-heading{align-items:flex-start;flex-direction:column}
  .yellow10-selected-pill{align-self:stretch}
  .yellow10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-yellow *{visibility:hidden!important}
  #yellow10-certificate,#yellow10-certificate *{visibility:visible!important}
  #yellow10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .yellow10-certificate-actions{display:none!important}
}


/* Green course theme */
.theme-green{
  --green:#61c86a;
  --green-dark:#245b2c;
  --green-soft:#fff1e5;
}
.theme-green .eyebrow{color:#2e7037}
.green-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#61c86a;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(70,170,82,.19)
}
.green-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.green-target-word{color:#61c86a}
.green-primary{
  background:#61c86a;
  box-shadow:0 7px 0 #245b2c
}
.green-primary:active{box-shadow:0 4px 0 #245b2c}
.green-progress-pill{background:#e8f8e9;color:#2e7037}
.green-ready{border-color:#8bd792!important}
.green-swatch{
  background:#61c86a;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(70,170,82,.20)
}
.green-giant-word{color:#61c86a;font-size:clamp(2.6rem,9vw,6rem)}
.green-listen{border-color:#8bd792;color:#2e7037}
.green-object-card:hover,.green-object-card:focus-visible{border-color:#65bf70}
.green-check-red{background:#ef3340}
.green-check-green{background:#61c86a}
.green-check-blue{background:#3d8df5}


/* Green Activity 2 — Find Green */
.green-counter-pill{background:#e8f8e9;color:#2e7037}
.green-find-item:hover,.green-find-item:focus-visible{border-color:#65bf70}
.green-find-item.found{
  border-color:#49a957;
  background:#f4fcf5;
  box-shadow:0 8px 20px rgba(70,170,82,.10)
}
.green-find-item.found .find-check{
  background:#61c86a
}


/* Green Activity 3 — Trace Green */
.green-trace-shell{max-width:1040px}
.green-trace-stage{max-width:720px}
.green-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.green-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.green-trace-tab.active{
  border-color:#65bf70;
  background:#f1fbf2;
  color:#2e7037
}
.green-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.green-trace-frame{
  border-color:#a6dfac;
  background:#fffdf4
}
.green-trace-frame.complete{border-color:#6fcb8c}
.green-trace-progress span{
  background:linear-gradient(90deg,#bce9c0,#61c86a)
}
.green-trace-celebration{
  background:linear-gradient(135deg,#f2fbf3,#def5e1);
  border-color:#8bd792
}
@media(max-width:560px){
  .green-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .green-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .green-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Green Activity 4 — Green Around Us */
.green4-shell{max-width:1040px}
.green4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.green4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.green4-strip-item img{width:100%;height:98px;object-fit:contain}
.green4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.green4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.green4-dots{display:flex;gap:10px}
.green4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.green4-dots span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.16)}
.green4-dots span.done{background:#58bf77;border-color:#58bf77}

.green4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.green4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.green4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#2e7037;font-weight:1000
}
.green4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.green4-scene-head p{margin:0;color:var(--muted)}

.green4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.green4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.green4-choice:hover,.green4-choice:focus-visible{
  transform:translateY(-4px);border-color:#65bf70;box-shadow:0 12px 25px rgba(70,170,82,.10);outline:none
}
.green4-image{height:170px;display:grid;place-items:center}
.green4-image img{width:100%;height:100%;object-fit:contain}
.green4-choice strong{display:block;margin-top:7px}
.green4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#61c86a;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.green4-choice.correct{
  border-color:#49a957;background:#f4fcf5;box-shadow:0 10px 24px rgba(70,170,82,.12)
}
.green4-choice.correct .green4-check{opacity:1;transform:scale(1)}
.green4-choice.correct img{animation:green4Pop .4s ease}
.green4-choice.quiet{opacity:.55}
.green4-choice.wrong{animation:wrongBounce .35s ease}
.green4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.green4-celebration{
  background:linear-gradient(135deg,#f2fbf3,#def5e1);
  border-color:#8bd792
}
@keyframes green4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .green4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .green4-scene-head{align-items:flex-start;flex-direction:column}
  .green4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .green4-progress-card{align-items:flex-start;flex-direction:column}
  .green4-choice{min-height:185px}
  .green4-image{height:125px}
  .green4-next-wrap .primary-button{width:100%}
}


/* Green Activity 5 — Light & Dark Green */
.green5-shell{max-width:1040px}
.green5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.green5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.green5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.green5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.green5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.green5-dots{display:flex;gap:9px}
.green5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.green5-dots span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.15)}
.green5-dots span.done{background:#58bf77;border-color:#58bf77}

.green5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.green5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.green5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#2e7037
}
.green5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.green5-heading p{margin:0;color:var(--muted)}

.green5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.green5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.green5-choice:hover,.green5-choice:focus-visible{
  transform:translateY(-4px);border-color:#65bf70;box-shadow:0 12px 26px rgba(70,170,82,.10);outline:none
}
.green5-choice img{width:100%;height:245px;object-fit:contain}
.green5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.green5-choice.correct{
  border-color:#49a957;background:#f4fcf5;box-shadow:0 10px 24px rgba(70,170,82,.12)
}
.green5-choice.quiet{opacity:.58}
.green5-choice.wrong{animation:wrongBounce .35s ease}
.green5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#61c86a;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.green5-choice.correct .green5-check{opacity:1;transform:scale(1)}
.green5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.green5-celebration{
  background:linear-gradient(135deg,#f2fbf3,#def5e1);
  border-color:#8bd792
}

@media(max-width:820px){
  .green5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .green5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .green5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .green5-level-bar{align-items:flex-start;flex-direction:column}
  .green5-choice-row{grid-template-columns:1fr}
  .green5-choice{min-height:270px}
  .green5-choice img{height:195px}
  .green5-controls{flex-direction:column}
  .green5-controls>*{width:100%}
}


/* Green Activity 6 — Mix Green */
.green6-shell{max-width:1040px}
.green6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #a6dfac;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.green6-rule-card strong{width:100%;text-align:center;color:#2e7037;font-size:1.15rem}
.green6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.green6-rule-paint.red{background:#ef3340}
.green6-rule-paint.green{background:#61c86a}
.green6-rule-paint.green{background:#61c86a}
.green6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.green6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.green6-dots{display:flex;gap:9px}
.green6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.green6-dots span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.16)}
.green6-dots span.done{background:#58bf77;border-color:#58bf77}

.green6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.green6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.green6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#2e7037;font-weight:1000
}
.green6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.green6-heading p{margin:0;color:var(--muted)}

.green6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.green6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.green6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.green6-paint-blob,.green6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.green6-paint-blob.red,.green6-paint-choice-swatch.red,.green6-pair-swatches .red{background:#ef3340}
.green6-paint-blob.green,.green6-paint-choice-swatch.green,.green6-pair-swatches .green{background:#61c86a}
.green6-paint-blob.green,.green6-paint-choice-swatch.green{background:#61c86a}
.green6-paint-choice-swatch.green{background:#51b85f}
.green6-paint-choice-swatch.purple{background:#8555cc}
.green6-paint-choice-swatch.blue,.green6-pair-swatches .blue{background:#3d8df5}
.green6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.green6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.green6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.green6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.green6-choice-grid button,.green6-pair-grid button,.green6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.green6-choice-grid button:hover,.green6-pair-grid button:hover,.green6-mixer-paints button:hover,
.green6-choice-grid button:focus-visible,.green6-pair-grid button:focus-visible,.green6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#65bf70;outline:none
}
.green6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.green6-choice-grid button.correct,.green6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.green6-choice-grid button.wrong,.green6-pair-grid button.wrong,.green6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.green6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.green6-pair-grid button{flex-direction:column;min-height:175px}
.green6-pair-swatches{display:flex;gap:8px}
.green6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.green6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.green6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.green6-mixer-paints button{flex-direction:column;min-height:145px}
.green6-mixer-paints button.selected{border-color:#49a957;background:#f4fcf5}
.green6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.green6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.green6-mixer-bowl span.red{height:45%;background:#ef3340}
.green6-mixer-bowl span.green{height:45%;background:#61c86a}
.green6-mixer-bowl span.mixed-green{height:65%;background:#61c86a}
.green6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.green6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.green6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.green6-object-grid button:hover,.green6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#65bf70;outline:none}
.green6-object-grid img{width:100%;height:175px;object-fit:contain}
.green6-object-grid strong{display:block;margin-top:6px}
.green6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.green6-object-grid button.wrong{animation:wrongBounce .35s ease}

.green6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.green6-celebration{background:linear-gradient(135deg,#f2fbf3,#def5e1);border-color:#8bd792}

@media(max-width:820px){
  .green6-heading{align-items:flex-start;flex-direction:column}
  .green6-mix-display{grid-template-columns:1fr 38px 1fr}
  .green6-mix-display .green6-symbol:nth-of-type(2){grid-column:1/-1}
  .green6-mix-display .green6-paint-cup:last-child{grid-column:1/-1}
  .green6-pair-grid{grid-template-columns:1fr}
  .green6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .green6-level-bar{align-items:flex-start;flex-direction:column}
  .green6-choice-grid{grid-template-columns:1fr}
  .green6-object-grid{grid-template-columns:1fr}
  .green6-mixer-paints{grid-template-columns:1fr}
  .green6-controls{flex-direction:column}.green6-controls>*{width:100%}
}


/* Green Activity 7 — Odd One Out */
.green7-shell{max-width:1040px}
.green7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.green7-dots{display:flex;gap:9px}
.green7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.green7-dots span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.16)}
.green7-dots span.done{background:#58bf77;border-color:#58bf77}

.green7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.green7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.green7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#2e7037;font-weight:1000
}
.green7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.green7-heading p{margin:0;color:var(--muted)}

.green7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #8bd792;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.green7-clue span:last-child{color:var(--muted);font-size:.88rem}
.green7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#61c86a;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.green7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.green7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.green7-choice:hover,.green7-choice:focus-visible{
  transform:translateY(-4px);border-color:#65bf70;box-shadow:0 12px 25px rgba(70,170,82,.10);outline:none
}
.green7-image{height:170px;display:grid;place-items:center}
.green7-image img{width:100%;height:100%;object-fit:contain}
.green7-choice strong{display:block;font-size:1rem;margin-top:7px}
.green7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.green7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.green7-choice.correct .green7-check{opacity:1;transform:scale(1)}
.green7-choice.correct img{animation:green7Correct .4s ease}
.green7-choice.quiet{opacity:.55}
.green7-choice.green-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(70,170,82,.10)
}
.green7-choice.wrong{animation:wrongBounce .35s ease}
.green7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.green7-celebration{background:linear-gradient(135deg,#f2fbf3,#def5e1);border-color:#8bd792}
@keyframes green7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .green7-heading{align-items:flex-start;flex-direction:column}
  .green7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .green7-level-bar{align-items:flex-start;flex-direction:column}
  .green7-choice{min-height:190px}
  .green7-image{height:125px}
  .green7-controls{flex-direction:column}
  .green7-controls>*{width:100%}
}


/* Green Activity 8 — Story / Read-Along */
.green8-shell{max-width:1000px}
.green8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.green8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.green8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.green8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.green8-page-pill{
  white-space:nowrap;background:#e8f8e9;color:#2e7037;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.green8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.green8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.green8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.green8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.green8-copy p{margin:.4rem 0 18px}
.green8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#e8f8e9;
  color:#2e7037;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.green8-green-word{
  color:#245b2c;background:#e8f8e9;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(70,170,82,.08)
}
.green8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.green8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#61c86a);
  border-radius:inherit;transition:width .22s ease
}
.green8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.green8-mini-pages{display:flex;justify-content:center;gap:8px}
.green8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.green8-mini-pages span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.17)}
.green8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.green8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.green8-questions[hidden]{display:none}
.green8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.green8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.green8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.green8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.green8-answer-grid button:hover,.green8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#65bf70;outline:none
}
.green8-answer-grid img{width:100%;height:135px;object-fit:contain}
.green8-answer-grid strong{display:block;margin-top:7px}
.green8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.green8-answer-grid button.quiet{opacity:.52}
.green8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.green8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.green8-question-feedback.good{background:#effcf3;color:#26723e}
.green8-question-feedback.try{background:#f1fbf2;color:#9b4b12}
.green8-celebration{background:linear-gradient(135deg,#f2fbf3,#def5e1);border-color:#8bd792}

@media(max-width:760px){
  .green8-book-top{align-items:flex-start;flex-direction:column}
  .green8-page{grid-template-columns:1fr;min-height:auto}
  .green8-art-wrap{height:265px}
  .green8-copy{text-align:center}
  .green8-nav{grid-template-columns:1fr 1fr}
  .green8-mini-pages{grid-column:1/-1;grid-row:1}
  .green8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .green8-art-wrap{height:220px}
  .green8-nav{grid-template-columns:1fr}
  .green8-mini-pages{grid-column:auto;grid-row:auto}
  .green8-nav>*{width:100%}
}


/* Green Activity 9 — Coloring Time */
.green9-shell{max-width:1040px}
.green9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.green9-dots{display:flex;gap:10px}
.green9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.green9-dots span.active{background:#61c86a;border-color:#61c86a;transform:scale(1.16)}
.green9-dots span.done{background:#58bf77;border-color:#58bf77}

.green9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.green9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.green9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#2e7037;font-weight:1000
}
.green9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.green9-heading p{margin:0;color:var(--muted);max-width:650px}
.green9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f4fcf5;border:1px solid #8bd792;
  border-radius:22px;padding:9px
}
.green9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#2e7037;margin-bottom:5px}
.green9-reference img{width:90px;height:90px;object-fit:contain}

.green9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.green9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.green9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#green9-paint-canvas,#green9-lineart{position:absolute;inset:0;width:100%;height:100%}
#green9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#green9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.green9-tools{display:grid;gap:12px}
.green9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.green9-tool.active{border-color:#65bf70;background:#f1fbf2;box-shadow:0 7px 18px rgba(70,170,82,.10)}
.green9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.green9-tool-swatch.green{background:#61c86a}
.green9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.green9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.green9-tool strong{font-size:.82rem}

.green9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.green9-progress-row strong{color:#2e7037}
.green9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.green9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#bce9c0,#61c86a);
  border-radius:inherit;transition:width .12s ease
}
.green9-card>.activity-feedback{max-width:850px;margin:0 auto}
.green9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.green9-celebration{background:linear-gradient(135deg,#f2fbf3,#def5e1);border-color:#8bd792}

@media(max-width:760px){
  .green9-heading{align-items:flex-start;flex-direction:column}
  .green9-reference{align-self:flex-end}
  .green9-workspace{grid-template-columns:1fr}
  .green9-tools{grid-template-columns:repeat(3,1fr)}
  .green9-tool{min-height:88px}
}
@media(max-width:520px){
  .green9-level-bar{align-items:flex-start;flex-direction:column}
  .green9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .green9-tool{padding:9px 5px;min-height:80px}
  .green9-tool-swatch,.green9-tool-icon{width:38px;height:38px}
  .green9-controls{flex-direction:column}.green9-controls>*{width:100%}
}


/* Green Activity 10 — Sticker Page / Course Reward */
.green10-shell{max-width:1120px}
.green10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.green10-progress-card h2{margin:.15rem 0 13px}
.green10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.green10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#bce9c0,#61c86a);
  border-radius:inherit;transition:width .22s ease
}

.green10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.green10-tray-card,.green10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.green10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.green10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.green10-sticker:hover,.green10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#65bf70;outline:none
}
.green10-sticker img{width:100%;height:95px;object-fit:contain}
.green10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.green10-sticker.selected{
  border-color:#61c86a;background:#f1fbf2;box-shadow:0 0 0 5px rgba(70,170,82,.10)
}
.green10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.green10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.green10-tray-card>.activity-feedback{margin-top:15px}

.green10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.green10-board-heading h2{margin:.2rem 0 0}
.green10-selected-pill{
  border-radius:99px;background:#e8f8e9;color:#2e7037;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.green10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.green10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.green10-slot:hover,.green10-slot:focus-visible{
  transform:scale(1.02);border-color:#65bf70;outline:none;background:#f4fcf5
}
.green10-slot span{
  width:52px;height:52px;border-radius:50%;background:#e8f8e9;color:#2e7037;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.green10-slot img{width:100%;height:100%;object-fit:contain;animation:green10Pop .38s ease}
.green10-slot.filled{
  border-style:solid;border-color:#8bd792;background:#f4fcf5;cursor:default
}
@keyframes green10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.green10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.green10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.green10-certificate[hidden]{display:none}
.green10-certificate:before,.green10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(70,170,82,.08)
}
.green10-certificate:before{left:-45px;top:-45px}
.green10-certificate:after{right:-45px;bottom:-45px}
.green10-ribbon{
  display:inline-block;background:#61c86a;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #245b2c;margin-bottom:20px
}
.green10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.green10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.green10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#2e7037
}
.green10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.green10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .green10-layout{grid-template-columns:1fr}
  .green10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .green10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .green10-tray-controls{flex-direction:column}.green10-tray-controls>*{width:100%}
  .green10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .green10-board-heading{align-items:flex-start;flex-direction:column}
  .green10-selected-pill{align-self:stretch}
  .green10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-green *{visibility:hidden!important}
  #green10-certificate,#green10-certificate *{visibility:visible!important}
  #green10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .green10-certificate-actions{display:none!important}
}

/* Green mix helpers */
.green6-rule .yellow,.green6-answer-swatch.yellow{background:#ffd642}
.green6-rule .blue,.green6-answer-swatch.blue{background:#3d8df5}
.green6-rule .green,.green6-answer-swatch.green{background:#61c86a}
.green6-answer-swatch.orange{background:#ff8626}
.green6-answer-swatch.purple{background:#8555cc}
.green6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Green Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-green{background:#61c86a}
.g1-blue{background:#3d8df5}


/* Blue course theme */
.theme-blue{
  --blue:#4f8ee8;
  --blue-dark:#1f4f93;
  --blue-soft:#fff1e5;
}
.theme-blue .eyebrow{color:#285fa9}
.blue-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#4f8ee8;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(52,120,212,.19)
}
.blue-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.blue-target-word{color:#4f8ee8}
.blue-primary{
  background:#4f8ee8;
  box-shadow:0 7px 0 #1f4f93
}
.blue-primary:active{box-shadow:0 4px 0 #1f4f93}
.blue-progress-pill{background:#e9f2ff;color:#285fa9}
.blue-ready{border-color:#8db9f3!important}
.blue-swatch{
  background:#4f8ee8;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(52,120,212,.20)
}
.blue-giant-word{color:#4f8ee8;font-size:clamp(2.6rem,9vw,6rem)}
.blue-listen{border-color:#8db9f3;color:#285fa9}
.blue-object-card:hover,.blue-object-card:focus-visible{border-color:#6fa3e8}
.blue-check-red{background:#ef3340}
.blue-check-blue{background:#4f8ee8}
.blue-check-blue{background:#3d8df5}


/* Blue Activity 2 — Find Blue */
.blue-counter-pill{background:#e9f2ff;color:#285fa9}
.blue-find-item:hover,.blue-find-item:focus-visible{border-color:#6fa3e8}
.blue-find-item.found{
  border-color:#4f8ee8;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(52,120,212,.10)
}
.blue-find-item.found .find-check{
  background:#4f8ee8
}


/* Blue Activity 3 — Trace Blue */
.blue-trace-shell{max-width:1040px}
.blue-trace-stage{max-width:720px}
.blue-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.blue-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.blue-trace-tab.active{
  border-color:#6fa3e8;
  background:#f3f8ff;
  color:#285fa9
}
.blue-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.blue-trace-frame{
  border-color:#a9c9f2;
  background:#fffdf4
}
.blue-trace-frame.complete{border-color:#6fcb8c}
.blue-trace-progress span{
  background:linear-gradient(90deg,#bfd7f7,#4f8ee8)
}
.blue-trace-celebration{
  background:linear-gradient(135deg,#f4f8ff,#ddeaff);
  border-color:#8db9f3
}
@media(max-width:560px){
  .blue-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .blue-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .blue-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Blue Activity 4 — Blue Around Us */
.blue4-shell{max-width:1040px}
.blue4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.blue4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.blue4-strip-item img{width:100%;height:98px;object-fit:contain}
.blue4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.blue4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.blue4-dots{display:flex;gap:10px}
.blue4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.blue4-dots span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.16)}
.blue4-dots span.done{background:#58bf77;border-color:#58bf77}

.blue4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.blue4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.blue4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#285fa9;font-weight:1000
}
.blue4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.blue4-scene-head p{margin:0;color:var(--muted)}

.blue4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.blue4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.blue4-choice:hover,.blue4-choice:focus-visible{
  transform:translateY(-4px);border-color:#6fa3e8;box-shadow:0 12px 25px rgba(52,120,212,.10);outline:none
}
.blue4-image{height:170px;display:grid;place-items:center}
.blue4-image img{width:100%;height:100%;object-fit:contain}
.blue4-choice strong{display:block;margin-top:7px}
.blue4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#4f8ee8;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.blue4-choice.correct{
  border-color:#4f8ee8;background:#f5f9ff;box-shadow:0 10px 24px rgba(52,120,212,.12)
}
.blue4-choice.correct .blue4-check{opacity:1;transform:scale(1)}
.blue4-choice.correct img{animation:blue4Pop .4s ease}
.blue4-choice.quiet{opacity:.55}
.blue4-choice.wrong{animation:wrongBounce .35s ease}
.blue4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.blue4-celebration{
  background:linear-gradient(135deg,#f4f8ff,#ddeaff);
  border-color:#8db9f3
}
@keyframes blue4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .blue4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blue4-scene-head{align-items:flex-start;flex-direction:column}
  .blue4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .blue4-progress-card{align-items:flex-start;flex-direction:column}
  .blue4-choice{min-height:185px}
  .blue4-image{height:125px}
  .blue4-next-wrap .primary-button{width:100%}
}


/* Blue Activity 5 — Light & Dark Blue */
.blue5-shell{max-width:1040px}
.blue5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.blue5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.blue5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.blue5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.blue5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.blue5-dots{display:flex;gap:9px}
.blue5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.blue5-dots span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.15)}
.blue5-dots span.done{background:#58bf77;border-color:#58bf77}

.blue5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.blue5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.blue5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#285fa9
}
.blue5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.blue5-heading p{margin:0;color:var(--muted)}

.blue5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.blue5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.blue5-choice:hover,.blue5-choice:focus-visible{
  transform:translateY(-4px);border-color:#6fa3e8;box-shadow:0 12px 26px rgba(52,120,212,.10);outline:none
}
.blue5-choice img{width:100%;height:245px;object-fit:contain}
.blue5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.blue5-choice.correct{
  border-color:#4f8ee8;background:#f5f9ff;box-shadow:0 10px 24px rgba(52,120,212,.12)
}
.blue5-choice.quiet{opacity:.58}
.blue5-choice.wrong{animation:wrongBounce .35s ease}
.blue5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#4f8ee8;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.blue5-choice.correct .blue5-check{opacity:1;transform:scale(1)}
.blue5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.blue5-celebration{
  background:linear-gradient(135deg,#f4f8ff,#ddeaff);
  border-color:#8db9f3
}

@media(max-width:820px){
  .blue5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blue5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .blue5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blue5-level-bar{align-items:flex-start;flex-direction:column}
  .blue5-choice-row{grid-template-columns:1fr}
  .blue5-choice{min-height:270px}
  .blue5-choice img{height:195px}
  .blue5-controls{flex-direction:column}
  .blue5-controls>*{width:100%}
}


/* Blue Activity 6 — Mix Blue */
.blue6-shell{max-width:1040px}
.blue6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #a9c9f2;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.blue6-rule-card strong{width:100%;text-align:center;color:#285fa9;font-size:1.15rem}
.blue6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.blue6-rule-paint.red{background:#ef3340}
.blue6-rule-paint.blue{background:#4f8ee8}
.blue6-rule-paint.blue{background:#4f8ee8}
.blue6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.blue6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.blue6-dots{display:flex;gap:9px}
.blue6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.blue6-dots span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.16)}
.blue6-dots span.done{background:#58bf77;border-color:#58bf77}

.blue6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.blue6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.blue6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#285fa9;font-weight:1000
}
.blue6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.blue6-heading p{margin:0;color:var(--muted)}

.blue6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.blue6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.blue6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.blue6-paint-blob,.blue6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.blue6-paint-blob.red,.blue6-paint-choice-swatch.red,.blue6-pair-swatches .red{background:#ef3340}
.blue6-paint-blob.blue,.blue6-paint-choice-swatch.blue,.blue6-pair-swatches .blue{background:#4f8ee8}
.blue6-paint-blob.blue,.blue6-paint-choice-swatch.blue{background:#4f8ee8}
.blue6-paint-choice-swatch.blue{background:#51b85f}
.blue6-paint-choice-swatch.purple{background:#8555cc}
.blue6-paint-choice-swatch.blue,.blue6-pair-swatches .blue{background:#3d8df5}
.blue6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.blue6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.blue6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.blue6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.blue6-choice-grid button,.blue6-pair-grid button,.blue6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.blue6-choice-grid button:hover,.blue6-pair-grid button:hover,.blue6-mixer-paints button:hover,
.blue6-choice-grid button:focus-visible,.blue6-pair-grid button:focus-visible,.blue6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#6fa3e8;outline:none
}
.blue6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.blue6-choice-grid button.correct,.blue6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.blue6-choice-grid button.wrong,.blue6-pair-grid button.wrong,.blue6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.blue6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.blue6-pair-grid button{flex-direction:column;min-height:175px}
.blue6-pair-swatches{display:flex;gap:8px}
.blue6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.blue6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.blue6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.blue6-mixer-paints button{flex-direction:column;min-height:145px}
.blue6-mixer-paints button.selected{border-color:#4f8ee8;background:#f5f9ff}
.blue6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.blue6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.blue6-mixer-bowl span.red{height:45%;background:#ef3340}
.blue6-mixer-bowl span.blue{height:45%;background:#4f8ee8}
.blue6-mixer-bowl span.mixed-blue{height:65%;background:#4f8ee8}
.blue6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.blue6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.blue6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.blue6-object-grid button:hover,.blue6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#6fa3e8;outline:none}
.blue6-object-grid img{width:100%;height:175px;object-fit:contain}
.blue6-object-grid strong{display:block;margin-top:6px}
.blue6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.blue6-object-grid button.wrong{animation:wrongBounce .35s ease}

.blue6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.blue6-celebration{background:linear-gradient(135deg,#f4f8ff,#ddeaff);border-color:#8db9f3}

@media(max-width:820px){
  .blue6-heading{align-items:flex-start;flex-direction:column}
  .blue6-mix-display{grid-template-columns:1fr 38px 1fr}
  .blue6-mix-display .blue6-symbol:nth-of-type(2){grid-column:1/-1}
  .blue6-mix-display .blue6-paint-cup:last-child{grid-column:1/-1}
  .blue6-pair-grid{grid-template-columns:1fr}
  .blue6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .blue6-level-bar{align-items:flex-start;flex-direction:column}
  .blue6-choice-grid{grid-template-columns:1fr}
  .blue6-object-grid{grid-template-columns:1fr}
  .blue6-mixer-paints{grid-template-columns:1fr}
  .blue6-controls{flex-direction:column}.blue6-controls>*{width:100%}
}


/* Blue Activity 7 — Odd One Out */
.blue7-shell{max-width:1040px}
.blue7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.blue7-dots{display:flex;gap:9px}
.blue7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.blue7-dots span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.16)}
.blue7-dots span.done{background:#58bf77;border-color:#58bf77}

.blue7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.blue7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.blue7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#285fa9;font-weight:1000
}
.blue7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.blue7-heading p{margin:0;color:var(--muted)}

.blue7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #8db9f3;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.blue7-clue span:last-child{color:var(--muted);font-size:.88rem}
.blue7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#4f8ee8;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.blue7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.blue7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.blue7-choice:hover,.blue7-choice:focus-visible{
  transform:translateY(-4px);border-color:#6fa3e8;box-shadow:0 12px 25px rgba(52,120,212,.10);outline:none
}
.blue7-image{height:170px;display:grid;place-items:center}
.blue7-image img{width:100%;height:100%;object-fit:contain}
.blue7-choice strong{display:block;font-size:1rem;margin-top:7px}
.blue7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.blue7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.blue7-choice.correct .blue7-check{opacity:1;transform:scale(1)}
.blue7-choice.correct img{animation:blue7Correct .4s ease}
.blue7-choice.quiet{opacity:.55}
.blue7-choice.blue-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(52,120,212,.10)
}
.blue7-choice.wrong{animation:wrongBounce .35s ease}
.blue7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.blue7-celebration{background:linear-gradient(135deg,#f4f8ff,#ddeaff);border-color:#8db9f3}
@keyframes blue7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .blue7-heading{align-items:flex-start;flex-direction:column}
  .blue7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .blue7-level-bar{align-items:flex-start;flex-direction:column}
  .blue7-choice{min-height:190px}
  .blue7-image{height:125px}
  .blue7-controls{flex-direction:column}
  .blue7-controls>*{width:100%}
}


/* Blue Activity 8 — Story / Read-Along */
.blue8-shell{max-width:1000px}
.blue8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.blue8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.blue8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.blue8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.blue8-page-pill{
  white-space:nowrap;background:#e9f2ff;color:#285fa9;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.blue8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.blue8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.blue8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.blue8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.blue8-copy p{margin:.4rem 0 18px}
.blue8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#e9f2ff;
  color:#285fa9;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.blue8-blue-word{
  color:#1f4f93;background:#e9f2ff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(52,120,212,.08)
}
.blue8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.blue8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#4f8ee8);
  border-radius:inherit;transition:width .22s ease
}
.blue8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.blue8-mini-pages{display:flex;justify-content:center;gap:8px}
.blue8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.blue8-mini-pages span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.17)}
.blue8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.blue8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.blue8-questions[hidden]{display:none}
.blue8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.blue8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.blue8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.blue8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.blue8-answer-grid button:hover,.blue8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#6fa3e8;outline:none
}
.blue8-answer-grid img{width:100%;height:135px;object-fit:contain}
.blue8-answer-grid strong{display:block;margin-top:7px}
.blue8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.blue8-answer-grid button.quiet{opacity:.52}
.blue8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.blue8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.blue8-question-feedback.good{background:#effcf3;color:#26723e}
.blue8-question-feedback.try{background:#f3f8ff;color:#9b4b12}
.blue8-celebration{background:linear-gradient(135deg,#f4f8ff,#ddeaff);border-color:#8db9f3}

@media(max-width:760px){
  .blue8-book-top{align-items:flex-start;flex-direction:column}
  .blue8-page{grid-template-columns:1fr;min-height:auto}
  .blue8-art-wrap{height:265px}
  .blue8-copy{text-align:center}
  .blue8-nav{grid-template-columns:1fr 1fr}
  .blue8-mini-pages{grid-column:1/-1;grid-row:1}
  .blue8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .blue8-art-wrap{height:220px}
  .blue8-nav{grid-template-columns:1fr}
  .blue8-mini-pages{grid-column:auto;grid-row:auto}
  .blue8-nav>*{width:100%}
}


/* Blue Activity 9 — Coloring Time */
.blue9-shell{max-width:1040px}
.blue9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.blue9-dots{display:flex;gap:10px}
.blue9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.blue9-dots span.active{background:#4f8ee8;border-color:#4f8ee8;transform:scale(1.16)}
.blue9-dots span.done{background:#58bf77;border-color:#58bf77}

.blue9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.blue9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.blue9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#285fa9;font-weight:1000
}
.blue9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.blue9-heading p{margin:0;color:var(--muted);max-width:650px}
.blue9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #8db9f3;
  border-radius:22px;padding:9px
}
.blue9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#285fa9;margin-bottom:5px}
.blue9-reference img{width:90px;height:90px;object-fit:contain}

.blue9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.blue9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.blue9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#blue9-paint-canvas,#blue9-lineart{position:absolute;inset:0;width:100%;height:100%}
#blue9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#blue9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.blue9-tools{display:grid;gap:12px}
.blue9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.blue9-tool.active{border-color:#6fa3e8;background:#f3f8ff;box-shadow:0 7px 18px rgba(52,120,212,.10)}
.blue9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.blue9-tool-swatch.blue{background:#4f8ee8}
.blue9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.blue9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.blue9-tool strong{font-size:.82rem}

.blue9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.blue9-progress-row strong{color:#285fa9}
.blue9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.blue9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#bfd7f7,#4f8ee8);
  border-radius:inherit;transition:width .12s ease
}
.blue9-card>.activity-feedback{max-width:850px;margin:0 auto}
.blue9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.blue9-celebration{background:linear-gradient(135deg,#f4f8ff,#ddeaff);border-color:#8db9f3}

@media(max-width:760px){
  .blue9-heading{align-items:flex-start;flex-direction:column}
  .blue9-reference{align-self:flex-end}
  .blue9-workspace{grid-template-columns:1fr}
  .blue9-tools{grid-template-columns:repeat(3,1fr)}
  .blue9-tool{min-height:88px}
}
@media(max-width:520px){
  .blue9-level-bar{align-items:flex-start;flex-direction:column}
  .blue9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .blue9-tool{padding:9px 5px;min-height:80px}
  .blue9-tool-swatch,.blue9-tool-icon{width:38px;height:38px}
  .blue9-controls{flex-direction:column}.blue9-controls>*{width:100%}
}


/* Blue Activity 10 — Sticker Page / Course Reward */
.blue10-shell{max-width:1120px}
.blue10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.blue10-progress-card h2{margin:.15rem 0 13px}
.blue10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.blue10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#bfd7f7,#4f8ee8);
  border-radius:inherit;transition:width .22s ease
}

.blue10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.blue10-tray-card,.blue10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.blue10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.blue10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.blue10-sticker:hover,.blue10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#6fa3e8;outline:none
}
.blue10-sticker img{width:100%;height:95px;object-fit:contain}
.blue10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.blue10-sticker.selected{
  border-color:#4f8ee8;background:#f3f8ff;box-shadow:0 0 0 5px rgba(52,120,212,.10)
}
.blue10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.blue10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.blue10-tray-card>.activity-feedback{margin-top:15px}

.blue10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.blue10-board-heading h2{margin:.2rem 0 0}
.blue10-selected-pill{
  border-radius:99px;background:#e9f2ff;color:#285fa9;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.blue10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.blue10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.blue10-slot:hover,.blue10-slot:focus-visible{
  transform:scale(1.02);border-color:#6fa3e8;outline:none;background:#f5f9ff
}
.blue10-slot span{
  width:52px;height:52px;border-radius:50%;background:#e9f2ff;color:#285fa9;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.blue10-slot img{width:100%;height:100%;object-fit:contain;animation:blue10Pop .38s ease}
.blue10-slot.filled{
  border-style:solid;border-color:#8db9f3;background:#f5f9ff;cursor:default
}
@keyframes blue10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.blue10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.blue10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.blue10-certificate[hidden]{display:none}
.blue10-certificate:before,.blue10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(52,120,212,.08)
}
.blue10-certificate:before{left:-45px;top:-45px}
.blue10-certificate:after{right:-45px;bottom:-45px}
.blue10-ribbon{
  display:inline-block;background:#4f8ee8;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #1f4f93;margin-bottom:20px
}
.blue10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.blue10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.blue10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#285fa9
}
.blue10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.blue10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .blue10-layout{grid-template-columns:1fr}
  .blue10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .blue10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blue10-tray-controls{flex-direction:column}.blue10-tray-controls>*{width:100%}
  .blue10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blue10-board-heading{align-items:flex-start;flex-direction:column}
  .blue10-selected-pill{align-self:stretch}
  .blue10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-blue *{visibility:hidden!important}
  #blue10-certificate,#blue10-certificate *{visibility:visible!important}
  #blue10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .blue10-certificate-actions{display:none!important}
}

/* Blue mix helpers */
.blue6-rule .yellow,.blue6-answer-swatch.yellow{background:#ffd642}
.blue6-rule .blue,.blue6-answer-swatch.blue{background:#3d8df5}
.blue6-rule .blue,.blue6-answer-swatch.blue{background:#4f8ee8}
.blue6-answer-swatch.orange{background:#ff8626}
.blue6-answer-swatch.purple{background:#8555cc}
.blue6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Blue Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-blue{background:#4f8ee8}
.g1-blue{background:#3d8df5}

/* Blue mix helpers */
.blue6-rule .yellow,.blue6-answer-swatch.yellow{background:#ffd642}
.blue6-rule .red,.blue6-answer-swatch.red{background:#ef3340}
.blue6-rule .blue,.blue6-answer-swatch.blue{background:#4f8ee8}
.blue6-rule .green,.blue6-answer-swatch.green{background:#61c86a}
.blue6-rule .purple,.blue6-answer-swatch.purple{background:#8555cc}
.blue6-answer-swatch.orange{background:#ff8626}
.blue6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-blue{background:#3d8df5}
.b1-red{background:#ef3340}
.b1-blue{background:#4f8ee8}
.b1-yellow{background:#ffd642}


/* Purple course theme */
/* Purple course theme */
.theme-purple{
  --purple:#8555cc;
  --purple-dark:#4f2c90;
  --purple-soft:#fff1e5;
}
.theme-purple .eyebrow{color:#6232a8}
.purple-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#8555cc;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(133,85,204,.19)
}
.purple-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.purple-target-word{color:#8555cc}
.purple-primary{
  background:#8555cc;
  box-shadow:0 7px 0 #4f2c90
}
.purple-primary:active{box-shadow:0 4px 0 #4f2c90}
.purple-progress-pill{background:#f2eaff;color:#6232a8}
.purple-ready{border-color:#b99ae9!important}
.purple-swatch{
  background:#8555cc;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(133,85,204,.20)
}
.purple-giant-word{color:#8555cc;font-size:clamp(2.6rem,9vw,6rem)}
.purple-listen{border-color:#b99ae9;color:#6232a8}
.purple-object-card:hover,.purple-object-card:focus-visible{border-color:#9a77de}
.purple-check-red{background:#ef3340}
.purple-check-purple{background:#8555cc}
.purple-check-purple{background:#8555cc}


/* Purple Activity 2 — Find Purple */
.purple-counter-pill{background:#f2eaff;color:#6232a8}
.purple-find-item:hover,.purple-find-item:focus-visible{border-color:#9a77de}
.purple-find-item.found{
  border-color:#8555cc;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(133,85,204,.10)
}
.purple-find-item.found .find-check{
  background:#8555cc
}


/* Purple Activity 3 — Trace Purple */
.purple-trace-shell{max-width:1040px}
.purple-trace-stage{max-width:720px}
.purple-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.purple-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.purple-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.purple-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.purple-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.purple-trace-frame.complete{border-color:#6fcb8c}
.purple-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#8555cc)
}
.purple-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .purple-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .purple-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .purple-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Purple Activity 4 — Purple Around Us */
.purple4-shell{max-width:1040px}
.purple4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.purple4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.purple4-strip-item img{width:100%;height:98px;object-fit:contain}
.purple4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.purple4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.purple4-dots{display:flex;gap:10px}
.purple4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.purple4-dots span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.16)}
.purple4-dots span.done{background:#58bf77;border-color:#58bf77}

.purple4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.purple4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.purple4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.purple4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.purple4-scene-head p{margin:0;color:var(--muted)}

.purple4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.purple4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.purple4-choice:hover,.purple4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(133,85,204,.10);outline:none
}
.purple4-image{height:170px;display:grid;place-items:center}
.purple4-image img{width:100%;height:100%;object-fit:contain}
.purple4-choice strong{display:block;margin-top:7px}
.purple4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#8555cc;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.purple4-choice.correct{
  border-color:#8555cc;background:#f5f9ff;box-shadow:0 10px 24px rgba(133,85,204,.12)
}
.purple4-choice.correct .purple4-check{opacity:1;transform:scale(1)}
.purple4-choice.correct img{animation:purple4Pop .4s ease}
.purple4-choice.quiet{opacity:.55}
.purple4-choice.wrong{animation:wrongBounce .35s ease}
.purple4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.purple4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes purple4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .purple4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purple4-scene-head{align-items:flex-start;flex-direction:column}
  .purple4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .purple4-progress-card{align-items:flex-start;flex-direction:column}
  .purple4-choice{min-height:185px}
  .purple4-image{height:125px}
  .purple4-next-wrap .primary-button{width:100%}
}


/* Purple Activity 5 — Light & Dark Purple */
.purple5-shell{max-width:1040px}
.purple5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.purple5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.purple5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.purple5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.purple5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.purple5-dots{display:flex;gap:9px}
.purple5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.purple5-dots span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.15)}
.purple5-dots span.done{background:#58bf77;border-color:#58bf77}

.purple5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.purple5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.purple5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.purple5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.purple5-heading p{margin:0;color:var(--muted)}

.purple5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.purple5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.purple5-choice:hover,.purple5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(133,85,204,.10);outline:none
}
.purple5-choice img{width:100%;height:245px;object-fit:contain}
.purple5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.purple5-choice.correct{
  border-color:#8555cc;background:#f5f9ff;box-shadow:0 10px 24px rgba(133,85,204,.12)
}
.purple5-choice.quiet{opacity:.58}
.purple5-choice.wrong{animation:wrongBounce .35s ease}
.purple5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#8555cc;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.purple5-choice.correct .purple5-check{opacity:1;transform:scale(1)}
.purple5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.purple5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .purple5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .purple5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .purple5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purple5-level-bar{align-items:flex-start;flex-direction:column}
  .purple5-choice-row{grid-template-columns:1fr}
  .purple5-choice{min-height:270px}
  .purple5-choice img{height:195px}
  .purple5-controls{flex-direction:column}
  .purple5-controls>*{width:100%}
}


/* Purple Activity 6 — Mix Purple */
.purple6-shell{max-width:1040px}
.purple6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.purple6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.purple6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.purple6-rule-paint.red{background:#ef3340}
.purple6-rule-paint.purple{background:#8555cc}
.purple6-rule-paint.purple{background:#8555cc}
.purple6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.purple6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.purple6-dots{display:flex;gap:9px}
.purple6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.purple6-dots span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.16)}
.purple6-dots span.done{background:#58bf77;border-color:#58bf77}

.purple6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.purple6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.purple6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.purple6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.purple6-heading p{margin:0;color:var(--muted)}

.purple6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.purple6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.purple6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.purple6-paint-blob,.purple6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.purple6-paint-blob.red,.purple6-paint-choice-swatch.red,.purple6-pair-swatches .red{background:#ef3340}
.purple6-paint-blob.purple,.purple6-paint-choice-swatch.purple,.purple6-pair-swatches .purple{background:#8555cc}
.purple6-paint-blob.purple,.purple6-paint-choice-swatch.purple{background:#8555cc}
.purple6-paint-choice-swatch.purple{background:#51b85f}
.purple6-paint-choice-swatch.purple{background:#8555cc}
.purple6-paint-choice-swatch.purple,.purple6-pair-swatches .purple{background:#8555cc}
.purple6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.purple6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.purple6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.purple6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.purple6-choice-grid button,.purple6-pair-grid button,.purple6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.purple6-choice-grid button:hover,.purple6-pair-grid button:hover,.purple6-mixer-paints button:hover,
.purple6-choice-grid button:focus-visible,.purple6-pair-grid button:focus-visible,.purple6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.purple6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.purple6-choice-grid button.correct,.purple6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.purple6-choice-grid button.wrong,.purple6-pair-grid button.wrong,.purple6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.purple6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.purple6-pair-grid button{flex-direction:column;min-height:175px}
.purple6-pair-swatches{display:flex;gap:8px}
.purple6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.purple6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.purple6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.purple6-mixer-paints button{flex-direction:column;min-height:145px}
.purple6-mixer-paints button.selected{border-color:#8555cc;background:#f5f9ff}
.purple6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.purple6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.purple6-mixer-bowl span.red{height:45%;background:#ef3340}
.purple6-mixer-bowl span.purple{height:45%;background:#8555cc}
.purple6-mixer-bowl span.mixed-purple{height:65%;background:#8555cc}
.purple6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.purple6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.purple6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.purple6-object-grid button:hover,.purple6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.purple6-object-grid img{width:100%;height:175px;object-fit:contain}
.purple6-object-grid strong{display:block;margin-top:6px}
.purple6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.purple6-object-grid button.wrong{animation:wrongBounce .35s ease}

.purple6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.purple6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .purple6-heading{align-items:flex-start;flex-direction:column}
  .purple6-mix-display{grid-template-columns:1fr 38px 1fr}
  .purple6-mix-display .purple6-symbol:nth-of-type(2){grid-column:1/-1}
  .purple6-mix-display .purple6-paint-cup:last-child{grid-column:1/-1}
  .purple6-pair-grid{grid-template-columns:1fr}
  .purple6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .purple6-level-bar{align-items:flex-start;flex-direction:column}
  .purple6-choice-grid{grid-template-columns:1fr}
  .purple6-object-grid{grid-template-columns:1fr}
  .purple6-mixer-paints{grid-template-columns:1fr}
  .purple6-controls{flex-direction:column}.purple6-controls>*{width:100%}
}


/* Purple Activity 7 — Odd One Out */
.purple7-shell{max-width:1040px}
.purple7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.purple7-dots{display:flex;gap:9px}
.purple7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.purple7-dots span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.16)}
.purple7-dots span.done{background:#58bf77;border-color:#58bf77}

.purple7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.purple7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.purple7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.purple7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.purple7-heading p{margin:0;color:var(--muted)}

.purple7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.purple7-clue span:last-child{color:var(--muted);font-size:.88rem}
.purple7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#8555cc;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.purple7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.purple7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.purple7-choice:hover,.purple7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(133,85,204,.10);outline:none
}
.purple7-image{height:170px;display:grid;place-items:center}
.purple7-image img{width:100%;height:100%;object-fit:contain}
.purple7-choice strong{display:block;font-size:1rem;margin-top:7px}
.purple7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.purple7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.purple7-choice.correct .purple7-check{opacity:1;transform:scale(1)}
.purple7-choice.correct img{animation:purple7Correct .4s ease}
.purple7-choice.quiet{opacity:.55}
.purple7-choice.purple-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(133,85,204,.10)
}
.purple7-choice.wrong{animation:wrongBounce .35s ease}
.purple7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.purple7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes purple7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .purple7-heading{align-items:flex-start;flex-direction:column}
  .purple7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .purple7-level-bar{align-items:flex-start;flex-direction:column}
  .purple7-choice{min-height:190px}
  .purple7-image{height:125px}
  .purple7-controls{flex-direction:column}
  .purple7-controls>*{width:100%}
}


/* Purple Activity 8 — Story / Read-Along */
.purple8-shell{max-width:1000px}
.purple8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.purple8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.purple8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.purple8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.purple8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.purple8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.purple8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.purple8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.purple8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.purple8-copy p{margin:.4rem 0 18px}
.purple8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.purple8-purple-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(133,85,204,.08)
}
.purple8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.purple8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#8555cc);
  border-radius:inherit;transition:width .22s ease
}
.purple8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.purple8-mini-pages{display:flex;justify-content:center;gap:8px}
.purple8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.purple8-mini-pages span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.17)}
.purple8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.purple8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.purple8-questions[hidden]{display:none}
.purple8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.purple8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.purple8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.purple8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.purple8-answer-grid button:hover,.purple8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.purple8-answer-grid img{width:100%;height:135px;object-fit:contain}
.purple8-answer-grid strong{display:block;margin-top:7px}
.purple8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.purple8-answer-grid button.quiet{opacity:.52}
.purple8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.purple8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.purple8-question-feedback.good{background:#effcf3;color:#26723e}
.purple8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.purple8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .purple8-book-top{align-items:flex-start;flex-direction:column}
  .purple8-page{grid-template-columns:1fr;min-height:auto}
  .purple8-art-wrap{height:265px}
  .purple8-copy{text-align:center}
  .purple8-nav{grid-template-columns:1fr 1fr}
  .purple8-mini-pages{grid-column:1/-1;grid-row:1}
  .purple8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .purple8-art-wrap{height:220px}
  .purple8-nav{grid-template-columns:1fr}
  .purple8-mini-pages{grid-column:auto;grid-row:auto}
  .purple8-nav>*{width:100%}
}


/* Purple Activity 9 — Coloring Time */
.purple9-shell{max-width:1040px}
.purple9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.purple9-dots{display:flex;gap:10px}
.purple9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.purple9-dots span.active{background:#8555cc;border-color:#8555cc;transform:scale(1.16)}
.purple9-dots span.done{background:#58bf77;border-color:#58bf77}

.purple9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.purple9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.purple9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.purple9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.purple9-heading p{margin:0;color:var(--muted);max-width:650px}
.purple9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.purple9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.purple9-reference img{width:90px;height:90px;object-fit:contain}

.purple9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.purple9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.purple9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#purple9-paint-canvas,#purple9-lineart{position:absolute;inset:0;width:100%;height:100%}
#purple9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#purple9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.purple9-tools{display:grid;gap:12px}
.purple9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.purple9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(133,85,204,.10)}
.purple9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.purple9-tool-swatch.purple{background:#8555cc}
.purple9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.purple9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.purple9-tool strong{font-size:.82rem}

.purple9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.purple9-progress-row strong{color:#6232a8}
.purple9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.purple9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#8555cc);
  border-radius:inherit;transition:width .12s ease
}
.purple9-card>.activity-feedback{max-width:850px;margin:0 auto}
.purple9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.purple9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .purple9-heading{align-items:flex-start;flex-direction:column}
  .purple9-reference{align-self:flex-end}
  .purple9-workspace{grid-template-columns:1fr}
  .purple9-tools{grid-template-columns:repeat(3,1fr)}
  .purple9-tool{min-height:88px}
}
@media(max-width:520px){
  .purple9-level-bar{align-items:flex-start;flex-direction:column}
  .purple9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .purple9-tool{padding:9px 5px;min-height:80px}
  .purple9-tool-swatch,.purple9-tool-icon{width:38px;height:38px}
  .purple9-controls{flex-direction:column}.purple9-controls>*{width:100%}
}


/* Purple Activity 10 — Sticker Page / Course Reward */
.purple10-shell{max-width:1120px}
.purple10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.purple10-progress-card h2{margin:.15rem 0 13px}
.purple10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.purple10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#8555cc);
  border-radius:inherit;transition:width .22s ease
}

.purple10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.purple10-tray-card,.purple10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.purple10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.purple10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.purple10-sticker:hover,.purple10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.purple10-sticker img{width:100%;height:95px;object-fit:contain}
.purple10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.purple10-sticker.selected{
  border-color:#8555cc;background:#f7f1ff;box-shadow:0 0 0 5px rgba(133,85,204,.10)
}
.purple10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.purple10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.purple10-tray-card>.activity-feedback{margin-top:15px}

.purple10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.purple10-board-heading h2{margin:.2rem 0 0}
.purple10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.purple10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.purple10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.purple10-slot:hover,.purple10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.purple10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.purple10-slot img{width:100%;height:100%;object-fit:contain;animation:purple10Pop .38s ease}
.purple10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes purple10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.purple10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.purple10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.purple10-certificate[hidden]{display:none}
.purple10-certificate:before,.purple10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(133,85,204,.08)
}
.purple10-certificate:before{left:-45px;top:-45px}
.purple10-certificate:after{right:-45px;bottom:-45px}
.purple10-ribbon{
  display:inline-block;background:#8555cc;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.purple10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.purple10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.purple10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.purple10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.purple10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .purple10-layout{grid-template-columns:1fr}
  .purple10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .purple10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purple10-tray-controls{flex-direction:column}.purple10-tray-controls>*{width:100%}
  .purple10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purple10-board-heading{align-items:flex-start;flex-direction:column}
  .purple10-selected-pill{align-self:stretch}
  .purple10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-purple *{visibility:hidden!important}
  #purple10-certificate,#purple10-certificate *{visibility:visible!important}
  #purple10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .purple10-certificate-actions{display:none!important}
}

/* Purple mix helpers */
.purple6-rule .yellow,.purple6-answer-swatch.yellow{background:#ffd642}
.purple6-rule .purple,.purple6-answer-swatch.purple{background:#8555cc}
.purple6-rule .purple,.purple6-answer-swatch.purple{background:#8555cc}
.purple6-answer-swatch.orange{background:#ff8626}
.purple6-answer-swatch.purple{background:#8555cc}
.purple6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Purple Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-purple{background:#8555cc}
.g1-purple{background:#8555cc}

/* Purple mix helpers */
.purple6-rule .yellow,.purple6-answer-swatch.yellow{background:#ffd642}
.purple6-rule .red,.purple6-answer-swatch.red{background:#ef3340}
.purple6-rule .purple,.purple6-answer-swatch.purple{background:#8555cc}
.purple6-rule .green,.purple6-answer-swatch.green{background:#61c86a}
.purple6-rule .purple,.purple6-answer-swatch.purple{background:#8555cc}
.purple6-answer-swatch.orange{background:#ff8626}
.purple6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-purple{background:#8555cc}
.b1-red{background:#ef3340}
.b1-purple{background:#8555cc}
.b1-yellow{background:#ffd642}

/* Purple activity helpers */
.p1-red{background:#ef3340}.p1-purple{background:#8555cc}.p1-yellow{background:#ffd642}
.purple6-answer-swatch.red{background:#ef3340}.purple6-answer-swatch.blue{background:#4f8ee8}.purple6-answer-swatch.purple{background:#8555cc}.purple6-answer-swatch.white{background:#fff;border:3px solid #ddd}.purple6-answer-swatch.green{background:#61c86a}.purple6-answer-swatch.orange{background:#ff8626}
.purple6-rule .red{background:#ef3340}.purple6-rule .blue{background:#4f8ee8}.purple6-rule .purple{background:#8555cc}.purple6-rule .white{background:#fff;border:3px solid #ddd}
.purple-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}



/* Pink course theme */
/* Pink course theme */
.theme-pink{
  --pink:#f37fb1;
  --pink-dark:#4f2c90;
  --pink-soft:#fff1e5;
}
.theme-pink .eyebrow{color:#6232a8}
.pink-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#f37fb1;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(243,127,177,.19)
}
.pink-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.pink-target-word{color:#f37fb1}
.pink-primary{
  background:#f37fb1;
  box-shadow:0 7px 0 #4f2c90
}
.pink-primary:active{box-shadow:0 4px 0 #4f2c90}
.pink-progress-pill{background:#f2eaff;color:#6232a8}
.pink-ready{border-color:#b99ae9!important}
.pink-swatch{
  background:#f37fb1;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(243,127,177,.20)
}
.pink-giant-word{color:#f37fb1;font-size:clamp(2.6rem,9vw,6rem)}
.pink-listen{border-color:#b99ae9;color:#6232a8}
.pink-object-card:hover,.pink-object-card:focus-visible{border-color:#9a77de}
.pink-check-red{background:#ef3340}
.pink-check-pink{background:#f37fb1}
.pink-check-pink{background:#f37fb1}


/* Pink Activity 2 — Find Pink */
.pink-counter-pill{background:#f2eaff;color:#6232a8}
.pink-find-item:hover,.pink-find-item:focus-visible{border-color:#9a77de}
.pink-find-item.found{
  border-color:#f37fb1;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(243,127,177,.10)
}
.pink-find-item.found .find-check{
  background:#f37fb1
}


/* Pink Activity 3 — Trace Pink */
.pink-trace-shell{max-width:1040px}
.pink-trace-stage{max-width:720px}
.pink-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.pink-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.pink-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.pink-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.pink-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.pink-trace-frame.complete{border-color:#6fcb8c}
.pink-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#f37fb1)
}
.pink-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .pink-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .pink-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .pink-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Pink Activity 4 — Pink Around Us */
.pink4-shell{max-width:1040px}
.pink4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.pink4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.pink4-strip-item img{width:100%;height:98px;object-fit:contain}
.pink4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.pink4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.pink4-dots{display:flex;gap:10px}
.pink4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.pink4-dots span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.16)}
.pink4-dots span.done{background:#58bf77;border-color:#58bf77}

.pink4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.pink4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.pink4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.pink4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.pink4-scene-head p{margin:0;color:var(--muted)}

.pink4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.pink4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.pink4-choice:hover,.pink4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(243,127,177,.10);outline:none
}
.pink4-image{height:170px;display:grid;place-items:center}
.pink4-image img{width:100%;height:100%;object-fit:contain}
.pink4-choice strong{display:block;margin-top:7px}
.pink4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#f37fb1;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.pink4-choice.correct{
  border-color:#f37fb1;background:#f5f9ff;box-shadow:0 10px 24px rgba(243,127,177,.12)
}
.pink4-choice.correct .pink4-check{opacity:1;transform:scale(1)}
.pink4-choice.correct img{animation:pink4Pop .4s ease}
.pink4-choice.quiet{opacity:.55}
.pink4-choice.wrong{animation:wrongBounce .35s ease}
.pink4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.pink4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes pink4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .pink4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pink4-scene-head{align-items:flex-start;flex-direction:column}
  .pink4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .pink4-progress-card{align-items:flex-start;flex-direction:column}
  .pink4-choice{min-height:185px}
  .pink4-image{height:125px}
  .pink4-next-wrap .primary-button{width:100%}
}


/* Pink Activity 5 — Light & Dark Pink */
.pink5-shell{max-width:1040px}
.pink5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.pink5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.pink5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.pink5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.pink5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.pink5-dots{display:flex;gap:9px}
.pink5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.pink5-dots span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.15)}
.pink5-dots span.done{background:#58bf77;border-color:#58bf77}

.pink5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.pink5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.pink5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.pink5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.pink5-heading p{margin:0;color:var(--muted)}

.pink5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.pink5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.pink5-choice:hover,.pink5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(243,127,177,.10);outline:none
}
.pink5-choice img{width:100%;height:245px;object-fit:contain}
.pink5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.pink5-choice.correct{
  border-color:#f37fb1;background:#f5f9ff;box-shadow:0 10px 24px rgba(243,127,177,.12)
}
.pink5-choice.quiet{opacity:.58}
.pink5-choice.wrong{animation:wrongBounce .35s ease}
.pink5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#f37fb1;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.pink5-choice.correct .pink5-check{opacity:1;transform:scale(1)}
.pink5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.pink5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .pink5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pink5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .pink5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pink5-level-bar{align-items:flex-start;flex-direction:column}
  .pink5-choice-row{grid-template-columns:1fr}
  .pink5-choice{min-height:270px}
  .pink5-choice img{height:195px}
  .pink5-controls{flex-direction:column}
  .pink5-controls>*{width:100%}
}


/* Pink Activity 6 — Mix Pink */
.pink6-shell{max-width:1040px}
.pink6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.pink6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.pink6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.pink6-rule-paint.red{background:#ef3340}
.pink6-rule-paint.pink{background:#f37fb1}
.pink6-rule-paint.pink{background:#f37fb1}
.pink6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.pink6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.pink6-dots{display:flex;gap:9px}
.pink6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.pink6-dots span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.16)}
.pink6-dots span.done{background:#58bf77;border-color:#58bf77}

.pink6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.pink6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.pink6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.pink6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.pink6-heading p{margin:0;color:var(--muted)}

.pink6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.pink6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.pink6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.pink6-paint-blob,.pink6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.pink6-paint-blob.red,.pink6-paint-choice-swatch.red,.pink6-pair-swatches .red{background:#ef3340}
.pink6-paint-blob.pink,.pink6-paint-choice-swatch.pink,.pink6-pair-swatches .pink{background:#f37fb1}
.pink6-paint-blob.pink,.pink6-paint-choice-swatch.pink{background:#f37fb1}
.pink6-paint-choice-swatch.pink{background:#51b85f}
.pink6-paint-choice-swatch.pink{background:#f37fb1}
.pink6-paint-choice-swatch.pink,.pink6-pair-swatches .pink{background:#f37fb1}
.pink6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.pink6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.pink6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.pink6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.pink6-choice-grid button,.pink6-pair-grid button,.pink6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.pink6-choice-grid button:hover,.pink6-pair-grid button:hover,.pink6-mixer-paints button:hover,
.pink6-choice-grid button:focus-visible,.pink6-pair-grid button:focus-visible,.pink6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.pink6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.pink6-choice-grid button.correct,.pink6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.pink6-choice-grid button.wrong,.pink6-pair-grid button.wrong,.pink6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.pink6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.pink6-pair-grid button{flex-direction:column;min-height:175px}
.pink6-pair-swatches{display:flex;gap:8px}
.pink6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.pink6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.pink6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pink6-mixer-paints button{flex-direction:column;min-height:145px}
.pink6-mixer-paints button.selected{border-color:#f37fb1;background:#f5f9ff}
.pink6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.pink6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.pink6-mixer-bowl span.red{height:45%;background:#ef3340}
.pink6-mixer-bowl span.pink{height:45%;background:#f37fb1}
.pink6-mixer-bowl span.mixed-pink{height:65%;background:#f37fb1}
.pink6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.pink6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.pink6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.pink6-object-grid button:hover,.pink6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.pink6-object-grid img{width:100%;height:175px;object-fit:contain}
.pink6-object-grid strong{display:block;margin-top:6px}
.pink6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.pink6-object-grid button.wrong{animation:wrongBounce .35s ease}

.pink6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.pink6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .pink6-heading{align-items:flex-start;flex-direction:column}
  .pink6-mix-display{grid-template-columns:1fr 38px 1fr}
  .pink6-mix-display .pink6-symbol:nth-of-type(2){grid-column:1/-1}
  .pink6-mix-display .pink6-paint-cup:last-child{grid-column:1/-1}
  .pink6-pair-grid{grid-template-columns:1fr}
  .pink6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pink6-level-bar{align-items:flex-start;flex-direction:column}
  .pink6-choice-grid{grid-template-columns:1fr}
  .pink6-object-grid{grid-template-columns:1fr}
  .pink6-mixer-paints{grid-template-columns:1fr}
  .pink6-controls{flex-direction:column}.pink6-controls>*{width:100%}
}


/* Pink Activity 7 — Odd One Out */
.pink7-shell{max-width:1040px}
.pink7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.pink7-dots{display:flex;gap:9px}
.pink7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.pink7-dots span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.16)}
.pink7-dots span.done{background:#58bf77;border-color:#58bf77}

.pink7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.pink7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.pink7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.pink7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.pink7-heading p{margin:0;color:var(--muted)}

.pink7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.pink7-clue span:last-child{color:var(--muted);font-size:.88rem}
.pink7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#f37fb1;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.pink7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pink7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.pink7-choice:hover,.pink7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(243,127,177,.10);outline:none
}
.pink7-image{height:170px;display:grid;place-items:center}
.pink7-image img{width:100%;height:100%;object-fit:contain}
.pink7-choice strong{display:block;font-size:1rem;margin-top:7px}
.pink7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.pink7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.pink7-choice.correct .pink7-check{opacity:1;transform:scale(1)}
.pink7-choice.correct img{animation:pink7Correct .4s ease}
.pink7-choice.quiet{opacity:.55}
.pink7-choice.pink-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(243,127,177,.10)
}
.pink7-choice.wrong{animation:wrongBounce .35s ease}
.pink7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.pink7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes pink7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .pink7-heading{align-items:flex-start;flex-direction:column}
  .pink7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .pink7-level-bar{align-items:flex-start;flex-direction:column}
  .pink7-choice{min-height:190px}
  .pink7-image{height:125px}
  .pink7-controls{flex-direction:column}
  .pink7-controls>*{width:100%}
}


/* Pink Activity 8 — Story / Read-Along */
.pink8-shell{max-width:1000px}
.pink8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.pink8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.pink8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.pink8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.pink8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.pink8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.pink8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.pink8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.pink8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.pink8-copy p{margin:.4rem 0 18px}
.pink8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.pink8-pink-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(243,127,177,.08)
}
.pink8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.pink8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#f37fb1);
  border-radius:inherit;transition:width .22s ease
}
.pink8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.pink8-mini-pages{display:flex;justify-content:center;gap:8px}
.pink8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.pink8-mini-pages span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.17)}
.pink8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.pink8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.pink8-questions[hidden]{display:none}
.pink8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.pink8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.pink8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pink8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.pink8-answer-grid button:hover,.pink8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.pink8-answer-grid img{width:100%;height:135px;object-fit:contain}
.pink8-answer-grid strong{display:block;margin-top:7px}
.pink8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.pink8-answer-grid button.quiet{opacity:.52}
.pink8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.pink8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.pink8-question-feedback.good{background:#effcf3;color:#26723e}
.pink8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.pink8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .pink8-book-top{align-items:flex-start;flex-direction:column}
  .pink8-page{grid-template-columns:1fr;min-height:auto}
  .pink8-art-wrap{height:265px}
  .pink8-copy{text-align:center}
  .pink8-nav{grid-template-columns:1fr 1fr}
  .pink8-mini-pages{grid-column:1/-1;grid-row:1}
  .pink8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .pink8-art-wrap{height:220px}
  .pink8-nav{grid-template-columns:1fr}
  .pink8-mini-pages{grid-column:auto;grid-row:auto}
  .pink8-nav>*{width:100%}
}


/* Pink Activity 9 — Coloring Time */
.pink9-shell{max-width:1040px}
.pink9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.pink9-dots{display:flex;gap:10px}
.pink9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.pink9-dots span.active{background:#f37fb1;border-color:#f37fb1;transform:scale(1.16)}
.pink9-dots span.done{background:#58bf77;border-color:#58bf77}

.pink9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.pink9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.pink9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.pink9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.pink9-heading p{margin:0;color:var(--muted);max-width:650px}
.pink9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.pink9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.pink9-reference img{width:90px;height:90px;object-fit:contain}

.pink9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.pink9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.pink9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#pink9-paint-canvas,#pink9-lineart{position:absolute;inset:0;width:100%;height:100%}
#pink9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#pink9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.pink9-tools{display:grid;gap:12px}
.pink9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.pink9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(243,127,177,.10)}
.pink9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.pink9-tool-swatch.pink{background:#f37fb1}
.pink9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.pink9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.pink9-tool strong{font-size:.82rem}

.pink9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.pink9-progress-row strong{color:#6232a8}
.pink9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.pink9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#f37fb1);
  border-radius:inherit;transition:width .12s ease
}
.pink9-card>.activity-feedback{max-width:850px;margin:0 auto}
.pink9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.pink9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .pink9-heading{align-items:flex-start;flex-direction:column}
  .pink9-reference{align-self:flex-end}
  .pink9-workspace{grid-template-columns:1fr}
  .pink9-tools{grid-template-columns:repeat(3,1fr)}
  .pink9-tool{min-height:88px}
}
@media(max-width:520px){
  .pink9-level-bar{align-items:flex-start;flex-direction:column}
  .pink9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .pink9-tool{padding:9px 5px;min-height:80px}
  .pink9-tool-swatch,.pink9-tool-icon{width:38px;height:38px}
  .pink9-controls{flex-direction:column}.pink9-controls>*{width:100%}
}


/* Pink Activity 10 — Sticker Page / Course Reward */
.pink10-shell{max-width:1120px}
.pink10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.pink10-progress-card h2{margin:.15rem 0 13px}
.pink10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.pink10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#f37fb1);
  border-radius:inherit;transition:width .22s ease
}

.pink10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.pink10-tray-card,.pink10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.pink10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.pink10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.pink10-sticker:hover,.pink10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.pink10-sticker img{width:100%;height:95px;object-fit:contain}
.pink10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.pink10-sticker.selected{
  border-color:#f37fb1;background:#f7f1ff;box-shadow:0 0 0 5px rgba(243,127,177,.10)
}
.pink10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.pink10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.pink10-tray-card>.activity-feedback{margin-top:15px}

.pink10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.pink10-board-heading h2{margin:.2rem 0 0}
.pink10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.pink10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.pink10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.pink10-slot:hover,.pink10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.pink10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.pink10-slot img{width:100%;height:100%;object-fit:contain;animation:pink10Pop .38s ease}
.pink10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes pink10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.pink10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.pink10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.pink10-certificate[hidden]{display:none}
.pink10-certificate:before,.pink10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(243,127,177,.08)
}
.pink10-certificate:before{left:-45px;top:-45px}
.pink10-certificate:after{right:-45px;bottom:-45px}
.pink10-ribbon{
  display:inline-block;background:#f37fb1;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.pink10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.pink10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.pink10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.pink10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.pink10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .pink10-layout{grid-template-columns:1fr}
  .pink10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .pink10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pink10-tray-controls{flex-direction:column}.pink10-tray-controls>*{width:100%}
  .pink10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pink10-board-heading{align-items:flex-start;flex-direction:column}
  .pink10-selected-pill{align-self:stretch}
  .pink10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-pink *{visibility:hidden!important}
  #pink10-certificate,#pink10-certificate *{visibility:visible!important}
  #pink10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .pink10-certificate-actions{display:none!important}
}

/* Pink mix helpers */
.pink6-rule .yellow,.pink6-answer-swatch.yellow{background:#ffd642}
.pink6-rule .pink,.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-rule .pink,.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-answer-swatch.orange{background:#ff8626}
.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Pink Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-pink{background:#f37fb1}
.g1-pink{background:#f37fb1}

/* Pink mix helpers */
.pink6-rule .yellow,.pink6-answer-swatch.yellow{background:#ffd642}
.pink6-rule .red,.pink6-answer-swatch.red{background:#ef3340}
.pink6-rule .pink,.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-rule .green,.pink6-answer-swatch.green{background:#61c86a}
.pink6-rule .pink,.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-answer-swatch.orange{background:#ff8626}
.pink6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-pink{background:#f37fb1}
.b1-red{background:#ef3340}
.b1-pink{background:#f37fb1}
.b1-yellow{background:#ffd642}

/* Pink activity helpers */
.p1-red{background:#ef3340}.p1-pink{background:#f37fb1}.p1-yellow{background:#ffd642}
.pink6-answer-swatch.red{background:#ef3340}.pink6-answer-swatch.blue{background:#4f8ee8}.pink6-answer-swatch.pink{background:#f37fb1}.pink6-answer-swatch.white{background:#fff;border:3px solid #ddd}.pink6-answer-swatch.green{background:#61c86a}.pink6-answer-swatch.orange{background:#ff8626}
.pink6-rule .red{background:#ef3340}.pink6-rule .blue{background:#4f8ee8}.pink6-rule .pink{background:#f37fb1}.pink6-rule .white{background:#fff;border:3px solid #ddd}
.pink-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}





/* Brown course theme */
/* Brown course theme */
.theme-brown{
  --brown:#9a6538;
  --brown-dark:#4f2c90;
  --brown-soft:#fff1e5;
}
.theme-brown .eyebrow{color:#6232a8}
.brown-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#9a6538;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(154,101,56,.19)
}
.brown-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.brown-target-word{color:#9a6538}
.brown-primary{
  background:#9a6538;
  box-shadow:0 7px 0 #4f2c90
}
.brown-primary:active{box-shadow:0 4px 0 #4f2c90}
.brown-progress-pill{background:#f2eaff;color:#6232a8}
.brown-ready{border-color:#b99ae9!important}
.brown-swatch{
  background:#9a6538;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(154,101,56,.20)
}
.brown-giant-word{color:#9a6538;font-size:clamp(2.6rem,9vw,6rem)}
.brown-listen{border-color:#b99ae9;color:#6232a8}
.brown-object-card:hover,.brown-object-card:focus-visible{border-color:#9a77de}
.brown-check-red{background:#ef3340}
.brown-check-brown{background:#9a6538}
.brown-check-brown{background:#9a6538}


/* Brown Activity 2 — Find Brown */
.brown-counter-pill{background:#f2eaff;color:#6232a8}
.brown-find-item:hover,.brown-find-item:focus-visible{border-color:#9a77de}
.brown-find-item.found{
  border-color:#9a6538;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(154,101,56,.10)
}
.brown-find-item.found .find-check{
  background:#9a6538
}


/* Brown Activity 3 — Trace Brown */
.brown-trace-shell{max-width:1040px}
.brown-trace-stage{max-width:720px}
.brown-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.brown-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.brown-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.brown-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.brown-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.brown-trace-frame.complete{border-color:#6fcb8c}
.brown-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#9a6538)
}
.brown-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .brown-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .brown-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .brown-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Brown Activity 4 — Brown Around Us */
.brown4-shell{max-width:1040px}
.brown4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.brown4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.brown4-strip-item img{width:100%;height:98px;object-fit:contain}
.brown4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.brown4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.brown4-dots{display:flex;gap:10px}
.brown4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.brown4-dots span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.16)}
.brown4-dots span.done{background:#58bf77;border-color:#58bf77}

.brown4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.brown4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.brown4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.brown4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.brown4-scene-head p{margin:0;color:var(--muted)}

.brown4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.brown4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.brown4-choice:hover,.brown4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(154,101,56,.10);outline:none
}
.brown4-image{height:170px;display:grid;place-items:center}
.brown4-image img{width:100%;height:100%;object-fit:contain}
.brown4-choice strong{display:block;margin-top:7px}
.brown4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#9a6538;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.brown4-choice.correct{
  border-color:#9a6538;background:#f5f9ff;box-shadow:0 10px 24px rgba(154,101,56,.12)
}
.brown4-choice.correct .brown4-check{opacity:1;transform:scale(1)}
.brown4-choice.correct img{animation:brown4Pop .4s ease}
.brown4-choice.quiet{opacity:.55}
.brown4-choice.wrong{animation:wrongBounce .35s ease}
.brown4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.brown4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes brown4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .brown4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brown4-scene-head{align-items:flex-start;flex-direction:column}
  .brown4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .brown4-progress-card{align-items:flex-start;flex-direction:column}
  .brown4-choice{min-height:185px}
  .brown4-image{height:125px}
  .brown4-next-wrap .primary-button{width:100%}
}


/* Brown Activity 5 — Light & Dark Brown */
.brown5-shell{max-width:1040px}
.brown5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.brown5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.brown5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.brown5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.brown5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.brown5-dots{display:flex;gap:9px}
.brown5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.brown5-dots span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.15)}
.brown5-dots span.done{background:#58bf77;border-color:#58bf77}

.brown5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.brown5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.brown5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.brown5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.brown5-heading p{margin:0;color:var(--muted)}

.brown5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.brown5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.brown5-choice:hover,.brown5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(154,101,56,.10);outline:none
}
.brown5-choice img{width:100%;height:245px;object-fit:contain}
.brown5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.brown5-choice.correct{
  border-color:#9a6538;background:#f5f9ff;box-shadow:0 10px 24px rgba(154,101,56,.12)
}
.brown5-choice.quiet{opacity:.58}
.brown5-choice.wrong{animation:wrongBounce .35s ease}
.brown5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#9a6538;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.brown5-choice.correct .brown5-check{opacity:1;transform:scale(1)}
.brown5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.brown5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .brown5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brown5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .brown5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brown5-level-bar{align-items:flex-start;flex-direction:column}
  .brown5-choice-row{grid-template-columns:1fr}
  .brown5-choice{min-height:270px}
  .brown5-choice img{height:195px}
  .brown5-controls{flex-direction:column}
  .brown5-controls>*{width:100%}
}


/* Brown Activity 6 — Mix Brown */
.brown6-shell{max-width:1040px}
.brown6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.brown6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.brown6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.brown6-rule-paint.red{background:#ef3340}
.brown6-rule-paint.brown{background:#9a6538}
.brown6-rule-paint.brown{background:#9a6538}
.brown6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.brown6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.brown6-dots{display:flex;gap:9px}
.brown6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.brown6-dots span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.16)}
.brown6-dots span.done{background:#58bf77;border-color:#58bf77}

.brown6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.brown6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.brown6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.brown6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.brown6-heading p{margin:0;color:var(--muted)}

.brown6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.brown6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.brown6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.brown6-paint-blob,.brown6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.brown6-paint-blob.red,.brown6-paint-choice-swatch.red,.brown6-pair-swatches .red{background:#ef3340}
.brown6-paint-blob.brown,.brown6-paint-choice-swatch.brown,.brown6-pair-swatches .brown{background:#9a6538}
.brown6-paint-blob.brown,.brown6-paint-choice-swatch.brown{background:#9a6538}
.brown6-paint-choice-swatch.brown{background:#51b85f}
.brown6-paint-choice-swatch.brown{background:#9a6538}
.brown6-paint-choice-swatch.brown,.brown6-pair-swatches .brown{background:#9a6538}
.brown6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.brown6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.brown6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.brown6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.brown6-choice-grid button,.brown6-pair-grid button,.brown6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.brown6-choice-grid button:hover,.brown6-pair-grid button:hover,.brown6-mixer-paints button:hover,
.brown6-choice-grid button:focus-visible,.brown6-pair-grid button:focus-visible,.brown6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.brown6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.brown6-choice-grid button.correct,.brown6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.brown6-choice-grid button.wrong,.brown6-pair-grid button.wrong,.brown6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.brown6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.brown6-pair-grid button{flex-direction:column;min-height:175px}
.brown6-pair-swatches{display:flex;gap:8px}
.brown6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.brown6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.brown6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.brown6-mixer-paints button{flex-direction:column;min-height:145px}
.brown6-mixer-paints button.selected{border-color:#9a6538;background:#f5f9ff}
.brown6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.brown6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.brown6-mixer-bowl span.red{height:45%;background:#ef3340}
.brown6-mixer-bowl span.brown{height:45%;background:#9a6538}
.brown6-mixer-bowl span.mixed-brown{height:65%;background:#9a6538}
.brown6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.brown6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.brown6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.brown6-object-grid button:hover,.brown6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.brown6-object-grid img{width:100%;height:175px;object-fit:contain}
.brown6-object-grid strong{display:block;margin-top:6px}
.brown6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.brown6-object-grid button.wrong{animation:wrongBounce .35s ease}

.brown6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.brown6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .brown6-heading{align-items:flex-start;flex-direction:column}
  .brown6-mix-display{grid-template-columns:1fr 38px 1fr}
  .brown6-mix-display .brown6-symbol:nth-of-type(2){grid-column:1/-1}
  .brown6-mix-display .brown6-paint-cup:last-child{grid-column:1/-1}
  .brown6-pair-grid{grid-template-columns:1fr}
  .brown6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .brown6-level-bar{align-items:flex-start;flex-direction:column}
  .brown6-choice-grid{grid-template-columns:1fr}
  .brown6-object-grid{grid-template-columns:1fr}
  .brown6-mixer-paints{grid-template-columns:1fr}
  .brown6-controls{flex-direction:column}.brown6-controls>*{width:100%}
}


/* Brown Activity 7 — Odd One Out */
.brown7-shell{max-width:1040px}
.brown7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.brown7-dots{display:flex;gap:9px}
.brown7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.brown7-dots span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.16)}
.brown7-dots span.done{background:#58bf77;border-color:#58bf77}

.brown7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.brown7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.brown7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.brown7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.brown7-heading p{margin:0;color:var(--muted)}

.brown7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.brown7-clue span:last-child{color:var(--muted);font-size:.88rem}
.brown7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#9a6538;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.brown7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.brown7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.brown7-choice:hover,.brown7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(154,101,56,.10);outline:none
}
.brown7-image{height:170px;display:grid;place-items:center}
.brown7-image img{width:100%;height:100%;object-fit:contain}
.brown7-choice strong{display:block;font-size:1rem;margin-top:7px}
.brown7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.brown7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.brown7-choice.correct .brown7-check{opacity:1;transform:scale(1)}
.brown7-choice.correct img{animation:brown7Correct .4s ease}
.brown7-choice.quiet{opacity:.55}
.brown7-choice.brown-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(154,101,56,.10)
}
.brown7-choice.wrong{animation:wrongBounce .35s ease}
.brown7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.brown7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes brown7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .brown7-heading{align-items:flex-start;flex-direction:column}
  .brown7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .brown7-level-bar{align-items:flex-start;flex-direction:column}
  .brown7-choice{min-height:190px}
  .brown7-image{height:125px}
  .brown7-controls{flex-direction:column}
  .brown7-controls>*{width:100%}
}


/* Brown Activity 8 — Story / Read-Along */
.brown8-shell{max-width:1000px}
.brown8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.brown8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.brown8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.brown8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.brown8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.brown8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.brown8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.brown8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.brown8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.brown8-copy p{margin:.4rem 0 18px}
.brown8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.brown8-brown-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(154,101,56,.08)
}
.brown8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.brown8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#9a6538);
  border-radius:inherit;transition:width .22s ease
}
.brown8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.brown8-mini-pages{display:flex;justify-content:center;gap:8px}
.brown8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.brown8-mini-pages span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.17)}
.brown8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.brown8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.brown8-questions[hidden]{display:none}
.brown8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.brown8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.brown8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.brown8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.brown8-answer-grid button:hover,.brown8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.brown8-answer-grid img{width:100%;height:135px;object-fit:contain}
.brown8-answer-grid strong{display:block;margin-top:7px}
.brown8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.brown8-answer-grid button.quiet{opacity:.52}
.brown8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.brown8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.brown8-question-feedback.good{background:#effcf3;color:#26723e}
.brown8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.brown8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .brown8-book-top{align-items:flex-start;flex-direction:column}
  .brown8-page{grid-template-columns:1fr;min-height:auto}
  .brown8-art-wrap{height:265px}
  .brown8-copy{text-align:center}
  .brown8-nav{grid-template-columns:1fr 1fr}
  .brown8-mini-pages{grid-column:1/-1;grid-row:1}
  .brown8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .brown8-art-wrap{height:220px}
  .brown8-nav{grid-template-columns:1fr}
  .brown8-mini-pages{grid-column:auto;grid-row:auto}
  .brown8-nav>*{width:100%}
}


/* Brown Activity 9 — Coloring Time */
.brown9-shell{max-width:1040px}
.brown9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.brown9-dots{display:flex;gap:10px}
.brown9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.brown9-dots span.active{background:#9a6538;border-color:#9a6538;transform:scale(1.16)}
.brown9-dots span.done{background:#58bf77;border-color:#58bf77}

.brown9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.brown9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.brown9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.brown9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.brown9-heading p{margin:0;color:var(--muted);max-width:650px}
.brown9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.brown9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.brown9-reference img{width:90px;height:90px;object-fit:contain}

.brown9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.brown9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.brown9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#brown9-paint-canvas,#brown9-lineart{position:absolute;inset:0;width:100%;height:100%}
#brown9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#brown9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.brown9-tools{display:grid;gap:12px}
.brown9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.brown9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(154,101,56,.10)}
.brown9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.brown9-tool-swatch.brown{background:#9a6538}
.brown9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.brown9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.brown9-tool strong{font-size:.82rem}

.brown9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.brown9-progress-row strong{color:#6232a8}
.brown9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.brown9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#9a6538);
  border-radius:inherit;transition:width .12s ease
}
.brown9-card>.activity-feedback{max-width:850px;margin:0 auto}
.brown9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.brown9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .brown9-heading{align-items:flex-start;flex-direction:column}
  .brown9-reference{align-self:flex-end}
  .brown9-workspace{grid-template-columns:1fr}
  .brown9-tools{grid-template-columns:repeat(3,1fr)}
  .brown9-tool{min-height:88px}
}
@media(max-width:520px){
  .brown9-level-bar{align-items:flex-start;flex-direction:column}
  .brown9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .brown9-tool{padding:9px 5px;min-height:80px}
  .brown9-tool-swatch,.brown9-tool-icon{width:38px;height:38px}
  .brown9-controls{flex-direction:column}.brown9-controls>*{width:100%}
}


/* Brown Activity 10 — Sticker Page / Course Reward */
.brown10-shell{max-width:1120px}
.brown10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.brown10-progress-card h2{margin:.15rem 0 13px}
.brown10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.brown10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#9a6538);
  border-radius:inherit;transition:width .22s ease
}

.brown10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.brown10-tray-card,.brown10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.brown10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.brown10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.brown10-sticker:hover,.brown10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.brown10-sticker img{width:100%;height:95px;object-fit:contain}
.brown10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.brown10-sticker.selected{
  border-color:#9a6538;background:#f7f1ff;box-shadow:0 0 0 5px rgba(154,101,56,.10)
}
.brown10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.brown10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.brown10-tray-card>.activity-feedback{margin-top:15px}

.brown10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.brown10-board-heading h2{margin:.2rem 0 0}
.brown10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.brown10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.brown10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.brown10-slot:hover,.brown10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.brown10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.brown10-slot img{width:100%;height:100%;object-fit:contain;animation:brown10Pop .38s ease}
.brown10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes brown10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.brown10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.brown10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.brown10-certificate[hidden]{display:none}
.brown10-certificate:before,.brown10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(154,101,56,.08)
}
.brown10-certificate:before{left:-45px;top:-45px}
.brown10-certificate:after{right:-45px;bottom:-45px}
.brown10-ribbon{
  display:inline-block;background:#9a6538;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.brown10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.brown10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.brown10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.brown10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.brown10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .brown10-layout{grid-template-columns:1fr}
  .brown10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .brown10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brown10-tray-controls{flex-direction:column}.brown10-tray-controls>*{width:100%}
  .brown10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brown10-board-heading{align-items:flex-start;flex-direction:column}
  .brown10-selected-pill{align-self:stretch}
  .brown10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-brown *{visibility:hidden!important}
  #brown10-certificate,#brown10-certificate *{visibility:visible!important}
  #brown10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .brown10-certificate-actions{display:none!important}
}

/* Brown mix helpers */
.brown6-rule .yellow,.brown6-answer-swatch.yellow{background:#ffd642}
.brown6-rule .brown,.brown6-answer-swatch.brown{background:#9a6538}
.brown6-rule .brown,.brown6-answer-swatch.brown{background:#9a6538}
.brown6-answer-swatch.orange{background:#ff8626}
.brown6-answer-swatch.brown{background:#9a6538}
.brown6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Brown Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-brown{background:#9a6538}
.g1-brown{background:#9a6538}

/* Brown mix helpers */
.brown6-rule .yellow,.brown6-answer-swatch.yellow{background:#ffd642}
.brown6-rule .red,.brown6-answer-swatch.red{background:#ef3340}
.brown6-rule .brown,.brown6-answer-swatch.brown{background:#9a6538}
.brown6-rule .green,.brown6-answer-swatch.green{background:#61c86a}
.brown6-rule .brown,.brown6-answer-swatch.brown{background:#9a6538}
.brown6-answer-swatch.orange{background:#ff8626}
.brown6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-brown{background:#9a6538}
.b1-red{background:#ef3340}
.b1-brown{background:#9a6538}
.b1-yellow{background:#ffd642}

/* Brown activity helpers */
.p1-red{background:#ef3340}.p1-brown{background:#9a6538}.p1-yellow{background:#ffd642}
.brown6-answer-swatch.red{background:#ef3340}.brown6-answer-swatch.blue{background:#4f8ee8}.brown6-answer-swatch.brown{background:#9a6538}.brown6-answer-swatch.white{background:#fff;border:3px solid #ddd}.brown6-answer-swatch.green{background:#61c86a}.brown6-answer-swatch.orange{background:#ff8626}
.brown6-rule .red{background:#ef3340}.brown6-rule .blue{background:#4f8ee8}.brown6-rule .brown{background:#9a6538}.brown6-rule .white{background:#fff;border:3px solid #ddd}
.brown-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}







/* Gray course theme */
/* Gray course theme */
.theme-gray{
  --gray:#8a929b;
  --gray-dark:#4f2c90;
  --gray-soft:#fff1e5;
}
.theme-gray .eyebrow{color:#6232a8}
.gray-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#8a929b;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(138,146,155,.19)
}
.gray-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.gray-target-word{color:#8a929b}
.gray-primary{
  background:#8a929b;
  box-shadow:0 7px 0 #4f2c90
}
.gray-primary:active{box-shadow:0 4px 0 #4f2c90}
.gray-progress-pill{background:#f2eaff;color:#6232a8}
.gray-ready{border-color:#b99ae9!important}
.gray-swatch{
  background:#8a929b;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(138,146,155,.20)
}
.gray-giant-word{color:#8a929b;font-size:clamp(2.6rem,9vw,6rem)}
.gray-listen{border-color:#b99ae9;color:#6232a8}
.gray-object-card:hover,.gray-object-card:focus-visible{border-color:#9a77de}
.gray-check-red{background:#ef3340}
.gray-check-gray{background:#8a929b}
.gray-check-gray{background:#8a929b}


/* Gray Activity 2 — Find Gray */
.gray-counter-pill{background:#f2eaff;color:#6232a8}
.gray-find-item:hover,.gray-find-item:focus-visible{border-color:#9a77de}
.gray-find-item.found{
  border-color:#8a929b;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(138,146,155,.10)
}
.gray-find-item.found .find-check{
  background:#8a929b
}


/* Gray Activity 3 — Trace Gray */
.gray-trace-shell{max-width:1040px}
.gray-trace-stage{max-width:720px}
.gray-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.gray-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.gray-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.gray-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.gray-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.gray-trace-frame.complete{border-color:#6fcb8c}
.gray-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#8a929b)
}
.gray-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .gray-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .gray-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .gray-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Gray Activity 4 — Gray Around Us */
.gray4-shell{max-width:1040px}
.gray4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.gray4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.gray4-strip-item img{width:100%;height:98px;object-fit:contain}
.gray4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.gray4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.gray4-dots{display:flex;gap:10px}
.gray4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.gray4-dots span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.16)}
.gray4-dots span.done{background:#58bf77;border-color:#58bf77}

.gray4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.gray4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.gray4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.gray4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.gray4-scene-head p{margin:0;color:var(--muted)}

.gray4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.gray4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.gray4-choice:hover,.gray4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(138,146,155,.10);outline:none
}
.gray4-image{height:170px;display:grid;place-items:center}
.gray4-image img{width:100%;height:100%;object-fit:contain}
.gray4-choice strong{display:block;margin-top:7px}
.gray4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#8a929b;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.gray4-choice.correct{
  border-color:#8a929b;background:#f5f9ff;box-shadow:0 10px 24px rgba(138,146,155,.12)
}
.gray4-choice.correct .gray4-check{opacity:1;transform:scale(1)}
.gray4-choice.correct img{animation:gray4Pop .4s ease}
.gray4-choice.quiet{opacity:.55}
.gray4-choice.wrong{animation:wrongBounce .35s ease}
.gray4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.gray4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes gray4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .gray4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gray4-scene-head{align-items:flex-start;flex-direction:column}
  .gray4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .gray4-progress-card{align-items:flex-start;flex-direction:column}
  .gray4-choice{min-height:185px}
  .gray4-image{height:125px}
  .gray4-next-wrap .primary-button{width:100%}
}


/* Gray Activity 5 — Light & Dark Gray */
.gray5-shell{max-width:1040px}
.gray5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.gray5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.gray5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.gray5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.gray5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.gray5-dots{display:flex;gap:9px}
.gray5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.gray5-dots span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.15)}
.gray5-dots span.done{background:#58bf77;border-color:#58bf77}

.gray5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.gray5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.gray5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.gray5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.gray5-heading p{margin:0;color:var(--muted)}

.gray5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.gray5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.gray5-choice:hover,.gray5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(138,146,155,.10);outline:none
}
.gray5-choice img{width:100%;height:245px;object-fit:contain}
.gray5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.gray5-choice.correct{
  border-color:#8a929b;background:#f5f9ff;box-shadow:0 10px 24px rgba(138,146,155,.12)
}
.gray5-choice.quiet{opacity:.58}
.gray5-choice.wrong{animation:wrongBounce .35s ease}
.gray5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#8a929b;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.gray5-choice.correct .gray5-check{opacity:1;transform:scale(1)}
.gray5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.gray5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .gray5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gray5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .gray5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gray5-level-bar{align-items:flex-start;flex-direction:column}
  .gray5-choice-row{grid-template-columns:1fr}
  .gray5-choice{min-height:270px}
  .gray5-choice img{height:195px}
  .gray5-controls{flex-direction:column}
  .gray5-controls>*{width:100%}
}


/* Gray Activity 6 — Mix Gray */
.gray6-shell{max-width:1040px}
.gray6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.gray6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.gray6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.gray6-rule-paint.red{background:#ef3340}
.gray6-rule-paint.gray{background:#8a929b}
.gray6-rule-paint.gray{background:#8a929b}
.gray6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.gray6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.gray6-dots{display:flex;gap:9px}
.gray6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.gray6-dots span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.16)}
.gray6-dots span.done{background:#58bf77;border-color:#58bf77}

.gray6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.gray6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.gray6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.gray6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.gray6-heading p{margin:0;color:var(--muted)}

.gray6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.gray6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.gray6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.gray6-paint-blob,.gray6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.gray6-paint-blob.red,.gray6-paint-choice-swatch.red,.gray6-pair-swatches .red{background:#ef3340}
.gray6-paint-blob.gray,.gray6-paint-choice-swatch.gray,.gray6-pair-swatches .gray{background:#8a929b}
.gray6-paint-blob.gray,.gray6-paint-choice-swatch.gray{background:#8a929b}
.gray6-paint-choice-swatch.gray{background:#51b85f}
.gray6-paint-choice-swatch.gray{background:#8a929b}
.gray6-paint-choice-swatch.gray,.gray6-pair-swatches .gray{background:#8a929b}
.gray6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.gray6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.gray6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.gray6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.gray6-choice-grid button,.gray6-pair-grid button,.gray6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.gray6-choice-grid button:hover,.gray6-pair-grid button:hover,.gray6-mixer-paints button:hover,
.gray6-choice-grid button:focus-visible,.gray6-pair-grid button:focus-visible,.gray6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.gray6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.gray6-choice-grid button.correct,.gray6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.gray6-choice-grid button.wrong,.gray6-pair-grid button.wrong,.gray6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.gray6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.gray6-pair-grid button{flex-direction:column;min-height:175px}
.gray6-pair-swatches{display:flex;gap:8px}
.gray6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.gray6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.gray6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gray6-mixer-paints button{flex-direction:column;min-height:145px}
.gray6-mixer-paints button.selected{border-color:#8a929b;background:#f5f9ff}
.gray6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.gray6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.gray6-mixer-bowl span.red{height:45%;background:#ef3340}
.gray6-mixer-bowl span.gray{height:45%;background:#8a929b}
.gray6-mixer-bowl span.mixed-gray{height:65%;background:#8a929b}
.gray6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.gray6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.gray6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.gray6-object-grid button:hover,.gray6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.gray6-object-grid img{width:100%;height:175px;object-fit:contain}
.gray6-object-grid strong{display:block;margin-top:6px}
.gray6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.gray6-object-grid button.wrong{animation:wrongBounce .35s ease}

.gray6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.gray6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .gray6-heading{align-items:flex-start;flex-direction:column}
  .gray6-mix-display{grid-template-columns:1fr 38px 1fr}
  .gray6-mix-display .gray6-symbol:nth-of-type(2){grid-column:1/-1}
  .gray6-mix-display .gray6-paint-cup:last-child{grid-column:1/-1}
  .gray6-pair-grid{grid-template-columns:1fr}
  .gray6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .gray6-level-bar{align-items:flex-start;flex-direction:column}
  .gray6-choice-grid{grid-template-columns:1fr}
  .gray6-object-grid{grid-template-columns:1fr}
  .gray6-mixer-paints{grid-template-columns:1fr}
  .gray6-controls{flex-direction:column}.gray6-controls>*{width:100%}
}


/* Gray Activity 7 — Odd One Out */
.gray7-shell{max-width:1040px}
.gray7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.gray7-dots{display:flex;gap:9px}
.gray7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.gray7-dots span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.16)}
.gray7-dots span.done{background:#58bf77;border-color:#58bf77}

.gray7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.gray7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.gray7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.gray7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.gray7-heading p{margin:0;color:var(--muted)}

.gray7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.gray7-clue span:last-child{color:var(--muted);font-size:.88rem}
.gray7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#8a929b;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.gray7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gray7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.gray7-choice:hover,.gray7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(138,146,155,.10);outline:none
}
.gray7-image{height:170px;display:grid;place-items:center}
.gray7-image img{width:100%;height:100%;object-fit:contain}
.gray7-choice strong{display:block;font-size:1rem;margin-top:7px}
.gray7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.gray7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.gray7-choice.correct .gray7-check{opacity:1;transform:scale(1)}
.gray7-choice.correct img{animation:gray7Correct .4s ease}
.gray7-choice.quiet{opacity:.55}
.gray7-choice.gray-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(138,146,155,.10)
}
.gray7-choice.wrong{animation:wrongBounce .35s ease}
.gray7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.gray7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes gray7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .gray7-heading{align-items:flex-start;flex-direction:column}
  .gray7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .gray7-level-bar{align-items:flex-start;flex-direction:column}
  .gray7-choice{min-height:190px}
  .gray7-image{height:125px}
  .gray7-controls{flex-direction:column}
  .gray7-controls>*{width:100%}
}


/* Gray Activity 8 — Story / Read-Along */
.gray8-shell{max-width:1000px}
.gray8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.gray8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.gray8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.gray8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.gray8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.gray8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.gray8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.gray8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.gray8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.gray8-copy p{margin:.4rem 0 18px}
.gray8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.gray8-gray-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(138,146,155,.08)
}
.gray8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.gray8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#8a929b);
  border-radius:inherit;transition:width .22s ease
}
.gray8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.gray8-mini-pages{display:flex;justify-content:center;gap:8px}
.gray8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.gray8-mini-pages span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.17)}
.gray8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.gray8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.gray8-questions[hidden]{display:none}
.gray8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.gray8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.gray8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gray8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.gray8-answer-grid button:hover,.gray8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.gray8-answer-grid img{width:100%;height:135px;object-fit:contain}
.gray8-answer-grid strong{display:block;margin-top:7px}
.gray8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.gray8-answer-grid button.quiet{opacity:.52}
.gray8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.gray8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.gray8-question-feedback.good{background:#effcf3;color:#26723e}
.gray8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.gray8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .gray8-book-top{align-items:flex-start;flex-direction:column}
  .gray8-page{grid-template-columns:1fr;min-height:auto}
  .gray8-art-wrap{height:265px}
  .gray8-copy{text-align:center}
  .gray8-nav{grid-template-columns:1fr 1fr}
  .gray8-mini-pages{grid-column:1/-1;grid-row:1}
  .gray8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .gray8-art-wrap{height:220px}
  .gray8-nav{grid-template-columns:1fr}
  .gray8-mini-pages{grid-column:auto;grid-row:auto}
  .gray8-nav>*{width:100%}
}


/* Gray Activity 9 — Coloring Time */
.gray9-shell{max-width:1040px}
.gray9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.gray9-dots{display:flex;gap:10px}
.gray9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.gray9-dots span.active{background:#8a929b;border-color:#8a929b;transform:scale(1.16)}
.gray9-dots span.done{background:#58bf77;border-color:#58bf77}

.gray9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.gray9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.gray9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.gray9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.gray9-heading p{margin:0;color:var(--muted);max-width:650px}
.gray9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.gray9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.gray9-reference img{width:90px;height:90px;object-fit:contain}

.gray9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.gray9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.gray9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#gray9-paint-canvas,#gray9-lineart{position:absolute;inset:0;width:100%;height:100%}
#gray9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#gray9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.gray9-tools{display:grid;gap:12px}
.gray9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.gray9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(138,146,155,.10)}
.gray9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.gray9-tool-swatch.gray{background:#8a929b}
.gray9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.gray9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.gray9-tool strong{font-size:.82rem}

.gray9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.gray9-progress-row strong{color:#6232a8}
.gray9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.gray9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#8a929b);
  border-radius:inherit;transition:width .12s ease
}
.gray9-card>.activity-feedback{max-width:850px;margin:0 auto}
.gray9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.gray9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .gray9-heading{align-items:flex-start;flex-direction:column}
  .gray9-reference{align-self:flex-end}
  .gray9-workspace{grid-template-columns:1fr}
  .gray9-tools{grid-template-columns:repeat(3,1fr)}
  .gray9-tool{min-height:88px}
}
@media(max-width:520px){
  .gray9-level-bar{align-items:flex-start;flex-direction:column}
  .gray9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .gray9-tool{padding:9px 5px;min-height:80px}
  .gray9-tool-swatch,.gray9-tool-icon{width:38px;height:38px}
  .gray9-controls{flex-direction:column}.gray9-controls>*{width:100%}
}


/* Gray Activity 10 — Sticker Page / Course Reward */
.gray10-shell{max-width:1120px}
.gray10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.gray10-progress-card h2{margin:.15rem 0 13px}
.gray10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.gray10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#8a929b);
  border-radius:inherit;transition:width .22s ease
}

.gray10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.gray10-tray-card,.gray10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.gray10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.gray10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.gray10-sticker:hover,.gray10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.gray10-sticker img{width:100%;height:95px;object-fit:contain}
.gray10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.gray10-sticker.selected{
  border-color:#8a929b;background:#f7f1ff;box-shadow:0 0 0 5px rgba(138,146,155,.10)
}
.gray10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.gray10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.gray10-tray-card>.activity-feedback{margin-top:15px}

.gray10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.gray10-board-heading h2{margin:.2rem 0 0}
.gray10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.gray10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.gray10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.gray10-slot:hover,.gray10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.gray10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.gray10-slot img{width:100%;height:100%;object-fit:contain;animation:gray10Pop .38s ease}
.gray10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes gray10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.gray10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.gray10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.gray10-certificate[hidden]{display:none}
.gray10-certificate:before,.gray10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(138,146,155,.08)
}
.gray10-certificate:before{left:-45px;top:-45px}
.gray10-certificate:after{right:-45px;bottom:-45px}
.gray10-ribbon{
  display:inline-block;background:#8a929b;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.gray10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.gray10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.gray10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.gray10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.gray10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .gray10-layout{grid-template-columns:1fr}
  .gray10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .gray10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gray10-tray-controls{flex-direction:column}.gray10-tray-controls>*{width:100%}
  .gray10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gray10-board-heading{align-items:flex-start;flex-direction:column}
  .gray10-selected-pill{align-self:stretch}
  .gray10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-gray *{visibility:hidden!important}
  #gray10-certificate,#gray10-certificate *{visibility:visible!important}
  #gray10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .gray10-certificate-actions{display:none!important}
}

/* Gray mix helpers */
.gray6-rule .yellow,.gray6-answer-swatch.yellow{background:#ffd642}
.gray6-rule .gray,.gray6-answer-swatch.gray{background:#8a929b}
.gray6-rule .gray,.gray6-answer-swatch.gray{background:#8a929b}
.gray6-answer-swatch.orange{background:#ff8626}
.gray6-answer-swatch.gray{background:#8a929b}
.gray6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Gray Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-gray{background:#8a929b}
.g1-gray{background:#8a929b}

/* Gray mix helpers */
.gray6-rule .yellow,.gray6-answer-swatch.yellow{background:#ffd642}
.gray6-rule .red,.gray6-answer-swatch.red{background:#ef3340}
.gray6-rule .gray,.gray6-answer-swatch.gray{background:#8a929b}
.gray6-rule .green,.gray6-answer-swatch.green{background:#61c86a}
.gray6-rule .gray,.gray6-answer-swatch.gray{background:#8a929b}
.gray6-answer-swatch.orange{background:#ff8626}
.gray6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-gray{background:#8a929b}
.b1-red{background:#ef3340}
.b1-gray{background:#8a929b}
.b1-yellow{background:#ffd642}

/* Gray activity helpers */
.p1-red{background:#ef3340}.p1-gray{background:#8a929b}.p1-yellow{background:#ffd642}
.gray6-answer-swatch.red{background:#ef3340}.gray6-answer-swatch.blue{background:#4f8ee8}.gray6-answer-swatch.gray{background:#8a929b}.gray6-answer-swatch.white{background:#fff;border:3px solid #ddd}.gray6-answer-swatch.green{background:#61c86a}.gray6-answer-swatch.orange{background:#ff8626}
.gray6-rule .red{background:#ef3340}.gray6-rule .blue{background:#4f8ee8}.gray6-rule .gray{background:#8a929b}.gray6-rule .white{background:#fff;border:3px solid #ddd}
.gray-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}









/* Black course theme */
/* Black course theme */
.theme-black{
  --black:#222222;
  --black-dark:#4f2c90;
  --black-soft:#fff1e5;
}
.theme-black .eyebrow{color:#6232a8}
.black-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#222222;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(34,34,34,.19)
}
.black-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.black-target-word{color:#222222}
.black-primary{
  background:#222222;
  box-shadow:0 7px 0 #4f2c90
}
.black-primary:active{box-shadow:0 4px 0 #4f2c90}
.black-progress-pill{background:#f2eaff;color:#6232a8}
.black-ready{border-color:#b99ae9!important}
.black-swatch{
  background:#222222;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(34,34,34,.20)
}
.black-giant-word{color:#222222;font-size:clamp(2.6rem,9vw,6rem)}
.black-listen{border-color:#b99ae9;color:#6232a8}
.black-object-card:hover,.black-object-card:focus-visible{border-color:#9a77de}
.black-check-red{background:#ef3340}
.black-check-black{background:#222222}
.black-check-black{background:#222222}


/* Black Activity 2 — Find Black */
.black-counter-pill{background:#f2eaff;color:#6232a8}
.black-find-item:hover,.black-find-item:focus-visible{border-color:#9a77de}
.black-find-item.found{
  border-color:#222222;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(34,34,34,.10)
}
.black-find-item.found .find-check{
  background:#222222
}


/* Black Activity 3 — Trace Black */
.black-trace-shell{max-width:1040px}
.black-trace-stage{max-width:720px}
.black-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.black-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.black-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.black-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.black-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.black-trace-frame.complete{border-color:#6fcb8c}
.black-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#222222)
}
.black-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .black-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .black-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .black-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Black Activity 4 — Black Around Us */
.black4-shell{max-width:1040px}
.black4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.black4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.black4-strip-item img{width:100%;height:98px;object-fit:contain}
.black4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.black4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.black4-dots{display:flex;gap:10px}
.black4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black4-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black4-dots span.done{background:#58bf77;border-color:#58bf77}

.black4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.black4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black4-scene-head p{margin:0;color:var(--muted)}

.black4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.black4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.black4-choice:hover,.black4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(34,34,34,.10);outline:none
}
.black4-image{height:170px;display:grid;place-items:center}
.black4-image img{width:100%;height:100%;object-fit:contain}
.black4-choice strong{display:block;margin-top:7px}
.black4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#222222;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.black4-choice.correct{
  border-color:#222222;background:#f5f9ff;box-shadow:0 10px 24px rgba(34,34,34,.12)
}
.black4-choice.correct .black4-check{opacity:1;transform:scale(1)}
.black4-choice.correct img{animation:black4Pop .4s ease}
.black4-choice.quiet{opacity:.55}
.black4-choice.wrong{animation:wrongBounce .35s ease}
.black4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.black4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes black4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .black4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black4-scene-head{align-items:flex-start;flex-direction:column}
  .black4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .black4-progress-card{align-items:flex-start;flex-direction:column}
  .black4-choice{min-height:185px}
  .black4-image{height:125px}
  .black4-next-wrap .primary-button{width:100%}
}


/* Black Activity 5 — Light & Dark Black */
.black5-shell{max-width:1040px}
.black5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.black5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.black5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.black5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.black5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black5-dots{display:flex;gap:9px}
.black5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.black5-dots span.active{background:#222222;border-color:#222222;transform:scale(1.15)}
.black5-dots span.done{background:#58bf77;border-color:#58bf77}

.black5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.black5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.black5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black5-heading p{margin:0;color:var(--muted)}

.black5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.black5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.black5-choice:hover,.black5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(34,34,34,.10);outline:none
}
.black5-choice img{width:100%;height:245px;object-fit:contain}
.black5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.black5-choice.correct{
  border-color:#222222;background:#f5f9ff;box-shadow:0 10px 24px rgba(34,34,34,.12)
}
.black5-choice.quiet{opacity:.58}
.black5-choice.wrong{animation:wrongBounce .35s ease}
.black5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#222222;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.black5-choice.correct .black5-check{opacity:1;transform:scale(1)}
.black5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.black5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .black5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .black5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .black5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black5-level-bar{align-items:flex-start;flex-direction:column}
  .black5-choice-row{grid-template-columns:1fr}
  .black5-choice{min-height:270px}
  .black5-choice img{height:195px}
  .black5-controls{flex-direction:column}
  .black5-controls>*{width:100%}
}


/* Black Activity 6 — Mix Black */
.black6-shell{max-width:1040px}
.black6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.black6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.black6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.black6-rule-paint.red{background:#ef3340}
.black6-rule-paint.black{background:#222222}
.black6-rule-paint.black{background:#222222}
.black6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.black6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black6-dots{display:flex;gap:9px}
.black6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black6-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black6-dots span.done{background:#58bf77;border-color:#58bf77}

.black6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.black6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black6-heading p{margin:0;color:var(--muted)}

.black6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.black6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.black6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.black6-paint-blob,.black6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.black6-paint-blob.red,.black6-paint-choice-swatch.red,.black6-pair-swatches .red{background:#ef3340}
.black6-paint-blob.black,.black6-paint-choice-swatch.black,.black6-pair-swatches .black{background:#222222}
.black6-paint-blob.black,.black6-paint-choice-swatch.black{background:#222222}
.black6-paint-choice-swatch.black{background:#51b85f}
.black6-paint-choice-swatch.black{background:#222222}
.black6-paint-choice-swatch.black,.black6-pair-swatches .black{background:#222222}
.black6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.black6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.black6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.black6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.black6-choice-grid button,.black6-pair-grid button,.black6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.black6-choice-grid button:hover,.black6-pair-grid button:hover,.black6-mixer-paints button:hover,
.black6-choice-grid button:focus-visible,.black6-pair-grid button:focus-visible,.black6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.black6-choice-grid button.correct,.black6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.black6-choice-grid button.wrong,.black6-pair-grid button.wrong,.black6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.black6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.black6-pair-grid button{flex-direction:column;min-height:175px}
.black6-pair-swatches{display:flex;gap:8px}
.black6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.black6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.black6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.black6-mixer-paints button{flex-direction:column;min-height:145px}
.black6-mixer-paints button.selected{border-color:#222222;background:#f5f9ff}
.black6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.black6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.black6-mixer-bowl span.red{height:45%;background:#ef3340}
.black6-mixer-bowl span.black{height:45%;background:#222222}
.black6-mixer-bowl span.mixed-black{height:65%;background:#222222}
.black6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.black6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.black6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.black6-object-grid button:hover,.black6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.black6-object-grid img{width:100%;height:175px;object-fit:contain}
.black6-object-grid strong{display:block;margin-top:6px}
.black6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.black6-object-grid button.wrong{animation:wrongBounce .35s ease}

.black6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.black6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .black6-heading{align-items:flex-start;flex-direction:column}
  .black6-mix-display{grid-template-columns:1fr 38px 1fr}
  .black6-mix-display .black6-symbol:nth-of-type(2){grid-column:1/-1}
  .black6-mix-display .black6-paint-cup:last-child{grid-column:1/-1}
  .black6-pair-grid{grid-template-columns:1fr}
  .black6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .black6-level-bar{align-items:flex-start;flex-direction:column}
  .black6-choice-grid{grid-template-columns:1fr}
  .black6-object-grid{grid-template-columns:1fr}
  .black6-mixer-paints{grid-template-columns:1fr}
  .black6-controls{flex-direction:column}.black6-controls>*{width:100%}
}


/* Black Activity 7 — Odd One Out */
.black7-shell{max-width:1040px}
.black7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black7-dots{display:flex;gap:9px}
.black7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black7-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black7-dots span.done{background:#58bf77;border-color:#58bf77}

.black7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.black7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black7-heading p{margin:0;color:var(--muted)}

.black7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.black7-clue span:last-child{color:var(--muted);font-size:.88rem}
.black7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#222222;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.black7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.black7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.black7-choice:hover,.black7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(34,34,34,.10);outline:none
}
.black7-image{height:170px;display:grid;place-items:center}
.black7-image img{width:100%;height:100%;object-fit:contain}
.black7-choice strong{display:block;font-size:1rem;margin-top:7px}
.black7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.black7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.black7-choice.correct .black7-check{opacity:1;transform:scale(1)}
.black7-choice.correct img{animation:black7Correct .4s ease}
.black7-choice.quiet{opacity:.55}
.black7-choice.black-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(34,34,34,.10)
}
.black7-choice.wrong{animation:wrongBounce .35s ease}
.black7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.black7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes black7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .black7-heading{align-items:flex-start;flex-direction:column}
  .black7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .black7-level-bar{align-items:flex-start;flex-direction:column}
  .black7-choice{min-height:190px}
  .black7-image{height:125px}
  .black7-controls{flex-direction:column}
  .black7-controls>*{width:100%}
}


/* Black Activity 8 — Story / Read-Along */
.black8-shell{max-width:1000px}
.black8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.black8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.black8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.black8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.black8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.black8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.black8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.black8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.black8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.black8-copy p{margin:.4rem 0 18px}
.black8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.black8-black-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(34,34,34,.08)
}
.black8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.black8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#222222);
  border-radius:inherit;transition:width .22s ease
}
.black8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.black8-mini-pages{display:flex;justify-content:center;gap:8px}
.black8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.black8-mini-pages span.active{background:#222222;border-color:#222222;transform:scale(1.17)}
.black8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.black8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.black8-questions[hidden]{display:none}
.black8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.black8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.black8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.black8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.black8-answer-grid button:hover,.black8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black8-answer-grid img{width:100%;height:135px;object-fit:contain}
.black8-answer-grid strong{display:block;margin-top:7px}
.black8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.black8-answer-grid button.quiet{opacity:.52}
.black8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.black8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.black8-question-feedback.good{background:#effcf3;color:#26723e}
.black8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.black8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .black8-book-top{align-items:flex-start;flex-direction:column}
  .black8-page{grid-template-columns:1fr;min-height:auto}
  .black8-art-wrap{height:265px}
  .black8-copy{text-align:center}
  .black8-nav{grid-template-columns:1fr 1fr}
  .black8-mini-pages{grid-column:1/-1;grid-row:1}
  .black8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .black8-art-wrap{height:220px}
  .black8-nav{grid-template-columns:1fr}
  .black8-mini-pages{grid-column:auto;grid-row:auto}
  .black8-nav>*{width:100%}
}


/* Black Activity 9 — Coloring Time */
.black9-shell{max-width:1040px}
.black9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black9-dots{display:flex;gap:10px}
.black9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black9-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black9-dots span.done{background:#58bf77;border-color:#58bf77}

.black9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.black9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black9-heading p{margin:0;color:var(--muted);max-width:650px}
.black9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.black9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.black9-reference img{width:90px;height:90px;object-fit:contain}

.black9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.black9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.black9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#black9-paint-canvas,#black9-lineart{position:absolute;inset:0;width:100%;height:100%}
#black9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#black9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.black9-tools{display:grid;gap:12px}
.black9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.black9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(34,34,34,.10)}
.black9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.black9-tool-swatch.black{background:#222222}
.black9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.black9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.black9-tool strong{font-size:.82rem}

.black9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.black9-progress-row strong{color:#6232a8}
.black9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.black9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#222222);
  border-radius:inherit;transition:width .12s ease
}
.black9-card>.activity-feedback{max-width:850px;margin:0 auto}
.black9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.black9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .black9-heading{align-items:flex-start;flex-direction:column}
  .black9-reference{align-self:flex-end}
  .black9-workspace{grid-template-columns:1fr}
  .black9-tools{grid-template-columns:repeat(3,1fr)}
  .black9-tool{min-height:88px}
}
@media(max-width:520px){
  .black9-level-bar{align-items:flex-start;flex-direction:column}
  .black9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .black9-tool{padding:9px 5px;min-height:80px}
  .black9-tool-swatch,.black9-tool-icon{width:38px;height:38px}
  .black9-controls{flex-direction:column}.black9-controls>*{width:100%}
}


/* Black Activity 10 — Sticker Page / Course Reward */
.black10-shell{max-width:1120px}
.black10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black10-progress-card h2{margin:.15rem 0 13px}
.black10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.black10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#222222);
  border-radius:inherit;transition:width .22s ease
}

.black10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.black10-tray-card,.black10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.black10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.black10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.black10-sticker:hover,.black10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black10-sticker img{width:100%;height:95px;object-fit:contain}
.black10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.black10-sticker.selected{
  border-color:#222222;background:#f7f1ff;box-shadow:0 0 0 5px rgba(34,34,34,.10)
}
.black10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.black10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.black10-tray-card>.activity-feedback{margin-top:15px}

.black10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.black10-board-heading h2{margin:.2rem 0 0}
.black10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.black10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.black10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.black10-slot:hover,.black10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.black10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.black10-slot img{width:100%;height:100%;object-fit:contain;animation:black10Pop .38s ease}
.black10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes black10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.black10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.black10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.black10-certificate[hidden]{display:none}
.black10-certificate:before,.black10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(34,34,34,.08)
}
.black10-certificate:before{left:-45px;top:-45px}
.black10-certificate:after{right:-45px;bottom:-45px}
.black10-ribbon{
  display:inline-block;background:#222222;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.black10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.black10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.black10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.black10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.black10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .black10-layout{grid-template-columns:1fr}
  .black10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .black10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black10-tray-controls{flex-direction:column}.black10-tray-controls>*{width:100%}
  .black10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black10-board-heading{align-items:flex-start;flex-direction:column}
  .black10-selected-pill{align-self:stretch}
  .black10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-black *{visibility:hidden!important}
  #black10-certificate,#black10-certificate *{visibility:visible!important}
  #black10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .black10-certificate-actions{display:none!important}
}

/* Black mix helpers */
.black6-rule .yellow,.black6-answer-swatch.yellow{background:#ffd642}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.orange{background:#ff8626}
.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Black Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-black{background:#222222}
.g1-black{background:#222222}

/* Black mix helpers */
.black6-rule .yellow,.black6-answer-swatch.yellow{background:#ffd642}
.black6-rule .red,.black6-answer-swatch.red{background:#ef3340}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-rule .green,.black6-answer-swatch.green{background:#61c86a}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.orange{background:#ff8626}
.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-black{background:#222222}
.b1-red{background:#ef3340}
.b1-black{background:#222222}
.b1-yellow{background:#ffd642}

/* Black activity helpers */
.p1-red{background:#ef3340}.p1-black{background:#222222}.p1-yellow{background:#ffd642}
.black6-answer-swatch.red{background:#ef3340}.black6-answer-swatch.blue{background:#4f8ee8}.black6-answer-swatch.black{background:#222222}.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}.black6-answer-swatch.green{background:#61c86a}.black6-answer-swatch.orange{background:#ff8626}
.black6-rule .red{background:#ef3340}.black6-rule .blue{background:#4f8ee8}.black6-rule .black{background:#222222}.black6-rule .white{background:#fff;border:3px solid #ddd}
.black-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}











/* White course theme */
/* White course theme */
.theme-white{
  --white:#f7f7f2;
  --white-dark:#4f2c90;
  --white-soft:#fff1e5;
}
.theme-white .eyebrow{color:#6232a8}
.white-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#f7f7f2;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(205,205,196,.19)
}
.white-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.white-target-word{color:#f7f7f2}
.white-primary{
  background:#f7f7f2;
  box-shadow:0 7px 0 #4f2c90
}
.white-primary:active{box-shadow:0 4px 0 #4f2c90}
.white-progress-pill{background:#f2eaff;color:#6232a8}
.white-ready{border-color:#b99ae9!important}
.white-swatch{
  background:#f7f7f2;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(205,205,196,.20)
}
.white-giant-word{color:#f7f7f2;font-size:clamp(2.6rem,9vw,6rem)}
.white-listen{border-color:#b99ae9;color:#6232a8}
.white-object-card:hover,.white-object-card:focus-visible{border-color:#9a77de}
.white-check-red{background:#ef3340}
.white-check-white{background:#f7f7f2}
.white-check-white{background:#f7f7f2}


/* White Activity 2 — Find White */
.white-counter-pill{background:#f2eaff;color:#6232a8}
.white-find-item:hover,.white-find-item:focus-visible{border-color:#9a77de}
.white-find-item.found{
  border-color:#f7f7f2;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(205,205,196,.10)
}
.white-find-item.found .find-check{
  background:#f7f7f2
}


/* White Activity 3 — Trace White */
.white-trace-shell{max-width:1040px}
.white-trace-stage{max-width:720px}
.white-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.white-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.white-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.white-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.white-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.white-trace-frame.complete{border-color:#6fcb8c}
.white-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#f7f7f2)
}
.white-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .white-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .white-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .white-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* White Activity 4 — White Around Us */
.white4-shell{max-width:1040px}
.white4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.white4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.white4-strip-item img{width:100%;height:98px;object-fit:contain}
.white4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.white4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.white4-dots{display:flex;gap:10px}
.white4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.white4-dots span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.16)}
.white4-dots span.done{background:#58bf77;border-color:#58bf77}

.white4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.white4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.white4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.white4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.white4-scene-head p{margin:0;color:var(--muted)}

.white4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.white4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.white4-choice:hover,.white4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(205,205,196,.10);outline:none
}
.white4-image{height:170px;display:grid;place-items:center}
.white4-image img{width:100%;height:100%;object-fit:contain}
.white4-choice strong{display:block;margin-top:7px}
.white4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#f7f7f2;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.white4-choice.correct{
  border-color:#f7f7f2;background:#f5f9ff;box-shadow:0 10px 24px rgba(205,205,196,.12)
}
.white4-choice.correct .white4-check{opacity:1;transform:scale(1)}
.white4-choice.correct img{animation:white4Pop .4s ease}
.white4-choice.quiet{opacity:.55}
.white4-choice.wrong{animation:wrongBounce .35s ease}
.white4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.white4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes white4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .white4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .white4-scene-head{align-items:flex-start;flex-direction:column}
  .white4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .white4-progress-card{align-items:flex-start;flex-direction:column}
  .white4-choice{min-height:185px}
  .white4-image{height:125px}
  .white4-next-wrap .primary-button{width:100%}
}


/* White Activity 5 — Light & Dark White */
.white5-shell{max-width:1040px}
.white5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.white5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.white5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.white5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.white5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.white5-dots{display:flex;gap:9px}
.white5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.white5-dots span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.15)}
.white5-dots span.done{background:#58bf77;border-color:#58bf77}

.white5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.white5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.white5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.white5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.white5-heading p{margin:0;color:var(--muted)}

.white5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.white5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.white5-choice:hover,.white5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(205,205,196,.10);outline:none
}
.white5-choice img{width:100%;height:245px;object-fit:contain}
.white5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.white5-choice.correct{
  border-color:#f7f7f2;background:#f5f9ff;box-shadow:0 10px 24px rgba(205,205,196,.12)
}
.white5-choice.quiet{opacity:.58}
.white5-choice.wrong{animation:wrongBounce .35s ease}
.white5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#f7f7f2;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.white5-choice.correct .white5-check{opacity:1;transform:scale(1)}
.white5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.white5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .white5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .white5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .white5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .white5-level-bar{align-items:flex-start;flex-direction:column}
  .white5-choice-row{grid-template-columns:1fr}
  .white5-choice{min-height:270px}
  .white5-choice img{height:195px}
  .white5-controls{flex-direction:column}
  .white5-controls>*{width:100%}
}


/* White Activity 6 — Mix White */
.white6-shell{max-width:1040px}
.white6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.white6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.white6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.white6-rule-paint.red{background:#ef3340}
.white6-rule-paint.white{background:#f7f7f2}
.white6-rule-paint.white{background:#f7f7f2}
.white6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.white6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.white6-dots{display:flex;gap:9px}
.white6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.white6-dots span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.16)}
.white6-dots span.done{background:#58bf77;border-color:#58bf77}

.white6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.white6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.white6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.white6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.white6-heading p{margin:0;color:var(--muted)}

.white6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.white6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.white6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.white6-paint-blob,.white6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.white6-paint-blob.red,.white6-paint-choice-swatch.red,.white6-pair-swatches .red{background:#ef3340}
.white6-paint-blob.white,.white6-paint-choice-swatch.white,.white6-pair-swatches .white{background:#f7f7f2}
.white6-paint-blob.white,.white6-paint-choice-swatch.white{background:#f7f7f2}
.white6-paint-choice-swatch.white{background:#51b85f}
.white6-paint-choice-swatch.white{background:#f7f7f2}
.white6-paint-choice-swatch.white,.white6-pair-swatches .white{background:#f7f7f2}
.white6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.white6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.white6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.white6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.white6-choice-grid button,.white6-pair-grid button,.white6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.white6-choice-grid button:hover,.white6-pair-grid button:hover,.white6-mixer-paints button:hover,
.white6-choice-grid button:focus-visible,.white6-pair-grid button:focus-visible,.white6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.white6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.white6-choice-grid button.correct,.white6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.white6-choice-grid button.wrong,.white6-pair-grid button.wrong,.white6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.white6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.white6-pair-grid button{flex-direction:column;min-height:175px}
.white6-pair-swatches{display:flex;gap:8px}
.white6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.white6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.white6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.white6-mixer-paints button{flex-direction:column;min-height:145px}
.white6-mixer-paints button.selected{border-color:#f7f7f2;background:#f5f9ff}
.white6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.white6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.white6-mixer-bowl span.red{height:45%;background:#ef3340}
.white6-mixer-bowl span.white{height:45%;background:#f7f7f2}
.white6-mixer-bowl span.mixed-white{height:65%;background:#f7f7f2}
.white6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.white6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.white6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.white6-object-grid button:hover,.white6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.white6-object-grid img{width:100%;height:175px;object-fit:contain}
.white6-object-grid strong{display:block;margin-top:6px}
.white6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.white6-object-grid button.wrong{animation:wrongBounce .35s ease}

.white6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.white6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .white6-heading{align-items:flex-start;flex-direction:column}
  .white6-mix-display{grid-template-columns:1fr 38px 1fr}
  .white6-mix-display .white6-symbol:nth-of-type(2){grid-column:1/-1}
  .white6-mix-display .white6-paint-cup:last-child{grid-column:1/-1}
  .white6-pair-grid{grid-template-columns:1fr}
  .white6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .white6-level-bar{align-items:flex-start;flex-direction:column}
  .white6-choice-grid{grid-template-columns:1fr}
  .white6-object-grid{grid-template-columns:1fr}
  .white6-mixer-paints{grid-template-columns:1fr}
  .white6-controls{flex-direction:column}.white6-controls>*{width:100%}
}


/* White Activity 7 — Odd One Out */
.white7-shell{max-width:1040px}
.white7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.white7-dots{display:flex;gap:9px}
.white7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.white7-dots span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.16)}
.white7-dots span.done{background:#58bf77;border-color:#58bf77}

.white7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.white7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.white7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.white7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.white7-heading p{margin:0;color:var(--muted)}

.white7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.white7-clue span:last-child{color:var(--muted);font-size:.88rem}
.white7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#f7f7f2;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.white7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.white7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.white7-choice:hover,.white7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(205,205,196,.10);outline:none
}
.white7-image{height:170px;display:grid;place-items:center}
.white7-image img{width:100%;height:100%;object-fit:contain}
.white7-choice strong{display:block;font-size:1rem;margin-top:7px}
.white7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.white7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.white7-choice.correct .white7-check{opacity:1;transform:scale(1)}
.white7-choice.correct img{animation:white7Correct .4s ease}
.white7-choice.quiet{opacity:.55}
.white7-choice.white-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(205,205,196,.10)
}
.white7-choice.wrong{animation:wrongBounce .35s ease}
.white7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.white7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes white7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .white7-heading{align-items:flex-start;flex-direction:column}
  .white7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .white7-level-bar{align-items:flex-start;flex-direction:column}
  .white7-choice{min-height:190px}
  .white7-image{height:125px}
  .white7-controls{flex-direction:column}
  .white7-controls>*{width:100%}
}


/* White Activity 8 — Story / Read-Along */
.white8-shell{max-width:1000px}
.white8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.white8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.white8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.white8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.white8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.white8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.white8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.white8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.white8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.white8-copy p{margin:.4rem 0 18px}
.white8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.white8-white-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(205,205,196,.08)
}
.white8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.white8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#f7f7f2);
  border-radius:inherit;transition:width .22s ease
}
.white8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.white8-mini-pages{display:flex;justify-content:center;gap:8px}
.white8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.white8-mini-pages span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.17)}
.white8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.white8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.white8-questions[hidden]{display:none}
.white8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.white8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.white8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.white8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.white8-answer-grid button:hover,.white8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.white8-answer-grid img{width:100%;height:135px;object-fit:contain}
.white8-answer-grid strong{display:block;margin-top:7px}
.white8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.white8-answer-grid button.quiet{opacity:.52}
.white8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.white8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.white8-question-feedback.good{background:#effcf3;color:#26723e}
.white8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.white8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .white8-book-top{align-items:flex-start;flex-direction:column}
  .white8-page{grid-template-columns:1fr;min-height:auto}
  .white8-art-wrap{height:265px}
  .white8-copy{text-align:center}
  .white8-nav{grid-template-columns:1fr 1fr}
  .white8-mini-pages{grid-column:1/-1;grid-row:1}
  .white8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .white8-art-wrap{height:220px}
  .white8-nav{grid-template-columns:1fr}
  .white8-mini-pages{grid-column:auto;grid-row:auto}
  .white8-nav>*{width:100%}
}


/* White Activity 9 — Coloring Time */
.white9-shell{max-width:1040px}
.white9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.white9-dots{display:flex;gap:10px}
.white9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.white9-dots span.active{background:#f7f7f2;border-color:#f7f7f2;transform:scale(1.16)}
.white9-dots span.done{background:#58bf77;border-color:#58bf77}

.white9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.white9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.white9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.white9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.white9-heading p{margin:0;color:var(--muted);max-width:650px}
.white9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.white9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.white9-reference img{width:90px;height:90px;object-fit:contain}

.white9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.white9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.white9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#white9-paint-canvas,#white9-lineart{position:absolute;inset:0;width:100%;height:100%}
#white9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#white9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.white9-tools{display:grid;gap:12px}
.white9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.white9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(205,205,196,.10)}
.white9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.white9-tool-swatch.white{background:#f7f7f2}
.white9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.white9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.white9-tool strong{font-size:.82rem}

.white9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.white9-progress-row strong{color:#6232a8}
.white9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.white9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#f7f7f2);
  border-radius:inherit;transition:width .12s ease
}
.white9-card>.activity-feedback{max-width:850px;margin:0 auto}
.white9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.white9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .white9-heading{align-items:flex-start;flex-direction:column}
  .white9-reference{align-self:flex-end}
  .white9-workspace{grid-template-columns:1fr}
  .white9-tools{grid-template-columns:repeat(3,1fr)}
  .white9-tool{min-height:88px}
}
@media(max-width:520px){
  .white9-level-bar{align-items:flex-start;flex-direction:column}
  .white9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .white9-tool{padding:9px 5px;min-height:80px}
  .white9-tool-swatch,.white9-tool-icon{width:38px;height:38px}
  .white9-controls{flex-direction:column}.white9-controls>*{width:100%}
}


/* White Activity 10 — Sticker Page / Course Reward */
.white10-shell{max-width:1120px}
.white10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.white10-progress-card h2{margin:.15rem 0 13px}
.white10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.white10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#f7f7f2);
  border-radius:inherit;transition:width .22s ease
}

.white10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.white10-tray-card,.white10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.white10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.white10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.white10-sticker:hover,.white10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.white10-sticker img{width:100%;height:95px;object-fit:contain}
.white10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.white10-sticker.selected{
  border-color:#f7f7f2;background:#f7f1ff;box-shadow:0 0 0 5px rgba(205,205,196,.10)
}
.white10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.white10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.white10-tray-card>.activity-feedback{margin-top:15px}

.white10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.white10-board-heading h2{margin:.2rem 0 0}
.white10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.white10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.white10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.white10-slot:hover,.white10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.white10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.white10-slot img{width:100%;height:100%;object-fit:contain;animation:white10Pop .38s ease}
.white10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes white10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.white10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.white10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.white10-certificate[hidden]{display:none}
.white10-certificate:before,.white10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(205,205,196,.08)
}
.white10-certificate:before{left:-45px;top:-45px}
.white10-certificate:after{right:-45px;bottom:-45px}
.white10-ribbon{
  display:inline-block;background:#f7f7f2;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.white10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.white10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.white10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.white10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.white10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .white10-layout{grid-template-columns:1fr}
  .white10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .white10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .white10-tray-controls{flex-direction:column}.white10-tray-controls>*{width:100%}
  .white10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .white10-board-heading{align-items:flex-start;flex-direction:column}
  .white10-selected-pill{align-self:stretch}
  .white10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-white *{visibility:hidden!important}
  #white10-certificate,#white10-certificate *{visibility:visible!important}
  #white10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .white10-certificate-actions{display:none!important}
}

/* White mix helpers */
.white6-rule .yellow,.white6-answer-swatch.yellow{background:#ffd642}
.white6-rule .white,.white6-answer-swatch.white{background:#f7f7f2}
.white6-rule .white,.white6-answer-swatch.white{background:#f7f7f2}
.white6-answer-swatch.orange{background:#ff8626}
.white6-answer-swatch.white{background:#f7f7f2}
.white6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* White Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-white{background:#f7f7f2}
.g1-white{background:#f7f7f2}

/* White mix helpers */
.white6-rule .yellow,.white6-answer-swatch.yellow{background:#ffd642}
.white6-rule .red,.white6-answer-swatch.red{background:#ef3340}
.white6-rule .white,.white6-answer-swatch.white{background:#f7f7f2}
.white6-rule .green,.white6-answer-swatch.green{background:#61c86a}
.white6-rule .white,.white6-answer-swatch.white{background:#f7f7f2}
.white6-answer-swatch.orange{background:#ff8626}
.white6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-white{background:#f7f7f2}
.b1-red{background:#ef3340}
.b1-white{background:#f7f7f2}
.b1-yellow{background:#ffd642}

/* White activity helpers */
.p1-red{background:#ef3340}.p1-white{background:#f7f7f2}.p1-yellow{background:#ffd642}
.white6-answer-swatch.red{background:#ef3340}.white6-answer-swatch.blue{background:#4f8ee8}.white6-answer-swatch.white{background:#f7f7f2}.white6-answer-swatch.white{background:#fff;border:3px solid #ddd}.white6-answer-swatch.green{background:#61c86a}.white6-answer-swatch.orange{background:#ff8626}
.white6-rule .red{background:#ef3340}.white6-rule .blue{background:#4f8ee8}.white6-rule .white{background:#f7f7f2}.white6-rule .white{background:#fff;border:3px solid #ddd}
.white-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}









/* Black course theme */
/* Black course theme */
.theme-black{
  --black:#222222;
  --black-dark:#4f2c90;
  --black-soft:#fff1e5;
}
.theme-black .eyebrow{color:#6232a8}
.black-brand-dot{
  width:46px;height:46px;border-radius:15px;background:#222222;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 7px 17px rgba(34,34,34,.19)
}
.black-course-hero{
  background:linear-gradient(135deg,#fff,#fff6ec);
  border-color:#f4e1d0
}
.black-target-word{color:#222222}
.black-primary{
  background:#222222;
  box-shadow:0 7px 0 #4f2c90
}
.black-primary:active{box-shadow:0 4px 0 #4f2c90}
.black-progress-pill{background:#f2eaff;color:#6232a8}
.black-ready{border-color:#b99ae9!important}
.black-swatch{
  background:#222222;
  box-shadow:inset 0 -17px 0 rgba(0,0,0,.08),0 14px 28px rgba(34,34,34,.20)
}
.black-giant-word{color:#222222;font-size:clamp(2.6rem,9vw,6rem)}
.black-listen{border-color:#b99ae9;color:#6232a8}
.black-object-card:hover,.black-object-card:focus-visible{border-color:#9a77de}
.black-check-red{background:#ef3340}
.black-check-black{background:#222222}
.black-check-black{background:#222222}


/* Black Activity 2 — Find Black */
.black-counter-pill{background:#f2eaff;color:#6232a8}
.black-find-item:hover,.black-find-item:focus-visible{border-color:#9a77de}
.black-find-item.found{
  border-color:#222222;
  background:#f5f9ff;
  box-shadow:0 8px 20px rgba(34,34,34,.10)
}
.black-find-item.found .find-check{
  background:#222222
}


/* Black Activity 3 — Trace Black */
.black-trace-shell{max-width:1040px}
.black-trace-stage{max-width:720px}
.black-trace-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  max-width:590px;
  margin:0 auto 18px
}
.black-trace-tab{
  width:auto;
  min-width:0;
  height:58px;
  border-radius:18px
}
.black-trace-tab.active{
  border-color:#9a77de;
  background:#f7f1ff;
  color:#6232a8
}
.black-trace-tab.done{
  border-color:#71cc8d;
  background:#e8f8ed;
  color:#26723e
}
.black-trace-frame{
  border-color:#c8b1f3;
  background:#fffdf4
}
.black-trace-frame.complete{border-color:#6fcb8c}
.black-trace-progress span{
  background:linear-gradient(90deg,#d9c7f7,#222222)
}
.black-trace-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@media(max-width:560px){
  .black-trace-tabs{grid-template-columns:repeat(6,1fr);gap:5px}
  .black-trace-tab{height:48px;border-radius:14px;font-size:1.15rem}
  .black-trace-art{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Black Activity 4 — Black Around Us */
.black4-shell{max-width:1040px}
.black4-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px
}
.black4-strip-item{
  min-height:145px;border-radius:24px;background:#fff;border:1px solid #f1e3d5;
  box-shadow:0 7px 20px rgba(120,70,30,.06);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.black4-strip-item img{width:100%;height:98px;object-fit:contain}
.black4-strip-item span{margin-top:6px;font-size:.82rem;font-weight:1000;color:var(--muted)}

.black4-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black4-progress-card h2{margin:.15rem 0 0;font-size:1.8rem}
.black4-dots{display:flex;gap:10px}
.black4-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black4-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black4-dots span.done{background:#58bf77;border-color:#58bf77}

.black4-scene-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black4-scene-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.black4-place{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black4-scene-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black4-scene-head p{margin:0;color:var(--muted)}

.black4-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.black4-choice{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:12px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s opacity,.18s box-shadow
}
.black4-choice:hover,.black4-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(34,34,34,.10);outline:none
}
.black4-image{height:170px;display:grid;place-items:center}
.black4-image img{width:100%;height:100%;object-fit:contain}
.black4-choice strong{display:block;margin-top:7px}
.black4-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#222222;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.black4-choice.correct{
  border-color:#222222;background:#f5f9ff;box-shadow:0 10px 24px rgba(34,34,34,.12)
}
.black4-choice.correct .black4-check{opacity:1;transform:scale(1)}
.black4-choice.correct img{animation:black4Pop .4s ease}
.black4-choice.quiet{opacity:.55}
.black4-choice.wrong{animation:wrongBounce .35s ease}
.black4-next-wrap{display:flex;justify-content:flex-end;margin-top:17px}
.black4-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}
@keyframes black4Pop{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .black4-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black4-scene-head{align-items:flex-start;flex-direction:column}
  .black4-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .black4-progress-card{align-items:flex-start;flex-direction:column}
  .black4-choice{min-height:185px}
  .black4-image{height:125px}
  .black4-next-wrap .primary-button{width:100%}
}


/* Black Activity 5 — Light & Dark Black */
.black5-shell{max-width:1040px}
.black5-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 22px
}
.black5-strip-item{
  min-height:135px;border:1px solid #f0e2d5;border-radius:22px;background:#fff;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 7px 18px rgba(120,70,30,.05)
}
.black5-strip-item img{height:88px;max-width:100%;object-fit:contain}
.black5-strip-item span{font-size:.8rem;font-weight:1000;color:var(--muted);margin-top:5px}

.black5-level-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black5-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black5-dots{display:flex;gap:9px}
.black5-dots span{width:18px;height:18px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.black5-dots span.active{background:#222222;border-color:#222222;transform:scale(1.15)}
.black5-dots span.done{background:#58bf77;border-color:#58bf77}

.black5-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black5-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px
}
.black5-level-name{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:1000;color:#6232a8
}
.black5-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black5-heading p{margin:0;color:var(--muted)}

.black5-choice-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
.black5-choice{
  position:relative;min-height:325px;border:3px solid #eee4ef;border-radius:28px;
  background:#fffdf4;padding:17px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity,.17s box-shadow
}
.black5-choice:hover,.black5-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 26px rgba(34,34,34,.10);outline:none
}
.black5-choice img{width:100%;height:245px;object-fit:contain}
.black5-choice strong{display:block;margin-top:7px;font-size:1.08rem}
.black5-choice.correct{
  border-color:#222222;background:#f5f9ff;box-shadow:0 10px 24px rgba(34,34,34,.12)
}
.black5-choice.quiet{opacity:.58}
.black5-choice.wrong{animation:wrongBounce .35s ease}
.black5-check{
  position:absolute;right:12px;top:12px;width:39px;height:39px;border-radius:50%;
  background:#222222;color:#fff;display:grid;place-items:center;font-weight:1000;
  opacity:0;transform:scale(.5);transition:.18s ease
}
.black5-choice.correct .black5-check{opacity:1;transform:scale(1)}
.black5-controls{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.black5-celebration{
  background:linear-gradient(135deg,#f8f4ff,#ebddff);
  border-color:#b99ae9
}

@media(max-width:820px){
  .black5-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .black5-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .black5-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black5-level-bar{align-items:flex-start;flex-direction:column}
  .black5-choice-row{grid-template-columns:1fr}
  .black5-choice{min-height:270px}
  .black5-choice img{height:195px}
  .black5-controls{flex-direction:column}
  .black5-controls>*{width:100%}
}


/* Black Activity 6 — Mix Black */
.black6-shell{max-width:1040px}
.black6-rule-card{
  display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;
  background:#fff;border:2px solid #c8b1f3;border-radius:28px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(120,70,30,.07);margin:18px 0 22px
}
.black6-rule-card strong{width:100%;text-align:center;color:#6232a8;font-size:1.15rem}
.black6-rule-paint{
  width:70px;height:70px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.08)
}
.black6-rule-paint.red{background:#ef3340}
.black6-rule-paint.black{background:#222222}
.black6-rule-paint.black{background:#222222}
.black6-rule-symbol{font-size:2rem;font-weight:1000;color:#887b90}

.black6-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black6-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black6-dots{display:flex;gap:9px}
.black6-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black6-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black6-dots span.done{background:#58bf77;border-color:#58bf77}

.black6-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black6-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px
}
.black6-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black6-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black6-heading p{margin:0;color:var(--muted)}

.black6-mix-display{
  display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:12px;align-items:center;
  max-width:850px;margin:0 auto 24px
}
.black6-paint-cup{
  min-height:190px;border-radius:28px;background:#fffdf4;border:2px solid #f0e2d5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px
}
.black6-paint-cup.mystery{background:repeating-linear-gradient(45deg,#f5f0f6 0 12px,#fff 12px 24px)}
.black6-paint-blob,.black6-paint-choice-swatch{
  width:105px;height:105px;border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 7px 18px rgba(40,30,60,.08)
}
.black6-paint-blob.red,.black6-paint-choice-swatch.red,.black6-pair-swatches .red{background:#ef3340}
.black6-paint-blob.black,.black6-paint-choice-swatch.black,.black6-pair-swatches .black{background:#222222}
.black6-paint-blob.black,.black6-paint-choice-swatch.black{background:#222222}
.black6-paint-choice-swatch.black{background:#51b85f}
.black6-paint-choice-swatch.black{background:#222222}
.black6-paint-choice-swatch.black,.black6-pair-swatches .black{background:#222222}
.black6-paint-choice-swatch.white{background:#fff;border:3px solid #dedee4}
.black6-symbol{text-align:center;font-size:2.5rem;font-weight:1000;color:#887b90}
.black6-question-mark{font-size:3.3rem;font-weight:1000;color:#988b9e}

.black6-choice-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 auto
}
.black6-choice-grid button,.black6-pair-grid button,.black6-mixer-paints button{
  border:2px solid #eee4ef;border-radius:22px;background:#fff;padding:15px;cursor:pointer;
  min-height:115px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s transform,.16s border-color,.16s background
}
.black6-choice-grid button:hover,.black6-pair-grid button:hover,.black6-mixer-paints button:hover,
.black6-choice-grid button:focus-visible,.black6-pair-grid button:focus-visible,.black6-mixer-paints button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black6-paint-choice-swatch{width:55px;height:55px;border-radius:50%}
.black6-choice-grid button.correct,.black6-pair-grid button.correct{
  border-color:#6dcc8a;background:#effcf3
}
.black6-choice-grid button.wrong,.black6-pair-grid button.wrong,.black6-mixer-paints button.wrong{
  animation:wrongBounce .35s ease
}

.black6-pair-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:820px;margin:0 auto 8px
}
.black6-pair-grid button{flex-direction:column;min-height:175px}
.black6-pair-swatches{display:flex;gap:8px}
.black6-pair-swatches span{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.07)}

.black6-mixer-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:25px;align-items:center;max-width:820px;margin:0 auto 10px
}
.black6-mixer-paints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.black6-mixer-paints button{flex-direction:column;min-height:145px}
.black6-mixer-paints button.selected{border-color:#222222;background:#f5f9ff}
.black6-mixer-bowl{
  height:245px;border-radius:35px 35px 90px 90px;background:#f8f3f9;border:4px solid #d9cfdf;
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:18px
}
.black6-mixer-bowl span{
  position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:.35s ease
}
.black6-mixer-bowl span.red{height:45%;background:#ef3340}
.black6-mixer-bowl span.black{height:45%;background:#222222}
.black6-mixer-bowl span.mixed-black{height:65%;background:#222222}
.black6-mixer-bowl strong{position:relative;z-index:2;background:#fff;border-radius:99px;padding:8px 12px}

.black6-object-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:800px;margin:0 auto 8px
}
.black6-object-grid button{
  position:relative;min-height:230px;border:3px solid #eee4ef;border-radius:26px;background:#fffdf4;
  padding:12px;cursor:pointer;transition:.17s transform,.17s border-color,.17s opacity
}
.black6-object-grid button:hover,.black6-object-grid button:focus-visible{transform:translateY(-3px);border-color:#9a77de;outline:none}
.black6-object-grid img{width:100%;height:175px;object-fit:contain}
.black6-object-grid strong{display:block;margin-top:6px}
.black6-object-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.black6-object-grid button.wrong{animation:wrongBounce .35s ease}

.black6-controls{display:flex;justify-content:space-between;gap:14px;margin-top:18px}
.black6-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:820px){
  .black6-heading{align-items:flex-start;flex-direction:column}
  .black6-mix-display{grid-template-columns:1fr 38px 1fr}
  .black6-mix-display .black6-symbol:nth-of-type(2){grid-column:1/-1}
  .black6-mix-display .black6-paint-cup:last-child{grid-column:1/-1}
  .black6-pair-grid{grid-template-columns:1fr}
  .black6-mixer-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .black6-level-bar{align-items:flex-start;flex-direction:column}
  .black6-choice-grid{grid-template-columns:1fr}
  .black6-object-grid{grid-template-columns:1fr}
  .black6-mixer-paints{grid-template-columns:1fr}
  .black6-controls{flex-direction:column}.black6-controls>*{width:100%}
}


/* Black Activity 7 — Odd One Out */
.black7-shell{max-width:1040px}
.black7-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black7-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black7-dots{display:flex;gap:9px}
.black7-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black7-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black7-dots span.done{background:#58bf77;border-color:#58bf77}

.black7-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black7-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px
}
.black7-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black7-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black7-heading p{margin:0;color:var(--muted)}

.black7-clue{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #b99ae9;border-radius:18px;padding:11px 14px;margin-bottom:19px
}
.black7-clue span:last-child{color:var(--muted);font-size:.88rem}
.black7-clue-swatch{
  width:32px;height:32px;border-radius:50%;background:#222222;
  box-shadow:0 0 0 4px #fff,0 0 0 5px #ffd0aa
}

.black7-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.black7-choice{
  position:relative;min-height:235px;border:3px solid #eee4ef;border-radius:27px;
  background:linear-gradient(180deg,#fff,#fffdf4);padding:13px;cursor:pointer;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.black7-choice:hover,.black7-choice:focus-visible{
  transform:translateY(-4px);border-color:#9a77de;box-shadow:0 12px 25px rgba(34,34,34,.10);outline:none
}
.black7-image{height:170px;display:grid;place-items:center}
.black7-image img{width:100%;height:100%;object-fit:contain}
.black7-choice strong{display:block;font-size:1rem;margin-top:7px}
.black7-check{
  position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;
  background:#2fb65f;color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:1000;
  opacity:0;transform:scale(.4);transition:.18s ease
}
.black7-choice.correct{
  border-color:#6dcc8a;background:#effcf3;box-shadow:0 10px 24px rgba(47,182,95,.12)
}
.black7-choice.correct .black7-check{opacity:1;transform:scale(1)}
.black7-choice.correct img{animation:black7Correct .4s ease}
.black7-choice.quiet{opacity:.55}
.black7-choice.black-clue:not(.correct){
  border-color:#ffad6f;
  box-shadow:0 0 0 5px rgba(34,34,34,.10)
}
.black7-choice.wrong{animation:wrongBounce .35s ease}
.black7-controls{display:flex;justify-content:space-between;gap:14px;margin-top:17px}
.black7-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}
@keyframes black7Correct{50%{transform:scale(1.08)}}

@media(max-width:820px){
  .black7-heading{align-items:flex-start;flex-direction:column}
  .black7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .black7-level-bar{align-items:flex-start;flex-direction:column}
  .black7-choice{min-height:190px}
  .black7-image{height:125px}
  .black7-controls{flex-direction:column}
  .black7-controls>*{width:100%}
}


/* Black Activity 8 — Story / Read-Along */
.black8-shell{max-width:1000px}
.black8-intro-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.black8-book{
  background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:clamp(20px,4vw,36px);box-shadow:0 12px 30px rgba(77,49,106,.09);margin-bottom:24px
}
.black8-book-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.black8-book-top h2{margin:.2rem 0 0;font-size:clamp(1.65rem,4vw,2.5rem)}
.black8-page-pill{
  white-space:nowrap;background:#f2eaff;color:#6232a8;
  border-radius:99px;padding:10px 15px;font-weight:900
}
.black8-page{
  display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:clamp(22px,5vw,52px);
  align-items:center;min-height:430px;background:linear-gradient(135deg,#fffdf4,#fff);
  border:2px solid #f1e2d5;border-radius:30px;padding:clamp(18px,4vw,34px)
}
.black8-art-wrap{
  height:340px;border-radius:28px;background:#fff;display:grid;place-items:center;
  padding:10px;box-shadow:inset 0 0 0 1px #f1e4d8
}
.black8-art-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.black8-copy{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;font-weight:850}
.black8-copy p{margin:.4rem 0 18px}
.black8-page-label{
  display:inline-block;border-radius:99px;padding:7px 11px;background:#f2eaff;
  color:#6232a8;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em
}
.black8-black-word{
  color:#4f2c90;background:#f2eaff;border-radius:10px;padding:0 .18em;
  box-shadow:inset 0 -4px 0 rgba(34,34,34,.08)
}
.black8-progress{height:13px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:18px 0 16px}
.black8-progress span{
  display:block;width:16.666%;height:100%;background:linear-gradient(90deg,#ffc792,#222222);
  border-radius:inherit;transition:width .22s ease
}
.black8-nav{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.black8-mini-pages{display:flex;justify-content:center;gap:8px}
.black8-mini-pages span{width:15px;height:15px;border-radius:50%;background:#eae2ee;border:2px solid #dcd0e2}
.black8-mini-pages span.active{background:#222222;border-color:#222222;transform:scale(1.17)}
.black8-mini-pages span.done{background:#58bf77;border-color:#58bf77}

.black8-questions{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08);margin-bottom:24px
}
.black8-questions[hidden]{display:none}
.black8-question-card{
  border:2px solid #eee4ef;border-radius:27px;padding:20px;margin-top:18px;background:#fffdf4
}
.black8-question-card h3{font-size:1.25rem;margin:0 0 16px}
.black8-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.black8-answer-grid button{
  min-height:190px;border:2px solid #eee4ef;border-radius:23px;background:#fff;padding:12px;
  cursor:pointer;position:relative;transition:.16s transform,.16s border-color,.16s opacity
}
.black8-answer-grid button:hover,.black8-answer-grid button:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black8-answer-grid img{width:100%;height:135px;object-fit:contain}
.black8-answer-grid strong{display:block;margin-top:7px}
.black8-answer-grid button.correct{border-color:#6dcc8a;background:#effcf3}
.black8-answer-grid button.quiet{opacity:.52}
.black8-answer-grid button.wrong{animation:wrongBounce .35s ease}
.black8-question-feedback{
  min-height:48px;margin-top:13px;border-radius:16px;background:#f3eff5;padding:11px 14px;
  display:grid;place-items:center;text-align:center;font-weight:900
}
.black8-question-feedback.good{background:#effcf3;color:#26723e}
.black8-question-feedback.try{background:#f7f1ff;color:#9b4b12}
.black8-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .black8-book-top{align-items:flex-start;flex-direction:column}
  .black8-page{grid-template-columns:1fr;min-height:auto}
  .black8-art-wrap{height:265px}
  .black8-copy{text-align:center}
  .black8-nav{grid-template-columns:1fr 1fr}
  .black8-mini-pages{grid-column:1/-1;grid-row:1}
  .black8-answer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .black8-art-wrap{height:220px}
  .black8-nav{grid-template-columns:1fr}
  .black8-mini-pages{grid-column:auto;grid-row:auto}
  .black8-nav>*{width:100%}
}


/* Black Activity 9 — Coloring Time */
.black9-shell{max-width:1040px}
.black9-level-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black9-level-bar h2{margin:.15rem 0 0;font-size:1.8rem}
.black9-dots{display:flex;gap:10px}
.black9-dots span{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}
.black9-dots span.active{background:#222222;border-color:#222222;transform:scale(1.16)}
.black9-dots span.done{background:#58bf77;border-color:#58bf77}

.black9-card{
  background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(20px,4vw,34px);
  box-shadow:0 10px 28px rgba(77,49,106,.08)
}
.black9-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px
}
.black9-level-name{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:#6232a8;font-weight:1000
}
.black9-heading h2{margin:.15rem 0 .35rem;font-size:clamp(1.7rem,4vw,2.55rem)}
.black9-heading p{margin:0;color:var(--muted);max-width:650px}
.black9-reference{
  width:115px;flex:0 0 115px;text-align:center;background:#f5f9ff;border:1px solid #b99ae9;
  border-radius:22px;padding:9px
}
.black9-reference span{display:block;font-size:.68rem;font-weight:1000;color:#6232a8;margin-bottom:5px}
.black9-reference img{width:90px;height:90px;object-fit:contain}

.black9-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start;
  max-width:850px;margin:0 auto
}
.black9-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1;background:#fff;border:3px dashed #ecd8c8;
  border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 8px #fffdf4;touch-action:none;
  transition:.2s border-color,.2s box-shadow
}
.black9-canvas-wrap.complete{
  border-color:#6dcc8a;box-shadow:inset 0 0 0 8px #f3fff6,0 8px 24px rgba(47,182,95,.11)
}
#black9-paint-canvas,#black9-lineart{position:absolute;inset:0;width:100%;height:100%}
#black9-paint-canvas{z-index:1;touch-action:none;cursor:crosshair}
#black9-lineart{z-index:2;object-fit:contain;pointer-events:none}

.black9-tools{display:grid;gap:12px}
.black9-tool{
  border:2px solid #eee4ef;border-radius:20px;background:#fff;padding:13px 10px;
  min-height:100px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center
}
.black9-tool.active{border-color:#9a77de;background:#f7f1ff;box-shadow:0 7px 18px rgba(34,34,34,.10)}
.black9-tool-swatch{
  width:50px;height:50px;border-radius:50%;display:block;box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dce7
}
.black9-tool-swatch.black{background:#222222}
.black9-tool-swatch.eraser{
  border-radius:13px;background:linear-gradient(135deg,#f7a7bd 0 48%,#edf0f5 48% 100%);
  transform:rotate(-8deg)
}
.black9-tool-icon{
  width:50px;height:50px;border-radius:15px;background:#f3eff5;display:grid;place-items:center;
  font-size:2rem;font-weight:1000;color:#6e6476
}
.black9-tool strong{font-size:.82rem}

.black9-progress-row{
  display:flex;justify-content:space-between;gap:16px;max-width:850px;margin:17px auto 7px;
  font-weight:900;color:var(--muted)
}
.black9-progress-row strong{color:#6232a8}
.black9-progress-track{
  max-width:850px;height:14px;background:#eee6f0;border-radius:99px;overflow:hidden;margin:0 auto 16px
}
.black9-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#222222);
  border-radius:inherit;transition:width .12s ease
}
.black9-card>.activity-feedback{max-width:850px;margin:0 auto}
.black9-controls{
  max-width:850px;margin:16px auto 0;display:flex;justify-content:space-between;gap:14px
}
.black9-celebration{background:linear-gradient(135deg,#f8f4ff,#ebddff);border-color:#b99ae9}

@media(max-width:760px){
  .black9-heading{align-items:flex-start;flex-direction:column}
  .black9-reference{align-self:flex-end}
  .black9-workspace{grid-template-columns:1fr}
  .black9-tools{grid-template-columns:repeat(3,1fr)}
  .black9-tool{min-height:88px}
}
@media(max-width:520px){
  .black9-level-bar{align-items:flex-start;flex-direction:column}
  .black9-tools{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .black9-tool{padding:9px 5px;min-height:80px}
  .black9-tool-swatch,.black9-tool-icon{width:38px;height:38px}
  .black9-controls{flex-direction:column}.black9-controls>*{width:100%}
}


/* Black Activity 10 — Sticker Page / Course Reward */
.black10-shell{max-width:1120px}
.black10-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(77,49,106,.06);margin-bottom:22px
}
.black10-progress-card h2{margin:.15rem 0 13px}
.black10-progress-track{height:15px;background:#eee6f0;border-radius:99px;overflow:hidden}
.black10-progress-track span{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#d9c7f7,#222222);
  border-radius:inherit;transition:width .22s ease
}

.black10-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start
}
.black10-tray-card,.black10-board-card{
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,28px);
  box-shadow:0 9px 25px rgba(77,49,106,.07)
}
.black10-tray{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px
}
.black10-sticker{
  position:relative;min-height:145px;border:2px solid #eee4ef;border-radius:22px;background:#fffdf4;
  padding:9px;cursor:pointer;transition:.16s transform,.16s border-color,.16s opacity,.16s box-shadow
}
.black10-sticker:hover,.black10-sticker:focus-visible{
  transform:translateY(-3px);border-color:#9a77de;outline:none
}
.black10-sticker img{width:100%;height:95px;object-fit:contain}
.black10-sticker strong{display:block;font-size:.78rem;margin-top:5px}
.black10-sticker.selected{
  border-color:#222222;background:#f7f1ff;box-shadow:0 0 0 5px rgba(34,34,34,.10)
}
.black10-sticker.used{opacity:.28;cursor:not-allowed;transform:none}
.black10-tray-controls{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.black10-tray-card>.activity-feedback{margin-top:15px}

.black10-board-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:17px
}
.black10-board-heading h2{margin:.2rem 0 0}
.black10-selected-pill{
  border-radius:99px;background:#f2eaff;color:#6232a8;padding:8px 11px;
  font-size:.72rem;font-weight:1000;text-align:center
}
.black10-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.black10-slot{
  aspect-ratio:1;border:3px dashed #ead8ca;border-radius:28px;background:#fffdf4;cursor:pointer;
  display:grid;place-items:center;padding:12px;overflow:hidden;transition:.16s transform,.16s border-color,.16s background
}
.black10-slot:hover,.black10-slot:focus-visible{
  transform:scale(1.02);border-color:#9a77de;outline:none;background:#f5f9ff
}
.black10-slot span{
  width:52px;height:52px;border-radius:50%;background:#f2eaff;color:#6232a8;
  display:grid;place-items:center;font-size:1.25rem;font-weight:1000
}
.black10-slot img{width:100%;height:100%;object-fit:contain;animation:black10Pop .38s ease}
.black10-slot.filled{
  border-style:solid;border-color:#b99ae9;background:#f5f9ff;cursor:default
}
@keyframes black10Pop{
  0%{transform:scale(.25) rotate(-12deg)}
  70%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.black10-tip{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}

.black10-certificate{
  position:relative;margin:28px 0;padding:clamp(28px,6vw,56px);text-align:center;
  border-radius:36px;background:linear-gradient(135deg,#fff8d9,#fff,#fff1e5);
  border:4px solid #ffb052;box-shadow:0 15px 36px rgba(102,70,40,.12);overflow:hidden
}
.black10-certificate[hidden]{display:none}
.black10-certificate:before,.black10-certificate:after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;background:rgba(34,34,34,.08)
}
.black10-certificate:before{left:-45px;top:-45px}
.black10-certificate:after{right:-45px;bottom:-45px}
.black10-ribbon{
  display:inline-block;background:#222222;color:#fff;border-radius:99px;padding:10px 18px;
  font-size:.8rem;font-weight:1000;letter-spacing:.11em;box-shadow:0 7px 0 #4f2c90;margin-bottom:20px
}
.black10-certificate-art{
  display:flex;justify-content:center;align-items:center;gap:14px;margin:0 auto 18px
}
.black10-certificate-art img{
  width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;
  box-shadow:0 6px 18px rgba(80,50,90,.08)
}
.black10-certificate h2{
  margin:.35rem 0 .65rem;font-size:clamp(2rem,5vw,3.5rem);color:#6232a8
}
.black10-certificate p{
  max-width:670px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.6
}
.black10-certificate-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px
}

@media(max-width:900px){
  .black10-layout{grid-template-columns:1fr}
  .black10-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .black10-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black10-tray-controls{flex-direction:column}.black10-tray-controls>*{width:100%}
  .black10-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .black10-board-heading{align-items:flex-start;flex-direction:column}
  .black10-selected-pill{align-self:stretch}
  .black10-certificate-art img{width:70px;height:70px}
}

@media print{
  body.theme-black *{visibility:hidden!important}
  #black10-certificate,#black10-certificate *{visibility:visible!important}
  #black10-certificate{
    display:block!important;position:absolute;left:0;top:0;width:100%;margin:0;
    border:3px solid #000;box-shadow:none;background:#fff
  }
  .black10-certificate-actions{display:none!important}
}

/* Black mix helpers */
.black6-rule .yellow,.black6-answer-swatch.yellow{background:#ffd642}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.orange{background:#ff8626}
.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}

/* Black Activity 1 swatches */
.g1-red{background:#ef3340}
.g1-black{background:#222222}
.g1-black{background:#222222}

/* Black mix helpers */
.black6-rule .yellow,.black6-answer-swatch.yellow{background:#ffd642}
.black6-rule .red,.black6-answer-swatch.red{background:#ef3340}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-rule .green,.black6-answer-swatch.green{background:#61c86a}
.black6-rule .black,.black6-answer-swatch.black{background:#222222}
.black6-answer-swatch.orange{background:#ff8626}
.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.g1-black{background:#222222}
.b1-red{background:#ef3340}
.b1-black{background:#222222}
.b1-yellow{background:#ffd642}

/* Black activity helpers */
.p1-red{background:#ef3340}.p1-black{background:#222222}.p1-yellow{background:#ffd642}
.black6-answer-swatch.red{background:#ef3340}.black6-answer-swatch.blue{background:#4f8ee8}.black6-answer-swatch.black{background:#222222}.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}.black6-answer-swatch.green{background:#61c86a}.black6-answer-swatch.orange{background:#ff8626}
.black6-rule .red{background:#ef3340}.black6-rule .blue{background:#4f8ee8}.black6-rule .black{background:#222222}.black6-rule .white{background:#fff;border:3px solid #ddd}
.black-brand-dot{display:inline-block;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#9a77de,#5e35a6)}











/* Drive Coloring Pages — fitted 4:5 player */
.theme-pink .drive-coloring-dots{color:#e967a0}
.theme-pink .drive-coloring-progress span{background:linear-gradient(90deg,#ffd5e7,#f37fb1)}
.drive-coloring-shell{max-width:1080px}.drive-coloring-level{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px 20px;margin-bottom:18px}.drive-coloring-dots{display:flex;gap:9px}.drive-coloring-dots span{width:17px;height:17px;border-radius:50%;background:#ebe4ef;border:2px solid #ddd2e4}.drive-coloring-dots span.active{background:currentColor;transform:scale(1.16)}.drive-coloring-dots span.done{background:#58bf77;border-color:#58bf77}.theme-red .drive-coloring-dots{color:#ef3340}.theme-orange .drive-coloring-dots{color:#ff8626}.theme-yellow .drive-coloring-dots{color:#d5aa00}.theme-green .drive-coloring-dots{color:#46aa52}.theme-blue .drive-coloring-dots{color:#3478d4}.theme-purple .drive-coloring-dots{color:#8555cc}.drive-coloring-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(16px,3vw,28px)}.drive-coloring-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:14px}.drive-coloring-clue{min-width:112px;background:#f8f5fa;border:1px solid #ebe1ef;border-radius:20px;padding:8px;text-align:center}.drive-coloring-clue span,.drive-coloring-clue strong{display:block;font-size:.68rem;font-weight:1000}.drive-coloring-clue i{display:block;width:58px;height:58px;border-radius:50%;margin:6px auto}.drive-coloring-workspace{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:center}.drive-coloring-stage{position:relative;width:min(100%,760px,calc(68vh * .8));aspect-ratio:4/5;margin:0 auto;background:#fff;border:3px dashed #ded3e3;border-radius:24px;overflow:hidden;touch-action:none}.drive-coloring-stage.complete{border-color:#63c77f}.drive-coloring-stage canvas,.drive-coloring-stage img{position:absolute;inset:0;width:100%;height:100%}.drive-coloring-stage canvas{z-index:1;touch-action:none;background:#fff}.drive-coloring-stage img{z-index:2;object-fit:contain;pointer-events:none}.drive-coloring-tools{display:grid;gap:10px}.drive-coloring-tool{border:2px solid #eee4ef;border-radius:18px;background:#fff;padding:10px 7px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.drive-coloring-tool.active{border-color:#aaa;background:#f8f5fa}.drive-coloring-swatch,.drive-coloring-eraser,.drive-coloring-reset{width:45px;height:45px;display:block}.drive-coloring-swatch{border-radius:50%}.drive-coloring-eraser{border-radius:12px;background:linear-gradient(135deg,#f4a6bd 0 48%,#edf0f5 48% 100%)}.drive-coloring-reset{border-radius:13px;background:#f3eff5;display:grid;place-items:center;font-size:1.8rem}.drive-coloring-progress-row{display:flex;justify-content:space-between;max-width:840px;margin:14px auto 6px;font-weight:900}.drive-coloring-progress{height:13px;max-width:840px;margin:0 auto 14px;background:#eee6f0;border-radius:99px;overflow:hidden}.drive-coloring-progress span{display:block;height:100%;width:0;background:#777}.drive-coloring-controls{max-width:840px;margin:14px auto 0;display:flex;justify-content:space-between;gap:12px}@media(max-width:760px){.drive-coloring-heading{flex-direction:column;align-items:flex-start}.drive-coloring-workspace{grid-template-columns:1fr}.drive-coloring-stage{width:min(100%,calc(62vh * .8))}.drive-coloring-tools{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.drive-coloring-level{flex-direction:column;align-items:flex-start}.drive-coloring-stage{width:min(100%,calc(58vh * .8))}.drive-coloring-controls{flex-direction:column}.drive-coloring-controls>*{width:100%}}

/* Pink mix helpers */
.pink6-rule .red,.pink6-answer-swatch.red{background:#ef3340}
.pink6-rule .white,.pink6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.pink6-rule .pink,.pink6-answer-swatch.pink{background:#f37fb1}
.pink6-answer-swatch.blue{background:#4f8ee8}
.pink6-answer-swatch.yellow{background:#ffd642}

/* Brown mix helpers */
.brown6-rule .red,.brown6-answer-swatch.red{background:#ef3340}
.brown6-rule .yellow,.brown6-answer-swatch.yellow{background:#ffd642}
.brown6-rule .blue,.brown6-answer-swatch.blue{background:#4f8ee8}
.brown6-rule .white,.brown6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.brown6-rule .brown,.brown6-answer-swatch.brown{background:#9a6538}
.theme-brown .drive-coloring-dots{color:#84552f}
.theme-brown .drive-coloring-progress span{background:linear-gradient(90deg,#ead4bf,#9a6538)}

/* Gray mix helpers */
.gray6-rule .black,.gray6-answer-swatch.black{background:#222}
.gray6-rule .white,.gray6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.gray6-rule .gray,.gray6-answer-swatch.gray{background:#8a929b}
.gray6-answer-swatch.blue{background:#4f8ee8}
.gray6-answer-swatch.red{background:#ef3340}
.theme-gray .drive-coloring-dots{color:#757d86}
.theme-gray .drive-coloring-progress span{background:linear-gradient(90deg,#dde1e5,#8a929b)}


/* Universal sticker certificate print repair */
@media print{
  @page{size:letter portrait;margin:.45in}
  body{background:#fff!important}
  body *{visibility:hidden!important}
  .sticker10-certificate,
  .orange10-certificate,
  .yellow10-certificate,
  .green10-certificate,
  .blue10-certificate,
  .purple10-certificate,
  .pink10-certificate,
  .brown10-certificate,
  .gray10-certificate,
  .black10-certificate,
  .sticker10-certificate *,
  .orange10-certificate *,
  .yellow10-certificate *,
  .green10-certificate *,
  .blue10-certificate *,
  .purple10-certificate *,
  .pink10-certificate *,
  .brown10-certificate *,
  .gray10-certificate *,
  .black10-certificate *{
    visibility:visible!important;
  }
  .sticker10-certificate,
  .orange10-certificate,
  .yellow10-certificate,
  .green10-certificate,
  .blue10-certificate,
  .purple10-certificate,
  .pink10-certificate,
  .brown10-certificate,
  .gray10-certificate,
  .black10-certificate{
    display:block!important;
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:.45in!important;
    box-sizing:border-box!important;
    border:3px solid #000!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#000!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }
  .sticker10-certificate-actions,
  .orange10-certificate-actions,
  .yellow10-certificate-actions,
  .green10-certificate-actions,
  .blue10-certificate-actions,
  .purple10-certificate-actions,
  .pink10-certificate-actions,
  .brown10-certificate-actions,
  .gray10-certificate-actions,
  .black10-certificate-actions{
    display:none!important;
  }
}

/* Black mix helpers */
.black6-rule .black,.black6-answer-swatch.black{background:#111}
.black6-rule .white,.black6-answer-swatch.white{background:#fff;border:3px solid #ddd}
.black6-answer-swatch.gray{background:#8a929b}
.black6-answer-swatch.red{background:#ef3340}
.black6-answer-swatch.blue{background:#4f8ee8}
.black6-answer-swatch.darkred{background:#8e1e27}
.black6-answer-swatch.darkblue{background:#234c87}
.theme-black .drive-coloring-dots{color:#222}
.theme-black .drive-coloring-progress span{background:linear-gradient(90deg,#777,#111)}


/* Sticker print visibility specificity fix */
@media print{
  body.theme-red .sticker10-certificate,
  body.theme-red .sticker10-certificate *,
  body.theme-orange .orange10-certificate,
  body.theme-orange .orange10-certificate *,
  body.theme-yellow .yellow10-certificate,
  body.theme-yellow .yellow10-certificate *,
  body.theme-green .green10-certificate,
  body.theme-green .green10-certificate *,
  body.theme-blue .blue10-certificate,
  body.theme-blue .blue10-certificate *,
  body.theme-purple .purple10-certificate,
  body.theme-purple .purple10-certificate *,
  body.theme-pink .pink10-certificate,
  body.theme-pink .pink10-certificate *,
  body.theme-brown .brown10-certificate,
  body.theme-brown .brown10-certificate *,
  body.theme-gray .gray10-certificate,
  body.theme-gray .gray10-certificate *,
  body.theme-black .black10-certificate,
  body.theme-black .black10-certificate *{
    visibility:visible!important;
  }
}

/* White visibility + mixing helpers */
.theme-white .course-hero,
.theme-white .content-card,
.theme-white .object-card,
.theme-white .find-item,
.theme-white .white4-choice,
.theme-white .white5-choice,
.theme-white .white7-choice,
.theme-white .white8-art-wrap,
.theme-white .white8-answer-grid button,
.theme-white .white10-sticker,
.theme-white .white10-slot,
.theme-white .art-tile,
.theme-white .card-art{
  background:#edf4f7;
}
.theme-white .white-target-word,.theme-white .white-giant-word{color:#555;text-shadow:0 1px 0 #fff}
.white-swatch{background:#fff!important;border:4px solid #c8c8c0!important;box-shadow:inset 0 0 0 2px #fff}
.white6-rule .white,.white6-answer-swatch.white{background:#fff;border:3px solid #cfcfc7}
.white6-rule .red,.white6-answer-swatch.red{background:#ef3340}
.white6-rule .pink,.white6-answer-swatch.pink{background:#f37fb1}
.white6-rule .black,.white6-answer-swatch.black{background:#222}
.white6-rule .gray,.white6-answer-swatch.gray{background:#8a929b}
.white6-rule .blue,.white6-answer-swatch.blue{background:#4f8ee8}
.white6-rule .lightblue,.white6-answer-swatch.lightblue{background:#a9c9f0}
.theme-white .drive-coloring-dots{color:#aaa}
.theme-white .drive-coloring-progress span{background:linear-gradient(90deg,#f2f2ed,#c9c9c0)}
.theme-white .drive-coloring-swatch{border:2px solid #bbb}

/* White coloring paper */
.theme-white .drive-coloring-stage,
.theme-white .drive-coloring-stage canvas{background:#dfeaf0}
.theme-white .drive-coloring-stage img{filter:none}

/* White sticker print support */
@media print{
  body.theme-white .white10-certificate,
  body.theme-white .white10-certificate *{
    visibility:visible!important;
  }
  body.theme-white .white10-certificate{
    display:block!important;
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:.45in!important;
    box-sizing:border-box!important;
    border:3px solid #000!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#000!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }
  body.theme-white .white10-certificate-actions{display:none!important}
}


/* Rainbow Color Games */
.rainbow-brand-dot{width:18px;height:18px;border-radius:50%;background:conic-gradient(#ef3340,#ff8626,#ffd642,#51b85f,#3d8df5,#8555cc,#f37fb1,#ef3340)}
.theme-rainbow{background:linear-gradient(180deg,#fff9fc 0,#f7fbff 100%)}
.rainbow-hub-shell{max-width:1180px}
.rainbow-games-hero{display:grid;grid-template-columns:1.5fr .7fr;gap:24px;align-items:center;background:#fff;border:2px solid #eee5ef;border-radius:34px;padding:clamp(24px,5vw,50px);box-shadow:0 14px 36px rgba(75,50,95,.08);margin-bottom:26px}
.rainbow-games-hero h1{font-size:clamp(2.5rem,7vw,5.5rem);margin:.2rem 0 .6rem}
.rainbow-word{background:linear-gradient(90deg,#ef3340,#ff8626,#d9b100,#51b85f,#3d8df5,#8555cc,#f37fb1);-webkit-background-clip:text;background-clip:text;color:transparent}
.rainbow-hub-progress{display:inline-flex;align-items:baseline;gap:8px;background:#f7f1fb;border-radius:99px;padding:10px 16px;margin-top:10px}.rainbow-hub-progress strong{font-size:1.5rem}
.rainbow-gamepad-icon{min-height:220px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,#ffe3eb,#fff1c9,#dff7e4,#dcecff,#eadcff);position:relative;overflow:hidden}
.rainbow-gamepad-icon b{font-size:7rem}.rainbow-gamepad-icon span{position:absolute;right:18px;top:15px;font-size:2.2rem}
.rainbow-game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.rainbow-game-card{position:relative;min-height:280px;background:#fff;border:2px solid #ece3ef;border-radius:28px;padding:20px;text-align:center;box-shadow:0 8px 22px rgba(75,50,95,.07);transition:.18s transform,.18s box-shadow;display:flex;flex-direction:column;align-items:center}
.rainbow-game-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(75,50,95,.12)}
.rainbow-game-card.complete{border-color:#8bd59e;background:#f7fff9}
.rainbow-game-number{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f3eff5;font-weight:900}
.rainbow-game-visual{font-size:4.8rem;line-height:1;margin:18px 0 12px}.rainbow-game-card h2{font-size:1.35rem;margin:4px 0 8px}.rainbow-game-card p{font-size:.95rem;flex:1}.rainbow-game-state{display:inline-block;background:#f3eff5;border-radius:99px;padding:7px 12px;font-weight:900}.rainbow-game-card.complete .rainbow-game-state{background:#daf5e1;color:#287540}
.rainbow-master-certificate{margin:28px auto 0;max-width:760px;text-align:center;background:#fff;border:5px double #8b59d4;border-radius:28px;padding:32px;box-shadow:0 10px 30px rgba(75,50,95,.10)}
.rainbow-master-ribbon{font-weight:1000;letter-spacing:.08em;font-size:1.2rem;background:linear-gradient(90deg,#ffe4e7,#fff1d0,#e3f8e5,#e2efff,#efe4ff);border-radius:99px;padding:10px 16px}.rainbow-master-icons{display:flex;justify-content:center;gap:18px;font-size:3rem;margin:18px 0}

/* Shared game frame */
.rg-shell{max-width:1100px}.rg-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:2px solid #eee5ef;border-radius:28px;padding:20px 24px;margin-bottom:18px}.rg-hero h1{margin:.15rem 0;font-size:clamp(2rem,5vw,3.8rem)}.rg-progress{display:flex;gap:8px;align-items:center}.rg-dot{width:18px;height:18px;border-radius:50%;background:#ebe4ef;border:2px solid #d9cede}.rg-dot.active{background:#8b59d4;transform:scale(1.12)}.rg-dot.done{background:#58bf77;border-color:#58bf77}
.rg-panel{background:#fff;border:2px solid #eee5ef;border-radius:28px;padding:clamp(18px,4vw,30px);box-shadow:0 8px 24px rgba(75,50,95,.06);margin-bottom:18px}.rg-feedback{min-height:52px;border-radius:18px;padding:13px 16px;background:#f7f3f9;font-weight:900;text-align:center}.rg-feedback.good{background:#e7f8eb;color:#287540}.rg-feedback.try{background:#fff4df;color:#805a16}.rg-target{display:inline-flex;align-items:center;gap:10px;background:#f5f0f8;border-radius:99px;padding:10px 15px;font-weight:1000}.rg-target-swatch{width:27px;height:27px;border-radius:50%;border:2px solid rgba(0,0,0,.16)}
.rg-celebrate{text-align:center;background:linear-gradient(135deg,#fff4d9,#eefcff,#f8ebff);border:2px solid #eadff0;border-radius:28px;padding:28px}.rg-celebrate h2{font-size:2rem;margin:.2rem 0}.rg-hidden{display:none!important}

/* Game 1 Catch */
.catch-stage{position:relative;height:min(58vh,560px);min-height:420px;overflow:hidden;border-radius:26px;background:linear-gradient(#dff2ff 0 70%,#e8f8df 70% 100%);border:3px solid #cfe1ec;touch-action:none}.catch-stage:before{content:"☁️     ☁️       ☁️";position:absolute;left:4%;top:16px;font-size:2rem;opacity:.7;word-spacing:4rem}
.catch-basket{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);width:130px;height:72px;border-radius:18px 18px 35px 35px;background:linear-gradient(#c98945,#9d612b);border:4px solid #7c481e;display:grid;place-items:center;font-size:2rem;font-weight:1000;color:#fff;z-index:4;user-select:none}
.catch-object{position:absolute;width:78px;height:78px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 4px rgba(0,0,0,.12));z-index:2}.catch-scorebar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* Game 2 Sort */
.sort-conveyor{min-height:215px;border-radius:26px;background:repeating-linear-gradient(90deg,#50545a 0 45px,#61666d 45px 90px);border:5px solid #34373c;display:grid;place-items:center;position:relative;overflow:hidden;margin-bottom:18px}.sort-conveyor:after{content:"";position:absolute;left:0;right:0;bottom:12px;height:18px;background:repeating-linear-gradient(90deg,#202225 0 18px,#777 18px 36px)}
.sort-object{width:150px;height:150px;object-fit:contain;z-index:2;cursor:grab;touch-action:none;filter:drop-shadow(0 5px 4px rgba(0,0,0,.16))}
.sort-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px}.sort-bin{min-height:145px;border-radius:22px;border:4px solid var(--bin);background:color-mix(in srgb,var(--bin) 13%,white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:1000;cursor:pointer}.sort-bin span{width:44px;height:44px;border-radius:50%;background:var(--bin);border:2px solid rgba(0,0,0,.18)}.sort-bin.white-bin span{border-color:#aaa}
.sort-bin.over{transform:scale(1.04);box-shadow:0 0 0 5px rgba(88,191,119,.2)}

/* Game 3 Balloons */
.balloon-field{position:relative;min-height:520px;border-radius:28px;overflow:hidden;background:linear-gradient(#dff4ff,#fef8e8);border:3px solid #d6e7ed}.pop-balloon{position:absolute;width:92px;height:116px;border:none;background:none;padding:0;cursor:pointer;animation:balloonFloat 4s ease-in-out infinite alternate}.pop-balloon img{width:100%;height:100%;object-fit:contain}.pop-balloon.wrong{animation:rgShake .35s}.pop-balloon.popped{transform:scale(.05);opacity:0;transition:.2s}
@keyframes balloonFloat{from{transform:translateY(8px) rotate(-2deg)}to{transform:translateY(-10px) rotate(2deg)}}@keyframes rgShake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* Game 4 Treasure */
.treasure-scene{position:relative;min-height:560px;border-radius:30px;overflow:hidden;border:3px solid #d8e6d2;background:linear-gradient(#cfefff 0 44%,#8bd36f 44% 100%)}.treasure-scene.farm{background:linear-gradient(#cfefff 0 38%,#8bd36f 38% 76%,#c79a55 76%)}.treasure-scene.beach{background:linear-gradient(#cfefff 0 38%,#52b9df 38% 67%,#f3d38d 67%)}.treasure-scene.playground{background:linear-gradient(#d9f1ff 0 40%,#8ed06c 40%)}.treasure-scene.toystore{background:linear-gradient(#fff0d7,#f7e3ff)}
.scene-decor{position:absolute;font-size:4rem;opacity:.95;pointer-events:none}.treasure-object{position:absolute;width:92px;height:92px;border:0;background:rgba(255,255,255,.52);border-radius:20px;padding:5px;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.12)}.treasure-object img{width:100%;height:100%;object-fit:contain}.treasure-object.found{transform:scale(.2);opacity:0;transition:.3s}.treasure-object.wrong{animation:rgShake .35s}
.treasure-chest{font-size:5rem;text-align:center;margin:8px}

/* Game 5 Race */
.race-board{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.race-space{min-height:86px;border-radius:18px;background:#f7f2fa;border:2px solid #e7ddea;display:grid;place-items:center;font-weight:1000;position:relative}.race-space:nth-child(6n+1){background:#ffe6e8}.race-space:nth-child(6n+2){background:#fff0db}.race-space:nth-child(6n+3){background:#fff8cf}.race-space:nth-child(6n+4){background:#e5f6e5}.race-space:nth-child(6n+5){background:#e4efff}.race-space:nth-child(6n){background:#efe5ff}.race-space.token:after{content:"🚗";font-size:2rem;position:absolute;bottom:2px}.race-space.finish{outline:3px solid #8b59d4}
.race-question{background:#fff;border:2px solid #ece3ef;border-radius:24px;padding:20px;text-align:center}.race-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:16px}.race-answer{min-height:115px;border:2px solid #e7ddea;border-radius:20px;background:#fff;padding:10px;cursor:pointer;font-weight:1000}.race-answer:hover{border-color:#8b59d4}.race-answer img{width:76px;height:76px;object-fit:contain}.race-answer .answer-swatch{width:58px;height:58px;border-radius:50%;display:block;margin:0 auto 8px;border:2px solid rgba(0,0,0,.18)}
.race-stars{font-size:1.4rem}

@media(max-width:720px){.rainbow-games-hero{grid-template-columns:1fr}.rainbow-gamepad-icon{min-height:140px}.catch-stage{min-height:430px}.race-board{grid-template-columns:repeat(4,1fr)}.race-space{min-height:70px}.balloon-field,.treasure-scene{min-height:470px}}
@media print{body.theme-rainbow *{visibility:hidden!important}body.theme-rainbow .rainbow-master-certificate,body.theme-rainbow .rainbow-master-certificate *{visibility:visible!important}.rainbow-master-certificate{display:block!important;position:absolute!important;left:0;top:0;width:100%!important;max-width:none!important;border:4px solid #000!important;box-shadow:none!important}.rainbow-master-certificate button{display:none!important}}

/* Dashboard Color Games icon */
.games-dashboard-card{border-color:#e0d2f0}
.dashboard-games-art{position:relative;border-radius:26px;background:linear-gradient(135deg,#ffe5e9,#fff3cf,#e1f7e4,#e2efff,#efe3ff);height:145px!important;width:100%;max-width:170px}
.dashboard-gamepad{font-size:5.7rem;line-height:1;filter:drop-shadow(0 6px 7px rgba(69,45,90,.14))}
.dashboard-mini-rainbow{position:absolute;right:10px;top:7px;font-size:2.25rem}


/* Transparent Drive clipart refresh for Rainbow games */
.dashboard-games-art{display:block;position:relative;height:145px!important;width:100%;max-width:176px;background:linear-gradient(135deg,#fff0f3,#fff6dd,#edf9ee,#edf4ff,#f2ebff)}
.dashboard-games-icon{position:absolute;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(69,45,90,.12))}
.dashboard-games-art .dg-red{width:68px;left:8px;top:20px}
.dashboard-games-art .dg-blue{width:66px;right:10px;top:18px}
.dashboard-games-art .dg-green{width:70px;left:22px;bottom:10px}
.dashboard-games-art .dg-purple{width:66px;right:24px;bottom:14px}

.rainbow-hub-art{position:relative;min-height:250px;border-radius:30px;background:linear-gradient(135deg,#ffe8eb,#fff4d2,#e8f8ea,#e7f1ff,#f1e7ff);overflow:hidden}
.hub-art-icon{position:absolute;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(69,45,90,.14))}
.hai-red{width:90px;left:14px;top:24px}.hai-yellow{width:92px;right:18px;top:14px}.hai-green{width:98px;left:34px;bottom:18px}
.hai-blue{width:88px;right:20px;bottom:20px}.hai-purple{width:90px;left:50%;top:34%;transform:translate(-50%,-50%)}.hai-pink{width:86px;right:38%;bottom:8px}

.rainbow-game-visual{display:flex;align-items:center;justify-content:center;gap:8px;min-height:94px}
.rainbow-game-visual img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(69,45,90,.12))}
.icon-strip-two img{width:70px;height:70px}
.icon-strip-three img{width:58px;height:58px}
.image-icons-row{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.image-icons-row img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(69,45,90,.12))}
.rg-hero{align-items:center}
.rg-hero-art{display:flex;justify-content:center;align-items:center;min-width:210px}
.rg-hero-art img{width:76px;height:76px;object-fit:contain}
.rainbow-master-icons img{width:84px;height:84px}

.catch-stage:before{content:"";display:none}
.catch-stage{background:
  radial-gradient(circle at 18% 16%,rgba(255,255,255,.88) 0 34px,transparent 35px),
  radial-gradient(circle at 25% 16%,rgba(255,255,255,.88) 0 28px,transparent 29px),
  radial-gradient(circle at 22% 12%,rgba(255,255,255,.88) 0 28px,transparent 29px),
  radial-gradient(circle at 78% 14%,rgba(255,255,255,.88) 0 34px,transparent 35px),
  radial-gradient(circle at 84% 16%,rgba(255,255,255,.88) 0 26px,transparent 27px),
  radial-gradient(circle at 80% 10%,rgba(255,255,255,.88) 0 28px,transparent 29px),
  linear-gradient(#dff2ff 0 70%,#e8f8df 70% 100%);
}
.catch-basket{font-size:0}
.catch-basket:before,.catch-basket:after{content:"";position:absolute;display:block}
.catch-basket:before{left:8px;right:8px;bottom:10px;height:30px;border-radius:14px 14px 28px 28px;background:repeating-linear-gradient(90deg,#d39957 0 10px,#c18242 10px 20px);border:3px solid #8f572a}
.catch-basket:after{left:24px;right:24px;top:6px;height:34px;border:5px solid #8f572a;border-bottom:none;border-radius:24px 24px 0 0}

.rg-celebrate .image-icons-row{margin-bottom:10px}

.treasure-scene{background:
  radial-gradient(circle at 14% 15%,rgba(255,255,255,.9) 0 32px,transparent 33px),
  radial-gradient(circle at 20% 15%,rgba(255,255,255,.9) 0 24px,transparent 25px),
  radial-gradient(circle at 17% 11%,rgba(255,255,255,.9) 0 24px,transparent 25px),
  linear-gradient(#cfefff 0 44%,#8bd36f 44% 100%);
}
.treasure-scene.farm{background:
  radial-gradient(circle at 16% 13%,rgba(255,255,255,.9) 0 32px,transparent 33px),
  radial-gradient(circle at 22% 13%,rgba(255,255,255,.9) 0 24px,transparent 25px),
  linear-gradient(#cfefff 0 38%,#8bd36f 38% 76%,#c79a55 76%)}
.treasure-scene.beach{background:
  radial-gradient(circle at 14% 13%,rgba(255,255,255,.9) 0 30px,transparent 31px),
  linear-gradient(#cfefff 0 38%,#52b9df 38% 67%,#f3d38d 67%)}
.treasure-scene.playground{background:
  radial-gradient(circle at 17% 13%,rgba(255,255,255,.9) 0 30px,transparent 31px),
  linear-gradient(#d9f1ff 0 40%,#8ed06c 40%)}
.treasure-scene.toystore{background:
  linear-gradient(#fff0d7,#f7e3ff)}
.treasure-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08))}
.treasure-object{background:rgba(255,255,255,.58)}

.race-stars{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:900}
.race-stars img{width:34px;height:34px;object-fit:contain}
.race-space{overflow:hidden}
.race-space .race-label{font-size:.9rem}
.race-space.finish{border-style:dashed;border-width:3px;background:repeating-linear-gradient(45deg,#fff 0 12px,#111 12px 24px)}
.race-space.finish .race-label{background:#fff;padding:3px 6px;border-radius:10px}
.race-token-image{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.14))}
.answer-swatch{display:inline-block;margin-bottom:8px}
@media(max-width:720px){
  .dashboard-games-art{max-width:150px}
  .rg-hero{flex-direction:column}
  .rg-hero-art{min-width:0}
  .image-icons-row img,.rg-hero-art img{width:64px;height:64px}
}