feat: polish UX, rewrite README, add project docs

- Popup: pulsing loading animation, styled error messages with retry
  button, refresh button in header, slide-in animation for incidents
- Landing page: prefers-reduced-motion support, MutationObserver for
  install detection, focus-visible styles for FAQ and inputs
- Content CSS: input[type=search] support, focus styles with warm gold
  ring, accent-color for checkboxes/radios
- README: full rewrite with hero section, badges, architecture tree,
  color palette table, and project backstory
- Add CLAUDE.md with project guide, sync rules, and color tokens
- Sync all CSS changes to userscript and docs/ copy
- Add default_title to manifest.json

Author: talkstream

.gitignore

@@ -8,3 +8,4 @@ node_modules/
 *.backup
 coverage/
 *.zip
+reddit-post.md

CLAUDE.md

@@ -0,0 +1,85 @@
+# Claude Status Dark — Project Guide
+
+## Overview
+
+Dark mode for status.claude.com — Chrome/Firefox/Safari extension + userscript + GitHub Pages landing page.
+
+**GitHub:** talkstream/claude-status-dark
+**Landing page:** https://talkstream.github.io/claude-status-dark/
+
+## Architecture
+
+Three delivery methods, one codebase:
+
+1. **Browser extension** (`extension/`) — MV3, full features (dark CSS + popup + badge alerts + auto-polling)
+2. **Userscript** (`userscript/`) — dark CSS only, works via Tampermonkey/Userscripts
+3. **Landing page** (`docs/`) — install wizard with browser detection, hosted on GitHub Pages
+
+## Critical Files
+
+| File | Purpose |
+|------|---------|
+| `extension/content.css` | Master dark theme — 14 selector groups targeting Atlassian Statuspage classes |
+| `extension/content.js` | MutationObserver for dynamic SVG fills, tooltips, modals |
+| `extension/background.js` | Service worker: alarm polling (2 min), badge text updates |
+| `extension/popup/popup.js` | Fetches /api/v2/summary.json, renders components + incidents |
+| `userscript/claude-status-dark.user.js` | Standalone: anti-flash + CSS injection + SVG recoloring |
+| `docs/index.html` | Landing page with install wizard, share buttons, FAQ |
+
+## Sync Rules
+
+**content.css is the source of truth for all CSS rules.**
+
+When editing CSS:
+1. Edit `extension/content.css`
+2. Manually sync changes into `userscript/claude-status-dark.user.js` (CSS is embedded in a template string)
+3. Copy userscript to `docs/claude-status-dark.user.js`
+
+## Color Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| bg-page | `#1a1816` | Page background |
+| bg-card | `#242220` | Cards, modals |
+| bg-elevated | `#2a2826` | Headers, footers |
+| text-primary | `#e8e4de` | Primary text |
+| text-secondary | `#9b9790` | Secondary text |
+| text-muted | `#5a5852` | Timestamps, hints |
+| border | `#3a3734` | All borders |
+| border-hover | `#4a4844` | Hover borders |
+| accent | `#c8a97a` | Warm gold — links hover, focus rings |
+| green | `#8cc63f` | Operational |
+| yellow | `#fbb44c` | Minor / degraded |
+| orange | `#f07850` | Major outage |
+| red | `#ef5555` | Critical |
+| blue | `#4a9ce8` | Maintenance, links |
+
+## Statuspage CSS Classes
+
+Real class names used by Atlassian Statuspage (important — don't guess these):
+- `.page-status.status-none` / `.status-minor` / `.status-major` / `.status-critical`
+- `.component-inner-container.status-green` / `.status-yellow` / `.status-orange` / `.status-red` / `.status-blue`
+- `.unresolved-incident.impact-none` / `.impact-minor` / `.impact-major` / `.impact-critical` / `.impact-maintenance`
+- SVG fills are set inline: `#76AD2A`, `#FAA72A`, `#E86235`, `#E04343`, `#2C84DB`, `#B0AEA5`, `#DEDCD1`, `#FAF9F5`
+
+## Testing
+
+1. Chrome: `chrome://extensions` → Developer mode → Load unpacked → `extension/`
+2. Open popup → verify loading animation, component list, refresh button
+3. Visit status.claude.com → verify dark theme, no white flash, tooltips dark
+4. Test subscribe modal → verify dark background, input focus styles
+5. Landing page: open `docs/index.html` locally or via GitHub Pages
+
+## Deploy
+
+```bash
+git add -A && git commit -m "..." && git push
+```
+
+GitHub Pages auto-deploys from `docs/` directory on push to main.
+
+## macOS Notes
+
+- `sed -i ''` (BSD sed)
+- Icon generation requires `librsvg` (`brew install librsvg`)
+- Safari build requires Xcode

README.md

@@ -1,77 +1,63 @@
-# Claude Status Dark
+<p align="center">
+  <b style="font-size:48px; color:#c8a97a;">✦</b><br>
+  <strong>Claude Status Dark</strong>
+</p>
 
-[![Version](https://img.shields.io/github/v/release/talkstream/claude-status-dark)](https://github.com/talkstream/claude-status-dark/releases)
-[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![Safari](https://img.shields.io/badge/Safari-compatible-brightgreen)](https://developer.apple.com/safari/extensions/)
-[![Chrome](https://img.shields.io/badge/Chrome-compatible-brightgreen)](https://developer.chrome.com/docs/extensions/)
-[![Firefox](https://img.shields.io/badge/Firefox-compatible-brightgreen)](https://addons.mozilla.org/en-US/firefox/extensions/)
+<p align="center">
+  <a href="https://github.com/talkstream/claude-status-dark/releases"><img src="https://img.shields.io/github/v/release/talkstream/claude-status-dark?style=flat-square&color=c8a97a" alt="Version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="License: MIT"></a>
+  <a href="https://talkstream.github.io/claude-status-dark/"><img src="https://img.shields.io/badge/install-two%20clicks-8cc63f?style=flat-square" alt="Install"></a>
+</p>
 
-Dark mode for [status.claude.com](https://status.claude.com) with a warm palette inspired by Claude's design language.
+<p align="center">
+  Dark mode for <a href="https://status.claude.com">status.claude.com</a> — because checking if Claude is down<br>
+  shouldn't also burn your retinas.
+</p>
 
-## Install — One Click
+<p align="center">
+  <strong><a href="https://talkstream.github.io/claude-status-dark/">Install in two clicks &rarr;</a></strong>
+</p>
 
-**[Install from our website](https://talkstream.github.io/claude-status-dark/)** — detects your browser, guides you through setup in 3 steps.
+---
 
-> Works with Safari (Userscripts), Chrome, Firefox, Edge (Tampermonkey).
+## Before / After
 
-## Features
-
-- Warm dark theme (not cold gray) — 14 CSS override groups covering every page element
-- Real-time status popup with component monitoring via Atlassian Statuspage API
-- Badge indicator: shows `!`/`!!`/`!!!` on the extension icon when issues are detected
-- Automatic polling every 2 minutes
-- Works on all pages: main status, `/history`, `/incidents/*`
-- Anti-flash: dark background applied before first paint
-- MutationObserver handles dynamically injected tooltips, modals, and SVG elements
-
-## Quick Install
-
-### Safari (macOS)
-
-```bash
-git clone https://github.com/talkstream/claude-status-dark.git
-cd claude-status-dark
-make install
-```
+| Before (ouch) | After (ahh) |
+|:-:|:-:|
+| Blinding white at 2 AM | Warm dark palette, easy on the eyes |
+| `#FAF9F5` background | `#1a1816` background |
+| Stock statuspage colors | Hand-tuned warm tones |
 
-This generates icons, converts to a Safari web extension, and opens the Xcode project. Build and enable in Safari preferences.
+## Install
 
-**Requirements:** Xcode, `librsvg` (`brew install librsvg`)
+**[One-click install from the landing page](https://talkstream.github.io/claude-status-dark/)** — detects your browser, guides you through two steps.
 
-### Chrome / Edge / Brave
+> Works with **Safari** (Userscripts), **Chrome**, **Edge**, **Brave** (Tampermonkey), and **Firefox** (Tampermonkey).
 
-1. Download the [latest release](https://github.com/talkstream/claude-status-dark/releases) or clone the repo
-2. Open `chrome://extensions`
-3. Enable **Developer mode**
-4. Click **Load unpacked** → select the `extension/` directory
+### Or load the extension directly
 
-### Firefox
+**Chrome / Edge / Brave:**
+1. Clone or download this repo
+2. Open `chrome://extensions` → enable **Developer mode**
+3. **Load unpacked** → select the `extension/` directory
 
+**Firefox:**
 1. Open `about:debugging#/runtime/this-firefox`
-2. Click **Load Temporary Add-on**
-3. Select `extension/manifest.json`
-
-### Userscript (Tampermonkey / Userscripts)
-
-Install [claude-status-dark.user.js](https://raw.githubusercontent.com/talkstream/claude-status-dark/main/userscript/claude-status-dark.user.js) directly.
-
-> **Note:** The userscript provides dark mode only (no popup or badge features).
-
-## Build from Source
+2. **Load Temporary Add-on** → select `extension/manifest.json`
 
+**Safari (native build):**
 ```bash
-# Generate PNG icons from SVG
-make icons
-
-# Build Safari extension (macOS only)
-make safari
+make install   # requires Xcode + librsvg
+```
 
-# Build + open in Xcode
-make install
+## Features
 
-# Clean build artifacts
-make clean
-```
+- **Warm dark theme** — not cold gray, a hand-tuned palette inspired by Claude's design language
+- **Status popup** — real-time component monitoring via Atlassian Statuspage API
+- **Badge alerts** — `!` / `!!` / `!!!` on the extension icon when issues are detected
+- **Auto-polling** — checks every 2 minutes, so you don't have to
+- **Anti-flash** — dark background injected before first paint, no white blink
+- **Full coverage** — main page, `/history`, `/incidents/*`, modals, tooltips, SVG bars
 
 ## Color Palette
 
@@ -82,32 +68,61 @@ make clean
 | `#141413` | `#e8e4de` | Primary text |
 | `#87867F` | `#9b9790` | Secondary text |
 | `#DEDCD1` | `#3a3734` | Borders |
-| `#76AD2A` | `#8cc63f` | Operational |
-| `#FAA72A` | `#fbb44c` | Minor |
-| `#E86235` | `#f07850` | Major |
-| `#E04343` | `#ef5555` | Critical |
-| `#2C84DB` | `#4a9ce8` | Maintenance |
-| — | `#c8a97a` | Accent (links, hover) |
+| `#76AD2A` | `#8cc63f` | Operational (green) |
+| `#FAA72A` | `#fbb44c` | Minor (yellow) |
+| `#E86235` | `#f07850` | Major (orange) |
+| `#E04343` | `#ef5555` | Critical (red) |
+| `#2C84DB` | `#4a9ce8` | Maintenance (blue) |
+| — | `#c8a97a` | Accent (warm gold) |
 
-## Project Structure
+## Architecture
 
 ```
-extension/
-  manifest.json       Manifest V3 (cross-browser)
-  content.css         Dark theme (14 selector groups)
-  content.js          MutationObserver for dynamic elements
-  background.js       Service worker with alarm polling
-  popup/              Status monitoring popup (360×480)
-  icons/              SVG source + generated PNGs
-userscript/           Standalone userscript variant
-scripts/              Build automation
-docs/                 GitHub Pages install landing page
+claude-status-dark/
+  extension/
+    manifest.json         MV3 manifest (cross-browser)
+    content.css           Dark theme — 14 selector groups, ~650 lines
+    content.js            MutationObserver for dynamic SVG/tooltips/modals
+    background.js         Service worker — alarm polling, badge updates
+    popup/                Status popup (360x480, warm dark theme)
+      popup.html
+      popup.css
+      popup.js
+    icons/                SVG source + generated PNGs (16/32/48/128)
+  userscript/
+    claude-status-dark.user.js   Standalone userscript (dark mode only)
+  docs/                   GitHub Pages — install landing page
+    index.html            Landing page with install wizard
+    claude-status-dark.user.js   Userscript copy (correct MIME type)
+  scripts/                Build automation (icon gen, Safari conversion)
+  Makefile                icons / safari / install / clean
 ```
 
+## Build from Source
+
+```bash
+make icons     # Generate PNGs from SVG (requires librsvg)
+make safari    # Convert to Safari Web Extension (macOS only)
+make install   # Build + open in Xcode
+make clean     # Remove build artifacts
+```
+
+## Why This Exists
+
+Vibe-coded at 2 AM while Claude was down. The irony of staring at a blinding white status page to find out when your AI assistant would come back was too much. So I made it dark.
+
+The warm palette isn't random — it's inspired by Claude's own design language. Gold accents (`#c8a97a`), muted earth tones, and careful contrast ratios make the page pleasant even when the news isn't.
+
 ## Contributing
 
 Issues and pull requests are welcome. Please test in at least one browser before submitting.
 
 ## License
 
 [MIT](LICENSE)
+
+---
+
+<p align="center">
+  <sub>Made with ✦ for Claude users who deserve better than a white screen at midnight</sub>
+</p>

docs/claude-status-dark.user.js

@@ -176,10 +176,16 @@ div[id^="subscribe-modal"] .modal-footer, .modal-footer, .modal-footer.incident-
 }
 .modal-backdrop { background-color: #0a0908 !important; }
 input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
-textarea, select, .phone-country, .full-width {
+input[type="search"], textarea, select, .phone-country, .full-width {
   background-color: #1a1816 !important; color: #e8e4de !important; border-color: #3a3734 !important;
 }
+input:focus, textarea:focus, select:focus {
+  border-color: #c8a97a !important;
+  box-shadow: 0 0 0 2px rgba(200, 169, 122, 0.2) !important;
+  outline: none !important;
+}
 input::placeholder, textarea::placeholder { color: #5a5852 !important; }
+input[type="checkbox"], input[type="radio"] { accent-color: #c8a97a; }
 .terms_and_privacy_information, .terms_and_privacy_information a, .help-block { color: #5a5852 !important; }
 
 /* Footer */

docs/index.html

@@ -560,6 +560,27 @@
     footer a { color: #9b9790; text-decoration: none; }
     footer a:hover { color: #c8a97a; }
 
+    /* ====== ACCESSIBILITY ====== */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+
+    details summary:focus-visible {
+      outline: 2px solid #c8a97a;
+      outline-offset: 2px;
+      border-radius: 8px;
+    }
+
+    input:focus, textarea:focus, select:focus {
+      border-color: #c8a97a !important;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(200, 169, 122, 0.2);
+    }
+
     /* ====== RESPONSIVE ====== */
     @media (max-width: 520px) {
       .preview { flex-direction: column; align-items: center; }
@@ -788,9 +809,25 @@ <h2>Make the world darker</h2>
       if (checkInstalled()) {
         document.addEventListener('DOMContentLoaded', showSuccessState);
       } else {
+        // Watch for the userscript setting data-claude-status-dark attribute
+        var htmlObserver = new MutationObserver(function(mutations) {
+          for (var i = 0; i < mutations.length; i++) {
+            if (mutations[i].attributeName === 'data-claude-status-dark' && checkInstalled()) {
+              showSuccessState();
+              htmlObserver.disconnect();
+              return;
+            }
+          }
+        });
+        htmlObserver.observe(document.documentElement, { attributes: true });
+
+        // Fallback timeout for edge cases
         setTimeout(function() {
-          if (checkInstalled()) showSuccessState();
-        }, 1000);
+          if (checkInstalled()) {
+            showSuccessState();
+            htmlObserver.disconnect();
+          }
+        }, 2000);
       }
 
       // GitHub Pages URL — correct MIME type (application/javascript)

extension/content.css

@@ -492,6 +492,7 @@ input[type="text"],
 input[type="email"],
 input[type="tel"],
 input[type="url"],
+input[type="search"],
 textarea,
 select,
 .phone-country,
@@ -501,11 +502,25 @@ select,
   border-color: #3a3734 !important;
 }
 
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: #c8a97a !important;
+  box-shadow: 0 0 0 2px rgba(200, 169, 122, 0.2) !important;
+  outline: none !important;
+}
+
 input::placeholder,
 textarea::placeholder {
   color: #5a5852 !important;
 }
 
+/* Checkbox / radio accent */
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: #c8a97a;
+}
+
 .terms_and_privacy_information,
 .terms_and_privacy_information a,
 .help-block {