Add multiple fonts

src/styles/_panel.scss

@@ -185,3 +185,66 @@
 		opacity: 1;
 	}
 }
+
+/* Picking the hand the book is written in.
+ *
+ * Each option is set in the hand it offers, because the name of a typeface
+ * tells you nothing - what your own words look like in it is the whole
+ * decision. The sample line comes from the dictionary, so it reads as a
+ * sentence rather than as "Aa Bb Cc" in whatever language.
+ */
+.hand-picker {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+	gap: 0.5rem;
+}
+
+.hand-picker__option {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.15rem;
+	padding: 0.6rem 0.75rem;
+	text-align: left;
+	cursor: pointer;
+	border: 1px solid color.$rule;
+	border-radius: var.$block-radius;
+	background-color: color.$paper;
+	color: color.$ink;
+	transition: border-color var.$trans-quick, background-color var.$trans-quick;
+
+	&:hover:not(:disabled) {
+		border-color: color.$ink-faint;
+		background-color: color.$paper-shade;
+	}
+
+	&:disabled {
+		opacity: 0.55;
+		cursor: default;
+	}
+}
+
+//The one in use: a ruled line under the sample, like the page itself
+.hand-picker__option--on {
+	border-color: color.$caramel;
+	background-color: color.$paper-shade;
+	box-shadow: inset 0 0 0 1px color.$caramel;
+}
+
+.hand-picker__sample {
+	font-size: 1.45rem;
+	line-height: 1.35;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+}
+
+//The name is the only part not set in the hand - it is a label, not a sample
+.hand-picker__name {
+	font-family: var.$font-ui;
+	font-size: 0.72rem;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: color.$ink-faint;
+}