refactor(css): convert to TailwindCSS 4

README.md

···
 - 🎯 **Smart Redirects**: Instant HTTP 301 redirects to your target URLs
 - 🔍 **Automatic PDS Discovery**: Resolves your PDS endpoint via Slingshot
 - ⚡ **Built-in Cache**: 5-minute cache for optimal performance
+- 🎨 **Tailwind CSS 4**: Modern styling with the latest Tailwind version
 
 ## 🚀 Quick Start
 
···
 npm run lint
 ```
 
+## 🎨 Styling with Tailwind CSS 4
+
+This project uses **Tailwind CSS 4** with the new Vite plugin. See [TAILWIND.md](./TAILWIND.md) for detailed information about:
+
+- New Tailwind CSS 4 features
+- Configuration and customization
+- Dark mode support
+- Migration from v3
+
+Key features:
+
+- ✅ Native CSS imports with `@import 'tailwindcss'`
+- ✅ Faster builds with the Vite plugin
+- ✅ Automatic dark mode support
+- ✅ No config file needed for basic usage
+
 ## 📦 Tech Stack
 
 - **Framework**: [SvelteKit 2](https://kit.svelte.dev/)
+- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
 - **Runtime**: Server-side only (no client JavaScript required)
 - **Data Source**: AT Protocol (`blue.linkat.board` collection)
 - **PDS Resolution**: [Slingshot](https://slingshot.microcosm.blue) by Microcosm
···
 - [Linkat](https://linkat.blue) - The link board service
 - [AT Protocol](https://atproto.com) - The underlying protocol
 - [SvelteKit](https://kit.svelte.dev) - The web framework
+- [Tailwind CSS](https://tailwindcss.com) - CSS framework
 - [PDSls](https://pdsls.dev/) - Find your DID
 - [Slingshot](https://slingshot.microcosm.blue) - Identity resolver
 

package-lock.json

···
 				"@sveltejs/adapter-auto": "^7.0.0",
 				"@sveltejs/kit": "^2.49.0",
 				"@sveltejs/vite-plugin-svelte": "^6.2.1",
+				"@tailwindcss/vite": "^4.0.0",
 				"prettier": "^3.6.2",
 				"prettier-plugin-svelte": "^3.4.0",
 				"svelte": "^5.43.14",
 				"svelte-check": "^4.3.4",
+				"tailwindcss": "^4.0.0",
 				"typescript": "^5.9.3",
 				"vite": "^7.2.4"
 			}
 		},
 		"node_modules/@atproto/api": {
-			"version": "0.18.1",
-			"resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.18.1.tgz",
-			"integrity": "sha512-eK8Us3kRfK+KjxEq/abF3XL4qtqxh7a5GbKHaUGQqPxNGmLiIdFn4Ve4PkpP/OsDfcRMZF5CK47Jr7SARc7ttg==",
+			"version": "0.18.3",
+			"resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.18.3.tgz",
+			"integrity": "sha512-CBqyZfkcKYsr348KP4CKb9plMlZ5A96HwA/DnYscPBl6fvMZkAezAjniZX+xUILASHQJg5c+NaNw9xP8ZuyyDQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@atproto/common-web": "^0.4.3",
-				"@atproto/lexicon": "^0.5.1",
+				"@atproto/common-web": "^0.4.5",
+				"@atproto/lexicon": "^0.5.2",
 				"@atproto/syntax": "^0.4.1",
-				"@atproto/xrpc": "^0.7.5",
+				"@atproto/xrpc": "^0.7.6",
 				"await-lock": "^2.2.2",
 				"multiformats": "^9.9.0",
 				"tlds": "^1.234.0",
···
 			}
 		},
 		"node_modules/@atproto/common-web": {
-			"version": "0.4.3",
-			"resolved": "https://registry.npmjs.org/@atproto/common-web/-/common-web-0.4.3.tgz",
-			"integrity": "sha512-nRDINmSe4VycJzPo6fP/hEltBcULFxt9Kw7fQk6405FyAWZiTluYHlXOnU7GkQfeUK44OENG1qFTBcmCJ7e8pg==",
+			"version": "0.4.5",
+			"resolved": "https://registry.npmjs.org/@atproto/common-web/-/common-web-0.4.5.tgz",
+			"integrity": "sha512-Tx0xUafLm3vRvOQpbBl5eb9V8xlC7TaRXs6dAulHRkDG3Kb+P9qn3pkDteq+aeMshbVXbVa1rm3Ok4vFyuoyYA==",
 			"license": "MIT",
 			"dependencies": {
-				"graphemer": "^1.4.0",
+				"@atproto/lex-data": "0.0.1",
+				"@atproto/lex-json": "0.0.1",
+				"zod": "^3.23.8"
+			}
+		},
+		"node_modules/@atproto/lex-data": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/@atproto/lex-data/-/lex-data-0.0.1.tgz",
+			"integrity": "sha512-DrS/8cQcQs3s5t9ELAFNtyDZ8/PdiCx47ALtFEP2GnX2uCBHZRkqWG7xmu6ehjc787nsFzZBvlnz3T/gov5fGA==",
+			"license": "MIT",
+			"dependencies": {
+				"@atproto/syntax": "0.4.1",
 				"multiformats": "^9.9.0",
+				"tslib": "^2.8.1",
 				"uint8arrays": "3.0.0",
-				"zod": "^3.23.8"
+				"unicode-segmenter": "^0.14.0"
+			}
+		},
+		"node_modules/@atproto/lex-json": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/@atproto/lex-json/-/lex-json-0.0.1.tgz",
+			"integrity": "sha512-ivcF7+pDRuD/P97IEKQ/9TruunXj0w58Khvwk3M6psaI5eZT6LRsRZ4cWcKaXiFX4SHnjy+x43g0f7pPtIsERg==",
+			"license": "MIT",
+			"dependencies": {
+				"@atproto/lex-data": "0.0.1",
+				"tslib": "^2.8.1"
 			}
 		},
 		"node_modules/@atproto/lexicon": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/@atproto/lexicon/-/lexicon-0.5.1.tgz",
-			"integrity": "sha512-y8AEtYmfgVl4fqFxqXAeGvhesiGkxiy3CWoJIfsFDDdTlZUC8DFnZrYhcqkIop3OlCkkljvpSJi1hbeC1tbi8A==",
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@atproto/lexicon/-/lexicon-0.5.2.tgz",
+			"integrity": "sha512-lRmJgMA8f5j7VB5Iu5cp188ald5FuI4FlmZ7nn6EBrk1dgOstWVrI5Ft6K3z2vjyLZRG6nzknlsw+tDP63p7bQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@atproto/common-web": "^0.4.3",
+				"@atproto/common-web": "^0.4.4",
 				"@atproto/syntax": "^0.4.1",
 				"iso-datestring-validator": "^2.2.2",
 				"multiformats": "^9.9.0",
···
 			"license": "MIT"
 		},
 		"node_modules/@atproto/xrpc": {
-			"version": "0.7.5",
-			"resolved": "https://registry.npmjs.org/@atproto/xrpc/-/xrpc-0.7.5.tgz",
-			"integrity": "sha512-MUYNn5d2hv8yVegRL0ccHvTHAVj5JSnW07bkbiaz96UH45lvYNRVwt44z+yYVnb0/mvBzyD3/ZQ55TRGt7fHkA==",
+			"version": "0.7.6",
+			"resolved": "https://registry.npmjs.org/@atproto/xrpc/-/xrpc-0.7.6.tgz",
+			"integrity": "sha512-RvCf4j0JnKYWuz3QzsYCntJi3VuiAAybQsMIUw2wLWcHhchO9F7UaBZINLL2z0qc/cYWPv5NSwcVydMseoCZLA==",
 			"license": "MIT",
 			"dependencies": {
-				"@atproto/lexicon": "^0.5.1",
+				"@atproto/lexicon": "^0.5.2",
 				"zod": "^3.23.8"
 			}
 		},
···
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+			"integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"enhanced-resolve": "^5.18.3",
+				"jiti": "^2.6.1",
+				"lightningcss": "1.30.2",
+				"magic-string": "^0.30.21",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.1.17"
+			}
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+			"integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.1.17",
+				"@tailwindcss/oxide-darwin-arm64": "4.1.17",
+				"@tailwindcss/oxide-darwin-x64": "4.1.17",
+				"@tailwindcss/oxide-freebsd-x64": "4.1.17",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+				"@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+				"@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-android-arm64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+			"integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+			"integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-x64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+			"integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-freebsd-x64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+			"integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+			"integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+			"integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+			"integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+			"integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-musl": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+			"integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+			"integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+			"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.6.0",
+				"@emnapi/runtime": "^1.6.0",
+				"@emnapi/wasi-threads": "^1.1.0",
+				"@napi-rs/wasm-runtime": "^1.0.7",
+				"@tybys/wasm-util": "^0.10.1",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+			"integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+			"integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/vite": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",
+			"integrity": "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@tailwindcss/node": "4.1.17",
+				"@tailwindcss/oxide": "4.1.17",
+				"tailwindcss": "4.1.17"
+			},
+			"peerDependencies": {
+				"vite": "^5.2.0 || ^6 || ^7"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
···
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/devalue": {
 			"version": "5.5.0",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.5.0.tgz",
 			"integrity": "sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==",
 			"dev": true,
 			"license": "MIT"
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.18.3",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+			"integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
 		},
 		"node_modules/esbuild": {
 			"version": "0.25.12",
···
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
-		"node_modules/graphemer": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-			"license": "MIT"
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/is-reference": {
 			"version": "3.0.3",
···
 			"integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==",
 			"license": "MIT"
 		},
+		"node_modules/jiti": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/lightningcss": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+			"integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+			"dev": 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.30.2",
+				"lightningcss-darwin-arm64": "1.30.2",
+				"lightningcss-darwin-x64": "1.30.2",
+				"lightningcss-freebsd-x64": "1.30.2",
+				"lightningcss-linux-arm-gnueabihf": "1.30.2",
+				"lightningcss-linux-arm64-gnu": "1.30.2",
+				"lightningcss-linux-arm64-musl": "1.30.2",
+				"lightningcss-linux-x64-gnu": "1.30.2",
+				"lightningcss-linux-x64-musl": "1.30.2",
+				"lightningcss-win32-arm64-msvc": "1.30.2",
+				"lightningcss-win32-x64-msvc": "1.30.2"
+			}
+		},
+		"node_modules/lightningcss-android-arm64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+			"integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+			"integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+			"integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+			"integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+			"integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+			"integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+			"integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+			"integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+			"integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+			"integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"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.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+			"integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
···
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.43.14",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.14.tgz",
-			"integrity": "sha512-pHeUrp1A5S6RGaXhJB7PtYjL1VVjbVrJ2EfuAoPu9/1LeoMaJa/pcdCsCSb0gS4eUHAHnhCbUDxORZyvGK6kOQ==",
+			"version": "5.43.15",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.15.tgz",
+			"integrity": "sha512-FYlfm3oyLBNUy2NGqaWfKPiGOamS6YB8BJwAcF9xSXVFUjfcl9Ded1YSMu1vXEf0y0lcmBj45UgnOY2ZxhW0Cw==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
···
 				"typescript": ">=5.0.0"
 			}
 		},
+		"node_modules/tailwindcss": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+			"integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+			"integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
 		"node_modules/tinyglobby": {
 			"version": "0.2.15",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/typescript": {
 			"version": "5.9.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
···
 			"dependencies": {
 				"multiformats": "^9.4.2"
 			}
+		},
+		"node_modules/unicode-segmenter": {
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/unicode-segmenter/-/unicode-segmenter-0.14.0.tgz",
+			"integrity": "sha512-AH4lhPCJANUnSLEKnM4byboctePJzltF4xj8b+NbNiYeAkAXGh7px2K/4NANFp7dnr6+zB3e6HLu8Jj8SKyvYg==",
+			"license": "MIT"
 		},
 		"node_modules/vite": {
 			"version": "7.2.4",

package.json

···
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.49.0",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.0.0",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"svelte": "^5.43.14",
 		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.0.0",
 		"typescript": "^5.9.3",
 		"vite": "^7.2.4"
 	}

src/app.css

···
+@import 'tailwindcss';
+
+/* 
+ * Semantic Color System - Green-hued theme optimized for Light/Dark Modes
+ * Based on forest green palette with excellent contrast and readability
+ */
+
+:root {
+	/* Light Mode - Darker, more subdued palette */
+	--color-background: 237 247 237; /* Soft gray-green background */
+	--color-surface: 220 242 220; /* Darker green-tinted surface */
+	--color-surface-elevated: 200 230 200; /* Medium green surface */
+
+	--color-text-primary: 5 46 22; /* green-950 - very dark forest green */
+	--color-text-secondary: 22 101 52; /* green-800 */
+	--color-text-tertiary: 21 128 61; /* green-700 */
+
+	--color-border: 160 210 160; /* Darker green border */
+	--color-border-strong: 120 190 120; /* Strong green border */
+
+	/* Primary - Vibrant emerald for links/actions */
+	--color-primary: 5 150 105; /* emerald-600 */
+	--color-primary-hover: 4 120 87; /* emerald-700 */
+
+	/* Success - Rich green */
+	--color-success: 22 163 74; /* green-600 */
+	--color-success-bg: 220 242 220; /* Darker green-50 */
+	--color-success-border: 120 190 120; /* green-300 equivalent */
+
+	/* Error - Strong red for visibility */
+	--color-error: 185 28 28; /* red-700 - darker */
+	--color-error-bg: 254 226 226; /* Darker red-100 */
+	--color-error-border: 248 113 113; /* red-400 */
+
+	/* Code blocks */
+	--color-code-bg: 200 230 200; /* Darker green surface */
+}
+
+.dark {
+	/* Dark Mode - Deep forest green with teal accents */
+	--color-background: 3 15 10; /* Very dark forest green (almost black) */
+	--color-surface: 5 30 20; /* Dark green-tinted */
+	--color-surface-elevated: 10 50 35; /* Medium dark green */
+
+	--color-text-primary: 240 253 244; /* green-50 - bright mint */
+	--color-text-secondary: 187 247 208; /* green-200 */
+	--color-text-tertiary: 134 239 172; /* green-300 */
+
+	--color-border: 22 101 52; /* green-800 */
+	--color-border-strong: 34 197 94; /* green-500 */
+
+	/* Primary - Bright emerald for dark mode */
+	--color-primary: 52 211 153; /* emerald-400 */
+	--color-primary-hover: 110 231 183; /* emerald-300 */
+
+	/* Success - Bright green for dark mode */
+	--color-success: 74 222 128; /* green-400 */
+	--color-success-bg: 5 46 22; /* green-950 */
+	--color-success-border: 34 197 94; /* green-500 */
+
+	/* Error - Softer red for dark mode */
+	--color-error: 248 113 113; /* red-400 */
+	--color-error-bg: 69 10 10; /* red-950 */
+	--color-error-border: 220 38 38; /* red-600 */
+
+	/* Code blocks */
+	--color-code-bg: 5 30 20; /* Dark green-tinted */
+}
+
+/* Apply base background and text colors to html/body */
+html {
+	background-color: rgb(var(--color-background));
+	color: rgb(var(--color-text-primary));
+	min-height: 100vh;
+}
+
+body {
+	background-color: rgb(var(--color-background));
+	color: rgb(var(--color-text-primary));
+	min-height: 100vh;
+}

src/lib/utils/encoding.ts

···
 const BASE = BASE_CHARS.length;
 
 function hashString(text: string): bigint {
-    let hash = 1469598103934665603n;
-    for (let i = 0; i < text.length; i++) {
-        const char = BigInt(text.charCodeAt(i));
-        hash = (hash ^ char) * 1099511628211n;
-    }
-    return hash < 0n ? -hash : hash;
+	let hash = 1469598103934665603n;
+	for (let i = 0; i < text.length; i++) {
+		const char = BigInt(text.charCodeAt(i));
+		hash = (hash ^ char) * 1099511628211n;
+	}
+	return hash < 0n ? -hash : hash;
 }
 
 function toBase(num: bigint, length: number, seed = ''): string {
-    let encoded = '';
-    let n = num;
-    for (let i = 0; i < length; i++) {
-        let rem: bigint;
-        if (n > 0n) {
-            rem = n % BigInt(BASE);
-            n = n / BigInt(BASE);
-        } else {
-            const fallback = hashString(num.toString() + '::' + seed + '::' + i.toString());
-            rem = fallback % BigInt(BASE);
-        }
-        encoded = BASE_CHARS[Number(rem)] + encoded;
-    }
-    return encoded;
+	let encoded = '';
+	let n = num;
+	for (let i = 0; i < length; i++) {
+		let rem: bigint;
+		if (n > 0n) {
+			rem = n % BigInt(BASE);
+			n = n / BigInt(BASE);
+		} else {
+			const fallback = hashString(num.toString() + '::' + seed + '::' + i.toString());
+			rem = fallback % BigInt(BASE);
+		}
+		encoded = BASE_CHARS[Number(rem)] + encoded;
+	}
+	return encoded;
 }
 
 function normaliseUrl(url: string): string {
-    try {
-        const parsed = new URL(url.startsWith('http') ? url : `https://${url}`);
-        parsed.hash = '';
+	try {
+		const parsed = new URL(url.startsWith('http') ? url : `https://${url}`);
+		parsed.hash = '';
 
-        const sortedParams = [...parsed.searchParams.entries()].sort((a, b) => a[0].localeCompare(b[0]));
-        parsed.search = '';
-        for (const [key, value] of sortedParams) parsed.searchParams.append(key, value);
+		const sortedParams = [...parsed.searchParams.entries()].sort((a, b) =>
+			a[0].localeCompare(b[0])
+		);
+		parsed.search = '';
+		for (const [key, value] of sortedParams) parsed.searchParams.append(key, value);
 
-        parsed.hostname = parsed.hostname.toLowerCase();
-        parsed.protocol = 'https:';
-        return parsed.toString();
-    } catch (e) {
-        return url.trim();
-    }
+		parsed.hostname = parsed.hostname.toLowerCase();
+		parsed.protocol = 'https:';
+		return parsed.toString();
+	} catch (e) {
+		return url.trim();
+	}
 }
 
 function getBaseDomain(url: string): string {
-    try {
-        const domain = getDomain(url, { allowPrivateDomains: false });
-        if (domain) return domain.toLowerCase();
+	try {
+		const domain = getDomain(url, { allowPrivateDomains: false });
+		if (domain) return domain.toLowerCase();
 
-        const parsed = parse(url, { extractHostname: true });
-        return (parsed.hostname ?? '').toLowerCase();
-    } catch (e) {
-        return '';
-    }
+		const parsed = parse(url, { extractHostname: true });
+		return (parsed.hostname ?? '').toLowerCase();
+	} catch (e) {
+		return '';
+	}
 }
 
 export function encodeUrl(url: string, length: number = SHORTCODE.DEFAULT_LENGTH): string {
-    if (!Number.isInteger(length) || length < 3) length = SHORTCODE.DEFAULT_LENGTH;
+	if (!Number.isInteger(length) || length < 3) length = SHORTCODE.DEFAULT_LENGTH;
 
-    const DOMAIN_PREFIX_LENGTH = 2;
+	const DOMAIN_PREFIX_LENGTH = 2;
 
-    const normalised = normaliseUrl(url);
-    const apex = getBaseDomain(normalised) || '';
+	const normalised = normaliseUrl(url);
+	const apex = getBaseDomain(normalised) || '';
 
-    const domainHash = hashString(apex || normalised);
-    const domainPrefix = toBase(domainHash, DOMAIN_PREFIX_LENGTH, 'domain');
+	const domainHash = hashString(apex || normalised);
+	const domainPrefix = toBase(domainHash, DOMAIN_PREFIX_LENGTH, 'domain');
 
-    const remaining = Math.max(1, length - DOMAIN_PREFIX_LENGTH);
+	const remaining = Math.max(1, length - DOMAIN_PREFIX_LENGTH);
 
-    let hostname = '';
-    try {
-        hostname = new URL(normalised).hostname.toLowerCase();
-    } catch (e) {
-        try { hostname = new URL(url.startsWith('http') ? url : `https://${url}`).hostname.toLowerCase(); } catch { hostname = ''; }
-    }
+	let hostname = '';
+	try {
+		hostname = new URL(normalised).hostname.toLowerCase();
+	} catch (e) {
+		try {
+			hostname = new URL(url.startsWith('http') ? url : `https://${url}`).hostname.toLowerCase();
+		} catch {
+			hostname = '';
+		}
+	}
 
-    let subLevels: string[] = [];
-    if (apex && hostname && hostname !== apex) {
-        const sub = hostname.replace(new RegExp(`\.${apex}$`), '');
-        subLevels = sub.split('.');
-    }
+	let subLevels: string[] = [];
+	if (apex && hostname && hostname !== apex) {
+		const sub = hostname.replace(new RegExp(`\.${apex}$`), '');
+		subLevels = sub.split('.');
+	}
 
-    const MIN_URL_CORE = 1;
-    const MIN_TAIL = 1;
-    const tailLength = remaining;
+	const MIN_URL_CORE = 1;
+	const MIN_TAIL = 1;
+	const tailLength = remaining;
 
-    const urlHash = hashString(normalised + '::url');
-    const urlCoreLength = remaining - subLevels.length;
-    const urlCore = toBase(urlHash, Math.max(MIN_URL_CORE, urlCoreLength), 'url');
+	const urlHash = hashString(normalised + '::url');
+	const urlCoreLength = remaining - subLevels.length;
+	const urlCore = toBase(urlHash, Math.max(MIN_URL_CORE, urlCoreLength), 'url');
 
-    const subTail: string[] = [];
-    const reversedSubLevels = subLevels.slice().reverse();
-    for (let i = 0; i < reversedSubLevels.length; i++) {
-        const h = hashString(reversedSubLevels[i] + '::sub');
-        subTail.push(toBase(h, 1, 'sub' + i));
-    }
+	const subTail: string[] = [];
+	const reversedSubLevels = subLevels.slice().reverse();
+	for (let i = 0; i < reversedSubLevels.length; i++) {
+		const h = hashString(reversedSubLevels[i] + '::sub');
+		subTail.push(toBase(h, 1, 'sub' + i));
+	}
 
-    let tail = subTail.join('');
-    if (!tail) {
-        const fallbackHash = hashString(normalised + '::fallback');
-        tail = toBase(fallbackHash, tailLength, 'sub');
-    }
+	let tail = subTail.join('');
+	if (!tail) {
+		const fallbackHash = hashString(normalised + '::fallback');
+		tail = toBase(fallbackHash, tailLength, 'sub');
+	}
 
-    let out = domainPrefix + urlCore + tail;
-    if (out.length > length) out = out.slice(0, length);
-    if (out.length < length) {
-        let pad = '';
-        let i = 0;
-        while (out.length + pad.length < length) {
-            const h = hashString(normalised + '::pad2::' + i);
-            pad += toBase(h, Math.min(4, length - out.length - pad.length), 'pad2' + i);
-            i++;
-        }
-        out += pad.slice(0, length - out.length);
-    }
+	let out = domainPrefix + urlCore + tail;
+	if (out.length > length) out = out.slice(0, length);
+	if (out.length < length) {
+		let pad = '';
+		let i = 0;
+		while (out.length + pad.length < length) {
+			const h = hashString(normalised + '::pad2::' + i);
+			pad += toBase(h, Math.min(4, length - out.length - pad.length), 'pad2' + i);
+			i++;
+		}
+		out += pad.slice(0, length - out.length);
+	}
 
-    // --- LOGGING MAX COMBINATIONS ---
-    const maxCombinations = BigInt(BASE) ** BigInt(length);
-    console.log(`[Shortcode Info] URL: ${url}`);
-    console.log(`[Shortcode Info] Length: ${length}, Charset: ${BASE} chars`);
-    console.log(`[Shortcode Info] Max possible combinations: ${maxCombinations.toString()}`);
-    console.log(`[Shortcode Info] Domain prefix: ${domainPrefix}, URL core: ${urlCore}, Subdomain tail: ${tail}`);
+	// --- LOGGING MAX COMBINATIONS ---
+	const maxCombinations = BigInt(BASE) ** BigInt(length);
+	console.log(`[Shortcode Info] URL: ${url}`);
+	console.log(`[Shortcode Info] Length: ${length}, Charset: ${BASE} chars`);
+	console.log(`[Shortcode Info] Max possible combinations: ${maxCombinations.toString()}`);
+	console.log(
+		`[Shortcode Info] Domain prefix: ${domainPrefix}, URL core: ${urlCore}, Subdomain tail: ${tail}`
+	);
 
-    return out;
+	return out;
 }
 
 export function isValidShortcode(code: string): boolean {
-    return /^[0-9a-zA-Z]+$/.test(code);
+	return /^[0-9a-zA-Z]+$/.test(code);
 }
 
 export function getMaxCombinations(length: number): number {
-    return Math.pow(BASE, length);
+	return Math.pow(BASE, length);
 }

