Zen mode

src/App.css

@@ -296,3 +296,49 @@
   background-color: rgba(var(--hue-primary), 0.1);
   transform: translateY(-2px);
 }
+
+.zen-button {
+  background-color: transparent;
+  border: 2px solid var(--color-text-muted);
+  color: var(--color-text-muted);
+  padding: 0.5rem 1rem;
+  border-radius: 30px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+}
+
+.zen-button:hover {
+  border-color: var(--color-text-main);
+  color: var(--color-text-main);
+  background-color: rgba(128, 128, 128, 0.1);
+  transform: translateY(-2px);
+}
+
+.exit-zen-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 10px 20px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-text-muted);
+  border-radius: 20px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.2s;
+  z-index: 100;
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+}
+
+.exit-zen-button:hover {
+  opacity: 1;
+  color: var(--color-text-main);
+  border-color: var(--color-text-main);
+  transform: scale(1.05);
+}

src/App.tsx

@@ -40,7 +40,8 @@ function App() {
       autoAdvance: false,
       sound: true,
       volume: 0.5
-    }
+    },
+    zenMode: false
   });
 
   const [matchStartTime, setMatchStartTime] = useState<number | null>(null);
@@ -173,10 +174,12 @@ function App() {
   }, [settings.showHint, targetMidi, currentTuning, currentInstrumentDef]);
 
   return (
-    <div className="app-container">
+    <div className={`app-container ${settings.zenMode ? 'zen-mode' : ''}`}>
+      {!settings.zenMode && (
         <header className="app-header">
           <div className="logo">Sheet music trainer</div>
         </header>
+      )}
 
       <main className="main-stage">
         <div className="card sheet-music-card">
@@ -190,6 +193,7 @@ function App() {
             height={currentInstrumentDef.clefMode === 'grand' ? 300 : 250}
           />
 
+          {!settings.zenMode && (
             <div className="feedback-area">
               {feedbackMessage ? (
                 <div className="success-message animate-pop">{feedbackMessage}</div>
@@ -197,6 +201,7 @@ function App() {
                 <div className="instruction-text">Play the note above</div>
               )}
             </div>
+          )}
 
           {settings.showHint && (
             <div className="hint-card">
@@ -211,6 +216,7 @@ function App() {
 
           {error && <div className="error-message">{error}</div>}
 
+          {!settings.zenMode && (
             <div className="action-row" style={{ marginTop: '24px', display: 'flex', justifyContent: 'center', gap: '16px' }}>
               <button
                 className={`hint-button ${settings.showHint ? 'active' : ''}`}
@@ -223,9 +229,20 @@ function App() {
                 <SkipForward size={18} />
                 Skip Note
               </button>
+              <button
+                className="zen-button"
+                onClick={() => setSettings(s => ({ ...s, zenMode: true }))}
+                title="Zen Mode"
+              >
+                <span>Zen</span>
+              </button>
             </div>
+          )}
         </div>
 
+
+        {
+          !settings.zenMode && (
             <div className="pitch-monitor-bar">
               <button
                 className={`mic-button ${listening ? 'listening' : ''}`}
@@ -252,11 +269,27 @@ function App() {
                 </div>
               )}
             </div>
+          )
+        }
       </main >
 
+      {!settings.zenMode && (
         <footer className="settings-footer">
           <Controls settings={settings} onUpdateSettings={setSettings} />
         </footer>
+      )
+      }
+
+      {
+        settings.zenMode && (
+          <button
+            className="exit-zen-button"
+            onClick={() => setSettings(s => ({ ...s, zenMode: false }))}
+          >
+            Exit Zen Mode
+          </button>
+        )
+      }
     </div >
   );
 }

src/components/Controls.tsx

@@ -22,6 +22,7 @@ export interface AppSettings {
     instrument: string;
     showTuningMeter: boolean;
     rhythm: RhythmSettings;
+    zenMode: boolean;
 }
 
 interface ControlsProps {