.maths-pilot-sidebar.is-espagnol,
.maths-pilot-header[data-course-theme="espagnol"] {
  --subject-dominant: #f6cc24;
  --subject-support: #fff5c8;
  --subject-dominant-text: #29272d;
}

.maths-pilot-sidebar.is-espagnol {
  background: var(--subject-dominant);
  color: var(--subject-dominant-text);
}

.maths-pilot-sidebar.is-espagnol::after {
  background: rgba(255, 255, 255, .24);
}

.maths-pilot-sidebar.is-espagnol nav :is(a, button) {
  color: var(--subject-dominant-text);
}

.maths-pilot-sidebar.is-espagnol nav i {
  background: var(--subject-support);
}

.maths-pilot-sidebar.is-espagnol nav .is-active {
  border-color: rgba(41, 39, 45, .28);
  background: var(--subject-support);
  color: var(--subject-dominant-text);
}

.maths-pilot-sidebar.is-espagnol .maths-pilot-language {
  border-color: rgba(41, 39, 45, .25);
  background: rgba(255, 255, 255, .32);
}

.maths-pilot-sidebar.is-espagnol .maths-pilot-language span.is-active {
  background: #fff;
  color: var(--subject-dominant-text);
}

.maths-pilot-header[data-course-theme="espagnol"] .maths-pilot-topbar > div > span {
  width: fit-content;
  padding: 8px 12px 8px 16px;
  border-left: 6px solid var(--subject-dominant);
  border-radius: 9px 16px 16px 9px;
  background: var(--subject-support);
  color: var(--subject-dominant-text);
}

[data-course-theme="espagnol"][data-course-structure="literal-maths-duplicate"].maths-pilot-course > nav[aria-label="Les cinq étapes de la leçon"] button i {
  background: var(--subject-dominant) !important;
  color: var(--subject-dominant-text) !important;
}

body:has(.maths-pilot-sidebar.is-espagnol) [data-course-theme="espagnol"][data-course-structure="literal-maths-duplicate"].maths-pilot-course > nav[aria-label="Les cinq étapes de la leçon"] button.is-current,
#app:has(.maths-pilot-sidebar.is-espagnol) [data-course-theme="espagnol"][data-course-structure="literal-maths-duplicate"].maths-pilot-course > nav[aria-label="Les cinq étapes de la leçon"] button.is-current,
[data-course-theme="espagnol"][data-course-structure="literal-maths-duplicate"].maths-pilot-course > nav[aria-label="Les cinq étapes de la leçon"] button.is-current {
  background: var(--subject-support) !important;
  color: var(--subject-dominant-text) !important;
}

[data-course-theme="espagnol"][data-course-structure="literal-maths-duplicate"].maths-pilot-course > nav[aria-label="Les cinq étapes de la leçon"] button.is-current i {
  background: var(--subject-dominant) !important;
  color: var(--subject-dominant-text) !important;
}

[data-course-theme="espagnol"][data-spanish-course-03-root] .kid-lesson-welcome__hero {
  background-color: var(--subject-support);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .72) 0 5px, transparent 6px);
  background-size: 42px 42px;
}

[data-course-theme="espagnol"][data-spanish-course-03-root] .kid-lesson-welcome__teacher > span {
  background: var(--subject-dominant);
}

[data-course-theme="espagnol"][data-spanish-course-03-root] :is(
  .kid-lesson-welcome__copy > span,
  .kid-lesson-welcome__goals > span,
  .kid-lesson-welcome__progress header span,
  .kid-step-kicker,
  .kid-step-question span,
  .kid-step-takeaway span,
  .kid-step-lab-copy > span,
  .kid-lab-launch-copy > span,
  .kid-lab-heading > span,
  .kid-lab-answer > span,
  .kid-lab-finish-card > span,
  .kid-cards-heading > span,
  .kid-cards-finish > article > span,
  .family-guide-hero > div > span,
  .family-guide-ready > header > span,
  .family-guide-cheat > header > span,
  .family-guide-session > header > span,
  .family-guide-check > header > span,
  .family-guide-finish > span
) {
  width: fit-content;
  padding: 8px 11px 8px 15px;
  border-left: 5px solid var(--subject-dominant);
  border-radius: 8px 14px 14px 8px;
  background: var(--subject-support);
  color: var(--subject-dominant-text);
}

