// Triplicity · Little Stars — KIDS Step 1 (child info) + Step 3 (drawing the sky)

function KidProgress({ step = 1, total = 3 }){
  const t = useKidTheme();
  return (
    <div style={{display:'flex', gap:6}}>
      {Array.from({length:total}).map((_,i)=>{
        const on = i < step;
        return <div key={i} style={{flex:1, height:5, borderRadius:'999px',
          background: on ? t.primary : 'rgba(193,201,240,0.18)',
          boxShadow: i===step-1 ? `0 0 10px ${glowRGBA(t.glow,0.7)}` : 'none', transition:'all .3s'}}/>;
      })}
    </div>
  );
}

// ── Step 1 · Mobile ──────────────────────────────────────────────────────────
function KidStep1({ animate = true, ctrl = null }){
  const t = useKidTheme();
  return (
    <div style={{width:'100%', minHeight:ctrl?'100dvh':'100%', height:ctrl?'auto':'100%', position:'relative', overflow:ctrl?'visible':'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 50%, ${KID.skyBot} 100%)`, fontFamily:KID.zh}}>
      <KidStarfield density={1} animate={animate} glow={t.glow} shoot={animate}/>

      <div style={{position:'absolute', top:54, left:0, right:0, padding:'10px 22px',
        display:'flex', alignItems:'center', justifyContent:'space-between', zIndex:3}}>
        <KidBrandMark size={22} theme={t}/>
        <div style={{display:'flex', alignItems:'center', gap:9}}>
          <window.KidLangToggle compact/>
          <span style={{fontFamily:t.font, fontSize:11, letterSpacing:'0.16em', color:KID.gray, fontWeight:600}}>01 / 03</span>
        </div>
      </div>
      <div style={{position:'absolute', top:96, left:22, right:22, zIndex:3}}><KidProgress step={1}/></div>

      <div style={{position:'relative', zIndex:2, padding:'132px 26px 28px'}}>
        <div style={{display:'flex', justifyContent:'center', marginBottom:18}}>
          <KidConstellation size={208} animate={animate}/>
        </div>
        <div style={{textAlign:'center', marginBottom:26}}>
          <KidEyebrow style={{marginBottom:12}}>{kt('STEP ONE · 孩子的資料')}</KidEyebrow>
          <h1 style={{fontFamily:KID.zh, fontSize:30, fontWeight:700, lineHeight:1.25, margin:'0 0 10px', color:KID.white}}>
            <KML>{kt('先為孩子建立\n小星星檔案')}</KML>
          </h1>
          <p style={{fontSize:13, color:KID.gray, margin:0, lineHeight:1.7}}>
            {kt('星盤不是預言，也不是替孩子定型')}
          </p>
        </div>

        <KidField label={kt('孩子的稱呼')} placeholder={kt('例如：小星')} round={t.round}
          inputProps={ctrl && { value: ctrl.form.name, onChange: e=>ctrl.set('name', e.target.value) }}/>
        <KidField label={kt('接收報告的電郵')} placeholder={kt('把星空圖寄給你')} round={t.round}
          inputProps={ctrl && { type:'email', value: ctrl.form.email, onChange: e=>ctrl.set('email', e.target.value) }}/>

        {ctrl && ctrl.error && <div style={{color:KID.peach, fontSize:12.5, margin:'2px 0 10px'}}>{ctrl.error}</div>}

        <KidButton round={t.round} full style={{marginTop:22}} onClick={ctrl ? ctrl.next : undefined}>
          {kt('繼續填寫出生資料')}
          <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 5 L13 5 M9 1 L13 5 L9 9" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </KidButton>
        <div style={{marginTop:14, textAlign:'center', fontSize:11, color:KID.grayDim, fontFamily:KID.zh}}>
          {kt('🤍 資料只用來繪製星盤，安心保密')}
        </div>
      </div>
    </div>
  );
}

// ── Step 1 · Desktop (split with star-map preview) ─────────────────────────
function KidStep1Desk({ animate = true, ctrl = null }){
  const t = useKidTheme();
  return (
    <div style={{width:'100%', height:'100%', position:'relative', overflow:'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 55%, ${KID.skyBot} 100%)`, fontFamily:KID.zh}}>
      <KidStarfield density={1.1} animate={animate} glow={t.glow} shoot={animate}/>

      <div style={{position:'absolute', top:0, left:0, right:0, padding:'22px 38px', zIndex:3,
        display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:`1px solid ${KID.lineSoft}`}}>
        <KidBrandMark theme={t}/>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <window.KidLangToggle compact/>
          <span style={{fontFamily:t.font, fontSize:11.5, letterSpacing:'0.16em', color:KID.gray, fontWeight:600}}>{kt('免費親子星盤 · FREE BIRTH CHART')}</span>
        </div>
      </div>

      <div style={{position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1.04fr 1fr', height:'100%', paddingTop:66}}>
        <div style={{padding:'42px 52px 40px 58px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <KidEyebrow style={{marginBottom:16}}>STEP 01 OF 03</KidEyebrow>
          <h1 style={{fontFamily:KID.zh, fontSize:46, fontWeight:700, lineHeight:1.15, margin:'0 0 14px', color:KID.white, letterSpacing:'0.01em'}}>
            <KML>{kt('先為孩子建立\n小星星檔案')}</KML>
          </h1>
          <p style={{fontSize:14, color:KID.gray, margin:'0 0 30px', lineHeight:1.75, maxWidth:380}}>
            {kt('星盤不是預言，也不是替孩子定型')}
          </p>
          <div style={{maxWidth:420}}>
            <KidField label={kt('孩子的稱呼')} placeholder={kt('例如：小星')} round={t.round}
              inputProps={ctrl && { value: ctrl.form.name, onChange: e=>ctrl.set('name', e.target.value) }}/>
            <KidField label={kt('接收報告的電郵')} placeholder="you@example.com" round={t.round}
              inputProps={ctrl && { type:'email', value: ctrl.form.email, onChange: e=>ctrl.set('email', e.target.value) }}/>
            {ctrl && ctrl.error && <div style={{color:KID.peach, fontSize:12.5, margin:'0 0 12px'}}>{ctrl.error}</div>}
            <KidButton round={t.round} style={{marginTop:20}} onClick={ctrl ? ctrl.next : undefined}>
              {kt('繼續填寫出生資料')}
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 5 L13 5 M9 1 L13 5 L9 9" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </KidButton>
          </div>
        </div>

        <div style={{position:'relative', borderLeft:`1px solid ${KID.lineSoft}`, overflow:'hidden',
          display:'flex', alignItems:'center', justifyContent:'center',
          background:`radial-gradient(ellipse at 60% 42%, ${glowRGBA(t.glow,0.18)} 0%, rgba(11,26,51,0) 64%)`}}>
          <div style={{position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:18}}>
            <KidConstellation size={356} animate={animate}/>
          </div>
          <div style={{position:'absolute', bottom:38, left:42, right:42}}>
            <KidEyebrow color={KID.moon} style={{marginBottom:8}}>{kt('SOFT NOTE')}</KidEyebrow>
            <div style={{fontFamily:KID.zh, fontSize:17, color:KID.text, lineHeight:1.75, fontWeight:600}}>
              <KML>{kt('孩子不是一本需要被改寫的書，\n而是一片需要被理解的星空。')}</KML>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Step 2 · Mobile (birth details) ─────────────────────────────────────────
function KidStep2({ animate = true, ctrl = null }){
  const t = useKidTheme();
  return (
    <div style={{width:'100%', minHeight:ctrl?'100dvh':'100%', height:ctrl?'auto':'100%', position:'relative', overflow:ctrl?'visible':'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 50%, ${KID.skyBot} 100%)`, fontFamily:KID.zh}}>
      <KidStarfield density={1} animate={animate} glow={t.glow} shoot={animate}/>
      <div style={{position:'absolute', top:54, left:0, right:0, padding:'10px 22px', zIndex:3,
        display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <KidBrandMark size={22} theme={t}/>
        <div style={{display:'flex', alignItems:'center', gap:9}}>
          <window.KidLangToggle compact/>
          <span style={{fontFamily:t.font, fontSize:11, letterSpacing:'0.16em', color:KID.gray, fontWeight:600}}>02 / 03</span>
        </div>
      </div>
      <div style={{position:'absolute', top:96, left:22, right:22, zIndex:3}}><KidProgress step={2}/></div>

      <div style={{position:'relative', zIndex:2, padding:'126px 26px max(72px, calc(36px + env(safe-area-inset-bottom)))'}}>
        <div style={{textAlign:'center', marginBottom:24}}>
          <KidEyebrow style={{marginBottom:12}}>{kt('STEP TWO · 出生資訊')}</KidEyebrow>
          <h1 style={{fontFamily:KID.zh, fontSize:30, fontWeight:700, lineHeight:1.25, margin:'0 0 10px', color:KID.white}}>
            <KML>{kt('孩子\n來到世界那一刻')}</KML>
          </h1>
          <p style={{fontSize:13, color:KID.gray, margin:0, lineHeight:1.7}}>{kt('我們會用出生資料計算太陽、月亮、上升與宮位，畫出孩子來到世界那一刻的星空。')}</p>
        </div>

        <KidField label={kt('出生日期')} placeholder="2019 / 10 / 12" round={t.round}
          inputProps={ctrl && { type:'date', value: ctrl.form.date, onChange: e=>ctrl.set('date', e.target.value), style:{colorScheme:'dark'} }}/>
        <KidField label={kt('出生時間')} round={t.round}>
          <div style={{display:'flex', gap:10, marginTop:9, alignItems:'center'}}>
            <input value={ctrl ? ctrl.form.time : undefined} defaultValue={ctrl ? undefined : '14 : 35'}
              type={ctrl ? 'time' : 'text'} disabled={ctrl ? ctrl.form.timeUnknown : false}
              onChange={ctrl ? e=>ctrl.set('time', e.target.value) : undefined}
              style={{flex:1, padding:'13px 16px', background:'rgba(193,201,240,0.06)', colorScheme:'dark',
              border:`1.5px solid ${KID.line}`, borderRadius:rad(14,t.round), color:KID.white, fontSize:15, fontFamily:KID.zh, outline:'none',
              opacity: ctrl && ctrl.form.timeUnknown ? 0.5 : 1}}/>
            <KidPill round={t.round} active={ctrl ? ctrl.form.timeUnknown : false}
              onClick={ctrl ? ()=>ctrl.set('timeUnknown', !ctrl.form.timeUnknown) : undefined}>{kt('不確定')}</KidPill>
          </div>
        </KidField>
        {ctrl
          ? <KidField label={kt('出生地點')} round={t.round}><div style={{marginTop:9}}><KidCityInput cc={ctrl.city} round={t.round} placeholder={kt('例如：香港 / 台北 / London')}/></div></KidField>
          : <KidField label={kt('出生地點')} placeholder={kt('例如：香港 / 台北 / London')} round={t.round}/>}

        <div style={{marginTop:4, padding:'12px 16px', borderRadius:rad(14,t.round), background:glowRGBA(t.glow,0.08),
          border:`1.5px solid ${KID.line}`, fontSize:12, color:KID.gray, fontFamily:KID.zh, lineHeight:1.6}}>
          {kt('✦ 不記得確切時間也沒關係，我們會用中午為他估算。')}
        </div>

        {ctrl && ctrl.error && <div style={{color:KID.peach, fontSize:12.5, margin:'12px 0 0'}}>{ctrl.error}</div>}

        <KidButton round={t.round} full style={{marginTop:20}} onClick={ctrl ? ctrl.submit : undefined}>
          {ctrl && ctrl.busy ? kt('繪製中…') : kt('畫出孩子的星空')}
          <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 5 L13 5 M9 1 L13 5 L9 9" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </KidButton>
      </div>
    </div>
  );
}

// ── Step 2 · Desktop ─────────────────────────────────────────────────────────
function KidStep2Desk({ animate = true, ctrl = null }){
  const t = useKidTheme();
  return (
    <div style={{width:'100%', height:'100%', position:'relative', overflow:'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 55%, ${KID.skyBot} 100%)`, fontFamily:KID.zh}}>
      <KidStarfield density={1.1} animate={animate} glow={t.glow} shoot={animate}/>
      <div style={{position:'absolute', top:0, left:0, right:0, padding:'22px 38px', zIndex:3,
        display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:`1px solid ${KID.lineSoft}`}}>
        <KidBrandMark theme={t}/>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <window.KidLangToggle compact/>
          <span style={{fontFamily:t.font, fontSize:11.5, letterSpacing:'0.16em', color:KID.gray, fontWeight:600}}>STEP 02 OF 03</span>
        </div>
      </div>

      <div style={{position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1.04fr 1fr', height:'100%', paddingTop:66}}>
        <div style={{padding:'42px 52px 40px 58px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <KidEyebrow style={{marginBottom:16}}>{kt('STEP 02 OF 03 · 出生資訊')}</KidEyebrow>
          <h1 style={{fontFamily:KID.zh, fontSize:46, fontWeight:700, lineHeight:1.15, margin:'0 0 14px', color:KID.white}}>
            <KML>{kt('孩子來到\n世界的那一刻')}</KML>
          </h1>
          <p style={{fontSize:14, color:KID.gray, margin:'0 0 30px', lineHeight:1.75, maxWidth:380}}>
            {kt('我們會用出生資料計算太陽、月亮、上升與宮位，畫出孩子來到世界那一刻的星空。')}
          </p>
          <div style={{maxWidth:440}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
              <KidField label={kt('出生日期')} placeholder="2019 / 10 / 12" round={t.round}
                inputProps={ctrl && { type:'date', value: ctrl.form.date, onChange: e=>ctrl.set('date', e.target.value), style:{colorScheme:'dark'} }}/>
              <KidField label={kt('出生時間')} placeholder="14 : 35" round={t.round}
                inputProps={ctrl && { type:'time', value: ctrl.form.time, disabled: ctrl.form.timeUnknown, onChange: e=>ctrl.set('time', e.target.value), style:{colorScheme:'dark', opacity: ctrl.form.timeUnknown?0.5:1} }}/>
            </div>
            {ctrl
              ? <KidField label={kt('出生地點')} round={t.round}><div style={{marginTop:9}}><KidCityInput cc={ctrl.city} round={t.round} placeholder={kt('例如：香港 / 台北 / London')}/></div></KidField>
              : <KidField label={kt('出生地點')} placeholder={kt('例如：香港 / 台北 / London')} round={t.round}/>}
            {ctrl && ctrl.error && <div style={{color:KID.peach, fontSize:12.5, margin:'0 0 12px'}}>{ctrl.error}</div>}
            <KidButton round={t.round} style={{marginTop:18}} onClick={ctrl ? ctrl.submit : undefined}>
              {ctrl && ctrl.busy ? kt('繪製中…') : kt('畫出孩子的星空')}
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 5 L13 5 M9 1 L13 5 L9 9" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </KidButton>
          </div>
        </div>
        <div style={{position:'relative', borderLeft:`1px solid ${KID.lineSoft}`, overflow:'hidden',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:24, padding:'44px 42px 36px',
          background:`radial-gradient(ellipse at 55% 45%, ${glowRGBA(t.glow,0.2)} 0%, rgba(11,26,51,0) 64%)`}}>
          <div style={{position:'relative', zIndex:2, width:'100%', maxWidth:440}}>
            <KidEyebrow color={KID.moon} style={{marginBottom:8}}>HOW IT WORKS</KidEyebrow>
            <div style={{fontFamily:KID.zh, fontSize:16.5, color:KID.text, lineHeight:1.65, fontWeight:600}}>
              {window.klang?.()==='en' ? <>We’ll turn the positions of the <span style={{color:t.primary}}>Sun, Moon and every planet</span> at that moment into your child’s own sky.</> : <>我們會把那一刻的<span style={{color:t.primary}}>太陽、月亮與每顆行星</span>的位置，畫成孩子專屬的星空。</>}
              <div style={{marginTop:12, color:KID.gray, fontWeight:500}}>
                <KML>{kt('孩子不是一本需要被改寫的書，\n而是一片需要被理解的星空。')}</KML>
              </div>
            </div>
          </div>
          <div style={{position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:10}}>
            <window.ChartWheel size={320} theme="kids" animate={animate} progress={0.55} data={window.SAMPLE_WHEEL_DATA} showLabels={false}/>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Loading progress hook ──────────────────────────────────────────────────
function useKidLoop({ duration = 5500, animate = true }){
  const [t,setT] = React.useState(animate?0:1);
  React.useEffect(()=>{
    if(!animate){ setT(1); return; }
    let start = performance.now(), raf;
    const tick = now => { setT(((now-start)%duration)/duration); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick); return ()=>cancelAnimationFrame(raf);
  },[duration, animate]);
  return t;
}
const KID_STATUS = ['正在收集孩子的星光…','排好天空的位置…','畫出每顆小行星…','連起星座的線…','完成孩子的星空圖！'];

// ── Step 3 · Mobile ─────────────────────────────────────────────────────────
function KidStep3({ animate = true, wheelStyle = 'traditional' }){
  const t = useKidTheme(); const rootRef = React.useRef(null); const inView = useInView(rootRef);
  const p = useKidLoop({ duration:5500, animate: animate && inView });
  const idx = Math.min(KID_STATUS.length-1, Math.floor(p*KID_STATUS.length));
  return (
    <div ref={rootRef} style={{width:'100%', height:'100%', position:'relative', overflow:'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 52%, ${KID.skyBot} 100%)`, fontFamily:KID.zh,
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
      <KidStarfield density={1.2} animate={animate} glow={t.glow} shoot={animate}/>

      <div style={{position:'absolute', top:54, left:0, right:0, padding:'10px 22px', zIndex:3,
        display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <KidBrandMark size={22} theme={t}/>
        <span style={{fontFamily:t.font, fontSize:11, letterSpacing:'0.16em', color:t.primary, fontWeight:600}}>03 / 03</span>
      </div>
      <div style={{position:'absolute', top:96, left:22, right:22, zIndex:3}}><KidProgress step={3}/></div>

      <div style={{position:'relative', zIndex:2, marginTop:54, display:'flex', justifyContent:'center'}}>
        <div style={{position:'absolute', width:330, height:330, borderRadius:'50%', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
          background:`radial-gradient(circle, ${glowRGBA(t.glow,0.32)} 0%, rgba(11,26,51,0) 66%)`,
          animation: animate?'k-pulse 5s ease-in-out infinite':'none'}}/>
        <div style={{position:'relative', animation: animate?'k-float 6s ease-in-out infinite':'none'}}>
          <window.ChartWheel size={262} theme="kids" animate={animate} progress={p} data={window.SAMPLE_WHEEL_DATA} showLabels={wheelStyle!=='minimalist'}/>
        </div>
      </div>

      <div style={{position:'relative', zIndex:2, textAlign:'center', marginTop:28, padding:'0 28px'}}>
        <KidEyebrow color={KID.moon} style={{marginBottom:12}}>PLOTTING THEIR SKY</KidEyebrow>
        <div style={{fontFamily:KID.zh, fontSize:25, fontWeight:700, color:KID.white, marginBottom:7}}>正在畫出孩子的星空</div>
        <div style={{fontSize:13.5, color:KID.gray, marginBottom:7}}>{kten('正在畫出孩子的星空')}</div>
        <div style={{fontSize:13.5, color:KID.gray, minHeight:20}}>{KID_STATUS[idx]} · {kten(KID_STATUS[idx])}</div>
        <div style={{display:'flex', gap:7, justifyContent:'center', marginTop:20}}>
          {KID_STATUS.map((_,i)=>{ const on = p*KID_STATUS.length > i;
            return <div key={i} style={{width:on?24:7, height:5, borderRadius:'999px',
              background: on?t.primary:'rgba(193,201,240,0.18)', boxShadow: on?`0 0 8px ${glowRGBA(t.glow,0.6)}`:'none', transition:'all .4s'}}/>;
          })}
        </div>
      </div>
    </div>
  );
}

// ── Step 3 · Desktop ────────────────────────────────────────────────────────
function KidStep3Desk({ animate = true, wheelStyle = 'traditional' }){
  const t = useKidTheme(); const rootRef = React.useRef(null); const inView = useInView(rootRef);
  const p = useKidLoop({ duration:6000, animate: animate && inView });
  return (
    <div ref={rootRef} style={{width:'100%', height:'100%', position:'relative', overflow:'hidden', color:KID.text,
      background:`linear-gradient(180deg, ${KID.skyTop} 0%, ${KID.bg0} 55%, ${KID.skyBot} 100%)`, fontFamily:KID.zh, display:'flex', flexDirection:'column'}}>
      <KidStarfield density={0.9} animate={animate} glow={t.glow} shoot={animate}/>

      <div style={{padding:'22px 38px', display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`1px solid ${KID.lineSoft}`, position:'relative', zIndex:3}}>
        <KidBrandMark theme={t}/>
        <span style={{fontFamily:t.font, fontSize:11.5, letterSpacing:'0.16em', color:t.primary, fontWeight:600}}>STEP 03 · PLOTTING</span>
      </div>

      <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr 1.05fr', alignItems:'center', padding:'0 56px', gap:40, position:'relative', zIndex:2}}>
        <div>
          <KidEyebrow color={KID.moon} style={{marginBottom:18}}>STEP 03 · PLOTTING</KidEyebrow>
          <h1 style={{fontFamily:KID.zh, fontSize:46, fontWeight:700, lineHeight:1.15, margin:'0 0 16px', color:KID.white}}>
            天空正為<br/>孩子排好位置
          </h1>
          <div style={{fontSize:17, color:KID.gray, margin:'-6px 0 16px', lineHeight:1.55, fontFamily:t.font, fontWeight:600}}>
            {kten('天空正為\n孩子排好位置')}
          </div>
          <p style={{fontSize:14, color:KID.gray, margin:'0 0 30px', lineHeight:1.75, maxWidth:340}}>
            我們正在計算每一顆星星的位置，為孩子畫出獨一無二的星空圖。只要一會兒。<br/>
            <span style={{fontFamily:t.font}}>{kten('我們正在計算每一顆星星的位置，為孩子畫出獨一無二的星空圖。只要一會兒。')}</span>
          </p>
          <div style={{display:'flex', flexDirection:'column', gap:13}}>
            {KID_STATUS.map((line,i)=>{
              const phase = i/KID_STATUS.length, next = (i+1)/KID_STATUS.length;
              const done = p>next, active = p>=phase && p<next;
              return (
                <div key={i} style={{display:'flex', alignItems:'center', gap:13, fontSize:13.5,
                  color: done?KID.grayDim:active?KID.white:KID.grayDim, transition:'color .3s'}}>
                  <span style={{width:18, height:18, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {done ? <SparkleStar size={16} color={t.primary}/>
                      : active ? <span style={{width:8, height:8, borderRadius:'50%', background:t.primary, boxShadow:`0 0 10px ${t.primary}`, animation: animate?'k-pulse 1.2s ease-in-out infinite':'none'}}/>
                      : <span style={{width:6, height:6, borderRadius:'50%', background:'rgba(193,201,240,0.22)'}}/>}
                  </span>
                  <span style={{fontWeight: active?600:400}}>{line} · {kten(line)}</span>
                </div>
              );
            })}
          </div>
          <div style={{marginTop:30, height:5, borderRadius:'999px', background:'rgba(193,201,240,0.14)', maxWidth:380, overflow:'hidden'}}>
            <div style={{height:'100%', borderRadius:'999px', width:`${p*100}%`, background:`linear-gradient(90deg,${t.primary},${t.accents[0]})`, boxShadow:`0 0 10px ${glowRGBA(t.glow,0.6)}`, transition:'width .15s linear'}}/>
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'center', alignItems:'center', position:'relative'}}>
          <div style={{position:'absolute', width:430, height:430, borderRadius:'50%',
            background:`radial-gradient(circle, ${glowRGBA(t.glow,0.26)} 0%, rgba(11,26,51,0) 64%)`, filter:'blur(6px)',
            animation: animate?'k-pulse 6s ease-in-out infinite':'none'}}/>
          <div style={{position:'relative', animation: animate?'k-float 7s ease-in-out infinite':'none'}}>
            <window.ChartWheel size={404} theme="kids" animate={animate} progress={p} data={window.SAMPLE_WHEEL_DATA} showLabels={wheelStyle!=='minimalist'}/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KidProgress, KidStep1, KidStep1Desk, KidStep2, KidStep2Desk, KidStep3, KidStep3Desk, useKidLoop, KID_STATUS });