// Science hi-fi — blueprint viewer + dashboard

function SciBlueprintDesktop() {
  const nav = [
    ['§ 00','Overview','active'],
    ['§ 01','Archetype synthesis','done'],
    ['§ 02','Big Five profile','done'],
    ['§ 03','MBTI · cognitive stack','done'],
    ['§ 04','Enneagram · Type 8','done'],
    ['§ 05','Human Design','done'],
    ['§ 06','Astrology · natal','done'],
    ['§ 07','Work & vocation','done'],
    ['§ 08','Relationship patterns','locked'],
    ['§ 09','Astrocartography','locked'],
    ['§ 10','Numerology','done'],
    ['§ 11','I Ching & Gene Keys','done'],
    ['§ 12','Shadow & growth','done'],
  ];
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      {/* Top bar */}
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>Blueprint № 041,208 · J. Doe · issued 21.APR.2026</MonoLabel>
          <div style={{ display:'flex', gap:8 }}>
            <Pill>▶ Audio · 38:12</Pill>
            <Pill>⇣ PDF</Pill>
            <Pill>↗ Share</Pill>
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'220px 1fr', minHeight:900 }}>
        {/* Left nav */}
        <div style={{ borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2, padding:'22px 0' }}>
          <div style={{ padding:'0 18px 12px' }}>
            <MonoLabel size={9}>Contents · 13</MonoLabel>
          </div>
          {nav.map(([n,t,s],i)=>(
            <div key={i} style={{
              padding:'9px 18px',
              background: s==='active'?SCI.paper:'transparent',
              borderLeft: s==='active'?`2px solid ${SCI.orange}`:'2px solid transparent',
              fontFamily:SCI.body, fontSize:12,
              color: s==='locked'?SCI.ink3:SCI.ink,
              display:'grid', gridTemplateColumns:'34px 1fr 14px', gap:6, alignItems:'center',
            }}>
              <span style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>{n}</span>
              <span>{t}</span>
              {s==='locked' && <span style={{fontFamily:SCI.mono, fontSize:10, color:SCI.ink3}}>🔒</span>}
            </div>
          ))}
          <div style={{ padding:'14px 18px', marginTop:10, borderTop:`1px solid ${SCI.tint}` }}>
            <MonoLabel size={9}>Reading progress</MonoLabel>
            <div style={{ height:4, background:SCI.tint, marginTop:8 }}>
              <div style={{ width:'42%', height:'100%', background:SCI.ink }}/>
            </div>
            <MonoLabel size={9} style={{color:SCI.ink3, marginTop:6, display:'block'}}>3,462 / 8,214 words</MonoLabel>
          </div>
        </div>

        {/* Content */}
        <div>
          {/* Hero cover */}
          <div style={{ padding:'56px 64px 40px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
            <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'end' }}>
              <div>
                <MonoLabel>§ 00 · Overview · archetype synthesis</MonoLabel>
                <h1 style={{ fontFamily:SCI.display, fontSize:108, lineHeight:0.9, letterSpacing:-2, fontWeight:500, margin:'16px 0 10px' }}>
                  The <span style={{fontStyle:'italic'}}>Builder</span><br/>
                  who resents<br/>
                  being managed<span style={{color:SCI.orange}}>.</span>
                </h1>
                <div style={{ fontSize:16, lineHeight:1.55, color:SCI.ink2, maxWidth:540, marginTop:14 }}>
                  Seven of the ten instruments independently describe someone who trusts their own calibration over hierarchy — a <strong>0.91 convergence</strong> across methods that almost never agree on anything.
                </div>
                <div style={{ display:'flex', gap:6, marginTop:20, flexWrap:'wrap' }}>
                  {['INTJ','Enn 8w7','Sp/Sx','Projector','Scorpio ☉','Life path 7','IRT: 88 O'].map((t,i)=>(<Pill key={i} dark={i===1}>{t}</Pill>))}
                </div>
              </div>
              {/* Radar summary */}
              <div style={{ background:SCI.tint2, border:`1px solid ${SCI.ink}`, padding:20 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:10 }}>
                  <MonoLabel>Convergence summary</MonoLabel>
                  <MonoLabel size={9} style={{color:SCI.ink3}}>0.91</MonoLabel>
                </div>
                <div style={{ aspectRatio:'1/1' }}>
                  <EnneaRadar values={[0.42,0.38,0.48,0.55,0.62,0.58,0.72,0.95,0.61]}/>
                </div>
                <MonoLabel size={9} style={{color:SCI.ink3, marginTop:8, display:'block', textAlign:'center'}}>9-axis enneagram · type 8 dominant</MonoLabel>
              </div>
            </div>
          </div>

          {/* Section body — Section 02 Big Five */}
          <div style={{ padding:'48px 64px 32px', borderBottom:`1px solid ${SCI.ink}` }}>
            <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:40 }}>
              <div style={{ position:'sticky', top:20 }}>
                <MonoLabel>§ 02 · 1,120 words</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:28, lineHeight:1.1, marginTop:10, letterSpacing:-0.3 }}>Big Five<br/><span style={{fontStyle:'italic'}}>profile</span>.</div>
                <div style={{ fontSize:12, color:SCI.ink3, marginTop:10, lineHeight:1.5 }}>IRT-scaled · IPIP-120 · norm: US adults 2024</div>
              </div>
              <div>
                <div style={{ background:SCI.tint2, border:`1px solid ${SCI.ink}`, padding:24, marginBottom:22 }}>
                  <BigFiveBars values={[88,72,41,63,22]}/>
                </div>
                <p style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.25, letterSpacing:-0.2, margin:'0 0 18px' }}>
                  Your <span style={{background:'rgba(198,90,42,0.18)'}}>88th-percentile openness</span> is the loudest signal in your psychometric profile — it is what eight of the other nine instruments are ultimately pointing at when they describe you.
                </p>
                <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2, margin:'0 0 14px' }}>
                  Paired with a 41st-percentile extraversion, this is the classic profile of someone whose richest life happens in the half-hour before anyone else is awake. Your conscientiousness (72) is high enough to ship; your agreeableness (63) is high enough to be fair but low enough to say no.
                </p>
                <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2, margin:0 }}>
                  The outlier is your neuroticism score — 22nd percentile, lower than 78% of your cohort. Combined with the preceding four, this is unusually stable territory…
                </p>

                {/* Footnote / cross-ref card */}
                <div style={{ marginTop:22, padding:'16px 18px', borderLeft:`2px solid ${SCI.orange}`, background:SCI.tint2 }}>
                  <MonoLabel size={9}>Cross-reference · § 04 · Enneagram</MonoLabel>
                  <div style={{ fontSize:13, color:SCI.ink2, marginTop:6, lineHeight:1.5 }}>
                    The O-high / N-low pairing is independently echoed by the Enneagram instrument's rating of you as a <strong>self-preserving Eight</strong> — see §04 for the full cross-read.
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Locked section preview */}
          <div style={{ padding:'36px 64px 44px', background:SCI.tint2, borderBottom:`1px solid ${SCI.ink}` }}>
            <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:40 }}>
              <div>
                <MonoLabel>§ 08 · Locked</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:28, lineHeight:1.1, marginTop:10, letterSpacing:-0.3 }}>Relationship<br/><span style={{fontStyle:'italic'}}>patterns</span>.</div>
              </div>
              <div style={{ position:'relative', minHeight:200 }}>
                <div style={{ filter:'blur(4px)', opacity:0.55, userSelect:'none' }}>
                  <p style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.25, margin:'0 0 16px' }}>Your Venus in the 8th house describes a pattern of relationships as transformational pressure rather than comfort.</p>
                  <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2 }}>The cross-reference with your Enneagram 8w7 subtype suggests that intimacy, for you, is accepted only when it feels structurally earned. Both archetypal and typological instruments converge on the same…</p>
                </div>
                <div style={{
                  position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
                  background:'linear-gradient(180deg, rgba(243,239,228,0.2), rgba(243,239,228,0.85))',
                }}>
                  <div style={{ background:SCI.ink, color:SCI.paper, padding:'22px 28px', display:'flex', alignItems:'center', gap:20, border:`1px solid ${SCI.ink}` }}>
                    <div>
                      <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>Add-on · Relationship report</MonoLabel>
                      <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, marginTop:6 }}>Unlock § 08 — $29</div>
                    </div>
                    <SciBtn size="md" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}} icon="→">Unlock</SciBtn>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* End-of-section footer */}
          <div style={{ padding:'22px 64px', display:'flex', justifyContent:'space-between', alignItems:'center', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>
            <span>← § 01 ARCHETYPE SYNTHESIS</span>
            <span>§ 02 · BIG FIVE · 02 / 13</span>
            <span>§ 03 MBTI →</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SciBlueprintMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ 02 · Blueprint</MonoLabel>
        <div style={{ display:'flex', gap:6 }}><Pill>▶</Pill><Pill>⇣</Pill></div>
      </div>
      <div style={{ padding:'24px 20px 28px' }}>
        <MonoLabel>§ 00 · Overview</MonoLabel>
        <h1 style={{ fontFamily:SCI.display, fontSize:42, lineHeight:0.95, letterSpacing:-0.6, fontWeight:500, margin:'10px 0 12px' }}>
          The <span style={{fontStyle:'italic'}}>Builder</span> who resents being managed<span style={{color:SCI.orange}}>.</span>
        </h1>
        <div style={{ fontSize:14, lineHeight:1.5, color:SCI.ink2, marginBottom:14 }}>
          Seven of ten instruments converge at 0.91 on a single pattern.
        </div>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {['INTJ','Enn 8','Projector','Scorpio ☉','LP 7'].map((t,i)=>(<Pill key={i} dark={i===1}>{t}</Pill>))}
        </div>
      </div>
      <div style={{ padding:'18px 20px', background:SCI.tint2, borderTop:`1px solid ${SCI.ink}`, borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>Big Five · percentile</MonoLabel>
        <div style={{ marginTop:10 }}>
          <BigFiveBars values={[88,72,41,63,22]}/>
        </div>
      </div>
      <div style={{ padding:'22px 20px' }}>
        <MonoLabel>§ 02 · Big Five profile</MonoLabel>
        <p style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.3, margin:'10px 0 14px', letterSpacing:-0.1 }}>
          Your <span style={{background:'rgba(198,90,42,0.18)'}}>88th-percentile openness</span> is the loudest signal in your psychometric profile.
        </p>
        <p style={{ fontSize:14, lineHeight:1.6, color:SCI.ink2 }}>
          Paired with a 41st-percentile extraversion, this is the profile of someone whose richest life happens in the half-hour before anyone else is awake.
        </p>
      </div>
      <div style={{ padding:'16px 20px', borderTop:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>
        <span>← § 01</span><span>02 / 13</span><span>§ 03 →</span>
      </div>
    </div>
  );
}

// =========================================================
// Dashboard — daily return surface
// =========================================================
function SciDashboardDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, display:'flex', alignItems:'center', padding:'0 28px', gap:32, fontSize:13 }}>
          {['Today','Blueprint','Chat','Map','Pairs','Settings'].map((l,i)=>(
            <span key={i} style={{ color: i===0?SCI.ink:SCI.ink2, borderBottom: i===0?`1.5px solid ${SCI.ink}`:'none', padding:'4px 0' }}>{l}</span>
          ))}
        </div>
        <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:10, fontFamily:SCI.mono, fontSize:11, color:SCI.ink2 }}>
          J.D. · BLUEPRINT
        </div>
      </div>

      <div style={{ padding:'12px 28px', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>FIG. 07 · DAILY INSTRUMENT · TUE 21.APR.2026</span>
        <span>SOLAR 01°♉ · LUNAR 14°♌ · MOON WAXING GIBBOUS</span>
        <span>NEXT TRANSIT 03.MAY</span>
      </div>

      {/* Today's alignment — hero */}
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'44px 56px', borderRight:`1px solid ${SCI.ink}` }}>
          <MonoLabel>§ 01 · Daily alignment</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:72, lineHeight:0.95, letterSpacing:-1.2, fontWeight:500, margin:'14px 0 16px' }}>
            A <span style={{fontStyle:'italic'}}>builder's</span><br/>quiet Tuesday.
          </h1>
          <div style={{ fontSize:15, lineHeight:1.6, color:SCI.ink2, maxWidth:520 }}>
            The transit weather favors the solitary work you've been avoiding. Your productivity vector is up 18% over your 7-day baseline, but the agreement between instruments on <em>today's</em> advice is unusually loose — a 0.62. When the charts disagree, trust the calendar.
          </div>
          <div style={{ marginTop:24, display:'flex', gap:12 }}>
            <SciBtn primary icon="→">Ask your chart</SciBtn>
            <SciBtn icon="→">Read full forecast</SciBtn>
          </div>
        </div>

        <div style={{ padding:'32px 36px', background:SCI.tint2, display:'grid', gridTemplateColumns:'180px 1fr', gap:24, alignItems:'center' }}>
          <div style={{ position:'relative' }}>
            <svg viewBox="0 0 100 100" style={{width:'100%', height:'auto', display:'block'}}>
              <circle cx="50" cy="50" r="44" fill="none" stroke={SCI.tint} strokeWidth="6"/>
              <circle cx="50" cy="50" r="44" fill="none" stroke={SCI.ink} strokeWidth="6" strokeDasharray={`${Math.PI*88*0.72} ${Math.PI*88}`} transform="rotate(-90 50 50)" strokeLinecap="butt"/>
              <circle cx="50" cy="50" r="44" fill="none" stroke={SCI.orange} strokeWidth="6" strokeDasharray={`${Math.PI*88*0.18} ${Math.PI*88}`} strokeDashoffset={-Math.PI*88*0.72} transform="rotate(-90 50 50)" strokeLinecap="butt"/>
              <text x="50" y="48" fontFamily={SCI.display} fontSize="24" textAnchor="middle" fill={SCI.ink}>72</text>
              <text x="50" y="62" fontFamily={SCI.mono} fontSize="6" letterSpacing="1" textAnchor="middle" fill={SCI.ink3}>ALIGNMENT</text>
            </svg>
          </div>
          <div>
            <MonoLabel size={10}>Index breakdown</MonoLabel>
            <div style={{ marginTop:10 }}>
              {[
                ['Productivity',     84, true],
                ['Creativity',       78, true],
                ['Social',           41, false],
                ['Introspection',    91, true],
                ['Conflict risk',    22, false],
              ].map(([l,v,up],i)=>(
                <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 100px 44px', gap:8, alignItems:'center', padding:'5px 0', borderBottom: i<4?`1px solid ${SCI.tint}`:'none' }}>
                  <span style={{ fontSize:12 }}>{l}</span>
                  <div style={{ height:5, background:SCI.paper, border:`1px solid ${SCI.tint}`, position:'relative' }}>
                    <div style={{ position:'absolute', inset:0, right:'auto', width:`${v}%`, background: up?SCI.ink:SCI.tint }}/>
                  </div>
                  <span style={{ fontFamily:SCI.mono, fontSize:11, textAlign:'right' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Grid of cards */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', borderBottom:`1px solid ${SCI.ink}` }}>
        {/* Transits */}
        <div style={{ padding:'28px 32px', borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
            <MonoLabel>§ 02 · Upcoming transits</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.ink3}}>Next 30d</MonoLabel>
          </div>
          {[
            ['APR 24','Mars → 10H',    'Career thrust',  'strong'],
            ['APR 28','Venus ∆ natal ☉','Harmony window', 'mild'],
            ['MAY 02','Full ☽ in ♏',   'Endings clarify','strong'],
            ['MAY 11','Mercury ℞',     'Review, don\'t ship','caution'],
            ['MAY 20','Sun enters ♊',  'Attention lifts','mild'],
          ].map(([d,t,l,i2],i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'64px 1fr 50px', gap:12, alignItems:'center', padding:'10px 0', borderTop:`1px solid ${SCI.tint}` }}>
              <MonoLabel size={10}>{d}</MonoLabel>
              <div>
                <div style={{ fontSize:13 }}>{t}</div>
                <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:2 }}>{l}</div>
              </div>
              <div style={{ justifySelf:'end' }}>
                <Pill dark={i2==='strong'}>{i2}</Pill>
              </div>
            </div>
          ))}
        </div>

        {/* Personal year + numerology */}
        <div style={{ padding:'28px 32px', borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
          <MonoLabel>§ 03 · Numerology · personal year 7</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:108, lineHeight:0.9, letterSpacing:-2, fontWeight:500, margin:'8px 0 6px' }}>7</div>
          <div style={{ fontFamily:SCI.display, fontSize:20, lineHeight:1.2, fontStyle:'italic', color:SCI.ink2, marginBottom:14 }}>the year of retreat.</div>
          <div style={{ height:6, background:SCI.paper, border:`1px solid ${SCI.tint}`, position:'relative', marginBottom:8 }}>
            <div style={{ position:'absolute', inset:0, right:'auto', width:'31%', background:SCI.orange }}/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>
            <span>JAN</span><span>APR</span><span>JUL</span><span>OCT</span><span>DEC</span>
          </div>
          <div style={{ marginTop:16, fontSize:13, lineHeight:1.5, color:SCI.ink2 }}>
            You are 31% into a year whose central task is quiet mastery. Expect plans made in April 2026 to feel irrelevant by October — that is the cycle doing its work.
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding:'28px 32px' }}>
          <MonoLabel>§ 04 · Quick access</MonoLabel>
          <div style={{ marginTop:12, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
            {[
              ['Re-read blueprint','13 sections · 8,214w'],
              ['Ask a question','chat with your chart'],
              ['Compare a pair','relationship report'],
              ['Relocate','astrocartography'],
              ['Export PDF','full document'],
              ['Schedule reading','45m · human analyst · $180'],
            ].map(([t,s],i)=>(
              <div key={i} style={{ padding:'14px 14px', border:`1px solid ${SCI.ink}`, background:SCI.paper, display:'flex', flexDirection:'column', gap:6, minHeight:82 }}>
                <div style={{ fontFamily:SCI.display, fontSize:18, lineHeight:1.1 }}>{t}</div>
                <MonoLabel size={9} style={{color:SCI.ink3}}>{s}</MonoLabel>
                <span style={{ fontFamily:SCI.mono, fontSize:11, marginTop:'auto', alignSelf:'flex-end' }}>→</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Trend + upsell row */}
      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr' }}>
        <div style={{ padding:'28px 32px', borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:12 }}>
            <MonoLabel>§ 05 · Your alignment · last 90 days</MonoLabel>
            <MonoLabel size={10} style={{color:SCI.ink3}}>mean 68 · σ 12</MonoLabel>
          </div>
          <div style={{ background:SCI.tint2, border:`1px solid ${SCI.ink}`, padding:18 }}>
            <Sparkline data={[62,58,66,71,64,59,68,74,81,79,72,68,61,70,77,82,78,72]} color={SCI.orange} height={80}/>
            <div style={{ display:'flex', justifyContent:'space-between', marginTop:8, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>
              <span>JAN 22</span><span>FEB 21</span><span>MAR 21</span><span>APR 21</span>
            </div>
          </div>
        </div>
        <div style={{ padding:'28px 32px', background:SCI.ink, color:SCI.paper, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ 06 · Upgrade</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:30, lineHeight:1.1, letterSpacing:-0.4, margin:'12px 0' }}>
            Inner Circle<br/>unlocks chat<span style={{color:SCI.orange}}>.</span>
          </div>
          <div style={{ fontSize:13, lineHeight:1.55, opacity:0.85, marginBottom:16 }}>
            Ask follow-up questions of your blueprint, quarterly transit re-runs, full relationship suite. $120 more, retroactive credit applied.
          </div>
          <SciBtn size="lg" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`, alignSelf:'flex-start'}}>Upgrade to Inner Circle</SciBtn>
        </div>
      </div>
    </div>
  );
}

function SciDashboardMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <div style={{fontFamily:SCI.display, fontSize:18}}>Persona</div>
        <MonoLabel size={9}>J.D. · BLUEPRINT</MonoLabel>
      </div>
      <div style={{ padding:'8px 18px', fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>TUE 21.APR</span><span>☉ 01°♉</span><span>☽ 14°♌</span>
      </div>
      <div style={{ padding:'24px 20px 22px' }}>
        <MonoLabel>§ 01 · Daily</MonoLabel>
        <h1 style={{ fontFamily:SCI.display, fontSize:40, lineHeight:0.95, letterSpacing:-0.6, fontWeight:500, margin:'10px 0 12px' }}>
          A <span style={{fontStyle:'italic'}}>builder's</span> quiet Tuesday.
        </h1>
        <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2, marginBottom:16 }}>
          Transit weather favors solitary work. Productivity +18% over baseline.
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:14, padding:'14px 0', borderTop:`1px solid ${SCI.tint}`, borderBottom:`1px solid ${SCI.tint}` }}>
          <div style={{ width:72, height:72, position:'relative' }}>
            <svg viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="44" fill="none" stroke={SCI.tint} strokeWidth="8"/>
              <circle cx="50" cy="50" r="44" fill="none" stroke={SCI.ink} strokeWidth="8" strokeDasharray={`${Math.PI*88*0.72} ${Math.PI*88}`} transform="rotate(-90 50 50)"/>
              <text x="50" y="58" fontFamily={SCI.display} fontSize="28" textAnchor="middle" fill={SCI.ink}>72</text>
            </svg>
          </div>
          <div>
            <MonoLabel size={10}>Alignment</MonoLabel>
            <div style={{ fontSize:13, lineHeight:1.4, marginTop:4, color:SCI.ink2 }}>Productivity 84 · Introspection 91 · Social 41</div>
          </div>
        </div>
      </div>

      <div style={{ padding:'20px', borderTop:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <MonoLabel>§ 02 · Personal year</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:72, lineHeight:0.9, letterSpacing:-1.2, fontWeight:500, margin:'6px 0 4px' }}>7</div>
        <div style={{ fontFamily:SCI.display, fontSize:16, fontStyle:'italic', color:SCI.ink2, marginBottom:10 }}>the year of retreat.</div>
        <div style={{ height:5, background:SCI.paper, border:`1px solid ${SCI.tint}`, position:'relative' }}>
          <div style={{ position:'absolute', inset:0, right:'auto', width:'31%', background:SCI.orange }}/>
        </div>
        <MonoLabel size={9} style={{color:SCI.ink3, marginTop:6, display:'block'}}>31% through the cycle</MonoLabel>
      </div>

      <div style={{ padding:'20px', borderTop:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 03 · Transits</MonoLabel>
        <div style={{ marginTop:8 }}>
          {[['APR 24','Mars → 10H','strong'],['APR 28','Venus ∆ ☉','mild'],['MAY 02','Full ☽ ♏','strong']].map(([d,t,s],i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'64px 1fr 54px', gap:10, alignItems:'center', padding:'10px 0', borderBottom: i<2?`1px solid ${SCI.tint}`:'none' }}>
              <MonoLabel size={9}>{d}</MonoLabel>
              <span style={{fontSize:13}}>{t}</span>
              <Pill dark={s==='strong'}>{s}</Pill>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding:'20px', borderTop:`1px solid ${SCI.ink}`, background:SCI.ink, color:SCI.paper }}>
        <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ 04 · Upgrade</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, margin:'8px 0 10px' }}>
          Inner Circle<br/>unlocks chat<span style={{color:SCI.orange}}>.</span>
        </div>
        <SciBtn size="md" w="100%" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Upgrade · $120</SciBtn>
      </div>
    </div>
  );
}

Object.assign(window, {
  SciBlueprintDesktop, SciBlueprintMobile, SciDashboardDesktop, SciDashboardMobile,
});