[data-course-theme="espagnol"][data-spanish-course-03-root] :is(
  .kid-lesson-welcome__copy h1 em,
  .kid-step-copy h1 em,
  .kid-step-lab-copy h1 em,
  .kid-lab-launch-copy h1 em,
  .kid-lab-finish-card h1 em,
  .kid-cards-finish h1 em,
  .kid-summary-heading h1 em,
  .family-guide-hero h1 em,
  .family-guide-finish h2 em
) {
  width: fit-content;
  padding: .04em .11em .1em;
  border-radius: 12px 20px 18px 13px;
  background: var(--subject-dominant);
  color: var(--subject-dominant-text);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-course-theme="espagnol"][data-spanish-course-03-root] :is(
  .kid-lesson-welcome__copy button,
  .kid-step-actions,
  .kid-step-lab-copy button.is-next,
  .kid-lab-launch-copy > button,
  .kid-lab-answer .maths-batch-lab__validate,
  .kid-lab-feedback button,
  .kid-lab-finish-card button.is-next,
  .kid-cards-finish-actions button.is-next,
  .family-guide-actions button:nth-child(2)
) {
  border-color: var(--subject-dominant);
  background: var(--subject-dominant);
  color: var(--subject-dominant-text);
}

[data-course-theme="espagnol"][data-spanish-course-03-root].kid-summary-shell-page :is(
  .kid-summary-heading > div > span,
  .kid-summary-example > div > span,
  .kid-summary-journey > header > span,
  .kid-summary-say span
) {
  width: fit-content;
  padding: 8px 11px 8px 15px;
  border-left: 5px solid var(--subject-dominant);
  border-radius: 8px 14px 14px 8px;
  background: var(--subject-support);
  color: var(--subject-dominant-text);
}

[data-course-theme="espagnol"][data-spanish-course-03-root].kid-summary-shell-page .kid-summary-heading h1 em {
  width: fit-content;
  padding: .04em .11em .1em;
  border-radius: 12px 20px 18px 13px;
  background: var(--subject-dominant);
  color: var(--subject-dominant-text);
}

[data-course-theme="espagnol"][data-spanish-course-03-root].kid-summary-shell-page .kid-summary-journey li > span {
  color: var(--subject-dominant-text);
  text-decoration: underline 5px var(--subject-dominant);
  text-underline-offset: 4px;
}


.spanish3-proof {
  --spanish3-ink: #29272d;
  --spanish3-blue: #2f73d9;
  --spanish3-blue-soft: #e2efff;
  --spanish3-pink: #f35aa5;
  --spanish3-pink-soft: #ffe5f2;
  --spanish3-coral: #fd7666;
  --spanish3-coral-soft: #ffe7e2;
  --spanish3-green: #0fbc53;
  --spanish3-green-soft: #e5f8eb;
  --spanish3-yellow: #f6cc24;
  --spanish3-yellow-soft: #fff5c8;
  box-sizing: border-box;
  display: grid;
  width: min(100%, 900px);
  gap: clamp(20px, 3vw, 34px);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 38px);
  border: 2px solid rgba(41, 39, 45, .16);
  border-radius: 42px 34px 48px 36px;
  background: #fff;
  color: var(--spanish3-ink);
}

.kid-summary-example-visual > .spanish3-proof--exchange {
  width: 100%;
  grid-column: 1 / -1;
}

.spanish3-proof *,
.spanish3-build *,
.spanish3-speak-check * {
  box-sizing: border-box;
}

.spanish3-proof figcaption {
  display: grid;
  gap: 7px;
  text-align: center;
}

.spanish3-proof figcaption span {
  color: var(--spanish3-blue);
  font: 900 12px/1 var(--font-display);
  letter-spacing: .12em;
}

.spanish3-proof figcaption strong {
  font: 900 clamp(20px, 2.4vw, 30px)/1.08 var(--font-display);
}

.spanish3-age-scene {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
}

.spanish3-cake {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  align-content: end;
  padding: 34px 18px 20px;
}

.spanish3-cake > span {
  position: absolute;
  top: 8px;
  left: 50%;
  display: grid;
  width: min(96%, 250px);
  grid-template-columns: repeat(10, minmax(7px, 1fr));
  align-items: end;
  gap: 4px;
  transform: translateX(-50%);
}

