add a vim-like command line under :

static/css/main.css

@@ -108,6 +108,11 @@ body {
     scrollbar-gutter: stable;
 }
 
+:focus-visible {
+    outline: 1px solid var(--liquidex-brand-blue);
+    outline-offset: 2px;
+}
+
 /* Set up typography */
 
 @font-face {
@@ -131,8 +136,11 @@ pre,
 code,
 kbd,
 button,
-select {
+select,
+input,
+dfn {
     font-family: "RecVar", sans-serif;
+    font-style: normal;
     line-height: 1.5;
 }
 
@@ -144,8 +152,9 @@ pre,
 code,
 kbd,
 button,
-select {
-    font-size: 100%;
+select,
+input {
+    font-size: inherit;
 }
 
 :root {
@@ -499,28 +508,7 @@ h1.page-title {
     }
 }
 
-/* Style the `new` link on the homepage */
-a[data-cast~="new"] {
-    flex-shrink: 0;
-    color: var(--text-color);
-    opacity: 50%;
-
-    &.has-news {
-        opacity: 100%;
-        text-decoration: none;
-
-        & .new-text {
-            text-decoration: underline;
-        }
-    }
-
-    & .badge {
-        margin-left: var(--8px);
-        text-decoration: none;
-    }
-}
-
-/* Style new badges */
+/* Style badges */
 span.badge {
     --recursive-wght: 800;
     --recursive-mono: 1;
@@ -641,6 +629,20 @@ footer {
     }
 }
 
+/* Style dialogues */
+
+dialog[open] {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    color: var(--text-color);
+    background-color: var(--background-color);
+    border: 1px solid var(--border-1);
+    border-radius: 12px;
+}
+
 /* Style emojis to be readable */
 
 img[data-cast~="emoji"] {
@@ -702,35 +704,78 @@ th-emoji-tooltip p {
     cursor: help;
 }
 
-/* Funny joke */
+/* Command line */
 
-@keyframes hello-there {
-    0% {
-        opacity: 0%;
-    }
+th-command-line {
+    --recursive-mono: 1;
+    --recursive-casl: 0;
 
-    70% {
-        opacity: 0%;
-    }
-
-    100% {
-        opacity: 70%;
-    }
-}
-
-.oops-you-seem-to-have-gotten-stuck {
-    margin-top: 16px;
     display: none;
-    position: absolute;
-    opacity: 0%;
-}
+    flex-direction: column;
 
-#index\:treehouse
-    > details:not([open])
-    > summary
-    .oops-you-seem-to-have-gotten-stuck {
-    display: inline;
-    animation: 4s hello-there forwards;
+    background-color: var(--background-color-tooltip);
+    font-size: 87.5%;
+
+    &.visible {
+        display: flex;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+    }
+
+    & > .input-wrapper {
+        display: flex;
+        flex-direction: row;
+
+        padding: 2px 4px;
+        width: 100%;
+
+        &::before {
+            content: ":";
+            padding-right: 2px;
+            opacity: 50%;
+        }
+
+        & > input {
+            background: none;
+            color: var(--text-color);
+            border: none;
+            flex-grow: 1;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    & > ul.suggestions {
+        list-style: none;
+
+        display: flex;
+        flex-direction: column;
+
+        margin: 0;
+        padding: 0;
+
+        & > li {
+            padding: 2px 8px;
+
+            cursor: default;
+
+            & > dfn {
+                --recursive-crsv: 0;
+                --recursive-wght: 700;
+                margin-right: 2ch;
+            }
+
+            &:hover,
+            &.tabbed {
+                background-color: var(--liquidex-brand-blue);
+                color: white;
+            }
+        }
+    }
 }
 
 /* Literate programming support */