src/routes/+layout.svelte

···
 <script lang="ts">
+	import '../app.css';
+
 	let { children } = $props();
 </script>
 
···
 
 			if (prefersDark) {
 				htmlElement.classList.add('dark');
-				htmlElement.style.colorScheme = 'dark';
 			} else {
 				htmlElement.classList.remove('dark');
-				htmlElement.style.colorScheme = 'light';
 			}
 		})();
 	</script>
 </svelte:head>
 
-{@render children()}
-
-<style>
-	:global(*) {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
-
-	:global(html) {
-		min-height: 100vh;
-		background: #ffffff;
-		color: #1a1a1a;
-		transition:
-			background-color 0.3s,
-			color 0.3s;
-	}
-
-	:global(html.dark) {
-		background: #1a1a1a;
-		color: #e0e0e0;
-	}
-
-	:global(html.dark .info) {
-		background: #1e3a1e;
-		border-color: #4caf50;
-		color: #e0e0e0;
-	}
-
-	:global(html.dark .error) {
-		background: #3a1e1e;
-		border-color: #f44336;
-		color: #e0e0e0;
-	}
-
-	:global(html.dark code) {
-		background: #2a2a2a;
-		color: #e0e0e0;
-	}
-
-	:global(html.dark .links a),
-	:global(html.dark .api li) {
-		background: #2a2a2a;
-	}
-
-	:global(html.dark .links a:hover) {
-		background: #333;
-	}
-
-	:global(html.dark h1),
-	:global(html.dark h2) {
-		color: #e0e0e0;
-	}
-
-	:global(html.dark .title),
-	:global(html.dark .api span),
-	:global(html.dark .empty),
-	:global(html.dark footer) {
-		color: #b0b0b0;
-	}
-
-	:global(html.dark footer) {
-		border-top-color: #333;
-	}
-</style>
+<div
+	style="min-height: 100vh; background-color: rgb(var(--color-background)); color: rgb(var(--color-text-primary))"
+>
+	{@render children()}
+</div>

src/routes/+page.svelte

···
 	<meta name="description" content="A server-side link shortening service powered by Linkat" />
 </svelte:head>
 
-<main>
-	<h1>AT Protocol Link Shortener</h1>
+<main class="mx-auto max-w-3xl px-4 py-8 font-sans leading-relaxed">
+	<h1 class="mb-8 text-3xl font-bold" style="color: rgb(var(--color-text-primary))">
+		AT Protocol Link Shortener
+	</h1>
 
-	<section>
-		<h2>Service Status</h2>
+	<section class="mb-12">
+		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
+			Service Status
+		</h2>
 		{#if data.error}
-			<div class="error">
-				<p><strong>⚠️ Configuration Error</strong></p>
-				<p>{data.error}</p>
+			<div
+				class="mb-4 rounded-lg border p-4"
+				style="background-color: rgb(var(--color-error-bg)); border-color: rgb(var(--color-error-border))"
+			>
+				<p class="font-bold" style="color: rgb(var(--color-text-primary))">
+					⚠️ Configuration Error
+				</p>
+				<p style="color: rgb(var(--color-text-primary))">{data.error}</p>
 				{#if data.did === 'NOT_CONFIGURED'}
-					<div class="help">
-						<p><strong>Quick Fix:</strong></p>
-						<ol>
-							<li>Create a <code>.env</code> file in your project root</li>
+					<div class="mt-4 border-t pt-4" style="border-color: rgb(var(--color-error-border))">
+						<p class="font-bold" style="color: rgb(var(--color-text-primary))">Quick Fix:</p>
+						<ol
+							class="ml-6 mt-2 list-decimal space-y-2 leading-8"
+							style="color: rgb(var(--color-text-primary))"
+						>
 							<li>
-								Add: <code>ATPROTO_DID=did:plc:your-did-here</code>
+								Create a <code
+									class="rounded px-2 py-1 font-mono text-sm"
+									style="background-color: rgb(var(--color-code-bg))">. env</code
+								> file in your project root
 							</li>
 							<li>
-								Find your DID at <a href="https://pdsls.dev/" target="_blank">pdsls.dev</a>
+								Add: <code
+									class="rounded px-2 py-1 font-mono text-sm"
+									style="background-color: rgb(var(--color-code-bg))"
+									>ATPROTO_DID=did:plc:your-did-here</code
+								>
 							</li>
-							<li>Run <code>npm run test:config</code> to verify</li>
+							<li>
+								Find your DID at <a
+									href="https://pdsls.dev/"
+									target="_blank"
+									class="underline"
+									style="color: rgb(var(--color-error))">pdsls.dev</a
+								>
+							</li>
+							<li>
+								Run <code
+									class="rounded px-2 py-1 font-mono text-sm"
+									style="background-color: rgb(var(--color-code-bg))">npm run test:config</code
+								> to verify
+							</li>
 							<li>Restart the server</li>
 						</ol>
 					</div>
 				{/if}
 			</div>
 		{:else}
-			<div class="info">
-				<p>✓ Service is running</p>
-				<p>✓ Configured DID: <code>{data.did}</code></p>
-				<p>✓ Active links: {data.linkCount}</p>
+			<div
+				class="mb-4 rounded-lg border p-4"
+				style="background-color: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border))"
+			>
+				<p style="color: rgb(var(--color-text-primary))">✓ Service is running</p>
+				<p style="color: rgb(var(--color-text-primary))">
+					✓ Configured DID: <code
+						class="rounded px-2 py-1 font-mono text-sm"
+						style="background-color: rgb(var(--color-code-bg))">{data.did}</code
+					>
+				</p>
+				<p style="color: rgb(var(--color-text-primary))">✓ Active links: {data.linkCount}</p>
 			</div>
 		{/if}
 	</section>
 
-	<section>
-		<h2>Available Short Links</h2>
+	<section class="mb-12">
+		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
+			Available Short Links
+		</h2>
 		{#if data.links && data.links.length > 0}
-			<ul class="links">
+			<ul class="m-0 list-none p-0">
 				{#each data.links as link}
-					<li>
-						<a href="/{link.shortcode}">
+					<li class="mb-2">
+						<a
+							href="/{link.shortcode}"
+							class="flex items-center gap-3 rounded-lg p-3 no-underline transition-colors"
+							style="background-color: rgb(var(--color-surface)); color: rgb(var(--color-text-primary))"
+							onmouseenter={(e) => {
+								e.currentTarget.style.backgroundColor = `rgb(var(--color-surface-elevated))`;
+							}}
+							onmouseleave={(e) => {
+								e.currentTarget.style.backgroundColor = `rgb(var(--color-surface))`;
+							}}
+						>
 							{#if link.emoji}
-								<span class="emoji">{link.emoji}</span>
+								<span class="shrink-0 text-2xl">{link.emoji}</span>
 							{/if}
-							<code>/{link.shortcode}</code>
-							<span class="title">{link.title}</span>
+							<code
+								class="rounded px-2 py-1 font-mono text-sm"
+								style="background-color: rgb(var(--color-code-bg))">/{link.shortcode}</code
+							>
+							<span style="color: rgb(var(--color-text-secondary))">{link.title}</span>
 						</a>
 					</li>
 				{/each}
 			</ul>
 		{:else if !data.error}
-			<p class="empty">
+			<p class="italic" style="color: rgb(var(--color-text-secondary))">
 				No short links configured yet. Add links to your <a
 					href="https://linkat.blue"
-					target="_blank">Linkat board</a
+					target="_blank"
+					class="no-underline hover:underline"
+					style="color: rgb(var(--color-primary))"
+					onmouseenter={(e) => {
+						e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
+					}}
+					onmouseleave={(e) => {
+						e.currentTarget.style.color = `rgb(var(--color-primary))`;
+					}}>Linkat board</a
 				>!
 			</p>
 		{/if}
 	</section>
 
-	<section>
-		<h2>API Endpoints</h2>
-		<ul class="api">
-			<li>
-				<a href="/api/links">
-					<code>GET /api/links</code>
-					<span>List all short links (JSON)</span>
+	<section class="mb-12">
+		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
+			API Endpoints
+		</h2>
+		<ul class="m-0 list-none p-0">
+			<li class="mb-3 rounded-lg p-3" style="background-color: rgb(var(--color-surface))">
+				<a
+					href="/api/links"
+					class="flex items-center gap-4 no-underline hover:underline"
+					style="color: rgb(var(--color-text-primary))"
+				>
+					<code
+						class="rounded px-2 py-1 font-mono text-sm"
+						style="background-color: rgb(var(--color-code-bg))">GET /api/links</code
+					>
+					<span style="color: rgb(var(--color-text-secondary))">List all short links (JSON)</span>
 				</a>
 			</li>
-			<li>
-				<code>GET /:shortcode</code>
-				<span>Redirect to target URL (301)</span>
+			<li class="mb-3 rounded-lg p-3" style="background-color: rgb(var(--color-surface))">
+				<div class="flex items-center gap-4" style="color: rgb(var(--color-text-primary))">
+					<code
+						class="rounded px-2 py-1 font-mono text-sm"
+						style="background-color: rgb(var(--color-code-bg))">GET /:shortcode</code
+					>
+					<span style="color: rgb(var(--color-text-secondary))">Redirect to target URL (301)</span>
+				</div>
 			</li>
 		</ul>
 	</section>
 
-	<footer>
-		<p>
-			Powered by <a href="https://linkat.blue" target="_blank" rel="noopener noreferrer">Linkat</a>,
-			<a href="https://atproto.com" target="_blank" rel="noopener noreferrer">AT Protocol</a>, and
-			<a href="https://slingshot.microcosm.blue" target="_blank" rel="noopener noreferrer"
-				>Slingshot</a
+	<footer
+		class="mt-16 border-t pt-8 text-center text-sm"
+		style="border-color: rgb(var(--color-border)); color: rgb(var(--color-text-secondary))"
+	>
+		<p class="mb-2">
+			Powered by <a
+				href="https://linkat.blue"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="no-underline hover:underline"
+				style="color: rgb(var(--color-primary))"
+				onmouseenter={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
+				}}
+				onmouseleave={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary))`;
+				}}>Linkat</a
+			>,
+			<a
+				href="https://atproto.com"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="no-underline hover:underline"
+				style="color: rgb(var(--color-primary))"
+				onmouseenter={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
+				}}
+				onmouseleave={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary))`;
+				}}>AT Protocol</a
+			>, and
+			<a
+				href="https://slingshot.microcosm.blue"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="no-underline hover:underline"
+				style="color: rgb(var(--color-primary))"
+				onmouseenter={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
+				}}
+				onmouseleave={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary))`;
+				}}>Slingshot</a
 			>
 		</p>
 		<p>
 			<a
 				href="https://github.com/ewanc26/atproto-shortlink"
 				target="_blank"
-				rel="noopener noreferrer">Source Code on GitHub</a
+				rel="noopener noreferrer"
+				class="no-underline hover:underline"
+				style="color: rgb(var(--color-primary))"
+				onmouseenter={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
+				}}
+				onmouseleave={(e) => {
+					e.currentTarget.style.color = `rgb(var(--color-primary))`;
+				}}>Source Code on GitHub</a
 			>
 		</p>
 	</footer>
 </main>
-
-<style>
-	main {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem 1rem;
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-		line-height: 1.6;
-	}
-
-	h1 {
-		font-size: 2rem;
-		margin-bottom: 2rem;
-		color: #1a1a1a;
-	}
-
-	h2 {
-		font-size: 1.5rem;
-		margin-top: 2rem;
-		margin-bottom: 1rem;
-		color: #333;
-	}
-
-	section {
-		margin-bottom: 3rem;
-	}
-
-	.info,
-	.error {
-		padding: 1rem;
-		border-radius: 0.5rem;
-		margin-bottom: 1rem;
-	}
-
-	.info {
-		background: #e8f5e9;
-		border: 1px solid #4caf50;
-	}
-
-	.error {
-		background: #ffebee;
-		border: 1px solid #f44336;
-	}
-
-	.help {
-		margin-top: 1rem;
-		padding-top: 1rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-	}
-
-	.help ol {
-		margin-left: 1.5rem;
-		margin-top: 0.5rem;
-		line-height: 1.8;
-	}
-
-	.help a {
-		color: #d32f2f;
-		text-decoration: underline;
-	}
-
-	code {
-		background: #f5f5f5;
-		padding: 0.2rem 0.4rem;
-		border-radius: 0.25rem;
-		font-family: 'Courier New', monospace;
-		font-size: 0.9rem;
-	}
-
-	.links {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.links li {
-		margin-bottom: 0.5rem;
-	}
-
-	.links a {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.75rem;
-		background: #f8f9fa;
-		border-radius: 0.5rem;
-		text-decoration: none;
-		color: inherit;
-		transition: background 0.2s;
-	}
-
-	.links a:hover {
-		background: #e9ecef;
-	}
-
-	.emoji {
-		font-size: 1.5rem;
-		flex-shrink: 0;
-	}
-
-	.title {
-		color: #666;
-	}
-
-	.empty {
-		color: #666;
-		font-style: italic;
-	}
-
-	.empty a {
-		color: #0066cc;
-		text-decoration: none;
-	}
-
-	.empty a:hover {
-		text-decoration: underline;
-	}
-
-	.api {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.api li {
-		margin-bottom: 0.75rem;
-		padding: 0.75rem;
-		background: #f8f9fa;
-		border-radius: 0.5rem;
-	}
-
-	.api a {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		text-decoration: none;
-		color: inherit;
-	}
-
-	.api a:hover {
-		text-decoration: underline;
-	}
-
-	.api span {
-		color: #666;
-	}
-
-	footer {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid #e0e0e0;
-		text-align: center;
-		color: #666;
-		font-size: 0.9rem;
-	}
-
-	footer a {
-		color: #0066cc;
-		text-decoration: none;
-	}
-
-	footer a:hover {
-		text-decoration: underline;
-	}
-</style>

src/routes/[shortcode]/+server.ts

···
 		console.warn(`[Redirect] Shortcode not found: ${shortcode}`);
 		return new Response(
 			`<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Link Not Found - AT Protocol Link Shortener</title>
 	<style>
