{/* logo mark — Breath */}

QUANTUM MIND

Hypnotherapy sessions written for you.
Not for everyone.

{[ ['AI-generated scripts built from your intake', A.secondary], ['Professional voice, breathing background', A.primary], ['Adapts to what actually works for you', A.accent], ].map(([text, col], i) => (

{text}

))}

); } function DeepHome() { const qm = useQM(); return (

{/* header */}

Tuesday evening

Hi, Elena

{/* Hero CTA card with live breathing orb */}

{ qm.setScreen('intake'); qm.setIntakeStep(0); }} style={{ borderRadius: 20, overflow: 'hidden', cursor: 'pointer', marginBottom: 18, background: `linear-gradient(135deg, ${A.gradStart}, ${A.gradMid})`, border: `1px solid ${A.border}`, position: 'relative', padding: 20, minHeight: 140, }}>

Tonight's suggestion

A session for winding down after a long day.

Built in ~2 min from a short check-in

Start · 10 min free {QMI.arrowRight(A.secondary, 14)}

{/* Stats row */}

{[ { v: '12', l: 'Sessions' }, { v: '8', l: 'Day streak' }, { v: '+2.4', l: 'Avg mood Δ' }, ].map((s, i) => (

{s.v}

{s.l}

))}

{/* Recent sessions */}

Recent sessions

View all

{qm.sessions.map(s => (

{ qm.setSessionId(s.id); qm.setScreen('session'); }} style={{ ...deepStyles.card, marginBottom: 10, cursor: 'pointer' }}>

{s.status === 'audio_ready' ? QMI.play(A.success, 16) : QMI.sparkle(A.warn, 16)}

{s.title}

{qm.focusCats.find(c => c.value === s.focus)?.label} · {s.duration} min · {s.date}

{QMI.chevronR(A.textMuted, 16)}

))}

); } function DeepIntake() { const qm = useQM(); const step = qm.intakeStep; const total = 5; const next = () => step < total - 1 ? qm.setIntakeStep(step + 1) : qm.setScreen('preview'); const back = () => step > 0 ? qm.setIntakeStep(step - 1) : qm.setScreen('landing'); const stepContent = () => { switch (step) { case 0: return { title: "What's going on?", subtitle: "In your own words — no wrong answers. This shapes the whole session.", body: (

qm.setIntakeAnswers({ ...qm.intakeAnswers, mainIssue: e.target.value })}
            style={{
              width: '100%', minHeight: 140, background: A.cardAlt, color: A.text,
              border: `1px solid ${A.border}`, borderRadius: 12, padding: 14,
              fontSize: 15, fontFamily: 'inherit', resize: 'none',
            }}
          />
        ),
      };
      case 1: return {
        title: "What do you want to feel instead?",
        subtitle: "Be specific. Your subconscious responds better to texture than to abstractions.",
        body: (
          <textarea
            placeholder="Calm, but not foggy. Able to fall asleep without arguing with my own brain."
            value={qm.intakeAnswers.desiredShift}
            onChange={e => qm.setIntakeAnswers({ ...qm.intakeAnswers, desiredShift: e.target.value })}
            style={{
              width: '100%', minHeight: 140, background: A.cardAlt, color: A.text,
              border: `1px solid ${A.border}`, borderRadius: 12, padding: 14,
              fontSize: 15, fontFamily: 'inherit', resize: 'none',
            }}
          />
        ),
      };
      case 2: return {
        title: "Which feels closest right now?",
        subtitle: "Pick one. This weights the technique selection.",
        body: (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 4 }}>
            {qm.focusCats.map(c => {
              const active = qm.focusCategory === c.value;
              return (
                <button key={c.value} onClick={() => qm.setFocusCategory(c.value)} style={{
                  background: active ? 'rgba(123,110,246,0.12)' : A.card,
                  border: `1.5px solid ${active ? A.primary : A.border}`,
                  borderRadius: 14, padding: '18px 12px', cursor: 'pointer',
                  color: A.text, textAlign: 'left', fontFamily: 'inherit',
                }}>
                  <div style={{ fontSize: 22, marginBottom: 8 }}>{c.emoji}</div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{c.label}</div>
                </button>
              );
            })}
          </div>
        ),
      };
      case 3: return {
        title: "How long tonight?",
        subtitle: "Shorter isn't worse. Match your available attention.",
        body: (
          <div>
            <div style={{ textAlign: 'center', fontSize: 56, fontWeight: 700, letterSpacing: -1.5, marginBottom: 4, fontFamily: 'Fraunces, serif' }}>
              {qm.intakeAnswers.duration}<span style={{ fontSize: 22, color: A.textLight, marginLeft: 6, fontWeight: 400 }}>min</span>
            </div>
            <input type="range" min="10" max="45" step="5" value={qm.intakeAnswers.duration}
              onChange={e => qm.setIntakeAnswers({ ...qm.intakeAnswers, duration: Number(e.target.value) })}
              style={{ width: '100%', accentColor: A.primary, marginTop: 10 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: A.textMuted, marginTop: 6 }}>
              <span>10</span><span>25</span><span>45</span>
            </div>
          </div>
        ),
      };
      case 4: return {
        title: "End awake, or end asleep?",
        subtitle: "We'll shape the closing differently.",
        body: (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { v: 'awake', t: 'End awake & grounded', d: 'Clear head, gentle emergence. For daytime.' },
              { v: 'asleep', t: 'Drift into sleep', d: "We'll trail off. Don't worry about the end." },
            ].map(opt => {
              const active = qm.intakeAnswers.postState === opt.v;
              return (
                <button key={opt.v} onClick={() => qm.setIntakeAnswers({ ...qm.intakeAnswers, postState: opt.v })} style={{
                  background: active ? 'rgba(123,110,246,0.1)' : A.card,
                  border: `1.5px solid ${active ? A.primary : A.border}`, borderRadius: 14,
                  padding: 16, cursor: 'pointer', color: A.text, textAlign: 'left',
                  display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'inherit',
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 18,
                    background: active ? A.primary : A.cardAlt, display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                  }}>
                    {opt.v === 'asleep' ? QMI.moon(active ? '#fff' : A.textLight, 18) : QMI.sparkle(active ? '#fff' : A.textLight, 18)}
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 2 }}>{opt.t}</div>
                    <div style={{ fontSize: 12, color: A.textMuted }}>{opt.d}</div>
                  </div>
                </button>
              );
            })}
          </div>
        ),
      };
    }
  };

