add proper error and disconnect handling

error handling shows you the error and offers the ability to reload;
disconnect handling shows you that the page will reload in a few seconds.
it uses exponential backoff with some random sprinkled into it to prevent overwhelming the server once people's clients decide to reconnect.

static/index.css

@@ -36,6 +36,15 @@ body {
     font-weight: 400;
 }
 
+@font-face {
+    font-family: "Fira Sans";
+    src:
+        local("Fira Sans Italic"),
+        url("font/FiraSans-Italic.ttf");
+    font-weight: 400;
+    font-style: italic;
+}
+
 @font-face {
     font-family: "Fira Sans";
     src:
@@ -131,8 +140,7 @@ input {
     border-bottom: 1px solid var(--color-panel-border);
 }
 
-*[contenteditable]:focus, input:focus, textarea:focus {
-    border-radius: 2px;
+*:focus {
     outline: 1px solid #40b1f4;
     outline-offset: 4px;
 }
@@ -149,6 +157,12 @@ dialog::backdrop {
     backdrop-filter: blur(8px);
 }
 
+/* Details */
+
+details>summary {
+    cursor: pointer;
+}
+
 /* Throbbers */
 
 @keyframes rkgk-throbber-loading {
@@ -295,7 +309,7 @@ rkgk-welcome {
 /* Connection status dialogs */
 
 rkgk-connection-status {
-    &>dialog[name='logging-in-dialog'][open] {
+    &>dialog[name='logging-in-dialog'][open], &>dialog[name='disconnected-dialog'][open] {
         border: none;
         outline: none;
         background: none;
@@ -304,4 +318,14 @@ rkgk-connection-status {
         gap: 8px;
         align-items: center;
     }
+
+    &>dialog[name='error-dialog'][open] {
+        & textarea[name='error-text'] {
+            box-sizing: border-box;
+            width: 100%;
+            resize: none;
+            border: 1px solid var(--color-panel-border);
+            padding: 4px;
+        }
+    }
 }