:root{--first-blue:#5b7cfa;--first-ink:#1f315f;--first-muted:#58677d;--first-line:#dfe6fb;--first-yellow:#ffd96a;--first-green:#50b987;--first-pink:#ef76ad;--first-orange:#f39b54}
.primero-page{background:radial-gradient(900px 520px at 12% -8%,#e9f2ff 0,transparent 62%),radial-gradient(900px 520px at 100% 5%,#fff2cc 0,transparent 58%),#f8faff}
.primero-shell{width:min(calc(100% - 28px),1120px);margin:0 auto;padding:1rem 0 5rem}
.primero-shell [hidden]{display:none!important}.primero-shell h1,.primero-shell h2,.primero-shell h3{color:var(--first-ink);line-height:1.16}.primero-shell button{font:inherit}
.primero-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);align-items:center;gap:1.3rem;border:1px solid var(--first-line);border-radius:30px;background:linear-gradient(135deg,#fff,#f2f6ff 55%,#fff8db);padding:clamp(1.35rem,4vw,3rem);box-shadow:0 18px 45px rgba(39,62,126,.12)}
.primero-kicker,.eyebrow{margin:0 0 .4rem;color:#4966c6;font-size:.85rem;font-weight:950;letter-spacing:.07em;text-transform:uppercase}.primero-hero h1{max-width:760px;margin:.2rem 0 .8rem;font-size:clamp(2rem,6vw,3.8rem)}.primero-hero p{max-width:720px;margin:0;color:var(--first-muted);font-size:clamp(1rem,2vw,1.15rem)}
.hero-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.hero-pills span{border:1px solid #d9e2fb;border-radius:999px;background:#fff;padding:.42rem .7rem;color:#35476d;font-size:.87rem;font-weight:850}.hero-scene{position:relative;display:grid;min-height:220px;place-items:center;border-radius:28px;background:radial-gradient(circle,#fff 0 30%,#e9f1ff 31% 58%,transparent 59%);font-size:clamp(4rem,11vw,7.5rem)}.hero-scene span:nth-child(2),.hero-scene span:nth-child(3){position:absolute;font-size:clamp(2rem,5vw,3.6rem);animation:firstFloat 3s ease-in-out infinite}.hero-scene span:nth-child(2){left:8%;bottom:10%}.hero-scene span:nth-child(3){right:8%;top:10%;animation-delay:-1.2s}@keyframes firstFloat{50%{transform:translateY(-9px) rotate(4deg)}}
.progress-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.1rem 0 2.2rem;border:1px solid var(--first-line);border-radius:22px;background:#fff;padding:1rem 1.2rem;box-shadow:0 8px 24px rgba(40,60,120,.08)}.progress-card h2{margin:0;font-size:1.15rem}.progress-summary{display:grid;grid-template-columns:auto auto auto auto;align-items:baseline;gap:.25rem .5rem;color:var(--first-muted)}.progress-summary strong{color:#334ea7;font-size:1.45rem}.progress-summary span{margin-right:.6rem;font-size:.84rem}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1.4rem 0 .8rem}.section-heading h2{margin:0;font-size:clamp(1.5rem,4vw,2rem)}
.subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.subject-card,.unit-card{position:relative;overflow:hidden;border:1px solid var(--first-line);border-radius:22px;background:#fff;padding:1.1rem;text-align:left;box-shadow:0 8px 22px rgba(40,60,120,.08)}.subject-card{min-height:190px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.subject-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(40,60,120,.14)}.subject-card::after{position:absolute;right:-24px;bottom:-34px;width:110px;height:110px;border-radius:50%;background:var(--subject-soft);content:""}.subject-card__icon{position:relative;z-index:1;display:grid;width:58px;height:58px;place-items:center;border-radius:18px;background:var(--subject-soft);font-size:2rem}.subject-card h3{position:relative;z-index:1;margin:.8rem 0 .35rem;font-size:1.25rem}.subject-card p{position:relative;z-index:1;margin:0;color:var(--first-muted)}.subject-card small{position:relative;z-index:1;display:block;margin-top:.7rem;color:var(--subject-color);font-weight:900}
.family-note{display:flex;align-items:center;gap:1rem;margin-top:2rem;border:1px solid #e9dfbb;border-radius:22px;background:#fffaf0;padding:1rem 1.2rem}.family-note>span{font-size:2.4rem}.family-note h2{margin:0 0 .2rem;font-size:1.1rem}.family-note p{margin:0;color:var(--first-muted)}
.primary-button,.soft-button,.back-button,.exit-button,.listen-button{min-height:48px;border-radius:14px;padding:.65rem 1rem;font-weight:900;cursor:pointer}.primary-button{border:0;background:linear-gradient(135deg,#5b7cfa,#6e8cff);color:#fff;box-shadow:0 7px 18px rgba(91,124,250,.28)}.soft-button,.back-button,.exit-button,.listen-button{border:1px solid #d6def7;background:#fff;color:#3555c7}.back-button{margin:.35rem 0 1rem}.exit-button{min-height:44px}.listen-button{min-height:42px;padding:.45rem .7rem;font-size:.9rem}.primary-button:hover,.soft-button:hover,.back-button:hover,.listen-button:hover{transform:translateY(-1px)}
.subject-hero{display:flex;align-items:center;gap:1rem;border:1px solid var(--first-line);border-radius:24px;background:linear-gradient(135deg,#fff,var(--subject-soft));padding:1.2rem}.subject-hero__icon{display:grid;width:78px;height:78px;flex:0 0 auto;place-items:center;border-radius:22px;background:#fff;font-size:2.7rem;box-shadow:0 7px 20px rgba(40,60,120,.1)}.subject-hero h1{margin:0;font-size:clamp(1.8rem,5vw,2.8rem)}.subject-hero p:last-child{margin:.35rem 0 0;color:var(--first-muted)}
.unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.unit-card{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.85rem}.unit-card__visual{display:grid;width:62px;height:62px;place-items:center;border-radius:18px;background:var(--subject-soft);font-size:2rem}.unit-card h3{margin:.1rem 0 .35rem}.unit-card p{margin:0;color:var(--first-muted);font-size:.94rem}.unit-card__progress{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0fa;padding-top:.7rem;color:#6a7690;font-size:.86rem}.unit-card__actions{grid-column:1/-1;display:flex;gap:.55rem}.unit-card__actions button{flex:1;min-height:44px;border-radius:12px;font-weight:900;cursor:pointer}.learn-unit{border:1px solid #d7def6;background:#fff;color:#3555c7}.play-unit{border:0;background:var(--subject-color);color:#fff}
.learn-card{max-width:820px;margin:0 auto;border:1px solid var(--first-line);border-radius:28px;background:#fff;padding:clamp(1.2rem,4vw,2.4rem);box-shadow:0 16px 42px rgba(40,60,120,.12)}.learn-visual{display:grid;min-height:170px;place-items:center;border-radius:24px;background:linear-gradient(135deg,var(--subject-soft),#fff);font-size:clamp(4rem,12vw,7rem);letter-spacing:.15em}.learn-card h1{margin:.3rem 0 .7rem;font-size:clamp(2rem,5vw,3rem)}.learn-summary{color:var(--first-muted);font-size:1.08rem}.learn-facts{display:grid;gap:.6rem;margin:1rem 0}.learn-fact{display:flex;gap:.7rem;border:1px solid var(--first-line);border-radius:16px;background:#fbfcff;padding:.8rem}.learn-fact span{display:grid;width:30px;height:30px;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--subject-soft);font-weight:950}.learn-fact p{margin:0}.coco-tip{border-radius:16px;background:#fff8de;padding:.8rem 1rem;color:#54451c}.learn-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.game-header h1{margin:0;font-size:clamp(1.55rem,4vw,2.1rem)}.game-progress{height:12px;margin:1rem 0 .5rem;overflow:hidden;border-radius:999px;background:#e8ecf8}.game-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5b7cfa,#55c79b);transition:width .3s ease}.game-meta{display:flex;justify-content:space-between;color:#55627b;font-weight:850}.question-card{max-width:860px;margin:1rem auto;border:1px solid var(--first-line);border-radius:28px;background:#fff;padding:clamp(1rem,4vw,2rem);box-shadow:0 15px 40px rgba(40,60,120,.12)}.question-visual{display:grid;min-height:125px;place-items:center;border-radius:22px;background:linear-gradient(135deg,var(--subject-soft),#fff);font-size:clamp(2.8rem,10vw,5.8rem);letter-spacing:.12em;text-align:center}.question-top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1rem}.question-instruction{margin:0;color:var(--subject-color);font-size:.85rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.question-card h2{margin:.55rem 0 1rem;font-size:clamp(1.35rem,4vw,2rem)}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.option-button{position:relative;min-height:72px;border:2px solid #dbe2f8;border-radius:17px;background:#fff;color:#25365d;padding:.75rem 1rem;font-size:1.05rem;font-weight:900;text-align:left;cursor:pointer}.option-button::before{display:inline-grid;width:30px;height:30px;margin-right:.55rem;place-items:center;border-radius:9px;background:#eef2ff;color:#4966c6;content:attr(data-letter)}.option-button:hover{border-color:#8aa0ef;background:#f8faff}.option-button:disabled{opacity:1;cursor:default}.option-button.is-correct{border-color:#2eaa77;background:#edfbf5;color:#086b4a}.option-button.is-wrong{border-color:#df6a7c;background:#fff1f3;color:#9d2437}.feedback{display:flex;align-items:flex-start;gap:.8rem;margin-top:1rem;border-radius:18px;background:#eafaf3;padding:1rem}.feedback.is-error{background:#fff4df}.feedback>span{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:50%;background:#fff;font-size:1.4rem}.feedback h3{margin:0 0 .2rem}.feedback p{margin:0;color:#48566f}.game-actions{display:flex;justify-content:flex-end;margin-top:1rem}
.reading-passage{margin-top:1rem;border:1px solid #ded7f5;border-radius:18px;background:#faf7ff;padding:1rem;color:#394663}.reading-passage strong{display:block;margin-bottom:.35rem;color:#6d48b7}.reading-passage p{margin:0;line-height:1.7}
.report-card{max-width:760px;margin:1rem auto;border:1px solid var(--first-line);border-radius:30px;background:#fff;padding:clamp(1.2rem,5vw,2.8rem);text-align:center;box-shadow:0 18px 48px rgba(40,60,120,.14)}.report-coco{font-size:4.5rem}.report-card h1{margin:.2rem 0 .6rem;font-size:clamp(2rem,6vw,3.2rem)}.big-stars{color:#f4ae2b;font-size:clamp(2rem,8vw,3.4rem);letter-spacing:.12em}.report-card>p{color:var(--first-muted);font-size:1.08rem}.report-learning{display:grid;gap:.55rem;margin:1rem 0;text-align:left}.report-learning p{margin:0;border-radius:14px;background:#f5f7ff;padding:.75rem}.report-actions{display:flex;justify-content:center;gap:.7rem;margin-top:1.2rem}
@media(max-width:820px){.primero-hero{grid-template-columns:1fr}.hero-scene{min-height:160px}.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-card{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.primero-shell{width:min(calc(100% - 18px),1120px)}.primero-hero{padding:1.1rem;border-radius:22px}.hero-scene{display:none}.subject-grid,.unit-grid,.option-grid{grid-template-columns:1fr}.section-heading{align-items:stretch;flex-direction:column}.section-heading .soft-button{width:100%}.progress-summary{width:100%;grid-template-columns:auto 1fr}.subject-hero{align-items:flex-start;flex-direction:column}.subject-hero__icon{width:62px;height:62px;font-size:2.2rem}.unit-card{grid-template-columns:auto 1fr}.learn-actions,.report-actions{align-items:stretch;flex-direction:column}.question-card{border-radius:22px}.question-top{align-items:flex-start}.listen-button{white-space:nowrap}.option-button{min-height:62px}.family-note{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.hero-scene span,.subject-card{animation:none!important;transition:none!important}}
@media print{.back-button,.learn-actions,.game-actions,.report-actions{display:none!important}}
.subject-hero h2{margin:0;font-size:clamp(1.8rem,5vw,2.8rem)}.learn-card h2{margin:.3rem 0 .7rem;font-size:clamp(2rem,5vw,3rem)}.game-header h2{margin:0;font-size:clamp(1.55rem,4vw,2.1rem)}.report-card h2{margin:.2rem 0 .6rem;font-size:clamp(2rem,6vw,3.2rem)}