const s = stepContent();

return (
    <div style={deepStyles.screen}>
      <div style={{ padding: '54px 20px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={back} style={{
          width: 36, height: 36, borderRadius: 18, background: A.card, border: `1px solid ${A.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>{QMI.chevronL(A.text, 18)}</button>
        <div style={{ flex: 1, height: 4, background: A.card, borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: `${((step+1)/total)*100}%`, height: '100%', background: A.primary, transition: 'width .3s' }} />
        </div>
        <div style={{ fontSize: 12, color: A.textMuted, fontVariantNumeric: 'tabular-nums' }}>{step+1}/{total}</div>
      </div>

<div style={{ flex: 1, overflow: 'auto', padding: '16px 24px 24px' }}>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.2, marginBottom: 8, fontFamily: 'Fraunces, serif' }}>{s.title}</div>
        <div style={{ fontSize: 14, color: A.textLight, marginBottom: 22, lineHeight: 1.5 }}>{s.subtitle}</div>
        {s.body}
      </div>

<div style={{ padding: '12px 20px 28px' }}>
        <button style={deepStyles.btnPrimary} onClick={next}>
          {step === total - 1 ? 'See my session plan' : 'Continue'}
        </button>
      </div>
    </div>
  );
}

function DeepPreview() {
  const qm = useQM();
  const techniques = [
    { n: 'Somatic relaxation', w: 'body-based release' },
    { n: 'Resource anchoring', w: 'from your cliff memory' },
    { n: 'Emotional reframing', w: 'for the work review loop' },
    { n: 'Future pacing', w: 'rehearse Thursday, settled' },
  ];
  return (
    <div style={deepStyles.screen}>
      <div style={{ padding: '54px 20px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={() => qm.setScreen('intake')} style={{
          width: 36, height: 36, borderRadius: 18, background: A.card, border: `1px solid ${A.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>{QMI.chevronL(A.text, 18)}</button>
        <div style={{ fontSize: 13, color: A.textMuted }}>Session plan</div>
      </div>

<div style={{ flex: 1, overflow: 'auto', padding: '12px 22px 24px' }}>
        <div style={{ fontSize: 13, color: A.secondary, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10, fontWeight: 500 }}>Draft · not generated yet</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 500, lineHeight: 1.22, letterSpacing: -0.5, marginBottom: 18 }}>
          A <em style={{ color: A.secondary }}>25-minute</em> session to help you release evening anxiety and drift into sleep.
        </div>

<div style={{ ...deepStyles.card, padding: 0, overflow: 'hidden', marginBottom: 16 }}>
          <div style={{ padding: '14px 16px', borderBottom: `1px solid ${A.border}`, display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 12, color: A.textMuted, textTransform: 'uppercase', letterSpacing: 0.8 }}>Techniques chosen for you</span>
            <span style={{ fontSize: 12, color: A.secondary }}>{techniques.length}</span>
          </div>
          {techniques.map((t, i) => (
            <div key={i} style={{
              padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < techniques.length-1 ? `1px solid ${A.border}` : 'none',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8, background: 'rgba(123,110,246,0.12)',
                border: '1px solid rgba(123,110,246,0.3)', fontSize: 13, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: A.primaryLight,
              }}>{i+1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{t.n}</div>
                <div style={{ fontSize: 12, color: A.textMuted }}>{t.w}</div>
              </div>
            </div>
          ))}
        </div>

<div style={{ ...deepStyles.card, marginBottom: 16 }}>
          <div style={{ fontSize: 12, color: A.textMuted, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 8 }}>Structure · 11 phases</div>
          <div style={{ fontSize: 13, color: A.textLight, lineHeight: 1.7 }}>
            Orienting intro → induction → deepening → resource activation → nested metaphor → <span style={{ color: A.text }}>core change work</span> → identity installation → behavioural rehearsal → future pacing → integration → gentle emergence
          </div>
        </div>

<div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 12, background: 'rgba(0,212,255,0.06)', border: '1px solid rgba(0,212,255,0.2)', borderRadius: 12, marginBottom: 8 }}>
          {QMI.sparkle(A.secondary, 18)}
          <div style={{ fontSize: 12, color: A.textLight, lineHeight: 1.4 }}>
            We'll learn what works for you. Next time, this page is different.
          </div>
        </div>
      </div>

<div style={{ padding: '12px 20px 28px' }}>
        <button style={deepStyles.btnPrimary} onClick={() => { qm.setScreen('session'); qm.setAudioState('setup'); }}>
          Generate the script
        </button>
      </div>
    </div>
  );
}

