@import url('https://fonts.googleapis.com/css2?family=Andika:wght@400;700&display=swap');
:root{--navy:#14213d;--blue:#3f67d8;--teal:#138a72;--green:#168f55;--red:#d84b5b;--gold:#e2a72e;--ink:#172033;--muted:#657184;--paper:#fff;--line:#dce3ee;--bg:#f2f6fb;--shadow:0 16px 42px #18305b1b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(145deg,#edf7f3,#eef3ff 55%,#fff8e8);font-family:Arial,"Noto Sans Hebrew",sans-serif;color:var(--ink)}button,select,a{font:inherit}button,a{touch-action:manipulation}.english,.word,.letters,.sentence-en,.passage{font-family:Andika,"Comic Sans MS",sans-serif;direction:ltr}
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:#14213df2;color:#fff;box-shadow:0 5px 20px #101a3260;backdrop-filter:blur(12px)}.brand{margin-inline-end:auto;color:#fff;text-decoration:none;font:700 1.18rem Andika,sans-serif;white-space:nowrap}.home-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff18;color:#fff;text-decoration:none;font-size:1.35rem}.selectors{display:flex;gap:8px}.selectors label{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#d9e2ff}.selectors select{min-width:92px;padding:9px 30px 9px 10px;border:1px solid #ffffff40;border-radius:10px;background:#fff;color:#182343;font-weight:800}
.mode-nav{position:sticky;top:64px;z-index:25;display:flex;gap:6px;overflow-x:auto;padding:8px max(12px,env(safe-area-inset-right));background:#fff;border-bottom:1px solid var(--line);scrollbar-width:none}.mode-nav::-webkit-scrollbar{display:none}.mode-btn{flex:0 0 auto;padding:9px 13px;border:0;border-radius:10px;background:#edf1f7;color:#43506a;font-weight:800;cursor:pointer}.mode-btn.active{background:var(--blue);color:#fff;box-shadow:0 4px 10px #3f67d844}
.lesson-shell{width:min(980px,100%);margin:auto;padding:18px}.lesson-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:5px 0 14px}.lesson-title h1{margin:0;font-size:clamp(1.45rem,4vw,2.1rem)}.lesson-title p{margin:5px 0 0;color:var(--muted);font-weight:700}.progress-chip{padding:7px 12px;border-radius:999px;background:#e8f6f0;color:#137553;font-weight:900;white-space:nowrap}
.panel{min-height:520px;border:1px solid #fff;border-radius:24px;background:#ffffffd9;box-shadow:var(--shadow);overflow:hidden}.mode-panel{display:none}.mode-panel.active{display:block}.panel-pad{padding:clamp(18px,5vw,42px)}
.card-stage{position:relative;min-height:560px;overflow:hidden}.card-track{display:flex;min-height:560px;transition:transform .3s ease;will-change:transform}.study-card{flex:0 0 100%;min-height:560px;padding:clamp(22px,5vw,50px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(150deg,#fff,#f4f8ff)}.study-card.cover{background:linear-gradient(145deg,#e9f8f2,#edf2ff 58%,#fff5d8)}.study-card.finish{background:linear-gradient(145deg,#fff5d8,#e9f8f2)}.eyebrow{padding:7px 14px;border-radius:999px;background:#e9eefb;color:#3857aa;font-weight:900}.word{margin:18px 0 0;max-width:100%;font-size:clamp(3.2rem,13vw,7.4rem);font-weight:700;line-height:1;overflow-wrap:anywhere;color:#111;transition:color .25s}.word.done{color:var(--green)}.translation{margin-top:22px;font-size:clamp(1.7rem,6vw,3.2rem);font-weight:800;color:#29483d}.letters{display:flex;justify-content:center;gap:clamp(2px,1vw,9px);width:100%;margin-top:32px;font-size:clamp(2rem,9vw,5rem);font-weight:400}.letter{min-width:0;transition:.12s}.letter.active{color:var(--green);font-weight:700;transform:scale(1.17)}.card-status{min-height:25px;margin-top:22px;color:var(--muted);font-weight:800}.cover h2,.finish h2{margin:18px 0 6px;font-size:clamp(2rem,7vw,4rem)}.cover p,.finish p{max-width:620px;font-size:clamp(1.15rem,4vw,1.65rem);line-height:1.5;color:#4e6075}.cover-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}.primary,.secondary,.good,.again{min-height:46px;padding:11px 18px;border:0;border-radius:12px;font-weight:900;cursor:pointer}.primary{background:var(--blue);color:#fff;box-shadow:0 4px 0 #2d4c9e}.secondary{background:#e8edf5;color:#263651}.good{background:var(--green);color:#fff}.again{background:#f5e8ea;color:#9b3341}.card-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:14px;background:#14213ddd;color:#fff;font-size:2rem;cursor:pointer}.card-arrow:disabled{opacity:.18}.card-prev{left:12px}.card-next{right:12px}.card-dots{position:absolute;z-index:4;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.card-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#aab7ca}.card-dot.active{background:var(--blue);transform:scale(1.35)}
.task-head{text-align:center}.task-head h2{margin:0;font-size:clamp(1.7rem,5vw,2.5rem)}.task-head p{color:var(--muted);font-weight:700}.task-card{width:min(680px,100%);margin:25px auto 0;padding:clamp(20px,5vw,36px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 28px #1e315015}.listen-button{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 24px;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:2.2rem;box-shadow:0 8px 0 #2d4b9a;cursor:pointer}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice{min-height:62px;padding:12px;border:2px solid #d9e1ed;border-radius:14px;background:#fff;font:700 clamp(1.25rem,5vw,2rem) Andika,sans-serif;cursor:pointer}.choice.correct{border-color:var(--green);background:#e9f8f1;color:#11764b}.choice.wrong{border-color:var(--red);background:#fff0f2;color:#a12f3d}.feedback{min-height:28px;margin-top:16px;text-align:center;font-weight:900}.big-read{margin:5px 0 12px;text-align:center;font:700 clamp(3rem,12vw,6.6rem) Andika,sans-serif;direction:ltr;overflow-wrap:anywhere}.reveal{min-height:55px;text-align:center;color:#27503e;font-size:1.55rem;font-weight:800}.self-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}.counter{text-align:center;color:var(--muted);font-weight:800;margin-top:14px}
.sentence-list{display:grid;gap:13px;margin-top:22px}.sentence-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}.sentence-en{font-size:clamp(1.18rem,4vw,1.55rem);font-weight:700}.speak-mini{width:44px;height:44px;border:0;border-radius:11px;background:#edf1fb;color:#365ac0;cursor:pointer}.passage{max-width:760px;margin:20px auto 0;padding:24px;border-right:5px solid var(--teal);border-radius:15px;background:#fff;font-size:clamp(1.25rem,4vw,1.65rem);line-height:1.85;text-align:left}.passage-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}
.mastery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.metric{padding:17px 10px;border-radius:15px;background:#f2f5fa;text-align:center}.metric strong{display:block;font-size:1.8rem;color:var(--blue)}.mastery-result{padding:18px;border-radius:16px;background:#edf1f7;text-align:center;font-weight:900}.mastery-result.pass{background:#e5f7ee;color:#107147}.free-note{margin-top:14px;text-align:center;color:var(--muted);font-size:.92rem}
.home-main{width:min(1050px,100%);margin:auto;padding:clamp(24px,6vw,60px) 18px}.hero{text-align:center}.hero h1{margin:12px 0 8px;font:700 clamp(2.25rem,8vw,5rem) Andika,sans-serif;color:#345cc5}.hero p{margin:0;color:#456457;font-size:clamp(1.12rem,3.8vw,1.55rem);font-weight:700;line-height:1.5}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:34px}.level-card{display:flex;flex-direction:column;min-height:230px;padding:20px;border:1px solid #fff;border-radius:20px;background:#fff;color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:.16s}.level-card:hover{transform:translateY(-4px)}.level-card .num{font:700 2.1rem Andika,sans-serif;color:var(--blue)}.level-card h2{margin:9px 0 7px;font-size:1.25rem}.level-card p{margin:0;color:var(--muted);line-height:1.4}.level-card .go{margin-top:auto;padding-top:15px;color:var(--teal);font-weight:900}.home-note{max-width:760px;margin:26px auto 0;padding:17px 20px;border-radius:16px;background:#ffffffb8;color:#43526a;text-align:center;line-height:1.5}
@media(max-width:900px){.level-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.site-header{flex-wrap:wrap}.brand{font-size:1rem}.selectors{order:3;width:100%}.selectors label{flex:1}.selectors select{width:100%;min-width:0}.mode-nav{top:112px}.lesson-shell{padding:10px}.panel{border-radius:17px}.card-stage,.card-track,.study-card{min-height:calc(100svh - 245px)}.card-arrow{top:auto;bottom:43px;width:43px;height:48px}.lesson-title{align-items:start}.choices{grid-template-columns:1fr}.mastery-grid{grid-template-columns:1fr}.level-grid{grid-template-columns:1fr}.level-card{min-height:180px}}@media(max-height:700px){.study-card{padding:16px}.word{font-size:clamp(2.7rem,11vw,5rem)}.letters{margin-top:18px}.translation{margin-top:12px}.card-status{margin-top:10px}}

/* Keep carousel geometry LTR while card content remains RTL. */
.card-track{direction:ltr}
.study-card{direction:rtl}

/* A calm visual identity for each level. */
body{transition:background .35s ease}
body[data-level="1"]{background:linear-gradient(145deg,#eef8f4,#f3f8ff 58%,#fff9ec)}
body[data-level="2"]{background:linear-gradient(145deg,#edf7ff,#f2f4ff 58%,#f8f3ff)}
body[data-level="3"]{background:linear-gradient(145deg,#f2efff,#f9f2ff 58%,#fff3f7)}
body[data-level="4"]{background:linear-gradient(145deg,#fff4ec,#fff8e9 58%,#fff2f2)}
body[data-level="5"]{background:linear-gradient(145deg,#eef7f0,#edf8f7 58%,#f4f7e9)}

/* Make the level identity visible across the full learning card. */
body[data-level="1"]{--level-card:linear-gradient(145deg,#e4f7ee,#eef8ff 62%,#fff4d9)}
body[data-level="2"]{--level-card:linear-gradient(145deg,#e1f2ff,#edf0ff 62%,#f4eaff)}
body[data-level="3"]{--level-card:linear-gradient(145deg,#ebe5ff,#f6e9ff 62%,#ffe9f1)}
body[data-level="4"]{--level-card:linear-gradient(145deg,#ffeadc,#fff2d5 62%,#ffe4e6)}
body[data-level="5"]{--level-card:linear-gradient(145deg,#dff2e5,#e0f4f1 62%,#edf1d8)}
body[data-level] .study-card,
body[data-level] .study-card.cover,
body[data-level] .study-card.finish{background:var(--level-card)}
.card-stage{touch-action:pan-y}
.card-arrow{direction:ltr;unicode-bidi:isolate}

/* English Basic home — designed for grades 6–9 and aligned with English for Noar. */
.home-page{
  --home-navy:#0d1730;
  --home-blue:#4f72ff;
  --home-cyan:#62d9cf;
  --home-lime:#b9f36b;
  --home-paper:#f5f7fb;
  --home-panel:#fff;
  --home-ink:#18223a;
  --home-muted:#64708a;
  background:var(--home-paper);
  color:var(--home-ink);
  transition:none;
}
.home-page::before{
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  height:790px;
  content:"";
  background:
    radial-gradient(circle at 82% 12%,#506ee73d 0 12%,transparent 35%),
    radial-gradient(circle at 13% 30%,#44cec526 0 10%,transparent 33%),
    linear-gradient(145deg,#0d1730,#111f42 56%,#142d4c);
}
.skip-link{
  position:fixed;
  z-index:100;
  top:10px;
  right:10px;
  padding:12px 17px;
  border-radius:10px;
  background:#fff;
  color:#111d3a;
  font-weight:900;
  transform:translateY(-150%);
}
.skip-link:focus{transform:none}
.home-topbar{
  position:relative;
  z-index:10;
  width:min(1180px,calc(100% - 32px));
  min-height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid #ffffff1f;
  color:#fff;
}
.home-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}
.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff35;
  border-radius:13px;
  background:linear-gradient(145deg,#6c85ff,#435ed0);
  box-shadow:0 8px 22px #050b1e55;
  font:700 .95rem Andika,sans-serif;
  letter-spacing:-.04em;
}
.home-brand>span:last-child{display:grid;gap:1px}
.home-brand strong{font:700 1.08rem Andika,sans-serif}
.home-brand small{color:#b9c6e6;font-size:.75rem}
.home-nav{display:flex;align-items:center;gap:6px}
.home-nav a{
  padding:10px 14px;
  border-radius:10px;
  color:#c9d5ef;
  text-decoration:none;
  font-size:.92rem;
  font-weight:800;
}
.home-nav a:hover{background:#ffffff0d;color:#fff}
.home-nav .all-sites-link{margin-inline-start:7px;border:1px solid #ffffff26;color:#fff}
.home-hero{
  position:relative;
  width:min(1180px,calc(100% - 32px));
  min-height:610px;
  margin:auto;
  padding:76px 0 88px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);
  align-items:center;
  gap:clamp(42px,7vw,96px);
  color:#fff;
}
.hero-copy{min-width:0}
.audience-chip,.section-kicker,.panel-kicker{
  color:var(--home-cyan);
  font-weight:900;
  letter-spacing:.02em;
}
.audience-chip{
  display:inline-flex;
  align-items:center;
  min-height:35px;
  padding:6px 13px;
  border:1px solid #62d9cf4a;
  border-radius:999px;
  background:#62d9cf12;
  font-size:.88rem;
}
.home-hero h1{
  margin:22px 0 18px;
  max-width:760px;
  font-size:clamp(3.2rem,7.2vw,6.1rem);
  font-weight:900;
  line-height:.97;
  letter-spacing:-.055em;
}
.home-hero h1 span{color:var(--home-lime)}
.hero-lead{
  max-width:650px;
  margin:0;
  color:#c6d2ea;
  font-size:clamp(1.1rem,2vw,1.36rem);
  font-weight:600;
  line-height:1.7;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta{
  min-height:67px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:10px 18px;
  border-radius:15px;
  color:#fff;
  text-decoration:none;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.cta:hover{transform:translateY(-2px)}
.cta>span:last-child{display:grid;text-align:right}
.cta strong{font-size:1.02rem}
.cta small{margin-top:2px;color:inherit;opacity:.74;font-size:.78rem}
.cta-primary{
  min-width:235px;
  background:linear-gradient(135deg,#526fff,#3c59d6);
  box-shadow:0 10px 30px #03091c69,0 0 0 1px #8397ff55 inset;
}
.cta-primary>span:first-child{font-size:1.45rem}
.cta-game{min-width:195px;border:1px solid #ffffff2c;background:#ffffff0d}
.cta-game:hover{background:#ffffff17}
.play-icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#b9f36b;
  color:#17233b;
  font-size:.8rem;
}
.trust-list{
  margin:25px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 23px;
  color:#aebbd5;
  font-size:.83rem;
  font-weight:700;
  list-style:none;
}
.trust-list li::before{margin-inline-end:7px;color:var(--home-cyan);content:"✓"}
.mission-panel{
  position:relative;
  padding:25px;
  border:1px solid #ffffff22;
  border-radius:25px;
  background:linear-gradient(145deg,#ffffff13,#ffffff09);
  box-shadow:0 28px 70px #04091c5c;
  backdrop-filter:blur(18px);
}
.mission-panel::before{
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:25px;
  background:linear-gradient(135deg,#64d8cc3c,transparent 42%,#7287ff2e);
  content:"";
}
.mission-topline{display:flex;align-items:start;justify-content:space-between;gap:16px}
.panel-kicker{font-size:.76rem}
.mission-topline h2{margin:5px 0 0;font-size:1.45rem}
.streak-badge{
  min-width:74px;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  gap:2px 7px;
  padding:9px 11px;
  border-radius:13px;
  background:#ffffff12;
  color:var(--home-lime);
}
.streak-badge strong{font:700 1.35rem Andika,sans-serif}
.streak-badge small{grid-column:1/-1;color:#aebbd5;text-align:center;font-size:.7rem}
.profile-level{margin-top:22px;padding:16px;border-radius:16px;background:#08122675}
.profile-level-copy{display:flex;align-items:center;justify-content:space-between;color:#ccd6ed;font-size:.83rem}
.profile-level-copy strong{color:#fff;font:700 .9rem Andika,sans-serif}
.xp-track,.level-progress{
  height:7px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#ffffff17;
}
.xp-track span,.level-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--home-cyan),var(--home-lime));
  transition:width .4s ease;
}
.daily-list{margin:17px 0 0;padding:0;display:grid;gap:8px;list-style:none}
.daily-list li{
  min-height:60px;
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:12px;
  padding:8px 11px;
  border:1px solid #ffffff12;
  border-radius:14px;
  background:#0710243d;
}
.mission-check{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #7d8fb556;
  border-radius:11px;
  color:#dce5f8;
  font:700 .9rem Andika,sans-serif;
}
.daily-list li>span:last-child{display:grid;gap:2px}
.daily-list strong{font-size:.89rem}
.daily-list small{color:#9eacc7;font-size:.72rem}
.daily-list li.complete{border-color:#62d9cf33;background:#62d9cf10}
.daily-list li.complete .mission-check{border-color:#62d9cf6b;background:#62d9cf;color:#0e2235}
.mission-status{margin:15px 3px 0;color:#b6c2dc;font-size:.78rem;line-height:1.45}
.quick-stats{
  position:relative;
  width:min(1080px,calc(100% - 32px));
  margin:-40px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid #e4e9f2;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 50px #14244214;
}
.quick-stats div{min-height:112px;display:grid;place-content:center;gap:2px;padding:18px;text-align:center}
.quick-stats div+div{border-inline-start:1px solid #e6ebf3}
.quick-stats strong{color:#243557;font:700 2rem Andika,sans-serif}
.quick-stats span{color:var(--home-muted);font-size:.84rem;font-weight:800}
.game-feature,.learning-section,.how-it-works{
  width:min(1180px,calc(100% - 32px));
  margin:110px auto 0;
}
.game-feature{
  min-height:480px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(42px,8vw,110px);
}
.game-visual{
  position:relative;
  min-height:440px;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 20%,#62d9cf50 0 8%,transparent 32%),
    radial-gradient(circle at 88% 78%,#b9f36b32 0 7%,transparent 30%),
    linear-gradient(145deg,#121f40,#1f3262);
  box-shadow:0 25px 60px #1625452b;
}
.sound-orbit{
  position:absolute;
  top:50%;
  left:50%;
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff29;
  border-radius:50%;
  background:#ffffff10;
  box-shadow:0 0 0 30px #ffffff07,0 0 0 60px #ffffff05;
  transform:translate(-50%,-50%);
}
.sound-orbit span{font-size:3.5rem;filter:grayscale(.25)}
.word-tile{
  position:absolute;
  min-width:104px;
  padding:15px 18px;
  border:1px solid #ffffff40;
  border-radius:14px;
  background:#fff;
  color:#1b2947;
  box-shadow:0 13px 30px #02071755;
  text-align:center;
  font:700 1.25rem Andika,sans-serif;
}
.tile-one{top:58px;right:42px;transform:rotate(4deg)}
.tile-two{bottom:64px;left:38px;transform:rotate(-4deg)}
.tile-three{top:64px;left:48px;opacity:.78;transform:rotate(-2deg)}
.score-pill{
  position:absolute;
  right:32px;
  bottom:34px;
  padding:8px 13px;
  border-radius:999px;
  background:var(--home-lime);
  color:#192542;
  font:700 .85rem Andika,sans-serif;
}
.section-kicker{display:block;font-size:.82rem}
.game-copy h2,.section-heading h2{
  margin:10px 0 18px;
  color:#16233d;
  font-size:clamp(2.25rem,4.5vw,4.1rem);
  line-height:1.04;
  letter-spacing:-.045em;
}
.game-copy p{
  margin:0;
  color:var(--home-muted);
  font-size:1.08rem;
  font-weight:600;
  line-height:1.8;
}
.game-metrics{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:25px;color:#64708a;font-size:.86rem;font-weight:800}
.game-metrics strong{display:block;color:#1c2e50;font:700 1.35rem Andika,sans-serif}
.text-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:28px;
  padding-bottom:5px;
  border-bottom:2px solid #4f72ff;
  color:#314fca;
  text-decoration:none;
  font-weight:900;
}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px}
.section-heading>p{max-width:470px;margin:0 0 21px;color:var(--home-muted);font-weight:600;line-height:1.7}
.learning-section .level-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:13px;
}
.home-page .level-card{
  position:relative;
  min-height:300px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid #e4e9f2;
  border-radius:20px;
  background:#fff;
  box-shadow:0 13px 34px #17284a0d;
}
.level-card-main{display:flex;flex:1;min-width:0;flex-direction:column;color:inherit;text-decoration:none}
.home-page .level-card::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:4px;
  background:var(--level-accent);
  content:"";
}
.level-tone-1{--level-accent:#30aa83;--level-soft:#e9f8f2}
.level-tone-2{--level-accent:#4c82df;--level-soft:#eaf1ff}
.level-tone-3{--level-accent:#7b66d9;--level-soft:#f0edff}
.level-tone-4{--level-accent:#dc7b45;--level-soft:#fff0e7}
.level-tone-5{--level-accent:#718f3e;--level-soft:#f0f6e5}
.level-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.level-number{color:var(--level-accent);font:700 1.65rem Andika,sans-serif}
.level-status{color:#7c879c;font-size:.67rem;font-weight:800}
.level-label{
  align-self:start;
  margin-top:17px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--level-soft);
  color:var(--level-accent);
  font-size:.69rem;
  font-weight:900;
}
.home-page .level-card h3{margin:14px 0 7px;font-size:1.15rem}
.home-page .level-card p{margin:0;color:var(--home-muted);font-size:.84rem;line-height:1.5}
.level-progress{height:6px;margin-top:auto;background:#edf0f5}
.level-go{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:#34425f;font-size:.78rem;font-weight:900}
.level-game-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--level-accent) 30%,#fff);border-radius:11px;background:var(--level-soft);color:var(--level-accent);font-size:.74rem;font-weight:900;text-decoration:none}
.level-game-link:hover,.level-game-link:focus-visible{background:#fff;border-color:var(--level-accent);outline:3px solid color-mix(in srgb,var(--level-accent) 24%,transparent);outline-offset:2px}
.level-card:hover{border-color:#cfd7e7;box-shadow:0 18px 42px #17284a18;transform:translateY(-4px)}
.how-it-works{margin-bottom:110px}
.section-heading.compact{display:block}
.step-list{
  margin:30px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #dfe4ec;
  border-right:1px solid #dfe4ec;
  list-style:none;
}
.step-list li{
  min-height:145px;
  display:grid;
  align-content:start;
  gap:4px;
  padding:22px;
  border-bottom:1px solid #dfe4ec;
  border-left:1px solid #dfe4ec;
}
.step-list li>span{color:#8290a8;font:700 .73rem Andika,sans-serif}
.step-list strong{margin-top:8px;font-size:1rem}
.step-list small{color:var(--home-muted);line-height:1.45}
.home-footer{
  min-height:170px;
  padding:42px max(24px,calc((100% - 1180px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  background:#0d1730;
  color:#fff;
}
.home-footer div{display:grid;gap:5px}
.home-footer strong{font:700 1.2rem Andika,sans-serif}
.home-footer span,.home-footer p{color:#aab7d2}
.home-footer p{max-width:540px;margin:0;font-size:.82rem;line-height:1.6}
.home-page a:focus-visible,.home-page button:focus-visible{
  outline:3px solid #f4d35e;
  outline-offset:4px;
}

@media(max-width:980px){
  .home-hero{grid-template-columns:1fr minmax(340px,.8fr);gap:34px}
  .learning-section .level-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .home-page::before{height:1120px}
  .home-nav>a:not(.all-sites-link){display:none}
  .home-hero{grid-template-columns:1fr;padding-top:54px;padding-bottom:95px}
  .home-hero h1{font-size:clamp(3rem,13vw,5.6rem)}
  .mission-panel{width:min(560px,100%)}
  .quick-stats{margin-top:-48px;grid-template-columns:repeat(2,1fr)}
  .quick-stats div:nth-child(3){border-top:1px solid #e6ebf3}
  .quick-stats div:nth-child(3){border-inline-start:0}
  .quick-stats div:nth-child(4){border-top:1px solid #e6ebf3}
  .game-feature{grid-template-columns:1fr;margin-top:85px}
  .game-visual{min-height:380px;order:2}
  .section-heading{display:block}
  .section-heading>p{margin-top:0}
  .learning-section .level-grid{grid-template-columns:repeat(2,1fr)}
  .step-list{grid-template-columns:repeat(2,1fr)}
  .home-footer{align-items:start;flex-direction:column}
}
@media(max-width:560px){
  .home-topbar{min-height:68px}
  .home-nav .all-sites-link{padding:8px 10px;font-size:.72rem}
  .home-brand small{display:none}
  .home-hero{width:min(100% - 24px,1180px);padding-top:42px}
  .audience-chip{font-size:.77rem}
  .home-hero h1{margin-top:17px}
  .hero-lead{font-size:1.03rem}
  .hero-actions{display:grid}
  .cta{width:100%}
  .trust-list{display:grid}
  .mission-panel{padding:18px}
  .quick-stats{width:calc(100% - 24px)}
  .quick-stats div{min-height:94px;padding:12px}
  .quick-stats strong{font-size:1.65rem}
  .quick-stats span{font-size:.74rem}
  .game-feature,.learning-section,.how-it-works{width:calc(100% - 24px)}
  .game-visual{min-height:330px}
  .sound-orbit{width:110px;height:110px}
  .sound-orbit span{font-size:2.8rem}
  .word-tile{min-width:83px;padding:11px 13px;font-size:1rem}
  .tile-one{top:40px;right:20px}
  .tile-two{bottom:47px;left:20px}
  .tile-three{top:50px;left:20px}
  .learning-section .level-grid{grid-template-columns:1fr}
  .home-page .level-card{min-height:225px}
  .step-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .home-page *,.home-page *::before,.home-page *::after{scroll-behavior:auto!important;transition:none!important}
}
@media(prefers-contrast:more){
  .hero-lead,.trust-list,.mission-status,.daily-list small{color:#fff}
  .home-page .level-card{border-color:#667085}
}

/* Shared accessibility and progress feedback in lessons. */
.lesson-profile{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid #ffffff2c;
  border-radius:11px;
  color:#dce6ff;
  font:700 .78rem Andika,sans-serif;
  white-space:nowrap;
}
.xp-live{
  position:fixed;
  z-index:80;
  right:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  padding:10px 16px;
  border-radius:999px;
  background:#14213d;
  color:#fff;
  box-shadow:0 10px 30px #14213d55;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translate(50%,16px);
  transition:.2s;
}
.xp-live.show{opacity:1;transform:translate(50%,0)}
.site-header a:focus-visible,.site-header select:focus-visible,.mode-nav button:focus-visible,
.panel button:focus-visible,.panel a:focus-visible{
  outline:3px solid #f4c95d;
  outline-offset:3px;
}
.panel [role="status"]:empty{min-height:1.5rem}
@media(max-width:780px){
  .lesson-profile{order:2;margin-inline-start:auto}
  .selectors{order:3}
}
@media(max-width:430px){
  .lesson-profile{font-size:.69rem}
}
@media(prefers-reduced-motion:reduce){
  .track,.card-track,.word,.letter,.study-card,.xp-live{transition:none!important}
  .finish-emoji{animation:none!important}
}

/* Mobile lesson redesign: compact chrome, stable RTL layout, and uncluttered card navigation. */
.home-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lesson-title>div{min-width:0}
.lesson-title h1{overflow-wrap:anywhere}
.lesson-title p{line-height:1.45}
.cover-actions--lesson{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(520px,100%);
}
.cover-actions--lesson .primary{grid-column:1/-1}
.card-stage[data-position="cover"] .card-arrow,
.card-stage[data-position="finish"] .card-arrow{display:none}
.card-position{display:none}

@media(max-width:700px){
  .site-header{
    min-height:0;
    flex-wrap:wrap;
    gap:8px;
    padding:8px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));
  }
  .home-icon{width:38px;height:38px;border-radius:11px;font-size:0}
  .home-icon svg{width:22px;height:22px}
  .brand{font-size:1rem}
  .selectors{order:3;width:100%;gap:8px}
  .selectors label{flex:1;min-width:0}
  .selectors label>span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .selectors select{
    width:100%;
    min-width:0;
    min-height:40px;
    padding-block:7px;
    border:0;
    border-radius:11px;
  }
  .mode-nav{
    top:103px;
    gap:5px;
    padding:7px max(10px,env(safe-area-inset-right));
    scroll-snap-type:x proximity;
    box-shadow:0 5px 15px #14213d0c;
  }
  .mode-btn{
    min-height:38px;
    padding:8px 11px;
    border-radius:11px;
    scroll-snap-align:center;
    font-size:.82rem;
  }
  .mode-btn.active{box-shadow:none}
  .lesson-shell{padding:10px 10px max(18px,env(safe-area-inset-bottom))}
  .lesson-title{
    align-items:start;
    flex-direction:column;
    gap:8px;
    margin:4px 2px 11px;
  }
  .lesson-title h1{font-size:1.45rem;line-height:1.18}
  .lesson-title p{margin-top:3px;font-size:.92rem}
  .progress-chip{padding:5px 10px;font-size:.78rem}
  .panel{min-height:0;border-radius:19px}
  .card-stage,.card-track,.study-card{min-height:clamp(430px,calc(100svh - 245px),560px)}
  .study-card{padding:28px 18px 58px}
  .study-card.cover,.study-card.finish{justify-content:center}
  .eyebrow{padding:6px 11px;font-size:.82rem}
  .cover h2,.finish h2{
    margin-top:14px;
    font-size:clamp(2rem,10vw,3rem);
    line-height:1.25;
  }
  .cover p,.finish p{margin:9px 0 0;font-size:1rem;line-height:1.55}
  .cover-actions{margin-top:18px}
  .cover-actions--lesson{gap:9px}
  .cover-actions--lesson .primary{min-height:50px}
  .cover-actions--lesson .secondary{min-height:43px;padding:9px 8px;font-size:.87rem}
  .card-arrow{
    top:50%;
    bottom:auto;
    width:40px;
    height:52px;
    border-radius:13px;
    background:#14213dcc;
    font-size:1.75rem;
  }
  .card-prev{left:8px}
  .card-next{right:8px}
  .card-dots{display:none}
  .card-position{
    position:absolute;
    z-index:4;
    right:18px;
    bottom:14px;
    left:18px;
    display:flex;
    align-items:center;
    gap:10px;
    direction:rtl;
  }
  .card-count{
    min-width:64px;
    color:#506078;
    font-size:.78rem;
    font-weight:900;
    text-align:right;
  }
  .card-progress{
    height:5px;
    flex:1;
    overflow:hidden;
    border-radius:999px;
    background:#cbd5e3;
  }
  .card-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--blue);
    transition:width .2s ease;
  }
  .task-card{margin-top:17px}
  .panel-pad{padding:20px 14px}
}

@media(max-width:380px){
  .brand{font-size:.92rem}
  .lesson-profile{padding-inline:8px}
  .mode-btn{font-size:.78rem}
  .cover-actions--lesson{grid-template-columns:1fr}
  .cover-actions--lesson .primary{grid-column:auto}
}

@media(max-height:700px){
  .study-card{padding-block:18px 54px}
}

@media(prefers-reduced-motion:reduce){
  .card-progress span{transition:none!important}
}