@hyperframes/studio 0.8.103 → 0.8.105

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   HyperframesLogo
-} from "./chunk-62DDWOSH.js";
+} from "./chunk-EEXSYY5F.js";
 import {
   DOCK_PANEL_COMPONENT,
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
@@ -67,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-HIGHVWYD.js";
+} from "./chunk-QADHJFDF.js";
 import {
   Button,
   ContextMenu,
@@ -99,7 +99,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-6GAO75IU.js";
+} from "./chunk-NCUBAVGK.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   buildDefaultDomEditTextField,
@@ -532,6 +532,12 @@ if (typeof window !== "undefined") {
 // src/player/components/ShortcutsPanel.tsx
 import { useState, useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, memo } from "react";
 
+// src/components/timelineToolbarStyles.ts
+var flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
+var flatIdle = `${flatBtn} text-text-2 hover:bg-hover hover:text-text-0 active:bg-press active:scale-[0.98]`;
+var flatActive = `${flatBtn} bg-on text-text-0 hover:bg-on-hover active:scale-[0.98]`;
+var flatDisabled = `${flatBtn} text-text-off cursor-not-allowed`;
+
 // src/hooks/useContextMenuDismiss.ts
 import { useCallback, useEffect, useRef } from "react";
 function useContextMenuDismiss(onClose) {
@@ -709,7 +715,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
         ref: triggerRef,
         type: "button",
         onClick: () => setShowShortcuts((v) => !v),
-        className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors ${showShortcuts ? "text-neutral-200" : "text-neutral-600 hover:text-neutral-300"}`,
+        className: showShortcuts ? flatActive : flatIdle,
         "aria-label": "Shortcuts and tools",
         "aria-expanded": showShortcuts,
         "aria-controls": shortcutsPanelId,
@@ -741,10 +747,8 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
         tabIndex: -1,
         role: "dialog",
         "aria-label": "Keyboard shortcuts and tools",
-        className: "absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-hidden",
+        className: "absolute bottom-full right-0 mb-2 z-50 rounded-lg border border-border bg-raised shadow-popover min-w-[220px] overflow-y-auto outline-hidden",
         style: {
-          background: "#161618",
-          border: "1px solid rgba(255,255,255,0.08)",
           maxHeight: "min(280px, calc(100vh - 80px))"
         },
         children: [
@@ -777,20 +781,13 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)" } }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
           /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2", children: [
             /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Work area" }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center",
-                      style: { background: "rgba(255,255,255,0.05)" },
-                      children: "I"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "I" }),
                   /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "In-point" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: inPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -820,14 +817,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center",
-                      style: { background: "rgba(255,255,255,0.05)" },
-                      children: "O"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "O" }),
                   /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "Out-point" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: outPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -857,18 +847,11 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)" } }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
           /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: section.title }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: section.hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center",
-                  style: { background: "rgba(255,255,255,0.05)" },
-                  children: hint.key
-                }
-              ),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover", children: hint.key }),
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: hint.label })
             ] }, hintIndex)) })
           ] }, sectionIndex)) })
@@ -1039,7 +1022,7 @@ var VolumeControl = memo3(function VolumeControl2({
         disabled,
         "aria-label": muteLabel,
         "aria-pressed": silent,
-        className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${silent ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+        className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${silent ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
         children: /* @__PURE__ */ jsx3(VolumeIcon, { muted: audioMuted, volume: audioVolume })
       }
     ) })
@@ -1085,7 +1068,7 @@ var LoopButton = memo4(function LoopButton2({
         setLoopEnabled(!loopEnabled);
       },
       disabled,
-      className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${loopEnabled ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+      className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${loopEnabled ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
       "aria-label": loopEnabled ? "Disable loop playback" : "Enable loop playback",
       "aria-pressed": loopEnabled,
       children: /* @__PURE__ */ jsxs4(
@@ -1123,7 +1106,7 @@ var FullscreenButton = memo4(function FullscreenButton2({
         trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
         onToggleFullscreen();
       },
-      className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+      className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${isFullscreen ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
       children: /* @__PURE__ */ jsx4(
         "svg",
@@ -1221,7 +1204,7 @@ var PlayerControls = memo4(function PlayerControls2({
                 children: [
                   /* @__PURE__ */ jsx4("span", { ref: timeDisplayRef, children: formatTime(0) }),
                   timeDisplayMode === "time" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    /* @__PURE__ */ jsx4("span", { className: "mx-0.5 text-neutral-700", children: "/" }),
+                    /* @__PURE__ */ jsx4("span", { className: "mx-0.5 text-text-off", children: "/" }),
                     /* @__PURE__ */ jsx4("span", { className: "text-neutral-600", children: formatTime(duration) })
                   ] }) : null
                 ]
@@ -6590,7 +6573,7 @@ function MiniCurveSvg({
     {
       d,
       fill: "none",
-      stroke: active ? "#3CE6AC" : "#737373",
+      className: active ? "stroke-accent-ink" : "stroke-text-muted",
       strokeWidth: "1.5",
       strokeLinecap: "round"
     }
@@ -6630,7 +6613,7 @@ var EasePresetGrid = function EasePresetGrid2({
           /* @__PURE__ */ jsx11(
             "span",
             {
-              className: `text-center text-[8px] leading-none ${isActive ? "text-panel-accent" : "text-neutral-500"}`,
+              className: `text-center text-[8px] leading-none ${isActive ? "text-accent-ink" : "text-neutral-500"}`,
               children: preset.label
             }
           )
@@ -6647,7 +6630,7 @@ function EaseModeToggle({
   return /* @__PURE__ */ jsx11(
     "div",
     {
-      className: "mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5",
+      className: "mb-2 grid grid-cols-3 rounded-md bg-press p-0.5",
       role: "radiogroup",
       "aria-label": "Ease editor mode",
       children: EASE_MODES.map((candidateMode) => {
@@ -6753,7 +6736,7 @@ function EaseBezierField({
             }
           },
           onBlur: (event) => commit(event.currentTarget.value),
-          className: `w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${error ? "border-red-500/70 focus:border-red-400" : "border-white/10 focus:border-panel-accent/50"}`
+          className: `w-full rounded border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${error ? "border-danger-ink/70 focus:border-danger-ink" : "border-border focus:border-panel-accent/50"}`
         }
       )
     ] }),
@@ -6762,7 +6745,7 @@ function EaseBezierField({
       {
         id: errorId,
         "aria-live": "polite",
-        className: `mt-1 text-[9px] text-red-400 ${error ? "" : "sr-only"}`,
+        className: `mt-1 text-[9px] text-danger-ink ${error ? "" : "sr-only"}`,
         children: error ?? "Valid bezier values"
       }
     )
@@ -6830,7 +6813,7 @@ function SpringBounceField({
           const bounce = parseSpringBounce2(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         },
-        className: "w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+        className: "w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
       }
     )
   ] });
@@ -6851,7 +6834,7 @@ function WiggleField({
           min: 1,
           step: 1,
           onCommit: (value) => commitWiggle(onCommit, value, config.type, amplitude),
-          className: "w-14 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className: "w-14 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         }
       )
     ] }),
@@ -6867,7 +6850,7 @@ function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           },
-          className: "rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50",
+          className: "rounded-sm border border-border bg-input px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50",
           children: WIGGLE_TYPES.map((type) => /* @__PURE__ */ jsx12("option", { value: type, children: type }, type))
         }
       )
@@ -6883,7 +6866,7 @@ function WiggleField({
           max: 1,
           step: 0.01,
           onCommit: (value) => commitWiggle(onCommit, config.wiggles, config.type, value),
-          className: "w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className: "w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         }
       )
     ] })
@@ -6902,7 +6885,6 @@ var VMAX = 1 + HR / S;
 var VMIN = -HR / S;
 var DRAG_VMAX = 2;
 var DRAG_VMIN = -1;
-var ACCENT = "#3CE6AC";
 function EaseTypeDropdown({
   kind,
   ease,
@@ -6971,7 +6953,7 @@ function EaseTypeDropdown({
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         onClick: () => setOpen((prev) => !prev),
-        className: "flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/20 px-2 py-1.5 text-left transition-colors hover:border-white/20",
+        className: "flex w-full items-center gap-2 rounded-md border border-border bg-input px-2 py-1.5 text-left transition-colors hover:border-border-strong",
         children: [
           /* @__PURE__ */ jsx13(MiniCurveSvg, { ease, active: true, size: 16 }),
           /* @__PURE__ */ jsx13("span", { className: "text-[11px] text-neutral-200", children: label }),
@@ -6997,7 +6979,7 @@ function EaseTypeDropdown({
         role: "menu",
         "aria-label": `${MODE_LABELS[kind]} ease presets`,
         onKeyDown: handleMenuKeyDown,
-        className: "absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-white/10 bg-neutral-900 p-2 shadow-xl",
+        className: "absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-border bg-raised p-2 shadow-xl",
         children: /* @__PURE__ */ jsx13(
           EasePresetGrid,
           {
@@ -7184,7 +7166,7 @@ function EaseCurveSection({
       /* @__PURE__ */ jsx13(
         "div",
         {
-          className: "mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20",
+          className: "mx-auto overflow-hidden rounded-md border border-border bg-input",
           style: { aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 },
           children: /* @__PURE__ */ jsxs9(
             "svg",
@@ -7206,7 +7188,7 @@ function EaseCurveSection({
                     y1: top,
                     x2: xToSvg(q),
                     y2: bottom,
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.05",
                     strokeWidth: "1"
                   },
@@ -7219,7 +7201,7 @@ function EaseCurveSection({
                     y1: yToSvg(q),
                     x2: right,
                     y2: yToSvg(q),
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.05",
                     strokeWidth: "1"
                   },
@@ -7233,7 +7215,7 @@ function EaseCurveSection({
                     width: S,
                     height: bottom - top,
                     fill: "none",
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.1",
                     strokeWidth: "1"
                   }
@@ -7245,7 +7227,7 @@ function EaseCurveSection({
                     y1: a0.y,
                     x2: a1.x,
                     y2: a1.y,
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.08",
                     strokeWidth: "1",
                     strokeDasharray: "3 4"
@@ -7259,8 +7241,7 @@ function EaseCurveSection({
                       y1: a0.y,
                       x2: p1.x,
                       y2: p1.y,
-                      stroke: ACCENT,
-                      strokeOpacity: "0.5",
+                      className: "stroke-accent-ink",
                       strokeWidth: "1.5"
                     }
                   ),
@@ -7271,8 +7252,7 @@ function EaseCurveSection({
                       y1: a1.y,
                       x2: p2.x,
                       y2: p2.y,
-                      stroke: ACCENT,
-                      strokeOpacity: "0.5",
+                      className: "stroke-accent-ink",
                       strokeWidth: "1.5"
                     }
                   )
@@ -7282,13 +7262,13 @@ function EaseCurveSection({
                   {
                     d: curvePath2,
                     fill: "none",
-                    stroke: ACCENT,
+                    className: "stroke-accent-ink",
                     strokeWidth: "2.5",
                     strokeLinecap: "round"
                   }
                 ),
-                /* @__PURE__ */ jsx13("circle", { cx: a0.x, cy: a0.y, r: "3", fill: ACCENT }),
-                /* @__PURE__ */ jsx13("circle", { cx: a1.x, cy: a1.y, r: "3", fill: ACCENT }),
+                /* @__PURE__ */ jsx13("circle", { cx: a0.x, cy: a0.y, r: "3", className: "fill-accent-ink" }),
+                /* @__PURE__ */ jsx13("circle", { cx: a1.x, cy: a1.y, r: "3", className: "fill-accent-ink" }),
                 showHandles && [["p1", p1], ["p2", p2]].map(([key2, pt]) => /* @__PURE__ */ jsxs9("g", { children: [
                   /* @__PURE__ */ jsx13(
                     "circle",
@@ -7304,7 +7284,7 @@ function EaseCurveSection({
                       "aria-valuemax": 1,
                       "aria-valuenow": key2 === "p1" ? x1 : x2,
                       "aria-valuetext": `x ${key2 === "p1" ? x1 : x2}, y ${key2 === "p1" ? y1 : y2}`,
-                      className: "cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-white focus-visible:stroke-[2px]",
+                      className: "cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-text-0 focus-visible:stroke-[2px]",
                       onPointerDown: (e) => handlePointerDown(key2, e),
                       onKeyDown: (event) => handleKeyDown(key2, event),
                       onPointerEnter: () => setHover(key2),
@@ -7317,10 +7297,8 @@ function EaseCurveSection({
                       cx: pt.x,
                       cy: pt.y,
                       r: hover === key2 || draggingRef.current === key2 ? 7 : 5.5,
-                      fill: "#0a0a1a",
-                      stroke: ACCENT,
                       strokeWidth: "2.5",
-                      className: "pointer-events-none transition-[r]"
+                      className: "pointer-events-none fill-input stroke-accent-ink transition-[r]"
                     }
                   )
                 ] }, key2))
@@ -7591,8 +7569,11 @@ var KeyframeDiamond = memo6(function KeyframeDiamond2({
   isHold = false
 }) {
   const isFilled = state === "active";
-  const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
-  const color = state === "active" ? "#3CE6AC" : "#a3a3a3";
+  const color = {
+    active: "text-accent",
+    inactive: "text-text-2 hover:text-text-0",
+    ghost: "text-text-off hover:text-text-0"
+  }[state];
   return /* @__PURE__ */ jsx15(
     "button",
     {
@@ -7601,8 +7582,7 @@ var KeyframeDiamond = memo6(function KeyframeDiamond2({
         e.stopPropagation();
         onClick();
       },
-      className: "relative shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']",
-      style: { color, opacity },
+      className: `relative shrink-0 p-0.5 transition-colors before:absolute before:-inset-1.5 before:content-[''] ${color}`,
       title,
       "aria-label": title,
       "aria-pressed": state === "active",
@@ -7667,12 +7647,12 @@ function ArrowLeft({ disabled }) {
       height: "10",
       viewBox: "0 0 6 10",
       fill: "none",
-      style: { opacity: disabled ? 0.25 : 1 },
+      className: disabled ? "text-text-off" : "text-text-2",
       children: /* @__PURE__ */ jsx16(
         "path",
         {
           d: "M5 1L1 5L5 9",
-          stroke: "#a3a3a3",
+          stroke: "currentColor",
           strokeWidth: "1.4",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -7689,12 +7669,12 @@ function ArrowRight({ disabled }) {
       height: "10",
       viewBox: "0 0 6 10",
       fill: "none",
-      style: { opacity: disabled ? 0.25 : 1 },
+      className: disabled ? "text-text-off" : "text-text-2",
       children: /* @__PURE__ */ jsx16(
         "path",
         {
           d: "M1 1L5 5L1 9",
-          stroke: "#a3a3a3",
+          stroke: "currentColor",
           strokeWidth: "1.4",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -10970,7 +10950,7 @@ function ClipLintDot({ element }) {
   return /* @__PURE__ */ jsx21(
     "span",
     {
-      className: "absolute w-1.5 h-1.5 rounded-full bg-amber-400",
+      className: "absolute w-1.5 h-1.5 rounded-full bg-warning-ink",
       style: { top: 7, right: 7 },
       title: lint.messages.join("\n")
     }
@@ -11888,7 +11868,7 @@ var TIMELINE_VIEWPORT_BUDGETS = Object.freeze({
   richPreviewP95Ms: 750,
   constrainedRichPreviewP95Ms: 1200,
   supportedFixtureFallbackRatio: 0.02,
-  scrollSamplesPerRun: 21,
+  scrollSamplesPerRun: 63,
   warmupRuns: 3,
   measuredRuns: 5,
   requiredPassingRuns: 4
@@ -14184,7 +14164,7 @@ var TimelineClip = memo10(function TimelineClip2({
                   width: 2,
                   borderRadius: 1,
                   background: "var(--clip-handle)",
-                  opacity: handleOpacity * 0.6
+                  opacity: handleOpacity
                 }
               }
             )
@@ -14216,7 +14196,7 @@ var TimelineClip = memo10(function TimelineClip2({
                   width: 2,
                   borderRadius: 1,
                   background: "var(--clip-handle)",
-                  opacity: handleOpacity * 0.6
+                  opacity: handleOpacity
                 }
               }
             )
@@ -16614,7 +16594,7 @@ function TrackClipCount({ clipCount }) {
     {
       "aria-label": `${clipCount} clips`,
       title: `${clipCount} clips`,
-      className: "shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55",
+      className: "shrink-0 rounded-full bg-hover px-1 text-[9px] leading-[14px] tabular-nums text-text-muted",
       children: clipCount
     }
   );
@@ -17123,7 +17103,7 @@ function TimelineFxPopover({
       ref: rootRef,
       role: "dialog",
       "aria-label": "Effects",
-      className: "z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl",
+      className: "z-200 flex flex-col overflow-hidden rounded-md border border-border bg-raised p-2 shadow-xl",
       style: clampedStyle(anchorRect),
       onKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
@@ -17137,12 +17117,12 @@ function TimelineFxPopover({
             onAuditionTracked: (id) => trackPresetAuditioned(id, { trackKind })
           }
         ) }),
-        /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-border pt-2 text-[10px] text-text-muted", children: [
           /* @__PURE__ */ jsx41(
             "button",
             {
               type: "button",
-              className: "hover:text-white",
+              className: "hover:text-text-0",
               onClick: () => {
                 onClose();
                 onOpenRack();
@@ -17154,7 +17134,7 @@ function TimelineFxPopover({
             "button",
             {
               type: "button",
-              className: "hover:text-white",
+              className: "hover:text-text-0",
               onClick: () => {
                 onClose();
                 onOpenRack();
@@ -17644,7 +17624,7 @@ function PropertyGroupNavigation({
   onSeek,
   children
 }) {
-  const CHEVRON_BUTTON_CLASS = "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+  const CHEVRON_BUTTON_CLASS = "relative h-5 w-3 border-0 bg-transparent p-0 text-text-2 hover:text-text-0 disabled:text-text-off focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
   const seekTo = (keyframe) => {
     if (keyframe) {
       onSeek?.(expandedElement.start + keyframe.percentage / 100 * expandedElement.duration);
@@ -17711,7 +17691,7 @@ function PropertyGroupHeaderRow({
       tabIndex: rovingTargetId === timelinePropertyRowId(elementId2, lane.group) ? 0 : -1,
       "data-property-group": lane.group,
       "data-timeline-lane-top": getTimelineLaneTop(laneIndex),
-      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65",
+      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2",
       style: {
         top: getTimelineLaneTop(laneIndex),
         // The header column narrows to contentOrigin whenever that is under
@@ -17726,13 +17706,13 @@ function PropertyGroupHeaderRow({
           /* @__PURE__ */ jsx44(
             "span",
             {
-              className: "absolute left-1.5 top-0 w-px bg-white/15",
+              className: "absolute left-1.5 top-0 w-px bg-text-0/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" })
         ] }),
-        /* @__PURE__ */ jsx44("span", { className: "w-[46px] shrink-0 truncate text-white", title: label, children: label }),
+        /* @__PURE__ */ jsx44("span", { className: "w-[46px] shrink-0 truncate text-text-0", title: label, children: label }),
         /* @__PURE__ */ jsx44(
           PropertyGroupNavigation,
           {
@@ -17747,7 +17727,7 @@ function PropertyGroupHeaderRow({
                 "aria-pressed": !!navigation.currentKeyframe,
                 "aria-label": `${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`,
                 title: `${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`,
-                className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+                className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
                 onClick: (event) => {
                   event.stopPropagation();
                   if (toggleTarget) {
@@ -17762,7 +17742,7 @@ function PropertyGroupHeaderRow({
         /* @__PURE__ */ jsx44(
           "span",
           {
-            className: "min-w-0 flex-1 truncate text-right tabular-nums text-white/45",
+            className: "min-w-0 flex-1 truncate text-right tabular-nums text-text-muted",
             title: valueReadout(lane.group, values),
             children: valueReadout(lane.group, values)
           }
@@ -17790,7 +17770,7 @@ function AutomationLaneHeaderRow({
     {
       "data-automation-lane-label": label,
       "data-timeline-lane-top": top,
-      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65",
+      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2",
       style: {
         top,
         width: columnWidth,
@@ -17802,11 +17782,11 @@ function AutomationLaneHeaderRow({
           /* @__PURE__ */ jsx44(
             "span",
             {
-              className: "absolute left-1.5 top-0 w-px bg-white/15",
+              className: "absolute left-1.5 top-0 w-px bg-text-0/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" })
         ] }),
         /* @__PURE__ */ jsxs26(
           "button",
@@ -17816,19 +17796,19 @@ function AutomationLaneHeaderRow({
             "aria-label": onReveal ? `Show ${label} in the effect rack` : void 0,
             title: onReveal ? `Show ${label} in the effect rack` : label,
             disabled: !onReveal,
-            className: "flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+            className: "flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
             onPointerDown: (event) => event.stopPropagation(),
             onClick: (event) => {
               event.stopPropagation();
               onReveal?.();
             },
             children: [
-              /* @__PURE__ */ jsx44("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-white/70", children: name }),
+              /* @__PURE__ */ jsx44("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-text-2", children: name }),
               param ? /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "data-automation-lane-param": "",
-                  className: "truncate font-mono text-[9px] text-white/40",
+                  className: "truncate font-mono text-[9px] text-text-muted",
                   children: param
                 }
               ) : null,
@@ -17836,7 +17816,7 @@ function AutomationLaneHeaderRow({
                 "span",
                 {
                   "data-automation-lane-also": "",
-                  className: "truncate text-[9px] text-[#F5C542]/80",
+                  className: "truncate text-[9px] text-warning-ink",
                   title: `${alsoAutomatedBy} is also fading this \u2014 the two multiply.`,
                   children: [
                     alsoAutomatedBy,
@@ -17853,7 +17833,7 @@ function AutomationLaneHeaderRow({
             type: "button",
             "aria-label": `Remove ${label} automation`,
             title: `Remove ${label} automation`,
-            className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+            className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-text-muted hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
             onPointerDown: (event) => event.stopPropagation(),
             onClick: (event) => {
               event.stopPropagation();
@@ -21121,8 +21101,7 @@ function TimelineLanes({
                           color: ts.label,
                           fontSize: 11,
                           letterSpacing: "0.06em",
-                          textTransform: "uppercase",
-                          opacity: 0.5
+                          textTransform: "uppercase"
                         },
                         children: "New track"
                       }
@@ -21457,7 +21436,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             "aria-hidden": "true",
             "data-testid": "timeline-ghost-lane",
             "data-active": ghostLaneActive || void 0,
-            className: `pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${ghostLaneActive ? "border-studio-accent/60 bg-studio-accent/6 text-studio-accent" : "border-neutral-700/50 text-neutral-500"}`,
+            className: `pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${ghostLaneActive ? "border-studio-accent/60 bg-studio-accent/6 text-accent-ink" : "border-neutral-700/50 text-neutral-500"}`,
             style: {
               top: props.rowGeometry.getRowTop(ghostLaneRow) + CLIP_Y,
               left: props.contentOrigin,
@@ -21798,7 +21777,7 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
       ] })
     ] }),
     elementsInRange.length > 0 && /* @__PURE__ */ jsx56("div", { className: "px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto", children: elementsInRange.map((el) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between py-0.5", children: [
-      /* @__PURE__ */ jsxs36("span", { className: "text-[10px] font-mono text-studio-accent/80", children: [
+      /* @__PURE__ */ jsxs36("span", { className: "text-[10px] font-mono text-accent-ink/80", children: [
         "#",
         el.id
       ] }),
@@ -21821,14 +21800,14 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         className: "w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/40 transition-colors"
       }
     ) }),
-    copyError && /* @__PURE__ */ jsx56("p", { className: "px-3 pb-2 text-[10px] text-red-400", role: "alert", children: "Copy failed \u2014 check clipboard permissions and try again." }),
+    copyError && /* @__PURE__ */ jsx56("p", { className: "px-3 pb-2 text-[10px] text-danger-ink", role: "alert", children: "Copy failed \u2014 check clipboard permissions and try again." }),
     /* @__PURE__ */ jsxs36("div", { className: "grid grid-cols-2 gap-2 px-3 pb-3", children: [
       /* @__PURE__ */ jsx56(
         "button",
         {
           onClick: handleCopyPrompt,
           disabled: !buildPromptCopyText(prompt),
-          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all border ${copiedPromptOnly ? "bg-green-500/20 text-green-400 border-green-500/30" : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"} disabled:opacity-50 disabled:cursor-not-allowed`,
+          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all border ${copiedPromptOnly ? "bg-accent/15 text-accent-ink border-accent/30" : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"} disabled:opacity-50 disabled:cursor-not-allowed`,
           children: copiedPromptOnly ? "Prompt Copied!" : "Copy Prompt"
         }
       ),
@@ -21836,10 +21815,10 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         "button",
         {
           onClick: handleCopy2,
-          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all ${copiedAgentPrompt ? "bg-green-500/20 text-green-400 border border-green-500/30" : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"}`,
+          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all ${copiedAgentPrompt ? "bg-accent/15 text-accent-ink border border-accent/30" : "bg-studio-accent/15 text-accent-ink border border-studio-accent/25 hover:bg-studio-accent/25"}`,
           children: [
             copiedAgentPrompt ? "Copied!" : "Copy to Agent",
-            !copiedAgentPrompt && /* @__PURE__ */ jsx56("span", { className: "text-[9px] text-studio-accent/50 ml-1.5", children: "Cmd+Enter" })
+            !copiedAgentPrompt && /* @__PURE__ */ jsx56("span", { className: "text-[9px] text-text-muted ml-1.5", children: "Cmd+Enter" })
           ]
         }
       )
@@ -21893,7 +21872,7 @@ function useMenuKeyboardNav(menuRef) {
 // src/player/components/KeyframeDiamondContextMenu.tsx
 import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
 var ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
-var DESTRUCTIVE_ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
+var DESTRUCTIVE_ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 function KeyframeDiamondContextMenu({
   state,
   onClose,
@@ -22000,7 +21979,7 @@ function KeyframeDiamondContextMenu({
             {
               type: "button",
               role: "menuitem",
-              className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-hidden cursor-pointer text-left",
+              className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 outline-hidden cursor-pointer text-left",
               onClick: () => {
                 onDeleteAll(state.element, state.animationId);
                 onClose();
@@ -22172,7 +22151,7 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
             {
               type: "button",
               role: "menuitem",
-              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left",
+              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left",
               onClick: () => {
                 onDelete(element);
                 onClose();
@@ -22537,7 +22516,7 @@ function TimelineEmptyState({
                   strokeWidth: "1.5",
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "text-studio-accent shrink-0",
+                  className: "text-accent-ink shrink-0",
                   children: [
                     /* @__PURE__ */ jsx62("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
                     /* @__PURE__ */ jsx62("polyline", { points: "7 10 12 15 17 10" }),
@@ -22545,7 +22524,7 @@ function TimelineEmptyState({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx62("span", { className: "text-[13px] text-studio-accent", children: "Drop media files to import" })
+              /* @__PURE__ */ jsx62("span", { className: "text-[13px] text-accent-ink", children: "Drop media files to import" })
             ] }) : /* @__PURE__ */ jsxs42(Fragment20, { children: [
               /* @__PURE__ */ jsxs42(
                 "svg",
@@ -22782,10 +22761,7 @@ var ThumbnailScheduler = class {
     this.scrolling = scrolling;
     if (!scrolling) this.pump();
   }
-  /**
-   * Hold server-rendered composition thumbnails while the preview loads a new document: both
-   * are served by the same Studio server, and the preview is what the person is waiting for.
-   */
+  /** Holds composition renders while the preview loads: same server, and the preview is what the person awaits. */
   setPreviewReloading(reloading) {
     if (this.previewReloading === reloading) return;
     this.previewReloading = reloading;
@@ -22909,7 +22885,7 @@ var ThumbnailScheduler = class {
   cacheResult(entry2) {
     const isWaveform = entry2.request.kind === "waveform";
     const byteBudget = isWaveform ? this.budgets.waveformCacheBytes : this.budgets.thumbnailCacheBytes;
-    entry2.cached = entry2.weight <= byteBudget;
+    entry2.cached = !entry2.request.discardWhenReleased && entry2.weight <= byteBudget;
     if (!entry2.cached) return;
     if (isWaveform) this.waveformCacheBytes += entry2.weight;
     else this.cacheBytes += entry2.weight;
@@ -23468,6 +23444,17 @@ function compositionPathOfPreviewUrl(previewUrl) {
   const match = /\/preview\/comp\/([^?#]+)/.exec(previewUrl);
   return match?.[1] ? decodeURIComponent(match[1]) : "index.html";
 }
+function compositionThumbnailRequest(url, projectId, { sessionEpoch = 0, priority = "visible", rich = false } = {}) {
+  return {
+    key: createThumbnailKey({ kind: "composition", url }),
+    projectId,
+    sessionEpoch,
+    kind: "composition",
+    priority,
+    rich,
+    load: (signal) => loadCompositionImage(url, signal)
+  };
+}
 async function loadCompositionImage(url, signal) {
   const response = await fetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
@@ -23510,15 +23497,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
     contentRevision
   });
   const request = useMemo34(
-    () => ({
-      key: createThumbnailKey({ kind: "composition", url }),
-      projectId,
-      sessionEpoch,
-      kind: "composition",
-      priority,
-      rich: true,
-      load: (signal) => loadCompositionImage(url, signal)
-    }),
+    () => compositionThumbnailRequest(url, projectId, { sessionEpoch, priority, rich: true }),
     [priority, projectId, sessionEpoch, url]
   );
   const snapshot3 = useThumbnailLease(request);
@@ -23558,7 +23537,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
         ))
       }
     ),
-    snapshot3.status === "loading" && /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 animate-pulse bg-white/[0.035]" }),
+    snapshot3.status === "loading" && /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 animate-pulse bg-text-0/[0.035]" }),
     label && /* @__PURE__ */ jsx66("div", { className: "absolute inset-y-0 left-3 z-10 flex items-center", children: /* @__PURE__ */ jsx66(
       "span",
       {
@@ -27115,7 +27094,7 @@ function PreviewZoomOverlay({
             "button",
             {
               type: "button",
-              className: "rounded px-1.5 py-0.5 font-medium text-studio-accent hover:bg-white/10 transition-colors",
+              className: "rounded px-1.5 py-0.5 font-medium text-accent-ink hover:bg-white/10 transition-colors",
               onClick: onFit,
               "aria-label": "Fit the whole frame in view",
               "data-testid": "preview-zoom-fit",
@@ -27233,8 +27212,7 @@ function usePreviewPoster(projectId, activeKey, directUrl) {
   const renderMissingPoster = useCallback46(() => {
     if (missingForRef.current !== visit || liveReadyForRef.current !== visit) return;
     missingForRef.current = null;
-    void fetch(previewPosterUrl(projectId, false)).catch(() => {
-    });
+    renderPosterForNextOpen(projectId);
   }, [visit, projectId]);
   const onLiveReadyToShowChange = useCallback46(
     (ready) => {
@@ -27259,6 +27237,27 @@ function usePreviewPoster(projectId, activeKey, directUrl) {
     }
   };
 }
+function renderPosterForNextOpen(projectId) {
+  const url = previewPosterUrl(projectId, false);
+  const request = {
+    key: createThumbnailKey({ kind: "poster-render", url }),
+    projectId,
+    sessionEpoch: 0,
+    kind: "composition",
+    priority: "overscan",
+    discardWhenReleased: true,
+    load: async (signal) => {
+      await (await fetch(url, { signal })).arrayBuffer();
+      return { value: { kind: "image", url, aspect: 16 / 9 }, weight: 0 };
+    }
+  };
+  const settled = () => ["ready", "error"].includes(thumbnailScheduler.getSnapshot(request).status);
+  let lease = null;
+  lease = thumbnailScheduler.acquire(request, () => {
+    if (settled()) lease?.release();
+  });
+  if (settled()) lease.release();
+}
 function useVisitNumber(key2) {
   const [seen, setSeen] = useState30({ key: key2, visit: 0 });
   if (seen.key === key2) return seen.visit;
@@ -28019,7 +28018,7 @@ function AssetPreviewOverlay() {
             /* @__PURE__ */ jsx73(
               "button",
               {
-                className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10",
+                className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-raised hover:bg-press text-text-2 hover:text-text-0 flex items-center justify-center transition-colors z-10",
                 onClick: (e) => {
                   e.stopPropagation();
                   clearPreviewAsset();
@@ -28480,7 +28479,7 @@ function PreviewPane({
     "div",
     {
       ref: containerRef,
-      className: `flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${isFullscreen ? "" : "m-3 rounded-md border border-neutral-800/50"}`,
+      className: `scheme-dark flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${isFullscreen ? "" : "m-3 rounded-md border border-border"}`,
       "data-studio-fullscreen-target": "",
       children: [
         /* @__PURE__ */ jsxs51(
@@ -28736,7 +28735,7 @@ function useMeterLoop(strips, bars, iframeRef) {
   }, [previewIframeRef, bars]);
 }
 function Bar({ maskRef, peakRef }) {
-  return /* @__PURE__ */ jsxs52("div", { className: "relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900", children: [
+  return /* @__PURE__ */ jsxs52("div", { className: "scheme-dark relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900", children: [
     /* @__PURE__ */ jsx77(
       "div",
       {
@@ -28772,7 +28771,7 @@ function Bar({ maskRef, peakRef }) {
       {
         ref: peakRef,
         "data-testid": "meter-peak",
-        className: "absolute inset-x-0 bottom-0 h-px bg-white"
+        className: "absolute inset-x-0 bottom-0 h-px bg-text-0"
       }
     )
   ] });
@@ -31840,15 +31839,6 @@ function applyStudioRotation(element, rotation) {
     composeStudioRotationValue(element, `var(${STUDIO_ROTATION_PROP}, 0deg)`)
   );
 }
-function applyStudioRotationDraft(element, rotation) {
-  promoteInlineForTransform(element);
-  writeStudioRotationVars(element, rotation, { updateBase: false });
-  element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
-  element.style.setProperty(
-    "rotate",
-    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`)
-  );
-}
 
 // src/components/editor/manualEditsSeekReapply.ts
 function queryStudioElements(doc, attr) {
@@ -31986,6 +31976,8 @@ function captureStudioBoxSize(element) {
 function captureStudioRotation(element) {
   return {
     rotate: element.style.getPropertyValue("rotate"),
+    transform: element.style.getPropertyValue("transform"),
+    display: element.style.getPropertyValue("display"),
     transformOrigin: element.style.getPropertyValue("transform-origin"),
     studioRotation: element.style.getPropertyValue(STUDIO_ROTATION_PROP),
     marker: element.getAttribute(STUDIO_ROTATION_ATTR),
@@ -32121,7 +32113,7 @@ function restoreOriginalTranslateProperty(element) {
   element.removeAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR);
 }
 function clearStudioPathOffset(element) {
-  if (element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) || styleUsesStudioOffset(element.style.getPropertyValue("translate"))) {
+  if (element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) || element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) || styleUsesStudioOffset(element.style.getPropertyValue("translate"))) {
     restoreOriginalTranslateProperty(element);
   }
   restoreInlineDisplay(element);
@@ -32381,6 +32373,29 @@ function installStudioManualEditSeekReapply(win, apply) {
 }
 
 // src/hooks/draggedGsapPosition.ts
+var cssValue = (style, prop) => {
+  const value = style.getPropertyValue(prop).trim();
+  return value === "none" ? "" : value;
+};
+function readCssRotation(element, withRotate = true) {
+  const view = element.ownerDocument.defaultView;
+  if (!view) return 0;
+  const style = view.getComputedStyle(element);
+  const rotate2 = withRotate ? cssValue(style, "rotate") : "";
+  const scale = cssValue(style, "scale");
+  const transform = cssValue(style, "transform");
+  const angle = (list) => {
+    if (!list) return 0;
+    const m = new view.DOMMatrix(list);
+    return Math.atan2(m.b, m.a) * 180 / Math.PI;
+  };
+  const folded = [rotate2 && `rotate(${rotate2})`, scale && `scale(${scale.split(/\s+/).join(",")})`];
+  try {
+    return angle([...folded, transform].join(" ").trim());
+  } catch {
+    return angle(transform);
+  }
+}
 function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
   const rotStyle = element.style.getPropertyValue("--hf-studio-rotation");
   const rotDeg = Number.parseFloat(rotStyle) || 0;
@@ -32407,6 +32422,125 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
 
 // src/hooks/gsapRuntimeKeyframes.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
+
+// src/components/editor/manualEditsDomPatches.ts
+function collectInlineStyleOps(element, properties, ops) {
+  for (const prop of properties) {
+    const val = element.style.getPropertyValue(prop);
+    if (val) ops.push({ type: "inline-style", property: prop, value: val });
+  }
+}
+function collectAttributeOps(element, attrNames, ops) {
+  for (const attr of attrNames) {
+    const val = element.getAttribute(attr);
+    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
+  }
+}
+function appendTransformDisplayOps(element, ops) {
+  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
+  if (val !== null) {
+    ops.push({ type: "inline-style", property: "display", value: val || null });
+    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
+  }
+}
+function buildClearPathOffsetPatches(element) {
+  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+  const ops = [
+    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
+    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
+    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
+    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+var BOX_SIZE_STYLE_PROPS = [
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "flex-basis",
+  "flex-grow",
+  "flex-shrink",
+  "box-sizing",
+  "scale",
+  "transform-origin",
+  "display"
+];
+var BOX_SIZE_ORIG_ATTRS = [
+  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
+  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
+  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
+  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
+  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
+  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
+  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
+  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
+  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
+  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
+  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
+  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
+  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
+  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
+];
+function buildBoxSizePatches(element) {
+  const ops = [];
+  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
+  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
+  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
+  collectAttributeOps(
+    element,
+    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
+    ops
+  );
+  return ops;
+}
+function buildClearBoxSizePatches(element) {
+  const ops = [
+    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
+    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
+    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
+  ];
+  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
+    const origVal = element.getAttribute(attrName);
+    if (origVal !== null && styleProp) {
+      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
+    }
+    ops.push({ type: "attribute", property: attrName, value: null });
+  }
+  return ops;
+}
+function buildClearRotationPatches(element) {
+  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  const origRotationTransformOrigin = element.getAttribute(
+    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
+  );
+  const ops = [
+    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
+    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
+    {
+      type: "inline-style",
+      property: "transform-origin",
+      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
+    },
+    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+
+// src/hooks/gsapRuntimeKeyframes.ts
 var FLAT_SKIP_KEYS = /* @__PURE__ */ new Set([
   "ease",
   "duration",
@@ -32621,9 +32755,32 @@ function gsapWritesChannels(el, channels) {
     )
   );
 }
+var ROTATION_CHANNELS = [
+  ...["rotation", "rotationX", "rotationY", "rotationZ"],
+  ...["rotate", "rotateX", "rotateY", "rotateZ"]
+];
+var gsapRendersTransform = (el) => !!el._gsap?.renderTransform;
 function gsapWritesPosition(el) {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+function gsapWritesRotation(el) {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, ROTATION_CHANNELS);
+}
+function gsapHoldsTranslate(el) {
   const cache2 = el._gsap;
-  return !!cache2?.renderTransform || gsapWritesChannels(el, MOVE_CHANNELS);
+  return ["x", "y", "xPercent", "yPercent"].some(
+    (key2) => !!Number.parseFloat(String(cache2?.[key2]))
+  );
+}
+var BOX_CHANNELS = [
+  ...BOX_SIZE_STYLE_PROPS.map(
+    (prop) => prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+  ),
+  "scaleX",
+  "scaleY"
+];
+function gsapWritesBox(el) {
+  return gsapWritesPosition(el) || gsapWritesChannels(el, BOX_CHANNELS);
 }
 function elementHasNonHoldTween(el, channels) {
   const win = el.ownerDocument.defaultView;
@@ -32754,14 +32911,39 @@ var UNREADABLE_TRANSLATE = "Studio can't read this layer's translate. Move it in
 function formatTranslatePx(p) {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
 }
-function translatePatch(p) {
-  return { type: "inline-style", property: "translate", value: formatTranslatePx(p) };
+var LEGACY_OFFSET_VARS = [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+function writePlainMove(el, p) {
+  writeTranslatePx(el, p);
+  const patches = [
+    { type: "inline-style", property: "translate", value: formatTranslatePx(p) },
+    {
+      type: "attribute",
+      property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+      value: el.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR)
+    }
+  ];
+  for (const prop of LEGACY_OFFSET_VARS.filter((v) => el.style.getPropertyValue(v))) {
+    el.style.removeProperty(prop);
+    patches.push({ type: "inline-style", property: prop, value: null });
+  }
+  if (el.hasAttribute(STUDIO_PATH_OFFSET_ATTR)) {
+    el.removeAttribute(STUDIO_PATH_OFFSET_ATTR);
+    patches.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null });
+  }
+  return patches;
 }
 function writeTranslatePx(el, p) {
+  if (!el.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR)) {
+    const own = el.style.getPropertyValue("translate");
+    el.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, styleUsesStudioOffset(own) ? "" : own);
+  }
   el.style.setProperty("translate", formatTranslatePx(p));
 }
-function readMoveOffset(el) {
-  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+function readMoveOffset(el, plainTranslate = !gsapWritesPosition(el)) {
+  return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
+}
+function readShownRotation(el) {
+  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
 }
 
 // src/components/editor/manualOffsetDrag.ts
@@ -32778,17 +32960,6 @@ function applyOffsetDragDraftViaGsap(element, offset, baseGsap) {
   gsap3.set(element, { x: newX, y: newY });
   return true;
 }
-function applyRotationDraftViaGsap(element, angle) {
-  const gsap3 = getOffsetDragGsap(element);
-  if (!gsap3) return false;
-  element.style.setProperty("rotate", "none");
-  gsap3.set(element, { rotation: angle });
-  return true;
-}
-function readGsapRotation(element) {
-  const gsap3 = getOffsetDragGsap(element);
-  return gsap3 ? Number(gsap3.getProperty(element, "rotation")) || 0 : 0;
-}
 var DEFAULT_OFFSET_PROBE_PX = 100;
 var MIN_PROBE_VECTOR_LENGTH_PX = 0.01;
 var MIN_MATRIX_DETERMINANT = 1e-6;
@@ -32936,7 +33107,8 @@ function resolveManualOffsetForPointerDelta(input) {
   };
 }
 function createManualOffsetDragMember(input) {
-  const plainTranslate = !!input.gesture && !gsapWritesPosition(input.element);
+  const gsapOwns = input.gesture === "resize" ? gsapWritesBox : gsapWritesPosition;
+  const plainTranslate = !!input.gesture && !gsapOwns(input.element);
   const initialOffset = plainTranslate ? readTranslatePx(input.element) : readAppliedStudioPathOffset(input.element);
   if (!finitePoint(initialOffset))
     return { ok: false, reason: UNREADABLE_TRANSLATE, selection: input.selection };
@@ -33102,6 +33274,94 @@ function resumeGsapTimelines(element) {
   win.__player?.seek?.(t);
 }
 
+// src/components/editor/rotationDraft.ts
+function lastRuleTransform(element) {
+  let value = "";
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules = [];
+    try {
+      rules = Array.from(sheet.cssRules);
+    } catch {
+    }
+    for (const rule of rules) {
+      const declared = rule.style?.getPropertyValue("transform");
+      if (declared && element.matches(rule.selectorText)) value = declared;
+    }
+  }
+  return value;
+}
+function translatingTransform(element) {
+  const view = element.ownerDocument.defaultView;
+  const computed = view?.getComputedStyle(element).transform ?? "none";
+  const m = computed === "none" ? null : new view.DOMMatrix(computed);
+  if (!m || m.m41 === 0 && m.m42 === 0) return "";
+  const value = element.style.getPropertyValue("transform") || lastRuleTransform(element);
+  return value === "none" ? "" : value;
+}
+var TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
+var OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;
+function readCssRotationTarget(element) {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const inline = style?.display === "inline";
+  const transform = translatingTransform(element);
+  if (!transform) {
+    const share2 = readCssRotation(element, false);
+    return { property: "rotate", before: "", after: "", share: share2, sign: 1, inline };
+  }
+  const parts = splitTopLevelWhitespace(transform);
+  const lead = parts.findIndex((part) => !TRANSLATE.test(part));
+  const split = lead < 0 ? parts.length : lead;
+  const rest = parts.slice(split);
+  if (OWN_TURN.test(rest[0] ?? "")) rest.shift();
+  const [before, after] = [parts.slice(0, split).join(" "), rest.join(" ")];
+  const [sx = 1, sy = sx] = splitTopLevelWhitespace(style?.getPropertyValue("scale") ?? "").map(
+    Number.parseFloat
+  );
+  const inlineStyle = element.style;
+  const saved2 = [
+    inlineStyle.getPropertyValue("transform"),
+    inlineStyle.getPropertyPriority("transform")
+  ];
+  inlineStyle.setProperty("transform", `${before} ${after}`.trim() || "none");
+  const share = readCssRotation(element);
+  inlineStyle.setProperty("transform", saved2[0] ?? "", saved2[1] ?? "");
+  return { property: "transform", before, after, share, sign: sx * sy < 0 ? -1 : 1, inline };
+}
+function applyCssRotation(element, angle, target = readCssRotationTarget(element)) {
+  const turn = `${roundTo3(target.sign * (angle - target.share))}deg`;
+  const value = target.property === "rotate" ? turn : [target.before, `rotate(${turn})`, target.after].filter(Boolean).join(" ");
+  const patches = [
+    { type: "inline-style", property: target.property, value }
+  ];
+  if (target.inline) {
+    patches.unshift({ type: "inline-style", property: "display", value: "inline-block" });
+  }
+  for (const patch of patches) element.style.setProperty(patch.property, patch.value);
+  return patches;
+}
+function restorePlainRotation(element, snapshot3) {
+  restoreStudioRotation(element, snapshot3);
+  element.style.setProperty("transform", snapshot3.transform);
+  element.style.setProperty("display", snapshot3.display);
+}
+function applyRotationDraft(element, angle, plain) {
+  if (plain) return void applyCssRotation(element, angle, plain);
+  element.style.setProperty("rotate", "none");
+  getOffsetDragGsap(element)?.set(element, { rotation: angle });
+}
+function restoreRotationDraft(element, angle, snapshot3, plain) {
+  if (plain) return restorePlainRotation(element, snapshot3);
+  getOffsetDragGsap(element)?.set(element, {
+    rotation: angle - (Number.parseFloat(snapshot3.studioRotation) || 0)
+  });
+  restoreStudioRotation(element, snapshot3);
+}
+function readRotationBase(element, plain) {
+  if (plain) return readCssRotation(element);
+  const gsapRotation = Number(getOffsetDragGsap(element)?.getProperty(element, "rotation") ?? 0);
+  return gsapRotation + readStudioRotation(element).angle;
+}
+
 // src/components/editor/domEditResizeLocal.ts
 var MIN_RESIZE_LOCAL_PX = 1;
 var DEGENERATE_START_DIST_PX = 3;
@@ -33215,27 +33475,6 @@ function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRe
   };
 }
 
-// src/utils/elementGsap.ts
-function gsapOf(element) {
-  return element.ownerDocument.defaultView?.gsap;
-}
-function setElementGsapPosition(element, x, y) {
-  const gsap3 = gsapOf(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { x, y });
-  return true;
-}
-function setElementGsapScale(element, x, y) {
-  const gsap3 = gsapOf(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { scaleX: x, scaleY: y });
-  return true;
-}
-function readElementGsapNumber(element, prop) {
-  const value = Number(gsapOf(element)?.getProperty?.(element, prop));
-  return Number.isFinite(value) ? value : null;
-}
-
 // src/components/editor/snapEngine.ts
 var SNAP_THRESHOLD_PX = 6;
 var SNAP_ENGAGE_TRAVEL_PX = 4;
@@ -33806,18 +34045,6 @@ function startGesture(kind, e, opts, options) {
   const rawContentScaleY = rect.height / (rect.editScaleY * actualHeight);
   const contentScaleX = Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY = Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
-  let resizeAnchor;
-  if (kind === "resize") {
-    const startBcr = sel.element.getBoundingClientRect();
-    resizeAnchor = {
-      anchorX: startBcr.x,
-      anchorY: startBcr.y,
-      baseGsapX: readElementGsapNumber(sel.element, "x") ?? 0,
-      baseGsapY: readElementGsapNumber(sel.element, "y") ?? 0,
-      pinX: 0,
-      pinY: 0
-    };
-  }
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken;
   let pathOffsetMember;
@@ -33845,12 +34072,14 @@ function startGesture(kind, e, opts, options) {
         key: selectionCacheKey(sel),
         selection: sel,
         element: sel.element,
-        rect
+        rect,
+        gesture: "resize"
       });
       if (result.ok) {
         pathOffsetMember = result.member;
         initialPathOffset = result.member.initialPathOffset;
         manualEditDragToken = result.member.gestureToken;
+        if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
         manualEditDragToken = beginStudioManualEditGesture(sel.element);
       }
@@ -33858,8 +34087,9 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken = beginStudioManualEditGesture(sel.element);
     }
   }
-  const gsapRotation = pathOffsetMember?.plainTranslate ? 0 : readGsapRotation(sel.element);
-  const rotation = { angle: gsapRotation + readStudioRotation(sel.element).angle };
+  const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
+  const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
+  const rotation = { angle: readRotationBase(sel.element, plain) };
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
@@ -33897,11 +34127,11 @@ function startGesture(kind, e, opts, options) {
     actualWidth,
     actualHeight,
     actualRotation: rotation.angle,
+    plainRotation,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     contentScaleX,
     contentScaleY,
-    resizeAnchor,
     manualEditDragToken,
     snapContext,
     resizeHandle: kind === "resize" ? options?.resizeHandle ?? "se" : void 0,
@@ -34156,9 +34386,7 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualAngle: g.actualRotation,
         snap: e.shiftKey
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
-        applyStudioRotationDraft(sel.element, rotated);
-      }
+      applyRotationDraft(sel.element, rotated.angle, g.plainRotation);
       return;
     }
     if (g.kind === "drag") {
@@ -34293,7 +34521,8 @@ function createDomEditOverlayGestureHandlers(opts) {
       );
       const updates = groupG.members.map((member) => ({
         selection: member.selection,
-        next: applyManualOffsetDragCommit(member, dx, dy)
+        next: applyManualOffsetDragCommit(member, dx, dy),
+        plainTranslate: member.plainTranslate
       }));
       logDrag("drop", {
         pointer: `${Math.round(rawDx)},${Math.round(rawDy)}`,
@@ -34366,20 +34595,20 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualAngle: g.actualRotation,
         snap: e.shiftKey
       });
-      const restoreRotation = () => {
-        if (!applyRotationDraftViaGsap(sel.element, g.actualRotation)) {
-          restoreStudioRotation(sel.element, g.initialRotation);
-        }
-      };
+      const restoreRotation = () => restoreRotationDraft(
+        sel.element,
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotation !== null
+      );
       if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
       }
