Tweaked brand graphics

AGENTS.md

···
 ```
 
 Static files are served from `static/` at `/static/`.
+

docs/assets/dd-logo.svg

···
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="365"
+   height="466.50885"
+   viewBox="0 0 365 466.50885"
+   version="1.1"
+   xml:space="preserve"
+   style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+   id="svg8"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs8" />
+    
+    
+    
+    
+    
+    
+    
+    <g
+   id="g9"
+   transform="matrix(10.138889,0,0,10.602474,-20.277778,-21.204948)"><path
+     d="M 2,4 C 2,2.895 2.895,2 4,2 h 22 l 12,12 v 30 c 0,1.105 -0.895,2 -2,2 H 4 C 2.895,46 2,45.105 2,44 Z"
+     style="fill:#2563eb"
+     id="path1" /><path
+     d="M 7.9224904,13.449877 H 6.1110306 v -1.04191 h 1.7326966 c 0.7963736,0 1.457103,-0.146446 1.9821849,-0.439355 0.5250799,-0.292911 0.9167029,-0.711339 1.1748679,-1.255305 0.258169,-0.548157 0.387252,-1.2009176 0.387252,-1.9582872 0,-0.7490003 -0.12909,-1.393392 -0.387252,-1.9331744 C 10.746997,6.2820628 10.366305,5.8678111 9.8587302,5.57909 9.355527,5.2861849 8.7232396,5.139732 7.9618709,5.139732 H 6.1110306 V 4.097847 l 1.9361656,-2.1e-5 c 0.9538997,-1.05e-5 1.7677766,0.1862038 2.4416338,0.5586122 0.67823,0.3724081 1.196749,0.9080066 1.555554,1.606795 0.363179,0.6946035 0.544769,1.5251982 0.544769,2.4917866 0,0.9749583 -0.18159,1.8139222 -0.544769,2.5168922 -0.363177,0.698793 -0.892637,1.236485 -1.588377,1.613074 -0.6957302,0.376591 -1.5402366,0.564891 -2.5335166,0.564891 z M 6.1109554,4.097826 v 9.352051 H 4.8770122 V 4.097826 Z"
+     id="text1"
+     style="font-size:67.4282px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#ececec;stroke-width:0.258756"
+     aria-label="D" /><text
+     style="font-style:normal;font-size:13.1447px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#b3b3b3;stroke-width:0.258756"
+     x="10.490101"
+     y="13.585623"
+     id="text2"
+     transform="scale(1.0226062,0.97789354)">d</text><g
+     transform="matrix(0,-1.475264,1,0,-17.976555,48.258067)"
+     id="g2">
+        <path
+   d="m 11,28 c 0,0.552 -0.304,1 -0.678,1 H 7.678 C 7.304,29 7,28.552 7,28 7,27.448 7.304,27 7.678,27 h 2.644 C 10.696,27 11,27.448 11,28 Z"
+   style="fill:#03d02c"
+   id="path2" />
+    </g><g
+     transform="matrix(1.495816,0,0,1,-3.470715,7)"
+     id="g3">
+        <path
+   d="m 11,28 c 0,0.552 -0.3,1 -0.669,1 H 7.669 C 7.3,29 7,28.552 7,28 7,27.448 7.3,27 7.669,27 h 2.662 C 10.7,27 11,27.448 11,28 Z"
+   style="fill:#03d02c"
+   id="path3" />
+    </g><path
+     d="M 26,2 38,14 H 28 c -1.105,0 -2,-0.895 -2,-2 z"
+     style="fill:#1a56db;fill-rule:nonzero"
+     id="path4" /><g
+     transform="matrix(1.226958,0,0,1,-1.581784,0)"
+     id="g5">
+        <path
+   d="m 29,21 c 0,0.552 -0.365,1 -0.815,1 H 7.815 C 7.365,22 7,21.552 7,21 7,20.448 7.365,20 7.815,20 h 20.37 C 28.635,20 29,20.448 29,21 Z"
+   style="fill:#ffffff;fill-opacity:0.4"
+   id="path5" />
+    </g><g
+     transform="matrix(1.51098,0,0,1,-3.576862,0)"
+     id="g6">
+        <path
+   d="m 11,28 c 0,0.552 -0.297,1 -0.662,1 H 7.662 C 7.297,29 7,28.552 7,28 7,27.448 7.297,27 7.662,27 h 2.676 C 10.703,27 11,27.448 11,28 Z"
+   style="fill:#fca5a5"
+   id="path6" />
+    </g><g
+     transform="translate(2)"
+     id="g7">
+        <path
+   d="m 27,28 c 0,0.552 -0.448,1 -1,1 H 14 c -0.552,0 -1,-0.448 -1,-1 0,-0.552 0.448,-1 1,-1 h 12 c 0.552,0 1,0.448 1,1 z"
+   style="fill:#ffffff;fill-opacity:0.3"
+   id="path7" />
+    </g><g
+     transform="matrix(1.055556,0,0,1,1.277778,0)"
+     id="g8">
+        <path
+   d="m 31,35 c 0,0.552 -0.425,1 -0.947,1 H 13.947 C 13.425,36 13,35.552 13,35 c 0,-0.552 0.425,-1 0.947,-1 H 30.053 C 30.575,34 31,34.448 31,35 Z"
+   style="fill:#ffffff;fill-opacity:0.8"
+   id="path8" />
+    </g></g>
+</svg>

docs/assets/diffdown-logo-inkscape.svg

···
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="420"
+   height="420"
+   viewBox="43 84 327.6 327.6"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="diffdown-logo-inkscape.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   inkscape:export-filename="favicon.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.42"
+     inkscape:cx="43.128655"
+     inkscape:cy="49.853801"
+     inkscape:window-width="1392"
+     inkscape:window-height="1184"
+     inkscape:window-x="3277"
+     inkscape:window-y="31"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2"
+     inkscape:export-bgcolor="#ffffffff" />
+  <g
+     id="g2"
+     transform="matrix(5.7367355,0,0,5.7367355,-259.39616,-458.25129)">
+    <text
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#2563eb;fill-opacity:1"
+       x="52.5"
+       y="141.88016"
+       id="text1">D</text>
+    <text
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#0000ff"
+       x="78.900238"
+       y="141.22972"
+       id="text2">d</text>
+  </g>
+</svg>

docs/superpowers/plans/2026-03-17-tailwindcss-migration.md

···
+# TailwindCSS Migration Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the ~1000 lines of custom CSS with TailwindCSS utility classes, while preserving the existing design and dark mode support.
+
+**Architecture:** 
+1. Install TailwindCSS as a dev dependency with PostCSS
+2. Create a minimal `tailwind.config.js` that extends the default theme with the existing color palette
+3. Keep a small `base.css` for critical custom styles that can't be replaced (e.g., CodeMirror overrides, Milkdown-specific styles)
+4. Replace HTML class names with Tailwind utility classes in templates
+5. Use `@apply` for complex patterns that appear multiple times
+
+**Tech Stack:** TailwindCSS 4.x, PostCSS, existing esbuild for CSS bundling
+
+---
+
+## Current CSS Inventory
+
+| File | Lines | Purpose |
+|------|-------|---------|
+| `static/css/style.css` | 427 | Base styles, navbar, cards, buttons, forms, alerts |
+| `static/css/editor.css` | 419 | Editor layout, toolbar, modals, split pane |
+| `static/css/markdown.css` | 84 | Markdown preview rendering |
+| `static/css/diff.css` | 60 | Diff view styling |
+| **Total** | **990** | |
+
+---
+
+## Chunk 1: Setup TailwindCSS
+
+**Files:**
+- Modify: `/Users/johnluther/projects/diffdown/package.json`
+- Create: `/Users/johnluther/projects/diffdown/tailwind.config.js`
+- Create: `/Users/johnluther/projects/diffdown/postcss.config.js`
+- Create: `/Users/johnluther/projects/diffdown/src/styles/input.css`
+
+- [ ] **Step 1: Install TailwindCSS and dependencies**
+
+Run: `npm install -D tailwindcss postcss autoprefixer`
+
+- [ ] **Step 2: Initialize Tailwind config**
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./templates/**/*.html",
+    "./static/**/*.js",
+  ],
+  darkMode: 'class', // Use data-theme attribute for dark mode
+  theme: {
+    extend: {
+      colors: {
+        bg: 'var(--bg)',
+        'bg-card': 'var(--bg-card)',
+        text: 'var(--text)',
+        'text-muted': 'var(--text-muted)',
+        border: 'var(--border)',
+        primary: 'var(--primary)',
+        'primary-hover': 'var(--primary-hover)',
+        danger: 'var(--danger)',
+        success: 'var(--success)',
+        'code-bg': 'var(--code-bg)',
+        'alert-error-bg': 'var(--alert-error-bg)',
+        'alert-error-border': 'var(--alert-error-border)',
+      },
+      fontFamily: {
+        sans: ['"Barlow"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif'],
+        heading: ['"Lexend"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif'],
+        mono: ['"JetBrains Mono"', '"Fira Code"', '"Cascadia Code"', 'monospace'],
+      },
+      borderRadius: {
+        DEFAULT: '6px',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+- [ ] **Step 3: Create PostCSS config**
+
+```javascript
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+```
+
+- [ ] **Step 4: Create input.css for Tailwind directives**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Keep custom font import */
+@import url(https://fonts.bunny.net/css?family=barlow:100,200,300,400,500,600|lexend:100,200,300,400,500,600,700,800,900);
+
+/* CSS variables - kept for backward compatibility */
+:root {
+    --bg: #fafafa;
+    --bg-card: #fff;
+    --text: #1a1a2e;
+    --text-muted: #6b7280;
+    --border: #e5e7eb;
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --danger: #dc2626;
+    --success: #16a34a;
+    --code-bg: #f3f4f6;
+    --alert-error-bg: #fef2f2;
+    --alert-error-border: #fecaca;
+}
+
+[data-theme="dark"] {
+    --bg: #0d1117;
+    --bg-card: #161b22;
+    --text: #e6edf3;
+    --text-muted: #ededed;
+    --text-secondary: #d4d4d4;
+    --border: #30363d;
+    --code-bg: #1f2428;
+    --primary: #388bfd;
+    --primary-hover: #58a6ff;
+    --danger: #f85149;
+    --success: #3fb950;
+    --alert-error-bg: #1c0608;
+    --alert-error-border: #6e1c20;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --bg: #0d1117;
+        --bg-card: #161b22;
+        --text: #e6edf3;
+        --text-muted: #ededed;
+        --text-secondary: #d4d4d4;
+        --border: #30363d;
+        --code-bg: #1f2428;
+        --primary: #388bfd;
+        --primary-hover: #58a6ff;
+        --danger: #f85149;
+        --success: #3fb950;
+        --alert-error-bg: #1c0608;
+        --alert-error-border: #6e1c20;
+    }
+}
+```
+
+- [ ] **Step 5: Add build script to package.json**
+
+```json
+"scripts": {
+  "build:css": "npx tailwindcss -i ./src/styles/input.css -o ./static/css/tailwind.css",
+  "build:collab": "npx esbuild node_modules/prosemirror-collab/dist/index.js --bundle --format=esm --outfile=static/vendor/collab.js",
+  "build": "npm run build:css && npm run build:collab"
+}
+```
+
+- [ ] **Step 6: Build TailwindCSS**
+
+Run: `npm run build:css`
+
+Expected: Creates `static/css/tailwind.css` with Tailwind utilities
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add package.json tailwind.config.js postcss.config.js src/styles/input.css static/css/tailwind.css
+git commit -m "feat: add TailwindCSS setup"
+```
+
+---
+
+## Chunk 2: Replace CSS in base.html
+
+**Files:**
+- Modify: `/Users/johnluther/projects/diffdown/templates/base.html`
+
+- [ ] **Step 1: Replace navbar styles with Tailwind classes**
+
+Old:
+```html
+<nav class="navbar">
+    <a href="/" class="logo">
+        <img src="/static/img/dd-logo.svg" alt="" width="22" height="28" style="vertical-align:middle;margin-right:0.4rem">Diffdown
+    </a>
+    <div class="nav-right">
+        {{if .User}}
+            <a href="/">Documents</a>
+            <a href="/about">About</a>
+            <span class="nav-user">{{.User.Name}}</span>
+            <form method="post" action="/auth/logout" style="display:inline">
+                <button type="submit" class="btn-link">Log out</button>
+            </form>
+        {{else}}
+            <a href="/auth/login">Log in</a>
+            <a href="/auth/register" class="btn btn-sm">Sign up</a>
+            <a href="/about">About</a>
+        {{end}}
+        <button id="theme-toggle" class="btn-link" aria-label="Toggle dark mode" onclick="toggleTheme()" style="font-size:1.1rem;padding:0.25rem">☀</button>
+    </div>
+</nav>
+```
+
+New:
+```html
+<nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)]">
+    <a href="/" class="flex items-center">
+        <img src="/static/img/dd-logo.svg" alt="" width="22" height="28" class="align-middle mr-1">Diffdown
+    </a>
+    <div class="flex items-center gap-4">
+        {{if .User}}
+            <a href="/" class="text-[var(--primary)] hover:underline">Documents</a>
+            <a href="/about" class="text-[var(--primary)] hover:underline">About</a>
+            <span class="text-[var(--text-muted)]">{{.User.Name}}</span>
+            <form method="post" action="/auth/logout">
+                <button type="submit" class="text-[var(--primary)] bg-transparent border-none cursor-pointer hover:underline">Log out</button>
+            </form>
+        {{else}}
+            <a href="/auth/login" class="text-[var(--primary)] hover:underline">Log in</a>
+            <a href="/auth/register" class="px-3 py-1.5 text-sm bg-[var(--primary)] text-white rounded hover:bg-[var(--primary-hover)]">Sign up</a>
+            <a href="/about" class="text-[var(--primary)] hover:underline">About</a>
+        {{end}}
+        <button id="theme-toggle" class="text-[var(--primary)] bg-transparent border-none cursor-pointer text-lg" aria-label="Toggle dark mode" onclick="toggleTheme()">☀</button>
+    </div>
+</nav>
+```
+
+- [ ] **Step 2: Replace main and alert styles**
+
+Old:
+```html
+<main>
+    {{if .Error}}
+    <div class="alert alert-error">{{.Error}}</div>
+    {{end}}
+    {{block "content" .}}{{end}}
+</main>
+```
+
+New:
+```html
+<main class="p-6">
+    {{if .Error}}
+    <div class="p-4 mb-4 bg-[var(--alert-error-bg)] border border-[var(--alert-error-border)] rounded text-[var(--danger)]">{{.Error}}</div>
+    {{end}}
+    {{block "content" .}}{{end}}
+</main>
+```
+
+- [ ] **Step 3: Update base.html to link tailwind.css instead of style.css**
+
+Old:
+```html
+<link rel="stylesheet" href="/static/css/style.css">
+```
+
+New (keep style.css for now, we'll remove later):
+```html
+<link rel="stylesheet" href="/static/css/tailwind.css">
+<link rel="stylesheet" href="/static/css/style.css">
+```
+
+- [ ] **Step 4: Test locally**
+
+Run: `make run`
+Open: `http://127.0.0.1:8080`
+Verify: Navbar, main content, and dark mode still work
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add templates/base.html
+git commit -m "refactor: convert base.html to TailwindCSS classes"
+```
+
+---
+
+## Chunk 3: Replace style.css (base styles)
+
+**Files:**
+- Modify: `/Users/johnluther/projects/diffdown/templates/landing.html`
+- Modify: `/Users/johnluther/projects/diffdown/templates/documents.html`
+- Modify: `/Users/johnluther/projects/diffdown/templates/register.html`
+- Modify: `/Users/johnluther/projects/diffdown/templates/login.html`
+
+- [ ] **Step 1: Review style.css for reusable patterns**
+
+Run: `cat static/css/style.css`
+
+Identify patterns to convert:
+- `.btn`, `.btn-sm`, `.btn-outline` → Tailwind utility classes
+- `.alert`, `.alert-error` → Already handled in base.html
+- `.card` → Tailwind card styles
+- `.form-group`, `.form-label`, `.form-input` → Tailwind form styles
+
+- [ ] **Step 2: Convert landing.html**
+
+Read and convert elements to use Tailwind classes inline instead of custom CSS classes.
+
+- [ ] **Step 3: Convert documents.html**
+
+Same approach for the documents dashboard page.
+
+- [ ] **Step 4: Convert auth pages (register, login)**
+
+Convert form elements to use Tailwind classes.
+
+- [ ] **Step 5: Test all pages**
+
+Run: `make run`
+Verify: Landing, documents, login, register pages render correctly with dark mode
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add templates/
+git commit -m "refactor: convert auth and dashboard pages to TailwindCSS"
+```
+
+---
+
+## Chunk 4: Replace editor.css (complex layout)
+
+**Files:**
+- Modify: `/Users/johnluther/projects/diffdown/templates/document_edit.html`
+- Modify: `/Users/johnluther/projects/diffdown/templates/document_view.html`
+
+- [ ] **Step 1: Review editor.css**
+
+Key patterns:
+- `.editor-page` → Full height flex container
+- `.editor-toolbar` → Sticky top toolbar with flex layout
+- `.editor-rich` → Rich text editor container
+- `.editor-split` → Split pane layout (editor + preview)
+- `.invite-modal` → Modal overlay and box
+
+- [ ] **Step 2: Convert document_edit.html toolbar**
+
+```html
+<!-- Old -->
+<div class="editor-toolbar">
+    <div class="breadcrumb">
+        ...
+    </div>
+    <div class="toolbar-actions">
+        ...
+    </div>
+</div>
+
+<!-- New -->
+<div class="sticky top-0 z-50 flex items-center justify-between px-4 py-2 border-b border-[var(--border)] bg-[var(--bg)]">
+    <div class="flex items-center gap-2">
+        ...
+    </div>
+    <div class="flex items-center gap-2">
+        ...
+    </div>
+</div>
+```
+
+- [ ] **Step 3: Convert editor containers**
+
+- [ ] **Step 4: Convert modal components**
+
+- [ ] **Step 5: Test editor functionality**
+
+Run: `make run`
+Create/edit a document
+Verify: Rich mode, source mode, preview, toolbar all work
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add templates/document_edit.html templates/document_view.html
+git commit -m "refactor: convert editor pages to TailwindCSS classes"
+```
+
+---
+
+## Chunk 5: Replace markdown.css and diff.css
+
+**Files:**
+- Modify: `/Users/johnluther/projects/diffdown/templates/document_view.html`
+- Modify: `/Users/johnluther/projects/diffdown/templates/landing.html`
+- Create: Keep minimal overrides in a new file if needed
+
+- [ ] **Step 1: Review markdown.css**
+
+Mostly Markdown rendering styles - can keep as-is for now with minimal overrides.
+
+- [ ] **Step 2: Review diff.css**
+
+Diff view styles - can keep as-is.
+
+- [ ] **Step 3: Link tailwind.css in view templates**
+
+Add `<link rel="stylesheet" href="/static/css/tailwind.css">` to templates that don't have it.
+
+- [ ] **Step 4: Test view pages**
+
+Run: `make run`
+View a document
+Verify: Markdown renders correctly with dark mode
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add templates/
+git commit -m "refactor: add TailwindCSS to view pages"
+```
+
+---
+
+## Chunk 6: Cleanup and final integration
+
+**Files:**
+- Delete: `/Users/johnluther/projects/diffdown/static/css/style.css` (after verifying no missing styles)
+- Delete: `/Users/johnluther/projects/diffdown/static/css/editor.css` (after verifying no missing styles)
+- Modify: `/Users/johnluther/projects/diffdown/templates/base.html`
+- Modify: `/Users/johnluther/projects/diffdown/package.json`
+
+- [ ] **Step 1: Check for any remaining custom CSS references**
+
+Run: `grep -r 'class="' templates/ | grep -E '\.(btn|alert|card|form)' | head -20`
+
+- [ ] **Step 2: Remove unused CSS files one by one**
+
+Start with style.css - comment out the link in base.html, test thoroughly, then delete.
+
+- [ ] **Step 3: Keep minimal base.css for CodeMirror/Milkdown overrides**
+
+Create `static/css/base.css` for:
+- CodeMirror theme overrides
+- Milkdown-specific styles
+- Any other third-party library styles
+
+- [ ] **Step 4: Update base.html to remove old CSS links**
+
+```html
+<link rel="stylesheet" href="/static/css/tailwind.css">
+<link rel="stylesheet" href="/static/css/base.css">
+```
+
+- [ ] **Step 5: Add CSS build to existing build command**
+
+```json
+"scripts": {
+  "build": "npm run build:css && npm run build:collab",
+  "build:css": "npx tailwindcss -i ./src/styles/input.css -o ./static/css/tailwind.css --minify",
+  "build:collab": "npx esbuild node_modules/prosemirror-collab/dist/index.js --bundle --format=esm --outfile=static/vendor/collab.js"
+}
+```
+
+- [ ] **Step 6: Final testing**
+
+Run: `make build && make run`
+Test all pages:
+- Landing page
+- Login/register
+- Documents list
+- Document edit (rich + source mode)
+- Document view
+- About page
+- Dark mode toggle
+
+- [ ] **Step 7: Commit final cleanup**
+
+```bash
+git add -A
+git commit -m "refactor: complete TailwindCSS migration, remove legacy CSS"
+```
+
+---
+
+## Testing Checklist
+
+- [ ] Landing page displays correctly (logged out)
+- [ ] Login page renders with proper styling
+- [ ] Register page renders with proper styling
+- [ ] Dashboard shows document list with cards
+- [ ] Dark mode toggle works on all pages
+- [ ] Document editor loads in rich mode
+- [ ] Document editor toggles to source mode
+- [ ] Preview pane renders Markdown
+- [ ] Invite modal opens/closes properly
+- [ ] Document view renders Markdown
+- [ ] About page displays correctly
+- [ ] Navbar shows correct links for logged in/out users
+
+---
+
+## Rollback Plan
+
+If issues arise:
+1. Keep old CSS files in a `static/css/legacy/` folder
+2. Restore old link in base.html: `<link rel="stylesheet" href="/static/css/style.css">`
+3. Test before committing deletions
+
+---
+
+## Notes
+
+- TailwindCSS 4.x uses a different configuration approach - verify which version is installed
+- The `data-theme` attribute approach is already implemented, Tailwind's `darkMode: 'class'` should work with it
+- CodeMirror and Milkdown may need specific overrides in a separate CSS file
+- Consider using `@layer components` in input.css for complex custom patterns

