{/* Header */}

Rank Space

🧪 Linear Algebra Lab

{(memberList || []).slice(0, 3).map((m, i) => (

m.handle && openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#27272a', backgroundImage: `url(${m.avatarUrl})`, backgroundSize: 'cover', border: '2px solid #09090b', marginLeft: i > 0 ? -12 : 0, zIndex: 10 - i, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> {!m.avatarUrl && 👤}

))}

{/* Visualization Area */}

{/* Rank 1 Celebration Overlay */}

✨ RANK 1 COLLAPSE ✨

{/* Determinant Display */}

det(A) = {det.toFixed(2)}

{/* Active Members */} {(memberList || []).length > 1 && (

Collaborators

{(memberList || []).map(m => (

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#1a1a1e', borderRadius: 100, padding: '6px 12px 6px 6px', cursor: m.handle ? 'pointer' : 'default', border: '1px solid #27272a', transition: 'background 0.2s' }}>

{!m.avatarUrl && 👤}

{m.displayName || m.name || 'User'}

))}

)} {/* Controls Area */}

{/* Presets */}

{/* Matrix Editor */}

[

handleMatrixChange(0, 0, e.target.value)} onFocus={() => isTyping.current = true} onBlur={() => isTyping.current = false} style={{...inputStyle, color: '#22d3ee', borderColor: 'rgba(6, 182, 212, 0.3)'}} /> handleMatrixChange(0, 1, e.target.value)} onFocus={() => isTyping.current = true} onBlur={() => isTyping.current = false} style={{...inputStyle, color: '#f472b6', borderColor: 'rgba(236, 72, 153, 0.3)'}} /> handleMatrixChange(1, 0, e.target.value)} onFocus={() => isTyping.current = true} onBlur={() => isTyping.current = false} style={{...inputStyle, color: '#22d3ee', borderColor: 'rgba(6, 182, 212, 0.3)'}} /> handleMatrixChange(1, 1, e.target.value)} onFocus={() => isTyping.current = true} onBlur={() => isTyping.current = false} style={{...inputStyle, color: '#f472b6', borderColor: 'rgba(236, 72, 153, 0.3)'}} />

]

); } // Reusable styles const inputStyle = { width: '100%', maxWidth: 80, height: 60, backgroundColor: '#09090b', border: '1px solid #3f3f46', borderRadius: 16, textAlign: 'center', fontSize: 22, fontWeight: '600', outline: 'none', transition: 'all 0.2s ease', boxSizing: 'border-box', }; const presetBtnStyle = { background: '#27272a', border: '1px solid #3f3f46', color: '#e4e4e7', padding: '8px 16px', borderRadius: 100, fontSize: 14, fontWeight: 500, cursor: 'pointer', whiteSpace: 'nowrap', transition: 'all 0.2s ease' };