diff --git a/deno.json b/deno.json
index a4b793c..beda9ac 100644
--- a/deno.json
+++ b/deno.json
@@ -46,10 +46,10 @@
 		"@andyburke/lurid": "jsr:@andyburke/lurid@^0.2.0",
 		"@andyburke/serverus": "jsr:@andyburke/serverus@^0.16.0",
 		"@da/bcrypt": "jsr:@da/bcrypt@^1.0.1",
-		"@std/assert": "jsr:@std/assert@^1.0.17",
+		"@std/assert": "jsr:@std/assert@^1.0.19",
 		"@std/encoding": "jsr:@std/encoding@^1.0.10",
-		"@std/fs": "jsr:@std/fs@^1.0.22",
-		"@std/http": "jsr:@std/http@^1.0.23",
+		"@std/fs": "jsr:@std/fs@^1.0.23",
+		"@std/http": "jsr:@std/http@^1.0.25",
 		"@std/media-types": "jsr:@std/media-types@^1.1.0",
 		"@std/path": "jsr:@std/path@^1.1.4"
 	}
diff --git a/deno.lock b/deno.lock
index 0e06569..e974966 100644
--- a/deno.lock
+++ b/deno.lock
@@ -6,28 +6,27 @@
     "jsr:@andyburke/serverus@0.16": "0.16.0",
     "jsr:@da/bcrypt@*": "1.0.1",
     "jsr:@da/bcrypt@^1.0.1": "1.0.1",
-    "jsr:@std/assert@^1.0.17": "1.0.17",
-    "jsr:@std/cli@^1.0.19": "1.0.25",
-    "jsr:@std/cli@^1.0.20": "1.0.25",
-    "jsr:@std/cli@^1.0.21": "1.0.25",
-    "jsr:@std/cli@^1.0.25": "1.0.25",
+    "jsr:@std/assert@^1.0.19": "1.0.19",
+    "jsr:@std/cli@^1.0.19": "1.0.28",
+    "jsr:@std/cli@^1.0.20": "1.0.28",
+    "jsr:@std/cli@^1.0.21": "1.0.28",
+    "jsr:@std/cli@^1.0.28": "1.0.28",
     "jsr:@std/encoding@^1.0.10": "1.0.10",
-    "jsr:@std/fmt@^1.0.6": "1.0.8",
-    "jsr:@std/fmt@^1.0.8": "1.0.8",
-    "jsr:@std/fs@^1.0.18": "1.0.22",
-    "jsr:@std/fs@^1.0.19": "1.0.22",
-    "jsr:@std/fs@^1.0.21": "1.0.22",
-    "jsr:@std/fs@^1.0.22": "1.0.22",
+    "jsr:@std/fmt@^1.0.6": "1.0.9",
+    "jsr:@std/fmt@^1.0.9": "1.0.9",
+    "jsr:@std/fs@^1.0.18": "1.0.23",
+    "jsr:@std/fs@^1.0.19": "1.0.23",
+    "jsr:@std/fs@^1.0.23": "1.0.23",
     "jsr:@std/html@^1.0.5": "1.0.5",
-    "jsr:@std/http@^1.0.20": "1.0.23",
-    "jsr:@std/http@^1.0.23": "1.0.23",
+    "jsr:@std/http@^1.0.20": "1.0.25",
+    "jsr:@std/http@^1.0.25": "1.0.25",
     "jsr:@std/internal@^1.0.12": "1.0.12",
     "jsr:@std/media-types@^1.1.0": "1.1.0",
     "jsr:@std/net@^1.0.6": "1.0.6",
     "jsr:@std/path@^1.1.0": "1.1.4",
     "jsr:@std/path@^1.1.1": "1.1.4",
     "jsr:@std/path@^1.1.4": "1.1.4",
