From ec4a179e65deea373fdf43ae76fb07fd06b69bef Mon Sep 17 00:00:00 2001
From: Jay <finallyjay@gmail.com>
Date: Wed, 3 Jun 2026 15:26:45 +0200
Subject: [PATCH] Adopt Tailwind v4 without changing the visual design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Incremental adoption via @tailwindcss/vite (Astro 5's recommended path):
- Move the global saloon styles out of Layout's <style is:global> into
  src/styles/global.css, organized into @layer base/components, with the
  design tokens bridged into @theme so utilities (text-brass-hi, font-display,
  etc.) exist alongside the original var(--brass) references.
- Skip Preflight on purpose — the design leans on browser-default typography,
  so resetting it would shift spacing. Declare the layer order explicitly so
  utilities still win over base/components.
- Convert the inline style= attributes on index/roulette to utility classes
  (the --i hole rotation vars stay as inline custom properties).

Verified pixel-identical: 0 px difference on / and /roulette?demo=1 at
1400x2200 (see spike/shots.mjs for the screenshot helper).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 astro.config.mjs         |   6 +
 package-lock.json        | 614 ++++++++++++++++++++++++++++++++++++++-
 package.json             |   4 +-
 spike/shots.mjs          |  25 ++
 src/layouts/Layout.astro | 199 +------------
 src/pages/index.astro    |  18 +-
 src/pages/roulette.astro |   6 +-
 src/styles/global.css    | 237 +++++++++++++++
 8 files changed, 897 insertions(+), 212 deletions(-)
 create mode 100644 spike/shots.mjs
 create mode 100644 src/styles/global.css

diff --git a/astro.config.mjs b/astro.config.mjs
index b52147a..ff7a080 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from "astro/config";
 import vercel from "@astrojs/vercel";
+import tailwindcss from "@tailwindcss/vite";
 
 // Server output so our /api routes run as Vercel serverless functions.
 // All daily.dev calls go through them, keeping the token off the client.
@@ -9,4 +10,9 @@ export default defineConfig({
     // Inject the Vercel Web Analytics script in production.
     webAnalytics: { enabled: true },
   }),
+  // Tailwind v4 via the Vite plugin (the @astrojs/tailwind integration is
+  // deprecated for v4).
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });
diff --git a/package-lock.json b/package-lock.json
index 9ae17a0..04d9314 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,9 @@
         "astro": "^5.0.0"
       },
       "devDependencies": {
-        "playwright": "^1.60.0"
+        "@tailwindcss/vite": "^4.3.0",
+        "playwright": "^1.60.0",
+        "tailwindcss": "^4.3.0"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -1130,12 +1132,55 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz",
@@ -1587,6 +1632,278 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
+      "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.21.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
+      "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-x64": "4.3.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
+      "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
+      "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
+      "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
+      "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
+      "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
+      "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
+      "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
+      "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.0.tgz",
+      "integrity": "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.0",
+        "@tailwindcss/oxide": "4.3.0",
+        "tailwindcss": "4.3.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
@@ -3114,6 +3431,20 @@
       "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.22.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.1.tgz",
+      "integrity": "sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -3683,6 +4014,16 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
@@ -3711,6 +4052,256 @@
         "node": ">=6"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "devOptional": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -5611,6 +6202,27 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tar": {
       "version": "7.5.15",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.15.tgz",
diff --git a/package.json b/package.json
index 66fd5fe..9a5cc1f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "astro": "^5.0.0"
   },
   "devDependencies": {
-    "playwright": "^1.60.0"
+    "@tailwindcss/vite": "^4.3.0",
+    "playwright": "^1.60.0",
+    "tailwindcss": "^4.3.0"
   }
 }
