add angular-round selector

popup.css

@@ -1,3 +1,14 @@
+@font-face {
+  font-family: "Glagolify Noto Sans Glagolitic";
+  src: url("fonts/NotoSansGlagolitic-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Glagolify Shafarik Angular";
+  src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+  font-feature-settings: "ss03";
+}
+
 :root {
   color-scheme: light dark;
   font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -47,6 +58,80 @@ header p {
   font-size: 12px;
 }
 
+.font-style {
+  min-width: 0;
+  margin: 0 0 14px;
+  border: 0;
+  padding: 0;
+}
+
+.font-style legend {
+  margin-bottom: 7px;
+  padding: 0;
+  color: #5f596a;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.style-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.style-option {
+  position: relative;
+}
+
+.style-option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.style-option > span {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  border: 1px solid #d9d2e5;
+  border-radius: 9px;
+  padding: 7px 9px;
+  background: #f5f2fa;
+  color: #50495b;
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
+}
+
+.style-option input:checked + span {
+  border-color: #6842b8;
+  background: #eee7fb;
+  color: #4c288f;
+}
+
+.style-option input:focus-visible + span {
+  outline: 3px solid #bba2ec;
+  outline-offset: 2px;
+}
+
+.style-option input:disabled + span {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.glyph {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.round-glyph {
+  font-family: "Glagolify Noto Sans Glagolitic";
+}
+
+.angular-glyph {
+  font-family: "Glagolify Shafarik Angular";
+}
+
 .status {
   min-height: 20px;
   margin-bottom: 10px;
@@ -107,6 +192,22 @@ button:disabled {
     color: #bdb5c7;
   }
 
+  .font-style legend {
+    color: #bdb5c7;
+  }
+
+  .style-option > span {
+    border-color: #4a4452;
+    background: #29252f;
+    color: #c9c1d1;
+  }
+
+  .style-option input:checked + span {
+    border-color: #9d7cdd;
+    background: #392d4d;
+    color: #e2d4ff;
+  }
+
   button:disabled {
     color: #77717e;
     background: #343039;