-    "jsr:@std/streams@^1.0.16": "1.0.16",
+    "jsr:@std/streams@^1.0.17": "1.0.17",
     "npm:@types/node@*": "22.15.15"
   },
   "jsr": {
@@ -59,23 +58,23 @@
     "@da/bcrypt@1.0.1": {
       "integrity": "d2172d3acbcff52e0465557a1a48b1ff1c92df08c90712dae5372255a8c45eb3"
     },
-    "@std/assert@1.0.17": {
-      "integrity": "df5ebfffe77c03b3fa1401e11c762cc8f603d51021c56c4d15a8c7ab45e90dbe",
+    "@std/assert@1.0.19": {
+      "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e",
       "dependencies": [
         "jsr:@std/internal"
       ]
     },
-    "@std/cli@1.0.25": {
-      "integrity": "1f85051b370c97a7a9dfc6ba626e7ed57a91bea8c081597276d1e78d929d8c91"
+    "@std/cli@1.0.28": {
+      "integrity": "74ef9b976db59ca6b23a5283469c9072be6276853807a83ec6c7ce412135c70a"
     },
     "@std/encoding@1.0.10": {
       "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1"
     },
-    "@std/fmt@1.0.8": {
-      "integrity": "71e1fc498787e4434d213647a6e43e794af4fd393ef8f52062246e06f7e372b7"
+    "@std/fmt@1.0.9": {
+      "integrity": "2487343e8899fb2be5d0e3d35013e54477ada198854e52dd05ed0422eddcabe0"
     },
-    "@std/fs@1.0.22": {
-      "integrity": "de0f277a58a867147a8a01bc1b181d0dfa80bfddba8c9cf2bacd6747bcec9308",
+    "@std/fs@1.0.23": {
+      "integrity": "3ecbae4ce4fee03b180fa710caff36bb5adb66631c46a6460aaad49515565a37",
       "dependencies": [
         "jsr:@std/internal",
         "jsr:@std/path@^1.1.4"
@@ -84,13 +83,13 @@
     "@std/html@1.0.5": {
       "integrity": "4e2d693f474cae8c16a920fa5e15a3b72267b94b84667f11a50c6dd1cb18d35e"
     },
-    "@std/http@1.0.23": {
-      "integrity": "6634e9e034c589bf35101c1b5ee5bbf052a5987abca20f903e58bdba85c80dee",
+    "@std/http@1.0.25": {
+      "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193",
       "dependencies": [
-        "jsr:@std/cli@^1.0.25",
+        "jsr:@std/cli@^1.0.28",
         "jsr:@std/encoding",
-        "jsr:@std/fmt@^1.0.8",
-        "jsr:@std/fs@^1.0.21",
+        "jsr:@std/fmt@^1.0.9",
+        "jsr:@std/fs@^1.0.23",
         "jsr:@std/html",
         "jsr:@std/media-types",
         "jsr:@std/net",
@@ -113,8 +112,8 @@
         "jsr:@std/internal"
       ]
     },
-    "@std/streams@1.0.16": {
-      "integrity": "85030627befb1767c60d4f65cb30fa2f94af1d6ee6e5b2515b76157a542e89c4"
+    "@std/streams@1.0.17": {
+      "integrity": "7859f3d9deed83cf4b41f19223d4a67661b3d3819e9fc117698f493bf5992140"
     }
   },
   "npm": {
@@ -137,10 +136,10 @@
       "jsr:@andyburke/lurid@0.2",
       "jsr:@andyburke/serverus@0.16",
       "jsr:@da/bcrypt@^1.0.1",
-      "jsr:@std/assert@^1.0.17",
+      "jsr:@std/assert@^1.0.19",
       "jsr:@std/encoding@^1.0.10",
-      "jsr:@std/fs@^1.0.22",
-      "jsr:@std/http@^1.0.23",
+      "jsr:@std/fs@^1.0.23",
+      "jsr:@std/http@^1.0.25",
       "jsr:@std/media-types@^1.1.0",
       "jsr:@std/path@^1.1.4"
     ]
diff --git a/public/api/events/index.ts b/public/api/events/index.ts
index 2bf633b..41b5aa8 100644
--- a/public/api/events/index.ts
+++ b/public/api/events/index.ts
@@ -41,13 +41,6 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
 				event_id
 			} = /^.*\/events\/.*\/(?<event_type>.*?)\:(?<event_id>[A-Za-z-]+)\.json$/.exec(entry.path)?.groups ?? {};
 
-			console.dir({
-				entry,
-				event_type,
-				event_id,
-				query: meta.query
-			});
-
 			if (meta.query.after_id && event_id <= meta.query.after_id) {
 				return false;
 			}
diff --git a/public/api/users/index.ts b/public/api/users/index.ts
index b3d8c46..a8db076 100644
--- a/public/api/users/index.ts
+++ b/public/api/users/index.ts
@@ -139,6 +139,22 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
 			});
 		}
 
+		const password_verification_hash: string = body.password_verification_hash ?? (typeof body.password_verification === 'string'
+			? encodeBase64(
+				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(body.password_verification))
+			)
+			: '');
+		if (password_verification_hash !== password_hash) {
+			return Response.json({
+				error: {
+					cause: 'invalid password verification hash',
+					message: 'Password and verification must be identical.'
+				}
+			}, {
+				status: 400
+			});
+		}
+
 		const at_least_one_existing_user = (await USERS.all({
 			limit: 1,
 			offset: 0
diff --git a/public/base.css b/public/base.css
index 876d988..7cd4aa0 100644
--- a/public/base.css
+++ b/public/base.css
@@ -1,46 +1,62 @@
 /* Dark mode default */
 :root {
-	--base-color: #518;
+	--base-color: #234;
 
-	--bg: hsl(from var(--base-color) h 20% 7.5%);
-	--bg-darker: hsl(from var(--base-color) h 20% 5%);
-	--bg-lighter: hsl(from var(--base-color) h 20% 10%);
+	--bg: hsl(from var(--base-color) h 20% 10%);
+	--bg-darker: hsl(from var(--base-color) h 20% 7.5%);
+	--bg-lighter: hsl(from var(--base-color) h 20% 12.5%);
+	--bg-card: hsl(from var(--base-color) h 20% 15%);
+	--bg-card-hover: hsl(from var(--base-color) h 20% 16%);
+
+	--text-primary: hsl(from var(--base-color) h 5% 95%);
+	--text-secondary: hsl(from var(--base-color) h 5% 85%);
+	--text-muted: hsl(from var(--base-color) h 5% 75%);
+
+	--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
+	--accent-dark: hsl(from var(--base-color) h clamp(0, calc(s + 5), 100) clamp(0, calc(l - 5), 100));
+
+	--border-subtle: hsl(from var(--base-color) h 50% 90%);
+	--border-normal: hsl(from var(--base-color) h 50% 80%);
+	--border-highlight: hsl(from var(--base-color) h 50% 25%);
+
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
 
 	--blur-radius: 8px;
 
-	--text: hsl(from var(--base-color) h 5% 100%);
-	--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
-
-	--border-subtle: hsl(from var(--base-color) h 50% 25%);
-	--border-normal: hsl(from var(--base-color) h 50% 50%);
-	--border-highlight: hsl(from var(--base-color) h 50% 75%);
-
 	--icon-scale: 1;
-	--border-radius: 4px;
+	--border-radius: 8px;
+	--border-radius-lg: 12px;
+
+	--space-xxs: 0.25rem;
+	--space-xs: 0.5rem;
+	--space-sm: 0.75rem;
+	--space-md: 1rem;
+	--space-lg: 1.5rem;
+	--space-xl: 2rem;
+	--space-xxl: 3rem;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
-		--bg: hsl(from var(--base-color) h 20% 93%);
-		--bg-darker: hsl(from var(--base-color) h 20% 88%);
-		--bg-lighter: hsl(from var(--base-color) h 20% 98%);
+		--bg: hsl(from var(--base-color) h 20% 98%);
+		--bg-darker: hsl(from var(--base-color) h 20% 96%);
+		--bg-lighter: hsl(from var(--base-color) h 20% 99%);
+		--bg-card: hsl(from var(--base-color) h 20% 100%);
+		--bg-card-hover: hsl(from var(--base-color) h 20% 98%);
 
-		--text: hsl(from var(--base-color) h 5% 5%);
-		--accent: hsl(from var(--base-color) h calc(s + 10) calc(l + 20));
+		--text-primary: hsl(from var(--base-color) h 5% 5%);
+		--text-secondary: hsl(from var(--base-color) h 5% 30%);
+		--text-muted: hsl(from var(--base-color) h 5% 50%);
 
-		--border-subtle: hsl(from var(--base-color) h 50% 90%);
-		--border-normal: hsl(from var(--base-color) h 50% 50%);
-		--border-highlight: hsl(from var var(--base-color) h 50% 25%);
+		--border-subtle: hsl(from var(--base-color) h 50% 85%);
+		--border-normal: hsl(from var(--base-color) h 50% 70%);
+		--border-highlight: hsl(from var(--base-color) h 50% 35%);
 	}
 }
 
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
 /* Remove default margin in favour of better control in authored CSS */
 body,
 h1,
@@ -55,13 +71,11 @@ dd {
 	margin-block-end: 0;
 }
 
-/* Set core body defaults */
 body {
 	min-height: 100vh;
 	line-height: 1.5;
 }
 
-/* Set shorter line heights on headings and interactive elements */
 h1,
 h2,
 h3,
@@ -72,7 +86,6 @@ label {
 	line-height: 1.1;
 }
 
-/* Balance text wrapping on headings */
 h1,
 h2,
 h3,
@@ -80,20 +93,17 @@ h4 {
 	text-wrap: balance;
 }
 
-/* A elements that don't have a class get default styles */
 a:not([class]) {
 	text-decoration-skip-ink: auto;
 	color: currentColor;
 }
 
-/* Make images easier to work with */
 img,
 picture {
 	max-width: 100%;
 	display: block;
 }
 
-/* Inherit fonts for inputs and buttons */
 input,
 button,
 textarea,
@@ -163,12 +173,11 @@ textarea:not([rows]) {
 
 body {
 	font-family: sans-serif;
-	color: var(--text);
+	color: var(--text-primary);
 	background-color: var(--bg);
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
-	/* fixed height? */
 }
 
 #background-container {
@@ -208,7 +217,7 @@ textarea:focus {
 
 .avatar-container {
 	display: block;
-	margin: 0.5rem auto;
+	margin: 0 auto 1rem;
 	width: 3rem;
 	height: 3rem;
 	border-radius: var(--border-radius);
@@ -288,7 +297,7 @@ label:has(input[collapse-toggle]) {
 	display: block;
 	max-width: fit-content;
 	cursor: pointer;
-	border: 1px solid var(--text);
+	border: 1px solid var(--border-subtle);
 	border-radius: var(--border-radius);
 	padding: 0.5rem;
 	margin-bottom: 2rem;
@@ -341,14 +350,15 @@ form input:focus {
 form button {
 	width: 100%;
 	padding: 20px;
-	border: 1px solid var(--text);
+	border: 1px solid var(--border-subtle);
 	font-size: 20px;
 	background-color: var(--bg);
-	color: var(--text);
+	color: var(--text-primary);
 	margin-top: 1rem;
 }
 
 form button.primary {
+	border-color: var(--border-highlight);
 	background-color: var(--accent);
 }
 
@@ -356,7 +366,7 @@ button {
 	background: inherit;
 	color: inherit;
 	padding: 0.5rem;
-	border: 1px solid var(--text);
+	border: 1px solid var(--text-primary);
 	border-radius: var(--border-radius);
 	cursor: pointer;
 }
@@ -613,1290 +623,3 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 .inline {
 	display: inline-block !important;
 }
-
-/* ICONS */
-.icon {
-	width: 24px;
-	height: 24px;
-	transform: scale(var(--icon-scale, 1));
-
-	stroke: white;
-	fill: transparent;
-	stroke-width: 1pt;
-	stroke-miterlimit: 10;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-dasharray: 400;
-
-	margin: 0 auto;
-}
-
-/* ICON - ADD (with box) */
-.icon.add {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	transform: scale(var(--icon-scale, 1));
-	border-radius: 4px;
-}
-
-.icon.add::after,
-.icon.add::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 10px;
-	height: 2px;
-	background: currentColor;
-	border-radius: 5px;
-	top: 8px;
-	left: 4px;
-}
-
-.icon.add::after {
-	width: 2px;
-	height: 10px;
-	top: 4px;
-	left: 8px;
-}
-
-/* ICON - ATTACHMENT */
-.icon.attachment {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 14px;
-	height: 14px;
-	border: 2px solid;
-	border-top: 0;
-	border-bottom-left-radius: 100px;
-	border-bottom-right-radius: 100px;
-	transform: scale(var(--icon-scale, 1));
-	margin-top: 11px;
-}
-
-.icon.attachment::after,
-.icon.attachment::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	border-radius: 3px;
-	border: 2px solid;
-}
-
-.icon.attachment::after {
-	border-bottom: 0;
-	border-top-left-radius: 100px;
-	border-top-right-radius: 100px;
-	right: -2px;
-	width: 10px;
-	height: 14px;
-	bottom: 8px;
-}
-
-.icon.attachment::before {
-	width: 6px;
-	height: 12px;
-	border-top: 0;
-	border-bottom-left-radius: 100px;
-	border-bottom-right-radius: 100px;
-	left: 2px;
-	bottom: 4px;
-}
-
-/* ICON - BLURB */
-.icon.blurb {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	border: 2px solid;
-	border-radius: 3px;
-	width: 22px;
-	height: 16px;
-}
-
-.icon.blurb::after,
-.icon.blurb::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	height: 2px;
-	border-radius: 3px;
-	background: currentColor;
-	bottom: 2px;
-}
-
-.icon.blurb::before {
-	width: 10px;
-	left: 2px;
-	box-shadow: 4px -4px 0;
-}
-
-.icon.blurb::after {
-	width: 3px;
-	right: 2px;
-	box-shadow: -11px -4px 0;
-}
-
-/* ICON - CALENDAR */
-.icon.calendar,
-.icon.calendar::before {
-	display: block;
-	box-sizing: border-box;
-}
-
-.icon.calendar {
-	position: relative;
-	transform: scale(var(--icon-scale, 1));
-	width: 18px;
-	height: 18px;
-	border: 2px solid;
-	border-top: 4px solid;
-	border-radius: 3px;
-}
-
-.icon.calendar::before {
-	content: "";
-	position: absolute;
-	width: 10px;
-	border-radius: 3px;
-	left: 2px;
-	background: currentColor;
-	height: 2px;
-	top: 2px;
-}
-
-/* ICON - CAMERA */
-.icon.camera {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	border: 2px solid;
-	border-radius: 3px;
-	width: 18px;
-	height: 12px;
-	perspective: 24px;
-}
-
-.icon.camera::after,
-.icon.camera::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-}
-
-.icon.camera::before {
-	border: 2px solid;
-	border-left-color: transparent;
-	transform: rotateY(-70deg);
-	width: 8px;
-	height: 8px;
-	right: -7px;
-	top: 0;
-}
-
-.icon.camera::after {
-	width: 10px;
-	height: 5px;
-	border-top: 2px solid;
-	border-right: 2px solid;
-	top: -5px;
-	right: 2px;
-	border-top-right-radius: 2px;
-}
-
-/* ICON - CHAT */
-.icon.chat {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 14px;
-	height: 10px;
-}
-
-.icon.chat::after,
-.icon.chat::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	border-radius: 3px;
-	height: 2px;
-	background: currentColor;
-}
-
-.icon.chat::before {
-	width: 10px;
-	opacity: 0.5;
-	box-shadow: 0 4px 0;
-}
-
-.icon.chat::after {
-	width: 14px;
-	bottom: 0;
-}
-
-/* ICON - CIRCLE */
-.icon.circle {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 19px;
-	height: 19px;
-	border: 2px solid;
-	border-radius: 100px;
-}
-
-/* ICON - CLOSE */
-.icon.close {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: var(--border-radius);
-}
-
-.icon.close::after,
-.icon.close::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 12px;
-	height: 2px;
-	background: currentColor;
-	transform: rotate(45deg);
-	border-radius: var(--border-radius);
-	top: 8px;
-	left: 3px;
-}
-
-.icon.close::after {
-	transform: rotate(-45deg);
-}
-
-/* ICON - CONTROLLER */
-.icon.controller {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 8px;
-	height: 8px;
-	border: 2px solid;
-	border-radius: 100px;
-}
-
-.icon.controller::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 14px;
-	height: 14px;
-	box-shadow:
-		-6px -6px 0 -4px,
-		6px 6px 0 -4px,
-		6px -6px 0 -4px,
-		-6px 6px 0 -4px;
-	left: -5px;
-	top: -5px;
-	transform: rotate(45deg);
-}
-
-/* ICON - DOWNLOAD */
-.icon.download {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 6px;
-	border: 2px solid;
-	border-top: 0;
-	border-bottom-left-radius: 2px;
-	border-bottom-right-radius: 2px;
-	margin-top: 8px;
-}
-
-.icon.download::after {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border-left: 2px solid;
-	border-bottom: 2px solid;
-	transform: rotate(-45deg);
-	left: 2px;
-	bottom: 4px;
-}
-
-.icon.download::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	border-radius: 3px;
-	width: 2px;
-	height: 10px;
-	background: currentColor;
-	left: 5px;
-	bottom: 5px;
-}
-
-/* ICON - ESSAY */
-.icon.essay {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 18px;
-	border: 2px solid;
-	border-radius: 3px;
-	box-shadow: 0 -1px 0;
-}
-
-.icon.essay::after,
-.icon.essay::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 6px;
-	top: 2px;
-}
-
-.icon.essay::before {
-	background: currentColor;
-	left: 2px;
-	box-shadow:
-		0 4px 0,
-		0 8px 0;
-	border-radius: 3px;
-	height: 2px;
-}
-
-.icon.essay::after {
-	height: 10px;
-	border: 2px solid;
-	right: 2px;
-	border-radius: 1px;
-}
-
-/* ICON - EXCHANGE */
-.icon.exchange,
-.icon.exchange::after,
-.icon.exchange::before {
-	display: block;
-	box-sizing: border-box;
-	width: 8px;
-	height: 8px;
-}
-
-.icon.exchange {
-	position: relative;
-	transform: scale(var(--icon-scale, 1));
-	box-shadow:
-		-3px 3px 0 -1px,
-		3px -3px 0 -1px;
-}
-
-.icon.exchange::after,
-.icon.exchange::before {
-	content: "";
-	position: absolute;
-	border: 2px solid;
-}
-
-.icon.exchange::before {
-	top: -5px;
-	left: -5px;
-}
-
-.icon.exchange::after {
-	bottom: -5px;
-	right: -5px;
-}
-
-/* ICON - FORUM */
-.icon.forum {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 14px;
-	border-bottom: 2px solid;
-}
-
-.icon.forum::after,
-.icon.forum::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	top: 2px;
-}
-
-.icon.forum::before {
-	border-left: 4px solid;
-	left: 1px;
-	width: 0;
-	height: 0;
-	border-top: 3px solid transparent;
-	border-bottom: 3px solid transparent;
-}
-
-.icon.forum::after {
-	width: 8px;
-	height: 6px;
-	border-top: 2px solid;
-	border-bottom: 2px solid;
-	right: 0;
-}
-
-/* ICON - FORWARD */
-.icon.forward-copy {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 16px;
-	box-shadow: 6px -6px 0 -4px;
-}
-
-.icon.forward-copy::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border: 2px solid;
-	border-radius: 1px;
-	left: 0;
-	bottom: 0;
-}
-
-.icon.forward-copy::after {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	background: currentColor;
-	width: 2px;
-	height: 10px;
-	transform: rotate(45deg);
-	bottom: 8px;
-	right: 2px;
-	border-radius: 4px;
-}
-
-/* ICON - HOME */
-.icon.home {
-	background:
-		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px,
-		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px;
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 18px;
-	height: 14px;
-	border: 2px solid;
-	border-top: 0;
-	border-bottom: 0;
-	border-top-right-radius: 3px;
-	border-top-left-radius: 3px;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	margin-bottom: -2px;
-}
-
-.icon.home::after,
-.icon.home::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-}
-
-.icon.home::before {
-	border-top: 2px solid;
-	border-left: 2px solid;
-	border-top-left-radius: 4px;
-	transform: rotate(45deg);
-	top: -5px;
-	border-radius: 3px;
-	width: 14px;
-	height: 14px;
-	left: 0;
-}
-
-.icon.home::after {
-	width: 8px;
-	height: 10px;
-	border: 2px solid;
-	border-radius: 100px;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	border-bottom: 0;
-	left: 3px;
-	bottom: 0;
-}
-
-/* ICON - LIVE */
-.icon.live {
-	transform: scale(var(--icon-scale, 1));
-}
-
-.icon.live,
-.icon.live::after,
-.icon.live::before {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 14px;
-	height: 14px;
-	border: 2px solid;
-	border-bottom-color: transparent;
-	border-radius: 50%;
-}
-
-.icon.live::after,
-.icon.live::before {
-	content: "";
-	position: absolute;
-	width: 6px;
-	height: 6px;
-	top: 2px;
-	left: 2px;
-}
-
-.icon.live::after {
-	width: 22px;
-	height: 22px;
-	top: -6px;
-	left: -6px;
-}
-
-/* ICON - MINUS */
-.icon.minus {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 2px;
-	background: currentColor;
-	border-radius: 10px;
-}
-
-/* ICON - MORE */
-.icon.more {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 24px;
-	height: 20px;
-	border: 2px solid;
-	border-radius: 3px;
-}
-
-.icon.more::before {
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	display: block;
-	width: 4px;
-	height: 4px;
-	background-color: currentColor;
-	border-radius: 20px;
-	top: 6px;
-	left: 8px;
-	box-shadow:
-		-5px 0 0,
-		5px 0 0;
-}
-
-/* ICON - MOREBORDERLESS */
-.icon.more-borderless {
-	transform: scale(var(--icon-scale, 1));
-}
-
-.icon.more-borderless,
-.icon.more-borderless::after,
-.icon.more-borderless::before {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 4px;
-	height: 4px;
-	background: currentColor;
-	border-radius: 100%;
-}
-
-.icon.more-borderless::after,
-.icon.more-borderless::before {
-	content: "";
-	position: absolute;
-	top: 0;
-}
-
-.icon.more-borderless::after {
-	left: -6px;
-}
-
-.icon.more-borderless::before {
-	right: -6px;
-}
-
-/* ICON - MORECIRCLE */
-.icon.more-circle {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 24px;
-	height: 24px;
-	border: 2px solid;
-	border-radius: 24px;
-}
-
-.icon.more-circle::before {
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	display: block;
-	width: 4px;
-	height: 4px;
-	background-color: currentColor;
-	border-radius: 20px;
-	top: 8px;
-	left: 8px;
-	box-shadow:
-		-5px 0 0,
-		5px 0 0;
-}
-
-/* ICON - PHONE */
-.icon.phone {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 22px;
-	height: 22px;
-	transform: scale(var(--icon-scale, 1));
-}
-
-.icon.phone::after,
-.icon.phone::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-}
-
-.icon.phone::after {
-	width: 18px;
-	height: 18px;
-	border-top-left-radius: 1px;
-	border-bottom-right-radius: 1px;
-	border-bottom-left-radius: 12px;
-	border-left: 4px solid;
-	border-bottom: 4px solid;
-	left: 2px;
-	bottom: 2px;
-	background:
-		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
-		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
-}
-
-.icon.phone::before {
-	width: 20px;
-	height: 20px;
-	border: 6px double;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-	border-left-color: transparent;
-	border-radius: 50%;
-	transform: rotate(-45deg);
-	bottom: 2px;
-	left: 2px;
-}
-
-/* ICON - PLUS */
-.icon.plus,
-.icon.plus::after,
-.icon.plus::before {
-	display: block;
-	box-sizing: border-box;
-}
-
-.icon.plus::after,
-.icon.plus::before {
-	border-radius: 10px;
-	background: currentColor;
-}
-
-.icon.plus {
-	position: relative;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 16px;
-}
-
-.icon.plus::after {
-	content: "";
-	position: absolute;
-	width: 2px;
-	height: 16px;
-	top: 0;
-	left: 7px;
-}
-
-.icon.plus::before {
-	content: "";
-	position: absolute;
-	width: 16px;
-	height: 2px;
-	top: 7px;
-	left: 0;
-}
-
-/* ICON - REPLY */
-.icon.reply {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 16px;
-	height: 16px;
-	box-shadow: -6px -6px 0 -4px;
-}
-
-.icon.reply::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border: 2px solid;
-	border-radius: 1px;
-	right: 0;
-	bottom: 0;
-}
-
-.icon.reply::after {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	background: currentColor;
-	width: 2px;
-	height: 10px;
-	transform: rotate(-45deg);
-	bottom: 8px;
-	left: 2px;
-	border-radius: 4px;
-}
-
-/* ICON - RESOURCES */
-.icon.resources,
-.icon.resources::after {
-	display: block;
-	box-sizing: border-box;
-	border-radius: 22px;
-}
-
-.icon.resources {
-	position: relative;
-	transform: scale(var(--icon-scale, 1));
-	width: 20px;
-	height: 20px;
-	border: 2px solid transparent;
-}
-
-.icon.resources::after {
-	content: "";
-	position: absolute;
-	width: 4px;
-	height: 4px;
-	background: currentColor;
-	top: 6px;
-	left: 6px;
-	box-shadow:
-		0 7px 0 1px,
-		0 -7px 0 1px,
-		-7px 0 0 1px,
-		7px 0 0 1px;
-}
-
-/* ICON - SEND */
-.icon.send {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 4px;
-}
-
-.icon.send::after,
-.icon.send::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 2px;
-	height: 8px;
-	border-right: 2px solid;
-	top: 5px;
-	right: 5px;
-}
-
-.icon.send::after {
-	width: 6px;
-	height: 6px;
-	border-bottom: 2px solid;
-	transform: rotate(-45deg);
-	right: 9px;
-	top: 6px;
-}
-
-/* ICON - TALK */
-.icon.talk {
-	transform: scale(var(--icon-scale, 1));
-}
-
-.icon.talk,
-.icon.talk::after {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: 20px;
-	height: 20px;
-	border-radius: 100px;
-	border: 2px dotted currentColor;
-}
-
-.icon.talk::after {
-	content: "";
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border: 1px solid transparent;
-	top: 4px;
-	left: 4px;
-	box-shadow:
-		0 0 0 2px,
-		inset 0 0 0 2px currentColor;
-}
-
-/* ICON - TRASH */
-.icon.trash {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 10px;
-	height: 12px;
-	border: 2px solid transparent;
-	box-shadow:
-		0 0 0 2px,
-		inset -2px 0 0,
-		inset 2px 0 0;
-	border-bottom-left-radius: 1px;
-	border-bottom-right-radius: 1px;
-	margin-top: 4px;
-}
-
-.icon.trash::after,
-.icon.trash::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-}
-
-.icon.trash::after {
-	background: currentColor;
-	border-radius: 3px;
-	width: 16px;
-	height: 2px;
-	top: -4px;
-	left: -5px;
-}
-
-.icon.trash::before {
-	width: 10px;
-	height: 4px;
-	border: 2px solid;
-	border-bottom: transparent;
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
-	top: -7px;
-	left: -2px;
-}
-
-/* ICON - USER */
-.icon.user,
-.icon.user::after,
-.icon.user::before {
-	display: block;
-	box-sizing: border-box;
-	border: 2px solid;
-	border-radius: 100px;
-}
-
-.icon.user {
-	overflow: hidden;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	position: relative;
-}
-
-.icon.user::after,
-.icon.user::before {
-	content: "";
-	position: absolute;
-	top: 2px;
-	left: 5px;
-	width: 8px;
-	height: 8px;
-}
-
-.icon.user::after {
-	border-radius: 200px;
-	top: 11px;
-	left: 0px;
-	width: 18px;
-	height: 18px;
-}
-
-/* ICON - WORK */
-.icon.work {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 20px;
-	height: 20px;
-	border: 2px solid;
-	border-radius: 22px;
-}
-
-.icon.work::after,
-.icon.work::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-}
-
-.icon.work::before {
-	width: 12px;
-	height: 6px;
-	border: 2px solid;
-	border-top-left-radius: 100px;
-	border-top-right-radius: 100px;
-	top: 2px;
-	left: 2px;
-	border-bottom: 0;
-}
-
-.icon.work::after {
-	width: 18px;
-	height: 2px;
-	background: currentColor;
-	left: -1px;
-	top: 8px;
-}
-
-/* ICONS - RIGHT/LEFT */
-.icon.right {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-}
-
-.icon.right::after,
-.icon.right::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border-right: 2px solid;
-	border-top: 2px solid;
-	transform: rotate(45deg);
-	top: 7px;
-	right: 6px;
-}
-
-.icon.right::after {
-	right: 11px;
-}
-
-.icon.left {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-}
-
-.icon.left::after,
-.icon.left::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border-left: 2px solid;
-	border-bottom: 2px solid;
-	transform: rotate(45deg);
-	top: 7px;
-	left: 6px;
-}
-
-.icon.left::after {
-	left: 11px;
-}
-
-.icon.map-pin {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: rotate(45deg) scale(var(--icon-scale, 1));
-	width: 18px;
-	height: 18px;
-	border-radius: 100% 100% 0 100%;
-	border: 2px solid;
-	margin-top: -4px;
-}
-
-.icon.map-pin::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	border: 2px solid;
-	top: 3px;
-	left: 3px;
-	border-radius: 40px;
-}
-
-
-/* AUDIO PLAYER ICONS */
-.icon.skip-back {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 4px;
-}
-
-.icon.skip-back::after,
-.icon.skip-back::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	height: 8px;
-	top: 5px;
-}
-
-.icon.skip-back::before {
-	width: 2px;
-	border-radius: 2px;
-	right: 11px;
-	background: currentColor;
-}
-
-.icon.skip-back::after {
-	width: 0;
-	border-top: 4px solid transparent;
-	border-bottom: 4px solid transparent;
-	border-right: 5px solid;
-	right: 5px;
-}
-
-.icon.rewind {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	border: 2px solid;
-	border-radius: 4px;
-	width: 22px;
-	height: 22px;
-}
-
-.icon.rewind::after,
-.icon.rewind::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 6px;
-	height: 6px;
-	border-left: 2px solid;
-	border-bottom: 2px solid;
-	transform: rotate(45deg);
-	top: 6px;
-	left: 5px;
-}
-
-.icon.rewind::after {
-	left: 9px;
-}
-
-.icon.play {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 4px;
-}
-
-.icon.play::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 0;
-	height: 10px;
-	border-top: 5px solid transparent;
-	border-bottom: 5px solid transparent;
-	border-left: 6px solid;
-	top: 4px;
-	left: 7px;
-}
-
-.icon.pause {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 4px;
-}
-
-.icon.pause::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 6px;
-	height: 6px;
-	left: 6px;
-	top: 6px;
-	border-left: 2px solid;
-	border-right: 2px solid;
-}
-
-.icon.fastforward {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	border: 2px solid;
-	border-radius: 4px;
-	width: 22px;
-	height: 22px;
-}
-
-.icon.fastforward::after,
-.icon.fastforward::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 6px;
-	height: 6px;
-	border-right: 2px solid;
-	border-top: 2px solid;
-	transform: rotate(45deg);
-	top: 6px;
-	right: 5px;
-}
-
-.icon.fastforward::after {
-	right: 9px;
-}
-
-.icon.skip-forward {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--icon-scale, 1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 4px;
-}
-
-.icon.skip-forward::after,
-.icon.skip-forward::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	height: 8px;
-	top: 5px;
-}
-
-.icon.skip-forward::before {
-	width: 2px;
-	border-radius: 2px;
-	left: 11px;
-	background: currentColor;
-}
-
-.icon.skip-forward::after {
-	width: 0;
-	border-top: 4px solid transparent;
-	border-bottom: 4px solid transparent;
-	border-left: 5px solid;
-	left: 5px;
-}
diff --git a/public/foo/index.html b/public/foo/index.html
deleted file mode 100644
index 42d2802..0000000
--- a/public/foo/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<body>
-		<h1>Hello World - foo</h1>
-	</body>
-</html>
diff --git a/public/icons.css b/public/icons.css
new file mode 100644
index 0000000..f3b008e
--- /dev/null
+++ b/public/icons.css
@@ -0,0 +1,1329 @@
+/* ICONS */
+.icon {
+	width: 24px;
+	height: 24px;
+	transform: scale(var(--icon-scale, 1));
+
+	stroke: white;
+	fill: transparent;
+	stroke-width: 1pt;
+	stroke-miterlimit: 10;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-dasharray: 400;
+
+	margin: 0 auto;
+}
+
+/* ICON - ADD (with box) */
+.icon.add {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	transform: scale(var(--icon-scale, 1));
+	border-radius: 4px;
+}
+
+.icon.add::after,
+.icon.add::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 10px;
+	height: 2px;
+	background: currentColor;
+	border-radius: 5px;
+	top: 8px;
+	left: 4px;
+}
+
+.icon.add::after {
+	width: 2px;
+	height: 10px;
+	top: 4px;
+	left: 8px;
+}
+
+/* ICON - ATTACHMENT */
+.icon.attachment {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom-left-radius: 100px;
+	border-bottom-right-radius: 100px;
+	transform: scale(var(--icon-scale, 1));
+	margin-top: 11px;
+}
+
+.icon.attachment::after,
+.icon.attachment::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 3px;
+	border: 2px solid;
+}
+
+.icon.attachment::after {
+	border-bottom: 0;
+	border-top-left-radius: 100px;
+	border-top-right-radius: 100px;
+	right: -2px;
+	width: 10px;
+	height: 14px;
+	bottom: 8px;
+}
+
+.icon.attachment::before {
+	width: 6px;
+	height: 12px;
+	border-top: 0;
+	border-bottom-left-radius: 100px;
+	border-bottom-right-radius: 100px;
+	left: 2px;
+	bottom: 4px;
+}
+
+/* ICON - BLURB */
+.icon.blurb {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	border: 2px solid;
+	border-radius: 3px;
+	width: 22px;
+	height: 16px;
+}
+
+.icon.blurb::after,
+.icon.blurb::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	height: 2px;
+	border-radius: 3px;
+	background: currentColor;
+	bottom: 2px;
+}
+
+.icon.blurb::before {
+	width: 10px;
+	left: 2px;
+	box-shadow: 4px -4px 0;
+}
+
+.icon.blurb::after {
+	width: 3px;
+	right: 2px;
+	box-shadow: -11px -4px 0;
+}
+
+/* ICON - CALENDAR */
+.icon.calendar,
+.icon.calendar::before {
+	display: block;
+	box-sizing: border-box;
+}
+
+.icon.calendar {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 18px;
+	height: 18px;
+	border: 2px solid;
+	border-top: 4px solid;
+	border-radius: 3px;
+}
+
+.icon.calendar::before {
+	content: "";
+	position: absolute;
+	width: 10px;
+	border-radius: 3px;
+	left: 2px;
+	background: currentColor;
+	height: 2px;
+	top: 2px;
+}
+
+/* ICON - CAMERA */
+.icon.camera {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	border: 2px solid;
+	border-radius: 3px;
+	width: 18px;
+	height: 12px;
+	perspective: 24px;
+}
+
+.icon.camera::after,
+.icon.camera::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.camera::before {
+	border: 2px solid;
+	border-left-color: transparent;
+	transform: rotateY(-70deg);
+	width: 8px;
+	height: 8px;
+	right: -7px;
+	top: 0;
+}
+
+.icon.camera::after {
+	width: 10px;
+	height: 5px;
+	border-top: 2px solid;
+	border-right: 2px solid;
+	top: -5px;
+	right: 2px;
+	border-top-right-radius: 2px;
+}
+
+/* ICON - CHAT */
+.icon.chat {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 14px;
+	height: 10px;
+}
+
+.icon.chat::after,
+.icon.chat::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 3px;
+	height: 2px;
+	background: currentColor;
+}
+
+.icon.chat::before {
+	width: 10px;
+	opacity: 0.5;
+	box-shadow: 0 4px 0;
+}
+
+.icon.chat::after {
+	width: 14px;
+	bottom: 0;
+}
+
+/* ICON - CIRCLE */
+.icon.circle {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 19px;
+	height: 19px;
+	border: 2px solid;
+	border-radius: 100px;
+}
+
+/* ICON - CLOSE */
+.icon.close {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: var(--border-radius);
+}
+
+.icon.close::after,
+.icon.close::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 12px;
+	height: 2px;
+	background: currentColor;
+	transform: rotate(45deg);
+	border-radius: var(--border-radius);
+	top: 8px;
+	left: 3px;
+}
+
+.icon.close::after {
+	transform: rotate(-45deg);
+}
+
+/* ICON - CONTROLLER */
+.icon.controller {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 8px;
+	height: 8px;
+	border: 2px solid;
+	border-radius: 100px;
+}
+
+.icon.controller::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 14px;
+	height: 14px;
+	box-shadow:
+		-6px -6px 0 -4px,
+		6px 6px 0 -4px,
+		6px -6px 0 -4px,
+		-6px 6px 0 -4px;
+	left: -5px;
+	top: -5px;
+	transform: rotate(45deg);
+}
+
+/* ICON - DOWNLOAD */
+.icon.download {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 6px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	margin-top: 8px;
+}
+
+.icon.download::after {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border-left: 2px solid;
+	border-bottom: 2px solid;
+	transform: rotate(-45deg);
+	left: 2px;
+	bottom: 4px;
+}
+
+.icon.download::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 3px;
+	width: 2px;
+	height: 10px;
+	background: currentColor;
+	left: 5px;
+	bottom: 5px;
+}
+
+/* ICON - ESSAY */
+.icon.essay {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 18px;
+	border: 2px solid;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0;
+}
+
+.icon.essay::after,
+.icon.essay::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 6px;
+	top: 2px;
+}
+
+.icon.essay::before {
+	background: currentColor;
+	left: 2px;
+	box-shadow:
+		0 4px 0,
+		0 8px 0;
+	border-radius: 3px;
+	height: 2px;
+}
+
+.icon.essay::after {
+	height: 10px;
+	border: 2px solid;
+	right: 2px;
+	border-radius: 1px;
+}
+
+/* ICON - EXCHANGE */
+.icon.exchange,
+.icon.exchange::after,
+.icon.exchange::before {
+	display: block;
+	box-sizing: border-box;
+	width: 8px;
+	height: 8px;
+}
+
+.icon.exchange {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	box-shadow:
+		-3px 3px 0 -1px,
+		3px -3px 0 -1px;
+}
+
+.icon.exchange::after,
+.icon.exchange::before {
+	content: "";
+	position: absolute;
+	border: 2px solid;
+}
+
+.icon.exchange::before {
+	top: -5px;
+	left: -5px;
+}
+
+.icon.exchange::after {
+	bottom: -5px;
+	right: -5px;
+}
+
+/* ICON - FORUM */
+.icon.forum {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 14px;
+	border-bottom: 2px solid;
+}
+
+.icon.forum::after,
+.icon.forum::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	top: 2px;
+}
+
+.icon.forum::before {
+	border-left: 4px solid;
+	left: 1px;
+	width: 0;
+	height: 0;
+	border-top: 3px solid transparent;
+	border-bottom: 3px solid transparent;
+}
+
+.icon.forum::after {
+	width: 8px;
+	height: 6px;
+	border-top: 2px solid;
+	border-bottom: 2px solid;
+	right: 0;
+}
+
+/* ICON - FORWARD */
+.icon.forward-copy {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 16px;
+	box-shadow: 6px -6px 0 -4px;
+}
+
+.icon.forward-copy::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border: 2px solid;
+	border-radius: 1px;
+	left: 0;
+	bottom: 0;
+}
+
+.icon.forward-copy::after {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	background: currentColor;
+	width: 2px;
+	height: 10px;
+	transform: rotate(45deg);
+	bottom: 8px;
+	right: 2px;
+	border-radius: 4px;
+}
+
+/* ICON - HOME */
+.icon.home {
+	background:
+		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px,
+		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px;
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 18px;
+	height: 14px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom: 0;
+	border-top-right-radius: 3px;
+	border-top-left-radius: 3px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	margin-bottom: -2px;
+}
+
+.icon.home::after,
+.icon.home::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.home::before {
+	border-top: 2px solid;
+	border-left: 2px solid;
+	border-top-left-radius: 4px;
+	transform: rotate(45deg);
+	top: -5px;
+	border-radius: 3px;
+	width: 14px;
+	height: 14px;
+	left: 0;
+}
+
+.icon.home::after {
+	width: 8px;
+	height: 10px;
+	border: 2px solid;
+	border-radius: 100px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border-bottom: 0;
+	left: 3px;
+	bottom: 0;
+}
+
+/* ICON - LIVE */
+.icon.live {
+	transform: scale(var(--icon-scale, 1));
+}
+
+.icon.live,
+.icon.live::after,
+.icon.live::before {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid;
+	border-bottom-color: transparent;
+	border-radius: 50%;
+}
+
+.icon.live::after,
+.icon.live::before {
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	top: 2px;
+	left: 2px;
+}
+
+.icon.live::after {
+	width: 22px;
+	height: 22px;
+	top: -6px;
+	left: -6px;
+}
+
+/* ICON - MIC */
+.icon.mic {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 12px;
+	border-bottom-left-radius: 120px;
+	border-bottom-right-radius: 120px;
+	border: 2px solid;
+	border-top: 0;
+	margin-top: 3px;
+}
+
+.icon.mic::after,
+.icon.mic::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.mic::after {
+	border: 2px solid;
+	width: 8px;
+	height: 18px;
+	left: 2px;
+	top: -10px;
+	border-radius: 4px;
+}
+
+.icon.mic::before {
+	width: 10px;
+	height: 4px;
+	top: 12px;
+	left: 1px;
+	border-right: 4px solid transparent;
+	box-shadow:
+		0 2px 0,
+		inset -2px 0 0;
+}
+
+/* ICON - MINUS */
+.icon.minus {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 2px;
+	background: currentColor;
+	border-radius: 10px;
+}
+
+/* ICON - MORE */
+.icon.more {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 24px;
+	height: 20px;
+	border: 2px solid;
+	border-radius: 3px;
+}
+
+.icon.more::before {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	display: block;
+	width: 4px;
+	height: 4px;
+	background-color: currentColor;
+	border-radius: 20px;
+	top: 6px;
+	left: 8px;
+	box-shadow:
+		-5px 0 0,
+		5px 0 0;
+}
+
+/* ICON - MOREBORDERLESS */
+.icon.more-borderless {
+	transform: scale(var(--icon-scale, 1));
+}
+
+.icon.more-borderless,
+.icon.more-borderless::after,
+.icon.more-borderless::before {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 4px;
+	height: 4px;
+	background: currentColor;
+	border-radius: 100%;
+}
+
+.icon.more-borderless::after,
+.icon.more-borderless::before {
+	content: "";
+	position: absolute;
+	top: 0;
+}
+
+.icon.more-borderless::after {
+	left: -6px;
+}
+
+.icon.more-borderless::before {
+	right: -6px;
+}
+
+/* ICON - MORECIRCLE */
+.icon.more-circle {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 24px;
+	height: 24px;
+	border: 2px solid;
+	border-radius: 24px;
+}
+
+.icon.more-circle::before {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	display: block;
+	width: 4px;
+	height: 4px;
+	background-color: currentColor;
+	border-radius: 20px;
+	top: 8px;
+	left: 8px;
+	box-shadow:
+		-5px 0 0,
+		5px 0 0;
+}
+
+/* ICON - PHONE */
+.icon.phone {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 22px;
+	height: 22px;
+	transform: scale(var(--icon-scale, 1));
+}
+
+.icon.phone::after,
+.icon.phone::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.phone::after {
+	width: 18px;
+	height: 18px;
+	border-top-left-radius: 1px;
+	border-bottom-right-radius: 1px;
+	border-bottom-left-radius: 12px;
+	border-left: 4px solid;
+	border-bottom: 4px solid;
+	left: 2px;
+	bottom: 2px;
+	background:
+		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
+		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
+}
+
+.icon.phone::before {
+	width: 20px;
+	height: 20px;
+	border: 6px double;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	border-radius: 50%;
+	transform: rotate(-45deg);
+	bottom: 2px;
+	left: 2px;
+}
+
+/* ICON - PLUS */
+.icon.plus,
+.icon.plus::after,
+.icon.plus::before {
+	display: block;
+	box-sizing: border-box;
+}
+
+.icon.plus::after,
+.icon.plus::before {
+	border-radius: 10px;
+	background: currentColor;
+}
+
+.icon.plus {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 16px;
+}
+
+.icon.plus::after {
+	content: "";
+	position: absolute;
+	width: 2px;
+	height: 16px;
+	top: 0;
+	left: 7px;
+}
+
+.icon.plus::before {
+	content: "";
+	position: absolute;
+	width: 16px;
+	height: 2px;
+	top: 7px;
+	left: 0;
+}
+
+/* ICON - REPLY */
+.icon.reply {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 16px;
+	box-shadow: -6px -6px 0 -4px;
+}
+
+.icon.reply::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border: 2px solid;
+	border-radius: 1px;
+	right: 0;
+	bottom: 0;
+}
+
+.icon.reply::after {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	background: currentColor;
+	width: 2px;
+	height: 10px;
+	transform: rotate(-45deg);
+	bottom: 8px;
+	left: 2px;
+	border-radius: 4px;
+}
+
+/* ICON - RESOURCES */
+.icon.resources,
+.icon.resources::after {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 22px;
+}
+
+.icon.resources {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 20px;
+	height: 20px;
+	border: 2px solid transparent;
+}
+
+.icon.resources::after {
+	content: "";
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	background: currentColor;
+	top: 6px;
+	left: 6px;
+	box-shadow:
+		0 7px 0 1px,
+		0 -7px 0 1px,
+		-7px 0 0 1px,
+		7px 0 0 1px;
+}
+
+/* ICON - SEND */
+.icon.send {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+
+.icon.send::after,
+.icon.send::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 2px;
+	height: 8px;
+	border-right: 2px solid;
+	top: 5px;
+	right: 5px;
+}
+
+.icon.send::after {
+	width: 6px;
+	height: 6px;
+	border-bottom: 2px solid;
+	transform: rotate(-45deg);
+	right: 9px;
+	top: 6px;
+}
+
+/* ICON - TALK */
+.icon.talk {
+	transform: scale(var(--icon-scale, 1));
+}
+
+.icon.talk,
+.icon.talk::after {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 20px;
+	height: 20px;
+	border-radius: 100px;
+	border: 2px dotted currentColor;
+}
+
+.icon.talk::after {
+	content: "";
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border: 1px solid transparent;
+	top: 4px;
+	left: 4px;
+	box-shadow:
+		0 0 0 2px,
+		inset 0 0 0 2px currentColor;
+}
+
+/* ICON - TRASH */
+.icon.trash {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 10px;
+	height: 12px;
+	border: 2px solid transparent;
+	box-shadow:
+		0 0 0 2px,
+		inset -2px 0 0,
+		inset 2px 0 0;
+	border-bottom-left-radius: 1px;
+	border-bottom-right-radius: 1px;
+	margin-top: 4px;
+}
+
+.icon.trash::after,
+.icon.trash::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.trash::after {
+	background: currentColor;
+	border-radius: 3px;
+	width: 16px;
+	height: 2px;
+	top: -4px;
+	left: -5px;
+}
+
+.icon.trash::before {
+	width: 10px;
+	height: 4px;
+	border: 2px solid;
+	border-bottom: transparent;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	top: -7px;
+	left: -2px;
+}
+
+/* ICON - USER */
+.icon.user,
+.icon.user::after,
+.icon.user::before {
+	display: block;
+	box-sizing: border-box;
+	border: 2px solid;
+	border-radius: 100px;
+}
+
+.icon.user {
+	overflow: hidden;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	position: relative;
+}
+
+.icon.user::after,
+.icon.user::before {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 5px;
+	width: 8px;
+	height: 8px;
+}
+
+.icon.user::after {
+	border-radius: 200px;
+	top: 11px;
+	left: 0px;
+	width: 18px;
+	height: 18px;
+}
+
+/* ICON - WORK */
+.icon.work {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 20px;
+	height: 20px;
+	border: 2px solid;
+	border-radius: 22px;
+}
+
+.icon.work::after,
+.icon.work::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+
+.icon.work::before {
+	width: 12px;
+	height: 6px;
+	border: 2px solid;
+	border-top-left-radius: 100px;
+	border-top-right-radius: 100px;
+	top: 2px;
+	left: 2px;
+	border-bottom: 0;
+}
+
+.icon.work::after {
+	width: 18px;
+	height: 2px;
+	background: currentColor;
+	left: -1px;
+	top: 8px;
+}
+
+/* ICONS - RIGHT/LEFT */
+.icon.right {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+}
+
+.icon.right::after,
+.icon.right::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border-right: 2px solid;
+	border-top: 2px solid;
+	transform: rotate(45deg);
+	top: 7px;
+	right: 6px;
+}
+
+.icon.right::after {
+	right: 11px;
+}
+
+.icon.left {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+}
+
+.icon.left::after,
+.icon.left::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border-left: 2px solid;
+	border-bottom: 2px solid;
+	transform: rotate(45deg);
+	top: 7px;
+	left: 6px;
+}
+
+.icon.left::after {
+	left: 11px;
+}
+
+.icon.map-pin {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: rotate(45deg) scale(var(--icon-scale, 1));
+	width: 18px;
+	height: 18px;
+	border-radius: 100% 100% 0 100%;
+	border: 2px solid;
+	margin-top: -4px;
+}
+
+.icon.map-pin::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border: 2px solid;
+	top: 3px;
+	left: 3px;
+	border-radius: 40px;
+}
+
+
+/* AUDIO PLAYER ICONS */
+.icon.skip-back {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+
+.icon.skip-back::after,
+.icon.skip-back::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	height: 8px;
+	top: 5px;
+}
+
+.icon.skip-back::before {
+	width: 2px;
+	border-radius: 2px;
+	right: 11px;
+	background: currentColor;
+}
+
+.icon.skip-back::after {
+	width: 0;
+	border-top: 4px solid transparent;
+	border-bottom: 4px solid transparent;
+	border-right: 5px solid;
+	right: 5px;
+}
+
+.icon.rewind {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	border: 2px solid;
+	border-radius: 4px;
+	width: 22px;
+	height: 22px;
+}
+
+.icon.rewind::after,
+.icon.rewind::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	border-left: 2px solid;
+	border-bottom: 2px solid;
+	transform: rotate(45deg);
+	top: 6px;
+	left: 5px;
+}
+
+.icon.rewind::after {
+	left: 9px;
+}
+
+.icon.play {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+
+.icon.play::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 0;
+	height: 10px;
+	border-top: 5px solid transparent;
+	border-bottom: 5px solid transparent;
+	border-left: 6px solid;
+	top: 4px;
+	left: 7px;
+}
+
+.icon.pause {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+
+.icon.pause::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	left: 6px;
+	top: 6px;
+	border-left: 2px solid;
+	border-right: 2px solid;
+}
+
+.icon.fastforward {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	border: 2px solid;
+	border-radius: 4px;
+	width: 22px;
+	height: 22px;
+}
+
+.icon.fastforward::after,
+.icon.fastforward::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	border-right: 2px solid;
+	border-top: 2px solid;
+	transform: rotate(45deg);
+	top: 6px;
+	right: 5px;
+}
+
+.icon.fastforward::after {
+	right: 9px;
+}
+
+.icon.skip-forward {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+
+.icon.skip-forward::after,
+.icon.skip-forward::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	height: 8px;
+	top: 5px;
+}
+
+.icon.skip-forward::before {
+	width: 2px;
+	border-radius: 2px;
+	left: 11px;
+	background: currentColor;
+}
+
+.icon.skip-forward::after {
+	width: 0;
+	border-top: 4px solid transparent;
+	border-bottom: 4px solid transparent;
+	border-left: 5px solid;
+	left: 5px;
+}
diff --git a/public/index.html b/public/index.html
index 2b5a262..09d55ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
 		<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" ></link>
 
 		<link rel="stylesheet" href="/base.css"></link>
