feat: redesign docs sidebar with audience-based categories + fix PNG background
## Architecture Diagram PNG Fix
- Regenerated PNG with solid white background (no transparency)
- Removed alpha channel (RGBA → RGB)
- Increased resolution to 2400x2000 for true high-res quality
- Fixed poor UX with checkered/transparent background on implementer.html
## Documentation Sidebar Redesign
Reorganized from flat "getting started" list to 5 hierarchical categories
based on user journey and expertise level:
### New Category Structure:
- 📘 Introduction (1-5): Beginner level, all audiences
- ⚙️ Implementation (10-19): Practical/technical for implementers
- 📊 Case Studies (20-29): Real-world examples
- 💼 Business Strategy (30-35): For leaders/decision makers
- 🔬 Advanced Topics (40-49): Deep technical (collapsed by default)
### Benefits:
- Clear progression: beginner → intermediate → advanced
- Audience-specific paths (researcher, implementer, leader)
- Reduced cognitive load (5 categories vs 15+ flat items)
- Easy to find relevant content by expertise level
### Technical Implementation:
- Updated docs-app.js CATEGORIES object with new structure
- Updated categorizeDocument() to use order ranges (1-5, 10-19, 20-29, 30-35, 40-49)
- Created scripts/reorganize-docs-sidebar.js for automated metadata updates
- Reorganized 15 documents in MongoDB with new order/category/audience
### Production Deployment:
- ✅ Deployed architecture-diagram.png (887KB, RGB, 2400x2000)
- ✅ Deployed updated docs-app.js
- ✅ Ran reorganization script on tractatus_prod database
- ✅ Verified via API: correct categories and ordering
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
f7d933dbe2