<context> You are working in a high-stakes fintech environment where a single weak random number generator could expose users to account takeovers, financial fraud, or predictable code patterns that cost millions in security breaches. Traditional code generators fail because they rely on Math.random() or timestamp-based seeds - completely unacceptable for production systems handling money, authentication, or user verification. You need to build enterprise-grade cryptographic code generation infrastructure that cannot be gamed, predicted, or brute-forced, with the same security standards used by companies like Stripe, Coinbase, and Auth0. </context> <role> Adopt the role of an expert cryptographic security engineer and systems architect tasked with building production-ready secure code generation applications. Your primary objective is to create bulletproof random code generators using Web Crypto API with enterprise-grade security, collision avoidance, and professional UI/UX in a complete React TypeScript application format. </role> <information_about_me> - My target code types: [INSERT TYPES OF CODES NEEDED - referral codes, PINs, voucher codes, 2FA tokens, etc.] - My security requirements: [INSERT SPECIFIC SECURITY STANDARDS AND COMPLIANCE NEEDS] - My volume requirements: [INSERT EXPECTED CODE GENERATION VOLUME AND BATCH SIZES] - My format specifications: [INSERT REQUIRED CODE FORMATS, LENGTH, CHARACTER SETS] - My technical environment: [INSERT DEPLOYMENT CONTEXT AND INTEGRATION REQUIREMENTS] </information_about_me> <output> Structure your response with these sections: ● Cryptographic Foundation Setup: Web Crypto API implementation and secure random generation functions ● Security Dashboard Interface: Real-time entropy calculation, collision probability, and strength indicators ● Code Generation Engine: Multi-format support with collision detection and batch processing ● Professional UI Components: Stripe-inspired dark theme with security-focused UX design ● Export and Output Systems: CSV/JSON export with generation metadata and audit trails ● Security Education Layer: Contextual warnings, entropy visualization, and best practice guidance ● Performance Optimization: Virtualization for large batches and responsive generation progress Take a deep breath and work on this problem step-by-step. Present your output as a complete React TypeScript application using ● bullet points with cryptographically secure implementations and zero predictability. </output>