static keyboard SVG + angle-mod support (#58)

* static keyboard SVG + angle-mod support

* <dialog> and ::backdrop

css/demo.css

@@ -1,13 +1,54 @@
-#demo div {
+.keyboard { margin-bottom: 2.5em; }
+.keyboard p { margin: 0; }
+
+.keyboard nav {
+  text-align: center;
+}
+
+.keyboard nav a,
+.keyboard nav button {
+  display: inline-block;
+  margin: 0 1.6em 0 0;
+  padding: 10px;
+  font-family: sans-serif;
+  font-size: 1.3em;
+  text-decoration: none;
+
+  color: #333;
+  background-color: #e4e4e4;
+  border: 1px solid #6668;
+  border-radius: 5px;
+}
+
+.keyboard nav button {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.keyboard [hidden] {
+  display: none;
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(5px);
+}
+
+#demo {
+  max-width: 70em;
   width: 100%;
-  max-width: 54em;
-  box-sizing: border-box;
+  padding: 2em;
   margin: auto;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border: 5px solid #fff4;
 }
 
 #demo input {
   box-sizing: border-box;
+  border-radius: 6px;
   width: 100%;
+  height: 2em;
   text-align: center;
   font-size: 1.5em;
   margin-bottom: 1em;
@@ -22,3 +63,19 @@
   float: left;
   font-size: small;
 }
+
+@media (prefers-color-scheme: dark) {
+
+  .keyboard nav a,
+  .keyboard nav button {
+    color: #ccc;
+    background-color: #444;
+    border: 1px solid #7778;
+  }
+
+  #demo {
+    background-color: #222;
+    border: 5px solid #0004;
+  }
+
+}