Show terminal glyph in the page logo tile

index.html

@@ -22,7 +22,13 @@
     <div class="shell">
       <header class="topbar">
         <div class="brand">
-          <div class="logo-dot" aria-hidden="true"></div>
+          <div class="logo-tile" aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <path class="logo-frame" d="M4,4 L20,4 C21.1045695,4 22,4.8954305 22,6 L22,18 C22,19.1045695 21.1045695,20 20,20 L4,20 C2.8954305,20 2,19.1045695 2,18 L2,6 C2,4.8954305 2.8954305,4 4,4 Z M4,6 L4,18 L20,18 L20,6 L4,6 Z"/>
+              <path class="logo-frame" d="M10.9852814,11.5710678 L7.44974747,15.1066017 L6.03553391,13.6923882 L8.15685425,11.5710678 L6.03553391,9.44974747 L7.44974747,8.03553391 L10.9852814,11.5710678 Z"/>
+              <path class="logo-cursor" d="M12,14 L18,14 L18,16 L12,16 L12,14 Z"/>
+            </svg>
+          </div>
           <div class="brand-text">
             <h1>GG36 ~/</h1>
           </div>

style.css

@@ -72,23 +72,31 @@ body {
   gap: 16px;
 }
 
-.logo-dot {
+.logo-tile {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   box-shadow: 0 10px 30px -8px rgba(247, 107, 47, 0.5);
-  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: none;
 }
 
-.logo-dot::after {
+.logo-tile svg {
-  content: "";
+  width: 28px;
-  position: absolute;
+  height: 28px;
-  inset: 10px;
+  display: block;
-  border-radius: 8px;
+}
-  background: rgba(7, 11, 20, 0.55);
+
-  backdrop-filter: blur(2px);
+/* terminal glyph (feathericon "terminal", MIT) on the accent tile */
+.logo-tile .logo-frame {
+  fill: var(--bg-soft);
+}
+
+.logo-tile .logo-cursor {
+  fill: var(--text);
 }
 
 .brand-text h1 {