From 55ec01e3cd309836814eeff500cd63f6c8e86987 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 11 Feb 2026 18:20:40 +0100
Subject: [PATCH] feat: Attach and detach zoom event listeners to both the
 workspace and the ASCII canvas

---
 src/components/ControlPanel.astro | 1062 ++++++++++++++++++++++-------
 src/scripts/ui-bindings.ts        |   36 +-
 2 files changed, 827 insertions(+), 271 deletions(-)

diff --git a/src/components/ControlPanel.astro b/src/components/ControlPanel.astro
index 40fc72c..21ce09f 100644
--- a/src/components/ControlPanel.astro
+++ b/src/components/ControlPanel.astro
@@ -366,167 +366,469 @@ import {
 
         <!-- MOBILE NAV CONTAINER (Hidden on Desktop) -->
         <div class="mobile-nav-container mobile-only">
-            <!-- 1. MOBILE CONTENT AREA -->
+            / <!-- 1. MOBILE CONTENT AREA -->
             <div class="mobile-content-area" id="mobile-content-area">
                 <!-- ADJUST TAB -->
                 <div class="mobile-tab-content" data-tab-content="adjust">
                     <!-- BASIC Section -->
                     <div class="mobile-section">
-                        <button class="mobile-section-header" data-section="basic">
+                        <button
+                            class="mobile-section-header"
+                            data-section="basic"
+                        >
                             <span>▼ BASIC</span>
-                            <span class="modified-count" data-section="basic-count"></span>
+                            <span
+                                class="modified-count"
+                                data-section="basic-count"></span>
                         </button>
-                        <div class="mobile-controls-list" id="mobile-basic-controls">
-                            <div class="mobile-slider-control" data-control-id="exposure" data-default="1.0">
+                        <div
+                            class="mobile-controls-list"
+                            id="mobile-basic-controls"
+                        >
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="exposure"
+                                data-default="1.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">EXPOSURE</span>
-                                    <span class="mobile-control-value" data-value>1.00</span>
+                                    <span class="mobile-control-label"
+                                        >EXPOSURE</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>1.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="3"
+                                        step="0.01"
+                                        value="1.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="contrast" data-default="1.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="contrast"
+                                data-default="1.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">CONTRAST</span>
-                                    <span class="mobile-control-value" data-value>1.00</span>
+                                    <span class="mobile-control-label"
+                                        >CONTRAST</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>1.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="3"
+                                        step="0.01"
+                                        value="1.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="saturation" data-default="1.2">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="saturation"
+                                data-default="1.2"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">SATURATION</span>
-                                    <span class="mobile-control-value" data-value>1.20</span>
+                                    <span class="mobile-control-label"
+                                        >SATURATION</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>1.20</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.2" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="3"
+                                        step="0.01"
+                                        value="1.2"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="resolution" data-default="1.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="resolution"
+                                data-default="1.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">RESOLUTION</span>
-                                    <span class="mobile-control-value" data-value>1.00</span>
+                                    <span class="mobile-control-label"
+                                        >RESOLUTION</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>1.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0.1" max="2" step="0.01" value="1.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0.1"
+                                        max="2"
+                                        step="0.01"
+                                        value="1.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
                         </div>
                     </div>
                     <!-- ADVANCED Section -->
                     <div class="mobile-section">
-                        <button class="mobile-section-header collapsed" data-section="advanced">
+                        <button
+                            class="mobile-section-header collapsed"
+                            data-section="advanced"
+                        >
                             <span>► ADVANCED</span>
-                            <span class="modified-count" data-section="advanced-count"></span>
+                            <span
+                                class="modified-count"
+                                data-section="advanced-count"></span>
                         </button>
-                        <div class="mobile-controls-list collapsed" id="mobile-advanced-controls">
-                            <div class="mobile-slider-control" data-control-id="shadows" data-default="0.0">
+                        <div
+                            class="mobile-controls-list collapsed"
+                            id="mobile-advanced-controls"
+                        >
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="shadows"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">SHADOWS</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >SHADOWS</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="1"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="highlights" data-default="0.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="highlights"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">HIGHLIGHTS</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >HIGHLIGHTS</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="1"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="gamma" data-default="1.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="gamma"
+                                data-default="1.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">GAMMA</span>
-                                    <span class="mobile-control-value" data-value>1.00</span>
+                                    <span class="mobile-control-label"
+                                        >GAMMA</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>1.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="3"
+                                        step="0.01"
+                                        value="1.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="sharpen" data-default="0.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="sharpen"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">SHARPEN</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >SHARPEN</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="10" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="10"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="overlayStrength" data-default="0.3">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="overlayStrength"
+                                data-default="0.3"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">OVERLAY</span>
-                                    <span class="mobile-control-value" data-value>0.30</span>
+                                    <span class="mobile-control-label"
+                                        >OVERLAY</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.30</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.3" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="1"
+                                        step="0.01"
+                                        value="0.3"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="dither" data-default="0.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="dither"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">DITHER</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >DITHER</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="1"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="edgeThreshold" data-default="0.5">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="edgeThreshold"
+                                data-default="0.5"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">THRESHOLD</span>
-                                    <span class="mobile-control-value" data-value>0.50</span>
+                                    <span class="mobile-control-label"
+                                        >THRESHOLD</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.50</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="20" step="0.1" value="0.5" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="20"
+                                        step="0.1"
+                                        value="0.5"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="scanlines" data-default="0.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="scanlines"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">SCANLINES</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >SCANLINES</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="2" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="2"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
-                            <div class="mobile-slider-control" data-control-id="vignette" data-default="0.0">
+                            <div
+                                class="mobile-slider-control"
+                                data-control-id="vignette"
+                                data-default="0.0"
+                            >
                                 <div class="mobile-control-row">
-                                    <span class="mobile-control-label">VIGNETTE</span>
-                                    <span class="mobile-control-value" data-value>0.00</span>
+                                    <span class="mobile-control-label"
+                                        >VIGNETTE</span
+                                    >
+                                    <span
+                                        class="mobile-control-value"
+                                        data-value>0.00</span
+                                    >
                                 </div>
                                 <div class="mobile-slider-stage">
-                                    <button class="mobile-slider-btn" data-action="dec">-</button>
-                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
-                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="dec">-</button
+                                    >
+                                    <input
+                                        type="range"
+                                        class="mobile-slider-input"
+                                        min="0"
+                                        max="1"
+                                        step="0.01"
+                                        value="0.0"
+                                    />
+                                    <button
+                                        class="mobile-slider-btn"
+                                        data-action="inc">+</button
+                                    >
                                 </div>
                             </div>
                         </div>
@@ -534,34 +836,55 @@ import {
                 </div>
 
                 <!-- EFFECTS TAB -->
-                <div class="mobile-tab-content hidden" data-tab-content="effects">
+                <div
+                    class="mobile-tab-content hidden"
+                    data-tab-content="effects"
+                >
                     <div class="mobile-effects-grid">
                         <!-- Toggles Row -->
                         <div class="mobile-effects-row">
                             <div class="mobile-effect-group">
                                 <span class="mobile-effect-label">COLOR</span>
-                                <button class="mobile-effect-toggle" id="mobile-toggle-color" data-checked="false">
+                                <button
+                                    class="mobile-effect-toggle"
+                                    id="mobile-toggle-color"
+                                    data-checked="false"
+                                >
                                     <span class="toggle-indicator"></span>
                                     <span class="toggle-label">OFF</span>
                                 </button>
                             </div>
                             <div class="mobile-color-group">
                                 <span class="mobile-effect-label">TINT</span>
-                                <div class="mobile-color-picker" id="mobile-tint-picker">
+                                <div
+                                    class="mobile-color-picker"
+                                    id="mobile-tint-picker"
+                                >
                                     <input type="color" value="#ffffff" />
-                                    <span class="color-preview" style="background: #ffffff;"></span>
+                                    <span
+                                        class="color-preview"
+                                        style="background: #ffffff;"></span>
                                 </div>
                             </div>
                             <div class="mobile-color-group">
                                 <span class="mobile-effect-label">BG</span>
-                                <div class="mobile-color-picker" id="mobile-bg-picker">
+                                <div
+                                    class="mobile-color-picker"
+                                    id="mobile-bg-picker"
+                                >
                                     <input type="color" value="#000000" />
-                                    <span class="color-preview" style="background: #000000;"></span>
+                                    <span
+                                        class="color-preview"
+                                        style="background: #000000;"></span>
                                 </div>
                             </div>
                             <div class="mobile-effect-group">
                                 <span class="mobile-effect-label">DENOISE</span>
-                                <button class="mobile-effect-toggle" id="mobile-toggle-denoise" data-checked="false">
+                                <button
+                                    class="mobile-effect-toggle"
+                                    id="mobile-toggle-denoise"
+                                    data-checked="false"
+                                >
                                     <span class="toggle-indicator"></span>
                                     <span class="toggle-label">OFF</span>
                                 </button>
@@ -571,54 +894,122 @@ import {
                         <!-- Segment Controls -->
                         <div class="mobile-segment-control">
                             <span class="mobile-segment-label">INVERT</span>
-                            <div class="mobile-segment-options" data-segment="invert">
-                                <button class="mobile-segment-option active" data-value="AUTO">AUTO</button>
-                                <button class="mobile-segment-option" data-value="ON">ON</button>
-                                <button class="mobile-segment-option" data-value="OFF">OFF</button>
+                            <div
+                                class="mobile-segment-options"
+                                data-segment="invert"
+                            >
+                                <button
+                                    class="mobile-segment-option active"
+                                    data-value="AUTO">AUTO</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="ON">ON</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="OFF">OFF</button
+                                >
                             </div>
                         </div>
 
                         <div class="mobile-segment-control">
                             <span class="mobile-segment-label">EDGES</span>
-                            <div class="mobile-segment-options" data-segment="edge">
-                                <button class="mobile-segment-option active" data-value="OFF">OFF</button>
-                                <button class="mobile-segment-option" data-value="SPL">SIMPLE</button>
-                                <button class="mobile-segment-option" data-value="SOB">SOBEL</button>
-                                <button class="mobile-segment-option" data-value="CNY">CANNY</button>
+                            <div
+                                class="mobile-segment-options"
+                                data-segment="edge"
+                            >
+                                <button
+                                    class="mobile-segment-option active"
+                                    data-value="OFF">OFF</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="SPL">SIMPLE</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="SOB">SOBEL</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="CNY">CANNY</button
+                                >
                             </div>
                         </div>
 
                         <div class="mobile-segment-control">
                             <span class="mobile-segment-label">CHARSET</span>
-                            <div class="mobile-segment-options scrollable" data-segment="charset">
-                                <button class="mobile-segment-option active" data-value="STD">STANDARD</button>
-                                <button class="mobile-segment-option" data-value="EXT">EXTENDED</button>
-                                <button class="mobile-segment-option" data-value="BLK">BLOCKS</button>
-                                <button class="mobile-segment-option" data-value="MIN">MINIMAL</button>
-                                <button class="mobile-segment-option" data-value="DOT">DOTS</button>
-                                <button class="mobile-segment-option" data-value="SHP">SHAPES</button>
+                            <div
+                                class="mobile-segment-options scrollable"
+                                data-segment="charset"
+                            >
+                                <button
+                                    class="mobile-segment-option active"
+                                    data-value="STD">STANDARD</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="EXT">EXTENDED</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="BLK">BLOCKS</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="MIN">MINIMAL</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="DOT">DOTS</button
+                                >
+                                <button
+                                    class="mobile-segment-option"
+                                    data-value="SHP">SHAPES</button
+                                >
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- EXPORT TAB -->
-                <div class="mobile-tab-content hidden" data-tab-content="export">
+                <div
+                    class="mobile-tab-content hidden"
+                    data-tab-content="export"
+                >
                     <div class="mobile-export-grid">
-                        <input type="file" id="mobile-file-upload" accept="image/*" style="display: none;" />
-                        <button class="mobile-export-btn" id="mobile-btn-import">
+                        <input
+                            type="file"
+                            id="mobile-file-upload"
+                            accept="image/*"
+                            style="display: none;"
+                        />
+                        <button
+                            class="mobile-export-btn"
+                            id="mobile-btn-import"
+                        >
                             <span class="export-icon">📁</span>
                             <span>IMPORT IMAGE</span>
                         </button>
-                        <button class="mobile-export-btn" id="mobile-btn-save-png">
+                        <button
+                            class="mobile-export-btn"
+                            id="mobile-btn-save-png"
+                        >
                             <span class="export-icon">🖼️</span>
                             <span>SAVE PNG</span>
                         </button>
-                        <button class="mobile-export-btn" id="mobile-btn-copy-text">
+                        <button
+                            class="mobile-export-btn"
+                            id="mobile-btn-copy-text"
+                        >
                             <span class="export-icon">📝</span>
                             <span>SAVE TXT</span>
                         </button>
-                        <button class="mobile-export-btn" id="mobile-btn-copy-html">
+                        <button
+                            class="mobile-export-btn"
+                            id="mobile-btn-copy-html"
+                        >
                             <span class="export-icon">🌐</span>
                             <span>SAVE HTML</span>
                         </button>
@@ -666,23 +1057,31 @@ import {
     function initMobileMode() {
         const tabs = document.querySelectorAll(".mobile-tab-btn");
         const tabContents = document.querySelectorAll(".mobile-tab-content");
-        const sectionHeaders = document.querySelectorAll(".mobile-section-header");
+        const sectionHeaders = document.querySelectorAll(
+            ".mobile-section-header",
+        );
 
         // --- Section Toggle Logic ---
         sectionHeaders.forEach((header) => {
             header.addEventListener("click", () => {
                 const section = (header as HTMLElement).dataset.section;
-                const list = document.getElementById(`mobile-${section}-controls`);
+                const list = document.getElementById(
+                    `mobile-${section}-controls`,
+                );
                 const arrow = header.querySelector("span");
-                
+
                 if (header.classList.contains("collapsed")) {
                     header.classList.remove("collapsed");
                     list?.classList.remove("collapsed");
-                    if (arrow) arrow.textContent = arrow.textContent?.replace("►", "▼") || "▼";
+                    if (arrow)
+                        arrow.textContent =
+                            arrow.textContent?.replace("►", "▼") || "▼";
                 } else {
                     header.classList.add("collapsed");
                     list?.classList.add("collapsed");
-                    if (arrow) arrow.textContent = arrow.textContent?.replace("▼", "►") || "►";
+                    if (arrow)
+                        arrow.textContent =
+                            arrow.textContent?.replace("▼", "►") || "►";
                 }
             });
         });
@@ -692,14 +1091,16 @@ import {
             tab.addEventListener("click", () => {
                 const tabName = (tab as HTMLElement).dataset.tab;
                 if (!tabName) return;
-                
+
                 // Update active tab
                 tabs.forEach((t) => t.classList.remove("active"));
                 tab.classList.add("active");
-                
+
                 // Show/hide content
                 tabContents.forEach((content) => {
-                    if ((content as HTMLElement).dataset.tabContent === tabName) {
+                    if (
+                        (content as HTMLElement).dataset.tabContent === tabName
+                    ) {
                         content.classList.remove("hidden");
                     } else {
                         content.classList.add("hidden");
@@ -710,86 +1111,113 @@ import {
 
         // --- Mobile Slider Controls ---
         const initMobileSliders = () => {
-            document.querySelectorAll(".mobile-slider-control").forEach((control) => {
-                const controlEl = control as HTMLElement;
-                const input = control.querySelector(".mobile-slider-input") as HTMLInputElement;
-                const valueDisplay = control.querySelector("[data-value]") as HTMLElement;
-                const decBtn = control.querySelector("[data-action='dec']") as HTMLButtonElement;
-                const incBtn = control.querySelector("[data-action='inc']") as HTMLButtonElement;
-                const defaultValue = parseFloat(controlEl.dataset.default || "0");
-                const controlId = controlEl.dataset.controlId;
-                
-                if (!input || !valueDisplay || !controlId) return;
+            document
+                .querySelectorAll(".mobile-slider-control")
+                .forEach((control) => {
+                    const controlEl = control as HTMLElement;
+                    const input = control.querySelector(
+                        ".mobile-slider-input",
+                    ) as HTMLInputElement;
+                    const valueDisplay = control.querySelector(
+                        "[data-value]",
+                    ) as HTMLElement;
+                    const decBtn = control.querySelector(
+                        "[data-action='dec']",
+                    ) as HTMLButtonElement;
+                    const incBtn = control.querySelector(
+                        "[data-action='inc']",
+                    ) as HTMLButtonElement;
+                    const defaultValue = parseFloat(
+                        controlEl.dataset.default || "0",
+                    );
+                    const controlId = controlEl.dataset.controlId;
 
-                const updateValue = (val: number) => {
-                    input.value = String(val);
-                    valueDisplay.textContent = val.toFixed(2);
-                    
-                    // Sync to desktop slider
-                    const desktopInput = document.getElementById(controlId) as HTMLInputElement;
-                    if (desktopInput) {
-                        desktopInput.value = String(val);
-                        desktopInput.dispatchEvent(new Event("input"));
-                    }
-                    
-                    // Update modified state
-                    const isModified = Math.abs(val - defaultValue) > 0.001;
-                    valueDisplay.classList.toggle("modified", isModified);
-                    updateModifiedCounts();
-                };
+                    if (!input || !valueDisplay || !controlId) return;
 
-                input.addEventListener("input", () => {
-                    updateValue(parseFloat(input.value));
-                });
-
-                decBtn?.addEventListener("click", () => {
-                    const step = parseFloat(input.step) || 0.01;
-                    const newVal = parseFloat(input.value) - step;
-                    updateValue(Math.max(parseFloat(input.min), newVal));
-                });
-
-                incBtn?.addEventListener("click", () => {
-                    const step = parseFloat(input.step) || 0.01;
-                    const newVal = parseFloat(input.value) + step;
-                    updateValue(Math.min(parseFloat(input.max), newVal));
-                });
-
-                // Sync from desktop
-                const desktopInput = document.getElementById(controlId) as HTMLInputElement;
-                if (desktopInput) {
-                    desktopInput.addEventListener("input", () => {
-                        const val = parseFloat(desktopInput.value);
+                    const updateValue = (val: number) => {
                         input.value = String(val);
                         valueDisplay.textContent = val.toFixed(2);
+
+                        // Sync to desktop slider
+                        const desktopInput = document.getElementById(
+                            controlId,
+                        ) as HTMLInputElement;
+                        if (desktopInput) {
+                            desktopInput.value = String(val);
+                            desktopInput.dispatchEvent(new Event("input"));
+                        }
+
+                        // Update modified state
                         const isModified = Math.abs(val - defaultValue) > 0.001;
                         valueDisplay.classList.toggle("modified", isModified);
                         updateModifiedCounts();
+                    };
+
+                    input.addEventListener("input", () => {
+                        updateValue(parseFloat(input.value));
                     });
-                }
-            });
+
+                    decBtn?.addEventListener("click", () => {
+                        const step = parseFloat(input.step) || 0.01;
+                        const newVal = parseFloat(input.value) - step;
+                        updateValue(Math.max(parseFloat(input.min), newVal));
+                    });
+
+                    incBtn?.addEventListener("click", () => {
+                        const step = parseFloat(input.step) || 0.01;
+                        const newVal = parseFloat(input.value) + step;
+                        updateValue(Math.min(parseFloat(input.max), newVal));
+                    });
+
+                    // Sync from desktop
+                    const desktopInput = document.getElementById(
+                        controlId,
+                    ) as HTMLInputElement;
+                    if (desktopInput) {
+                        desktopInput.addEventListener("input", () => {
+                            const val = parseFloat(desktopInput.value);
+                            input.value = String(val);
+                            valueDisplay.textContent = val.toFixed(2);
+                            const isModified =
+                                Math.abs(val - defaultValue) > 0.001;
+                            valueDisplay.classList.toggle(
+                                "modified",
+                                isModified,
+                            );
+                            updateModifiedCounts();
+                        });
+                    }
+                });
         };
 
         // --- Mobile Toggle Controls ---
         const initMobileToggles = () => {
             const toggles = [
                 { mobileId: "mobile-toggle-color", desktopId: "toggle-color" },
-                { mobileId: "mobile-toggle-denoise", desktopId: "toggle-denoise" },
+                {
+                    mobileId: "mobile-toggle-denoise",
+                    desktopId: "toggle-denoise",
+                },
             ];
 
             toggles.forEach(({ mobileId, desktopId }) => {
-                const mobileToggle = document.getElementById(mobileId) as HTMLButtonElement;
-                const desktopToggle = document.getElementById(desktopId) as HTMLButtonElement;
-                
+                const mobileToggle = document.getElementById(
+                    mobileId,
+                ) as HTMLButtonElement;
+                const desktopToggle = document.getElementById(
+                    desktopId,
+                ) as HTMLButtonElement;
+
                 if (!mobileToggle) return;
 
                 mobileToggle.addEventListener("click", () => {
                     const isChecked = mobileToggle.dataset.checked === "true";
                     const newState = !isChecked;
-                    
+
                     mobileToggle.dataset.checked = String(newState);
                     const label = mobileToggle.querySelector(".toggle-label");
                     if (label) label.textContent = newState ? "ON" : "OFF";
-                    
+
                     // Sync to desktop
                     if (desktopToggle) {
                         desktopToggle.click();
@@ -798,12 +1226,17 @@ import {
 
                 // Sync from desktop
                 if (desktopToggle) {
-                    desktopToggle.addEventListener("toggle-change", (e: any) => {
-                        const newState = e.detail?.checked;
-                        mobileToggle.dataset.checked = String(newState);
-                        const label = mobileToggle.querySelector(".toggle-label");
-                        if (label) label.textContent = newState ? "ON" : "OFF";
-                    });
+                    desktopToggle.addEventListener(
+                        "toggle-change",
+                        (e: any) => {
+                            const newState = e.detail?.checked;
+                            mobileToggle.dataset.checked = String(newState);
+                            const label =
+                                mobileToggle.querySelector(".toggle-label");
+                            if (label)
+                                label.textContent = newState ? "ON" : "OFF";
+                        },
+                    );
                 }
             });
         };
@@ -811,16 +1244,32 @@ import {
         // --- Mobile Color Pickers ---
         const initMobileColorPickers = () => {
             const pickers = [
-                { mobileId: "mobile-tint-picker", desktopId: "input-mono-color", previewId: "color-swatch-display" },
-                { mobileId: "mobile-bg-picker", desktopId: "input-bg-color", previewId: "bg-color-swatch-display" },
+                {
+                    mobileId: "mobile-tint-picker",
+                    desktopId: "input-mono-color",
+                    previewId: "color-swatch-display",
+                },
+                {
+                    mobileId: "mobile-bg-picker",
+                    desktopId: "input-bg-color",
+                    previewId: "bg-color-swatch-display",
+                },
             ];
 
             pickers.forEach(({ mobileId, desktopId, previewId }) => {
                 const mobilePicker = document.getElementById(mobileId);
-                const mobileInput = mobilePicker?.querySelector("input[type='color']") as HTMLInputElement;
-                const mobilePreview = mobilePicker?.querySelector(".color-preview") as HTMLElement;
-                const desktopInput = document.getElementById(desktopId) as HTMLInputElement;
-                const desktopPreview = document.getElementById(previewId) as HTMLElement;
+                const mobileInput = mobilePicker?.querySelector(
+                    "input[type='color']",
+                ) as HTMLInputElement;
+                const mobilePreview = mobilePicker?.querySelector(
+                    ".color-preview",
+                ) as HTMLElement;
+                const desktopInput = document.getElementById(
+                    desktopId,
+                ) as HTMLInputElement;
+                const desktopPreview = document.getElementById(
+                    previewId,
+                ) as HTMLElement;
 
                 if (!mobileInput) return;
 
@@ -839,7 +1288,8 @@ import {
                     desktopInput.addEventListener("input", () => {
                         const color = desktopInput.value;
                         mobileInput.value = color;
-                        if (mobilePreview) mobilePreview.style.background = color;
+                        if (mobilePreview)
+                            mobilePreview.style.background = color;
                     });
                 }
             });
@@ -854,21 +1304,31 @@ import {
             ];
 
             segments.forEach(({ mobileData, desktopId }) => {
-                const mobileContainer = document.querySelector(`[data-segment="${mobileData}"]`);
-                const desktopContainer = document.getElementById(desktopId) as HTMLElement;
-                const mobileOptions = mobileContainer?.querySelectorAll(".mobile-segment-option");
+                const mobileContainer = document.querySelector(
+                    `[data-segment="${mobileData}"]`,
+                );
+                const desktopContainer = document.getElementById(
+                    desktopId,
+                ) as HTMLElement;
+                const mobileOptions = mobileContainer?.querySelectorAll(
+                    ".mobile-segment-option",
+                );
 
                 mobileOptions?.forEach((btn) => {
                     btn.addEventListener("click", () => {
                         const value = (btn as HTMLElement).dataset.value;
-                        
+
                         // Update mobile UI
-                        mobileOptions.forEach((b) => b.classList.remove("active"));
+                        mobileOptions.forEach((b) =>
+                            b.classList.remove("active"),
+                        );
                         btn.classList.add("active");
-                        
+
                         // Sync to desktop
                         if (desktopContainer) {
-                            const desktopBtn = desktopContainer.querySelector(`[data-value="${value}"]`);
+                            const desktopBtn = desktopContainer.querySelector(
+                                `[data-value="${value}"]`,
+                            );
                             if (desktopBtn) {
                                 (desktopBtn as HTMLButtonElement).click();
                             }
@@ -878,28 +1338,56 @@ import {
 
                 // Sync from desktop
                 if (desktopContainer) {
-                    desktopContainer.addEventListener("segment-change", (e: any) => {
-                        const value = e.detail?.value;
-                        mobileOptions?.forEach((btn) => {
-                            const btnValue = (btn as HTMLElement).dataset.value;
-                            btn.classList.toggle("active", btnValue === value);
-                        });
-                    });
+                    desktopContainer.addEventListener(
+                        "segment-change",
+                        (e: any) => {
+                            const value = e.detail?.value;
+                            mobileOptions?.forEach((btn) => {
+                                const btnValue = (btn as HTMLElement).dataset
+                                    .value;
+                                btn.classList.toggle(
+                                    "active",
+                                    btnValue === value,
+                                );
+                            });
+                        },
+                    );
                 }
             });
         };
 
         // --- Modified Counts ---
         const updateModifiedCounts = () => {
-            const basicIds = ["exposure", "contrast", "saturation", "resolution"];
-            const advancedIds = ["shadows", "highlights", "gamma", "sharpen", "overlayStrength", "dither", "edgeThreshold", "scanlines", "vignette"];
-            
+            const basicIds = [
+                "exposure",
+                "contrast",
+                "saturation",
+                "resolution",
+            ];
+            const advancedIds = [
+                "shadows",
+                "highlights",
+                "gamma",
+                "sharpen",
+                "overlayStrength",
+                "dither",
+                "edgeThreshold",
+                "scanlines",
+                "vignette",
+            ];
+
             const countModified = (ids: string[]) => {
                 let count = 0;
                 ids.forEach((id) => {
-                    const control = document.querySelector(`[data-control-id="${id}"]`) as HTMLElement;
-                    const defaultVal = parseFloat(control?.dataset.default || "0");
-                    const desktopInput = document.getElementById(id) as HTMLInputElement;
+                    const control = document.querySelector(
+                        `[data-control-id="${id}"]`,
+                    ) as HTMLElement;
+                    const defaultVal = parseFloat(
+                        control?.dataset.default || "0",
+                    );
+                    const desktopInput = document.getElementById(
+                        id,
+                    ) as HTMLInputElement;
                     if (desktopInput) {
                         const currentVal = parseFloat(desktopInput.value);
                         if (Math.abs(currentVal - defaultVal) > 0.001) count++;
@@ -910,71 +1398,119 @@ import {
 
             const basicCount = countModified(basicIds);
             const advancedCount = countModified(advancedIds);
-            
-            const basicCountEl = document.querySelector("[data-section='basic-count']");
-            const advancedCountEl = document.querySelector("[data-section='advanced-count']");
-            
-            if (basicCountEl) basicCountEl.textContent = basicCount > 0 ? `(${basicCount})` : "";
-            if (advancedCountEl) advancedCountEl.textContent = advancedCount > 0 ? `(${advancedCount})` : "";
+
+            const basicCountEl = document.querySelector(
+                "[data-section='basic-count']",
+            );
+            const advancedCountEl = document.querySelector(
+                "[data-section='advanced-count']",
+            );
+
+            if (basicCountEl)
+                basicCountEl.textContent =
+                    basicCount > 0 ? `(${basicCount})` : "";
+            if (advancedCountEl)
+                advancedCountEl.textContent =
+                    advancedCount > 0 ? `(${advancedCount})` : "";
         };
 
         // --- Export Buttons ---
         const initMobileExport = () => {
             const exports = [
-                { mobileId: "mobile-btn-import", desktopId: "btn-import", fileInputId: "mobile-file-upload", desktopFileInputId: "file-upload" },
+                {
+                    mobileId: "mobile-btn-import",
+                    desktopId: "btn-import",
+                    fileInputId: "mobile-file-upload",
+                    desktopFileInputId: "file-upload",
+                },
                 { mobileId: "mobile-btn-save-png", desktopId: "btn-save-png" },
-                { mobileId: "mobile-btn-copy-text", desktopId: "btn-copy-text" },
-                { mobileId: "mobile-btn-copy-html", desktopId: "btn-copy-html" },
+                {
+                    mobileId: "mobile-btn-copy-text",
+                    desktopId: "btn-copy-text",
+                },
+                {
+                    mobileId: "mobile-btn-copy-html",
+                    desktopId: "btn-copy-html",
+                },
             ];
 
-            exports.forEach(({ mobileId, desktopId, fileInputId, desktopFileInputId }) => {
-                const mobileBtn = document.getElementById(mobileId);
-                const desktopBtn = document.getElementById(desktopId);
-                const mobileFileInput = fileInputId ? document.getElementById(fileInputId) as HTMLInputElement : null;
-                const desktopFileInput = desktopFileInputId ? document.getElementById(desktopFileInputId) as HTMLInputElement : null;
+            exports.forEach(
+                ({ mobileId, desktopId, fileInputId, desktopFileInputId }) => {
+                    const mobileBtn = document.getElementById(mobileId);
+                    const desktopBtn = document.getElementById(desktopId);
+                    const mobileFileInput = fileInputId
+                        ? (document.getElementById(
+                              fileInputId,
+                          ) as HTMLInputElement)
+                        : null;
+                    const desktopFileInput = desktopFileInputId
+                        ? (document.getElementById(
+                              desktopFileInputId,
+                          ) as HTMLInputElement)
+                        : null;
 
-                if (!mobileBtn) return;
+                    if (!mobileBtn) return;
 
-                if (fileInputId && mobileFileInput && desktopFileInput) {
-                    // Import button needs file input trigger
-                    mobileBtn.addEventListener("click", () => mobileFileInput.click());
-                    mobileFileInput.addEventListener("change", () => {
-                        if (mobileFileInput.files?.length) {
-                            // Transfer files to desktop input
-                            const dt = new DataTransfer();
-                            dt.items.add(mobileFileInput.files[0]);
-                            desktopFileInput.files = dt.files;
-                            desktopFileInput.dispatchEvent(new Event("change"));
-                        }
-                    });
-                } else if (desktopBtn) {
-                    mobileBtn.addEventListener("click", () => desktopBtn.click());
-                }
-            });
+                    if (fileInputId && mobileFileInput && desktopFileInput) {
+                        // Import button needs file input trigger
+                        mobileBtn.addEventListener("click", () =>
+                            mobileFileInput.click(),
+                        );
+                        mobileFileInput.addEventListener("change", () => {
+                            if (mobileFileInput.files?.length) {
+                                // Transfer files to desktop input
+                                const dt = new DataTransfer();
+                                dt.items.add(mobileFileInput.files[0]);
+                                desktopFileInput.files = dt.files;
+                                desktopFileInput.dispatchEvent(
+                                    new Event("change"),
+                                );
+                            }
+                        });
+                    } else if (desktopBtn) {
+                        mobileBtn.addEventListener("click", () =>
+                            desktopBtn.click(),
+                        );
+                    }
+                },
+            );
         };
 
         // --- Footer Buttons ---
         const initMobileFooter = () => {
-            document.getElementById("mobile-btn-reset")?.addEventListener("click", () => {
-                document.getElementById("btn-reset")?.click();
-                // Reset all mobile sliders
-                document.querySelectorAll(".mobile-slider-control").forEach((control) => {
-                    const controlEl = control as HTMLElement;
-                    const input = control.querySelector(".mobile-slider-input") as HTMLInputElement;
-                    const valueDisplay = control.querySelector("[data-value]") as HTMLElement;
-                    const defaultVal = parseFloat(controlEl.dataset.default || "0");
-                    if (input) input.value = String(defaultVal);
-                    if (valueDisplay) {
-                        valueDisplay.textContent = defaultVal.toFixed(2);
-                        valueDisplay.classList.remove("modified");
-                    }
+            document
+                .getElementById("mobile-btn-reset")
+                ?.addEventListener("click", () => {
+                    document.getElementById("btn-reset")?.click();
+                    // Reset all mobile sliders
+                    document
+                        .querySelectorAll(".mobile-slider-control")
+                        .forEach((control) => {
+                            const controlEl = control as HTMLElement;
+                            const input = control.querySelector(
+                                ".mobile-slider-input",
+                            ) as HTMLInputElement;
+                            const valueDisplay = control.querySelector(
+                                "[data-value]",
+                            ) as HTMLElement;
+                            const defaultVal = parseFloat(
+                                controlEl.dataset.default || "0",
+                            );
+                            if (input) input.value = String(defaultVal);
+                            if (valueDisplay) {
+                                valueDisplay.textContent =
+                                    defaultVal.toFixed(2);
+                                valueDisplay.classList.remove("modified");
+                            }
+                        });
+                    updateModifiedCounts();
                 });
-                updateModifiedCounts();
-            });
 
-            document.getElementById("mobile-btn-next")?.addEventListener("click", () => {
-                document.getElementById("btn-next")?.click();
-            });
+            document
+                .getElementById("mobile-btn-next")
+                ?.addEventListener("click", () => {
+                    document.getElementById("btn-next")?.click();
+                });
 
             // Queue sync
             const qVal = document.getElementById("val-queue");
@@ -983,7 +1519,11 @@ import {
                 const obs = new MutationObserver(() => {
                     if (qVal.textContent) mQVal.textContent = qVal.textContent;
                 });
-                obs.observe(qVal, { childList: true, subtree: true, characterData: true });
+                obs.observe(qVal, {
+                    childList: true,
+                    subtree: true,
+                    characterData: true,
+                });
                 if (qVal.textContent) mQVal.textContent = qVal.textContent;
             }
         };
@@ -995,7 +1535,7 @@ import {
             if (isMobile && !isMobileMode) {
                 isMobileMode = true;
                 console.log("📱 Entering Mobile Mode");
-                
+
                 // Initialize mobile controls once
                 initMobileSliders();
                 initMobileToggles();
diff --git a/src/scripts/ui-bindings.ts b/src/scripts/ui-bindings.ts
index 6bd5d2d..1cb450f 100644
--- a/src/scripts/ui-bindings.ts
+++ b/src/scripts/ui-bindings.ts
@@ -130,11 +130,17 @@ export class UIBindings {
         }
 
         // Cleanup Zoom
-        const heroWrapper = document.querySelector('.hero-wrapper');
-        if (heroWrapper) {
-            if (this.zoomHandlers.wheel) heroWrapper.removeEventListener('wheel', this.zoomHandlers.wheel);
-            if (this.zoomHandlers.move) heroWrapper.removeEventListener('mousemove', this.zoomHandlers.move);
-            if (this.zoomHandlers.leave) heroWrapper.removeEventListener('mouseleave', this.zoomHandlers.leave);
+        const workspace = document.querySelector('.ascii-workspace') || document.querySelector('.hero-wrapper');
+        const canvas = document.getElementById('ascii-canvas');
+        if (workspace) {
+            if (this.zoomHandlers.wheel) workspace.removeEventListener('wheel', this.zoomHandlers.wheel);
+            if (this.zoomHandlers.move) workspace.removeEventListener('mousemove', this.zoomHandlers.move);
+            if (this.zoomHandlers.leave) workspace.removeEventListener('mouseleave', this.zoomHandlers.leave);
+        }
+        if (canvas) {
+            if (this.zoomHandlers.wheel) canvas.removeEventListener('wheel', this.zoomHandlers.wheel);
+            if (this.zoomHandlers.move) canvas.removeEventListener('mousemove', this.zoomHandlers.move);
+            if (this.zoomHandlers.leave) canvas.removeEventListener('mouseleave', this.zoomHandlers.leave);
         }
         this.zoomHandlers = {};
 
@@ -426,8 +432,11 @@ export class UIBindings {
     // ============= Zoom =============
 
     private setupZoom(): void {
-        const heroWrapper = document.querySelector('.hero-wrapper');
-        if (!heroWrapper) return;
+        const workspace = document.querySelector('.ascii-workspace') || document.querySelector('.hero-wrapper');
+        if (!workspace) return;
+
+        // Also attach to canvas for direct interaction
+        const canvas = document.getElementById('ascii-canvas');
 
         this.zoomHandlers.wheel = (e: Event) => {
             const we = e as WheelEvent;
@@ -437,17 +446,24 @@ export class UIBindings {
             this.controller.handleWheel(we);
         };
         // Use passive: false to allow preventDefault
-        heroWrapper.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false });
+        workspace.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false });
 
         this.zoomHandlers.move = (e: Event) => {
             this.controller.handleMouseMove(e as MouseEvent);
         };
-        heroWrapper.addEventListener('mousemove', this.zoomHandlers.move);
+        workspace.addEventListener('mousemove', this.zoomHandlers.move);
 
         this.zoomHandlers.leave = () => {
             this.controller.handleMouseLeave();
         };
-        heroWrapper.addEventListener('mouseleave', this.zoomHandlers.leave);
+        workspace.addEventListener('mouseleave', this.zoomHandlers.leave);
+
+        // Also attach directly to canvas for better responsiveness
+        if (canvas) {
+            canvas.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false });
+            canvas.addEventListener('mousemove', this.zoomHandlers.move);
+            canvas.addEventListener('mouseleave', this.zoomHandlers.leave);
+        }
     }
 
     // ============= Resize =============