-      if (!applyRotationDraftViaGsap(sel.element, finalRotation.angle)) {
-        applyStudioRotation(sel.element, finalRotation);
-      }
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation)).catch((error) => {
+      applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
+      const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
+      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit)).catch((error) => {
         logGestureCommitFailure("rotate commit failed", error);
         if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           restoreRotation();
@@ -34408,7 +34637,10 @@ function createDomEditOverlayGestureHandlers(opts) {
         box.style.top = `${nextBoxTop}px`;
       }
       void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, { altKey: e.altKey })
+        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+          altKey: e.altKey,
+          plainTranslate: g.pathOffsetMember.plainTranslate
+        })
       ).catch(() => {
         if (g.pathOffsetMember?.gestureToken && isStudioManualEditGestureCurrent(sel.element, g.pathOffsetMember.gestureToken))
           restoreStudioPathOffset(sel.element, g.initialPathOffset);
@@ -34466,11 +34698,12 @@ function createDomEditOverlayGestureHandlers(opts) {
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {
-      applyRotationDraftViaGsap(
+      restoreRotationDraft(
         sel.element,
-        g.actualRotation - (Number.parseFloat(g.initialRotation.studioRotation) || 0)
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotation !== null
       );
-      restoreStudioRotation(sel.element, g.initialRotation);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
     }
     opts.blockedMoveRef.current = null;
@@ -34549,10 +34782,13 @@ function useDomEditNudge(params) {
     if (session.timer) clearTimeout(session.timer);
     const updates = session.members.map((member) => ({
       selection: member.selection,
-      next: applyManualOffsetNudgeCommit(member, session.accum)
+      next: applyManualOffsetNudgeCommit(member, session.accum),
+      plainTranslate: member.plainTranslate
     }));
     const p = paramsRef.current;
-    const commit = session.isGroup ? p.onGroupPathOffsetCommitRef.current(updates) : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next);
+    const commit = session.isGroup ? p.onGroupPathOffsetCommitRef.current(updates) : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+      plainTranslate: updates[0].plainTranslate
+    });
     void Promise.resolve(commit).catch(() => {
       for (const member of session.members) {
         if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
@@ -35137,7 +35373,7 @@ function DomEditRotateHandle({
       title: "Rotate",
       "aria-label": "Rotate selection",
       onPointerDown: onStartRotate,
-      children: /* @__PURE__ */ jsx85("span", { className: "pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-studio-accent shadow-[0_0_3px_rgba(0,0,0,0.45)]", children: /* @__PURE__ */ jsxs58(
+      children: /* @__PURE__ */ jsx85("span", { className: "pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-accent-ink shadow-[0_0_3px_rgba(0,0,0,0.45)]", children: /* @__PURE__ */ jsxs58(
         "svg",
         {
           width: "11",
@@ -35533,7 +35769,7 @@ var CanvasContextMenu = memo24(function CanvasContextMenu2({
             "button",
             {
               type: "button",
-              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left",
+              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 cursor-pointer text-left",
               onPointerDown: (e) => {
                 if (e.button !== 0) return;
                 e.preventDefault();
@@ -36090,7 +36326,7 @@ function InlineTextToolbar({
       "data-inline-text-toolbar": "true",
       role: "toolbar",
       "aria-label": "Text formatting",
-      className: "pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]",
+      className: "pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-border bg-raised p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]",
       style: {
         left: placement.left,
         top: placement.top,
@@ -36103,14 +36339,14 @@ function InlineTextToolbar({
         /* @__PURE__ */ jsxs61(
           "label",
           {
-            className: "group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-white/10",
+            className: "group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-hover",
             title: "Text colour",
             children: [
               /* @__PURE__ */ jsx88(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "h-4 w-4 rounded-full border-2 border-white/25 transition-transform duration-150 group-hover:scale-110 group-active:scale-95",
+                  className: "h-4 w-4 rounded-full border-2 border-border-strong transition-transform duration-150 group-hover:scale-110 group-active:scale-95",
                   style: {
                     background: swatchBackground(placement.colours, styles.color),
                     backgroundOrigin: "border-box"
@@ -36192,7 +36428,7 @@ function ToolbarToggle({
       title: label,
       "aria-label": label,
       "aria-pressed": on,
-      className: `flex h-6 w-6 items-center justify-center rounded-md text-xs ${on ? "bg-studio-accent/20 text-studio-accent" : "text-white/70 hover:bg-white/10"}`,
+      className: `flex h-6 w-6 items-center justify-center rounded-md text-xs ${on ? "bg-studio-accent/20 text-accent-ink" : "text-text-2 hover:bg-hover"}`,
       style: {
         fontWeight: bold ? 700 : 400,
         fontStyle: italic ? "italic" : "normal",
@@ -36340,7 +36576,7 @@ function useInlineTextEdit({
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        cancel();
+        commit();
       }
     };
     const onBlur = () => commit();
@@ -36368,7 +36604,7 @@ function useInlineTextEdit({
       element.removeEventListener("dragover", onDragOver);
       element.removeEventListener("drop", onDrop);
     };
-  }, [session, commit, cancel]);
+  }, [session, commit]);
   const commitRef = useRef66(commit);
   commitRef.current = commit;
   useEffect46(() => () => commitRef.current(), []);
@@ -40869,7 +41105,7 @@ function editableAnimationId(animations, kind, sel) {
 
 // src/components/editor/MotionPathNode.tsx
 import { jsx as jsx93, jsxs as jsxs64 } from "react/jsx-runtime";
-var ACCENT2 = "var(--hf-accent, #3CE6AC)";
+var ACCENT = "var(--hf-accent, #3CE6AC)";
 function MotionPathNode(props) {
   const { cx, cy, r, interactive, removable, grabbing, selected } = props;
   const bx = cx + r * 1.8;
@@ -40889,7 +41125,7 @@ function MotionPathNode(props) {
         stroke: "#0b0f1a",
         strokeWidth: 1.5,
         vectorEffect: "non-scaling-stroke",
-        style: { fill: ACCENT2 }
+        style: { fill: ACCENT }
       }
     ),
     interactive && /* @__PURE__ */ jsx93(
@@ -40924,7 +41160,7 @@ function MotionPathNode(props) {
               stroke: "#0b0f1a",
               strokeWidth: 1,
               vectorEffect: "non-scaling-stroke",
-              style: { fill: ACCENT2 }
+              style: { fill: ACCENT }
             }
           ),
           /* @__PURE__ */ jsx93(
@@ -41250,7 +41486,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
             strokeWidth: 1.5,
             strokeDasharray: "3 3",
             vectorEffect: "non-scaling-stroke",
-            style: { stroke: ACCENT2 },
+            style: { stroke: ACCENT },
             opacity: 0.85
           }
         )
@@ -41446,7 +41682,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
             {
               points,
               fill: "none",
-              style: { stroke: ACCENT2 },
+              style: { stroke: ACCENT },
               strokeWidth: 1.5,
               strokeDasharray: "5 5",
               strokeLinejoin: "round",
@@ -41469,7 +41705,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
               strokeDasharray: "2 2",
               vectorEffect: "non-scaling-stroke",
               className: "pointer-events-none",
-              style: { stroke: ACCENT2 }
+              style: { stroke: ACCENT }
             }
           ),
           abs.map((p, i) => /* @__PURE__ */ jsx94(
@@ -41572,7 +41808,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
           "button",
           {
             type: "button",
-            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${motionPathArmed ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${motionPathArmed ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
             onClick: () => setMotionPathArmed(!motionPathArmed),
             title: motionPathArmed ? "Click the canvas to set the destination" : "Set motion destination",
             "aria-label": "Set motion destination",
@@ -41589,7 +41825,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             "button",
             {
               type: "button",
-              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${visible ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${visible ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
               onClick: toggle,
               title: `${label} ${visible ? "on" : "off"}`,
               "aria-label": `Toggle ${label.toLowerCase()}`,
@@ -41603,7 +41839,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
           "button",
           {
             type: "button",
-            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.snapEnabled ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.snapEnabled ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
             onClick: toggleSnap,
             title: prefs.snapEnabled ? "Snap enabled (S)" : "Snap disabled (S)",
             "aria-label": "Toggle snap",
@@ -41616,7 +41852,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             {
               ref: gridButtonRef,
               type: "button",
-              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.gridVisible ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.gridVisible ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
               onClick: toggleGrid,
               onContextMenu: (e) => {
                 e.preventDefault();
@@ -41643,7 +41879,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             "div",
             {
               ref: popoverRef,
-              className: "absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]",
+              className: "absolute right-0 top-full mt-1 rounded-lg bg-raised border border-border p-3 shadow-xl min-w-[180px]",
               children: [
                 /* @__PURE__ */ jsxs66("label", { className: "flex items-center justify-between text-xs text-white/80 mb-2", children: [
                   /* @__PURE__ */ jsx95("span", { children: "Grid spacing" }),
@@ -41903,7 +42139,7 @@ function PreviewOverlays({
       {
         type: "button",
         onClick: enterCaptionMode,
-        className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
+        className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
         children: "Edit captions"
       }
     )
@@ -42566,7 +42802,6 @@ function getAnimationsForElement(animations, target, element) {
 
 // src/hooks/gsapRuntimeBridge.ts
 var POSITION_CHANNEL_SET = new Set(POSITION_CHANNELS);
-var ROTATION_CHANNELS = ["rotation", "rotationX", "rotationY", "rotationZ"];
 var ROTATION_CHANNEL_SET = new Set(ROTATION_CHANNELS);
 async function resolveGroupTween(group, animations, selection, commitMutation, fetchFallbackAnimations) {
   const groupAnims = animations.filter((a) => a.propertyGroup === group);
@@ -43538,7 +43773,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
                 tabIndex: 0,
                 "aria-label": `Caption word "${seg.text}"`,
                 "aria-pressed": isSelected,
-                className: `absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-hidden${isSelected ? " ring-1 ring-white/50 z-10" : ""}`,
+                className: `absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-text-0 outline-hidden${isSelected ? " ring-1 ring-text-0/50 z-10" : ""}`,
                 style: {
                   left,
                   width,
@@ -43563,7 +43798,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
         /* @__PURE__ */ jsx98(
           "div",
           {
-            className: "absolute top-0 bottom-0 w-px bg-white/70 pointer-events-none z-20",
+            className: "absolute top-0 bottom-0 w-px bg-text-0/70 pointer-events-none z-20",
             style: { left: playheadLeft },
             "aria-hidden": "true"
           }
@@ -45802,7 +46037,7 @@ function WindowMenu() {
               onClick: () => togglePanel(id),
               className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-neutral-300 hover:bg-neutral-800",
               children: [
-                /* @__PURE__ */ jsx101("span", { className: "w-3 text-panel-accent", children: openPanels.has(id) ? "\u2713" : "" }),
+                /* @__PURE__ */ jsx101("span", { className: "w-3 text-accent-ink", children: openPanels.has(id) ? "\u2713" : "" }),
                 PANEL_DEFINITIONS[id].title
               ]
             },
@@ -46870,7 +47105,7 @@ function InspectorHeaderActions({
           track2("button", "Copy element info");
           onCopy();
         },
-        className: `flex h-6 w-6 items-center justify-center rounded transition-colors ${copied ? "text-studio-accent" : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"}`,
+        className: `flex h-6 w-6 items-center justify-center rounded transition-colors ${copied ? "text-accent-ink" : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"}`,
         title: copied ? "Copied!" : "Copy element info to clipboard",
         children: /* @__PURE__ */ jsxs75(
           "svg",
@@ -47905,7 +48140,7 @@ function SegmentedControl({
             onChange(option.value);
           },
           "aria-pressed": option.value === value,
-          className: `min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${option.value === value ? "bg-panel-hover text-white" : "text-panel-text-4 hover:text-panel-text-2"}`,
+          className: `min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${option.value === value ? "bg-panel-hover text-text-0" : "text-panel-text-4 hover:text-panel-text-2"}`,
           children: option.label
         },
         option.value
@@ -48023,14 +48258,16 @@ function createTransformCommitHandlers({
       "This element's position can't be edited here yet \u2014 it is driven by its animation"
     ))
       return;
-    const current = readMoveOffset(element.element);
+    const plainTranslate = !gsapWritesPosition(element.element);
+    const current = readMoveOffset(element.element, plainTranslate);
     if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
       return void showToast?.(UNREADABLE_TRANSLATE);
     await Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y
-      })
+      onSetManualOffset(
+        element,
+        { x: axis === "x" ? parsed : current.x, y: axis === "y" ? parsed : current.y },
+        { plainTranslate }
+      )
     );
   };
   const commitManualSize = async (axis, nextValue) => {
@@ -48254,7 +48491,7 @@ function MediaSection({
         /* @__PURE__ */ jsx110("div", { className: "h-1 overflow-hidden rounded-full bg-panel-border", children: /* @__PURE__ */ jsx110(
           "div",
           {
-            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-red-400" : "bg-studio-accent"}`,
+            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-danger-ink" : "bg-studio-accent"}`,
             style: { width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }
           }
         ) })
@@ -48556,7 +48793,7 @@ function ColorGradingSliderControl({
             event.stopPropagation();
             settings.onClick();
           },
-          className: `relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${settings.active ? "text-studio-accent" : "text-panel-text-5"}`,
+          className: `relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${settings.active ? "text-accent-ink" : "text-panel-text-5"}`,
           title: settings.label,
           children: [
             /* @__PURE__ */ jsx111(Settings, { size: 11 }),
@@ -49021,7 +49258,7 @@ function ColorGradingControls({
             }
           )
         ] }),
-        lutImportError && /* @__PURE__ */ jsx112("div", { className: "text-[10px] text-red-400", role: "alert", children: lutImportError }),
+        lutImportError && /* @__PURE__ */ jsx112("div", { className: "text-[10px] text-danger-ink", role: "alert", children: lutImportError }),
         grading.lut && /* @__PURE__ */ jsxs79("div", { className: "grid gap-2", children: [
           selectedProjectLut && /* @__PURE__ */ jsxs79("div", { className: "flex min-w-0 items-start gap-2 text-[10px] leading-4 text-panel-text-3", children: [
             /* @__PURE__ */ jsx112("span", { className: "mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full bg-studio-accent" }),
@@ -49892,7 +50129,7 @@ function useColorGradingController({
 // src/components/editor/propertyPanelColorGradingSection.tsx
 import { jsx as jsx113, jsxs as jsxs80 } from "react/jsx-runtime";
 function StatusPill({ status }) {
-  const dotClass = status.state === "active" ? "bg-emerald-400" : status.state === "pending" ? "bg-amber-300" : status.state === "unavailable" ? "bg-red-400" : "bg-panel-text-5";
+  const dotClass = status.state === "active" ? "bg-accent" : status.state === "pending" ? "bg-warning-ink" : status.state === "unavailable" ? "bg-danger-ink" : "bg-panel-text-5";
   return /* @__PURE__ */ jsxs80(
     "div",
     {
@@ -49914,16 +50151,16 @@ function HdrMediaWarning({ metadata }) {
     metadata.color.colorPrimaries,
     metadata.color.colorTransfer
   ].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs80("div", { className: "mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-amber-100", children: [
+  return /* @__PURE__ */ jsxs80("div", { className: "mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-warning-ink", children: [
     /* @__PURE__ */ jsxs80("div", { className: "mb-1 flex min-w-0 items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs80("span", { className: "font-semibold", children: [
         metadata.color.label,
         " source"
       ] }),
-      /* @__PURE__ */ jsx113("span", { className: "rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100", children: "SDR preview" })
+      /* @__PURE__ */ jsx113("span", { className: "rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink", children: "SDR preview" })
     ] }),
-    /* @__PURE__ */ jsx113("p", { className: "text-amber-100/80", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
-    details && /* @__PURE__ */ jsx113("p", { className: "mt-1 truncate text-[10px] text-amber-100/55", children: details })
+    /* @__PURE__ */ jsx113("p", { className: "text-text-2", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
+    details && /* @__PURE__ */ jsx113("p", { className: "mt-1 truncate text-[10px] text-text-muted", children: details })
   ] });
 }
 function HoldBeforeButton({
@@ -49980,7 +50217,7 @@ function HoldBeforeButton({
         event.preventDefault();
         onHoldChange(false);
       },
-      className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${active ? "bg-studio-accent text-black" : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"} disabled:cursor-not-allowed disabled:opacity-40`,
+      className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${active ? "bg-studio-accent text-on-accent" : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"} disabled:cursor-not-allowed disabled:opacity-40`,
       title: "Hold to show original",
       children: /* @__PURE__ */ jsx113(Compare, { size: 13 })
     }
@@ -50973,7 +51210,7 @@ function FontFamilyField({
           type: "button",
           disabled: disabled || loadingLocalFonts,
           onClick: loadBrowserLocalFonts,
-          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",
+          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off",
           children: loadingLocalFonts ? "..." : "Local"
         }
       ),
@@ -50983,7 +51220,7 @@ function FontFamilyField({
           type: "button",
           disabled: disabled || importingFonts || !onImportFonts,
           onClick: () => fontInputRef.current?.click(),
-          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",
+          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off",
           children: importingFonts ? "..." : "Import"
         }
       ),
@@ -51401,7 +51638,7 @@ function VariablesBindElement({
           className: `${VARIABLES_INPUT_CLASS} font-mono`
         }
       ),
-      existingDecl && /* @__PURE__ */ jsxs84("p", { className: "text-[9px] leading-snug text-amber-400/90", children: [
+      existingDecl && /* @__PURE__ */ jsxs84("p", { className: "text-[9px] leading-snug text-warning-ink", children: [
         '"',
         trimmedId,
         '" already exists. This element will use its current value',
@@ -51592,7 +51829,7 @@ function PromotableControl({
     bound && /* @__PURE__ */ jsxs85(
       "span",
       {
-        className: "pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent",
+        className: "pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-accent-ink",
         title: `Bound to variable "${promote.boundId}"`,
         children: [
           "\u25C6 ",
@@ -51609,7 +51846,7 @@ function PromotableControl({
           e.stopPropagation();
           promote.promote();
         },
-        className: "absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100",
+        className: "absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-raised/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-accent-ink hover:opacity-100",
         children: "\u25C7 var"
       }
     )
@@ -52069,7 +52306,7 @@ function ImageFillField({
             type: "button",
             disabled: disabled || uploading,
             onClick: () => fileInputRef.current?.click(),
-            className: `inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${disabled || uploading ? "cursor-not-allowed text-neutral-600" : "cursor-pointer hover:border-neutral-600 hover:text-white"}`,
+            className: `inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${disabled || uploading ? "cursor-not-allowed text-neutral-600" : "cursor-pointer hover:border-neutral-600 hover:text-text-0"}`,
             children: [
               /* @__PURE__ */ jsx121(Plus, { size: 12, className: "shrink-0" }),
               /* @__PURE__ */ jsx121("span", { className: "truncate", children: uploading ? "Uploading\u2026" : "Upload image" })
@@ -52092,7 +52329,7 @@ function ImageFillField({
           }
         )
       ] }),
-      uploadError && /* @__PURE__ */ jsx121("div", { className: "text-[10px] text-red-400", role: "alert", children: uploadError }),
+      uploadError && /* @__PURE__ */ jsx121("div", { className: "text-[10px] text-danger-ink", role: "alert", children: uploadError }),
       imageAssets.length > 0 ? /* @__PURE__ */ jsxs87("div", { className: "space-y-3", children: [
         selectedAsset && /* @__PURE__ */ jsx121("div", { className: "overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80", children: /* @__PURE__ */ jsx121(
           "img",
@@ -52256,7 +52493,7 @@ function GradientField({
                 track2("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               },
-              className: "h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
+              className: "h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-accent-ink focus:ring-panel-accent"
             }
           ),
           "Repeat"
@@ -52276,7 +52513,7 @@ function GradientField({
                 }))
               });
             },
-            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600",
+            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-neutral-600",
             children: [
               /* @__PURE__ */ jsx121(ReverseGradientIcon, { size: 16 }),
               "Reverse"
@@ -52370,7 +52607,7 @@ function GradientField({
             disabled: disabled || parsed.stops.length >= 6,
             onClick: () => addStop(),
             title: parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop",
-            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600",
+            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600",
             children: [
               /* @__PURE__ */ jsx121(Plus, { size: 12 }),
               "Add stop"
@@ -52409,7 +52646,7 @@ function GradientField({
                 type: "button",
                 disabled: disabled || parsed.stops.length <= 2,
                 onClick: () => removeStop(index),
-                className: "mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-700",
+                className: "mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off",
                 "aria-label": `Remove stop ${index + 1}`,
                 children: /* @__PURE__ */ jsx121(X, { size: 12 })
               }
@@ -52468,6 +52705,7 @@ function BorderRadiusEditor({
     setLinked((l) => !l);
   }, [linked, uniform, tl, onCommit]);
   const path = buildRoundedRectPath(PREVIEW_W, PREVIEW_H, sTL, sTR, sBR, sBL);
+  const dotFill = linked ? "fill-[light-dark(oklch(0.5_0.2_260),#3b82f6)]" : "fill-[light-dark(oklch(0.55_0.2_294),#a78bfa)]";
   return /* @__PURE__ */ jsxs88("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs88("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxs88(
@@ -52478,27 +52716,11 @@ function BorderRadiusEditor({
           viewBox: `0 0 ${PREVIEW_W} ${PREVIEW_H}`,
           className: "shrink-0",
           children: [
-            /* @__PURE__ */ jsx122(
-              "path",
-              {
-                d: path,
-                fill: "rgba(255,255,255,0.06)",
-                stroke: "rgba(255,255,255,0.24)",
-                strokeWidth: 1.5
-              }
-            ),
-            /* @__PURE__ */ jsx122("circle", { cx: sTL, cy: sTL, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" }),
-            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sTR, cy: sTR, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" }),
-            /* @__PURE__ */ jsx122(
-              "circle",
-              {
-                cx: PREVIEW_W - sBR,
-                cy: PREVIEW_H - sBR,
-                r: 3,
-                fill: linked ? "#3b82f6" : "#a78bfa"
-              }
-            ),
-            /* @__PURE__ */ jsx122("circle", { cx: sBL, cy: PREVIEW_H - sBL, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" })
+            /* @__PURE__ */ jsx122("path", { d: path, className: "fill-text-0/[0.06] stroke-text-0/25", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx122("circle", { cx: sTL, cy: sTL, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sTR, cy: sTR, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sBR, cy: PREVIEW_H - sBR, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: sBL, cy: PREVIEW_H - sBL, r: 3, className: dotFill })
           ]
         }
       ),
@@ -53320,7 +53542,7 @@ function TextFieldEditor({
             track2("button", "Remove text field");
             onRemoveTextField(field.key);
           },
-          className: "inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+          className: "inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
           children: "Remove"
         }
       )
@@ -53459,7 +53681,7 @@ function TextSection({
                 if (nextKey) setActiveTextFieldKey(nextKey);
               });
             },
-            className: "inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+            className: "inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
             children: [
               /* @__PURE__ */ jsx124(Plus, { size: 12, className: "shrink-0" }),
               /* @__PURE__ */ jsx124("span", { className: "truncate", children: "Add text" })
@@ -53707,7 +53929,7 @@ function ComputedTweenNotice({
       {
         type: "button",
         onClick: onUnroll,
-        className: "shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-panel-accent hover:bg-neutral-800",
+        className: "shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-neutral-800",
         title: "Rewrite the helper/loop into explicit tweens so this keyframe edits directly",
         children: "Unroll to edit"
       }
@@ -53868,7 +54090,7 @@ function RemoveButton({ onClick, title }) {
     {
       type: "button",
       onClick,
-      className: "relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]",
+      className: "relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-danger-ink active:scale-[0.95]",
       title,
       "aria-label": title,
       children: /* @__PURE__ */ jsx128(
@@ -54155,7 +54377,7 @@ var AnimationCard = memo34(function AnimationCard2({
               /* @__PURE__ */ jsx129(
                 "span",
                 {
-                  className: "rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent",
+                  className: "rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-accent-ink",
                   title: METHOD_TOOLTIPS[animation.method],
                   children: methodLabel
                 }
@@ -54311,7 +54533,7 @@ var AnimationCard = memo34(function AnimationCard2({
             )
           ] }) }),
           animation.method === "fromTo" && /* @__PURE__ */ jsxs95("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-orange-400/70", children: "From" }),
+            /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-warning-ink", children: "From" }),
             /* @__PURE__ */ jsx129("div", { className: "space-y-1.5", children: Object.entries(animation.fromProperties ?? {}).map(([prop, val]) => /* @__PURE__ */ jsx129(
               PropertyRow,
               {
@@ -54333,11 +54555,11 @@ var AnimationCard = memo34(function AnimationCard2({
                 onAdd: (prop) => onAddFromProperty?.(animation.id, prop),
                 onOpen: () => setAddingFromProp(true),
                 onClose: () => setAddingFromProp(false),
-                buttonClassName: "text-[11px] font-medium text-orange-400/70 transition-colors hover:text-orange-300"
+                buttonClassName: "text-[11px] font-medium text-warning-ink transition-colors hover:text-text-0"
               }
             ) })
           ] }),
-          animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70", children: "To" }),
+          animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-accent-ink", children: "To" }),
           Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("div", { className: "space-y-1.5", children: Object.entries(animation.properties).map(([prop, val]) => /* @__PURE__ */ jsx129(
             PropertyRow,
             {
@@ -54391,7 +54613,7 @@ var AnimationCard = memo34(function AnimationCard2({
               {
                 type: "button",
                 onClick: () => onDeleteAnimation(animation.id),
-                className: "ml-auto text-[11px] font-medium text-red-400 transition-colors hover:text-red-300",
+                className: "ml-auto text-[11px] font-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15",
                 title: "Remove this animation",
                 children: "Remove"
               }
@@ -54407,7 +54629,7 @@ var AnimationCard = memo34(function AnimationCard2({
 import { jsx as jsx130, jsxs as jsxs96 } from "react/jsx-runtime";
 var STYLES = {
   classic: {
-    method: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+    method: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
     cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300",
     trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
   },
@@ -54606,8 +54828,8 @@ var GsapAnimationSection = memo35(function GsapAnimationSection2({
   ...callbacks
 }) {
   return /* @__PURE__ */ jsxs98(Section, { title: "Animation", icon: /* @__PURE__ */ jsx132(Film, { size: 15 }), children: [
-    multipleTimelines && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
-    unsupportedTimelinePattern && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
+    multipleTimelines && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+    unsupportedTimelinePattern && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
     multipleTimelines || unsupportedTimelinePattern ? null : /* @__PURE__ */ jsx132(
       GsapAnimationList,
       {
@@ -54949,7 +55171,7 @@ function Transform3DCube({
         title: keyframed ? "3D transform is keyframed \u2014 click a field diamond to add keyframes" : "Keyframe the 3D transform (animate it over time)",
         "aria-label": "Keyframe 3D transform",
         "aria-pressed": keyframed,
-        className: `absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"}`,
+        className: `absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
         children: /* @__PURE__ */ jsx133(
           "svg",
           {
@@ -55309,7 +55531,7 @@ import { Eye as Eye4, EyeSlash as EyeSlash3 } from "@phosphor-icons/react";
 import { jsx as jsx135, jsxs as jsxs101 } from "react/jsx-runtime";
 var ICON_BY_KIND = { text: Type, media: Film, other: Square };
 var ICON_COLOR_BY_KIND = {
-  text: "text-panel-accent",
+  text: "text-accent-ink",
   media: "text-panel-media",
   other: "text-panel-container"
 };
@@ -55392,7 +55614,7 @@ function PropertyPanelFlatHeader({
             track2("button", "Copy element info");
             onCopy();
           },
-          className: copied ? "text-panel-accent" : void 0,
+          className: copied ? "text-accent-ink" : void 0,
           children: /* @__PURE__ */ jsx135(ClipboardList, { size: 13 })
         }
       ),
@@ -55450,7 +55672,7 @@ function PropertyPanelFlatFooter({
                 height: "13",
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
-                className: "text-panel-accent",
+                className: "text-accent-ink",
                 children: /* @__PURE__ */ jsx136("path", { d: "M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4z" })
               }
             ),
@@ -55470,7 +55692,7 @@ function PropertyPanelFlatFooter({
             track2("button", "Gesture recording");
             onToggleRecording();
           },
-          className: recording ? "text-panel-danger animate-pulse" : "text-panel-danger",
+          className: recording ? "text-danger-ink animate-pulse" : "text-danger-ink",
           children: /* @__PURE__ */ jsx136("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", children: recording ? /* @__PURE__ */ jsx136("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1.5" }) : /* @__PURE__ */ jsx136("circle", { cx: "7", cy: "7", r: "6" }) })
         }
       )
@@ -55543,7 +55765,7 @@ function FlatSliderReadout({
           e.stopPropagation();
         },
         onBlur: () => commit(false),
-        className: `w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${invalid ? "border-red-400" : "border-panel-accent"}`
+        className: `w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${invalid ? "border-dashed border-danger-ink" : "border-panel-accent"}`
       }
     );
   }
@@ -55581,7 +55803,7 @@ var VALUE_TIER_LABEL_CLASS = {
 var VALUE_TIER_VALUE_CLASS = {
   default: "text-panel-text-3",
   explicitDefault: "text-panel-text-0",
-  explicitCustom: "text-panel-accent"
+  explicitCustom: "text-accent-ink"
 };
 
 // src/components/editor/propertyPanelFlatSelectRow.tsx
@@ -56008,7 +56230,7 @@ function FlatSlider({
             "div",
             {
               "data-flat-slider-knob": "true",
-              className: `absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${tier === "explicitCustom" ? "h-2 w-2 bg-white" : "h-[7px] w-[7px] bg-panel-text-4"}`,
+              className: `absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${tier === "explicitCustom" ? "h-2 w-2 bg-text-0" : "h-[7px] w-[7px] bg-panel-text-4"}`,
               style: { left: `${clampedPct}%` }
             }
           )
@@ -57410,8 +57632,8 @@ function FlatMotionSection({
       }
     ),
     showEffects && /* @__PURE__ */ jsxs110(Fragment41, { children: [
-      multipleTimelines && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
-      unsupportedTimelinePattern && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This timeline uses a computed key the editor can't resolve statically." }),
+      multipleTimelines && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+      unsupportedTimelinePattern && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This timeline uses a computed key the editor can't resolve statically." }),
       !multipleTimelines && !unsupportedTimelinePattern && /* @__PURE__ */ jsx146(
         GsapAnimationList,
         {
@@ -57567,7 +57789,7 @@ function AutomationToggle({
     "button",
     {
       type: "button",
-      className: `hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${automated ? "border-panel-accent text-panel-accent" : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"}`,
+      className: `hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${automated ? "border-panel-accent text-accent-ink" : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"}`,
       "aria-pressed": automated,
       "aria-label": automated ? `Remove ${label} automation` : `Automate ${label}`,
       onClick: () => automated ? onRemoveAutomation?.(paramKey) : onAutomate?.(paramKey),
@@ -57648,7 +57870,7 @@ function FxParamRow({
         /* @__PURE__ */ jsx147(
           "span",
           {
-            className: `hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${automated ? "text-panel-accent" : "text-panel-text-2"}`,
+            className: `hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${automated ? "text-accent-ink" : "text-panel-text-2"}`,
             children: param.label
           }
         ),
@@ -58008,7 +58230,7 @@ function FxCarveMember({
                 children: value
               }
             ),
-            automated ? /* @__PURE__ */ jsx148("span", { className: "text-[#3CE6AC]", children: "A" }) : null
+            automated ? /* @__PURE__ */ jsx148("span", { className: "text-accent-ink", children: "A" }) : null
           ]
         },
         param.key
@@ -58323,7 +58545,7 @@ function Fader2({
     /* @__PURE__ */ jsx149(
       "span",
       {
-        className: `hf-fx-eq-value font-mono text-[9px] tabular-nums ${moved ? "text-panel-accent" : "text-panel-text-2"}`,
+        className: `hf-fx-eq-value font-mono text-[9px] tabular-nums ${moved ? "text-accent-ink" : "text-panel-text-2"}`,
         children: moved ? shown(value) : "0"
       }
     )
@@ -58369,7 +58591,7 @@ function FxEqModule({
             "button",
             {
               type: "button",
-              className: "hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-panel-danger",
+              className: "hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-danger-ink",
               "aria-label": "Remove Tone",
               disabled,
               onClick: onRemove,
@@ -58804,7 +59026,7 @@ function FxNodeHeader({
       "button",
       {
         type: "button",
-        className: "hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40",
+        className: "hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40",
         title: "Remove",
         disabled,
         onClick: onRemove,
@@ -59028,7 +59250,7 @@ function FxPresetRun({
             "button",
             {
               type: "button",
-              className: "hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40",
+              className: "hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40",
               title: `Remove ${preset.label}`,
               disabled,
               onClick: onRemoveRun,
@@ -60687,7 +60909,7 @@ function FlatMediaSection({
             "data-flat-media-remove-bg": "true",
             disabled: !canRemoveBackground || removeBusy,
             onClick: () => void runBackgroundRemoval(),
-            className: "flex items-center gap-1 text-[10px] font-medium text-panel-accent disabled:cursor-not-allowed disabled:opacity-50",
+            className: "flex items-center gap-1 text-[10px] font-medium text-accent-ink disabled:cursor-not-allowed disabled:opacity-50",
             title: canRemoveBackground ? "Remove background and save a transparent asset" : "Select a project-local image or video asset",
             children: removeBusy ? "Working" : "Remove BG"
           }
@@ -60715,7 +60937,7 @@ function FlatMediaSection({
         /* @__PURE__ */ jsx160("div", { className: "h-1 overflow-hidden rounded-full bg-panel-hover", children: /* @__PURE__ */ jsx160(
           "div",
           {
-            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-red-400" : "bg-panel-accent"}`,
+            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-danger-ink" : "bg-panel-accent"}`,
             style: { width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }
           }
         ) })
@@ -61339,7 +61561,7 @@ function CurveGraph({
           onSettle();
         }
       },
-      className: "mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm border border-panel-border-input bg-black/20 outline-hidden focus:ring-1 focus:ring-panel-accent",
+      className: "mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm scheme-dark border border-panel-border-input bg-bg-0 outline-hidden focus:ring-1 focus:ring-inset focus:ring-panel-accent",
       children: [
         /* @__PURE__ */ jsx161("defs", { children: /* @__PURE__ */ jsxs123("linearGradient", { id: `hf-hue-axis-${tab.key}`, children: [
           /* @__PURE__ */ jsx161("stop", { offset: "0%", stopColor: "#f33" }),
@@ -61350,7 +61572,7 @@ function CurveGraph({
           /* @__PURE__ */ jsx161("stop", { offset: "83.3%", stopColor: "#f3f" }),
           /* @__PURE__ */ jsx161("stop", { offset: "100%", stopColor: "#f33" })
         ] }) }),
-        [0.25, 0.5, 0.75].map((ratio) => /* @__PURE__ */ jsxs123("g", { stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5", children: [
+        [0.25, 0.5, 0.75].map((ratio) => /* @__PURE__ */ jsxs123("g", { className: "stroke-text-0/10", strokeWidth: "0.5", children: [
           /* @__PURE__ */ jsx161(
             "line",
             {
@@ -62255,14 +62477,14 @@ function PropertyPanelColorSecondary({
               setSampling(false);
             }
           },
-          className: "flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:opacity-50",
+          className: "flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:opacity-50",
           children: [
             /* @__PURE__ */ jsx165(Eyedropper, { size: 12 }),
             sampling ? "Capturing frame" : "Sample color from frame"
           ]
         }
       ),
-      captureError && /* @__PURE__ */ jsx165("p", { role: "alert", className: "text-[9px] leading-4 text-red-300", children: captureError }),
+      captureError && /* @__PURE__ */ jsx165("p", { role: "alert", className: "text-[9px] leading-4 text-danger-ink", children: captureError }),
       sampleFrame && samplePixels && /* @__PURE__ */ jsxs127("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsxs127("div", { className: "flex gap-2 text-[9px]", children: [
           /* @__PURE__ */ jsx165(
@@ -62271,7 +62493,7 @@ function PropertyPanelColorSecondary({
               type: "button",
               "aria-pressed": !showMatte,
               onClick: () => setShowMatte(false),
-              className: !showMatte ? "text-panel-accent" : "text-panel-text-4",
+              className: !showMatte ? "text-accent-ink" : "text-panel-text-4",
               children: "Source"
             }
           ),
@@ -62281,7 +62503,7 @@ function PropertyPanelColorSecondary({
               type: "button",
               "aria-pressed": showMatte,
               onClick: () => setShowMatte(true),
-              className: showMatte ? "text-panel-accent" : "text-panel-text-4",
+              className: showMatte ? "text-accent-ink" : "text-panel-text-4",
               children: "Selection matte"
             }
           )
@@ -62804,9 +63026,9 @@ import { useEffect as useEffect93, useRef as useRef109 } from "react";
 import { isHfColorGradingActive as isHfColorGradingActive3 } from "@hyperframes/core/color-grading";
 import { jsx as jsx167, jsxs as jsxs129 } from "react/jsx-runtime";
 var STATUS_DOT_CLASS = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
+  active: "bg-accent",
+  pending: "bg-warning-ink",
+  unavailable: "bg-danger-ink",
   missing: "bg-panel-text-5",
   inactive: "bg-panel-text-5"
 };
@@ -62939,24 +63161,17 @@ function HdrBanner({ metadata }) {
     "div",
     {
       "data-flat-grade-hdr-banner": "true",
-      className: "rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-amber-100",
+      className: "rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-warning-ink",
       children: [
         /* @__PURE__ */ jsxs130("div", { className: "mb-0.5 flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs130("span", { className: "font-semibold", children: [
             metadata.color.label,
             " source"
           ] }),
-          /* @__PURE__ */ jsx168("span", { className: "rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100", children: "SDR preview" })
+          /* @__PURE__ */ jsx168("span", { className: "rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink", children: "SDR preview" })
         ] }),
-        /* @__PURE__ */ jsx168("p", { className: "text-amber-100/80", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
-        details && /* @__PURE__ */ jsx168(
-          "p",
-          {
-            "data-flat-grade-hdr-detail": "true",
-            className: "mt-0.5 truncate text-[9px] text-amber-100/55",
-            children: details
-          }
-        )
+        /* @__PURE__ */ jsx168("p", { className: "text-text-2", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
+        details && /* @__PURE__ */ jsx168("p", { "data-flat-grade-hdr-detail": "true", className: "mt-0.5 truncate text-[9px] text-text-muted", children: details })
       ]
     }
   );
@@ -63056,7 +63271,7 @@ function FlatColorGradingSection({
         {
           type: "button",
           onClick: onRequestPresetPreviews,
-          className: "text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+          className: "text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
           children: "Retry look previews"
         }
       ),
@@ -63357,7 +63572,7 @@ function FlatColorGradingSection({
             track2("button", "Apply grade to scope");
             onApplyToScope();
           },
-          className: "text-[11px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "text-[11px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50",
           children: applyBusy ? "Applying" : "Apply"
         }
       )
@@ -63833,7 +64048,7 @@ function FlatEffectsSection({
             track2("button", "Customize effect palette");
             onCommitColorGrading({ ...grading, palette: fallback });
           },
-          className: "flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+          className: "flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
           children: [
             /* @__PURE__ */ jsx170(Plus, { size: 11 }),
             " Custom palette"
@@ -63944,7 +64159,7 @@ function FlatEffectsSection({
                   type: "button",
                   title: `Remove ${selectedEffect.label}`,
                   onClick: () => removeEffect(selectedEffect),
-                  className: "text-panel-text-4 hover:text-red-300",
+                  className: "text-panel-text-4 hover:text-danger-ink",
                   children: /* @__PURE__ */ jsx170(X, { size: 11 })
                 }
               )
@@ -63987,7 +64202,7 @@ function FlatEffectsSection({
         "data-flat-effects-add-toggle": "true",
         "aria-expanded": catalogOpen,
         onClick: () => setCatalogOpen((open) => !open),
-        className: "flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+        className: "flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
         children: [
           /* @__PURE__ */ jsx170(Plus, { size: 11 }),
           " Add effect"
@@ -64009,7 +64224,7 @@ function FlatEffectsSection({
               "aria-selected": catalogGroup === group.label,
               "data-flat-effect-group": group.label,
               onClick: () => setCatalogGroup(group.label),
-              className: `min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${catalogGroup === group.label ? "font-medium text-panel-accent" : "text-panel-text-4 hover:text-panel-text-1"}`,
+              className: `min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${catalogGroup === group.label ? "font-medium text-accent-ink" : "text-panel-text-4 hover:text-panel-text-1"}`,
               children: group.label
             },
             group.label
@@ -64144,15 +64359,47 @@ import {
   resolveBlockCategory
 } from "@hyperframes/core/registry";
 var COLOR_MAP = {
-  transitions: { bg: "bg-blue-500/15", text: "text-blue-400", dot: "bg-blue-400" },
-  vfx: { bg: "bg-purple-500/15", text: "text-purple-400", dot: "bg-purple-400" },
-  social: { bg: "bg-pink-500/15", text: "text-pink-400", dot: "bg-pink-400" },
-  data: { bg: "bg-green-500/15", text: "text-green-400", dot: "bg-green-400" },
-  scenes: { bg: "bg-amber-500/15", text: "text-amber-400", dot: "bg-amber-400" },
-  captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
-  effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
-  "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
-  "code-animation": { bg: "bg-emerald-500/15", text: "text-emerald-400", dot: "bg-emerald-400" }
+  transitions: {
+    bg: "bg-blue-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]"
+  },
+  vfx: {
+    bg: "bg-purple-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]"
+  },
+  social: {
+    bg: "bg-pink-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]"
+  },
+  data: {
+    bg: "bg-green-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]"
+  },
+  scenes: { bg: "bg-amber-500/15", text: "text-warning-ink", dot: "bg-warning-ink" },
+  captions: {
+    bg: "bg-cyan-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]"
+  },
+  effects: {
+    bg: "bg-rose-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]"
+  },
+  "text-effects": {
+    bg: "bg-violet-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]"
+  },
+  "code-animation": {
+    bg: "bg-emerald-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]"
+  }
 };
 function getCategoryColors(category) {
   return COLOR_MAP[category];
@@ -64257,7 +64504,7 @@ function FlatOverlaysSection({
     return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-panel-text-4", children: "Loading overlays\u2026" });
   }
   if (error) {
-    return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-red-300", children: error });
+    return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-danger-ink", children: error });
   }
   const busy = adding !== null;
   return /* @__PURE__ */ jsx171("div", { "data-flat-overlays": "true", className: FLAT_PREVIEW_GRID, children: overlays.map((overlay) => /* @__PURE__ */ jsxs132(
@@ -64306,7 +64553,7 @@ function FlatOverlaysSection({
             Plus,
             {
               size: 12,
-              className: "absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-panel-accent group-hover:opacity-100"
+              className: "absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-accent-ink group-hover:opacity-100"
             }
           )
         ] }),
@@ -64823,7 +65070,7 @@ function GestureRecordPanelButton({
         track2("button", "Gesture recording");
         onToggleRecording();
       },
-      className: `w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${recording ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse" : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"}`,
+      className: `w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${recording ? "bg-red-500/15 text-danger-ink border border-red-500/30 animate-pulse" : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"}`,
       children: [
         /* @__PURE__ */ jsx173(GestureRecordIcon, { recording }),
         recording ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s -- press R` : "Record gesture (R) -- move pointer to capture motion"
@@ -64853,14 +65100,14 @@ function FlatEmptyState() {
     /* @__PURE__ */ jsxs135("div", { className: "mt-2 flex w-full flex-col gap-1.5", children: [
       /* @__PURE__ */ jsxs135("span", { className: "flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2", children: [
         /* @__PURE__ */ jsxs135("span", { className: "flex items-center gap-2 text-[11px] text-panel-text-2", children: [
-          /* @__PURE__ */ jsx174("span", { className: "text-panel-danger", children: "\u25CF" }),
+          /* @__PURE__ */ jsx174("span", { className: "text-danger-ink", children: "\u25CF" }),
           "Record a gesture"
         ] }),
         /* @__PURE__ */ jsx174("span", { className: "rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5", children: "R" })
       ] }),
       /* @__PURE__ */ jsxs135("span", { className: "flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2", children: [
         /* @__PURE__ */ jsxs135("span", { className: "flex items-center gap-2 text-[11px] text-panel-text-2", children: [
-          /* @__PURE__ */ jsx174("span", { className: "text-panel-accent", children: "\u2726" }),
+          /* @__PURE__ */ jsx174("span", { className: "text-accent-ink", children: "\u2726" }),
           "Describe a change to the agent"
         ] }),
         /* @__PURE__ */ jsx174("span", { className: "rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5", children: "\u2318K" })
@@ -64873,7 +65120,7 @@ function elementKindGlyph(element) {
     return { glyph: "\u25C6", className: "bg-panel-media/10 text-panel-media" };
   }
   if (element.textFields?.length > 0) {
-    return { glyph: "T", className: "bg-panel-accent/10 text-panel-accent" };
+    return { glyph: "T", className: "bg-panel-accent/10 text-accent-ink" };
   }
   return { glyph: "\u25A6", className: "bg-panel-container/10 text-panel-container" };
 }
@@ -64887,7 +65134,7 @@ function FlatMultiSelectState({
   const hasAudio = !canHideSelections(multiSelectedElements);
   return /* @__PURE__ */ jsxs135("div", { className: "flex flex-col gap-3 px-4 py-3", children: [
     /* @__PURE__ */ jsxs135("div", { className: "flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3", children: [
-      /* @__PURE__ */ jsx174("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent", children: /* @__PURE__ */ jsx174(Layers, { size: 16 }) }),
+      /* @__PURE__ */ jsx174("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-accent-ink", children: /* @__PURE__ */ jsx174(Layers, { size: 16 }) }),
       /* @__PURE__ */ jsxs135("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs135("div", { className: "text-[13px] font-semibold text-panel-text-0", children: [
           multiSelectCount,
@@ -65119,7 +65366,7 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
   const resolvedHeight = manualSize.height > 0 ? manualSize.height : parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height;
-  const manualRotation = readStudioRotation(element.element);
+  const manualRotation = readShownRotation(element.element);
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
   const currentPct = elDuration > 0 ? (currentTime - elStart) / elDuration * 100 : 0;
@@ -65510,34 +65757,52 @@ import {
 import { jsx as jsx176 } from "react/jsx-runtime";
 var SZ = 14;
 var W = "duotone";
+var RED = "text-[light-dark(oklch(0.59_0.194_35),oklch(0.71_0.194_35))]";
+var BLUE = "text-[light-dark(oklch(0.56_0.14_253),oklch(0.69_0.14_253))]";
+var GREEN = "text-[light-dark(oklch(0.53_0.192_150),#22C55E)]";
+var GRAY = "text-[light-dark(oklch(0.56_0.019_261),#9CA3AF)]";
+var DIM = "text-[light-dark(oklch(0.55_0.023_264),oklch(0.69_0.023_264))]";
+var ICONS = /* @__PURE__ */ new Map([
+  ["html", [FileHtml, RED]],
+  ["css", [FileCss, "text-[light-dark(oklch(0.5_0.2_266),oklch(0.71_0.2_266))]"]],
+  ["js", [FileJs, "text-[light-dark(oklch(0.56_0.156_101),#F0DB4F)]"]],
+  ["jsx", [FileJsx, "text-[light-dark(oklch(0.55_0.117_219),#61DAFB)]"]],
+  ["ts", [FileTs, BLUE]],
+  ["tsx", [FileTsx, BLUE]],
+  ["json", [FileCode, "text-[light-dark(oklch(0.54_0.182_152),#4ADE80)]"]],
+  ["svg", [FileSvg, "text-[light-dark(oklch(0.58_0.187_48),#F97316)]"]],
+  ["md", [FileMd, GRAY]],
+  ["txt", [FileTxt, GRAY]],
+  ["png", [FilePng, GREEN]],
+  ["jpg", [FileJpg, GREEN]],
+  ["webp", [PhImage, GREEN]],
+  ["mp4", [FileVideo, "text-[light-dark(oklch(0.59_0.2_304),oklch(0.71_0.2_304))]"]],
+  ["mp3", [Waveform, "text-[light-dark(oklch(0.53_0.159_165),#3CE6AC)]"]],
+  ["woff", [TextAa, DIM]]
+]);
+var ALIAS = new Map(
+  Object.entries({
+    mjs: "js",
+    cjs: "js",
+    mts: "ts",
+    mdx: "md",
+    jpeg: "jpg",
+    gif: "webp",
+    ico: "webp",
+    webm: "mp4",
+    mov: "mp4",
+    wav: "mp3",
+    ogg: "mp3",
+    m4a: "mp3",
+    woff2: "woff",
+    ttf: "woff",
+    otf: "woff"
+  })
+);
 function FileIcon({ path }) {
   const ext2 = path.split(".").pop()?.toLowerCase() ?? "";
-  const c = "shrink-0";
-  if (ext2 === "html") return /* @__PURE__ */ jsx176(FileHtml, { size: SZ, weight: W, color: "#E44D26", className: c });
-  if (ext2 === "css") return /* @__PURE__ */ jsx176(FileCss, { size: SZ, weight: W, color: "#264DE4", className: c });
-  if (ext2 === "js" || ext2 === "mjs" || ext2 === "cjs")
-    return /* @__PURE__ */ jsx176(FileJs, { size: SZ, weight: W, color: "#F0DB4F", className: c });
-  if (ext2 === "jsx") return /* @__PURE__ */ jsx176(FileJsx, { size: SZ, weight: W, color: "#61DAFB", className: c });
-  if (ext2 === "ts" || ext2 === "mts")
-    return /* @__PURE__ */ jsx176(FileTs, { size: SZ, weight: W, color: "#3178C6", className: c });
-  if (ext2 === "tsx") return /* @__PURE__ */ jsx176(FileTsx, { size: SZ, weight: W, color: "#3178C6", className: c });
-  if (ext2 === "json") return /* @__PURE__ */ jsx176(FileCode, { size: SZ, weight: W, color: "#4ADE80", className: c });
-  if (ext2 === "svg") return /* @__PURE__ */ jsx176(FileSvg, { size: SZ, weight: W, color: "#F97316", className: c });
-  if (ext2 === "md" || ext2 === "mdx")
-    return /* @__PURE__ */ jsx176(FileMd, { size: SZ, weight: W, color: "#9CA3AF", className: c });
-  if (ext2 === "txt") return /* @__PURE__ */ jsx176(FileTxt, { size: SZ, weight: W, color: "#9CA3AF", className: c });
-  if (ext2 === "png") return /* @__PURE__ */ jsx176(FilePng, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "jpg" || ext2 === "jpeg")
-    return /* @__PURE__ */ jsx176(FileJpg, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "webp" || ext2 === "gif" || ext2 === "ico")
-    return /* @__PURE__ */ jsx176(PhImage, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "mp4" || ext2 === "webm" || ext2 === "mov")
-    return /* @__PURE__ */ jsx176(FileVideo, { size: SZ, weight: W, color: "#A855F7", className: c });
-  if (ext2 === "mp3" || ext2 === "wav" || ext2 === "ogg" || ext2 === "m4a")
-    return /* @__PURE__ */ jsx176(Waveform, { size: SZ, weight: W, color: "#3CE6AC", className: c });
-  if (ext2 === "woff" || ext2 === "woff2" || ext2 === "ttf" || ext2 === "otf")
-    return /* @__PURE__ */ jsx176(TextAa, { size: SZ, weight: W, color: "#6B7280", className: c });
-  return /* @__PURE__ */ jsx176(File2, { size: SZ, weight: W, color: "#6B7280", className: c });
+  const [Glyph, color] = ICONS.get(ALIAS.get(ext2) ?? ext2) ?? [File2, DIM];
+  return /* @__PURE__ */ jsx176(Glyph, { size: SZ, weight: W, className: `shrink-0 ${color}` });
 }
 function buildTree(files) {
   const root = { name: "", fullPath: "", children: /* @__PURE__ */ new Map(), isFile: false };
@@ -65729,7 +65994,7 @@ function ContextMenu2({
           "button",
           {
             role: "menuitem",
-            className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-hidden cursor-pointer text-left",
+            className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 active:bg-danger/25 outline-hidden cursor-pointer text-left",
             onClick: () => {
               onDelete(state.targetPath);
               onClose();
@@ -65806,7 +66071,7 @@ function InlineInput({
       className: "flex items-center gap-2 py-0.5 min-h-7",
       style: { paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` },
       children: [
-        isFolder ? /* @__PURE__ */ jsx177(FolderSimple, { size: SZ_ICON, weight: "duotone", color: "#6B7280", className: "shrink-0" }) : /* @__PURE__ */ jsx177(FileIcon, { path: value }),
+        isFolder ? /* @__PURE__ */ jsx177(FolderSimple, { size: SZ_ICON, weight: "duotone", className: `shrink-0 ${DIM}` }) : /* @__PURE__ */ jsx177(FileIcon, { path: value }),
         /* @__PURE__ */ jsxs137("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx177(
             "input",
@@ -65820,11 +66085,11 @@ function InlineInput({
               onKeyDown: handleKeyDown,
               onBlur: handleBlur,
               "aria-invalid": error ? true : void 0,
-              className: `w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"}`,
+              className: `w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${error ? "border-danger-ink" : "border-neutral-600 focus:border-accent-ink"}`,
               spellCheck: false
             }
           ),
-          error && /* @__PURE__ */ jsx177("div", { className: "mt-0.5 text-[10px] text-red-400", role: "alert", children: error })
+          error && /* @__PURE__ */ jsx177("div", { className: "mt-0.5 text-[10px] text-danger-ink", role: "alert", children: error })
         ] })
       ]
     }
@@ -65871,7 +66136,7 @@ function DeleteConfirm({
             "button",
             {
               onClick: onCancel,
-              className: "flex-1 px-2 py-1 rounded-sm bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors",
+              className: "flex-1 px-2 py-1 rounded-sm bg-hover text-neutral-300 hover:bg-press transition-colors",
               children: "Cancel"
             }
           ),
@@ -65879,7 +66144,7 @@ function DeleteConfirm({
             "button",
             {
               onClick: onConfirm,
-              className: "flex-1 px-2 py-1 rounded-sm bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors",
+              className: "flex-1 px-2 py-1 rounded-sm bg-danger/15 text-danger-ink hover:bg-danger/25 transition-colors",
               children: "Delete"
             }
           )
@@ -65934,7 +66199,7 @@ var TreeFile = memo37(function TreeFile2({
         lintInfo && lintInfo.count > 0 && /* @__PURE__ */ jsx177(
           "span",
           {
-            className: "shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1",
+            className: "shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink text-center mr-1",
             title: lintInfo.messages.join("\n"),
             children: lintInfo.count
           }
@@ -66002,7 +66267,7 @@ var TreeFolder = memo37(function TreeFolder2({
           onDrop(e, node.fullPath);
         },
         onDragLeave,
-        className: `w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${isDragOver ? "bg-[#3CE6AC]/10 outline-solid outline-1 outline-[#3CE6AC]/40" : ""}`,
+        className: `w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${isDragOver ? "bg-accent/10 outline-solid outline-1 outline-accent-ink -outline-offset-1" : ""}`,
         style: { paddingLeft: `${8 + depth * 12}px` },
         children: [
           /* @__PURE__ */ jsx177(Chevron, { size: 10, className: "shrink-0 text-neutral-600" }),
@@ -66258,7 +66523,7 @@ var FileTree = memo38(function FileTree2({
     /* @__PURE__ */ jsxs138(
       "div",
       {
-        className: `flex-1 overflow-y-auto py-1 transition-colors ${dragOverFolder === "" ? "bg-[#3CE6AC]/5 outline-solid outline-1 outline-[#3CE6AC]/30 -outline-offset-1" : ""}`,
+        className: `flex-1 overflow-y-auto py-1 transition-colors ${dragOverFolder === "" ? "bg-accent/5 outline-solid outline-1 outline-accent-ink -outline-offset-1" : ""}`,
         onContextMenu: handleRootContextMenu,
         onDragOver: (e) => {
           e.preventDefault();
@@ -66359,7 +66624,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState149, useCallback as useCallback186, useRef as useRef181, useMemo as useMemo82, useLayoutEffect as useLayoutEffect13 } from "react";
+import { useState as useState149, useCallback as useCallback186, useRef as useRef181, useMemo as useMemo83, useLayoutEffect as useLayoutEffect14 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback92, useEffect as useEffect99, useRef as useRef115 } from "react";
@@ -67093,7 +67358,7 @@ ${pathLine}${lines.join("\n\n")}`;
           children: [
             /* @__PURE__ */ jsxs139("div", { className: "flex items-center justify-between px-5 py-4 border-b border-neutral-800", children: [
               /* @__PURE__ */ jsxs139("div", { className: "flex items-center gap-3", children: [
-                hasIssues ? /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(WarningIcon, { size: 18, className: "text-red-400", weight: "fill" }) }) : /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(CheckCircleIcon, { size: 18, className: "text-studio-accent", weight: "fill" }) }),
+                hasIssues ? /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(WarningIcon, { size: 18, className: "text-danger-ink", weight: "fill" }) }) : /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(CheckCircleIcon, { size: 18, className: "text-accent-ink", weight: "fill" }) }),
                 /* @__PURE__ */ jsxs139("div", { children: [
                   /* @__PURE__ */ jsx179("h2", { className: "text-sm font-semibold text-neutral-200", children: hasIssues ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : "All checks passed" }),
                   /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-500", children: title })
@@ -67113,34 +67378,14 @@ ${pathLine}${lines.join("\n\n")}`;
               "button",
               {
                 onClick: handleCopyToAgent,
-                className: `px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${copied ? "bg-green-600 text-white" : copyFailed ? "bg-red-600 text-white" : "bg-studio-accent hover:bg-studio-accent/80 text-white"}`,
+                className: `px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${copied ? "bg-accent text-on-accent" : copyFailed ? "bg-danger text-on-danger" : "bg-accent hover:bg-accent-hover text-on-accent"}`,
                 children: copied ? "Copied!" : copyFailed ? "Copy failed \u2014 check permissions" : "Copy to Agent"
               }
             ) }),
             /* @__PURE__ */ jsxs139("div", { className: "flex-1 overflow-y-auto px-5 py-3", children: [
               !hasIssues && /* @__PURE__ */ jsx179("div", { className: "py-8 text-center text-neutral-500 text-sm", children: "No errors or warnings found. Your composition looks good!" }),
-              errors.map((f, i) => /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-neutral-800/50 last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx179(WarningIcon, { size: 14, className: "text-red-400 shrink-0 mt-0.5", weight: "fill" }),
-                /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx179("p", { className: "text-sm text-neutral-200", children: f.message }),
-                  f.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-600 font-mono mt-0.5", children: f.file }),
-                  f.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
-                    /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-studio-accent shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ jsx179("p", { className: "text-xs text-studio-accent", children: f.fixHint })
-                  ] })
-                ] })
-              ] }) }, `e-${i}`)),
-              warnings.map((f, i) => /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-neutral-800/50 last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx179(WarningIcon, { size: 14, className: "text-amber-400 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx179("p", { className: "text-sm text-neutral-300", children: f.message }),
-                  f.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-600 font-mono mt-0.5", children: f.file }),
-                  f.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
-                    /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-studio-accent shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ jsx179("p", { className: "text-xs text-studio-accent", children: f.fixHint })
-                  ] })
-                ] })
-              ] }) }, `w-${i}`))
+              errors.map((f, i) => /* @__PURE__ */ jsx179(LintFindingRow, { finding: f, tone: "error" }, `e-${i}`)),
+              warnings.map((f, i) => /* @__PURE__ */ jsx179(LintFindingRow, { finding: f, tone: "warning" }, `w-${i}`))
             ] })
           ]
         }
@@ -67148,6 +67393,26 @@ ${pathLine}${lines.join("\n\n")}`;
     }
   );
 }
+function LintFindingRow({ finding, tone }) {
+  return /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-border last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx179(
+      WarningIcon,
+      {
+        size: 14,
+        className: `${tone === "error" ? "text-danger-ink" : "text-warning-ink"} shrink-0 mt-0.5`,
+        weight: tone === "error" ? "fill" : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx179("p", { className: `text-sm ${tone === "error" ? "text-text-0" : "text-text-2"}`, children: finding.message }),
+      finding.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-text-muted font-mono mt-0.5", children: finding.file }),
+      finding.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
+        /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-accent-ink shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx179("p", { className: "text-xs text-accent-ink", children: finding.fixHint })
+      ] })
+    ] })
+  ] }) });
+}
 
 // src/components/AskAgentModal.tsx
 import { useState as useState100, useRef as useRef120 } from "react";
@@ -67267,7 +67532,7 @@ function AskAgentModal({
               /* @__PURE__ */ jsx180(
                 "button",
                 {
-                  className: "px-4 py-1.5 rounded-lg bg-studio-accent/90 text-xs font-medium text-neutral-950 hover:bg-studio-accent disabled:opacity-40 disabled:cursor-not-allowed",
+                  className: "px-4 py-1.5 rounded-lg bg-accent text-xs font-medium text-on-accent hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed",
                   disabled: !value.trim(),
                   onClick: handleSubmit,
                   children: "Copy prompt"
@@ -67293,23 +67558,12 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
       children: /* @__PURE__ */ jsxs141(
         "div",
         {
-          className: "relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px]",
-          style: {
-            background: isError ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))" : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
-            backdropFilter: "blur(16px) saturate(1.6)",
-            WebkitBackdropFilter: "blur(16px) saturate(1.6)",
-            border: `1px solid ${isError ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
-            boxShadow: [
-              "0 8px 32px rgba(0,0,0,0.35)",
-              `inset 0 1px 0 ${isError ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-              `inset 0 -1px 0 rgba(0,0,0,0.15)`
-            ].join(", ")
-          },
+          className: `relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px] ${toastSurface(isError)}`,
           children: [
             /* @__PURE__ */ jsx181(
               "span",
               {
-                className: `min-w-0 wrap-break-word leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`,
+                className: `min-w-0 wrap-break-word leading-5 ${isError ? "text-danger-ink" : "text-text-0"}`,
                 children: message
               }
             ),
@@ -67318,7 +67572,7 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
               {
                 type: "button",
                 onClick: onDismiss,
-                className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300",
+                className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-hover hover:text-neutral-300",
                 "aria-label": "Dismiss",
                 children: /* @__PURE__ */ jsx181(
                   "svg",
@@ -67340,6 +67594,9 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
     }
   );
 }
+function toastSurface(isError) {
+  return `border shadow-popover backdrop-blur-md ${isError ? "border-danger/40 bg-raised" : "border-border bg-raised/95"}`;
+}
 
 // src/components/feedback/StudioFeedbackCard.tsx
 import { memo as memo39, useState as useState101, useCallback as useCallback96, useRef as useRef121, useEffect as useEffect103 } from "react";
@@ -67529,24 +67786,13 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
       children: /* @__PURE__ */ jsxs142(
         "div",
         {
-          className: "flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3",
-          style: {
-            background: failed2 ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))" : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
-            backdropFilter: "blur(16px) saturate(1.6)",
-            WebkitBackdropFilter: "blur(16px) saturate(1.6)",
-            border: `1px solid ${failed2 ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
-            boxShadow: [
-              "0 8px 32px rgba(0,0,0,0.35)",
-              `inset 0 1px 0 ${failed2 ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-              "inset 0 -1px 0 rgba(0,0,0,0.15)"
-            ].join(", ")
-          },
+          className: `flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3 ${toastSurface(failed2)}`,
           children: [
             /* @__PURE__ */ jsxs142("div", { className: "flex items-start gap-3", children: [
               /* @__PURE__ */ jsx182(
                 "p",
                 {
-                  className: `min-w-0 flex-1 text-[12px] leading-5 ${failed2 ? "text-red-100" : "text-neutral-100"}`,
+                  className: `min-w-0 flex-1 text-[12px] leading-5 ${failed2 ? "text-danger-ink" : "text-text-0"}`,
                   children: step === "thanks" ? "Thanks, that helps." : title
                 }
               ),
@@ -67561,7 +67807,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                     if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                     close("sent");
                   },
-                  className: "h-6 shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/8 px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none",
+                  className: "h-6 shrink-0 whitespace-nowrap rounded-full border border-border-strong bg-hover px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-text-muted hover:bg-press active:scale-[0.97] motion-reduce:transition-none",
                   children: "Talk to us, 30 min"
                 }
               ),
@@ -67570,7 +67816,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                 {
                   type: "button",
                   onClick: () => close("close"),
-                  className: "-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200",
+                  className: "-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-press hover:text-neutral-200",
                   "aria-label": "Dismiss",
                   children: /* @__PURE__ */ jsx182(
                     "svg",
@@ -67587,14 +67833,14 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                 }
               )
             ] }),
-            failed2 && request.detail && step !== "thanks" && /* @__PURE__ */ jsx182("p", { className: "line-clamp-2 text-[11px] leading-4 text-red-200/70", children: request.detail }),
+            failed2 && request.detail && step !== "thanks" && /* @__PURE__ */ jsx182("p", { className: "line-clamp-2 text-[11px] leading-4 text-danger-ink", children: request.detail }),
             step === "rating" && /* @__PURE__ */ jsxs142(Fragment49, { children: [
               /* @__PURE__ */ jsxs142("fieldset", { className: "grid grid-cols-11 gap-[3px]", children: [
                 /* @__PURE__ */ jsx182("legend", { className: "sr-only", children: "Rate this export from 0 to 10" }),
                 RATINGS.map((n) => /* @__PURE__ */ jsxs142(
                   "label",
                   {
-                    className: "flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/4 text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-checked:bg-white/90 has-checked:text-neutral-900 has-focus-visible:ring-1 has-focus-visible:ring-white/50 motion-reduce:transition-none",
+                    className: "flex h-7 cursor-pointer items-center justify-center rounded-md bg-hover text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-press hover:text-neutral-100 active:scale-[0.97] has-checked:bg-text-0 has-checked:text-bg-0 has-focus-visible:ring-1 has-focus-visible:ring-ring motion-reduce:transition-none",
                     children: [
                       /* @__PURE__ */ jsx182(
                         "input",
@@ -67629,7 +67875,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                   onFocus: () => setHint(preset.hint),
                   onBlur: () => setHint(null),
                   "aria-label": `${preset.label}. ${preset.hint}`,
-                  className: `h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${failed2 ? "border-red-300/20 bg-red-100/6 text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white" : "border-white/10 bg-white/4 text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"}`,
+                  className: `h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${failed2 ? "border-danger/30 bg-danger/10 text-danger-ink hover:border-danger/60 hover:bg-danger/20" : "border-border bg-hover text-neutral-300 hover:border-text-muted hover:bg-press hover:text-text-0"}`,
                   children: preset.label
                 },
                 preset.label
@@ -67649,7 +67895,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                     placeholder: followUp.placeholder,
                     "aria-label": followUp.prompt,
                     maxLength: 500,
-                    className: "h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                    className: "h-7 min-w-0 flex-1 rounded-md border border-border bg-input px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-ring"
                   }
                 ),
                 /* @__PURE__ */ jsx182(
@@ -67657,7 +67903,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                   {
                     type: "button",
                     onClick: () => submit(),
-                    className: "h-7 shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none",
+                    className: "h-7 shrink-0 rounded-md bg-press px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-on active:scale-[0.97] motion-reduce:transition-none",
                     children: "Send"
                   }
                 )
@@ -74448,37 +74694,48 @@ function applyElementPositionOffset(el, gestureOffset) {
 }
 
 // src/hooks/elementOffsetStager.ts
+var GSAP_TOOK_OVER = "The animation took over this layer's position during the move, so it was not saved.";
 var ELEMENT_OFFSET_REFUSED = {
   anchored: "This layer is anchored from its right or bottom edge. Move it in the Code tab.",
   percent: "This layer's position is set in percent. Move it in the Code tab."
 };
+function gsapOf(el) {
+  return el.ownerDocument.defaultView?.gsap;
+}
 function settleGsapDraftAtGestureStart(el) {
-  const gsap3 = el.ownerDocument.defaultView?.gsap;
+  const gsap3 = gsapOf(el);
   const x = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "");
   const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
   if (gsap3 && Number.isFinite(x) && Number.isFinite(y)) gsap3.set(el, { x, y });
 }
+function refuseGsapTakeover(el, showToast) {
+  if (!gsapHoldsTranslate(el)) return;
+  gsapOf(el)?.set(el, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+  showToast(GSAP_TOOK_OVER, "error");
+  throw markStudioSaveErrorAlreadyToasted(new Error(GSAP_TOOK_OVER));
+}
 var plainMoveCounter = 0;
 function stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey) {
-  const style = selection.element.style;
-  const before = style.getPropertyValue("translate");
-  const patch = translatePatch(next);
-  style.setProperty("translate", patch.value);
+  const el = selection.element;
+  const before = captureStudioPathOffset(el);
+  const patches = writePlainMove(el, next);
+  const written = el.style.getPropertyValue("translate");
   const rollback = () => {
-    if (style.getPropertyValue("translate") === patch.value) style.setProperty("translate", before);
+    if (el.style.getPropertyValue("translate") === written) restoreStudioPathOffset(el, before);
   };
   const key2 = coalesceKey ?? `move:${++plainMoveCounter}`;
   const options = { label: "Move layer", coalesceKey: key2, coalesceMs: Number.POSITIVE_INFINITY };
-  const save = () => commitPositionPatchToHtml(selection, [patch], options).catch((error) => {
+  const save = () => commitPositionPatchToHtml(selection, patches, options).catch((error) => {
     rollback();
     throw error;
   });
   return { save, rollback };
 }
-function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPreview }, selection, next, coalesceKey) {
+function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPreview }, selection, next, plainTranslate, coalesceKey) {
   const el = selection.element;
   if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => void 0 };
-  if (!gsapWritesPosition(el)) {
+  if (plainTranslate) {
+    refuseGsapTakeover(el, showToast);
     return stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey);
   }
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
@@ -74504,293 +74761,73 @@ function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPrev
   return { save, rollback };
 }
 
-// src/components/editor/manualEditsDomPatches.ts
-function collectInlineStyleOps(element, properties, ops) {
-  for (const prop of properties) {
-    const val = element.style.getPropertyValue(prop);
-    if (val) ops.push({ type: "inline-style", property: prop, value: val });
-  }
-}
-function collectAttributeOps(element, attrNames, ops) {
-  for (const attr of attrNames) {
-    const val = element.getAttribute(attr);
-    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
-  }
-}
-function appendTransformDisplayOps(element, ops) {
-  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
-  if (val !== null) {
-    ops.push({ type: "inline-style", property: "display", value: val || null });
-    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
-  }
-}
-function buildPathOffsetPatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
-  const inlineTranslate = element.style.getPropertyValue("translate");
-  const hasOffsetVars = element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) || element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-  const translateValue = inlineTranslate && inlineTranslate !== "none" ? inlineTranslate : hasOffsetVars ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)` : null;
-  if (translateValue) {
-    ops.push({ type: "inline-style", property: "translate", value: translateValue });
-  }
-  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
-    ops
-  );
-  collectInlineStyleOps(element, ["display"], ops);
-  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
-  return ops;
-}
-function buildClearPathOffsetPatches(element) {
-  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
-  const ops = [
-    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
-    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
-    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
-    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
-}
-var BOX_SIZE_STYLE_PROPS = [
-  "width",
-  "height",
-  "min-width",
-  "min-height",
-  "max-width",
-  "max-height",
-  "flex-basis",
-  "flex-grow",
-  "flex-shrink",
-  "box-sizing",
-  "scale",
-  "transform-origin",
-  "display"
-];
-var BOX_SIZE_ORIG_ATTRS = [
-  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
-  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
-  // Records a measurement rather than a style, so it restores nothing.
-  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
-  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
-  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
-  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
-  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
-  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
-  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
-  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
-  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
-  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
-  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
-  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
-  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
-  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
-];
-function buildBoxSizePatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
-  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
-    ops
-  );
-  return ops;
-}
-function buildClearBoxSizePatches(element) {
-  const ops = [
-    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
-    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
-    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
-  ];
-  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
-    const origVal = element.getAttribute(attrName);
-    if (origVal !== null && styleProp) {
-      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
-    }
-    ops.push({ type: "attribute", property: attrName, value: null });
-  }
-  return ops;
-}
-var ROTATION_STYLE_PROPS = [
-  STUDIO_ROTATION_PROP,
-  "rotate",
-  "transform-origin",
-  "display"
-];
-var ROTATION_ORIG_ATTRS = [
-  STUDIO_ORIGINAL_ROTATE_ATTR,
-  STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
-  STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR
-];
-function buildRotationPatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, ROTATION_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" });
-  collectAttributeOps(element, ROTATION_ORIG_ATTRS, ops);
-  return ops;
-}
-function buildClearRotationPatches(element) {
-  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
-  const origRotationTransformOrigin = element.getAttribute(
-    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
-  );
-  const ops = [
-    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
-    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
-    {
-      type: "inline-style",
-      property: "transform-origin",
-      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
-    },
-    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
-}
-
-// src/hooks/gsapTargetCache.ts
-var _gsapCachedTimelines;
-var _gsapTargetIds;
-var _gsapTargetNodes;
-function addTargetsFromTimeline(tl, ids, nodes) {
-  const children = tl.getChildren?.(true);
-  if (!children) return;
-  for (const child of children) {
-    const targets = child.targets?.();
-    if (!targets) continue;
-    for (const t of targets) {
-      nodes.add(t);
-      if (t.id) ids.add(t.id);
-    }
-  }
-}
-function collectGsapTargets(timelines) {
-  const ids = /* @__PURE__ */ new Set();
-  const nodes = /* @__PURE__ */ new WeakSet();
-  for (const tl of Object.values(timelines)) {
-    if (!tl) continue;
-    try {
-      addTargetsFromTimeline(tl, ids, nodes);
-    } catch {
+// src/hooks/plainRotation.ts
+var plainRotateCounter = 0;
+function savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next) {
+  if (readOnlyPreview) return Promise.resolve();
+  const { element } = selection;
+  const before = captureStudioRotation(element);
+  const patches = element.hasAttribute(STUDIO_ROTATION_ATTR) ? buildClearRotationPatches(element) : [];
+  if (patches.length) clearStudioRotation(element);
+  const drawn = applyCssRotation(element, next.angle, patches.length ? void 0 : next.plain);
+  patches.push(...drawn);
+  const turn = drawn.at(-1);
+  return commitPositionPatchToHtml(selection, patches, {
+    label: "Rotate layer",
+    coalesceKey: `rotate:${++plainRotateCounter}`,
+    coalesceMs: Number.POSITIVE_INFINITY
+  }).catch((error) => {
+    if (element.style.getPropertyValue(turn.property) === turn.value) {
+      restorePlainRotation(element, before);
     }
-  }
-  return { ids, nodes };
-}
-function readTimelines(iframe) {
-  if (!iframe?.contentWindow) return void 0;
-  try {
-    return iframe.contentWindow.__timelines;
-  } catch {
-    return void 0;
-  }
-}
-function isElementGsapTargeted(iframe, element) {
-  const timelines = readTimelines(iframe);
-  if (!timelines) return false;
-  if (timelines !== _gsapCachedTimelines) {
-    const cache2 = collectGsapTargets(timelines);
-    _gsapTargetIds = cache2.ids;
-    _gsapTargetNodes = cache2.nodes;
-    _gsapCachedTimelines = timelines;
-  }
-  return _gsapTargetNodes.has(element) || !!(element.id && _gsapTargetIds.has(element.id));
+    throw error;
+  });
 }
 
 // src/hooks/useDomGeometryCommits.ts
-var GSAP_CSS_FALLBACK_BLOCKED_MESSAGE = "This element is GSAP-animated \u2014 dragging via CSS would corrupt keyframes";
-function rejectGsapCssFallback(selection, previewIframeRef, showToast) {
-  if (!isElementGsapTargeted(previewIframeRef.current, selection.element)) return null;
-  const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-  showToast(error.message, "error");
-  return Promise.reject(error);
-}
 function useDomGeometryCommits({
-  previewIframeRef,
   showToast,
   commitPositionPatchToHtml,
   readOnlyPreview
 }) {
   const stageElementPositionOffset = useCallback125(
-    (selection, next, coalesceKey) => stageElementOffset(
+    (selection, next, plainTranslate, coalesceKey) => stageElementOffset(
       { commitPositionPatchToHtml, showToast, readOnlyPreview },
       selection,
       next,
+      plainTranslate,
       coalesceKey
     ),
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
   );
-  const handleDomPathOffsetCommit = useCallback125(
-    (selection, next) => {
-      if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const before = captureStudioPathOffset(selection.element);
-      applyStudioPathOffset(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
-        label: "Move layer",
-        coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`
-      }).catch((error) => {
-        restoreStudioPathOffset(selection.element, before);
-        throw error;
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
-  );
   const handleDomBoxSizeCommit = useCallback125(
-    (selection, next, offset) => {
+    (selection, next, offset, restore) => {
       if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const beforeSize = captureStudioBoxSize(selection.element);
-      const beforeOffset = offset ? captureStudioPathOffset(selection.element) : null;
-      const stageCrop = prepareCropResize(selection.element);
-      applyStudioBoxSize(selection.element, next);
+      const element = selection.element;
+      const beforeSize = captureStudioBoxSize(element);
+      const beforeOffset = captureStudioPathOffset(element);
+      const stageCrop = prepareCropResize(element);
+      applyStudioBoxSize(element, next);
       const crop = stageCrop();
-      const patches = buildBoxSizePatches(selection.element);
+      const patches = buildBoxSizePatches(element);
       if (crop) patches.push(crop.patch);
-      if (offset) {
-        applyStudioPathOffset(selection.element, offset);
-        patches.push(...buildPathOffsetPatches(selection.element));
-      }
+      if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`
       }).catch((error) => {
-        restoreStudioBoxSize(selection.element, beforeSize);
-        if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        restoreStudioBoxSize(element, beforeSize);
+        if (offset) restoreStudioPathOffset(element, beforeOffset);
         crop?.revert();
+        restore?.();
         throw error;
       });
     },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
+    [commitPositionPatchToHtml, readOnlyPreview]
   );
   const handleDomRotationCommit = useCallback125(
-    (selection, next) => {
-      if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const before = captureStudioRotation(selection.element);
-      applyStudioRotation(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
-        label: "Rotate layer",
-        coalesceKey: `rotation:${getDomEditTargetKey(selection)}`
-      }).catch((error) => {
-        restoreStudioRotation(selection.element, before);
-        throw error;
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
+    (selection, next) => savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next),
+    [commitPositionPatchToHtml, readOnlyPreview]
   );
   const handleDomManualEditsReset = useCallback125(
     (selection) => {
@@ -74821,7 +74858,6 @@ function useDomGeometryCommits({
   );
   return {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset
@@ -75000,12 +75036,10 @@ function useDomEditCommits({
   });
   const {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset
   } = useDomGeometryCommits({
-    previewIframeRef,
     showToast,
     commitPositionPatchToHtml,
     readOnlyPreview
@@ -75041,7 +75075,6 @@ function useDomEditCommits({
     handleDomRemoveTextField,
     stageElementPositionOffset,
     commitPositionPatchToHtml,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
@@ -77239,6 +77272,23 @@ function useDomEditWiring(params) {
 // src/hooks/useGsapAwareEditing.ts
 import { useCallback as useCallback139 } from "react";
 
+// src/utils/elementGsap.ts
+function gsapOf2(element) {
+  return element.ownerDocument.defaultView?.gsap;
+}
+function setElementGsapPosition(element, x, y) {
+  const gsap3 = gsapOf2(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { x, y });
+  return true;
+}
+function setElementGsapScale(element, x, y) {
+  const gsap3 = gsapOf2(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
+
 // src/hooks/gsapResizePreflight.ts
 function resizeRoute(animations, fetchedAnimations) {
   const allKnownAnimations = [...animations, ...fetchedAnimations];
@@ -77943,6 +77993,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  handleDomRotationCommit,
   commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
@@ -77958,8 +78009,8 @@ function useGsapAwareEditing({
   );
   const handleGsapAwarePathOffsetCommit = useCallback139(
     async (selection, next, modifiers) => {
-      if (!gsapWritesPosition(selection.element))
-        return stageElementPositionOffset(selection, next).save();
+      if (modifiers?.plainTranslate ?? !gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next, true).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -77973,7 +78024,7 @@ function useGsapAwareEditing({
             makeFetchFallback(selection),
             modifiers
           );
-          await saveMove(outcome, () => stageElementPositionOffset(selection, next).save());
+          await saveMove(outcome, () => stageElementPositionOffset(selection, next, false).save());
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
@@ -78022,10 +78073,13 @@ function useGsapAwareEditing({
         return Promise.resolve();
       };
       const preflightAnimations = /* @__PURE__ */ new Map();
-      const offsetMembers = /* @__PURE__ */ new Set();
+      const offsetMembers = /* @__PURE__ */ new Map();
       const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection }) => {
-          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
+        updates.map(async ({ selection, plainTranslate }) => {
+          if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
+            refuseGsapTakeover(selection.element, showToast);
+            return void offsetMembers.set(selection, true);
+          }
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -78037,7 +78091,7 @@ function useGsapAwareEditing({
             void 0,
             { preflightOnly: true, group: true }
           );
-          if (outcome.status === "element-offset") offsetMembers.add(selection);
+          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
           assertGsapEditPersisted(outcome);
         })
       );
@@ -78056,8 +78110,9 @@ function useGsapAwareEditing({
       );
       for (const [index, { selection, next }] of updates.entries()) {
         renderOnCommit = index === lastScriptWrite;
-        if (offsetMembers.has(selection)) {
-          await stageElementPositionOffset(selection, next, coalesceKey).save();
+        const plain = offsetMembers.get(selection);
+        if (plain !== void 0) {
+          await stageElementPositionOffset(selection, next, plain, coalesceKey).save();
           continue;
         }
         try {
@@ -78094,11 +78149,14 @@ function useGsapAwareEditing({
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
-      stageElementPositionOffset
+      stageElementPositionOffset,
+      showToast
     ]
   );
   const handleGsapAwareBoxSizeCommit = useCallback139(
     async (selection, next, offset, restore = () => void 0) => {
+      if (!gsapWritesBox(selection.element))
+        return handleDomBoxSizeCommit(selection, next, offset, restore);
       let targetAnimations;
       try {
         const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -78169,7 +78227,8 @@ function useGsapAwareEditing({
                   makeFetchFallback(selection)
                 );
                 await saveMove(dragOutcome, async () => {
-                  anchorMove = stageElementPositionOffset(selection, offset, coalesceKey);
+                  const plain = !gsapWritesPosition(selection.element);
+                  anchorMove = stageElementPositionOffset(selection, offset, plain, coalesceKey);
                 });
               }
               logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
@@ -78179,13 +78238,7 @@ function useGsapAwareEditing({
               throw error;
             }
           }
-          logResize("dom-route", {
-            next,
-            offset: offset ?? null,
-            hadGsapMutation: !!gsapCommitMutation
-          });
-          logResizeSettle(selection.element, "dom-route");
-          await handleDomBoxSizeCommit(selection, next, offset);
+          throw new Error("Resize of a GSAP-owned box has no GSAP writer");
         },
         afterBufferedCommitsSaved: async () => {
           await anchorMove?.save();
@@ -78213,10 +78266,11 @@ function useGsapAwareEditing({
   );
   const handleGsapAwareRotationCommit = useCallback139(
     async (selection, next) => {
+      if (next.plain || !gsapWritesRotation(selection.element))
+        return handleDomRotationCommit(selection, next);
       if (gsapCommitMutation) {
         try {
-          const ownedAnimations = getGsapAnimationsForSelection(selection);
-          const targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
+          const targetAnimations = await getGsapAnimationsForSelection(selection);
           const outcome = await tryGsapRotationIntercept(
             selection,
             next.angle,
@@ -78237,7 +78291,8 @@ function useGsapAwareEditing({
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
-      getGsapAnimationsForSelection
+      getGsapAnimationsForSelection,
+      handleDomRotationCommit
     ]
   );
   const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
@@ -78779,6 +78834,7 @@ function useDomEditSession({
     stageElementPositionOffset,
     commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
@@ -79008,6 +79064,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
@@ -80896,10 +80953,16 @@ function remintHfIds(html2, parser, taken) {
 }
 var HF_ID_ATTR_RE = /\bdata-hf-id\s*=\s*["']?([^"'\s>]+)/gi;
 var hfIdsInFile = (content) => new Set(Array.from(content.matchAll(HF_ID_ATTR_RE), (match) => match[1]));
-function pasteElementHtml(content, payload) {
+function pasteElementHtml(content, payload, fromThisFile = false) {
   const reminted = remintHfIds(payload.html, new DOMParser(), hfIdsInFile(content));
   const deduped = deduplicateIds(reminted, collectHtmlIds(content));
-  return insertAsSibling(content, deduped, payload.originSelector, payload.originSelectorIndex);
+  const result = insertAsSibling(
+    content,
+    deduped,
+    payload.originSelector,
+    payload.originSelectorIndex
+  );
+  return fromThisFile ? carryLook(result, renamedIds(reminted, deduped), 0) : result;
 }
 function pasteTimelineClips(content, clips, anchorTime, liveElements, fromThisFile = false) {
   const groupMinStart = Math.min(...clips.map((c) => c.start));
@@ -81028,6 +81091,7 @@ function useClipboard({
           kind: "dom-element",
           html: savedMarkupElseLive(parseSavedSource(content), live, sourceFile),
           sourceFile,
+          projectId: projectIdRef.current ?? void 0,
           originSelector: domSelection.selector,
           originSelectorIndex: domSelection.selectorIndex
         };
@@ -81069,15 +81133,17 @@ function useClipboard({
     const targetPath = activeCompPath || "index.html";
     try {
       let pastedIds = [];
+      const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
       const paste = (originalContent) => {
-        if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
+        if (payload.kind !== "timeline-clip")
+          return pasteElementHtml(originalContent, payload, fromThisFile);
         const { currentTime, elements } = usePlayerStore.getState();
         const pasted = pasteTimelineClips(
           originalContent,
           payload.clips,
           currentTime,
           elements,
-          payload.sourceFile === targetPath && payload.projectId === pid
+          fromThisFile
         );
         pastedIds = pasted.ids;
         return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
@@ -82462,7 +82528,7 @@ function StudioHeader({
             "aria-pressed": inspectorButtonActive,
             className: cn(
               "h-full rounded-none",
-              inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent"
+              inspectorButtonActive && "bg-on text-accent-ink enabled:hover:bg-on-hover enabled:hover:text-accent-ink"
             ),
             icon: /* @__PURE__ */ jsx190(InspectorIcon, { size: 16 }),
             onClick: () => {
@@ -83752,7 +83818,7 @@ function ContextMenu3({
                 {
                   role: "menuitem",
                   onClick: () => setMode("confirm-delete"),
-                  className: `${itemCls} text-red-400`,
+                  className: `${itemCls} text-danger-ink`,
                   children: "Delete"
                 }
               )
@@ -83786,10 +83852,10 @@ function ContextMenu3({
                     }
                   },
                   "aria-label": `Rename ${filename(asset)}`,
-                  className: "w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
+                  className: "w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
                 }
               ),
-              renameError && /* @__PURE__ */ jsx194("span", { className: "text-[10px] text-red-400", children: renameError }),
+              renameError && /* @__PURE__ */ jsx194("span", { className: "text-[10px] text-danger-ink", children: renameError }),
               /* @__PURE__ */ jsxs153("div", { className: "flex items-center justify-end gap-1", children: [
                 /* @__PURE__ */ jsx194(
                   "button",
@@ -83803,7 +83869,7 @@ function ContextMenu3({
                   "button",
                   {
                     onClick: commitRename,
-                    className: "px-2 py-0.5 text-[10px] rounded-sm bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors",
+                    className: "px-2 py-0.5 text-[10px] rounded-sm bg-accent hover:bg-accent-hover text-on-accent transition-colors",
                     children: "Rename"
                   }
                 )
@@ -83820,8 +83886,8 @@ function DeleteConfirm2({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs153("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsxs153("span", { className: "text-[10px] text-red-400 truncate", children: [
+  return /* @__PURE__ */ jsxs153("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs153("span", { className: "text-[10px] text-danger-ink truncate", children: [
       "Delete ",
       name,
       "?"
@@ -83831,7 +83897,7 @@ function DeleteConfirm2({
         "button",
         {
           onClick: onConfirm,
-          className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors",
+          className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors",
           children: "Delete"
         }
       ),
@@ -84057,7 +84123,7 @@ function AudioRow({
             {
               "aria-label": playing ? `Pause preview of ${name}` : `Play preview of ${name}`,
               "aria-pressed": playing,
-              className: `w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${playing ? "bg-panel-accent/15 text-panel-accent" : "text-panel-text-5 group-hover:text-panel-text-3"}`,
+              className: `w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${playing ? "bg-panel-accent/15 text-accent-ink" : "text-panel-text-5 group-hover:text-panel-text-3"}`,
               onClick: (e) => {
                 e.stopPropagation();
                 togglePlay();
@@ -84081,12 +84147,12 @@ function AudioRow({
                 meta?.duration ? `${meta.duration}s \xB7 ` : "",
                 subtype
               ] }),
-              used && /* @__PURE__ */ jsx195("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
+              used && /* @__PURE__ */ jsx195("span", { className: "text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
               (isCopied || copyFailed) && /* @__PURE__ */ jsx195(
                 "span",
                 {
                   role: "status",
-                  className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${copyFailed ? "text-red-400 bg-red-500/10" : "text-panel-accent bg-panel-accent/10"}`,
+                  className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${copyFailed ? "text-danger-ink bg-red-500/10" : "text-accent-ink bg-panel-accent/10"}`,
                   children: copyFailed ? "Copy failed" : "Copied"
                 }
               )
@@ -84250,7 +84316,7 @@ function CopyChip({ feedback, asset }) {
     "span",
     {
       role: "status",
-      className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${feedback.ok ? "text-panel-accent bg-panel-accent/10" : "text-red-400 bg-red-500/10"}`,
+      className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${feedback.ok ? "text-accent-ink bg-panel-accent/10" : "text-danger-ink bg-red-500/10"}`,
       children: feedback.ok ? "Copied" : "Copy failed"
     }
   );
@@ -84479,7 +84545,7 @@ function FontRow({
         onContextMenu: (e) => openAssetContextMenu(e, setContextMenu),
         className: `px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${isCopied ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
         children: [
-          /* @__PURE__ */ jsx198("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-neutral-700", children: extension }) }),
+          /* @__PURE__ */ jsx198("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-text-muted", children: extension }) }),
           /* @__PURE__ */ jsxs156("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx198(
               "span",
@@ -84490,7 +84556,7 @@ function FontRow({
             ),
             /* @__PURE__ */ jsxs156("div", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsx198("span", { className: "text-[10px] text-neutral-600 truncate", children: extension }),
-              used && /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
+              used && /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
               /* @__PURE__ */ jsx198(CopyChip, { feedback: copyFeedback, asset })
             ] })
           ] })
@@ -84623,7 +84689,7 @@ function EmptyState({
         fill: "none",
         stroke: "currentColor",
         strokeWidth: "1.5",
-        className: "text-neutral-700",
+        className: "text-text-off",
         children: [
           /* @__PURE__ */ jsx199(
             "path",
@@ -84772,7 +84838,7 @@ var AssetsTab = memo41(function AssetsTab2({
             "button",
             {
               onClick: () => setViewMode(m),
-              className: `flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${viewMode === m ? "bg-panel-accent/15 text-panel-accent" : "text-panel-text-3 hover:text-panel-text-1"}`,
+              className: `flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${viewMode === m ? "bg-panel-accent/15 text-accent-ink" : "text-panel-text-3 hover:text-panel-text-1"}`,
               children: m === "local" ? "This project" : "All projects"
             },
             m
@@ -84812,7 +84878,7 @@ var AssetsTab = memo41(function AssetsTab2({
               {
                 onClick: () => setActiveFilter("all"),
                 "aria-pressed": activeFilter === "all",
-                className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === "all" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === "all" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                 children: [
                   "All ",
                   counts.all
@@ -84825,7 +84891,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 {
                   onClick: () => setActiveFilter(activeFilter === cat ? "all" : cat),
                   "aria-pressed": activeFilter === cat,
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === cat ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === cat ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     CATEGORY_LABELS[cat],
                     " ",
@@ -84841,7 +84907,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "used" ? "all" : "used"),
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "used" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "used" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     "In use ",
                     usageCounts.used
@@ -84852,7 +84918,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "unused" ? "all" : "unused"),
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "unused" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "unused" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     "Unused ",
                     usageCounts.unused
@@ -85026,7 +85092,7 @@ function PromptPreviewModal({
               /* @__PURE__ */ jsx200(
                 "button",
                 {
-                  className: `px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${copyState === "copied" ? "bg-emerald-500 text-white" : copyState === "failed" ? "bg-red-500 text-white" : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"}`,
+                  className: `px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${copyState === "copied" ? "bg-accent text-on-accent" : copyState === "failed" ? "bg-danger text-on-danger" : "bg-accent text-on-accent hover:bg-accent-hover"}`,
                   onClick: handleCopy2,
                   children: copyState === "copied" ? "Copied!" : copyState === "failed" ? "Copy failed" : "Copy prompt"
                 }
@@ -85048,7 +85114,7 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
     return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
   }
   if (error) {
-    return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-red-400 text-xs px-4 text-center", children: error });
+    return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-danger-ink text-xs px-4 text-center", children: error });
   }
   return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col flex-1 min-h-0", children: [
     /* @__PURE__ */ jsx201("div", { className: "px-3 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx201(
@@ -85074,10 +85140,10 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
       ))
     ] }) }),
     /* @__PURE__ */ jsxs159("div", { className: "flex-1 overflow-y-auto min-h-0 px-2 pb-2", children: [
-      category === "vfx" && /* @__PURE__ */ jsxs159("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-purple-300 leading-relaxed", children: [
+      category === "vfx" && /* @__PURE__ */ jsxs159("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-text-2 leading-relaxed", children: [
         "VFX blocks use WebGL via HTML-in-Canvas. Enable",
         " ",
-        /* @__PURE__ */ jsx201("span", { className: "font-mono text-purple-200", children: "chrome://flags/#html-in-canvas" }),
+        /* @__PURE__ */ jsx201("span", { className: "font-mono text-text-0", children: "chrome://flags/#html-in-canvas" }),
         " for preview."
       ] }),
       filteredBlocks.length === 0 ? /* @__PURE__ */ jsx201("div", { className: "flex items-center justify-center h-32 text-neutral-600 text-xs", children: "No blocks match your search" }) : /* @__PURE__ */ jsx201(
@@ -85341,7 +85407,7 @@ function BlockCard({
                 type: "button",
                 onClick: handleAdd,
                 title: "Add to composition at current time",
-                className: `flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${addState === "failed" ? "bg-red-500 text-white" : "bg-white text-black hover:bg-neutral-200"}`,
+                className: `flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${addState === "failed" ? "bg-danger text-on-danger" : "bg-white text-black hover:bg-white/85"}`,
                 children: [
                   /* @__PURE__ */ jsx201(
                     "svg",
@@ -85365,7 +85431,7 @@ function BlockCard({
                 type: "button",
                 onClick: handleShowPrompt,
                 title: "Generate a prompt to paste into your AI agent",
-                className: `flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${onAdd ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]" : "bg-white text-black hover:bg-neutral-200 text-[10px] font-semibold"}`,
+                className: `flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${onAdd ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]" : "bg-text-0 text-bg-0 hover:bg-text-2 text-[10px] font-semibold"}`,
                 children: [
                   /* @__PURE__ */ jsxs159(
                     "svg",
@@ -85408,7 +85474,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo43, useCallback as useCallback163, useEffect as useEffect136, useRef as useRef169, useState as useState132 } from "react";
+import { memo as memo43, useCallback as useCallback163, useEffect as useEffect136, useLayoutEffect as useLayoutEffect12, useMemo as useMemo80, useRef as useRef169, useState as useState132 } from "react";
 import { jsx as jsx202, jsxs as jsxs160 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -85471,6 +85537,34 @@ function syncIframePlayback(iframe, shouldPlay) {
     return false;
   }
 }
+var imageUrlOf = (snapshot3) => snapshot3.status === "ready" && snapshot3.value.kind === "image" ? snapshot3.value.url : null;
+function useLastFrame(request, snapshot3) {
+  const current = imageUrlOf(snapshot3);
+  const [kept, setKept] = useState132(null);
+  if (request && current && kept?.request !== request) setKept({ request, url: current });
+  useLayoutEffect12(() => {
+    if (!kept || kept.request === request) return;
+    const lease = thumbnailScheduler.acquire(kept.request, () => {
+    });
+    return () => lease.release();
+  }, [kept, request]);
+  return current ?? kept?.url ?? null;
+}
+function useNearViewport() {
+  const [element, setElement] = useState132(null);
+  const [near2, setNear] = useState132(false);
+  useEffect136(() => {
+    if (!element || near2) return;
+    if (typeof IntersectionObserver === "undefined") return setNear(true);
+    const observer = new IntersectionObserver(
+      (entries) => entries.some((entry2) => entry2.isIntersecting) && setNear(true),
+      { root: element.closest("[data-composition-list]"), rootMargin: "200px" }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, near2]);
+  return [setElement, near2];
+}
 function CompCard({
   projectId,
   comp,
@@ -85487,7 +85581,6 @@ function CompCard({
   const [hovered, setHovered] = useState132(false);
   const [stageSize, setStageSize] = useState132(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState132(false);
-  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState132(null);
   const iframeRef = useRef169(null);
   const hoverTimer = useRef169(null);
   const syncTimer = useRef169(null);
@@ -85521,7 +85614,18 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const previewUrl = compositionPreviewUrl(projectId, comp);
   const thumbnailUrl2 = compositionCardThumbnailUrl(projectId, comp, contentRevision);
-  const thumbnailFailed = failedThumbnailUrl === thumbnailUrl2;
+  const [thumbnailBox, nearViewport] = useNearViewport();
+  const timelineSessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const thumbnailRequest = useMemo80(
+    () => previewBooted && nearViewport ? compositionThumbnailRequest(thumbnailUrl2, projectId, {
+      sessionEpoch: timelineSessionEpoch,
+      rich: true
+    }) : null,
+    [previewBooted, nearViewport, thumbnailUrl2, projectId, timelineSessionEpoch]
+  );
+  const thumbnail = useThumbnailLease(thumbnailRequest);
+  const frameUrl = useLastFrame(thumbnailRequest, thumbnail);
+  const thumbnailFailed = thumbnail.status === "error";
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
     cardHeight: CARD_H,
@@ -85571,52 +85675,57 @@ function CompCard({
       onPointerLeave: handleLeave,
       className: `group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-hidden focus-visible:bg-neutral-800/60 ${isActive ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
       children: [
-        /* @__PURE__ */ jsxs160("div", { className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative", children: [
-          thumbnailFailed ? /* @__PURE__ */ jsx202("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : !previewBooted ? null : /* @__PURE__ */ jsx202(
-            "img",
-            {
-              src: thumbnailUrl2,
-              alt: "",
-              draggable: false,
-              loading: "lazy",
-              decoding: "async",
-              onError: () => setFailedThumbnailUrl(thumbnailUrl2),
-              className: `absolute inset-0 h-full w-full object-contain transition-opacity ${livePreviewLoaded ? "opacity-0" : "opacity-100"}`
-            }
-          ),
-          hovered && /* @__PURE__ */ jsx202(
-            "iframe",
-            {
-              ref: iframeRef,
-              src: previewUrl,
-              sandbox: "allow-scripts allow-same-origin",
-              className: "absolute border-none pointer-events-none",
-              style: {
-                transformOrigin: "0 0",
-                width: stageSize.width,
-                height: stageSize.height,
-                left: thumbnailOffsetX,
-                top: thumbnailOffsetY,
-                transform: `scale(${previewScale})`
-              },
-              onLoad: (e) => {
-                try {
-                  const iframe = e.currentTarget;
-                  const root = iframe.contentDocument?.querySelector("[data-composition-id]");
-                  const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
-                  const height = Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
-                  setStageSize({ width, height });
-                  setLivePreviewLoaded(true);
-                  requestIframePlaybackSync(true);
-                } catch {
-                  setStageSize(DEFAULT_PREVIEW_STAGE);
+        /* @__PURE__ */ jsxs160(
+          "div",
+          {
+            ref: thumbnailBox,
+            className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative",
+            children: [
+              thumbnailFailed ? /* @__PURE__ */ jsx202("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : !frameUrl ? null : /* @__PURE__ */ jsx202(
+                "img",
+                {
+                  src: frameUrl,
+                  alt: "",
+                  draggable: false,
+                  decoding: "async",
+                  className: `absolute inset-0 h-full w-full object-contain transition-opacity ${livePreviewLoaded ? "opacity-0" : "opacity-100"}`
                 }
-              },
-              title: `${name} preview`,
-              tabIndex: -1
-            }
-          )
-        ] }),
+              ),
+              hovered && /* @__PURE__ */ jsx202(
+                "iframe",
+                {
+                  ref: iframeRef,
+                  src: previewUrl,
+                  sandbox: "allow-scripts allow-same-origin",
+                  className: "absolute border-none pointer-events-none",
+                  style: {
+                    transformOrigin: "0 0",
+                    width: stageSize.width,
+                    height: stageSize.height,
+                    left: thumbnailOffsetX,
+                    top: thumbnailOffsetY,
+                    transform: `scale(${previewScale})`
+                  },
+                  onLoad: (e) => {
+                    try {
+                      const iframe = e.currentTarget;
+                      const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+                      const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
+                      const height = Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
+                      setStageSize({ width, height });
+                      setLivePreviewLoaded(true);
+                      requestIframePlaybackSync(true);
+                    } catch {
+                      setStageSize(DEFAULT_PREVIEW_STAGE);
+                    }
+                  },
+                  title: `${name} preview`,
+                  tabIndex: -1
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs160(
           "div",
           {
@@ -85638,7 +85747,7 @@ function CompCard({
                   "span",
                   {
                     "aria-label": `${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`,
-                    className: "shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400",
+                    className: "shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink",
                     children: lintInfo.count
                   }
                 )
@@ -85657,7 +85766,7 @@ function CompCard({
               event.stopPropagation();
               onAddToTimeline();
             },
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100",
+            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-accent-ink group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100",
             children: /* @__PURE__ */ jsx202("span", { "aria-hidden": "true", children: "+" })
           }
         ),
@@ -85671,7 +85780,7 @@ function CompCard({
               e.stopPropagation();
               onRender();
             },
-            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${isRendering ? "text-neutral-600 cursor-not-allowed" : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"}`,
+            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${isRendering ? "text-neutral-600 cursor-not-allowed" : "text-neutral-600 hover:text-accent-ink hover:bg-neutral-800"}`,
             children: /* @__PURE__ */ jsxs160(
               "svg",
               {
@@ -85713,7 +85822,7 @@ var CompositionsTab = memo43(function CompositionsTab2({
   if (compositions.length === 0) {
     return /* @__PURE__ */ jsx202("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx202("p", { className: "text-xs text-neutral-600 text-center", children: "No compositions found" }) });
   }
-  return /* @__PURE__ */ jsx202("div", { className: "flex-1 overflow-y-auto", children: compositions.map((comp) => /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx202("div", { className: "flex-1 overflow-y-auto", "data-composition-list": true, children: compositions.map((comp) => /* @__PURE__ */ jsx202(
     CompCard,
     {
       projectId,
@@ -85759,7 +85868,7 @@ function SidebarLintButton({
       type: "button",
       onClick: onLint,
       disabled: linting,
-      className: "w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40",
+      className: "w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-warning-ink enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40",
       children: [
         /* @__PURE__ */ jsxs161(
           "svg",
@@ -85782,7 +85891,7 @@ function SidebarLintButton({
           {
             "data-lint-badge": hasError ? "error" : "warning",
             style: hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : void 0,
-            className: hasError ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400",
+            className: hasError ? "ml-1 min-w-[16px] rounded-full bg-danger px-1 text-[9px] font-bold text-on-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-warning-ink",
             children: [
               findingCount,
               /* @__PURE__ */ jsx204("span", { className: "sr-only", children: hasError ? " lint findings, including errors" : " lint findings, warnings only" })
@@ -86520,7 +86629,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                         handleSelectLayer(layer);
                       }
                     },
-                    className: `group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-panel-accent" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
+                    className: `group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-accent-ink" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
                     style: { paddingLeft: 8 + layer.depth * 16 },
                     title: draggable ? layer.element.hasAttribute("data-hf-group") ? "Double-click to enter group" : void 0 : "This layer can't be reordered",
                     children: [
@@ -86548,7 +86657,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                       /* @__PURE__ */ jsx206(
                         "span",
                         {
-                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-panel-accent" : isCompHost ? "bg-panel-accent/40 text-panel-accent" : "bg-panel-hover text-panel-text-4"}`,
+                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-accent-ink" : isCompHost ? "bg-on text-accent-ink" : "bg-panel-hover text-panel-text-4"}`,
                           children: getTagBadge(layer.tagName)
                         }
                       ),
@@ -86829,7 +86938,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
   }
   const gated = !ANIMATION_PIPELINE_WIRED;
   return /* @__PURE__ */ jsxs165("div", { className: "flex flex-col h-full min-h-0", children: [
-    gated && /* @__PURE__ */ jsx208("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx208("p", { className: "text-2xs text-amber-300/90 leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
+    gated && /* @__PURE__ */ jsx208("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx208("p", { className: "text-2xs text-warning-ink leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
     /* @__PURE__ */ jsxs165("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
       /* @__PURE__ */ jsx208(
         AnimationPhase,
@@ -86870,7 +86979,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
         onClick: handleApplyToAll,
         disabled: gated,
         title: gated ? "Disabled until animation editing is applied to playback" : void 0,
-        className: "w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300",
+        className: "w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-accent-ink transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300",
         children: "Apply to all groups"
       }
     ) })
@@ -87031,7 +87140,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onClick: () => setActiveTab("style"),
             className: [
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
-              activeTab === "style" ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
+              activeTab === "style" ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
             ].join(" "),
             children: "Style"
           }
@@ -87045,7 +87154,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onClick: () => setActiveTab("animation"),
             className: [
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
-              activeTab === "animation" ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
+              activeTab === "animation" ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
             ].join(" "),
             children: "Animation"
           }
@@ -87236,7 +87345,7 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
     /* @__PURE__ */ jsxs167("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
       /* @__PURE__ */ jsx210("div", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Parameters" }),
       params.length === 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-neutral-500", children: "This block has no editable parameters." }),
-      !fileManager && params.length > 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-amber-400/90", children: "Block params can't be edited here \u2014 no project file access." }),
+      !fileManager && params.length > 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-warning-ink", children: "Block params can't be edited here \u2014 no project file access." }),
       params.map((param) => /* @__PURE__ */ jsx210(
         ParamControl,
         {
@@ -87248,11 +87357,11 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
         param.key
       )),
       commitState.tone === "saving" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-neutral-500", role: "status", children: "Saving\u2026" }),
-      commitState.tone === "saved" && /* @__PURE__ */ jsxs167("div", { className: "text-[10px] text-emerald-500/90", role: "status", children: [
+      commitState.tone === "saved" && /* @__PURE__ */ jsxs167("div", { className: "text-[10px] text-accent-ink", role: "status", children: [
         "Saved to ",
         compositionPath
       ] }),
-      commitState.tone === "error" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-red-400", role: "alert", children: commitState.message })
+      commitState.tone === "error" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-danger-ink", role: "alert", children: commitState.message })
     ] })
   ] });
 });
@@ -87334,7 +87443,7 @@ function ParamControl({
 import { memo as memo51 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo50, useState as useState140, useRef as useRef175, useEffect as useEffect141, useLayoutEffect as useLayoutEffect12, useId as useId5 } from "react";
+import { memo as memo50, useState as useState140, useRef as useRef175, useEffect as useEffect141, useLayoutEffect as useLayoutEffect13, useId as useId5 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -87426,7 +87535,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                 )
               ] }),
               isRendering && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" }) }),
-              job.status === "failed" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-danger" }) }),
+              job.status === "failed" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-danger-ink" }) }),
               job.status === "cancelled" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-text-5" }) })
             ]
           }
@@ -87439,7 +87548,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
           isRendering && /* @__PURE__ */ jsxs168("div", { className: "mt-1", children: [
             /* @__PURE__ */ jsxs168("div", { className: "flex items-center justify-between mb-0.5", children: [
               /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-4", children: job.stage || "Rendering" }),
-              /* @__PURE__ */ jsxs168("span", { className: "text-step-9 font-mono text-accent", children: [
+              /* @__PURE__ */ jsxs168("span", { className: "text-step-9 font-mono text-accent-ink", children: [
                 job.progress,
                 "%"
               ] })
@@ -87463,7 +87572,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               }
             )
           ] }),
-          job.status === "failed" && job.error && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-danger mt-0.5 block", children: job.error }),
+          job.status === "failed" && job.error && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-danger-ink mt-0.5 block", children: job.error }),
           job.status === "cancelled" && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-4 mt-0.5 block", children: "Cancelled" }),
           !isRendering && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-5", children: formatTimeAgo(job.createdAt) })
         ] }),
@@ -87602,17 +87711,17 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
       className: "flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5",
       children: [
         /* @__PURE__ */ jsxs169("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx212("span", { className: "text-[11px] font-semibold text-amber-300", children: status.title ?? "FFmpeg not found" }),
+          /* @__PURE__ */ jsx212("span", { className: "text-[11px] font-semibold text-warning-ink", children: status.title ?? "FFmpeg not found" }),
           /* @__PURE__ */ jsx212("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.detail ?? "FFmpeg is required to encode video." })
         ] }),
         status.command ? /* @__PURE__ */ jsxs169("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx212("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-black/40 px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
+          /* @__PURE__ */ jsx212("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-input px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
           /* @__PURE__ */ jsx212(
             "button",
             {
               type: "button",
               onClick: () => void copy(status.command ?? ""),
-              className: `h-6 w-14 shrink-0 rounded-xs border border-amber-500/30 text-[10px] font-medium text-amber-200 transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`,
+              className: `h-6 w-14 shrink-0 rounded-xs border border-amber-500/30 text-[10px] font-medium text-warning-ink transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`,
               children: copied ? "Copied" : "Copy"
             }
           )
@@ -87624,7 +87733,7 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
               type: "button",
               onClick: onRecheck,
               disabled: checking,
-              className: `rounded-xs py-0.5 text-[10px] font-medium text-amber-200 underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`,
+              className: `rounded-xs py-0.5 text-[10px] font-medium text-warning-ink underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`,
               children: checking ? "Checking\u2026" : "Recheck"
             }
           ),
@@ -87719,7 +87828,7 @@ function FormatInfoTooltip({ format }) {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
   useEffect141(() => () => clearTimeout(timeoutRef.current), []);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!open) return;
     const el = triggerRef.current;
     if (!el) return;
@@ -87985,7 +88094,7 @@ var RenderQueue = memo50(function RenderQueue2({
         role: "alert",
         className: "flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10",
         children: [
-          /* @__PURE__ */ jsx213("span", { className: "text-step-10 text-danger", children: actionError }),
+          /* @__PURE__ */ jsx213("span", { className: "text-step-10 text-danger-ink", children: actionError }),
           onDismissActionError && /* @__PURE__ */ jsx213(
             IconButton,
             {
@@ -88013,7 +88122,7 @@ var RenderQueue = memo50(function RenderQueue2({
       }
     ),
     /* @__PURE__ */ jsx213("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs170("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
-      /* @__PURE__ */ jsx213("p", { className: "text-step-10 text-danger text-center", children: loadError }),
+      /* @__PURE__ */ jsx213("p", { className: "text-step-10 text-danger-ink text-center", children: loadError }),
       onRetryLoad && /* @__PURE__ */ jsx213(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
     ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs170("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
       /* @__PURE__ */ jsxs170(
@@ -88162,7 +88271,7 @@ function SlideList({
           role: "button",
           tabIndex: 0,
           "aria-pressed": isSelected,
-          className: `flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-[11px] transition-colors ${isSelected ? "bg-studio-accent/20 text-white" : "hover:bg-neutral-800/60 text-neutral-300"}`,
+          className: `flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-[11px] transition-colors ${isSelected ? "bg-on text-text-0" : "hover:bg-neutral-800/60 text-neutral-300"}`,
           onClick: () => onSelect(scene.id),
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -88191,7 +88300,7 @@ function SlideList({
                   "aria-label": "Move slide up",
                   title: "Move up",
                   disabled: slideIndex <= 0,
-                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
+                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
                   onClick: (e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "up");
@@ -88206,7 +88315,7 @@ function SlideList({
                   "aria-label": "Move slide down",
                   title: "Move down",
                   disabled: slideIndex === slides.length - 1,
-                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
+                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
                   onClick: (e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "down");
@@ -88242,7 +88351,7 @@ function SlideInspector({
       /* @__PURE__ */ jsx215(
         "textarea",
         {
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-white resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-text-0 resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           rows: 3,
           placeholder: "Speaker notes or script...",
           value: slide?.notes ?? "",
@@ -88257,7 +88366,7 @@ function SlideInspector({
           "button",
           {
             type: "button",
-            className: "text-[10px] px-2 py-0.5 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-neutral-200 transition-colors",
+            className: "text-[10px] px-2 py-0.5 rounded-sm bg-hover hover:bg-press text-neutral-200 transition-colors",
             onClick: onMarkFragment,
             title: `Mark ${currentTime.toFixed(2)}s as hold-point`,
             children: [
@@ -88280,7 +88389,7 @@ function SlideInspector({
               {
                 type: "button",
                 "aria-label": `Remove fragment at ${t.toFixed(2)}s`,
-                className: "text-neutral-400 hover:text-red-400 transition-colors",
+                className: "text-neutral-400 hover:text-danger-ink transition-colors",
                 onClick: () => onRemoveFragment(t),
                 children: "\xD7"
               }
@@ -88318,7 +88427,7 @@ function BranchTree({
         {
           id: inputId,
           type: "text",
-          className: "flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           placeholder: "New branch name...",
           value: newLabel,
           onChange: (e) => setNewLabel(e.target.value),
@@ -88332,7 +88441,7 @@ function BranchTree({
         "button",
         {
           type: "button",
-          className: "px-2 py-1 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-[11px] text-neutral-200 transition-colors shrink-0",
+          className: "px-2 py-1 rounded-sm bg-hover hover:bg-press text-[11px] text-neutral-200 transition-colors shrink-0",
           onClick: handleCreate,
           children: "Add"
         }
@@ -88377,7 +88486,7 @@ function BranchItem({
       editing ? /* @__PURE__ */ jsx215(
         "input",
         {
-          className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
+          className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
           value: draft,
           autoFocus: true,
           onChange: (e) => setDraft(e.target.value),
@@ -88393,7 +88502,7 @@ function BranchItem({
         {
           role: "button",
           tabIndex: 0,
-          className: "flex-1 text-[11px] text-white font-medium truncate cursor-pointer hover:text-neutral-300",
+          className: "flex-1 text-[11px] text-text-0 font-medium truncate cursor-pointer hover:text-neutral-300",
           title: "Click to rename",
           onClick: () => setEditing(true),
           onKeyDown: (e) => {
@@ -88410,14 +88519,14 @@ function BranchItem({
         {
           type: "button",
           "aria-label": `Delete branch ${seq.label}`,
-          className: "text-[10px] text-neutral-500 hover:text-red-400 active:scale-[0.95] transition-colors px-1",
+          className: "text-[10px] text-neutral-500 hover:text-danger-ink active:scale-[0.95] transition-colors px-1",
           onClick: () => setConfirmingDelete(true),
           children: "\u2715"
         }
       )
     ] }),
-    confirmingDelete && /* @__PURE__ */ jsxs171("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
-      /* @__PURE__ */ jsxs171("span", { className: "text-[10px] text-red-400", children: [
+    confirmingDelete && /* @__PURE__ */ jsxs171("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
+      /* @__PURE__ */ jsxs171("span", { className: "text-[10px] text-danger-ink", children: [
         "Delete branch \u201C",
         seq.label,
         "\u201D",
@@ -88433,7 +88542,7 @@ function BranchItem({
               setConfirmingDelete(false);
               onDelete(seq.id);
             },
-            className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors",
+            className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors",
             children: "Delete"
           }
         ),
@@ -88472,7 +88581,7 @@ function BranchItem({
                 {
                   type: "button",
                   "aria-pressed": isSelected,
-                  className: `flex-1 text-left truncate transition-colors hover:text-neutral-200 ${isSelected ? "text-white" : "text-neutral-400"}`,
+                  className: `flex-1 text-left truncate transition-colors hover:text-neutral-200 ${isSelected ? "text-text-0" : "text-neutral-400"}`,
                   onClick: () => onSelectBranchSlide(seq.id, scene.id),
                   children: scene.label || scene.id
                 }
@@ -88524,7 +88633,7 @@ function HotspotTool({
         "input",
         {
           type: "text",
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           placeholder: "Button label...",
           value: hotspotLabel,
           onChange: (e) => setHotspotLabel(e.target.value),
@@ -88535,7 +88644,7 @@ function HotspotTool({
       /* @__PURE__ */ jsxs171(
         "select",
         {
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
           value: targetSequenceId,
           onChange: (e) => setTargetSequenceId(e.target.value),
           "aria-label": "Target branch sequence",
@@ -88551,7 +88660,7 @@ function HotspotTool({
           type: "button",
           disabled: !elementKey3 || !targetSequenceId,
           title: !elementKey3 ? "Select an element on the canvas first" : !targetSequenceId ? "Choose a target branch first" : void 0,
-          className: "px-3 py-1.5 rounded-sm bg-studio-accent/80 enabled:hover:bg-studio-accent enabled:active:scale-[0.98] text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+          className: "px-3 py-1.5 rounded-sm bg-accent enabled:hover:bg-accent-hover enabled:active:scale-[0.98] text-on-accent text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
           onClick: handleMakeHotspot,
           children: "Make hotspot"
         }
@@ -88576,7 +88685,7 @@ function HotspotTool({
                 {
                   type: "button",
                   "aria-label": `Remove hotspot ${h.label}`,
-                  className: "text-[10px] text-neutral-500 hover:text-red-400 transition-colors",
+                  className: "text-[10px] text-neutral-500 hover:text-danger-ink transition-colors",
                   onClick: () => onRemoveHotspot(selectedSceneId, h.id),
                   children: "\u2715"
                 }
@@ -88988,7 +89097,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   return /* @__PURE__ */ jsxs172(
     "div",
     {
-      className: "flex flex-col h-full overflow-y-auto text-white",
+      className: "flex flex-col h-full overflow-y-auto text-text-0",
       onKeyDown: (e) => {
         if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
           const target = e.target instanceof HTMLElement ? e.target.tagName : "";
@@ -89003,16 +89112,16 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
           "div",
           {
             role: "alert",
-            className: "flex items-center justify-between gap-2 px-3 py-2 bg-red-950/40 border-b border-red-500/40",
+            className: "flex items-center justify-between gap-2 px-3 py-2 bg-danger/15 border-b border-red-500/40",
             children: [
-              /* @__PURE__ */ jsx216("span", { className: "text-[11px] text-red-300", children: "Changes not saved" }),
+              /* @__PURE__ */ jsx216("span", { className: "text-[11px] text-danger-ink", children: "Changes not saved" }),
               /* @__PURE__ */ jsx216(
                 "button",
                 {
                   type: "button",
                   disabled: retrying,
                   onClick: handleRetryPersist,
-                  className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors",
+                  className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger enabled:hover:brightness-95 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors",
                   children: retrying ? "Retrying\u2026" : "Retry"
                 }
               )
@@ -89129,7 +89238,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo52, useCallback as useCallback176, useEffect as useEffect144, useMemo as useMemo80, useState as useState146 } from "react";
+import { memo as memo52, useCallback as useCallback176, useEffect as useEffect144, useMemo as useMemo81, useState as useState146 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback173 } from "react";
@@ -89474,7 +89583,7 @@ function DeclarationForm({
         className: VARIABLES_INPUT_CLASS
       }
     ) }),
-    error && /* @__PURE__ */ jsx217("p", { className: "text-[10px] text-red-400", children: error }),
+    error && /* @__PURE__ */ jsx217("p", { className: "text-[10px] text-danger-ink", children: error }),
     /* @__PURE__ */ jsxs173("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
       /* @__PURE__ */ jsx217(
         "button",
@@ -89512,7 +89621,7 @@ function RowAction({
       type: "button",
       onClick,
       title,
-      className: `h-5 rounded px-1.5 text-[9px] text-neutral-500 hover:bg-neutral-800 ${danger ? "hover:text-red-400" : "hover:text-neutral-200"}`,
+      className: `h-5 rounded px-1.5 text-[9px] text-neutral-500 hover:bg-neutral-800 ${danger ? "hover:text-danger-ink" : "hover:text-neutral-200"}`,
       children: label
     }
   );
@@ -89656,7 +89765,7 @@ function formatIssue(issue) {
 }
 function ValidationStrip({ issues }) {
   if (issues.length === 0) return null;
-  return /* @__PURE__ */ jsx220("div", { className: "space-y-1 rounded-lg border border-red-900/60 bg-red-950/30 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx220("p", { className: "text-[10px] text-red-300", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
+  return /* @__PURE__ */ jsx220("div", { className: "space-y-1 rounded-lg border border-danger/40 bg-danger/15 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx220("p", { className: "text-[10px] text-danger-ink", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
 }
 function VariableRow({
   decl,
@@ -89677,7 +89786,7 @@ function VariableRow({
       unused && /* @__PURE__ */ jsx220(
         "span",
         {
-          className: "rounded-sm bg-amber-900/40 px-1 py-px text-[8px] text-amber-400",
+          className: "rounded-sm bg-amber-500/15 px-1 py-px text-[8px] text-warning-ink",
           title: "No script reads this variable",
           children: "unused"
         }
@@ -89739,7 +89848,7 @@ function PreviewModeHeader({
       /* @__PURE__ */ jsx220(
         "span",
         {
-          className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-studio-accent" : "bg-neutral-800 text-neutral-500"}`,
+          className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-accent-ink" : "bg-neutral-800 text-neutral-500"}`,
           children: hasOverrides ? `Previewing ${overrideCount} custom` : "Previewing defaults"
         }
       )
@@ -89825,22 +89934,22 @@ var VariablesPanel = memo52(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo80(
+  const declarations = useMemo81(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo80(
+  const usage = useMemo81(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo80(
+  const issues = useMemo81(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo80(
+  const effectiveValues = useMemo81(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -90155,15 +90264,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo81 } from "react";
+import { useMemo as useMemo82 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo81(() => {
+  const isSlideshowComposition = useMemo82(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo81(() => {
+  const slideshowScenes = useMemo82(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -91182,12 +91291,6 @@ function RippleEditIcon({ size = 16 }) {
   );
 }
 
-// src/components/timelineToolbarStyles.ts
-var flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-var flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
-var flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
-var flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
-
 // src/components/TimelineHistoryButtons.tsx
 import { Fragment as Fragment62, jsx as jsx225, jsxs as jsxs178 } from "react/jsx-runtime";
 function HistoryButton({ action, can, label, onClick }) {
@@ -91300,7 +91403,7 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
           shortcut: row.shortcut,
           onClick: row.run,
           "data-active": row.active || void 0,
-          className: row.active ? "bg-neutral-800 text-white" : void 0,
+          className: row.active ? "bg-press text-text-0" : void 0,
           children: /* @__PURE__ */ jsxs179("span", { className: "flex items-center gap-2", children: [
             row.icon,
             row.label
@@ -91487,7 +91590,7 @@ function TimelineToolbar({
                   disabled: !onToggleKeyframe,
                   onClick: onToggleKeyframe,
                   "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
-                  className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
+                  className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-hover ${keyframeState === "active" ? "text-accent-ink" : keyframeState === "inactive" ? "text-neutral-400 hover:text-accent-ink" : "text-neutral-600 hover:text-neutral-400"}`,
                   children: /* @__PURE__ */ jsx227("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx227("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx227(
                     "path",
                     {
@@ -91512,7 +91615,7 @@ function TimelineToolbar({
                   onClick: () => setAutoKeyframeEnabled(!autoKeyframeEnabled),
                   "aria-label": "Auto-record manual edits as keyframes",
                   "aria-pressed": autoKeyframeEnabled,
-                  className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
+                  className: `${flatBtn} active:scale-[0.98] hover:bg-hover ${autoKeyframeEnabled ? "text-danger-ink" : "text-neutral-600 hover:text-neutral-400"}`,
                   children: /* @__PURE__ */ jsxs180("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
                     /* @__PURE__ */ jsx227("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
                     /* @__PURE__ */ jsx227(
@@ -91589,7 +91692,7 @@ function TimelineToolbar({
                   onClick: () => {
                     if (canAdd) addBeatAtCompositionTime(currentTime);
                   },
-                  className: canAdd ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]` : flatDisabled,
+                  className: canAdd ? `${flatBtn} text-text-2 hover:bg-hover hover:text-accent-ink active:scale-[0.98]` : flatDisabled,
                   children: /* @__PURE__ */ jsx227("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx227(
                     "path",
                     {
@@ -91618,7 +91721,7 @@ function TimelineToolbar({
                 "aria-label": thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
                 "aria-pressed": thumbnailsVisible,
                 onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
-                className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
+                className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
                 children: /* @__PURE__ */ jsx227(Image3, { size: 16, "aria-hidden": "true" })
               }
             )
@@ -91631,7 +91734,7 @@ function TimelineToolbar({
             onClick: () => setZoomMode("fit"),
             "aria-label": "Fit timeline to width",
             "aria-pressed": zoomMode === "fit",
-            className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
+            className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
             children: /* @__PURE__ */ jsx227(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
           }
         ) }),
@@ -91665,7 +91768,7 @@ function TimelineToolbar({
                 timelineSliderToZoomPercent(Number(e.target.value), timelineFitPps)
               );
             },
-            className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
+            className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           }
         ),
         /* @__PURE__ */ jsx227(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx227(
@@ -92016,7 +92119,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     recordEdit: editHistory.recordEdit,
     setRefreshKey
   });
-  const masterCompPath = useMemo82(
+  const masterCompPath = useMemo83(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -92121,7 +92224,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   const dismissBlockParams = useCallback186(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo82(
+  const layout = useMemo83(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
@@ -92273,7 +92376,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   handleToggleRecordingRef.current = handleToggleRecording;
   const canvasRectRef = useRef181(null);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
       return;
@@ -92340,7 +92443,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo82(
+  const timelineToolbar = useMemo83(
     () => /* @__PURE__ */ jsx229(
       TimelineToolbar,
       {
@@ -92857,7 +92960,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback188, useMemo as useMemo83, useRef as useRef183, useState as useState151 } from "react";
+import { useCallback as useCallback188, useMemo as useMemo84, useRef as useRef183, useState as useState151 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -92873,7 +92976,7 @@ function useDomStyleCommit({
   const [queue2] = useState151(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const versions = useRef183(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo83(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo84(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -92905,11 +93008,10 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback189, useMemo as useMemo84, useRef as useRef184, useState as useState152 } from "react";
+import { useCallback as useCallback189, useMemo as useMemo85, useRef as useRef184, useState as useState152 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
-var noDomBoxSizeRoute = () => Promise.reject(new Error("Resize has no DOM route here"));
 function useDomGeometryCommit({
   projectId,
   iframeRef,
@@ -92922,7 +93024,7 @@ function useDomGeometryCommit({
   const projectIdRef = useRef184(projectId);
   projectIdRef.current = projectId;
   const pending2 = useRef184(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo84(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo85(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback189(
     () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
     [reloadPreview, iframeRef]
@@ -92962,15 +93064,11 @@ function useDomGeometryCommit({
     },
     [commitPositionPatchToHtml, queue2]
   );
-  const stageElementPositionOffset = useCallback189(
-    (selection, next, coalesceKey) => stageElementOffset(
-      { commitPositionPatchToHtml: commitWithFreshQueue, showToast },
-      selection,
-      next,
-      coalesceKey
-    ),
-    [commitWithFreshQueue, showToast]
-  );
+  const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } = useDomGeometryCommits({
+    showToast,
+    commitPositionPatchToHtml: commitWithFreshQueue,
+    readOnlyPreview: false
+  });
   const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
   const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
   const {
@@ -92989,7 +93087,8 @@ function useDomGeometryCommit({
     makeFetchFallback,
     trackGsapInteractionFailure,
     stageElementPositionOffset,
-    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
     commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,
@@ -93015,7 +93114,7 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo84(
+  return useMemo85(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),