diff --git a/spike/shots.mjs b/spike/shots.mjs
new file mode 100644
index 0000000..7c07005
--- /dev/null
+++ b/spike/shots.mjs
@@ -0,0 +1,25 @@
+// Throwaway visual-diff helper for the Tailwind migration branch.
+// Usage: node spike/shots.mjs <label>   e.g. `node spike/shots.mjs before`
+import { chromium } from "playwright";
+
+const label = process.argv[2] || "shot";
+const base = "http://localhost:4321";
+const pages = [
+  { name: "index", url: "/" },
+  { name: "roulette", url: "/roulette?demo=1" },
+];
+
+const browser = await chromium.launch();
+const ctx = await browser.newContext({
+  viewport: { width: 700, height: 1100 },
+  deviceScaleFactor: 2,
+  reducedMotion: "reduce", // freeze entrance/spin animations for stable diffs
+});
+const page = await ctx.newPage();
+for (const p of pages) {
+  await page.goto(base + p.url, { waitUntil: "networkidle" });
+  await page.waitForTimeout(600);
+  await page.screenshot({ path: `/tmp/ddr-${p.name}-${label}.png`, fullPage: true });
+  console.log(`saved /tmp/ddr-${p.name}-${label}.png`);
+}
+await browser.close();
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2cb40d9..a076c25 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import SpeedInsights from "@vercel/speed-insights/astro";
+import "../styles/global.css";
 import type { Profile } from "../lib/daily";
 
 interface Props {
@@ -56,204 +57,6 @@ const ogImage = new URL("/og-image.png", Astro.url.origin).href;
     />
 
     <SpeedInsights />
-    <style is:global>
-      :root {
-        --leather-dark: #100b06;
-        --leather: #241a10;
-        --paper: #e9dcbe;
-        --paper-hi: #f4ead0;
-        --paper-edge: #c4b08a;
-        --ink: #2b2015;
-        --ink-soft: #74603f;
-        --rust: #a8421f;
-        --blood: #7c1d12;
-        --brass: #bb8a32;
-        --brass-hi: #e0b85a;
-        --sage: #3f6b4a;
-
-        --font-display: "Rye", "Zilla Slab", serif;
-        --font-type: "Special Elite", "Courier New", monospace;
-        --font-body: "Zilla Slab", Georgia, serif;
-      }
-      * { box-sizing: border-box; }
-      html { scroll-behavior: smooth; }
-      body {
-        margin: 0;
-        font-family: var(--font-body);
-        color: var(--paper);
-        background:
-          radial-gradient(ellipse 120% 80% at 50% -10%, #3a2812 0%, #1c1208 45%, #0d0805 100%);
-        min-height: 100vh;
-        position: relative;
-        overflow-x: hidden;
-      }
-      /* film grain + dust */
-      body::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-        z-index: 1;
-        opacity: 0.08;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-      }
-      /* vignette */
-      body::after {
-        content: "";
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-        z-index: 1;
-        background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
-      }
-      main {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 2.5rem 1rem 5rem;
-      }
-
-      h1 {
-        font-family: var(--font-display);
-        font-weight: 400;
-        font-size: clamp(2rem, 6vw, 3.4rem);
-        line-height: 1.05;
-        margin: 0;
-        text-align: center;
-        color: var(--brass-hi);
-        text-shadow: 2px 2px 0 #000, 0 0 24px rgba(187,138,50,0.25);
-      }
-      h2 {
-        font-family: var(--font-display);
-        font-weight: 400;
-        margin: 0 0 0.6rem;
-        font-size: 1.5rem;
-      }
-      .tagline {
-        font-family: var(--font-type);
-        color: #c9b896;
-        letter-spacing: 0.04em;
-        margin: 0.6rem 0 2rem;
-        text-align: center;
-      }
-
-      /* aged-paper poster panel */
-      .panel {
-        position: relative;
-        background:
-          radial-gradient(circle at 30% 20%, var(--paper-hi), var(--paper) 70%);
-        color: var(--ink);
-        border-radius: 3px;
-        padding: 1.8rem;
-        width: 100%;
-        max-width: 540px;
-        box-shadow:
-          0 1px 0 rgba(255,255,255,0.4) inset,
-          0 0 0 1px var(--paper-edge),
-          0 18px 40px rgba(0,0,0,0.55);
-      }
-      /* double-rule ticket border */
-      .panel::before {
-        content: "";
-        position: absolute;
-        inset: 9px;
-        border: 1.5px double var(--ink-soft);
-        border-radius: 2px;
-        pointer-events: none;
-        opacity: 0.55;
-      }
-      .panel p { line-height: 1.55; }
-      .panel a { color: var(--rust); font-weight: 700; text-underline-offset: 3px; }
-
-      button {
-        font-family: var(--font-display);
-        font-size: 0.95rem;
-        cursor: pointer;
-        border: 2px solid var(--ink);
-        border-radius: 3px;
-        padding: 0.75rem 1.1rem;
-        color: var(--paper-hi);
-        background: var(--ink);
-        transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
-        box-shadow: 0 4px 0 rgba(0,0,0,0.4);
-      }
-      button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 0 rgba(0,0,0,0.4); }
-      button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
-      button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
-      .btn-primary { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); border-color: #6e4f17; color: #241606; text-shadow: 0 1px 0 rgba(255,255,255,0.3); width: 100%; }
-      .btn-read { background: var(--sage); border-color: #243f2a; flex: 1; }
-      .btn-kill { background: var(--blood); border-color: #3d0e08; flex: 1; }
-      .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
-
-      input {
-        font-family: var(--font-type);
-        width: 100%;
-        padding: 0.8rem;
-        border-radius: 3px;
-        border: 2px solid var(--ink-soft);
-        background: #fbf4e2;
-        color: var(--ink);
-        margin-bottom: 0.8rem;
-      }
-      input::placeholder { color: #a8946e; }
-      input:focus { outline: none; border-color: var(--rust); }
-
-      .hidden { display: none !important; }
-      .row { display: flex; gap: 0.8rem; margin-top: 1rem; }
-      .error { color: var(--blood); font-family: var(--font-type); font-size: 0.85rem; min-height: 1.2rem; }
-      .card-meta { color: var(--ink-soft); font-family: var(--font-type); font-size: 0.82rem; }
-      .card-summary { color: #4a3a26; margin: 0.8rem 0; }
-
-      /* header: leather strip with brass hairline */
-      header.topbar {
-        position: sticky;
-        top: 0;
-        z-index: 5;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.7rem 1.3rem;
-        background: linear-gradient(180deg, #1d140b, #150d06);
-        border-bottom: 2px solid var(--brass);
-        box-shadow: 0 6px 16px rgba(0,0,0,0.5);
-      }
-      .brand {
-        font-family: var(--font-display);
-        color: var(--brass-hi);
-        text-decoration: none;
-        font-size: 1.05rem;
-        text-shadow: 1px 1px 0 #000;
-      }
-      .user { display: flex; align-items: center; gap: 0.7rem; }
-      .user .uname { font-family: var(--font-type); font-size: 0.85rem; color: #d8c7a3; }
-      .user .muted { font-family: var(--font-type); color: #8c7a5a; font-size: 0.8rem; }
-      /* tin-type framed avatar */
-      .user .avatar { position: relative; width: 34px; height: 34px; display: inline-block; }
-      .user .avatar img {
-        width: 34px; height: 34px; border-radius: 4px; object-fit: cover; display: block;
-        border: 2px solid var(--brass); filter: sepia(0.45) contrast(1.05);
-      }
-      .user .avatar-fallback {
-        width: 34px; height: 34px; border-radius: 4px;
-        background: linear-gradient(180deg, var(--brass-hi), var(--brass));
-        color: #241606; border: 2px solid #6e4f17;
-        display: flex; align-items: center; justify-content: center;
-        font-family: var(--font-display); font-size: 0.95rem;
-      }
-      .signout {
-        background: transparent; color: #c9b896; border: 1.5px solid #5a4730;
-        font-family: var(--font-type); font-size: 0.78rem; padding: 0.35rem 0.7rem;
-        box-shadow: none;
-      }
-      .signout:hover { filter: none; border-color: var(--brass); color: var(--brass-hi); }
-
-      @media (prefers-reduced-motion: reduce) {
-        *, *::before, *::after { animation: none !important; transition: none !important; }
-        html { scroll-behavior: auto; }
-      }
-    </style>
   </head>
   <body>
     <header class="topbar">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 35cc8a8..bf974c1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,14 +6,14 @@ const profile = await currentUser(Astro.cookies);
 ---
 
 <Layout title="daily.dev Roulette" profile={profile}>
-  <div class="reveal r1" style="text-align:center;">
+  <div class="reveal r1 text-center">
     <p class="kicker">★ ★ ★ &nbsp; THE TERRITORY OF &nbsp; ★ ★ ★</p>
     <h1>daily.dev Roulette</h1>
     <p class="tagline">Round up your forgotten bookmarks. Read 'em or bury 'em.</p>
   </div>
 
   {!profile && (
-    <section class="panel reveal r2" style="margin-bottom:1.4rem;">
+    <section class="panel reveal r2 mb-[1.4rem]">
       <h2>Show your papers</h2>
       <p class="card-meta">Paste your daily.dev API token (<a href="https://app.daily.dev/settings/api" target="_blank" rel="noopener">Settings → API</a>, needs a Plus subscription) to ride with your real bookmarks. It stays in a sealed saddlebag — a secure cookie, only for your session.</p>
       <input type="password" id="token" placeholder="daily.dev API token" autocomplete="off" />
@@ -23,11 +23,11 @@ const profile = await currentUser(Astro.cookies);
   )}
 
   {profile && (
-    <p class="tagline reveal r2" style="margin-top:-1rem;">Well howdy, {profile.name || profile.username || "stranger"}.</p>
+    <p class="tagline reveal r2 -mt-4">Well howdy, {profile.name || profile.username || "stranger"}.</p>
   )}
 
   <section class="panel reveal r3">
-    <h2 style="margin-bottom:1rem;">Choose your duel</h2>
+    <h2 class="mb-4">Choose your duel</h2>
 
     <div class="mode-card">
       <span class="mode-stamp">NEW</span>
@@ -39,16 +39,16 @@ const profile = await currentUser(Astro.cookies);
         </div>
       </div>
       {profile && (
-        <p class="card-meta" style="margin-top:0.6rem;">There's <b id="bm-count">…</b> in the chamber, partner.</p>
+        <p class="card-meta mt-[0.6rem]">There's <b id="bm-count">…</b> in the chamber, partner.</p>
       )}
-      <div class="row" style="margin-top:0.9rem;">
+      <div class="row mt-[0.9rem]">
         {profile && (
-          <a href="/roulette" style="flex:1; text-decoration:none;">
+          <a href="/roulette" class="flex-1 no-underline">
             <button class="btn-primary">🤠 Draw</button>
           </a>
         )}
-        <a href="/roulette?demo=1" style="flex:1; text-decoration:none;">
-          <button class="btn-ghost" style="width:100%;">▶ Demo</button>
+        <a href="/roulette?demo=1" class="flex-1 no-underline">
+          <button class="btn-ghost w-full">▶ Demo</button>
         </a>
       </div>
     </div>
diff --git a/src/pages/roulette.astro b/src/pages/roulette.astro
index 8103d35..f166a3e 100644
--- a/src/pages/roulette.astro
+++ b/src/pages/roulette.astro
@@ -65,13 +65,13 @@ const mockJson = JSON.stringify(MOCK_BOOKMARKS);
 
     <button class="btn-primary hidden" id="spin">🤠 Spin the cylinder</button>
 
-    <div id="over" class="hidden" style="text-align:center;">
-      <h2 style="color:var(--brass-hi);">The dust settles.</h2>
+    <div id="over" class="hidden text-center">
+      <h2 class="text-brass-hi">The dust settles.</h2>
       <p>You faced <b id="over-total">0</b> outlaws.<br/>🪦 <b id="over-killed">0</b> buried · 📖 <b id="over-survived">0</b> pardoned.</p>
       <button class="btn-primary" id="restart">Reload &amp; ride again</button>
     </div>
 
-    <p style="text-align:center; margin-top:1.5rem;"><a href="/" class="back">← Back to town</a></p>
+    <p class="text-center mt-6"><a href="/" class="back">← Back to town</a></p>
   </section>
 </Layout>
 
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..1782d98
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,237 @@
+/*
+ * Tailwind v4 entry. Incremental adoption: we pull in the theme + utilities
+ * layers but intentionally SKIP Preflight, because the saloon design relies on
+ * browser default typography (paragraph margins, etc.). This keeps the look
+ * pixel-identical while making utility classes and theme tokens available.
+ *
+ * Declare the layer order up front so utilities win over our base/components
+ * (importing utilities before those @layer blocks would otherwise let base and
+ * components override the utility classes).
+ */
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/*
+ * Bridge the design tokens into Tailwind's theme so utilities like
+ * `text-brass-hi`, `bg-paper`, and `font-display` exist. Colors point at the
+ * :root variables below (single source of truth); fonts live here directly so
+ * both `var(--font-display)` and the `font-display` utility resolve.
+ */
+@theme {
+  --color-leather-dark: var(--leather-dark);
+  --color-leather: var(--leather);
+  --color-paper: var(--paper);
+  --color-paper-hi: var(--paper-hi);
+  --color-paper-edge: var(--paper-edge);
+  --color-ink: var(--ink);
+  --color-ink-soft: var(--ink-soft);
+  --color-rust: var(--rust);
+  --color-blood: var(--blood);
+  --color-brass: var(--brass);
+  --color-brass-hi: var(--brass-hi);
+  --color-sage: var(--sage);
+
+  --font-display: "Rye", "Zilla Slab", serif;
+  --font-type: "Special Elite", "Courier New", monospace;
+  --font-body: "Zilla Slab", Georgia, serif;
+}
+
+@layer base {
+  :root {
+    --leather-dark: #100b06;
+    --leather: #241a10;
+    --paper: #e9dcbe;
+    --paper-hi: #f4ead0;
+    --paper-edge: #c4b08a;
+    --ink: #2b2015;
+    --ink-soft: #74603f;
+    --rust: #a8421f;
+    --blood: #7c1d12;
+    --brass: #bb8a32;
+    --brass-hi: #e0b85a;
+    --sage: #3f6b4a;
+  }
+  * { box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    margin: 0;
+    font-family: var(--font-body);
+    color: var(--paper);
+    background:
+      radial-gradient(ellipse 120% 80% at 50% -10%, #3a2812 0%, #1c1208 45%, #0d0805 100%);
+    min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+  }
+  /* film grain + dust */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0.08;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+  /* vignette */
+  body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
+  }
+  main {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2.5rem 1rem 5rem;
+  }
+
+  h1 {
+    font-family: var(--font-display);
+    font-weight: 400;
+    font-size: clamp(2rem, 6vw, 3.4rem);
+    line-height: 1.05;
+    margin: 0;
+    text-align: center;
+    color: var(--brass-hi);
+    text-shadow: 2px 2px 0 #000, 0 0 24px rgba(187,138,50,0.25);
+  }
+  h2 {
+    font-family: var(--font-display);
+    font-weight: 400;
+    margin: 0 0 0.6rem;
+    font-size: 1.5rem;
+  }
+
+  button {
+    font-family: var(--font-display);
+    font-size: 0.95rem;
+    cursor: pointer;
+    border: 2px solid var(--ink);
+    border-radius: 3px;
+    padding: 0.75rem 1.1rem;
+    color: var(--paper-hi);
+    background: var(--ink);
+    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
+    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
+  }
+  button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 0 rgba(0,0,0,0.4); }
+  button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
+  button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
+
+  input {
+    font-family: var(--font-type);
+    width: 100%;
+    padding: 0.8rem;
+    border-radius: 3px;
+    border: 2px solid var(--ink-soft);
+    background: #fbf4e2;
+    color: var(--ink);
+    margin-bottom: 0.8rem;
+  }
+  input::placeholder { color: #a8946e; }
+  input:focus { outline: none; border-color: var(--rust); }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+    html { scroll-behavior: auto; }
+  }
+}
+
+@layer components {
+  .tagline {
+    font-family: var(--font-type);
+    color: #c9b896;
+    letter-spacing: 0.04em;
+    margin: 0.6rem 0 2rem;
+    text-align: center;
+  }
+
+  /* aged-paper poster panel */
+  .panel {
+    position: relative;
+    background:
+      radial-gradient(circle at 30% 20%, var(--paper-hi), var(--paper) 70%);
+    color: var(--ink);
+    border-radius: 3px;
+    padding: 1.8rem;
+    width: 100%;
+    max-width: 540px;
+    box-shadow:
+      0 1px 0 rgba(255,255,255,0.4) inset,
+      0 0 0 1px var(--paper-edge),
+      0 18px 40px rgba(0,0,0,0.55);
+  }
+  /* double-rule ticket border */
+  .panel::before {
+    content: "";
+    position: absolute;
+    inset: 9px;
+    border: 1.5px double var(--ink-soft);
+    border-radius: 2px;
+    pointer-events: none;
+    opacity: 0.55;
+  }
+  .panel p { line-height: 1.55; }
+  .panel a { color: var(--rust); font-weight: 700; text-underline-offset: 3px; }
+
+  .btn-primary { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); border-color: #6e4f17; color: #241606; text-shadow: 0 1px 0 rgba(255,255,255,0.3); width: 100%; }
+  .btn-read { background: var(--sage); border-color: #243f2a; flex: 1; }
+  .btn-kill { background: var(--blood); border-color: #3d0e08; flex: 1; }
+  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
+
+  .hidden { display: none !important; }
+  .row { display: flex; gap: 0.8rem; margin-top: 1rem; }
+  .error { color: var(--blood); font-family: var(--font-type); font-size: 0.85rem; min-height: 1.2rem; }
+  .card-meta { color: var(--ink-soft); font-family: var(--font-type); font-size: 0.82rem; }
+  .card-summary { color: #4a3a26; margin: 0.8rem 0; }
+
+  /* header: leather strip with brass hairline */
+  header.topbar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.7rem 1.3rem;
+    background: linear-gradient(180deg, #1d140b, #150d06);
+    border-bottom: 2px solid var(--brass);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
+  }
+  .brand {
+    font-family: var(--font-display);
+    color: var(--brass-hi);
+    text-decoration: none;
+    font-size: 1.05rem;
+    text-shadow: 1px 1px 0 #000;
+  }
+  .user { display: flex; align-items: center; gap: 0.7rem; }
+  .user .uname { font-family: var(--font-type); font-size: 0.85rem; color: #d8c7a3; }
+  .user .muted { font-family: var(--font-type); color: #8c7a5a; font-size: 0.8rem; }
+  /* tin-type framed avatar */
+  .user .avatar { position: relative; width: 34px; height: 34px; display: inline-block; }
+  .user .avatar img {
+    width: 34px; height: 34px; border-radius: 4px; object-fit: cover; display: block;
+    border: 2px solid var(--brass); filter: sepia(0.45) contrast(1.05);
+  }
+  .user .avatar-fallback {
+    width: 34px; height: 34px; border-radius: 4px;
+    background: linear-gradient(180deg, var(--brass-hi), var(--brass));
+    color: #241606; border: 2px solid #6e4f17;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--font-display); font-size: 0.95rem;
+  }
+  .signout {
+    background: transparent; color: #c9b896; border: 1.5px solid #5a4730;
+    font-family: var(--font-type); font-size: 0.78rem; padding: 0.35rem 0.7rem;
+    box-shadow: none;
+  }
+  .signout:hover { filter: none; border-color: var(--brass); color: var(--brass-hi); }
+}