diff --git a/generate-icons.sh b/generate-icons.sh
new file mode 100644
index 0000000..a44d775
--- /dev/null
+++ b/generate-icons.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+# Generates PNG icons from icon.svg using rsvg-convert.
+# Run whenever icon.svg changes: bash generate-icons.sh
+set -euo pipefail
+
+cd "$(dirname "$0")"
+
+rsvg-convert -w 192  -h 192  icon.svg -o icon-192.png
+rsvg-convert -w 512  -h 512  icon.svg -o icon-512.png
+
+echo "Generated icon-192.png and icon-512.png"
diff --git a/icon-192.png b/icon-192.png
new file mode 100644
index 0000000..ea578a1
Binary files /dev/null and b/icon-192.png differ
diff --git a/icon-512.png b/icon-512.png
new file mode 100644
index 0000000..1817bb2
Binary files /dev/null and b/icon-512.png differ
diff --git a/icon.svg b/icon.svg
index 892c17d..fd006da 100644
--- a/icon.svg
+++ b/icon.svg
@@ -1,5 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="115" fill="#7c3aed"/>
-  <!-- 4-pointed star (✦) -->
-  <path d="M256 76 L299 214 L436 256 L299 298 L256 436 L213 298 L76 256 L213 214 Z" fill="white"/>
+  <rect width="512" height="512" rx="115" fill="#ad7f58"/>
+  <!-- Thought bubble – main body -->
+  <rect x="72" y="52" width="368" height="252" rx="90" fill="white"/>
+  <!-- Thought bubble – trailing dots -->
+  <circle cx="240" cy="350" r="38" fill="white"/>
+  <circle cx="196" cy="413" r="26" fill="white"/>
+  <circle cx="163" cy="458" r="17" fill="white"/>
 </svg>
diff --git a/index.html b/index.html
index 275581f..3c01d60 100644
--- a/index.html
+++ b/index.html
@@ -1,147 +1,274 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="description" content="Post status updates to status.lol">
-  <meta name="theme-color" content="#7c3aed" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#a78bfa" media="(prefers-color-scheme: dark)">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="default">
-  <meta name="apple-mobile-web-app-title" content="Status Poster">
-  <link rel="manifest" href="manifest.json">
-  <link rel="stylesheet" href="style.css">
-  <title>Status Poster</title>
-
-</head>
-<body>
-
-<div class="app">
-  <header>
-    <div class="logo">
-      <div class="logo-mark">✦</div>
-      Status Poster
-    </div>
-    <button class="settings-btn" id="settings-btn" aria-label="Open settings">⚙</button>
-  </header>
-
-  <main>
-    <!-- Emoji picker -->
-    <div class="emoji-section">
-      <div
-        class="emoji-display"
-        id="emoji-display"
-        role="button"
-        tabindex="0"
-        aria-label="Current emoji — click to change"
-      >
-        <span id="emoji-show">📝</span>
-      </div>
-      <input
-        type="text"
-        id="emoji-input"
-        class="emoji-picker-input"
-        placeholder="Type or paste an emoji…"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="none"
-        spellcheck="false"
-        aria-label="Emoji input"
-      >
-      <span class="emoji-hint" id="emoji-hint">Click to change emoji</span>
-    </div>
-
-    <!-- Status text -->
-    <div class="field">
-      <label for="status-text">Status</label>
-      <textarea
-        id="status-text"
-        placeholder="What's on your mind?"
-        maxlength="5000"
-        rows="4"
-        aria-label="Status text"
-      ></textarea>
-      <div class="char-count" id="char-count" aria-live="polite">0 / 5000</div>
-    </div>
-
-    <!-- Optional URL -->
-    <div class="field">
-      <label for="status-url">
-        Link <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:0.88em">(optional)</span>
-      </label>
-      <input
-        type="url"
-        id="status-url"
-        placeholder="https://example.com"
-        autocorrect="off"
-        autocapitalize="none"
-        spellcheck="false"
-      >
-    </div>
-
-    <!-- Post button -->
-    <button class="post-btn" id="post-btn">
-      <div class="spinner" aria-hidden="true"></div>
-      <span class="btn-label">Post Status</span>
-    </button>
-  </main>
-</div>
-
-<!-- Toast notification -->
-<div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
-
-<!-- Settings modal -->
-<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-  <div class="modal">
-    <div class="modal-grip" aria-hidden="true"></div>
-
-    <div class="modal-header">
-      <span class="modal-title" id="modal-title">Settings</span>
-      <button class="close-btn" id="modal-close" aria-label="Close settings">✕</button>
-    </div>
-
-    <div class="modal-body">
-      <div class="privacy-notice" role="note">
-        <span class="privacy-icon">🔒</span>
-        <span>
-          Your username and API key are stored <strong>only in this browser's local storage</strong>
-          and are never sent anywhere except <strong>api.omg.lol</strong> when you post a status.
-        </span>
-      </div>
-
-      <div class="field">
-        <label for="s-username">omg.lol username</label>
-        <input
-          type="text"
-          id="s-username"
-          placeholder="yourname"
-          autocomplete="username"
-          autocorrect="off"
-          autocapitalize="none"
-          spellcheck="false"
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <meta name="description" content="Post status updates to status.lol" />
+    <meta
+      name="theme-color"
+      content="#ad7f58"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#ad7f58"
+      media="(prefers-color-scheme: dark)"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Status Poster" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="apple-touch-icon" href="icon-192.png" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Post → status.lol</title>
+  </head>
+  <body>
+    <div class="app">
+      <header>
+        <div class="logo">
+          <img
+            src="icon.svg"
+            class="logo-mark"
+            alt=""
+            aria-hidden="true"
+            width="30"
+            height="30"
+          />
+          Post → status.lol
+        </div>
+        <button
+          class="settings-btn"
+          id="settings-btn"
+          aria-label="Open settings"
         >