function DeepSession() {
  const qm = useQM();
  const [showIntake, setShowIntake] = React.useState(false);
  return (
    <div style={deepStyles.screen}>
      <div style={{ padding: '54px 16px 12px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${A.border}` }}>
        <button onClick={() => qm.setScreen('home')} style={{
          width: 36, height: 36, borderRadius: 18, background: A.card, border: `1px solid ${A.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>{QMI.chevronL(A.text, 18)}</button>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{qm.current.title}</div>
          <div style={{ fontSize: 11, color: A.success, display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: A.success }} /> Script ready · v2
          </div>
        </div>
      </div>

<div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
        <div style={{ ...deepStyles.card, marginBottom: 12 }}>
          {[['Focus', 'Anxiety Relief'], ['Duration', '25 min'], ['Ending', 'Drift into sleep'], ['Voice', 'Nora · warm']].map(([l,v], i, arr) => (
            <div key={l} style={{
              display: 'flex', justifyContent: 'space-between', padding: '10px 0',
              borderBottom: i < arr.length-1 ? `1px solid ${A.border}` : 'none',
            }}>
              <span style={{ fontSize: 13, color: A.textMuted }}>{l}</span>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{v}</span>
            </div>
          ))}
        </div>

<button onClick={() => setShowIntake(!showIntake)} style={{
          width: '100%', background: A.cardAlt, border: `1px solid ${A.border}`, borderRadius: 12,
          padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          cursor: 'pointer', color: A.textLight, fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
          marginBottom: 12,
        }}>
          <span>Intake summary</span>
          {showIntake ? QMI.chevronD(A.textMuted, 16) : QMI.chevronR(A.textMuted, 16)}
        </button>
        {showIntake && (
          <div style={{ ...deepStyles.card, marginBottom: 12, background: A.cardAlt }}>
            {[
              ['Main issue', "Anxious about Thursday review. Can't sleep."],
              ['Desired shift', 'Calm but not foggy, able to fall asleep'],
              ['Success vision', "Wake up Thursday feeling prepared, not frayed"],
            ].map(([l, v]) => (
              <div key={l} style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 11, color: A.textMuted, textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 3 }}>{l}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}>{v}</div>
              </div>
            ))}
          </div>
        )}

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '16px 2px 8px' }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Script</div>
          <div style={{ fontSize: 11, color: A.warn, background: 'rgba(251,191,36,0.12)', padding: '3px 8px', borderRadius: 10 }}>Edited</div>
        </div>
        <div style={{ ...deepStyles.card, padding: 14, whiteSpace: 'pre-wrap', fontSize: 13.5, lineHeight: 1.7, color: A.text, fontFamily: 'Fraunces, serif', background: A.cardAlt }}>
          {qm.script}
        </div>
      </div>

<div style={{ padding: '12px 16px 28px', display: 'flex', flexDirection: 'column', gap: 8, borderTop: `1px solid ${A.border}` }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ ...deepStyles.btnOutline, flex: 1, padding: '11px 14px', fontSize: 13 }}>Regenerate</button>
          <button style={{ ...deepStyles.btnOutline, flex: 1, padding: '11px 14px', fontSize: 13 }}>Save edits</button>
        </div>
        <button style={deepStyles.btnPrimary} onClick={() => { qm.setAudioState('setup'); qm.setScreen('audio'); }}>
          Generate audio session →
        </button>
      </div>
    </div>
  );
}

function DeepAudio() {
  const qm = useQM();
  const [step, setStep] = React.useState(qm.audioState); // 'setup' | 'generating' | 'ready'
  const [genStep, setGenStep] = React.useState(1);

React.useEffect(() => {
    if (step !== 'generating') return;
    const t1 = setTimeout(() => setGenStep(2), 1200);
    const t2 = setTimeout(() => { setStep('ready'); qm.setAudioState('ready'); qm.setIsPlaying(true); }, 2800);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [step]);

const fmt = (p) => {
    const total = 25 * 60;
    const s = Math.floor(p * total);
    return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;
  };

return (
    <div style={deepStyles.screen}>
      <div style={{ padding: '54px 16px 12px', display: 'flex', alignItems: 'center' }}>
        <button onClick={() => qm.setScreen('session')} style={{
          width: 36, height: 36, borderRadius: 18, background: A.card, border: `1px solid ${A.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>{QMI.chevronL(A.text, 18)}</button>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 14, fontWeight: 600 }}>Audio session</div>
        <div style={{ width: 36 }} />
      </div>

{step === 'setup' && (
        <>
          <div style={{ flex: 1, overflow: 'auto', padding: '8px 18px 16px' }}>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 24, fontWeight: 500, letterSpacing: -0.4, marginBottom: 4 }}>
              Pick a background
            </div>
            <div style={{ fontSize: 13, color: A.textMuted, marginBottom: 18 }}>It breathes along with the narration.</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {qm.tracks.slice(0, 8).map(t => {
                const active = qm.selectedTrack === t.id;
                return (
                  <button key={t.id} onClick={() => qm.setSelectedTrack(t.id)} style={{
                    background: active ? 'rgba(123,110,246,0.08)' : A.card,
                    border: `1.5px solid ${active ? A.primary : A.border}`,
                    borderRadius: 12, padding: '12px 14px', cursor: 'pointer',
                    display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
                    fontFamily: 'inherit', color: A.text,
                  }}>
                    <div style={{
                      width: 34, height: 34, borderRadius: 8,
                      background: active ? A.primary : A.cardAlt, display: 'flex',
                      alignItems: 'center', justifyContent: 'center',
                    }}>
                      <MiniWave color={active ? '#fff' : A.textMuted} width={20} height={16} playing={active} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 500, color: active ? A.primaryLight : A.text }}>{t.name}</div>
                      <div style={{ fontSize: 11, color: A.textMuted, marginTop: 2 }}>{t.tags.join(' · ')}</div>
                    </div>
                    {active && <div style={{
                      width: 22, height: 22, borderRadius: 11, background: A.primary,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{QMI.check('#fff', 13)}</div>}
                  </button>
                );
              })}
            </div>
          </div>
          <div style={{ padding: '12px 18px 28px', borderTop: `1px solid ${A.border}` }}>
            <button style={deepStyles.btnPrimary} onClick={() => { setStep('generating'); setGenStep(1); }}>
              Generate audio · ~40s
            </button>
          </div>
        </>
      )}

{step === 'generating' && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 28, textAlign: 'center' }}>
          <div style={{ marginBottom: 32, position: 'relative' }}>
            <BreathingGradient palette={['#1A1040', A.bg, A.primary, A.secondary, A.accent]} size={180} playing={true} />
          </div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, marginBottom: 8 }}>
            {genStep === 1 ? 'Weaving your narration…' : 'Mixing with Rainfall on Cedar…'}
          </div>
          <div style={{ fontSize: 13, color: A.textMuted, maxWidth: 260, lineHeight: 1.5, marginBottom: 32 }}>
            This usually takes about 40 seconds. You'll get a notification when it's ready.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
            {[
              { l: 'Script prepared', done: true, active: false },
              { l: 'Voice narration', done: genStep >= 2, active: genStep === 1 },
              { l: 'Mixing ambient track', done: false, active: genStep === 2 },
            ].map(s => (
              <div key={s.l} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 9,
                  background: s.done ? A.success : s.active ? A.primary : A.border,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: s.active ? `0 0 0 4px rgba(123,110,246,0.2)` : 'none',
                  transition: 'all .3s',
                }}>
                  {s.done ? QMI.check('#fff', 11) : s.active ? <div style={{ width: 6, height: 6, borderRadius: 3, background: '#fff' }} /> : null}
                </div>
                <span style={{ fontSize: 13, color: s.done || s.active ? A.text : A.textMuted }}>{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      )}

