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;
+			};
+		}
+	}
+}

styles/v3/index.scss

@@ -0,0 +1,33 @@
+/* Element-Styling */
+@use "./elements/button.scss";
+@use "./elements/headers.scss";
+@use "./elements/hr.scss";
+@use "./elements/icons.scss";
+
+/* Sheet Options */
+.dotdungeon.style-v3 {
+	--scrollbar-width: 5px;
+	--scrollbar-handle-color: #782e22;
+	--scrollbar-handle-border-color: var(--color-border-highlight);
+	--color-checkbox-checked: inherit;
+	::-webkit-scrollbar {
+		width: var(--scrollbar-width);
+	}
+	::-webkit-scrollbar-thumb {
+		background: var(--scrollbar-handle-color);
+		border-color: var(--scrollbar-handle-border-color);
+		border-radius: 5px;
+	}
+
+	container-type: size;
+
+	> .window-content {
+		padding: 0;
+
+		.debug-data {
+			opacity: 60%;
+			font-family: sans-serif;
+			word-break: break-all;
+		}
+	}
+}

styles/v3/mixins/_material.scss

@@ -0,0 +1,13 @@
+@mixin elevate($height) {
+	background-color: var(--elevation-#{$height}dp-bg);
+	-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+	box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+}
+
+@mixin undo {
+	background-color: transparent;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+}