-      </div>
+          ⚙
+        </button>
+      </header>
 
-      <div class="field">
-        <label for="s-apikey">API key</label>
-        <div class="input-wrap">
-          <input
-            type="password"
-            id="s-apikey"
-            placeholder="Your omg.lol API key"
-            autocomplete="current-password"
-            spellcheck="false"
+      <main>
+        <!-- Emoji picker -->
+        <div class="emoji-section">
+          <div
+            class="emoji-display"
+            id="emoji-display"
+            role="button"
+            tabindex="0"
+            aria-label="Current emoji — click to change"
           >
-          <button class="eye-btn" id="eye-btn" aria-label="Show API key">👁</button>
+            <span id="emoji-show">💬</span>
+          </div>
+          <input
+            type="text"
+            id="emoji-input"
+            class="emoji-picker-input"
+            placeholder="Type or paste an emoji…"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="none"
+            spellcheck="false"
+            aria-label="Emoji input"
+          />
+          <span class="emoji-hint" id="emoji-hint">Click to change emoji</span>
+        </div>
+
+        <!-- Status text -->
+        <div class="field">
+          <label for="status-text">Status</label>
+          <textarea
+            id="status-text"
+            placeholder="What's on your mind?"
+            maxlength="5000"
+            rows="4"
+            aria-label="Status text"
+          ></textarea>
+          <div class="char-count" id="char-count" aria-live="polite">
+            0 / 5000
+          </div>
+        </div>
+
+        <!-- Optional URL -->
+        <div class="field">
+          <label for="status-url">
+            Link
+            <span
+              style="
+                font-weight: 400;
+                text-transform: none;
+                letter-spacing: 0;
+                font-size: 0.88em;
+              "
+              >(optional)</span
+            >
+          </label>
+          <input
+            type="url"
+            id="status-url"
+            placeholder="https://example.com"
+            autocorrect="off"
+            autocapitalize="none"
+            spellcheck="false"
+          />
+        </div>
+
+        <!-- Mastodon toggle -->
+        <div class="field toggle-row">
+          <label class="toggle-label" for="mastodon-toggle">
+            <input type="checkbox" id="mastodon-toggle" />
+            Post to Mastodon
+          </label>
+        </div>
+
+        <!-- Post button -->
+        <button class="post-btn" id="post-btn">
+          <div class="spinner" aria-hidden="true"></div>
+          <span class="btn-label">Post Status</span>
+        </button>
+      </main>
+
+      <footer>
+        <button class="footer-link" id="privacy-link" type="button">🔒 Privacy</button>
+        <a class="footer-link" href="https://git.bkr.im/ritual/status-poster" target="_blank" rel="noopener">🧑‍💻 Source Code</a>
+        <a class="footer-link" href="https://ritual.sh" target="_blank" rel="noopener">🖥️ By Ritual</a>
+      </footer>
+    </div>
+
+    <!-- Privacy modal -->
+    <div
+      class="overlay"
+      id="privacy-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="privacy-modal-title"
+    >
+      <div class="modal">
+        <div class="modal-grip" aria-hidden="true"></div>
+        <div class="modal-header">
+          <span class="modal-title" id="privacy-modal-title">Privacy</span>
+          <button
+            class="close-btn"
+            id="privacy-modal-close"
+            aria-label="Close privacy notice"
+          >
+            ✕
+          </button>
+        </div>
+        <div class="modal-body">
+          <p style="font-size: 0.95rem; line-height: 1.7; margin: 0">
+            This app stores your <strong>omg.lol username</strong> and
+            <strong>API key</strong>
+            only in your browser's local storage. They are never sent to any
+            server other than
+            <strong>api.omg.lol</strong> at the moment you post a status.
+          </p>
+          <p style="font-size: 0.95rem; line-height: 1.7; margin: 0">
+            No analytics, no tracking, no third-party requests. The
+            <a href="https://git.bkr.im/ritual/status-poster"
+              >source code is available online</a
+            >
+            and you can take it and host your version if you want!
+          </p>
         </div>
       </div>
-
-      <button class="save-btn" id="save-btn">Save Settings</button>
     </div>
-  </div>
-</div>
 
