.learning-site{--paper:#f7fbfd;--ink:#123653;--muted:#526f82;--card:#fff;--line:#d8e6e7;min-height:70vh;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;padding-bottom:70px}
.learning-site *{box-sizing:border-box}
html[data-theme="dark"] .learning-site{--paper:#091b31;--ink:#f4f8fc;--muted:#c3d7e4;--card:#133450;--line:#365b76}
.learning-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.learning-eyebrow{display:block;color:#287558;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
html[data-theme="dark"] .learning-eyebrow{color:#afe3be}
.learning-back{display:inline-block;color:inherit;font-size:13px;font-weight:800;text-decoration:none}.learning-back:hover{text-decoration:underline}
.learning-hero{position:relative;overflow:hidden;background:#d8eff8}.learning-hero>img{display:block;width:100%;height:auto}.learning-hero-copy{position:absolute;left:4.5%;top:14%;width:34%;color:#103555}.learning-hero-copy .learning-back{margin-bottom:17px}.learning-hero-copy h1{font:600 clamp(44px,4.8vw,76px)/.94 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em;margin:13px 0;color:#103555}.learning-hero-copy p{font-size:clamp(14px,1.15vw,18px);font-weight:700;line-height:1.45;margin:0;color:#254963}
.learning-choose{padding-top:48px}.learning-section-heading{text-align:center;margin-bottom:30px}.learning-section-heading h2{font:600 clamp(40px,4.4vw,58px)/1 'Cormorant Garamond',Georgia,serif;margin:9px 0 9px}.learning-section-heading p{font-size:16px;color:var(--muted);margin:0}
.learning-plaques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.learning-plaque{--glow:#ecb75b;position:relative;display:flex;align-items:flex-end;min-height:280px;border:9px solid #ad7036;border-radius:30px;overflow:hidden;padding:28px 27px 27px;text-decoration:none;color:#173a4d;background:repeating-linear-gradient(92deg,#f4d7a0 0 14px,#f0cf91 15px 24px,#ebc989 25px 28px);box-shadow:inset 0 0 0 3px #ffe8b9,inset 0 -10px 18px #9d602c37,0 8px 0 #815027,0 16px 28px #102d3d34;transition:transform .2s,box-shadow .2s}
.learning-plaque:before{content:"";position:absolute;inset:12px;border:2px dashed #bb854b88;border-radius:17px;pointer-events:none}
.learning-plaque:hover{transform:translateY(-7px);box-shadow:inset 0 0 0 3px #ffe8b9,inset 0 -10px 18px #9d602c37,0 15px 0 #815027,0 22px 30px #102d3d3f}
.learning-plaque:focus-visible,.learning-site button:focus-visible,.learning-site a:focus-visible{outline:4px solid #e9ae35;outline-offset:4px}
.plaque-abc{--glow:#ed8398;background:repeating-linear-gradient(92deg,#f7d5b2 0 15px,#f5cba1 16px 27px,#efd0a9 28px 33px)}
.plaque-numbers{--glow:#e2a95e;background:repeating-linear-gradient(92deg,#f5dfac 0 15px,#f2d699 16px 27px,#f5dea8 28px 33px)}
.plaque-colors{--glow:#99ca9d;background:repeating-linear-gradient(92deg,#e3d9ad 0 15px,#e9d5a6 16px 27px,#eddaa9 28px 33px)}
.plaque-shapes{--glow:#a8c5e6;background:repeating-linear-gradient(92deg,#ecd5ad 0 15px,#e7cfa3 16px 27px,#efd9b0 28px 33px)}
.plaque-label{position:absolute;left:27px;top:19px;z-index:2;display:block;padding:6px 18px;border:3px solid #fff7;border-radius:13px;background:var(--glow);box-shadow:0 5px 0 #8d642f6b,0 8px 15px #60391c37;color:#233d4d;font:900 clamp(33px,4.2vw,56px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.03em;text-shadow:1px 2px #fff9}.plaque-colors .plaque-label{letter-spacing:-.15em;color:#de5c4e;text-shadow:17px 0 #428bdd,32px 0 #e0ae35;padding-right:54px}
.plaque-friend{position:absolute;right:7px;bottom:12px;z-index:1;width:43%;height:94%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 10px 9px #4c391d54);transition:transform .25s}.learning-plaque:hover .plaque-friend{transform:translateY(-5px) rotate(2deg)}
.plaque-copy{position:relative;z-index:2;width:62%;padding-top:56px;display:block}.plaque-copy strong{display:block;font:800 29px/1 'DM Sans',Arial,sans-serif}.plaque-copy small{display:block;font-weight:800;font-size:15px;margin:5px 0 9px}.plaque-copy em{display:block;max-width:340px;font-style:normal;font-size:13px;font-weight:650;line-height:1.4}.plaque-copy b{display:inline-block;margin-top:17px;padding:9px 13px;background:#fff9ed;border-radius:9px;box-shadow:0 4px 0 #b78e5d;color:#234b5a;font-size:13px}
html[data-theme="dark"] .learning-plaque{border-color:#7e512e;box-shadow:inset 0 0 0 3px #ffe2a0,inset 0 -10px 18px #9d602c37,0 8px 0 #5d3824,0 16px 28px #0008}
.subject-top{position:relative;overflow:hidden;min-height:310px;padding:28px 0 0;background:linear-gradient(125deg,#e8f5ed,#e0efff)}.subject-top:after{content:"";position:absolute;width:500px;height:500px;border:2px solid #fff8;border-radius:50%;right:-90px;top:-160px;pointer-events:none}.subject-numbers{background:linear-gradient(125deg,#fcf0d4,#f7dbb4)}.subject-colors{background:linear-gradient(125deg,#fce7e2,#e3e6fb)}.subject-shapes{background:linear-gradient(125deg,#e4eaf8,#dcefdc)}
html[data-theme="dark"] .subject-abc{background:linear-gradient(125deg,#153f50,#1d4a3c)}html[data-theme="dark"] .subject-numbers{background:linear-gradient(125deg,#3d322b,#4c3d2d)}html[data-theme="dark"] .subject-colors{background:linear-gradient(125deg,#453544,#2b3f5a)}html[data-theme="dark"] .subject-shapes{background:linear-gradient(125deg,#243b5c,#264340)}
.subject-title{display:flex;align-items:center;justify-content:space-between;min-height:260px;gap:25px}.subject-title>div{position:relative;z-index:2;max-width:720px}.subject-title h1{font:600 clamp(55px,7vw,88px)/.95 'Cormorant Garamond',Georgia,serif;margin:10px 0 13px}.subject-symbol{display:inline-block;vertical-align:middle;margin-right:10px;padding:12px 16px;border:4px solid #fff7;border-radius:16px;background:#f3be68;box-shadow:0 7px 0 #94693988;font:900 clamp(30px,4vw,49px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.02em;color:#24425b}.subject-colors .subject-symbol{background:linear-gradient(90deg,#e36057 0 33%,#ecd256 33% 66%,#488ddd 66%)}.subject-shapes .subject-symbol{background:#abd7d9}.subject-title p{max-width:590px;font-size:17px;line-height:1.55;font-weight:650;margin:0 0 18px}.subject-guide{display:inline-block;font-size:13px;font-weight:800;padding:8px 14px;border-radius:99px;background:#fff9;color:#24445c}.subject-friend{position:relative;z-index:1;align-self:flex-end;height:280px;width:290px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 13px 12px #112f3f3d);animation:friend-welcome 2.5s ease-in-out infinite alternate}
.subject-voice{min-height:38px;padding:7px 13px;margin:0 0 0 8px;border:1px solid #fff9;border-radius:99px;background:#245a78;color:#fff;font:800 13px 'DM Sans',Arial,sans-serif;cursor:pointer}.subject-voice:hover{background:#32799d}.subject-voice:disabled{opacity:.6;cursor:default}
@keyframes friend-welcome{to{transform:translateY(-7px) rotate(1deg)}}
.subject-body{padding-top:30px}.subject-modes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.mode-button{min-height:51px;padding:11px 19px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:800 15px 'DM Sans',Arial,sans-serif;cursor:pointer}.mode-button[aria-pressed="true"]{border-color:#d7a94e;background:#fbe8b8;color:#263b4b;box-shadow:0 4px 0 #bd8d3e}.mode-button:hover{transform:translateY(-2px)}
.activity{min-height:470px;padding:30px;border:1px solid var(--line);border-radius:27px;background:var(--card);box-shadow:0 13px 35px #0b2b4c1b}.activity h2{font:600 clamp(36px,4vw,52px)/1 'Cormorant Garamond',Georgia,serif;margin:0 0 9px}.activity p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 18px}.activity-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:23px}.activity-stage{min-height:270px;display:grid;place-items:center;padding:20px;border:2px solid var(--line);border-radius:23px;background:var(--paper);text-align:center}.activity-stage .giant{display:block;font:900 clamp(78px,11vw,140px)/1 'DM Sans',Arial,sans-serif}.activity-stage .subgiant{display:block;font-size:28px;font-weight:800}.activity-stage .icon{display:block;font-size:68px}.activity-controls{display:flex;flex-direction:column;justify-content:center;gap:13px}.activity-controls h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;margin:0}.activity-buttons,.activity-grid{display:flex;flex-wrap:wrap;gap:10px}.activity button{cursor:pointer}.tile,.answer-button,.utility-button{min-width:55px;min-height:53px;padding:8px 13px;border:2px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);font:800 20px 'DM Sans',Arial,sans-serif;box-shadow:0 4px 0 #12345316}.tile:hover,.answer-button:hover,.utility-button:hover{transform:translateY(-2px)}.tile[aria-pressed="true"]{border-color:#d5a448;background:#ffe4a4;color:#253d4c}.utility-button{font-size:14px}.answer-button{min-width:100px;min-height:86px;font-size:35px}.answer-button.color-answer{display:grid;place-items:center;gap:6px;font-size:13px;text-transform:capitalize}.color-chip{display:block;width:48px;height:48px;border-radius:50%;border:2px solid #12345359;box-shadow:inset 0 4px 7px #fff6,0 3px 5px #1234532e}.answer-button.shape-answer{font-size:15px}.answer-button.shape-answer .shape-mark{display:block;margin:auto auto 6px}
.activity-feedback{min-height:42px;margin-top:18px;font-size:17px;font-weight:800}.activity-feedback.good{color:#237d55}.activity-feedback.try{color:#bd653b}html[data-theme="dark"] .activity-feedback.good{color:#9ce4ba}html[data-theme="dark"] .activity-feedback.try{color:#ffc9a8}
.round-count{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:13px}.tap-items{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.tap-item{width:67px;height:67px;border:2px solid var(--line);border-radius:18px;background:var(--card);font-size:38px;transition:transform .18s,opacity .18s}.tap-item.is-counted{opacity:.5;transform:scale(.84);background:#dff4e5}.number-build{display:flex;align-items:center;justify-content:center;gap:20px}.number-build strong{font-size:100px}.number-build button{font-size:48px;width:72px;height:72px}.color-stage{width:190px;height:190px;border:7px solid #fff;border-radius:50%;box-shadow:0 10px 22px #12345332}.swatch-tile{display:grid;place-items:center;gap:6px;min-width:82px;padding:12px;font-size:13px;text-transform:capitalize}.mix-slots{display:flex;align-items:center;justify-content:center;gap:16px;min-height:180px}.mix-slots i{display:grid;place-items:center;width:100px;height:100px;border:4px dashed var(--line);border-radius:50%;font-style:normal;font-weight:800;font-size:36px}.mix-result{display:grid;place-items:center;min-height:150px;border-radius:20px;border:2px solid var(--line);margin-top:15px;font-size:23px;font-weight:800}
.shape-mark{display:block;width:100px;height:100px;background:#e49f66;clip-path:var(--shape-path);border-radius:var(--shape-radius,0);filter:drop-shadow(0 7px 4px #12345333)}.shape-mark.is-rectangle{width:125px;height:75px}.shape-big{width:170px;height:170px}.shape-big.is-rectangle{width:200px;height:115px}.pattern-line{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.pattern-line .shape-mark{width:75px;height:75px}.pattern-line .shape-mark.is-rectangle{width:88px;height:55px}.pattern-blank{display:grid;place-items:center;width:82px;height:82px;border:3px dashed var(--line);border-radius:15px;font-size:40px}
.trace-board{width:min(100%,430px);height:320px;position:relative;margin:auto;border:3px dashed #d7bd82;border-radius:22px;background:#fffdf4;touch-action:none}.trace-guide{position:absolute;inset:0;display:grid;place-items:center;font:900 230px/1 'DM Sans',Arial,sans-serif;color:#cfcab64d;pointer-events:none}.trace-board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.trace-tools{text-align:center;margin-top:15px}.subject-neighbors{padding:33px 0 12px;text-align:center}.subject-neighbors p{font-weight:800;color:var(--muted)}.subject-neighbor-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.subject-neighbor-links a{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:800;font-size:13px}
@media(max-width:850px){.learning-hero{display:flex;flex-direction:column}.learning-hero-copy{position:static;order:0;width:auto;padding:26px;background:#e9f5f9}.learning-hero>img{order:1}.learning-plaques{grid-template-columns:1fr}.activity-row{grid-template-columns:1fr}.subject-friend{height:230px;width:220px}}
@media(max-width:590px){.learning-wrap{width:min(100% - 24px,1180px)}.learning-hero-copy h1{font-size:54px}.learning-choose{padding-top:30px}.learning-plaque{min-height:240px;padding:22px;border-width:7px}.plaque-label{font-size:37px}.plaque-copy{width:66%;padding-top:52px}.plaque-copy strong{font-size:25px}.plaque-copy em{font-size:12px}.plaque-friend{width:45%;height:80%}.subject-top{min-height:0}.subject-title{min-height:220px}.subject-title h1{font-size:58px}.subject-title p{font-size:14px}.subject-friend{height:175px;width:145px}.subject-symbol{font-size:23px;padding:8px}.subject-body{padding-top:20px}.subject-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mode-button{font-size:11px;padding:7px 3px;min-height:48px}.activity{padding:18px}.activity-stage{min-height:230px}.trace-board{height:280px}.trace-guide{font-size:190px}}
@media(prefers-reduced-motion:reduce){.subject-friend{animation:none}.learning-plaque,.plaque-friend{transition:none}}
/* Plaques use the same blue surfaces as the rest of the site. */
.learning-plaque,.plaque-abc,.plaque-numbers,.plaque-colors,.plaque-shapes{border:3px solid #b7d4e2;background:linear-gradient(145deg,#fafdff,#e6f1f5);color:#123b56;box-shadow:0 8px 0 #bad0dc,0 16px 28px #12345320}
.learning-plaque:before{inset:11px;border:1px solid #8fb3c766;border-radius:18px}
.learning-plaque:hover{box-shadow:0 14px 0 #bad0dc,0 24px 32px #1234532a}
.plaque-abc{background:radial-gradient(circle at 82% 25%,#e4f3e8,#fafdff 65%,#e6f1f5)}
.plaque-numbers{background:radial-gradient(circle at 82% 25%,#fff1d9,#fafdff 65%,#e6f1f5)}
.plaque-colors{background:radial-gradient(circle at 82% 25%,#fae5ef,#fafdff 65%,#e6f1f5)}
.plaque-shapes{background:radial-gradient(circle at 82% 25%,#e2ebff,#fafdff 65%,#e6f1f5)}
.plaque-label{box-shadow:0 5px 0 #23547248,0 8px 14px #12345324}
.plaque-copy b{background:#164b70;color:#fff;box-shadow:0 4px 0 #0d344f}
html[data-theme="dark"] .learning-plaque,html[data-theme="dark"] .plaque-abc,html[data-theme="dark"] .plaque-numbers,html[data-theme="dark"] .plaque-colors,html[data-theme="dark"] .plaque-shapes{border-color:#416d8a;background:linear-gradient(145deg,#183b58,#112d48);color:#f4f8fc;box-shadow:0 8px 0 #071a2d,0 16px 30px #0007}
html[data-theme="dark"] .learning-plaque:before{border-color:#8eb0c54d}
html[data-theme="dark"] .learning-plaque:hover{box-shadow:0 14px 0 #071a2d,0 24px 32px #0008}
html[data-theme="dark"] .plaque-abc{background:radial-gradient(circle at 82% 25%,#244f4e,#183b58 58%,#112d48)}
html[data-theme="dark"] .plaque-numbers{background:radial-gradient(circle at 82% 25%,#514436,#183b58 58%,#112d48)}
html[data-theme="dark"] .plaque-colors{background:radial-gradient(circle at 82% 25%,#543c58,#183b58 58%,#112d48)}
html[data-theme="dark"] .plaque-shapes{background:radial-gradient(circle at 82% 25%,#334e6a,#183b58 58%,#112d48)}
html[data-theme="dark"] .plaque-copy b{background:#e9f5ff;color:#153b56;box-shadow:0 4px 0 #7b9fb5}
/* Friendly, colorful learning paths that still sit naturally in the site's blue palette. */
.learning-plaque,.plaque-abc,.plaque-numbers,.plaque-colors,.plaque-shapes{--card-accent:#d678a8;min-height:300px;border:3px solid #b4d3e3;border-radius:31px;background:radial-gradient(circle at 93% 9%,#ffffffb0 0 11%,transparent 12%),radial-gradient(circle at 76% 84%,#ffffff94 0 13%,transparent 14%),linear-gradient(135deg,#fce8f3,#e8f3ff);color:#173a56;box-shadow:0 9px 0 #b9d4e3,0 17px 30px #12345322;transition:transform .2s,box-shadow .2s}
.learning-plaque:before{inset:11px;border:2px solid #ffffffa8;border-radius:21px}
.learning-plaque:after{content:"";position:absolute;right:24%;top:9%;width:90px;height:90px;border:16px solid #ffffff4f;border-radius:50%;pointer-events:none}
.learning-plaque:hover{transform:translateY(-6px);box-shadow:0 15px 0 #b9d4e3,0 25px 35px #1234532a}
.plaque-abc{--card-accent:#d65f9e;background:radial-gradient(circle at 93% 9%,#ffffffb0 0 11%,transparent 12%),radial-gradient(circle at 76% 84%,#ffffff94 0 13%,transparent 14%),linear-gradient(135deg,#ffe3ef,#e9e3ff 55%,#e6f5ff)}
.plaque-numbers{--card-accent:#cd8046;background:radial-gradient(circle at 93% 9%,#ffffffb0 0 11%,transparent 12%),radial-gradient(circle at 76% 84%,#ffffff94 0 13%,transparent 14%),linear-gradient(135deg,#fff0ce,#ffe1ce 55%,#e8f3ff)}
.plaque-colors{--card-accent:#318a86;background:radial-gradient(circle at 93% 9%,#ffffffb0 0 11%,transparent 12%),radial-gradient(circle at 76% 84%,#ffffff94 0 13%,transparent 14%),linear-gradient(135deg,#dcf8ee,#def2ff 56%,#f7e3fa)}
.plaque-shapes{--card-accent:#6d76bf;background:radial-gradient(circle at 93% 9%,#ffffffb0 0 11%,transparent 12%),radial-gradient(circle at 76% 84%,#ffffff94 0 13%,transparent 14%),linear-gradient(135deg,#e6e7ff,#e4f2ff 55%,#e3f7ee)}
.plaque-label,.plaque-colors .plaque-label{display:flex;align-items:center;gap:4px;left:25px;top:22px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:900 clamp(40px,4.3vw,57px)/1 'Trebuchet MS','DM Sans',sans-serif;letter-spacing:0;text-shadow:none}
.plaque-label span{display:inline-grid;place-items:center;min-width:.88em;height:1em;border-radius:16px;color:#fff;text-shadow:0 2px 2px #173a5644;box-shadow:inset 0 2px 0 #ffffff9c,0 5px 0 #173a5629;transform:rotate(-7deg)}
.plaque-label span:nth-child(2){transform:rotate(6deg) translateY(3px)}
.plaque-label span:nth-child(3){transform:rotate(-4deg) translateY(-2px)}
.plaque-abc .plaque-label span:nth-child(1){background:#eb6687}.plaque-abc .plaque-label span:nth-child(2){background:#65a7de}.plaque-abc .plaque-label span:nth-child(3){background:#e9ae49}
.plaque-numbers .plaque-label span:nth-child(1){background:#e78b63}.plaque-numbers .plaque-label span:nth-child(2){background:#73b893}.plaque-numbers .plaque-label span:nth-child(3){background:#807ecb}
.plaque-colors .plaque-label span{width:.8em;min-width:.8em;height:.8em;margin-top:4px;border:5px solid #fff;box-shadow:0 5px 0 #173a5624;text-shadow:none;color:transparent}
.plaque-colors .plaque-label span:nth-child(1){background:#f07785}.plaque-colors .plaque-label span:nth-child(2){background:#f6c65b}.plaque-colors .plaque-label span:nth-child(3){background:#5baddd}
.plaque-shapes .plaque-label span{width:.88em;min-width:.88em;height:.92em;background:#fff;border:0;box-shadow:0 5px 0 #173a5624;color:#63b7bb;text-shadow:none}.plaque-shapes .plaque-label span:nth-child(2){color:#ec956e}.plaque-shapes .plaque-label span:nth-child(3){color:#8b89d3}
.plaque-copy{padding-top:66px}.plaque-copy strong{font:900 31px/1.05 'Trebuchet MS','DM Sans',sans-serif;letter-spacing:-.03em}.plaque-copy small{color:#375973}.plaque-copy em{font-weight:650}.plaque-copy b{border-radius:99px;background:var(--card-accent);box-shadow:0 4px 0 #173a562e;color:#fff;padding:11px 17px;font-weight:850}
.plaque-friend{filter:drop-shadow(0 10px 8px #173a5633)}
html[data-theme="dark"] .learning-plaque,html[data-theme="dark"] .plaque-abc,html[data-theme="dark"] .plaque-numbers,html[data-theme="dark"] .plaque-colors,html[data-theme="dark"] .plaque-shapes{border-color:#527c9b;color:#fff;box-shadow:0 9px 0 #0a2238,0 17px 30px #0008}
html[data-theme="dark"] .learning-plaque:hover{box-shadow:0 15px 0 #0a2238,0 25px 35px #0009}
html[data-theme="dark"] .plaque-abc{background:radial-gradient(circle at 82% 25%,#a45b9366,transparent 50%),linear-gradient(135deg,#183a5b,#19314f)}
html[data-theme="dark"] .plaque-numbers{background:radial-gradient(circle at 82% 25%,#d1936566,transparent 50%),linear-gradient(135deg,#183a5b,#19314f)}
html[data-theme="dark"] .plaque-colors{background:radial-gradient(circle at 82% 25%,#52b79e66,transparent 50%),linear-gradient(135deg,#183a5b,#19314f)}
html[data-theme="dark"] .plaque-shapes{background:radial-gradient(circle at 82% 25%,#9285d566,transparent 50%),linear-gradient(135deg,#183a5b,#19314f)}
html[data-theme="dark"] .plaque-copy small{color:#c9e5f5}
html[data-theme="dark"] .plaque-copy b{background:var(--card-accent);box-shadow:0 4px 0 #0a2238;color:#fff}
@media(max-width:590px){.learning-plaque{min-height:270px;border-width:3px}.plaque-label{left:20px;top:18px;font-size:39px}.plaque-copy{padding-top:64px}.plaque-copy strong{font-size:27px}}
.number-stars{display:block;max-width:500px;margin:12px auto;line-height:1.7;font-size:clamp(26px,3.5vw,38px);overflow-wrap:anywhere}
.activity.is-celebrating{border-color:#a2d6b4;box-shadow:0 13px 35px #0b2b4c1b,inset 0 0 0 3px #d9f4dc}
.activity.is-celebrating .activity-feedback.good{animation:learning-pop .32s ease-out}
@keyframes learning-pop{0%{transform:scale(.92);opacity:.5}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.activity.is-celebrating .activity-feedback.good{animation:none}}
/* The lessons are toy playrooms, with large pieces and a small choice set. */
.learning-subject{--toy:#63bfc5;--toy-dark:#26818c;--toy-soft:#d8f6ed;background:radial-gradient(circle at 8% 41%,#cdf3e25c,transparent 24%),radial-gradient(circle at 94% 60%,#c5e0ff6b,transparent 25%),var(--paper)}
.learning-subject[data-learning-topic="abc"]{--toy:#f08fa8;--toy-dark:#b94e78;--toy-soft:#ffe2ec}
.learning-subject[data-learning-topic="numbers"]{--toy:#f3b66d;--toy-dark:#bd7544;--toy-soft:#fff0c9}
.learning-subject[data-learning-topic="colors"]{--toy:#73cbb4;--toy-dark:#348c82;--toy-soft:#daf9e9}
.learning-subject[data-learning-topic="shapes"]{--toy:#a49ae4;--toy-dark:#6b66af;--toy-soft:#e9e7ff}
.subject-body{padding-top:33px}
.subject-modes{justify-content:center;gap:13px;margin-bottom:24px}
.mode-button{min-height:68px;padding:14px 26px;border:4px solid #fff;border-radius:23px;background:linear-gradient(#fff,#e8f4fc);box-shadow:0 7px 0 #b6d1df,0 12px 18px #1438552b;color:#183e5c;font:900 18px 'Trebuchet MS','DM Sans',sans-serif;transition:transform .16s,box-shadow .16s}
.mode-button[aria-pressed="true"]{border-color:#fff;background:linear-gradient(#fff8d6,var(--toy-soft));box-shadow:0 7px 0 var(--toy-dark),0 14px 18px #14385531;color:#163752;transform:translateY(-3px)}
.mode-button:hover{transform:translateY(-4px)}
.activity{position:relative;overflow:hidden;min-height:530px;padding:32px;border:5px solid #fff;border-radius:38px;background:radial-gradient(circle at 93% 12%,#ffffffb9 0 6%,transparent 6.5%),radial-gradient(circle at 8% 85%,#ffffffb0 0 7%,transparent 7.5%),linear-gradient(145deg,var(--toy-soft),#edf8ff 68%,#fff7e9);box-shadow:0 12px 0 #a9cbd8,0 25px 40px #0b2b4c29;color:#173b55}
.activity:before{content:"";position:absolute;right:-50px;top:-90px;width:200px;height:200px;border:26px solid #ffffff65;border-radius:50%;pointer-events:none}
.activity h2{position:relative;z-index:1;margin:4px 0 9px;color:#173b55;font:900 clamp(36px,4.2vw,52px)/1.08 'Trebuchet MS','DM Sans',sans-serif;letter-spacing:-.035em}
.activity p{position:relative;z-index:1;color:#385a71;font-size:17px;font-weight:750}
.toy-sticker,.round-count{position:relative;z-index:1;display:inline-block;margin-bottom:10px;padding:8px 16px;border:3px solid #fff;border-radius:99px;background:var(--toy);box-shadow:0 4px 0 #173b5531;color:#173b55;font:900 14px 'Trebuchet MS','DM Sans',sans-serif;letter-spacing:.02em;text-transform:none}
.activity-row{position:relative;z-index:1;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);gap:24px}
.activity-stage{min-height:330px;padding:23px;border:6px solid #fff;border-radius:33px;background:radial-gradient(ellipse at 50% 109%,#8fdab2 0 31%,transparent 32%),radial-gradient(ellipse at 10% 109%,#b7e2a8 0 28%,transparent 29%),radial-gradient(ellipse at 94% 110%,#a9dda4 0 29%,transparent 30%),linear-gradient(#c5ebff,#e9f8ff 76%);box-shadow:inset 0 0 0 3px #a5d5e5,0 9px 0 #abd4de,0 16px 25px #173b5522}
.activity-stage>div{max-width:100%}
.activity-stage .giant{display:inline-grid;place-items:center;min-width:154px;min-height:154px;margin:0 auto 5px;padding:7px 18px;border:7px solid #fff;border-radius:31px;background:linear-gradient(145deg,var(--toy),var(--toy-dark));box-shadow:inset 0 5px 0 #ffffff70,0 11px 0 #173b5535,0 17px 21px #173b5530;color:#fff;font:900 clamp(75px,9vw,112px)/1 'Trebuchet MS','DM Sans',sans-serif;text-shadow:0 4px 0 #173b5540;transform:rotate(-3deg)}
.activity-stage .icon{font-size:clamp(75px,8vw,105px);filter:drop-shadow(0 8px 2px #173b5530);animation:toy-bob 2.4s ease-in-out infinite alternate}
.activity-stage .subgiant{display:inline-block;margin:8px auto 0;padding:9px 18px;border:3px solid #fff;border-radius:99px;background:#fff9;box-shadow:0 5px 0 #9dc7d366;color:#173b55;font:900 clamp(20px,2.5vw,28px) 'Trebuchet MS','DM Sans',sans-serif}
.activity-controls{align-items:stretch;gap:17px}.activity-controls h3{margin:0;color:#2e6373;font:900 17px 'Trebuchet MS','DM Sans',sans-serif;letter-spacing:0;text-transform:none}
.activity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.toy-letter-tray,.toy-number-tray{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{display:grid;place-items:center;min-width:0;min-height:75px;padding:8px 5px;border:4px solid #fff;border-radius:20px;background:#f0839b;box-shadow:inset 0 4px 0 #ffffff68,0 8px 0 #b45371,0 13px 15px #173b5525;color:#fff;font:900 33px 'Trebuchet MS','DM Sans',sans-serif;text-shadow:0 2px 0 #173b5540;transition:transform .15s,box-shadow .15s}
.tile:nth-child(5n+2){background:#70b7df;box-shadow:inset 0 4px 0 #ffffff68,0 8px 0 #4385b2,0 13px 15px #173b5525}.tile:nth-child(5n+3){background:#e5bb5e;box-shadow:inset 0 4px 0 #ffffff68,0 8px 0 #b88a33,0 13px 15px #173b5525}.tile:nth-child(5n+4){background:#83c995;box-shadow:inset 0 4px 0 #ffffff68,0 8px 0 #579c72,0 13px 15px #173b5525}.tile:nth-child(5n+5){background:#a195d8;box-shadow:inset 0 4px 0 #ffffff68,0 8px 0 #7869b2,0 13px 15px #173b5525}
.tile small{font-size:15px;line-height:1}.tile[aria-pressed="true"]{outline:4px solid #173b55;outline-offset:2px;transform:translateY(4px);box-shadow:inset 0 4px 0 #ffffff68,0 3px 0 #173b5569}
.tile:hover,.answer-button:hover{transform:translateY(-4px)}.tile:active,.answer-button:active{transform:translateY(4px)}
.activity-buttons{gap:10px}.utility-button{min-height:47px;padding:10px 14px;border:3px solid #fff;border-radius:99px;background:#fff;box-shadow:0 5px 0 #aac9d3;color:#21465e;font:900 14px 'Trebuchet MS','DM Sans',sans-serif}.utility-button:hover{background:#fff9d8}
.answer-button{min-width:112px;min-height:112px;border:5px solid #fff;border-radius:26px;background:linear-gradient(145deg,#ffb3c5,#f5899d);box-shadow:inset 0 5px 0 #ffffff78,0 9px 0 #c9627c,0 16px 18px #173b552c;color:#173b55;font:900 45px 'Trebuchet MS','DM Sans',sans-serif;transition:transform .15s}
.answer-button:nth-child(3n+2){background:linear-gradient(145deg,#a6dcf5,#75bde1);box-shadow:inset 0 5px 0 #ffffff78,0 9px 0 #5b99c1,0 16px 18px #173b552c}.answer-button:nth-child(3n+3){background:linear-gradient(145deg,#ffdf9c,#f1ba67);box-shadow:inset 0 5px 0 #ffffff78,0 9px 0 #c69552,0 16px 18px #173b552c}
.activity-feedback{position:relative;z-index:2;margin-top:25px;font:900 21px 'Trebuchet MS','DM Sans',sans-serif}.activity-feedback.good{color:#176d52}.activity-feedback.try{color:#a04f40}
.tap-items{gap:15px}.tap-item{width:78px;height:78px;border:5px solid #fff;border-radius:25px;background:#fff6db;box-shadow:0 7px 0 #d3ad68,0 12px 17px #173b5529;font-size:43px}.tap-item.is-counted{opacity:.55;transform:scale(.86) rotate(-8deg);box-shadow:0 2px 0 #9abb9b;background:#d5f0d9}
.swatch-tile{min-height:94px;background:#fff!important;box-shadow:0 7px 0 #a9cbd8,0 13px 16px #173b5522!important;color:#173b55;text-shadow:none;font-size:15px}.swatch-tile .color-chip{width:55px;height:55px;border:4px solid #fff;box-shadow:0 4px 0 #173b5526}
.answer-button.color-answer{min-width:118px;min-height:130px;background:#fff!important;box-shadow:0 8px 0 #a9cbd8,0 15px 20px #173b552a!important}.answer-button.color-answer .color-chip{width:75px;height:75px;border:5px solid #fff}
.answer-button.shape-answer{min-width:124px;min-height:145px;font-size:17px}.shape-answer .shape-mark{margin:0 auto 8px}
.shape-mark{background:#f09174}.shape-mark.is-circle,.shape-mark.is-oval{background:#69bfbb}.shape-mark.is-triangle,.shape-mark.is-diamond{background:#edaa67}.shape-mark.is-square,.shape-mark.is-rectangle{background:#8d98db}.shape-mark.is-star,.shape-mark.is-heart{background:#e68dac}
.trace-board{height:340px;border:10px solid #f3bb73;border-radius:27px;background:radial-gradient(circle at 85% 17%,#ffffff24,transparent 28%),#286e77;box-shadow:inset 0 0 0 4px #ffe6ac,0 10px 0 #b67f4c,0 17px 20px #173b5528}.trace-guide{color:#ffffff4f}
.number-build strong{display:grid;place-items:center;min-width:120px;height:120px;border:6px solid #fff;border-radius:25px;background:#fff9;color:#173b55;font:900 84px 'Trebuchet MS','DM Sans',sans-serif}.number-build button{width:80px;height:80px;font-size:48px}
.mix-slots i{border:5px solid #fff;background:#fff9;box-shadow:0 7px 0 #173b5523}.mix-result{border:5px solid #fff;background:#fff9;box-shadow:0 7px 0 #173b5523;color:#173b55;text-shadow:0 1px 0 #fff9}
.pattern-line .shape-mark{filter:drop-shadow(0 7px 3px #173b553a)}.pattern-blank{border:5px dashed #77adba;border-radius:21px;background:#fff9;color:#2d7283}
@keyframes toy-bob{to{transform:translateY(-8px) rotate(4deg)}}
html[data-theme="dark"] .learning-subject{background:radial-gradient(circle at 7% 41%,#254d684d,transparent 25%),var(--paper)}
html[data-theme="dark"] .activity{border-color:#5e8baa;background:radial-gradient(circle at 93% 12%,#ffffff16 0 6%,transparent 6.5%),linear-gradient(145deg,#1a4263,#173350 68%,#25445a);box-shadow:0 12px 0 #081d31,0 25px 40px #0008;color:#f4f8fc}
html[data-theme="dark"] .activity h2,html[data-theme="dark"] .activity p,html[data-theme="dark"] .activity-controls h3{color:#f4f8fc}
html[data-theme="dark"] .mode-button{border-color:#6d99b2;background:linear-gradient(#264d6b,#1a3d59);color:#f4f8fc;box-shadow:0 7px 0 #082139}
html[data-theme="dark"] .mode-button[aria-pressed="true"]{border-color:#fff;background:linear-gradient(#fff4bd,var(--toy-soft));color:#173b55;box-shadow:0 7px 0 var(--toy-dark)}
html[data-theme="dark"] .activity-feedback.good{color:#afe9c2}html[data-theme="dark"] .activity-feedback.try{color:#ffd0b4}
@media(max-width:850px){.activity-row{grid-template-columns:1fr}.activity-controls{padding-top:8px}.activity-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:590px){.subject-modes{gap:6px}.mode-button{min-height:60px;padding:8px 5px;border-width:3px;border-radius:17px;font-size:13px}.activity{padding:20px;border-radius:28px}.activity h2{font-size:36px}.activity p{font-size:15px}.activity-stage{min-height:300px}.activity-stage .giant{min-width:125px;min-height:125px;font-size:79px}.toy-letter-tray,.toy-number-tray{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{min-height:68px;font-size:29px}.answer-button{min-width:85px;min-height:92px;font-size:35px}.activity-buttons{justify-content:center}.activity-controls h3{text-align:center}}

/* Little Sprouts bright illustrated toy world. Generated art matches the hero characters. */
.learning-site{--play-blue:#075dc6;--play-yellow:#ffdb22;--play-red:#ed3839;--play-green:#35a942;--play-ink:#102f50;--paper:#f8fbff;--ink:#102f50;--muted:#315875}
.learning-subject{--toy:var(--play-blue);--toy-dark:#084184;--toy-soft:#fff;background:#f8fbff}
.learning-subject[data-learning-topic="abc"]{--toy:var(--play-red);--toy-dark:#9c1e2d;--toy-soft:#fff}
.learning-subject[data-learning-topic="numbers"]{--toy:#ffa611;--toy-dark:#b45509;--toy-soft:#fff}
.learning-subject[data-learning-topic="colors"]{--toy:var(--play-green);--toy-dark:#16713b;--toy-soft:#fff}
.learning-subject[data-learning-topic="shapes"]{--toy:#7850d5;--toy-dark:#4e2c98;--toy-soft:#fff}
.subject-top,.subject-numbers,.subject-colors,.subject-shapes{background:linear-gradient(90deg,#073772ec 0%,#0756aece 48%,#0564a827 100%),url('play-garden.webp') center 43%/cover;color:#fff}
.subject-title h1,.subject-title p,.subject-top .learning-back{color:#fff;text-shadow:0 2px 8px #06285588}
.subject-top .learning-eyebrow{color:#ffef8a}
.subject-symbol{border:4px solid #fff;background:#ffca18;color:#123c64;box-shadow:0 7px 0 #063c70}
.subject-guide{background:#fff;color:#123d62}
.subject-voice{background:#ec343e;border:3px solid #fff;box-shadow:0 4px 0 #a51b2f;color:#fff}
.subject-voice:hover{background:#bf1f2b}
.subject-modes{justify-content:center;gap:10px;margin:0 0 25px}
.mode-button,.mode-button[aria-pressed="true"],.utility-button{border:0;border-radius:999px;background:transparent url('toy-pill.webp') center/100% 100% no-repeat;box-shadow:none;color:#fff;text-shadow:0 2px 2px #07376c;min-height:68px;padding:14px 29px}
.mode-button[aria-pressed="true"]{filter:drop-shadow(0 0 6px #ffe14b);transform:translateY(-3px)}
.mode-button:hover,.utility-button:hover{background:transparent url('toy-pill.webp') center/100% 100% no-repeat;filter:brightness(1.08);transform:translateY(-3px)}
.utility-button{min-height:51px;padding:10px 24px;font-size:14px}
.activity{border:6px solid #075bc0;background:#fff;box-shadow:0 12px 0 #063c84,0 24px 34px #0b2b4c29;color:#113a5c}
.activity:before{display:none}
.activity h2{color:#103453}
.activity p{color:#315674}
.toy-sticker,.round-count{border:3px solid #fff;background:var(--toy);color:#fff;box-shadow:0 4px 0 var(--toy-dark)}
.activity-stage{position:relative;min-height:390px;padding:24px 155px 24px 24px;border:6px solid #fff;background:#69bff4 url('play-garden.webp') center/cover no-repeat;box-shadow:inset 0 0 0 4px #0b75bd,0 9px 0 #1f7fa9,0 17px 25px #123d562b}
.activity-stage>div:not(.activity-guide){position:relative;z-index:1}
.activity-stage .giant,.tile:not(.swatch-tile):not(.shape-tray .tile),.answer-button:not(.color-answer):not(.shape-answer){border:0;border-radius:18px;background:transparent url('toy-square.webp') center/100% 100% no-repeat;box-shadow:none;color:#113b63;text-shadow:none}
.activity-stage .giant{min-width:137px;min-height:137px;margin:0 auto 5px;padding:22px;font-size:92px;transform:rotate(-3deg)}
.tile:not(.swatch-tile):not(.shape-tray .tile){min-height:89px;min-width:74px;padding:15px 5px;font-size:38px}
.tile small{font-size:16px}
.tile[aria-pressed="true"],.answer-button:focus-visible{outline:4px solid #ef3d42;outline-offset:2px;filter:drop-shadow(0 0 8px #ffdf3e)}
.answer-button:not(.color-answer):not(.shape-answer){min-width:115px;min-height:112px;padding:16px;font-size:49px}
.activity-controls h3{color:#064da2;font-size:19px}
.object-sprite{display:block;width:180px;height:180px;background-size:300% 300%;background-repeat:no-repeat;background-color:#fff;border-radius:22px;box-shadow:0 7px 0 #145a9780}
.stage-object{margin:4px auto 2px;width:175px;height:175px}
.quiz-object{width:240px;height:240px}
.practice-object{width:180px;height:180px;align-self:center}
.paint-sprite{display:block;width:88px;height:88px;background-size:400% 200%;background-repeat:no-repeat;background-color:#fff;border-radius:16px}
.paint-sprite.stage-paint{width:240px;height:240px;margin:auto;border:6px solid #fff;box-shadow:0 10px 0 #0b57a4}
.shape-mark{display:block;width:110px;height:110px;background-size:400% 200%;background-repeat:no-repeat;background-color:#fff;border-radius:15px;clip-path:none;filter:none;box-shadow:0 5px 0 #1c74a377}
.shape-big,.shape-big.is-rectangle{width:230px;height:230px;margin:auto;border:6px solid #fff;box-shadow:0 10px 0 #0a5eaa}
.shape-button{width:89px;height:89px;margin:auto;box-shadow:none}
.paint-tray .tile,.shape-tray .tile,.answer-button.color-answer,.answer-button.shape-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:110px;min-height:120px;padding:9px;border:4px solid #075dc6;border-radius:22px;background:#fff;box-shadow:0 8px 0 #084182;color:#13395a;font-size:16px}
.paint-tray .tile{min-width:100px}
.paint-tray .tile .paint-sprite{width:72px;height:72px}
.answer-button.color-answer .paint-sprite{width:115px;height:115px}
.answer-button.shape-answer .shape-mark{width:98px;height:98px;margin:0}
.activity-stage .subgiant{background:#fff;border:3px solid #0c69b3;box-shadow:0 5px 0 #064990;color:#123755}
.number-stars{display:flex;flex-wrap:wrap;justify-content:center;max-width:350px;gap:2px;margin:8px auto}
.number-stars .shape-mark{width:49px;height:49px;box-shadow:none}
.tap-item{width:91px;height:91px;padding:4px;border:4px solid #0d67bd;border-radius:20px;background:#fff;box-shadow:0 6px 0 #06478b}
.tap-item .object-sprite{width:76px;height:76px;box-shadow:none;border-radius:12px}
.tap-item.is-counted{opacity:.55;background:#fff;transform:scale(.9)}
.pattern-line .shape-mark,.pattern-line .shape-mark.is-rectangle{width:92px;height:92px;border:3px solid #fff;box-shadow:0 5px 0 #115a9b}
.pattern-blank{border-color:#075dc6;background:#fff;color:#075dc6}
.activity-guide{position:absolute;right:9px;bottom:4px;z-index:3;width:142px;pointer-events:none;animation:friend-welcome 2.5s ease-in-out infinite alternate}
.activity-guide img{display:block;width:100%;height:170px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 5px #0e4d8055)}
.guide-bubble{position:absolute;right:2px;top:-43px;display:block;min-width:125px;padding:9px 12px;border:3px solid #0761b0;border-radius:18px 18px 2px 18px;background:#fff;color:#123e66;font-size:13px;font-weight:900;line-height:1.2;box-shadow:0 4px 0 #08427d}
.activity-controls{position:relative}
.activity-controls>.activity-guide{position:relative;right:auto;bottom:auto;align-self:center;width:130px;margin-top:10px}
.activity-controls>.utility-button{align-self:flex-start;min-width:200px;max-width:245px}
.trace-board{border:6px solid #0d60b6;background:#fff;box-shadow:0 8px 0 #063e7c}
.trace-guide{color:#0b64ac36}
.number-build .tile{width:90px;height:90px;font-size:51px}
.mix-slots i,.mix-result{border:5px solid #0e62ae;background:#fff;color:#133b63}
.mix-slots i{width:138px;height:138px;border-radius:22px;font-style:normal;box-shadow:0 7px 0 #094b8e}
.mix-slots .paint-sprite{width:120px;height:120px}
.mix-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:185px;max-width:230px;margin:15px auto 0;border-radius:22px;box-shadow:0 8px 0 #084887}
.mix-result .paint-sprite{width:118px;height:118px}
.mix-result strong{font-size:25px}
.mix-result small{font-size:12px;font-weight:800}
.mix-result:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 0 #084887}
.subject-neighbor-links a{border:3px solid #0b5bb7;background:#fff;box-shadow:0 4px 0 #084080}
.learning-plaques .learning-plaque{border:5px solid #fff;background:linear-gradient(90deg,#0a4f9bdd 0%,#0b61a270 56%,#0000 100%),url('play-garden.webp') center/cover;box-shadow:0 9px 0 #063e83,0 17px 28px #12345331;color:#fff}
.learning-plaques .learning-plaque:before{border-color:#ffffff80}
.learning-plaques .plaque-copy small,.learning-plaques .plaque-copy em{color:#fff;text-shadow:0 2px 3px #123a63}
.learning-plaques .plaque-copy b{background:#ffdb22;color:#173c5e;box-shadow:0 4px 0 #b36a11}
.learning-plaques .plaque-label{background:#ffdb22;color:#123b62;border:4px solid #fff;box-shadow:0 5px 0 #af6709}
html[data-theme="dark"] .learning-subject{background:#091b31}
html[data-theme="dark"] .subject-top{background:linear-gradient(90deg,#061d3ff2 0%,#073a74d9 52%,#064f8344 100%),url('play-garden.webp') center/cover}
html[data-theme="dark"] .activity{background:#102e4d;border-color:#3d83c1;color:#fff;box-shadow:0 12px 0 #071a31,0 24px 35px #0007}
html[data-theme="dark"] .activity h2,html[data-theme="dark"] .activity p,html[data-theme="dark"] .activity-controls h3{color:#fff}
html[data-theme="dark"] .activity-stage{border-color:#9bd4ff}
html[data-theme="dark"] .mode-button,html[data-theme="dark"] .mode-button[aria-pressed="true"],html[data-theme="dark"] .utility-button{background:transparent url('toy-pill.webp') center/100% 100% no-repeat;border:0;color:#fff;box-shadow:none}
html[data-theme="dark"] .learning-plaques .learning-plaque{border-color:#5c9cca}
@media(max-width:850px){.activity-stage{padding-right:150px}.subject-top{background-position:center}.learning-plaques .learning-plaque{background-position:center}}
@media(max-width:590px){.subject-title h1{font-size:55px}.subject-top{background:linear-gradient(90deg,#073772e8,#0756ae9a),url('play-garden.webp') center/cover}.mode-button{min-height:63px;padding:7px 9px;font-size:13px}.activity{padding:18px}.activity-stage{min-height:390px;padding:20px 16px 155px}.activity-guide{width:102px;right:3px;bottom:0}.activity-guide img{height:126px}.guide-bubble{top:-37px;min-width:100px;font-size:11px}.activity-stage .giant{width:120px;min-width:120px;min-height:120px;font-size:67px}.object-sprite.stage-object{width:135px;height:135px}.quiz-object{width:155px;height:155px}.paint-sprite.stage-paint,.shape-big{width:170px;height:170px}.shape-tray .tile,.paint-tray .tile{min-width:0;min-height:103px}.shape-button{width:70px;height:70px}.paint-tray .tile .paint-sprite{width:64px;height:64px}.number-stars{max-width:270px}.number-stars .shape-mark{width:37px;height:37px}.activity-controls>.activity-guide{width:100px}.tap-item{width:68px;height:68px}.tap-item .object-sprite{width:57px;height:57px}.activity-buttons{gap:6px}.utility-button{min-height:46px;padding:8px 17px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.activity-stage .icon{animation:none}}
.shape-explain{display:block;max-width:310px;margin:10px auto 0;padding:8px 13px;border:3px solid #075dc6;border-radius:17px;background:#fff;color:#123755;font:800 15px/1.3 'Trebuchet MS','DM Sans',sans-serif;box-shadow:0 5px 0 #084182}
.shape-clue{display:flex;align-items:center;gap:12px;padding:10px;border:4px solid #075dc6;border-radius:20px;background:#ffdc39;box-shadow:0 7px 0 #084182;color:#123755}
.shape-clue .shape-example{flex:none;width:76px;height:76px;border:3px solid #fff;border-radius:14px;box-shadow:0 4px 0 #084182}
.shape-clue img.shape-example{display:block;object-fit:contain}
.shape-clue strong,.shape-clue small{display:block;font-family:'Trebuchet MS','DM Sans',sans-serif}.shape-clue strong{font-size:15px;line-height:1.25}.shape-clue small{margin-top:5px;font-size:12px;line-height:1.3}
@media(max-width:590px){.shape-explain{max-width:230px;font-size:13px}.shape-clue .shape-example{width:64px;height:64px}}
.subject-symbol{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:177px;height:80px;margin-right:14px;padding:8px 10px;border:5px solid #ffd329;border-radius:23px;background:linear-gradient(145deg,#1588f6,#0758b9);box-shadow:inset 0 3px 0 #ffffff6b,0 7px 0 #073875,0 13px 14px #001b3c55;letter-spacing:0;vertical-align:middle}
.subject-mini-block{display:grid;place-items:center;width:49px;height:54px;background:transparent url('toy-square.webp') center/100% 100% no-repeat;color:#113b63;font:900 32px/1 'Trebuchet MS','DM Sans',sans-serif;text-shadow:none;transform:rotate(-4deg)}
.subject-mini-block:nth-child(2){transform:rotate(3deg)}.subject-mini-block:nth-child(3){transform:rotate(-2deg)}
.subject-mini-sprite{display:block;flex:none;width:49px;height:54px;background-repeat:no-repeat;background-color:#fff;border:2px solid #fff;border-radius:13px;box-shadow:0 3px 0 #053b82}
.subject-mini-paint{background-image:url('paint-pots.webp');background-size:400% 200%}.subject-mini-shape{background-image:url('shape-pieces.webp');background-size:400% 200%}
.subject-mini-0{background-position:0% 0%}.subject-mini-1{background-position:33.333% 0%}.subject-mini-2{background-position:66.667% 0%}
@media(max-width:590px){.subject-symbol{min-width:130px;height:65px;margin-right:6px;padding:7px;gap:2px;border-width:4px;border-radius:18px}.subject-mini-block,.subject-mini-sprite{width:37px;height:42px}.subject-mini-block{font-size:23px}.subject-title h1{font-size:clamp(44px,8.8vw,58px)}}
.subject-neighbor-links a,html[data-theme="dark"] .subject-neighbor-links a{background:#fff;color:#123755;border-color:#0b5bb7}
.subject-neighbor-links a:hover,.subject-neighbor-links a:focus-visible{background:#ffdf39;color:#123755}
/* Small subject marks sit directly on the garden header like the larger toy art. */
.subject-symbol{gap:5px;min-width:0;height:73px;padding:7px 9px;border:3px solid #9edfff;border-radius:19px;background:#064e9d;box-shadow:inset 0 2px 0 #ffffff54,0 6px 0 #003a7a,0 11px 13px #001b3c55}
.subject-mini-block{width:48px;height:50px;border:2px solid #fff8;border-radius:13px;background:#ee6e52;box-shadow:inset 0 3px 0 #ffffff75,0 4px 0 #a22d31;color:#fff;text-shadow:0 2px 1px #20406399}
.subject-mini-block:nth-child(2){background:#4dbb72;box-shadow:inset 0 3px 0 #ffffff75,0 4px 0 #1b7b48}
.subject-mini-block:nth-child(3){background:#8b6ddd;box-shadow:inset 0 3px 0 #ffffff75,0 4px 0 #5435a3}
.subject-mini-sprite{width:52px;height:54px;border:0;border-radius:0;background-color:transparent;box-shadow:none;filter:drop-shadow(0 3px 2px #001d45a6)}
.subject-mini-paint{clip-path:polygon(11% 2%,89% 2%,97% 24%,85% 95%,15% 95%,3% 24%)}
.subject-mini-shape.subject-mini-0{clip-path:circle(44% at 50% 48%)}
.subject-mini-shape.subject-mini-1{clip-path:polygon(50% 4%,95% 95%,5% 95%)}
.subject-mini-shape.subject-mini-2{clip-path:inset(7% 7% 7% 7% round 10%)}
@media(max-width:590px){.subject-symbol{height:60px;padding:5px;gap:3px;border-width:3px}.subject-mini-block,.subject-mini-sprite{width:38px;height:41px}.subject-mini-block{font-size:23px}}
.subject-symbol-art{display:inline-block;width:220px;height:88px;margin:-11px 7px -14px 0;object-fit:cover;object-position:center;vertical-align:middle;filter:drop-shadow(0 5px 4px #001b3b9c)}
@media(max-width:590px){.subject-symbol-art{width:145px;height:62px;margin:-5px 3px -8px 0}}
/* The activity art is now genuinely transparent, so it sits in the garden scene. */
.object-sprite,.paint-sprite,.shape-mark{background-color:transparent!important;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 4px #082e5266)}
.shape-big,.shape-big.is-rectangle,.paint-sprite.stage-paint{border:0;box-shadow:none}
.pattern-line .shape-mark,.pattern-line .shape-mark.is-rectangle,.shape-clue .shape-example{border:0;box-shadow:none}
.number-stars .shape-mark{filter:drop-shadow(0 2px 2px #082e5244)}
.number-objects{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;max-width:350px;min-height:64px;margin:9px auto}
.number-objects .number-object{width:52px;height:52px;filter:drop-shadow(0 3px 2px #082e5255)}
.number-objects.is-few .number-object{width:88px;height:88px}
@media(max-width:590px){.number-objects{max-width:255px;gap:2px}.number-objects .number-object{width:38px;height:38px}.number-objects.is-few .number-object{width:61px;height:61px}}
.learning-plaques .plaque-badge-art{position:absolute;z-index:2;top:17px;left:20px;width:170px;height:88px;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 4px #071f46a8)}
@media(max-width:590px){.learning-plaques .plaque-badge-art{top:14px;left:16px;width:138px;height:72px}}
.tap-item,.tap-item.is-counted{border:0;background:transparent;box-shadow:none}
.color-reveal-stage{position:relative;width:240px;height:240px;margin:0 auto;isolation:isolate}
.color-reveal-stage .stage-paint,.color-example-sprite{position:absolute;inset:0;width:100%;height:100%;margin:0;transition:opacity .42s ease,transform .58s cubic-bezier(.2,.8,.2,1)}
.color-reveal-stage .stage-paint{z-index:1;opacity:1;transform:scale(1) rotate(0)}
.color-example-sprite{display:block;z-index:2;opacity:0;transform:scale(.55) rotate(-8deg);background-image:url('color-examples-v1.png');background-size:400% 200%;background-repeat:no-repeat;filter:drop-shadow(0 12px 8px #093a5680)}
.color-example-sprite.is-blue-ball{background-image:url('blue-ball-v1.png');background-position:center!important;background-size:contain}
.color-reveal-stage.is-revealed .stage-paint{opacity:0;transform:scale(.35) rotate(-15deg)}
.color-reveal-stage.is-revealed .color-example-sprite{opacity:1;transform:scale(1) rotate(0)}
.color-reveal-caption{max-width:300px;line-height:1.2}
@media(max-width:590px){.color-reveal-stage{width:170px;height:170px}}
@media(prefers-reduced-motion:reduce){.color-reveal-stage .stage-paint,.color-example-sprite{transition:none}}
.tap-item:focus-visible{outline:4px solid #ffdb29;outline-offset:2px}
.paint-tray .tile,.shape-tray .tile,.answer-button.color-answer,.answer-button.shape-answer{background:linear-gradient(145deg,#127de1,#0751aa);color:#fff}
.subject-mini-paint{background-image:url('paint-pots-cutout.png')}.subject-mini-shape{background-image:url('shape-pieces-cutout.png')}