+		<link rel="stylesheet" href="/icons.css"></link>
 		<link rel="stylesheet" href="/files/custom.css"></link>
 
 		<!-- inlining these to force them to be scoped for everything else -->
diff --git a/public/js/embeds/vimeo.js b/public/js/embeds/vimeo.js
index 353b0a0..c5f6215 100644
--- a/public/js/embeds/vimeo.js
+++ b/public/js/embeds/vimeo.js
@@ -27,7 +27,7 @@ function embed_vimeo(link_info) {
 		<iframe
 		src="https://player.vimeo.com/video/${video_id}"
 		frameborder="0"
-		allow="fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
+		allow="fullscreen; picture-in-picture; clipboard-write; encrypted-media;"
 		referrerpolicy="strict-origin-when-cross-origin"
 		title="Star Trek: Legacy"
 		loading="lazy"></iframe>
diff --git a/public/js/embeds/youtube.js b/public/js/embeds/youtube.js
index 1269d6c..5d65b6d 100644
--- a/public/js/embeds/youtube.js
+++ b/public/js/embeds/youtube.js
@@ -29,7 +29,7 @@ function embed_youtube(link_info) {
 		<iframe
 		src="https://www.youtube.com/embed/${video_id}"
 		title="YouTube video player"
-		allow="clipboard-write; encrypted-media; picture-in-picture; web-share;"
+		allow="clipboard-write; encrypted-media; picture-in-picture;"
 		referrerpolicy="strict-origin-when-cross-origin"
 	 	allowfullscreen
 		loading="lazy"
diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html
index 6b5d10d..0a616ba 100644
--- a/public/sidebar/sidebar.html
+++ b/public/sidebar/sidebar.html
@@ -145,7 +145,7 @@
 		padding: 1rem;
 		display: flex;
 		align-items: center;
-		color: var(--text);
+		color: var(--text-primary);
 		letter-spacing: 0.5px;
 		transition:
 			background 0.25s,
@@ -257,7 +257,7 @@
 		padding: 0.75rem;
 		margin: 0 0.75rem 1rem 0;
 		background: none;
-		color: var(--text);
+		color: var(--text-primary);
 		border: 1px solid var(--border-highlight);
 		border-radius: var(--border-radius);
 		box-shadow: none;
@@ -364,7 +364,7 @@
 			top: 0;
 			left: 0;
 			bottom: 0;
-			padding: 0.75rem;
+			padding: 1rem;
 			width: 6rem;
 			border-right: 1px solid var(--border-subtle);
 			overflow-y: auto;
@@ -421,7 +421,7 @@
 		#server-info {
 			position: relative;
 			height: 100%;
-			padding: 0.75rem;
+			padding: 1rem 2rem;
 		}
 	</style>
 	<div id="server-info">
diff --git a/public/signup_login_wall.html b/public/signup_login_wall.html
index 23eb841..bb94523 100644
--- a/public/signup_login_wall.html
+++ b/public/signup_login_wall.html
@@ -17,19 +17,9 @@
 		}
 
 		#auth-container {
