:root {
  --ink: #243047;
  --muted: #697386;
  --cream: #fffaf1;
  --paper: #ffffff;
  --purple: #6254d9;
  --purple-dark: #4c3fc2;
  --purple-soft: #eeeafd;
  --coral: #f56f61;
  --blue: #dff3ff;
  --blue-dot: #52a9dc;
  --yellow: #fff0ad;
  --yellow-dot: #edaf33;
  --green: #49b77b;
  --shadow: 0 18px 50px rgba(60, 45, 20, 0.09);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 22%, rgba(245,111,97,.07) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 52%, rgba(98,84,217,.08) 0 4px, transparent 5px),
    var(--cream);
  background-size: 48px 48px, 64px 64px, auto;
  font-family: system-ui, sans-serif;
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.site-header {
  height: 76px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid #efe9df;
  backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font: 900 25px/1 ui-rounded, "Arial Rounded MT Bold", system-ui; letter-spacing:-1px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--coral); transform:rotate(-7deg); box-shadow:0 5px 0 #d9574b; }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:5px; }
.site-nav a { padding:8px 11px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:13px; font-weight:800; }
.site-nav a:hover, .site-nav a.active { color:var(--purple); background:var(--purple-soft); }
.header-actions { display:flex; align-items:center; gap:14px; }
.streak { padding:9px 14px; border-radius:99px; background:#fff3dc; color:#a65e17; }
.sound-button { width:42px; height:42px; border:1px solid #e8e1d7; border-radius:50%; background:white; color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.sound-button svg { width:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sound-button .sound-off { display:none; }
.sound-button[aria-pressed="false"] .sound-on { display:none; }
.sound-button[aria-pressed="false"] .sound-off { display:block; }

main { width:min(1100px, calc(100% - 32px)); margin:0 auto; padding:24px 0 50px; }
.home-hero { max-width:680px; margin:40px auto 43px; text-align:center; }
.home-hero h1 { margin-top:7px; }
.home-hero p { margin:9px 0 0; color:var(--muted); font-size:16px; }
.section-heading { margin-bottom:18px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading h2 { margin:4px 0 0; font:900 27px/1.2 ui-rounded, "Arial Rounded MT Bold", system-ui; letter-spacing:-.8px; }
.activity-count { padding:7px 10px; border-radius:99px; color:#7369b9; background:#f0edfc; font-size:12px; font-weight:800; }
.activity-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.activity-card { min-height:278px; padding:27px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid #e6e0d7; border-radius:25px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.activity-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px rgba(60, 45, 20, .14); }
.activity-card--math { background:linear-gradient(145deg, #e8f7ff, #fff); }
.activity-card--reading { background:linear-gradient(145deg, #f0edff, #fff); }
.activity-card-icon { width:58px; height:58px; margin-bottom:20px; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.75); font-size:30px; }
.activity-card-subject { margin-bottom:8px; color:#756cab; font-size:11px; font-weight:900; letter-spacing:1.1px; }
.activity-card strong { font:900 27px/1.15 ui-rounded, "Arial Rounded MT Bold", system-ui; letter-spacing:-.8px; }
.activity-card small { margin-top:8px; color:var(--muted); font-size:14px; line-height:1.45; }
.activity-card-cta { margin-top:auto; padding-top:20px; color:var(--purple); font-size:14px; font-weight:900; }
.home-tip { max-width:760px; margin:36px auto 0; padding:19px 22px; display:flex; align-items:center; gap:14px; border-radius:20px; color:#716a75; background:#fff3dc; }
.home-tip p { margin:0; font-size:13px; line-height:1.45; }
.home-tip strong { color:var(--ink); }
.breadcrumbs { display:flex; align-items:center; gap:9px; margin-bottom:19px; color:#8a8491; font-size:14px; }
.breadcrumbs a { color:#6a5bd2; text-decoration:none; font-weight:700; }
.activity-shell { position:relative; overflow:hidden; padding:26px clamp(22px, 5vw, 68px) 34px; border:1px solid #eee6dc; border-radius:30px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
.activity-shell::before, .activity-shell::after { content:""; position:absolute; width:90px; height:90px; border:16px solid var(--purple-soft); border-radius:50%; z-index:0; }
.activity-shell::before { left:-62px; top:150px; }
.activity-shell::after { right:-66px; bottom:80px; border-color:#fff3d1; }
.activity-shell > * { position:relative; z-index:1; }
.progress-row { display:grid; grid-template-columns:auto minmax(140px, 1fr) auto; align-items:center; gap:15px; color:#777183; font-size:13px; font-weight:600; }
.progress-track { height:9px; overflow:hidden; border-radius:99px; background:#eeeaf5; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, #8577e9, var(--purple)); transition:width .35s ease; }
.progress-count { color:var(--purple); }
.title-block { text-align:center; margin:24px 0 22px; }
.eyebrow { color:var(--coral); font-size:12px; font-weight:800; letter-spacing:2px; }
h1 { margin:6px 0 3px; font:900 clamp(27px, 4vw, 39px)/1.2 ui-rounded, "Arial Rounded MT Bold", system-ui; letter-spacing:-1.3px; }
.title-block p { margin:0; color:var(--muted); font-size:15px; }
.challenge-picker { margin:-4px auto 22px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.challenge-label { color:var(--muted); font-size:12px; font-weight:800; }
.challenge-mode { min-height:34px; padding:6px 11px; border:1px solid #dcd5eb; border-radius:99px; color:#665f74; background:white; cursor:pointer; font-size:12px; font-weight:800; }
.challenge-mode:hover { border-color:#a99ee8; }
.challenge-mode.selected { border-color:var(--purple); color:white; background:var(--purple); }
.challenge-mode:focus-visible { outline:4px solid rgba(98,84,217,.25); outline-offset:2px; }
.game-area { display:grid; grid-template-columns:minmax(190px, 1fr) 145px minmax(190px, 1fr); align-items:center; gap:30px; max-width:820px; margin:0 auto; }
.game-area[data-mode="numbers"] .dot-grid, .game-area[data-mode="numbers"] .count-label, .game-area[data-mode="objects"] .number-value { display:none; }
.game-area[data-mode="numbers"] .number-card, .game-area[data-mode="objects"] .number-card { justify-content:center; }
.number-card { min-height:278px; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:25px; border:3px solid rgba(255,255,255,.9); box-shadow:0 10px 0 rgba(38,48,71,.06), inset 0 0 0 1px rgba(38,48,71,.05); }
.number-card--blue { background:var(--blue); }
.number-card--yellow { background:var(--yellow); }
.number-value { font:900 66px/.9 ui-rounded, "Arial Rounded MT Bold", system-ui; letter-spacing:-3px; }
.dot-grid { min-height:73px; margin:19px 0 12px; display:grid; grid-template-columns:repeat(5, 17px); grid-auto-rows:17px; justify-content:center; align-content:center; gap:9px; }
.dot { width:17px; height:17px; border-radius:50%; animation:pop .3s both; }
.number-card--blue .dot { background:var(--blue-dot); box-shadow:0 2px 0 #3189bd; }
.number-card--yellow .dot { background:var(--yellow-dot); box-shadow:0 2px 0 #cb8f1f; }
.count-label { padding:5px 11px; border-radius:99px; color:#697386; background:rgba(255,255,255,.55); font-size:12px; font-weight:700; }
.operator-picker { display:flex; flex-direction:column; gap:10px; }
.operator { padding:8px 10px; display:grid; grid-template-columns:44px 1fr; align-items:center; border:2px solid #e7e1ee; border-radius:15px; color:var(--ink); background:white; cursor:pointer; text-align:left; transition:transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.operator:hover { transform:translateY(-2px); border-color:#afa5ed; }
.operator:focus-visible, .next-button:focus-visible, .sound-button:focus-visible { outline:4px solid rgba(98,84,217,.25); outline-offset:2px; }
.operator strong { color:var(--purple); font:900 30px/1 ui-rounded, "Arial Rounded MT Bold", system-ui; text-align:center; }
.operator span { color:#797383; font-size:12px; font-weight:700; }
.operator.selected { color:white; border-color:var(--purple); background:var(--purple-soft); box-shadow:0 5px 0 #d7d1f8; }
.operator.correct { border-color:var(--green); background:#e6f8ee; }
.operator.wrong { border-color:var(--coral); background:#fff0ed; animation:shake .35s; }
.feedback { max-width:560px; min-height:45px; padding:11px 16px; margin:22px auto 14px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:13px; color:#615c69; background:#f7f4fb; text-align:center; font-size:14px; }
.feedback.success { color:#277c4d; background:#e8f8ef; }
.feedback.error { color:#b14b42; background:#fff0ed; }
.next-button { min-width:225px; min-height:50px; padding:0 22px; margin:0 auto; display:flex; justify-content:center; align-items:center; gap:15px; border:0; border-radius:14px; color:white; background:var(--purple); box-shadow:0 6px 0 var(--purple-dark); font-weight:800; cursor:pointer; transition:transform .15s, opacity .15s; }
.next-button:not(:disabled):hover { transform:translateY(-2px); }
.next-button:not(:disabled):active { transform:translateY(3px); box-shadow:0 3px 0 var(--purple-dark); }
.next-button:disabled { opacity:.38; cursor:not-allowed; box-shadow:0 4px 0 #aaa2d4; }
.tip-card { max-width:650px; margin:20px auto 0; padding:14px 20px; display:flex; align-items:center; gap:14px; color:#716a75; }
.tip-card p { margin:0; font-size:13px; line-height:1.45; }
.tip-card strong { color:var(--ink); }
.tip-icon { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:#fff0b8; }
.activity-link { max-width:650px; margin:8px auto 0; padding:17px 20px; display:flex; align-items:center; gap:14px; border:1px solid #ded8f5; border-radius:18px; color:var(--ink); background:#f4f1ff; text-decoration:none; box-shadow:0 5px 0 #e5e0f7; }
.activity-link:hover { transform:translateY(-2px); }
.activity-link > span:first-child { font-size:27px; }
.activity-link > span:nth-child(2) { display:grid; gap:2px; flex:1; }
.activity-link small { color:var(--muted); font-size:12px; }
.reading-game { max-width:700px; margin:0 auto; display:grid; grid-template-columns:210px 1fr; align-items:center; gap:30px; }
.trace-card { min-height:200px; padding:20px; display:grid; place-items:center; align-content:center; border:3px dashed #b8afea; border-radius:25px; background:#f4f1ff; }
.trace-label { color:#7369b9; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.trace-character { margin-top:5px; color:transparent; -webkit-text-stroke:2px var(--purple); font:900 112px/.9 ui-rounded, "Arial Rounded MT Bold", system-ui; }
.reading-prompt { text-align:center; }
.prompt-icon { display:block; margin-bottom:5px; font-size:48px; }
.prompt-kind { margin:0; color:var(--coral); font-size:12px; font-weight:800; letter-spacing:2px; }
.reading-prompt h2 { margin:6px 0; font:900 clamp(26px, 4vw, 38px)/1.15 ui-rounded, "Arial Rounded MT Bold", system-ui; }
.reading-prompt p:last-child { margin:0; color:var(--muted); font-size:14px; }
.word-picker { max-width:500px; margin:24px auto 0; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.word-choice { min-height:90px; border:3px solid #e4ddf0; border-radius:20px; color:var(--purple); background:white; box-shadow:0 5px 0 #e5e0ee; cursor:pointer; font:900 clamp(34px, 7vw, 48px)/1 ui-rounded, "Arial Rounded MT Bold", system-ui; transition:transform .15s, border-color .15s, background .15s; }
.word-choice:hover:not(:disabled) { transform:translateY(-3px); border-color:#a99ee8; }
.word-choice:focus-visible { outline:4px solid rgba(98,84,217,.25); outline-offset:2px; }
.word-choice.correct { border-color:var(--green); color:#277c4d; background:#e6f8ee; }
.word-choice.wrong { border-color:var(--coral); color:#b14b42; background:#fff0ed; animation:shake .35s; }
.celebration { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
.confetti { position:absolute; top:-20px; width:10px; height:18px; animation:fall 1.3s ease-in forwards; }

@keyframes pop { from { transform:scale(0); } 70% { transform:scale(1.15); } to { transform:scale(1); } }
@keyframes shake { 25% { transform:translateX(-5px); } 50% { transform:translateX(5px); } 75% { transform:translateX(-3px); } }
@keyframes fall { to { transform:translateY(105vh) rotate(620deg); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

@media (max-width:700px) {
  .site-header { height:64px; padding:0 16px; }
  .brand { font-size:22px; }
  .brand-mark { width:32px; height:32px; }
  .site-nav { gap:0; }
  .site-nav a { padding:7px 8px; font-size:11px; }
  .streak-label { display:none; }
  main { width:min(100% - 20px, 540px); padding-top:15px; }
  .home-hero { margin:30px auto 32px; }
  .home-hero p { font-size:14px; }
  .section-heading h2 { font-size:24px; }
  .activity-grid { grid-template-columns:1fr; gap:14px; }
  .activity-card { min-height:220px; padding:22px; }
  .activity-card-icon { width:50px; height:50px; margin-bottom:14px; font-size:26px; }
  .activity-card strong { font-size:24px; }
  .home-tip { margin-top:25px; }
  .breadcrumbs { margin:0 5px 12px; font-size:12px; }
  .activity-shell { padding:20px 14px 27px; border-radius:23px; }
  .progress-row { grid-template-columns:auto 1fr; gap:10px; }
  .progress-count { display:none; }
  .title-block { margin:19px 0 18px; }
  h1 { font-size:28px; }
  .title-block p { font-size:13px; }
  .challenge-picker { margin:-4px auto 17px; gap:6px; }
  .challenge-label { width:100%; text-align:center; }
  .challenge-mode { min-height:31px; padding:5px 9px; font-size:11px; }
  .game-area { grid-template-columns:1fr 70px 1fr; gap:8px; }
  .number-card { min-height:228px; padding:13px 6px; border-radius:19px; }
  .number-value { font-size:52px; }
  .dot-grid { min-height:62px; grid-template-columns:repeat(3, 15px); grid-auto-rows:15px; gap:6px; margin:15px 0 10px; }
  .dot { width:15px; height:15px; }
  .operator-picker { gap:8px; }
  .operator { min-height:58px; padding:5px; display:flex; flex-direction:column; justify-content:center; border-radius:13px; text-align:center; }
  .operator strong { font-size:25px; }
  .operator span { font-size:9px; }
  .feedback { margin:18px auto 13px; font-size:12px; }
  .next-button { width:100%; }
  .tip-card { padding:10px 8px 25px; }
  .activity-link { margin-top:4px; }
  .reading-game { grid-template-columns:1fr; gap:14px; }
  .trace-card { min-height:130px; }
  .trace-character { font-size:82px; }
  .word-picker { margin-top:18px; gap:10px; }
  .word-choice { min-height:75px; }
}

@media (max-width:370px) {
  .game-area { grid-template-columns:1fr 60px 1fr; }
  .number-card { min-height:210px; }
  .dot-grid { grid-template-columns:repeat(3, 13px); grid-auto-rows:13px; gap:5px; }
  .dot { width:13px; height:13px; }
}