{step === 'ready' && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 20px 28px' }}>
          {/* Breathing player core */}
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingTop: 20 }}>
            <div style={{ position: 'relative', marginBottom: 28 }}>
              <BreathingGradient palette={['#1A1040', A.bg, A.primary, A.secondary, A.accent]} size={240} playing={qm.isPlaying} />
              {/* soft outer halo */}
              <div style={{
                position: 'absolute', inset: -20, borderRadius: 9999,
                background: `radial-gradient(circle, ${A.primary}22, transparent 70%)`,
                pointerEvents: 'none', zIndex: -1,
              }} />
            </div>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, letterSpacing: -0.3, textAlign: 'center', lineHeight: 1.25, maxWidth: 280, marginBottom: 6 }}>
              {qm.current.title}
            </div>
            <div style={{ fontSize: 12, color: A.textMuted, marginBottom: 28 }}>
              Nora · Rainfall on Cedar · 25 min
            </div>

{/* progress */}
            <div style={{ width: '100%', maxWidth: 300, marginBottom: 24 }}>
              <div style={{ height: 3, background: A.border, borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
                <div style={{ width: `${qm.progress*100}%`, height: '100%', background: `linear-gradient(90deg, ${A.primary}, ${A.secondary})`, transition: 'width .1s' }} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: A.textMuted, marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>
                <span>{fmt(qm.progress)}</span><span>25:00</span>
              </div>
            </div>

{/* controls */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
              <button onClick={() => qm.setProgress(Math.max(0, qm.progress - 0.02))} style={{
                background: 'transparent', border: 'none', cursor: 'pointer', padding: 10,
              }}>{QMI.back15(A.textLight, 26)}</button>
              <button onClick={() => qm.setIsPlaying(!qm.isPlaying)} style={{
                width: 72, height: 72, borderRadius: 36, background: A.secondary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: 'none', cursor: 'pointer',
                boxShadow: `0 8px 30px rgba(0,212,255,0.4)`,
              }}>
                {qm.isPlaying ? QMI.pause(A.bg, 30) : QMI.play(A.bg, 30)}
              </button>
              <button onClick={() => qm.setProgress(Math.min(1, qm.progress + 0.02))} style={{
                background: 'transparent', border: 'none', cursor: 'pointer', padding: 10,
              }}>{QMI.fwd15(A.textLight, 26)}</button>
            </div>
          </div>

{/* secondary row */}
          <div style={{ display: 'flex', justifyContent: 'space-around', padding: '20px 0 6px', borderTop: `1px solid ${A.border}` }}>
            {[
              { icon: QMI.download, l: 'Download' },
              { icon: QMI.share, l: 'Share' },
              { icon: QMI.heart, l: 'Mood' },
            ].map(b => (
              <button key={b.l} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                color: A.textLight, fontSize: 11, padding: 8, fontFamily: 'inherit',
              }}>
                {b.icon(A.textLight, 20)}
                <span>{b.l}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function DeepProgress() {
  const data = [5,6,4,7,6,8,7,9,7,8,9,8,9,10];
  const before = [3,4,3,5,4,5,4,6,5,6,7,6,7,7];
  return (
    <div style={deepStyles.screen}>
      <div style={{ flex: 1, overflow: 'auto', padding: '56px 20px 100px' }}>
        <div style={{ fontSize: 13, color: A.textMuted, marginBottom: 4 }}>Progress</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 500, letterSpacing: -0.5, marginBottom: 22 }}>
          Your brain is learning.
        </div>

<div style={{ display: 'flex', gap: 10, marginBottom: 22 }}>
          {[
            { v: '8', l: 'Day streak', c: A.secondary },
            { v: '+2.4', l: 'Avg Δ mood', c: A.success },
            { v: '12', l: 'Sessions', c: A.primaryLight },
          ].map(s => (
            <div key={s.l} style={{ ...deepStyles.card, flex: 1, padding: 14 }}>
              <div style={{ fontSize: 11, color: A.textMuted, marginBottom: 4 }}>{s.l}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: s.c }}>{s.v}</div>
            </div>
          ))}
        </div>

<div style={{ ...deepStyles.card, marginBottom: 18, padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Mood · last 14 sessions</div>
            <div style={{ display: 'flex', gap: 10, fontSize: 10, color: A.textMuted }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: A.textMuted, opacity: 0.6 }} />Before</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: A.secondary }} />After</span>
            </div>
          </div>
          <svg width="100%" height="110" viewBox="0 0 280 110">
            {data.map((v, i) => {
              const x = 4 + i*20;
              const bh = before[i]*8; const ah = v*8;
              return <g key={i}>
                <rect x={x} y={104 - bh} width={7} height={bh} rx={1.5} fill={A.textMuted} opacity={0.35} />
                <rect x={x+8} y={104 - ah} width={7} height={ah} rx={1.5} fill={A.secondary} />
              </g>;
            })}
          </svg>
        </div>

<div style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>What's working for you</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { t: 'Resource anchoring', n: '4.6 avg · used 7×', c: A.success },
            { t: 'Future pacing', n: '4.3 avg · used 5×', c: A.success },
            { t: 'Somatic release', n: '3.1 avg · used 4×', c: A.warn },
          ].map(r => (
            <div key={r.t} style={{ ...deepStyles.card, padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 6, height: 36, borderRadius: 3, background: r.c }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{r.t}</div>
                <div style={{ fontSize: 11, color: A.textMuted, marginTop: 2 }}>{r.n}</div>
              </div>
              {QMI.chevronR(A.textMuted, 14)}
            </div>
          ))}
        </div>
      </div>
      <DeepTabs />
    </div>
  );
}

