/* ============ NumeroKids – Sneak Peek: Counting Song ============ */
.nk-peek{background:linear-gradient(180deg,#fff 0%,#F3EEFF 100%)}

/* TV / tablet frame */
.nk-tv{max-width:980px;margin:0 auto;background:var(--nk-navy);border-radius:34px;padding:14px;position:relative;
  box-shadow:0 30px 60px -25px rgba(32,43,69,.55),0 0 0 6px #fff,0 0 0 9px #E2D8F8}
.nk-tv button{font-family:var(--f-body);cursor:pointer}
.nk-tv button:focus-visible{outline:3px solid var(--nk-yellow);outline-offset:2px}

.nk-tv-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 8px 12px;color:#fff}
.nk-tv-title{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:1.15rem}
.nk-tv-title .dots{display:inline-flex;gap:5px}
.nk-tv-title .dots i{display:block;width:10px;height:10px;border-radius:50%}
.nk-tv-title .dots i:nth-child(1){background:var(--nk-coral)}
.nk-tv-title .dots i:nth-child(2){background:var(--nk-yellow)}
.nk-tv-title .dots i:nth-child(3){background:#3CC98E}
.nk-eq{display:inline-flex;gap:3px;align-items:flex-end;height:18px}
.nk-eq i{display:block;width:4px;height:4px;border-radius:2px;background:var(--nk-yellow)}
.nk-tv.playing .nk-eq i{animation:nkEq .7s ease-in-out infinite alternate}
.nk-eq i:nth-child(2){animation-delay:.15s!important}.nk-eq i:nth-child(3){animation-delay:.3s!important}
.nk-eq i:nth-child(4){animation-delay:.1s!important}.nk-eq i:nth-child(5){animation-delay:.25s!important}
@keyframes nkEq{to{height:18px}}

.nk-seg{display:inline-flex;background:rgba(255,255,255,.12);border-radius:50px;padding:4px}
.nk-seg button{border:0;background:transparent;color:#fff;font-weight:800;font-size:.88rem;padding:6px 14px;border-radius:50px;transition:.2s}
.nk-seg button.active{background:var(--nk-yellow);color:var(--nk-navy)}

/* Stage */
.nk-stage{position:relative;border-radius:24px;min-height:370px;display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:20px;padding:30px;overflow:hidden;
  background:radial-gradient(circle at 12% 18%,#FFF5CF 0,transparent 42%),radial-gradient(circle at 88% 85%,#D6F1FF 0,transparent 45%),#FFF9EF}
.nk-stage-num{text-align:center}
.big-num{font-family:var(--f-head);font-weight:700;font-size:clamp(6rem,15vw,10.5rem);line-height:1;color:var(--nc,#7545E8);text-shadow:0 8px 0 rgba(32,43,69,.12);display:inline-block}
.big-num.pop{animation:nkNumPop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes nkNumPop{0%{transform:scale(.3) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.num-word{font-family:var(--f-head);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--nk-navy);margin-top:6px}
.num-cap{font-weight:800;color:var(--nk-muted);font-size:1.05rem;min-height:1.6em}

/* Ten-frame tray */
.nk-tray{--sz:62px;--gp:8px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-content:center}
.nk-tray.r20{--sz:46px;--gp:6px;flex-direction:column;align-items:center}
.nk-tray .tf{display:grid;grid-template-columns:repeat(5,var(--sz));gap:var(--gp);padding:12px;background:#fff;border-radius:20px;box-shadow:0 14px 30px -16px rgba(32,43,69,.3)}
.nk-tray .slot{width:var(--sz);height:var(--sz);border:2.5px dashed #E2D8F8;border-radius:16px;display:grid;place-items:center;transition:background .3s,border-color .3s}
.nk-tray .slot.filled{border-color:transparent;background:#F3EEFF}
.nk-tray .slot svg{width:80%;height:80%}
.nk-tray .slot.new{box-shadow:0 0 0 4px var(--nk-yellow)}
.nk-tray .slot.new svg{animation:nkObjPop .6s cubic-bezier(.3,1.7,.5,1)}
@keyframes nkObjPop{0%{transform:scale(0) translateY(-30px)}100%{transform:none}}

/* Start overlay */
.nk-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:3;
  background:rgba(255,249,239,.82);backdrop-filter:blur(4px);transition:opacity .4s}
.nk-start p{font-family:var(--f-head);font-weight:600;font-size:1.25rem;margin:0;color:var(--nk-navy);text-align:center;padding:0 16px}
.nk-start-btn{width:96px;height:96px;border-radius:50%;border:0;background:var(--nk-purple);color:#fff;font-size:2.2rem;padding-left:8px;
  box-shadow:0 8px 0 var(--nk-purple-d);animation:nkPulse 1.8s infinite}
.nk-start-btn:hover{transform:translateY(-3px)}
@keyframes nkPulse{0%{box-shadow:0 8px 0 var(--nk-purple-d),0 0 0 0 rgba(117,69,232,.45)}70%{box-shadow:0 8px 0 var(--nk-purple-d),0 0 0 22px rgba(117,69,232,0)}100%{box-shadow:0 8px 0 var(--nk-purple-d),0 0 0 0 rgba(117,69,232,0)}}
.nk-tv.started .nk-start{opacity:0;pointer-events:none}

/* Celebration overlay */
.nk-cheer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;overflow:hidden}
.nk-cheer.show{opacity:1}
.nk-cheer .cheer-box{background:#fff;border-radius:24px;padding:20px 34px;text-align:center;box-shadow:0 20px 40px -18px rgba(32,43,69,.45);border:4px solid var(--nk-yellow);transform:scale(.6)}
.nk-cheer.show .cheer-box{animation:nkObjPop .6s cubic-bezier(.3,1.7,.5,1) forwards;transform:none}
.nk-cheer .cheer-box b{display:block;font-family:var(--f-head);font-size:2.4rem;color:var(--nk-coral);line-height:1.1}
.nk-cheer .cheer-box span{font-weight:800;font-size:1.1rem}
.nk-cheer .cf{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:nkFall 2.4s ease-in forwards}
@keyframes nkFall{to{top:110%;margin-left:40px}}

/* Number track */
.nk-track{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:14px 6px 4px}
.nk-track button{width:36px;height:36px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-weight:800;transition:.2s}
.nk-track button:hover{background:rgba(255,255,255,.22)}
.nk-track button.done{background:rgba(255,212,71,.22);color:var(--nk-yellow)}
.nk-track button.cur{background:var(--nk-yellow);color:var(--nk-navy);transform:scale(1.15)}

/* Controls */
.nk-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 6px 4px}
.nk-controls .grp{display:flex;align-items:center;gap:8px}
.nk-cbtn{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1rem;transition:.2s}
.nk-cbtn:hover{background:rgba(255,255,255,.22)}
.nk-cbtn.play{width:60px;height:60px;background:var(--nk-coral);box-shadow:0 5px 0 #E04F6B;font-size:1.3rem}
.nk-cbtn.play:hover{background:var(--nk-coral);transform:translateY(-2px)}
.nk-tgl{border:0;border-radius:50px;padding:8px 14px;background:rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:.85rem;display:inline-flex;gap:6px;align-items:center;opacity:.55;transition:.2s}
.nk-tgl.on{opacity:1;background:rgba(53,182,246,.3)}

/* More content chips */
.nk-peek-more{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:34px}
.nk-peek-more .lbl{font-family:var(--f-head);font-weight:600;color:var(--nk-purple);font-size:1.05rem}
.nk-peek-more .chip{background:#fff;border-radius:50px;padding:8px 16px;font-weight:800;font-size:.92rem;box-shadow:0 10px 24px -14px rgba(32,43,69,.35)}
.nk-peek-more .chip i{color:var(--nk-purple);margin-right:6px}

/* Responsive */
@media(max-width:767px){
  .nk-tv{border-radius:26px;padding:10px}
  .nk-stage{grid-template-columns:1fr;padding:20px 14px;min-height:0;gap:10px}
  .big-num{font-size:5.5rem}
  .nk-tray{--sz:46px;--gp:6px}
  .nk-tray.r20{--sz:38px;--gp:5px}
  .nk-tray .tf{padding:10px}
  .nk-controls{justify-content:center}
  .nk-track button{width:32px;height:32px;border-radius:10px}
  .nk-start-btn{width:80px;height:80px;font-size:1.8rem}
}

/* ============ Sneak Peek: Age 4 Maths Learning Tracker ============ */
.nk-trk{max-width:980px;margin:46px auto 0;background:#fff;border-radius:30px;padding:30px;box-shadow:0 24px 50px -28px rgba(32,43,69,.4);border:3px solid #F1EAFF}
.nk-trk-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.nk-trk-head h3{font-size:clamp(1.5rem,3vw,2rem);margin:10px 0 6px}
.nk-trk-head p{color:var(--nk-muted);margin:0;max-width:560px}
.nk-trk-prog{position:relative;width:96px;height:96px;flex:0 0 96px;text-align:center}
.nk-trk-prog svg{width:96px;height:96px;transform:rotate(-90deg)}
.nk-trk-prog circle{fill:none;stroke-width:9}
.nk-trk-prog .bg{stroke:#F1EAFF}
.nk-trk-prog .fg{stroke:#3CC98E;stroke-linecap:round;transition:stroke-dashoffset .5s}
.nk-trk-prog .pc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.nk-trk-prog b{font-family:var(--f-head);font-size:1.45rem}
.nk-trk-prog small{font-size:.62rem;font-weight:800;color:var(--nk-muted);margin-top:3px;text-transform:uppercase}
.nk-trk-body{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.nk-trk-months{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:4px}
.nk-trk-months .trm-lbl{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--nk-purple);margin:0 0 6px 4px}
.nk-trk-months .mbtn{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;align-items:center;width:100%;text-align:left;border:2px solid transparent;background:var(--nk-cream);border-radius:14px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-family:var(--f-body);transition:.2s}
.nk-trk-months .mbtn:hover{border-color:#E2D8F8}
.nk-trk-months .mbtn.active{border-color:var(--nk-purple);background:#F3EEFF}
.nk-trk-months .mno{grid-row:1/3;width:30px;height:30px;border-radius:10px;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--nk-purple);font-size:.9rem}
.nk-trk-months .mbtn.full .mno{background:var(--nk-yellow);color:var(--nk-navy)}
.nk-trk-months .mtx{font-weight:800;font-size:.92rem;color:var(--nk-navy)}
.nk-trk-months .mbar{height:5px;border-radius:5px;background:#E9E2F7;overflow:hidden}
.nk-trk-months .mbar i{display:block;height:100%;background:#3CC98E;border-radius:5px;transition:width .4s}
.nk-trk-card{background:var(--nk-cream);border-radius:22px;padding:22px}
.nk-trk-card .ch{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.nk-trk-card .cic{width:52px;height:52px;border-radius:16px;background:var(--nk-purple);color:#fff;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 5px 0 var(--nk-purple-d)}
.nk-trk-card .ch small{font-weight:800;color:var(--nk-muted);font-size:.8rem}
.nk-trk-card .ch h4{margin:0;font-size:1.45rem}
.nk-trk-card .ch>div{flex:1;min-width:160px}
.nk-trk-card .cnt{font-weight:800;font-size:.85rem;background:#fff;border-radius:50px;padding:6px 14px}
.nk-trk-card .cnt.full{background:var(--nk-yellow)}
.nk-trk-card .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nk-trk-card h5{font-size:1rem;margin:0 0 10px;color:var(--nk-navy)}
.nk-trk-card h5 i{color:var(--nk-coral);margin-right:6px}
.nk-trk-card .tk{display:flex;align-items:flex-start;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;border:2px solid transparent;transition:.2s}
.nk-trk-card .tk:hover{border-color:#E2D8F8}
.nk-trk-card .tk input{position:absolute;opacity:0;pointer-events:none}
.nk-trk-card .tk .box{flex:0 0 24px;height:24px;border-radius:8px;border:2.5px solid #CFC3EE;display:grid;place-items:center;color:#fff;font-size:.75rem;transition:.2s}
.nk-trk-card .tk .box i{opacity:0;transform:scale(.4);transition:.2s}
.nk-trk-card .tk.on .box{background:#3CC98E;border-color:#3CC98E}
.nk-trk-card .tk.on .box i{opacity:1;transform:none}
.nk-trk-card .tk:focus-within{border-color:var(--nk-purple)}
.nk-trk-card .wk{flex:0 0 auto;font-size:.7rem;font-weight:800;background:#E0F4FE;color:#1E93CF;border-radius:20px;padding:2px 8px;margin-top:2px}
.nk-trk-card .lt{font-weight:700;font-size:.93rem;line-height:1.35}
.nk-trk-card .tk.on .lt{color:var(--nk-muted)}
.nk-trk-card .nav{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.nk-trk-card .nav button{border:0;background:#fff;border-radius:50px;padding:8px 16px;font-weight:800;font-size:.88rem;color:var(--nk-purple);font-family:var(--f-body);cursor:pointer}
.nk-trk-card .nav button:disabled{opacity:.35;cursor:default}
.nk-trk-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-weight:700;color:var(--nk-muted);font-size:.9rem}
.nk-trk-foot i{color:var(--nk-blue);margin-right:6px}
.nk-trk-foot button{border:2px solid #E2D8F8;background:#fff;border-radius:50px;padding:6px 14px;font-weight:800;color:var(--nk-muted);font-family:var(--f-body);cursor:pointer}
@media(max-width:991px){
  .nk-trk-body{grid-template-columns:1fr}
  .nk-trk-months{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}
  .nk-trk-months .trm{flex:0 0 auto;display:flex;flex-direction:column}
  .nk-trk-months .trm>div:first-child{white-space:nowrap}
  .nk-trk-months .mbtn{width:200px}
}
@media(max-width:767px){
  .nk-trk{padding:20px 14px;border-radius:24px}
  .nk-trk-head{flex-direction:column;align-items:flex-start}
  .nk-trk-card{padding:16px 12px}
  .nk-trk-card .cols{grid-template-columns:1fr}
}