redesign: complete modern UI overhaul + new features

Design System:
- Full CSS variables design system (bg0-bg4, accent, text0-3, radius, shadows)
- Inter (UI) + JetBrains Mono (numbers/code) + Syne (brand) font stack
- Consistent border, hover, focus, transition styles everywhere
- All global range/input/scrollbar styling in index.css

Layout:
- Blender-style icon rail (48px) on right edge with slide-out panel (260px)
- Panel animates open/close with smooth width transition
- Panel header with title + close button
- Mobile: slide-up drawer (55% height) with tab bar at bottom
- Canvas always fills 100% of remaining viewport

Toolbar:
- Compact, clean — brand / transform tools / transport / lighting / keyframe shortcut
- Active states with accent color background + border
- Styled play button with glow shadow
- Frame counter with monospace font in bg3 chip

ModelsPanel:
- Large drag-and-drop zone with pulse animation on hover
- Grid layout for demo model buttons
- Model list with color dots, anim count badges, hover states
- Inline visibility + remove actions

PropertiesPanel:
- Collapsible sections (Transform / Animations / Keyframes)
- XYZ inputs with colored axis labels, grouped border focus
- Reset Transform button
- Keyframe list with frame navigation

Timeline:
- Diamond-shaped keyframe markers
- Arrow playhead with top indicator
- Settings row for frames/fps presets
- Cleaner ruler with section markers

AnimationPlayer / SkyboxPanel / ExportPanel:
- All fully restyled to match design system
- SkyboxPanel: toggle switch, color grid, upload, URL input
- ExportPanel: stats table, gradient render button, progress bar

src/App.jsx

@@ -1,273 +1,255 @@
 import { useRef, useState, Suspense } from 'react'
-import Scene from './components/Scene'
-import Toolbar from './components/Toolbar'
-import Timeline from './components/Timeline'
-import ModelsPanel from './components/ModelsPanel'
+import Scene          from './components/Scene'
+import Toolbar        from './components/Toolbar'
+import Timeline       from './components/Timeline'
+import ModelsPanel    from './components/ModelsPanel'
 import PropertiesPanel from './components/PropertiesPanel'
-import ExportPanel from './components/ExportPanel'
+import ExportPanel    from './components/ExportPanel'
 import AnimationPlayer from './components/AnimationPlayer'