-<script src="script.js"></script>
+    <!-- Toast notification -->
+    <div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
 
-</body>
+    <!-- Settings modal -->
+    <div
+      class="overlay"
+      id="overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <div class="modal">
+        <div class="modal-grip" aria-hidden="true"></div>
+
+        <div class="modal-header">
+          <span class="modal-title" id="modal-title">Settings</span>
+          <button
+            class="close-btn"
+            id="modal-close"
+            aria-label="Close settings"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <div class="field">
+            <label for="s-username">omg.lol username</label>
+            <input
+              type="text"
+              id="s-username"
+              placeholder="username"
+              autocomplete="username"
+              autocorrect="off"
+              autocapitalize="none"
+              spellcheck="false"
+            />
+          </div>
+
+          <div class="field">
+            <label for="s-apikey">API key</label>
+            <div class="input-wrap">
+              <input
+                type="password"
+                id="s-apikey"
+                placeholder="Your omg.lol API key"
+                autocomplete="current-password"
+                spellcheck="false"
+              />
+              <button class="eye-btn" id="eye-btn" aria-label="Show API key">
+                👁
+              </button>
+            </div>
+          </div>
+
+          <div class="field">
+            <label>Appearance</label>
+            <div
+              class="theme-toggle"
+              id="theme-toggle"
+              role="group"
+              aria-label="Color theme"
+            >
+              <button
+                class="theme-btn"
+                data-theme="light"
+                type="button"
+                aria-pressed="false"
+              >
+                ☀ Light
+              </button>
+              <button
+                class="theme-btn"
+                data-theme="auto"
+                type="button"
+                aria-pressed="true"
+              >
+                Auto
+              </button>
+              <button
+                class="theme-btn"
+                data-theme="dark"
+                type="button"
+                aria-pressed="false"
+              >
+                ☾ Dark
+              </button>
+            </div>
+          </div>
+
+          <button class="save-btn" id="save-btn">Save Settings</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
 </html>
diff --git a/manifest.json b/manifest.json
index 4d31bbd..03900c8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,19 +6,19 @@
   "display": "standalone",
   "orientation": "portrait",
   "background_color": "#ffffff",
