feat(library): show themed logo mark in the banner

src/components/Library.tsx

@@ -20,6 +20,7 @@ export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
   return (
     <div className="library">
       <header className="library-head">
+        <span className="logo" aria-hidden="true" />
         <span className="mark">margin</span>
         <span className="dot" />
       </header>

src/styles/app.css

@@ -820,15 +820,24 @@ button {
 .library-head {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 11px;
   padding: 30px 44px 8px;
 }
 
+.library-head .logo {
+  width: 30px;
+  height: 30px;
+  background-color: var(--ink);
+  -webkit-mask: url("/margin-mark.png") center / contain no-repeat;
+  mask: url("/margin-mark.png") center / contain no-repeat;
+}
+
 .library-head .mark {
   font-family: var(--font-book);
   font-size: 23px;
   font-weight: 500;
   letter-spacing: -0.01em;
+  margin-left: -3px;
 }
 
 .library-head .dot {