-			width: 95%;
-			max-height: calc(min(90vh,900px));
-			border-radius: 10px;
 			position: relative;
-			background: var(--bg-lighter);
-			max-width: 40em;
-			margin: 0 auto;
-			border-radius: calc( var(--border-radius) * 2.5);
-			padding: 2em 1em;
+			padding: 8em 4em;
 			overflow-y: scroll;
-
-			transition: all 0.33s ease;
-			animation: zoomsettle 0.4s ease;
 		}
 
 		#signup-tab,
@@ -108,6 +98,10 @@
 						<input id="signup-password" type="password" name="password" required />
 						<label class="placeholder" for="signup-password">password</label>
 					</div>
+					<div>
+						<input id="signup-password-verification" type="password" name="password_verification" required />
+						<label class="placeholder" for="signup-password-verification">verify password</label>
+					</div>
 					<div>
 						<script>
 							APP.on( 'load', () => {
diff --git a/public/tabs/chat/channel_sidebar.html b/public/tabs/chat/channel_sidebar.html
index 8ac59fa..1e2f8ed 100644
--- a/public/tabs/chat/channel_sidebar.html
+++ b/public/tabs/chat/channel_sidebar.html
@@ -159,7 +159,7 @@
 		font-weight: bold;
 		font-size: x-large;
 		content: "#";
-		color: var(--text);
+		color: var(--text-primary);
 	}
 
 	#channel-list-container .channel-list > li.channel a {
diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css
index 3742ce4..f5f9382 100644
--- a/public/tabs/chat/chat.css
+++ b/public/tabs/chat/chat.css
@@ -131,7 +131,7 @@
 	position: absolute;
 	top: 0.1rem;
 	right: 0.1rem;
-	color: rgb(from var(--text) r g b / 0.7);
+	color: rgb(from var(--text-primary) r g b / 0.7);
 	border: none;
 	z-index: 10;
 }
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index e19bf8e..bbbee2b 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -152,7 +152,8 @@
 				method="POST"
 				class="post-creation-form collapsible"
 				style="
