triforce-strategies: add S&P 500 vs anythingn calculator

claude helped with this

CLAUDE.md

@@ -10,9 +10,12 @@ Personal homepage built with Zola.
 - `content/` — Markdown content
   - `blog/` — Blog posts
   - `lib/` — Library/reference articles
-  - `triforce_strategies/` — Triforce Strategies LLC content
+  - `triforce-strategies/` — Triforce Strategies LLC content
+    - `tools/` — Interactive calculators/tools
+- `templates/shortcodes/` — Custom shortcodes (override theme)
+- `static/js/` — JavaScript files
+- `static/css/` — CSS files
 - `themes/tabi-lean/` — Theme (git subtree, do not edit directly)
-- `static/` — Static assets
 - `config.toml` — Site configuration
 
 ## Content Conventions
@@ -20,5 +23,29 @@ Personal homepage built with Zola.
 - Section indices: `_index.md`
 - Internal links: `@/path/to/file.md`
 
+## Adding Interactive Tools
+
+To add a new tool under `triforce-strategies/tools/`:
+
+1. **Create shortcode**: `templates/shortcodes/tool_name.html`
+   - HTML structure (form, canvas, results container)
+   - Load JS via `{{ get_url(path='js/toolName.js') | safe }}`
+   - Include `<noscript>` fallback
+
+2. **Create JS**: `static/js/toolName.js`
+   - Wrap in IIFE: `(function() { 'use strict'; ... })();`
+   - Use theme CSS variables for colors (--text-color, --primary-color, etc.)
+   - Scale canvas for retina: `window.devicePixelRatio`
+
+3. **Create CSS**: `static/css/tool-name.css`
+   - Use theme CSS variables from `themes/tabi-lean/sass/main.scss`
+   - Responsive layout with media queries
+
+4. **Create page**: `content/triforce-strategies/tools/tool_name.md`
+   - Frontmatter: `[extra] stylesheets = ["css/tool-name.css"]`
+   - Invoke shortcode: `{{ tool_name() }}`
+
+Example: `snp500_vs_anything` (fund comparison calculator with Monte Carlo simulation)
+
 ## Commit Style
 `type: description` (e.g., `blog: add post title`)