Add the most basic form of the Art Browser that just lets users see and filter the tokens

styles/apps/ArtBrowser.css

@@ -0,0 +1,64 @@
+.token-browser.ArtBrowser {
+	> .window-content {
+		display: grid;
+		grid-template-columns: 175px auto;
+		gap: 0;
+	}
+
+	form {
+		--spacing: 12px;
+		border-right: var(--sidebar-separator);
+		margin-right: var(--spacing);
+		padding-right: var(--spacing);
+	}
+
+	.image-list {
+		--size: 100px;
+		list-style-type: none;
+		display: grid;
+		grid-template-columns: repeat(4, var(--size));
+		gap: 8px;
+		padding: 0;
+		margin: 0;
+		max-height: 450px;
+		overflow-y: auto;
+	}
+
+	.image {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		border-radius: 4px;
+		overflow: hidden;
+		transition: background 100ms ease-in-out;
+
+		&.grid {
+			&:hover {
+				background: var(--color-cool-4);
+			}
+		}
+
+		img {
+			width: 100%;
+			aspect-ratio: 1;
+			object-fit: contain;
+		}
+
+		.details {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			padding: 0px 4px 4px;
+		}
+	}
+
+	.paginated {
+		display: flex;
+		flex-direction: column;
+		gap: 6px; /* Due to the grow element, this actually means 12px */
+	}
+
+	.page-nav {
+		justify-content: center;
+	}
+}

styles/main.css

@@ -2,6 +2,7 @@
 
 /* Resets */
 @import url("./resets/lists.css") layer(resets);
+@import url("./resets/hr.css") layer(resets);
 
 /* Elements */
 @import url("./elements/utils.css") layer(elements);
@@ -9,5 +10,6 @@
 
 /* Apps */
 @import url("./apps/common.css") layer(apps);
+@import url("./apps/ArtBrowser.css") layer(apps);
 @import url("./apps/ArtistApp.css") layer(apps);
 @import url("./apps/ImageApp.css") layer(apps);

styles/resets/hr.css

@@ -0,0 +1,7 @@
+.token-browser > .window-content hr {
+	all: initial;
+	display: block;
+	width: 100%;
+	margin: 12px 0;
+	border-top: var(--sidebar-separator);
+}