break out tile renderer

ui/src/App.vue

@@ -3,6 +3,13 @@
     <div ref="mapContainer" class="map-container"></div>
     <canvas ref="threeCanvas" class="three-canvas"></canvas>
     
+    <ShadingSandbox 
+      :visible="sandboxVisible"
+      ref="ShadingSandbox"
+      @close="sandboxVisible = false"
+      @renderComplete="onRenderComplete"
+      @error="onRenderError"
+    />
     <div class="layer-controls">
       <div class="control-section">
         <label>Base Map:</label>
@@ -20,6 +27,10 @@
           Show Lidar
         </label>
       </div>
+      
+      <div class="control-section">
+        <button class="sandbox-btn" @click="openSandbox">Open Shading Sandbox</button>
+      </div>
     </div>
   </div>
 </template>
@@ -29,12 +40,17 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import * as THREE from 'three';
+import ShadingSandbox from './ShadingSandbox.vue';
 
 export default {
   name: 'App',
+  components: {
+    ShadingSandbox
+  },
   setup() {
     const mapContainer = ref(null);
     const threeCanvas = ref(null);
+    const ShadingSandbox = ref(null);
     let map = null;
     let scene = null;
     let camera = null;
@@ -44,6 +60,10 @@ export default {
     const showOctagon = ref(true);
     const showLidar = ref(true);
     
+    const sandboxVisible = ref(false);
+    const currentTileData = ref(null);
+    const tileCache = ref({});
+
     // Newark Octagon coordinates (converted from DMS to decimal)
     const octagonCoords = [
       [-82.44133, 40.05431], // 40°03'15.5"N 82°26'28.8"W
@@ -275,6 +295,9 @@ export default {
           console.log(`Loading ${tileName}...`);
           const data = await parseMoundFile(`/tiles/${tileName}.mound`);
           
+          // Cache the tile data for sandbox use
+          tileCache.value[tileName] = data;
+          
           console.log(`${tileName} bounds:`, data.bounds);
           console.log(`First few positions:`, data.positions.slice(0, 15));
           
@@ -307,6 +330,34 @@ export default {
       updateThreeCamera();
     };
 
+    const openSandbox = () => {
+      // Open sandbox with first available tile
+      const firstTile = Object.keys(tileCache.value)[0];
+      if (firstTile) {
+        currentTileData.value = tileCache.value[firstTile];
+        sandboxVisible.value = true;
+        
+        // Load tile data into renderer after it mounts
+        setTimeout(() => {
+          if (ShadingSandbox.value) {
+            ShadingSandbox.value.loadTileData(currentTileData.value);
+          }
+        }, 100);
+      }
+    };
+    
+    const onRenderComplete = (data) => {
+      console.log('Render complete:', {
+        size: data.size,
+        renderTime: data.renderTime,
+        settings: data.settings
+      });
+    };
+    
+    const onRenderError = (err) => {
+      console.error('Renderer error:', err);
+    };
+
     onUnmounted(() => {
       window.removeEventListener('resize', handleResize);
       if (renderer) {
@@ -317,12 +368,18 @@ export default {
     return {
       mapContainer,
       threeCanvas,
+      ShadingSandbox,
       baseLayer,
       showOctagon,
       showLidar,
       updateBaseLayer,
       toggleOctagon,
-      toggleLidar
+      toggleLidar,
+      sandboxVisible,
+      currentTileData,
+      openSandbox,
+      onRenderComplete,
+      onRenderError
     };
   }
 };
@@ -392,4 +449,26 @@ export default {
   margin-right: 8px;
   cursor: pointer;
 }
+
+.sandbox-btn {
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  background: #4A9EFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sandbox-btn:hover {
+  background: #2E8FE3;
+}
+
+.sandbox-btn:active {
+  transform: scale(0.98);
+}
 </style>

ui/src/ShadingSandbox.vue

@@ -0,0 +1,889 @@
+<template>
+  <div v-if="visible" class="modal-container">
+    <div class="modal-header">
+      <h2>Shading Sandbox</h2>
+      <button class="close-btn" @click="close">✕</button>
+    </div>
+    
+    <div class="tile-renderer">
+        <div class="renderer-container">
+          <canvas ref="canvasRef" class="render-canvas"></canvas>
+        </div>
+
+        <div class="controls-panel">
+      <div class="control-section">
+        <h3>Lighting</h3>
+        
+        <div class="control-group">
+          <label>Azimuth</label>
+          <input 
+            v-model.number="settings.azimuth" 
+            type="range" 
+            min="0" 
+            max="360" 
+            step="1"
+            @input="updateScene"
+          />
+          <span class="value">{{ settings.azimuth }}°</span>
+        </div>
+
+        <div class="control-group">
+          <label>Altitude</label>
+          <input 
+            v-model.number="settings.altitude" 
+            type="range" 
+            min="0" 
+            max="90" 
+            step="1"
+            @input="updateScene"
+          />
+          <span class="value">{{ settings.altitude }}°</span>
+        </div>
+
+        <div class="control-group">
+          <label>Intensity</label>
+          <input 
+            v-model.number="settings.intensity" 
+            type="range" 
+            min="0" 
+            max="2" 
+            step="0.1"
+            @input="updateScene"
+          />
+          <span class="value">{{ settings.intensity.toFixed(1) }}</span>
+        </div>
+      </div>
+
+      <div class="control-section">
+        <h3>Terrain</h3>
+        
+        <div class="control-group">
+          <label>Height Exaggeration</label>
+          <input 
+            v-model.number="settings.heightScale" 
+            type="range" 
+            min="0.1" 
+            max="20" 
+            step="0.1"
+            @input="updateHeightScale"
+          />
+          <span class="value">{{ settings.heightScale.toFixed(1) }}x</span>
+        </div>
+
+        <div class="control-group">
+          <label>Terrain Color</label>
+          <div class="color-input">
+            <input 
+              type="color"
+              :value="colorToHex(settings.terrainColor)"
+              @input="updateColor"
+            />
+            <span class="value">{{ colorToHex(settings.terrainColor) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="control-section">
+        <h3>Render</h3>
+        
+        <div class="quality-buttons">
+          <button 
+            v-for="preset in qualityPresets"
+            :key="preset.size"
+            :class="['quality-btn', { active: selectedQuality === preset.size }]"
+            @click="selectedQuality = preset.size"
+          >
+            {{ preset.label }}
+          </button>
+        </div>
+
+        <button 
+          class="render-btn"
+          @click="renderTile"
+          :disabled="!tileLoaded || isRendering"
+        >
+          {{ isRendering ? 'Rendering...' : 'Render Tile' }}
+        </button>
+
+        <button 
+          v-if="lastRenderedImage"
+          class="download-btn"
+          @click="downloadLastRender"
+        >
+          Download Last Render
+        </button>
+      </div>
+
+      <div v-if="renderStats" class="stats">
+        <div class="stat">
+          <span class="stat-label">Points:</span>
+          <span class="stat-value">{{ renderStats.points.toLocaleString() }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Triangles:</span>
+          <span class="stat-value">{{ renderStats.triangles.toLocaleString() }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Last render:</span>
+          <span class="stat-value">{{ renderStats.lastRenderTime }}ms</span>
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import * as THREE from 'three';
+
+// Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  initialSettings: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// Emits
+const emit = defineEmits(['close', 'renderComplete', 'error']);
+
+// Refs
+const canvasRef = ref(null);
+const tileLoaded = ref(false);
+const isRendering = ref(false);
+const lastRenderedImage = ref(null);
+const selectedQuality = ref(1024);
+
+// Settings
+const settings = reactive({
+  azimuth: 90,
+  altitude: 60,
+  intensity: 1.2,
+  heightScale: 3,
+  terrainColor: "#9a9996",
+  ...props.initialSettings
+});
+
+// Quality presets
+const qualityPresets = [
+  { size: 512, label: '512px' },
+  { size: 1024, label: '1K' },
+  { size: 2048, label: '2K' },
+  { size: 4096, label: '4K' }
+];
+
+// Stats
+const renderStats = ref(null);
+
+// Three.js state
+let scene = null;
+let camera = null;
+let renderer = null;
+let mesh = null;
+let directionalLight = null;
+let ambientLight = null;
+let animationId = null;
+
+// Geometry cache for height exaggeration
+let geometryCache = null;
+
+// Initialize Three.js
+const initThreeJS = () => {
+  if (!canvasRef.value) return;
+
+  // Scene
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x000000);
+
+  // Orthographic camera (will be configured when tile loads)
+  camera = new THREE.OrthographicCamera(-5, 5, 5, -5, 0.1, 1000);
+  camera.position.set(0, 0, 100);
+  camera.lookAt(0, 0, 0);
+
+  // Renderer
+  renderer = new THREE.WebGLRenderer({
+    canvas: canvasRef.value,
+    antialias: true,
+    preserveDrawingBuffer: true
+  });
+  
+  const width = canvasRef.value.clientWidth || 800;
+  const height = canvasRef.value.clientHeight || 800;
+  const size = Math.min(width, height);
+  renderer.setSize(size,size);
+  renderer.setPixelRatio(window.devicePixelRatio);
+
+  // Lights
+  ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+  scene.add(ambientLight);
+
+  directionalLight = new THREE.DirectionalLight(0xffffff, settings.intensity);
+  scene.add(directionalLight);
+
+  updateLightPosition();
+
+  // Animation loop
+  const animate = () => {
+    animationId = requestAnimationFrame(animate);
+    if (renderer && scene && camera) {
+      renderer.render(scene, camera);
+    }
+  };
+  animate();
+};
+
+// Load tile data
+const loadTileData = (tileData) => {
+  if (!scene) {
+    console.error('Three.js not initialized');
+    return false;
+  }
+
+  // Remove old mesh
+  if (mesh) {
+    scene.remove(mesh);
+    if (mesh.geometry) mesh.geometry.dispose();
+    if (mesh.material) mesh.material.dispose();
+    mesh = null;
+  }
+
+  try {
+    // Calculate bounds center
+    const centerX = (tileData.bounds.minX + tileData.bounds.maxX) / 2;
+    const centerY = (tileData.bounds.minY + tileData.bounds.maxY) / 2;
+    const centerZ = (tileData.bounds.minZ + tileData.bounds.maxZ) / 2;
+
+    // Calculate spans
+    const spanX = tileData.bounds.maxX - tileData.bounds.minX;
+    const spanY = tileData.bounds.maxY - tileData.bounds.minY;
+    const spanZ = tileData.bounds.maxZ - tileData.bounds.minZ;
+    const maxSpan = Math.max(spanX, spanY);
+
+    // Normalize XY to fit in a 10-unit box
+    const normalizeScale = 10 / maxSpan;
+
+    // CRITICAL: Use App2's adaptive Z scaling
+    // This makes Z proportional to actual elevation variation
+    const zScale = normalizeScale * (maxSpan * 0.1) / spanZ;
+
+    console.log('Tile scaling:', {
+      spanX: spanX.toFixed(2),
+      spanY: spanY.toFixed(2),
+      spanZ: spanZ.toFixed(2),
+      normalizeScale: normalizeScale.toFixed(4),
+      zScale: zScale.toFixed(4)
+    });
+
+    // Transform positions
+    const transformedPositions = new Float32Array(tileData.positions.length);
+    for (let i = 0; i < tileData.positions.length; i += 3) {
+      transformedPositions[i]     = (tileData.positions[i]     - centerX) * normalizeScale;
+      transformedPositions[i + 1] = (tileData.positions[i + 1] - centerY) * normalizeScale;
+      transformedPositions[i + 2] = (tileData.positions[i + 2] - centerZ) * zScale;
+    }
+
+    // Create geometry
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(transformedPositions, 3));
+    geometry.setIndex(new THREE.BufferAttribute(tileData.indices, 1));
+    geometry.computeVertexNormals();
+
+    // Cache base Z values for height exaggeration (matching App2's approach)
+    const baseZ = new Float32Array(tileData.positions.length);
+    for (let i = 0; i < tileData.positions.length; i += 3) {
+      baseZ[i] = 0;
+      baseZ[i + 1] = 0;
+      baseZ[i + 2] = transformedPositions[i + 2]; // Only Z values
+    }
+
+    geometryCache = {
+      geometry,
+      baseZ,
+      spanZ,
+      zScale
+    };
+
+    // Create material and mesh
+    const material = new THREE.MeshLambertMaterial({
+      color: settings.terrainColor,
+      side: THREE.DoubleSide
+    });
+
+    mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    // Configure camera frustum for orthographic view
+    // We want to see the 10-unit box with some padding
+    const aspect = canvasRef.value.clientWidth / canvasRef.value.clientHeight;
+    const viewSize = 6; // 10-unit terrain + padding
+    camera.left = -viewSize * aspect;
+    camera.right = viewSize * aspect;
+    camera.top = viewSize;
+    camera.bottom = -viewSize;
+    
+    // Adjust near/far to accommodate height exaggeration
+    // Terrain is centered at Z=0, extends ±(spanZ * zScale / 2) in base form
+    const maxZExtent = (spanZ * zScale / 2) * 20; // Max exaggeration
+    camera.near = 0.1;
+    camera.far = 100 + maxZExtent * 2;
+    camera.updateProjectionMatrix();
+
+    // Update stats
+    renderStats.value = {
+      points: tileData.pointCount,
+      triangles: tileData.triangleCount,
+      lastRenderTime: 0
+    };
+
+    tileLoaded.value = true;
+    return true;
+
+  } catch (err) {
+    console.error('Failed to load tile:', err);
+    emit('error', err);
+    return false;
+  }
+};
+
+// Update light position
+const updateLightPosition = () => {
+  if (!directionalLight) return;
+
+  const azimuthRad = (settings.azimuth * Math.PI) / 180;
+  const altitudeRad = (settings.altitude * Math.PI) / 180;
+
+  const distance = 50;
+  const x = Math.cos(azimuthRad) * Math.cos(altitudeRad) * distance;
+  const y = Math.sin(azimuthRad) * Math.cos(altitudeRad) * distance;
+  const z = Math.sin(altitudeRad) * distance;
+
+  directionalLight.position.set(x, y, z);
+  directionalLight.intensity = settings.intensity;
+};
+
+// Update height scale
+const updateHeightScale = () => {
+  if (!geometryCache || !mesh) return;
+
+  const positions = geometryCache.geometry.attributes.position.array;
+  const exaggeration = settings.heightScale;
+
+  // Apply exaggeration to Z values only (matching App2's approach)
+  for (let i = 2; i < positions.length; i += 3) {
+    positions[i] = geometryCache.baseZ[i] * exaggeration;
+  }
+
+  geometryCache.geometry.attributes.position.needsUpdate = true;
+  geometryCache.geometry.computeVertexNormals();
+};
+
+// Update scene (for real-time preview)
+const updateScene = () => {
+  updateLightPosition();
+};
+
+// Color conversion utilities
+const colorToHex = (color) => {
+  return '#' + color.toString(16).padStart(6, '0');
+};
+
+const updateColor = (e) => {
+  settings.terrainColor = parseInt(e.target.value.replace('#', ''), 16);
+  if (mesh && mesh.material) {
+    mesh.material.color.setHex(settings.terrainColor);
+  }
+};
+
+// Render tile at specific resolution
+const renderTile = async () => {
+  if (!renderer || !scene || !camera || !mesh) {
+    console.error('Cannot render - scene not ready');
+    return null;
+  }
+
+  isRendering.value = true;
+  const startTime = performance.now();
+
+  try {
+    const size = selectedQuality.value;
+
+    // Store original size
+    const originalWidth = renderer.domElement.width;
+    const originalHeight = renderer.domElement.height;
+    const originalPixelRatio = renderer.getPixelRatio();
+
+    // Set render size (square)
+    renderer.setSize(size, size);
+    renderer.setPixelRatio(1); // No pixel ratio multiplier for export
+
+    // Update camera aspect for square
+    const aspect = 1;
+    const viewSize = 6;
+    camera.left = -viewSize * aspect;
+    camera.right = viewSize * aspect;
+    camera.top = viewSize;
+    camera.bottom = -viewSize;
+    camera.updateProjectionMatrix();
+
+    // Render
+    renderer.render(scene, camera);
+
+    // Extract image
+    const dataURL = renderer.domElement.toDataURL('image/png');
+    lastRenderedImage.value = dataURL;
+
+    // Restore original size
+    renderer.setSize(originalWidth / originalPixelRatio, originalHeight / originalPixelRatio);
+    renderer.setPixelRatio(originalPixelRatio);
+
+    // Restore camera aspect
+    const canvasAspect = originalWidth / originalHeight;
+    camera.left = -viewSize * canvasAspect;
+    camera.right = viewSize * canvasAspect;
+    camera.top = viewSize;
+    camera.bottom = -viewSize;
+    camera.updateProjectionMatrix();
+
+    const endTime = performance.now();
+    const renderTime = Math.round(endTime - startTime);
+
+    renderStats.value.lastRenderTime = renderTime;
+
+    emit('renderComplete', {
+      dataURL,
+      settings: { ...settings },
+      size,
+      renderTime
+    });
+
+    return dataURL;
+
+  } catch (err) {
+    console.error('Render failed:', err);
+    emit('error', err);
+    return null;
+  } finally {
+    isRendering.value = false;
+  }
+};
+
+// Render a single tile with specific settings at specific resolution
+// Designed to be called repeatedly without setup/teardown overhead
+const renderTileWithSettings = async (tileData, renderSettings, resolution = 1024) => {
+  if (!renderer || !scene || !camera) {
+    console.error('Renderer not initialized');
+    return null;
+  }
+
+  const startTime = performance.now();
+
+  try {
+    // Update settings
+    Object.assign(settings, renderSettings);
+
+    // Load tile
+    const loaded = loadTileData(tileData);
+    if (!loaded) {
+      return { success: false, error: 'Failed to load tile' };
+    }
+
+    // Update scene
+    updateLightPosition();
+    updateHeightScale();
+
+    // Wait a frame for geometry updates
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    // Store original canvas state
+    const originalWidth = renderer.domElement.width;
+    const originalHeight = renderer.domElement.height;
+    const originalPixelRatio = renderer.getPixelRatio();
+
+    // Set render size (square)
+    renderer.setSize(resolution, resolution);
+    renderer.setPixelRatio(1);
+
+    // Update camera for square aspect
+    const aspect = 1;
+    const viewSize = 6;
+    camera.left = -viewSize * aspect;
+    camera.right = viewSize * aspect;
+    camera.top = viewSize;
+    camera.bottom = -viewSize;
+    camera.updateProjectionMatrix();
+
+    // Render
+    renderer.render(scene, camera);
+
+    // Extract image
+    const dataURL = renderer.domElement.toDataURL('image/png');
+
+    // Restore original size
+    renderer.setSize(originalWidth / originalPixelRatio, originalHeight / originalPixelRatio);
+    renderer.setPixelRatio(originalPixelRatio);
+
+    // Restore camera aspect
+    const canvasAspect = originalWidth / originalHeight;
+    camera.left = -viewSize * canvasAspect;
+    camera.right = viewSize * canvasAspect;
+    camera.top = viewSize;
+    camera.bottom = -viewSize;
+    camera.updateProjectionMatrix();
+
+    const endTime = performance.now();
+    const renderTime = Math.round(endTime - startTime);
+
+    return {
+      success: true,
+      dataURL,
+      settings: { ...settings },
+      renderTime
+    };
+
+  } catch (err) {
+    console.error('Render failed:', err);
+    return { success: false, error: err.message };
+  }
+};
+
+// Close modal
+const close = () => {
+  emit('close');
+};
+
+// Download last render
+const downloadLastRender = () => {
+  if (!lastRenderedImage.value) return;
+
+  const link = document.createElement('a');
+  link.download = `tile_${selectedQuality.value}px_${Date.now()}.png`;
+  link.href = lastRenderedImage.value;
+  link.click();
+};
+
+// Cleanup
+const cleanup = () => {
+  if (animationId) {
+    cancelAnimationFrame(animationId);
+  }
+  if (renderer) {
+    renderer.dispose();
+  }
+  if (mesh) {
+    if (mesh.geometry) mesh.geometry.dispose();
+    if (mesh.material) mesh.material.dispose();
+  }
+};
+
+// Lifecycle
+onMounted(() => {
+  if (props.visible) {
+    nextTick(() => {
+      initThreeJS();
+    });
+  }
+});
+
+// Watch for visibility changes
+watch(() => props.visible, (newVal) => {
+  if (newVal && !renderer) {
+    nextTick(() => {
+      initThreeJS();
+    });
+  }
+});
+
+onUnmounted(() => {
+  cleanup();
+});
+
+// Expose API
+defineExpose({
+  loadTileData,
+  renderTile,
+  renderTileWithSettings,
+  updateSettings: (newSettings) => {
+    Object.assign(settings, newSettings);
+    updateLightPosition();
+    updateHeightScale();
+  },
+  getSettings: () => ({ ...settings }),
+  isReady: () => tileLoaded.value
+});
+</script>
+
+<style scoped>
+.modal-container {
+  position: fixed;
+  top: 5vh;
+  left: 5vw;
+  right: 5vw;
+  bottom: 5vh;
+  background: #1a1a1a;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #333;
+  flex-shrink: 0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #fff;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: #888;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #2a2a2a;
+  color: #fff;
+}
+
+.tile-renderer {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  padding: 20px;
+  overflow: hidden;
+  color: #fff;
+}
+
+.renderer-container {
+  flex: 1;
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.render-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.controls-panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow-y: auto;
+  padding: 0 8px;
+}
+
+.control-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.control-section h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #888;
+  border-bottom: 1px solid #333;
+  padding-bottom: 8px;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.control-group label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #aaa;
+}
+
+.control-group input[type="range"] {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: #333;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.control-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #4A9EFF;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
+}
+
+.control-group input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: #4A9EFF;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
+}
+
+.value {
+  font-size: 11px;
+  color: #666;
+  font-variant-numeric: tabular-nums;
+  align-self: flex-end;
+}
+
+.color-input {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-input input[type="color"] {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #333;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.color-input input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 4px;
+}
+
+.color-input input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.quality-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.quality-btn {
+  padding: 10px;
+  background: #2a2a2a;
+  border: 1px solid #333;
+  border-radius: 4px;
+  color: #aaa;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.quality-btn:hover {
+  background: #333;
+  border-color: #444;
+}
+
+.quality-btn.active {
+  background: #4A9EFF;
+  border-color: #4A9EFF;
+  color: #fff;
+}
+
+.render-btn,
+.download-btn {
+  padding: 12px 16px;
+  background: #4A9EFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.render-btn:hover:not(:disabled),
+.download-btn:hover {
+  background: #2E8FE3;
+  box-shadow: 0 0 16px rgba(74, 158, 255, 0.4);
+}
+
+.render-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.download-btn {
+  background: #2a2a2a;
+  border: 1px solid #4A9EFF;
+  color: #4A9EFF;
+}
+
+.download-btn:hover {
+  background: #333;
+  box-shadow: 0 0 16px rgba(74, 158, 255, 0.2);
+}
+
+.stats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: #2a2a2a;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-label {
+  color: #888;
+}
+
+.stat-value {
+  color: #4A9EFF;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+</style>