shadow_rounded_left2.txt

components/TreatmentPanel.tsx: { name:"Scotopic Grain", instr:"Apply heavy 35mm film grain, deepen shadows, and reduce overall saturation to create a moody, nocturnal feel."},
components/TreatmentPanel.tsx: placeholder="Define the bloom, grain, shadows, and hue shifts..."
components/ArchetypeIndex.tsx: className="px-6 py-3 bg-nous-text text-white font-sans text-[9px] uppercase tracking-widest font-black rounded-none hover:bg-stone-600 transition-all"
components/ArchetypeIndex.tsx: className={`w-8 h-8 rounded-none border border-stone-200 transition-all duration-300 relative group ${selectedColorFilter === key ? 'ring-2 ring-offset-2 ring-nous-text scale-110' : 'hover:scale-105'}`}
components/ArchetypeIndex.tsx: <div className="w-1.5 h-1.5 bg-white rounded-none"/>
components/ArchetypeIndex.tsx: <span className="absolute -bottom-6 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] uppercase tracking-widest whitespace-nowrap bg-white px-2 py-0.5 rounded-none transition-opacity pointer-events-none z-10">
components/ArchetypeIndex.tsx: className="w-5 h-5 rounded-none border border-stone-200"
components/PatronMintView.tsx: <div className="absolute inset-0 border-t-2 border-amber-500 rounded-none animate-[spin_2s_linear_infinite]"/>
components/PatronMintView.tsx: <div className="w-24 h-24 border border-stone-200 dark:border-stone-800 rounded-none flex items-center justify-center">
components/PatronMintView.tsx: <div className="w-16 h-16 bg-amber-500 text-white rounded-none flex items-center justify-center mx-auto mb-6">
components/PatronMintView.tsx: <div className="p-8 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none relative overflow-hidden group">
components/PatronMintView.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 rounded-none font-sans text-[8px] uppercase tracking-widest font-black text-stone-500 hover:text-amber-500 transition-colors"
components/PatronMintView.tsx: className="w-full py-5 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.4em] font-black hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-4"
components/AmbientPlayer.tsx: <div className="bg-[#E4E3E0] p-1.5 rounded-none -[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] flex items-center gap-3 px-4">
components/AmbientPlayer.tsx: className="w-6 h-6 rounded-none bg-[#2a2a2a] flex items-center justify-center text-white -[1px_1px_2px_rgba(0,0,0,0.3),-0.5px_-0.5px_1px_rgba(255,255,255,0.1)] hover:bg-[#333] transition-colors"
components/AmbientPlayer.tsx: <div className="w-24 h-0.5 bg-[#d1d0ce] rounded-none -[inset_0.5px_0.5px_1px_rgba(0,0,0,0.2)] relative overflow-hidden">
components/ManifestSignet.tsx: className="relative w-full max-md bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none p-10 md:p-14 text-center space-y-10"
components/ManifestSignet.tsx: <div className="bg-white p-6 md:p-8 inline-block rounded-none border border-stone-100">
components/ManifestSignet.tsx: className="flex items-center justify-center gap-3 w-full py-4 border border-stone-100 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black text-stone-400 hover:text-nous-text dark:hover:text-white transition-all"
components/VibeGraph.tsx: <div className="relative w-full h-full bg-stone-50 dark:bg-[#111] rounded-none border border-stone-200 dark:border-stone-800 overflow-hidden">
components/VibeGraph.tsx: className="flex items-center gap-2 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700 px-4 py-2 rounded-none hover: transition-all disabled:opacity-50 disabled:cursor-not-allowed"
components/VibeGraph.tsx: <div className="flex bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none p-1">
components/VibeGraph.tsx: className={`px-3 py-1 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all ${threadMode === mode ? 'bg-stone-500 text-white' : 'text-stone-500 hover:text-stone-800 dark:text-stone-400'}`}
components/VibeGraph.tsx: <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/90 dark:bg-stone-900/90 backdrop-blur-md p-6 rounded-none border border-stone-200 dark:border-stone-800 max-w-md w-full text-center space-y-4 z-20">
components/VibeGraph.tsx: className="px-6 py-2 bg-stone-500 text-white rounded-none font-sans text-[10px] uppercase tracking-widest font-black hover:bg-stone-600 transition-colors disabled:opacity-50"
components/VibeGraph.tsx: <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/95 dark:bg-stone-900/95 backdrop-blur-xl p-8 rounded-none border border-stone-500/30 max-w-lg w-full space-y-6 z-20">
components/VibeGraph.tsx: className="px-4 py-1.5 bg-stone-900 dark:bg-white text-white dark:text-stone-900 rounded-none font-sans text-[10px] uppercase tracking-widest font-bold hover:bg-stone-800 dark:hover:bg-stone-100 transition-colors"
components/VibeGraph.tsx: <span className={`px-2 py-1 rounded-none text-[8px] uppercase tracking-widest font-black ${p.type === 'theme' ? 'bg-amber-500/20 text-amber-600 dark:text-amber-500' : 'bg-stone-100 dark:bg-stone-800 text-stone-500 dark:text-stone-400'}`}>
components/AnalysisDisplay.tsx: className="w-12 h-12 rounded-none border border-stone-300 dark:border-stone-700 cursor-pointer relative flex items-center justify-center hover:scale-105 bg-white/5 backdrop-blur-md pointer-events-auto"
components/AnalysisDisplay.tsx: <div className="absolute w-1.5 h-3 rounded-none"style={{ transform: `translateY(-14px)`, backgroundColor: accent, boxShadow: `0 0 10px ${accent}` }} />
components/AnalysisDisplay.tsx: <div className="w-3 h-3 rounded-none border border-stone-400/50"/>
components/AnalysisDisplay.tsx: <div className={`p-2 bg-stone-50 dark:bg-stone-900 rounded-none ${!style ? color : ''}`} style={style ? { color: style.color } : {}}>
components/AnalysisDisplay.tsx: className="absolute w-[4px] rounded-none"
components/AnalysisDisplay.tsx: {metadata.isDeepThinking && <div className="flex items-center gap-2 px-3 py-1 bg-amber-500/10 border border-amber-500/20 rounded-none text-amber-500 font-sans text-[7px] font-black uppercase tracking-widest"><Radar size={10} className="animate-pulse"/> Deep Refraction</div>}
components/AnalysisDisplay.tsx: <button onClick={handleResonanceFlip} className="p-2 bg-stone-100 dark:bg-stone-800 rounded-none hover:bg-stone-500 transition-colors">
components/AnalysisDisplay.tsx: <textarea value={vocalSummary} onChange={e => setVocalSummary(e.target.value)} className="w-full p-4 bg-stone-100 dark:bg-stone-900 rounded-none"placeholder="Vocal Summary Blurb"/>
components/AnalysisDisplay.tsx: <textarea value={poeticInterpretation} onChange={e => setPoeticInterpretation(e.target.value)} className="w-full p-4 bg-stone-100 dark:bg-stone-900 rounded-none"placeholder="Poetic Interpretation"/>
components/AnalysisDisplay.tsx: <button onClick={handleSaveMetadata} className="px-4 py-2 bg-stone-500 text-white rounded-none font-sans text-[8px] uppercase tracking-widest font-black">Save Changes</button>
components/AnalysisDisplay.tsx: <div className="absolute bottom-12 left-12 p-4 bg-white/5 backdrop-blur-md rounded-none border border-white/10">
components/AnalysisDisplay.tsx: <div className="aspect-square w-full relative border border-stone-100 dark:border-stone-800 rounded-none overflow-hidden bg-stone-50 dark:bg-stone-900">
components/AnalysisDisplay.tsx: prompt={`A high-contrast, moody, abstract, conceptual editorial photograph representing the concept:"${metadata.content.strategic_hypothesis}". Focus on deep shadows, dramatic lighting, and texture. No text, no typography. Cinematic, architectural.`} 
components/AnalysisDisplay.tsx: <div className="absolute bottom-4 right-4 bg-black/80 text-white px-2 py-1 text-[8px] font-mono rounded-none">FIG 2.1 — ABSTRACT</div>
components/AnalysisDisplay.tsx: <div key={i} className="group relative p-8 bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none hover: transition-all flex flex-col justify-between min-h-[300px] hover:border-transparent"style={{ '--hover-accent': accentColor } as React.CSSProperties}>
components/AnalysisDisplay.tsx: <span className="font-mono text-[9px] text-[var(--hover-accent)] bg-[var(--hover-accent)]/10 px-1 py-0.5 rounded-none">{t.semantic_trigger}</span>
components/AnalysisDisplay.tsx: <div className="p-8 rounded-none border border-white/10 bg-white/5 animate-pulse-slow">
components/AnalysisDisplay.tsx: <div key={idx} className="flex items-start gap-4 p-4 border border-stone-100 dark:border-stone-800 rounded-none bg-stone-50/50 dark:bg-stone-900/30">
components/AnalysisDisplay.tsx: <div className="w-8 h-8 rounded-none bg-stone-200 dark:bg-stone-800 flex items-center justify-center shrink-0">
components/AnalysisDisplay.tsx: <div key={idx} className="relative w-24 h-24 border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 rounded-none overflow-hidden hover:scale-105 transition-transform">
components/AnalysisDisplay.tsx: <div className="opacity-30 text-center py-12 border-2 border-dashed border-stone-300 dark:border-stone-800 rounded-none">
components/AnalysisDisplay.tsx: <div className="absolute right-full mr-4 bottom-1/2 translate-y-1/2 flex items-center gap-2 bg-white dark:bg-stone-800 px-3 py-1 rounded-none whitespace-nowrap">
components/AnalysisDisplay.tsx: <motion.div initial={{ y: 100, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[9999] flex items-center gap-2 px-6 py-4 bg-black/60 backdrop-blur-2xl border border-white/10 rounded-none text-white/70 print:hidden">
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Field Notes</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Transmission</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Motion Refraction</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Favorite</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Refract to Pocket</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Anchor locally</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Save to Threads</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Extract Tailor Logic</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Push to Action Board</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Share</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Broadcast via Proscenium</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Continuum</span>
components/AnalysisDisplay.tsx: <span className="absolute -top-8 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-widest font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black text-white px-2 py-1 rounded-none">Export</span>
components/TailorView.tsx: className={`px-3 py-1 rounded-none font-sans text-[7px] md:text-[8px] uppercase tracking-widest font-black border transition-all ${active ? 'bg-nous-text dark:bg-white text-white dark:text-stone-900 border-current ' : 'border-stone-100 dark:border-stone-800 text-stone-400 hover:border-stone-300'}`}
components/TailorView.tsx: className="px-3 py-1 bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900 rounded-none font-sans text-[8px] uppercase tracking-widest font-black"
components/TailorView.tsx: <div className="flex items-center gap-4 bg-white/50 dark:bg-stone-900/50 backdrop-blur-xl px-6 py-3 rounded-none border border-stone-200 dark:border-stone-800 group cursor-pointer hover:border-stone-900 dark:hover:border-stone-100 transition-all"onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'profile' }))}>
components/TailorView.tsx: <div className="w-8 h-8 rounded-none bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900 flex items-center justify-center animate-pulse"><User size={14} /></div>
components/TailorView.tsx: <span className="font-mono text-[8px] text-stone-900 bg-stone-100 dark:text-stone-100 dark:bg-stone-800 px-1.5 py-0.5 rounded-none">
components/TailorView.tsx: className="flex items-center gap-3 px-5 py-2.5 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800/50 rounded-none font-sans text-[9px] uppercase tracking-widest font-black hover:bg-indigo-100 dark:hover:bg-indigo-900/40 transition-all group relative"
components/TailorView.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors"
components/TailorView.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors"
components/TailorView.tsx: <label className="flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors cursor-pointer">
components/TailorView.tsx: <span key={i} className="px-2 py-1 border border-stone-200 dark:border-stone-800 rounded-none font-mono text-[8px] uppercase text-stone-500">{ref}</span>
components/TailorView.tsx: <div className="w-12 h-12 rounded-none border border-black/10"style={{ backgroundColor: draft.expressionEngine.chromaticRegistry.baseNeutral }} />
components/TailorView.tsx: <div className="w-12 h-12 rounded-none border border-black/10"style={{ backgroundColor: draft.expressionEngine.chromaticRegistry.accentSignal }} />
components/TailorView.tsx: <div key={i} className="w-6 h-6 rounded-none border border-black/5"style={{ backgroundColor: c.hex }} title={c.name} />
components/TailorView.tsx: <div className="w-24 h-24 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none flex items-center justify-center overflow-hidden">
components/TailorView.tsx: <div key={i} className="w-6 h-6 rounded-none border border-black/10"style={{ backgroundColor: hex }} />
components/TailorView.tsx: <span className="px-3 py-1 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none font-sans text-[7px] uppercase font-black">{draft.expressionEngine.narrativeVoice.emotionalTemperature}</span>
components/TailorView.tsx: <span className="px-3 py-1 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none font-sans text-[7px] uppercase font-black">{draft.expressionEngine.narrativeVoice.structureBias}</span>
components/TailorView.tsx: <div className="bg-white dark:bg-[#0A0A0A] border border-stone-200 dark:border-stone-800 p-6 rounded-none space-y-4">
components/TailorView.tsx: <div className="bg-stone-50 dark:bg-[#080808] border border-stone-200 dark:border-stone-800 p-8 h-full flex flex-col justify-between rounded-none">
components/TailorView.tsx: <span className="px-2 py-0.5 bg-amber-500/10 text-amber-500 border border-amber-500/20 rounded-none font-mono text-[8px] uppercase tracking-widest ml-auto">Unaligned</span>
components/TailorView.tsx: <button onClick={handleAlign} disabled={isSaving} className="w-full py-4 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.4em] font-black active:scale-95 transition-all flex items-center justify-center gap-3">
components/TailorView.tsx: className="bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none flex flex-col md:flex-row overflow-hidden min-h-[70vh]"
components/TailorView.tsx: className={`text-left px-4 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center justify-between whitespace-nowrap ${activeStep === step ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white border border-black/5 dark:border-white/5' : 'text-stone-400 hover:text-stone-600'}`}
components/TailorView.tsx: className={`p-4 border rounded-none transition-all group flex flex-col items-center gap-3 bg-white dark:bg-stone-900 ${isActive ? 'border-stone-900 ring-1 ring-stone-900/20 dark:border-stone-100 dark:ring-stone-100/20' : 'border-stone-200 dark:border-stone-800 hover:border-stone-900 dark:hover:border-stone-100'}`}
components/TailorView.tsx: <span key={i} className="px-3 py-1 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center gap-2">
components/TailorView.tsx: <button key={p.name} onClick={() => applyVisualPreset(p)} className={`p-4 border rounded-none transition-all group flex flex-col items-center gap-3 relative ${isSelected ? 'border-stone-900 bg-stone-100 dark:border-stone-100 dark:bg-stone-800' : 'border-stone-200 dark:border-stone-800 hover:border-stone-900 dark:hover:border-stone-100'}`}>
components/TailorView.tsx: <button key={f.name} onClick={() => updateExpression('typographyIntent', { ...draft.expressionEngine.typographyIntent, styleDescription: f.name })} className={`text-left p-4 border rounded-none transition-all ${draft.expressionEngine.typographyIntent.styleDescription === f.name ? 'border-stone-900 bg-stone-100 dark:border-stone-100 dark:bg-stone-800' : 'border-stone-200 dark:border-stone-800'}`}>
components/TailorView.tsx: functionalMeaning="Controls the 'wildness' of AI generation. Lower values are more stable and grounded, higher values are more experimental and hallucinatory."
components/TailorView.tsx: description="Control the 'wildness' of AI generation. Lower values are more stable and grounded."
components/TailorView.tsx: <button key={p.name} onClick={() => applyChromaticPreset(p)} className="p-4 border border-stone-200 dark:border-stone-800 rounded-none hover:border-stone-900 dark:hover:border-stone-100 transition-all group flex flex-col items-center gap-3">
components/TailorView.tsx: <div className="w-4 h-4 rounded-none"style={{ backgroundColor: p.base }} />
components/TailorView.tsx: <div className="w-4 h-4 rounded-none"style={{ backgroundColor: p.accent }} />
components/TailorView.tsx: <input type="color"value={draft.expressionEngine.chromaticRegistry.baseNeutral} onChange={e => updateExpression('chromaticRegistry', { ...draft.expressionEngine.chromaticRegistry, baseNeutral: e.target.value })} className="w-12 h-12 p-0 border-0 rounded-none cursor-pointer absolute inset-0 opacity-0"/>
components/TailorView.tsx: <div className="w-12 h-12 rounded-none border border-black/10"style={{ backgroundColor: draft.expressionEngine.chromaticRegistry.baseNeutral }} />
components/TailorView.tsx: <input type="color"value={draft.expressionEngine.chromaticRegistry.accentSignal} onChange={e => updateExpression('chromaticRegistry', { ...draft.expressionEngine.chromaticRegistry, accentSignal: e.target.value })} className="w-12 h-12 p-0 border-0 rounded-none cursor-pointer absolute inset-0 opacity-0"/>
components/TailorView.tsx: <div className="w-12 h-12 rounded-none border border-black/10"style={{ backgroundColor: draft.expressionEngine.chromaticRegistry.accentSignal }} />
components/TailorView.tsx: <div className="w-16 h-16 rounded-none cursor-pointer border border-black/5"style={{ backgroundColor: c.hex }} title={c.name} />
components/TailorView.tsx: <button onClick={() => removeColor(c.hex)} className="absolute -top-2 -right-2 bg-white text-red-500 rounded-none p-1 opacity-0 group-hover:opacity-100 transition-opacity"><X size={10}/></button>
components/TailorView.tsx: <div className="flex items-end gap-4 p-4 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none">
components/TailorView.tsx: <input type="color"value={newColorHex} onChange={e => setNewColorHex(e.target.value)} className="w-12 h-12 p-0 border-0 rounded-none cursor-pointer"/>
components/TailorView.tsx: <button onClick={addColorToPalette} disabled={!newColorName} className="px-4 py-2 bg-stone-800 text-white rounded-none font-sans text-[9px] font-black uppercase disabled:opacity-50">Add</button>
components/TailorView.tsx: className={`w-10 h-5 rounded-none transition-colors relative ${draft.celestialCalibration.enabled ? 'bg-stone-900 dark:bg-stone-100' : 'bg-stone-200 dark:bg-stone-800'}`}
components/TailorView.tsx: <div className={`w-3 h-3 bg-white rounded-none absolute top-1 transition-all ${draft.celestialCalibration.enabled ? 'left-6' : 'left-1'}`} />
components/TailorView.tsx: className={`w-10 h-5 rounded-none transition-colors relative ${draft.celestialCalibration.enabled ? 'bg-stone-900 dark:bg-stone-100' : 'bg-stone-200 dark:bg-stone-800'}`}
components/TailorView.tsx: <div className={`w-3 h-3 bg-white rounded-none absolute top-1 transition-all ${draft.celestialCalibration.enabled ? 'left-6' : 'left-1'}`} />
components/TailorView.tsx: className="border-2 border-dashed border-stone-200 dark:border-stone-800 rounded-none p-12 text-center hover:border-stone-900 dark:hover:border-stone-100 transition-colors cursor-pointer group"
components/TailorView.tsx: <div className="w-16 h-16 bg-stone-50 dark:bg-stone-900 rounded-none flex items-center justify-center mx-auto mb-4 text-stone-400 group-hover:text-stone-900 dark:group-hover:text-stone-100 transition-colors">
components/TailorView.tsx: <div key={i} className="aspect-square bg-stone-100 relative group overflow-hidden rounded-none">
components/TailorView.tsx: <button onClick={() => updatePositioning('aestheticCore', { ...draft.positioningCore.aestheticCore, visualShards: draft.positioningCore.aestheticCore.visualShards.filter((_, idx) => idx !== i) })} className="absolute top-1 right-1 bg-white text-red-500 p-1 rounded-none opacity-0 group-hover:opacity-100 transition-opacity">
components/TailorView.tsx: className="border-2 border-dashed border-stone-200 dark:border-stone-800 rounded-none p-8 text-center hover:border-stone-900 dark:hover:border-stone-100 transition-colors cursor-pointer group flex flex-col items-center gap-4"
components/TailorView.tsx: <div className="w-16 h-16 bg-stone-50 dark:bg-stone-900 rounded-none flex items-center justify-center text-stone-400 group-hover:text-stone-900 dark:group-hover:text-stone-100 transition-colors">
components/TailorView.tsx: <div className="w-12 h-12 rounded-none cursor-pointer border border-black/5"style={{ backgroundColor: hex }} />
components/TailorView.tsx: className="absolute -top-1 -right-1 bg-white text-red-500 rounded-none p-1 opacity-0 group-hover:opacity-100 transition-opacity"
components/TailorView.tsx: <div className="w-12 h-12 rounded-none border-2 border-dashed border-stone-300 flex items-center justify-center text-stone-300 pointer-events-none">
components/TailorView.tsx: <div className="flex-1 h-2 bg-stone-200 dark:bg-stone-800 rounded-none overflow-hidden">
components/TailorView.tsx: <div key={i} className="p-4 border border-stone-200 dark:border-stone-800 rounded-none bg-stone-50 dark:bg-stone-900/50">
components/TailorView.tsx: className="flex-1 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 py-2 px-3 font-mono text-xs text-stone-500 rounded-none focus:outline-none"
components/TailorView.tsx: className="px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-500 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors flex items-center gap-2"
components/TailorView.tsx: className="px-6 py-2 bg-nous-text dark:bg-white text-white dark:text-stone-900 rounded-none font-sans text-[9px] uppercase tracking-widest font-black hover: active:scale-95 transition-all flex items-center gap-2"
components/TailorView.tsx: className={`px-6 py-2 bg-transparent border rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 ${personas.length <= 1 ? 'text-stone-400 border-stone-400 cursor-not-allowed opacity-50' : 'text-red-500 border-red-500 hover:bg-red-500 hover:text-white'}`}
components/TailorView.tsx: <div key={algo.id} className="flex items-center justify-between p-4 border border-stone-100 dark:border-stone-800 rounded-none bg-white/50 dark:bg-stone-900/50 group hover:border-stone-900 dark:hover:border-stone-100 transition-all">
components/TailorView.tsx: className={`p-2 rounded-none transition-all ${isEnabled ? 'bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 -stone-900/20 dark:-stone-100/20' : 'bg-stone-200 dark:bg-stone-800 text-stone-400 hover:text-stone-600'}`}
components/TailorView.tsx: <p className="font-serif italic text-xs text-stone-500 mb-4">0% = Pure internal Tailor logic. 100% = Heavily grounded in current events and search data.</p>
components/TailorView.tsx: <span className="px-2 py-0.5 bg-amber-500/10 text-amber-500 border border-amber-500/20 rounded-none font-mono text-[8px] uppercase tracking-widest ml-auto">Unaligned</span>
components/TailorView.tsx: <button onClick={handleAlign} disabled={isSaving} className="w-full py-4 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[9px] uppercase tracking-[0.4em] font-black active:scale-95 transition-all flex items-center justify-center gap-3">
components/LatentTelemetry.tsx: <div className="bg-[#1c1917]/80 backdrop-blur-md border border-[#292524] p-6 rounded-none pointer-events-auto w-[320px]">
components/LatentTelemetry.tsx: <div className="bg-red-900/80 backdrop-blur-md border border-red-800 p-4 rounded-none pointer-events-auto w-[320px] mb-2">
components/CliqueProtocol.tsx: className="relative w-full max-lg bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden"
components/CliqueProtocol.tsx: <div className="flex items-center gap-4 p-6 bg-stone-50 dark:bg-stone-950 border border-stone-100 dark:border-stone-800 rounded-none cursor-pointer active:scale-95 transition-all"onClick={() => {
components/CliqueProtocol.tsx: <div className="p-3 bg-white dark:bg-stone-900 rounded-none">
components/CliqueProtocol.tsx: className={`w-full py-6 flex items-center justify-center gap-4 font-sans text-xs tracking-[0.6em] uppercase font-black transition-all active:scale-95 rounded-none ${success ? 'bg-stone-50 text-white' : 'bg-nous-text dark:bg-white text-white dark:text-black'}`}
components/ProposalWorkspace.tsx: <motion.div initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white dark:bg-stone-900 p-12 rounded-none max-w-md w-full space-y-8 relative">
components/ProposalWorkspace.tsx: <div className="hidden md:flex bg-stone-100 dark:bg-stone-900 p-1 rounded-none">
components/ProposalWorkspace.tsx: <button onClick={() => setMode('content')} className={`px-4 py-1.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 ${mode === 'content' ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white ' : 'text-stone-400'}`}>
components/ProposalWorkspace.tsx: <button onClick={() => setMode('design')} className={`px-4 py-1.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 ${mode === 'design' ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white ' : 'text-stone-400'}`}>
components/ProposalWorkspace.tsx: <button onClick={() => setMode('assets')} className={`px-4 py-1.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 ${mode === 'assets' ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white ' : 'text-stone-400'}`}
components/ProposalWorkspace.tsx: <button onClick={() => setMode('assistant')} className={`px-4 py-1.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 ${mode === 'assistant' ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white ' : 'text-stone-400'}`}
components/ProposalWorkspace.tsx: <button onClick={() => setMode('collaborators')} className={`px-4 py-1.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 ${mode === 'collaborators' ? 'bg-white dark:bg-stone-800 text-nous-text dark:text-white ' : 'text-stone-400'}`}
components/ProposalWorkspace.tsx: <button onClick={handleSave} disabled={isSaving} className="px-6 py-2 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center gap-2 active:scale-95 transition-all">
components/ProposalWorkspace.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-950/50 rounded-none border border-stone-100 dark:border-stone-800 space-y-4">
components/ProposalWorkspace.tsx: <button onClick={handleSyncTailor} className="w-full py-3 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:border-stone-800 dark:hover:border-stone-300 transition-colors flex items-center justify-center gap-2">
components/ProposalWorkspace.tsx: <button key={font.value} onClick={() => setLayoutConfig(p => ({ ...p, fontSet: [font.value, p.fontSet[1]] }))} className={`w-full text-left p-3 border rounded-none transition-all text-sm ${layoutConfig.fontSet[0] === font.value ? 'border-nous-text dark:border-white bg-stone-50 dark:bg-stone-800' : 'border-stone-100 dark:border-stone-800 text-stone-500'}`} style={{ fontFamily: font.value }}>{font.label}</button>
components/ProposalWorkspace.tsx: <button key={color.value} onClick={() => setLayoutConfig(p => ({ ...p, backgroundStyle: color.value }))} className={`aspect-square rounded-none border-2 transition-all ${layoutConfig.backgroundStyle === color.value ? 'border-stone-500 scale-110' : 'border-transparent'}`} style={{ backgroundColor: color.value }} title={color.label} />
components/ProposalWorkspace.tsx: <input type="color"value={customColorInput} onChange={e => { setCustomColorInput(e.target.value); setLayoutConfig(p => ({ ...p, backgroundStyle: e.target.value })); }} className="w-8 h-8 rounded-none border-none p-0 cursor-pointer"/>
components/ProposalWorkspace.tsx: <button onClick={handleAddText} className="w-full py-3 border border-stone-200 dark:border-stone-700 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors flex items-center justify-center gap-2">
components/ProposalWorkspace.tsx: <button key={item.id} onClick={() => handleAddAssetToSlide(item)} className="w-full flex items-center gap-4 p-3 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none hover:border-stone-500 transition-all group relative">
components/ProposalWorkspace.tsx: <div className="w-12 h-12 bg-stone-100 dark:bg-stone-900 rounded-none overflow-hidden flex-shrink-0">
components/ProposalWorkspace.tsx: className="w-full bg-stone-50 dark:bg-stone-950/50 border border-stone-200 dark:border-stone-800 p-4 font-serif italic text-base text-stone-700 dark:text-stone-300 focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 transition-colors h-40 resize-none rounded-none"
components/ProposalWorkspace.tsx: className="w-full py-4 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[9px] uppercase tracking-widest font-black active:scale-95 transition-all flex items-center justify-center gap-3 disabled:opacity-50 hover:bg-stone-600"
components/ProposalWorkspace.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-950/50 rounded-none border border-stone-100 dark:border-stone-800 space-y-3 opacity-60">
components/ProposalWorkspace.tsx: <div className="flex items-center justify-between p-3 bg-stone-50 dark:bg-stone-950 border border-stone-100 dark:border-stone-800 rounded-none">
components/ProposalWorkspace.tsx: <div className="w-8 h-8 rounded-none bg-stone-200 dark:bg-stone-800 flex items-center justify-center">
components/ProposalWorkspace.tsx: className="flex-1 bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 rounded-none px-3 py-2 font-mono text-xs focus:outline-none focus:border-stone-500"
components/ProposalWorkspace.tsx: <button className="p-2 bg-stone-900 dark:bg-white text-white dark:text-black rounded-none hover:bg-stone-500 transition-colors">
components/ProposalWorkspace.tsx: <div className="bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none p-4 w-72 max-h-[80vh] overflow-y-auto no-scrollbar space-y-6">
components/ProposalWorkspace.tsx: className="w-full text-left p-2 bg-stone-50 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none hover:border-stone-500 transition-all group"
components/ProposalWorkspace.tsx: <input type="number"value={selectedTextElement.style.width} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { width: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"step="0.1"value={selectedTextElement.style.fontSize} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { fontSize: parseFloat(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedTextElement.style.top} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { top: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedTextElement.style.left} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { left: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="color"value={selectedTextElement.style.color || '#000000'} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { color: e.target.value })} className="w-8 h-8 rounded-none border-none p-0 cursor-pointer"/>
components/ProposalWorkspace.tsx: <input value={selectedTextElement.style.color || '#000000'} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { color: e.target.value })} className="flex-1 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px] font-mono"/>
components/ProposalWorkspace.tsx: className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"
components/ProposalWorkspace.tsx: <input type="number"value={selectedTextElement.style.borderWidth || 0} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { borderWidth: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedTextElement.style.borderRadius || 0} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { borderRadius: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="color"value={selectedTextElement.style.borderColor || '#000000'} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { borderColor: e.target.value })} className="w-8 h-8 rounded-none border-none p-0 cursor-pointer"/>
components/ProposalWorkspace.tsx: <input value={selectedTextElement.style.borderColor || '#000000'} onChange={e => handleUpdateElementStyle(section.id, selectedTextElement.id, { borderColor: e.target.value })} className="flex-1 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px] font-mono"/>
components/ProposalWorkspace.tsx: className="w-full py-2 bg-red-500/10 text-red-500 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-red-500 hover:text-white transition-all"
components/ProposalWorkspace.tsx: <div className="bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none p-4 w-72 max-h-[80vh] overflow-y-auto no-scrollbar space-y-6">
components/ProposalWorkspace.tsx: <input type="number"value={selectedImageElement.style.width} onChange={e => handleUpdateElementStyle(section.id, selectedImageElement.id, { width: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedImageElement.style.top} onChange={e => handleUpdateElementStyle(section.id, selectedImageElement.id, { top: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedImageElement.style.left} onChange={e => handleUpdateElementStyle(section.id, selectedImageElement.id, { left: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: <input type="number"value={selectedImageElement.style.rotation || 0} onChange={e => handleUpdateElementStyle(section.id, selectedImageElement.id, { rotation: parseInt(e.target.value) })} className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-[10px]"/>
components/ProposalWorkspace.tsx: className={`px-2 py-1.5 border rounded-none font-sans text-[7px] uppercase font-black transition-all ${selectedImageElement.style.filter === f.val ? 'bg-nous-text text-white border-transparent' : 'border-stone-200 dark:border-stone-700 text-stone-400 hover:border-stone-400'}`}
components/ProposalWorkspace.tsx: className={`h-1.5 rounded-none transition-all ${i === activeSlideIndex ? 'w-8 bg-nous-text dark:bg-white' : 'w-2 bg-stone-300 dark:bg-stone-800 hover:bg-stone-400'}`} 
components/ProposalWorkspace.tsx: <button onClick={handleAddPage} className="hidden md:flex items-center gap-1.5 px-3 py-1 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-[8px] uppercase tracking-widest font-black text-stone-500 hover:text-nous-text dark:hover:text-white transition-all">
components/TheAuditorium.tsx: <section className="relative aspect-video w-full bg-black rounded-none-[2rem] overflow-hidden border border-stone-800 group">
components/TheAuditorium.tsx: className="w-24 h-24 rounded-none border border-stone-500/30 flex items-center justify-center backdrop-blur-xl"
components/TheAuditorium.tsx: className="px-10 py-4 bg-white text-black font-sans text-[10px] uppercase tracking-[0.5em] font-black rounded-none active:scale-95 transition-all flex items-center gap-4 hover:bg-stone-500 hover:text-white"
components/TheAuditorium.tsx: className={`text-left p-8 rounded-none border transition-all flex flex-col gap-6 group relative overflow-hidden ${activeEp.id === ep.id ? 'bg-white dark:bg-stone-900 border-nous-text dark:border-white scale-105' : 'bg-stone-50 dark:bg-stone-950 border-stone-100 dark:border-stone-800 opacity-60 hover:opacity-100'}`}
components/TheAuditorium.tsx: <section className="bg-amber-50/30 dark:bg-amber-950/10 border border-amber-100 dark:border-amber-900/30 p-12 rounded-none-[3rem] flex flex-col md:flex-row items-center gap-12">
components/TheAuditorium.tsx: <div className="p-8 bg-white dark:bg-stone-900 rounded-none border border-amber-200">
components/TheAuditorium.tsx: className="w-full px-10 py-6 bg-nous-text dark:bg-stone-100 text-white dark:text-stone-950 font-sans text-[10px] uppercase tracking-[0.6em] font-black rounded-none active:scale-95 transition-all border border-white/20"
components/InputStudio.tsx: <div className="w-2 h-2 rounded-none bg-stone-500 dark:bg-stone-400 animate-pulse"/>
components/InputStudio.tsx: className="mb-4 px-3 py-1 bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none flex items-center gap-2"
components/InputStudio.tsx: <div className="flex items-center gap-2 p-1.5 px-4 mb-6 rounded-none bg-stone-100 dark:bg-stone-900 -[4px_4px_8px_#d1d1d1,-4px_-4px_8px_#ffffff] dark:-[4px_4px_8px_#0e0e0e,-4px_-4px_8px_#262626] border border-white/20 dark:border-black/20">
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Upload Media</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Voice Transcription</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Lite Mode</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Deep Thinking</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Search Grounding</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Maps Grounding</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Task Intelligence</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Tailor Profile</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Mimi Prompt Engine</div>
components/InputStudio.tsx: <div className="bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[9px] uppercase tracking-widest px-2 py-1 rounded-none whitespace-nowrap">Clear Input</div>
components/InputStudio.tsx: className={`text-[10px] uppercase tracking-widest px-3 py-1.5 rounded-none transition-colors ${isSelectionMode ? 'bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900' : 'bg-stone-200 dark:bg-stone-800 text-stone-600 dark:text-stone-400 hover:bg-stone-300 dark:hover:bg-stone-700'}`}
components/InputStudio.tsx: className="flex flex-wrap items-center gap-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-black px-6 py-3 rounded-none mb-6 z-50 sticky top-4"
components/InputStudio.tsx: className="absolute -top-2 -right-2 bg-red-500 text-white rounded-none p-1 opacity-0 group-hover:opacity-100 transition-opacity z-10"
components/InputStudio.tsx: <div className={`w-5 h-5 rounded-none border-2 flex items-center justify-center transition-colors ${selectedMediaIndices.has(index) ? 'bg-stone-900 border-stone-900 dark:bg-stone-100 dark:border-stone-100' : 'bg-black/20 border-white'}`}>
components/InputStudio.tsx: className={`bg-stone-100 dark:bg-stone-800 p-3 border border-stone-200 dark:border-stone-700 w-40 h-auto flex flex-col items-center gap-2 rounded-none cursor-pointer relative transition-all duration-300 ${isSelectionMode && selectedMediaIndices.has(index) ? 'ring-2 ring-stone-900 dark:ring-stone-100 scale-105' : ''}`}
components/InputStudio.tsx: <div className={`w-5 h-5 rounded-none border-2 flex items-center justify-center transition-colors ${selectedMediaIndices.has(index) ? 'bg-stone-900 border-stone-900 dark:bg-stone-100 dark:border-stone-100' : 'bg-black/20 border-white'}`}>
components/InputStudio.tsx: className="w-0.5 bg-primary dark:bg-white rounded-none"
components/InputStudio.tsx: <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-50 pointer-events-auto flex items-center gap-2 bg-[#F9F7F2]/90 dark:bg-[#0A0A0A]/90 backdrop-blur-xl px-6 py-3 rounded-none border border-stone-200 dark:border-stone-800 dark:">
components/InputStudio.tsx: className={`relative px-4 py-2 rounded-none transition-all duration-300 ${isActive ? 'bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900' : 'text-stone-500 hover:text-stone-900 dark:hover:text-stone-100'}`}
components/InputStudio.tsx: className="absolute inset-0 rounded-none border border-stone-900/30 dark:border-stone-100/30 dark:"
components/InputStudio.tsx: className="fixed bottom-32 left-1/2 -translate-x-1/2 w-[400px] max-h-[60vh] bg-stone-100/95 dark:bg-stone-900/95 backdrop-blur-xl border border-stone-300 dark:border-stone-700 rounded-none pointer-events-auto overflow-y-auto p-8 flex flex-col z-50"
components/InputStudio.tsx: className="w-[2px] bg-primary dark:bg-white rounded-none"
components/InputStudio.tsx: <div className="p-5 bg-stone-100 dark:bg-stone-800/50 rounded-none border border-stone-200 dark:border-stone-700/50 relative overflow-hidden group">
components/InputStudio.tsx: <span key={tag} className="px-2 py-1 bg-black/5 dark:bg-white/5 text-[10px] uppercase tracking-widest rounded-none flex items-center gap-1">
components/InputStudio.tsx: className={`px-3 py-1.5 text-[10px] uppercase tracking-widest rounded-none border transition-colors ${activeTreatmentId === t.id ? 'border-stone-900 text-stone-900 bg-stone-100 dark:border-stone-100 dark:text-stone-100 dark:bg-stone-800' : 'border-stone-300 dark:border-stone-700 text-stone-500 hover:border-stone-400 dark:hover:border-stone-800 dark:hover:border-stone-300'}`}
components/ElevatorLoader.tsx: <div className="w-2 h-2 bg-amber-500 rounded-none animate-ping z-10"/>
components/ElevatorLoader.tsx: <div className="w-1.5 h-1.5 bg-stone-500 rounded-none animate-pulse"/>
components/ElevatorLoader.tsx: <div className="p-4 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none font-mono text-[9px] text-stone-500 uppercase tracking-wide flex justify-between items-center">
components/ProfileHoverCard.tsx: className="absolute top-full right-0 mt-2 w-80 bg-[#F9F7F2] dark:bg-[#0A0A0A] border border-stone-200 dark:border-stone-800 rounded-none dark: overflow-hidden z-[100] relative"
components/ProfileHoverCard.tsx: <div className="w-16 h-16 rounded-none bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 flex items-center justify-center overflow-hidden shrink-0">
components/ProfileHoverCard.tsx: className="w-full bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none px-2 py-1 text-sm focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 text-stone-900 dark:text-white"
components/ProfileHoverCard.tsx: className="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs font-sans uppercase tracking-widest font-bold text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-none transition-colors"
components/EditorialSpread.tsx: <div className="w-1 h-1 bg-stone-500 rounded-none"></div>
components/EditorialSpread.tsx: <div className="p-8 rounded-none border border-stone-300 dark:border-stone-700">
components/CliqueRadar.tsx: <motion.div animate={{ rotate: 360 }} transition={{ duration: 60, repeat: Infinity, ease: 'linear' }} className="border-[0.5px] border-stone-900 dark:border-white w-[1200px] h-[1200px] rounded-none flex items-center justify-center">
components/CliqueRadar.tsx: <div className="w-64 h-1 bg-stone-100 dark:bg-stone-900 rounded-none overflow-hidden">
components/AestheticDial.tsx: <div className="absolute left-0 right-0 h-1 bg-stone-200 dark:bg-stone-800 rounded-none overflow-hidden">
components/AestheticDial.tsx: className="absolute top-0 bottom-0 left-0 rounded-none"
components/AestheticDial.tsx: className="absolute w-4 h-4 rounded-none bg-white border-2 flex items-center justify-center z-10"
components/AestheticDial.tsx: className="absolute font-mono text-[10px] bg-black text-white px-2 py-1 rounded-none whitespace-nowrap pointer-events-none"
components/MimiGateway.tsx: className="relative w-full max-w-md bg-white dark:bg-stone-900 rounded-none overflow-hidden border border-stone-200 dark:border-stone-800"
components/MimiGateway.tsx: <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs rounded-none text-center">
components/MimiGateway.tsx: className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-900 dark:text-white rounded-none transition-colors font-sans text-sm font-medium"
components/MimiGateway.tsx: className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-900 dark:text-white rounded-none transition-colors font-sans text-sm font-medium"
components/MimiGateway.tsx: className="w-full px-4 py-3 bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 rounded-none focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 dark:focus:border-stone-500 transition-colors text-stone-900 dark:text-white"
components/MimiGateway.tsx: className="w-full px-4 py-3 bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 rounded-none focus:outline-none focus:border-stone-500 dark:focus:border-stone-500 transition-colors text-stone-900 dark:text-white"
components/MimiGateway.tsx: className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none font-sans text-xs uppercase tracking-widest font-bold hover:bg-stone-800 dark:hover:bg-white transition-colors disabled:opacity-50"
components/ZineInspoCarousel.tsx: <div className="bg-stone-50 dark:bg-stone-900/50 p-6 border border-stone-200 dark:border-stone-800 rounded-none text-stone-800 dark:text-stone-300 font-serif h-80 flex flex-col justify-between cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 transition-colors"onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'signature' }))}>
components/ZineInspoCarousel.tsx: <div className="w-full h-24 bg-stone-200 dark:bg-stone-800 rounded-none overflow-hidden flex items-center justify-center">
components/ZineInspoCarousel.tsx: <div className="bg-stone-50 dark:bg-stone-900/50 p-6 border border-stone-200 dark:border-stone-800 rounded-none text-stone-800 dark:text-stone-300 font-serif h-80 relative overflow-hidden flex flex-col cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 transition-colors"onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'taste-graph' }))}>
components/ZineInspoCarousel.tsx: <div className="absolute w-2 h-2 bg-stone-500 rounded-none top-1/4 left-1/4"></div>
components/ZineInspoCarousel.tsx: <div className="absolute w-3 h-3 bg-indigo-500 rounded-none top-1/2 left-1/2"></div>
components/ZineInspoCarousel.tsx: <div className="absolute w-2 h-2 bg-amber-500 rounded-none bottom-1/3 right-1/4"></div>
components/ZineInspoCarousel.tsx: <div className="bg-stone-50 dark:bg-stone-900/50 p-6 border border-stone-200 dark:border-stone-800 rounded-none text-stone-800 dark:text-stone-300 font-serif h-80 flex flex-col justify-between cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 transition-colors"onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'narrative-threads' }))}>
components/ZineInspoCarousel.tsx: className={`w-1.5 h-1.5 rounded-none transition-colors ${activeView === idx ? 'bg-stone-800 dark:bg-stone-200' : 'bg-stone-300 dark:bg-stone-700'}`}
components/MembershipView.tsx: <div className="w-20 h-20 bg-white rounded-none flex items-center justify-center text-stone-500">
components/MembershipView.tsx: <div className="mt-12 inline-flex flex-col items-center p-8 bg-white dark:bg-stone-900 rounded-none border border-stone-200 dark:border-stone-800">
components/MembershipView.tsx: className="inline-flex items-center gap-2 px-6 py-3 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none font-sans text-xs uppercase tracking-widest font-bold hover:bg-stone-800 dark:hover:bg-white transition-colors"
components/MembershipView.tsx: <div className="w-full max-w-[320px] bg-[#F9F9F6] dark:bg-[#1A1A1A] border border-stone-200 dark:border-stone-800 rounded-none rounded-none p-8 pt-16 flex flex-col items-center text-center relative group-hover:-translate-y-4 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]">
components/MembershipView.tsx: <div className="absolute top-6 w-4 h-4 rounded-none bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800"></div>
components/MembershipView.tsx: className="w-full py-4 px-4 bg-transparent border border-stone-300 dark:border-stone-700 text-stone-900 dark:text-stone-100 rounded-none font-sans text-[10px] uppercase tracking-[0.2em] font-bold text-center hover:bg-stone-900 hover:text-white dark:hover:bg-white dark:hover:text-stone-900 transition-colors"
components/MembershipView.tsx: <div className="w-full max-w-[320px] bg-[#F9F9F6] dark:bg-[#1A1A1A] border border-stone-200 dark:border-stone-800 rounded-none rounded-none p-8 pt-16 flex flex-col items-center text-center relative group-hover:-translate-y-4 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]">
components/MembershipView.tsx: <div className="absolute top-6 w-4 h-4 rounded-none bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800"></div>
components/MembershipView.tsx: className="w-full py-4 px-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none font-sans text-[10px] uppercase tracking-[0.2em] font-bold text-center hover:bg-stone-800 dark:hover:bg-white transition-colors"
components/MembershipView.tsx: <div className="w-full max-w-[320px] bg-stone-900 dark:bg-[#111] border border-stone-800 dark:border-stone-800 rounded-none rounded-none p-8 pt-16 flex flex-col items-center text-center relative group-hover:-translate-y-4 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]">
components/MembershipView.tsx: <div className="absolute top-6 w-4 h-4 rounded-none bg-stone-50 dark:bg-stone-950 border border-stone-800"></div>
components/MembershipView.tsx: className="w-full py-4 px-4 bg-stone-500 text-stone-900 rounded-none font-sans text-[10px] uppercase tracking-[0.2em] font-bold text-center hover:bg-stone-400 transition-colors"
components/MembershipView.tsx: className="w-full py-4 px-4 bg-transparent border border-stone-500/30 text-stone-400 rounded-none font-sans text-[10px] uppercase tracking-[0.2em] font-bold text-center hover:bg-stone-500/10 transition-colors"
components/TheThimble.tsx: className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 p-3 text-stone-900 dark:text-stone-100 focus:outline-none focus:border-stone-400 dark:focus:border-stone-600 transition-colors rounded-none"
components/TheThimble.tsx: className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 p-3 text-stone-900 dark:text-stone-100 focus:outline-none focus:border-stone-400 dark:focus:border-stone-600 transition-colors rounded-none"
components/TheThimble.tsx: className="w-full bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 p-3 font-bold uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-white disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2 rounded-none"
components/TheThimble.tsx: <div key={idx} className="bg-white/50 dark:bg-stone-900/30 border border-stone-200 dark:border-stone-800 p-4 space-y-4 rounded-none backdrop-blur-sm">
components/TheThimble.tsx: <div className="bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 p-3 flex items-center justify-between group rounded-none">
components/Diagnostics.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none space-y-6">
components/Diagnostics.tsx: className="px-6 py-2 bg-nous-text dark:bg-white text-white dark:text-black font-sans text-[9px] uppercase tracking-widest font-black rounded-none active:scale-95 transition-all disabled:opacity-50 flex items-center gap-2"
components/Diagnostics.tsx: <div key={r.id} className="flex items-center gap-4 p-4 border border-stone-100 dark:border-stone-800 rounded-none bg-white dark:bg-black/20">
components/Diagnostics.tsx: <div className={`p-2 rounded-none ${
components/ManifestIdentityGate.tsx: <div className="flex flex-col items-center justify-center p-8 border border-stone-500/20 bg-stone-900/40 rounded-none backdrop-blur-md">
components/TitleLegend.tsx: <div className="bg-white/95 dark:bg-stone-900/95 backdrop-blur-2xl border border-black/5 dark:border-white/10 p-5 rounded-none flex flex-col gap-4 overflow-hidden relative group/legend">
components/TitleLegend.tsx: <div className="w-1 h-1 bg-amber-500 rounded-none animate-pulse"/>
components/TitleLegend.tsx: <div className="w-2 h-2 rounded-none bg-stone-500"/>
components/TitleLegend.tsx: <div className="w-2 h-2 rounded-none bg-amber-500"/>
components/ZineFolders.tsx: className="p-1.5 bg-stone-100 dark:bg-stone-800 rounded-none hover:bg-stone-500 hover:text-white transition-colors"
components/ZineFolders.tsx: className={`p-3 rounded-none flex items-center gap-3 cursor-pointer transition-all ${activeFolder === null ? 'bg-nous-text dark:bg-white text-white dark:text-black ' : 'bg-stone-50 dark:bg-stone-900/50 text-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800'}`}
components/ZineFolders.tsx: className={`group p-3 rounded-none flex items-center gap-3 cursor-pointer transition-all ${activeFolder === folder.id ? 'bg-nous-text dark:bg-white text-white dark:text-black ' : 'bg-stone-50 dark:bg-stone-900/50 text-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800'}`}
components/ZineFolders.tsx: <div className="h-64 flex flex-col items-center justify-center border-2 border-dashed border-stone-100 dark:border-stone-800 rounded-none">
components/ZineFolders.tsx: <div className="bg-white dark:bg-stone-900 w-full max-w-md p-6 rounded-none border border-stone-200 dark:border-stone-800">
components/ZineFolders.tsx: className="w-full p-3 bg-stone-50 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-sm focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 transition-colors"
components/ZineFolders.tsx: className="w-full py-3 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.2em] font-black hover:bg-stone-500 hover:text-white transition-all disabled:opacity-50"
components/SlideCanvas.tsx: <div className={`absolute -top-6 left-0 bg-stone-500/10 text-stone-600 px-2 py-0.5 text-[6px] uppercase tracking-widest font-black rounded-none border border-stone-500/20 transition-opacity whitespace-nowrap ${isSelected ? 'opacity-100' : 'opacity-0 group-hover/el:opacity-100'}`}>
components/SlideCanvas.tsx: className="absolute -top-6 left-1/2 -translate-x-1/2 w-5 h-5 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none flex items-center justify-center cursor-grab active:cursor-grabbing z-50 hover:bg-stone-50"
components/SlideCanvas.tsx: <div className="absolute -bottom-2 -right-2 w-4 h-4 bg-stone-500 rounded-none cursor-se-resize flex items-center justify-center pointer-events-auto z-50 border border-white"onMouseDown={startResize} onTouchStart={startResize}>
components/SlideCanvas.tsx: <div className="absolute -bottom-2 -left-2 w-3 h-3 bg-white border border-stone-500 rounded-none cursor-sw-resize z-50"onMouseDown={startResize} onTouchStart={startResize} />
components/SlideCanvas.tsx: <div className="absolute -top-2 -right-2 w-3 h-3 bg-white border border-stone-500 rounded-none cursor-ne-resize z-50"onMouseDown={startResize} onTouchStart={startResize} />
components/SlideCanvas.tsx: <div className="absolute -top-2 -left-2 w-3 h-3 bg-white border border-stone-500 rounded-none cursor-nw-resize z-50"onMouseDown={startResize} onTouchStart={startResize} />
components/ErrorBoundary.tsx: <div className="max-w-md w-full bg-stone-900/50 backdrop-blur-md border border-stone-800 rounded-none p-8 text-center space-y-6">
components/ErrorBoundary.tsx: <div className="w-16 h-16 bg-red-500/10 rounded-none flex items-center justify-center mx-auto">
components/ErrorBoundary.tsx: <div className="bg-black/50 rounded-none p-4 text-left overflow-auto max-h-48 border border-stone-800">
components/ErrorBoundary.tsx: className="w-full py-3 bg-white text-black rounded-none font-medium hover:bg-stone-200 transition-colors"
components/ZineCoverCard.tsx: className="group relative w-full aspect-[3/4] rounded-none rounded-none overflow-hidden flex flex-col cursor-pointer hover:scale-[1.02] transition-transform duration-500"
components/ZineCoverCard.tsx: <span key={idx} className="px-2 py-1 bg-white/10 rounded-none text-[8px] uppercase tracking-widest font-sans font-bold text-white/80">
components/SentinelView.tsx: <div className="h-2 w-full bg-stone-100 dark:bg-stone-800 rounded-none overflow-hidden">
components/SentinelView.tsx: <div className="h-1 w-full bg-stone-50 dark:bg-stone-900 rounded-none overflow-hidden">
components/SentinelView.tsx: <section className="bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-10 rounded-none space-y-8">
components/SentinelView.tsx: <div className={`absolute -left-[37px] top-1 w-2 h-2 rounded-none ${log.agent === 'sentinel' ? 'bg-red-500' : 'bg-indigo-500'} ring-4 ring-white dark:ring-[#050505]`} />
components/SentinelView.tsx: <div className="p-8 bg-stone-50 dark:bg-stone-900/50 border border-stone-200 dark:border-stone-800 rounded-none space-y-6">
components/SentinelView.tsx: className="flex items-center gap-2 px-3 py-1.5 bg-red-500/10 text-red-500 border border-red-500/20 rounded-none hover:bg-red-500 hover:text-white transition-all group"
components/SentinelView.tsx: <div className="p-4 bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none">
components/SentinelView.tsx: <div className="h-1 w-full bg-stone-50 dark:bg-stone-950 rounded-none overflow-hidden">
components/SentinelView.tsx: <div className="p-4 bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none">
components/SentinelView.tsx: <div className="h-1 w-full bg-stone-50 dark:bg-stone-950 rounded-none overflow-hidden">
components/SentinelView.tsx: <div key={i} className="flex items-start gap-4 p-4 bg-white dark:bg-stone-900 rounded-none border border-black/5 dark:border-white/5">
components/SentinelView.tsx: <div className="flex items-center gap-3 p-4 bg-stone-500/10 border border-stone-500/20 rounded-none text-stone-600 dark:text-stone-400">
components/SentinelView.tsx: <div className="p-8 bg-black text-white rounded-none space-y-6 relative overflow-hidden">
components/AuditLedger.tsx: <div className="relative w-full max-w-2xl bg-black border border-stone-800 p-8 md:p-12 rounded-none space-y-10">
components/AuditLedger.tsx: className={`flex-1 py-4 px-6 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 transition-all ${filter === 'manifest' ? 'bg-white text-black' : 'border border-stone-800 text-stone-500 hover:text-white'}`}
components/AuditLedger.tsx: className={`flex-1 py-4 px-6 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 transition-all ${filter === 'archive' ? 'bg-red-500 text-white' : 'border border-stone-800 text-stone-500 hover:text-red-500'}`}
components/AuditLedger.tsx: <div className={`absolute left-[-4.5px] top-1 w-2 h-2 rounded-none transition-colors ${filter === 'manifest' ? 'bg-stone-500 ' : 'bg-red-500 '}`} />
components/AuditLedger.tsx: <div className="p-3 bg-stone-900/50 rounded-none border border-stone-800/50">
components/TasteConstellation.tsx: className={`p-3 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none cursor-grab active:cursor-grabbing flex items-start gap-3 transition-opacity ${isDragging ? 'opacity-50' : 'opacity-100'}`}
components/TasteConstellation.tsx: className={`p-6 border-2 border-dashed rounded-none transition-colors flex flex-col h-full ${
components/TasteConstellation.tsx: className="p-3 bg-stone-100 dark:bg-stone-950 border border-stone-200 dark:border-stone-800 rounded-none flex justify-between items-center group"
components/TasteConstellation.tsx: className="w-full py-2 bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 rounded-none font-sans text-xs uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
components/TasteConstellation.tsx: className="flex items-center gap-2 px-6 py-3 bg-stone-900 dark:bg-stone-100 text-white dark:text-black rounded-none hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors font-sans text-[10px] uppercase tracking-widest"
components/ImperialPatronageModal.tsx: className="relative w-full max-w-[800px] overflow-hidden flex flex-col items-center text-center rounded-none my-8"
components/ImperialPatronageModal.tsx: <div className="w-16 h-16 bg-white rounded-none flex items-center justify-center text-stone-500">
components/ImperialPatronageModal.tsx: <div className="bg-amber-100 text-amber-800 p-3 rounded-none text-xs font-sans uppercase tracking-widest font-bold">
components/ImperialPatronageModal.tsx: className={`w-full mt-4 py-3 border border-[#1C1917] rounded-none font-sans text-[9px] uppercase tracking-[0.3em] font-black transition-all flex items-center justify-center gap-3 relative overflow-hidden group ${status === 'success' ? 'bg-[#1C1917] text-white' : 'hover:bg-[#1C1917] hover:text-white text-[#1C1917]'}`}
components/GlobalSearchOverlay.tsx: <button onClick={onClose} className="p-3 bg-stone-100 dark:bg-stone-800 rounded-none hover:bg-red-500 hover:text-white transition-all"><X size={20}/></button>
components/GlobalSearchOverlay.tsx: className="w-full text-left p-6 bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none hover:border-stone-800 dark:hover:border-stone-300 transition-all flex justify-between items-center group"
components/GlobalSearchOverlay.tsx: className="p-5 bg-stone-50 dark:bg-stone-900/50 border border-stone-100 dark:border-stone-800 rounded-none flex gap-4 items-center group cursor-help"
components/GlobalSearchOverlay.tsx: <div className="w-12 h-12 bg-black overflow-hidden rounded-none flex-shrink-0">
components/GlobalSearchOverlay.tsx: <div className="p-10 border border-stone-200 dark:border-stone-800 rounded-none">
components/ScryView.tsx: title: c.web?.title || 'Grounded Insight',
components/ScryView.tsx: snippet: 'Grounded in real-time data',
components/ScryView.tsx: className="w-[200px] h-[200px] md:w-[250px] md:h-[250px] rounded-none bg-black flex items-center justify-center overflow-hidden relative z-10"
components/ScryView.tsx: <div className="w-[98%] h-[98%] bg-black rounded-none absolute"/>
components/ScryView.tsx: <div className="absolute bottom-12 left-1/2 -translate-x-1/2 bg-stone-800/50 backdrop-blur-md border border-white/10 px-4 py-1.5 rounded-none flex items-center gap-2">
components/ScryView.tsx: <div className={`w-1.5 h-1.5 rounded-none ${visualState === 'loading' ? 'bg-stone-400 animate-pulse' : 'bg-stone-500'}`} />
components/ScryView.tsx: <div className="absolute inset-0 bg-stone-500/5 blur-[100px] rounded-none -z-10 transform scale-110 pointer-events-none"/>
components/ScryView.tsx: className="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 bg-[#1c1917] rounded-none flex items-center justify-center text-[#f5f5f0] hover:bg-stone-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
components/ScryView.tsx: className="bg-white p-10 rounded-none border border-[#e5e5e0] text-center"
components/ScryView.tsx: className="group border-b border-[#e5e5e0] py-6 hover:bg-white/50 transition-colors px-4 rounded-none"
components/CliqueView.tsx: <div className="flex items-center gap-4 bg-white/50 dark:bg-stone-900/50 backdrop-blur-xl px-6 py-3 rounded-none border border-stone-100 dark:border-stone-800">
components/CliqueView.tsx: <button onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'profile' }))} className="px-10 py-5 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-widest font-black">Anchor Identity</button>
components/CliqueView.tsx: <button onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'nebula' }))} className="px-10 py-5 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-widest font-black">Browse Archives</button>
components/CliqueView.tsx: <button onClick={() => handleShare(zine.id)} className="flex items-center gap-3 px-6 py-2 bg-stone-50 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none font-sans text-[8px] uppercase tracking-widest font-black text-stone-400 hover:text-stone-500 transition-all">
components/ShardAnalyzer.tsx: className="px-8 py-3 bg-nous-text dark:bg-white text-white dark:text-stone-900 rounded-none font-sans text-[9px] uppercase tracking-widest font-black active:scale-95 transition-all disabled:opacity-30"
components/ShardAnalyzer.tsx: <div className="absolute inset-0 border-t border-stone-500 rounded-none animate-ping opacity-20"/>
components/ShardAnalyzer.tsx: <div className="p-4 bg-red-50 dark:bg-red-950/20 rounded-none border border-red-100 dark:border-red-900/30 inline-block">
components/TailorAuditOverlay.tsx: <motion.div initial={{ scale: 0.95, y: 20 }} animate={{ scale: 1, y: 0 }} className="w-full max-w-5xl bg-white dark:bg-[#0A0A0A] border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden flex flex-col max-h-[90vh]">
components/TailorAuditOverlay.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 rounded-none font-sans text-[8px] uppercase tracking-widest font-black text-stone-500 hover:text-stone-800 dark:hover:text-stone-300 transition-all"
components/TailorAuditOverlay.tsx: <button onClick={onClose} className="p-3 text-stone-400 hover:text-red-500 transition-colors bg-stone-50 dark:bg-stone-900 rounded-none"><X size={20} /></button>
components/TailorAuditOverlay.tsx: <div key={i} className="p-4 bg-stone-50 dark:bg-stone-900 border border-black/5 dark:border-white/5 rounded-none">
components/TailorAuditOverlay.tsx: className="flex items-start gap-4 p-5 bg-white dark:bg-stone-900 border border-black/5 dark:border-white/5 rounded-none"
components/TailorAuditOverlay.tsx: <button onClick={handleManifest} disabled={!auditReport.profileManifesto} className="flex-1 sm:flex-none px-12 py-5 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.4em] font-black active:scale-95 transition-all flex items-center justify-center gap-3 hover:bg-stone-500 disabled:opacity-50">
components/TailorPreview.tsx: <div className="relative group aspect-[3/4] bg-stone-100 dark:bg-stone-900 rounded-none overflow-hidden border border-stone-200 dark:border-stone-800">
components/TailorPreview.tsx: className="p-2 bg-white/80 dark:bg-black/80 backdrop-blur-md rounded-none text-stone-600 dark:text-stone-300 hover:scale-110 active:scale-95 transition-all disabled:opacity-50"
components/TailorPreview.tsx: className="p-2 bg-white/80 dark:bg-black/80 backdrop-blur-md rounded-none text-stone-600 dark:text-stone-300 hover:scale-110 active:scale-95 transition-all disabled:opacity-50"
components/TailorPreview.tsx: <div className="absolute bottom-3 left-3 right-3 bg-red-500/90 backdrop-blur-md text-white p-2 rounded-none text-[8px] uppercase tracking-widest font-black flex items-center gap-2">
components/TailorPreview.tsx: <div className="bg-white/80 dark:bg-black/80 backdrop-blur-md px-2 py-1 rounded-none border border-black/5 dark:border-white/5">
components/UserProfileView.tsx: <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className={`fixed top-24 z-[10000] px-8 py-3 rounded-none font-sans text-[10px] uppercase tracking-widest font-black border ${message.type === 'success' ? 'bg-stone-900 text-white dark:bg-stone-100 dark:text-stone-900 border-stone-800 dark:border-stone-200' : 'bg-red-500 text-white border-red-400'}`}>
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none dark: overflow-hidden border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <div className="relative w-20 h-20 rounded-none overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 flex items-center justify-center shrink-0">
components/UserProfileView.tsx: <button onClick={() => setExternalLinks([...externalLinks, { title: 'Link', url: '' }])} className="w-full py-2 border border-dashed border-stone-300 dark:border-stone-700 text-[10px] uppercase tracking-widest hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors rounded-none">
components/UserProfileView.tsx: <button onClick={() => handleGoogleLink()} className="w-full flex items-center justify-center gap-2 py-4 border border-stone-800 dark:border-stone-200 text-[10px] uppercase tracking-widest hover:bg-stone-800 hover:text-white dark:hover:bg-stone-200 dark:hover:text-black transition-all rounded-none">
components/UserProfileView.tsx: }} className="w-full flex items-center justify-center gap-2 py-4 border border-stone-800 dark:border-stone-200 text-[10px] uppercase tracking-widest hover:bg-stone-800 hover:text-white dark:hover:bg-stone-200 dark:hover:text-black transition-all rounded-none">
components/UserProfileView.tsx: <div className="w-full flex items-center justify-center gap-2 py-4 border border-stone-900/30 dark:border-stone-100/30 bg-stone-900/10 dark:bg-stone-100/10 text-[10px] uppercase tracking-widest text-stone-900 dark:text-stone-100 rounded-none">
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <span key={i} className="px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 text-xs font-mono rounded-none border border-stone-200 dark:border-stone-700">
components/UserProfileView.tsx: <span key={i} className="px-4 py-2 bg-stone-50 dark:bg-stone-900/50 text-stone-600 dark:text-stone-400 text-xs font-mono rounded-none border border-stone-200 dark:border-stone-800">
components/UserProfileView.tsx: <div className="text-center p-8 border border-dashed border-stone-200 dark:border-stone-800 rounded-none">
components/UserProfileView.tsx: <button onClick={() => window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'taste-graph' }))} className="px-8 py-4 bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[10px] uppercase tracking-[0.2em] hover:bg-stone-700 dark:hover:bg-white transition-colors rounded-none">
components/UserProfileView.tsx: className="p-4 border border-stone-200 dark:border-stone-700 text-left hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors rounded-none"
components/UserProfileView.tsx: className="p-4 border border-stone-200 dark:border-stone-700 text-left hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors rounded-none"
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <span className="text-[10px] uppercase tracking-widest font-mono px-3 py-1 border border-stone-200 dark:border-stone-700 rounded-none text-stone-500">Agent Config</span>
components/UserProfileView.tsx: <button onClick={() => setArchetype('editorial-serif')} className={`text-[10px] font-mono border px-4 py-2 rounded-none ${archetype === 'editorial-serif' ? 'bg-stone-800 text-white border-stone-800' : 'bg-white dark:bg-stone-800 border-stone-200 dark:border-stone-700'}`}>Editorial</button>
components/UserProfileView.tsx: <button onClick={() => setArchetype('minimalist-sans')} className={`text-[10px] font-mono border px-4 py-2 rounded-none ${archetype === 'minimalist-sans' ? 'bg-stone-800 text-white border-stone-800' : 'bg-white dark:bg-stone-800 border-stone-200 dark:border-stone-700'}`}>Minimalist</button>
components/UserProfileView.tsx: <button onClick={() => setArchetype('brutalist-mono')} className={`text-[10px] font-mono border px-4 py-2 rounded-none ${archetype === 'brutalist-mono' ? 'bg-stone-800 text-white border-stone-800' : 'bg-white dark:bg-stone-800 border-stone-200 dark:border-stone-700'}`}>Brutalist</button>
components/UserProfileView.tsx: <button onClick={() => setCuratorEnabled(!curatorEnabled)} className={`text-[10px] font-mono px-2 py-1 rounded-none border ${curatorEnabled ? 'text-stone-900 border-stone-300 bg-stone-100 dark:text-stone-100 dark:border-stone-700 dark:bg-stone-800' : 'text-stone-400 border-stone-200 dark:border-stone-800'}`}>{curatorEnabled ? 'ENABLED' : 'DISABLED'}</button>
components/UserProfileView.tsx: <button onClick={() => setSentinelEnabled(!sentinelEnabled)} className={`text-[10px] font-mono px-2 py-1 rounded-none border ${sentinelEnabled ? 'text-stone-900 border-stone-300 bg-stone-100 dark:text-stone-100 dark:border-stone-700 dark:bg-stone-800' : 'text-stone-400 border-stone-200 dark:border-stone-800'}`}>{sentinelEnabled ? 'ENABLED' : 'DISABLED'}</button>
components/UserProfileView.tsx: className="font-serif text-lg leading-snug text-stone-600 dark:text-stone-300 border border-stone-200 dark:border-stone-700 rounded-none p-4 bg-stone-50 dark:bg-stone-800/50 resize-none flex-grow focus:outline-none focus:ring-1 focus:ring-stone-400 w-full"
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <button onClick={handleCreateMask} className="flex-1 py-4 bg-stone-800 text-white text-[10px] uppercase tracking-widest rounded-none hover:bg-stone-700 transition-colors">Mint</button>
components/UserProfileView.tsx: <button onClick={() => setIsAddingPersona(false)} className="flex-1 py-4 border border-stone-200 text-[10px] uppercase tracking-widest rounded-none hover:bg-stone-50 transition-colors">Cancel</button>
components/UserProfileView.tsx: <button onClick={handleUpdateActiveMask} className="w-full py-4 bg-stone-800 text-white text-[10px] uppercase tracking-widest rounded-none hover:bg-stone-700 transition-colors mt-4">Save Parameters</button>
components/UserProfileView.tsx: <div className="bg-stone-50 dark:bg-stone-800/50 rounded-none p-4 mb-6 border border-stone-100 dark:border-stone-800">
components/UserProfileView.tsx: <button onClick={() => setIsAddingPersona(true)} className="w-full py-4 bg-stone-100 dark:bg-stone-800 text-[10px] uppercase tracking-widest hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors rounded-none font-medium">
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <span className="text-[10px] font-mono text-stone-400 bg-stone-50 dark:bg-stone-800 px-3 py-1 rounded-none border border-stone-200 dark:border-stone-700">Minted: {new Date(profile?.createdAt || Date.now()).toLocaleDateString()}</span>
components/UserProfileView.tsx: <div className={`w-12 h-6 rounded-none ${isPatronActive ? 'bg-stone-900 dark:bg-stone-100' : 'bg-stone-200 dark:bg-stone-700'}`}></div>
components/UserProfileView.tsx: className="flex-1 flex items-center justify-center gap-2 py-4 border border-stone-200 dark:border-stone-700 text-[10px] uppercase tracking-widest hover:bg-stone-50 dark:hover:bg-stone-800 transition-all rounded-none"
components/UserProfileView.tsx: <button onClick={() => setShowPatronageModal(true)} className="flex-1 py-4 bg-stone-800 text-white text-[10px] uppercase tracking-widest hover:bg-stone-700 transition-colors rounded-none">
components/UserProfileView.tsx: className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8"
components/UserProfileView.tsx: <button onClick={handleExportData} disabled={isExporting} className="flex items-center justify-center gap-2 px-6 py-4 border border-stone-200 dark:border-stone-700 text-[10px] uppercase tracking-widest hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors rounded-none w-full">
components/UserProfileView.tsx: <button onClick={handleSave} disabled={isSaving} className="px-8 py-4 bg-stone-800 dark:bg-stone-200 text-white dark:text-black text-[10px] uppercase tracking-widest hover:bg-stone-700 dark:hover:bg-white transition-colors rounded-none font-medium">
components/UserProfileView.tsx: <button onClick={logout} className="px-8 py-4 border border-red-200 text-red-600 text-[10px] uppercase tracking-widest hover:bg-red-50 transition-colors rounded-none">
components/PublicSharePage.tsx: <div className="w-full bg-white dark:bg-stone-900 rounded-none border border-stone-100 dark:border-stone-800 p-8">
components/PublicSharePage.tsx: <span key={i} className="px-4 py-2 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 text-xs font-mono rounded-none border border-stone-200 dark:border-stone-700">
components/PublicSharePage.tsx: <span key={i} className="px-4 py-2 bg-stone-50 dark:bg-stone-900/50 text-stone-600 dark:text-stone-400 text-xs font-mono rounded-none border border-stone-200 dark:border-stone-800">
components/PublicSharePage.tsx: <div className="text-center p-8 border border-dashed border-stone-200 dark:border-stone-800 rounded-none">
components/PublicSharePage.tsx: <div className="p-6 border border-stone-100 dark:border-stone-800 rounded-none bg-stone-50 dark:bg-stone-900/50">
components/PublicSharePage.tsx: className="w-full py-4 bg-stone-900 dark:bg-white text-white dark:text-stone-900 rounded-none font-sans text-[10px] uppercase tracking-[0.4em] font-black flex items-center justify-center gap-2 hover:opacity-90 transition-opacity"
components/MigrationUtility.tsx: <div className="p-6 bg-stone-50 border border-stone-200 rounded-none space-y-4">
components/MigrationUtility.tsx: className="px-4 py-2 bg-nous-text text-white rounded-none text-xs uppercase tracking-widest font-black"
components/MigrationUtility.tsx: <div key={c} className="p-2 bg-white border border-stone-100 rounded-none">
components/RitualGuard.tsx: <div className="absolute inset-0 bg-stone-500/5 blur-[120px] rounded-none pointer-events-none"/>
components/RitualGuard.tsx: <div className="w-20 h-20 border border-stone-200 dark:border-stone-800 rounded-none flex items-center justify-center mx-auto">
components/RitualGuard.tsx: <div className="p-8 bg-stone-50 dark:bg-stone-900 border border-black/5 dark:border-white/5 rounded-none space-y-4">
components/AboutView.tsx: <div className="absolute inset-0 bg-stone-500/20 blur-xl rounded-none animate-pulse"/>
components/AboutView.tsx: <div className="w-full max-w-5xl bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none p-8 md:p-16 space-y-12">
components/AboutView.tsx: <button key={p.id} onClick={() => setSelectedPreset(p.id)} className={`w-full text-left p-4 rounded-none border transition-all ${selectedPreset === p.id ? 'bg-nous-text dark:bg-white text-white dark:text-black border-transparent ' : 'bg-transparent border-stone-100 dark:border-stone-800 text-stone-500 hover:border-stone-300'}`}>
components/AboutView.tsx: <div className="p-8 bg-stone-50 dark:bg-black/40 border border-stone-100 dark:border-stone-800 rounded-none space-y-6">
components/AboutView.tsx: <div className="w-12 h-12 bg-stone-200 dark:bg-stone-800 rounded-none flex items-center justify-center text-stone-400"><FolderOpen size={20} /></div>
components/AboutView.tsx: className="mt-4 border-2 border-dashed border-stone-200 dark:border-stone-800 rounded-none p-6 text-center hover:border-stone-800 dark:hover:border-stone-300 transition-all cursor-pointer group bg-white/50 dark:bg-black/20"
components/AboutView.tsx: <button onClick={handleStartAssembly} className="w-full py-6 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.5em] font-black hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-4">
components/AboutView.tsx: <div className="inline-flex items-center gap-3 px-4 py-1.5 rounded-none border border-stone-500/20 bg-stone-500/5 text-stone-600 dark:text-stone-400">
components/AboutView.tsx: <button key={folder.id} onClick={() => handleSelectFolder(folder.id)} className="group p-8 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none hover:border-stone-500 hover: transition-all text-left flex flex-col gap-6">
components/AboutView.tsx: {availableFolders.length === 0 && <div className="col-span-full py-12 text-center opacity-30 border-2 border-dashed border-stone-300 dark:border-stone-800 rounded-none"><Archive size={48} className="mx-auto mb-4"/><p className="font-serif italic text-2xl">No Stacks Found.</p></div>}
components/AboutView.tsx: <button key={p.id} onClick={() => handleOpenProposal(p)} className="text-left p-6 bg-stone-50 dark:bg-black/40 border border-stone-200 dark:border-stone-800 rounded-none hover:border-stone-500 transition-all group">
components/AboutView.tsx: <div className="p-2 bg-white dark:bg-stone-800 rounded-none text-stone-400 group-hover:text-stone-500"><FileText size={14} /></div>
components/SemanticSteps.tsx: <div className="flex w-full bg-stone-100 dark:bg-stone-900 rounded-none p-1 border border-stone-200 dark:border-stone-800">
components/SemanticSteps.tsx: className={`flex-1 py-2 px-2 text-[9px] uppercase tracking-widest font-black transition-all rounded-none ${
components/MimiZineLayout.tsx: <div key={i} className="w-3 h-6 bg-stone-700 rounded-none hover:bg-stone-500 transition-colors"></div>
components/MimiZineLayout.tsx: <div className="border border-stone-200 rounded-none p-8 flex flex-col gap-6 bg-white/50">
components/PhantomZineDisplay.tsx: className="relative w-full h-full bg-stone-900/50 backdrop-blur-xl border border-white/10 overflow-hidden rounded-none flex items-center justify-center p-8"
components/PhantomZineDisplay.tsx: className="absolute bottom-2 left-1/2 -translate-x-1/2 bg-stone-900/90 text-white px-3 py-1.5 rounded-none text-[8px] uppercase tracking-widest font-black flex items-center gap-2 backdrop-blur-sm border border-stone-700 hover:bg-stone-800 transition-colors opacity-0 group-hover:opacity-100"
components/DailyTransmission.tsx: className={`absolute inset-0 rounded-none blur-2xl pointer-events-none transition-colors duration-1000 ${isPlaying ? 'bg-stone-400/30' : isTired ? 'bg-red-400/20' : 'bg-stone-400/10'}`}
components/DailyTransmission.tsx: className={`relative z-10 flex items-center gap-3 px-8 py-3 bg-white/70 dark:bg-stone-900/70 backdrop-blur-3xl border border-black/5 rounded-none group transition-all ${isPlaying ? 'ring-2 ring-stone-500/40' : isTired ? 'ring-2 ring-red-500/20' : ''}`}
components/DailyTransmission.tsx: <div className={`w-2 h-2 rounded-none transition-all duration-500 ${isPlaying ? 'bg-stone-500 animate-pulse scale-150' : activeEdict ? 'bg-stone-400' : 'bg-stone-300'}`} />
components/ThreadGraph.tsx: <div className="relative w-full h-[400px] md:h-[500px] bg-stone-900 rounded-none overflow-hidden border border-stone-800 p-8">
components/ThreadGraph.tsx: <div className="w-10 h-10 md:w-12 md:h-12 rounded-none bg-black border border-stone-700 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 z-10 relative"style={{ borderColor: node.type === 'motif' ? accentColor : undefined }}>
components/ThreadGraph.tsx: <div className="absolute inset-0 rounded-none animate-ping opacity-20"style={{ backgroundColor: accentColor }} />
components/ThreadGraph.tsx: <span className="font-mono text-[8px] md:text-[9px] uppercase tracking-widest text-stone-400 group-hover:text-white transition-colors bg-black/50 px-2 py-1 rounded-none backdrop-blur-sm">
components/ZineComments.tsx: <div className="w-full max-w-2xl mx-auto bg-white dark:bg-[#0A0A0A] border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden flex flex-col h-[600px] max-h-[80vh]">
components/ZineComments.tsx: <div className="w-8 h-8 rounded-none bg-stone-200 dark:bg-stone-800 flex items-center justify-center flex-shrink-0">
components/ZineComments.tsx: className="w-full bg-stone-50 dark:bg-[#111] border border-stone-200 dark:border-stone-800 rounded-none py-3 pl-4 pr-12 font-serif text-sm md:text-base focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 dark:focus:border-stone-500 transition-colors resize-none h-24"
components/ZineComments.tsx: className="absolute bottom-3 right-3 p-2 bg-stone-900 dark:bg-white text-white dark:text-black rounded-none hover:bg-stone-500 dark:hover:bg-stone-500 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
components/ZineComments.tsx: <div className="text-center py-4 bg-stone-50 dark:bg-[#111] border border-stone-200 dark:border-stone-800 rounded-none">
components/UseCasesCarousel.tsx: <div className="w-full bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none p-8 md:p-12 relative overflow-hidden">
components/UseCasesCarousel.tsx: <div className="p-3 bg-stone-50 dark:bg-stone-950 rounded-none text-nous-accent">
components/UseCasesCarousel.tsx: <button onClick={prev} className="p-2 border border-stone-100 dark:border-stone-800 rounded-none text-stone-300 hover:text-nous-text transition-all"><ChevronLeft size={16} /></button>
components/UseCasesCarousel.tsx: <button onClick={next} className="p-2 border border-stone-100 dark:border-stone-800 rounded-none text-stone-300 hover:text-nous-text transition-all"><ChevronRight size={16} /></button>
components/UseCasesCarousel.tsx: <div key={i} className={`w-1.5 h-1.5 rounded-none transition-all ${i === index ? 'bg-nous-accent w-4' : 'bg-stone-200'}`} />
components/TrajectoryExpansion.tsx: <button onClick={onClose} className="fixed top-6 right-6 z-50 p-4 bg-black text-white dark:bg-white dark:text-black rounded-none hover:scale-105 transition-transform">
components/TrajectoryExpansion.tsx: <div className="w-full h-full relative overflow-hidden bg-stone-200 dark:bg-stone-900 rounded-none">
components/TrajectoryExpansion.tsx: <span className="font-mono text-[10px] uppercase tracking-widest px-3 py-1 border border-stone-300 dark:border-stone-700 rounded-none text-stone-600 dark:text-stone-400">
components/TrajectoryExpansion.tsx: <div className="p-6 bg-stone-100 dark:bg-stone-900 rounded-none border border-stone-200 dark:border-stone-800">
components/AestheticReferenceCard.tsx: className="w-full flex-1 rounded-none border border-gray-200"
components/AestheticReferenceCard.tsx: <div className="bg-gray-100 p-3 rounded-none border border-t-0 border-gray-200">
components/AestheticReferenceCard.tsx: className="w-full flex-1 rounded-none border border-gray-200"
components/AestheticReferenceCard.tsx: <div className="bg-gray-100 p-3 rounded-none border border-t-0 border-gray-200">
components/AestheticReferenceCard.tsx: className="w-full flex-1 rounded-none border border-gray-200"
components/AestheticReferenceCard.tsx: <div className="bg-gray-100 p-3 rounded-none border border-t-0 border-gray-200">
components/loaders/ViewSkeleton.tsx: <div className="w-1/3 h-10 bg-stone-200 dark:bg-stone-800 rounded-none animate-pulse"/>
components/loaders/ViewSkeleton.tsx: <div className="w-1/4 h-4 bg-stone-100 dark:bg-stone-900 rounded-none animate-pulse"/>
components/loaders/ViewSkeleton.tsx: <div key={i} className="w-full h-64 bg-stone-200 dark:bg-stone-800 rounded-none animate-pulse"/>
components/Loader.tsx: <div className="w-12 h-12 border border-stone-200 rounded-none animate-[spin_4s_linear_infinite]"/>
components/Loader.tsx: <div className="absolute top-0 left-0 w-12 h-12 border-t border-nous-text rounded-none animate-[spin_3s_ease-in-out_infinite]"/>
components/MobileStudio.tsx: <div className="w-2 h-2 rounded-none bg-stone-500 animate-pulse"/>
components/MobileStudio.tsx: <div className="flex items-center justify-start gap-6 px-6 py-3 bg-white/80 backdrop-blur-xl rounded-none border border-white/60 text-stone-800 min-w-max">
components/MobileStudio.tsx: className={`whitespace-nowrap px-3 py-1.5 text-[10px] uppercase tracking-widest rounded-none border transition-colors ${activeTreatmentId === t.id ? 'border-stone-500 text-stone-500 bg-stone-500/10' : 'border-stone-300 dark:border-stone-700 text-stone-500 hover:border-stone-400 dark:hover:border-stone-800 dark:hover:border-stone-300'}`}
components/MobileStudio.tsx: <div className={`w-1.5 h-1.5 rounded-none ${input.trim() ? 'bg-stone-400 ' : 'bg-stone-300'}`}></div>
components/Visualizer.tsx: className={`relative w-full overflow-hidden border border-stone-100 dark:border-stone-800 rounded-none bg-stone-50 dark:bg-stone-900 transition-all duration-700 ${isArtifact ? 'h-full flex items-center justify-center' : ''}`} 
components/Visualizer.tsx: <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 bg-black/60 backdrop-blur-2xl p-1.5 rounded-none border border-white/10 z-40 opacity-0 group-hover/visualizer:opacity-100 transition-all">
components/Visualizer.tsx: <div className="flex bg-white/10 px-3 py-1 rounded-none gap-2 border-r border-white/10 pr-4 mr-1">
components/Visualizer.tsx: className={`w-6 h-6 rounded-none font-sans text-[8px] font-black transition-all ${!variants[i] ? 'opacity-10' : selectedIdx === i ? 'bg-white text-black' : 'text-white/40 hover:text-white'}`}
components/GlossaryTooltip.tsx: className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-3 bg-stone-900 dark:bg-stone-800 text-stone-100 rounded-none border border-stone-700 dark:border-stone-600 text-left pointer-events-none"
components/DarkroomView.tsx: <div className="w-2 h-2 rounded-none bg-stone-500 animate-pulse"/>
components/DarkroomView.tsx: className="absolute top-2 left-2 p-1 bg-black/50 text-[#F2F1ED]/50 hover:text-[#F2F1ED] opacity-0 group-hover:opacity-100 transition-opacity rounded-none"
components/ObsidianMirror.tsx: <div className="flex items-center gap-2 px-3 py-0.5 bg-indigo-500/10 border border-indigo-500/20 rounded-none">
components/ObsidianMirror.tsx: <div className="p-6 bg-red-50 dark:bg-red-950/20 rounded-none border border-red-100 dark:border-red-900/30">
components/ObsidianMirror.tsx: <button onClick={fetchOmen} className="px-8 py-3 bg-nous-text dark:bg-white text-white dark:text-black font-sans text-[10px] uppercase tracking-[0.5em] font-black rounded-none active:scale-95 transition-all flex items-center gap-3">
components/ObsidianMirror.tsx: <div className="w-48 h-48 md:w-64 md:h-64 rounded-none overflow-hidden border border-stone-200 dark:border-stone-800 relative bg-black group">
components/ObsidianMirror.tsx: className="px-6 py-4 bg-stone-100/50 dark:bg-stone-900/50 border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden"
components/ObsidianMirror.tsx: <button onClick={fetchOmen} className="p-4 rounded-none border border-stone-100 dark:border-stone-800 text-stone-400 hover:text-nous-text transition-all active:rotate-180"><RefreshCw size={14} /></button>
components/ObsidianMirror.tsx: className={`p-4 rounded-none border transition-all ${showLogic ? 'bg-nous-text text-white border-nous-text dark:bg-white dark:text-black' : 'border-stone-100 dark:border-stone-800 text-stone-400 hover:text-nous-text'}`}
components/ObsidianMirror.tsx: <button onClick={handleArchiveOmen} disabled={isArchived || isArchiving} className={`px-8 py-2 rounded-none font-sans text-[8px] uppercase tracking-[0.4em] font-black transition-all flex items-center gap-3 ${isArchived ? 'bg-stone-50 text-stone-600 border-stone-100 ' : 'bg-nous-text dark:bg-white text-white dark:text-black active:scale-95'}`}>
components/ObsidianMirror.tsx: className="w-full flex items-center justify-between p-4 md:p-5 bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 rounded-none group hover:border-nous-text dark:hover:border-white transition-all relative overflow-hidden"
components/ObsidianMirror.tsx: <div className="w-10 h-10 bg-black text-white rounded-none flex items-center justify-center">
components/ArchetypeMap.tsx: <div className="p-4 bg-stone-100 rounded-none">
components/PublicProfileModal.tsx: <button disabled className="px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 border border-stone-200 dark:border-stone-800 text-stone-500">
components/PublicProfileModal.tsx: <button onClick={handleConnectAction} className="px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 bg-stone-100 dark:bg-stone-900 text-stone-500 border border-stone-200 dark:border-stone-800 hover:text-red-500 hover:border-red-500/30"title="Disconnect">
components/PublicProfileModal.tsx: <button onClick={handleConnectAction} className="px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 bg-stone-100 dark:bg-stone-900 text-stone-400 border border-stone-200 dark:border-stone-800 hover:text-red-500 hover:border-red-500/30"title="Cancel Request">
components/PublicProfileModal.tsx: <button onClick={handleConnectAction} className="px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 bg-stone-500 text-white -stone-500/20 hover:bg-stone-600">
components/PublicProfileModal.tsx: <button onClick={handleRejectRequest} className="px-6 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 border border-stone-200 dark:border-stone-800 text-stone-500 hover:text-red-500">
components/PublicProfileModal.tsx: <button onClick={handleConnectAction} className="px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 border border-nous-text dark:border-white text-nous-text dark:text-white hover:bg-nous-text hover:text-white dark:hover:bg-white dark:hover:text-black"title="Add Friend">
components/PublicProfileModal.tsx: <div className="w-24 h-24 rounded-none overflow-hidden border border-stone-200 dark:border-stone-800 mb-6 bg-stone-100 dark:bg-stone-900">
components/PublicProfileModal.tsx: <div className="mt-2 px-3 py-1 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none inline-block">
components/PublicProfileModal.tsx: className={`px-8 py-3 rounded-none font-sans text-[9px] uppercase tracking-widest font-black transition-all flex items-center gap-2 ${isFollowing ? 'bg-stone-100 dark:bg-stone-900 text-stone-500 border border-stone-200 dark:border-stone-800' : 'bg-nous-text dark:bg-white text-white dark:text-black '}`}
components/ThimbleIndex.tsx: <div className="w-8 h-10 border border-[#2A2A2A] rounded-none flex items-end justify-center pb-1 relative overflow-hidden">
components/ThimbleIndex.tsx: <div className="w-1 h-1 bg-[#2A2A2A] rounded-none mb-1"></div>
components/DossierArtifactView.tsx: <div className="p-2 border border-stone-800 rounded-none group-hover:border-stone-800 dark:hover:border-stone-300 group-hover:text-stone-800 dark:hover:text-stone-300 transition-all"><X size={16} /></div>
components/DossierArtifactView.tsx: <button onClick={handleShare} className="flex items-center gap-3 px-6 py-2 bg-stone-900 border border-stone-800 rounded-none font-mono text-[9px] uppercase tracking-widest font-bold text-stone-500 hover:text-stone-500 hover:border-stone-500/50 transition-all">
components/DossierArtifactView.tsx: <button onClick={handleExportPdf} className="p-3 bg-stone-900 border border-stone-800 text-stone-400 hover:text-stone-500 hover:border-stone-500/50 rounded-none transition-all">
components/DossierArtifactView.tsx: <span className="font-mono text-sm text-stone-500 uppercase tracking-widest border border-stone-500/20 bg-stone-500/5 px-3 py-1 rounded-none">{artifact.type || 'Unknown'}</span>
components/DossierArtifactView.tsx: <div className="bg-stone-900 p-1 border border-stone-800 rounded-none relative overflow-hidden group-hover:border-stone-500/30 transition-all duration-500">
components/DossierArtifactView.tsx: <div className="flex-1 bg-stone-900/50 p-8 flex flex-col justify-start text-left border border-stone-800 hover:border-stone-500/30 transition-colors rounded-none relative overflow-hidden">
components/DossierArtifactView.tsx: return <pre className="font-mono text-[10px] text-stone-400 overflow-x-auto p-4 bg-black/50 rounded-none border border-stone-800">{el.content}</pre>;
components/DossierArtifactView.tsx: <div className="p-8 bg-stone-900/30 border border-stone-800 rounded-none space-y-8">
components/DossierArtifactView.tsx: <div key={i} className="w-8 h-8 rounded-none border border-stone-700"style={{ backgroundColor: c.hex }} title={c.name} />
components/DossierArtifactView.tsx: <button onClick={onClose} className="px-12 py-4 border border-stone-800 hover:border-stone-500 text-stone-500 hover:text-stone-500 font-mono text-[9px] uppercase tracking-[0.4em] font-bold rounded-none transition-all">Return to Grid</button>
components/StackView.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-100 rounded-none"
components/StackView.tsx: <button className="flex items-center gap-2 px-4 py-2 bg-stone-100 rounded-none"><Edit2 size={16}/> Edit</button>
components/StackView.tsx: className="flex items-center gap-2 px-4 py-2 bg-red-100 text-red-600 rounded-none"
components/OnboardingModal.tsx: className="w-full max-w-2xl bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 p-12 md:p-16 rounded-none relative overflow-hidden"
components/OnboardingModal.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-800 rounded-none">
components/OnboardingModal.tsx: <button onClick={() => setStep(1)} className="px-12 py-5 bg-nous-text dark:bg-white text-white dark:text-black font-sans text-[10px] uppercase tracking-[0.4em] font-black rounded-none hover:scale-105 transition-transform">
components/OnboardingModal.tsx: <div className={`w-3 h-3 rounded-none ${archetype === arch.id ? 'bg-stone-500' : 'bg-stone-200 dark:bg-stone-800'}`} />
components/OnboardingModal.tsx: className="px-12 py-5 bg-stone-500 text-white font-sans text-[10px] uppercase tracking-[0.4em] font-black rounded-none hover:bg-stone-400 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
components/ArchiveView.tsx: className="flex items-center gap-2 px-6 py-2 bg-stone-500/10 text-stone-600 dark:text-stone-400 border border-stone-500/20 rounded-none font-sans text-[9px] uppercase tracking-widest font-black hover:bg-stone-500 hover:text-white transition-all mb-1"
components/CollabModal.tsx: <div className="bg-[#111] p-8 rounded-none max-w-lg w-full space-y-6 border border-stone-800">
components/CollabModal.tsx: className="flex-1 bg-stone-900/50 border border-stone-800 p-3 font-mono text-sm focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 rounded-none text-stone-300 placeholder:text-stone-700"
components/CollabModal.tsx: <button onClick={handleSearchCollaborators} className="px-4 py-2 bg-stone-500 text-black rounded-none font-mono text-[9px] uppercase font-bold tracking-widest hover:bg-stone-600 transition-colors">Search</button>
components/CollabModal.tsx: <div key={profile.uid} className="flex justify-between items-center p-2 border border-stone-800 rounded-none">
components/CollabModal.tsx: <div key={profile.uid} className="flex justify-between items-center p-2 border border-stone-800 rounded-none">
components/LegalPage.tsx: <div className="p-6 bg-stone-50/50 dark:bg-stone-900/10 border border-stone-100 dark:border-stone-900/20 rounded-none">
components/LegalPage.tsx: <div className="relative w-full max-w-2xl h-[80vh] flex flex-col bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden">
components/PromptOrchestrator.tsx: className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none p-3 text-sm font-mono text-stone-900 dark:text-stone-100 placeholder:text-stone-400 outline-none focus:border-primary dark:focus:border-stone-600 resize-none h-24"
components/PromptOrchestrator.tsx: <div key={p.id || i} className="bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 p-4 rounded-none space-y-3 relative group">
components/PromptOrchestrator.tsx: <div className="bg-stone-50 dark:bg-stone-950 p-2 rounded-none border border-stone-100 dark:border-stone-800">
components/ZineConfiguration.tsx: className={`text-left p-3 border rounded-none transition-colors flex items-center justify-between ${!zineOptions.selectedTreatmentId ? 'border-primary dark:border-white bg-primary/5 dark:bg-white/5' : 'border-stone-200 dark:border-stone-800 hover:border-primary/50 dark:hover:border-white/50'}`}
components/ZineConfiguration.tsx: className={`text-left p-3 border rounded-none transition-colors flex items-center justify-between ${zineOptions.selectedTreatmentId === t.id ? 'border-stone-500 bg-stone-500/5' : 'border-stone-200 dark:border-stone-800 hover:border-stone-800 dark:hover:border-stone-300/50'}`}
components/ZineConfiguration.tsx: <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-4 border border-stone-200 dark:border-stone-800 rounded-none bg-stone-50 dark:bg-stone-900/30">
components/IntrovertaLabel.tsx: className="cursor-pointer w-64 rounded-none-[24px] overflow-hidden border border-stone-200 hover: transition- bg-[#f7f3ee]"
components/LatentConstellation.tsx: <Canvas shadows dpr={[1, 2]}>
components/Pocket.tsx: <div className={`absolute inset-0 bg-stone-500/20 blur-xl rounded-none transition-opacity duration-1000 ${isPlaying ? 'opacity-100' : 'opacity-0'}`} />
components/Pocket.tsx: <button onClick={togglePlay} className="relative z-10 p-5 bg-white dark:bg-stone-800 rounded-none hover:scale-110 active:scale-95 transition-all text-stone-500">
components/Pocket.tsx: <div className="aspect-square rounded-none border border-black/5 dark:border-white/10"style={{ backgroundColor: c.hex }} />
components/Pocket.tsx: <div className="w-full max-w-4xl bg-[#0A0A0A] border border-stone-800 rounded-none overflow-hidden flex flex-col max-h-[90vh]">
components/Pocket.tsx: <div className="flex items-center gap-2 px-3 py-1 bg-stone-500/10 border border-stone-500/20 rounded-none">
components/Pocket.tsx: <div key={i} className="p-6 bg-stone-900/50 border border-stone-800 rounded-none flex flex-col md:flex-row gap-6">
components/Pocket.tsx: <span className={`font-sans text-[8px] uppercase tracking-widest font-black px-2 py-1 rounded-none ${item.category === 'KEYSTONE ASSET' ? 'bg-stone-500 text-black' : item.category === 'VANITY METRIC' ? 'bg-red-500/20 text-red-400' : 'bg-stone-800 text-stone-300'}`}>
components/Pocket.tsx: <section className="p-6 bg-amber-500/5 border border-amber-500/10 rounded-none space-y-2">
components/Pocket.tsx: <button onClick={onClose} className="absolute top-8 right-8 z-50 p-4 bg-black/10 dark:bg-white/10 rounded-none hover:bg-red-500 hover:text-white transition-all">
components/Pocket.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-900/50 rounded-none border border-stone-100 dark:border-stone-800 space-y-4">
components/Pocket.tsx: <div className="p-6 bg-stone-50 dark:bg-stone-900/50 rounded-none border border-stone-100 dark:border-stone-800 space-y-4">
components/Pocket.tsx: <span key={i} className="px-2 py-1 bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 font-mono text-[8px] rounded-none border border-stone-100 dark:border-stone-800">
components/Pocket.tsx: <div key={i} className="group relative aspect-square bg-stone-50 dark:bg-stone-950 rounded-none overflow-hidden border border-stone-100 dark:border-stone-800">
components/Pocket.tsx: className="w-full py-2 bg-stone-500 text-white font-sans text-[8px] uppercase tracking-widest font-black rounded-none hover:scale-105 active:scale-95 transition-all"
components/Pocket.tsx: <div className="p-4 bg-black/40 rounded-none">
components/Pocket.tsx: <div className="p-4 bg-black/40 rounded-none">
components/Pocket.tsx: <span key={i} className="px-3 py-1.5 bg-black/40 text-stone-300 font-mono text-[9px] rounded-none border border-white/5">
components/Pocket.tsx: <input value={title} onChange={e => setTitle(e.target.value)} className="w-full bg-stone-50 dark:bg-stone-900 p-3 font-serif italic text-xl focus:outline-none rounded-none border-b border-stone-200 dark:border-stone-800"placeholder="Shard Title..."/>
components/Pocket.tsx: <textarea value={description} onChange={e => setDescription(e.target.value)} className="w-full h-24 bg-stone-50 dark:bg-stone-900 p-3 font-serif italic text-sm focus:outline-none rounded-none border-b border-stone-200 dark:border-stone-800"placeholder="Aesthetic description..."/>
components/Pocket.tsx: <input value={price} onChange={e => setPrice(e.target.value)} className="w-full bg-stone-50 dark:bg-stone-900 p-3 font-mono text-sm focus:outline-none rounded-none border-b border-stone-200 dark:border-stone-800"placeholder="$0.00"/>
components/Pocket.tsx: <div className="flex items-center gap-2 text-stone-500 font-mono text-sm bg-stone-500/5 px-3 py-2 rounded-none w-fit border border-stone-500/10">
components/Pocket.tsx: className="w-full h-48 bg-stone-50 dark:bg-stone-900 p-4 font-serif italic text-lg focus:outline-none rounded-none border-b border-stone-200 dark:border-stone-800"
components/Pocket.tsx: className="w-full py-4 bg-stone-900 dark:bg-white text-white dark:text-black rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 hover:scale-[1.02] transition-transform"
components/Pocket.tsx: className="py-4 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors"
components/Pocket.tsx: className="py-4 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors disabled:opacity-50"
components/Pocket.tsx: <button className="w-full py-4 border border-stone-200 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors">
components/Pocket.tsx: window.dispatchEvent(new CustomEvent('mimi:registry_alert', { detail: { message:"Search Grounded.", icon: <Search size={14} /> } }));
components/Pocket.tsx: className="w-full bg-stone-100 dark:bg-stone-800 border-none py-2 pl-10 pr-10 font-sans text-sm focus:outline-none focus:ring-1 focus:ring-stone-500 transition-all rounded-none"
components/Pocket.tsx: className="flex items-center gap-2 px-4 py-2 bg-stone-500 text-white rounded-none font-sans text-[9px] uppercase tracking-widest font-black hover:bg-stone-600 transition-all"
components/Pocket.tsx: <div className="flex items-center gap-2 px-3 py-1.5 bg-stone-100 dark:bg-stone-800 rounded-none border border-black/5">
components/Pocket.tsx: <div className="w-full max-w-md bg-white dark:bg-stone-900 p-8 rounded-none space-y-8 border border-stone-200 dark:border-stone-800">
components/Pocket.tsx: <button onClick={() => { fileInputRef.current?.click(); setShowInjectModal(false); }} className="w-full py-4 bg-stone-50 dark:bg-stone-800 hover:bg-stone-500 hover:text-white transition-all rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 group">
components/Pocket.tsx: <button onClick={() => { window.dispatchEvent(new CustomEvent('mimi:change_view', { detail: 'archival' })); setShowInjectModal(false); }} className="w-full py-4 bg-stone-50 dark:bg-stone-800 hover:bg-stone-500 hover:text-white transition-all rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-3 group">
components/Pocket.tsx: className="mb-12 p-6 bg-stone-500/5 border border-stone-500/20 rounded-none overflow-hidden"
components/Pocket.tsx: <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }} className="mb-24 p-10 md:p-20 bg-stone-950 text-white border border-stone-500/30 rounded-none relative overflow-hidden group">
components/Pocket.tsx: <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }} className="mb-24 p-10 md:p-20 bg-white dark:bg-stone-900 border-2 border-stone-500/20 rounded-none relative overflow-hidden group">
components/Pocket.tsx: <motion.div key={item.id} layout onClick={() => handleItemClick(item)} className={`group relative bg-white dark:bg-stone-900 border p-1 rounded-none flex flex-col transition-all cursor-pointer ${isSelectionMode && selectedIds.has(item.id) ? 'border-stone-500 ring-2 ring-stone-500/20' : 'border-stone-100 dark:border-stone-800'}`}>
components/Pocket.tsx: <div className={`w-6 h-6 rounded-none border-2 flex items-center justify-center transition-all ${selectedIds.has(item.id) ? 'bg-stone-500 border-stone-400' : 'bg-white/20 border-white/60'}`}>
components/Pocket.tsx: className="bg-stone-900/95 backdrop-blur-3xl p-3 rounded-none flex items-center justify-between border border-white/10 gap-2"
components/Pocket.tsx: className="flex flex-col items-center gap-1 px-4 py-2 rounded-none text-stone-400 hover:text-white hover:bg-white/5 transition-all disabled:opacity-30"
components/Pocket.tsx: className="flex flex-col items-center gap-1 px-4 py-2 rounded-none text-stone-400 hover:text-indigo-400 hover:bg-indigo-500/10 transition-all disabled:opacity-30"
components/Pocket.tsx: className="flex flex-col items-center gap-1 px-4 py-2 rounded-none text-stone-400 hover:text-purple-400 hover:bg-purple-500/10 transition-all disabled:opacity-30"
components/Pocket.tsx: className="flex flex-col items-center gap-1 px-4 py-2 rounded-none text-stone-400 hover:text-stone-400 hover:bg-stone-500/10 transition-all disabled:opacity-30"
components/Pocket.tsx: className="flex flex-col items-center gap-1 px-4 py-2 rounded-none text-stone-400 hover:text-stone-400 hover:bg-stone-500/10 transition-all disabled:opacity-30"
components/Pocket.tsx: <button onClick={() => { setIsSelectionMode(!isSelectionMode); if(isSelectionMode) setSelectedIds(new Set()); }} className={`p-2 rounded-none transition-colors ${isSelectionMode ? 'bg-red-500 text-white' : 'bg-white/10 text-stone-400 hover:bg-white/20'}`}>
components/Pocket.tsx: <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} className="bg-white dark:bg-stone-900 p-10 rounded-none border border-stone-200 dark:border-stone-800 max-w-sm w-full space-y-8">
components/Pocket.tsx: <button onClick={handleCreateFolder} className="flex-[2] py-4 bg-nous-text dark:bg-white text-white dark:text-black font-sans text-[8px] uppercase tracking-widest font-black rounded-none hover:scale-105 transition-transform">Create Stack</button>
components/RegistryAlert.tsx: className={`pointer-events-auto min-w-[300px] p-4 rounded-none border flex items-center gap-4 backdrop-blur-xl ${
components/RegistryAlert.tsx: className="p-1 hover:bg-white/10 rounded-none transition-colors"
components/DeskMess.tsx: className="absolute bottom-2 right-10 w-16 h-16 bg-[#fdf5c9] rounded-none cursor-grab active:cursor-grabbing z-10"
components/DeskMess.tsx: className="absolute bottom-8 right-2 w-24 h-16 bg-[#fffdf9] border border-[#ececec] rounded-none cursor-grab active:cursor-grabbing z-20"
components/DeskMess.tsx: className="absolute bottom-4 right-6 w-20 h-20 bg-[#ff8fab] rounded-none cursor-grab active:cursor-grabbing z-30"
components/DeskMess.tsx: className="absolute bottom-0 right-0 w-28 h-20 bg-[#e8f3f1] border border-[#ececec] rounded-none cursor-grab active:cursor-grabbing z-40"
components/AestheticLineageChart.tsx: <div className="h-64 w-full bg-stone-900/50 p-4 rounded-none">
components/CommandDrawer.tsx: className={`px-6 py-2 rounded-none font-sans text-xs uppercase tracking-[0.2em] transition-all duration-300 ${activeTab === 'image' ? 'bg-white text-stone-900' : 'bg-stone-900 text-stone-500 hover:bg-stone-800'}`}
components/CommandDrawer.tsx: className={`px-6 py-2 rounded-none font-sans text-xs uppercase tracking-[0.2em] transition-all duration-300 ${activeTab === 'search' ? 'bg-white text-stone-900' : 'bg-stone-900 text-stone-500 hover:bg-stone-800'}`}
components/CommandDrawer.tsx: className="absolute right-4 top-4 bg-stone-600 text-white p-3 rounded-none hover:bg-stone-500 transition-colors"
components/ValidationLegend.tsx: <div className="bg-white/95 dark:bg-stone-900/95 backdrop-blur-2xl border border-black/5 dark:border-white/10 p-5 rounded-none flex flex-col gap-4 overflow-hidden relative group/legend">
components/ValidationLegend.tsx: <div className="w-1 h-1 bg-amber-500 rounded-none animate-pulse"/>
components/ValidationLegend.tsx: <div className="w-2 h-2 rounded-none bg-[#78716c]"/>
components/ValidationLegend.tsx: <div className="w-2 h-2 rounded-none bg-[#EF4444]"/>
components/MobileNavigation.tsx: className="absolute top-0 w-8 h-0.5 bg-stone-800 rounded-none"
components/TheWard.tsx: className="mb-8 p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 rounded-none flex items-start gap-4"
components/TheWard.tsx: <div className="bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none p-8 space-y-6 flex flex-col">
components/TheWard.tsx: <button key={node.id} onClick={() => navigateToScry(node.label)} className="w-full p-4 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none text-left hover:border-stone-800 dark:hover:border-stone-300 transition-colors">
components/TheWard.tsx: <div key={n.id} className="p-4 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-none">
components/ArchivalView.tsx: <div className="w-full max-w-4xl bg-white dark:bg-stone-900 rounded-none flex flex-col max-h-[90vh] overflow-hidden border border-stone-200 dark:border-stone-800">
components/ArchivalView.tsx: className="h-64 border-2 border-dashed border-stone-200 dark:border-stone-800 rounded-none flex flex-col items-center justify-center gap-4 cursor-pointer hover:border-stone-800 dark:hover:border-stone-300 hover:bg-stone-500/5 transition-all group"
components/ArchivalView.tsx: <button key={zine.id} onClick={() => setSelectedZine(zine)} className="p-4 bg-stone-50 dark:bg-stone-800/50 border border-stone-100 dark:border-stone-800 rounded-none hover:border-stone-500 transition-all text-left flex gap-4 group">
components/ArchivalView.tsx: <div className="w-16 h-16 bg-stone-200 dark:bg-stone-900 shrink-0 overflow-hidden rounded-none">
components/ArchivalView.tsx: <div key={i} className="group relative aspect-square bg-stone-100 dark:bg-stone-950 rounded-none overflow-hidden border border-stone-200 dark:border-stone-800">
components/ArchivalView.tsx: className="w-full py-2 bg-stone-500 text-white font-sans text-[8px] uppercase tracking-widest font-black rounded-none hover:scale-105 active:scale-95 transition-all"
components/ArchivalView.tsx: className="w-full p-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-800 rounded-none font-mono text-xs focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 transition-all"
components/ArchivalView.tsx: className="w-full py-4 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] uppercase tracking-[0.4em] font-black hover:scale-[1.02] active:scale-95 transition-all disabled:opacity-30"
components/ArchivalView.tsx: className="flex items-center gap-2 px-6 py-2 bg-stone-500/10 text-stone-600 dark:text-stone-400 border border-stone-500/20 rounded-none font-sans text-[9px] uppercase tracking-widest font-black hover:bg-stone-500 hover:text-white transition-all mb-1"
components/ZineLayoutEditor.tsx: <div className="absolute top-4 left-4 right-4 z-50 flex justify-between items-center bg-black/50 backdrop-blur-md rounded-none px-4 py-2 md:px-6 md:py-3 opacity-0 hover:opacity-100 transition-opacity duration-300 border border-white/10">
components/ZineLayoutEditor.tsx: <button onClick={onCancel} className="p-2 md:p-3 text-white/70 hover:text-red-500 rounded-none transition-all"><X size={18} /></button>
components/ZineLayoutEditor.tsx: className="px-4 py-1.5 md:py-3 border border-white/20 text-white/70 hover:text-white font-sans text-[7px] md:text-[9px] uppercase tracking-widest font-black rounded-none flex items-center gap-2 transition-all hover:bg-white/10"
components/ZineLayoutEditor.tsx: <div className="absolute top-full right-0 mt-2 bg-black/80 backdrop-blur-xl border border-white/20 rounded-none flex flex-col w-40 z-50 overflow-hidden">
components/ZineLayoutEditor.tsx: <button onClick={handleCommit} className={`px-4 md:px-8 py-1.5 md:py-3 ${isSaving ? 'bg-stone-500 text-white' : 'bg-white text-black'} font-sans text-[7px] md:text-[10px] uppercase tracking-[0.3em] font-black rounded-none flex items-center gap-1.5 md:gap-3 shrink-0 hover:scale-105 active:scale-95 transition-all`}>
components/ZineLayoutEditor.tsx: className="absolute bottom-2 left-1/2 -translate-x-1/2 bg-stone-900/90 text-white px-3 py-1.5 rounded-none text-[8px] uppercase tracking-widest font-black flex items-center gap-2 backdrop-blur-sm border border-stone-700 hover:bg-stone-800 transition-colors"
components/ZineLayoutEditor.tsx: <a href={el.link} target="_blank"onClick={e => e.stopPropagation()} className="absolute -top-6 left-1/2 -translate-x-1/2 opacity-0 group-hover/text:opacity-100 transition-opacity bg-black text-white px-2 py-1 rounded-none flex items-center gap-1.5 whitespace-nowrap z-[100]">
components/ZineLayoutEditor.tsx: {selectedId === el.id && <div className="absolute inset-0 pointer-events-none"><div onMouseDown={(e) => { e.stopPropagation(); setDragStart({x: e.clientX, y: e.clientY}); setIsResizing(true); setInitialStyle({...el.style}); }} className="pointer-events-auto absolute -bottom-3 -right-3 w-6 h-6 bg-white dark:bg-stone-800 rounded-none cursor-se-resize flex items-center justify-center border border-black/10 z-[60]"><Maximize size={12} /></div></div>}
components/ZineLayoutEditor.tsx: <motion.div initial={false} animate={{ y: isMobile ? (drawerOpen ? 0 : '100%') : 0, x: isMobile ? 0 : (selectedId ? 0 : 480) }} className={`fixed bottom-0 left-0 right-0 lg:absolute lg:right-0 lg:top-0 lg:bottom-0 lg:flex lg:w-[480px] bg-white/90 dark:bg-stone-900/90 backdrop-blur-xl border-t lg:border-t-0 lg:border-l border-stone-200/50 dark:border-white/10 flex-col pt-4 lg:pt-24 z-[2050] transition-all duration-500 ${isMobile ? 'h-[45vh] rounded-none overflow-hidden' : 'h-full'}`}>
components/ZineLayoutEditor.tsx: <div className="flex lg:hidden justify-center pb-2"onClick={() => setDrawerOpen(false)}><div className="w-12 h-1 bg-stone-200 dark:bg-stone-800 rounded-none"/></div>
components/ZineLayoutEditor.tsx: <button onClick={() => addElement('text', 'A new thought...')} className="flex flex-col items-center justify-center gap-2 aspect-square border border-stone-50 dark:border-stone-800 rounded-none bg-stone-50/50 dark:bg-stone-950/50 active:scale-95"><FontIcon size={18} className="text-stone-300"/><span className="text-[6px] md:text-[8px] font-black uppercase tracking-[0.2em] text-stone-400">Type</span></button> 
components/ZineLayoutEditor.tsx: <button onClick={() => addElement('box', '')} className="flex flex-col items-center justify-center gap-2 aspect-square border border-stone-50 dark:border-stone-800 rounded-none bg-stone-50/50 dark:bg-stone-950/50 active:scale-95"><Box size={18} className="text-stone-300"/><span className="text-[6px] md:text-[8px] font-black uppercase tracking-[0.2em] text-stone-400">Void</span></button> 
components/ZineLayoutEditor.tsx: <button onClick={() => imageUploadRef.current?.click()} className="flex flex-col items-center justify-center gap-2 aspect-square border border-stone-50 dark:border-stone-800 rounded-none bg-stone-50/50 dark:bg-stone-950/50 active:scale-95"><ImageIcon size={18} className="text-stone-300"/><span className="text-[6px] md:text-[8px] font-black uppercase tracking-[0.2em] text-stone-400">Image</span></button> 
components/ZineLayoutEditor.tsx: <button onClick={() => addElement('text', 'THREAD NOTE\n──────────────\nThis artifact echoes a recurring theme in your archive.')} className="flex flex-col items-center justify-center gap-2 aspect-square border border-stone-50 dark:border-stone-800 rounded-none bg-stone-50/50 dark:bg-stone-950/50 active:scale-95"><Sparkles size={18} className="text-stone-300"/><span className="text-[6px] md:text-[8px] font-black uppercase tracking-[0.2em] text-stone-400">Thread</span></button> 
components/ZineLayoutEditor.tsx: <button onClick={handleGenerateSignals} disabled={isGeneratingSignals} className="flex flex-col items-center justify-center gap-2 aspect-square border border-stone-500/20 rounded-none bg-stone-500/5 active:scale-95 group">
components/ZineLayoutEditor.tsx: <div className="bg-stone-500/5 border border-stone-500/20 p-4 rounded-none space-y-3">
components/ZineLayoutEditor.tsx: className="w-full py-2 bg-stone-500 text-white rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-600 transition-colors"
components/ZineLayoutEditor.tsx: className="w-full bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 p-3 font-serif italic text-sm focus:outline-none focus:border-stone-800 dark:focus:border-stone-300 rounded-none resize-none h-24"
components/ZineLayoutEditor.tsx: <div className="space-y-3"><span className="font-sans text-[7px] uppercase tracking-widest font-black text-stone-400">Font Identity</span><div className="grid gap-1.5">{dynamicFontFamilies.map(f => <button key={f.id} onClick={() => updateStyle({ fontFamily: f.css })} className={`text-left p-3 lg:p-4 border rounded-none transition-all ${selectedElement.style.fontFamily === f.css ? 'bg-nous-text text-white dark:bg-white dark:text-black border-transparent' : 'border-stone-100 dark:border-stone-800 text-stone-400'}`} style={{ fontFamily: f.css }}>{f.label}</button>)}</div></div>
components/ZineLayoutEditor.tsx: <div className="space-y-3"><span className="font-sans text-[7px] uppercase tracking-widest font-black text-stone-400">Alignment Protocol</span><div className="flex gap-2"><button onClick={() => updateStyle({ textAlign: 'left' })} className={`flex-1 py-2.5 border rounded-none transition-all ${selectedElement.style.textAlign === 'left' ? 'bg-nous-text text-white border-transparent' : 'border-stone-100 text-stone-400'}`}><AlignLeft size={16} className="mx-auto"/></button><button onClick={() => updateStyle({ textAlign: 'center' })} className={`flex-1 py-2.5 border rounded-none transition-all ${selectedElement.style.textAlign === 'center' ? 'bg-nous-text text-white border-transparent' : 'border-stone-100 text-stone-400'}`}><AlignCenter size={16} className="mx-auto"/></button><button onClick={() => updateStyle({ textAlign: 'right' })} className={`flex-1 py-2.5 border rounded-none transition-all ${selectedElement.style.textAlign === 'right' ? 'bg-nous-text text-white border-transparent' : 'border-stone-100 text-stone-400'}`}><AlignRight size={16} className="mx-auto"/></button></div></div>
components/ZineLayoutEditor.tsx: <div className="space-y-3"><span className="font-sans text-[7px] uppercase tracking-widest font-black text-stone-400">Chromatic Manifold</span><div className="grid grid-cols-6 gap-3">{COLORS.map(c => <button key={c.id} onClick={() => updateStyle({ color: c.hex })} className={`aspect-square rounded-none border-2 transition-all ${selectedElement.style.color === c.hex ? 'border-stone-500 scale-110 ' : 'border-transparent'}`} style={{ backgroundColor: c.hex }} />)}</div></div>
components/ZineLayoutEditor.tsx: className={`flex-1 py-2 border rounded-none font-sans text-[6px] uppercase font-black transition-all ${selectedElement.style.borderStyle === s ? 'bg-nous-text dark:bg-white text-white dark:text-black border-transparent' : 'border-stone-200 dark:border-stone-800 text-stone-400'}`}
components/ZineLayoutEditor.tsx: <button onClick={() => updateStyle({ borderColor: 'transparent' })} className="w-5 h-5 rounded-none border border-stone-200 dark:border-stone-700 flex items-center justify-center text-[6px] text-stone-400">Ø</button>
components/ZineLayoutEditor.tsx: <button key={`b-${c.id}`} onClick={() => updateStyle({ borderColor: c.hex })} className="w-5 h-5 rounded-none border border-stone-200 dark:border-stone-700"style={{ backgroundColor: c.hex }} />
components/ZineLayoutEditor.tsx: <button onClick={() => updateStyle({ backgroundColor: 'transparent' })} className="w-5 h-5 rounded-none border border-stone-200 dark:border-stone-700 flex items-center justify-center text-[6px] text-stone-400">Ø</button>
components/ZineLayoutEditor.tsx: <button key={`bg-${c.id}`} onClick={() => updateStyle({ backgroundColor: c.hex })} className="w-5 h-5 rounded-none border border-stone-200 dark:border-stone-700"style={{ backgroundColor: c.hex }} />
components/ZineLayoutEditor.tsx: className="py-2 border border-stone-200 dark:border-stone-800 rounded-none text-[8px] font-sans font-black hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors"
components/ZineLayoutEditor.tsx: className="w-full py-3 border border-stone-500/30 bg-stone-500/5 text-stone-500 rounded-none font-sans text-[8px] uppercase tracking-widest font-black hover:bg-stone-500/10 transition-all flex items-center justify-center gap-2"
components/ZineLayoutEditor.tsx: <div className="p-4 bg-stone-50 dark:bg-stone-800 rounded-none border border-stone-100 dark:border-stone-700 space-y-3">
components/ZineLayoutEditor.tsx: className="w-full py-2 bg-stone-200 dark:bg-stone-700 rounded-none font-sans text-[7px] uppercase tracking-widest font-black hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors"
components/ZineLayoutEditor.tsx: <div className="space-y-3"><span className="font-sans text-[7px] uppercase tracking-widest font-black text-stone-400">Optical Filters</span><div className="grid grid-cols-3 gap-2">{IMAGE_FILTERS.map(f => <button key={f.name} onClick={() => updateStyle({ filter: f.value })} className={`p-2.5 lg:p-3 border rounded-none transition-all text-center ${selectedElement.style.filter === f.value ? 'bg-nous-text text-white dark:bg-white dark:text-black border-transparent' : 'border-stone-100 dark:border-stone-800 text-stone-400'}`}><span className="text-[6px] lg:text-[8px] uppercase font-black block">{f.name}</span></button>)}</div></div>
components/ZineLayoutEditor.tsx: {sovereignTreatments.length > 0 && <div className="space-y-3"><span className="font-sans text-[7px] uppercase tracking-widest font-black text-stone-500">Darkroom Logic Presets</span><div className="grid gap-2">{sovereignTreatments.map(t => <button key={t.id} onClick={() => updateStyle({ filter: t.instruction })} className="text-left p-3 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-none hover:border-stone-800 dark:hover:border-stone-300 transition-all flex justify-between items-center group"><span className="font-serif italic text-xs text-stone-600 dark:text-stone-300">{t.name}</span><Droplet size={10} className="text-stone-500 opacity-0 group-hover:opacity-100"/></button>)}</div></div>}
components/ArchiveCloudNebula.tsx: <div className="flex items-center gap-0 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden">
components/ArchiveCloudNebula.tsx: <div className="w-16 h-16 rounded-none overflow-hidden mb-4 bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-800">
components/ArchiveCloudNebula.tsx: {isCloud && <div className="w-1.5 h-1.5 rounded-none bg-stone-500 animate-pulse mb-1"/>}
components/ArchiveCloudNebula.tsx: className="col-span-1 md:col-span-6 lg:col-span-4 bg-[#F4F1E8] dark:bg-stone-900 border border-stone-300 dark:border-stone-700 rounded-none flex flex-col p-6 hover: transition-"
components/ArchiveCloudNebula.tsx: <span className="text-[9px] uppercase tracking-widest font-mono text-stone-500 border border-stone-300 dark:border-stone-700 px-2 py-1 rounded-none"># {zine.tone}</span>
components/ArchiveCloudNebula.tsx: {isCloud && <div className="w-1.5 h-1.5 rounded-none bg-stone-500 animate-pulse"/>}
components/ArchiveCloudNebula.tsx: {isCloud && <div className="w-1.5 h-1.5 rounded-none bg-stone-500 animate-pulse"/>}
components/ArchiveCloudNebula.tsx: className="col-span-1 md:col-span-6 lg:col-span-4 bg-stone-800 text-stone-200 p-8 flex flex-col justify-between rounded-none hover: transition-"
components/ArchiveCloudNebula.tsx: <span className="w-2 h-2 rounded-none bg-stone-400 animate-pulse"></span>
components/ArchiveCloudNebula.tsx: className="w-full py-3 bg-stone-700 text-white font-mono text-[9px] uppercase tracking-widest hover:bg-stone-600 transition-colors rounded-none flex items-center justify-center gap-2"
components/ProsceniumView.tsx: <div className={`inline-flex items-center gap-2 px-4 py-1 rounded-none border font-sans text-[9px] uppercase tracking-[0.3em] font-black ${isOfflineMode ? 'border-stone-500/30 text-stone-500' : 'border-stone-500/30 text-stone-500'}`}>
components/ProsceniumView.tsx: <div className={`w-1.5 h-1.5 rounded-none ${t.type === 'signal' ? 'bg-stone-500' : t.type === 'manifest' ? 'bg-indigo-500' : 'bg-stone-400'}`} />
components/ProsceniumView.tsx: <div className={`w-2 h-2 rounded-none ${selectedArtifact.type === 'signal' ? 'bg-stone-500' : 'bg-indigo-500'}`} />
components/ProsceniumView.tsx: className="flex-1 bg-white/5 border border-white/10 rounded-none px-4 py-3 font-serif italic text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-stone-800 dark:focus:border-stone-300/50 transition-colors"
components/EntropyDensityMatrix.tsx: className={`relative w-full aspect-square max-w-[300px] bg-stone-50 dark:bg-[#050505] border border-stone-200 dark:border-stone-800 rounded-none overflow-hidden ${readOnly ? '' : 'cursor-crosshair touch-none'}`}
components/EntropyDensityMatrix.tsx: className="absolute w-16 h-16 -ml-8 -mb-8 rounded-none bg-stone-500/5 border border-stone-500/20 pointer-events-none flex items-center justify-center"
components/EntropyDensityMatrix.tsx: <div className="w-1 h-1 rounded-none bg-stone-500/50"></div>
components/EntropyDensityMatrix.tsx: className="absolute w-4 h-4 -ml-2 -mb-2 rounded-none bg-[var(--hover-accent)] pointer-events-none z-10"
components/EntropyDensityMatrix.tsx: className="flex items-center gap-2 px-4 py-2 bg-[var(--hover-accent)] text-white text-[10px] font-bold uppercase tracking-widest rounded-none hover:opacity-90 transition-opacity mt-2"
components/ThimbleDashboard.tsx: <div className="w-6 h-8 border border-archival-text rounded-none flex items-end justify-center pb-1 relative overflow-hidden">
components/ThimbleDashboard.tsx: <div className="w-1 h-1 bg-archival-text rounded-none mb-1"></div>
components/ThimbleDashboard.tsx: <button onClick={(e) => { e.stopPropagation(); removeMedia(idx); }} className="absolute top-1 right-1 bg-white/90 p-0.5 rounded-none opacity-0 group-hover:opacity-100 transition-opacity">
components/ThimbleDashboard.tsx: <div className="w-24 h-24 rounded-none border border-archival-border flex items-center justify-center bg-white/30">
components/ZineCard.tsx: className={`relative cursor-pointer transition-all duration-[0.8s] w-full ${isSocialFloor ? 'max-w-5xl' : isMasonry ? 'max-w-none' : 'max-w-[420px]'} mx-auto rounded-none group overflow-hidden`}
components/ZineCard.tsx: <button onClick={(e) => { e.stopPropagation(); setShowEditModal(true); }} className="p-2 rounded-none backdrop-blur-md bg-white/10 text-white hover:bg-white hover:text-black"title="Edit">
components/ZineCard.tsx: <button onClick={(e) => { e.stopPropagation(); /* TODO: Implement Mix */ }} className="p-2 rounded-none backdrop-blur-md bg-white/10 text-white hover:bg-white hover:text-black"title="Mix">
components/ZineCard.tsx: <button onClick={(e) => { e.stopPropagation(); handleRegenerate(); }} className={`p-2 rounded-none backdrop-blur-md ${isRegenerating ? 'bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900' : 'bg-white/10 text-white hover:bg-white hover:text-black'} `} title="Regenerate">
components/ZineCard.tsx: className={`p-2 rounded-none transition-all backdrop-blur-md ${zine.isPublic ? 'bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900' : 'bg-white/10 text-white hover:bg-white hover:text-black'}`}
components/ZineCard.tsx: className={`p-2 rounded-none transition-all backdrop-blur-md ${isArchived ? 'bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900' : 'bg-white/10 text-white hover:bg-white hover:text-black'}`}
components/ZineCard.tsx: <div className="bg-white dark:bg-stone-900 p-6 rounded-none w-full max-w-sm">
components/ZineCard.tsx: className="w-full p-2 mb-4 bg-stone-100 dark:bg-stone-800 rounded-none text-sm"
components/ZineCard.tsx: className="w-full py-2 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none text-xs font-bold uppercase tracking-widest"
components/ZineCard.tsx: <span className="bg-white/90 dark:bg-black/90 text-[6px] font-mono uppercase tracking-widest px-2 py-1 rounded-none backdrop-blur-md text-black dark:text-white">
components/ZineCard.tsx: <span key={tag} className="bg-stone-900/90 dark:bg-stone-100/90 text-[6px] font-mono uppercase tracking-widest px-2 py-1 rounded-none backdrop-blur-md text-white dark:text-stone-900">
components/MaterialityPanel.tsx: className={`py-2 border rounded-none text-[8px] font-sans font-black uppercase transition-all ${
components/MaterialityPanel.tsx: className={`py-3 px-4 border rounded-none text-left text-[10px] font-sans font-black uppercase transition-all ${
components/MaterialityPanel.tsx: className={`py-2 px-4 border rounded-none text-[8px] font-sans font-black uppercase transition-all ${
components/CaptiveSentinel.tsx: <div className="w-20 h-20 bg-stone-900 rounded-none flex items-center justify-center mb-6 border border-stone-800">
components/CaptiveSentinel.tsx: className="px-8 py-4 bg-stone-200 text-stone-950 rounded-none font-medium hover:bg-white transition-colors"
components/CaptiveSentinel.tsx: <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-red-500 rounded-none blur-[160px] animate-pulse"/>
components/CaptiveSentinel.tsx: className="absolute inset-0 border border-red-500/50 rounded-none"
components/CaptiveSentinel.tsx: className={`w-full py-6 rounded-none font-sans text-[11px] uppercase tracking-[0.5em] font-black transition-all active:scale-95 flex items-center justify-center gap-4 border-2 ${copied ? 'bg-stone-500 text-white border-stone-400' : 'bg-white text-black border-transparent hover:bg-red-600 hover:text-white'}`}
components/SocialShareModal.tsx: className="relative w-full max-w-md bg-white dark:bg-stone-900 rounded-none border border-stone-200 dark:border-stone-800 overflow-hidden"
components/SocialShareModal.tsx: <div className="bg-stone-50 dark:bg-stone-950 p-6 rounded-none border border-black/5 dark:border-white/5 space-y-4">
components/SocialShareModal.tsx: <div className="w-12 h-12 bg-black rounded-none overflow-hidden flex-shrink-0 border border-white/10">
components/SocialShareModal.tsx: className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none py-3 pl-10 pr-12 font-mono text-[9px] text-stone-400 focus:outline-none"
components/SocialShareModal.tsx: className="flex flex-col items-center justify-center gap-3 py-6 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-none hover:bg-stone-100 dark:hover:bg-stone-700 transition-all group"
components/SocialShareModal.tsx: className="flex flex-col items-center justify-center gap-3 py-6 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-none hover:bg-stone-100 dark:hover:bg-stone-700 transition-all group"
components/SocialShareModal.tsx: <div className="p-5 bg-amber-500/5 rounded-none border border-amber-500/10 space-y-3">
components/FeatureChecklist.tsx: <div className="bg-stone-50 border border-stone-200 p-6 rounded-none">
components/FeatureChecklist.tsx: <span className={`px-2 py-0.5 rounded-none text-[10px] ${
components/SanctuaryView.tsx: <textarea value={sanctuaryInput} onChange={(e) => setSanctuaryInput(e.target.value)} className="w-full bg-stone-900/50 border border-white/10 p-6 font-serif text-xl italic text-white focus:outline-none focus:border-stone-800 dark:focus:border-stone-300/50 transition-all resize-none h-48 rounded-none"placeholder="The frequency feels distorted..."/>
components/SanctuaryView.tsx: <button onClick={handleSanctuaryCalibration} disabled={isLoading || !sanctuaryInput.trim()} className="px-10 py-4 bg-white text-black rounded-none font-sans text-[9px] uppercase tracking-[0.4em] font-black hover:bg-stone-400 transition-all flex items-center gap-4 disabled:opacity-50">
components/TheEdit.tsx: <div className="flex bg-[#D4D1C9] p-1 rounded-none">
components/TheEdit.tsx: <button onClick={() => setViewMode('editorial')} className={`px-4 py-1 rounded-none text-[10px] uppercase tracking-widest flex items-center gap-2 ${viewMode === 'editorial' ? 'bg-white ' : ''}`}><BookOpen size={12} /> Editorial</button>
components/TheEdit.tsx: <button onClick={() => setViewMode('market')} className={`px-4 py-1 rounded-none text-[10px] uppercase tracking-widest flex items-center gap-2 ${viewMode === 'market' ? 'bg-white ' : ''}`}><LayoutGrid size={12} /> Market</button>
components/ExportChamber.tsx: <div className="p-2 bg-stone-100 dark:bg-stone-800 rounded-none text-nous-text dark:text-white">
components/ExportChamber.tsx: <button onClick={onClose} className="px-6 py-2 bg-white text-black rounded-none font-sans text-xs font-black">Close</button>
components/ExportChamber.tsx: <button onClick={onClose} className="p-2 text-stone-400 hover:text-red-500 transition-all rounded-none hover:bg-stone-100 dark:hover:bg-stone-800"><X size={20}/></button>
components/ExportChamber.tsx: <button key={m.id} onClick={() => setExportMode(m.id as any)} className={`text-left p-5 rounded-none border transition-all ${exportMode === m.id ? 'bg-stone-50 dark:bg-black/20 border-stone-500 ring-1 ring-stone-500/20' : 'text-stone-400 border-stone-100 dark:border-stone-800 hover:bg-stone-50 dark:hover:bg-stone-800'}`}>
components/ExportChamber.tsx: <button key={s.id} onClick={() => toggleSection(s.id)} className={`flex items-center gap-3 p-3 rounded-none border transition-all ${selectedSections.has(s.id) ? 'bg-stone-50 dark:bg-stone-800 border-stone-200 dark:border-stone-700 text-nous-text dark:text-white' : 'text-stone-300 dark:text-stone-700 border-transparent hover:bg-stone-50 dark:hover:bg-stone-900'}`}>
components/ExportChamber.tsx: <button onClick={handleExport} disabled={isGenerating} className="w-full py-5 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[10px] tracking-[0.4em] uppercase font-black flex items-center justify-center gap-4 hover:scale-[1.02] active:scale-95 transition-all disabled:opacity-50">
components/ExportChamber.tsx: <AnimatePresence>{isGenerating && <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="absolute inset-0 bg-white/80 dark:bg-black/80 backdrop-blur-md z-50 flex items-center justify-center"><div className="bg-white dark:bg-stone-900 p-12 rounded-none text-center space-y-6 border border-stone-100 dark:border-stone-800"><Loader2 size={40} className="animate-spin text-stone-500 mx-auto"/><div className="space-y-2"><p className="font-serif italic text-2xl text-nous-text dark:text-white">“Compressing Reality...”</p><p className="font-sans text-[9px] uppercase tracking-widest text-stone-400">Preparing High-Fidelity Output</p></div></div></motion.div>}</AnimatePresence>
components/NotificationsView.tsx: <li key={n.id} className={`p-6 rounded-none border ${n.read ? 'bg-stone-50 dark:bg-stone-800 border-stone-100 dark:border-stone-700' : 'bg-white dark:bg-stone-900 border-stone-500/20'}`}>
components/DeveloperSettings.tsx: <div className="w-full max-w-2xl bg-stone-900 border border-stone-800 rounded-none p-8 md:p-12 space-y-10 flex flex-col max-h-[85vh]">
components/DeveloperSettings.tsx: <div className="flex items-center justify-between p-4 bg-black/40 border border-white/5 rounded-none">
components/DeveloperSettings.tsx: className={`w-12 h-6 rounded-none transition-colors relative ${agentConfig.curatorEnabled ? 'bg-stone-600' : 'bg-stone-800'}`}
components/DeveloperSettings.tsx: <div className={`absolute top-1 w-4 h-4 bg-white rounded-none transition-all ${agentConfig.curatorEnabled ? 'left-7' : 'left-1'}`} />
components/DeveloperSettings.tsx: <div className="flex items-center justify-between p-4 bg-black/40 border border-white/5 rounded-none">
components/DeveloperSettings.tsx: className={`w-12 h-6 rounded-none transition-colors relative ${agentConfig.sentinelEnabled ? 'bg-stone-600' : 'bg-stone-800'}`}
components/DeveloperSettings.tsx: <div className={`absolute top-1 w-4 h-4 bg-white rounded-none transition-all ${agentConfig.sentinelEnabled ? 'left-7' : 'left-1'}`} />
components/DeveloperSettings.tsx: <div className="p-4 bg-stone-500/5 border border-stone-500/10 rounded-none">
components/DeveloperSettings.tsx: <div className="flex-1 bg-black/60 border border-stone-800 p-4 rounded-none font-mono text-[10px] text-stone-300 overflow-y-auto min-h-[300px] space-y-2">
components/DeveloperSettings.tsx: className="flex-1 py-3 bg-stone-800 hover:bg-stone-700 text-white rounded-none font-sans text-[9px] uppercase tracking-widest font-black flex items-center justify-center gap-2 transition-all disabled:opacity-50"
components/MobileProfileModal.tsx: className="w-full sm:w-96 bg-stone-50 dark:bg-stone-900 rounded-none sm:rounded-none p-6 border-t border-stone-200 dark:border-stone-800 pb-12"
components/MobileProfileModal.tsx: <img src={profile.photoURL} alt="Profile"className="w-24 h-24 rounded-none object-cover border-4 border-white dark:border-stone-800 mb-4"/>
components/MobileProfileModal.tsx: <div className="w-24 h-24 rounded-none bg-stone-200 dark:bg-stone-800 flex items-center justify-center border-4 border-white dark:border-stone-800 mb-4">
components/MobileProfileModal.tsx: <div className={`mt-4 px-4 py-1.5 rounded-none text-xs font-bold uppercase tracking-widest border ${
components/MobileProfileModal.tsx: className="w-full flex items-center justify-between p-4 bg-white dark:bg-stone-950 rounded-none border border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors"
components/MobileProfileModal.tsx: className="w-full flex items-center justify-between p-4 bg-red-50 dark:bg-red-900/10 rounded-none border border-red-100 dark:border-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
components/ApiKeyShield.tsx: <div className="w-24 h-24 border border-stone-200 dark:border-stone-800 rounded-none flex items-center justify-center mx-auto relative group">
components/ApiKeyShield.tsx: <div className="absolute inset-0 border-t-2 border-amber-500 rounded-none animate-[spin_4s_linear_infinite]"/>
components/ApiKeyShield.tsx: <div className="p-6 bg-amber-500/10 dark:bg-amber-900/20 rounded-none border border-amber-500/30 dark:border-amber-900/40 text-sm">
components/ApiKeyShield.tsx: className="w-full py-4 border border-stone-100 dark:border-stone-800 rounded-none font-sans text-[9px] uppercase tracking-widest font-black text-stone-400 hover:text-nous-text dark:hover:text-white transition-all flex items-center justify-center gap-3"
components/Tooltip.tsx: className={`absolute z-[20000] w-64 p-5 bg-white/95 dark:bg-stone-900/98 backdrop-blur-3xl border border-stone-100 dark:border-stone-800 rounded-none pointer-events-none ${positions[position]}`}
components/Tooltip.tsx: <div className="w-1.5 h-1.5 rounded-none bg-stone-500 animate-pulse"/>
components/Tooltip.tsx: className={`p-1 rounded-none transition-all pointer-events-auto ${showBinary ? 'bg-stone-500 text-white' : 'bg-stone-50 text-stone-300'}`}
components/ConnectionsManager.tsx: if (loading) return <div className="h-16 animate-pulse bg-stone-100 dark:bg-stone-900/50 rounded-none"/>;
components/ConnectionsManager.tsx: <div className="flex items-center justify-between p-4 bg-white dark:bg-stone-900/30 border border-stone-100 dark:border-stone-800 rounded-none group transition-all hover:border-stone-200 dark:hover:border-stone-700">
components/ConnectionsManager.tsx: <div className="w-10 h-10 rounded-none overflow-hidden border border-stone-100 dark:border-stone-800 bg-stone-50 dark:bg-stone-950">
components/ConnectionsManager.tsx: className="p-2 text-stone-500 hover:bg-stone-50 dark:hover:bg-stone-500/10 rounded-none transition-colors"
components/ConnectionsManager.tsx: className="p-2 text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-none transition-colors"
components/ConnectionsManager.tsx: className="p-2 text-stone-300 hover:text-red-500 transition-colors rounded-none hover:bg-red-50 dark:hover:bg-red-500/10"
components/ConnectionsManager.tsx: className="p-2 text-stone-300 hover:text-red-500 transition-colors rounded-none hover:bg-red-50 dark:hover:bg-red-500/10"
components/ConnectionsManager.tsx: <div className="p-2 text-stone-500 bg-stone-500/10 rounded-none"title="Connected">
components/ConnectionsManager.tsx: <div className="p-2 text-amber-500 bg-amber-500/10 rounded-none animate-pulse"title="Request Sent">
components/ConnectionsManager.tsx: className="flex items-center gap-2 px-3 py-1.5 bg-stone-500 text-white rounded-none font-sans text-[7px] uppercase tracking-widest font-black hover:bg-stone-600 transition-all"
components/ConnectionsManager.tsx: className="p-2 bg-nous-text dark:bg-white text-white dark:text-black rounded-none hover:opacity-80 transition-all"
components/ConnectionsManager.tsx: className="p-2 border border-stone-200 dark:border-stone-700 rounded-none text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-800 transition-all"
components/ConnectionsManager.tsx: className={`px-6 py-3 rounded-none border transition-all flex items-center gap-3 relative ${activeTab === tab.id ? 'bg-nous-text dark:bg-white text-white dark:text-black border-nous-text dark:border-white ' : 'bg-white dark:bg-stone-900 text-stone-400 border-stone-100 dark:border-stone-800 hover:border-stone-300 dark:hover:border-stone-600'}`}
components/ConnectionsManager.tsx: <span className={`ml-1 px-1.5 py-0.5 rounded-none text-[7px] font-black ${activeTab === tab.id ? 'bg-white/20 text-white' : 'bg-stone-100 dark:bg-stone-800 text-stone-500'}`}>
components/ConnectionsManager.tsx: <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-stone-500 rounded-none border-2 border-nous-base dark:border-stone-950 animate-pulse"/>
components/ConnectionsManager.tsx: className="w-full pl-12 pr-4 py-3 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none focus:outline-none focus:ring-2 focus:ring-nous-text dark:focus:ring-white transition-all font-serif italic"
components/Shelf.tsx: <button onClick={refreshManually} className="p-4 bg-transparent hover:bg-stone-50 dark:hover:bg-stone-900 rounded-none text-stone-300 hover:text-nous-text dark:hover:text-white transition-all active:rotate-180"title="Refresh">
components/Shelf.tsx: <div className="p-8 bg-stone-50 dark:bg-stone-900 rounded-none mb-4">
components/Shelf.tsx: className="px-10 py-4 bg-nous-text dark:bg-white text-white dark:text-black rounded-none font-sans text-[9px] uppercase tracking-[0.4em] font-black active:scale-95 transition-all flex items-center gap-3"
components/CheckoutSuccessView.tsx: <div className="w-16 h-16 border-2 border-stone-200 dark:border-stone-800 border-t-stone-500 rounded-none animate-spin mx-auto"/>
components/CheckoutSuccessView.tsx: <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 text-red-500 rounded-none flex items-center justify-center mx-auto text-2xl">!</div>
components/CheckoutSuccessView.tsx: className="px-6 py-3 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none font-sans text-xs uppercase tracking-widest font-bold"
components/CheckoutSuccessView.tsx: <div className="w-20 h-20 bg-stone-100 dark:bg-stone-900/30 text-stone-500 rounded-none flex items-center justify-center mx-auto">
components/CheckoutSuccessView.tsx: className="w-full px-6 py-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-none font-sans text-xs uppercase tracking-widest font-bold hover:bg-stone-800 dark:hover:bg-white transition-colors flex items-center justify-center gap-2"
components/CheckoutSuccessView.tsx: className="block w-full px-6 py-4 bg-transparent border border-stone-200 dark:border-stone-800 text-stone-600 dark:text-stone-400 rounded-none font-sans text-xs uppercase tracking-widest font-bold hover:bg-stone-100 dark:hover:bg-stone-900 transition-colors"
components/ActionBoard.tsx: <div className="bg-[#111] p-8 rounded-none max-w-sm w-full space-y-6 border border-stone-800">
components/ActionBoard.tsx: <button onClick={confirmDeleteTask} className="flex-1 py-3 bg-red-900/20 text-red-500 border border-red-900/50 hover:bg-red-900/40 rounded-none font-mono text-[9px] uppercase tracking-widest font-bold transition-all">Confirm</button>
components/ActionBoard.tsx: <button onClick={() => setViewMode('list')} className={`p-3 border rounded-none transition-all ${viewMode === 'list' ? 'border-stone-500 text-stone-500 bg-stone-500/10' : 'border-stone-800 text-stone-500 hover:border-stone-600 hover:text-stone-300'}`} title="List View">
components/ActionBoard.tsx: <button onClick={() => setViewMode('calendar')} className={`p-3 border rounded-none transition-all ${viewMode === 'calendar' ? 'border-stone-500 text-stone-500 bg-stone-500/10' : 'border-stone-800 text-stone-500 hover:border-stone-600 hover:text-stone-300'}`} title="Timeline View">
components/ActionBoard.tsx: <button onClick={() => setViewMode('canvas')} className={`p-3 border rounded-none transition-all ${viewMode === 'canvas' ? 'border-stone-500 text-stone-500 bg-stone-500/10' : 'border-stone-800 text-stone-500 hover:border-stone-600 hover:text-stone-300'}`} title="Canvas View">
components/ActionBoard.tsx: className={`w-64 p-4 border rounded-none cursor-grab active:cursor-grabbing ${task.completed ? 'bg-stone-900/50 border-stone-800/50' : 'bg-[#111] border-stone-700 hover:border-stone-800 dark:hover:border-stone-300/50'}`}
components/ActionBoard.tsx: <span className="px-1.5 py-0.5 rounded-none font-mono text-[7px] uppercase tracking-widest bg-stone-800 text-stone-400">
components/ActionBoard.tsx: className="px-4 py-2 bg-stone-500 text-black rounded-none font-mono text-[9px] uppercase tracking-widest font-bold disabled:opacity-30 hover:bg-stone-400 transition-colors flex items-center gap-2"
components/ActionBoard.tsx: <div className="py-24 text-center opacity-30 border border-dashed border-stone-800 rounded-none flex flex-col items-center justify-center gap-4">
components/ActionBoard.tsx: <div className="py-24 text-center opacity-30 border border-dashed border-stone-800 rounded-none flex flex-col items-center justify-center gap-4">
components/ActionBoard.tsx: <div className="absolute left-0 top-1.5 w-6 h-6 rounded-none bg-[#0a0a0a] border-2 border-stone-800 flex items-center justify-center">
components/ActionBoard.tsx: <div className="w-1.5 h-1.5 rounded-none bg-stone-500/50"/>