function DeepProgramScreen() {
  return (
    <div style={deepStyles.screen}>
      <div style={{ flex: 1, overflow: 'auto', padding: '56px 20px 100px' }}>
        <div style={{ fontSize: 13, color: A.textMuted, marginBottom: 4 }}>Programs</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 500, letterSpacing: -0.5, marginBottom: 20 }}>
          Multi-session journeys
        </div>

{/* active program card */}
        <div style={{
          borderRadius: 18, padding: 18, marginBottom: 20,
          background: `linear-gradient(135deg, ${A.gradStart}, ${A.gradEnd})`,
          border: `1px solid ${A.border}`, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ fontSize: 11, color: A.secondary, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6 }}>In progress</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, marginBottom: 4 }}>14-Day Anxiety Release</div>
          <div style={{ fontSize: 12, color: A.textLight, marginBottom: 14 }}>Day 7 of 14 · Keep going</div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 5, marginBottom: 8 }}>
            {Array.from({length: 14}).map((_, i) => (
              <div key={i} style={{
                aspectRatio: '1', borderRadius: 6,
                background: i < 7 ? A.secondary : i === 7 ? A.primary : 'rgba(255,255,255,0.08)',
                border: i === 7 ? `2px solid ${A.primaryLight}` : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, fontWeight: 600, color: i < 7 ? A.bg : i === 7 ? '#fff' : A.textMuted,
              }}>{i+1}</div>
            ))}
          </div>
        </div>