static/css/style.css

···
     border-radius: var(--radius);
     margin-bottom: 1rem;
 }
-
+Th
 .alert-error {
     background: var(--alert-error-bg);
     color: var(--danger);

static/favicon.svg

···
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="80"
-   height="80"
-   viewBox="43 84 62.4 62.4"
+   width="420"
+   height="420"
+   viewBox="43 84 327.6 327.6"
    version="1.1"
    id="svg2"
-   sodipodi:docname="favicon.svg"
-   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
      id="defs2" />
-  <sodipodi:namedview
-     id="namedview2"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:zoom="3.42"
-     inkscape:cx="42.982456"
-     inkscape:cy="49.853801"
-     inkscape:window-width="1392"
-     inkscape:window-height="1212"
-     inkscape:window-x="3158"
-     inkscape:window-y="31"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg2" />
   <g
      id="g2"
-     transform="translate(-7.0650602,-7.8754474)">
+     transform="matrix(5.7367355,0,0,5.7367355,-259.39616,-458.25129)">
     <text
-       style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';font-style:normal;letter-spacing:0px;fill:#2563eb;fill-opacity:1"
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#2563eb;fill-opacity:1"
        x="52.5"
        y="141.88016"
        id="text1">D</text>
     <text
-       style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';font-style:normal;letter-spacing:0px;fill:#0000ff"
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#0000ff"
        x="78.900238"
        y="141.22972"
        id="text2">d</text>

static/img/favicon.svg

···
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100" height="100" viewBox="43 84 78 78" version="1.1"
-   xmlns="http://www.w3.org/2000/svg">
-  <text
-     style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';font-style:normal;letter-spacing:0px;fill:#2563eb;fill-opacity:1"
-     x="52.5"
-     y="141.88016">D</text>
-  <text
-     style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';font-style:normal;letter-spacing:0px;fill:#0000ff"
-     x="78.900238"
-     y="141.22972">d</text>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="420"
+   height="420"
+   viewBox="43 84 327.6 327.6"
+   version="1.1"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="g2"
+     transform="matrix(5.7367355,0,0,5.7367355,-259.39616,-458.25129)">
+    <text
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#2563eb;fill-opacity:1"
+       x="52.5"
+       y="141.88016"
+       id="text1">D</text>
+    <text
+       style="font-style:normal;font-size:50.8px;line-height:1;font-family:'Inter 18pt';letter-spacing:0px;fill:#0000ff"
+       x="78.900238"
+       y="141.22972"
+       id="text2">d</text>
+  </g>
 </svg>

static/img/logo-monogram.svg

···
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="210mm"
-   height="297mm"
-   viewBox="0 0 210 297"
-   version="1.1"
-   id="svg1"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <g
-     id="layer1">
-    <g
-       id="g2">
-      <text
-         xml:space="preserve"
-         style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';-inkscape-font-specification:'Inter 18pt';letter-spacing:0px;fill:#2563eb;fill-opacity:1;stroke-width:6.61432"
-         x="52.5"
-         y="141.88016"
-         id="text1"><tspan
-           id="tspan1"
-           style="font-size:50.8px;fill:#2563eb;fill-opacity:1;stroke-width:6.61432"
-           x="52.5"
-           y="141.88016">D</tspan></text>
-      <text
-         xml:space="preserve"
-         style="font-size:50.8px;line-height:1;font-family:'Inter 18pt';-inkscape-font-specification:'Inter 18pt';letter-spacing:0px;fill:#0000ff;stroke-width:6.61432"
-         x="78.900238"
-         y="141.22972"
-         id="text2"><tspan
-           id="tspan2"
-           style="stroke-width:6.61432"
-           x="78.900238"
-           y="141.22972">d</tspan></text>
-    </g>
-  </g>
-</svg>

templates/about.html

···
         <div class="about-col">
         <h2>What is This?</h2>
         <p>Diffdown is a real-time collaborative Markdown editor/previewer built on the <a href="https://atproto.com/">AT Protocol</a> (the tech that powers <a href="https://bsky.app">Bluesky</a>).
-        
         <p>Diffdown is decentralized; it stores documents as AT Protocol records on the document creator's PDS, not on the Diffdown server or some cloud provider.</p>
-
         <p>I built Diffdown to learn <a href="https://atproto.com/">AT Protocol</a>, <a href="https://atproto.com/guides/lexicon">lexicons</a>, and <a href="https://www.ibm.com/think/topics/agentic-engineering">agentic engineering</a>. Consider it a "pre-alpha" prototype. Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), <strong>any documents you create will be visible to anyone with the URL</strong> (<a href="https://atproto.at/viewer?uri=did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgzsp6m5hs24">example</a>).</p>
-
         <h2>About Me</h2>
         <p>I've worked in tech for a long time as a product manager and executive. These days, I'm a co-founder of <a href="https://limeleaf.coop">Limeleaf Worker Collective</a>, and an advisor to a few startups. Read about my journey building Diffdown <a href="https://www.jluther.net/tags/nonfiction/">on my Leaflet</a>.</p>
-        
         </div>
         <div class="about-col">
             <h2>Technology</h2>
···
         <p><strong class="warning">Important:</strong> Because AT Proto does not support private data (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), any documents you create will be visible to anyone with the URL.</p>
         <p>Expect bugs, breaking changes, and limited features.</p>
         <p>However, any documents you create will be stored in your AT Proto account, so even if Diffdown goes away, you will still have your documents.</p>
-
         <h2>Contact</h2>
         <p>Feedback, bug reports, and feature requests are welcome. Reach out via Bluesky or check the <a href="https://github.com/limeleaf/diffdown">GitHub repository</a>.</p>
         </div>