-import CameraMode from './components/CameraMode'
-import SkyboxPanel from './components/SkyboxPanel'
-import useStore from './store/useStore'
-
-const PANEL_TABS = [
-  { id: 'models',      label: 'MODELS',  icon: '◈'  },
-  { id: 'properties',  label: 'PROPS',   icon: '⚙'  },
-  { id: 'animations',  label: 'ANIMS',   icon: '🎞'  },
-  { id: 'camera',      label: 'CAMERA',  icon: '🎥'  },
-  { id: 'skybox',      label: 'SKYBOX',  icon: '🌐'  },
-  { id: 'export',      label: 'EXPORT',  icon: '▶'  },
+import CameraMode     from './components/CameraMode'
+import SkyboxPanel    from './components/SkyboxPanel'
+import useStore       from './store/useStore'
+
+const TABS = [
+  { id:'models',     icon:'📦', label:'Models'    },
+  { id:'properties', icon:'⚙', label:'Properties' },
+  { id:'animations', icon:'🎞', label:'Animations' },
+  { id:'camera',     icon:'🎥', label:'Camera'     },
+  { id:'skybox',     icon:'🌐', label:'Skybox'     },
+  { id:'export',     icon:'▶', label:'Export'     },
 ]
 
-const TOOLBAR_H  = 42   // px
-const TIMELINE_H = 148  // px when visible
-const PANEL_W    = 210  // side panel width
+// ── Shared panel tab strip ─────────────────────────────────────────────────────
+function TabStrip({ orientation = 'horizontal', onSelect, active }) {
+  return (
+    <div style={{
+      display:'flex',
+      flexDirection: orientation === 'vertical' ? 'column' : 'row',
+      background:'var(--bg1)',
+      borderBottom: orientation === 'horizontal' ? '1px solid var(--border)' : 'none',
+      borderRight:  orientation === 'vertical'   ? '1px solid var(--border)' : 'none',
+      overflow: orientation === 'horizontal' ? 'auto hidden' : 'visible',
+    }}>
+      {TABS.map(t => (
+        <button key={t.id}
+          onClick={() => onSelect(active === t.id ? null : t.id)}
+          title={t.label}
+          style={{
+            flexShrink: 0,
+            padding: orientation === 'vertical' ? '12px 10px' : '8px 14px',
+            background: active===t.id ? 'var(--bg2)' : 'transparent',
+            border:'none',
+            borderLeft:   orientation==='vertical'   && active===t.id ? '2px solid var(--accent)' : orientation==='vertical'   ? '2px solid transparent' : 'none',
+            borderBottom: orientation==='horizontal' && active===t.id ? '2px solid var(--accent)' : orientation==='horizontal' ? '2px solid transparent' : 'none',
+            color: active===t.id ? 'var(--text0)' : 'var(--text2)',
+            cursor:'pointer', fontSize: orientation==='vertical' ? 18 : 12,
+            display:'flex', flexDirection: orientation==='vertical' ? 'column' : 'row',
+            alignItems:'center', gap: orientation==='vertical' ? 4 : 6,
+            transition:'all 0.12s',
+            minWidth: orientation==='horizontal' ? 80 : 48,
+          }}
+        >
+          <span style={{ fontSize: orientation==='vertical' ? 16 : 14 }}>{t.icon}</span>
+          <span style={{ fontSize:10, fontWeight: active===t.id ? 600 : 400,
+            letterSpacing:'0.04em', whiteSpace:'nowrap',
+            display: orientation==='vertical' ? 'block' : 'none',
+          }}>{t.label}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function PanelContent({ id, canvasRef }) {
+  return (
+    <div style={{ flex:1, overflow:'auto', minHeight:0 }}>
+      {id==='models'     && <ModelsPanel />}
+      {id==='properties' && <PropertiesPanel />}
+      {id==='animations' && <AnimationPlayer />}
+      {id==='camera'     && <CameraMode sceneRef={canvasRef} />}
+      {id==='skybox'     && <SkyboxPanel />}
+      {id==='export'     && <ExportPanel canvasRef={canvasRef} />}
+    </div>
+  )
+}
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Desktop side panel (collapsible)
-// ─────────────────────────────────────────────────────────────────────────────
-function SidePanel({ canvasRef, collapsed, onCollapse }) {
+// ── Desktop layout: icon sidebar + slide-out panel ────────────────────────────
+function DesktopLayout({ canvasRef }) {
   const { activePanel, setActivePanel } = useStore()
+  const PANEL_W = 260
 
   return (
-    <div style={{
-      width: collapsed ? 36 : PANEL_W,
-      flexShrink: 0,
-      background: 'rgba(6,6,18,0.98)',
-      borderLeft: '1px solid rgba(0,245,255,0.1)',
-      display: 'flex',
-      flexDirection: 'column',
-      transition: 'width 0.22s ease',
-      overflow: 'hidden',
-      zIndex: 150,
-      position: 'relative',
-    }}>
-      {/* Collapse toggle */}
-      <button
-        onClick={onCollapse}
-        title={collapsed ? 'Expand panel' : 'Collapse panel'}
-        style={{
-          position: 'absolute', top: 6, right: collapsed ? 4 : 6,
-          width: 24, height: 24, borderRadius: 4,
-          background: 'rgba(0,245,255,0.08)',
-          border: '1px solid rgba(0,245,255,0.15)',
-          color: '#00f5ff', cursor: 'pointer', fontSize: 11,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          zIndex: 10, flexShrink: 0,
-        }}
-      >{collapsed ? '◁' : '▷'}</button>
+    <div style={{ display:'flex', flex:1, overflow:'hidden' }}>
+      {/* 3D Canvas */}
+      <div ref={canvasRef} style={{ flex:1, position:'relative', overflow:'hidden', minWidth:0 }}>
+        <Suspense fallback={<Loading />}>
+          <Scene canvasRef={canvasRef} />
+        </Suspense>
+      </div>
+
+      {/* Vertical icon rail + slide panel */}
+      <div style={{ display:'flex', flexShrink:0, zIndex:150 }}>
+        {/* Slide-out panel */}
+        <div style={{
+          width: activePanel ? PANEL_W : 0,
+          overflow:'hidden',
+          background:'var(--bg1)',
+          borderLeft:'1px solid var(--border)',
+          display:'flex', flexDirection:'column',
+          transition:'width 0.2s ease',
+        }}>
+          {activePanel && (
+            <div style={{ width:PANEL_W, display:'flex', flexDirection:'column', height:'100%', overflow:'hidden' }}>
+              {/* Panel header */}
+              <div style={{
+                padding:'10px 14px', borderBottom:'1px solid var(--border)',
+                display:'flex', alignItems:'center', justifyContent:'space-between',
+                flexShrink:0,
+              }}>
+                <span style={{ fontSize:12, fontWeight:700, color:'var(--text0)', letterSpacing:'0.04em' }}>
+                  {TABS.find(t=>t.id===activePanel)?.icon}&nbsp;
+                  {TABS.find(t=>t.id===activePanel)?.label}
+                </span>
+                <button onClick={() => setActivePanel(null)}
+                  style={{ background:'none', border:'none', color:'var(--text2)', cursor:'pointer',
+                    fontSize:16, lineHeight:1, padding:2 }}>×</button>
+              </div>
+              <PanelContent id={activePanel} canvasRef={canvasRef} />
+            </div>
+          )}
+        </div>
 
-      {!collapsed && <>
-        {/* Tab icons */}
+        {/* Icon rail */}
         <div style={{
-          display: 'flex', flexWrap: 'wrap',
-          borderBottom: '1px solid rgba(255,255,255,0.07)',
-          background: 'rgba(0,0,8,0.6)',
-          paddingTop: 2,
+          width:48, background:'var(--bg1)',
+          borderLeft:'1px solid var(--border)',
+          display:'flex', flexDirection:'column',
+          alignItems:'center', paddingTop:8, gap:2,
         }}>
-          {PANEL_TABS.map(tab => (
-            <button
-              key={tab.id}
-              onClick={() => setActivePanel(activePanel === tab.id ? null : tab.id)}
-              title={tab.label}
+          {TABS.map(t => (
+            <button key={t.id}
+              onClick={() => setActivePanel(activePanel===t.id ? null : t.id)}
+              title={t.label}
               style={{
-                flex: '1 1 30%', minWidth: 0,
-                padding: '7px 2px 5px',
-                background: activePanel === tab.id ? 'rgba(0,245,255,0.09)' : 'transparent',
-                border: 'none',
-                borderBottom: `2px solid ${activePanel === tab.id ? '#00f5ff' : 'transparent'}`,
-                color: activePanel === tab.id ? '#00f5ff' : '#3a3a5a',
-                cursor: 'pointer', fontSize: 9,
-                fontFamily: 'Space Mono, monospace',
-                display: 'flex', flexDirection: 'column',
-                alignItems: 'center', gap: 2,
-                transition: 'all 0.15s',
+                width:36, height:36, borderRadius:'var(--radius-sm)',
+                background: activePanel===t.id ? 'rgba(79,142,255,0.15)' : 'transparent',
+                border:`1px solid ${activePanel===t.id ? 'rgba(79,142,255,0.3)' : 'transparent'}`,
+                color: activePanel===t.id ? 'var(--accent)' : 'var(--text2)',
+                cursor:'pointer', fontSize:16, transition:'all 0.12s',
+                display:'flex', alignItems:'center', justifyContent:'center',
               }}
-            >
-              <span style={{ fontSize: 13 }}>{tab.icon}</span>
-              <span style={{ fontSize: 8, letterSpacing: '0.04em' }}>{tab.label}</span>
-            </button>
+              onMouseEnter={e => { if(activePanel!==t.id){ e.currentTarget.style.background='var(--bg3)'; e.currentTarget.style.color='var(--text0)' }}}
+              onMouseLeave={e => { if(activePanel!==t.id){ e.currentTarget.style.background='transparent'; e.currentTarget.style.color='var(--text2)' }}}
+            >{t.icon}</button>
           ))}
         </div>
-
-        {/* Content */}
-        <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
-          {activePanel === 'models'     && <ModelsPanel />}
-          {activePanel === 'properties' && <PropertiesPanel />}
-          {activePanel === 'animations' && <AnimationPlayer />}
-          {activePanel === 'camera'     && <CameraMode sceneRef={canvasRef} />}
-          {activePanel === 'skybox'     && <SkyboxPanel />}
-          {activePanel === 'export'     && <ExportPanel canvasRef={canvasRef} />}
-        </div>
-      </>}
+      </div>
     </div>
   )
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Mobile bottom bar + slide-up drawer
-// ─────────────────────────────────────────────────────────────────────────────
-function MobileBar() {
+// ── Mobile layout ─────────────────────────────────────────────────────────────
+function MobileLayout({ canvasRef }) {
   const { activePanel, setActivePanel } = useStore()
+
   return (
-    <div style={{
-      display: 'flex', overflowX: 'auto',
-      borderTop: '1px solid rgba(0,245,255,0.1)',
-      background: 'rgba(6,6,18,0.98)',
-      zIndex: 200, flexShrink: 0,
-    }}>
-      {PANEL_TABS.map(tab => (
-        <button
-          key={tab.id}
-          onClick={() => setActivePanel(activePanel === tab.id ? null : tab.id)}
-          style={{
-            flex: '0 0 auto', minWidth: 52,
-            padding: '7px 6px 5px',
-            background: activePanel === tab.id ? 'rgba(0,245,255,0.09)' : 'transparent',
-            border: 'none',
-            borderTop: `2px solid ${activePanel === tab.id ? '#00f5ff' : 'transparent'}`,
-            color: activePanel === tab.id ? '#00f5ff' : '#444',
-            cursor: 'pointer',
-            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
-          }}
-        >
-          <span style={{ fontSize: 18 }}>{tab.icon}</span>
-          <span style={{ fontSize: 8, fontFamily: 'Space Mono', letterSpacing: '0.04em', color: 'inherit' }}>
-            {tab.label}
-          </span>
-        </button>
-      ))}
+    <div style={{ display:'flex', flexDirection:'column', flex:1, overflow:'hidden' }}>
+      {/* Canvas */}
+      <div ref={canvasRef} style={{ flex:1, position:'relative', overflow:'hidden', minHeight:0 }}>
+        <Suspense fallback={<Loading />}>
+          <Scene canvasRef={canvasRef} />
+        </Suspense>
+
+        {/* Slide-up drawer */}
+        {activePanel && (
+          <div style={{
+            position:'absolute', bottom:0, left:0, right:0,
+            height:'55%', background:'var(--bg1)',
+            borderTop:'1px solid var(--border)',
+            display:'flex', flexDirection:'column',
+            zIndex:180, animation:'fadeUp 0.18s ease',
+          }}>
+            {/* Drawer handle */}
+            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
+              padding:'8px 14px', borderBottom:'1px solid var(--border)', flexShrink:0 }}>
+              <span style={{ fontSize:12, fontWeight:700, color:'var(--text0)' }}>
+                {TABS.find(t=>t.id===activePanel)?.icon}&nbsp;
+                {TABS.find(t=>t.id===activePanel)?.label}
+              </span>
+              <button onClick={() => setActivePanel(null)}
+                style={{ background:'none', border:'none', color:'var(--text2)', cursor:'pointer', fontSize:18 }}>×</button>
+            </div>
+            <PanelContent id={activePanel} canvasRef={canvasRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Bottom tab bar */}
+      <div style={{
+        display:'flex', background:'var(--bg1)',
+        borderTop:'1px solid var(--border)', flexShrink:0,
+        overflowX:'auto',
+      }}>
+        {TABS.map(t => (
+          <button key={t.id}
+            onClick={() => setActivePanel(activePanel===t.id ? null : t.id)}
+            style={{
+              flex:'0 0 auto', minWidth:52, padding:'8px 6px 6px',
+              background: activePanel===t.id ? 'var(--bg2)' : 'transparent',
+              border:'none',
+              borderTop:`2px solid ${activePanel===t.id ? 'var(--accent)' : 'transparent'}`,
+              color: activePanel===t.id ? 'var(--accent)' : 'var(--text2)',
+              cursor:'pointer', display:'flex', flexDirection:'column',
+              alignItems:'center', gap:2, transition:'all 0.12s',
+            }}
+          >
+            <span style={{ fontSize:18 }}>{t.icon}</span>
+            <span style={{ fontSize:9, fontWeight: activePanel===t.id ? 600 : 400 }}>{t.label}</span>
+          </button>
+        ))}
+      </div>
     </div>
   )
 }
 
-function MobileDrawer({ canvasRef }) {
-  const { activePanel } = useStore()
-  if (!activePanel) return null
+// ── Loading ────────────────────────────────────────────────────────────────────
+function Loading() {
   return (
-    <div style={{
-      position: 'absolute', bottom: 0, left: 0, right: 0,
-      height: 300,
-      background: 'rgba(6,6,18,0.98)',
-      borderTop: '1px solid rgba(0,245,255,0.18)',
-      zIndex: 180, overflow: 'auto',
-    }}>
-      {activePanel === 'models'     && <ModelsPanel />}
-      {activePanel === 'properties' && <PropertiesPanel />}
-      {activePanel === 'animations' && <AnimationPlayer />}
-      {activePanel === 'camera'     && <CameraMode sceneRef={canvasRef} />}
-      {activePanel === 'skybox'     && <SkyboxPanel />}
-      {activePanel === 'export'     && <ExportPanel canvasRef={canvasRef} />}
+    <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
+      background:'var(--bg0)', flexDirection:'column', gap:16 }}>
+      <div style={{ width:40, height:40, border:'3px solid var(--bg4)',
+        borderTopColor:'var(--accent)', borderRadius:'50%', animation:'spin 0.8s linear infinite' }} />
+      <span style={{ fontSize:12, color:'var(--text2)', letterSpacing:'0.1em' }}>LOADING SCENE</span>
     </div>
   )
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Root App
-// ─────────────────────────────────────────────────────────────────────────────
+// ── Root ───────────────────────────────────────────────────────────────────────
 export default function App() {
   const canvasRef    = useRef()
   const showTimeline = useStore(s => s.showTimeline)
-  const [collapsed, setCollapsed] = useState(false)
-
-  const isMobile = typeof window !== 'undefined' && window.innerWidth < 640
-
-  const tlH     = showTimeline ? TIMELINE_H : 28
-  const mobBarH = isMobile ? 46 : 0
-  const panelW  = isMobile ? 0 : (collapsed ? 36 : PANEL_W)
+  const [mobile]     = useState(() => window.innerWidth < 640)
+  const TL_H = showTimeline ? 148 : 0
 
   return (
     <div style={{
-      width: '100vw', height: '100vh',
-      display: 'flex', flexDirection: 'column',
-      background: '#050508',
-      fontFamily: 'Space Mono, monospace',
-      overflow: 'hidden',
+      width:'100vw', height:'100vh',
+      display:'flex', flexDirection:'column',
+      background:'var(--bg0)', overflow:'hidden',
+      fontFamily:'var(--font-ui)',
     }}>
-      {/* ── Toolbar (fixed top) ── */}
-      <div style={{ flexShrink: 0, zIndex: 300 }}>
-        <Toolbar />
-      </div>
+      <Toolbar />
 
-      {/* ── Main row: canvas + side panel ── */}
-      <div style={{
-        flex: 1,
-        display: 'flex',
-        overflow: 'hidden',
-        // Reserve space for toolbar above and timeline+mobile bar below
-        marginBottom: tlH + mobBarH,
-      }}>
-
-        {/* 3D Canvas — takes ALL remaining width */}
-        <div
-          ref={canvasRef}
-          style={{
-            flex: 1,
-            position: 'relative',
-            overflow: 'hidden',
-            // Ensure canvas fills entire height of this row
-            minHeight: 0,
-          }}
-        >
-          <Suspense fallback={
-            <div style={{
-              position: 'absolute', inset: 0,
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              background: '#050508',
-            }}>
-              <div style={{ textAlign: 'center', color: '#00f5ff', fontFamily: 'Orbitron, monospace' }}>
-                <div style={{ fontSize: 36, marginBottom: 10,
-                  animation: 'spin 1.6s linear infinite' }}>◈</div>
-                <div style={{ fontSize: 12, letterSpacing: '0.25em', opacity: 0.7 }}>
-                  LOADING SCENE
-                </div>
-              </div>
-            </div>
-          }>
-            <Scene canvasRef={canvasRef} />
-          </Suspense>
-
-          {/* Mobile slide-up drawer sits inside canvas layer */}
-          {isMobile && <MobileDrawer canvasRef={canvasRef} />}
-        </div>
-
-        {/* Desktop side panel */}
-        {!isMobile && (
-          <SidePanel
-            canvasRef={canvasRef}
-            collapsed={collapsed}
-            onCollapse={() => setCollapsed(c => !c)}
-          />
-        )}
+      {/* Main content — height minus toolbar and timeline */}
+      <div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column',
+        paddingBottom: TL_H }}>
+        {mobile ? <MobileLayout canvasRef={canvasRef} /> : <DesktopLayout canvasRef={canvasRef} />}
       </div>
 
-      {/* ── Timeline — absolute, above mobile bar ── */}
-      <div style={{
-        position: 'fixed',
-        bottom: mobBarH,
-        left: 0,
-        right: panelW,
-        zIndex: 200,
-      }}>
+      {/* Timeline — fixed at bottom */}
+      <div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:200 }}>
         <Timeline />
       </div>
-
-      {/* ── Mobile bottom tab bar ── */}
-      {isMobile && (
-        <div style={{ flexShrink: 0, zIndex: 300 }}>
-          <MobileBar />
-        </div>
-      )}
-
-      <style>{`
-        @keyframes spin { to { transform: rotate(360deg); } }
-        * { -webkit-tap-highlight-color: transparent; }
-        input[type=range] { accent-color: #00f5ff; }
-        ::-webkit-scrollbar { width: 4px; height: 4px; }
-        ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
-        ::-webkit-scrollbar-thumb { background: rgba(0,245,255,0.2); border-radius: 2px; }
-        canvas { display: block !important; }
-      `}</style>
     </div>
   )
 }

src/components/AnimationPlayer.jsx

@@ -1,163 +1,93 @@
-/**
- * AnimationPlayer.jsx
- * Detects all animations in loaded GLB models and provides
- * per-model animation control: play/pause/loop/speed/blend.
- * Drop-in component — no changes to existing files required.
- */
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import useStore from '../store/useStore'
 
-const COLORS = ['#00f5ff','#ff4080','#40ff80','#ffaa00','#aa40ff','#ff8040']
-
-function AnimBar({ modelId, modelName, colorIdx }) {
-  const models        = useStore(s => s.models)
-  const model         = models.find(m => m.id === modelId)
-  const {
-    setModelActiveAnimation,
-    setModelAnimSpeed,
-  } = useStore.getState()
-
-  const [playing, setPlaying]   = useState(true)
-  const [loop,    setLoop]      = useState(true)
-  const [blend,   setBlend]     = useState(0)   // 0-1 crossfade weight
-  const [prevAnim,setPrevAnim]  = useState(null)
-
-  if (!model || model.animations.length === 0) return null
+const COLORS = ['#4f8eff','#ef4444','#22c55e','#f59e0b','#8b5cf6','#f97316']
 
+function AnimBlock({ model, colorIdx }) {
+  const [playing, setPlaying] = useState(true)
+  const [loop,    setLoop]    = useState(true)
+  const { setModelActiveAnimation, setModelAnimSpeed } = useStore.getState()
   const c = COLORS[colorIdx % COLORS.length]
-  const anims = model.animations
 
-  const switchAnim = (name) => {
-    setPrevAnim(model.activeAnimation)
-    setModelActiveAnimation(modelId, name)
-    setPlaying(true)
-  }
+  if (!model.animations.length) return null
 
   return (
-    <div style={{
-      background: 'rgba(255,255,255,0.03)',
-      border: `1px solid ${c}22`,
-      borderRadius: 8,
-      padding: '10px 12px',
-      marginBottom: 8,
-    }}>
+    <div style={{ padding:'10px 12px', borderBottom:'1px solid var(--border)' }}>
       {/* Model name */}
-      <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:8 }}>
-        <div style={{ width:8, height:8, borderRadius:'50%', background:c, boxShadow:`0 0 6px ${c}` }} />
-        <span style={{ fontSize:11, color:c, fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
-          {modelName}
-        </span>
-        <span style={{ fontSize:10, color:'#444', marginLeft:'auto' }}>
-          {anims.length} anim{anims.length>1?'s':''}
-        </span>
+      <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:8 }}>
+        <div style={{ width:7, height:7, borderRadius:2, rotate:'45deg',
+          background:c, boxShadow:`0 0 6px ${c}` }} />
+        <span style={{ fontSize:12, fontWeight:600, color:'var(--text0)', flex:1,
+          overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{model.name}</span>
+        <span style={{ fontSize:10, color:'var(--text3)', background:'var(--bg3)',
+          padding:'2px 6px', borderRadius:3 }}>{model.animations.length} clips</span>
       </div>
 
-      {/* Animation list */}
+      {/* Clip buttons */}
       <div style={{ display:'flex', flexWrap:'wrap', gap:4, marginBottom:8 }}>
-        {anims.map(anim => (
-          <button
-            key={anim}
-            onClick={() => switchAnim(anim)}
+        {model.animations.map(anim => (
+          <button key={anim} onClick={() => { setModelActiveAnimation(model.id, anim); setPlaying(true) }}
             style={{
-              padding:'4px 8px',
-              background: model.activeAnimation===anim ? `${c}22` : 'rgba(255,255,255,0.04)',
-              border: `1px solid ${model.activeAnimation===anim ? c : 'rgba(255,255,255,0.1)'}`,
-              color: model.activeAnimation===anim ? c : '#666',
-              borderRadius:4, cursor:'pointer',
-              fontSize:10, fontFamily:'Space Mono,monospace',
-              whiteSpace:'nowrap',
-              transition:'all 0.15s',
+              padding:'4px 9px', borderRadius:4, cursor:'pointer', fontSize:10, fontWeight:500,
+              background: model.activeAnimation===anim ? `${c}18` : 'var(--bg3)',
+              border:`1px solid ${model.activeAnimation===anim ? `${c}44` : 'var(--border)'}`,
+              color: model.activeAnimation===anim ? c : 'var(--text1)',
+              transition:'all 0.12s', maxWidth:120, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
             }}
-          >
-            {model.activeAnimation===anim && playing ? '▶ ' : ''}{anim}
-          </button>
+          >{model.activeAnimation===anim && playing ? '▶ ' : ''}{anim}</button>
         ))}
       </div>
 
-      {/* Controls row */}
+      {/* Controls */}
       <div style={{ display:'flex', gap:6, alignItems:'center' }}>
-        <button
-          onClick={() => setPlaying(!playing)}
-          style={{
-            padding:'4px 8px',
-            background: playing ? 'rgba(255,64,96,0.12)' : 'rgba(64,255,128,0.12)',
-            border: `1px solid ${playing ? '#ff4060' : '#40ff80'}`,
-            color: playing ? '#ff4060' : '#40ff80',
-            borderRadius:4, cursor:'pointer', fontSize:12,
-          }}
-        >{playing ? '⏸' : '▶'}</button>
+        <button onClick={() => setPlaying(!playing)} style={{
+          padding:'4px 10px', borderRadius:4, fontSize:12, cursor:'pointer',
+          background: playing ? 'rgba(239,68,68,0.1)' : 'rgba(34,197,94,0.1)',
+          border:`1px solid ${playing ? 'rgba(239,68,68,0.3)' : 'rgba(34,197,94,0.3)'}`,
+          color: playing ? 'var(--danger)' : '#22c55e',
+        }}>{playing ? '⏸' : '▶'}</button>
 
-        <button
-          onClick={() => setLoop(!loop)}
-          style={{
-            padding:'4px 8px',
-            background: loop ? 'rgba(0,245,255,0.1)' : 'rgba(255,255,255,0.04)',
-            border: `1px solid ${loop ? '#00f5ff' : 'rgba(255,255,255,0.1)'}`,
-            color: loop ? '#00f5ff' : '#555',
-            borderRadius:4, cursor:'pointer', fontSize:11,
-            fontFamily:'Space Mono',
-          }}
-        >⟳ LOOP</button>
+        <button onClick={() => setLoop(!loop)} style={{
+          padding:'4px 10px', borderRadius:4, fontSize:10, cursor:'pointer',
+          background: loop ? 'rgba(79,142,255,0.1)' : 'var(--bg3)',
+          border:`1px solid ${loop ? 'rgba(79,142,255,0.3)' : 'var(--border)'}`,
+          color: loop ? 'var(--accent)' : 'var(--text2)',
+        }}>⟳ Loop</button>
 
-        {/* Speed */}
-        <div style={{ display:'flex', alignItems:'center', gap:4, flex:1 }}>
-          <span style={{ fontSize:9, color:'#444' }}>SPD</span>
-          <input
-            type="range" min={0.1} max={3} step={0.05}
-            value={model.animationSpeed}
-            onChange={e => setModelAnimSpeed(modelId, parseFloat(e.target.value))}
-            style={{ flex:1, accentColor: c }}
-          />
-          <span style={{ fontSize:10, color:c, minWidth:28 }}>
-            {model.animationSpeed.toFixed(1)}x
+        <div style={{ display:'flex', alignItems:'center', gap:6, flex:1 }}>
+          <input type="range" min={0.1} max={3} step={0.05} value={model.animationSpeed}
+            onChange={e => setModelAnimSpeed(model.id, +e.target.value)} />
+          <span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:c, minWidth:30 }}>
+            {model.animationSpeed.toFixed(1)}×
           </span>
         </div>
       </div>
-
-      {/* Crossfade blend — only show when there are 2+ anims */}
-      {anims.length > 1 && prevAnim && prevAnim !== model.activeAnimation && (
-        <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:6 }}>
-          <span style={{ fontSize:9, color:'#444', whiteSpace:'nowrap' }}>BLEND</span>
-          <input
-            type="range" min={0} max={1} step={0.01}
-            value={blend}
-            onChange={e => setBlend(parseFloat(e.target.value))}
-            style={{ flex:1, accentColor:'#ffaa00' }}
-          />
-          <span style={{ fontSize:10, color:'#ffaa00', minWidth:28 }}>
-            {Math.round(blend*100)}%
-          </span>
-        </div>
-      )}
     </div>
   )
 }
 
 export default function AnimationPlayer() {
   const models = useStore(s => s.models)
-  const modelsWithAnims = models.filter(m => m.animations.length > 0)
+  const animated = models.filter(m => m.animations.length > 0)
 
-  if (modelsWithAnims.length === 0) {
-    return (
-      <div style={{ padding:'16px 12px', textAlign:'center', color:'#333', fontSize:11 }}>
-        <div style={{ fontSize:22, marginBottom:6, opacity:0.3 }}>🎞</div>
-        No animations detected.<br/>Load a GLB with built-in animations.
+  if (!animated.length) return (
+    <div style={{ padding:24, textAlign:'center' }}>
+      <div style={{ fontSize:32, opacity:0.15, marginBottom:10 }}>🎞</div>
+      <div style={{ fontSize:12, color:'var(--text2)' }}>No animations detected</div>
+      <div style={{ fontSize:11, color:'var(--text3)', marginTop:4 }}>
+        Load a GLB with built-in animation clips
       </div>
-    )
-  }
+    </div>
+  )
 
   return (
-    <div style={{ padding:'10px', fontFamily:'Space Mono,monospace', overflow:'auto', maxHeight:'100%' }}>
-      <div style={{ fontSize:10, color:'#555', letterSpacing:'0.12em', marginBottom:8 }}>
-        ANIMATIONS ({modelsWithAnims.length} model{modelsWithAnims.length>1?'s':''})
+    <div>
+      <div style={{ padding:'8px 12px', borderBottom:'1px solid var(--border)',
+        fontSize:11, color:'var(--text2)' }}>
+        {animated.length} animated model{animated.length>1?'s':''} · click a clip to switch
       </div>
-      {modelsWithAnims.map((m, i) => (
-        <AnimBar
-          key={m.id}
-          modelId={m.id}
-          modelName={m.name}
-          colorIdx={models.indexOf(m)}
-        />
+      {animated.map((m) => (
+        <AnimBlock key={m.id} model={m} colorIdx={models.indexOf(m)} />
       ))}
     </div>
   )

src/components/ExportPanel.jsx

@@ -1,261 +1,180 @@
 import { useState, useRef } from 'react'
 import useStore from '../store/useStore'
 
+function Stat({ label, value }) {
+  return (
+    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
+      padding:'5px 0', borderBottom:'1px solid var(--border)' }}>
+      <span style={{ fontSize:11, color:'var(--text2)' }}>{label}</span>
+      <span style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--text0)', fontWeight:600 }}>{value}</span>
+    </div>
+  )
+}
+
 export default function ExportPanel({ canvasRef }) {
-  const {
-    totalFrames, fps, setCurrentFrame, setIsPlaying,
+  const { totalFrames, fps, setCurrentFrame, setIsPlaying,
     isExporting, setIsExporting, exportProgress, setExportProgress,
-    exportedVideoUrl, setExportedVideoUrl,
-    clearRecordedFrames,
-  } = useStore()
+    exportedVideoUrl, setExportedVideoUrl } = useStore()
 
-  const [quality, setQuality] = useState(0.92)
-  const [outFps, setOutFps] = useState(30)
-  const [status, setStatus] = useState('')
-  const captureRef = useRef(false)
+  const [quality, setQuality] = useState(0.9)
+  const [outFps,  setOutFps]  = useState(30)
+  const [format,  setFormat]  = useState('webm')
+  const [status,  setStatus]  = useState('')
+  const cancelRef = useRef(false)
   const framesRef = useRef([])
 
+  const duration  = (totalFrames / fps).toFixed(1)
+  const estSize   = Math.round((totalFrames / fps) * outFps * 0.25)
+
   const captureFrame = () => {
-    const canvas = canvasRef?.current
-    if (!canvas) return null
-    // Find the actual canvas element inside the wrapper
-    const c = canvas.tagName === 'CANVAS' ? canvas : canvas.querySelector('canvas')
-    if (!c) return null
-    return c.toDataURL('image/jpeg', quality)
+    const c = document.querySelector('canvas')
+    return c ? c.toDataURL('image/jpeg', quality) : null
   }
 
   const sleep = ms => new Promise(r => setTimeout(r, ms))
 
   const startExport = async () => {
     if (isExporting) return
-    setIsExporting(true)
-    setExportedVideoUrl(null)
-    framesRef.current = []
-    captureRef.current = true
-
-    setStatus('Capturing frames...')
+    setIsExporting(true); setExportedVideoUrl(null)
+    cancelRef.current = false; framesRef.current = []
+    setStatus('Capturing frames…')
     const store = useStore.getState()
 
-    for (let frame = 0; frame < totalFrames; frame++) {
-      if (!captureRef.current) break
-      store.setCurrentFrame(frame)
-      await sleep(1000 / fps + 10) // wait for render
-
-      const dataUrl = captureFrame()
-      if (dataUrl) framesRef.current.push(dataUrl)
-      setExportProgress(Math.round((frame / totalFrames) * 80))
-    }
-
-    if (!captureRef.current) {
-      setIsExporting(false)
-      setStatus('Cancelled')
-      return
+    for (let f = 0; f < totalFrames; f++) {
+      if (cancelRef.current) break
+      store.setCurrentFrame(f)
+      await sleep(1000/fps + 16)
+      const d = captureFrame()
+      if (d) framesRef.current.push(d)
+      setExportProgress(Math.round((f/totalFrames)*78))
     }
 
-    setStatus('Encoding video...')
-    setExportProgress(85)
-
-    try {
-      // Create video using Canvas + MediaRecorder fallback (FFmpeg.wasm needs SharedArrayBuffer)
-      const videoBlob = await encodeFramesToVideo(framesRef.current, outFps)
-      const url = URL.createObjectURL(videoBlob)
-      setExportedVideoUrl(url)
-      setExportProgress(100)
-      setStatus('Done! Video ready.')
-    } catch (err) {
-      setStatus(`Error: ${err.message}`)
-      console.error(err)
+    if (!cancelRef.current && framesRef.current.length > 0) {
+      setStatus('Encoding video…'); setExportProgress(82)
+      try {
+        const blob = await encodeVideo(framesRef.current, outFps)
+        setExportedVideoUrl(URL.createObjectURL(blob))
+        setExportProgress(100); setStatus('Done!')
+      } catch(e) { setStatus('Error: ' + e.message) }
     }
-
-    setIsExporting(false)
-    store.setCurrentFrame(0)
+    setIsExporting(false); store.setCurrentFrame(0)
   }
 
-  const encodeFramesToVideo = (frames, fps) => {
-    return new Promise((resolve, reject) => {
-      if (frames.length === 0) { reject(new Error('No frames captured')); return }
-
-      const img = new Image()
-      img.onload = () => {
-        const canvas = document.createElement('canvas')
-        canvas.width = img.width
-        canvas.height = img.height
-        const ctx = canvas.getContext('2d')
-
-        const stream = canvas.captureStream(fps)
-        const recorder = new MediaRecorder(stream, {
-          mimeType: MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
-            ? 'video/webm;codecs=vp9'
-            : 'video/webm',
-          videoBitsPerSecond: 8_000_000,
-        })
-
-        const chunks = []
-        recorder.ondataavailable = e => { if (e.data.size) chunks.push(e.data) }
-        recorder.onstop = () => {
-          resolve(new Blob(chunks, { type: 'video/webm' }))
-        }
-
-        recorder.start()
-
-        let i = 0
-        const interval = setInterval(() => {
-          if (i >= frames.length) {
-            clearInterval(interval)
-            recorder.stop()
-            return
-          }
-          const frame = new Image()
-          frame.onload = () => ctx.drawImage(frame, 0, 0)
-          frame.src = frames[i++]
-          setExportProgress(85 + Math.round((i / frames.length) * 14))
-        }, 1000 / fps)
-      }
-      img.onerror = reject
-      img.src = frames[0]
-    })
-  }
-
-  const cancel = () => {
-    captureRef.current = false
-    setIsExporting(false)
-    setStatus('Cancelled')
-    setExportProgress(0)
-  }
-
-  const duration = (totalFrames / fps).toFixed(1)
-  const estimatedSize = Math.round((totalFrames / fps) * outFps * 0.3)
+  const encodeVideo = (frames, fps) => new Promise((res, rej) => {
+    if (!frames.length) { rej(new Error('No frames')); return }
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = img.width; canvas.height = img.height
+      const ctx = canvas.getContext('2d')
+      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') ? 'video/webm;codecs=vp9' : 'video/webm'
+      const rec  = new MediaRecorder(canvas.captureStream(fps), { mimeType:mime, videoBitsPerSecond:8_000_000 })
+      const chunks = []
+      rec.ondataavailable = e => chunks.push(e.data)
+      rec.onstop = () => res(new Blob(chunks, { type:'video/webm' }))
+      rec.start()
+      let i = 0
+      const iv = setInterval(() => {
+        if (i >= frames.length) { clearInterval(iv); rec.stop(); return }
+        const fi = new Image(); fi.onload = () => ctx.drawImage(fi,0,0); fi.src = frames[i++]
+        setExportProgress(82 + Math.round((i/frames.length)*17))
+      }, 1000/fps)
+    }
+    img.onerror = rej; img.src = frames[0]
+  })
 
   return (
-    <div style={{ padding: 10, fontFamily: 'Space Mono', overflow: 'auto', maxHeight: '100%' }}>
-      <div style={{ fontSize: 10, color: '#666', marginBottom: 10, letterSpacing: '0.1em' }}>EXPORT VIDEO</div>
-
-      <div style={{ background: 'rgba(0,245,255,0.04)', border: '1px solid rgba(0,245,255,0.1)', borderRadius: 6, padding: 10, marginBottom: 12 }}>
-        <div style={{ fontSize: 10, color: '#555', marginBottom: 4 }}>PROJECT INFO</div>
-        <div style={{ fontSize: 11, color: '#888', lineHeight: 1.8 }}>
-          <div>Frames: <span style={{ color: '#00f5ff' }}>{totalFrames}</span></div>
-          <div>Timeline: <span style={{ color: '#00f5ff' }}>{duration}s @ {fps}fps</span></div>
-          <div>Output: <span style={{ color: '#00f5ff' }}>WebM (VP9)</span></div>
-        </div>
+    <div style={{ padding:12, display:'flex', flexDirection:'column', gap:12 }}>
+
+      {/* Stats */}
+      <div style={{ background:'var(--bg2)', borderRadius:'var(--radius)', padding:'10px 12px',
+        border:'1px solid var(--border)' }}>
+        <Stat label="Frames"   value={totalFrames} />
+        <Stat label="Duration" value={`${duration}s`} />
+        <Stat label="Timeline" value={`${fps} fps`} />
+        <Stat label="Format"   value="WebM VP9" />
       </div>
 
       {/* Quality */}
-      <div style={{ marginBottom: 10 }}>
-        <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>FRAME QUALITY</div>
-        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-          <input type="range" min={0.5} max={1} step={0.01}
-            value={quality}
-            onChange={e => setQuality(parseFloat(e.target.value))}
-            style={{ flex: 1 }}
-          />
-          <span style={{ color: '#00f5ff', fontSize: 11 }}>{Math.round(quality * 100)}%</span>
+      <div>
+        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
+          <span style={{ fontSize:11, color:'var(--text2)', fontWeight:500 }}>Frame Quality</span>
+          <span style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--accent)' }}>{Math.round(quality*100)}%</span>
         </div>
+        <input type="range" min={0.5} max={1} step={0.01} value={quality}
+          onChange={e => setQuality(+e.target.value)} />
       </div>
 
       {/* FPS */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>OUTPUT FPS</div>
-        <div style={{ display: 'flex', gap: 6 }}>
-          {[15, 24, 30, 60].map(f => (
-            <button
-              key={f}
-              onClick={() => setOutFps(f)}
-              style={{
-                flex: 1, padding: '6px 0',
-                background: outFps === f ? 'rgba(0,245,255,0.15)' : 'rgba(255,255,255,0.04)',
-                border: `1px solid ${outFps === f ? '#00f5ff' : 'rgba(255,255,255,0.1)'}`,
-                color: outFps === f ? '#00f5ff' : '#666',
-                borderRadius: 4, cursor: 'pointer',
-                fontSize: 11, fontFamily: 'Space Mono',
-              }}
-            >{f}</button>
+      <div>
+        <div style={{ fontSize:11, color:'var(--text2)', fontWeight:500, marginBottom:6 }}>Output FPS</div>
+        <div style={{ display:'flex', gap:5 }}>
+          {[15,24,30,60].map(f => (
+            <button key={f} onClick={() => setOutFps(f)} style={{
+              flex:1, padding:'6px 0', borderRadius:'var(--radius-sm)',
+              background: outFps===f ? 'rgba(79,142,255,0.15)' : 'var(--bg2)',
+              border:`1px solid ${outFps===f ? 'rgba(79,142,255,0.4)' : 'var(--border)'}`,
+              color: outFps===f ? 'var(--accent)' : 'var(--text1)',
+              fontSize:11, fontWeight: outFps===f ? 700 : 400, cursor:'pointer',
+              transition:'all 0.12s',
+            }}>{f}</button>
           ))}
         </div>
       </div>
 
       {/* Progress */}
       {isExporting && (
-        <div style={{ marginBottom: 10 }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
-            <span style={{ fontSize: 10, color: '#888' }}>{status}</span>
-            <span style={{ fontSize: 10, color: '#00f5ff' }}>{exportProgress}%</span>
+        <div>
+          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
+            <span style={{ fontSize:11, color:'var(--text2)' }}>{status}</span>
+            <span style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--accent)' }}>{exportProgress}%</span>
           </div>
-          <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
-            <div style={{
-              height: '100%', width: `${exportProgress}%`,
-              background: 'linear-gradient(90deg, #00f5ff, #0080ff)',
-              borderRadius: 2, transition: 'width 0.3s',
-            }} />
+          <div style={{ height:4, background:'var(--bg3)', borderRadius:2 }}>
+            <div style={{ height:'100%', borderRadius:2, transition:'width 0.3s',
+              width:`${exportProgress}%`, background:'linear-gradient(90deg,var(--accent),var(--accent2))' }} />
           </div>
         </div>
       )}
 
+      {/* Status message */}
       {status && !isExporting && (
         <div style={{
-          fontSize: 11, color: status.includes('Error') ? '#ff4060' : '#40ff80',
-          marginBottom: 10, padding: '6px 8px',
-          background: status.includes('Error') ? 'rgba(255,64,96,0.08)' : 'rgba(64,255,128,0.08)',
-          borderRadius: 4, border: `1px solid ${status.includes('Error') ? 'rgba(255,64,96,0.2)' : 'rgba(64,255,128,0.2)'}`,
-        }}>
-          {status}
-        </div>
+          padding:'8px 10px', borderRadius:'var(--radius-sm)',
+          background: status.includes('Error') ? 'rgba(239,68,68,0.08)' : 'rgba(6,214,160,0.08)',
+          border:`1px solid ${status.includes('Error') ? 'rgba(239,68,68,0.2)' : 'rgba(6,214,160,0.2)'}`,
+          color: status.includes('Error') ? 'var(--danger)' : 'var(--accent3)',
+          fontSize:11,
+        }}>{status}</div>
       )}
 
       {/* Buttons */}
       {!isExporting ? (
-        <button
-          onClick={startExport}
-          style={{
-            width: '100%', padding: '10px 0',
-            background: 'linear-gradient(135deg, rgba(0,245,255,0.2), rgba(0,128,255,0.2))',
-            border: '1px solid rgba(0,245,255,0.4)',
-            color: '#00f5ff', borderRadius: 6,
-            cursor: 'pointer', fontSize: 12,
-            fontFamily: 'Space Mono', fontWeight: 'bold',
-            letterSpacing: '0.1em',
-          }}
-        >
-          ▶ RENDER & EXPORT
-        </button>
+        <button onClick={startExport} style={{
+          padding:'11px 0', borderRadius:'var(--radius)',
+          background:'linear-gradient(135deg,var(--accent),var(--accent2))',
+          border:'none', color:'#fff', fontSize:13, fontWeight:700,
+          cursor:'pointer', letterSpacing:'0.04em',
+          boxShadow:'0 4px 20px rgba(79,142,255,0.35)',
+          transition:'opacity 0.15s',
+        }}>▶ Render & Export</button>
       ) : (
-        <button
-          onClick={cancel}
-          style={{
-            width: '100%', padding: '10px 0',
-            background: 'rgba(255,64,96,0.1)',
-            border: '1px solid rgba(255,64,96,0.3)',
-            color: '#ff4060', borderRadius: 6,
-            cursor: 'pointer', fontSize: 12,
-            fontFamily: 'Space Mono',
-          }}
-        >
-          ⏹ CANCEL
-        </button>
+        <button onClick={() => { cancelRef.current = true }} style={{
+          padding:'10px 0', borderRadius:'var(--radius)',
+          background:'rgba(239,68,68,0.1)', border:'1px solid rgba(239,68,68,0.3)',
+          color:'var(--danger)', fontSize:12, fontWeight:600, cursor:'pointer',
+        }}>⏹ Cancel</button>
       )}
 
-      {/* Download */}
+      {/* Result */}
       {exportedVideoUrl && (
-        <div style={{ marginTop: 12 }}>
-          <div style={{ fontSize: 10, color: '#40ff80', marginBottom: 8 }}>✓ VIDEO READY</div>
-          <video
-            src={exportedVideoUrl}
-            controls
-            style={{ width: '100%', borderRadius: 6, marginBottom: 8 }}
-          />
-          <a
-            href={exportedVideoUrl}
-            download={`animation_${Date.now()}.webm`}
-            style={{
-              display: 'block', width: '100%', padding: '8px 0',
-              background: 'rgba(64,255,128,0.1)',
-              border: '1px solid rgba(64,255,128,0.3)',
-              color: '#40ff80', borderRadius: 6,
-              textAlign: 'center', textDecoration: 'none',
-              fontSize: 11, fontFamily: 'Space Mono',
-            }}
-          >
-            ⬇ DOWNLOAD VIDEO
-          </a>
+        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
+          <video src={exportedVideoUrl} controls style={{ width:'100%', borderRadius:'var(--radius)', border:'1px solid var(--border)' }} />
+          <a href={exportedVideoUrl} download={`animation_${Date.now()}.webm`} style={{
+            display:'block', padding:'9px 0', borderRadius:'var(--radius)',
+            background:'rgba(6,214,160,0.1)', border:'1px solid rgba(6,214,160,0.3)',
+            color:'var(--accent3)', textAlign:'center', textDecoration:'none',
+            fontSize:12, fontWeight:600,
+          }}>⬇ Download Video</a>
         </div>
       )}
     </div>

src/components/ModelsPanel.jsx

@@ -1,195 +1,204 @@
 import { useState, useRef } from 'react'
 import useStore from '../store/useStore'
 
-const SAMPLE_MODELS = [
-  { name: 'Fox', url: 'https://threejs.org/examples/models/gltf/Fox/glTF/Fox.gltf' },
-  { name: 'Horse', url: 'https://threejs.org/examples/models/gltf/Horse.glb' },
+const SAMPLES = [
+  { name: 'Fox',      url: 'https://threejs.org/examples/models/gltf/Fox/glTF/Fox.gltf' },
+  { name: 'Robot',    url: 'https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb' },
+  { name: 'Soldier',  url: 'https://threejs.org/examples/models/gltf/Soldier.glb' },
   { name: 'Flamingo', url: 'https://threejs.org/examples/models/gltf/Flamingo.glb' },
-  { name: 'Stork', url: 'https://threejs.org/examples/models/gltf/Stork.glb' },
-  { name: 'Parrot', url: 'https://threejs.org/examples/models/gltf/Parrot.glb' },
-  { name: 'Robot', url: 'https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb' },
-  { name: 'Soldier', url: 'https://threejs.org/examples/models/gltf/Soldier.glb' },
+  { name: 'Horse',    url: 'https://threejs.org/examples/models/gltf/Horse.glb' },
+  { name: 'Parrot',   url: 'https://threejs.org/examples/models/gltf/Parrot.glb' },
 ]
 
+const COLORS = ['#4f8eff','#ef4444','#06d6a0','#f59e0b','#8b5cf6','#f97316']
+
 export default function ModelsPanel() {
   const { models, selectedModelId, addModel, removeModel, selectModel, toggleModelVisibility } = useStore()
-  const [urlInput, setUrlInput] = useState('')
-  const [nameInput, setNameInput] = useState('')
-  const [showSamples, setShowSamples] = useState(false)
-  const [loading, setLoading] = useState(false)
+  const [url, setUrl]     = useState('')
+  const [name, setName]   = useState('')
+  const [samples, setSamples] = useState(false)
+  const [dragging, setDragging] = useState(false)
   const fileRef = useRef()
 
-  const handleAddUrl = () => {
-    if (!urlInput.trim()) return
-    setLoading(true)
-    addModel(urlInput.trim(), nameInput.trim() || null)
-    setUrlInput('')
-    setNameInput('')
-    setTimeout(() => setLoading(false), 1500)
+  const handleAdd = () => {
+    if (!url.trim()) return
+    addModel(url.trim(), name.trim() || null)
+    setUrl(''); setName('')
   }
 
-  const handleFileUpload = (e) => {
+  const handleFile = (e) => {
     const file = e.target.files[0]
     if (!file) return
-    const url = URL.createObjectURL(file)
-    addModel(url, file.name.replace(/\.[^.]+$/, ''))
+    addModel(URL.createObjectURL(file), file.name.replace(/\.[^.]+$/, ''))
   }
 
-  const colors = ['#00f5ff', '#ff4080', '#40ff80', '#ffaa00', '#aa40ff', '#ff8040']
+  const handleDrop = (e) => {
+    e.preventDefault(); setDragging(false)
+    const file = e.dataTransfer.files[0]
+    if (file && (file.name.endsWith('.glb') || file.name.endsWith('.gltf'))) {
+      addModel(URL.createObjectURL(file), file.name.replace(/\.[^.]+$/, ''))
+    }
+  }
 
   return (
-    <div style={{ padding: 10, fontFamily: 'Space Mono', overflow: 'auto', maxHeight: '100%' }}>
-      {/* Add by URL */}
-      <div style={{ marginBottom: 10 }}>
-        <div style={{ fontSize: 10, color: '#666', marginBottom: 6, letterSpacing: '0.1em' }}>ADD MODEL</div>
-        <input
-          placeholder="Name (optional)"
-          value={nameInput}
-          onChange={e => setNameInput(e.target.value)}
-          style={inputStyle}
-        />
-        <input
-          placeholder="GLB/GLTF URL..."
-          value={urlInput}
-          onChange={e => setUrlInput(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && handleAddUrl()}
-          style={{ ...inputStyle, marginTop: 4 }}
-        />
-        <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
-          <button onClick={handleAddUrl} style={primaryBtn} disabled={loading}>
-            {loading ? '⏳' : '+ URL'}
-          </button>
-          <button onClick={() => fileRef.current?.click()} style={secondaryBtn}>
-            📁 FILE
-          </button>
-          <button
-            onClick={() => setShowSamples(!showSamples)}
-            style={{ ...secondaryBtn, color: showSamples ? '#00f5ff' : '#888' }}
-          >
-            ◈ DEMO
-          </button>
+    <div style={{ padding: 12, display:'flex', flexDirection:'column', gap:10 }}>
+
+      {/* Drop zone */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={e => { e.preventDefault(); setDragging(true) }}
+        onDragLeave={() => setDragging(false)}
+        onClick={() => fileRef.current?.click()}
+        style={{
+          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border-hi)'}`,
+          borderRadius: 'var(--radius)',
+          padding: '20px 12px',
+          textAlign: 'center',
+          cursor: 'pointer',
+          background: dragging ? 'rgba(79,142,255,0.06)' : 'var(--bg2)',
+          transition: 'all 0.15s',
+          animation: dragging ? 'pulse 1s ease infinite' : 'none',
+        }}
+      >
+        <div style={{ fontSize: 28, marginBottom: 6 }}>📦</div>
+        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text1)' }}>
+          {dragging ? 'Drop to load' : 'Drop GLB / GLTF here'}
         </div>
-        <input ref={fileRef} type="file" accept=".glb,.gltf" style={{ display: 'none' }} onChange={handleFileUpload} />
+        <div style={{ fontSize: 11, color: 'var(--text2)', marginTop: 3 }}>or click to browse</div>
+        <input ref={fileRef} type="file" accept=".glb,.gltf" style={{ display:'none' }} onChange={handleFile} />
       </div>
 
-      {/* Sample models */}
-      {showSamples && (
-        <div style={{ marginBottom: 10 }}>
-          <div style={{ fontSize: 10, color: '#666', marginBottom: 4, letterSpacing: '0.1em' }}>SAMPLE MODELS</div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            {SAMPLE_MODELS.map(sm => (
-              <button
-                key={sm.url}
-                onClick={() => { addModel(sm.url, sm.name); setShowSamples(false) }}
-                style={{
-                  background: 'rgba(0,245,255,0.06)',
-                  border: '1px solid rgba(0,245,255,0.15)',
-                  color: '#9dd', padding: '6px 10px',
-                  borderRadius: 4, cursor: 'pointer',
-                  fontSize: 11, textAlign: 'left',
-                  fontFamily: 'Space Mono',
-                }}
-              >
-                ◈ {sm.name}
-              </button>
-            ))}
-          </div>
+      {/* URL input */}
+      <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
+        <input value={name} onChange={e=>setName(e.target.value)}
+          placeholder="Name (optional)" style={{}} />
+        <div style={{ display:'flex', gap:5 }}>
+          <input value={url} onChange={e=>setUrl(e.target.value)}
+            onKeyDown={e=>e.key==='Enter'&&handleAdd()}
+            placeholder="Paste GLB / GLTF URL…" style={{ flex:1 }} />
+          <button onClick={handleAdd} style={{
+            padding:'5px 12px', borderRadius:'var(--radius-sm)',
+            background:'var(--accent)', border:'none', color:'#fff',
+            fontSize:11, fontWeight:600, cursor:'pointer', flexShrink:0,
+            transition:'opacity 0.15s',
+          }}>Add</button>
         </div>
-      )}
-
-      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '8px 0' }} />
-
-      {/* Model list */}
-      <div style={{ fontSize: 10, color: '#666', marginBottom: 6, letterSpacing: '0.1em' }}>
-        MODELS ({models.length})
       </div>
 
-      {models.length === 0 && (
-        <div style={{ color: '#333', fontSize: 11, textAlign: 'center', padding: 16 }}>
-          No models loaded.<br />Add a GLB URL or upload a file.
-        </div>
-      )}
+      {/* Sample models */}
+      <button onClick={() => setSamples(!samples)} style={{
+        padding:'6px 10px', borderRadius:'var(--radius-sm)',
+        background: samples ? 'var(--bg4)' : 'var(--bg2)',
+        border:'1px solid var(--border-hi)',
+        color:'var(--text1)', fontSize:11, cursor:'pointer',
+        display:'flex', alignItems:'center', justifyContent:'space-between',
+      }}>
+        <span>⚡ Demo models</span>
+        <span style={{ color:'var(--text2)' }}>{samples ? '▲' : '▼'}</span>
+      </button>
 
-      {models.map((m, i) => {
-        const isSelected = m.id === selectedModelId
-        const color = colors[i % colors.length]
-        return (
-          <div
-            key={m.id}
-            onClick={() => selectModel(m.id)}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 8,
-              padding: '8px 8px',
-              marginBottom: 4,
-              background: isSelected ? `${color}11` : 'rgba(255,255,255,0.03)',
-              border: `1px solid ${isSelected ? color + '44' : 'rgba(255,255,255,0.06)'}`,
-              borderRadius: 6, cursor: 'pointer',
-              transition: 'all 0.15s',
-            }}
-          >
-            <div style={{
-              width: 8, height: 8, borderRadius: '50%',
-              background: m.visible ? color : '#333',
-              boxShadow: m.visible ? `0 0 6px ${color}` : 'none',
-              flexShrink: 0,
-            }} />
-            <span style={{
-              flex: 1, fontSize: 11, color: isSelected ? '#fff' : '#aaa',
-              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-            }}>
-              {m.name}
-            </span>
-            {/* Visibility toggle */}
-            <button
-              onClick={e => { e.stopPropagation(); toggleModelVisibility(m.id) }}
+      {samples && (
+        <div style={{
+          display:'grid', gridTemplateColumns:'1fr 1fr',
+          gap:5, animation:'fadeUp 0.15s ease',
+        }}>
+          {SAMPLES.map(s => (
+            <button key={s.url}
+              onClick={() => { addModel(s.url, s.name); setSamples(false) }}
               style={{
-                background: 'none', border: 'none',
-                color: m.visible ? '#aaa' : '#333',
-                cursor: 'pointer', fontSize: 12, padding: 0,
+                padding:'8px 10px', borderRadius:'var(--radius-sm)',
+                background:'var(--bg3)', border:'1px solid var(--border)',
+                color:'var(--text1)', fontSize:11, cursor:'pointer',
+                textAlign:'left', transition:'all 0.12s',
               }}
-              title="Toggle visibility"
+              onMouseEnter={e => { e.currentTarget.style.background='var(--bg4)'; e.currentTarget.style.color='var(--text0)' }}
+              onMouseLeave={e => { e.currentTarget.style.background='var(--bg3)'; e.currentTarget.style.color='var(--text1)' }}
             >
-              {m.visible ? '👁' : '🙈'}
+              📦 {s.name}
             </button>
-            <button
-              onClick={e => { e.stopPropagation(); removeModel(m.id) }}
+          ))}
+        </div>
+      )}
+
+      {/* Divider + count */}
+      {models.length > 0 && (
+        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+          <div style={{ flex:1, height:1, background:'var(--border)' }} />
+          <span style={{ fontSize:10, color:'var(--text3)', fontWeight:600 }}>
+            {models.length} MODEL{models.length>1?'S':''}
+          </span>
+          <div style={{ flex:1, height:1, background:'var(--border)' }} />
+        </div>
+      )}
+
+      {/* Model list */}
+      <div style={{ display:'flex', flexDirection:'column', gap:3 }}>
+        {models.map((m, i) => {
+          const sel = m.id === selectedModelId
+          const c   = COLORS[i % COLORS.length]
+          return (
+            <div
+              key={m.id}
+              onClick={() => selectModel(m.id)}
               style={{
-                background: 'none', border: 'none',
-                color: '#444', cursor: 'pointer', fontSize: 12, padding: 0,
+                display:'flex', alignItems:'center', gap:8,
+                padding:'8px 10px',
+                borderRadius:'var(--radius-sm)',
+                background: sel ? 'rgba(79,142,255,0.1)' : 'var(--bg2)',
+                border:`1px solid ${sel ? 'rgba(79,142,255,0.3)' : 'var(--border)'}`,
+                cursor:'pointer', transition:'all 0.12s',
               }}
-              title="Remove"
-            >✕</button>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
+              onMouseEnter={e => { if (!sel) e.currentTarget.style.background='var(--bg3)' }}
+              onMouseLeave={e => { if (!sel) e.currentTarget.style.background='var(--bg2)' }}
+            >
+              {/* Color dot */}
+              <div style={{
+                width:8, height:8, borderRadius:'50%', flexShrink:0,
+                background: m.visible ? c : 'var(--text3)',
+                boxShadow: m.visible ? `0 0 6px ${c}88` : 'none',
+                transition:'all 0.15s',
+              }} />
 
-const inputStyle = {
-  width: '100%', background: 'rgba(255,255,255,0.04)',
-  border: '1px solid rgba(255,255,255,0.1)',
-  color: '#ddd', padding: '7px 9px',
-  borderRadius: 5, fontSize: 11,
-  fontFamily: 'Space Mono, monospace',
-  outline: 'none',
-  display: 'block',
-}
+              {/* Name */}
+              <span style={{
+                flex:1, fontSize:12, fontWeight: sel ? 600 : 400,
+                color: sel ? 'var(--text0)' : 'var(--text1)',
+                overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
+              }}>{m.name}</span>
 
-const primaryBtn = {
-  flex: 1, padding: '7px 0',
-  background: 'rgba(0,245,255,0.12)',
-  border: '1px solid rgba(0,245,255,0.3)',
-  color: '#00f5ff', borderRadius: 5,
-  cursor: 'pointer', fontSize: 11,
-  fontFamily: 'Space Mono',
-}
+              {/* Anims badge */}
+              {m.animations.length > 0 && (
+                <span style={{
+                  fontSize:9, padding:'2px 5px', borderRadius:3,
+                  background:'rgba(6,214,160,0.12)', color:'var(--accent3)',
+                  border:'1px solid rgba(6,214,160,0.2)', flexShrink:0,
+                }}>{m.animations.length}</span>
+              )}
 
-const secondaryBtn = {
-  flex: 1, padding: '7px 0',
-  background: 'rgba(255,255,255,0.05)',
-  border: '1px solid rgba(255,255,255,0.1)',
-  color: '#888', borderRadius: 5,
-  cursor: 'pointer', fontSize: 11,
-  fontFamily: 'Space Mono',
+              {/* Actions */}
+              <button
+                onClick={e => { e.stopPropagation(); toggleModelVisibility(m.id) }}
+                title="Toggle visibility"
+                style={{ background:'none', border:'none', color: m.visible ? 'var(--text2)' : 'var(--text3)', fontSize:13, cursor:'pointer', flexShrink:0, padding:2 }}
+              >{m.visible ? '👁' : '🙈'}</button>
+
+              <button
+                onClick={e => { e.stopPropagation(); removeModel(m.id) }}
+                title="Remove model"
+                style={{ background:'none', border:'none', color:'var(--text3)', fontSize:12, cursor:'pointer', flexShrink:0, padding:2, transition:'color 0.12s' }}
+                onMouseEnter={e => e.currentTarget.style.color='var(--danger)'}
+                onMouseLeave={e => e.currentTarget.style.color='var(--text3)'}
+              >✕</button>
+            </div>
+          )
+        })}
+
+        {models.length === 0 && (
+          <div style={{ textAlign:'center', color:'var(--text3)', fontSize:12, padding:'12px 0' }}>
+            No models loaded yet
+          </div>
+        )}
+      </div>
+    </div>
+  )
 }

src/components/PropertiesPanel.jsx

@@ -1,35 +1,71 @@
+import { useState } from 'react'
 import useStore from '../store/useStore'
 
 const DEG = 180 / Math.PI
 
-function VecInput({ label, value, onChange, step = 0.01, decimals = 3, scale = 1 }) {
-  const axes = ['X', 'Y', 'Z']
+function Section({ title, children, defaultOpen = true }) {
+  const [open, setOpen] = useState(defaultOpen)
   return (
-    <div style={{ marginBottom: 10 }}>
-      <div style={{ fontSize: 10, color: '#666', marginBottom: 4, letterSpacing: '0.1em' }}>{label}</div>
-      <div style={{ display: 'flex', gap: 4 }}>
-        {axes.map((axis, i) => (
-          <div key={axis} style={{ flex: 1 }}>
-            <div style={{ fontSize: 9, color: ['#ff5060', '#60ff80', '#4080ff'][i], marginBottom: 2 }}>{axis}</div>
-            <input
-              type="number"
-              value={(value[i] * scale).toFixed(decimals)}
-              step={step}
-              onChange={e => {
-                const v = parseFloat(e.target.value) || 0
-                const arr = [...value]
-                arr[i] = v / scale
-                onChange(arr)
-              }}
-              style={{
-                width: '100%', background: 'rgba(255,255,255,0.04)',
-                border: `1px solid ${['rgba(255,80,96,0.3)', 'rgba(96,255,128,0.3)', 'rgba(64,128,255,0.3)'][i]}`,
-                color: '#ddd', padding: '4px 6px',
-                borderRadius: 4, fontSize: 11,
-                fontFamily: 'Space Mono, monospace',
-                outline: 'none',
-              }}
-            />
+    <div style={{ borderBottom: '1px solid var(--border)' }}>
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          width:'100%', padding:'8px 12px',
+          display:'flex', alignItems:'center', justifyContent:'space-between',
+          background:'transparent', border:'none', color:'var(--text1)',
+          fontSize:11, fontWeight:600, cursor:'pointer', letterSpacing:'0.08em',
+          textTransform:'uppercase',
+        }}
+      >
+        {title}
+        <span style={{ color:'var(--text3)', transition:'transform 0.15s',
+          display:'inline-block', transform: open?'rotate(0deg)':'rotate(-90deg)' }}>▾</span>
+      </button>
+      {open && <div style={{ padding:'0 12px 12px' }}>{children}</div>}
+    </div>
+  )
+}
+
+function Vec3({ label, value, onChange, step=0.01, scale=1, decimals=3, min, max }) {
+  const axes = [
+    { k:'X', color:'#ef4444' },
+    { k:'Y', color:'#22c55e' },
+    { k:'Z', color:'#3b82f6' },
+  ]
+  return (
+    <div style={{ marginBottom:8 }}>
+      <div style={{ fontSize:10, color:'var(--text2)', marginBottom:5, fontWeight:500, letterSpacing:'0.06em' }}>
+        {label}
+      </div>
+      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:4 }}>
+        {axes.map((ax, i) => (
+          <div key={ax.k}>
+            <div style={{
+              display:'flex', alignItems:'center',
+              background:'var(--bg1)', border:'1px solid var(--border)',
+              borderRadius:'var(--radius-sm)', overflow:'hidden',
+              transition:'border-color 0.15s',
+            }}
+              onFocusCapture={e => e.currentTarget.style.borderColor='var(--accent)'}
+              onBlurCapture={e => e.currentTarget.style.borderColor='var(--border)'}
+            >
+              <span style={{
+                padding:'0 5px', fontSize:10, fontWeight:700,
+                color: ax.color, background:'var(--bg2)',
+                borderRight:'1px solid var(--border)', alignSelf:'stretch',
+                display:'flex', alignItems:'center',
+              }}>{ax.k}</span>
+              <input
+                type="number" step={step} min={min} max={max}
+                value={(value[i] * scale).toFixed(decimals)}
+                onChange={e => {
+                  const v = parseFloat(e.target.value) || 0
+                  const arr = [...value]; arr[i] = v / scale; onChange(arr)
+                }}
+                style={{ border:'none', borderRadius:0, width:'100%', background:'transparent',
+                  padding:'5px 5px', fontSize:11, fontFamily:'var(--font-mono)' }}
+              />
+            </div>
           </div>
         ))}
       </div>
@@ -39,194 +75,158 @@ function VecInput({ label, value, onChange, step = 0.01, decimals = 3, scale = 1
 
 export default function PropertiesPanel() {
   const {
-    models, selectedModelId, updateModelTransform,
-    setModelActiveAnimation, setModelAnimSpeed,
-    currentFrame, addKeyframe, removeKeyframe,
-    keyframes, getKeyframesForModel,
-    selectModel, removeModel
+    models, selectedModelId,
+    updateModelTransform, setModelActiveAnimation, setModelAnimSpeed,
+    currentFrame, addKeyframe, removeKeyframe, getKeyframesForModel, keyframes,
+    removeModel, selectModel,
   } = useStore()
 
   const model = models.find(m => m.id === selectedModelId)
 
-  if (!model) {
-    return (
-      <div style={{
-        padding: 16, color: '#444', fontSize: 12,
-        fontFamily: 'Space Mono', textAlign: 'center',
-        lineHeight: 1.8,
-      }}>
-        <div style={{ fontSize: 24, marginBottom: 8, opacity: 0.3 }}>◎</div>
-        <div>Tap a model in the scene</div>
-        <div>to select it</div>
+  if (!model) return (
+    <div style={{ padding:24, textAlign:'center' }}>
+      <div style={{ fontSize:32, opacity:0.15, marginBottom:10 }}>◎</div>
+      <div style={{ fontSize:12, color:'var(--text2)' }}>Select a model in the scene</div>
+      <div style={{ fontSize:11, color:'var(--text3)', marginTop:4 }}>
+        Click any object to inspect its properties
       </div>
-    )
-  }
+    </div>
+  )
 
-  const modelKeyframes = getKeyframesForModel(model.id)
-  const hasKfAtFrame = keyframes[currentFrame]?.[model.id]
+  const kfList   = getKeyframesForModel(model.id)
+  const hasKfNow = keyframes[currentFrame]?.[model.id]
 
   return (
-    <div style={{ padding: '10px', fontFamily: 'Space Mono, monospace', overflow: 'auto', maxHeight: '100%' }}>
-      {/* Model name */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontSize: 10, color: '#00f5ff', letterSpacing: '0.15em', marginBottom: 4 }}>SELECTED</div>
-        <div style={{
-          fontSize: 12, color: '#fff', fontWeight: 'bold',
-          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
-        }}>
+    <div>
+      {/* Header */}
+      <div style={{
+        padding:'10px 12px 8px',
+        borderBottom:'1px solid var(--border)',
+        display:'flex', alignItems:'center', gap:8,
+      }}>
+        <div style={{ width:10, height:10, borderRadius:'50%', background:'var(--accent)', boxShadow:'0 0 8px rgba(79,142,255,0.5)' }} />
+        <span style={{ fontSize:13, fontWeight:600, flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
           {model.name}
-        </div>
+        </span>
+        <button
+          onClick={() => { removeModel(model.id); selectModel(null) }}
+          style={{ background:'none', border:'none', color:'var(--text3)', cursor:'pointer', fontSize:14, transition:'color 0.12s' }}
+          onMouseEnter={e => e.currentTarget.style.color='var(--danger)'}
+          onMouseLeave={e => e.currentTarget.style.color='var(--text3)'}
+          title="Remove model"
+        >🗑</button>
       </div>
 
-      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '8px 0' }} />
-
       {/* Transform */}
-      <VecInput
-        label="POSITION"
-        value={model.position}
-        step={0.1}
-        decimals={2}
-        onChange={v => updateModelTransform(model.id, 'position', v)}
-      />
-      <VecInput
-        label="ROTATION (deg)"
-        value={model.rotation}
-        step={1}
-        decimals={1}
-        scale={DEG}
-        onChange={v => updateModelTransform(model.id, 'rotation', v)}
-      />
-      <VecInput
-        label="SCALE"
-        value={model.scale}
-        step={0.05}
-        decimals={2}
-        onChange={v => updateModelTransform(model.id, 'scale', v)}
-      />
-
-      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '8px 0' }} />
-
-      {/* Animation */}
+      <Section title="Transform">
+        <Vec3 label="Position" value={model.position} step={0.1} decimals={2}
+          onChange={v => updateModelTransform(model.id, 'position', v)} />
+        <Vec3 label="Rotation (deg)" value={model.rotation} step={1} decimals={1} scale={DEG}
+          onChange={v => updateModelTransform(model.id, 'rotation', v)} />
+        <Vec3 label="Scale" value={model.scale} step={0.05} decimals={2}
+          onChange={v => updateModelTransform(model.id, 'scale', v)} />
+        <button
+          onClick={() => {
+            updateModelTransform(model.id, 'position', [0,0,0])
+            updateModelTransform(model.id, 'rotation', [0,0,0])
+            updateModelTransform(model.id, 'scale', [1,1,1])
+          }}
+          style={{
+            width:'100%', marginTop:4, padding:'5px 0',
+            background:'var(--bg2)', border:'1px solid var(--border)',
+            borderRadius:'var(--radius-sm)', color:'var(--text2)',
+            fontSize:11, cursor:'pointer', transition:'all 0.12s',
+          }}
+          onMouseEnter={e => { e.currentTarget.style.background='var(--bg3)'; e.currentTarget.style.color='var(--text0)' }}
+          onMouseLeave={e => { e.currentTarget.style.background='var(--bg2)'; e.currentTarget.style.color='var(--text2)' }}
+        >↺ Reset Transform</button>
+      </Section>
+
+      {/* Animations */}
       {model.animations.length > 0 && (
-        <div style={{ marginBottom: 10 }}>
-          <div style={{ fontSize: 10, color: '#666', marginBottom: 6, letterSpacing: '0.1em' }}>ANIMATIONS</div>
-          <select
-            value={model.activeAnimation || ''}
-            onChange={e => setModelActiveAnimation(model.id, e.target.value)}
-            style={{
-              width: '100%', background: '#0d0d1a',
-              border: '1px solid rgba(255,255,255,0.1)',
-              color: '#ddd', padding: '6px 8px',
-              borderRadius: 4, fontSize: 11,
-              fontFamily: 'Space Mono', marginBottom: 6,
-              cursor: 'pointer',
-            }}
-          >
-            {model.animations.map(a => (
-              <option key={a} value={a}>{a}</option>
+        <Section title="Animations">
+          <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
+            {model.animations.map(anim => (
+              <button key={anim}
+                onClick={() => setModelActiveAnimation(model.id, anim)}
+                style={{
+                  padding:'7px 10px', borderRadius:'var(--radius-sm)',
+                  background: model.activeAnimation===anim ? 'rgba(6,214,160,0.1)' : 'var(--bg2)',
+                  border:`1px solid ${model.activeAnimation===anim ? 'rgba(6,214,160,0.3)' : 'var(--border)'}`,
+                  color: model.activeAnimation===anim ? 'var(--accent3)' : 'var(--text1)',
+                  fontSize:11, textAlign:'left', cursor:'pointer', transition:'all 0.12s',
+                  display:'flex', alignItems:'center', gap:6,
+                }}
+              >
+                <span>{model.activeAnimation===anim ? '▶' : '○'}</span>
+                {anim}
+              </button>
             ))}
-          </select>
-
-          <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>SPEED</div>
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-            <input
-              type="range" min={0.1} max={3} step={0.1}
+          </div>
+          <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8 }}>
+            <span style={{ fontSize:10, color:'var(--text2)' }}>Speed</span>
+            <input type="range" min={0.1} max={3} step={0.05}
               value={model.animationSpeed}
-              onChange={e => setModelAnimSpeed(model.id, parseFloat(e.target.value))}
-              style={{ flex: 1 }}
-            />
-            <span style={{ color: '#00f5ff', fontSize: 11, minWidth: 30 }}>
-              {model.animationSpeed.toFixed(1)}x
+              onChange={e => setModelAnimSpeed(model.id, parseFloat(e.target.value))} />
+            <span style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--accent)', minWidth:32 }}>
+              {model.animationSpeed.toFixed(1)}×
             </span>
           </div>
-        </div>
+        </Section>
       )}
 
-      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '8px 0' }} />
-
-      {/* Keyframe at current frame */}
-      <div style={{ marginBottom: 8 }}>
-        <div style={{ fontSize: 10, color: '#666', marginBottom: 6, letterSpacing: '0.1em' }}>
-          KEYFRAME @ FRAME {currentFrame}
-        </div>
-        <div style={{ display: 'flex', gap: 6 }}>
+      {/* Keyframes */}
+      <Section title="Keyframes">
+        <div style={{ display:'flex', gap:5, marginBottom:8 }}>
           <button
             onClick={() => addKeyframe(currentFrame, model.id)}
             style={{
-              flex: 1, padding: '7px 0',
-              background: hasKfAtFrame ? 'rgba(255,170,0,0.2)' : 'rgba(0,245,255,0.1)',
-              border: `1px solid ${hasKfAtFrame ? '#ffaa00' : '#00f5ff'}`,
-              color: hasKfAtFrame ? '#ffaa00' : '#00f5ff',
-              borderRadius: 6, cursor: 'pointer',
-              fontSize: 11, fontFamily: 'Space Mono',
+              flex:1, padding:'7px 0',
+              background: hasKfNow ? 'rgba(245,158,11,0.15)' : 'rgba(79,142,255,0.12)',
+              border:`1px solid ${hasKfNow ? 'rgba(245,158,11,0.4)' : 'rgba(79,142,255,0.3)'}`,
+              color: hasKfNow ? 'var(--warn)' : 'var(--accent)',
+              borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:11, fontWeight:600,
             }}
-          >
-            {hasKfAtFrame ? '◆ UPDATE' : '◆ ADD KF'}
-          </button>
-          {hasKfAtFrame && (
-            <button
-              onClick={() => removeKeyframe(currentFrame, model.id)}
+          >{hasKfNow ? '◆ Update' : '◆ Add Keyframe'}</button>
+          {hasKfNow && (
+            <button onClick={() => removeKeyframe(currentFrame, model.id)}
               style={{
-                padding: '7px 10px',
-                background: 'rgba(255,64,96,0.1)',
-                border: '1px solid rgba(255,64,96,0.4)',
-                color: '#ff4060', borderRadius: 6,
-                cursor: 'pointer', fontSize: 11,
-              }}
-            >✕</button>
+                padding:'7px 10px', background:'rgba(239,68,68,0.1)',
+                border:'1px solid rgba(239,68,68,0.3)', color:'var(--danger)',
+                borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:12,
+              }}>✕</button>
           )}
         </div>
-      </div>
 
-      {/* Keyframe list */}
-      {modelKeyframes.length > 0 && (
-        <div>
-          <div style={{ fontSize: 10, color: '#666', marginBottom: 6, letterSpacing: '0.1em' }}>
-            ALL KEYFRAMES ({modelKeyframes.length})
-          </div>
-          <div style={{ maxHeight: 120, overflow: 'auto' }}>
-            {modelKeyframes.map(({ frame }) => (
-              <div
-                key={frame}
+        <div style={{ fontSize:11, color:'var(--text2)', marginBottom:5 }}>
+          Frame {currentFrame} {hasKfNow ? '— keyframe set ◆' : '— no keyframe'}
+        </div>
+
+        {kfList.length > 0 && (
+          <div style={{ maxHeight:120, overflow:'auto', display:'flex', flexDirection:'column', gap:2 }}>
+            {kfList.map(({ frame }) => (
+              <div key={frame}
+                onClick={() => useStore.getState().setCurrentFrame(frame)}
                 style={{
-                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                  padding: '4px 6px', marginBottom: 2,
-                  background: frame === currentFrame ? 'rgba(255,170,0,0.1)' : 'rgba(255,255,255,0.03)',
-                  border: `1px solid ${frame === currentFrame ? 'rgba(255,170,0,0.3)' : 'transparent'}`,
-                  borderRadius: 4, cursor: 'pointer',
+                  display:'flex', justifyContent:'space-between', alignItems:'center',
+                  padding:'4px 8px', borderRadius:'var(--radius-sm)',
+                  background: frame===currentFrame ? 'rgba(245,158,11,0.1)' : 'var(--bg2)',
+                  border:`1px solid ${frame===currentFrame ? 'rgba(245,158,11,0.25)' : 'var(--border)'}`,
+                  cursor:'pointer',
                 }}
-                onClick={() => useStore.getState().setCurrentFrame(frame)}
               >
-                <span style={{ fontSize: 11, color: '#aaa' }}>Frame {frame}</span>
+                <span style={{ fontSize:11, color: frame===currentFrame ? 'var(--warn)' : 'var(--text1)' }}>
+                  Frame {frame}
+                </span>
                 <button
                   onClick={e => { e.stopPropagation(); removeKeyframe(frame, model.id) }}
-                  style={{
-                    background: 'none', border: 'none',
-                    color: '#555', cursor: 'pointer', fontSize: 11,
-                  }}
+                  style={{ background:'none', border:'none', color:'var(--text3)', cursor:'pointer', fontSize:11 }}
                 >✕</button>
               </div>
             ))}
           </div>
-        </div>
-      )}
-
-      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '8px 0' }} />
-
-      {/* Delete model */}
-      <button
-        onClick={() => { removeModel(model.id); selectModel(null) }}
-        style={{
-          width: '100%', padding: '8px 0',
-          background: 'rgba(255,64,96,0.08)',
-          border: '1px solid rgba(255,64,96,0.3)',
-          color: '#ff4060', borderRadius: 6,
-          cursor: 'pointer', fontSize: 11,
-          fontFamily: 'Space Mono',
-        }}
-      >
-        🗑 REMOVE MODEL
-      </button>
+        )}
+      </Section>
     </div>
   )
 }

src/components/SkyboxPanel.jsx

@@ -1,219 +1,176 @@
-/**
- * SkyboxPanel.jsx
- * Lets users set the scene background / skybox:
- *  - Preset environments (synced with lighting)
- *  - Solid color picker
- *  - Upload an image (JPG/PNG equirectangular)
- *  - Paste an HDR/image URL
- * Drop-in component — no other files changed.
- */
 import { useRef, useState } from 'react'
 import useStore from '../store/useStore'
 
 const PRESETS = [
-  { id: 'studio',   label: 'Studio',   icon: '💡', color: '#223' },
-  { id: 'outdoor',  label: 'Outdoor',  icon: '☀️', color: '#135' },
-  { id: 'dramatic', label: 'Dramatic', icon: '🎭', color: '#311' },
-  { id: 'neon',     label: 'Neon',     icon: '🌀', color: '#031' },
+  { id:'studio',   label:'Studio',   icon:'◎' },
+  { id:'outdoor',  label:'Outdoor',  icon:'◉' },
+  { id:'dramatic', label:'Dramatic', icon:'◈' },
+  { id:'neon',     label:'Neon',     icon:'◆' },
 ]
 
-const BG_COLORS = [
-  '#080810','#000000','#ffffff','#1a0a2e',
-  '#0a1a2e','#1a2e0a','#2e0a0a','#2e2a0a',
-]
+const COLORS = ['#0c0c10','#000000','#0a0a1a','#0d1a0a','#1a0a0a','#ffffff','#87ceeb','#1a0a2e']
 
 export default function SkyboxPanel() {
-  const skybox          = useStore(s => s.skybox)
-  const lightingPreset  = useStore(s => s.lightingPreset)
+  const skybox         = useStore(s => s.skybox)
+  const lightingPreset = useStore(s => s.lightingPreset)
   const { setSkybox, setLightingPreset } = useStore.getState()
-
-  const [urlInput, setUrlInput] = useState('')
-  const [urlType,  setUrlType]  = useState('image') // 'image' | 'hdr'
+  const [url,     setUrl]     = useState('')
+  const [urlType, setUrlType] = useState('image')
   const fileRef = useRef()
 
-  const applyPreset = (id) => {
-    setLightingPreset(id)
-    setSkybox({ type: 'preset', value: null, showBg: skybox.showBg })
-  }
-
-  const applyColor = (col) => {
-    setSkybox({ type: 'color', bgColor: col, showBg: true })
-  }
-
-  const applyUrl = () => {
-    if (!urlInput.trim()) return
-    const isHdr = urlInput.toLowerCase().includes('.hdr') ||
-                  urlInput.toLowerCase().includes('.exr')
-    setSkybox({ type: isHdr ? 'hdr' : 'image', value: urlInput.trim(), showBg: true })
-    setUrlInput('')
-  }
-
   const handleFile = (e) => {
-    const file = e.target.files[0]
-    if (!file) return
-    const url  = URL.createObjectURL(file)
-    const isHdr = file.name.toLowerCase().endsWith('.hdr') ||
-                  file.name.toLowerCase().endsWith('.exr')
-    setSkybox({ type: isHdr ? 'hdr' : 'image', value: url, showBg: true })
+    const f = e.target.files[0]; if(!f) return
+    const isHdr = /\.(hdr|exr)$/i.test(f.name)
+    setSkybox({ type: isHdr?'hdr':'image', value: URL.createObjectURL(f), showBg:true })
   }
 
-  const clearSkybox = () => {
-    setSkybox({ type: 'preset', value: null, showBg: false, bgColor: '#080810' })
+  const applyUrl = () => {
+    if(!url.trim()) return
+    const isHdr = /\.(hdr|exr)/i.test(url)
+    setSkybox({ type:isHdr?'hdr':'image', value:url.trim(), showBg:true })
+    setUrl('')
   }
 
   return (
-    <div style={{ padding:'10px', fontFamily:'Space Mono,monospace', overflow:'auto', maxHeight:'100%' }}>
+    <div style={{ padding:12, display:'flex', flexDirection:'column', gap:12 }}>
 
       {/* Show background toggle */}
-      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
-        <span style={{ fontSize:10, color:'#555', letterSpacing:'0.1em' }}>SHOW BACKGROUND</span>
-        <button
-          onClick={() => setSkybox({ showBg: !skybox.showBg })}
-          style={{
-            padding:'4px 12px',
-            background: skybox.showBg ? 'rgba(0,245,255,0.15)' : 'rgba(255,255,255,0.05)',
-            border: `1px solid ${skybox.showBg ? '#00f5ff' : 'rgba(255,255,255,0.1)'}`,
-            color: skybox.showBg ? '#00f5ff' : '#555',
-            borderRadius:6, cursor:'pointer', fontSize:11, fontFamily:'Space Mono',
-          }}
-        >{skybox.showBg ? 'ON' : 'OFF'}</button>
+      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
+        padding:'8px 10px', background:'var(--bg2)', borderRadius:'var(--radius)',
+        border:'1px solid var(--border)' }}>
+        <div>
+          <div style={{ fontSize:12, fontWeight:600, color:'var(--text0)' }}>Show Background</div>
+          <div style={{ fontSize:10, color:'var(--text2)', marginTop:2 }}>
+            {skybox.type==='preset' ? `Preset — ${lightingPreset}` :
+             skybox.type==='color'  ? `Color — ${skybox.bgColor}` :
+             skybox.type==='image'  ? 'Custom Image' : 'HDR'}
+          </div>
+        </div>
+        <button onClick={() => setSkybox({ showBg:!skybox.showBg })} style={{
+          width:40, height:22, borderRadius:11,
+          background: skybox.showBg ? 'var(--accent)' : 'var(--bg4)',
+          border:'none', cursor:'pointer', position:'relative', transition:'background 0.2s',
+          boxShadow: skybox.showBg ? '0 0 8px rgba(79,142,255,0.4)' : 'none',
+        }}>
+          <div style={{
+            position:'absolute', top:3, left: skybox.showBg ? 20 : 3,
+            width:16, height:16, borderRadius:8, background:'#fff',
+            transition:'left 0.2s', boxShadow:'0 1px 3px rgba(0,0,0,0.4)',
+          }}/>
+        </button>
       </div>
 
-      {/* Current skybox status */}
-      <div style={{
-        padding:'8px 10px', marginBottom:10,
-        background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.07)',
-        borderRadius:6, fontSize:11, color:'#556',
-      }}>
-        <span style={{ color:'#00f5ff' }}>Active: </span>
-        {skybox.type === 'preset'  && `Preset — ${lightingPreset}`}
-        {skybox.type === 'color'   && `Color — ${skybox.bgColor}`}
-        {skybox.type === 'image'   && `Image — ${(skybox.value||'').split('/').pop().substring(0,24)}...`}
-        {skybox.type === 'hdr'     && `HDR — ${(skybox.value||'').split('/').pop().substring(0,24)}...`}
-        {(skybox.type === 'image' || skybox.type === 'hdr') && (
-          <button onClick={clearSkybox} style={{
-            marginLeft:8, background:'none', border:'none',
-            color:'#ff4060', cursor:'pointer', fontSize:11,
-          }}>✕ clear</button>
-        )}
+      {/* Preset environments */}
+      <div>
+        <div style={{ fontSize:10, color:'var(--text2)', fontWeight:600, letterSpacing:'0.08em',
+          marginBottom:6, textTransform:'uppercase' }}>Preset Environments</div>
+        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:5 }}>
+          {PRESETS.map(p => (
+            <button key={p.id}
+              onClick={() => { setLightingPreset(p.id); setSkybox({ type:'preset', value:null }) }}
+              style={{
+                padding:'9px 8px', borderRadius:'var(--radius-sm)',
+                background: skybox.type==='preset' && lightingPreset===p.id ? 'rgba(79,142,255,0.12)' : 'var(--bg2)',
+                border:`1px solid ${skybox.type==='preset' && lightingPreset===p.id ? 'rgba(79,142,255,0.3)' : 'var(--border)'}`,
+                color: skybox.type==='preset' && lightingPreset===p.id ? 'var(--accent)' : 'var(--text1)',
+                fontSize:12, cursor:'pointer', textAlign:'left', transition:'all 0.12s',
+                display:'flex', alignItems:'center', gap:6,
+              }}
+            ><span style={{ opacity:0.7 }}>{p.icon}</span> {p.label}</button>
+          ))}
+        </div>
       </div>
 
-      <hr style={{ border:'none', borderTop:'1px solid rgba(255,255,255,0.07)', margin:'0 0 10px' }} />
-
-      {/* ── Preset environments ── */}
-      <div style={{ fontSize:10, color:'#555', letterSpacing:'0.1em', marginBottom:6 }}>
-        PRESET ENVIRONMENTS
-      </div>
-      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:5, marginBottom:12 }}>
-        {PRESETS.map(p => (
-          <button key={p.id} onClick={() => applyPreset(p.id)} style={{
-            padding:'8px 6px',
-            background: skybox.type==='preset' && lightingPreset===p.id
-              ? `${p.color}88` : 'rgba(255,255,255,0.03)',
-            border: `1px solid ${skybox.type==='preset' && lightingPreset===p.id
-              ? '#00f5ff55' : 'rgba(255,255,255,0.08)'}`,
-            borderRadius:6, cursor:'pointer', fontSize:11,
-            color: skybox.type==='preset' && lightingPreset===p.id ? '#fff' : '#666',
-            fontFamily:'Space Mono',
-            transition:'all 0.15s',
-          }}>
-            {p.icon} {p.label}
-          </button>
-        ))}
+      {/* Solid color */}
+      <div>
+        <div style={{ fontSize:10, color:'var(--text2)', fontWeight:600, letterSpacing:'0.08em',
+          marginBottom:6, textTransform:'uppercase' }}>Solid Color</div>
+        <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
+          {COLORS.map(col => (
+            <div key={col} onClick={() => setSkybox({ type:'color', bgColor:col, showBg:true })}
+              style={{
+                width:30, height:30, borderRadius:'var(--radius-sm)',
+                background:col, cursor:'pointer', transition:'transform 0.1s',
+                border:`2px solid ${skybox.type==='color'&&skybox.bgColor===col ? 'var(--accent)' : 'rgba(255,255,255,0.1)'}`,
+                boxShadow: skybox.type==='color'&&skybox.bgColor===col ? '0 0 8px rgba(79,142,255,0.5)' : 'none',
+              }}
+              onMouseEnter={e=>e.currentTarget.style.transform='scale(1.1)'}
+              onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}
+            />
+          ))}
+          {/* Color picker */}
+          <label style={{ width:30, height:30, borderRadius:'var(--radius-sm)', cursor:'pointer',
+            border:'1px dashed var(--border-hi)', display:'flex', alignItems:'center', justifyContent:'center',
+            color:'var(--text2)', fontSize:18, overflow:'hidden' }}>
+            +
+            <input type="color" onChange={e=>setSkybox({type:'color',bgColor:e.target.value,showBg:true})}
+              style={{ position:'absolute', opacity:0, width:0, height:0 }} />
+          </label>
+        </div>
       </div>
 
-      <hr style={{ border:'none', borderTop:'1px solid rgba(255,255,255,0.07)', margin:'0 0 10px' }} />
-
-      {/* ── Solid color ── */}
-      <div style={{ fontSize:10, color:'#555', letterSpacing:'0.1em', marginBottom:6 }}>
-        SOLID COLOR
-      </div>
-      <div style={{ display:'flex', gap:5, flexWrap:'wrap', marginBottom:6 }}>
-        {BG_COLORS.map(col => (
-          <div key={col} onClick={() => applyColor(col)} style={{
-            width:28, height:28, borderRadius:5,
-            background: col,
-            border: `2px solid ${skybox.type==='color' && skybox.bgColor===col
-              ? '#00f5ff' : 'rgba(255,255,255,0.15)'}`,
-            cursor:'pointer',
-            boxShadow: skybox.type==='color' && skybox.bgColor===col
-              ? '0 0 8px #00f5ff' : 'none',
-            transition:'all 0.15s',
-          }} />
-        ))}
-        {/* Custom color picker */}
-        <label style={{ width:28, height:28, borderRadius:5, overflow:'hidden', cursor:'pointer',
-          border:'1px dashed rgba(255,255,255,0.2)', display:'flex', alignItems:'center', justifyContent:'center' }}>
-          <span style={{ fontSize:16, pointerEvents:'none' }}>+</span>
-          <input type="color" defaultValue="#080810"
-            onChange={e => applyColor(e.target.value)}
-            style={{ position:'absolute', opacity:0, width:0, height:0 }} />
-        </label>
-      </div>
-
-      <hr style={{ border:'none', borderTop:'1px solid rgba(255,255,255,0.07)', margin:'8px 0 10px' }} />
-
-      {/* ── Upload image / HDR ── */}
-      <div style={{ fontSize:10, color:'#555', letterSpacing:'0.1em', marginBottom:6 }}>
-        UPLOAD SKYBOX IMAGE / HDR
-      </div>
-      <div style={{ display:'flex', gap:5, marginBottom:8 }}>
+      {/* Upload */}
+      <div>
+        <div style={{ fontSize:10, color:'var(--text2)', fontWeight:600, letterSpacing:'0.08em',
+          marginBottom:6, textTransform:'uppercase' }}>Upload Skybox</div>
         <button onClick={() => fileRef.current?.click()} style={{
-          flex:1, padding:'8px 0',
-          background:'rgba(0,245,255,0.08)', border:'1px solid rgba(0,245,255,0.2)',
-          color:'#00f5ff', borderRadius:6, cursor:'pointer',
-          fontSize:11, fontFamily:'Space Mono',
-        }}>
-          📁 UPLOAD FILE
-        </button>
-        <input ref={fileRef} type="file" accept=".jpg,.jpeg,.png,.hdr,.exr"
-          style={{ display:'none' }} onChange={handleFile} />
+          width:'100%', padding:'10px', borderRadius:'var(--radius)',
+          background:'var(--bg2)', border:'2px dashed var(--border-hi)',
+          color:'var(--text1)', fontSize:12, cursor:'pointer', transition:'all 0.15s',
+        }}
+          onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent)';e.currentTarget.style.color='var(--text0)'}}
+          onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border-hi)';e.currentTarget.style.color='var(--text1)'}}
+        >📁 Upload Image / HDR / EXR</button>
+        <input ref={fileRef} type="file" accept=".jpg,.jpeg,.png,.hdr,.exr" style={{display:'none'}} onChange={handleFile} />
+        <div style={{ fontSize:10, color:'var(--text3)', marginTop:4 }}>
+          JPG/PNG equirectangular · HDR · EXR
+        </div>
       </div>
-      <div style={{ fontSize:10, color:'#444', marginBottom:4 }}>Accepts: JPG, PNG (equirectangular), HDR, EXR</div>
-
-      <hr style={{ border:'none', borderTop:'1px solid rgba(255,255,255,0.07)', margin:'8px 0 10px' }} />
 
-      {/* ── Paste URL ── */}
-      <div style={{ fontSize:10, color:'#555', letterSpacing:'0.1em', marginBottom:6 }}>
-        PASTE IMAGE / HDR URL
+      {/* URL */}
+      <div>
+        <div style={{ fontSize:10, color:'var(--text2)', fontWeight:600, letterSpacing:'0.08em',
+          marginBottom:6, textTransform:'uppercase' }}>Paste URL</div>
+        <div style={{ display:'flex', gap:5, marginBottom:4 }}>
+          {['image','hdr'].map(t=>(
+            <button key={t} onClick={()=>setUrlType(t)} style={{
+              flex:1, padding:'4px 0', borderRadius:'var(--radius-sm)',
+              background:urlType===t?'rgba(79,142,255,0.12)':'var(--bg2)',
+              border:`1px solid ${urlType===t?'rgba(79,142,255,0.3)':'var(--border)'}`,
+              color:urlType===t?'var(--accent)':'var(--text1)',
+              fontSize:10, fontWeight:600, cursor:'pointer',
+            }}>{t.toUpperCase()}</button>
+          ))}
+        </div>
+        <div style={{ display:'flex', gap:5 }}>
+          <input value={url} onChange={e=>setUrl(e.target.value)}
+            onKeyDown={e=>e.key==='Enter'&&applyUrl()}
+            placeholder="https://…equirectangular.jpg" style={{ flex:1 }} />
+          <button onClick={applyUrl} style={{
+            padding:'5px 10px', borderRadius:'var(--radius-sm)',
+            background:'var(--accent)', border:'none', color:'#fff',
+            fontSize:11, fontWeight:600, cursor:'pointer', flexShrink:0,
+          }}>Apply</button>
+        </div>
       </div>
-      <div style={{ display:'flex', gap:5, marginBottom:4 }}>
-        {['image','hdr'].map(t => (
-          <button key={t} onClick={() => setUrlType(t)} style={{
-            flex:1, padding:'5px 0',
-            background: urlType===t ? 'rgba(255,170,0,0.12)' : 'rgba(255,255,255,0.04)',
-            border: `1px solid ${urlType===t ? 'rgba(255,170,0,0.4)' : 'rgba(255,255,255,0.1)'}`,
-            color: urlType===t ? '#ffaa00' : '#555',
-            borderRadius:4, cursor:'pointer', fontSize:10, fontFamily:'Space Mono',
-          }}>{t.toUpperCase()}</button>
-        ))}
-      </div>
-      <input
-        value={urlInput}
-        onChange={e => setUrlInput(e.target.value)}
-        onKeyDown={e => e.key==='Enter' && applyUrl()}
-        placeholder="https://...equirectangular.jpg"
-        style={{
-          width:'100%', padding:'7px 8px', marginBottom:6,
-          background:'rgba(0,10,30,0.7)', border:'1px solid rgba(0,245,255,0.18)',
-          borderRadius:6, color:'#d0e8ff', fontSize:11,
-          fontFamily:'Space Mono', outline:'none', display:'block',
-        }}
-      />
-      <button onClick={applyUrl} style={{
-        width:'100%', padding:'8px 0',
-        background:'rgba(255,170,0,0.1)', border:'1px solid rgba(255,170,0,0.3)',
-        color:'#ffaa00', borderRadius:6, cursor:'pointer',
-        fontSize:11, fontFamily:'Space Mono',
-      }}>APPLY URL</button>
 
-      <div style={{ marginTop:10, padding:'8px', background:'rgba(0,245,255,0.03)',
-        border:'1px solid rgba(0,245,255,0.07)', borderRadius:6, fontSize:10, color:'#334455', lineHeight:1.7 }}>
-        💡 Free equirectangular HDRs:<br/>
+      {/* Free HDR link */}
+      <div style={{ padding:'10px', background:'var(--bg2)', borderRadius:'var(--radius)',
+        border:'1px solid var(--border)', fontSize:11, color:'var(--text2)', lineHeight:1.6 }}>
+        💡 Free HDRIs at{' '}
         <a href="https://polyhaven.com/hdris" target="_blank"
-          style={{ color:'#0077aa', textDecoration:'none' }}>polyhaven.com/hdris ↗</a><br/>
-        Right-click → Copy image address → paste above
+          style={{ color:'var(--accent)', textDecoration:'none' }}>polyhaven.com ↗</a>
+        <br/>Right-click 1K JPEG → Copy image address → paste above
       </div>
+
+      {/* Clear */}
+      {(skybox.type==='image'||skybox.type==='hdr') && (
+        <button onClick={() => setSkybox({type:'preset',value:null,showBg:false,bgColor:'#0c0c10'})} style={{
+          padding:'7px 0', borderRadius:'var(--radius-sm)',
+          background:'rgba(239,68,68,0.08)', border:'1px solid rgba(239,68,68,0.2)',
+          color:'var(--danger)', fontSize:11, cursor:'pointer',
+        }}>✕ Clear Custom Skybox</button>
+      )}
     </div>
   )
 }

src/components/Timeline.jsx

@@ -1,313 +1,244 @@
-import { useRef, useState, useCallback } from 'react'
+import { useRef, useState, useCallback, useEffect } from 'react'
 import useStore from '../store/useStore'
 
-const FRAME_WIDTH = 4 // px per frame in timeline
-const TRACK_HEIGHT = 32
+const TRACK_H  = 28
+const COLORS   = ['#4f8eff','#ef4444','#22c55e','#f59e0b','#8b5cf6','#f97316']
 
-function KeyframeDot({ frame, modelId, modelColor, timelineWidth, totalFrames, onDragEnd }) {
-  const removeKeyframe = useStore(s => s.removeKeyframe)
-  const moveKeyframe = useStore(s => s.moveKeyframe)
-  const dragging = useRef(false)
-  const startX = useRef(0)
-  const startFrame = useRef(frame)
+function KeyframeDot({ frame, modelId, color, trackW, totalFrames }) {
+  const { moveKeyframe, removeKeyframe } = useStore.getState()
+  const x = (frame / totalFrames) * trackW
 
-  const x = (frame / totalFrames) * timelineWidth
-
-  const handlePointerDown = (e) => {
+  const onPointerDown = (e) => {
     e.stopPropagation()
-    dragging.current = true
-    startX.current = e.clientX
-    startFrame.current = frame
-
-    const handleMove = (me) => {
-      if (!dragging.current) return
-      const dx = me.clientX - startX.current
-      const dFrames = Math.round((dx / timelineWidth) * totalFrames)
-      const newFrame = Math.max(0, Math.min(totalFrames - 1, startFrame.current + dFrames))
-      if (newFrame !== frame) {
-        moveKeyframe(frame, newFrame, modelId)
-        startX.current = me.clientX
-        startFrame.current = newFrame
-      }
+    const startX = e.clientX, startF = frame
+    const move = me => {
+      const dx   = me.clientX - startX
+      const newF = Math.max(0, Math.min(totalFrames-1, Math.round(startF + (dx/trackW)*totalFrames)))
+      if (newF !== frame) moveKeyframe(frame, newF, modelId)
     }
-
-    const handleUp = () => {
-      dragging.current = false
-      window.removeEventListener('pointermove', handleMove)
-      window.removeEventListener('pointerup', handleUp)
-    }
-
-    window.addEventListener('pointermove', handleMove)
-    window.addEventListener('pointerup', handleUp)
+    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup',   up)
   }
 
   return (
     <div
+      onPointerDown={onPointerDown}
+      onDoubleClick={e => { e.stopPropagation(); removeKeyframe(frame, modelId) }}
+      title={`Frame ${frame} — drag to move, dbl-click to delete`}
       style={{
-        position: 'absolute',
-        left: x - 5,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        width: 10,
-        height: 10,
-        background: modelColor,
-        border: '1px solid rgba(255,255,255,0.5)',
-        borderRadius: '50%',
-        cursor: 'grab',
-        zIndex: 10,
-        boxShadow: `0 0 6px ${modelColor}`,
+        position:'absolute', left: x - 5, top:'50%', transform:'translateY(-50%)',
+        width:10, height:10, borderRadius:2,
+        background: color, cursor:'ew-resize', zIndex:10,
+        boxShadow:`0 0 6px ${color}88`,
+        border:'1px solid rgba(255,255,255,0.3)',
+        rotate:'45deg',
+        transition:'transform 0.1s',
       }}
-      onPointerDown={handlePointerDown}
-      onDoubleClick={(e) => { e.stopPropagation(); removeKeyframe(frame, modelId) }}
-      title={`Frame ${frame} — double click to delete`}
     />
   )
 }
 
-function TimelineTrack({ model, timelineWidth }) {
-  const totalFrames = useStore(s => s.totalFrames)
-  const keyframes = useStore(s => s.keyframes)
-  const selectedModelId = useStore(s => s.selectedModelId)
-  const selectModel = useStore(s => s.selectModel)
-
-  const modelKeyframes = Object.entries(keyframes)
-    .filter(([, kf]) => kf[model.id])
-    .map(([f]) => parseInt(f))
-
-  const colors = ['#00f5ff', '#ff4080', '#40ff80', '#ffaa00', '#aa40ff', '#ff8040']
-  const colorIndex = useStore(s => s.models).findIndex(m => m.id === model.id) % colors.length
-  const color = colors[colorIndex]
-
-  const isSelected = selectedModelId === model.id
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height: TRACK_HEIGHT,
-        width: timelineWidth,
-        background: isSelected ? 'rgba(0,245,255,0.04)' : 'rgba(255,255,255,0.02)',
-        borderBottom: '1px solid rgba(255,255,255,0.06)',
-        cursor: 'pointer',
-      }}
-      onClick={() => selectModel(model.id)}
-    >
-      {/* Track bar */}
-      <div style={{
-        position: 'absolute', top: '45%', left: 0, right: 0,
-        height: 2, background: 'rgba(255,255,255,0.08)'
-      }} />
-
-      {modelKeyframes.map(f => (
-        <KeyframeDot
-          key={f} frame={f} modelId={model.id}
-          modelColor={color} timelineWidth={timelineWidth}
-          totalFrames={totalFrames}
-        />
-      ))}
-    </div>
-  )
-}
-
 export default function Timeline() {
   const {
-    currentFrame, setCurrentFrame, totalFrames, fps,
-    isPlaying, setIsPlaying,
-    models, selectedModelId, addKeyframe,
-    showTimeline, setShowTimeline,
-    keyframes
+    models, keyframes, currentFrame, totalFrames, fps, isPlaying,
+    setCurrentFrame, setIsPlaying, addKeyframe, selectedModelId,
+    showTimeline, setShowTimeline, setTotalFrames, setFps,
   } = useStore()
 
-  const timelineRef = useRef()
-  const [timelineWidth, setTimelineWidth] = useState(600)
-  const containerRef = useRef()
+  const rulerRef  = useRef()
+  const [trackW, setTrackW] = useState(600)
+  const [settings, setSettings] = useState(false)
 
-  // Observe container width
   const measuredRef = useCallback(node => {
     if (!node) return
-    const ro = new ResizeObserver(entries => {
-      setTimelineWidth(entries[0].contentRect.width)
-    })
+    const ro = new ResizeObserver(e => setTrackW(e[0].contentRect.width))
     ro.observe(node)
     return () => ro.disconnect()
   }, [])
 
-  const scrub = (e) => {
-    if (!containerRef.current) return
-    const rect = containerRef.current.getBoundingClientRect()
-    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left
-    const frame = Math.round((x / timelineWidth) * totalFrames)
-    setCurrentFrame(Math.max(0, Math.min(frame, totalFrames - 1)))
-  }
+  const scrub = useCallback((clientX) => {
+    const rect = rulerRef.current?.getBoundingClientRect()
+    if (!rect) return
+    const x = clientX - rect.left
+    setCurrentFrame(Math.round(Math.max(0, Math.min(totalFrames-1, (x/trackW)*totalFrames))))
+  }, [trackW, totalFrames])
 
-  const handleTimelinePointerDown = (e) => {
-    scrub(e)
-    const move = (me) => scrub(me)
-    const up = () => {
-      window.removeEventListener('pointermove', move)
-      window.removeEventListener('pointerup', up)
-    }
+  const handlePointerDown = (e) => {
+    scrub(e.touches ? e.touches[0].clientX : e.clientX)
+    const move = me => scrub(me.touches ? me.touches[0].clientX : me.clientX)
+    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
     window.addEventListener('pointermove', move)
-    window.addEventListener('pointerup', up)
+    window.addEventListener('pointerup',   up)
   }
 
-  const allKeyframeFrames = Object.keys(keyframes).map(Number)
-  const playheadX = (currentFrame / totalFrames) * timelineWidth
+  const playheadX = (currentFrame / totalFrames) * trackW
+  const duration  = (totalFrames / fps).toFixed(1)
 
-  if (!showTimeline) {
-    return (
-      <button
-        onClick={() => setShowTimeline(true)}
-        style={{
-          position: 'absolute', bottom: 4, left: '50%',
-          transform: 'translateX(-50%)',
-          background: '#1a1a2e', border: '1px solid #333',
-          color: '#00f5ff', padding: '4px 16px',
-          borderRadius: 8, cursor: 'pointer', fontSize: 11,
-          fontFamily: 'Space Mono, monospace'
-        }}
-      >
-        SHOW TIMELINE
-      </button>
-    )
-  }
+  if (!showTimeline) return (
+    <div style={{ position:'absolute', bottom:8, left:'50%', transform:'translateX(-50%)', zIndex:200 }}>
+      <button onClick={() => setShowTimeline(true)} style={{
+        padding:'5px 16px', borderRadius:20, border:'1px solid var(--border-hi)',
+        background:'var(--bg2)', color:'var(--text1)', fontSize:11, cursor:'pointer',
+      }}>Show Timeline</button>
+    </div>
+  )
 
   return (
     <div style={{
-      position: 'absolute', bottom: 0, left: 0, right: 0,
-      background: 'rgba(8,8,20,0.97)',
-      borderTop: '1px solid rgba(0,245,255,0.2)',
-      zIndex: 100,
-      userSelect: 'none',
+      position:'absolute', bottom:0, left:0, right:0,
+      background:'var(--bg1)',
+      borderTop:'1px solid var(--border)',
+      zIndex:200, userSelect:'none',
     }}>
-      {/* Timeline header */}
+      {/* Transport bar */}
       <div style={{
-        display: 'flex', alignItems: 'center', gap: 8,
-        padding: '6px 10px',
-        borderBottom: '1px solid rgba(255,255,255,0.06)',
-        background: 'rgba(0,0,20,0.5)',
+        display:'flex', alignItems:'center', gap:6,
+        padding:'5px 10px',
+        borderBottom:'1px solid var(--border)',
       }}>
-        {/* Transport */}
-        <button onClick={() => setCurrentFrame(0)} style={btnStyle} title="Go to start">⏮</button>
-        <button
-          onClick={() => setCurrentFrame(Math.max(0, currentFrame - 1))}
-          style={btnStyle} title="Previous frame"
-        >◀</button>
-        <button
-          onClick={() => setIsPlaying(!isPlaying)}
-          style={{ ...btnStyle, background: isPlaying ? '#ff4060' : '#00f5ff', color: '#000', minWidth: 40 }}
-        >
-          {isPlaying ? '⏸' : '▶'}
-        </button>
-        <button
-          onClick={() => setCurrentFrame(Math.min(totalFrames - 1, currentFrame + 1))}
-          style={btnStyle} title="Next frame"
-        >▶</button>
-        <button onClick={() => setCurrentFrame(totalFrames - 1)} style={btnStyle} title="Go to end">⏭</button>
-
-        <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.15)' }} />
-
-        {/* Frame counter */}
-        <span style={{ color: '#00f5ff', fontSize: 12, fontFamily: 'Space Mono', minWidth: 80 }}>
-          {String(currentFrame).padStart(4, '0')} / {totalFrames}
-        </span>
+        <button onClick={() => setCurrentFrame(0)} style={tbtn} title="First frame">⏮</button>
+        <button onClick={() => setCurrentFrame(Math.max(0,currentFrame-1))} style={tbtn}>◀</button>
+        <button onClick={() => setIsPlaying(!isPlaying)} style={{
+          ...tbtn,
+          background: isPlaying ? 'var(--danger)' : 'var(--accent)',
+          color:'#fff', minWidth:32,
+          boxShadow: isPlaying ? '0 0 8px rgba(239,68,68,0.4)' : '0 0 8px rgba(79,142,255,0.4)',
+        }}>{isPlaying ? '⏸' : '▶'}</button>
+        <button onClick={() => setCurrentFrame(Math.min(totalFrames-1,currentFrame+1))} style={tbtn}>▶</button>
+        <button onClick={() => setCurrentFrame(totalFrames-1)} style={tbtn}>⏭</button>
+
+        <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text1)',
+          background:'var(--bg3)', padding:'3px 8px', borderRadius:'var(--radius-sm)',
+          border:'1px solid var(--border)', flexShrink:0 }}>
+          <span style={{ color:'var(--text0)', fontWeight:600 }}>{String(currentFrame).padStart(4,'0')}</span>
+          <span style={{ color:'var(--text3)' }}>/{totalFrames}</span>
+        </div>
 
-        <span style={{ color: '#666', fontSize: 11 }}>{fps}fps</span>
+        <span style={{ fontSize:10, color:'var(--text3)' }}>{duration}s</span>
 
-        <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.15)' }} />
+        <div style={{ width:1, height:16, background:'var(--border)', margin:'0 2px' }} />
 
-        {/* Add keyframe button */}
         {selectedModelId && (
           <button
             onClick={() => addKeyframe(currentFrame, selectedModelId)}
             style={{
-              ...btnStyle,
-              background: 'rgba(255,170,0,0.15)',
-              borderColor: '#ffaa00',
-              color: '#ffaa00',
+              ...tbtn,
+              background:'rgba(245,158,11,0.12)',
+              borderColor:'rgba(245,158,11,0.3)',
+              color:'var(--warn)', fontWeight:600,
             }}
-            title="Add keyframe for selected model at current frame"
-          >
-            ◆ ADD KF
-          </button>
+          >◆ Key</button>
         )}
 
-        <div style={{ flex: 1 }} />
-        <button onClick={() => setShowTimeline(false)} style={btnStyle} title="Hide timeline">✕</button>
+        <div style={{ flex:1 }} />
+
+        <button onClick={() => setSettings(!settings)} style={{ ...tbtn, opacity: settings ? 1 : 0.5 }} title="Timeline settings">⚙</button>
+        <button onClick={() => setShowTimeline(false)} style={tbtn} title="Hide timeline">✕</button>
       </div>
 
-      {/* Track labels + scrubber area */}
-      <div style={{ display: 'flex', maxHeight: 120, overflow: 'hidden' }}>
-        {/* Track labels */}
-        <div style={{ width: 100, flexShrink: 0, borderRight: '1px solid rgba(255,255,255,0.08)' }}>
-          <div style={{
-            height: 20, borderBottom: '1px solid rgba(255,255,255,0.06)',
-            padding: '2px 6px', fontSize: 10, color: '#444',
-          }}>TRACKS</div>
-          {models.map((m, i) => {
-            const colors = ['#00f5ff', '#ff4080', '#40ff80', '#ffaa00', '#aa40ff', '#ff8040']
-            const c = colors[i % colors.length]
-            return (
-              <div key={m.id} style={{
-                height: TRACK_HEIGHT, display: 'flex', alignItems: 'center',
-                padding: '0 8px', fontSize: 10, color: c,
-                borderBottom: '1px solid rgba(255,255,255,0.04)',
-                overflow: 'hidden', whiteSpace: 'nowrap',
-              }}>
-                <span style={{ marginRight: 4 }}>●</span>
-                {m.name.substring(0, 8)}
-              </div>
-            )
-          })}
+      {/* Settings row */}
+      {settings && (
+        <div style={{
+          display:'flex', gap:12, padding:'6px 12px',
+          borderBottom:'1px solid var(--border)',
+          background:'var(--bg2)', fontSize:11, color:'var(--text1)',
+          alignItems:'center',
+        }}>
+          <span>Frames:</span>
+          {[120,200,300,500].map(f => (
+            <button key={f} onClick={() => setTotalFrames(f)} style={{
+              ...tbtn, padding:'2px 8px', fontSize:10,
+              background: totalFrames===f ? 'rgba(79,142,255,0.15)' : 'var(--bg3)',
+              borderColor: totalFrames===f ? 'rgba(79,142,255,0.4)' : 'var(--border)',
+              color: totalFrames===f ? 'var(--accent)' : 'var(--text1)',
+            }}>{f}</button>
+          ))}
+          <span style={{ marginLeft:8 }}>FPS:</span>
+          {[24,30,60].map(f => (
+            <button key={f} onClick={() => setFps(f)} style={{
+              ...tbtn, padding:'2px 8px', fontSize:10,
+              background: fps===f ? 'rgba(79,142,255,0.15)' : 'var(--bg3)',
+              borderColor: fps===f ? 'rgba(79,142,255,0.4)' : 'var(--border)',
+              color: fps===f ? 'var(--accent)' : 'var(--text1)',
+            }}>{f}</button>
+          ))}
+        </div>
+      )}
+
+      {/* Track area */}
+      <div style={{ display:'flex', maxHeight:160, overflow:'hidden' }}>
+        {/* Labels */}
+        <div style={{ width:100, flexShrink:0, borderRight:'1px solid var(--border)' }}>
+          <div style={{ height:20, display:'flex', alignItems:'center', padding:'0 8px',
+            borderBottom:'1px solid var(--border)', fontSize:9, color:'var(--text3)', fontWeight:600, letterSpacing:'0.1em' }}>
+            LAYERS
+          </div>
+          {models.map((m,i) => (
+            <div key={m.id} style={{
+              height:TRACK_H, display:'flex', alignItems:'center',
+              padding:'0 8px', gap:6, fontSize:11,
+              color: COLORS[i%COLORS.length],
+              borderBottom:'1px solid var(--border)',
+              overflow:'hidden',
+            }}>
+              <div style={{ width:6, height:6, borderRadius:1, background:COLORS[i%COLORS.length], flexShrink:0, rotate:'45deg' }} />
+              <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', fontSize:10 }}>
+                {m.name.substring(0,10)}
+              </span>
+            </div>
+          ))}
         </div>
 
-        {/* Scrollable timeline */}
-        <div style={{ flex: 1, overflow: 'auto hidden' }}>
-          {/* Frame ruler */}
-          <div
-            ref={el => { measuredRef(el); containerRef.current = el }}
-            style={{ position: 'relative', height: 20, borderBottom: '1px solid rgba(255,255,255,0.06)', cursor: 'crosshair' }}
-            onPointerDown={handleTimelinePointerDown}
+        {/* Scrollable ruler + tracks */}
+        <div style={{ flex:1, overflow:'auto hidden' }}>
+          {/* Ruler */}
+          <div ref={el => { measuredRef(el); rulerRef.current = el }}
+            style={{ position:'relative', height:20, borderBottom:'1px solid var(--border)',
+              cursor:'crosshair', background:'var(--bg2)' }}
+            onPointerDown={handlePointerDown}
+            onTouchStart={e => handlePointerDown(e)}
           >
-            {Array.from({ length: Math.ceil(totalFrames / 10) }, (_, i) => {
-              const f = i * 10
-              const x = (f / totalFrames) * timelineWidth
+            {Array.from({ length: Math.ceil(totalFrames/10) }, (_,i) => {
+              const f = i*10, x = (f/totalFrames)*trackW
               return (
-                <div key={f} style={{
-                  position: 'absolute', left: x,
-                  top: 0, bottom: 0,
-                  borderLeft: '1px solid rgba(255,255,255,0.1)',
-                  paddingLeft: 2,
-                }}>
-                  <span style={{ fontSize: 8, color: '#444', lineHeight: '20px' }}>{f}</span>
+                <div key={f} style={{ position:'absolute', left:x, top:0, bottom:0,
+                  borderLeft:`1px solid ${f%50===0 ? 'var(--border-hi)' : 'var(--border)'}` }}>
+                  {f%10===0 && <span style={{ fontSize:8, color:'var(--text3)', paddingLeft:2, lineHeight:'20px', pointerEvents:'none' }}>{f}</span>}
                 </div>
               )
             })}
-
-            {/* Playhead on ruler */}
-            <div style={{
-              position: 'absolute', left: playheadX, top: 0, bottom: 0,
-              width: 2, background: '#00f5ff',
-              boxShadow: '0 0 8px #00f5ff',
-              pointerEvents: 'none', zIndex: 20,
-            }} />
+            <div style={{ position:'absolute', left:playheadX, top:0, bottom:0, width:2,
+              background:'var(--accent)', boxShadow:'0 0 6px rgba(79,142,255,0.6)', pointerEvents:'none', zIndex:20 }}>
+              <div style={{ position:'absolute', top:-1, left:-3, width:8, height:8,
+                background:'var(--accent)', borderRadius:'0 0 3px 3px', clipPath:'polygon(50% 0,100% 100%,0 100%)' }} />
+            </div>
           </div>
 
           {/* Tracks */}
-          <div
-            style={{ position: 'relative' }}
-            ref={timelineRef}
-          >
-            {models.map(m => (
-              <TimelineTrack key={m.id} model={m} timelineWidth={timelineWidth} />
-            ))}
-
-            {/* Playhead line across tracks */}
-            <div style={{
-              position: 'absolute', left: playheadX, top: 0, bottom: 0,
-              width: 2, background: 'rgba(0,245,255,0.5)',
-              pointerEvents: 'none', zIndex: 20,
-            }} />
+          <div style={{ position:'relative' }}>
+            {models.map((m,i) => {
+              const c    = COLORS[i%COLORS.length]
+              const mKfs = Object.entries(keyframes).filter(([,kf])=>kf[m.id]).map(([f])=>parseInt(f))
+              return (
+                <div key={m.id} style={{
+                  position:'relative', height:TRACK_H,
+                  background: m.id===selectedModelId ? `${c}08` : 'transparent',
+                  borderBottom:'1px solid var(--border)',
+                }}>
+                  {/* Track line */}
+                  <div style={{ position:'absolute', top:'50%', left:0, right:0,
+                    height:1, background:'var(--border-hi)', opacity:0.5 }} />
+                  {mKfs.map(f => (
+                    <KeyframeDot key={f} frame={f} modelId={m.id}
+                      color={c} trackW={trackW} totalFrames={totalFrames} />
+                  ))}
+                </div>
+              )
+            })}
+            {/* Playhead */}
+            <div style={{ position:'absolute', left:playheadX, top:0, bottom:0,
+              width:1, background:'rgba(79,142,255,0.35)', pointerEvents:'none', zIndex:5 }} />
           </div>
         </div>
       </div>
@@ -315,13 +246,9 @@ export default function Timeline() {
   )
 }
 
-const btnStyle = {
-  background: 'rgba(255,255,255,0.06)',
-  border: '1px solid rgba(255,255,255,0.12)',
-  color: '#ccc',
-  borderRadius: 4,
-  padding: '3px 8px',
-  cursor: 'pointer',
-  fontSize: 12,
-  fontFamily: 'Space Mono, monospace',
+const tbtn = {
+  padding:'4px 8px', borderRadius:'var(--radius-sm)',
+  background:'var(--bg3)', border:'1px solid var(--border)',
+  color:'var(--text1)', fontSize:12, cursor:'pointer', flexShrink:0,
+  transition:'all 0.12s',
 }

src/components/Toolbar.jsx

@@ -1,129 +1,189 @@
+import { useState } from 'react'
 import useStore from '../store/useStore'
 
+const S = {
+  bar: {
+    position: 'relative', zIndex: 300,
+    display: 'flex', alignItems: 'center', gap: 2,
+    padding: '0 10px',
+    height: 46,
+    background: 'var(--bg1)',
+    borderBottom: '1px solid var(--border)',
+    boxShadow: '0 1px 0 rgba(255,255,255,0.04)',
+    overflowX: 'auto', overflowY: 'hidden',
+    flexShrink: 0,
+  },
+  brand: {
+    fontFamily: 'var(--font-brand)',
+    fontSize: 15, fontWeight: 800,
+    letterSpacing: '-0.01em',
+    color: 'var(--text0)',
+    marginRight: 8,
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  },
+  div: {
+    width: 1, height: 20,
+    background: 'var(--border)',
+    margin: '0 6px', flexShrink: 0,
+  },
+}
+
+function ToolBtn({ icon, label, active, onClick, color, shortcut }) {
+  const [hover, setHover] = useState(false)
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      title={shortcut ? `${label} [${shortcut}]` : label}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 5,
+        padding: '5px 10px',
+        borderRadius: 'var(--radius-sm)',
+        border: active
+          ? `1px solid ${color || 'var(--accent)'}44`
+          : `1px solid ${hover ? 'var(--border-hi)' : 'transparent'}`,
+        background: active
+          ? `${color || 'var(--accent)'}18`
+          : hover ? 'var(--bg3)' : 'transparent',
+        color: active ? (color || 'var(--accent)') : hover ? 'var(--text0)' : 'var(--text1)',
+        fontSize: 12, fontWeight: 500,
+        transition: 'all 0.12s',
+        whiteSpace: 'nowrap', flexShrink: 0,
+      }}
+    >
+      <span style={{ fontSize: 14, lineHeight: 1 }}>{icon}</span>
+      <span style={{ fontSize: 11 }}>{label}</span>
+    </button>
+  )
+}
+
+function IconBtn({ icon, active, onClick, title, color }) {
+  const [h, setH] = useState(false)
+  return (
+    <button onClick={onClick} title={title}
+      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
+      style={{
+        width: 32, height: 32, borderRadius: 'var(--radius-sm)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        border: active ? `1px solid ${color||'var(--accent)'}44` : `1px solid ${h?'var(--border-hi)':'transparent'}`,
+        background: active ? `${color||'var(--accent)'}18` : h ? 'var(--bg3)' : 'transparent',
+        color: active ? (color||'var(--accent)') : h ? 'var(--text0)' : 'var(--text1)',
+        fontSize: 15, transition: 'all 0.12s', flexShrink: 0,
+      }}
+    >{icon}</button>
+  )
+}
+
 export default function Toolbar() {
   const {
     transformMode, setTransformMode,
     lightingPreset, setLightingPreset,
-    selectedModelId, addKeyframe, currentFrame,
     isPlaying, setIsPlaying,
+    selectedModelId, addKeyframe, currentFrame,
+    currentFrame: cf, setCurrentFrame, totalFrames,
   } = useStore()
 
-  const modes = [
-    { id: 'translate', icon: '✛', label: 'Move' },
-    { id: 'rotate', icon: '↻', label: 'Rotate' },
-    { id: 'scale', icon: '⤡', label: 'Scale' },
+  const tools = [
+    { id: 'translate', icon: '⊹',  label: 'Move',   short: 'G' },
+    { id: 'rotate',    icon: '↻',  label: 'Rotate', short: 'R' },
+    { id: 'scale',     icon: '⤡',  label: 'Scale',  short: 'S' },
   ]
 
   const lights = [
-    { id: 'studio', icon: '💡' },
-    { id: 'outdoor', icon: '☀️' },
-    { id: 'dramatic', icon: '🎭' },
-    { id: 'neon', icon: '🌀' },
+    { id: 'studio',   icon: '◎', label: 'Studio'   },
+    { id: 'outdoor',  icon: '◉', label: 'Outdoor'  },
+    { id: 'dramatic', icon: '◈', label: 'Dramatic' },
+    { id: 'neon',     icon: '◆', label: 'Neon'     },
   ]
 
   return (
-    <div style={{
-      position: 'absolute', top: 0, left: 0, right: 0,
-      display: 'flex', alignItems: 'center', gap: 6,
-      padding: '6px 10px',
-      background: 'rgba(8,8,20,0.92)',
-      backdropFilter: 'blur(12px)',
-      borderBottom: '1px solid rgba(0,245,255,0.12)',
-      zIndex: 200,
-      overflowX: 'auto',
-    }}>
-      {/* App title */}
-      <div style={{
-        fontFamily: 'Orbitron, monospace',
-        fontSize: 13, fontWeight: 900,
-        color: '#00f5ff',
-        letterSpacing: '0.08em',
-        whiteSpace: 'nowrap',
-        textShadow: '0 0 20px rgba(0,245,255,0.5)',
-        marginRight: 6,
-      }}>
-        GLB<span style={{ color: '#ff4080' }}>STUDIO</span>
+    <div style={S.bar}>
+      {/* Brand */}
+      <div style={S.brand}>
+        <span style={{ color: 'var(--accent)' }}>GLB</span>
+        <span style={{ color: 'var(--text1)', fontWeight: 400 }}>Studio</span>
+      </div>
+
+      <div style={S.div} />
+
+      {/* Transform tools */}
+      <div style={{ display:'flex', gap:2, flexShrink:0 }}>
+        {tools.map(t => (
+          <ToolBtn key={t.id}
+            icon={t.icon} label={t.label} shortcut={t.short}
+            active={transformMode === t.id}
+            onClick={() => setTransformMode(t.id)}
+          />
+        ))}
       </div>
 
-      <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.12)' }} />
+      <div style={S.div} />
 
-      {/* Transform mode */}
-      {modes.map(m => (
+      {/* Playback */}
+      <div style={{ display:'flex', gap:2, alignItems:'center', flexShrink:0 }}>
+        <IconBtn icon="⏮" title="First frame" onClick={() => setCurrentFrame(0)} />
+        <IconBtn icon="◀" title="Prev frame"  onClick={() => setCurrentFrame(Math.max(0, cf-1))} />
         <button
-          key={m.id}
-          onClick={() => setTransformMode(m.id)}
-          title={m.label}
+          onClick={() => setIsPlaying(!isPlaying)}
           style={{
-            padding: '5px 10px',
-            background: transformMode === m.id ? 'rgba(0,245,255,0.15)' : 'rgba(255,255,255,0.04)',
-            border: `1px solid ${transformMode === m.id ? '#00f5ff' : 'rgba(255,255,255,0.1)'}`,
-            color: transformMode === m.id ? '#00f5ff' : '#888',
-            borderRadius: 5, cursor: 'pointer',
-            fontSize: 14, fontWeight: 'bold',
-            lineHeight: 1,
+            width: 34, height: 34, borderRadius: 'var(--radius-sm)',
+            background: isPlaying ? 'var(--danger)' : 'var(--accent)',
+            border: 'none', color: '#fff', fontSize: 14,
+            display:'flex', alignItems:'center', justifyContent:'center',
+            flexShrink: 0, cursor: 'pointer',
+            boxShadow: isPlaying ? '0 0 12px rgba(239,68,68,0.4)' : '0 0 12px rgba(79,142,255,0.4)',
             transition: 'all 0.15s',
-            minWidth: 36,
-            textAlign: 'center',
           }}
-        >
-          {m.icon}
-        </button>
-      ))}
+        >{isPlaying ? '⏸' : '▶'}</button>
+        <IconBtn icon="▶" title="Next frame" onClick={() => setCurrentFrame(Math.min(totalFrames-1,cf+1))} />
+        <IconBtn icon="⏭" title="Last frame" onClick={() => setCurrentFrame(totalFrames-1)} />
 
-      <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.12)' }} />
+        <div style={{
+          fontFamily: 'var(--font-mono)', fontSize: 11,
+          color: 'var(--text1)', marginLeft: 6, flexShrink: 0,
+          background: 'var(--bg3)', padding: '4px 8px',
+          borderRadius: 'var(--radius-sm)', border: '1px solid var(--border)',
+        }}>
+          <span style={{ color: 'var(--text0)' }}>{String(cf).padStart(4,'0')}</span>
+          <span style={{ color: 'var(--text3)' }}>/{totalFrames}</span>
+        </div>
+      </div>
 
-      {/* Playback */}
-      <button
-        onClick={() => setIsPlaying(!isPlaying)}
-        style={{
-          padding: '5px 12px',
-          background: isPlaying ? 'rgba(255,64,96,0.15)' : 'rgba(64,255,128,0.12)',
-          border: `1px solid ${isPlaying ? '#ff4060' : '#40ff80'}`,
-          color: isPlaying ? '#ff4060' : '#40ff80',
-          borderRadius: 5, cursor: 'pointer',
-          fontSize: 13,
-        }}
-      >
-        {isPlaying ? '⏸' : '▶'}
-      </button>
-
-      <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.12)' }} />
+      <div style={S.div} />
 
       {/* Lighting */}
-      {lights.map(l => (
-        <button
-          key={l.id}
-          onClick={() => setLightingPreset(l.id)}
-          title={l.id}
-          style={{
-            padding: '5px 8px',
-            background: lightingPreset === l.id ? 'rgba(255,170,0,0.12)' : 'rgba(255,255,255,0.03)',
-            border: `1px solid ${lightingPreset === l.id ? '#ffaa00' : 'rgba(255,255,255,0.08)'}`,
-            borderRadius: 5, cursor: 'pointer',
-            fontSize: 14, opacity: lightingPreset === l.id ? 1 : 0.5,
-          }}
-        >
-          {l.icon}
-        </button>
-      ))}
+      <div style={{ display:'flex', gap:2, flexShrink:0 }}>
+        {lights.map(l => (
+          <button key={l.id}
+            onClick={() => setLightingPreset(l.id)}
+            title={l.label}
+            style={{
+              padding: '4px 7px', borderRadius: 'var(--radius-sm)',
+              background: lightingPreset===l.id ? 'var(--bg4)' : 'transparent',
+              border: `1px solid ${lightingPreset===l.id ? 'var(--border-hi)' : 'transparent'}`,
+              color: lightingPreset===l.id ? 'var(--warn)' : 'var(--text2)',
+              fontSize: 13, cursor:'pointer', transition:'all 0.12s',
+            }}
+          >{l.icon}</button>
+        ))}
+      </div>
 
       <div style={{ flex: 1 }} />
 
-      {/* Quick add keyframe */}
+      {/* Keyframe shortcut */}
       {selectedModelId && (
         <button
           onClick={() => addKeyframe(currentFrame, selectedModelId)}
           style={{
-            padding: '5px 12px',
-            background: 'rgba(255,170,0,0.12)',
-            border: '1px solid rgba(255,170,0,0.4)',
-            color: '#ffaa00', borderRadius: 5,
-            cursor: 'pointer', fontSize: 11,
-            fontFamily: 'Space Mono', whiteSpace: 'nowrap',
+            padding: '5px 12px', borderRadius: 'var(--radius-sm)',
+            background: 'rgba(245,158,11,0.12)',
+            border: '1px solid rgba(245,158,11,0.3)',
+            color: 'var(--warn)', fontSize: 11, fontWeight: 600,
+            cursor: 'pointer', flexShrink: 0, transition: 'all 0.12s',
           }}
-        >
-          ◆ KEY
-        </button>
+        >◆ Keyframe</button>
       )}
     </div>
   )

src/index.css

@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@700;800&display=swap');
+
+:root {
+  --bg0:        #0c0c10;
+  --bg1:        #111116;
+  --bg2:        #17171e;
+  --bg3:        #1e1e28;
+  --bg4:        #252532;
+  --border:     rgba(255,255,255,0.07);
+  --border-hi:  rgba(255,255,255,0.14);
+  --accent:     #4f8eff;
+  --accent2:    #7c3aed;
+  --accent3:    #06d6a0;
+  --warn:       #f59e0b;
+  --danger:     #ef4444;
+  --text0:      #f0f0f8;
+  --text1:      #a0a0b8;
+  --text2:      #606078;
+  --text3:      #383848;
+  --radius-sm:  4px;
+  --radius:     8px;
+  --radius-lg:  12px;
+  --font-ui:    'Inter', system-ui, sans-serif;
+  --font-mono:  'JetBrains Mono', monospace;
+  --font-brand: 'Syne', sans-serif;
+  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
+  --shadow:     0 4px 16px rgba(0,0,0,0.5);
+  --shadow-lg:  0 8px 32px rgba(0,0,0,0.7);
+  --glow:       0 0 20px rgba(79,142,255,0.25);
+  --glow-green: 0 0 20px rgba(6,214,160,0.25);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body, #root {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  background: var(--bg0);
+  color: var(--text0);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Scrollbar ─────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text3); }
+
+/* ── Global inputs ─────────────────────────────────────────────────── */
+input[type=range] {
+  -webkit-appearance: none;
+  height: 3px;
+  background: var(--bg4);
+  border-radius: 2px;
+  cursor: pointer;
+  width: 100%;
+}
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 13px; height: 13px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px rgba(79,142,255,0.2);
+  transition: transform 0.15s;
+}
+input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+input[type=range]:focus { outline: none; }
+
+input[type=number], input[type=text], select, textarea {
+  background: var(--bg1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text0);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 7px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  width: 100%;
+}
+input[type=number]:focus,
+input[type=text]:focus,
+select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,142,255,0.15); }
+
+button { font-family: var(--font-ui); cursor: pointer; outline: none; border: none; }
+
+* { -webkit-tap-highlight-color: transparent; }
+
+/* ── Animations ────────────────────────────────────────────────────── */
+@keyframes spin     { to { transform: rotate(360deg); } }
+@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
+@keyframes fadeUp   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
+@keyframes shimmer  {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}

src/main.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './index.css'
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')).render(