-  "theme_color": "#7c3aed",
+  "theme_color": "#ad7f58",
   "icons": [
     {
-      "src": "icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "maskable"
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }
diff --git a/script.js b/script.js
index 61ddd60..370834b 100644
--- a/script.js
+++ b/script.js
@@ -1,90 +1,146 @@
 // ── State ────────────────────────────────────────────────────────────────────
-let emoji    = '📝';
-let settings = { username: '', apiKey: '' };
+let emoji = "💬";
+let settings = { username: "", apiKey: "", theme: "auto", mastodonPost: false };
 
 // ── DOM ──────────────────────────────────────────────────────────────────────
-const $ = id => document.getElementById(id);
-const emojiDisplay  = $('emoji-display');
-const emojiShow     = $('emoji-show');
-const emojiInput    = $('emoji-input');
-const emojiSection  = emojiDisplay.closest('.emoji-section');
-const emojiHint     = $('emoji-hint');
-const statusText    = $('status-text');
-const statusUrl     = $('status-url');
-const charCount     = $('char-count');
-const postBtn       = $('post-btn');
-const toast         = $('toast');
-const settingsBtn   = $('settings-btn');
-const overlay       = $('overlay');
-const modalClose    = $('modal-close');
-const sUsername     = $('s-username');
-const sApikey       = $('s-apikey');
-const eyeBtn        = $('eye-btn');
-const saveBtn       = $('save-btn');
+const $ = (id) => document.getElementById(id);
+const emojiDisplay = $("emoji-display");
+const emojiShow = $("emoji-show");
+const emojiInput = $("emoji-input");
+const emojiSection = emojiDisplay.closest(".emoji-section");
+const emojiHint = $("emoji-hint");
+const statusText = $("status-text");
+const statusUrl = $("status-url");
+const charCount = $("char-count");
+const postBtn = $("post-btn");
+const toast = $("toast");
+const settingsBtn = $("settings-btn");
+const overlay = $("overlay");
+const modalClose = $("modal-close");
+const sUsername = $("s-username");
+const sApikey = $("s-apikey");
+const eyeBtn = $("eye-btn");
+const saveBtn = $("save-btn");
+const themeToggle = $("theme-toggle");
+const mastodonToggle = $("mastodon-toggle");
 
 // ── Settings ─────────────────────────────────────────────────────────────────
+function applyTheme(theme) {
+  if (theme === "auto") {
+    delete document.documentElement.dataset.theme;
+  } else {
+    document.documentElement.dataset.theme = theme;
+  }
+}
+
+function updateThemeToggle(theme) {
+  themeToggle.querySelectorAll(".theme-btn").forEach((btn) => {
+    const active = btn.dataset.theme === theme;
+    btn.classList.toggle("active", active);
+    btn.setAttribute("aria-pressed", active ? "true" : "false");
+  });
+}
+
 function loadSettings() {
   try {
-    const raw = localStorage.getItem('spo-settings');
+    const raw = localStorage.getItem("spo-settings");
     if (raw) settings = { ...settings, ...JSON.parse(raw) };
   } catch {}
+  applyTheme(settings.theme);
   updateBadge();
+  mastodonToggle.checked = settings.mastodonPost ?? false;
 }
 
 function saveSettings() {
-  settings.username = sUsername.value.trim().replace(/^@/, '');
-  settings.apiKey   = sApikey.value.trim();
+  settings.username = sUsername.value.trim().replace(/^@/, "");
+  settings.apiKey = sApikey.value.trim();
   try {
-    localStorage.setItem('spo-settings', JSON.stringify(settings));
+    localStorage.setItem("spo-settings", JSON.stringify(settings));
   } catch {
-    showToast('Could not save — storage unavailable', 'error');
+    showToast("Could not save — storage unavailable", "error");
     return;
   }
   updateBadge();
   closeModal();
-  showToast('Settings saved', 'success');
+  showToast("Settings saved", "success");
 }
 
 function updateBadge() {
-  settingsBtn.classList.toggle('needs-setup', !settings.username || !settings.apiKey);
+  settingsBtn.classList.toggle(
+    "needs-setup",
+    !settings.username || !settings.apiKey,
+  );
 }
 
 // ── Modal ────────────────────────────────────────────────────────────────────
 function openModal() {
   sUsername.value = settings.username;
-  sApikey.value   = settings.apiKey;
-  overlay.classList.add('open');
-  document.body.style.overflow = 'hidden';
+  sApikey.value = settings.apiKey;
+  updateThemeToggle(settings.theme);
+  overlay.classList.add("open");
+  document.body.style.overflow = "hidden";
   // Focus first empty field
   if (!settings.username) sUsername.focus();
   else if (!settings.apiKey) sApikey.focus();
 }
 
 function closeModal() {
-  overlay.classList.remove('open');
-  document.body.style.overflow = '';
+  overlay.classList.remove("open");
+  document.body.style.overflow = "";
 }
 
-settingsBtn.addEventListener('click', openModal);
-modalClose.addEventListener('click', closeModal);
-overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });
-saveBtn.addEventListener('click', saveSettings);
+const privacyOverlay = $("privacy-overlay");
+
+function openPrivacy() {
+  privacyOverlay.classList.add("open");
+  document.body.style.overflow = "hidden";
+}
+
+function closePrivacy() {
+  privacyOverlay.classList.remove("open");
+  document.body.style.overflow = "";
+}
+
+settingsBtn.addEventListener("click", openModal);
+$("privacy-link").addEventListener("click", openPrivacy);
+$("privacy-modal-close").addEventListener("click", closePrivacy);
+privacyOverlay.addEventListener("click", (e) => {
+  if (e.target === privacyOverlay) closePrivacy();
+});
+modalClose.addEventListener("click", closeModal);
+overlay.addEventListener("click", (e) => {
+  if (e.target === overlay) closeModal();
+});
+saveBtn.addEventListener("click", saveSettings);
+
+mastodonToggle.addEventListener("change", () => {
+  settings.mastodonPost = mastodonToggle.checked;
+  try { localStorage.setItem("spo-settings", JSON.stringify(settings)); } catch {}
+});
+
+themeToggle.addEventListener("click", (e) => {
+  const btn = e.target.closest(".theme-btn");
+  if (!btn) return;
+  settings.theme = btn.dataset.theme;
+  applyTheme(settings.theme);
+  updateThemeToggle(settings.theme);
+});
 
 // Eye toggle for API key