.spanish3-cake > span i {
  display: block;
  height: 52px;
  border-radius: 7px 7px 3px 3px;
  background: var(--spanish3-pink);
  color: transparent;
  font-size: 0;
}

.spanish3-cake > span i:nth-child(even) {
  height: 43px;
  background: var(--spanish3-blue);
}

.spanish3-cake > b {
  display: block;
  width: 92%;
  height: 58px;
  border-radius: 22px 22px 10px 10px;
  background: var(--spanish3-yellow);
}

.spanish3-cake > b:nth-of-type(2) {
  width: 100%;
  height: 62px;
  margin-top: 4px;
  border-radius: 10px 10px 28px 28px;
  background: var(--spanish3-coral-soft);
}

.spanish3-cake > strong {
  position: absolute;
  bottom: 37px;
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font: 950 26px/1 var(--font-display);
}

.spanish3-age-question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.spanish3-age-question > b {
  color: var(--spanish3-coral);
  font: 950 clamp(58px, 9vw, 96px)/.8 var(--font-display);
}

.spanish3-age-question > span {
  display: grid;
  min-width: 0;
  gap: 4px;
  text-align: center;
}

.spanish3-age-question :is(strong, em, small) {
  min-width: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.spanish3-age-question strong {
  font-size: clamp(25px, 4vw, 42px);
  line-height: .95;
}

.spanish3-age-question em {
  color: var(--spanish3-blue);
  font-size: clamp(28px, 5vw, 52px);
  line-height: .95;
  text-decoration: underline 8px var(--spanish3-yellow);
  text-underline-offset: -4px;
}

.spanish3-age-question small {
  font-size: clamp(20px, 3vw, 30px);
}

.spanish3-question-meaning,
.spanish3-proof--frame > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font: 900 15px/1.2 var(--font-display);
}

.spanish3-question-meaning :is(span, strong),
.spanish3-proof--frame > p b {
  padding: 10px 14px;
  border-radius: 15px;
  background: var(--spanish3-blue-soft);
}

.spanish3-question-meaning strong,
.spanish3-proof--frame > p b:nth-of-type(2) {
  background: var(--spanish3-yellow-soft);
}

.spanish3-question-meaning i,
.spanish3-proof--frame > p span {
  color: var(--spanish3-green);
  font: 950 24px/1 var(--font-display);
  font-style: normal;
}

.spanish3-number-lines {
  display: grid;
  gap: 12px;
}

.spanish3-number-lines article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(90px, .35fr);
  align-items: center;
  gap: 15px;
  min-height: 86px;
  padding: 12px 18px;
  border-radius: 26px 20px 28px 18px;
}

.spanish3-number-lines article.is-seven { background: var(--spanish3-pink-soft); }
.spanish3-number-lines article.is-eight { background: var(--spanish3-blue-soft); }
.spanish3-number-lines article.is-nine { background: var(--spanish3-green-soft); }

.spanish3-number-lines article > strong {
  display: grid;
  width: 50px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font: 950 24px/1 var(--font-display);
}

.spanish3-number-lines article > span {
  display: grid;
  grid-template-columns: repeat(9, 20px);
  gap: 6px;
  align-items: center;
}

.spanish3-number-lines article > span i,
.spanish3-ten-grid i,
.spanish3-ten-family article > em i,
.spanish3-mini-candles i,
.spanish3-age-people article > div i {
  display: block;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spanish3-pink);
  color: transparent;
  font-size: 0;
}

.spanish3-number-lines .is-eight > span i { background: var(--spanish3-blue); }
.spanish3-number-lines .is-nine > span i { background: var(--spanish3-green); }

.spanish3-number-lines article > b {
  font: 950 clamp(19px, 2.8vw, 28px)/1 var(--font-display);
}

