diff --git a/classic.js b/classic.js
index 73a8df8..f2a7a23 100644
--- a/classic.js
+++ b/classic.js
@@ -16,6 +16,8 @@
   const PALETTE_KEY = 'classic:colors:v2';
   const TOPPER_COLOR_KEY = 'classic:topperColor:v2';
 
+  const MAX_SLOTS = 20;
+  const SLOT_COUNT_KEY = 'classic:slotCount:v1';
   const defaultColors = () => [
     { hex: '#d92e3a', image: null }, { hex: '#ffffff', image: null },
     { hex: '#0055a4', image: null }, { hex: '#40e0d0', image: null },
@@ -31,18 +33,19 @@
       const saved = JSON.parse(savedJSON);
       if (Array.isArray(saved) && saved.length > 0) {
         if (typeof saved[0] === 'string') {
-          arr = saved.slice(0, 5).map(hex => ({ hex: normHex(hex), image: null }));
+          arr = saved.slice(0, MAX_SLOTS).map(hex => ({ hex: normHex(hex), image: null }));
         } else if (typeof saved[0] === 'object' && saved[0] !== null) {
-          arr = saved.slice(0, 5);
+          arr = saved.slice(0, MAX_SLOTS);
         }
-        while (arr.length < 5) arr.push({ hex: '#ffffff', image: null });
       }
+      while (arr.length < 5) arr.push({ hex: '#ffffff', image: null });
+      if (arr.length > MAX_SLOTS) arr = arr.slice(0, MAX_SLOTS);
     } catch (e) { console.error('Failed to parse classic colors:', e); }
     return arr;
   }
 
   function setClassicColors(arr) {
-    const clean = (arr || []).slice(0, 5).map(c => ({
+    const clean = (arr || []).slice(0, MAX_SLOTS).map(c => ({
       hex: normHex(c.hex), image: c.image || null
     }));
     while (clean.length < 5) clean.push({ hex: '#ffffff', image: null });
@@ -196,6 +199,11 @@ function distinctPaletteSlots(palette) {
       const balloonsPerCluster = pattern.balloonsPerCluster || 4;
       const reversed = !!(pattern._reverse || (pattern.parent && pattern.parent._reverse));
       const rowColorPatterns = {};
+      const stackedSlots = (() => {
+        const slots = distinctPaletteSlots(model.palette);
+        const limit = Math.max(1, Math.min(slots.length, balloonsPerCluster));
+        return slots.slice(0, limit);
+      })();
 
       const colorBlock4 = [[1, 2, 3, 4], [3, 1, 4, 2], [4, 3, 2, 1], [2, 4, 1, 3]];
       const colorBlock5 = 
@@ -222,10 +230,16 @@ function distinctPaletteSlots(palette) {
               
               const rowIndex = cell.y;
               if (!rowColorPatterns[rowIndex]) {
-                  const qEff = rowIndex + 1;
+                  const totalRows = model.rowCount * (pattern.cellsPerRow || 1);
+                  const isRightHalf = false; // mirror mode removed
+                  const baseRow = rowIndex;
+                  const qEff = baseRow + 1;
                   let pat;
 
-                  if (balloonsPerCluster === 5) {
+                  if (pattern.colorMode === 'stacked') {
+                      const slot = stackedSlots[(rowIndex) % stackedSlots.length] || stackedSlots[0] || 1;
+                      pat = new Array(balloonsPerCluster).fill(slot);
+                  } else if (balloonsPerCluster === 5) {
                       const base = (qEff - 1) % 5;
                       pat = colorBlock5[base].slice();
                   } else {
@@ -236,22 +250,21 @@ function distinctPaletteSlots(palette) {
                       }
                   }
                   
-                  if (reversed && pat.length > 1) {
-                      pat.reverse();
+                  // Swap left/right emphasis every 5 clusters to break repetition (per template override)
+                  if (balloonsPerCluster === 5) {
+                    const SWAP_EVERY = 5;
+                    const blockIndex = Math.floor(rowIndex / SWAP_EVERY);
+                    if (blockIndex % 2 === 1) {
+                      [pat[0], pat[4]] = [pat[4], pat[0]];
+                    }
                   }
 
-                  // --- NEW: swap left/right after every 5 clusters ---
-const SWAP_EVERY = 5;                    // clusters per block
-const blockIndex = Math.floor(rowIndex / SWAP_EVERY);
+                  if (pat.length > 1) {
+                      let shouldReverse;
+                      shouldReverse = reversed;
+                      if (shouldReverse) pat.reverse();
+                  }
 
-// swap on blocks #2, #4, #6, ... (i.e., rows 6–10, 16–20, ...)
-if (blockIndex % 2 === 1) {
-  if (balloonsPerCluster === 5) {
-    // [leftMid, leftBack, front, rightBack, rightMid]
-    [pat[0], pat[4]] = [pat[4], pat[0]];
-    // [pat[1], pat[3]] = [pat[3], pat[1]];
-  } 
-}
                   rowColorPatterns[rowIndex] = pat;
               }
 
@@ -314,7 +327,7 @@ if (blockIndex % 2 === 1) {
               if (cellData) model.cells.push({ ...cellData, x, y, balloonIndexInCluster: balloonIndexInCluster++ });
           }
         }
-        if (name === 'Column 4' && topperEnabled) {
+        if (name.toLowerCase().includes('column') && topperEnabled) {
             const shapeName = `topper-${topperType}`;
             const originalShape = pattern.balloonShapes[shapeName];
             if (originalShape) {
@@ -374,64 +387,47 @@ if (blockIndex % 2 === 1) {
         return { x: -r*Math.cos(a), y: -r*Math.sin(a) }; 
       } 
     };
-    
-    // --- START: MODIFIED SECTION ---
-    // This is the new 'Column 5' definition, adapted from your template file.
+    // --- Column 5 (template geometry) ---
     patterns['Column 5'] = {
       baseBalloonSize: 25,
       _reverse: false,
-      balloonsPerCluster: 5, // Kept this from classic.js to ensure 5-color spiral
+      balloonsPerCluster: 5,
       tile: { size: { x: 5, y: 1 } },
       cellsPerRow: 1,
       cellsPerColumn: 5,
-    
-      // Balloon shapes from your template, converted to classic.js format
-      // (type: "qlink" is approx size: 3.0)
       balloonShapes: {
         "front":   { zIndex:5, base:{radius:0.5}, size:3.0 },
         "front2":  { zIndex:4, base:{radius:0.5}, size:3.0 },
         "middle":  { zIndex:3, base:{radius:0.5}, size:3.0 },
         "middle2": { zIndex:2, base:{radius:0.5}, size:3.0 },
         "back":    { zIndex:1, base:{radius:0.5}, size:3.0 },
-        "back2":   { zIndex:0, base:{radius:0.5}, size:3.0 }
+        "back2":   { zIndex:0, base:{radius:0.5}, size:3.0 },
+        'topper-round':{base:{type:'ellipse', radius:0.5}, size:8},
+        'topper-star':{base:{type:'path', d:roundedStarPath({}), radius:0.5}, size:8},
+        'topper-heart':{base:{type:'path', d:'M0,0.35 C-0.5,0, -0.14,-0.35, 0,-0.14 C0.14,-0.35, 0.5,0, 0,0.35 Z', radius:0.5}, size:20}
       },
-    
-      // gridX function from your template
-      // (I've hard-coded `this.exploded` to false, as it's not in classic.js)
       gridX(row, col) {
-            var mid = 0.6; // this.exploded ? 0.2 : 0.6
-            return (0.9) * (col + (0 === col % 5 && -0.5) + (1 === col % 5 && -mid) + (3 === col % 5 && mid) + (4 === col % 5 && 0.5) - 0.5);
+        var mid = 0.6;
+        return (0.9) * (col + (0 === col % 5 && -0.5) + (1 === col % 5 && -mid) + (3 === col % 5 && mid) + (4 === col % 5 && 0.5) - 0.5);
       },
-      
-      // gridY function is inherited from Column 4 via `deriveFrom` in your template.
-      // So, we use the gridY function from this file's 'Column 4'.
       gridY(row, col){ 
         return 2.2 * (1 - 1/5) * (Math.floor(row/2) + Math.floor((row+1)/2)); 
       },
-    
-      // createCell function from your template, adapted for classic.js
       createCell(x, y) {
-            var yOdd = !!(y % 2);
-            
-            // Re-created logic from template's createCell
-            const shapePattern = yOdd ?
-                ['middle', 'back', 'front', 'back', 'middle'] :
-                ['middle2', 'front2', 'back2', 'front2', 'middle2'];
-            
-            var shapeName = shapePattern[x % 5];
-            var shape = this.balloonShapes[shapeName];
-            
-            // Return in classic.js format
-            return shape ? { shape: {...shape} } : null;
+        var yOdd = !!(y % 2);
+        const shapePattern = yOdd
+          ? ['middle', 'back', 'front', 'back', 'middle']
+          : ['middle2', 'front2', 'back2', 'front2', 'middle2'];
+        var shapeName = shapePattern[x % 5];
+        var shape = this.balloonShapes[shapeName];
+        return shape ? { shape: {...shape} } : null;
       }
     };
     
-    // This is the new 'Arch 5' definition.
-    // It derives from the new 'Column 5' and uses the same arching logic as 'Arch 4'.
+    // Arch 5 derives from Column 5
     patterns['Arch 5'] = {
       deriveFrom: 'Column 5',
       transform(point, col, row, model){
-        // This transform logic is standard and will work with the new Column 5's gridY
         const len = this.gridY(model.rowCount * this.tile.size.y, 0) - this.gridY(0, 0);
         const r   = (len / Math.PI) + point.x;
         const y   = point.y - this.gridY(0, 0);
@@ -441,53 +437,75 @@ if (blockIndex % 2 === 1) {
     };
     // --- END: MODIFIED SECTION ---
 
+    // --- Stacked variants (same geometry, single-color clusters alternating rows) ---
+    patterns['Arch 4 Stacked'] = { deriveFrom: 'Arch 4', colorMode: 'stacked' };
+    patterns['Arch 5 Stacked'] = { deriveFrom: 'Arch 5', colorMode: 'stacked' };
+    patterns['Column 4 Stacked'] = { deriveFrom: 'Column 4', colorMode: 'stacked' };
+    patterns['Column 5 Stacked'] = { deriveFrom: 'Column 5', colorMode: 'stacked' };
+
 
     Object.keys(patterns).forEach(n => extend(patterns[n]));
     return api;
   }
 
   const patternSlotCount = (name) => ((name || '').includes('5') ? 5 : 4);
+  function getStoredSlotCount() {
+      try {
+        const saved = parseInt(localStorage.getItem(SLOT_COUNT_KEY), 10);
+        if (Number.isFinite(saved) && saved > 0) return Math.min(saved, MAX_SLOTS);
+      } catch {}
+      return 5;
+  }
+  function setStoredSlotCount(n) {
+      const v = Math.max(1, Math.min(MAX_SLOTS, n|0));
+      try { localStorage.setItem(SLOT_COUNT_KEY, String(v)); } catch {}
+      return v;
+  }
 
   function initClassicColorPicker(onColorChange) {
-      const slots = Array.from(document.querySelectorAll('#classic-slots .slot-btn')), topperSwatch = document.getElementById('classic-topper-color-swatch'), swatchGrid = document.getElementById('classic-swatch-grid'), activeLabel = document.getElementById('classic-active-label'), randomizeBtn = document.getElementById('classic-randomize-colors'), dockColorBtn = document.getElementById('dock-classic-color');
-      if (!slots.length || !topperSwatch || !swatchGrid || !activeLabel) return;
+      const slotsContainer = document.getElementById('classic-slots'), topperSwatch = document.getElementById('classic-topper-color-swatch'), swatchGrid = document.getElementById('classic-swatch-grid'), activeLabel = document.getElementById('classic-active-label'), randomizeBtn = document.getElementById('classic-randomize-colors'), addSlotBtn = document.getElementById('classic-add-slot');
+      if (!slotsContainer || !topperSwatch || !swatchGrid || !activeLabel) return;
       topperSwatch.classList.add('tab-btn');
-      let classicColors = getClassicColors(), activeTarget = '1';
-
-      const syncDockColor = (color) => {
-        if (!dockColorBtn) return;
-        const next = color?.hex ? color : { hex: '#2563eb', image: null };
-        if (next.image) {
-          dockColorBtn.style.backgroundImage = `url("${next.image}")`;
-          dockColorBtn.style.backgroundSize = '200%';
-          dockColorBtn.style.backgroundColor = 'transparent';
-        } else {
-          dockColorBtn.style.backgroundImage = 'none';
-          dockColorBtn.style.backgroundColor = next.hex;
-        }
-      };
+      let classicColors = getClassicColors(), activeTarget = '1', slotCount = getStoredSlotCount();
 
       function visibleSlotCount() {
         const patSelect = document.getElementById('classic-pattern');
         const name = patSelect?.value || 'Arch 4';
-        return patternSlotCount(name);
+        const baseCount = patternSlotCount(name);
+        const isStacked = (name || '').toLowerCase().includes('stacked');
+        if (!isStacked) return baseCount;
+        const lengthInp = document.getElementById('classic-length-ft');
+        const clusters = Math.max(1, Math.round((parseFloat(lengthInp?.value) || 0) * 2));
+        const maxSlots = Math.min(MAX_SLOTS, clusters);
+        return Math.min(Math.max(baseCount, slotCount), maxSlots);
+      }
+
+      function renderSlots() {
+        slotsContainer.innerHTML = '';
+        const count = visibleSlotCount();
+        for (let i = 1; i <= count; i++) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'slot-btn tab-btn';
+          btn.dataset.slot = String(i);
+          btn.textContent = `#${i}`;
+          btn.addEventListener('click', () => { activeTarget = String(i); updateUI(); });
+          slotsContainer.appendChild(btn);
+        }
       }
 
       function enforceSlotVisibility() {
         const count = visibleSlotCount();
-        slots.forEach((slot, i) => {
-          const show = i < count;
-          slot.classList.toggle('hidden', !show);
-          if (!show && activeTarget === slot.dataset.slot) activeTarget = '1';
-        });
         if (parseInt(activeTarget, 10) > count) activeTarget = '1';
+        renderSlots();
       }
 
       function updateUI() {
           enforceSlotVisibility();
-          [...slots, topperSwatch].forEach(el => { const id = el.dataset.slot || 'T'; el.classList.toggle('tab-active', activeTarget === id); el.classList.toggle('tab-idle', activeTarget !== id); });
+          const buttons = Array.from(slotsContainer.querySelectorAll('.slot-btn'));
+          [...buttons, topperSwatch].forEach(el => { const id = el.dataset.slot || 'T'; el.classList.toggle('tab-active', activeTarget === id); el.classList.toggle('tab-idle', activeTarget !== id); });
           
-          slots.forEach((slot, i) => { 
+          buttons.forEach((slot, i) => { 
             const color = classicColors[i]; 
             if (!color) return; // Safeguard against errors
             slot.style.backgroundImage = color.image ? `url("${color.image}")` : 'none';
@@ -502,9 +520,17 @@ if (blockIndex % 2 === 1) {
           topperSwatch.style.backgroundSize = '200%';
           topperSwatch.style.backgroundPosition = 'center';
 
+          const patSelect = document.getElementById('classic-pattern');
+          const isStacked = (patSelect?.value || '').toLowerCase().includes('stacked');
+          if (addSlotBtn) {
+            const lengthInp = document.getElementById('classic-length-ft');
+            const clusters = Math.max(1, Math.round((parseFloat(lengthInp?.value) || 0) * 2));
+            const maxSlots = Math.min(MAX_SLOTS, clusters);
+            addSlotBtn.classList.toggle('hidden', !isStacked);
+            addSlotBtn.disabled = !isStacked || slotCount >= maxSlots;
+          }
+
           activeLabel.textContent = activeTarget === 'T' ? 'Topper' : `Slot #${activeTarget}`;
-          const displayColor = activeTarget === 'T' ? topperColor : classicColors[(parseInt(activeTarget, 10) || 1) - 1] || classicColors[0];
-          syncDockColor(displayColor);
       }
 
       const allPaletteColors = flattenPalette(); swatchGrid.innerHTML = '';
@@ -525,7 +551,7 @@ if (blockIndex % 2 === 1) {
                   if (activeTarget === 'T') setTopperColor(selectedColor);
                   else {
                       const index = parseInt(activeTarget, 10) - 1;
-                      if (index >= 0 && index < 5) { classicColors[index] = selectedColor; setClassicColors(classicColors); }
+                      if (index >= 0 && index < MAX_SLOTS) { classicColors[index] = selectedColor; setClassicColors(classicColors); }
                   }
                   updateUI(); onColorChange();
                   if (window.updateExportButtonVisibility) window.updateExportButtonVisibility();
@@ -534,7 +560,6 @@ if (blockIndex % 2 === 1) {
           });
           swatchGrid.appendChild(row);
       });
-      slots.forEach(slot => { slot.addEventListener('click', () => { activeTarget = slot.dataset.slot; updateUI(); }); });
       topperSwatch.addEventListener('click', () => { activeTarget = 'T'; updateUI(); });
       randomizeBtn?.addEventListener('click', () => {
           const pool = allPaletteColors.slice(); const picks = [];
@@ -544,153 +569,137 @@ if (blockIndex % 2 === 1) {
           updateUI(); onColorChange();
           if (window.updateExportButtonVisibility) window.updateExportButtonVisibility();
       });
+      addSlotBtn?.addEventListener('click', () => {
+          const patSelect = document.getElementById('classic-pattern');
+          const name = patSelect?.value || '';
+          const isStacked = name.toLowerCase().includes('stacked');
+          if (!isStacked) return;
+          const lengthInp = document.getElementById('classic-length-ft');
+          const clusters = Math.max(1, Math.round((parseFloat(lengthInp?.value) || 0) * 2));
+          const maxSlots = Math.min(MAX_SLOTS, clusters);
+          if (slotCount >= maxSlots) return;
+          slotCount = setStoredSlotCount(slotCount + 1);
+          while (classicColors.length < slotCount) {
+            const fallback = allPaletteColors[Math.floor(Math.random() * allPaletteColors.length)] || { hex: '#ffffff', image: null };
+            classicColors.push({ hex: fallback.hex, image: fallback.image });
+          }
+          setClassicColors(classicColors);
+          updateUI(); onColorChange();
+          if (window.updateExportButtonVisibility) window.updateExportButtonVisibility();
+      });
       updateUI();
   }
 
   function initClassic() {
     try {
       if (typeof window.m === 'undefined') return fail('Mithril not loaded');
-      const display = document.getElementById('classic-display'), patSel = document.getElementById('classic-pattern'), lengthInp = document.getElementById('classic-length-ft'), clusterHint = document.getElementById('classic-cluster-hint'), reverseCb = document.getElementById('classic-reverse'), topperControls = document.getElementById('topper-controls'), topperToggleRow = document.getElementById('classic-topper-toggle-row'), topperEnabledCb = document.getElementById('classic-topper-enabled'), topperTypeSelect = document.getElementById('classic-topper-type'), topperSizeInp = document.getElementById('classic-topper-size'), shineEnabledCb = document.getElementById('classic-shine-enabled'), lengthPresetWrap = document.getElementById('classic-length-presets'), lengthLabel = document.getElementById('classic-length-label');
-      const ARCH_LENGTHS = [20, 25, 30, 35, 40];
-      const COLUMN_LENGTHS = [3,4,5,6,7,8,9,10,11,12,13,14,15];
-      const ARCH_DEFAULT = 20;
-      const COLUMN_DEFAULT = 5;
-      const lengthDialDrawer = document.getElementById('classic-length-drawer');
+      const display = document.getElementById('classic-display'), patSel = document.getElementById('classic-pattern'), lengthInp = document.getElementById('classic-length-ft'), clusterHint = document.getElementById('classic-cluster-hint'), reverseCb = document.getElementById('classic-reverse'), topperControls = document.getElementById('topper-controls'), topperToggleRow = document.getElementById('classic-topper-toggle-row'), topperEnabledCb = document.getElementById('classic-topper-enabled'), topperSizeInp = document.getElementById('classic-topper-size'), shineEnabledCb = document.getElementById('classic-shine-enabled');
+      const patternShapeBtns = Array.from(document.querySelectorAll('[data-pattern-shape]'));
+      const patternCountBtns = Array.from(document.querySelectorAll('[data-pattern-count]'));
+      const patternLayoutBtns = Array.from(document.querySelectorAll('[data-pattern-layout]'));
       const topperNudgeBtns = Array.from(document.querySelectorAll('.nudge-topper'));
-      const slotButtons = Array.from(document.querySelectorAll('#classic-slots .slot-btn'));
-      const patternBtns = Array.from(document.querySelectorAll('.classic-pattern-btn'));
-      const variantBtns = Array.from(document.querySelectorAll('.classic-variant-btn'));
-      const topperBtns = Array.from(document.querySelectorAll('.classic-topper-btn'));
-      const topperInline = document.getElementById('topper-inline');
-      const topperTypeInline = document.getElementById('classic-topper-type-inline');
-      const topperSizeInline = document.getElementById('classic-topper-size-inline');
-      const topperColorInline = document.getElementById('classic-topper-color-swatch-inline');
+      const topperTypeButtons = Array.from(document.querySelectorAll('.topper-type-btn'));
+      const slotsContainer = document.getElementById('classic-slots');
       let topperOffsetX = 0, topperOffsetY = 0;
-      let userTopperChoice = false;
+      let lastPresetKey = null; // 'custom' means user-tweaked; otherwise `${pattern}:${type}`
+      const topperPresets = {
+        'Column 4:heart': { enabled: true, offsetX: 3, offsetY: -10.5, size: 1.05 },
+        'Column 4:star':  { enabled: true, offsetX: 3, offsetY: -7.5, size: 1.65 },
+        'Column 4:round': { enabled: true, offsetX: 3, offsetY: -2, size: 1.25 },
+        'Column 5:heart': { enabled: true, offsetX: 2, offsetY: -10, size: 1.15 },
+        'Column 5:star':  { enabled: true, offsetX: 2.5, offsetY: -7.5, size: 1.75 },
+        'Column 5:round': { enabled: true, offsetX: 2.5, offsetY: -2, size: 1.3 }
+      };
       if (!display) return fail('#classic-display not found');
       const GC = GridCalculator(), ctrl = GC.controller(display);
 
-      const syncDockPatternButtons = (patternName) => {
-        const isArch = (patternName || '').toLowerCase().includes('arch');
-        const isFive = (patternName || '').includes('5');
-        patternBtns.forEach(btn => {
-          const base = (btn.dataset.patternBase || '').toLowerCase();
-          const active = isArch ? base === 'arch' : base === 'column';
-          btn.classList.toggle('active', active);
+      const getTopperType = () => topperTypeButtons.find(btn => btn.getAttribute('aria-pressed') === 'true')?.dataset.type || 'round';
+      const setTopperType = (type) => {
+        topperTypeButtons.forEach(btn => {
+          const active = btn.dataset.type === type;
           btn.setAttribute('aria-pressed', String(active));
-        });
-        variantBtns.forEach(btn => {
-          const active = btn.dataset.patternVariant === (isFive ? '5' : '4');
-          btn.classList.toggle('active', active);
-          btn.setAttribute('aria-pressed', String(active));
-        });
-      };
-      const syncDockTopperButton = () => {
-        const on = !!topperEnabledCb?.checked;
-        topperBtns.forEach(btn => {
-          btn.classList.toggle('active', on);
-          btn.setAttribute('aria-pressed', String(on));
+          btn.classList.toggle('tab-active', active);
+          btn.classList.toggle('tab-idle', !active);
         });
       };
 
-      const syncTopperInline = () => {
-        const on = !!topperEnabledCb?.checked;
-        if (topperInline) topperInline.classList.toggle('hidden', !on);
-        if (topperTypeInline && topperTypeSelect) topperTypeInline.value = topperTypeSelect.value;
-        if (topperSizeInline && topperSizeInp) topperSizeInline.value = topperSizeInp.value;
-        if (topperColorInline) {
-          const tc = getTopperColor();
-          topperColorInline.style.backgroundImage = tc.image ? `url("${tc.image}")` : 'none';
-          topperColorInline.style.backgroundColor = tc.hex;
-        }
+      function applyTopperPreset(patternName, type) {
+        const key = `${patternName}:${type}`;
+        const preset = topperPresets[key];
+        if (!preset) return;
+        if (lastPresetKey === key || lastPresetKey === 'custom') return;
+        topperOffsetX = preset.offsetX;
+        topperOffsetY = preset.offsetY;
+        if (topperSizeInp) topperSizeInp.value = preset.size;
+        if (topperEnabledCb) topperEnabledCb.checked = preset.enabled;
+        setTopperType(type);
+        lastPresetKey = key;
+      }
+
+      let patternShape = 'arch', patternCount = 4, patternLayout = 'spiral';
+      const computePatternName = () => {
+        const base = patternShape === 'column' ? 'Column' : 'Arch';
+        const count = patternCount === 5 ? '5' : '4';
+        const layout = patternLayout === 'stacked' ? ' Stacked' : '';
+        return `${base} ${count}${layout}`;
       };
-
-      const renderLengthPresets = (patternName) => {
-        if (!lengthInp) return;
-        const isArch = (patternName || '').toLowerCase().includes('arch');
-        const list = isArch ? ARCH_LENGTHS : COLUMN_LENGTHS;
-        const current = parseFloat(lengthInp.value) || (isArch ? ARCH_DEFAULT : COLUMN_DEFAULT);
-        if (lengthLabel) lengthLabel.textContent = `${current} ft`;
-
-        const targets = [lengthPresetWrap, lengthDialDrawer];
-        targets.forEach(container => {
-          if (!container) return;
-          container.innerHTML = '';
-          list.forEach(len => {
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            btn.className = 'dock-pill';
-            if (Math.abs(current - len) < 1e-6) btn.classList.add('active');
-            btn.textContent = `${len} ft`;
-            btn.dataset.len = len;
-            btn.addEventListener('click', () => {
-              lengthInp.value = len;
-              if (lengthLabel) lengthLabel.textContent = `${len} ft`;
-              updateClassicDesign();
-              btn.classList.add('ping');
-              btn.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
-              setTimeout(() => btn.classList.remove('ping'), 280);
-              document.getElementById('classic-drawer-pattern')?.classList.add('hidden');
-              window.__dockActiveMenu = null;
-            });
-            container.appendChild(btn);
-          });
+      const syncPatternStateFromSelect = () => {
+        const val = (patSel?.value || '').toLowerCase();
+        patternShape = val.includes('column') ? 'column' : 'arch';
+        patternCount = val.includes('5') ? 5 : 4;
+        patternLayout = val.includes('stacked') ? 'stacked' : 'spiral';
+      };
+      const applyPatternButtons = () => {
+        const setActive = (btns, attr, val) => btns.forEach(b => {
+          const active = b.dataset[attr] === val;
+          b.classList.toggle('tab-active', active);
+          b.classList.toggle('tab-idle', !active);
+          b.setAttribute('aria-pressed', String(active));
         });
+        setActive(patternShapeBtns, 'patternShape', patternShape);
+        setActive(patternCountBtns, 'patternCount', String(patternCount));
+        setActive(patternLayoutBtns, 'patternLayout', patternLayout);
       };
-
-      const ensureLengthForPattern = (patternName) => {
-        if (!lengthInp) return;
-        const isArch = (patternName || '').toLowerCase().includes('arch');
-        const list = isArch ? ARCH_LENGTHS : COLUMN_LENGTHS;
-        const cur = parseFloat(lengthInp.value);
-        if (!list.includes(cur)) {
-          const def = isArch ? ARCH_DEFAULT : COLUMN_DEFAULT;
-          lengthInp.value = def;
-        }
-      };
+      syncPatternStateFromSelect();
+      applyPatternButtons();
 
       function updateClassicDesign() {
         if (!lengthInp || !patSel) return;
+        patSel.value = computePatternName();
         const patternName = patSel.value || 'Arch 4';
-        ensureLengthForPattern(patternName);
         const isColumn = patternName.toLowerCase().includes('column');
         const hasTopper = patternName.includes('4') || patternName.includes('5');
         const showToggle = isColumn && hasTopper;
-        if (showToggle && topperEnabledCb && !userTopperChoice) {
-          topperEnabledCb.checked = true;
+        if (patternName.toLowerCase().includes('column')) {
+          const baseName = patternName.includes('5') ? 'Column 5' : 'Column 4';
+          applyTopperPreset(baseName, getTopperType());
         }
         if (topperToggleRow) topperToggleRow.classList.toggle('hidden', !showToggle);
         const showTopper = showToggle && topperEnabledCb?.checked;
 
-        slotButtons.forEach((btn, i) => {
-          const count = patternSlotCount(patternName);
-          const show = i < count;
-          btn.classList.toggle('hidden', !show);
-        });
-        
         topperControls.classList.toggle('hidden', !showTopper);
-        topperTypeSelect.disabled = !showTopper;
         
         GC.setTopperEnabled(showTopper); 
         GC.setClusters(Math.round((parseFloat(lengthInp.value) || 0) * 2));
         GC.setReverse(!!reverseCb?.checked); 
-        GC.setTopperType(topperTypeSelect.value); 
+        GC.setTopperType(getTopperType()); 
         GC.setTopperOffsetX(topperOffsetX); 
         GC.setTopperOffsetY(topperOffsetY); 
         GC.setTopperSize(topperSizeInp?.value); 
         GC.setShineEnabled(!!shineEnabledCb?.checked);
+        if (document.body) {
+          if (showTopper) document.body.dataset.topperOverlay = '1';
+          else delete document.body.dataset.topperOverlay;
+        }
+        window.__updateFloatingNudge?.();
         if(clusterHint) clusterHint.textContent = `≈ ${Math.round((parseFloat(lengthInp.value) || 0) * 2)} clusters (rule: 2 clusters/ft)`;
         ctrl.selectPattern(patternName);
-        syncDockPatternButtons(patternName);
-        syncDockTopperButton();
-        renderLengthPresets(patternName);
-        syncTopperInline();
       }
       
       const setLengthForPattern = () => {
         if (!lengthInp || !patSel) return;
-        const isArch = (patSel.value || '').toLowerCase().includes('arch');
-        lengthInp.value = isArch ? ARCH_DEFAULT : COLUMN_DEFAULT;
+        const isArch = (computePatternName()).toLowerCase().includes('arch');
+        lengthInp.value = isArch ? 20 : 5;
       };
       
       window.ClassicDesigner = window.ClassicDesigner || {};
@@ -701,45 +710,38 @@ if (blockIndex % 2 === 1) {
 
       document.querySelector('#mode-tabs')?.addEventListener('click', () => setTimeout(() => { if (window.updateExportButtonVisibility) window.updateExportButtonVisibility() }, 50));
       patSel?.addEventListener('change', () => { 
-        ensureLengthForPattern(patSel.value);
+        lastPresetKey = null;
+        syncPatternStateFromSelect();
+        applyPatternButtons();
+        setLengthForPattern();
         updateClassicDesign(); 
-        renderLengthPresets(patSel.value);
       });
+      patternShapeBtns.forEach(btn => btn.addEventListener('click', () => { patternShape = btn.dataset.patternShape; lastPresetKey = null; applyPatternButtons(); setLengthForPattern(); updateClassicDesign(); }));
+      patternCountBtns.forEach(btn => btn.addEventListener('click', () => { patternCount = Number(btn.dataset.patternCount) === 5 ? 5 : 4; lastPresetKey = null; applyPatternButtons(); setLengthForPattern(); updateClassicDesign(); }));
+      patternLayoutBtns.forEach(btn => btn.addEventListener('click', () => { patternLayout = btn.dataset.patternLayout === 'stacked' ? 'stacked' : 'spiral'; lastPresetKey = null; applyPatternButtons(); updateClassicDesign(); }));
       topperNudgeBtns.forEach(btn => btn.addEventListener('click', () => {
         const dx = Number(btn.dataset.dx || 0);
         const dy = Number(btn.dataset.dy || 0);
         topperOffsetX += dx;
         topperOffsetY += dy;
+        lastPresetKey = 'custom';
         GC.setTopperOffsetX(topperOffsetX);
         GC.setTopperOffsetY(topperOffsetY);
         updateClassicDesign();
       }));
-      [lengthInp, reverseCb, topperEnabledCb, topperTypeSelect, topperSizeInp]
-      .forEach(el => { if (!el) return; const eventType = (el.type === 'range' || el.type === 'number') ? 'input' : 'change'; el.addEventListener(eventType, updateClassicDesign); });
+      topperTypeButtons.forEach(btn => btn.addEventListener('click', () => {
+        setTopperType(btn.dataset.type);
+        lastPresetKey = null;
+        updateClassicDesign();
+      }));
+      [lengthInp, reverseCb, topperEnabledCb, topperSizeInp]
+      .forEach(el => { if (!el) return; const eventType = (el.type === 'range' || el.type === 'number') ? 'input' : 'change'; el.addEventListener(eventType, () => { if (el === topperSizeInp || el === topperEnabledCb) lastPresetKey = 'custom'; updateClassicDesign(); }); });
       topperEnabledCb?.addEventListener('change', updateClassicDesign);
-      topperEnabledCb?.addEventListener('change', (e) => {
-        if (e.isTrusted) userTopperChoice = true;
-        syncDockTopperButton();
-        syncTopperInline();
-      });
-      topperTypeInline?.addEventListener('change', () => {
-        if (topperTypeSelect) topperTypeSelect.value = topperTypeInline.value;
-        updateClassicDesign();
-      });
-      topperSizeInline?.addEventListener('input', () => {
-        if (topperSizeInp) topperSizeInp.value = topperSizeInline.value;
-        updateClassicDesign();
-      });
-      topperColorInline?.addEventListener('click', () => {
-        const sw = document.getElementById('classic-topper-color-swatch');
-        sw?.click();
-      });
       shineEnabledCb?.addEventListener('change', (e) => { const on = !!e.target.checked; GC.setShineEnabled(on); updateClassicDesign(); window.syncAppShine?.(on); });
       initClassicColorPicker(updateClassicDesign);
       try { const saved = localStorage.getItem('app:shineEnabled:v1'); if (saved !== null && shineEnabledCb) shineEnabledCb.checked = JSON.parse(saved); } catch {}
       setLengthForPattern();
       updateClassicDesign();
-      renderLengthPresets(patSel?.value || '');
       if (window.updateExportButtonVisibility) window.updateExportButtonVisibility();
       log('Classic ready');
     } catch (e) { fail(e.message || e); }
diff --git a/index.html b/index.html
index 3e32795..770f593 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
   <script src="colors.js"></script>
 
   <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style>
     .tab-btn{padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:600;transition:background-color .2s,color .2s,box-shadow .2s}
     .tab-active{background:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.35)}
@@ -21,42 +22,59 @@
     .copy-message{opacity:0;pointer-events:none;transition:opacity .2s}.copy-message.show{opacity:1}
   </style>
 </head>
-<body class="flex flex-col min-h-screen p-0 md:p-6 items-center justify-start bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))] from-indigo-100 via-white to-pink-100 text-slate-800">
+<body class="p-0 md:p-6 flex flex-col items-center justify-start min-h-screen bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))] from-indigo-100 via-white to-pink-100 text-slate-800 overflow-hidden">
+  <div class="container mx-auto mt-2 p-4 lg:p-6 bg-white/80 lg:backdrop-blur-xl rounded-3xl border border-white/50 shadow-2xl flex flex-col gap-4 max-w-7xl lg:h-[calc(100vh-2rem)] overflow-hidden ring-1 ring-black/5">
 
-
-    <header class="flex items-center justify-between gap-3 px-2 lg:px-0 py-2">
+    <header class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 px-1 lg:px-0">
       <div class="flex items-center gap-3">
+
         <div>
-          <div class="text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-pink-600 tracking-tight filter drop-shadow-sm">Balloon Studio</div>
+          <div class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-pink-600 tracking-tight filter drop-shadow-sm">Balloon Studio</div>
+          <div class="text-xs text-indigo-500 font-bold uppercase tracking-wider">Professional Design Tool</div>
         </div>
       </div>
-
-      <!-- Mode Switcher Restored -->
-      <nav id="mode-tabs" class="flex gap-1 bg-slate-100 p-1 rounded-lg">
-        <button type="button" class="tab-btn tab-active text-xs !py-1 !px-2" data-target="#tab-organic" aria-pressed="true">Organic</button>
-        <button type="button" class="tab-btn tab-idle text-xs !py-1 !px-2"   data-target="#tab-classic" aria-pressed="false">Classic</button>
+      <nav id="mode-tabs" class="flex gap-2">
+        <button type="button" class="tab-btn tab-active" data-target="#tab-organic" aria-pressed="true">Organic</button>
+        <button type="button" class="tab-btn tab-idle"   data-target="#tab-classic" aria-pressed="false">Classic (Arch/Column)</button>
       </nav>
-      
-      <div class="flex items-center gap-2">
-          <button id="header-undo" class="tool-btn !p-2" title="Undo">
-            <svg viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
-          </button>
-          <button id="header-redo" class="tool-btn !p-2" title="Redo">
-            <svg viewBox="0 0 24 24"><path d="M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>
-          </button>
-          <button id="header-export" class="btn-blue text-xs font-bold !py-2 !px-3" data-export="png">Export</button>
-      </div>
     </header>
 
     <section id="tab-organic" class="flex flex-col lg:flex-row gap-4 lg:h-[calc(100vh-10rem)]">
       <aside id="controls-panel" class="control-sheet lg:static lg:w-[360px] lg:max-h-none lg:overflow-y-auto">
         <div class="panel-header-row">
           <h2 class="panel-title">Organic Controls</h2>
-          <button type="button" class="sheet-close-btn" data-sheet-toggle="controls-panel">Hide</button>
         </div>
         <div class="control-stack" data-mobile-tab="controls">
-          <div class="panel-heading">Selection Options</div>
+          <div class="panel-heading">Tools</div>
           <div class="panel-card">
+            <div class="grid grid-cols-3 gap-2 mb-3">
+              <button id="tool-draw" class="tool-btn" aria-pressed="true" title="V">
+                <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                <span class="hidden sm:inline">Draw</span>
+              </button>
+              <button id="tool-erase" class="tool-btn" aria-pressed="false" title="E">
+                <svg viewBox="0 0 24 24"><path d="M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 0 1-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0zM4.22 15.58l3.54 3.53c.78.79 2.04.79 2.83 0l8.48-8.48-3.54-3.54-8.48 8.48c-.79.79-.79 2.05 0 2.84z"/></svg>
+                <span class="hidden sm:inline">Erase</span>
+              </button>
+              <button id="tool-select" class="tool-btn" aria-pressed="false" title="S">
+                <svg viewBox="0 0 24 24"><path d="M7 2l12 11.2-5.8.5 3.3 7.3-2.2.9-3.2-7.4-4.4 4V2z"/></svg>
+                <span class="hidden sm:inline">Select</span>
+              </button>
+            </div>
+            <div class="grid grid-cols-3 gap-2 mb-3">
+              <button id="tool-undo" class="tool-btn" title="Ctrl+Z" aria-label="Undo">
+                <svg viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
+                <span class="hidden sm:inline">Undo</span>
+              </button>
+              <button id="tool-redo" class="tool-btn" title="Ctrl+Y" aria-label="Redo">
+                <svg viewBox="0 0 24 24"><path d="M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>
+                <span class="hidden sm:inline">Redo</span>
+              </button>
+              <button id="tool-eyedropper" class="tool-btn" title="Pick Color" aria-label="Eyedropper" aria-pressed="false">
+                <svg viewBox="0 0 24 24"><path d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
+                <span class="hidden sm:inline">Picker</span>
+              </button>
+            </div>
             <div id="eraser-controls" class="hidden flex flex-col gap-2">
               <label class="text-sm font-medium text-gray-700">Eraser Size: <span id="eraser-size-label">30</span>px</label>
               <input type="range" id="eraser-size" min="10" max="120" value="30" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
@@ -94,46 +112,45 @@
               </div>
               <p class="hint">Click a balloon to select. Del/Backspace removes. Esc clears.</p>
             </div>
-            <!-- Fallback hint if nothing selected/erasing -->
-            <p id="controls-empty-hint" class="hint mt-2 hidden">Select a balloon or choose the Eraser tool to see options.</p>
           </div>
-        </div>
 
-        <div class="control-stack" data-mobile-tab="colors">
-          <div class="panel-heading">Balloon Size</div>
+          <div class="panel-heading mt-4">Size & Shine</div>
           <div class="panel-card">
             <div id="size-preset-group" class="grid grid-cols-5 gap-2 mb-2"></div>
+            <p class="hint mb-3">Global scale lives in <code>PX_PER_INCH</code> (see <code>script.js</code>).</p>
             <label class="text-sm inline-flex items-center gap-2 font-medium">
               <input id="toggle-shine-checkbox" type="checkbox" class="align-middle" checked>
               Enable Shine
             </label>
           </div>
+        </div>
 
-          <div class="panel-heading mt-4">Palette in Use</div>
+        <div class="control-stack" data-mobile-tab="colors">
+          <div class="panel-heading">Used Colors</div>
           <div class="panel-card">
             <div class="flex items-center justify-between mb-2">
-              <span class="text-sm text-gray-600">Colors currently on your canvas.</span>
+              <span class="text-sm text-gray-600">Built from the current design. Click a swatch to select that color.</span>
               <button id="sort-used-toggle" class="text-sm underline">Sort: Most → Least</button>
             </div>
             <div id="used-palette" class="palette-box min-h-[3rem]"></div>
           </div>
 
-          <div class="panel-heading mt-4">Color Library</div>
+          <div class="panel-heading mt-4">Allowed Colors</div>
           <div class="panel-card">
-            <p class="hint mb-2">Pick a color to draw with.</p>
+            <p class="hint mb-2">Alt+Click a balloon on canvas to pick its color.</p>
             <div id="color-palette" class="palette-box"></div>
           </div>
 
-          <div class="panel-heading mt-4">Swap Colors</div>
+          <div class="panel-heading mt-4">Replace Color</div>
           <div class="panel-card">
             <div class="grid grid-cols-1 gap-2">
-              <label class="text-sm font-medium">Change this color:</label>
+              <label class="text-sm font-medium">From (used):</label>
               <select id="replace-from" class="select"></select>
 
-              <label class="text-sm font-medium">To this new color:</label>
+              <label class="text-sm font-medium">To (allowed):</label>
               <select id="replace-to" class="select"></select>
 
-              <button id="replace-btn" class="btn-blue">Swap All</button>
+              <button id="replace-btn" class="btn-blue">Replace</button>
               <p id="replace-msg" class="hint"></p>
             </div>
           </div>
@@ -175,32 +192,45 @@
       <aside id="classic-controls-panel" class="control-sheet lg:static lg:w-[360px] lg:max-h-none lg:overflow-y-auto">
         <div class="panel-header-row">
           <h2 class="panel-title">Classic Controls</h2>
-          <button type="button" class="sheet-close-btn" data-sheet-toggle="classic-controls-panel">Hide</button>
         </div>
         <div class="control-stack" data-mobile-tab="controls">
           <div class="panel-heading">Pattern & Layout</div>
           <div class="panel-card space-y-4">
-            <div class="flex flex-wrap items-center gap-3">
-              <span class="classic-quick-label">Colors</span>
-              <div class="dock-pill-group">
-                <button type="button" class="dock-pill classic-variant-btn" data-pattern-variant="4">4 colors</button>
-                <button type="button" class="dock-pill classic-variant-btn" data-pattern-variant="5">5 colors</button>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="space-y-2">
+                <div class="text-sm font-medium text-gray-700">Shape</div>
+                <div class="flex gap-2">
+                  <button type="button" class="tab-btn tab-active pattern-btn" data-pattern-shape="arch" aria-pressed="true">Arch</button>
+                  <button type="button" class="tab-btn tab-idle pattern-btn" data-pattern-shape="column" aria-pressed="false">Column</button>
+                </div>
               </div>
-            </div>
-            <select id="classic-pattern" class="select hidden">
-              <option value="Arch 4">Arch 4 (4-color spiral)</option>
-              <option value="Column 4">Column 4 (quad wrap)</option>
-              <option value="Arch 5">Arch 5 (5-color spiral)</option>
-              <option value="Column 5">Column 5 (5-balloon wrap)</option>
-            </select>
-
-            <div class="space-y-2">
-              <div class="flex items-center gap-2">
-                <span class="classic-quick-label">Length</span>
-                <span class="text-xs text-gray-500" id="classic-length-label">ft</span>
+              <div class="space-y-2">
+                <div class="text-sm font-medium text-gray-700">Balloon Count</div>
+                <div class="flex gap-2">
+                  <button type="button" class="tab-btn tab-active pattern-btn" data-pattern-count="4" aria-pressed="true">4 Colors</button>
+                  <button type="button" class="tab-btn tab-idle pattern-btn" data-pattern-count="5" aria-pressed="false">5 Colors</button>
+                </div>
               </div>
-              <div id="classic-length-presets" class="length-dial"></div>
-              <input id="classic-length-ft" type="number" min="1" max="100" step="0.5" value="5" class="hidden">
+              <div class="md:col-span-2 space-y-2">
+                <div class="text-sm font-medium text-gray-700">Layout</div>
+                <div class="flex gap-2">
+                  <button type="button" class="tab-btn tab-active pattern-btn" data-pattern-layout="spiral" aria-pressed="true">Spiral</button>
+                  <button type="button" class="tab-btn tab-idle pattern-btn" data-pattern-layout="stacked" aria-pressed="false">Stacked</button>
+                </div>
+              </div>
+              <select id="classic-pattern" class="select align-middle hidden" aria-hidden="true" tabindex="-1">
+                <option value="Arch 4">Arch 4 (4-color spiral)</option>
+                <option value="Column 4">Column 4 (quad wrap)</option>
+                <option value="Arch 5">Arch 5 (5-color spiral)</option>
+                <option value="Column 5">Column 5 (5-balloon wrap)</option>
+                <option value="Arch 4 Stacked">Arch 4 (stacked)</option>
+                <option value="Column 4 Stacked">Column 4 (stacked)</option>
+                <option value="Arch 5 Stacked">Arch 5 (stacked)</option>
+                <option value="Column 5 Stacked">Column 5 (stacked)</option>
+              </select>
+              <label class="text-sm">Length (ft):
+                <input id="classic-length-ft" type="number" min="1" max="100" step="0.5" value="5" class="w-full px-2 py-1 border rounded align-middle">
+              </label>
             </div>
 
             <div id="classic-topper-toggle-row" class="flex items-center gap-3 pt-2 border-t border-gray-200 hidden">
@@ -210,29 +240,19 @@
               </label>
             </div>
 
-            <div id="topper-controls" class="hidden grid grid-cols-1 sm:grid-cols-4 gap-3 items-end pt-2">
-              <label class="text-sm sm:col-span-2">Topper Type:
-                <select id="classic-topper-type" class="select align-middle" disabled>
-                  <option value="round">24" Round</option>
-                  <option value="star">24" Star</option>
-                  <option value="heart">24" Heart</option>
-                </select>
-              </label>
-              <label class="text-sm">Topper Color:
-                <div id="classic-topper-color-swatch" class="slot-swatch mx-auto" title="Click to change topper color">T</div>
-              </label>
-              <div class="col-span-full">
-                <div class="panel-heading mt-2 mb-2">Topper Nudge</div>
-                <div class="grid grid-cols-3 gap-2 max-w-xs justify-items-center">
-                  <button type="button" class="btn-nudge nudge-topper" data-dx="0" data-dy="0.5" aria-label="Move Topper Up">↑</button>
-                  <button type="button" class="btn-nudge nudge-topper" data-dx="0.5" data-dy="0" aria-label="Move Topper Right">→</button>
-                  <button type="button" class="btn-nudge nudge-topper" data-dx="0" data-dy="-0.5" aria-label="Move Topper Down">↓</button>
-                  <button type="button" class="btn-nudge nudge-topper col-span-3" data-dx="-0.5" data-dy="0" aria-label="Move Topper Left">←</button>
+            <div id="topper-controls" class="hidden grid grid-cols-1 sm:grid-cols-4 gap-3 items-start pt-2">
+              <div class="sm:col-span-2">
+                <div class="text-sm font-medium mb-2">Topper Shape</div>
+                <div id="topper-type-group" class="topper-type-group">
+                  <button type="button" class="tab-btn topper-type-btn tab-active" data-type="round" aria-pressed="true"><i class="fa-regular fa-circle-dot"></i><span class="hidden sm:inline">Round</span></button>
+                  <button type="button" class="tab-btn topper-type-btn tab-idle" data-type="star" aria-pressed="false"><i class="fa-solid fa-star"></i><span class="hidden sm:inline">Star</span></button>
+                  <button type="button" class="tab-btn topper-type-btn tab-idle" data-type="heart" aria-pressed="false"><i class="fa-solid fa-heart"></i><span class="hidden sm:inline">Heart</span></button>
                 </div>
               </div>
-              <label class="text-sm">Topper Size:
-                  <input id="classic-topper-size" type="range" min="0.5" max="2" step="0.05" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-              </label>
+              <div class="sm:col-span-2">
+                <div class="text-sm font-medium mb-1">Topper Size</div>
+                <input id="classic-topper-size" type="range" min="0.5" max="2" step="0.05" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+              </div>
             </div>
 
             <div class="text-xs text-gray-500">
@@ -255,18 +275,20 @@
         <div class="control-stack" data-mobile-tab="colors">
           <div class="panel-heading">Classic Colors</div>
           <div class="panel-card">
-              <div id="classic-slots" class="flex items-center gap-2 mb-3">
-                <button type="button" class="slot-btn tab-btn" data-slot="1">#1</button>
-                <button type="button" class="slot-btn tab-btn" data-slot="2">#2</button>
-                <button type="button" class="slot-btn tab-btn" data-slot="3">#3</button>
-                <button type="button" class="slot-btn tab-btn" data-slot="4">#4</button>
-                <button type="button" class="slot-btn tab-btn" data-slot="5">#5</button>
+              <div class="flex items-center justify-between mb-2">
+                <div id="classic-slots" class="flex items-center gap-2"></div>
+                <button id="classic-add-slot" class="btn-dark text-sm px-3 py-2 hidden" type="button" title="Add color slot">+</button>
               </div>
               <div class="text-sm text-gray-600 mb-1">Pick a color for <span id="classic-active-label" class="font-bold">Slot #1</span> (from colors.js):</div>
               <div id="classic-swatch-grid" class="palette-box min-h-[3rem]"></div>
               <div class="flex flex-wrap gap-2 mt-3">
                   <button id="classic-randomize-colors" class="btn-dark">Randomize 5</button>
               </div>
+              <div class="panel-heading mt-3">Topper Color</div>
+              <div class="flex items-center gap-3">
+                <button id="classic-topper-color-swatch" class="slot-swatch" title="Click to change topper color">T</button>
+                <p class="hint">Select a color then click to apply.</p>
+              </div>
           </div>
         </div>
 
@@ -288,90 +310,43 @@
         <div id="classic-display"
              class="rounded-xl"
              style="width:100%;height:72vh;border:1px solid #e5e7eb;background:#fff;overflow:auto;"></div>
-      </section>
-
-</section>
-
-
-  <div id="mobile-tabbar" class="mobile-tabbar justify-center gap-6 !py-4 !bg-slate-900/95 backdrop-blur-xl border-t border-white/10">
-    <div id="dock-organic" class="flex items-center gap-3">
-      <button id="dock-draw" class="mobile-tool-btn active" data-dock="organic" title="Draw">
-        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
-      </button>
-      <button id="dock-erase" class="mobile-tool-btn" data-dock="organic" title="Erase">
-        <svg viewBox="0 0 24 24"><path d="M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 0 1-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0zM4.22 15.58l3.54 3.53c.78.79 2.04.79 2.83 0l8.48-8.48-3.54-3.54-8.48 8.48c-.79.79-.79 2.05 0 2.84z"/></svg>
-      </button>
-      <button id="dock-color-trigger" class="dock-color-btn" style="background-color: #2563eb;" aria-label="Open Colors"></button>
-      <button id="dock-select" class="mobile-tool-btn" data-dock="organic" title="Select">
-        <svg viewBox="0 0 24 24"><path d="M7 2l12 11.2-5.8.5 3.3 7.3-2.2.9-3.2-7.4-4.4 4V2z"/></svg>
-      </button>
-      <button id="dock-picker" class="mobile-tool-btn" data-dock="organic" title="Picker">
-        <svg viewBox="0 0 24 24"><path d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
-      </button>
-    </div>
-
-    <div id="dock-classic" class="hidden flex items-center justify-center gap-3">
-      <button id="dock-arch" class="mobile-tool-btn classic-pattern-btn" data-pattern-base="Arch" title="Arch Pattern">
-        <svg viewBox="0 0 24 24"><path d="M4 18a8 8 0 0 1 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-      </button>
-
-      <button id="dock-classic-color" class="dock-color-btn" style="background-color:#2563eb;" aria-label="Open Colors"></button>
-
-      <button id="dock-column" class="mobile-tool-btn classic-pattern-btn" data-pattern-base="Column" title="Column Pattern">
-        <svg viewBox="0 0 24 24"><path d="M8 4v16M16 4v16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-      </button>
-    </div>
-  </div>
-
-  <!-- Classic drawers for mobile -->
-  <div id="classic-drawer-pattern" class="classic-drawer hidden">
-    <div class="drawer-row">
-      <div class="drawer-pill-group">
-        <button type="button" class="dock-pill classic-pattern-btn" data-pattern-base="Arch">Arch</button>
-        <button type="button" class="dock-pill classic-pattern-btn" data-pattern-base="Column">Column</button>
-      </div>
-      <div class="drawer-pill-group">
-        <button type="button" class="dock-pill classic-variant-btn" data-pattern-variant="4">4 colors</button>
-        <button type="button" class="dock-pill classic-variant-btn" data-pattern-variant="5">5 colors</button>
-      </div>
-    </div>
-    <div class="drawer-row dial-row">
-      <span class="drawer-label">Length</span>
-      <div id="classic-length-drawer" class="length-dial"></div>
-    </div>
-    <div class="drawer-row topper-row">
-      <button type="button" class="dock-pill classic-topper-btn" data-topper-toggle>Topper</button>
-      <div class="topper-inline hidden" id="topper-inline">
-        <select id="classic-topper-type-inline" class="select select-xs">
-          <option value="round">Round</option>
-          <option value="star">Star</option>
-          <option value="heart">Heart</option>
-        </select>
-        <div id="classic-topper-color-swatch-inline" class="slot-swatch" title="Topper color">T</div>
-        <div class="nudge-pad">
-          <button type="button" class="btn-nudge nudge-topper" data-dx="0" data-dy="0.5">↑</button>
-          <div class="flex gap-2">
-            <button type="button" class="btn-nudge nudge-topper" data-dx="-0.5" data-dy="0">←</button>
-            <button type="button" class="btn-nudge nudge-topper" data-dx="0.5" data-dy="0">→</button>
+        <div id="floating-topper-nudge" class="floating-nudge hidden">
+          <div class="floating-nudge-header">
+            <div class="panel-heading">Nudge Topper</div>
+            <button type="button" id="floating-nudge-toggle" class="btn-dark text-xs px-3 py-2">Hide</button>
+          </div>
+          <div class="floating-nudge-body">
+            <div class="grid grid-cols-3 gap-2">
+              <div></div>
+              <button type="button" class="btn-dark nudge-topper" data-dx="0" data-dy="0.5" aria-label="Move Topper Up">↑</button>
+              <div></div>
+              <button type="button" class="btn-dark nudge-topper" data-dx="-0.5" data-dy="0" aria-label="Move Topper Left">←</button>
+              <div></div>
+              <button type="button" class="btn-dark nudge-topper" data-dx="0.5" data-dy="0" aria-label="Move Topper Right">→</button>
+              <div></div>
+              <button type="button" class="btn-dark nudge-topper" data-dx="0" data-dy="-0.5" aria-label="Move Topper Down">↓</button>
+              <div></div>
+            </div>
           </div>
-          <button type="button" class="btn-nudge nudge-topper" data-dx="0" data-dy="-0.5">↓</button>
         </div>
-        <div class="topper-size-wrap">
-          <label class="text-xs text-slate-600">Size</label>
-          <input id="classic-topper-size-inline" type="range" min="0.5" max="2" step="0.05" value="1">
-        </div>
-      </div>
-    </div>
+      </section>
+    </section>
+
   </div>
 
-  <div id="classic-drawer-colors" class="classic-drawer hidden">
-    <div class="drawer-row">
-      <div id="classic-slots-drawer" class="flex items-center gap-2"></div>
-      <div class="flex-1 text-right">
-        <button id="classic-randomize-colors-inline" class="dock-pill">Shuffle 5</button>
-      </div>
-    </div>
-    <div id="classic-swatch-drawer" class="palette-box"></div>
+  <div id="mobile-tabbar" class="mobile-tabbar">
+    <button type="button" class="mobile-tab-btn" data-mobile-tab="controls" aria-pressed="true" aria-label="Tools">
+      <i class="mobile-tab-icon fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
+      <span class="sr-only">Tools</span>
+    </button>
+    <button type="button" class="mobile-tab-btn" data-mobile-tab="colors" aria-pressed="false" aria-label="Colors">
+      <i class="mobile-tab-icon fa-solid fa-palette" aria-hidden="true"></i>
+      <span class="sr-only">Colors</span>
+    </button>
+    <button type="button" class="mobile-tab-btn" data-mobile-tab="save" aria-pressed="false" aria-label="Save and Share">
+      <i class="mobile-tab-icon fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
+      <span class="sr-only">Save</span>
+    </button>
   </div>
 
     <div id="message-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
diff --git a/script.js b/script.js
index 22c9af5..62981e3 100644
--- a/script.js
+++ b/script.js
@@ -199,19 +199,8 @@
     }
 
     // Bind Undo/Redo Buttons
-    document.getElementById('tool-undo')?.addEventListener('click', () => {
-        undo();
-        // Auto-minimize on mobile to see changes
-        if (window.innerWidth < 1024) {
-            document.getElementById('controls-panel')?.classList.add('minimized');
-        }
-    });
-    document.getElementById('tool-redo')?.addEventListener('click', () => {
-        redo();
-        if (window.innerWidth < 1024) {
-            document.getElementById('controls-panel')?.classList.add('minimized');
-        }
-    });
+    document.getElementById('tool-undo')?.addEventListener('click', undo);
+    document.getElementById('tool-redo')?.addEventListener('click', redo);
 
     // Eyedropper Tool
     const toolEyedropperBtn = document.getElementById('tool-eyedropper');
@@ -221,10 +210,6 @@
             setMode('draw'); // toggle off
         } else {
             setMode('eyedropper');
-            // Auto-minimize on mobile
-            if (window.innerWidth < 1024) {
-                document.getElementById('controls-panel')?.classList.add('minimized');
-            }
         }
     });
 
@@ -304,53 +289,18 @@
       toolSelectBtn?.setAttribute('aria-pressed', String(mode === 'select'));
       toolEyedropperBtn?.setAttribute('aria-pressed', String(mode === 'eyedropper'));
       
-      // Update Mobile Dock Active States
-      document.querySelectorAll('.mobile-tool-btn[data-dock="organic"]').forEach(btn => btn.classList.remove('active'));
-      if (mode === 'draw') document.getElementById('dock-draw')?.classList.add('active');
-      if (mode === 'erase') document.getElementById('dock-erase')?.classList.add('active');
-      if (mode === 'select') document.getElementById('dock-select')?.classList.add('active');
-      if (mode === 'eyedropper') document.getElementById('dock-picker')?.classList.add('active');
-
       eraserControls?.classList.toggle('hidden', mode !== 'erase');
       selectControls?.classList.toggle('hidden', mode !== 'select');
       
-      // Show/Hide empty hint in Selection Options panel
-      const emptyHint = document.getElementById('controls-empty-hint');
-      if (emptyHint) {
-          emptyHint.classList.toggle('hidden', mode === 'erase' || mode === 'select');
-          emptyHint.textContent = mode === 'draw' ? 'Switch to Select or Erase tool to see options.' : 'Select a tool...';
-      }
-      
       if (mode === 'erase') canvas.style.cursor = 'none';
-      else if (mode === 'select') {
-          canvas.style.cursor = 'default';
-      }
+      else if (mode === 'select') canvas.style.cursor = 'default'; // will be move over items
       else if (mode === 'eyedropper') canvas.style.cursor = 'cell';
       else canvas.style.cursor = 'crosshair';
       
-      // Contextual Tab Switching
-      if (window.innerWidth < 1024) {
-          if (mode === 'select' || mode === 'erase') {
-              setMobileTab('controls');
-          } else if (mode === 'draw') {
-              // Optional: switch to colors, or stay put?
-              // setMobileTab('colors'); 
-          }
-          
-          // Minimize drawer on tool switch to clear view
-          const panel = document.getElementById('controls-panel');
-          if (panel && !panel.classList.contains('minimized')) {
-             panel.classList.add('minimized');
-          }
-      }
-      
       draw();
       persist();
     }
 
-    // ... (rest of the file) ...
-
-
     function updateSelectButtons() {
       const has = !!selectedBalloonId;
       if (deleteSelectedBtn) deleteSelectedBtn.disabled = !has;
@@ -466,31 +416,13 @@
     }, { passive: true });
 
     // ====== Canvas & Drawing ======
-    let hasFittedView = false;
     function resizeCanvas() {
-      const rect = canvas.parentElement?.getBoundingClientRect?.() || canvas.getBoundingClientRect();
-      const prevDpr = dpr || 1;
-      const prevCw = canvas.width  / prevDpr;
-      const prevCh = canvas.height / prevDpr;
-      const prevCenter = {
-        x: (prevCw / 2) / (view.s || 1) - view.tx,
-        y: (prevCh / 2) / (view.s || 1) - view.ty
-      };
-
+      const rect = canvas.getBoundingClientRect();
       dpr = Math.max(1, window.devicePixelRatio || 1);
-      canvas.width = Math.round(Math.min(rect.width, window.innerWidth) * dpr);
-      canvas.height = Math.round(Math.min(rect.height, window.innerHeight) * dpr);
+      canvas.width = Math.round(rect.width * dpr);
+      canvas.height = Math.round(rect.height * dpr);
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-      if (!hasFittedView) {
-        fitView();
-        hasFittedView = true;
-      } else if (prevCw > 0 && prevCh > 0) {
-        const cw = canvas.width / dpr;
-        const ch = canvas.height / dpr;
-        view.tx = (cw / (2 * (view.s || 1))) - prevCenter.x;
-        view.ty = (ch / (2 * (view.s || 1))) - prevCenter.y;
-      }
+      fitView();
       draw();
     }
     function clearCanvasArea() {
@@ -631,22 +563,8 @@
 
     function saveAppState() {
       // Note: isShineEnabled is managed globally.
-      const state = { balloons, selectedColorIdx, currentDiameterInches, eraserRadius, mode, view, usedSortDesc };
+      const state = { balloons, selectedColorIdx, currentDiameterInches, eraserRadius, view, usedSortDesc };
       try { localStorage.setItem(APP_STATE_KEY, JSON.stringify(state)); } catch {}
-      
-      // Update dock color trigger
-      const meta = FLAT_COLORS[selectedColorIdx];
-      const trig = document.getElementById('dock-color-trigger');
-      if (trig && meta) {
-          if (meta.image) {
-             trig.style.backgroundImage = `url("${meta.image}")`;
-             trig.style.backgroundSize = '200%';
-             trig.style.backgroundColor = 'transparent';
-          } else {
-             trig.style.backgroundImage = 'none';
-             trig.style.backgroundColor = meta.hex;
-          }
-      }
     }
     const persist = (() => { let t; return () => { clearTimeout(t); t = setTimeout(saveAppState, 120); }; })();
 
@@ -664,7 +582,6 @@
           if (eraserSizeInput) eraserSizeInput.value = eraserRadius;
           if (eraserSizeLabel) eraserSizeLabel.textContent = eraserRadius;
         }
-        if (typeof s.mode === 'string') mode = s.mode;
         if (s.view && typeof s.view.s === 'number') view = s.view;
         if (typeof s.usedSortDesc === 'boolean') {
           usedSortDesc = s.usedSortDesc;
@@ -1188,20 +1105,11 @@
       return id;
     }
 
-    function updateSheets(activeId) {
-      const tab = activeId || detectCurrentTab();
-      // Panels should be visible if their tab is active.
-      // Mobile minimization is handled by the .minimized class, not .hidden.
-      if (orgSheet) orgSheet.classList.toggle('hidden', tab !== '#tab-organic');
-      if (claSheet) claSheet.classList.toggle('hidden', tab !== '#tab-classic');
-      
-      // Ensure Dock is visible on both tabs (content managed by setTab)
-      const dock = document.getElementById('mobile-tabbar');
-      if (dock) dock.style.display = 'flex';
-      const dockOrg = document.getElementById('dock-organic');
-      const dockCla = document.getElementById('dock-classic');
-      dockOrg?.classList.toggle('hidden', tab === '#tab-classic');
-      dockCla?.classList.toggle('hidden', tab !== '#tab-classic');
+    function updateSheets() {
+      const tab = detectCurrentTab();
+      const hide = !window.matchMedia('(min-width: 1024px)').matches && document.body?.dataset?.controlsHidden === '1';
+      if (orgSheet) orgSheet.classList.toggle('hidden', hide || tab !== '#tab-organic');
+      if (claSheet) claSheet.classList.toggle('hidden', hide || tab !== '#tab-classic');
     }
 
     async function exportPng() {
@@ -1333,7 +1241,6 @@
       const worldH = ch / view.s;
       view.tx = (worldW - w) * 0.5 - box.minX;
       view.ty = (worldH - h) * 0.5 - box.minY;
-      hasFittedView = true;
     }
 
     function balloonScreenBounds(b) {
@@ -1518,6 +1425,7 @@
       window.syncAppShine(on);
     });
 
+    mode = 'draw'; // force default tool on load
     renderAllowedPalette();
     resizeCanvas();
     loadFromUrl();
@@ -1561,17 +1469,12 @@
       if (!panel) return;
       const stacks = Array.from(panel.querySelectorAll('.control-stack'));
       if (!stacks.length) return;
-      
-      // If we passed 'all', show everything (Desktop mode)
-      const showAll = (tabName === 'all');
-      
       stacks.forEach(stack => {
         if (isHidden) {
           stack.style.display = 'none';
         } else {
-          const show = showAll ? true : stack.dataset.mobileTab === target;
-          // Use flex to match CSS .control-stack
-          stack.style.display = show ? 'flex' : 'none';
+          const show = stack.dataset.mobileTab === target;
+          stack.style.display = show ? 'block' : 'none';
         }
       });
     }
@@ -1590,6 +1493,21 @@
     }
     window.__setMobileTab = setMobileTab;
 
+    let floatingNudgeCollapsed = false;
+    function updateFloatingNudge() {
+      const el = document.getElementById('floating-topper-nudge');
+      if (!el) return;
+      const isMobile = !window.matchMedia('(min-width: 1024px)').matches;
+      const classicActive = document.body?.dataset.activeTab === '#tab-classic';
+      const topperActive = document.body?.dataset.topperOverlay === '1';
+      const shouldShow = isMobile && classicActive && topperActive;
+      el.classList.toggle('hidden', !shouldShow);
+      el.classList.toggle('collapsed', floatingNudgeCollapsed);
+      const toggle = document.getElementById('floating-nudge-toggle');
+      if (toggle) toggle.textContent = floatingNudgeCollapsed ? 'Show' : 'Hide';
+    }
+    window.__updateFloatingNudge = updateFloatingNudge;
+
     if (orgSection && claSection && tabBtns.length > 0) {
       let current = '#tab-organic';
 
@@ -1605,11 +1523,8 @@
 
         orgSection.classList.toggle('hidden', id !== '#tab-organic');
         claSection.classList.toggle('hidden', id !== '#tab-classic');
-        updateSheets(id);
-        
-        // Ensure Dock is visible
-        const dock = document.getElementById('mobile-tabbar');
-        if (dock) dock.style.display = 'flex';
+        updateSheets();
+        updateFloatingNudge();
 
         tabBtns.forEach(btn => {
           const active = btn.dataset.target === id;
@@ -1624,7 +1539,9 @@
 
         if (document.body) delete document.body.dataset.controlsHidden;
         setMobileTab(document.body?.dataset?.mobileTab || 'controls');
-        
+        orgSheet?.classList.toggle('hidden', id !== '#tab-organic');
+        claSheet?.classList.toggle('hidden', id !== '#tab-classic');
+
         if (window.updateExportButtonVisibility) window.updateExportButtonVisibility();
       }
 
@@ -1645,232 +1562,55 @@
       setMobileTab(document.body.dataset.mobileTab);
       updateSheets();
       updateMobileStacks(document.body.dataset.mobileTab);
-
-      // Sheet toggle buttons (Hide/Show)
-      document.querySelectorAll('[data-sheet-toggle]').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const id = btn.dataset.sheetToggle;
-          const panel = document.getElementById(id);
-          if (!panel) return;
-          const now = panel.classList.contains('minimized');
-          panel.classList.toggle('minimized', !now);
-        });
-      });
     }
 
     // ===============================
-    // ===== Mobile Dock Logic =======
+    // ===== Mobile bottom tabs ======
     // ===============================
-    (function initMobileDock() {
-        if (window.__dockInit) return;
-        window.__dockInit = true;
+    (function initMobileTabs() {
+      const buttons = Array.from(document.querySelectorAll('#mobile-tabbar .mobile-tab-btn'));
+      if (!buttons.length) return;
 
-        const dockOrganic = document.getElementById('dock-organic');
-        const dockClassic = document.getElementById('dock-classic');
-        const patternBtns = Array.from(document.querySelectorAll('.classic-pattern-btn'));
-        const variantBtns = Array.from(document.querySelectorAll('.classic-variant-btn'));
-        const topperBtns = Array.from(document.querySelectorAll('.classic-topper-btn'));
-        const drawerPattern = document.getElementById('classic-drawer-pattern');
-        const drawerColors  = document.getElementById('classic-drawer-colors');
-
-        function openColorsPanel() {
-            const isMobile = window.matchMedia('(max-width: 1023px)').matches;
-            if (isMobile) setMobileTab('colors');
-            const tab = detectCurrentTab();
-            const panel = tab === '#tab-classic'
-              ? document.getElementById('classic-controls-panel')
-              : document.getElementById('controls-panel');
-            if (isMobile) panel?.classList.remove('minimized');
-        }
-
-        const openOrganicPanel = (tab = 'controls') => {
-          document.body.dataset.mobileTab = tab;
-          const panel = document.getElementById('controls-panel');
-          panel?.classList.remove('minimized');
-          updateSheets('#tab-organic');
-          updateMobileStacks(tab);
-        };
-
-        const closeClassicDrawers = () => {
-          drawerPattern?.classList.add('hidden');
-          drawerColors?.classList.add('hidden');
-          activeClassicMenu = null;
-        };
-
-        const openDrawer = (which) => {
-          closeClassicDrawers();
-          if (which === 'pattern') drawerPattern?.classList.remove('hidden');
-          if (which === 'colors') drawerColors?.classList.remove('hidden');
-          activeClassicMenu = which;
-        };
-
-        function syncDockGroup() {
-            const tab = detectCurrentTab();
-            dockOrganic?.classList.toggle('hidden', tab === '#tab-classic');
-            dockClassic?.classList.toggle('hidden', tab !== '#tab-classic');
-        }
-
-        const currentPatternParts = () => {
-          const sel = document.getElementById('classic-pattern');
-          const val = sel?.value || 'Arch 4';
-          const isArch = val.toLowerCase().includes('arch');
-          const variant = val.includes('5') ? '5' : '4';
-          return { base: isArch ? 'Arch' : 'Column', variant };
-        };
-
-        let activeClassicMenu = null;
-
-        const toggleClassicMenu = (target) => {
-          const panel = document.getElementById('classic-controls-panel');
-          const isMobile = window.matchMedia('(max-width: 1023px)').matches;
-          if (!panel) return;
-
-          const alreadyOpen = activeClassicMenu === target && isMobile && !panel.classList.contains('minimized');
-          if (alreadyOpen) {
-            closeClassicDrawers();
-            panel.classList.add('minimized');
-            patternBtns.forEach(btn => btn.classList.remove('active'));
-            topperBtns.forEach(btn => btn.classList.remove('active'));
-            return;
+      buttons.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const tab = btn.dataset.mobileTab || 'controls';
+          const panel = (!document.getElementById('tab-classic')?.classList.contains('hidden')
+            ? document.getElementById('classic-controls-panel')
+            : document.getElementById('controls-panel'));
+            
+          const currentTab = document.body.dataset.mobileTab;
+          
+          if (tab === currentTab) {
+              // Toggle minimized state
+              panel.classList.toggle('minimized');
+          } else {
+              // Switch tab and ensure expanded
+              panel.classList.remove('minimized');
+              setMobileTab(tab);
+              panel.scrollTop = 0;
           }
-
-          activeClassicMenu = target;
-          panel.classList.remove('minimized');
-          if (isMobile) setMobileTab(target === 'colors' ? 'colors' : 'controls');
-
-          patternBtns.forEach(btn => btn.classList.toggle('active', target === 'pattern' && btn.dataset.patternBase === currentPatternParts().base));
-          topperBtns.forEach(btn => btn.classList.toggle('active', target === 'topper'));
-
-          if (target === 'pattern') openDrawer('pattern');
-          else if (target === 'colors') openDrawer('colors');
-        };
-
-        const applyPattern = (base, variant) => {
-          const sel = document.getElementById('classic-pattern');
-          if (!sel) return;
-          const target = `${base} ${variant}`;
-          if (sel.value !== target) sel.value = target;
-          sel.dispatchEvent(new Event('change', { bubbles: true }));
-        };
-
-        const refreshClassicButtons = () => {
-          const { base } = currentPatternParts();
-          const { variant } = currentPatternParts();
-          const topperOn = !!document.getElementById('classic-topper-enabled')?.checked;
-          patternBtns.forEach(btn => {
-            const b = (btn.dataset.patternBase || '').toLowerCase();
-            const active = base.toLowerCase() === b;
-            btn.classList.toggle('active', active);
-            btn.setAttribute('aria-pressed', String(active));
-          });
-          variantBtns.forEach(btn => {
-            const active = btn.dataset.patternVariant === variant;
-            btn.classList.toggle('active', active);
-            btn.setAttribute('aria-pressed', String(active));
-          });
-          topperBtns.forEach(btn => {
-            btn.classList.toggle('active', topperOn);
-            btn.setAttribute('aria-pressed', String(topperOn));
-          });
-        };
-
-        // Organic bindings
-        document.getElementById('dock-draw')?.addEventListener('click', () => {
-          setMode('draw');
-          openOrganicPanel('controls');
-        });
-        document.getElementById('dock-erase')?.addEventListener('click', () => {
-          setMode('erase');
-          openOrganicPanel('controls');
-        });
-        document.getElementById('dock-select')?.addEventListener('click', () => {
-          setMode('select');
-          openOrganicPanel('controls');
-        });
-        document.getElementById('dock-picker')?.addEventListener('click', () => {
-             if (mode === 'eyedropper') setMode('draw');
-             else setMode('eyedropper');
-             openOrganicPanel('controls');
-        });
-        document.getElementById('dock-color-trigger')?.addEventListener('click', () => {
-          const isMobile = window.matchMedia('(max-width: 1023px)').matches;
-          if (isMobile) openOrganicPanel('colors');
-          else openColorsPanel();
         });
+      });
 
-        // Classic bindings
-        patternBtns.forEach(btn => {
-          btn.addEventListener('click', () => {
-            const { variant } = currentPatternParts();
-            const base = btn.dataset.patternBase || 'Arch';
-            applyPattern(base, variant);
-            toggleClassicMenu('pattern');
-            closeClassicDrawers();
-            refreshClassicButtons();
-          });
-        });
-        variantBtns.forEach(btn => {
-          btn.addEventListener('click', () => {
-            const { base } = currentPatternParts();
-            const variant = btn.dataset.patternVariant || '4';
-            applyPattern(base, variant);
-            toggleClassicMenu('pattern');
-            closeClassicDrawers();
-            refreshClassicButtons();
-          });
-        });
-        topperBtns.forEach(btn => {
-          btn.addEventListener('click', () => {
-            const cb = document.getElementById('classic-topper-enabled');
-            if (!cb) return;
-            cb.checked = !cb.checked;
-            cb.dispatchEvent(new Event('change', { bubbles: true }));
-            toggleClassicMenu('topper');
-            refreshClassicButtons();
-          });
-        });
-        document.getElementById('dock-classic-color')?.addEventListener('click', () => {
-          if (activeClassicMenu === 'colors') closeClassicDrawers();
-          else toggleClassicMenu('colors');
-          refreshClassicButtons();
-        });
+      const mq = window.matchMedia('(min-width: 1024px)');
+      const sync = () => {
+        if (mq.matches) {
+          document.body?.removeAttribute('data-mobile-tab');
+          updateMobileStacks('controls'); // keep controls visible on desktop
+        } else {
+          setMobileTab(document.body?.dataset?.mobileTab || 'controls');
+        }
+        updateFloatingNudge();
+      };
+      mq.addEventListener('change', sync);
+      setMobileTab(document.body?.dataset?.mobileTab || 'controls');
+      sync();
 
-        // Header Export
-        document.getElementById('header-export')?.addEventListener('click', () => exportPng());
-        document.getElementById('header-undo')?.addEventListener('click', undo);
-        document.getElementById('header-redo')?.addEventListener('click', redo);
-
-        const mq = window.matchMedia('(min-width: 1024px)');
-        const sync = () => {
-            if (mq.matches) {
-            document.body?.removeAttribute('data-mobile-tab');
-            updateMobileStacks('all');
-            // Remove minimized on desktop just in case
-            const orgPanel = document.getElementById('controls-panel');
-            const claPanel = document.getElementById('classic-controls-panel');
-            if (orgPanel) { orgPanel.classList.remove('minimized'); orgPanel.style.display = ''; }
-            if (claPanel) { claPanel.classList.remove('minimized'); claPanel.style.display = ''; }
-            } else {
-            setMobileTab(document.body?.dataset?.mobileTab || 'controls');
-            // Start minimized on mobile
-            document.getElementById('controls-panel')?.classList.add('minimized');
-            document.getElementById('classic-controls-panel')?.classList.add('minimized');
-            }
-            syncDockGroup();
-            refreshClassicButtons();
-        };
-        mq.addEventListener('change', sync);
-        setMobileTab(document.body?.dataset?.mobileTab || 'controls');
-        sync();
-
-        // keep dock in sync when tab switches
-        document.querySelectorAll('#mode-tabs .tab-btn').forEach(btn => {
-          btn.addEventListener('click', () => setTimeout(() => { syncDockGroup(); refreshClassicButtons(); }, 50));
-        });
-
-        document.getElementById('classic-pattern')?.addEventListener('change', refreshClassicButtons);
-        document.getElementById('classic-topper-enabled')?.addEventListener('change', refreshClassicButtons);
-        refreshClassicButtons();
+      const nudgeToggle = document.getElementById('floating-nudge-toggle');
+      nudgeToggle?.addEventListener('click', () => {
+        floatingNudgeCollapsed = !floatingNudgeCollapsed;
+        updateFloatingNudge();
+      });
     })();
   });
 })();
diff --git a/style.css b/style.css
index 0f3cd75..e57f464 100644
--- a/style.css
+++ b/style.css
@@ -160,6 +160,46 @@ body { color: #1f2937; }
   transform: scale(1.1);
 }
 
+.topper-type-group {
+  display: flex;
+  gap: .5rem;
+  flex-wrap: wrap;
+}
+.topper-type-btn {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .4rem;
+}
+.topper-type-btn i { font-size: 1rem; }
+
+.floating-nudge {
+  position: fixed;
+  right: 0.9rem;
+  bottom: 4.6rem;
+  background: rgba(255,255,255,0.95);
+  border: 1px solid rgba(148,163,184,0.3);
+  border-radius: 1rem;
+  padding: 0.75rem;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
+  width: 210px;
+  z-index: 35;
+}
+.floating-nudge-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .5rem;
+  margin-bottom: .35rem;
+}
+.floating-nudge-body.collapsed { display: none; }
+.floating-nudge.collapsed .floating-nudge-body { display: none; }
+.floating-nudge.collapsed #floating-nudge-toggle { opacity: 0.8; }
+@media (min-width: 1024px) {
+  .floating-nudge { display: none !important; }
+}
+
 .slot-label {
   font-weight: 600;
   color: #4b5563;
@@ -177,8 +217,8 @@ body { color: #1f2937; }
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,0.6);
-  border-radius: 0.75rem;
-  padding: 0.75rem;
+  border-radius: 1rem;
+  padding: 1rem;
   box-shadow: 0 4px 20px rgba(0,0,0,0.03);
 }
 .control-stack {
@@ -198,15 +238,15 @@ body { color: #1f2937; }
   -webkit-backdrop-filter: blur(16px);
   border-top: 1px solid rgba(255,255,255,0.5);
   box-shadow: 0 -4px 30px rgba(0,0,0,0.08);
-  border-radius: 1.25rem 1.25rem 0 0;
-  padding: 1rem 0.75rem;
+  border-radius: 1.5rem 1.5rem 0 0;
+  padding: 1.25rem 1rem;
   overflow-y: auto;
   z-index: 30;
   -webkit-overflow-scrolling: touch;
   transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 }
 .control-sheet.hidden { display: none; }
-/* .control-sheet.minimized removed from global scope to fix desktop visibility */
+.control-sheet.minimized { transform: translateY(100%); }
 .panel-title {
   font-weight: 900;
   font-size: 1.1rem;
@@ -238,9 +278,8 @@ body { color: #1f2937; }
 
 @media (max-width: 1023px) {
   body { padding-bottom: 88px; }
-  html, body { height: 100%; }
+  html, body { height: 100%; overflow: hidden; }
 
-  .control-sheet.minimized { transform: translateY(100%); }
   .control-sheet .control-stack { display: none; }
   body[data-mobile-tab="controls"] #controls-panel [data-mobile-tab="controls"],
   body[data-mobile-tab="colors"] #controls-panel [data-mobile-tab="colors"],
@@ -254,187 +293,52 @@ body { color: #1f2937; }
 
 .mobile-tabbar {
   position: fixed;
-  left: 0;
-  width: 100%;
+  inset-inline: 0;
   bottom: 0;
   display: flex;
   justify-content: space-around;
-  align-items: stretch;
-  padding: .55rem .85rem .8rem;
-  background: rgba(15, 23, 42, 0.95);
+  align-items: center;
+  padding: .6rem .9rem .9rem;
+  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(224,242,254,0.92));
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  color: #fff;
-  z-index: 9999;
+  color: #0f172a;
+  z-index: 40;
+  gap: .4rem;
+  box-shadow: 0 -6px 30px rgba(15, 23, 42, 0.12);
+  border-top: 1px solid rgba(148, 163, 184, 0.25);
+}
+.mobile-tabbar .mobile-tab-btn {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   gap: .35rem;
-  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
-}
-.mobile-tool-btn {
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.75rem;
-  color: #94a3b8;
-  transition: all 0.2s ease;
-}
-.mobile-tool-btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
-.mobile-tool-btn.active {
-  background: rgba(255,255,255,0.1);
-  color: #38bdf8; /* Sky blue */
-}
-.mobile-tool-btn:active { transform: scale(0.9); }
-#dock-classic { width: 100%; }
-#dock-organic { align-items: center; }
-.classic-drawer {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 4.2rem;
-  z-index: 9500;
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  padding: 0.75rem 1rem;
-  background: rgba(15,23,42,0.96);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  border-top: 1px solid rgba(255,255,255,0.08);
-  box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
-}
-.classic-drawer.hidden { display: none; }
-.drawer-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.drawer-label { color: #cbd5e1; font-weight: 700; font-size: 0.9rem; }
-.drawer-pill-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
-.dial-row { flex-direction: column; align-items: flex-start; }
-.topper-row { gap: 0.75rem; }
-.topper-inline { display: flex; align-items: center; gap: 0.45rem; }
-.select-xs { padding: 0.3rem 0.45rem; font-size: 0.85rem; height: 2.2rem; }
-.nudge-pad { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
-.topper-size-wrap { display: flex; flex-direction: column; gap: 0.1rem; min-width: 120px; }
-.topper-size-wrap input[type=range] { accent-color: #2563eb; }
-.dock-color-btn {
-  width: 3rem;
-  height: 3rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  border: 4px solid #fff;
-  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
-  transition: transform 0.15s ease;
-}
-.dock-color-btn:active { transform: scale(0.95); }
-.dock-variant-btn {
-  min-width: 2.4rem;
-  height: 2.4rem;
-  padding: 0 .5rem;
-  border-radius: 0.65rem;
-  background: rgba(255,255,255,0.08);
-  color: #e2e8f0;
-  border: 1px solid rgba(255,255,255,0.15);
-  font-weight: 700;
-  font-size: .95rem;
-  transition: all 0.2s ease;
-}
-.dock-variant-btn.active {
-  background: #38bdf8;
-  color: #0f172a;
-  border-color: #38bdf8;
-  box-shadow: 0 6px 18px rgba(56,189,248,0.35);
-}
-.dock-variant-btn:active { transform: scale(0.95); }
-.dock-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 0.9rem;
-  padding: 0.4rem 0.65rem;
-}
-.dock-label {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: #cbd5e1;
-}
-.dock-pill-group {
-  display: flex;
-  gap: 0.4rem;
-  flex: 1;
-  min-width: 0;
-}
-.dock-pill {
-  padding: 0.5rem 0.8rem;
-  border-radius: 0.8rem;
-  background: rgba(255,255,255,0.08);
-  color: #e2e8f0;
-  border: 1px solid rgba(255,255,255,0.14);
-  font-weight: 700;
-  font-size: 0.95rem;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-.dock-pill:hover { background: rgba(255,255,255,0.14); }
-.dock-pill.active {
-  background: #38bdf8;
-  color: #0f172a;
-  border-color: #38bdf8;
-  box-shadow: 0 6px 18px rgba(56,189,248,0.35);
-}
-.dock-pill:active { transform: scale(0.96); }
-.classic-quick-label { font-weight: 700; color: #334155; font-size: 0.9rem; }
-.btn-nudge {
-  background: #0f172a;
-  color: #fff;
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 0.6rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-.btn-nudge:active { transform: translateY(1px) scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
-.length-dial {
-  display: flex;
-  gap: 0.5rem;
-  overflow-x: auto;
-  padding: 0.35rem 0.25rem;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  position: relative;
-  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
-}
-.length-dial .dock-pill {
-  scroll-snap-align: center;
-  min-width: 72px;
   text-align: center;
-  transition: transform 0.15s ease, box-shadow 0.2s ease;
+  padding: .7rem .5rem;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255,255,255,0.8);
+  color: #1d4ed8;
+  font-weight: 700;
+  font-size: .9rem;
+  letter-spacing: 0.01em;
+  transition: all 0.2s ease;
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
 }
-.length-dial .dock-pill.active {
-  transform: scale(1.02);
-  box-shadow: 0 6px 18px rgba(37,99,235,0.28);
+.mobile-tabbar .mobile-tab-icon {
+  font-size: 1.2rem;
+  line-height: 1;
+  display: block;
+  flex-shrink: 0;
 }
-.length-dial .dock-pill.ping {
-  animation: tap-pulse 260ms ease;
+.mobile-tabbar .mobile-tab-btn[aria-pressed="true"] {
+  background: linear-gradient(135deg, #2563eb, #0ea5e9);
+  border-color: rgba(37, 99, 235, 0.2);
+  color: #fff;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
+  transform: translateY(-2px);
 }
-@keyframes tap-pulse {
-  0% { transform: scale(0.95); }
-  50% { transform: scale(1.08); }
-  100% { transform: scale(1.0); }
-}
-
-/* Removed old mobile-tab-btn styles as they are replaced by the new layout */
 
 
 @media (min-width: 1024px) {