+		/* Inline critical CSS for semantic colors */
+		:root {
+			--color-bg: 255 255 255;
+			--color-text: 15 23 42;
+			--color-text-secondary: 71 85 105;
+			--color-surface: 248 250 252;
+			--color-primary: 59 130 246;
+		}
+		
+		@media (prefers-color-scheme: dark) {
+			:root {
+				--color-bg: 15 23 42;
+				--color-text: 248 250 252;
+				--color-text-secondary: 203 213 225;
+				--color-surface: 30 41 59;
+				--color-primary: 96 165 250;
+			}
+		}
+		
 		body {
+			margin: 0;
 			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+			background: rgb(var(--color-bg));
+			color: rgb(var(--color-text));
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: 100vh;
+		}
+		
+		.container {
 			max-width: 600px;
-			margin: 4rem auto;
 			padding: 2rem;
 			text-align: center;
 		}
-		h1 { font-size: 3rem; margin-bottom: 1rem; }
-		p { color: #666; line-height: 1.6; margin-bottom: 1rem; }
-		code { background: #f5f5f5; padding: 0.2rem 0.4rem; border-radius: 0.25rem; }
-		a { color: #0066cc; text-decoration: none; }
-		a:hover { text-decoration: underline; }
+		
+		h1 {
+			font-size: 3rem;
+			margin-bottom: 1rem;
+		}
+		
+		h2 {
+			font-size: 1.5rem;
+			font-weight: 600;
+			margin-bottom: 1rem;
+		}
+		
+		p {
+			color: rgb(var(--color-text-secondary));
+			line-height: 1.6;
+			margin-bottom: 1rem;
+		}
+		
+		code {
+			background: rgb(var(--color-surface));
+			padding: 0.2rem 0.5rem;
+			border-radius: 0.25rem;
+			font-family: 'Courier New', monospace;
+			font-size: 0.875rem;
+		}
+		
+		a {
+			color: rgb(var(--color-primary));
+			text-decoration: none;
+		}
+		
+		a:hover {
+			text-decoration: underline;
+		}
 	</style>
 </head>
 <body>
-	<h1>🔍 404</h1>
-	<h2>Short Link Not Found</h2>
-	<p>The short link <code>/${shortcode}</code> doesn't exist.</p>
-	<p><a href="/">← View all available links</a></p>
+	<div class="container">
+		<h1>🔍 404</h1>
+		<h2>Short Link Not Found</h2>
+		<p>
+			The short link <code>/${shortcode}</code> doesn't exist.
+		</p>
+		<p>
+			<a href="/">← View all available links</a>
+		</p>
+	</div>
 </body>
 </html>`,
 			{

vite.config.ts

···
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), tailwindcss()]
 });