.spanish3-ten-family {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.spanish3-ten-family article {
  display: grid;
  min-width: 0;
  align-content: start;
  justify-items: center;
  gap: 10px;
  padding: 18px 12px;
  border-radius: 34px 26px 32px 24px;
}

.spanish3-ten-family article.is-ten { background: var(--spanish3-coral-soft); }
.spanish3-ten-family article.is-eleven { background: var(--spanish3-yellow-soft); }
.spanish3-ten-family article.is-twelve { background: var(--spanish3-blue-soft); }

.spanish3-ten-grid {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 6px;
}

.spanish3-ten-grid i {
  width: 18px;
  background: var(--spanish3-coral);
}

.spanish3-ten-family .is-eleven .spanish3-ten-grid i { background: var(--spanish3-yellow); }
.spanish3-ten-family .is-twelve .spanish3-ten-grid i { background: var(--spanish3-blue); }

.spanish3-ten-family article > em {
  display: flex;
  min-height: 24px;
  gap: 6px;
  font-style: normal;
}

.spanish3-ten-family article > em i {
  width: 18px;
  background: var(--spanish3-green);
}

.spanish3-ten-family article > strong {
  min-width: 0;
  font: 950 clamp(18px, 2.5vw, 25px)/1.05 var(--font-display);
  text-align: center;
  overflow-wrap: anywhere;
}

.spanish3-ten-family article > small {
  color: #625c6b;
  font: 900 10px/1 var(--font-display);
  letter-spacing: .08em;
}

.spanish3-age-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.spanish3-age-frame > article {
  display: grid;
  min-width: 0;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 16px 10px;
  border-radius: 34px 26px 36px 24px;
  background: var(--spanish3-blue-soft);
}

.spanish3-age-frame > article.is-number { background: var(--spanish3-yellow-soft); }
.spanish3-age-frame > article:last-of-type { background: var(--spanish3-pink-soft); }

.spanish3-age-frame article > small {
  color: #625c6b;
  font: 900 9px/1.15 var(--font-display);
  letter-spacing: .07em;
  text-align: center;
}

.spanish3-age-frame article > strong {
  min-width: 0;
  font: 950 clamp(22px, 3.4vw, 36px)/1 var(--font-display);
  overflow-wrap: anywhere;
}

.spanish3-age-frame > i {
  color: var(--spanish3-green);
  font: 950 30px/1 var(--font-display);
  font-style: normal;
}

.spanish3-mini-candles {
  display: grid;
  grid-template-columns: repeat(5, 8px);
  gap: 3px;
}

.spanish3-mini-candles i {
  width: 8px;
  height: 22px;
  border-radius: 4px 4px 2px 2px;
  background: var(--spanish3-yellow);
}

.spanish3-role-board {
  display: grid;
  gap: 12px;
}

.spanish3-role-board > article {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr);
  grid-template-areas: "person role" "person phrase";
  align-items: center;
  gap: 8px 18px;
  min-height: 118px;
  padding: 18px;
  border-radius: 28px 34px 24px 32px;
}

.spanish3-role-board > article.is-you { background: var(--spanish3-blue-soft); }
.spanish3-role-board > article.is-me { background: var(--spanish3-pink-soft); }

.spanish3-role-board article > span {
  grid-area: person;
  display: flex;
  align-items: center;
  gap: 10px;
}

.spanish3-role-board article > span i,
.spanish3-age-people article > span i {
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--spanish3-blue);
  color: #fff;
  font: 950 16px/1 var(--font-display);
  font-style: normal;
}

.spanish3-role-board .is-me > span i,
.spanish3-age-people .is-maya > span i { background: var(--spanish3-pink); }

.spanish3-role-board article > span b {
  font: 900 12px/1.2 var(--font-display);
}

.spanish3-role-board article > small {
  grid-area: role;
  color: #625c6b;
  font: 900 10px/1 var(--font-display);
  letter-spacing: .08em;
}

.spanish3-role-board article > strong {
  grid-area: phrase;
  min-width: 0;
  font: 950 clamp(19px, 2.8vw, 29px)/1.1 var(--font-display);
  overflow-wrap: anywhere;
}

.spanish3-role-board article > strong em {
  color: var(--spanish3-blue);
  font-style: normal;
  text-decoration: underline 7px var(--spanish3-yellow);
  text-underline-offset: -3px;
}

.spanish3-role-board .is-me > strong em { color: var(--spanish3-pink); }

.spanish3-role-board > b {
  justify-self: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--spanish3-green-soft);
  font: 900 11px/1 var(--font-display);
  letter-spacing: .06em;
}

.spanish3-age-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.spanish3-age-people > article {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "person dots" "age dots";
  align-items: center;
  gap: 8px 14px;
  padding: 15px;
  border-radius: 30px 24px 32px 22px;
}

