Improve mobile UX: h1 font-size and Google Fonts link

src/components/Sidebar.tsx

@@ -66,7 +66,18 @@ export default function Sidebar({ state, setState }: SidebarProps) {
         <summary>Font Settings</summary>
         <div>
           <label>
-            Google font: 
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.25rem' }}>
+              <span>Google font:</span>
+              <a 
+                href="https://fonts.google.com" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                style={{ fontSize: '0.85em', display: 'flex', alignItems: 'center', gap: '0.25rem' }}
+              >
+                Browse fonts
+                <i data-lucide="external-link" style={{ width: '14px', height: '14px' }}></i>
+              </a>
+            </div>
             <select 
               id="font-select" 
               value={fontFamily}

src/styles/index.css

@@ -1,3 +1,22 @@
 main section {
     text-align: center;
-}
+}
+
+/* Mobile portrait styles */
+@media (max-width: 767px) {
+    h1 {
+        font-size: 1.4rem;
+    }
+}
+
+/* 
+ * Note: Orientation-based media query for landscape mode removed.
+ * This belongs in the tool-style layout package, not in app-specific CSS.
+ * 
+ * For reference, the media query that was here:
+ * @media (max-width: 999px) and (orientation: landscape) {
+ *     .container { flex-direction: row; }
+ *     aside { width: 300px; order: 1; }
+ *     main { order: 2; flex: 1; }
+ * }
+ */