feat(studio): header logo, playbar cleanup, and I/O work-area markers

- Add Hyperframes icon mark to the studio header (left of project name)
- Remove m:ss toggle button — click the timecode directly to switch modes
- Remove frame jump input from controls bar — moved into ⌨ shortcuts panel
- Replace Loop text button with a repeat icon
- Collapse J/K/L shortcut badges into a single ⌨ icon that opens a panel
- Shortcuts panel: Jump to frame, Work area I/O display, shortcuts reference
- Implement I/O work-area markers (closes #807):
  - I / Shift+I: set / clear in-point at playhead
  - O / Shift+O: set / clear out-point at playhead
  - A: jump to in-point (or start); E: jump to out-point (or end)
  - Loop respects in/out boundaries for both forward and backward playback
  - Teal work-area band + tick markers rendered on the seek bar

Author: miguel-heygen

.filesize-allowlist

@@ -1,2 +1,3 @@
 packages/studio/src/player/hooks/useTimelinePlayer.ts
 packages/studio/src/hooks/useManifestPersistence.ts
+packages/studio/src/player/components/PlayerControls.tsx

packages/studio/src/components/StudioHeader.tsx

@@ -18,6 +18,52 @@ export interface StudioHeaderProps {
   inspectorPanelActive: boolean;
 }
 
+function HyperframesIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={Math.round(size * (42 / 74))}
+      viewBox="190 -2 74 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient
+          id="hf-icon-g0"
+          x1="225.869"
+          y1="0"
+          x2="222.845"
+          y2="37.482"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#06E3FA" />
+          <stop offset="1" stopColor="#4FDB5E" />
+        </linearGradient>
+        <linearGradient
+          id="hf-icon-g1"
+          x1="230.87"
+          y1="39"
+          x2="244.661"
+          y2="6.303"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#06E3FA" />
+          <stop offset="1" stopColor="#4FDB5E" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z"
+        fill="url(#hf-icon-g0)"
+      />
+      <path
+        d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z"
+        fill="url(#hf-icon-g1)"
+      />
+    </svg>
+  );
+}
+
 export function StudioHeader({
   captureFrameHref,
   captureFrameFilename,
@@ -32,8 +78,9 @@ export function StudioHeader({
 
   return (
     <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
-      {/* Left: project name */}
+      {/* Left: logo + project name */}
       <div className="flex items-center gap-2">
+        <HyperframesIcon size={28} />
         <span className="text-[11px] font-medium text-neutral-400">{projectId}</span>
       </div>
       {/* Right: toolbar buttons */}