Modern fermata logo

src/App.tsx

@@ -1,4 +1,7 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Logo } from './components/Logo';
+
+
 import { SheetMusic } from './components/SheetMusic';
 import { Controls, type AppSettings } from './components/Controls';
 import { SettingsModal } from './components/SettingsModal';
@@ -398,7 +401,7 @@ function App() {
       {!settings.zenMode && (
         <header className="app-header">
           <div className="app-header-left">
-            <div className="logo">Sheet music trainer</div>
+            <Logo className="logo" />
           </div>
 
           <div className="header-controls">

src/components/Logo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const Logo: React.FC<{ className?: string }> = ({ className }) => {
+    return (
+        <svg
+            width="250"
+            height="40"
+            viewBox="0 0 250 40"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+            aria-label="sight-reading.de logo"
+        >
+            <defs>
+                <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {/* Using currentColor strategy if needed, but for black/white requirement we stick to solid fill usually. 
+              However, relying on currentColor allows dark mode adaptation. */}
+                </linearGradient>
+            </defs>
+
+            {/* Icon: Stylized Fermata (Eye) */}
+            <g transform="translate(10, 8) scale(0.8)">
+                {/* The Arc (Eyelid) */}
+                <path
+                    d="M 2 18 Q 15 -5 28 18"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                />
+                {/* The Dot (Pupil / Note head) */}
+                <circle cx="15" cy="18" r="4" fill="currentColor" />
+            </g>
+
+            {/* Text */}
+            <text
+                x="45"
+                y="25"
+                fontFamily='"Inter", system-ui, -apple-system, sans-serif'
+                fontSize="20"
+                fill="currentColor"
+            >
+                <tspan fontWeight="700">sight-reading</tspan>
+                <tspan fontWeight="300">.de</tspan>
+            </text>
+        </svg>
+    );
+};