feat(studio): timeline UI overhaul — flat clips, unified color, working thumbnails

Visual redesign of the timeline:
- Flat solid clip backgrounds, no gradients or multi-layer shadows
- Unified neutral color palette — all clips use the same base color
- Clean 6px border-radius instead of organic asymmetric radii
- Single-line labels, no redundant tag badge or time range
- 3px teal accent stripe on the left edge of every clip
- Simplified trim handles (2px accent bars)

Thumbnail fixes:
- Fixed broken thumbnail URLs — compositionSrc was an absolute URL
  that got nested inside the preview/comp path. Now normalized to
  relative path before constructing the thumbnail URL
- Thumbnail background changed from #000 to #1c2028 so transparent
  overlay compositions render visible content against a matching
  dark background
- mix-blend-mode: lighten on thumbnail layer — dark backgrounds blend
  away, bright content shows through
- Removed double-label in CompositionThumbnail (was showing both a
  badge at top and text at bottom)

packages/studio/src/hooks/useRenderClipContent.ts

@@ -23,8 +23,18 @@ export function useRenderClipContent({
       const pid = projectIdRef.current;
       if (!pid) return null;
 
-      // Resolve composition source path using the compIdToSrc map
       let compSrc = el.compositionSrc;
+      if (compSrc) {
+        try {
+          const parsed = new URL(compSrc, window.location.origin);
+          const previewPrefix = `/api/projects/${pid}/preview/`;
+          if (parsed.pathname.startsWith(previewPrefix)) {
+            compSrc = parsed.pathname.slice(previewPrefix.length);
+          }
+        } catch {
+          // already relative
+        }
+      }
       if (compSrc && compIdToSrc.size > 0) {
         const resolved =
           compIdToSrc.get(el.id) ||