{/* others */}
        {[
          { t: '21-Day Sleep Reset', d: 'Train your nervous system into a new rhythm', c: A.accent },
          { t: '28-Day Confidence Builder', d: 'Rewire the stories you tell yourself', c: A.primary },
        ].map(p => (
          <div key={p.t} style={{ ...deepStyles.card, marginBottom: 10, padding: 16, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: `linear-gradient(135deg, ${p.c}33, ${p.c}11)`,
                border: `1px solid ${p.c}44`, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{QMI.path(p.c, 20)}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{p.t}</div>
                <div style={{ fontSize: 11, color: A.textMuted, marginTop: 2 }}>{p.d}</div>
              </div>
              {QMI.chevronR(A.textMuted, 16)}
            </div>
          </div>
        ))}
      </div>
      <DeepTabs />
    </div>
  );
}

function DeepPaywall() {
  const tiers = [
    { k: 'starter', p: '$9.99', m: 30, r: '$0.33/min', s: false },
    { k: 'standard', p: '$24.99', m: 90, r: '$0.28/min', s: true },
    { k: 'pro', p: '$49.99', m: 200, r: '$0.25/min', s: false },
  ];
  return (
    <div style={deepStyles.screen}>
      <div style={deepStyles.heroBg} />
      <div style={{ flex: 1, overflow: 'auto', padding: '56px 22px 16px', position: 'relative' }}>
        <div style={{ fontSize: 12, color: A.secondary, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>0 free minutes left</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 500, letterSpacing: -0.5, lineHeight: 1.2, marginBottom: 14 }}>
          Keep going. <br/><em style={{ color: A.secondary }}>Your brain is just warming up.</em>
        </div>
        <div style={{ fontSize: 13, color: A.textLight, marginBottom: 22, lineHeight: 1.5 }}>
          Sessions are priced per minute — same as a paper coffee, with a better ROI.
        </div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {tiers.map(t => (
            <div key={t.k} style={{
              borderRadius: 16, padding: 16,
              background: t.s ? 'rgba(123,110,246,0.1)' : A.card,
              border: `1.5px solid ${t.s ? A.primary : A.border}`,
              position: 'relative',
            }}>
              {t.s && <div style={{
                position: 'absolute', top: -9, right: 14, background: A.primary,
                color: '#fff', fontSize: 10, fontWeight: 600, padding: '3px 10px',
                borderRadius: 8, letterSpacing: 0.5, textTransform: 'uppercase',
              }}>Best value</div>}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <div style={{ fontSize: 16, fontWeight: 600, textTransform: 'capitalize' }}>{t.k}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500 }}>{t.p}</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: A.textLight }}>
                <span>{t.m} minutes · {t.r}</span>
                <span style={{ color: A.textMuted }}>Overage ${t.r.includes('0.33') ? '0.45' : t.r.includes('0.28') ? '0.35' : '0.30'}/min</span>
              </div>
            </div>
          ))}
        </div>

<div style={{ textAlign: 'center', fontSize: 11, color: A.textMuted, marginTop: 18, lineHeight: 1.5 }}>
          Paid users never get interrupted mid-session.<br/>Restore purchase · Privacy · Terms
        </div>
      </div>
    </div>
  );
}

function DeepScreenSwitch() {
  const qm = useQM();
  switch (qm.screen) {
    case 'landing': return <DeepLanding />;
    case 'home': return <DeepHome />;
    case 'intake': return <DeepIntake />;
    case 'preview': return <DeepPreview />;
    case 'session': return <DeepSession />;
    case 'audio': return <DeepAudio />;
    case 'progress': return <DeepProgress />;
    case 'programs': return <DeepProgramScreen />;
    case 'paywall': return <DeepPaywall />;
    case 'sessions': return <DeepHome />;
    case 'profile': return <DeepHome />;
    default: return <DeepHome />;
  }
}

Object.assign(window, {
  DeepLanding, DeepHome, DeepIntake, DeepPreview, DeepSession, DeepAudio,
  DeepProgress, DeepProgramScreen, DeepPaywall, DeepScreenSwitch, deepColors: A,
});