added navigation icons

src/media/chevron-right.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file

src/media/mic.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
\ No newline at end of file

src/styles/config.css

@@ -28,5 +28,5 @@ https://github.com/less/less.js/issues/3537 */
 :root {
   --color-white: hsl(0 0% 100%);
   --color-black: hsl(0 0% 0%);
-  --color-grey-01: hsl(0 0% 50%);
+  --color-grey-01: hsl(0 0% 40%);
 }

src/styles/main.css

@@ -11,27 +11,60 @@
   justify-items: center;
   align-items: center;
 }
-a {
+.link {
+  position: relative;
+}
+.link:not(:last-child) {
+  margin-bottom: 0.4em;
+}
+.link a {
   color: inherit;
   text-decoration: none;
   border-bottom: solid 0.1em transparent;
+  transition: border 0.1s ease-out;
 }
-.link {
-  position: relative;
+.link:not(.back-btn) a:after,
+.link.back-btn a:before {
+  --chevron-size: 1.2em;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: var(--chevron-size);
+  height: var(--chevron-size);
+  background: url("/src/media/chevron-right.svg") 0% center no-repeat;
+  background-size: 0.8em;
+  opacity: 0;
+  transition: all 0.1s ease-out;
+}
+.link.back-btn a:before {
+  transform: rotate(180deg);
+  left: calc(var(--chevron-size) * -1);
 }
 .link .command {
-  font-size: 0.5em;
+  font-size: 0.4em;
   line-height: 1em;
   font-style: italic;
+  text-transform: capitalize;
   color: var(--color-grey-01);
 }
-.link .command:before,
-.link .command:after {
-  content: '"';
+.link .command:before {
+  content: "";
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-right: 0.4em;
+  background: url("/src/media/mic.svg") center center no-repeat;
+  background-size: 0.8em;
 }
 .link[data-selected] a {
   border-color: var(--color-white);
 }
+.link[data-selected]:not(.back-btn) a:after,
+.link[data-selected].back-btn a:before {
+  opacity: 1;
+  background-position: center center;
+}
 aside {
   display: flex;
   flex-direction: column;

src/styles/main.less

@@ -13,24 +13,55 @@
   align-items: center;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-  border-bottom: solid 0.1em transparent;
-}
-
 .link {
   position: relative;
 
+  &:not(:last-child) {
+    margin-bottom: 0.4em;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    border-bottom: solid 0.1em transparent;
+    transition: border 0.1s ease-out;
+  }
+
+  &:not(.back-btn) a:after,
+  &.back-btn a:before {
+    --chevron-size: 1.2em;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    width: var(--chevron-size);
+    height: var(--chevron-size);
+    background: url("/src/media/chevron-right.svg") 0% center no-repeat;
+    background-size: 0.8em;
+    opacity: 0;
+    transition: all .1s ease-out;
+  }
+
+  &.back-btn a:before {
+    transform: rotate(180deg);
+    left: calc(var(--chevron-size) * -1);
+  }
+
   .command {
-    font-size: 0.5em;
+    font-size: 0.4em;
     line-height: 1em;
     font-style: italic;
+    text-transform: capitalize;
     color: var(--color-grey-01);
 
-    &:before,
-    &:after {
-      content: '"';
+    &:before {
+      content:"";
+      display: inline-block;
+      width: .8em;
+      height: .8em;
+      margin-right: .4em;
+      background: url("/src/media/mic.svg") center center no-repeat;
+      background-size: .8em;
     }
   }
 
@@ -38,6 +69,11 @@ a {
     a {
       border-color: var(--color-white);
     }
+    &:not(.back-btn) a:after,
+    &.back-btn a:before {
+      opacity: 1;
+      background-position: center center;
+    }
   }
 }
 
@@ -52,7 +88,7 @@ aside {
 #log {
   color: hsl(0 100% 30%);
   position: absolute;
-  font: normal .6em/1.2em sans-serif;
+  font: normal 0.6em/1.2em sans-serif;
   top: 0;
   left: 0;
   max-height: 20vh;