Begin working on a scoped CSS solution that uses a common design language across all sheets, and *just* does sheet-specific layout tasks

styles/v3/elements/button.scss

@@ -0,0 +1,43 @@
+@use "../mixins/material" as material;
+
+.dotdungeon.style-v3 > .window-content button {
+	@include material.elevate(2);
+	align-items: center;
+	border-radius: 4px;
+	border: none;
+	box-sizing: border-box;
+	color: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	font-family: sans-serif;
+	gap: 4px;
+	justify-content: center;
+	margin: 0;
+	outline: none;
+	padding: 4px 8px;
+	transition: all 400ms ease-in-out;
+	width: initial;
+
+	&:hover, &:focus-visible {
+		@include material.elevate(4);
+	}
+	&:active {
+		@include material.elevate(6);
+	}
+
+	&:disabled {
+		opacity: 50%;
+		cursor: default;
+	}
+
+	/* Icon buttons don't use Material styling */
+	&.icon {
+		@include material.undo;
+		padding: 4px;
+
+		&:focus-visible {
+			@include material.undo;
+			// TODO : Accessible focus state
+		}
+	}
+}

styles/v3/elements/headers.scss

@@ -0,0 +1,7 @@
+.dotdungeon.style-v3 > .window-content {
+	h1, h2, h3, h4, h5, h6 {
+		border: none;
+		font-size: 1rem;
+		margin: 0;
+	}
+}

styles/v3/elements/hr.scss

@@ -0,0 +1,6 @@
+.dotdungeon.style-v3 > .window-content hr {
+	border-color: black;
+	opacity: 25%;
+	width: 100%;
+	grid-column: 1 / -1;
+}

styles/v3/elements/icons.scss

@@ -0,0 +1,17 @@
+$iconSizes: 12, 14, 16, 18, 20, 22, 24;
+
+.dotdungeon.style-v3 > .window-content {
+	.icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+
+		// The various icon sizes
+		@each $size in $iconSizes {
+			&--#{$size} {
+				height: #{$size}px;
+				width: #{$size}px;
+			};
+		}
+	}
+}