-eyeBtn.addEventListener('click', () => {
-  const show = sApikey.type === 'password';
-  sApikey.type = show ? 'text' : 'password';
-  eyeBtn.textContent = show ? '🙈' : '👁';
-  eyeBtn.setAttribute('aria-label', show ? 'Hide API key' : 'Show API key');
+eyeBtn.addEventListener("click", () => {
+  const show = sApikey.type === "password";
+  sApikey.type = show ? "text" : "password";
+  eyeBtn.textContent = show ? "🙈" : "👁";
+  eyeBtn.setAttribute("aria-label", show ? "Hide API key" : "Show API key");
 });
 
 // ── Emoji picker ─────────────────────────────────────────────────────────────
 function extractFirstEmoji(str) {
   if (!str) return null;
-  if (typeof Intl?.Segmenter === 'function') {
-    const seg = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+  if (typeof Intl?.Segmenter === "function") {
+    const seg = new Intl.Segmenter(undefined, { granularity: "grapheme" });
     for (const { segment } of seg.segment(str)) {
-      if (/\p{Emoji}/u.test(segment) && segment.trim() !== '') return segment;
+      if (/\p{Emoji}/u.test(segment) && segment.trim() !== "") return segment;
     }
     return null;
   }
@@ -93,28 +149,36 @@ function extractFirstEmoji(str) {
 }
 
 // Detect platform for hint text
-const isMac  = /Mac/.test(navigator.userAgent) && !/iPhone|iPad/.test(navigator.userAgent);
-const osHint = isMac ? ' · or ⌃⌘Space' : (navigator.userAgent.includes('Win') ? ' · or Win+.' : '');
+const isMac =
+  /Mac/.test(navigator.userAgent) && !/iPhone|iPad/.test(navigator.userAgent);
+const osHint = isMac
+  ? " · or ⌃⌘Space"
+  : navigator.userAgent.includes("Win")
+    ? " · or Win+."
+    : "";
 
 function openEmojiPicker() {
-  emojiSection.classList.add('picking');
-  emojiInput.value = '';
+  emojiSection.classList.add("picking");
+  emojiInput.value = "";
   emojiInput.focus();
   emojiHint.textContent = `Type, paste, or use your emoji keyboard${osHint}`;
 }
 
 function closeEmojiPicker() {
-  emojiSection.classList.remove('picking');
-  emojiHint.textContent = 'Click to change emoji';
+  emojiSection.classList.remove("picking");
+  emojiHint.textContent = "Click to change emoji";
 }
 
-emojiDisplay.addEventListener('click', openEmojiPicker);
+emojiDisplay.addEventListener("click", openEmojiPicker);
 
-emojiDisplay.addEventListener('keydown', e => {
-  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openEmojiPicker(); }
+emojiDisplay.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    openEmojiPicker();
+  }
 });
 
-emojiInput.addEventListener('input', () => {
+emojiInput.addEventListener("input", () => {
   const found = extractFirstEmoji(emojiInput.value);
   if (found) {
     emoji = found;
@@ -123,126 +187,116 @@ emojiInput.addEventListener('input', () => {
   }
 });
 
-emojiInput.addEventListener('blur', () => {
+emojiInput.addEventListener("blur", () => {
   // Small delay so a click on the emoji-display doesn't flicker
-  setTimeout(() => { if (document.activeElement !== emojiInput) closeEmojiPicker(); }, 150);
+  setTimeout(() => {
+    if (document.activeElement !== emojiInput) closeEmojiPicker();
+  }, 150);
 });
 
 // ── Keyboard shortcuts ────────────────────────────────────────────────────────
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    if (emojiSection.classList.contains('picking')) closeEmojiPicker();
-    else if (overlay.classList.contains('open')) closeModal();
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    if (emojiSection.classList.contains("picking")) closeEmojiPicker();
+    else if (overlay.classList.contains("open")) closeModal();
+    else if (privacyOverlay.classList.contains("open")) closePrivacy();
   }
 });
 
 // ── Character count ───────────────────────────────────────────────────────────
-statusText.addEventListener('input', () => {
+statusText.addEventListener("input", () => {
   const n = statusText.value.length;
   charCount.textContent = `${n} / 5000`;
-  charCount.classList.toggle('warn', n > 4800);
+  charCount.classList.toggle("warn", n > 4800);
 });
 
 // ── Post status ───────────────────────────────────────────────────────────────
 async function postStatus() {
   if (!settings.username || !settings.apiKey) {
-    showToast('Add your credentials in settings first', 'error');
+    showToast("Add your credentials in settings first", "error");
     openModal();
     return;
   }
 
   const content = statusText.value.trim();
   if (!content) {
-    showToast('Status text is required', 'error');
+    showToast("Status text is required", "error");
     statusText.focus();
     return;
   }
 
-  postBtn.classList.add('loading');
+  postBtn.classList.add("loading");
   postBtn.disabled = true;
 
   const body = { emoji, content };
-  const url  = statusUrl.value.trim();
+  const url = statusUrl.value.trim();
   if (url) body.external_url = url;
+  if (!mastodonToggle.checked) body.skip_mastodon_post = true;
 
   try {
     const res = await fetch(
       `https://api.omg.lol/address/${encodeURIComponent(settings.username)}/statuses/`,
       {
-        method:  'POST',
+        method: "POST",
         headers: {
-          'Authorization': `Bearer ${settings.apiKey}`,
-          'Content-Type':  'application/json',
+          Authorization: `Bearer ${settings.apiKey}`,
+          "Content-Type": "application/json",
         },
         body: JSON.stringify(body),
-      }
+      },
     );
 
     const data = await res.json().catch(() => ({}));
 
     if (res.ok || data?.request?.status_code === 200) {
-      const msg = data?.response?.message ?? 'Status posted!';
-      showToast(msg, 'success');
-      statusText.value      = '';
-      statusUrl.value       = '';
-      charCount.textContent = '0 / 5000';
-      charCount.classList.remove('warn');
-      emoji = '📝';
-      emojiShow.textContent = '📝';
+      const statusLink = data?.response?.url ?? null;
+      const msg = statusLink ? "Status posted · View ↗" : "Status posted";
+      showToast(msg, "success", statusLink);
+      statusText.value = "";
+      statusUrl.value = "";
+      charCount.textContent = "0 / 5000";
+      charCount.classList.remove("warn");
+      emoji = "📝";
+      emojiShow.textContent = "📝";
     } else {
       const msg = data?.response?.message ?? `Error ${res.status}`;
-      showToast(msg, 'error');
+      showToast(msg, "error");
     }
   } catch (err) {
-    const msg = err?.message === 'Failed to fetch'
-      ? 'Network error — check your connection'
-      : (err?.message ?? 'Something went wrong');
-    showToast(msg, 'error');
+    const msg =
+      err?.message === "Failed to fetch"
+        ? "Network error — check your connection"
+        : (err?.message ?? "Something went wrong");
+    showToast(msg, "error");
   } finally {
-    postBtn.classList.remove('loading');
+    postBtn.classList.remove("loading");
     postBtn.disabled = false;
   }
 }
 
-postBtn.addEventListener('click', postStatus);
+postBtn.addEventListener("click", postStatus);
 
 // Ctrl/Cmd + Enter to post from textarea
-statusText.addEventListener('keydown', e => {
-  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) postStatus();
+statusText.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) postStatus();
 });
 
 // ── Toast ────────────────────────────────────────────────────────────────────
 let toastTimer;
-function showToast(msg, type = '') {
+function showToast(msg, type = "", url = null) {
   clearTimeout(toastTimer);
   toast.textContent = msg;
-  toast.className   = `show ${type}`.trim();
-  toastTimer = setTimeout(() => { toast.className = ''; }, 4000);
+  toast.onclick = url ? () => window.open(url, "_blank", "noopener") : null;
+  toast.className = `show ${type}${url ? " clickable" : ""}`.trim();
+  toastTimer = setTimeout(() => {
+    toast.className = "";
+    toast.onclick = null;
+  }, 4000);
 }
 
-// ── Apple touch icon (generated at runtime — iOS doesn't support SVG icons) ──
-try {
-  const c = document.createElement('canvas');
-  c.width  = c.height = 192;
-  const ctx = c.getContext('2d');
-  ctx.fillStyle = '#7c3aed';
-  ctx.beginPath();
-  ctx.roundRect(0, 0, 192, 192, 38);
-  ctx.fill();
-  ctx.fillStyle    = 'white';
-  ctx.font         = '90px serif';
-  ctx.textAlign    = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillText('✦', 96, 98);
-  const link = document.createElement('link');
-  link.rel   = 'apple-touch-icon';
-  link.href  = c.toDataURL('image/png');
-  document.head.appendChild(link);
-} catch {}
-
 // ── Service worker ────────────────────────────────────────────────────────────
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('sw.js').catch(() => {});
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("sw.js").catch(() => {});
 }
 
 // ── Init ──────────────────────────────────────────────────────────────────────
diff --git a/style.css b/style.css
index f394c4e..ec17422 100644
--- a/style.css
+++ b/style.css
@@ -1,46 +1,87 @@
 /* ── Design tokens ─────────────────────────────────────────────────────── */
+/* Colours: Radix Sand (neutrals) + Radix Brown (accent)                   */
 :root {
-  --bg:         #ffffff;
-  --surface:    #f4f4f7;
-  --border:     #e2e2ea;
-  --text:       #18181b;
-  --muted:      #71717a;
-  --accent:     #7c3aed;
-  --accent-dim: #ede9fe;
-  --accent-fg:  #ffffff;
-  --danger:     #dc2626;
-  --success:    #16a34a;
-  --r:          14px;
-  --r-sm:       8px;
-  --safe-t:     env(safe-area-inset-top, 0px);
-  --safe-b:     env(safe-area-inset-bottom, 0px);
+  --bg: #fdfdfc; /* sand-1  */
+  --surface: #f1f0ef; /* sand-3  */
+  --border: #dad9d6; /* sand-6  */
+  --text: #21201c; /* sand-12 */
+  --muted: #63635e; /* sand-11 */
+  --accent: #ad7f58; /* brown-9 */
+  --accent-dim: #f6eee7; /* brown-3 */
+  --accent-fg: #ffffff;
+  --danger: #dc2626;
+  --success: #16a34a;
+  --r: 14px;
+  --r-sm: 8px;
+  --safe-t: env(safe-area-inset-top, 0px);
+  --safe-b: env(safe-area-inset-bottom, 0px);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg:         #0f0f13;
-    --surface:    #17171f;
-    --border:     #2a2a38;
-    --text:       #f0f0f8;
-    --muted:      #8b8ba0;
-    --accent:     #a78bfa;
-    --accent-dim: #2d1f5e;
-    --accent-fg:  #0f0f13;
-    --danger:     #f87171;
-    --success:    #4ade80;
+    --bg: #111110; /* sand-1  dark */
+    --surface: #222221; /* sand-3  dark */
+    --border: #3b3a37; /* sand-6  dark */
+    --text: #eeeeec; /* sand-12 dark */
+    --muted: #b5b3ad; /* sand-11 dark */
+    --accent: #ad7f58; /* brown-9 (same in light/dark) */
+    --accent-dim: #322922; /* brown-4 dark */
+    --accent-fg: #ffffff;
+    --danger: #f87171;
+    --success: #4ade80;
   }
 }
 
-/* ── Reset & base ──────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* Explicit theme overrides (beat the media query via attribute specificity) */
+:root[data-theme="light"] {
+  --bg: #fdfdfc;
+  --surface: #f1f0ef;
+  --border: #dad9d6;
+  --text: #21201c;
+  --muted: #63635e;
+  --accent: #ad7f58;
+  --accent-dim: #f6eee7;
+  --accent-fg: #ffffff;
+  --danger: #dc2626;
+  --success: #16a34a;
+}
 
-html { height: 100%; }
+:root[data-theme="dark"] {
+  --bg: #111110;
+  --surface: #222221;
+  --border: #3b3a37;
+  --text: #eeeeec;
+  --muted: #b5b3ad;
+  --accent: #ad7f58;
+  --accent-dim: #322922;
+  --accent-fg: #ffffff;
+  --danger: #f87171;
+  --success: #4ade80;
+}
+
+/* ── Reset & base ──────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+}
 
 body {
   min-height: 100%;
   background: var(--bg);
   color: var(--text);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   font-size: 16px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -55,6 +96,30 @@ body {
   margin: 0 auto;
 }
 
+/* ── Footer ────────────────────────────────────────────────────────────── */
+footer {
+  padding: 12px 20px calc(12px + var(--safe-b));
+  display: flex;
+  justify-content: center;
+}
+
+.footer-link {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--muted);
+  cursor: pointer;
+  border-radius: 6px;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.footer-link:hover {
+  color: var(--text);
+}
+
 /* ── Header ────────────────────────────────────────────────────────────── */
 header {
   display: flex;
@@ -80,13 +145,6 @@ header {
 .logo-mark {
   width: 30px;
   height: 30px;
-  background: var(--accent);
-  color: var(--accent-fg);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
   flex-shrink: 0;
 }
 
@@ -102,16 +160,20 @@ header {
   cursor: pointer;
   font-size: 1.05rem;
   color: var(--muted);
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
   position: relative;
   -webkit-tap-highlight-color: transparent;
 }
 
-.settings-btn:active { background: var(--border); }
+.settings-btn:active {
+  background: var(--border);
+}
 
 /* Red dot when credentials missing */
 .settings-btn.needs-setup::after {
-  content: '';
+  content: "";
   position: absolute;
   top: -3px;
   right: -3px;
@@ -151,13 +213,21 @@ main {
   font-size: 3.25rem;
   cursor: pointer;
   user-select: none;
-  transition: transform 0.12s, border-color 0.15s, background 0.15s;
+  transition:
+    transform 0.12s,
+    border-color 0.15s,
+    background 0.15s;
   -webkit-tap-highlight-color: transparent;
   position: relative;
 }
 
-.emoji-display:active  { transform: scale(0.94); }
-.emoji-display:hover   { border-color: var(--accent); background: var(--accent-dim); }
+.emoji-display:active {
+  transform: scale(0.94);
+}
+.emoji-display:hover {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
 
 /* Visible emoji text input — slides in when picking */
 .emoji-picker-input {
@@ -172,8 +242,11 @@ main {
   opacity: 0;
   pointer-events: none;
   border-color: transparent;
-  transition: max-height 0.2s ease, padding 0.18s ease,
-              opacity 0.15s ease, border-color 0.15s ease;
+  transition:
+    max-height 0.2s ease,
+    padding 0.18s ease,
+    opacity 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .emoji-section.picking .emoji-picker-input {
@@ -198,6 +271,29 @@ main {
   gap: 7px;
 }
 
+.toggle-row {
+  padding-block: 2px;
+}
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-size: 0.92rem;
+  font-weight: 400;
+  color: var(--text);
+  text-transform: none;
+  letter-spacing: 0;
+  user-select: none;
+}
+.toggle-label input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  accent-color: var(--accent);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
 label {
   font-size: 0.78rem;
   font-weight: 600;
@@ -219,7 +315,9 @@ input[type="password"] {
   padding: 13px 15px;
   width: 100%;
   outline: none;
-  transition: border-color 0.15s, background 0.15s;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
   -webkit-appearance: none;
 }
 
@@ -237,7 +335,9 @@ textarea {
 }
 
 textarea::placeholder,
-input::placeholder { color: var(--muted); }
+input::placeholder {
+  color: var(--muted);
+}
 
 .char-count {
   font-size: 0.78rem;
@@ -246,7 +346,9 @@ input::placeholder { color: var(--muted); }
   transition: color 0.15s;
 }
 
-.char-count.warn { color: var(--danger); }
+.char-count.warn {
+  color: var(--danger);
+}
 
 /* ── Post button ───────────────────────────────────────────────────────── */
 .post-btn {
@@ -264,12 +366,19 @@ input::placeholder { color: var(--muted); }
   align-items: center;
   justify-content: center;
   gap: 8px;
-  transition: opacity 0.15s, transform 0.1s;
+  transition:
+    opacity 0.15s,
+    transform 0.1s;
   -webkit-tap-highlight-color: transparent;
 }
 
-.post-btn:active:not(:disabled) { transform: scale(0.98); }
-.post-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.post-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.post-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .spinner {
   width: 18px;
@@ -282,10 +391,18 @@ input::placeholder { color: var(--muted); }
   flex-shrink: 0;
 }
 
-.post-btn.loading .spinner   { display: block; }
-.post-btn.loading .btn-label { display: none; }
+.post-btn.loading .spinner {
+  display: block;
+}
+.post-btn.loading .btn-label {
+  display: none;
+}
 
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 /* ── Toast ─────────────────────────────────────────────────────────────── */
 #toast {
@@ -310,9 +427,23 @@ input::placeholder { color: var(--muted); }
   text-overflow: ellipsis;
 }
 
-#toast.show    { transform: translateX(-50%) translateY(0); }
-#toast.success { background: var(--success); color: #fff; }
-#toast.error   { background: var(--danger);  color: #fff; }
+#toast.show {
+  transform: translateX(-50%) translateY(0);
+}
+#toast.success {
+  background: var(--success);
+  color: #fff;
+}
+#toast.error {
+  background: var(--danger);
+  color: #fff;
+}
+#toast.show.clickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+#toast.show.clickable:hover { filter: brightness(1.1); }
 
 /* ── Settings modal ────────────────────────────────────────────────────── */
 .overlay {
@@ -321,10 +452,12 @@ input::placeholder { color: var(--muted); }
   background: rgba(0, 0, 0, 0.48);
   z-index: 50;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.25s;
+  transition: opacity 0.2s;
 }
 
 .overlay.open {
@@ -334,25 +467,25 @@ input::placeholder { color: var(--muted); }
 
 .modal {
   background: var(--bg);
-  border-radius: 22px 22px 0 0;
+  border-radius: 22px;
   width: 100%;
-  max-width: 480px;
-  margin: 0 auto;
-  padding-bottom: calc(20px + var(--safe-b));
-  transform: translateY(100%);
-  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
-  max-height: 92vh;
+  max-width: 440px;
+  max-height: 90vh;
   overflow-y: auto;
+  transform: scale(0.95) translateY(8px);
+  opacity: 0;
+  transition:
+    transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
+    opacity 0.2s;
 }
 
-.overlay.open .modal { transform: translateY(0); }
+.overlay.open .modal {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
 
 .modal-grip {
-  width: 40px;
-  height: 4px;
-  background: var(--border);
-  border-radius: 2px;
-  margin: 10px auto 0;
+  display: none;
 }
 
 .modal-header {
@@ -382,7 +515,9 @@ input::placeholder { color: var(--muted); }
   -webkit-tap-highlight-color: transparent;
 }
 
-.close-btn:active { background: var(--border); }
+.close-btn:active {
+  background: var(--border);
+}
 
 .modal-body {
   padding: 20px;
@@ -405,7 +540,22 @@ input::placeholder { color: var(--muted); }
   line-height: 1.6;
 }
 
-.privacy-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
+.privacy-icon {
+  font-size: 1.1rem;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.modal-body a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+
+.modal-body a:hover {
+  text-decoration-thickness: 2px;
+}
 
 /* API key with eye toggle */
 .input-wrap {
@@ -413,7 +563,9 @@ input::placeholder { color: var(--muted); }
   display: flex;
 }
 
-.input-wrap input { padding-right: 48px; }
+.input-wrap input {
+  padding-right: 48px;
+}
 
 .eye-btn {
   position: absolute;
@@ -445,26 +597,40 @@ input::placeholder { color: var(--muted); }
   -webkit-tap-highlight-color: transparent;
 }
 
-.save-btn:active { opacity: 0.8; }
-
-/* ── Tablet / desktop ──────────────────────────────────────────────────── */
-@media (min-width: 520px) {
-  .overlay { align-items: center; }
-
-  .modal {
-    border-radius: 22px;
-    margin: 20px;
-    width: calc(100% - 40px);
-    max-height: 80vh;
-    transform: scale(0.96) translateY(10px);
-    opacity: 0;
-    transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s;
-  }
-
-  .overlay.open .modal {
-    transform: scale(1) translateY(0);
-    opacity: 1;
-  }
-
-  .modal-grip { display: none; }
+.save-btn:active {
+  opacity: 0.8;
+}
+
+/* ── Theme segmented control ───────────────────────────────────────────── */
+.theme-toggle {
+  display: flex;
+  background: var(--surface);
+  border: 1.5px solid var(--border);
+  border-radius: var(--r);
+  padding: 3px;
+  gap: 3px;
+}
+
+.theme-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border: none;
+  border-radius: calc(var(--r) - 5px);
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    box-shadow 0.15s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.theme-btn.active {
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
 }
diff --git a/sw.js b/sw.js
index e589c90..3ff4729 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'status-poster-v1';
+const CACHE = 'status-poster-v9';
 const PRECACHE = ['.', 'index.html', 'style.css', 'script.js', 'manifest.json', 'sw.js', 'icon.svg'];
 
 self.addEventListener('install', e => {
