feat: add application header with logo and favicon for improved branding

src/styles.css

@@ -2,6 +2,41 @@
     --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
+.app-header {
+    background: #f5f5f5;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.app-header a {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity 0.2s;
+}
+
+.app-header a:hover {
+    opacity: 0.8;
+}
+
+.app-header img {
+    width: 24px;
+    height: 24px;
+}
+
+.app-header h1 {
+    font-family: var(--ui-font);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
 #vis {
     width: 100%;
     height: 100%;
@@ -37,11 +72,16 @@
 
 .container {
     display: grid;
+    grid-template-rows: auto 1fr;
     grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);
     height: 100vh;
     background-color: #e0e0e0;
 }
 
+.app-header {
+    grid-column: 1 / -1;
+}
+
 .panel {
     background: white;
     overflow-y: auto;