:root {
  color-scheme: dark;
  --navy: #071226;
  --panel: #0d203b;
  --blue: #3478e5;
  --cyan: #13b9d5;
  --turquoise: #14b8a6;
  --gold: #d2a84a;
  --white: #f5f8ff;
  --muted: #afc0d7;
  --line: rgba(159, 193, 231, .17);
  --orbit-radius: clamp(130px, 17vw, 210px);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); scroll-behavior: smooth; }
body { margin: 0; color: var(--white); line-height: 1.65; font-size: 16px; min-width: 300px; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
button, a, input { outline-offset: 5px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #7ee6ed; }
button:disabled { cursor: default; }
button:not(.item):disabled { opacity: .55; }
a { color: inherit; }
button, a { -webkit-user-select: none; user-select: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 650; }
h1 { letter-spacing: -.025em; line-height: 1.42; }
[lang="en"] h1 { line-height: 1.17; letter-spacing: -.035em; }
h2 { font-size: 1.4rem; line-height: 1.5; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sky, .stars, .sky-glow { position: fixed; inset: 0; pointer-events: none; }
.sky { z-index: -1; overflow: hidden; background: linear-gradient(155deg, #08172d 0%, #071226 46%, #060e20 100%); }
.space-backdrop { position: absolute; inset: 0; display: block; opacity: .8; pointer-events: none; }
.space-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.is-learning .space-backdrop { opacity: .25; }
.is-learning .stars { animation: none; opacity: .15; }
.stars-far {
  opacity: .5;
  background-image:
    radial-gradient(circle at 7% 12%, #e4eeff 0 .65px, transparent 1.5px),
    radial-gradient(circle at 31% 6%, #9dc0f2 0 .8px, transparent 1.7px),
    radial-gradient(circle at 67% 9%, #e4eeff 0 .65px, transparent 1.5px),
    radial-gradient(circle at 89% 19%, #b8d3f7 0 .8px, transparent 1.6px),
    radial-gradient(circle at 19% 31%, #e4eeff 0 .7px, transparent 1.4px),
    radial-gradient(circle at 52% 24%, #b8d3f7 0 .65px, transparent 1.5px),
    radial-gradient(circle at 97% 43%, #e4eeff 0 .8px, transparent 1.5px),
    radial-gradient(circle at 4% 58%, #9dc0f2 0 .7px, transparent 1.6px),
    radial-gradient(circle at 37% 47%, #e4eeff 0 .7px, transparent 1.4px),
    radial-gradient(circle at 76% 61%, #b8d3f7 0 .65px, transparent 1.5px),
    radial-gradient(circle at 58% 73%, #e4eeff 0 .8px, transparent 1.7px),
    radial-gradient(circle at 15% 83%, #b8d3f7 0 .65px, transparent 1.4px),
    radial-gradient(circle at 91% 88%, #e4eeff 0 .8px, transparent 1.5px),
    radial-gradient(circle at 42% 94%, #9dc0f2 0 .7px, transparent 1.6px),
    radial-gradient(circle at 83% 37%, #e4eeff 0 .7px, transparent 1.5px);
  animation: distant-stars 13s ease-in-out infinite alternate;
}
.stars-near {
  opacity: .6;
  background-image:
    radial-gradient(circle at 13% 21%, #f7f4e6 0 .8px, #b8e9ff55 1.2px, transparent 4px),
    radial-gradient(circle at 79% 16%, #e2f7ff 0 .9px, #b8e9ff44 1.5px, transparent 5px),
    radial-gradient(circle at 93% 69%, #f7f4e6 0 .8px, #c9daf533 1.5px, transparent 4px),
    radial-gradient(circle at 23% 73%, #e2f7ff 0 .9px, #b8e9ff44 1.4px, transparent 4.5px),
    radial-gradient(circle at 65% 91%, #f7f4e6 0 .7px, #c9daf533 1.3px, transparent 4px);
  animation: distant-stars 9s ease-in-out -4s infinite alternate-reverse;
}
.sky-glow { background: radial-gradient(ellipse at 25% 34%, #0756a326, transparent 49%), radial-gradient(ellipse at 97% 100%, #163c682b, transparent 44%); }
@keyframes distant-stars { from { opacity: .35; } to { opacity: .8; } }

.app-shell { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.app-header { min-height: 109px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--white); text-decoration: none; min-height: 48px; border: 0; padding: 0; background: transparent; text-align: start; }
.brand-title { display: block; font-size: 1.24rem; font-weight: 650; line-height: 1.35; }
.brand-caption { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .035em; margin-top: 3px; }
.brand-orbit { position: relative; display: block; width: 39px; height: 39px; border: 1.5px solid #27c3cc; border-radius: 50%; box-shadow: inset -5px -3px 10px #0756a390, 0 0 16px #13b9d515; flex: 0 0 auto; }
.brand-orbit::before { content: ""; position: absolute; width: 49px; height: 18px; border: 1px solid #d2a84ac2; border-radius: 50%; top: 9px; left: -7px; transform: rotate(-32deg); }
.brand-orbit::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b4f5f4; top: 5px; right: 3px; box-shadow: 0 0 9px #13b9d5; }
.nav-tools, .button-row, .summary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.subtle-button, .language-button, .primary-button, .outline-button, .text-button, .danger-button { min-height: 48px; padding: 10px 19px; border-radius: 14px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; text-decoration: none; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.subtle-button, .language-button { color: #dce7f7; background: transparent; border-color: var(--line); font-size: .88rem; }
.subtle-button:hover, .language-button:hover { background: #162a43; border-color: #536d8d; }
.primary-button { background: linear-gradient(120deg, #e5c677, #d2a84a); color: #152237; padding: 13px 27px; min-height: 54px; box-shadow: 0 4px 24px #d2a84a18; }
.primary-button:hover { box-shadow: 0 5px 28px #d2a84a38; background: #e6c776; }
.outline-button { color: #e6effb; background: #0d234080; border-color: #3a5577; min-height: 54px; padding: 13px 25px; }
.outline-button:hover { background: #173454; border-color: #7395bd; }
.text-button { background: transparent; color: #b9cee6; padding-inline: 12px; }
.text-button:hover { color: white; background: #152b45; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d2a84a3c; color: #e4c985; padding: 5px 13px; border-radius: 100px; font-size: .78rem; letter-spacing: .035em; margin-bottom: 22px; background: #d2a84a08; }
.hero { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 30px; min-height: 620px; padding-block: 40px 48px; }
.hero-copy { position: relative; z-index: 1; max-width: 520px; }
.hero h1 { font-size: clamp(2.25rem, 3.55vw, 3.25rem); font-weight: 650; }
.hero h1 em, .hero h1 span { color: #77d6df; font-style: normal; }
.hero-description { color: #becde0; font-size: 1.025rem; line-height: 1.95; max-width: 450px; margin-block: 19px 27px; }
.hero-note { color: #8fa6c0; font-size: .76rem; margin-top: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.hero-note > span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 15px; height: 15px; }
.planet-stage { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; max-width: 530px; isolation: isolate; }
.planet-stage::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle, #13b9d509 43%, #0756a320 60%, transparent 73%); filter: blur(12px); }
.earth { position: absolute; width: 90%; height: 90%; object-fit: contain; top: 5%; left: 5%; filter: drop-shadow(0 0 18px #13b9d518); }
.planet-orbit { position: absolute; inset: 8%; border: 1px solid #45b4d12b; border-radius: 50%; }
.orbital-line { position: absolute; width: 96%; height: 38%; border: 1px solid #d2a84a6b; border-radius: 50%; top: 31%; left: 2%; transform: rotate(-24deg); z-index: 1; }
.orbit-letter { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid #3bd1d970; border-radius: 50%; background: #0c2b48; color: #ecfcff; font-size: 1.5rem; box-shadow: 0 0 17px #13b9d51c; z-index: 2; animation: letter-orbit 75s linear infinite; }
.orbit-letter:nth-child(1) { --angle: 0deg; }
.orbit-letter:nth-child(2) { --angle: 90deg; }
.orbit-letter:nth-child(3) { --angle: 180deg; }
.orbit-letter:nth-child(4) { --angle: 270deg; }
@keyframes letter-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(0deg - var(--angle))); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-360deg - var(--angle))); }
}
.planet-label { position: absolute; bottom: 2%; inset-inline: 0; text-align: center; color: #7ca3c4; font-size: .65rem; letter-spacing: .14em; }
.planet-badge { position: absolute; top: 11%; right: 5%; min-width: 70px; padding: 10px 14px; border: 1px solid #9ec5df40; border-radius: 17px; color: #dbedff; background: #153552e6; box-shadow: 0 8px 26px #0003; font-size: 1.25rem; direction: ltr; transform: rotate(7deg); z-index: 3; }
.planet-badge.second { top: auto; right: auto; bottom: 15%; left: 4%; min-width: 54px; text-align: center; color: #efdaa1; transform: rotate(-8deg); }
.journey-strip { display: grid; grid-template-columns: 1.08fr repeat(3, 1fr); align-items: center; gap: 23px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(110deg, #142a404d, #1328467a); padding: 25px 27px; margin-bottom: 37px; }
.strip-title { font-size: .97rem; font-weight: 600; }
.strip-step { display: flex; align-items: center; gap: 12px; color: #b7c9df; font-size: .86rem; }
.strip-step strong { font-size: .88rem; font-weight: 600; color: #d6e4f3; }
.strip-step p { font-size: .72rem; color: #91aac6; margin-top: 3px; }
.strip-number { border: 1px solid #355372; color: #92d8e2; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; font-size: .8rem; }
.app-footer { min-height: 77px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #8da3be; font-size: .72rem; }
.footer-mark { color: #acc2d9; }

.session-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-block: 33px 25px; }
.session-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.session-heading > p { color: #9eb6d1; font-size: .79rem; }
.session-heading h1 { font-size: 1.6rem; }
.tag { font-size: .74rem; background: #13b9d512; color: #8fd9e4; border: 1px solid #13b9d530; border-radius: 100px; padding: 4px 12px; }
.progress-track { display: flex; align-items: stretch; gap: 9px; margin-bottom: 23px; }
.progress-stop { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 8px; color: #99b0cc; background: #10223980; border: 1px solid #29445e; border-radius: 12px; font-size: .72rem; }
.progress-stop i { font-style: normal; width: 26px; height: 26px; border: 1px solid #4a66828a; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.progress-stop.current { color: #f1da9f; border-color: #d2a84a; box-shadow: 0 0 0 4px #d2a84a0c; }
.progress-stop.done { color: #92ead9; background: #123a3c; border-color: #298176; }
.progress-label { color: #a9bfd6; font-size: .75rem; text-align: center; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; align-items: start; gap: 22px; margin-bottom: 35px; }
.lesson-card { min-width: 0; border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(145deg, #102642e8, #0b1c34f5); padding: 26px; box-shadow: 0 18px 45px #02081722; }
.mentor { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 13px; align-items: center; padding: 18px 20px; background: #193654a1; border: 1px solid #416e922e; border-radius: 18px; }
.mentor-label { display: block; color: #94cddc; font-size: .69rem; margin-bottom: 3px; }
.mentor p { font-size: .96rem; line-height: 1.85; color: #f2f7ff; }
.quantity-field { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 153px; margin-block: 24px 16px; }
.quantity-group { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 9px; padding: 13px; min-width: 84px; max-width: 325px; border: 1px solid #d2a84a3b; border-radius: 20px; background: #d2a84a08; }
.quantity-group.cyan { border-color: #13b9d53b; background: #13b9d508; }
.quantity-group.zero { min-height: 80px; min-width: 90px; border-style: dashed; color: #9db3cd; }
.quantity-group.combined, .quantity-field.combined { border-color: #7bb2c85c; }
.quantity-field.combined .quantity-group { background: #13344b; border-color: #4d91a45c; }
.math-plus { color: #a7bed9; font-size: 1.5rem; flex: 0 0 21px; text-align: center; }
.item { position: relative; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid #f5d98870; border-radius: 13px; color: #1b2e41; background: linear-gradient(135deg, #efce76, #c89736); font-size: 1.03rem; font-weight: 700; box-shadow: inset 0 1px 1px #fff5, 0 3px 6px #0002; transition: transform .14s, box-shadow .14s; }
.item.cyan { border-color: #85e8f18c; background: linear-gradient(135deg, #55d5e8, #0d99b8); color: #052e45; }
.item:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 13px #d2a84a33; }
.item.counted { border: 2px solid #e6fbff; box-shadow: 0 0 0 3px #e6fbff20; }
.equation { display: flex; align-items: center; justify-content: center; gap: .3em; unicode-bidi: isolate; text-align: center; color: #f1f6ff; font-size: clamp(1.65rem, 3vw, 2.1rem); line-height: 1.5; font-weight: 600; letter-spacing: .05em; margin-block: 11px 23px; }
.math-token { direction: ltr; unicode-bidi: isolate; white-space: nowrap; flex: 0 0 auto; }
.unknown { color: #f1d391; }
.answer-label { display: block; text-align: center; color: #afc4dc; font-size: .8rem; margin-bottom: 12px; }
.answer-grid { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 9px; width: min(100%, 465px); margin-inline: auto; direction: ltr; }
.answer-button { min-height: 48px; min-width: 44px; padding: 5px; border: 1px solid #476583; color: #edf6ff; border-radius: 12px; background: #1b3651; font-size: 1.13rem; transition: border-color .16s, background .16s; }
.answer-button:hover:not(:disabled) { background: #275175; border-color: #76b4d3; }
.answer-button.correct-answer, .answer-button.correct-answer:disabled { color: #d3fff0; border-color: #5bc7a4; background: #1c5b51; opacity: 1; }
.answer-button.selected-wrong { border-color: #d2a84a; background: #58472c; color: #ffeac2; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 25px; }
.lesson-actions .outline-button, .lesson-actions .primary-button { min-height: 48px; font-size: .88rem; }
.station-card { border: 1px solid var(--line); border-radius: 23px; background: #0e243e99; padding: 21px; text-align: center; }
.station-card h2, .station-card h3 { font-size: .95rem; }
.station-card p { font-size: .78rem; color: #a9bfd6; line-height: 1.85; }
.station-visual { display: grid; place-items: center; min-height: 220px; position: relative; background: radial-gradient(ellipse, #0a85b021, transparent 65%); }
.ship { width: 76px; height: 125px; position: relative; border-radius: 60% 60% 29% 29%; background: linear-gradient(105deg, #c2d7e9, #eef4fa 44%, #86a9cc); border-bottom: 12px solid #3478e5; box-shadow: 0 8px 35px #0002; transform: rotate(-8deg); }
.ship::before { content: ""; position: absolute; top: 34px; left: 24px; width: 29px; height: 29px; background: radial-gradient(circle at 30% 23%, #45cfde, #096c9d 55%, #123c60); border: 3px solid #ccdfef; border-radius: 50%; box-shadow: 0 0 0 1px #88a8c0; }
.ship::after { content: ""; position: absolute; width: 29px; height: 40px; bottom: -45px; left: 24px; background: linear-gradient(#71e6ee, #1da5d279, transparent); border-radius: 0 0 50% 50%; opacity: .7; }
.route-note { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; color: #bfccdc; font-size: .8rem; line-height: 1.8; display: flex; align-items: flex-start; gap: 8px; }
.route-note svg { flex: 0 0 auto; color: #75b9ad; margin-top: 3px; }
.mode-helper { color: #95aec9; font-size: .77rem; text-align: center; margin-top: 17px; }
.discovery-layout { max-width: 860px; margin: 0 auto 38px; }
.builders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 23px; }
.builder { border: 1px solid #d2a84a36; border-radius: 18px; padding: 17px; background: #d2a84a07; text-align: center; }
.builder.cyan { border-color: #13b9d536; background: #13b9d507; }
.builder-label { display: block; color: #d2bb86; font-size: .8rem; margin-bottom: 12px; }
.builder.cyan .builder-label { color: #8bcfdb; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 16px; }
.stepper button { width: 44px; height: 44px; padding: 0; border: 1px solid #53718f; background: #1d3852; border-radius: 11px; color: white; font-size: 1.3rem; }
.stepper button:hover:not(:disabled) { background: #2a5275; }
.stepper strong, .stepper output { font-size: 1.65rem; min-width: 28px; color: #f4f7ff; }

.summary-wrap { width: min(830px, 100%); margin: 37px auto 45px; }
.summary-intro { text-align: center; margin-bottom: 28px; }
.summary-intro h1 { font-size: 1.95rem; margin-block: 12px 8px; }
.summary-intro p { color: #b1c6dd; font-size: .92rem; }
.summary-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin-inline: auto; border: 1px solid #d2a84a65; border-radius: 50%; background: #d2a84a0b; color: #e9cd83; font-size: 1.8rem; box-shadow: 0 0 36px #d2a84a10; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 22px; }
.stat { text-align: center; background: #102842b3; border: 1px solid var(--line); border-radius: 17px; padding: 18px 12px; }
.stat strong { display: block; color: #cce2f7; font-size: 1.8rem; font-weight: 600; line-height: 1.35; }
.stat span, .stat p { display: block; color: #a5bdd6; font-size: .77rem; margin-top: 5px; }
.evidence-list { padding: 4px 21px; margin: 18px 0; list-style: none; border: 1px solid var(--line); border-radius: 19px; background: #0d223bb3; }
.evidence-row { display: flex; align-items: center; gap: 21px; padding-block: 17px; border-bottom: 1px solid var(--line); }
.evidence-row:last-child { border-bottom: 0; }
.evidence-equation { display: inline-flex; align-items: center; justify-content: center; gap: .3em; flex-shrink: 0; unicode-bidi: isolate; font-size: 1.1rem; color: #d5e7f8; min-width: 83px; text-align: center; }
.evidence-copy { font-size: .8rem; line-height: 1.85; color: #a9bfd6; }
.evidence-copy strong { display: block; font-weight: 600; color: #dceaf8; }
.evidence-copy small { display: block; color: #829ebd; font-size: .72rem; margin-top: 3px; }
.lesson-card > .parent-section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.outdoor { background: #113b3b66; border: 1px solid #3a86774d; border-radius: 18px; padding: 20px 23px; margin-block: 23px 16px; }
.outdoor h2, .outdoor h3 { font-size: 1rem; color: #a7e0d2; margin-bottom: 6px; }
.outdoor p { font-size: .85rem; color: #c1d8db; line-height: 1.85; }
.summary-disclaimer { color: #91a9c2; font-size: .76rem; line-height: 1.85; }
.summary-actions { margin-top: 23px; justify-content: center; }
.empty-session { text-align: center; padding: 33px 20px; border: 1px dashed #4d6882; border-radius: 17px; color: #bed1e3; }

dialog { color: #e7f0fa; width: min(620px, calc(100% - 34px)); max-height: min(86vh, 850px); background: #0e213b; border: 1px solid #375574; border-radius: 24px; padding: 27px; box-shadow: 0 24px 90px #0007; }
dialog::backdrop { background: #020815c4; backdrop-filter: blur(5px); }
.dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 14px; }
.dialog-header h2 { font-size: 1.22rem; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #405b79; border-radius: 12px; background: #152e48; color: white; font-size: 1.45rem; }
.dialog-copy { color: #b5cae0; font-size: .87rem; line-height: 1.85; }
.consent { display: flex; align-items: flex-start; gap: 13px; padding: 17px; border: 1px solid #365977; border-radius: 15px; margin-block: 18px; font-size: .85rem; color: #d8e7f5; background: #18365266; cursor: pointer; }
.consent input { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 4px; accent-color: #28bfc8; }
.history-list { margin-block: 10px 18px; padding: 0; list-style: none; }
.history-list li { border-bottom: 1px solid var(--line); padding-block: 12px; color: #b9cde2; font-size: .81rem; line-height: 1.85; }
.history-list li:last-child { border-bottom: 0; }
.history-list strong { color: #e1edf9; font-weight: 600; }
.history-list time { display: block; color: #e1edf9; }
.history-list li > span { display: block; color: #a9dce7; }
.parent-section-title { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 23px; font-size: .98rem; }
.status { min-height: 26px; margin-block: 10px; color: #a8decf; font-size: .82rem; }
.danger-button { border-color: #ab727164; color: #e6b8b3; background: #6c38341a; font-size: .82rem; }
.danger-button:hover { background: #6c383440; }
.confirm-box { padding: 17px; margin-top: 15px; border: 1px solid #9e7b4266; border-radius: 15px; background: #5d45212e; }
.confirm-box p { font-size: .85rem; margin-bottom: 13px; }
.parent-facts { color: #a6bed6; font-size: .78rem; line-height: 1.9; margin-top: 19px; }
.parent-facts li { margin-block: 7px; }
.noscript { padding: 30px; color: #f3d18b; text-align: center; }

/* Chapter one: observe, sort, pair, and compare. Controls stay touch-sized. */
.fnd-session { padding-bottom: 35px; }
.voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 16px 22px; }
.voice-controls .voice-play { min-height: 44px; gap: 7px; color: #bce8ec; }
.voice-controls p { flex-basis: 100%; font-size: .8rem; color: #c0d5e6; line-height: 1.7; }
.voice-disclosure { flex-basis: 100%; color: #b8d7dc; font-size: .78rem; }
.parent-voice { margin-block: 22px; padding: 18px; border: 1px solid #426680; border-radius: 18px; background: #102c40; }
.parent-voice .parent-section-title { margin-top: 0; }
.voice-choice { display: block; margin-block: 16px 8px; color: #e7f0fa; }
#teacherVoiceSelect { width: 100%; min-height: 48px; padding: 10px; font: inherit; color: #effdff; background: #0b2135; border: 1px solid #699cae; border-radius: 10px; }
.voice-samples { display: grid; gap: 10px; margin-block: 16px; }
.voice-samples button { white-space: normal; text-align: start; min-height: 48px; }
.skill-progress { margin-block: 24px; }
.skill-progress ul { list-style: none; padding: 0; }
.skill-progress li { border-inline-start: 3px solid #72d5df; padding: 10px 14px; margin-block: 10px; background: #17364d; border-radius: 8px; }
.skill-progress strong, .skill-progress span { display: block; font-size: .85rem; line-height: 1.8; }
.skill-progress span { color: #bdd2e2; font-size: .78rem; }
.fnd-rule-model { display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; width: 110px; height: 58px; background: #0b2339; border-radius: 12px; }
.fnd-rule-model .fnd-piece { width: 26px; height: 26px; flex-shrink: 0; }
.fnd-progress { padding: 0; list-style: none; }
.fnd-lesson { max-width: 900px; margin-inline: auto; }
.fnd-task-kicker { color: #d8bc76; font-size: .75rem; margin-bottom: 3px; }
.fnd-task-title { margin-bottom: 18px; font-size: 1.25rem; }
.fnd-rule { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 18px; border: 1px solid #557391; background: #19344f; border-radius: 16px; margin: 23px auto; padding: 11px 18px; width: fit-content; max-width: 100%; }
.fnd-rule span { font-size: .78rem; color: #b4c7dc; }
.fnd-rule strong { font-size: 1.1rem; color: #f4dfae; font-weight: 600; }
.fnd-rule.is-hinted { border-color: #dfc579; box-shadow: 0 0 0 3px #dfc57914; }
.fnd-piece-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; max-width: 660px; margin: 22px auto; }
.fnd-piece-button { position: relative; min-width: 0; min-height: 133px; padding: 12px 8px 10px; border: 1px solid #406584; border-radius: 18px; color: #bed1e5; background: linear-gradient(145deg, #183c58, #142d47); transition: background-color .18s, border-color .18s, box-shadow .18s; }
.fnd-piece-button:hover:not(:disabled) { border-color: #95bcd7; background: #204760; }
.fnd-piece-button.is-chosen, .fnd-piece-button.is-chosen:disabled { border: 2px solid #dff6fa; background: #1d4a60; box-shadow: 0 0 0 3px #dff6fa15; opacity: 1; }
.fnd-piece-button:disabled { opacity: .75; }
.fnd-piece-stage { position: relative; display: grid; place-items: center; height: 82px; width: 100%; }
.fnd-piece { display: block; width: 44px; height: 44px; flex: 0 0 auto; background: #d8b354; box-shadow: inset 0 2px 3px #fff6, 0 5px 11px #0003; }
.fnd-piece.fnd-large { width: 62px; height: 62px; }
.fnd-piece.fnd-gold { background: linear-gradient(140deg, #efd486, #cea13c); }
.fnd-piece.fnd-cyan { background: linear-gradient(140deg, #86e8ed, #14a8c6); }
.fnd-piece.fnd-circle { border-radius: 50%; }
.fnd-piece.fnd-square { border-radius: 7px; }
.fnd-piece.fnd-triangle { clip-path: polygon(50% 1%, 99% 97%, 1% 97%); border-radius: 0; }
.fnd-piece-label { display: block; font-size: .76rem; line-height: 1.6; overflow-wrap: anywhere; }
.fnd-check { position: absolute; top: -2px; inset-inline-end: 0; display: grid; place-items: center; width: 24px; height: 24px; color: #e6feff; font-size: 1.08rem; font-weight: 700; }
.fnd-submit { display: flex; justify-content: center; margin-block: 21px 7px; }
.fnd-submit .primary-button { min-height: 50px; }
.fnd-help { max-width: 660px; padding: 15px 18px; margin: 16px auto; border-inline-start: 3px solid #d2a84a; border-radius: 4px 13px 13px 4px; background: #56492231; color: #d9d9cc; font-size: .87rem; line-height: 1.85; }
[dir="rtl"] .fnd-help { border-radius: 13px 4px 4px 13px; }
.fnd-help > strong { display: block; color: #f1d998; font-size: .8rem; margin-bottom: 8px; }
.fnd-sample { display: flex; align-items: center; gap: 20px; }
.fnd-sample-shape { flex: 0 0 76px; min-height: 76px; display: grid; place-items: center; border: 1px dashed #d2a84a60; border-radius: 13px; }
.fnd-match-board, .fnd-compare-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 23px auto 8px; max-width: 650px; }
.fnd-match-group, .fnd-compare-group { border: 1px solid #d2a84a4a; border-radius: 19px; padding: 17px 13px; background: #d2a84a09; min-width: 0; text-align: center; }
.fnd-match-group:nth-child(2), .fnd-compare-group:nth-child(2) { border-color: #13b9d54a; background: #13b9d509; }
.fnd-match-group h2, .fnd-compare-group h2 { font-size: .91rem; color: #dfcd9f; margin-bottom: 14px; }
.fnd-match-group:nth-child(2) h2, .fnd-compare-group:nth-child(2) h2 { color: #9fdfe8; }
.fnd-match-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; gap: 12px; max-width: 184px; margin-inline: auto; }
.fnd-match-item { position: relative; display: grid; place-items: center; min-width: 0; width: 100%; min-height: 82px; padding: 10px 3px; border: 1px solid #67829e; border-radius: 14px; background: #213f57; color: #f1fbff; }
.fnd-match-item:hover:not(:disabled) { background: #2e5570; border-color: #b5d4e7; }
.fnd-match-item.is-chosen { border: 2px solid #f5e0a5; box-shadow: 0 0 0 3px #d2a84a24; background: #4c503e; }
.fnd-match-item.is-paired, .fnd-match-item.is-paired:disabled { border-color: #75bdb3; background: #214e51; opacity: 1; }
.fnd-match-mark { position: absolute; top: 1px; inset-inline-end: 5px; font-size: .86rem; }
.fnd-explorer { position: relative; display: inline-block; width: 37px; height: 47px; border-radius: 15px 15px 8px 8px; background: linear-gradient(110deg, #c0d3e8, #f5f9fc 45%, #adc6df); border: 1px solid #e6f4ff; flex: 0 0 auto; }
.fnd-explorer::before { content: ""; position: absolute; top: 5px; left: 5px; width: 25px; height: 18px; border-radius: 11px 11px 8px 8px; border: 1px solid #789cba; background: linear-gradient(140deg, #3e98b4, #12384d); }
.fnd-explorer::after { content: ""; position: absolute; bottom: 5px; left: 15px; width: 6px; height: 6px; border-radius: 50%; background: #d2a84a; }
.fnd-explorer > span { position: absolute; bottom: -5px; left: 5px; width: 8px; height: 10px; border-radius: 2px; background: #bbd0e4; box-shadow: 17px 0 0 #bbd0e4; }
.fnd-bag { position: relative; display: inline-block; width: 35px; height: 40px; flex: 0 0 auto; border-radius: 10px 10px 7px 7px; background: linear-gradient(130deg, #6bdbe5, #0799b4); border: 1px solid #a0edf0; }
.fnd-bag::before { content: ""; position: absolute; left: 9px; top: -7px; width: 15px; height: 8px; border: 2px solid #adecf0; border-bottom: 0; border-radius: 5px 5px 0 0; }
.fnd-bag::after { content: ""; position: absolute; inset: 17px 5px 5px; border: 1px solid #b6f2f05c; border-top: 2px solid #cff5f0; border-radius: 4px; background: #117e972a; }
.fnd-pair-status { min-height: 29px; color: #bfd6e8; font-size: .83rem; text-align: center; margin: 14px 0; }
.fnd-pairs { max-width: 650px; margin: 18px auto 0; padding: 17px; border: 1px dashed #446781; border-radius: 16px; background: #081c304d; }
.fnd-pairs h3 { color: #9db8d0; font-size: .8rem; text-align: center; }
.fnd-pair-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 13px 0 0; }
.fnd-pair-list li { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; background: #20404c; border: 1px solid #548178; border-radius: 12px; }
.fnd-pair-preview { display: inline-flex; align-items: center; gap: 10px; direction: ltr; min-height: 52px; flex: 0 0 auto; }
.fnd-pair-preview > .fnd-explorer, .fnd-pair-preview > .fnd-bag { transform: scale(.73); margin-inline: -4px; }
.fnd-pair-preview > span:nth-child(2) { color: #a9daca; font-size: 1.1rem; }
.fnd-unpair { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #72999b; border-radius: 10px; background: #22454b; color: #e9f6f6; font-size: 1.45rem; }
.fnd-unpair:hover { background: #315b61; }
.fnd-compare-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 110px; align-content: center; max-width: 207px; margin-inline: auto; }
.fnd-counter { display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 49px; border: 1px solid #ead19a; border-radius: 50%; background: linear-gradient(135deg, #f0d68c, #bf9130); color: #3b391f; font-size: 1.35rem; font-weight: 600; padding: 0; }
.fnd-compare-group:nth-child(2) .fnd-counter { border-color: #a5edf0; background: linear-gradient(135deg, #7ce3e9, #12a3c0); color: #0c394e; }
.fnd-counter.is-counted, .fnd-counter.is-counted:disabled { box-shadow: 0 0 0 3px #f4fbff38; border: 2px solid #f3faff; opacity: 1; }
.fnd-count-label { color: #bcd3e6; font-size: .83rem; min-height: 26px; margin-top: 10px; }
.fnd-compare-answers { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fnd-compare-answers .outline-button { flex: 1 1 150px; padding: 11px 16px; max-width: 265px; font-size: .93rem; }
.fnd-compare-answers .fnd-answer-correct:disabled { border-color: #75c8af; background: #20564f; color: #e7fff5; opacity: 1; }
.fnd-compare-answers .fnd-answer-retry { border-color: #d2a84a; background: #54472d; }
.fnd-demo-pairs { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-block: 8px 12px; color: #a7e7e8; font-size: 1.55rem; direction: ltr; }
.fnd-solution { text-align: center; padding: 16px; margin: 17px auto; background: #1f4f4533; border: 1px solid #66ad9659; border-radius: 13px; color: #c3efdf; }
.fnd-lab-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; border: 0; padding: 0; margin: 23px 0; min-width: 0; }
.fnd-lab-rules legend { width: 100%; padding: 0 0 13px; text-align: center; font-size: .88rem; color: #c5d5e6; }
.fnd-lab-rules .outline-button { padding: 9px 17px; min-height: 46px; font-size: .87rem; }
.fnd-lab-rules .outline-button.is-chosen { border-color: #edd393; background: #534a2e; color: #fae7b8; box-shadow: inset 0 -3px #d2a84a; }
.fnd-lab-result { margin: 24px auto 0; max-width: 660px; border: 1px solid #537b8c; border-radius: 17px; padding: 18px 21px; background: #133344; }
.fnd-lab-result h2 { font-size: 1.03rem; color: #b3e4e1; margin-bottom: 12px; }
.fnd-lab-result p { font-size: .83rem; color: #b9d0df; margin-top: 10px; }
.fnd-lab-result ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.fnd-lab-result li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: .76rem; color: #b4ccdc; }
.fnd-lab-result li strong { display: block; font-size: .84rem; color: #e2eff5; margin-top: 3px; }
.fnd-mini-shape { display: grid; place-items: center; width: 42px; height: 45px; flex: 0 0 42px; }
.fnd-mini-shape .fnd-piece { transform: scale(.58); }
.fnd-evidence-lesson { min-width: 0; flex: 1; }
.fnd-evidence-lesson strong { display: block; font-size: .88rem; color: #d7e8f7; font-weight: 600; }
.fnd-evidence-lesson small { display: block; font-size: .72rem; color: #92aac2; }
.fnd-evidence .evidence-copy { flex: 1; }
@media (max-width: 700px) {
  .fnd-progress { flex-wrap: wrap; gap: 7px; }
  .fnd-progress .progress-stop { flex: 1 1 105px; font-size: .68rem; padding: 8px; }
  .fnd-progress .progress-stop span { display: block; }
  .fnd-progress .progress-stop i { width: 23px; height: 23px; }
  .fnd-piece-grid { gap: 10px; }
  .fnd-piece-button { min-height: 122px; padding-inline: 5px; }
  .fnd-piece-stage { height: 75px; }
  .fnd-piece-label { font-size: .68rem; }
  .fnd-match-board, .fnd-compare-board { gap: 11px; }
  .fnd-match-group, .fnd-compare-group { padding: 14px 9px; }
  .fnd-match-pieces { gap: 8px; }
  .fnd-match-item { min-height: 78px; }
  .fnd-compare-items { gap: 9px; }
  .fnd-sample { gap: 12px; }
  .fnd-lab-result ul { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .fnd-piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnd-piece-label { font-size: .74rem; }
  .fnd-match-pieces { grid-template-columns: 1fr; max-width: 80px; }
  .fnd-match-item { min-height: 71px; }
  .fnd-compare-group { padding-inline: 6px; }
  .fnd-compare-group h2, .fnd-match-group h2 { font-size: .8rem; }
  .fnd-compare-items { gap: 8px; }
  .fnd-counter { width: 44px; height: 44px; flex-basis: 44px; }
  .fnd-compare-answers .outline-button { flex-basis: 100%; max-width: none; }
  .fnd-help { padding: 12px; font-size: .81rem; }
  .fnd-sample { flex-wrap: wrap; justify-content: center; }
  .fnd-pairs { padding: 12px 8px; }
  .fnd-lab-result { padding: 15px; }
  .fnd-evidence .evidence-row { gap: 10px; align-items: flex-start; flex-direction: column; }
}

.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition: none !important; }
@media (max-width: 1000px) {
  .app-shell { width: calc(100% - 48px); }
  .hero { min-height: 570px; gap: 20px; }
  .hero h1 { font-size: 2.4rem; }
  .hero-description { font-size: .95rem; }
  .hero .button-row { gap: 10px; }
  .hero .primary-button, .hero .outline-button { padding-inline: 18px; }
  .lesson-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 17px; }
  .lesson-card { padding: 21px; }
  .quantity-field { gap: 10px; }
  .quantity-group { gap: 8px; padding: 10px; }
  .journey-strip { gap: 18px; padding: 22px; }
  .strip-step { gap: 8px; }
  .strip-number { width: 28px; height: 28px; }
}
@media (max-width: 760px) {
  :root { --orbit-radius: 177px; }
  .app-shell { width: calc(100% - 36px); }
  .app-header { min-height: 86px; gap: 12px; }
  .brand-title { font-size: 1.1rem; }
  .brand-caption { font-size: .63rem; }
  .nav-tools { gap: 7px; }
  .subtle-button, .language-button { padding: 9px 12px; font-size: .78rem; min-height: 44px; border-radius: 11px; }
  .hero { display: flex; flex-direction: column; gap: 14px; padding-block: 20px 32px; min-height: 0; }
  .planet-stage { order: -1; width: min(410px, 100%); flex: 0 0 auto; margin-inline: auto; }
  .hero-copy { text-align: center; max-width: 500px; }
  .hero h1 { font-size: 2.25rem; }
  .eyebrow { margin-bottom: 15px; }
  .hero-description { margin: 14px auto 23px; max-width: 435px; }
  .hero .button-row { justify-content: center; }
  .hero-note { margin-top: 14px; justify-content: center; }
  .journey-strip { grid-template-columns: repeat(3, 1fr); gap: 17px 8px; padding: 20px 14px; }
  .strip-title { grid-column: 1 / -1; text-align: center; }
  .strip-step { justify-content: center; font-size: .76rem; }
  .lesson-layout { grid-template-columns: 1fr; }
  .station-card { display: grid; grid-template-columns: 100px 1fr; gap: 0 15px; text-align: start; padding: 14px 20px; align-items: center; }
  .station-visual { grid-row: span 4; min-height: 135px; }
  .ship { width: 50px; height: 84px; border-bottom-width: 8px; }
  .ship::before { width: 22px; height: 22px; top: 22px; left: 14px; }
  .ship::after { width: 20px; height: 27px; bottom: -30px; left: 16px; }
  .route-note { grid-column: 2; margin-top: 9px; padding-top: 9px; }
  .session-header { padding-block: 25px 20px; }
  .session-heading h1 { font-size: 1.4rem; }
  .progress-stop { gap: 6px; }
  .app-footer { flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding-block: 18px; text-align: center; }
  .builders { gap: 12px; }
}
@media (max-width: 480px) {
  :root { --orbit-radius: clamp(125px, 41vw, 177px); }
  .app-shell { width: calc(100% - 28px); }
  .app-header { flex-wrap: wrap; gap: 9px; padding-block: 14px; justify-content: center; }
  .brand { margin-inline-end: auto; gap: 10px; }
  .brand-orbit { width: 32px; height: 32px; }
  .brand-orbit::before { width: 41px; height: 16px; top: 7px; left: -6px; }
  .brand-title { font-size: 1.02rem; }
  .brand-caption { display: none; }
  .parent-nav { font-size: .72rem; }
  .nav-tools { gap: 5px; }
  .nav-tools .subtle-button, .language-button { padding-inline: 9px; }
  .hero { gap: 14px; padding-top: 18px; }
  .hero h1 { font-size: 1.95rem; }
  .hero-description { font-size: .9rem; line-height: 1.95; }
  .hero .button-row { gap: 10px; }
  .hero .primary-button, .hero .outline-button { padding-inline: 16px; font-size: .87rem; min-height: 52px; }
  .hero-note { font-size: .71rem; }
  .planet-label { font-size: .57rem; }
  .planet-badge { font-size: 1.1rem; padding: 8px 12px; min-width: 65px; }
  .orbit-letter { width: 37px; height: 37px; font-size: 1.2rem; }
  .journey-strip { gap: 13px 7px; padding: 18px 10px; margin-bottom: 25px; }
  .strip-step { flex-direction: column; gap: 7px; text-align: center; font-size: .73rem; }
  .session-header { gap: 14px; }
  .session-heading { gap: 9px; }
  .session-heading h1 { font-size: 1.24rem; }
  .progress-track { gap: 6px; margin-bottom: 18px; }
  .progress-stop { flex-direction: column; padding: 8px 4px; gap: 5px; border-radius: 10px; }
  .progress-stop i { width: 25px; height: 25px; }
  .progress-label { font-size: .63rem; }
  .lesson-card { padding: 15px; border-radius: 20px; }
  .mentor { padding: 14px; gap: 0 10px; grid-template-columns: 34px 1fr; }
  .mentor-orb { width: 32px; height: 32px; }
  .mentor p { font-size: .88rem; }
  .mentor-label { font-size: .64rem; }
  .quantity-field { margin-block: 21px 13px; min-height: 135px; gap: 8px; }
  .quantity-group { flex: 1; min-width: 65px; gap: 7px; padding: 8px; border-radius: 15px; }
  .quantity-group.zero { min-width: 65px; }
  .item { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  .math-plus { flex-basis: 18px; font-size: 1.25rem; }
  .equation { margin-block: 12px 20px; font-size: 1.85rem; }
  .answer-grid { grid-template-columns: repeat(4, minmax(44px, 1fr)); max-width: 290px; gap: 8px; }
  .answer-button { min-height: 46px; }
  .lesson-actions { gap: 8px; margin-top: 21px; }
  .lesson-actions .outline-button, .lesson-actions .primary-button { padding-inline: 15px; font-size: .8rem; }
  .station-card { grid-template-columns: 77px 1fr; padding: 12px 16px; gap: 0 13px; }
  .station-card p { font-size: .75rem; }
  .builder { padding: 13px 9px; }
  .builder-label { font-size: .73rem; }
  .stepper { gap: 8px; }
  .stepper button { width: 44px; height: 44px; }
  .stepper strong, .stepper output { font-size: 1.35rem; min-width: 20px; }
  .summary-wrap { margin-block: 28px 35px; }
  .summary-intro h1 { font-size: 1.65rem; }
  .summary-grid { gap: 8px; }
  .stat { padding: 15px 8px; border-radius: 14px; }
  .stat strong { font-size: 1.55rem; }
  .stat span, .stat p { font-size: .69rem; }
  .evidence-list { padding-inline: 14px; }
  .evidence-row { gap: 12px; }
  .evidence-equation { min-width: 72px; font-size: 1rem; }
  .evidence-copy { font-size: .75rem; }
  .outdoor { padding: 17px; }
  .summary-actions { gap: 9px; }
  .summary-actions .primary-button, .summary-actions .outline-button { font-size: .85rem; padding-inline: 18px; }
  dialog { padding: 20px; border-radius: 19px; max-height: 88vh; }
  .dialog-header h2 { font-size: 1.1rem; }
  .dialog-copy { font-size: .82rem; }
  .consent { padding: 13px; font-size: .79rem; }
}
@media (max-width: 380px) {
  .builders { grid-template-columns: 1fr; }
  .builder { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px; }
  .builder-label { margin-bottom: 0; }
  .session-heading { gap: 5px; }
  .brand { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .orbit-letter { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(0deg - var(--angle))); }
  .item:not(:disabled):hover { transform: none; }
}

/* Original countable objects: same-sized, stable within each problem. */
.count-object { display: block; width: 40px; height: 40px; flex: 0 0 auto; pointer-events: none; }
.item.count-item, .item.count-item.cyan { color: #f0ce74; background: #132c43; border-color: #67829e; box-shadow: none; }
.item.count-item.cyan { border-color: #64a5b5; }
.item.count-item .count-object { width: calc(100% - 4px); height: calc(100% - 4px); }
.count-number, .fnd-counter-number { position: absolute; inset-inline-end: -4px; top: -5px; display: grid; place-items: center; min-width: 21px; height: 21px; padding-inline: 3px; border-radius: 7px; background: #f5fbff; color: #102d43; font-size: 14px; font-weight: 700; line-height: 1; pointer-events: none; box-shadow: 0 1px 3px #0006; }
.fnd-counter, .fnd-compare-group:nth-child(2) .fnd-counter { position: relative; color: #f0ce74; background: #132c43; border-radius: 12px; border-color: #67829e; }
.fnd-counter .count-object { width: 38px; height: 38px; }
.fnd-match-item > .count-object { width: 48px; height: 48px; color: #f0ce74; }
.fnd-pair-preview > .count-object { width: 35px; height: 35px; color: #f0ce74; }
.fnd-demo-pair { display: inline-flex; align-items: center; gap: 8px; }
.fnd-demo-pair .count-object { width: 28px; height: 28px; color: #f0ce74; }
.item.count-item.counted, .fnd-compare-group .fnd-counter.is-counted { border-color: #f3faff; }
:root { --guide-panel: #123a49; }
.lesson-guide { margin: 1rem 0; padding: 1rem; border: 1px solid #4c8f99; border-radius: 20px; background: var(--guide-panel); color: #f0fafb; }

/* The child sees the current invitation and the objects. Details are optional. */
.is-learning .app-header { min-height: 76px; gap: 12px; }
.is-learning .brand-caption { display: none; }
.fnd-focused { max-width: 820px; margin-inline: auto; }
.fnd-focused .session-header { padding-block: 8px; gap: 8px; flex-wrap: nowrap; }
.fnd-focused .session-header h1:not(.sr-only) { font-size: 1rem; }
.fnd-focused .fnd-progress { flex: 1; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; }
.fnd-focused .progress-stop { flex: 0 1 36px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.fnd-focused .progress-stop i { width: 30px; height: 30px; font-size: .78rem; }
.fnd-focused .progress-stop.current i { color: #16283b; background: #f0d080; border-color: #f0d080; }
.fnd-focused .progress-stop.done i { color: #c2fff2; background: #20574f; border-color: #67b9a8; }
.fnd-focused .fnd-lesson { padding: 20px; border-radius: 24px; }
.fnd-focused .mentor { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 0; background: transparent; border: 0; border-radius: 0; min-height: 82px; }
.fnd-focused .mentor p { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.65; }
/* One local atlas is shared by lessons and the adult-only voice trial. */
.mentor-companion { display: block; position: relative; flex: 0 0 auto; width: 104px; height: 104px; overflow: hidden; border-radius: 24px; background: #10253d; pointer-events: none; }
.companion-sprite { display: block; width: 100%; height: 100%; background: url("assets/nayef-companion-v1.webp") 0 0 / 200% 200% no-repeat; }
.mentor-companion[data-companion-state="speaking"] .companion-sprite { background-position: 100% 0; animation: companion-speak .75s ease-in-out infinite alternate; }
.mentor-companion[data-companion-state="listening"] .companion-sprite { background-position: 0 100%; }
.mentor-companion[data-companion-state="thinking"] .companion-sprite { background-position: 100% 100%; }
.mentor-companion[data-companion-state="listening"] { box-shadow: 0 0 0 2px #79d8de88; }
.mentor-companion[data-companion-state="thinking"] { box-shadow: 0 0 0 2px #e4c27066; }
.teaching-board { position: relative; isolation: isolate; }
.teaching-pointer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden; }
.teaching-pointer path { fill: none; stroke: #f0cf7e; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.teaching-pointer circle { fill: #f0cf7e; stroke: #11273c; stroke-width: 2; }
.teaching-focus { outline: 2px solid #f0cf7e; outline-offset: 5px; }
.writing-start.teaching-focus { outline: none; stroke: #f0cf7e; stroke-width: 4; }
.mentor-companion[data-pointing-side="left"]:not([data-renderer="3d"]) { transform: scaleX(-1); }
.mentor-companion[data-pointing-side] .companion-sprite { animation: none; }
@keyframes companion-speak { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.motion-paused .companion-sprite { animation: none !important; transform: none !important; }
.companion-welcome { display: flex; align-items: center; gap: 16px; margin-block: 19px 27px; max-width: 480px; }
.companion-welcome .mentor-companion { width: 88px; height: 88px; }
.companion-welcome .hero-description { margin: 0; min-width: 0; text-align: start; }
.adult-companion-turn { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; margin-block: 18px; }
.adult-companion-turn .mentor-companion { width: 128px; height: 128px; }
.adult-companion-turn .dialog-copy:empty { display: none; }
@media (max-width: 760px) { .companion-welcome { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .companion-sprite { animation: none !important; transform: none !important; } }
.fnd-focused .voice-controls { gap: 6px; margin: 6px 0 12px; }
.fnd-focused .voice-icon { width: 46px; min-height: 46px; padding: 10px; border: 1px solid #456482; border-radius: 50%; color: #d1edf2; }
.fnd-focused .voice-icon[aria-pressed="true"] { background: #344256; border-color: #9ca7b6; color: #f2f5f7; }
.fnd-focused .voice-disclosure { flex-basis: auto; margin-inline-start: auto; font-size: .67rem; color: #b8cddf; }
.fnd-focused #voiceStatus:not(.sr-only) { padding-block: 6px; }
.fnd-focused .fnd-rule { margin: 8px auto 12px; padding: 0; border: 1px solid #668aa2; background: #123047; }
.fnd-focused .fnd-rule-model { height: 42px; width: 122px; background: transparent; }
.fnd-focused .fnd-piece-grid { gap: 12px; margin: 12px auto 18px; max-width: 560px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fnd-focused .fnd-piece-button { min-height: 112px; padding: 10px 4px; }
.fnd-focused .fnd-piece-stage { height: 88px; }
.fnd-focused .fnd-submit { margin: 12px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fnd-focused .fnd-submit button { min-height: 48px; padding: 10px 18px; font-size: .92rem; }
.fnd-instructions { color: #b9d0e2; font-size: .82rem; line-height: 1.8; }
.fnd-instructions summary, .fnd-lab-result summary, .summary-details summary { min-height: 44px; padding: 10px 4px; cursor: pointer; }
summary:focus-visible { outline: 3px solid #7ee6ed; outline-offset: 3px; border-radius: 7px; }
.fnd-instructions[open] { padding-bottom: 12px; }
.fnd-instructions p { margin: 4px 0 10px; max-width: 650px; }
.fnd-focused .fnd-help { text-align: center; width: fit-content; margin: 12px auto; padding: 10px 14px; }
.fnd-focused .fnd-sample { justify-content: center; }
.fnd-focused .fnd-match-board, .fnd-focused .fnd-compare-board { margin-block: 12px; }
.fnd-focused .fnd-pairs { padding: 4px 8px; margin-top: 10px; }
.fnd-focused .fnd-pair-list { margin-block: 5px; }
.fnd-focused .fnd-lab-rules { gap: 8px; margin-block: 12px; }
.fnd-focused .fnd-lab-rules button { min-width: 46px; min-height: 46px; padding: 8px; }
.fnd-focused .fnd-lab-rules .fnd-piece { width: 25px; height: 25px; }
.fnd-piece.fnd-neutral { background: #dce6f1; }
.fnd-focused .lesson-guide { margin: 0; padding: 0; border: 0; background: transparent; }
.fnd-focused #guideStatus:empty { display: none; }
.fnd-focused #guideStatus { color: #bad4e3; font-size: .82rem; padding: 6px 0; }
.fnd-focused .sr-only { min-height: 0; min-width: 0; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; }
.summary-details > summary { color: #dbeef5; font-weight: 600; }
@media (max-width: 600px) {
  .is-learning .app-shell { width: calc(100% - 24px); }
  .is-learning .app-header { min-height: 68px; }
  .is-learning .brand-title { font-size: 1rem; }
  .is-learning .brand { gap: 8px; }
  .is-learning .brand-orbit { width: 29px; height: 29px; }
  .is-learning .brand-orbit::before { width: 36px; height: 15px; top: 6px; left: -5px; }
  .is-learning .nav-tools { gap: 6px; flex-wrap: nowrap; }
  .is-learning .nav-tools button { padding: 8px; min-height: 44px; font-size: .74rem; }
  .fnd-focused .fnd-lesson { padding: 14px; border-radius: 20px; }
  .fnd-focused .mentor { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; min-height: 84px; }
  .mentor { grid-template-columns: 84px minmax(0, 1fr); }
  .mentor-companion { width: 84px; height: 84px; border-radius: 20px; }
  .companion-welcome .mentor-companion { width: 76px; height: 76px; }
  .adult-companion-turn { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  .adult-companion-turn .mentor-companion { width: 100px; height: 100px; }
  .fnd-focused .fnd-piece-grid { gap: 8px; }
  .fnd-focused .fnd-piece-button { min-height: 94px; padding: 6px 3px; }
  .fnd-focused .fnd-piece-stage { height: 80px; }
  .fnd-focused .fnd-piece.fnd-large { width: 52px; height: 52px; }
  .fnd-focused .fnd-piece.fnd-small { width: 36px; height: 36px; }
  .fnd-focused .fnd-rule-model .fnd-piece { width: 24px; height: 24px; }
  .fnd-focused .fnd-lab-rules .fnd-piece { width: 25px; height: 25px; }
  .fnd-focused .fnd-submit button { padding-inline: 12px; }
}
.lesson-guide p { margin: .6rem 0; line-height: 1.8; overflow-wrap: anywhere; }
.lesson-guide #guideQuestion { font-weight: 700; }
.lesson-guide small { color: #c5dde0; line-height: 1.7; }
.lesson-guide .button-row { flex-wrap: wrap; }

/* Match each comparison answer to its physical group in both languages. */
.fnd-compare-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 650px; margin-inline: auto; gap: 18px; }
.fnd-compare-answers .outline-button { min-width: 0; width: 100%; max-width: none; }
.fnd-compare-answers [data-value="same"] { grid-column: 1 / -1; justify-self: center; max-width: 440px; }

.pilot-login { max-width: 560px; margin: 8vh auto; }
.pilot-login form { display: grid; gap: 20px; }
.pilot-login input { width: 100%; min-height: 54px; padding: 12px; border-radius: 16px; border: 1px solid #7396ad; background: #10243b; color: #f5f8ff; font: inherit; direction: ltr; }
.pilot-status { position: fixed; z-index: 50; bottom: max(12px, env(safe-area-inset-bottom)); inset-inline: 12px; max-width: 720px; margin-inline: auto; padding: 18px; background: #142a40; color: #f5f8ff; border: 2px solid #e3be5c; border-radius: 20px; box-shadow: 0 8px 32px #0009; }
.pilot-status[hidden] { display: none; }
.pilot-status p { margin-top: 0; }
.pilot-status button { min-height: 44px; }

.numbers-objects { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; min-height:160px; padding:25px; margin:20px auto; max-width:490px; border:1px solid #86c8d566; border-radius:20px; background:#17394d; }
.numbers-objects .fnd-counter:disabled { opacity:1; }
.numbers-objects .fnd-counter { width:62px; height:62px; flex-basis:62px; }
.empty-basket { font-size:5rem; line-height:1; color:#bcecf2; }
.number-answers { display:grid; grid-template-columns:repeat(3,minmax(44px,1fr)); direction:ltr; gap:13px; max-width:430px; margin:25px auto; }
.number-answers button { min-height:66px; font-size:1.7rem; }
.writing-wrap { max-width:390px; margin:22px auto 10px; border:2px solid #71c9d4; border-radius:20px; overflow:hidden; background:#f2f8fa; }
.number-writing { display:block; width:100%; height:auto; touch-action:none; user-select:none; }
.writing-baseline { stroke:#a2bac9; stroke-width:1; stroke-dasharray:4 5; }
.writing-guide { fill:none; stroke:#7699b2; stroke-width:15; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 12; }
.writing-start { fill:#d4514e; }
.writing-ink { fill:none; stroke:#087a9a; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.writing-tools { display:flex; gap:12px; justify-content:center; }
.number-model { font-size:2.5rem; text-align:center; color:#e6cf83; }
.number-progress { flex-wrap:wrap; gap:6px; }
.number-progress .progress-stop { flex:0 0 auto; padding:4px; }
.number-progress .progress-stop i { width:27px; height:27px; }
.learning-path { padding:25px; margin-bottom:35px; border:1px solid var(--line); border-radius:20px; }
.learning-path h2 { font-size:1.2rem; }
@media(max-width:480px) { .number-progress { max-width:195px; } .number-answers { gap:10px; } }
/* Diagnostics are confined to the parent's collapsed response-time details. */
#adultDialogueTiming { white-space: pre-line; }

/* Articulated local 3D companion; the approved image remains the fallback. */
.mentor-companion[data-renderer="3d"] .companion-sprite { visibility: hidden; animation: none; }
.companion-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fnd-focused .mentor-companion { width: 140px; height: 140px; }
.spatial-stage { color: var(--muted); font-size: 1rem; }
.spatial-board { margin-block: 1.25rem; }
.spatial-positions { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 350px; margin: auto; padding: 18px; border-radius: 20px; background: #0b1d32; }
.position-choice { display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid #598397; border-radius: 18px; background: #17384b; cursor: pointer; }
.position-choice:disabled { cursor: default; opacity: 1; }
.position-choice.correct-answer, .pattern-option.correct-answer { border-color: #86e4b6; box-shadow: 0 0 0 3px #86e4b622; }
.spatial-shelf { width: 80%; height: 12px; border-radius: 5px; background: #c49b61; box-shadow: 0 8px 0 #061322; }
.spatial-positions.levels .position-choice { box-shadow: 0 7px 0 #8d714c; }
.pattern-symbol { width: 46px; height: 46px; flex: 0 0 auto; }
.symbol-0 { fill: #f0c567; }.symbol-1 { fill: #69d3d9; }.symbol-2 { fill: #b3a0ee; }
.spatial-queue { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 12px; max-width: 550px; margin: auto; }
.queue-pieces { display: flex; justify-content: space-evenly; gap: 10px; grid-column: 2; grid-row: 1; }
.queue-destination { color: #f0c567; font-size: 54px; grid-column: 1; grid-row: 1; }
.queue-arrow { grid-column: 1/-1; font-size: 50px; text-align: center; color: #c5ddec; line-height: 1; }
.spatial-queue[data-goal="right"] { grid-template-columns: 1fr 62px; }
.spatial-queue[data-goal="right"] .queue-destination { grid-column: 2; }
.spatial-queue[data-goal="right"] .queue-pieces { grid-column: 1; }
.reference-piece { border-style: dashed; background: #10253d; }
.pattern-sequence { display: flex; align-items: center; justify-content: center; gap: 5px; margin-block: 16px; flex-wrap: nowrap; }
.pattern-start { color: #afc4d4; font-size: 21px; }
.pattern-slot { display: grid; place-items: center; flex: 0 1 51px; min-width: 0; min-height: 52px; border-radius: 10px; border: 1px solid #2c546e; color: #7b96ac; background: #10253d; }
.pattern-slot .pattern-symbol { width: 100%; max-width: 42px; height: 42px; }
.pattern-slot.pattern-unit { border-color: #dcb565; background: #26384c; }
.pattern-slot[aria-current="step"] { outline: 2px solid #c9e9f4; outline-offset: 2px; }
.pattern-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pattern-option { padding: 8px; border: 2px solid #4c7189; border-radius: 14px; background: #142c42; }
.pattern-option .pattern-sequence { margin: 0; }.pattern-option .pattern-slot { width: 38px; flex-basis: 38px; }
.pattern-palette { display: flex; justify-content: center; gap: 16px; }.pattern-palette button { padding: 10px; }
.pattern-key { display: flex; justify-content: center; gap: 22px; }.pattern-key>span { display: flex; align-items: center; gap: 8px; }
.spatial-completed { text-align: center; color: #86e4b6; }
@media (max-width: 600px) {
  .fnd-focused .mentor-companion { width: 106px; height: 106px; }
  .pattern-sequence { gap: 3px; }.pattern-slot { min-height: 38px; }.pattern-slot .pattern-symbol { height: 30px; }
  .spatial-queue { gap: 6px; grid-template-columns: 38px 1fr; }.spatial-queue[data-goal="right"] { grid-template-columns: 1fr 38px; }
  .queue-destination { font-size: 38px; }.queue-pieces { gap: 5px; }.position-choice { width: 64px; height: 64px; }
  .pattern-key { gap: 12px; }.pattern-key .pattern-symbol { width: 34px; height: 34px; }
}

/* A focused voice conversation keeps the microphone state and end control visible. */
#parentDialog.voice-conversation > :not(.dialog-header):not(#adultDialoguePanel) { display: none; }
#parentDialog.voice-conversation { width: min(620px, calc(100% - 24px)); }
.voice-conversation #adultDialoguePanel { margin: 0; padding: 16px; }
.voice-conversation .adult-companion-turn { grid-template-columns: 1fr; text-align: center; gap: 8px; }
.voice-conversation .adult-companion-turn .mentor-companion { margin-inline: auto; width: 150px; height: 150px; }
.adult-back { display: none; }
.voice-conversation .adult-back { display: inline-flex; }
.adult-call-controls { position: sticky; bottom: 0; padding-block: 12px; background: #102c40; z-index: 2; }
.adult-call-controls [aria-pressed="true"] { background: #943d50; color: #fff; }
.adult-call-details { margin-top: 10px; }
.adult-mic-level { --mic-level: 0; display: flex; justify-content: center; align-items: center; height: 42px; gap: 6px; }
.adult-mic-level span { height: calc(6px + var(--mic-level) * 34px); width: 7px; border-radius: 6px; background: #7994a9; }
.adult-mic-level span:nth-child(2n) { height: calc(6px + var(--mic-level) * 22px); }
[data-voice-state="listening"] .adult-mic-level span { background: #5ee0d0; }

.progress-disclosure { margin-block: 20px; border: 1px solid #365a75; border-radius: 16px; background: #102a3e; overflow: hidden; }
.progress-disclosure > summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 1rem; color: #eef5ff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-disclosure > summary::-webkit-details-marker { display: none; }
.progress-disclosure > summary::after { content: "⌄"; font-size: 1.15rem; color: #72d5df; transition: transform .18s ease; }
.progress-disclosure[open] > summary::after { transform: rotate(180deg); }
.progress-disclosure-body { padding: 0 16px 16px; border-top: 1px solid #29485f; }
.progress-disclosure.nested { margin-block: 12px; background: #15364c; }
.progress-disclosure.nested > summary { padding: 13px 15px; font-size: .9rem; }
.progress-disclosure.nested > ul { padding: 0 12px 12px; margin: 0; }
@media(max-width:480px) {
  .progress-disclosure > summary { padding: 14px; }
  .progress-disclosure-body { padding-inline: 10px; }
}