-					margin-top: 1rem
+					position: relative;
+					margin-top: 1rem;
 					width: 100%;
 					transition: all 0.5s;
 				"
@@ -221,6 +222,7 @@
 					reset-on-submit
 					focus-on-submit
 					enter-key-submits
+					accept-speech
 				></textarea>
 
 				<button id="chat-send" class="primary" aria-label="Send a message">
diff --git a/tests/01_create_user.test.ts b/tests/01_create_user.test.ts
index fbea069..8857abc 100644
--- a/tests/01_create_user.test.ts
+++ b/tests/01_create_user.test.ts
@@ -27,10 +27,188 @@ Deno.test({
 			const password_hash = encodeBase64(
 				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password))
 			);
+			const password_verification_hash = encodeBase64(
+				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password))
+			);
 
 			const info = await get_new_user(client, {
 				username,
-				password_hash
+				password_hash,
+				password_verification_hash
+			});
+
+			asserts.assert(info);
+			asserts.assert(info.user);
+			asserts.assert(info.session);
+			asserts.assert(info.headers);
+
+			const user: USER = info.user;
+
+			asserts.assertEquals(user.username, username);
+
+			await delete_user(client, info);
+		} finally {
+			if (test_server_info) {
+				await test_server_info?.server?.stop();
+			}
+		}
+	}
+});
+
+Deno.test({
+	name: 'API - USERS - Create (fail on mismatched password verification hash)',
+	permissions: {
+		env: true,
+		read: true,
+		write: true,
+		net: true
+	},
+	fn: async () => {
+		let test_server_info: EPHEMERAL_SERVER | null = null;
+		try {
+			test_server_info = await get_ephemeral_listen_server();
+			const client: API_CLIENT = api({
+				prefix: '/api',
+				hostname: test_server_info.hostname,
+				port: test_server_info.port
+			});
+
+			const username = random_username();
+			const password = 'password';
+			const password_hash = encodeBase64(
+				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password))
+			);
+			const password_verification_hash = encodeBase64(
+				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password + '1'))
+			);
+
+			try {
+				const info = await get_new_user(client, {
+					username,
+					password_hash,
+					password_verification_hash
+				});
+
+				asserts.fail('allowed user creation with mismatched password_verification_hash')
+			}
+			catch( error ) {
+				asserts.assert( error );
+			}
+		} finally {
+			if (test_server_info) {
+				await test_server_info?.server?.stop();
+			}
+		}
+	}
+});
+
+Deno.test({
+	name: 'API - USERS - Create (mismatched password_verification)',
+	permissions: {
+		env: true,
+		read: true,
+		write: true,
+		net: true
+	},
+	fn: async () => {
+		let test_server_info: EPHEMERAL_SERVER | null = null;
+		try {
+			test_server_info = await get_ephemeral_listen_server();
+			const client: API_CLIENT = api({
+				prefix: '/api',
+				hostname: test_server_info.hostname,
+				port: test_server_info.port
+			});
+
+			const username = random_username();
+			const password = 'password';
+
+			try {
+				const info = await get_new_user(client, {
+					username,
+					password,
+					password_verification: password + '1'
+				});
+
+				asserts.fail( 'allowed account creation with mismatched password_verification' );
+			}
+			catch( error ) {
+				asserts.assert( error );
+			}
+		} finally {
+			if (test_server_info) {
+				await test_server_info?.server?.stop();
+			}
+		}
+	}
+});
+
+Deno.test({
+	name: 'API - USERS - Create (auto-generate password in testing)',
+	permissions: {
+		env: true,
+		read: true,
+		write: true,
+		net: true
+	},
+	fn: async () => {
+		let test_server_info: EPHEMERAL_SERVER | null = null;
+		try {
+			test_server_info = await get_ephemeral_listen_server();
+			const client: API_CLIENT = api({
+				prefix: '/api',
+				hostname: test_server_info.hostname,
+				port: test_server_info.port
+			});
+
+			const username = random_username();
+
+			const info = await get_new_user(client, {
+				username,
+			});
+
+			asserts.assert(info);
+			asserts.assert(info.user);
+			asserts.assert(info.session);
+			asserts.assert(info.headers);
+
+			const user: USER = info.user;
+
+			asserts.assertEquals(user.username, username);
+
+			await delete_user(client, info);
+		} finally {
+			if (test_server_info) {
+				await test_server_info?.server?.stop();
+			}
+		}
+	}
+});
+
+Deno.test({
+	name: 'API - USERS - Create (auto-generate password_verification in testing)',
+	permissions: {
+		env: true,
+		read: true,
+		write: true,
+		net: true
+	},
+	fn: async () => {
+		let test_server_info: EPHEMERAL_SERVER | null = null;
+		try {
+			test_server_info = await get_ephemeral_listen_server();
+			const client: API_CLIENT = api({
+				prefix: '/api',
+				hostname: test_server_info.hostname,
+				port: test_server_info.port
+			});
+
+			const username = random_username();
+			const password = 'password';
+
+			const info = await get_new_user(client, {
+				username,
+				password
 			});
 
 			asserts.assert(info);
diff --git a/tests/helpers.ts b/tests/helpers.ts
index 2e53f6e..7fd6905 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -119,6 +119,18 @@ export async function get_new_user(client: API_CLIENT, user_info?: Record<string
 		new_user_request_json.password = `${Math.round(Math.random() * 10)} - ${random_username()} ! ${random_username()}`;
 	}
 
+	if (
+		!((typeof new_user_request_json.password_verification === 'string' && new_user_request_json.password_verification.length) ||
+			(typeof new_user_request_json.password_verification_hash === 'string' && new_user_request_json.password_verification_hash.length))
+	) {
+		if ( typeof new_user_request_json.password === 'string' ) {
+			new_user_request_json.password_verification = new_user_request_json.password;
+		}
+		else if ( typeof new_user_request_json.password_hash === 'string' ) {
+			new_user_request_json.password_verification_hash = new_user_request_json.password_hash;
+		}
+	}
+
 	if (inviting_user_info) {
 		const invite_code = await client.fetch(`/users/${inviting_user_info.user?.id}/invites`, {
 			method: 'POST',
diff --git a/utils/prechecks.ts b/utils/prechecks.ts
index 001a46a..0c1cebb 100644
--- a/utils/prechecks.ts
+++ b/utils/prechecks.ts
@@ -36,10 +36,6 @@ export function require_user(
 	meta: Record<string, any>
 ): undefined | Response {
 	if (!meta.user) {
-		console.dir({
-			require_user: true,
-			meta
-		});
 		return CANNED_RESPONSES.permission_denied();
 	}
 }