.spanish3-age-people > article.is-leo { background: var(--spanish3-blue-soft); }
.spanish3-age-people > article.is-maya { background: var(--spanish3-pink-soft); }

.spanish3-age-people article > span {
  grid-area: person;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 900 12px/1 var(--font-display);
}

.spanish3-age-people article > div {
  grid-area: dots;
  display: grid;
  grid-template-columns: repeat(6, 12px);
  gap: 4px;
  justify-content: end;
}

.spanish3-age-people article > div i {
  width: 12px;
  background: var(--spanish3-blue);
}

.spanish3-age-people .is-maya > div i { background: var(--spanish3-pink); }

.spanish3-age-people article > strong {
  grid-area: age;
  font: 950 18px/1 var(--font-display);
}

.spanish3-age-dialogue {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spanish3-age-dialogue::after {
  position: absolute;
  inset: 20px;
  z-index: 0;
  border: 3px dashed rgba(15, 188, 83, .45);
  border-radius: 42px;
  content: '';
  pointer-events: none;
}

.spanish3-age-dialogue li {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "step role" "step phrase";
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  min-height: 104px;
  padding: 15px;
  border: 3px solid #fff;
  border-radius: 28px 34px 24px 32px;
  background: var(--spanish3-pink-soft);
}

.spanish3-age-dialogue li.is-leo { background: var(--spanish3-blue-soft); }

.spanish3-age-dialogue li > i {
  grid-area: step;
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--spanish3-pink);
  color: #fff;
  font: 950 13px/1 var(--font-display);
  font-style: normal;
}

.spanish3-age-dialogue li.is-leo > i { background: var(--spanish3-blue); }

.spanish3-age-dialogue li > span {
  grid-area: role;
  font: 900 10px/1.2 var(--font-display);
  letter-spacing: .06em;
}

.spanish3-age-dialogue li > strong {
  grid-area: phrase;
  min-width: 0;
  font: 950 clamp(16px, 2vw, 23px)/1.1 var(--font-display);
  overflow-wrap: anywhere;
}

.spanish3-proof__attempt {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 14px 18px;
  border-left: 6px solid var(--spanish3-coral);
  border-radius: 8px 20px 20px 8px;
  background: var(--spanish3-coral-soft);
}

.spanish3-proof__attempt.is-correct {
  border-left-color: var(--spanish3-green);
  background: var(--spanish3-green-soft);
}

.spanish3-proof__attempt span {
  font: 900 10px/1 var(--font-display);
  letter-spacing: .12em;
}

.spanish3-proof__attempt strong {
  font: 900 19px/1.2 var(--font-display);
}

.spanish3-build ol {
  border-color: var(--spanish3-blue, #2f73d9);
  background: var(--spanish3-blue-soft, #e2efff);
}

.spanish3-speak-check button {
  border-color: #0fbc53;
  background: #e5f8eb;
  color: #29272d;
}

@media (max-width: 760px) {
  .spanish3-proof {
    padding: 18px;
    border-radius: 28px;
  }

  .spanish3-age-scene,
  .spanish3-ten-family,
  .spanish3-age-people,
  .spanish3-age-dialogue {
    grid-template-columns: 1fr;
  }

  .spanish3-age-question {
    width: min(100%, 520px);
    justify-self: center;
  }

  .spanish3-number-lines article {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas: "number dots" "word dots";
  }

  .spanish3-number-lines article > strong { grid-area: number; }
  .spanish3-number-lines article > span { grid-area: dots; }
  .spanish3-number-lines article > b { grid-area: word; }

  .spanish3-ten-family article {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "dots title" "extra title" "extra note";
    align-items: center;
    justify-items: start;
  }

  .spanish3-ten-family .spanish3-ten-grid { grid-area: dots; }
  .spanish3-ten-family article > em { grid-area: extra; }
  .spanish3-ten-family article > strong { grid-area: title; text-align: left; }
  .spanish3-ten-family article > small { grid-area: note; }

  .spanish3-age-frame {
    grid-template-columns: 1fr;
  }

  .spanish3-age-frame > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .spanish3-role-board > article {
    grid-template-columns: 1fr;
    grid-template-areas: "person" "role" "phrase";
  }

  .spanish3-age-people > article {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-spanish-course-03-root] *,
  [data-spanish-course-03-root] *::before,
  [data-spanish-course-03-root] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}